Теоретична частина. Поняття про мову розмітки гіпертексту
Поняття про мову розмітки гіпертексту.
Основою всесвітньої "павутини" Word Wide Web є мова гіпертекстової розмітки HTML (Hyper Text Markup Language).
Визначення. HTML - набір угод для розмітки документів, які визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них з використанням програми броузера.
Документи, підготовлені на мові HTML, називаються HTML - документами. Одержати уявлення про те, як виглядає код HTML, ви зможете, якщо завантажите HTML- документ в броузер і виконаєте команду Вид - В виде HTML.
HTML-документ ( або Web-сторінка) - це текстовий файл із розширенням htm або html, складений на мові HTML і який містить інформацію, призначену для публікації в WWW.
Код HTML є дуже компактним, і HTML-документи мають розмір значно менший, ніж документи, підготовлені в текстових процесорах типу Word. Це одна з основних причин широкого застосування мови HTML для кодування інформації, поширюваної по Інтернету.
HTML-документи розміщуються у в WWW не поодинці, а у вигляді сайтів.
Web-сайт - це сукупність Web-сторінок ( декількох десятків, сотень або навіть тисяч), об'єднаних однією загальною темою і поміщених, як правило, на одному вузловому комп'ютері.
Теги і структура HTML-документа.
Як виконується розмітка документа за допомогою HTML? Документ розбивається на елементи: заголовки, абзаци, малюнки, таблиці і ін. Для кожного елементу задається команда мови HTML, звана тегом (або дескриптором). У цій команді міститься інформація про те, як повинен виглядати даний елемент на Web-сторінці, які зв'язки він може мати із іншими елементами або документами.
Тег ( у перекладі tag - покажчик, мітка) - це фрагмент коду, який описує певний елемент документа HTML і замикається в кутові дужки < >.
Простим тегом є, наприклад, тег з ім'ям < HTML>.
Тег < HTML > визначає початок HTML-документа. Початковому тегу < HTML > відповідає кінцевий тег з тим же ім'ям, але з косою межею </ >, - це тег </ HTML >. Таким чином, початок і кінець HTML-документа позначаються парою тегів:
< HTML >...< /HTML >
HTML - документ умовно можна розбити на три частини:
Ø Службова інформація для броузера, яка розміщується в рядку з тегом| <!DOCTYPE>.
Ø Заголовна частина документа, в якій міститься назва документа, може розташовуватися службова інформація для серверів, опису невеликих програм-сценаріїв. Ця частина документа поміщена між тегами < HEAD > і </ HEAD >.
Ø Тіло документа, що розміщується між тегами < BODY> ... </BODY> (іноді замість тегів < BODY> можуть використовуватися теги фреймової структури <FRAMESET>).
Простий зразок Web-сторінки.
Що таке Web-сторінка ясно із наступного простого прикладу :
< ! DOCTYPE > HTML PUBLIC « -/ /W3C/ /DTD HTML 4.01 / /EN » >
< HTML >
< HEAD >
< TITLE > Простий приклад</ TITLE >
</ HEAD >
< BODY>
Це приклад HTML - документа
</BODY>
< /HTML >
Кожен документ складається з окремих об'єктів: абзаців, заголовків, малюнків і ін. Ці об'єкти при переведенні у формат HTML представляються у вигляді елементів HTML.
Елементи HTML - це пара тегів і символьні дані (текст або код), поміщені між ними.
Елемент називається звичайно на ім'я тега (без кутових дужок).
Всі елементи, передбачені в HTML, можна умовно розбити на декілька категорій:
структурні - це елементи, які обов'язкові для документа, відповідного стандарту HTML (наприклад, елементи HTML, HEAD, BODY і TITLE);
блокові - це необов'язкові елементи, які призначені для форматування цілих текстових блоків (наприклад, елементи DIV, Н1, Н2, НЗ, Н4, Н5, Н6, Р, РRЕ); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа;
текстові - це необов'язкові елементи, які задають розмітку шрифту (I, В U,BIG,SMALL і ін.), розмітку тексту (STRONG, CODE, VAR, CITE і ін.);
спеціальні - це необов'язкові елементи порожнього|пустого| рядка (ВR, НR), якірний елемент А, впроваджені|запроваджені,впроваджені| елементи (IМG, OBJECT, MAP і ін.), елементи таблиці (TABLE) і ін.
У будь-якому документі HTML обов'язково присутні вкладені елементи, тобто такі, які включені до складу інших елементів. Так, наприклад, елемент TITLE вкладений в елемент HEAD, а елемент Р - в елемент BODY. Елементи HEAD і BODY, у свою чергу, є вкладеними в елемент HTML.
Відзначимо, що при записі елементів HTML можна використовувати як прописні, так і рядкові літери.
Атрибути тегів.
Часто теги, крім імені, містять додаткові елементи, які називаються атрибутами. Наприклад, якщо в тег тіла документа <ВОDY> ввести додатковий елемент:
<ВОDY bgcolor ="уеllow">
то це означатиме, що документ повинен відображатися на жовтому фоні. Слово bgcolor є атрибутом, а уеllow - значенням атрибуту.
Атрибути - це компоненти тега, що містять вказівки про те, як броузер повинен сприйняти і обробити тег. Атрибут записується після імені тега перед закриваючою дужкою > і складається, як правило, із пари:
ім'я атрибуту = „значення”.
Значення атрибуту записується післяімені атрибуту через знак рівняння =. Всі значення атрибутів за умовчанням повинні розташовуватись в подвійних (") або одинарних (') лапках. У тегі може бути декілька атрибутів, в цьому випадку вони відділяються один від одного пробілами.
Часто при створенні Web-сторінок виникає необхідність пояснити ту або іншу особливість HTML-коду або наміру розробника, але так, щоб ці пояснення не відображалися у вікні броузера. У таких випадках незамінними виявляються коментарі.
Коментарі позначають фрагмент невиконуваного коду і розташовуються між групами символів <! — і — >. Наприклад, на екрані не відображатимуться наступні елементи:
<!— Коментар, що займає один рядок —>
або
<!— Коментар можна
розташовувати в двох рядках —>
Контрольні питання.
1. Історія виникнення HTML, поняття гіперпосилання, тега.
2. Структура документа. Обов’язкові теги. Парні та непарні теги.
3. Правила написання тегів та вказання значень атрибутів тегів.
4. Створення та форматування html документа, теги фізичного та логічного форматування тексту.
5. Списки та теги, які їх створюють.
6. Теги створення таблиць.
7. Поняття фреймів та їх призначення. Теги створення фреймів.