Найти в Дзене
CodeGems

Основы HTML и CSS для новичков: Первые шаги в мир веб-разработки

24
2 мин
Привет, девчонки! Готовы сделать первый шаг в захватывающий мир веб-разработки? Сегодня мы поговорим об основах HTML и CSS — двух ключевых языках, которые лежат в основе каждого веб-сайта. Не волнуйтесь, если вы никогда раньше не писали код. Мы начнем с самых азов! Что такое HTML? HTML расшифровывается как HyperText Markup Language. Это язык разметки, который используется для создания структуры и содержания веб-страниц. Представьте, что вы строите дом. HTML — это каркас дома: стены, крыша, окна и двери. Вот простой пример HTML-кода: <!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html> Что тут происходит? Что такое CSS? CSS расшифровывается как Cascading Style Sheets. Если HTML — это каркас дома, то CSS — это краска, обои и декор. CSS отвечает за внешний вид вашего сайта. Вот как мы можем добавить немного стиля к нашему примеру: <!DOCTYPE html>
<html>
<head>
<title>
Оглавление

Привет, девчонки! Готовы сделать первый шаг в захватывающий мир веб-разработки? Сегодня мы поговорим об основах HTML и CSS — двух ключевых языках, которые лежат в основе каждого веб-сайта. Не волнуйтесь, если вы никогда раньше не писали код. Мы начнем с самых азов!

Что такое HTML?

HTML расшифровывается как HyperText Markup Language. Это язык разметки, который используется для создания структуры и содержания веб-страниц. Представьте, что вы строите дом. HTML — это каркас дома: стены, крыша, окна и двери.

Вот простой пример HTML-кода:

<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>

Что тут происходит?

  • <!DOCTYPE html> говорит браузеру, что это HTML-документ.
  • <html> — корневой элемент страницы.
  • <head> содержит метаданные, такие как <title> страницы.
  • <body> — это где живет основной контент.
  • <h1> — заголовок первого уровня.
  • <p> — обычный параграф текста.

Что такое CSS?

CSS расшифровывается как Cascading Style Sheets. Если HTML — это каркас дома, то CSS — это краска, обои и декор. CSS отвечает за внешний вид вашего сайта.

Вот как мы можем добавить немного стиля к нашему примеру:

<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>

Что мы сделали с CSS:

  • Изменили шрифт на Arial (или любой sans-serif шрифт, если Arial не доступен).
  • Задали светло-серый фон (#f0f0f0).
  • Сделали заголовок темно-серым (#333) и выровняли по центру.
  • Сделали текст параграфа серым (#666) и увеличили междустрочный интервал.

Практика!

Лучший способ научиться — это делать. Создайте новый файл в текстовом редакторе (например, Notepad++ или Visual Studio Code), скопируйте туда наш код и сохраните как index.html. Теперь откройте этот файл в браузере — вуаля, ваш первый сайт!

Что дальше?

Это только верхушка айсберга. HTML и CSS предлагают гораздо больше:

  • Разные теги HTML: <div>, <a>, <img>, <ul>, <li> и многие другие.
  • CSS-свойства: margin, padding, border, flex, grid для создания сложных макетов.

Не бойтесь экспериментировать. Меняйте цвета, шрифты, добавляйте картинки. В следующих статьях мы углубимся в каждую тему. А пока, поздравляю — вы сделали первый шаг к созданию собственных потрясающих веб-сайтов! 💻✨