HTML/CSS/Basic Tags/Anchor

Материал из Web эксперт
Версия от 08:17, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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