HTML
Вступ
[ред.]Одного разу я побачив книжку по Web-дизайну, а, оскільки я мав звичку читати все що бачу, то я її прочитав. І з того часу вважав, що знаю HTML. Але недавно, мені сказали адресу одного хорошого сайту www.w3schools.com. Символи “w3″ в назві сайту означають “три w”, або “www”. Що важливого я там дізнався? По-перше, що мої знання дещо застарілі. По друге, що те що мої теги розпізнає браузер, ще не значить, що так буде тривати і далі. Тому я вирішив написати сучаснішу українську книжку про веб-дизайн.
Постараюся описати все якомога доступніше і згідно з новими тенденціями. Бо консерватизм – це ніщо інше, як лінь вчити щось нове. Але коли ви не вчите нове, ви відстаєте. А відставання в сучасному світі недопустиме. Тому тут будемо розглядати HTML 4.01.
Насправді найсучаснішою версією HTML вже стає HTML5, тому краще зразу читати про нього.
Як годиться варто почати з означень. HTML (Hyper Text Markup Language) – значить мова розмітки гіпертекстових сторінок. Навіть не вважається мовою програмування, але кожен програміст, що себе поважає, має її знати. Бо без неї вчити JavaScript, чи PHP нема сенсу.
Чим відрізняється стандарт HTML 4.01 від попередніх HTML? Спочатку коротенька історія. Існує така організація W3C (World Wide Web Consortium). Суть її роботи добре виражена в їхньому гаслі “Leading the Web to Its Full Potential…” (“Приведемо всесвітнє павутиння до його повних можливостей”). Судячи з того що вони вже зробили, люди розумні і свою роботу знають. І коли вони кажуть, що в майбутньому браузери не будуть підтримувати старі версії HTML, то воно напевне так і буде. А нові браузери з’являються не так вже і рідко. Коли W3C створювали стандарт HTML, в ньому не передбачалося тегів для форматування гіпертексту. Теги показували тільки структуру документа, наприклад:
<h1>Це заголовок</h1>
<p>Це абзац</p>
Але потім розробники браузерів почали додавати в HTML свої теги, які їм подобались. Наприклад:
<marquee>Біжучий рядок, який за чутками вміє відображати лише IE<sup>*</sup></marquee>
IE* – давайте звідси і далі так будемо називати Internet Explorer. А про фразу вище – брехня. FF (Firefox) щойно нормально вивів той нещасний рядок. Але все одно, краще такими тегами не користуватись.
Так само небажаною була поява в стандарті HTML 3.2 тегу <font>. Уявіть собі, що потрібно написати сторінку, де всі заголовки червоні. І доводиться крім тегів заголовку писати ще тег шрифту з атрибутом кольору.
Прихід четвертої версії розділяє форматування тексту і його структуру. Тепер в HTML сторінці зберігаємо тільки структуру документа (різнорівневі заголовки, абзаци, цитати, списки), а все що відноситься до форматування описуєтся в CSS. Це зручно, бо дозволяє швидко міняти оформлення всього сайту зміною лише файлу з стилем, і крім того зменшує довжину коду, який потрібно написати. Крім того, HTML 4.01 дозволяє швидко переходити до XHTML – HTML сумісний з XML. XML – простіше обробляти різними програмами ніж HTML.
Структура сторінки
[ред.]До роботи!
[ред.]Найкращий спосіб навчитись щось робити – зробити це. Не вийде – вчитись далі. А вийде – значить ви вже навчились. :)
Для того щоб вивчити HTML, окрім читання цього підручника нам потрібно мати:
Оскільки ви читаєте цей текст, дві перші речі в вас точно є. Текстовий редактор також є на кожному комп’ютері. Важливо зауважити: нам потрібна програма для редагування текстових файлів, а не документів. Зазвичай стандартного текстового редактора вашої ОС (наприклад gedit у GNOME, KEdit у KDE, блокнота Windows) достатньо, але є текстові редактори, які краще пристосовані до написання HTML-сторінок. Непоганий редактор для Windows Notepad++, в якому добре писати не тільки HTML, а і CSS, PHP, C++, і ще кілька десятків інших мов. В ньому є така хороша річ, як підсвітка синтаксису, яка дозволяє виявляти помилки прямо під час їх створення :). Якщо ж у вас Linux, тоді ви точно знаєте, що таке хороший текстовий редактор.
Про браузер також варто сказати дещо. Всі радять тримати в себе на комп’ютері набір браузерів (IE, Firefox, Opera, Chrome) і переглядати свої сторінки у всіх зразу. Щоправда, функції тегів в різних браузерах відрізняються не сильно (в ідеалі взагалі не відрізняються). Тому вчитись можна переглядаючи свої сторінки в одному, а вже коли пишете щось велике — подивіться чи не має надто критичних відмінностей у всіх інших.
Щоб створити веб-сторінку, потрібно створити в файловій системі текстовий файл з розширенням html, або htm. Яке з них вибрати – філософське питання. htm – скорочення від html, що є доволі смішним фактом, оскільки html це теж скорочення. Але були часи, коли в деяких ОС розширення файлу могло містити максимум 3 символи, і сторінки гіпертексту мали розширення htm. Тепер можна використовувати обидва розширення.
Вміст веб-сторінки
[ред.]Веб-сторінки складаються з гіпертексту. Гіпертекст відрізняється від звичайного тексту тим, що містить гіперпосилання. Вони зазвичай позначені підкресленням і синім кольором, і дозволяють зробити гіперстрибок в інший всесвіт гіпертекст, чи будь-яке інше місце, вказане за допомогою URL. Гіпертекст складається з тегів.
URL (Universal Resource Locator) – адреса ресурсу, яку ми бачимо в адресному рядку браузера.
Тег – все що знаходиться між кутніми дужками. Наприклад <html>.Теги не відображаються браузером, вони лише задають структуру тексту. Теги бувають трьох видів: відкриваючі, закриваючі і одинарні. Відкриваючі і закриваючі теги завжди ходять парами. Закриваючий відрізняєтся від відкриваючого тим, що після знаку менше < стоїть знак слеш (чи ділення) /. Пара закриваючого і відкриваючого тега виглядає так: <html></html>. Одинарні теги – річ суперечлива, і я їх розгляну пізніше
Важливо знати, що починаючи з версії 4.01 всі теги мають бути написані маленькими буквами.
Елемент гіпертексту – це все що знаходиться між відкриваючим і закриваючим тегом. Елементи бувають вкладені.
Наведу приклад коду веб-сторінки:
<html>
<head>
<!-- Заголовочна інформація, наприклад: -->
<title>Назва сторінки (відображається в рядку заголовку браузера)</title>
</head>
<body>
Вміст сторінки.
</body>
</html>
Всі теги які зустрічаються вище є обов’язковими. Вони присутні в кожній сторінці в інтернеті. Звісно, якщо ви якийсь із них забудете, браузер якось розбереться, але всі серйозні люди такі речі не забувають. Тег html каже браузеру що в ньому міститься код HTML. Тег head, каже що в ньому міститься заголовочна інформація сторінки. Ця інформація на самій сторінці не відображається. Тег title, як вже було сказано, містить заголовок, який відобразиться в рядку заголовку. body містить тіло, або вміст сторінки.
Окрім тегів і тексту, гіпертекстові сторінки можуть містити коментарі. Коментарі виглядають так: <!-- Коментар -->. Вони дозволяють писати на сторінці текст, який не відображається браузером. Це потрібно для вставки повідомлень типу <!-- Тут не забути дописати абзац про коментарі -->.
Ще існує поняття спеціальних символів. Наприклад, ви напишете таку сторінку:
<html>
<head>
<title>З чого починається сторінка</title>
</head>
<body>
Кожна сторінка HTML починається з тегу <html>.
</body>
</html>
Така сторінка відобразиться браузером неправильно, через те, що браузер не виводить теги. А html – тег. Така сама проблема і з символами порівняння. Тому, щоб відображати деякі нестандартні символи, існує поняття спеціальних символів. Спеціальні символи в HTML описуються так: &код;. Наприклад:
| Назва | Код | Вигляд |
|---|---|---|
| Менше | <
|
< |
| Більше | >
|
> |
| Амперсанд | &
|
& |
Тут я вказав тільки най-найпотрібніші. Якщо вам потрібно більше, вам треба пошукати. Можна пошукати десь тут. Тобто те що ми хотіли описати в попередньому прикладі мало виглядати так:
<html>
<head>
<title>З чого починається сторінка</title>
</head>
<body>
Кожна сторінка HTML починається з тегу <html>.
</body>
</html>
Теги форматування
[ред.]Тепер перейдем до форматування тексту. Форматування задає не так зовнішній вигляд, як структуру сторінки. Найважливішими тегами форматування є абзаци (англ. paragraph) і заголовки (англ. header). Заголовки бувають шести рівнів. Заголовки першого рівня найголовніші і найбільші, а заголовки шостого рівня навіть менші ніж текст абзаців. Нижче приклад використання заголовків:
<html>
<head>
<title>Володар перстенів</title>
</head>
<body>
<h2>Пролог</h2>
<h3>Про гобітів</h3>
У цій книзі йтиметься здебільшого про хобітів, і з її сторінок читач довідається чимало про їхню ...і т. д.
<h1>БРАТСТВО ПЕРСНЯ</h1>
<h2>КНИГА ПЕРША</h2>
<h3>I Довгоочікувана гостина</h3>
<h3> ...і т. д.</h3>
<h3>XII Втеча до броду</h3>
<h2>КНИГА ДРУГА</h2>
<h3> ...і т. д.</h3>
</body>
</html>
Я тут пишу і пишу приклади. Не забувайте пробувати щось самі! Або хоча б принаймі подивіться, як будуть виглядати приклади сторінок, які вам даються у вашому браузері.
Тепер ще один маленький приклад, який стосується форматування:
<html>
<head>
<title>Вдаряй мечем</title>
</head>
<body>
Вдаряй мечем,
Вдаряй, вдаряй,
Великий Комтуре Закона,
Щоб з нього честь
Була для нас,
А для Вкраїни оборона!
</body>
</html>
На жаль, браузери відкидають всі символи переносу рядка, табуляції і навіть зайві пропуски. Тому цей віршик відобразиться в один або кілька рядків (залежно від ширини вікна). Але є вихід.
Можна кожен рядок вірша помістити в окремий абзац. Щоправда зазвичай між абзацами великі білі поля. Тому можна використати одинарний тег <br />. Цей тег означає перехід на новий рядок, тобто обрив (break) старого.
Тут варто вставити зауваження. Всі теги ходять парами відкриваючий – закриваючий. Між ними містяться елементи гіпертексту. Але тег обриву рядка не містить нічого. Тому він пари і не має. Але найновіші стандарти вимагають, щоб всі теги закривалися. Щоправда врахувавши наявність тегів подібних до br, придумали скорочену форму запису. Він ніби відкривається, а потім зразу закривається. Це здається досить дивним. Звісно можна писати і в старому форматі: <br>;. Але краще мати код, який відповідає найновішим стандартам.
І ще один спосіб – взяти увесь вірш в теги
. Увесь текст поміщений між цими тегами відображається точно так само, як його видно в редакторі. Правда цей тег також змінює шрифт тексту на якийсь моноширинний. Але зате ми можемо робити з текстом цікаві речі:
<html>
<head>
<title>Long Tail</title>
</head>
<body>
It is a long tail, certainly,' said Alice, looking down with wonder at the Mouse's tail'
`but why do you call it sad?' And she kept on puzzling about it while the Mouse was speaking,
so that her idea of the tale was something like this:--
<pre>
`Fury said to a
mouse, That he
met in the
house,
"Let us
both go to
law: I will
prosecute
YOU. --Come,
I'll take no
denial; We
must have a
trial: For
really this
morning I've
nothing
to do."
Said the
mouse to the
cur, "Such
a trial,
dear Sir,
With
no jury
or judge,
would be
wasting
our
breath."
"I'll be
judge, I'll
be jury,"
Said
cunning
old Fury:
"I'll
try the
whole
cause,
and
condemn
you
to
death."</pre>
</body>
</html>
Ще трохи про теги зміни шрифту. Шрифт може мати три додаткові атрибути жирність (bold), курсивність (italic) і підкреслення (underlined). Вони змінюються за допомогою тегів: <b>, <i> та <u> відповідно.
Правда замість тегу <b> рекомендують використовувати тег <strong>. Окрім того існує ще така властивість як викресленість. Колись вона задавалася тегом <s>, що означало strikeout. Але знову ж таки в сучасному світі слова не викреслюють, їх видаляють, тому в порядку модернізації використовують тег <del>.
Школа w3 навпроти тегів <u>,<s> і <strike> пише “deprecated”, що перекладається у нас як «застарілі», дослівно ж слово deprecate означає: “сильно заперечувати, виступати проти, протестувати”. Хто протестує не сказано, але скоріше за все Консорціум трьох дубль-ве. Замість тегів викреслення рекомендують використовувати тег видалення. А замість тегу підкреслювання – стилі.
Крім тегу видалення ввели тег вставки. Тег вставки вказує текст який вставили після видалення. Виглядає така річ приблизно так:
2 + 2 = <del>5</del> <ins>4</ins>
При чому текст в тезі <ins> буде підкреслений. (А хлопці з w3schools казали використовувати стилі. Хм.)
Далі опишу всі теги в таблиці, бо мені вже набридло тут про них розказувати, а вам певне набридло читати.
| Тег | Приклад | Вигляд | Опис |
|---|---|---|---|
| b | <b>текст</b> | текст | Задає жирний текст |
| big | <big>текст</big> | текст | Задає великий текст |
| em | Задає наголошений текст. (empharized) | ||
| i | Задає курсивний текст | ||
| small | Задає маленький текст | ||
| strong | Задає сильний текст. Виглядає майже так само, як і жирний | ||
| sub | Задає текст в нижньому індексі | ||
| sup | Задає текст в верхньому індексі | ||
| ins | Задає текст, який вставляється після видалення. Зазвичай підкреслений. | ||
| del | Задає текст, який видалений (виглядає викресленим) | ||
| code | Задає текст, який представляє комп’ютерний код. | ||
| kbd | Задає текст, який введений з клавіатури. | ||
| tt | Задає текст, який виглядає так, ніби введений з телетайпа. (Моноширинний шрифт) | ||
| samp | Задає текст, який є прикладом. (sample). Майже як приклади в цьому тексті. | ||
| var | Задає текст, який представляє змінну. Напевне для всяких наукових статтей | ||
| pre | Задає текст, який зберігає всі символи форматування, такі як табуляції, пробіли, і переноси рядків. | ||
| abbr | Задає текст абревіатури. В атрибуті title можна записати розшифрування. | ||
| acronym | Задає текст акроніму. Акронім і абревіатура – це одне і те саме. | ||
| address | Задає текст адреси. Відображається курсивом | ||
| bdo | Дуже веселий тег. Для тих хто пише івритом. В в атрибуті dir можна задати напрямки тексту. “rtl” – зправа наліво, “ltr” – зліва направо. | ||
| blockquote | Задає текст великої цитати. | ||
| q | Задає текст маленької цитати. | ||
| cite | Задає текст якоїсь класичної цитати. Щось на зразок “Хто ясно мислить, той ясно формулює” | ||
| dfn | Задає термін для якого буде дане визначення. (definition) |
Ну з структурою гіпертексту думаю ми розібрались, можна тепер переходити до речей глобальніших.
А тепер послухаємо музику
[ред.]Тег <BGSOUND> вказує на музичний файл, який буде програватися на веб-сторінці при її відкритті. Звук, час звучання музики та інші характеристики вказуються за допомогою параметрів тега, а також можуть керуватися через скрипти. Цей тег повинен розміщуватися тільки в середині тега <HEAD>.
Щоб вказати файл, який буде програватися, потрібно написати так:
<bgsound src="Example.mid" loop="3" volume="-1000" balance="3000">
Параметри:
- src вказує шлях до музичного файлу.
- loop встановлює, скільки разів буде програватися музика. За замовчуванням програєтся 1 раз.
- volume задає звук звучання музики на сторінці. За замовчуванням — 0. Гучність — ціле число від -10000 до 0. Нуль — максимальний рівень. Чим більше значення цього параметра, тим тихіше звучить музика.
- balance регулює гучність звучання в лівій і правій колонках.
Лінки
[ред.]Атрибути
[ред.]Деякі теги мають властивості, які називаються атрибутами. Наприклад майже кожен тег має атрибут title. В ньому прописується текст підказки яку видно, коли користувач наводить курсор на елемент тегу. Хай нам потрібно написати відоме скорочення: HTML. І щоб коли користувачі наводять на нього курсор, вони могли його розшифрувати. Це робиться просто:
<html>
<head><title>Абревіатура</title></head>
<body>
<abbr title="Hypertext Markup Language">HTML</abbr>
</body>
</html>
Тут ми бачимо, як правильно записувати атрибути. Назва атрибуту, потім знак рівності і значення в подвійних лапках. В стандарті HTML 4.01 немає атрибутів без значень.
Краще писати всі атрибути і їх значення маленькими буквами.
Нащо?
Заради майбутнього! (Бо так вимагає HTML 4.01)
Посилання
[ред.]Як я вже казав, основною властивістю, яка відрізняє нормальний текст і гіпертекст, є гіперпосилання. Гіперпосилання створюються за допомогою тегу <a> з атрибутом href, який приймає значення потрібного нам URL. Наприклад, потрібно створити сторінку, яка містить посилання на цю статтю. Це може виглядати приблизно так:
<html>
<head><title>Посилання</title></head>
<body>
Тут можна знайти матеріали про web-дизайн:
<a href="http://uk.wikibooks.org/wiki/HTML">uk.wikibooks.org</a>
</body>
</html>
Тепер на сторінці напис uk.wikibooks.org стане гіперпосиланням.
Зазвичай сторінки в інтернеті не сидять самотньо. Вони розміщуються купками, які називаються сайтами. Сайт – це за моїм визначенням набір сторінок та інших файлів, які мають спільну частину URL. Наприклад, всі сторінки, які починаються на http://www.microsoft.com належать до одного сайту однієї маленької комп’ютерної фірми. Далі йде символ “/”, і адреса продовжується.
Можна зробити в себе на комп’ютері маленьку модель сайту. Для цього потрібно створити новий каталог, в якому будемо розміщувати файли. Потім в каталозі розмістити файл index.htm. Якщо є якесь посилання на ваш сайт, без вказівки, який конкретно файл завантажувати, то буде завантажений саме index.htm. Далі ми можемо створити ще одну папку всередині нашої. Нехай вона називається subdir. Якщо в ній розмістити файл іndex.htm, то щоб перейти до нього потрібно буде написати: “www.ваш_сайт.com/subdir/”.
При звертанні до каталогу завжди в кінці додавайте слеш. Якщо ви не будете додавати слеш, то сервер буде змушений виконувати два запити. Спочатку ваш, без слеша. Потім, коли він розбереться що то запит до каталога, він згенерує свій запит, з слешем, і вже його виконає.
Крім гіпертекстових сторінок на сайті можна розміщувати будь-які інші файли. Тоді після клацання по посиланню буде з’являтись стандартний діалог завантаження, який може виглядати наприклад так:
Наприклад, якщо ви співак і хочете поділитись своїми піснями з іншими, ви можете покласти в папку з сайтом файл track1.mp3, а в файлі index.htm написати:
<html>
<head><title>Моя музика</title></head>
<body>
Я щойно записав новий трек. Ви можете <a href="track1.mp3">скачати його тут.</a>
</body>
</html>
Якщо файли знаходяться в одному каталозі, то в атрибуті href достатньо написати назву файлу, щоб зробити посилання. Якщо ж ми маємо файли “site/1.htm” і “site/subdir/2.htm”, то щоб з першого зробити посилання на другий, а з другого на перший, треба написати href="subdir/2.htm" і href="../1.htm" відповідно. Такі адреси називаються відносними. Дві крапки означають “той каталог що вище”. Відносні адреси добрі тим, що коли ми перейменовуємо папку “site”, чи міняємо хостинг їх не потрібно змінювати.
Але цим можливості тегу <a> не вичерпуються. a – скорочено від anchor – що значить якір. За допомогою тегу <a> можна ставити в гіпертекстовому документі якорі, або говорячи простіше закладки, які дозволяють переходити в певне місце документа. Це особливо корисно, коли документ великий, і потрібно швидко переходити в ньому до певного розділу. Для цього існує атрибут id.
Щоб довго не пояснювати знову наведу приклад:
<html>
<head><title>Моя музика</title></head>
<body>
<h1>Зміст</h1>
<a href="#part1"><h2>Частина 1</h2></a>
<a href="#part2"><h2>Частина 2</h2></a>
<a href="#part2"><h2>Частина 2</h2></a>
<h1 id="part1">Частина 1</h1>
<p>Багато тексту</p>
<h1 id="part2">Частина 2</h1>
<p>Багато тексту</p>
<h1 id="part3">Частина 3</h1>
<p>Багато тексту</p>
</body>
</html>
Коли ми робимо гіперпереходи в межах одної сторінки, то в атрибуті href просто пишемо знак шарпа (“#”), і назву закладки (те що написано в атрибуті id). А коли робимо перехід на закладку в іншій сторінці, то спочатку пишемо адресу сторінки, потім додаємо знак шарпа і закладку. Коли випадково робиться перехід на закладку якої не існує, нічого страшного не відбувається. Ми просто попадаємо на початок сторінки, як при звичайному переході.
Взагалі то w3cschools писали про атрибут name, але крім того вони писали, що скоро цей атрибут буде відкинуто і замінено на id. Тому думаю краще використовувати новіший, і вдвічі коротший варіант. А чим коротша сторінка, тим швидше вона завантажиться :)
Найчастіше сторінки завантажуються в тому вікні, де ви клацнули посилання. Але ми можемо вибрати місце де будуть завантажуватись сторінки. Для цього в тезі <a> існує атрибут target. Він може приймати значення _blank якщо нам потрібно завантажувати сторінку в новому вікні, _self, якщо нам нічого міняти не потрібно (воно і так завантажується в тому вікні де клацнули), _parent, якщо ми хочемо забрати з вікна фрейми, і відкрити сторінку на все вікно.
Елементи оформлення
[ред.]Підведемо риску
[ред.]Інколи ви щось пишете, пишете, і раптом відчуваєте, що потрібно підвести риску.
Робиться це просто як новий рядок: <hr /> (horisontal ruler). Взагалі то в цього тегу є атрибути які настроюють зовнішній вигляд, але їх використання в нових стандартах небажане. Дозволені тільки загальні атрибути, такі як id, class, style і атрибути подій, але це теми наступного розділу.
Картинки
[ред.]До цього моменту ми прочитали дуже багато тексту про текст. Звісно – текст найважливіша частина будь-якої сторінки (якщо звісно це не сторінка якої небудь галереї), але суцільний текст штука доволі нудна. Ілюстрований текст виглядає набагато краще. Щоб вставити в текст зображення використовують тег <img>. Його атрибут src, задає джерело (source) – файл в якому міститься картинка. Цей тег одинарний, що означає, що коли ми пишемо код, який відповідає найновішим стандартам, його потрібно закінчувати так: />.
Інколи картинки не відображаються. Це відбувається з різних причин. Тим не менш, потрібно щоб користувач і в таких випадках знав, що ви хотіли йому показати. Для цього картинки мають атрибут alt. Він задає текст, який буде відображатись на місці картинки, в тих випадках, коли сама картинка недоступна.
Не варто забувати про те, що картинки дуже довго завантажуються при повільному доступі до інтернету. Та навіть коли доступ в інтернет достатньо швидкий, деякі користувачі виключають завантаження картинок з метою економії. І це зауваження актуальне навіть в 2011 році. Тому не нехтуйте атрибутом alt.
Також ми можемо змінити розміри картинки. Наприклад, якщо ми маємо маленьке зображення, ми можемо його розтягнути. Щоправда тоді воно буде відображатись дещо розмито. Також можна змінювати розміри зображення разом зі зміною розмірів вікна браузера. Для цього розміри вказують у відсотках. Розміри задаються атрибутами width і height. Приклад:
<html>
<head><title>Картинки</title></head>
<body>
<img src="image.jpg" alt="Маленька картинка" title="Маленька картинка" width="100" height="100"/><br/>
<img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400"/><br/>
<img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400"/><br/>
</body>
</html>
Картинки можуть бути поміщені всередині тегів гіперпосилання, тоді клацання по них буде аналогічним до клацання по звичайних посиланнях. Навколо картинки з’явиться синя рамка. Але є ще цікавіший спосіб зробити з картинки гіперпосилання…
Карти
[ред.]Зображення можна поділити на області різної форми, кожна з яких може посилатися в інше місце. Для цього за допомогою тегу <map> задають карту. Атрибут id, який ідентифікує карту, використовується для зв’язку з малюнком. Щоб малюнок призначити в якості карти, потрібно в атрибуті usemap малюнка написати ідентифікатор карти, яку використовує малюнок. Всередині тегу карти містяться теги областей, які задаються тегами <area>. Знову ж таки, цей тег одинарний і хоче щоб його правильно закривали. Атрибут href задає адресу посилання, атрибут nohref, якщо призначити йому значення true, виключає зону з карти. Атрибут shape задає форму області: rect – прямокутна, circle – круг, і poly для багатокутника.
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Приклад безсовісно свиснуто звідси. Дуже хороше місце, щоб потренуватись, без зайвої мороки.
Форму задають за допомогою атрибуту coords, який містить чотири координати (ліво, верх, право, низ) для прямокутника, три (координати центра і радіус) для кола, і парну кількість для багатокутника (координати кожної вершини). Координати можна дізнатись багатьма способами. Можна в графічному редакторі подивитись. А якщо форма складна, точок багато, то можна і спеціальну програму використати. Щось подібне до X-Map. Хоча, якщо чесно, ні цією програмою, ні картами я не користувався. Але якщо таке є, то треба давати можливість людям знати. Інакше книжка якась не солідна буде.
Подання інформації структуровано
[ред.]Ми вже вміємо оформлювати текст в абзаци, заголовки, розділи, сторінки. Але текст може утворювати і складніші структури, які покращують оформлення і розуміння тексту. Люди більше люблять, коли їм показують таблиці і списки, аніж просто набір абзаців (звісно крім художньої літератури). Тому зараз поговоримо про:
Списки
[ред.]Списки в HTML бувають трьох видів: упорядковані (ordered list) <ol>, невпорядковані (unordered list) <ul>, і списки означень (definition list) <dl>. Елементи двох перших списків задаються тегом <li> (list item). Елементом списку може бути будь-який текст, картинки, абзаци, і навіть інші списки. Наприклад, впорядкований список задають так:
<ol>
<li>Раз</li>
<li>Два</li>
<li>Три</li>
</ol>
Виглядає це так:
- Раз
- Два
- Три
Список означень складніший, але не набагато. В ньому є два види елементів – термін (dl term) <dt>, де записують термін, який будуть означати, і після нього означення (dl definition), в тегах <dd>.
Таблиці
[ред.]Таблиці зручно задавати за допомогою HTML, бо в HTML можна робити вкладені елементи. Таблиця також складається з вкладених елементів. Таблиця (<table>) складається з рядків (<tr> – table row), кожен з яких також складається з клітинок (<td> – table data). А всередині клітинки може бути вже все що завгодно. Навіть ще одна таблиця. Виглядає це так:
| Рядок 1 Стовпець 1 | Рядок 1 Стовпець 2 | Рядок 1 Стовпець 3 |
| Рядок 2 Стовпець 1 | Рядок 2 Стовпець 2 | Рядок 2 Стовпець 3 |
| Рядок 3 Стовпець 1 | Рядок 3 Стовпець 2 | Рядок 3 Стовпець 3 |
<table border="1">
<tr>
<td>Рядок 1 Стовпець 1</td>
<td>Рядок 1 Стовпець 2</td>
<td>Рядок 1 Стовпець 3</td>
</tr>
<tr>
<td>Рядок 2 Стовпець 1</td>
<td>Рядок 2 Стовпець 2</td>
<td>Рядок 2 Стовпець 3</td>
</tr>
<tr>
<td>Рядок 3 Стовпець 1</td>
<td>Рядок 3 Стовпець 2</td>
<td>Рядок 3 Стовпець 3</td>
</tr>
</table>
По замовчуванню таблиці відображаються без меж :) . Тобто межі невидимі. Це іноді корисно, але іноді ми хочемо, щоб межі було видно. Для цього задають значення атрибуту border. Він задає товщину меж таблиці, правда тільки зовнішніх меж. Якщо його значення нуль, то межі не відображається.
Інколи треба назвати стовпці чи рядки, тоді використовують клітинку заголовку. Для цього замість тегу <td> пишуть <th>. Виглядає це так:
| Стовпець 1 | Стовпець 2 | |
|---|---|---|
| Рядок 1 | Рядок 1 Стовпець 1 | Рядок 1 Стовпець 2 |
| Рядок 2 | Рядок 2 Стовпець 1 | Рядок 2 Стовпець 2 |
А пишеться отак:
<table border="1">
<tr><td></td><th>Стовпець 1</th><th>Стовпець 2</th></tr>
<tr><th>Рядок 1</th><td>Рядок 1 Стовпець 1</td><td>Рядок 1 Стовпець 2</td></tr>
<tr><th>Рядок 2</th><td>Рядок 2 Стовпець 1</td><td>Рядок 2 Стовпець 2</td></tr>
</table>
Варто зауважити, що такий спосіб кращий аніж писати вміст клітинки в тегах <b> чи <strong>. І не тільки тому, що так коротше. А і тому, що потім можна буде застосувати до заголовків таблиці окремі стилі.
Деякі браузери не відображають порожні клітинки (тобто не обводять їх рамкою). Можете подивитись що робить ваш, в попередньому прикладі верхня ліва клітинка порожня. Щоб обдурити браузер і змусити його відображати клітинку так ніби там щось є, ми можемо покласти туди невидимий символ – . Це символ незламного пропуску :) (Non Breakable SPace). Назвали його незламним, тому що слова розділені таким пропуском переносяться на наступний рядок тільки разом.
Клітинки таблиці можна об'єднувати. Робиться це за допомогою атрибутів colspan і rowspan тегу <td>. colspan вказує на скільки колонок буде пролягати дана клітинка, а rowspan на скільки рядків. Такий код:
<table border="1">
<tr><td colspan="2">Рядок 1 Стовпець 1 простягяється на два вправо</td><td>Рядок 1 Стовпець 3</td></tr>
<tr><td>Рядок 2 Стовпець 1</td><td rowspan="3">Рядок 2 Стовпець 2 простягяється на 2 вниз</td><td>Рядок 2 Стовпець 3</td></tr>
<tr><td>Рядок 3 Стовпець 1</td><td>Рядок 3 Стовпець 3</td></tr>
</table>
Дає такий результат:
| Рядок 1 Стовпець 1 простягяється на два вправо | Рядок 1 Стовпець 3 | |
| Рядок 2 Стовпець 1 | Рядок 2 Стовпець 2 простягяється на 2 вниз | Рядок 2 Стовпець 3 |
| Рядок 3 Стовпець 1 | Рядок 3 Стовпець 3 | |
Крім рядків таблиця може мати заголовок. Тег <caption> призначений для створення заголовка до таблиці і може розміщуватись тільки в середині тега
, причому зразу після відкриваючого тега. Такий заголовок представляє собою текст по замовчуванню відображений перед таблицею і описує її. Також можна виділити рядки таблиці в групи з різним функціональним призначенням і призначити їм різні стилі. Ой як мені не терпиться вже дійти до стилів. Але по порядку. Можна виділити заголовочну частину <thead>, основну частину <tbody> і підсумок <tfoot>.Посилання
[ред.]Для студентів та аспірантів і докторантів . Основною метою є ознайомлення з основами проведення наукових досліджень. Яремко Яромир Васильович, Дудик Роман Олегович , Якубович Максим Ігорович,