Основы работы с HTML

         

Атрибуты языка


Не действительны в элементах base, br, frame, frameset, hr, iframe, param и script.

АтрибутЗначениеОписание
dirltr | rtlЗадает направление вывода текста
langкод_языкаЗадает код языка



Атрибуты клавиатуры


АтрибутЗначениеОписание
accesskeyсимволЗадает клавишу быстрого доступа для элемента
tabindexчислоЗадает для элемента порядок перехода по клавише табуляции



Атрибуты событий формы


Действительны только в элементах form.

АтрибутЗначениеОписание
onchangeсценарийСценарий, который выполняется при изменении элемента
onsubmitсценарийСценарий, который выполняется при отправке формы
onresetсценарийСценарий, который выполняется при сбросе формы
onselectсценарийСценарий, который выполняется при выборе элемента
onblurсценарийСценарий, который выполняется, когда элемент теряет фокуса
onfocusсценарийСценарий, который выполняется, когда элемент получает фокус



Атрибуты событий клавиатуры


Не действительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.

АтрибутЗначениеОписание
onkeydownсценарийЧто делать, когда нажата клавиша
onkeypressсценарийЧто делать, когда клавиша нажата и отпущена
onkeyupсценарийЧто делать, когда клавиша отпущена



Атрибуты событий мыши


Не действительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title.

АтрибутЗначениеОписание
onclickсценарийЧто делать при щелчке мыши
ondblclickсценарийЧто делать при двойном щелчке мыши
onmousedownсценарийЧто делать, когда нажата клавиша мыши
onmousemoveсценарийЧто делать, когда перемещается указатель мыши
onmouseoutсценарийЧто делать, когда указатель мыши покидает элемент
onmouseoverсценарийЧто делать, когда указатель мыши проходит над элементом
onmouseupсценарийЧто делать, когда кнопка мыши отпущена



Атрибуты событий окна




Действительны только в элементах body и frameset.

АтрибутЗначениеОписание
onloadсценарийСценарий, который выполняется при загрузке документа
onunloadсценарийСценарий, который выполняется при выгрузке документа



является возможность для событий


Новым в HTML 4. 0 является возможность для событий HTML запускать действия браузера, такие как запуск JavaScript, когда пользователь щелкает на элементе HTML.

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

Чтобы больше узнать о программировании с помощью этих событий, почитайте учебники по JavaScript и DHTML.


Базовые атрибуты


Не действительны в элементах base, head, html, meta, param, script, style, и title.

АтрибутЗначениеОписание
classclass_rule или style_ruleКласс элемента
idномер_idУникальный id элемента
styleопределение_стиляОпределение встроенного стиля
titleтекст_подсказкиТекст, выводимый в качестве подсказки



Добавление сценария на страницу HTML


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

<html> <head> </head> <body>

<script type="text/javascript"> document.write("Всем привет!") </script>

</body> </html>

Пример выполнения данного HTML-кода

Этот сценарий создаст следующий вывод:

Всем привет!

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



Использование шрифтов в HTML


Тег <font> в HTML использовать не рекомендуется. Предполагается, что он будет удален в будущей версии HTML.

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

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

<html> <body>

<p> <font size="2" face="Verdana"> Это параграф. </font> </p>

<p> <font size="5" face="Times"> Это другой параграф. </font> </p>

</body> </html>

Пример выполнения данного HTML-кода

Атрибуты шрифтаАтрибутПримерНазначение
size="число"size="2"Определяет размер шрифта
size="+число"size="+1"Увеличивает размер шрифта
size="-число"size="-1"Уменьшает размер шрифта
face="название шрифта"face="Times"Определяет название шрифта
color="значение цвета"color="#eeff00"Определяет цвет шрифта
color="название цвета"color="red"Определяет цвет шрифта

Тег <font> НЕ должен использоваться.

Тег <font> не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML).

Консорциум World Wide Web (W3C) удалил тег <font> из своих рекомендаций. В будущих версиях HTML, для определения свойств компоновки и вывода элементов HTML будут использоваться таблицы стилей (CSS).

Правильно будет использовать стили - Примеры

Задание шрифта текста

<html> <body> <h1 style="font-family:verdana">Заголовок </h1> <p style="font-family:courier">Параграф</p> </body> </html>

Пример выполнения данного HTML-кода

Задание размера шрифта текста

<html> <body> <h1 style="font-size:150%">Заголовок</h1> <p style="font-size:80%">Параграф</p> </body> </html>

Пример выполнения данного HTML-кода

Задание цвета шрифта текста


<html> <body> <h1 style="color:blue">Заголовок </h1> <p style="color:red">Параграф</p> </body> </html>

Пример выполнения данного HTML-кода

Задание для текста шрифта, его размера и цвета

<html> <body> <p style="font-family:verdana;font-size:80%;color:green"> Это параграф, содержащий некоторый текст. Это текст, содержащийся в параграфе. Это все тот-же параграф с текстом. </p> </body> </html>

Пример выполнения данного HTML-кода

Прежде всего: Дочитайте до конца это учебное руководство по HTML!!! В последующих лекциях будет показано, почему некоторые теги, такие как <font>, должны быть удалены из рекомендаций HTML, и как использовать таблицы стилей в документе HTML.

Чтобы больше узнать о таблицах стилей, найдите хороший учебник.

Зачем использовать HTML 4.0?

HTML предназначался для других целей!

Исходный HTML не предполагалось использовать для форматирования документа. Теги HTML должны были определять содержимое документа, например:

<p>Это параграф</p>

<h1>Это заголовок</h1>

Когда в спецификацию HTML 3.2 были добавлены такие теги как <font> и атрибуты цвета, то для разработчиков Web начался просто кошмар. Разработка больших Web-сайтов, где информацию о шрифтах и цвете добавлять на каждую Web-страницу, стала длительным, дорогим и чрезмерно болезненным процессом.

В чем достоинство HTML 4.0 ?

В HTML 4.0 все форматирование можно удалить из документа HTML и хранить в отдельной таблице стилей.

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

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

Не используйте не рекомендованные теги. Просмотрите полный справочник по HTML 4.01, чтобы узнать, какие теги и атрибуты не рекомендовано использовать.

Готовьтесь к использованию XHTML

XHTML является "новым" HTML. Самая важная вещь, которую можно сделать на данном этапе, -- начать писать действительный HTML 4.01 код. Начните также записывать свои теги в нижнем регистре. Всегда закрывайте свои теговые элементы. Никогда не заканчивайте параграф без завершающего </p>.

Примечание: Официальный HTML 4.01 рекомендует использовать теги в нижнем регистре.

Если вы хотите больше узнать о XHTML, почитайте соответствующий учебник.

Проверяйте свои файлы HTML на соответствие HTML 4.01

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

DTD Strict (строгий) для HTML 4.01 включает элементы и атрибуты, которые рекомендованы к использованию и не появляются в наборах фреймов:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DTD Transitional (переходный) для HTML 4. 01 включает все из строгого DTD плюс не рекомендованные элементы и атрибуты:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DTD Frameset (набор фреймов) для HTML 4.01 включает все из переходного DTD плюс также фреймы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Проверьте свой файл HTML с помощью средства проверки W3C

Введите адрес своей страницы в поле формы, показанной ниже:

<html> <head> <form method="get" action="http://validator.w3.org/check" target="_blank"> Введите адрес своей страницы в расположенное ниже поле <br /> <br /> <input name="uri" size="50" /> <br /><br /> <input type="submit" value="Validate the page" /> </form> </body> </html>

Пример выполнения данного HTML-кода


Использование стилей в HTML


В HTML 4.0 все форматирование можно переместить из документа HTML в отдельную таблицу стилей.

<html> <head> <style type="text/css"> h1 {color: red} h3 {color: blue} </style> </head>

<body> <h1>Это заголовок 1</h1> <h3>Это заголовок 3</h3> </body> </html>

Пример выполнения данного HTML-кода

Этот пример показывает, как форматировать документ HTML с помощью информации о стилях, добавленной в раздел заголовка <head>.

<html> <body>

<a href="lastpage.htm" style="text-decoration:none"> ЭТО НЕПОДЧЕРКНУТАЯ ССЫЛКА! </a>

</body> </html>

Пример выполнения данного HTML-кода

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

<html> <head> <link rel="stylesheet" type="text/css" href="styles.css" > </head>

<body> <h1>Я отформатирован с помощью присоединенной таблицы стилей</h1> <p>Я тоже!</p> </body> </html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать тег <link> для соединения с внешней таблицей стилей.



JavaScript и VBscript


JavaScript это разработанный корпорацией Netscape межплатформенный объектно-ориентированный язык сценариев. Язык JavaScript основан на языке Java, а VBscript - на Visual Basic. JavaScript содержит набор основных объектов и набор элементов языка. Используя его можно на лету менять внешний вид документа, в зависимости от изменения каких-либо условий, проводить первичную обработку информации отправляемой через формы и многое другое.

Язык VBscript является "изобретением" компании Microsoft. Язык VBscript проще и понятней для начинающих программистов и Web-дизайнеров. Но несомненным преимуществом JavaScript является его всесторонняя поддержка, а также легкость и удобство кода, унаследованные из Java и C/C++. Практически все широко распространенные браузеры имеют встроенную поддержку JavaScript, так что нет необходимости беспокоиться, будет ли ваша интерактивная страница работать.



Элемент head


Элемент head содержит общую информацию,называемую также мета-информацией, о документе. Мета означает "информация о чем-то".

Можно сказать, что мета-данные означают информацию о данных, или мета-информация означает информацию об информации.

Элементы внутри элемента head не выводяться браузером. Согласно стандарту HTML, внутри раздела head допустимы только несколько тегов. Это теги <base>, <link>, <meta>, <title>, <style>, и <script>.

Посмотрите на следующую незаконную конструкцию:

<head> <p>Это какой-то текст</p> </head>

В этом случае у браузера есть две возможности:

Вывести текст, потому что он находится внутри элемента параграфаСкрыть текст, потому что он находится внутри элемента заголовка

Если поместить элемент HTML, такой как <h1> или <p>, внутрь элемента head, как в этом случае, большинство браузеров его выведут, даже если это незаконно.

Должны ли браузеры прощать подобные ошибки? Наверно, это неправильно.

Теги заголовкаТегОписание
<head>Определяет информацию о документе
<title>Определяет заглавие документа
<base>Определяет базовый URL для всех ссылок на странице
<link>Определяет ссылку на ресурс
<meta>Определяет мета-информацию
<!DOCTYPE>Определяет тип документа. Этот тег идет перед начальным тегом <html>.



Как использовать стили


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



Как работать со старыми браузерами


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

JavaScript:

<script type="text/javascript"> <!-- document.write("Всем привет!") //--> </script>

VBScript:

<script type="text/vbscript"> <!-- document.write("Всем привет!") '--> </script>



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


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

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



Компоновка документа в HTML


Выше были рассмотрены основные теги HTML. Используя их уже можно создавать свои страницы. Но создание страницы это не только верстка материалов, но и компоновка всех элементов (меню, заголовок страницы, основное информационное наполнение, банеры и др.) на странице HTML документа. Если все элементы должны располагаться один за другим тогда понятно как поступить - размещаем все блоки последовательно друг за другом и получаем результат. А как быть если два элемента должны размещаться на одном уровне по горизонтали? Например, меню должно находиться слева или справа от текста? Ответ очевиден, использовать свойство HTML тегов, позволяющее вкладывать один тег в другой.

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



Компоновка HTML - использование таблиц


Как известно тег <table> используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компановки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон.

Наберите следующий пример.

<html> <body> <p>Часть этой страницы отформатирована с помощью двух столбцов, как газетная страница. Все что находится ниже этого текста располагается в двух ячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p> <table border="0" width="100%"> <tr><td width="50%" valign="top">Этот текст выводится в левом столбце.</td><td width="50%" valign="top">А этот текст выводится в правом столбце.</td></tr> </table> </body> </html>

Пример выполнения данного HTML-кода

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

<html> <body> <p>Часть этой страницы отформатирована с помощью двух столбцов, как газетная страница. Все что находиться ниже этого текста располагается в двух ячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.</p> <table border="0" width="100%"> <tr><td width="20%" valign="top">Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top">А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr> </table> </body> </html>

Пример выполнения данного HTML-кода

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

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

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


<html> <body> <p>Часть этой страницы отформатирован с помощью двух столбцов, как газетная страница, и общего заголовка. Все что находиться ниже этого текста располагается в трех ячейках таблицы, причем для верхней ячейки указан атрибут colspan="2". Как можно видеть, есть левый столбец и правый столбец, а также общий заголовок. Для каждой ячеки указан свой цвет фона.</p> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr height="150px"><td width="100%" valign="top" colspan="2" bgcolor="#cccccc"> Этот текст выводится в верхней ячейке таблицы.</td></tr> <tr height="500px"><td width="20%" valign="top" bgcolor="#dddddd"> Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee">А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr> </table> </body> </html>

Пример выполнения данного HTML-кода

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

<html> <body> <p>Часть этой страницы отформатирован с помощью двух столбцов, как газетная страница, и общего заголовка. Все что находиться ниже этого текста располагается в ячейках таблицы, причем здесь применяется вложенностть одной таблицы в другую. Как можно видеть, есть левый столбец и правый столбец, а также общий заголовок. Для каждой ячеки указан свой цвет фона.</p>

<table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr height="150px"><td width="100%" valign="top" bgcolor="#cccccc"> Этот текст выводится в верхней ячейке таблицы.</td></tr>

<tr height="500px"><td width="100%"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr><td width="20%" valign="top" bgcolor="#dddddd"> Этот текст выводится в левом столбце. Ширина этого столбца 20%</td><td width="80%" valign="top" bgcolor="#eeeeeee"> А этот текст выводится в правом столбце. Ширина столбца 80%</td></tr></table> </td></tr> </table>

</body> </html>

Пример выполнения данного HTML-кода

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


Краткое заключение


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

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

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



Мета-информация в HTML


Описание документа

<html> <head>

<meta name="author" content="Иван Петров"> <meta name="revised" content="Иван Петров,16/10/05"> <meta name="generator" content="Microsoft FrontPage 4.0">

</head> <body> <p> Атрибуты meta этого документа определяют автора и использованную программу редактора.</p> </body> </html>

Пример выполнения данного HTML-кода

Информация внутри элемента meta описывает документ.

Ключевые слова документа

<html> <head>

<meta name="description" content="примеры HTML"> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

</head> <body> <p>Атрибуты meta этого документа описывают документ и его ключевые слова.</p> </body> </html>

Пример выполнения данного HTML-кода

Информация внутри элемента meta описывает ключевые слова документа.

Перенаправление пользователя

<html> <head> <meta http-equiv="Refresh" content="5;url=http://www.intuit.ru"> </head>

<body> <p> Извините! Мы переехали! Новый URL: <a href="http://www.intuit.ru">http://www.osp.ru</a> </p>

<p> Вы будете перенаправлены на новый адрес через пять секунд. </p>

<p> Если вы видите это сообщение более 5 секунд, щелкните, пожалуйста, на приведенной выше ссылке ссылке! </p>

</body> </html>

Пример выполнения данного HTML-кода

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

Элемент meta

Как было показано в предыдущей лекции, элемент head содержит общую информацию (мета-информацию) о документе.

HTML имеет также элемент meta, который помещается внутри элемента head. Элемент meta предназначен для предоставления мета-информации о документе.

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

Примечание: Консорциум W3C заявляет в документе http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv, что "Некоторые агенты пользователей поддерживают использование META для обновления текущей страницы после указанного количества секунд, с возможностью заменить ее другим URI. Авторы не должны использовать эту технику для пересылки пользователей на другие страницы, так как это делает страницу недоступной для некоторых пользователей. Вместо этого автоматическое перенаправление страницы должно делаться с помощью перенаправления на сервере".

Ключевые слова для поисковых машин

Некоторые поисковые машины в WWW будут использовать атрибуты name и content тега meta для индексации страницы.

Этот элемент meta определяет описание страницы:


<meta name="description" content="Бесплатные Web- учебники по HTML, CSS, XML, и XHTML">

Этот элемент meta определяет ключевые слова для страницы:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

Назначение атрибутов name и content состоит в описании содержимого страницы.

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

О машинах поиска можно почитать в учебнике по созданию Web-сайтов.

Неизвестные атрибуты meta

Иногда можно встретить атрибуты meta, которые могут оказаться совершенно незнакомыми, например:

<meta name="security" content="low">

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

Весь список атрибутов элемента meta можно найти в Полном справочнике тегов HTML 4.01 в конце книги.


с помощью двух столбцов, как


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

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

Раздел заголовка HTML


Заглавие документа

<html>

<head> <title>Название документа не выводится</title> </head>

<body> <p>Выводится этот текст</p> </body>

</html>

Пример выполнения данного HTML-кода

Информация о названии документа в элементе заголовка не выводится в окне браузера.

Одно место назначения для всех ссылок

<html> <head> <base target="_blank"> </head>

<body>

<p> <a href="http://www.intuit.ru" target="_blank">Эта ссылка </a> будет загружаться в новом окне, так как атрибут target задан как "_blank". </p>

<p> <a href="http://www.osp.ru"> Эта ссылка</a> также будет загружаться в новом окне, даже без атрибута target. </p>

</body> </html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать тег base, чтобы все ссылки на странице открывались в новом окне.



Сценарии в HTML


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

<html> <body>

<script type="text/javascript"> document.write("<h1>Всем привет!</h1>") </script>

</body> </html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать сценарий в документе HTML.

Работа с браузерами, не поддерживающими сценарии

<html> <body>

<script type="text/javascript"> <!-- document.write("Если этот текст виден, то браузер поддерживает сценарии!") //--> </script>

<noscript>Нет поддержки JavaScript!</noscript>

<p> Браузер без поддержки JavaScript выведет текст из элемента noscript. </p>

</body> </html>

Пример выполнения данного HTML-кода

Этот пример показывает, как работать с браузерами, которые не поддерживают сценарии.



Схемы обращения к ресурсу URL


Несколько примеров наиболее распространенных схем обращения к ресурсу:

СхемаДоступ
fileфайл на локальном ПК
ftpфайл на сервере FTP
httpфайл на сервере WWW
gopherфайл на сервере Gopher
newsгруппа новостей Usenet
telnetсоединение Telnet
WAISфайл на сервере WAIS

Доступ к группе новостей. Следующий код HTML:

<a href="news:alt.html">HTML Newsgroup</a>

создает ссылку на группу новостей вида "HTML Newsgroup".

Загрузка с помощью FTP. Следующий код HTML:

<a href="ftp://www.osp.ru/ftp/winzip.exe">Загрузить WinZip</a>

создает ссылку для загрузки файла следующего вида: "Загрузить WinZip". (Эта ссылка не работает. Это просто пример.)

Ссылка на почтовую систему. Следующий код HTML:

<a href="mailto:info@intuit.ru">info@intuit.ru</a>

создает ссылку на вашу собственную почтовую систему.



Ссылки в HTML


Во время щелчка мышью на ссылке в документе HTML нижележащий тег <a> указывает на определенное место (адрес) в Web с помощью значения атрибута href, например, следующим образом:

<a href="lastpage.htm">Последняя</a>.

Ссылка "Последняя" в этом примере является ссылкой относительно Web-сайта, который вы просматриваете, а браузер создаст для доступа к странице полный адрес Web вида http://www.osp.ru/html/lastpage.htm.



Теги HTML могут иметь атрибуты.


Теги HTML могут иметь атрибуты. Специальные атрибуты для каждого тега перечислены в описании каждого тега, Перечисленные здесь атрибуты являются базовыми и атрибутами языка, которые стандартны для всех тегов (с небольшими исключениями):


Тег <noscript>


Кроме скрытия сценария внутри комментария можно добавить также тег <noscript>.

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

JavaScript:

<script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> <noscript>Ваш браузер не поддерживает JavaScript!</noscript>

VBScript:

<script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script> <noscript>Ваш браузер не поддерживает VBScript!</noscript>

Теги сценариевТегОписание
<script>Определяет сценарий
<noscript>Определяет заменяющий текст, если сценарий не выполняется
<object>Определяет встроенный объект
<param>Определяет для объекта настройки времени выполнения (параметры)
<applet>Не рекомендуется. Используйте вместо этого <object>



Теперь вы знаете HTML, что дальше?


Следующим шагом должно стать изучение XHTML и CSS, а также следует обратить внимание на JavaScript и VBscript.



Универсальные указатели ресурсов


Для адресации документа (или других данных) в WWW используется так называемый Универсальный указатель ресурса (URL - Uniform Resource Locator). Полный адрес в Web, такой как http://www.osp.ru/html/lastpage.htm следует следующим правилам синтаксиса:

scheme://host.domain:port/path/filename scheme определяет тип службы Интернет. Наиболее распространенным типом является http.domain определяет имя домена Интернет, например, osp.ru.host определяет хост домена. Если он отсутствует, то по умолчанию для http используется хост www.:port определяет номер порта на хосте. Номер порта обычно отсутствует. По умолчанию для http используется порт с номером 80.path определяет путь доступа (подкаталог) на сервере. Если путь доступа отсутствует, то ресурс (документ) должен быть расположен в корневом каталоге сайта Web.filename определяет имя документа. По умолчанию может использоваться имя файла default.asp, или index.html или что-то еще, в зависимости от настроек Web-сервера.



Внешняя таблица стилей


Внешняя таблица стилей является идеальной, когда стиль применяется к нескольким страницам. С помощью внешней таблицы стилей можно изменить внешний вид всего Web-сайта, изменяя один файл. Каждая страница должна соединяться с таблицей стилей с помощью тега <link>. Тег <link> находится в разделе заголовка <head>.

<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </html>

Пример выполнения данного HTML-кода



Внутренняя таблица стилей


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

<html> <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> </html>

Пример выполнения данного HTML-кода



Встроенные стили


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

Чтобы использовать встроенные стили, используется атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Следующий пример показывает, как изменить цвет и левое поле параграфа:

<html> <body> <p style="color: red; margin-left: 20px"> Это параграф </p> </body> </html>

Пример выполнения данного HTML-кода

Чтобы больше узнать о стилях, почитайте учебник о CSS.

Теги стилейТегОписание
ТегОписание
<style>Задает определение стиля
<link>Задает ссылку на ресурс
<div>Определяет раздел в документе
<span>Определяет раздел в документе
<font>Не рекомендуется. Используйте вместо этого стили.
<basefont>Не рекомендуется. Используйте вместо этого стили.
<center>Не рекомендуется. Используйте вместо этого стили.



XHTML


XHTML является "новым" HTML. Самыми последними рекомендациями по HTML является версия HTML 4.01. Это последняя и окончательная версия HTML.

HTML будет заменен XHTML, который является более строгой и четкой версией HTML.



Другие элементы


<!-- Это комментарий -->

<blockquote> Текстовая цитата из некоторого источника. </blockquote>

<address> Город <br> Адрес 1<br> Адрес 2<br> </address>



Физические стили


<b>Этот текст жирный</b> <i>Этот текст наклонный</i>



Формы


<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="Петров" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden">

<select> <option>Яблоки <option selected>Бананы <option>Вишня </select>

<textarea name="Комментарии" rows="60" cols="20"></textarea>

</form>



Фреймы


<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset>



Элементы текста


<p>Это параграф</p> <br> (перенос строки) <hr> (горизонтальная линейка) <pre>Этот текст заранее отформатирован</pre>



Элементы заголовка


<h1>Самый крупный заголовок</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Самый мелкий заголовок</h6>



Логические стили


<em>Этот текст выделен </em> <strong>Этот текст акцентирован</strong> <code>Это некоторый программный код</code>



Неупорядоченный список


<ul> <li>Первый элемент</li> <li>Следующий элемент</li> </ul>



Символьные объекты


&lt; то же самое что < &gt; то же самое что > &#169; то же самое что ©



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


<dl> <dt>Первый термин</dt> <dd>Определение</dd> <dt>Следующий термин</dt> <dd>Определение</dd> </dl>



Ссылки, анкеры, и элементы изображений


<a href="http://www.example.com/">Это ссылка</a> <a href="http://www.example.com/"><img src="URL" alt="заменяющий текст"></a> <a href="mailto:webmaster@example.com">Пошлите e-mail</a>

Именованный анкер: <a name="tips">Раздел полезных советов</a> <a href="#tips">Переход в Раздел полезных советов</a>



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


<html> <head> <title>Здесь находится название документа</title> </head> <body> Здесь находится выводимый текст </body>

</html>



Таблицы


<table border="1"> <tr> <th>какой-то заголовок</th> <th>какой-то заголовок</th> </tr> <tr> <td>какой-то текст</td> <td>какой-то текст</td> </tr> </table>



Упорядоченный список


<ol> <li>Первый элемент</li> <li>Следующий элемент</li> </ol>



Кодировка URL от %00 до %8f


ASCIIКод URLASCIIКод URLASCIIКод URL
ж%000%30`%60
%011%31a%61
%022%32b%62
%033%33c%63
%044%34d%64
%055%35e%65
%066%36f%66
%077%37g%67
backspace%088%38h%68
tab%099%39i%69
linefeed%0a:%3aj%6a
%0b;%3bk%6b
%0c<%3cl%6c
c return%0d=%3dm%6d
%0e>%3en%6e
%0f?%3fo%6f
%10@%40p%70
%11A%41q%71
%12B%42r%72
%13C%43s%73
%14D%44t%74
%15E%45u%75
%16F%46v%76
%17G%47w%77
%18H%48x%78
%19I%49y%79
%1aJ%4az%7a
%1bK%4b{%7b
%1cL%4c|%7c
%1dM%4d}%7d
%1eN%4e~%7e
%1fO%4f %7f
space%20P%50%80
!%21Q%51 %81
"%22R%52%82
#%23S%53ѓ%83
$%24T%54%84
%%25U%55%85
&%26V%56%86
'%27W%57%87
(%28X%58%88
)%29Y%59%89
*%2aZ%5aЉ%8a
+%2b[%5b%8b
,%2c\%5cЊ%8c
-%2d]%5d %8d
.%2e^%5eЋ%8e
/%2f_%5f %8f



Кодировка URL от %90 до %ff


ASCIIКод URLASCIIКод URLASCIIКод URL
%90А%c0р%f0
%91Б%c1с%f1
%92В%c2т%f2
"%93Г%c3у%f3
"%94Д%c4ф%f4
%95Е%c5х%f5
%96Ж%c6ц%f6
%97З%c7ч%f7
_%98И%c8ш%f8
%99Й%c9щ%f9
љ%9aК%caъ%fa
%9bЛ%cbы%fb
њ%9cМ%ccь%fc
%9dН%cdэ%fd
ћ%9eО%ceю%fe
џ%9fП%cfя%ff
%a0Р%d0
Ў%a1С%d1
ў%a2Т%d2
Ј%a3У%d3
%a4Ф%d4
Ґ%a5Х%d5
|%a6Ц%d6
§%a7 %d7
Ё%a8Ш%d8
©%a9Щ%d9
Є%aaЪ%da
"%abЫ%db
¬%acЬ%dc
Ї%adЭ%dd
®%aeЮ%de
Ї%afЯ%df
°%b0а%e0
±%b1б%e1
І%b2в%e2
і%b3г%e3
ґ%b4д%e4
µ%b5е%e5
%b6ж%e6
%b7з%e7
ё%b8и%e8
%b9й%e9
є%baк%ea
"%bbл%eb
ј%bcм%ec
Ѕ%bdн%ed
ѕ%beо%ee
ї%bfп%ef



Информационный сервер Интернет (IIS)


Встроенный в Windows 2000 Web-сервер IIS облегчает создание больших приложений для Web. Как PWS, так и IIS включают ASP, стандарт серверных сценариев, которые можно использовать для создания динамических и интерактивных Web-приложений. IIS доступен также для Windows NT.

Дополнительно об ASP можно узнать в соответствующем учебнике.

Дополнительная информация об IIS находится в документации.



Как опубликовать свою работу?


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



Как установить персональный Web-сервер (PWS):


Проверьте свою установку Windows, чтобы убедиться, что персональный сервер PWS не был уже установлен.Если он не установлен, то установите PWS из каталога PWS на компакт-диске дистрибутива Windows.Следуйте инструкциям по установке и запуску своего персонального Web-сервера.

Дополнительно о персональном Web-сервере PWS компании Microsoft можно прочитать в документации.

Примечание: Microsoft Windows XP Home Edition не имеет возможности превратить ваш компьютер в персональный Web-сервер!



Первый шаг: Персональный Web-сервер


Ваш собственный ПК может действовать в качестве Web-сервера, если он соединен с сетью. Причем соединение с сетью должно быть высокоскоростным, а не через модем. И кроме того компьютер должен иметь реальный IP адрес, а не быть закрытым прокси-серверами.

В настоящее время существует большое количество Web-серверов. Для домашнего использования под операционной системой Windows подойдет один из серверов поставляемых на диске совместно с ОС. При работе в Windows 98 можно использовать PWS (Personal Web Server) -- Персональный Web-сервер. Он находиться в папке PWS компакт-диска дистрибутива Windows. А в Windows 2000 и XP можно использовать IIS.

Кроме того можно воспользоваться одним из продуктов сторонних разработчиков, например, сервером Apache. Данный продукт является бесплатным и на сегодняшний день этот сервер используется на большинстве web серверов по всему миру. Хотя установка этого сервера может быть выполнена также легко, как и серверов Microsoft, но настройка может оказаться для новичка затруднительной. Настройка сервера осуществляется путем правки конфигурационного файла. Поэтому здесь мы его рассматривать не будем, а остановимся на серверах IIS и PWS. Персональный Web-сервер (PWS)

PWS превращает любой компьютер с Windows в Web-сервер. PWS легко установить и он идеально подходит для разработки и тестирования Web-приложений. PWS был оптимизирован для использования на рабочих станциях, но удовлетворяет всем требованиям полноценного Web-сервера. Он поддерживает также Активные серверные страницы (ASP -- Active Server Pages), как и его старший брат IIS.



Следующий шаг: Профессиональный Web-сервер


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

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

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



По функциональным группам


NN: указывает самую раннюю версию Netscape, которая поддерживает этот тегIE: указывает самую раннюю версию Internet Explorer, которая поддерживает этот тегDTD: указывает в каком DTD XHTML 1.0 разрешен этот тег. S=Strict, T=Transitional, and F=Frameset

Начальный тегНазначениеNNIEDTDБазовые тегиФорматирование символовВыводБлокиСсылкиФреймыВводСпискиИзображенияТаблицыСтилиМета-информацияПрограммирование
<!DOCTYPE> Определяет тип документа STF
<html>Определяет документ html 3.03.0STF
<body>Определяет элемент тела 3.03.0STF
<h1> -- <h6>Определяет заголовки размера с 1 по 6 3.03.0STF
<p>Определяет параграф 3.03.0STF
<br>Вставляет перенос одной строки 3.03.0STF
<hr>Определяет горизонтальную линейку 3.03.0STF
<!--...-->Определяет комментарий 3.03.0STF
<b>Определячет жирный текст 3.03.0STF
<font>Не рекомендуется. Определяет шрифт, размер и цвет текста3.03.0TF
<i>Определяет наклонный текст (курсив)3.03.0STF
<em>Определяет выделенный текст 3.03.0STF
<big>Определяет увеличенный текст 3.03.0STF
<strong>Определяет акцентированный текст 3.03.0STF
<small>Определяет уменьшенный текст 3.03.0STF
<sup>Определяет текст как верхний индекс3.03.0STF
<sub>Определяет текст как нижний индекс 3.03.0STF
<bdo>Определяет направление вывода текста 6.25.0STF
<u>Не рекомендуется. Определяет подчеркнутый текст 3.03.0TF
<pre>Определяет заранее отформатированный текст 3.03.0STF
<code>Определяет текст кода программы 3.03.0STF
<tt>Определяет текст телетайпа 3.03.0STF
<kbd>Определяет текст с клавиатуры3.03.0STF
<var>Определяет переменную 3.03.0STF
<dfn>Задает термин определения 3.0STF
<samp>Определяет образец программного кода3.03.0STF
<xmp>Не рекомендуется. Определяет форматированный заранее текст3.03.0
<acronym>Определяет акроним 6.24.0STF
<abbr>Определяет сокращение 6.2 STF
<address>Определяет элемент адреса 4.04.0STF
<blockquote>Определяет длинную цитату 3.03.0STF
<center>Не рекомендуется. Определяет центрированный текст 3.03.0TF
<q>Определяет короткую цитату 6.24.0STF
<cite>Определяет цитату 3.03.0STF
<ins>Определяет вставленный текст 6.24.0STF
<del>Определяет удаленный текст 6.24.0STF
<s>Не рекомендуется. Определяет зачеркнутый текст. 3.03.0TF
<strike>Не рекомендуется. Определяет зачеркнутый текст3.03.0TF
<a>Определяет анкер 3.03.0STF
<link>Определяет ссылку на ресурс 4.03.0STF
<frame>Определяет подокно (фрейм)3.03.0F
<frameset>Определяет набор фреймов 3.03.0F
<noframes>Определяет раздел noframe 3.03.0TF
<iframe>Определяет встроенное подокно (фрейм)6.04.0TF
<form>Определяет форму 3.03.0STF
<input>Определяет поле ввода 3.03.0STF
<textarea>Определяет текстовую область 3.03.0STF
<button>Определяет кнопку 6.24.0STF
<select>Определяет список с возможностью выбора 3.03.0STF
<optgroup>Определяет группу вариантов 6.06.0STF
<option>Определяет элемент в поле списка3.03.0STF
<label>Определяет метку для элемента управления формы 6.24.0STF
<fieldset>Определяет набор полей 6.24.0STF
<legend>Определяет заголовок набора полей6.24.0STF
<isindex>Не рекомендуется. Определяет поле ввода из одной строки3.03.0TF
<ul>Определяет неупорядоченный список3.03.0STF
<ol>Определяет упорядоченный список 3.03.0STF
<li>Определяет элемент списка 3.03.0STF
<dir>Не рекомендуется. Определяет список каталогов 3.03.0TF
<dl>Задает список определений 3.03.0STF
<dt>Задает термин определения 3.03.0STF
<dd>Задает описание определения 3.03.0STF
<menu>Не рекомендуется. Определяет список меню3.03.0TF
<img>Определяет изображение 3.03.0STF
<map>Определяет карту ссылок 3.03.0STF
<area>Определяет область внутри карты ссылок 3.03.0STF
<table>Определяет таблицу 3.03.0STF
<caption>Определяет заглавие таблицы 3.03.0STF
<th>Определяет заголовок таблицы3.03.0STF
<tr>Определяет строку таблицы 3.03.0STF
<td>Определяет ячейку таблицы 3.03.0STF
<thead>Определяет верхний заголовок таблицы 4.0STF
<tbody>Определяет тело таблицы 4.0STF
<tfoot>Определяет нижний заголовок таблицы 4.0STF
<col>Определяет атрибуты для столбцов таблицы 3.0STF
<colgroup>Определяет группы столбцов таблицы 3.0STF
<style>Задает определение стиля 4.03.0STF
<div>Определяет раздел документа3.03.0STF
<span>Определяет раздел документа 4.03.0STF
<head>Задает информацию о документе 3.03.0STF
<title>Определяет заглавие документа 3.03.0STF
<meta>Определяет мета-информацию 3.03.0STF
<base>Определяет базовый URL для всех ссылок на странице 3.03.0STF
<basefont>Не рекомендуется. Определяет базовый шрифт3.03.0TF
<script>Определяет сценарий 3.03.0STF
<noscript>Определяет раздел noscript 3.03.0STF
<applet>Не рекомендуется. Определяет апплет2.03.0TF
<object>Определяет встроенный объект 3.0STF
<param>Определяет параметр для объекта3.03.0STF



Сообщения о состоянии HTTP


Когда браузер запрашивает обслуживание на Web-сервере, могут возникать ошибки.

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

1xx: ИнформационныеСообщение:Описание:
100 ContinueПродолжить. Только часть запроса была получена сервером, но пока он не был отвергнут, клиент должен продолжать запрос.
101 Switching ProtocolsПереключение протоколов. Сервер переключает протокол.
2xx: Успешное выполнениеСообщение:Описание:
200 OKЗапрос был успешно выполнен.
201 CreatedСоздан. Запрос завершен, и создан новый ресурс.
202 AcceptedПринято. Запрос принят для обработки, но обработка еще не завершена.
203Недостоверная информация.
204Нет содержимого
205Сбросить содержимое.
206Частичное содержимое.
3xx: ПеренаправлениеСообщение:Описание:
300 Multiple ChoicesМножественный выбор. Список ссылок. Пользователь может выбрать ссылку и перейти в это место. Допустимо максимум пять адресов.
301 Moved PermanentlyПеремещена постоянно. Запрошенная страница перемещена в новый url
302 FoundНайдена. Запрошенная страница временно перемещена в новый url
303 See OtherСмотри другой. Запрошенную страницу можно найти в другом url
304 Not ModifiedНе модифицирован.
305 Use ProxyИспользуйте прокси-сервер.
306 UnusedНе используется. Этот код использовался в предыдущей версии. Он больше не используется, но код зарезервирован.
307 Temporary RedirectВременно перемещена. Запрошенная страница временно перемещена в новый url
4xx: Ошибки клиентаСообщение:Описание:
400 Bad RequestИспорченный запрос. Сервер не понял запрос.
401 UnauthorizedНеавторизовано. Запрошенная страница требует имя пользователя и пароль.
402 Payment RequiredТребуется платеж. Этот код зарезервирован для будущего использования.
403 ForbiddenЗапрещено. Доступ к запрошенной странице запрещен.
404 Not FoundНе найдено. Сервер не может найти запрошенную страницу.
405 Method Not AllowedМетод не разрешен. Метод, указанный в запросе, не разрешен.
406 Not AcceptableНе приемлем. Сервер может сгенерировать только такой ответ, который клиент не может принять.
407 Proxy Authentication RequiredТребуется аутентификация на прокси-сервере. Необходимо аутентифицироваться на прокси-сервере, прежде чем этот запрос можно будет обслужить.
408 Request TimeoutИстекло время ожидания запроса. Запрос потребовал больше времени, чем сервер был готов ждать.
409 ConflictКонфликт. Запрос невозможно завершить в связи с конфликтом.
410 GoneУдален. Запрошенная страница больше недоступна.
411 Length RequiredТребуется длина. Значение "Content-Length" не определено. Сервер без него не примет запрос.
412 Precondition FailedПредусловие неверно. Предусловие, заданное в запросе, оказалось ложным при проверке сервером.
413 Request Entity Too LargeОбъект запроса слишком большой. Сервер не пример запрос, потому что объект запроса слишком большой.
414 Request-url Too Longurl запроса слишком длинный. Сервер не примет запрос, потому что url слишком длинный. Происходит при преобразовании запроса "post" в запрос "get" с длинной информацией запроса.
415 Unsupported Media TypeНеподдерживаемый тип среды передачи. Сервер не примет запрос, так как тип среды передачи не поддерживается.
416--
417 Expectation FailedОжидания не оправдались.
5xx: Ошибки сервераСообщение:Описание:
500 Internal Server ErrorВнутренняя ошибка сервера. Запрос не был завершен. Сервер столкнулся с непредвиденным условием.
501 Not ImplementedНе реализовано. Запрос не был завершен. Сервер не поддерживает запрошенные функции.
502 Bad GatewayОшибка шлюза. Запрос не был завершен. Сервер получил недопустимый ответ от другого сервера.
503 Service UnavailableСлужба недоступна. Запрос не был завершен. Сервер временно перегружен или отключен.
504 Gateway TimeoutИстекло время ожидания от шлюза.
505 HTTP Version Not SupportedСервер не поддерживает данную версию "протокола http"



Справочник по 7-битным кодам ASCII в HTML


HTML и XHTML используют стандартный 7-битный код ASCII при передаче данных через Web.

7-битный код ASCII представляет 128 различных значений символов (0-127).

7-битные печатные символы ASCII

Результат Описание Номер объекта
пробел &#32;
!восклицательный знак&#33;
"знак двойной кавычки&#34;
#знак номера &#35;
$знак доллара&#36;
%знак процента&#37;
&амперсанд&#38;
'апостроф &#39;
(левая скобка &#40;
)правая скобка &#41;
*звездочка &#42;
+знак плюс &#43;
,запятая &#44;
-дефис &#45;
.точка &#46;
/наклонная черта &#47;
0цифра 0&#48;
1цифра 1&#49;
2цифра 2&#50;
3цифра 3&#51;
4цифра 4&#52;
5цифра 5&#53;
6цифра 6&#54;
7цифра 7&#55;
8цифра 8&#56;
9цифра 9&#57;
:двоеточие &#58;
;точка с запятой &#59;
<меньше &#60;
=равно &#61;
>>больше &#62;
?знак вопроса &#63;
@знак at &#64;
AA &#65;
BB &#66;
CC &#67;
DD &#68;
EE &#69;
FF &#70;
GG &#71;
HH &#72;
II &#73;
JJ &#74;
KK &#75;
LL &#76;
MM &#77;
NN &#78;
OO &#79;
PP &#80;
QQ &#81;
RR &#82;
SS &#83;
TT &#84;
UU &#85;
VV &#86;
WW &#87;
XX &#88;
YY &#89;
ZZ &#90;
[левая квадратная скобка&#91;
\обратная косая черта &#92;
]правая квадратная скобка &#93;
^каре&#94;
_подчеркивание&#95;
`гравис&#96;
aa нижнего регистра &#97;
bb&#98;
c c&#99;
d d&#100;
e e&#101;
f f&#102;
g g&#103;
h h&#104;
i i&#105;
j j&#106;
k k&#107;
l l&#108;
m m&#109;
n n&#110;
o o&#111;
p p&#112;
q q&#113;
r r&#114;
s s&#115;
t t&#116;
u u&#117;
v v&#118;
w w&#119;
x x&#120;
y y&#121;
z z&#122;
{левая фигурная скобка&#123;
|вертикальная черта &#124;
}правая фигурная скобка &#125;
~тильда &#126;
7-BIT ASCII Device Control CharactersРезультат Описание Номер объекта
NULпустой символ &#00;
SOHначало заголовка &#01;
STXначало текста &#02;
ETXконец текста &#03;
EOTконец передачи&#04;
ENQзапрос&#05;
ACKподтверждение &#06;
BELзвонок&#07;
BSвозврат на одну позицию &#08;
HTгоризонтальная табуляция&#09;
LFперевод строки &#10;
VTвертикальная табуляция &#11;
FFперевод страницы &#12;
CRвозврат каретки &#13;
SOна верхний регистр&#14;
SIна нижний регистр &#15;
DLEсмена канала данных &#16;
DC1управление устройством 1&#17;
DC2управление устройством 2&#18;
DC3управление устройством 3&#19;
DC4управление устройством 4&#20;
NAKотрицательное подтверждение&#21;
SYNсинхронизация &#22;
ETBконец передачи блока &#23;
CANотмена &#24;
EMконец носителя &#25;
SUBподстановка &#26;
ESCуход&#27;
FSразделитель файлов &#28;
GSразделитель групп &#29;
RSразделитель записей &#30;
USразделитель элементов &#31;
DELудалить (стереть)&#127;



поддерживает набор символов ISO


HTML 4. 01 поддерживает набор символов ISO 8859-1 (Latin-1).

Нижняя часть ISO-8859-1 (коды 0-127) является исходным 7-битным стандартом ASCII. Большинство этих символов можно использовать без символьной ссылки.

Верхнюю часть ISO-8859-1 (коды 160-255) можно всю использовать с помощью имен символьных объектов.

Отметим, что имена объектов зависят от регистра символов.

Объекты ASCII с новыми именами объектов

Результат Описание Имя объекта Номер объекта
"двойная кавычка &quot;&#34;
'апостроф &apos; (не работает в IE)&#39;
&амперсанд &amp;&#38;
<меньше <&#60;
>больше >&#62;
Символьные объекты ISO 8859-1Результат Описание Имя объекта Номер объекта
Неразрывный пробел &nbsp;&#160;
Ўперевернутый восклицательный знак&iexcl;&#161;
¤валюта &curren;&#164;
ўцент &cent;&#162;
Јфунт стерлингов&pound;&#163;
Ґйена &yen;&#165;
¦разорванная вертикальная черта &brvbar;&#166;
§параграф &sect;&#167;
Ёумлаут &uml;&#168;
©авторское право&copy;&#169;
Єпорядковый индикатор ж.р.&ordf;&#170;
"угловая кавычка (левая)&laquo;&#171;
¬отрицание &not;&#172;
мягкий дефис &shy;&#173;
®зарегистрированная торговая марка&reg;&#174;
торговая марка &trade;&#8482;
Їзнак долготы &macr;&#175;
°градус&deg;&#176;
±плюс-минус&plusmn;&#177;
Іверхний индекс 2&sup2;&#178;
іверхний индекс 3&sup3;&#179;
ґударение &acute;&#180;
µмикро&micro;&#181;
параграф&para;&#182;
средняя точка &middot;&#183;
ёседиль &cedil;&#184;
верхний индекс 1&sup1;&#185;
єпорядковый индикатор м.р.&ordm;&#186;
"угловая кавычка (правая)&raquo;&#187;
јдробь 1/4&frac14;&#188;
Ѕдробь 1/2&frac12;&#189;
ѕдробь 3/4&frac34;&#190;
їперевернутый знак вопроса&iquest;&#191;
Чумножение &times;&#215;
чделение &divide;&#247;
Символьные объекты ISO 8859-1Результат Описание Имя объекта Номер объекта
Аa большая, гравис&Agrave;&#192;
Бa большое, акут&Aacute;&#193;
Вa большое, циркумфлекс&Acirc;&#194;
Гa большое, тильда&Atilde;&#195;
Дa большое , умлаут&Auml;&#196;
Еa большое, кружок&Aring;&#197;
Жae большое&AElig;&#198;
Зc большое, седиль &Ccedil;&#199;
Иe большое, гравис&Egrave;&#200;
Йe большое, акут&Eacute;&#201;
Кe большое, циркумфлекс &Ecirc;&#202;
Лe большое, умлаут&Euml;&#203;
Мi большое, гравис&Igrave;&#204;
Нi большое, акут&Iacute;&#205;
Оi большое, циркумфлекс&Icirc;&#206;
Пi большое, умлаут &Iuml;&#207;
Рeth большое, исландское &ETH;&#208;
Сn большое, тильда&Ntilde;&#209;
Тo большое, гравис&Ograve;&#210;
Уo большое, акут&Oacute;&#211;
Фo большое, циркумфлекс&Ocirc;&#212;
Хo большое, тильда &Otilde;&#213;
Цo большое, умлаут&Ouml;&#214;
Шo большое, перечеркнуто&Oslash;&#216;
Щu большое, гравис&Ugrave;&#217;
Ъu большое, акут&Uacute;&#218;
Ыu большое, циркумфлекс&Ucirc;&#219;
Ьu большое, умлаут&Uuml;&#220;
Эy большое, акут&Yacute;&#221;
ЮTHORN большой, исладский&THORN;&#222;
Яs малое, немецкое&szlig;&#223;
аa малое, гравис&agrave;&#224;
бa малое, акут &aacute;&#225;
вa малое, циркумфлекс&acirc;&#226;
гa малое, тильда&atilde;&#227;
дa малое, умлаут&auml;&#228;
еa малое, с кружком&aring;&#229;
жae малое&aelig;&#230;
зc малое, седиль&ccedil;&#231;
иe малое, гравис &egrave;&#232;
йe малое, акут&eacute;&#233;
кe малое, циркумфлекс&ecirc;&#234;
лe малое, умлаут &euml;&#235;
мi малое, гравис &igrave;&#236;
нi малое, акут &iacute;&#237;
оi малое, циркумфлекс &icirc;&#238;
пi малое, умлаут &iuml;&#239;
рeth малое, исландское&eth;&#240;
сn малое, тильда &ntilde;&#241;
тo малое, гравис &ograve;&#242;
уo малое, акут &oacute;&#243;
фo малое, циркумфлекс&ocirc;&#244;
хo малое, тильда &otilde;&#245;
цo малое, умлаут &ouml;&#246;
шo малое, перечеркнутое&oslash;&#248;
щu малое, гравис &ugrave;&#249;
ъu малое, акут &uacute;&#250;
ыu малое, циркумфлекс &ucirc;&#251;
ьu малое, умлаут &uuml;&#252;
эy малое, акут &yacute;&#253;
юthorn малый, исландский&thorn;&#254;
яy малое, умлаут &yuml;&#255;
Некоторые другие объекты, поддерживаемые в HTMLРезультат Описание Имя объекта Номер объекта
ЊOE большое, связанное &OElig;&#338;
њoe малое, связанное &oelig;&#339;
ЉS большое с короной&Scaron;&#352;
љS малое с короной &scaron;&#353;
џY большое с тремой&Yuml;&#376;
циркумфлекс &circ;&#710;
_малая тильда &tilde;&#732;
?пробел en &ensp;&#8194;
?пробел em &emsp;&#8195;
?тонкий пробел &thinsp;&#8201;
non-joiner &zwnj;&#8204;
joiner&zwj;&#8205;
знак слева направо&lrm;&#8206;
знак справа налево&rlm;&#8207;
штрих en &ndash;&#8211;
штрих em &mdash;&#8212;
левая одиночная кавычка &lsquo;&#8216;
правая одиночная кавычка&rsquo;&#8217;
одиночная нижняя кавычка&sbquo;&#8218;
"левая двойная кавычка&ldquo;&#8220;
"правая двойная кавычка &rdquo;&#8221;
двойная нижняя кавычка&bdquo;&#8222;
крестик&dagger;&#8224;
двойной крестик &Dagger;&#8225;
три точки &hellip;&#8230;
промилле &permil;&#8240;
одиночная угловая левая кавычка&lsaquo;&#8249;
одиночная угловая правая кавычка&rsaquo;&#8250;
евро &euro;&#8364;

В алфавитном порядке


NN: указывает самую раннюю версию Netscape, которая поддерживает этот тегIE: указывает самую раннюю версию Internet Explorer, которая поддерживает этот тегDTD: указывает в каком DTD XHTML 1.0 разрешен этот тег. S=Strict, T=Transitional и F=Frameset

ТегОписаниеNNIEDTD
<!--...-->Определяет комментарий 3.03.0STF
<!DOCTYPE>Определяет тип документаSTF
<a>Определяет анкер 3.03.0STF
<abbr>Определяет сокращение 6.2 STF
<acronym>Определяет акроним 6.24.0STF
<address>Определяет элемент адреса 4.04.0STF
<applet>Не рекомендуется. Определяет апплет2.03.0TF
<area>Определяет область внутри карты ссылок3.03.0STF
<b>Определяет жирный текст 3.03.0STF
<base>Определяет базовый URL для всех ссылок на странице 3.03.0STF
<basefont>Не рекомендуется. Определяет базовый шрифт3.03.0TF
<bdo>Определяет направление вывода текста 6.25.0STF
<big>Определяет увеличенный текст 3.03.0STF
<blockquote>Определяет длинную цитату 3.03.0STF
<body>Определяет элемент тела 3.03.0STF
<br>Определякет перенос одной строки3.03.0STF
<button>Определяет кнопку6.24.0STF
<caption>Определяет заглавие таблицы3.03.0STF
<center>Не рекомендуется. Определяет центрированный текст3.03.0TF
<cite>Определяет цитату3.03.0STF
<code>Определяет текст кода программы 3.03.0STF
<col>Определяет атрибуты для столбцов таблицы 3.0STF
<colgroup>Определяет группы столбцов таблицы3.0STF
<dd>Определяет описание определения3.03.0STF
<del>Определяет удаленный текст 6.24.0STF
<dir>Не рекомендуется. Определяет список каталогов 3.03.0TF
<div>Определяет раздел документа3.03.0STF
<dfn>Задает термин определения3.0STF
<dl>Определяет список определений 3.03.0STF
<dt>Задает термин определения 3.03.0STF
<em>Определяет выделенный текст 3.03.0STF
<fieldset>Определяет набор полей 6.24.0STF
<font>Не рекомендуется. Определяет шрифт, размер и цвет текста 3.03.0TF
<form>Определяет форму 3.03.0STF
<frame>Определяет подокно (фрейм)3.03.0F
<frameset>Определяет набор фреймов3.03.0F
<h1> до <h6>Определяют заголовки с 1 по 6 размер3.03.0STF
<head>Определяет информацию о документе 3.03.0STF
<hr>Определяет горизонтальную линейку3.03.0STF
<html>Определяет документ html3.03.0STF
<i>Определяет наклонный текст (курсив)3.03.0STF
<iframe>Определяет встроенное подокно (фрейм)6.04.0TF
<img>Определяет изображение3.03.0STF
<input>Определяет поле ввода 3.03.0STF
<ins>Определяет вставленный текст 6.24.0STF
<isindex>Не рекомендуется. Определяет поле ввода из одной строки3.03.0TF
<kbd>Определяет текст с клавиатуры 3.03.0STF
<label>Определяет метку для элемента управления формы 6.24.0STF
<legend>Определяет заголовок в наборе полей 6.24.0STF
<li>Определяет элемент списка3.03.0STF
<link>Определяет ссылку на ресурс 4.03.0STF
<map>Определяет карту ссылок 3.03.0STF
<menu>Не рекомендуется. Определяет список меню3.03.0TF
<meta>Определяет мета-информацию 3.03.0STF
<noframes>Определяет раздел noframe 3.03.0TF
<noscript>Определяет раздел noscript3.03.0STF
<object>Определяет встроенный объект3.0STF
<ol>Определяет упорядоченный список 3.03.0STF
<optgroup>Определяет группу вариантов 6.06.0STF
<option>Определяет вариант в раскрывающемся списке 3.03.0STF
<p>Определяет параграф 3.03.0STF
<param>Определяет параметр для объекта 3.03.0STF
<pre>Определяет заранее отформатированный текст 3.03.0STF
<q>Определяет короткую цитату 6.2 STF
<s>Не рекомендуется. Определяет зачеркнутый текст3.03.0TF
<samp>Определяет образец программного кода 3.03.0STF
<script>Определяет сценарий 3.03.0STF
<select>Определяет список с возможностью выбора3.03.0STF
<small>Определяет уменьшенный текст 3.03.0STF
<span>Определяет раздел документа4.03.0STF
<strike>Не рекомендуется. Определяет зачеркнутый текст3.03.0TF
<strong>Определяет акцентированный текст 3.03.0STF
<style>Задает определение стиля 4.03.0STF
<sub>Определяет текст как нижний индекс 3.03.0STF
<sup>Определяет текст как верхний индекс3.03.0STF
<table>Определяет таблицу3.03.0STF
<tbody>Определяет тело таблицы 4.0STF
<td>Определяет ячейку таблицы 3.03.0STF
<textarea>Определяет текстовую область 3.03.0STF
<tfoot>Определяет нижний заголовок таблицы 4.0STF
<th>Определяет заголовок таблицы3.03.0STF
<thead>Определяет верхний заголовок таблицы4.0STF
<title>Определяет заглавие документа 3.03.0STF
<tr>Определяет строку таблицы 3.03.0STF
<tt>Определяет текст телетайпа 3.03.0STF
<u>Не рекомендуется. Определяет подчеркнутый текст3.03.0TF
<ul>Определяет неупорядоченный список 3.03.0STF
<var>Определяет переменную 3.03.0STF
<xmp>Не рекомендуется. Определяет заранее отформатированный текст3.03.0