HTML: відмінності між версіями
Вилучено вміст Додано вміст
Немає опису редагування |
Немає опису редагування |
||
Рядок 1:
== Вступ ==
Одного разу я побачив книжку по Web-дизайну, а, оскільки я мав звичку читати все що бачу, то я її прочитав. І з того часу вважав, що знаю HTML. Але недавно, мені сказали адресу одного хорошого сайту [http://www.w3schools.com/ www.w3schools.com]. Символи “w3″ в назві сайту означають “три w”, або “www”. Що важливого я там дізнався? По-перше, що мої знання дещо застарілі. По друге, що те що мої теги розпізнає браузер, ще не значить, що так буде тривати і далі. Тому я вирішив написати сучаснішу українську книжку про веб-дизайн.
[[Файл:Html-small.png]]
Постараюся описати все якомога доступніше
<blockquote>Насправді найсучаснішою версією HTML вже стає [[HTML5]], тому краще зразу читати про нього.</blockquote>
Як годиться варто почати з означень. [[
Чим відрізняється стандарт HTML 4.01 від попередніх HTML? Спочатку коротенька історія. Існує така організація W3C (World Wide Web Consortium). Суть її роботи добре виражена в їхньому гаслі “Leading the Web to Its Full Potential…” (“Приведемо всесвітнє павутиння до його повних можливостей”). Судячи з того що вони вже зробили, люди розумні
<source lang="html4strict">
Рядок 24:
</source>
<blockquote>''IE* – давайте звідси і далі так будемо називати [[
Так само небажаною була поява в стандарті HTML 3.2 тегу <nowiki><font></nowiki>. Уявіть собі, що потрібно написати сторінку, де всі заголовки червоні. І доводиться крім тегів заголовку писати ще тег шрифту з атрибутом кольору.
Прихід четвертої версії розділяє форматування тексту
== Структура сторінки ==
=== До роботи! ===
Найкращий спосіб навчитись щось робити – зробити це. Не вийде – вчитись далі. А вийде – значить ви вже навчились. :)
Для того щоб вивчити HTML, окрім читання цього підручника нам потрібно мати:
# [[
# [[
# [[
Оскільки ви читаєте цей текст, дві перші речі в вас точно є. Текстовий редактор також є на кожному комп’ютері. Важливо зауважити: нам потрібна програма для редагування текстових файлів, а не документів. Зазвичай стандартного текстового редактора вашої ОС (наприклад gedit у GNOME, KEdit у KDE, блокнота Windows) достатньо, але є текстові редактори, які краще пристосовані до написання HTML
Про браузер також варто сказати дещо. Всі радять тримати в себе на комп’ютері набір браузерів
Щоб створити веб-сторінку, потрібно створити в файловій системі текстовий файл з розширенням html, або htm. Яке з них вибрати – філософське питання. htm – скорочення від html, що є доволі смішним фактом, оскільки html це теж скорочення. Але були часи, коли в деяких ОС розширення файлу могло містити максимум 3 символи, і сторінки гіпертексту мали розширення htm. Тепер можна використовувати обидва розширення.
Рядок 48 ⟶ 49:
=== Вміст веб-сторінки ===
Веб-сторінки складаються з [[
URL (Universal Resource Locator) – адреса ресурсу, яку ми бачимо в адресному рядку браузера.
Тег – все що знаходиться між кутніми дужками. Наприклад <nowiki><html></nowiki>.Теги не відображаються браузером, вони лише задають структуру тексту. Теги бувають трьох видів: відкриваючі, закриваючі і одинарні. Відкриваючі і закриваючі теги завжди ходять парами. Закриваючий відрізняєтся від відкриваючого тим, що після знаку менше <code><</code> стоїть знак слеш (чи ділення)
<blockquote>''Важливо знати, що починаючи з версії 4.01 всі теги мають бути написані маленькими буквами.''</blockquote>
Рядок 72 ⟶ 73:
</source>
Всі теги які зустрічаються вище є обов’язковими. Вони присутні в кожній сторінці в інтернеті. Звісно, якщо ви якийсь із них забудете, браузер якось розбереться, але всі серйозні люди такі речі не забувають. Тег html каже браузеру що в ньому міститься код HTML. Тег head, каже що в ньому міститься заголовочна інформація сторінки. Ця інформація на самій сторінці не відображається. Тег title, як вже було сказано, містить заголовок, який відобразиться в рядку заголовку. body містить тіло, або вміст сторінки.
Окрім тегів і тексту, гіпертекстові сторінки можуть містити коментарі. Коментарі виглядають так: <code><nowiki><!-- Коментар -->
Ще існує поняття спеціальних символів. Наприклад, ви напишете таку сторінку:
<source lang="html4strict">
Рядок 102 ⟶ 103:
|}
Тут я вказав тільки най-найпотрібніші. Якщо вам потрібно більше, вам треба пошукати. Можна пошукати [http://www.coolchevy.org.ua/2008/04/14/specialni-simvoli-html/ десь тут]. Тобто те що ми хотіли описати в попередньому прикладі мало виглядати так:
<source lang="html4strict">
Рядок 115 ⟶ 116:
</source>
=== Теги форматування
Тепер перейдем до форматування тексту. Форматування задає не так зовнішній вигляд, як структуру сторінки. Найважливішими тегами форматування є абзаци (англ. paragraph) і заголовки (англ. header). Заголовки бувають шести рівнів. Заголовки першого рівня найголовніші і найбільші, а заголовки шостого рівня навіть менші ніж текст абзаців. Нижче приклад використання заголовків:
Рядок 138 ⟶ 140:
</source>
<blockquote>''Я тут пишу і пишу приклади. Не забувайте пробувати щось самі! Або хоча б принаймі подивіться, як будуть виглядати приклади сторінок, які вам даються у вашому браузері.''</blockquote>
Тепер ще один маленький приклад, який стосується форматування:
Рядок 161 ⟶ 163:
</source>
На жаль, браузери відкидають всі символи переносу рядка, табуляції
Можна кожен рядок вірша помістити в окремий абзац. Щоправда зазвичай між абзацами великі білі поля. Тому можна використати одинарний тег <nowiki><br /></nowiki>
<blockquote>''Тут варто вставити зауваження. Всі теги ходять парами відкриваючий – закриваючий. Між ними містяться елементи гіпертексту. Але
І ще один спосіб – взяти увесь вірш в теги <pre></pre>. Увесь текст поміщений між цими тегами відображається точно так само, як його видно в редакторі. Правда цей тег також змінює шрифт тексту на якийсь моноширинний. Але зате ми можемо робити з текстом цікаві речі:
<source lang="html4strict">
Рядок 228 ⟶ 230:
</source>
Ще трохи про теги зміни шрифту. Шрифт може мати три додаткові атрибути '''жирність (bold)''', ''курсивність (italic)'' і <u>підкреслення (underlined)</u>. Вони змінюються за допомогою тегів: <nowiki><b></nowiki>, <nowiki><i></nowiki>
Правда замість тегу <nowiki><b></nowiki> рекомендують використовувати тег <nowiki><strong></nowiki>. Окрім того існує ще така властивість як викресленість. Колись вона задавалася тегом <nowiki><s></nowiki>, що означало strikeout. Але знову ж таки в сучасному світі слова не викреслюють, їх видаляють, тому в порядку модернізації використовують тег <nowiki><del></nowiki>.
Рядок 243 ⟶ 245:
Далі опишу всі теги в таблиці, бо мені вже набридло тут про них розказувати, а вам певне набридло читати.
{|class="wikitable"
|-
Рядок 298 ⟶ 301:
Ну з структурою гіпертексту думаю ми розібрались, можна тепер переходити до речей глобальніших.
=== А тепер послухаємо музику
Тег <BGSOUND> вказує на музичний файл, який буде програватися на веб-сторінці при її відкритті. Звук, час звучання музики та інші характеристики вказуються за допомогою параметрів тега, а також можуть керуватися через скрипти. Цей тег повинен розміщуватися тільки в середині тега <nowiki><HEAD></nowiki>.
Рядок 318 ⟶ 321:
=== Атрибути ===
Деякі теги мають властивості, які називаються атрибутами. Наприклад майже кожен тег
<source lang="html4strict">
Рядок 329 ⟶ 333:
</source>
Тут ми бачимо, як правильно записувати атрибути. Назва атрибуту, потім знак рівності
<blockquote><i>Краще писати всі атрибути і їх значення маленькими буквами.<br />
Рядок 337 ⟶ 341:
=== Посилання ===
Як я вже казав, основною властивістю, яка відрізняє нормальний текст і гіпертекст, є гіперпосилання. Гіперпосилання створюються за допомогою тегу <nowiki><a></nowiki>
<source lang="html4strict">
Рядок 351 ⟶ 356:
Тепер на сторінці напис [http://uk.wikibooks.org/wiki/HTML uk.wikibooks.org] стане гіперпосиланням.
Зазвичай сторінки в інтернеті не сидять самотньо. Вони розміщуються купками, які називаються сайтами. Сайт – це за моїм визначенням набір сторінок
Можна зробити в себе на комп’ютері маленьку модель сайту. Для цього потрібно створити новий каталог, в якому будемо розміщувати файли. Потім в каталозі розмістити файл index.htm
<blockquote>''При звертанні до каталогу завжди в кінці додавайте слеш. Якщо ви не будете додавати слеш, то сервер буде змушений виконувати два запити. Спочатку ваш, без слеша. Потім, коли він розбереться що то запит до каталога, він згенерує свій запит, з слешем, і вже його виконає.''</blockquote>
Рядок 376 ⟶ 381:
Але цим можливості тегу <nowiki><a></nowiki> не вичерпуються. a – скорочено від anchor – що значить якір. За допомогою тегу <a> можна ставити в гіпертекстовому документі якорі, або говорячи простіше закладки, які дозволяють переходити в певне місце документа. Це особливо корисно, коли документ великий, і потрібно швидко переходити в ньому до певного розділу. Для цього існує атрибут id.
<blockquote>''Я щоправда не розумію, для чого робити закладки за допомогою тегу <a>, коли атрибут id є в кожному тезі. Але всіма способами виходить нормально.''</blockquote>
Щоб довго не пояснювати знову наведу приклад:
Рядок 407 ⟶ 412:
=== Підведемо риску ===
Інколи ви щось пишете, пишете, і раптом відчуваєте, що потрібно підвести риску.
----
Рядок 415 ⟶ 421:
=== Картинки ===
До цього моменту ми прочитали дуже багато тексту про текст. Звісно – текст найважливіша частина будь-якої сторінки (якщо звісно це не сторінка якої небудь галереї), але суцільний текст штука доволі нудна. Ілюстрований текст виглядає набагато краще. Щоб вставити в текст зображення використовують тег <nowiki><img></nowiki>. Його атрибут src, задає джерело (source) – файл в якому міститься картинка. Цей тег одинарний, що означає, що коли ми пишемо код, який відповідає найновішим стандартам, його потрібно закінчувати так: />.
Інколи картинки не відображаються. Це відбувається з різних причин. Тим не менш, потрібно щоб користувач і в таких випадках знав, що ви хотіли йому показати. Для цього картинки мають атрибут alt. Він задає текст, який буде відображатись на місці картинки, в тих випадках, коли сама картинка недоступна.
<blockquote>''Не варто забувати про те, що картинки
Також ми можемо змінити розміри картинки. Наприклад, якщо ми маємо маленьке зображення, ми можемо його розтягнути. Щоправда тоді воно буде відображатись дещо розмито. Також можна змінювати розміри зображення разом зі зміною розмірів вікна браузера. Для цього розміри вказують у відсотках. Розміри задаються атрибутами width і height. Приклад:
Рядок 437 ⟶ 443:
=== Карти ===
Зображення можна поділити на області різної форми, кожна з яких може посилатися в інше місце. Для цього за допомогою тегу <nowiki><map></nowiki> задають карту. Атрибут id, який ідентифікує карту,
<source lang="html4strict">
Рядок 450 ⟶ 457:
Приклад безсовісно свиснуто [http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap звідси]. Дуже хороше місце, щоб потренуватись, без зайвої мороки.
Форму задають за допомогою атрибуту coords, який містить чотири координати (ліво, верх, право, низ) для прямокутника, три (координати центра і радіус) для кола, і парну кількість для багатокутника (координати кожної вершини). Координати можна дізнатись
== Подання інформації структуровано ==
Ми вже вміємо оформлювати текст в абзаци, заголовки, розділи, сторінки. Але текст може утворювати і складніші структури, які покращують оформлення
=== Списки ===
Списки в HTML бувають трьох видів: упорядковані (ordered list) <nowiki><ol></nowiki>, невпорядковані (unordered list) <nowiki><ul></nowiki>, і списки означень (definition list) <nowiki><dl></nowiki>. Елементи двох перших списків задаються тегом <nowiki><li></nowiki> (list item). Елементом списку може бути будь-який текст, картинки, абзаци, і навіть інші списки. Наприклад, впорядкований список задають так:
<source lang="html4strict">
Рядок 467 ⟶ 476:
Виглядає це так:
#Раз▼
#Два▼
#Три▼
▲# Раз
Список означень складніший, але не набагато. В ньому є два види елементів – термін (dl term) <nowiki><dt></nowiki>, де записують термін який будуть означати, і після нього означення (dl definition), в тегах <nowiki><dd></nowiki>.▼
▲# Два
▲# Три
▲Список означень складніший, але не набагато. В ньому є два види елементів – термін (dl term) <nowiki><dt></nowiki>, де записують термін, який будуть означати, і після нього означення (dl definition), в тегах <nowiki><dd></nowiki>.
=== Таблиці ===
Таблиці зручно задавати за допомогою HTML, бо в HTML можна робити вкладені елементи. Таблиця також складається з вкладених елементів. Таблиця (<nowiki><table></nowiki>) складається з рядків (<nowiki><tr></nowiki> – table row), кожен з яких також складається з клітинок (<nowiki><td></nowiki> – table data). А всередині клітинки може бути вже все що завгодно. Навіть ще одна таблиця. Виглядає це так:
Рядок 493 ⟶ 504:
</source>
По замовчуванню таблиці відображаються без меж :) . Тобто межі невидимі. Це іноді корисно, але іноді ми хочемо, щоб межі було видно. Для цього задають значення атрибуту <code>border</code>. Він задає товщину меж таблиці
Інколи треба назвати стовпці
{|border=1
Рядок 522 ⟶ 533:
Варто зауважити, що такий спосіб кращий аніж писати вміст клітинки в тегах <nowiki><b></nowiki> чи <nowiki><strong></nowiki>. І не тільки тому, що так коротше. А і тому, що потім можна буде застосувати до заголовків таблиці окремі стилі.
Деякі браузери не відображають порожні клітинки (тобто не обводять їх рамкою). Можете подивитись що робить ваш, в попередньому прикладі верхня ліва клітинка порожня. Щоб обдурити браузер
Клітинки таблиці можна об'єднувати. Робиться це за допомогою атрибутів colspan і rowspan тегу <nowiki><td></nowiki>. colspan вказує на скільки колонок буде пролягати дана клітинка, а rowspan на скільки рядків. Такий код:
Рядок 542 ⟶ 553:
</table>
Крім рядків таблиця може мати заголовок. Тег <nowiki><caption></nowiki> призначений для створення заголовка до таблиці і може розміщуватись тільки в середині тега <
Також можна виділити рядки таблиці в групи
== Посилання ==
| |||