Верстка — это самый базовый навык, которым необходимо обладать, для того чтобы стать фронтенд разработчиком. Верстка — это лицо вашего сайта

Что включает в себя этот курс:

• Резиновая верстка
• Блочная верстка
• История сеток, как создать свою сетку и использовать уже готовые
• Верстка писем
• Полноценная верстка всего сайта целиком
• HTML CSS

Первое, что необходимо сделать — скачать специальную программу «Visual Studio Code» в которой мы будем писать наш код. Есть и другие программы для работы с кодом, но так как я работаю именно с этой, мне будет проще проверять вашу домашку.

https://code.visualstudio.com

Выберите подходящий для вас вариант ОС (операционной системы), скачайте и установите программу.

Модуль 1

Верстка HTML — это язык текстовой разметки, с помощью которого вы говорите браузеру как показывать контент на сайте.

В этом модуле мы посмотрим как работает HTML, познакомимся с основными конструкциями, которые в нем есть и научимся их использовать

Элементы разметки.

Вспомните, как выглядит газета. Текст в ней удобно читать, он собран в колонки, между абзацами есть пробелы, используются картинки. Все это сделано с помощью специальной типографской разметки. Практически такая же разметка существует и в вебе, как раз за нее и отвечает синтаксис HTML. Это гипертекстовый язык разметки, благодаря ему мы объясняем браузеру как показывать контент на сайте.

Чтобы познакомится с HTML сразу перейдем к практике.

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

Откройте редактор кода Visual Studio Code (VS Code).

Горячие клавиши Ctrl + N — создаем новый файл — у вас в рабочей области появится новая вкладка (похоже на браузер).

Теперь этот файл нужно сохранить: Горячие клавиши Ctrl + Shift + S.

Название файла должно выглядеть так: index.html

Формат файла обязательно должен быть .html — это говорит нам о том, что такой файл будет открываться через браузер.

Теперь, введем в файле текст. В VS Code есть ряд встроенных плагинов, которые позволяют облегчить работу с кодом. Они умеют подставлять нужный код, подсвечивают ошибки и многое другое. Возможностей много, поэтому будем разбираться с ними постепенно.
В первой строке начните писать слово Lorem и VS предложит вам написать большое предложение. Нажмите клавишу TAB, чтобы добавить предложенный текст.

Lorem ipsum … — это временный текст на сайте, который показывает в каком месте распологаются текстовые блоки, какого они размера и какое форматирование у самого текста. Мы будем часто использовать эту фразу для создания текстовых блоков и проверки сайта на вместимость контента. 

Дальше, нам нужно сделать 3 таких текстовых абзаца и разделить их строками. Переход на новую строку делаем при помощи нажатия на клавишу Enter.

Как видите, текст уходит за рамки рабочего пространства, чтобы дальше нам было удобно его читать нажмите горячие клавиши Alt + Z. Вот, теперь все хорошо видно.

Рядом с названием файла вы можете видеть белый круг — это означает, что в файл были внесены изменения и они еще не сохранены. Сохраните изменения горячими клавишами Ctrl + S. Круг исчезнет. Когда работаете с кодом и проверяете его отображение в браузере, обязательно сохраняйте изменения, иначе они не отобразятся.

Теперь посмотрим, как нам этот файл будет отображать браузер.

Откройте браузер и нажмите горячие клавиши Ctrl + O и выберите созданный файл. Вы увидите, что текст в браузере отображается без разделения на строки. То есть браузер игнорирует пустые строки в html-файле.

Для браузера форматирование текста становится понятным, только при использовании «тегов».

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

Первым разберем тег <p></p> — Параграф. Необходимо «обернуть» наш текст Lorem… в этот тег. То есть поставить первую часть тега в начало параграфа, а вторую в конец.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi aspernatur nam repellendus perspiciatis tempore est amet officiis, ab odit doloribus in ea architecto non saepe aperiam culpa porro cum possimus.</p>

Когда начнете ставить первую часть тега, вы увидите, что VS сам подставляет вам закрывающий (второй) тег </p>. Следите за этим, чтобы у вас не было лишнего кода. Второй закрывающий тег нужно ставить в конце параграфа. Так же, когда начнете прописывать закрывающий тег, VS сам допишет некоторые символы. Следите, чтобы вы случайно их не задублировали.

Теперь дополнительные пустые строки между абзацами нам не нужны. Удалите их. Сохраните изменения Ctrl + S.

Возвращаемся в браузер и обновляем страницу горячими клавишами Ctrl + R. Вы увидите, что текст разделился на абзацы и между абзацами появилось дополнительное расстояние.

Теперь подробнее про сам тег <p></p>.

Это парный тег, который содержит в себе начальный и конечный теги. Все правила, которые связаны с этим тегом применяются именно к содержанию тега.

Начальный тег — <p>

Конечный тег — </p>

Название тега — p

Содержание тега — Lorem… (тут содержание может быть любым)

У многих тегов есть свои стили по умолчанию. У тега параграф стили по умолчанию — это отступы сверху и с низу. Что мы наглядно увидели в браузере, когда обновили наш код.

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

Помимо названия тега он может содержать атрибуты. Атрибут позволяет более тонко настроить параметры тега.

Как атрибут вписывается в тег:

<p align=«right»>Привет!</p>

Align — атрибут

Right — его значение

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

Давайте добавим атрибут align в наш код в VS. Когда вы начнете прописывать атрибут и поставите знак = программа автоматически откроет вам кавычки. Вам остается только вписать значение атрибута.

Сохраните файл и проверьте в браузере результат. Первый абзац должен стать ориентированным по правому краю.

Наш редактор кода VS достаточно современный, чтобы определять устаревшие атрибуты. Вы можете увидеть, что атрибут align подсвечен красным цветом — так редактор сообщает нам, что атрибут устарел. Но пока мы ничего менять не будем.

Давайте исследуем страницу html в браузере.

Нажмите F12 на клавиатуре. Либо правой кнопкой мыши «Проверить элемент» или «Посмотреть код». У вас откроется дополнительная панель, в которой мы можем исследовать наш код. Содержимое веб-страницы.

Эта панель может быть как снизу страницы, так и сбоку. На примере показана панель в браузере Mac Safari.

А вот так выглядит панель в браузере Google Chome:

Не обращайте внимание на содержание, тут для нас главное понять какая вкладка нам нужна. А нужна нам вкладка Elements (Элементы). Там мы видим содержимое нашей страницы, именно так, как мы написали его в нашем файле index.html

Нажимая на стрелочки вы разворачиваете «дерево» и видите теги и их содержимое.

И если с тегами <p> всё понятно, то откуда взялись дополнительные теги <html></html>, <head></head> и <body></body>?

Сейчас наши браузеры достаточно продвинутые, чтобы самостоятельно дописать эти теги, но они могут сделать это не корректно. Поэтому в дальнейшем мы обязательно будем прописывать эти теги в нашем файле .html

Есть еще один важный тег, который необходимо прописывать в файле, но браузер его нам не показывает.

Это тег <!doctype html> Благодаря этому тегу браузер понимает какая спецификация html используется. Мы не будем использовать другие спецификации, поэтому не будем заострять на этом внимание.

Допишите этот тег в своем файле. Обратите внимание, когда начнете набирать первые символы VS предложит вам автозаполнение.

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

Тег <!doctype html> всегда пишется первым. Обратите внимание, что этот тег одиночный — у него нет закрывающего тега.

Следующим идет парный тег <html></html>

• Очень важно запомнить, что весь контент (код) вашего сайта должен находиться внутри этого тега, кроме тега <!doctype>.

С помощью этого тега браузер считывает код вашего сайта.

Добавьте тег <html> в ваш файл и перенесите параграфы внутрь тега. Следите за открывающим и закрывающим тегами.

Обратите внимание на отступы. Очень важно соблюдать «вложенность» каждого следующего элемента. Благодаря такому написанию разные блоки кода визуально отделены друг от друга.

После того, как вы скопируете параграф и вставите его в тег html он будет без отступа. Нажмите мышкой в начале параграфа, вы увидите моргающий курсор, нажмите кнопку TAB и параграф сместится на нужно расстояние. О том как правильно оформлять документ еще будем говорить подробнее в других уроках.

Если мы вернемся в браузер и еще раз посмотрим на панель с исследованием кода, то мы увидим, что параграфы «вложены» еще глубже — в тег <body>.

Два тега <head> и <body> так же всегда будут присутствовать в нашем коде. Значение этих тегов отражено в их названии:

head — голова. Внутри этого тега хранится важная информация, которая не отображается визуально в браузере, но имеет прямое отношение к коду. Без этой информации сайт не будет работать корректно. Позже мы будем подробно разбирать этот раздел и информацию в нем.

body — тело. Этот тег содержит в себе весь основной код страницы, который отображается в браузере и виден всем посетителям страницы.

Добавьте теги <head> и <body> в свой документ и перенесите контент. Обратите внимание, что оба тега парные, обязательно добавьте закрывающие теги.

Сохраните изменения в файле. Перейдите в браузер и обновите страницу. Вы увидите в инспекторе кода, что все теги, которые мы прописали, отображаются корректно, в том числе и <!doctype>

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

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

• Все теги выучить практически не возможно, их огромное множество. Поэтому абсолютно нормально пользоваться сторонними сервисами, например, https://html5book.ru/ теги ищите в разделе html. Так же там вы найдете атрибуты, подходящие под каждый тег и описание использования тега в разных ситуациях.

Для начала скачайте pdf-файл, который будет служить вам примером для работы: Кодстайл в веб-вёрстке

Мы будем переносить разметку в наш файл по порядку и постепенно изучим несколько новых тегов.

Заголовки <h></h>

Самое первое, что мы видим в статье — большой заголовок.

В html заголовки бывают 6 типов:

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<h3>Заголовок 3</h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

Важность заголовков. Самый важный заголовок H1. Наглядно это можно увидеть в текстовом редакторе:

Очень важно запомнить, что тег Н1 должен быть только один. И в нем должна быть прописана суть всей страницы. То, о чем эта страница. в том числе с помощью этого тега поисковые системы находят вашу страницу в интернете.

Далее заголовок H2. Он отлично подойдет для названия разделов.

После по значимости идет заголовок H3. Его можно использовать, например, для выделения нескольких тем в разделе.

И так далее до заголовка H6.

Технически, если вы присвоите разделу тег H3 ничего не произойдет, ваш код будет отображаться корректно. Но при написании кода существуют правила, чтобы не только вы могли читать свой код, но и другие разработчики. А так же, чтобы вы сами могли прочитать свой код, вернувшись к нему спустя несколько месяцев, а то и лет. Если не будет правил и структуры, поверьте, вы уже не вспомните для чего и какой тег вы использовали. Поэтому, будьте внимательны к структуре, привыкайте к ней и запоминайте. Чистый, читаемый код — залог вашего успеха!

Для примера заголовок H1 на разных сайтах. Он хорошо выделен по сравнению с другим текстом, он крупнее.

«Создаем интерьеры для жизни», «Гибкая упаковка», «Психология как искусство быть рядом»

Хочу подчеркнуть, что по дизайну заголовки h1-h6 могут быть абсолютно одинаковыми, но вот внутри кода их лучше разделять по смыслу. Иногда может не быть видимого заголовка h1, а на главной странице мы увидим сразу второстепенные заголовки, это нормально. В таком случае заголовок h1 может быть скрытым, благодаря коду, но поисковые системы его все равно будут считывать.

Давайте вернемся к нашему PDF-файлу.

Первое что мы видим — большой заголовок «Зачем нужен кодстайл в веб-вёрстке»

Посмотрите всю статью, выделите для себя другие заголовки, подумайте, как бы вы их распределили от h1 до h6. Помните, что не обязательно использовать все заголовки до h6. Чаще всего используют максимум h3-h4. Можете записать себе отдельно, а походу выполнения задания сверяться со своими записями.

Откройте ваш файл index.html. Удалите все абзацы, скопируйте текст из статьи и вставьте его в код.

Давайте выделим заголовок статьи. Разместите текст заголовка в тег <h1></h1>. Откройте файл index.html в браузере и посмотрите результат. Заголовок отделился от неформатированного текста и стал крупным.

Посмотрите внимательно на статью. Дальше в ней идут несколько абзацев, которые мы уже умеем выделять с помощью тега <p>.

Так как VS умеет дописывать закрывающие теги, работа пойдет быстрее если вы выделите и вырежете параграф (Ctrl + X), пропишите тег <p></p> и вставите в значение тега текст (Ctrl + V).

Сделайте в своем файле три параграфа после заголовка.

Обратите внимание на оформление. Сейчас мы будем оформлять наш код таким образом, чтобы было хорошо видно открывающий тег, закрывающий тег и значение внутри тега. Так вам легче будет отслеживать правильность написания своего кода и искать в нем ошибки. Но постепенно в процессе обучения мы будем усложнять наш код.

Посмотрите в браузере результат. Три параграфа должны визуально отделиться друг от друга.

Но если внимательно посмотреть на исходную статью, мы увидим, что там есть текст выделенный курсивом и жирным шрифтом.

Текст выделенный жирным шрифтом Теги <b></b> и <strong></strong>

Визуально текст с такими тегами в браузере будет выглядеть одинаково. Но у тегов есть так же и смысловая составляющая — что этот тег обозначает.

Тег <b></b> — просто выделяет текст жирным шрифтом. Это делается просто для дизайна.

Тег <strong></strong> — для поисковых систем этот тег очень важен. Для них он сильнее чем тег b. То есть текст, выделенный тегом strong несет очень сильную смысловую нагрузку. И голосовыми помощниками он будет выделяться сильнее. Такими помощниками, например, пользуются слепые люди.

Текст выделенный курсивом Теги <i></i> и <em></em>

Тег <i></i> — просто выделен курсивом ради дизайна.

Тег <em></em> — несет важную смысловую нагрузку для поисковых систем и голосовых помощников.

Еще немного про отличие этих тегов. Тег strong — этот тег несет самую большую смысловую нагрузку. Эта та часть текста, где бы вы сказали «ВНИМАНИЕ!». Тогда как тег em выделить ту часть текста, где нужно сказать «Очень важное примечание! Не пропусти».

Теперь посмотрите на исходник нашей статьи и определите для себя какой тег нужно использовать в каждом случае в первых двух абзацах. Далее сверьте свой ответ.

Первое что мы видим — это описание предмета. На мой взгляд никакой супер важной смысловой нагрузки это не несет. Скорее это просто стилистическое оформление, чтобы привлечь ваше внимание.

Далее идет предложение «Это называется порядком однородных определений.» В данном случае четко указывается на какое-то слово, что это порядок именно однородных определений, а ни каких-то других.

Далее слова понимать и кодстайл. Эти слова хоть и выделенны жирным, но не сильно влияют на интонацию в тексте.

Проверьте себя:

Сохраните ваш код и посмотрите, как изменилась ваша статья в браузере.

Следующий блок в нашем файле со статьей — Цитата. Тег <q></q>

Этот тег используется в том случае, когда вы по какой-то причине не указываете автора цитаты.

Если же автор цитаты указать необходимо используется следующая конструкция:

<p>

       <q>Цитата</q>

       <cite>Автор</cite>

</p>

Если мы просто обернем слова в теги <q> и <cite> не используя при этом тег <p>, то мы просто выделим текст среди общей массы.

Именно поэтому дополнительно эти теги «оборачиваются» в параграф <p>. Чтобы отделить цитату от общей массы неформатированного текста. Так же обратите внимание, что тег <q> автоматически подставляет кавычки, поэтому лишние кавычки из текста можно убрать.

Добавьте цитату в ваш index.html и посмотрите, что получилось в браузере.

Вы можете видеть, что в статье цитата дополнительно выделена цветной рамкой. На данном этапе мы это выделение делать не будем, а вернемся к нему чуть позже.

Далее в статье идет параграф с двумя выделенными и подчеркнутыми словами Яндекс, Google. Таким образом в файле отображаются ссылки. И еще один параграф без дополнительного форматирования.

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

Слово или текст, к которому должна быть прикреплена ссылка оборачиваются в тег <a></a>.

Если воспользоваться автозаполнением от VS, то вы увидите, что он дополнит ваш тег свойством href=»». Напоминаю, как выглядит тег со свойством: <a href=»»></a>

Пока что мы оставим это значение не заполненным. Добавьте нужные параграфы и теги для ссылок. Сохраните код, обновите браузер, проверьте сходится ли ваша с исходником.

Если ваши ссылки не синего цвета, а фиолетового — это значит, что вы уже нажимали на эти ссылки и переходили по ним.

Далее идет изображение. Это так же довольно сложный элемент и на данном этапе кода мы его пропустим. Так же, пропускаем подпись картинки.

Далее в статье можно отследить заголовки второго уровня h2 (HTML, CSS, JS)

Почему это заголовки именно второго уровня. Мы помним, что заголовок h1 у нас может использоваться только 1 раз и мы его уже использовали для самого главного заголовка статьи. Для ее названия. Эти заголовки объединяют под собой некий сгруппированный текст по смыслу. Поэтому все три заголовка одинаковые по значимости и поэтому мы используем следующий уровень после h1. То есть тег h2.

Добавьте нужный тег к заголовкам.

Не забывайте удалять лишние пробелы в коде и выстраивать красивое дерево.

Так же можно заметить, что в разделе HTML «потерялись» теги, которые нам необходимо было прописать текстом. Так как браузер считывает теги, но не отображает их мы сталкиваемся с такой ситуацией. Но когда нам нужно вывести в тексте именно текст, то необходимо пользоваться специальными символами: &lt и &gt получится (&ltimg&gt, &ltbr&gt и другие)

И последнее задание на этот урок: Комментирование текста.

Вернемся немного выше, туда, где мы оставили подпись изображение из статьи. «Как выглядит наш сайт кодстайла»

Если у вас в коде есть какая-то часть кода или текст, которые вы бы не хотели удалять, но в данный момент они вам не нужны в визуальном отображении в браузере — этот элемент можно закомментировать.

Как это выглядит:

<!— Закомментированная часть, которая не будет отображаться —>

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

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

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

Так как мы работаем в интернете мы обязательно должны обращать внимание на то, какой вес имеют изображения. Слишком «тяжелые» картинки могут влиять на продуктивность работы сайта. То есть как быстро сайт будет грузиться у пользователя. Чем лучше показатели загрузки сайте, тем лучше он выдается в поисковых запросах. Поэтому этот момент важен не только для пользователя, но и для владельца сайта.

Есть два вида изображений: векторные и растровые.

Растровые изображения

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

Основные форматы:  jpeg, png, webp, avif, gif

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

png — хорошо сохраняет качество и имеет прозрачность

webp — довольно свежий формат, который имеет оптимальное сочетание качества изображения и его веса. Практически все браузеры поддерживают этот формат.

avif — новый формат изображений, который поддерживается браузерами не всеми браузерами (около 70%)

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

Векторные изображения

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

Формат: svg

svg — это код, благодаря которому на экране отображается рисованное изображение.

Все изображение перед использованием на сайте необходимо «сжимать».Это позволит оптимизировать работу сайта. Для этого можно использовать различные сайты-помощники. Вот некоторые из них:

https://tinypng.com/

https://squoosh.app/

https://www.iloveimg.com/ru/compress-image

Контентные и декоративные изображения

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

Возвращаемся к практике

В прошлом уроке мы пропустили изображение в нашей статье. Давайте вернемся к нему сейчас и изучим тег <img>.

Тег <img> не парный. У него нет закрывающего тега.

Если мы просто напишем этот тег в нашем коде, то ничего не произойдет. Нам нужно дать понять браузеру откуда брать нужную картинку.

Чтобы это сделать нужно прописать свойство тега src=»ссылка на картинку»

Так же для тега img используется атрибут alt=»Тут нужно описать, что изображено на картинке»

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

На примере изображен белый прямоугольник и текст «Код-стайл Оглавление». В этом месте должна быть картинки, но я не указала на нее ссылку и браузер не смог ее загрузить. Вместо этого он показал мне описание из атрибута alt.

Так же атрибут alt считывается голосовыми помощниками и поисковыми системами.

Еще атрибуты для тега img — width и height

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

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

<img src=»ссылка на картинку» alt=»описание картинки» width=»ширина» height=»высота»>

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

Возвращаемся в наш рабочий файл index.html

Раскомментируйте описание картинки. Удалите символы <!— —>. Так описание сново будет видно на странице браузера. Горячие клавиши Ctrl + /

Всегда во время работы с кодом смотрите на итоговый результат в браузере, так вы быстрее сможете отследить ошибку в коде и увидите, что что-то пошло не так.

Оберните описание картинки в параграф <p></p>.

Добавляем изображение в файл.

Если мы просто пропишем над описанием картинки тег img, то текст будет вплотную прилегать к ее нижнему краю.

Для визуального разделения двух элементов картинку так же можно обернуть в тег <p></p>.

Добавьте тег изображения с двумя атрибутами src и alt (высоту и ширину добавлять сейчас не будем)

Сохраните изменения и посмотрите в браузере, что получилось.

Так как мы не указали ссылку на картинку, у нас появилось ее описание из alt атрибута.

Скачайте изображение на ваш компьютер: Изображение для статьи

Далее зайдите в папку, где лежит это изображение, нажмите по нему правой кнопкой мыши и выберете «Скопировать путь». Вставьте эту ссылку в тег src и посмотрите, что получится.

У каждого из вас будет своя ссылка.

Если изображение получилось очень большим, просто пропишите ему дополнительный тег width и поставьте значение 600. Этого будет достаточно.

<img src=»ссылка» alt=»описание» width=»600″>

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

Тег <figure></figure>

Этот тег связывает какое-то изображение с текстом. То есть это группирующий тег.

<figure>

          <img src=»ссылка» alt=»описание»>

          <figcaption>Описание</figcaption>

</figure>

То есть описание изображения у нас теперь не в отдельном параграфе, а связанно с ним и заключено в специальный тег <figcaption></figcaption>

Давайте уберем в нашем файле index.html параграфы у изображения и его описания. Поставим вместо них тег figure и figcaption.

Вот, что у нас получилось.

Сохраните изменения и посмотрите, как изменится ваш текст в браузере. Вы можете заметить, что изображение и описание сместились правее.

Нажмите F12 и давайте посмотрим, что нам покажет инспектор кода в браузере.

Если вы наведете на тег figure, то браузер вам подсветит оранжевые области. Этим цветом обозначаются отступы.

Мы не прописывали эти отступы руками, получается, что у тега figure они встроенные, то есть применяются по умолчанию. Это встроенные стили тега.

Для начала этих знаний нам будет достаточно для работы с изображениями.

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

В этом уроке мы будем разбираться в каких случаях используется тег <a></a> — ссылка, а в каких тег <button></button> — кнопка.

Тег <a></a>

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

Тег <button></button> — это кнопка

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

Давайте посмотрим на примерах, чтобы лучше разобраться.

Ссылка. Тег <a></a>

<a href=»ссылка»>текст ссылки</a>

href — это атрибут тега. В кавычках мы указываем адрес, по которому пользователь перейдет при клике на ссылку. При написании ссылки обязательно нужно указывать полный путь к странице. Не просто sokhareva.ru, а https://sokhareva.ru

Когда вы только начинаете верстать веб-страницу, возможно, вы еще не знаете какая точно ссылка будет указана в атрибуте тега. Поэтому принято использовать знак #. Как это выглядит:

<a href=»#»>текст ссылки</a>

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

Когда мы прописываем адрес ссылки полностью, в браузере при клике на ссылку происходит переход с одной страницы на другую в рамках одной вкладке в браузере.

Как это выглядит можно посмотреть в видео.

Атрибут target=»_blank»

Этот атрибут позволяет нам настроить открытие ссылки в новой вкладке браузера, не закрывая основную вкладку.

<a href=»https://sokhareva.ru» target=»_blank»>текст ссылки</a>

В результате, после клика по ссылке, у вас будет 2 открытые вкладки в браузере: Основная вкладка со статьей и Сайт sokhareva.ru

Атрибут download

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

<a href=»index.html» download>текст ссылки</a>

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

Атрибут download — это атрибут булевого типа. Различные типы атрибутов мы будем изучать в следующих уроках.

Якорные ссылки

Скорее всего вы часто встречали эти ссылки на лендинговых страницах в интернете. Когда при нажатии на какой-то раздел, вас перекидывает вниз по странице к этому разделу. Наглядно это можно посмотреть на моем сайте sokhareva.ru. Где при нажатии на раздел «Тарифы» вас перекидывает вниз в списку предложений о покупке.

Так же вы могли встретить такие ссылки в оглавлениях, когда при нажатии на какой-то текст в оглавлении, вас перекидывает на нужный раздел.

Дл того чтобы сделать якорную ссылку необходимо присвоить ID параграфу или другому тегу, куда вы хотите поставить «якорь». То есть то место в которое пользователя будет перекидывать при клике на ссылку.

Например в параграф:

<p id=»paragraph»>Текст параграфа</p>

А в теге ссылки необходимо прописать уже не путь, а нужный id, он указывается через символ #

<a href=»#paragraph»>Текст ссылки</a>

Кнопка. Тег <button></button>

Раньше кнопки использовали в основном для отправки данных. Например, пользователь вводил в форму какие-то данные и по нажатии кнопки эти данные «улетали» на сервер. Теперь кнопки несут в себе разный функционал, а не только отправка формы. Например, вы часто встречали всплывающее окно на сайте с вопросом «Ваш город Москва?» и там же кнопки с ответом Да/Нет. Настраивать функционал кнопок мы будем в следующих уроках.

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

Вернемся к нашей статье.

Откройте файл index.html и давайте закончим ссылки, которые мы подготовили раньше.

• пропишите адрес (href) для ссылок Яндекс и Google.
• добавьте атрибут target, чтобы ссылка открывалась в новой вкладке

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

В html бывает два вида списков: Нумерованные и Ненумерованные

Нумерованный список — ordered list. Тег <ol></ol>

Часто такие списки используются при перечислении каких-то параметров

1. Параметр один
2. Параметр два
3. Параметр три

Ненумерованный список — unordered list. Тег <ul></ul>

Это просто маркерованные список, когда для него не важны порядковые номера.

• Пример один
• Пример два
• Пример три

Элемент списка — list item. Тег <li></li>

Важная особенность списков заключается в том, что внутри тега списка (ul или ol) может быть только тег элемента списка (li). Если вы в список поставите другой тег, разметка работать не будет.

Примеры кода:

<ol>
       <li>элемент списка</li>
       <li>элемент списка</li>
       <li>элемент списка</li>
</ol>

<ul>
       <li>элемент списка</li>
       <li>элемент списка</li>
       <li>элемент списка</li>
</ul>

Откройте пример нашей статьи. В разделе HTML вы как раз увидите не нумерованный список, обозначенный фигурами. В нашем случае это точки. Эти фигуры могут быть разными, главное, что это не цифры. А в разделе JS вы найдете нумерованный список.

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

Давайте добавим список в наш файл index.html. Начнем с ненумерованного списка в разделе HTML.

Всегда, перед тем как начать писать код, посмотрите на исходный дизайн. Проанализируйте в голове, что вы видите, какие элементы визуально выделены в блоке.

Если смотреть на эту часть статьи мы четко видим: Заголовок — Параграф — Ненумерованный список — Параграф.

Давайте обернем нужными тегами текст в нашем файле index.html

Обратите внимание на строки текста, когда вы копируете текст из сторонних программ или файлов и вставляете в VS он не всегда корректно становится по строкам. Не забывайте поправлять эти ошибки.

Пример: при копировании текста из pdf файла статьи одно из предложений разделилось на 2 строки кода (40-41)

Добавьте нужные теги, сохраните файл и проверьте отображение в браузере.

Горячие клавиши.

Для того чтобы быстро поменять парный тег можно воспользоваться горячими клавишами CTRL + D. Как это работает? Двойным кликом выделяете начальный тег, нажимаете CTRL + D. У вас дополнительно выделится закрывающий тег. Далее можете написать новый тег сразу в двух местах — в открывающем и закрывающем теге. Для практики попробуйте изменить тег ul на ol. Посмотрите результат в браузере.

Не забудьте вернуть правильные теги, как в статье.

Атрибут списка strat

<ol start=»1″></ol>

Этот атрибут показывает с какого номера будет начинаться нумерованный список. Хотите чтобы ваш список начинался с номера 50, тогда пишем start=»50″ и т.п.
Если у вас стандартная нумерация списка то атрибут start=»1″ можно не прописывать. Это значение у списка стоит по умолчанию.

Самостоятельно поработайте с разделом статьи JS.

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

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

Когда вы слышите слова таблица, скорее всего вы представляете себе классическую таблицу, как в школьном учебнике или в нашей статье.

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

Тег <table></table> — Таблица

Этим тегом мы сообщаем браузеру, что сейчас будет таблица, внутри которой будут другие элементы таблицы.

Тег <caption></caption> — Заголовок таблицы

Тег <tr></tr> — Строка в таблице (table row)

Тег <td></td> — Ячейка в строке таблицы

Собираем таблицу 2х2:

<table>
          <caption>Заголовок</caption>
          <tr>
               <td>Ячейка 1</td>
               <td>Ячейка 2</td>
          </tr>
          <tr>
               <td>Ячейка 1</td>
               <td>Ячейка 2</td>
          </tr>
</table>

Так же у таблицы есть разные атрибуты: высота, ширина, толщина линий и тд.

Атрибут border — отвечает за толщину внешних границ таблицы.

<table border=»10″></table>

Атрибут cellspacing — отвечает за расстояние от внешней границы ячейки до границы таблицы

Атрибут cellpadding — отвечает за отступ внутри ячейки.

В более сложные таблицы добавляются новые теги: thead, tbody, th. Давайте посмотрим, как их использовать.

<table>
          <caption>Товары</caption>
<thead>
               <tr>
                    <th>Номер</th>
                    <th>Наименование</th>
                    <th>Цена</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                    <td>Номер 1</td>
                    <td>Молоко</td>
<td>100 руб</td>
               </tr>
               <tr>
                    <td>Номер 2</td>
                    <td>Хлеб</td>
<td>50 руб</td>
               </tr>
            </tbody>
</table>

У нас получилось довольно много кода, но посмотрите на компактный результат:

Тег thead — выделяет первую строку таблицы, чаще всего там пишется название столбца. Заголовки столбцов выделяются жирным шрифтом.

Поэтому теги ячеек внутри тега thead называем th.

Тег tbody — это основная масса данных таблицы.

Тут, внутри тега tbody используем уже знакомые нам теги tr + td

Та же в таблице может быть заключительная строка. Чаще всего она подводит какой-то итог или для написания какого-то примечания для таблицы.

Тег tfoot — выделяет заключительную строку. Визуально эта строка не будет выделяться от основного тела тблицы, но для чтения вашего кода это очень удобная структура. Этот тег не обязательный для использования. В каких то таблицах его может не быть.

Для ячеек в теге tfoot используется стандартная связка тегов tr + td.

В итоговом варианте хорошо видно, как «ломается» сетка таблицы из-за того, что в последней строке количество ячеек отличается от предыдущих. Появляется как бы пустая ячейка без четких границ.

Как это исправить?

Нам нужно «растянуть» вторую ячейку и объединить ее с третьей. Нам поможет атрибут colspan. В значении атрибута необходимо написать какое количество ячеек должно быть объединено. В нашем случае — 2.

Так же обратите внимание, что тег заголовка таблицы caption находится внутри тега table, но не входит в thead или tbody. Он пишется отдельно от них.

Ячейки в строках мы объединять научились, но иногда приходится объединять ячейки в столбце. Для этого нам нужен атрибут rowspan. 

Он работает по аналогии с colspan, вам так же нужно указать значение, сколько ячеек сгруппируется по вертикали (в столбце).

Очень внимательно посмотрите, как это пишется в коде:

Все ячейки в таблице выстраиваются от левого края и не делают автоматически перенос. Поэтому, если мы добавим в строку дополнительное наименование «Ряженка», то ячейка выйдет за пределы таблицы и верстка «сломается» — появится еще один столбец.

Для того, чтобы это исправить, «Ряженку» нужно поставить на следующую строку — на третью. А «Кефир», соответственно, на четвертую.

Не забудьте, что так у вас получится 3 строки для «Молочной продукции». Поэтому, не забудьте увеличить rowspan у «Молочной продукции» до трех.

Переходим к верстке таблицы в нашей статье

В статье в разделе CSS внимательно посмотрите на таблицу и представьте все её элементы. Какие теги вы будете использовать при ее оформлении.

В таблице (table) мы видим:

• заголовок таблицы (caption)
• жирным текстом выделена первая строка, а значит это thead с 3 ячейками (th)
• нам нужно создать в tdoby из 5 строк (tr) по 3 ячейки (td)
• tfoot в данной таблице отсутствует

Приступим к оформлению кода.

Сейчас мы добавили нужные нам теги и контент таблицы выстроился в нужно порядке. Посмотрите на результат в браузере.

Очевидно, что таблица не похожа на исходник в нашей статье. Все потому что мы не применили атрибуты, которые позволяют стилизовать нашу таблицу.

Давайте добавим атрибут border со значением 1. И посмотрим результат в браузере.

Уже лучше, но мы видим, что линии в таблице двойные. Это потому что сама таблица имеет рамку и каждая ячейка в ней, так же имеет рамку. Чтобы соединить эти рамки нужно убрать cellspacing. Присвоить ему значение 0. Посмотрим в браузере, что получилось.

Отлично, двойную рамку убрали. Но видно, что весь контент внутри ячеек полностью зажат и отсутствует пространство, как в нашей таблице из статьи.

Это решается атрибутом cellpadding. Давайте пока что присвоим ему значение 20. То есть отодвинем на 20 пикселей границы от текста внутри ячейки.

Смотрим, что получилось.

Вы уже точно обратили внимание на то, что даже если в вашем коде текст написан с новой строки, в браузере он все равно идет одной строчкой. Всё потому что браузер не считывает перенос строк, для этого есть специальный одиночный тег <br>. Он ставится в том месте, где вы нажимаете Enter для переноса строки. То есть в конце строки, после которой будет переход на новую строку.

<td>

     position: relative;<br>

     left: 0;<br>

     right: 0;<br>

     top: 0;<br>

     bottom: 0;

</td>

Добавьте тег в вашу таблицу, где это необходимо и посмотрите на результат в браузере.

В целом, визуально таблица совпадает с той, что у нас в статье, только не хватает ширины таблицы. Это можно сделать атрибутом width. Значение можно поставить 800.

Получилось довольно похоже. Сейчас мы не будем работать с текстом внутри ячеек, чтобы не усложнять наш html код. Эти свойства будем прописывать уже в стилях в следующих уроках. Пока что изучаем базу.

Служебные теги

Такие теги позволяют браузеру считывать техническую информацию о странице и ее настройки.

1. Код языка страницы
Этот атрибут помогает браузеру понять на каком языке написана страница, а так же предлагать автоматический перевод пользователям из другой страны.

lang=»ru»

Этот атрибут прописывается не в теге head, а выше в теге html

2. Кодировка страницы

Ранее мы с вами посмотрели структура страницы и оставили пустое место в теге <head></head>.

Тег <meta> 

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

Атрибут тега meta charset=»UTF-8″

Этот атрибут позволяет браузеру понять на каком языке написана страница. Сейчас браузер умный и может догадаться сам, но это не всегда работает корректно. Например мой браузер видит страничку без прописанного тега с атрибутом charset вот так

Кодировок текста довольно много, но в современных браузерах мы используем именно UTF-8.

Для понимания вот список других кодировок в браузере Safari