Лекція 4. СТРУКТУРНІ ТЕГИ ДОКУМЕНТІВ HTML І ФОРМАТУВАННЯ ТЕКСТУ

 

Лекція 4. СТРУКТУРНІ ТЕГИ ДОКУМЕНТІВ HTML І ФОРМАТУВАННЯ ТЕКСТУ

 

Створення HTML-документа відбувається розташуванням тегів (tags) мови HTML всередині звичайного неформатованого тексту. Теги HTML — це послідовності символів, які починаються знаком “менше” (<) і закінчуються знаком “більше” (>). Теги можуть мати атрибути, які, в свою чергу, можуть приймати певні значення.

Браузери WWW обов’язково дотримуються трьох правил при синтаксичному аналізі HTML:

1.     Пробіли та інші “невидимі символи” ігноруються.

2.     Теги форматування можуть бути написані великими або малими літерами.

3.     Більшість тегів форматування пишуться парами.

Технологія створення HTML-документа

HTML-документ можна створювати за допомогою найпростішого текстового процесора, який дозволяє зберігати текстові (ASCII) файли, наприклад Windows Notepad (Блокнот). При цьому не застосовуються ніякі коди для форматування.

Порядок створення Web-документа:

1.      У головному меню WINDOWS вибрати пункт Пуск-Программы-

Стандартные -Блокнот.

2.     Ввести структуру документа.

3.     Зберегти створений документ, обов`язково надавши йому розширення .htm

4.     Перевірити вигляд створеної гіпертекстової сторінки. Для перевірки одержаної сторінки завантажити Internet Explorer, відкрити меню File, вибрати команду Open file, завантажити створений файл.

5.      Для внесення змін повернутись до програми Блокнот, внести зміни, зберегти файл.

6.      Активізувати Internet  Explorer, натиснути кнопку Обновить.

Структурні теги HTML-документа визначають початок і закінчення різних частин документа. Хоча багато браузерів правильно інтерпретують документ і без них, правила вимагають, щоб структурні теги були включені до документа. На початковому етапі вивчення мови HTML ці теги обов’язково повинні включатись до кожного із створюваних документів.

Позначення HTML-документа

<HTML>… < /HTML> - включають в себе всі інші теги HTML і весь інформаційний зміст документа.

< HTML> розташовується у першому рядку документа;

< /HTML> - у останньому рядку.

Заголовок документа

<HEAD>… </HEAD> - містить інформацію про документ.

Назва документа

<TITLE>… </TITLE> - назва документа, яка відображається в рядку заголовка Internet Explorer.

Тіло документа

<BODY>…</BODY> - тіло документа містить весь текст з інформацією і всі теги HTML, які використовуються для форматування тексту.

ПРИКЛАД (базова структура HTML-документа)

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

 

Відображення файла програмою-браузером:

 

 

Microsoft Internet Explorer та інші браузери допускають застосування атрибутів LEFTMARGIN=”n” і  ТОРМАRGIN=”n” у тегу <ВОDY>. Атрибут LEFTMARGIN = задає ліве поле для всієї сторінки. ТОРМАRGIN= визначає верхнє поле. Число n вказує на ширину поля у пікселях. Наприклад, тег <ВОDY LEFTMARGIN =”40"> створює на всій сторінці ліве поле шириною 40 пікселів. При n= 0 ліве поле відсутнє.

 

ФОРМАТУВАННЯ ТЕКСТУ

Розмітка, яка створюється за допомогою мови HTML, дозволяє організовувати текст у логічні, легко зрозумілі розділи або застосовувати до нього специфічний формат. Теги форматування дозволяють визначити такі елементи:

- початок абзацу і кінець рядка;

- стилі заголовків;

- фізичні стилі;

- логічні стилі;

- списки;

- спеціальні символи.

Тег управління абзацом

Початок абзацу

<P>…</P> - позначає початок і кінець нового абзацу.

Атрибути тега <P>

ALIGN=LEFT|RIGHT|CENTER|JUSTIFY – вирівнює текст всередині абзацу

 

Приклад запису тегу абзацу з атрибутом:

<P ALIGN= JUSTIFY> - абзац вирівнюється по ширині

Тег управління переходом на новий рядок

Тег <BR> - розпочинає новий рядок тексту в межах поточного абзацу. Примусове переведення рядка використовується для того, щоб порушити стандартний порядок відображення тексту.

Теги змістового  виділення тексту

<BLOCKQUOTE>…</BLOCKQUOTE> - дозволяє розміщувати текст на рівній відстані від меж екрану і створювати відступи ліворуч і праворуч.

Тег додає поля ліворуч і праворуч від тексту і дозволяє розташувати текст компактно у центрі сторінки. При використанні <ВLОСKQUOTE > декілька разів текст все більше стискається до центру.

<CITE>….</CITE> - розмічає текст як цитату, як правило, курсивом.

Теги стильового  виділення тексту

Фізичні стилі  – це реальні атрибути шрифту, такі, як курсив або жирне виділення.

Тег                                            Значення

<I>.....</I>                              курсив (ITALIC)

<B>...</B>                              жирний шрифт  (ВОLD)

<ТТ>... </TТ>                        телетайп

<U>. ..</U>                            підкреслений

<S>...</S>                              перекреслений текст

< BIG >... </ BIG >                 збільшений шрифт

< SMALL >...</ SMALL >      зменшений шрифт

< SUB >...</ SUB >                підрядкові символи

< SUP >... </ SUР >               надрядкові символи

 

ПРИКЛАД 1

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

<P ALIGN=CENTER>

УКРАЇНСЬКА МИНУВЩИНА <BR>

Етнографічний довідник </P>

</BODY>

</HTML>

Відображення файла програмою-броузером:

 

 

ПРИКЛАД  2

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

<P ALIGN=CENTER>

<B>УКРАЇНСЬКА МИНУВЩИНА </B><BR>

<I>Етнографічний довідник</I><BR>

<U>До читача</U> </P>

</BODY>

</HTML>

Відображення  файла програмою-броузером:

 


Контекстні підказки

Для пояснення змісту терміна при наведенні на нього мишкою використовується тег:

<ACRONYM title=”пояснювальний текст”> Термін </ACRONYM>

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<TITLE>Моя перша HTML-сторінка</TITLE>

<BODY>

<ACRONYM title=”Енциклопедія традиційної культури та побуту українців. Містить відомості про забуті способи ведення домашнього господарства, хатнє начиння, народну моду”><P ALIGN=CENTER>

<B>УКРАЇНСЬКА МИНУВЩИНА</B></P> </ACRONYM>

</BODY>

</HTML>

Відображення  файла програмою-броузером:

 


Коментарі і спеціальні символи

Для додавання коментарів  у HTML–документи використовується контейнер <!- текст коментаря ->.

Приклад:

<!- Це перший варіант сторінки, створений 31/12/2000 ->.

Всі символи, розташовані між дужками, будуть ігноруватись браузером. Вставкою коментарів можна користуватись у процесі розробки і перевірки створеного HTML-документа для ігнорування команд.

Якщо необхідно ввести символ, якого немає на клавіатурі, або символ, вже зарезервований в розмітці HTML-документа (наприклад, кутові дужки), необхідно ввести спеціальну послідовність символів. Для введення спеціальних символів у документ застосовується конструкція: &ІМ’Я СИМВОЛА. Після цієї послідовності ставиться знак “крапка з комою”, щоб відділити закінчення символу і початок тексту.

Спеціальні символи використовуються для відображення елементів математичних символів (наприклад: &frac34  це 3/4), рідкісних символів

національних алфавітів і загальноприйнятих символів (&copy; - це ©, &reg; -

це ®).

Приклад:

<P ALIGN=RIGHT>&copy Всі права застережені. Посилання обов‘язкові.<P>

Відображення програмою-броузером: