Начнем мы именно с внешнего вида. Почему так? Потому, что нужно понимать как у нас будет выглядеть наш ресурс, построенный на будущем фреймворке. Какие будут части у него, какие страницы. А за всё это отвечает именно HTML.
Для начала чуть-чуть теории.
HyperText Markup Language — «язык гипертекстовой разметки» — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Это вот нам Вики вещает.
Поясню про HTTP/HTTPS. Это как именно браузер будет получать информацию для отображения. Представьте, что вам надо получить кучу справок - для любой ситуации - не суть. И вот, в каких-то организациях вам нужно предоставить не только паспорт, но и второй документ, третий, четвертый... А в каких-то организациях - только паспорт, да и тот никто толком не смотрит. HTTPS и HTTP - разница такая же. HTTPS - это когда вы приходите в солидную организацию, которая четко следует процедуре проверки и гарантирует, что ваши данные остануться именно вашими. Злоумышленник их не получит. HTTP - "шаражка-конторка": приходи кто хочет, бери что хочет. Разобрались? Будем считать, что да. Но так как в одном примере может быть не ясно, то остались вопросы - пишем в комментах!
Теперь проще и без заумной терминологии. Вы думали, что происходит, когда вы открываете сайт? Как в браузере появляются тексты, картинки и прочее? По пунктам это происходит так:
- Вы вводите адрес сайта и нажимаете Enter;
- Ваш браузер отправляет этот адрес на сервер вашего провайдера;
- Тот обращается к нужному серверу, на котором физически находится код нужного вам сайта;
- Код запрашиваемого сайта обрабатывает ваш запрос и возвращает документ для отображения;
- Ваш браузер получает этот документ через сервер вашего провайдера и отображает его.
Сейчас конечно очень-очень примитивно было - максимально крупными мазками.
Итак, что же это за документ? Это и есть HTML. Про работу с консолью мы уже говорили. Теперь проведем небольшой экскурс по его структуре.
Основа структуры HTML
Основной элемент любого HTML-документа - тэг. Так называется слово, заключенное между знаками меньше и больше. Причем, тэги могут быть "одинарными" - к примеру ниже это тэг meta. А могут быть "двойными" - к примеру title. Обратите внимание, что в "двойных" тэгах, закрывающий пишется как открывающий, но с косой чертой после знака меньше.
Как и любой документ, он состоит из нескольких частей:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первый документ</title>
</head>
<body>
</body>
<footer>
</footer>
</html>
head - заголовок документа. В нём мы указываем специальные характеристики документа. В частности, в приведенном примере, говорится, что данный документ будет работать в кодировке UTF-8 (в этой статье подробней расписано что это). Кроме того, в нём указано, что на вкладке в браузере надо написать "Первый документ".
Что такое "вкладка"? - посмотрите на верх браузера. Видите написано "Дзен-студия...." - речь как раз про этот текст.
И тут же, при необходимости, говорится браузеру какие CSS загрузить. Именно здесь указывается насколько красивым хотелось бы сделать сайт.
body - здесь мы создаём сам сайт. Именно внутри тэга body создается сайт, который мы видим на экране монитора.
footer - самый редко используемый блок в HTML-документе. Вполне можем обойтись без него. Тем не менее, его использование логично с точки зрения сохранения целостности структуры документа. В footer оптимально поместить загрузку на страницу JavaScript. В этой части подключается "оживляж" сайта.
Хорошей практикой считается именно такая последовательность: стили (CSS) подгружаются вверху страницы, JavaScript - внизу. Это делается для того, чтобы даже в случае, если что-то пошло не так со скриптами в футере, сайт отобразился нормально. Да, работать не будет. Но как минимум - будет нормально выглядеть.
Основной принцип построения HTML-документа можно представить себе как лист в клеточку.
Простая задача: возьмите листок в клетку и полностью закрасьте его прямоугольниками разных цветов. Условие: прямоугольники должны быть чётко по линиям. Представили? Это и есть структура HTML-документа. Да, с помощью CSS можно обойти это условие. Но речь сейчас именно про чистый HTML.
Основные понятия в HTML
С тэгами мы разобрались. Значит остается запомнить всего несколько вещей для того, чтобы создать свою первую страницу.
- идентификатор - это уникальный признак тэга в рамках страницы и предназначен для четкой идентификации элемента внутри HTML-страницы. Таким образом, на одной странице не должно быть нескольких элементов с одинаковыми id. Фатальной ошибки конечно не будет, но в консоли вы точно увидите предупреждение - оно пишется жёлтым цветом. Проблемы могут возникнуть при подключении JavaScript. Но об этом поговорим позже.
- имя - это имя тэга - name. В отличии от идентификатора оно может быть в нескольких экземплярах на одной странице. Предназначено оно для передачи данных на сервер.
- класс - указание, какие свойства CSS применить к этому тэгу: как раскрасить, нужно ли выделить рамкой, какой шрифт и много-иногое другое. Пишется как class.
стиль- пишется как style указание какие свойства CSS применить к этому тэгу.
Вариант такого кода (в качестве примера )
<p style="color: red;">Text</p>
Никогда так не делайте!
Это плохая практика, ведущая к массе проблем! Да, на страницах это используется - можно встретить часто. Однако делать так крайне не рекомендуется: пусть лучше вы будете иметь на один файл больше в проекте, но избежите "наслоения" стилей и вопросов "а почему оно так отображается".
- аттрибут - как правило, это некий признак, содержащийся внутри тэга. Пишется как имя_аттрибута="значение_аттрибута". При этом аттрибуты не обязательно должны быть из числа заявленных в спецификациях. Вы можете назначать любые для собственных нужд.
В итоге это будет как-то так для поля ввода логина при авторизации на сайте:
<input type="text" id="login" name="auth" class="auth_field" _a="1">
Что мы тут видим? Это будет поле ввода (input), с аттрибутом type (предопределенный аттрибут, в котором указываем тип - text - текстовое поле), именем auth, стилизовать классом auth_field и для собственных нужд мы добавим аттрибут _a, равный 1.
Сложно? В принципе, если внимательно посмотреть, то никаких страшных слов типа призывания демонов тут нет. Все слова достаточно понятны. Более того, их количество крайне ограничено, так что запомнить не сложно.
Это как описывать знакомого человека: у него есть имя (id), адрес (name), любимая одежда (class) и еще у него есть... а что угодно и в любом количестве - машина, квартира, дача, домашний питомец (это всё аттрибуты).
Ну, пожалуй для общего ознакомления достаточно будет.
В следующей статье рассмотрим основные тэги в HTML и попробуем сверстать первую страницу.
Все статьи попадают в "Оглавление канала". Не пропускаем новости!
А пока что ... 😄