-

1. Електронний навчальний
посібник для створення веб-
сторінок
“Елементарний HTML”

2. ЗмістЗміст
Словник тегівСловник тегів
Від автораВід автора
Перевір себеПеревір себе
НавчальнийНавчальний
посібникпосібник
ЕлементарнийЕлементарний HTMLHTML
Мандруючи по глобальній мережі Інтернет, ви бачите сотні
веб-сторінок, які створенні за допомогою мови розмітки
гіпертекстових документів HTML.
Вона проста для розуміння, і освоїти її допоможе наш
електронний посібник. Матеріал спробували подати
доступною для всіх мовою.
Ви можете зразу перейти до посібника,
а можете спочатку переглянути зміс або словник тег щоб
швидко знайти те,що вам потрібно.

3. ЗмістЗміст
Список тегСписок тег
Від автораВід автора
ЗавданняЗавдання
НавчальнийНавчальний
посібникпосібник
ЗмістЗміст
Вступ.
Крок 1. Перетворення текстового файлу у веб-
сторінку.
Крок 2. Що таке обов’язкові теги.
Найпростіше.
Крок 3. Як змінити фон.
Крок 4. Як змінити колір тексту.
Крок 5. Вирівнюємо текст.
Крок 6. Як виділити заголовок.
Крок 7. Як задати розмір букв.
Крок 8. Курсив, напівжирний текст, підкреслений.
Крок 9. Що таке шлях?Як вставити малюнок.
Крок 10. Що таке гіперпосилання.
Крок 11. Чи може картинка бути посиланням.
Крок 12. Списки.

4. Тег Призначення, атрибути
A Посилання
href=“інший_документ.html" – шлях до документу
target=_blank – відкриває посилання в новому вікні
name="anchor1" – ім’я закладки
title=“Ваш текст" – текст про посилання (текстовий)
B виділення тексту напівжирним шрифтом
BIG
виділення тексту крупнішим шрифтом, ніж основний
BODY тіло документа, обов'язковий тег
text="#cc0000" - задає колір тексту всього документа
bgcolor="#000000" - задає колір фону документа
background="картинка.jpg" - задає фон з малюнка
link="#ff9999" - задає колір посилання
alink="#ff9999" - задає колір активного (натиснутою) посилання
vlink="#ff9999" - задає колір відвіданого посилання
BR перенесення тексту на інший рядок
clear="all" (left, right) - завершення обтікання текстом об'єкту
CENTER центрування тексту і об'єктів
DIV вирівнювання тексту і об'єктів
align="center" - центрування
align="right" - вирівнювання по правому краю документа
align="left" - вирівнювання по лівому краю документа
align="justify" - вирівнювання по обох краях документа
Словник тегівСловник тегівЗмістЗміст

5. Тег Призначення, атрибути
FONT управління шрифтами
color="#cc0000 - задає колір для блоку тексту
size="+0" - задає розмір шрифту тексту (від -2 до +4)
face="Arial" - задає певний тип шрифту
FRAME визначає вміст і вид одного фрейма
marginheight="0" - ширина верхнього і нижнього полів фрейма
marginwidth="0" - ширіна лівого і правого полів фрейма
scrolling="yes" (no, auto) - лінійка прокрутки
name="window-1" - ім'я фрейма
noresize - заборонити відвідувачеві міняти розміри фреймів
FRAMESET визначає макет основного вікна у вигляді прямокутних просторів
rows="100,200,*" - визначає розташування горизонтальних фреймів
cols="10%,20%,70%" - визначає розташування вертикальних фреймів
border - визначає ширину рамок фреймов в пікселях
Hx заголовки (H1, H2, H3, H4, H5, H6)
HEAD голова документа, обов'язковий тег
HR лінія
align="right" (center або left)
width="30%" (ширина лінії у відсотках)
size="6" (товщина лінії)
color="cc0000" (колір лінії, тільки в IE)
HTML указує на тип документа, обов'язковий тег
Словник тегівСловник тегівЗмістЗміст

6. Тег Призначення, атрибути
I виділення тексту курсивом
IMG підвантаження зображень (картинок)
Border="5" - рамка картинки картинки
width="500" - ширина картинки
height="100" - висота картинки
align="left" - розташування тексту по відношенню до картинки
vspace="10" - відстань від картинки до тексту по вертикалі
hspace="30" - відстань від картинки до тексту по горизонталі
alt="описание" - опис картинки
usemap="#karta1" - посилання на карту
LI визначає елемент списку
MAP визначає клієнтську навігаційну карту
name="karta1" - ім'я карти
MARQUEE рядок тексту, що біжить (тільки IE)
bgcolor - колір фону рядка, що біжить
height - висота рядка
width - ширина рядка
behavior="scroll" звичайна прокрутка
behavior="slide" - рядок пробігає до краю і зупиняється
behavior="alternate" - рядок рухатиметься від краю до краю
scrollamount="1" (1-10) - швидкість руху рядка
direction="left" (right, up, down) - рух вліво (управо, вгору, вниз)
Словник тегівСловник тегівЗмістЗміст

7. Тег Призначення, атрибути
OL впорядковані списки
type="I" (i, 1, а, A) - стиль елементу списку
P параграф, вирівнювання тексту і об'єктів
align="center" - центрування
align="right" - вирівнювання по правому краю документа
align="left" - вирівнювання по лівому краю документа
align="justify" - вирівнювання по обох краях документа
PRE форматований текст
S перекреслений текст
SMALL виділення тексту дрібнішим шрифтом, ніж основний
SUB нижній індекс
SUP верхній індекс
TABLE таблиця
bgcolor="#FFCC33" - колір фону таблиці (рядки, комірки)
background="картинка.gif" - задає фоновий малюнок
width="50" або width="50%"- ширина таблиці
height="45" або height="45%"- висота таблиці
cellspacing="5" - відстань між комірками
cellpadding="5" - відстань усередині комірок
border="3" - задає товщину рамки таблиці
bordercolor="#000000" - задає колір рамки таблиці
Словник тегівСловник тегівЗмістЗміст

8. Словник тегівСловник тегівЗмістЗміст
Тег Призначення, атрибути
TD комірка даних таблиці
bgcolor="#FFCC33" - колір фону
background="картинка.gif" - задає фоновий малюнок
width="50" або width="50%"- ширина
height="45" або height="45%"- висота
align="center" (right, left) - горизонтальне вирівнювання вмісту
valign="middle" (top, bottom) - вертикальне вирівнювання вмісту
colspan="2" - розтягнути комірки на декілька стовпців
rowspan="2" - розтягнути комірки на декілька рядків
cellspacing="5" - відстань між комірками
TITLE заголовок документа
TR рядок таблиці
bgcolor="#FFCC33" - колір фону
background="картинка.gif" - задає фоновий малюнок
width="50" або width="50%"- ширина
height="45" або height="45%"- висота
U підкреслений текст
UL неврегульовані списки
type="disk" (circle, square) - стиль елементу списку

9. Крок 1. Перетворення текстового файлу у веб-
сторінку.
Зміст Крок 2
Перед початком роботи ми створимо на нашому комп'ютері окрему папку для майбутньої сторінки. Тепер
відкриємо блокнот і скопіюємо туди наступний текст:
<HTML>
<HEAD>
<TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY>
Добрий день! Це моя перша Web-сторінка.<BR>
Можливо щось вам не сподобається, <BR>
але не дуже зважайте на мої помилки, адже <BR>
"На помилках навчаються!"
</BODY >
</HTML> (Проглянути)
Збережемо цей документ, привласнивши йому ім'я *.html. Тепер відкриємо броузер, допустимо, Internet Explorer
(не закривайте блокнот, він нам ще прігодітся), і відкриємо в броузере наш документ.
Якщо ми щось змінимо в нашому *.html документі (у блокноті), то, щоб подивитися, як це виглядає в нашому
броузері, треба не забувати натискати в броузері кнопку ОБНОВИТИ. Якщо змін не видно, то це означає,
що ви десь щось неправильно написали, або забули зберегти документ.

11. Перше, що нам потрібно засвоїти: хтмл (html) - це те, що html не є мовою програмування, він призначений для розмітки
текстових документів (тобто за допомогою його ми розмічаємо текст, таблиці, картинки і т.д. на нашій сторінці). То,
як виглядатимуть картинки, текст і інші елементи на вашій сторінці, і як вони розташовуватимуться щодо один
одного, визначають мітки (tags або теги).
Приклад тега: <br> (перенесення тексту на інший рядок).
Отже, все, що знаходиться між < і > - це тег. Текст, що не знаходиться між такими дужками < > - весь видно при перегляді
в броузері.
Крок 2. Що таке обов’язкові теги.
Зміст Крок 3Крок 1
Звернете увагу на картинку, вона тут не просто так, вона показує нам обов'язкові
теги. Обов'язкові теги, це такі теги, які ви завжди повинні прописувати для кожної
своєї сторінки.
<html>
Цей тег повинен відкривати документ. Якщо є відкриваючий тег, то повинен бути і що
закриває:
</html>
<head> </head> - голова документа
<body> </body> - тіло документа
Всі теги, розташовані між <head> </head>, це щось подібне до службової інформації.
Наприклад <title>- заголовок. Навіщо він? Відкрийте IE (Internet Explore) з нашим
документом і спрямуйте свій погляд на заголовок вікна... Побачили?:)
Всі теги, розташовані між <body> </body>, - безпосередній зміст документа.
<тег> </тэг> - не просто тег, це контейнер - тег, який може містити усередині себе
інші теги (і текст).
Зверніть увагу:
<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
Тільки така черговість закриваючих тегів вірна: тег, який ми відкрили першим, -
закриваємо останнім, другою - передостаннім і т.д.
Деякі теги, ніби <br>, не вимагають закриваючого тега.

12. Як броузер визначає, яким шрифтом потрібно виводити текст? Зазвичай він використовує той шрифт, який заданий
в його настройках за умовчанням. Але ці значення можна змінити. Більш того, сторінка, набрана тільки одним
шрифтом, одного розміру і одного кольору, мало кому сподобається. Таку і читати неприємно, і робити
нецікавий.
Щоб задати колір тексту на всій сторінці можна скористатися атрибутом text=“колір” тегу <body>
Зверніть увагу: ми одночасно можемо прописати в тегу <body> і колір тексту в документі, і колір фону (це про всяк
випадок, якщо ви ще не зрозуміли - одному тегу може бути привласнені декілька атрибутів :).
<BODY text =darkblue bgColor=00CC99>
А що робити, коли потрібно змінити колір лише певної частини тексту?
У текстових процесорах цю проблему вирішують просто: заходять в діалогове вікно настройки шрифту і
виставляють там потрібні параметри - розмір, колір і ін. У програмах з англійським інтерфейсом це вікно
звичайне так і називається Font, тобто "Шрифт".Дескриптор, що відповідає за параметри шрифту в HTML,
теж називається <FONT>. Зрозуміло, він парний і впливає на вигляд тексту, розміщеного всередину
конструкції <FONT>... </FONT>.
У дескриптора < FONT> тільки три параметри: гарнітура, розмір і колір.
Давайте розфарбуємо слова “На помилках навчаються” в червоний, а інший текст в синій.
<HTML>
<HEAD>
<TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY>
<FONT color=darkblue>Добрий день! Це моя перша Web-сторінка.<BR>
Можливо щось вам не сподобається, <BR>
але не дуже зважайте на мої помилки, адже <BR></FONT>
<FONT color=red>"На помилках навчаються!"</FONT>
</BODY></HTML> (проглянути результат)
Color - параметр (атрибут) для тега font, він відповідає, в даному випадку, за колір укладений в контейнер тексту.
Атрибут color, як і інші атрибути, не належить тільки одному тегу, він може бути привласнений і деяким
іншим тегам.
Крок 4. Як змінити колір тексту.
Зміст Крок 5Крок 2 ЗмістКрок 3

14. Крок 3. Як змінити фон.
На цій сходинці ми дізнаємося, як змінювати колір фону документа, і поговоримо про етику.
Колір фону встановлюється у вже знайомому нам тегу <body>:
<body bgcolor="#00CCCC ">
Спершу нам буде потрібна палітра (всі кольори інтернету - http://www.artlebedev.ru/tools/colors/). Якщо до Інтернету у вас
зараз немає доступу, то натискайте тут і знайомтеся з палітрою.
Я прописала зелено-бірюзовий колір, ви ж свій документ можете розфарбувати будь-яким іншим. До речі, якщо колір в
<body> не указувати, то за за умовчанням він буде білим, хоча б іноді кольором за умовчанням може бути будь-якій
іншій, окрім білого, тому краще завжди прописуйте колір фону в body.
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY bgColor= "#00CCCC >
Добрий день! Це моя перша Web-сторінка.<BR>Можливо щось вам не
сподобається, <BR>але не дуже зважайте на мої помилки, адже <BR>"На помилках навчаються!"
</BODY></HTML> подивитися
З теоретичною частиною на даній сходинці ми закінчили, тепер сядемо і небагато поговоримо про кольори.
Я хочу порадити вам не зловживати яскравими фонами (жовтим, червоним, салатовим, ну, і чорним з яскравою сумішшю
тексту). Чому? Так, просто пошкодуйте очі ваших друзів, знайомих і випадкового відвідувача. Не слід також вживати
дуже багато різні кольорів на вашій сторіночці, це, як і яскравий фон, відволікає від змісту, заважає прочитанню і
виставляє вас самого не в кращому світлі.
Так, трохи не забула сказати про те, що картинку можна зробити фоном документа.
<body bgcolor="#00CCCC " background="ваш_фон.jpg">
Атрибут background указує на те, де лежить фонова картинка, в нашому прикладі він указує на те, що наша фонова картинка
лежить в тій же директорії (папціі), що і наш документ.
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD>
<BODY bgColor= "#00CCCC background="фон.jpg">
Добрий день! Це моя перша Web-сторінка.<BR>Можливо щось вам не
сподобається, <BR>але не дуже зважайте на мої помилки, адже <BR>
"На помилках навчаються!"
</BODY></HTML> подивитися
Але навіщо залишати атрибут bgcolor, якщо є background? А раптом фонова картинка не завантажиться (представте, таке
може бути), тоді самі зрозумієте навіщо.
Крок 4ЗмістКрок 2

17. Крок 5. Вирівнюємо текст.
У цьому розділі ми поговоримо про параграфи. Параграфи вводяться тегом:
<p></p>
За допомогою параграфів ми можемо центрувати текст:
<p align="center">текст</p>
За допомогою параграфів ми можемо вирівняти текст по лівому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обох краях документа:
<p align="justify">текст</p>
Тепер введемо параграфи в наш документ і подивимося наочно, що вийде (у наш приклад я підставила параграф з
атрибутом центрування тексту (align=" center "), спробуйте підставити в параграф атрибут align з іншими
значеннями: Left, Right, Justify).
<HTML>
<HEAD><TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY text=darkblue bgColor=mediumaquamarine>
<P align=center>Добрий день! Це моя перша Web-сторінка.<BR>
Можливо щось вам не сподобається, <BR>
але не дуже зважайте на мої помилки, адже <BR>
<FONT color=red>"На помилках навчаються!"</FONT> </P>
</BODY></HTML> подивитися
До речі, правильно говорити не вирівнювання, а виключення: виключення по лівому краю, правому, центру, по обох
краях. Якщо ви пізніше заглиблюватиметеся в область дизайну, то вам напевно цей термін зустрінеться. Між іншим,
HTML не має до дизайну анінайменшого відношення, не вважайте, що, вивчивши HTML, ви станете раптом
дизайнером, це велика помилка багатьох початківців в області сайтобудування.
Відмітьте, що текст в документі, якщо не задавати параграфи, завжди вирівнюється за умовчанням по лівому краю. Також
запам'ятаєте, що після того, що закриває тега </p> автоматично відбувається перенесення рядка. Але що робити,
якщо вам це перенесення ніяк не потрібне? Є тег альтернативний <p align="center">:
Крок 6ЗмістКрок 4

19. Крок 6. Як виділити заголовок.
У цьому розділі ми навчимося виділяти текст за допомогою заголовків . Існують шість рівнів заголовків:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Отже, h1 - найважливіший, h6 – менш важливий. Вводячи заголовки в текст, ви дозволяєте вашому
відвідувачеві легше орієнтуватися на сторінці. Заголовками ви визначаєте структуру усередині тексту.
Давайте тепер введемо заголовок в наш документ. Мені здається, що фраза "Добрий день! Це моя перша Web-
сторінка." так і проситься, щоб її виділили і помістити по центру (для заголовків можна також
використовувати вирівнювання за допомогою атрибуту align):
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD>
<BODY text=darkblue bgColor=mediumaquamarine>
<H3 align=center>Добрий день!</H3>
<H4 align=center>Це моя перша Web-сторінка.</H4>
<P align=justify><FONT color=red>На відміну від моїх однолітків, я зовсім
недавно познайомилася із Глобальною мережею Інтернет, але вже навчаюся
створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я
сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста.
Можливо, за допомогою можливостей мережі, я знайду нових друзів.</P></FONT>
</BODY></HTML> (подивитися)
У приклад я ввела заголовок третього рівня <h3></h3> (мій улюблений розмір:). Дивитеся, що вийшло. Як ми
бачимо, візуально заголовки відображаються не тільки крупнішим шрифтом, але до того ж і напівжирним.
Також після закриваючого </hx> відбувається автоматично перенесення на інший рядок.
Крок 7ЗмістКрок 5

21. Крок 7. Як задати розмір букв.
Заголовки призначені для виділення невеликій частині тексту (рядки, фрази). Але, якщо ви хочете виділити великий
фрагмент тексту, то заголовки для цього використовувати не можна. Для цього призначений атрибут size тега
<font></font>, який встановлює бажаний розмір шрифту:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY text=darkblue bgColor=mediumaquamarine>
<H3 align=center>Добрий день!</H3><H4 align=center>Це моя перша
Web-сторінка.</H4>
<P align=justify><FONT color=red>На відміну від моїх я зовсім недавно познайомилася із <FONT
size=+2>Глобальною мережею Інтернет,</FONT> але вже навчаюся створювати
власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно
перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку
побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей
мережі, я знайду нових друзів.</P></FONT>
</BODY></HTML>(подивитися)
Перш, ніж ми рушимо далі, хочу попередити, що є така небезпечна хвороба у початківців сайтобудівників, як
гігантоманія. Її симптоми: непомірно великі розміри шрифту, замість маленьких і милих кнопочок, і товстий
(жирний) у всіх випадках текст. Тому нагадую: стандартний size (за умовчанням) ="+0".
Жалійте очі своїх відвідувачів, і вони до вас потягнуться.
Крок 8ЗмістКрок 6

23. Крок 8. Курсив, напівжирний текст, підкреслений.
Крок 9ЗмістКрок 7
Після того, як ми дізналися про те, як задавати розмір шрифту, настав час поговорити про те, як визначити стиль шрифту. У
цьому розділі ми дізнаємося, як виділити текст курсивом, підкреслити, перекреслити, зробити напівжирним, як робити
верхній і нижній індекси - всі ці теги, як правило, розглядаються разом, і ми не відступатимемо від традицій.
Спочатку розглянемо курсив і напівжирний текст:
<b> Напівжирний текст </b>
<i> Похилий текст (курсив) </i>
<u> Підкреслений текст </u>
<strike> Перекреслений текст</strike>
<s> Перекреслений текст</s>
Тег <big> представляється крупним шрифтом, а <small> малим шрифтом щодо основного тексту:
<small> Малий </small>
Нормальний текст
<big> Великою </big>
Теги Sup і Sub - визначають верхній і нижній індекси. Sup - верхній, Sub - нижній. Де вони можуть пригодиться? Ну,
наприклад, при написанні якої-небудь формули.
^{Верхній індекс}
_{Нижній індекс}
Як бачите, все просто. Можете їх самі понаставляти в тексті, де хочеться, для проби, а в прикладі я виділила підкресленим
фразу про Інтернет.
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY text=darkblue bgColor="#00CCCC ">
<H3 align=center>
<B><FONT face=Arial>Добрий день!</H3>
<H4 align=center></B> <I>Це моя перша
Web-сторінка.</I></FONT></H4>
<P align=justify><FONT face=Verdana color="#330066">На відміну від моїх однолітків, я зовсім
недавно познайомилася із <FONT color=red><U>Глобальною мережею Інтернет,</U></FONT> але вже
навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші
результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого
міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів.</P></FONT>
</BODY></HTML>подивитися
Ось, власне, і все. Можемо переходити на наступну сходинку.

25. Крок 9. Що таке шлях?Як вставити малюнок.
Є декілька питань, з приводу яких серед Web-дизайнерів йдуть постоянниє дискусії. Деякі з них нам ще устрінуться. А ось
перший: що є картинки для Web-сторінки - користь чи шкода? Також я пораджу не ухитрятися з анімованими
картинками: вони відволікають увагу від змісту сторіночки. Постарайтеся також створювати свої картинки для свого
сайту, а не збирати їх по безкоштовних колекціях з графікою, хай ваш сайт буде унікальним. Запам'ятаєте, сторінка
(сайт) не повинна бути супер графічним витвором, який важить сотні кілобайт, оскільки це жорстоко, і жодна жива
душа не витримає подібних тортур (вантажити довго).
Тепер поговоримо як вставляти картинки в документ:
<img src="my.jpg">
Замість my.jpg ми можемо підставити ім'я будь-якої картинки (me.gif, main.png). Найголовніше зрозуміти, що все
розташоване між лапками - посилання (шлях до картинки). Наш приклад говорить про те, що картинка лежить в
тому ж каталозі (директорії, теці), в якій лежить і наш документ. Якщо картинка лежить в піддиректорії (у теці, яка
лежить у вашій основній теці), то посилання на неї виглядатиме так:
<img src="my/my.jpg">
Якщо картинка лежить на рівень вище, а документ знаходиться в піддиректорії, то посилання на неї буде таким:
<img src="../my.jpg">
Якщо картинка лежить на іншому сайті, то шлях прописується повністю:
<img src="http://www.homepage.ru/my/my.jpg">
Для вашої зручності кладіть картинку в ту ж теку, що і документ, тоді плутанини буде менше:) Також я хочу звернути
вашу увагу на те, що MY.jpg, my.JPG, my.jpg і MY.JPG - це різні імена файлів. Ніколи не забувайте, що регістр
потрібно враховувати.
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE>
</HEAD>
<BODY text=darkblue bgColor="#00CCCC ">
<H3 align=center>
<B><FONT face=Arial>Добрий день!</B> <I>Це моя перша
Web-сторінка.</I></FONT></H3>
<IMG src="Моя перша Web-сторінка.files/5.JPG" >
<P align=justify><FONT face=Verdana color=red>На відміну від моїх однолітків, я зовсім
недавно познайомилася із <U>Глобальною мережею Інтернет,</U> але вже навчаюся
створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я
сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за
допомогою можливостей мережі, я знайду нових друзів.</P></FONT>
</BODY></HTML>продивитися

27. Як бачите, я отримала не той результат, що хотіла. Розмір малюнка великий, та і текст хотілося щоб був весь біля картинки.
Чи можна збільшити або зменшити картинку у вікні броузера? У дескрипторі <IMG> є два параметра, що визначають
ширину і висоту зображення, width і height, відповідно. Задаються ці величини в пікселях.
<IMG src="Моя перша Web-сторінка.files/5.JPG" width=“100” height=“120 ” >
Подивимося як змінилося наше зображення.
Пам'ятається, для вирівнювання тексту використовувався атрибут align. Правда, там він застосовувався просто для
вирівнювання рядка по горизонталі відносно сторінки. З графікою справа йде трохи інакше. Проте, спробуємо.Ми
хочемо, щоб малюнок розташовувався зліва. Так і напишемо: <IMG src="Моя перша Web-сторінка.files/5.JPG"
align=“left” >. Продивимося, що отримали.Дійсно, це зручно. Якщо тексту мало - він розміщується праворуч від
картинки. А якщо його стає багато, то він обтікає її, і що "не помістилися"строчки виводяться як завжди, починаючи
з лівого краю вікна.
Щоб зробити навпаки (картинка справа, текст зліва) треба прописати right:
<img src="pr1.png" align="right">
Але це не все: текст може розташовуватися
(1) - <img src="pr1.png" align="bottom"> внизу картинки (це за умовчанням)
(2) - <img src="pr1.png" align="middle"> посередині
(3) - <img src="pr1.png" align="top">вгор
Для тега <img> можна ввести ще декілька атрибутів:
(1) - <img src="pr1.png" vspace="10">
(2) - <img src="pr1.png" hspace="30">
(3) - <img src="pr1.png" alt="моя фотографія">
(4) - <img src="pr1.png" border="5">
Тепер послідують пояснення за пунктами.
(1) - атрибут vspace - задає відстань між текстом і малюнком (по вертикалі). Відстань задається в пікселях. У
нашому прикладі відстань рівна 10 пікселям.
(2) - атрибут hspace - теж задає відстань між текстом і малюнком, але по горизонталі. Відстань задається в
пікселях. У нашому прикладі воно рівне 30 пікселям (крапкам).
(3) - атрибут alt - короткий опис картинки. Якщо навести курсором миші на малюнок, і так потримати його
(курсор) декілька секунд, вискочить опис картинки. У нашому випадку це буде фраза - "моя фотографія".
(4) - атрибут border - рамка навколо самої картинки (у пікселях).
Крок 10ЗмістКрок 8

30. Крок 10. Що таке гіперпосилання.
Хто не знає, що таке гіперпосилання? На сторінках Internet їх бачили всі. Так чи не дасте визначення
цього явища? Непросто, правда? Гіперпосилання - це пряме з'єднання окремих точок в документі з іншими точками в тому ж самому
або іншому документах. У HTML термінології точку часто називають anchors (якір).
Існують два кінці зв'язку (якорі): зв'язок здійснюється від однієї точки до іншої. Остання, названа метою (target) зв'язку, часто є
початком документа. За допомогою посилань ми зв'язуємо документи. Так з головної сторінки по посиланнях ми можемо
перейти на сторінку з фотографіями, з цієї сторінки ми можемо перейти назад на головну сторінку, або, допустимий, на
сторінку з нашими віршами, і т.д. Посиланням на ці та інші документи може бути текст (фраза, слово), а може бути і картинка.
На цій сходинці ми розглянемо тільки текстове посилання.
Спершу створимо новий документ (у нашому прикладі Мої фотографії.htm) в тій же директорії, де знаходиться наш головний
документ index.html. Зміст документа вигадайте самі, у вас для цього вже достатньо знань.
Хай Мої фотографії.htm- документ з вашими фотографіями. Тоді ми можемо фразу “про мене" зробити посиланням на Мої
фотографії.htm:
<а href="Мої фотографії.htm">про мене</a>
Тег <a></a> робить посиланням укладену в нього картинку або фразу (текст). Принципи прописування шляху ми вже знаємо.
Для всіх посилань в нашому документі ми можемо прописати кольори: link - колір просто посилання, alink - колір активного
посилання (натиснутою), vlink - колір вже відвіданого посилання.
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD>
<BODY text=darkblue bgColor=mediumaquamarine>
<H3 align=center>
<B>Добрий день!</B> <I>Це моя перша
Web-сторінка.</I><BR></H3>
<IMG src="Крок.files/5.JPG" width=100 align=left >
<P align=justify><FONT face=Verdana color=red>На відміну від моїх однолітків, я
зовсім недавно познайомилася із Всесвітньою павутиною Інтернет,але вже
навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз,
коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю
сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою
можливостей мережі, я знайду нових друзів,і вони захочуть дізнатися
<A href="Мої фотографії.htm">про мене. </A>На жаль, якість не найкраща,
але в цілому, можна розгледіти мої риси характеру.</P></FONT>
</BODY></HTML> проглянути
Крок 11ЗмістКрок 9

31. Фраза, що є гіперпосиланням
Веб-сторінка на яку посилається зв’язок

32. Крок 11. Чи може картинка бути посиланням.
Як я вже згадувала, посиланням може бути і картинка. Принцип посилання той же, що і у випадку з текстом,
тільки в тег <a></a> вставляється не текст, а картинка:
<а href=" Мої фотографії.htm "><img src"Крок.files/5.JPG""></a>
Отже, зробимо посиланням картинку 5.JPG на документ з фотографіями (Мої фотографії.htm l):
<HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD>
<BODY text=darkblue bgColor=mediumaquamarine>
<H3 align=center>
<B>Добрий день!</B> <I>Це моя перша
Web-сторінка.</I><BR></H3>
<A href= "Мої фотографії.htm "><IMG src="Крок.files/5.JPG" width=100 align=left ></A>
<P align=justify><FONT face=Verdana color=red>На відміну від моїх однолітків, я
зовсім недавно познайомилася із Всесвітньою павутиною Інтернет,але вже
навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз,
коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю
сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою
можливостей мережі, я знайду нових друзів,і вони захочуть дізнатися
<A href="Мої фотографії.htm">про мене. </A>На жаль, якість не найкраща,
але в цілому, можна розгледіти мої риси характеру.</P></FONT>
</BODY></HTML> проглянути
Тепер подивитеся в броузері, що у нас вийшло. Картинка 5.JPG стала посиланням. Якщо ви відмітили (а якщо
не відмітили, то звернете увагу): навколо картинки з'явилася рамочка. Цю рамочку можна залишити, якщо
вам вона подобається, а можна прибрати, якщо ви задасте картинці атрибут border="0" (про нього ми вже
говорили з вами).
<img src="5.JPGf" align="left" hspace="30" vspace="5" border="0">
Але, якщо ваша картинка буде посиланням, то рамка навколо неї буде того кольору, який ми задали для
посилань в тегу body за допомогою link, vlink, alink, тобто атрибут bordercolor в цьому випадку вже не
впливає на колір рамки навколо картинки.
Крок 12ЗмістКрок 10

34. Крок 12. Списки.
Спискивизначають структуру документа. Візуально списки відображаються таким чином:
• Текст один
• Текст інший
Це називається маркований список. Існують ще і впорядковані списки:
1. Спочатку зробимо це.
2. Потім ми зробимо те.
Різні типи списків можна вживати одночасно один з одним. Марковані списки вводяться тегом <ul>…</ul>: Щоб ввести
елементи списку (текст один, текст інший) нам потрібно ввести в нашу конструкцію тег <li> (непарний):
У тега <li> є атрибут type, він відповідає за стиль елементу списку, візуально це виглядає так:
<Li type="disk"> зафарбоване коло (за замовчуванням)
<Li type="circle"> пусте коло
<li type="square">квадрат
Атрибут type може вводитися не тільки для кожного елементу списку <li>, але і для всього списку в цілому:
<ul type="square">
А тепер наведу вам приклади маркованих типів:
А зараз я розповім вам про свої улюблені речі.<br>
Квіти:
<UL>
<LI>Троянди
<LI>Волошки
</UL>
Тварини
<UL type=circle>
<LI >Кішки
<LI >Тигри
</UL>
Заняття
<UL>
<LI >Вишивання
<LI type=square>Розгадування головоломок
<LI type=circle>Прослухування музики</LI></UL> проглянути
На цьому з маркованими списками ми закінчили, тепер поговоримо про впорядковані списки.

36. Крок 12. Списки.
Впорядковані списки вводяться тегом <ol>:
<ol>
</ol>
Як і у випадку з маркованими списками, нам потрібно ввести в нашу конструкцію тег <li>
Для впорядкованих списків також може уживатися атрибут type. Для впорядкованих списків можливі наступні
значення атрибуту type:
1 арабські цифри 1, 2, 3 ...
а букви нижнього регістра а, b, с …
A букви верхнього регістра A, B, C ...
i римські цифри в нижньому регістрі i, ii, iii ...
I римські цифри у верхньому регістрі I, II, III ...
Розглянемо нумеровані списки на прикладі моєї веб-сторінки:
Музика
<OL> <LI>Гурт "Evanescence"
<LI>Avril Lavigne
<LI>Міка Newton
<LI>Віталій Козловський</OL>
Жанри літератури
<OL type=a>
<LI>Фентeзі
<LI>Містика
<LI>Триллери</OL> проглянути
ЗмістКрок 11

38. Тестові завдання
1. Що можна використовувати для проглядання HTML-сторінки?
а) Microsoft Word
б) Microsoft Internet Explorer
в) Microsoft FrontPage Express
r) HomeSite
д) Netscape Navigator
е) Opera
ж) Mozilla
з) Notepad
и) Windows
к) Linux
л) PhotoShop
м) Google.com
2. Що можна використовувати для проглядання коду HTML-сторінки?
а) Microsoft Word
б) Microsoft Internet Explorer
в) Microsoft FrontPage Express
r) HomeSite
д) Netscape Navigator
е) Opera
ж) Mozilla
з) Notepad
и) Windows
к) Linux
л) PhotoShop
м) Google.com

39. Тестові завдання
3. Як виглядатиме у вікні броузера наступний фрагмент HTML-сторінки?
Для того, щоб броузер сприймав вміст файлу як HTML-код, цей файл повинен мати розширення
<U><I>.htm</I> або <B>.html</B></U>:
а) Для того, щоб броузер сприймав вміст файлу як HTML-код цей файл повинен мати розширення .htm або .html
б) Для того, щоб броузер сприймав вміст файлу як HTML-код цей файл повинен мати розширення .htm або .html
в) Для того, щоб броузер сприймав вміст файлу як HTML-код цей файл повинен мати розширення .htm або .html
4. У якому випадку абзац буде вирівняний по лівому краю?
а) <Р align = center> Цей абзац вирівняний по лівому краю?
б) <Р align = left> Цей абзац вирівняний по лівому краю?
в) <Р align = right> Цей абзац вирівняний по лівому краю?
г) <Р align = justify> Цей абзац вирівняний по лівому краю?
д) <Р> Цей абзац вирівняний по лівому краю?
е) <Р align> Цей абзац вирівняний по лівому краю?

40. ЗмістЗміст
Список тегСписок тег
Від автораВід автора
ЗавданняЗавдання
НавчальнийНавчальний
посібникпосібник
УважаєміУважаємі
користувачі!користувачі!
Хочеться вірити, що цяХочеться вірити, що ця
програма допоможе вам легкопрограма допоможе вам легко
ознайомитися з мовоюознайомитися з мовою HTMLHTML іі
досягнути найвищих результатів.досягнути найвищих результатів.
УСПІХУ В А М ! ! !УСПІХУ В А М ! ! !