Тема:Структурні теги HTML документів та форматування тексту

Мета: Опанувати принципи побудови логічної структури 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> - у останньому рядку.

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

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

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

... - назва документа, яка відображається в рядку заголовка internet Explorer.

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

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

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

Моя перша HTML-cтopiнкa

"

Microsoft Internet Explorer і Netscape Navigator допускають застосування атрибутів LEFTMARGIN=«n» і «TOPMARGIN=«n» у тегу Атрибут LEFTMARGIN = задає ліве поле для всієї сторінки. TOPMARGIN= визначає верхнє поле. Число п вказує на ширину поля у пікселях. Наприклад, тег створює на всій сторінці ліве поле шириною 40 пікселів. При n=0 ліве поле відсутнє.

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

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

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

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

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

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

- списки;

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

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

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

... - позначає початок і кінець нового абзацу.

Атрибути тега

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

ПРИКЛАД запису тега абзацу з атрибутом:

- абзац вирівнюється по ширині.

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

Тег розпочинає новий рядок тексту в межах поточного абзацу.

Примусове переведення рядка використовується для того, щоб порушити стандартний порядок відображення тексту.

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

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

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

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

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

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

Тег

...

...

...

...

...

Значення

курсив (ITALIC)

жирний шрифт (BOLD)

Телетайп Підкреслений

Перекреслений текст

Збільшений шрифт

Зменшений шрифт

Підрядкові символи надрядкові символи

ПРИКЛАДІ

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

Moя перша HTML- сторінка

УКРАЇНСЬКА МИНУВШИНА

Етнофафічний довідник