1 подписчик
🤓 "Создание Веб-сайта:"
Иногда мы хотим скрыть какое-либо длинное описание элемента страницы, которое может оказаться неполезным для пользователя. В этом случае используется 👇
<details>...</details> <!-- Скрывает подробное описание какого-либо элемента страницы, которое пользователь может развернуть -->
<summary>...</summary> <!-- Данный тег располагается между тегами details и является кратким описанием более подробного -->
Для подписи картинки на странице используется следующая структура:
<figure> <!-- Контейнер, объединяющий картинку и подпись к ней -->
<img src="..." alt="...">
<figcaption>...</figcaption> <!-- Подпись картинки -->
</figure>
Наверное многие сейчас задумаются: "А что такое alt ?" 🤔
Атрибут alt="..." является обязательным. Он содердит в себе краткое описание (название) картинки, которое отображается, если картинка не прогрузилась или проговаривается вспомогательными программами, читающими текст страницы.
Ещё одним полезным атрибутом является lang. Он прописывается внутри тега html и сожержит основной язык страницы. Благодаря этому атрибуту, браузер сможет переводить текст сайта на другие языки.
<html lang="ru">
</html>
На многих сайтах существует регистрация. Чтобы собрать вводимые пользователем данные, используются формы.
Элемент form является контейнером для нескольких input и кнопки отправки.
<form>
Username:<input type="text"><br>
Password:<input type="password"><br>
<button>Send</button>
</form>
Внутри контейнера form мы можем группировать элементы и выделять их границами
<form>
<fieldset><!-- Устанавливает границы вокруг объединённых объектов -->
FirstName:<input type="text"><br>
LastName:<input type="text"><br>
</fieldset>
</form>
Мы также можем подписывать отдельные блоки 👇:
<form>
<fieldset>
<legend>UserInfo</legend><!-- подписывает группу элементов, обведённых границей -->
FirstName:<input type="text"><br>
LastName:<input type="text"><br>
</fieldset>
</form>
В качестве input может использоваться и поле ввода текста - textarea. Размер данной области мы можем настраивать по горизонтали и вертикали с помощью атрибутов cols и rows.
<textarea rows="3" cols="4"></textarea>
В форматах также существуют метки. Метки выполняют ту же функцию, что и placeholder, но являются отдельным тегом, а не атрибутом. Для каждого input в нашей форме мы должны прописать id, для привязки метки. При создании метки мы используем атрибут for и через равно в двойных кавычках прописываем id-input.
❗Учтите, что в данном случае хэштег(#) не требуется 👇
<form>
<fieldset>
<legend>User Info</legend>
<label for="name">Name: </label> <!-- Создание метки -->
<input type="text" id="name"><br>
<label for="email">E-mail: </label>
<input type="text" id="email"><br>
<label for="textarea">Describe Yourself: </label>
<textarea id="textarea" rows="3" cols="5"></textarea>
</fieldset>
</form>
2 минуты
28 февраля 2024