Что такое HTML и CSS Цель работы: cоздание веб-страниц, оформленных с применением стилей CSS. Самый лучший способ начать что-то изучать — это поменять код и посмотреть, что получится! Создадим web страницу и файл стилевого оформления и можно поэкспериментировать. 1. Создайте с помощью редактора Блокнот файл 2. Скопируйте в этот файл следующий код (все строки , которые выделены голубым цветом) и сохраните файл под именем index.html <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Магазин товаров для дома</title> <!-- Удалите строку ниже --> <link rel="stylesheet" href="style.css"> </head> <body> <header class="site-header"> <div class="container"> <h1>Gloevk</h1> <p class="description">Разнообразные товары для дома с доставкой по всей планете</p> </div> </header> <section class="features"> <h2>Что поможет вам создать домашний уют?</h2> <p class="feature-furniture">Мебель и фурнитура</p> <p class="feature-lighting">Лампы и торшеры</p> </section> <section class="advantages"> <h2>Что выделяет нас среди конкурентов?</h2> <ul class="advantages-list"> <li>Ежедневные отчёты о ходе работ</li> <li>Используем только природные материалы</li> <li>Сами соберём мебель для вас</li> <li>Бесплатное гарантийное обслуживание в течение 10 лет</li> </ul> </section> <footer class="site-footer"> <div class="container"> <p class="copy">© Кекс, 2020</p> <p>Магазин товаров для дома</p> </div> </footer> </body> </html> 3. Создайте с помощью редактора Блокнот файл. 4. Скопируйте в этот файл следующий код (все строки, которые выделены голубым цветом) и сохраните файл под именем style.css (отвечает за оформление веб страницы) body { margin: 0; padding: 0; font-family: "Arial", sans-serif; font-size: 14px; line-height: 20px; color: #444444; } h1 { width: 255px; margin: 0 auto 8px; font-family: "Arial", sans-serif; text-align: center; font-weight: normal; font-size: 56px; line-height: 64px; } .container { width: 510px; margin: 0 auto; padding: 0 20px; } .site-header { min-width: 550px; height: 186px; margin-bottom: 150px; padding-top: 30px; background: #847462 no-repeat center url("img/gloevk-bg.jpg"); background-size: cover; color: #ffffff; } .site-header p { width: 255px; margin: 0 auto 26px; text-align: center; font-size: 16px; line-height: 24px; } .site-header img { display: block; margin: 0 auto; } .features { width: 510px; margin: 0 auto 30px; padding: 0 20px; } .features p { display: inline-block; vertical-align: top; width: 30%; margin: 0 5px; background-repeat: no-repeat; background-position: center top; } .feature-furniture { padding-top: 65px; background-image: url("img/furniture.svg"); } .feature-lighting { padding-top: 65px; background-image: url("img/lighting.svg"); } .feature-accessories { padding-top: 65px; background-image: url("img/accessories.svg"); } .advantages { width: 510px; margin: 0 auto 40px; padding: 0 20px; } .advantages-list { padding: 0; } .site-footer { min-width: 550px; background-color: #847462; color: #ffffff; } .site-footer .container { text-align: center; } .site-footer p { display: inline-block; vertical-align: middle; padding: 0 20px; } 5. Запустите файл index.html в любом браузере. Веб страница должна выглядеть так, как на скриншоте ниже: 6. Удалите на 7 строке код <link rel="stylesheet" href="style.css"> Теперь Веб страница должна выглядеть так HTML-теги Дизайн потерялся, картинки исчезли! Строка кода, которую вы удалили на одном из сайтов, оказалась «стилями». В общем, вы отключили всё оформление. Сделаем вид, что мы работаем над долгожданным обновлением дизайна. А заодно всё починим и начнём разбираться с HTML и CSS. Язык HTML отвечает за структуру и содержание страницы. Он состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов: <h1>, <p>, <ul>. Теги бывают парными и одиночными. Например, тег <link> — одиночный: <link rel="stylesheet" href="style.css"> Парные теги могут содержать текст и другие теги. У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег. В закрывающих тегах перед именем ставится символ / («слэш»): <h1>Текст заголовка</h1> Ещё одна полезная вещь — это комментарии. Код, заключённый между символами <!- и -->, работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какойто код или оставляют подсказки и разъяснения. <!-- Это комментарий в HTML --> Изученного достаточно, чтобы починить сайт. Подключите новые стили, они уже дожидаются вас, закомментированные в коде. (файл style.css) 7. Вставьте на 7 строке код <link rel="stylesheet" href="style.css"> Код в теге head должен выглядеть таким образом: <head> <meta charset="utf-8"> <title>Магазин товаров для дома</title> <link rel="stylesheet" href="style.css"> </head> 8. Посмотрите, что изменится браузере при обновлении веб страницы.