Веб-страница. Взаимодействие браузера с веб-сервером.
Динамические страницы. Сетевое хранение данных.
11 класс — занятие второе.
В прошлый раз мы дошли до третьего шага: браузер узнал IP и постучался на сервер. Сегодня — что сервер отвечает, и как из этого ответа получается страница. К концу урока у каждого будет своя.
Отсюда сразу практический вывод: пока вы не открыли страницу, сайт про вас ничего не знает и знать не может. Всё, что он о вас «помнит», вы принесли ему сами — в запросе.
GET /uroki/plan.pdf HTTP/1.1
Host: school15.edu.ru«Дай мне вот этот файл с вот этого сайта».
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 4271
<!doctype html>...Код состояния, описание и сам файл.
| 200 | всё нашлось, держите |
| 301 / 302 | переехало, идите по другому адресу |
| 403 | есть, но вам нельзя |
| 404 | такого файла на сервере нет |
| 500 | сервер сам сломался |
Знаменитая «ошибка 404» — это не поломка интернета, а вежливый ответ сервера: файла с таким именем у меня нет.
F12 → вкладка Сеть (Network) → F5.
Появится список: каждая строка — отдельный запрос браузера к серверу. Одна страница — это десятки запросов: сам HTML, стили, шрифты, каждая картинка отдельно.
В строке видно всё, о чём говорили: адрес, код ответа, тип, сколько килобайт и сколько миллисекунд заняло. Никакой магии в загрузке страницы нет — есть список файлов и время на каждый.
Обычный текст. Никаких «страниц» по проводу не ходит.
<h1>Расписание</h1>
<p>Занятия начинаются <b>1 сентября</b>.</p>HTML — язык разметки. Он не программа: он не считает и не решает, он только называет части текста. Вот это — заголовок, вот это — абзац, вот это — таблица. Как всё будет выглядеть, решает браузер.
Тег — имя части в угловых скобках. Почти всегда парный:
<p> открывает, </p> закрывает.
Ctrl + U на любом сайте — исходный код страницы. Всё, что вы видите в окне браузера, приехало вот этим текстом.
<h1>Марина</h1>
<p>Учусь в 11 классе</p>h1 { color: #1f5fa8; }
body { background: #f2f6fb;
font-family: Georgia; }Так сделано не для красоты. Сайт из тысячи страниц оформляется одним файлом стилей: поменяли цвет в одном месте — изменилась вся тысяча. И тот же самый HTML сам подстраивается под телефон, принтер и читалку для незрячих — потому что в нём написано, что это, а не как это нарисовать.
Файл лежит на сервере готовым. Всем приходит одно и то же.
Расписание, справка, ваша сегодняшняя страница.
Содержимое собирается в момент запроса. Каждому своё.
Лента, корзина, почта, личный кабинет.
Собирать можно в двух местах, и это разные вещи:
дней до Нового года. Число никто не записывал
в файл — оно считается у вас в браузере в момент нажатия. Этого уже
достаточно, чтобы страница стала динамической.HTML, CSS, JavaScript. Всё, что работает в браузере посетителя.
Программа на сервере: Python, PHP, Java. Она знает про базу данных и про то, кому что можно.
Товары, заказы, сообщения, пользователи. Живёт отдельно и переживает перезапуск сайта.
Полностью вручную сегодня почти никто не пишет: берут фреймворк — готовый каркас с уже решёнными задачами (адреса, формы, безопасность, шаблоны). Отдельная ветка — конструкторы сайтов, где страницу собирают мышью и не видят кода вовсе.
Сетевое хранение данных — это просто чей-то чужой компьютер, который включён всегда.
доступ отовсюду и с любого устройства, общая работа над файлом, версии, не пропадает вместе с флешкой
нет сети — нет файлов; сервис может закрыться или изменить правила; ваши данные лежат у чужой компании
Открывайте практикум из общей папки.
Слева — код, справа — то, что получилось: страница перерисовывается сама, пока вы печатаете. Кнопка «Показать образец» — посмотреть, до чего можно дойти.
Справа список из двенадцати требований. Он сам ставит галочки: галочка появилась — пункт засчитан.
Двенадцать пунктов — «5», десять — «4», восемь — «3».
В конце: вписать свой код ученика, нажать «Скачать мой сайт»
и положить полученный файл 9А1-07.html (имя — твой код) в общую папку.
Он открывается сам, без всяких программ.