Продвинутый HTML и CSS. Часть 1 — Тренажёр HTML Academy

На время отойдем от программирования на JS и PHP и вернёмся к нашей любимой вёрстке, к HTML и CSS. Мы прошли "начальный" уровень тренажёров и теперь погружаемся в нюансы.

Этот блок не первый в «среднем» уровне тренажеров, но судя по пройденному недавно интенсиву, порядок блоков вообще условный. Да и в блоке по PHP встречались ссылки к последним блокам, так что порядок не порядок.

Итак, блок «Продвинутых HTML и CSS» включает в себя аж 8 частей, это в два раза больше чем были по JS или PHP. В каждом блоке минимум по одному испытанию, а кое-где даже по три. И, внезапно, есть пару «Вызовов», это которая практика.

Я, правда, все это немного сокращу, так как там есть части типа «Формы. Знакомство» и «Формы. Погружение» — две части о формах, которые я запихну в одну. Аналогично еще с селекторами. В любом случае всего навалом. Приступаем!

Возможности HTML и CSS

В этой части повторно проходимся по всем основным тегам HTML. Часть из них мы видели в «Знакомствах», часть подсмотрели в приложении для самообучения. Сюрпризов здесь мало будет. Разве что, чуть позже поговорим про подключение нестандартных шрифтов.

Итак, что мы вспоминаем в этой части:

<header> — «шапка» или вводная часть страницы или раздела;
<footer> — «подвал» или заключительная часть страницы или раздела;
<main> — основное, уникальное содержимое страницы;
<section> — смысловой, логический раздел или контейнер страницы;
<article> — самостоятельная, независимая часть страницы или сайта, которую можно повторно использовать или распространить;
<aside> — раздел с содержимым косвенно, не напрямую связанный с основным содержимым страницы;
<h1>-<h6> — заголовки для страницы, разделов, структурирования текста;
<nav> — раздел навигации по сайту или странице.

Также упоминается <!DOCTYPE html> — задаёт правильный тип документа, но в части пропускаются главные теги <html>, <body>, <head> и все теги внутри него. Еще забыли про <p> и все строчные теги. Видимо, их мы уже должны помнить по умолчанию.

Зато еще вспомнили про <time> — строчный элемент для указания даты и времени, вместе с его атрибутом datetime="" для указания времени в «машиночитаемом» формате.

Еще мы вспоминаем про <figure> — цельный, независимый блок с демонстрационным материалом — картинки, блоки кода, графики и т. д. Кстати, в такой формулировке он близок к <article>. Естественно <figcaption> мы тоже вспомнили — пояснение к содержимому в <figure>.

Из относительно новых, по крайней мере для тренажёров, это теги для вставки видео <video> и аудио <audio> контента и их вспомогательный тег, который помещается внутрь них — <source>, он позволяет указать разные источники с разными форматами для одного элемента.

Атрибутов у них целая пачка, все перечислять не будем, выделим общие:

controls — при наличии атрибута отображается панель управления;
preload — задаёт режим предзагрузки источника;
autoplay — очевидно, авто-воспроизведение контента при загрузке;
src — источник контента, может применятся как к элементам <video> и <audio>, если формат один, так и к <source>, если надо задать несколько источников и форматов.

Кстати, я подсмотрел в гугле, что есть еще элемент <picture>, который работает примерно также, но для изображений, хотя имеет другие атрибуты. Не будем на нём останавливаться.

Подключение шрифтов

Достаточно внезапно, в этой части посреди воспоминаний нам рассказывают про подключение нестандартных шрифтов к сайту. Делается это двумя способами.

Первый способ с использованием тега <link>, в котором мы указываем, как бы, запрос к сервису шрифтов. Например, таким сервисом является Google Fonts и загрузка шрифтов Roboto будет выглядеть примерно так:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
      type="text/css">

В запросе можно разглядеть какую font-family мы хотим и какие конкретно начертания, в нашем случае 400 Regular и 700 Bold.

Второй способ с помощью CSS-правила @font-face, в котором можно указать несколько источников откуда браузер может достать шрифт. В том числе с компьютера пользователя, если он у него установлен или, в крайнем случае, с сервера где расположен сайт.

Выглядит правило примерно так:

@font-face {
  font-family: "Roboto"; /* название шрифта */
  src:
    local("Roboto Regular"), /* проверяет наличие на комьютере */
    url("roboto.woff") format("woff"); /* загружает с сервера */
}

Насколько я понял, формально способ один — так или иначе подключение работает через @font-face, первый способ работает для внешних сервисов, как бы в упрощенном формате.

Испытание

В этой части одно испытание, достаточно простое — нужно применить все структурные теги, которые мы вспомнили выше и подставить правильные классы.

Таблицы

В тренажёрах Академии мы с таблицами еще не сталкивались, поэтому быстренько пройдемся по ним.

Таблица обозначается тегом <table> и все элементы таблицы указываются внутри этого элемента. Внутри таблицы задаются её строки с помощью тега <tr> — расшифровывается как «table row». В свою очередь внутри строк задаются ячейки с помощью тега <td> — «table data», которые также играют роль столбцов.

Сам контент указывается в ячейках, то есть внутри элемента <td>. Простая таблица две строки и два столбца (2 на 2), выглядит вот так:

<table> <!-- начало кода таблицы -->
  <tr> <!-- 1-я строка -->
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
  </tr>
  <tr> <!-- 2-я строка -->
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
  </tr>
</table> <!-- конец кода таблицы -->

Помимо базовых тегов, есть дополнительные, которые упрощают чтение и в каком-то смысле вёрстку таблицы. Они достаточно просты по смыслу:

<th> — ячейка-заголовок, «table header», их используют, например, для обозначения ячеек описывающих какие данные будут в указанной строке или столбце, текст внутри них по умолчанию центрирован и выделен жирным начертанием;
<caption> — заголовок всей таблицы, указывается сразу после открывающего тега <table>, но с помощью свойства caption-side можно явно задать его расположение;
<thead>, <tbody> и <tfoot> — используются для группировки нескольких строк <tr>, для заголовка, основной части и «подвала» таблицы соответственно.

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

Стилизация таблиц

К элементам таблицы применяются большинство базовых CSS свойств, к которым относятся и декоративные color, background, и текстовые font, и размерные width, height, и другие.

Но касаемо рамок border есть небольшой нюанс — рамки по умолчанию не пересекаются. За это отвечает специальное для таблиц свойство border-collapse, которое применяется к таблице <table> и у которого два значения:

Взял с developer.mozilla.org

Также применимы свойства padding, но работают они не совсем очевидно, хотя логично. Если применить padding к ячейкам <td> — будет внутренний отступ от контента ячейки до её границы, если применить к самой таблице <table> — отступ будет от ячеек до границы контейнера таблицы.

Чтобы задать внешний отступ между границами ячеек нужно использовать свойство для таблицы border-spacing. При этом, отступы не работают вместе со свойством border-collapse: collapse, так как в этом случае все границы совмещены.

К ячейкам еще применимы свойства выравнивания — text-align для выравнивания содержимого по горизонтали и vertical-align по вертикали.

«Объединение» ячеек

Отдельного внимания заслуживают специальные атрибуты ячеек, которые позволяют указанной ячейке занимать пространство нескольких ячеек — rowspan и colspan.

Это именно атрибуты тега, а не свойства, поэтому указываются не в CSS, а в вёрстке к нужной ячейке. В атрибут пишется число ячеек которое нужно занять в строке rowspan или в столбце colspan. Проще показать на картинке:

При этом важно понимать, что ячейки не «поглощают» соседние, а выталкивают лишние ячейки вправо. На примере последней таблицы, где мы указали colspan="2" rowspan="2", если не удалять лишние ячейки, то они будут вытолкнуты по своей строке вправо:

То есть это работает не так как, например, в Excel. Разбираться с этими span’ами это, конечно, отдельный мазохизм при вёрстке таблиц.

Испытания

В этой части аж три испытания! Причем идут они не один за другим, а закрепляя несколько пройденных уроков. То есть да, в этой части было еще три «под-части».

Задачки построить и стилизовать таблицы, сначала лёгкую практически без стилей:

Вторая чуть посложнее с использованием дополнительных тегов и атрибутов colspan и rowspan:

И последняя сложная таблица со стилизацией, разными выравниваниями и всем остальным:

Формы

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

Итак, формы обозначаются тегом <form> — все элементы формы должны быть указаны внутри этого элемента. Ну или почти все — об этом чуть позже. У тега формы <form> есть два обязательных атрибута:

action — указывается адрес отправки формы или если точнее адрес исполняемого файла отправки;
method — задаёт метод отправки — get, который посылает данные формы через сформированный URI (грубо говоря, через ссылку), и метод post, который… я сам не совсем понял чего делает, но работает по другому.

Большинство полей ввода данных в форме обозначаются одиночным тегом <input>, а его тип указывается в атрибуте type="". Также обязательным для полей является атрибут name="", который задает его имя, и желательным, но уже не обязательным атрибут id="", который нужен для связи поля, например, с его подписью.

Подпись для поля обозначается тегом <label>. Для того чтобы связать поле с его подписью нужно либо заключить само поле <input> внутрь тега <label>, тогда поле будет дочерним элементом и явно связан с подписью. Либо, и это зачастую значительно удобнее, связать их с помощью атрибута for="" который указывается в <label>, а значение атрибута вписывается id связываемого поля. Да, id желательно указывать в том числе для этого.

<label for="city">Ваш город</label>
<input type="text" name="city" id="city">

Поля формы

Перейдем непосредственно к полям. Я не знаю все ли указаны в тренажёре, но я уверен, что как минимум большинство. Начнем от простых и понятных, к более сложным и комплексным.

Текстовое поле type="text" — самое простое поле, устанавливается по умолчанию для <input>, даже если не задать ему атрибут type="text". Базово сюда можно вводить любую текстовую информацию, а с помощью атрибута value="" можно задать значение по умолчанию.

Поле ввода пароля type="password" — заменяет все символы при вводе на звёздочки *, по умолчанию тоже можно вводить любые символы.

Поле поиска type="search" — специальное поле для форм поиска, отличается только наличием крестика, которое сбрасывает введённые символы. В остальном ничем не отличается от обычного текстового поля.

Скрытое поле type="hidden" — поле которое не отображается визуально, но обычно хранит какие-то скрытые данные, который отправляются формой вместе с остальными. С помощью таких полей, в том числе, делают так называемые honeypot — ловушки от спама.

Чекбокс type="checkbox" — он же «флажок» или «галочка», работает по принципу true/false — если чекбокс отмечен, то браузер отсылает данные поля, если нет — не отсылает. Атрибутом checked можно отметить чекбокс по умолчанию.

Радиокнопка type="radio" — он же «переключатель», обычно группируются по несколько штук как варианты ответа. Связываются между собой одинаковым значением атрибута name="", при этом различаются значением value="", которое обязательно для этого поля. С помощью checked можно выбрать радиокнопку по умолчанию.

<input type="radio" name="msnger" id="telegram" value="telegram">
<label for="telegram">Телеграм</label>

<input type="radio" name="msnger" id="whatsapp" value="whatsapp">
<label for="whatsapp">WhatsApp</label>

<input type="radio" name="msnger" id="viber" value="viber" checked>
<label for="viber">Viber</label>

Многострочное поле <textarea> — специальное поле для большого количества текста, задается не через <input>, можно поиграться с размером поля с помощью атрибутов rows="", отвечает за условную высоту поля, и cols="" — отвечает за ширину.

<textarea name="comment" id="comment "rows="3" >
  Ваш комментарий
</textarea>

Раскрывающийся список <select> — специальное поле для выбора значения из выпадающего списка. Сам список задаётся внутри с помощью тега <option> которому обязательно задается атрибут value="", а внутри элемента располагается подпись к варианту ответа.

По умолчанию можно выбрать только один вариант ответа, но с помощью атрибута multiple для тега списка <select> появляется возможность выбрать несколько ответов, а у <option> можно задать атрибут selected который задаст вариант ответа по умолчанию.

Варианты ответов можно дополнительно группировать с помощью тега <optgroup>, указав в атрибуте label="" заголовок группы.

<select name="cities" id="cities" multiple>
  <optgroup label="Россия">
    <option value="Moscow">Москва</option>
    <option value="St. Petersburg">Санкт-Петербург</option>
  </optgroup>
  <optgroup label="Беларусь">
    <option value="Minsk" selected>Минск</option>
    <option value="Gomel">Гомель</option>
  </optgroup>
</select>

Возвращаемся к <input> и более специфичным типам полей.

Поле ввода числа type="number" — специальное поле для чисел, браузер немного преобразует поле добавляя ему стрелочки для повышения или понижения значения указанного в поле. При помощи атрибутов min="" и max="" можно задать минимальное и максимальное значение, а атрибут step="" задает величину на которую будет меняться значение в поле при нажатии на стрелочки.

Поле ввода даты type="date" — преобразует поле для выбора точной даты, при нажатии на поле появляется календарь для удобного выбора. Правда, работает это поле пока не во всех браузерах.

Поле ввода времени type="time" — аналогично преобразует поле для удобного ввода времени, но тоже поддерживается пока не всеми браузерами.

Поля ввода месяца type="month", недели type="week" и даты-времени type="datetime-local" — специфичные поля похожие на те, что выше. Объединил их в один пункт, так как работают аналогично и тоже имеют поддержку не всеми браузерами.

Поле ввода номера телефона type="tel" — поле главным образом отличается тем, что на мобильных устройствах при выделении этого поля меняется клавиатура с буквенной на цифровую, что очень упрощает ввод.

Поле ввода email type="email" — это специальное поле, которое автоматически проверяет формат данных сопоставимых с email адресом, то есть наличие @ и отсутствие инородных символов не свойственных адресу email. Также выделение поля слегка меняет клавиатуру.

Поле ввода ссылки type="url" — аналогично полю email, только для ввода ссылок, проверяет отсутствие спецсимволов, наличие доменной зоны (.ru) и тоже слегка меняет клавиатуру.

Диапазон type="range" — трансформирует поле в шкалу с ползунком, структура тега при этом становится похожа на type="number", так как указываются те же атрибуты min="", max="" и step="", только теперь диапазон нагляден и выбрать можно только строго заданные шаги.

Поле выбора цвета type="color" — при нажатии на поле появляется палитра с возможностью выбрать цвет. Поддерживается, кстати, практически всеми браузерами. Вид палитры зависит от браузера и ОС.

Поле для загрузки файлов type="file" — оставил его напоследок, так как с ним больше всего нюансов. Во-первых, просто так оно работать не будет — форма <form> должна работать по методу method="post". Во-вторых, форма должна иметь дополнительный атрибут и значение enctype="multipart/form-data" отвечающий за отправку данных из формы по частям. И напоследок, вид поля, который по сути трансформируется в кнопку, очень туго меняется стилями. Тем не менее, полезность этого поля трудно преуменьшить.

С полями куда вводятся данные разобрались, но это далеко не все <input>'ы.

Кнопки формы

Кнопки в формах можно задать двумя способами. Первый способ, можно сказать базовый, с помощью всё того же тега <input> меняя ему type="", давайте разберём какие вообще есть:

Кнопка отправки формы type="submit", надпись на самой кнопке задается через атрибут value="Отправить";
Кнопка сброса значений type="reset" — важно заметить, что не удаляет все значения, а возвращает изначально установленные (например, selected), аналогично надпись задается через value="";
Кнопка-картинка type="image" — формально работает как type="submit", но заместо кнопки можно подставить изображение и отследить координаты нажатия — они тоже отправляются вместе с формой. Также обязательны атрибуты src="" и alt="";
Кнопка type="button" — по умолчанию не влечет за собой никаких последствий, обычно такие кнопки создаются для JS, все функции обрабатываются там.

В случае с <input> — это одиночный тег, который можно стилизовать, но возможности с ним ограничены.

Второй способ создания кнопок с помощью элемента <button> расширяет возможности, так как внутри него можно размещать любые другие элементы:

<button>Календарь <img src="calend.png" alt=""></button>

К тегу <button> применимы все type="" что и к <input>, кроме image, так как он неуместен. Такие кнопки применяются не только в формах, но находясь внутри элемента <form> у кнопок <button> по умолчанию стоит type="submit".

Дополнительные структуры и атрибуты

Поля и кнопки — это основа форм, но мы рассмотрели только базу. Со всем вышеописанным можно совершать разные ~~непристойности~~ действия, например сделать поле обязательным для заполнения.

За обязательность поля отвечает атрибут required, который указывается в теге нужного поля. Без корректного заполнения поля с этим атрибутом форма не отправит данные и по умолчанию браузер выведет всплывающую подсказку с ошибкой.

Также есть возможность при загрузке страницы автоматически выделить определённое поле. Для этого нужно задать ему атрибут autofocus, правда, нужно иметь ввиду, что такой атрибут должен быть только один на странице.

Для полей где подразумевается ввод с клавиатуры — текстовые, числовые, телефоны и так далее, можно задать подсказку, которая исчезает при заполнении, так называемые «плейсхолдеры» (или «заглушки»). Задаются они с помощью одноименного атрибута placeholder="".

Для таких полей также можно задать паттерны допустимых значений — грубо говоря, проверку вводимых данных, как это делается по умолчанию, например, в type="email" — также можно сделать для остальных полей вручную. Делается это с помощью атрибута pattern="", а в его значение записывается регулярное выражение описывающий необходимый формат. Обычно это диапазоны символов или чисел в заданном порядке.

<input type="text" 
       name="passport" 
       id="passport" 
       pattern="[0-9]{4}-[0-9]{6}"> <!-- [4 цифры]-[6 цифр] -->

Иногда поля нужно отключать, особенно это важно в разных условных конструкциях — мы затрагивали нечто подобное в блоке про JS, когда отключали негативные пункты в отзыве. В таких случаях помогают атрибуты readonly или disabled. Работают они по разному:

readonly — не дает изменять поле, но позволяет выделить и скопировать текущее значение, при этом отправляет данные из поля при отправке формы;
disabled — полностью отключает поле, не давая скопировать содержимое и при этом НЕ отправляет данные при отправке формы.

Браузер знает о вас много чего и запоминает что вы вводили в разные поля. Звучит как угроза. Но следствие этого запоминания- это функция автозаполнения полей. Этим автозаполнением можно управлять с помощью атрибута autocomplete="", который принимает значения on и off, для включения и выключения автозаполнения. Применяется к полю, а не к форме!

Не знаю как вы, а я частенько пользуюсь tab для переключения полей — когда привыкаешь это правда удобно. И как раз порядком выделения полей в форме, оказывается, тоже можно управлять с помощью атрибута tabindex="". По умолчанию индексация полей идет просто сверху вниз по коду, но с помощью этого атрибута можно изменить или явно задать порядок.

Если плейсхолдера и паттернов недостаточно, то можно подключить включить функцию подсказок при вводе — список возможных значений для поля. Сам список значений задаётся отдельно с помощью тега <datalist> который немного похож на <select> — в нем тоже задаются <option> с обязательными атрибутами value="". Для самого списка обязательным является атрибут id="", так как именно с помощью него и атрибута list="" в теге поля они между собой связываются, по аналогии с подписью.

<input type="text" list="browsers" name="browser">

<datalist id="browsers">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Safari"></option>
</datalist>

Поля можно группировать, особенно полезно для больших форм или анкет. Делается это с помощью тега <fieldset>. По умолчанию у группы полей появляется рамка, хотя, это от браузера зависит еще. Группе еще можно задать заголовок с помощью тега <legend>.

<fieldset>
  <legend>Ваши контактные данные</legend>
  <input type="text" name="name" placeholder="Ваше имя">
  <input type="tel" name="phone" placeholder="Ваш номер телефона">
</fieldset>

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

Первый это поле вывода <output>. По своей сути это просто удобный элемент к которому можно прицепить выводимые данные. Для него также задаются атрибуты name="", id="" и какие-либо другие если того требует задача.

Вторая это «технология» localStorage или "локальное хранилище«, суть которого в том, что в него записываются данные, которые сохраняются в браузере. С его помощью вводимые данные будут сохраняться даже после закрытия браузера. Как в точности работает функция в тренажёрах не разъяснили.

Испытания

Испытания в этот раз тоже три на обе части по формам. Нужно сверстать, внезапно, формы. Разной степени сложности, начиная от простой с текстовыми полями и чекбоксом:

Потом более сложную форму с радиокнопками, мультиселектом и файлами:

И наконец целую анкету с несколькими филдсетами, всякими диапазонами, выводами, цветами, датами и т. д.

А всё, наверное. Я разделю этот блок на 2 части, иначе это даже по моим меркам получится дофига. В следующем блоке будет только CSS, там у нас селекторы, каскадирование и фоны!

Огромное спасибо за внимание тому кто это читает! Я всё еще пишу это в формате конспектов, но если кому-то это хоть каплю пригодиться я буду чрезвычайно рад.

Ссылки на предыдущие статьи по HTML Academy:

Знакомство с Веб-разработкой
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах <- Вы здесь
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
...

Остальные статьи можно посмотреть у меня на главной странице блога.

Также мои соц. сетки, которые я продолжаю вести:

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#html #css #html5 #css3 #frontend #front_end #обучение #it