Видеоурок - Блочные элементы HTML
Привет, в этом уроке мы разберемся что такое блочные элементы и как они работают, а также рассмотрим списочные теги и заголовки.
Теги для создания форм. Часть №1
<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 это атрибуты и их значения.
<img src="./images/html-syntax.png" alt="HTML Syntax">
В примере выше мы используем тег одиночный тег <img>, для того чтобы добавить изображение на нашу страницу.
Для того чтобы сказать браузеру, какое именно изображение мы хотим показать на странице мы используем атрибут src и в качестве его значения указываем путь к файлу изображения. Таким образом браузер поймет что именно мы хотим показать на странице.
<p>
<a href="https://github.com" target="_blank" title="Popup info" id="link" class="link">
Github
</a>
</p>
В примере выше мы можем видеть большое количество атрибутов, в этом нет ничего страшного, теги могут принимать неограниченное количество атрибутов.
Но не стоит увлекаться, большое количество атрибутов делает код более сложным и сильнее нагружает браузер, который интерпретирует HTML.
<section>
<p class="paragraph" title="some additional info">
Lorem ipsum dolor sit amet.
</p>
<a href="https://github.com" target="_blank" class="link" title="title info">
Link to github
</a>
</section>
Существует 3 типа атрибутов, универсальные, уникальные и атрибуты событий.
Универсальные - атрибуты которые можно установить любому существующему тегу из пример выше можно понять что атрибуты class и title являются универсальными атрибутами. Так как мы можем их добавить любому тегу.
Уникальные - атрибуты, которые есть у определенных тегов или у определенного набора тегов. Одним из таких атрибутов является атрибут href тега <a>, а также атрибут target тега <a> тоже является уникальным.
Атрибуты событий - нужны для того связывания обработчиков событий с элементами на которых они должны срабатывать. Обработчики событий это JavaScript функции которые срабатывают при срабатывании события на элементе, например события клика по элементу.
Пример атрибута события
<p onclick="alert('Hello world!')" >
<mark>Lorem ipsum dolor sit amet.</mark>
</p>
Из чего состоит тег ?
Видеоурок на эту тему
Базовая структура HTML файла
Любой 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 верстке и создании на конструкторе WordPress.
На данный момент, могу охарактеризовать свои знания следующим образом:
1. HTML - Среднее. Общее понимание присутствует.
2. CSS - Ниже среднего. Общее понимание присутствует, но с пробелами.
3. JavaScript - Понимания чуть меньше, чем ноль.
4. PHP - Что-то где-то слышал.
6. WordPress - Хорошее. Могу делать сайты средней сложности, но это не точно.
Начать хочу с создания сайтов на конструкторе WordPress, и уже потом постепенно углубляться в HTML/CSS/JavaScript.
Чтобы понять свой актуальный уровень знания материала и наработать небольшое портфолио для дальнейшего коммерческого взаимодействия где-нибудь на биржах, готов сделать 3 несложных сайта и 3 аудита главной страницы бесплатно. (Но донат всегда приветствуется)
Условия:
1. Сайт или аудит должны быть реально нужны вам или вашему делу. А не просто халява ради халявы.
2. Нужно будет оплатить хостинг и домен, так как это все регистрируется на ваше имя и остается у вас.
3. Нужно будет заполнить бриф. Прям по честному потратить время, силы и ответить на все вопросы.
4. Если желающих будет много, я выберу самые интересные, в первую очередь, для себя проекты, а не так, что кто первый написал, тот и забил место.
5. Сроки создания от 1 до 3 недель. Зависит от моего свободного времени по вечерам.
Скорее всего, проекты буду выбирать завтра.
В целом, все. Спасибо, что дочитали. :)
PS Ах, да. Если у кого есть актуальный и полезный материал по темам, что я озвучил выше, буду очень благодарен.