Вставка графических и мультимедийных файлов на сайт

Категория: HTML. 3 комментариев. 13.06.2012.

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

Вставка графических и мультимедийных файлов на сайт.

Вставка картинки в HTML.

Вставка картинки в HTML очень простая операция и выполнить вы её сможете быстро. Но для начала давайте разберемся с вами в таком вопросе как принцип вставки картинок, видео и аудио файлов на сайт. Файлы это не текст и непосредственно вставить её на страницу невозможно, поэтому для того чтобы вставить данный фрагмент нам нужно просто загрузить файл на ваш хостинг а с страницы сделать просто ссылку с адресом. Когда браузер читает данный фрагмент текста он просто подгружает на страницу картинку по данному адресу.

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

После того как вы загрузили картинку вам нужно на страницу добавить следующий код:

<IMG SRC="путь к картинке">

Давайте теперь разберемся с тем, что такое путь к картинке и как его узнать. Путь к картинке-это и есть место где размещена ваша картинка, если вы загружали картинку в папку на хостинге (чаще всего это images) то это нужно отобразить в адресе записав через слеш сначала папку в которой находится файл а потом и название файла и через точку указать расширение.

<IMG SRC="/images/picture.jpg">

Если вам нужно вставить файл с другого сайта или же с бесплатного хостинга то вам нужно указывать полный путь к файлу. Что это значит, а то что к пути к картинке нужно добавить также адрес сайта. Вот как это выглядит.

<IMG SRC="http://www.othersite.ru/book12/author.jpg">

Теперь давайте разберемся какие форматы графики применяются в интернете и кратко рассмотрим их преимущества и недостатки. В сети используются три основных форматов изображений: GIF, JPEG, и PNG.

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

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

PNG формат который полностью заменяет собой GIF но только вы можете в нем сохранить прозрачные изображения и от этого изображение не пострадает.

Вставка аудио на сайт.

Вставка аудио на сайт тоже не может вызвать у вас больших проблем. Для этого есть один очень простой тег AUDIO и дальше мы посмотрим как можно применять данный тег на практике.

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

<AUDIO SRC="sound.wav"></AUDIO>

Вот после этого на вашем сайте появится звуковая дорожка и сразу же после загрузки страницы браузер найдет указанный файл и загрузит его не проигрывая или сразу же начать проигрывать и для этого нам нужно к тегу добавить специальные атрибуты AUTOPLAY (автоматический запуск проигрывания) и CONTROLS (файл загружается но не проигрывается). Смотрите как это выглядит на практике.

Для автоматического запуска файла.

<AUDIO SRC="sound.wav" AUTOPLAY></AUDIO>

Для загрузки файла и элементов управления но не проигрывания.

<AUDIO SRC="sound.wav" CONTROLS></AUDIO>

На этом с звуковыми файлами закончено и теперь мы переходим к видео файлам.

Вставка видео файлов на сайт.

Вставка видео файлов на сайт не сложнее всех предыдущих элементов но здесь есть закавыка в формате файла. Каждый браузер поддерживает конкретные несколько форматов с имеющихся более трех десятков и поэтому на сайте желательно вставлять видео в формате MP4 и QuickTime.

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

<VIDEO SRC="film.mp4"></VIDEO>

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

Для данного тега также можете задать атрибуты AUTOPLAY и CONTROLS которые задают немедленное проигрывание и проигрывание по требованию пользователя соответственно. Вот как это выглядит на практике.

<VIDEO SRC="film.mp4" AUTOPLAY CONTROLS></VIDEO>

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

<VIDEO SRC="film.mp4" CONTROLS POSTER="filmposter.jpg"></VIDEO>

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

С уважением, Василенко Александр

Похожие статьи:

3 в ответ на “Вставка графических и мультимедийных файлов на сайт”:

  1. Владимир
    http://seosocialka.ru/
    пишет:

    Спасибо Вам большое за урок

  2. Татьяна
    http://vkusest.com/
    пишет:

    Очень полезная статья, спасибо.

Ответить на Татьяна