Конспект «Структура HTML-документа»

ссылки:

https://htmlacademy.ru/

1	https://htmlacademy.ru/

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

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>. 

Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. 
Также внутри него подключаются внешние ресурсы, например, стили. 
Содержимое этого тега не отображается на странице напрямую. 

А в теге <body> хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег <link>. 
Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, 
а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

<head>
  <link href="адрес_файла_стилей.css" rel="stylesheet">
</head>

Ещё один элемент, который располагается в <head> — это тег <title>. 
В нём задаётся заголовок страницы, который отображается во вкладках браузера. 
По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.

<head>
  <title>Курсы — HTML Academy</title>
</head>

Ещё один важный тег, располагающийся внутри <head> это тег <meta>. 
Он одиночный, то есть не требует парный закрывающий тег в конце. 
С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: 
кодировку текста, описание контента и так далее. 
Для этого используются теги <meta> с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:
<meta charset="название кодировки">
Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta>, у которого атрибут name имеет значение keywords. 
Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:
<meta name="keywords" content="важные, ключевые, слова">

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:
<meta name="description" content="краткое описание">

Внутри <body> находятся те теги, которые отображаются на странице. 
Например, тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. 
И обычно на странице используется один <main>.

Тег <header> содержит вводную часть страницы, которую чаще называют «шапкой», а тег <footer> описывает заключительную часть страницы, или «подвал».
 
Существует тег <section>, который обозначает крупный смысловой (или «логический») раздел.

Тег <article>, обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»). 
Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

Для создания основной структуры текста используют заголовки. 
В HTML существует целое семейство заголовочных тегов: от <h1> до <h6>. 
Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня), 
а тег <h6> обозначает подзаголовок самого нижнего уровня.

<h1>Спецификация HTML</h1>
<h2>Раздел 1 Введение</h2>
<h3>Раздел 1.1 Происхождение языка</h3>

Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев). 
Для разметки параграфов предназначен тег <p>. 
По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.

Каждый HTML-документ начинается с декларации типа документа или «доктайпа».

Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>.

Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные.

Также внутри него подключаются внешние ресурсы, например, стили.

Содержимое этого тега не отображается на странице напрямую.

А в теге <body> хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег <link>.

Для этого у него есть атрибут href в котором задаётся адрес стилевого файла,

а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

<head>

</head>

Ещё один элемент, который располагается в <head> — это тег <title>.

В нём задаётся заголовок страницы, который отображается во вкладках браузера.

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

<head>

<title>Курсы — HTML Academy</title>

</head>

Ещё один важный тег, располагающийся внутри <head> это тег <meta>.

Он одиночный, то есть не требует парный закрывающий тег в конце.

С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте:

кодировку текста, описание контента и так далее.

Для этого используются теги <meta> с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta>, у которого атрибут name имеет значение keywords.

Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:

Внутри <body> находятся те теги, которые отображаются на странице.

Например, тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах.

И обычно на странице используется один <main>.

Тег <header> содержит вводную часть страницы, которую чаще называют «шапкой», а тег <footer> описывает заключительную часть страницы, или «подвал».

Существует тег <section>, который обозначает крупный смысловой (или «логический») раздел.

Тег <article>, обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»).

Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

Для создания основной структуры текста используют заголовки.

В HTML существует целое семейство заголовочных тегов: от <h1> до <h6>.

Тег <h1> обозначает самый важный заголовок (заголовок верхнего уровня),

а тег <h6> обозначает подзаголовок самого нижнего уровня.

<h1>Спецификация HTML</h1>

<h2>Раздел 1 Введение</h2>

<h3>Раздел 1.1 Происхождение языка</h3>

Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев).

Для разметки параграфов предназначен тег <p>.

По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.

пример index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>Портфолио Junior верстальщика</title>
  </head>

  <body>
    <header class="page-header">
      Контакты в шапке
    </header>

    <section class="hero-image">
      <h1 class="heading">Неопознанный Енот</h1>
      <p>Junior верстальщик</p>
    </section>

    <section class="intro">
      <h2 class="subheading">Давайте познакомимся</h2>
      <h3>Пара слов о себе</h3>
      <p>Текст с парой слов о себе.</p>
      <h3>Чем могу быть полезен</h3>
      <p>Текст о том, чем могу быть полезен.</p>
    </section>

    <section class="portfolio">
      <h2 class="subheading">Мои работы</h2>

      <h3>Сайт инструктора Кекса</h3>
      <p>Небольшой лендинг о школе для начинающих.</p>

      <h3>Блог начинающего верстальщика</h3>
      <p>Статический блог про обучение HTML и CSS.</p>
    </section>

    <footer class="page-footer">
      Контакты в подвале
    </footer>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Портфолио Junior верстальщика</title>

</head>

<body>

Контакты в шапке

</header>

<h1 class="heading">Неопознанный Енот</h1>

<p>Junior верстальщик</p>

</section>

<h2 class="subheading">Давайте познакомимся</h2>

<p>Текст с парой слов о себе.</p>

<h3>Чем могу быть полезен</h3>

<p>Текст о том, чем могу быть полезен.</p>

</section>

<h2 class="subheading">Мои работы</h2>

<h3>Сайт инструктора Кекса</h3>

<p>Небольшой лендинг о школе для начинающих.</p>

<h3>Блог начинающего верстальщика</h3>

<p>Статический блог про обучение HTML и CSS.</p>

</section>

Контакты в подвале

</footer>

</body>

</html>

пример index.css

html,
body {
  margin: 0;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

body {
  min-width: 430px;
  border: 2px dashed #c7e4ff;
}

html::before,
body::before,
header::before,
footer::before,
main::before {
  color: #7fc1ff;
}

main,
header,
footer {
  background-color: #f3faff;
  border: 2px solid #7fc1ff;
}

nav,
section,
article,
aside {
  background-color: #f9f7ff;
  border: 2px solid #9779ec;
}

nav::before,
section::before,
article::before,
aside::before {
  color: #9779ec;
}

h1,
h2,
h3 {
  font-size: 18px;
  background-color: #ffffff;
  border: 2px solid #ff994f;
}

h1::before {
  content: "h1";
  color: #ff994f;
}

h2::before {
  content: "h2";
  color: #ff994f;
}

h3::before {
  content: "h3";
  color: #ff994f;
}

p {
  background-color: #ffffff;
  border: 2px solid #f36dff;
}

p::before {
  color: #f36dff;
  content: "p";
}

* {
  position: relative;
  padding: 25px 25px 20px;
  margin: 0;
  border-radius: 4px;
}

*:not(:last-child) {
  margin-bottom: 20px;
}

*::before {
  position: absolute;
  top: 8px;
  left: 10px;
  font-weight: 700;
  font-size: 11px;
  line-height: 10px;
  letter-spacing: 0.04em;
}

html::before {
  content: "html";
}

body::before {
  content: "body";
}

main::before {
  content: "main";
}

header::before {
  content: "header";
}

footer::before {
  content: "footer";
}

section::before {
  content: "section";
}

article::before {
  content: "article";
}

aside::before {
  content: "aside";
}

nav::before {
  content: "nav";
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

html,

body {

margin: 0;

font-family: "Arial", sans-serif;

font-size: 14px;

line-height: 20px;

}

body {

min-width: 430px;

border: 2px dashed #c7e4ff;

}

html::before,

body::before,

header::before,

footer::before,

main::before {

color: #7fc1ff;

}

main,

header,

footer {

background-color: #f3faff;

border: 2px solid #7fc1ff;

}

nav,

section,

article,

aside {

background-color: #f9f7ff;

border: 2px solid #9779ec;

}

nav::before,

section::before,

article::before,

aside::before {

color: #9779ec;

}

h1,

h2,

h3 {

font-size: 18px;

background-color: #ffffff;

border: 2px solid #ff994f;

}

h1::before {

content: "h1";

color: #ff994f;

}

h2::before {

content: "h2";

color: #ff994f;

}

h3::before {

content: "h3";

color: #ff994f;

}

p {

background-color: #ffffff;

border: 2px solid #f36dff;

}

p::before {

color: #f36dff;

content: "p";

}

* {

position: relative;

padding: 25px 25px 20px;

margin: 0;

border-radius: 4px;

}

*:not(:last-child) {

margin-bottom: 20px;

}

*::before {

position: absolute;

top: 8px;

left: 10px;

font-weight: 700;

font-size: 11px;

line-height: 10px;

letter-spacing: 0.04em;

}

html::before {

content: "html";

}

body::before {

content: "body";

}

main::before {

content: "main";

}

header::before {

content: "header";

}

footer::before {

content: "footer";

}

section::before {

content: "section";

}

article::before {

content: "article";

}

aside::before {

content: "aside";

}

nav::before {

content: "nav";

}