HTML – язык гипертекстовой разметки.
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.
HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.
XML (англ. eXtensible Markup Language — расширяемый язык разметки; произносится [экс-эм-э́л]) — рекомендованный Консорциумом Всемирной паутины язык разметки, фактически представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных (взамен существующих файлов баз данных), для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки (например, XHTML). XML является упрощённым подмножеством языка SGML.
XHTML (англ. Extensible Hypertext Markup Language — расширяемый язык разметки гипертекста) — семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями консорциума Всемирной паутины.
Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются.
XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. HTML обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что и закреплено в черновике спецификации HTML 5.
Браузер выбирает парсер для обработки документа на основании заголовка content-type, полученного от сервера:
HTML – text/html
XHTML – application/xhtml+xml
Для локального просмотра на клиенте выбор основывается на расширении файла.
В Internet Explorer вплоть до 8-й версии парсер обработки XHTML-документов отсутствует.
Вопреки мнению начинающих разработчиков, декларация DOCTYPE не оказывает никакого влияния на определение парсера для обработки.
Различия между xhtml и html
Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце / (например, <br />).
Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected"> или <td nowrap="nowrap">.
Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" />).
XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.
Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).
Для XHTML страниц рекомендуется задавать MIME-тип — application/xhtml+xml, но это не является обязательным, более того — браузер Internet Explorer 8 и младшие версии, не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME-тип для HTML — text/html.
Также стандарт рекомендует указание <?xml version="1.0" encoding="utf-8"?> перед DTD, но это не обязательно, более того — браузер Internet Explorer воспринимает такое указание (как и любой другой текст перед <!DOCTYPE>), как признак того, что данную страницу необходимо отображать в режиме обратной совместимости, а не согласно стандарту. Существует три типа документов XHTML: strict, transitional и frameset. Наиболее употребительной и универсальной из версий XHTML является переходная (англ. transitional), поскольку она позволяет использовать iframe (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Фреймовая версия (англ. frameset) представляет собой расширенный вариант transitional и добавляет к нему, как следует из названия, возможность установки frameset вместо body. DTD строгой версии XHTML (англ. strict) не содержит многих тегов и атрибутов, описанных в DTD transitional, и признанных устаревшими.
Список тегов:
|
Базисные элементы. |
|
Тип документа |
<HTML></HTML> |
(начало и конец файла) |
|
Имя документа |
<TITLE></TITLE> |
(должно быть в заголовке) |
|
Заголовок |
<HEAD></HEAD> |
(описание документа) |
|
Тело |
<BODY></BODY> |
(содержимое страницы) |
|
Определение структуры. |
|
Заглавие |
<H?></H?> |
(стандарт определяет 6 уровней) |
|
с выравниванием |
<H? ALIGN=LEFT|CENTER|RIGHT> </H?> |
|
|
Секция |
<DIV></DIV> |
|
|
с выравниванием |
<DIV ALIGN=LEFT|RIGHT|CENTER> </DIV> |
|
|
Цитата |
<BLOCKQUOTE></BLOCKQUOTE> |
(обычно выделяется отступом) |
|
Выделение |
<EM></EM> |
(обычно изображается курсивом) |
|
Дополнительное выделение |
<STRONG></STRONG> |
(обычно изображается жирным шрифтом) |
|
Отсылка, цитата |
<CITE></CITE> |
(обычно курсив) |
|
Код |
<CODE></CODE> |
(для листингов кода) |
|
Пример вывода |
<SAMP></SAMP> |
|
|
Ввод с клавиатуры |
<KBD></KBD> |
|
|
Переменная |
<VAR></VAR> |
|
|
Определение |
<DFN></DFN> |
(часто не поддерживается) |
|
Адрес автора |
<ADDRESS></ADDRESS> |
|
|
Большой шрифт |
<BIG></BIG> |
|
|
Маленький шрифт |
<SMALL></SMALL> |
|
|
Внешний вид. |
|
Жирный |
<B></B> |
|
|
Курсив |
<I></I> |
|
|
Подчеркнутый |
<U></U> |
(часто не поддерживается) |
|
Перечеркнутый |
<STRIKE></STRIKE> |
(часто не поддерживается) |
|
Перечеркнутый |
<S></S> |
(часто не поддерживается) |
|
Верхний индекс |
<SUP></SUP> |
|
|
Нижний индекс |
<SUB></SUB> |
|
|
Печатная машинка |
<TT></TT> |
(изображается как шрифт фиксированой ширины) |
|
Форматированый |
<PRE></PRE> |
(сохранить формат текста как есть) |
|
Ширина |
<PRE WIDTH=?></PRE> |
(в символах) |
|
Центрировать |
<CENTER></CENTER> |
(как текст, так и графика) |
|
Мигающий |
<BLINK></BLINK> |
(наиболее осмеянный элемент) |
|
Размер шрифта |
<FONT SIZE=?></FONT> |
(от 1 до 7) |
|
Изменить размер шрифта |
<FONT SIZE="+|-?"></FONT> |
|
|
Базовый размер шрифта |
<BASEFONT SIZE=?> |
(от 1 до 7; по умолчанию 3) |
|
Цвет шрифта |
<FONT COLOR="#$$$$$$"></FONT> |
|
|
Выбор шрифта |
<FONT FACE=" *"></FONT> |
|
|
Многоколоночный текст |
<MULTICOL COLS=?></MULTICOL> |
|
|
Пробел между колонками |
<MULTICOL GUTTER=?></MULTICOL> |
(по умолчанию 10 точек) |
|
Ширина колонки |
<MULTICOL WIDTH=?></MULTICOL> |
|
|
Пустой блок |
<SPACER> |
|
|
Тип пустого блока |
<SPACER TYPE=horizontal|vertical| block> |
|
|
Величина пустого блока |
<SPACER SIZE=?> |
|
|
Размеры пустого блока |
<SPACER WIDTH=? HEIGHT=?> |
|
|
Выравнивание |
<SPACER ALIGN=left|right|center> |
|
|
Ссылки и графика. |
|
Ссылка |
<A HREF="URL"></A> |
|
|
Ссылка на закладку |
<A HREF="URL# *"></A> |
(в другом документе) |
|
<A HREF="# *"></A> |
(в том же документе) |
|
|
На другое окно |
<A HREF="URL" TARGET=" *| |_blank|_self|_parent|_top"> </A> |
|
|
Определить закладку |
<A NAME=" *"></A> |
|
|
Отношение |
<A REL=" *"></A> |
(часто не поддерживается) |
|
Обратное отношение |
<A REV=" *"></A> |
(часто не поддерживается) |
|
Графика |
<IMG SRC="URL"> |
|
|
Выравнивание |
<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT| RIGHT> |
|
|
Выравнивание |
<IMG SRC="URL"ALIGN=TEXTTOP|ABSMIDDLE| BASELINE|ABSBOTTOM> |
|
|
Альтернатива |
<IMG SRC="URL" ALT=" *"> |
(выводится если картинка не изображается) |
|
Карта |
<IMG SRC="URL" ISMAP> |
(нужна также программа) |
|
Локальная карта |
<IMG SRC="URL" USEMAP="URL"> |
|
|
Определение карты |
<MAP NAME=" *"></MAP> |
|
|
Области карты |
<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> |
|
|
Размеры |
<IMG SRC="URL" WIDTH=? HEIGHT=?> |
(в точках) |
|
Окантовка |
<IMG SRC="URL" BORDER=?> |
(в точках) |
|
Отступ |
<IMG SRC="URL" HSPACE=? VSPACE=?> |
(в точках) |
|
Заменитель в низком разрешении |
<IMG SRC="URL" LOWSRC="URL"> |
|
|
Обновить |
<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> |
|
|
Включить об'ект |
<EMBED SRC="URL"> |
(вставить об'ект в страницу) |
|
Размер об'екта |
<EMBED SRC="URL" WIDTH=? HEIGHT=?> |
|
|
Разделители. |
|
Параграф |
<P></P> |
(закрывать элемент часто не обязательно) |
|
Выравнивание |
<P ALIGN=LEFT|CENTER|RIGHT> </P> |
|
|
Новая строка |
<BR> |
(одиночный перевод строки) |
|
Убрать выравнивание |
<BR CLEAR=LEFT|RIGHT|ALL> |
|
|
Горизонтальный разделитель |
<HR> |
|
|
Выравнивание |
<HR ALIGN=LEFT|RIGHT|CENTER> |
|
|
Толщина |
<HR SIZE=?> |
(в точках) |
|
Ширина |
<HR WIDTH=?> |
(в точках) |
|
Ширина в процен- тах |
<HR WIDTH="%"> |
(в процентах) |
|
Сплошная линия |
<HR NOSHADE> |
(без трехмерных эффектов) |
|
Нет разбивки |
<NOBR></NOBR> |
(запрещает перевод строки) |
|
Перенос |
<WBR> |
(разбить строку) |
|
Списки. |
|
Неупорядоченный |
<UL><LI></UL> |
(<LI> перед каждым элементом) |
|
Компактный |
<UL COMPACT></UL> |
|
|
Тип метки |
<UL TYPE=DISC|CIRCLE|SQUARE> |
(для всего списка) |
|
<LI TYPE=DISC|CIRCLE|SQUARE> |
(этот и последующие) |
|
|
Нумерованый |
<OL><LI></OL> |
(<LI> перед каждым элементом) |
|
Компактный |
<OL COMPACT></OL> |
|
|
Тип нумерации |
<OL TYPE=A|a|I|i|1> |
(для всего списка) |
|
<LI TYPE=A|a|I|i|1> |
(этот и следующие) |
|
|
Первый номер |
<OL START=?> |
(для всего списка) |
|
<LI VALUE=?> |
(этот и следующие) |
|
|
Список определений |
<DL><DT><DD></DL> |
(<DT>=термин,<DD>= определение) |
|
Компактный |
<DL COMPACT></DL> |
|
|
Меню |
<MENU><LI></MENU> |
(<LI> перед каждым элементом) |
|
Компактное |
<MENU COMPACT></MENU> |
|
|
Каталог |
<DIR><LI></DIR> |
(<LI> перед каждым элементом) |
|
Компактный |
<DIR COMPACT></DIR> |
|
|
Фон и цвета. |
|
Фоновая картинка |
<BODY BACKGROUND="URL"> |
|
|
Цвет фона |
<BODY BGCOLOR="#$$$$$$"> |
(порядок: красный/ зеленый/ синий) |
|
Цвет текста |
<BODY TEXT="#$$$$$$"> |
|
|
Цвет ссылки |
<BODY LINK="#$$$$$$"> |
|
|
Пройденная ссылка |
<BODY VLINK="#$$$$$$"> |
|
|
Активная ссылка |
<BODY ALINK="#$$$$$$"> |
|
|
Специальные символы. (обязаны быть в нижнем регистре) |
|
Специальный символ |
&#?; |
(это код ISO 8859-1) |
|
< |
< |
|
|
> |
> |
|
|
& |
& |
|
|
" |
" |
|
|
Торговая марка ТМ |
® |
|
|
Copyright |
© |
|
|
Неразделяющий пробел |
|
|
|
Формы. |
|
Определить форму |
<FORM ACTION="URL" METHOD=GET|POST></FORM> |
|
|
Посылка файла |
<FORM ENCTYPE="multipart/form-data"></FORM> |
|
|
Поле ввода |
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX| RADIO|IMAGE|HIDDEN|SUBMIT| RESET"> |
|
|
Имя поля |
<INPUT NAME=" *"> |
|
|
Значение поля |
<INPUT VALUE=" *"> |
|
|
Отмечен |
<INPUT CHECKED> |
(checkboxes и radio boxes) |
|
Размер поля |
<INPUT SIZE=?> |
(в символах) |
|
Максимальная длина |
<INPUT MAXLENGTH=?> |
(в символах) |
|
Список вариантов |
<SELECT></SELECT> |
|
|
Имя списка |
<SELECT NAME=" *"></SELECT> |
|
|
Число вариантов |
<SELECT SIZE=?></SELECT> |
|
|
Множественний выбор |
<SELECT MULTIPLE> |
(можно выбрать больше одного) |
|
Опция |
<OPTION> |
(элемент который может быть выбран) |
|
Опция по умолчанию |
<OPTION SELECTED> |
|
|
Ввод текста, размер |
<TEXTAREA ROWS=? COLS=?> </TEXTAREA> |
|
|
Имя текста |
<TEXTAREA NAME=" *"></TEXTAREA> |
|
|
Разбивка на строки |
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA> |
|
|
Таблицы. |
|
Определить таблицу |
<TABLE></TABLE> |
|
|
Окантовка таблицы |
<table border=?></TABLE> |
|
|
Расстояние между ячейками |
<TABLE CELLSPACING=?> |
|
|
Дополнение ячеек |
<TABLE CELLPADDING=?> |
|
|
Желаемая ширина |
<TABLE WIDTH=?> |
(в точках) |
|
Ширина в процентах |
<TABLE WIDTH="%"> |
(проценты от ширины страницы) |
|
Строка таблицы |
<TR></TR> |
|
|
Выравнивание |
<TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM> |
|
|
Ячейка таблицы |
<TD></TD> |
(должна быть внутри строки) |
|
Выравнивание |
<TD ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM> |
|
|
Без перевода строки |
<TD NOWRAP> |
|
|
Растягивание по колонке |
<TD COLSPAN=?> |
|
|
Растягивание по строке |
<TD ROWSPAN=?> |
|
|
Желаемая ширина |
<TD WIDTH=?> |
(в точках) |
|
Ширина в процентах |
<TD WIDTH="%"> |
(проценты от ширины страницы) |
|
Цвет ячейки |
<TD BGCOLOR="#$$$$$$"> |
|
|
Заголовок таблицы |
<TH></TH> |
(как данные, но жирный шрифт и центровка) |
|
Выравнивание |
<TH ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM> |
|
|
Без перевода строки |
<TH NOWRAP> |
|
|
Растягивание по колонке |
<TH COLSPAN=?> |
|
|
Растягивание по строке |
<TH ROWSPAN=?> |
|
|
Желаемая ширина |
<TH WIDTH=?> |
(в точках) |
|
Ширина в процентах |
<TH WIDTH="%"> |
(проценты ширины таблицы) |
|
Цвет ячейки |
<TH BGCOLOR="#$$$$$$"> |
|
|
Заглавие таблицы |
<CAPTION></CAPTION> |
|
|
Выравнивание |
<CAPTION ALIGN=TOP|BOTTOM> |
(сверху/снизу таблицы) |
|
Фреймы. |
|
Документ с фреймами |
<FRAMESET></FRAMESET> |
(вместо <BODY>) |
|
Высота строк |
<FRAMESET ROWS=,,,></FRAMESET> |
(точки или %) |
|
Высота строк |
<FRAMESET ROWS=*></FRAMESET> |
(* = относительный размер) |
|
Ширина колонок |
<FRAMESET COLS=,,,></FRAMESET> |
(точки или %) |
|
Ширина колонок |
<FRAMESET COLS=*></FRAMESET> |
(* = относительный размер) |
|
Ширина окантовки |
<FRAMESET BORDER=?> |
|
|
Окантовка |
<FRAMESET FRAMEBORDER="yes|no"> |
|
|
Цвет окантовки |
<FRAMESET BORDERCOLOR="#$$$$$$"> |
|
|
Определить фрейм |
<FRAME> |
(содержание отдельного фрейма) |
|
Документ |
<FRAME SRC="URL"> |
|
|
Имя фрейма |
<FRAME NAME=" *"|_blank|_self| _parent|_top> |
|
|
Ширина границы |
<FRAME MARGINWIDTH=?> |
(правая и левая границы) |
|
Высота границы |
<FRAME MARGINHEIGHT=?> |
(верхняя и нижняя границы) |
|
Скроллинг? |
<FRAME SCROLLING="YES|NO|AUTO"> |
|
|
Постоянный размер |
<FRAME NORESIZE> |
|
|
Окантовка |
<FRAME FRAMEBORDER="yes|no"> |
|
|
Цвет окантовки |
<FRAME BORDERCOLOR="#$$$$$$"> |
|
|
Содержание без фреймов |
<NOFRAMES></NOFRAMES> |
(для просмотрщиков не поддерживающих фреймы) |
|
Язык JAVA. |
|
Applet |
<APPLET></APPLET> |
|
|
Applet - имя файла |
<APPLET CODE=" *"> |
|
|
Параметры |
<APPLET PARAM NAME=" *"> |
|
|
Applet - адрес |
<APPLET CODEBASE="URL"> |
|
|
Applet - имя |
<APPLET NAME=" *"> |
(для ссылок из других частей страницы) |
|
Альтернативный текст |
<APPLET ALT=" *"> |
(для программ не поддерживающих Java) |
|
Выравнивание |
<APPLET ALIGN="LEFT|RIGHT|CENTER"> |
|
|
Размеры |
<APPLET WIDTH=? HEIGHT=?> |
(в точках) |
|
Отступ |
<APPLET HSPACE=? VSPACE=?> |
(в точках) |
|
Разное. |
|
Комментарий |
<!-- * --> |
(игнорируется просмотрщиком) |
|
Пролог HTML 3.2 |
<!DOCTYPE HTML PUBLIC "/W3C//DTD HTML 3.2//EN"> |
|
|
Поиск |
<ISINDEX> |
(означает начальную точку поиска) |
|
Приглашение |
<ISINDEX PROMPT=" *"> |
(текст приглашения для поля ввода) |
|
Запустить поиск |
<A HREF="URL? *"></a> |
(используйте действительно знак вопроса) |
|
URL этого файла |
<BASE HREF="URL"> |
(должно быть в заголовке) |
|
Имя базового окна |
<BASE TARGET=" *"> |
(должно быть в заголовке) |
|
Отношение |
<LINK REV=" *" REL=" *" HREF="URL"> |
(должно быть в заголовке) |
|
Метаинформация |
<META> |
(должно быть в заголовке) |
|
Стили |
<STYLE></STYLE> |
|
|
Программа |
<SCRIPT></SCRIPT> |
|
Реда́ктор HTML или HTML-реда́ктор — компьютерная программа, позволяющая создавать и изменять HTML-страницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности. По своей функциональности они делятся (часто весьма условно) на две категории:
Редактор показывает только исходный код.
Редактор показывает готовую страницу в режиме WYSIWYG (что видишь, то и получишь).
Многие WYSIWYG-редакторы позволяют одновременно работать и с кодом страницы.
Хоть это и указано выше, вынесу как повторение, опираясь на план.
Заголовки
Для задания названий разделов и подразделов используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:
< H1>< /H1>, < H2>< /H2>, < H3>< /H3>, < H4>< /H4>, < H5>< /H5>, < H6>< /H6>.
Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок < H1>< /H1> (им выделено название этого урока), а самый маленький < H6>< /H6>. Теги заголовков имеют атрибуты:
align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);
title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.
Например, код HTML:
< h4 align="center" title="Заголовок 4 уровня">Заголовок 4 уровня< /h4>
body лучше рассматривать на примере.
Рассмотрим пример документа HTML: <html> <head> <title>Это заголовок страницы</title> </head> <body> <h1>Здравствуйте!</h1> <p>Это моя первая страница HTML. <strong>Этот текст выводится жирным шрифтом.</strong></p> </body> </html> Элементом HTML является: <h1>Здравствуйте!</h1> Этот элемент начинается с тега <h1>, имеет содержимое "Здравствуйте!" и заканчивается тегом </h1>. Также элементом HTML, является: <p>Это моя первая страница HTML. <strong>Этот текст выводится жирным шрифтом.</strong></p> Этот элемент, начинается с начального тега <p>, заканчивается конечным тегом </p> и означает, что содержимое элемента "Это моя первая страница HTML. <strong>Этот текст выводится жирным шрифтом.</strong>" является отдельным параграфом. При этом внутри этого элемента находится другой элемент: <strong>Этот текст выводится жирным шрифтом.</strong> Этот элемент HTML начинается с начального тега: <strong> Содержимым элемента HTML является: Этот текст выводится жирным шрифтом. Этот элемент HTML заканчивается конечным тегом </strong>. Назначение тега <strong> состоит в определении элемента HTML, который должен выводиться жирным шрифтом. Все описанные элементы HTML содержатся в элементе: <body> <h1>Здравствуйте!</h1> <p>Это моя первая страница HTML. <strong>Этот текст выводится жирным шрифтом.</b></strong> </body> Этот элемент HTML начинается с начального тега <body>, и заканчивается конечным тегом </body>. Назначение тега <body> состоит в определении элемента HTML, который содержит основную часть (или тело) документа HTML.
Элементы стиля. Указаны выше в таблице. И далее до «форм»
Элементы textarea
Элемент TEXTAREA должен располагаться внутри элемента FORM.
Атрибуты
NAME - обязательный атрибут. Определяет название, которое будет использоваться при идентификации заполненого поля сервером.
ROWS - определяет количество строк текста, видимых на экране.
COLS - определяет ширину текстового поля - в печатных символах.
WRAP - определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения:
off - перенос слов не происходит (значение по умолчанию)