Частина 1: HTML. Поняття про мову. Головні теги

Частина 1: HTML. Поняття про мову. Головні теги

Теорія:

Основи мови HTML

HyperText Markup Language (HTML) - мова розмітки гіпертексту - призначений для написання гіпертекстових документів, що публікуються в World Wide Web.

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

Існує два способи створення гіпертекстових документів. Можна скористатися одним з WYSIWYG HTML-редакторів (наприклад, Netscape Composer, основи роботи з якому розглянуті в розділі "Обробка тексту на ЕОМ", Microsoft FrontPage, HotDog, або ін), для роботи з якими не потрібно спеціальних знань про внутрішню структуру створюваного документа. Цей спосіб дозволяє створювати документи для WWW без знання мови HTML. HTML-редактори автоматизують створення гіпертекстових документів, позбавляють від рутинної роботи. Проте їхні можливості обмежені, вони сильно збільшують розмір одержуваного файлу і не завжди отриманий з їх допомогою результат відповідає очікуванням розробника. Але, безумовно, цей спосіб незамінний для новачків у справі підготовки гіпертекстових документів.

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

Як вже зазначалося, HTML-документ містить символьну інформацію. Одна її частина - власне текст, тобто дані, що становлять вміст документа. Інша - теги (markup tags), звані також прапорами розмітки, - спеціальні конструкції мови HTML, які використовуються для розмітки документа і керують його відображенням. Саме теги мови HTML визначають, у якому вигляді буде представлений текст, які його компоненти будуть виконувати роль гіпертекстових посилань, які графічні або мультимедійні об'єкти повинні бути включені в документ. Графічна та звукова інформація, включається в HTML-документ, зберігається в окремих файлах. Програми перегляду HTML-документів (браузери) інтерпретують прапори розмітки і мають у своєму розпорядженні текст і графіком на екрані відповідним чином. Для файлів, що містять HTML-документи, прийняті розширення. Htm або. Html.

Прописні і малі літери при записі тегів не розрізняються. У більшості випадків теги використовуються парами. Пара складається з відкриваючого (Start tag) і закриває (end tag) тегів. Синтаксис відкриваючого тега:

<Імя_тега [атрибути]>

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

</Імя_тега>

Атрибути тега записуються в наступному форматі:

ім'я [= "значення"]

Лапки при завданні значення аргументу не обов'язкові і можуть бути опущені. Для деяких атрибутів значення може не вказуватися. У закриває тега атрибутів не буває.

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

Послідовність символів, складова текст, може складатися з прогалин, табуляцій, символів переходу на новий рядок, символів повернення каретки, букв, знаків пунктуації, цифр, і спеціальних символів (Наприклад, +, #, $, @), за винятком наступних чотирьох символів, що мають у HTML спеціальний сенс: <(менше), > (більше), & (Амперсенд) і "(лапки). Якщо необхідно включити до тексту будь-якої з цих символів, то слід закодувати його особливої послідовністю символів.

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

Кожна з таких зарезервованих послідовностей починається символом амперсенда (&) і закінчується крапкою з комою (;).

 

Послідовність	Символ
&lt;	символ <
&gt;	символ >
&amp;	символ &
&quot;	символ " (лапки)
&nbsp;	нерозривний пробіл

Структура HTML-документа

Найголовнішим з тегів HTML є однойменний тег - <HTML>. Він повинен завжди відкривати ваш документ, так само, як тег </HTML> повинен неодмінно стояти в останній його рядку. Ці теги позначають, що знаходяться між ними рядка представляють єдиний гіпертекстовий документ. Без цих тегів браузер або інша програма перегляду не в змозі ідентифікувати формат документа і правильно його інтерпретувати.

Закриваючий тег так само важливий, як і відкриває. Якщо, наприклад, документ включений в електронний лист, тег </HTML> дає команду програмі перегляду припинити інтерпретацію тексту, як HTML-коду.

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

<HТМL> <HЕАD>... </HЕАD> <ВОDY>... </ВОDY></HТМL>

У HTML-документ можна включати коментарі, дозволяють приховати частина тексту від браузера. Все, що укладена між послідовностями символів <!-- і -->, при перегляді сторінки залишається невидимим. Коментарі не можуть бути вкладеними один в одного.

Назва документу

Включення в документ заголовної частини не є обов'язковим. Завданням заголовка є подання необхідної інформації для браузера та сервера HTTP. Інформація, розміщена всередині заголовка документа, зазвичай не виводиться на екран (крім назви документа).

Назва документу відкривається тегом <HЕAD>, який звичайно треба відразу ж за тегом <HTML>. Закриваючий тег </HEAD> показує кінець цього розділу, між ними розташовуються інші теги заголовка документа.

Найчастіше в заголовок документа включають парний тег <TITLE>... </TITLE>, що визначає назва документа. Багато програм перегляду використовують його як заголовок вікна, в якому виводять документ. Програми, індексує документи в мережі Інтернет, використовують назву для ідентифікації сторінки. Гарне назва повинна бути досить довгим для того, щоб можна було коректно вказати відповідну сторінку, і в той же час воно має поміщатися в заголовку вікна. Назва документа вписується між відкриває і закриває тегами.

Тіло документа

На відміну від заголовка, тіло документа є обов'язковим елементом, тому що в ньому розташовується весь матеріал вашого документа (є тільки одне виняток, з яким ми познайомимося далі, - коли документ містить замість тіла групу фреймів). Тіло документа розміщується між тегами <BODY> і </BODY>. Все, що розміщене між цими тегами, інтерпретується браузером відповідно до правил мови HTML, що дозволяють коректно відображати сторінку на екрані монітора.

Тег <BODY> не тільки позначає початок вмісту документа, але і задає його основні властивості: колір фону, тексту і багато інше. Ці властивості визначаються за допомогою атрибутів, які наведені в таблиці.

 

Атрибут	Призначення
ALINK	Визначає колір активного посилання
BACKGROUND	Вказує на URL-адресу зображення, яке використовується в якості фонового
BGCOLOR	Визначає колір фону документа
LINK	Визначає колір невідвідування посилання
ТЕХТ	Визначає колір тексту
VLINK	Визначає колір Відвідані посилання

Приклад

<НТML> <НЕAD> <ТIТLE>Моя сторінка</ТIТLE> </НЕАD> <ВОDY ТЕXT=rеd BGСОLOR=whitе> Тело <!-- Це коментар --> документа </ВОDY> </НТML>
Завдання

Структура HTML-документа

1. Розібратися в призначенні мови HTML, структурі HTML-документу, поняттях гіпертексту

2. Створити у програмі Блокнот текстовий документ із структурою HTML-документа

3. Зберегти створений документ із розширенням *.txt та *.html

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

5. Створити у програмі Блокнот HTML-документ із своєю автобіографією. Автобіографія повинна мати загальну назву та влючати декілька етапів Вашого життя (не менше трьох, наприклад: народження, дитинство, юність). Кожен етап Вашого життя повиннен містити підзаголовок, у саму тексті треба зазначити декілька видатних дат Вашої біографії.

6. Автобіографію зберегти у файлі biography.html

Приклад

Щоб встановити синій колір фону документа потрібно для синьої складової кольору вказати максимальне значення, а інші зробити рівними нулю: <BODY BGCOLOR="#0000FF">.

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

Web-палітра розпізнає за шість відтінків червоного, синього і зеленого кольору, що в результаті дає 216 можливих значень кольорів (6x6x6=216). Тому її іноді називають "куб 6x6x6". У таблиці наведено числові значення кольорів з Web-палітри.

 

 

Шістнадцяткові	Десяткові	Процентні
00 (самий темний)		0%
		20%
		40%
		60%
CC		80%
FF (самий світлий)		100%

 

Кольори, RGB-компоненти яких входять в Web-палітру, називають Web-надійними квітами. Серед всіх кольорів, що мають імена, тільки 10 квітів входять в Web-палітру: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white і yellow.

Поділ тексту на абзаци

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

Уникнути цієї неприємності дозволяє поділ на абзаци за допомогою тега <Р>. Додайте його на початку кожного абзацу, і програма перегляду відділить абзаци один від одного символом нового рядка. Використання закриває тега </P> необов'язково. Кілька стоять поспіль тегів <Р> не дають додаткового простору між абзацами.

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

 

Значення	Функція
LEFT	Вирівнювання тексту по лівій межі вікна браузера
CENTER	Вирівнювання по центру вікна браузера
RIGHT	Вирівнювання по правій межі вікна браузера
JUSTIFY	Вирівнювання тексту по ширині вікна браузера

Приклад

Якщо ви хочете, щоб текст абзацу був вирівняний по центру, потрібно написати наступне: <P ALIGN=CENTER> Текст </P>
Розрив рядка

Іноді потрібна "розірвати" текст, перенісши його залишок на новий рядок, при цьому не виділяючи нового абзацу. Для цього використовується тег розриву рядка <BR>. Він змушує програму перегляду виводити стоять після нього символи з нового рядка. На відміну від тега абзацу, тег <BR> не додає порожній рядок. У цього тега немає парного закриваючого тега.

Приклад

<HTML> <HEAD><TITLE> Йосип Бродський </TITLE></HEAD><BODY TEXT=black BGCOLOR=white>Звідки до нас прийшла зима, <BR> не знаєш ти, ніхто не знає.<P>Замовкла все. Вона сама <BR> холодних вуст розтискає.</BODY></HTML>

Деякі браузери інтерпретують кілька стоять поруч тегів <BR> як один тег, тому не варто використовувати його для вставки порожніх рядків.

Бувають випадки, коли виникає потреба в операції протилежного призначення - заборонити переклад рядка. Текст, укладений між тегами <NOBR> і </NOBR>, буде гарантовано розташовуватися в одному рядку без переносу на іншу.

Горизонтальні лінії

Іншим методом розділення документа на частини є проведення горизонтальних ліній. Вони візуально підкреслюють завершеність тієї чи іншої області сторінки. Тег <HR>дозволяє провести рельєфну горизонтальну лінію у вікні більшості програм перегляду. Цей тег не вимагає закриває тега. До і після лінії автоматично вставляється порожня рядок. Атрибути тега <HR> представлені в таблиці.

 

 

Атрибут	Призначення
ALIGN	Вирівнює по краю або центру; має значення LEFT, CENTER, RIGHT
WIDTH	Встановлює довжину лінії в пікселах або відсотках від ширини вікна браузера; в останньому випадку додається символ %
SIZE	Встановлює ширину лінії в пікселах
NOSHADE	Відміняє рельєфність лінії
COLOR	Вказує колір лінії; використовується найменування кольору або шістнадцятковий код

 

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

Мова HTML підтримує як логічний (logical), так і фізичний (Physical) стилі форматування вмісту документа. Використання логічного форматування вказує на призначення даного фрагмента тексту, а при фізичному форматуванні досконально задається його зовнішній вигляд. По можливості варто використовувати логічні стилі, так як вони дозволяють браузеру вибрати найбільш підходящий документу вигляд. Використання логічних стилів також допоможе читачеві розібратися в структурі документа. Фізичний стиль використовується в основному програмами, що конвертує текстові файли, що містять фізична форматування, в HTML, так як логічне форматування документа неможливо виконати автоматично.

Логічне форматування

Хоча мова HTML включає теги для досягнення різних шрифтових ефектів (Напівжирний шрифт, курсив, підкреслений шрифт), не всі браузери їх підтримують. Проте всі браузери підтримують той чи інший спосіб виділення тексту. Тому використання логічного форматування тексту в будь-якому випадку призведе до виділення програмою перегляду різних частин тексту і виявить структуру документа.

Говорячи про логічної розмітки тексту, можна виділити дві основні частини:

виділення заголовків у документі;

логічне виділення елементів тексту.

Назва документа, що задається за допомогою тега <TITLE>, не виводиться на екран як частина документа. Щоб відобразити назву використовується один з тегів заголовка. Заголовки в типовому документі розділяються за рівнями. Мова HTML дозволяє задати шість рівнів заголовків: H1 (заголовок першого рівня), Н2, Н3, H4, Н5 і H6. Заголовок першого рівня має звичайно більший розмір і насиченість по порівнянні із заголовком другого рівня.

Якщо ви подивіться на цю главу, то "Логічне форматування" - заголовок третього рівня, "Форматування гіпертексту" - другого, а "Основи мови HTML" - першого. На практиці заголовки четвертого і далі рівнів зустрічаються лише в дуже великих документах.

Приклад

<HTML> <HEAD> <TITLE> Заголовки </TITLE> </HEAD> <BODY BGCOLOR=white> <H1> Заголовок 1 рівня</H1> <H2> Заголовок 2 рівня</H2> <H3> Заголовок 3 рівня</H3> <H4> Заголовок 4 рівня</H4> <H5> Заголовок 5 рівня</H5> <H6> Заголовок 6 рівня</H6> </BODY> </HTML>

Пам'ятайте, що якщо ви забудете поставити тег заголовка, вид сторінки буде викривлений: будь-який з тегів заголовка автоматично вставляє пустий рядок до і після себе.

Теги заголовків підтримують атрибут ALIGN, дія якого аналогічно дії такого ж атрибуту тега виділення абзацу.

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

 

Теги	Застосування	Результат
<CITE> </CITE>	<CITE> Використовується для виділення цитат або назв книг і статей </CITE>	Використовується для виділення цитат або назв книг і статей
<CODE> </CODE>	<CODE> Застосовується для виведення невеликого шматка програмного коду </CODE>	Застосовується для виведення невеликого шматка програмного коду
<EM> </EM>	<EM> Використовується для виділення важливих фрагментів тексту </EM>	Використовується для виділення важливих фрагментів тексту
<KBD> </KBD>	<KBD> Виділяє текст, вводиться користувачем з клавіатури </KBD>	Виділяє текст, що вводиться користувачем з клавіатури
<SAMP> </SAMP>	<SAMP> Використовується для виділення тексту прикладу </SAMP>	Використовується для виділення тексту прикладу
<STRONG> </STRONG>	<STRONG> Використовується для виділення дуже важливих фрагментів тексту </STRONG>	Використовується для виділення дуже важливих фрагментів тексту
<VAR> </VAR>	<VAR> Використовується для позначки імен змінних </VAR>	Використовується для позначки імен змінних
<STRIKE> </STRIKE>	<STRIKE> Використовується для оцінки вилученого тексту </STRIKE>	Використовується для позначки віддаленого тексту

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

Для виділення довгих цитат з основного тексту в HTML існує тег <BLOCKQUOTE>. Цей елемент є контейнером і може містити будь-які форматуйте теги.

Сучасні браузери реагують на елемент <BLOCKQUOTE> зміщенням тексту цитати праворуч. Деякі текстові програми перегляду позначають цитату символами >, що розташовуються в крайньому лівому стовпчику екрана. Так як сьогодні більшість браузерів є графічними програмами, елемент <BLOCKQUOTE> дозволяє авторам внести в текст деякий візуальне різноманітність.

Фізичне форматування

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

 

Теги	Застосування	Результат
<B> </B>	<B>Напівжирний</B>	Напівжирний
<I> </I>	<I>Курсив</I>	Курсив
<U> </U>	<U>Підкреслений</U>	Підкреслений
<TT> </TT>	<TT>Друкарська машинка</TT>	Друкарська машинка
<S> </S>	<S>Закреслений</S>	Закреслений
<BIG> </BIG>	<BIG>Великий</BIG>	Великий
<SMALL> </SMALL>	<SMALL>Маленький</SMALL>	Маленький
<SUP> </SUP>	Верхній -- x<SUP>індекс</SUP>	Верхній -- x^індекс
<SUB> </SUB>	Нижній -- x<SUB>індекс</SUB>	Нижній -- xіндекс

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

<B><U>Жирний і підкреслений текст</U></B>

Крім перерахованих вище тегів у документі може використовуватися тег <FONT>, Що дозволяє безпосередньо поставити розмір і колір шрифту. Елемент FONT представляє собою контейнер, тобто вимагає як відкриваючого, так і закриває тегів, і сам може використовуватися усередині будь-якого іншого текстового контейнера.

Після стартового тега обов'язкове зазначення атрибутів, без яких елемент не робить ніякого впливу на текст, поміщений в контейнер.

Атрибут FACE дозволяє вказати тип шрифту, яким програма перегляду виведе ваш текст (якщо таким має в своєму розпорядженні користувач). Якщо потрібного шрифту немає, програма проігнорує запит і буде використовувати шрифт, встановлений за замовчуванням.

Цей атрибут дозволяє вказати як один, так і декілька шрифтів (Через кому). Весь список буде переглянутий зліва направо і перший з наявних на машині користувача буде використаний для виведення документа.

Атрибут SIZE служить для вказівки розміру шрифту в умовних одиницях від 1 до 7. Вважається, що розмір "нормального" шрифту відповідає числу 3. Розмір може бути як абсолютною величиною (SIZE=5), так і відносної (SIZE=+2). У другому прикладі поточний розмір шрифту збільшується на 2.

Атрибут COLOR встановлює колір шрифту, який може бути заданий як у форматі RGB, так і з іменем.

Приклад

Текст <FONT COLOR=red> червоного кольору </FONT> і <FONT SIZE=7> великого розміру </FONT>

 

Приклад

Розглянемо фрагмент HTML-документа, що містить попередньо відформатований текст:

<PRE>Тут можна ставити <B>скільки</B> завгодно <EM>Пробілів</EM>, і переносити рядки,там, дезахочеться. <P>Html <S>не</S> зможе <H1>нам</H1> перешкодити. </PRE>

У вікні браузера кількість пропусків і розриви рядків будуть збережені, до них додадуться розриви рядків, викликані використанням тегів <Р>, <BR> і <H1>. Перший з наведених нижче малюнків відповідає завданням як моноширинних в настройках браузера шрифту Courier (Adobe), а для другого використовувався шрифт Fixed (Sony).

 

Завдання:

Форматування тексту, робота з кольором

1. Розібратись з основними тегами HTML, призначеними для форматування тексту та роботою зі стилями

2. Створити HTML-документ, у якому написати своє прізвище, ім'я, побатькові, використовуючи заголовок першого рівня.

3. Розмістити в документі три прислів'я наступним чином: перше -- вирівняти по лівому краю та оформити курсивним шрифтом червоного кольору; друге -- по центру напівжирним шрифтом жовтого кольору; третє -- по правому краю підкресленим шрифтом зеленого кольору.

4. Включити до документу інщі зразки фізичного та логічного форматування

5. Додати до документу фрагмент попередньо відформатованого тексту.

6. Описати, яким чином веде себе попередньо відформатовиний фрагмент тексту при зменшенні ширини вікна браузера

7. Зберегти отриманий документ у форматі HTML

8. Скопіювати файл Вашої автобіографії із попередньої роботи

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

10. Автобіографію зберегти у файлі biography.html

Приклад

Якщо розмір зображення, що зберігається у файлі exm2.gif складає 150 пікселів по ширині і 90 по висоті, то наступна команда призведе до включення в документ деформованого зображення: <IMG SRC="exm2.gif" WIDTH=50 HEIGHT=200>.

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

Мова HTML дозволяє задати розташування зображення щодо навколишнього його тексту. Атрибут ALIGN може приймати наступні значення.

Значення	Функція
ТОР	Вирівнює один рядок по верху зображення, решта поміщає після малюнка
MIDDLE	Вирівнює один рядок по середині зображення, решта поміщає після малюнка
BOTTOM	Вирівнює один рядок по низу зображення, решта поміщає після малюнка
LEFT	Тулить обтічне текстом зображення до лівій стороні вікна браузера
RIGHT	Тулить обтічне текстом зображення до правій стороні вікна браузера

Приклад

Розглянемо можливі варіанти вирівнювання зображення щодо тексту.

<img src=exm.gif align=top> Перший рядок тексту знаходиться зверху зображення і зазвичай використовується для опису малюнка.

<img src=exm.gif align=middle> Перший рядок тексту знаходиться по середині зображення і використовується для того ж.

<img src=exm.gif align=bottom> Перший рядок тексту знаходиться внизу зображення і використовується також як і у двох перших випадках.

<img src=exm.gif align=left> Зображення притискається до лівого краю вікна перегляду, а текст обтікає зображення праворуч.

<img src=exm.gif align=right> Зображення притискається до правого краю вікна перегляду, а текст обтікає зображення зліва.

 

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

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

Для створення гіпертекстового посилання використовується пара тегів <A>...</A>. Фрагмент тексту, зображення або будь-який інший об'єкт, розташований між цими тегами, відображається у вікні браузера як гіпертекстова посилання. Активація такого об'єкта призводить до завантаженні у вікно браузера нового документа або до відображення іншої частини поточної Web-сторінки. Гіпертекстова посилання формується за допомогою виразу

<A HREF="URL_ресурса"> фрагмент документа </A>

HREF тут є обов'язковим атрибутом, значення якого і є URL-адреса запитуваної ресурсу. Лапки в завданні значення атрибуту HREF не обов'язкові.

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

Приклад

<A HREF="example.html"> Посилання </A>

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

Приклад

<A HREF="example.html"> <IMG SRC="pict.gif"> </A>

Абсолютний і відносний URL

У розділі, присвяченому комп'ютерних мережах і принципам пошуку інформації в Інтернет, було введено поняття URL (універсального локатора ресурсу), однозначно визначає розташування об'єкта в глобальній мережі. У загальному випадку URL має такий вигляд (частини, укладені в квадратні дужки, не обов'язкові і можуть бути опущені):

протокол: / / адрес_узла [: порт] / шлях / файл [# мітка]

У таблиці нижче наведені призначення компонент URL.

Компонента	Призначення
протокол	Позначення одного з протоколів, використовуваних для звернення до ресурсу, можливі значення: http, ftp, file та ін
адрес_узла	Доменне ім'я або IP-адреса комп'ютера в мережі Інтернет
порт	Порт за яким клієнт звертається до сервера для встановлення з'єднання; вказується тільки у разі звернення до нестандартного порту
шлях	Шлях до потрібного ресурсу
файл	Файл, що містить HTML-документ або інший ресурс
мітка	Позиція в документі, починаючи з якої він відображається у вікні браузера

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

Приклад

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

http://www.ctc.msiu.ru/education/book/index1.html

Приклад

Розглянемо посилання на так звану домашню сторінку (Home Page) конкретного користувача. Припустимо, що на сервері www.msiu.ru зареєстрований людина з користувальницьким ім'ям (login) ivanov. Домашньою сторінкою називають файл index.html, що знаходиться в директорії з ім'ям public_html, яка, у свою чергу, повинна розташовуватися в домашньої директорії користувача. Тоді посилання на домашню сторінку цього людини може бути задана у вигляді

<A HREF="http://www.msiu.ru/~ivanov">Текст посилання</A>

Зверніть увагу, що ім'я самого файлу при такому записі не вказується. Якщо буде потрібно послатися на який-небудь інший документ даного користувача, розташований в директорії public_html, наприклад, photo.html, то посилання прийме вигляд:

<A HREF="http://www.msiu.ru/~ivanov/photo.html"> Текст</A>

Відносний URL описує становище ресурсу, на який вказує посилання, щодо URL поточного документа.

Приклад

При завданні відносних посилань вказується шлях по файлового дереву до того місця, де знаходиться потрібний HTML-ресурс. Ось посилання на документ image.html, розміщений в поточному каталозі: <A HREF="image.html">Посилання</A>.

Якщо файл pict.html лежить в батьківському по відношенню до поточним документом каталозі, то слід використовувати запис

<A HREF="../pict.html">Текст посилання</a>

Якщо ж потрібний документ знаходиться в піддиректорії Picture, то використовується запис, аналогічна наступної

<A HREF="Picture/pict.html">Текст посилання</A>

 

Приклад

Нехай у документі з ім'ям book.html заголовком глави 2 присвоєно ім'я chapter2:

<A NAME="chapter2"> Глава 2 </A>

Тоді посилання на цю главу, розташована в цьому ж документі, буде мати вигляд:

<A HREF="#chapter2"> Глава 2 </A>

Для завдання посилання на цю ж мітку файлу book.html з іншого файлу потрібно написати:

<A HREF="book.html#chapter2"> Глава 2 </A>

 

Приклад

<A HREF=mailto:[e-mail]> Пошта автору </A>

 

Завдання:

Робота із зображеннями, навігація по документу

1. Розібратись з основними тегами HTML, призначеними для роботи із зображеннями та гаперпосиланнями.

2. Створити HTML-документ image.html, додати до нього будь-яке зображення.

3. Для зображення в HTML-документі встановити наступні парметри: ширина рамки -- 3 пікселі; вирівнювання -- по правому краю; відстань навколо зображення -- 5 пікселів; задати альтернативний текст для зображення.

4. Додати у документ будь-який текст таким чином, щоб він обтікав малюнок.

5. Створити HTML-документ link.html, додати до нього будь-який текст у такій кількості, щоб він не уміщався у вікні браузера.

6. Останньому слову у тексті присвоїти ім'я END. На початку документа створити два гіперпосилання, одне на файл image.html, інше на останнє слово в документі.

7. Скопіювати файл Вашої автобіографії із попередньої роботи

8. Створити швидку навігацію по Вашій Web-сторінці за допомогою гіперпосилань: На початку сторінки зробити зміст по всіх заголовках у вигляді гіперпосилань на ділянки тексту, де вони розташовані. Передбачити швидке повернення до змісту після кожного розділу у вигляді гіперпосилання (як приклад можна розглядати структуру розділу теорія у лабораторній роботі №2).

9. Додати до автобіографії свою фотокартку. Зробити так, щоб при натисканні на Вашу фотокартку відкривалось вікно відправки повідомлення на Вашу поштову скриньку.

10. Автобіографію зберегти у файлі biography.html

 

Частина 1: HTML. Поняття про мову. Головні теги

Теорія:

Основи мови HTML

HyperText Markup Language (HTML) - мова розмітки гіпертексту - призначений для написання гіпертекстових документів, що публікуються в World Wide Web.

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

Існує два способи створення гіпертекстових документів. Можна скористатися одним з WYSIWYG HTML-редакторів (наприклад, Netscape Composer, основи роботи з якому розглянуті в розділі "Обробка тексту на ЕОМ", Microsoft FrontPage, HotDog, або ін), для роботи з якими не потрібно спеціальних знань про внутрішню структуру створюваного документа. Цей спосіб дозволяє створювати документи для WWW без знання мови HTML. HTML-редактори автоматизують створення гіпертекстових документів, позбавляють від рутинної роботи. Проте їхні можливості обмежені, вони сильно збільшують розмір одержуваного файлу і не завжди отриманий з їх допомогою результат відповідає очікуванням розробника. Але, безумовно, цей спосіб незамінний для новачків у справі підготовки гіпертекстових документів.

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