Горизонтальная линия в html – Горизонтальная линия в css. Как создать разные варианты горизонтальной линии в HTML

Содержание

Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

Главная » Основы HTML » Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать горизонтальную линию в HTML.
С помощью горизонтальной линии можно аккуратно выделить меню, название заголовка, подчеркнуть комментарий. А бывает, смотришь на страничку, и чего-то не хватает, добавляешь горизонтальную линию – и вид странички значительно улучшается!
Поэтому, не стоит пропускать этот урок, если он вам показался примитивным и слишком простым. Я думаю, вы на практике сами все увидите и останетесь довольными, что не пропустили этот урок.
Чтобы создать горизонтальную линию в HTML, существует специальный тег:


<hr>

Закрывающий тег не нужен.

Пример:


<html>
<head>
<title>Горизонтальная линия</title>
</head>
<body>
<hr>
</body>
</html>

Результат:

Атрибуты горизонтальной линии <hr>

○ ширина горизонтальной линии
Чтобы регулировать ширину, достаточно прописать к тегу «HR» атрибут «width» с размерами. Размеры задаются в пикселях (px) либо в процентах (%):


<hr>

Или так:


<hr>

Результат:

○ толщина горизонтальной линии
Чтобы задать толщину горизонтальной линии, достаточно прописать к тегу «HR» атрибут «size» с размером:


<hr size="8">

Результат:

○ выравнивание горизонтальной линии

Чтобы выровнять горизонтальную линию по центру, справа или слева, достаточно прописать к тегу «HR» атрибут «align» с такими значениями:

«right» – вправо;
«center» – по центру;

«left» – слева (по умолчанию).

Пример:


<hr align="right">
<hr align="center">
<hr align="left">

Результат:

○ отменить объемность горизонтальной линии

Чтобы отменить объемность горизонтальной линии, достаточно прописать к тегу «HR» «NoShade»:


<hr NoShade>

Результат:

○ цвет горизонтальной линии

Чтобы задать цвет горизонтальной линии, пропишите к тегу «HR» атрибут «color» с кодом цвета (кодировку цветов мы еще не изучали, но вскоре будем):


<hr color="#cc0000">

Результат:

На сегодня это все! Жду вас на следующем уроке. Удачи! 

Предыдущая запись
Бегущая строка на HTML. Основы HTML для начинающих. Урок №9 Следующая запись
Коды цветов в HTML. Основы HTML для начинающих. Урок №11

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>
Попробовать »

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

seodon.ru | Учебник HTML — Горизонтальные линии

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Как нарисовать горизонтальную линию?

Для отрисовки горизонтальных линий в HTML существует специальный тег <HR>. Причем он является блочным тегом

, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например <BODY> или <BLOCKQUOTE>. А вот сам <HR> не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Рисуем горизонтальные линии</title>
</head>
<body>
 <hr>
 <p>Параграф.</p>
 <p>Параграф.</p>
 <hr>
 <p>Параграф.</p>
</body>
</html>

Результат в браузере


Параграф.

Параграф.


Параграф.

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега <HR> существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

<hr> — цвет линии (вернее ее фон).

<hr> — толщина линии.

<hr> — ширина линии.

<hr> — а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона.

А вот об изменении размеров мы поговорим подробнее. Как вы помните из

урока по изменению шрифтов, в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

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

Как я уже сказал, только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег <HR>. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег <hr style=»width:50%»> внутри элемента <BLOCKQUOTE>, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока <BLOCKQUOTE>.

Пример изменения цвета, толщины и ширины горизонтальных линий.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Меняем цвет, толщину и ширину горизонтальных линий.</title>
</head>
<body>
 <hr>

 <hr>
  
 <hr>

 <hr>
</body>
</html>

Результат в браузере

Изменение положения горизонтальных линий

Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри <HR> атрибут align со следующими значениями:

  • center — линия выравнивается по центру (значение по умолчанию).
  • left — прижимается к левому краю.
  • right — прижимается к правому краю.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Меняем положение горизонтальных линий.</title>
</head>
<body>
 <hr>
  
 <hr align="left">

 <hr align="right">
</body>
</html>

Результат в браузере

Как убрать рамку вокруг линии?

Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!

Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

<hr>

Домашнее задание.

  1. Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
  2. Установите на всей странице шрифт Arial, а для заголовков — Courier.
  3. Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
  4. Напишите под первым заголовком параграф, под вторым — длинную цитату, под третьим — стихотворение. И пусть стихотворение располагается по центру страницы.
  5. Выделите жирным шрифтом три слова в цитате.
  6. Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
  7. Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней — в два раза меньше.
  8. Уберите у линий ненужные рамки.

Посмотреть результат → Посмотреть ответ

Горизонтальная линия в css. Как создать разные варианты горизонтальной линии в HTML

Задача

Сделать горизонтальную линию на странице.

Решение

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

С помощью тега


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

По умолчанию линия


отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color , а остальные браузеры — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все свойства воедино для селектора hr , получим универсальное решение для популярных браузеров (пример 1).

Пример 1. Горизонтальная линия

HTML5 CSS 2.1 IE Cr Op Sa Fx

Цвет горизонтальной линии

Текстовоя строка


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

Рис. 1. Цветная горизонтальная линия

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

Как нарисовать горизонтальную линию?

Для отрисовки горизонтальных линий в HTML существует специальный тег


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

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

Рисуем горизонтальные линии

Параграф.

Параграф.


Параграф.

Результат в браузере

Параграф.

Параграф.

Параграф.

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега


существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color , size и width , соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style . Общий синтаксис такой:
style= «background:цвет» > — цвет линии (вернее ее фон).
style= «height:размер» > — толщина линии.
style= «width:размер» > — ширина линии.
style= «background:цвет; height:размер; width:размер» > — а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона .

А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов , в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

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

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


. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег
style= «width:50%» > внутри элемента
, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока
.

Пример изменения цвета, толщины и ширины горизонтальных линий.

Меняем цвет, толщину и ширину горизонтальных линий.



Результат в браузере

Изменение положения горизонтальных линий

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


атрибут align со следующими значениями:
  • center — линия выравнивается по центру (значение по умолчанию).
  • left — прижимается к левому краю.
  • right — прижимается к правому краю.

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

Меняем положение горизонтальных линий.


Результат в браузере

Как убрать рамку вокруг линии?

Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!

Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style . А пишется это так:


Домашнее задание.

  1. Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
  2. Установите на всей странице шрифт Arial, а для заголовков — Courier.
  3. Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
  4. Напишите под первым заголовком параграф, под вторым — длинную цитату, под третьим — стихотворение. И пусть стихотворение располагается по центру страницы.
  5. Выделите жирным шрифтом три слова в цитате.
  6. Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
  7. Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней — в два раза меньше.
  8. Уберите у линий ненужные рамки.

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

Как сдела

Как сделать горизонтальную линию в HTML. Урок №15

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

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

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

Как сделать горизонтальную линию в HTML. Урок №15

Ну что, приступим:

Горизонтальная линия в HTML выставляется при помощи тега <HR>.

Ширина линии:

<Hr>

Ширина линии задается в процентах (%) или в пикселях (px).

Результат:


Толщина линии:

<Hr size="8">

Результат:

Выравнивание линии:

«right» — вправо;

«center» – по центру;

«left» – слева(по умолчанию).

<Hr align="right">

Результат:

Отмена объемности линии:

<Hr NoShade>

Результат:

Цвет  линии:

Результат:

Цвет  линии в HTML

Цвет линии работает только в IE.

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


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: html, основы

как её сделать и зачем нужна

При создании страницы HTML оформление играет существенную роль. Особенно когда мы говорим о различных символах и декоративном оформлении: эти мелочи помогают сделать «язык» вашей странички более доступным и ясным, к тому же существенно меняют её восприятие и внешний вид в целом. Одним из важнейших элементов для оформления является горизонтальная линия, и далее мы более подробно узнаем, как с ней работать и как сделать горизонтальную линию в html.

Какой бывает горизонтальная линия и для чего она нужна

Горизонтальная линия в html – это элемент оформления страницы, выполняющий ряд функций:

  1. Декоративная. Помогает добавить страничке привлекательности.
  2. Разделительная. Способствует эффективному отделению разной по смыслу информации.
  3. Выделительная или подчеркивающая. Привлечет внимание гостей страницы к необходимой и наиболее важной информации.

Именно горизонтальная линия считается самым доступным способом для реализации целого ряда функций. Создать её очень просто, а внешне она смотрится очень выгодно. Путем нехитрых изменений html-кода вы сможете регулировать:

  • длину;
  • ширину;
  • цветовые характеристики;
  • выравнивание по тому или другому краю.

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

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

Создаем горизонтальную линию в HTML

Задать линию можно при помощи простого тэга – hr в треугольных скобках. Он является сокращением от «Horisontal Rule» и задает классические внешние параметры. Отличается от множества других тем, что не нуждается в закрывающем тэге и способен существовать самостоятельно. Изменить внешние характеристики элемента можно при помощи дополнительных значений в тэге:

  1. Длина. Если вы не хотите, чтобы протяженность линии распространялась на всю страницу, то можно задать желаемых размер в пикселях либо процентах. Делается это про помощи дополнительного слова «width» в тэге и числового показателя длины, указанного после знака «=» в кавычках.

Выглядит это так. Например, если нам необходима длина, составляющая 100 пикселей, задаем такой тэг: hr width=»100″

  1. Выравнивание. Выравнивание возможно по левому или правому краям, а еще по центру. Данная характеристика действует только в том случае, если вы уже задали параметр width, так как линию протяженностью во всю страничку невозможно выровнять. Для выравнивания задаем дополнительный атрибут в тэг «align» и добавляем к нему направление: center – для центрального, left – для левого и right – для правого выравнивания.

Готовый тэг в таком случае будет выглядеть так. Например, если нам нужно задать центральное выравнивание для горизонтальной линии длиной в 150 пикселей, то готовый тэг будет выглядеть так: hr align=»center» width=»150″.

Обратите внимание, что «align», показатель для выравнивания, ставится на 1 место, несмотря на то, что атрибут зависим от показателя длины width.

  1. Ширина. По выбору можно также указывать ширину, создавая жирное или тонкое подчеркивание. Данный критерий ни от чего не зависит и может быть использован как самостоятельный без указания длины или выравнивания. Для него мы используем атрибут size в тэге и числовой показатель, равный желаемой ширине в пикселях. Число указывается в кавычках после атрибута size и символа «=».

Таким образом, если нам требуется создать линию шириной в 15 пикселей, необходимо создать следующий тэг: hr size=»15″.

  1. Цвет. Задается также как независимый показатель. Для его изменения используется атрибут color в сочетании с названием цвета в форме кода либо на английском языке. Цвет указывается в кавычках после символа «=».

Таким образом, тэг для стандартной линии белого цвета можно написать двумя способами: hr color=»#FFFFFF»или hr color=»white»

Черный цвет можно создать при использовании кода #000000.

  1. Убрать тень. Если вам необходим элемент, не содержащий тень, то в тэге следует использовать атрибут noshade. Он может быть использован самостоятельно либо в сочетании с другими элементами. Тэг для стандартной линии с его использованием будет выглядеть данным образом: hr noshade

Создание горизонтальный линию в HTML

Читайте также:

Создание горизонтальной линии с помощью видео

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

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

Спецсимволы. Горизонтальная линия. Бегущая строка. Комментарии. Учебник html

Глава 6

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

Иногда, а порой даже часто, как например в этом сайте, в тексте не обойтись без знаков «меньше чем»-< и «больше чем»- > , но как быть если браузеры определяют <слово> или фразу заключенные в эти знаки как тег и следовательно не будут его отображать на мониторе? Или допустим Вам и вправду в тексте надо написать некий <тег>, но не для того чтобы дать очередную команду браузеру, а чтобы привести пример его написания посетителям страницы?

Для этих целей были придуманы так называемые спецсимволы.

Так например спецсимвол &lt; — будет значить что в этом месте текста нужно поставить знак < а спецсимвол &gt; обозначит символ >.

Все спецсимволы начинают писаться со знака &— амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак &— амперсант?

Для знака & тоже есть свой спецсимвол — &amp;

Такая вот путаница получается..

Ещё, пожалуй, отдельного внимания заслуживает спецсимвол &nbsp; — это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе «простых» пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они «удаляются» и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать… вот и придумали люди спецсимвол &nbsp; он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.

А неразрывным он называется по тому, что группа&nbsp;&nbsp;&nbsp;таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы &nbsp; &nbsp; &nbsp;

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

<html>
<head>
<title>пример в примере</title>
</head>
<body bgcolor=»#dddddd» text=»#222222″>
<table bgcolor=»#ffffff» cellspacing=»0″ cellpadding=»5″ border=»0″>
<tr>
<td bgcolor=»#808080″>&nbsp;</td>
<td>
&lt;html&gt; <br>
&lt;head&gt; <br>
&lt;title&gt;Моя первая страничка&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;center&gt;&lt;h3&gt;Привет мир!!!&lt;/h3&gt;&lt;/center&gt;<br>
&lt;br&gt;<br>
Это моя первая страничка!<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>
</td>
</tr>
</table>
</body>
</html>

Пример в примере… навивает на философские мысли о бесконечности…

Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по «ту сторону экрана». Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела &nbsp;. Помните правило <тег>здесь что то обязательно должно быть</тег>? Спецсимвол пробела один из выходов в данном случае.

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

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

Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут — size, цвет атрибут — color, и при необходимости отключить тень линии noshade.

Пример:

<html>
<head>
<title>Горизонтальная линия</title>
</head>
<body>
Это просто линия по умолчанию: &lt;hr&gt;
<hr>
Это линия без тени: &lt;hr noshade &gt;
<hr noshade>
Это линия окрашенная в кранный цвет: &lt;hr color=»#ff0000″&gt;
<hr color=»#ff0000″>
Линия длиной 250 пикселей: &lt;hr&gt;
<hr >
Линия длиной 250 и толщиной 5 пикселей: &lt;hr size=»5″&gt;
<hr size=»5″>
Линия длиной 500, толщиной 50, синяя: &lt;hr size=»50″ color=»#0000ff»&gt;
<hr size=»50″ color=»#0000ff»>
Примеры выравнивания:
<hr align=»left» size=»5″>
<hr align=»center» size=»5″>
<hr align=»right» size=»5″>
<hr>
</body>
</html>

По моему достаточно просто и эффективно.

Тег <marquee> заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:

behavior — определяет тип скроллинга, может иметь следующие значения:
  • alternate — колебательные движения от края к краю
  • scroll — прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
  • slide — прокручивание текста c остановкой.
scrollamount — скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.

direction — направление движения текста. значения:

  • up — вверх,
  • down — вниз,
  • left — влево,
  • right — вправо.
bgcolor — цвет фона бегущей строки,
height — высота строки,
width — ширина строки.

Пример:

<html>
<head>
<title>Бегущая строка</title>
</head>
<body>
<div align=»center»><h3>Бегающие строки</h3></div>
<marquee>Бегущая строка по умолчанию</marquee>
<marquee direction=»right»>Бегущая строка слева направо</marquee>
<marquee behavior=»alternate»>Бегущая строка бегает от края к краю</marquee>
<marquee scrollamount=»10″>Бегущая строка со скоростью 10</marquee>
<marquee scrollamount=»1″>Бегущая строка со скоростью 1</marquee>
<marquee direction=»right» loop=»2″>Эта строка будет прокручиваться только два раза</marquee>
<marquee behavior=»slide»>Бегущая строка с остановкой</marquee>
<marquee bgcolor=»#b40000″>Бегущая строка с фоном</marquee>
<marquee width=400>Бегущая строка с ограничением ширены прокрутки</marquee>
<marquee direction=»up»>Бегущая строка снизу вверх</marquee>
<marquee hspace=»300″>Бегущая строка с отступами от границ</marquee>
</body>
</html>

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

Комментарии используются для того, чтобы облегчить свой собственный труд, а так же упростить понимание другим человеком кода Вашей странички. Пишутся они непосредственно в коде html документа, однако браузер не выводит эти «пометки» на экран. Для того чтобы заставить браузер игнорировать какой либо текст его необходимо заключить вот в такой набор символов:

<!— —>

По принципу:

<!— здесь может быть любой текст —>

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

Пример:

<html>
<head>
<title>Мой первый сайт</title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<!— Начало таблицы —>
<table cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ bgcolor=»#b2ff80″>
<center><img src=»graphics/privet.jpg» alt=»Привет мир!!!»></center>
</td>
</tr>
<!— Строка с меню —>
<tr>
<td bgcolor=»#ffa0cf»>
<center><b><a href=» index.html»>Обо мне!!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=» myfoto.html»>Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor=»#c0e4ff»>
<center><b><a href=»mailto:[email protected]»>Напишите мне письмо..</a></b></center>
</td>
</tr>
<!— Конец меню —>
<!— Основное содержание —>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<img src=»graphics/foto.jpg» align=»left» hspace=»10″ alt=»Это моя фотка!!!»>
<p align=»justify»>&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! … … …</p>
</td>
</tr>
<!— Конец оновному содержанию —>
</table>
<!— Конец таблицы —>
</center>
</body>
</html>

Как видите старый пример ничем не изменился зато ориентироваться в его коде стало значительно легче.

  • Писать сайты на своём компьютере конечно дело хорошее, но пора задумываться о том, как Ваше творчество разместить в сети Интернет. О том как это сделать читайте в статье «Публикация сайта». А совет собственно заключается в том, что на данном этапе обучения Вам пора обзавестись своим собственным местом (хостом) «тренировочным плацдармом» на каком либо сервере.. а также собственным именем сайта (доменом)… для начала, это место и имя могут быть бесплатными, даже я бы сказал должны быть бесплатными.. Там, в этом месте на сервере, Вы будите тренироваться выкладывать свои страницы., смотреть как и с какой скоростью они загружаются, так же Вы сможете показать своё творение миру (а можете и не показывать) и друзьям. Почему этим стоит заняться именно на данной стадии обучения? Да потому что с помощью того, что мы изучили, Вы уже можете делать вполне пристойные сайты!! нет конечно до конца обучения ещё рано, да и предела совершенствования мастерства как известно нет.., но это послужит хорошей тренировкой и так сказать поднимет Ваш морально боевой дух!!)) Знаете как это приятно, увидеть свою работу в действии!? Но, ещё раз повторюсь, о том как это дело провернуть читайте в статье «Публикация сайта».



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

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