HTML: відмінності між версіями
Вилучено вміст Додано вміст
Виправила помилку. |
м <source> -> <syntaxhighlight> (phab:T237267) |
||
Рядок 13:
Чим відрізняється стандарт HTML 4.01 від попередніх HTML? Спочатку коротенька історія. Існує така організація W3C (World Wide Web Consortium). Суть її роботи добре виражена в їхньому гаслі “Leading the Web to Its Full Potential…” (“Приведемо всесвітнє павутиння до його повних можливостей”). Судячи з того що вони вже зробили, люди розумні і свою роботу знають. І коли вони кажуть, що в майбутньому браузери не будуть підтримувати старі версії HTML, то воно напевне так і буде. А нові браузери з’являються не так вже і рідко. Коли W3C створювали стандарт HTML, в ньому не передбачалося тегів для форматування гіпертексту. Теги показували тільки структуру документа, наприклад:
<
<h1>Це заголовок</h1>
<p>Це абзац</p>
</syntaxhighlight>
Але потім розробники браузерів почали додавати в HTML свої теги, які їм подобались. Наприклад:
<
<marquee>Біжучий рядок, який за чутками вміє відображати лише IE<sup>*</sup></marquee>
</syntaxhighlight>
<blockquote>''IE* – давайте звідси і далі так будемо називати [[w:Internet Explorer|Internet Explorer]]. А про фразу вище – брехня. FF ([[w:Firefox|Firefox]]) щойно нормально вивів той нещасний рядок. Але все одно, краще такими тегами не користуватись.''</blockquote>
Рядок 61:
Наведу приклад коду веб-сторінки:
<
<html>
<head>
Рядок 71:
</body>
</html>
</syntaxhighlight>
Всі теги які зустрічаються вище є обов’язковими. Вони присутні в кожній сторінці в інтернеті. Звісно, якщо ви якийсь із них забудете, браузер якось розбереться, але всі серйозні люди такі речі не забувають. Тег html каже браузеру що в ньому міститься код HTML. Тег head, каже що в ньому міститься заголовочна інформація сторінки. Ця інформація на самій сторінці не відображається. Тег title, як вже було сказано, містить заголовок, який відобразиться в рядку заголовку. body містить тіло, або вміст сторінки.
Рядок 79:
Ще існує поняття спеціальних символів. Наприклад, ви напишете таку сторінку:
<
<html>
<head>
Рядок 88:
</body>
</html>
</syntaxhighlight>
Така сторінка відобразиться браузером неправильно, через те, що браузер не виводить теги. А html – тег. Така сама проблема і з символами порівняння. Тому, щоб відображати деякі нестандартні символи, існує поняття спеціальних символів. Спеціальні символи в HTML описуються так: &код;. Наприклад:
Рядок 96:
!Назва !! Код !! Вигляд
|-
|Менше || <
|-
|Більше || <
|-
|Амперсанд ||<
|}
Тут я вказав тільки най-найпотрібніші. Якщо вам потрібно більше, вам треба пошукати. Можна пошукати [http://www.coolchevy.org.ua/2008/04/14/specialni-simvoli-html/ десь тут]. Тобто те що ми хотіли описати в попередньому прикладі мало виглядати так:
<
<html>
<head>
Рядок 114:
</body>
</html>
</syntaxhighlight>
=== Теги форматування ===
Рядок 120:
Тепер перейдем до форматування тексту. Форматування задає не так зовнішній вигляд, як структуру сторінки. Найважливішими тегами форматування є абзаци (англ. paragraph) і заголовки (англ. header). Заголовки бувають шести рівнів. Заголовки першого рівня найголовніші і найбільші, а заголовки шостого рівня навіть менші ніж текст абзаців. Нижче приклад використання заголовків:
<
<html>
<head>
Рядок 138:
</body>
</html>
</syntaxhighlight>
<blockquote>''Я тут пишу і пишу приклади. Не забувайте пробувати щось самі! Або хоча б принаймі подивіться, як будуть виглядати приклади сторінок, які вам даються у вашому браузері.''</blockquote>
Рядок 144:
Тепер ще один маленький приклад, який стосується форматування:
<
<html>
<head>
Рядок 161:
</body>
</html>
</syntaxhighlight>
На жаль, браузери відкидають всі символи переносу рядка, табуляції і навіть зайві пропуски. Тому цей віршик відобразиться в один або кілька рядків (залежно від ширини вікна). Але є вихід.
Рядок 171:
І ще один спосіб – взяти увесь вірш в теги <pre></pre>. Увесь текст поміщений між цими тегами відображається точно так само, як його видно в редакторі. Правда цей тег також змінює шрифт тексту на якийсь моноширинний. Але зате ми можемо робити з текстом цікаві речі:
<
<html>
<head>
Рядок 228:
</body>
</html>
</syntaxhighlight>
Ще трохи про теги зміни шрифту. Шрифт може мати три додаткові атрибути '''жирність (bold)''', ''курсивність (italic)'' і <u>підкреслення (underlined)</u>. Вони змінюються за допомогою тегів: <nowiki><b></nowiki>, <nowiki><i></nowiki> та <nowiki><u></nowiki> відповідно.
Рядок 238:
Крім тегу видалення ввели тег вставки. Тег вставки вказує текст який вставили після видалення. Виглядає така річ приблизно так:
<
2 + 2 = <del>5</del> <ins>4</ins>
</syntaxhighlight>
При чому текст в тезі <nowiki><ins></nowiki> буде підкреслений. (А хлопці з w3schools казали використовувати стилі. Хм.)
Рядок 307:
Щоб вказати файл, який буде програватися, потрібно написати так:
<
<bgsound src="Example.mid" loop="3" volume="-1000" balance="3000">
</
Параметри:
Рядок 324:
Деякі теги мають властивості, які називаються атрибутами. Наприклад майже кожен тег має атрибут title. В ньому прописується текст підказки яку видно, коли користувач наводить курсор на елемент тегу. Хай нам потрібно написати відоме скорочення: HTML. І щоб коли користувачі наводять на нього курсор, вони могли його розшифрувати. Це робиться просто:
<
<html>
<head><title>Абревіатура</title></head>
Рядок 331:
</body>
</html>
</syntaxhighlight>
Тут ми бачимо, як правильно записувати атрибути. Назва атрибуту, потім знак рівності і значення в подвійних лапках. В стандарті HTML 4.01 немає атрибутів без значень.
Рядок 344:
Як я вже казав, основною властивістю, яка відрізняє нормальний текст і гіпертекст, є гіперпосилання. Гіперпосилання створюються за допомогою тегу <nowiki><a></nowiki> з атрибутом href, який приймає значення потрібного нам URL. Наприклад, потрібно створити сторінку, яка містить посилання на цю статтю. Це може виглядати приблизно так:
<
<html>
<head><title>Посилання</title></head>
Рядок 352:
</body>
</html>
</syntaxhighlight>
Тепер на сторінці напис [http://uk.wikibooks.org/wiki/HTML uk.wikibooks.org] стане гіперпосиланням.
Рядок 368:
Наприклад, якщо ви співак і хочете поділитись своїми піснями з іншими, ви можете покласти в папку з сайтом файл track1.mp3, а в файлі index.htm написати:
<
<html>
<head><title>Моя музика</title></head>
Рядок 375:
</body>
</html>
</syntaxhighlight>
Якщо файли знаходяться в одному каталозі, то в атрибуті href достатньо написати назву файлу, щоб зробити посилання. Якщо ж ми маємо файли “site/1.htm” і “site/subdir/2.htm”, то щоб з першого зробити посилання на другий, а з другого на перший, треба написати href="subdir/2.htm" і href="../1.htm" відповідно. Такі адреси називаються відносними. Дві крапки означають “той каталог що вище”. Відносні адреси добрі тим, що коли ми перейменовуємо папку “site”, чи міняємо хостинг їх не потрібно змінювати.
Рядок 383:
Щоб довго не пояснювати знову наведу приклад:
<
<html>
<head><title>Моя музика</title></head>
Рядок 399:
</body>
</html>
</syntaxhighlight>
Коли ми робимо гіперпереходи в межах одної сторінки, то в атрибуті href просто пишемо знак шарпа (“#”), і назву закладки (те що написано в атрибуті id). А коли робимо перехід на закладку в іншій сторінці, то спочатку пишемо адресу сторінки, потім додаємо знак шарпа і закладку. Коли випадково робиться перехід на закладку якої не існує, нічого страшного не відбувається. Ми просто попадаємо на початок сторінки, як при звичайному переході.
Рядок 427:
Також ми можемо змінити розміри картинки. Наприклад, якщо ми маємо маленьке зображення, ми можемо його розтягнути. Щоправда тоді воно буде відображатись дещо розмито. Також можна змінювати розміри зображення разом зі зміною розмірів вікна браузера. Для цього розміри вказують у відсотках. Розміри задаються атрибутами width і height. Приклад:
<
<html>
<head><title>Картинки</title></head>
Рядок 436:
</body>
</html>
</syntaxhighlight>
Картинки можуть бути поміщені всередині тегів гіперпосилання, тоді клацання по них буде аналогічним до клацання по звичайних посиланнях. Навколо картинки з’явиться синя рамка. Але є ще цікавіший спосіб зробити з картинки гіперпосилання…
Рядок 444:
Зображення можна поділити на області різної форми, кожна з яких може посилатися в інше місце. Для цього за допомогою тегу <nowiki><map></nowiki> задають карту. Атрибут id, який ідентифікує карту, використовується для зв’язку з малюнком. Щоб малюнок призначити в якості карти, потрібно в атрибуті usemap малюнка написати ідентифікатор карти, яку використовує малюнок. Всередині тегу карти містяться теги областей, які задаються тегами <nowiki><area></nowiki>. Знову ж таки, цей тег одинарний і хоче щоб його правильно закривали. Атрибут href задає адресу посилання, атрибут nohref, якщо призначити йому значення true, виключає зону з карти. Атрибут shape задає форму області: rect – прямокутна, circle – круг, і poly для багатокутника.
<
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map id="planetmap" name="planetmap">
Рядок 451:
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</syntaxhighlight>
Приклад безсовісно свиснуто [http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap звідси]. Дуже хороше місце, щоб потренуватись, без зайвої мороки.
Рядок 465:
Списки в HTML бувають трьох видів: упорядковані (ordered list) <nowiki><ol></nowiki>, невпорядковані (unordered list) <nowiki><ul></nowiki>, і списки означень (definition list) <nowiki><dl></nowiki>. Елементи двох перших списків задаються тегом <nowiki><li></nowiki> (list item). Елементом списку може бути будь-який текст, картинки, абзаци, і навіть інші списки. Наприклад, впорядкований список задають так:
<
<ol>
<li>Раз</li>
Рядок 471:
<li>Три</li>
</ol>
</syntaxhighlight>
Виглядає це так:
Рядок 494:
|}
<
<table border="1">
<tr>
Рядок 512:
</tr>
</table>
</syntaxhighlight>
По замовчуванню таблиці відображаються без меж :) . Тобто межі невидимі. Це іноді корисно, але іноді ми хочемо, щоб межі було видно. Для цього задають значення атрибуту <code>border</code>. Він задає товщину меж таблиці, правда тільки зовнішніх меж. Якщо його значення нуль, то межі не відображається.
Рядок 533:
А пишеться отак:
<
<table border="1">
<tr><td></td><th>Стовпець 1</th><th>Стовпець 2</th></tr>
Рядок 539:
<tr><th>Рядок 2</th><td>Рядок 2 Стовпець 1</td><td>Рядок 2 Стовпець 2</td></tr>
</table>
</syntaxhighlight>
Варто зауважити, що такий спосіб кращий аніж писати вміст клітинки в тегах <nowiki><b></nowiki> чи <nowiki><strong></nowiki>. І не тільки тому, що так коротше. А і тому, що потім можна буде застосувати до заголовків таблиці окремі стилі.
Рядок 547:
Клітинки таблиці можна об'єднувати. Робиться це за допомогою атрибутів colspan і rowspan тегу <nowiki><td></nowiki>. colspan вказує на скільки колонок буде пролягати дана клітинка, а rowspan на скільки рядків. Такий код:
<
<table border="1">
<tr><td colspan="2">Рядок 1 Стовпець 1 простягяється на два вправо</td><td>Рядок 1 Стовпець 3</td></tr>
Рядок 553:
<tr><td>Рядок 3 Стовпець 1</td><td>Рядок 3 Стовпець 3</td></tr>
</table>
</syntaxhighlight>
Дає такий результат:
| |||