Базова структура веб-сторінки

Raisa Kravets -

 

Елемент <! DOCTYPE> (жарг. Доктайп) призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує в декількох версіях - сучасний HTML5 або застарілі HTML4 і XHTML. Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <! DOCTYPE>.

Оскільки в подальшому будемо працювати тільки з HTML5, то нам буде потрібно тільки один короткий і сучасний доктайп.

<html>
Відкриваючий  тег <html> визначає початок HTML-документа, всередині нього зберігається «голова» (<head>) і «тіло» документа (<body>).
<head>
Вміст цього розділу не показується безпосередньо на сторінці, за винятком елемента <title>. Усередині <head> можуть розташовуватися такі елементи: <base>, <link>, <meta>, <script>, <style> або <title>.
<meta charset="utf-8">
Елемент <meta> є універсальним і додає цілий клас можливостей, зокрема, за допомогою метатега, як узагальнено називають цей елемент, можна змінити кодування сторінки, додати ключові слова, опис документа і багато іншого, призначене для браузера або пошукових систем. Зокрема, щоб браузер розумів, що має справу з кодуванням UTF-8 (Unicode transformation format, формат перетворення Юнікод) і додається даний рядок.

<title>Назва веб-сторінки</title>
Елемент <title> визначає назву веб-сторінки. У браузері воно відображається на поточній вкладці
Елемент <title> є обов'язковим і повинен неодмінно бути присутнім в коді документа. Усередині дозволяється писати тільки текст і ніяких інших елементів в <title> бути не повинно. Але припустимо додавати різні текстові символи, наприклад, так: <title> Adobe ™ Photoshop® </ title>.
</head>
Закриваючий тег </head> показує, що «голова» документа завершена.
<body>
«Тіло» документа <body> призначений для розміщення елементів і вмісту веб-сторінки.
</body>
Слід додати закриваючий тег </body>, щоб показати, що «тіло» документа завершено.
</html>
Останнім елементом в коді завжди йде закриваючийє тег </html>.

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

Є ціле сімейство тегів <meta>, які називаються  мета-тегами. Їх можна використовувати всередині тега <head>. Мета-теги розрізняються набором атрибутів і їх значень, ось деякі з атрибутів: content, http-equiv, name і scheme.
Мета-теги зберігають корисну для браузерів і пошукових систем інформацію. Один з таких тегів - це опис ключових слів сторінки.
Задається він так:
<meta name="keywords" content="різні, ключові, слова">
В атрибуті content через кому перераховуються найважливіші слова зі змісту сторінки. Раніше цей тег був дуже важливий для пошукових систем.

Опис змісту сторінки 

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

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

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

Коментарі на  сторінці

Коментар в HTML-коді задається так:
<!-- будь який текст -->
Текст всередині коментаря не відображається браузером на сторінці. Коментарі зазвичай використовуються в наступних випадках:
  • Для коментування коду. Завжди корисно залишити підказку. 
  • Для тимчасового відключення коду. Видаляти код незручно, так як його треба буде відновлювати, а закомментувати і потім розкоментувати - найкраще рішення. 
Коментарі можна використовувати в будь-якому місці сторінки, крім тега <title> - всередині нього вони не працюють




Тест "Базова структура веб-сторінки"

           ЗАВДАННЯ ДЛЯ САМОСТІЙНОГО ВИКОНАННЯ                

ЗАВДАННЯ 1: Зкопіюйте  код веб-сторінки і вставте в новий створенний  файл struktura.html у вашій папці,   відобразіть файл у браузері,  внесіть зміни у  код файлу, щоб  текст у браузері  можливо було прочитати:


<!DOCTYPE html>
<html>
  <head>
     
   <title>Кодування HTML-сторінки</title>
  </head>
  <body>
    <h1>Кодування сторінки</h1>
    <p>Коли кодування документа задана невірно, деякі символи відображаються як «ієрогліфи», а деякі ні</p>
  </body>
</html>

ЗАВДАННЯ 2: розкоментуйте обидва тега <p> в розділі "Коментарі для пояснень". Закоментуйте будь який абзац  <p> в розділі "Чи коли видаляти шкода"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML-коментарі</title>
   </head>
  <body>

      <h1>Коментарі для пояснень</h1>
      <!--<p>Буває, що в HTML-коді є складні ділянки, призначення яких не зовсім зрозуміло.</p>-->
      <!--<p>В цьому випадку можна використовувати коментарі, щоб пояснити іншому розробнику деякі тонкощі.</p>-->

      <h1>Чи коли  видаляти шкода</h1>
      <p>Іноді якийсь код дуже шкода або страшно видаляти.</p>
      <p>Тому його можуть тимчасово закоментити.</p>

  </body>
</html>


ЗАВДАННЯ 3:   Самостійно задайте мета-інформацію сторінки:
  • Заголовок сторінки "Верстка для не-технарів"
  • Ключові слова: верстка, комп'ютерна грамотність, програмування.
  • Короткий опис: "Приклади того, що вивчення веб-технологій може бути корисно для всіх"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">  
  </head>
  <body>
    <h1>Для чого вивчають верстку</h1>

    <p>Раніше термін «комп'ютерна грамотність» за своєю суттю означав уміння працювати з офісним пакетом, але життя не стоїть на місці, і тепер все більше експертів заявляють про те, що вкрай важливим навиком для широкого кола людей стає вміння програмувати.</p>

    <p>При цьому програмування - величезна галузь знань, тільки невелика частина якої може дійсно стати в нагоді звичайній людині (тобто "не-технарю»). Ми вважаємо, що основу «нової комп'ютерної грамотності» має скласти знання верстки.</p>

     </body>
</html>


Tags:
Нові Старіші