Django 5 для начинающих

Краткий конспект по HTML

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

1. Что такое HTML

HTML, он же HyperText Markup Language - язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представления, их функций.

Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д.
HTML определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля).

Для красивого отображения элементов в HTML и страницы в целом обычно используется CSS (Cascading Style Sheets) - документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользователем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.

Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживатся некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.

2. Базовый синтаксис HTML

Обычно HTML-разметка страницы содержится в файле index.html.

HTML документ состоит из тегов. HTML не чувствителен к регистру в имени тегов!

Теги бывают с содержимым: <head>Содержимое</head> и пустыми: <br>. Теги можно вкладывать друг в друга:

<html>
    <head>
       Информация в head
    </head>
</html>

Внутри тега можно задавать параметры или, что то же самое, атрибуты: <section class="main">

Каждый HTML документ начинается с тега-декларации <!DOCTYPE html>. Таким образом браузер понимает, что он читает именно HTML. Далее идет корневой тег , в который вложены все остальные теги - <html></html>. В нем находятся два тега <head></head> и <body></body>. Первый нужен для хранения метаинформации, которая не отображается на странице: заголовка, скриптов, стилей и т.д. Второй используется для описания видимых частей страницы:

<!DOCTYPE html>
<html>
    <head>
       Информация в head
    </head>
    <body>
        Информация в body
    </body>
</html>

Краткое описание структуры HTML

Тег	С содержимым	Описание
`<!DOCTYPE html>`	нет	Тег-декларация документа
`<html>`	да	Корневой тег
`<head>`	да	Тег для метаинформанции
`<body>`	да	Определяет тело документа (видимую область)

3. Тег `<head>`

Тег <head> используется для описания метаинформации о веб странице (информация об информации). Эта информация не видна пользователю, а используется браузерами и поисковыми движками.

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

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Для того, чтобы сделать веб-страницу адаптивной, т.е. чтобы она подстраивалась под размеры экрана устройства, нужно использовать viewport. Этот параметр обязательно надо добавлять для всех страниц (если конечно хотите сделать веб-страницу пригодной для использования в 2023 году).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Внутри <head> можно задавать внутренние стили для документа:

<style>
 header {
  text-allign: center;
 }
</style>

И внешние стили:

<link rel="stylesheet" href="mystyle.css">

Также внутри <head> обычно указываются скрипты:

<script>
 function myFunction {
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
 }
</script>

Еще один тег - <base> - используется для указания основного URL страницы, относительно которого разрешаются все остальные URL на странице:

<base href="https://www.w3schools.com/images/" target="_blank">

4. HTML5 Layout

HTML5 предоставляет набор тегов для удобной разметки стандартной структуры большинства страниц

<body>
    <header>
        <nav>
            Navigation
        </nav>
    </header>
    <section>
        <main>
            <article>
                Article
            </article>
            <article>
                Article
            </article>
        </main>
        <aside>
            Aside element
        </aside>
    </section>
    <footer>
        Footer
    </footer>
</body>

5. Форматирование текста

Текст в HTML обычно помещают в заголовках:

<h1>
 Заголовок первого уровня
</h1>
<h6>
 Заголовок шестого уровня
</h6>

в параграфах:

<p>
 Какая-нибудь статья
</p>
<pre>
 Какая-нибудь статья с сохранением переносов строк и пробелов
</pre>

в цитатах:

<blockquote site="http://twitter.com">
    "Самое трудное в жизни - засунуть одеяло в пододеяльник" - Джейсон Стетхем
</blockquote>

и как код:

html,body {
    padding: 0;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

Для форматирования используется следующий набор тегов:

Тег	Описание
`<a>`	Ссылка
`<b>`	Жирный текст
`<i>`	Наклонный текст
`<em>`	Наклонный текст(важный)
`<strong>`	Жирный текст(важный)
`<mark>`	Текст с выделением или подсветкой
`<br>`	Переход на новую строку
`<q></q>`	Текст в кавычках(цитата)

6. Таблицы

<table class="styled">
  <tr>
      <th colspan="3">Spanning 3 Columns</th>
  </tr>
  <tr>
      <td rowspan="3">Table Data</td>
      <td>Table Data</td>
      <td>Table Data</td>
  </tr>
  <tr>
      <!-- rowspan -->
      <td>Table Data</td>
      <td>Table Data</td>
  </tr>
  <tr>
      <!-- rowspan -->
      <td>Table Data</td>
      <td>Table Data</td>
  </tr>
</table>

<table class="styled">
  <colgroup>
      <col style="background-color: blueviolet;">
  </colgroup>
  <colgroup>
      <col style="background-color: #f4e767;" span="2">
  </colgroup>
  <thead>
      <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>John</td>
          <td>Doe</td>
          <td>Johnny.doe@gmail.com</td>
      </tr>
      <tr>
          <td>Jane</td>
          <td>Doe</td>
          <td>i_heart_johnny@gmail.com</td>
      </tr>
  </tbody>
</table>

Более детальное описание структуры HTML

Тег	Самые важные атрибуты	Описание
`<h1> - <h6>`	-	Заголовки разных уровней (heading)
`<p>`	`style` (CSS стиль), `title` (заголовок параграфа)	Параграф (paragraph)
`<pre>`	`style` (CSS стиль), `title` (заголовок параграфа)	Предварительно отформатированный текст (preformatted text)
`<a>`	`href` (куда ссылается), `download` (для скачивания файла)	Ссылка
`<img>`	`src` (путь к изображению), `alt` (альтернатива изображению, напр. текстовое описание), `width` и `heigth` (ширина и высота в пикселях)	Изображение (image)
`<button>`	-	Кнопка
`<ul>`	-	Маркированный список (unordered list)
`<ol>`	-	Нумерованный список (ordered list)
`<li>`	-	Элемент списка (list item)
`<br>`	-	Переход на новую строку (break row)
`<hr>`	-	Горизонтальная линия (horizontal rule)