Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+3.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег <hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис

Атрибуты

align
Определяет выравнивание линии.
color
Цвет линии.
noshade
Рисует линию без трехмерных эффектов.
size
Толщина линии.
width
Ширина линии.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег HR</title>
 </head>
 <body>

 <hr>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p>
 <hr> 

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид горизонтальной линии в браузере

htmlbook.ru

Тег — горизонтальная линия (цвет и толщина)

Поддержка браузерами

Описание

HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок (<section>, <article>), так как эти элементы по умолчанию подразумевают тематические изменения.

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:


<p>Разделительная линия:</p>

<hr>

<p>Изменяем цвет линии:</p>

<hr>

<p>Изменяем толщину линии:</p>

<hr>

<p>Пунктирная линия html:</p>

<hr>
Попробовать »

Атрибуты

HTML тег <hr> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 

Пример

<h2>HTML</h2> <p>HTML это язык разметки гипертекста...</p> <hr> <h2>CSS</h2> <p>CSS определяет то, как будут отображаться элементы...</p>

Результат данного примера в окне браузера:

puzzleweb.ru

Горизонтальные и вертикальные линии в HTML — сайт на PHP своими руками

Тег HR,hr,написание горизонтальных и вертикальных линий в HTML,примеры цветных горизонтальных и вертикальных линий на страницах сайта.

Горизонтальные линии формируются непарным ( закрывающего тега не нужно) тегом <HR> и могут быть довольно уникальными элементами дизайна. Оформление текста с добавлением горизонтальных HTML линий придаст странице определенную логику изложения текста, а также упростит читателю выделить блоки информации, которые нужно изучать последовательно. Тег <HR> может формировать горизонтальные линии разного цвета, толщины и длины. И сделать это довольно просто, что на примерах показано ниже.

Кстати можно также использовать свойства стилей блоков <table> и <div> для формирования линий
при определенном расположении. Правда такой вариант не всегда может быть удобным, например окрашивание таблицы иногда не всегда себя оправдывает, но во многих вариантах возможно решение задач именно таким способом. Например внутри линии, сформированной тегом <HR>

текст не вставиш. А внутри блоков — это возможно и постоянно практикуется. Так что свой вариант нужно выбирать в зависимости от требований к дизайну.

Вертикальные линии в HTML.

А вертикальные линии формируются фактически в тех же блоках <table> и <div>.
Одно только неудобство — не во всех браузерах тег <HR> работает одинаково, но тут нужно пробовать
и подстраивать страницу, или пользоваться обновленными браузерами.

Формирование горизонтальных линий:

Тег <HR> вставляет на страницу горизонтальную линию и имеет следующие атрибуты:

Атрибуты тега <HR>
alignВыравнивание линии справа или слева,
по умолчанию — по центру.
sizeЗадает толщину линии в пикселах.
widthЗадает ширину линии в процентах или пикселах.
colorЗадает цвет линии.
noshadeСплошная окраска, значений не требует.

Синтаксис тега <HR>:






Примеры горизонтальных линий в HTML:






Примеры вертикальных линий в HTML:

Пример цветной вертикальной линии в таблице.
  
Пример цветной вертикальной линии в таблице с применением стиля для окраски левого бордера.
  

кружок, сформированный при помощи тега

Вот пример вертикальной линии красного цвета слева.

Вот пример вертикальной линии красного цвета справа.

Вот пример горизонтальной линии красного цвета вверху.

Вот пример горизонтальной линии красного цвета снизу.

Вот пример горизонтальной и вертикальной линий.

Синтаксис примеров вертикальных и горизоньальных линий в HTML:

обратите внимание на атрибут стиля
border-left(-right):4px solid #FF0000;:


кружок, сформированный при помощи тега


Вот пример вертикальной линии красного цвета слева.


Вот пример вертикальной линии красного цвета справа.


Вот пример горизонтальной линии красного цвета снизу.


Вот пример горизонтальной и вертикальной линий.

И если проанализировать данные примеры, то можно сделать довольно простой вывод, что вертикальные линии лучше всего формировать при помощи блоков DIV, а проможуточные варианты линий можно делать с тегом <HR> Но все зависит от фантазии и запросов. Так что выбирайте и формируйте.

kapon.com.ua

Как сделать линию с помощью HTML и CSS

Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Конечно же, с текстом можно особо не заморачиваться и выделить его, к примеру, жирным или курсивом, изменить задний фон или сделать рамку вокруг текста. Но не всегда один из представленных способов является подходящим. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь HTML и СSS свойства.

Как сделать в тексте линию средствами CSS

Для реализации задуманного нам понадобится обратиться к файлу style.css, прописав в нем соответственное свойство border. Тем самым над, под или с определенной стороны текста появится линия. В свою очередь предусмотрено несколько свойств, отвечающих за отображение линии, а именно:

border-top – горизонтальная линия, расположенная над текстом;

border-right – вертикальная линия, расположенная справа от текста;

border-bottom – горизонтальная линия, расположенная под текстом;

border-left – вертикальная линия находящаяся слева.

Как сделать линию в html

Используя свойства CSS можно прописать все необходимые значения редактируя HTML код. Для этого нужно перейти в административную часть сайта. Выбрать один из опубликованных материалов, переключить текстовый редактор в режим правки HTML кода и внести свойства CSS. Образец можно лицезреть ниже.

 

Как сделать пунктирную или прямую линию?

Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?

 

Краткая расшифровка команд

width – длина линии;

solid – сплошная линия;

dotted – точечная линия.

Для более глубокого ознакомления со стилями рекомендую почитать эту статью.

Нужно уяснить, что в процессе внесения изменений в код сайта, свойства, определяющие тип линии, ее толщину и цвет перечисляются через пробел.

Приведенный способ имеет несколько достоинств:

— Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.

— Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.

Как сделать прямую горизонтальную линию с помощью тега HTML <hr>

Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами <body> и </body>.

Атрибуты тега <hr>

width – отвечает за длину линии. Может указываться как в процентах, так и пикселях.

size – толщина линии. Указывается в пикселях.

color – определяет цвет линии.

align – атрибут, отвечающий за выравнивание линии. В свою очередь к нему относится команда:

right – выравнивание справа;

left – выравнивание слева;

center – центральное выравнивание.

Образец html кода с использованием тега <hr>

Надеюсь, у вас все получилось, и теперь вы знаете, как сделать линию у себя на сайте. Назревшие вопросы оставляйте в комментариях, и мы обязательно их обсудим.

Спасибо за внимание и до скорых встреч на страницах Stimylrosta.

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

 

Не ленитесь, поделитесь!

Понравилась статья? Угостите админа кофе.

stimylrosta.com.ua

Тег | HTML справочник

HTML теги

Значение и применение

Тэг <hr> создает горизонтальную линию на HTML-странице. Элемент <hr> может использоваться в роли тематического разрыва. Элемент используется без закрывающего тега.

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
alignleft
center
right
Не поддерживается в HTML5.
Определяет выравнивание элемента. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).
noshadenoshadeНе поддерживается в HTML5.
Указывает, что горизонтальная линия должна отображаться в одном цвете, вместо затененного цвета. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).
sizepixelsНе поддерживается в HTML5.
Определяет высоту элемента. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).
widthpixels
%
Не поддерживается в HTML5.
Определяет ширину элемента. Используйте CSS вместо данного атрибута (значения по умолчаию внизу страницы).

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <hr><title>
	</head>
	<body>
		<p>Первый параграф</p>
		<hr>
		<p>Второй параграф</p>
		<hr>
		<p>Третий параграф</p>
		<hr>
	</body>
</html>

Результат нашего примера:

Пример использования тегов <p> и <hr> в HTML документе.

Отличия HTML 4.01 от HTML 5

В HTML5 элемент <hr> определяет тематический разрыв, а в HTML 4.01 представляет собой горизонтальную линию. Ранее используемые атрибуты удалены в HTML5, вместо них используйте CSS .

Значение CSS по умолчанию

hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

basicweb.ru

Горизонтальные и вертикальные линии с помощью html и css

Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.

На самом деле, необходимость сделать горизонтальную линию возникает достаточно часто, например, когда нужно отделить одну часть текста от другой.

Горизонтальная и вертикальная линии с помощью css

Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:


<html>
<head>
<title>Вертикальная HTML линия</title>
</head>
<body>
<div>
Горизонтальная линия с помощью css.
</div>
</body>
</html>

В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.

Вот как это будет выглядеть на странице:

Горизонтальная линия с помощью css.

У этого способа есть свои преимущества:

  • Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
  • Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.

К недостаткам можно отнести относительную громоздкость кода.

Между прочим, если Вы еще не знаете что такое css и какие оно дает преимущества, то подробнее об этом можно прочитать здесь.

Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег <hr>.

Горизонтальная линия с помощью тега html <hr>

Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами <body> и </body>.

У этого тега есть следующие атрибуты:

  • Width – определяет длину нашей горизонтальной линии в пикселях или процентах;
  • Color – определяет цвет линии;
  • Align – задает выравнивание линии по правому краю – right, по левому краю – left, по центру – center;
  • Size – толщина линии в пикселях.

Вот пример html – кода:

<hr size=3px width=500px align="left">

А вот так он будет выглядеть:


Как видите, у данного способа есть свои недостатки:

  • Меньше настроек для линии;
  • Нельзя сделать вертикальную линию.

Зато этот способ намного проще.

Теперь Вы точно знаете о том, как сделать на своем сайте вертикальные и горизонтальные линии. Задать свои вопросы Вы можете в комментариях. И не забывайте подписываться на RSS.

www.bestseoblog.ru

HTML: Заголовки, горизонтальная линия, комментарии

HTML заголовки

Заголовки являются важной частью HTML документа, обычно заголовок — это краткое описание того, что будет представлено ниже на странице. В HTML для обозначения заголовков используются теги <h2> (heading), <h3>, <h4>, <h5>, <h5> и <h6>, которые представляют своеобразную иерархию заголовков: от самого важного (<h2>) до самого незначительного (<h6>).

Все заголовочные теги являются блочными, при отображении на странице они будут иметь отступ сверху и снизу, отделяющий их от других элементов страницы, и занимать всю доступную ширину. Текст, заключенный внутри заголовочных тегов, отображается жирным шрифтом и имеет разный размер, соответствующий важности заголовка. По умолчанию заголовок первого уровня (<h2>) отображается самым крупным шрифтом жирного начертания, каждый последующий заголовок будет представлен размером меньше:


<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
Попробовать »

Используйте HTML заголовки только для обозначения заголовков на странице. Не используйте их для придания тексту большего размера или для жирного начертания, потому что поисковые системы используют заголовки для индексации структуры и содержания веб-страниц.

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

Горизонтальная линия

Тег <hr> используется для создания горизонтальной линии по всей ширине страницы. Линии обычно используют для разделения содержимого документа друг от друга или для демонстрации визуального отделения:


<html>
  <body>

    <p>Тег hr определяет горизонтальную линию:</p>
    <hr>
    <p>Абзац</p>
    <hr>
    <p>Абзац</p>
    <hr>
    <p>Абзац</p>

  </body>
</html>
Попробовать »

Комментарии

В HTML код можно добавлять комментарии, которые не будут отображаться в браузере. Они должны начинаться с символов <!-- и заканчиваться символами -->. Все, что заключено между этими символами, при просмотре страницы в браузере, остается невидимым.

Есть много причин для использования комментариев в HTML-документах, например пояснение блоков кода, временное выключение кода при отладке и т.д.

Примечание: обратите внимание, что комментарии могут занимать несколько строк. Помните, что все, написанное между символами <!-- и -->, даже HTML-код, будет проигнорировано браузером.


<html>
  <body>

    <!--Этот комментарий не будет отображен-->
    <p>Обычный абзац</p>

  </body>
</html>
Попробовать »

С этой темой смотрят:

puzzleweb.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *