Create a Basic HTML Template

While you have the Windows Explorer or Finder screen open, you can save your current HTML skeleton as a template. That way, you don't have to type it all out every time you want a new web page.

In your text editor, delete any text between your two TITLE tags. Now click File > Save As. From the Save As dialogue box change the name of your web page to template.txt:

The Save As dialogue box showing the Text Document option

Click Save to save the code as a text file. You will be returned to your text editor. Click File > Save As again. Now change the name of the file to newpage.html. In the Save As Type box in Windows, change it to All Files:

The Save As dialogue box showing how to save as a HTML page

Save the file and switch to Windows Explorer or Finder. You should now see three pages:

One of these, the template is a text file rather than a HTML file. From now on, you can open the template text file, and repeat the process above: Click File > Save As, change the Save As Typebox to All Files, then type a new name for your web page, not forgetting the html ending.

There is a problem, however. If you were to double click your newpage.html file it would open up in your browser. But you will want to open it up in Notepad so that you can edit the file and make changes.

To solve the problem, you can add an item to the Send to menu in Windows (Macs will have anOpen With right-click menu. Your text editor should be on there). This appears when your right-click the file:

The Send To option on a Windows right-click menu

In the image above, we have Notepad on the Send to menu. Selecting this item means that we can quickly open up the code in Notepad.

To add an item to the Send to menu, switch back to your Explorer window. In the address bar at the top, enter the following:

%APPDATA%\Microsoft\Windows\SendTo

Press the Enter key on your keyboard and you will be taken to the Send to folder:

You can now drag and drop items from your Start menu to this folder. (Make sure Windows Explorer doesn't fill the whole of your screen by clicking the Restore Down icon just to the left of the Red X.)

Click your Windows Start button. From the All Programs > Accessories menu, locate Notepad again. Hold down your left mouse button on Notepad. Keep it held down and drag across to your Windows Explorer and your Send To folder:/

An icon being dragged to the Send To folder in Windows 7

Let go of your left mouse button and Notepad will be on your Send To menu when you right-click a file in Windows Explorer.

Now you can quickly open up your HTML code in Notepad and makes changes to it.

To recap this section, here are the important points again:

The HTML skeleton is the foundation on which most internet pages are based
HTML is written in Tags
Tags usually come in pairs
A Tag is a word surrounded by angle brackets, e.g.: <HTML> </HTML>, <HEAD> </HEAD>, <TITLE> </TITLE>
A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash
Add <!DOCTYPE HTML> to the top of all your HTML pages.

Basic HTML - Heading Tags

You can have a nice big heading on your web page quite easily. This is done with the H tags. The biggest size heading you can have is H1. If you want smaller sized headings then you change the number after the H. You can have up to 6 different sizes. All headings need to go between the two BODY tags.
Try it out for yourself. Open up the code for your firstwebpage.html file, if it's not already open. (If it's not, you can now right-click and Send To > Notepad. If you didn't get this working then simply click File > Open from the menu at the top of your text editor.)
Add the following just below your first BODY tag:

<H1>A Size 1 Heading</H1>

Incidentally, tags are not case sensitive. So you can have this:

<h1>A Size 1 Heading</h1>

Or even this:

<h1>A Size 1 Heading</H1>

But using all capital letters makes your code more readable.
Once you've added the H1 tags, though, your HTML should look like this:

To see what it looks like, open Windows Explorer or Finder on the Mac, if it's not already open. Navigate to where you saved your web page to, and then double click to open it up. (If you already have the page open, simply press F5 to refresh the page.) You should see this in your browser:

Internet Explorer showing H1 heading tags

Switch back to your code and change the 1's into 3's. So your HTML heading should now be this:

<H3>A Size 3 Heading</H3>

Save the changes. Go back to your browser and press F5 to refresh the page. You should see this:

Internet Explorer showing H3 heading tags

Notice how much smaller the H3 heading is compared to the H1 heading. (If your headings don't look right, make sure you haven't missed any angle brackets out, or any forward-slash closing tags.)

Exercise
Try the other H numbers to see how they compare. You can only go as far as H6.

Paragraph and BR breaks

If you've ever used a word processor like Microsoft Word then you know that to start a new paragraph all you need to do is to hit the Enter key on your keyboard. The cursor will then move down, ready for you to start typing. In HTML, however, you can't do this. If you want to start a new paragraph, you have to use the P tags.
To try it out, add the following just below your Heading (You can use your own text, though, rather than type out the Hamlet soliloquy):

<P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.</P>

When you've finished, your HTML code should look like this: (Don't worry about the indenting, though. We did ours just so it would look nice in this book. Only one press of the spacebar is recognised in HTML, everything else is ignored, including indents and carriage returns.)

Note the P tags:

<P></P>

You have to use the P tags whenever you want to start a new paragraph.
Strictly speaking, though, you don't need the closing P tag. You can just do this to start a new paragraph:

<P>
To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them?
<P>
To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.

The result is the same. But in modern web coding, it's best to use the closing tag for paragraphs, so that you can add Styling rules. (You'll learn how to do this a little later.)
Save your work and view the results in your browser. You should see this:

Notice the paragraphs breaks in the text. Notice, too, that although our code was indented, this doesn't show up in the browser. The browser will ignore all those indents we had, and any extra white space. If you want white space you have 'tell' the browser. You do this with the break tags, like P and BR (which you'll see soon).
As an exercise, try deleting the P tags in your code. Save and refresh your browser. Watch what happens:

Web page showing the result of deleting the Paragraphs tags

Without the P tags the text just runs on.
There is still, however, a paragraph break after the heading, even though we deleted all the P tags. This is because the H heading tags insert their own paragraph breaks.

The BR tag

The BR tag is used when you don't want a full paragraph break. The space between lines of text is then reduced. The BR tag doesn't need a closing tag, and can be just by itself.
As an example, add the following to the end of your text (the BR part).

<P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.

<BR>
... Rest of Hamlet's Soliloquy goes here
</BODY>
</HTML>

Notice that we've deleted the end P tag for the second paragraph. If you leave it in, you'll get a double line break from the two <P> tags, as well as a single line break from the <BR> tag.

Save your changes and switch to your browser. Press F5 to refresh the page and the results should look like this:

Web page showing the result of add BR Break tags

So if you don't want a full, double-line break then remember to use the BR tag. And careful of the end P tags or you'll end up more line breaks than you expected.

Bold and Italics

Two more tags that come in useful are the Bold and Italic tags. They are quite easy to use. Here are the Bold tags:

And here are the Italic tags:

The text you want to change goes between the two tags:

<B> ... Rest of Hamlet's Soliloquy goes here</B>

<i> ... Rest of Hamlet's Soliloquy goes here</i>

If you want Bold and Italic text then you can nest the two:

<B><i> ... Rest of Hamlet's Soliloquy goes here</i></B>

The two I tags go between the two B tags. You can have it the other way around, though, with the I tags first:

<i><B> ... Rest of Hamlet's Soliloquy goes here</B></i>

Be careful of this, however:

<i><B> ... Rest of Hamlet's Soliloquy goes here</i></B>

This is a mismatched pair of tags. The two tags on the inside are B and I, and the ones on the outside are I and B. A modern browser will probably correct the mismatch, but older ones may not.
Try it in your HTML code:

Save and view the results in your browser:

Internet Explorer showing the HTML B and I tags in action.

There is also an underline tag you can use:

<U> ... Rest of Hamlet's Soliloquy goes here</U>

You can nest all three tags: bold, italics, and underline:

<U><B><i> ... Rest of Hamlet's Soliloquy goes here</i></B></U>

All this nested HTML code can be a bit messy, however. The modern solution is to use something called a Cascading Stylesheet. Using a Stylesheet allows you to do all your text formatting in the HEAD section, or better yet in an external file. (You'll see how to do all this shortly.)

HTML Lists

You can insert a bulleted list onto your page with HTML. There are two types of lists to choose from: Ordered List and Unordered. An Ordered list is one that uses number, letters, roman numerals, or a combination. Like this:

An Unordered List is one that uses bullets. Like this:

To get a list with numbers or letters, this tag is used:

<OL>

</OL>

The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to include another tag, the LI tag. LI stands for List Item. You need one pair of LI tags for every item in your list. So for three items, the code is this:

An HTML Ordered Lists with List Item tags

(Strictly speaking, you don't need the end LI tags.)
To get the bulleted list, the UL tag is used. UL stands for Unordered List. It's used in exactly the same way. Just substitute the OL tags for UL tags.
For both the Ordered and Unordered list, you can specify which type you want to use for the bullets or numbers. The types are these:

You use the Types like this:

You can specify a start, as well. But the start has to be a number:

So that List will be uppercase letters, starting at the 7th letter, or 'G'.
There are three types of bullets you can use for unordered lists: Disc, Circle, and Square. You use them like this:

The default is Disc. So if you want round black circles for your bullets, you can miss the TYPE attribute off:

Notepad showing the HTML for an Unordered List

And here are the results in a browser:

Try out the various lists in your HTML code, and add the different types to the code. That way you will get a feel for how they are used, and what they look like.

Some Basic HTML Tags

Tag	Explanation	Attribute	Options
<H1>, <H2>, <H3> ... <H6>	Heading Tags
<P>	Start a new paragraph
<BR>	Single line break
<B>	Bold text
<I>	Italics
<OL>	Ordered List	TYPE	A (Capitals) a (Lowercase) I (Capital Roman Numerals) i (Lowercase Roman Numerals) 1 (Numbers)
<UL>	Unordered List	TYPE	Circle, Disc, Square
<LI>	An item for your list

Developers Study Center

Search This Blog

HTML Section 2: Basic HTML Tags