Видеоурок - Блочные элементы HTML
Привет, в этом уроке мы разберемся что такое блочные элементы и как они работают, а также рассмотрим списочные теги и заголовки.
Привет, в этом уроке мы разберемся что такое блочные элементы и как они работают, а также рассмотрим списочные теги и заголовки.
<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее.
<form> имеет достаточно много атрибутов, мы разберем самые распространенные.
Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.
<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>
action - определяет ссылку на сервер куда будут отправляться данные из <form>.
method - определяет метод http с помощью которого будут отправляться данные.
target - определяет в каком окне будет производиться отправка, в новом или текущем.
Также есть еще много атрибутов у тега <form>, о них читайте в документации
P.S Больше уроков у меня на канале
В современной верстке выделяется 2 типа элементов:
• Блочные (block level) - в основном, отвечают за каркас страницы.
• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.
Строчные элементы
Они не занимают всю ширину родителя в которого вложены, из-за чего соседствующие с ними элементы не переносятся на новую строку. Они высчитывают свою ширину в зависимости от ширины контента который в них вложен.
<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum <a href="#">dolor</a> sit amet, <b>consectetur</b> adipisicing elit.</p>
</div>
<div class="related-posts">
<ol>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
</ol>
</div>
</div>
В примере выше были добавлены несколько ссылок на внутри тега <p>, а также ссылки внутри списков. Как видите текст не переносится на новую строку, а остается на своем месте. Так работаю строчные элементы.
Основные строчные элементы
В качестве примера приведены только несколько строчных элементов, на самом деле и гораздо больше.
<span>Lorem</span>
<a href="#">Link to another page</a>
Теги для стилизации текста
<i>Italic text</i>
<em>Emphasis text more important than i tag</em>
<strong>Bold text more than b tag</strong>
Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы
<p>Вкладывай блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.
Lorem <a href="#"><b>ipsum dolor</b></a> sit amet, <i>consectetur</i>.
</p>
ВАЖНО!
Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.
P.S. Больше уроков у меня на канале
В современной верстке выделяется 2 типа элементов:
• Блочные (block level) - в основном, отвечают за каркас страницы.
• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.
Блочные элементы
Они занимают всю доступную ширину родителя в которого вложены, из-за чего выталкивают соседствующие элементы не могут располагаться с ними на одной строке и переносятся под них.
<div class="block">Block Element #1</div>
<div class="block">Block Element #2</div>
<div class="block">Block Element #3</div>
Основные блочные элементы:
Это список основных блочных элементов, также практически все семантические теги являются блочными и в добавок к этому небольшому списку существует достаточно много блочных тегов.
<div>div element</div>
<p>p element</p>
<hr>
Списочные теги
Списочные теги используются для создания списка элементов, для вывода на страницу. Такие теги используются достаточно часто при верстке страниц. Также списочные теги являются блочными.
Маркированный список:
<ul>
<li>Lorem ipsum.</li>
<li>Similique, voluptas?</li>
<li>Enim, et!</li>
</ul>
Нумерованный список:
<ol>
<li>Lorem ipsum.</li>
<li>Beatae, fugit?</li>
<li>Id, molestiae.</li>
</ol>
Список описаний ( документация ):
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit.</dd>
<dt>Lorem ipsum.</dt>
<dd>Lorem ipsum dolor sit.</dd>
</dl>
Теги заголовков
Теги заголовков имеют семантическое значение для страницы, тег <h1> имеет наибольшее значение, является главным заголовком HTML документа. Использовать заголовки нужно в правильной последовательности от h1 до h6, если вы используете младший заголовок без старшего это будет ошибкой. Теги заголовков тоже являются блочными.
<h1>Lorem ipsum.</h1>
<h2>Lorem ipsum.</h2>
<h3>Lorem ipsum.</h3>
<h4>Lorem ipsum.</h4>
<h5>Lorem ipsum.</h5>
<h6>Lorem ipsum.</h6>
Вкладывая одни блочные элементы в другие мы получаем возможность создавать более сложную верстку.
<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
</div>
</div>
Из примера выше видно, что в div c классом post вложенные другие элементы. На самом деле, вложенность может достигать любого уровня, но не стоит сильно увлекаться так как чем больше будет вложенность тем сложнее будет браузеру и компьютеру это все обрабатывать.
Как делать нельзя?
Нельзя вкладывать теги <p> друг в друга.
<p>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</p>
Нельзя вкладывать заголовки друг в друга.
<h2>
Some title
<h3>Some subtitle</h3>
<h3>Some another subtitle</h3>
</h2>
ВАЖНО!
Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.
P.S. О строчных элементах напишу в следующем посте.
Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.
Пример базовой структуры показан ниже.
Рассмотрим ее подробнее.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
</body>
</html>
Начнем с тега DOCTYPE
<!DOCTYPE html>
Задача этого тега - указать браузеру стандарт HTML который используется в документе. Этот тег не будет показан на странице, но будет присутствовать в HTML коде страницы. Данный тег должен располагаться перед всем HTML кодом странице, в начале файла.
Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.
Вы можете видеть и другие версии этого тега, более объемные, обычно такие теги можно встретить на сайтах сделанных 5 - 10 лет назад. Они указывают браузерам, что используется другой стандарт HTML.
Тег <html>
Тег <html> - парный, очень важный тег, благодаря ему браузер понимает, где начинается контент который нужно обрабатывать как HTML.
<html></html>
Также тег <html> имеет обязательный атрибут lang, в качестве значения мы указываем язык, на котором должна отображаться страница. Эта информация помогает браузеру считывать специфические символы которые могу встречаться в различных языках.
В качестве значения передаем сокращения языков: ru, en и тд.
Тег <head>
<head></head>
Тег <head> - парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется 'метаинформацией'. Также метаинформация активно используется для продвижения сайта в поисковых системах (Google, Yandex и тд.).
Все что находится внутри тега <head> не будет отображено пользователю.
Тег <meta>
<meta>
Тег <meta> - одиночный тег, имеет много различных атрибутов с помощью которых мы можем указывать различную метаинформацию для нашего сайта. С настройкой тега <meta> вы ближе познакомитесь при разработке своих сайтов.
<meta charset="UTF-8">
В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта. Кодировка помогает правильно интерпретировать текст. Указываем мы ее потому что у разных пользователей в их системе может быть указана разная кодировка, из-за чего контент сайта может выглядеть не так как мы ожидаем.
Самой универсальной кодировкой является UTF-8, ее мы и указываем.
Тег <title>
<title>Заголовок страницы</title>
<title> - парный тег, располагается внутри тега <head>, внутри него указываем текст который будет выводиться во вкладке нашего сайта.
Тег <body>
<body></body>
<body> - парный тег, располагается внутри тега <html>, после закрывающего тега </head>. Этот тег является телом нашей страницы и внутри него мы описываем HTML структуру нашего сайта которую будет видеть пользователь.
Пример конечной структуры в файле index.html.
Материал для начинающих.
В продолжение предыдущих топиков
Перевел интерактивные уроки "Базовый курс HTML"
Перевел интерактивные уроки "Базовый курс CSS" и "Базовый курс JavaScript"
Сообщаю: перевел курс ES6.
На очереди React.
UPD: На всякий случай уточню: если вы JS еще не изучали, не следует сразу этот курс проходить, надо сначала базовый курс по JS пройти: https://freecode.academy/learn/sections/ck4h36qju0hp007829wp...
Раз пошла такая пьянка, рискну рассказать о сервисе, который сейчас разрабатываю в качетсве пэт проджекта.
А решил я создать сайт с интерактивными курсами по программированию.
На текущий момент уже созданы курсы :
Базовый HTML, (источник freecodecamp, планируется пополняться и расширяться)
Базовый CSS (источник freecodecamp)
Прикладной визуальный дизайн - дополнение к курсу по CSS (источник freecodecamp. Название курса может быть не совсем корректное)
Базовый курс по php - интерактивный курс по php, сборная солянка со всего интернета.
Дабы не спамить ссылками на все курсы - есть еще курс по JS, в разработке курс по SQL и базам данных.
Прекрасно понимаю, что сайт еще достаточно сырой, есть куча недоработок и багов. К сожалению разработка и наполнение ведется в одно лицо.
В планах сделать интерактивные курсы по питону.
Что из недостатков по сайту вижу сейчас:
- курс по sql - решил сделать озвучку видео при помощи голосовых апи (специальный сервис). Звучит немного убого. В будущем хочу перезалить/перезаписть
- немного страдает адаптивность, хотя в целом сайт не предназначен для мобильных устройст, т.к. неудодно писать код с мобилки
- не весь функционал реализован до конца
- некоторые курсы (в частности JS) содержат не совсем актуальную информацию. По JS в будущем хочу сделать отдельный курс по ES6 (либо актуальному на момент создания стандарту)
Проект в целом создавался скорее для собственного интереса, т.к. было интересно реализовать возможность интерактивных задач для различных ЯП в браузере.
Если будет интересно - могу сделать пару постов о том, как реализовал тот или иной тренажер.
P.S. - За внешний вид просьба не ругать, т.к. я чистый бэк и во фронт почти не умею. Верстка найдена на просторах интернета и адаптирована под свои нужды
Да прибудут с Вами знания
Предыдущий топик Перевел интерактивные уроки "Базовый курс HTML" оказался довольно положительно воспринят пикабушниками (на самом деле сильно положительней, чем я ожидал), и это меня довольно сильно простимулировало на скорейший перевод еще двух курсов: Базовый CSS (44 урока) и Базовый JavaScript (107 уроков). Работы оказалось сильно больше, чем я предполагал, но и ценность материала на выходе сильно больше (не только исправил множество неточностей, но и дополнил своими комментариями).
Осталось перевести курс по ECMAScript 6 и можно будет перейти к самому главному: курс по React. Планирую сделать это на следующей неделе.
Всем приятной бесплатной учебы!