ЗАВДАННЯ № 7 Тема: Підготовка найпростішого гіпертекстового документа засобами програми Блокнот

Практична робота № 7

МОВА ГІПЕРТЕКСТОВОЇ РОЗМІТКИ – HTML

 

Загальні відомості

В 1990 році Тім Бернерс-Лі, програміст Європейської лабораторії фізики елементарних часток, написав програму під назвою редактор гіпертексту (hypertext), яка дозволяла виділяти одним клацанням миші інформацію в тексті документа для посилання на інші документи, що перебувають у мережі. Так зародився віртуальний простір, що одержав назву World Wide Web (Всесвітня павутина).

Мова, яка використовується для створення таких документів одержала назву HTML (Hyper Text Markup Language) – мова розмітки гіпертекстів, а програми для інтерпретації HTML - файлів, формування їх у вигляді Web-сторінок і відображення на екрані комп'ютера користувача називали Браузер (Browser).

Бурхливий розвиток мережі Інтернет привело до появи величезного числа Web-серверів, призначених для розміщення й обслуговування Wed-сайтів (логічно зв'язаних груп Web-сторінок), що належать як приватним особам, так і організаціям. А розроблювачі Браузерів, прагнучи зробити Web-сайти більш привабливими й динамічними, постійно модернізують HTML. Тому той самий HTML-документ у різних Браузерах може виглядати по-різному.

Стандартизацією мови HTML займається організація, названа World Wide Web Consortium (скорочено - W3C), а серед розроблювачів Браузерів лідируючі місця займають компанії Netscape і Microsoft. У цей час останньою специфікацією W3C є версія HTML 4.0, базові конструкції якої розглядаються далі.

Види тегів в HTML

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

HTML-тег записується в кутових дужках (<>) і складається з імені, за яким може слідувати список атрибутів (для більшості тегів необов'язковий). Імена й атрибути являють собою англійські слова й абревіатури й майже завжди їхній зміст прозорий. Записувати теги можна в будь-якому регістрі - прописними або малими літерами.

Теги можна розділити на дві великі групи.

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

Автономні (одиночні) теги не мають кінцевого компонента. Вони викликають одноразову дію або при їхній інтерпретації у відображуваний документ вставляється той чи інший об'єкт. Наприклад, тег <IMG SRC="pict.gif">, викликає вставку малюнка з файла pict.gif.

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

Приклади тегів з атрибутами:

<BODY BGCOLOR="LIGHTBLUE"> - задає світло-синій фон для документа,

<FONT SIZE=+2 COLOR=RED> текст </FONT> - парний тег, дає вказівку Браузеру викликає розміщений в «контейнері» текст символами, збільшеними відносно базового розміру (SIZE=+2) і червоного кольору (COLOR=RED).

Теги, що визначають структуру HTML-документа

HTML-документ розміщується в тегах <HTML> і </HTML>. Між цими тегами знаходяться дві секції: секція заголовку (між тегами <HEAD> і </HEAD>) і секція тіла документа(між тегами <BODY> і </BODY>).

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

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

Наприклад:

<HTML>

<HEAD>

<ТIТLE>Пример НТМL-документа</ТIТLE>

</HEAD>

<BODY>

Простой HTML-документ

</BODY>

</HTML>

Браузер відображає цей документ, виводячи у своєму вікні стрічку тексту: Самый простой HTML-документ, розміщену в секції тіла документа. Завдяки наявності тега <ТIТLE> в заголовку вікна Браузера буде виведено не ім’я файлу, а заголовок, який зазвичай містить смислове значення. В даному випадку заголовок вікна Браузера буде: Пример НТМL-документа.

Основні теги HTML

Основні теги мови HTML наведені в додатку 7.1.

Коментарі – текст коментарів розміщується в тегу <!-- ….текст комментария…. --> і не відображається у вікні Браузера.

Символьні примітиви – конструкції, що заміняють службові символи мови HTML (зазвичай починаються з амперсанта – символа &):

пробіл - &nbsp; символ менше (<) - &lt; більше (>) - &gt;
дорівнює (=) - &quot; амперсант (&) - &amp і інші.

Колір тексту і фон документа.

Колір основного тексту, колір посилань і фон документа описуються в початковому тегу тіла документа <BODY > за допомогою атрибутів.

Значення кольору можна задавати в одній із двох форм. Перша форма використовує задання кольору в RGB – палітрі (Red-Green-Blue). Код кольору вказується шістнадцятирічними числами, що задають інтенсивність відповідної складової (за двома розрядами). Наприклад, ярко-червоний має код – FF0000, ярко-зелений – 00FF00, чорний колір 000000, білий – FFFFFF. При виборі кольору перед шістнадцятирічним числом ставиться символ #.

Можливе задання кольору за допомогою імен. Таблиця основних кольорів наведена в додатку 7.2. Кожній назві кольору відповідає відповідна RGB – тріада. Наприклад, кольору navy - #000080.

Тегі форматування тексту

Для форматування тексту HTML-документа передбачено дві групи тегов, названі логічними й фізичними тегами форматування.

Теги логічної групи позначають своїми іменами структурні групи текстових фрагментів. Наприклад, тег <CODE> вказує на програмний код, тег <STRONG> - сильне виділення. Фрагменти з логічним форматуванням Браузер відображає відповідним чином відповідно до його можливостей.

Теги фізичного форматування вказують Браузеру як відобразити текстовий фрагмент згідно до бажань автора. Наприклад, тег <B> використовується для відображення тексту напівжирним курсивом (що звичайно відповідає логічному тегу <STRONG>)).

Сучасні Браузери підтримують і ті, й інші теги форматування. Однак з виходом специфікації HTML 4.0, перевага віддається логічному форматуванню, оскільки був проголошений принцип відділення структури документа від його подання.

Інші параметри шрифту наводяться в додатку 7.1.

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

· Символьний примітив &nbsp – один пробіл.

· Тег <BR> (з англійської break) – вставка нової стрічки.

· Тег <P> (з англійської paragraph) – починає абзац з нової стрічки, відокремлюючи від попередньої подвійним між стрічковим інтервалом.

Текст, що міститься між тегами <PRE> </PRE> (з англійської preformatted), відображається так, як він був відформатований попередньо, зі всіма пробілами, переносами стрічок.

Теги виду <Hn> ….</Hn>оформляють текст, що міститься в них, у вигляді Заголовку n-рівня. Значення n може змінюватися від 1 (найбільше) до 6 (найменше). Так само, як і тег абзацу <P>, тег Заголовка перериває текстовий потік і відділяє його пустою стрічкою.

Теги <H1>, <H2>, <H6>можуть мати атрибут вирівнювання ALIGN зі значеннями LEFT (за замовчуванням), CENTER, RIGHT і JUSTIFY.

Списки

HTML дозволяє створювати нумеровані і маркіровані списки.

Фрагмент тексту, що являє список, розміщується в тегах:

<OL> …. </OL>впорядкований список (ordered list),

<UL> ….</UL> невпорядкований список (unordered list),

<DL> ….</DL> список визначень (definition list).

Кожний елемент списку розміщується в тегах <LI> ….</LI>(з англійської list item).

Тег нумерованого списку може мати параметр TYPE= , що визначає вид нумерації, і START= , який задає початкове значення першого елемента списку (не залежно від типу вказується цифрою).

TYPE=A – задає маркери у вигляді прописних латинських букв;

TYPE=a – маркери – стрічкові латинські букви;

TYPE=I – маркери у вигляді великих римських цифр;

TYPE=i – маркери у вигляді маленьких римських цифр;

TYPE=1 – маркери – арабські цифри (за замовчуванням).

В тегах маркірованого списку параметр TYPE вказує тип маркера: замальовані кружечки – disc, не замальовані кружечки – circle, замальовані квадратики – square.

Графічні зображення. Графические изображения.

Тег <IMG> вставляє зображення в текстовий потік. Закриваючого компонента тег не має.

Обов'язковим атрибутом його є SRC=url (адреса графічного файлу, може бути відносною або абсолютною). Для прискорення завантаження Web-сторінки з малюнками рекомендується в тегу малюнка вказувати його розміри атрибутами HEIGHT і WIDTH. Це дозволяє Браузеру ще до повного завантаження малюнка виконати розмітку екрана й завантажити текст.

Основні необов'язкові атрибути наведені в табл. 7.1.

 

Таблиця 7.1

Атрибут Призначення атрибута
ALT=текст Альтернативний текст, який виводиться в режимі Браузера без завантаження зображення
BORDER= значення Товщина рамки, що обрамляє, в пікселях
HEIGHT= значення Висота зображення в пікселях або у відсотках від висоти вікна Браузера
WIDTH= значення Ширина зображення в пікселях або у відсотках від ширини вікна Браузера
HSPACE= значення Вільний простір зліва і справа від зображення в пікселях
VSPASE= значення Вільний простір зверху і знизу від зображення в пікселях
ALIGN= значення Вирівнювання зображення по горизонталі й по вертикалі. Значення задаються атрибутами TOP, MIDDLE, BOTTOM. При застосуванні цих значень вставлене зображення розриває текстовий потік. Якщо задані значення LEFT або RIGHT, зображення буде відповідним чином вирівняне по горизонталі, а текст буде обтікати його.

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

Зв’язок між HTML-документами і фрагментами документів здійснюється за допомогою тегів <A> …</A> (з англійської anchor- якір).

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

· В першому випадку обов’язковим атрибутом являється
HREF=url – адреса цільового документа.

Текст і зображення, розміщені між тегами <A> …</A>, стають активною зоною, чутливою до клацання миші, яке викликає завантаження цільового документа. Текст гіперпосилання виділяється підкресленням і кольором, зазначеним як значення атрибута LINK тега BODY, або кольором за замовчуванням.

· В другому випадку – при створенні якоря (помітки чи закладки) фрагментта – обов’язковим є атрибут NAME=#имя, де ім’я – ідентифікатор фрагмента (якоря).

Приклад. Нехай в документі report.htm була визначена закладка:
<A NAME=”CHEPTER2”> </A>.

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

<A HREF="report.htm#CHEPTER2"> перехід до Глави 2 </A>.

Таблиці.

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

Основні теги таблиць:
<TABLE> …< /TABLE > - початок і кінець роботи;

<TR> …</TR> - початок і кінець стрічки;

<TD> …</TD> - початок і кінець комірки.

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

Для оформлення таблиць можуть бути використані атрибути, що вказуються в тегах <TABLE>, <TR> і <TD>. Основні з них перераховані в додатку7.1.

Додаток 7.1

Основні теги мови HTML

Призначення Вид тегів Примітки
Загальна структура документа HTML
Тип документа <HTML></HTML> Початок і кінець.
Ім’я документа <HEAD></HEAD> Не відображається Браузером.
Заголовок <TITLE></TITLE> Відображається в рядку заголовка вікна Браузера.
Тіло <BODY></BODY>  
Коментарій <! --***--> Ігнорується оглядачем.
Структура змісту документа
Внутрішні заголовки різного рівня <HN></HN> Де N – номер рівня заголовка (від 1 до 6–ти).
Заголовок з вирівнюванням <H? ALIGN=”left”></H?> Типи вирівнювання: · left - по лівому краю, · center - по центру, · right - по правому краю, · justify – по ширині.
Форматування абзаців
Створення абзацу (параграфа) <P></P>  
Перехід рядка всередині абзацу <BR> Одиничний тег
Перенос <WBR>  
Вирівнювання абзацу <P ALIGN=”left”></P> Типи вирівнювання: left, right, center і - justify
Горизонтальна лінія між абзацами <HR> Одиничний тег
Атрибути: товщина, довжина лінії, вирівнювання <HR SIZE=? WIDTH=? ALIGN=”left”> Товщина вказується в пікселях, довжина – в пікселях або %, вирівнювання за замовчуванням center
Форматування шрифту
Логічне форматування
Виділення тексту курсивом - Напівжирним - Як з клавіатури -   <EM></EM> <STRONG> </STRONG> <KBD> </KBD> Фрагмент документа: Обычный текст <EM>Курсив </EM> <KBD>Моноширинный</KBD>
Фізичне форматування <B> жирный</B> <S> подчеркнутый</S> X<SUP>2</SUP> - отобразится как X2 <I> курсив </I>
Курсив <I> </I>
Підкреслений <U> </U>
Перекреслений <S> </S>
Моноширінний <TT> </TT>
Верхній індекс <SUP></SUP>
Нижній індекс <SUB></SUB>
Розмір шрифту <FONT SIZE=?></FONT> Від 1 до 7
Базовий розмір шрифту (задається для всього документа вцілому) <BASEFONT SIZE=?> Від 1 до 7, за замовчуванням рівний 3
Список кращих гарнітур шрифтів, через кому <FONT FACE=”шр-т1,шр-т2”> <FONT FACE="Verdana,Arial">
Колір шрифту (задається або ключовим словом, або шістнадцятирічним кодом) <FONT COLOR=”$$$$$$”> </FONT> Red –червоний Blue – блакитний #ff0000 – 16-тирічний код червоного кольору в форматі RGB
Створення списків
Впорядкований <OL></OL> Фрагмент документа: <OL> <LI>Элемент списка 1</LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL>  
Невпорядкований <UL></UL>
Елемент списку <LI></LI>
Списки визначень <DL></DL>
Визначені терміни <DT></DT>
Визначення <DD></DD>
Таблиця
Визначити таблицю <TABLE></TABLE> <TABLE border=”1”> <TR> <TH>Товар</TH> <TH>Цена</TH> </TR> <TR> <TD>Радиотелефон </TD> <TD align=”center”> 2000 </TD> </TR> </TABLE>
Окантовка таблиці <TABLE BORDER=?></TABLE>
Рядок таблиці <TR></TR>
Вирівнювання <TR ALIGN=LEFT | RIGHT | CENTER | JUSTIFY >
Комірки таблиці <TD></TD>
Вирівнювання по горизонталі <TD ALIGN=LEFT | RIGHT | CENTER | JUSTIFY>
Ширина (в пікселях або у % до ширини вікна) <TD WIDTH=?>
Заголовок стовбців або рядків (напівжирний) <TH></TH>
Вставка зображень
Вставка графічного файла <IMG SRC=”URL” WIDHT=”?” HEIGHT=”?”> Фрагмент документа: <IMG SRC=”grafica.gif” WIDHT=”550” HEIGHT=”240” ALT=”Графический файл”>
Вирівнювання тексту <IMG SRC=”URL” ALIGN=”TOP”>
Вивід альтернативного тексту <IMG SRC=”URL” ALT=”текст*”>
    Вставка посилань
Посилання на іншу сторінку <A HREF=”URL”> текст </A> Фрагмент документа: <A HREF=”str2.htm”> Ссылка1</A> <A HREF=”URL”>текст</A> <A NAME=”metka1”></A> <A HREF=”index.htm#metka1”> На главную страницу</A>”
Посилання на вкладку в іншому документі <A HREF=”URL#*”> текст</A>
На вкладку в тому ж документі <A HREF=”#*”> текст</A>
Визначити вкладку <A NAME=”*”></A>
Колір фону, тексту і посилань
Фоновий малюнок <BODY BACKGROUND=”URL”> Фрагмент текста: <BODY BACKGROUND=”grafica.gif” TEXT=”black” (чорний) LINK=”#FF0000” (червоний) VLINK=”#FFFF00” (жовтий) ALINK=”#FFFFFF”> (білий) ------------------------- </BODY>
Колір фону <BODY BGCOLOR=”#$$$$$$”>
Колір тексту <BODY TEXT=”#$$$$$$”>
Колір посилання <BODY LINK=”#$$$$$$”>
Колір пройденого посилання <BODY VLINK=”#$$$$$$”>
Колір активно посилання <BODY ALINK=”#$$$$$$”>
                 

 

Додаток 7.2

Основні кольори

Color's name Назва Red Green Blue
black чорний
navy темно-синій
blue синій FF
green зелений
teal синьо-зелений
lime ярко-зелений FF
aqua блакитний FF FF
maroon вишневий
purple фіолетовий
olive оливковий
gray темно-сірий
silver світло-сірий C0 C0 C0
red червоний FF
fuchsia ліловий FF FF
yellow жовтий FF FF
white білий FF FF FF

 

ОСНОВНІ ТЕРМІНИ

ASCII (American Standard Code for information Interchange – Американський стандартний код для обміну інформацією) – семирозрядний код для подання текстової інформації.

Browser (Браузер) – програма для перегляду (інтерпретації) гіпертекстових документів.

GIF (Graphics Interchange Format – формат обміну графікою) – використовується для небагатобарвних чітких зображень, підтримує прозорі області й анімацію.

HTML (Hyper Text Markup Language) – мова розмітки гіпертекстів.

JPEG (Joint Photography Experts Group – об'єднана група експертів з машинної обробки фотозображень) – розповсюджений формат растрової графіки, який ідеально підходить для сканованих фотографій.

Web-page (Web-сторінка) – електронний документ, призначений для розміщення (розміщений) в Інтернет.

Web-site (Web-Сайт) – сукупність Web-сторінок, зв'язаних між собою темою, гіперпосиланнями й близьким розташуванням в Інтернет.

Web server (Web-сервер) – сервер, призначений для розміщення Web-сайтів в Інтернет, і надає послуги по запитах клієнтів.

 

ЗАВДАННЯ № 7 Тема: Підготовка найпростішого гіпертекстового документа засобами програми Блокнот