Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Тема- Создание Webстраниц и связывание их с помощью гипертекста

Работа добавлена на сайт samzan.net:


Лабораторно-практическая работа № 8

Тема: Создание Web-страниц и связывание их с помощью гипертекста.

Цель: Освоить основные теги HTML с помощью HTML-редактора и методику использования тегов для создания гиперссылок в  HTML-документе.

Теоретическая часть

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>

Параметры элемента <A>

HREF  - URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).

TARGET - Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения:

_top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет).

_blank - загружает гиперссылку в новом окне браузера.

_self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать).

_parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.

TITLE - Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

<a href="URL" target="Окно">

<img border="0" src="../files/134/Рисунок" width="Ширина" height="Высота" TITLE="Подсказка>

</a>

Вы можете также создать ссылку на e-mail, в это случае нужно в качестве URL’a прописать следующее:

mailto:адрес электронной почты

Например: <a href="mailto:port@lin.net">Мое мыло</a>

Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.

Ссылка на закладку в том же документе имеет следующий вид:

<a href="#Имя закладки">Название раздела</a>

А так выглядит ссылка на закладку в другом документе:

<a href="Имя документа#Имя закладки">Название раздела</a>

Сама закладка будет такой:

<A NAME="Имя закладки"></a>

Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку. Вверху данной страницы находится содержание, оформленное как ссылки на определенные закладки, находящиеся в этом же документе.

Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег <BODY> нужно добавить еще несколько параметров.

text - цвет текста.

link - цвет ссылки.

vlink - цвет пройденой ссылки.

alink - цвет активной ссылки, когда подводиться к ней курсор.

<BODY text="black" link="blue" vlink="purple" alink="red">

Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в теге <BODY>.

Ход работы

  1.  Сохраните в отдельной папке HTML изображения, указанные преподавателем.
    1.  В папке HTML создайте файл  Eifel.html и запишите в нем следующий код:

<html>

<head>

<title>Эйфелевая башня</title>

</head>

<body>

<img src="../files/134/Eifel.jpg" height="300" align="left">

</body>

</html>

  1.  Создайте в своей папке файл  Link.html и запишите в нем следующий код:

<html>

<head><title>Создание гиперссылок</title></head>

<body>

Во Франции есть очень много великих памятников. Сначала мы посетим Эйфелевую башню.

</body>

</html>

  1.  Определите в документе Link.html текстовую гиперссылку на документ Eifel.html, который размещен с ним в одном каталоге (рис.1). Для этого модифицируйте код и просмотрите его в браузере:

...

Во Франции есть очень много великих памятников. Сначала мы посетим <a href="Eifel.html">Эйфелевую башню</a>.

</body>

Гиперссылка будет загружать файл Eifel.html в то же самое окно браузера.

Рис.1.

  1.  Определите в документе Link1.html графическую гиперссылку на тот же файл Eifel.html. Добавьте для этого соответствующий код и просмотрите результат в браузере:

...

<a href="Eifel.html"><img src="../files/134/Eifel.jpg"></a>

</body>

  1.  Создайте в своей папке катало А. В нем создайте файл под названием Zamok.html и скопируйте необходимое изображение.
    1.  В файле  Zamok.html запишите следующий  html-код:

<html>

<head>

<title>Замок</title>

</head>

<body>

<img src="../files/134/Zamok.jpg" height="300" align="left">

</body>

</html>

  1.  Запишите в каталоге А в файле  Link2.html  html-код, в котором установите текстовую и графическую гиперссылки:

...

<a href="A/Zamok.html"><center>Замок</center></a>

<br><center><a href="A/Zamok.html"><img src="../files/134/Flower.jpg" width="150" height="150"></a></center>

</body>

  1.  На одном уровне с папкой HTML создайте папку В. Скопируйте файл Zamok.html в эту папку. В документ Link3.html создайте текстовую гиперссылку на документ Zamok.html, находящуюся в папке В:

...

<br><a href="../B/Zamok.html">На документ Zamok.html, который находится в папке В</a>

</body>

  1.  Используя абсолютную адресацию, в документе Link4.html создайте текстовую гиперссылку на HTML-документ Zamok.html, который находится в папке B (например, на диске Е:), то есть по адресу E:\B\Zamok.html:

...

<br><a href="="E://B/Zamok.html">На документ Zamok.html, который находится в папке В</a>

</body>

  1.  Определите в документе Link5.html текстовую и графическую гиперссылку на сайт, находящийся по адресу http / / narod.yandex.ru:

...

<br><a href="http//narod.yandex.ru">Замок</a>

<br><a href="http//narod.yandex.ru"><img src="../files/134/Flower.jpg"></a>

</body>

  1.  Создайте в документе Link6.html текстовую гиперссылку на адрес электронной почты:

...

<br><a href="mailto:pochta@ukr.net ">Пошта</a>

</body>

  1.  В папке HTML создайте текстовый документ с названием Recepti.html и запишите в нем такой HTML-код:

<html>

<head><title>Создание внутренней гиперссылки</title></head>

<body>

<h1>Рецепты</h1>

<h3>1. Корзинки с кофейным кремом </h3>

<h3>2. Пироженные "Наполеон"</h3>

<h3>3. Яблоки в заварном тесте </h3>

<h2 align="center">1. Корзинки с кофейным кремом </h2>

<h3>Тесто:</h3>

<p align="justify">300 г муки, 100 г сахара, 150 г сливочного маслаили маргарина.</p>

<h3>Крем:</h3>

<p align="justify">1 ст. ложка муки, 2 желтка, 100 г сахара, 100 г сливочного масла, 3 ст. ложки настойки крепкого кофе, 100 г  измельченных орехов.</p>

...

<h2 align="center">3. Яблоки в заварном тесте </h2>

<h3>Тесто:</h3>

<p align="justify">80 г раcтопленого сливочного масла, 1 стакан воды, 150 г муки, 3 яйца.</p>

<h3>Начинка:</h3>

<p align="justify">1 кг яблок, 1 ст. ложка варенья.</p>

<h3>Приготовление </h3>

<p align="justify">К гарячему растопленому маслу долить гарячей воды и закипятить...</p>

</body>

</html>

  1.  Создайте в документе Recepti.html ссылку на текст третьего пункта документа - "Яблоки в заварном тесте". Для этого:

- Разместите непосредственно перед третьим пунктом "якорь" с именем apple:

...

<a name= apple> </a><h2 align="center">3. Яблоки в заварном тесте </h2>

...

- Модифицируйте HTML-код файла Recepti.html для определения самой внутренней ссылки. При этом в параметре href указываем имя "якоря" с приставкой #:

...

<h3><a href="#apple">3. Яблоки в заварном тесте </a> </h3>

...

15. Написать отчет и ответить на контрольные вопросы.

Контрольные вопросы к ЛПР № 8

1. Как открыть гиперссылку в новом окне браузера?

2. Как определить якорь в HTML-документе?

3. Как используется в гиперссылках абсолютная адресация?

4. Как используется в гиперссылках относительная адресация?

5. Как открыть гиперссылку в том же окне браузера?

6. Правила записи текстовых гиперссылок.

7. Как определить гиперссылки на рисунок?

8. Как определить цвета ссылок (активных, просмотренных)?

9. Как определить гиперссылки внутри HTML-документа?

10. Как записать гиперссылки на адрес электронной почты?

Контрольные вопросы к ЛПР № 8

1. Как открыть гиперссылку в новом окне браузера?

2. Как определить якорь в HTML-документе?

3. Как используется в гиперссылках абсолютная адресация?

4. Как используется в гиперссылках относительная адресация?

5. Как открыть гиперссылку в том же окне браузера?

6. Правила записи текстовых гиперссылок.

7. 8. Как определить гиперссылки на рисунок?

8. Как определить цвета ссылок (активных, просмотренных)?

9. Как определить гиперссылки внутри HTML-документа?

10. Как записать гиперссылки на адрес электронной почты?

Контрольные вопросы к ЛПР № 8

1. Как открыть гиперссылку в новом окне браузера?

2. Как определить якорь в HTML-документе?

3. Как используется в гиперссылках абсолютная адресация?

4. Как используется в гиперссылках относительная адресация?

5. Как открыть гиперссылку в том же окне браузера?

6. Правила записи текстовых гиперссылок.

7. 8. Как определить гиперссылки на рисунок?

8. Как определить цвета ссылок (активных, просмотренных)?

9. Как определить гиперссылки внутри HTML-документа?

10. Как записать гиперссылки на адрес электронной почты?

Контрольные вопросы к ЛПР № 8

1. Как открыть гиперссылку в новом окне браузера?

2. Как определить якорь в HTML-документе?

3. Как используется в гиперссылках абсолютная адресация?

4. Как используется в гиперссылках относительная адресация?

5. Как открыть гиперссылку в том же окне браузера?

6. Правила записи текстовых гиперссылок.

7. 8. Как определить гиперссылки на рисунок?

8. Как определить цвета ссылок (активных, просмотренных)?

9. Как определить гиперссылки внутри HTML-документа?

10. Как записать гиперссылки на адрес электронной почты?

Контрольные вопросы к ЛПР № 8

1. Как открыть гиперссылку в новом окне браузера?

2. Как определить якорь в HTML-документе?

3. Как используется в гиперссылках абсолютная адресация?

4. Как используется в гиперссылках относительная адресация?

5. Как открыть гиперссылку в том же окне браузера?

6. Правила записи текстовых гиперссылок.

7. 8. Как определить гиперссылки на рисунок?

8. Как определить цвета ссылок (активных, просмотренных)?

9. Как определить гиперссылки внутри HTML-документа?

10. Как записать гиперссылки на адрес электронной почты?




1. Тематический план СРСП Название темы Сод
2. железной маской и колодцами забвения
3. Специфика искусства рекламы его возникновение синтетические характеристики
4. Вона вічне цілюще життєдайне джерело певною мірою норма і приклад еталон прекрасного животворна сила
5. Отделочные процессы
6. Государственное регулирование банковской системы
7. Тульский государственный университет Кафедра Психологии
8. Российский государственный профессиональнопедагогический университет Институт экономики и управления
9. вариант ответа Ответы запишите в бланки ответов
10. нет но Алекс не из тех кто так просто сдается
11. Курсовая работа- Особенности технологии экстемпоральных лекарственных форм, содержащих защищенные коллоиды
12. то за городом зарождалась гроза и в воздухе чувствовалось некоторое напряжение
13. Система механизмов обеспечения и защиты прав и свобод
14.  Об охране ОС. В этом законе установлены основы управления в области ООС
15. Особенности банковской деятельности в современных экономических условиях на примере Алтайского филиал
16. МОДУЛЬНИЙ КОНТРОЛЬ 2 З ФІЛОСОФІЇ для студентів факультету електроніки та прикладних фізиків Складніш
17. Я лучшей доли не искал
18. Вопросы к экзамену по анатомии и физиологии человека
19. Обе страны не только граничат друг с другом но и связаны общностью государственного языка культуры религи
20. ТЕМА 4 Основи бюджетного устрою Бюджетний устрій ~ це організація і принципи побудови бюджетної с

Материалы собраны группой SamZan и находятся в свободном доступе