HTML/CSS/Basic Tags/Anchor

Материал из Web эксперт
Перейти к: навигация, поиск

A basic link to an external web site

   <source lang="html4strict">

<?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>

Why not visit the <a href="http://www.wrox.ru/">Wrox Web site</a>?

</body> </html>

</source>
   
  


A basic link to another page

   <source lang="html4strict">

<?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>

Return to the <a href="index.html">index page</a>.

</body> </html>

</source>
   
  


Add background image to anchor link

   <source lang="html4strict">

<!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>

<a href="#oranges">About Oranges</a>

</body> </html>

</source>
   
  


Add text decoration for link

   <source lang="html4strict">

<!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>

<a href="#oranges">About Oranges</a>

</body> </html>

</source>
   
  


A link with a title attribute

   <source lang="html4strict">

<?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>

<a href="http://www.Google.ru/" title="Search the web with Google">Google</a>.

</body> </html>

</source>
   
  


A link with white space

   <source lang="html4strict">

<?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>

Why not visit the<a href="http://www.wrox.ru/"> Wrox Web site </a>?

</body> </html>

</source>
   
  


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

   <source lang="html4strict">

<?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>

<a name = "features"></a>

The Best Features of the Internet

<a href = "#ceos">Go to Favorite CEOs</a>

<a name = "ceos"></a>

My 3 Favorite CEOs

<a href = "#features">Go to Favorite Features </a>

  1. B
  2. S
  3. M
  </body>

</html>

</source>
   
  


Anchor element

   <source lang="html4strict">

<?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>

<a href="http://www.google.ru">Search</a>

 </body>

</html>

</source>
   
  


Anchor hover image style

   <source lang="html4strict">

<!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>

</source>
   
  


anchor style for removing the underline

   <source lang="html4strict">

<!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>

Quotations

this is a test

</body> </html>

</source>
   
  


avoid underlining links

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Link Style Changes</TITLE> <STYLE TYPE="text/css">

</STYLE> </HEAD> <BODY LINK="blue" ALINK="red" VLINK="red"> <A HREF="http://www.yahoo.ru">Test Link to Yahoo!</A> </BODY> </HTML>

</source>
   
  


background image, repeat and position for anchor link

   <source lang="html4strict">

<!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">
  Homepage
 </a
 

</body> </html>

</source>
   
  


Four level nesting for anchor style setting

   <source lang="html4strict">

<!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">

  1. 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>

</body> </html>

</source>
   
  


Image links

   <source lang="html4strict">

<?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>

<a href="mailto:webmaster@m.ru"> <img src="email_btn.gif" alt="Email Webmaster" /></a>

 </body>

</html>

</source>
   
  


Introduction to hyperlinks

   <source lang="html4strict">

<?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>

Here are my favorite sites

Click a name to go to that page.

<a href = "http://www.prenhall.ru">Prentice Hall</a>

<a href = "http://www.yahoo.ru">Yahoo!</a>

<a href = "http://www.usatoday.ru">USA Today</a>

  </body>

</html>

</source>
   
  


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

   <source lang="html4strict">
   

<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>


     </source>
   
  


List with anchor

   <source lang="html4strict">

<!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>

  • <a href="">Item 1</a>
  • <a href="">Item 2</a>
    • <a href="">Inner 1</a>
    • <a href="">Inner 2</a>
    • <a href="">Inner 3</a>
    • <a href="">Inner 4</a>
    • <a href="">Inner 5</a>
    • <a href="">Inner 6</a>
    • <a href="">Inner 7</a>
    • <a href="">Inner 8</a>
  • <a href="">Item 3</a>
  • <a href="">Item 4</a>
    • <a href="">Inner 1</a>
    • <a href="">Inner 2</a>
    • <a href="">Inner 3</a>

</body> </html>

</source>
   
  


relative link

   <source lang="html4strict">

<?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>

Options:
<a href="home.html">Home</a>
<a href="news.html">News</a>
<a href="menu.html">Menu</a>
<a href="locations.html">Locations</a>

 </body>

</html>

</source>
   
  


Set background for anchor

   <source lang="html4strict">

<!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>

  • <a href=" ">V</a>
  • <a href=" ">S</a>
  • <a href=" ">T</a>
  • <a href=" ">P</a>

</body> </html>

</source>
   
  


Set border for an anchor with
  • under
      in a
  •    <source lang="html4strict">
    
    

    <!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">

    1. 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">

    </body> </html>

    </source>
       
      
    


    Set cursor for anchor link and visted

       <source lang="html4strict">
    
    

    <!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>

    Text<a href=" ">link</a>, between, <a href=" ">link</a> after.

    </body> </html>

    </source>
       
      
    


    Set text decoration for anchor

       <source lang="html4strict">
    
    

    <!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>

    • <a href=" ">V</a>
    • <a href=" ">S</a>
    • <a href=" ">T</a>
    • <a href=" ">P</a>

    </body> </html>

    </source>
       
      
    


    Set text-decoration to none for <A>

       <source lang="html4strict">
    
    

    <html>

    <head>
     <title>Set text-decoration to none for <A></title>
     <style type="text/css">
     a {
      text-decoration: none;
     }
     </style>  
    </head>
    <body>
    

    Title of Page

    This is a sample paragraph with a <a href="http://www.wbex.ru">link</a>.

    </body>
    

    </html>

    </source>
       
      
    


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

       <source lang="html4strict">
    
    

    <?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>
    

    Shopping list for Monday:

    • M
    • B
      • W
      • R
      • W
    • R
    • P
    • Pthis is a test.

    <a class = "nodec" href = "http://www.wbex.ru"> this is a test. </a>

      </body>
    

    </html>

    </source>
       
      
    


    Using images as link anchors

       <source lang="html4strict">
    
    

    <?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>
    

    <a href = ""> <img src = "" width = "65" height = "50" alt = "Links Page" /> </a>
    <a href = ""> <img src = "" width = "65" height = "50" alt = "List Example Page" /> </a>
    <a href = ""> <img src = "" width = "65" height = "50" alt = "Contact Page" /> </a>
    <a href = ""> <img src = "" width = "65" height = "50" alt = "Header Page" /> </a>
    <a href = ""> <img src = "" width = "65" height = "50" alt = "Table Page" /> </a>
    <a href = ""> <img src = "" width = "65" height = "50" alt = "Feedback Form" /> </a>

      </body>
    

    </html>

    </source>
       
      
    


    Using Links - Changing Backgrounds

       <source lang="html4strict">
    
    

    <?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>
    

    Options:
    <a href="home.html">Home</a>
    <a href="news.html">News</a>
    <a href="menu.html">Menu</a>
    <a href="locations.html" >Locations</a>

     </body>
    

    </html>

    </source>
       
      
    


    Using Links with Background Images

       <source lang="html4strict">
    
    

    <?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>
    

    Options: <a href="home.html">Home</a>
    <a href="news.html">News</a>
    <a href="menu.html">Menu</a>
    <a href="locations.html">Locations</a>

     </body>
    

    </html>

    </source>
    Источник — «http://wbex.ru/index.php?title=HTML/CSS/Basic_Tags/Anchor&oldid=6027»