<P ALIGN=”center”>Это
центрированный параграф.<BR>
Текст располагается в центре окна
браузера</P>
<P ALIGN=”right”>А это параграф,
выровненный по правому краю.</P>
Параметры:
ALIGN – определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение Left.
<BR>
Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе.
<HR>
Вставляет в текст горизонтальную разделительную линию.
<PRE>…</PRE>
Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки
…
<PRE>
Hi There!
Hi There!
Hi There!
</PRE>
…
Результат на экране
<FONT>…</FONT>
Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами.
<FONT SIZE=”+2”
COLOR=”#АА0000”>Увеличенный
красный шрифт</FONT>
<FONT SIZE=”3” FACE=”Courier”
COLOR=”Magenta”>Моноширинный фиолетовый текст 3 размера</FONT>
Параметры:
SIZE– определяет размер шрифта. Возможные значения: целое число от 1 до 7;
COLOR– определяет цвет текста, используя значение цвета в виде RRGGBB (пример: FF0000 - красный цвет), либо используя константы цвета. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
FACE– определяет гарнитуру шрифта (Arial, Times New Roman, Courier New и др).
Запись некоторых цветов в формате RGB
Цвет
RRGGBB
Цвет
RRGGBB
Black черный
Purple фиолетовый
FFOOFF
While белый
FFFFFF
Yellow желтый
FFFFOO
Red красный
FFOOOO
Brown коричневый
Green зеленый
OOFFOO
Orange оранжевый
FF8000
Azure бирюзовый
OOFFFF
Violet лиловый
8000FF
Blue синий
OOOOFF
Gray серый
АОАОАО
<UL>…</UL>
Создает маркированный список. Между начальным и конечным тэгами
должны присутствовать один или несколько элементов LI, обозначающих
отдельные пункты списка.
< UL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</UL>
Параметры:
typeТип маркера
disc
Закрашенный кружок. По умолчанию
circle
Незакрашенный кружок
square
Квадратик
<OL>…</OL>
Создает нумерованный список. Между начальным и конечным тэгами
должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
<OL TYPE=”I” START=”2”>
<LI> Пункт два <LI> Пункт три <LI> Пункт четыре
</OL>
Параметры:
START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа)
TYPE – определяет стиль нумерации пунктов. Может иметь значения:
”A” - заглавные буквы A,B,C …
”a” - строчные буквы a, b, c …
”I” - большие римские числа I, II, III …
”i” - маленькие римские числа i, ii, iii …
”1” - арабские числа 1, 2, 3 …
По умолчанию используется TYPE=”1”.
<LI>
Создается пункт в списке. Располагается внутри элементов OL или UL
<OL TYPE=”A” START=”2”>
<LI> Пункт, озаглавленный буквой B.
<LI VALVE=”6”> Пункт,
озаглавленный буквой F.
<LI> Пункт озаглавленный буквой G.
</OL>
Параметры:
VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
<IMG>
Позволяет вставить в документ изображение (внедрения графики на страницы). На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF).
Некоторые атрибуты изображения
Атрибут
Формат
Описание
ALT
<IMG SRC="WAGON.GIF" ALT=" картинка">
Задает текст, заменяющий изображение в том случае, если браузер не воспринимает это изображение
BORDER
<IMG SRC="WAGON.GIF" BORDER="3">
Задает толщину рамки вокруг изображения. Измеряется в пикселях
ALIGN
<IMG SRC="WAGON.GIF" ALIGN=TOP>
Задает выравнивание изображения относительно текста:относительно текста выровнена верхняя часть изображения - ТОР, нижняя - BOTTOM. средняя - MIDDLE
HEIGHT
<IMG SRC="WAGON.GIF" HEIGHT=111>
Задает вертикальный размер изображения внутри окна броузера
WIDTH
<IMG SRC="WAGON.GIF" WIDTH=220 >
Задает горизонтальный размер изображения внутри окна броузера
VSPACE
<IMG SRC="WAGON.GIF" VSPACE="8">
Задает добавление верхнего и нижнего пустых полей
HSPACE
<IMG SRC="WAGON.GIF" HSPACE="8">
Задает добавление левого и правого пустых полей
TITLE
<IMG SRC="WAGON.GIF" TITLE=”КАРТИНКА»>
Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title.
Задание цвета фона и текста (задаются в теге <BODY>)
Эти параметры можно объединять, например на одной странице используется
<BODY bgcolor="yellow" text="green" link="red" alink="blue">
Некоторые атрибуты фонового изображения
Атрибут
Формат
Описание
bgcolor
<body bgcolor= "yellow">
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета
background
<body background= "koala.jpg">
Указывает на url-адрес изображения - фона документа (фон картинкой)
offsetWidth
???
???
Размер объекта ???
text
<body text= "green">
Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета
link
<body link= "red">
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет, либо используя константы цвета
vlink=
Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB (пример: 333333 - серый цвет)
alink=
Устанавливает цвет гиперссылок при нажатии мышкой
Теги для работы с таблицами
<TABLE>…</TABLE>
Создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица.
Некоторые атрибуты тега <TABLE>
Атрибут
Описание
align
Выравнивание таблицы относительно документа. Возможные значения: center, left, right
background
Строка, определяющая рисунок для заднего фона
bgcolor
Определяет задний фон таблицы
border
Толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки
bordercolor
Цвет рамки
cellspacing
Задает расстояние между ячейками таблицы
cellpadding
Задает расстояние между содержимым ячейки и ее рамкой
rules
Описывает рамки вокруг таблицы. Может принимать следующие значения
all
Отображает все части рамки внутри таблицы
cols
Отображает все вертикальные рамки внутри таблицы
groups
Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT
none
Удаляет все рамки вокруг таблицы
rows
Отображает все горизонтальные рамки внутри таблицы
width
Ширина таблицы в процентах или пикселах
<CAPTION>…</CAPTION>
определяет заголовок для таблицы TABLE. Может располагаться только непосредственно после начального тега <TABLE>. Тег <TABLE> может включать только один элемент <CAPTION>
Атрибуты
align= Выравнивание заголовка относительно таблицы.
Возможные значения: left, right, top (по умолчанию), bottom
<TH>…</TH>
определяет заголовок для столбца в таблице. Обычно, выделяются жирным шрифтом
Некоторые атрибуты тега <TH>
Атрибут
Описание
bgcolor
Цвет фона
bordercolor
Цвет рамки для элемента
height
Указывает высоту элемента в процентах или пикселях
align
Выравнивает текст в ячейке (left - по левому краю (по умолчанию) rigth - по правому краю, center - по центру)
valign
Выравнивает текст в ячейке по вертикали (top - по верхнему краю, middle - по центру, bottom - по нижнему краю )
colspan
Указывает кол-во столбцов, которое объединено в одной ячейке (по умолчанию=1)
rowspan
Указывает кол-во строк, которое объединено в одной ячейке (по умолчанию=1)
<TD>…</TD>
определяет отдельную ячейку в таблице. Закрывающий тег не обязателен, но желателен
Некоторые атрибуты тега <TD>
Атрибут
Описание
height
Указывает высоту элемента в процентах или пикселях
align
Выравнивает текст в ячейке (left - по левому краю (по умолчанию) rigth - по правому краю, center - по центру)
valign
Выравнивает текст в ячейке по вертикали (top - по верхнему краю, middle - по центру, bottom - по нижнему краю )
colspan
Указывает кол-во столбцов, которое объединено в одной ячейке (по умолчанию=1)
rowspan
Указывает кол-во строк, которое объединено в одной ячейке (по умолчанию=1)
<TR>
определяет строку в таблице, закрывающий тег необязателен
Некоторые атрибуты тега <TR>
Атрибут
Описание
align
Выравнивает текст в ячейке (left - по левому краю, rigth - по правому краю, center - по центру)
valign
Выравнивает текст в ячейке по вертикали (top - по верхнему краю, middle - по центру, bottom - по нижнему краю )
<THEAD>
определяет заголовок таблицы, содержащий информацию о столбцах таблицы. В таблице может быть только один <THEAD>. Внутри заголовка допустимо использовать теги <TR>, <TH>, <TD>. Закрывающий тег необязателен
HTML-ссылки
<a> (ancor - якорь)
Определяет текст ссылки
Некоторые атрибуты тега <a>
Атрибут
Описание
Ссылки на внешние страницы
href
Это сокращение от «hypertext reference/гипертекстовая ссылка», указывает место, на которое выполняется переход по данной ссылке – обычно это internet-адрес и/или имя файла
<a href = "http://www.mail.ru">
в поисковой системе.</a>
Ссылка на поисковую систему mail.ru
<a href="page2.html">здесь.</a>
Открытие страницы, находящейся в той же папке, что и главная страница
<a href= "dop_papka/page2.html"> здесь.</a>
Открытие страницы, находящейся в папке dop_papka
<a href="../page2.html">здесь.</a>
Открытие страницы, расположенную на один уровень вверх
Ссылки внутри страницы
1) Пример, ссылка на раздел «Товары»:
А)<h1 id="tovar">Товары:</h1>
Б)<p> <h2><a href="#tovar">Перейти к товарам</a></h2><br>
Для этого:
А) ставим метку в разделе, на который будем ссылаться
Б) теперь можно ссылаться на помеченную область «Товары»
Ссылка на почту
<a href="mailto:konfinform@mail.ru"> Написать письмо админу.</a>
Запускается почтовая программа-клиент с заполненным полем имени получателя
Дополнительные атрибуты
Target
Указывает где открывать страницу, на которую ведет html-ссылка. По умолчанию открывается в том же окне.
Target=“_blank”
Открывается в новом окне
Title
Указывает заголовок ссылки, который появляется при наведении на нее
Изменение цвета ссылок
Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY. Все цвета задаются либо RGB- значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Все ссылки в данном документе станут красными, уже посещенные – зелеными, в момент нажатия белыми.
Если нужно, чтобы в каком-то месте ссылка имела другой цвет, то нужно внутри html-ссылки прописать элемент font с атрибутом цвета
Пример:
<a href="http://www.mail.ru" Title="Поисковая система Mail.ru"target="_blank"> <font
color="black">в поисковой системе.</a>
Теги для работы с html-формами
<FORM>…</FORM>
Создает пользовательские формы на странице. Используется совместно с элементом <INPUT>
Пример:
<form name= «forma zakaza» method=”post” action=”obrabotchik.php >
<!—сюда вставляются различные элементы формы>
</form>
Атрибут
Описание
name
присваивает форме уникальное имя, по которому можно будет к ней обращаться
Action (обязательный атрибут)
точный адрес, по которому браузер передает результаты, заполненные пользователем на форме (URL программы, находящейся на сервере, которая будет принимать данные, указанные пользователем и обрабатывать их,такие программы называются скриптами и могут быть написаны на языках PhP, Perl, CGI и т.д.)
Method
метод передачи данных,возможные значения: get - браузер передает данные формы в конце URL адреса, указанного в атрибуте action post - браузер передает данные отдельным HTML файлом (более защищены от кражи)
Target
имя окна, в котором браузер будет выводить страницу подтверждения передачи результатов формы, возможные значения: _self - в том же окне _top - в topmost окне (в том же самом) _parent - в родительском (т.е. в том же самом) _blank - в новом окне
Title
позволяет создавать всплывающий текст над формой
Style
стандартный набор атрибутов стилей,
<input>
(не имеет конечного тега)
используется для вставки на форму элементов управления, таких, как кнопки, текстовые поля, радио кнопки, выпадающие списки и т.д. и т.п... Используется совместно с элементом <FORM>.
определяет тип элемента управления: (по умолчанию=«text»)
text - определяет текстовое поле для ввода текста
password - аналогичен text, с той лишь разницей, что весь введенный текст отображается звездочками (*******). этот способ защиты весьма формален, многое зависит от способа отправки данных с формы скрипту (get,post)
checkbox - позволяет создавать "переключатели"
radio - позволяет создавать группу "взаимоисключающих переключателей", иногда их объединяют в группы при помощи элемента <LАBEL>
file - позволяет создавать элемент для выбора локальных файлов
hidden - позволяет создавать невидимый для пользователя элемент управления. Весьма полезен для отправки скрытой от глаз пользователя информации вместе с его информацией
image - позволяет создавать элемент формы в виде кнопки-изображения
button -позволяет создавать стандартные кнопки
submit - позволяет создавать кнопку "отправка запроса"
reset - позволяет создавать кнопку "сброс" (сбрасывает все введенные данные в полях формы в их первоначальное состояние, заданное по умолчанию)
Name
присваивает элементу уникальное имя, по которому можно будет к нему обращаться
Size
задает количество видимых символов для типа text (по умолчанию значение=24)
value
позволяет создавать отображаемый текст для таких элементов управления, как: text, button, reset, submit, password
maxlength
позволяет задавать максимально допустимое количество символов для элемента типа text
disabled
позволяет отключать (делать неактивными элементы управления на форме), возможное значение disabled
checked
позволяет делать некоторые элементы выбранными (radio, checkbox)
tabindex
позволяет задать очередность выделения полей формы при нажатии на кнопку TAB
title
позволяет создавать всплывающий текст над надписью
style
стандартный набор атрибутов стилей
Пример
<form id="form1" name="form1" method="get" action=".."> <p>Имя: <input type="text" name="FirstName" id="FirstName" tabindex="1" size="15"/> Фамилия: <input type="text" name="LastName" id="LastName" tabindex="2" size="30"/></p> <textarea name="TextArea" rows="5" cols="45" tabindex="3" >Привет, вот так вот можно запроcто вставить текствовое поле ввода для регистрации или для отправки сообщения на сервер </textarea> <p><input type="checkbox" name="Check01" />Windows XP<br /> <input type="checkbox" name="Check02"/>Windows Vista<br /> <input type="checkbox" name="Check03"/>Windows 98<br /> <input type="checkbox" name="Check04"/>Windows 95</p><br /> <label><p><input type="radio" name="Radio01"/>Да<input type="radio" name="Radio01" /> Нет </p></label> <p><input type="reset" name="Reset" tabindex="4" /> <input type="submit" name="Submit" tabindex="5" value="Отправить"/></p> </form>
Выше описанный пример будет выглядеть так:
Имя: Фамилия:
Привет, вот так вот можно запроcто
вставить текствовое поле ввода для
регистрации или для отправки
сообщения на сервер
Windows XP Windows Vista Windows 98 Windows 95
Да Нет
<BUTTON>…</BUTTON>
служит для вставки кнопки на страницу
Атрибут
Описание
disabled
определяет кнопку как неактивную, принимает значение disabled
name
присваивает имя элементу,для обращения к конкретной кнопке на странице
используется для объединения нескольких элементов в один контейнер, например для того, чтобы объединить несколько радио-кнопок. Как правило, используется в теге <FORM>.
Атрибут
Описание
for
применяется в случае, если элемент <LABEL> находится отдельно от присоединяемого элемента, принимает значения равное id-адресу присоединяемого элемента
dir
отвечает за направление текста внутри элемента, возможные значения: rtl - справа-налево ltr - слева-направо
title
позволяет создавать всплывающий текст над надписью
Выберите наиболее защищенную операционную систему Windows Linux Macintosh
В результате выполнения приведенного выше кода, Вы сможете активировать переключатели, нажимая на текст возле них (т.е. текст и сами переключатели стали одним цельным элементом)
