Сайт

Анатомія елементу HTML

Погляньмо на елемент "параграф" детальніше. 

Основні частини елементу такі:

  1. Початковий тег: містить назву елементу (в даному випадку, p), загорнену в кутові дужки. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. 
  2. Кінцевий тег: такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у даному випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. 
  3. Вміст: вміст елементу, у даному випадку — просто текст. 
  4. Елемент: початковий тег плюс кінцевий тег плюс вміст між ними — дорівнює елемент.

Елементи також можуть мати атрибути, які виглядають так: 

Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище class це ім'я атрибута, а editor-note — це значення атрибута. Атрибут class дозволяє дати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль. 

Атрибут завжди повинен мати:

  1. Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).
  2. Ім'я атрибута, за яким іде знак дорівнює.
  3. Значення атрибута, загорнене в прямі лапки.

Вкладені елементи

Ви можете додати елемент всередину іншого елементу. Це називається вкладенням. Якщо ми хочемо наголосити, що наш кіт дуже сумний, ми можемо загорнути слово "дуже" в елемент <strong>, який означає, що слово особливо сильно наголошене:

<p>Мій кіт <strong>дуже</strong> сумний.</p>

Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент <p>, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент <strong>, а потім зовнішній <p>. Приклад нижче неправильний:

<p>Мій кіт <strong>дуже сумний.</p></strong>

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

Порожні елементи

Деякі елементи не містять жодного вмісту. Вони називаються порожніми елементами. Для прикладу візьмемо елемент <img>:

<img src="images/firefox-icon.png" alt="Моє тестове зображення">

Цей елемент має два атрибути, при цьому не має кінцевого тегу і жодного внутрішнього вмісту. Елементу image не потрібно загортати контент, його мета — вставити зображення на певне місце на веб-сторінці.

Анатомія HTML-документу

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестова сторінка</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Моє тестове зображення">
  </body>
</html>

Тут ми маємо:

  • <!DOCTYPE html> — тип документу. В сиву давнину, коли HTML був молодим (приблизно в 1991-92 роках), типи документів мали слугувати набором посилань на правила, яким HTML-сторінка мала слідувати, щоб вважатися правильним HTML (наприклад, автоматична перевірка помилок та інше). Однак, у наш час мало хто переймається типами документів, і вони є швидше історичним артефактом, який потрібно додавати, щоб все працювало правильно. Поки що це все, що вам потрібно знати про тип документу.
  • <html></html> — елемент <html>. Цей елемент загортає весь контент на всій сторінці. Також його називають кореневим елементом (root element).
  • <head></head> — елемент <head>. Цей елемент слугує контейнером для всієї інформації, яку ви хочете додати до своєї сторінки, але яка не є власне контентом сторінки, який будуть переглядати користувачі. Це, зокрема, ключові слова, опис сторінки, який буде з'являтися в пошукових результатах, CSS для стилів контенту, набір символів (кодування) тощо.
  • <body></body> — елемент <body>. Цей елемент містить увесь контент, який ви хочете показати користувачам, коли вони відвідують вашу сторінку: текст, зображення, відео, ігри, аудіо тощо. 
  • <meta charset="utf-8"> — цей елемент визначає набір символів, які використовує сторінка. Зазвичай це UTF-8, який містить найбільше символів з більшості людських писемних мов. По суті, ваша сторінка зможе відобразити практично будь-який текстовий контент. Немає жодних причин пропускати цей елемент, він може допомогти уникнути певних проблем пізніше. 
  • <title></title> — елемент <title>. Цей елемент містить заголовок вашої сторінки, який буде відображатися у вкладці браузера при завантаженні сторінки. Також текст у цьому елементі буде відображатися в закладках, якщо додати сторінку до закладок.

Зображення

Повернемося до елементу <img>:

<img src="images/firefox-icon.png" alt="Моє тестове зображення">

Як ми вже з'ясували раніше, цей елемент вставляє зображення на сторінку в тому місці, це воно має з'явитися.  Це відбувається за допомогою атрибута src (source — джерело), який містить шлях до зображення.

Також ми додали атрибут alt (alternative). У цьому атрибуті потрібно вказувати альтернативний текст-опис зображення для тих випадків, коли користувачі не зможуть побачити картинку, наприклад, через те, що:

  1. Мають порушення зору. Користувачі з порушенням зору часто використовують скрін-рідери, які читають описи зображень.
  2. Щось пішло не так при завантаженні зображення. Спробуйте навмисно змінити шлях до зображення в атрибуті src, щоб він став неправильним. Якщо ви тепер перезавантажите сторінку, ви побачите, що на місці зображення буде текст:

Основним при створенні атрибута alt має бути описовість тексту. Цей атрибут має дати користувачу достатньо інформації, щоб скласти уявлення про те, що є на зображенні. У нашому випадку, текст "Моє тестове зображення" нікуди не годиться. Набагато кращий варіант для логотипу Firefox був би "Логотип Firefox: палаюча лисиця навколо Земної кулі."

Спробуйте придумати кращий альтернативний текст для свого зображення. 

Розмітка тексту

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

Заголовки

Елементи "Heading" дозволяють вам вказати, що певні частини контенту вашої сторінки є заголовками або підзаголовками. Так само, як у книжці є назва книги, назви розділів і підзаголовки, у HTML-документі це також є. HTML має заголовки шістьох рівнів, <h1>–<h6>, хоча зазвичай використовуються перші 3-4.

<h1>Мій головний заголовок</h1>
<h2>Мій важливий заголовок</h2>
<h3>Мій підзаголовок</h3>
<h4>Мій менш важливий підзаголовок</h4>

Спробуйте додати підзаголовки до вашої HTML-сторінки перед елементом <img>.

Параграфи

Як пояснювалося вище, елемент <p> містить частину тексту, яка становить один абзац. Параграфи використовуються дуже часто, особливо при розмітці звичайного текстового контенту:

<p>Це один параграф.</p>


Списки

Чимало контенту на веб-сторінках є списками, і в HTML є спеціальні елементи для них. Розмітка списків завжди має принаймні два елементи. Найпоширеніші типи списків - це нумерований і ненумерований списки:

  1. Ненумерований список — це перелік, у якому порядок пунктів не суттєвий, наприклад, список покупок. Такий список загортається в елемент <ul>.
  2. Нумерований список — це перелік, у якому порядок пунктів має значення, наприклад, рецепт приготування. Такий список загортається в елемент <ol>.

Кожен пункт всередині списку загортається в свій окремий елемент <li> (list item).

Наприклад, якщо ми хочемо перетворити такий параграф у список: 

<p>Mozilla — це глобальна спільнота технологів, мислителів і творців, які працюють разом...</p>

Ми можемо так змінити розмітку:

<p>Mozilla — це глобальна спільнота</p>
    
<ul> 
  <li>технологів</li>
  <li>мислителів</li>
  <li>творців</li>
</ul>

<p>які працюють разом... </p>

Спробуйте додати нумерований чи ненумерований список до вашої сторінки.

Посилання

Посилання дуже важливі — це те, що робить мережу мережею! Щоб додати посилання, потрібно використовувати елемент <a> ("a" скорочено від "anchor" — якір). Щоб перетворити параграф на посилання, робіть так:

  1. Виберіть текст. Ми вибрали "Mozilla Manifesto".
  2. Загорніть цей текст в елемент <a>, отак:
    <a>Mozilla Manifesto</a>
  3. Додайте до елементу <a> атрибут href, отак:
    <a href="">Mozilla Manifesto</a>
  4. Додайте значення цьому атрибута — адресу посилання:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Не пропускайте частину https:// чи http:// на початку адреси, так званий протокол, інакше результати можуть бути неочікуваними. Після того, як елемент доданий, клікніть на посилання і переконайтеся, що вас відправило туди, куди ви хотіли.

href може видаватися дивним ім'ям для атрибута, який складно запам'ятати. Він означає hypertext reference — гіпертекстове посилання.

Тепер додайте посилання до своєї сторінки.


Modifié le: vendredi 18 mai 2018, 12:13