Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 14. Медиатипы, курсоры, вставка аудио и видео

Содержание курса

Стили CSS для печати страницы - медиатипы

Нередко у пользователей возникает желание распечатать страницу сайта, но при этом им не нужно печатать рекламные баннеры и фон страницы, а только текст и основные картинки в нем. Более того, есть сайты с белым текстом на черном фоне - это вообще кошмар для принтера.

Чтобы дать возможность пользователям спокойно распечатать страницу, применяются медиатипы, которые прописываются в теге <link>. При этом понадобится создать отдельный файл CSS, который будет применяться только для вывода на печать. В этом файле html страница будет приобретать вид для печати - только текст и основные картинки в нем.

Медиатипы:
screen - монитор;
print - принтер;
handheld - КПК (смартфоны) устаревший медиатип;
projection - проектор;
tv - телевизор;
aural - аудио-девайс;
braille - стиль для плоховидящих.

Для каждого нужного вам медиатипа нужно создавать свой стиль отображения страницы - файлы стилей (.css)

Эти указания медиатипов должны опознавать соответствующие программы. Медиатипы screen и print стопроцентно опознаются браузерами, другие медиатипы, могут опознаваться, а могут и не опознаваться, что весьма печально, особенно для медиатипа "handheld".

Для указания медиатипа применяется атрибут media, который по умолчанию выставлен в "all" (для всех типов медианосителей). Ниже приведен пример применения разных стилей для разных типов носителей.

<!DOCTYPE html>
	<html>
		<head>
			<title>Применение разных стилей для медианосителей</title>
		<!-- В этом элементе link задаем атрибут media, в котором
		указываем тип носителя "монитор" -->
			<link rel="stylesheet" href="screen.css" media="screen" />
		<!-- В этом элементе link задаем атрибут media, в котором
		указываем тип носителя "принтер" -->
			<link rel="stylesheet" href="print.css" media="print" />
		</head>
		<body>
	<!-- Содержимое html-страницы -->
		</body>
	</html>

Курсоры в CSS

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

Для этих целей в CSS есть свойство cursor, которое задается нужным элементам html.
Его значения:
auto - курсоры по умолчанию для всех элементов html-страницы;
default - обычная стрелочка;
text - курсор для выделения текста;
crosshair - курсор в виде перекрестия;
pointer - курсор "рука";
move - курсор в виде перекрестия стрелок;
wait - курсор "ожидание загрузки";
Кроме этих часто используемых, есть масса других курсоров.

<!DOCTYPE html>
	<html>
		<head>
			<title>Курсоры</title>
			<style>
				#def {cursor: default;}
				#tex {cursor: text;}
				#cros {cursor: crosshair;}
				#poin {cursor: pointer;}
				#mov {cursor: move;}
				#wait {cursor: wait;}
		/*Зададим рамку элементам с измененным курсором,
		чтобы видеть их границы для удобства*/
				div, p, span {border: 2px solid red;}
			</style>
		</head>
		<body>
			<div id="def">Курсор обычной стрелки</div>
			<p id="tex">Курсор для выделения текста</p>
			<span id="cros">Курсор в виде перекрестия</span>
			<span id="poin">Курсор "рука"</span>
			<span id="mov">Курсор в виде перекрестия стрелок</span>
			<div id="wait">Курсор "ожидание загрузки"</div>
		</body>
	</html>

Наведите курсор на каждый из элементов примера ниже "Вид в браузере" (если, конечно, вы просматриваете эту страницу не со смартфона) и посмотрите, как будет изменяться курсор.

	Вид в браузере:
-------------------------------

		
Курсор обычной стрелки
Курсор для выделения текста
Курсор в виде перекрестия
Курсор "рука"
Курсор в виде перекрестия стрелок
Курсор "ожидание загрузки"

Вставка объектов - элемент object. Вставка аудио и видео файлов

Элемент <object> указывает браузеру, как загружать и отображать объекты, которые исходно ему не ясны. Это могут быть какие-то дополнительные программы или плагины. <object> - довольно сложный элемент html. Вставка аудио осуществляется при помощи элемента <audio>, выглядит она так:

<!DOCTYPE html>
	<html>
		<head>
			<title>Вставка аудио-файла</title>
		</head>
		<body>
	<!-- Вставка аудиофайла -->
		<audio src="music.mp3" controls></audio>
		
	<!-- Вставка аудио-файла (второй вариант) -->
		<audio autoplay loop controls>
			<source src="music.mp3" type="audio/mpeg" />
			<source src="music.ogg" type="audio/ogg" />
		</audio>
		</body>
	</html>

В атрибуте src указывается путь к аудио файлу. Элемент <source> прописан дважды с двумя различными расширениями аудио файла. Раньше некоторые браузеры понимали только формат аудио "ogg", а некоторые "mp3". Сейчас это делать необязательно, т.к. практически все браузеры понимают формат "mp3". Тоже самое касается и вставки видео, код которой приведён ниже.

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

Атрибут loop задает авто повторение трека. Атрибут controls добавляет панель управления к аудио-файлу.

Аналогичным образом вставка видео-файлов осуществляется элементом <video>:

<!DOCTYPE html>
	<html>
		<head>
			<title>Вставка видео-файла</title>
		</head>
		<body>
	<!-- Вставка видео-файла -->
		<video controls autoplay width="640" height="360">
			<source src="video.mp4" type="video/mp4" />
			<source src="video.ogv" type="video/ogg" />
		</video>
		</body>
	</html>

Как видно в примере у тега <video> задается ширина и высота плеера, можно так же, как и для аудио задавать авто воспроизведение при загрузке страницы и использовать атрибут loop для автоматического повтора ролика.

В атрибуте src указывается путь к видео файлу.

Кроме этого у тега <video> может быть задан атрибут poster, в значении которого нужно указать путь к картинке, которая будет показываться если видео не воспроизводится или недоступно. Пример: <video controls autoplay width="640" height="360" poster="/images/vid_img.jpg"> ... </video>

Элемент <video> по умолчанию не является блочным элементом, поэтому если требуется сдвинуть плеер через CSS, то ему нужно выставить display: block.


Результат отображения этих элементов в браузере будет таким:

Мета-информация страницы

Мета-информация - это дополнительная информация веб-страницы, которая указывается при помощи мета-тегов - это пустые элементы <meta />, которых несколько типов. Мета-теги прописываются внутри элемента <head>

Предопределенные мета-теги - это те, что были в html изначально, кроме предопределенных могут быть и произвольные мета-теги, используемые для каких-то своих целей.

Мета-тег <meta name="author" content="author-name" /> хотя и мало используется, но довольно полезный мета-тег. Это указание автора страницы, в значении content вписывается автор.

Мета-тег поисковой системы Яндекс <meta name="yandex-verification" content="458d8d6f856h458c" /> - позволяет верифицировать ваш сайт, доказать Яндексу, что он принадлежит именно вам. После регистрации сайта в веб-мастере Яндекса полученный идентификатор вписывается в атрибут content. Аналогичные мета-теги есть практически у всех поисковых систем.

<!DOCTYPE html>
	<html>
		<head>
			<title>Мета-теги</title>
		<!-- Общая мета-информация -->
			<meta name="author" content="Валерий Иванов" />
			<meta name="generator" content="Notepad++" />
		<!-- Мета-информация для поисковых систем -->
			<meta name="yandex-verification" content="4852frfe5d25fs2ss5" />
			<meta name="google-site-verification"
					content="fdDFFFGSDFfDf+FDC=" />
		</head>
		<body>
	<!-- Содержимое страницы -->
		</body>
	</html>

К теме мета-тегов мы еще не раз вернемся в следующих уроках.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля