Теоретичне заняття №3

План

  1.  Теги та структура HTML-документа
  2. Створення Web-документів

 Котнрольні  питання


1. Теги та структура HTML-документа

За основу моделі розмітки документів у HTML прийнята тегова модель. Тегова модель описує документ як сукупність контейнерів, кожен з яких починається і закінчується тегами. Тобто документ НТМL є не чим іншим, як зви­чайним АSСII-файлом з доданими до нього керуючими НТМL-кодами (те­гами). Теги не відображаються браузером, вони лише задають структуру тексту

Теги НТМL-документів в основному є простими і зрозумілими для вико­рис­тання, оскільки вони створені за допомогою загальновживаних слів англійсь­кої мови, зрозумілих скорочень і позначень.

НТМL-тег складається з імені, за яким може слідувати необов’язковий список атрибутів тегу. Текст тегу вміщується у кутові дужки (<i>). Найпростіший варіант тегу – ім’я, вміщене у кутові дужки, наприклад, <head>. Для більш складних тегів характерна наявність різних атрибутів, які можуть мати конкретні значення, визначені для видозмінення функцій тегу.

Теги бувають трьох видів: відкриваючі, закриваючі і одинарні. Відкри­ваючі і закриваючі теги завжди розташовані парами. Закриваючий відрізняєтся від відкриваючого тим, що після знаку менше “<” стоїть знак слеш (чи ділення) “/”. Пара закриваючого і відкриваючого тега виглядає так: <html></html>.

Атрибути тегу слідують за ім’ям і відділяються один від одного одним або кількома пропусками. Символ “>” закриває тег лише після написання останнього атрибута (наприклад: <body атрибут1 атрибут2> вміст тега </body>). Порядок запису атрибутів у тегу не має значення. Значення атрибута слідує за знаком рівняння, який стоїть після імені атрибута. Якщо значення атрибута – одне слово або число, його можна вказати безпо­серед­ньо після знаку рівняння, не виділяючи додатково. Решту значень необхідно вміщувати у одинарні або подвійні лапки, особливо якщо вони містять декілька розділених пропусками слів.

Важливо знати, що починаючи з версії 4.01 всі теги мають бути написані маленькими буквами.

Елемент гіпертексту – це все що знаходиться між відкриваючим і закри­ваю­чим тегом. Елементи бувають вкладені.

Наведу приклад коду web-сторінки:

<html>   <head>       <!– Заголовочна інформація, наприклад: –>       <title>Назва сторінки (відображається в рядку заголовку браузера)</title>   </head>    <body>       Вміст сторінки.   </body></html>

Всі теги які зустрічаються вище є обов’язковими. Вони присутні в кожній сторінці в Internet. Тег <html> каже браузеру що в ньому міститься код HTML. Тег <head>, каже що в ньому міститься заголовокова інформація сторінки. Ця інформація на самій сторінці не відображається. Тег <title> містить заголовок, який відобразиться в рядку заголовку. <body> містить тіло, або вміст сторінки.

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

Окрім тегів і тексту, гіпертекстові сторінки можуть містити коментарі. Коментарі виглядають так: <!– Коментар –>. Вони дозволяють писати на сторінці текст, який не відображається браузером. Це потрібно для вставки повідомлень типу <!– Тут не забути дописати абзац про коментарі –>.

При використанні вкладених тегів їх слід закривати, починаючи з останнього і рухаючись до першого.

Деякі НТМL-теги не мають кінцевого компонента, оскільки є автономними елементами. Наприклад, тег зображення <IMG>, призначений для вставки зображення у документ, не має кінцевого компонента.

Ще існує поняття спеціальних символів. Наприклад, коли написати таку сторінку:

<html>

     <head>

         <title>З чого починається сторінка</title>

      </head>

<body>

Кожна сторінка HTML починається з тегу <html>.   </body>

</html>

Така сторінка відобразиться браузером неправильно, через те, що браузер не виводить теги. А <html> – тег. Така сама проблема і з символами порівняння. Тому, щоб відображати деякі нестандартні символи, існує поняття спеціальних символів. Спеціальні символи в HTML описуються так: &код;. Основні коди спеціальних символів показані в таблиці 3.3.

Таблиця 3.3

Основні коди спеціальних символів в HTML

Назва Код Вигляд Назва Код Вигляд
Менше &lt; < Коротке тире &#150;
Більше &gt; > Довге тире &#151;
Амперсанд &amp; & Тильда &#152; ˜
Лапка &quot; Пробіл  &nbsp;
Ліва лапка &#145; Зареєстрований торговий знак &reg; ®
Права лапка &#146; Показник степені 2 (квадрат) &#178; ²
Ліва подвійна лапка &#147; Показник степені 3 (куб) &#179; ³
Права подвійна лапка &#148; Показник степені 1 &#185; ¹
Жирна крапка &#149; Товарний знак &#153;
Ліва кутова лапка &laquo; « Знак абзаца &para;
Права кутова лапка &raquo; » Наголос &#180; ´
Знак множення × &#215; Знак авторського права &copy; ©
Велика O з косою рисою Ø &#216; Одна четверта &#188; ¼

Тобто те що ми хотіли описати в попередньому прикладі мало виглядати так:

<html>

    <head>

       <title>З чого починається сторінка</title>

    </head>

<body>

Кожна сторінка HTML починається з тегу &lt;html&gt;.

</body>

</html>

Для створення HTML-документа можна застосувати редактор ASCII (зокрема, Блокнот системи Windows). Такі редактори дозволяють вводити HTML-теги, не додаючи до створеного нічого додатково. Створення документа у такому редакторі дозволяє паралельно переглядати результат у програмі- браузері.

Інший тип редакторів – візуальні HTML-редактори, наприклад, Microsoft FrontPage. Їх інтерфейс побудований за тим же принципом, що і інтер­фейс текстового процесора, такого, як, наприклад, Word. Для роботи з візуаль­ним редактором можна взагалі не володіти мовою HTML. Недоліком візуальних редакторів є те, що розмір створюваного ними HTML-документа у декілька разів більший, ніж документа, створеного звичайним Блокнотом системи Windows.

Страницы: 1 2 3