ЛАБ11_HTML_1
.pdfПока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в папке directory на сервере server, на локальный диск пользователя.
<A HREF="mailto:user@mail.box"> Послать письмо</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.
Разберем все, что мы знаем о связывании, с помощью следующего примера.
<HTML> <HEAD> <TITLE>Пример 7</TITLE> </HEAD> <BODY>
<H1>Связывание </H1>
<P> С помощью ссылок можно переходить к другим файлам (например, к <A HREF="pr.htm">оглавлению этого руководства</A>).</P>
<P> Можно выгружать файлы (например,
<A HREF="ftp://yi.com/home/ChuvakhinNikolai/html-pr.doc"> это руководство в формате Microsoft Word </A>) по FTP.</P>
<P>Можно дать пользователю возможность послать почту (например, <A HREF="mailto:nc@iname.com">автору этого руководства</A>).</P>
</BODY>
</HTML>
Анкеры не могут находиться один внутри другого. Открывающая и закрывающая метки обязательны. Анкеры используются для определения гипертекстовых ссылок, например,
Путь к <a href="hands-on.html">счастье</a>.
а также конкретных точек внутри документа, на которые могут указывать гипертекстовые ссылки, например,
<h2> <a name=mit> Сквер – место для отдыха </a> </h2>
name строка, определяющая имя анкера. Имена анкеров в одном документе не должны повторяться.
href указывает адрес ресурса, на который будет производиться переход по гипертекстовой ссылке. Это может быть другой HTML-документ, PDF-файл, изображение и т.п.
title указывает наименование ресурса, на который сделана ссылка.
Задания
1.Открыть файл lab2.htm (C:\Мои документы\student) и выполнить следующие изменения:
1.1. В меню Вид откройте команду Источник (или В виде HTML). На экране появится Блокнот с Вашей HTML-программой.
31
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
Popugay.jpg
Monky.jpg
Eagle.jpg
Kenya5.jpg
3.Подготовьте приветственное послание Вашимдрузьямс праздникомНаурыз. Оформите текстпоздравления, используя рисунки из папки Учебный процесс (можно использовать герб и знамя Республики).
Контрольные вопросы
1.Чем отличаются текстовые и графические гиперссылки?
2.Как задать цвет текста, цвет фона, цвет гиперссылки?
3.Как вставить в документ HTML графическое изображение?
4.Как вставить в документ HTML фоновый рисунок?
5.Как вставить в документ HTML горизонтальную линию? Как изменить их цвет и размеры?
6.Как создать гипертекстовую ссылку в виде текста или картинки в документе HTML?
7.Предположим, что на Web-странице опубликован очень длинный документ (повесть). Для удобства пользователя автор ввел в начало документа содержание, состоящее из 20 пунктов, соответствующих главам повести. Что он должен предусмотреть, чтобы читатель мог перейти к любой главе щелчком на соответствующем пункте в содержании?
32
Текст предварительно подготовленной лабораторной работы для последующего изменения (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>
33
Лабораторная работа №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>
34
<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">
35
квадратик — <UL type="square">
пустой кружок — <UL type="circle">
Табл. 1. Стили маркеров списка
Тип списка |
Код HTML |
|
Пример |
|
|
|
|
|
|
Маркированный список с марке- |
<ul type="disc"> |
|
Чебурашка |
|
<li>...</li> |
|
Крокодил Гена |
||
рами в виде круга |
||||
</ul> |
|
Шапокляк |
||
|
||||
|
|
|
|
|
Маркированный список с марке- |
<ul type="circle"> |
o |
Чебурашка |
|
<li>...</li> |
o |
Крокодил Гена |
||
рами в виде окружности |
||||
</ul> |
o |
Шапокляк |
||
|
||||
|
|
|
|
|
Маркированный список с квад- |
<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"> |
1. |
Чебурашка |
|
Нумерованный список с арабскими цифрами |
<li>...</li> |
2. |
Крокодил Гена |
|
|
</ol> |
3. |
Шапокляк |
|
|
|
|
||
Нумерованный список с прописными буква- |
<ol type="A"> |
A. Чебурашка |
||
ми латинского алфавита |
<li>...</li> |
B. Крокодил Гена |
||
</ol> |
C. Шапокляк |
|||
|
||||
36
Нумерованный список со строчными буква- |
<ol type="a"> |
a. Чебурашка |
|
ми латинского алфавита |
<li>...</li> |
b. Крокодил Гена |
|
</ol> |
c. Шапокляк |
||
|
|||
|
|
|
|
Нумерованный список с римскими цифрами |
<ol type="I"> |
I. Чебурашка |
|
в верхнем регистре |
<li>...</li> |
II. Крокодил Гена |
|
</ol> |
III. Шапокляк |
||
|
|||
Нумерованный список с римскими цифрами |
<ol type="i"> |
i. Чебурашка |
|
в нижнем регистре |
<li>...</li> |
ii. Крокодил Гена |
|
</ol> |
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>
Этот фрагмент будет выведен на экран следующим образом:
37
Обратите внимание: точно так же, как метки <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>
38
<LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </UL>
<DT>Нумерованные списки
<DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией:
<OL> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </OL>
<DT>Списки определений
<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит
более эффектно.
<P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P>
</DL>
</body> </html>
Результат этого фрагмента программы:
39
Задания
1.Набрать пример 3-1 на стр. 1, посмотреть результат и далее выполнить сл. изменения:
а) Поменять высоту бегущей строки; б) Фон текста первой бегущей строки красным, второго текста – синим;
в) Горизонтальные линии после абзацев перекрасить в др. цвета, их толщины и длины также изменить по своему усмотрению;
2.Набрать пример 3-2 на стр. 2, посмотреть результат и далее в каждой строке перечислить имена студентов группы;
3.Набрать пример 3-3 на стр. 2, посмотреть результат и далее в каждой строке перечислить фамилии студентов группы, провести толстые и разноцветные разделительные горизонтальные линии;
4.Набрать пример 3-4 на стр. 2, посмотреть результат и далее в каждой строке длинных определений дать пояснения профессиям экономиста, бухгалтера и финансиста;
5.Набрать пример 3-4 на стр. 3, посмотреть результат и далее в каждой строке коротких определений записать имена студентов группы и дать краткую характеристику типа “отличник учебы”, “галантный парень”, “симпатичная девушка” и т.д.;
6.Набрать пример 3-5 на стр. 3 c вашими измененными фрагментами текста, посмотреть результат и далее в каждой строке изменять строки и их оформления по вашему усмотрению.
40