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

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

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

Поможем написать учебную работу

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

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 15.3.2025

Лабораторно-практическая работа № 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. реферат дисертації на здобуття наукового ступеня кандидата технічних наук Львів 2003
2. лекциях prefll встречаются вещи в дизайне которых совмещено четыре пять и более оттенков и все они серые
3. Анализ рентабельности на предприятии
4. 25 Тихо шепот человека 1м 30 Тихо шепот тиканье настенных часов
5. Финансовые основы развития интеграционных процессов стран Западно-Африканского экономического и валютного союза.html
6. топографических соотношений центральной и периферической нервной системы относительно опорнодвигательно
7. Файли config
8. Чрезвычайные ситуации военного (конфликтного) характер
9. Основные тенденции этногенеза белорусов Становление процесса формирования белорусской народности
10. реферат дисертації на здобуття наукового ступеня кандидата філологічних наук К1

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