Приступаем к изучению языка Hypertext Markup Language (Язык разметки гипертекста), который составляет основу любого сайта.
Прежде чем переходить непосредственно к изучению HTML, давайте рассмотрим пять важных моментов, которые значительно облегчат изучение и понимание этого языка.
Как работают сайты? HTML – основа любого сайта.
На данный момент нам нужно знать, как работают сайты (хотя-бы в упрощенном виде), т.е. каким образом у нас происходит весь процесс: от набора адреса в адресной строке - до того момента, когда мы видим сайт на экране.
Вот простая схема:
Здесь изображена упрощенная модель интернета и компьютер, взаимодействующий с ним. По сути, интернет - это сеть взаимодействующих с собой компьютеров (по-другому их называют – сервера). Каждый сервер имеет свой уникальный ip адрес, который идентифицирует этот сервер в этой общей сети, потому что эта сеть состоит из миллионов, а как-бы не из миллиардов компьютеров и соответственно каждый должен иметь свой ip адрес, по которому мы можем к нему обратиться. При этом интернет состоит из двух видов серверов: Основной - на котором хранятся сайты. В зависимости от мощности сервера и сайтов, которые хранятся на нем, один сервер может хранить от одного до тысячи, а то и сотен тысяч сайтов. Если сайт довольно мощный и его посещают миллионы человек в день, то такому сайту одного сервера будет даже мало, он обычно занимает целый кластер серверов. Другое дело какая-нибудь домашняя страничка, состоящая всего из одного файла, таких страничек может быть даже несколько сотен тысяч на сервере. Второй тип серверов – это вспомогательные сервера, которые помогают всей этой сети работать и нам взаимодействовать с этой сетью. Один из типов таких серверов – это DNS-сервера, которые хранят соответствия обычных имен сайтов, которые нам привычны (Yandex.ru, Google.com и т.п.), к их ip адресам. Мы набираем в адресной строке обычное имя, а DNS-сервер узнает на каком сервере хранится сайт с таким именем, потому-что для интернета эти имена абсолютно ничего не значат и вся его модель основана на ip адресах. Для примера давайте разберем эту цепочку взаимодействий, чтобы она у нас закрепилась в голове. У вас есть компьютер с запущенным браузером (1). Вы набираете адрес сайта % и уже через несколько секунд этот сайт перед вами. Все взаимодействие с сервером, все самое интересное осталось за кадром. Вы видите только результат – яркую картинку, с которой вы можете что-то делать: скачивать информацию, переходить по ссылкам и т.д. Нам это не интересно, нам интересно как все это произошло. Откуда ваш браузер взял этот сайт после того как вы ввели это «кодовое слово»? Произошло следующее – ваш браузер (1) обратился к DNS-серверу(2) и передал, что хочет получить доступ к сайту %. Что сделал DNS-сервер? Он в своей базе данных нашел на каком ip адресе (3) находится сайт с именем %. DNS-сервер отправляет туда запрос и говорит что ему нужен сайт %. Если с сервером все в порядке и он доступен он формирует ответ и отправляет совокупность файлов которая обычно состоит из документа который содержит HTML-код, картинок которые необходимы для отображения сайта и таблицы стиля которая управляет внешним видом сайта (4). Возможен еще вариант, что сайт отдается не сразу. Если сайт написан, например, на языке PHP и все данные у него хранятся в базе, то такой сайт сначала на сервере преобразовывается. Сначала на сервере происходит выполнение всех скриптов, из базы данных достаются все данные (5), а уже потом формируется совокупность этих файлов, которая отправляется нам (4). Браузер, получив эти файлы, в соответствии со своими алгоритмами, преобразует это все в ту картинку, которую задумал автор.
Правило 80 на 20.
Правило 80 на 20 действует почти в любой сфере деятельности. 20% деятельности приносит 80% результата, 20% клиентов приносит 80% прибыли, 20% тегов используется для написания 80% сайта. Я веду к тому, что мы не будем изучать все теги языка это абсолютно не нужно т.к. очень многие из них очень редко используются, они очень специфичные, часть из них вообще уже устарела с появлением CSS, потому-что изначально, когда CSS еще не было, приходилось все делать за счет HTML. Все отступы, границы, позиционирование, расположение элементов, все это делалось при помощи HTML. Для этого было нужно много тегов и нужно было знать, как эти теги работают. Появление CSS сделало многие теги просто ненужными. Позже с практикой вы убедитесь, что достаточно знать 20% языка, но хорошо, чем 100%, но кое-как, потому-что все редкие теги вы всегда сможете посмотреть в шпаргалке по HTML. Просто знайте, что мы изучим только 20% тегов (используемые в каждом сайте), которые нужно знать наизусть.
Версии HTML 4.01 и 5.
Язык HTML постепенно развивается. Сейчас мы попали на переходный этап между версиями HTML 4.01 и 5. Версии HTML 4.01 уже около 10 лет, но она по-прежнему остается актуальной, ничего устаревшего в ней нет. Версия HTML 5 постепенно вводилась, стандартизировалась и должна быть основным стандартом. Версия HTML 5 это не новая версия – это обновленная версии HTML 4.01, т.е. там просто добавляются новые теги, атрибуты и немного новых возможностей, поэтому без версии HTML 4.01 все равно никуда – это фундамент, мы его изучим хорошо, а про версию HTML 5 я расскажу в дополнительном курсе.
HTML - конструкция страницы, CSS – внешний вид.
HTML дает лишь фундамент, а CSS оформляет сайт. На HTML создается основа, а с помощью CSS придается вид, который задумал дизайнер.
На картинке изображен один и тот-же сайт, только на одном изображении есть только HTML-код без таблиц стилей, а на втором с включенной таблицей стилей. Пока мы будем изучать HTML, наш сайт будет выглядеть неказистым, но вы должны понимать, что мы учимся делать фундамент – это очень важно, и любой сайт без таблиц стилей выглядит примерно также. Поэтому не обращайте внимание на то что все выглядит так простенько, на самом деле это очень важно, и языку HTML вы должны уделить не меньше внимания чем, потом, языку CSS который уже намного интереснее, но без HTML не имеет смысла.
Необходимый софт.
Для создания сайтов есть множество программ, но все эти программы бесполезны до тех пор, пока вы не выучили язык. Позднее да, можно и даже нужно пользоваться такими программами, потому что они экономят время, они делают многие процессы проще и удобнее чем делать их в ручную, но это только после того как вы выучите HTML и сможете написать код в ручную. Не делайте ошибку многих, которые пытаются сразу установить кучу мощных программ типа Adobe Dreamweaver и сразу пытаются что-то создавать в них, а потом не могут разобраться в коде, который дописала за них программа. Это грубейшая ошибка! Нужно сначала изучить основы, изучить фундамент, научиться писать руками сайт с нуля и только потом использовать эти самые инструменты как своих помощников, как программы, которые экономят время и забирают на себя всю рутинную работу. Мы-же начнем с того что начнем изучать HTML в редакторе Notepad++ - это бесплатный редактор. В отличии от встроенного блокнота Windows - Notepad++ поддерживает работу с несколькими вкладками, использует подсветку кода, он умеет работать с кодировками и позволяет сворачивать завершенные блоки кода. Notepad++ и другие необходимые файлы есть в дополнительных материалах
На этом все. Жду вас в следующем уроке с уже установленным редактором Notepad++, где мы приступим к изучению языка HTML и первых тегов.
