Стилевое оформление текста

Приведенные ниже теги<center>, <font>,<s>,<u> для оформления стиля текста применяются в настоящее время крайне редко и являются нежелательными элементами. Вместо них широко используются таблицы стилей CSS.

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

<B> Полужирный </B>, <I> Курсив</I>, <TT> Моноширинный </TT>,

<S> ~~Зачеркнутый текст~~ </S>,

<U> Подчеркнутый текст </U>, <BIG> КРУПНЫЙ ТЕКСТ </BIG>,

<SMALL> мелкий текст </SMALL>, <SUB> _{Нижний индекс} </SUB>,

<SUP> ^{Верхний индекс} </SUP>.

<TITLE>Домашняя страница </TITLE></HEAD>

<BODY>

<CENTER> <H1>Добро пожаловать </H1> </CENTER><HR>

Я рад <B>приветствовать Вас</B>

на моей <I>странице</I>. <P>

Вот что я <SUP>люблю</SUP> делать в <SUB>свободное</SUB> время: <BR>

<U> - Читать книги </U><BR> <!—Подчеркивание текста -->

<S>- Исследовать Интернет</S><BR> <!—Зачеркивание текста -->

</BODY></HTML>

Логический стиль документа

Текст в документе HTML может быть логически выделен одним из следующих тегов:

<DFN> – определить слово. Как правило – курсив;

<EM> – усилить акцент. Как правило – курсив;

<CITE>– заголовок чего-то большого. Курсив;

<CODE> – компьютерный код. Моноширинный шрифт;

<KBD> – текст, введенный с клавиатуры. Жирный шрифт;

<SAMP> – сообщение программы. Моноширинный шрифт;

<STRONG>– очень важные участки. Жирный шрифт;

<VAR> – замена переменной на число. Курсив;

<BLOCKQUOTE> – позволяет включить цитату в объект.

<TITLE> Элементы содержания </TITLE></HEAD>

<CENTER><H5 > Элементы содержания </H5></center> <HR>

<P><BLOCKQUOTE> Это цитата </blockquote>

<P> <INS> Использование элемента INS </ins>

<P> <DEL> Использование элемента DEL </del>

<P> <Q> Использование элемента Q </q>

<P> <EM> Использование элемента EM </em>

<P> <STRONG> Использование элемента STRONG </strong>

</BODY></HTML>

Работа с тегами FONT

Тег <FONT>позволяет установить вид, размер и цвет шрифта.

<FONT SIZE=n> размер шрифта n=1..7, стандартный размер n=3 </FONT>

<FONT SIZE= +3> относительный размер, 3+3=6 </FONT>

Кроме размера, могут устанавливаться цвет и тип шрифта, например:

<FONT COLOR=RED SIZE=6 FACE="Arial"> Пример шрифта </FONT>

<TITLE> Элементы форматирования текста</title></head>

<BODY>

<HR> <H3>Задание абсолютных размеров шрифтов</h3>

<P><FONT size=7> Шрифт размера 7</font>

<P><FONT size=1> Шрифт размера 1</font> <HR>

<H3>Задание относительных размеров шрифтов</h3>

<P><FONT size=+4> Шрифт размера +4</font>

<FONT color="green"> Задан зеленый цвет шрифта</font>

<P><FONT size=+1 face="Courier" color="red"> Шрифт Courier </font>

</BODY></HTML>

Цвет символов на всей странице можно изменить с помощью аргумента TEXT тега <BODY>: <BODY TEXT=”цвет”>...</BODY> Аргумент BGCOLOR=” цвет” изменяет цвет фона.

<<!-пример # 7: управление цветом текста-->

<TITLE> Цветовое оформление </TITLE></HEAD>

<FONT size=6 color="red">Управление цветом текста</font>

<TR><TD>Аквамарин - aqua<TD bgcolor="aqua" width=200>

<TR><TD>Белый - white<TD bgcolor="white" width=200>

<TR><TD>Желтый - yellow<TD bgcolor="yellow" width=200>

<TR><TD>Синий - blue<TD bgcolor="blue" width=200>

<TR><TD>Ультрамарин - navy<TD bgcolor="navy" width=200>

<TR><TD>Фиолетовый - violet<TD bgcolor="violet" width=200>

<TR><TD>Фуксиновый - fuchsia<TD bgcolor="fuchsia" width=200>

<TR>

<TD>Черный - black<TD bgcolor="black" width=200>

</table> </center> <HR color="red">

</BODY></HTML>

Специальные символы

Символы, которые не могут быть введены в текст документа непосредственно через клавиатуру, называются специальными символами. Для них существуют особые теги. Четыре символа – знак меньше <, знак больше >, амперсант & и двойные кавычки “” имеют специальное значение внутри HTML и, следовательно, не могут быть использованы в тексте в своем обычном значении. Для использования одного из этих символов введите одну из следующих последовательностей:

< - < > - > & - & " - &quote.

Списки и таблицы

Списки подразделяются на ненумерованные, создаваемые с тегом <UL>,
и нумерованные, создаваемые с тегом OL:

<TITLE>Использование списков </TITLE></HEAD>

<BODY>

<CENTER><H3>Домашняя страница </H3></CENTER>

<h4>Ненумерованный список: Мои интересы:</h4>

<UL>

<LH><B>Занятия в свободное время:</B></LH>

<LI> Компьютеры

<LI> Чтение книг

<LI> Бассейн

<LI> Отдых на природе

</UL> <HR>

<H4> Нумерованный (упорядоченный) список.</H4>

<LH><B>Мое путешествие</B></LH>

<LI> Прибытие в Варшаву

<LI> Автобусом в Будапешт

<LI> Самолетом в Рим

</OL> <HR>

<LH><B>Продолжение путешествия</B></LH>

<LI> Автобусом в Берлин

<LI> Поездом в Варшаву

<LI> Пешком в Минск

</OL> <HR>

</BODY></HTML>

Атрибуты ненумерованного списка: type="disk | circle | square".Атрибут нумерованного списка start - устанавливает число, с которого будет начинаться отсчет. При этом вид нумерации устанавливается аргументом TYPE: TYPE=1– стандартная нумерация 1,2,3,4...; TYPE=A– прописные буквы A, B, C, D...; TYPE=a – строчные буквы a,b,c,d...; TYPE=I – римские цифры I, II, III, IV...; TYPE=i – строчные римские цифры i,ii,iii,iv,v....

Еще один вид списков – списки определений DL – состоит из пар элементов: определяемого <DT> и определения <DD>.

<TITLE>Использование списков</TITLE></HEAD>

<BODY> <CENTER><H2> Толковый словарь</H2></CENTER><HR>

<DL>

<LH><Big><B> Cписок терминов</B></Big></LH><HR>

<DT><B>"Anchor"</B>

<DD><I>То, что образовывает гипертекстовую ссылку</I>

<DT><B>"Lamer"</B>

<DD><I> Юзер-идиот</I>

<DT><B>"Cookies "</B>

<DD><I>Технология, позволяющая сохранять индивидуальную информацию о пользователе сети</I> </DL>

</BODY></HTML>

Для создания таблиц используются следующие теги HTML: <TABLE> и </TABLE> – охватывают таблицу. Для того чтобы была видна сетка, разделяющая строки и столбцы, используется атрибут BORDER (например: <TABLE BORDER=1>). Текст в тегах <CAPTION>и</CAPTION> выводится в виде заголовка. В тегах <TH> и </TH> помещаются заголовки столбцов или строк. Теги <TR> и </TR> определяют каждую строку таблицы. Теги <TD> и </TD> определяют текст каждой ячейки таблицы.

<TITLE>Использование таблиц</TITLE>

</HEAD><BODY>

<CAPTION ALIGN=top>Лучшие нападающие года</CAPTION>

<TR>

<TH>Команда</TH>

</TR>

<TR>

<TD>Small </TD>

<TD> Барселона</TD>

</TR>

<TR>

<TD>Superman</TD>

<TD> Dinamo</TD>

</TR>

</TABLE></BODY></HTML>

Чтобы ячейка занимала две строки вместо одной, можно заменить тег на следующий: <TD ROWSPAN=2> </TD>. Аналогично два столбца можно объединить с помощью тега <TH COLSPAN=2> или <TD COLSPAN=2>. Изменить цвет в таблице можно с помощью аргумента BGCOLOR, как в следующем примере:

<TITLE> Таблицы </TITLE></HEAD>

<CENTER><FONT size=6>Примеры таблиц</font></center>

<CAPTION><B>Стандартная таблица<B> </caption>

<TR><TH bgcolor="yellow">Заголовок 1

<TH bgcolor="yellow">Заголовок 2

<TR><TD>Ячейка 1

<TD>Ячейка 2

<TR><TD>Ячейка 3

<TD>Ячейка 4

</TABLE>

<CAPTION>Таблица с объединенными ячейками и фоновым

рисунком</caption>

<TR><TH rowspan="2"> <TH colspan="2">Заголовок 1

<TR><TH>Заголовок 1.1<TH>Заголовок 1.2

<TR><TH>Заголовок 2<TD>Ячейка 1<TD>Ячейка 2

<TR><TH>Заголовок 3<TD>Ячейка 3<TD>Ячейка 4

</TABLE>

<H2>Использование элементов THEAD, TBODY и TFOOT</h2>

<THEAD>

<TR> <TD>Заголовок 1<TD>Заголовок 2

<TFOOT>

<TR> <TD>Нижний блок таблицы<TD> 

<TBODY>

<TR> <TD>Строка 1 <TD>Ячейка 1.2

<TR> <TD>Строка 2 <TD>Ячейка 2.2

<TBODY>

<TR> <TD>Строка 3 <TD>Ячейка 3.2

<TR> <TD>Строка 4 <TD>Ячейка 4.2

<TR> <TD>Строка 5 <TD>Ячейка 5.2

</TABLE>

<H2>Объединение ячеек</h2>

<TR><TD bgcolor="yellow"><B>Заголовок 1</b>

<TD bgcolor="yellow"><B>Заголовок 2</b>

<TR><TD rowspan=3 bgcolor="lime">Ячейка 1

<TD>Ячейка 2

<TR><TD>Ячейка 3

<TR><TD>Ячейка 4

<TR><TD colspan=2 bgcolor="aqua" align="center">Ячейка 5

</TABLE>

<H2>Вложенная таблица</h2>

<TR><TD bgcolor="yellow">Таблица 1

<TR><TD bgcolor="red">Таблица 2

<TD bgcolor="red">Ячейка 2-2

<TR><TD bgcolor="red">Ячейка 3-2

<TD bgcolor="red">Ячейка 4-2

</TABLE>

<TR><TD bgcolor="yellow">Ячейка 3-1

<TD bgcolor="yellow">Ячейка 4-1

</TABLE></BODY></HTML>

Ссылки

HTML позволяет связать текст или картинку с другими гипертекстовыми документами с помощью тегов <A> и <LINK>. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Чтобы сформировать ссылку, следует набрать <A, введите HREF= "filename">, ввести текст ссылки, закрыть тег </A>. В следующем примере слово Minsk ссылается на документ MinskAnapa.html, образуя гипертекстовую ссылку:

<A HREF="MinskAnapa.html">Minsk</A>.

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

<A HREF="MinskAnapa/MinskMoscow.html">Minsk</A>

Ссылки можно формировать на основе URL, используя синтаксис: protocol: //hostport/path. Например:

<A HREF="http://www.w3.org/TR/REC-html40">Документ HTML</A>

<TITLE>Ссылки на домашней странице</TITLE></HEAD>

<BODY>

<H1>Внутренние ссылки на части документа</H1></CENTER>

<H2>Вы можете:</H2>

<UL>

<LI>Посмотреть <A HREF="Pr11.htm">Простейший пример</A>

<LI>Посмотреть <A HREF="Pr12.htm">Второй пример</A>

<LI>Посмотреть <A HREF="Pr13.htm">разбиение текста</A>

<LI>Узнать <A HREF="Pr14.htm">О линиях</A>

</UL>

Если вас интересует подробная информация, пишите по адресу

<A HREF="mailto:[email protected]">[email protected]</A>

</FONT></BODY></HTML>

Якоря на Web-странице

Для того чтобы организовать ссылки на разделы документа, находящегося
в одном файле, используются якоря (anchors). При этом создается ссылка
на якорь: <A href="#Имя якоря">Текст гиперссылки</A>.

Сам якорь с указанным именем помещается в то место документа, в которое осуществляется переход: <A name="Имя якоря">Текст</A>.

<TITLE>Якоря на домашней странице</TITLE>

</HEAD>

<BODY>

<UL><LH>Содержание</LH>

<LI><A href="#section1">Введение</A>

<LI><A href="#section2">Обзор</A>

<LI><A href="#section3">Подробное рассмотрение</A></UL><P>

<HR>

...тело документа...

<HR>

<H2><A name="section1">Введение</A></H2><HR>

...section 1...

<H2><A name="section2">Обзор</A></H2><HR>

...section 2...

<HR>

<H3><A name="section3">Подробное рассмотрение</A></H3><HR>

...section 3...

<HR>

<ADDRESS>Романчик - e-mail:[email protected]</ADDRESS></A> <P></BODY> </HTML>

Такой же эффект можно получить, используя заглавия вместо якоря:

<TITLE>Ссылки на заголовки</TITLE>

</HEAD>

<BODY>

<H1>Table of Contents</H1><P>

<A href="#section1">Introduction</A><BR>

<A href="#section2">Some background</A><BR>

<A href="#section3">The first part</A><BR>

...the rest of the table of contents...

<H2 id="section1">Introduction</H2> <HR>

...section 1...<HR>

<H2 id="section2">Some background</H2><HR>

...section 2...<HR>

<H3 id="section3">The first part</H3><HR>

...section 3...<HR>

...Продолжение документа...

</BODY></HTML>

Кроме элемента A, который помещается в теле HTML-документа <BODY>, для организации ссылок используется элемент LINK, который помещается в заголовке документа <HEAD>.

Установить цвет ссылки можно с помощью атрибута LINK тега <BODY>, цвет посещенной ссылки – с помощью атрибута VLINK, цвет активной ссылки – с помощью атрибута ALINK. Например:

Чтобы установить ссылку с помощью изображения, надо вместо текста ссылки поставить HTML-код для вывода изображения:

Изображения на странице

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

Как поместить изображение на домашнюю страницу? Изображение можно вставить в любое место страницы с помощью тега <IMG>, вставляемого между тегами<BODY> и </BODY>. Например, изображение FRACT.GIF загружается из текущего каталога: <IMG SCR=FRACT.GIF>.

Загрузка изображения из каталога уровнем выше:

Загрузка изображения с другого диска:

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

В последних версиях HTML атрибут altобязателен для тега img.

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

В примере текст будет выводиться справа от изображения:

Размеры изображения можно изменять с помощью атрибутов HEIGTH и WIDTH. При этом меняются не размеры изображения, а только вид на экране. Например:

Фон

Цвет фона устанавливается атрибутом BGCOLOR тега <BODY>. Например:

Фоновые изображения задаются атрибутом BACKGROUND. Например:

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

Формат GIF позволяет задать один из 256 цветов, который при отображении браузером будет игнорироваться, вместо него устанавливается цвет фона, так что изображение будет прозрачным. Прозрачные изображения можно создать в формате GIF графическим редактором.

Наложение изображений

Ключевое слово LOWSRC позволяет сначала загрузить файл с низким разрешением, затем больший файл с высоким разрешением:

В примере сначала загружается файл lowcar.gif, а затем highcar.gif.

Анимация

Анимационный GIF является обыкновенным графическим файлом. Дело
в том, что подобный файл состоит из нескольких изображений, которые через браузер последовательно выводятся на экран. Чтобы создать анимационную картинку, необходимо сначала создать картинки, из которых будет состоять результирующий файл. Эти картинки можно сделать, например, в Adobe Photoshop.

Для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация могут использоваться теги <OBJECT>и <EMBED>.

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

Атрибут data указывает местоположение данных для объекта, атрибут type указывает тип содержимого image – изображение, jpeg – тип изображения. Текст, заключенный в тег <OBJECT></OBJECT>, отобразится, если браузер не сможет отобразить объект-картинку.

Чтобы подгрузить видеоклип, запишем аналогично:

Тэг <EMBED> поддерживается на данный момент почти всеми браузерами
и используется, как и тег <OBJECT>, для внедрения объектов в документ.
Рассмотрим внедрение музыкального файла в документ:

autostart="false" loop="true"

play_loop="5" hidden="false">

</embed>

В теге могут использоваться атрибуты: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали), hidden=”true” (false) – отображать указанный объект, type=” image/jpeg” – тип подгружаемого объекта, pluginspage=”http://…” – путь к плагину (plugin – небольшая программка, выполняющая какие-либо дополнительные функции. Например, чтобы проиграть flash-анимацию, браузеру нужен плагин, к которому мы указываем путь на случай отсутствия в браузере).

Рассмотрим пример вставки flash-анимации в документ:

<ENBED src="someMovie.swf" quality=high bgcolor=#FFFFFF WIDTH=500 HEIGHT=400 swLiveConnect=true NAME=yourMovie TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/Shockwave/download/

index.cgi?Pl_Prod_Version=ShockwaveFlash">

</EMBED>

Для тега <OBJECT> четыре параметра (HEIGHT, WIDTH, CLASSIC и CODEBASE) являются атрибутами и записываются внутри тега <OBJECT>, а все остальные записываются отдельно в виде тегов <PARAM>. Например:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"

WIDTH="100"

HEIGHT="100"CODEBASE="http://active.macromedia.com/flashS/

cabs/swflash.cab#version=5,0,0,0">

</OBJECT>

Фреймы

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

Один фрейм отображает только один гипертекстовый документ. Создание фрейма осуществляется с помощью тегов <FRAMESET> и </FRAMESET>. Тег <BODY> в этом случае не используется. Если браузер не поддерживает фреймы, то между тегом <NOFRAMES> и тегом </NOFRAMES> заносится текст, который распознает браузер.

Тег <FRAME SRC="Name1"> позволяет описать первый фрейм, т.е. присвоить имя гипертекстовому документу. Второй фрейм описывается тегом <FRAME SRC="Name2" NAME="Main">.

Тег <FRAMESET COLS=n> позволяет определить количество фреймов и задать размер фреймов в процентах от размера окна обозревателя или зафиксировать эти размеры в пикселях.

Тег <FRAME>, имеющий самое большое количество атрибутов, позволяет настроить свойства фрейма. Ниже описываются эти атрибуты:

NAME= – имя фрейма.

MARGINWIDTH= – горизонтальный отступ (от 1 до 6) между фреймом и его границей.

MARGINHEIGHT= – вертикальный отступ (от 1 до 6) между фреймом и его границей.

SCROLLING=YES|NO|AUTO – позволяет создать/не создавать полосы прокрутки.

SCROLLING=AUTO – позволяет отображать полосы прокрутки в зависимости от свойств обозревателя.

NORESIZE – фиксированный размер фрейма.

SRC= – задать гипертекстовый документ для этого фрейма.

TARGET=Name – открыть ссылку во фрейме с именем Name.

<TITLE> Пример фреймов </TITLE></HEAD>

<FRAME src="fr3.htm" scrolling="yes" marginwidth="10"

marginheight="75">

</frameset>

</frameset>

<CENTER><FONT size=6>Фреймы</font></center>

Этот браузер не может воспроизводить фреймы

</noframes>

</frameset></HTML>

Формы HTML

Пользователь заполняет форму и передает информацию из нее для обработки программе, работающей на сервере. Эта программа может быть написана по технологии CGI, ASP или Servlet/JSP.

Теги <FORM>...</FORM> используются для обозначения документа как формы. Внутри элемента <FORM> определяется последовательность элементов <INPUT>, которые представляют поля для ввода информации.

<INPUT TYPE=TEXT> помещает в форму текстовое поле данных.

Если <INPUT> используется с атрибутом TYPE=TEXT, устанавливаемым по умолчанию, то могут быть использованы еще три атрибута. Атрибут MAXLENGTH устанавливает максимальное число вводимых символов. Атрибут SIZE определяет размер видимой на экране области, занимаемой текущим полем. Атрибут VALUE устанавливает начальное значение поля.

<INPUT TYPE=CHECKBOX> позволяет определить флажок для протокола передачи. Тип элемента ввода CHECKBOX позволяет получить ответы пользователя типа ДА/НЕТ. Элемент INPUT при установке атрибута TYPE=CHECKBOX использует также атрибуты NAME=”имя” VALUE=”значение”. Элемент <INPUT TYPE=RADIO> позволяет определить кнопку переключения и используется, если надо выбрать одно из нескольких значений.

<TITLE>Простая форма, checkbox и radio </TITLE>

</HEAD><BODY>

<FORM><H2>Простая форма</H2>

<P>My street:<INPUT NAME="street"><BR>

City: <INPUT NAME="city" SIZE="20" MAXLENGTH="20"

VALUE="Minsk"> <BR>

Zip: <INPUT NAME="zip" SIZE="5" MAXLENGTH="5"

VALUE="99999"><BR>

</FORM> <HR>

<P><H2>Ваша любимая команда</H2>

шахтеры<BR>

<INPUT TYPE="checkbox" NAME="team" VALUE="ковбои"> ковбои <BR> <INPUT TYPE="checkbox" NAME="team" VALUE="викинги">

викинги<BR>

</FORM> <HR>

<P><H2>Какая из команд самая любимая?</H2>

шахтеры <BR>

<INPUT TYPE="radio" NAME="team" VALUE="ковбои"> ковбои <BR>

<INPUT TYPE="radio" NAME="team" VALUE="викинги"> викинги <BR>

</FORM><HR>

</BODY></HTML>

Элемент ввода SELECT позволяет использовать при вводе списки с прокруткой и выпадающее меню. Для определения списка пунктов используется элемент <OPTION> и необязательные атрибуты MULTIPLE,NAME, SIZE.

Атрибут SELECTED устанавливает значение элемента для первоначального выбора. Атрибут VALUE указывает на значение, возвращаемое формой после выбора данного пункта.

<HTML>

<OPTION>chocolate

<OPTION>vanila

<OPTION VALUE="Banana">Banana

<OPTION SELECTED>cherry

</SELECT> </FORM>

</HTML>

Элемент <INPUT TYPE=RESET> используется для создания кнопки Reset, по которой можно щелкнуть мышкой и вернуться к начальным значениям полей.

Элемент <INPUT TYPE=SUBMIT> используется для создания кнопки, по которой можно щелкнуть и отправить введенные данные в виде сообщения по указанному адресу. Дополнительный атрибут NAME устанавливает название кнопки submit. Атрибут VALUE хранит значение переменной поля формы.

<HTML>

<HEAD>

<TITLE> Формы </TITLE>

</HEAD>

<CENTER><FONT size=6>Элементы диалога </font></center><P>

<H2>Пример формы</h2>

<TR>

<TR>

<TD><LABEL for="familiya1">Фамилия: </label>

<TR>

<TD><LABEL for="telefon1">Телефон: </label>

<TR>

<TD>Пол:   

<INPUT type="radio" name="pol1" value="Male"> М 

<INPUT type="radio" name="pol1" value="Female"> Ж

</form>

</table>

<H2>Элемент ISINDEX</h2>

<H2>Элементы INPUT</h2>

<H3> Ввод текстовой строки </h3>

<H3> Ввод пароля </h3>

<H3> Флажки </h3>

<H3> Переключатели </h3>

<H3> Кнопка подтверждения ввода </h3>

<H3> Кнопка с изображением </h3>

<H3> Кнопка очистки формы </h3>

<H2>Элемент SELECT </h2>

<OPTION value=a>Первый

<OPTION value=b>Второй

<OPTION value=c>Третий

<OPTION value=d>Четвертый

</select>

<H2>Элемент TEXTAREA

Область для ввода текста

</textarea></h2>

<H2>Кнопка с надписью и рисунком</h2>

Надпись<IMG src="gif1.gif" alt="Рисунок"></button>

<H2>Группа полей</h2>

<LEGEND>Заголовок группы</legend>

Имя: <INPUT name="imya2" type="text">

Фамилия: <INPUT name="familiya2" type="text"><BR>

Телефон: <INPUT name="telefon2" type="text"><BR>

Текст подсказки

</fieldset>

</BODY></HTML>

Метатеги

Любой метатег размещается в заголовке HTML-документа между тегами <HEAD>и </HEAD>и состоит из следующих атрибутов:

Метатеги с атрибутом HTTP-EQUIVуправляют действиями браузеров. В качестве параметра “имя” могут быть использованы следующие аргументы:

Expires – Дата устаревания: если указанная дата прошла, то запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" заставляет браузер каждый раз при запросе проверять, изменялся ли этот документ. Например:

Pragma – контроль кэширования. Значением должно быть “no-cache”.

Content-Type– указание типа документа. Может быть расширено указанием браузеру кодировки страницы (charset). Например:

Content-language– указание языка документа. Комбинация поля Accept-Language(посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

Refresh–определение задержки в секундах, после которой браузер автоматически обновляет документ. Дополнительная возможность – автоматическая загрузка другого документа.

Window-target– определяет окно текущей страницы; может быть использован для прекращения появления новых окон браузера при применении фреймовых структур.

Ext-cache –определяет имя альтернативного кэша

PICS-Label – Platform-Independеnt Content rating Scheme.Обычно используется для определения рейтинга “взрослости” содержания (sex),однако может использоваться для других целей.

Управление индексацией страницы для поисковых роботов осуществляется
с использованием атрибута NAME.

Возможные значения: ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW.

Description– краткая аннотация содержания документа. Используется поисковыми системами для описания документа.

<META NAME="Description" CONTENT= "Документ содержит

словарь METAтегов">

Keywords – используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке title или альтернативный заголовок.

Document-state– управление индексацией страницы для поисковых роботов. Определяет частоту индексации – или один раз индексировать, или реиндексировать документ регулярно.

Возможные значения: Static,Dynamic

URL – управление индексацией страницы для поисковых роботов. Определяет частоту индексации: или один раз индексировать, или реиндексировать документ регулярно.

Author – обычно имя автора, формат произвольный.

Generator – обычно название и версия редактора, с помощью которого создана эта страница.

Resource-type– текущее состояние данного файла. Важен для поисковых систем: если его значение document, то поисковая система приступает к индексированию.

Каскадные таблицы стилей

Таблицы стилей (CSS) позволяют отделить содержание документа от его форматирования и отображения. HTML-документы могут содержать внедренные стили непосредственно внутри документа или импортировать стили из связанных таблиц стилей, находящихся в файлах с расширением CSS. Элемент META указывает тип документа в виде:

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

Размер шрифта 12 пикселей </P>

Текст с подчеркиванием </H1>

Текст заголовка красным цветом</H2>

Объявление значений свойств имеет вид "name: value".

Для того чтобы стили относились к нескольким элементам документа, например к одному или всем P-элементам, H1-элементам, гиперссылкам, используется блок STYLE. Блок STYLE размещается в секции HEAD документа. Следующий стиль обводит границы вокруг каждого H1-элемента и центрирует его на странице. Кроме этого, устанавливается стиль параграфа и гиперссылки.

<HEAD>

H1 {border-width: 1; border: solid; text-align: center}

P { color: blue}

a: hover {color: red; text-decoration: overline}

</STYLE></HEAD>

Для гиперссылок устанавливаются следующие значения стилей:

a:hover –стиль меняется при наведении курсора;

a:active –стиль меняется при щелчке левой кнопкой мыши;

a:visited –стиль меняется после посещения;

a:link –непосещенная ссылка.

Данные о стиле размещаются в фигурных скобках.

В следующем примере стиль относится к определенным H1-элементам. Чтобы скрыть таблицы стилей от старых программ просмотра, их помещают внутрь HTML-комментария:

<!—маскируем

H1.myclass {border-width: 1; border: solid; text-align: center} -->

</STYLE></HEAD>

<BODY>

<H1 class="myclass">H1 is affected by our style</H1>

<H1> This one is not affected by our style </H1>

</BODY>

Два тега – DIV и SPAN, играющие роль скобок, используются, чтобы применить стили к ограниченному фрагменту документа. В следующем примере элемент SPAN используется, чтобы вывести несколько слов параграфа прописными буквами и установить стили для других параграфов.

SPAN.sc-ex { font-variant: small-caps }

</STYLE></HEAD><BODY>

<P><SPAN class="sc-ex">The first</SPAN> few words are in small-caps.</P>

<P>Это<SPAN style="font-style:italic"> курсив</SPAN></p>

<P>Это<SPAN style="text-transform-style:uppercase">верхний регистр </SPAN> </p>

</BODY>

В следующем примере используется DIV и атрибут class, чтобы установить правила для двух параграфов.

DIV.Abstract { text-align: justify }

</STYLE></HEAD><BODY>

<P>The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products.

<P>Chieftain replaces the Commander range, which will

remain on the price list until further notice.

</DIV>

<P style="position:absolute"; top:125px; left:200px > Простой текст для позиционирования, на который накладывается изображение </p>

</BODY>

Для третьего параграфа в примере, в котором на текст накладывается изображение, установлено позиционирование: position:absolute – точка отсчета: левый угол окна; top – вертикальное, left – горизонтальное смещение от точки отсчета.

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

Значение ref устанавливается на URL файла стилей. Значение атрибута type определяет тип таблицы стилей. Атрибут rel устанавливается в таблицу стилей stylesheet. Например:

В следующем примере таблица, помещенная в файл special.css, устанавливает цвет текста в параграфе зеленым, а границу – красным:

P.special {

color: green;

border: solid red;

}

Эту таблицу стилей можно связать с HTML-документом с помощью элемента LINK:

</HEAD><BODY>

<P class="special">paragraph should have green text.

</BODY></HTML>

В контексте использования Java-технологий можно отметить три возможности использования HTML:

1. Использование тегов <applet> </applet> для включения java-аппле-тов в HTML-документ.

2. Использование форм HTML и методов GET и POST для пересылки запросов и информации из форм серверу для обработки сервлетами.

3. Ответы клиенту, пересылаемые серверу на основании выполнения сервлетов и JSP, также конвертируются в HTML-документ и отображаются на стороне клиента.

Приложение 2

JAVASCRIPT

Язык сценариев JavaScript создал сотрудник компании Netscape Communication Брендан Эйх для разработки Web-приложений на качественно новом уровне. JavaScript принес на клиентскую Web-страницу динамику и интер-
активность и заменил Java-апплеты на клиентской странице. Синтаксис языка JavaScript очень похож на синтаксис языка Java, однако это полностью самостоятельный язык скиптов. Язык JavaScript используется совместно с HTML, XML
и может использовать объекты языка Java.

Наши рекомендации

Единое стилевое оформление

Шаблоны и их назначение. Стилевое оформление документов

Единое стилевое оформление

Оформление основного текста проекта и текста доклада на защиту.

Стилевое оформление сайта

Единое стилевое оформление

Оформление основного текста. 3.2.1 Рубрикация разделов текста

Стилевое форматирование текста. Режимы работы с документом.

Оформление курсовой работы. Оформление внешнего вида и параметры печатного текста

← Предыдущая страница | Следующая страница →