Что такое 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. Посмотрите, что изменится браузере при обновлении веб страницы.
