Виды и цвет гиперссылок в HTML

Любая гиперссылка на HTML-странице по умолчанию находится в одном из трех состояний:

- Не посещенная ссылка – имеет синий цвет и подчеркивание.

- Активная ссылка – принимает красный цвет во время между щелчком мыши по ссылке и началом загрузки новой страницы. Понятное дело, в таком состоянии она находится совсем недолго.

- Посещенная ссылка – меняет свой цвет на фиолетовый после перехода по ней.

Изменить цвет гиперссылок в HTML-документе можно при помощи тега <BODY> и следующих его атрибутов:

- Link – цвет не посещенных ссылок.

- Alink – цвет активной ссылки.

- Vlink – цвет посещенных ссылок.

Все приведенные атрибуты можно объединять:

<BODY Link="#1122cc" Vlink="#6611cc" Alink="#d14836">

Звук в HTML

Теги для проигрывания и управления музыкальными файлами на странице.

Тег <AUDIO>

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

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

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

Autoplay	Звук начинает играть сразу после загрузки страницы.
Controls	Добавляет панель управления к аудиофайлу.
Loop	Повторяет воспроизведение звука с начала после его завершения.
Preload	Используется для загрузки файла вместе с загрузкой веб-страницы.
Src	Указывает путь к воспроизводимому файлу.

Пример.

<AUDIO Controls>

<Source Src="audio/music.ogg" Type="audio/ogg; Codecs=vorbis">

<Source Src="audio/music.mp3" Type="audio/mpeg">

Тег <AUDIO> не поддерживается вашим браузером.

<A Href="audio/music.mp3">Скачайте музыку</A>.

</AUDIO>

Тег <BGSOUND>

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

Тег <BGSOUND> определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью атрибутов тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере <HEAD>.

Тег <BGSOUND> не входит в спецификацию HTML и при его использовании код не пройдет валидацию.

АтрибутыТег <BGSOUND>

Balance	Управляет балансом звука между правой и левой колонками.
Loop	Устанавливает, количество проигрываний.
Src	Путь к музыкальному файлу.
Volume	Задает громкость звучания музыки.

Пример.

<BGSOUND Src="town.mid" Loop="-1">

Тег <SOURCE>

Вставляет звуковой или видеофайл для тегов <AUDIO> и <VIDEO>.

Вставляет звуковой или видеофайл для тегов <AUDIO> и <VIDEO>. Обобщенно такие файлы называются медийными.

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

Media	Определяет устройство, для которого будет воспроизводиться файл.
Src	Адрес файла.
Type	MIME-тип медийного источника.

Пример.

<Source Src="video/duel.ogv" Type="video/ogg; Codecs="theora, vorbis">

Тег <TRACK>

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

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

Kind	Указывает тип дорожки, возможные варианты перечислены в табл. 1.
Src	Путь к файлу с дорожкой.
Srclang	Язык дорожки
Label	Отображаемое название дорожки. Если этот атрибут не указан, браузер станет использовать значение, которое применяется у него по умолчанию, например «untitled1».
Default	Наличие этого атрибута указывает, что данная дорожка предпочтительна и должна быть выбрана по умолчанию. Только одна дорожка может иметь атрибут default.

Значения атрибута Kind

Значение	Предназначение	Описание
Subtitles	Субтитры	Предназначены для дублирования звуковой дорожки фильма в виде текста на языке оригинала для глухих людей. Также могут содержать перевод на другие языки для тех, кто не знаком с языком оригинала. Текст субтитров выводится поверх видео.
Captions	Заголовки	Дублирование диалогов, звуковых эффектов, музыкального сопровождения в виде текста для тех случаев, когда звук недоступен или для глухих пользователей. Выводится поверх видео, при этом помечается, что подходит для плохо слышащих людей.
Descriptions	Описание	Звуковое описание происходящего в видео для тех случаев, когда изображение недоступно или для слепых людей.
Chapters	Главы	Названия глав используемые для быстрой навигации по видео или аудио. Отображаются в виде списка.
Metadata	Метаданные	Предназначены для использования скриптами и не отображаются в браузере.

Пример.

<TRACK Kind="subtitles" Src="video/jane.en.srt" Srclang="en" Label="English">

Видео в HTML

Тег <VIDEO>

Тег <VIDEO>…</VIDEO> используется для добавления и воспроизведения видео на Web – странице, а также управляет настройками видеоролика. Путь к файлу задается через атрибут Src или вложенный тег <SOURCE>.

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

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

Autoplay	Видео начинает воспроизводиться автоматически после загрузки страницы.
Controls	Добавляет панель управления к видеоролику.
Height	Задает высоту области для воспроизведения видеоролика.
Loop	Повторяет воспроизведение видео с начала после его завершения.
Poster	Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
Preload	Используется для загрузки видео вместе с загрузкой веб-страницы.
Src	Указывает путь к воспроизводимому видеоролику.
Width	Задает ширину области для воспроизведения видеоролика.

Пример.

<VIDEO Width= "400" height = "300" Controls= "controls" Poster= "video/duel.jpg">

<SOURCE Src="video/duel.ogv" Type='video/ogg; Codecs="theora, vorbis"'>

<SOURCE Src="video/duel.mp4" Type='video/mp4; Codecs="avc1.42E01E, mp4a.40.2"'>

<SOURCE Src="video/duel.webm" Type='video/webm; Codecs="vp8, vorbis"'>

Тег <VIDEO> не поддерживается вашим браузером.

<A Href="video/duel.mp4">Скачайте видео</A>.

</VIDEO>

Таблицы в HTML

Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы.

Таблица создается с помощью тега <TABLE> - он открывает таблицу. Обязательный тег </TABLE> информирует браузер о завершении таблицы.

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

Любая таблица состоит из столбцов и строк.

Тег <TR> создает строку, а тег <TD> ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Тег <TH>также создает ячейку. Его отличие от тега <TD> в том, что ячейка созданная тегом <TH> является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.

Содержимое ячейки, созданной тегом <TD> по умолчанию располагается в ее левой чаcти.

Тег <CAPTION> создает заголовок таблицы, он располагается внутри тега <TABLE> - сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.

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

Имя атрибута	Возможные значения	Смысл	Примечания
ALIGN	LEFT, RIGHT	Определяет горизонтальное положение таблицы. Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст. При использовании этого атрибута по окончании таблицы должна следовать команда BR.	LEFT - Таблица прижимается влево (используется по умолчанию). RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево.
VALIGN	TOP, MIDDLE, BOTTOM	Определяет вертикальное расположение текста в таблице
WIDTH	Целое число	Определяет ширину таблицы в пикселях или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента.	Браузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце
HEIGHT	Целое число	Определяет высоту таблицы в пикселях или в процентах от высоты экрана. Позволяет при необходимости растягивать таблицу на весь экран.	бРаузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке
BACKGROUND	URL	Задает в качестве фона графический файл.
BGCOLOR		Задает цвет фона.
BORDER	Целое число	Ширина рамки в пикселях	По умолчанию рамка не рисуется
BORDER COLOR		Задание цвета рамки
BORDER COLORLIGHT		Задание цвета для рамки с тенью (псевдо трехмерная графика)	Используется вместе с атрибутами BORDERCOLORDARK и BORDER
BORDER COLORDARK		Задание цвета для рамки с тенью (псевдо трехмерная графика
CELLPADDING	Целое число	Задает расстояние в пикселях между границей клетки и ее содержимым.
CELLSPACING	Целое число	Задает расстояние в пикселях между внешней рамкой таблицы и ее клетками внутри таблицы.
COLS	Целое число	Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц
FRAME	VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER	Определяет метод отрисовки рамки	VOID - Убрать наружную часть рамки. ABOVE - Показывает верхнюю границу таблицы. BELOW - Показывает нижнюю границу таблицы. HSIDES - Показывает верхнюю и нижнюю границу таблицы. LHS - Показывает левую границу таблицы. RHS - Показывает правую границу таблицы. VSIDES - Показывает левую и правую границу таблицы. BOX - Показывает полную рамку таблицы. BORDER - Показывает полную рамку таблицы.
RULES	NONE, GROUPS, ROWS, COLS, ALL	Определяет как будут показаны разделительные линии (внутренние границы) таблицы	NONE - Устраняет все границы внутри таблицы. GROUPS - Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP ROWS – Показывает горизонтальные границы между всеми рядами таблицы. COLS – Показывает вертикальные границы между всеми колонками таблицы. ALL - Показывает все границы.

Атрибуты тегов <TD>, <TH>

Имя атрибута	Возможные значения	Смысл	Примечания
NOWRAP		Подавляет перенос слов	Эквивалентно использованию непрерывных пробелов ( ) вместо обычных пробелов в пределах содержимого ячейки
ROWSPAN	Целое число	Число строк, перекрываемых ячейкой	По умолчанию 1
COLSPAN	Целое число	число столбцов, перекрываемых ячейкой	По умолчанию 1
COLSPEC		Ширина колонок в символах или в процентах	Например, COLSPEC="20%"
ALIGN	LEFT, CENTER, RIGHT, JUSTIFY, CHAR	Горизонтальное выравнивание данных в ячейке	По умолчанию LEFT или атрибут ALIGN во включающем элементе TR, Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать. Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа
VALIGN	TOP, MIDDLE, BOTTOM, BASELINE	Вертикальное выравнивание данных в ячейке	Перекрывается атрибутом VALIGN во включающем элементе TR
WIDTH	Целое число	Ширина ячейки в пикселях	Браузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце
HEIGHT	Целое число	Высота ячейки в пикселях	Браузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке
BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK	Аналогично атрибутам TABLE