Методические указания по выполнению практических работ
Бюджетное образовательное учреждение Омской области среднего профессионального образования
Омский государственный колледж управления и профессиональных технологий
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
по организации практических работ
по дисциплине«Язык HTML»
для специальности
210308 Техническое обслуживание и ремонт радиоэлектронной техники (по отраслям)
Омск 2011
ББК 32.97
М 54
ОДОБРЕНО
Методическим советом ОГКУиПТ
Протокол №___ от «___» ________ 20___г.
Председатель___________ М.Г. Абросимова
Методические указания к выполнению практических работ по дисциплине«ЯзыкHTML»для специальности 210308 Техническое обслуживание и ремонт радиоэлектронной техники (по отраслям)/Автор-сост. Серкова С.П./ Омский государственный колледж управления и профессиональных технологий. – Омск, 2011.
Методические указания содержат материалы по выполнению практических работ. Рекомендации адресованы студентам 5 курса БОУ ОО СПО «ОГКУиПТ».
© Серкова С.П., 2011
СОДЕРЖАНИЕ
Введение. 4
1. Методические указания по выполнению практических работ. 5
Практическая работа 1. Логическое и физическое форматирование HTML-документа. 5
Практическая работа 2. Организация списков средствами HTML. 10
Практическая работа 3. Вставка изображений, звука и видео в HTML-документ. 11
Практическая работа 4. Создание многостраничных документов. 13
Практическая работа 5. Использование таблиц в HTML-документе. 14
Практическая работа 6. Создание фреймовых структур. 16
Практическая работа 7. Создание фреймовых структур. 17
Практическая работа 8. Создание и использование карт изображений. 19
Практическая работа 9. Создание баннеров. 22
Практическая работа 10. Создание web-документов средствами Front Page. 24
Практическая работа 11. Создание web-документов средствами DreamWeaver 25
Практическая работа 12. Использование программы XaraWebStyle для создания элементов дизайна. 29
Практическая работа 13. Создание и заполнение интерактивных анкет и тестовых заданий. 30
Практическая работа 14. Использование каскадных таблиц стилей. 32
Практическая работа 15. Демонстрация индивидуальных заданий. 38
2. Список литературы.. 41
Введение
Практические занятия в среднем профессиональном образовании являются специфическим педагогическим средством организации и управления деятельностью студентов в учебном процессе.
Практическая работа студентов по дисциплине «ЯзыкHTML» проводится с целью:
· систематизации и закрепления полученных теоретических знаний и практических умений студентов;
· углубления и расширения теоретических знаний;
· развития познавательных способностей и активности студентов: творческой инициативы, самостоятельности, ответственности и организованности;
· формирования самостоятельности мышления, способностей к саморазвитию, самосовершенствованию и самореализации;
· развития исследовательских умений.
В данных рекомендациях содержатся планы практических занятий с указанием целей, краткого теоретического обоснования, оборудования, последовательности выполнения.
В соответствии с рабочим учебным планом максимальная нагрузка по дисциплине «ЯзыкHTML» составляет 109 часов. Из них на практическую работу отводится 30 часов.
Методические указания по выполнению практических работ
Тема 4. Форматирование HTML-документа
Основное содержание темы: Логическое и физическое форматирование содержимого HTML документа. Тэги логического и физического форматирования. Дополнительные возможности форматирования. Абзацы, горизонтальные линии, цитаты. Организация списков средствами HTML. Нумерованные и маркированные списки. Списки определений. Создание многостраничных документов при помощи связывания их ссылками. Понятие ссылки. Абсолютная и относительная адресация.
Практическая работа 1. Логическое и физическое форматирование HTML-документа
Цель работы: Получить практический опыт форматирования HTML-документов.
Краткое теоретическое обоснование:
При отображении HTML-документов браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелы. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными. Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:
<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
Возможно использование комбинированных шрифтов:
<I><B>Расписание </B></I> <I>занятий</I> <U> на вторник</U>
Но при этом необходимо помнить следующее правило записи комбинированных тэгов:
| <Тэг-1> <Тэг-2> … </Тэг-2> </Тэг-1> | правильная запись |
| <Тэг-1> <Тэг-2> … </Тэг-1> </Тэг-2> | ошибочная запись |
Существует два способа управления размером текста, изображаемого браузером:
· использование стилей заголовка,
· задание размера основного документа или размера текущего шрифта.
Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки браузера. Стиль Н1 – самый крупный.
Тэг шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.
Тэг <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.
Для изменения цвета шрифта в тэге <FONT> можно использовать атрибут COLOR="X".
Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.
Примеры записи цвета в формате RGB приведены в таблице:
Таблица 1
| Цвет | RRGGBB | Цвет | RRGGBB | ||
| black | Черный | purple | Фиолетовый | FF00FF | |
| white | Белый | FFFFFF | yellow | Желтый | FFFF00 |
| Red | красный | FF0000 | brown | Коричневый | |
| green | зеленый | 00FF00 | orange | Оранжевый | FF8000 |
| azure | бирюзовый | 00FFFF | violet | Лиловый | 8000FF |
| blue | Синий | 0000FF | gray | Серый | A0A0A0 |
С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле.
Современные браузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.
| ALIGN=CENTER | Выравнивание по центру |
| ALIGN=RIGHT | Выравнивание по правому краю |
| ALIGN=LEFT | Выравнивание по левому краю |
При изображении фона, текста браузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки браузера. Эти цвета устанавливаются в начале файла HTML в тэге <BODY…>. Запись цвета аналогична цвету шрифта (см. таблицу 1 п.12 ). Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).
Оборудование: Персональный компьютер
Последовательность выполнения:
Задание 1. Создание простейших файлов HTML
Чтобы создать свой файл HTML, сделайте следующее:
1. Создайте папку HTML, в которой мы будем сохранять созданные Web-страницы.
2. Запустите стандартную программу Блокнот.
3. Наберите в окне редактора простейший текст файла HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY> Расписание занятий на вторник
</BODY>
</HTML>
4. Сохраните файл под именем RASP.HTML.
5. Откройте созданную Web-страницу с помощью браузера Internet Explorer.
6. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке браузера.
Задание 2. Управление расположением текста на экране
1. Откройте созданную Web-страницу с помощью программы Блокнот, в котором ваша Web-страница представлена в командах HTML.
2. Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание
занятий
на вторник
</BODY>
</HTML>
3. Сохраните внесенные изменения в файле RASP.HTML, с помощью команд Файл (File), Сохранить (Save). Закройте программу Блокнот.
4. Просмотрите с помощью браузера Internet Explorer новую полученную Web-страницу, используя клавишу F5, или с помощью команд Вид(View), Обновить (Refresh). Изменилось ли изображение текста на экране?
Задание 3. Тэги перевода строки и абзаца
1. Внесите изменения в текст файла HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание<P>
занятий<BR>
на вторник
</BODY>
</HTML>
2. Сохраните внесенные изменения в файле RASP.HTML.
3. Просмотрите с помощью браузера Internet Explorer новую полученную Web-страницу. Как изменилось изображение текста на экране?
Задание 4. Выделение фрагментов текста
1. Внесите изменения в файл RASP.HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<B> Расписание </B><I>занятий</I> <U> на вторник</U>
</BODY>
</HTML>
2. Посмотрите новую полученную Web-страницу.
Задание 5. Использование стилей заголовка
1. Внесите изменения в файл RASP.HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<H1> Расписание </H1><I>занятий</I> <U> на вторник</U>
</BODY>
</HTML>
2. Посмотрите новую полученную Web-страницу.
Задание 6. Задание размера текущего шрифта.
1. Внесите изменения в файл RASP.HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<FONT SIZE="7"> Расписание </FONT> занятий на вторник
</BODY>
</HTML>
2. Самостоятельно измените размер шрифта для текста "занятий на вторник", используя тэг <FONT>.
3. Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.
Задание 7. Гарнитура и цвет шрифта
1. Внесите изменения в файл RASP.HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<U><I><B> <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание </FONT> ></B></I></U>занятий на вторник
</BODY>
</HTML>
2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Задание 8. Выравнивание текста по горизонтали
1. Внесите изменения в файл RASP.HTML:
Задание 9. Задание цвета фона и текста
1. Внесите изменения в файл RASP.HTML:
Контрольные вопросы:
1. Что такое HTML?
2. Что такое тэг?
3. Каких двух видов бывают тэги?
4. Для чего в тэг добавляют атрибуты?
5. Опишите 6 правил записи атрибутов и их значений.
6. Нарисуйте структуру HTML-документа.
7. Какие тэги называются обязательными?
Практическая работа 2. Организация списков средствами HTML.
Цель работы: Получение практических навыков по созданию web-страниц, содержащих списки.
Краткое теоретическое обоснование:
Список – это набор абзацев, которые либо пронумерованы, либо сгруппированы как-то иначе, например, начинаются с одинакового символа (маркера).
Простейший вид списков – ul (ненумерованный):
| <ul> <li>Пункт</li> <li>Пункт</li> </ul> |  |
Второй популярный вид списка – нумерованный – ol. Данный тег имеет атрибут type, который позволяет указать способ нумерации.
| type= | Результат |
| A a | A, B, C a, b, c |
| I i | I, II, III i, ii, iii |
| 1, 2, 3 |
Списки могут быть вложенными один в другой по принципу матрешки. Вместо маркеров можно подставить любое изображение. Можно сделать элементы списка – ссылками.
Оборудование: Персональный компьютер
Последовательность выполнения:
1. Создать файл list.txt в Блокноте и ввести основные форматирующие тэги HTML-документа: <html>, <head>, <title>, <body>. Указать в тэге <title> название документа "Форматирование списков". Сохранить полученный файл как list.htm. Последующие задания выполнятся для файла list.htm.
2. Название документа представить центрированным заголовком первого уровня, а названия разделов заголовками четвертого уровня.
3. Перечень наиболее известных художественных музеев форматировать как неупорядоченный список. Названия российских музеев должны отображаться жирным шрифтом красного цвета. Название Вашего любимого музея подчеркнуть. Просмотреть отображение этого списка на экране.
4. С помощью метода "режем-клеим" (Cut and Paste) образовать две дополнительные копии списка музеев и с помощью атрибута type тэга <ul> определить в качестве маркера окружность (type="circle") и квадрат (type="square"). Просмотреть полученный документ.
5. Последовательность основных этапов разработки прикладных программ форматировать как упорядоченный список. Просмотреть отображение этого списка на экране.
6. С помощью метода "режем-клеим" (Cut and Paste) образовать две дополнительные копии списка основных этапов разработки прикладных программ и с помощью атрибута type тэга <ol> определить в качестве нумерующих знаков большие римские цифры (type="I") и строчные буквы (type="a"). Просмотреть полученный документ.
7. Простой глоссарий базовых терминов Internet форматировать как список определений. Термины представить жирным шрифтом. Просмотреть отображение этого списка на экране.
8. Форматировать вложенный список, содержащий списки трех уровней. Список первого уровня представить неупорядоченным списком. Список второго уровня представить упорядоченным списком. Список третьего уровня представить неупорядоченным списком.
9. Образовать дополнительный вложенный список. Список первого уровня должен быть упорядоченным списком, а списки второго и третьего уровней должны быть неупорядоченными списками. Дополнительным последним элементом списка первого уровня сделать список определений основных терминов Internet.
Контрольные вопросы:
1. Какой тэг служит для создания маркированного списка?
2. Какой тэг служит для создания нумерованного списка?
3. Какой тэг служит для создания списка определений?
4. Для чего в тэг добавляют атрибуты?