![[advertisement]web essentials free firewall](images/firewall-banner.jpg)
Learn to use html with a simple web page
A web site is nothing more than a group of web pages. The first page of a web site is the "Home" or "index" page. The home or index page is the first page people see when they visit your web site. The file you created earlier, "index.html", will be your home page.
You build your web page about what ever you like, but, for the purpose of this example, I'm going to build a page about building a picnic table. You will replace my text with your html text. When you finish, click save and close notepad. To check on your progress and to view your web page, click on your file "index.html". The one with the big blue e.
Divisions, spans and CSS
The Code below is for a simple web page about "how to build a picnic table" using html and a style sheet or CSS. The code will create this web page. You can copy and paste the code into your page as a starting point. I have also included a link to the css file used for this page. Refer to the CSS file to familiaize yourself with how classes and id's are used with divisions to layout your page.
A quick overview
Css uses divisions to layout a web page. Divisions are controlled by classes and id's. See the code below for examples. A class can be used as often as you like on a page, but an id can only be used once.
<head>
<meta name="description" content="A tutorial on how to build a picnic table" />
<meta name="keywords" content="picnic table, picnic, table, redwood" />
<link href="/css/sample-css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Sample Web Page</div>
<div id="left-side">Left side panel</div>
<div id="center">
<h1>How to build a picnic table</h1>
<p> Building a Picnic table is easy. The secret is to use the right type lumber and to use the proper tools. </p>
<p> The best picnic tables are constructed from < b>Redwood</b> because of its natural resistance to decay. </p>
</div>
<div id="right-side">Right side panel</div>
<div style="text-align:"center;" id="footer">How to build a picnic table</div>
</div>
</body>
</html>
view web page
In this tutorial, we added a header tag, a bold tag and a paragraph tag.
Header tags
The <h> or header tag: The header tag is like the headlines in a newspaper. The text inside a header tag is larger and bolder than the surrounding text so that it attracts your readers attention. Header tags decrease in size as the header decreases in its degree of importance. <h1> is the largest header tag and should be used first on your page. <h6> is the smallest.Bold tags
The < b> or <strong> tag: The bold tag highlights the text making it darker and more prominent. The Bold tag is used in situations where you want to emphasize a word or a group of words that do not rate or is not worthy of a header tag.
Paragraph tags
The <p> tag: The paragraph tag contains a paragraph.
You can add as many paragraphs and header tags that you like on your page. The <h> tags should decrease as you move down your page. For example, the <h1> header tag should apply to the most important element (keywords) and <h6> the least important.
To add color to your web page