Информатика - Программирование - html - Ссылки
Ваша интернет - страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html и т.д.) Они все могут лежать в одной директории (папке), а могут в разных. При помощи ссылок мы связываем эти документы.
Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка (с картинкой в виде ссылки мы уже знакомы).
Сейчас Ваша папка должна содержать как минимум 3 HTML - документа:
• главная страничка
• страничка с коллекцией картинок
• таблицу "безопасных" цветов
Ваша Главная страница должна иметь ссылку с графического изображения на Страницу с коллекцией картинок (итог прошлого урока).
Для всех ссылок в нашем документе мы можем прописать цвета:
link - цвет просто ссылки,
alink - цвет активной ссылки (нажатой),
vlink - цвет уже посещенной ссылки.
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>.
Пример:
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699"BACKground=2.gif link="#339999" alink="#FFFF66" vlink="#333399" bgcolor="#6699CC">
<center>
<H3>Здравствуйте, это моя персональная страница.</H3>
<br><font color="#CC0000"> Вот как у меня получилось </font> </center>
<p align="justify">
<br>
<A HREF=u.html><img src="r4.2.jpg" BORDER=10 bordercolor="#CC0000" aling="left" HSPACE=20 VSPACE=20 WIDTH=200></A><font color="#990000">
Человек приручил кошку гораздо позже, чем собаку. Однако, несмотря на это, кошка является одним из самых распространенных домашних животных. Сохранив свою независимость, она прочно вошла в нашу жизнь. Кошка в значительно большей степени привязывается к дому, нежели к человеку, но в ответ на ласку отвечает полной взаимностью.
<br>Сегодня редко можно встретить человека,испытывающего отрицательные эмоции по отношению к кошке. Иногда она становится человеку даже ближе, чем люди. Известен случай, когда женщина завещала любимой кошке свое состояние, составившее более 100 миллионов фунтов стерлингов.
<br>По популярности кошка опережает собаку, что особенно проявляется в городах. В настоящее время в мире насчитывается более 600 миллионов домашних кошек. Любая квартира, в которой поселилась кошка, становится более уютной.
<br>Кошка, как и любое домашнее животное, требует заботы, внимания, времени и ответственности. Однако удовольствие, которое она доставляет человеку, с лихвой компенсирует все сложности, связанные с ее содержанием.</font>
<br> <AHREF=u.html> Фотогалерея - "Я уже большой" </A>
</body>
</html> посмотреть
Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:
<br><A HREF=u.html><font color="#FF3300">Фотогалерея - "Я уже большой" </font></A>
Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
картинка - маленькая или большая?
Предложенный документ с коллекцией картинок не совсем удобен для просмотра. В некоторых случаях хотелось бы картинку увеличить. Это делается следующим образом:
<A href="r5.1.JPG"><img src="r5.1.JPG" WIDTH=200> </A> (в этом окне)
<A href="r5.1.JPG" target=blank><img src="r5.1.JPG" WIDTH=200> </A> (в новом окне)
Обратите внимание на следующий пример и примените все приемы в своей работе:
• сделать ссылку с каждой картинки на большую ( в этом окне)
• сделать ссылку с каждой картинки на большую ( в новом окне)
• сделать всплывающие надписи для картинок (alt="текст")
Пример:
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699" bgcolor="#FFCC66">
<center>
<H3> Вот как у меня получилось </H3>
<font color="#CC0000"><H1> Я уже большой! </H1></font> </center>
<p align="center">
<A href="r5.1.JPG" target=blank><img src="r5.1.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.2.JPG" target=blank><img src="r5.2.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.3.JPG" ><img src="r5.3.JPG" WIDTH=200 alt="Шерри"> </A>
<A href="r5.4.JPG" ><img src="r5.4.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.5.JPG" ><img src="r5.5.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.6.JPG" ><img src="r5.6.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.7.JPG" ><img src="r5.7.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.8.JPG" ><img src="r5.8.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.9.JPG" ><img src="r5.9.JPG" WIDTH=200 alt="Шерри"></A>
<A href="r5.10.JPG" ><img src="r5.10.JPG" WIDTH=200 alt="Шерри"></A>
</body>
</html> посмотреть
ссылка на почтовый ящик
Ссылка на ваш почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):
<A HREF=MAILTO:plaksinasv@sch1552.edusite.ru> plaksinasv@sch1552.edusite.ru</A>
У MAILTO есть еще некоторые опции:
&subgect = тема письма
&Body =текст вашего сообщения
<A HREF=MAILTO:plaksinasv@sch1552.edusite.ru&subgect =Hello>plaksinasv@sch1552.edusite.ru</A>
Если нажать на такую ссылку то почтовая программа выдаст бланк нового письма с уже заполненными полями.
Пример:
<html>
<head>
<title>Моя первая страница </title>
</head>
<body text="#336699"BACKground=2.gif bgcolor="#6699CC" link="#FFFF66" alink="#333399" vlink="#FF3300">
<center>
<H3>Здравствуйте, это моя персональная страница.</H3>
<br><font color="#CC0000"> Вот как у меня получилось</font> </center>
<p align="justify">
<br>
<A HREF=u.1.html><img src="r4.2.JPG" BORDER=10 align="left" HSPACE=20 VSPACE=20 WIDTH=200 ALT="киси"></A>
<font color="#990000"> Человек приручил кошку гораздо позже, чем собаку. Однако, несмотря на это, кошка является одним из самых распространенных домашних животных. Сохранив свою независимость, она прочно вошла в нашу жизнь. Кошка в значительно большей степени привязывается к дому, нежели к человеку, но в ответ на ласку отвечает полной взаимностью.
<br>Сегодня редко можно встретить человека, испытывающего отрицательные эмоции по отношению к кошке. Иногда она становится человеку даже ближе, чем люди. Известен случай, когда женщина завещала любимой кошке свое состояние, составившее более 100 миллионов фунтов стерлингов.
<br>По популярности кошка опережает собаку, что особенно проявляется в городах. В настоящее время в мире насчитывается более 600 миллионов домашних кошек. Любая квартира, в которой поселилась кошка, становится более уютной.
<br>Кошка, как и любое домашнее животное, требует заботы, внимания, времени и ответственности. Однако удовольствие, которое она доставляет человеку, с лихвой компенсирует все сложности, связанные с ее содержанием.
</font>
<br><A HREF=u.1.html><font color="#FFFF66"> Фотогалерея - "Я уже большой" </font></A>
<br><A HREF=MAILTO:plaksinasv&sch1552.edusite.ru sabgect=Hello> ПИШИТЕ </A>
</p>
</body>
</html> посмотреть
закладки
Иногда возникает такая ситуация, когда нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем. Такая навигация внутри одного и того же документа весьма удобна.
Пример: (в данном примере "текст" сокращен в целях экономии места)
<HTML>
<head>
<title> Породы кошек </title>
</head>
<body text="#FF6600" BACKground=star.gif bgcolor="#6699CC" link="#FFFF66" alink="#333399" vlink="#FF3300">
<center> <H1> Персидская кошка </H1> </center>
<A href= "#s1" >Стандарт породы</A><BR>
<A href= "#s2" >Окрас: </A><BR>
<A href= "#s3" >Персидские белые</A><BR>
<A href= "#s4" >Персидские голубые</A><BR>
<A href= "#s5" >Персидские красные</A><BR>
<A href= "#s10" >Персидские золотые</A><BR>
<A href= "#s6" >Персидские кремовые</A><BR>
<A href= "#s7" >Персидские черепаховые</A><BR>
<A href= "#s8" >Персидская шиншила</A><BR>
<A href= "#s12" >Персидские дымчатые</A><BR>
<A href= "#s13" >Двухцветные</A><BR>
<p align="justify"><font color="#FF9966"><font size="+1">
<img src="r4.1.JPG" WIDTH=150 HSPACE=20 VSPACE=20 align="left">
Сегодня это, пожалуй, самая любимая и популярная порода благородных кошек...
<img src="r5.11.JPG" WIDTH=150 HSPACE=20 VSPACE=20 align="right">
У кошек выставочного типа с очень длинной шерстью ноги могут быть совсем не видны... </font></font></p>
<br><center><H2><A name="s1">Стандарт породы </A> </H2></center>
<p align="justify"><font color="#CC0000" ><font size="+1">
Длинная, густая, но тонкая и шелковистая на ошупь шерсть, образующая вокруг плеч и груди роскошный воротник. Очень пышными выглядят также штанишки на задних ногах...</font></font></p>
<center><H2> <A name="s2"> Окрас </A> </H2> </center>
<H3> <A name="s3"> Персидские белые: </A> </H3>
<pre> различают три вариации этого окраса по цвету глаз: голубой,
интенсивный темно-оранжевый или с разноцветными глазами... </pre>
<H3> <A name="s4"> Персидские голубые: </A> </H3>
<pre> словом «голубой» условно определяют серый цвет,
который при определенном освещении проявляет голубой оттенок различной интенсивности... </pre>
<H3> <A name="s5"> Персидские красные: </A> </H3>
<pre> один из самых распространенных окрасов.
В просторечии это просто рыжая кошка... </pre>
<H3> <A name="s10"> Персидские золотые: </A> </H3>
<pre> один из недавно полученных селекционерами окрасов.
Заводчики, занимающиеся разведением шиншилл и серебристых ... </pre>
<H3> <A name="s6"> Персидские кремовые: </A> </H3>
<PRE> кремовый цвет — это ослабленный красный.
Цвет шерсти должен быть чистого пастельного тона... </PRE>
<H3> <A name="s7"> Персидские черепаховые: </A> </H3>
<PRE> это сочетание трех цветов впервые возникло при скрещивании черных длинношерстных котов ... </PRE>
<H3> <A name="s8"> Персидская шиншила: </A> </H3>
<PRE> свое название эта порода получила от названия мелкого южноамериканского хищника... </PRE>
<H3> <A name="s12"> Персидские дымчатые: </A> </H3>
<PRE> от шиншиллы и серебристого затушеванного окраса отличается глубиной тиккинга ... </PRE>
<H3> <A name="s13"> Двухцветные: </A> </H3>
<PRE>были выделены в отдельную группу только в 1969 г.
Современные стандарты требуют, чтобы 2 цвета (белый с одним из шести признанных: ... </PRE>
</body>
</html> посмотреть
Заголовки различных окрасов кошек в нашем примере мы сделали закладками, использовав атрибут тэга:
A - name:
<A name="s3"> Персидские белые: </A>
Затем, мы делаем на них ссылки:
<A href= "#s3" > Персидские белые </A>
Внимание! <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href= "dokum1.html#s3" > Персидские белые </A>
или
<A href= http://www.dokum1_10/.ru/dokum1.html#s3 > Персидские белые </A>
(имя сайта, имя документа + имя закладки)
самостоятелиная работа
Разработать страницу со следующими обязательными элементами:
• главная страница должна иметь ссылку с графического изображения на коллекцию картинок (другая страница)
• главная страница должна иметь ссылку с текстового фрагмента на любую другую веб - страницу (страница с закладками)
• расположите ссылку на ваш почтовый ящик
• разработайте страницу с закладками
Дата публикации:
Теги: информатика :: программирование :: основные понятия :: урок по информатике :: конспект по информатике :: лекция по информатике :: html :: ссылки
Смотрите также учебники, книги и учебные материалы:
Следующие учебники и книги:
- Microsoft Word - Формулы, таблицы, нижние индексы - Практическое задание
- Microsoft Word - Таблицы, колонки, назначение клавиш символам - Практическое задание
- Microsoft Word - Форматирование текста - Практическое задание
- Информатика - Программирование - html - Таблицы
Предыдущие статьи:
- Информатика - Программирование - html - Настройки цвета
- Полезный совет - Восстановление ярлыка Свернуть все окна
- Поурочный план - Информатика - Математические и статистические системы
- Поурочный план - Информатика - Создание Web-страниц