Сама деятельность по созданию сайтов подразумевает работу с компьютерной сетью Internet. Под компьютерной сетью (далее сетью) понимают совокупность цепей передачи данных и коммутирующих устройств,позволяющая осуществить взаимное соединение оконечного оборудования, среди которого есть компьютеры. Всякая сеть подразумевает наличие некоторой иерархии (стека) протоколов, совокупности правил, регламентирующих передачу данных в процессе связи. В частности, в Internet используется иерархия протоколов TCP/IP. Опишем частично этот стек протоколов.

TCP/IP, DNS

Протокол IP (Internet Protocol) регламентирует передачу пакетов (наборов данных, передаваемых как единое целое) между узлами сети. Протокол TCP (Transmission Control Protocol) обеспечивает прозрачную передачу информации между процессами (программами) с использованием протокола IP. В свою очередь протоколы HTTP и FTP (часто используемые в Internet) используют TCP.

Компьютерам (и некоторым другим устройствам) в IP-сетях присваиваются IP-адреса для уникальной идентификации устройства. В настоящее время чаще всего IP-адрес состоит из 4 байт. Иногда он используется для задания адреса в браузере. В этом случае используется 256-ричная система счисления, в котором цифры отделяются друг от друга точками, а каждая цифра записывается в виде десятичного представления (например, 193.125.254.9). Некоторые адреса используются для служебных целей (в частности, 127.0.0.1, указывает на компьютер, с которого передается информация). Естетственно, 4 294 967 296 адресов может не хватить для нумерации всех устройств, подключенных к Internet, поэтому в скором будущем планируется переход к протоколу IPv6, в котором адрес будет занимать 6 байт.

Естествнно, человеку не удобно использовать IP-адреса компьютеров для работы с ними в сети, вместо них используются доменные имена. Именно, когда человек использует адрес, например, fmsh.miem.edu.ru, программа-браузер обращается к одному из компьютеров, серверов DNS (Domain Name System), который по доменному имени возвращает IP-адрес компьютера, на который потом и посылается запрос. Отмечу, что одному компьютеру может соответствовать несколько доменных имен.

Иногда после IP-адреса или доменного имени компьютера (в адресной строке браузера) используется конструкция состоящая из двоеточия и целого неотрицательного числа. Это число показывает номер порта TCP, к которому производится обращение. Дело в том, что программа, которая посылает ответ на запрос ждёт его именно на каком-то из портов (по умолчанию, 80, для протокола HTTP).

Таким образома, URL (Universal Resource Locators), набираемый в строке браузера, имеет следующий вид:
протокол://адрес:порт/путь ,
где протокол - это обычно HTTP, адрес - IP или доменное имя компьютера, порт (вместе с двоеточием) может отсутствовать.

Компьютер и программу, инициирующие соединение, называют клиентами (компьютер-клиент, программа-клиент), соответственно, компьютер и программа, отвечающие на запрос называют серверами (компьютер-сервер, программа-сервер).Для протоколов HTTP и HTTPS (hypertext Transmission Protocol (Secure)) программа-сервер называется WEB-сервером. Чаще всего используются WEB-серверы Apache (свободно распространяемый, Open Source), IIS (Microsoft). Основные используемые программы-клиенты - это Internet Explorer (Microsoft), Firefox и Mozilla, Opera.

Рассмотрим более подробно работу браузера и WEB-сервера. В простейшем случае браузер посылает запрос WEB-серверу, который возвращает содержимое файла, имя которого содержится в URL (такой сайт называют статическим). Однако, возможен другой случай: WEB-сервер запускает программу (скрипт, запускаемый на стороне сервера) и возвращает результат его работы. В этом случае сайт называется динамическим, так как результат работы скрипта может меняться с течением времени (и в зависимости от пользователя). Кроме того, указанный скрипт может, например, обращаться к базам данных. С другой стороны, не каждое действие пользователя нужно обрабатывать на стороне сервера, поэтому некоторые действия могут выполняться скриптами на стороне клиента (например, проверка правильности ввода даты). Скрипты на стороне клиента пишутся обычно на языках JavaScript, Java. Могут использоваться VBScript, ActionScript (Flash) и вообще любые языки программирования. В некоторых случаях текст скрипта встроен в HTML-документ, в других случаях загружается из отдельного файла. На стороне сервера чаще всего используют PHP, Perl, ASP, но можно использовать любые языки (даже Prolog).

Теперь следует перейти к перечислению тех средств, которые используются при создании сайтов и их краткой характеристике
HTTP. Протокол передачи гипертекста
HTML. Язык разметки гипертекста. Документы именно на этом языке передаются чаще всего через Internet.
CSS. Язык описания стилей, описываются типы шрифтов, способы расположения информации в документе HTML и другие дизайнерские аттрибуты. Информация на языке CSS может быть встроена в документ HTML или загружаться из отдельного файла.
JavaScript (JScript), VBScript, Java, COM-объекты, Flash. Представленные средства (первые три из них языки программирования) предоставляют возможность для написания скриптов, исполняемых на стороне клиента
PHP, Perl, любые другие языки (включая Prolog). Используются для написания скриптов, исполняемых на стороне сервера
СУБД (например, MySQL). Программа, организующая работу с базами данных (на сервере)
WEB-сервер (например, Apache). Программа, обрабатывающая запросы браузеров.

Язык HTML (HyperText Markup Language - язык разметки гипертекста) предназначен для описания вида документов (как они будут выглядеть в браузерах), содержащих текст и некоторые дополнительные структуры (такие как таблицы, списки, рисунки). Кроме того, можно вставлять ссылки между частями документа (а также на другие документы), с которыми удобно работать в браузере. Замечу, что HTML не является языком программирования.

Приведу пример простейшего HTML-документа:


Первая строка (она необязательна, но желательна) показывает версию языка HTML, которой пользуется автор документа.

Текст, заключённый в угловые скобки является служебным и прямо в документе не появляется. Такой текст вместе с угловыми скобками называется тэгом. После открывающейся угловой скобки идёт название элемента (часто говорят также тэга). Если предварительно поставлен символ / (слэш), то тэг называют конечным, иначе его называют начальным. Внутри тэга могут использоваться атрибуты (в примере в тэге p, обозначающему абзац). Атрибуты вводятся либо путём использования названия атрибута, либо путём использования конструкции атрибут=значение (значение часто помещают в кавычки, это рекомендуется делать всегда). Названия тэгов и атрибутов не чувствительны к регистру символов, однако, мы будем использовать строчные буквы (согласно стандарту XHTML). Между тэгами <html> и </html> размещают собственно HTML-документ. Он состоит из двух разделов — заголовка (между тэгами <head> и </head> и тела (между тэгами <body> и </body>) (в некоторых случаях раздел body не используется и может быть использован раздел frameset).

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

Большинство тэгов языка HTML имеют двойное назначение. С одной стороны, они структурируют части документа, с другой стороны, им соответствует некоторый способ отображения в браузере. Так тэг ol предназначен для помещения в документ нумерованного списка.

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

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

Текст на языке HTML представляет собой структуру вложенных тэгов, на самом глубоком уровне которой используется обычный текст. Некоторые элементы могут не иметь открывающего и/или закрывающего тэга (или даже их обоих). В первом случае принято (в частности, в XHTML) перед > ставить символ /. Примерами элементов, которые могут не иметь открывающего и закрывающего тэга является html, head и body, однако, опускать их не стоит. Внутри каждого элемента могут использоваться только те тэги, которые входят в контекст этого элемента. Так, внутри элемента html могут быть расположены только тэги head и body. Если их нету, то по найденному элементу можно понять какой из вышеуказанных тэгов был опущен.

Для обозначения комментариев используется следующая конструкция: <!-- комментарий -->. Если необходимо вставить символ < в текст используется конструкция &lt; (иначе он воспринимается как начало тэга), для вставления символа > — &gt; (иначе он может быть воспринят как конец тэга). Соответственно, символ & обозначают последовательностью &amp;. Внутри значения атрибута (помещенного в кавычки) для обозначения собственно кавычки используют последовательность &quot;.

В ЭВМ каждый символ имеет свой код. Во многих случаях сейчас используются кодовые таблицы, состоящие из 256 символов, однако, такого количества символов часто не хватает. Поэтому, имеются кодовые таблицы, в которых код занимает не 1 байт, а 2 (таков, например, UNICODE). В качестве базовой кодовой таблицы в HTML принят UNICODE. Необходимо отметить, что в HTML-тексте можно вместо названия символа указывать его код следующим способом: &#код символа;.

Приведу практически полный список псевдонимов символов (а также их кодов) в виде "Псевдоним символа код символа символ":


Замечание: есть и другие символы (не имеющие псевдонима). Отметим отдельно символ &nbsp; - неразрывный пробел - указывает браузеру по возможности не ставить его в конце или начале строки. &mdash; — тире (в отличие от дефиса),&laquo; и &raquo; - левая и правая кавычка (обычно они используются в русских текстах).

Перейдём к изучению атрибутов тэгов html, head и body. Тэг html поддерживает атрибуты lang и dir для указавания языка, используемого в документе. У lang значением является код языка, например, en, ru, en-US; у dir - направление чтения в языке (LTR (слева направо) или RTL (справа налево)). Эти атрибуты используются редко, однако, dir поддерживается браузерами. Замечу, что эти атрибуты можно использовать почти у всех тэгов (исключения: applet, base, basefont, br, frame, frameset, iframe, param, script).

У тэга body, помимо lang и dir, можно использовать атрибут title, указывающий текст всплывающей подсказки. Этот же атрибут можно также использовать у большинства других тэгов (исключения: base, basefont, head, html, meta, param, script, title). Кроме того, в нём (и большинстве других тэгов используются атрибуты, связанные с CSS и JavaScript, эти атрибуты мы рассмотрим при изучании этих языков. Кроме того, возможно использование нерекомендуемых атрибутов: background для указания фоновой картинки (значение - URL картинки), text для указания цвета текста, link - цвета непосещенных ссылок, vlink - посещенных ссылок, alink - ссылок, на которых наведен курсор, bgcolor - цвета фона (если его не указать таким образом или через CSS то можно сильно испортить дизайн путём изменения значения по умолчанию). Цвет можно указывать текстовым названием (Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua) или с помощью указания шестнадцатеричного представления (например, #FFDD99), где первые две цифры соответствуют интенсивности красной компоненты цвета, вторые - зеленой, третьи - синей (RGB - Red, Green, Blue).

Внутри тэга head можно использовать только некоторые тэги, один из них - title, атрибутами которого являются dir и lang. Другие тэги, используемые в заголовке мы изучим позднее.

Для указания границ абзаца используется тэг <p>. Внутри него используются элементы текстового уровня. Атрибуты: lang, dir, title, align, указывающий способ выравнивания (left, right, center, justify - по левому краю, по правому краю, по центру и по ширине), он является нерекомендуемым.Закрывающий тэг необязателен, но лучше его использовать.

Для выделения границ заголовков используюстя тэги <h1> - <h6>. В них используюстя те же атрибуты, что и в <p>, эти элементы задают текстовый контекст. Закрывающий тэг обязателен.

Для группирования элементов уровня блока и текста используется элемент <div>. Он позволяет использовать атрибуты dir, lang, title и align. Причём значение align переносится на вложенные тэги <div> и заголовков (если в них не указано противоположное), для группирования элементов уровня текста испоьзуется <span>. Этот элемент имеет те же атрибуты, но практически используется только совместно с CSS. Сокращенная форма <div align="center"> - <center>

Элемент <address> содержит обычно описание (не гиперссылку) адреса автора текста. В браузере, обычно, выделяется курсивом. Имеет те же атрибуты, что и <p>.

Все следующие элементы имеют атрибуты lang, dir, title. Обязательны как открывающий, так и закрывающий тэг. Автор с помощью этих элементов может указать тип содержимого элемента.
<em> Выделение текста (обычно курсив)
<strong> Усиленное выделение текста (обычно полужирный шрифт)
<dfn> Определение
<code> Тексты программ (обычно, моноширинный шрифт)
<samp> Пример (обычно, меньший размер)
<kbd> То, что вводится с клавиатуры (обычно, моноширинный шрифт)
<var> Переменная (обычно, моноширинный шрифт или курсив)
<cite> Текстовая ссылка (обычно, курсив)
<abbr> Аббревиатура (игнорируется многими браузерами)
<acronym> Акроним (слово, составленное из первых букв словосочетания, игнорируется многими браузерами)

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

Все следующие элементы имеют атрибуты lang, dir, title. Обязательны как открывающий, так и закрывающий тэг. <tt> Моноширинный шрифт
<i> Курсив
<b> Полужирный шрифт
<big> Увеличенный шрифт
<small> Уменьшенный шрифт
<strike> Зачёркнутый шрифт
<s> Зачёркнутый шрифт
<u> Подчёркнутый шрифт
<sup> ^{Верхний индекс}
<sub> _{Нижний индекс}

Все эти элементы можно заменить с использованием CSS. Тэги <strike>, <s> и <u> являются нерекомендуемыми.



Элемент <font> использует атрибуты lang, dir, title, а также size, задающий размер от 1 до 7 или относительное значение (например, +1 или -3), color (задаёт цвет) и face (задаёт начертание шрифта, например Times New Roman, Times, Arial, несколько шрифтов указываются через запятую в порядке убывания приоритета). Элемент <basefont> задаёт базовый размер шрифта в атрибуте size (по умолчанию, 3).

Элемент <blockquote> задаёт длинную цитату и имеет контекст уровня блока. За исключением атрибутов lang, dir и title используется атрибут cite - адрес цитаты. Элемент <q> задаёт короткую цитату и имеет контекст уровня текста (в остальном он подобен blockquote).

задаёт принудительный переход на новую строку. Не имеет закрывающего тэга. Атрибуты: dir, lang и title.