My First Site

По-умолчанию во всех браузерах текстовые гиперссылки визуально выделяются. Наиболее распространенный вариант — синий текст с подчеркиванием, при наведении на ссылку курсор принимает форму руки. Посещенные ссылки меняют свой цвет на бардовый. Это удобно в плане наглядности, но для гармоничности дизайна сайта такой вариант практически никогда не подходит. Поэтому для ссылок применяют специальные стили. Как мы знаем, чтобы применить стили для всех элементов данного типа на странице можно воспользоваться селектором в виде имени тега. Для ссылок это будет селектор a. Для селекторов, использующихся для изменения стилей ссылок, применимы следующие постфиксы:

:link

применяет стили для ссылок, которые еще не посещены

:hover

применяет стили для ссылки при наведении курсора мыши

:active

применяет стили для ссылки при нажатии на нее

:visited

применяет стили для ссылок, которые уже посещены

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

a {color: black}
a:hover {color: red}

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

Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:

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

Поля задаются стилем padding. Этот стиль применим только к элементам-контейнерам, которые могут содержать в себе другие элементы. Стиль позволяет задать значение полей между краями элемента и его содержимым. Стиль margin позволяет задать отступы от элемента до ближайших границ другого элемента. Границами другого элемента могут быть границы родительского контейнера, а также края самой страницы.

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 — по ширине). Познакомиться с существующими стилями будет вашим домашним заданием :).

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

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

<br>

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

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

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

Помню, давно я думал, что Интернет сосредоточен в одном месте, представлял что-то типа лаборатории, где расположено большое количество аппаратуры, поддерживающей работу всего этого. Тогда я не мог оценить масштабы Глобальной сети и сложности ее структуры. В действительности же, Интернет — это абстрактное понятие, ресурсы Интернета разбросаны по оборудованию на всем земном шаре. Для связи этого оборудования между собой на огромных расстояниях придумали специальные алгоритмы и стандарты, в частности, протокол 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-адреса и номера порта в нашем случае.