Как работают все сайты, и что такое HTML и CSS



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

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

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

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

Хо́стинг (англ. hosting) — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно находящемся в сети. Подробно о работе хостинга мы говорили в этой статье.

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

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

Смотрите также:  Как вставить ссылку в HTML, тег <a> и его атрибуты

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

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

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

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

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

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

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


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

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

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

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

Смотрите также:  Использование текстового редактора Notepad++ в качестве ftp-клиента

Никто не заставляет вас получать образование программиста, изучите ОСНОВЫ и никто и никогда не заметит ваш «акцент» в языке интернета при создании и обслуживании вашего сайта. Вы всегда сможете сами изменить дизайн вашего сайта или блога, «позаимствовать» 🙂 дизайн на тех сайтах, что вам приглянулись, да и это просто ИНТЕРЕСНО!!!

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

0

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях


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

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