Код страницы
9А1-07.html); его же можно просто перетащить сюда мышью.Предпросмотр
Что должно быть на странице
Шпаргалка
Скопировать её нельзя — набирайте руками, так запоминается.
<h2>Заголовок раздела</h2> <p>Обычный абзац текста.</p>
<img src="адрес картинки" width="260">
Адрес берут так: нашли картинку в поиске, правой кнопкой по ней → «Копировать адрес изображения».
<ul> <li>первый пункт</li> <li>второй пункт</li> </ul>
<a href="https://ya.ru">Текст ссылки</a>
<table> <tr><th>День</th><th>Дело</th></tr> <tr><td>Пн</td><td>Плавание</td></tr> </table>
Стили — внутри <style>
body {
background: #eef3fb;
font-family: Georgia, serif;
max-width: 700px;
margin: 0 auto;
padding: 24px;
}
img { border-radius: 12px; }
table, td, th { border: 1px solid #888;
border-collapse: collapse; padding: 6px; }
Кнопка — внутри <script>
<button id="knopka">Нажми</button>
<p id="otvet"></p>
<script>
knopka.addEventListener("click", function () {
otvet.textContent = "Сегодня " +
new Date().toLocaleDateString("ru");
});
</script>
Пока страница только показывает готовый текст — она статическая. Как только содержимое начинает считаться прямо в браузере, она становится динамической.
Подсказка: как устроена веб-страница
Браузер и сервер разговаривают запросами
Браузер — клиент: он просит. Сервер только отвечает,
сам первым ничего не присылает. Протокол этого разговора —
HTTP (у HTTPS то же самое, но зашифровано).
В ответе есть код: 200 — нашлось,
301 — переехало, 403 — нельзя,
404 — такого файла нет, 500 — сервер
сломался. Одна страница — это десятки запросов: HTML, стили,
шрифты, каждая картинка отдельно (видно по F12 → Сеть).
Страница приезжает текстом
HTML — язык разметки, а не программа: он ничего не
вычисляет, он только называет части текста. Тег — имя
части в угловых скобках, почти всегда парный:
<p> открывает, </p>
закрывает. Исходный текст любой страницы —
Ctrl + U.
| тег | что означает |
|---|---|
h1, h2 | заголовки |
p | абзац |
img | картинка (одиночный) |
ul / li | список и пункт |
a href | ссылка |
table / tr / td |
таблица, строка, ячейка |
Оформление отдельно от содержания
CSS отвечает за вид: body { background: #eef3fb;
font-family: Georgia; }. Один файл стилей оформляет хоть
тысячу страниц, а тот же HTML сам подстраивается под телефон и
принтер — потому что в нём написано, что это, а не
как это нарисовать.
Статическая страница и динамическая
Статическая лежит на сервере готовым файлом, и всем приходит одна и та же. Динамическая собирается в момент запроса — каждому своё. Собирают в двух местах: на сервере (программа лезет в базу данных и склеивает HTML) или в браузере (программа на JavaScript дорисовывает страницу уже у вас). Кнопка, которая считает дни до Нового года, — это уже второе.
Где живёт сайт
Хостинг — место под файлы на сервере, который включён всегда и имеет постоянный публичный IP. Домен покупается отдельно и привязывается к этому адресу через DNS: сайт может переехать, не меняя имени. Облачный диск устроен так же — файл лежит на чужом сервере, а вам дают доступ и ссылку. Отсюда правило: то, что жалко потерять, должно лежать минимум в двух местах, и хотя бы одно из них — ваше собственное.