Язык гипертекстовой разметки html

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

Но перед тем как нам непосредственно переходить к ознакомлению со всеми этими тэгами и конструкциями в html, нам надо уловить шесть основных правил, которые помогут вам в изучении этого языка:

1.Как работают сайты
2.HTML это основа любого сайта
3.Правило 80 на 20
4.Версии html 4.01 и 5
5.HTML это структура страницы а CSS внешний вид
6.Необходимый софт

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

Интернет это всего лишь навсего связь объединённых между собой компьютеров по всему миру, по другому их еще называют сервера, и каждый такой сервер имеет свой уникальный ip адрес, при этом эти сервера можно разделить на два вида, первый вид, это так сказать основной, они могут хранить в себе разный объём информации, к стати на этих серверах и находятся всё сайты которые вы посещаете.

Ну и второй вид, это вспомогательные сервера, они позволяют нам (точнее нашим компьютерам), спокойно взаимодействовать с этой виртуальной сетью. Один из типов таких серверов это DNS сервера, которые хранят в себе адреса сайтов, например yandex.ru, mail.ru и тд. Так вот когда мы набираем в строке браузера например адрес яндекса, этот DNS сервер узнаёт его ip адрес, и далее нам отображает этот набранный нами сайт.

Так что же сделал этот DNS сервер? Он просто отправил запрос на тот ай-пи адрес где живёт такой сайт с именем yandex.ru, если это сервер в рабочем состояний, то он отправляет в наш браузер совокупность разных файлов, первый из таких файлов это конечно же файл с расширением html, который и состоит из языка гипер разметки текста, далее идёт файл с картинками, потом файл стилей CSS, который управляет внешним видом сайта, вот в краце так оно всё и происходит.

Еще есть вариант что сайт например динамический, который для своей работы использует например язык веб-программирования php, то здесь уже будет всё немного по другому. Сначала сервер будет осуществлять выполнение всех этих php скриптов, потом из базы данных будут извлекаться все необходимые данные, и уже после этого формируется совокупность HTML и CSS файлов с различными картинками, далее наш браузер обрабатывает все эти файлы и в результате мы видим на экранах наших мониторов готовый к работе сайт. Мы с вами в этом разделе блога вдаваться в эти языки веб-программирования конечно же не будем, мы будем изучать основу, это язык гипертекстовой разметки html, поэтому в нашем случае мы на данном этапе будем учиться создавать простой статический сайт, который сразу отправляет все данные в браузер.

Для того что-бы увидеть у любого сайта его html код, то у своего браузера вам достаточно нажать на правую кнопку мыши и выбрать надпись с названием "исходный код", файл стилей css при желании тоже можно посмотреть. Вот собственно первые два пункта мы вами уже прошли.

Следующее правило это 80 на 20, вы наверное и сами понимаете что в любой нашей деятельности оно действует, пример можно привести такой: 20% действий приносит 80% успеха или 20% знаний поможет решить 80% поставленных задач. Абсолютно точно так же это действует и в нашем случае, поэтому нам достаточно знать хотя бы двадцать процентов этого языка.

Это вы можете и сами проверить, посмотрите исходный код любого сайта, там будут присутствовать одни и те же тэги, если их посчитать по разновидности то их будет примерно около 16ти штук, а знаете ли сколько содержит в себе тэгов весь html?, их там будет чуть больше 80ти! Вот и делайте вывод из всего этого господа. Поэтому мы не буде изучать абсолютно все теги языка гипертекстовой разметки html, ибо это абсолютно не нужно, они очень специфичные, часть из этих тэгов вообще уже устарела с появлением CSS.

Это раньше, когда CSS еще не было, то приходилось всё делать через язык html, все отступы, границы, всё расположение элементов, всё это делалось через html, вот в те времена действительно нужно было знать много тэгов, но в один прекрасный момент изобрели технологию CSS, и многие теги оказались просто не нужными. А уж если вам и понадобится какой то редкий тэг, то вы без труда сможете его найти в любом из html справочников, но 20% процентов этого языка вы должны будете знать на зубок, чтобы по памяти написать необходимый тэг, и необходимый к нему атрибут.

Дальше, теперь переходим к версии html. Дело в том что как и всё в этом мире, язык гипертекстовой разметки html не стоит на месте, он постоянно развивается, хоть и очень медленно, вот сейчас мы как раз попали на такой переходный этап, с версии 4.01 на версию 5. Но в принципе хоть версия 4.01 и используется уже более 10ти лет, она и сейчас остаётся актуальной, ничего в ней особо такого устаревшего пока нет. Версия же 5, сейчас пока еще только вводится и постепенно стандартизируется, обещают что уже через 2-3 года она уже будет основным стандартом. По этому я решил поступить следующим образом, основной курс по гипертексту html мы будем изучать из версии 4.01, так как без неё никуда, а версия 5 это тот же самый html, просто более обновлённый, в него будут добавлены некоторые новые тэги и атрибуты, постепенно мы с ними встретимся и изучим.

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

Вот видите, с лева на картинке мы видим голый html сайт, а с права этот же сайт, только с применением каскадных таблиц стилей, разница я думаю значительная. Я привёл это пример потому что когда мы будем изучать html, наш сайт будет выглядеть достаточно неказисто и простинько, но потом когда мы всё это пройдём и будем изучать css, то внешний вид наших создаваемых сайтов существенно улучшится.

Теперь нам осталось коснуться последнего пункта, который называется необходимый софт. Вы наверно сами знаете что для работы с гипертекстом, существует большое количество разных программ, таких как Adobe Dreamweaver, PHPDesigner и тд, но другая правда заключается в том, что эти программы будут для вас бесполезны до тех пор пока вы не будете знать сам html. Вот когда вы будете знать с чем имеете дело, тогда да, эти программы вам будут очень сильно помогать, сделают вам работу намного быстрее и удобней, но еще раз повторюсь, пока вы не научитесь писать код в ручную, к этим программам лучше не подходить!

Мы с вами подойдём к изучению последовательно, и будем писать свой первый html код в редакторе Notepad++, это бесплатный редактор, который находится в свободном доступе, он будет намного лучше чем простой блокнот, так как notepad++ будет нам подсвечивать код языка, также улучшена работа со сменами кодировок, вообще вещь хорошая.

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