Основы HTML-верстки. Введение

Приветствую вас! Сегодня хочу начать большую серию постов, посвященных HTML-верстке. Она будет действительно большая. Я долго думала, как выгоднее представить материал, чтобы каждый, кто захочет самостоятельно сверстать сайт, смог это сделать. Надеюсь, у меня получится достаточно простым языком рассказать вам как это происходит =) До того, как непосредственно приступить к изучению HTML и CSS, я расскажу вам про инструменты верстальщика, систему контроля версий и дам вводный курс работы в фотошопе.

Начну с основ HTML, которые пригодятся не только в верстке сайта, но и в оформлении блога. Расскажу про семантику, валидность кода, затрону HTML5. Ну и в целом как сделать так, чтобы вас не проклинали последними словами программисты (хотя они это любят), которые после вас будут работать с кодом. Затем приступим к изучению CSS, поговорим о сетках, кроссбраузерности, немного о CSS3, возможностях и подводных камнях. Ну а в практической части сверстаем небольшую простую страницу, которую любезно нарисует @orezaku, зарегистрируем домен и разместим ее на хостинг.

Ну а сейчас давайте разберемся, что же на самом деле происходит, когда вы вводите адрес сайта в браузере и нажимаете Enter? Понимание этого процесса важно для оптимизации и повышения быстродействия сайта (то, как быстро он загружается).

Где расположен сайт?

Сайты живут на серверах. “Передвижение” между серверами происходит по кабелям сети. Эти кабеля есть практически по всему миру, то есть все серверы связаны в сеть с помощью определенных физических каналов. У каждого сервера есть свой IP-адрес. Важно понимание того, что до любого устройства, которое подключено к интернету, вы сможете добраться, используя такой унифицированный адрес.

На сервере запущено много программ и у них есть номера: “порты”. Сайты живут в программе “веб-сервер”. Номер порта веб-сервера: 80. Веб-сервер, в свою очередь, может содержать несколько сайтов, при этом они просто хранятся в разных папках. Такие веб-сервера называются виртуалхосты. На этом этапе веб-сервер по названию, которое вы ввели в адресную строку, понимает, из какой папки нужно взять сайт, и показывает его.

Как браузер узнает IP-адрес?

Когда вы вводите адрес сайта в адресную строку браузера, ему (браузеру) необходимо узнать IP-адрес сервера, на котором находится данный сайт. Он это делает с помощью системы DNS. По сути, это просто таблица соответствий адресов сайтов и IP-адресов. Браузер делает запрос по IP-адресу DNS-сервера, а тот в свою очередь возвращает ему IP-адрес нужного сервера. После этого браузер делает второй запрос по полученному IP-адресу.

Как мы видим, принцип работы DNS простой, но есть ряд условий, которые должны быть соблюдены. DNS должен быть очень надежным и очень безопасным. Если он “отвалится”, то мы не сможем зайти ни на один сайт. А если будут проблемы с безопасностью, то можно будет легко заменять IP-адреса, в том числе и в корыстных целях. Изменять и вносить новые данные на DNS-сервер могут только ограниченный круг компаний, так называемые регистраторы. Срок обновления данных может достигать 48 часов.

Можете посмотреть комикс, о том, как работает DNS.

Какую службу доставки использует браузер?

Служба доставки — это протокол TCP/IP. Он доставляет HTTP-пакеты, которые состоят из запросов и ответов. Именно эти пакеты интересуют нас больше всего. Для загрузки сайта браузер делает много HTTP-запросов и от количества и последовательности этих запросов зависит скорость загрузки сайта. Стоит помнить, что в браузерах есть ограничения на максимальное количество параллельных запросов с одного и того же сервера. Чем больше запросов требуется для открытия сайта, тем хуже его верстка.

Как браузер собирает сайт?

Браузер загружает не “готовый сайт”, а отдельные его части и собирает его по определенным “инструкциям”. Инструкции — это стандарты HTML и CSS, которые зашиты в браузер. Эти стандарты мы и будем с вами изучать =)

Вот такая не очень простая получилась вводная часть. Надеюсь, у вас появилось понимание “откуда ноги растут” и “зачем верстать хорошо”.