HTML/CSS

HTML — язык разметки, которым пишут структуру веб-страницы. Заголовок, абзац, изображение, ссылка и форма помещаются на страницу с помощью HTML. HTML — не язык программирования. Он говорит браузеру, что на странице есть.

CSS пишет, как эта структура выглядит. Цвет, размер, шрифт, отступы и то, стоят элементы рядом или один под другим, — работа CSS. CSS тоже не язык программирования. Это язык оформления.

Браузер сначала читает HTML, затем применяет правила CSS к подходящим элементам. Что происходит при нажатии кнопки, обычно пишут на JavaScript.

HTML и CSS используют для видимой части веб-страницы:

• Статьи и простые сайты
• Формы и кнопки
• Меню и раскладка страницы
• Размещение изображений и текста
• Вид, который подходит экрану телефона и компьютера

Видимый слой многих веб-приложений тоже построен на HTML и CSS. Считать и хранить данные — работа другой части.

С HTML и CSS можно подготовить структуру и вид страницы:

• Писать заголовки и текст
• Добавлять изображение и ссылку
• Оформлять кнопку и форму
• Ставить элементы рядами и столбцами
• Менять вид в зависимости от ширины экрана

Простой пример

<h1>Nibras Code</h1>
<p>Простая страница.</p>

Этот HTML создаёт один заголовок и один абзац. Цвет и размер пишут отдельным CSS.

Написать первую страницу HTML нетрудно. Несколько тегов и одно правило CSS уже дают результат в браузере. Труднее становится, когда страница растёт, элементы вкладываются друг в друга и один вид нужно сохранить на нескольких размерах экрана.

В начале полезен такой порядок:

1. Теги заголовка, абзаца, ссылки и изображения
2. Открытие и закрытие тега
3. Селектор CSS: к какому элементу относится правило
4. Цвет, шрифт и отступ
5. Ширина и высота
6. Размещение элементов рядом
7. Самому написать небольшую страницу

Менять небольшую страницу самому полезнее, чем копировать готовый шаблон.

Преимущества

• Простая страница открывается прямо в браузере
• Первые примеры короткие, и результат виден сразу
• Почти каждая веб-страница построена на этих двух языках
• HTML может хранить содержание, а CSS — оформление
• За сами языки отдельно платить не нужно

Недостатки

• Сами по себе они не пишут учёт, вход и логику данных
• На большом сайте правила CSS могут начать мешать друг другу
• Одну страницу всё равно стоит проверить в нескольких браузерах
• Если вид сломался, причина часто в незакрытом теге или селекторе, который ничему не соответствует

Элемент HTML обычно состоит из открывающего и закрывающего тега. Правило CSS состоит из селектора и свойств внутри фигурных скобок.

HTML

<h1>Nibras Code</h1>
<p>Это абзац.</p>
<a href="https://nibrascode.com">Открыть сайт</a>

CSS

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

p {
  line-height: 1.6;
}

Где это пишут

CSS может лежать в отдельном файле и подключаться к HTML. В маленьком примере его можно написать и внутри тега style. Для большой страницы отдельный файл аккуратнее.

Небольшая страница

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Nibras Code</title>
    <style>
      body { font-family: sans-serif; }
      h1 { color: #1d4ed8; }
    </style>
  </head>
  <body>
    <h1>Nibras Code</h1>
    <p>HTML пишет структуру, CSS пишет цвет.</p>
  </body>
</html>

Ссылка и изображение

<a href="https://nibrascode.com">Nibras Code</a>
<img src="logo.png" alt="Знак Nibras Code">

Стиль через класс

<p class="note">Короткая заметка.</p>

<style>
  .note {
    background: #f3f4f6;
    padding: 12px;
  }
</style>

Короткие примеры выше показывают один кусок. Эти можно сохранить как файл .html и открыть в браузере. Поменяй цвет или слово, сохрани снова и обнови страницу. HTML говорит, что там есть. CSS говорит, как это выглядит.

Карточка

article — это коробка. h2 — заголовок внутри, p — предложение. Имя класса kart — крючок. CSS находит каждый элемент с этим классом и даёт ему ширину, светлый фон, тонкую рамку и место внутри. Без класса слова всё равно видны, но коробки нет.

<article class="kart">
  <h2>Python</h2>
  <p>Oxunaqlı dildir. Kiçik proqram üçün uyğundur.</p>
</article>

<style>
  .kart {
    max-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
  }
</style>

Карточка не шире 280 пикселей. На широком экране она не растягивается на всю страницу.

Две ссылки в ряд

nav держит ссылки. Без CSS они стоят одна под другой или остаются синими словами с подчёркиванием. display: flex ставит их рядом. gap — пустое место между ними. text-decoration: none убирает подчёркивание. Адрес в href — куда ведёт ссылка.

<nav>
  <a href="/programming/python">Python</a>
  <a href="/programming/javascript">JavaScript</a>
</nav>

<style>
  nav { display: flex; gap: 16px; }
  nav a { color: #1d4ed8; text-decoration: none; }
</style>

Слова остаются синими. Подчёркивание уходит. Если убрать flex, ряд возвращается к обычному порядку браузера.

Короткая форма

label — имя поля. input — пустая строка, куда человек пишет. button — то, что нажимают. Сама форма — столбец: поле, потом кнопка, между ними небольшой зазор. Этот пример никуда не отправляет имя. Отправка нужна серверу или JavaScript. Здесь видна только форма.

<form>
  <label>
    Ad
    <input name="ad" type="text">
  </label>
  <button type="submit">Göndər</button>
</form>

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
  }
  input, button { padding: 8px; }
</style>

Поле и кнопка одной ширины, 240 пикселей. Написанное имя эта страница сама не хранит.

Страница с тёмной полосой

Это целый файл, не кусок. header — тёмная полоса сверху. main — белое место под ней. body { margin: 0 } убирает белую рамку, которую браузер добавляет сам. Цвет и отступ — это CSS. Слова Nibras Code и Birinci qeyd — это HTML. Сохрани как note.html и открой.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Qeyd</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #111827; color: white; padding: 16px; }
    main { padding: 16px; }
  </style>
</head>
<body>
  <header>Nibras Code</header>
  <main>
    <h1>Birinci qeyd</h1>
    <p>Bu sətir əsas hissədə durur.</p>
  </main>
</body>
</html>

Верхняя полоса тёмная, текст на ней белый. Заголовок стоит под полосой, не внутри неё.

Что такое HTML?

HTML — язык разметки, которым пишут структуру веб-страницы: заголовки, текст, изображения и ссылки.

Что такое CSS?

CSS — язык оформления, которым пишут вид страницы: цвет, размер, шрифт и раскладку.

HTML — это язык программирования?

Нет. HTML — язык разметки. Он говорит, что есть на странице, и не пишет вычисления и условия.

Страница открывается без CSS?

Да. Браузер всё равно покажет HTML. Вид может остаться простым.

HTML, CSS и JavaScript — это одно и то же?

Нет. HTML пишет структуру, CSS — оформление, JavaScript — поведение.

Нужно ли покупать отдельную программу, чтобы учиться?

Нет. Для начала хватает текстового редактора и браузера. Сохраните файл как .html и откройте его в браузере.

HTML и CSS бесплатные?

Да. За сами языки отдельно платить не нужно, когда вы пишете их и открываете в браузере.