Добавлен: 06.04.2023
Просмотров: 323
Скачиваний: 2
<a>
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.
<br>
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой.
<i>
Устанавливает курсивное начертание шрифта.
<img>
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
<span>
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
<strong>
Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
<ol>
Тег <ol> устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.
<ul>
Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.
<li>
Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных.
<table>
Служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.
<td>
Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
<th>
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
<tr>
Тег <tr> служит контейнером для создания строки таблицы.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое, то есть смысловое, содержимое документа. [15]
Появились такие секционные теги как:
<header>
Секция для вводной информации сайта или группы навигационных ссылок.
<section>
Логическая область( раздел) страницы, обычно с заголовком.
<articke>
Раздел контента, образующий независимую часть документа или сайта
<aside>
Контент страницы, имеющий косвенное отношение к основному контенту.
<nav>
Раздел, содержащий навигационные ссылки по сайту.
<footer>
Может быть несколько элементов footer на одной странице, и нужно использовать footer вместо <div id = "footer">. Это секция для нижнего колонтитула документа или раздела. [16]
Рассмотренные теги являются наиболее часто используемыми в верстке веб сайтов. Это может выглядеть запутанно и сложно с первого взгляда, поэтому самый лучший способ разобраться и понять, как и когда использовать какой тег, это сверстать пару собственных страниц. В данном случае, для удобства работы, мною были рассмотрены популярные редакторы кода, определена структура простого документа, разметка страницы и часто используемые теги. При верстке страницы, я буду использовать семантические теги HTML5, и некоторые из рассмотренных выше. По моему опыту общения и работы с разработчиками, можно сказать, что не обязательно держать в голове все теги, или стараться их сразу запомнить. Важнее запомнить и понимать структуру и вложенность страниц, и, с опытом придет понимание значения тегов.
Глава III. Создание промо-страницы для бизнеса.
Для своей работы я решила создать простой одностраничный сайт по продаже компостера «Волнуша». Скоро начинается дачный сезон, а мой знакомый решил заняться продажей компостеров. Данный сайт должен помочь ему с этой целью, поэтому и был выбран такой тип сайта: так как именно одностраничные (посадочные) страницы используются для завлечения пользователя. Так же для этого сайта, помимо верстки, мною был разработан дизайн, продумана структура блоков и контентная информация. В рамках данной работы, мы не будем останавливаться на дизайне или программировании форм обратной связи, а рассмотрим только разметку страницы на языке HTML.
Для начала объявляем версию HTML и указываем локализацию странички.
<!DOCTYPE html>
<html class="page no-js" lang="ru">
Далее описываем структуру блока <head>
<meta charset="utf-8">
Используется для задания кодировки страницы.
<meta name="viewport" content="width=device-width, initial-scale=1">
Устанавливаем размер экрана 1, для того чтобы запретить масштабирование экрана и обеспечить удобное использование сайта на мобильных телефонах и планшетах т.е. обеспечить адаптивность.
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
Данный список тэгов используем для запрета устройствам автоматического индексирования полей телефона, адреса, почты и тд.
<title>Супер-компостер "Волнуша"</title>
Название страницы сайта. Данный тэг используется для название страницы сайта, а также он очень важен для дальнейшего SEO продвижения сайта т.к. является одним из самых важных мета-тэгов для SEO. Правильность заполнения данного тэга, в дальнейшем, очень сильно влияет на продвижение сайта в поисковых системах.
<meta name="description" content="">
Также относится к семейству мета тэгов. Данный тэг служит для информирования поисковой системы о содержимом страницы сайта. В большинстве поисковых систем используется для формирования сниппета ( т.е. небольшого информационного блока, описывающего в выдаче поисковой системы найденный по запросу документ). Заполнение данного тэга рекомендуемо для дальнейшего SEO продвижения, что имеет большое значение для бизнеса. Поэтому нам это тоже важно.
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/custom.css">
При помощи данных тэгов осуществляется подключение CSS таблицы стилей, которая будет использована при разработке сайта. Использование таблиц стилей позволяет сделать HTML код проекта более читабельным и удобным для разработки, а также позволяет исключить избыточность кода при повторном использовании некоторого набора правил.
На этом описание тэга header заканчивается. Переходим к работе над телом сайта – тэгом <body>. При дальнейшей доработке сайта тэг header может быть модифицирован для подключения сторонних библиотек. Для внесения правок в стили сайта можно использовать отдельно подключенный файл custom.css
Весь контент, который находится в body оборачиваем в div - <div class="page__inner">. Данный див служит для задания формы сайта т.е. ограничивание размеров и характеристик странички, описание работы сайта на различных устройствах. Все эти параметры задаются в css таблице стилей. Далее приведем фрагмент кода таблице стилей, который используется для описания page__inner
.page {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
min-width: 320px;
min-height: 100%;
}
Данный блок устанавливает размер страницы в 100%, но не менее 320 px. Это обеспечивает комфортную работу с сайтом на различных устройствах.
Далее, после формирования страницы перейдем к описанию контентной области. Для этого служит <div class="page__content">, который включает в себя:
<header class="page-header" role="banner">
<section class="banner">
<section class="advantages">
<section class="description">
<section class="features">
<section class="video">
Где <header class="page-header" role="banner"> - див, используемый для верхней части сайта т.е. шапки с контактами и формой заявки.
Для header используется следующий стиль, описанный в таблице стилей.
.page-header {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
Далее рассмотрим каждый блок секций сайта.
Секция <section class="banner"> - используется для задания верхнего баннера сайта. (Рис.3) Содержит в себе фоновую картинку, кнопку и h1-офер т.е. текст предложения для целевой аудитории. Далее, приведу фрагмент кода, отвечающий за формирования данной секции.
<section class="banner">
<div class="banner__inner">
<h1 class="banner__title">Украсьте Ваш сад<br> с пользой для урожая</h1>
<h2 class="title banner__subtitle">Выбирайте Супер-компостер "Волнуша"</h2><a class="btn" href="#form">Заказать</a>
</div>
</section>
Рис. 3. Верхний баннер
Секция <section class="advantages"> - используется для описания преимуществ продукта. (Рис.4) И содержит в себе заголовок уровня h2:
<h2 class="title title--section">Преимущества компостера “Волнуша”</h2>
И описание преимуществ с их разметкой:
<li class="advantages__item"><img class="advantages__icon" src="img/icon-photographer.png" alt="Материал" />
<p class="advantages__text">Изготовлен из материала, который не вступает в химическую реакцию с отходами, поэтому экологически безопасен</p>
</li>
Реализованных через списки <ul class="advantages__list">.
Рис. 4. Преимущества
Секция <section class="description"> - используется для описания продукта и состоит из 2 блоков:
<div class="description__left">…</div>
<div class="description__right">…</div>
При помощи данных блоков реализуется выравнивание контента по левой и правой стороне секции, где левую часть должна занимать картинка продукта, а правую – текстовой описание и кнопка.(Рис. 5)
Рассмотрим css стили данных блоков.
.description__left {
display: inline-block;
max-width: 50%;
vertical-align: middle;
padding: 5px;
}
.description__right {
display: inline-block;
max-width: 50%;
margin-left: 30px;
padding: 0 5px;
padding-bottom: 30px;
vertical-align: middle;
}
Для вставки в левую область картинки используется тэг img –
<div class="description__left"><img src="img/volnusha.png" alt="Картинка Волнуша" /></div>
В правой части секции используем следующие тэги
<h2 class="title title--text">Супер-компостер "Волнуша" 1000 литров</h2>
Для указания заголовка. В данном случае – названия товара.
<p class="description__info">Если вы находитесь в раздумье приобретать готовую модель компостера или сделать из подсобных материалов, то советуем выбирать первый вариант. Конечно для того чтобы компостер Волнуша купить потребуется определенная сумма денег, но ведь это избавит вас от многих неудобств.</p>
Для указания текстового описания товара.
Для указания цены и реализации кнопки с переходом к форме заявки используем следующий html код:
<div class="description__price"><span class="description__cost">280,00 руб.</span><a class="btn" href="#form">Купить</a></div>
Итого получаем секцию следующего вида
<section class="description">
<div class="description__inner">
<div class="description__left"><img src="img/volnusha.png" alt="Картинка Волнуша" /></div>
<div class="description__right">
<h2 class="title title--text">Супер-компостер "Волнуша" 1000 литров</h2>
<p class="description__info">Если вы находитесь в раздумье приобретать готовую модель компостера или сделать из подсобных материалов, то советуем выбирать первый вариант. Конечно для того чтобы компостер Волнуша купить потребуется определенная сумма денег, но ведь это избавит вас от многих неудобств.</p>
<p class="description__ship">Доставка по всей Беларуси</p>
<div class="description__price"><span class="description__cost">280,00 руб.</span><a class="btn" href="#form">Купить</a></div>
</div>
</div>
</section>
Рис. 5. Описание товара.
Следующая секция <section class="features">, используется для для описания преимуществ товара. Данная секция включает в себя общее описание продукта и преимуществ, реализованные при помощи списка.(Рис.6)
Общая информация о продукте реализована при помощи h2 заголовка, картинки, оформленной в тэг img, а так же – текстового описания. Приведем фрагмент html кода далее.
<h2 class="title title--section">Конструктивные особенности изделия</h2>
<div class="features__info"><img class="features__img features__img--left" src="img/volnusha_enl.png" alt="Комплектация" />
<p class="features__desc">Модель Волнуша является детищем местного производителя. Он не имеет дна, а значит излишки влаги будут проникать в грунт и тем самым помогут избежать переувлажнения компоста. Такая особенность конструкции позволяет быстро выгружать уже созревший компост. Если же необходимо взять только небольшую часть приготовленной смеси, то можно воспользоваться выгрузными люками, расположенными в нижней части изделия, учтите этот аспект чтобы не нарваться на подделку.</p>