Название цвета на английском языке

Для 16 наиболее популярных цветов были установлены символьные обозначения:

Пример

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

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

Пример

<HTML>

<HEAD>

<TITLE> Неформатированный текст </TITLE>

</HEAD>

<BODY>

Текст

на строки

не разбился

</BODY>

</HTML>

Вид Web-страницы в браузере:

Разрыв строки

Тег <BR>

Элемент, обеспечивающий принудительный переход на новую строку.

Он имеет только начальный тег.

В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.

Атрибут clear

Атрибут clear позволяет выравнивать объекты (например, рисунки) относительно текста, в котором использован элемент BR.

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

• none — значение по умолчанию;

• left — если объект выровнен влево;

• right — если объект выровнен вправо;

• all — для объекта, который может быть выровнен по любому краю.

Пример

<HTML>

<HEAD>

<TITLE> Разрыв строки </TITLE>

</HEAD>

<BODY>

Текст на строки <BR> разбился

</BODY>

</HTML>

Вид Web-страницы в браузере:

Предварительно отформатированный фрагмент текста

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

Если текст разместить на Web-странице с помощью средств, это форматирование будет нарушено.

Для таких предварительно отформатированных фрагментов был введен специальный тег <PRE>.

Тег <PRE> </pre>

Этот тег обладает параметром width, в качестве значения которого указывается длина строки в символах:

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

Пример

<HTML>

<HEAD>

<TITLE> Фрагмент </TITLE>

</HEAD>

<BODY>

Фрагмент текста

разбит

на 3 строки

</pre>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Новый абзац

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

Тег <Р>

В начале каждого абзаца ставится тег <Р>.

В некоторых случаях начальный тег удобно ставить в конце строки: он не только обозначит конец абзаца, но и выполнит функцию тега <BR> (разрыв строки).

Атрибут align

Вместе с элементом абзаца можно использовать атрибут выравнивания align:

• align="left" — выравнивание по левому краю;

• align="center" — выравнивание по центру;

• align=" right" — выравнивание по правому краю.

Для центрирования абзаца следует использовать такую конструкцию:

<Р align="center"> Текст абзаца

Абзацы форматируются браузером, и их вид зависит, от размеров окна программы.

Пример

<HTML>

<HEAD>

<TITLE> Абзацы </TITLE>

</HEAD>

<BODY>

<Р align="center"> Текст первого абзаца .

<Р align="left">Текст второго абзаца.

<Р align="right" >Текст третьего абзаца.

</BODY>

</HTML>

Вид Web-страницы в браузере:

Заголовки

К структурным элементам HTML-документа можно отнести различные заголовки в тексте.

Теги <Н1> </h1>, <Н2> </h2>, …<Н6> </h6>

Существует шесть уровней заголовков, которые обозначаются H1...H6.

Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый мелкий заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align="left"

align="center"

align="right"

Пример

<HTML>

<HEAD>

<TITLE> Заголовки </TITLE>

</HEAD>

<BODY>

<H1 align="center"> Первый уровень заголовка </h1>

<H2 align="left"> Второй уровень заголовка </h2>

< H3 align="right" > Третий уровень заголовка </ h3>

< H4 align="center">Четвертый уровень заголовка </ h4>

< H5 align="left"> Пятый уровень заголовка</ h5>

< H6 align="right" > Шестой уровень заголовка </ h6>

</BODY>

</HTML>

Вид Web-страницы в браузере:

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

В любом месте абзаца можно определить внешний вид шрифта, применяемого для отображения текста, используя тег <font>.

Тег <FONT> </FONT>

Этот тег обладает следующими атрибутами:

§ size - используется для указания размера применяемого шрифта,

§ color - для установки цвета символов шрифта,

§ face - для указания какой именно шрифт будет применяться для отображения текста.

Атрибут size

Первый параметр size применяется для указания размера символов используемого шрифта.

Значениями этого параметра могут быть числа от 1 до 7. Они обозначают некий относительный размер символов, а браузер пользователя сам подберет максимально подходящий размер.

В качестве значения параметра size можно задать изменение размера шрифта. Например, для того, чтобы увеличить размер шрифта на один уровень, следует использовать такую конструкцию:

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

Замечание: Для использования подобных конструкций необходимо отталкиваться от некоего базового размера. Для установки такого размера применяется тег <basefont> с тем же параметром size. Если же этот тэг не использовать, базовым размером символов будет третий уровень.

Пример

<HTML>

<HEAD>

<TITLE> Размер символов</TITLE>

</HEAD>

<BODY>

<font size="7">Седьмой размер</font>

<br><font size="6">Шестой размер</font>

<br><font size="5">Пятый размер</font>

<br><font size="4">Четвертый размер</font>

<br><font size="3">Третий размер</font>

<br><font size="2">Второй размер</font>

<br><font size="1">Первый размер</font>

<br><basefont size=2><font size="+2">Смещение размера </font>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Атрибут color

Второй параметр color устанавливает цвет символов.

Для установки, например зеленого цвета символов применяемого шрифта, используется следующая конструкция:

<font color=" green">

Атрибут face

Третий параметр face позволяет устанавливать вид применяемого шрифта, например Times New Roman.

Замечание 1: Браузер пользователя будет отображать текст посредством шрифтов, установленных в операционной системе удаленного пользователя. Если применить некий редкий шрифт, то его может не оказаться в системе пользователя. В этом случае браузер будет пользоваться собственными правилами шрифтового оформления

Замечание 2: В качестве значения параметра face часто применяется список из названий шрифтов, разделенных запятой. Браузер пытается отыскать их в своей системе в том порядке, в котором они перечислены, и первый найденный шрифт используется для отображения текста.

Пример

<HTML>

<HEAD>

<TITLE> Шрифтовое оформление текста</TITLE>

</HEAD>

<BODY>

Отформатированный текст

</font>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Тег <ВАSЕFОNТ>

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

size =базовый размер шрифта

Величина для этого атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT, который позволяет задавать относительный размер шрифта. Другие атрибуты у этого элемента такие же, как и у элемента FONT.

Различные начертания шрифта

Создавая текстовые документы, мы не ограничиваемся указанием размера, цвета и вида шрифта. Есть ведь еще различные начертания одного шрифта. Можно делать символы курсивными, полужирными, подчеркнутыми и перечеркнутыми. HTML предоставляет нам эти возможности.

Тег <B> </b>

Тег <B> задает полужирное начертание символов выбранного шрифта.

Тег <I> </i>

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

Тег <U> </u>

Тег <U> заставляет браузер подчеркивать текст.

Тег <STRIKE> </strike> или <S> </s>

Тег <STRIKE> описывает перечеркнутый текст.

Тег <TT> </tt>

Тег <TT> отображает символы моноширинным (телетайпным) шрифтом.

Тег <SMALL> </small>

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

Тег <BIG> </big>

Тег <BIG> увеличивает размер символов.

Тег <SUB> </sub>

Тег <SUB> описывает нижний индекс.

Тег <SUP> </sup>

Тег <SUP> описывает верхний индекс.

Пример

<HTML>

<HEAD>

<TITLE> Различные начертания шрифта </TITLE>

</HEAD>

<BODY>

<B>Полужирный</B>

<br> <I>Курсив</I>

<br> <U>Подчеркнутый</U>

<br> <STRIKE>Перечеркнутый</STRIKE>

<br> <TT>Телетайпный</TT>

<br> <SMALL>Уменьшенный размер</SMALL>

<BIG>Увеличенный размер</BIG>

<br>

<br> <SUB>Нижний индекс</SUB>

Текст

<SUP>Верхний индекс</SUP>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Горизонтальная линия

Горизонтальная линия (horizontal rule) — очень часто используемый элемент. С его помощью очень удобно делить страницу на части.

Тег <HR>

Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

align="left"

align="center"

align="right"

align="justify"

Можно задавать толщину линии: size=толцина в пикселах

Можно управлять длиной линии: width=длина в пикселах width=длина в процентах%

Можно выбрать цвет: соlor="цвет"

Пример

<HTML>

<HEAD>

<TITLE> Линия </TITLE>

</HEAD>

<BODY>

<Р align="center"> Текст первой части .

<HR align="center" size=8 соlor="Black" >

<Р align=" center" >Текст второй части.

</BODY>

</HTML>

Вид Web-страницы в браузере:

Графические изображения

Графический объект - второй по значимости после текста компонент наполнения Web-страниц.

К графическим объектам относятся различного рода рисунки, фотографии и видеоклипы.

Браузеры в состоянии отображать только три вида графических файлов:

Ø файлы формата GIF

Ø файлы формата JPEG

Ø файлы формата PNG

Файлы формата GIF позволяют создавать анимированные изображения.

JPEG-файлы обычно применяются для сохранения фотографических изображений.

Недавно появившийся формат PNG обеспечивает хорошее качество изображения и маленький объем графического файла.

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

Тег <IMG>

Этот тег внедряет в содержимое Web-страницы графическое изображение.

Основным и обязательным атрибутом тега <IMG> является параметр src:

В теге <IMG> можно использовать также атрибуты:

Ø ALIGN - выравнивание текста относительно изображения со значениями:

o LEFT - изображение слева, текст обтекает изображение справа

o RIGHT - изображение справа, текст обтекает изображение слева

o TOP - верхняя граница изображения выравнивается по самому высокому элементу

o MIDDLE - середина изображения выравнивается по базовой линии текущей строки

o BOTTOM - нижняя граница изображения выравнивается по базовой линии текущей строки

Ø WIDTH и HEIGHT - ширина и высота изображения в пикселах или процентах от размера экрана

Ø BORDER - толщина рамки вокруг изображения в пикселах

Ø HSPACE и VSPACE - пустые поля вокруг изображения в пикселах

Ø ALT - альтернативный текст

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

Пример

<HTML>

<HEAD>

<TITLE> Графическое изображение </TITLE>

</HEAD>

<BODY>

Это рисунок

<IMG SRC=“../../images/pict1.gif” ALIGN=RIGHT HEIGHT=60%

BORDER=12 HSPACE=6 VSPACE=6 ALT=“Здесь должна быть мышь”>

</BODY>

</HTML>

Вид Web-страницы в браузере, Вид Web-страницы в браузере,
если загрузка графики не отключена: если загрузка графики отключена:

Гиперссылки

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

Если при просмотре Web-страницы навести курсор мыши на гиперссылку, внедренную в состав содержимого Web-страницы, то курсор примет форму кисти руки с вытянутым указательным пальцем.

Щелчок левой кнопкой мыши по гиперссылке заставит браузер отыскать в Сети и загрузить тот ресурс, на который гиперссылка указывает.

Гиперссылкой может стать любой фрагмент видимого содержимого Web-страницы: текст, графическое изображение.

Гиперссылки принято разделять на глобальные и локальные.

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

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

Тег <A> <a>

Предназначен для создания гиперссылки.

Атрибут href

Позволяет задать адрес того интернет-ресурса, на который указывает гиперссылка.

Гиперссылка указывает на другую Web-страницу этого же сайта:

href="other.html"

Гиперссылка указывает на Web-страницу другого сайта:

href="http://www.mysite.com/mypage.html"

Гиперссылка указывает на ящик электронной почты:

href="mailto://address@host.com"

Пример

<HTML>

<HEAD>

<TITLE> Гиперссылки </TITLE>

</HEAD>

<BODY>

<A href="other.html"> Гиперссылка указывает на Web-страницу этого сайта</A>

<BR>Гиперссылка указывает на Web-страницу другого сайта</A>

<BR>Гиперссылка указывает на ящик электронной почты</A>

<BR><BR><BR>Рисунок является гиперссылкой <A href="other.html">

<IMG SRC=“../../images/pict1.gif” ALIGN=RIGHT

BORDER=12 HSPACE=6 VSPACE=6 ALT=“Здесь мышка”> </A>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Таблицы

Таблицы являются очень удобным средством форматирования данных на Web-странице.

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

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

При создании таблиц используется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (TD, ТН).

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

Например, если после элемента TABLE указан элемент TR, это означает, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек), другая таблица и т. д. После того как встретится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега </table>).

Структура таблицы

<TABLE>

<TR>

<TH>заголовок столбца 1</TH>

<TH>заголовок столбца 2</TH>

</TR>

<TR>

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

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

</TR>

</TABLE>

Тег <TAВLЕ> </table>

Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы.

Рассмотрим атрибуты этого элемента. Большинство атрибутов могут использоваться и в других элементах таблицы.

Атрибут align

Таблицу можно выровнять по горизонтали при помощи атрибута align:

align="left" — влево;

align="center" — по центру;

align="right" — вправо.

Атрибут width

Ширину таблицы можно задать точно в пикселах или в процентном отношении к ширине страницы в окне браузера.

Например:

width=400

Атрибуты border и cellspacing

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

Шириной боковой грани управляет атрибут; border=ширина

При задании нулевого значения для этого атрибута рамка исчезает совсем.

Шириной фронтальной грани управляет атрибут: cellspacing= ширина

Если значение этого атрибута равно нулю, рамка получается тонкой, заостренной.

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

cellpadding=число-пикселов или процент

cellpadding="15%"

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

Атрибуты bgcolor и background

Для всей таблицы может быть задан цвет фона: ="Цвет"

bgcolor=# RRGGBB

Вместо цвета допускается использовать рисунок: background="Файл"

Атрибуты bgcolor и background можно указывать и с другими элементами таблицы, кроме элемента CAPTION.

Атрибуты, bordercolorlight, bordercolordark

Атрибут bordercolor определяет цвет всей рамки.

Атрибут bordercolorlight определяет цвет светлой части рамки.

Атрибут bordercolordark определяет цвет темной части рамки.

Атрибут frame

Атрибут frame (используемый только для элемента TABLE) позволяет задать вид рамки таблицы:

frame="параметр"

Существуют следующие стандартные параметры:

• vold — рамка отсутствует;

• above — верхняя сторона рамки;

• below — нижняя сторона рамки;

• hsides — части рамки сверху и снизу;

• vsides — части рамки слева и справа;

• 1hs — левая часть рамки;

• rhs — правая часть рамки;

• border или box — рамка показана полностью.

Разумеется, если атрибут frame отсутствует, рамка вокруг таблицы выводится целиком.

Атрибут rules

Атрибут rules определяет вид сетки таблицы внутри, то есть между ячейками. Он тоже имеет несколько параметров:

• none — сетка отсутствует;

• groups — сетка вокруг групп ячеек,

• rows — горизонтальные линии между строками;

• cols — вертикальные линии между колонками;

• all — обычная сетка.

Тег <CAPTION> </caption>

Элемент для задания заголовка таблицы. Несмотря на то, что этот элемент располагается внутри элемента TABLE, заголовок выводится на экране вне рамки таблицы.

Положением заголовка можно управлять:

• align="top" — заголовок над таблицей;

• align="bottom" — заголовок под таблицей;

• align="left" — заголовок вверху и выровнен влево;

• align="right" — заголовок вверху и выровнен вправо.

Тег <TR>

Элемент, создающий строку таблицы. Он не имеет конечного тега. Строка заканчивается там, где начинается следующая, то есть следующий элемент TR.

Внутри элемента располагаются элементы ТН и TD, определяющие одиночные ячейки. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо известный нам атрибут align и присваивать ему значения left, center и right.

Кроме этого, содержимое ячеек можно выравнивать по вертикали:

• — по верхнему краю;

• — по центру;

• — по нижнему краю

Тег <ТН>

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

Ячейка-заголовок отличается от обычной тем, что браузер выводит текст внутри нее выделенным (как правило, полужирным) шрифтом.

Атрибуты rowspan и colspan

Атрибуты rowspan и colspan позволяют создавать ячейки, которые в несколько раз больше других ячеек таблицы. Иными словами, ячейки в таблице можно объединять.

При задании атрибута rowspan=n соответствующая ячейка займет не одну, а n строк.

При помощи атрибута colspan можно создавать ячейки, расположенные сразу в нескольких столбцах.

Атрибут align

Хорошо известный нам атрибут align используется и для одной ячейки. Он может принимать значения: left (выравнивание по левому краю),center (выравнивание по центру) right (выравнивание по правому краю).

Обычно по умолчанию используется выравнивание влево.

Элемент ТН обеспечивает центрирование текста, если атрибут align отсутствует.

Для элемента TH можно указать атрибут valign таким же образом, как и для элемента TR.

Тег <ТD>

Этот элемент определяет обычную ячейку таблицы. Для него допустимы те же атрибуты, что и для элемента TH.

Оба элемента — ТН и TD — могут не иметь конечных тегов. Функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы.

Пример

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<CAPTION> Заголовок таблицы </caption>

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

<TR><ТD>Ячейка 1<ТD>Ячейка 2

<TR><ТD>Ячейка 3<ТD>Ячейка 4 </table>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Из примера видно, что первая строка таблицы содержит только ячейки-заголовки.

Текст, расположенный после элементов ТD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты) с учетом объема данных в ячейках.

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

Пример

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<CAPTION> Заголовок таблицы </caption>

<ТН bgcolor="yellow">Заголовок 1<ТН bgcolor="yellow">Заголовок 2

<TR><TH bgcolor="yellow">Заголовок 3<ТD>Ячейка 1<ТD>Ячейка 2

<TR><TH bgcolor="yellow">Заголовок 4<ТD>Ячейка 3<ТD>Ячейка 4 </table>

</BODY>

</HTML>

Вид Web-страницы в браузере:

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

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

Пример

<HTML>

<HEAD>

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

</HEAD>

<BODY>

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

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

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

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

</table>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Списки

Списки бывают:

Ø нумерованные,

Ø маркированные,

Ø списки определений и терминов.

Маркированные списки

Тег <UL > </UL>

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

Отдельные элементы списка объявляются с помощью обозначающего тега < li>, который не имеет закрывающего двойника. Закрывающий тег </ li> может применяться, но не обязателен.

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

Ø disc - использование маркера в виде маленького заполненного круга,

Ø circle - задает маркер в виде окружности, используется по умолчанию,

Ø square - устанавливает маркер в виде маленького прямоугольника.

Замечание: Как именно будет отображен маркер того или иного типа, зависит только от браузера, и маркеры не всегда одинаковы в различных браузерах.

Пример

<HTML>

<HEAD>

<TITLE> Маркированный список </TITLE>

</HEAD>

<BODY>

<UL>

<LI type="circle">Первый пункт списка

<LI type="disc">Второй пункт списка

<LI type="square">Третий пункт списка

</UL>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Нумерованные списки

Тег <OL > </OL>

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

Элементы списка объявляются с помощью тега < LI>.

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

Ø 1 - применяется для нумерации обычными арабскими цифрами,

Ø а - задает обозначения в виде строчных букв латинского алфавита. Нумерация идет в алфавитном порядке, начиная от a и до z.

Ø А - задает обозначения в виде строчных букв латинского алфавита заглавными буквами.

Ø i -задает нумерацию римскими цифрами, которые обозначаются строчными буквами латинского алфавита.

Ø I - устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться заглавные латинские буквы.

Пример

<HTML>

<HEAD>

<TITLE> Нумерованный список </TITLE>

</HEAD>

<BODY>

<OL>

<LI type="1">Первый пункт списка

<LI type="a">Второй пункт списка

<LI type="A">Третий пункт списка

<LI type="i">Четвертый пункт списка

<LI type="I">Пятый пункт списка

</OL>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Замечание1: HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в тег < OL> вставляется параметр start. Значением этого параметра является натуральное число, которое и будет номером первого элемента списка.

Замечание2: Внутри списка можно произвольно менять порядковые номера элементов с помощью параметра value, применяемого в составе тэга < li>.

Пример

<HTML>

<HEAD>

<TITLE> Непоследовательный нумерованный список </TITLE>

</HEAD>

<BODY>

<LI >Пятый пункт списка

<LI >Шестой пункт списка

<LI value=10>Десятый пункт списка

<LI >Одиннадцатый пункт списка

</OL>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Замечание 3: Можно создавать многоуровневые вложенные списки, совмещая при этом маркированные и нумерованные элементы. Для этого достаточно вложить тэг, обозначающий начало нового вложенного списка в соответствующий элемент основного списка.

Пример

<HTML>

<HEAD>

<TITLE> Вложенные списки </TITLE>

</HEAD>

<BODY>

<OL >

<LI >Первый пункт списка

<OL >

<LI >Первый вложенный пункт списка

<LI >Второй вложенный пункт списка

</OL>

<LI >Второй пункт списка

<UL>

<LI >Вложенный маркированный элемент

<LI > Вложенный маркированный элемент

</UL>

</OL>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Список определений и терминов

Тег <DL > </DL>

Используется для создания списка определений и терминов.

В качестве элементов используются термины, обозначаемые тэгами < DT>, и определения, создаваемые с помощью тэгов < DD>.

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

Пример

<HTML>

<HEAD>

<TITLE> Список определений </TITLE>

</HEAD>

<BODY>

<DL >

<DT >Это термин

<DD>А это определение

</DL>

<p>А это обычный текст</p>

</BODY>

</HTML>

Вид Web-страницы в браузере:

Фреймы

Фреймы — это области, которые создаются в окне браузера для одновременной демонстрации нескольких документов.

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

При создании страниц с фреймами разрабатывается несколько Web-страниц. При этом HTML- файлы отличаются по типам:

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

Ø Документы содержания предназначены для заполнения информацией каждой из областей.

Структура установочного файла фреймов

<HTML>

<HEAD>

<TITLE> Фреймы </TITLE>

</HEAD>

<FRAME>

</FRAMESET>

</NOFRAMES>

</HTML>

В установочном файле тег FRAMESET используется вместо тега B0DY.

Итак, как же создать Web-страницу с фреймами?

Вначале необходимо продумать, какие области потребуются.

Вторым этапом является подготовка отдельных HTML-файлов для каждой области.

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

До тех пор, пока эти файлы не будут созданы, открывать документ раскладки в браузере не имеет смысла: вы ничего не увидите.

Тег <FRAMESET> </frameset>

Служит для описания областей.

Атрибуты rows и cols

Горизонтальное деление экрана задается при помощи атрибута rows, а вертикальное — при помощи атрибута cols.

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

Приведем несколько примеров:

cols="50%,50%" деление области просмотра по вертикали пополам;

cols="25%,75%" левая вертикальная область в три раза уже правой. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;

rows="150,30%,*" для верхней горизонтальной области отведено 150 пикселов, для средней — тридцать процентов доступного пространства, а для нижней - все, что останется;

cols="*,4*" стиль для любителей головоломок. Правая вертикальная область в четыре раза шире левой. Эту формулу можно записать и так: cols="20%,80%"

Тег <FRAME>

Внутри элемента FRAMESET должна быть создана ссылка на каждый документ содержания, входящий в сложную страницу:

<FRAME src="Имя файла .htm">

Атрибут name

Каждый тег FRAME полезно снабдить именем с помощью атрибута name. Имя можно будет указывать в гиперссылках.

В результате элемент FRAME может выглядеть так:

<FRAME src="Имя файла. htm" name="имя фрейма">

Атрибут noresize

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

Атрибут scrolling

Атрибут scrolling управляет прокруткой внутри одной области.

Он может принимать значения:

YES полосы прокрутки создаются в обязательном порядке

NO прокрутка запрещена

AUTO полосы прокрутки появляются, когда это необходимо

Если этот атрибут отсутствует, браузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях.

Атрибут frameborder

При помощи атрибута frameborder указывается, нужна или нет рамка вокруг фрейма. Значение 1 создает рамку, значение 0 — отменяет. Если необходимо убрать границу между фреймами, надо учитывать, что она создается рамками двух смежных областей.

Пример

<HTML>

<HEAD>

<TITLE> Фреймы </TITLE>

</HEAD>

</FRAMESET>

</HTML>

Вид Web-страницы в браузере:

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

Формы

Формы предлагают внести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще и обработать, но этим занимаются специализированные программы.

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

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

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

Можно использовать общедоступные CGI-скрипты.

Тег <FORM> </form>

Тег <FORM> </form> предназначен для внутренней группировки объектов.

Между тегами <FORM> </form> располагаются теги, создающие элементы управления, и тэги создания обычного содержимого Web-страницы.

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

Атрибут action

Является обязательным. Его значение - адрес того CGI-приложения, которое будет обрабатывать данные, введенные пользователем.

Атрибут method

Предназначен для указания способа, которым данные передаются обрабатывающему приложению.

В качестве значения параметра используется одно из двух предустановленных ключевых слов:getили post. В сопроводительной документации CGI-приложения указывается, какой метод передачи данных следует применить.

По умолчанию используется значение get.

Атрибут enctype

Указывает тип передаваемых из формы данных.

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

Атрибут accept-charset

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

По умолчанию используется значение UNKNOWN, которое указывает серверу, что он должен сам разобраться с применяемыми кодировками.

Атрибут accept

Описывает типы передаваемых файлов.

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

Атрибут name

Определяет уникальное имя формы.

На одной Web-странице может находиться несколько форм.

Пример

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<P> Поле для ввода строки текста <INPUT TYPE="TEXT"></P>

</FORM >

</BODY>

</HTML>

Вид Web-страницы в браузере:

В примере создано поле ввода текста и кнопка, при нажатии на которую введенная пользователем информация будет отправлена CGI-приложению для обработки.

Большая часть элементов управления реализуется с помощью тэга < input>.

Тег <INPUT>

Используется для создания элементов управления.

Регулировка свойств этого тэга производится с помощью атрибутов:

Атрибут type

Определяет тип создаваемого элемента управления.

В качестве значения используется одно из предустановленных ключевых слов:text, password, checkbox, radio, submit, reset, file, hidden, image, button.

По умолчанию используется значение text.

Атрибут name

Определяет уникальное имя элемента управления.

Не является обязательным, но рекомендуется использовать.

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

Атрибут value

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

Атрибут cheked

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

Атрибут disabled

Делает элемент управления недоступным для пользователя. У атрибута нет значений.

Атрибут readonly

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

Атрибут size

Задает размеры элемента управления.

Атрибут maxlength

Позволяет устанавливать максимально возможное число символов, которые пользователь может ввести в поля текстового ввода.

Атрибут src

Значением данного атрибута является URL-адрес графического файла, который содержит отображаемый рисунок.

Атрибут alt

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

Атрибут tabindex

Задает номер элемента управления в последовательности всех объектов, перемещение между которыми осуществляется клавишей Tab.

Атрибут accesskey

Позволяет указать "горячую клавишу", при нажатии на которую фокус ввода переходит к данному элементу управления.

Пример

<HTML>

<HEAD>

<TITLE> Элементы управления формы </TITLE>

</HEAD>

<BODY>

<P> Поле для ввода строки текста <INPUT type="text"></p>

<P> Поле для ввода пароля <INPUT type="password"></p>

<P> Независимый переключатель <INPUT type="checkbox" value="checked"></p>

<P> Группа радиокнопок</p>

<P> Вариант1 <INPUT type="radio" name="group1" value="check1"></p>

<P> Вариант2 <INPUT type="radio" name="group1" value="check2" checked></p>

<P> Вариант3 <INPUT type="radio" name="group1" value="check3"></p>

</FORM >

</BODY>

</HTML>

Вид Web-страницы в браузере:

Тег <SELECT> </select>

Позволяет создавать раскрывающиеся списки и многострочные поля текстового ввода.

Между начальным и конечным тегами выполняется объявление элементов списка тегами < OPTION>.

Атрибут name

Определяет уникальное имя данного поля.

Атрибут size

Задает количество видимых строк при раскрытии списка.

Атрибут multiple

Применяется, если из списка можно выбрать сразу несколько значений.

Атрибут disable

Не позволяет выполнять выбор из списка.

Атрибут tabindex

Тег <OPTION> </option>

Определяет элементы раскрывающегося списка.

Атрибут selected

Используется для элементов, действующих по умолчанию.

Атрибут value

Указывает значение, передаваемое обрабатывающей программе при выборе элемента.

Пример

<HTML>

<HEAD>

<TITLE> Раскрывающиеся списки </TITLE>

</HEAD>

<BODY>

<OPTION value="sel1"> Первый пункт </option>

<OPTION value="sel2" selected> Второй пункт </option>

<OPTION value="sel3"> Третий пункт </option>

</select>

</FORM >

</BODY>

</HTML>

Вид Web-страницы в браузере:

Тег <TEXTAREA> </textarea>

Создает многострочное поле текстового ввода.

Атрибут name

Задает уникальное имя данного элемента.

Атрибут rows

Устанавливает количество отображаемых строк. Атрибут обязателен.

Атрибут cols

Задает ширину поля ввода в символах. Атрибут обязателен.

Атрибут disabled

Используется, если поле необходимо сделать недоступным для применения.

Атрибут readonly

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

Атрибут tabindex

Атрибут accesskey

Пример

<HTML>

<HEAD>

<TITLE> Многострочное поле ввода </TITLE>

</HEAD>

<BODY>

Текст, который будет отображаться в многострочном поле ввода

</textarea>

</FORM >

</BODY>

</HTML>

Вид Web-страницы в браузере:

Содержание

Введение.. 3

Основные определения.. 4

Синтаксис языка HTML.. 5

Структура документа HTML.. 6

Тег <HTML> </html>.. 6

Тег <HEAD> </head>.. 6

Тег <BODY> </body>.. 6

Тег .. 6

Служебная часть. 7

Тег <TITLE> </title>.. 7

Тег <МЕТА>.. 7

Тег <STYLE> </style>.. 9

Тег <SCRIPT> </script>.. 9

Содержимое Web-страницы.. 10

Тег <BODY> </body>.. 10

Оформление текста.. 12

Разрыв строки. 12

Тег <BR>.. 12

Предварительно отформатированный фрагмент текста. 13

Тег <PRE> </pre>.. 13

Новый абзац. 14

Тег <Р>.. 14

Заголовки. 16

Теги <Н1> </h1>, <Н2> </h2>, …<Н6> </h6>.. 16

Шрифтовое оформление текста. 17

Тег <FONT> </FONT>.. 17

Тег <ВАSЕFОNТ>.. 19

Различные начертания шрифта. 20

Тег <B> </b>.. 20

Тег <I> </i>.. 20

Тег <U> </u>.. 20

Тег <STRIKE> </strike> или <S> </s>.. 20

Тег <TT> </tt>.. 20

Тег <SMALL> </small>.. 20

Тег <BIG> </big>.. 20

Тег <SUB> </sub>.. 20

Тег <SUP> </sup>.. 20

Горизонтальная линия. 22

Тег <HR>.. 22

Графические изображения.. 23

Тег <IMG>.. 23

Гиперссылки.. 25

Тег <A> <a>.. 25

Таблицы... 27

Структура таблицы.. 27

Тег <TAВLЕ> </table>.. 28

Тег <CAPTION> </caption>.. 30

Тег <TR>.. 30

Тег <ТН>.. 30

Тег <ТD>.. 31

Списки.. 34

Маркированные списки. 34

Тег <UL > </UL>.. 34

Нумерованные списки. 35

Тег <OL > </OL>.. 35

Список определений и терминов. 39

Тег <DL > </DL>.. 39

Фреймы... 40

Структура установочного файла фреймов. 40

Тег <FRAMESET> </frameset>.. 40

Тег <FRAME>.. 41

Формы... 43

Тег <FORM> </form>.. 43

Тег <INPUT>.. 45

Тег <SELECT> </select>.. 47

Тег <OPTION> </option>.. 48

Тег <TEXTAREA> </textarea>.. 49

Содержание.. 51

Литература.. 53

Литература

1. С.В. Глушаков, Д.В. Ломотько, В.В. Мельников, Работа в сети Internet: Учебный курс/Худож.-оформитель А.С. Юхтман. - Харьков: Фолио; М.: ООО "Издательство АСТ", 2002.- 346 с. - (Домашняя библиотека).

2. А. Матросов, А. Сергеев, М. Чаунин, HTML 4.0. - СПб.: БХВ-Петербург, 2002. - 672 с.: ил.

3. Л. Мелихова, Интернет. Энциклопедия - СПб: ЗАО "Питер Бук", 2000. - 528 с.: ил.

4. И.В. Шапошников, Самоучитель HTML 4. . - СПб.: БХВ-Петербург, 2001. - 288 c.: ил.

Учебно-методическое пособие

Создание Web -страниц
средствами языка HTML

Составители: Ирина Владимировна Виноградова

Светлана Станиславовна Щупак

Ответственный за выпуск В.В. Шпилевская

Редактор С.П.Цвирко

Подписано в печать Формат 60x84 1/8

Усл.печ.л. Уч.-изд.л. Тираж Заказ

Отпечатано на ротапринте РИПК работников Минтруда и соцзащиты РБ

220121 Минск, ул. Притыцкого, 60/4

Дата добавления: 2021-06-02; просмотров: 72; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 12

Мы поможем в написании ваших работ!