Bgcolor и Background

Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом «атрибуты»? И, главное, каким образом разместить всю нашу красоту? Короче, вопросов — множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!

Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!

Фон, или как принято называть задний фон в переводе на английский означает «background». Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один — background, а другой — bgcolor.

Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?

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

Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в блокнотике NotePad и внесу следующие изменения:

<html> <head> <title>Моя Домашняя Страничка</title> </head> <body bgcolor=blue> <img class="lazy lazy-hidden" decoding="async" data-flat-attr="yes" alt="Body bgcolor" src="//www.easydoit.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="/wp-content/uploads/5c469544ed4925c469544ed4ee.jpg"><noscript><img decoding="async" data-flat-attr="yes" alt="Body bgcolor" src="/wp-content/uploads/5c469544ed4925c469544ed4ee.jpg"></noscript> Ура! Привет мир! Привет люди! Встречайте! </body> </html>

Сохраним наше творение под тем же именем и посмотрим, что получилось (рис. 15):

Body bgcolor
Рис. 15. Я на синем фоне.

Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут — background.

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

<html> <head> <title>Моя Домашняя Страничка</title> </head> <body bgcolor=blue background="foto/myfotot01.jpg"> Ура! Привет мир! Привет люди! Встречайте! </body> </html>

Сохраняем этот файл и смотрим, что у нас получилось (рис.16):

Body bgcolor
Рис. 16. Вот оно — фоновое изображение!

Что ж, с одной стороны, приятно видеть столько приятных людей в одном месте, но с другой стороны…ну куда столько??? Однако, отбросив шутки в сторону, можно понять, что же сделал атрибут background — он просто взял и размножил исходное изображение, заполнив им весь экран.

Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения. Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 376 пикселей. Вот и подберем такое изображение.

Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 376, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:

<html> <head> <title>Моя Домашняя Страничка</title> </head> <body bgcolor=blue background="foto/fonsea.jpg"> Ура! Привет мир! Привет люди! Встречайте! </body> </html>

Опять сохраняем и смотрим результат (рис. 17):

Body bgcolor
Рис. 17. И вот оно — море! Играет, шумит на просторе…

Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей!

Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина (рис.18):

Body bgcolor
Рис. 18. Печально я гляжу на это отраженье…

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

Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку «без швов». То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа Adobe Photoshop.

Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из интернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.

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

И этим делом мы обязательно займемся на следующем уроке.

www.dikarka.ru

Давно я не писал уроков HTML, но сегодня решил это исправить — нужно продолжать изучать HTML язык. Итак, сегодня я расскажу про то, что такое «тело» сайта и немного про атрибуты данного тега.

«Тело» сайта — разговорный термин среди программистов и HTML верстальщиков. Под выражением «тело» сайта подразумевают теги

<body>

и

</body>

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

Тегу «body» можно задать атрибуты, например фон страницы или цвет текста. Фон HTML страницы задает атрибут bgcolor:

<BODY bgcolor="#00ff00"></BODY> 

Цвет страницы можно задать как шестнадцатизначным номером цвета, так и его названием из стандартной палитры цветов:

<BODY bgcolor="Green"></BODY>

Чтобы задать цвет текста, используется атрибут text. Оформляется он почти так же, как и атрибут bgcolor:

<BODY text="Red"></BODY>

либо

<BODY text="#FF0000"></BODY>

Атрибуты «bgcolor» и «text» можно использовать и одновременно:

<BODY bgcolor="Green" text="Red"></BODY>

Вместо bgcolor можно использовать другой атрибут — background. Этот атрибут позволяет назначить в качестве фона HTML страницы — картинку.

Еще по теме:   Как использовать тег div в HTML

Оформляется этот атрибут следующим способом:

<BODY background="http://site.site/kartinka.jpg">

где site.site — адрес вашего сайта, а kartinka.jpg — изображение, которое будет фоном вашей HTML страницы.

Пример элементарного шаблона сайта с использованием атрибутов тега «body»:

<HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <meta name="keywords" content="ключевые, слова" /> <meta name="description" content="описание сайта" /> <title>Наш сайт!</title> </HEAD> <BODY bgcolor="Green" text="Red"> Атрибуты тега "Body"!!!  </BODY></HTML>

Скачать пример HTML шаблона: stranichkahtml.zip

Пример получился, конечно, не ахти, поэтому впереди Вас ждет ещё много уроков HTML!

Бюро Погодаева — продвижение сайта цены
Почта: [email protected]
Телефон: +7(495)966-28-77

При верстке шаблонов и дизайнов верстальщики редко используют атрибуты тега «body», обычно эти параметры задаются в CSS. Как подключить css-стили к шаблону можно прочитать в Уроке №3: Как подключить CSS стили оформления в шаблоне?. О том, как правильно оформить «тело» сайта, я расскажу в следующем уроке №5. И помните, что создание HTML сайта не так сложно, как это кажется в начале!

zedpost.ru

Тег <body> (парный) предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору <body>. Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.

Часто тег <body> используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

Синтаксис
<body>

</body>

Закрывающий тег
Обязателен.

Параметры
alink — устанавливает цвет активной ссылки.
background — задает фоновый рисунок на веб-странице.
bgcolor — цвет фона веб-страницы.
bgproperties — определяет, прокручивать фон совместно с текстом или нет.
bottommargin — отступ от нижнего края окна браузера до контента.
leftmargin — отступ по горизонтали от края окна браузера до контента.
link — цвет ссылок.
scroll — устанавливает, отображать полосы прокрутки или нет.
text — цвет текста в документе.
topmargin — отступ от верхнего края окна браузера до контента.
vlink — цвет посещенных ссылок.

Пример 1. Использование тега BODY

Описание параметров тега BODY

Параметр ALINK

Описание
Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры.

Синтаксис
<body alink=цвет>…</body>

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию
Совпадает с цветом ссылки.

Пример 2. Изменение цвета активной ссылки

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
<body background=URL>…</body>

Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Пример 3. Установка фонового рисунка на веб-странице

Параметр BGCOLOR

Описание
Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис
<body bgcolor=цвет>…</body>

Аргументы
См. параметр ALINK.

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

Пример 4. Установка цвета фона веб-страницы

Параметр BGPROPERTIES

Описание
По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя параметр bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным.

Синтаксис
<body bgproperties=fixed>…</body>

Аргументы
Существует только один параметр fixed, который фиксирует фон. Если требуется убрать эту возможность, удалите параметр bgproperties у тега BODY или установите у него пустое значение — «».

Значение по умолчанию
Нет.

Пример 5. Фиксирование фона

Примечание

  • Не все браузеры поддерживают этот параметр, например, Netscape его игнорирует.
  • Замечено, что при установке фонового рисунка на веб-странице через стили, параметр bgproperies перестает работать.

Параметр LEFTMARGIN

Описание
Определяет отступ от левого и правого края окна браузера до контента веб-страницы.

Еще по теме:   Как центрировать текст в HTML: шаг за шагом инструкция

Синтаксис
<body leftmargin=число>…</body>

Аргументы
Целое положительное число, которое устанавливает отступ в пикселях.

Значение по умолчанию
10 пикселов для Windows и 8 пикселов для Macintosh.

Пример 6. Изменение отступа слева

Примечание

  • Браузер Netscape не понимает параметр leftmargin, для установки отступов в нем используются параметры marginwidth — отступы по горизонтали и marginheight — отступы по вертикали.
  • Для задания отступов от правого, нижнего и верхнего края применяются, соответственно, параметры rightmargin, bottommargin и topmargin.

Параметр LINK

Описание
Устанавливает цвет не посещенных ссылок.

Синтаксис
<body link=цвет>…</body>

Аргументы
См. параметр ALINK.

Значение по умолчанию
#0000FF

Пример 7. Установка цвета ссылок

Параметр SCROLL

Описание
Параметр scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна. Этот параметр работает только в браузере Internet Explorer.

Синтаксис
<body scroll=yes | no>…</body>

Аргументы
yes — отображает полосы прокрутки.
no — запрещает показ полос прокрутки в окне.

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

Пример 8. Сокрытие полосы прокрутки

Параметр TEXT

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

Синтаксис
<body text=цвет>…</body>

Аргументы
См. параметр ALINK.

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

Пример 9. Изменение цвета текста

Параметр VLINK

Описание
Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».

Синтаксис
<body vlink=цвет>…</body>

Аргументы
См. параметр ALINK.

Значение по умолчанию
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

Пример 10. Установка цвета посещенных ссылок

Материал взят с сайта htmlbook.ru

in-sites.ru

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

Англоязычные названия цветов были введены фирмой Netscape и впервые реализованы в Netscape Navigator 3.0, сейчас поддерживается 140 таких

названий. Ранние версии браузеров распознавали всего 16 стандартных цветов.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Так, например для задания красного цвета фона следует записать: </div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font face=”Arial”>&lt;BODY BGCOLOR=&quot;red&quot;&gt;</font></div>

<div align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;При задании цвета по названию необходимо точно придерживаться его написания, в противном случае в качестве фонового будет использован цвет,

устанавливаемый по умолчанию (белый). <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Цвета могут быть заданы и цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных

цветах — красном (red), зеленом (green) и синем (blue) — и обозначается RGB. Для каждого цвета

Задается цестнадцатеричное значение в пределах от 00 до FF, что соответсвует диапазону от 0 до 255 в десятеричном исчислении. Эти значения объединяются в одно число, перед которым ставится символ #.

Например, число #FF0000 обозначает красный цвет.</div>

<p><a name=”r2”><font size=”+1”><b>Использование фонового изображения</b></font></a></p>

<div align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;Фоновое изображение включается в

документ при помощи параметра BACKGROUND тэга BODY. Значением параметра BACKGROUND является URL-адрес изображения, которое используется в качестве фонового.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Фоновым

Изображением должен быть графический файл формата GIF или JPEG. Фоновое изображение всегда заполняет все окно просмотра web-страницы. Если размер

Изображения меньше размера окна, то оно

Многократно дублируется по принципу мозаики.

Обычно в качестве фонового используется небольшое изображение, для загрузки по сети которого

требуется немного времени.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Если

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

чтобы при просмотре текст страницы &quot;скользил&quot; по нему. Этого можно достичь, если задать значение FIXED параметра BGPROPERTIES тэга BODY.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Пример: </div>

<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font face=”Arial”>&lt;BODY BACKGROUND=&quot;images/clouds.jpg&quot; BGPROPERTIES=&quot;fixed&quot;&gt;</font></div>

</td><td width=”27%” valign="top"><p><font size=”2”><b>Рекомендуемая литература:</b></font> </p><p><font size=”2”>Матросов А., Сергеев А., Чаунин М. HTML 4.0. — СПб.:БХВ-Петербург, 2000.</font><br><font size=”2”><i>Подробное

Описание языка HTML и других современных средств форматирования HTML-документов. Объектная модель браузера, таблицы каскадных стилей CSS, скрипты JavaScript. Создание web-страниц с помощью

текстового редактора Word.</i></font></p>

<p><font size=”2”>Омельченко Л.Н., Федоров А.Ф.

Самоучитель Microsoft FrontPage 2000. — СПб.: БХВ-Санкт-Петербург, 1999.</font><br><font size=”2”><i>Общие сведения о сервисах Internet, подключение к Internet домашнего компьютера,

Полное руководство по работе с браузером Internet Explorer 5.0, работа с электронной почтой (MS Outlook). Подробное описание возможностей

редактора FrontPage 2000 по созданию web-страниц. Использование сложных элементов для оформления web-страниц. Создание форм в FrontPage.</i></font> <br><font size=”2”><i>Размещение данных,

подготовленных в приложениях MS Office (Word, Excel, Access), на web-страницах.</i></font></p>

</td>

</tr>

<tr><td><p align=”center”>

<a href=”#verh”>наверх</a></p></td>

<td></td></tr>

<tr><td width=”88%” colspan=”2”>Посетите сайт

Инжэкона

<a href=”http://www.engec.ru”>www.engec.ru</a> &nbsp;&nbsp;&nbsp;&nbsp;Напишите письмо на кафедру Вычислительных систем и программирования

<a href=”mailto:[email protected]?subject=дисциплина &quot;Создание web-страниц&quot;”>[email protected]</a> </td></tr>

</table>

</div>

</body>

</html>

СПИСОК РЕКОМЕНДУЕМой ЛИТЕРАТУРы

 

1. Дунаев В.В. Основы WEB дизайна: самоучитель. – СПб.: БХВ-Петербург, 2006. – 504 с.

2. Исси Коэн Л., Исси Коэн Дж. Полный справочник по HTML, CSS и JavaScript: справочник профессионала. – М.: ЭКОМ, 2007. — 1166 с.

3. Левин М.П., Алексеев Ю.М. 2 в 1: Самоучитель разработки Web-сайтов: HTML, CSS, графика, анимация, раскрутка + Видеокурс – М.: Триумф, 2007. – 397 с.

4. Ноблес Р., Греди К.-Л. Эффективный Web-сайт: разработка, дизайн, маркетинг. Учебное пособие. – Москва: Триумф, 2005. – 559 с.

5. Программные средства разработки web-страниц. FrontРage 2003. М/у по выполнению лаб. раб. для студентов всех специальностей. / Васильева И.Н. – СПб: СПбГИЭУ, 2006. – 53 с.

6. Создание Web-страниц и Web-сайтов: cамоучитель./под ред. Печникова В.Н. – М.: Триумф, 2006. – 459 с.

7. Спека М.В. Создание Web-сайтов: самоучитель. – М. [и др.] : Диалектика, 2007. – 277 с.

8. Хольцшлаг М. 250 секретов HTML и Web-дизайна. – М.: NT Press, 2006. – 490 с.

9. Хольцшлаг М.Э. Языки HTML и CSS: для создания Web-сайтов: офиц. учеб. курс. Учебное пособие. – М.: Изд-во Триумф, 2006. – 303 с.

10. Анисимова И.Н. Основы разработки web-узлов и страниц. Учебное пособие. – СПб.: СПбГИЭУ, 2002. – 109 с.

11. Браун М., Хоникатт Д. Использование HTML 4: Специальное издание/Под ред.Петриковца Г.П. – М.-СПб-Киев: Издат.дом «Вильямс», 1999. – 779 с.

12. Использование приложений MS Office 2000 в Интер- и Интра-сетях. М/у для выполнения лаб. раб. по дисциплине «Учебная практика по информационным технологи­ям в экономике». Спец. 060800, 521500, 062200. / Рамин Е.Л., Анисимова И.Н. – СПб: СПбГИЭУ, 2003. – 44 с.

13. Матросов А., Сергеев А., Чаунин М. HTML 4.0. – СПб.: БХВ-Петербург, 2000. – 672 с.

Приложение 1

Еще по теме:   Перенос текста на новую строку в HTML: код и примеры

 

ОСНОВЫ ЯЗЫКА РАЗМЕТКИ HTML

Принципы построения HTML документа

Web-страницы являются гипертекстовыми и гипермедийными документами, которые могут содержать графику, аудио- и видео- информацию и ссылки на другие ресурсы сети Internet. Web-страницы создаются с помощью языка гипертекстовой разметки HTML (HyperText Markup Language). Просмотр Web-страниц осуществляется специальными программами – браузерами, содержащими интерпретатор языка HTML.

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

· HTML документ выглядит как совокупность текстовых фрагментов, каждый из которых окружен тэгами (tags).

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

<тэг параметр1=значение1 параметр2=значение2 …>Текст1</тэг>

Действие тэга распространяется на фрагмент текста «Текст1». Значения параметров рекомендуется заключать в двойные кавычки.

Первый тэг называется открывающим, а парный ему — закрывающим. Закрывающий тэг имеет тот же идентификатор, но начинается с символа /. Тэги, не предусматривающие наличие вложенного текста, называются пустыми или непарными, они не имеют закрывающей части. Непарные тэги имеют вид:

<тэг параметр1=значение1 параметр2=значение2 …>

Пример:

<P ALIGN=”left”>Текст2</P> – Выделить «Текст2» в отдельный абзац с выравниванием по левому краю.

<HR> – Вставить горизонтальную линию.

· Внутри одного тэга может находиться произвольное количество тэгов.

· Интерпретация текста HTML документа производится сверху вниз. В том случае, если браузер не опознает тэг или его отдельные атрибуты, они игнорируются. Сообщения об ошибке выводится только для тэга сценария.

· Все символы управления текстом в HTML документе (несколько пробелов подряд, табуляция, перевод строки и т.п.) заменяются одиночным символом пробела.

· Строчные и прописные символы в именах (идентификаторах) тэгов и их атрибутов, как правило, не различаются.

Любой HTML документ начинается с открывающего тэга <HTML> и заканчивается парным закрывающим тэгом </HTML>. Любой HTML документ разделен на две части: головную (head) и основную (body). Головная часть содержит информацию о документе в целом, а основная – собственно текст документа. Для того чтобы отделить эти части друг от друга используются одноименные тэги разметки.

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

Пример простейшего HTML документа:

<HTML>

<HEAD>

<META HTTP-EQUIV=”Content-Type”

CONTENT=”text/html; CHARSET=windows-1251”>

<TITLE>Простая страница</TITLE>

</HEAD>

<BODY>

<P>Текст, выводимый на экран.</P>

</BODY>

</HTML>

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

 

Таблица 1.

Основные тэги

Тэг Значение тэга
HTML Тэг, ограничивающий весь HTML документ в целом.
HEAD Головная часть, содержащая информацию об HTML документе в целом.
TITLE Титульная строка — обязательный элемент головной части HTML документа. Используется как заголовок окна, в котором отображается документ.
BODY Основная часть HTML документа, содержащая текст, связи с другими документами, ссылки и др.
  Параметры тэга BODY BACKGROUND – адрес фонового изображения; BGCOLOR – цвет фона документа, задается англоязычными названиями цветов (напр. GREEN) или шестнадцатеричными значениями RGB (напр. #008000); TEXT – цвет текста страницы; ALINK, LINK, VLINK – цвет активных, еще не просмотренных и уже просмотренных ссылок; TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN – поля документа в пикселях (точках).

Тэги физического форматирования текста

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

К тэгам уровня блока относятся тэги параграфа P и DIV, тэг горизонтального центрированного текста CENTER, тэг блока с отступом BLOCKQUOTEи др. Кроме того, для разделения документа на части используются непарные тэги: перевода строки BR и горизонтальной линии HR.

Для тэгов P иDIV определен параметр ALIGN, задающий горизонтальное выравнивание текста. Он может принимать значения LEFT (по левой границе), CENTER (по центру), RIGHT (по правой границе) и JUSTIFY (по ширине). По умолчанию используется выравнивание по левой границе. Параметр ALIGN определен также для тэга HR со значениями LEFT, CENTER и RIGHT.

Для форматирования символов текста используются последовательные тэги I (курсив),B (жирный), U (подчеркивание), S (зачеркнутый текст), SUB (нижний индекс), SUP (верхний индекс) и тэги управления шрифтами FONT (текущий шрифт), BASEFONT (шрифт по умолчанию) и др.

Тэги FONT и BASEFONT задают размер шрифта в условных единицах от 1 до 7 с помощью параметра SIZE, имя шрифта (параметрFACE) и его цвет (параметр COLOR).

Организация связей

Для связи информационных фрагментов между собой в гипертекстовом документе используются однонаправленные ссылки, называемые гиперссылками. Могут присутствовать гиперсвязи различных типов. Для WWW актуальны следующие типы ссылок: на метку внутри текущей web-страницы; на другой документ web; на метку в теле другой web-страницы; на web-узел.

Меткаотмечает конкретное место на страницы, в которое будет осуществлен переход, это именованная строка в HTML документе. Ссылка на другую web-страницу всегда осуществляет переход на ее начало. Для организации перехода в другое место страницы следует указать саму страницу и установленную внутри нее метку. Ссылка последнего типа – это обычно ссылка на корневой каталог Web-узла, откуда есть доступ ко всем принадлежащим узлу страницам; имя конкретной страницы не указывается и переход осуществляется на стартовую страницу узла.

Любой ресурс WWW может быть указан с помощью универсального идентификатора – URL (Uniform Resource Locator). URL определяет:

— протокол доступа к документу,

— имя и адрес сервера в Internet, содержащего этот Web-документ,

— местоположение документа в общей структуре Web-сервера.

В общем виде URL выглядит следующим образом:

cyberpedia.su

Поделиться:
Нет комментариев

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

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

×
Рекомендуем посмотреть
Adblock
detector