Знакомство с HTML и CSS. Часть 1: Структура HTML-документа — Тренажёр HTML Academy
Не смотря на то, что вводный блок «Знакомства» я прошел, мое знакомство я продолжаю в следующем блоке. Разберёмся с деталями структуры HTML, базовыми тегами и оформлением.
В этом блоке достаточно много практики — в конце каждой части «Испытание» и к каждой части минимум по 4 практических задания. Это радует, люблю практические задания, в прошлом блоке их было маловато
Первая часть посвящена самым основным тегам HTML с которых вообще начинается работа с вёрсткой. В тренажёре с ходу нам рассказывают о теге, который отвечает за объявление браузеру типа документа:
<!DOCTYPE html>
Долгое время не могу понять нафига вообще объявлять тип документа браузеру в коде документа с расширением .html, масло масленое. В тренажёре нам объясняют, что можно задать устаревший тип документа, но… в общем, я сейчас не хочу на это акцентировать внимание.
Далее приступаем к основе HTML — теги которые формируют основной костяк страницы это <html>, <head> и <body>. Первый отвечает за «рамки» html-кода, то есть вся структура кода должна быть внутри тегов <html> ... </html>, возможно, есть какие-то исключения, но нам про них в самом начале знать не обязательно.
Голова
В тег <head> ... </head> записывают служебные данные страницы, т. е. то, что напрямую не отображается в браузере, но крайне важно для её работы. Например, одиночный тег <link> подключает к странице внешние файлы, именно его я «потерял» в предыдущем блоке в части про CSS.
<head> <link href="адрес_файла_стилей.css" rel="stylesheet"> </head>
Атрибут href понятно что далеат, а атрибут rel помогает браузеру определить для чего этот файл.
В тег <title> ... </title> вписывается заголовок страницы, он отображается во вкладке браузера и именно он отображается в результатах поиска, если эта страница каким-то образом попала в него.
Одиночный тег <meta> с помощью своих различных атрибутов, позволяет указать различную служебную информацию о странице, чтобы браузер и поисковые роботы могли «легче» ее воспринять. В тренажёре дают сразу несколько примеров, я наверное запихну их в один кодовый блок:
<head> <!-- кодировка страницы, utf-8 самая распространённая --> <meta charset="utf-8"> <!-- ключевые слова, помогающие поисковому роботу с индексацией --> <meta name="keywords" content="важные, ключевые, слова"> <!-- описание страницы, которое иногда показывается под title в поисковой выдаче --> <meta name="description" content="краткое описание страницы"> </head>
Да, кстати. В предыдущей статье очень предательски поехали все комментарии в кодовых блоках. При написании статьи появляется горизонтальный скролл, не показывая никаких переносов. Только при публикации выясняется как все через жопу, поэтому здесь и далее я, наверное, буду писать только многострочные комментарии над объектом.
UPD. Пофиксили :D
Туловище
Внутри тега <body> ... </body> находится вся видимая часть страницы. У видимой части тоже есть своя вложенная логическая структура, которой, кстати, очень многие пренебрегают. Я тоже о ней узнал не так давно, а уж в точности разобраться с ней я до сих пор не мог.
В тег <header> ... </header> вписывают вводную часть страницы или «шапку», чаще всего именно сюда вписывают навигацию или «меню» сайта или страницы с помощью тега <nav> ... </nav>, а еще иногда поле поиска, иконки соц. сетей, корзину и так далее.
Тег <main> ... </main> обозначает основное содержимое страницы. Именно не «все остальное» содержимое, а конкретно основное — та уникальная в рамках сайта информация для которой эта страница была создана. Это важный смысловой тег, применение которого не всегда может быть понятно.
Тег <footer> ... </footer> описывает заключительную часть страницы или «подвал», чаще всего сюда записывают дополнительные ссылки для перелинковки по разделам сайта, различную юридическую и контактную информацию. Кстати, не только всей страницы – этот тег можно использовать как заключительную часть какого-либо блока, если это необходимо.
Тег <section> ... </section> обозначает крупный смысловой раздел страницы. Чаще всего страница состоит из нескольких разделов или блоков и именно этот тег помогает их определить.
С этими тегами всё более-менее понятно, они просто формируют смысловую структуру страницы, которая упрощает жизнь как верстальщику, так, в итоге, и пользователю и еще, конечно же, поисковым роботам. Но с тегами далее у меня лично возникли проблемы с … пониманием того где их использовать.
Тег <article> ... </article> — в тренажёре нам пишут, что это цельный и самостоятельный фрагмент информации, который можно выдернуть из контекста страницы и он всё равно будет понятен. В этот тег может быть вписан <main>, что логично — основная информация страницы должна быть самостоятельным фрагментом.
При этом на странице может быть несколько <article>, например, на странице есть раздел под названием «Интересные статьи», в котором находится несколько карточек статей, в которых есть заголовок, превью и краткое описание статьи. Такая карточка тоже самостоятельный фрагмент информации — если поместить его где угодно, даже не на сайте вообще, всё еще будет понятно о чем он.
Другой тег с которым возникли проблемы с пониманием — это тег <aside> ... </aside> — в тренажёре написано, что этот тег включает в себя что-то дополнительное, не связанное напрямую с основным содержанием страницы.
На мой взгляд, не совсем корректно написано, т. к. можно подумать, что применение только одно — какая-то боковая панель с дополнительной инфой. На самом деле <aside> я бы описал одним словом — «кстати, ...».
Кстати, вы знали, что у Плутона вытянутая эллиптическая орбита?
Этот блок выше, типичный <aside> — он может быть как внутри <article>, так и внешним элементом типа боковой панели. Это именно означает «кстати, а у нас еще тут есть вот это» на странице или в другом смысловом блоке.
Основная текстовая структура страницы создаётся из заголовков разных уровней от <h1> </h1> до <h6> </h6>. Причем <h1> – заголовок верхнего уровня, буквально должен обозначать заголовок страницы и, следовательно, должен быть только один на странице.
Для разметки параграфов используется тег <p> </p>, причем по хорошему в один абзац стоит записывать одну смысловую структуру. Это довольно сложная и спорная тема, но главное не злоупотреблять тегом <p> для обозначения нескольких отдельных строк.
Практика и Испытание
В этой практике, точнее в Испытании, я внезапно заметил «Видеоразбор», который по сути «даёт списать» — там буквально объясняют решение задачи. Задачи пока что тривиальные, поэтому не вижу в нём особого смысла, но если эти видеоразборы будут и дальше в сложных для понимания вопросах, то чудесно.
Испытание помогает закрепить все вышеописанные теги, где нам показывают наглядно как их можно использовать. А вот в практике нам сходу показывают интересную вещь. В первом задании нам нужно проставить параграфам соответствующие языку текста в них атрибуты lang и, в общем-то, дающие понять, что даже к этому атрибуту можно привязать стили, правда не показывают как — langs.css скрыт. Ну да ладно.
Остальные задания помогают разобраться с заголовками и немного со стилями, точнее с классами, а последнее задание показывает что может быть если не проставить кодировку в <meta>.
Я решил попробовать разбить статью по частям, так как написав даже 2 из 5 частей получилась колбаса на 20+ скроллов вниз, при этом я честно говоря устаю столько строчить не публикуя ничего. Не хочу перегореть раньше времени и, возможно, изменив немного формат я смогу сохранить желание их писать.
Да, я это делаю для себя, но тем ещё хуже — самого себя легче убедить всё бросить, особенно когда нет особого опыта в написании такого объема текста.
Тому кто каким-то волшебным образом попал на эту страницу и дочитал до этого момента — огромное спасибо за внимание. Если вы здесь впервые, а скорее всего так и есть — в этой статье написано обо мне и как я до такой жизни докатился, а в этой немного написано почему я вообще сейчас прохожу эти тренажёры.
Ссылки на другие статьи по тренажёрам HTML Academy:
Знакомство с Веб-разработкой
Знакомство с HTML и CSS. Часть 1 <- Вы здесь
Знакомство с HTML и CSS. Часть 2: Разметка текста
Знакомство с HTML и CSS. Часть 3: Ссылки и изображения
Знакомство с HTML и CSS. Часть 4: Основы CSS
Знакомство с HTML и CSS. Часть 5: Оформление текста
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
...
Остальные статьи можно посмотреть у меня на главной странице блога.
Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!
Мой Twitter
Мой Telegram
Мой Паблик ВК
Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!