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


 

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

11353. Термическая обработка. Превращения при непрерывном охлаждении аустенита. Превращения при отпуске 65.7 KB
  Лекция 7 Термическая обработка. Превращения при непрерывном охлаждении аустенита. Превращения при отпуске. Превращение переохлажденного аустенита можно осуществить в изотермических условиях т.е. при постоянной температуре и при непрерывном охлаждении. Изотермиче...
11354. Операции термической обработки стали. Отжиг стали. Виды отжига. Нормализация. Виды и способы закалки стали. Виды отпуска 78.93 KB
  Лекция 8 Операции термической обработки стали. Отжиг стали. Виды отжига. Нормализация. Виды и способы закалки стали. Виды отпуска. Операции термической обработки стали. Термическая обработка – самый распространенный в современной технике способ изменения свойст
11355. Основы легирования стали. Классификация и маркировка легированных сталей 125.63 KB
  Лекция 9. Основы легирования стали. Классификация и маркировка легированных сталей. Назначение легирования В данной лекции рассматриваются примеси вводимые в стали в определенных концентрациях с целью изменения их внутреннего строения и свойств. Такие примеси ...
11356. Легированные конструкционные стали. Инструментальные легированные стали 316.08 KB
  Лекция 10. Легированные конструкционные стали. Инструментальные легированные стали. КОНСТРУКЦИОННЫЕ СТАЛИ Конструкционные стали должны обладать высокой конструктивной прочностью обеспечивать длительную и надежную работу конструкции в условиях эксплуатации. ...
11357. Поверхностное упрочнение деталей 173 KB
  Лекция 11. Поверхностное упрочнение деталей К основным способам упрочнения металлов и сплавов относятся: легирование с образованием твердых растворов; пластическое деформирование; создание дисперсных выделений; упрочнение термическими методами; упрочнение химико...
11358. Медь, ее маркировка. Латуни (состав, свойства, маркировка и применение). Бронзы (состав, свойства маркировка и применение) 104.39 KB
  Лекция 12 Медь ее маркировка. Латуни состав свойства маркировка и применение. Бронзы состав свойства маркировка и применение. Медь действительно цветной металл: в зависимости от чистоты и состояния поверхности цвет изменяется от розового до красного. Её порядк...
11359. Алюминий и его сплавы, их характеристика. Деформируемые сплавы алюминия. Деформируемые и литейные сплавы алюминия. Порошковые сплавы 317.61 KB
  Лекция 13 Алюминий и его сплавы их характеристика. Деформируемые сплавы алюминия. Деформируемые и литейные сплавы алюминия. Порошковые сплавы. Алюминий – металл серебристобелого цвета имеет кристаллическую ГЦК решетку температура плавления 6600С удельный вес 27
11360. Антифрикционные материалы. Антифрикционные сплавы, применяемые в судовом машиностроении 139.12 KB
  Лекция 14 Антифрикционные материалы Антифрикционные сплавы применяемые в судовом машиностроении К антифрикционным относят материалы которые идут на изготовление различных деталей работающих в условиях трения скольжения. Антифрикционный материал должен обл
11361. Неметаллические материалы. Полимеры и пластмассы 268.83 KB
  Лекция 15 Неметаллические материалы. Полимеры и пластмассы Полимеры от греческого polymeres – состоящий из многих частей многообразный от poly – много и meros – доля часть – соединения с высокой молекулярной массой молекулы которых состоят из большого числа регулярно ил...