Поняття про мову розмітки гіпертексту
Основою всесвітнього «павутиння» World Wide Web є мова гіпертекстової розмітки HTML (Hyper Text Markup Language).
Вона була створена вченими Європейського центру ядерних досліджень (CERN, м. Женева). Наприкінці 80-х років у CERN зайнялися проблемою збереження і відображення даних, які
отримували колеги-фізики. Складність полягала у тому, що кожний фахівець, який
приїздив до Центру, застосовував власні методи відображення інформації, і
потрібно було терміново створити універсальну систему, яка б не залежала від
використовуваної комп'ютерної платформи і була б досить простою.
Ідея розв'язання проблеми обміну документами між різними
комп'ютерами полягала у тому, що документи мали бути розмічені за допомогою
визначеного коду - HTML. Такі документи могли б читатися на будь-якому
комп'ютері, на якому встановлена одна програма перегляду - браузер.
Згодом мова HTML стала
основною при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому
вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і
розбивкою на абзаци, із заданими розмірами і розташуванням малюнків, із
виділеними словами, посиланнями тощо.
HTML - набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми браузера.
Документи, підготовлені мовою HTML, називаються
HTML-документами. Уявити, як виглядає код HTML-документа, ви зможете, якщо завантажите документ у браузер і
виконаєте команду Вид -
В виде HTML. У вікні Блокнот ви побачите код поточного
документа.
HTML-документ (або Web-сторінка) - це звичайний текстовий файл із розширенням htm або html, складений мовою HTML, який містить інформацію для публікації в World Wide Web.
Код HTML дуже компактний, і HTML-документи
мають значно менший розмір, ніж документи, підготовлені в текстових процесорах
типу Word. Це одна з основних причин широкого застосування
мови HTML для кодування інформації, що розповсюджується по
Інтернету.
HTML-документи розміщаються в WWW не поодинці, а у виді так званих сайтів.
Web-сайт
- це сукупність Web-сторінок (десятків, сотень, навіть тисяч), об'єднаних однією загальною темою і поміщених, як правило, на одному вузловому комп'ютері.
Програми для створення HTML-файлів
Отже, документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і
відредагувати в звичайному текстовому редакторі, наприклад, у додатках Блокнот
чи WordPad, що входять до складу ОС Windows. Однак
нині існують більш зручні та розвинуті програми підготовки HTML-документів. Їх умовно можна розділити на візуальні редактори
HTML і редактори HTML-текстів.
Працюючи у візуальному HTML-редакторі, користувач має справу з графічними образами
елементів HTML, а не з кодом документа. Він може шляхом перетягування
мишею і простими операціями в інтерфейсі розміщати на сторінці необхідні
елементи. Завдяки цьому навіть користувачеві, що не знає мови HTML, під силу створювати прості Web-сторінки.
До візуальних редакторів HTML
належать програма FrontPage фірми Microsoft, Macromedia Dreamveawer, Netscape Navigator Gold та ін.
Редактори
власне HTML-текстів, серед яких найбільш відомі HomeSite і HotDog, мають
основні можливості текстових редакторів (використання буфера обміну, засобів
пошуку слів тощо). Але, на відміну від звичайних редакторів тексту, ці додатки
надають у розпорядження розроблювача візуальне середовище програмування (типу Visual Basic або Delphi) і дозволяють автоматизувати створення HTML-коду. Редактори HTML-текстів
дають можливість користувачеві швидко і легко вставляти в документ елементи HTML, перевіряти синтаксис команд, виконувати запуск і
налагодження сторінки, не залишаючи вікна редактора.
При створенні сайта користувач звичайно сам визначає,
працювати йому в візуальному чи в HTML-редакторі,
вручну складаючи HTML-код. Але при цьому потрібно
врахувати, що ефективно керувати HTML-документами і
вирішувати питання Web-дизайну можна тільки використовуючи
мову розмітки. Основи HTML-кодування
ми і будемо вивчати в цій главі. Усі приклади, що наводяться, ви зможете дуже
просто повторювати на своєму комп'ютері, набираючи код у редакторі Блокнот і
переглядаючи створені документи за допомогою програми браузера.
Теги і структура HTML-документа
Як виконується розмітка документа за допомогою HTML? Документ розбивається на елементи: заголовки, абзаци,
малюнки, таблиці та інші. Для кожного елементу задається команда мови HTML, названа тегом (або дескриптором). Ця команда містить інформацію про те, який вигляд
повинен мати даний елемент на Web-сторінці,
які зв'язки він має з іншими елементами або документами тощо.
У мові HTML є
багато тегів, серед яких - теги створення заголовка документа, задання параметрів
шрифту, креслення ліній, вставки гіперпосилань, вставки графічних елементів
тощо. Тож Web-сторінка, окрім тексту і
посилань, може вміщувати графіку, звуки, відео, тобто мати такий вигляд, який
ви бачите на екрані комп'ютера.
Тег (у перекладі tag - покажчик, мітка) - це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < >.
Найпростішим тегом є, наприклад, тег з ім'ям HTML. Тег <HTML> визначає
початок HTML-документа. Початковому тегу <HTML> відповідає
кінцевий тег </HTML> із тим
самим ім'ям, але з косою рискою «/». Отже,
початок і кінець HTML-документа позначаються парою тегів:
<HTML>... </HTML>
Тут
крапка означає, що між початковим і кінцевим тегами може
розташовуватися текст і (або) інші теги. У даному разі крапкою позначений
код усього документа.
HTML-документ умовно можна розбити на три частини:
- Службова інформація
для браузера, що вміщена
у рядок з
тегом <!DOCTYPE>.
-
Заголовна частина документа, до якої
вміщена назва документа, а також службова інформація для серверів, описи
невеликих програм-сценаріїв. Ця частина документа міститься між тегами і </HEAD>.
-
Тіло документа, що обмежене тегами <BODY>
... </BODY> (іноді замість тегів <BODY> можуть використовуватися теги фреймової структури <FRAMESET>, які тут не розглядаються).
Простий приклад Web-сторінки
Що таке Web-сторінка, ви відразу зрозумієте з найпростішого
прикладу:
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<ТІТLЕ>Простий приклад</TITLE>
</HEAD>
<BODY>
Це приклад HTML-документа
</BODY>
</HTML>
У цьому
документі ви бачите заголовну частину, обмежену тегами <HEAD>... </HEAD> і тіло документа, вміщене між тегами <BODY> і </BODY>. До
заголовної частини вкладені теги <TITLE>...</TІTLE>. Текст Простий приклад, обмежений цими тегами, інтерпретується
браузером
як назва Web-сторінки і відображається у
заголовку вікна браузера.
Зверніть увагу, що у коді документа трапляються парні теги (мають початковий і кінцевий теги) і одиночні теги (наприклад, <!DOCTYPE>). Надалі тег <!DOCTYPE> ми опускатимемо, Web-сторінки будуть правильно відображатися в останніх
версіях браузерів і без цього тегу.
Коли у браузер буде завантажений документ із
наведеним вище кодом, браузер інтерпретує його приблизно у такий спосіб. Це
документ, підготовлений із використанням HTML версії 4.01. У
заголовній частині документа є заголовок «Простий приклад», який потрібно
відобразити у вікні браузера. В основній частині документа є текст «Це приклад HTML-документа». Результатом роботи програми браузера буде
документ, показаний на мал. Створення такого документа буде розглянуто у практикумі
до цього параграфа.
Елементи HTML
Вивчаючи роботу із документами, ви дізналися, що кожний
документ складається з окремих об'єктів: абзаців, заголовків, малюнків тощо. Ці
об'єкти, переведені у формат HTML, зображаються
у вигляді елементів HTML.
Елементи HTML - це пари тегів і символьні дані (текст або код), вміщені між ними.
Елемент називається звичайно за іменем тегу (без кутових
дужок). Наприклад, елементом є заголовок сторінки, показаної на мал.: <ТІТLЕ>Простий приклад</ТІТLЕ>.
Усі елементи, передбачені в HTML, можна
умовно поділити на кілька категорій:
- структурні - елементи, обов'язкові для документа, що відповідає
стандарту HTML (наприклад, HTML, HEAD, BODY і TITLE);
- блокові - елементи, призначені для форматування цілих
текстових блоків (наприклад, DIV, Н1, Н2, Н3, Н4 , Н5 , Н6, Р, PRE);
часто блокові елементи відокремлюються переведенням рядка від іншої частини
документа;
- текстові - елементи,
що задають розмітку шрифту (І, В, U, BIG,
SMALL і ін.), розмітку тексту (STRONG, CODE, VAR, СІТЕ і
ін.);
- спеціальні - елементи
порожнього рядка (BR, HR), якірний
елемент А, впроваджені елементи (IMG, OBJECT, MAP і ін.), елементи таблиці (TABLE) тощо.
У наведеному вище прикладі Web-сторінки
використано структурні елементи: HTML, HEAD, BODY і TITLE.
У будь-якому документі HTML обов'язково
присутні вкладені
елементи, тобто
такі, що включені до складу інших елементів. Так, у прикладі елемент TITLE вкладений до елемента HEAD. Елементи
HEAD і BODY вкладені
до елемента HTML.
Зазначимо, що у запису елементів HTML можна
використовувати як великі, так і малі літери. Так, браузер однаково
буде сприймати теги <TITLE>, <Title> або <title>. Однак для уніфікації імена тегів записують великими
літерами.
Атрибути тегів
Часто теги, окрім імені, містять додаткові елементи, які
називаються атрибутами. Наприклад, якщо в тег тіла документа <BODY> ввести додатковий елемент:
<BODY bgcolor="yellow">
то це
означатиме, що документ має відображатися на жовтому тлі. Слово bgcolor є атрибутом, a yellow - значенням атрибута.
Атрибути - це компоненти тегу, що містять вказівки про те, як браузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари «ім'я атрибута - значення».
Значення атрибута записується після імені атрибута через
знак рівності =. Всі значення атрибутів за умовчанням мають братися в
подвійні (")
або одинарні (') лапки. Імена атрибутів можуть набиратися як малими, так і
великими літерами, - браузер інтерпретуватиме їх однаково. У тега може бути кілька
атрибутів, тоді вони відокремлюються один від одного пробілами.
Коментар
Часто при створенні Web-сторінок
виникає необхідність пояснити ту або іншу особливість HTML-коду або
наміри розробника, але так, щоб ці пояснення не відображалися у вікні браузера. У таких
випадках незамінним є коментар.
Коментар означає фрагмент коду, що не виконується і
розташований між групами символів <!- і -->. Наприклад,
на екрані не відображатимуться такі елементи:
<!— Коментар, що
займає один рядок
—>
або
<!— Коментар можна
розташовувати
в двох рядках —>
Практикум.
Створення і зберігання HTML-документа
Створіть Web-сторінку,
наведену в пункті «Простий приклад Web-сторінки». Для цього відкрийте вікно редактора Блокнот і наберіть HTML-код. Користуйтесь
прийомами роботи з буфером обміну, що полегшать вам введення тексту. Так теги,
що закриваються, найпростіше отримувати з тегів, що відкриваються, шляхом
копіювання їх із буфера і вставки додаткового символу /. Немає значення, у
верхньому чи нижньому регістрі будуть набрані теги коду. Після набору і
редагування коду збережіть документ у файл Приклад.htm. Завантажте
отриманий файл у програму браузер, і ви отримаєте відображення Web-сторінки.
Комментариев нет:
Отправить комментарий