Базовый синтаксис HTML и CSS

В этой заметке коротко остановлюсь на том, что такое базовый синтаксис HTML и CSS. HTML (HyperText Markup Language или язык разметки гипертекста) и CSS (Cascading Style Sheets или каскадные таблицы стилей) являются двумя основными языками для создания и оформления веб-страниц. HTML отвечает за структуру и содержимое страницы, а CSS отвечает за визуальное оформление этой структуры. Здесь рассмотрю основные принципы синтаксиса HTML и CSS.

HTML

Базовый синтаксис HTML включает в себя использование тегов для определения элементов страницы. Каждый тег начинается с угловых скобок и содержит имя тега. Некоторые из наиболее распространенных тегов включают в себя html, head, title, body, h1, p и img. Теги могут содержать атрибуты, которые определяют дополнительные свойства элемента. Например, атрибут src используется для указания пути к изображению в теге img.

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

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
Тело страницы
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

Тело страницы

</body>

</html>

Разберём что это такое. За что отвечают имеющиеся здесь теги.

- <!DOCTYPE html> объявляет тип документа как HTML5.
- <html> является контейнером для всех элементов страницы.
- <head> содержит метаданные о документе, такие как заголовок страницы, ссылки на CSS или JavaScript файлы и т.д.
- <title> определяет заголовок страницы, отображаемый в верхней части окна браузера или на вкладке.
- <body> содержит контент, который будет отображаться на странице.

- <!DOCTYPE html> объявляет тип документа как HTML5.

- <html> является контейнером для всех элементов страницы.

- <head> содержит метаданные о документе, такие как заголовок страницы, ссылки на CSS или JavaScript файлы и т.д.

- <title> определяет заголовок страницы, отображаемый в верхней части окна браузера или на вкладке.

- <body> содержит контент, который будет отображаться на странице.

Внутри body мы можем использовать различные HTML элементы и атрибуты для создания содержимого страницы. Например:

<h1>Заголовок</h1>
<p>Это абзац текста.</p>
<a href="https://hoboweb.ru">Ссылка</a>

<h1>Заголовок</h1>

<p>Это абзац текста.</p>

<a href="https://hoboweb.ru">Ссылка</a>

В данном примере h1 определяет заголовок первого уровня, который является самым крупным. Существуют h1-h6, где h1 является наибольшим, а h6 — наименьшим заголовком. Тег p создает абзац текста. Тег a определяет гиперссылку. Атрибут href указывает на адрес страницы, на которую должна вести ссылка.

Кроме того, HTML предлагает множество других элементов, таких как списки ul, ol, таблицы table, формы form и многое другое, которые можно использовать для создания различных видов контента на странице.

CSS

Базовый синтаксис CSS включает в себя использование правил для определения стилей элементов страницы. Каждое правило начинается с селектора, который определяет, к какому элементу применяются стили. Например, селектор h1 определяет стили для всех заголовков первого уровня на странице. Затем следует блок свойств, который содержит один или несколько пар свойств и значений, разделенных двоеточием и заключенных в фигурные скобки. Например, свойство color определяет цвет текста, а свойство font-size — размер шрифта.

CSS позволяет управлять визуальным оформлением элементов HTML. Он основан на использовании селекторов, которые выбирают элементы для применения стилей, и свойства, которые задают конкретные стили.

CSS правило имеет следующий синтаксис:

селектор {
    свойство: значение;
}

селектор {

свойство: значение;

}

Что это такое:

Селектор указывает, к каким элементам будет применено правило. Например, h1 выберет все элементы заголовка первого уровня h1.
Свойство определяет атрибут элемента, к которому будет применено стилевое правило. Например, color задает цвет текста.
Значение определяет конкретное значение свойства. Например, red устанавливает красный цвет текста.

Пример использования CSS:

HTML:
<h1 class="header">Заголовок</h1>

CSS:
.header {
    color: blue;
    font-size: 24px;
}

HTML:

<h1 class="header">Заголовок</h1>

CSS:

.header {

color: blue;

font-size: 24px;

}

В этом примере мы используем селектор класса .header, чтобы выбрать элемент с классом header и применить стили к нему. Свойство color устанавливает цвет текста в синий, а font-size задает размер шрифта 24 пикселя.