Урок #5 (верстаем <main> и <footer>)
BulatДавненько я не писал уроки. Помниться, что мы доверстали <header>, значит сегодня закончим наш сайт, т.е. сверстаем <main> и <footer>.
Содержание:
Ааа, последний абзац по html в этом курсе(((
Для открытия на компьютере без прокси и vpn - https://tgraph.io/Urok-5-06-11
Верстаем основную часть
Тег <main> предназначен для удобства чтения кода. Он может быть только один на странице. Как и следует из названия, в него помещено основное содержимое страницы.
Откройте тег <main>. Для этого напишите main и нажмите Tab. У вас сразу появиться закрывающий тег. Нажмите Enter.
Внутри тега main создайте класс wrapper. Напоминаю, что это делается следующим образом: напишите .wrapper и нажмите Tab. У вас сразу появится закрывающий тег. Нажмите Enter.
Внутри создайте класс content. Внутри откройте тег article. Он также предназначен для удобства чтения кода. Обычно с его помощью создают какие-либо статьи или новости. Внутри article поставьте картинку article1.jpg. Ниже создайте класс post, а внутри него класс category. Внутри класса category напишите любой текст, например Lorem Ipsum. Закройте класс category. Ниже напишите пару слов внутри заголовка второго уровня (h2). Закройте тег заголовка второго уровня. Далее напишите текст примерно на 17 слов внутри тега абзаца (p). Закройте тег абзаца. Откройте тег i , внутри него поставьте ссылку с любым текстом на 2 слова, например "See more...". Убедитесь, что тег a закрыт. После этого закройте тег i. Закройте класс post. Закройте тег article.
Для чего нужен тег i вы узнаете, если откроете верстаемую страницу в браузере. Скопируйте все, что находится внутри тега article включая его открывающий и закрывающий теги и вставьте еще 2 раза. Теперь можете поменять картинки на article2.jpg и article3.jpg. Закроем тег section, закроем класс wrapper, закроем тег main.
Стилизуем основную часть
Готовьтесь, сейчас будут рутинные действия:
Обратимся к тегу main. Переведем в режим flex (display: flex;). Выровним по горизонтали (justify-content: center;). Сделаем отступ сверху 80 пикселей (margin-top: 80px).
Обратимся к классу wrapper, который находится внутри тега main. Зададим отступ сверху в 80 пикселей и также выровним по горизонтали.
Обратимся к ссылкам, которые находятся внутри класса wrapper, который находится внутри тега main. Уберем подчеркивание (text-decoration: none;) и сделаем их черного цвета.
Обратимся к тегу article. Переведем в режим flex. Выровним по горизонтали. Сделаем отступ снизу 40 пикселей (margin-bottom: 40px;).
Обратимся к классу post и переведем его в режим flex, зададим направление - колонна (flex-direction: column), зададим отступ слева в 20 пикселей (margin-left: 20px;).
Обратимся к классу category. Размер шрифта - 14 пикселей (font-size: 14px;) и цвет - серый.
Обратимся к заголовкам второго уровня, которые находятся внутри класса post. Размер шрифта - 30 пикселей.
Обратимся к тегам абзаца, которые находятся также внутри класса post. Размер шрифта - 20 пикселей, цвет - серый.
Обратимся к ссылкам (a), которые находятся внутри тега post . Цвет - черный, размер шрифта - 16 пикселей.
Фух, наконец это кончилось, но если у вас что-то отображается неправильно, то вам придется перепроверить.
Ну что, верстаем footer
А что это значит? А значит это то, что в этом проекте мы больше не вернемся к HTML(((.
Откроем тег footer. Как и следует из названия, он обозначает подвал. В подвале сайта обычно размещена информация об авторском праве или контакты.
Внутри тега footer создайте класс contacts. Поставьте тег <br>. Это новый тег вам напоследок. Он создает break, т.е. отступ. Под тегом отступа разместите номер телефона, взятый в тег абзаца. Закройте класс contacts.
Откройте класс wrapper. Внутри него откройте класс social-network. А теперь вспомним, что когда-то на первой неделе мы подключали особый шрифт fontawesome, помните? Пришло время его использовать! Перейдите на сайт Fontawesome.com. Скорее всего они вам покажут, что у них появилась новая версия, но вы нажмите на ссылку сверху, ведущую на их главную страницу. В верхнем левом углу найдите поиск и вбейте туда Twitter. Нажмите на самую первую появившуюся иконку. Найдите на открывшейся странице отрывок html-кода и нажмите, чтобы скопировать. Не нашли? Тогда вот он вам (<i class="fab fa-twitter"></i>). Перейдем в Sublime и внутри класса social-network создайте ссылку. Вместо текста вставьте скопированный html-код. У вас должно получиться так:
<a href="#"><i class="fab fa-twitter"></i></a>
Вы также можете добавить атрибут target с значением _blank, чтобы ссылка открывалася в новом окне. Посмотрите, что у вас получилось.
Теперь добавьте значки Pinterest, Vk, Facebook и Instagram, или любые какие найдете. Закройте класс social-network.
Откройте класс address и напишите внутри него адрес, заключенный в теги абзаца. Закройте класс address.
Закройте класс wrapper, закройте тег footer , закройте тег body и наконец закройте тег html. Всё.
Стилизуем footer
Оказывается еще не всё. Переходим в файл style.css.
Обратимся к footer. Отступ сверху - 80 пикселей, ширина - 100%, высота - 150 пикселей, цвет фона (background) - #141518, цвет текста - белый, текст по центру (text-align: center;).
Настала очередь wrapper, который находится внутри тега footer. Переводим в режим flex. Направление - колонна.
Обращаемся к классу social-network. Размер текста - 20 пикселей, высота - 23 пикселя, режим flex, выравнивание по центру по горизонтали.
Обратимся к ссылкам в social-network. Зададим им белый цвет и отступ справа - 5 пикселей.
Обратимся к тегу абзаца, который находится внутри класса contacts. Зададим ему высоту в 23 пикселя.
Обратимся к классу address. Зададим высоту в 13 пикселей.
Вот теперь всё!
Напоследок!
Зайдите в файл style.css и сделайте пару изменений. Найдите строчку
.social-network a {
margin-right: 5px;
color: #fff;
}
И добавьте туда следущее:
font-size: 15px;
Нииже напишите
.social-network a:hover {
font-size: 20px;
}
Сохраните style.css и обновите страницу в браузере. Попробуйте навести мышкой на любой из значков в подвале.
Спасибо!
Спасибо за участие. Ни в коем случае не покидайте нас, т.к. совсем скоро появится первый урок по адаптивной верстке сайта с помощью фрейворка MDB. А для того чтобы опубликовать свой сайт, перейдите на https://free.sprinthost.ru/, зарегистрируйтесь и загрузите туда свой сайт. Это бесплатно. Возникли вопросы по загрузке сайта на хостинг, напишите мне.
Зовите своих друзей и не пропустите начала следующего курса, до встречи в Telegram.
Спасибо тем, кто ввел меня в программирование. Спасибо Дэну, который показал мне магию программирования, спасибо Максиму, который научил меня красиво верстать, спасибо родителям за такую возможность, ну и спасибо Telegram, за отличную платформу для проведения подобного.
И не забывайте, я не прощаюсь.
Mit Gern Gemacht