close

Вход

Забыли?

вход по аккаунту

?

Урок 3. Применение гиперссылок. Навигация

код для вставкиСкачать
Урок 3. Применение гиперссылок. Навигация
Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым, к остальным документам по гиперссылкам нас переводит навигация страницы.
Ссылкой на другие документы может быть текст (фраза, слово), либо картинка. Рассмотрим пример текстовой ссылки: <a href="photos.html">посмотреть мои фотографии</a> Аналогично, картинка:
<a href="prf.html"><img src="photo.gif"></a> Вокруг картинки появится рамка цвета ссылки. Эту рамку можно убрать, поставив border="0":
<img src="photo.gif" align="left" hspace="30" vspace="5" alt="моя фотография" border="0">
Для того, чтобы при наведении мышки на ссылку появлялась подсказка, используется атрибут title. Атрибут title предлагает информацию об элементе, для которого он устанавливается. Мы можем установить его для любого контейнера, например, для тэга <div>.
Тег <div> - это контейнер для содержимого странички (текста, рисунков, тегов), он не выделяет абзац как тег <p>, поэтому часто используется для выравнивания текста и рисунков вместо тега абзаца, например: <div align="center"> текст </div>
При этом внутрь тега <div> могут входить другие теги, в том числе и <p> и сам <div>, а внутрь <p> могут входить только теги форматирования текста.
Задание к 3 уроку
1. Создайте проект (папку) "моя 1-я страничка", в нем три файла index.html, prf1.html, prf1.html и папку Image, где мы будем размещать картинки
2. Скопируйте в них представленные тексты
3. Скопитуйте найденные рисунки и фон в папку Image
4. Запустите файл index.html и проверьте работу всех ссылок
5. Отредактируйте тексты согласно полученным заданиям
6. Еще раз проверьте работы страничек и сдайте задание учителю
7. Темы заданий каждый выбирает по номеру в журнале. Страничка..
a. a. писателя - фантаста
b. любой группы, на ваше усмотрение
c. политической партии
d. ученого - биолога
e. маленькой девочки
f. альтруиста
g. поэта - женщины
h. усталого путника
i. болельщика любой команды, на ваше усмотрение
j. педагога - учителя физкультуры
k. директора школы
l. законченного эгоиста
m. влюбленного человека
n. украинского политика
o. участника женского движения "Femen"
p. сторожа ненужного предприятия
8. Естественно, все необходимые данные о Вашем персонаже вы берете из сети Интернет
Index.html
<html>
<head><title>Мой первый шаг </title></head>
<body text="#336699" bgcolor="#eeeeee" link="#339999" alink="#993399" vlink="#999933">
<div align="center">
<h3>Здравствуйте, это моя первая страница.</h3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<a href="prf1.html">
<img src="image/boy.gif" align="left" hspace=30 vspace=5 alt="моя фотография" border=3>
</a> Я совсем недавно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html"><font color="#339999">посмотреть мои фотографии</font></a>
, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br>
А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
<br><br> На фотографии изображен я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:)
<br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) <a href="mailto:pochta@mail.ru ?subject=Hello &Body=привет всем &cc=copy@mail.ru &bcc=hidden_copy@mail.ru"> Мыльте по <span title="адрес, конечно же, не мой!!!">адресу</span> - pochta@mail.ru </a>
Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p> </body>
</html>
prf1.html
<html>
<head><title>Мой первый шаг </title></head>
<body text="#336699" bgcolor="#eeeeee" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, теперь я во всей красе!.</H3>
<img src="image/man.gif" alt="такой я сейчас" height="90%">
</center>
</body>
</html>
prf.html
<html>
<head><title>Мой первый шаг </title></head>
<body text="#336699" bgcolor="#eeeeee" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, Вы сейчас просматриваете мой фотоальбом.</H3>
<br>
<font color="#CC0000"> Мои Фотографии</font> :) </center>
<p align="center">
<img src="image/boy.gif" alt="такой я сейчас"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="image/girl.gif" alt="это вообще не я"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<img src="image/child.gif" alt="это я и Катя в школе №7"> </p> </body></html>
Задание на дом (не забывайте про фон)
1. Создайте страничку "мои друзья" (можно переделать из проектов "люди Ильичевска и "животные Ильичевска"), рисунок каждого "друга" при щелчке должен раскрываться на полный экран, желательно, с другим фоновым рисунком.
2. создайте проект "Моя страничка"
a. Два документа: index.htm и hobby.htm (см. проект "Моя страничка" в уроке 3), примерный текст можете оттуда и взять, если нет воображения :))
b. Раскрасьте (фон, рисунки, смайлики, форматирование текста и т.д.)
c. добавьте другие странички
3. Альтернативный проект - новости класса (см проект "13-Я класс" в уроке 3)
4. Доработать классную работу "Страничка.."
Автор
sob-mk
sob-mk146   документов Отправить письмо
Документ
Категория
Методические пособия
Просмотров
138
Размер файла
28 Кб
Теги
урок, гиперссылки, навигация, применению
1/--страниц
Пожаловаться на содержимое документа