Create Page Headings with HTML

Web page and paragraph headings are added to a web page using the header tag. Header tags come in six default sizes. The sizes are 1 thru 6. The tags look like this:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

In their default forms, size 1 is the largest and size 6 is the smallest. We'll set the size, choice of font and alignment using our style sheet.

For now let's add the header tag to our code and take a look.

We're going to add our header tag to the second, right hand column of our web page.
Here's the header tag code:
<h1>My First Web Page</h1>

The words that you want to appear on the screen are typed between the open and close tag.

Copy the code and paste it between the second set of cell tags of the table.
<html>
<head><link rel="stylesheet" href="stylesheet.css" type="text/css"></head>
<body>
<table>
<tr>
<td id="left"></td>
<td id="right">
<h1>My First Web Page</h1>
 </td>
</tr>
</table>
</body>
</html>

This is what your code should now look like.

Save the changes and look at the page in your browser.

Note:
If you aren't closing your browser, just right click on the page and click Refresh or Reload to see changes.

You should see large light green letters on the left of your screen on a dark green background.

It appears on the left side for now because the left column is empty.

We'll add our strawberry to the left column in the next lesson and things will begin to take shape.

For now let's add some style settings for our header tag to the style sheet.

Open the style sheet in your text editor. Remember, you have to use the 'All Files' filter to see it.
h1{
font-family:helvetica, tahoma, verdana, arial,serif;
font-style:normal;
font-weight:normal;
font-size:16pt;
text-align: center }

Copy the block of code and paste it below the first block of code in the style sheet.
( Create a little space between each entry using the Enter Key. )
Save the changes.

Now open the web page in your browser and take a look.

Note: If you aren't closing your browser, just right click on the page and click Refresh or Reload to see changes.

This time you should see the same letters displayed in a Helvetica font.

We give the browser five choices of fonts to choose from:
font-family:helvetica, tahoma, verdana, arial,serif;
You can change the order if you want to see what the different font faces look like.

We set the font style to normal:
font-style:normal;
If you wanted italic text , you would set it to 'oblique'.

We set the font weight to normal:
font-weight:normal;
You could set it to bold for heavier text.

We set the font size to 16 points:
font-size:16pt;

We set the alignment of the text to center:
text-align: center
We won't be able to see if this is working until we fill in our columns.

Take a short quiz on the information you just learned.

If you're seeing Helvetica text on a dark green screen you're ready to add your strawberry.

Lets' add an image.


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





Color in Web Pages

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

 Adding Images to Web Pages 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