Основное содержание темы: Вставка изображения в документе HTML. Выравнивание изображений, задание размеров изображений. Относительные и абсолютные размеры. Вставка звука и видео. Вставка простых таблиц в HTML-документы. Тэги для вставки таблиц. Тэги, определяющие строку, столбец и ячейку таблице. Выравнивание таблиц и информации в ячейках таблицы. Управление отображением рамок вокруг таблице и отдельных ячеек таблицы.
Практическая работа 3. Вставка изображений, звука и видео в HTML-документ.
Цель работы: Получение практических навыков по созданию web-страниц, содержащих изображения, звук и видео.
Краткое теоретическое обоснование:
На Web-страницах в большинстве случаев используется растровая графика в одном из двух форматов: GIF или JPG. Для встраивания изображений в HTML-документы следует использовать тэг <IMG>, имеющий единственный обязательный параметр SRC, который определяет URL-адрес файла с изображением. Тэг <IMG> также может иметь ряд дополнительных параметров, например параметры выравнивания. Способ выравнивания задаётся при помощи параметра ALIGN. Возможные значения этого параметра: TOP – верхняя граница изображения выравнивается по самому высокому элементу текущей строки; TEXTTOP – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки; MIDDLE – выравнивание середины изображения по базовой линии текущей строки; ABSMIDDLE – выравнивание середины изображения по середине текущей строки; BASELINE, BOTTOM – выравнивание нижней границы изображения по базовой линии текущей строки; ABSBOTTOM – выравнивание нижней границы изображения по нижней границе текущей строки; LEFT – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны; RIGHT – изображение прижимается к правому полю окна, текст слева.
По умолчанию изображения выравниваются по базовой линии.
Если в документе используются изображения, выровненные по правому или левому краю, то имеется возможность принудительного прерывания обтекания текстом рисунка. Для этого используется тэг <BR> с параметром CLEAR. В качестве значения параметра можно использовать LEFT, RIGHT или ALL. Например, <BR CLEAR=RIGHT>
Браузеры могут воспроизводить звуковые файлы. Например, Internet Explorer может загружать и воспроизводить фоновый звук (для его прослушивания не нужно щелкать на ссылке). Звук хранится в файле. Internet Explorer распознает форматы звуковых файлов WAV, AU и MIDI. Для задания фонового звука в Internet Explorer используется тэг <BGSOUND>, имеющий атрибут LООР.
Атрибут LOOP может принимать следующие значения:
TRUE – бесконечное повторение, пока страница на экране;
FALSE – воспроизведение звукового файла один раз;
число – указание конкретного количества раз воспроизведения.
В документах HTML можно использовать ссылки на звуковые и видеофайлы, которые будут воспроизводиться при применении ссылок. Кроме того, можно использовать специальный тэг <EMBED> для размещения панели проигрывателя (плеера) на странице сразу же при ее загрузке в браузер.
Internet Explorer распознает атрибут DYNSRC тэга <IMG>, который позволяет встраивать видео следующим образом. На странице выводится картинка, при наведении на которую указателя мыши начинается воспроизведение видеоклипа.
Оборудование: Персональный компьютер
Последовательность выполнения:
1. Повторите текст лекции по вставке изображений, звука и видео на страницу сайта.Сделайте записи форматов тегов в тетрадь.
2. Создайте сайт Фамилия_дата.html в своей папке. Поместите на сайт заголовок, теги МЕТА, и текст, придуманный вами.
3. Выполните вставку, обтекание текстом и примените различные способы выравнивания для рисунков.
4. Вставьте два звуковых и два видео файла. Используйте все возможные атрибуты изученных тегов.
5. Покажите результат преподавателю.
Практическая работа 4. Создание многостраничных документов
Цель работы: Получить практический опыт по созданию многостраничных документов.
Краткое теоретическое обоснование:
Одним из важнейших понятий HTML-документа являются ссылки. Гипертекстовый документ – это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Ссылка состоит из двух частей. Первая – это то, что видно на Web-странице, она называется указатель ссылки (anchor), а вторая часть, дающая инструкции браузеру, называется адресной частью ссылки. При щелчке мышью по указателю ссылки браузер загружает документ, записанный в адресной части ссылки. Указателем ссылки может быть слово, группа слов или изображение. Соответственно указатели могут быть текстовыми и графическими.
Единственный параметр тега ссылки, отвечающий за работу ссылки - href. Он определяет URL-адрес документа, на который ссылается пользователь. Кроме ссылок на другие документы можно использовать внутренние ссылки на текущий документ, т.е. сделать некое подобие оглавления. Для создания внутренней ссылки нужно сначала создать указатель, определяющий место назначения, т.е. то, куда будет переходить пользователь при нажатии на ссылку. Ссылки могут указывать на другую Web-страницу или на документы другого типа. Если браузер знает этот тип документа и умеет с ним обращаться, то он просто открывает этот документ в своём окне, например, это касается графических изображений (gif, jpg).
Ещё один параметр тэга <A> отвечает за то, в каком окне будет открыта ссылка: в новом, том же самом или в определённом. Для указания окна используется параметр target (цель). Значения этого параметра могут быть: “_blank” – для открытия ссылки в новом окне; “_top” – для открытия ссылки в существующем окне; и также можно указывать имя любого окна, в котором нужно открыть ссылку.
Оборудование: Персональный компьютер
Последовательность выполнения:
1. Изучите в «Пособии по HTML» раздел «Форматирование», пункт «Ссылки и переходы».
2. Рассмотрите код HTML –страницы history1.htm из папки Пример1.
3. Определите типы ссылок на этой странице.
4. Скопируйте папку Пример1 в свою папку.
5. Найдите неработающую ссылку и исправьте ее.
6. Рассмотрите код HTML –страницы history2.htm из папки Пример2.
7. Определите типы ссылок на этой странице.
8. Скопируйте папку Пример2 в свою папку.
9. Создайте для страницы из папки Пример1 текстовое меню, а для страницы из папки Пример2 – графическое.
10. Скопируйте папку Вариант1 в свою папку. Создайте в этой папке многостраничный документ, используя страницы из папок Пример1, Пример2, Вариант1, файлы Народ.JPG и Страдания.doc, используя различные типы ссылок.
Практическая работа 5. Использование таблиц в HTML-документе
Цель работы: Получение практического опыта по созданию web-страниц, содержащих таблицы.
Краткое теоретическое обоснование:
Одним из наиболее мощных и широко применимых средств в HTML-документах являются таблицы. В HTML таблицы применяются не только как средство представления данных, но и как средство форматирования Web-страниц. Описание таблицы должно располагаться внутри раздела документа <BODY>. Документ может содержать любое количество таблиц, причём допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается с тэга <TR> (Table Row) и завершается тэгом </TR>. Отдельная ячейка таблицы в строке обрамляется парой тэгов: <TD> и </TD> (Table Data) или <TH> и </TH> (Table Header). Тэг <TH> используется для ячеек заголовков таблицы, а <TD> – для ячеек-данных. Различие между этими двумя тэгами заключается лишь в типе шрифта по умолчанию, при помощи которого отображается содержимое ячейки. Содержимое ячейки типа <TH> отображается полужирным шрифтом и располагается по центру в вертикальном и горизонтальном направлениях. Ячейки, определённые тэгом <TD>, по умолчанию отображаются обычным шрифтом, выровненные влево по горизонтали и по центру по вертикали.
Закрывающие тэги </TR>, </TH>, </TD> могут быть опущены – в этом случае концом описания строки или элемента ячейки будет следующий встреченный открывающий тэг. Завершающий тэг таблицы <TABLE> не может быть опущен. Количество строк в таблице определяется числом открывающих тэгов <TR>, а количество столбцов – максимальным количеством тэгов <TD> или <TH> среди всех строк. Если одна или несколько ячеек в конце строки не содержат данных, то их описание можно опустить, так как браузер сам добавит нужное число ячеек при отображении таблицы. Отсюда следует, что построение таблиц, в которых в разных строках разное число столбцов одинакового размера, не допускается.
Таблица может иметь заголовок, который заключается в пару тэгов <CAPTION> и </CAPTION>. Описание заголовка таблицы желательно включать сразу за открывающим тэгом <TABLE>. Перечисленные тэги могут иметь параметры, число и значение которых различны, но в простейшем случае тэги используются без параметров, которые принимают значения по умолчанию.
Оборудование: Персональный компьютер
Последовательность выполнения:
Создайте таблицы, поставьте бордюры, задайте выравнивание по центру, задайте ячейки разным цветом, отформатируйте шрифт (цвет, жирный, курсив, подчеркнутый, верхний и нижний символ).
Задание 1.
| Расписание уроков | |||
| Урок | 111 класс | 112 класс | 113 класс |
| Литература | Алгебра | История | |
| Алгебра | Информатика | Англ.язык | |
| История | Информатика | Алгебра |
Задание 2.
| Месяцы | Журнал "Рестораны Москвы" | "Где?" | "Досуг" | Итого | ||||
| P | % | P | % | P | % | P | % | |
| Январь | 5,62 | 3,37 | 2,25 | 11,24 | ||||
| Февраль | 4,49 | 1,12 | 3,37 | 8,98 | ||||
| Март | 5,62 | 5,62 | 11,24 | |||||
| 1-ый квартал | 15,73 | 4,49 | 11,24 | 31,46 | ||||
| Апрель | 7,87 | 1,12 | 1,12 | 10,11 | ||||
| Май | 4,49 | 1,12 | 5,61 | |||||
| Июнь | 4,49 | 2,25 | 6,74 | |||||
| 2-ой квартал | 12,36 | 5,62 | 4,49 | 22,47 | ||||
| Июль | 11,24 | 2,25 | 13,49 | |||||
| Август | 3,37 | 2,25 | 2,25 | 7,87 | ||||
| Сентябрь | 1,12 | 3,37 | 1,12 | 5,61 | ||||
| 3-ий квартал | 15,73 | 5,62 | 5,62 | 26,97 | ||||
| Октябрь | 7,87 | 1,12 | 8,99 | |||||
| Ноябрь | 2,25 | 2,25 | ||||||
| Декабрь | 6,74 | 1,12 | 7,86 | |||||
| 4-ый квартал | 16,86 | 2,25 | 19,1 | |||||
| Итого за год | 60,67 | 17,98 | 21,35 |
Задание 3.
Распределение бюджета на рекламу фотоаппаратов.
| Месяц | Digital Camera | Hizone.info | Digital Producer | Итого | ||||
| руб. | % | руб. | % | руб. | % | руб. | % | |
| Январь | 4.33 | 1.73 | 2.60 | 8.66 | ||||
| Февраль | 2.60 | 2.16 | 2.89 | 7.65 | ||||
| Март | 3,17 | 2,02 | 2,60 | 7,79 | ||||
| 1ый квартал | 10,10 | 5,92 | 8,08 | 24,10 | ||||
| Апрель | 3.75 | 2.31 | 2.31 | 8.37 | ||||
| Май | 4.62 | 1.44 | 2.45 | 8.37 | ||||
| Июнь | 4.33 | 1.88 | 2.60 | 8.80 | ||||
| 2ой квартал | 12,70 | 5,63 | 7,36 | 25,69 | ||||
| Июль | 3.17 | 2.16 | 2.89 | 8.23 | ||||
| Август | 3.46 | 2.45 | 2.45 | 8.37 | ||||
| Сентябрь | 3.75 | 1.73 | 2.16 | 7.65 | ||||
| 3ий квартал | 10.39 | 6.35 | 7.50 | 24.24 | ||||
| Октябрь | 4.33 | 2.45 | 2.74 | 9.52 | ||||
| Ноябрь | 4.04 | 2.16 | 2.16 | 8.37 | ||||
| Декабрь | 3.46 | 2.31 | 2.31 | 8.08 | ||||
| 4ый квартал | 11.83 | 6.93 | 7.22 | 25.97 | ||||
| Итого за год | 45.02 | 24.82 | 30.16 |
