Основні теоретичні відомості
Web-сторінка – це текстовий файл, створений командами мови HTML. Для роботи з такими файлами використовується спеціальна програма–броузер. Це можуть бути броузери Internet Explorer, Opera, Netscape Communicator та ін.
HTML-файл має структурований вигляд, організований за допомогою тегів (вказівок броузеру для визначення тієї або іншої частини файла). Теги бувають парні – для зазначення початку і кінця фрагменту й одноелементні – для визначення дії. Створюють такі файли в будь-якому текстовому редакторі; при записі його на диск у полі Тип файлавизначають Только текст, у полі Имя файла вводять ім’я файла, а через крапку – розширення html.
Тег <HTML> використовується для відкриття HTML-документа. Кожна Web-сторінка починається тегом <HTML> і закінчується закриваючим тегом </HTML>.
Заголовок Web-сторінки обмежується парою тегів <HEAD> і </HEAD>.Обов’язковим атрибутом цього тегу являється тег <TITLE>.КожнийHTML-документ має назву, яка знаходиться між тегами <TITLE> і </TITLE>. По назві документа HTML браузери можуть знайти інформацію, тому місце для назви завжди визначене – воно знаходиться зверху і окремо від вмісту HTML-документу. Відображується назва в заголовку вікна браузера, тому на нього накладається обмеження: максимальна довжина назви – 40 символів.
<BODY> і </BODY> -між цими тегами заключається тіло документу.
В більшості документів основними функціональними елементами являються заголовки і абзаци. Мова HTML підтримує шість рівнів заголовків. Вони задаються за допомогою парних тегів від <H1> до <H6>. При відображенні Web-документів на екрані комп’ютера ці елементи відображаються за допомогою шрифтів різного розміру.
Одним із основних елементів документів (не тільки Web-сторінок) являється абзац. Зазвичай абзаци задаються за допомогою парного тегу <Р>. Мова HTML не має засобів для створення абзацного відступу, тому при відображенні на екрані монітору абзаци розділяються пустим рядком. Тег, що закривається </Р> розглядається як необов'язковий..
Непарний тег <BR> дозволяє задати примусовий перехід на новий рядок в межаж абзацу і являється тегом переривання рядку. Якщо не використовувати ці теги, то розбивка тексту на рядки буде визначатись шириною вікна броузера.
Текст в абзаці може бути вирівняний по лівій межі, по правій межі тощо. Для цього використовують атрибут ALIGN(вирівнювання):
<P ALIGN=“LEFT”> -вирівнювання по лівій межі;
<P ALIGN=“RIGHT’> -вирівнювання по правій межі;
<P ALIGN=“CENTER”> -вирівнювання по центру;
<P ALIGN=“JUSTIFY”> -вирівнювання по обом краям.
Непарний тег <BR> здійснює перехід на новий рядок.
В якості обмеження абзаців може також використовуватися горизонтальна лінійка. Цей елемент задається непарним тегом <HR>. При відображенні документа на екрані лінійка розділяє частини тексту одна від одної. Її довжина та товщина задаються атрибутами типу
<HR ALIGN=”RIGHT” SIZE=”10” WIDTH=”50%”>
Цей тег створює горизонтальну лінійку, що розташована в правій частині вікна, шириною в 10 пікселей і займає половину ширини вікна.
Тег <CENTER>, дозволяє розташувати елементи по центру, якою б не була ширина вікна броузера. Усі елементи, що містяться між тегами <CENTER> і </CENTER>, будуть знаходитись у центрі вікна по його ширині, якщо тільки для них не визначене спеціальне розташування. Тег <CENTER> можна застосовувати не тільки до тексту, але і до графіки, таблиць та інших інструментів.
За допомогою спеціального тега <FONT атрибути> можна налагодити шрифт для зображення тексту: задати гарнітуру, розмір, стиль написання символів та колір. Цей тег має такі атрибути:
FACE=“ім’я_шрифту”–задає ім’я (гарнітуру) шрифтуабо декілька можливих шрифтів, які броузер використовує для відображення тексту. (Наприклад, <FONT FACE= “Arial”> )
SIZE=”розмір_шрифту” - задає розмір шрифта від 0 до 7 і використовується для встановленнярозміру поточного шрифту окремих фрагментів тексту.
<FONT SIZE="1">- найменший шрифт
<FONT SIZE="7"> - найкрупніший шрифт
<FONT SIZE="+0"> - шрифт базового розміру, що дорівнює 3. Шрифти можуть бути задані відносно базового +1, -1,+2,-2,... +7, -7
COLOR=”колір” - задає колір шрифту. Вибір кольору можна задавати двома способами: завданням імені або визначенням номера кольору кольоровій гамі.
Таблиця 5.1- відповідність імен основних кольорів і їх шістнадцятирічних кодів
| Колір | Ім’я кольору | Шістнадцятирічне представлення |
| Чорний | BLACK | #000000 |
| Темно-синій | NAVY | #000080 |
| Сріблястий | SILVER | #C0C0C0 |
| Синій | BLUE | #0000FF |
| Темно-бордовий | MAROON | #800000 |
| Пурпурний | PURPLE | #800080 |
| Червоний | RED | #FF0000 |
| Фуксія | FUCHSIA | #FF00FF |
| Зелений | GREEN | #008000 |
| Чирок | TEAL | #008080 |
| Известь | LIME | #00FF00 |
| Аква | AQUA | #00FFFF |
| Оливковий | OLIVE | #808000 |
| Сірий | GRAY | #808080 |
| Жовтий | YELLOW | #FFFF00 |
| Білий | WHITE | #FFFFFF |
Стилі накреслення шрифта встановлюються відповідними тегами:
| Стиль | Тег |
| Напівжирний (Bold) | <В>... </В> |
| Курсив (Italic) | <I>...</I> |
| Підкресленний (Underscope) | <U>...</U> |
| Викресленний | <S>...</S> |
| Фіксованої ширини (телетайп) | <TT>...</TT> |
| Нижній індекс | <SUB>… </SUB> |
| Верхній індекс | <SUР>… </SUР> |
| Великий шрифт | <ВIG>... </ВIG> |
| Малий шрифт | <SMALL>... </SMALL> |
Список відрізняється від звичайного тексту тим, що при виведенні у вікні броузера виконується автоматична нумерація чи маркірування його елементів. Існує декілька різновидів списків: нумеровані, ненумеровані та з визначенням.
Список може мати заголовок, який формується за допомогою тегів <LH> …</LH>. Ненумерований список утворюють за допомогою парного тега <LH> …</LH> і одинарних тегів <LІ>
| <LH> Ненумерований </LH> <UL> <LI> ПУНКТ 1 СПИСКУ <LI> ПУНКТ 2 СПИСКУ <LI> ПУНКТ З СПИСКУ </UL> |  |
Нумерований список створюють за допомогою парного тега <OL> …</OL> з необов’язковим параметром TYPE і одинарних тегів <LІ>
| <LH> Нумерований </LH> <OL TYPE="1"> <LI> ПУНКТ І <LI> ПУНКТ 2 <LI> ПУHKT3 </OL> |  |
Атрибут TYPE задає спосіб нумерації:
• 1 - арабські цифри;
• А - великі літери;
• а - маленькі літери:
• і - римські цифри.
Список з визначенням використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL> …</DL> і двох одинарних тегів <DT> i <DD>
| <LH> 3 визначенням </LH> <DL> <DT> термін <DD> Визначення 1 (виводиться зі зміщенням) <DD> Визначення 2 (виводиться зі зміщенням) </DL> |  |
Списки можуть бути вкладеними.
Порядок виконання роботи
1. Переглянути зміст html-документу Список (D:\Комп’ютерні мережі) у текстовому редакторі Блокнот та засобами програми браузер (встановленій на вашому ПК).
2. За допомогою текстового редактору Блокнот створити Web-сторінку з розповіддю про себе. Зберегти html-документ на гнучкому диску А:\ під ім'ям f1.html.
3. За допомогою текстового редактору Блокнот створити Web-сторінку, яка містить чотири різновидів нумерованих списків. Проекспериментувати з різними значеннями гарнітури шрифту, розміру, стилю накреслення, кольору символів. Зберегти html-документ на гнучкому диску А:\ під ім'ям f2.html.
4. Доповнити створену Web-сторінку двома ненумерованими списками.
5. Доповнити створену Web-сторінку списками, що вкладені один в одного.
6. Для кожного з видів списку встановити коментар та заголовки різних рівнів і різного кольору.
7. Відокремити кожний тип списку горизонтальною лінійкою різного способу розташування, різної висоти, ширини та кольору.
8. Зберегти зміни в html-документі f2.html.
9. Переглянути всі створені Web-сторінки засобами програми браузера.
10. Змінити розміри вікна браузера та переконатися що браузер автоматично змінює розташування тексту.
У звіті по роботі повинні бути тема та мета роботи; порядок дій по кожному пункту завдання; висновок про роботу, а також файли f1.html та f2.html на гнучкому диску.
Питання для самоконтролю
1. Для чого призначена мова HTML? Що таке теги цієї мови? Які вони бувають?
2. Із яких частин складається документ на мові HTML? Які теги використовуються для початку та кінця документа, області заголовку документа, змісту документа?
3. Назвіть теги для створення впорядкованих та невпорядкованих списків.
4. Назвіть тегу для визначення шрифта, перерахуйте атрибути цієї теги.
5. За допомогою якого тегу можна вставляти горизонтальну лінійку різного способу розташування, різної висоти, ширини та кольору.
6. Назвіть види списків та основні теги для їх створення
7. Як створити заголовки в документі та яких рівнів їх можна створити?