Введение в мир веб-разработки начинается с двух фундаментальных технологий: HTML и CSS. Освоив базовый уровень этих языков, ты сможешь создавать структуру и оформление веб-страниц, что является необходимым навыком для любого, кто хочет создавать сайты или работать в сфере IT. В нашем курсе, доступном по ссылке https://cpb-runo.ru/catalog/dist/html-i-css-verstka-saytov-bazovyy-uroven/ , ты получишь все необходимые знания и навыки для старта в веб-разработке. Эта статья станет твоим первым шагом к пониманию основ HTML и CSS, а также даст представление о том, как они взаимодействуют, чтобы создать привлекательный и функциональный веб-сайт.

Что такое HTML?

HTML (HyperText Markup Language) – это язык разметки, который определяет структуру веб-страницы. Он использует теги для описания различных элементов, таких как заголовки, абзацы, изображения, ссылки и многое другое. Представьте себе HTML как скелет вашего веб-сайта. Он задает иерархию и связи между различными частями контента.

Основы HTML: Теги, атрибуты и элементы

• Теги: Это основные строительные блоки HTML. Они заключены в угловые скобки <> и обычно идут парами: открывающий тег и закрывающий тег . Например,

и

обозначают начало и конец абзаца.
• Атрибуты: Атрибуты предоставляют дополнительную информацию о тегах. Они добавляются внутрь открывающего тега и состоят из имени и значения, разделенных знаком равенства. Например, — тег img имеет атрибуты src (путь к изображению) и alt (альтернативный текст для изображения).
• Элементы: Элемент состоит из открывающего тега, содержимого и закрывающего тега. Например,

Это абзац текста.

— весь этот код является элементом абзаца.

Пример простой HTML-страницы:

Привет, мир!

Это мой первый веб-сайт, созданный с помощью HTML.

В этом примере:

• — указывает браузеру, что это HTML5 документ.
•- корневой элемент HTML-страницы.•- содержит метаданные о странице, такие как заголовок (отображается во вкладке браузера).
•- содержит видимый контент страницы.
•

— заголовок первого уровня.
•

— абзац текста.

Что такое CSS?

CSS (Cascading Style Sheets) – это язык стилей, который определяет внешний вид веб-страницы. Он управляет цветами, шрифтами, размерами, расположением и другими визуальными аспектами. CSS позволяет отделить структуру (HTML) от представления (визуального оформления), что делает код более чистым и удобным в поддержке. Представьте CSS как макияж вашего сайта.

Основы CSS: Селекторы, свойства и значения

• Селекторы: Селекторы определяют, к каким HTML-элементам будут применены стили. Существует несколько типов селекторов, включая селекторы тегов (например, p), селекторы классов (например, .my-class) и селекторы идентификаторов (например, my-id).
• Свойства: Свойства определяют, какие аспекты внешнего вида элемента будут изменены. Например, color (цвет текста), font-size (размер шрифта) и background-color (цвет фона).
• Значения: Значения определяют, какое значение будет присвоено свойству. Например, color: blue; (цвет текста синий), font-size: 16px; (размер шрифта 16 пикселей).

• h1 { … } — стили применяются ко всем заголовкам первого уровня (

). Заголовок будет красного цвета и выровнен по центру.
• p { … } — стили применяются ко всем абзацам (

). Размер шрифта будет 14 пикселей, а межстрочный интервал — 1.5.

Как HTML и CSS работают вместе?

HTML и CSS работают вместе, чтобы создать полноценный веб-сайт. HTML отвечает за структуру и содержание, а CSS — за внешний вид и оформление. Существует несколько способов связать HTML и CSS:

• Встроенные стили (Inline styles): Стили добавляются непосредственно в HTML-тег с помощью атрибута style. Этот метод не рекомендуется, так как он делает код трудночитаемым и сложным в поддержке.
• Внутренние стили (Internal styles): Стили добавляются в разделHTML-документа с помощью тега