HTML/CSS/Basic Tags/Header

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

Содержание

Adding links in to the header

   <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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { 

 margin: 10px 40px;
 padding: 0;
 text-align: center;
 font-size: 62.5%;

}

  1. wrapper {
 text-align: left;
 border: 1px solid #033;
 position: relative;
 font-size: 1.4em;

}

  1. header {
 background: red;
 color: #fff;
 height: 55px;
 position: relative;

}

  1. header h1,#header h2 {
 position: absolute;
 padding: 0;
 margin: 0;

}

  1. header h1 {
 top: 5px;
 left: 8px;
 height: 50px;
 background: gold;

}

  1. header h2 {
 top: 20px;
 left: 193px;

}

  1. headerlinks {
 float: right;
 font-size: 0.8em;
 background: blue;
 padding: 6px 6px 8px 10px;

}

  1. headerlinks a:link,#headerlinks a:visited,#headerlinks a:hover,#headerlinks a:active
 {
 color: #fff;

} </style> </head> <body id="cols3">

</body> </html> 

</source>


Adding top and bottom margin for heading

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Headings example 3</title>
 <style type="text/css">
   body {
     font: 12px/1.5em Georgia, serif;
   }
   h1 { 
     font: 1.5em/1em Georgia, serif;
     margin: 0.5em 0 0.25em 0;
   }
   p {
     margin: 0;
     width: 33em;
   }
 </style>

</head> <body>

The most important heading

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Add the Left Margin

   <source lang="html4strict">

<?xml version = "1.0"?> <!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></title>
     <style type="text/css">
  • .left-marginal {
 position: relative;
 margin-left: 200px;

}

  • .marginal-heading {
 position: absolute;
 left: -200px;
 top: 0;
 margin: 0;

} </style> 

  </head>
  <body>

Left Marginal

Heading

 move it into the left margin.

  </body>

</html> 

</source>


A fixed header

   <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" xml:lang="en"> 

   <head>
       <title>positioning</title>
       <style rel="stylesheet" type="text/css">

h1 { 

   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 20px;
   width: 500px;
   font-weight: normal;
   font-size: 18px;
   border-bottom: 1px solid rgb(200, 200, 200);
   background: white;
   margin: 0;
   padding: 5px;

} div#container { 

   position: absolute;
   top: 31px;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: auto;
   padding: 0 10px;
   line-height: 2em;

} 

       </style>
   </head>
   <body>

A Fixed Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.

Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos. 

   </body>

</html> 

</source>


Background with bottom border

   <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>Headings</title>
 <style type="text/css" media="screen">
 body{
   font-family: verdana, sans-serif;
   font-size: 12px;
   }
 
 #divID h1 {
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #666;
   padding: 4px;
   background: #ddd;
   border-bottom: 2px solid #ccc;
   }
 
 
 </style>

</head> <body>

This is the Title of this page.

</body> </html> 

</source>


Border for header

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

    <head>
     <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
     <meta http-equiv="content-language" content="en-us" />
       <title>Selectors and Grouping</title>
       <style type="text/css" media="all">
           p {
               font-family: Arial;
               font-size: 14pt;
           }
           h1 {
               color: black;
               border: 5px solid black;
           }
           h2 {
               color: orange;
               border: 4px solid orange;
           }
           h3 {
               color: blue;
               border: 3px solid blue;
           }
           h1, h2, h3 {
               letter-spacing: 5px;
               padding: 10px;
           }
       </style>
    </head>
    <body>

Heading 1

Heading 2

Heading 3

Selectors choose the element to apply formatting to. These may also be grouped together. 

   </body>

</html> 

</source>


h1 padding: 10px

   <source lang="html4strict">


<html> <head> <title>Untitled</title> <style type="text/css"> h1 {color: white; 

    background-color: black;
    text-align: center;
  padding: 10px;}

</style> </head> <body>

Contents of the <h1> Element

</body> </html> 

</source>


overflow hidden

   <source lang="html4strict">

<?xml version = "1.0"?> <!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></title>
     <style type="text/css">
  1. h2 {
 position: relative;
 width: 250px;
 height: 76px;
 overflow: hidden;

}

  1. h2 span {
 position: absolute;
 width: 250px;
 height: 76px;
 left: 0;
 top: 0;
 background: url("http://www.wbex.ru/style/logo.png") no-repeat;

} </style> 

  </head>
  <body>

Text Replacement

<h2 id="h2" >Heading 2This is a span.

  </body>

</html> 

</source>


header 2 background image 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"> h2 { 

background-image: url(headline.jpg);
background-repeat: none;
width: 587px;
height: 113px;

} </style> </head> <body>

<img src="" alt="Headline image set in GIF format" />

</body> </html> 

</source>


Header content section

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

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .section {
 padding: 10px;
 margin-bottom: 20px;
 background-color: pink;
 border-left: 1px solid gray;
 border-right: 2px solid black;
 border-top: 1px solid gray;
 border-bottom: 2px solid black;

}

  • .indent {
 margin-left: 20px;
 border-left: 4px solid black;
 padding-left: 20px;

} </style> </head> <body>

Normal Heading

this is a test. this is a test. this is a test. this is a test.


</body> </html> 

</source>


Header font 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"> h2 { 

font-size: 2em;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
padding: 0;
margin: 0;

} </style> </head>

Crossing Over

Gordon (I-Utah) GOP;
changes parties to be Independent

</body> </html> 

</source>


Header, image and content

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Image</title> <style type="text/css"> img.figure { 

 float: right;
 margin-left: 10px;
 margin-bottom: 10px;
 border: 1px solid #666;
 padding: 10px;

} body { 

 font-size: 62.5%;
 margin: 0px;
 padding: 0px;

}

  1. content {
 margin-left: 15px;
 margin-top: 15px;
 border: 1px dashed #999;
 border-right: none;
 border-bottom: none;

} p.caption { 

 font-size: 1.3em;
 line-height: normal;
 margin-bottom: 15px;

}

  1. gallery .figure p {
 font-size: 1.1em;
 text-align: center;
 line-height: normal;
 margin: 0;

}

h1 { 

 font: normal 2.4em;
 margin: 0;
 border-bottom: 1px dashed #999;
 padding: 5px 0 5px 8px;
 color: #14556b;

} 

p {
 font: 1.6em/160%;
 margin: 10px 8px;

} .copyright { 

 font-size: 1em;
 margin-left: 0px;
 padding-left: 8px;
 border-top: 1px dashed #999;
 clear: both;

} </style> </head> <body>

header

<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" class="figure" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

Copyright 2006, aaa.ru

</body> </html> 

</source>


Header text alignment: center

   <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"> h1 { 

font-size: 17em;
margin: 0;
padding: 0;
text-align: center;

} </style> </head>

Hi.

</body> </html> 

</source>


header with absolute position

   <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"> body { 

background-color: #009E69;
margin: 0;

} h2 { 

position:absolute; 
width:126px; 
height:126px; 
z-index:1; 
left: 166px; 
top: 69px;

}

</style> </head>

Earth News

before <a href="">after</a></p </body> </html> </source>

Headings

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Headings</title>

</head> <body>

Header 1

<p>See what people are saying about us!

Header 2

Our loyal customers love us.

Header 2

This is a test. This is a test.

</body> </html> 

</source>


Heading with background

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Image replacement</title>

<style type="text/css" media="screen"> .aFancyHeading { 

   position: relative;
   width: 279px;
   height: 28px;
   overflow: hidden;
   font-size: 20px;
   }

.aFancyHeading span { 

   position: absolute;
   background: red;
   width: 100%;
   height: 100%;

} </style> </head> <body>

This is the heading

This is the content. this is a test. this is a test. This is the content. this is a test. this is a test. This is the content. this is a test. this is a test. This is the content. this is a test. this is a test.

</body> </html> 

</source>


Heading with margin

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Headings example 1</title>
 <style type="text/css">
   body {
     font: 12px/1.5em Georgia, serif;
   }
   h1 { 
     font: bold 1em/1.5em Georgia, serif;
     margin: 1.25em 0 0 0;
   }
   h2 { 
     font: italic 1em/1.5em Georgia, serif;
     margin: 1.25em 0 0 0;
   }
   p {
     margin: 0;
     width: 33em;
   }
 </style>

</head> <body>

The most important heading

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

A less important heading

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Hide
in 
   <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 h5 {
display: none;

} </style> </head> <body>

</body> </html> 

</source>


Inline style for header

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

    <head>
     <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
     <meta http-equiv="content-language" content="en-us" />
       <title>Selectors and Grouping</title>
    </head>
    <body>

Heading 1

Heading 2

Heading 3

Selectors choose the element to apply formatting to. These may also be grouped together. 

   </body>

</html> 

</source>


Inline style for header 3

   <source lang="html4strict">

<html> <title>CSS Sample</title></head> <body>

This is going to be a headline.

This will be another headline.

</body> <html> 

</source>


Letter Spacing in Headlines

   <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></title>
 <meta http-equiv="Content-Type"
   content="text/html; charset=iso-8859-1" />
 <style type="text/css">
 h1 {
   font-family: Courier, "Courier New", monospace;
 }
 .rupress {
   letter-spacing: -0.05em;
 }
 </style>

</head> <body>

This Is a Little Too Spread Out

This Is a Little Bit Better

</body> </html> 

</source>


News Header style

   <source lang="html4strict">

<?xml version="1.0" ?> <!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" xml:lang="en"> <head> 

 <title>Channel 7 News</title>
 <style rel="stylesheet" type="text/css">

body { 

 background-color: #FFFFFF;

} .heading { 

 border-style: solid;
 border-width: 1px;
 border-color: #000000;
 width: 90%;
 font-family: arial, verdana, helvetica, sans-serif;
 font-size: 22pt;
 text-align: right;
 color: #000000;
 background-image: url("images/seven.gif");
 background-repeat: no-repeat;
 margin: 5px;
 padding: 10px;

} .page { 

 margin: 5px;
 padding: 10px;
 width: 90%;
 border-style: solid;
 border-width: 1px;
 border-color: #000000;

} .nav { 

 margin: 5px;
 padding: 10px;
 width: 90%;
 border-style: solid;
 border-width: 1px;
 border-color: #000000;
 background-color: #efefef;

} .title { 

 font-family: arial, verdana, helvetica, sans-serif;
 font-size: 16pt;
 padding-bottom: 12px;

} .page { 

 font-family: arial, verdana, helvetica, sans-serif;
 font-size: 12pt;

} a { 

 text-decoration: none;
 padding: 3px;
 font-family: arial, verdana, helvetica, sans-serif;
 font-size: 12pt;

} image {

} </style> </head> <body>

Channel 7 News
 <a href="">Home</a>
 <a href="">News</a>
 <a href="">Science</a>
 <a href="">Politics</a>
 <a href="">Entertainment</a>
 <a href="">Sport</a>
 <a href="">Weather</a>

Headlines

<a href="">Header 1</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 3</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 2</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 1</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 2</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 3</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 4</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

<a href="">Header 5.</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.

</body> </html> 

</source>


Set font for header 1

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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></title>
 <style type="text/css">
   h1 {
     font: bold 1em/1.5em Georgia, serif;
     margin: 1em 0 0 0;
   }
 </style>

</head> <body>

Basic font-size of 16px

</body> </html> 

</source>


Set font size for 

   <source lang="html4strict">

<html> 

<head>
 <title>Set font size for <H1></title>
 <style type="text/css">
 h1 {
  font-size: 120%;
 }
 </style>  
</head>
<body>
<h1>Title of Page

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

</body>

</html> 

</source>


Set font size to 1em

   <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"> h2 { 

font-size: 1em;

} </style> </head> <body>

This is the title

This is a text.

</body> </html> 

</source>


Set

in header

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css">

div#header h1{ 

 height: 80px;
 line-height: 80px;
 margin: 0;
 padding-left: 27%;
 color: #333;

} </style> </head> <body>

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</label>
     <select name="fmtitle" id="fmtitle">
     <option value="ms">Ms.</option>
     <option value="mrs">Mrs.</option>
     <option value="miss">Miss</option>
     <option value="mr">Mr.</option>
       </select>

       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html> 

</source>


Set <h1> in header section

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css">

div#header h1{ 

 height: 80px;
 line-height: 80px;
 margin: 0;
 padding-left: 27%;
 color: #333;

} </style> </head> <body>

Contact Form

This is a test.

Please fill out our form below in order to contact me. 

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</label>
     <select name="fmtitle" id="fmtitle">
     <option value="ms">Ms.</option>
     <option value="mrs">Mrs.</option>
     <option value="miss">Miss</option>
     <option value="mr">Mr.</option>
       </select>

       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send »" class="submit" />
     </form>

Note: Due to our busy schedules, we cannot answer every message.

header

This is a text

</body> </html> 

</source>


Use bold font to highlight heading

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Headings example 2</title>
 <style type="text/css">
   body {
     font: 12px/1.5em Georgia, serif;
   }
   h1 { 
     font: bold 1.5em/1em Verdana, sans-serif;
     margin: 1.25em 0 0 0;
   }
   h2 { 
     font: 1.5em/1em Verdana, sans-serif;
     margin: 1.25em 0 0 0;
   }
   p {
     margin: 0;
     width: 33em;
   }
 </style>

</head> <body>

<h1>The most important heading

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

A less important heading

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Use
to mark header

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css">

div#header{ 

 position:relative;
 background-image: url(r.gif);
 background-repeat: no-repeat;
 background-position: 10px 0px;
 
 }

</style> </head> <body>

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</label>
     <select name="fmtitle" id="fmtitle">
     <option value="ms">Ms.</option>
     <option value="mrs">Mrs.</option>
     <option value="miss">Miss</option>
     <option value="mr">Mr.</option>
       </select>

       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html>

</source>