Тема 9. Основи Web-дизайну Після вивчення теми студент повинен

знати:	вміти:
структуру HTML–файлів; основні теги HTML; атрибути тегів необхідність застосування CSS; необхідність використання форм	- створювати HTML –коди: - форматувати абзаци тексту, заголовки; - створювати двовимірні таблиці за допомогою HTML-кодів; - використовувати CSS; - створювати форми.

Завдання

Опрацювати теоретичні відомості та літературу і відповісти на питання.

Теоретична частина

Поняття про мову розмітки гіпертексту.

Основою всесвітньої "павутини" 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, звана тегом (або дескриптором). У цій команді міститься інформація про те, як повинен виглядати даний елемент на Web-сторінці, які зв'язки він може мати із іншими елементами або документами.

Тег ( у перекладі tag - покажчик, мітка) - це фрагмент коду, який описує певний елемент документа 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 можна використовувати як прописні, так і рядкові літери.