Рефераты
 

Основные тенденции и проблемы в области разработки и применения информационных технологий

p align="left"> <H1 ALIGN=”LEFT”>Привет! </H1>

<H2 ALIGN=”CENTER”>Сегодня чудесный день! </H2>

<H3 ALIGN=”RIGHT”>И у меня отличное настроение</H3>

Последовательное и сообразное использование заголовков разных уровней существенно облегчит восприятие информации читателями. Заголовки имеют логическое значение. Во избежание путаницы старайтесь не использовать в пределах одной Web-страницы заголовки более трех различных уровней вложенности. Предполагается, что заголовки в документе должны использоваться по порядку, чтобы наименее важные заголовки были вложены в наиболее важные, либо стояли после них. При соблюдении логического характера заголовков страница легче поддаётся индексации, а также в ней можно реализовать некоторые схемы работы с документами, которых пока ещё нет в браузерах. Например, браузер может вывести пользователю весь Web-документ, показав ему только заголовки, которые при надобности можно раскрывать. В большинстве браузеров данный способ просмотра не предусмотрен, но его можно создать с помощью таких средств программирования, как, например Java или динамический HTML.

<DIV>: создание раздела документа. Элемент <DIV> используется для разбивания HTML-документов на разделы или части. С помощью атрибута ALIGN любую часть раздела можно выровнять по правой, левой стороне, по ширине или по центру. По умолчанию текст в элементе выравнивается по левой стороне. Допускается вложение раздела в раздел. Пустых строк сверху и снизу раздела не создается. Разделы используются при оформлении части документа с помощью таблиц стилей, при вызове сценария, и особенно для движущейся по экрану области.

Центрированный текст. Для того, чтобы выровнять по центру текст или внедренные объекты, например изображения, достаточно окружить его тегами <CENTER> и </CENTER>. Элемент <CENTER> - это просто укороченная запись элемента <DIV ALIGN=”CENTER”>, который оказывает на текст то же действие. В следующем примере демонстрируется использование элементов <CENTER> и <DIV>:

<CENTER>

<H1>Пример элемента CENTER</H1>

<P>Данный абзац выровнен по центру с помощью тега CENTER </P>

</CENTER>

<DIV ALIGN=”RIGHT”>

<H1>Пример элемента DIV </H1>

<P>Одним элементом DIV можно влиять сразу на несколько абзацев и другие элементы </P>

<P>Обратите внимание, что все абзацы выровнены по правой стороне.</P>

</DIV>

<BLOCKQUOTE>: создание блока цитаты. Для создания блоков цитат, выделенных на фоне остального текста, применяется элемент <BLOCKQUOTE>. Текст, помещаемый между тегами <BLOCKQUOTE> и </BLOCKQUOTE>, как правило, выводится с отступами слева и справа. Сверху и снизу добавляется по одной пустой строке. Ограничений на объем текста, который может быть включен в блок цитаты, не существует. Как и в случае с абзацами, все пробелы, символы табуляции и перевода строки внутри данного элемента игнорируются, а для изменения перехода текста на следующую строку и добавления нескольких пустых строк используется элемент <BR> или другие элементы. Допускается вложение внутрь другого элемента <BLOCKQUOTE>. В следующем примере демонстрируется использование элемента цитаты:

Раздел 1

<BLOCKQUOTE>Содержимое раздела 1 представляет собой текст, текст, текст и еще раз текст.

<BLOCKQUOTE> Вложенный раздел. Содержимое вложенного раздела также представляет собой текст, текст, текст и еще раз текст. </BLOCKQUOTE>

</BLOCKQUOTE>

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

Как правило, браузер выводит подобный предварительно форматированный текст с помощью моноширинного шрифта, обычно это шрифт Courier. Внутри элемента <PRE> можно пользоваться некоторыми элементами форматирования, например <B>,<I>, помещать ссылки.

Пример использования элемента <PRE> :

<PRE>

Это П Р Е Ф О Р М А Т И Р О В А Н Н Ы Й

Т

Е

К

С

Т

Все пробелы на месте! А также и символы перевода строки

</PRE>

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

<P>Это первый абзац. <BR>

А это его вторая строка. </P>

<BR><BR><BR>

<P>А это второй абзац. Обратите внимание на свободное место, появившееся между абзацами с помощью тегов BR. </P>

<NOBR>: Отменить разрыв строки. Парный тег. Выводит текст, помещенный в него, без перехода на другую строку. Браузеру запрещается переход на следующую строку. Если все же нужно перейти на следующую строку, то используйте внутри текста тег <BR>. Пример использования:

<NOBR> Этот текст никогда не будет перенесен броузером. <BR> Но следующее предложение всегда будет идти двумя строками ниже. <BR>. <BR>. Следующее предложение. </NOBR>

<ADDRESS>: текст адреса. Парный тег. Отображается курсивом в виде отдельного абзаца с вставкой перед блоком текста и после него по одной пустой строке. Элементом <ADDRESS> окружают, например, подпись автора страницы или адрес организации, которой посвящена страница. Он может окружать несколько строк текста, форматирующие элементы, изменяющие характеристики шрифта, и даже рисунки. Согласно спецификации в нем нельзя использовать другие элементы уровня блока. Пример использования элемента <ADDRESS>:

Адрес:

<ADDRESS>

Москва, ул. Радио, д.22.<BR>

Телефон/факс 263-64-43 </ADDRESS>

4.7 Списки

Существует три основных вида списков в HTML-документе: нумерованный, маркированный и список определений.

Нумерованные списки - полезный инструмент представления элементов данных, следующих в определенном порядке (например, в инструкциях или оглавлениях). Браузер автоматически вставляет номера элементов по порядку. Это означает, что при удалении одного или нескольких элементов нумерованного списка, остальные номера будут автоматически пересчитаны.

Пронумерованный список начинается стартовым тегом <OL> и завершается тегом </OL>. Каждый элемент списка начинается с тега <LI>.

Пример: <OL>

<LI> Проектирование

<LI> Алгоритмизация

<LI> Программирование

</OL>

Атрибуты элемента <OL>:

TYPE=A | a | I | I |1___вид счетчика

START=n __________число, с которого начинается отсчёт

Значения атрибута Type:

A - большие латинские буквы (А,В,С…)

a - маленькие латинские буквы (a,b,c…)

I - большие римские цифры (I,II,III…)

i - маленькие римские цифры (i,ii,iii…)

1 - обычные цифры (1,2,3…)

Атрибут VALUE позволяет принудительно назначить любому элементу требуемый номер.

Пример: <H5>Список участников матча</H5>

<OL START=3>

<LI> Иванов И.

<LI> Петров П.

<LI VALUE=”7”> Сидоров С.

<LI> Смирнов А.

</OL>

Маркированные списки применяются в тех случаях, когда необходимо перечислить текстовые элементы, следующие в произвольном порядке, такие как наименования продуктов или адреса Web-сайтов. Маркированный список начинается стартовым тегом <UL> и завершается тегом </UL>. Каждый элемент списка начинается с тега <LI>. Для пометки элемента списка броузер использует маркер. Вид маркера задается атрибутом TYPE элемента <UL>.

Значения атрибута Type:

square - квадрат ()

disc - закрашенный кружок () - используется броузерами по умолчанию

сircle - пустой кружок ()

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

<UL TYPE=”circle”>

<LI> Яблоки

<LI TYPE=”disc”> Морковь

<LI >Груши

<LI> Персики

<LI TYPE=”disc”> Свекла

</UL>

Списки определений, содержащие наименования терминов и их определения, - незаменимое средство форматирования текстов толковых словарей. Список определений начинается с тега <DL> и завершается тегом </DL>. Каждый термин начинается тегом <DT>, а описание - тегом <DD>. ни для <DT>, ни для <DD> закрывающий тег не нужен, но в случае длинных определений он не помешает.

пример:

<DL>

<DT><B> Интернет</B></DT>

<DD>Так называется всемирная сеть сетей, которая использует набор сетевых протоколов TCP/IP.</DD>

<DT><B> Доменное имя</B></DT>

<DD>Буквенно-цифровое название для обозначения сети или узла в сети

</DL>

Вывод в браузере примера со списками определений:

Многоуровневые (или смешанные) списки.

Списки можно вкладывать друг в друга на любую глубину. Многие авторы HTML-документов пользуются этим для получения отступа в тексте. Величина отступа меняется в зависимости от размера шрифта в броузере, поэтому точно ее определить невозможно. Для получения отступа чаще используют неупорядоченные списки, нежели списки определений, т.е. элемент <UL> применяется чаще, чем <DL>. Это связано с тем, что <UL> для получения результата требует меньшего количества элементов. Пример создания отступов с помощь списков.

4.8 Создание линий с помощью элемента <HR>

Горизонтальная линия, обозначаемая элементом <HR>, используется для наглядного разделения HTML-документа. <HR> может иметь и логический смысл в качестве разделителя между разделами документа. Элемент <HR> - пустой и не требует закрывающего тега, т.к. не окружает никаких данных. Наиболее часто в элементе <HR> используются следующие атрибуты: ALIGN (управляет выравниванием по горизонтали), NOSHADE (отключает вывод тени), SIZE (задает толщину линии в пикселах) и WIDTH (задает ширину линии в пикселах или процентах). Ниже приведены примеры использования горизонтальной линии и её основных атрибутов:

<BODY>

<P>HR с толщиной 10</P> <HR SIZE=”10”>

<P>HR с шириной 50% толщиной 3 и без тени </P>

<HR WIDTH=”50%” SIZE=”3” NOSHADE>

<P>Ширина 100, выравнивание вправо</P>

<HR ALIGN=RIGHT WIDTH=”100”>

<P> Ширина 100, выравнивание по центру</P>

<HR ALIGN=”CENTER” WIDTH=”100”>

</BODY>

4.9 Элементы уровня текста и символьные примитивы

Текст внутри элементов уровня блока может быть отформатирован с помощью элементов уровня текста. Эти элементы делятся на два основных вида - физические и логические. Физические элементы, такие как <B> - полужирный шрифт или <I> - курсив, используются для указания, как текст будет отображаться на экране. Логические элементы, как, например, <STRONG> и <EM>, обозначают, что необходимо сделать с текстом, но не обязательно говорят о том, как он будет выглядеть на экране.

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

Элемент

Описание

<I>… </I>

Курсив

<B>… </B>

Полужирный шрифт

<TT>… </TT>

Моноширинный шрифт

<U>… </U>

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

<STRIKE>… </STRIKE>

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

<S>... </S>

Еще один элемент перечеркивания

<SUB>... </SUB>

Нижний индекс

<SUP>... </SUP>

Верхний индекс

<BIG>... </BIG>

Увеличенный шрифт (на один пункт больше)

<SMALL>... </SMALL>

Уменьшенный шрифт (на один пункт меньше)

5. Элементы логического форматирования текста

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

Элемент

Описание

<CITE>… </CITE>

выделение цитат курсивом

<CODE>… </CODE>

отображение фрагментов программы моно-ширинным шрифтом

<DFN>… </DFN>

Определение

<EM>… </EM>

Выделение важных фрагментов курсивом

<KBD>… </KBD>

Текст, вводимый с клавиатуры, отображается моноширинным шрифтом

<SAMP>... </SAMP>

Выделение нескольких символов моно-ширинным шрифтом

<STRONG>... </STRONG>

Выделение особо важных фрагментов полужирным

<VAR>... </VAR>

Названия переменных в программе отображаются курсивом

Символьные примитивы. Иногда необходимо вставить в текст специальные символы. Это могут быть, например, буквы с ударениями, символы авторских прав и даже угловые скобки, используемые для обрамления HTML-элементов. Такие элементы вставляются в HTML-документы с помощью специального кода. Общая форма записи кода следующая: &код; где «код»- это символьное или числовое значение, определяющее конкретный символ, который необходимо вывести на экран. Таблицей кодировки, поддерживаемой в настоящее время в HTML,является таблица кодировки ISO Latin-1. Многие символы этой таблицы невозможно ввести с помощью клавиатуры. Для их введения используются специальные коды. Некоторые из наиболее употребительных символов см. в таблице.

Табл. Несколько основных символьных примитивов.

ЧИСЛОВОЕ ЗНАЧЕНИЕ

иМЕНОВАННОЕ ЗНАЧЕНИЕ

сИМВОЛ

оПИСАНИЕ

&#034;

&quot;

Кавычка

&#038;

&amp;

&

Амперсант

&#060;

&lt;

<

Знак “меньше”

&#062;

&gt;

>

Знак “больше”

&#153;

Нет

Торговая марка

&#160;

&nbsp;

Неразрывный пробел

&#169;

&copy;

Знак Copyright

&#174;

&reg;

Знак зарегистрированной торговой марки

5.1 Параметры элемента <IMG>

Элемент <IMG> используется для вставки изображения в Web- страницу. Это непарный тег. Относится к элементам разметки на уровне текста, т.е. располагает иллюстрацию в любом месте строки.

Параметры тега <IMG> (атрибуты):

ALIGN=”Left | Right | Top | Middle | Bottom”__ управление обтеканием текста

ALT=”Alternative Text”____________________ альтернативный текст

SRC=”images/r1.jpg”____________________URL файла-иллюстрации

(подробнее о атрибуте SRC см. в разделе 2.4.2)

BORDER=0 ____________________________толщина рамки

WIDTH=300___________________________ширина иллюстрации

HEIGHT=175___________________________высота иллюстрации

VSPACE=0 ____________________________поля сверху/снизу

HSPACE=0 ____________________________поля сбоку

атрибуты WIDTH и HEIGHT

Если не указать значения Width и Height, то броузер не сможет отобразить страницу до тех пор, пока не станут известны параметры изображения. Значения можно указать в процентах относительно размеров окна броузера.

Примеры:

<IMG src=”1.jpg” width=”100” height=”35” border=”0”>

<IMG src=”2.jpg” width=”30%” height=”10%”>

<IMG src=”3.jpg” width=”100%” border=”0”>

атрибуты HSPACE и VSPACE

Задают горизонтальные и вертикальные отступы вокруг иллюстрации.

Пример:<img src=”1.jpg” hspace=”0” border=”2”

width=”100” height=”50” alt=”1”>

<img src=”2.jpg” hspace=”30” border=”2”

width=”100” height=”50” alt=”2”>

<img src=”3.jpg” hspace=”90” border=”2”

width=”100” height=”50” alt=”3”>

5.2 Управление размещением иллюстрации и обтеканием текста

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

5.3 Создание ссылки

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

В качестве ссылки могут выступать практически любые объекты - от текста до иллюстрации. Для создания ссылки используется парный тег <A>. Между открывающим и закрывающим тегами находится содержимое ссылки. В большинстве браузеров текстовые ссылки выводятся с подчеркиванием. Шрифт текста, как правило, окрашивается в синий (если ссылка не посещалась), в лиловый (если ссылка уже посещалась). Если в ссылку включен рисунок, рамка вокруг него тоже будет окрашена либо в синий, либо в лиловый цвет, если только толщина рамки не была установлена на ноль.

Можно переопределить принятые по умолчанию цвета с помощью атрибутов LINK, ALINK и VLINK элемента <BODY>. Атрибут LINK меняет цвет всех непосещенных ссылок, VLINK - цвет всех посещенных ссылок. Атрибут ALINK меняет цвет активной ссылки, этот цвет появляется на короткое время, когда ссылку выбирают. С помощью списков стилей можно изменить оформление ссылок (отключить подчеркивание и т.д.)

5.3.1 Параметры тега <A>.Понятие внешней и внутренней ссылки

Типичная ссылка выглядит так: <A HREF=”URL”>Посетите наш узел</A>. Текст «Посетите наш узел» превращается в ссылку. Атрибут HREF определяет направление перехода при выборе ссылки.

Базовые атрибуты элемента <A> представлены в таблице:

Имя атрибута

Возможные значения

Описание

HREF

URL

URL

NAME

Текст

Присваивает якорю имя, чтобы на него мог сослаться другой якорь

ID

Текст

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

TITLE

Текст

Задает текст подписи для ссылки

TARGET

Название кадра

Определяет, в каком кадре будет открываться указанный объект

ACCESSKEY

Символ

Задает клавишу на клавиатуре, по которой будет активизироваться ссылка

TABINDEX

Цифровое значение

Задает порядок, по которому будут обходиться ссылки при нажатии на клавишу TAB

Ссылки бывают внешние и внутренние. Внешние ссылки адресуют на страницу или сайт. Внутренние ссылки адресуют внутрь самого документа.

Для создания внутренней ссылки необходимо сделать следующее:

1. Создать метку в конкретном месте документа:(<a name=”metkaA”>).

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

2. Организовать ссылку: <а href=”#metkaA”>перейти к разделу A</а>

Для перехода внутрь другой страницы, например index.htm, сделайте так:

<a href=”index.htm#metkaA”>перейти к разделу A</a>

На помеченную область в любом HTML-документе можно сослаться из любого документа. Для этого достаточно после обычного URL поставить знак # и имя метки в целевом документе, как в следующем примере:

<A href=”http://www.company.com/products.htm#spec”>Характеристики<A>

Здесь сделана ссылка на метку #spec в файле products.htm.

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

<!--оглавление-->

<h3><a href=”#ATM”>Adobe ATM Deluxe 4.0</a></h3>

<h3> <a href=”#Acrobat”>Adobe Acrobat 4.0</a></h3>

<h3><a href=”#Streamline”>Adobe Streamline 4.0</a></h3>

<! - конец оглавления-->

<h2> <A NAME=”ATM”> </A> Adobe ATM Deluxe 4.0 </h2>

Утилита ATM Deluxe занимает первое место среди программ по отображению и управлению шрифтами. Работает с растровыми шрифтами, векторными шрифтами PostScript и TrueType. Шрифты можно объединять в группы и динамически подключать и отключать.

<h2> <A NAME=”Acrobat”> </A> Adobe StreamLine4.0 </h2>

Вышла новая версия пакета Adobe Acrobat - версия 4.0. При помощи набора утилит Acrobat можно создавать и редактировать документы в формате PDF. Это независимый формат обмена графическими и текстовыми документами, удобный для их просмотра и печати на любой компьютерной платформе. При этом сохраняются все кодировки символов и шрифты.

<h2> <A NAME=”Streamline”> </A> Adobe StreamLine 4.0 </h2>

Программа StreamLine используется для векторизации растровых изображений. При этом достигается повышение качества и возможность масштабирования изображений без потери качества.

5.3.3 Способы указания источника файла для иллюстраций и ссылок

Атрибут SRC в элементе <IMG> указывает местонахождение файла иллюстрации. При этом используются 3 типа адресации:

1. Абсолютная, например: SRC=”D:/mysite/first/1.jpg”

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

2. Относительная, например: SRC=”images/2.jpg”

Используется для адресации иллюстрации в пределах одного сайта. Не привязана к конкретному диску, поэтому перенос сайта на удаленный сервер не нарушит работы ссылки. Поэтому используйте только относительную адресацию в пределах одного сайта.

Пример:

с11.htm ссылается на с11.jpg:

< img src=”.c11.jpg”>

c.htm ссылается на c11.jpg:

<img src=”c1/с11.jpg”>

c21.htm ссылается на c.jpg:

<img src=”../c.jpg”>

c11.htm ссылается на c21.jpg:

<img src=”../c2/c21.jpg”>

3. В виде URL, например: SRC=”http://www.mysite.com/first/1.jpg” Используется для адресации иллюстраций на других сайтах.

Для ссылок используются те же способы адресации, что и для файлов иллюстраций. Адресация ссылки задается в атрибуте HREF элемента <A>. Примеры различных способов адресации:

1. Абсолютный адрес: HREF=”D:/Папка 1/Раздел 1/index.htm”

Ссылка привязана к конкретному месту диска. При переносе файлов она станет “висячей”. Поэтому избегайте указания абсолютного адреса.

2. Относительный адрес: HREF=”Папка 1/Раздел 1/index.htm”

Ссылка привязана к конкретной папке. Поэтому перемещение папки более высокого уровня не повлияет на ссылку. Если же надо перейти на уровень выше, то следует использовать ”../”. Если на 2 уровня - то “../../”. Например:”../../Папка 00/Папка 01/Папка2/try.htm”

!

Если в элементе <BASE> раздела <HEAD> задан базовый URL, то все относительные ссылки рассчитываются относительно базового URL.

3. В виде URL: протокол://имя-сервера:порт/путь. Для адресации ссылок на другой сайт.

Наиболее часто используемые протоколы:

- file: чтение файла с локального диска. Данный протокол используется для отображения какого-либо файла, находящегося на локальной машине пользователя. Например: file:/home/alex/index.htm - отображает файл index.htm из каталога /home/alex на пользовательской машине

- http: доступ к WEB-странице в сети с использованием HTTP -протокола. Например: http://www.company.com/- доступ к домашней странице компании COMPANY.

- ftp: запрос файла с анонимного FTP -сервера. Например: ftp://hostname/directory/filename

- mailto: активизирует почтовую сессию с указанным пользователем и сервером. Например: mailto:info@company.com - активизирует сессию посылки сообщения пользователю info на машине company.com, если браузер поддерживает запуск электронной почты.

- telnet: обращение к службе telnet

- news: вызов службы новостей, если браузер её поддерживает. Например: news:relcom.www.support

Путь в URL - это частичный или полный путь к документу. Примеры:

- www.allair.com

- www.allair.com/index.htm

- www.allair.com/first/second/1.htm

Примеры ссылок:

<a href=”http://www.allaire.com”> сервер компании Allaire</a><br>

<a href=”index.html”> сервер комп. Allaire (ссылка внутри сервера) </a><br>

<a href=”http://www.allaire.com”> <img src=”allaire.jpg”></a>

В последнем примере изображение является ссылкой.

6. СОЗДАНИЕ ТАБЛИЦ

6.1Таблицы - основное средство управления расположением материалов

Таблицы - единственное в HTML средство скомпоновать страницу в полном соответствии с замыслом. С помощью таблиц данные могут быть аккуратно размещены в пределах Web-страницы.

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

Ячейки одной строки не могут иметь разную высоту. Пустые ячейки отображаются броузером некорректно (должен быть хотя бы неразрывный пробел &nbsp;). По умолчанию таблица не имеет рамки: толщина рамки (border) равна 0; и имеет центрированное вертикальное выравнивание содержимого ячеек строки (valign=middle). Браузер может сам изменить размеры отображаемой таблицы по своему усмотрению.

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

Таблицу можно поместить внутрь ячейки другой таблицы (вложение таблиц).

6.2Строение таблицы. Основные элементы

Таблица описывается следующими тегами: <TABLE> - начинается описание таблицы (парный тег); <TR> - строка таблицы (парный тег); <TD> - ячейка таблицы (парный тег); <TH> - заголовок таблицы (парный тег); <CAPTION> - подпись (парный тег)

Пример: <table border=4 width=100 height=100 bordercolor=”Black”>

<tr> <td>1</td>

<td>2</td>

</tr>

<tr> <td>3</td>

<td>4</td>

</tr> </table>

Тег <TABLE>. Описание таблицы

Параметры:

width=640 | 45%____________ширина таблицы

height=330 | 30%____________высота таблицы

align=center | left | right_______выравнивание таблицы относительно текста

background=”1.jpg”_________фоновый узор

bgcolor=”gray”______________цвет фона

border=3___________________толщина рамки

bordercolor=”black”__________цвет рамки

cellPadding=5_______________втяжка внутрь ячейки

cellSpacing=10______________расстояние между ячейками

border=5

Описание строки. Параметры тега <TR>.

align=center | left | right_______выравнивание содержимого ячеек строки

valign=bottom | middle | top____вертикальное выравнивание содержимого

bgcolor=”gray”______________цвет фона ячеек строки

nowrap_____________________запрет переноса строк(как <nobr>)

height_________________________высота ряда

Заголовок таблицы (тег <TH> ) и описание ячейки. (тег <TD>)

Ячейка заголовка таблицы имеет ширину колонки; текст в данной ячейке имеет начертание Bold и выравнивание ALIGN=center. Параметры тегов <TH> и <TD> следующие:

width=150 | 45%_____________ширина ячейки

height=180 | 30%_____________высота ячейки

align=center | left | right________выравнивание содержимого ячейки

valign=bottom | middle | top_____вертикальное выравнивание содержимого

background=”1.jpg”__________фоновый узор

bgcolor=”gray”_______________цвет фона

bordercolor=”black”__________цвет рамки (только IE)

colspan=2___________________объединение ячеек по горизонтали

rowspan=3__________________объединение ячеек по вертикали

nowrap_____________________запрет переноса строк (как <nobr>)

Подпись таблицы. Параметры тега <CAPTION>.

Данный тег описывает название таблицы (подпись).<CAPTION> должен присутствовать внутри <TABLE>…</TABLE >, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top (расположить сверху), но может быть явно установлен в нижнее положение (ALIGN=bottom). ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы. Параметры элемента <CAPTION>:

align=bottom | top | left | right_____выравнивание подписи по горизонтали

valign=bottom | top _____________вертикальное выравнивание подписи

Пример:

Таблица 1

Заголовок1

Заголовок2

1

2

3

4

6.3Вложенные таблицы

Таблицы могут быть вложены одна в другую. Уровень вложенности не ограничен. Для создания вложенной таблицы необходимо описать ее тегом <table> как содержимое ячейки <td>.

Пример:<table border=1 width=50% cellspacing=0>

<tr>

<td> <table border=0 cellspacing=3 width=”100%”>

<tr>

<td bgcolor=“Black”><font color=”White”>ссылка1</font></td>

<td bgcolor=“Black”><font color=”White”>ссылка2</font></td>

<td bgcolor=“Black”><font color=”White”>ссылка3</font></td>

</tr> </table> </td> </tr>

<tr height=50>

<td> содержимое ячейки </td>

</tr>

</table>

7. ФОРМЫ И ФРЕЙМЫ

7.1Правила работы с формами и элементы форм

Формы используются в Web для многих целей. Наиболее часто они применяются как бланки писем для написания отзывов, как бланки для оформления заказов, подписки, для проведения регистрации и настройки параметров. Одним словом, формы нужны, когда от пользователя требуется ввод какой-либо информации. Пользователь вводит информацию в специально отведенных для этого полях формы, затем нажимает нужную кнопку и посылает заполненную форму на сервер. Сервер принимает данные формы, обрабатывает их и генерирует ответ в виде HTM-файла (например, “введен неправильный пароль”). Этот файл и получает пользователь в ответ на отправку формы.

Форма в HTML-документе размещается между тегами <FORM> и </FORM>. Внутри формы может располагаться обычный текст, другие HTML-элементы, например таблицы, а также элементы форм. Формы нельзя вкладывать одну в другую (это Вам не таблицы)!!! Чтобы форма заработала, необходимо указать три вещи - адрес программы, которая будет обрабатывать форму (ACTION), метод передачи данных из формы (METHOD) и способ шифрования данных из формы (ENCTYPE).

Структура формы такова:

<FORM METHOD=”getpost” ACTION=”URL” ENCTYPE=”MIME”>

Элементы _формы _и _другие _элементы _HTML

</FORM>

Атрибут METHOD. Метод посылки сообщения с данными из формы. Можно посылать результаты ввода данных в форму двумя путями:

1) GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы (в атрибуте ACTION). В результате получается URL из пары сотен символов, в котором находятся и данные для обработки и адрес CGI-программы, которая будет их обрабатывать на сервере. Метод GET используется по умолчанию в большинстве броузеров для передачи информации из формы. Использование метода GET не рекомендуется по следующим причинам:

Страницы: 1, 2, 3, 4


© 2010 BANKS OF РЕФЕРАТ