В этой части учебника, вы узнаете что такое блочные элементы HTML, какие они бывает и для чего нужны.
Что такое блочный элемент:
Это как понятно из название элемент виде блока, они собственного говоря и хранят в себе весь контент сайта, также не мало важная особенность в том, если вы используете простой HTML, они будут занимают всё ширину, хотя через атрибуты это можно изменить.
Какие теги являются блочными:
Теперь пришло время показать какие теги являются блочными, но ту будут показываться только самые основные.
Заголовки:
Самое первое, для создание заголовка в HTML используются блочные элементы/теги, всего их шесть уровней, от h1 и до h6, самый первый, это самый большой и главный заголовок, вот пример их всех.
1 2 3 4 5 6 7 8 | <body> <h1>Заголовок h1</h1> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6> </body> |
Как вы можете заметить, так это то, что все заголовки написано в <body>, потому что весь контент надо писать в нём, вот весь результат
Как видите, чем выше число, тем меньше заголовок, тут вообщем-то всё просто.
Текст:
Как добавить абзац в HTML, это делается с помощью тега <p>, в нём пишется текст любого размера, если вам нужен новый абзац, то просто вставляете новый этот тег.
В качестве примера, у меня вот такой не большой стих, который был взят с сайта с MillionStatusov.ru.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <body> <p> - Скажи, а чайки тоже плачут,<br> Когда их море предает?<br> Спросила девочка у мальчика,<br> Когда весной кололся лед.<br> </p> <p> Деревья на ветру качались,<br> И он ответил на вопрос:<br> - Чайки разбиваются о скалы,<br> Когда их море предает.<br> </p> <p> Летели годы, словно ветер,<br> Летели, оставляя след.<br> И вот, они уже не дети,<br> Им стало восемнадцать лет. </p> </body> |
Как видите я написал этот стих не в одном теге <p>, а в нескольких, каждый этот тег, отдельный абзац, который отделён друг от друга отступами.
Также надо сказать и про тег <br>, он нужен для того, что бы переносить на другую строчку, иначе, каждый абзац был в одну строчку, вот результат.
Примечание:
Вам не надо всегда использовать <br> для переноса строки, так как, зависимо от ширины элемент <p>, он сам будет переносится на новую строчку, если в одну не влезает, а <br> надо использовать только при необходимости.
Также у многих возникает вопрос, тег p строчный или блочный, отвечу с полной уверенностью он блочный.
Список:
Списки ещё один очень важный элемент HTML, здесь я покажу только один не большой пример, подробнее о нём вы узнаете в одной из следующих части учебника.
1 2 3 4 5 6 7 | <body> <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ul> </body> |
Вот результат этой HTML страницы.
Тут не чего рассказывать подробнее в следующей части.
Другие:
Ну и последнее, тот же <header>, <main> и <footer> это тоже блочные элементы, о них рассказано было в предыдущей части, ещё можно вспомнить тег <div>, это просто контейнер, нужен в основном для работы с CSS.
Также есть тег для вставки картинки в HTML, это <img>, вот как с ним работать.
1 | <img src="URL" alt="альтернативный текст"> |
Атрибут src хранит путь до картинку, а alt, альтернативный текст, если картинка не погрузилась.
Ещё вы можете использовать любой формат изображения, от JPG, до GIF.
Вывод:
В этой части учебника вы прочитали про блочные элементы в HTML, надеюсь для вас было полезно и понятно.
Если вы не увидели здесь интересующий вас элемент/тег, то скорее всего вы найдёте его в другой части.
Подписываетесь на соц-сети:
Оценка:
Загрузка...