HTML/CSS/Basic Tags/Anchor

Содержание

1 A basic link to an external web site
2 A basic link to another page
3 Add background image to anchor link
4 Add text decoration for link
5 A link with a title attribute
6 A link with white space
7 a name = ".."></a> creates an internal hyperlink
8 Anchor element
9 Anchor hover image style
10 anchor style for removing the underline
11 avoid underlining links
12 background image, repeat and position for anchor link
13 Four level nesting for anchor style setting
14 Image links
15 Introduction to hyperlinks
16 "link" defines relationship between the current page and external documents
17 List with anchor
18 relative link
19 Set background for anchor
20 Set border for an anchor with under in a
21 Set cursor for anchor link and visted
22 Set text decoration for anchor
23 Set text-decoration to none for <A>
24 text-decoration, color, background-color for hover anchor
25 Using images as link anchors
26 Using Links - Changing Backgrounds
27 Using Links with Background Images

A basic link to an external web site

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>A basic link to an external web site</title>
</head>
<body>
   <p>Why not visit the <a href="http://www.wrox.ru/">Wrox Web site</a>?</p>
</body>
</html>

A basic link to another page

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>A basic link to another page</title>
</head>
<body>
   <p>Return to the <a href="index.html">index page</a>.</p>
</body>
</html>

Add background image to anchor link

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Anchors</title>
  <style type="text/css" media="screen">
  
  body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  div {
    margin-bottom: 50px;
    }  
  
  #divID a:link {
    padding-right: 15px;
    background: url(img/7.gif) no-repeat center right;
    }
  
  
  </style>
</head>
<body>

<div id="divID">
<p><a href="#oranges">About Oranges</a></p>

</body>
</html>

Add text decoration for link

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Anchors</title>
  <style type="text/css" media="screen">
  
  body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  div {
    margin-bottom: 50px;
    }  
  
  #divID a:link {
    color: green;
    text-decoration: underline overline;
    font-weight: bold;
    }
  
  
  </style>
</head>
<body>

<div id="divID">
<p><a href="#oranges">About Oranges</a></p>

</body>
</html>

A link with a title attribute

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>A link with a title attribute - hover over the link to see the tooltip appear</title>
</head>
<body>
<p><a href="http://www.Google.ru/" title="Search the web with Google">Google</a>.</p> 
</body>
</html>

A link with white space

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>A link with white space.</title>
</head>
<body>
   <p>Why not visit the<a href="http://www.wrox.ru/"> Wrox Web site </a>?</p>
</body>
</html>

a name = ".."></a> creates an internal hyperlink

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <body>
      <p><a name = "features"></a></p>
      <h1>The Best Features of the Internet</h1>
      <!-- an internal link"s address is "#linkname"         -->
      <p><a href = "#ceos">Go to <em>Favorite CEOs</em></a></p>
      <!-- named anchor -->
      <p><a name = "ceos"></a></p>
      <h1>My 3 Favorite <em>CEOs</em></h1>
   
      <p>
         <!-- internal hyperlink to features -->
         <a href = "#features">Go to <em>Favorite Features</em>
         </a></p>
      <ol>
         <li>B</li>
         <li>S</li>
         <li>M</li>
      </ol>
   </body>
</html>

Anchor element

 
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Using Links</title>
  </head>
  <body>
    <p>
      <a href="http://www.google.ru">Search</a>
    </p>
  </body>
</html>

Anchor hover image style

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
img {
  width: 300px;
  border: 6px double #666;
  background: #fff;
  padding: 4px;
  display:block;
}
a:link {
  display:block;
}
a:hover img {
  border-style: solid;
  background: #999;
  }
</style>
    </head>
    <body>
<a href="http://www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" alt="Face" /></a>
    </body>
</html>

anchor style for removing the underline

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with Style</title>
<style rel="stylesheet" type="text/css">
h2 {
font: bold 1.2em Verdana, Arial, sans-serif;
color: #666699;
background-color: transparent;
}
img {
border: none;
}
a:link {
color: #0099CC;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #0077aa;
background-color: transparent;
text-decoration: none;
}
a:active {
color: #0099cc;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #0077cc;
background-color: #eeeeee;
text-decoration: none;
}
</style>
</head>
<body>
<div id="content">
<h3>Quotations</h3>
<p>this is a test</p>
</div>
<div id="right">
<p>Navigate:</p>
<p><a href="index.html">Home</a><br />
<a href="news.html">News</a><br />
<a href="about.html">About</a><br />
<a href="contact.html">Get in Touch</a></p>
</div>
</body>
</html>

avoid underlining links

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Link Style Changes</TITLE>
<STYLE TYPE="text/css">
<!--
.A {text-decoration: none} /*  */
-->
</STYLE>
</HEAD>
<BODY LINK="blue" ALINK="red" VLINK="red">
<A HREF="http://www.yahoo.ru">Test Link to Yahoo!</A>
</BODY>
</HTML>

background image, repeat and position for anchor link

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:link { 
 display: block;
 width: 125px;
 height: 30px;
 background-image: url(btn.gif);
 background-repeat: no-repeat;
 background-position: top left;
}

</style>
</head>
<body>
  <a href="/" id="linkhome">
   <span>Homepage</span>
  </a
  
</body>
</html>

Four level nesting for anchor style setting

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

#navsite ul li a {
 padding: 3px 0.5em; 
 margin-left: 3px; 
 border: 1px solid #778;
 border-bottom: none;
 background: #dde;
 text-decoration: none;
}
</style>
</head>
<body>
   <div id="navsite">
   <h5>Site navigation:</h5>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="" id="current">Speaking</a></li> 
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>

Image links

 
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style type="text/css">
      img {border: none;}
    </style>
    <title>Using Links - Image Links</title>
  </head>
  <body>
    <p>
      <a href="mailto:webmaster@m.ru">
      <img src="email_btn.gif" alt="Email Webmaster" /></a>
    </p>
  </body>
</html>

Introduction to hyperlinks

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Internet and WWW How to Program - Links</title>
   </head>
   <body>
      <h1>Here are my favorite sites</h1>
      <p><strong>Click a name to go to that page.</strong></p>
      <p><a href = "http://www.prenhall.ru">Prentice Hall</a></p>
      <p><a href = "http://www.yahoo.ru">Yahoo!</a></p>
      <p><a href = "http://www.usatoday.ru">USA Today</a></p>
   </body>
</html>

"link" defines relationship between the current page and external documents

    
<html>
<head>
<title>link element example</title>
<link rel="stylesheet" href="http://www.wbex.ru/style/jss.css" type="text/css">
</head>
<body>This text will have the font specified in http://www.wbex.ru/style/jss.css </body>
</html>

List with anchor

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul{  
  list-style:none;
  margin:0;
  padding:0;
  float:left;
}
ul#test{
  font-size:120%;
  width:28em;
  background:#aaa
}
ul#test li{
  clear:both;
  text-align:right;
  width:10em;
}
ul#test li a{
  display:block;
  float:right;
  border:1px solid #000;
  background:#ccc;
  padding:3px;
  text-decoration:none;  
  color:#000;
  margin:5px;
}
ul#test ul{
  position:relative;
  left:10.5em;
  margin-top:-2em;
  width:17em;
}
ul#test li li{
  clear:none;
  text-align:left;
  display:inline;
}
ul#test li li a{
  float:left;
  text-align:left;
  white-space:nowrap;
  background:#fff;
}
</style>
</head>
<body>
<ul id="test">
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a>
    <ul>
      <li><a href="">Inner 1</a></li>
      <li><a href="">Inner 2</a></li>
      <li><a href="">Inner 3</a></li>
      <li><a href="">Inner 4</a></li>
      <li><a href="">Inner 5</a></li>
      <li><a href="">Inner 6</a></li>
      <li><a href="">Inner 7</a></li>
      <li><a href="">Inner 8</a></li>
    </ul>
  </li>
  <li> <a href="">Item 3</a> </li>
  <li> <a href="">Item 4</a>
    <ul>
      <li><a href="">Inner 1</a></li>
      <li><a href="">Inner 2</a></li>
      <li><a href="">Inner 3</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

relative link

 
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Using Links - Relative Links</title>
  </head>
  <body>
    <p>
      Options:<br />
      <a href="home.html">Home</a><br />
      <a href="news.html">News</a><br />
      <a href="menu.html">Menu</a><br />
      <a href="locations.html">Locations</a>
    </p>
  </body>
</html>

Set background for anchor

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:link {
 color: #777; 
 text-decoration: none;
}
a:visited {
 color: #333;
 text-decoration: none;
}
a:link:hover, a:visited:hover {
 color: #777;
 background-color: #ccc;
}
a:link:active, a:visited:active {
 color: #ccc;
 background-color: #ccc;
}
</style>
</head>
<body>
  
    <ul>
    <li><a href=" ">V</a></li> 
    <li><a href=" ">S</a></li>
    <li><a href=" ">T</a></li> 
    <li><a href=" ">P</a></li> 
    </ul>
</body>
</html>

Set border for an anchor with
under
in a

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite ul li a {
 display: block; 
 padding: 2px 2px 2px 0.5em; 
 border-left: 10px solid #369; 
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036; 
 color: #fff; 
 text-decoration: none; 
 width: 100%; 
}
</style>
</head>
<body id="pagespk">
  <div id="navsite">
    <h5>Site navigation:</h5>
    <ul>
     <li><a href="/" id="linkhom">Home</a></li>
     <li><a href="/about/" id="linkabt">About</a></li> 
     <li><a href="/archives/" id="linkarh">Archives</a></li>
     <li><a href="/writing/" id="linkwri">Writing</a></li>
     <li><a href="/speaking/" id="linkspk">Speaking</a></li> 
     <li><a href="/contact/" id="linkcnt">Contact</a></li>
    </ul>
  </div>
</body>
</html>

Set cursor for anchor link and visted

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:link, a:visited {
 cursor: move;  
}
</style>
</head>
<body>
<p>Text<a href=" ">link</a>, between, <a href=" ">link</a> after.</p>
  
</body>
</html>

Set text decoration for anchor

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:link {
 color: #777; 
 text-decoration: none;
}
a:visited {
 color: #333;
 text-decoration: none;
}
a:link:hover, a:visited:hover {
 color: #777;
 background-color: #ccc;
}
a:link:active, a:visited:active {
 color: #ccc;
 background-color: #ccc;
}
</style>
</head>
<body>
  
    <ul>
    <li><a href=" ">V</a></li> 
    <li><a href=" ">S</a></li>
    <li><a href=" ">T</a></li> 
    <li><a href=" ">P</a></li> 
    </ul>
</body>
</html>

Set text-decoration to none for <A>

 
<html>
 <head>
  <title>Set text-decoration to none for <A></title>
  <style type="text/css">
  a {
   text-decoration: none;
  }
  </style>  
 </head>
 <body>
  <h1>Title of Page</h1>
  <p>This is a sample paragraph with a 
  <a href="http://www.wbex.ru">link</a>.</p>
 </body>
</html>

text-decoration, color, background-color for hover anchor

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <style type = "text/css">
         a:hover  { text-decoration: underline;
                    color: red;
                    background-color: #ccffcc }
      </style>
   </head>
   <body>
      <h1>Shopping list for <em>Monday</em>:</h1>
      <ul>
         <li>M</li>
         <li>B
            <ul>
               <li>W</li>
               <li>R</li>
               <li>W</li>
            </ul>
         </li>
         <li>R</li>
         <li>P</li>
         <li>P<em>this is a test. </em></li>
      </ul>
      <p><a class = "nodec" href = "http://www.wbex.ru">
      this is a test. </a></p>
   </body>
</html>

Using images as link anchors

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Using images as link anchors</title>
   </head>
   <body>
      <p>
         <a href = "">
            <img src = "" width = "65" height = "50" alt = "Links Page" />
         </a><br />
         <a href = "">
            <img src = "" width = "65" height = "50" alt = "List Example Page" />
         </a><br />
         <a href = "">
            <img src = "" width = "65" height = "50" alt = "Contact Page" />
         </a><br />
         <a href = "">
            <img src = "" width = "65" height = "50" alt = "Header Page" />
         </a><br />
         <a href = "">
            <img src = "" width = "65" height = "50" alt = "Table Page" />
         </a><br />
         <a href = "">
            <img src = "" width = "65" height = "50" alt = "Feedback Form" />
         </a><br />
      </p>
   </body>
</html>

Using Links - Changing Backgrounds

 
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style type="text/css">
a {
      color: black;
      font: 12px Arial,Helvetica,sans-serif;
      text-decoration: none;
      border: 2px solid black;
      display: block;
      width: 200px;
      padding: 3px 10px;
      background: #dcdcdc;
}
a:hover, a:active, a:focus {
      background: #4169E1;
      font-weight: bold;
}
    </style>
    <title>Using Links - Changing Backgrounds</title>
  </head>
  <body>
    <p>
      Options:<br/>
      <a href="home.html">Home</a><br />
      <a href="news.html">News</a><br />
      <a href="menu.html">Menu</a><br />
      <a href="locations.html" >Locations</a>
    </p>
  </body>
</html>

Using Links with Background Images

 
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style type="text/css">
a {
      color: black;
      font: 12px Arial,Helvetica,sans-serif;
      text-decoration: none;
      display: block;
      width: 200px;
      height: 22px;
      padding-top:8px;
      text-align:center;
      background-image: url("btnOn.gif");
}
a:hover {
      background-image:url("btnOff.gif");
      font-weight: bold;
}
    </style>
    <title>Using Links with Background Images</title>
  </head>
  <body>
    <p>
      Options:
      <a href="home.html">Home</a><br />
      <a href="news.html">News</a><br />
      <a href="menu.html">Menu</a><br />
      <a href="locations.html">Locations</a>
    </p>
  </body>
</html>

HTML/CSS/Basic Tags/Anchor

Содержание

A basic link to an external web site

A basic link to another page

Add background image to anchor link

Add text decoration for link

A link with a title attribute

A link with white space

a name = ".."></a> creates an internal hyperlink

Anchor element

Anchor hover image style

anchor style for removing the underline

avoid underlining links

background image, repeat and position for anchor link

Four level nesting for anchor style setting

Image links

Introduction to hyperlinks

"link" defines relationship between the current page and external documents

List with anchor

relative link

Set background for anchor

Set border for an anchor with
under
in a

Set cursor for anchor link and visted

Set text decoration for anchor

Set text-decoration to none for <A>

text-decoration, color, background-color for hover anchor

Using images as link anchors

Using Links - Changing Backgrounds

Using Links with Background Images

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

HTML/CSS/Basic Tags/Anchor

Содержание

A basic link to an external web site

A basic link to another page

Add background image to anchor link

Add text decoration for link

A link with a title attribute

A link with white space

a name = ".."></a> creates an internal hyperlink

Anchor element

Anchor hover image style

anchor style for removing the underline

avoid underlining links

background image, repeat and position for anchor link

Four level nesting for anchor style setting

Image links

Introduction to hyperlinks

"link" defines relationship between the current page and external documents

List with anchor

relative link

Set background for anchor

Set border for an anchor with under in a

Set cursor for anchor link and visted

Set text decoration for anchor

Set text-decoration to none for <A>

text-decoration, color, background-color for hover anchor

Using images as link anchors

Using Links - Changing Backgrounds

Using Links with Background Images

Навигация

Поиск

Set border for an anchor with
under
in a