Главная \ Методичні вказівки \ Методичні вказівки \ 1074 Лекція Мова розмітки гіпертексту HTML, НУДПСУ

Лекція Мова розмітки гіпертексту HTML, НУДПСУ

« Назад

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

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

Основою всесвітнього «павутиння» World Wide Web є мова розмітки гіпертексту HTML (від англ. «HyperText 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-документа

Розмітка документа за допомогою HTML виконується таким чином. Документ розбивається на елементи: заголовки, абзаци, рисунки, таблиці та ін. Для кожного елемента задається команда мови HTML, названа тегом (або дескриптором). Ця команда містить інформацію про те, який вигляд повинен мати даний елемент на Web-сторінці, які зв'язки він має з іншими елементами або документами тощо.

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

Тег (у перекладі з англ. «tag» — покажчик, мітка) — це фрагмент коду, що описує певні властивості елемента документа HTML. Теги вміщуються у кутові дужки < >.

Найпростішим тегом є, наприклад, тег з ім'ям HTML. Teг визначає початок HTML-документа. Початковому тегу відповідає кінцевий тег із тим самим ім'ям, але з косою рискою «/». Отже, початок і кінець HTML-документа позначаються парою тегів:
<HTML> ... </HTML>

Тут крапки означають, що між початковим і кінцевим тегами може розташовуватися текст і (або) інші теги. У даному випадку крапками позначений код усього документа.

HTML-документ умовно можна розбити на три частини:

Службова інформація для браузера, що вміщена у рядок з тегом <!DOCTYPE>.
Заголовна частина документа, до якої вміщена назва документа, а також службова інформація для серверів, описи невеликих програм-сценаріїв. Ця частина документа міститься між тегами <HEAD> і </HEAD>.
Тіло документа, обмежене тегами <BODY> ... </BODY> (іноді замість тегів <BODY> можуть використовуватися теги фреймової структури <FRAMESET>, які тут не розглядаються).

Що таке Web-сторінка, зрозуміло із найпростішого прикладу:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
     <HTML>
     <HEAD>
     <ТІTLЕ<Простий приклад</ТІТLЕ>
     </HEAD<
     <BODY>
     Це приклад HTML-документа
     </BODY>
     </HTML>

У цьому документі ви бачите заголовну частину, обмежену тегами <HEAD> ... </HEAD> і тіло документа, вміщене між тегами <BODY> і </BODY>. До заголовної частини вкладені теги <TITLE> ... </TITLE>. Текст «Простий приклад», обмежений цими тегами, інтерпретується браузером як назва Web-сторінки і відображається у заголовку вікна браузера (рис. 2).

Зверніть увагу, що у коді документа трапляються парні теги (мають початковий і кінцевий теги) і одиночні теги (наприклад, <!DOCTYPE>). Надалі тег <!DOCTYPE> ми опускатимемо, Web-сторінки правильно відображатимуться в останніх версіях браузерів і без цього тегу.

Коли у браузер буде завантажений документ із наведеним вище кодом, браузер інтерпретує його приблизно у такий спосіб. Це документ, підготовлений із використанням HTML версії 4.01. У заголовній частині документа є заголовок «Простий приклад», який потрібно відобразити у вікні браузера. В основній частині документа є текст «Це приклад HTML-документа». Результатом роботи програми браузера буде документ, показаний на рис. 1. Створення такого документа буде розглянуто у практикумі до цього параграфа.

Елементи HTML

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

Елементи HTML — це пари тегів і символьні дані (текст або код), вміщені між ними.

Елемент називається звичайно за іменем тегу (без кутових дужок). Наприклад, елементом є заголовок сторінки, показаної на рис. 1: <ТІТLЕ>Простий приклад</ТІTLЕ>.

Усі елементи, передбачені в HTML, можна умовно поділити на кілька категорій:

структурні — елементи, обов'язкові для документа, що відповідає стандарту HTML (наприклад, <HTML>, <HEAD>, <BODY> і <TITLE>);
блокові — елементи, призначені для форматування цілих текстових блоків (наприклад, <DIV>, <Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>, <Р>, <PRE>); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа;
текстові — елементи, що задають розмітку шрифту (<І>, <В>, <U>, <BIG>, <SMALL> тощо), розмітку тексту (<STRONG>, <CODE>, <VAR>, <СІТЕ> тощо);
спеціальні — елементи порожнього рядка (<BR>, <HR>), якірний елемент <А>, впроваджені елементи (<IMG>, <OBJECT> тощо ), елементи таблиці (<TABLE>) тощо.

У наведеному вище прикладі Web-сторінки використано структурні елементи: <HTML>, <HEAD>, <BODY> і <TITLE>.

У будь-якому документі HTML обов'язково присутні вкладені елементи тобто такі, що включені до складу інших елементів. Так, у прикладі на рис. 1 елемент <TITLE> вкладений до елемента <HEAD>. Елементи <HEAD> і <BODY> вкладені до елемента HTML.

Зазначимо, що у запису елементів HTML можна використовувати як великі, так і малі літери. Так, браузер однаково сприйматиме теги <TITLE>, <Title> або <title>. Однак для уніфікації імена тегів записують великими літерами.

Атрибути тегів

Часто теги, окрім імені, містять додаткові елементи, які називаються атрибутами. Наприклад, якщо в тег тіла документа ввести додатковий елемент:
<BODY bgcolor="yellow">
то це означатиме, що документ має відображатися на жовтому фоні. Слово bgcolor є атрибутом, a yellow — значенням атрибута.

Атрибути — це компоненти тегу, що містять вказівки про те, як браузер має сприйняти та обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари «ім'я атрибута-значення».

Значення атрибута записується після імені атрибута через знак рівності =. Всі значення атрибутів за замовчуванням мають братися в подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами — браузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами.

Коментарі

Часто при створенні Web-сторінок виникає необхідність пояснити ту або іншу особливість HTML-коду чи наміри розробника, але так, щоб ці пояснення не відображалися у вікні браузера. У таких випадках незамінним є коментар.

Коментар означає фрагмент коду, що не виконується і розташований між групами символів .

Наприклад, на екрані не відображатимуться такі елементи:

або

Формування абзаців і рядків

При створенні Web-сторінок потрібно прагнути до лаконічних текстів, які чітко розділені на абзаци. Для створення абзацу в мові HTML передбачено кілька можливостей. Найпростіша з них — це використання тегів <Р> і </Р>, між якими вміщений текст абзацу. Проте кінцевий тег </Р> в елементі абзацу не є обов'язковим.

Для переведення рядка (розрив рядка) застосовується тег <BR>. Цей тег є порожнім елементом, що змушує браузер перевести текст на новий рядок. Теги <BR> зручні під час оформлення поштових адрес, набору віршів тощо.

Нижче наведено приклад використання тегів <Р> і <BR> для відображення на Web-сторінці відомої байки.

  <HTML>
     <HEAD>
     <ТІТLЕ>Байка «Ведмежий суд»</ТІТLЕ>
     </HEAD>
     <BODY>
     <Р>Ведмежий суд</Р>
     Лисичка подала у суд таку бумагу:<ВR>
     Що бачила вона, як попелястий Віл<ВR>
     На панській винниці пив, як мошенник, брагу,<BR>
     їв сіно, і овес, і сіль. <BR><BR>
     Є. П. Гребінка
     </BODY>
     </HTML>

Вміст HTML-елементів звичайно записується з відступами, як у наведеному прикладі. Це не впливає на зовнішній вигляд самої Web-сторінки, але полегшує читання коду.

Створення заголовків

Заголовки поділяють HTML-документ на логічно закінчені блоки. Завдяки заголовкам відвідувач Web-сторінки може отримати уявлення про її вміст. Для задання заголовків використовуються парні теги <Н1> (заголовок 1-го, найвищого рівня), <Н2> (заголовок 2-го рівня) тощо. Усього передбачено 6 рівнів заголовків.

Програма браузера відображає заголовки більшим (напівжирним) шрифтом. Чим вище рівень заголовка, тим більший розмір шрифту. Заголовки відокремлюються порожніми рядками від іншого тексту.

Наприклад, замінимо у наведеному вище коді абзац із назвою байки (рис. 1) на заголовок <Н1>:
<Н1>Ведмежий суд</Н1>

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

Абзаци, що задаються тегами <Р> і <BR>, за замовчуванням вирівнюються по лівому краю сторінки (див. рис. 1). Змінити таке вирівнювання можна за допомогою атрибута align. Значення align="center" задаватиме вирівнювання по центру, значення align="right" — вирівнювання по правому краю сторінки (вирівнювання по лівому краю визначається атрибутом align="left").

Наприклад, заголовок <Н1 align="center">Beдмежий суд</Н1> розташовуватиметься по центру сторінки.

Параметри шрифту, який використовується для відображення тексту на Web-сторінках, найпростіше визначити за допомогою елемента <FONT>. Для цього елемента передбачені такі атрибути: face (гарнітура шрифту або список допустимих шрифтів); color (колір шрифту) і size (розмір шрифту).

Наприклад, ви хочете в наведеному прикладі байки перше слово «Лисичка» показати шрифтом Arial жовтогарячого кольору. Для цього введіть у документ:
<FONT face="Arial" соlоr="оrаngе">Лисичка</FONT>

Щоб задати будь-яке зображення шрифту, використовуються теги: <B> ... </В> — для задання напівжирного тексту; <І> ... </І> — для задання курсивного тексту і <U> ... </U> — для підкресленого тексту.

Наприклад, якщо потрібно відобразити курсивом ім'я автора у тому самому прикладі, вставте у код сторінки такий тег:
<І>Є.П. Гребінка</I>

Якщо ж потрібно визначити колір шрифту для всієї сторінки, то використовується атрибут text у тегу <BODY>.

Наприклад, тег <BODY text="red"> задає для всього тексту червоний колір.

Колір фону всього HTML-документа визначається атрибутом bgcolor тегу <BODY>.

Наприклад, тег <BODY bgcolor="olive"> призначає оливковий колір для фону Web-сторінки.

Приклад оформлення Web-сторінки

Проілюструємо застосування описаних засобів HTML на прикладі Web-сторінки із байкою. Удосконалимо код цієї сторінки, щоб вона мала цікавіший вигляд:

Задамо фоновий колір сторінки — темно-фіолетовий, колір шрифту для всієї сторінки — білий. Заголовок байки оформимо як Н2 і вирівняємо по центру. Ініціали і прізвище автора відобразимо курсивом із вирівнюванням по правому краю. Все це можна виконати за допомогою простого коду:

<HTML>
     <HEAD>
     <ТІТLЕ>Байка «Ведмежий суд»</ТІТLЕ>
     </HEAD>
     
     <BODY bgcolor="darkviolet" text="white">
     
     <Н2 аlign="сеntеr">Ведмежий суд</Н2>
     
     Лисичка подала у суд таку бумагу:<ВR>
     Що бачила вона, як попелястий Віл<ВR>
     На панський винниці пив, як мошенник, брагу,<BR>
     їв сіно, і овес, і сіль.
     
     <P align="right"><I>Є.П. Гребінка</І><P>
     </BODY>
     </HTML>M

Наберіть цей код у текстовому редакторі і збережіть його у вигляді файла Байка.htm. Відкривши файл у браузері Internet Explorer, ви отримаєте сторінку, наведену на рис. 4.

Порівняйте цю сторінку з рис. 3 і проаналізуйте, які теги та атрибути відповідають за зміну зовнішнього вигляду сторінки

Загальні правила формування Web-сторінок

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

Текст має бути лаконічним і зрозумілим під час читання з першого разу. З тексту бажано вилучити всі зайві звороти і слова, без яких повністю можна обійтися. Заголовки також мають бути зрозумілими та інформативними. При перерахуваннях різних об'єктів, понять чи подій користуйтеся маркованими списками. Намагайтеся заощаджувати мережний час ваших відвідувачів і пам'ятайте, що більшість користувачів переглядають сторінки «по діагоналі», звертаючи увагу тільки на заголовки і виділені слова.
Великі за обсягом тексти краще розбивати на декілька сторінок, пов'язаних гіперпосиланнями. Якщо текст має заголовки різного ієрархічного рівня, то бажано цю ієрархію відбити в структурі пов'язаних між собою сторінок. Це допоможе користувачеві краще орієнтуватися у великому текстовому матеріалі.
Тексти Web-сторінок мають бути написані грамотно. Неграмотно написані тексти ставлять під сумнів поданий у них матеріал. Пам'ятайте, що ваші тексти, опубліковані в Інтернеті, стають доступними для багатьох людей.

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

Сфера комп'ютерної графіки та електронної верстки, пов'язана з компонуванням і оформленням Web-сторінок, називається Web-дизайном.

Змістова частина Web-сторінки складається з текстових і графічних елементів. Вона має займати щонайменше половину робочої ділянки вікна браузера. Оптимальним співвідношенням є, коли під змістову частину виділяється приблизно 80 % простору сторінки, а під елементи навігації (списки, меню, кнопки) — 20 %.

Після створення сторінки перегляньте, чи всі наявні на ній елементи потрібні. Спробуйте вилучити неважливі з погляду змісту елементи. Якщо дизайн сторінки при цьому не постраждає, то без вилучених елементів узагалі можна обійтися. Пам'ятайте про загальний принцип Web-дизайну — прагнути до мінімального розміру HTML-файлів. Кожен кілобайт обсягу сторінки це зайві секунди завантаження. Розмір HTML-файлів не має перевищувати 20–30 Кбайт, а оптимальним розміром файлів зображень є декілька кілобайтів. Якщо зображення не вміщується у файл такого розміру, потрібно виконати обробку зображення, щоб підсумковий обсяг у форматі GIF або JPEG не перевищував одного-двох десятків Кб.

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

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

Програмні засоби автоматизованого створення HTML-файлів

Отже, документ, складений за допомогою мови розмітки HTML, є текстовим файлом. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад, у додатках Блокнот чи WordPad, що входять до складу ОС Windows. Однак нині існують більш зручні та розвинені програми підготовки HTML-документів. Їх умовно можна розділити на візуальні редактори HTML і редактори HTML-текстів.

Працюючи у візуальному HTML-редакторі, користувач має справу з графічними образами елементів HTML, а не з кодом документа. Він може шляхом перетягування мишею і простими операціями в інтерфейсі розміщувати на сторінці необхідні елементи. Завдяки цьому навіть користувач, який не знає мови HTML, може створювати прості Web-сторінки. До візуальних редакторів HTML належать програма Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold та ін.

Редактори власне HTML-текстів, серед яких найбільш відомі HomeSite і HotDog, мають основні можливості текстових редакторів (використання буфера обміну, засобів пошуку слів тощо). Але, на відміну від звичайних редакторів тексту, ці додатки надають у розпорядження розроблювача візуальне середовище програмування (типу Visual Basic або Delphi) і дозволяють автоматизувати створення HTML-коду. Редактори HTML-текстів надають можливість користувачеві швидко і легко вставляти в документ елементи HTML, перевіряти синтаксис команд, виконувати запуск і налагодження сторінки, не залишаючи вікна редактора.

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

Додаткові можливості оформлення Web-сторінок

Гіперпосилання

Гіперпосилання або просто посилання є найнеобхіднішим елементом Web-сторінок. За допомогою гіперпосилання користувач може переходити до різних частин поточної сторінки, звертатися до інших сторінок або Web-вузлів.

Посилання організовується у такий спосіб. На вихідній Web-сторінці визначається відправна точка посилання, наприклад, підкреслене слово або рисунок. На цільовій Web-сторінці задається точка призначення посилання, що відповідає як конкретному HTML-елементу (тексту, рисунку, аудіо- або відеокліпу), так і документу в цілому.

Відправна точка посилання задається тегом <А>. Ім'я цього тегу походить від першої літери слова «anchor —» якір. Сам елемент <А> називається елементом прив'язки або якірним елементом. Усередині тегу <А> ставиться обов'язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <А> і розміщується текст посилання або елемент рисунка.

Так, найпростіше посилання може виглядати як <А href="rest.html">Moї канікулиНа Web-сторінці це посилання відображатиметься у вигляді тексту "Мої канікули". При клацанні мишею по ньому завантажуватиметь НТМL-файл rest.html.

Зверніть увагу, що в атрибуті href зазначене лише ім'я файла, яке відповідає відносному посиланню на файл, розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у World Wide Web, то в атрибуті href зазначується URL цього ресурсу.

Наприклад,

<А href="http://www.samsung.com">Продукція фірми Samsung< /A >

Як атрибут href можна зазначити ресурс mailto (виклик протоколу електронної пошти SMPT).

Наприклад, посилання вигляду

<А href="mailto://garry@myserver.net.ua">Лист Гарику< /A >
дозволить відвідувачеві вашої сторінки безпосередньо перейти до створення і відправлення повідомлення за адресою: garry@myserver.net.ua.

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

Локатор URL ресурсу, на який вказує посилання, може бути абсолютним і відносним. Абсолютний URL містить усі компоненти, необхідні для того, щоб браузер зміг знайти Web-сторінку в неосяжній мережі WWW. Але, якщо посилання вказує на ресурс, який міститься на тому самому вузлі, що і вихідний документ, зручніше користуватися скороченим записом URL, в якому зазначується тільки папка і файл. Такий запис адреси називається відносним URL.

Внутрішні гіперпосилання

Отже, для переходів з однієї частини документа до іншої служать внутрішні посилання. Цей вид посилань доцільно використовувати, коли всі частини великого документа не відображаються повністю у вікні браузера. Внутрішнє посилання, як і зовнішнє, задається за допомогою елемента якірного тегу <А> з атрибутом href. Але, на відміну від зовнішнього посилання, у значенні атрибута href зазначується не URL, а ім'я мітки (мітка позначається знаком #).

Наприклад, такий тег
<А href="#главаl">Poзділ 1. Відплиття Богомира </А>

задає посилання на елемент документа, позначеного міткою "главa1". Саме посилання має вигляд виділеного тексту «Розділ 1. Відплиття Богомира». Мітка створюється за допомогою якоря <А>, однак у ньому замість атрибута href використовується атрибут name.

Розглянемо створення внутрішніх посилань на конкретному прикладі.

Наприклад, ви збираєтеся створити електронний варіант книги Дж. Толкієна «Дві твердині» і хочете, щоб із змісту книги можна було переходити по посиланнях до відповідних глав.

HTML-код усього документа матиме такий вигляд:
      <HTML >
      < HEAD >
      <ТІТLЕ>Внутрішні посилання</ТІТLЕ> </HEAD > <BODY >
<Н1> Джон P.P. Толкієн. "Дві твердині"</Н1> <Н2>Утримання</Н2>

<А href="#глав1">Розділ 1. Відплиття Богомира</А>
      <А href="#глав2">Розділ 2. Кіннотники істанії</А>
      <А href="#глав3">Poзділ 3. Урукхай</А>
      <А href="#глав4">Розділ 4. Древень</А>
      <А href="#глав5">Розділ 5. Білий вершник</А>

<Н2><А name="глав1">Розділ 1. Відплиття Богомира</А></Н2>
Арагорн біг крутою тропою, вдивляючись у землю.
      Хобіти ступають легко: Слідопит, і той, бувало,
      збивався з їхнього сліду. Але біля вершини тропу зволожив
      струмок, і нарешті знайшлися ледь помітні вм'ятинки...

< !-Далі йде текст глави 1 - >
      <Н2><А name="глав2">Розділ 2. Кіннотники істанії</А></Н2>
      Сутеніло. Позаду, у лісистих підніжжях, дерева тонули
      в тумані, і туман підповзав до світлих заводей
      Андуїну, але в небесах було ясно...

< !-Далі йде текст глави 2 ->
      <Н2><А name="глав3">Розділ 3. Урукхай </А></Н2>
      Піна огорнув неясний і неспокійний сон: йому
      здавалося, що він чує власний голосок десь у темних
      підвалах і зве: "Фродо, Фродо!"...

< !-Далі йде текст інших глав ->

< /BODY>
< /HTML>

При клацанні по внутрішньому посиланню, зазначеному у змісті, документ прокручується до початку тієї чи іншої глави.

Зробимо кілька зауважень щодо оформлення посилань. По-перше, текст посилання не має бути довгим, щоб не утруднювати вибір потрібного посилання при швидкому перегляді документа користувачем. По-друге, текст посилання має відображати зміст об'єкта, на який указує посилання. Не слід, наприклад, використовувати для посилань малоінформативні фрази типу «Клацніть тут» чи «Клацни і побачиш».

Використання рисунків

Важко знайти у WWW сторінку, яка не мала б зображень. Вставка зображення на Web-сторінку виконується одиночним тегом <IMG> Усередині цього тегу обов'язково записується атрибут src, що вміщує URL зображення. Назва цього атрибута походить від слова «source» — джерело.

Наприклад, ви хочете розмістити на сторінці картинку із файла lord.jpg.

Для цього збережіть файл із зображенням у певній папці (наприклад, у тій самій папці, що і HTML-документ), а у документ введіть тег

Повний код документа може мати вигляд:

<HEAD>
      <TITLE>"Володар лісу"</ТІТLЕ></title>
      </HEAD>

      <Н2>Вставка зображення</Н2>
      <IMG src="bear.jpg">

У результаті ви отримаєте Web-сторінку, як на рис. 2. За замовчуванням браузер покаже зображення, вирівняне по лівому краю сторінки.

Якого розміру буде зображення на Web-сторінці? За замовчуванням браузер використовуватиме реальні розміри зображення, яке зберігається в графічному файлі. Якщо потрібно змінити ці розміри, застосовують атрибути width (ширина) і height (висота) у тегу <IMG>. Значення розмірів зображення задаються звичайно у пікселах.

Наприклад,
<IMG src="image.gif" width="133" height="33".>

Можна також задавати ширину і висоту у відсотках розмірів зовнішнього елемента (сторінки).

Наприклад, зображення, що задається тегом <IMG src="lord.jpg" width="30%"> займе по ширині 30 % сторінки, а висота буде розрахована браузером із зберіганням пропорцій.

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

Наприклад, така інструкція <IMG src="photo.jpg" width="50%" alt="Moя фотографія"> замість рисунка, що не завантажився, виведе рамку із межами рисунка і помістить у неї текст «Моя фотографія».

Графічні формати Web-сторінок

Основними форматами рисунків, що відображаються програмами браузерів, є GIF (скорочення від «Graphics Interchange Format» — графічний формат обміну) і JPEG (скорочення від «Joint Photographic Experts Group» — об'єднана група експертів фотографії).

Файли формату GIF (розширення .gif) мають малий обсяг завдяки тому, що в них використовується палітра з 256 кольорів і застосовується алгоритм стиснення без втрат Лемпеля — Зіва — Велча. Цей алгоритм особливо ефективний під час обробки простих ілюстрацій з великими ділянками одного кольору. Формат GIF широко застосовується для створення «прозорих» рисунків, а також зображень, що завантажуються черезрядковим методом. Приклади черезрядкового завантаження ви, напевно, бачили при перегляді Web-сторінок в Інтернеті: спочатку завантажується простий варіант рисунка з великим розміром точок зображення, потім у процесі завантаження рисунка точки зображення зменшуються, і рисунок ніби виявляється. Ще однією перевагою GIF-формату є можливість використання анімації. У файлі GIF можна створити послідовність рисунків — кадрів «мультфільму», що є найпростішим способом додавання анімації на Web-сторінки.

Інший графічний формат, JPEG (розширення .jpg або .jpeg), звичайно застосовується для зображень з більшою кількістю кольорів, наприклад, для фотографій. У цьому форматі застосований метод стиснення з втратами. При збереженні високоякісних зображень JPEG займає на диску набагато менше місця, ніж GIF. Однак формат JPEG не підтримує функції прозорості й анімації.

Існує ще один формат створення рисунків для Web-сторінок — це PNG (скорочення від «Portable Network Graphics» — мережна графіка, що переноситься). Подання зображень у вигляді PNG-файлів застосовується як альтернатива формату GIF і є перспективним для застосування в мережних додатках. Перевагою цього формату порівняно з форматом GIF є компактність файлів і достатня якість передачі кольорів. На жаль, формат PNG підтримується поки що не всіма браузерами.

Використання зображень-гіперпосилань

Гіперпосилання на Web-сторінках можна подавати не тільки як виділений текст, а й у вигляді рисунка. Клацання мишею по такому рисунка призводить до завантаження нового HTML-документа або переходу в межах поточного документа.

Для створення зображення-посилання встановіть у потрібному місці документа якірний тег <А> і вкладіть до нього елемент <IMG>.

Наприклад, якщо у документі розмістити елемент,
<А href="http://www.rambler.com"> <IMG src="logo.jpg" width="100" height="28"> </A>

то можна буде клацанням по рисунку із файла logo.jpg завантажувати пошукову систему Рамблер.

Форматування списків даних і таблиць

Теги оформлення списку даних

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

У HTML розрізняють марковані (неупорядковані) і нумеровані (упорядковані) списки, причому код списку є структурою із вкладених елементів. Зовнішнім елементом є пари тегів:

<UL> ... </UL> — для маркованого списку;

<OL> ... </OL> — для нумерованого списку.

Усередині цих тегів містяться елементи списку, які записуються за допомогою одиночних тегів:

<LІ> — Вміст рядка списку

Отже, кількість елементів <LI> дорівнює кількості рядків у списку. Імена наведених вище тегів є скороченнями слів: <UL> («Unordered List») — неупорядкований список, тобто список без номерів; <OL> («Ordered List») — упорядкований список <LI> («List Item») — елемент списку.

Іноді на початку списку розташовують заголовок, що виділяється парним тегом <LH> ... </LH>. Ім'я цього тегу <LH> — скорочення від «List Header» (заголовок списку).

Для отримання маркованого списку на Web-сторінці маємо набрати такий код:

Наприклад, ви хочете оформити на сторінці список жителів Середзем'я (за Д. Толкієном).

Це можна зробити так (елемент LH опускаємо):

<HTML>
<HEAD>
<ТІТLЕ>Маркований список</ТІТLЕ>
</HEAD>
<BODY>
<Н2>Жителі Середзем'я</Н2>
<UL>
<LI>Хобіти
<LІ>Люди
<LІ>Орки
<LІ>Ельфи
</UL>
</BODY>
</HTML>

Зовнішній вигляд цієї сторінки наведено на рис. 1, а. Рядки списку позначені маркерами — маленькими затемненими кружечками, які прийняті за замовчуванням. Якщо ви хочете змінити цей вид маркерів, можете додати в елементи списку атрибут type="square" (маркер у вигляді заповненого квадратика) або type="circle" (маркер — незаповнений кружечок).

Нумерований список формується із застосуванням зовнішнього парного тегу <OL></OL>, що обрамовує елементи списку. Нижче наведений код документа з нумерованим списком, а на рис. 1, б показано, як його відображає браузер Internet Explorer.

<HTML>
<HEAD>
<ТІТLЕ>Нумерований список</ТІТLЕ>
</HEAD>
<BODY>
<Н2>Бої і битви Середзем'я</Н2>
<OL>
<LІ>Битва поблизу Мінас-Тіриту;
<LІ>Бій двох твердинь;
<LІ>Напад на Гондор;
<LІ>Заключний бій;
<LІ>Битва в Хобітанії;
</OL>
</BODY>
</HTML>

У наведеному прикладі нумерація елементів списку виконана арабськими цифрами. Стиль нумерації змінюється за допомогою атрибута type елемента <LI>:

type=A — нумерація великими літерами англійського алфавіту (А, В, С,...);
type=a — нумерація малими англійськими літерами (а, b, с,...);
type=I — нумерація за допомогою римських цифр (І, IІ, III,...).

Робота з таблицями

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

Таблиці будуються за принципом вкладення і вводяться на Web-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <table> і закінчується тегом </table>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <table> ... </table> можуть вставлятися такі елементи:

TR — елемент створення рядка;
TD — елемент, що визначає вміст комірки даних;
TH — елемент, що визначає комірку заголовка.

Наприклад, для створення таблиці 3×2 використовується такий шаблон:

де крапками позначений вміст кожної комірки. Всередині тегів першого рядка <TR> ... </TR> замість елементів <TD> можуть розміщатися заголовки кожного стовпця — елементи <ТН>. Побудуйте за цим шаблоном таблицю телефонів ваших друзів:

<TABLE border>
<TR><TH>Прізвище, ім'я</TH><TH>Teлeфoн</TH> </TR>
<TR><TD>Авдєєнко Maшa</TD><TD> 233-15-63</TD></TR>
<TR><TD>Борисова Kaтя</TD><TD> 236-55-91</TD></TR>
<TR><TD>Вєдєнєєв Олeг</TD><TD> 446-21-67</TD></TR>
<TR><TD>Григоренко Андрій</ТD><TD> 245-22-88</TD></TR>
</TABLE>

У даному випадку у тег <TABLE> введено атрибут border, що задає зовнішню і внутрішні рамки таблиці завтовшки в 1 піксель. Таблиця на Web-сторінці матиме вигляд, показаний на рис. 2.

Розгляньте отриману таблицю (рис. 2). Вона має ширину стовпців, яка дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна браузера, а її вміст відображається гарнітурою Times New Roman. Текст у комірках заголовка вирівнюється по центру, а в інших комірках — по лівому краю.

Атрибути таблиць

Для змінювання параметрів таблиць (тобто тега TABLE), що встановлюються за замовчуванням, використовують різні атрибути.

width — задає ширину таблиці. Його значення виражається у пікселях або у відсотках (від повної ширини вікна браузера). Наприклад, тег <TABLE width="40%"> задає таблицю з довжиною всіх рядків, що дорівнює 40 % від ширини вікна. Краще задавати ширину у відсотках, оскільки таблиці повністю відображаються у вікні браузера (без прокручування).
align — задає вирівнювання таблиці у документі. Цей атрибут може набувати одне із значень: left (розміщення таблиці вздовж лівого краю документа), center (по центру документа) і right (уздовж правого краю).
border — це вже відомий вам атрибут, що задає вивід рамок таблиці. Якщо значення цього атрибута не визначено, наприклад, <ТАВLE border>, усі рамки матимуть товщину 1 піксель. Якщо ж значення задане (наприклад, border=5), то товщина 5 пікселів буде тільки для зовнішньої рамки. Товщина внутрішніх рамок, як і раніше, дорівнюватиме 1 пікселю.

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

width i height — установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватися у тегах <TR>, <TD>
align — вирівнюють вміст у комірках і вводиться в теги <TR> або <TD>. Цей атрибут може набувати значень: left, right, center і justify (вирівнювання по лівому і правому краях);
valign — вирівнюють вміст по вертикалі. Цей атрибут застосовується з такими значеннями: top (вирівнювання по верхньому краю комірок), bottom (по нижньому краю), middle (центрування по вертикалі). Наприклад, <TR valign="middle"> призначає центрування по вертикалі.

Наведемо атрибути, що визначають колір таблиць:

bgcolor — колір фону в таблиці. Залежно від того, до якого тегу цей атрибут вводиться (<TABLE>, <TR>, <TH> або <TD>), задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних. Наприклад, тег <TABLE bgcolor="red"> призначає червоний фон всієї таблиці, а тег <TD bgcolor="yellow"> задає жовтий фон комірки даних;
bordercolor — колір рамок таблиці. Якщо атрибут bordercolor вставити в тег <TABLE>, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута border. Якщо ж потрібно задати колір лише визначених комірок, атрибут bordercolor розташовуємо в тегах <TR>, <ТН> або <TD>. Наприклад, тег <TR bordercolor="FF0000"> задає червоні межі всіх комірок рядка.

У мові HTML передбачена можливість об'єднання суміжних комірок. Для цього в початкових тегах <ТН> або <TD> застосовуються такі атрибути:

rowspan — об'єднує комірки суміжних рядків. Значення атрибута задає кількість об'єднаних комірок. Наприклад, початковий тег комірки <TD rowspan=2> встановлює об'єднання двох комірок із суміжних рядків;
colspan — об'єднує комірки суміжних стовпців. Наприклад, <TD colspan=3> формує одну комірку даних із трьох комірок суміжних стовпців.

Якщо застосувати водночас обидва атрибути rowspan і colspan, отримаємо об'єднану комірку із суміжних рядків і стовпців. Наприклад, тег <TD rowspan=2 colspan=4> задає комірку, розташовану на перетині двох рядків і чотирьох стовпців.

З повагою ІЦ “KURSOVIKS”!