ПОДАННЯ ТЕКСТОВИХ ДОКУМЕНТІВ У ФОРМАТІ HTML

<12 3 4 5 6 7 >

Для виконання лабораторної роботи використовується ПЕОМ, операційна система Windows 2007, Web - браузер Internet Explorer / Opera / Google Chrome , текстовий редактор .

1.4 Порядок виконання роботи та вказівки до її виконання

1.4.1 Розглянемо деякі основні теоретичні положення , необхідні для виконання даної лабораторної роботи

Розглянемо приклад коду для завдання заголовка і назви документа (рис. 1.1):

<HTML>

<Head> Заголовок документа <Title>Название документа в окне браузера

</Title> </Head>

</HTML>

Рисунок 1.1 – Вікно браузера із заголовком та назвою документа

Тег Head – визначає початок і кінець заголовка документа. Є контейнером для елементів, що містять технічну інформацію про документ. (TITLE, BASE, STYLE, LINK, META).

Тег Title – елемент HTML-коду, який відповідає за ті слова, які з'являться в заголовку веб-браузера.

Приклад коду для того, щоб заголовок документа був синього кольору, посередині сторінки з розміром першого рівня (<h1> Тема першого рівня </ h1>) рис. 1.2.

<HTML>

<Head> <H1 Align = Center> <font color = blue> Тема Документа </ H1>

<Title> Назва документа у вікні браузера </ Title>

</ Head>

</ HTML>

Рисунок 1.2 – Вікно з заголовком документа

Тег <font> являє собою контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура. Хоча цей тег досі підтримується всіма браузерами, він вважається застарілим і від його використання рекомендується відмовитися на користь стилів. атрибути:

• color – встановлює колір тексту;

• face – визначає гарнітуру шрифту;

• size – задає розмір шрифту в умовних одиницях

Наприклад, код в HTML 5 (рис. 1.3):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Название документа в окне браузера</title>

</head>

<body>

<p><font size="5" color="red" face="Arial">П</font> ервая буква этого предложения

написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>

</body>

</html>

Рисунок 1.3 – Вікно браузера з прикладом розміру і

кольору шрифту тексту

Тег <p> ... </ p> створює новий абзац.

Тег <div> ... </ div> ділить Веб-сторінку на області з метою застосування стилів.

Тег <BR> ... </BR> – перенесення рядка.

Тег <BODY> ... </ BODY> – тіло Веб-сторінки, яке описує її вміст.

Приклад коду із завданням фону і кордонів документа (рис. 1.4):

<HTML>

<Head> <H1 Align=Center> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> Текст документа </Body>

</HTML>

Рисунок 1.4 – Вікно браузера з прикладом завдання кольору фону

Розглянемо атрибути web-документа (табл. 1.1).

Таблиця 1.1 – Атрибути документа

Назва	Опис
alink, link, vlink	Визначають колір гіперпосилань

Продовження табл. 1.1

Назва	Опис
background	Визначає графічний фон
bgcolor	Змінює колір фону
bgproperties	Визначає можливість переміщення графічного фону під час перегляду сторінки
bottommargin	Змінює висоту нижнього поля
leftmargin	Змінює ширину лівого поля
marginheight	Змінює висоту верхнього і нижнього полів
marginwidth	Змінює ширину лівого і правого полів
rightmargin	Змінює ширину правого поля
Text	Змінює колір тексту
topmargin	Змінює висоту верхнього поля

Приклад коду для форматування тексту (рис. 1.5):

<HTML>

<Head> <H1 Align="Center"> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> <H3 align=center>Текст документа </H3>

<p>MARGINHEIGHT - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.</p>

<p>TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.</p>

<div> MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.

BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR - определяет цвет фона документа.</div>

<I><h5 align="right"> TEXT - определяет цвет текста в документе.</I></h5>

<p>LINK - определяет цвет гиперссылок в документе.</p>

<p>ALINK - определяет цвет подсветки гиперссылок в момент нажатия.</p>

<p>VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.</p>

<p>Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.</p>

</Body>

</HTML>

Рисунок 1.5 – Приклад форматування тексту

Розглянемо приклад написання посилань.

Абсолютні посилання можуть бути занадто громіздкими і переставати працювати, якщо переміщений молодший ( child ) по ієрархії документ.

Відносні посилання легше вводити і оновлювати, але і цей зв'язок обривається, якщо переміщений старший ( parent ) по ієрархії документ. Обидва види зв'язку можуть порушитися при перенесенні документа з одного комп'ютера на інший.

Тег <a> ... </a> – є одним з важливих елементів HTML і призначений для створення посилань.

Тег < base > – інструктує браузер щодо повного базової адреси поточного документа .

Тег < nav > – групує посилання навігації по сайту.

Синтаксис для того, щоб створити гіпертекстове зв'язок:

< А HREF = " адрес_pecypcа "> выделенний_текст_ссылки </ А > ,

Приклад в HTML 5 .HTML5IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>

<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>

<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>

</html>

Наведемо приклад коду вікна веб-сторінки з посиланням на інший документ і з виведенням на екран картинки по правому краю (рис. 1.6)

<HTML>

<Head> <H1 Align="Center"> <font color=blue> Заголовок Документа </H1>

<Title> Название документа в окне браузера </Title>

</Head>

<Body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <font color=black> <H3 align=center>Текст документа </H3>

<div> MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.

BGCOLOR - определяет цвет фона документа.</div>

<I><h5 align="right"> TEXT - определяет цвет текста в документе.</I></h5>

<p>LINK - определяет цвет гиперссылок в документе.</p>

<p>ALINK - определяет цвет подсветки гиперссылок в момент нажатия.</p>

<p>VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.</p>

<A HREF="Document 1.html"> <A HREF="Document 2.html">Ссылка</A>

</Body>

</HTML>

Рисунок 1.6 – Вікно браузера з посиланням на інший документ і з виведенням на екран картинки по правому краю

Приклад коду для виводу на екран документа з наступними параметрами: ширина лівого поля 100.pxl, висота верхнього поля 100.pxl, ширина правого поля 100.pxl, висота нижнього поля 300.pxl. Документ містить зображення з розмірами width = "120" height = "190" (рис. 1.7).

<Body leftmargin="100"

topmargin="100" rightmargin="100"

bottommargin="300">

Рисунок 1.7 – Вікно браузера з документом, що містить зображення з розмірами 120х190

Приклад коду для гіпертекстового посилання на зображення (рис. 1.8):

<A HREF="Document 1.html"><A HREF="Document 2.html"><H2 Align="left"> <font color="Maroon"> Адрес дворца </H2> </A> /* при натисканні на «Адреса палацу», відкривається Document 2.*/

Примітка. Document 3.htm був створений окремо, в який завантажено зображення notrdam1 (рис. 1.7).