4 Створення web-документів за допомогою
HTML-РЕДАКТОРА
4.1 Мета роботи
Ознайомлення з можливостями мови HTML і основними засобами та прийомами створення Web-сторінок.
4.2 Методичні вказівки з організації самостійної роботи студентів
За конспектом лекцій повторіть матеріал за темами: «Інтернет єдиний інформаційний простір», «Введення в HTML», «Особливості Web-документів». Для глибшого засвоєння матеріалу вивчіть тему «Створення Web-документів», викладену в [5-8].
4.2.1 Теги HTML
Звичайний текст перетворюється в документ HTML шляхом додавання конструкцій мови, званих тегами (tag маркер). Тег елемент HTML, що є текстом, взятим у кутові дужки (< >). Тег є активним елементом, що змінює подання наступної за ним інформації. Тег може мати атрибути. Теги, як і дужки, бувають парними – тег , що відчиняє , <А> та тег, що закриває, </А>. HTML-теги можна умовно розділити на дві категорії:
– теги, що визначають, як відображатиметься Web-браузером тіло документа в цілому;
– теги, що описують загальні властивості документа, такі як заголовок або автор документа.
Тег HTML складається з елементів, що розташовуються один за одним у певному порядку:
– лівої кутової дужки (<);
– не обов'язкової косої риски (/), що означає, що тег є кінцевим тегом, який закриває деяку структуру; імені тега, наприклад, TITLE або PRE; не обов'язкових атрибутів;
– правої кутової дужки (>).
Тег може бути без атрибутів або супроводжуватися одним або декількома атрибутами, наприклад: ALIGN=CENTER.
Між тегами, що відкривають і закривають, може міститися текст або інші теги. У таких випадках два тега і частина документа, що міститься між ними, утворять блок, названий елементом HTML.
Специфікація атрибута містить:
– ім'я атрибута, наприклад WIDTH;
– знак рівності (=);
– значення атрибута, що задається рядком символів, наприклад, "80".
Значення атрибута береться в одинарні або подвійні лапки (' 80', "80").
4.2.2 Структура HTML-документа
Документи HTML мають таку структуру: оголошення HTML-документа; заголовок; тіло документа; коментар.
Приклад 1.
<!-- Оголошення HTML-документа -->
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Notepad">
<meta name="BTMAS" content="HTML Навчання">
<title>ІНТЕРНЕТ </title>
</head>
<body bgcolor="#208580">
<h1 align="center"><b><font face="courier">ИНТЕРНЕТ-ТЕХНОЛОГИИ</font>
</b>
</h1>
<p align="center"> </p>
<p align="center"><font color="#FFFF00">Лабораторні роботи</font></p>
</body>
</html>
<!-- Закінчення HTML-документа -->
4.2.3 Оголошення HTML-документа
Пари тегів <HTML>і</HTML>повідомляють Web-оглядачу (браузеру), що між ними розміщується документ у форматі HTML, першим у документі має бути тег<HTML>(на початку документа), а останнім -</HTML>(наприкінці документа).
Web-браузер інтерпретує отриманий документ як HTML-документ за наявності в його початку тега <HTML>.
4.2.4 Заголовна частина документа
Теги <HEAD>і</HEAD>є загальним описом документа. Як правило, між ними рекомендується вказувати інформацію про документ (назва, ключове слово для пошуку, опис тощо). Спеціальні програмиспайдери пошукових систем використовують назву документа для побудови своїх баз даних. Щоб дати назву HTML-документу, текст розміщується між тегами<TITLE>і</TITLE>.
Приклад 2.
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Notepad">
<meta name="BTMAS" content="HTML Навчання">
<title>ІНТЕРНЕТ </title>
</head>
Технічно стартові і завершальні теги типу <HTML>, <HEAD> і <BODY>необов'язкові. Але настійно рекомендується їх використовувати, оскільки це дозволяє Web-браузеру відокремити заголовну частину документа від безпосередньо значеннєвої частинитіла документа.
4.2.5 Тіло HTML-документа
Третьою головною частиною документа є його тіло. Воно йде відразу за заголовком і знаходиться між тегами <BODY> і </BODY>. Перше з них має знаходитися відразу після тега </HEAD>, а друге перед тегом </HTML>. Тіло HTML-документа це власне інформація документа, відформатована засобами HTML.
Приклад 3.
<body bgcolor="#208580">
<h1 align="center"><b><font face="courier">ИНТЕРНЕТ-ТЕХНОЛОГИИ</font>
</b>
</h1>
<p align="center"> </p>
<p align="center"><font color="#FFFF00">Лабораторні роботи</font></p> </body>
4.2.6 Коментар
HTML дозволяє вставляти в тіло документа коментар, що зберігається при передачі документа мережею, але не відображується браузером. Коментарі можуть зустрічатися в будь-якому місці документа. Синтаксис коментаря:
<!—Это комментарий -->, наприклад:
<! – Начало HTML-документа -->.
4.2.7 Теги тіла документа
Теги тіла документа ідентифікують відображувані у вікні компоненти HTML-документа. Тіло документа може містити посилання на інші документи, текст та іншу форматовану інформацію. У табл. 4.1 наведені основні теги HTML. Основні теги, призначені для оформлення сторінки, наведені в табл. 4.2.
Таблиця 4.1 – Основні теги HTML
|
Теги |
Призначення |
|
<HTML> |
Початок документа HTML |
|
<HEAD> |
Початок заголовка (заголовок містить описову і службову інформацію) |
|
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="BTMAS" content="HTML Навчання"> <meta name="GENERATOR" content="Notepad"> |
Метатеги визначають службову інформацію. Перший метатег визначає кодування тексту, другий повідомляє ключове слово, третій повідомляє, в якому редакторі написаний HTML-документ |
|
<ТIТLЕ>Приклад Web-сторінки </ТIТLЕ> |
Заголовок для вікна браузера |
|
</HEAD> |
Кінець заголовка |
|
<body bgcolor="#208580"> |
Початок тілa HTML- документа |
|
</BODY> |
Закінчення тіла документа |
|
</HTML> |
Закінчення документа HTML |
Таблиця 4.2 Теги для оформлення сторінки
|
Елементи оформлення сторінки |
Коди HTML |
|
1 |
2 |
|
Параграф, ще один параграф |
<P> Параграф </P> <P> Ще один параграф </P> |
|
Жирний шрифт |
<STRONG> жирний шрифт </STRONG> |
|
Курсив |
<ЕМ> Курсив </ЕМ> |
|
Підкреслений текст |
<U> Підкреслений текст</U> |
|
Текст збільшеного розміру |
<ВIG> Текст збільшеного розміру </ВIG> |
|
Текст зменшеного розміру |
<SMALL> Teкст зменшеного розміру </SMALL> |
|
Текст іншого кольору |
<FONT COLOR="#FFOOOO"> Текст іншого кольору </FONT> (#FFOOOO -Шістнадцятковий код кольору) |
|
Текст з іншим шрифтом |
<FONT FACE="COURIER"> Текст з іншим шрифтом </FONT> (COURIER - Ім'я шрифту) |
|
Вирівнювання текстового параграфа |
<P ALIGN=’'LEFT''> Ліве вирівнювання текстового параграфа </P> (Параметр ALIGN задає вирівнювання параграфа) |
|
Збільшений відступ тексту у визначеному параграфі |
<BLOCKQUOTE> …...<P> Збільшений відступ </P> </BLOCKQUOTE> |
|
Список із нумерованих рядків |
<OL> …....li> Список із </li> …....li> нумерованих </li> …...<li> рядків </li> </OL> |
|
Список рядків, що починаються з крапок |
<UL> ....LI> Список </LI> ....LI> рядків, </LI> ....LI> що починаються з </LI> ..<LI> крапок </LI> </UL> |
|
Гіперпосилання |
<A HREF=http://vrn.fio.ru> Гіперпосилання </A> (Між тегами <A> і </A> може бути будь-який текст і рисунки все це буде гіперпосиланням) |
Продовження табл. 4.2
|
1 |
2 | ||
|
|
| ||
|
Перенесення на наступний рядок без початку нового параграфа |
Перенесення на <BR> наступний рядок <BR> без початку <BR> нового параграфа | ||
|
Горизонтальна лінія для поділу тексту |
<P> Горизонтальна лінія </P> <HR> <P> для поділу </P> | ||
|
Багато пробілів поспіль |
Багато &NBSP; &NBSP; пробілів Так кодуються символи в HTML, якщо символи з таким кодом не можна вставити прямо. Багато пробілів та переклади рядка в HTML ігноруються | ||
|
|
<IMG SRC=”PICTURE. GIF” width=”262” HEIGHT=”100” ALT=”Це підпис до рисунку”> Параметр SRC задає файл з рисунком. Параметри WIDTH і HEIGHT задають ширину і висоту рисунка. Рисунок, що має інший реальний розмір, буде виведений масштабованим. Якщо ці параметри не задавати, браузер сам визначить розмір. ALT містить текст, що буде виведений, поки рисунок не завантажився | ||
|
Комірка 1 |
Комірка 2 |
<TABLE BORDER=”1” WIDTH=”100%”> <TR> <TD WIDTH=”50%”> Комірка 1 </TD> <TD WIDTH=”50%”> Комірка 2 </TD> </TR> <TR> <TD WIDTH=”50%”> Комірка 3 </TD> <TD WIDTH=”50%”> Комірка 4 </TD> </TR> </TABLE> 100% розмір таблиці у відсотках 50% ширина осередків щодо таблиці | |
|
Комірка 3 |
Комірка 4 | ||
|
| |||
|
Комірка 1 |
Комірка 2 |
<TABLE BORDER=”1” WIDTH=”100%”> <TR> <TD WIDTH=”66%” colspan=”2”> Комірка 1 </TD> <TD WIDTH=”34%”> Комірка 2 </TD> </TR> <TR> <TD WIDTH=”33%”> Комірка 3 </TD> <TD WIDTH=”33%”> Комірка 4 </TD> <TD WIDTH=”34%” rowspan=”2”> Комірка 5 </TD> </TR> <TR> <TD WIDTH=”33%”> Комірка 6 </TD> <TD WIDTH=”33%”> Комірка 7 </TD> </TR> </TABLE> colspan, rowspan вказують на те, що Комірка займає декілька суміжних рядків або стовпчиків таблиці | |
|
Комірка 3 |
Комірка 4 |
Комірка 5 | |
|
Комірка 6 |
Комірка 7 | ||
|
Комірка 1 |
Комірка 2 |
<TABLE BORDER=”4” WIDTH=”70%” cellpadding=”3”> <TR> <TD WIDTH=”50%”bgcolor=”#FFFF80”> Комірка 1 </TD> <TD WIDTH=”50%”> Комірка 2 </TD> </TR> <TR> <TD WIDTH=”50%”> Комірка 3 </TD> <TD WIDTH=”50%”> Комірка 4 </TD> </TR> </TABLE> Тут подано додатково декілька параметрів для комірок та всієї таблиці (колір першої комірки, товщина бордюру) | |
|
Комірка 3 |
Комірка 4 | ||
Кольори зазвичай кодуються у форматі RGB (червоний, зелений, синій). Записується це як «#RRGGBB», де RR шістнадцяткове значення червоної складової, GG зеленої, а ВВ – синьої. 00 означає відсутність яскравості, a FF максимальну яскравість.
Шістнадцятковою називається система числення, у якій для запису використовується 16 символів: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, У, С, D, E, F. Отже, число FF відповідає десятковому числу 256. Ось приклади кольорів, закодованих у такий спосіб:
#000000 #FFFFFF #FFOOOO #FFFFOO #408080
Чорний Білий Червоний Жовтий Бірюзовий
4.3. Опис лабораторної установки
Лабораторна робота виконується на ПЕОМ типу IBM PC в операційному середовищі Windows з використанням Internet Explorer та стандартної програми NotePad.
4.4 Порядок виконання роботи і методичні вказівки з її виконання
1. Запустіть NotePad (Пуск / Программы / Стандартные / Блокнот). Створіть Web-документи, HTML-код яких наведено в прикладах 13. Збережіть кожен з них у форматі *.html. Продивіться у браузері.
2. Користуючись тегами, наведеними в табл. 4.1, 4.2, створіть Web-сторінку такого змісту (рис. 4.1).
Рисунок 4.1 – Звіт
3. Додайте такі гіперпосилання, щоб при натисненні на слова, виділені синім кольором (рис. 4.1), відкрилися Web-документи відповідного змісту (табл. 4.3).
3. Інформацію «Ст. гр. РЕА», «Прізвище Ім'я», «Бригада №», а також рисунок (H:\Brigards\BR#\BTMAS\fig. jpg) слід помістити в таблицю так, як вказано в табл. 4.2.
4. Виберіть оптимальне поєднання кольору фону та шрифтів (табл. 4.2).
Таблиця 4.3 – Структура звіту
|
Назва |
Документ і його зміст |
|
Лекції |
Приклад. Ім'я документа lk.html Тема лекції 1 і список розглянутих питань Тема лекції 2 і список розглянутих питань |
|
Самостійна робота |
Ім'я документа Samost. html |
|
1 Дослідження можливостей Web-браузерів |
Ім'я файла lab1. html Зміст варіант завдання і результат пошуку |
|
2 Пошук у Web персональної інформації |
Ім'я файла lab2. html Зміст перелік пошукових машин, варіант завдання, результат пошуку |
|
3 Електронна пошта та передача файлів |
Запуск стартової сторінки для електронної пошти |
4.5 Зміст звіту
Звіт має містити створені вами документи в коді HTML.
4.6 Контрольні запитання та завдання
1. Що таке HTML?
2. Що таке тег? Чим відрізняються теги різних категорій?
3. З чого складаються теги?
4. Яка структура HTML-документа? Опишіть призначення оголошення і заголовка HTML-документа.
5. Як включити в HTML-код опис гіперпосилання?
6. Що таке метатеги і для чого вони можуть використовуватися?
7. Як організувати таблицю у Web-документі?
8. Як ввести рисунок в документ?