Лекции / Глава 19. Введение в веб-программирование

§19.1 Базовые знания о сети интернет

На рисунке 19.1 приведена упрощенная структурная схема взаимодействия компьютера пользователя с Интернетом или с локальной сетью.

Рисунок 19.1

Для просмотра веб-страниц в Интернете пользователи используют специальные программы, называемые браузерами. К наиболее распространенным относятся Mozilla

FireFox, Opera, Internet Explorer, Google Chrome.

Пользователь набирает в своем браузере адрес веб-страницы интернета. Если он набирает его в цифровом виде (IP-адрес вида 74.125.232.248), то браузер непосредственно связывается с сайтом Интернета, который находится по этому адресу.

Если же адрес задан в текстовом виде, например, «google.ru», то браузер связывается с

2

DNS-сервером (прописанным в настройках сети компьютера), который заменяет текстовое имя на соответствующий ему IP-адрес.

Имя сайта в текстовом виде еще называют доменным именем. Так «google.ru»

является доменом второго уровня в домене первого уровня «.ru». К наиболее распространенным доменным именам первого уровня относятся «.com», «.org», «.net», «.ru».

Каждый DNS сервер хранит данные (таблицу соответствия всех известных текстовых доменных имен цифровым IP-адресам). Это большой массив информации.

Поэтому DNS сервера разбиты на несколько уровней, каждый из которых регулярно

(примерно 2 раза в сутки) получает обновление от DNS-сервера старшего уровня. DNS

сервера самого старшего уровня получают данные от Registars (компаний, отвечающих за регистрацию доменных имен). Аккредитованных регистраторов в зоне .RU 24, в зоне

. РФ — 18. Список опубликован на официальном сайте Координационного центра национального домена сети Интернет www.cctld.ru/ru/registrators. Наиболее крупный регистратор в российской зоне на этом рынке Reg-Ru (www.reg.ru). Registars за плату хранят информацию о том, какое доменное имя принадлежит какому человеку (или компании), а также регистрируют новые (незанятые) доменные имена.

Процедура регистрации доменного имени состоит в выполнении следующих шагов.

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

2.На сайте этой компании проверяем, чтобы то доменное имя, которое мы регистрируем, было не занято в данный момент. Для данных нужд пригодится сервис

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

Результаты выполнения запроса на поиск сайта kai.ru представлена на рисунке 19.2.

3

Рисунок 19.2

3.Подать заявку на регистрацию доменного имени, следуя процедуре,

установленной выбранным регистратором (Рисунок 19.3).

Рисунок 19.3

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

4

хостинга у компаний, предоставляющих такие услуги (в этом случае требуется только зарегистрированное доменное имя).

Хостинг – хранилище файлов вашего будущего сайте на сервере с выходом в Интернет. Владельцы сайтов используют хостинги для защиты собственных жестких дисков от потенциально опасных пользователей.

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

Основные характеристики хостинга:

1.Выделенный или виртуальный хостинг;

2.Наличие и величина ограничений на объем трафика;

3.Объем выделяемого места на диске;

4.Наличие поддержки PHP (важно какая именно версия PHP установлена) и

других языков программирования;

5.Наличие поддержки MySQL и сколько баз данных разрешено создать;

6.Количество доменов, которые можно привязать к своему аккаунту на

хостинге.

Большинство хостингов предоставляют доступ к сайту и управление им как через веб-интерфейс, так и через ftp-клиент.

После того, как хостинг настроен, к нему привязано доменное имя, стартовая веб-

страница сайта создана, пользователи могут заходить на этот сайт.

5

§19.2 Основы HTML

HTML (HyperText Markup Language) переводится как «язык разметки гипертекста». Под разметкой здесь понимается структурирование, форматирование и оформление документов.

HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе (например, в редакторе Notepad++) и, который имеет расширение *.html.

HTML-страница состоит из элементов, которые начинаются и заканчиваются специальными компонентами - тегами. Теги - это ключевые слова, взятые в угловые скобки (символы меньше “<” и “больше” “>”). Например, тег <hr> означает, что в этом месте веб-страницы нужно вставить горизонтальную линию. Большинство тегов в отличие от тега <hr> применяются парами (обрамляют фрагмент текста). Например

<b>Привет, мир!</b> означает, что текст “Привет мир” должен быть выделен жирным шрифтом. Здесь тег <b> означает включение жирного шрифта, а тег </b> - окончание действия тега <b>. В данном случае говорят, что тег <b> - открывающий, а тег </b> -

закрывающий.

В общем случае открывающий тег заключается в угловые скобки — вот так: <тег>, а закрывающий тег заключается в такие же скобки, но перед ключевым словом ставится еще наклонная черта “/” вот так: </тег>.

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

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

6

doctype – тип документа;

тег <html>;

тег <head>

тег <title>;

тег <body>.

Эти элементы создают основной «скелет» веб-страницы.

§19.3 DOCTYPE

<!DOCTYPE html>

Этот известен как doctype (тип документа) – описание типа документа. Это должен быть первый элемент веб-страницы. Задача doctype – определить, какая версия html передается браузеру для отображения.

§19.4 Элемент html

<html lang=”en”>

…

</html>

html1 – контейнер, содержащий описание всех элементов html-документа. Там находятся два главных раздела: head и body.

Обратите внимание на открывающийся тег. Здесь lang=”en” - имя атрибута в открывающемся теге. html-элементы могут один или несколько атрибутов, зависящих от того, к какому элементу они применяются. Каждый атрибут имеет название и значение, которые записываются следующим образом:

название = «значение»

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

1 http://htmlbook.ru/html/html

7

§19.5 Элемент head

Элемент head содержит сведения о страницу, но ничего из этой информации не будет показано на самой странице. Например, он включает в себя элемент title2

(название), который сообщает браузеру, что нужно отобразить на заголовке веб-

страницы.

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8"/> <title>Урок первый - Основы HTML</title>

</head>

</html>

Создадим сайт для обучения веб-программированию. Для этого внутри блока

<title>Урок первый - Основы HTML</title> включим заголовок нашей будущей веб-страницы.

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

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

примере выше этот элемент сообщает браузеру, какую кодировку нужно использовать.

Элемент meta – пример самозакрывающегося элемента (также называемого пустым), так как между открывающим и закрывающим тегами элемент meta может не содержать вообще ничего.

В head могут присутствовать и другие элементы, например, таблицы стилей CSS

или код на языке Java Script.

2http://htmlbook.ru/html/title

3http://htmlbook.ru/html/meta

8

§19.6 Элемент body

Элемент <body>4 предназначен для хранения содержания веб-страницы

(контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм

Синтаксис элемента:

<body>

…

</body>

Пример использования:

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8"/> <meta name="author"

content="Заид Мингалиев"> <title>Урок первый - Основы HTML</title> </head>

<body onload="alert('Документ загружен')">

HTML (HyperText Markup Language) переводится как «язык разметки гипертекста». Под разметкой здесь понимается структурирование, форматирование и оформление документов.

</body>

</html>

Результат выполнения программы представлен на рисунке 19.4:

4 http://htmlbook.ru/html/body

9

Рисунок 19.4

Видоизменим вышеописанный скрипт, добавив заголовки в тексте и выделив

отдельные абзацы.

<!DOCTYPE html> <html lang="en"> <head>

<meta charset="UTF-8"/> <meta name="author"

content="Заид Мингалиев"> <title>Урок первый - Основы HTML</title>

</head>

<body>

<h1>

Основы HTML

</h1>

<p>

HTML (HyperText Markup Language) переводится как «язык разметки гипертекста». Под разметкой здесь понимается структурирование, форматирование и оформление документов.

</p>

<p>

HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе (например, в редакторе Notepad++) и, который имеет расширение *.html.

</p>

</body>

</html>

Открывающий <h1> 5и закрывающий </h1> теги обрамляют слова Основы HTML,

формируя заголовок. Таким же образом элемент <p> создает в тексте два абзаца. На рисунке 5 представлен результат выполнения программы:

5 http://htmlbook.ru/html/h1

10