Эмоционально верстаем: HTML

Современный фронтенд - настоящий хаос и вакханалия из технологий, инструментов, фреймворков, языков программирования, подходов и библиотек. Новичок, погружаясь во все это, может чокнуться головой, подстричься налысо и уйти в монастырь. Самое безумное - это скорость появления нового и изменения существующего. Стоит только-только разобраться с каким-то фреймворком - как выходит или его новая версия, которая ломает привычный уклад, или фреймворк-соперник, который заявляет о себе как "убийца всех существующих фреймворков".

Язык программирования JavaScript - давно не единственный, на котором пишут фронтенд. К нему в помощь прилетели TypeScript от Microsoft и Flow от Facebook. Но эти ребята больше о вводе типизации для JS. Помимо них, существуют Dart, Kotlin, Reason и WebAssembly, на которых тоже вполне можно кодить для фронта.

CSS также отдельная песня. В современном мире можно стили хреначить по-старинке - все в одном файле style.css, хотя лучше использовать различные методологии (BEM, SMACSS, ESS) или инструменты (CSS Modules, LESS, SASS, Post CSS, CSS-in-JS). До кучи сам CSS не стоит на месте и периодически добавляет новые фичи.

Но какой бы язык программирования вы ни выбрали, как бы вы не писали CSS, без макета, без скелета сайта это все не имеет значения. И имя этому скелету - HTML.

Что такое HTML

Давайте заглянем в нашу добрую и полезную (хотя кое-кто так не считает) Википедию:

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Первое, что стоит выделить: HTML - это язык разметки, НЕ программирования (хоть и говорят HTML-код, но это не о программировании). На HTML не пишут программы в Интернете, с его помощью верстают сайты.

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

Также мы видим, что язык стандартизированный. Во-первых, стандартизацией занимается "Консорциум Всемирной паутины" (W3C - World Wide Web Consortium), во-вторых, это нужно для упорядочивания работы браузеров. Если кто не в курсе, браузеров до жопы, и если каждый из них будет плодить свои кастомные вещи, нафиг не всравшиеся в других браузерах, жить станет очень больно, особенно разработчикам. Поэтому существует W3 консорциум, чтобы все жили в мире и согласии. И чтобы HTML и CSS развивались в ногу со временем.

Как только консорциум выплевывает новые полезные штуки для HTML и CSS, создатели браузеров тут же (ну или чутка погодя) добавляют поддержку этих штук в свои браузеры, чтобы пытливые веб-разработчики со слезами радости на глазах кинулись экспериментировать с новинками.

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

Где смотреть примеры

Сначала я думал просто вставлять скриншотики кода в текстовое описание здесь, но потом подумал, что все это хрень собачья и устарело давно. Раз уж мы тут все собрались научиться фронтенду, давайте сразу учиться смежным вещам, без которых также хрен кто на работу возьмет. Я говорю о git и GitHub.

По этой ссылочке вы попадете в мой репозиторий, в котором я буду собирать весь код, написанный в течение цикла статей о верстке. Вы можете смотреть на код прямо на GitHub, а можете клонировать этот репозиторий себе на локальный компьютер и поиграться с ним (рекомендую именно этот вариант). Вы должны привыкать работать с кодом самостоятельно, а не просто залипать на картинки, так в голове ничего не останется, я проходил через это.

Клонируете репозиторий, открываете папку "layout-examples" в IDE (VS Code, WebStorm) или текстовом редакторе (Sublime, Atom, NotePad++, да тот же Блокнот сойдет) и внимательно, параллельно с этой статьей, изучаете, что в этой папке есть. Также вам нужно открыть файл "index.html" в браузере, чтобы посмотреть на результат и связать с ним написанное в файлах.

Если возникнут трудности в работе с git и GitHub, пишите мне (@lex_robot) или в бота обратной связи (@emotional_feedback_ro_bot). В случае массового непонимания напишу отдельную статью по работе с этими ребятами.

HTML теги

Откройте файл "index.html" в папке "src/pure-html-example" и посмотрите на его содержимое. Даже в случае отторжения мозгом той дичи, которая там разместилась, вы все равно можете обратить внимание на блоки кода, выглядящие так:

<blabla>trulala</blabla>

<blabla></blabla> - это HTML теги, можно сказать, главная составляющая HTML. Именно они интерпретируются браузером в какие-нибудь элементы, по типу кнопок, полей для ввода информации и так далее. Они бывают открывающие (<blabla>) и закрывающие (</blabla>). Также существуют HTML теги без закрывающего братишки, то бишь они сами по себе сильные, независимые, с 40 кошками...

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

Внутри тегов может быть как текст (trulala), так и другие теги. Собственно, весь смысл верстки - это разместить правильно кучу тегов так, чтобы сайт получился красивым. А красивый сайт и маме не стыдно показать.

Тегов довольно много, я разместил ссылку на их полный список на странице "index.html". В статье хочу акцентировать внимание на следующих тегах:

1) <!DOCTYPE html> - самый важный тег. Без него браузер просто не поймет, что ему делать с полученным документом. Для HTML документов всегда указывается атрибут (о них далее) "html".

2) <html></html> - тег верхнего уровня. Внутри него размещается HTML-код всего документа.

3) <head></head> - тег верхнего уровня. Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри <head> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем.

4) <meta> - тег заголовка документа. Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. В нашем случае в <meta> указана кодировка документа UTF-8.

5) <title></title> - тег заголовка документа. Используется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.

6) <body></body> - тег верхнего уровня. Предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри <body>. К такой информации относится текст, изображения, таблицы, списки и др.

Это основные теги, которые вы всегда должны использовать при написании HTML-кода. Хотя без некоторых код все же будет работать, просто принято каркас сайта писать именно так. Что называют "семантически правильным" способом.

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

HTML атрибуты

Еще одна важная составляющая HTML. Каждый тег содержит в себе набор атрибутов, которые задают ему различный вид, меняет поведение, добавляет какую-то особенность.

Возьмем для рассмотрения такой кусок из "index.html":

<a href="pages/1.html">First</a>

Мы видим тег "<a></a>", который превращается в ссылку после интерпретации документа браузером. Но как тегу сказать браузеру, куда именно уведет ссылка при нажатии на неё? С помощью атрибута "href". В нем указывается адрес, на который мы перейдем после нажатия на ссылку. В данном случае мы уйдем на локальный файл "1.html", который располагается в папке "pages".

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

1) style - атрибут для задания стилей тегу. Разумеется, CSS не единственная хрень, которая может задать внешний вид элементам. Элементы сами вполне могут справиться с этим, используя атрибут "style". Например, здесь:

<aside style="float: left; margin-left: 20px;">

я задал тегу "aside" выравнивание по левой стороне ("float: left") с внешним отступом слева, равным 20 пикселям (margin-left: 20px). Прикол "float" в том, что элемент, которому это свойство указано, будут обтекать соседние элементы. Собственно, поэтому мы видим меню с ссылками слева, а основной контент справа. Как вы понимаете, для небольшого количества стилей это приемлемо, но в реальности очень редко элементам задают стили этим способом, CSS в этом плане гораздо удобнее.

2) class - атрибут для задания имени класса элементу. Необходим для применения CSS. Разберем подробнее в следующей статье.

3) id - атрибут для задания уникального идентификатора элементу. Также используется при применении CSS. Разберем подробнее в следующей статье.

4) onclick - атрибут для задания функции обратного вызова (callback) при нажатии на элемент. Подробнее будем разбирать в цикле статей о JavaScript.

В принципе, знакомство с тегами и атрибутами на этом можно закончить.

Итого

Поздравляю, сегодня вы прикоснулись к замечательному миру фронтенда. Как вы поняли, даже по одной верстке информации жопой жуй. Но от этого никуда не деться - нам дают огромное количество инструментов, чтобы мы могли создавать все, что взбредет в голову. Современный веб - это не только статическая информация, это целая вселенная, в которой легко потеряться. Но мы будем познавать её постепенно, не торопясь, захватывая самые важные вещи поначалу, оставляя в закладках полезные ссылки и материалы.

Из этой статьи вы должны были сохранить в закладках сайт http://htmlbook.ru - это один из самых полных и полезных справочников по HTML и CSS. Разумеется, есть и другие, и я о них тоже скажу, но для первого знакомства htmlbook с головой хватит.

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