Урок 2: Работа с заголовками и списками в HTML, стилизация с помощью CSS
Заголовки в HTML
Заголовки используются для обозначения разделов и подразделов на веб-странице. В HTML существует шесть уровней заголовков, от <h1> до <h6>, где <h1> обозначает самый важный заголовок, а <h6> — наименее важный.
Пример использования заголовков:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример заголовков</title>
</head>
<body>
<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>
</body>
</html>
Списки в HTML
Списки используются для представления элементов в виде упорядоченного или неупорядоченного набора.
Неупорядоченные списки
Неупорядоченные списки создаются с использованием элемента <ul> (unordered list), а каждый элемент списка заключается в тег <li> (list item).
Пример неупорядоченного списка:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример списка</title>
</head>
<body>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
Упорядоченные списки
Упорядоченные списки создаются с использованием элемента <ol> (ordered list), а каждый элемент списка заключается в тег <li>.
Пример упорядоченного списка:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример упорядоченного списка</title>
</head>
<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
Стилизация заголовков и списков с помощью CSS
Теперь давайте применим CSS для стилизации заголовков и списков.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Стилизация заголовков и списков</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 20px;
}
h1 {
color: #4CAF50;
text-align: center;
}
h2 {
color: #FF5722;
}
ul {
list-style-type: square;
padding-left: 20px;
}
ol {
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>Стилизация заголовков и списков</h1>
<h2>Неупорядоченный список</h2>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<h2>Упорядоченный список</h2>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
В этом примере мы применили следующие стили:
font-family — определяет шрифт для текста на странице.
background-color — задает цвет фона для страницы.
margin — устанавливает отступы вокруг элементов.
color — устанавливает цвет текста для заголовков.
text-align — выравнивает текст по центру для заголовка <h1>.
list-style-type — задает стиль маркеров для неупорядоченных списков.
padding-left — задает отступ слева для списков.
margin-bottom — устанавливает нижний отступ для элементов списка.
Заключение
В этом уроке мы рассмотрели использование заголовков и списков в HTML, а также их стилизацию с помощью CSS. Эти элементы помогают структурировать и улучшать внешний вид веб-страницы, делая её более организованной и приятной для пользователей. В следующем уроке мы рассмотрим более сложные элементы HTML и способы их стилизации с использованием CSS.