Лекція 1. Знайомство з HTML. Структура HTML-документа.

 

Існує три основні кроки створення веб-сторінки.

Крок 1: Початкове наповнення сторінки контентом.

Крок 2: Завдання структури документа (HTML).

Крок 3: Зміна зовнішнього вигляду сторінки за допомогою таблиці стилів (CSS).

Для створення веб-сторінок використовуються мови HTML і CSS. При створенні веб-сторінок використовуються дві мови: HTML і CSS. HTML відповідає за структуру та зміст, а CSS - за оформлення. Браузер об'єднує HTML- і CSS-код і формує зовнішній вигляд сторінки.

 

1.1.         HTML

Мова HTML складається з тегів. Теги - це ті самі цеглинки, з яких побудована кожна веб-сторінка. Кожен тег починається з символу < і закінчується символом >, наприклад: <p>.

Всі теги можна розділити на парні і одиночні. Кожен парний тег складається з двох частин: відкриваючого тегу і закриваючого. Усередині закриваючого тегу використовується символ /.

Ось приклад парного тега:

<p> Абзац </ p>

Як ви бачите, у тега <p> є пара у вигляді закриваючого тега </ p>.

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

Наприклад, тег для вставки зображення або тег для вставки розділової смуги. Такі теги додають на сторінку одиночний об'єкт, і їм не потрібно для цього укладати в себе якийсь текст. Тому їх називають одиночними. Приклади таких тегів: <br>, <hr>, <img>.

Раніше одиночні теги писалися із закриваючим слешем перед закриваючою дужкою. Наприклад: <br/>. У новому стандарті HTML5 використання закриваючого слеша в одиночних тегах необов'язково.

Теги можуть мати атрибути. Деякі теги є сенс використовувати тільки з атрибутами. Найбільш яскравий приклад - тег <img>, що вставляє на сторінку зображення. Для нього обов'язково потрібно вказувати атрибут src, який задає адресу картинки (інакше браузер не зможе завантажити її).

У загальному випадку тег записується таким чином:

<ім'я-тега атрибут1 = "значення1" атрібут2 = "значення2" ...>

Атрибутів може бути декілька, ось приклади:

<p class = "important"> ... </ p>

<a class="external" href="https://htmlacademy.ru"> ... </a>

<img class = "avatar" src = "keks.png">

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

<p> Текст <strong> виділений </ p> напівжирним </ strong>

У цьому прикладі тег <p> закривається раніше, ніж тег <strong>, і це помилка.

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

 

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

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

Наприклад, для старої версії HTML 4.01 доктайп виглядає так:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"

    "http://www.w3.org/TR/html4/strict.dtd">

А для останньої версії HTML вже набагато простіше:

<! DOCTYPE html>

Останню версію HTML ще називають HTML 5. Але, так як, ця версія вже прийнята, як стандарт і поширена майже всюди, ми будемо називати її просто HTML.

 

Найпростіша HTML-сторінка

Найпростіша HTML-сторінка складається як мінімум з трьох тегів.

Тег <html> - це контейнер, в якому знаходиться весь вміст сторінки, включаючи теги <head> і <body>. Як правило, тег <html> йде в документі другим після доктайпу.

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

Тег <body> призначений для зберігання змісту веб-сторінки (контенту), що відображається у вікні браузера.

Структура найпростішої сторінки зображена нижче:

 

<html>

<head>

<meta charset="utf-8">

<title>Заголовок сторінки </title>

</head>

 

<body>

Наповнення сторінки…

</body>

</html>

 

Заголовок HTML-сторінки

Заголовок сторінки - це той текст, який відображається в лівому верхньому кутку браузера, а також у назві вкладок. Щоб задати заголовок сторінки, потрібно використовувати тег <title> всередині тега <head>. Наприклад, ось так:

<head>

   <title> Курси - HTML Academy </ title>

</ head>

Так виглядає заголовок сторінки у вкладці браузера Mozilla Firefox.

 

Кодування HTML-сторінки

Кодування HTML-сторінки потрібно вказувати для того, щоб веб-браузер міг правильно відображати текст на сторінці. Якщо браузер неправильно «вгадає» кодування, то замість тексту будуть відображатися ієрогліфи. Щоб повідомити браузеру кодування HTML-сторінки, необхідно всередині тега <head> використовувати тег:

<meta charset = "ім'я кодування">

Найпоширеніше сучасне кодування - utf-8. Використовуйте його у всіх своїх проектах. Для кирилиці в Windows charset часто задавали як windows-1251. Але зараз це вважається поганою практикою.

 

Ключові слова

Є ціле сімейство тегів <meta>, так званих мета-тегів. Їх можна використовувати всередині тега <head>. Мета-теги розрізняються набором атрибутів і їх значень, ось деякі з атрибутів: content, http-equiv, name і scheme.

Мета-теги зберігають корисну для браузерів і пошукових систем інформацію. Один з таких тегів - це опис ключових слів сторінки. Задається він так:

<meta name = "keywords" content = "різні, ключові, слова">

В атрибуті content через кому перераховуються найважливіші слова зі змісту сторінки. Раніше цей тег був дуже важливий для пошукових систем. Який стан справ зараз - великий секрет Яндекса і Гугла.

 

Опис наповнення сторінки

Ще один корисний для пошукових систем мета-тег - короткий опис сторінки. Він задається так:

<meta name = "description" content = "короткий опис">

В атрибуті content має бути короткий зміст або анотація сторінки. Вона часто використовується пошуковими системами при відображенні результатів пошуку.

 

HTML-коментарі

До речі, в HTML-редакторі ви побачите такі фрагменти коду: <! - Текст ->. Вони називаються «коментарі», і браузер не відображає їх на сторінці. Наприклад:

<! - Будь-який текст ->

Текст всередині коментарю не відображається браузером на сторінці. Коментарі зазвичай використовуються в наступних випадках:

• Для коментування коду. Завжди корисно залишити підказку.

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

Коментарі можна використовувати в будь-якому місці сторінки, крім тегу <title> - всередині нього вони не працюють.

 

1.3. CSS

CSS - це мова для управління зовнішнім виглядом HTML-документа. CSS це абревіатура «Cascading Style Sheets» або «Каскадні Таблиці Стилів». Зазвичай CSS називають просто «стилі». За допомогою CSS можна задавати параметри відображення будь-якого тега: ширину і висоту, відступи, колір і розмір шрифту, фон і так далі. Найпростіший спосіб застосувати стилі до тегу полягає у використанні атрибуту style. Наприклад:

<p style = "color: red;"> ... </ p>

У цьому прикладі в абзаці заданий червоний колір шрифту. Такий спосіб задання стилів називають «інлайнові стилі» або «вбудовані стилі». Синтаксис таких стилів дуже простий: властивість: значення;. Причому властивостей може бути декілька.

Задавати стилі кожного тега за допомогою атрибуту style дуже витратно і клопітно. А ще це призводить до засмічення HTML-коду надлишковими, повторюваними шматками CSS.

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

 

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

У першому випадку стилі називаються «вбудованими» і писати їх потрібно всередині тега <style>. Цей тег зазвичай розміщують всередині <head>. Наприклад:

<head>

   <style>

     CSS-код

   </ style>

</ head>

Усередині <style> пишуть звичайний CSS-код.

Інлайнові стилі використовують не так часто, наприклад, для оптимізації швидкості завантаження сторінки. Частіше використовують зовнішні стилі.

 

Підключення зовнішніх стилів

Найчастіше стилі підключають із зовнішнього файлу з розширенням .css. Для цього використовується тег <link>. наприклад:

<head>

   <link href = "style.css" rel = "stylesheet">

</ head>

В атрибуті href задають адресу файлу, а атрибут rel = "stylesheet" говорить браузеру, що ми підключаємо стилі, а не щось інше.

Краще підключати стилі всередині <head>, але це необов'язково. Тег <link> буде працювати і в іншому місці сторінки.

 

Селектори в CSS

Коли ви задаєте стилі тега за допомогою атрибуту style, браузер відразу ж розуміє, до якого саме тегу застосувати ці стилі. Але коли стилі підключаються за допомогою зовнішнього файлу або через тег <style>, браузер шукає теги до яких застосовуються конкретні стилі за допомогою «селекторів». У загальному випадку синтаксис CSS виглядає так:

селектор {

 властивість: значення1;

  властивість2: значення2;}

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

 

Класи в CSS

Клас - це всього лише один з атрибутів HTML-тегів, наприклад:

<p class = "important"> ... </ p>

<p class = "help"> ... </ p>

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

.important {color: red; } - Вибере всі теги з класом "important"

.help {color: green; } - Вибере всі теги з класом "help"

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

 

Властивості та значення CSS

Отже, мова CSS складається з селекторів і властивостей. Селектори вказують на те, до яких елементів застосовувати стилі, а властивості - на те, як саме відображати елементи.

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

Деякі значення задаються за допомогою текстових констант, наприклад red, bold, інші за допомогою цифрових значень: 12px, 120% і так далі.

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

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

До інших частих помилок відноситься відсутність ; в списку CSS-властивостей. Коли після пари «властивість-значення» забувають поставити крапку з комою, браузер не застосовує ні цю властивість, ні всі наступні після неї.

 

Валідація сторінок

Один із способів, до якого вдаються професійні Веб-розобники для пошуку помилок в розмітці - валідація документів. Що це означає? Виконати валідацію документа означає перевірити розмітку, щоб переконатися, що ви дотрималися всіх правила тієї версії HTML, яку використовували (існує кілька версій). Документи, написані без помилок, називають валідними. Настійно рекомендується проводити валідацію документів, особливо для професійних сайтів. Валідні документи більш одноманітно відображаються в різних браузерах, вони завантажуються швидше і легше доступні. Консорціум Всесвітньої павутини пропонує безкоштовний онлайн валідатор на сайті validator.w3.org. Для документів HTML5 використовуйте онлайн-валідатор, що знаходитьсяна сайті html5.validator.nu. Крім того, валідатори доступні в інструментах для розробників, таких як доповнення Firebug для браузера Firefox або вбудовані інструменти розробника в браузерах Safari і Chrome, щоб ви могли перевірити свою роботу в процесі.

 

CSS-коментарі

CSS-коментарі задаються за допомогою символів /* і */. Наприклад:

 /*

h1 {

color: red;

}

*/.