HTML и CSS

Каждая страница в интернете — это текстовый файл, который браузер превращает в то, что вы видите на экране. Пишут такие файлы на двух языках.

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

HTML и CSS — не языки программирования: в них нет переменных, условий и циклов. Поэтому они даются легче всего и с них начинают все, кто делает сайты. Когда страница должна откликаться на действия посетителя — открывать окна, считать, проверять, — к ней добавляют JavaScript; когда сайт должен принимать заявки и хранить данные — программу на сервере, например на PHP.

Где это пригодится

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

Что нужно для начала

• компьютер с Windows, macOS или Linux;
• браузер — любой современный: Chrome, Firefox, Edge, Safari, Яндекс Браузер;
• редактор кода. Подойдёт и обычный «Блокнот», но удобнее бесплатный редактор с подсветкой и подсказками — например, Visual Studio Code.

Интернет и платные программы не нужны: страницы, которые вы напишете, открываются в браузере прямо с диска. Выкладывать сайт в интернет понадобится только в самом конце.

Как пройти курс

Уроки идут по порядку: от первой страницы до сайта, который одинаково хорошо смотрится на телефоне и на компьютере. В первой половине курса — HTML, во второй — CSS. Набирайте примеры сами, а не копируйте: так быстрее запоминаются теги и свойства и сразу видны ошибки. После каждого урока — несколько вопросов для проверки, в конце — итоговый тест.

В справочнике — короткие ответы на частые вопросы: как сделать ссылку и кнопку, как выровнять по центру, почему не применяется стиль, как выложить сайт в интернет.

Курс описывает современный HTML (его часто называют HTML5) и современный CSS — всё, что работает в актуальных версиях браузеров. Устаревшие способы вроде вёрстки таблицами и тега <font> не нужны.

Курс с нуля

1. 1.Первая страница на HTMLКак создать первую веб-страницу: редактор, файл .html, открытие в браузере, устройство документа — doctype, head, body, теги и атрибуты.
2. 2.Текст, заголовки, списки и ссылкиОсновные теги текста: заголовки h1–h6, абзацы, выделение, списки ul и ol, ссылки на страницы, сайты, почту и телефон, а также разметка страницы header, nav, main, footer.
3. 3.Картинки и пути к файламКак вставить картинку тегом img, какой формат выбрать, как устроить папки сайта и правильно писать относительные пути, чтобы картинки и ссылки не ломались на хостинге.
4. 4.Таблицы в HTMLКак сделать таблицу в HTML: строки и ячейки, заголовки столбцов, подпись, объединение ячеек colspan и rowspan, рамки через CSS и прокрутка широкой таблицы на телефоне.
5. 5.ФормыКак сделать форму на HTML: поля input разных типов, подписи label, флажки, переключатели, списки, многострочное поле, кнопка отправки, проверка заполнения и что происходит при отправке.
6. 6.Основы CSS — подключение, селекторы, цвета, шрифтыЧто такое CSS и как подключить его к странице, как устроено правило, селекторы по тегу, классу и id, каскад и наследование, цвета, единицы размеров и оформление текста.
7. 7.Блочная модель — margin, padding, borderКак браузер считает размер блока: содержимое, внутренний отступ padding, рамка border и внешний отступ margin, box-sizing, блочные и строчные элементы, схлопывание отступов.
8. 8.Flexbox — блоки в ряд и по центруКак расставить блоки в ряд или в колонку с Flexbox: display flex, главная и поперечная оси, justify-content, align-items, gap, перенос, растяжение элементов и готовые примеры меню и карточек.
9. 9.CSS Grid — сетка страницыКак разложить страницу и карточки по сетке с CSS Grid: столбцы и строки, единица fr, repeat, gap, растяжение на несколько ячеек, именованные области и сетка без медиазапросов.
10. 10.Адаптивная вёрстка — сайт для телефона и компьютераКак сделать, чтобы сайт хорошо выглядел на телефоне и на большом экране: meta viewport, резиновые размеры, адаптивные картинки, медиазапросы @media и проверка в режиме устройства браузера.

Начать с первого урока

Справочник

• Как вставить картинку в HTMLТег img: путь к файлу, замещающий текст alt, размеры, картинка с другого сайта, с подписью, и что делать, если картинка не отображается.
• Как выложить сайт в интернетЧто нужно, чтобы сайт из папки на компьютере открывался у всех: хостинг, загрузка файлов через панель или SFTP, домен, https, бесплатный вариант для учебных сайтов и проверка после выкладки.
• Как выровнять по центру в CSSВсе рабочие способы выровнять по центру: текст, блок по горизонтали, блок по вертикали и горизонтали через Flexbox и Grid, картинку и кнопку.
• Как подключить CSS к HTMLКак подключить файл стилей к странице тегом link, где его поставить, как писать путь, когда нужны тег style и атрибут style и как проверить, что стили загрузились.
• Как подключить шрифт на сайтКак подключить шрифт с Google Fonts строкой link и как подключить свой файл шрифта через @font-face: форматы, жирное начертание, кириллица, font-display и лицензия.
• Как растянуть блок на всю высоту экранаБлок на весь экран через 100vh и 100dvh, почему height 100% не работает, подвал внизу страницы при малом тексте и колонки одинаковой высоты.
• Как сделать адаптивную картинкуКартинка, которая не вылезает за экран и сохраняет пропорции: max-width 100%, height auto, object-fit для обложек, srcset и sizes для разных экранов и тег picture.
• Как сделать кнопку в HTML и CSSКнопка button и ссылка-кнопка: когда что выбрать, готовый стиль с наведением и фокусом, кнопка на всю ширину, неактивная кнопка и частые ошибки.
• Как сделать меню на сайтеМеню сайта на HTML и CSS: список ссылок в nav, горизонтальное и вертикальное меню на Flexbox, подсветка текущей страницы и меню для телефона без JavaScript.
• Как сделать отступы в CSSВнешние и внутренние отступы margin и padding, короткая запись по сторонам, промежутки gap во Flexbox и Grid, отступ первой строки абзаца и почему отступ «не работает».
• Как сделать ссылку в HTMLТег a и атрибут href: ссылка на другой сайт и на свою страницу, в новой вкладке, на место страницы, на почту, телефон и файл для скачивания, картинка-ссылка.
• Как сделать таблицу с рамкамиРамки таблицы в CSS: сплошная сетка через border-collapse, рамка только снаружи или только между строками, полосы через строку, скруглённые углы и устаревший атрибут border.
• Как сделать фон картинкойФоновая картинка в CSS: background-image и путь к файлу, растянуть на весь блок через background-size cover, без повтора, по центру, затемнение под текст и фон всей страницы.
• Как убрать подчёркивание ссылкиКак убрать подчёркивание у ссылок свойством text-decoration, вернуть его при наведении, поменять цвет ссылки и посещённой ссылки и почему подчёркивание иногда не убирается.
• Почему не применяется стиль CSSРазбор причин, по которым CSS не действует: файл не подключён, кэш браузера, опечатка в селекторе, специфичность и порядок правил, ошибка синтаксиса и свойство, которое не работает для элемента.
• Справочник тегов HTML — основные теги и что они делаютОсновные теги HTML одной таблицей по группам: каркас страницы, текст, ссылки и картинки, звук и видео, списки, таблицы, формы и смысловые блоки — с короткими пояснениями и ссылками на уроки.
• Теги audio и video — звук и видео на страницеКак вставить на страницу звук тегом audio и видео тегом video: кнопки управления, несколько форматов через source, обложка, субтитры, автозапуск без звука и частые ошибки.
• Теги div и span — в чём разницаЧем отличаются div и span: блочный и строчный элемент, когда какой нужен, почему лучше смысловые теги header, nav, main, section и чего нельзя вкладывать.

Официальная документация

• Справочник HTML на MDN — https://developer.mozilla.org/ru/docs/Web/HTML
• Справочник CSS на MDN — https://developer.mozilla.org/ru/docs/Web/CSS
• Стандарт HTML (WHATWG) — https://html.spec.whatwg.org/multipage/

Близкие темы

JavaScriptPHP