close

Вход

Забыли?

вход по аккаунту

?

Stefanova Izutsheniye yazika gipertekstovoj razmetki HTML5

код для вставкиСкачать
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ
БЮДЖЕТНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
ПОВОЛЖСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
ТЕЛЕКОММУНИКАЦИЙ И ИНФОРМАТИКИ
Стефанова И. А.
Изучение языка гипертекстовой разметки HTML5
Задания и методические указания к лабораторным работам по
информатике
Самара - 2015
Федеральное государственное
образовательное бюджетное учреждение
высшего профессионального образования
Поволжский государственный университет
телекоммуникаций и информатики
Кафедра Информатики и вычислительной техники
Стефанова И.А.
Изучение языка гипертекстовой разметки HTML5
Задания и методические указания к лабораторным работам по информатике
Для студентов телекоммуникационных и экономических направлений:
38.03.05 – Бизнес-информатика
38.03.02 – Информационный менеджмент
09.03.05 – Прикладная информатика
Рецензент:
к.э.н., доцент Никульников Н. В.
Самара
2015
2
Оглавление
Введение _____________________________________________________________ 4
Рекомендуемая литература ____________________________________________ 4
Содержание отчета __________________________________________________ 5
1. Работа с гипертекстом _____________________________________________ 5
2. Работа с графикой _________________________________________________ 16
3. Работа с таблицами _______________________________________________ 23
4. Средства навигации ________________________________________________ 31
5. Работа с формами _________________________________________________ 38
6. Средства мультимедиа _____________________________________________ 47
Приложение. Интернет-адреса в WWW ________________________________ 54
3
004.432 (076)
Введение
Данный цикл лабораторных работ включает в себя шесть работ, направленных на освоение языка гипертекстовой разметки Html5. Цикл может использоваться на практических занятиях по дисциплинам «Информатика» при подготовке бакалавров телекоммуникационных
и экономических направлений.
Настоящее методическое пособие поможет студентам сориентироваться в учебном материале
по изучению простых средств создания гипертекстовых документов, включенных в дисциплину
«Информатика», и успешно выполнить учебный план этой дисциплины в целом.
Рекомендуемая литература
Основная
1. Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов [Текст] /
В. А. Дронов. - СПб. : БХВ-Петербург, 2011. - 414 с.
2. Фрэйн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств [Текст] /
Б. Фрэйн ; пер. В. Черник = Responsive Web Design with HTVL5 and CSS3. Learn responsive design using HTML5 and CSS3 to adapt websites to any browser or screen size / Frain, B. СПб. : Питер, 2014. - 299 с.
3. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения [Текст] / Б.
Хоган ; пер. Е. Матвеев = HTML5 and CSS3. Level Up with Today's Web Technologies /
Hogan, B. P. . - 2-е изд. - СПб. : Питер, 2014. - 320 с.
Дополнительная
4. http://htmlbook.ru/html/style - электронный ресурс.
5. Дронов В. А. Самоучитель Adobe Dreamweaver CS5.5 [Text] / Дронов, В. А. - СПб. : БХВПетербург, 2012. - 379 с.
6. Рейсинг Дж. JavaScript. Профессиональные приемы программирования [Text] / Рейсиг, Дж. СПб. : Питер, 2008. - 352 с
4
Содержание отчета
1. Название работы, цель работы, задание в соответствии с вариантом.
2. Листинги программ на языке гипертекстовой разметки.
3. Картинки web-страниц в браузере.
4. Выводы.
1. Работа с гипертекстом
1.1. Подготовка к работе
По указанной литературе изучить:
структуру html-документа;
понятия тега и теговой пары;
возможности форматирования гипертекста.
1.2. Задание и порядок выполнения работы
1. Задание 1. Создать Web – страницу, которая выводит в браузер фразу «Мой первый
HTML-документ». Для этого:
1.1.Открыть текстовый редактор Блокнот и вести в него текстовые строки, приведенные в
виде листинга, на рис. 1.
<!DOCTYPE html>
Тип документа HTML5
корневой элемент
<html>
«голова» документа
<head>
«заголовок» документа
<title>Заголовок
служебная информация о
документа</title>
кодировке документа
<meta charset=utf-8">
завершение
«головы» документа
</head>
«тело» документа,
<body>
Мой первый HTML-документ текстовая часть
завершение «тела» документа
</body>
завершение документа
</html>
Рис. 1. Листинг программы
Вид документа в текстовом редакторе Блокнот рис. 2:
Рис. 2. Текст в текстовом редакторе Блокнот
1.2. Командой Сохранить как вызвать одноименное окно (рис. 3). В поле Папка установить папку, в которую Вы будете сохранять файлы, например HTMLab. В поле Кодировка
выбрать UTF-8 (доступную большинству Браузеров), в поле Имя файла ввести имя, например 1.html (расширение txt заменить на html) и нажать кнопку Сохранить.
5
Рис. 3. Окно диалога Сохранить как…
1.3. Просмотреть результат работ html-программы в браузере, запустив любой браузер,
например Google Chrome, и в адресной строке указать путь к сохраненному файлу. В случае безошибочного ввода программы в браузере появится результат исполнения, приведенный на рисунке 4.
Рис. 4. Отображение web-страницы в браузере.
1.4.Скопировать результаты работы в Отчет.doc.
2. Задание 2. Вывести в Web – браузер четверостишие, разбитое на строки. Стихи взять
по памяти из известных Вам авторов или скачать из Internet.
В html форматирование текста достигается за счет использования специальных тегов
переноса строки <br>. Его ставят в то место текста, начиная с которого необходимо сделать перенос. Пример выполнения приведен на рис. 5.
Рис. 5. Создание новой строки
2.1. Внести изменения в файл по заданию.
2.2. Сохранить изменения в файле и перейти в браузер,
2.3. Щелкнуть мышью в адресной строке и нажать на клавишу <Enter> (можно использовать кнопку Обновить). В браузер загрузится файл с изменениями (Рис. 6).
2.4. Результаты работы поместить в Отчет.doc
6
Рис. 6. Отображение задания 2 в браузере.
3. Задание 3. Отформатировать четверостишие по Заданию 2. Каждую строку представить разным стилем: символами разного цвета, размера и гарнитурой шрифта.
Управлять внешним видом выводимого текста можно с помощью тэговой пары <FONT>
</FONT> (тег считается в HTML5 устаревшим и от его использования постепенно отказываются в пользу стилей <Style>).
Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как
размер, цвет и гарнитура. Имеет следующий синтаксис:
<font>Текст</font>
Он ставится в то место текста, начиная с которого необходимо сделать изменение символов.
У тэга есть несколько атрибутов:
– size – отвечает за размер символов выводимого текста. По умолчанию этот атрибут равен 3. Если атрибут указать большим числом размер шрифта увеличится, если меньшим –
уменьшится (принято изменять размер от 1 до 7).
– color – указывает, каким именно цветом следует вывести текст, расположенный внутри
тэговой пары. Атрибуту color указывается цвет в виде триады в шестнадцатеричной системе:
COLOR = #RGB (красный, зеленый, синий) или с указанием цвета латинскими символами –
Задание 15 рис.21.
– face – определяет гарнитуру шрифта. Например, face="Arial" (имя шрифта Arial). Поддерживаются браузерами универсальные семейства шрифтов:
serif – шрифты с засечками, типа Times; sans-serif – рубленные шрифты (шрифты без засечек или гротески), представитель – Arial; cursive – курсивные шрифты; fantasy – декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
Пример выполнения задания приведен на рис. 7.
Рис. 7. Форматирование текста в HTML
3.1. Внести изменения в файл по заданию.
3.2. Сохранить изменения в файле и перейти в браузер,
3.3. Щелкнуть по кнопке Обновить. Файл с изменениями в браузере на рис. 8. Результаты
работы поместить в Отчет.doc
7
Кнопка
обновить
Рис. 8. Отображение задания 3 в браузере
Изменять размер шрифта в HTML5 можно с помощью тегов < big> и <small>, например:
обычный текст, <big>большой текст</big>,
<big><big>текст еще больше</big></big><br>
обычный текст, <small>маленький текст</small>,
<small>текст еще меньше</small><br>
обычный текст <tt>моноширинный текст</tt><br>
4. Задание 4. Создать новую Web-страницу, в которой текст, разбит на 3 абзаца. Текст
скопировать с любимой страницы Internet.
Выделить абзацы невозможно простым нажатием <Enter>. Для создания абзацев используют в HTML тэг
<P> Текст абзаца </P>,
что позволит отделить один абзац от другого.
Рис. 9. Создание абзацев
Сохранить файл под именем 1_A.html и проверить оформление абзацев в браузере
(рис.10).
Рис. 10. Отображение задания 4 в браузере.
Если сравнить рис. 9 и 10, то можно заметить, что в начале первого и конце третьего абзаца отсутствует слово <!DOCTYPE>, т.к. оно включено в недопустимые для отображения
Браузером угловые скобки < >. Для размещения в тексте недопустимых символов, их нужно
8
заменить последовательностью символов, называемых литералом. Литералы HTML начинаются с символа & и заканчиваются символом ; (точка с запятой). Между ними помещается
определенная последовательность букв. Литералов в HTML довольно много. Часто применяемые литералы приведены в табл. 1.1.
Таблица 1.1. Некоторые литералы языка HTML
Так, символ < определяется литералом &lt;, а символ > – литералом &gt;. После внесения
литералов вместо угловых скобок < >: получим после проверки иное отображение символов
текста.
Рис. 11. Использование литералов
Рис. 12. Отображение «запрещенных» символов в браузере
5.
Задание 5. Введите в текст по смыслу запрещенные символы из табл. 1.1 и замените
их литералами. Проверить и скопировать в отчет результат работы.
6.
Задание 6. Произвести выравнивание текста с абзацами по Заданию 4: первый абзац –
по центру, второй – по левому краю, третий – по правому.
9
У тэга <P> имеется атрибут align (устаревший в HTML5), с помощью которого можно
управлять форматированием текста внутри данного абзаца. Например,
<P ALIGN=LEFT> Текст, прижатый к левому полю</P>
<P ALIGN=CENTER> Текст, по центру</P>
<P ALIGN=RIGHT> Текст, прижатый к правому полю</P>
<P ALIGN=JUSTIFY> Текст, выровненный по ширине окна браузера </P>
Проверить оформление абзацев в браузере и скопировать в отчет.
7. Задание 7. Изменить начертание символов в тексте с абзацами по заданию 4. Установить начертание символов первого абзаца полужирным (B), второго абзаца – курсив (I),
третьего абзаца – подчеркнутым (U).
Любой текстовый редактор позволяет менять начертание шрифта, делая текст полужирным (bold), наклонным (italic) или подчеркнутый (underline). Все три варианта начертания
можно получить, используя тэги, соответственно: <B> </B>, <I> </I> и <U> </U>. Проверить
оформление документа в браузере (рис. 13).
Рис. 13. Отображение изменения начертания символов
Задание 8. В заданном тексте установить начертание первого абзаца полужирный
курсив, второго абзаца – курсив подчеркнутый, третьего абзаца – подчеркнутый полужирный.
Применение сразу трех тэгов даст тройной эффект, закрывающиеся тэги идут в обратном
порядке: <B> <I> <U> . . . . </U> </I> </B>
Проверить оформление документа в браузере.
9. Задание 9. Добавить в Web – страницу заголовок к тексту с абзацами и оформить его
в качестве заголовка первого уровня с размещением по центру.
Проверить оформление документа в браузере (рис. 14).
8.
Рис. 14. Добавление Заголовка на web-страницу.
Существуют тэги, для заголовков. Всего шесть заголовков, причем каждый последующий
выводится шрифтом меньшего размера. Первый самый крупный шрифт
<H1> Заголовок 1</H1>
<H2> Заголовок 2</H2>
<H3> Заголовок 3 </H3>
10
<H4> Заголовок 4</H4>
<H5> Заголовок 5</H5>
<H6> Заголовок 6 </H6>
Эти теги могут использоваться с параметром горизонтального выравнивания align (left –
слева, right – справа, center – по центру, justify – по ширине). Например:
<h5 align=”center”> Это Заголовок 5 уровня </h5>
10. Задание 10. В заданном тексте уменьшить стиль заголовка и выделить его горизонтальной линией.
Чтобы дополнительно выделить на Web-странице Заголовок существует специальное
средство – горизонтальная линия, создаваемая с помощью одинарного тега <hr>:
<h3 ALIGN=CENTER> DOCTYPE </h3>
<hr>
<P ALIGN=CENTER> <B> Элемент &lt; !DOCTYPE &gt; в начале документа…….
Рис. 15. Акцентирование заголовка горизонтальной линией.
11. Задание 11. Акцентировать на Web – странице отдельные, наиболее важные фрагменты текста. Для этого необходимо сначала убрать предыдущее форматирование, а затем
сделать новое.
Для выделения фрагментов текста существуют теги, приведенные в табл. 1.2.
Таблица 1.2. Теги, выделяющие фрагменты текста
Например, теги <strong> и <em> – это нечто большее, чем просто выделение текста. Они
дают фрагменту текста, являющемуся их содержимым, особое значение с точки зрения Webобозревателя. Они говорят, что данный фрагмент текста является важным, и на него следует
обратить внимание посетителя.
Тег <strong> делает фрагмент текста очень важным, а тег <em> – менее важным. Например,
<p><strong>Я – очень важный текст и поэтому набран полужирным
шрифтом!</strong> Прочитайте меня в первую очередь! </p>
11
<p><em> А я – менее важный текст и набран курсивом. </em> Не забудьте прочитать и меня, но можете сделать это потом.</p>
По аналогии с примером, акцентируйте фрагменты абзацев Вашего текста и проверьте
оформление документа в браузере
12. Задание 12. Добавьте на Web-страницу в виде комментария адрес главного корпуса
ПГУТИ, e-mail и телефон
Комментарий – это фрагмент HTML-кода, который не выводится на Web-страницу и не
обрабатывается Web-обозревателем. Он служит для того, чтобы Web-дизайнер смог оставить
текстовые заметки. Текст комментария помещают между открывающим тегом <!-- и закрывающим тегом --> и обязательно отделяют от этих тегов пробелами. Например: …
<html>
<body>
……..
<!-- Я – комментарий. Меня не видно на Web-странице. -->
</body>
</html>
Проверить оформление документа в браузере.
13. Задание 13. Создать Web-страницу (1_Формула.html), в которой отобразить:
формулу, заданную по варианту из табл. 1.3,
аббревиатуру нашего университета (табл. 1.2), с всплывающим окном подсказки.
Пример листинга с использованием тегов из табл. 1.2 приведен на рисунке 16.
Таблица 1.3. Варианты заданий
Вариант
Формула
Вариант
Формула
2
2
1
S=a +c·b
7
S = k * a2 - b2
2
V = pi * R2 · h
8
S = pi * R2
3
a3 + 3 * b2
9
a2 - 2 · b3
4
a2 - 2 * a * b + b2
10 sin2(x) + cos2(x) = 1
5
Y=a3 + 3 · a2 * b 2 + b3
11 T=a3 - 3 * a2 * b2 - b3
6
Si = 0.2 * bi + ai
12 Pi=Pi-1* sin(k*Xi)
В html Теги <SUP> и <SUB> отвечают за подстрочное и надстрочное написание текста
соответственно.
Они чаще всего используют при написании, каких либо формул.
Например: Y=X<sup>2</sup>
H<sub>2</sub>O
Тег <ABBR> определяет текст, заключенный в этот тег, как аббревиатуру. С помощью атрибута title можно задать всплывающую подсказку с расшифровкой аббревиатуры (см. рис.
16).
Тег <PRE> служит для ввода текста без форматирования, то есть с сохранением всех пробелов и переносов строк. При использовании этого элемента текст выводится моноширинным шрифтом. Тег <PRE> часто используют для вывода кодов программ. Внутри этого элемента можно применять большинство элементов форматирования текста.
12
Рис. 16. Отображение формул на web-странице
14. Задание 14. Создать Web-страницу (1_Style.html) в которой текст оформить, с использованием тега стилей <Style>. Текс и стили выбрать по желанию.
Тег <style> применяется
для
определения
стилей
элементов
веб-страницы.
Его необходимо использовать внутри контейнера <head> . Он имеет следующий синтаксис:
<head>
<style type="text/css">
...
</style>
</head>
Можно задавать более чем один тег <style>. Тег имеет следующие атрибуты:
media – определяет устройство вывода, для работы с которым предназначена таблица стилей.
type – сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили. Пример использования стилей приведен на рисунке 17.
13
Рис. 17. Использование стилей в HTML – документах.
15. Задание 15. Создать Web-страницу (1_Цитата.html) в которой разместить известную
Вам цитату понравившегося автора. Цитату вывести на фоне символами, цвета которых
заданы в табл. 1.4. Пример задания приведен на рис. 21.
Таблица 1.4. Варианты заданий.
N
1
2
3
4
Цвет
фона
Yellow
Aqua
Pink
Lime
Цвет
символов
Green
Navy
Purple
Red
N
5
6
7
8
Цвет
фона
Blue
Red
Cream
Purple
Цвет
символов
Fuchsia
White
Blue
Yellow
N
9
10
11
12
Цвет
Цвет
фона
символов
MenuBar Maroon
InfoBk
Black
BtnFace
Navy
Coral
Teal
HTML имеет парный тег <CITE>, внутри которого размещается HTML-код, создающий
цитату (рис. 21). Web-обозреватель выводит цитату с отступом слева. Проверить оформление документа в браузере.
Тэг <BODY> имеет несколько атрибутов. Применительно к оформлению текста, представляют интерес атрибуты BGCOLOR и TEXT. Атрибут BGCOLOR устанавливает цвет фона, а атрибут TEXT – цвет текста. Оба атрибута используют цветовую триаду RGB (табл.
1.4).
14
Рис. 21. Создание цитаты на web-странице
16. Задание 16. Создать новую Web-страницу (1_С.html) в которой отразить списки из 5
человек Ваших друзей. 1-й – маркированный – с их именами, 2-й – нумерованный с их
фамилиями. Пример выполнения задания – на рис. 22.
Чаще всего на практике используются маркированный список (тэговая пара <UL>) и нумерованный (тэговая пара <OL>). Каждый элемент списка обрамляется тэговой парой <LI>.
Web-обозреватель выводит список с отступом слева и сам расставляет необходимые маркеры или нумерацию.
Проверить оформление документа в браузере.
Рис. 22. Создание маркированного и нумерованного списка
17. Задание 17. Создать новую Web-страницу (1_СM.html), в которой отразить списки по
заданию 16, но вложенными друг в друга.
Такой список создают с помощью парного тега <dl>.
Внутри него помещают пары "термин – разъяснение", причем термины заключают в парный тег <dt>, а разъяснения – в парный тег <dd>.
Пример подобного списка приведен на рис. 23.
18. Задание 18. Создать новую Web-страницу, в которой написать о себе 5-6 абзацев. Использовать при этом: заголовки, стили, форматирование символов и абзацев по своему
усмотрению, акцент некоторых слов, комментарий об авторе Web-страницы.
15
Рис. 23. Создание одного списка внутри другого списка
Проверить оформление документа в браузере.
Показать преподавателю отчет, в который поместить фото (Scr) Ваших файлов по заданиям 1 – 18, проверенных в браузере.
1.3. Контрольные вопросы для самоподготовки:
1. Назначение Браузера. Какие Браузеры вы знаете?
2. Дать понятия тега и теговой пары.
3. Охарактеризовать структуру документа web-страницы.
4. Назначение секции <HEAD>, <TITLE>.
5. Назначение секции <BODY>.
6. Как с помощью HTML осуществить перенос строки?
7. Как средствами HTML можно организовать абзацы?
8. Какие атрибуты шрифта позволяют форматировать символы?
9. Как в HTML устанавливают начертание символов?
10. Как в HTML осуществить выравнивание текста?
11.Как в HTML установить цвет фона и цвет символов текста?
12. Какие атрибуты тега Style вы использовали в своей работе?
13.Как в HTML выделить текст в заголовок конкретного уровня?
14.Как в HTML создать маркированный и нумерованный списки?
15.С помощью какого тега можно оставить комментарий о себе?
16. Какими способами можно добавить дополнительные пробелы в текст web-страницы?
17.Почему HTML разработан таким образом, что не удается полностью контролировать
внешний вид HTML – документа?
2. Работа с графикой
2.1. Подготовка к работе
По указанной литературе изучить:
виды графики, используемой на web-страницах;
теги для работы с графикой;
способы загрузки файлов рисунков на web-страницу.
2.2. Задание и порядок выполнения работы
1. Задача 1. Создать Web – страницу 2_RisF.html с фоновым Рисунком. Для этого:
1.1.Открыть папку Methods\ Преподаватели. Найти в ней и скопировать в свою папку для
работы файлы с рисунками tulpans.jpg, love.jpg, planeta.jpg, sea.jpg, InYan.png.
1.2.Создать в Блокноте файл 2_RisF.html (при сохранении в поле Кодировка выбрать UTF8).
1.3.Проверить результат работы html-программы в браузере.
16
Существует множество графических форматов файлов, но в WWW используются файлы
форматов JPEG, GIF и PNG
Как правило, все изображения для сайта хранятся в отдельной папке. А пути к ним прописываются. Если графический файл расположен в том же каталоге, что и Html документ, то
достаточно просто указать его имя с расширением.
. Изображения на web-страницах могут использоваться:
в качестве фона. Если размеры рисунка меньше рабочего поля, то он будет размножен
браузером так, что заполнит собой весь экран,
в качестве самостоятельного изображения с указанием конкретного места расположения относительно текста.
Фоновое изображение заполняет собой все пространство элемента, для которого оно задано. Так, например,
тэг <BODY> имеет атрибут BACKGROUND:
<BODY BACKGROUND=” tulpans.jpg “>
с помощью которого, рисунком tulpans.jpg заливает все окно браузера. Если графический файл
расположен в другом месте, то для него требуется указать полный путь доступа, а в Сети –
URL.
Например,
<BODY BACKGROUND= ”http://www.tutorial.ru/pic/ back.giv”>
Для создания фонового изображения достаточно обратиться по имени к рисунку, например (рис. 2.1),
Рис. 2.1. Создание фонового рисунка в HTML
1.4. Внести изменения в файл 2_RisF, заменив первоначальный рисунок другим –
planeta.jpg. Просмотреть результат изменений в Браузере.
1.5. Сделать выводы, относительно вида заполнения экрана фоновым рисунком с учетом
его размеров.
1.6. Результаты работы с соответствующими выводами поместить в Отчет.doc
2. Задача 2. Создать Web – страницу 2_Ris.html с Рисунком в виде самостоятельного
изображения.
Для привязки изображений к HTML – документу существует одинарный (не имеющий обрамляющей пары) тэг <IMG>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения. Синтаксис тега:
<IMG src=”URL”>
Здесь URL является адресом графического файла (или полным его именем), содержащего
изображение. Все, что относилось к имени, используемого в URL тэга <BODY>, справедливо
и для тэга <IMG>.
Атрибуты тега <IMG> и их значения приведены в таблице 2.1.
17
Табл. 2.1 Атрибуты тега <IMG>
Атрибут
Назначение атрибутов
Задает URL-адрес изображения (если файл с изображением находится в
SRC="файл"
той же директории, что и HTML-документ, то достаточно просто указать
имя файла). Этот атрибут является обязательным.
Задает альтернативный текст, который будет выводиться вместо рисунка
ALT="текст"
(для Браузеров, не поддерживающих работу с графикой)
Задает расположение текста по отношению к рисунку со значениями: ТОР
ALIGN="тип" (сверху), MIDDLE (посередине), BOTTOM (снизу), LEFT (слева), RIGHT
(справа)
BORDER=n
Задает толщину обрамляющей изображение рамки в пикселах
Задает высоту изображения в пикселах или в процентах от высоты окна
HEIGHT=n(%)
браузера
WIDTH=n(%) Задает ширину изображения в пикселах или в процентах
HSPACE=n
Задает свободное пространство слева и справа от изображения (в пикселах)
VSPACE=n
Задается свободное пространство над и под изображением (в пикселах)
Пример вывода изображения формата 50х50 пикселей без рамки, хранящегося в файле Italiy.png. (изображение физически размещено в том же каталоге, что и HTML – документ):
<IMG SRC =” Italiy.png” WIDTH=50 HEIGH=50 BORDER=0 ALT=”Чудесная картина”>
На рис. 2.2 представлен листинг html – документа, оформленного с использованием фонового изображения моря и фотографии единства начал (скопированный файл InYan.png), а
на рис. 2.3 – результат работы html-программы в браузере.
Убедитесь в полученном результате.
Рис. 2.1. Внедрение графического файла
3. Задание 3. Загрузить в Web – страничку, созданную по заданию 2, но вместо символа
Инь – Ян поместить картинку животного, приведенного в файле love.jpg на фоне моря,
расположив животного на камне в левом нижнем углу рисугка (как показано на рис.
3.1)
Для перемещения вниз рисунка использовать свойства VSPACE=400 (значение подбирается по размеру экрана)
Для выполнения задания использовать атрибуты тега <IMG>, приведенные в табл.2.1.
18
Рис. 2.3. Загрузка рисунка на web-страницу
4. Задание 4. Продолжить оформлять Web-страничку и создать «Этюд на морскую тематику». Найти в Internet картинку морского судна, скопировать с помощью команд контекстного меню в свою папку и разместить затем на фоне моря. Судно должно гармонировать с морем. А Сам этюд – вызывать положительные эмоции.
5. Задание 5. Создать новую Web-страничку, в которую загрузить 3 флага любых стран
и написать о них несколько строк. Строки отформатировать по своему усмотрению,
используя тэговую пару <FONT> </FONT> и его атрибуты. Кроме того, добиться обтекания текста относительно каждого рисунка способами, приведенными в табл.2.1 (слева, по центру, справа от флагов).
Информацию о флагах найти в Internet по адресу: http://flags.redpixart.com/rus/list/. После
сохранения изменений в файле, просмотреть в браузере результаты работы.
Пример обтекания рисунка форматированным текстом слева, при расположении рисунка
Инь Ян справа от текста:
<body>
<img src="InYan.png" align="right" width=150 height=150>
<p Align=Justify><Font Color=blue><B>Инь и ян </B> </Font> – одна из основных концепций древнекитайской натурфилософии. В Китае <Font Color = blue>инь и ян </Font>
служили для выражения светлого и тѐмного, твѐрдого и мягкого.<br>
…
</body>
Рис. 2.4. Web-страница с картинкой при обтеканием текста слева
6. Задание 6. Создать Web-страничку – открытку с заголовком «Поздравляю!», в которой
поздравить друга с днем рождения. Использовать на страничке разные стили и начертания, цвет, размер, подчеркивание отдельных смысловых символов. Обязательно поместить в открытку рисунки на заданную тему с обтеканием текста вокруг рисунков.
Проявите своѐ творчество!
7. Задание 7. Создать Web-страничку с демонстрацией движения в графике.
Порядок выполнения:
19
1. Открыть папку Methods\ Преподаватели \.... Найти в ней и скопировать в свою папку
для работы рисунки rys.jpg, squirrel.gif, bird.gif, horse.gif (животные – рысь, белка, птица,
лошадь).
2. В блокноте написать листинг, в котором отразить: фоновый рисунок (рис. 2.5) рысь в
лесу (rys.jpg), одиночный рисунок белка (squirrel.gif) на дереве и птицу в полете (bird.gif).
Сохранить файл 2_RisB.html.
3. Скопировать задание п.2 в новое окно текстового редактора, но вместо птицы поместить на web-страничку «бегущую» лошадь (horse.gif) – рисунок 2.6. Сохранить файл
2_RisH.html.
4. Проверить отображения страниц в браузере на предмет движения и месторасположения
загруженных объектов (белки – на дереве, птицы и лошади в движении). Если объекты смещены относительно фона, то используя атрибуты тега <IMG> (табл. 2.1), установить их на
соответствующие места.
Бегущую строку на странице можно создает парным тегом <MARQUEE>. Анимация содержимого элемента <marquee> происходит за счет периодического стирания информации
и отображения ее на новом месте. С его помощью можно задать перемещение, как по горизонтали, так и по вертикали. Имеет следующий синтаксис:
<marquee>...</marquee>
Атрибуты тега < MARQUEE > и их значения приведены в таблице 2.2.
Рис. 2.5. Страничка файла «Летящая птица»
20
Атрибут
behavior
Рис. 2.6. Страничка файла «Бегущая лошадь»
Табл. 2. Атрибуты тега < MARQUEE>
Назначение атрибутов
Задает тип движения содержимого контейнера <marquee>
bgcolor
Задает цвет фона
direction
Указывает направление движения содержимого контейнера <marquee>. Имеет значения: down – движение сверху вниз, left – движение справа налево,
right – движение в правую сторону, up – движение вверх
height=n
Задает высоту области прокрутки (в пикселах или процентах)
hspace
Задает горизонтальные поля вокруг объекта. Добавляет пустое пространство
слева и справа вокруг контейнера <marquee> в пикселах
loop
Задает, сколько раз будет прокручиваться содержимое. Любое целое положительное число или -1 (для бесконечного воспроизведения)
scrollamount
Задает скорость движения объекта. Устанавливает расстояние в пикселах
между старым и новым положениями, которые влияют на скорость движения
и плавность хода. Любое целое положительное число в пикселах.
scrolldelay
Задает величину задержки в миллисекундах между движениями
vspace
Задает вертикальные поля вокруг объекта. Добавляет пустое пространство
сверху и снизу вокруг контейнера <marquee> в пикселах
width=n
Задает ширину области прокрутки (в пикселах или процентах)
Пример использования тега и его атрибутов лоя задания 7.2 приведен на рис. 2.7.
21
Рис. 2.7. Листинг web-страницы с белкой и летящей птицей
При ссылке в листинге объекта лошадь, не забудьте установить направление ее движения
влево, и опустить лошадь (подобрав атрибут vspace=250) в нижнюю часть страницы.
8. Задание 8. Изменить стационарное положение белки на дереве и добавить ей однократное движение снизу-вверх. Файл сохранить под именем 2_RisS.html. При выполнении задания использовать атрибуты таблицы 2.2.
Атрибут behavior устанавливает способ движения содержимого внутри элемента <marquee> и имеет следующий синтаксис:
<marquee behavior="alternate | scroll | slide">...</marquee>
Alternate – объект перемещается между правым и левым краем элемента.
Scroll – объект перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала (установлен по умолчанию).
Slide – объект перемещается в направлении, заданным атрибутом direction, доходит до
края области и останавливается.
9. Задание 9. Создать самостоятельную Web-страничку с демонстрацией движения в
графике. Подберите свои объекты, скомпонуйте их на страничке и получите композицию на произвольную тему. Проявите свое творчество!
2.3. Контрольные вопросы для самоподготовки:
1. Какие типы картинок можно загружать в Браузер?
2. Как загрузить в Браузер рисунок в виде фона?
3. Как загрузить в Браузер рисунок в виде самостоятельного изображения?
4. Какие атрибуты шрифта позволяют форматировать символы?
5. Назначение атрибута ALT?
6. Назначение атрибута ALIGN?
7. Как задать толщину обрамляющей изображение рамки?
8. Как задать размеры картинки?
9. Как задать свободное пространство слева и справа от изображения?
10. Как задать свободное пространство сверху и снизу от изображения?
22
3. Работа с таблицами
3.1. Подготовка к работе
По указанной литературе изучить:
этапы создания таблиц;
теги для работы с таблицами;
атрибуты форматирования таблиц.
3.2. Задание и порядок выполнения работы
1. Задача 1. Создать Web – страницу 3_Tabl.html с таблицей расписания занятий в вашем
ВУЗЕ (пример в табл.3.1).
Таблица 3.1. Расписание занятий
1 пара
2 пара
3 пара
Начало 8.10 –
Начало 9.55 –
Начало 11.40 –
окончание 9:45
окончание 11:30
окончание 13:15
Порядок выполнения.
Таблицы HTML создаются в четыре этапа:
На первом этапе в HTML-коде с помощью парного тега <table> формируют саму таблицу:
<table>
</table>
Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она
размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших
цитат, аудио- и видеороликов.
На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги
<tr>; каждый такой тег создает отдельную строку. Теги <tr> помещают внутрь тега <table>:
<table>
<tr>
…..
</tr>
</table>
На третьем этапе создаются ячейки таблицы. Для этого используют парные теги <td> и
<th>. Тег <td> создает обычную ячейку с выравниванием текста по левому краю, а тег <th> –
ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы
с выравниванием текста по центру. Теги <td> и <th> помещают в теги <tr>, создающие строки таблицы, в которых должны находиться эти ячейки:
<table>
<tr>
<th> </th>
</tr>
<tr>
<td> </td>
</tr>
</table>
На четвертом этапе указывают содержимое ячеек, которое помещают в соответствующие теги <td> и <th>.
23
С помощью парного тега <caption> мы можем дать таблице заголовок. Текст заголовка
помещают внутрь этого тега, который, в свою очередь, находится внутри тега <table>.
Выделенный заголовок отобразится над таблицей, например:
<table>
<caption> <strong>Расписание занятий </strong></caption>
………
</table>
Листинг программы и результата ее работы, приведены на рис. 3.1 и 3.2 соответственно.
Рис. 3.1. Листинг создания таблицы в HTML.
Рис. 3.2. Загрузка таблицы на web-страницу
Если требуется как-то оформить содержимое ячеек, то необходимо применить изученные
ранее в лабораторной работе №1 теги. Например, для придания номерам ячеек особую важность, можно воспользоваться парным тегом <em>; в результате они будут выведены курсивом (например, листинг 3).
Листинг 3
2. Задание 2. Оформить созданную страницу по своему вкусу, добавив цвет символов,
размер и начертание символов (см. методическую часть 1 лабораторной работы).
Тег < table > имеет атрибуты, значения которых приведены в таблице 2.
24
Табл. 2. Атрибуты тега < table>
Атрибут
Назначение
Задает горизонтальное размещение содержимого в ячейках; имеет
ALIGN
значения left, center и right (по умолчанию - left)
Задает вертикальное размещение содержимого в ячейках; имеет знаVALIGN
чения top, bottom и middle (по умолчанию - middle)
BORDER=n
Задает толщину обрамляющей таблицу рамки в пикселах
Задает высоту таблицы в пикселах или в процентах от высоты окна
HEIGHT=n(%)
браузера
Задает ширину таблицы в пикселах или в процентах от высоты окна
WIDTH=n(%)
браузера
Задает свободное пространство указанной ширины слева и справа от
HSPACE=n
таблицы (в пикселах)
VSPACE=n
Задается свободное пространство над и под таблицей (в пикселах)
CELLPADDING= Добавляет свободное пространство между границей каждой ячейки и
n
ее содержимым; по умолчанию значение равно 2
CELLSPACING= Добавляет свободное пространство между ячейками таблицы; по
n
умолчанию значение равно 2
BGCOLOR=цвет Задает цвет фона ячейки
BACKGROUND Задает фоновое изображение для таблицы, где URL - адрес источника
=URL
(имя файла с изображением)
С помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с тегами <CAPTION>, <TR>,
<TH> и <TD> в самых различных комбинациях.
Пример выводы таблицы с рамкой толщиной 2 пикселя, выровненным по центру текстом,
с символами начертанием курсив на сером фоне приведен на рис. 3.3.
<table border=2 align=center>
<tr>
<th BGCOLOR=LightGrey> <em> 1 пара </em></th>
<th BGCOLOR=LightGrey> <em> 2 пара </em></th>
<th BGCOLOR=LightGrey> <em> 3 пара </em></th>
</tr>
Рис. 3. Изменение внешнего вида таблицы
Убедитесь в полученном результате.
3. Задание 3. Создать Web – страницу 3_TabOb.html, на которой отобразить таблицу с
итогами потребности оборудования за квартал. Стоимости оборудования разместить в
центре ячеек (см. рис. 3.4). Варианты оборудования заданы в таблице 3.3.
25
Таблица 3.3. Варианты заданий за один квартал
N
1
2
3
4
5
6
7
8
9
10
11
12
Процессор
9 200 р.
8 800 р.
8 300 р.
7 900 р.
7 600 р.
7 200 р.
9 500 р.
9 000 р.
8 500 р.
8 000 р.
7 500 р.
7 000 р.
Монитор
12 500 р.
11 500 р.
10 500 р.
9 500 р.
8 500 р.
7 500 р.
12 000 р.
11 000 р.
10 000 р.
9 000 р.
7 000 р.
8 000 р.
Принтер
7 500 р.
7 000 р.
6 500 р.
6 000 р.
5 500 р.
5 000 р.
9 000 р.
9 500 р.
8 000 р.
11 000 р.
10 500 р.
10 000 р.
Винчестер
2 200 р.
2 100 р.
2 000 р.
1 900 р.
1 800 р.
1 700 р.
2 200 р.
2 100 р.
2 000 р.
1 900 р.
1 800 р.
1 700 р.
Стоимость оборудования за 2 и 3 кварталы отыскать с использованием справочной службы Internet.
Рис. 3.4. Web-страница «Потребности оборудования за квартал»
Таблица может быть логически разбита на три основные части – секции таблицы:
секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее
"шапку";
секцию тела, где находятся строки таблицы, составляющие основные данные;
секцию завершения со строками, формирующими "итоги" таблицы.
Секцию заголовка таблицы формирует тег <thead>, секцию тела – <tbody>, а секцию завершения – <tfoot>. Все эти теги парные, помещаются непосредственно в тег <table> и содержат
теги <tr>, формирующие строки таблицы, которые входят в соответствующую секцию (листинг
на рис. 3.5).
26
Рис. 3.5. Листинг таблицы «Потребность оборудования за квартал»
Выровнять все табличные данные по центру. А итоги акцентировать с помощью средств
форматирования (шрифта, начертания, заливки). Например, <td align=center> 7000 р. </td>
<td align=center> 9000 р. </td> <td align=center> 5000 р. </td>.
4. Задание 4. Оформить «шапку» и «итоги» созданной таблицы с использованием цвета
заливки фона и цвета символов, заданных по варианту в таблице 3.4.
Таблица 3.4. Варианты заданий.
N
1
2
3
4
5
6
Цвет
фона
SkyBlue
Red
Cream
Purple
MenuBar
InfoBk
Цвет
символов
Fuchsia
White
Blue
Yellow
Maroon
Black
N
7
8
9
10
11
12
Цвет
фона
BtnFace
Coral
Pink
Aqua
Yellow
Lime
Цвет
символов
Navy
Teal
Purple
Navy
Green
Red
Пример оформленной таблице приведен на рис. 3.6.
Рис. 3.6. Web-страница «Потребности оборудования за квартал»
27
5. Задание 5. Создать Web – страницу 3_Tab20.html из 20 ячеек, содержащую 4 стоки и 5
столбцов. Далее на базе этой таблицы создать таблицу сложной конфигурации с объединением ячеек по строкам и столбцам.
Смежные ячейки таблицы могут объединяться. Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тега <TH> или <TD>, например,
<TD ROWSPAN=2>
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут
COLSPAN тех же тегов, например,
<TD COLSPAN=2>
Порядок выполнения:
5.1. Создадим сначала исходную таблицу из 20 ячеек, приведенную на рис. 3.7.
Рис. 3.7. Таблица из 20 ячеек
5.2. Создадим таблицу сложной конфигурации (рис. 3.8) путем объединения отдельных
ячеек.
Рис. 3. 8. Таблица с объединенными ячейками.
5.3. Сначала объединим ячейки по горизонтали, т.е. ячейки 2 и 3 таблицы (рис.3. 8), а затем ячейки 4 и 5.
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующее:
1. Найти в коде HTML тег <td> (<th>), соответствующий первой из объединяемых ячеек
(если считать ячейки слева направо).
2. Вписать в него атрибут colspan и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
3. Удалить теги <td> (<th>), создающие остальные объединяемые ячейки данной строки.
Скорректированный фрагмент кода, создающий первую строку этой таблицы, будет выглядеть следующим образом:
<tr>
28
<th>1</th><th colspan=2>2+3</th><th colspan=2>4+5</th>
</tr>
5.3. Аналогично объединить ячейки 12 + 13 + 14 + 15. Код и внешний вид объединенных
ячеек приведены на рис. 3.9.
Рис. 3.9. Таблица объединенных ячеек по горизонтали.
5.4. Для объединения ячеек по вертикали (рис. 3.10) необходимо выполнить следующие
действия:
1. Найти в коде HTML строку (тег <tr>), в которой находится первая из объединяемых ячеек
(если считать строки сверху вниз).
2. Найти в коде этой строки тег <td> (<th>), соответствующий первой из объединяемых ячеек.
3. Вписать в него атрибут rowspan и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
4. Просмотреть последующие строки и удалить из них теги <td> (<th>), создающие остальные объединяемые ячейки.
Рис. 3.10. Таблица объединенных ячеек по вертикали
Как видно из листинга удален из второй строки тег <td>, создающий шестую ячейку, поскольку она объединилась с первой.
5.5. После сохранения изменений в файле, просмотреть в браузере результаты работы.
29
6. Задание 6. Создать Web – страницу, содержащую список Ваших друзей, приведенный в
качестве примера в табл. 3.4.
7. Задание 7. В созданной таблице объединить поля <Фамилия> и <Имя> в одно поле
<Фамилия Имя>. Во всех строках попарно объединить соответствующие смежные
ячейки. Таблицу отформатировать и расположить данные по центру.
Таблица 3.4. Список друзей
Фамилия
Имя
Телефон
Иванова
Инна
925-12-15
Петров
Сергей
332-59-65
Теплов
Николай
622-48-21
Мирская
Анна
202-98-00
При объединении двух смежных ячеек в одной строке использовать атрибут COLSPAN
тех же тегов, например,
<TD COLSPAN=2>
8. Задание 8. Создать Web-страничку «Итоги сессии». В таблице отобразить 4 столбца: 1
– предметы зимней сессии, 2 – оценки зимней сессии, 3 – предметы летней сессии, 4 –
прогноз сдачи летней сессии. Использовать в таблице разные элементы форматирования (см. табл. 2.2). Поместить под табличку рисунок на заданную тему и поздравить
себя с успешным результатом.
Таблица. Итоги первого года обучения
Итоги 1 семестра
Предметы
Оценки
Прогноз 2 семестра
Шапка1
Предметы
Шапка2
Прогноз
Математика
5
Математика
5
Программирование
4
Информатика
5
Физика
3
Экономика
4
Всего баллов:
12
Всего баллов:
14
Тело
Итоги
Показать преподавателю отчет, в который поместить Scr Ваших файлов по заданиям 1-8,
проверенных в Web-браузере.
3.3. Контрольные вопросы для самоподготовки:
1. Какие теги используются при формировании таблицы?
2. Какие теги используются при формировании строк таблицы?
3. Какие теги используются при формировании ячеек таблицы?
4. Чем отличаются теги <td> от <th>?
5. Какие теги позволяют работать с заголовком таблицы?
6. Как акцентировать содержимое ячеек?
7. Назначение атрибута ALIGN? Возможности его применения в таблицах.
8. Как задать толщину обрамляющей таблицу рамки?
9. Как задать таблицу заданных размеров?
10. Как задать свободное пространство слева и справа от границ таблицы?
11. Как задать свободное пространство сверху и снизу от границ таблицы?
12. Пояснить структуру итоговой таблицы, и, какие теги, участвуют в ее формировании?
13. Как изменить фон в ячейках таблицы?
14. Как в Html-5 создается таблица сложной конфигурации?
30
4. Средства навигации
4.1. Подготовка к работе
По указанной литературе изучить:
понятие гиперссылки;
способы загрузки страницы в браузер;
виды гиперссылок и теги, используемые для их создания.
4.2. Задание и порядок выполнения работы
1. Задание 1. Создать текстовые гиперссылки на Web-странице (4_TH.html). В новой
странице сделать ссылку на файлы из первой лабораторной работы, например, первый –
стихи, сохраненный под именем 1.html, второй – цитата, сохраненный под именем
1_Ц.html.
Для создания гипертекстовой ссылки используется тэг <A>, следующего формата:
<A HREF=”URL”>Любой текст</A>
Буква А означает anchor («якорь»), HREF – Hypertext Reference («Гипертекстовая ссылка»)
URL может быть полным, например:
<A HREF=http://www.infa-m.ru>Издательство INFA-M</A>
Если происходит ссылка на документ, который расположен на том же самом диске, более
того, в том же каталоге, можно применять сокращенную запись URL, указывая только имя
файла, например:
<A HREF=”page15.htm”> Страница 15</A>
Эта гипертекстовая ссылка приведет к загрузке HTML – документа, хранящегося в том же каталоге в виде файла page15.htm.
Листинг программы и результата ее работы, приведены на рис. 4.1. .
Кнопка
возврата
Рис. 4.1. Листинг и результаты работы html-документа.
Этот фрагмент HTML-кода создает абзацы, содержащие сразу две гиперссылки, которые
указывают на разные целевые Web-страницы (стихи и цитату).
31
Тэг <A> может иметь дополнительный атрибут TARGET=, который указывает на способ
загрузки страницы в браузер. Например, следующая ссылка приведет к созданию нового экземпляра (новой вкладки) браузера, в который и будет загружена страница:
<A HREF="page15.htm" TARGET="_BLANK"> Страница 15 </A>
Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается
в том же окне Web-обозревателя), нужно присвоить атрибуту target значение "_self" (это его
значение по умолчанию) или вообще убрать данный атрибут из тега <A>.
На рис. 4.2 приведена программа с использованием разных значений атрибута TARGET
для разных ссылок на текст.
Рис. 4.2. Листинг программы ссылками на гипертекст с разными значениями атрибута TARGET.
Проверить работу html-программы.
Имеется также возможность создать гиперссылку, которая никуда не указывает ("пустая"
гиперссылка). Для этого достаточно задать в качестве значения атрибута href значок # ("решетка"). Например,
<a href="#">А я никуда не веду!</a>
При щелчке на такой гиперссылке ничего не произойдет. Проверить действие "решетки".
2. Задание 2. Добавить в файл 4_TH.html новые гиперссылки, используя интернет адрес
файла, находящегося в другой папке. Создать гиперссылки на текстовой файл и на файл
картинку. Для этого:
2.1. Создать в своей папке, например HTMlab, вложенную папку, например,
D:/HTMlab/P4. В нее скопировать файл списки 1_С.html, созданный в первой лабораторной
работе и файл love.jpg из второй лабораторной работы.
2.2. Добавить к html-документу 4_TH.html гиперссылки на файл список: "P4/1_С.html" и
файл картинки "P4/love.jpg".
Пример демонстрирует ссылку на файл "P4/love.jpg", хранящийся в каталоге P4:
<A HREF="P4/love.jpg" target="_blank">
Рис. 3. Результаты работы html-документа.
Рис. 4.3. Результаты работы html-документа.
32
3. Задание 3. Создать web-страницу (Возврат.html), имеющую ссылку возврата на главную web-страницу.
Создадим свою страничку с гиперссылкой на Web-страницу Русской Википедии, которая
содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг
4.4)
Рис. 4.4. Листинг программы ссылками на статью в Википедии
Рис. 4.5. Исполнение программы ссылкой на статью в Википедии
Рис. 4.6. Web-страница из Википедии загружаемая по ссылке.
4. Задание 4. Создать почтовую гиперссылку (4_P.html), указывающую на адрес электронной почты. Щелчок по ссылке запускает программу почтового клиента, установленную в системе по умолчанию (см. рис. 4.7 и 4.8).
Интернет-адрес такой гиперссылки записывается особым образом.
Допустим, мы хотим создать гиперссылку, указывающую на почтовый адрес
user@mailserver.ru. Согласно стандарту HTML, этот почтовый адрес должен быть записан
так: mailto:user@mailserver.ru, причем между двоеточием после mailto и собственно адресом
не должно быть пробелов.
Тогда наша почтовая гиперссылка будет выглядеть следующим образом:
<a href="mailto:user@mailserver.ru">Отправить письмо</a>
Сохранить файл под именем P_html и загрузить его в Браузер.
33
Рис. 4.7. Web-страница запуска программы почтового клиента
Рис. 4.8. Запуск и настройка программы почтового клиента
5. Задание 5. Создать гиперссылку на Web-странице, срабатывающую от «горячей» (командной) клавиши. Проверить ее работоспособность. Клавишу выбрать по первой букве
Вашей фамилии на английском языке.
В Html-программировании можно указать для гиперссылки "горячую" клавишу. При нажатии этой клавиши и, удерживая нажатой клавишу <alt>, Web-обозреватель выполнит переход по данной гиперссылке.
Для указания "горячей" клавиши предусмотрен необязательный атрибут accesskey тега
<a>. Значение этого атрибута – латинская буква, соответствующая нужной клавише.
На рис. 4.9 приведен листинг программы, придающий клавише Z статус «горячей» клавиши. И, чтобы перейти по ней, пользователю будет достаточно нажать комбинацию клавиш
<alt>+<Z>.
Рис. 4.9. Переход по гиперссылке с помощью клавиши «Z»
Рис. 4.10. Исполнение программы установки «горячей» клавиши
6. Задание 6. Создать Web-страничку с гиперссылкой по «горячей» клавиши на файл
4_TH.html.
34
Для этого внести изменения в тело последнего листинга ссылку на нужный файл, хранящийся в Вашей папке с лабораторными работами, например:
<a href = "file:///D:/HTMlab/4_TH.html" accesskey="K"> Навигация </a>
7. Задание 7. Создать Web-страничку с гиперссылкой по графическому объекту на графический объект.
Язык HTML позволяет использовать в качестве содержимого гиперссылки любой фрагмент блочного элемента, в том числе и графическое изображение, т. е. создать изображение
гиперссылку. Для создания изображения гиперссылки достаточно поместить внутрь тега <a>
тег <img>:
<a href="http://www.w3c.org"><img src="w3logo.gif"></a>
Этот HTML-код создает изображение-гиперссылку указывающую на Web-сайт организации
W3C. А в качестве самого изображения выбран логотип этой организации, который сохранен в
файле в той же папке, где находится файл текущей Web-страницы.
Для выполнения задания скопировать из папки Method\.... в свою папку файлы: car.gif и
cat,gif. Для перехода на рисунок с котом (cat.gif), используя в качестве гиперссылки рисунок
– Машина (car.gif), находящиеся в Вашей папке, необходимо написать строку кода:
<A href= cat.gif”> <IMG src=” car.gif”></A>
Листинг задания с некоторыми элементами форматирования приведен на рис. 4.11.
Рис. 4.11. Листинг ссылки по графическому объекту
Рис. 4.12. Web-страницы графических ссылок
8. Задание 8. Внести изменения в предыдущее задание. Надпись «Ну как, получилось?»
переместите под рисунок с котом. Вместо кота загрузите другую, смысловую картинку по
своему усмотрению. Страничку можно оживить и другими надписями или комментариями. Проявите свое творчество!
9. Задание 9. Создать Web-страничку с гиперссылкой на объект в этом же документе.
Язык HTML позволяет с помощью якоря (anchors) пометить некоторый фрагмент текущей
Web-страницы, чтобы другая гиперссылка могла на него сослаться. Так можно пометить от35
дельные главы длинного текстового документа и пользователь сможет "перескочить" к нужной ему главе, щелкнув гиперссылку, например, в оглавлении.
Якоря создают с помощью тега <a>, как и гиперссылки. Только в данном случае атрибут
HREF в нем присутствовать не должен. Вместо него в тег <a> помещают обязательный здесь
атрибут ID, задающий уникальное в пределах текущей Web-страницы имя создаваемого якоря. Когда создают якорь, в этот тег не помещают ничего.
Листинг, иллюстрирующий пример HTML-кода, создающего якорь на базе файла
1_A.html:
<!DOCTYPE html>
<html>
<head>
<title> Текст с абзацами </title>
</head>
<body>
<a id=metka1> </a>
<P> <h3> Глава 1 </h3> </P>
<P> …… </P>
<P> <h3> Глава 2 </h3> </P>
<P> …… </P>
<a href="#metka1">Глава 1</a>
<P> <h3> Глава 3 </h3> </P>
<P> ……</P>
</body>
</html>
В файл 1_A.html добавить главы (1 – 3) перед абзацами и организовать якорь. Сохранить
файл под другим именем (например, 4_AR.html) и проверить работу якоря в браузере.
10. Задание 10. Создать на Web-странице полосу навигации с гиперссылками, указывающими на другие его Web-страницы. Полоса навигации должна содержать список ключевых элементов HTML
Наборы гиперссылок называются полосами навигации. Горизонтальную полосу навигации
можно сформировать с помощью обычного абзаца или таблицы с одной строкой и нужным
числом ячеек. Вертикальную полосу навигации обычно формируют с помощью таблицы из
одного столбца и нужного числа ячеек с расположением в каждой ячейке своей ссылки.
Гиперссылки полосы навигации могут быть текстовыми или графическими. Полосу гиперссылок всегда выделяют, чтобы привлечь к ней внимание посетителя. На рис. 4.13 представлен пример создания полосы навигации к файлам, созданным в предыдущих работах.
Рис. 4.13. Web-страница с полосой навигации
11. Задание 11. Создать Web-страничку с гиперссылкой на графические объекты. Проверить ее работоспособность. Взять интересующую вас тему, найти самостоятельно текст и
рисунки по теме, отобразить текст и ссылки по тексту на рисунки.
36
В качестве примера выполнения задания 11 на рисунках 14 и 15 показаны Web-страницы
текста с элементами форматирования о городе Севастополе и фотография памятного места,
которая вызывается с помощью гиперссылки.
Рис. 4.14. Web-страница с тексом и гиперссылкой
Рис. 4.15. Web-страница «Памятник погибшим кораблям»
4.3. Контрольные вопросы для самоподготовки:
1. Какие теги используются при навигации по страницам?
2. Пояснить URL адрес. Полная и сокращенная его формы.
3. Как осуществить гиперссылку с созданием новой вкладки браузера, в который и будет
загружена страница?
4. Как осуществить гиперссылку, при переходе на которую, целевая Web-страница открывается в том же окне Web-обозревателя?
5. Как создать web-страницу, имеющую ссылку возврата на главную страницу?
6. Как создать почтовую гиперссылку?
7. Как создать гиперссылку на Web-странице, срабатывающую от горящей клавиши?
8. Как задать толщину обрамляющей картинку рамки?
9. Как осуществить ссылку на графический объект?
10. Как осуществить ссылку по графическому объекту?
37
5. Работа с формами
5.1. Подготовка к работе
По указанной литературе изучить:
понятие формы и ее установка на web-странице;
назначение основных элементов на форме;
способы создания элементов на форме.
5.2. Задание и порядок выполнения работы
1. Задание 1. Создать файл (5_Форма1.html) и разместить в нем форму, содержащую окна
ввода Вашего: «имени», «фамилии», «логина» и «пароля (рис. 5.1).
Форма предназначена для обмена данными между пользователем и сервером. Установить
форму на web-странице можно с помощью парного тега <form>. Этот тег имеет ряд атрибутов, из которых наибольшее значение имеют action и method. При помощи этих атрибутов
задается способ отправки данных серверу.
<form action="html_form_action.php" method=get>
Атрибут action указывает адрес расположения файла, который будет обрабатывать данные
формы. Атрибут method может принимать следующие значения: GET и POST. При использовании метода GET данные формы передаются непосредственно в адресной строке (там, где
вы вводите адрес сайта) в качестве параметров. Остальные атрибуты формы приведены в
табл. 1.
Таблица 1. Атрибуты тега < form >
Атрибут
Значение атрибута
acceptУстанавливает кодировку, в которой сервер может принимать и обрабаcharset
тывать данные
action
Адрес программы или документа, который обрабатывает данные формы
autocomplete включает автозаполнение полей формы
enctype
Способ кодирования данных формы
method
Метод протокола HTTP
name
Имя формы
novalidate
Отменяет встроенную проверку данных формы на корректность ввода
target
Имя окна, куда обработчик будет загружать возвращаемый результат
Рис.5.1 Форма для ввода реквизитов
38
Тег <input> является одним из элементов формы и позволяет создавать разные элементы
интерфейса и обеспечить взаимодействие с пользователем. Главным образом тег <input>
предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Он позволяет задавать следующие элементы формы:
текстовое поле (text)
поле с паролем (password)
переключатель (radio),
флажок (checkbox)
скрытое поле (hidden)
поле для отправки файла (file)
кнопка (button)
кнопка для отправки формы (submit),
кнопка для очистки формы (reset)
кнопка с изображением (image)
Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания текстового поля:
<input атрибуты>
Атрибуты текстового поля приведены в таблице 2.
Таблица 2. Атрибуты тега < input >
Атрибут
size
maxlength
name
value
Значение атрибута
Ширина текстового поля, которая определяется количеством близстоящих букв одинаковой ширины по горизонтали.
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле.
Имя поля, предназначено для того, чтобы обработчик формы мог его
идентифицировать.
Начальный текст, отображаемый в поле.
Поле для пароля – обычное текстовое поле, но отличается от него тем, что все вводимые
символы отображаются звездочками или другими знаками (в зависимости от вида браузера).
Поле предназначено для того, чтобы никто не увидел вводимый пароль.
Синтаксис создания поля для пароля:
<input type="password" атрибуты>
…
<head>
<title> Поля ввода </title>
</head>
<body>
<form action="handler.php">
<p><strong>Логин:</strong>
<input maxlength="25" size="40" name="login"></p>
<p><strong>Пароль:</strong>
<input type="password" maxlength="25" size="40" name="password"></p>
</form>
…
Выравнивание элементов на форме происходит через атрибут <form align="center">
Листинг создания формы приведен на рис. 5.2, а результаты работы программы в браузере
на рис. 5.1.
39
Рис. 5.2. Создание формы с полями ввода (рис. 5.1)
2. Задание 2. Добавить в созданную форму переключатели, позволяющие выбирать пол
пользователя.
Переключатели (радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Они имеют следующий синтаксис:
<input type="radio" name="имя" атрибуты>
Для выбора определенного значения переключателя по умолчанию используется атрибут checked. На рис. 5.3 приведен листинг выполнения задания.
Рис. 5.3. Добавление в форму переключателя «Ваш пол»
3. Задание 3. Добавить в созданную форму поле ввода Вашего телефона.
Для ввода номера телефона используется специальное поле. По своему виду и работе оно
совпадает с текстовым полем. Синтаксис создания этого поля:
<input type="tel" атрибуты>
Атрибуты полностью совпадают с текстовым полем. Например, для ввода семиразрядного
номера телефона (рис. 5.4) необходимо указать маску. Например,
<strong> Укажите Ваш телефон в формате ххх-хх-хх: </strong> <br>
<input type="tel" name="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{2}"> <br>
Самостоятельно создайте маску для ввода мобильного телефона и проверьте ее работу.
40
а)
б)
Рис. 5.4. Результат примера при вводе а) неправильного и
б) верного телефона
4. Задание 4. Создать новый файл (6_Форма2.html), содержащий Форму с элементами
ввода и управления вводом. В форме предусмотреть:
окна ввода Имени, Группы, Вуза обучения,
переключатели выбора Браузера, заданного по варианту в табл. 5.3,
многострочное текстовое поле ввода комментарий по поводу браузера,
кнопки управления процессом ввода и очистки содержимого полей (см. рис. 5.5). Варианты браузеров для задания приведены в табл. 5.3.
Проверить работу формы-анкеты в браузере.
Рис. 5.5 Отображение анкеты в Браузере
41
Табл. 5.3. Варианты заданий
N
1
2
3
4
Браузеры
Mozilla , Google Chrome, Safari
Mozilla , Google Chrome, Opera
Google Chrome, Firefox, Safari
Android, Google Chrome, Mozilla
N
7
8
9
10
Браузеры
Opera, Firefox, Internet Explorer
Mozilla, Safari, Google Chrome
Google Chrome, Mozilla, Opera
Opera, Google Chrome, Android
5
6
Opera, Google Chrome, Mozilla
Internet Explorer, Android, Opera
11
12
Internet Explorer, Firefox, Opera
Android, Firefox, Android
Многострочный текст – этот элемент формы, предназначенный для создания области, в
которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать
переносы строк, они сохраняются при отправке данных на сервер.
Синтаксис создания поля:
<textarea атрибуты> Текст </textarea>
Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым. Основные атрибуты тега приведены в табл. 5.4.
Табл. 5.4. Атрибуты тега <textarea>
Атрибут
Значение атрибута
cols
Ширина поля в символах
rows
Высота поля в строках текста
maxlength Максимальное число символов текста, которое можно ввести
name
Имя поля, для идентификации обработчика формы
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их
виду сразу становится понятно, что единственное действие, которое с ними можно производить – это нажимать на них. За счѐт этой особенности кнопки часто применяются в формах,
особенно при их отправке и очистке.
Кнопку на web-странице можно создать двумя способами — с помощью тега <input> и тега <button> (с расширенными возможностями, в виде размещения на кнопке пиктограмм).
1. Синтаксис добавления кнопки с помощью тега <input>:
<input type="button" атрибуты>
Атрибуты кнопки приведены в табл. 5.5. А листинг программы Задания4 на рис. 5.6.
Табл. 5. Атрибуты кнопки
Атрибут
Значение атрибута
Имя кнопки, предназначено для того, чтобы обработчик формы мог его иденname
тифицировать.
value
Значение кнопки и одновременно надпись на ней.
Например: <form> <p><input type="button" value=" Нажми меня"></p> </form>
42
Рис. 5.6. Неполный листинг формы «Анкета»
5. Задание 5. Добавить на первую Форму1 кнопку с пиктограммой (рис. 5.7). Для этого
предварительно скопируйте из папки Methods\.. файл Очистить.jpg.
2. Синтаксис добавления кнопки с помощью тега <button> .
<button атрибуты> Надпись на кнопке </button>
Атрибуты кнопки те же, только атрибут value определяет только отправляемое на сервер
значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то
тег <img> добавляется внутрь <button>.
Например:
<form align="center">
<p><button> Отправить </button>
<button>
<img src="Очистить.JPG" alt="" style="vertical-align:middle">
Очистить
</button> </p>
</form>
6. Задание 6 * Для творческих студентов. Нарисовать в графическом редакторе Paint пиктограммы для кнопок «Отправить» и «Очистить». Для этого:
6.1 установить атрибуты каждого из рисунков 16х12 точек;
6.2 нарисовать пиктограммы средствами редактора Paint;
6.3 сохранить их в своей папке с расширением *.jpg,
6.3 загрузить файлы в кнопки на свою форму (см. выполнении задания 8)
43
Рис. 5.7. Отображение Ваших реквизитов в Браузере
7. Задание 7. Создать файл (6_Форма3.html) и разместить в нем Форму, отображающую
курсы валют ЦБК:
в виде списка – заданные по варианту страны,
в виде переключателя – соответствующие им курсы валют,
в виде флагов – страны и территории хождения валют.
Коды валют приведены в табл. 5.6 в соответствии с номером варианта, а в табл. 5.7 – приведен полный список стран и валютных курсов (http://bankir.ru/ kurs/valuta), из которых формируются варианты. В табл. 5.8 приведены страны хождения валют. При выполнении задания
взять 5-6 стран из этой таблицы.
Табл. 5.6 Варианты код валют
N
1
2
3
4
5
6
Цифровые коды
840, 036, 826, 949, 392
208, 840, 980, 960, 756
826, 752, 840, 124, 949
208, 978, 756, 826, 980
840, 352, 826, 392, 398
398, 756, 036, 978, 702
N
7
8
9
10
11
12
Цифровые коды
826, 124, 840, 578, 208
578, 978, 702, 124, 980
398, 960, 826, 756, 978
702, 840, 392, 980, 124
036, 978, 208, 578, 578
124, 978, 980, 752, 949
Табл. 5.7 Валюта и курсы валют
Цифровой
код
036
124
208
352
392
398
578
702
Валюта
Австралийский доллар
Канадский доллар
Датских крон
Исландских крон
Японских иен
Казахских тенге
Норвежских крон
Сингапурский доллар
Курс*
рубля
32,22
31,49
6,23
5,46
3,55
1,87
5,74
27,45
44
752
Шведских крон
5,13
756
Швейцарский франк
38,15
826
Английский фунт
57,56
840
Доллар США
34,32
949
Новая турецкая лира
16,48
960
Китайских юаней
43,86
978
Евро
46,48
980
Украинских гривен
2,94
* Курсы иностранных валют установлены банком РФ на 15 июня 2014 г.
Табл. 5.8. Страны хождения валют
Валюта
Страны и территории хождения валют
Евро
Бельгия, Германия, Италия, Нидерланды, Австрия, Ватикан, Греция,
Ирландия, Люксембург, Португалия, Финляндия, Франция, Испания
Доллар США
Панама, Пуэрто-Рико, Марианские острова, Маршалловы острова,
Микронезия, Палая, Гаити, Гуам, Американское Самоа, Британские
Виргинские острова, США, Малые Тихоокеанские острова США
Флажки используются, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Синтаксис создания флажка:
<input type="checkbox" атрибуты>
У каждого флажка должно быть свое уникальное имя, заданное в атрибуте name. Как и у
переключателя для выбора значения по умолчанию используется атрибут checked.
Список выбора аналогичен по своему принципу переключателю с тем лишь отличием, что
используется он для задания большого количества вариантов выбора, так как они спрятаны
внутри раскрывающегося списка, пока пользователь не нажмет на него.
Синтаксис списка выбора:
<select атрибуты>
<option атрибуты>Пункт 1</option>
<option атрибуты>Пункт 2</option>
</select>
Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли
это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>.
На рис. 5.8 представлена форма, имеющая в своем составе список выбора валют, переключатель Выбора Курса, соответствующий выбранной из списка валюты и флаги, помечающие страны, в которых валюты имеют хождение.
45
Рис. 5.8. Форма курс валют ЦБК
Рис.5. 9. Листинг формы «Курсы валют ЦБК»
46
8. Задание 8. Создать файл Анкета.html и разместить в нем форму, приведенную на рис.
5.10.
Требования к оформлению:
1) поле "Пароль" должно иметь размер 16 символов;
2) среди всех номеров вопроса только один может быть выбран;
3) поле для ответа на вопрос должно содержать четыре строки по сорок символов;
4) кнопка "Очистить форму" должна восстанавливать первоначальный вид формы.
5) разместить в кнопки свои пиктограммы * (задание 6).
Рис. 10. Форма Анкета
5.3. Контрольные вопросы для самоподготовки:
1. Как установить форму на web-страницу?
2. Назначение атрибутов action и method.
3. Назначение тега <input>.
4. Какие элементы формы задаются тегом <input>?
5. Охарактеризовать основные атрибуты тега <input>.
6. Назначение переключателя (радиокнопки). Его синтаксис.
7. Как добавить в форму поле ввода номера телефона?
8. Как установить маску ввода номера телефона?
9. Какие средства позволяют водить однострочный и многострочный тексты на форму?
10. Какие атрибуты тега <textarea> позволяют задавать размеры окна и текста ввода в
нем?
11. Как создать кнопку на форме?
12. Какие атрибуты имеет тег <button>?
13. Назначение флага (checkbox). Его синтаксис.
14. Назначение тегов <select> и <option>.
6. Средства мультимедиа
6.1. Подготовка к работе
По указанной литературе изучить:
мультимедийные возможности html-документов;
элементы управления мультимедиа на html-страницах;
форматы видео и аудио файлов.
47
6.2. Задание и порядок выполнения работы
1. Задание 1. Создать Web-страницу (6_Video.html) в которую добавить видеоизображение «Парковая зона отдыха».
HTML5 может предоставить способ включения видео на web-страницу с использованием
парного тега <video>. Ссылку на видеофайл можно дать в атрибуте src. (Что похоже на добавление изображения через тег <img src="...">). Например,
<video src="video.mp4"></video>
Основные атрибуты тега <video> приведены в табл.1.
Таблица 1. Атрибуты тега < video >
Атрибут
src
width
height
controls
preload
autoplay
Значение атрибута
Указывает интернет-адрес мультимедийного файла, хранящего ролик
Указывает ширину видеоизображения
Указывает высоту видеоизображения
Атрибут без значения. При его наличии в теге, выводится на экран набор элементов управления воспроизведением видео.
Атрибут без значения. При его наличии в теге, загрузка файла с аудиороликом
начнѐтся сразу же после окончания загрузки веб-страницы.
Атрибут без значения. При его наличии в теге, воспроизведение видео начинается сразу по окончании загрузки веб-страницы.
Порядок выполнения задания:
1. Скопировать себе в папку файл Парк.mp4 из папки Methods\...
2. Создать страницу с загрузкой видео (Парк.mp4) в html-файл. Пример создания страницы «Парковая зона отдыха» с загрузкой видео Парк.mp4 и ссылкой на рисунок rose.jpg,
приведен на рис. 1.
3. Проверить работу страницы, вызвав ее в окне браузера.
Рис. 6.1. Пример создания страницы «Парковая зона отдыха»
Как видно браузер вставил видео как рисунок. Для регулирования процессом запуска,
движения и окончания просмотра в видео необходимо добавить кнопку управления. Для этого достаточно включить атрибут controls в тег <video>.
Например (рис. 6.2):
<video src="video.mp4" width="360" height="240" controls> </video>
48
Рис. 6.2. Элементы управления воспроизведением аудиоролика в браузере
На рис. 6.2 отображена кнопка запуска и приостановки воспроизведения, регулятор, показывающий позицию воспроизведения ролика, текстовые поля, выводящие текущую позицию
воспроизведения и продолжительности ролика, а так же регулятор громкости с кнопкой отключения звука. Все, что мы привыкли видеть в обычных приложениях для воспроизведения
музыки, и без установки дополнительных программ.
4. Добавьте к коду атрибут controls и проверьте повторно работу страницы, вызвав ее в
окне браузера. Как видно на рис. 3 под окном видео появилась кнопка управления, с помощью которой можно запустить процесс отображения видео на Вашей странице.
Рис.6.3. Фрагмент страницы с видеоизображением.
Для качественного воспроизведения видео на Вашем компьютере (рис. 6.4) должна быть
установлена программа, поддерживающая видеоролики, например Media Player Classic.
В HTML5 имеются два дополнительных атрибута: preload и autoplay. Атрибут preload сообщает браузеру, что загрузка видеофайла происходит, как только страница загрузится. Это
имеет смысл, если страница предназначена для просмотра важного видео. Если лишь немногие посетители будут смотреть Вашу страницу, тогда можно придать атрибуту preload значение none, чтобы снизить сетевой трафик.
49
Рис. 4. Отображение страницы в Браузере
Пример видео, которое начинает загрузку (но не воспроизведение), в момент загрузки
страницы:
<video src="video.mp4" width="360" height="240" preload> </video>
Пример видео, которое не будет загружаться при загрузке страницы.
<video src="video.mp4" width="360" height="240" preload= "none"> </video>
Атрибут autoplay позволяет воспроизвести видео автоматически при его возможности.
Пример видео, которое начнет загружаться и играть сразу же после загрузки страницы.
<video src="video.mp4" width="360" height="240" autoplay> </video>
5. Внесите изменение в страницу 6_Video.html и установите атрибут " preload="none".
Проверьте, какие изменения произошли при запуске Вашей страницы.
Не все браузеры поддерживают один и тот же формат видео. Для универсального воспроизведения в браузерах видео кодируют с помощью разных кодеков. Тэг <source>, позволяет
включать видео разных форматов, что важно в тех случаях, когда один из них не поддерживается тем или иным браузером.
Имеются три основных видео формата, распространенных в сети:
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
HTML5 обеспечивает способ сделать ссылки на все три файла с помощью тега <source>.
Это тег не парный. Каждый тег <video> может содержать более одного тега <source>. У тега
<source> имеется атрибут type, который помогает браузеру узнавать, какое видео он сможет
воспроизвести. Браузер проходит по списку источников видео по порядку и выбирает первым то, что он в состоянии воспроизвести. Например, фрагмент кода обращения к видеофайлу через разные кодеки будет выгладить следующим образом:
<video width=360 height=240 controls>
50
<source src="Парк.mp4"type='video/webm; codecs= " vp8, vorbis" ' />
<source src="Парк.mp4"type='video/mp4; codecs= "avc1.42E01E,mp4a.40.2" '/>
<source src="Парк.mp4"type='video/mp4; codecs= "theora, vorbis" '/>
Ваш браузер не поддерживает элемент Video
</video>
В случае если браузер не сможет воспроизвести видеофайл из-за несовместимости форматов, внесите изменения в файл 6_Video.html, используя при этом тег <source>.
2. Задание 2. Создать новую Web-страницу (6_Audio.html) в которую добавить аудиоролик «Музыкальная фраза».
HTML5 предоставляет способ включения аудио на веб-страницу с использованием парного тега <audio>. Ссылку на аудиофайл можно дать в атрибуте src. (так же, как и в случае видеоролика). Например,
<audio src="sound.mp3 controls "></audio>
Этот код вставляет в веб-страницу аудиоролик, хранящийся в файле sound.mp3, и выводит
на экран элементы управления (controls) его воспроизведения.
Основные атрибуты тега <audio> приведены в табл. 6.2.
Таблица 6.2. Атрибуты тега <audio>
Атрибут
Значение атрибута
src
Указывает интернет-адрес мультимедийного файла, хранящего ролик
controls
Атрибут без значения. При его наличии в теге, выводится на экран набор элементов управления воспроизведением аудиоролика.
loop
Атрибут без значения. При его наличии в теге, воспроизведение ролика после
окончания начнѐтся снова (т.е. зациклится).
preload
Атрибут без значения. При его наличии в теге, загрузка файла с аудиороликом
начнѐтся сразу же после окончания загрузки веб-страницы..
autoplay Атрибут без значения. При его наличии в теге, воспроизведение ролика начинается сразу по окончании загрузки веб-страницы.
Пример, использования атрибутов тега <audio>:
<audio src="sound.mp3" controls autoplay></audio>
Для работы со звуковыми файлами на компьютере должна быть установлена звуковая
плата и программа воспроизведения звука, например WINAMP.
1. Скопировать себе в папку два файла: Goboe_Stereo.wav и Jason Derulo.mp3 из папки
Methods\....
2. Создать страницу 6_Audio.html с загрузкой аудиоролика (например, Goboe_Stereo. wav).
Пример создания страницы «Музыкальная фраза» с загрузкой звукового файла
Goboe_Stereo.wav, приведен на рис. 6.5,
3. Проверка работоспособности страницы в окне браузера
51
Рис. 6.5. Пример создания страницы «Музыкальная фраза»
Имеются три основных звуковых формата, распространенных в сети:
*.wav
*.mp3
*.aac
Если Ваш браузер не воспроизводит какие-то из звуковых форматов, то в качестве альтернативного варианта можно использовать специальный тег <source>. Этот тег имеет определенные правила использования:
Каждый из альтернативных источников указывается отдельным тегом <source>.
Теги <source> должны присутствовать внутри тегов <audio> и <video> соответствено.
При указании альтернативные источники, интернет-адрес мультимедийного файла надо
указывать в самом теге <audio>.
Например,
…..
<P>.Текст. </P>
<Audio controls autoplay>
<source src="Goboe_Stereo.wav"/>
<source src="Goboe_Stereo.mp3"/>
<source src="Goboe_Stereo.aac"/>
Ваш браузер не поддерживает элемент audio.
</Audio>
<P>.Текст. </P>
Рис.6.6. Страницы с органами управления аудиороликом.
52
Браузер с поддержкой HTML 5 проигнорирует альтернативное содержимое. Браузер, не
поддерживающий HTML5, наоборот, проигнорирует теги <audio>, <video> и <source> как не
известные ему и выведет на экран альтернативное содержимое.
Если Ваш браузер не воспринимает формат *.wav, то загрузите на страничку второй файл
Jason Derulo.mp3 и проверьте ее работу.
3. Задание 3. Создать Web-страницу (6_MulMedio.html) в которой добавить мультимедийный ролик, комментарии на заданную тему и ссылки на другие объекты. Для создания html страниц создать свой или найти в Интернет рекламный ролик на тему, приведенную в табл. 6.3. Проявите свое творчество при работе над web-страницей!
Таблица 6.3
N
Предлагаемая тема рекламы
1
Компьютерная техника
2
Все для ремонта
3
Косметика
4
Все для дома
5
Продукты питания
6
Фотоаппараты и видеокамеры
7
Все для рыбалки
8
Домашний кинотеатр
9
Офисная мебель
10
Все для отдыха
11
Автомобили
12
Белая техника: холодильники, плиты, стиральные машины
6.3. Контрольные вопросы для самоподготовки:
1. Какие видео форматы, распространенны в сети Интернет?
2. Как загрузить в Браузер видеоролик?
3. Назначение атрибута controls?
4. Какие атрибуты тега <video> позволяют устанавливать заданные размеры видео на
web-страницах?
5. Назначение атрибутов preload и autoplay.
6. Назначение тега <source>.
7. Назначение атрибута type.
8. Какие аудио форматы, распространенны в сети Интернет?
9. Как загрузить в Браузер аудиоролик?
10. Назначение атрибута loop?
11. Поясните правила использования тега <source>.
12. Приведите примеры подключения альтернативных источников к html-странице в случае, если Ваш браузер не отображает заданный ролик.
53
Приложение. Интернет-адреса в WWW
URL-адрес – это способ однозначно указать объект в глобальной сети Internet.
Он имеет следующий вид:
протокол://адрес_узла/путь/файл
Протокол – обозначение одного из протоколов, используемых для обращения к ресурсу,
возможные значения: http, ftp, file и другие;
Адрес_узла – доменное имя или IP-адрес компьютера в сети Интернет;
Путь – путь к требуемому ресурсу в сети Интернет;
Файл – имя файла, содержащего html-документ;
Рассмотрим пример гиперссылки:
http://www.somesite.ru/pages/page10.html.
Он содержит и http: – протокол передачи данных, и www.somesite.ru – доменное имя сайта
(имя узла), и путь к файлу page10.html, который нужно получить в папке pages. Поэтому он
называется полным или абсолютным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта.
Однако если гиперссылка указывает на файл, входящий в состав того же Web-сайта, что и
файл текущей Web-страницы, предпочтительнее сокращенный интернет-адрес, содержащий
только имя нужного файла (интернет-адрес Web-сервера и так известен Web-обозревателю).
Такой адрес так же называют относительным, более коротким.
Существуют два типа сокращенных интернет-адресов. Адреса первого типа задают путь к
файлу, который нужно получить (целевому файлу), относительно корневой папки Web-сайта.
Они содержат в своем начале символ / (слэш), который и говорит Web-серверу, что путь
нужно отсчитывать относительно корневой папки.
Корневая папка – это особая папка, находящаяся на диске компьютера, на котором хранится Web-сайт и работает Web-сервер; в этой папке должны помещаться все файлы Webсайта.
Например, интернет-адрес /page3.html указывает на файл page3.html, хранящийся в корневой папке Web-сайта.
А интернет-адрес /arts/article1.html указывает на файл article1.html, хранящийся в папке
arts, вложенной в корневую папку Web-сайта.
Такие интернет-адреса называют относительными и используются в случае, когда нужно
создать гиперссылку на файл, хранящийся в "глубине" Web-сайта (скажем, в другой папке,
нежели файл текущей Web-страницы).
Сокращенные интернет-адреса второго типа, задают путь к целевому файлу относительно
файла текущей Web-страницы. Они не содержат в начале символа слэша – и в этом их важное отличие от абсолютных интернет-адресов.
Рассмотрим несколько примеров подобных интернет-адресов.
Интернет-адрес archive.zip указывает на файл archive.zip, хранящийся в той же папке, что
и файл текущей Web-страницы.
Интернет-адрес chap3/page1.html указывает на Web-страницу page1.html, хранящуюся в
папке chap3, вложенной в папку, в которой хранится текущая Web-страница.
Следующий интернет-адрес ../contents.html указывает на Web-страницу contents.html,
хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница (две
точки в начале пути – так обозначается папка предыдущего уровня вложенности.)
Относительные адреса применяют, если нужно создать гиперссылку на файл, хранящийся
в той же папке, что и текущая Web-страница, одной из вложенных в нее папок или папке
предыдущего уровня вложенности.
В Web-страницах, которые не должны быть опубликованы на Web-серверах, а будут открываться с диска клиентских компьютеров, следует применять только относительные интернет-адреса. В связи с тем, что файловая система компьютера не знает, какую папку считать корневой, то она не сможет правильно интерпретировать абсолютные интернет-адреса
54
(гиперссылки, ссылающиеся на другие Web-сайты, должны содержать полные интернетадреса).
55
Документ
Категория
Без категории
Просмотров
9
Размер файла
2 502 Кб
Теги
yazik, stefanov, gipertekstovoj, izutsheniye, razmetki, html
1/--страниц
Пожаловаться на содержимое документа