HTML. Введение (Урок 1)

Оглавление:

Мы приступаем к изучению «гипертекстовой разметки текста», сокращенно код HTML, который составляет основу любого сайта, и который нам нужно изучить, чтобы научиться строить эти самые сайты. Давайте для начала разберем некоторые важные моменты, которые облегчат нам изучение и понимание, что такое HTML язык.

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

Как происходит процесс от набора адреса сайта в браузере до его отображения на экране? Для этого давайте начнем уроки HTML и рассмотрим схему ниже.  Это упрощенная модель интернета и наш компьютер, который хочет в него войти. В общем смысле интернет это всего лишь несколько компьютеров объединенных в сеть (сервера). Каждый сервер имеет свой IP-адрес, это его отличает от других таких миллионов серверов.

Как работает интернет и сайты

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

Второй тип — вспомогательные сервера, которые помогают нам взаимодействовать и работать в сети. Один из  таких серверов это DNS сервера, которые хранят соответствие названий сайтов IP-адресам их серверов. Буквенные названия сайтов не имеют никакого значения для компьютеров, они понимают только числовые значения и IP-адреса.

Например, я набираю в браузере адрес своего блога и она быстро загружается. На самом деле весь процесс остался за кулисами, и мы видим только результат. Что же там произошло? Давайте разберемся. Наш браузер после ввода названия сайта обратился к  DNS-серверу, тот в свою очередь установил по базе данных IP-адрес WEB-сервера, где хранится моя подписная страница и получив от него положительный ответ передал мне набор данных таких, как сам HTML код, картинки и таблицу стилей CSS.

HTML код содержит информацию «что содержится на странице», а таблица стилей CSS определяет дизайн, расположение и внешний вид сайта. Браузер же, получив данные, преобразует их в картинку, которую мы видим. При этом, если мы посмотрим исходный код сайта, то мы увидим тот самый HTML код, который нам прислали с сервера. Здесь мы видим текст, картинки. А в CSS файле мы видим цвета, формы и т.д.

К оглавлению ↑

Что такое HTML и CSS и в чем отличие

В языке HTML в качестве так сказать слов используются теги. Их огромное множество,  но в практической деятельности используются только 20% из них. Позже, когда мы с вами начнем создавать свой сайт с нуля, вы в этом убедитесь.

HTML это только строительный материал, из которого строится сайт. CSS же все это дело упорядочивает, придает ему цвет, вид и форму.

Основные html теги

Основные html теги

HTML это только строительный материал, из которого строится сайт. CSS же все это дело упорядочивает, придает ему цвет, вид и форму. Вот пример моей старой подписной страницы с «голым» HTML кодом.

html страницы сайта без css свойств

html страницы сайта без css свойств

и также страница с уже подключенными таблицами стилей CSS

Страница с подключенными css свойствами

Та же страница с подключенными css свойствами

К оглавлению ↑

Зачем нужно изучать HTML и CSS

Теперь еще один главный момент… зачем вам все это нужно… Если вы серьезно хотите заняться бизнесом в интернете, вам просто НЕОБХОДИМО знать основы HTML и CSS. Это как буквы алфавита и правила русского языка, без знания и понимания которых вы не сможете построить красивую и грамотную речь. Никто не заставляет вас получать образование программиста, изучите ОСНОВЫ и никто и никогда не заметит ваш «акцент» в языке интернета при создании  и обслуживании  вашего сайта. Вы всегда  сможете сами  изменить дизайн вашего сайта или блога, «позаимствовать» 🙂  дизайн на тех сайтах, что вам приглянулись, да и это просто ИНТЕРЕСНО!!!

На следующем занятии нам понадобится программа Notepad++, скачайте и установите ее, на следующем уроке изучим «Теги HTML».

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

Добавить комментарий

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