Четверг, 26.12.2024, 11:13	Приветствую Вас Гость

Главная » Статьи » Что нам стоит сайт построить » Сооздание сайта

САЙТОСТРОЕНИЕ (часть 5)

ТЕЛО ДОКУМЕНТА HTML

Вот мы, наконец, и подошли вплотную к созданию собственно страницы, которую браузер Вашего посетителя покажет своему хозяину. Как я уже говорил, все, что мы хотим показать гостям нашего сайта, должно располагаться в теле HTML-документа, обозначаемого тегом-контейнером <BODY></BODY>. Кроме того, сам тег <BODY></BODY> имеет довольно много параметров, которые определяют общий вид документа. Мы рассмотрим только некоторые из них. И хотя спецификация HTML 4.0 советует использовать для оформления внешнего вида страницы вместо этих параметров таблицы стилей, проще начать с употребления параметров.
Для примера рассмотрим параметры, с которыми употреблен тег в документе, который Вы читаете. В HTML-коде он представляется в таком виде:
<BODY BGCOLOR="#F9FCC2" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000"> Разберемся с каждым параметром в отдельности:

Параметр BGCOLOR=" ". -- Определяет цвет фона страницы. Допускает использование 256 цветов. Цветовая система базируется на трех основных цветах. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, эти значения ставятся в порядке: красный, зеленый, синий и со значком # вставляются в качестве значения параметра. Вместо цифровых значений можно использовать названия цветов. Браузеры последних версий поддерживают 140 названий цветов. То есть для назначения, например, красного цвета можно написать BGCOLOR="#FF0000" или BGCOLOR="red", зеленого - BGCOLOR="#008000" или BGCOLOR="green". При задании цвета названием нужно быть очень внимательным, т. к. ошибка в одной букве приведет к тому, что браузер не сможет распознать цвет.
Вместо параметра BGCOLOR=" ", или совместно с ним, применяется
Параметр BACKGROUND=" ". -- Задает фоновое изображение. В качестве значения этого параметра указывается URL-адрес рисунка, который Вы хотите использовать в качестве фона на своей странице. Например, Вам понравился вот такой рисунок: и Вы хотите, чтобы Ваши посетители любовались им на Вашей странице. Допустим, файл с этим рисунком называется floggy1.jpg и лежит в каталоге IMG (собственно, где он лежит - это не принципиально, хоть в Америке или наоборот - в Азии, главное - указать к нему правильный адрес), тогда Вы должны вставить в тег <BODY> параметр BACKGROUND со значением "img/floggy1.jpg". В окне редактора это будет выглядеть вот так: <BODY BACKGROUND="img/floggy1.jpg">, а в окне браузера вот так или вот так, в зависимости от Вашего желания. Как подготовить рисунок к использованию, мы обсудим позже, когда будем рассматривать работу с графикой. А сейчас ограничимся теми объяснениями, которые приведены на примерах. Скажу только, что к выбору рисунка для фонового изображения следует подходить очень осторожно. Иначе может получиться именно так, как на вышеприведенных примерах: лягушенок симпатичный, но подобрать цвет текста, чтобы текст легко читался - невозможно, т.к. сам рисунок очень пестрый.
Параметр TEXT=" ". -- Определяет цвет текста на странице.
Параметр LINK=" ". -- Определяет цвет еще не просмотренной ссылки.
Параметр VLINK=" ". -- Определяет цвет уже просмотренной ссылки.
Параметр ALINK=" ". -- Определяет цвет активной ссылки, на которую наведен указатель мышки.

Значения этих четырех параметров определяются так же, как для параметра BGCOLOR=" ".
Если Вы работаете с редактором Visual HTML Workshop, то все эти параметры и вообще тег BODY вставляются автоматически. Вам только необходимо выбрать все эти цвета при открытии нового проекта или при создании файла новой страницы. Для создания нового файла (напомню, что для каждой страницы Вашего сайта должен быть отдельный файл) при работе с Visual HTML Workshop нужно нажать на кнопочку в левом верхнем углу с изображением листа бумаги со знаком +. кнопка

При этом появляется окно "новый документ": окно редактора

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

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

Внимание! Большая ширина страницы - не ошибка автора, а следствие приведенного примера.

ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА

На большинстве сайтов информация представлена в форме текста. Даже на сайтах, посвященных музыке, фото или живописи, текст присутствует в виде всякого рода пояснений. А текст мы привыкли видеть оформленным так, чтобы его было удобно читать: с полями, абзацами, заголовками и пр., т.е. отформатированным. Но, дело в том, что если мы поместим в тело HTML-документа прекрасно оформленный текст (например, скопируем готовый документ из Word-a), и посмотрим это творение в окне браузера, то увидим просто набор предложений, довольно неудобных для чтения. Объяснить браузеру, как он должен показывать людям наш текст, нужно при помощи тегов.
 Начнем с того, о чем я уже упоминал. Предположим, что у нас есть прекрасно оформленный в каком-либо текстовом редакторе документ, и мы хотим в таком виде его показать. Для этого существует тег-контейнер <PRE>...</PRE>. Весь текст, помещенный в этот тег, выводится браузером "как есть", со всеми элементами форматирования. Казалось бы, что еще нужно? Но не все так просто. Во-первых, сохраняются только признаки форматирования: пробелы, перенос строки, табуляция и т.д. А если у нас в документе красивые заголовки, выделенные особо значимые куски текста и пр.? И, во-вторых, браузер не сможет оптимизировать преформатированный текст под разрешение экрана нашего читателя, т.к. будет поставлен в жесткие условия тега <PRE>...</PRE>, а это доставит неудобства этому самому читателю. А мы этого не хотим, потому что и писали то все это именно для этого конкретного человека. Так, что одним тегом не обойтись, нужно идти дальше.
 Из всех элементов, применяемых для форматирования текста, браузеры безо всяких подсказок понимают только один: пробел. Причем, только один пробел. Поэтому, если Вы хотите написать что-то с красной строки, Вам придется употребить специальный, так называемый, символьный объект или, по другому, эскейп-последовательность: знак неразрывного пробела &ampnbsp;. Сколько таких последовательностей поставите, столько пробелов сделает браузер. Еще этот знак удобно употреблять в случаях, когда нужно обозначить, что в этом месте рвать строку нежелательно. Браузер ведь сам определяет, в зависимости от разрешения экрана и шрифтов, применяемых хозяином, где заканчивается одна строка и начинается другая. И если, например, фраза "Мой вес 73 кг" будет выглядеть таким образом: "Мой вес 73
кг" - это будет как-то не очень... Поэтому в окне редактора ее стоит написать так "Мой вес 73&ampnbsp;кг". Эскейп-последовытельности существуют для всех символов из второй половины ASCII-таблицы, и при желании Вы их найдете в спецификации HTML-4, которую я Вам советовал скачать. Но все нам употреблять не придется, а вот некоторые, например, заменяющие угловые скобки < и > (&amplt; и &ampgt; ), иногда приходится.
 Тег-контейнер ... - тег параграфа. Закрывающий элемент не обязателен, но если он отсутствует, браузер не оставляет после абзаца пустую строку. Браузеры выделяют текст, помещенный в этот тег, пустыми строчками. Имеет один параметр: ALIGN= , который может принимать значения:

LEFT - выравнивание по левому краю,
CENTER - выравнивание по центру,
RIGHT - выравнивание по правому краю и
JUSTIFY - выравнивание по ширине

По умолчанию принимается выравнивание по левому краю. Пример использования этого тега - следующий абзац. Он написан внутри тега ...:

Тег принудительного перевода строки  . Говорит браузеру, в каком месте необходимо прервать строку и начать новую. Закрывающей части не имеет. Используется, как и тег ..., для разделения абзацев, но в отличие от него не оставляет пустой строки. Использование этого тега в HTML аналогично использованию клавиши ENTER в Word-e. Имеет один параметр CLEAR, прекращающий обтекание рисунка. О его использовании - в статье о применении графики.

Тег, запрещающий перевод строки - .... Весь текст, помещенный внутри этого тега, будет выведен браузером в одну строчку. Что Вы и наблюдаете на примере этой строки. Можно все же разрешить браузеру перевести строку в определенном месте текста внутри этого тега, если поставить в соответствующем месте тег .

Заголовок первого уровня.

Заголовок второго уровня с выравниванием по центру.

Заголовок шестого уровня с выравниванием по правому краю.

Тег горизонтальной линии <HR>. Рисует горизонтальную линию. Имеет параметры

ALIGN - выравнивания со значениями LEFT, RIGHT или CENTER.
WIDTH - устанавливает длину линии в пикселях или процентах от окна браузера.
SIZE - устанавливает ширину линии в пикселях.
NOSHADE - отменяет рельефность линии.
COLOR - указывает цвет линии в формате RGB или стандартном имени.

Ну, например:

эта линия нарисована тегом с такими параметрами: <HR ALIGN=RIGHT WIDTH=25% SIZE=20 COLOR=F74C80>.
Тегов, которые употребляются для форматирования текста, довольно много. Часть из них рекомендовано употреблять в таблицах стилей, другая часть отмечены в спецификации HTML-4.0, как устаревшие и их не рекомендуют применять, т.к. браузеры новых версий могут прекратить их поддержку. Рассмотренных нами достаточно, чтобы оформить документ довольно симпатично. В следующей статье я расскажу о применении тегов форматирования шрифтов, а пока у Вас есть время потренироваться в употреблении того, о чем шла речь в этой статье.

Категория: Сооздание сайта | Добавил: odnakomanda (06.08.2008)

Просмотров: 1057 | Рейтинг: 0.0/0 |

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Одна КОМАНДА

Заголовок первого уровня.

Заголовок второго уровня с выравниванием по центру.

Заголовок шестого уровня с выравниванием по правому краю.