ПРОСТО НАЙКРАЩИЙ САЙТ ДЛЯ РОЗРОБНИКІВ
HTML/CSS JAVASCRIPT SQL JAVA PYTHON Golang Data Science Django Книги 🔍 ◑ Більше
HTML5. Уроки для початківців. Hyperskill українською

En

Структура HTML сторінки

❮ Prev Next ❯

Теорія

Програмування не таке механічне і чуже, як може здатися: багато в чому воно схоже на світ людини. Це дуже легко помітити, якщо подивитися на структуру HTML-сторінок, яка містить такі елементи, як <head> та <body>. Таким чином, створення сайту – це процес створення, і як творець ви повинні бути знайомі з усіма необхідними будівельними блоками. Потрібно багато чому навчитися, але будь-яка справа починається з основ: ласкаво просимо на сцену, теги HTML.

§1. Основні теги в HTML

Серед багатьох тегів HTML, які формують логічну структуру сторінки, деякі вважаються основою. Структуру можна розділити на три основні секції: <html>, <head> і <body>.

Погляньте на код простої HTML-сторінки:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>

Якщо ви збережете цей код у форматі HTML (.html) і відкриєте його у своєму браузері, сторінка матиме такий вигляд:

Приклад html сторінки

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

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

  • елемент <!DOCTYPE> визначає тип поточного документа: DTD (Document Type Definition). Необхідно, щоб браузер розумів, відповідно до якого стандарту HTML відображати вебсторінку. Як бачите, це один із непарних тегів;
  • тег <meta> із атрибутом charset визначає кодування документа. Якщо його не вказано, деякі браузери можуть відображати незрозумілі символи замість тексту;
  • тег <html> вказує, що це документ HTML;
  • тег <head> призначений для зберігання елементів, які допомагають браузеру та пошуковим системам працювати з даними;
  • <title> містить заголовок документа HTML. Не зважаючи на те, що цей тег не є обов’язковим, він все одно присутній майже на всіх вебсторінках в Інтернеті;
  • тег <body> визначає область вмісту сторінки. Він обгортає вміст, який відображається в головному вікні браузера;
  • тег <h1> містить заголовок сторінки в тілі, а тег <p> відповідає за параграфи. Ці теги не є основними розділами та наведені тут як приклад, але ви, ймовірно, знайдете їх в майбутньому, коли будете переходите від базового рівня до складнішого.

§2. Базова структура сторінки HTML

Ось візуалізація базової структури HTML-сторінки:

Basic HTML Page Structure

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

§3. Висновок

Звичайно, як люди, так і вебсторінки набагато складніші та мають багато варіацій. Сучасні сторінки можуть бути дуже великими та містити багато різних тегів усередині <body>, але їх основна структура завжди залишається незмінною. Якщо подумати, це теж дуже по-людськи.

Ви також можете переглянути Урок на hyperskill.org.

Практичні завдання та відповіді

Подаються завдання та варіанти відповідей. Правильний варіант виділено синім кольором.

№1. Пропущений тег

Питання: у наведеному нижче коді відсутній елемент:

<!DOCTYPE html>
<html>
  <head>
    <❓>Science News</❓>
  </head>
  <body>
    <h1>Science News</h1>
    <p>Astrophysicists have shown the first black hole photo in history</p>
    <p>Corsica "cat-fox" could be new species, say experts</p>
    <p>Chemists have created a strong anti-cancer drug</p>
  </body>
</html>

Введіть назву відсутнього елемента.

Введіть короткий текст: title ✔

№2. Основні теги

Питання: Напишіть сторінку, яка відповідає знімку екрана:

Basic HTML Page

Текст вебсторінки можна скопіювати звідси:

  • Cafe "Sweet"
  • Buy Cakes Online
  • We are happy to implement any of your plans and make a cake worthy of your celebration.

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

Правильний код:

<!DOCTYPE html>
<html>
  <head>
    <title>Cafe "Sweet"</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Buy Cakes Online</h1>
    <p>We are happy to implement any of your plans and make a cake worthy of your celebration.</p>
  </body>
</html>

№3. Початкові теги

Питання: Укажіть усі початкові теги:

Виберіть один або кілька варіантів зі списку:

  • <p> ✔
  • </title>
  • </p>
  • <body> ✔
  • <h1> ✔

№4. Злом структури сторінки HTML!

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

Виберіть один варіант зі списку:

Приклад #1

<html>
  <head>
    <meta name='keywords' content='HTML, CSS'>
    <title>Page Title</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

Приклад #2

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

Приклад #3 ✔

<DOCTYPE html>
<html>
  <head>
    <meta name='keywords' content='HTML, CSS'>
    <title>Page Title</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

Приклад #4

<DOCTYPE html>
<html>
  <head>
    <meta name='keywords' content='HTML, CSS'>
  </head>
  <body>
    Hello, World!
  </body>
</html>

№5. Написати сторінку

Питання: Напишіть сторінку, яка відповідає знімку екрана:

Basic HTML Page

Текст веб-сторінки можна скопіювати звідси:

  • Events
  • Let’s have a look
  • What’s On In Toronto
  • Select the date you are interested in.

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

Правильний код:

<!DOCTYPE html>
<html>
  <head>
    <title>Events</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Let’s have a look</p>
    <h1>What’s On In Toronto</h1>
    <p>Select the date you are interested in.</p>
  </body>
</html>

№6. Визначення типу документа

Питання: Що слід написати на початку сторінки HTML, щоб веббраузер зрозумів, що для відображення вебсторінки використовується HTML5?

Введіть короткий текст: <!DOCTYPE html> ✔

№7. Кінцеві теги

Питання: Укажіть усі кінцеві теги:

Виберіть один або кілька варіантів зі списку:

  • <h1>
  • <body>
  • </p> ✔
  • <html>
  • </body> ✔

№8. DTD

Запитання: Що означає DTD?

Виберіть один варіант зі списку:

  • Data Transfer Device
  • Document Type Descriptor
  • Digital Topographic Data
  • Database Table Definition
  • Data Type Definition
  • Document Type Definition ✔

№9. Що заповнює порожні місця?

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

Правильний код:

<!DOCTYPE html>
<html>
  __1__
    <title>Sample Page</title>
  __2__
  <body>
    <h1>Welcome to the Sample Page</h1>
    <p>This is a sample HTML page.</p>
  </body>
</html>

Виберіть один або кілька варіантів зі списку:

  • <head> ✔
  • </body>
  • </html>
  • </head> ✔
  • <title>

№10. Розбір базової структури HTML

Питання: враховуючи базову структуру HTML нижче, яке з наведених нижче тверджень є правильним?

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

Виберіть один або кілька варіантів зі списку:

  • 'DOCTYPE html' is an information tag, letting the browser know that the type of document it's about to process is HTML. ✔
  • 'p' tags are used to determine the style of text.
  • 'h1' tag defines the most important heading in the document. ✔
  • 'Page Title' is the title of the HTML document which is usually displayed on the title bar or tab of the browser. ✔
  • The text 'This is a Heading' and 'This is a paragraph' will not be visible in the web page, because they are enclosed within the head tag.
❮ Prev Next ❯