Из чего состоит интернет-страница

Давайте разберемся из чего состоит любая интернет-страница. Начнём с описания таких понятий как контент и тег. Контент — это содержимое страницы. Содержимое может быть, например, текстом или изображением. Тег — это элемент разметки, который задаёт инструкцию для браузеров. С помощью тегов мы обеспечиваем структуру HTML-документа. Структура нужна для того, чтобы отображаемая страница была более понятной. Процесс заключения контента в теги для обеспечения структуры HTML-документа называется разметкой. Давайте продемонстрируем сначала неразмеченный, а затем размеченный контент. Вот так выглядит неразмеченный контент:

HTML Вывод
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Неразмеченный контент</title>
</head>
<body>
    Заголовок статьи
    Абзац1
    Абзац2
</body>
</html>
Заголовок статьи Абзац1 Абзац2

Как мы видим, слова располагаются в строчку, через один пробел, они имеют один и тот-же стиль шрифта.


А вот так выглядит размеченный контент:

HTML Вывод
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Размеченный контент</title>
</head>
<body>
    <h1>Заголовок статьи</h1>
    <p>Абзац1</p>
    <p>Абзац2</p>
</body>
</html>

Заголовок статьи

Абзац1

Абзац2

Здесь мы разметили этот контент как заголовок и два абзаца, каждое слово теперь начинается с новой строки, так как эти элементы блочные, а заголовок принял свой особый стиль.


Чтобы понять что такое элемент, приведём его структуру:

Таким образом элемент состоит из:

  • Открывающего тега
  • Контента
  • Закрывающего тега

Элементы бывают блочные и встроенные:

Блочные элементы — это элементы, которые начинаются с новой строки и образуют вокруг
себя прямоугольные области, например div, p, h1…h6. Блочные элементы всегда начинаются с новой строки и образуют вокруг себя прямоугольную область по всей ширине страницы.

Встроенные элементы — это элементы, которые не начинаются с новой строки и находятся
внутри блочных элементов, например em, strong, span. Встроенные элементы встраиваются в блочные и образуют прямоугольную область только вокруг себя, они никогда не начинаются с новой строки.

Посмотрим как это выглядит на примере:


Разберёмся какие бывают теги:

  • Парные (имеют открывающий и закрывающий теги), например теги абзаца: <p>…</p>
  • Одиночные (имеют только открывающий тег), например тег изображения: <img />

Рассмотрим структуру тегов.

Открывающий тег состоит из:

  • Открывающей скобки
  • Имени элемента
  • Закрывающей скобки

Закрывающий тег состоит из:

  • Открывающей скобки
  • Слеша (/)
  • Имени элемента
  • Закрывающей скобки

Тегам можно присваивать атрибуты.

Атрибут — это параметр, который дополняет или изменяет элемент документа HTML.

Рассмотрим структуру атрибута:

Например, атрибут src элемента img задаёт адрес изображения:

Или вот, например, атрибут width задаёт ширину, таким образом изображение будет шириной 200 пикселов:

Если атрибут может принимать несколько значений, то они разделяются точкой с запятой и пробелом:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Правила записи атрибутов:

  • Атрибуты указываются после имени элемента через пробел.
  • Атрибуты указываются только в открывающем теге.
  • Элемент может иметь несколько атрибутов, их можно перечислять в любом порядке, они разделяются пробелами.
  • Значение атрибута может быть числом, словом, строкой текста, URL-адресом или переменной в зависимости от назначения атрибута.
  • Значения атрибутов заключаются в прямые кавычки (одинарные или двойные).
  • Придумать атрибуты нельзя, они определяются в спецификации.
  • Некоторые атрибуты обязательны, например для элемента img обязательны атрибуты src и alt.
Поделиться