Язык разметки гипертекста HTML

HTML (HyperText Markup Language, язык разметки гипертекста) определяет, как и какие элементы должны располагаться на веб-странице. HTML не является языком программирования, это язык разметки документов (гипертекста). HTML определяет логическую структуру документа. Отметим, что в HTML имеются элементы(например font ), отвечающие за внешний вид (отображение) документа. Однако эти элементы крайне не рекомендуется использовать в HTML. Вид отображения документов устанавливается средствами CSS.

HTML отвечает за струстуру, CSS – внешний вид.

Стандарт HTML, как и другие стандарты для веб, разработан под руководством консорциума World Wide Web (World Wide Web Consortium, W3C). Стандарты и спецификации, в том числе и для языка HTML, можно найти на сайте World Wide Web Consortium http://www.3w.org

Сущестует несколько версий HTML. В 1999 году вышла последняя редакция языка - HTML 4.01. Эту версию часто называют динамический HTML (DHTML). DHTML использует объектную модель документа (DOM), которая описывает способ организации и названия объектов в браузере, а также определяет, какие объекты и свойства могут быть изменены и какие значения они могут принимать. Событийная модель описывает способ передачи управления сценариям, для реализации которых может быть использован язык сценариев JavaScript. С использованием динамического HTML сценарии могут вставлять, удалять и заменять блоки HTML. Браузер автоматически обновляет новые свойства и новый HTML-код.

Объявленная версия HTML 5.0 до настоящего времени (2012г.) не сертифицирована, хотя и полностью реализована.

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

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

Разметка гипертекста средствами HTML происходит путем вставки в текст тегов (дескрипторов) — специальных кодовых слов, определяющих элементы форматирования. Для того чтобы теги отличались от остального текста, их заключают между знаками "больше" и "меньше", например: <b>, <a>, <img>. Рассмотрим пример:

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

<html>

<head>

<title>Моя первая веб-страница</title>

</head>

<body>

<h1>Заголовок страницы</h1>

<p align=center>Основной текст.</p>

</body>

</html>

Дескрипторы бывают контейнерные (парные) и неконтейнерные (одинарные). Контейнерный дескриптор состоит из двух частей — открывающего(старт-тега) и закрывающего(стоп-тега), — между которыми находится форматируемый текст, например:

<html> текст html документа </html>

Закрывающий тег отличается от открывающего наличием косой черты. Контейнерные теги бывают вложенными, например:

<i> курсив <b> жирный курсив </b> курсив </i>

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

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

DOCTYPE.

В начале html – документа помещается тег DOCTYPE, содержащий информацию о типе документа и используемой версии HTML. Указание типа документа позволяет браузеру проверить структуру документа на соответствие этим правилам и правильно его отобразить. В HTML существуют три варианта правил (dtd – описаний, загружаемых с сайта w3.org) HTML 4.01, устанавливаемых в DOCTYPE: Strict, HTML 4.01Transitional и HTML 4.01Frameset.

Строгий (Strict)- не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated), например:

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

Переходный (Transitional) –может содержать устаревшие теги в целях совместимости для старых версий HTML:

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

С фреймами (Frameset) – может содержать теги для создания наборов фреймов:

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

Для последней версии HTML5 элемент DOCTYPE выглядит наиболее просто

<!DOCTYPE html>

Теги, атрибуты, значения

За названием тега через пробел могут помещатся атрибуты(параметры) тега и их значения.

<тег атрибут1=”значение” атрибут2=”значение”> Теги или Текст </тег>

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

· после имени открывающего тега через пробел могут следовать атрибуты

· атрибуты отделяют друг от друга пробелами

· порядок следования атрибутов произволен

· значения атрибутов записывают в ординарных или двойных кавычках после знака равенства

Спецификация html позволяет опускать кавычки, если значение атрибута состоит из одного слова из латинских букв и цифр. Если значение содержит несколько слов, разделенных запятыми или пробелами, либо специальные символы, то кавычки обязательны. В качестве примера приведем атрибут align=left|right| center. Этот атрибут может использоваться вместе с большим числом тегов и используется для выравнивания гипертекста.

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

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

Любой html-документ заключается между тегами <html> и </html>, т.е. тег <html> открывает документ, а тег </html> закрывает его. Между этими двумя основными тегами располагается заголовочная часть документа <head> и его тело <body>.

<html>

<head>

</head>

<body>

</body>

</html>

Заголовочная часть документа <head>

Тег заголовочной части документа используется сразу после тега <html>. Данный тег описывает общие правила отображения документа в браузере, содержит вспомогательную информацию о документе, а также информацию для индексирования документа поисковыми машинами. Тег meta содержит служебную информацию, не отображаемую в окне браузера. Подробнее этот тег будет рассмотрен ниже.

Заголовок документа, ограниченный тегами <title> и </title>, отображается вверху экрана, отдельно от содержимого документа. Рассмотрим пример:

<html>

<head>

<title> Иванов И.И. </title>

</head>

<body>

Моя первая HTML-страница!

</body>

</html>

Тело документа <body>

Тело документа служит контейнером для контента сайта, а также параметров отображения сайта и размещается между тегами <body> и </body>. Это та часть документа, которая отображается как текстовая и графическая информация документа. Технически стартовые и завершающие теги типа <html>, <head> и <body> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет Web-браузеру разделить заголовочную и смысловую часть документа.

<html>

<head>

<title>Домашняя страница </title>

</head>

<body>

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

<p> абзац </p>

</body>

</html>

Тег <body> может иметь атрибуты, которые в настоящее время являются устаревшими. Вместо них рекомендуется использовать таблицы стилей CSS. Атрибуты тега <body>:

Атрибуты	Описание
background	Атрибут задает графическое изображение, которое как черепица заполнит фон документа: body background="(url)(путь) имя файла"> Если файл с изображением разместить в том же каталоге, то (путь) указывать не нужно. Файл хранится в формате GIF или JPEG . Допускается использовать анимированное gif-изображение
bgcolor	задает цвет фона при помощи шестнадцатеричных значений интенсивности цветов RGB, или при помощи литерала. Синтаксис: <body bgcolor="#ff0000"> или <body bgcolor="red">
text	задает используемый цвет текста. По умолчанию текст будет черным. Синтаксис: <body text=" цвет ">
link	задает цвет гиперссылки (по умолчанию темно синий). Синтаксис: <body link="цвет" >
alink	задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью. Синтаксис: <body alink="цвет" >
vlink	задает цвет посещенной гиперссылки: <body vlink="цвет" >
topmargin	задает верхнюю границу страницы в пикселях: <body topmargin=”число”>
bottommargin	задает нижнюю границу страницы : <body bottommargin=”число”>
leftmargin	задает границу страницы слева: <body leftmargin=”число”>
rightmargin	задает границу страницы справа: <body rightmargin=”число”>

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

В следующем примере рассматривается документ в формате HTML 5. Отличие от HTML 4.01 начинаются в теге <!DOCTYPE HTML>

<!DOCTYPE html>

<html>

<head>

<title> Html-5 документ, заголовок</title>

</head>

<body>

<nav>Навигация</nav>

Секция

</section>

</article>

<footer>Подвал</footer>

</body>

В HTML5 введено несколько тегов для улучшения структуры документа:

header: в этом теге, конечно, лучше размещать заголовок секции;

footer: футер(подвал);

nav: для навигации появился отдельный тег;

section: тег относится к описанию части документа, и может использоваться с тегами h1-h6, а также быть частью статьи;

article: в теге лучше всего описывать запись в блоге или новостную заметку;

aside: в этом теге предлагается описывать некие данные, которые в целом не связаны с основным контентом страницы;

dialog: этим тегом может быть отмечен какой-либо разговор или интервью;

figure: в этом теге рекомендовано заключать встраиваемый контент – к примеру, видео, графику или аудио.

Язык разметки гипертекста HTML - student2.ru

Чтобы новые элементы HTML5 отображались правильно как элементы уровня блоков, необходимо назначить им стиль:

header, footer, article, section, nav, menu, hgroup {

display: block;

}

HTML 5 вводит несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами ‹div› и ‹span›, но имеют своё семантическое значение, например ‹nav› (навигационная панель) и ‹footer›. Другие элементы предоставляют новую функциональность, такие как ‹audio› и ‹video›. HTML 5 разработан так, что не поддерживающие его браузеры могут игнорировать элементы HTML 5. В отличие от четвёртой, пятая версия чётко прописывает правила лексического разбора, чтобы различные браузеры отображали один и тот же результат в случае некорректного синтаксиса. Некоторые устаревшие элементы HTML 4, такие как ‹font› и ‹center›, были удалены из HTML 5.
Пример веб-страницы HTML 5

<!DOCTYPE html>

<html>

<head>

<title> Html-5 документ, заголовок</title>

</head>

<body>

<h3>Header - Демонстрация</h3> <h6>Демонстрационный сайт</h6>

</hgroup>

</header>

<nav>

<ul>

<lh>Навигация</lh>

</ul></nav>

<article> <h1>Article</h1>

<h1>Секция-session</h1>

</section>

</article>

<aside><h1>Aside</h1></aside>

<footer><h1>Подвал-footer</h1>

</footer>

</body>

Результат:

Язык разметки гипертекста HTML - student2.ru

Romanchik Valery

Форматирование текста в HTML

Текстовый документ отображается браузером с некоторыми особенностями.

Любое количество пробелов идущих подряд, отображается как один. Лишние пробелы не изменят вид документа в браузере. Исключением является тег <pre> </pre>, внутри которого любое число пробелов отображается так, как оно указано в коде. Это же правило относится к и переносам. HTML не поддерживает расстановку переносов в словах. Короткие строки для выравнивания могут растягиваться за счет автоматического добавления пробелов между словами. Текст занимает ширину окна браузера. Длинная строка будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса.

Абзац <p>

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

Для выравнивания абзаца — по левому краю, по правому краю, по центру и по ширине — используется атрибут дескриптора <p> — align, принимающий значение left, right, center и justify, соответственно. Так, для выравнивания абзаца по центру используется следующий код:

Пример:

<title>Применение абзацев</title>

</head>

<body>

<p align = “center”> Абзац, выровненный по центру. </p>

<p align = “left”> Абзац, выровненный по левому краю. </p>

<p align = “ justify ”> Абзац, выровненный по ширине. </p> </body>

</html>

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

Разрыв строки

Тег <br> извещает браузер о разрыве строки и не добавляет пустой отступ перед строкой. Атрибут тега <br> clear позволяет при обтекании текстом изображения, выполнить обтекание слева (left), справа (right) или обеих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тег <br clear=”left”> для смещения текста ниже рисунка.

Если не требуется, чтобы браузер автоматически переносил какую – то определенную строку, то можно обозначить ее тегами <nobr> и </nobr>. В этом случае браузер не будет переносить строку, даже если она выходит за границы экрана. Вместо этого браузер позволит горизонтально прокручивать окно. Например: <nobr>. Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </nobr>. Если вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тег <wbr> в это место. Например: <nobr>. Данная строка является самой длинной строкой документа <wbr>, которая не допускает какого-либо разбиения где бы то ни было </nobr>.

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

Устаревший тег <center> предназначен для выравнивания текста по центру. Более современный тег <div> </div> может использоваться для выравнивания блока вместе с атрибутом align=center или style для css.

Предварительное форматирование

Дополнительные пробелы, символы табуляции и возврата каретки в исходном тексте HTML-документа будут проигнорированы Web-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тегов <pre> и </pre>. Эти теги используются, чтобы текст выглядел так, как был набран.

Заголовок <hn>

Для выделения заголовков более крупным и жирным шрифтом в HTML используются теги <hn>, где n — цифра от 1 до 6. Заголовок 1 уровня выводится самым крупным шрифтом, заголовок 6 уровня — самым мелким. Заголовки и следующий за ними текст всегда начинается с новой строки. Для форматирования заголовков используется атрибут align, для которого предусмотрены только три значения — left, right и center. Теги заголовков, в отличие от тегов абзаца <p>, обязательно нужно закрывать. Иначе весь текст до конца страницы по умолчанию будет считаться заголовком соответствующего уровня.

Пример:

<html>

<head>

<title>Применение абзацев</title>

</head>

<body>

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

<h4>Заголовок четвертого уровня</h4>

<h5>Заголовок пятого уровня</h5>

<h6>Заголовок шестого уровня</h6>

</body>

</html>

Комментарии

Для удобства чтения и правки кода, не меняя при этом вид страницы в браузере, используются комментарии. Комментарий в HTML-коде заключается между символами :

Физическая и логическая разметка документа

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

«Физические» теги:

Тег	Значение
<i>...</i>	Курсив (Italic)
<b>...</b>	Жирное начертание шрифта (Вold)
<big>...</big>	Увеличенный размер шрифта
<small>...</small>	Уменьшенный размер шрифта
<sub>...</sub>	Подстрочные символы
<sup>...</suр>	Надстрочные символы

Пример:

<html>

<head>

<title> Создание жирного текста</title>

<body>

<b><small>Текст маленький и жирный < /small></ b>

<p>Надстрочные <sup> символы </suр></p>

</body>

</html>

Используемые ранее для форматирования текста теги <u>, <s>,<tt> являются устаревшими и не рекомендуемыми к использованию в настоящее время.

«Логические» теги:

Тег	Значение
<ем>...</ем>	Типографское усиление
<strong>...</strong>	Усиление
<сode>...</сode>	Отображает примеры кода (например, "коды программ")
<sамр>...</sамр>	Последовательность литералов
<квd>...</квd>	Пример ввода символов с клавиатуры
<var>...</var>	Переменная
<dfn>...</dfn>	Определение
<q>...</q>	Текст, заключенный в двойные кавычки

Несмотря на то, что многие "логические" теги дублируют друг друга в смысле внешних эффектов, они полезны: благодаря им, во-первых, упрощается анализ страницы поисковыми системами, а во-вторых, достигается единообразие оформления страниц и их соответствие полиграфическим правилам и традициям.

Тег <font>

Теги <font > , <basefont> , center относятся к отображению документов и являются устаревшими. Их использование вместо CSS крайне нежелательно. Здесь они приведены в историческом плане для случаев рассмотрения старых версий документов.

<font color=”red” size=”+3”>Текст красного цвета, шрифт на 3 единицы крупнее предыдущего </font>

Специальные символы

Символы, которые не могут быть введены в текст документа непосредственно через клавиатуру, называются специальными символами. Четыре символа – знак меньше <, знак больше >, амперсант & и двойные кавычки “” имеют специальное значение внутри HTML и, следовательно, не могут быть использованы в тексте в своем обычном значении. Для таких символов существуют особые теги.

Специальный символ
<	<
>	>
&	&
"	"
Торговая марка ТМ	®
Copyright	©
Неразделяющий пробел

Линии

Тег <hr> проводит контурную горизонтальную линию (опция shade по умолчанию). Например:

<hr noshade> – горизонтальная линия с тенью;

Тег <hr> имеет атрибут align, который задает выравнивание по левому краю - left, центру - center или по правому краю – right.

Атрибут size устанавливает толщину линии в n пикселей, где n от 1 до 175 (по умолчанию n=2).

Пример:

Пример:

<html>

<head><title>примеры горизонтальных линий </title></head>

<body>

<b> Стандартная линия, задаваемая тегом &lthr&gt: </b>

<hr>

<p>

<b> Линия, заданная тегом &lthr&gt с параметром noshade: </b>

<b> Линия шириной 50% и с выравниванием по левому краю: </b>

<b> Линия шириной 25% и с выравниванием по центру: </b>

<p>

<b>Линия шириной 75% с выравниванием по правому краю:</b>

</body>

</html>

Графика

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

Задавая путь, нужно руководствоваться правилами, принятыми для записи URL. Эти правила отличаются от правил записи пути к файлу в ОС Windows. В частности, имена папок и файлов разделяются не обратными, а прямыми слешами. Строчные и прописные буквы различаются. Кроме того, в именах файлов, передаваемых по интернет, не рекомендуется использовать пробелы и кириллицу. Пример: загрузка изображения из каталога уровнем выше:

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

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

Для определения способа обтекания графики текстом используется параметр align. Этот параметр описывает выравнивание не только по горизонтали — по левому краю (значение left) или по правому краю (значение right), — но и по вертикали относительно той строки, в которой размещено изображение. Значение absbottom соответствует выравниванию по нижним выступающим элементам букв в строке, baseline и bottom — по нижнему краю строки, absmiddle и middle — по середине, texttop — по верхнему краю и top — по верхним выступающим элементам. Для отмены обтекания изображения текстом используется тег <br> с параметром clear, который принимает значения right (отмена обтекания справа), left (отмена обтекания слева) и all (отмена всех типов обтекания).

Для отделения изображения от текста используются два средства — рамки и отступы. Атрибут border определяет толщину рамки в пикселях. Цвет такой рамки всегда черный. Для создания более сложных рамок следует использовать графический редактор. Горизонтальный и вертикальный отступы между изображением и текстом задаются в пикселях с помощью параметров hspace и vspace.

Изображения для интернета обычно хранятся в файлах форматов GIF и JPEG. В формате JPEG сохраняются полноцветные изображения, в частности качественные фотографии. В формате GIF хранятся изображения с ограниченным количеством цветов, а также анимированные изображения и изображения с прозрачным фоном. Кроме того, в Web-дизайне широко применяется GIF-изображение, представляющее собой 1 пиксель прозрачного "цвета". С его помощью можно, в частности, регулировать расстояние между строками, а также создавать отступы заданной величины.

Ключевое слово lowsrc позволяет сначала загрузить файл с низким разрешением, затем больший файл с высоким разрешением:

В примере сначала загружается файл lowcar.gif, а затем highcar.gif.

HTML5 предлагает способ семантически связать текст с элементом изображения с введением элемента <figure>. При комбинировании с элементом <figcaption>, можно семантически связать надписи с их графическими аналогами:

<p>This is an interesting image</p>

</figcaption>

</figure>

Ссылки

Гиперссылки — мощнейшее средство языка HTML, благодаря которому возможны переходы между различными документами и объектами, размещенными в интернет. Гиперссылки реализуются с помощью тега <а>. Атрибутом тега <a> является href=”адрес ресурса”. Еще один атрибут name= “ссылка в документе” позволяет установить навигацию внутри документа. Атрибут target содержит имя окна, куда будет загружаться документ: target=_blank/_top – загрузка в новое окно; target=_parent – загрузка в родительское окно; target=self – загрузка в текущее окно; target=_search – загрузка в окно поиска. Атрибут title="Пояснительная информация” содержит всплывающую подсказку при наведении курсора на гиперссылку. Атрибут charset=”кодировка” указывает с помощью какой кодировки следует открыть сетевой ресурс.

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

<a href="Minsk.html">Minsk</a>

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

<a href="Belarus/Minsk.html">Minsk</a>

Ссылки можно формировать на основе URL, используя синтаксис: protocol: //hostport/path. Например:

<a href="http://www.w3.org/tr/rec-html40"> документ html </a>

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

<html>

<head><title>Ссылки на домашней странице</title></head>

<body>

<h1>Внутренние ссылки на части документа</h1>

<hr>

<h2>вы можете:</h2>

<ul>

<li>Посмотреть <a href="pr11.htm">простейший пример</a></li>

<li>Посмотреть <a href="pr12.htm">второй пример</a></li>

<li>Посмотреть <a href="pr13.htm">разбиение текста</a></li>

<li>Узнать <a href="pr14.htm">о линиях</a></li>

</ul>

<hr>

Если вас интересует подробная информация, пишите по адресу

<a href="mailto:[email protected]">[email protected]</a>

</font>

</body>

</html>

Элемент address несет в себе контактную информацию для всего сайта или какой-то его части. Элемент address не следует использовать для всех почтовых и e-mail адресов; сюда нужно помещать только контактную информацию людей так или иначе связанных с этим документом.

<p>Над сайтом работали:</p>

<a href="http://alexander.com/">Александр</a>,

<a href="http://Basilii.com/">Вася</a>,

<a href="http://tusic.ru/">Тузик</a>,

</address>

Для того чтобы сослаться не просто на страницу, а на ее определенное место, используются закладки или якоря. С помощью якоря - тега <а> с атрибутом name, помечается место куда может быть осуществлен переход. Чтобы осуществить переход на якорь используется параметр href = “имя закладки”. Имя закладки содержит URL документа, за которым следует имя якоря. Разделителем между URL и именем якоря служит символ #. Если якорь находится на текущем документе, то URL не указывается.

<html>

<head><title>якоря на домашней странице</title></head>

<body>

<ul>

<lh>Содержание</lh>

<li><a href="#section1">введение</a></li>

<li><a href="#section2">обзор</a></li>

<li><a href="#section3">подробное рассмотрение</a></li>

</ul>

<br>

<hr>

...тело документа...

<hr>

<h2><a name="section1">Введение</a></h2><hr>

...section 1...

<h2><a name="section2">Обзор</a></h2><hr>

...section 2...

<hr>

<h3><a name="section3">Подробное рассмотрение</a></h3><hr>

...section 3...

<hr>

<address>романчик - e-mail:[email protected]</address></a>

</body>

</html>

Такой же эффект можно получить, используя заглавия вместо якоря:

<html>

<head><title>ссылки на заголовки</title></head>

<body>

<h1>table of contents</h1>

<a href="#section1">introduction</a><br>

<a href="#section2">some background</a><br>

<a href="#section3">the first part</a><br>

...the rest of the table of contents...

<h2 id="section1">introduction</h2> <hr>

...section 1...<hr>

<h2 id="section2">some background</h2><hr>

...section 2...<hr>

<h3 id="section3">the first part</h3><hr>

...section 3...<hr>

...продолжение документа...

</body></html>

Кроме описанных свойств, тег <а> с помощью атрибута target позволяет выбрать окно, в котором будет открыт новый объект. Значения данного атрибута:

_self - предполагает открытие объекта, на который указывает ссылка, в том же окне, что, и документ, где эта ссылка находится; _blank - в новом окне; _parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов; _top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет).

Вместо имени гиперссылки можно указать изображение в виде:

<img src="image/img.gif" height="100" width="100">. Щелкнув по изображению можно перейти на указанный адрес. Пример:

<html>

<head>

<title> Создание рисунка-ссылки</title>

</head>

<body>

</body>

</html>

Гиперссылкой может служить не только целое изображение, но и его фрагменты. Для этого создаются так называемые карты изображений. Карта изображения — это конструкция языка HTML, образованная с помощью тегов <мар> и <area>. Тег <мар> определяет имя карты, по которому она впоследствии связывается с самим изображением.

В параметре usemap тега <img> указывается имя, присвоенное карте с помощью параметра name дескриптора <мар>, предваряемое символом #.

Внутри конструкции <мар>... </мар> помещаются теги <area>. Каждый такой тег описывает параметры определенной области внутри изображения, которой поставлена в соответствие та или иная гиперссылка. Этими параметрами являются форма, координаты, адрес объекта, на который указывает ссылка. Кроме того, здесь, как в теге <а>, действует параметр target и, как в теге <img>, — параметр alt.

Форма области определяется параметром shape, который принимает одно из четырех значений: rect (по умолчанию), circ, poly и default. Эти значения соответствуют прямоугольнику, кругу, многоугольнику и всей области изображения. Для каждой из первых трех форм предусмотрена своя система задания координат. Координаты области определяются параметром coords. Значением этого параметра служит текстовая строка, где через запятую перечислены значения координат (в пикселях), однозначно определяющие размер и положение данной области. Для круга это координаты центра и радиус, для прямоугольника — координаты левой, верхней, правой и нижней сторон, а для многоугольника — координаты вершин.

Пример:

<html>

<head>

<title> Создание карты-изображения</title>

</head>

<body>

</map>

</body>

</html>

Списки

В HTML используются нумерованные и маркированные списки, которые размечаются с помощью тегов двух типов: первый определяет параметры всего списка, второй — параметры каждого из его элементов.

Маркированные списки описываются дескриптором <ul>. Его атрибут type определяет вид маркера — квадратики (square), кружки (disc) и "пустые" окружности (circle). По умолчанию параметру type присваивается значение disc.

Нумерованные списки описываются дескриптором <ol>. Этот дескриптор имеет два параметра: type, определяющий способ нумерации, и start, определяющий, с какой буквы или цифры она будет начинаться. Параметр type дескриптора <ol> принимает значения 1, I, i, А или а, что соответствует нумерации арабскими, большими и малыми римскими цифрами, а также большими или малыми латинскими буквами.

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

Для организации многоуровневых списков со смешанной нумерацией используются вложенные дескрипторы <ul> и <ol>: вместо очередного блока <li>...</li> ставится соответствующий вложенный список.

<html>

<head>

<title>Использование списков </title>

</head>

<body>

<h3 align=”center”>Домашняя страница </h3>

<h4>Маркированный (ненумерованный) список - мои интересы:</h4>

<ul>

<lh><b>занятия в свободное время:</b></lh>

<li> компьютеры</li>

<li> чтение книг</li>

<li> бассейн</li>

<li> отдых на природе</li>

</ul> <hr>

<h4> Нумерованный (упорядоченный) список:</h4>

<lh><b>страны, которые я посетил:</b></lh>

<li> польша</li>

<li> чехия</li>

<li> германия</li>

</ol> <hr>

<lh><b>страны, которые я хочу посетить:</b></lh>

<li> Америка</li>

<li> Китай</li>

<li> Франция</li>

</ol>

</body>

</html>

Тег <lh> используется для задания заголовка списка.

Кроме маркированных и нумерованных списков, в HTML предусмотрена конструкция, образующая список определений. Каждый элемент такого списка состоит из некоего термина и его определения. Термины и определения находятся в отдельных абзацах, причем последние выводятся с увеличенным горизонтальным отступом относительно остального текста. Разметка списка определений осуществляется с помощью трех дескрипторов — <dl>, <dt> и <dd>. Дескриптор <dl> описывает весь список в целом, <dt> — определяемый термин, a <dd> — определение.

<html>

<head><title>использование списков</title></head>

<body>

<h2 align=”center”>Толковый словарь</h2>

<dl>

<lh><big><b> cписок терминов</b></big></lh>

<dt><b>"Anchor"</b></dt>

<dd><i>то, что образовывает гипертекстовую ссылку</i></dd>

<dt><b>"Lamer"</b></dt>

<dd><i> юзер-идиот</i></dd>

<dt><b>"Cookies "</b></dt>

<dd><i>технология, позволяющая сохранять индивидуальную информацию о пользователе сети</i></dd>

</dl>

</body>

</html>

Таблицы

Тег <table> ... </table> служит контейнером для элементов, определяющих содержимое таблицы и описывает параметры всей таблицы. Любая таблица состоит из строк, которые задаются с помощью тегов <tr>. Как в контейнеры <tr> помещаются ячейки (столбцы) <td>. Тег <th> определяет заголовок для столбца в таблице.

Ячейки таблицы описываются построчно, слева направо. Для слияния горизонтальных и вертикальных смежных ячеек применяются параметры тега <td> — colspan и rowspan.

Атрибуты тега <table> :

Align - выравнивание таблицы; Background- фоновый рисунок в таблице; Bgcolor- цвет фона таблицы; Border - толщина рамки в пикселах; Bordercolor - цвет рамки; Cellpadding - отступ от рамки до содержимого ячейки; Cellspacing - расстояние между ячейками; Cols -Число колонок в таблице; Height - Высота таблицы; Width - Ширина таблицы.

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

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

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

<html>

<head>

<title>Тег TABLE</title>

</head>

<body>

<td colspan="3" style="font-size: 160%; font-family: sans-serif">Lorem

ipsum dolor sit amet</td>

</tr>

<tr>

<td><img src="/images/logo.gif" alt="" width="150" height="70"

border="0" style="background: #CC9"></td>

<td align="right"><img src="/images/title.gif" alt="" width="70"

height="70" style="background: #CF9"></td>

<td>

<a href="Three.html">Three</a>

</td>

</tr>

<tr>

<table width="100%" border="0" cellpadding="0"

cellspacing="0" bgcolor="#333333">

</table>

</td>

</tr>

</table>

</body>

</html>

Нужно помнить, что результат применения атрибутов align или bgcolor в разных тегах может отличаться. Так, например, атрибут align в теге <table> означает выравнивание таблицы относительно окна броузера, а в тегах <tr> и <td> — выравнивание текста относительно ячейки.

Внутри <TABLE> допустимо также использовать элементы: <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TFOOT>, <THEAD>.

Для определения заголовка и "шапки" таблицы используются дескрипторы <caption> и <th>. Первый из них помещается внутри конструкции <table>... </table> и содержит заголовок всей таблицы. Второй используется вместо дескриптора <td> для ячеек, которые нужно выделить.

<html>

<head><title>использование таблиц</title></head>

<body>

<caption align=”top”>Лучшие нападающие года</caption>

<tr>

<th>Команда</th>

</tr>

<tr>

<td>small</td>

<td> барселона</td>

</tr>

<tr>

<td>superman</td>

<td>dinamo</td>

</tr>

<tr>

<td>bigman</td>

</tr>

</table>

</body></html>

Для задания отступов текста от границ ячеек и расстояния между ячейками используются два атрибута тега <table> — cellpadding и cellspacing. Отступы задаются в пикселях. Для частичного отображения рамок используются атрибуты frame и rules. Для слияния горизонтальных и вертикальных смежных ячеек применяются параметры тега <td> — colspan и rowspan.

<html>

<head><title>Таблицы </title></head>

<font size=”6”>Примеры таблиц</font>

<br>

<br>

<caption><b>Cтандартная таблица</b> </caption>

<tr>

<th bgcolor="yellow">Заголовок 1</th>

<th bgcolor="yellow">Заголовок 2</th>

</tr>

<tr>

<td>ячейка 1</td>

<td>ячейка 2</td>

</tr>

<tr>

<td>ячейка 3</td>

<td>ячейка 4</td>

</table>

<br>

<br>

<caption>Таблица с объединенными ячейками и фоновым рисунком</caption> <tr> <td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td> <td width="50" bgcolor="#336699"> <center>1x2</center> </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td> <td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td> <td width="50" bgcolor="#336699"> <center>2x3</center> </td> </tr> </table>

<br>

<br>

Фреймы и <iframe>

Фреймы — средство HTML, позволяющее разделить пространство окна браузера на самостоятельные информационные зоны. Фреймовая система является устаревшей и в HTML 5 запрещена.

Фреймовая система описывается в HTML-коде с помощью дескриптора <frameset>. В нем помещаются дескрипторы <frame>, описывающие параметры отдельных фреймов. HTML-коды содержимого этих фреймов находятся в отдельных файлах, имена которых указаны в дескрипторах <frame> с помощью параметров src. Деление окна броузера на части осуществляется с помощью параметров дескриптора <frameset>. Для деления по вертикали используется параметр cols, а по горизонтали — параметр rows.

Для создания внутри окна области с собственной рамкой и самостоятельной прокруткой используется дескриптор <iframe>. Он имеет те же параметры, что и <frame>, но не нуждается в специальной фреймовой структуре, описываемой дескриптором <frameset>, и может располагаться внутри HTML-кода. Дескриптор <iframe> разрешен в HTML5

Формы HTML

Электронная форма — эффективное средство, благодаря которому HTML-страница превращается из "пассивной", лишь предоставляющей информацию пользователю, в "активную", позволяющую принять информацию от пользователя и передать ее для обработки.

Способ обработки и передачи данных определяется тегом <form>, внутри которого и заключается код формы. Средство обработки определяется параметром action, метод передачи — параметром method, а тип кодирования — параметром enctype. Внутреннее содержание формы можно разделить на две части: активное и пассивное. Пассивными элементами формы являются все комментирующие и декоративные элементы, которые могут там содержаться. Это обычные составляющие HTML-страницы.

Активные элементы формы предназначены для ввода данных. Это строки и поля ввода, списки и кнопки. У каждого активного элемента формы — как и у всей формы — есть два основных параметра — name и value. Первый определяет имя элемента, по которому его можно отличить от других элементов формы, второй — значение, которое передается через этот элемент. Большинство активных элементов формы описывается дескриптором <input>, а их вид определяется значением параметра type. Так, значение text соответствует строке ввода, file — строке выбора файла, password — строке ввода пароля; значения submit, reset и button определяют кнопки различных видов, а значения checkbox и radio — два типа списков: список вариантов и список-переключатель, соответственно.

Еще два вида элементов ввода, используемых в формах, создаются с помощью следующих дескрипторов. Дескриптор <textarea> позволяет создавать поля ввода — прямоугольные окна с собственными средствами прокрутки, в которые можно вводить произвольный текст (без форматирования). Дескриптор <textarea> — парный.

Внутри него помещается текст, который содержится в поле ввода по умолчанию. Наконец, еще один распространенный элемент электронных форм — раскрывающийся список — создается с помощью конструкции HTML, образуемой тегами <select> и <option>. Первый заключает в себе весь список, вторые предназначены для создания отдельных пунктов. Списки, созданные таким образом, могут состоять из любого количества строк (если список состоит из одной строки, то он является "раскрывающимся"), а также, в зависимости от параметра multiple, позволяют выбрать один или несколько элементов. Данные, вводимые посредством формы, обрабатываются не средствами HTML. Они могут передаваться по электронной почте или непосредственно программе-обработчику. Язык, на котором может быть написана такая программа, значения не имеет. В частности, для обработки таких данных могут использоваться сценарии на языке JavaScript.

<html>

<head><title>Простая форма, checkbox и radio </title></head>

<body>

<form>

<h2>Простая форма</h2>

my street:<input name="street"><br>

city: <input name="city" size="20" maxlength="20" value="minsk"> <br>

zip: <input name="zip" size="5" maxlength="5" value="99999"><br>

</form>

<hr>

<h2>Ваша любимая команда</h2>

<input type="checkbox" name="team" value="шахтеры">шахтеры<br>

<input type="checkbox" name="team" value="ковбои">ковбои<br>

<input type="checkbox" name="team" value="викинги">викинги<br>

</form>

<hr>

<h2>Какая из команд самая любимая?</h2>

<input type="radio" name="team" value="шахтеры">шахтеры <br>

<input type="radio" name="team" value=" ковбои"> ковбои <br>

<input type="radio" name="team" value="викинги">викинги <br>

</form>

<hr>

<h2>Какая из команд самая любимая?</h2>

<form>

<option> шахтеры</option>

<option> ковбои</option>

<option selected> викинги</option>

</select>

</form>

</body>

</html>

Новые элементы HTML5

HTML5 включает 5 новых элементов форм. Форма progress показывает процесс загрузки. Форма meter показывает шкалу измерения. Форма datalist используется для ввода. Форма keygen используется для создания пары ключей, один из которых передается через форму на сервер. Форма output отображает сумму вводимых элементов. Например: PROGRESS <progress max="100" value="25">25%</progress> METER <meter value="50" min="0" low="20" optimum="50" high="80" max="100"></meter> KEYGEN <keygen name="key" keytype="rsa" challenge="challenge" /> DATLIST Элемент ввода с возможными значениями в datalist описанными c помощью элементов option. Элемент input связывается с элементом datalist c помощью атрибута list. DATALIST <input list="company" /> <datalist id="company"> <option value="BMW"> <option value="Ford"> <option value="Volvo"></datalist> OUTPUT Определяет область в которую выводится информация, преимущественно с помощью скриптов. <form action="" oninput="out.value=range.value"> <div> <input type="range" name="range" min="0" max="100" value="25" /> </div> <div> <output name="out">25</output> </div> </form> Новые типы ввода HTML5 предоставляет 13 новых типов ввода

Определяет поле для ввода email. Поле не отличается от элемента input.

Хорошо реализовано на iPhone/iPad.

URL

Определяет поле для ввода url. Поле не отличается от элемента input.

Хорошо реализовано на iPhone/iPad.

TEL

Определяет поле для ввода телефона. Поле не отличается от элемента input.

Хорошо реализовано на iPhone/iPad.

Определяет поле для поиска

Язык разметки гипертекста HTML - student2.ru

DATE

Служит для ввода даты

Язык разметки гипертекста HTML - student2.ru

TIME

Служит для ввода времени

Язык разметки гипертекста HTML - student2.ru

DATETIME

Служит для ввода даты и времени

NUMBER

Служит для ввода числовых данных

RANGE

Служит для ввода значения из диапазона

Язык разметки гипертекста HTML - student2.ru

MONTH

Служит для ввода месяца

WEEK

Служит для ввода недели

COLOR

Служит для ввода цвета

Язык разметки гипертекста HTML - student2.ru

Новые атрибуты ввода

AUTOFOCUS

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

Атрибут FORM связывает элемент с формой.

</form>

PLACEHOLDER

Устанавливает подсказывающий текст в поле ввода.

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

FORMACTION

formaction, formenctype, formmethod, formtarget эти атрибуты добавляются к элементам, отвечающим за отправку форм, и переопределяют соответствующие им атрибуты форм Эти атрибуты поддерживаются элементами ввода и кнопками

formaction атрибут для переопределения действия элемента формы.

formenctype атрибут Для переопределения enctype элемента формы.

formmethod -атрибут для переопределения метода элемента формы.

formnovalidate атрибут для переопределения NOVALIDATE элемента формы.