|
|
@@ -0,0 +1,374 @@
|
|
|
+Вёрстка (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 (тег)** — элемент языка разметки гипертекста.
|
|
|
+
|
|
|
+Существуют парные теги (включают открывающийся и закрывающийся теги) и
|
|
|
+одиночные. Теги могут вкладываться друг в друга. При вложении следует соблюдать
|
|
|
+порядок их закрытия (принцип «матрёшки»).
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+<p> Text </p> - парный
|
|
|
+<br/> - одиночный
|
|
|
+
|
|
|
+<p><i> Hello! </i></p> - верно
|
|
|
+<p><i> Hello! </p></i> - неверно
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+4 Структура HTML-документа:
|
|
|
+---------------------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Язык HTML следует правилам, которые содержатся в файле объявления типа документа
|
|
|
+(Document Type Definition, или DTD).
|
|
|
+
|
|
|
+DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их
|
|
|
+значения действительны для конкретного типа HTML. Для каждой версии HTML есть
|
|
|
+свой DTD.
|
|
|
+
|
|
|
+DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE
|
|
|
+определяет не только версию HTML (например, html), но и соответствующий DTD-файл
|
|
|
+в Интернете.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+<!-- Объявление формата документа -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+
|
|
|
+ <!-- Определяем кодировку символов документа -->
|
|
|
+ <meta charset="utf-8">
|
|
|
+
|
|
|
+ <!– Устанавливаем параметры отображения страницы на мобильных устройствах -->
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+
|
|
|
+ <!-- Задаем заголовок документа -->
|
|
|
+ <title>Title</title>
|
|
|
+
|
|
|
+ <!-- Подключаем внешнюю таблицу стилей -->
|
|
|
+ <link media="all" rel="stylesheet" href="css/main.css">
|
|
|
+
|
|
|
+ <!-- Подключаем скрипты -->
|
|
|
+ <script src="js/main.js"></script>
|
|
|
+
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <!-- Основная часть документа -->
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+5 Объектная модель документа:
|
|
|
+-----------------------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Элементы, находящиеся внутри тега \<html\>, образуют дерево документа, так
|
|
|
+называемую объектную модель документа, **DOM** (document object model). При этом
|
|
|
+элемент \<html\> является корневым элементом.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **Предок** — элемент, который заключает в себе другие элементы. На рисунке
|
|
|
+ предком для всех элементов является \<html\>. В то же время элемент \<body\>
|
|
|
+ является предком для всех содержащихся в нем.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **Потомок** — элемент, расположенный внутри одного или более типов
|
|
|
+ элементов. Например, \<body\> является потомком \<html\>, а элемент \<p\>
|
|
|
+ является потомком одновременно для \<body\> и \<html\>.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **Родительский элемент** — элемент, связанный с другими элементами более
|
|
|
+ низкого уровня, и находящийся на дереве выше их.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **Дочерний элемент** — элемент, непосредственно подчиненный другому элементу
|
|
|
+ более высокого уровня.
|
|
|
+
|
|
|
+- **Сестринский элемент** — элемент, имеющий общий родительский элемент с
|
|
|
+ рассматриваемым, так называемые элементы одного уровня.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+6 Блочные и строчные теги:
|
|
|
+--------------------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Выделяют две основные категории HTML-элементов, которые соответствуют типам их
|
|
|
+содержимого и поведению в структуре веб-страницы — блочные и строчные элементы.
|
|
|
+С помощью блочных элементов можно создавать структуру веб-страницы, строчные
|
|
|
+элементы используются для форматирования текстовых фрагментов.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- примеры блочных: \<p\>, \<div\>, \<form\>, \<nav\>, \<ul\>, \<h1\>, ...
|
|
|
+
|
|
|
+- примеры строчных: \<a\>, \<span\>, \<b\>, \<em\>, \<i\>, \<mark\>, ...
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+7 Атрибуты тегов:
|
|
|
+-----------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Теги могут содержать атрибуты. С их помощью можно менять свойства объекта,
|
|
|
+которому соответствует тег.
|
|
|
+
|
|
|
+Атрибуты записываются внутри открывающего тега через пробел от его имени в виде
|
|
|
+отдельного ключевого слова или ключевого слова, знака “=” и параметра (значения
|
|
|
+атрибута). Существуют универсальные атрибуты, которые применяются практически ко
|
|
|
+всем тегам.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Универсальные атрибуты:
|
|
|
+
|
|
|
+- class - определяет имя класса, которое позволяет связать тег со стилевым
|
|
|
+ оформлением;
|
|
|
+
|
|
|
+- id - указывает имя стилевого идентификатора;
|
|
|
+
|
|
|
+- style - применяется для определения стиля элемента с помощью правил CSS;
|
|
|
+
|
|
|
+- title - описывает содержимое элемента в виде всплывающей подсказки.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+8 Основные группы тегов:
|
|
|
+------------------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+\- служебные теги (doctype, head, title, ...);
|
|
|
+
|
|
|
+\- теги для группировки контента (div, header, main, footer, section, article,
|
|
|
+...);
|
|
|
+
|
|
|
+\- списки (ol, ul, dl);
|
|
|
+
|
|
|
+\- ссылки (a);
|
|
|
+
|
|
|
+\- таблицы (table, thead, tbody, tr, th, td, ...);
|
|
|
+
|
|
|
+\- текстовые (h1, p, q, strong, ...);
|
|
|
+
|
|
|
+\- изображения (img, …);
|
|
|
+
|
|
|
+\- формы (form, input, select, button, ...).
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Полный список тегов - <https://html5book.ru/examples/html-tags.html>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+### Примеры тегов:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<header\>** - группирует вводные и навигационные элементы, не является
|
|
|
+ обязательным. Может содержать заголовки, оборачивать содержание раздела
|
|
|
+ страницы, форму поиска или логотип.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<nav\>** - предназначен для создания блока навигации веб-страницы или
|
|
|
+ всего веб-сайта. На странице может быть несколько элементов \<nav\>. Не
|
|
|
+ заменяет теги \<ul\> или \<оl\>, он просто их обрамляет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+<header class="header">
|
|
|
+ <a href="#" class="logo"><img src="images/logo.png" alt="logo"></a>
|
|
|
+ <nav class="main-nav">
|
|
|
+ <ul>
|
|
|
+ <li><a href="#">Item 01</a></li>
|
|
|
+ <li><a href="#">Item 02</a></li>
|
|
|
+ <li><a href="#">Item 03</a></li>
|
|
|
+ <li><a href="#">Item 04</a></li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+</header>
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<section\>** - группирует тематическое содержимое и обычно содержит
|
|
|
+ заголовок. Не является блоком-оберткой, для этих целей уместнее использовать
|
|
|
+ элемент \<div\>. В качестве содержимого может выступать оглавление, разделы
|
|
|
+ научных публикаций, программа мероприятия.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<article\>** - группирует записей, публикаций, статей, записей блога,
|
|
|
+ комментариев и т.п. Представляет собой независимый обособленный блок,
|
|
|
+ предназначенный для многократного использования, как правило, начинается с
|
|
|
+ заголовка.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+<section>
|
|
|
+ <h1>Main heading</h1>
|
|
|
+ <article>
|
|
|
+ <h2>...</h2>
|
|
|
+ <p>...</p>
|
|
|
+ </article>
|
|
|
+ <article>
|
|
|
+ <h2>...</h2>
|
|
|
+ <p>...</p>
|
|
|
+ </article>
|
|
|
+</section>
|
|
|
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<aside\>** - группирует содержимое, связанное с окружающим его контентом
|
|
|
+ напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не
|
|
|
+ повлияет на понимание основного содержимого). Чаще всего элемент
|
|
|
+ позиционируется как боковая колонка.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<footer\>** - представляет собой нижний колонтитул страницы, часто
|
|
|
+ содержит: сведения об авторских правах, ссылки на условия использования,
|
|
|
+ контактную информацию, ссылки на связанное содержимое и т.п.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<main\>** - представляет основное содержимое документа (содержимое
|
|
|
+ элемента \<body\>). Элемент \<main\> не может быть потомком таких элементов
|
|
|
+ как \<article\>, \<aside\>, \<footer\>, \<header\> или \<nav\>.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<time\>** - определяет время (24 часа) или дату с возможным указанием
|
|
|
+ времени. Текст, заключенный в данный тег, не имеет стилевого оформления
|
|
|
+ браузером.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<mark\>** - текст, помещенный внутрь тега \<mark\>, выделяется по
|
|
|
+ умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно
|
|
|
+ изменить, задав определенные css-стили). С помощью данного тега можно
|
|
|
+ отмечать важное содержимое, а также ключевые слова.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- **\<form\>** - основу любой формы составляет элемент \<form\>...\</form\>.
|
|
|
+ Он не предусматривает ввод данных, так как является контейнером, удерживая
|
|
|
+ вместе все элементы управления формы – поля. Атрибуты этого элемента
|
|
|
+ содержат информацию, общую для всех полей формы, поэтому в одну форму нужно
|
|
|
+ включать поля, объединенные логически.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+9 Понятие «layout»:
|
|
|
+-------------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Layout - это шаблон(каркас) веб-страницы.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Полезные ссылки:
|
|
|
+----------------
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+- <https://www.w3schools.com/>
|
|
|
+
|
|
|
+- <https://html5book.ru/>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
