Мова гіпертекстової розмітки: HTML

· Поняття про гіпертекст

· Поняття про web–документи

· Мова HTML

· Тегова модель файлу

· Елемент BODY

· Форматування тексту

· Заголовки і теги вирівнювання

· Версії мови HTML

1. Поняття про гіпертекст. Текстові документи створюють за допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у файлах, виводять на екран для візуального перегляду і друкують на папері. Гіпертекстові документи, на відміну від звичайних текстових документів, не призначені для виведення на папір. Головне їхнє застосування - подання інформації на екран комп'ютера.

Під час створення гіпертекстового документа інформацію ретельно добирають, оскільки великі за обсягом тексти читати з екрана незручно. Зазвичай такі тексти зберігають не в одному, а у декількох файлах. Інформацію з цих файлів користувач виводить на екран лише тоді, коли вона йому потрібна, і у такій послідовності, яка його найліпше влаштовує. Робить він це за допомогою гіперпосилань.

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

Гіпертекст - це електронний документ, який містить гіперпосилання на інші документи. Термін "гіпертекст" у 1969 р. запровадив Тед Нельсон, хоча принцип організації інформації з використанням посилань відомий віддавна. Візьмемо для прикладу енциклопедичний словник. Він складається з коротких статей. Однак читач, якщо потрібно, може отримати додаткову інформацію завдяки словам, що набрані курсивом. У словниках ці слова служать посиланнями на інші статті. Ідею гіпертекстових інформаційних систем на теоретичному рівні сформулював В. Буш у 1945 році.

Гіпертекстова технологія - це інформаційна технологія, що базується на використанні гіпертекстів. її застосовують у комп'ютерних енциклопедіях і навчальних програмах, у прикладних програмах для роботи з довідковою інформацією, а також для організації доступу до інформації у WWW-просторі, тобто для роботи з web–документами.

2. Поняття про web–документи. Розглянемо відмінність між звичайним гіпертекстовим документом й web–документом. Звичайні гіпертекстові документи, наприклад, з комп'ютерної енциклопедії зберігаються на одному диску, а web–документи однієї тематики можуть розташовуватися на комп'ютерах-серверах у різних кінцях світу. Якщо пересилання файлів лініями зв'язку відбувається швидко, користувач може навіть не звернути уваги на те, що інформацію він отримує не зі свого комп'ютера, а із серверу, який знаходиться в Токіо, у Львові чи в Нью-Йорку.

Web–документи зберігаються і пересилаються як текстові файли з розширенням htm чи html тощо. Це звичайні тексти, написані мовою HTML. Відображаються такі тексти на екрані зовсім інакше, ніж вони виглядають у html–файлі. Для відображення html–файлів використовують Браузери.

Отже, web–документ - це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп'ютера за допомогою браузера.

Web–документ, який ми бачимо на екрані браузера, називають web–сторінкою. Це пов'язано з тим, що хорошим стилем уважається подання деякої частини інформації на одній умовній сторінці. Бажано, щоб web–сторінка поміщалась на одній-двох екранних сторінках і використання вертикального скролінгу було мінімальним. Додаткову інформацію користувач має читати на інших сторінках, користуючись гіперпосиланнями.

Декілька web–документів на одну тему, що є на деякому комп'ютері чи належать одному власникові, утворюють web–вузол (інший термін - web–caйm).

Web–вузли створюють web–дизайнери для університетів, фірм, магазинів, громадських організацій, окремих осіб з метою реклами напрямків діяльності, послуг, товарів, зокрема, комп'ютерних програм, пошуку партнерів, надання користувачам корисної інформації для вирішення побутових чи виробничих проблем тощо. Сьогодні web–дизайн - привабливий і перспективний різновид професійної діяльності людини, який потребує творчого підходу.

Web–дизайн - це сукупність правил і рекомендацій, якими мають користуватися автори, якщо вони хочуть, щоб їхні сторінки були інформативними і виглядали привабливо.

Одне з найважливіших правил web–дизайну полягає у структуризації інформації, вдалому поділ її на окремі частини і налагодженні зв'язків між ними.

Розглянемо структуру web–документа. Простий документ складається з текстових блоків, двох-трьох рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань.

Більш складні web–документи містять фрейми - рамки, в яких одночасно відображаються різні сторінки; елементи керування - кнопки, перемикачі, поля діалогу; динамічні ефекти та графічні рухомі об'єкти ActiveX чи Flash.

Текстові блоки є трьох головних типів: короткі (по два-три речення) текстові абзаци, списки, таблиці.

Згідно з чинним стандартом абзаци на класичній web–сторінці відокремлюються порожнім рядком і не мають відступів у першому рядку. Абзац може бути вирівняний до одного з країв або до центру екрана. Особлива зручність перегляду інформації зумовлена тим, що в нормальному режимі web–сторінка не має горизонтальної смуги прокручування, а вертикальна смуга може бути. Браузер автоматично масштабує горизонтальне зображення різних елементів сторінки, враховуючи характеристики монітора комп'ютера клієнта і розміри Windows-вікна, в якому демонструється документ.

Інформація на сторінці традиційно подається на сірому чи білому тлі, але її можна розмістити і на кольоровому тлі чи на тлі картинки з деякого графічного файлу. Створюючи web–документ, потрібно стежити, щоб обсяг усіх його файлів, зокрема, графічних і відеододатків був невеликим. Великі файли Браузер зчитує довго, і в читача може не вистачити терпіння очікувати на їхнє надходження. Тому перед тим як вставити у свою web–сторінку графічний, звуковий чи відеофайл або клацнути у чужій web–сторінці на звуковому чи відеопосиланні, варто взяти до уваги пропускну спроможність наявної лінії зв'язку.

3. Мова HTML. Для створення web–сторінок послуговуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML -Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори, такі як FrontPage, DreamWeaver, MS Word тощо, дають змогу створювати web–сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.

Ми вивчатимемо два способи створення web–сторінки: за допомогою мови HTML; методом візуального конструювання засобами програм MS Word і FrontPage.

Розглянемо перший спосіб. Для підготовки html–файлу можна використати текстовий редактор NotePadчи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html–файл потрібно зберегти на диску з деякою назвою з розширенням назви htmчи html.

Приклад 1. Структуру html–файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:

<HTML> <!--Це файл filel.htm -->

<HEAD> <TITLE> Назва вікна web–сторінки </TITLE>

</HEAD>

<BODY параметри> <!--Далі йде текст, наприклад, такий.-->

Мене звати Світлана.

Мені 16 років.

Я хочу стати web–дизайнером. Це моя перша web–сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у браузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web–сторінки.

Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу.

</BODY>

</HTML>

Відкривши такий файл у браузері, побачимо web–сторінку, де відомості про цю особу будуть розміщені дещо інакше, ніж у файлі: увесь текст розміщений в одному абзаці вирівняний до лівого краю, немає абзацного відступу (рис. 7.1).

Службові слова, наведені великими літерами, вивчатимемо далі. Їх можна писати також малими літерами.

Рис. 7.1. Текст html–файлу у вікні браузера

4. Тегова модель файлу. Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html–файлу: <HTML>... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.

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

Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.

У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>...</TITLE>. Інші елементи заголовка вивчатимемо пізніше.

Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.

Зауваження. У багатьох книжках замість слова параметр вживають термін атрибут, а одинарний чи парний теги називають елементом, наприклад, елемент BODY тощо.

5. Елемент (тег) BODY. У середині пари тегів <BODY паpметpи>...</BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні браузера.

Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно - достатньо набрати потрібний текст. Якщо ж дизайнер хоче подати текст спеціально, щоб він виглядав якнайкраще, до тексту застосовують теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML.

Розглянемо головні параметри тега BODY:

 

BACKGROUND = "d:\myweb\picture1.jpg"	Задає шлях до картинки для тла
BGCOLOR = "white"	Задає білий колір тла, якщо не використовується тло-картинка
BGPROPERTIES = "fixed"	Фонове зображення не прокручується
TEXT = "black"	Задає колір тексту (тут чорний) на сторінці

 

Інші параметри, що стосуються способів відображення гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше.

6. Форматування тексту для web–сторінок. Розглянемо теги, які використовують для форматування тексту.

Теги форматування символів тексту (вони парні):

 

<В> текст </В>	Жирний шрифт тексту
<І> текст </І>	Шрифт– курсив
<U> текст </U>	Підкреслений шрифт
<SUB> текст </SUB>	Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>О
<SUP> текст </SUP>	Верхній індекс, наприклад, 1а вулиця, а2
<BIG> текст </BIG>	ВЕЛИКИЙ шрифт
<SMALL> текст </SMALL>	Малий шрифт
<EM> текст </ЕМ>	Виокремлений курсивом текст (те саме, що тег І)
<B> <I> текст </І> </В>	Жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів

 

Теги для розміщення тексту (вони одинарні):

 

<р>	Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>
<BR>	Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка
<HR>	У рядку буде проведена горизонтальна лінія

 

7. Заголовки і теги вирівнювання. Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:

 

Теги	Результат на екрані
<Н1>Заголовок 1</Н1>	Заголовок 1
<Н2>Заголовок 2</Н2>	Заголовок 2
<Н3>Заголовок 3</Н3>	Заголовок 3
<Н4>Заголовок 4</Н4>	Заголовок 4
<Н5>Заголовок 5</Н5>	Заголовок 5
<Н6>Заголовок 6</Н6>	Заголовок 6

 

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

 

<CENTER> елемент </CENTER>	Вирівнювання до центру
<LEFT> елемент </LEFT>	Вирівнювання до лівого краю
<RIGHT> елемент </RIGHT>	Вирівнювання до правого краю

 

Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.

Приклад 2. Розгляньте зразок форматування тексту для web–сторінки з розповіддю деякої особи про себе.

<HTML> <!--Це файл file2.htm -->

<HEAD> <TITLE> Myweb–page</TITLE>

</HEAD>

<BODYBGCOLOR="yellow" TEXT= "navy"> <CENTER><H1>Привіт!</H1>

<H2> Мене звуть Світлана </Н2>

</CENTER>

<HR>

<H3> Мені 16 років </Н3>

<Н4> Я хочу стати web–дизайнером </Н4>

<HR> Це моя <В>друга</В> спроба створити web–сторінку. Я вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <I>фотографії, картинки, звук, відеозображення</I> шляхом посилання на відповідні <u>графічні, звукові чи відеофайли</u>.<Р> Я збережу цей файл на диску і відкрию його у браузері.<Р> Цю web–сторінку я буду удосконалювати. Її ще рано розміщувати на сервері. <HR> </BODY>

</HTML>

На рис. 2 подано вигляд екрана після відкривання файлу file2.htm у браузері.

 

Рис. 7.2. Вигляд сторінки у браузері

8. Версії мови HTML. Мова HTMLвиникла у наслідок тривалих процесів розвитку й удосконалення гіпертекстових інформаційних систем. В основі синтаксису мови лежить стандарт ISO 8879:1986 „Information processing. Text and office systems. Standard Generalized Markup Language (SGML)". Однак на практиці відхилення від стандарту майже всіма фірмами стало звичним явищем. Сьогодні нагляд за розвитком мови здійснює консорціум W3C- некомерційна організація, створена у 1994 році з метою розробки стандартів і засобів для web–технологій. W3Cочолює автор сучасної web–концепції Тім Бернерс Лі, а учасниками консорціуму є близько 200 організацій, зокрема провідні у світі фірми Microsoftі Netscape. Під егідою консорціуму було створено низку версій мови: HTML3.2 (1996), HTML4 (1997), HTML4.01 (1999). У мову були введені нові елементи: таблиці стилів, засоби створення форм і фреймів, засоби, що полегшили доступ до webлюдям з обмеженими фізичними можливостями і та ін. З новинками і результатами роботи консорціуму можна ознайомитися на сайті www.w3.org. Зазначимо, що ми дотримуватимемось синтаксису версії HTML4.