Знакомство с HTML и CSS: первые шаги в веб-разработке
Создание сайтов начинается с двух фундаментальных технологий — HTML и CSS. Они работают вместе, как «скелет» и «одежда» вашей веб-страницы. В этом руководстве мы разберём основы, которые помогут вам сделать первую страницу с нуля.
1. Что такое HTML и зачем он нужен?
HTML (HyperText Markup Language) — это язык разметки, который определяет структуру контента:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт.</p>
</body>
</html>
Основные теги:
- <h1>-<h6>— заголовки
- <p>— абзац
- <a href=»…»>— ссылка
- <img src=»…»>— изображение
Совет: Используйте Emmet в редакторе кода (например, VS Code) для быстрой генерации структуры HTML.
2. Основы CSS: оформляем страницу
CSS (Cascading Style Sheets) отвечает за внешний вид:
h1 {
color: blue; font-size: 24px;
}
Ключевые понятия:
- Селекторы(h1, .class, #id)
- Свойства(color, margin, background)
- Единицы измерения(px, %, rem)
Пример: Центрируем текст и добавляем фон:
body {
text-align: center; background-color: #f0f0f0;
}
3. Как связать HTML и CSS?
3 способа подключения стилей:
- Внутри тега (инлайново):
<p style=»color: red;»>Текст</p>
- В разделе <head>:
<style>
p {
color: red;
}
</style>
- Отдельный файл(рекомендуется):
<link rel=»stylesheet» href=»styles.css»>
4. Практика: создаём первую кнопку
Задача: Сделать кнопку с hover-эффектом.
- HTML:
<button class=»my-btn»>Нажми меня</button>
- CSS:
.my-btn {
padding: 10px 20px;
background: #4CAF50;
color: white;
border: none;
transition: 0.3s;
}
.my-btn:hover {
background: #45a049;
}
Результат: Кнопка, которая меняет цвет при наведении.
5. Инструменты для обучения
- Редакторы кода: VS Code, Sublime Text
- Интерактивные курсы: Codecademy, HTML Academy
- Песочницы: CodePen, JSFiddle
