Верстка сайта

Cделаем верстку сайта с нуля. Создадим на компьютере или ноутбуке папку для сайта. Откроем редактор кода Брэкетс и создадим новый файл. Кликаем по вкладке файл — выбираем новый. Сохраняем под названием index.html. Теперь в списке файлов появился файл главной страницы сайта index с расширением html. Для быстрого написания кода установим плагин Emmet.

Ставим "!" и жмем "Tab", и сразу выводися базовая структура html страницы. Между тегами title напишем заголовок страницы. Исправим сгенерированный плагином заголовок Document на более подходящий, "Верстка сайта".

Создадим в папке с проектом файл со стилями css. который будет описывать внешний вид веб-страницы. Кликаем по вкладке файл левой кнопкой мыши и выбираем новый. Появляется файл "Без названия-3". Выбираем файл, сохранить и в названии файла указываем stile.css. В рабочей вкладке сейчас видим содержимое файла css, в котором изначально ноль строк.

Вот исходное задание от заказчика на одностраничный сайт.

Во вкладке с рабочими файлами выберем файл stile.css. Напишем высоту верхней части сайта, называемой хэдером. Зададим его с помощью идентификатора # и тега HTML5 header. Между фигурными скобками пишем haight что означает высота и после двоеточия указываем значение 50px пикселей. Ставим точку с запятой. Далее могут указываться другие свойства css. После кажого параметра ставим (;). В файле index.html между тегами title укажем заголовок для поисковых систем "Верстка сайта", который также отображается во вкладке бразера.

Создадим разметку для в файле index.html для header. Здесь будет размещаться меню с кнопками перехода на другие страницы.

Перед подключением CSS в теге linc подключим бутстрап (Bootstrap) 4 одной строчкой через CDN. Сетка бутсрап и стили css будут подгружаться через интернет напрямую с сайта разработчика, а не с хостинга. Создадим структуру для основной части сайта с контентом, где будет отображаться текст и фото работ. Создадим div и назовем его интуитивно понятно. Между двойными кавычками пропишем класс content. Классы css должны называться только в английской раскладке. Жмем сохранить

В файле со стилями пропишем начальные стили css для контентной части сайта: отступ сверху 10px, отступ снизу 10px. Сохраняем файл. В header пропишем контейнер с бутстрап класс conteiner, который в дальнейшем будет ограничивать содержимое страницы по ширине так чтобы оно не вылазило за пределы экрана.

Такой же контейнер создадим в контентной части сайта. Без него текст и картинки будут вылазить или упираться в самый край экрана. Возьмем из библиотеки bootstrap 5 conteiner-fluid который будет резиновым и занимать всю ширину экрана на любом устройстве: мобильный, планшет, компьтер, и является адаптивным.

Подключим цвета css. В Яндексе набираем таблица цветов css. Здесь можно выбрать числовой код нужного цвета, скопировать значение и вставить его в свой файл css. Создадим css стили для заголовка страницы H1: размер шрифта 50px, цвет темно-синий, выравнивание текста по центру.

В файле index.html между тегами H1 пропишем заголовок страницы "Техническое обслуживание электроустановок". Между тегами title напишем более подходящий заголовок для поисковой выдачи "Техническое обслуживание электроустановок в Минске". Зайдем в папку сайтом и двойным щелчком левой кнопкой мыши запустим файл index.html. Он откроется в браузере по умолчанию и мы увидим на экране заголовок страницы техническое обслуживание электроустановок с отступом сверху, высотой текста 50px и выравниванием текста по центру заданными в файле css.

В файле index.html пропишем подзаголовок страницы H2. Нажмем сохранить. В файле stiele.css для подзаголовка второго уровня H2 пропишем начальные стили css c привязкой к контентной части сайта начиная с новой строки ставим точку и печатаем content и через пробел H2 ставим фигурные скобки и между фигурными скобками печатаем font-zize двоеточие 40px (высота шрифта 40 пикселей) и ставим точку с запятой, color двоеточие пробел решетка и сразу числовое значение цвета взятое из таблицы цветов css в интернете и сразу ставим точку с запятой, с новой строки вводим text-align двоеточие и через пробел center (центрирование текста по центру) и ставим точку с запятой как показано на скриншоте с редактора кода Brackets. Созраняем изменения. В файле index.html между тегами H2 прописываем подзаголовок "Ответственный за электрохозяйство". Жмем сохранить.

Обновляем страницу и видим подзаговок страницы H2 с высотой теста 40 пикселей темно-синего цвета и с выравниванием текста по центру.

Смотрим на техническое задание и видим что дальше идет текст. В файле index.html приписываем открывающий и закрывающий теги параграфа латинскими буквами p как показано на экране. Сохраняем. В файле со стилями css для параграфа прописываем точка content p двоеточие открывем фигурные скобки и с новой строки пишем размер шрифта font-size 20 пикселей, цвет такой же как и для подзаголовков, выравнивание теста слева text-align: left и ставим точку с запятой и закрываем фигурные скобки. Созраняем.

В файле index.html прописывем текст параграфа. Жмем сохранить. Обновляем страницу и видим введенный текст с параметрами указанными в css. Теперь сделаем отступ красной строки. Набираем в яндекс отступ красной строки css и окрываем учебник. text-indent задает отсуп красной строки. В файле css дописываем для параграфа text-indent и ставим сколько нужно отступить в пикселях. Жмем сохранить.

Сделаем шрифт пожирнее. Набираем в Яндекс жирность шрифта css. В выдаче видим что за жирность отвечает свойство font-weight. Допишем для текста страницы для параграфов p font-weight двоеточие 400 и ставим точку с запятой. Сохраняем.

Обновляем страницу и шрифт становится более жирным.

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

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

Добавим следующий параграф p. Внутри которого поместим заранее заготовленный текст из ворд. Выбираем файл-сохранить. Обновим страницу и на экран выведется следующий параграф.

Аналогично добавим еще один параграф, 3-й,4-й,5-й ,6-й,7-й,8-й,9-й. Сохраним. Обновим страницу и введенные параграфы выведутся в браузере на экране компьютера.

В файле index.html добавим разметку семантическими тегами html 5 footer для нижней части сайта где будут размещаться контактные данные.

В файле css пропишем основные стили для footer. Набираем решетка footer пробел и открывающие и закрывающие фигурные скобки. Между фигурными скобками пропишем отступ сверху 60 пикселей, отступ снизу 10 пикселей. Сохраняем изменения.

В файле index.html между тегами футера вставим контейнер с бутстрап. Он будет ограничивать ширину содержимого слева и справа. Без него текст будет выезжать за экран и появится горизонтальная полоса прокрутки. Что неправильно из соображенеий правильности кода и верстки.