Всем привет, на прошлом занятии мы с вами изучили форматирование текстов объемных текстов, работа с цветом, шрифтом и размеров, а так же атрибуты, и элементы тегов. В этом занятии мы с вами изучим размещение изображений, видео и музыки на нашем с вами сайте. Итак, давайте начнем с размещения изображений, но для начало надо скачать любое изображение или выбрать его у себя в галерее любое изображение и ОБЯЗАТЕЛЬНО разместить в папке, где расположен файл сайта, в нашем случае index.html, можно в принципе подгружать из любого источник, но это будет увеличивать время загрузки, что может негативно сказаться на работе самого сайта! Итак, выбрали картинку и для того чтобы ее разместить на сайте, пишем тег <img>, да те кто знают английский, уже поняли что тег образован от слова Image, что переводится как "изображение". Но прошу заметить у него очень много атрибутов, вы изучите их сами, так как мы разберем основные из них. Итак синтаксис простой, пишем тег<img src=""> в саблайм естественно работает автонабор, чтобы облегчить написание кода. В теге есть атрибут src="", в нем впишем либо название и формат изображения, путь к нему или ссылку из интернета, повторюсь, все кроме первого, замедляют работу и прогрузку сайта, я в свою очередь просто пропишу название и формат картинки которую загрузил в папку и выглядеть это будет следующем образом:
Как видим синтаксис достаточно простой, а теперь давайте посмотрим что из этого вышло:
Вот наш результат, но размер меня не устаревает, давайте применим к изображению атрибут, которые задают размер и выравнивают его к примеру с лева. Вот эти атрибуты: width="" align="". width="" отвечает за ширину картинки, высота подгоняется по умолчанию, если вам конечно не нужно сузить изображение и пишется размер в пикселях, а атрибут align="" отвечает за центровку, центруется просто английскими словами: Centre - центр, Left - лево и Right - соответственно право, давайте сделаем это на практике.
Вот мы задали параметры изображения 450 пикселей и выровнять изображение с лева, давайте посмотрим на результат!
Вот и результат, мы свами уменьшили и разместили изображение с лева, кстати, есть еще такой тег как <alt> если перевести на русский то альтернативный текст, он нужен для того, чтобы подписывать текст автоматически и если вдруг картинка не прогрузилась, то текст в любом случает будет прогружен. Поэкспериментируйте с этим тегом сами, а информацию найдите в интернете. Теперь давайте разберемся с вами с тегом для загрузки видео и да, по аналогии с картинкой, нужно загрузить видео и поместить его в файле с сайтом, ну или также использовать ссылку или путь. Тег называется <video src"">, да все точно так же как и с видео но есть другие атрибуты, я добавлю атрибут который задает размер области воспроизведения, атрибут панели управления и центрует его.
Все почти так же как и с картинкой, но лишь с другими атрибутами, но есть и другие, вам будет нужно самостоятельно с ними ознакомится. А теперь посмотрим как это выглядит в результате:
Вот вам и ваш собственный мини YouTube, разве что нет большого сервера для размещения большого количества видео роликов. Так ну и давайте перейдем с вами к размещению музыки на нашей странице. Ну, я думаю что многие догадались, что тег как то связан с музыкой и верно, он выглядит следующим образом <audio src"">, все по аналогии, я добавлю мелодию, укажу ее название и впишу атрибут контроля, смотрим на картинку ниже и повторяем
Вот таки образом будет выглядеть добавление трека на вашу страницу, все очень схоже с тегами выше, лишь с незначительными изменениями, а теперь посмотрим на результат
Собственно так выглядит музыка на странице, важно только соблюдать правила написания и размещения тегов и у вас все получится, вот так кстати выглядит папка с файлами где все это размещено
Обратите внимание, вот сам файл и все указанные выше картинки, треки и видео, это если вдруг у вас что-то не получилось, а на сегодня все, на следующем занятии мы с вами изучим добавление таблиц, а после будем подключать язык CSS, после этого, множество ваших вопросов рассеяться, всего дорого и не забудьте практиковаться и экспериментировать!