Теперь, после того, как вы посмотрели на красивое слово "ИНСТРУКЦИЯ" и я выпендрился тем, что я умею делать в CSS, мы можем начать...
На этой странице описаны некоторые базовые HTML и CSS элементы, которые в дальнейшем должны использоваться для форматирования текста, базовой разметки, верстки и стилизации всех элементов web-страницы. Здесь есть и базовые знания из JavaScript и jQuery, которые должны дать странице интерактивность и поведение. Если вы не захотите рассматривать CSS, то здесь есть раздел, посвященный Bootstrap – фреймворку, позволяющему макcимально быстро создавать адаптивные веб страницы, пользуясь только HTML. Кроме этого, в этом документе описаны не только базовые знания фронтенд разработки, но и начало бекэнда, но об этом позже...
Есть самонадеянная версия, что вам даже будет достаточно прочесть эту инструкцию (и используя её попробовать сделать что-то своими руками) для того, чтобы самостоятельно чему-то научиться (но это не точно).
Этот, если так можно выразиться, проект, есть моё видение идеи эффективного усвоения информации. Идеи, состоящей в том, что чем больше, лучше и детальнее мы объясняем (повторно излагаем) полученную информацию, тем лучше она усваивается и консолидируется в памяти. Поэтому, я отношусь к этому "сайту", как к некоему тренажеру в моём обучении. Итог: прошу строго не судить, но если очень хочется, то можно.

Введение

Итак, раз уж это какая-никакая, но, допустим, инструкция, в таком случае, поговорим о том месте, где можно писать какой-то код. Строго говоря, место, где можно писать какой-то код никто строго не регламентирует: всё вполне выполнимо и в любом текстовом редакторе на вашем компьютере. Здесь встаёт только вопрос удобства, оптимизации и эффективности вашего труда, а он в этом деле далеко не на последнем месте. Учитывая это, мы выберем специальную среду, специальное место, в нашем случае, приложение, которое позволит нам писать код. Это место называется IDE (Integrated Development Environment) — интегрированная среда разработки или просто среда разработки.
За свою скромную историю "айтишника" я пользовался двумя IDE — это Sublime Text и Visual Studio Code, но и та, и другая хороши. Sublime, к примеру, хорош своей простотой, минимализмом и "ненавязчивостью" в функционале. По моим ощущениям, он очень близок к обычному текстовому редактору, но с подсветкой синтаксиса и возможностью установки плагинов. VS Code хорош мощным функционалом по синхронизации изменений с внешними репозиториями (GIT), огромным сообществом разработчиков как самого приложения, так и программистов, которые сами работают в этой среде, а так же весьма и весьма гибкой настройкой. Но что самое приятное — VS Code полностью бесплатен. Строго говоря, горячо дискутировать над вопросом выбора IDE я не вижу большого смысла VS Code лучше, так как для меня это всё равно в каком-то смысле остается вкусовщиной, да и пришли мы сюда не за этим. Поскольку в последнее время я сам работаю в VS Code, то и рассказывать о начале работы тоже буду относительно этой среды. Мы сейчас опустим вопрос обширной пачки плагинов для комфортной работы (тоже доступны бесплатно), об этом можно и самостоятельно прочесть в интернете, что я рекомендую сделать в перспективе. Главное, что в VS Code и так по умолчанию встроен самый нужный для счастья плагин — это Emmet. Этот плагин позволяет автоматически дописывать за вас код, как попробуете сами — всё поймете. Теперь приступим.

Итак, для работы необходимо где-то взять IDE, иначе зачем я всё это говорил. Но сразу уточню, что раз уж вы дошли до того, что читаете эту инструкцию, то, я думаю, нагуглить то, что вас интересует вы вполне в состоянии, поэтому никаких ссылок я здесь приводить не буду. Скачать VS Code очень просто: вы пишете в поисковой строке "Скачать VS Code", переходите по первой ссылке и выбираете свою операционную систему. Далее следует установка — здесь всё как обычно, вы и так всё сами знаете. После успешной загрузки и установки программы, вы сразу можете приступить к работе.

Установив и открыв программу, вы обнаружите – перед вами самая настоящая IDE. Первое, что следует сделать — это создать репозиторий (общее хранилище) со всеми вашими файлами проекта — есть способ сделать это быстро и удобно. Для начала вы создаете папку где-то в дисковом пространстве вашего компьютера. Любую папку — она может называться как угодно, однако в программировании предпочтительнее называть любые файлы на английском языке. А дальше магия удобства: создав папку, вы просто перетаскиваете её в открытое окно VS Code. После этого программа определит, что в нее попала папка и позволит работать с ней. Далее вам нужно создать файл для HTML разметки.
Если вы обратили внимание, в левой части пространства VS Code есть вертикальное меню, где есть несколько значков: листы бумаги, лупа и так далее. У вас по умолчанию должен быть выбран первый, а если нет – нажмите на него. Откроется подменю, которое называется "Проводник". Ниже в нем находится структура вашего репозитория — все будущие файлы и папки, которые вы создадите и с которыми будете работать. Итак, вы должны перевести мышь в область проводника и в верхней его части нажать на иконку с листком бумаги и знаком "+". Если описание не слишком ясно – не торопитесь, посмотрите внимательнее. Одно я знаю наверняка одно: та кнопка, что вам нужна, находится прямо рядом с названием основной (корневой) папки вашего репозитория. Ищите. Нажав на кнопку "Создать файл", VS Code сразу предложит вам назвать его и вы немедленно называете его простым именем — "index.html". А .html, как можно догадаться, и есть формат документа языка разметки, который нам нужен. Voilà (вуаля), вы молодец и создали свой первый репозиторий и даже HTML-файл в нем. Теперь нам нужно сделать ещё огромную кучу всего, это еще даже не вершина айсберга... Теперь дело за малым, вы молодец, у вас всё прекрасно получается!

Создав файл в нужном нам расширении, вы окажетесь внутри него. VS Code умен и понимает, что если вы создали файл с каким-то расширением, то, скорее всего, вы хотите писать код именно на языке, которому это расширение и принадлежит. Удобно? Удобно. Идем дальше. Теперь, хвала небесам, у нас есть встроенный плагин Emmet, помните, я говорил выше? Благодаря нему мы можем сотворить еще одну небольшую магию. Нажмите на восклицательный знак, а затем на клавишу ENTER или TAB. Чудо! У вас развернулся базовый HTML шаблон, который должен выглядеть так:

А теперь не пугайтесь, я расскажу вам о том, что там написано, но для начала важно отметить один момент. Присмотритесь к структуре, которую вы только что создали. Вы можете заметить, что она состоит из элементов, которые заключены между символами < ;  и;   >. Эти элементы называются HTML-тегами или просто тегами. Некоторые (а в дальнейшем вы поймете, что почти все) имеют одинаковые (зеркальные) названия. То есть, зачастую есть так называемые открывающие теги, например, тег <body>, и у него есть закрывающий (зеркальный) брат — тег </body>, только у закрывающего, как можно заметить, перед названием тега ставится знак "/". Не все теги в HTML являются зеркальными, однако бо́льшая их часть — да. Этот принцип стоит запомнить, он важен.

Итак, первая строка — это <!DOCTYPE html>. Внимательно присмотритесь к тому, что там написано. Ключевое слово DOCTYPE в файле HTML — это декларация типа документа. Это называется DTD (Document Type Definition — описание типа документа). Указание этого элемента важно и даже необходимо для того, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, так как HTML существует в нескольких версиях. Кроме того существует еще и язык XHTML (EXtensible HyperText Markup Language — расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису (способу написания кода). Так вот, чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE html>.

Далее идет <html lang="en">. Как можно заметить, здесь применен тег <html> и он как раз-таки зеркальный. Внутри первого (открывающего) тега есть так называемый атрибут. Атрибуты используются для определения характеристик html-элементов и всегда помещаются внутри открывающего тега. Все атрибуты состоят из двух частей — это его имя и значение. Сразу скажу, что для и так большого количества тегов, существует не меньшее (огромное) количество самых разных атрибутов. В дальнейшем будут их примеры. Но возвращаясь к нашему разговору об <html lang="en">... Как можно заметить, внутри этого тега присутствует атрибут 'lang' со значением 'en'. Это так называемый глобальный языковой атрибут, который помогает определить язык элемента. К примеру, текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang. Браузер использует его значение для правильного отображения некоторых символов.

Далее идет тег <head>, что буквально переводится как "голова". Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, речь о некоторых из которых пойдет дальше. Они используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Иначе говоря, он предназначен для хранения служебной информации о странице. Тег <head> тоже является зеркальным и всегда располагается перед тегом <body>. Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Первым внутри тега <head> в нашей свежесозданной структуре находится тег <meta>. Это первый тег так называемых метаданных. Что такое метаданные? Это информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте. Тег <meta> не является зеркальным. Внутри этого тега есть атрибут 'charset' со значением UTF-8. Здесь всё просто: атрибут 'charset' — это атрибут выбора кодировки, ну а его имя, как не сложно догадаться — это само название выбранной кодировки. На всякий случай уточню, что такое кодировка. Кодировка — это соответствие между визуальными символами и числами. Кодировки необходимы, так как компьютеры созданы для работы с числами и не понимают текст.

Следующая строка — <meta http-equiv="X-UA-Compatible" content="IE=edge">. С тегом <meta> познакомиться мы уже успели выше, поэтому сразу перейдем к его атрибутам в этой строке. Первый атрибут — 'http-equiv' со значением 'X-UA-Compatible'. Атрибут 'http-equiv' — это эквивалент заголовка HTTP-сервера (однако, имеющий более низкий приоритет перед заголовком, генерируемым самим сервером). Информация, содержащаяся в нём, добавляется в заголовок отклика HTTP и отсылается клиенту перед самой передачей HTML-документа. Не вдаваясь в слишком глубокие технические подробности скажу, что эта строка важна для работы с различными версиями Internet Explorer. Скажу даже больше: чтобы вас не грузить слишком уж большим объемом технической информации, я даже не буду расшифровывать все тезисы, которые я ввёл. Если вам интересно максимально подробно рассмотреть функции этих атрибутов с их значениями (и всё прочее), вы всегда можете воспользоваться гуглом.

Итак наша следующая остановка – строка кода <meta name="viewport" content="width=device-width, initial-scale=1.0">. Здесь всё просто. Этот тег указывает браузеру на то, чтобы в качестве ширины области просмотра использовалась ширина экрана устройства, а не значение браузера по умолчанию, которое обычно составляет 980px. Короче говоря, это строка кода отвечает за, если так можно выразиться, базовый уровень адаптивности.

Следующий тег – <title>. Здесь всё еще проще. Обращали внимание на то, что когда какая-нибудь вкладка открыта в вашем браузере, то она подписана каким-то названием, относящимся к теме сайта? Как правило, там буквально написано, что за сайт перед вами. К примеру, если открыть сайт youtube.com, то там буквально будет написано YouTube. В общем, если вы хотите как-то назвать ваш сайт на вкладке – пишите это в теге <title>.

В качестве бонуса к тегу <title> можно описать еще одну строку кода, которая косвенным образом к нему тоже относится. Сразу скажу, что этой строки нет в созданном вами базовом шаблоне. Это строка – <link rel="shortcut icon" href="/instruction/img/ico.png" type="image/png">. Как можно заметить, у нас есть тег <link>, а в переводе с английского "link" – это ссылка. Из этого можно сделать непротиворечивый вывод, что эта строка кода является неким путем (ссылкой) на какой-то внешний ресурс. Почему я сказал, что эта строка косвенным образом относится к тегу <title>, так это потому, что в данном случае она отвечает за присоединение иконки на ту же вкладку в вашем веб-браузере. То есть, рядом с названием сайта на вкладке, можно легко разместить какое-либо изображение, которое будет являться символом вашего сайта. У этого тега-ссылки, как можно заметить, есть атрибут 'rel' – relationship (отношение). Он обозначает, что это за ссылка и на какой адрес она ведет. Работает это следующим образом: когда ссылка направляет пользователя на адрес, атрибут рассказывает поисковым системам, почему ссылка ведет на этот адрес. Например, ссылаться можно на файл стилей, который взаимодействует со страницей или, как я сказал выше – на иконку (логотип) сайта. У этого атрибута есть значение 'shortcut icon', что в переводе означает – значок ярлыка. Далее идет атрибут 'href' – Hypertext Reference — гипертекстовая ссылка, а в виде значения значения этого атрибута буквально выступает путь к тому, к чему ведет эта ссылка: будь то внешний URL или локальный путь к картинке. Дальше идет атрибут 'type', который сообщает браузеру, к какому типу относится элемент. В данном случае у него указано значение 'image/png', а это означает, что используется тип изображения (image) в формате png.

И последний тег, который есть у нас в шаблоне – это тег <body>. В этом теге находятся вся та информация, которую мы готовы разместить на нашей веб-странице – её и увидят пользователи. Тег, как можно заметить, зеркальный.

Теперь найдите созданный вами файл index.html у вас на компьютере и откройте его в удобном вам браузере. Серьезно, просто тыкните на него два раза. Это, как вы помните, файл вашей веб-страницы, HTML-код которого мы и будем в дальнейшем писать. Открыв этот файл в вашем браузере и разместив вкладку с ним рядом с этой инструкцией для удобного переключения между ними, вы можете снова вернуться в VS Code, чтобы начать писать код. Вот и всё, вы полностью подготовлены для начала работы. У вас есть среда разработки, репозиторий, где вы будете хранить файлы и папки вашего разрабатываемого проекта и даже удобный стартовый шаблон. А далее мы должны чем-то наполнить нашу веб-страницу, что делается по всё той же технологии – открывающих и закрывающих тегов, только уже других. Речь об этом и пойдет далее... Важно уточнить! Написав какой-то код просто нажмите ctrl + s на Windows или cmd (command) + s на macOS для сохранения. Затем, перейдите в ваш браузер, где открыт файл index.html и нажмите кнопку "обновить", кнопку F5 на клавиатуре, если вы работаете на Windows или cmd + R на macOS.

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