Мультимедиа на веб-страницах
Мультимедиа на веб-страницах
Embedded Files
Графика на веб-страницах
Графика на веб-страницах
Разметка фонового изображения
Файл с изображением находится в одной папке с html-файлом:
<body background = "fon.jpg">
Файл с изображением находится в папке с именем img:
<body background="img/fon.jpg">
Добавление свойства width к изображению
img {
width: 300px; /* Ширина в пикселях */
}
img {
width: 80 %; /* Ширина в процентах */
}
Отступы для изображения
img {
padding: 10px;
/* Одинаковые отступы со всех сторон */
}
Альтернативный текст
<img src = "ozero.jpg" alt = "Нарач">
Использование изображения в качестве ссылки
Стилевое описание:
img {border: none}
Html-код:
<a href = ''sample.html''>
<img src = "link.png'' alt = "Пример">
</a>
Выравнивание изображения по отношению к тексту
img {
float: left;
/* Изображение слева от текста */
padding: 5px; /* Отступ */
}
img {
float: right;
/* Изображение справа от текста */
}
Звук и видео на веб-страницах
Звук и видео на веб-страницах
Добавление звука
<audio controls width = "190px" src = ''muz.mp3''> Тег audio не поддерживается вашим браузером. </audio>
Добавление видеоролика.
<video controls width = "190px" src = "vid.mp4">
</video>
Для универсального воспроизведения в различных браузерах аудио и видео кодируют с помощью разных кодеков и одновременно во вложенном теге <source> добавляют ссылки на файлы разных форматов:
<video width = ''400'' controls =
''controls''>
<source src = ''duel.mp4'' type= 'video/
mp4; codecs = ''avc1.42E01E, mp4a.40.2'''>
<source src= ''video/duel.webm'' type = 'video/webm; codecs = ''vp8, vorbis'''>
</video>
Атрибуты тега <audio>:
src — указывает путь к воспроизводимому файлу;
autoplay — звук воспроизводится сразу после загрузки страницы;
controls — добавляет панель управления звуком;
loop — повторяет воспроизведение звука после его завершения;
preload — используется для загрузки файла вместе с загрузкой вебстраницы.
Атрибуты тега <video>:
src — указывает путь к воспроизводимому файлу;
autoplay — звук воспроизводится сразу после загрузки страницы;
controls — добавляет панель управления звуком;
loop — повторяет воспроизведение звука после его завершения;
height — задает высоту области для воспроизведения;
width — задает ширину области для воспроизведения;
preload — используется для загрузки файла вместе с загрузкой вебстраницы.
Добавление видеоролика с сервиса YouTube
Использование таблиц
Описание
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.
Подробней здесь: http://htmlbook.ru/html/table
<table border="4" cellpadding="4" cellspacing="4">
<tr>
<td rowspan="2">Браузер</td>
<th colspan="2">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th>
<th>1.0</th><th>2.0</th>
</tr>
<tr align="center">
<td>Поддерживается</td>
<td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td>
<td>Да</td><td>Да</td>
</tr>
</table>
Упражнения
Упражнения
Создайте веб-страницу следующей структуры:
Блок 1
Отображение в браузере
Стилевое описание
div.bl1 {
width: 300px;
float: left;
padding: 15px;
margin: 30px;
font: 30pt Tahoma;
color: #808000;
}
Блок 2
Отображение в браузере
Стилевое описание
div.bl2 {
width: 600px;
background: #ffffff;
padding: 15px;
margin: 30px;
border: solid 1px black;
font: 14pt Tahoma;
float: left;
}
Файлы с рисунками для работы можно найти здесь:
https://drive.google.com/file/d/18B5K1tsqHtYuJUIYFn-dz9HMwzxpUkLu/view?usp=sharing
или (для тех кто работает в кабинете информатики)
\\Serg-pc\задания\html\upr\upr9
Сохраните результат как файл index.html. Все рисунки, используемые на веб-странице, сохраняйте в отдельной папке.
2. Для каждой фигуры из упражнения 1 создайте веб-страницу следующей структуры:
Элементы страниц:
Заголовок
h1{
text-align: center;
font-family: Comic Sans MS;
color: #DC143C;
}
Блок
div {
width: 620px;
height: 300px;
background: #ffffff;
border: solid 1px black;
padding: 15px;
margin: 0 auto;
font: 14pt Arial;
line-height: 1.5;
/*Межстрочный интервал*/
}
Абзац
p {
font: 14pt Tahoma;
text-align: center;
}
Линия
hr {
color: #DC143C;
background-color: #DC143C;
/*Цвет линии для разных браузеров*/
height: 2px;
width:700px;
}
Стилевое описание выполните в отдельном файле. Подключите стилевой файл к каждой странице. Сохраните страницы как 1.html, 2.html, 3.html, 4.html.
3. Свяжите страницу index.html и страницы, созданные в упражнении 2, с помощью перекрестных гиперссылок. В качестве ссылок на странице index.html используйте изображения фигур, а на страницах второго уровня — текстовые элементы абзаца.
4. Добавьте на страницу index.html звук (воспроизведение при загрузке).
5. На одну из страниц упражнения 2 добавьте видеоролик соответствующей тематики. Для поиска видеоролика воспользуйтесь веб-сервисом YouTube.
Google Sites
Report abuse