Создание сайта.
Популярные статьи.
Вставка графических и мультимедийных файлов на сайт
Категория: 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.
С уважением, Василенко Александр
Спасибо Вам большое за урок
Пожалуйста!
Очень полезная статья, спасибо.