Иконка ресурса

Инструкция Курс HTML, CSS // v1.0 // Постоянно обновляется

Поддерживаемые версии
1.8, 1.9, 1.10, 1.11, 1.13, 1.14, 1.15, 1.16
От автора: давно думал о создании "курса" обучения основам верстки сайтов. Недавно решился и понемногу готовлю его первую версию в формате книги. Предлагаю вам оценивать и дорабатывать его со мной. Понемногу буду на данной площадке выкладывать главами/кусками. Приступим?

Глава 1. Основы HTML
Что, где и как


В данном разделе мы разберем самые основы разметки HTML, описание блоков и их взаимодействие.

Для начала, HTML-документ (.html) — это текстовый документ, который может быть создан в любом текстовом редакторе (Notepad++, etc.). Структура HTML разметки выглядит, как дерево из блоков. Каждый блок имеет открывающий и закрывающий теги (напр., <div> и </div>), но есть и исключения — одиночные теги (напр., <img>).

В чем различие обычных и одиночных тегов? Главное различие заключается в наличии закрывающего тега, например:

HTML:
<div>Тестовый блок</div>
<img src="assets/images/cat.webp" alt="котик">
Div-элемент состоит из 3 частей: открывающий тег (<div>), контент (“Тестовый блок”) и закрывающий тег (</div>). Изображение (<img>) состоит только из одного тега.

Кстати, я уверен, что вы заметили, что внутри тега <img> есть странные конструкции — атрибуты. Внутри тега я указал адрес до картинки (src="assets/images/cat.webp") и описание её содержимого (alt="котик").

Стоит знать, что можно вкладывать теги внутрь друг друга:

HTML:
<div>
  <div>Тест 1</div>
  <div>
    <span>Тест 2</span>
    <img src="assets/images/cat.webp" alt="котик">
  </div>
</div>
Обязательно следует соблюдать принцип закрытия тегов! Выше показан верный вариант, но вот, например, с ошибками (попробуйте их, кстати, исправить):

HTML:
<div>
  <div><b>Тест 1</div></b>
  <span><div>
    Тест 2</span>
    <img src="assets/images/cat.webp" alt="котик">
  </div>
</div>
Но все же, зачем нужны атрибуты? Они позволяют изменять элемент и его поведение, свойства элемента. Формат атрибутов: “названиеАтрибута=значение”.

class — атрибут, используемый для указания класса элемента (используется в таблице стилей и JS). Элементу можно присвоить несколько классов через пробел:

HTML:
<span class="menu-element bold">Тест</span>
id — атрибут, используемый для указания уникального ключа элемента (так же используется в таблице стилей и JS). Можно использовать только одно значение:

HTML:
<span id="header-block-one">Тест</span>
Любой браузер будет обрабатывать (отображать) дерево элементов (DOM) согласно вашей разметке, таблице стилей и скриптам.

Структура HTML-документа

В разметке HTML есть определенные правила, которым следует придерживаться.

Document Type Definition, DTD, DOCTYPE — набор правил для определенной версии HTML. Он определяет, как теги и их атрибуты будут работать.

Пример HTML разметки:

HTML:
<!doctype html> <!-- DTD -->

<html lang="ru">
<head>
  <meta charset="utf-8"> <!-- кодировка сайта -->

  <title>Пример разметки</title> <!-- тайтл страницы (название вкладки) -->
  <meta name="description" content="Пример HTML разметки"> <!-- мета-тег описания страницы -->
  <meta name="author" content="yakoshi"> <!-- мета-тег автора страницы -->

  <link rel="stylesheet" href="css/styles.css"> <!-- добавление таблицы стилей -->

</head>

<body> <!-- контент страницы -->
  <div><b>123</b></div>
  <script src="js/code.js"></script> <!-- подключение скрипта -->
</body>
</html>
Все, что внутри тега <html> — дерево разметки.



Обязательно стоит разобрать отношения между элементами. Все построено на базе древа (дед-отец-сын):
  • Родитель — элемент, держащий внутри себя другие элементы (<html> для всех, <div> для <b>)
  • Потомок (дочерний) — элемент, находящийся внутри другого элемента (<b> для <div>)
  • Сестринский — элемент, находящийся рядом с другим/другими элементами (<div> для <script>, и наоборот)

(c) yakoshi.dev

Каждую главу - обновление PDF.

Открыт к комментариям (особенно важны комментарии по изложению мысли). Глава не полная, будет дополнено чуть позже. Всем спасибо, люблю.
Автор
yakoshi
Просмотры
133
Первый выпуск
Обновление
Рейтинг
0.00 звезд Оценок: 0

Комнаты в чате

Верх Низ