Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Вам уже дан куб и в нем три линии. Вам нужно добавить три тега
<hr>так, чтобы получилось 16 квадратов.
Ранее вы изучили тег <p> в HTML, с помощью которого можно добавить абзац на веб-страницу. В этом уроке изучим теги <br> и <hr>.
Перенос строки (<br>) при помощи HTML или CSS
Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег <br> для перевода на новую строку, а можно использовать свойства CSS для переноса строки.
Рассмотрим пример использования тега переноса строки:
Здесь текст
<br>
Этот текст на новой строкеВ CSS перенос строки можно осуществить по-разному, например вот так:
.br {
float: left;
width: 100%;
margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
}Здесь текст
<div class = "br"></div>
Этот текст на новой строкеРазделительная линия (<hr>) при помощи HTML или CSS
В HTML создать разделительную линию очень просто. Используется тоже непарный тег <hr> - это и есть разделительная линия.
Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега <hr>:
Здесь текст
<hr>
И здесь текстА теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:
hr {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}И создадим альтернативу нашей разделительной линии при помощи тега <div> и CSS:
.line {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}Здесь текст
<div class = "line"></div>
Здесь текстВот и все. Сделать перенос строки и создать разделительную линию в HTML очень просто, вы сами это сейчас поняли. Далее пройдите практику и тест, после чего погружайтесь в нумерованные списки.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
