|
HTML (Hyper Text Markup Language) – значить мова розмітки гіпертекстових сторінок. Навіть не вважається мовою програмування, але кожен програміст, що себе поважає має її знати. Бо без неї вчити JavaScript, чи PHP нема сенсу. Чим відрізняється стандарт HTML 4.01 від попередніх HTML? Спочатку коротенька історія. Існує така ооганізація – “w3c” (World Wide Web Consorcium). Суть її роботи добре виражена в їхньому гаслі “Leading the Web to Its Full Potential…” (“Приведемо всесвітнє павутиння до його повних можливостей”). Судячи з того що вони вже зробили, люди розумні, і свою роботу знають. І коли вони кажуть, що в майбутньому браузери не будуть підтримувати старі версії HTML, то воно напевне так і буде. А нові браузери з’являються не так вже і рідко. Коли “w3c” створювали стандарт HTML, в ньому не передбачалося тегів для форматування гіпертексту. Теги показували тільки структуру документа, як: <h1>Це заголовок</h1> <p>Це абзац</p> Але потім розробники браузерів почали додавати в HTML свої теги, які їм подобались. Наприклад <marquee>Біжучий рядок, який за чутками вміє відображати лише IE<sup>*</sup></marquee>
Так само небажаною була поява в стандарті HTML 3.2 тегу <font>. Уявіть собі, що потрібно написати сторінку, де всі заголовки червоні. І доводиться крім тегів заголовку писати ще тег шрифту з атрибутом кольору. Прихід четвертої версії розділяє форматування тексту, і його структуру. Тепер в HTML сторінці зберігаємо тільки структуру документа (різнорівневі заголовки, абзаци, цитати, списки), а все що відноситься до форматування описуєтся в CSS. Це зручно, бо дозволяє швидко міняти оформлення всього сайту, зміною лише файлу з стилем, і крім того зменшує довжину коду, який потрібно написати. Крім того HTML 4.01 дозволяє швидко переходити до XHTML – HTML сумісний з XML. XML – простіше обробляти різними програмами ніж HTML. Структура сторінкиДо роботи!Найкращий спосіб навчитись щось робити – зробити це. Не вийде – вчитись далі. А вийде – значить ви вже навчились. :) Для того щоб вивчити HTML, окрім читання цього підручника нам потрібно мати:
Раз ви читаєте цей текст, дві перші речі в вас точно є. Текстовий редактор також є на кожному комп’ютері. Важливо зауважити: нам потрібна програма для редагування текстових файлів, а не документів. Зазвичай стандартного “Блокнота” Windows достатньо, але є текстові редактори, які краще пристосовані до написання HTML сторінок. Непоганий редактор для windows Notepad++, в якому добре писати не тільки HTML,а і CSS, PHP, C++, і ще кілька десятків інших мов. В ньому є така хороша річ, як підсвітка синтаксису, яка дозволяє виявляти помилки прямо під час їх створення :). Якщо ж у вас Лінукс, тоді ви точно знаєте що таке хороший текстовий редактор. Про браузер також варто сказати дещо. Всі радять тримати =i9-себе на комп’ютері набір браузерів: IE, Firefox, Opera, Chrome, і переглядати свої сторінки у всіх зразу. Правда функції тегів в різних браузерах відрізняються не сильно (а в ідеалі взагалі не відрізняються). Тому вчитись можна переглядаючи свої сторінки в одному, а вже коли пишете щось велике - подивіться чи не має надто критичних відмінностей у всіх інших. Щоб створити веб-сторінку, потрібно створити в файловій системі текстовий файл з розширенням html, або htm. Яке з них вибрати – філософське питання. htm – скорочення від html, що є доволі смішним фактом, оскільки html це теж скорочення. Але були часи, коли в деяких ОС розширення файлу могло містити максимум 3 символи, і сторінки гіпертексту мали розширення htm. Тепер можна використовувати обидва розширення. Вміст веб-сторінкиВеб-сторінки складаються з гіпертексту. Гіпертекст відрізняється від звичайного тексту тим, що містить гіперпосилання. Вони зазвичай позначені підкресленням і синім кольором, і дозволяють зробити гіперстрибок в інший URL (Universal Resource Locator) – адреса ресурсу, яку ми бачимо в адресному рядку браузера. Тег – все що знаходиться між кутніми дужками. Наприклад <html>.Теги не відображаються браузером, вони лише задають структуру тексту. Теги бувають трьох видів: відкриваючі, закриваючі і одинарні. Вікриваючі і закриваючі теги завжди ходять парами. Закриваючий відрізняєтся від відкриваючого тим, що після знаку менше< стоїть знак слеш (чи ділення) “/”. Пара закриваючого і відкриваючого тега виглядає так: <html> </html>. Одинарні теги – річ суперечлива, і я їх розгляну пізніше
Елемент гіпертексту – це все що знаходиться між відкриваючим і закриваючим тегом. Елементи бувають вкладені. Наведу приклад коду веб-сторінки <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) старого.
І ще один спосіб – взяти увесь вірш в теги .Увесь текст поміщений між цими тегами відображається точно так само як його видно в редакторі. Правда цей тег також змінює шрифт тексту на якийсь моноширинний. Але зате ми можемо робити з текстом цікаві речі: <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>.
Крім тегу видалення ввели тег вставки. Тег вставки вказує текст який вставили після видалення. Виглядає така річ приблизно так: 2 + 2 = <del>5</del> <ins>4</ins> При чому текст в тезі <ins> буде підкреслений. (А хлопці з w3schools казали використовувати стилі. Хм.) Далі опишу всі теги в таблиці, бо мені вже набридло тут про них розказувати, а вам певне набридло читати.
Ну з структурою гіпертексту думаю ми розібрались, можна тепер переходити до речей глобальніших. Головна &nbs |
