HTML: відмінності між версіями

Вилучено вміст Додано вміст
Oleg4280 (обговорення | внесок)
Немає опису редагування
Oleg4280 (обговорення | внесок)
Немає опису редагування
Рядок 1:
== Вступ ==
Одного разу я побачив книжку по Web-дизайну, а, оскільки я мав звичку читати все що бачу, то я її прочитав. І з того часу вважав що знаю HTML. Але недавно, мені сказали адресу одного хорошого сайту [http://www.w3schools.com/ www.w3schools.com]. Символи “w3″ в назві сайту означають “три w”, або “www”. Що важливого я там дізнався? По-перше, що мої знання дещо застарілі. По друге, що те що мої теги розпізнає браузер, ще не значить що так буде тривати і далі. Тому, я вирішив написати сучаснішу, українську книжку про веб-дизайн.
[[Файл:Html-small.png]]
 
Одного разу я побачив книжку по Web-дизайну, а, оскільки я мав звичку читати все що бачу, то я її прочитав. І з того часу вважав що знаю HTML. Але недавно, мені сказали адресу одного хорошого сайту [http://www.w3schools.com/ www.w3schools.com]. Символи “w3″ в назві сайту означають “три w”, або “www”. Що важливого я там дізнався? По-перше, що мої знання дещо застарілі. По друге, що те що мої теги розпізнає браузер, ще не значить що так буде тривати і далі. Тому, я вирішив написати сучаснішу, українську книжку про веб-дизайн.
 
[[Файл:Html-small.png]]
 
Постараюся описати все якомога доступніше, і згідно з новими тенденціями. Бо консерватизм – це ніщо інше, як лінь вчити щось нове. Але коли ви не вчите нове, ви відстаєте. А відставання в сучасному світі недопустиме. Тому тут будемо розглядати HTML 4.01 .
 
<blockquote>Насправді найсучаснішою версією HTML вже стає [[HTML 5HTML5]], тому краще зразу читати про нього.</blockquote>
 
Як годиться варто почати з означень. [[:w:HTML|HTML]] (Hyper Text Markup Language) – значить мова розмітки гіпертекстових сторінок. Навіть не вважається мовою програмування, але кожен програміст, що себе поважає має її знати. Бо без неї вчити [[:w:JavaScript|JavaScript]], чи [[:w:PHP|PHP]] нема сенсу.
 
Чим відрізняється стандарт HTML 4.01 від попередніх HTML? Спочатку коротенька історія. Існує така ооганізаціяорганізація – “w3c”W3C (World Wide Web ConsorciumConsortium). Суть її роботи добре виражена в їхньому гаслі “Leading the Web to Its Full Potential…” (“Приведемо всесвітнє павутиння до його повних можливостей”). Судячи з того що вони вже зробили, люди розумні, і свою роботу знають. І коли вони кажуть, що в майбутньому браузери не будуть підтримувати старі версії HTML, то воно напевне так і буде. А нові браузери з’являються не так вже і рідко. Коли “w3c”W3C створювали стандарт HTML, в ньому не передбачалося тегів для форматування гіпертексту. Теги показували тільки структуру документа, наприклад:
 
<source lang="html4strict">
Рядок 17 ⟶ 18:
</source>
 
Але потім розробники браузерів почали додавати в HTML свої теги, які їм подобались. Наприклад:
 
<source lang="html4strict">
<marquee>Біжучий рядок, який за чутками вміє відображати лише IE<sup>*</sup></marquee>
Рядок 38 ⟶ 40:
# [[:w:Текстовий редактор|Текстовий редактор]]
 
Оскільки ви читаєте цей текст, дві перші речі в вас точно є. Текстовий редактор також є на кожному комп’ютері. Важливо зауважити: нам потрібна програма для редагування текстових файлів, а не документів. Зазвичай стандартного текстового редактора вашої ОС (наприклад gedit у GNOME, KEdit у KDE, блокнота Windows) достатньо, але є текстові редактори, які краще пристосовані до написання HTML сторінок. Непоганий редактор для windows [[:w:Notepad++|Notepad++]], в якому добре писати не тільки HTML, а і CSS, PHP, C++, і ще кілька десятків інших мов. В ньому є така хороша річ, як підсвітка синтаксису, яка дозволяє виявляти помилки прямо під час їх створення :). Якщо ж у вас Лінукс, тоді ви точно знаєте що таке хороший текстовий редактор.
 
Про браузер також варто сказати дещо. Всі радять тримати в себе на комп’ютері набір браузерів: IE, Firefox, Opera, Chrome, і переглядати свої сторінки у всіх зразу. Щоправда, функції тегів в різних браузерах відрізняються не сильно (в ідеалі взагалі не відрізняються). Тому вчитись можна переглядаючи свої сторінки в одному, а вже коли пишете щось велике - подивіться чи не має надто критичних відмінностей у всіх інших.
Рядок 56 ⟶ 58:
Елемент гіпертексту – це все що знаходиться між відкриваючим і закриваючим тегом. Елементи бувають вкладені.
 
Наведу приклад коду веб-сторінки:
 
<source lang="html4strict">
<html>
Рядок 74 ⟶ 77:
 
Ще існує поняття спеціальних символів. Наприклад ви напишете таку сторінку:
 
<source lang="html4strict">
<html>
Рядок 84 ⟶ 88:
</html>
</source>
 
Така сторінка відобразиться браузером неправильно, через те, що браузер не виводить теги. А html – тег. Така сама проблема і з символами порівняння. Тому, щоб відображати деякі нестандартні символи, існує поняття спеціальних символів. Спеціальні символи в HTML описуються так: &код;. Наприклад:
 
Рядок 136 ⟶ 141:
 
Тепер ще один маленький приклад, який стосується форматування:
 
<source lang="html4strict">
<html>
Рядок 226 ⟶ 232:
Правда замість тегу <nowiki><b></nowiki> рекомендують використовувати тег <nowiki><strong></nowiki>. Окрім того існує ще така властивість як викресленість. Колись вона задавалася тегом <nowiki><s></nowiki>, що означало strikeout. Але знову ж таки в сучасному світі слова не викреслюють, їх видаляють, тому в порядку модернізації використовують тег <nowiki><del></nowiki>.
 
<blockquote>''Школа w3 навпроти тегів <nowiki><u>,<s></nowiki> і <nowiki><strike></nowiki> пише “deprecated”., Щощо перекладається у нас як «застарілі», дослівно ж слово deprecate означає: “сильно заперечувати, виступати проти, протестувати”. Хто протестує не сказано, але скоріше за все Консорціум трьох дубль-ве. Замість тегів викреслення рекомендують використовувати тег видалення. А замість тегу підкреслювання – стилі.''</blockquote>
 
Крім тегу видалення ввели тег вставки. Тег вставки вказує текст який вставили після видалення. Виглядає така річ приблизно так:
 
<source lang="html4strict">
2 + 2 = <del>5</del> <ins>4</ins>
Рядок 311 ⟶ 318:
 
=== Атрибути ===
Деякі теги мають властивості, які називаються атрибутами. Наприклад майже кожен тег, має атрибут title. В ньому прописується текст підказки яку видно, коли користувач наводить курсор на елемент тегу. Хай нам потрібно написати відоме скорочення: HTML. І щоб коли користувачі наводять на нього курсор, вони могли його розшифрувати. Це робиться просто:
<source lang="html4strict">
<html>
Рядок 354 ⟶ 362:
 
Наприклад, якщо ви співак і хочете поділитись своїми піснями з іншими, ви можете покласти в папку з сайтом файл track1.mp3, а в файлі index.htm написати:
 
<source lang="html4strict">
<html>
Рядок 432 ⟶ 441:
<source lang="html4strict">
<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">
Рядок 449 ⟶ 457:
=== Списки ===
Списки в HTML бувають трьох видів: упорядковані (ordered list) <nowiki><ol></nowiki>, невпорядковані (unordered list) <nowiki><ul></nowiki>, і списки означень (definition list) <nowiki><dl></nowiki>. Елементи двох перших списків задаються тегом <nowiki><li></nowiki> (list item). Елементом списку може бути будь-який текст, картинки, абзаци, і навіть інші списки. Наприклад впорядкований список задають так:
 
<source lang="html4strict">
<ol>
Рядок 466 ⟶ 475:
=== Таблиці ===
Таблиці зручно задавати за допомогою HTML, бо в HTML можна робити вкладені елементи. Таблиця також складається з вкладених елементів. Таблиця (<nowiki><table></nowiki>) складається з рядків (<nowiki><tr></nowiki> – table row), кожен з яких також складається з клітинок (<nowiki><td></nowiki> – table data). А всередині клітинки може бути вже все що завгодно. Навіть ще одна таблиця. Виглядає це так:
 
{|border=1
|-