Вёрстка (HTML/CSS) - основы HTML ================================ 1 Введение: ----------- **Вёрстка** — создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету. Верстка должна быть: - адаптивной; - кроссбраузерной (https://caniuse.com/); - семантичной (https://gsnedders.html5.org/outliner/); - валидной (https://validator.w3.org/); также: простотой, гибкой, компонентной. 2 HTML/CSS: ----------- **HTML** (HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов (веб-страниц). **CSS** (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Актуальные версии: HTML 5 и CSS 3. 3 HTML tag: ----------- **Tag (тег)** — элемент языка разметки гипертекста. Существуют парные теги (включают открывающийся и закрывающийся теги) и одиночные. Теги могут вкладываться друг в друга. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»). ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Text
- парныйHello!
- верноHello!
- неверно ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 4 Структура HTML-документа: --------------------------- Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD. DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~является потомком одновременно для \
и \. - **Родительский элемент** — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. - **Дочерний элемент** — элемент, непосредственно подчиненный другому элементу более высокого уровня. - **Сестринский элемент** — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. 6 Блочные и строчные теги: -------------------------- Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов. - примеры блочных: \, \