12777

Теги тела документа

Практическая работа

Информатика, кибернетика и программирование

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

Русский

2013-05-03

648 KB

5 чел.

Теги тела документа

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

  •  иерархических контейнеров и заставок;
  •  заголовков (от Н1 до Н6);
  •  блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
  •  горизонтальных отчеркиваний и адресов;
  •  текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
  •  математических описаний, графики и гипертекстовых ссылок.

Тело документа – контейнер ВОDY

В отличие от тега НEАD, тег ВОDY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.

В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в 16-ричной нотации. Также имеется возможность задавать цвета по названию Многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.

Первая строка этой таблицы описывается следующим кодом:

<TD>aqua</TD><TD>#00FFFF</TD><TD BGCOLOR=aqua></TD><TD>голубой</TD>

Значения атрибутов в таблице 3.1 определяют цвет текста как синий, фона — белый, пройденные ссылки красные, а новые ссылки зеленые.

Таблица 3.1. Атрибуты

Атрибут

Значение

ВGCOLOR=#FFFFFF

Цвет фона

ТЕХТ=#0000FF

Цвет текста

VLINK =#FF0000

Цвет пройденных гипертекстовых ссылок

LINK =#00FF00

Цвет гипертекстовой ссылки

Если в качестве атрибутов тега ВОDY указать:

<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>

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

Microsoft Internet Explorer(IE) и Netscape Navigator(NN) допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах.

Например, тег <ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.

Теги управления разметкой

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.

Ниже на рисунке показан результат использования следующих заголовков:

<H1>Заголовок 1</H1>

<H2>Заголовок 2</H2>

              


Рис. 3.1. 

Тег <P>

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

Атрибут АLIGN

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

Далее приведены возможные значения атрибута АLIGN:

АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.

АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.

АLIGN=right выравнивание по правому краю. Текст, выравненный по правому краю и не выравненный по левому — концы строк находятся на одном уровне, а начало на разных, — часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.

АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом <АLIGN=сеntеr>. Однако этот тег применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выравненный по левому краю.

Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст "обтекать" графический объект. Для этого следует поместить тег

<IMG SRC="/путь/файл.gif"> туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center.

Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не "обтекал" графику, а прерывался, необходимо применить тег <BR> c атрибутом СLEAR.

Упражнение

1.Создать 2 графических файла  - 1.bmp и 2.bmp.

2.Создать в том же каталоге файл align.htm, иллюстирующий обтекание рисунка 1 –

текстом - слева, рисунка 2 - справа

Использование тега <ВR>

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

 Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:

<BR СLЕАR=lеft> Текст будет продолжен, начиная

с ближайшего пустого левого поля.

<BR СLЕАR=right> Текст будет продолжен, начиная

с ближайшего пустого правого поля.

<BR СLЕАR=аll> Текст будет продолжен, как

только и левое, и правое поля окажутся пустыми.

Элемент разметки <NOВR>

Тег <NОВR> (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <ВR>.

Теги управления отображением символов

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

Теги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. IE и NN позволяют определить шрифт с помощью атрибута FONT. Можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.

Теги <ВIG> и <SMALL> — изменение размеров шрифта

Текст, расположенный между тегами <ВIG></ВIG> или <SMALL> </SMALL>, будет, соответственно, больше или меньше стандартного.

Верхние и нижние индексы <SUР> и <SUВ>

Теги <SUР> и <SUВ> теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги <SUР> и <SUВ> с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.

Упражнение

Создать файл sup_sub.htm, отображающий с помощью тегов <SUР> и <SUВ> алгебраическое выражение: (X2+2X)Y1≥(Y3)x

Атрибут SIZЕ

Атрибут SIZЕ тега <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тегом <BASEFONT SIZE=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается n=3.

Некоторые браузеры тег <FONТ> не поддерживают, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать теги <Н1>, <Н2>, <НЗ> и т.д. Главное преимущество тега <FONТ> состоит в том, что после окончания действия он не разбивает строку, как теги <Нn>.

Тег <FONТ> бывает очень полезен для изменения размера шрифта в середине строки.

Снимок экрана при работе файла FONT size.htm, иллюстрирующего изменение размера шрифта в середине строки

Программный код файла FONT size.htm.

Упражнение

Создать файл FONT SIZE.htm, выводящий на экран фразу, напечатанную обычным шрифром, но обработанную тегом FONT с атрибутом SIZE. На экране должно появиться:

Тег бывает очень полезен для изменения размера шрифта в середине строки.

Для создания голубого фона экрана применить атрибут COLOR тега FONT 

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

Теги, управляющие формой отображения, приведены в таблице.

Таблица 3.3. Теги, управляющие формой отображения

Тег

Значение

<I>...</I> 

Курсив (Italic)

<B>...</B> 

Усиление (Вold)

<TT>...</TT> 

Телетайп

<U>...</U> 

Подчеркивание

<S>...</S> 

Перечеркнутый текст

<BIG>...</BIG> 

Увеличенный размер шрифта

<SMALL>...</SMALL> 

Уменьшенный размер шрифта

<SUB>...</SUB> 

Подстрочные символы

<SUP>...</SUР> 

Надстрочные символы

Упражнение

Создать файл «Теги управляющие формой отображения.htm». Ниже приведен снимок соержимого экрана во время выполнения в среде IE.

Создание списков в HTML

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists <UL>), нумерованный список (упорядоченный) (Ordered Lists <OL>) и список определений. Теги для ненумерованных и нумерованных списков — это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item <LI>), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.

Неупорядоченные списки — тег <UL>

Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

  •  первый элемент списка;
  •  второй элемент списка;
  •  третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

<LI>первый элемент списка

<LI>второй элемент списка

<LI>третий элемент списка

</UL>

Теги <UL> и </UL> — это теги начала и конца ненумерованного списка,

тег <LI> (List Item) задает тег элемента списка. Помимо этих тегов, существует тег, позволяющий именовать списки — <LН> (List Header).

Упражнение

Создать файл «Неупорядоченные списки.htm». На экране при загрузке данного файла должно появиться сообщение:

Неупорядоченные списки — теги <UL>, <LI>, <LН>

  •  элемент уровня 1
    •  ур два 11
    •  ур два 22
      •  третий уровень э1
      •  третий уровень э1
    •  ур два 33
  •  элемент уровня 2
  •  элемент уровня 3
    •  ур два 11

Атрибуты маркеров в ненумерованном списке

Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:

<UL TYPE=DISK>Тег создает сплошные маркеры

такого типа, как в списках первого уровня по

умолчанию.

<UL TYPE=СIRCLE>Тег создает маркеры в виде

окружностей.

<UL TYPE=SQUARE>Тег создает сплошные квадратные

маркеры.

Упорядоченные списки — тег <OL>

Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

<ОL ТYРЕ=l> Тег создает список с нумерацией

в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией

в формате А., В., С., D. и т.д.

<OL ТYРЕ=а> Тег создает список с нумерацией

в формате а., b., с., d. и т.д.

<ОL ТYРЕ=I> Тег создает список с нумерацией

в формате I., II., III., IV. и т.д.

        

Список определений — тег <DL>

Теги списка (Definition List: <DL>, <DT>, <DD>) используют для создания списка терминов и их определений. Схема использования тега следующая.

<DL><DT>Термин</DT> <DD>Определение</DD></DL>

Определяемый термин записывается на одной строке, а его определение — на следующей, с небольшим отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег </DL>. Помните, что тег <DL> сдвигает только левую границу абзаца.

Горизонтальные линейки — тег <НR>

Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.

Комментарии в языке HTML

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

Гипертекстовые ссылки

Все рассмотренные выше средства управления отображением текста, безусловно, важны, но они только дополняют основной тег HTML-документа — гипертекстовую ссылку. Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде

<А НREF="http://www.intuit.ru/index.htm">

Отображаемое название гипертекстовой ссылки

</А>,

  

где значение атрибута HREF — адрес документа "index.htm" на машине "www.intuit.ru", доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов URL и является составной частью технологии WWW.

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

http://user:password@domain.ru:port/path/

some.html?query_string,

  

где http — протокол обмена данными; user — идентификатор пользователя; password – пароль; domain.ru — доменное имя сервера; port — номер TCP-порта, на котором ведет обслуживание сервер; path — путь в корневом каталоге сервера к файлу ресурса; some.html — файл ресурса; query_string — поисковое предписание.

Заданный в таком виде адрес ресурса называется абсолютным или полным адресом ресурса. На практике редко используют все компоненты полного адреса схемы HTTP. Чаще всего первые компоненты опускают. Например, обращение к документу в том же каталоге в гипертекстовой ссылке будет записано просто как имя данного файла. Обращение к CGI-скрипту может выглядеть следующим образом:

<A HREF=../scripts/my_script?query_string>

  

Имя протокола, имя домена, номер порта и другие компоненты начала URL опущены. В этом случае говорят, что ссылка задана частично определенной или неполной формой URL.

Естественно, что браузер при обращении к серверу будет восстанавливать полную форму URL, опираясь на некоторую схему по умолчанию, которая называется базовым URL. Иногда неполную форму URL называют относительным URL, подразумевая, что адрес задается относительно некоторого базового адреса.

По умолчанию в качестве базового используется URL каталога, в котором находится текущий документ. Если URL начинается с символа "." или "..", то это означает исчисление от текущего каталога. Если URL начинается с символа "/", то относительный URL берется от корня каталогов сервера.

В HTML есть элемент разметки BASE (рассмотренный ранее), который позволяет задать или переопределить базовый адрес. Первоначально этот контейнер использовался только в заголовке HTML-документа. Сейчас его применяют как за пределами документа (например, при создании документов HTML-редакторами), так и в теле документа.

Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:

Таблица 3.5.

Атрибут

Значение

ТЕХТ=#000000

Цвет текста (черный)

ALINK=#FF0000

Цвет "активных" гипертекстовых ссылок (красный)

VLINK=#FF00FF

Цвет пройденных гипертекстовых ссылок (пурпурный)

LINK=#0000FF

Цвет гипертекстовой ссылки (синий)

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

<A HREF="http://www.intuit.ru/help/index.html">

Помощь</A>

  

При нажатии на ссылку в окно браузера будет загружен новый документ.

Другой формой использования тега <А> является определение точек внутри текста, на которые можно сослаться. Такой метод применяется в том случае, когда документ нельзя поделить на части и необходимо быстро перемещаться из оглавления в текст:

<А NАМЕ="роint">

  

Для ссылки на такую точку используют следующую форму URL:

<А НREF="http://www.intuit.ru/

index.html#роint">Ссылка на точку "роint" в

документе "index.html"</А>

  

Упражнение

Создать файл «Быстрые клавиши при генерации кода HTML.htm».

Код программы приведен ниже

<html>

<head>

<title>Реакция на загрузку документа</title>

</head>

<body>

<H1>МОЙ ПЕРВЫЙ СКРИПТ</H1>

<HR>

<SCRIPT LANGUAGE="JavaScript">

<!-- скрыто от старых броузеров

document.write("Это броузер версии " + navigator.appVersion)

document.write(" от <B>" + navigator.appName + "</B>.")

// окончание сценария -->

</SCRIPT><BR><BR><BR><BR><H5>

 

CTRL+S для сохранения исправлений,

<BR>

в текстовом редакторе <BR>

</H5>

<H5> ALT+TAB для переходов между

<BR>

окном броузера и текстовым редактором</H5>

<H5>

 CTRL+R для перезагрузки окна броузера,

<BR>с учетом внесенных исправлений</H5>

</body>

</html>

PAGE  8


 

А также другие работы, которые могут Вас заинтересовать

13502. Сергей Александрович Есенин 31 KB
  Сергей Александрович Есенин Сергей Александрович Есенин родился в селе Константинове Рязанской губернии в крестьянской семье. С малолетства воспитывался у деда по матери человека предприимчивого и зажиточного знатока церковных книг. Окончил четырехклассное сель...
13503. Фет Афанасий Афанасьевич 35 KB
  Фет Афанасий Афанасьевич 1820 1892 Русский поэт настоящая фамилия Шеншин членкорреспондент Петербургской Академии Наук 1886. Насыщенная конкретными приметами лирика природы мимолетные настроения человеческой души музыкальность: Вечерние огни сборники 1 4 ...
13504. ЛЕРМОНТОВ Михаил Юрьевич 29 KB
  ЛЕРМОНТОВ Михаил Юрьевич 1814-1841 Брак родителей Лермонтова богатой наследницы М. М. Арсеньевой 1795-1817 и армейского капитана Ю. П. Лермонтова 1773-1831 был неудачным. Ранняя смерть матери и ссора отца с бабушкой Е. А. Арсеньевой тяжело сказались на формировани...
13505. Владимир Владимирович Маяковский 33.5 KB
  Владимир Владимирович Маяковский 1893-1930 Выдающийся советский поэт Владимир Владимирович Маяковский родился в селе Багдады недалеко от Кутаиси в Грузии.В 1910 году студент Строгановского училища живописи ваяния и зодчества В. Маяковский сблизил...
13506. Некрасов. Н.А. 41.5 KB
  Некрасов. Н.А. 1821 1877 Родился 28 ноября 10 октября н.с. в местечке Немирове Подольской губернии в семье мелкопоместного дворянина. Детские годы прошли в селе Грешневе в родовом имении отца человека деспотического характера угнетавшего не только крепостных но и св...
13507. Тютчев Федор Иванович 63 KB
  Тютчев Федор Иванович Тютчев Ф. И. известный поэт один из самых выдающихся представителей философской и политической лирики. Родился 23 ноября 1803 года в селе Овстуг Брянского уезда Орловской губернии в родовитой дворянской семье зимою жившей в Москве открыто и богат...
13508. Цветаева М.И. 50.5 KB
  Цветаева М.И. 18921941 Марина Ивановна Цветаева 18921941 писать стихи начала рано. Первая ее книга Вечерний альбом вышла в 1910 году. В дореволюционном творчестве Цветаевой можно выделить два периода: период ранних стихов полудетских девичьих признаний сборник...
13509. Пушкин А.С. 93 KB
  Пушкин А.С. Александр Сергеевич Пушкин родился 6 июня по старому стилю 26 мая 1799 года в Москве в небогатой дворянской семье однако числившую в предках и бояр времен чуть ли не Александра Невского и царского арапа Абрама Петровича Ганнибала. 19 октября 1811 г
13510. ЕВТУШЕНКО Е.А. 131 KB
  ЕВТУШЕНКО Е.А. 1932 р. Родился 18 июля на станции Зима Красноярской области. Его отец был геологом но всю жизнь писал стихи и научил сына любить поэзию. Когда семья переехала в Москву будущий поэт во время учебы в школе занимался в поэтической студии Дворца пионеров...