Лабораторные работы / Лабораторная работа 1
.pdf
Лабораторная работа 1 Разметка
Задание: Выполните разметку главной страницы сайта (макет tatoosalon-index.psd).
Нужен только HTML-код, стили делать не нужно. Пока не нужно делать разметку форм.
Не нужно размечать содержимое всплывающих окон (попапов), которые отрисованы в скрытых слоях в макетах. Вы завершите их позже.
Не нужно вырезать изображения. Используйте вместо них заглушки,
например: <img src="http://placehold.it/150x100">, или выдуманные имена файлов. Подготавливать графику из макетов вы научитесь в следующей лабораторной работе.
Большие куски текста вы можете копировать из макета.
Для разметки незнакомых интерактивных элементов вне форм можно использовать тег span.
Рекомендации к выполнению.
1. Структура проекта. Создайте папку в которой будут располагаться все файлы сайта. Внутри создайте структуру папок показанную на рисунке 1.
Рисунок 1 – Структура проекта
2.Относительные и абсолютные пути
3.Начнём с базовой разметки документа. Определим !DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.
4.Всю страницу логически можно разделить на три большие части: шапка страницы, основной контент и подвал.
Шапка страницы
Основная часть
Подвал
5.Начнём с шапки. Используем тег header c классом main-header.
6.Контент внутри header состоит из меню и раздела пользователя (вход и регистрация на сайте). Это главная навигация по всему сайту. Используем тег nav с классом main-navigation.
7.Основное навигационное меню — неупорядоченный список, каждый элемент которого содержит ссылку на страницу. Добавим тегу ul
класс site-navigation.
8.Добавим остальные ссылки в меню.
9.Добавим пользовательское меню. Сейчас в макете только кнопка входа. Когда пользователь авторизируется на сайте, могут появиться дополнительные ссылки и кнопки. Неупорядоченный список подойдет для этого элемента. Для тега ul добавим класс с названием user-navigation. Для вложенного тега li добавим класс login-link.
Иконка входа это декоративный элемент и в разметке не отображается.
10.На макетах внутренних страниц логотип является частью шапки, но на макете главной он вынесен за её пределы. Вопреки макету мы разметим логотип на главной странице так же, как и на внутренних – внутри шапки. А позже, на этапе стилизации, переместим логотип ниже, визуально вырвав его из шапки.
Логотип — контентное изображение. Он должен быть в разметке. Используем тег img. С помощью атрибута src укажите путь к изображению img/index-logo.svg. Не забываем указать фактические размеры логотипа и значение обязательного атрибута alt.
Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше.
Важно! Атрибут alt должен по смыслу соответствовать их содержимому.
11.Добавим контейнер для логотипа – обернем изображение логотипа
втег а с классом main-header-logo.
12.Основное содержимое страницы обернём в тег main. Этот тег может быть только один на странице. Для более удобной стилизации добавим класс container.
13.Добавим описание содержания всей страницы — это тег h1.
В макете страницы заголовка нет. Мы скроем его позже, при этом оставим видимым для поисковых систем и различных устройств для чтения. Добавим заголовку класс visually-hidden.
14.Переходим к разделу с преимуществами. Размечаем его с помощью тега section с классом features.
15.Раздел преимуществ — подраздел основного контента. Выбираем последующий уровень заголовка h2. Чуть позже мы его так же скроем. Поэтому так же добавим заголовку класс visually-hidden.
16.Каждое преимущество – элемент неупорядоченного списка преимуществ. Добавим тег ul с классом features-list, а каждому тегу li вложенному в ul добавим класс с названием feature-item.
17.Раздел преимущества содержит следующий по уровню заголовок (тег h3) и текстовое описание (выбираем тег абзаца p).
18.Добавим остальные элементы списка преимуществ.
19.Переходим к разделу новостей. Разметим его тегом section с классом news. Добавим заголовок на этот раз без класса visually-hidden. Он есть в макете, так что скрывать его нет необходимости.
20.Далее разметим ленту новостей с помощью списка. Добавим тег ul с классом news-list. Каждая новость – элемент списка. Добавим тег li с
классом news-items.
21.Текст новости разметим с помощью абзаца.
22.Дату публикации новости разметим с помощью тега time с атрибутом datatime.
23.Добавляем следующую новость.
24.Добавляем ссылку на все новости. Добавляем ссылке класс с названием button и обязательный атрибут href со значением news.html.
25.Приступим к разметке галереи. По аналогии с разделом новостей, используем тег section с классом gallery. Не забываем добавить заголовок.
26.Контейнер для картинок разметим тегом figure с классом gallery-
content.
27.С помощью тега img добавляем фотографию. Указываем все обязательные атрибуты и фактический размер. Фотографию обернем ссылкой, так как клик по изображению открывает полноразмерное изображение.
28.Кнопки переключения фотографий разметим тегом span. Для стилизации кнопок нам понадобятся несколько классов. Укажем для первого span (кнопка «Назад») класс button gallery-button gallery-button-back, для второго span (кнопка «Вперед») класс button gallery-button gallery-button- next.
29.Перейдем к разметке раздела Контакты. Используем тег section с классом contacts и добавим заголовок.
30.Адрес и время работы разметим с помощью абзацев. Для переносов используем тег br. Добавим ссылку на карту и страницу с контактами.
31.Далее добавим раздел для формы записи для клиентов. Используем тег section с классом appointment. Добавим разделу заголовок. Для описания формы используем абзац. Для последующей стилизации добавим абзацу класс appointment-info. Разметку формы выполним чуть позже.
32.Приступим к разметке футера. Используем тег footer c классом
main-footer.
33.Раздел с адресом разметим абзацем с классом footer-contacts и вставим ссылку на карту. Переносы текста сделаем с помощью тега br.
34.Блок социальных сетей разметим тегом div с классом footer-social
идобавим текст-призыв. Перечень ссылок разметим с помощью неупорядоченного списка Ссылки на социальные сети разметим с помощью тегов a с одинаковым классом social-button.
35.Раздел о разработчике оформим с помощью тега p с классом footer-copyright. Добавим текст и ссылку на главную страницу сайта графомании.
36.На главной странице есть два всплывающих окна - попапа. Такие окна называются попапы. Добавим для них разметку. Она будет расположена в body после разметки остального содержимого главной страницы.
Начнем с входа в личный кабинет пользователя.
Разметим окно с помощью тега section с классами modal и modal-login. Добавим заголовок.
Добавим текст-подсказку с помощью абзаца. Форму разметим позже.
37.Осталось добавить иконку для закрытия окна. Для этого подойдет span с классом modal-close. Разметка первого попапа готова.
38.Осталось разметить попап для карты.
39. Добавим тег section с классами modal modal-map, заголовок с текстом «Как нас найти» классом visually-hidden и иконку закрытия окна с классом modal-close.