Линии html

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

Рассмотрим, как создавать линии html.
Для оформления веб-страницы html линии можно взять либо горизонтальные, либо вертикальные.
Первые называются разделительными линиями и создаются тэгом <hr>. Они не требует закрывающего тэга. Имеются следующие дополнительные атрибуты, прописываемые в тэге <hr>:

width – указывает длину линии. Значения принимает в пикселях, или в процентах;
size – указывает толщину линии. Удобнее задавать значение в пикселях. Если не указывать, линия будет толщиной 2 пикселя;
align – указывает, как выравнивать линию по горизонтали. Принимает значения center, right, left.

center – будет выравнивать по центру веб-страницы;
right – выравнивать по правому краю веб-страницы;
left – выравнивать по левому краю веб-страницы.

noshade – атрибут для создания сплошной литой линии;
сolor – указывает цвет линии. Работает только в браузере Internet Explorer.

Теперь рассмотрим, как это будет выглядеть внутри кода html:

Вставим данный html код в нашу веб страницу.

посмотреть результат

 

Теперь поговорим о создании вертикальных линий при программировании на html. Создать такую линию можно двумя разными вариантами: с помощью таблиц или стилей.
Рассмотрим вначале создание вертикальных линий при помощи таблиц. Код html примет следующий вид:

посмотреть результат

 

Параметры cellpadding и border должны быть равны 0, cellspacing указывает расстояние от текста до линии, width так же как и всегда показывает ширину линии.

Второй способ создания вертикальных линий – при помощи стилей. Код html примет такой вид:

 

Код прописывается в теге <head>…</head>.
Вот пример расположения стилей html:

посмотреть результат

 Обратите внимание, что в атрибут <p align=”justify”> добавился новый элемент class=”line“.

Надеемся, этот материал будет Вам полезен и пригодится при оформлении будущего сайта.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

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

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика