Введение в верстку

Тема 6. Введение в верстку

Учебные вопросы темы:

История HTML.
Структура HTML.
Тэги.
CSS.

Вопрос 1. История HTML.

Веб-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Типичная веб-страница представляет собой текстовый файл в формате HTML (*.html).

HTML — язык гипертекстовой разметки, это специальный язык разметки, который применяется при создании сайтов в интернете.

Все браузеры понимают html и его интерпретируют. Любая страница сайта является html-кодом, этот код браузер переводит в дружественный вид для пользователя. Этот код вы можете посмотреть, он доступен на каждой странице все что вам нужно сделать это щелкнуть правой кнопкой мыши и выбрать посмотреть исходных код или – нажать на клавиатуре CTRL+U.

На текущий момент HTML является единственным языком разметки сайта. Файлы, созданные на html, имеют расширения *.html или *.htm.

Кратко рассмотрим историю развития HTML:

RFC 1866— HTML 2.0, одобренный как стандарт 22.09.1995 г.;
HTML 3.0 — 28.03.1996 г. — IETF Internet Draft (до 28.09.1996 г);
HTML 3.2 — 14.01.1997 г.;
HTML 4.0 — 18.12.1997 г;
HTML 4.01 — 24.12.1999 г.;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15.05.2000 г.;
HTML5 — 28.11.2014 г.;
HTML 5.1 начал разрабатываться 17.12.2012 г.

HTML 5.2 был представлен 14.12.2017 г.

Советую прочитать: особенности оптимизации сайта в html5 Для создания файла html, достаточно открыть блокнот и сохранить его с расширением .html.

Вопрос 2. Структура HTML.

Ниже приведен пример со структурой типичной html страницы.

Рис. 1. Пример структуры страницы

В последние версии HTML в основной структуре HTML-документа было добавлено описание <!DOCTYPE>, перед тегом html.

Это описание необходимо браузерам для правильного представления web-страницы.

Обратите внимание, что html код делится на две области:

<!DOCTYPE html>

<html>

<head>

<title>Название страницы</title>

…

Заголовочные теги (подключение стилей, скриптов)

…

</head>

<body>

…

<!– Начало тела страницы.

Это комментарий. Он виден только в коде, а на странице он отсутствует –>

<div class=”header”> Шапка сайта

</div>

…

<div class=”sidebar_left”> Левая колонка

</div>

…

… Основная часть сайта…

</div>

…

<div class=”sidebar_right”> Правая колонка

</div>

…

<div class=”footer”> Низ страницы

</div>

…

</div>

</body>

</html>

Редактировать этот код можно в любом редакторе, например: notepad++.

Вопрос 3. Тэги.

Разметка состоит из html тегов. HTML тег — это один из элементов верстки html который нужен для структуры. Теги имеют открывающий знак < и закрывающий >.

Почти каждый тег парный и требует закрывающего тега, например:

<div> … </div>. Если вы, в процессе кодирования забудете поставить закрывающий тег, то верстка будет не корректной. Если это тег относится к тем, что держат “каркас” сайта, то сайт может “поплыть”.

Запрещено закрывать теги не по порядку их открытия.

HTML атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы.

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

Атрибуты тэгов.

Атрибуты позволяют изменять свойства элемента параметр = “значение”.

Множественные значения атрибутов записываются через пробел, например – class=”nav top”.

Есть два типа атрибутов: атрибут со значением и логический атрибут, у которого нет значения.

Атрибуты пишутся внутри открывающего тега, несколько атрибутов перечисляются через пробел, порядок их значения не имеет.

Полный список – https://html5book.ru/. Давайте рассмотрим теги подробнее.

Теги для форматирования текста обычно используются следующие:

- <sub> – используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
- <sup> – используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
- <ins> – выделяет текст в новой версии документа, подчёркивая его. Для тега доступны следующие атрибуты: cite, datetime.
- <del> – перечёркивает текст. Используется для выделения текста, удаленного из документа. Для тега доступны следующие атрибуты: cite, datetime.

Теги для ввода «компьютерного» текста:

- <code> – служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
- <kbd> – отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.
- <samp> – применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.
- <var> – выделяет имена переменных, отображая курсивом.
- <pre> – позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.

Теги для оформления цитат и определений:

- <abbr> – применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
- <bdo> – используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально. Для тега доступен атрибут dir.
- <blockquote> – выделяет цитаты внутри документа, выделяя его отступами и переносами строк. Для тега доступен атрибут cite.

Теги для оформления цитат и определений:

- <q> – используется для выделения коротких цитат. Браузерами заключается в кавычки. Для тега доступен атрибут cite.
- <cite> – применяется для выделения цитат, названий произведений, сносок на другие документы.
- <dfn> – позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS. Для тега доступен атрибут title.

Теги для оформления абзаца, переноса текста:

- <p> – разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
- <br> – переносит текст на следующую строку, создавая разрыв строки.
- <hr> – используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.Теги заголовков:
- <h1>Заголовок первого уровня</h1>
- <h2>Заголовок второго уровня</h2>
- <h3>Заголовок третьего уровня</h3>
- <h4>Заголовок четвертого уровня</h4>
- <h5>Заголовок пятого уровня</h5>
- <h6>Заголовок шестого уровня</h6>

Вопрос 4. CSS.

CSS означает каскадные таблицы стилей (Cascading Style Sheets.). CSS – это стандартный язык таблиц стилей, используемый для описания представления (т.е. макета и форматирования) веб-страниц. Обычно CSS- стили используются для создания и изменения стиля элементов веб- страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов. CSS поддерживает таблицы стилей для конкретных носителей, поэтому авторы могут адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, брайлевским устройствам, карманным устройствам и т.д.

Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.

Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1».

Рис. 2. Пример CSS сайта

Рис. 3. Структура объявления в CSS

Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.

Внешняя таблица стилей представляет собой текстовый файл с расширением .css, в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега <link>, расположенного внутри раздела <head></head>. Такие стили работают для всех страниц сайта.

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов <link>, указав в атрибуте тега media назначение данной таблицы стилей. rel=”stylesheet” указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type=”text/css” не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type=”text/css”.

Внутренние стили встраиваются в раздел <head></head> HTML- документа и определяются внутри тега <style></style>. Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

Встроенные стили. Код можно написать непосредственно внутри тега элемента с помощью атрибута style.

Виды селекторов.

Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.

Универсальный селектор. Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили}, *:checked {CSS- стили}.

Селектор элемента. Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1.

Селектор класса. Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег <h1> и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа. Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.

Селектор идентификатора. Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ. Значение не должно содержать пробелов.

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

Селектор потомка. Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li, являющиеся потомками всех элементов ul.

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first;
p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса .first, который является потомком элемента <p>;
.first a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом .first.

Селектор атрибута. Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, [alt] – все элементы, для которых задан атрибут alt;
селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img[alt] — только картинки, для которых задан атрибут alt;
селектор[атрибут=”значение”] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img[title=”flower”] — все картинки, название которых содержит слово flower;
селектор[атрибут~=”значение”] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p[class~=”feature”] — абзацы, имя класса которых содержит feature;
селектор[атрибут|=”значение”] — элементы, список значений атрибута которых начинается с указанного слова, p[class|=”feature”] — абзацы, имя класса которых feature или начинается на feature;
селектор[атрибут^=”значение”] — элементы, значение атрибута которых начинается с указанного значения, a[href^=”http://”] — все ссылки, начинающиеся на http://;
селектор[атрибут$=”значение”] — элементы, значение атрибута которых заканчивается указанным значением, img[src$=”.png”] — все картинки в формате png;
селектор[атрибут*=”значение”] — элементы, значение атрибута которых содержит в любом месте указанное слово, a[href*=”book”] — все ссылки, название которых содержит book.

Селектор псевдокласса. Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу.

Псевдоклассы характеризуют элементы со следующими свойствами:

:link — не посещенная ссылка;
:visited — посещенная ссылка;
:hover — любой элемент, по которому проводят курсором мыши;
:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;
:active — элемент, который был активизирован пользователем;
:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;
:invalid — поля формы, содержимое которых не соответствует указанному типу данных;
:enabled — все активные поля форм;
:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;
:in-range — поля формы, значения которых находятся в заданном диапазоне;
:out-of-range — поля формы, значения которых не входят в установленный диапазон;
:lang() — элементы с текстом на указанном языке;
:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not([type=”submit”]);
:target — элемент с символом #, на который ссылаются в документе;
:checked — выделенные (выбранные пользователем) элементы формы.

Селектор структурных псевдоклассов. Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;
:nth-child(even) — чётные дочерние элементы;
:nth-child(3n) — каждый третий элемент среди дочерних;
:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2);
:nth-child(n+2) — выбирает все элементы, начиная со второго;
:nth-child(3) — выбирает третий дочерний элемент;
:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth-child(), но начиная с последнего, в обратную сторону;
:first-child — позволяет оформить только самый первый дочерний элемент тега;
:last-child — позволяет форматировать последний дочерний элемент тега;
:only-child — выбирает элемент, являющийся единственным дочерним элементом;
:empty — выбирает элементы, у которых нет дочерних элементов;
:root — выбирает элемент, являющийся корневым в документе — элемент html.

Селектор структурных псевдоклассов типа. Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с :nth-child(), при этом берёт во внимание только тип элемента;
:first-of-type — выбирает первый дочерний элемент данного типа;
:last-of-type — выбирает последний элемент данного типа;
:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;
:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

Селектор псевдоэлемента. Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;
:before — вставляет генерируемое содержимое перед элементом;
:after — добавляет генерируемое содержимое после элемента.

Комбинация селекторов. Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

- a[href][title] — выберет все ссылки, для которых заданы атрибуты href и title;
- img[alt*=”css”]:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css.

Наследование и каскад.

Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой.Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.

Наследование. Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white- space и word-spacing.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background, border, display, float и clear, height и width, margin, min-max- height и -width, outline, overflow, padding, position, text-decoration, vertical- align и z-index.

Принудительное наследование. С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента.

Как задаются и работают CSS-стили.

Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit).

Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше.

К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

Каскад. Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило !important, специфичность и порядок, в котором подключены таблицы стилей.

Правило !important

Вес правила можно задать с помощью ключевого слова !important, которое добавляется сразу после значения свойства, например, span {font- weight: bold!important;}. Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Вопросы для самопроверки:

Язык таблиц и стилей, позволяющий прикреплять стиль к документам называется:
- CSS.
- HTML.
- XML.
- CMS.
HTML 5.2 был представлен в:
- 2017 году.
- 2012 году.
- 1991 году.
- 2009 году.
Понятия каскад и наследование относятся к:
- CSS.
- YTML.
- HTML.
- XML.
ТЕГ <H1> отвечает за:
- Заголовок.
- Отделение элементов друг от друга.
- Перенос текста на следующую строку.
- Открытие нового заголовочного окна.
<!DOCTYPE html> в начале нам говорит о том, что:
- Страница написана на HTML 5.
- Это стандартная запись.
- Дальше будут записи CSS.
- Дальше идет описание страницы.

Статьи

Конспект

WebRazrab

Ваш помощник в обучении

Курс Web-разработка

Введение в верстку

Тема 6. Введение в верстку

Вопрос 1. История HTML.

Вопрос 2. Структура HTML.

Вопрос 3. Тэги.

Атрибуты тэгов.

Вопрос 4. CSS.

Виды селекторов.

Наследование и каскад.

Как задаются и работают CSS-стили.

Правило !important

Вопросы для самопроверки:

Статьи