Найти в Дзене

11 класс. Урок 2. Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы.

Всемирная паутина, или веб (англ. World Wide Web), — это самая мощная служба Интернета. Она содержит гипертекстовые документы, связанные между собой гиперссылками. Гипертекст (англ, hypertext) — это текст, содержащий гиперссылки. Гиперссылка (англ, hyper reference) — это ссылка на другие объекты (части этого же документа, другие документы, файлы, папки, программы ит. д.). Например, ссылки на другие статьи в энциклопедиях — это тоже гиперссылки. Гипертекстовые документы в Интернете называются веб-страницами; обычно ссылки на веб-страницах выделяются цветом и подчёркиваются. Современные веб-документы включают не только текст, но и другие виды информации — рисунки, звук, видео, поэтому для них используется выражение гипермедиа. Гипермедиа (англ, hypermedia) — это гипертекстовый документ, содержащий изображения, звук, видео, причём каждый элемент может быть гиперссылкой. Веб-страницы размещаются на серверах. Слово «сервер» имеет несколько значений. Сервером называют специальный компьютер,

Всемирная паутина, или веб (англ. World Wide Web), — это самая мощная служба Интернета. Она содержит гипертекстовые документы, связанные между собой гиперссылками.

Гипертекст (англ, hypertext) — это текст, содержащий гиперссылки.

Гиперссылка (англ, hyper reference) — это ссылка на другие объекты (части этого же документа, другие документы, файлы, папки, программы ит. д.).

Например, ссылки на другие статьи в энциклопедиях — это тоже гиперссылки.

Гипертекстовые документы в Интернете называются веб-страницами; обычно ссылки на веб-страницах выделяются цветом и подчёркиваются.

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

Гипермедиа (англ, hypermedia) — это гипертекстовый документ, содержащий изображения, звук, видео, причём каждый элемент может быть гиперссылкой.

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

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

Веб-сервер — это программа, которая принимает запросы по протоколу HTTP1 и отвечает на них — возвращает веб-страницы и дополнительные V данные (рисунки, звуковые файлы, видеофайлы).

Для просмотра веб-страниц на экране нужна специальная программа — браузер (англ, browser — «просмотрщик»). Браузер — это клиентская программа, её задача — послать запрос веб-серверу, получить в ответ веб-страницу и показать её на экране.

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

Веб-страницы — это обычные текстовые файлы (в формате «только текст», англ, plain text). Для того чтобы определить структуру документа (заголовки, абзацы, списки и др.), используют язык HTML (англ. HyperText Markup Language — язык разметки гипертекста).

В языке HTML используются команды особого типа — тэги (англ, tag — метка, ярлык). Существуют тэги для выделения заголовков, абзацев, вставки таблиц. С помощью тэгов в веб-страницы добавляют рисунки, звуки, анимацию, видео, которые хранятся на сервере в виде отдельных файлов. Часто для дополнительных данных на сайте создаются специальные каталоги, например, рисунки могут быть размещены в каталоге images, звуковые и видеофайлы — в каталоге media.

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

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

Кроссбраузерность сайта (от англ. cross-browser compatibility) — способность веб-сайта одинаково корректно отображаться и работать в различных браузерах, независимо от их версии, движка, операционной системы или устройства. 

Под кроссбраузерностью подразумевается:

  • единообразное отображение блоков и элементов интерфейса;
  • корректное выполнение скриптов (JavaScript, анимации, формы);
  • работа адаптивного дизайна на разных устройствах;
  • доступность всех функций без ошибок.

Цель кроссбраузерной разработки — создать сайт, который будет одинаково удобен и понятен всем пользователям вне зависимости от их браузера, устройства и операционной системы.

Веб-страницы можно разделить на два типа:

  • статические веб-страницы (они обычно имеют расширения htm или html) хранятся на сервере в готовом виде;
  • динамические веб-страницы (с расширениями php, asp, pi) — полностью или частично создаются на сервере в момент запроса.

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

Динамические веб-страницы — это шаблоны, в которых есть программный код на специальных серверных языках — РНР, ASP, Perl. Когда сервер получает запрос на такую страницу, он запускает программу-интерпретатор, которая выполняет этот код. Чаще всего при этом выбирается информация из базы данных, хранящейся на сервере. С помощью программы, встроенной в динамическую страницу, можно добавлять в базу данных информацию, загруженную пользователем (рисунки, видео, комментарии). Практически все крупные сайты состоят из динамических веб-страниц.

Для управления динамическим сайтом часто применяют систему управления содержимым (англ. CMS — Content Management System), с помощью которой сайт могут поддерживать пользователи, не знающие языка HTML. Однако создание динамического веб-сайта — достаточно сложная задача, для решения которой нужно (кроме знания языка HTML) уметь программировать на одном из серверных языков.

Как правило, динамические сайты работают значительно медленнее, чем статические. Это связано с тем, что серверу при получении запроса необходимо обратиться к базе данных, построить запрошенную страницу в памяти и только потом переслать её по сети на компьютер клиента.

Иногда динамическими называют также веб-страницы, которые хранятся на сервере в готовом виде, но содержат программный код на специальных языках программирования (чаще всего — на JavaScript). Такой подход часто называют динамическим HTML (англ. DHTMLDynamic HTML), его основная цель — обеспечить интерактивность, т. е. сделать так, чтобы веб-страница «реагировала» на действия пользователя. Код в динамических страницах такого типа выполняет браузер на компьютере-клиенте, поэтому сервер не загружается дополнительной работой.

Программа на языке JavaScript называется сценарием или скриптом.

Скрипт, или сценарий (англ, script) — это программный код для автоматизации какой-то операции пользователя.

С помощью скрипта можно изменять содержимое и оформление веб-страницы в ответ на действия пользователя:

  • заменять текст, оформление, рисунки;
    строить многоуровневые выпадающие меню;
    скрывать и открывать части страницы;
    проверять данные, введённые пользователем;
    выполнять вычисления и т. д.