Добавлен: 06.04.2023
Просмотров: 327
Скачиваний: 2
Элемент списка представлен в следующем виде.
<li class="features__item">
<dl class="features__settings">
<dt class="features__settings-title">Высота: 110 см</dt>
<dd class="features__settings-desc">Дачники, увлекающиеся натуральным земледелием знают, что для быстрого созревания компоста его высота и ширина должны быть не менее 1 метраЕго высота составляет 110 см, а диаметр достигает 120 в самом широком месте – у основания.</dd>
</dl>
</li>
В данном фрагменте кода представлена характеристика и ее текстовое описание. Для товара было выбрано 4 основные характеристики, которые представлены в аналогичном виде.
Рис. 6. Конструктивные особенности.
Секция <section class="video"> используется для вставки видео ролика с ютуба при помощи iframe. (Рис.7) Далее приведем код всей секции. Помимо вставки кода видеоролика данная секция не содержит никакой специфической информации и в дополнительных пояснениях не нуждается.
<section class="video">
<div class="video__inner">
<h2 class="title title--section video__title">Посмотрите видео об особенностях изделия</h2>
<div class="embed-responsive embed-responsive--4-3"><iframe src="https://www.youtube.com/embed/3s7zxP9uVYM" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</section>
Рис. 7. Блок с видео.
После описанных секций идет завершающий блок сайта - <div class="page__footer-wrapper">.
Данный блок предназначен для описания нижней части сайта, которая включает в себя форму заявки, которая будет обрабатываться скриптом, разработанном на языке php - /functions/send.php В рамках данной работы рассмотрим данный блок, не рассматривая схему работы php скрипта.
Блок <div class="page__footer-wrapper"> состоит из фонового изображения, описанного в css таблице стилей и формы заявки. Рассмотрим HTML код формы заявки:
<form class="form page-footer__form" action="/functions/send.php" method="post">
<div class="form__inner" id="form">
<fieldset class="form__fieldset">
<legend class="form__legend">Закажите супер-компостер волнуша прямо сейчас с доставкой по всей Беларуси </legend>
<p class="form__text">Для этого заполните форму ниже</p>
<label class="field-text form__fiel-text">
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" name="name" requaired="requaired" placeholder="Введите имя"/>
</span>
</label>
<label class="field-text form__fiel-text">
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" name="phone" requaired="requaired" placeholder="Введите номер телефона"/>
</span>
</label>
<button class="btn btn--main form__btn" type="submit" name="submit">Заказать</button>
</fieldset>
</div>
</form>
Данная форма содержит заголовок, оформленный в тэг:
<legend class="form__legend">Закажите супер-компостер волнуша прямо сейчас с доставкой по всей Беларуси </legend>
2 поля для ввода номера мобильного телефона и имени заказчика, которые имеют вид:
<input class="field-text__input" type="text" name="phone" requaired="requaired" placeholder="Введите номер телефона"/>
<input class="field-text__input" type="text" name="name" requaired="requaired" placeholder="Введите имя"/>
Важно отметить в данных полях атрибут requaired="requaired", который указывает на обязательность заполнения полей
Завершает форму кнопка отправки данных, по нажатию на которую выполняется скрипт-обработчик, реализованный на php. Кнопка отправки формы имеет следующий вид:
<button class="btn btn--main form__btn" type="submit" name="submit">Заказать</button>
Сам блок по итогу выглядит так. (Рис.8)
Рис. 8. Экран с формой.
После блока footer’a страница заканчивается и происходит закрытие тэгов body и закрытие тэга html.
Таким образом, у нас получилась простая промо страница товара, которая направлена на то, чтобы помочь в продажах, ответить на основные вопросы пользователей и собрать заказы с помощью формы заказа. В данном случае мы полностью рассмотрели ее структуру,
ЗАКЛЮЧЕНИЕ
На данный момент существует множество конструкторов сайта, где пользователь может создавать простые страницы, не углубляясь в то, как они работают. Однако в таких конструкторах существует множество ограничений. Страницы получаются одинаковыми и шаблонными, а иногда приходится все равно дописывать свой HTML код. Поэтому изучение основ языка HTML по-прежнему остается актуальным. Так как это позволяет создавать уникальный веб-сайт, не привязываясь к инструменту и его ограничениям.
В ходе выполнения курсовой работы, были выполнены следующие задачи. В частности, была рассмотрена история создания и развития языка HTML от первого гипотетического прототипа, до спецификации HTML5. Определено, что, в зависимости от контекста, называть язык разметки – языком программирования, не совсем корректно, несмотря на то, что многие интернет источники до сих пор продолжают это делать. Так же были рассмотрены основные инструменты создания Web-страниц, в рамках этой курсовой работы, были описаны преимущества и недостатки, популярных на данный момент, современных редакторов кода, потому как я считаю это важным инструментом в разработке сайта, так как это экономит время и помогает лучше визуально понимать структуру кода. Были определены основные понятия языка HTML, такие как: теги, атрибуты тегов, семантика, вложенности. Была разобрана структура страницы и описаны основные теги, в том числе рассмотрены новые теги HTML5. Таким образом, заданная изначально цель была выполнена, а именно, разработана и сверстана промо-страница для представления и продажи компостера «Волнуша», которая так же выполняет свои цели для бизнеса и заказчика.