Что такое HTML?

Что такое html кодHTML  (hypertext markup language) — это язык гипертекстовой разметки текста, который составляет основу любого сайта или блога. HTML код создает каркас документа и вводит в него различные элементы (тексты, рубрики, таблицы). Давайте рассмотрим некоторые моменты, которые облегчат нам с вами понимание этого языка. 

Как работают сайты?

Мы должны знать работу наших сайтов, то есть как происходит весь процесс от набора строки адреса сайта в нашем интернет браузере и до того момента, когда этот сайт мы уже увидим на нашем экране монитора. Для этого давайте рассмотрим простую схему рисунка, которая расположена ниже. Здесь размещена упрощенная модель интернета и наш персональный компьютер, с помощью которого мы с этим интернетом будем взаимодействовать.

По сути, интернет — это сеть со связанными между собой компьютерами (серверами). Каждый такой сервер имеет свой уникальный ip-адрес, который идентифицирует этот сервер в общей сети. Эта же сеть состоит из огромного миллиарда компьютеров, и соответственно каждый должен иметь свой ip-адрес, по которому мы можем к нему обратиться.

Что такое HTML.

Виды серверов

Сам наш интернет составляет два вида серверов:

  • первый вид — это основной вид, на котором хранятся сайты в зависимости от мощности сервера и мощности самих этих сайтов. Один сервер сможет хранить от одного до сотни тысяч сайтов. Одно дело, когда сайт довольно мощный, и его каждый день посещает миллион человек, то такому сайту даже одного сервера будет мало. Он обычно занимает целый кластер серверов. Однако другое дело простенькая домашняя страничка, которая состоит из одного файла. Таких страниц на сервере может быть несколько сотен тысяч.
  • второй тип серверов — это вспомогательные или дополнительные сервера, которые позволяют всей интернет сети работать и нам взаимодействовать с нею. Один из типов таких вспомогательных серверов — это DNS-сервера, которые хранят соответствие обычных доменных имен сайтов, которые нам привычны (например, yandex.ru). То есть мы набираем в строке обычное имя, а DNS сервер занимается тем, что узнает, на каком сервере храниться сайт с таким именем. Для самого же интернета эти имена по ничего не значат и в нем все построено на ip-адресах.

Работа DNS серверов

DNS серверДавайте для примера посмотрим на эту цепочку взаимодействий, чтобы она у нас закрепилась в голове. Мы видим наш компьютер с запущенным браузером. Допустим, мы набираем любой адрес сайта (например, alpha-byte.ru). В конечном итоге мы видим только результат, а как это происходит с технической точки зрения, мы так и не узнаем. Однако откуда наш браузер взял этот сайт после того, как мы всего лишь набрали его имя?

Произошло следующее. Изначально наш браузер обратился к DNS серверу, а к какому DNS серверу вы будете обращаться — это зависит от вашего интернет-провайдера. При этом наш браузер обратился к определенному DNS серверу и передал, что он желает получить доступ к определенному сайту. Что сделал DNS сервер? Он в своей базе данных нашел, где находится сайт с таким именем. И предположим, он определил, что сайт с таким именем живет на определенном сервере со своим ip-адресом (например, ip 17.185.103.8 как на рисунке).

DNS сервер отправляет туда запрос и говорит, что ему нужен определенный сайт. Если сервер с ip 17.185.103.8 доступен, то он формирует ответ и отправляет на наш браузер совокупность файлов, которые обычно состоят из html документа, картинок отображения сайта и таблицей стилей, которая управляет внешним видом сайта. Вот вкратце это так и происходит.

При этом возможен еще один вариант, когда сайт дается не сразу. Если это динамический и более сложный сайт, который написан на другом языке (например, PHP) и все данные его хранятся в базе, то такой сайт сначала преобразовывается на сервере. Сначала происходит выполнение всех скриптов (php, MySQL), из базы данных достаются данные и только потом формируется совокупность файлов (HTML, CSS и JPG) и потом все это отправляется на наш браузер. Вот таким образом и происходит взаимодействие. Далее браузер, получив эти файлы, впоследствии со своими алгоритмами, преобразует уже ту картинку, которую задумал автор сайта. Эту же картинку вы видите уже у себя на компьютере.

Как происходит работа сайта

Чтобы посмотреть исходный код, просто зайдите на любой сайт, нажмите правую кнопку мыши и выберите «просмотр кода«. При этом если мы посмотрим исходный код (вид данной страницы), то мы как раз таки увидим этот html код, который нам прислали с сервера. Здесь мы видим всякие картинки, которые необходимы для отображения сайта. Ну, при желании можно посмотреть и CSS файл, который отвечает за то, что и где должно быть расположено, как должен выглядеть шрифт, ссылки, отступы и так далее. Таким образом, браузер все это анализируя, отдает нам итоговую картинку сайта. Вот такой момент взаимодействия, который мы должны с вами понять.

Подводим итоги

Мы узнали, как работают сайты и убедились, что html код является основой любого сайта или блога. В исходном коде страницы еще раз можно в этом убедиться. Также еще важно понимать, что HTML язык — это структура страницы, а CSS — это ее внешний вид. На HTML делается вся основа сайта, а с помощью CSS эта основа преобразуется в тот вид, который задумал дизайнер.

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

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

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 Нажимая на кнопку, вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.

Комментарии 7

  • Сергей, приветствую и хочу Вам выразить признательность: По поиску нашла Ваш Блог, и столько подробностей обнаружила по своим вопросам, очень понятно, доступно, Вы молодец, можете донести до аудитории самую суть простым слогом, про HTML очень интересно, и про статическую страницу прочла, и закладку сделаю себе по-Вашему Блогу! Всего Вам доброго!:)))

    • Спасибо Вам! Всегда приятно узнать, что такой труд приносит пользу людям и эти люди отвечают взаимностью. Хочу и Вам пожелать всего наилучшего!!!

  • Ну я все так и думала, как здесь написано.
    Но вот как люди понимают php, для меня загадка.
    Я там очень мало знакомых слов нахожу. Но вырезать и вставлять куски по инструкциям получается.

  • Наверное. Я его просто не читала пока ни разу.
    Когда хоть раз прочитаю, пойму, дано мне это запомнить или нет.

    • Сильно лучше не вникай, а то мозг закипать начнет. :) Лучше запомнить основное, чтобы в дальнейшем не было проблем с редактированием шаблона! А так, все премудрости лучше не знать. Мы не программисты. Также кроме HTML есть много других языков. На всех все равно не хватит. :)

  • HTML я понимаю. Это не математика. Таблица еще понятнее. Там вообще не математика.
    Но я только вчера наконец вычитала и поняла, почему какие-то определенные страницы пишутся в скриптах.
    А то я не могла раньше понять.

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку «Отправить», вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.