§ 6. Веб-сайты

Определения и обозначения

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

Веб-сайт — совокупность связанных веб-страниц, объединённых общей темой и доступных под одним доменным именем. Обычно на сайте есть главная страница и страницы разделов. Такое объединение помогает представить материалы как целое и отыскать их по общему адресу сайта.

Гиперссылка — элемент веб-страницы, переход по которому открывает другой документ или перемещает к нужному месту страницы. Ссылкой могут быть текст или изображение. Она нужна, чтобы связывать материалы и давать посетителю возможность перейти к следующей информации без ручного поиска адреса.

HTML — язык разметки, с помощью которого задают структуру и содержание веб-страницы. В документе с помощью тегов отмечают, где находятся, например, заголовки и абзацы. HTML нужен браузеру, чтобы определить, как организованы части документа, и правильно показать их пользователю.

Как это устроено

Страницы объединяются в сайт не только общим адресом, но и связями между материалами. Главная страница обычно сообщает, о чём сайт, и предлагает перейти к его основным разделам. Ссылки между страницами нужны потому, что посетителю удобнее двигаться от общего к частному, чем каждый раз искать документ отдельно. Например, на сайте кружка с главной страницы можно перейти к расписанию, а оттуда — к новостям о занятиях.

Когда пользователь вводит адрес страницы, браузер должен получить её содержимое, поэтому отправляет запрос веб-серверу — компьютеру или программе, которая хранит и выдаёт данные сайта. Сервер находит нужный документ и возвращает его браузеру. Браузер обрабатывает полученную разметку и отображает страницу на экране. Если сервер недоступен или адрес указан неверно, получить нужные данные обычным способом не получится.

HTML описывает, из каких частей состоит документ и как они связаны. Для этого в тексте используют теги — специальные обозначения, которые отмечают начало и конец элемента или задают его тип. Браузер интерпретирует разметку, то есть определяет назначение отмеченных частей, и показывает заголовок заголовком, а текст — текстом. Поэтому HTML задаёт структуру страницы, но сам по себе не является языком программирования для описания алгоритмов.

Гиперссылки задают маршрут между документами или участками одного документа. Это помогает посетителю переходить к связанным материалам, не возвращаясь каждый раз к поиску или не прокручивая страницу вручную. Ссылки могут вести на внутренние страницы сайта, на документы других сайтов или к фрагменту текущей страницы. Если переходы названы понятно и расположены логично, человеку легче разобраться, где он находится и куда можно перейти.

До создания сайта определяют, для кого и зачем он нужен: от этого зависит, какие сведения должны быть на нём опубликованы. Затем составляют перечень страниц и разделов, чтобы не смешивать материалы с разным назначением. После этого продумывают навигацию — систему переходов между страницами, включая путь с главной страницы к каждому разделу. Такое планирование помогает избежать ситуации, когда нужная информация есть, но посетитель не может её найти.

Элементы веб-сайта и их назначение

Таблица показывает, что сайт состоит из элементов с разными задачами: одни хранят и передают данные, другие помогают представить и связать материалы. Чтобы разобрать конкретную ситуацию, сначала определите, о чём говорится — о странице, ссылке, разметке или сервере. Затем сопоставьте элемент с его назначением.

Разбор задач

Задача 1

На странице сайта есть заголовок, текст и слово, по нажатию на которое открывается другой документ. Нужно определить, что здесь является веб-страницей, а что — гиперссылкой. Слово с переходом — только часть документа, тогда как страница включает и заголовок, и весь остальной материал.

1. Найдём объект, который браузер показывает целиком: это документ с заголовком, текстом и другими элементами.
2. Определим элемент, вызывающий переход: таким элементом является слово, на которое нажимают.
3. Сопоставим объекты с терминами: целый документ — веб-страница, а элемент перехода — гиперссылка.

Ответ: веб-страница — документ целиком, а гиперссылка — слово, по нажатию на которое открывается другой документ. Чтобы не перепутать эти понятия, проверяйте, обозначает ли термин весь материал или только элемент внутри него.

Задача 2

Нужно создать сайт школьного кружка с разделами «О кружке», «Расписание» и «Новости». Требуется предложить главную страницу и связи между разделами. Сначала решим, какие сведения нужны посетителю при первом знакомстве, а затем определим, как он попадёт к подробностям.

1. На главной странице разместим название кружка, короткое описание и ссылки на три раздела.
2. Создадим отдельные внутренние страницы: на одной расскажем о кружке, на другой опубликуем расписание, на третьей — новости.
3. Добавим на каждую внутреннюю страницу ссылки на главную и остальные разделы, чтобы посетитель мог сменить направление.

Ответ: главная страница знакомит с кружком и служит точкой входа, а ссылки с неё ведут к разделам «О кружке», «Расписание» и «Новости». На внутренних страницах полезно предусмотреть обратные переходы и ссылки на соседние разделы. Такая структура делает навигацию понятной и не заставляет искать адрес каждой страницы заново.

Задача 3

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

1. Браузер использует введённый адрес и отправляет запрос веб-серверу, на котором размещены данные сайта.
2. Веб-сервер находит нужную страницу и возвращает браузеру её содержимое, в том числе HTML-разметку.
3. Браузер интерпретирует разметку, определяет элементы документа и отображает результат на экране.

Ответ: последовательность такова: адрес → запрос браузера → ответ веб-сервера → обработка HTML → отображение страницы. Если данные не удаётся получить, браузер не сможет показать запрошенный документ обычным способом. Значит, сервер передаёт содержимое, а браузер превращает его в видимую страницу.

Типичные ошибки

Ошибка — считать веб-страницу и веб-сайт одним и тем же. Так думают, потому что в разговоре оба понятия часто называют просто «сайтом». Проверьте себя вопросом: речь идёт об одном документе или о группе связанных документов? Отдельный материал — страница, а объединение страниц — сайт.

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

Ошибка — называть HTML языком программирования. Путаница появляется потому, что HTML записывают с помощью специальных обозначений, похожих на команды. Чтобы проверить себя, спросите, задаёт ли документ алгоритм действий или размечает структуру и содержание. HTML отмечает элементы страницы, но сам по себе не описывает алгоритмы поведения программы.

Ошибка — считать, что браузер показывает сайт без обращения к серверу. Такое представление может возникнуть, когда страница появляется почти сразу после ввода адреса. Обычно браузер отправляет запрос веб-серверу и получает данные, а уже затем отображает их. Проверяя объяснение, проследите отдельно путь данных от сервера и работу браузера с полученным документом.

Связь с другими темами

Для понимания работы сайтов полезно знать, как браузер открывает интернет-страницы и что такое адрес ресурса. Адрес помогает браузеру определить, куда отправить запрос, а браузер получает и отображает ответ. Эти сведения связывают работу сайта с общими принципами обращения к ресурсам интернета.

Планирование страниц и навигации пригодится при создании сайтов, электронных учебных материалов и веб-приложений. Во всех этих случаях нужно решить, как разделить информацию и как пользователь будет переходить между частями. Понятная структура особенно важна, если материалов много и посетитель должен быстро находить нужные.

Что запомнить

• Веб-сайт объединяет несколько связанных веб-страниц.
• Главная страница помогает начать знакомство с сайтом и перейти к его разделам.
• Гиперссылка обеспечивает переход по адресу или к фрагменту документа.
• HTML задаёт структуру веб-страницы.
• Браузер получает данные от веб-сервера и отображает их пользователю.
• Удобство сайта зависит не только от содержания, но и от понятной навигации.