Основы работы с XHTML и CSS
Общий формат тега
| <a href="url">текст ссылки</a> |
| Листинг 7.1. Общий формат тега <a> |
| Закрыть окно |
| <a href="xhtml07-01.htm">Перезагрузить эту страницу</a> <a href="http://www.weather.com">Погода</a> |
| Листинг 7.2. Соединение с локальной и удаленной страницами Web |
| Закрыть окно |
| <a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather</a> |
| Листинг 7.3. Открытие страницы в новом окне браузера |
| Закрыть окно |
| <style type="text/css"> a:link {color:blue; text-decoration:none; font-size:12pt} a:hover {color:green; font-weight:bold; text-decoration:underline; font-size:14pt} a:active {color:red; text-decoration:underline; font-size:14pt} a:visited {color:gray; text-decoration:none; font-size:12pt} </style> <p><a href="SomePage.htm">Text Link</a></p> |
| Листинг 7.4. Задание стилей для текстовых ссылок |
| Закрыть окно |
| <a href="#name">текст ссылки</a> ... <a id="name">текст объекта ссылки</a> |
|
Листинг 7.5. Общий формат тегов <a> для создания ссылок внутри страницы |
| Закрыть окно |
| <!-- Ссылки --> <div><a href="#ITEM1">Go to Item 1</a></div> <div><a href="#ITEM2">Go to Item 2</a></div> <div><a href="#ITEM3">Go to Item 3</a></div> <!-- Места назначения ссылок --> <div><a id="ITEM1"><b>Here is Item 1</b></a></div> ... <div><a id="ITEM2"><b>Here is Item 2/<b></a></div> ... <div><a id="ITEM3"><b>Here is Item 3</b></a></div> ... |
| Листинг 7.6. Код создания ссылок на странице |
| Закрыть окно |
| <div><a href="#">Top</a></div> |
| Листинг 7.7. Код ссылки для перехода к началу страницы |
| Закрыть окно |
| <h1><a id="TOP">Top of Page</a></h1> . . . <div><a href="#TOP">Top</a></div> |
| Листинг 7.8. Код, определяющий место назначения с именем вверху страницы |
| Закрыть окно |
| <div><a href="NextPage.htm#SECTION3">Go to Section 3 on Next Page</a></div> |
| Листинг 7.9. Код ссылки на помеченное место назначения на другой странице |
| Закрыть окно |
| <a href="mailto:email@address">текст ссылки</a> |
| Листинг 7.10. Общий формат ссылки mailto: |
| Закрыть окно |
| <a href="url"><img src="url" alt="text"/></a> |
| Листинг 7.11. Общий формат графической ссылки |
| Закрыть окно |
| <style type="text/css"> img {border:0; vertical-align:middle} </style> <p> <a href="http://www.ebay.com"><img src="ebay.jpg" alt="eBay Link"/></a> <a href="http://www.ebay.com">Ebay</a> </p> <p> <a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a> <a href="http://www.nascar.com">NASCAR</a> </p> <p> <a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a> <a href="http://www.weather.com">The Weather Channel</a> </p> <p> <a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/></a> <a href="http://www.microsoft.com">Microsoft</a> </p> |
| Листинг 7.12. Код для создания графических и текстовых ссылок |
| Закрыть окно |
| <p> <a href="javascript:" onclick="open('http://www.ebay.com','','')"><img src="ebay.jpg" alt="eBay Link"/></a> <a href="javascript:" onclick="open('http://www.ebay.com','','')">Ebay</a> </p> <p> <a href="javascript:" onclick="open('http://www.nascar.com','','')"><img src="nascar.jpg" alt="NASCAR Link"/></a> <a href="javascript:" onclick="open('http://www.nascar.com','','')">NASCAR</a> </p> <p> <a href="javascript:" onclick="open('http://www.weather.com','','')"><img src="weather.jpg" alt="Weather Link"/></a> <a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather Channel</a> </p> <p> <a href="javascript:" onclick="open('http://www.microsoft.com','','')"><img src="microsoft.jpg" alt="Microsoft Link"/></a> <a href="javascript: " onclick="open('http://www.microsoft.com','','')">Microsoft</a> </p> |
| Листинг 7.13. Код для открытия графических и текстовых ссылок в отдельном окне браузера |
| Закрыть окно |
| <img src="url" alt="text" usemap="#mapname"/>
<map id="mapname"> <area shape="rect|circle|poly" coords="coordinates" href="url" alt="text" /> ... </map> |
| Листинг 7.14. Связывание выводимого изображения с картой ссылок |
| Закрыть окно |
| <img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap"> <map id="MyImageMap"> <area shape="rect" coords="8,13,130,123" href="#LINK1" alt="Determining Mapped Areas"/> <area shape="circle" coords="228,123,62" href="#LINK2" alt=" Coding an Image Map"/> <area shape="poly" coords="100,144 175,200 155,255 50,250 45,175" href="#LINK3" alt="Overlapped Mapped Areas"/> </map> |
| Листинг 7.15. Код создания карты ссылок |
| Закрыть окно |
| <?xml version="1.0" encoding="UTF-8"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Использование графических карт</title> <style type="text/css"> body {margin:20px} .center {text-align:center} </style> </head> <body> <h2 class="center">Using Image Maps</h2> <p class="center"> <img src="MyMap.gif" usemap="#MyImageMap" alt="Image Map" style="border:0px/"> <map id="MyImageMap"> <area shape="rect" coords="8,13,130,123" href="#LINK1" alt="Determining Mapped Areas"/> <area shape="circle" coords="228,123,62" href="#LINK2" alt="Coding an Image Map"/> <area shape="poly" coords="100,144 175,200 155,255 50,250 45,175" href="#LINK3" alt="Overlapped Mapped Areas"/> </map> </p> <p class="center""> <a href="#LINK1">Determining Mapped Areas</a> | <a href="#LINK2">Coding an Image Map</a> | <a href="#LINK3">Overlapped Mapped Areas</a> </p> <h3><a name="LINK1">Determining Mapped Areas</a></h3> ...text... <p><a href="#">Top</a></p> <h3><a name="LINK2">Coding an Image Map</a></h3> ...text... <p><a href="#">Top</a></p> <h3><a name="LINK3">Overlapped Mapped Areas</a></h3> ...text... <p><a href="#">Top</a></p> </body> </html> |
| Листинг 7.16. Код страницы с картой ссылок |
| Закрыть окно |
| <meta http-equiv="refresh" content="seconds; url=url" /> |
| Листинг 7.17. Общая форма тега <meta/> |
| Закрыть окно |
| <head> <title>Redirect Page</title> <meta http-equiv="refresh" content="5; url=xhtml07-04.htm"/> </head> |
| Листинг 7.18. Код автоматической переадресации на другую страницу |
| Закрыть окно |
| <head> <title>Slide 1</title> <meta http-equiv="refresh" content="3; url=Slide2.htm"/> </head> <body> <h1>Toy Story</h1> <p><img src="ToyStory.jpg" alt="Toy Store Image"/></p> </body> <head> <title>Slide 2</title> <meta http-equiv="refresh" content="3; url=Slide3.htm"/> </head> <body> <h1>A Bug's Life</h1> <p><img src="BugsLife.jpg" alt="A Bugs's Life Image"/></p> </body> <head> <title>Slide 3</title> <meta http-equiv="refresh" content="3; url=Slide4.htm"/> </head> <body <h1>Finding Nemo</h1> <p><img src="FindingNemo.jpg" alt="Finding Nemo Image"/></p> </body> <head> <title>Slide 4</title> <meta http-equiv="refresh" content="3; url=Slide5.htm"/> </head> <body <h1>Monsters, Inc.</h1> <p><img src="MonstersInc.jpg" alt="Monsters, Inc. Image"/></p> </body> <head> <title>Slide 5</title> <meta http-equiv="refresh" content="3; url=begin.htm"/> </head> <body <h1>Toy Story 2</h1> <p><img src="ToyStory2.jpg" alt="Toy Store 2 Image"/></p> </body> |
| Листинг 7.19. Частичный код страниц слайд-шоу |
| Закрыть окно |
| <a href="#" onclick="open('Slide1.htm','','')"> <img src="Pixar.gif" alt="Просмотр слайд-шоу"/> </a> |
| Листинг 7.20. Вывод слайд-шоу в отдельном окне браузера |
| Закрыть окно |
| <img src="../Application3/Media/Picture1.gif"/> |
| Листинг 7.21. Соединение с графическим файлом, используя перемещение между каталогами |
| Закрыть окно |
| <img src="Media/Picture.gif"/> |
| Листинг 7.22. Соединение с графическим файлом в подкаталоге |
| Закрыть окно |
| <a href="../Application3/Page2.htm">На страницу Page2.htm</a> |
| Листинг 7.23. Соединение со страницей Web в другой папке |
| Закрыть окно |
