Web + Веб-разработка

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

Строчные элементы в HTML - ссылка на материалы

Файлы с урока - GitHub repo

Документация на строчные элементы - ссылка

Мои соц. сети:

Telegram

LinkedIn

Twitter

Facebook

Instagram

----------- ТРАНИСКРИПТ УРОКА -------------

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Строчные элементы

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

Основные списочные элементы: span, a, i, b, strong, em

Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы, но вкладывать блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.

ВАЖНО!

Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.

P.S. Больше курсов у меня на канале

<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.

Тег <input> можно использовать и вне тега <form>.

Также имеет много атрибутов позволяющих настроить его внешний вид, поведение и работу.

<input type="text">
<input type="number">
<input type="email">
<input type="tel">
<input type="checkbox">
<input type="radio">
<input type="button" value="Submit">
<input type="submit" value="Submit">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
<input type="hidden">
<input type="password">
<input type="range">
<input type="url">

Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.

Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.

<input type="text" value="Some text here">

value - позволяет нам определить или предопределить значение тега input.

<input type="text" placeholder="First name">

placeholder - определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.

<input type="text" required>

required - определяет, будет ли обязательным этот input в рамках текущего тега <form>.

<input type="text" disabled>

disabled - определяет, будет ли у пользователя возможность редактировать содержимое input

<input type="text" pattern="">

pattern - в качестве значения принимает регулярное выражение которые будет проверять правильность введенных данных.

<input type="text" name="first_name">

name - задает имя для нашего input

<form id="form_id"></form>
<input type="text" form="form_id">

Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.

Label - <label>

Это тег позволяющий указывать подпись для элемента, обычно используется вместе с тегом input. input и label можно связать с помощью id для input и for для label.

<form action="">
<h2>Contact form #1</h2>
<div>
<label for="first_name">First name:</label>
<input id="first_name" type="text" placeholder="First name">
</div>
</form>

Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.

<form action="">
<h2>Contact form #2</h2>
<div>
<label>
<span>First name</span>
<input type="text" placeholder="First name">
</label>
</div>
</form>

<form action="">
<h2>Contact form #3</h2>
<div>
<label for="user_name">First name:</label>
<input id="user_name" type="text" placeholder="User name">
</div>
<div>
<label>
<span>User surname:</span>
<input type="text" placeholder="User surname">
</label>
</div>
<div>
<input type="submit" value="Submit">
<input type="reset" value="Reset from">
</div>
</form>

P.S. Больше уроков у меня на канале.

P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий

А теперь, собственно, само описание.

Вероятно, кто-то из вас мог когда-то видеть coub https://coub.com/view/13u3n70o:

Данный coub является фрагментом эпизода Симпсонов "Jazzy and the Pussycats" (сезон 18, эпизод 2). Ссылка на википедию: https://en.wikipedia.org/wiki/Jazzy_and_the_Pussycats. Мне так понравилась эта “ударная установка”, что я воссоздал её и воплотил в виде одностраничного сайта https://thehomerdrums.xyz/

Видеофрагмент серии был сконвертирован в gif и импортирован в Photoshop, где каждый кадр стал отдельным слоем. Рисовать я не умею, зато умею пользоваться инструментами “Перо” и “Заливка”:) В видео ударная установка никогда не умещалась в один кадр целиком. В фотошопе мне удалось собрать все части воедино. Неподвижные элементы ударной установки образовали фон для игрового поля сайта. Каждого из семи “Гомеров” обводил покадрово. Таким образом, было получено семь наборов спрайтов. Кое-что всё-таки пришлось дорисовать самому: одну из ножек для левой барабанной стойки и рот для Гомера с бас-бочки.

С извлечением и нарезкой звуков никаких трудностей не возникло.

На сайте анимацию и звук запрограммировал при помощи jQuery (JavaScript).

Я практически не занимался адаптацией сайта под мобильные устройства - лучше всего он будет смотреться на мониторе мака или ПК. Если игровая область не помещается на экране целиком, то просто немного уменьшите масштаб страницы при помощи Ctrl + “-“. Если соотношение сторон смартфона/планшета приблизительно 16:9, то и на них ударная установка будет выглядеть вполне достойно.

Данная разработка сделана чисто по приколу и никакой смысловой нагрузки не несёт :)
Приятной игры!