1.1. В меню Вид откройте
команду Источник (или В виде HTML). На
экране появится Блокнот с Вашей HTML-программой.
1.2. Внесите изменения в
программу: с помощью команды BGCOLOR задайте цвет фона Вашей странички.
a) сделайте его зеленым;
б) теперь залейте цветом purple;
в) выберите свой цвет.
1.3. В меню Файл выберите
команду Сохранить и закройте Блокнот.
1.4. В меню Вид укажите
команду Обновить. Можно также использовать
клавишу F5.
а) Слова Главный заголовок
и Подзаголовок
отцентрировать;
б) Текст первого абзаца до линии
сделать красным, текст второго абзаца
до линии – синим, текст третьего абзаца
до линии – зеленым;
в) Три черные горизонтальные
линии после абзацев перекрасить в др.
цвета, их толщины и длины также изменить
по своему усмотрению;
г) Общий фон для текста сделать
серым;
2.Открыть файл lab2.htm (C:\Мои документы\student)
и выполнить следующие изменения:
а) Создать гиперссылки на –документ
pr4.htm, pr5.htm, pr6.htm, pr7.htm, и на картинки (или
на другие файлы, которые у Вас имеются)
Orantang.jpg
…….
Подготовьте приветственное
послание Вашим друзьям с праздником Наурыз. Оформите текст поздравления, используя рисунки из папки Учебный процесс (можно использовать герб и знамя Республики).
Контрольные вопросы
Чем отличаются текстовые и
графические гиперссылки?
Как задать цвет текста, цвет
фона, цвет гиперссылки?
Как вставить в документ HTML графическое
изображение?
Как вставить в документ HTML фоновый
рисунок?
Как вставить в документ HTML горизонтальную
линию? Как изменить их цвет и размеры?
Как создать гипертекстовую
ссылку в виде текста или картинки в документе
HTML?
Предположим, что на Web-странице
опубликован очень длинный документ (повесть). Для удобства
пользователя автор ввел в начало документа
содержание, состоящее из 20 пунктов, соответствующих
главам повести. Что он должен предусмотреть, чтобы читатель мог перейти
к любой главе щелчком на соответствующем
пункте в содержании?
Текст предварительно
подготовленной лабораторной работы
для последующего
изменения (lab2.hm):
<HTML> <HEAD> <TITLE> Функциональные
разделы документа </TITLE> </HEAD>
<BODY> <H1>Главный заголовок</H1>
<H2>Подзаголовок</H2>
<HR> <A HREF="#3.1">Переход
к третьему абзацу</a>
<br> <H3>1.1 Первый абзац</H3>
Эти строки изображаются слитно,
несмотря на то, что в
документе
они отделены
друг от друга
<HR> <H3>2.1 Второй абзац</H3>
Закрывающий тег для абзаца
не обязателен.
<HR><A Name="3.1"> </a>
<H3>3.1 Третий абзац</H3>Тег
начала абзаца более важен, чем
реальный переход на новую
строку. <HR>
Текст после горизонтальной
линейки <BR> разбит на две строки.
<P><H3 align=center><B>Теперь
построим линии</H3></B>
<HR color=red size=16 width=100%>
<HR color=green size=8 width=50%>
<HR color=gold size=4 width=25%>
Перейдем к <A HREF="pr6.htm">
тексту pr6 </A> и обратно вернемся.
Перейдем к <A HREF="DOG.JPG">
собачке </A> и обратно вернемся.
<HR>Перейдем к рисунку<A
HREF="tu2.gif"> знамя </A> и обратно
вернемся.
<HR> <A HREF="cat01.jpg"> котята
</A> и обратно.
<HR> <A HREF="cat03.jpg"> кошка
</A> и обратно.
<HR> <A HREF="dog03.jpg"> собака
</A>
<HR> <A HREF="dog09.jpg"> другие
собачки </A>
<HR> <A HREF="fish.jpg"> рыба
</A>
<HR> <IMG SRC="dog09.jpg">
<P> <IMG SRC="fish.jpg" WIDTH=500
HEIGIT=250 border=2 align="bottom">
<P> <H3 ALIGN=center> Теперь создавайте
сами такие же тексты с ссылками на рисунки</H3>
</BODY> </HTML>
Лабораторная работа №3
Организация
бегущих строк и списков средствами HTML
Цель работы научить студентов:
организовать бегущие строки
в HTML-документах,
работе с различными типами
списков.
1. Бегущие
строки
Теги <MARQUEE> и </MARQUEE> образуют «бегущую строку»
в окне броузера и используются со следующими
параметрами:
<MARQUEE
[ALIGN="align"] [BEHAVIOR="behavior"] [BGCOLOR="#rrggbb"]
[DIRECTION="direction"] [HEIGHT="integer"] [HSPACE="integer"]
[LOOP="integer"] [SCROLLAMOUNT="integer"] [SCROLLDELAY="integer"]
[VSPACE="integer"] [WIDTH="integer"]> </MARQUEE>
Вот их расшифровка.
ALIGN задает выравнивание «бегущей строки»
и может принимать одно из следующих значений:
TOP, MIDDLE, BOTTOM.
BEHAVIOR определяет характер текстовой анимации
и принимает значения SCROLL, SLIDE, ALTERNATE.
BGCOLOR определяет фоновый цвет (в шестнадцатеричном
формате RGB или как одно из английских
названий цвета) «бегущей строки».
DIRECTION задает направление движения текста.
Возможны значения LEFT, RIGHT, UP, DOWN, но по умолчанию
установлено LEFT.
HEIGHT — целое число, определяющее высоту
«бегущей строки» в пикселях. Может также
определяться в процентах (%).
HSPACE — целое число, указывающее размеры
левого и правого полей в пикселях между
внешним краем области прокрутки и окном
броузера.
LOOP — целое число, определяющее количество
повторений «бегущей
строки». Может принимать значение INFINITE
(бесконечно).
SCROLLAMOUNT — целое число, определяющее расстояние
в пикселях, на которое текст перемещается
за один шаг.
SCROLLDELAY — целое число, указывающее интервал
между шагами в миллисекундах.
VSPACE — целое число, задающее размеры верхнего
и нижнего полей в пикселях между внешним
краем «бегущей строки» и окном броузера.
WIDTH — целое число, задающее ширину «бегущей
строки» в пикселях. Может определяться
в процентах (%).
Следующий пример 3.1 иллюстрирует использование
тегов <MARQUEE> </MARQUEE> и их атрибутов:
<HTML> <HEAD> <TITLE>Пример
3-1 </TITLE> </HEAD>
<BODY text=red>
<CENTER>
<H2>Бегущие строки </H2>
<HR>
<H3> <MARQUEE BGCOLOR="Yellow"
BEHAVIOR="SCROLL" DIRECTION="RIGHT" SCROLLAMOUNT="10"
SCROLLDELAY="200" WIDTH="90%"> Это бегущая
строка </MARQUEE>
<P> <MARQUEE BGCOLOR="Green"
BEHAVIOR="SCROLL" DIRECTION="LEFT" HEIGHT=30
SCROLLAMOUNT="10" SCROLLDELAY="100" VSPACE="40"
WIDTH="90%"> Это другая бегущая строка
</MARQUEE> </H3>
</CENTER></BODY>
</HTML>
2.
Организация текста внутри документа
HTML позволяет определять внешний
вид целых абзацев текста. Абзацы
можно организовывать в списки,
выводить их на экран в отформатированном
виде, или увеличивать левое поле.
Разберем все по порядку.
2.1. Ненумерованные списки: <UL> ...
</UL>
Текст, расположенный между
метками <UL> и </UL>, воспринимается как ненумерованный
список. Каждый новый элемент списка следует
начинать с метки <LI>. Например, чтобы создать вот
такой список:
необходим вот такой HTML-текст
(пример 3-2):
<HTML> <HEAD> <TITLE>Пример
3-2 </TITLE> </HEAD>
<BODY text=green>
<H2 FLIGN=CENTER>Маркированный
список </H2> <HR>
<UL>
<LI> ручки;
<LI> карандаши;
<LI> краски
</UL>
<HR></BODY>
</HTML>
Обратите внимание: у метки <LI> нет парной закрывающей метки.
Существуют атрибуты маркированного
списка, изменяющие его вид (вид маркеров):
заполненный кружок — <UL type="disc">
квадратик — <UL type="square">
пустой кружок — <UL type="circle">
Табл. 1. Стили маркеров
списка
Тип списка |
Код HTML |
Пример |
Маркированный список
с маркерами в виде круга |
<ul type="disc">
<li>...</li>
</ul> |
- Чебурашка
- Крокодил Гена
- Шапокляк
|
Маркированный список
с маркерами в виде окружности |
<ul type="circle">
<li>...</li>
</ul> |
- Чебурашка
- Крокодил Гена
- Шапокляк
|
Маркированный список
с квадратными маркерами |
<ul type="square">
<li>...</li>
</ul> |
- Чебурашка
- Крокодил Гена
- Шапокляк
|
2.2. Нумерованные
списки: <OL> ... </OL>
Нумерованные списки устроены
точно так же, как ненумерованные, только
вместо символов, выделяющих новый элемент,
используются цифры. Если слегка модифицировать
наш предыдущий пример (3-3):
<HTML> <HEAD>
<TITLE>Пример
3-3 </TITLE>
</HEAD>
<BODY text=green> <H2
ALIGN=CENTER>Нумерованный список </H2> <HR>
<OL>
<LI> ручки;
<LI> карандаши;
<LI> краски
</OL>
<HR></BODY>
</HTML>
При выполнении этого кода получится
список, представленный на рисунке.
Собственно, атрибут type есть и у маркированных
списков. С его помощью можно изменить
вид значка маркировки. В таблице приведен
список атрибутов нумерованных списков.
Табл. 2. Типы нумерованного списка
Тип списка |
Код HTML |
Пример |
Нумерованный список
с арабскими цифрами |
<ol type="1">
<li>...</li>
</ol> |
1. Чебурашка
2. Крокодил Гена
3. Шапокляк |
Нумерованный список
с прописными буквами латинского алфавита |
<ol type="A">
<li>...</li>
</ol> |
A. Чебурашка
B. Крокодил Гена
C. Шапокляк |
Нумерованный список
со строчными буквами латинского алфавита |
<ol type="a">
<li>...</li>
</ol> |
a. Чебурашка
b. Крокодил Гена
c. Шапокляк |
Нумерованный список
с римскими цифрами в верхнем регистре |
<ol type="I">
<li>...</li>
</ol> |
I. Чебурашка
II. Крокодил Гена
III. Шапокляк |
Нумерованный список
с римскими цифрами в нижнем регистре |
<ol type="i">
<li>...</li>
</ol> |
i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк |
С помощью атрибута start можно изменять
начальное значение нумерованного списка.
Например, чтобы вести счет с 10, напишите: <OL start="10">.
Атрибут value используется
для изменения значения конкретного элемента
списка. Например, можно изменить нумерацию
прямо внутри списка:
<ol>
<Li>Пункт 1
<Li>Пункт 2
<li value="11"> Список 1
<Li>Список 2
</ol>
Его результат представлен на
рисунке.
2.3. Списки определений: <DL> ... </DL>
Список определений несколько отличается от других
видов списков. Вместо меток <LI> в списках определений используются
метки <DT> (от английского definition term —
определяемый термин) и <DD> (от английского definition definition
— определение определения). Разберем
это на примере (3-4, первая часть):
<H3 FLIGN=CENTER>Длинные
определения </H3>
<DL>
<DT>HTML
<DD>Термин HTML (HyperText
Markup Language) означает 'язык маркировки
гипертекстов'. Первую версию HTML разработал
сотрудник Европейской лаборатории
физики элементарных частиц Тим Бернерс-Ли.
<DT>HTML-документ
<DD>Текстовый
файл с расширением *.htm (Unix-системы
могут содержать файлы с расширением
*.html).
</DL>
Этот фрагмент будет выведен
на экран следующим образом:
Обратите внимание: точно так
же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих
меток.
Если определяемые термины достаточно
коротки, можно использовать модифицированную
открывающую метку <DL COMPACT>. Например, вот такой фрагмент
HTML-текста (пример 3-4, вторая часть):
<HR> <H3 FLIGN=CENTER>Короткие
определения </H3>
<DL COMPACT>
<DT>А
<DD>Первая буква
алфавита
<DT>Б
<DD>Вторая буква
алфавита
<DT>В
<DD>Третья буква
алфавита
</DL>
Результат этого кода показан на рисунке.
2.4. Вложенные списки
Элемент любого списка может
содержать в себе целый список любого
вида. Число уровней вложенности в принципе
не ограничено, однако злоупотреблять
вложенными списками все же не следует.
Вложенные списки очень удобны
при подготовке разного рода планов и
оглавлений.
Наши знания о списках можно
вкратце свести в пример 3-5:
<html> <head> <title>Пример
3-5</title> </head>
<body>
<H1>HTML поддерживает
несколько видов списков </H1>
<DL>
<DT>Ненумерованные
списки
<DD>Элементы
ненумерованного списка выделяются
специальным
символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT>Нумерованные
списки
<DD>Элементы
нумерованного списка выделяются
отступом слева, а