Виды и цвет гиперссылок в 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   Подавляет перенос слов Эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки
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

 

Пример. Объединение ячеек по горизонтали.

<TD colspan="число">

Пример. Объединение ячеек по вертикали.

<TD rowspan="число">


Дата добавления: 2016-09-26; просмотров: 3289;

Поиск по сайту:

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

Поделитесь с друзьями:

Считаете данную информацию полезной, тогда расскажите друзьям в соц. сетях.
Poznayka.org - Познайка.Орг - 2016-2024 год. Материал предоставляется для ознакомительных и учебных целей.
Генерация страницы за: 0.019 сек.