My First Site

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

<tag style="style1: value1; style2: value2">

Стили CSS перечисляются через точку с запятой, каждый представляет собой пару "имя стиля: значение стиля", разделенную между собой двоеточием. Стиль, как правило, описывает параметры внешнего вида элемента в целом, либо его какого-либо подэлемента. Рассмотрим пример:

<span style="font-family: verdana; font-size: 10px">Hello, world!!!</span>

В контейнер span заключен текст "Hello, world!!!". span — это парный тег, который сам по себе никаких видимых изменений над своим содержимым не производит, однако позволяет применить определенные стили CSS, указанные в нем. Чаще всего его используют именно для этих целей. В нашем теге заданно два стиля CSS: стиль font-family со значением verdana и стиль font-size со значением 10px. Стиль font-family задает шрифт текста, а стиль font-size — его размер. Таким образом, текст "Hello, world!!!" будет отрисован шрифтом Verdana размером 10 пикселей.

Как и в случае с HTML ключом к успеху является знание наиболее полезных и распространенных стилей CSS. А в идеале — всех . Их достаточно много, некоторые являются общими для всех типов элементов, некоторые специфичны для определенного типа. Приведу несколько очень распространенных стилей, помимо font-family и font-size: background-color — фоновый цвет элемента, например, значение red или #ff0000 соответствует красному цвету (второй вариант записи — шестнадцатеричное значение цвета в HTML, может быть получено из таблицы HTML-цветов, либо с помощью специального калькулятора), color — цвет текста, text-align — горизонтальное выравнивание текста (left — по левому краю, center — по центру, right — по правому, justify — по ширине). Познакомиться с существующими стилями будет вашим домашним заданием :).

Продолжаем разговор об HTML. Для создания HTML-страниц применяются специальные программы — HTML-редакторы. В принципе, можно пользоваться обычным текстовым редактором, однако у HTML-редакторов присутствует незаменимо полезная функция подсветки синтаксиса. Некоторые редакторы имеют функцию автозавершения кода, систему справки по языку и т.п. Из бесплатных редакторов, на мой взгляд, наиболее предпочтительными являются PHP Expert Editor:

Программу можно найти по адресу: http://www.ankord.com/ru/phpxedit.php. PHP Expert Editor является платной, однако жители бывшего СССР могут ее бесплатно зарегистрировать здесь.

Основная часть контента сайта состоит из файлов. Уверен, каждый из вас когда-либо встречал файлы с расширением htm или html. Это текстовый файл, описывающий разметку страницы сайта, то есть расположение и форматирование текста, графики, ссылок и т.п. при помощи языка разметки HTML (HyperText Markup Language). Организовать полный курс по языку HTML я вряд ли смогу, так как тема очень обширная, поэтому в этой статье я расскажу о базовых понятиях, достаточных для понимания сути. Более полную информацию вам стоит искать в книгах или специализированных интернет-ресурсах по HTML, благо, таковых немало.

HTML-страница строится из кирпичиков — тегов, которые представляют собой текстовые сущности, заключенные в треугольные скобки ("<" и ">"), например:

<br>

Этот тег переводит текст на новую строку. Теги бывают парные и непарные. Приведенный выше тег является непарным, так как это одиночный самостоятельный тег. Парный тег состоит из открывающего и закрывающего тега:

<font>текст</font>

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

Идем на страницу загрузки проекта — http://httpd.apache.org/download.cgi и качаем последнюю стабильную версию под Windows в виде MSI инсталлятора (в моем случае это был apache_2.2.14-win32-x86-no_ssl.msi). Начнем установку. Первый диалог, который может ввести нас в заблуждение — это диалог ввода информации о сервере:

Конфигурировать наш сервер мы будем после установки, а сейчас давайте не будем особо париться и впишем в поля "Network Domain" и "Server Name" localhost, а в поле "Administrator's Email Address" ваш адрес электронной почты (о том, что такое localhost, речь пойдет позже). Нижние переключатели не трогаем. Жмем "Next", соглашаемся с типичной установкой, еще раз "Next". Инсталлятор предложит выбрать директорию, в которую будет установлен веб-сервер:

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

Помню, давно я думал, что Интернет сосредоточен в одном месте, представлял что-то типа лаборатории, где расположено большое количество аппаратуры, поддерживающей работу всего этого. Тогда я не мог оценить масштабы Глобальной сети и сложности ее структуры. В действительности же, Интернет — это абстрактное понятие, ресурсы Интернета разбросаны по оборудованию на всем земном шаре. Для связи этого оборудования между собой на огромных расстояниях придумали специальные алгоритмы и стандарты, в частности, протокол TCP/IP, на котором в настоящее время функционирует наш Интернет. Согласно этому стандарту, каждый компьютер, находящийся в Глобальной сети, имеет свой уникальный адрес — IP-адрес. IP-адрес представляет собой последовательность четырех чисел в диапазоне от 0 до 255, разделенных между собой точками (например, 92.166.31.18). Один компьютер может связаться с другим компьютером в сети, зная его IP-адрес. Но сказать "компьютер связался с компьютером" не совсем верно, так как связываются не сами компьютеры, а сетевые службы (программы, если хотите), выполняющиеся на них. Допустим, вы отправляете электронную почту дедушке, при этом ваша почтовая программа связывается с почтовым сервером для отправки письма.

На компьютере одновременно может работать несколько сетевых программ, поэтому помимо IP-адреса для связи протоколом TCP/IP предусмотрено дополнительно такое понятие как порт. Порт — это число в диапазоне от 1 до 65536. Таким образом, минимальным условием для связи одной сетевой программы с другой является наличие у первой IP-адреса и номера порта второй. Совокупность IP-адреса и порта принято записывать через двоеточие (например, 192.168.35.2:443).

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