Практическое занятие

Задание 1

Разместим на новой веб-странице гиперссылки на офисные документы и pdf-файл. Большинство современных браузеров могут отобразить pdf-документы непосредственно в окне браузера.

Для этого добавим в основной раздел html-документа примерно следующие гиперссылки в виде списка

<UL>
   <LI><A HREF="pifagor.ppt">Презентация о теореме Пифагора </A>  
   <LI><A HREF="multi/chapter01.pdf"> Глава 1 книги по компьютерным сетям </A>
   <LI><A HREF="pifagor.doc">Документ о теореме Пифагора </A> 
</UL>


Задание 2

Добавим в новый раздел веб-страницы видеоролик с помощью тега <VIDEO>. Видеоролики бесплатно можно скачать с известного социального сервиса Vimeo по ссылке.

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


Это будет видео в формате mp4. Нам нужно сделать копию этого файла в формате ogg. Это делается для того, чтобы большинство браузеров смогло отобразить корректно наше видео.

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

Создадим html-код для размещения видеоролика на нашей веб-странице

<VIDEO controls>
   <SOURCE SRC="имя вашего ролика.ogg" TYPE="video/ogg">
   <SOURCE SRC="имя вашего ролика.mp4" TYPE="video/mp4">
</VIDEO>

Задание 3

Добавим на веб-страницу звукозапись из социальной сети SoundCloud.

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

Вставим код в наш документ. Получится примерно следующий html-код

<iframe width="100%" height="450" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/425113608&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>



Last modified: Monday, 17 February 2020, 11:42 PM