3. Вставка зображень
Важко знайти в WWW
сторінку, яка не мала б
зображень. Вставка
зображення на Web-сторінку
виконується одиночним
тегом <IMG>. Усередині
цього тегу обов'язково
записується атрибут src, що
вміщує URL зображення.
Назва цього атрибута
походить від слова source -
джерело.
4.
5. Для "співіснування" малюнка i тексту документа використовують теги:
малюнок з лівого краю, текст його обтікає справа:
<img src=“web.png" align="left">
малюнок з правого краю, текст його обтікає зліва:
<img src=" web.png" align="right">
Kpiм параметрів align, існують ще кілька параметрів:
відстань між текстом i мапюнком по горизонталі (тут 10 пікселів):
<img src=" web.png" Vspace="10">
відстань між текстом i малюнком по вертикалі (30 пікселів):
<img src=" web.png" Hspace="30">
опис малюнка (якщо встановити курсор миші на малюнок, через секунду
з'явиться вказаний текст - тут "моя фотокартка"):
<img src=" web.png" alt="моя фотокартка">
ширина малюнка (тут 100 пікселів):
<img src= " web.png" width="100">
висота малюнка (тут 200 пікселів):
<img src=" web.png" height="200">
рамка навколо малюнка (тут товщина лінії 5 пікселів):
<img src=" web.png" border="5">
6. Bci параметри можуть застосовуватися
одночасно один з одним, щоб запобігти
плутанини в їx застосуванні.
Наприклад, так:
<IMG src="web.png" border=2 align="left“
vspace=20 hspace=20 alt="малюнок“
width=15%>
7.
8. Створення списків
Список – це упорядкований перелік
елементів. Значки списку, символи або
цифри можна змінювати як звичайний
текст. Для цього використовується тег
<FONT> з атрибутами.
9. Ненумеровані або маркіровані списки
Список оформляється за допомогою тега <UL>…</UL>, які
позначають відповідно початок і кінець списку. Кожний елемент
списку починається з одиничного тегу <LI>.
<UL>
<LI> Перший елемент списку
<LI> Другий елемент списку
<LI> Третій елемент списку
.
<LI> n-й елемент списку
</UL>
Тег <UL> має атрибут TYPE, який визначає зовнішній вигляд маркерів.
Він може набувати значення:
disc – диск;
circle – коло;
square – квадрат.
10.
11. Нумеровані списки
Список оформляється за допомогою тега <OL>…</OL>, які позначають відповідно
початок і кінець списку. Кожний елемент списку починається з поодинокого тега
<LI>
<OL>
<LI> Перший елемент списку
<LI> Другий елемент списку
<LI> Третій елемент списку
.
<LI> n-й елемент списку
</OL>
Тег <OL> має атрибути:
TYPE – визначає тип нумерації.
Він може набувати значення:
А – великі латинські літери;
а – малі латинські літери;
І – римські цифри;
1 – арабські цифри (дане значення прийнято за замовчуванням);
START – задає, з якого порядкового номера починається нумерація у списку.
Значенням атрибуту є число.
Наприклад:
атрибут START=”4” означає список, у якого нумерація починається з пункту 4.
12.
13. Вкладені списки
Мова HTML дозволяє вкладати списки один в один. Це
можливо при виконанні двох умов:
перша – всі списки повинні бути різного типу;
друга – вкладень повинно бути не більше трьох.
14. ВІДСТУПИ
Для встановлення одного, двох i трьох
відступів використовується тег <ul> </ul> за
зразком:
<ul> один відступ </ul>
<ul> <ul> два відступи </ul></ul>
<ul> <ul><ul> три відступи </ul></ul></ul>
15. Список тлумачень
Список тлумачень використовують для пояснення
термінів, створення словників тощо. Його утворюють за
допомогою парного тега <DL>…</DL> і двох
одинарних тегів <DT> і <DD> так:
<LH>заголовок</LH>
<DL>
<DT>термін
<DD>тлумачення 1
<DD>тлумачення 2 ...
</DL>
16.
17. Використання спеціальних символів
У мові HTML символ < використовується як перший
символ кожної команди. Цей символ не може бути
використаний для позначення відношення “менше”.
Для відображення на екрані символа < (“менше”) і
деяких інших символів в HTML прийняті спеціальні
позначення:
Текст, що відображається Запис в формі HTML
< <
> >
& &
“ "
пробіл  
18.
19. Створення рядка, що біжить
<marquee>…</marquee> - рух тексту
справа наліво
Атрибути тегу Пояснення
height=“висота у пікселях” Висота смуги
bgcolor=“колір тла” Колір тла смуги
behavior=“alternate”
=“slide”
Відбивання від країв екрану
Зупинка рядка біля лівого краю
direction=“right” Рух у протилежний бік
loop=n
Обмеження кількості проходів, де
n-кількість
hspase і vspace Відцентрування смуги
scrollamount=n
Швидкість руху, де n-конкретне
значення з діапазону від 1
(повільно) до 10 (швидко)
20. Тег <pre> … </pre>
Застосування цього тегу дозволяє відобразити текст
як є, тими ж символами і з тим же розбиттям на рядки:
22. Мова HTML підтримує внутрішні і зовнішні
гіперпосилання. Якщо посилання здійснює
перехід у межах того самого документа, то
його називають внутрішнім. Такі посилання
звичайно застосовують у великих документах
для переміщення по розділах. Якщо
посилання забезпечує перехід до іншого
документа, розташованого на іншому Web-
вузлі, то це зовнішнє посилання.
23. Відправна точка посилання задається тегом <А>. Ім'я цього тегу
походить від першої літери слова anchor - якір. Сам елемент А
називається елементом прив'язки або якірним елементом. Усередині
тегу <А> ставиться обов'язковий атрибут href, за допомогою якого
визначається точка призначення посилання (цільовий ресурс). Між
тегами <А> і </А> розміщається текст посилання або елемент малюнка.
Так найпростіше посилання може виглядати як
<А href="rest.html">Moї канікули </А>
На Web-сторінці це посилання відображатиметься у вигляді тексту
"Мої канікули". При клацанні мишею по цьому посиланню буде
завантажуватися HTML-файл rest. html.
Зверніть увагу, що в атрибуті href зазначене лише ім'я файла, що
відповідає відносному посиланню на файл, який розміщений у тій
самій папці, що і вихідний документ. Якщо потрібно посилатися на
ресурс, розміщений у World Wide Web, то в атрибуті href указується
URL цього ресурсу, наприклад,
<А href=http://www.Samsung.com> Продукція фірми Samsung </A>
24. Параметри LINK, VLINK, ALINK тега
BODY
LINK = “колір” колір гіперпосилання
VLINK =”колір”
змінює колір гіперпосилання
після першого його
використання
ALINK =”колір”
змінює колір активізованого
гіперпосилання
25. Посилання в межах сторінки
Насамперед потрібно позначити місце на сторінці, куди
відбуватиметься перехід. Якщо з деякого місця перехід має
виконувати на початок сторінки, то в те місце html- файлу, що
відповідає точці посилання, вводять тег, який називається якорем:
<A NAME=“#початок”></A>
Аналогічно позначаються деяке місце в кінці файлу:
<A NAME=“#кінець”></A>.
Якір можна кинути в будь якому місці тексту так:
<A NAME=“#”></A>.
Тепер на сторінці розміщують гіперпосилання на створені позначки
(якори) так:
<A HREF= “#початок” або “#кінець” або “#моя
позначка”>
текст гіперплсилання </A>
28. Робота з таблицями
Таблиці будуються за принципом вкладення і вводяться на Web-
сторінку за допомогою ряду елементів. Кожна таблиця починається
тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця
ніби розгортається по рядках, а рядки заповнюються комірками. При
цьому всередину тегів <table>...</table> можуть вставлятися такі
елементи:
TR - елемент створення рядка;
TD - елемент, що визначає вміст комірки даних;
ТН - елемент, що визначає комірку заголовка.
TC – заголовок таблиці
Наприклад, для створення таблиці 3x2
використовується такий шаблон:
<TABLE>
<TR><TD>. . . </TD><TD>. . . </TD></TR>
<TR><TD>. . .</TD><TD>. . . </TD></TR>
<TR><TD>. . . </TD><TD>. . .. </TD></TR>
</TABLE>
29. Атрибути елемента TABLE
width задає ширину таблиці
align задає вирівнювання таблиці у документі
border
задає вивід рамок таблиці. Якщо значення
цього атрибута не визначено, наприклад,
<table border>, усі рамки матимуть товщину 1
піксель. Якщо ж значення задане (наприклад,
border=5), то товщина 5 пікселів буде тільки
для зовнішньої рамки. Товщина внутрішніх
рамок, як і раніше, дорівнюватиме 1 пікселю.
30. Атрибути елементів рядків і стовпців
width i height
установлюють розміри комірок рядка:
ширину і висоту. Ці атрибути можуть
використовуватися у тегах <TR>, <TD>
align
вирівнюють вміст у комірках і вводиться в
теги <TR> або <TD>. Цей атрибут може
набувати значень: left, right, center і justify
valign
вирівнюють вміст по вертикалі. Цей атрибут
застосовується з такими значеннями: top
(вирівнювання по верхньому краю комірок),
bottom (по нижньому краю), middle
(центрування по вертикалі). Наприклад, <TR
valign="middle"> призначає центрування по
вертикалі
31. Колір у таблицях
bgcolor
колір фону в таблиці. Залежно від того, до якого тегу
цей атрибут вводиться (<TABLE>, <TR>, <TH> або
<TD>), задаватиметься фон всієї таблиці, рядка,
комірки заголовка або даних. Наприклад, тег
<TABLE bgcolor = "red"> задає червоний фон всієї
таблиці, а тег <TD bgcolor="yellow"> задає жовтий
фон комірки даних
bordercolor
колір рамок таблиці. Якщо атрибут bordercolor
вставити в тег <TABLE>, то він діятиме, коли в
таблиці є рамки, тобто за наявності атрибута border.
Якщо ж потрібно задати колір лише визначених
комірок, атрибут bordercolor розташовуємо в тегах
<TR>, <ТН> або <TD>. Наприклад, тег <TR
bordercolor="FFOOOO"> задає червоні межі всіх
комірок рядка
32. Об'єднання комірок таблиці
rowspan
об'єднує комірки суміжних рядків. Значення
атрибута задає кількість об'єднаних комірок.
Наприклад, початковий тег комірки <TD
rowspan=2> встановлює об'єднання двох
комірок із суміжних рядків
colspan
об'єднує комірки суміжних стовпців.
Наприклад, <TD colspan=3> формує одну
комірку даних із трьох комірок суміжних
стовпців
33.
34. Поняття про фрейми
Фрейм (у перекладі з англійської) означає кадр, рамка, прямокутна
область. Фрейми поділяють вікно броузера на частини, в яких
відображають зміст сторінок сайту. Кожній сторінці має відповідати
свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Для поділу вікна броузера на декілька частин використовують
тег-контейнер
<FRAMЕSET параметри>… </ FRAMESET>
Параметрів є два: COLS і ROWS. Параметр COLS призначений
для поділу вікна на вертикальні області (колонки), а ROWS – на
горизонтальні. Розміри областей задають у відсотках до всього вікна,
фіксовані – у пікселях. Наприклад, COLS = “25%, 75%” означає, що
лівий фрейм займатиме чверть вікна на будь-якому моніторі.
Можна писати також COLS = “1*, 3*”, де 1* саме тут означає одну з
чотирьох частин екрана, або COLS = “2*,3*”, де 2* означає дві з п’яти
вертикальних частин екрана.
У фіксованому заданні COLS = “ 100,*”, число 100 означає 100
пікселів, а * - решту екрана.
35. Більш складні конфігурації фреймів створюють шляхом поділу на
фрейми деякого раніше створеного фрейму. У цьому випадку теги
FRAMESET вкладають один в одний, наприклад, так:
<FRAMESET COLS = “25%, 75%”>
<FRAME описує лівий фрейм>
<FRAMESET ROWS = “25%, 75%>
<FRAME описуємо верхній правий фрейм>
<FRAME описує нижній правий фрейм>
</FRAMESET>
</FRAMESET>
у тезі <FRAME параметри> користувач описує конкретний
фрейм. Обов’язковими тут є параметри SRC зі значенням адреси
стартового html-файлу і NAME, значенням якого є назва фрейму. Цю
назву придумує користувач, запам’ятовує її, оскільки вона
використовується далі як значення параметра TARGET тега <А>.
36. Призначення деяких параметрів:
SCROLLING
задає наявність чи відсутність смуг
прокручування у вікні фрейму
FRAMEBORDER задає наявність меж між фреймами
BORDER задає ширину межі у пікселях
MARGIN
задає величину відступів зверху і від
бокових меж фрейму
NORESIZE
забороняє змінювати розміри фрейму
у вікні броузера
40. Графічна навігаційна панель – це рисунок, окремі
частини якого, так звані гарячі області, слугують
гіперпосиланнями на відповідні сторінки сайту.
Різновидом такої панелі є навігаційна карта.
Для створення навігаційної карти можна взяти за
основу відскановану фотографію чи векторний рисунок з
зображенням декількох осіб чи об’єктів, клацання над
якими мишею веде до відкривання відповідних сторінок
сайту. Рисунок із зображенням кнопок чи просто
тексту на деякому тлі можна створити засобами
графічного редактора. Клацання мишею над окремими
елементами такого рисунка-карти активізує те чи інше
гіперпосилання.
41. Опис навігаційної картиОпис навігаційної карти
Спочатку потрібно створити відповідний рисунок
за допомогою графічного редактора у формі gif, jpg чи bmp.
Приклад1. Розглянемо карту Мій сайт
Рисунок створено редактором Paint
з метою демонстрації суті карти.
Верхній лівий кут рисунка має координати (0,0).
Перша координата горизонтальна,
а інша – вертикальна. Одиниця вимірювання – піксель.
Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами
(80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55
пікселів. Він однозначно описується координатами двох діагонально
протилежних вершин: (20, 175) і (150, 230). Прямокутник з текстом
Навчання однозначно задається координатами (20, 260) і (150, 310), а з
текстом Адреса – (20, 340) і (150, 390). Створений графічний файл
розташовують на диску і описують його у html- файлі web- сторінки за
допомогою тега <IMG>. Цей тег має містити, крім уже відомих, новий
параметр USEMAP= “#назва1”, де назва1 – це назва карти. Наприклад,
<IMG SRC=“назва графічного зображення”
USEMAP = “#mymap1”>.
Мій сайт
Фото
Біографія
Навчання
Адреса
42. Тепер опишемо, як створити карту. Це роблять за допомогою тега
<MAP параметр>…</MAP>
У середині цього тега описують гарячі області карти. Тут
застосовують параметр NAME, значенням якого є назва карти, у
нашому випадку - #mymap1.
Гарячі області карти. У середині тега - контейнера <MAP>…
</MAP> розташовують декілька одинарних тегів <AREA
параметри>, що описують замкнені області карти, які мають
служити гіперпосиланнями. Власне ці області називають
гарячими. Для їхнього задання призначені такі параметри тега
<AREA>:
HREFHREF = “адреса ресурсу, який викликають”= “адреса ресурсу, який викликають”
ALTALT = “альтернативний текст-підказка”= “альтернативний текст-підказка”
SHAPESHAPE = “= “rectrect” або “” або “circlecircle” або “” або “polypoly” або “” або “defaultdefault””
COORDSCOORDS = “список координат області”= “список координат області”
43. Гарячою областю може бути область, охоплена
прямокутникомпрямокутником (rect), або коломколом (circle), або
багатокутникомбагатокутником (poly), або все зображеннявсе зображення
(default). Список координат для прямокутника –
це записані через кому координати діагонально-
протилежних вершин, для кола – координати
центра і значення радіуса, для багатокутника –
координати всіх вершин.
Координати гарячих і холодних областей
достатньо задавати приблизно, а не точно,
головне, щоб області не перекривались.
45. Таблиці стилів дають змогу спростити процес створення
сторінок і поліпшити їхній зовнішній вигляд. Концепція
стилів подібна до ідеї стилів, яка реалізована в сучасних
текстових редакторах – текст спочатку вводять, а потім
форматують, користуючись стилями. Застосування стилів дає
змогу вводити на сторінку потрібні тексти та інші елементи,
не задумуючись над їхнім зовнішнім виглядом і
розташуванням.
Таблиці стилів користувач зазвичай створює окремо від
html- файлу. Під час створення html- файлу він концентрує
увагу на змісті сторінки, а не на її зовнішньому вигляді, а під
час створення таблиці стилів – навпаки. Отже, стилі дають
змогу розмежувати етапи створення html-файлу й
удосконалення зовнішнього вигляду сторінки.
46. Розглянемо три способи такої взаємодії:
1)зв’язування,
2)імпортування,
3)вбудовування.
1.Зв’язування.1.Зв’язування. Таблицю стилів створюють і зберігають в окремому
текстовому файлі з розширенням css. Таку таблицю стилів
називають зовнішньою. Щоб зв’язати основний файл з таблицею
стилів, у середині тега <HEAD> застосовують одинарний тег
<LINK> з інформацією про таблицю:
<HEAD>
<LINK HREF = “адреса таблиці стилів”
TYPE = “text/css”
REL = “stylesheet”
TITLE = “назва таблиці стилів”>
</HEAD>
Параметри TYPE і REL мають наведені вище стандартні
значення, які означають, що деяка таблиця стилів буде створена
мовою CSS як текстовий файл.
47. 2.2. Імпортування.Імпортування. Це те ж саме, що і зв’язування, але
взаємодію файлів забезпечують засобами тегу <STYLE> і
команди @import URL (“адреса таблиці стилів”
3.3. Вбудовування.Вбудовування. Якщо таблицю створено лише для
деякого конкретного html- файлу, то її розташовують у
цьому файлі за допомогою тега-контейнера <STYLE>. Це
звужує рамки застосування таблиці, але суттєво прискорює
функціонування сторінки. Таку таблицю стилів називають
внутрішньою або вбудованою. Таблицю стилів можна
застосувати або до всього файлу, або до його частини, або
до окремого тега.
48. Якщо дизайнер для створення сторінки застосовує
декілька таблиць стилів, то такі таблиці називають
каскадними.
Каскад – це впорядкована послідовність таблиці
стилів. У такі однотипні стилі з таблиць, які
розташовані ближче до початку послідовності, мають
більший пріоритет. Саме ця властивість дає змогу легко
змінювати зовнішній вигляд сторінки і з декількох
альтернатив вибирати найліпшу методом зміни
послідовності описів таблиць стилів.
49. Таблиця стилів – це текстовий файл, який створюють за
допомогою мови CSS – Cascading Style Sheets – чи іншої.
Є спеціальні програми, наприклад, AceExpert чи FrontPage
тощо, які дають змогу створювати досить складні таблиці стилів
навіть без знання цієї мови. Зазвичай таблицю стилів створюють
засобами текстового редактора, наприклад NotePad, як текстовий
файл і дають йому деяку назву з розширенням css.
Таблицю стилів складається з правил, а правило – з назви тега
чи списку назв тегів і описів стилів, які діятимуть у межах цих
тегів деякого html- файлу.
Опис стилю - це послідовність пар
<властивість>:<значення>,
які записують через крапку з комою та охоплюють фігурними
дужками.
50. Загальний вигляд правила такий:Загальний вигляд правила такий:
Список тегів {властивість 1: значення 1;
властивість2: значення2;
... ;
властивість N: значення N;}
Приклад правила для одного тега:
P{color:red}.
Браузер відтворить на екрані тексти всіх абзаців червоним
кольором.
Приклад складнішого правила для списку тегів:
H3, LI { color:green; font-family:pragmatica;
Font-size:16px; text-align:left;
Border-style: ridge; border-width:2mm}
Браузер виведе всі заголовки третього рівня H3 і
елементи списків LI зеленим кольором, шрифтом Прагматика
розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить
рамкою товщиною 2 мм з видавленим контуром (ridge).
51. Імена властивостей складаються з одного чи декількох англійськихІмена властивостей складаються з одного чи декількох англійських
слів, що записуються через риску. Властивість діє лише в межахслів, що записуються через риску. Властивість діє лише в межах
тега, зазначеного у відповідному правилі.тега, зазначеного у відповідному правилі.
Властивість Значення Пояснення
Background-
attachment
Fixed
scroll
Тло фіксоване
Тло прокручується
Background-color Red, green, #ffcc55 Колір тла
Background-image URL (“адреса графічного файлу для тла”)
Background-repeat Repeat, repeat-x, repeat-y, no-repeat Повторює зображення
Border-color Red, green, #ffcc55 Колір рамки
Border-style
None, dotted, dashed, solid, double,
groove, ridge, inset, outset
Стиль рамки
Border-widht 2mm, 3mm Товщина рамки
Font-family
Arial, “Times New Roman Cyr”,
Serif
Назва шрифта
Font-size 12pt, 16pt Розмір шрифта
Font-style Normal, oblique, italic Вигляд курсивів
Font-variant Small-caps Вигляд шрифта
Font-weight Normal, bold, bolder Жирність шрифта
Word- spacing 1mm, 2mm Відстань між словами
Letter- spacing 1mm Відстань між символами
52. Line-height 2mm, 4mm Відстань між рядками
Text-align Left, right, center, justify Вирівнювання тексту
Text-decorate
None, underline, overline,
linethrough, blink
Оформлення тексту
Text-indent 2cm Абзацний відступ
Margin-top 4mm тощо Відступ з верху
Margin-right 4mm тощо Відступ справа
Margin-bottom 4mm тощо Відступ знизу
Margin-left 4mm тощо Відступ зліва
Padding- top 2mm тощо Величина вільного
простору між стороною
рамки і елементом у
рамці
Padding- right 2mm тощо
Padding- bottom 2mm тощо
Padding- left 2mm тощо
Height 4cm тощо Висота елемента
Width 14cm тощо Ширина елемента
Float Nome, left, right Обтікання об’єкта текстом
Color Red, green, #ffcc55 Колір елемента
Verticai-alligh Top, super, middle, sub, bottom Вертикальне вирівнювання
List-style-image URL (“адреса графічного маркера списку”)
List-style-position Inside, outside Позиція маркера
List-style-type
Disc, circle, square, decimal, lower-
roman, upper-roman, lower-alpha,
upper-alpha, none.
Вигляд маркера (диск, круг,
квадрат, арабські цифри, малі чи
великі римські тощо)
53. Теги <STYLE>, <DIV> і <SPAN>:
Внутрішні таблиці стилів описують у головному файлі в
контейнері тега <HEAD>...</HEAD> за допомогою тега-
контейнера <STYLE> ... </STYLE>.
Приклад 1. Розглянемо головний файл з описом стилів:
<HTML>
<HEAD>
<ТІТLЕ> Застосування стилів </ТІТLЕ>
<STYLE TYPE="text/css">
тут записують правила </STYLE> </HEAD>
<BODY>...</BODY>
</HTML>
