Практическая работа
Тема: Форматирование и редактирование страниц, символов и абзацев
Цель: Научиться форматировать и редактировать страницы, символы и абзацы
Теоретическое обоснование
Цвет на web – странице задают либо его названием, либо числовым пятиразрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые - зеленого, третьи - синего).
Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице 1 приведены некоторые примеры некоторых цветов:
Таблица 1
цвет | код | название | цвет | код | название |
Черный | #000000 | BLACK | фиолетовый | #FF00FF | MAGENTA |
Белый | #FFFFFF | WHITE | бирюзовый | #00FFFF | CYAN |
Красный | #FF0000 | RED | желтый | #FFFF00 | YELLOW |
Зеленый | #00FF00 | LIME | золотой | #FFD800 | GOLD |
Синий | #0000FF | BLUE | оранжевый | #FFA500 | ORANGE |
серый | #808080 | GRAY | коричневый | #A82828 | BROWN |
Основную цветовую схему Web - страницы можно задать в теге <body> с помощью атрибутов:
Таблица 2
Цвет фона | BGCOLOR=”#RRGGBB” |
Текстура фона | BACKGROUND=”file_name” |
Цвет текста | TEXT=”#RRGGBB” |
Цвет текста ссылки | LINK=”#RRGGBB” |
цвет текста активной ссылки | ALINK=”#RRGGBB” |
Цвет текста просмотренной ссылки | VLINK=”#RRGGBB” |
Различные виды гиперссылок.
1. Ссылки на Web - страницу локального компьютера
<A HREF=”file_name”> указатель ссылки</A>
2. Ссылка на Web - страницу размещенную в Интернете.
<A HREF=http://www. *****> сайт о Москве </A>
3. Вставка изображения
<A HREF=”spassk. jpg”> Башня </A>
4. Запуск проигрывателя звукового файла
<A HREF=”strike. wav”> Бой часов </A>
5. Сохранение файла на локальном компьютере
<A HREF=”kremlin. zip”> скачать файл </A>
В качестве указателя ссылки может использоваться не только текст, но и изображение. Для этого используют тег <IMG>.
Ход работы
Задание 1. Создайте Web - сайт, рассказывающий об устройствах компьютера.
Например: Основные устройства ПК:
1. монитор;
2. клавиатура;
3. мышь
4. системный блок:
А икропроцессор
- АЛУ
- УУ
Б память
- внешняя
- внутренняя
В Устройства ввода
Г Устройства вывода
Рисунок 1 Содержание первой Web - страницы
Для выполнения структуры приведенной на рисунке необходимо использовать списки
Сайт рекомендуется хранить в отдельной специально созданной папке. Дайте имя сайту index.htm, вторая страница должна содержать краткое описание устройств ПК. Страницы связаны между собой гиперссылками.
Задание 2. Запустить текстовый редактор Блокнот.
2.1 Дать странице название. Между тегами <Body> и </Body> набрать текст об устройствах ПК
2.2 Отформатировать текст (разместить абзацы и расставить заголовки) и сохранить файл в своей папке.
2.3 Посмотреть страницу в браузере
2.4 Атрибуты задания цветовой схемы (цвета фона, текста, и гиперссылок) выберете самостоятельно.(см таблицу 1)
Задание 3. Форматирование текста.
3.1 Для выделения фрагментов текста используется тег <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут Color - цвет и атрибут Size - размер символов.
Выделите часть текста более крупным шрифтом и цветом: например:
<FONT SIZE=”4” COLOR=”FF0066” FACE=”ARIAL”> текст </FONT></p>.
3.2 Выровняйте текст по горизонтали (атрибут ALIGN). Возможные значения left, center, right.
3.3 Выровняйте заголовок по центру.
Задание 4. Гиперссылки на якоря.
Если страница очень большая, то в ее тексте можно расставить якоря (иначе их называют метки или закладки). Они помечают смысловые разделы и позволяют быстро перемещаться по документу.
4.1 Поместите метку Top в начало страницы. Для этого атрибуту NAME тега необходимо присвоить определенное значение (имя метки):
<A NAME=”TOP”> </A>
4.2 В конец страницы поместите указатель ссылки на метку. Для этого атрибуту HREF тега необходимо присвоить значение (имя метки):
<A HREF=”#TOP”> на начало страницы</A>.
Переключаться на якорь по гиперссылке можно не только внутри текущей странице, но и с другой Web –страницы.
4.3 Установите метку на главной первой странице в начало второго абзаца вашего текста:
<A NAME=”anchor1”></A>
Задание 5. Создайте вторую страницу о работе устройств ПК. Сохраните ее по именем Work.htm. На эту страницу добавьте гиперссылку для перехода на главную страницу на метку anchor1, установленную в начале второго абзаца главной страницы:
<A href=”index.htm#anchor1”> на главную страницу</A>
Содержание отчета
· Тема
· Цель
· Законспектировать новый материал в конспект
· Кратко ход работы
· Вывод
Контрольные вопросы
2. Как создать нумерованный список?
3. Перечислить виды гиперссылок. Привести примеры
4. Для чего используется якорь?
5. Какой атрибут используется для цвета текста активной ссылки?
6. Какой атрибут используется для цвета текста просмотренной ссылки?
7. Какой атрибут используется для цвета ссылки?
8. Отличие атрибута BGCOLOR и BACKGROUND?
