Лабораторна робота № 4
Мета: Ознайомитися зі структурою html-файлу, тегами форматування тексту, навчитися створювати найпростіші веб-сторінки.
Теоретичні відомості.
Для створення web-сторінок користуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML – Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори, такі як FrontPage, Dream Viewer, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.
Для підготовки html-файлу ми використовуватимемо текстовий редактор NotePad, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.
Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:
<HTML> <!--Це файл filel.htm-->
<HEAD>
<TITLE> Назва вікна web-сторінки </TITLE>
</HEAD>
<BODY параметри>
<!--Далі йде текст, наприклад, такий. -->
Мене звати Світлана. Мені 16 років.
Я хочу стати web-дизайнером.
Це моя перша web-сторінка. Тут я можу писати будь-який текст, наприклад, про себе і мої інтереси. Пізніше я навчуся вставляти фотографії, картинки, звук, відеозображення шляхом посилання на відповідні графічні, звукові чи відеофайли. Я збережу цей файл на диску і відкрию його у броузері. Моя сторінка ще не красива і не цікава. Але скоро я навчуся робити цікаві web-сторінки.
Я розташую файл на сервері, і мою сторінку зможуть побачити в різних кінцях світу.
</BODY>
</HTML>
Відкривши такий файл у браузері, побачимо web-сторінку, де відомості про цю особу будуть розміщені дещо інакше, ніж у файлі: увесь текст розміщений в одному абзаці вирівняний до лівого краю, немає абзацного відступу (рис. 1).
Рис. 1 Текст html-файлу у вікні броузера.
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: <HTML> ... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.
Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Не забувайте її писати, інакше тег працюватиме неправильно.
Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.
У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>...</TITLE>.
Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>.
У середині пари тегів <BODY параметри>... </BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні броузера.
Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно - достатньо набрати потрібний текст. Якщо ж дизайнер хоче подати текст спеціально, щоб він виглядав якнайкраще, до тексту застосовують теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML.
Розглянемо головні параметри тега BODY:
|
BACKGROUND="d:\myweb\picture1.jpg" |
Задає шлях до картинки для тла |
|
BGCOLOR="red" |
Задає червоний колір тла, якщо не використовується тло-картинка |
|
BGPROPERTIES="fixed" |
Фонове зображення не прокручується |
|
TEXT="blue" |
Задає колір тексту (тут синій) на сторінці |
Інші параметри, що стосуються способів відображення гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше.
Розглянемо теги, які використовують для форматування тексту.
Теги форматування символів тексту (вони парні):
|
<В> текст </В> |
Товстий шрифт тексту |
|
<І> текст <I> |
Шрифт-курсив |
|
<U> текст </U> |
Підкреслений шрифт |
|
<SUB> текст </SUB> |
Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>O |
|
<SUP> текст </SUP> |
Верхній індекс, наприклад, 1а вулиця, а2 |
|
<BIG> текст </BIG> |
ВЄЛИКИЙ шрифт |
|
<SMALL> текст </SMALL> |
малий шрифт |
|
<EM> текст </ЕМ> |
Виокремлений курсивом текст (те саме, що тег І) |
|
<B> <I> текст </І></В> |
Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів |
|
<font size=”число” color=”колір” family=”тип шрифта”>…</font> |
Задає розмір, колір та тип шрифта |
Теги для розміщення тексту (деякі з них одинарні):
|
<р> |
Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Тег <Р> може мати параметр align=”вирівнювання”, який встановлює тип вирівнювання для абзацу. |
|
<BR> |
Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка |
|
<pre> текст </pre> |
Відображає текст у броузері так, як він виглядає у текстовому редакторі (з усіма абзацами, знаками пробілу) |
|
<HR> |
У рядку буде проведена горизонтальна лінія. Тег <HR> може мати наступні параметри: size=”число”, width=”число”, align=”тег вирівнювання”, noshade, які встановлюють товщину, ширину, вирівнювання та прибирають тінь для горизонтальної лінії. |
Тег <HR> може мати наступні параметри: size=”число”, width=”число”, align=”вирівнювання”, noshade, які встановлюють товщину, ширину, вирівнювання та прибирають тінь для горизонтальної лінії.
Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:
|
Теги |
Результат на екрані |
|
<Н1>Заголовок 1</Н1> |
Заголовок 1 |
|
<Н2>Заголовок 2</Н2> |
Заголовок 2 |
|
<НЗ>Заголовок 3</НЗ> |
Заголовок 3 |
|
<Н4>Заголовок 4</Н4> |
Заголовок 4 |
|
<Н5>Заголовок 5</Н5> |
Заголовок 5 |
|
<Н6>Заголовок 6</Н6> |
Заголовок 6 |
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
|
<CENTER> елемент </CENTER> |
Вирівнювання до центру |
|
<LEFT> елемент </LEFT> |
Вирівнювання до лівого краю |
|
<RIGHT> елемент </RIGHT> |
Вирівнювання до правого краю |
|
<JUSTIFY>…</JUSTIFY> |
Вирівнювання по ширині |
Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.
Хід роботи
1. Відкрийте редактор NotePad.
2. Створіть за допомогою текстового редактора html-файл з розповіддю на вільну тему.
3. Збережіть його командою Save as... з назвою file1.htm у власній папці. Відкрийте файл file1.htm у броузері.
4. Тег <BODY> у файлі запишіть так: <BODY TEXT = "red">. He забувайте кожного разу після внесення змін виконувати команду Save as... у програмі NotePad і поновлювати файл у броузері.
5. Поекспериментуйте з різними значеннями кольорів (green, white, yellow, blue, #ffaa55 тощо) параметрів BGCOLOR і TEXT.
6. Помістіть на тло фоновий малюнок.
7. Виконайте форматування тексту у файлі filel.htm. Розбийте текст на абзаци, для кожного абзацу задайте вирівнювання, шрифт, колір шрифту, задайте заголовки для кожного з абзаців, відформатуйте накреслення тексту в абзацах. Збережіть файл із назвою file2.htm та переглянте його у броузері.
8. Усі заголовки створіть у броузері зеленим кольором.
9. Перегляньте цей файл за допомогою броузера і поекспе-риментуйте з тегами форматування тексту.
10. Поекспериментуйте з розмірами вікна, в якому демонструється документ. Переконайтеся, що броузер автоматично змінює розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори цього не роблять).
11. Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайліпшого вигляду.
12. Збережіть файл із назвою Lab_int_4.htm та переглянте його у броузері.