Урок №2. Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы. Разработка интернет-приложений (сайтов).
Всемирная паутина, или веб (англ. World Wide Web), — это самая мощная служба Интернета. Она содержит гипертекстовые документы, связанные между собой гиперссылками.
Гипертекст (англ, hypertext) — это текст, содержащий гиперссылки.
Гиперссылка (англ, hyper reference) — это ссылка на другие объекты (части этого же документа, другие документы, файлы, папки, программы ит. д.).
Например, ссылки на другие статьи в энциклопедиях — это тоже гиперссылки.
Гипертекстовые документы в Интернете называются веб-страницами; обычно ссылки на веб-страницах выделяются цветом и подчёркиваются.
Современные веб-документы включают не только текст, но и другие виды информации — рисунки, звук, видео, поэтому для них используется выражение гипермедиа.
Гипермедиа (англ, hypermedia) — это гипертекстовый документ, содержащий изображения, звук, видео, причём каждый элемент может быть гиперссылкой.
Веб-страницы размещаются на серверах. Слово «сервер» имеет несколько значений. Сервером называют специальный компьютер, который выделен для обслуживания пользователей (например, для хранения файлов). Другое значение термина «сервер» — программа, которая обеспечивает работу какой-нибудь службы.
Например, для того чтобы пользователи могли обращаться к веб-страницам, на компьютере, где они хранятся, нужно запустить веб-сервер.
Веб-сервер — это программа, которая принимает запросы по протоколу HTTP1 и отвечает на них — возвращает веб-страницы и дополнительные V данные (рисунки, звуковые файлы, видеофайлы).
Для просмотра веб-страниц на экране нужна специальная программа — браузер (англ, browser — «просмотрщик»). Браузер — это клиентская программа, её задача — послать запрос веб-серверу, получить в ответ веб-страницу и показать её на экране.
Группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками и (чаще всего) расположены на одном сервере, называется веб-сайтом. Основа сайта — это его контент (англ, content — содержание, информационное наполнение), т. е. те материалы, которые могут заинтересовать пользователя. Вторая важная составляющая сайта — дизайн, т. е. оформление материала, способ подачи информации. Задача дизайна — сделать использование сайта удобным для читателей.
Веб-страницы — это обычные текстовые файлы (в формате «только текст», англ, plain text). Для того чтобы определить структуру документа (заголовки, абзацы, списки и др.), используют язык HTML (англ. HyperText Markup Language — язык разметки гипертекста).
В языке HTML используются команды особого типа — тэги (англ, tag — метка, ярлык). Существуют тэги для выделения заголовков, абзацев, вставки таблиц. С помощью тэгов в веб-страницы добавляют рисунки, звуки, анимацию, видео, которые хранятся на сервере в виде отдельных файлов. Часто для дополнительных данных на сайте создаются специальные каталоги, например, рисунки могут быть размещены в каталоге images, звуковые и видеофайлы — в каталоге media.
Браузер, получив от сервера запрошенную веб-страницу, обрабатывает её текст и выводит информацию на экран в удобной для человека форме. Встретив команды для вставки дополнительных данных (например, рисунков), браузер запрашивает их с сервера. Таким образом, для полной загрузки веб-страницы может потребоваться несколько обращений в серверу.
Несмотря на существующие стандарты языка HTML, разные браузеры могут по-разному показывать одну и ту же веб-страницу. Поэтому профессиональные разработчики обязательно проверяют, чтобы сайт выглядел по возможности одинаково в разных браузерах (это свойство называют кроссбраузерностью сайта).
Веб-страницы можно разделить на два типа:
- статические веб-страницы (они обычно имеют расширения htm или html) хранятся на сервере в готовом виде;
- динамические веб-страницы (с расширениями php, asp, pi) — полностью или частично создаются на сервере в момент запроса.
Статические веб-страницы меньше нагружают сервер и быстрее загружаются, потому что их код полностью готов, серверу остается просто переслать его по сети. Однако они не позволяют работать с изменяющимися данными: выбрать информацию из базы данных, добавить комментарии к фотографиям, построить гостевую книгу и т. п. Кроме того, чтобы поддерживать сайт (вносить изменения в его содержание и дизайн), нужен квалифицированный работник, знающий язык HTML и способный исправлять код страниц. Статические веб-страницы можно использовать на небольших сайтах-визитках, содержимое которых изменяется только автором.
Динамические веб-страницы — это шаблоны, в которых есть программный код на специальных серверных языках — РНР, ASP, Perl. Когда сервер получает запрос на такую страницу, он запускает программу-интерпретатор, которая выполняет этот код. Чаще всего при этом выбирается информация из базы данных, хранящейся на сервере. С помощью программы, встроенной в динамическую страницу, можно добавлять в базу данных информацию, загруженную пользователем (рисунки, видео, комментарии). Практически все крупные сайты состоят из динамических веб-страниц.
Для управления динамическим сайтом часто применяют систему управления содержимым (англ. CMS — Content Management System), с помощью которой сайт могут поддерживать пользователи, не знающие языка HTML. Однако создание динамического веб-сайта — достаточно сложная задача, для решения которой нужно (кроме знания языка HTML) уметь программировать на одном из серверных языков.
Как правило, динамические сайты работают значительно медленнее, чем статические. Это связано с тем, что серверу при получении запроса необходимо обратиться к базе данных, построить запрошенную страницу в памяти и только потом переслать её по сети на компьютер клиента.
Иногда динамическими называют также веб-страницы, которые хранятся на сервере в готовом виде, но содержат программный код на специальных языках программирования (чаще всего — на JavaScript). Такой подход часто называют динамическим HTML (англ. DHTML — Dynamic HTML), его основная цель — обеспечить интерактивность, т. е. сделать так, чтобы веб-страница «реагировала» на действия пользователя. Код в динамических страницах такого типа выполняет браузер на компьютере-клиенте, поэтому сервер не загружается дополнительной работой.
Программа на языке JavaScript называется сценарием или скриптом.
Скрипт, или сценарий (англ, script) — это программный код для автоматизации какой-то операции пользователя.
С помощью скрипта можно изменять содержимое и оформление веб-страницы в ответ на действия пользователя:
- заменять текст, оформление, рисунки;
- строить многоуровневые выпадающие меню;
- скрывать и открывать части страницы;
- проверять данные, введённые пользователем;
- выполнять вычисления и т. д.
Простейший способ создать текстовую веб-страницу — это набрать её код в каком-нибудь текстовом редакторе, который работает с простым текстом без оформления («только текст», англ. plain text) и сохранить в файле с расширением htm или html. В операционной системе для этих расширений, как правило, установлена связь (ассоциация) с браузером, так что при двойном щелчке на имени файла веб-страница открывается в браузере в режиме просмотра.
Для изменения страницы можно использовать любой текстовый редактор. После записи изменений на диск нужно обновить страницу в браузере (чаще всего для этого используется клавиша F5).
Кроме того, существуют специальные редакторы, предназначенные для разработки веб-страниц. Многие из них поддерживают режим WYSIWYG (англ. What You See Is What You Get — что видишь, то и получишь), т. е. при редактировании документ выглядит так же, как при просмотре в браузере. Изменять содержание и оформление веб-страницы можно точно так же, как и в текстовых процессорах (с помощью мыши, меню и командных кнопок), при этом пользователю не нужно знать язык HTML — все необходимые команды (тэги) программа добавляет автоматически. В то же время профессиональные веб-дизайнеры редко используют WYSIWYG-редакторы, потому что для точной вёрстки (размещения материала на странице) практически всегда приходится вручную редактировать HTML-код.
Даже если редактор поддерживает режим WYSIWYG, очень полезно изучать код построенной в нём веб-страницы для того, чтобы в будущем вы смогли легко перейти к созданию динамических сайтов.
Для разметки веб-страницы используются специальные команды языка HTML — тэги. Тэги заключаются в угловые скобки, таким образом, все символы в угловых скобках считаются командами и на экран не выводятся. Неизвестные тэги браузер просто пропускает.
Простейшая веб-страница состоит из двух тэгов: начинается с открывающего тэга <html> и заканчивается закрывающим тэгом </html>. Такие пары тэгов образуют контейнеры: закрывающий тэг ограничивает область действия открывающего. Закрывающий тэг всегда начинается знаком «/» (он также называется «слэш», от англ, slash). В этой странице, кроме тэгов, нет никаких данных, поэтому если открыть её в браузере, мы увидим пустое поле:
<html>
</html>
Разберём теперь более сложный пример. Ниже мы видим код веб-страницы, а на рисунке — её вид в браузере.
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>
Здесь два блока — надписи «Первая страница» и «Привет!». Посмотрев на код, можно заметить, что он разбит на две части контейнерами <head> (англ, head — голова) и <body> (англ. body — тело).
Первая часть (контейнер <head>) — это головная часть страницы. Там размещается служебная информация, например, ключевые слова и описание страницы для поисковых систем, кодировка символов и т. п. В нашем примере здесь всего один элемент — <title> (англ, title — название), в нём записывают название страницы, которое выводится в заголовке окна браузера. Содержимое элемента <title> — очень важная информация для поисковых систем, поэтому нужно, чтобы этот текст как можно точнее отражал содержимое веб-страницы.
Вторая (основная) часть страницы расположена внутри контейнера <body>. В нашем случае там находится строка «Привет!», которую мы видим в окне браузера. В примерах, которые будут приводиться далее, мы будем писать только то, что содержится в контейнере <body>.
Для того чтобы текст лучше воспринимался, его нужно структурировать, т. е. разбить на разделы и подразделы, в каждом из которых рассматривается отдельный вопрос. В языке HTML есть специальные тэги для выделения заголовков разных уровней:
<h1> — заголовок документа (один на странице);
<h2> — заголовок раздела;
<h3> — заголовок подраздела;
<h4> — заголовок параграфа.
Первая буква h в названии тэга связана с английским словом header — заголовок. Вот как выглядит текст с заголовками двух уровней.
Для этого требуется написать такой код:
<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и обработкой
информации, человеку приходилось решать во все
времена...
Обратите внимание, что мы нигде не указали, как именно оформить заголовки (какой шрифт и отступы использовать и т. п.). Браузер применяет то оформление, которое установлено в его настройках по умолчанию (т. е. для случая, когда оформление не задано явно). Как видно, заголовки выделяются жирным шрифтом увеличенного размера и выравниваются по левой границе. Если, например, заголовок документа нужно выровнять по центру, используют такую запись:
<h1 align="center">Глава 1. Информация</h1>Здесь тэг <h1> содержит ещё дополнительное свойство — атрибут align (англ, align — выровнять). Атрибуты тэгов записывают в открывающем тэге внутри угловых скобок. Значение атрибута указывают после знака равенства в кавычках. Для заголовков используют три типа выравнивания:
left — влево (по умолчанию);
center — по центру;
right — вправо.
Чтобы текст (особенно длинный) было удобно читать, его разбивают на абзацы, каждый из которых выражает законченную мысль. Для выделения абзацев в текстовых редакторах достаточно просто нажать клавишу Enter в том месте, где заканчивается абзац. Однако для веб-страниц это правило не действует. Если набрать в контейнере <body> стихотворение, то мы увидим, что браузер «свернет» всё в один абзац :
И вечный бой! Покой нам только снится
Сквозь кровь и пыль…
Летит, летит степная кобылица
И мнёт ковыль…
Абзац в языке HTML выделяется контейнером <р> (от англ. paragraph — абзац):
<р>И вечный бой! Покой нам только снится </р>
<р>Сквозь кровь и пыль...</р>
<р>Летит, летит степная кобылица</р>
<р>И мнёт ковыль ...</р>
По умолчанию абзацы отделяются друг от друга дополнительным отступом, однако абзацного отступа («красной строки») браузер не делает.
Для выравнивания абзаца в тэг <р> можно добавлять атрибут align, как для заголовков. Кроме уже упомянутых вариантов выравнивания (left, center, right) для текстовых колонок часто используется значение justify — выравнивание по ширине. Однако для узких колонок его использовать нельзя, потому что браузер слишком сильно растягивает интервалы между словами и получаются большие пробелы, затрудняющие чтение:
<p align="justify">
Молекула воды испарилась из кипящего чайника и,
подлетая к потолку, лоб в лоб столкнулась с
неизвестно как прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</р>
Отступ между абзацами облегчает чтение длинных текстов, но явно не нужен для стихов. На этот случай в HTML есть еще один тэг — <br> (от англ, break — разрыв), с помощью которого можно просто перейти на новую строку в пределах одного абзаца:
И вечный бой! Покой нам только снится
<br>Сквозь кровь и пыль...
<br>Летит, летит степная кобылица
<br>И мнёт ковыль...
Из кода последнего примера видно, что у тэга <br> нет парного закрывающего тэга, он обозначает однократное действие — переход на новую строку.
В языке HTML можно использовать два вида списков — маркированные (каждый элемент отмечен маркером) и нумерованные (с числовой или буквенной нумерацией).
Маркированный список применяется для перечисления элементов множества, когда порядок неважен. В языке HTML он строится с помощью тэга <ul> (от англ, unordered list — неупорядоченный список). Каждый элемент списка вложен в контейнер <li> (от англ, list item — элемент списка).
<ul>
<li>Bacя</li>
<li>Петя</li>
<li>Koля</li>
</ul>
Атрибут type (англ, type — тип) позволяет выбрать маркер (значок), например:
<ul type="circle">
...
</ul>
Существуют три стандартных типа маркеров: • disk (диск, установлен по умолчанию), О circle (окружность) и ■ square (квадрат).
Если порядок перечисления элементов важен, применяется нумерованный список. В языке HTML для этой цели используют тэг <оl> (от англ, ordered list — упорядоченный список). В остальном оформление похоже на маркированный список.
<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>
Для вставки изображения в код веб-страницы используется непарный тэг <img>. Его атрибут src (от англ, source — источник) задаёт имя файла, например:
<img src="night.jpg">Этот файл браузер будет искать в том же каталоге, где находится веб-страница. Можно, как и при создании гиперссылок, указывать относительный путь к файлу:
<img src="../../images/night.jpg">или даже загружать картинку с другого веб-сервера:
<img src="http://example.com/images/night.jpg">
По умолчанию рисунок вставляется прямо в текст, как одна «большая буква». Для того чтобы установить обтекание текстом, используют атрибут align (англ, align — выравнивание):
<img src="night.jpg" align="left">Значения left и right этого атрибута задают соответственно выравнивание влево и вправо (рисунок прижимается к краю текста).
Вариант с выравниванием влево (средний рисунок) смотрится плохо, потому что фотография «стучится» о соседний текст, подходит к нему вплотную. Чтобы этого не происходило, можно увеличить отступы, которые задаются с помощью атрибутов hspace (англ, horizontal space — горизонтальный отступ) и vspace (англ. vertical space — вертикальный отступ):
<img src="night.jpg" align="left" hspace="10" vspace="10">Значения отступов указаны в пикселях. Результат показан на рисунке.
Браузер может определить размеры рисунка только тогда, когда он загрузит его с сервера. Поэтому сначала вместо рисунка на веб-странице появляется небольшой прямоугольник, который потом заменяется изображением. При этом размеры поля, отведённого рисунку, меняются, остальной материал на экране тоже сдвигается, что неудобно для пользователя. Однако есть простое решение этой проблемы — заранее указать браузеру размеры рисунка (атрибуты width — ширина и height — высота):
<img src="night.jpg" width="800" height="600" alt="Hoчь на Ладоге">