В этом уроке мы сверстаем страницу сайта визитки. Цель урока — показать, что такое верстка, а не научить верстке с нуля. Поехали!
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
Дерево HTML-элементов и текста
Обозначается открывающим и закрывающим тегом. Открывающий и закрывающий теги содержат имя тега
Основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке
DTD (document type definition, описание типа документа). Предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях. Кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису
Определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных
Сообщает браузеру, каким образом должен отображаться тот или иной элемент страницы
Видимая часть окна браузера
Характеристика, которая будет применяться к элементу (в нашем примере это цвет)
Повторяющий блок CSS-кода, содержащий хотя бы один селектор и свойства
Элемент каскадной таблицы стилей CSS, указывает на элемент веб-страницы, к которому должны будут применяться стили
Язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно / растровой графики в формате XML
Способ расположения блоков на странице, позволяющий легко выравнивать элементы по горизонтали и вертикали, менять направление и порядок отображения элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю
Верстка — это расположение текста, заголовков, изображений и всего остального на странице. В процессе верстки используются специальные языки — HTML и CSS.
- HTML (HyperText Markup Language) — язык гипертекстовой разметки, с помощью которого собирается структура страницы.
- CSS (Cascading Style Sheets) — каскадные таблицы стилей, придают стиль будущей странице.
1. Открываем папку, где установлен OpenServer.
2. В папке Domains создаем папку Website.
3. Открываем созданную папку Website в VisualStudio Code.
4. Создаем файл index. html в корне.
Все теги внутри head не отображаются на странице, их цель помочь браузеру в работе с данными
Внутри тега могут быть какие-то параметры — они называются атрибутами
2. Указываем путь и кликаем с зажатым Ctrl на путь, чтобы открыть файл. Если этого файла нет, то студия предложит нам его создать.
Копирование шрифтов и картинок
2. Указываем имя шрифта, ссылку на сам шрифт и толщину шрифта. Сейчас мы указали 3 свойства: font-family, src и font-weight, а то, что находится справа через двоеточие — это значения этих свойств.
3. Дальше начинаем писать правила для определенных селекторов.
Правила — набор свойств, которые указаны внутри фигурных скобок. А селекторы — то, что указано до фигурных скобок — то, к чему эти правила будут применяться
4. Начнем с универсального селектора, который применяет правила ко всему на странице.
5. Затем для body обнуляем внешние отступы и указываем шрифт.
1. В html-файле создаем секцию для первого экрана, в ней будут контейнер и несколько блоков.
2. Первый будет содержать заголовок, а во втором будут 2 кнопки. Кнопкам сразу указываем классы.
Сейчас наша страница выглядит следующим образом.
Но это, пока нет стилей. Давайте напишем их.
1. Для контейнера укажем ширину, максимальную ширину.
2. Сделаем отступы слева и справа автоматическими.
3. Для секции зададим внутренние отступы сверху и снизу.
4. Для первого экрана установим высоту равную 100 высоты вьюпорта.
5. Сделаем блок flex’ом с вертикальным выравниванием по центру и обрезку с помощью эллипса.
6. Также эта секция будет иметь фон, поэтому укажем в качестве фона svg изображение, оно будет темное, поэтому цвет текста сделаем белым.
7. Теперь для заголовка укажем шрифт и его размер в 80 px и перейдем к кнопкам.
8. У кнопок будет внутренний отступ, граница и белый цвет, шрифт будет полужирный.
9. Укажем еще 2 класса для кнопки с фоном и без фона, но с границей.
Посмотрим, что получилось
Как видим, результат отличный. Остается добавить стрелку для прокрутки вниз.
1. После контейнера добавляем ссылку с картинкой, указываем путь до картинки и альтернативный текст.
2. Напишем стили. Это будет блок с абсолютной позицией, расположенный по центру с отступом снизу в 150 px.
Теперь первый экран готов.
Создаем еще одну секцию: с контейнером, заголовком 2-го уровня и двумя абзацами.
С другой стороны, повышение уровня гражданского сознания обеспечивает широкому кругу специалистов участие в формировании существующих финансовых и административных условий!
Соображения высшего порядка, а также постоянное информационно-техническое обеспечение нашей деятельности, в значительной степени обуславливает создание системы масштабного изменения ряда параметров.
Посмотрим, как это выглядит без стилей
Давайте все-таки добавим стилей.
1. Заголовку укажем размер и отступы.
2. Для абзацев назначим размер, межстрочный интервал и шрифт.
Как видите, результат стал куда лучше
1. Создаем еще одну секцию: с контейнером и заголовком 2-го уровня.
2. После заголовка создаем блок с классом gallery, каждая картинка будет находиться в блоке с классом img-wrapper.
3. Копируем блоки с картинкой, чтобы у нас было 9 штук.
Сейчас это выглядит как просто 9 картинок друг под другом
4. Добавим стилей. Галерея будет flex с flex-wrap, и элементы в ней равномерно распределены.
5. Для img-wrapper задаем размеры, отступы, overflow, курсор и flex с выравниванием по центру.
6. Для самой картинки устанавливаем только свойство заполнения.
Теперь это уже больше похоже на галерею
1. Создаем еще одну секцию, с контейнером. У этой секции будет фон как и у первой, поэтому используем уже имеющийся класс.
2. Делаем блок с классом flex, а в нем два блока шириной 60 и 40 процентов. У первого блока сделаем еще отступ справа.
3. В первый блок помещаем заголовок и небольшой абзац текста.
4. Во втором блоке делаем форму, которая будет состоять из текстового поля с именем, email-адреса, поля для сообщения и кнопки.
Посмотрим, как это выглядит без стилей. Не очень
1. Сделаем отдельный класс для flex и для ширины в 60 и 40 процентов.
2. Также нам понадобится класс с правым отступом в 4 rem.
3. Форма будет вертикальным флексом.
Как видите, поля ввода без дополнительных стилей всегда выглядят ужасно, поэтому сделаем с ними следующее.
1. Для input и textarea сделаем внутренний отступ, установим размер шрифта и отступ снизу, а границу уберем.
2. Для того же input и textarea напишем еще одно правило, когда они будут в фокусе, чтобы у них не было светящейся границы.
Теперь форма выглядит уже куда лучше
Остается сделать только подвал сайта.
2. Добавим немного стилей — небольшой отступ и выравнивание текста по центру.
Вот такой сайт у нас получился
Теперь вы знаете, что такое верстка и стили, на что они влияют, и как происходит процесс. Вы можете самостоятельно повторить этот урок и попробовать сделать что-то по своему усмотрению. Также советую выучить теги и свойства стилей, ведь чем больше вы их знаете, тем больше можете сверстать. Давайте проверим, как вы запомнили этот урок!
Для закрепления полученных знаний пройдите тест
Как расшифровывается HTML?
HeadText Modulation Language
HyperText Markup Language
HeadingText Mode Language
Указывает на формат файла
Указывает браузеру, что эта страница главнее остальных
Где следует располагать тег title?
С помощью какого CSS-правила можно подключить шрифты к странице?
Какой тег позволяет вставить картинку в HTML-документ?
К сожалению, вы ответили неправильно
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями