Опис мови HTML. Коротка характеристика мови HTML Мова html та її використання

Базові конструкції мови HTML.

HTML (HyperText Markup Language, мова гіпертекстової розмітки) – спеціальні інструкції браузеру, за допомогою яких створюються Веб-сторінки.

Т. е. Web-сторінки - це документи у форматі HTML, що містять текст та спеціальні теги (дескриптори) HTML. За великим рахунком, теги HTML необхідні для форматування тексту (тобто надання йому потрібного вигляду), який "розуміє" браузер. Документи HTML зберігаються як файли з розширенням. htm або. html.

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

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

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

Як створюються Web-сторінки

Мова HTML визначає набір спеціальних команд, які називаються тегами та використовуються для завдання форматування або призначення тих чи інших елементів Web-сторінки. Спеціальні теги використовуються для розміщення на Web-сторінках графічних зображень, аудіо- та відеокліпів та інших так званих впроваджених об'єктів.

Незважаючи на складність, Web-сторінки не являють собою нічого складного. Це звичайні текстові файли, створені у стандартному Блокноті або аналогічному найпростішому текстовому редакторі. І вони містять текст, той самий текст, який ви хочете помістити на сторінки, тільки розмічений особливим чином...

Мова гіпер-текстової розмітки HTML дуже проста в освоєнні. Його вивчення можна порівняти з вивченням якоїсь лінгвістичної мови. Якщо, наприклад, в основній одиницею є слово, то в HTML цією мінімальною одиницею є тег. По суті, це команди мови розмітки веб-сторінок html. Будь-яка web-сторінка, будь-який сайт складається з тексту, графіки і т.д. І всі ці радощі контролюють малюнки та непомітні теги. Теги - це те, завдяки чому текст і картинки замість безглуздого місиву являють собою жорстко структуровану конструкцію. Саме завдяки тегам текст на сайті радує відвідувача різноманітністю розмірів та кольорів, саме теги дозволяють чудовим малюнкам стояти на призначеному для них місці за будь-якої роздільної здатності екрану та розміру вікна браузера. Можливості тегів безмежні, їх кількість величезна

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

Будь-який HTML документ, який передається браузеру, повинен складатися з деяких обов'язкових елементів:

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

Таким чином, структура простого HTML документа виглядає приблизно так:

Структура HTML документа

- Початок документа

ЗАГОЛОВОК ДОКУМЕНТА

ТІЛО ДОКУМЕНТА

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

Елементи HTML

Більшість, але не всі теги HTML спарені так, що за тегом, що відкриває, слідує відповідний закриває тег, а між ними міститься текст або інші теги, наприклад:

Foreword

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

Атрибути

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

імені атрибута, наприклад, WIDTH знак рівності (=) значення атрибута, яке задається рядком символів, наприклад, "80".

Завжди корисно укласти значення атрибута в лапки, використовуючи або одинарні ("80"), або подвійні лапки ("80"). Рядок у лапках не повинен містити такі ж лапки всередині себе. Так, якщо дата укладена в подвійні лапки, використовуйте одинарні лапки для подальшого укладання в лапки, і навпаки. Переважно використання подвійних лапок, тому що для ока людини буває важко відрізнити одинарні лапки від символів, подібних до символів акцентування.

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

символів англійської (A - Z, a - z) цифр (0 - 9) проміжків часу дефісів (-)

Таким чином, WIDTH=80 та ALIGN=CENTER - дозволене скорочення для WIDTH="80" та ALIGN="CENTER". Посилання на URL-адресу, наприклад, HREF=foo. htm, припустима, однак, коли URL використовується з атрибутами, він повинен бути залагоджений, наприклад HREF="http://www. hut. fi/". Існують деякі броузери, які допускають відсутність лапок або наявність елементів з лапками, що відкривають, без закриваючих. Однак таку практику краще не застосовувати.

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

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

Після відкриття сторінки у вікні Веб-браузера усі абзаци її тексту, помічені тегом (тегом)

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

За промовчанням браузер зазвичай форматує абзац з вирівнюванням по лівому полю. Для примусового вирівнювання є атрибут align. З його допомогою абзаци можуть бути вирівняні ліворуч, праворуч, центром і шириною.

Приклад:

абзац вирівняний вліво... абзац вирівняний праворуч... абзац вирівняний по центру... абзац вирівняний по ширині...

Відображення у браузері: абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний ліворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний праворуч абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по центру абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині абзац вирівняний по ширині

Веб-браузери автоматично переносять текст усередині абзаців на новий рядок. Якщо стоїть завдання розміщення будь-якого поєднання слів у одному рядку, то цієї мети використовується тег (тег) .

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

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

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

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

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

Створення html-документа

Створити просту сторінку можна в будь-якому редакторі. Підійде навіть Блокнот. Для розробника-початківця рекомендується використовувати інші редактори, які мають функції автопідстановки та інші підказки. Завдяки цьому можна створювати готові таблиці, посилання, зображення та інші елементи. А у "Блокноті" кожну букву доводиться писати вручну.

Як правило, "Блокнот" використовують лише в тих випадках, коли під рукою немає інших інструментів. Спочатку створюється текстовий документ, а потім зберігається у форматі HTML. Усі сторінки сайту мають бути з розширенням HTML.

Мова html є ієрархічною. Тобто є спеціальна структура html-документа. Що це таке? Розглянемо нижче для наочності.

Структура HTML-документа. приклад

Структура завжди та сама. Якщо ви захочете змінити щось, браузер не зможе це обробити. В результаті, ви не отримаєте те, що задумали.

На малюнку вище вказано структуру будь-якого html-файлу. Перший пункт вказує на тип файлу. Цей тег вказується один раз. Якщо ви використовуватимете спеціальні редактори, то вся структура створиться автоматично. Вам потрібно буде виправити стандартні значення.

Структура html-документа - основні теги:

З цих трьох тегів складається каркас всього сайту. Зверніть увагу на рисунок. Всі ці теги мають тег, що закривається, зі знаком “/”. Якщо ви пишете від руки, звикайте ставити відразу обидва теги - відкриває і закриває.

Вище сказано, що сторінки сайтів мають розширення.html. Тобто якщо ви створите текстовий документ, але напишете правильний код, браузер все одно відобразить вам просто текст. Жодного перетворення коду не буде.

Розділ head

На малюнку під пунктом 3 вказано розділ head. У цьому розділі зазначається службова інформація. Наприклад, можна вказати кодування (пункт 4) та заголовок сторінки (пункт 5).

Заголовок має бути завжди. Без нього жодна пошукова система не зможе визначити назву контенту (тексту) на веб-сторінці. А це погано для просування сайту. Більш того, у браузері нагорі не буде вказано заголовок сторінки. Це незручність для користувача.

Структура html-документа така, що вказується лише у розділі head. Якщо тег вказати в розділі body або після нього, обробник на нього не зверне уваги.

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

Підключення стилів

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

Підключається файл так.

В атрибуті href вказується шлях до файлу. Якщо в дорозі буде помилка, стилі не завантажаться. Також є обов'язковим атрибут type, який вказує, що це файл css.

Іншим варіантом є визначення стилів у розділі head.

Але цей варіант також дуже рекомендується. Ці методи сильно відрізняються тим, що файл CSS може бути одним для всього сайту, і всі зміни в ньому миттєво застосовуватимуться до всіх сторінок. А якщо ви використовуєте метод, який вказаний на малюнку вище, то вам доведеться вносити зміни до всіх існуючих сторінок сайту.

Якщо клас, що створюється, буде використовуватися тільки на одній сторінці, тоді цей варіант вам підходить.

Підключення скриптів

Скрипти підключаються так.

Тут обов'язкові два атрибути: type та src. У першому вказуємо, що це файл Javascript, а другий – де розташований файл. Якщо ви допустите друкарську помилку, то нічого працювати не буде.

Розділ body

Структура html-документа така, що розміщувати зміст, який буде видно користувачеві, потрібно лише у розділі body. Назва тега говорить сама за себе.

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

Розглянемо основні теги, які можна використовувати в області body. Основних не так багато. Всі інші ви дізнаватиметеся зі зростанням ваших знань і практики.

Основні теги

Структура HTML-документа вимагає обов'язкового порядку написання елементів. Теги завжди повинні по краях обрамлятися дужками. Без цього браузер не зрозуміє, що це тег. Після дужки, що відкривається, завжди слідує ім'я елемента (тега). Якщо ви допустите пробіл між< и именем, то браузер посчитает это текстом.

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

Порядок атрибутів немає значення. Але їх написання (оформлення) дуже важливе. Завжди спочатку йде ім'я атрибута, потім знак рівності, потім у лапках пишеться значення атрибута. Значення може бути різним – цифрове або текстове.

Атрибут src у всіх тегах вказує шлях файлу, який потрібно підвантажувати. Атрибут alt у всіх елементах показує короткий опис. В даному випадку завантажується фотографія bird.jpg з описом – фотографія птиці.

Крім цього, можна було вказати розміри, тільки ширину або висоту, заголовок, вирівнювання, клас стилю або рамку.

Розглянемо інші основні теги, які зазначаються у розділі body.

	Призначення
	Зображення
	Перенесення тексту на новий рядок
…	Жирний текст
	Перекреслений текст
	Підкреслений текст

Як все це можна уявити в голові

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

Термін HTML (HyperText Markup Language) означає "мова маркування гіпертекстів". Першу версію HTML розробив співробітник Європейської лабораторії фізики елементарних частинок Тім Бернерс-Лі.

З часу створення першої версії HTML зазнав деяких змін. Як і багато іншого в комп'ютерному світі, версії або специфікації, HTML виявилися пронумерованими. Відомі специфікації 2.0, 3.0 та 3.2. Поточну специфікацію HTML завжди можна знайти на сервері W3C.

HyperText Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів у середовищі WEB. HTML-документи можуть переглядатися різними типами WEB-браузерів. Коли документ створений з використанням HTML, WEB-браузер може інтерпретувати HTML для виділення різних елементів документа та їх первинної обробки. Використання HTML дозволяє форматувати документи для їх подання з використанням шрифтів, ліній та інших графічних елементів на будь-якій системі, що їх переглядає.

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

Найчастіше автор документа суворо визначає зовнішній вигляд документа. У випадку HTML читач (на основі можливостей WEB-браузера може, певною мірою, керувати зовнішнім виглядом документа (але не його вмістом). HTML дозволяє зазначити, де в документі має бути заголовок або абзац за допомогою тега HTML, а потім надає WEB- браузеру інтерпретувати ці тэги.

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

HTML-документи можуть бути створені за допомогою будь-якого текстового редактора або спеціалізованих HTML-редакторів та конвертерів. Вибір редактора, який використовуватиметься для створення HTML-документів, залежить виключно від поняття зручності та особистих уподобань кожного автора. Наприклад, HTML редактори, такі як Netscape Navigator Gold компанії Netscape дозволяють створювати документи графічно з використанням технології WYSIWYG(What You See Is What You Get). З іншого боку, більшість традиційних засобів створення документів мають конвертери, дозволяють перетворювати документи до формату HTML.

Усі теги HTML починаються з "" (правої кутової дужки). Як правило, існує стартовий та завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового та завершального тега та описує заголовок документа: Заголовок документа

HTML не реагує на регістр символів, що описують тег, і наведений приклад може виглядати наступним чином:

Заголовок документа

Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом усередині кутових дужок. У цьому прикладі тег говорить WEB-браузеру про використання формату заголовка, а тег - про завершення тексту заголовка.

Деякі теги, такі як

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

Коли WEB-браузер одержує документ, він визначає, як документ має бути інтерпретований. Найперший тег, який зустрічається в документі, має бути тегом . Цей тег повідомляє WEB-браузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ виглядатиме так:

...тіло документа...

Заголовна частина документа

Тег заголовної частини документа має бути використаний одразу після тега і більше ніде у тілі документа. Цей тег являє собою загальний опис документа. Уникайте розміщувати будь-який текст усередині тега. Стартовий тег розміщується безпосередньо перед тегом та іншими тегами, що описують документ, а завершальний тег розміщується відразу після закінчення опису документа. Наприклад:

Список співробітників Заголовок документа

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

Коментарі

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

Коментарі можуть зустрічатися в документі будь-де і в будь-якій кількості.

Теги тіла документа ідентифікують компоненти HTML-документа, що відображаються у вікні. Тіло документа може містити посилання на інші документи, текст та іншу форматовану інформацію.

Тіло документа

Тіло документа має бути між тегами і . Це частина документа, яка відображається як текстова та графічна (смислова) інформація вашого документа.

Тег абзацу

На відміну від більшості текстових процесорів, HTML-документ зазвичай ігнорує символи повернення каретки. Фізичний розрив абзацу може бути в будь-якому місці вихідного тексту документа (для зручності його читання). Проте браузер розділяє абзаци лише за наявності тега

Якщо ви не розділите абзаци тегом

Ваш документ виглядатиме як один великий абзац.

Гіпертекстові посилання є ключовим компонентом, який робить WEB привабливим для користувачів. Додаючи гіпертекстові посилання (далі - посилання), ви робите набір документів пов'язаним та структурованим, що дозволяє користувачеві отримувати необхідну йому інформацію максимально швидко та зручно.

Посилання мають стандартний формат, що дозволяє браузеру інтерпретувати їх та виконувати необхідні функції (викликати методи) залежно від типу посилання. Посилання можуть вказувати на інший документ, спеціальне місце цього документа або виконувати інші функції, наприклад, запитувати файл по FTP-протоколу для відображення його браузером. URL може вказувати на спеціальне місце по абсолютному шляху доступу, або вказувати на документ у поточному шляху доступу, що часто використовується при організації великих структурованих веб-сайтів. Повернення до попереднього посилання, якщо переміщення відбувалося всередині документа. Якщо ви використовуєте посилання всередині документа, а потім натискаєте клавішу Back, то ви не перейдете на попереднє посилання, а повернетесь на ту частину документа, яку ви переглядали до цього.

Одна з найбільш привабливих характеристик Web-можливість включення посилань на графічні та інші типи даних HTML-документ. Робиться це за допомогою тега . Використання даного тега дозволяє значно покращити зовнішній вигляд та функціональність документів.

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

Це техніка, що найбільш використовується при проектуванні документів, звана іноді "inline image".

Деякі WWW browser дозволяють користувачеві, заповнивши спеціальну форму, що повертає отримане значення, виконувати деякі дії на вашому WWW-сервері. Коли форма інтерпретується WEB-браузером, створюється спеціальні екранні елементи GUI, такі як поля введення, checkboxes, radiobuttons, меню, скрольовані списки, кнопки і т.д. Коли користувач заповнює форму та натискає кнопку "Підтвердження" (SUBMIT - спеціальний тип кнопки, який задається при описі документа), інформація, введена користувачем у форму, надсилається HTTP-серверу для обробки та передачі іншим програмам, що працюють під сервером, відповідно до CGI (Common Gateway Interface) інтерфейс.

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

Незважаючи на те, що Web-сторінки з'являються на екрані комп'ютера у відформатованому вигляді, мова HTML не призначена для форматування документів, оскільки жорстке завдання оформлення та точне позиціонування елементів тексту на сторінці призводить до обмежень, неприпустимих в Інтернеті.

Так, наприклад, коли ми форматуємо текст за допомогою текстового процесора Word, ми однозначно визначаємо, як має виглядати цей текст під час друку на певному принтері та на папері заданого формату. Коли документ розміщено в Інтернеті, неможливо передбачити, який комп'ютер буде використаний для його перегляду, та і чи взагалі буде цей комп'ютер монітор.

Особливість опису документа засобами мови HTML пов'язані з принциповою неможливістю досягнення абсолютної точності відтворення вихідного документа. Передбачається, що документ буде широко доступний в Інтернеті, тому невідомо, як буде організовано його відтворення. Документ може бути представлений на графічному екрані, виведений у чисто текстовому вигляді або просто прочитаний програмою синтезу мови. Розмітка HTML у всіх цих випадках має бути прийнята до уваги. Тому! мова HTML призначена не для форматування документа, а для його функціональної розмітки. Під розміткою розуміється використання спеціальних кодів, які легко відокремлюються від змістового документа і використовуються для реалізації гіпертексту. Застосування цих кодів підпорядковується строгим правилам, що визначаються специфікацією мови HTML. Наприклад, документи зазвичай починаються із заголовків. Властивість частини документа "бути заголовком" - це не особливість форматування документа, а характеристика його змісту. Конкретний засіб відображення документа (браузер) вибирає свій спосіб представлення частини документа, що описана як заголовок.

Теги HTML

! Коди мови HTML, за допомогою яких розмітка вихідного тексту, називаються тегами і вставляються безпосередньо в текст документа.

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

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

Теги можна розділити на великі групи.

Теги однієї групи, які називаються контейнерами, впливають на частину документа, укладену між ними. Вони мають два компоненти: відкриває (початковий) і закриває (кінцевий). Закриваючий тег має ту саму назву, що і відкриває, але перед його назвою ставиться коса риса (символ / (слеш)). Між тегами, що відкривають і закривають, можуть розташовуватися текст або інші теги.

Автономні (поодинокі) теги немає кінцевого компонента. Вони викликають одноразову дію або при їх інтерпретації в документ, що відображається, вставляється той чи інший об'єкт. Наприклад, тег Викликає вставку малюнка з файлу pict.gif.

Як правило, один тег HTML впливає лише на частину документа, наприклад абзац. У таких випадках використовують парні теги: відкриває та закриває. Відкриваючий тег створює ефект, а закриває – припиняє його дію. Теги, що закривають, починаються з символу косої риси (/).

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

Якщо помилка в тезі вказує ключове слово, яке немає у мові HTML, тег ігнорується повністю.

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

Теги пов'язуються з певним фрагментом документа та вказують спосіб зовнішнього представлення змісту цих фрагментів та їх інтерпретацію Web-клієнтом.

З функціональної точки зору теги HTML можна розподілити за такими категоріями:

Теги опису структури документа та інформації про нього, наприклад, анотації, списку ключових слів тощо;

Теги, що використовуються для логічної структуризації тексту документа, наприклад, виділення заголовків, розбиття на абзаци, виділення цитат, створення списків, таблиць тощо;

Теги форматування тексту, що описують параметри шрифтів, кольору тощо;

Теги організації гіперпосилань;

Теги, що встановлюють зв'язки HTML-файлу із зовнішніми об'єктами, наприклад, графічними, звуковими файлами тощо;

Теги створення форм, які забезпечують можливість користувачеві вводити інформацію та передавати її Web-серверу;

Базовий варіант мови HTML має ряд недоліків:

відсутність коштів, що дозволяють динамічно керувати зовнішнім виглядом документа;

Відсутність засобів, що дозволяють легко змінювати зовнішнє оформлення Web-документів без обробки самого документа, наприклад, таблиць стилів;

Відсутність коштів, що дозволяють якимось чином структурувати зміст за змістом, наприклад, класифікувати поняття, які у тексті.

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

Атрибути тегів

Ефект застосування тега може змінюватись шляхом додавання атрибутів. У парних тегах атрибути додаються тільки до тега, що відкриває.

! Атрибути являють собою додаткові ключові слова, що відокремлюються від ключового слова, що визначає тег, та інших атрибутів пробілами і розміщуються до завершального тег символу «>». Спосіб застосування деяких атрибутів потребує вказівки значення атрибуту. Значення атрибута відокремлюється від ключового слова атрибута символом = (знак рівності) і полягає в лапки.

Атрибути елемента визначають властивості.

Приклади тегів з атрибутами:

- Задає світло-синій фон для документа,

текст – парний тег, дає вказівку Браузеру вивести укладений у "контейнер" текст символами, збільшеними щодо базового розміру (SIZE="+2") та червоного кольору (COLOR="RED").

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

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

Основи HTML містять основні правила мови HTML, опис структури HTML-сторінки, відносини у структурі HTML-документа між HTML-елементами.

HTML-документ - це звичайний текстовий документ, що може бути створений як у звичайному текстовому редакторі (Блокнот), так і в спеціалізованому, з підсвічуванням коду (Notepad++, Visual Studio Code і т.п.). HTML-документ має розширення.html.

HTML-документ складається з дерева HTML-елементів та тексту. Кожен елемент позначається у вихідному документі початковим (відкриває) і кінцевим (закриває) тегом (за рідкісним винятком).

Початковий тег показує де починається елемент, кінцевий де закінчується. Тег, що закриває, утворюється шляхом додавання слеша / перед ім'ям тега: … . Між початковим та закриваючим тегами міститься вміст тега - контент.

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

Теги можуть вкладатися один в одного, наприклад,

Текст

. При вкладенні слід дотримуватися порядку їх закриття (принцип «матрьошки»), наприклад, наступний запис буде неправильним:

Текст

.

HTML-елементи можуть мати атрибути (глобальні, які застосовуються для всіх HTML-елементів, та власні). Атрибути прописуються у тезі елемента і містять ім'я і значення, що вказуються у форматі ім'я атрибута="значення" . Атрибути дозволяють змінювати властивості та поведінку елемента, для якого вони задано.

Кожному елементу можна надати кілька значень class і лише одне значення id . Множинні значення class записуються через пропуск, . Значення class та id повинні складатися лише з літер, цифр, дефісів та нижніх підкреслень і повинні починатися лише з літер чи цифр.

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

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

HTML-документ і двох розділів - заголовка — між тегами … і змістовної частини — між тегами … .

Структура веб-сторінки 1. Структура HTML-документа

Мова HTML дотримується правил, які містяться у файлі оголошення типу документа (Document Type Definition, або DTD). DTD є XML-документом, що визначає, які теги, атрибути та їх значення дійсні для конкретного типу HTML. Для кожної версії HTML є власний DTD.

DOCTYPE відповідає за коректне відображення веб-сторінки браузером. DOCTYPE визначає не тільки версію HTML (наприклад, html), але й відповідний файл DTD в Інтернеті.

...

Елементи, що знаходяться всередині тега, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). У цьому елемент є кореневим елементом.

Мал. 1. Найпростіша структура веб-сторінки

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

Предок - елемент, який містить у собі інші елементи. На малюнку 1 предком всім елементів є . У той же час елемент є предком для всіх тегів, що містяться в ньому: ,

, , і т.д.

Нащадок - елемент, розташований усередині одного чи більше типів елементів. Наприклад, є нащадком , а елемент

Є нащадком одночасно для і.

Батьківський елемент - елемент, пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище за них. На малюнку 1 та . Тег

Є батьківським лише для .

Дочірній елемент - елемент, що безпосередньо підпорядкований іншому елементу вищого рівня. На малюнку 1 лише елементи , ,

І є дочірніми стосовно .

Сестринський елемент - елемент, що має загальний батьківський елемент із аналізованим, так звані елементи одного рівня. На малюнку 1 і елементи одного рівня, так само як і елементи , і

Є між собою сестринськими.

1.1. Елемент 1.2. Елемент

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

1.2.1. Елемент

Обов'язковим тегом розділу є тег. Текст, розміщений усередині цього тега, відображається у рядку заголовка веб-браузера. Довжина заголовка повинна бути не більше 60 символів, щоб повністю поміститися у заголовку. Текст заголовка повинен містити максимально повний опис вмісту веб-сторінки.

1.2.2. Елемент

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

Опис вмісту сторінки та ключові слова одночасно можна вказувати кількома мовами, наприклад, російською та англійською:

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

Для автоматичного перезавантаження сторінки через проміжок часу потрібно скористатися значенням refresh:

Сторінку буде перезавантажено через 30 секунд. Щоб перекинути відвідувача на іншу сторінку, потрібно вказати URL-адресу у параметрі url: