Главный инструмент для вставки картинок в HTML — тег <img>. Он одиночный (не требует закрывающего тега) и работает по принципу «подтянул файл — показал картинку». Но за этой простотой прячется немало деталей, которые напрямую влияют на то, как сайт будет выглядеть и работать. Базовый пример Самый простой вариант: html <img src=»image.jpg» alt=»Описание картинки»> Здесь два обязательных нюанса: src — путь к […]
  Загрузка... |
Просмотров: 83 | Читать статью |
Списки — один из базовых инструментов вёрстки. Они помогают структурировать информацию: пункты меню, шаги инструкции, перечень товаров, требования к задаче и т. д. В HTML есть два основных типа списков: маркированный и нумерованный. Разберём, как их делать правильно, где не ошибиться и как стилизовать с помощью CSS. Маркированный список: когда порядок не важен Маркированный список […]
 1,00 (3) Загрузка... |
Просмотров: 81 | Читать статью |
Три ключевых тега, с которых реально всё начинается, — это <html>, <head> и <body>. Разберём, зачем они нужны и как их правильно использовать, на простых примерах. Что такое <html> Тег <html> — это «обёртка» всей страницы. Он говорит браузеру: «Всё, что внутри, — это HTML‑документ». Это корневой элемент: он охватывает всё содержимое страницы от начала до конца. У тега <html> часто […]
| Загрузка... |
Просмотров: 92 | Читать статью |
HTML — это скелет любой страницы в интернете. Он не делает сайт красивым (это задача CSS) и не добавляет логику (это JavaScript). HTML просто говорит браузеру: «тут заголовок, тут абзац, тут картинка, тут кнопка». Если представить страницу как дом, то HTML — это каркас: стены, окна, двери. Без него ничего не получится. Минимальный набор: что […]
| Загрузка... |
Просмотров: 109 | Читать статью |
Тени в CSS делают элементы объёмнее и помогают выделить их на фоне. За это отвечает свойство box-shadow. Оно кажется простым, но у него есть нюансы: от значений смещения до того, как тень ведёт себя с border-radius и overflow. Разберём всё по делу и с примерами. Базовый синтаксис css selector { box-shadow: [смещение по X] [смещение […]
| Загрузка... |
Просмотров: 90 | Читать статью |
Свойство border-radius кажется простым: задал радиус — углы скруглились. Но на практике бывают ситуации, когда ожидаемого эффекта нет: углы остаются прямыми, скругление «ломается», появляются артефакты или скругления вообще не видно. Разберём частые причины и способы их исправить — с примерами. Как вообще работает border-radius border-radius задаёт радиус скругления для углов рамки. Можно указать одно значение — оно применится ко всем углам, […]
| Загрузка... |
Просмотров: 113 | Читать статью |
Свойство border в CSS позволяет задать рамку вокруг элемента. Оно объединяет три характеристики: толщину (border-width), стиль (border-style) и цвет (border-color). Синтаксис и базовые варианты записи Самый компактный вариант — через сокращённую запись: css selector { border: толщина стиль цвет; } Пример: css .box { border: 2px solid red; } Это эквивалентно трём отдельным свойствам: css […]
| 5,00 (1) Загрузка... |
Просмотров: 98 | Читать статью |
Когда верстаешь страницу, легко столкнуться с ситуацией: задаёшь элементу ширину 300 px, а в браузере он занимает 340 px. Часто причина — в padding. Это свойство добавляет пространство внутри элемента, и оно напрямую влияет на то, сколько места блок реально занимает на странице. Что такое padding и как он ложится в box model Блочная модель (box model) — это способ, которым […]
| Загрузка... |
Просмотров: 86 | Читать статью |
Объект Date в JavaScript — базовый инструмент для работы с временем, но в нём скрыто несколько неочевидных особенностей. Ниже — частые ошибки и способы их избежать, с конкретными примерами кода. Ошибка 1: вызов Date() без new В чём проблема. Если написать const d = Date(), получится не объект даты, а строка с текущим временем. Такой результат нельзя использовать для вычислений или извлечения […]
| Загрузка... |
Просмотров: 99 | Читать статью |
border-radius задаёт радиус скругления для углов элемента. Ниже — варианты использования с готовыми HTML+CSS, которые можно сразу открыть в браузере. Одинаковое скругление для всех углов Одно значение применяется ко всем четырём углам: html <div class=»box-all»></div> <style> .box-all { width: 200px; height: 100px; background: #3498db; border-radius: 16px; } </style> Скругление только одного угла Используют отдельные […]
| Загрузка... |
Просмотров: 69 | Читать статью |