Задание 8. Размещение графики на Web

государственное автономное профессиональное образовательное
учреждение Свердловской области
«Нижнетагильский государственный профессиональный колледж
им. Н. А. Демидова»
(ГАПОУ СО «НТГПК им. Н.А. Демидова»)
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ПО СОДЕРЖАНИЮ И ВЫПОЛНЕНИЮ КОНТРОЛЬНОЙ РАБОТЫ
по дисциплине
«WEB дизайн»
для студентов заочного отделения
специальности 230113 «Компьютерные системы и комплексы»
Нижний Тагил
2015
1
3.2. Информационное обеспечение обучения
Перечень рекомендуемых учебных изданий,
дополнительной литературы
Интернет-ресурсов,
а) основная литература:
1. Якоб Нильсен, Кара Перниче. Веб-дизайн: анализ удобства
использования веб-сайтов по движению глаз = Eyetracking Web Usability.
— М.: «Вильямс», 2010. — С. 480
2. Якоб Нильсен. Веб-дизайн. — СПб: Символ-Плюс, 2011. — 512 с.
3. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный
справочник.. — "КУДИЦ-ПРЕСС", 2009. — С. 320.
б) дополнительная литература:
1. Якоб Нильсен, Хоа Лоранжер. Web-дизайн: удобство использования
Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2011. —
С. 368.
2. Роббинс Д. Web-дизайн. Справочник.. — "КУДИЦ-ПРЕСС", 2010. —
С. 816
3. Бородаев Д. В. Веб-сайт как объект графического дизайна.
Монография. — Х.: "Септима ЛТД", 2010. — С. 288.
4. Сьюзан Уэйншенк.
Интуитивный веб-дизайн. — издательство
"ЭКСМО" · 2010 г. · 160 стр.
5. Борисенко А.А. Web-дизайн. Просто как дважды два. — издательство
"ЭКСМО" · 2009 г. · 320 стр.
6. Бердышев С.Н. Искусство оформления сайта. —
издательство
"ЭКСМО" · 2010 г. · 248 стр.
в) Интернет-ресурсы
1. www.w3schools.com
2. www.alpet.ru
3. www.diogenes.ru
4. www.opentracker.ru
5. www.w3.org
2
КОНТРОЛЬНАЯ РАБОТА ПО ДИСЦИПЛИНЕ «WEBДИЗАЙН» И МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ЕЕ
ВЫПОЛНЕНИЮ
ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
(варианты вопросов)
1. Структура HTML документа. Основные теги HTML. Пример файла в формате
HTML.
2. Форматирование простого текста, параграфы. Выделение текста, шрифты.
Примеры.
3. Нумерованные и ненумерованные списки. Организация меню. Примеры.
4. Таблицы. Атрибуты тега TABLE. Объединение ячеек. Примеры.
5. Адреса файлов. Ссылки. Картинки.
6. Движущийся текст. Использование звуковых файлов.
7. Понятие формы. Работа с тегами форм.
8. Таблицы стилей CSS. Внутренние стили.
9. Таблицы стилей CSS. Глобальные стили.
10. Таблицы стилей CSS. Связанные стили.
11. Каскадные таблицы стилей.
12. Классы и наследования классов CSS.
13. Понятие кадров. Контейнер <FRAMESET>.
14. Понятие кадров. Тэг <FRAME> и его атрибуты.
15. Рамка кадра. Определение имени кадра и ссылки на кадр.
16. Основы синтаксиса JavaScript.
17. Математические функции JavaScript. Объект Math.
18. Объект JavaScript – document.
19. Объект JavaScript – Date.
20. Объект JavaScript – Image.
21. Объект JavaScript – Window.
22. Работа со строками в JavaScript.
23. Регулярные выражения в JavaScript.
В контрольной должны быть ответы на 2 вопроса. Первый вопрос
определяется
номером
по
списку
в
журнале,
второй
вопрос
соответствует номеру по списку + 10.
3
ПРАКТИЧЕСКАЯ ЧАСТЬ
Создать собственный сайт визитку (от 3 до 5 страниц). При создании использовать
такие технологии как HTML, CSS, Java Script, DHTML.
Сайт-визитка – Это готовый сайт, который содержит самую необходимую и
лаконичную информацию о частном лице.
Сайт-визитка должен содержать:
1. Главная страница, приветствие.
2. Раздел «Новости».
3. Раздел «О себе».
4. Раздел «Фотогаллерея».
5. Раздел «Контакты».
6. Раздел «Полезные ссылки» (Каталог ссылок)
Типовой дизайн сайта-визитки
Схематичное изображение типового дизайна
Сайт должен содержать динамические элементы, написанные при помощи Java
Script, например:
1. Голосование;
2. Приветствие;
3. Меню, которое раскрывается при наведении на надпись.
4. Календарь.
5. Электронные часы (24H).
6. Электронные часы (АМ/PM).
7. Время в разных городах.
8. Счетчик посещений с использованием cookie.
9. Динамическая галерея.
10. Проверка информации введенной в форму.
11. Калькулятор.
12. Скрипт определения и ограничения количества введённых символов в taxtarea
13. Выделение ячейки таблицы бордюром при наведении на нее курсора.
4
МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ВЫПОЛНЕНИЮ
ПРАКТИЧЕСКОЙ ЧАСТИ КОНТРОЛЬНОЙ РАБОТЫ
Основные термины
WWW (World Wide Web) – система навигации, поиска и доступа к
мультимедийным ресурсам с помощью средств гипертекста.
Браузер – программа просмотра гипертекстовых страниц WWW.
Гипертекст – текст, содержащий связи с другими текстами, графической, видиоили звуковой информацией.
HTML (Hypertext Markup Languege) – язык разметки гипертекста.
HTML-документы – это текстовые файлы, в которые встроены специальные тэги.
Тэги (tags) – команды языка HTML.
Структура HTML-документа
<HTML>
<HEAD>
Служебная информация
<TITLE>
Информация об имени страницы
</TITLE>
</HEAD>
<BODY>
<H1>
Основная часть Web-документа
</H1>
</BODY>
</HTML>
5
Задание 1. Создание простейших файлов HTML
Чтобы создать свой файл HTML, сделайте следующее:
1. В папке Мои документы создайте папку с названием своей группы, в которой вы
будете сохранять созданные Web-страницы.
2. Запустите стандартную программу Блокнот (Notepad).
3. Наберите в окне редактора простейший текст файла HTML:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание занятий на неделю
</BODY>
</HTML>
4. Сохраните файл в своей папке под именем RASP.HTM
5. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.
6. Откройте в меню браузера Файл (File), Открыть (Open), Просмотр (Обзор - Browse) и
найдите свой файл и загрузите его. Убедитесь, что название Web-страницы (Учебный
файл HTML) отразилось в верхней статусной строке браузера.
Задание 2. Тэги перевода строки и абзаца
Примечание
В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.34 из Задания 2.
Информация
Существуют специальные команды, выполняющие перевод строки и задающие
начало нового абзаца. Кроме того, существует команда, которая запрещает
программе броузера каким-либо образом изменять форматирование текста и
позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг перевода строки <BR> отделяет строку от последующего текста или
графики.
6
Тэг абзаца <P> тоже отделяет строку, но еще добавляет пустую строку,
которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.
1. Откройте первоисточник Web-страницы – в меню браузера Вид (View), Источник (В
виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором
ваша Web-страница представлена в командах HTML.
2. Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий",
"на неделю" на разных строках:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание<P>
занятий<BR>
на неделю
</BODY>
</HTML>
3. Сохраните внесенные изменения в файле, с помощью команд Файл (File), Сохранить
(Save). Закройте программу Блокнот (Notepad).
4. Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную Webстраницу используя
клавишу F5 или с помощью команд Вид(View), Обновить
(Refresh).
Задание 3. Выделение фрагментов текста
Информация
Тэги выделения фрагментов текста позволяют управлять отображением отдельных
символов и слов. Существует три тэга выделения фрагментов текста:
<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
7
Возможно использование комбинированных шрифтов:
<I><B>Расписание </B></I> <I>занятий</I> <U> на вторник</U>
Но при этом необходимо помнить следующее правило записи
комбинированных тэгов:
<Тэг-1><Тэг-2>…<Тэг-2><Тэг-1>
правильная запись
<Тэг-1><Тэг-2>…<Тэг-1><Тэг-2>
ошибочная запись
1. Внесите изменения в файл:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<B> Расписание </B><I>занятий</I> <U> на неделю</U>
</BODY>
</HTML>
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую
полученную Web-страницу.
Задание 4. Задание размера текущего шрифта.
Информация
Задание размера шрифта может использоваться в середине строки и после
окончания своего действия не разбивает её.
<FONT SIZE = размер_шрифта>
</FONT>
Например:
<FONT SIZE=7>
8
</FONT>
Диапазон установки текущего шрифта – от 1 до 7.
1. Внесите изменения в файл RASP.HTM:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<FONT SIZE="7"> Расписание </FONT>
занятий на неделю
</BODY>
</HTML>
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую
полученную Web-страницу.
Задание 5. Гарнитура и цвет шрифта
Информация
Тэг
<FONT>
предоставляет
возможности
управления
размером,
начертанием и цветом текста.
Смена гарнитуры шрифта
<FONT FACE=”название_шрифта”>
</FONT>
Например:
<FONT FACE=”Arial”>
</FONT>
Смена цвета текста
<FONT COLOR = “название_цвета”>
</FONT>
9
Например:
<FONT COLOR=#FFFFFF>
</FONT>
Стандартные цвета
Аквамарин
aqua
#00FFFF
Белый
white
#FFFFFF
Желтый
yellow
#FFFF00
Зеленый
green
#008000
Золотистый
gold
#FFD700
Индиго
indigo
#4B0080
Каштановый
maroon
#800000
Красный
red
#FF0000
Оливковый
oliv
#808000
Пурпурный
purple
#800080
Светло-зеленый
lime
#00FF00
Серебристый
silver
#C0C0C0
Серый
gray
#808080
Сизый
teal
#008080
Синий
blue
#0000FF
Ультрамарин
navy
#000080
Фиолетовый
violet
#EE80EE
Фуксиновый
fuchsia
#FF00FF
black
#000000
Черный
1. Внесите изменения в файл:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<B> <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание
</FONT></B><BR>
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на
неделю</FONT></I><P>
</BODY>
</HTML>
10
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую
полученную Web-страницу.
Задание 6. Выравнивание текста по горизонтали
Информация
С помощью тэгов HTML можно управлять горизонтальным выравниванием текста.
Если не оговаривать способ выравнивания, все элементы в документе будут
выравниваться по левому краю и иметь неровное правое поле.
Современные браузеры для выравнивания текста используется атрибут
ALIGN=, который встраивается в теги абзаца или заголовка.
ALIGN=CENTER
Выравнивание по центру
ALIGN=RIGHT
Выравнивание по правому краю
ALIGN=LEFT
Выравнивание по левому краю
Например:
<P ALIGN=”CENTER”>
</P>
1. Внесите изменения в файл
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание
</FONT> ></B><BR>
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
</P>
</BODY>
11
</HTML>
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую
полученную Web-страницу.
Задание 7. Задание цвета фона и текста
Информация
При изображении фона, текста браузеры используют цвета, установленные по
умолчанию, - они заданы параметрами настройки браузера. Эти цвета
устанавливаются в начале файла HTML в тэге <BODY…>. Запись цвета
аналогична цвету.
Атрибут BGCOLOR= задает цвет фона страницы;
Атрибут TEXT= определяет цвет текста для всей страницы;
Например:
<BODY BGCOLOR=”BLACK”>
1. Внесите изменения в файл:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00">
<P ALIGN=CENTER>
<B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание
</FONT> ></B><BR>
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
</P>
</BODY>
</HTML>
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную
Web-страницу.
12
На экране вы должны увидеть:
Задание 8. Размещение графики на Web-странице
Информация
Тэг <IMG …> позволяет вставить изображение в документ. Изображение появится
в том месте документа, в котором записан этот тэг. Команда записывается с
одиночным
тэгом,
т.е.
закрывающий
тэг
не
применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в
рабочем каталоге HTML, где находится и наша Web-страница.
Вставка картинки из файла:
<IMG SRC=”имя_файла.расширение”>
Тэг <IMG …> имеет немало атрибутов, которые можно задавать дополнительно.
Они могут располагаться где угодно в тэге после кода IMG.
Атрибуты изображения
Атрибут
ALT
Формат
<IMG SRC="Wagon.gif" ALT="картина">
BORDER
<IMG SRC="Wagon.gif" BORDER="3">
ALIGN
<IMG SRC="Wagon.gif" ALIGN=TOP>
Описание
Если
броузер
не
воспринимает
изображение, вместо него появляется
заменяющий текст.
Задает
толщину
рамки
вокруг
изображения. Измеряется в пикселах.
Выравнивает изображение относительно
текста:
по верхней части изображения – TOP,
по нижней – BOTTOM,
по средней – MIDDLE.
13
HEIGHT
<IMG SRC="Wagon.gif" HEIGHT=111>
WIDTH
<IMG SRC="Wagon.gif" WIDTH=220>
VSPACE
<IMG SRC="Wagon.gif" VSPACE="8">
HSPACE
<IMGSRC="Wagon.gif" HSPACE="8">
Задает
вертикальный
размер
изображения внутри окна броузера.
Задает
горизонтальный
размер
изображения внутри окна броузера.
Добавляет верхнее и нижнее пустые
поля.
Добавляет левое и правое пустые поля.
1. Внесите изменения в файл:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF00">
<P ALIGN=CENTER>
<B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание
</FONT> ></B><BR>
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
</P>
<P ALIGN=CENTER>
<IMG SRC="COMPUTER.gif" BORDER=”4”>
</P>
</BODY>
</HTML>
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную
Web-страницу.
Задание 9. Фоновое изображение графики на Web-странице
Информация
Фоновое изображение – это графический файл с изображением небольшой
прямоугольной плашки. При просмотре в браузере эта плашка многократно
повторяется, заполняя все окно, независимо от его размеров.
Графика, используемая в качестве фоновой, задается в тэге <BODY> в начале
файла HTML.
BACKGROUND=”имя_файла”
14
Например:
<BODY BACKGROUND=”FON.GIF”>
1. Внесите изменения в файл:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BACKGROUND=”FON.GIF”>
<P ALIGN=CENTER>
<B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание
</FONT> ></B><BR>
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
</P>
<P ALIGN=CENTER>
<IMG SRC="COMPUTER.gif" BORDER=”4”>
</P>
</BODY>
</HTML>
2. Сохраните внесенные изменения в файле
3. Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную
Web-страницу
На экране вы увидите:
На самом деле графический файл
FON.GIF выглядит так:
15
Задание 10. Таблицы.
Информация
Таблицы представляют собой особую часть HTML-документа. Данные в ней
организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и
горизонтальных рядов. Каждая клетка таблицы является ячейкой.
Ячейки могут содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
 название таблицы,
 заголовки столбцов,
 ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева
направо. Заполнение начинается с левого верхнего угла и заканчивается правым
нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек
используются пробелы.
Теги оформления таблиц
Форма записи
Примечание
TABLE
<TABLE>текст</TABLE>
Объявление таблиц.
TR
<TR>текст</TR>
Тег строки.
TD
<TD>текст</TD>
Тег данных.
Тег
Атрибуты тега <TABLE>
Атрибут
Форма записи
Примечание
BORDER
<TABLE BORDER=X>
Задает рамку вокруг таблицы.
WIDTH
<TABLE WIDTH=XX%>
BGCOLOR
<TABLE
"#RRGGBB">
Задает ширину таблицы как ХХ% от
ширины страницы или как ХХ
пикселов.
BGCOLOR= Задает цвет фона таблицы.
Атрибуты тегов <TD> и <TR>
Атрибут
Форма записи
Примечание
ALIGN
<TD ALIGN=X>
VALIGN
<TD VALIGN=X>
BGCOLOR
<TD BGCOLOR= "#RRGGBB">
Устанавливает выравнивание по
горизонтали (Right, Left, Center)
Устанавливает выравнивание по
вертикали (Top, Middle, Bottom,
Baseline)
Задает цвет фона ячейки.
ROWSPAN
<TD ROWSPAN =X>
Указывает
количество
охватываемых ячейкой
строк
16
COLSPAN
Указывает количество
охватываемых ячейкой
<TD COLSPAN=X>
столбцов
1. Запустите стандартную программу Блокнот (Notepad).
2. Наберите в окне редактора:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<TITLE> Расписание занятий 5 классов </TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6" FACE="ARIAL"><B> 5 класс </B></FONT><BR>
</P>
<FONT
COLOR="BLUE"
SIZE="4"
FACE="COURIER"><B>
Понедельник
</B></FONT><BR>
<TABLE BORDER="1" WIDTH=100% BGCOLOR="99CCCC">
<TR BGCOLOR="CCCCFF" ALIGN=CENTER>
<TD>Урок</TD> <TD>5 А</TD> <TD>5 Б</TD> <TD>5 В</TD>
</TR>
<TR>
<TD>1</TD> <TD>Русский язык</TD> <TD>Литература</TD> <TD>История</TD>
</TR>
<TR>
<TD>2</TD> <TD>Алгебра</TD> <TD>Информатика</TD> <TD>Англ.язык</TD>
</TR>
<TR>
<TD>3</TD> <TD>История</TD> <TD>Информатика</TD> <TD> Алгебра </TD>
</TR>
</TABLE>
</BODY>
</HTML>
3. Сохраните файл под именем 5.HTM.
17
4. Для просмотра созданной Web-страницы загрузите браузер Microsoft
Internet Explorer.
1. Дополните полученную Web-страницу по аналогии расписанием на
последующие дни: ВТОРНИК, СРЕДУ, ЧЕТВЕРГ, ПЯТНИЦУ,
СУББОТУ.
2. Дополните
полученную
Web-страницу
фоновым
изображением
FON.GIF
На экране вы должны увидеть:
Информация
Построение гипертекстовых связей
Важнейшим свойством языка HTML является возможность включения в
документы ссылок на другие документы. Возможны ссылки:
 на удаленный HTML файл,
 на некоторую точку в текущем HTML-документе,
 на любой файл, не являющийся HTML-документом.
В качестве ссылки можно использовать текст или графику.
Ссылки в пределах одного документа
18
Такие ссылки требуют наличие двух частей: метки и самой ссылки. Метка
определяет точку, к которой происходит переход по ссылке. Ссылка использует
имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от
того, как настроен браузер. Для изменения цвета ссылки используется атрибуты
LINK= и VLINK= тэга <BODY …>
Ссылка:
<A HREF="#ПН">Понедельник</A>
Перед именем метки (ПН), указывающей куда производится ссылка, ставится
символ #. Между символами > и < располагается текст (Понедельник), на котором
производится щелчок для перехода по ссылке.
Метка:
<A NAME="ПН">Понедельник</A>
Задание 11. Ссылки в пределах одного документа.
1. Дополните файл 5.HTM таблицей, содержащей название дней недели, поместив ее в
начало Web-страницы:
…
<P ALIGN=CENTER>
<FONT
COLOR="RED"
SIZE="6"
FACE="ARIAL"><B>5
класс</B></FONT><BR>
</P>
<TABLE WIDTH=100%>
<TR >
<TD>Понедельник</TD>
<TD>Вторник</TD>
<TD>Среда</TD>
<TD>Четверг</TD>
<TD>Пятница</TD>
<TD>Суббота</TD>
</TR>
</TABLE>
<BR>
…
19
2. Вставьте в файл 5.HTM метку, указывающую ПОНЕДЕЛЬНИК:
…
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B>
<A NAME="ПН">Понедельник </A></B></FONT><BR>
…
3. Вставьте ссылку для выбранной метки:
…
<TABLE WIDTH=100%>
<TR >
<TD> <A HREF="#ПН">Понедельник</A> </TD>
<TD>Вторник</TD>
<TD>Среда</TD>
…
4. Сохраните файл.
5. Просмотрите полученную Web-страницу.
На экране вы должны увидеть:
20
Задание 12. Ссылки на другой HTML-документ.
Информация
Ссылки на другой HTML-документ
Ссылки позволяют щелчком по выделенному слову или фразе перейти к
другому файлу.
Ссылка:
<A HREF="5.HTM">5 класс</A>
После имени файла 5.HTM, указывается между символами > и < текст (5
класс), на котором производится щелчок для перехода на этот файл.
1. Загрузите в браузер файл RASP.HTM
2. Внесите изменения в файл:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BACKGROUND=”FON.GIF”>
<P ALIGN=CENTER>
<B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7"> Расписание </FONT>
></B><BR>
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
</P>
<P ALIGN=CENTER>
<IMG SRC="COMPUTER.gif" BORDER=”4”>
</P>
<CENTER>
<TABLE WIDTH=60%>
<TR><TD><A HREF="5.HTM"><FONT COLOR="#0000FF" SIZE="5"><B>5
класс</B></FONT></A></TD><TD><B>6 класс</TD></TR>
<TR><TD>7 класс</TD><TD>8 класс</TD></TR>
<TR><TD>9 класс</TD><TD>10 класс</TD></TR>
<TR><TD>11 класс</TD><TD></TD></TR>
</TABLE>
</BODY>
</HTML>
2. Сохраните файл.
3. Просмотрите полученную Web-страницу.
Подведите курсор к ссылке "5 класс" и по щелчку мыши вы перейдете на другую Webстраницу (файл 5.HTM).
21
Задание 13. Графическая ссылка на другой HTML-документ.
1. Внесите изменения в файл 5.HTM так, чтобы в конце страницы была ссылка на
головную страницу "Расписание занятий" (файл RASP.HTM). В качестве ссылки
используется графический файл:
…
</TR>
</TABLE><BR>
<CENTER>
<A HREF="RASP.HTM"><IMG SRC="BUT.GIF" BORDER="3" ></A>
</CENTER>
</BODY>
</HTML>
В качестве ссылки выступает рисунок, находящийся в файле BUT.GIF.
Так должен выглядеть файл
Так должен выглядеть файл
RASP.HTM
5.HTM
22
Задание 14. Размещение бегущей строки на Web-странице

Используется для создания бегущей строки
<MARQUEE>
</MARQUEE>

Позволяет разместить текст в верхней, средней или нижней части области
бегущей строки.
ALIGN=TOP
ALIGN=MIDDLE
ALIGN=BOTTOM

Используется, чтобы установить режим вывода строки.
o
BEHAVIOR=SCROLL
Прокрутка циклическая
o
BEHAVIOR=SLIDE
Выход и остановка
o
BEHAVIOR=ALTERNATE
Прыжки

Используется для определения цвета фона бегущей строки.
BGCOLOR=название_цвета

Используется для определения направления бегущей строки
DIRECTION=LEFT
DIRECTION=RIGHT
1. Загрузите в браузер файл RASP.HTM
2. Внесите изменения в файл:
…
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
<MARQUEE
ALIGN=MIDDLE
DIRECTION=LEFT><B>ДОБРО
BEHAVIOR=SCROLL
ПОЖАЛОВАТЬ
BGCOLOR="#00FFFF"
НА
НАШ
САЙТ!</B></MARQUEE><P>
</P>
<P ALIGN=CENTER>
<IMG SRC="COMPUTER.GIF" BORDER=”4”>
…
2. Сохраните файл.
3. Просмотрите полученную Web-страницу.
23
Задание 15. Размещение в бегущей строке графики
1. Загрузите в браузер файл RASP.HTM
2. Внесите изменения в файл:
…
<I><FONT COLOR=”#FF00FF” SIZE=6>занятий на неделю</FONT></I><P>
<MARQUEE
ALIGN=MIDDLE
BEHAVIOR=SCROLL
BGCOLOR="#00FFFF"
DIRECTION=LEFT><B><IMG SRC=”RABIT.GIF”>ДОБРО ПОЖАЛОВАТЬ НА НАШ
САЙТ!</B></MARQUEE><P>
</P>
<P ALIGN=CENTER>
<IMG SRC="COMPUTER.GIF" BORDER=”4”>
3. Сохраните файл.
4. Просмотрите полученную Web-страницу.
На экране вы должны увидеть:
24
Задание 16. Атрибуты тэгов для списков (маркированных и
нумерованных)
o
Позволяет задавать тип маркера в произвольном месте текста
TYPE=DISC
TYPE=CIRCLE
TYPE= SQUARE
Например:
<UL TYPE=DISK>
<LI> первый элемент списка
<LI> второй элемент списка
</UL >
o
Позволяет использовать в качестве маркеров строчные и прописные буквы, а также
римские цифры.
TYPE= A (А, В, С, …)
TYPE= a (а, b, c, ...)
TYPE= 1 (1, 2, 3,...)
TYPE=I (I, II, III, ...)
Например:
<OL TYPE=A>
o
Позволяет в середине нумерованного списка пропустить заданное число пунктов
нумерации.
SKIP=число
Например, пропустить четыре следующих пунктов:
<LI SKIP=4>
1. Загрузите в браузер файл RASP.HTM
2. Внесите изменения в файл:
...
<IMG SRC="COMPUTER.gif" BORDER=”4”>
</P>
<CENTER>
<UL TYPE=DISK>
<TABLE WIDTH=60%>
25
<TR><TD><A HREF="5.HTM"><FONT COLOR="#0000FF" SIZE="5"><LI><B>5
класс</B></FONT></A></TD><TD><LI><B>6 класс</TD></TR>
<TR><TD><LI>7 класс</TD><TD><LI>8 класс</TD></TR>
<TR><TD><LI>9 класс</TD><TD><LI>10 класс</TD></TR>
<TR><TD><LI>11 класс</TD><TD></TD></TR>
</TABLE>
</UL>
</BODY>
</HTML>
3. Сохраните файл.
4. Просмотрите полученную Web-страницу.
На экране вы должны увидеть:
26