Create a Site with HTML


Create Page Headings with HTML TRY This SiteBuilder FREE! - No Credit Card

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

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

SquareSpaceSquareSpace

Start Your Website Now!SquareSpace


Copy the code and paste it between the tags of the right division.
<html>
<head><link rel="stylesheet" href="stylesheet.css" type="text/css"></head>
<body>
<div id="main">
<div id="left"></div>
<div id="right">
<h1>My First Web Page</h1>
 </div>
</div>
</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 near the center of your screen on a dark green background.

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


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.