Skip to content

Latest commit

 

History

History
110 lines (73 loc) · 8.63 KB

01. История интернета, HTTP и HTML.md

File metadata and controls

110 lines (73 loc) · 8.63 KB
Raw

История интернета, HTTP и HTML

В чём смысл вёрстки? Как это вообще делается? С чего это всё пошло?

История

Тим Бернерс-Ли — создатель нашего интернета. 6 августа 1991 года он запустил первый в мире сайт info.cern.ch, рассказав про технологию WWW (тот самый World Wide Web), которая базировалась на трёх китах: протокол передачи данных HTTP, системе адресации URI и языке разметки HTML. Сложно-то как! Пора объяснять.

Про HTTP, URI и HTML

HTTP — протокол передачи данных

Компьютеры не работают на магии, разные программы обмениваются данными и обмен данными должен быть строгим — компьютер не человек, это мы в любом порядке можем говорить слова, а компьютерам нужна формализация. В вебе для передачи данных мы используем протокол HTTP.

Основа HTTP — общение «сервер-клиент». Сервер это система, которая по запросу от клиента отдаёт ему ответ. Техническими терминами: request, client, response. Кстати, здесь сервер это бэкэнд, а клиент — фронтэнд. Обычно в вебе клиентом называют браузеры, но бывают и другие способы делать запросы: терминальные wget, curl; браузерные расширения типа Postman и тому подобное.

URI — система адресации

Ок, с сервером и протоколом мы разобрались, но теперь вопрос: а куда делать эти самые запросы? Да и как бэкэнд отделит один запрос от другого? Это сравнимо с адресами в городах — у нас есть модный клуб Стрелка, в который никто не может попасть, потому что никто не знает адрес.

URI = [ схема + ":" ] иерархическая-часть [ "?" + запрос ] [ "#" + фрагмент ]

Примеры:

  • http://ru.wikipedia.org/wiki/URI?highlight=запрос
  • ftp://ftp.is.co.za/rfc/rfc1808.txt
  • mailto:[email protected]
  • tel:+1-816-555-1212

Как видите, всё строится по одному формату: сначала мы говорим что за протокол (http / ftp / mailto / tel), затем — запрос. У хттп, например, есть ещё квери-параметры (query params), в примере с Википедией это ?highlight=запрос. Фронтэнд (джаваскриптом) считает его и подсветит все "запрос" на странице.

Кстати, отличие URL от URI в том, что URL однозначно указывает адрес (http:// и ftp:// это урлы), а URI только говорит про идентификатор (как в случае с емейлом или телефоном).

HTML — язык разметки

Идём дальше! Ок, мы разобрались, что мы ходим на сервер через HTTP и отделяем их друг от друга с помощью URI (или, если быть точным, URL). С помощью урлов мы даже разделяем какие страницы нужно отдавать: на http://erodionov.ru/frontend у нас одна страница, а на http://erodionov.ru — другая.

Но что такое страница? Изначально весь Веб был построен на обычных страницах — у нас были документы, которые просто находились в Интернете. Как файлы Майкрософт Офиса, только по-своему: на открытых стандартах, а не закрытых от Майкрософта (попробуйте посмотреть исходник .docx-файла — сложная затея).

А в документах важно что? Разметка. Вы же не будете писать всё одним сплошным текстом, вам нужны абзацы, заголовки, цвета, ссылки, в конце концов. Всё это есть в HTML.

Теги в HTML

Разметка в HTML базируется на тегах — это элемент, который обволакивает (извините!) текст.

Несколько примеров:

<strong>важный текст</strong> и его брат <i>курсивный текст</i>
<p>первый абзац</p>
<p>
  второй <strong>абзац</strong>
</p>

Это всё превращается в:

важный текст и его брат курсивный текст

первый абзац

второй абзац

Теги могут вкладываться друг в друга, создавая дерево элементов. Правильное использование тегов — это семантика.

Какие вообще теги бывают? Они делятся на категории:

Хватит слов, пора верстать! Давайте соберём страницу с самого начала.

Первая строчка это всегда <!doctype html> — мы говорим браузеру что мы используем HTML. Доктайпы бывают разные, но мы используем последний из HTML5.

После мы открываем тег <html></html> — вся страница в нём и хранится.

Затем у нас тег <head></head> — этот тег нужен для браузера, там хранится служебная информация, которая не отображается на странице: например, тег <title>отвечает за заголовок страницы</title>, а <meta> (кстати, тег не закрывается) вообще общего назначения, мы к нему перейдем намного позже.

После хэд идёт <body></body> — вот здесь мы и пишем контент, который отображается на странице.

Собираем это всё!

<!doctype html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <p>Первый текст как первый малыш!</p>
  </body>
</html>

Задача:

В прошлом уроке мы сделали файл index.html, верно? Попробуйте начать верстать там — закиньте базовую разметку из примера выше. Поиграйтесь с тегами, не бойтесь экспериментировать. Не забудьте закоммитить и запушить в репозиторий!

Это всё, в следующем уроке про атрибуты HTML, про стилизацию через CSS и первое большое задание по, собственно, вёрстке.

Не забывайте задавать вопросы в чате — там обязательно помогут 💪🏻

Помните: нет глупых вопросов, есть лишь страх их задавать.