УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 12. Линии, спецсимволы, отступы (поля).

Мы подошли к последнему нашему уроку. На нём разберёмся с тем, что не вошло в предыдущие темы, но что так же необходимо знать о языке HTML.

Итак, приступаем.

Линии.

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

Горизонтальная линия задаётся тегом <Hr> без закрывающего тега.

У тега <Hr> есть следующие параметры:

1) <Hr align="right"> (center или left) - выравнивание по левому/правому краю либо по центру;

2) <Hr width="50%"> - ширина линии в процентах/пикселях;

3) <Hr size="2"> - толщина линии;

4) <Hr NoShade> - отмена объемности;

5) <Hr color="cc0000"> - цвет линии (только для IE).

Для тренировки вставим линию на главную нашу страницу, в третью ячейку нижней строки. Там у нас текст "Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр." и таблица - проведём между ними границу.

Откройте главную страницу в текстовом редакторе и добавьте после текста в третьей ячейке нижней строки код:

Листинг 12.1

……
<td WIDTH="200" align="center" valign="top"> Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр.
<Hr align="center" size="5" NoShade>
<table border="1" background="img/white.gif">
<tr>
……

Сохраните файл, обновите страницу в браузере. Вот,что должно получиться:

Уроки html для начинающих
Рис. 32

Спецсимволы.

Вот они:

1) - &lt; - < (открывающая угловая скобка);

2) - &gt; - > (закрывающая угловая скобка) - эти два спецсимвола применяют тогда, когда нужно вывести в текст угловые скобки;

3) - &quot; - " (кавычка);

4) - &nbsp; - пробел: применяется так, где нужно поставить несколько пробелов подряд (т. к. браузеры игнорируют больше одного пробела);

5) - &amp; - &

И несколько слов об отступах на Веб-странице. Имеются в виду поля по краям документа.

Посмотрите на рисунок и Вы поймёте, о чём речь (я специально сначала увеличил отступы, чтобы было наглядней):

Уроки html для начинающих
Рис. 33

Эти отступы или поля можно убрать либо увеличить, прописав в теге <body> атрибуты topmargin="…" и leftmargin="…", задав им желаемые значения. Чтобы отступов не было совсем, значения атрибутов следует приравнять к нулю.

Наш тег <body> примет такой вид:

Листинг 12.2

……
<body text="#000000" bgcolor="#CCCCCC" background="img/fon.jpg" topmargin="0" leftmargin="0">
……

Сделайте это самостоятельно, увеличивая и уменьшая значения атрибутов topmargin и leftmargin, и посмотрите результат.

Управлять правым и нижним полями можно, вводя атрибуты rightmargin и bottommargin для тэга <body>.

Да, нужно оговориться, что topmargin, leftmargin, rightmargin и bottommargin поддерживаются только Internet Explorer. Для Netscape Navigator есть свои аналогичные атрибуты для тега <body> - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.

Чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти атрибуты вместе для тэга BODY:

Листинг 12.3

……
<body text="#000000" bgcolor="#CCCCCC" background="img/fon.jpg" rightmargin="0" bottommargin="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
……

Так, скажете Вы, как убрать поля в NN и IE мы знаем, но как быть с другими браузерами?

Введите между тегами <head> </head> следующий код:

<style type="text/css"><!- body{margin:0px;padding:0px;}--></style>

- и проблема будет решена.

Вот так это будет для кода страниц нашего сайта:

Листинг 12.4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<meta name="description" content="Всё о собаках">
<meta name="keywords" content="собаки, породы, выбор щенка, воспитание, дрессировка, кормление, выставки собак">
<title>Сайт о собаках</title>
<style type="text/css"><!-
body{margin:0px;padding:0px;}-->
</style>

</head>
……

Успехов.

И идём дальше учиться создавать формы

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта