| Год | Событие |
|---|---|
| около 1991 | Тим Бернерс-Ли изобрел World Wide Web, он создал первые Веб-сервер и Веб-браузер и первую версию HTML |
| 1993 | HTML |
| 1995 | Разработана версия 2.0 языка HTML |
| 1997 | Консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров |
| 1999 | Опубликована версия HTML 4.01 |
| 2000 | Консорциум W3C опубликовал спецификацию XHTML 1.0, которая была реструктуризацией HTML, чтобы сделать его действительным документом XML |
| В настоящее время | Готовится черновик версии HTML 5 |
Документ HTML 4 состоит из трех частей:
HTML,header/"шапка" (ограниченный элементом HEAD ),Тело может содержаться в элементах BODY или FRAMESET.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> Simple page </TITLE>
</HEAD>
<BODY>
<H1>Hello world!</H1>
</BODY>
</HTML>
Документ начинается с элемента типа документа, или doctype. Он описывает, какой тип HTML будет использован - чтобы клиентское приложение пользователя могло определить, как интерпретировать документ, и решить, следует ли он тем правилам, которым собирался следовать по своему заявлению.
После этого можно видеть открывающий тег элемента html. Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML.
Внутри элемента html имеется элемент head. Он содержит информацию о документе (метаданные). Внутри head находится элемент title, который определяет заголовок "Simple page" в панели меню.
После элемента head следует элемент body, который является оболочкой, содержащей реальное содержимое страницы - в данном случае только элемент заголовка первого уровня ( h1 ), который содержит текст "Hello world!" .
Элементы часто содержат другие элементы.
Разделы страницы создают общую структуру документа, и могут содержать подразделы. Они также могут содержать заголовки, параграфы, списки и т.д. Параграфы могут содержать элементы, которые создают ссылки на другие элементы, цитаты, выделения и т.д.
Базовый элемент в HTML состоит из двух тэгов вокруг блока текста. Существуют элементы, которые не являются оболочкой для текста, и почти в каждом случае элементы могут содержать подэлементы (как html содержит head и body в примере выше).
Элементы могут также иметь атрибуты, которые могут модифицировать поведение элемента и вводить дополнительное значение.
<div id="masthead">
<h1>Основы
<abbr title="Hypertext Markup Language">HTML</abbr>
</h1>
</div>
В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id, для которого задано значение div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент title, значение которого задано как
Многие атрибуты в HTML являются общими для всех элементов, но некоторые являются специфическими для данного элемента или элементов. Все они имеют форму:
ключевое_слово="значение"
Значение должно быть помещено в одиночные или двойные кавычки (в некоторых ситуациях кавычки могут отсутствовать, но это не слишком хорошо с точки зрения предсказуемости, понимания).
Атрибуты и их возможные значения определяются в основном спецификациями ), поэтому - нельзя создавать свои собственные атрибуты. Единственными реальными исключениями являются атрибуты id и class, значения полностью которых предназначены для добавления в документы вашего собственного значения и семантики.
Элемент внутри другого элемента называют "потомком" этого элемента. В примере выше h1, который в свою очередь является потомком div. И наоборот, div является "предком" элемента h1.
Имеется две основные категории элементов в HTML, которые соответствуют типам контента и структуре, которую представляют эти элементы - элементы блочного уровня и строковые элементы.
Блочный уровень означает более высокий уровень элемента, обычно информирующий о структуре документа. Элементы блочного уровня можно представлять как элементы, которые начинаются с новой строки, отрываясь от того, что было перед этим. Распространенными
Строковые элементы содержатся внутри структурных элементов блочного уровня и охватывают только части текста документа, а не целые области. Строковый элемент не приводит к появлению в документе новой строки, т.к. они являются элементами, которые появляются в параграфе текста. Распространенными
Заголовок HTML -документа является необязательным элементом разметки. Первоначально существование заголовка определялось необходимостью именования окна браузер. Это достигалось за счет TITLE:
<HTML> <HEAD> <TITLE>Это заголовок</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>
Еще одной функцией заголовка HTML -документа является управление HTTP -обменом через META. При современной практике размещения Веб-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность - через заголовок HTML -документа.
Заголовок HTML -документа также предназначен для описания поискового образа документа, необходимого для индексирования документа роботами поисковых систем. Элемент META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам.
Основные теги заголовка - это элементы HTML -разметки, которые наиболее часто встречаются в заголовке HTML -документа, т.е. внутри HEAD:
TITLE (заглавие документа);BASE (база URL );ISINDEX (поисковый шаблон);META (метаинформация);LINK (общие ссылки);STYLE (описатели стилей);SCRIPT (сценарии).Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP -обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей таблиц стилей.
HEAD содержит заголовок HTML -документа. Данный HEAD закрывается, если встречается либо тег начала контейнера BODY, либо тег начала контейнера FRAMESET.
Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом.
TITLE служит для именования документа в World Wide Web. При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
<TITLE>название документа</TITLE>
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Веб-узла.
BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить целевое окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер.
Тег начала контейнера содержит один обязательный атрибут HREF, и может содержать один необязательный атрибут TARGET. Синтаксис контейнера BASE в общем виде выглядит следующим образом:
<BASE HREF="http://www.example.com/intro.html"> <BASE HREF=http://www. example.com/intro.html TARGET=next>
ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML. В HTML 4.0 этот контейнер не определен.
META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания Content-type можно задать перекодировку документа на стороне клиента.
С помощью META также можно задать и другие операторы. Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META -тег вида:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control. Для получения такого же результата, как в случае с HTML -документа достаточно указать:
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-cache">
Можно запретить хранение документа после пересылки:
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-store">
Точно так же можно задать время последней модификации ( Last-Modified ) или дату истечения актуальности документа ( Expire ).
META -тег часто используется для описания поискового образа документа.
Собственно, для описания документа используется два META -тега. Один определяет список ключевых слов, а второй - краткое содержание документа. Контейнер TITLE здесь также используется в качестве названия документа.
<TITLE> Веб-технологии</TITLE> <META NAME="description" http-equiv="description" content="Учебный курс Веб-технологии. Тема: Обзор структуры и возможносетй языка гипертекстовой разметки."> <META NAME="keywords" HTTP-EQUIV="keywords" CONTENT="учебный курс; Веб-технологии; HTML 4.1; язык гипертекстовой разметки; заголовок HTML-документа; заголовок; HTML; документ; контейнер; элемент; разметка">
META -тег используют также программы подготовки документов., размещая в нем свой идентификатор. В общем случае контейнер META выглядит следующим образом:
<META [name=имя] [HTTP-EQUIV=имя_HTTP-оператора] CONTENT=текст >
LINK - это результат давно предпринятой попытки придать HTML академический вид. Согласно теории гипертекстовых систем, все гипертекстовые связи разделяют на два типа: контекстные и общие. Такое деление чисто условное и определяется тем, что контекстную связь можно привязать к определенному месту документа, а общую - отнести только ко всему документу целиком. Гипертекстовая связь задает отношение на множестве информационных узлов.
Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй - целью ( target ). Собственно, это и отражено в названии
Общие ссылки нельзя привязать по контексту. Например, два информационных узла находятся в отношении следования, т.е. при "линейном" просмотре одна Веб-страница является следующей для другой Веб-страницы. В этом случае речь идет о страницах целиком, а не об отдельных их частях. Такой же общей связью является принадлежность к Веб-узлу, который ассоциируется со своей домашней страницей.
В настоящее время в браузерах не существует единого способа программирования или определения общих гипертекстовых связей.
Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в веб-браузерах. CSS ( LINK позволил загружать внешние описатели стилей:
<LINK REL=stylesheet href="../css/style.css" TYPE="text/css" >
В данном случае атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.
В общем случае контейнер LINK имеет следующий вид:
<LINK [REL=тип_отношения] [HREF=URL]
[TYPE=тип_содержания]
>
Для разных типов содержания действия по интерпретации
STYLE предназначен для размещения описателей стилей. При этом описание стиля из данного HTML -документа для всей страницы.
В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css, либо text/javascript. Если STYLE выглядит так:
<STYLE TYPE=тип_описания_стилей> описание стиля/стилей </STYLE>
SCRIPT служит для размещения кода JavaScript, VBScript или SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:
<SCRIPT TYPE="text/javascript" SRC=script.code >
В общем виде запись контейнера выглядит следующим образом:
<SCRIPT [TYPE=тип_языка_сценариев]> JavaScript / VBScript - код </SCRIPT>
или
<SCRIPT [TYPE=тип_языка_сценариев]
[SRC=URL]>
</SCRIPT>
Веб-браузерами поддерживается несколько сценарных языков: JavaScript, VBScript, . По умолчанию подразумевается JavaScript.
Теги
Описание тегов BODY. В отличие от тега НEАD, тег BODY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Если источником для фона HTML - документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.
| Атрибут | Описание |
|---|---|
MARGINHEIGHT |
определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. |
TOPMARGIN |
определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. |
MARGINWIDTH |
определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. |
LEFTMARGIN |
определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. |
BACKGROUND |
определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. |
BGCOLOR |
определяет цвет фона документа |
TEXT |
определяет цвет текста в документе |
LINK |
определяет цвет гиперссылок в документе |
ALINK |
определяет цвет подсветки гиперссылок в момент нажатия |
VLINK |
определяет цвет гиперссылок на документы, которые вы уже просмотрели |
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB -значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Например:
<HTML> <BODY BACKGROUND="image.jpg" BGCOLOR="black" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#656565" MARGINHEIGHT="25" TOPMARGIN="25" LEFTMARGIN="45" MARGINWIDTH="45"> Текст документа. </BODY> </HTML>
| Теги | Описание тегов | Атрибуты | Описание атрибутов |
|---|---|---|---|
| от <Н1> до <Н6> | Заголовки. Обозначают начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. | ||
| <P> | Тег <P> применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках | АLIGN |
Позволяет выравнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Возможные значения атрибута: justify left right center |
| <ВR> | Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. | СLЕАR |
Используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Возможные значения атрибута: LEFT, RIGHT, АLL. |
| <NOВR> | Дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. |
Еще одним способом структурирования текстов являются списки. В НТМL имеются следующие виды списков:
Ненумерованный список записывается в виде последовательности:
<UL> <LI>первый элемент списка <LI>второй элемент списка <LI>третий элемент списка </UL>
Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены теги с атрибутами стандартных маркеров:
<UL TYPE=DISC > Стандартные маркеры списков первого уровня (по умолчанию).<UL TYPE=СIRCLE> Маркеры в виде окружностей.<UL TYPE=SQUARE> Квадратные маркеры.Тег <OL> вместе с атрибутом ТYРЕ позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры:
<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3... <ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С... <OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с... <ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III...
Теги списка <DL>, <DT>, <DD> используют для создания списка терминов и их определений по следующей схеме :
<DL> <DT>Термин</DT> <DD>Определение</DD> </DL>
Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Содержимое комментариев браузер не выводит на экран.
Для записи гипертекстовой ссылки используется тег <А>, который называют "якорем". Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде
<А НREF="http://www.example.com"> Пример гипертекстовой ссылки </А>
Значение атрибута HREF и есть адрес документа. Форма записи этого адреса задается в виде URL.
Для вставки изображения в HTML документ используется тег <IMG> с обязательным атрибутом SRC, значением которого является URL графического файла.
Пример:
<IMG SRC="myimage.gif" ALT="Картинка">
Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.
Пример вставки изображения:
<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">
Изображения на веб-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A> , что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :
Тег <IMG> имеет один обязательный атрибут SRC и несколько необязательных: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.
| Атрибут | Описание |
|---|---|
SRC |
Указывает файл изображения и путь к нему |
ALT |
Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику |
АLIGN |
Определяет положение изображения относительно окружающего его текста |
USEMAP |
Если щелкнуть кнопкой мыши на USEMAP, произойдет переход по ссылке на документ, заданный для этой области > |
BORDER |
Определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует |
HSPACE |
Задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом |
VSPACE |
Задает вертикальное расстояние между строками текста и изображением |
WIDTH , HEIGHT |
Задают значения размеров изображения по горизонтали и по вертикали соответственно |
Для описания таблиц используется тег <ТАВLЕ> . Строки таблицы задаются с помощью тегов <ТR></ТR> . Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD> . Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> . Эти теги подобны <ТD></ТD> , однако текст, заключенный между тегами <ТН></ТН> , автоматически выделяется жирным шрифтом и по умолчанию располагается посередине ячейки. Тег <CAPTION> позволяет создавать заголовки таблицы.
| Атрибут | Описание |
NOWRAP |
При использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку |
СОLSPAN |
Если требуется сделать какую-нибудь ячейку шире, чем верхняя или нижняя, то можно воспользоваться атрибутом СОLSPAN, чтобы расширить ее на любое количество обычных ячеек. |
ROWSPAN |
Подобен атрибуту СОLSPAN, только он задает число строк, на которые расширяется ячейка |
WIDТН |
Можно поместить его в тег <ТАВLЕ> , чтобы задать ширину всей таблицы, или можно использовать в тегах <ТD> или <ТН> , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. |
СЕLLРАDDING |
Определяет ширину пустого пространства между содержимым ячейки и ее границами |
АLIGN, VALIGN |
Теги <ТR> , <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали. VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. |
BORDER |
В теге <ТАВLЕ> определяет, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу |
СЕLLSPACING |
Определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам |
BGCOLOR |
Позволяет установить цвет фона. В зависимости от того, с каким тегом он применяется, цвет фона может быть установлен для всей таблицы ( TABLE ), для строки ( TR ) или для отдельной ячейки ( TD ). Значением данного атрибута является RGB -код или стандартное название цвета |
BACKGROUND |
Задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением |
Элемент FORM описывает форму на веб-странице и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT> , размещенных внутри пары <FORM> и </FORM>. В форме в качестве атрибутов для описания обработки данных, вводимых пользователем в форму используются как метод (method) и действие ( action ).
Тег <INPUT> используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.
| Тип элемента | Описание |
|---|---|
text |
Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут Имеет еще три дополнительных атрибута.
|
checkbox |
Применяется для создания флажков с независимым выбором. Должны также присутствоватьатрибуты NAME, и VALUE. В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED. |
radio |
Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений. Должны быть также указаны атрибуты NAME и VALUE. |
image |
Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Должны быть указаны также атрибуты NAME и SRC. Атрибут SRC содержит URI файла - источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG> . |
password |
Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены. |
button |
Используется для размещения кнопок на веб-странице. Имеет атрибуты NAME и VALUE. |
file |
Элемент управления для запуска диалогового окна выбора файла. Для задания имени файла по умолчанию можно использовать атрибут VALUE. |
submit |
Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: NAME и VALUE. |
reset |
Используется как элемент интерфейса для сброса всех введеных в поля формы данных. Дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки. |
hidden |
Позволяет включить в отправляемую форму значения атрибутов NAME и VALUE, недоступные для изменения пользователем. |
Тег <TEXTAREA> используется для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS (число колонок, содержащихся в текстовой области), NAME и ROWS (количество видимых строк текстовой области).
Тег SELECT используют для определения списка пунктов, задаваемых тегами <OPTION> . Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.
| Атрибут | Описание |
|---|---|
MULTIPLE |
Позволяет выбрать более чем одно наименование |
NAME |
Определяет наименование объекта |
SIZE |
Определяет число видимых пользователю пунктов списка |
В форме может использоваться тег <OPTION> только внутри тега <SELECT> . Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED используется для первоначального выбора значения элемента по умолчанию. Атрибут VALUE указывает на значение, возвращаемое формой после выбора пользователем данного пункта.
Пример:
<BR>Ваш выбор <SELECT NAME="choice"> <OPTION VALUE="Вариант 1">Вариант 1 <OPTION VALUE="Вариант 2">Вариант 2 <OPTION VALUE="Вариант 3">Вариант 3 <OPTION SELECTED>Вариант 4 </SELECT>
Экран с фреймами описывается в НТМL -странице, в контейнере FRAMESET. Содержимое фрейма - отдельная HTML -страница, которая может физически может находиться в другом месте где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой содержимого фреймов нет.
Пример:
<HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <FRAMESET COLS="30%, 70%"> <FRAME SRC="menu.html"> <FRAME SRC="index.html" NAME="index"> </FRAMESET> </HTML>
Для того, чтобы при щелчке на ссылке со страницы menu.html загружались и отображались в правом окне другие страницы. следует добавить атрибут ТАRGET ( TARGЕТ="main" ) в тег этих ссылок. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме index. Если не определен атрибут ТАRGЕТ, то страница появится там, где щелкнули гиперссылку - т.е.в левом фрейме.
Если посетитель с устаревшим браузером окажется на вашей странице с фреймовой структурой, то все, что находится на ней между тегами < и </, будет выглядеть корректно - браузер просто проигнорирует фреймы.
У тега <FRAMESET> только два возможных атрибута: ROWS, задающий число строк, и СОLS, задающий число столбцов.
Тег <FRАМЕ> определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Тег <FRАМЕ> имеет следуюшие атрибуты: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE и SRC.
Первый черновик спецификации был опубликован в январе 2008 г. Спецификация сейчас находится в разработке. Предполагается, что отдельные части HTML 5 будут закончены и реализованы в веб-браузерах до того, как спецификация официально получит статус рекомендации.
В HTML 5 вводится несколько новых элементов и атрибутов, например < (навигационная панель) и <. Эти теги будут облегчать работу поисковым системам, а также обработку сайта с мобильных устройств или читающих программ. Другие элементы предоставляют новую функциональность, такие как <audio> и <video> .
Основные отличия HTML 5 от HTML 4:
footer ,section, video, audio, progress , nav , meter , time, aside, canvasinput -элементов;id, tabindex, repeat ;center, font, strike.HTML 5 разработан так, что не поддерживающие его браузеры могут просто игнорировать элементы HTML 5. В отличие от четвертой версии, пятая версия четко определяет правила лексического разбора, позволяющие различным браузерам отображать один и тот же результат в случае употребления некорректного синтаксиса разметки в документе.XHTML - язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума W3C в 2001 году.
Буква "X" в XHTML означает "расширяемый. Основные различия между XHTML и HTML показаны в Таблице 2.1.
HTML |
XHTML |
|---|---|
| Для элементов и атрибутов не различается регистр символов. | Для элементов и атрибутов различается регистр символов; они используют символы нижнего регистра |
Некоторым элементам не требуется закрывающий тег (например, параграфы, <p>), в то время как другие (называемые "пустыми элементами") запрещают закрывающий тег (например, изображения, <img> ). |
Все элементы должны быть явно закрыты . Элементы без содержимого могут быть закрыты с помощью косой черты в конце начального тега (например, <br/> ). Если XHTML обрабатывается как text/html, то необходимо использовать сокращенный синтаксис для всех элементов, которые определены как "пустой", и помещать пробел перед косой чертой. Необходимо использовать длинную форму (с раздельными начальным и конечным тегами) для любого элемента, не определенного как пустой - даже если он не имеет никакого контента. |
| Некоторые значения атрибутов могут записываться без кавычек. | Значения атрибутов должны быть заключены в кавычки |
Для некоторых атрибутов можно использовать сокращения (например, <option selected> ). |
Для всех атрибутов должна использоваться полная форма атрибута (например, <option selected="selected"> ) |
Серверы должны доставлять клиенту HTML документ с MIME типом text/html |
XHTML должен использовать MIME тип application/xhtml+xml, но может использовать application/xml, text/xml или text/html. |
| Год | Событие |
|---|---|
| около 1991 | Тим Бернерс-Ли изобрел World Wide Web, он создал первые Веб-сервер и Веб-браузер и первую версию HTML |
| 1993 | HTML |
| 1995 | Разработана версия 2.0 языка HTML |
| 1997 | Консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров |
| 1999 | Опубликована версия HTML 4.01 |
| 2000 | Консорциум W3C опубликовал спецификацию XHTML 1.0, которая была реструктуризацией HTML, чтобы сделать его действительным документом XML |
| В настоящее время | Готовится черновик версии HTML 5 |
Документ HTML 4 состоит из трех частей:
HTML,header/"шапка" (ограниченный элементом HEAD ),Тело может содержаться в элементах BODY или FRAMESET.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> Simple page </TITLE>
</HEAD>
<BODY>
<H1>Hello world!</H1>
</BODY>
</HTML>
Документ начинается с элемента типа документа, или doctype. Он описывает, какой тип HTML будет использован - чтобы клиентское приложение пользователя могло определить, как интерпретировать документ, и решить, следует ли он тем правилам, которым собирался следовать по своему заявлению.
После этого можно видеть открывающий тег элемента html. Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML.
Внутри элемента html имеется элемент head. Он содержит информацию о документе (метаданные). Внутри head находится элемент title, который определяет заголовок "Simple page" в панели меню.
После элемента head следует элемент body, который является оболочкой, содержащей реальное содержимое страницы - в данном случае только элемент заголовка первого уровня ( h1 ), который содержит текст "Hello world!" .
Элементы часто содержат другие элементы.
Разделы страницы создают общую структуру документа, и могут содержать подразделы. Они также могут содержать заголовки, параграфы, списки и т.д. Параграфы могут содержать элементы, которые создают ссылки на другие элементы, цитаты, выделения и т.д.
Базовый элемент в HTML состоит из двух тэгов вокруг блока текста. Существуют элементы, которые не являются оболочкой для текста, и почти в каждом случае элементы могут содержать подэлементы (как html содержит head и body в примере выше).
Элементы могут также иметь атрибуты, которые могут модифицировать поведение элемента и вводить дополнительное значение.
<div id="masthead">
<h1>Основы
<abbr title="Hypertext Markup Language">HTML</abbr>
</h1>
</div>
В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id, для которого задано значение div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент title, значение которого задано как
Многие атрибуты в HTML являются общими для всех элементов, но некоторые являются специфическими для данного элемента или элементов. Все они имеют форму:
ключевое_слово="значение"
Значение должно быть помещено в одиночные или двойные кавычки (в некоторых ситуациях кавычки могут отсутствовать, но это не слишком хорошо с точки зрения предсказуемости, понимания).
Атрибуты и их возможные значения определяются в основном спецификациями ), поэтому - нельзя создавать свои собственные атрибуты. Единственными реальными исключениями являются атрибуты id и class, значения полностью которых предназначены для добавления в документы вашего собственного значения и семантики.
Элемент внутри другого элемента называют "потомком" этого элемента. В примере выше h1, который в свою очередь является потомком div. И наоборот, div является "предком" элемента h1.
Имеется две основные категории элементов в HTML, которые соответствуют типам контента и структуре, которую представляют эти элементы - элементы блочного уровня и строковые элементы.
Блочный уровень означает более высокий уровень элемента, обычно информирующий о структуре документа. Элементы блочного уровня можно представлять как элементы, которые начинаются с новой строки, отрываясь от того, что было перед этим. Распространенными
Строковые элементы содержатся внутри структурных элементов блочного уровня и охватывают только части текста документа, а не целые области. Строковый элемент не приводит к появлению в документе новой строки, т.к. они являются элементами, которые появляются в параграфе текста. Распространенными
Заголовок HTML -документа является необязательным элементом разметки. Первоначально существование заголовка определялось необходимостью именования окна браузер. Это достигалось за счет TITLE:
<HTML> <HEAD> <TITLE>Это заголовок</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>
Еще одной функцией заголовка HTML -документа является управление HTTP -обменом через META. При современной практике размещения Веб-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность - через заголовок HTML -документа.
Заголовок HTML -документа также предназначен для описания поискового образа документа, необходимого для индексирования документа роботами поисковых систем. Элемент META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам.
Основные теги заголовка - это элементы HTML -разметки, которые наиболее часто встречаются в заголовке HTML -документа, т.е. внутри HEAD:
TITLE (заглавие документа);BASE (база URL );ISINDEX (поисковый шаблон);META (метаинформация);LINK (общие ссылки);STYLE (описатели стилей);SCRIPT (сценарии).Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP -обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей таблиц стилей.
HEAD содержит заголовок HTML -документа. Данный HEAD закрывается, если встречается либо тег начала контейнера BODY, либо тег начала контейнера FRAMESET.
Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом.
TITLE служит для именования документа в World Wide Web. При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
<TITLE>название документа</TITLE>
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Веб-узла.
BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить целевое окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер.
Тег начала контейнера содержит один обязательный атрибут HREF, и может содержать один необязательный атрибут TARGET. Синтаксис контейнера BASE в общем виде выглядит следующим образом:
<BASE HREF="http://www.example.com/intro.html"> <BASE HREF=http://www. example.com/intro.html TARGET=next>
ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML. В HTML 4.0 этот контейнер не определен.
META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания Content-type можно задать перекодировку документа на стороне клиента.
С помощью META также можно задать и другие операторы. Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META -тег вида:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control. Для получения такого же результата, как в случае с HTML -документа достаточно указать:
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-cache">
Можно запретить хранение документа после пересылки:
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-store">
Точно так же можно задать время последней модификации ( Last-Modified ) или дату истечения актуальности документа ( Expire ).
META -тег часто используется для описания поискового образа документа.
Собственно, для описания документа используется два META -тега. Один определяет список ключевых слов, а второй - краткое содержание документа. Контейнер TITLE здесь также используется в качестве названия документа.
<TITLE> Веб-технологии</TITLE> <META NAME="description" http-equiv="description" content="Учебный курс Веб-технологии. Тема: Обзор структуры и возможносетй языка гипертекстовой разметки."> <META NAME="keywords" HTTP-EQUIV="keywords" CONTENT="учебный курс; Веб-технологии; HTML 4.1; язык гипертекстовой разметки; заголовок HTML-документа; заголовок; HTML; документ; контейнер; элемент; разметка">
META -тег используют также программы подготовки документов., размещая в нем свой идентификатор. В общем случае контейнер META выглядит следующим образом:
<META [name=имя] [HTTP-EQUIV=имя_HTTP-оператора] CONTENT=текст >
LINK - это результат давно предпринятой попытки придать HTML академический вид. Согласно теории гипертекстовых систем, все гипертекстовые связи разделяют на два типа: контекстные и общие. Такое деление чисто условное и определяется тем, что контекстную связь можно привязать к определенному месту документа, а общую - отнести только ко всему документу целиком. Гипертекстовая связь задает отношение на множестве информационных узлов.
Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй - целью ( target ). Собственно, это и отражено в названии
Общие ссылки нельзя привязать по контексту. Например, два информационных узла находятся в отношении следования, т.е. при "линейном" просмотре одна Веб-страница является следующей для другой Веб-страницы. В этом случае речь идет о страницах целиком, а не об отдельных их частях. Такой же общей связью является принадлежность к Веб-узлу, который ассоциируется со своей домашней страницей.
В настоящее время в браузерах не существует единого способа программирования или определения общих гипертекстовых связей.
Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в веб-браузерах. CSS ( LINK позволил загружать внешние описатели стилей:
<LINK REL=stylesheet href="../css/style.css" TYPE="text/css" >
В данном случае атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.
В общем случае контейнер LINK имеет следующий вид:
<LINK [REL=тип_отношения] [HREF=URL]
[TYPE=тип_содержания]
>
Для разных типов содержания действия по интерпретации
STYLE предназначен для размещения описателей стилей. При этом описание стиля из данного HTML -документа для всей страницы.
В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css, либо text/javascript. Если STYLE выглядит так:
<STYLE TYPE=тип_описания_стилей> описание стиля/стилей </STYLE>
SCRIPT служит для размещения кода JavaScript, VBScript или SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:
<SCRIPT TYPE="text/javascript" SRC=script.code >
В общем виде запись контейнера выглядит следующим образом:
<SCRIPT [TYPE=тип_языка_сценариев]> JavaScript / VBScript - код </SCRIPT>
или
<SCRIPT [TYPE=тип_языка_сценариев]
[SRC=URL]>
</SCRIPT>
Веб-браузерами поддерживается несколько сценарных языков: JavaScript, VBScript, . По умолчанию подразумевается JavaScript.
Теги
Описание тегов BODY. В отличие от тега НEАD, тег BODY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Если источником для фона HTML - документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.
| Атрибут | Описание |
|---|---|
MARGINHEIGHT |
определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. |
TOPMARGIN |
определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. |
MARGINWIDTH |
определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. |
LEFTMARGIN |
определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. |
BACKGROUND |
определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. |
BGCOLOR |
определяет цвет фона документа |
TEXT |
определяет цвет текста в документе |
LINK |
определяет цвет гиперссылок в документе |
ALINK |
определяет цвет подсветки гиперссылок в момент нажатия |
VLINK |
определяет цвет гиперссылок на документы, которые вы уже просмотрели |
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB -значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Например:
<HTML> <BODY BACKGROUND="image.jpg" BGCOLOR="black" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#656565" MARGINHEIGHT="25" TOPMARGIN="25" LEFTMARGIN="45" MARGINWIDTH="45"> Текст документа. </BODY> </HTML>
| Теги | Описание тегов | Атрибуты | Описание атрибутов |
|---|---|---|---|
| от <Н1> до <Н6> | Заголовки. Обозначают начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. | ||
| <P> | Тег <P> применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках | АLIGN |
Позволяет выравнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Возможные значения атрибута: justify left right center |
| <ВR> | Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. | СLЕАR |
Используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Возможные значения атрибута: LEFT, RIGHT, АLL. |
| <NOВR> | Дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. |
Еще одним способом структурирования текстов являются списки. В НТМL имеются следующие виды списков:
Ненумерованный список записывается в виде последовательности:
<UL> <LI>первый элемент списка <LI>второй элемент списка <LI>третий элемент списка </UL>
Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены теги с атрибутами стандартных маркеров:
<UL TYPE=DISC > Стандартные маркеры списков первого уровня (по умолчанию).<UL TYPE=СIRCLE> Маркеры в виде окружностей.<UL TYPE=SQUARE> Квадратные маркеры.Тег <OL> вместе с атрибутом ТYРЕ позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры:
<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3... <ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С... <OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с... <ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III...
Теги списка <DL>, <DT>, <DD> используют для создания списка терминов и их определений по следующей схеме :
<DL> <DT>Термин</DT> <DD>Определение</DD> </DL>
Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Содержимое комментариев браузер не выводит на экран.
Для записи гипертекстовой ссылки используется тег <А>, который называют "якорем". Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде
<А НREF="http://www.example.com"> Пример гипертекстовой ссылки </А>
Значение атрибута HREF и есть адрес документа. Форма записи этого адреса задается в виде URL.
Для вставки изображения в HTML документ используется тег <IMG> с обязательным атрибутом SRC, значением которого является URL графического файла.
Пример:
<IMG SRC="myimage.gif" ALT="Картинка">
Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.
Пример вставки изображения:
<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">
Изображения на веб-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A> , что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :
Тег <IMG> имеет один обязательный атрибут SRC и несколько необязательных: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.
| Атрибут | Описание |
|---|---|
SRC |
Указывает файл изображения и путь к нему |
ALT |
Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику |
АLIGN |
Определяет положение изображения относительно окружающего его текста |
USEMAP |
Если щелкнуть кнопкой мыши на USEMAP, произойдет переход по ссылке на документ, заданный для этой области > |
BORDER |
Определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует |
HSPACE |
Задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом |
VSPACE |
Задает вертикальное расстояние между строками текста и изображением |
WIDTH , HEIGHT |
Задают значения размеров изображения по горизонтали и по вертикали соответственно |
Для описания таблиц используется тег <ТАВLЕ> . Строки таблицы задаются с помощью тегов <ТR></ТR> . Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD> . Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> . Эти теги подобны <ТD></ТD> , однако текст, заключенный между тегами <ТН></ТН> , автоматически выделяется жирным шрифтом и по умолчанию располагается посередине ячейки. Тег <CAPTION> позволяет создавать заголовки таблицы.
| Атрибут | Описание |
NOWRAP |
При использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку |
СОLSPAN |
Если требуется сделать какую-нибудь ячейку шире, чем верхняя или нижняя, то можно воспользоваться атрибутом СОLSPAN, чтобы расширить ее на любое количество обычных ячеек. |
ROWSPAN |
Подобен атрибуту СОLSPAN, только он задает число строк, на которые расширяется ячейка |
WIDТН |
Можно поместить его в тег <ТАВLЕ> , чтобы задать ширину всей таблицы, или можно использовать в тегах <ТD> или <ТН> , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. |
СЕLLРАDDING |
Определяет ширину пустого пространства между содержимым ячейки и ее границами |
АLIGN, VALIGN |
Теги <ТR> , <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали. VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. |
BORDER |
В теге <ТАВLЕ> определяет, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу |
СЕLLSPACING |
Определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам |
BGCOLOR |
Позволяет установить цвет фона. В зависимости от того, с каким тегом он применяется, цвет фона может быть установлен для всей таблицы ( TABLE ), для строки ( TR ) или для отдельной ячейки ( TD ). Значением данного атрибута является RGB -код или стандартное название цвета |
BACKGROUND |
Задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением |
Элемент FORM описывает форму на веб-странице и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT> , размещенных внутри пары <FORM> и </FORM>. В форме в качестве атрибутов для описания обработки данных, вводимых пользователем в форму используются как метод (method) и действие ( action ).
Тег <INPUT> используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.
| Тип элемента | Описание |
|---|---|
text |
Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут Имеет еще три дополнительных атрибута.
|
checkbox |
Применяется для создания флажков с независимым выбором. Должны также присутствоватьатрибуты NAME, и VALUE. В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED. |
radio |
Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений. Должны быть также указаны атрибуты NAME и VALUE. |
image |
Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Должны быть указаны также атрибуты NAME и SRC. Атрибут SRC содержит URI файла - источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG> . |
password |
Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены. |
button |
Используется для размещения кнопок на веб-странице. Имеет атрибуты NAME и VALUE. |
file |
Элемент управления для запуска диалогового окна выбора файла. Для задания имени файла по умолчанию можно использовать атрибут VALUE. |
submit |
Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: NAME и VALUE. |
reset |
Используется как элемент интерфейса для сброса всех введеных в поля формы данных. Дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки. |
hidden |
Позволяет включить в отправляемую форму значения атрибутов NAME и VALUE, недоступные для изменения пользователем. |
Тег <TEXTAREA> используется для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS (число колонок, содержащихся в текстовой области), NAME и ROWS (количество видимых строк текстовой области).
Тег SELECT используют для определения списка пунктов, задаваемых тегами <OPTION> . Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.
| Атрибут | Описание |
|---|---|
MULTIPLE |
Позволяет выбрать более чем одно наименование |
NAME |
Определяет наименование объекта |
SIZE |
Определяет число видимых пользователю пунктов списка |
В форме может использоваться тег <OPTION> только внутри тега <SELECT> . Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED используется для первоначального выбора значения элемента по умолчанию. Атрибут VALUE указывает на значение, возвращаемое формой после выбора пользователем данного пункта.
Пример:
<BR>Ваш выбор <SELECT NAME="choice"> <OPTION VALUE="Вариант 1">Вариант 1 <OPTION VALUE="Вариант 2">Вариант 2 <OPTION VALUE="Вариант 3">Вариант 3 <OPTION SELECTED>Вариант 4 </SELECT>
Экран с фреймами описывается в НТМL -странице, в контейнере FRAMESET. Содержимое фрейма - отдельная HTML -страница, которая может физически может находиться в другом месте где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой содержимого фреймов нет.
Пример:
<HTML> <HEAD> <TITLE>Пример фреймов</TITLE> </HEAD> <FRAMESET COLS="30%, 70%"> <FRAME SRC="menu.html"> <FRAME SRC="index.html" NAME="index"> </FRAMESET> </HTML>
Для того, чтобы при щелчке на ссылке со страницы menu.html загружались и отображались в правом окне другие страницы. следует добавить атрибут ТАRGET ( TARGЕТ="main" ) в тег этих ссылок. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме index. Если не определен атрибут ТАRGЕТ, то страница появится там, где щелкнули гиперссылку - т.е.в левом фрейме.
Если посетитель с устаревшим браузером окажется на вашей странице с фреймовой структурой, то все, что находится на ней между тегами < и </, будет выглядеть корректно - браузер просто проигнорирует фреймы.
У тега <FRAMESET> только два возможных атрибута: ROWS, задающий число строк, и СОLS, задающий число столбцов.
Тег <FRАМЕ> определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Тег <FRАМЕ> имеет следуюшие атрибуты: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE и SRC.
Первый черновик спецификации был опубликован в январе 2008 г. Спецификация сейчас находится в разработке. Предполагается, что отдельные части HTML 5 будут закончены и реализованы в веб-браузерах до того, как спецификация официально получит статус рекомендации.
В HTML 5 вводится несколько новых элементов и атрибутов, например < (навигационная панель) и <. Эти теги будут облегчать работу поисковым системам, а также обработку сайта с мобильных устройств или читающих программ. Другие элементы предоставляют новую функциональность, такие как <audio> и <video> .
Основные отличия HTML 5 от HTML 4:
footer ,section, video, audio, progress , nav , meter , time, aside, canvasinput -элементов;id, tabindex, repeat ;center, font, strike.HTML 5 разработан так, что не поддерживающие его браузеры могут просто игнорировать элементы HTML 5. В отличие от четвертой версии, пятая версия четко определяет правила лексического разбора, позволяющие различным браузерам отображать один и тот же результат в случае употребления некорректного синтаксиса разметки в документе.XHTML - язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума W3C в 2001 году.
Буква "X" в XHTML означает "расширяемый. Основные различия между XHTML и HTML показаны в Таблице 2.1.
HTML |
XHTML |
|---|---|
| Для элементов и атрибутов не различается регистр символов. | Для элементов и атрибутов различается регистр символов; они используют символы нижнего регистра |
Некоторым элементам не требуется закрывающий тег (например, параграфы, <p>), в то время как другие (называемые "пустыми элементами") запрещают закрывающий тег (например, изображения, <img> ). |
Все элементы должны быть явно закрыты . Элементы без содержимого могут быть закрыты с помощью косой черты в конце начального тега (например, <br/> ). Если XHTML обрабатывается как text/html, то необходимо использовать сокращенный синтаксис для всех элементов, которые определены как "пустой", и помещать пробел перед косой чертой. Необходимо использовать длинную форму (с раздельными начальным и конечным тегами) для любого элемента, не определенного как пустой - даже если он не имеет никакого контента. |
| Некоторые значения атрибутов могут записываться без кавычек. | Значения атрибутов должны быть заключены в кавычки |
Для некоторых атрибутов можно использовать сокращения (например, <option selected> ). |
Для всех атрибутов должна использоваться полная форма атрибута (например, <option selected="selected"> ) |
Серверы должны доставлять клиенту HTML документ с MIME типом text/html |
XHTML должен использовать MIME тип application/xhtml+xml, но может использовать application/xml, text/xml или text/html. |
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.