Підручник з html – Популярный самоучитель» скачать fb2, rtf, epub, pdf, txt книгу Чиртик Александр Анатольевич

Leave a Comment / Html / By /

Содержание

HTML конструювання | для тих хто створює сайти

HTML конструювання і сайтобудівництво для початківців і новачків

Якщо Ви зайшли сюди, значить Ви бажаєте створити свій перший сайт. Не важливо, чи буде він складатися з однієї сторінки або складної структури, знайте ви прийшли за адресою. Тут Ви знайдете докладний підручник HTML з докладним описом та тестами завдяки якому Ви зможете створити свою першу web-сторінку буквально за кілька годин. А також, виконавши нескладні практичні завдання, закріпите набуті теоретичні знання.

HTML (англ. HyperText Markup Language — Мова розмітки гіпертекстових документів) — стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.

HTML разом із каскадними таблицями стилів та вбудованими скриптами — це три основні технології побудови веб-сторінок.

HTML впроваджує засоби для:

  • створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
  • отримання інформації із Всесвітньої мережі через гіперпосилання;
  • створення інтерактивних форм;
  • включення зображень, звуку, відео, та інших об’єктів до тексту.

Мова HTML була розроблена британським вченим Тімом Бернерс-Лі приблизно в 1986-1991 роках в Женеві в Швейцарії. HTML створювалася як мова для обміну науковою і технічною документацією, придатною для використання людьми, які не є фахівцями в галузі верстки.

Спочатку мова HTML був задумана і створена як засіб структурування та форматування документів без їх прив’язки до засобів відтворення (відображення). В ідеалі, текст з розміткою HTML повинен був без стилістичних та структурних спотворень відтворюватися на обладнанні з різною технічною оснащеністю (кольоровий екран сучасного комп’ютера, монохромний екран органайзера, обмежений за розмірами екран мобільного телефону або пристрою та програми голосового відтворення текстів). З плином часу основна ідея платформонезалежних мови HTML була принесена в жертву сучасним потребам в мультимедійному і графічному оформленні.

Урок 1. Перше знайомство | HTML конструювання

Мета посібника – використовуючи засоби HTML, і JavaScript навчитися будувати корисні комп’ютерні програми, які можна було б використовувати на локальному комп’ютері у себе вдома, в школі або на базі отриманих знань побудувати власну діалогову сторінку в Інтернеті.

Наш курс – практичний, тому відразу приступаємо до справи.

Вправа 1. Найпростіша HTML-сторінка

Зараз ви читаєте текст, який показує браузер, виконуючи програму, написану на мові HTML. Деякі слова в цьому тексті виділені кольором і підкреслені. Курсор миші, потрапляючи на такі виділення, перетворюється із звичайного курсору на вказівний палець: це посилання! Досить клацнути на посилання мишкою, як поточний текст на екрані заміниться тим, на яке посилання запрограмована.

Виконання найпростішої HTML-програми буде вивчено на прикладі, результат виконання якого браузером можна подивитись тут.

Ось текст HTML-програми, яка показує цю сторінку:

Текст HTML-програмиКоментарій
<HTML>

  <HEAD>
    <META content="charset=windows-1251">
    <TITLE>Вправа 1</TITLE>
  </HEAD>

  <BODY>
    <h2>Перший HTML-документ</h2>
    <HR>
    <P>
      Корова не похожа на лошадь.
      А лошадь не похожа на корову.
      Именно это сходство
      мы и берем за основу.
    </P>
  </BODY>
</HTML>

початок HTML-документа

  початок заголовку
    інформація про документ
    назва документа
  кінець заголовка

  початок тіла
    заголовок
    горизонтальна лінія
    початок абзацу

      абзац


    кінець абзацу
  кінець тіла
кінець HTML-документа

Команди мови (теги) беруться в кутові дужки. Як правило, теги парні. Перший тег відкриває опис команди, визначає її початок, другий, що відрізняється від першого наявністю косою риски ” / ” перед ключовим словом (ім’ям тега) – закриває його.

Тег <HTML> повинен відкривати програму, а тег </HTML> – закривати її.

Між цими двома основними тегами розташовується заголовок програми та її тіло:

HTML-програма
<HTML>
   заголовок програми
   тіло програми
</HTML>
Заголовок програми

У цьому блоці описуються загальні правила інтерпретації HTML-документа в цілому і міститься допоміжна інформація про документ.

Команда:

    <META content="charset=windows-1251">

задає браузеру інформацію про кодування, в якій написаний текст HTML-документа. В даному випадку задана стандартне кодування Windows.

Між парою тегів <TITLE> і </TITLE> розташовується ім’я HTML-документа. Це ім’я браузер використовує в заголовку вікна Windows, в якому показує документ. Клацніть мишкою на наступне посилання і знайдіть текст ” Вправа 1 ” в заголовку вікна браузера.

Подивитися документ “Вправа 1”

У вікні браузера Microsoft Internet Explorer ви повинні побачити:

Тіло програми

Між тегами <BODY> і </BODY> розташовуються команди, слідуючи яким браузер виводить інформацію у вікно документа.

Наша проста програма використовує наступні команди:

  • <h2> – </h2>
  • <HR>
  • <P> – </P>
Заголовки

Заголовки являються важливою частиною документа. Вони поділяють інформацію на окремі логічні частини і тому істотно поліпшують її сприйняття.

Заголовки бувають різні за значенням, або як кажуть, по рівню. Підручник, наприклад, має назву – це заголовок першого рівня. Текст в підручнику розбитий на глави; назва глав – це заголовки другого рівня. Глави містять параграфи з заголовками третього рівня. Параграфи – пункти, позначені заголовками четвертого рівня.

В HTML-документі підтримуються заголовки шести рівнів за допомогою конструкції

<Hn>Текст заголовку</Hn>

Тут в якості n необхідно використовувати одну з цифр від 1 до 6, що позначає рівень заголовку.

Заголовки виділяються браузером при показі HTML-документа розміром шрифту і жирністю:

Це заголовок 2 рівня

Це заголовок 3 рівня

Це заголовок 4 рівня
Це заголовок 5 рівня
Це заголовок 6 рівня

Використовувати заголовки необхідно дуже акуратно у відповідності з його логічним рівнем в структурі документа.

Наприклад, історія про те, як хлопці пішли в ліс за грибами, може мати таку структуру (справа від заголовка проставлений його рівень):

1. Збори

2

2. Дорога до лісу

2

3. У лісі

2

3.1. Зустріч на галявині

3

3.2. Мурашник

3

3.3. Грибна галявина

3

4. Повернення додому

2

Горизонтальна лінія

Лінія – найпростіший графічний елемент, який вміє будувати браузер. Горизонтальна лінія задається тегом

<HR>, і цей тег не має парного закриваючого. Браузер виконуючі цю команду, виведе на екран ось таку лінію:

Горизонтальні лінії зручно використовувати для додаткового виділення (чи поділу) елементів документа на екрані. Подивіться ще раз, як лінія виділяє заголовок в нашому прикладі “Вправа 1” .

Абзац

Людині на відміну від комп`ютера важко сприймати однорідну інформацію, тому в книгах букви не покривають суцільно всю сторінку, хоча це добре заощадило б папір. Сторінка для людини містить багато пустот, а текст ділиться на порції – абзаци. Абзаци відокремлюються один від одного “червоними” та (або) порожніми рядками. Червоний рядок – це перший рядок абзацу з текстом, зміщеним вправо. Звичайно, розділяти текст на абзаци намагаються не як-небудь, а так, щоб кожний фрагмент містив закінчену думку.

Ось зараз розпочато новий абзац, тому що закінчено вступ, і піде розмова про те, як програмуються абзаци на HTML. Як вони виглядають, ви вже бачите в цьому тексті: як правило браузер використовує не червоний, а порожній рядок для відділення одного абзацу від іншого або абзацу від інших елементів документа. А задається абзац тегами

<P>і </P> , між якими поміщується текст. Фактично робота тегу <P> зводиться до виведення перед текстовим фрагментом порожнього рядка. А ось парний тег </P>просто ігнорується браузером, тому його можна і не писати.

Подивіться на “Вправу 1” і в тексті, який ви зараз читаєте, як виводяться абзаци на екран:

  • Абзац вирівнюється по лівому краю.
  • Між словами завжди поміщується рівно по одному пробілу незалежно від того, скільки пробілів ви розмістите в HTML-програмі.
  • Продовження абзацу на новий рядок відбувається тоді, коли наступне слово не поміщується в екранному рядку, а не тоді, коли ви перейшли на новий рядок в HTML-програмі.

Як працює браузер

Браузер виконуючи програму (HTML-текст) формує на екрані документ, який бачить користувач.

Важливою властивістю виконання являється послідовна побудова елементів на екрані зліва-направо і згори-донизу у відповідності з порядком проходження тегів в HTML-документі. Не можна написати програму так, щоб браузер спочатку намалював лінію в нижній частині екрану, а потім вивів текст у верхній. Браузер заповнює екран зліва-направо і згори-донизу. Він не може повернутися до тієї частини екрану, яку уже побудував.

Коли малюють на Бейсику або Сі, є можливість вивести елемент в будь-яке місце екрана за своїм розсудом. HTML-програми такою властивістю не володіють. Браузер не вміє працювати з екранними координатами.

Програмуючи на HTML, не можна орієнтуватися на певні розміри вікна, в якому браузер будує документ. Браузер, виконуючи програму, використовує реальні розміри вікна, які надані йому конкретним користувачем конкретного комп`ютера. Значить, одна і та ж HTML-програма може відобразити на екрані дещо по-різному на різних комп`ютерах і навіть на одному комп`ютері при різних його налаштуваннях або розмірах вікна, які легко міняються користувачем.

Вікно нашої “Вправи 1” може, виглядати так:

Або так:

Перевірте це самі! Відкрийте документ за наведеною нижче посиланням. Переведіть його з повноекранного режиму у віконний і, змінюючи розміри вікна мишкою, подивіться, що у вас буде виходити.

Відкрити документ “Вправа 1”

ви бачите, що лінія скорочується або подовжується в залежності від розмірів вікна.

Текст заголовка при маленькому вікні змушений зайняти 2 рядки.

Абзац виводиться так, щоб поміститися у вікні. При цьому браузер не звертає уваги на те, як розміщується абзац по рядках в HTML-тексті.

Всі ці примхи браузера змушують новачка на питання “Як працює браузер” відповісти коротко: “Погано!”.
Проте зазначені мінуси – це лише плата за універсальність HTML-програм. І треба сказати, плата не така висока.

Описані обмеження обертаються позитивною стороною HTML, роблячи його незалежним від комп`ютерної платформи (DOS, Windows, Unix, MacOs…) і параметрів відеовиводу конкретного комп`ютера (CGA, EGA, VGA, SVGA,…), зокрема, від кількості екранних точок. Це означає, що ваш HTML-документ здатні побачити всі люди, на комп`ютерах яких встановлена програма-браузер. І стає неважливим який тип комп`ютера і якою операційною системою користується конкретний користувач. Саме ця властивість HTML-програм відіграє таку важливу роль у глобальній комп`ютерній мережі Інтернет, де представлені всі існуючі типи комп`ютерів і операційних систем.

Вправа 2. Покращена HTML-сторінка

В програмі вірш написаний, як і необхідно в 4 рядках:

<P>
Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу.
</P>

Браузер виводить вірш як єдиний абзац. Хотілось би показати вірш по-людські. Давайте спробуємо зробити кожний рядок окремим абзацом:

<P>
Корова не похожа на лошадь.
<P>
А лошадь не похожа на корову.
<P>
Именно это сходство
<P>
мы и берем за основу.

Результат можна подивитися тут.

Вийшло! Однак, порожні рядки виглядають не дуже красиво.

Добре, не буду більше випробовувати ваше терпіння! HTML має засіб для завдання примусового переходу на новий рядок всередині абзацу.

Примусовий розрив рядку

Команда <BR>змушує браузер продовжити виведення абзацу з нового рядку. Тег <BR> використовується одиночно, без парного тега.

Подивіться, як тепер виглядає наш вірш.

Красиво! Це тому, що виведення вірша записано так:

<P>
Корова не похожа на лошадь.<BR>
А лошадь не похожа на корову.<BR>
Именно это сходство<BR>
мы и берем за основу.<BR>

Залишилось написати тільки заголовок вірша і ім`я автора. Ось тепер вірш виглядає, як в книзі:

Остаточний вигляд документа “Вправа 2”

А ось текст HTML-програми, яка показує цю сторінку:

Текст
HTML-програми		Коментар
<HTML>

  <head>
    <META content="charset=windows-1251">
    <TITLE>Вправа 2</TITLE>
  </HEAD>

  <BODY>
    <h2>Покращений HTML-документ</h2>
    <HR>
    <h3>Сходство</h3>
    <h4>Пит Хейн
        (перевод Н.А.Прохоровой)</h4>
    <P>
      Корова не похожа на лошадь.<BR>
      А лошадь не похожа на корову.<BR>
      Именно это сходство<BR>
      мы и берем за основу.<BR>
  </BODY>
</HTML>

початок HTML-документу

  початок заголовка
    інформація про документ
    назва документа
  кінець заголовка

  початок тіла
    заголовок 1 рівня
    горизонтальна лінія
    заголовок 2 рівня
    заголовок 3 рівня

    початок абзацу

    абзац з примусовими
    розривами рядків

  кінець тіла
кінець HTML-документа

Натисніть кнопку “Скидання”, потім оберіть вірні відповіді на запитання.


  1. Проведіть експериментальну роботу з документом «Вправа 2».
    Міняючи розміри вікна, подивіться, як браузер показує текст з примусовим розривом рядків.
    Що відбувається, коли вікно зменшується настільки, що в ньому не може поміститися цілком навіть одне слово?
  2. Якщо на вашому комп`ютері встановлено декілька різних програм-браузерів, проведіть досліди завдання 1 у кожному з них. Можливо результати будуть дещо відрізнятися, також як і зовнішній вигляд вихідного документа. Як ви вважаєте, чому?
  3. Самостійно створіть власний HTML-документ. Нехай це буде невелика розповідь про себе і своїх захопленнях. Програму можна написати в зовнішньому текстовому редакторі. А можна написати її прямо тут в нижчеприведеному вікні. У ньому вже є заготовка.

Інструкція
Кнопка «Поновити заготовку» – стирає у вікні текст користувача.
Кнопка «Показати документ» – викликає на екран нове вікно браузера і показує в ньому результат роботи написаної вами HTML-програми.
Зауваження
Закінчивши перегляд документа в новому браузері, закрийте його для повернення на цю сторінку. Тепер знову можна працювати у вікні текстового редактора.

ЗмістУрок 2

Урок 2: Що таке HTML? — Підручник HTML


У цьому уроці ми представимо вам вашого нового знайомого — HTML.

Що таке HTML?

HTML це «рідна мова» вашого браузера (програми перегляду веб-сторінок).

Кажучи коротко, HTML був винайдений в 1990 році вченим, Тімом Бернсом-Лі (Tim Berners-Lee), і призначався для полегшення обміну документами між вченими різних університетів. Проект мав більший успіх, ніж Тім Бернс-Лі міг очікувати. Цим винаходом HTML він заклав основи сучасної мережі Інтернет.

HTML це мова, яка дозволяє представляти інформацію (наприклад, наукові дослідження) в Інтернеті. Те, що ви бачите при перегляді сторінки в Інтернеті, це інтерпретація вашим браузером HTML-тексту. Ви можете відобразити html код сторінки прямо у вікні браузера. Для цього перейдіть до сторінки яка вас цікавить, і виберіть у браузері команду Вид-> Перегляд html-коду. Для перегляду в браузері Opera наведіть курсор на сторінку, клацніть правою кнопкою миші і виберіть в меню, «Джерело», або натисніть одночасно Ctrl + U. Відкриється нове вікно браузера з html кодом сторінки. У цьому вікні можна не лише переглянути код, але й скопіювати його для використання в якості основи своєї web-сторінки.

Для недосвідченого HTML-код виглядає складним, але цей підручник допоможе вам розібратися в ньому.

Для чого я можу використовувати HTML?

Якщо ви хочете створювати web-сайти, ви не обійдетеся без HTML. Навіть якщо ви використовуєте для створення web-сайтів такі програми, як Dreamweaver, знання основ HTML значно спростить вам життя, а ваш web-сайт стане набагато цікавішим. Доброю новиною є те, що HTML легко вивчати та використовувати. Через два уроки ви вже створите ваш перший web-сайт.

HTML використовується для створення web-сайтів. І це дуже просто!

Okay, але як розшифровується HTML?

HTML це скорочення від «HyperText Mark-up Language / мова гіпертекстової розмітки» — і на даному етапі цього знання вам цілком достатньо. Проте, щоб все було зрозуміліше, давайте з’ясуємо деякі деталі.
  • Hyper протилежно linear / порядково. У добрі старі часи — коли кішки ловили мишей — комп’ютерні програми працювали порядково: програма виконувала один рядок, потім переходила до виконання наступного, і т. д. Але HTML працює по-іншому — ви можете перейти куди і коли захочете. Наприклад, не потрібно відвідувати MSN.com до того, як відвідати Htmlbook.at.ua.
  • Text — все зрозуміло.
  • Mark-up — це розмітка, те, що ви робите з текстом. Ви розмічаєте текст так само, як ви робите це в текстових редакторах: виставляєте заголовки, списки, виділяєте текст жирним шрифтом і т. д.
  • Language це мова — HTML. У ньому використовується багато англійських слів.
У цьому підручнику ви будете вивчати так звані XHTML (Extensible HyperText Mark-up Language), який, коротко кажучи, є новим і більш структурованим варіантом HTML.

Якщо ви зрозуміли, що таке HTML (і XHTML), давайте перейдемо до того, для чого вони обидва призначені: до створення web-сайтів.

HTML — Вікіпедія

Hypertext Markup Language (HTML) (укр. Мова розмітки гіпертекстових документів) —стандартна мова розмітки для створення веб-сторінок і веб-додатків. З Cascading Style Sheets (CSS) і JavaScript, вона утворює тріаду основних технологій для World Wide Web.

Веб-браузери отримують HTML-документи з веб-сервера або з локальної пам’яті і передають документи в мультимедійні веб-сторінки. HTML описує структуру веб-сторінки семантично і спочатку включені сигнали для зовнішнього вигляду документа.

Елементи HTML є будівельними блоками сторінок HTML. За допомогою конструкцій HTML, зображення та інші об’єкти, такі як інтерактивні форми, можуть бути вбудовані у візуалізовану сторінку. HTML надає засоби для створення структурованих документів, позначаючи структурну семантику тексту, наприклад заголовки, абзаци, списки, посилання, цитати та інші елементи. Елементи HTML окреслені тегами , написаними з використанням кутових дужок . Теги, такі як і безпосередньо вводять вміст на сторінку. Інші теги, такі як<img /> <input /> <p>оточують і надають інформацію про текст документа і можуть включати інші теги як під-елементи. Браузери не показують теги HTML, але використовують їх для інтерпретації вмісту сторінки.

HTML може вбудовувати програми, написані на мові сценаріїв, наприклад JavaScript, що впливає на поведінку та вміст веб-сторінок. Включення CSS визначає вигляд і компонування вмісту. World Wide Web Consortium (W3C), які супроводжують як HTML і CSS стандартів, заохочує використання CSS над явним презентаційним HTML з 1997 року.[1]

HTML впроваджує засоби для:[1]

  • створення структурованого документа шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
  • отримання інформації із Всесвітньої мережі через гіперпосилання;
  • створення інтерактивних форм;
  • включення зображень, звуку, відео, та інших об’єктів до тексту.

1980 року фізик Тім Бернерс-Лі, який на той час був співробітником CERN, запропонував і прототипував систему INQUIRE, яка мала полегшити сумісне користування документами для дослідників CERN.

1989 року Бернерс-Лі запропонував впровадити на базі Internet гіпертекстову систему документів.[2]

Вже наприкінці 1990 року він розробив HTML і написав браузер та серверне програмне забезпечення для запропонованої системи. У цьому ж році Тім Бернерс-Лі та Роберт Кайо, інженер інформаційних систем CERN, подали спільну заявку на фінансування проєкту, проте цей проєкт не був офіційно прийнятий CERN.

Наприкінці 1991 року Тім Бернерс-Лі опублікував в Інтернеті перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги» (HTML Tags).[3] В ньому були описані 20 елементів первісної, відносно простої схеми розмітки HTML. За винятком тегу гіперпосилання, який був жорстко підпорядкований внутрішньому SGML-формату документації CERN. Тринадцять із тих елементів ще й досі існують у HTML4.[4]

Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет-розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML: «Hypertext Markup Language (HTML)» Internet-проєкт, авторами якої були Тім Бернерс-Лі та Ден Конолі. Ця специфікація вже містила визначення типу документа, яке чітко зазначало граматику HTML.[5]

Проєкт втратив силу через 6 місяців, проте був відомий за офіційне визнання в ньому створеного для браузера NCSA Mosaic тега додавання зображень, не розділяючи філософію IETF щодо заснування стандартів на успішних прототипах.[6] Так само пізніше в 1993 році в конкуруючому Інтернет-проєкті Дейва Раджетта «HTML+ (Hypertext Markup Format)», було запропоновано стандартизувати вже запроваджені браузерами сенсаційні на той час можливості, такі як таблиці та перші інтерактивні форми.

На початку 1994 року, після того, як проєкти «HTML» і «HTML+» втратили свою силу, IETF створив Робочу групу HTML (HTML Working Group). 1995 року Робоча група HTML завершила роботу над документом «HTML 2.0» (опублікований як RFC із номером 1866), першою специфікацією, що мала бути використана як базовий стандарт для подальших вдосконалень HTML.[6] Версія 2.0 окреслювала чіткі відмінності між новим виданням специфікації та попередніми проєктами.

Подальші розробки під заступництвом IETF зіштовхнулися з конкуруючими інтересами. З 1996 року специфікації HTML затверджувались Консорціумом W3C, враховуючи доповнення до розмітки, що впроваджувалися компаніями-розробниками браузерів. Тим не менш, у 2000 році HTML стала міжнародним стандартом (ISO/IEC 15445:2000).

Остання специфікація HTML, опублікована W3C наприкінці 1999 року, має назву «HTML 4.01 Recommendation». Усі спірні питання та помилки цієї специфікації були офіційно визнані у списку друкарських помилок, опублікованому в 2001 році.

Версії[ред. | ред. код]

Тім Бернерс-Лі представив HTML в дослідницькому центрі CERN в Женеві 1989 року.[7]

  • HTML (без номера версії, 3 листопада 1992): найперша версія, орієнтована лише на текст.[8]
  • HTML (без номера версії, 30 квітня 1993): до тексту додано атрибути, які визначають курсивне або жирне написання літер, та зображення.
  • HTML+ (листопад 1993): заплановані доповнення, які потрапили до наступних версій, але ніколи не були відокремлені як HTML+.[9]
  • HTML 2.0 (листопад 1995): визначена стандартом RFC 1866 версія з підтримкою форм. Статус цього стандарту вже «історичний», також визнані застарілими попередні версії.
  • HTML 3.0: версія, яка не зазнала поширення, оскільки разом із випуском браузера Netscape Navigator версії 3, цей стандарт вже був застарілим.
  • HTML 3.2 (14 січня 1997): були додані численні можливості, такі як таблиці, обтікання текстом зображень, інтеграція аплетів.
  • HTML 4.0 (18 грудня 1997): були додані таблиці стилів, скрипти та фрейми. Також відбулось розділення на Strict (суворе дотримання стандартів), Frameset (з підтримкою фреймів), Transitional (перехідний). 24 квітня 1998 було випущено виправлену версію цього стандарту.
  • HTML 4.01 (24 грудня 1999): заміна версії HTML 4.0, містить численні дрібні виправлення.
  • HTML 5 (Working Draft, 5 квітня 2008):[10] HTML 5 має новий словник, побудований на основі HTML 4.01 та XHTML 1.0. Також перероблена і розширена пов’язана з HTML специфікація DOM.
  • XHTML 1.0 (26 січня 2000): висловлення стандарту HTML 4.01 засобами XML. 1 серпня 2002 було випущено оновлену редакцію стандарту.
  • XHTML 1.1 (31 травня 2001): після того, як XHTML буде розділено на модулі, стандарт XHTML 1.1 визначатиме сувору версію, в якій не буде запроваджених HTML 4 можливостей Frameset та Transitional.
  • XHTML 2.0 (розробка припинена в 2010 році): ця версія вже не базується на HTML 4.01 і додає деякі нові теги. Буде завершено розділення між представленням та вмістом.

Для поліпшення взаємодії SGML вимагає аби кожна похідна мова (HTML у тому числі) визначала свою кодову таблицю для кожного документа, яка складається з репертуару (перелік різноманітних символів) та позиції символу (перелік цифрових посилань на символи з репертуару). Кожен документ HTML — це послідовність символів із репертуару.

HTML використовує найповнішу кодову таблицю UCS (англ. Universal Character Set — Універсальний Набір Символів).

Проте однієї кодової таблиці недостатньо для того, щоб браузери могли правильно відтворювати документи HTML. Для цього браузерам потрібно «знати» специфічну кодову таблицю документа, яку автор має зазначати завжди в елементі meta із параметром charset. За замовчуванням використовується кодова таблиця ISO-8859-1, відома також як Latin-1.

Розмітка[ред. | ред. код]

Розмітка в HTML складається з чотирьох основних компонентів: елементів (та їхніх атрибутів), базових типів даних, символьних мнемонік та декларації типу документа.

Загальна структура[ред. | ред. код]

Документ HTML 5.2 складається з трьох частин:

  1. Декларація типу документа (англ. Document type declaration, Doctype), на початку документа, в якій визначається тип документа (DTD).
  2. Шапка документа (знаходиться в межах елемента head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері;
  3. Тіло документа (може знаходитися в елементі body), в якому міститься основна інформація документа.

Нижче наведено приклад загальної структури HTML-документа:

<! DOCTYPE html> 
<html>
   <head>
      <title>Назва</title>
   </head>
   <body>
      <p> Hello world!</p>
   </body>
</html>
Елементи[ред. | ред. код]

Елементи являють собою базові компоненти розмітки HTML. Кожен елемент має дві основні властивості: атрибути та зміст (контент). Існують певні настанови щодо кожного атрибута та контента елемента, які треба виконувати задля того, щоб HTML-документ був визнаний валідним.

У елемента є початковий тег, який має вигляд <element-name>, та кінцевий тег, який має вигляд </element-name>. Атрибути елемента записуються в початковому тегу одразу після назви елемента, контент елемента записується між його двома тегами. Наприклад: <element-name element-attribute="attribute-value">контент елемента</element-name>.

Деякі елементи, наприклад br, не містять контенту, тож і не мають кінцевого тега. Елемент може не мати початкового та кінцевого тега (наприклад, елемент head), проте він завжди буде представлений в документі.[4] Нижче зазначені деякі типи елементів розмітки HTML.

Елементи структурної розмітки застосовуються задля опису семантики тексту, іншими словами ці елементи описують призначення тексту свого контенту. Вони не зазначають ніякого спеціального (візуального) відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента. Для подальшого стилізування тексту рекомендується використовувати Каскадні таблиці стилів (CSS). Наприклад:

Фрагмент HTML-розмітки документаВідтворення в браузері
<h2>Давньогрецькі боги</h2>
<p>
<strong>Посейдон</strong> — володар світових вод,
Океану, в латинян йому відповідав <em>Нептун</em>, у 
слов'ян — <em>Цар Моря, Цар Морський, Водяник</em>.
</p>

Елементи візуальної розмітки застосовуються задля опису візуальних ефектів тексту, не зазначаючи при цьому функції тексту свого контенту. Остання чинна специфікація HTML 4.01 визначає більшість з цих елементів такими, що не рекомендується застосовувати у розмітці. Наприклад:

Фрагмент HTML-розмітки документаВідтворення в браузері
<font size="5">Давньогрецькі боги</font>
<br />
<b>Посейдон</b> — володар світових вод, Океану, 
в латинян йому відповідав <i>Нептун</i>, у слов'ян — 
<i>Цар Моря, Цар Морський, Водяник</i>.
Давньогрецькі боги


Посейдон — володар світових вод, Океану, в латинян йому відповідав Нептун, у слов’ян — Цар Моря, Цар Морський, Водяник

Елементи розмітки гіпертексту застосовуються задля з’єднання частин документа з іншими документами. Наприклад:

Фрагмент HTML-розмітки документаВідтворення в браузері
<a href="http://uk.wikipedia.org/wiki/">Вікіпедія</a>
Вікіпедія
Атрибути[ред. | ред. код]

Більшість з атрибутів елемента являє собою пару «назва-значення», розділених між собою знаком рівняння, та записаних у початковому тегу одразу після назви елемента. Значення атрибуту може бути окреслено лапками (подвійними або одиничними), також, якщо значення атрибуту складається з певних символів, його можна не виділяти лапками зліва. Проте невзяття значення атрибутів у лапки вважається небезпечним кодом. На відміну від атрибутів виду «назва-значення», є певні атрибути, що впливають на елемент, назва яких лише з’явилась в початковому тегу (наприклад, атрибут ismap елемента img).

Більшість елементів можуть мати будь-який з загальних атрибутів: Атрибут id впроваджує унікальний ідентифікатор елемента по всьому документу. Доданий до URL документа, він впроваджує глобальний унікальний ідентифікатор елемента.

Це може використовуватися:

Атрибут title використовується для додавання пояснювального тексту для елемента. В більшості браузерів значення цього атрибуту можна побачити як підказку, що виникає при наведенні курсора на елемент.

Атрибут class впроваджує засіб об’єднання схожих елементів у класи.

Це може використовуватися для:

  • відтворення візуальних ефектів. Для презентаційної розмітки, наприклад, документ може містити class="notation", який визначає всі елементи, у яких клас визначений як "notation", підпорядкованими головному тексту документа. Такі елементи можна зібрати докупи і показати як виноски внизу сторінки, замість того, щоб показувати їх на тому місці, де вони з’являються в самому HTML-коді документа;
  • структурного поділу тексту. Для семантичної розмітки, наприклад, класи використовуються у створенні мікроформатів.
Базові типи даних[ред. | ред. код]

Оскільки HTML є похідною мовою від SGML, усі типи даних HTML ґрунтуються на базових типах даних SGML (наприклад, PCDATA, CDATA, NAME, ID, NUMBER).

Кожен елемент має дві властивості — атрибути і вміст, які мають певні значення. Всі можливі значення цих двох властивостей прописуються відповідно до визначених у DTD типів даних. Нижче наведено кілька типів даних HTML:

  • % Color — колір sRGB, записаний у шістнадцятковому вигляді, або одне з шістнадцяти службових слів;
  • % ContentType — тип умісту/носія;
  • % Charset — таблиця кодування символів;
  • % Character — мнемоніка або окремий символ із UCS;
  • % Length — nn розмір в пікселях, nn% — у відсотках;
  • % URI — Уніфікований ідентифікатор ресурсів;
  • % Datetime — дата та час;
  • % Script — скрипт;
  • % StyleSheet — дані таблиць стилів;
  • % Text — текстові рядки.
Мнемоніки[ред. | ред. код]

Існують такі випадки, коли в документі потрібно використати якийсь символ, якого немає в обраній для документа кодовій таблиці. Для таких випадків можливо замінити символ на еквівалентне йому SGML-посилання на символ (мнемоніку).

Розрізняють мнемоніки двох видів:

  • Цифрові мнемоніки (десяткові або 16-кові)

Визначають кодову позицію символу із таблиці кодів UCS. Наприклад:

МнемонікаСимвол
å
å
å
  • Мнемоніки із певних сполучень символів

Такі мнемоніки використовують псевдоніми замість кодів символів. Проте в HTML не визначені псевдоніми для кожного символу із UCS. Наприклад:

МнемонікаСимвол
<
&
»

HTML 4.01 підтримує три різні набори мнемонік:

  • Мнемоніки для символів ISO 8859-1 (Latin-1)
  • Символи, математичні символи та грецькі літери
  • Мнемоніки для символів розмітки та інтернаціоналізації

‘

Валідація[ред. | ред. код]

Так само як і кожна мова, будь-яка комп’ютерна мова має свою власну граматику, словник і синтаксис. І кожен документ, написаний цією мовою, має дотримуватися цих правил. HTML використовує машинно-зчитуючу граматику, яка називається DTD, механізм, успадкований від SGML.

Проте, так само як і тексти природної мови можуть містити граматичні помилки, документи, що використовують мови розмітки можуть не дотримуватись визначеної граматики. Процес перевірки документа на дотримання визначених мовою правил називають валідацією, а інструмент, який здійснює перевірку  — валідатором. Документ, що пройшов цей процес без помилок, називають валідним.

Згідно з цією концепцією, «валідація HTML розмітки» визначається як процес перевірки веб-документа за правилами граматики (визначеними в DTD), на які він посилається із елемента doctype.

Один із важливих принципів програмування: «Будьте консервативні в тому, що ви робите; будьте ліберальним в тому, що ви приймаєте».[11]

Браузери дотримуються другої частини цього принципу: вони приймають веб-документи такими, які вони є, та намагаються відтворити їх на екрані, навіть якщо вони не використовують стандартний HTML. Зазвичай це означає, що браузер спробує «здогадатися» про те, що автор документа мав на увазі. Проблема полягає в тому, що різні браузери (або навіть різні версії одного браузера) зроблять різні припущення щодо одних і тих же нестандартних конструкцій, і навіть гірше: якщо HTML-код дуже відрізняється від стандарту, браузер безнадійно заплутається і безладно відтворить сторінку на екрані, або навіть аварійно закриється.

Саме тому дотримуватися першої частини принципу належить авторам документа, шляхом перевірки своїх документів на дотримання стандарту. Найкращий інструмент для цього — валідатор HTML-розмітки.

Перегляд[ред. | ред. код]

Для перегляду HTML-розмітки документа можна використовувати будь-який текстовий редактор. Для перегляду документа, відтвореного за правилами HTML-розмітки, використовується браузер.

Транспортування в мережі[ред. | ред. код]

HTML документи можуть бути транспортовані так само як і будь-які інші файли (наприклад, за допомогою протоколів FTP, TCP), проте зазвичай вони транспортуються із сервера за допомогою протоколу HTTP або по електронній пошті.

HTTP[ред. | ред. код]

Всесвітня павутина складається в основному з HTML-документів, переданих з веб-серверів для браузерів, використовуючи протокол HTTP. До того ж HTTP використовується для передачі зображень, звуків, відео та іншого супутнього контенту. Для правильного відтворення документа браузером окрім нього самого передається ще й інша інформація (метадані), у якій зазвичай міститься визначення MIME типу (наприклад, text/html або application/xhtml+xml) та кодової таблиці документа.

Електронна пошта[ред. | ред. код]

Більшість графічних поштових клієнтів дозволяють використовувати підмножину елементів HTML (часто визначених стандартом як застарілі та не рекомендовані у розмітці), щоб забезпечити візуальне форматування тексту, роблячи неможливим семантичну розмітку тексту засобами поштового клієнта. Багато таких клієнтів включають в себе WYSIWYG-редактор HTML для складання повідомлень. Використання HTML у повідомленнях електронної пошти є спірним питанням через проблеми з сумісністю у різних поштових клієнтів; також HTML може допомогти приховати фішинг.

Поточні напрямки розвитку і використання HTML[ред. | ред. код]

З моменту свого створення HTML і пов’язані з нею протоколи порівняно швидко отримали визнання. Однак у перші роки існування цієї мови розмітки не було жодних чітких стандартів. Хоча її творці спочатку і задумували HTML як семантичну мову, позбавлену презентаційних можливостей[12], її практичне використання із різними браузерами призвело до додавання багатьох презентаційних елементів і атрибутів в HTML. Останні стандарти, пов’язані з HTML, відображають зусилля з подолання хаотичного розвитку мови і створення раціональної основи для розробки як змістовних, так і виразних документів.[13] Щоб повернути HTML її роль семантичної мови, Консорціум Всесвітньої павутини розробив мови стилізування, такі як Каскадні таблиці стилів та Розширена мова таблиць стилів, аби перенести на них відповідальність за вигляд документа. У зв’язку з цим специфікація HTML повільно почала повертатися виключно до семантичних елементів.

Семантичний HTML[ред. | ред. код]

Семантичний HTML — спосіб написання HTML, що віддає перевагу підкресленню смислу закодованої інформації радше за її подання (зовнішній вигляд). Ще з самого початку свого розвитку HTML мав у складі елементи семантичної розмітки[14], проте також мав і елементи презентаційної розмітки, такі як font, i та center. Також HTML має семантично-нейтральні елементи span та div. З кінця 1990-х, коли Каскадні таблиці стилів почали належно працювати в більшості браузерів, авторам документів було рекомендовано уникати використання презентаційної розмітки HTML з метою розділення представлення і змісту.[15]

У 2001 році в статті про Семантичну павутину Тім Бернерс-Лі та інші навели приклади шляхів, за якими одного дня «агенти» інтелектуального програмного забезпечення зможуть автоматично прочесати Всесвітню мережу та відшукати, відфільтрувати та встановити співвідношення попередньо непов’язаних фактів на благо користувачів.[16] Такі агенти є незвичайними навіть зараз, але деякі з ідей Web 2.0, мешапів та сервісів порівняння цін стають все ближчими до реалізації. Основна відмінність між цими гібридними веб-застосунками та семантичним агентом, який згадується у статті Бернерса-Лі, полягає в тому, що нинішні шляхи збирання та гібридизації інформації, як правило, створені веб-розробниками, які вже точно знають де шукати потрібну інформацію і яка в неї API-семантика.

Важливими типом веб-агента, який прочісує і читає веб-сторінки автоматично, проте без знання того, що він може виявити, є пошуковий робот. Цей програмний агент залежить від семантичної ясності веб-сторінок, які він знаходить, оскільки в ньому використовуються різні методи і алгоритми зчитування та індексації мільйонів веб-сторінок в день, що забезпечує користувачів Інтернету пошуковими можливостями, без яких Всесвітня павутина була б корисна тільки на малу частину від її сучасних можливостей.

Для того щоб пошукові роботи мали можливість оцінити значення фрагментів тексту, які вони знаходять в документах HTML, а також для тих, хто створює мешапи та інші гібридні агенти, так само як і для більш автоматизованих агентів, необхідно аби семантичні структури, які існують в HTML, набули широкого і рівномірного застосовування, щоб виділити зміст опублікованого тексту.[17]

Елементи презентаційної розмітки є забороненими в останніх чинних специфікаціях HTML і XHTML, а також і в проєкті HTML 5.

Добрий семантичний HTML також покращує доступність веб-документів. Наприклад, коли браузер або аудіо-браузер може правильно встановити структуру документа, він не буде витрачати час користувачів з вадами зору на прочитання повторюваної або неактуальної інформації, якщо вона була розмічена правильно.

Проєкт специфікації HTML 5[ред. | ред. код]

HTML 5 — це наступна значна переробка стандарту HTML. Робота над створенням специфікації, відома під назвою «Web Applications 1.0», розпочата WHATWG в червні 2004 року.[18]

HTML 5 спрямований на скорочення використання заснованих на плагінах RIA-технологій, таких як Adobe Flash, Microsoft Silverlight і Sun JavaFX, хоча досягнення цієї мети займе багато років.[19]

Специфікація HTML 5 зводиться до надання семантичного рівня мови розмітки і пов’язаних з ними семантичних рівнів API для сценаріїв задля авторизації доступних сторінок у Всесвітній павутині, починаючи від статичних документів і закінчуючи динамічними застосунками.[20] HTML 5 вводить ряд нових елементів і атрибутів, які відображають типову архітектуру сучасних веб-сторінок. Деякі з них є семантичними замінами загально-використовуваних блочних (div) і вбудованих (span) елементів, наприклад елемент nav (навігаційного блок сторінки) і footer. Інші елементи забезпечують нові функціональні можливості через стандартизований інтерфейс, наприклад елементи audio і video.

Наразі специфікація має статус «у розробці», та, як очікується, матиме його ще протягом трьох років, хоча розробка частин HTML 5 буде завершена і реалізована в браузерах ще до того, як специфікація отримає остаточний статус Рекомендації W3C.[21]

XHTML[ред. | ред. код]

Докладніше: XHTML

Ймовірно, HTML — найуспішніша мова розмітки документів у всьому світі.[джерело?] Проте, коли світові представили XML, було вирішено створити нову версію HTML, похідну від XML. Адже з XML-заснованим HTML інші XML-мови могли би включати частини XHTML, а XHTML-документи могли б включати частини інших мов розмітки. Також автори веб-документів могли б скористатися перевагами редизайну задля очищення деяких з найбільш неохайних частини HTML, а також додати деякі з нових необхідних функцій, таких як покращені форми.[22] Нижче зазначені деякі переваги використання XHTML замість HTML.

Якщо документ є лише чистим XHTML 1.0 (не включає інші мови розмітки), то різниця між XHTML та HTML майже не помітна. Проте, оскільки стають доступними все більше і більше XML-інструментів (наприклад, XSLT для перетворення документів), переваги використання XHTML стають все помітнішими. Наприклад, XForms дозволяє досить просто керувати редагуванням документів XHTML (або будь-яких інших видів документа XML). Семантичні веб-застосунки також зможуть скористатися документами XHTML за своїми потребами.[23] Якщо документ більш ніж просто XHTML 1.0 (наприклад, у документі використовуються мови розмітки MathML, SMIL, або SVG), тоді переваги використання XHTML значно помітніші, адже HTML не підтримує такі комбінації мов розмітки в одному документі.

  1. ↑ а б HTML & CSS — W3C. www.w3.org (en). Процитовано 2017-11-22. 
  2. ↑ Tim Berners-Lee, «Information Management: A Proposal.» CERN (March 1989, May 1990).
  3. ↑ First mention of HTML Tags on the www-talk mailing list. World Wide Web Consortium. 1991-10-29. Архів оригіналу за 2013-05-12. Процитовано 2009-11-19. 
  4. ↑ а б Index of elements in HTML 4. World Wide Web Consortium. 1999-12-24. Архів оригіналу за 2013-05-12. Процитовано 2009-11-19. 
  5. ↑ Tim Berners-Lee (1991-12-09). Re: SGML/HTML docs, X Browser (archived www-talk mailing list post). Архів оригіналу за 2013-05-12. Процитовано 2009-11-19. «SGML is very general. HTML is a specific application of the SGML basic syntax applied to hypertext documents with simple structure.» 
  6. ↑ а б Raymond, Eric. IETF and the RFC Standards Process. The Art of Unix Programming. Архів оригіналу за 2005-03-17. Процитовано 2009-11-21. 
  7. ↑ Information Management: A Proposal, Tim Berners-Lee, 1989
  8. ↑ HTML, Urversion
  9. ↑ A Review of the HTML+ Document Format, David Raggett
  10. ↑ HTML 5, W3C Working Draft
  11. ↑ Help and FAQ for the Markup Validator. World Wide Web Consortium. 2007-07-06. Архів оригіналу за 2013-05-12. Процитовано 2009-11-29. «One of the important maxims of computer programming is: «Be conservative in what you produce; be liberal in what you accept.»» 
  12. ↑ HTML Design Constraints. 03. Архів оригіналу за 2013-05-12. Процитовано 2009-12-01. «Many text editing systems (Microsoft Word, The NeXT text object, the Mac text object, etc) handle text in a variety of styles but do not have any concept of nestable structure in the SGML sense. …It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.» 
  13. ↑ Pris Sears (1996). HTML. Архів оригіналу за 2013-05-12. Процитовано 2009-12-01. «The final control of HTML rests squarely on the shoulders of individual authors of HTML documents. If authors can be seduced by blinking, barking, and spinning proprietary tags, and do not care who is excluded by such practices, the Web will become more and more fragmented. If authors decide that the most important facet of HTML is its device independence, its ability to make information sharable to everyone in the world, regardless of software and hardware, then HTML specifications will be adhered to.» 
  14. ↑ Berners-Lee, Tim; Fischetti, Mark (2000). Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web by Its Inventor. San Francisco: Harper. ISBN 978-0-06-251587-2. 
  15. ↑ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. 2009-09-08. Архів оригіналу за 2013-05-12. Процитовано 2009-12-01. «CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.» 
  16. ↑ Tim Berners-Lee, James Hendler and Ora Lassila (2001). The Semantic Web. Scientific American. Архів оригіналу за 2013-05-12. Процитовано 2009-12-01. «At the doctor’s office, Lucy instructed her Semantic Web agent through her handheld Web browser. The agent promptly retrieved information about Mom’s prescribed treatment from the doctor’s agent, looked up several lists of providers, and checked for the ones in-plan for Mom’s insurance within a 20-mile radius of her home and with a rating of excellent or very good on trusted rating services. It then began trying to find a match between available appointment times at Pete’s and Lucy’s busy schedules. In a few minutes the agent presented them with a plan. Pete didn’t like it. University Hospital was all the way across town from Mom’s place, and he’d be driving back in the middle of rush hour. He set his own agent to redo the search with stricter preferences about location and time. Lucy’s agent, having complete trust in Pete’s agent in the context of the present task, automatically assisted by supplying access certificates and shortcuts to the data it had already sorted through. Almost instantly the new plan was presented: a much closer clinic and earlier times.…» 
  17. ↑ Nigel Shadbolt, Wendy Hall and Tim Berners-Lee (2006). The Semantic Web Revisited. IEEE Intelligent Systems. Архів оригіналу за 2013-05-12. Процитовано 2009-10-02. 
  18. ↑ http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2004-June/000005.html
  19. ↑ Krill, Paul (2009-06-16). HTML 5: Could it kill Flash and Silverlight?. InfoWorld. Computerworld. Архів оригіналу за 2013-05-12. Процитовано 2009-12-02. «HTML 5, a groundbreaking upgrade to the prominent Web presentation specification, could become a game-changer in Web application development, one that might even make obsolete such plug-in-based rich Internet application (RIA) technologies as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.» 
  20. ↑ Introduction — HTML5. W3C. Архів оригіналу за 2013-05-12. Процитовано 2009-12-02. «This specification is limited to providing a semantic-level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications.» 
  21. ↑ When will HTML5 be finished?. WHATWG Wiki. Архів оригіналу за 2013-05-12. Процитовано 2009-12-02. «Different parts of the specification are at different maturity levels. Some sections are already relatively stable and there are implementations that are already quite close to completion, and those features can be used today. But other sections are still being actively worked on and changed regularly, or not even written yet.» 
  22. ↑ Steven Pemberton (2004-07-21). HTML and XHTML Frequently Answered Questions. Архів оригіналу за 2013-05-12. Процитовано 2009-12-08. «HTML is probably the most successful document markup language in the world. But when XML was introduced, a two-day workshop was organised to discuss whether a new version of HTML in XML was needed. The opinion at the workshop was a clear ‘Yes’: with an XML-based HTML other XML languages could include bits of XHTML, and XHTML documents could include bits of other markup languages. We could also take advantage of the redesign to clean up some of the more untidy parts of HTML, and add some new needed functionality, like better forms.» 
  23. ↑ Steven Pemberton (2004-07-21). HTML and XHTML Frequently Answered Questions. Архів оригіналу за 2013-05-12. Процитовано 2009-12-08. «If your document is just pure XHTML 1.0 (not including other markup languages) then you will not yet notice much difference. However as more and more XML tools become available, such as XSLT for tranforming documents, you will start noticing the advantages of using XHTML. XForms for instance will allow you to edit XHTML documents (or any other sort of XML document) in simple controllable ways. Semantic Web applications will be able to take advantage of XHTML documents. If your document is more than XHTML 1.0, for instance including MathML, SMIL, or SVG, then the advantages are immediate: you can’t do that sort of thing with HTML.»

Урок 3: Що таке HTML-теги? — Підручник HTML


Тепер ви готові почати вивчення HTML-тегів.

«Теги»?

Теги це мітки, які ви використовуєте для вказівки браузеру, як він повинен показувати ваш web-сайт.

Всі теги мають однаковий формат: вони починаються знаком «<» і закінчуються знаком sign «>».

Зазвичай є два теги — відкриваючий: <html> і закриваючий: </html>. Різниця в тому, що в закриваючому є слеш «/».

Весь вміст, що вміщено між відкриваючими і закриваючими тегами, є вмістом тега.

Але, як то кажуть, в кожному правилі є винятки, і в HTML також є теги, які є і відкривають, і закривають. Ці теги не містять тексту, а є мітками, наприклад, перенесення рядка виглядає так: <br />.

HTML — це теги, і нічого крім тегів. Для вивчення HTML потрібно вивчити різні теги.

Можете ви привести які-небудь приклади?

Okay, тег <b> інформує браузер, що весь текст між <b> і </b> повинен бути надрукований жирним шрифтом. («b» це скорочення від «bold».)

Приклад 1:

<b>This text must be bold</b>

буде виглядати при перегляді в браузері:
Теги <h2> , <h3> , <h4> , <h5> , <h5> і <h6> вказують браузеру створювати заголовки (h від «heading»), де <h2> це заголовок першого рівня — самий великий шрифт, <h3> — заголовок другого рівня — шрифт меншого розміру, і <h6> — заголовок шостого рівня — найнижчого в цій ієрархії, і найменший шрифт.

Приклад 2:

<h2> Це заголовок </h2>
<h3> Це підзаголовок </h3>

буде виглядати в браузері:

Це підзаголовок

У якому регістрі повинні вводитися букви тегів?

Більшості браузерів байдуже, в якому регістрі введено літери тегів. <HTML>, <html> Або <HtMl> зазвичай дає однаковий результат. Однак коректним буде нижній регістр. Тому звикайте друкувати теги в нижньому регістрі.

Де розміщувати всі ці теги?

Ви друкуєте ваші теги в HTML-документі. На web-сайті є один або більше HTML-документів. Коли ви ходите по Web, ви відкриваєте різні HTML-документи.

Якщо ви перейдете до наступного уроку, то вже через 10 хвилин зможете створити свій перший web-сайт.

HTML Підручник. Уроки для початківців. W3Schools українською

HTML — це стандартна мова розмітки для веб-сторінок.

За допомогою HTML ви можете створити свій власний веб-сайт.

Мова HTML легка для вивчення — Ви будете насолоджуватись навчанням та власними результатами!

Що таке HTML? Як створюють веб-сайти?

HTML (від англ. HyperText Markup Language — «мова гіпертекстової розмітки») — стандартизована мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок мають зміст розмітки мовою HTML (або XHTML). Мова HTML інтерпретується браузерами; отриманий в результаті інтерпретації форматований текст відображається на екрані монітора комп’ютера або мобільного пристрою.

Мова HTML до 5-ї версії визначалась як додаток SGML (стандартної узагальненої мови розмітки за стандартом ISO 8879). Специфікації HTML5 формулюються в термінах DOM (об’єктній моделі документа).

Мова XHTML є більш суворим варіантом HTML, вона слідує синтаксису XML і є додатком мови XML в області розмітки гіпертексту.

У всесвітній павутині HTML-сторінки, як правило, передаються браузерам від сервера по протоколам HTTP або HTTPS, у вигляді простого тексту або з використанням шифрування.

Інформація із Вікіпедії

Приклади в кожному розділі

Цей HTML підручник містить сотні HTML прикладів.

За допомогою нашого онлайн HTML редактора ви можете редагувати HTML код і, натиснувши на кнопку, переглянути результат.

Натисніть на кнопку «Спробуйте самі», щоб побачити, як це працює.

Почати вивчення HTML негайно!

HTML Приклади

В кінці цього підручника HTML ви знайдете більше 200 прикладів.

З нашим онлайн-редактором ви можете редагувати і тестувати кожний приклад самостійно.

Перейти до HTML Прикладів!

HTML Вправи

Цей HTML підручник також містить близько 100 HTML вправ.

Перевірте себе за допомогою вправ

Вправа:

Додайте «виринаючу підказку» до параграфу нижче з текстом «About W3Schools».

<p =»About W3Schools»>W3Schools is a web developer’s site.</p>


Відправити відповідь »

Почати вправи

HTML Перевірочна Вікторина

Перевірте ваші HTML навички з нашою HTML Вікториною!

Почати HTML Вікторину!

HTML Довідники

На нашому сайті ви знайдете повні довідники на теги, атрибути, події, назви кольорів, об’єкти, набори символів, кодування URL, коди мов, HTTP-повідомлення і багато іншого.

HTML Довідник тегів

Здай HTML Іспит — Отримай свій Диплом!

W3Schools Certification

W3Schools Онлайн Сертифікация

Ідеальне рішення для професіоналів, яким необхідно збалансувати роботу, сім’ю і кар’єру.

Вже випущено більше ніж 25 000 сертифікатів!

Отримайте Ваш Сертифікат! »

HTML Сертифікат документує ваші знання HTML.

CSS Сертифікат документує ваші знання CSS.

JavaScript Сертифікат документує ваші знання JavaScript та HTML DOM.

Python Сертифікат документує ваші знання Python.

jQuery Сертифікат документує ваші знання jQuery.

SQL Сертифікат документує ваші знання SQL.

PHP Сертифікат документує ваші знання PHP і MySQL.

XML Сертифікат документує ваші знання XML, XML DOM і XSLT.

Bootstrap Сертифікат документує ваші знання фреймворку Bootstrap.

Кращий підручник з html

Нижче наводиться приклад списку — визначення:

У документі HTML неможливо створити абзац, використовуючи клавішу [Enter].
Використання цієї клавіші покращує зовнішній вигляд початкового тексту, але не впливає на отримане зображення.
Для переходу на наступний рядок скористайтеся командою

.
Для створення пустого рядка скористайтеся командою

.
Для створення горизонтальної смуги скористайтеся командою

.
Чорна лінія задається наявністю атрибуту NOSHADE.

Нижче наводяться приклади форматування рядків:

Запис в форматі HTML

Останній рядок параграфа

Перший рядок нового параграфа

Останній рядок параграфа


Перший рядок нового параграфа

Перший рядок тексту
Другий рядок тексту

Перший рядок тексту

Другий рядок тексту

Кінець секції Наступна секція

кінець секції


Наступна секція

Тільки 40% ширини Наступна секція

Тільки 40% ширини


Наступна секція

Товщина лінії Наступна секція

Товщина лінії


Наступна секція

Зрушена вліво чорна лінія Наступна секція

Зрушена вліво чорна лінія


Наступна секція

Ви можете розташувати текст по центру за допомогою таких команд:

довільний текст. наприклад, HTML

Виведення тексту в декілька стовпців

Netscape 3.0 і вище підтримує виведення в декілька стовпців, в газетному форматі за допомогою команд .
Нижче наводиться формат команд:Задається текст в шпальтах.
Де N — це кількість стовпців, а M — відстань між стовпцями.
Браузери, які не підтримують виведення в декілька стовпців, забезпечать виведення нормально, в один стовпець.

Для виділення окремих частин тексту можна скористатися наступними стилями:
— жирний (Bold),
— курсив (Italic),
— з підкресленням (Underline).

Для виділення тексту жирним шрифтом скористайтеся командами: Bold

Для виділення тексту курсивом скористайтеся командами: Italic

Для виділення тексту підкресленням скористайтеся командами: Underline

Нижче наводяться приклади форматування рядків:

Запис в форматі HTML

Код кольору задається в кодуванні RGB, тобто шість шістнадцяткових чисел.
Важливо відзначити, що колір фону не відображається на папері, якщо розпечатати HTML — документа на друк.

Нижче наводяться коди найпростіших кольорів:
Білий = FFFFFF,
Жовтий = FFFF00,
Червоний = FF0000,
Сірий = 808080,
Синій = 0000FF,
Зелений = 00FF00,
Чорний = 000000,
Пурпурний = CC33FF,
Малиновий = FF00FF,
Бірюзовий = 008080,
Темно-синій = 000080,
Коричневий = 808000,
Блакитний = 00FFFF,
Темно-зелений = 008000,
Індиго = 800080,
Темно-червоний = 800000.

Для зміни кольору поточного тексту можна в будь-якому місці домашньої сторінки скористатися командами:
Поточний текст

Визначено декілька іменованих кольорів. Їх значення ми бачимо в таблиці:

Запис в форматі HTML

Мова HTML завжди зменшує кількість підряд розташованих пропусків до одного, незалежно від того, скільки пропусків було в початковому тексті. Для завдання необхідної кількості поспіль розташованих пропусків потрібно скористатися спеціальним символом пропуску:
Наприклад, в наступному записі початкового тексту: AnbspnbspnbspB
в видимій частині тексті між символами A і B буде 3 пропуски.
Наприклад, для створення тексту

в початковому тексті зтой сторінки записано: ltCENTERgt.

Таблиця створюється за допомогою команд

.команда може мати такі атрибути:
— UNITS — може приймати значення RELATIVE або PIXELS. Визначає одиниці вимірювання в інших атрибутах. За замовчуванням, UNITS = PIXELS.
— BORDER — визначає лінії, що розмежовують клітки в таблиці. Ширина лінії задається командою BORDER = N.
— CELLPADDING — Визначає мінімальний проміжок навколо вмісту таблиці.
— BGCOLOR — Визначає колір фонового зображення в таблиці. У всіх таблицях даного документа я використовую BGCOLOR = BLACK.

Є ще кілька команд, які задають колір обрамлення:
— BORDERCOLOR,
— BORDERCOLORDARK,
— BORDERCOLORLIGHT,
але вони використовуються тільки в Internet Explorer.
Найпростіша таблиця складається з однієї клеткі.Команди

визначають відповідно початок і кінець даних в клітці. Строго кажучи, команда не є обов’язковою, але я раджу нею користуватися для полегшення читання вихідного тексту.

Приклад, таблиця задана в наступному вигляді:

і


Текст в таблиці

При відображенні вона виглядає наступним чином:

Текст в таблиці

Рядок клітин створюється повторенням команд

. приклад:




вміст 1вміст 2вміст 3

Відображається наступним чином:
Схожі статті

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *