Как устроен веб и что такое HTML
Откуда берётся страница в браузере, почему она — обычный файл на диске и как написать свою первую строчку кода.
Что ты научишься делать
- Объяснишь своими словами, что делает браузер с файлом страницы
- Установишь редактор кода и создашь файл index.html
- Напишешь первую страницу с заголовком и абзацем и откроешь её
#Что происходит, когда ты открываешь сайт
Ты набираешь адрес и через секунду видишь страницу. Между этими двумя моментами происходит вот что: браузер стучится на чужой компьютер — сервер — и просит файл. Сервер отдаёт текст. Браузер читает этот текст и рисует по нему страницу.
Самое важное слово здесь — текст. Никаких картинок страницы сервер не присылает. Он присылает описание: тут заголовок, тут абзац, тут ссылка. Рисует уже браузер, у себя.
HTML (HyperText Markup Language, «язык гипертекстовой разметки») — это и есть язык рецепта. На нём ты объясняешь браузеру, из каких частей состоит страница: где заголовок, где абзац, где картинка.
HTML не занимается красотой. Он отвечает только на вопрос «что это за кусок текста». За внешний вид отвечает CSS — им мы займёмся с одиннадцатого урока.
#Страница — это обычный файл
Файл страницы лежит на диске, как документ Word или фотография. Отличается он только расширением: .html вместо .docx. По этому расширению компьютер понимает, что открывать файл надо браузером.
Вот самая маленькая страница, которая уже работает. Три строки:
<h1>Кофейня «Полка»</h1><p>Варим кофе с 8 утра. Заходи, тут тихо.</p>Сохрани это в файл, дважды кликни — откроется браузер. Ни интернета, ни сервера для этого не нужно: файл лежит у тебя, браузер читает его прямо с диска. Вот что получится:
#Тег: как выглядит команда для браузера
Тег (tag) — это пометка в тексте, которая говорит браузеру, чем этот кусок является. Пишется в угловых скобках.
Обычно теги ходят парами: открывающий и закрывающий. Закрывающий отличается косой чертой. Всё, что между ними, — содержимое тега.
<p>Варим кофе с 8 утра.</p><!-- ↑ ↑ ↑ открывающий содержимое закрывающий -->Пара «тег + содержимое + закрывающий тег» называется элементом (element). Элементы можно вкладывать друг в друга — как коробки в коробки. Из этой вложенности и собирается вся страница.
Несколько тегов, которые понадобятся уже сегодня:
| Тег | Что означает | Пример |
|---|---|---|
h1 | Главный заголовок страницы. На странице он один | <h1>Меню</h1> |
h2 | Заголовок раздела, их может быть много | <h2>Кофе</h2> |
p | Абзац обычного текста | <p>Тут тихо.</p> |
strong | Важный кусок текста внутри абзаца | <strong>Важно</strong> |
#Ставим редактор кода
Писать HTML можно хоть в «Блокноте», но с редактором кода жизнь проще: он подсвечивает теги разными цветами, подсказывает названия и сразу видно, где ты забыл закрыть скобку.
Мы возьмём VS Code — бесплатный, работает на Windows, macOS и Linux.
Скачай и установи VS Code
Найди в поиске «Visual Studio Code», скачай с официального сайта
code.visualstudio.comи установи как обычную программу.Сделай папку для сайта
Создай на рабочем столе папку
my-site. Все файлы будущего сайта будут жить в ней — так ничего не потеряется.Открой папку в редакторе
В VS Code: Файл → Открыть папку и выбери
my-site. Слева появится список файлов — пока пустой.Создай файл index.html
Нажми на иконку нового файла и назови его ровно
index.html. Имяindexособенное: браузеры и хостинги считают такой файл главной страницей папки.Напиши две строки и сохрани
Набери заголовок и абзац из примера выше, сохрани через Ctrl+S (на Mac — ⌘+S).
Открой файл в браузере
Дважды кликни по
index.htmlв папке. Он откроется в браузере — это твоя первая страница.
#Попробуй прямо здесь
Это настоящий редактор — не картинка. Поменяй текст между тегами, добавь ещё один абзац, сотри закрывающий тег и посмотри, что будет. Результат справа обновится сам.
Где спотыкаются почти все
Забыл закрывающий тег
Почему Браузер не показывает ошибок: он молча пытается угадать, что ты имел в виду. Обычно угадывает неправильно — и часть страницы «съезжает» или пропадает.
Как надо Пиши пару тегов сразу, потом наполняй содержимым. В редакторе закрывающий тег часто дописывается сам.
Кириллица в имени файла
Почему Файл моя страница.html открывается локально, но на хостинге адрес превращается в нечитаемую строку, а иногда ссылка вовсе ломается.
Как надо Имена файлов — латиницей, без пробелов: index.html, about-us.html.
Сохранил как .txt и удивляешься, почему открывается блокнот
Почему Расширение — единственный способ для системы понять, чем открывать файл. Содержимое роли не играет.
Как надо Убедись, что файл называется именно index.html, и включи показ расширений в проводнике.
- Браузер browser
- Программа, которая читает HTML и рисует по нему страницу. Chrome, Safari, Firefox, Edge.
- Сервер server
- Компьютер, который хранит файлы сайта и отдаёт их по запросу.
- Тег tag
- Пометка в угловых скобках, объясняющая браузеру назначение куска текста.
- Элемент element
- Открывающий тег, содержимое и закрывающий тег вместе.
- Разметка markup
- Расстановка тегов по тексту, чтобы объяснить его структуру.
Проверь себя
Сервер отдаёт текст с тегами. Рисует страницу уже браузер — поэтому один сайт по-разному выглядит на разных экранах.
Закрывающий тег — это <code></p></code>: та же скобка, то же имя, но с косой чертой. Заглавные буквы браузеру безразличны, а вот черта обязательна.
Один <code>h1</code> — это название всей страницы. Заголовки разделов делают тегами <code>h2</code> и ниже. Подробнее разберём в третьем уроке.
HTML описывает структуру. Цвета и отступы — работа CSS, к нему придём в третьем модуле.
Задание
Своя первая страница
Сделай визитку любимого места: кафе, парка, книжного. Нужен заголовок h1 с названием и хотя бы два абзаца p с описанием. Внутри одного из абзацев выдели что-нибудь важное тегом strong.
Подсказка 1
Абзац — это пара тегов: <p> в начале и </p> в конце. Второй абзац пиши с новой строки, целиком.
Подсказка 2
strong ставится внутри абзаца, вокруг слова: <p>Мы работаем <strong>до полуночи</strong>.</p>
Показать решение
<h1>Книжный «Абзац»</h1><p>Маленький магазин на углу Садовой. Полки до потолка, кот на подоконнике.</p><p>Работаем <strong>с 10 до 22</strong>, без выходных. Кофе бесплатный.</p>