ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.09.2024
Просмотров: 53
Скачиваний: 0
|
пример тегов
|
|
|||
|
<img src="ra.gif" alt="Стрелочка" width="47" height="47"> |
|
<А HREF="guidance. html#chapter4.">
А теперь как выглядит программа в HTML-коде:
<HTML>
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font><IMG SRC="064.gif" ALT="текст" ALIGN="Стрелочка" width="47" height="47" ></BODY></HTML>
Шаг6
Горизонтальные линии
В качестве дополнительного элемента оформления Web-страниц можно использовать горизонтальные линии. Этот элемент позволяет отделять друг от друга различные части документа, расположенные на одной странице. Для вставки горизонтальных разделительных линий применяется непарный тег HTML <HR>. Этот тсг имеет следующий формат:
<HR ALIGN=lert|right|center SIZE= Толщина Width =Ширина NOSHADE>
Параметр ALIGN используется для указания режима выравнивания. Линия может быть выровнена по левому краю (значение left), по правому краю (значение right) или по центру страницы (значение center).
Параметр SIZE позволяет указать толщину линии в пикселах.
Параметр WIDTH используется для указания ширины линии. Значение этого параметра может быть задано как в пикселах, так и в процентах относительно ширины страницы. Указание ширины в процентах в большинстве случаев является более предпочтительным, поскольку в этом случае ширина линии будет изменяться в зависимости от размера окна броузера, в котором выполняется просмотр страницы. Если же ширину линии указать в пикселах, то при просмотре страницы в системах с низким разрешением экрана линия может не уместиться в пределах видимого окна броузера.
При использовании параметра NOSHADE линия будет отображаться со сплошной заливкой, в то время как, если этот параметр опущен, броузер будет отображать горизонтальную линию с применением эффекта объема.
В
качестве горизонтальных разделительных
линий можно также использовать графические
элементы. В таком случае линия может
статьдекоративным
элементом, увязанным с общей концепцией
оформления свита.
Для этой цели можно воспользоваться
тегом <IMG>.
А теперь как выглядит программа в HTML-коде:
<HTML>
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font>
<IMG SRC="064.gif" ALT=""Стрелочка" width="147" height="147" >
<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>
</BODY>
</HTML>
Шаг7
Списки
Списки позволяют выделять в тексте документа определенные логические cруктуры, такие как описание последовательности действий, перечни предметов и понятий и т. д. Язык HTML позволяет создавать в Web-документах списки трех различных типов, которые будут рассмотрены в этом разделе книги.
Маркированный список
Маркированные списки служат для оформления перечней различных объектов и понятий, возможных вариантов действий и т. д. Маркированный список представляет собой группу абзацев, в начале каждого из которых ставится специальный символ - маркер.
Для определения маркированного списка язык HTML позволяет использовать тег <UL>...</UL>. Этот тег имеет следующий формат:
<UL ALIGN=center|left|right|justify TYPE=dlsk|circle|square>
<LI ALIGN=center|left| right| justify TYPE=disk|circle|square>ТЕКCT элемента списка</LI>
</UL>
Тег <UL>...</UL> определяет границы списка и общие параметры форматирования всех его элементов. Параметр ALIGN задает режим выравнивания элементов списка аналогично одноименному параметру тега <Р>.. .</Р> (см. раздел <Абзац>). Параметр TYPE определяет тип маркеров списка: при указании значения disk используются круглые закрашенные маркеры, значения circle - круглые незакрашенные маркеры, а значения square - квадратные маркеры.
Текст каждого из элементов списка заключается в пределах парного тега <LI>... </LI>. Параметры этого тега аналогичны параметрам тега <UL>, однако их действие распространяется только на отдельный элемент списка, а не на список целиком.
Нумерованный список
В отличие от маркированного, нумерованный список состоит из набора последовательно пронумерованных абзацев. Для определения маркированного списка в языке HTML применяется парный тег <OL>.. .</OL>. Этот тег имеет следующий формат:
<OL ALIGN=center|left|right|justify SТАRТ=Начальное значение TYPE=A|a|I|i|1>
<LI ALIGN=center|left|right|justify TYPE=A|b|a|I|i|i VALUE=Номер элемента списка>Текст элемента списка</Li>
</OL>
В целом формат этого тега сходен с форматом тега <UL>, требуемого для определения маркированных списков: между открывающей и закрывающей частями тега располагаются элементы списка, каждый из которых определяется с использованием тега <LI>.. .</LI>. Тем не менее тег <01> допускает указание большего количества параметров форматирования, нежели тег <UL>. Рассмотрим эти параметры.
Значение параметра ALIGN определяет режим выравнивания текста в пределах нумерованного списка. Подробнее о режимах выравнивания говорилось в разделе <Абзац>.
Параметр START позволяет указать значение, с которого должна начинаться нумерация списка. Этот параметр полезно использовать, если требуется включить в список ненумерованные элементы, например иллюстрации, таблицы с пояснительной информацией или примеры программного кода.
Значение параметра TYPE определяет тип нумерации списка. Элементы списка могут иметь алфавитную нумерацию (латинский алфавит, значение А или а) либо нумероваться римскими (значение I или i) или арабскими (значение 1) цифрами.
Ter <LI> также позволяет указывать ряд параметров форматирования элементов нумерованного списка. Параметры ALIGN и TYPE имеют то же значение, что и в контексте тега <OL>, однако их действие распространяется лишь на отдельный элемент нумерованного списка, а не на весь список. Кроме того, тег <LI> допускает использование параметра VALUE. Этот параметр позволяет явно указать номер элемента списка. Явное указание номера элемента также приводит к изменению последовательности нумерации. То есть, если для определенного элемента списка был указан параметр VALUE=100, то этот элемент получает номер 100, следующий - номер 101 и т. д. Параметр VALUE позволяет продолжить прерванную ранее нумерацию аналогично параметру START тега <OL>, однако последний подход является более предпочтительным, поскольку облегчает восприятие структуры списка при правке HTML-кода страницы.
А теперь как выглядит программа в HTML-коде(эта программа составлена с маркированным списком). По аналогии мы сами можете составить программу с нумерованным списком.
<HTML>
<HEAD>
<TITLE> Welcome to my home page </TITLE>
</HEAD>
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >
<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ>
<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font><IMG SRC="064.gif" ALT=""Стрелочка" width="147" height="147" >
<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>
<UL ALIGN=center justify TYPE=dlske>
<LI ALIGN=center justify TYPE=disk|>ТЕКCT элемента списка</LI>
<LI> Это вторая строка списка</LI>
<LI> Это третья строка списка</LI> </UL> </BODY> </HTML>
Шаг8
Таблицы
Таблицы широко применяются при создании HTML-документов. Причем их применение не ограничивается размещением данных на страницах - внутри таблиц нередко компонуются отдельные элементы оформления, такие как сложные графические элементы, графические рамки вокруг различных объектов, колонки и т. д.
Для создания таблиц в HTML-документах используется тег <TABLE>...</TABLE>, имеющий следующий формат:
<TABLE ALIGN=left|right|center WIDТН="Ширина таблицы BORDER= "Толщина границы" CELLSPACING="Интервал между ячейками" CELLPADDING="Paзмep полей ячеек">
<TR ALIGN=left right|center|justify VALIGN=top|middle|bottorm>
<TD ROWSPAN=Колличество строк COLSPAN=Колличество столбцов ALIGN=left|right|center|justify VALIGN=top|middle|bottom WIDTH=Ширина ячейки BGCOLOR="Код цвета фона ячейки">Текст ячейки</TD>
</TR>
</TABLE> Рассмотрим назначение отдельных параметров тега TABLE.
Параметр ALIGN определяет режим выравнивания таблицы (но не текста в ячейках таблицы!). Таблица может быть выровнена по центру (значение ALIGN= center), по левому краю (значение ALIGN=left) или по правому краю страницы (значение ALIGN=right).
Параметр WIDTH позволяет указывать ширину таблицы в пикселах или процентах от ширины области окна броузера, отведенной под отображение документа. В первом случае достаточно указать значение ширины, например:
WIDTH=200
При этом, если при отображении таблицы в броузере окажется, что рабочая область экрана не способна уместить таблицу указанной ширины, в окне броузера будет-активизирована горизонтальная полоса прокрутки.
Если необходимо, чтобы ширина таблицы изменялась в зависимости от ширины рабочей области окна броузера, можно указать значение ширины в процентах:
WIDTH=75%
Параметр BORDER определяет толщину линий границы в пикселах. Если границы необходимо скрыть, следует присвоить этому параметру значение 0:
BORDER=0
Каждая из строк таблицы определяется тегом <TR>...</TR>. Этот тег позволяет указывать основные параметры форматирования для каждой из строк таблицы в отдельности.
Параметр ALIGN управляет режимом выравнивания текста в ячейках строки по горизонтали. Эти режимы выравнивания аналогичны режимам выравнивания текста основного абзаца документа. В то же время параметр VALIGN позволяет устанавливать режим выравнивания текста по вертикали. Текст может быть выровнен по верхнему (top) или нижнему (bottom) краю ячейки, а также по середине ячейки (middle).
Все данные, которые должны отображаться в таблице, необходимо размещать в пределах тегов <TD>...</TD>, между их открывающими и закрывающими частями. Положение на странице остальных данных и объектов, размещенных в пределах тега <TABLE>...</TABLE>, но не заключенных между тегами <TD> и </TD>, при их отображении в броузере окажется неопределенным: они могут быть размещены в л Параметр WIDTH определяет ширину ячейки. Ширина может быть указана в пикселах или процентах. В первом случае ширина будет установлена вне зависимости от общей ширины таблицы. При отображении в броузере ячейка таблицы будет иметь указанную ширину, если только эта ширина является достаточной для отображения содержащихся в ячейке данных (в противном случае броузер может выбрать ширину ячейки по собственному усмотрению). При указании процентного значения ширина ячейки будет зависеть от ширины таблицы.
Параметр BGCOLOR позволяет указать цвет фона ячейки. Более подробно коды цветов были рассмотрены в разделе <Раздел основного текста страницы>. Если этот параметр не указан, для ячейки устанавливается <прозрачный> цвет фона; в таком случае фоном для ячейки будет служить основной фон страницы - цвет или рисунок.
Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются параметры ROWSPAN и COLSPAN. Значение этих параметров определяет, соответственно, сколько строк и столбцов должна охватывать соответствующая ячейка.
Чтобы лучше разобраться в структурной организации таблиц, представим ее в несколько упрощенном варианте:
<TABLE>
<TR>
<TН>Заголовок столбца 1</ТН>