Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Санкт-Петербургский государственный университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Все теги A-Z.doc

Скачиваний:

Добавлен:

20.08.2019

Размер:

1.53 Mб

Скачать

☆

<<< < Предыдущая 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3132 / 3532 33 34 35 > Следующая >>>

Описание параметров тега <OPTGROUP>

Параметр LABEL

Описание

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

Синтаксис

Обязательный параметр

Да.

Аргументы

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Описание

Тег <OPTION> определяет отдельные пункты списка, создаваемого с помощью контейнера <SELECT>. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис

<select> <option>Пункт 1</option> <option>Пункт 2</option> </select>

Параметры

selected

Заранее устанавливает определенный пункт списка выделенным.

value

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

Закрывающий тег

Не обязателен.

Пример 1. Использование тега <OPTION>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <form action="/cgi-bin/handler.cgi"> <select size="3" name="hero"> <option selected>Выберите героя</option> <option value="t1">Чебурашка</option> <option value="t2">Крокодил Гена</option> <option value="t3">Шапокляк</option> <option value="t4">Крыса Лариса</option> </select> <input type="submit" value="Отправить"> </form> </body> </html>

Описание параметров тега <OPTION>

Параметр SELECTED

Описание

Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 2. Выделение пункта списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <form action="/cgi-bin/handler.cgi"> <select name="hero"> <option selected>Выберите героя</option> <option value="t1">Чебурашка</option> <option value="t2">Крокодил Гена</option> <option value="t3">Шапокляк</option> <option value="t4">Крыса Лариса</option> </select> <input type="submit" value="Отправить"> </form> </body> </html>

Параметр VALUE

Описание

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным. Также параметр value применяется для получения значений данных через скрипты.

Синтаксис

Аргументы

Любая текстовая строка заключенная в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример 3. Обращение к элементу списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> function dataSelect(f) { n = f.hero.selectedIndex if(n) alert("Выбран герой: " + f.hero.options[n].value) } </script> </head> <body> <form> <select name="hero"> <option>Выберите героя</option> <option value="Чебурашка">Чебурашка</option> <option value="Крокодил Гена">Крокодил Гена</option> <option value="Шапокляк">Шапокляк</option> <option value="Крыса Лариса">Крыса Лариса</option> </select> <input type="button" value="OK" onClick="dataSelect(this.form)"> </form> </body> </html>

Описание

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

Синтаксис

<p>Текст <p>Текст</p>

Параметры

align

Определяет выравнивание текста.

Закрывающий тег

Не обязателен.

Пример 1. Использование тега <P>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>

Описание параметров тега <P>

Параметр ALIGN

Описание

Выравнивание блока текста по краю.

Синтаксис

Аргументы

left

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

center

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

right

Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.

justify

Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию

left

Пример 2. Выравнивание текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html>

Описание

Тег <PARAM> предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов <APPLET> или <OBJECT>. Такой подход позволяет прямо в коде HTML-документа изменять характеристики апплета без его дополнительной компиляции. Количество одновременно используемых тегов PARAM может быть больше одного и для каждого из них задается пара «имя/значение» через атрибуты name и value.

Апплетом называется программа, которая выполняется с составе браузера или под управлением специальной программы для ее просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание «Java-апплет».

Синтаксис

Параметры

name

Имя параметра.

value

Значение параметра.

Закрывающий тег

Не требуется.

Пример 1. Использование тега <PARAM>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

</body> </html>

Описание параметров тега <PARAM>

Параметр NAME

Описание

Определяет уникальное имя параметра. Это имя должно быть программно заложено в код апплета или объекта.

Синтаксис

Обязательный параметр

Да.

Аргументы

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

Значение по умолчанию

Нет.

Параметр VALUE

Описание

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

Синтаксис

Аргументы

В качестве значения может быть строка или число.

Значение по умолчанию

Нет.

Описание

Элемент <PRE> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <PRE> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <PLAINTEXT>, использование которого осуждается в HTML 4, внутри контейнера <PRE> допустимо применять любые теги.

Следующие теги не должны размещаться внутри контейнера <PRE>: <APPLET>, <BASEFONT>, BIG>, <FONT>, <IMG>, <OBJECT>, <SMALL>, <SUB> и <SUP>.

Синтаксис

<pre>Текст</pre>

Закрывающий тег

Обязателен.

Пример 1. Использование тега <PRE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <pre>

- -- ------ -¦---

----- ------ ¦-----

¦¦----¦ ¦¦--¦¦ ---¦

¦¦----- ---- ----¦

¦¦-----¦ ¦¦¦¦ ¦----¦-¦

¦¦ ----- -- -----¦ -

¦¦- ----¦ -- ¦-----¦¦-

¦¦---¦¦-- -- ------¦--

¦¦--¦¦ --¦-- ¦--¦------

¦¦ -¦¦ ¦-- --- - ----

¦¦ -¦¦ --¦-¦--¦ - ---¦

¦---¦¦- ¦-----¦ ¦-----

¦---¦¦ ¦---- ¦----¦

¦----¦ --- ¦------

------ --------

</pre> </body> </html>

Результат данного примера показан ниже.

- -- ------ -¦---

----- ------ ¦-----

¦¦----¦ ¦¦--¦¦ ---¦

¦¦----- ---- ----¦

¦¦-----¦ ¦¦¦¦ ¦----¦-¦

¦¦ ----- -- -----¦ -

¦¦- ----¦ -- ¦-----¦¦-

¦¦---¦¦-- -- ------¦--

¦¦--¦¦ --¦-- ¦--¦------

¦¦ -¦¦ ¦-- --- - ----

¦¦ -¦¦ --¦-¦--¦ - ---¦

¦---¦¦- ¦-----¦ ¦-----

¦---¦¦ ¦---- ¦----¦

¦----¦ --- ¦------

------ --------

Описание

Тег <Q> используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках. Браузер Internet Explorer хотя и понимает тег <Q>, но кавычки не ставит. Остальные браузеры кавычки добавляют корректно.

Синтаксис

<q>Текст</q>

Закрывающий тег

Обязателен.

Пример 1. Использование тега <Q>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> Q { font-family: Times, serif; /* Шрифт с засечками */ font-style: italic; /* Курсивное начертание текста */ color: navy;/* Цвет текста */ quotes: "\00AB" "\00BB" /* Меняем вид кавычек */ } </style> </head> <body>

<p>Станислав Лец утверждал: <q>Чаще всего выход там, где был вход</q>.</p>

</body> </html>

Результат данного примера показан ниже.

Станислав Лец утверждал: Чаще всего выход там, где был вход.

В каждом языке существуют свои традиции для обозначения кавычек, в русской типографике, например, применяются кавычки вида «...» или „...“. Для изменения типа кавычек используется стилевой параметр quotes

Описание

Элемент <SAMP> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <SAMP> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.

Синтаксис

<samp>Текст</samp>

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SAMP>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> CODE { color: green /* Цвет текста */ } SAMP { color: maroon /* Цвет текста */ } </style> </head> <body>

<p>Проверка, поддерживает браузер JavaScript 1.3 или нет.</p> <code> <script language="JavaScript1.3"> JS13 = 1; </script><br> <script language="JavaScript"><br> if (window.JS13) document.write("Ваш браузер поддерживает JavaScript 1.3");<br> </script> </code>

<p>В результате выполнения скрипта вы увидите текст <samp>Ваш браузер поддерживает JavaScript 1.3</samp>, в том случае, если браузер работает с версией 1.3.</p>

</body> </html>

Результат данного примера показан ниже.

Проверка, поддерживает браузер JavaScript 1.3 или нет. <script language="JavaScript1.3"> JS13 = 1; </script> <script language="JavaScript"> if (window.JS13) document.write("Ваш браузер поддерживает JavaScript 1.3"); </script> В результате выполнения скрипта вы увидите текст Ваш браузер поддерживает JavaScript 1.3, в том случае, если браузер работает с версией 1.3.

Описание

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

<SCRIPT> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Синтаксис

Параметры

defer

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

language

Устанавливает язык программирования на котором написан скрипт.

src

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

type

Определяет тип содержимого тега <SCRIPT>.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SCRIPT>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

<table width="400" border="1"> <script language="JavaScript"> for (i=1; i<6; i++) { document.writeln("<tr>"); for (j=1; j<6; j++) document.write("<td>" + i + j + "</td>"); document.writeln("</tr>"); } </script> </table>

</body> </html>

Описание параметров тега <SCRIPT>

Параметр DEFER

Описание

Параметр defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Этот параметр работает только в браузере Internet Explorer, а в остальных браузерах будет проигнорирован.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 2. Использование параметра defer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript" DEFER> document.forms[0].textField.value = 17; </script> </head> <body> <form> Введите ваш возраст<br> <input type="text" name="textField"> </form> </body> </html>

Параметр LANGUAGE

Описание

Параметр language указывает язык написания скрипта. Рекомендуется всегда задавать этот параметр, поскольку если браузер не распознает язык программирования, то скрипт игнорируется и не выполняется. Вместе с тем, в HTML 4.0 данный параметр осуждается, а вместо него следует применять параметр type, который указывает тип MIME для определенного языка.

Синтаксис

Аргументы

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

JavaScript

язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например — JavaScript1.3.

JScript

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

VBS, VBScript

Язык программирования VBScript основанный на Visual Basic. Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer.

Значение по умолчанию

JavaScript

Пример 3. Проверка языка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="VBScript"> VB = True </script> <script language="JavaScript"> JS = 1; </script> <script language="JavaScript1.1"> JS11 = 1; </script> <script language="JavaScript1.2"> JS12 = 1; </script> <script language="JavaScript1.3"> JS13 = 1; </script> <script language="JavaScript1.4"> JS14 = 1; </script> <script language="JavaScript1.5"> JS15 = 1; </script>

Параметр src Описание

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

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

Синтаксис

Аргументы

В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.

Значение по умолчанию

Нет.

Пример 4. Вызов скрипта из внешнего файла

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript" src="/scripts/browser.js"></script> </head> <body> ... </body> </html>

Параметр TYPE

Описание

Указывает тип MIME для определенного языка. Поскольку некоторые браузеры не понимают параметр type, лучше задавать два атрибута одновременно — language и type. Если браузер распознает значение параметра type, то значение language отменяется.

Синтаксис

Обязательный параметр

Да

Аргументы

Параметр type не чувствителен к регистру и принимает следующие значения:

text/javascript

Для языка программирования JavaScript.

text/vbscript

Для языка VBScript.

Значение по умолчанию

text/javascript

Пример 5. Выбор языка программирования

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript" type="text/javascript"> ... </script> </head> <body> ... </body> </html>

Описание

Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Начало формы


Список множественного выбора	Раскрывающийся список

Конец формы

Синтаксис

<select> <option>Пункт 1</option> <option>Пункт 2</option> </select>

Параметры

disabled

Блокирует доступ и изменение элемента.

multiple

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

name

Имя элемента для отправки на сервер или обращения через скрипты.

size

Количество отображаемых строк списка.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SELECT>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

<select size="3" multiple name="hero"> <option selected>Выберите героя</option> <option value="t1">Чебурашка</option> <option value="t2">Крокодил Гена</option> <option value="t3">Шапокляк</option> <option value="t4">Крыса Лариса</option> </select>

</body> </html>

Описание параметров тега <SELECT>

Параметр DISABLED

Описание

Блокирует доступ и изменение элементов списка.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 2. Блокировка списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <select disabled name="hero"> <option selected>Выберите героя</option> <option value="t1">Чебурашка</option> <option value="t2">Крокодил Гена</option> <option value="t3">Шапокляк</option> <option value="t4">Крыса Лариса</option> </select> </body> </html>

Параметр multiple Описание

Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше, чем число пунктов, то появляется вертикальная полоса прокрутки. Когда size="1" список превращается «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка неудобно.

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

Начало формы


Параметр size отсутствует	Параметр size равен 1

Конец формы

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 3. Создание списка множественного выбора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <select multiple size="1"> <option>Чебурашка</option> <option>Крокодил Гена</option> <option>Шапокляк</option> <option>Крыса Лариса</option> </select> </body> </html>

Параметр NAME

Описание

Определяет уникальное имя элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты.

Синтаксис

Аргументы

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <SELECT> по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию

Нет.

Пример 4. Обращение к списку по его имени

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function dataSelect(f) { n = f.hero.selectedIndex if(n) alert("Выбран герой: " + f.hero.options[n].value) } </script> </head> <body> <form> <select name="hero"> <option>Выберите героя</option> <option value="Чебурашка">Чебурашка</option> <option value="Крокодил Гена">Крокодил Гена</option> <option value="Шапокляк">Шапокляк</option> <option value="Крыса Лариса">Крыса Лариса</option> </select> <input type="button" value="OK" onClick="dataSelect(this.form)"> </form> </body> </html>

Параметр SIZE

Описание

Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

Аргументы

Любое положительное целое число.

Значение по умолчанию

Зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то по умолчанию значение параметра size равно 1.

Пример 5. Высота списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <select size="1"> <option selected>Выберите героя</option> <option>Чебурашка</option> <option>Крокодил Гена</option> <option>Шапокляк</option> <option>Крыса Лариса</option> </select> </body> </html>

Описание

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

На размер шрифта влияет не только заданный параметр size тега <FONT>, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили.

Синтаксис

<small>Текст</small>

Закрывающий тег

Обязателен.

Параметры

Нет.

Аналог CSS

font-size

Пример 1. Использование тега <SMALL>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <big><big>Lorem ipsum dolor sit amet</big></big><br> <small>Lorem</small> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <small>Ut</small> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html>

Описание

Тег <SPAN> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега <P>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <SPAN> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Синтаксис

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SPAN>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> BODY { font-family: Arial, sans-serif } .letter { color: red; font-size: 200%; font-family: serif; position: relative; top: 5px } </style> </head> <body> <p><span class="letter">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p><span class="letter">U</span>t wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>

Результат данного примера показан ниже.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Описание

Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Синтаксис

<strong>Текст</strong>

Закрывающий тег

Обязателен.

Параметры

Нет.

Аналог CSS

font-weight

Пример 1. Использование тега <STRONG>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <strong>Lorem ipsum dolor sit amet</strong><br> <strong>Lorem</strong> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <strong>Ut</strong> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html>

Примечание

Следует отметить, что теги <B> и <STRONG>, также как <I> и <EM>, несмотря на сходство результат, являются не совсем эквивалентными и заменяемыми. Первый тег <B> — является тегом физической разметки и устанавливает жирный текст, а тег <STRONG> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <B> и <STRONG>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Описание

Тег <STYLE> применяется для определения стилей элементов веб-страницы. Допускается размещать <STYLE> в любом месте веб-страницы. Однако если в стилях идет описание селектора BODY и других важных эементов, то необходимо тег <STYLE> использовать внутри контейнера <HEAD>. Можно использовать более чем один тег <STYLE>.

Синтаксис

Параметры

media

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

type

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

Закрывающий тег

Обязателен.

Пример 1. Использование тега <STYLE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366 } </style> </head> <body> <H1>Hello, world!</H1> </body> </html>

Описание параметров тега <STYLE>

Параметр MEDIA

Описание

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

Синтаксис

Аргументы

all

Стиль, предназначенный для одновременного просмотра на мониторе и вывода на печать.

Стиль для вывода на печать.

screen

Стиль для вывода на экран монитора.

Аргументы чувствительны к регистру. Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию

screen

Пример 2. Стили для разных устройств вывода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css" media="screen"> .window { background: url(/images/bg.gif); border: 1px solid black; font-family: Arial; font-size: 90%; color: #fc0; padding: 10px

} </style>

Параметр TYPE

Описание

Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <STYLE>.

Синтаксис

Аргументы

В качестве значения используется MIME-тип — text/css.

Значение по умолчанию

text/css

Пример 3. Использование параметра type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> a:link { color: #003366 } a:visited { color: #660066 } a:hover { color: #800000 } a:active { color: #FF0000 } </style> </head> <body> <a href="link1.html">Lorem ipsum dolor sit amet</a> </body> </html>

Описание

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

Синтаксис

<sub>Текст</sub>

Закрывающий тег

Обязателен.

Параметры

Нет.

Аналог CSS

vertical-align: sub

Пример 1. Использование тега <SUB>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i> </body> </html>

Результат данного примера показан ниже.

Формула серной кислоты: H₂SO₄

Описание

Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Синтаксис

<sup>Текст</sup>

Закрывающий тег

Обязателен.

Параметры

Нет.

Аналог CSS

vertical-align: super

Пример 1. Использование тега <SUP>

<!DOCTYPE HTML PUBLIC "-//W1C//DTD HTML 4.01 Transitional//EN"> <html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n - целое число > 2 </body> </html>

Результат данного примера показан ниже.

Великая теорема Ферма X ⁿ + Y ⁿ = Z ⁿ где n - целое число > 2

Описание

Элемент <TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>. Внутри <TABLE> допустимо использовать следующие элементы: <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD> и <TR>.

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

Синтаксис

Параметры

align

Определяет выравнивание таблицы.

background

Задает фоновый рисунок в таблице.

bgcolor

Цвет фона таблицы.

border

Толщина рамки в пикселах.

bordercolor

Цвет рамки.

cellpadding

Отступ от рамки до содержимого ячейки.

cellspacing

Расстояние между ячейками.

cols

Число колонок в таблице.

height

Высота таблицы.

width

Ширина таблицы.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <TABLE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="100%" border="0" cellspacing="0" cellpadding="4"> <tr align="center" bgcolor="#999999"> <td colspan="3" style="font-size: 160%; font-family: sans-serif">Lorem ipsum dolor sit amet...</td> </tr> <tr> <td><img src="logo.gif" width="150" height="70" border="0" style="background: #CC9"></td> <td align="right"><img src="images/title.gif" width="70" height="70" style="background: #CF9"></td> <td> <a href="lorem.html">Lorem</a><br> <a href="ipsum.html">Ipsum</a><br> <a href="dolar.html">Dolar</a> </td> </tr> <tr> <td colspan="3"> <table height="1" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333"> <tr> <td> </td> </tr> </table> </td> </tr> </table> </body> </html>

Описание параметров тега <TABLE>

Параметр ALIGN

Описание

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

Синтаксис

Аргументы

left

Выравнивание таблицы по левому краю.

center

Выравнивание таблицы по центру.

right

Выравнивание по правому краю.

Значение по умолчанию

left

Аналог CSS

text-align

Пример 2. Выравнивание таблицы по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table align="center" width="600" bgcolor="#ffcc00"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр BACKGROUND

Описание

Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

Аргументы

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background-image

Пример 3. Фоновый рисунок в таблице

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table background="/images/rules.gif" width="600"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр BGCOLOR

Описание

Устанавливает цвет фона таблицы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Значение по умолчанию

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

Аналог CSS

background-color

Пример 4. Цвет фона таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table bgcolor="#ffcc00" width="600"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр BORDER

Описание

Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется в зависимости от браузера (рис. 1).

Internet Explorer	Netscape	Opera

Рис. 1. Рамка полученная с помощью параметра border

Браузер Netscape имитирует трехмерность рамки, браузер Opera вообще оставляет ее цвет без изменения, а Internet Explorer делает рамку сплошной.

Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.

При совместном использовании параметров border, bordercolor и cellspacing можно получить двойную рамку.

Синтаксис

Аргументы

Любое положительное целое число.

Значение по умолчанию

Аналог CSS

border

Пример 5. Толщина границы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table bordercolor="#ffcc00" cellspacing="2" border="1" cellpadding="5" width="600"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр BORDERCOLOR

Описание

Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.

Синтаксис

Аргументы

См. параметр BGCOLOR.

Значение по умолчанию

Зависит от браузера и операционной системы.

Аналог CSS

border-color

Пример 6. Цвет границы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table bordercolor="red" border="2" width="100%"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр CELLPADDING

Описание

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Синтаксис

Аргументы

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Пример 7. Использование параметра cellpadding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="7" border="2" bordercolor="red" width="100%"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр CELLSPACING

Описание

Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.

Синтаксис

Аргументы

Любое целое положительное число.

Значение по умолчанию

0 (когда нет параметра border) 2 (когда параметра border установлен)

Пример 8. Использование параметра cellspacing

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellspacing="5" cellpadding="10" border="1" bordercolor="red" width="100%"> <tr> <td> ... </td> <td> ... </td> </tr> </table> </body> </html>

Параметр COLS

Описание

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

Синтаксис

Аргументы

Любое целое положительное число.

Значение по умолчанию

Нет.

Пример 9. Использование параметра cols

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="700" cellspacing="0" border="1" bordercolor="black" cols="10"> <tr> <td> </td> <td>1995</td><td>1996</td><td>1997</td><td>1998</td> <td>1999</td><td>2000</td><td>2001</td><td>2002</td> <td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>

Параметр HEIGHT

Описание

Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>.

Синтаксис

Аргументы

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Высота вычисляется на основе содержимого таблицы.

Аналог CSS

height

Пример 10. Высота таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="10" bgcolor="#ffcc00" align="center" width="50%" height="50%"> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр RULES

Описание

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

Синтаксис

Аргументы

all

Линия рисуется вокруг каждой ячейки таблицы.

groups

Линия отображается между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>.

cols

Линия отображается между колонками.

none

Все границы скрываются.

rows

Граница рисуется между строками таблицы, созданых через тег <TR>.

Значение по умолчанию

none (если border="0"); all (если значение параметра border отлично от нуля).

Аналог CSS

border

Пример 11. Использование параметра rules

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellspacing="0" cellpadding="10" rules="rows" border="1" bordercolor="red" width="80%"> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> </table> </body> </html>

Параметр WIDTH

Описание

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Синтаксис

Аргументы

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Ширина вычисляется на основе содержимого таблицы.

Аналог CSS

width

Пример 12. Ширина таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="10" border="1" bordercolor="red" width="80%"> <tr> <td> ... </td> </tr> </table> </body> </html>

Описание

Элемент <TBODY> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько тегов <TBODY> внутри контейнера <TABLE>. Доступны и другие виды группировок строк - <TFOOT> и <THEAD>, ни один из них не должен перекрываться с элементом <TBODY>.

Синтаксис

Параметры

align

Определяет выравнивание текста в строке.

bgcolor

Цвет фона ячеек, которые расположены внутри контейнера <TBODY>.

valign

Выравнивание содержимого ячеек по вертикали.

Закрывающий тег

Не обязателен.

Пример 1. Использование тега <TBODY>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600" border="1"> <tbody align="right"> <tr> <td> ... </td> <td> ... </td> </tr> </tbody> </table> </body> </html>

Описание параметров тега <TBODY>

Параметр ALIGN

Описание

Задает выравнивание по горизонтали содержимого строк ячеек, которые расположены внутри элемента <TBODY>. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте параметр align для тега <TD> или <TH>.

Синтаксис

Аргументы

left

Выравнивание по левому краю.

center

Выравнивание по центру.

right

Выравнивание по правому краю.

justify

Выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию

left

Аналог CSS

text-align

Пример 2. Выравнивание в строке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600" border="1" cellspacing="0" bordercolor="#333333"> <thead align="center" bgcolor="#ffcc00"> <tr> <td> ... </td> <td> ... </td> </tr> </thead> <tbody align="right"> <tr> <td> ... </td> <td> ... </td> </tr> </tbody> </table> </body> </html>

Параметр BGCOLOR

Описание

Устанавливает цвет фона ячеек, расположенных в контейнере <TBODY>.

Синтаксис

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Значение по умолчанию

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

Аналог css

background-color

Пример 3. Цвет фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600" border="1" cellspacing="0" bordercolor="#333333"> <thead align="center" bgcolor="#ffcc00"> <tr> <td> ... </td> <td> ... </td> </tr> </thead> <tbody align="right" bgcolor="silver"> <tr> <td> ... </td> <td> ... </td> </tr> </tbody> </table> </body> </html>

Параметр VALIGN

Описание

Устанавливает вертикальное выравнивание содержимого ячеек в контейнере <TBODY>. По умолчанию контент ячейки располагается по ее вертикали в центре.

Синтаксис

Аргументы

top

Выравнивание содержимого ячеек по верхнему краю строки.

middle

Выравнивание по середине.

bottom

Выравнивание по нижнему краю.

baseline

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

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример 4. Выравнивание по вертикали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600" border="1" cellspacing="0" bordercolor="#333333"> <tbody align="right" valign="top"> <tr> <td> ... </td> <td> ... </td> </tr> <tr> <td> ... </td> <td> ... </td> </tr> </tbody> </table> </body> </html>

Описание

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

Синтаксис

Параметры

align

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

background

Задает фоновый рисунок в ячейке.

bgcolor

Цвет фона ячейки.

bordercolor

Цвет рамки.

colspan

Объединяет горизонтальные ячейки.

height

Высота ячейки.

nowrap

Запрещает перенос строк.

rowspan

Объединяет вертикальные ячейки.

valign

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

width

Ширина ячейки.

Закрывающий тег

Не обязателен.

Пример 1. Использование тега <TD>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table border="0" cellpadding="7" cellspacing="0"> <tr> <td colspan="2" bgcolor="#D3EDF6" align="center"> ... </td> </tr> <tr> <td valign="top" align="center"> ... </td> <td width="98%" valign="top"> ... </td> </tr> </table> </body> </html>

Описание параметров тега <TD>

Параметр ALIGN

Описание

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

Синтаксис

Аргументы

left

Выравнивание содержимого ячейки по левому краю.

center

Выравнивание по центру.

right

Выравнивание по правому краю.

justify

Выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию

left

Аналог CSS

text-align

Пример 2. Выравнивание содержимого ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600" border="1"> <tr> <td align="center"> ... </td> <td align="center"> ... </td> </tr> </table> </body> </html>

Параметр BACKGROUND

Описание

Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым ячейки. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

Аргументы

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background-image

Пример 3. Фоновый рисунок в ячейке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600"> <tr> <td background="/images/rules.gif"> ... </td> </tr> </table> </body> </html>

Параметр BGCOLOR

Описание

Устанавливает цвет фона ячейки.

Синтаксис

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Значение по умолчанию

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

Аналог CSS

background-color

Пример 4. Цвет фона ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body text="white"> <table bgcolor="black" width="600"> <tr> <td bgcolor="#ffcc00"> ... </td> </tr> <tr> <td> ... </td> </tr> </table> </body> </html>

Параметр BORDERCOLOR

Описание

Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.

Синтаксис

Аргументы

См. параметр bgcolor.

Значение по умолчанию

Зависит от браузера и операционной системы.

Пример 5. Цвет рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table bordercolor="black" border="1" width="100%"> <tr> <td bordercolor="red"> ... </td> <td> ... </td> </tr> </table> </body> </html>

Параметр COLSPAN

Описание

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.

ячейка 1
ячейка 2	ячейка 3

Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек

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

Синтаксис

Аргументы

Любое целое положительное число больше 1.

Значение по умолчанию

Пример 6. Объединение ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="200" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#333333"> <tr bgcolor="#FBF0DB"> <td colspan="2">ячейка 1</td> </tr> <tr> <td>ячейка 2</td> <td>ячейка 3</td> </tr> </table> </body> </html>

Параметр HEIGHT

Описание

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

Синтаксис

Аргументы

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Высота вычисляется на основе содержимого ячейки.

Аналог CSS

height

Пример 7. Высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="10" bgcolor="#ffcc00" align="center" width="100%"> <tr> <td height="50"> ... </td> </tr> </table> </body> </html>

Параметр NOWRAP

Описание

Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию параметр nowrap не установлен.

Пример 8. Использование параметра nowrap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="400"> <tr> <td nowrap> ... </td> </tr> </table> </body> </html>

Параметр ROWSPAN

Описание

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 2.

ячейка 1	ячейка 2
	ячейка 3

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

В приведенной на рис. 2 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.

Синтаксис

Аргументы

Любое целое положительное число больше 1.

Значение по умолчанию

Пример 9. Объединение ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="200" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#333333"> <tr> <td rowspan="2" bgcolor="#FBF0DB">ячейка 1</td> <td>ячейка 2</td> </tr> <tr> <td>ячейка 3</td> </tr> </table> </body> </html>

Параметр VALIGN

Описание

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

Синтаксис

Аргументы

top

Выравнивание содержимого ячейки по верхнему краю строки.

middle

Выравнивание по середине.

bottom

Выравнивание по нижнему краю.

baseline

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

Значение по умолчанию

middle

Аналог CSS

vertical-align

Пример 10. Выравнивание в ячейке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="60%"> <tr bgcolor="#ffcc00" bordercolor="white"> <td valign="top"> ... </td> <td valign="bottom"> ... </td> </tr> </table> </body> </html>

Параметр WIDTH

Описание

Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

Синтаксис

Аргументы

Любое целое значение в пикселах или процентах от доступного пространства.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Аналог CSS

width

Пример 11. Ширина ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table cellpadding="10" border="1" bordercolor="red"> <tr> <td width="20%"> ... </td> <td width="80%"> ... </td> </tr> </table> </body> </html>

Описание

Поле <TEXTAREA> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <INPUT> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <TEXTAREA> и </TEXTAREA> можно поместить любой текст, который будет отображаться внутри поля.

Начало формы

Конец формы

Синтаксис

<textarea ...> текст </textarea>

Параметры

cols

Ширина поля в символах.

disabled

Блокирует доступ и изменение элемента.

name

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

readonly

Устанавливает, что поле не может изменяться пользователем.

rows

Высота поля в строках текста.

wrap

Параметры переноса строк.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <TEXTAREA>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

<form action="/cgi-bin/handler.cgi"> <b>Введите ваш отзыв:</b><br> <textarea rows="10" cols="45"></textarea> </form>

</body> </html>

Описание параметров тега <TEXTAREA>

Параметр COLS

Описание

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

Синтаксис

Аргументы

Любое целое положительное число.

Значение по умолчанию

Зависит от настроек браузера и операционной системы.

Пример 2. Ширина текстового поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

</body> </html>

Параметр DISABLED

Описание

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

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 3. Блокировка поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <form> <textarea rows="10" cols="20">Активное поле</textarea> <textarea rows="10" cols="20" disabled>Неактивное поле</textarea> </form> </body> </html>

Начало формы

Конец формы

Параметр NAME

Описание

Определяет уникальное имя элемента <TEXTAREA>. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис

Аргументы

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <TEXTAREA> по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию

Нет.

Пример 4. Обращение к полю по имени

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> function dataField(f) { alert("Вы ввели: " + f.comment.value); } </script> </head> <body>

<form> <b>Введите комментарий</b><br> <textarea rows="10" cols="20" name="comment"></textarea><br> <input type="button" value="ОК" onClick="dataField(this.form)"> </form>

</body> </html>

Параметр READONLY

Описание

Когда к тегу <TEXTAREA> добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис

Аргументы

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 5. Поле только для чтения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

<form> <textarea rows="10" cols="20" readonly>Поле недоступно для изменения</textarea><br> </form>

</body> </html>

Начало формы

Конец формы

Параметр ROWS

Описание

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

Синтаксис

Аргументы

Любое положительное число.

Значение по умолчанию

Зависит от настроек браузера и операционной системы.

Пример 6. Высота текстового поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

</body> </html>

Параметр WRAP

Описание

Параметр wrap говорит браузеру, как осуществлять перенос текста в поле <TEXTAREA> и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки <Enter> переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

Аргументы

soft

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

hard

Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер точки автоматического переноса сохраняются.

off

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

Начало формы

Конец формы

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

Значение по умолчанию

soft

Пример 7. Использование параметра wrap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body>

</body> </html>

Описание

Элемент <TFOOT> предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <TFOOT> в исходном коде должен быть определен до элемента <TBODY>, браузеры отображают его в самом низу таблицы.

В пределах таблицы разрешается использовать только один элемент <TFOOT>.

Синтаксис

Параметры

align

Определяет выравнивание текста в строке.

bgcolor

Цвет фона ячеек, которые расположены внутри контейнера <TFOOT>.

valign

Выравнивание содержимого ячеек по вертикали.

Закрывающий тег

Не обязателен.

Пример 1. Использование тега <TFOOT>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600"> <tfoot align="center" bgcolor="#ffcc00"> <tr> <td> ... </td> <td> ... </td> </tr> </tfoot> <tbody align="right" bgcolor="silver"> <tr> <td> ... </td> <td> ... </td> </tr> </tbody> </table> </body> </html>

Описание параметров тега <TFOOT>

Параметр ALIGN

Описание

Задает выравнивание по горизонтали для всех ячеек в пределах <TFOOT>. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте параметр align для тега <TD> или <TH>.

Синтаксис

Аргументы

left

Выравнивание по левому краю.

center

Выравнивание по центру.

right

Выравнивание по правому краю.

justify

Выравнивание по ширине (одновременно по правому и левому краю).

Значение по умолчанию

left

Аналог CSS

text-align

Пример 2. Выравнивание в строке

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <table width="600" border="1" cellspacing="0" bordercolor="#333333"> <tfoot align="center" bgcolor="#ffcc00"> <tr> <td colspan="2"> ... </td> </tr> </tfoot> <tbody align="right"> <tr> <td> ... </td> <td> ... </td> </tr> </tbody> </table> </body> </html>

Параметр BGCOLOR

Описание

Устанавливает цвет фона ячеек, расположенных в контейнере <TFOOT>.

Синтаксис

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

<<< < Предыдущая 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3132 / 3532 33 34 35 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
28.04.2019116.06 Кб23ВСЕ ОТВЕТЫ.docx
#
20.09.2019163.07 Кб9все подряд.docx
#
21.03.2016175.95 Кб23Все реальные темы к соч.Тип.1 (74 шт.) (ФИПИ-2016).rtf
#
24.01.2020127.49 Кб0все серии 2.doc
#
11.11.201966.05 Кб1Все страны.doc
#
20.08.20191.53 Mб1Все теги A-Z.doc
#
25.04.201944.08 Кб2Все ученые в одном файле.docx
#
23.04.201959.39 Кб1Все формулы дав.doc
#
06.09.2019884.22 Кб40ВСЕ ШПОРЫ (госы).doc
#
19.02.2020338.43 Кб0Всемирные дебаты.doc
#
16.04.2015728.53 Кб21Всеобщая история Искусств. Древнии Китаи..docx