Блог Тимура Казанского

Урок 5. Блочные и строчные элементы в HTML


В данном уроке мы рассмотрим основные строчные и блочные элементы html, что это такое, как они выглядят и зачем нужны. Если вы читали прошлые уроки, то видели на примере анкеты и интернет магазина, которые мы с вами написали, что выглядят они далеко от идеала, да, они содержат описание, заголовки, картинки, ссылки, но страницы заполнены, как будто одной строкой в виде столбца и весь текст выровнен по левому краю. В интернете куча красивых сайтов, с разными колонками, столбцами, текстом слева, справа, сверху и снизу, как сделать также спросите вы? Все дело в блочных элементах и сегодня мы с вами научимся делать ничуть не хуже, вернее начнем учиться, и на следующем уроке будем строить html блог! А пока давайте подготовимся… И так, как же нам сделать колонку, шапку и подвал сайта(не пугайтесь новых терминов, скоро мы во всем разберемся!)? Очень просто, для этого нам нужен всего один блочный элемент - <div>! Запомните его, это очень важный элемент, это своего рода каркас страницы, скелет, фундамент если хотите и достаточно написать так

<div>+содержимое+</div> и колонка готова! Хотите еще одну? Пожалуйста! <div>+содержимое+</div>! Вот и все! Не беспокойтесь если не понятно, сейчас мы разберем, что такое строчные и блочные элементы, а потом все подробно разберем на простом примере!

Теория. Строчные и Блочные элементы HTML

Если быть честным, то вы уже сталкивались с этими элементами раньше и чтобы разобраться в них запомните только одно отличие – Блочные элементы всегда переносят строку и не могут располагаться в тексте, т.е. нельзя так написать:

«Сегодня на рыбалке я поймал <h1>Большого карася</h1>, а потом, придя домой, <p>сготовил вкусную уху!</p>»

А вот так нужно и можно:

<h1>О сегодняшней рыбалке</h1>
<p>Сегодня на рыбалке я поймал <b>Большого карася</b>, а потом, придя домой, <em>сготовил вкусную уху!</em></p>»

Посмотрите - строчные элементы, располагаются внутри текста! Т.е. блочные делят страницу на отдельные блоки («блочные» от слова «блок»). Возьмем как пример постройку дома, вы же не будете строить его начиная класть маленькие кирпичики прямо на землю и так до крыши? (Хотя и возможно, как мы делали это в предыдущих примерах.) Правильно! Мы сначало раскопаем котлован, затем установим железно-бетонные блоки для подвала нашего будущего дома, далее пойдут кирпичики (строчные элементы), потом мы положим еще одну здоровую плиту для перекрытия первого и второго этажа, потом снова кирпичики, потом плита для чердака (шапки сайта) и так наш дом простоит века и будет радовать глаз прохожим и гостям.

Давайте рассортируем все элементы, которые мы знаем на блочные и строчные:

Блочные элементы: <p>, <h1>,<h2>.. и так далее до <h6>, <div>

Строчные элементы: <b>, <em>, <img>, <a>, <ins>

Это очень важная тема и если вы разберетесь в них, то считайте, что сделаете большой шаг вперед. Взгляните на картинку ниже для наглядности:

Блочные и строчные элементы html на примере дома

Практика

Давайте построим каркас нашего сайта и разместим блочные элементы:

<html>
<head>
<style>
</style>
</head>
<body>
<div id="header"><h1>Шапка сайта</h1></div>
<div id="body"><h2>Середина сайта</h2></div>
<div id="footer"><h3>Подвал сайта</h3></div>
</body>
</html>

Теперь запустим наш html файл и посмотрим, что получилось.

Пример структуры сайта

Хех, скажете вы, ничего особенного… Нет, основная структура сайта готова, просто мы пока ничего не видим, а чтобы наглядно посмотреть, давайте применим знакомый нам тег <style>, мы его изучили в Уроке 2. Стили CSS в HTML и разметим наши блоки <div> разными цветами, чтобы вы видели! Верхний блок – пометим желтым цветом, средний – синим и подвал сайта (footer от англ. – подвал, читается, как футер) – вы наверное неоднократно замечали на всех сайтах внизу есть такая полоска, там иногда еще грозно пишут: «Не копируйте мой контент!», вы можете посмотреть в самом низу футер данной статьи – такая синяя полоска, вот это и есть подвал сайта! Так, на чем мы остановились? Ах да, и нижний блок красим в зеленый цвет. Смотрим что получилось:

Пример структуры сайта с помеченными div

<html>
<head>
<style>
#header {
background-color: yellow;
}
#body {
background-color: blue;
}
#footer {
background-color: green;
}
</style>
</head>
<body>
<div id="header"><h1>Шапка сайта</h1></div>
<div id="body"><h2>Середина сайта</h2></div>
<div id="footer"><h3>Подвал сайта</h3></div>
</body>
</html>

Ну и наконец в третьей части нашего примера, мы центрируем весь текст с помощью стилей css и сжимаем наш средний блок, получилось примерно так:

Завершение примера с блочными элементом div

<html>
<head>
<style>
#header {
background-color: yellow;
text-align: center;
}
#body {
background-color: blue;
text-align: center;
width: 600px;
margin-left: 350px;
}
#footer {
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div id="header"><h1>Шапка сайта</h1></div>
<div id="body"><h2>Середина сайта</h2></div>
<div id="footer"><h3>Подвал сайта</h3></div>
</body>
</html>

Все вышеперечисленные примеры вы можете скачать тут.

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

Ну вот мы и рассмотрели с вами, что такое блочные и строчные элементы в html, я думаю ничего сложного не было, в следующих уроках мы рассмотрим новые элементы и вы уже будете понимать, которые из них блочные, а которые строчные. На этом все! Увидимся на следующих уроках! Удачи!

Категория: Уроки HTML для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0