introduction
Прежде, чем начинать строить дом на выбранном участке, нужно выполнить разметку
Что это означает ?
Нужно вбить колышки, натянуть между ними бечевку...
Веб-страница - это пустой участок земли, на котором мы хотим построить дом
Сами мы не строим, мы нанимаем бригаду строителей, и формулируем задачу бригадиру
( или прорабу, кому как больше нравится )
Таким "прорабом" для нас является браузер
Мы должны четко поставить задачу "прорабу", чтобы он понимал, где мы хотим, чтобы была кухня, где - ванная, где - спальня и т.д.
Для того, чтобы объяснить браузеру, что мы хотим получить, мы должны разговаривать с ним на одном языке
Язык разметки - это и есть язык "колышков", которые мы вбиваем в землю участка ( веб-страницы )
Этот язык называется HTML ( HyperText Markup Language )
что в переводе означает "язык гипертекстовой разметки"
И "колышками" для браузера являются теги
Теги - это конструкции языка, они всегда заключены в угловые скобки:
<input>и в подавляющем большинстве случаев имеют "крышку" и "дно" - открывающую и закрывающую часть
<section></section>Зачем ? - да потому, что большинство тегов являются контейнерами, внутри которых могут быть другие теги
т.е. большинство тегов обозначают границы участков на странице, внутри которых будет своя разметка
<section>
<span></span>
<input>
</section>Кроме того, контейнеры ( т.е. теги ) могут содержать контент
( для этого и существуют веб-страницы - чтобы отображать определенный контент, т.е. текст, картинки, видео и т.д. )
<section>
<h3>Привет</h3>
<p>Добро пожаловать в нашу школу</p>
</section>Имена тегов перечислены в спецификации языка HTML
Конечно, их нужно знать, чтобы у вас с браузером было полное взаимопонимание 😉
Теперь зададимся вопросом - а что же делает браузер с нашей разметкой ?
Из наших тегов браузер создает элементы
Эти элементы ведут себя так, как им предписано в спецификации языка
Например, для вставки картинки на страницу существует специальный тег img
Для элементов, которые позволяют посетителю страницы ввести что-то, существуют элементы input
Таким образом, далеко не все равно, какой тег вы используете
Но и это еще не все...
Не будем забывать про поисковые системы, которые тоже будут читать содержимое страницы
Для них придумана семантика языка - т.е. семантические теги, которые с точки зрения "прораба" могут быть эквивалентны друг другу, но с точки зрения поисковика - отнюдь, поскольку, например, тег header явно говорит о том, что это заголовок страницы или раздела
Семантические теги также облегчают работу верстальщика, поскольку большое количество тегов может превратить разметку в настоящие "дебри", а семантические теги облегчают поиск нужных фрагментов, когда нужно что-то изменить, или добавить, или удалить
Итак, подведем итог:
- Мы размечаем веб-страницу с помощью тегов
- Браузер строит элементы на основании нашей разметки и отображает их на странице
- Теги бывают парные (
<div></div>) и непарные (<input>) - Парные теги позволяют поместить что-то внутрь тега, между его "крышкой" и "дном" ( открывающей и закрывающей частью )
- Теги бывают обычные (
div) и семантические (footer) - Семантика облегчает верстку и нужна для поисковиков
Итак, вёрстка — это создание структуры веб-страницы
Обычно верстка выполняется согласно разработанному макету
Поскольку сегодня существует огромное количество различных девайсов, с которых юзеры выходят в интернет, верстка должна быть такой, чтобы страница прилично выглядела на любом девайсе с любой диагональю и любым разрешением экрана
Такая верстка называется адаптивной
Кроме того, иногда возникают проблемы с различными барузерами, которые по-разному отображают одну и ту же страницу
Верстка должна учитывать эти различия, и быть такой, чтобы страница во всех основных браузерах отображалась одинаково ( одинаково хорошо, конечно 😉 )
Такая верстка называется кроссбраузерной
Верстать страницу нужно так, чтобы она хорошо воспринималась поисковыми системами, и в случае необходимости код страницы мог править другой верстальщик
Такая верстка называется семантичной
Ну и, конечно же, нужно соблюдать спецификацию языка, чтобы код разметки был валидным
Далее мы будем изучать основные приемы достижения простоты и гибкости в верстке
Также мы будем изучать компонентную верстку
О, становится все горячее...
Теги - не простые конструкции, у них есть атрибуты, с помощью которых мы можем сообщить браузеру дополнительную инфо по поводу элемента, который хотим увидеть на странице
Например, тег img имеет атриубут src, значение которого будет ссылкой на картинку, которую мы хотим отобразить
<img src="https://cdn.pixabay.com/photo/2019/07/14/15/43/sydney-4337422_960_720.jpg">а также атрибут width, позволяющий задать размер картинки
<img src="https://cdn.pixabay.com/photo/2019/07/14/15/43/sydney-4337422_960_720.jpg"
width="100">
Как видите, атрибуты устанавливаются непосредственно в теге, отделяясь от имени тега и друг от друга пробелом
За именем атрибута следует знак "=" и его значение, как правило, заключенное в двойные или одинарные кавычки
Существуют универсальные атрибуты, которые применяются практически ко всем тегам:
- class - определяет имя класса элемента
- id - уникальный идентификатор элемента
- style - инлайновый стиль элемента
- title - содержимое всплывающей подсказки ( tooltip )
Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы
- с помощью блочных элементов можно создавать структуру веб-страницы
- <p>, <div>, <form>, <nav>, <ul>, <h1>, ...
- строчные элементы используются для форматирования текстовых фрагментов
- <a>, <span>, <b>, <em>, <i>, <mark>, ...
Хорошо, мы сделали разметку...
Но как-то все скучно, и шрифт не нравится, и вообще... 😒
Как теперь управлять "красотой" элементов на странице ?
Для этого у нас есть отдельный язык 😉
CSS ( Cascading Style Sheets — каскадные таблицы стилей)
Каждый элемент на странице может иметь свой собственный стиль
Это нужно как-то описать...
Первое - сообщить браузеру, о каком элементе ( или о каких элементах ) идет речь
Для этого в языке CSS существуют селекторы
Второе - собственно, описать стиль этого элемента ( этих элементов )
Для этого в языке CSS предусмотрены правила
Поскольку правил может быть много, они заключаются в контейнер - фигурные скобки:
input {
font-size: 16px;
color: red;
}В этом примере input - это селектор, за которым следует контейнер с двумя правилами
Каждое правило состоит из двух частей: имя свойства и его значение
Они разделяются двоеточием
В данном примере селектор input говорит браузеру, что данный набор правил должен быть применен ко всем элементам input на странице
Ну, начнем с того, что теги имеют атрибут style
<div style="width:100px; height:100px; background:red">
</div>Заданные таким образом стили являются инлайновыми
Таблицу стилей можно вставить на страницу с помощью тега style
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>Такие таблицы стилей являются встроенными
Можно подсключить внешнюю таблицу стилей с помощью тега link
<link rel="stylesheet" href="./css/styles.css">Обратите внимание, что у тега link есть атрибут rel, в котором мы сообщаем браузеру, что подключаем таблицу стилей, и атрибут href, в котором находится ссылка на файл с расширением .css
Веб-страница - это html-документ
Именно поэтому вся страница находится в контейнере с соответствующим именем парного тега - html
В этом контейнере могут и должны быть две структурные части документа - head и body
Эти структурные части также задаются с помощью парных тегов head и body
<html>
<head>
...
</head>
<body>
...
</body>
</html>head и body являются контейнерами
определение типа документа
Начнем с того, что язык гипертекстовой разметки эволюционировал достаточно сильно
Каждая версия языка HTML имеет описание ( спецификацию )
Document Type Definition ( DTD ) - это XML-документ, определяющий, какие теги, атрибуты и их значения валидны в конкретной версии язывка HTML
Браузер должен понимать, какую "спеку" ему использовать для корректной работы с разметкой страницы
Для этого каждая веб-страница начинается с декларации DOCTYPE
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>В контейнере head находится инфо для браузера и поисковиков
Для такой инфо используются мета-теги
Кроме того, в head можно подключать внешние таблицы стилей и скрипты
<!-- Объявление формата документа -->
<!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> Элементы, находящиеся внутри тега <html>, образуют дерево документа, или так называемую объектную модель документа, DOM ( document object model )
При этом элемент <html> является корневым элементом
-
Предок — элемент, который заключает в себе другие элементы
На рисунке предком для всех элементов является <html>
В то же время элемент <body> является предком для всех содержащихся в нем -
Потомок — элемент, расположенный внутри одного или более типов элементов
Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html> - Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их
- Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня
-
Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым
так называемые элементы одного уровня
- служебные теги (
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, ...)
Примеры тегов
-
<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>
Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически
Layout - это шаблон(каркас) веб-страницы
Всемирная паутина
Пример
Flexbox Froggy
