ЗАВДАННЯ № 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 (зазвичай починаються з амперсанта – символа &):
пробіл - символ менше (<) - < більше (>) - >
дорівнює (=) - " амперсант (&) - & і інші.
Колір тексту і фон документа.
Колір основного тексту, колір посилань і фон документа описуються в початковому тегу тіла документа <BODY > за допомогою атрибутів.
Значення кольору можна задавати в одній із двох форм. Перша форма використовує задання кольору в RGB – палітрі (Red-Green-Blue). Код кольору вказується шістнадцятирічними числами, що задають інтенсивність відповідної складової (за двома розрядами). Наприклад, ярко-червоний має код – FF0000, ярко-зелений – 00FF00, чорний колір 000000, білий – FFFFFF. При виборі кольору перед шістнадцятирічним числом ставиться символ #.
Можливе задання кольору за допомогою імен. Таблиця основних кольорів наведена в додатку 7.2. Кожній назві кольору відповідає відповідна RGB – тріада. Наприклад, кольору navy - #000080.
Тегі форматування тексту
Для форматування тексту HTML-документа передбачено дві групи тегов, названі логічними й фізичними тегами форматування.
Теги логічної групи позначають своїми іменами структурні групи текстових фрагментів. Наприклад, тег <CODE> вказує на програмний код, тег <STRONG> - сильне виділення. Фрагменти з логічним форматуванням Браузер відображає відповідним чином відповідно до його можливостей.
Теги фізичного форматування вказують Браузеру як відобразити текстовий фрагмент згідно до бажань автора. Наприклад, тег <B> використовується для відображення тексту напівжирним курсивом (що звичайно відповідає логічному тегу <STRONG>)).
Сучасні Браузери підтримують і ті, й інші теги форматування. Однак з виходом специфікації HTML 4.0, перевага віддається логічному форматуванню, оскільки був проголошений принцип відділення структури документа від його подання.
Інші параметри шрифту наводяться в додатку 7.1.
Текст виводиться у вікні Браузера безперервне слово за словом, при цьому весь матеріал з пробілами відображається як один пробіл. Тому для перекладу рядка й вставки додаткового інтервалу з пробілом необхідно використовувати спеціальні засоби.
· Символьний примітив   – один пробіл.
· Тег <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-документі, у тому числі і вкладені таблиці. Не слід залишати комірки таблиці незаповненими. Якщо за задумом комірка повинна виглядати порожньою, слід розташувати в ній хоча б нерозривний пробіл -  .
Для оформлення таблиць можуть бути використані атрибути, що вказуються в тегах <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 Тема: Підготовка найпростішого гіпертекстового документа засобами програми Блокнот
