Add a Website Heading with HTML

Most people like a main heading or logo on their web pages. Our demo site has one , so let's add the code to create it.

We're going to use a single row, single cell table to add the website heading. It will be added between the opening body tag and the existing table.
Here's the code:
<table>
<tr>
<td id="heading"><img src="images/heading-pic.gif"></td>
</tr>
</table>

Notice in the code for the cell tag we've added the attribute : id="heading".

The id tag is used to give a name to a page element. In this case we're giving the cell that contains our site heading image the name heading. We'll need this later when we start adding borders to the images on the page.

The code for the entire page is shown below. the new table for the site heading is in red:
<html>
<head><link rel="stylesheet" href="stylesheet.css" type="text/css"></head>
<body>
<table>
<tr>
<td id="heading"><img src="images/heading-pic.gif"></td>
</tr>
</table>
 <table>
<tr>
<td id="left"><img src="images/strawberry.jpg"></td>
<td id="right">
<h1>My First Web Page</h1>
<p>This is my first website and this is my first web page. When I complete this tutorial I should have enough information to start work on the website that I really want to build.</p>
<p>I am going to learn about structuring web pages with tables, how to use CSS style sheets, using color properly and many other aspects of building a great website.</p>
<p>I'm also going to learn the basics of getting my website good positions on the search engines.</p>
</td>
</tr>
</table>
</body>
</html>

*Doctype omitted for clarity

Add the new table code for your site heading, save the changes and look at the page in your browser.

Starting to look like a real web page? We still need to add our footer information and links.


Footer

Footer information is not only helpful to your visitors , but search engines like it. use the address tag when placing footer information on a web page.

Copy this block of code and paste it below the second table's closing tag.
<address>
My First Website<br>
My Location<br>
My Contact Info<br>
Copyright &copy; 2008<br>
</address>

Save the changes to the web page.

code looks like this:
</td>
</tr>
</table>
<address>
My First Website<br>
My Location<br>
My Contact Info<br>
Copyright &copy; 2008<br>
</address>
</body>
</html>

Copy this block of code and paste in the style sheet:
address {
font-family:helvetica, tahoma, verdana, arial,serif;
font-style:normal;
font-weight:normal;
font-size:8pt;
text-align: center }

Save the changes to your style sheet. Open the web page in your browser and take a look.

In the next lesson we'll add our links, borders and head section tags. We're almost ready to create the 3 pages of our website using this template.



Take a short quiz on the information you just learned.

Let's add our Links.


Free Business Web Hosting

If you are building a website for a business or organization, you can put it online for free at Microsoft® Office Live Small Business. You can create your website with HTML and upload it or use their tools and build it online. Take your business online with Microsoft® Office Live Small Business. Get started for FREE! Take the TOUR!

Create Web Sites without Learning Code

Create web sites online without learning any code using Yahoo's simple but powerful Site Solution builder.
Try the Site Solution Demo

Sitebuilder 2.6 is even better than previous versions of Yahoo's downloadable builder. Download it to your PC and create a web site with all the bells and whistles.

Start today and SAVE 25% on your first 3 months.

Get everything you need for a great web site with Yahoo! Web Hosting - 25% off





Add a Paragraph to a Web Page with HTML

Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: September 17, 2008

 Add hyperlinks to a web page with HTML

Home

HTML Tutor
Beginner
HTML Basics
Add a Heading
Add a Paragraph

Intermediate
Phase I
Getting Started
Basic HTML Page
Creating Columns
CSS
Color
Headings
Images
Paragraphs
Site Heading
Linking

Advanced
Phase II
Start Phase II
Editing Pages
Change Appearance
Summary

Helps
Tag Glossary
Finished Code
Image Download
Color Tool
Hex Code Chart
Free Web Templates
Free Heading Graphic
Free Backgrounds
Put It on the Web
Quizzes
Your Questions

HTML Editors
Overview
NoteTab Light
Webbuilder

Online Builder Tutorials
Soholaunch
SiteReptile
SiteSTUDIO

Other Helps
Flash Web Sites