Ознайомлення з мовою HTML. HTML-документи. Синтаксис, базові елементи.

Для початку написання Internet-сторінок ознайомимось із деякими поняттями і софтом (програмами), з яким ми/ви будемо працювати.

Теоретичні відомості:

Що таке гіпертекст?

      Текстові документи створюють за допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у файлах, виводять на екран для візуального перегляду і видруковують на папері. Гіпертекстові документи, на відміну від звичайних текстових документів, не призначені для виведення на папір. Головне їхнє застосування - подання інформації на екран комп'ютера. Під час створення гіпертекстового документа інформацію ретельно добирають, оскільки великі за обсягом тексти читати з екрана незручно. Зазвичай такі тексти зберігають не в одному, а у декількох файлах. Інформацію з цих файлів користувач виводить на екран лише тоді, коли вона йому потрібна, і у такій послідовності, яка його найліпше влаштовує. Робить він це за допомогою гіперпосилань. Як вам відомо, гіперпосилання може мати вигляд підкресленого тексту іншого, ніж основний текст, кольору, рисунка або деякого значка-піктограми. Воно містить невидиму для користувача частину - адресу файлу чи позначки у документі, до якої потрібно перейти, і реагує на вказівник клацання миті. Якщо вказівник миші навести на гіперпосилання, то він набуде вигляду долоні. Якщо тепер клацнути лівою клавішею миші, то виконається перехід на інше місце в тексті або відкриється новий файл. Такий файл може містити текст, звук чи відеозображення.
     Гіпертекст - це електронний документ, який містить гіперпосилання на інші документи. Термін "гіпертекст" у 1969 p. запровадив Тед Нельсон, хоча принцип організації інформації з використанням посилань відомий віддавна. Візьмемо для прикладу енциклопедичний словник. Він складається з коротких статей. Однак читач, якщо потрібно, може отримати додаткову інформацію завдяки словам, що набрані курсивом. У словниках ці слова служать посиланнями на інші статті. Ідею гіпертекстових інформаційних систем на теоретичному рівні сформулював В. Буш у 1945 році.
     Гіпертекстова технологія - це інформаційна технологія, що базується на використанні гіпертекстів. Її застосовують у комп'ютерних енциклопедіях і навчальних програмах, у прикладних програмах для роботи з довідковою інформацією, а також для організації доступу до інформації у WWW-просторі, тобто для роботи з web-документами.

HTML-редактор/блокнот

    Один із самих-самих питань починаючого веб-дизайнера є вибір інструмента, здатного найбільш повно відбити його творчий політ. З однієї сторони вся гнучкість HTML можлива тільки ручним набором, а з інший лінь-матінка забороняє вивчати псевдопремудрості HTML. От і довидиться верстати сайт у HTML редакторі, а до розуму доводити ручками в блокноті. Зараз існує величезний вибір HTML-редакторів і причому на будь-який смак. Починаючи з Front Page і Macromedia Dreamweaver і не завершуючи Allaire Home Site і 1st Page і ще, ще...
     Основні особливості таких редакторів перед блокнотом наступні: щоб створити найпростішу веб-страницу, досить мати навички по роботі з яким-небудь текстовим редактором (блокнот, ворд,...). Однак на відміну від Блокнота, HTML редактор бере на себе майже 90% робіт із введення основних синтаксичних конструкцій (тегів) HTML. Крім того, щоб побачити, як створена сторінка виглядає у вікні браузера, досить одним клацанням миші переключитися в режим перегляду. І це ще не всі можливості HTML редакторів, у кожного продукту свої фішки, але основи в усіх однакові (наприклад дані уроки верстаються не без допомоги HomeSite, а коректуються, якщо треба, у звичайному блокноті (bred) ). Можу помітити, що відгуки про Dreamweaver'е в порівнянні з іншими HTML редакторами набагато кращі хоча б через те, що він практично не додає в сторінки надлишковий код, тому-то багато дизайнерів користуються цим редактором. При виборі редактора зверніть увагу на доступну літературу по даному продукту, якщо Вам зручніше дістати підручник по 1st Page (при наявності такого в природі), і у Вас на комп'ютері встановлена ця програма,то чому б не скористатися саме нею?

Графічний редактор

     Звичайно ж у цій категорії лідирує Photoshop (але і Paint ще не вмер).  Він дуже зручний у роботі і має усе, що потрібно для створення якісної графіки. Не має сенсу багато розповідати про нього. Але є й інші редактори, такі як Macromedia FireWorks і Macromedia Flash. Але Flash підходить для розробки Flash-презентацій, а FireWorks відмінний редактор растрової графіки. Але тут не я повинний пояснювати, що кому вибирати. Кожному своє.

Браузер /Browser

     У сьогоднішньому рунеті користуються популярністю тільки 3 браузери - Microsoft Internet Explorer, Netscape Navigator, і Opera. Оскільки ці браузери абсолютно різні, то при побудові сайта вам доведеться враховувати  те, що до вас на сайт будуть приходити і користувачі Explorer'а, Netscape'а й Oper'и, тому прийдеться підганяти сайт так, щоб у цих браузерах сайт виглядав однаково. А що робити - прийдеться...

FTP-менеджери

      Після створення сайта, локально, йде закачування всієї створеної купи файлів на сервер. При цьому потрібно використовувати FTP-менеджери/клієнти. Має сенс навести для прикладу тільки два. Це Far менеджер і CuteFTP. Дуже зручним у використанні я вважаю CuteFTP (сам їм користуюся). У ньому запропоноване саме необхідне. Для створення нового з'єднання досить натиснути F4 і відразу буде виведене нове вікно, у якому потрібно буде ввести необхідні дані для входу через FTP. Ну а FAR менеджер вважається ветераном серед FTP-клієнтів. Але єдиний мінус - незручно вводити дані для з'єднання і можна легко сплутатися при підключенні через FTP (особливо новачкам). Але незважаючи на це FAR дуже популярно серед сайторозробників. Ще має сенс виділити такі FTP-клієнти як Web FTP і Arisoft Direct FTP.

Синтаксис HTML-документів

      Кожен HTML-документ (тобто, Web-сторінка) є звичайним текстовим файлом, у якому крім тексту присутні спеціальні коди. Ці коди - теги - служать для розбивки тексту на інформаційні фрагменти - елементи, що чітко відбивають структуру інформації і взаємозв'язок між її частинами.
     Теги для якого-небудь елемента записуються в такий спосіб:
     <ім'я-елемента> Вміст елемента </ім'я-елемента>
     Тобто спочатку йде відкриваючий тег - ім'я елемента в кутових дужках, далі вміст елемента - будь-яка комбінація інших елементів і текстових коментарів, і все завершує закриваючий тег - ім'я елемента зі звичайною косою рискою в кутових дужках.
    От, наприклад, складніша конструкція:
     <елемент-1>
         Якийсь текст.
         <елемент-2>
            Вміст вкладеного елемента.
         </елемент-2>
         Ще якийсь текст.
     </елемент-1>
     Тобто, в елемент елемент-1 вкладені два текстових коментаря і один елемент елемент-2.
     На кожній сторінці повинні бути елементи {html}, {head}, {title}і {body}. Докладніше ці елементи обговорюються далі.

   Вкладеність елементів

     Парність відкриваючих і закриваючих тегов є обов'язковою умовою для HTML-документа. У HTML неможливе перетинання елементів. Тег, відкритий першим, закривається останнім, і навпаки. Наприклад, такий запис буде невірним:
     Невірний приклад!     <елемент-1><елемент-2></елемент-1></елемент-2>
     У наведеному прикладі не можна сказати, який з елементів - дочірній, а який - батьківський. Код варто виправити в такий спосіб:
     <елемент-1><елемент-2></елемент-2></елемент-1>
     Важливо завжди дотримувати вкладеності елементів і не допускати їхнього перетинання.

   Текстовий коментар

     Це складне слово несе в собі простий зміст. У HTML будь-який текст, що може виводитися на екран, називається текстовим коментарем. У повсякденному житті цей термін часто заміняється простим словом «текст». Не буде відмовляти собі в цьому задоволенні і ми, і будемо рівнозначно використовувати слова «текстовий коментар» і «текст».      «Текстовий коментар» і «коментар» - різні терміни, які не можна путати.

   Коментарі

     Коментарі полегшують наступний розбір документа. Часто виникає необхідність тимчасово відключити якийсь оператор. На допомогу приходять коментарі. У HTML код також можна коментувати. Коментар починається з послідовності «<!--» і закінчуються послідовністю «-->».
     <!--Це - коментар. Текст, введений тут, на екрані не відображається і ніяк не впливає на Web-сторінку. -->
     У коментарі не можна використовувати два дефіси підряд (--).  

     Невірний приклад!
     <!--В коментарі не можна використовувати послідовність «--». -->

   Атрибути

     Елементам можна задати якісь характеристики - атрибути. Атрибути записуються у відкриваючому тезі елемента у виді пар «ім'я-атрибута="значення атрибута"». Значення атрибута можна брати в подвійні лапки " або в апострофи '. Атрибути розділяються пропусками або новими рядками.
     <ім'я-елемента ім'я-атрибута-1="значення" ім'я-атрибута-2='значення'></ім'я-елемента>
     <ім'я-елемента
        ім'я-атрибута-1="значення"
        ім'я-атрибута-2='значення'>
     </ім'я-елемента>
     І знову таки, в другому випадку код набагато зрозуміліший. Намагайтеся показувати відступами структуру коду.
     Атрибути коментувати не можна.
     Невірний приклад!     <ім'я-елемента
       <!-- имя-атрибута-1="значення" -->
       ім'я-атрибута-2="значення">
     </ім'я-елемента>
     У закриваючому тезі атрибути не пишуться.

   Регістр

    HTML є регістронезалежною.

   Резюме

1. HTML-документ розбивається на структурні частини за допомогою елементів. Елементи записуються у виді тегів. Елементи не можуть перетинатися.
2. Коментарі створюються за допомогою послідовностей «<!--» і «-->».
3. Атрибути записуються у відкриваючому тезі. Значення атрибутів завжди беруться в лапки або апострофи.

Створення шаблону Web-сторінки

     Створимо найпростіший документ, що потім можна буде використовувати як шаблон для різних HTML-документів. Першим рядком документа, написаного мовою HTML, повинен бути рядок, що починається з тега <!DOCTYPE>. У ньому браузер почерпне інформацію про те, якому стандартові відповідає документ.
     Наприклад, рядок:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     скаже браузерові, що документ відповідає англійському стандартові HTML 4.0 Transitional DTD.
     Потім йдуть наступні рядки:
     <html> - необов'язковий елемент.
     <head> - початок заголовка документа.
     У заголовку розташовуються метадані [інформація, що дозволяє задати кодову сторінку мови для правильного відображення тексту браузером, ключові слова для індексації сторінки пошуковими системами, автора документа й іншу інформацію].
     Наприклад, наступний рядок вкаже браузерові, що треба використовувати для виведення тексту стандартну кодову сторінку для виведення кирилиці - windows-1251.
     <META http-equiv="Content-Type" content="text/html;charset=windows-1251">
     Наступні два рядки потрібні для індексації вашої сторінки пошуковими системами.
     <META NAME="Description" content= "короткий опис сайту/сторінки">
     <META NAME="Keywords" content= "ключові слова через кому/значення завантажуваної сторінки">
     Задамо червоний колір посилань.
     link= "Red"
     Задамо колір активних посилань.
     alink="Fuchsia"
     Задамо колір відкритих посилань.
     vlink= "Maroon"
     Задамо колір тіла документа і параметри шрифту за замовчуванням, йде один за одним: колір тіла(білий), колір тексту(чорний), назва шрифта (Arial, 'Comic Sans MS', Courier), розмір шрифту за замовчуванням до всього документа.
     <BODY bgcolor="white" text="Black" font face="Arial,'Comic Sans MS',Courier" ><basefont size="2">
     Потім вказується титулка документа - напис, що буде виводитися в заголовку вікна браузера.
     <TITLE>Сторінка починаючого Web-дизайнера</TITLE>
     </HEAD>- завершуємо заголовок.
     Після заголовка відкриваємо тіло документа
     <BODY>
     ...Тут буде зміст нашого документа.
     І нарешті, завершуємо тіло документа і сам документ...
     </BODY>
     </HTML>

Практика

     [крок 1. відкрийте звичайний блокнот]
     [крок 2. виділіть нижче поданий код і вставте його у свій блокнот]
     [крок 3. Збережіть документ наприклад як template.html і клацніть на ньому мишкою. Запуститься браузер, у вікні якого на білому фоні, чорними буквами буде виведено наш текст і червоні букви посилання, колір якого зміниться на чорний, при наведенні на нього курсору]

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="Короткий опис сайту/сторінки">
<META NAME="Keywords" content=" ключові слова через кому/смислова нагрузка сторінки ">
<TITLE>Сторінка починающого Web-дизайнера</TITLE>
</HEAD>
<BODY bgcolor="white" text="#000000" link="Red" vlink="Maroon" alink="Fuchsia" font face="Arial,'Comic Sans MS',Courier" ><basefont size="2">
Сторінка починающого Web-дизайнера, що буде розроблятися ... (автор сайту)
<P>
Мій перший HTML-документ
<A HREF="">ссилка на інший документ/сайт/файл/.../ </A>
</P>
</BODY>
</HTML>[крок 4. Добавте на власний розсуд певний текст у web-документ перед закриваючим тегом {body}. У вас має одержатись при перегляді щось на зразок наступної сторінки]

Підсумок.

     З життєвої практики відомо, що, розпочинаючи нову справу, найтяжче зробити перший крок. Але на сьогоднішньому занятті ми спробували і зробили цей крок на шляху вивчення HTML-докуметів. Та будь-який новий матеріал потребує закріплення. Тому, готуючись до наступного уроку, корисно буде відповісти на такі запитання для самоконтролю:

1. Які редактори призначені для створення та редагування Web-сторінок?
2. Які програми призначені для перегляду Web-сторінок?
3. З чого складається HTML-документ? Що таке тег? Які існують теги?
4. Чим відрізняється поняття «текстовий коментар» і «коментар»?
5. Яка структура HTML-документа?
6. Яким рядком бажано починати описувати Web-сторінку?
7. Для чого призначений розділ заголовка документа?
8. Яким тегом починається тіло документа?
9. Для чого призначені атрибути?
10. Які атрибути задаються в розділі {body}?

Ознайомлення з мовою HTML.
HTML-документи. Синтаксис, базові елементи.
Редактори HTML-документів (Web-сторінок).

Теоретичні відомості:

Для початку написання Internet-сторінок ознайомимось із деякими поняттями і софтом (програмами), з яким ми/ви будемо працювати.

Що таке гіпертекст?

      Текстові документи створюють за допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у файлах, виводять на екран для візуального перегляду і видруковують на папері. Гіпертекстові документи, на відміну від звичайних текстових документів, не призначені для виведення на папір. Головне їхнє застосування - подання інформації на екран комп'ютера. Під час створення гіпертекстового документа інформацію ретельно добирають, оскільки великі за обсягом тексти читати з екрана незручно. Зазвичай такі тексти зберігають не в одному, а у декількох файлах. Інформацію з цих файлів користувач виводить на екран лише тоді, коли вона йому потрібна, і у такій послідовності, яка його найліпше влаштовує. Робить він це за допомогою гіперпосилань. Як вам відомо, гіперпосилання може мати вигляд підкресленого тексту іншого, ніж основний текст, кольору, рисунка або деякого значка-піктограми. Воно містить невидиму для користувача частину - адресу файлу чи позначки у документі, до якої потрібно перейти, і реагує на вказівник клацання миті. Якщо вказівник миші навести на гіперпосилання, то він набуде вигляду долоні. Якщо тепер клацнути лівою клавішею миші, то виконається перехід на інше місце в тексті або відкриється новий файл. Такий файл може містити текст, звук чи відеозображення.
     Гіпертекст - це електронний документ, який містить гіперпосилання на інші документи. Термін "гіпертекст" у 1969 p. запровадив Тед Нельсон, хоча принцип організації інформації з використанням посилань відомий віддавна. Візьмемо для прикладу енциклопедичний словник. Він складається з коротких статей. Однак читач, якщо потрібно, може отримати додаткову інформацію завдяки словам, що набрані курсивом. У словниках ці слова служать посиланнями на інші статті. Ідею гіпертекстових інформаційних систем на теоретичному рівні сформулював В. Буш у 1945 році.
     Гіпертекстова технологія - це інформаційна технологія, що базується на використанні гіпертекстів. Її застосовують у комп'ютерних енциклопедіях і навчальних програмах, у прикладних програмах для роботи з довідковою інформацією, а також для організації доступу до інформації у WWW-просторі, тобто для роботи з web-документами.

HTML-редактор/блокнот

    Один із самих-самих питань починаючого веб-дизайнера є вибір інструмента, здатного найбільш повно відбити його творчий політ. З однієї сторони вся гнучкість HTML можлива тільки ручним набором, а з інший лінь-матінка забороняє вивчати псевдопремудрості HTML. От і довидиться верстати сайт у HTML редакторі, а до розуму доводити ручками в блокноті. Зараз існує величезний вибір HTML-редакторів і причому на будь-який смак. Починаючи з Front Page і Macromedia Dreamweaver і не завершуючи Allaire Home Site і 1st Page і ще, ще...
     Основні особливості таких редакторів перед блокнотом наступні: щоб створити найпростішу веб-страницу, досить мати навички по роботі з яким-небудь текстовим редактором (блокнот, ворд,...). Однак на відміну від Блокнота, HTML редактор бере на себе майже 90% робіт із введення основних синтаксичних конструкцій (тегів) HTML. Крім того, щоб побачити, як створена сторінка виглядає у вікні браузера, досить одним клацанням миші переключитися в режим перегляду. І це ще не всі можливості HTML редакторів, у кожного продукту свої фішки, але основи в усіх однакові (наприклад дані уроки верстаються не без допомоги HomeSite, а коректуються, якщо треба, у звичайному блокноті (bred) ). Можу помітити, що відгуки про Dreamweaver'е в порівнянні з іншими HTML редакторами набагато кращі хоча б через те, що він практично не додає в сторінки надлишковий код, тому-то багато дизайнерів користуються цим редактором. При виборі редактора зверніть увагу на доступну літературу по даному продукту, якщо Вам зручніше дістати підручник по 1st Page (при наявності такого в природі), і у Вас на комп'ютері встановлена ця програма,то чому б не скористатися саме нею?

Графічний редактор

     Звичайно ж у цій категорії лідирує Photoshop (але і Paint ще не вмер).  Він дуже зручний у роботі і має усе, що потрібно для створення якісної графіки. Не має сенсу багато розповідати про нього. Але є й інші редактори, такі як Macromedia FireWorks і Macromedia Flash. Але Flash підходить для розробки Flash-презентацій, а FireWorks відмінний редактор растрової графіки. Але тут не я повинний пояснювати, що кому вибирати. Кожному своє.

Браузер /Browser

     У сьогоднішньому рунеті користуються популярністю тільки 3 браузери - Microsoft Internet Explorer, Netscape Navigator, і Opera. Оскільки ці браузери абсолютно різні, то при побудові сайта вам доведеться враховувати  те, що до вас на сайт будуть приходити і користувачі Explorer'а, Netscape'а й Oper'и, тому прийдеться підганяти сайт так, щоб у цих браузерах сайт виглядав однаково. А що робити - прийдеться...

FTP-менеджери

      Після створення сайта, локально, йде закачування всієї створеної купи файлів на сервер. При цьому потрібно використовувати FTP-менеджери/клієнти. Має сенс навести для прикладу тільки два. Це Far менеджер і CuteFTP. Дуже зручним у використанні я вважаю CuteFTP (сам їм користуюся). У ньому запропоноване саме необхідне. Для створення нового з'єднання досить натиснути F4 і відразу буде виведене нове вікно, у якому потрібно буде ввести необхідні дані для входу через FTP. Ну а FAR менеджер вважається ветераном серед FTP-клієнтів. Але єдиний мінус - незручно вводити дані для з'єднання і можна легко сплутатися при підключенні через FTP (особливо новачкам). Але незважаючи на це FAR дуже популярно серед сайторозробників. Ще має сенс виділити такі FTP-клієнти як Web FTP і Arisoft Direct FTP.

Синтаксис HTML-документів

      Кожен HTML-документ (тобто, Web-сторінка) є звичайним текстовим файлом, у якому крім тексту присутні спеціальні коди. Ці коди - теги - служать для розбивки тексту на інформаційні фрагменти - елементи, що чітко відбивають структуру інформації і взаємозв'язок між її частинами.
     Теги для якого-небудь елемента записуються в такий спосіб:      <ім'я-елемента> Вміст елемента </ім'я-елемента>
     Тобто спочатку йде відкриваючий тег - ім'я елемента в кутових дужках, далі вміст елемента - будь-яка комбінація інших елементів і текстових коментарів, і все завершує закриваючий тег - ім'я елемента зі звичайною косою рискою в кутових дужках.
    От, наприклад, складніша конструкція:
     <елемент-1>
         Якийсь текст.
         <елемент-2>
            Вміст вкладеного елемента.
         </елемент-2>
         Ще якийсь текст.
     </елемент-1>
     Тобто, в елемент елемент-1 вкладені два текстових коментаря і один елемент елемент-2.
     На кожній сторінці повинні бути елементи {html}, {head}, {title}і {body}. Докладніше ці елементи обговорюються далі.

   Вкладеність елементів

     Парність відкриваючих і закриваючих тегов є обов'язковою умовою для HTML-документа. У HTML неможливе перетинання елементів. Тег, відкритий першим, закривається останнім, і навпаки. Наприклад, такий запис буде невірним:
     Невірний приклад!      <елемент-1><елемент-2></елемент-1></елемент-2>
     У наведеному прикладі не можна сказати, який з елементів - дочірній, а який - батьківський. Код варто виправити в такий спосіб:
     <елемент-1><елемент-2></елемент-2></елемент-1>
     Важливо завжди дотримувати вкладеності елементів і не допускати їхнього перетинання.

   Текстовий коментар

     Це складне слово несе в собі простий зміст. У HTML будь-який текст, що може виводитися на екран, називається текстовим коментарем. У повсякденному житті цей термін часто заміняється простим словом «текст». Не буде відмовляти собі в цьому задоволенні і ми, і будемо рівнозначно використовувати слова «текстовий коментар» і «текст».      «Текстовий коментар» і «коментар» - різні терміни, які не можна путати.

   Коментарі

     Коментарі полегшують наступний розбір документа. Часто виникає необхідність тимчасово відключити якийсь оператор. На допомогу приходять коментарі. У HTML код також можна коментувати. Коментар починається з послідовності «<!--» і закінчуються послідовністю «-->».
     <!--Це - коментар. Текст, введений тут, на екрані не відображається і ніяк не впливає на Web-сторінку. -->
     У коментарі не можна використовувати два дефіси підряд (--).  

     Невірний приклад!      <!--В коментарі не можна використовувати послідовність «--». -->

   Атрибути

     Елементам можна задати якісь характеристики - атрибути. Атрибути записуються у відкриваючому тезі елемента у виді пар «ім'я-атрибута="значення атрибута"». Значення атрибута можна брати в подвійні лапки " або в апострофи '. Атрибути розділяються пропусками або новими рядками.      <ім'я-елемента ім'я-атрибута-1="значення" ім'я-атрибута-2='значення'></ім'я-елемента>
     <ім'я-елемента
        ім'я-атрибута-1="значення"
        ім'я-атрибута-2='значення'>
     </ім'я-елемента>
     І знову таки, в другому випадку код набагато зрозуміліший. Намагайтеся показувати відступами структуру коду.
     Атрибути коментувати не можна.
     Невірний приклад!      <ім'я-елемента
       <!-- имя-атрибута-1="значення" -->
       ім'я-атрибута-2="значення">
     </ім'я-елемента>
     У закриваючому тезі атрибути не пишуться.

   Регістр

    HTML є регістронезалежною.

   Резюме

1. HTML-документ розбивається на структурні частини за допомогою елементів. Елементи записуються у виді тегів. Елементи не можуть перетинатися.
2. Коментарі створюються за допомогою послідовностей «<!--» і «-->».
3. Атрибути записуються у відкриваючому тезі. Значення атрибутів завжди беруться в лапки або апострофи.

Створення шаблону Web-сторінки

     Створимо найпростіший документ, що потім можна буде використовувати як шаблон для різних HTML-документів. Першим рядком документа, написаного мовою HTML, повинен бути рядок, що починається з тега <!DOCTYPE>. У ньому браузер почерпне інформацію про те, якому стандартові відповідає документ.
     Наприклад, рядок:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">      скаже браузерові, що документ відповідає англійському стандартові HTML 4.0 Transitional DTD.
     Потім йдуть наступні рядки:
     <html> - необов'язковий елемент.
     <head> - початок заголовка документа.
     У заголовку розташовуються метадані [інформація, що дозволяє задати кодову сторінку мови для правильного відображення тексту браузером, ключові слова для індексації сторінки пошуковими системами, автора документа й іншу інформацію].
     Наприклад, наступний рядок вкаже браузерові, що треба використовувати для виведення тексту стандартну кодову сторінку для виведення кирилиці - windows-1251.
     <META http-equiv="Content-Type" content="text/html;charset=windows-1251">
     Наступні два рядки потрібні для індексації вашої сторінки пошуковими системами.
     <META NAME="Description" content= "короткий опис сайту/сторінки">
     <META NAME="Keywords" content= "ключові слова через кому/значення завантажуваної сторінки">
     Задамо червоний колір посилань.
     link= "Red"
     Задамо колір активних посилань.
     alink="Fuchsia"
     Задамо колір відкритих посилань.
     vlink= "Maroon"
     Задамо колір тіла документа і параметри шрифту за замовчуванням, йде один за одним: колір тіла(білий), колір тексту(чорний), назва шрифта (Arial, 'Comic Sans MS', Courier), розмір шрифту за замовчуванням до всього документа.
     <BODY bgcolor="white" text="Black" font face="Arial,'Comic Sans MS',Courier" ><basefont size="2">
     Потім вказується титулка документа - напис, що буде виводитися в заголовку вікна браузера.
     <TITLE>Сторінка починаючого Web-дизайнера</TITLE>
     </HEAD>- завершуємо заголовок.
     Після заголовка відкриваємо тіло документа
     <BODY>
     ...Тут буде зміст нашого документа.
     І нарешті, завершуємо тіло документа і сам документ...
     </BODY>
     </HTML>

Практика

     [крок 1. відкрийте звичайний блокнот]
     [крок 2. виділіть нижче поданий код і вставте його у свій блокнот]
     [крок 3. Збережіть документ наприклад як template.html і клацніть на ньому мишкою. Запуститься браузер, у вікні якого на білому фоні, чорними буквами буде виведено наш текст і червоні букви посилання, колір якого зміниться на чорний, при наведенні на нього курсору]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta NAME="Description" content="Короткий опис сайту/сторінки"> <meta NAME="Keywords" content=" ключові слова через кому/смислова нагрузка сторінки "> <title>Сторінка починающого Web-дизайнера</TITLE> </HEAD> <body bgcolor="white" text="#000000" link="Red" vlink="Maroon" alink="Fuchsia" font face="Arial,'Comic Sans MS',Courier" > <basefont size="2"> Сторінка починающого Web-дизайнера, що буде розроблятися ... (автор сайту) <p> Мій перший HTML-документ <a HREF="">ссилка на інший документ/сайт/файл/.../ </A> </P> </BODY> </HTML>

     [крок 4. Добавте на власний розсуд певний текст у web-документ перед закриваючим тегом {body}. У вас має одержатись при перегляді щось на зразок наступної сторінки]

Підсумок.

     З життєвої практики відомо, що, розпочинаючи нову справу, найтяжче зробити перший крок. Але на сьогоднішньому занятті ми спробували і зробили цей крок на шляху вивчення HTML-докуметів. Та будь-який новий матеріал потребує закріплення. Тому, готуючись до наступного уроку, корисно буде відповісти на такі запитання для самоконтролю:

1. Які редактори призначені для створення та редагування Web-сторінок?
2. Які програми призначені для перегляду Web-сторінок?
3. З чого складається HTML-документ? Що таке тег? Які існують теги?
4. Чим відрізняється поняття «текстовий коментар» і «коментар»?
5. Яка структура HTML-документа?
6. Яким рядком бажано починати описувати Web-сторінку?
7. Для чого призначений розділ заголовка документа?
8. Яким тегом починається тіло документа?
9. Для чого призначені атрибути?
10. Які атрибути задаються в розділі {body}?