HTML Basics


Font Size
<font style="font-size:8px;"></font> means the font size is 8 pixels tall.
Brackets
All HTML tags are enclosed within < > brackets.
Anything that is written between the < and > brackets will be invisible, and not appear on your page.
Case Sensitive
Just in case you wanted to know, HTML tags are NOT case sensitive.
So, <center> is the same as <CENTER> is the same as <Center>.

EXCEPT: image filenames! ... the filename should be written exactly as it appears. For example, <img src="pink.gif"> is not the same as <img src="pink.GIF">
Opening & Closings
Almost all HTML commands have an opening and a closing tag. For example, the opening tag, <center> causes all text and graphics that appear after the tag to be centered in the page. Everything will remain centered until the closing tag </center> is used.
The / is the command to close that particular function.
Format
All HTML documents should follow the same basic format - otherwise some commands may not function properly.
The basic format for all HTML documents should be:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Head: Head tags surround the title and the introductory text.
Title: This should describe the content of the page. It should be descriptive, but less than 64 characters. Web browsers will display the title at the top of the browser.
Body: The main part of your page goes between the <body> and </body> tags.

< and then at the end the </body>

Closing tags: You must remember your closing tags. In some browsers, the document will still function without some of them. With others, it will not. Even working on this page I needed to go back a few times to find mistakes that I've made, this is why doing HTML by hand is so much fun.
General HTML Tags
Font: Font tags let you choose the size, color or font style and other things. <font>
These tags implement six levels of document headings; <h1>is the most prominent, and <h6>is the least prominent. For example;
<h1> first <h1>

<h2> second <h2>

<h3> third <h3>

<h4> fourth <h4>

<h5> fifth <h5>

<h6> sixth <h6>

Line Breaks: This starts a new line. NO closing tag is needed.

<br>
Different Browsers
Not all HTML tags are supported by all browsers. If a tag is not recognised by a browser, it will simply ignore it. Some browsers are text only and will not support images, some will not support tables or frames.

All web pages have the same web page code
<html><head><title></title></head><body></body></html> View/SourceDifferent Browsers
Have you ever seen a page you liked and wondered "how do they do that?"
To find out, simply click on the VIEW option of your browser toolbar and then select SOURCE or DOCUMENT SOURCE. This will open a window that shows you the actual HTML code that was used to create the page you are looking at. You can then scroll through and find out the exact coding that you need. For example, I have used the VIEW/SOURCE option to find out the hexadecimal code for my background color, for creating tables, and also for inserting my background music.

Spacing
HTML documents take no notice of any line breaks or paragraphs that you type into your text. You have to write a specific command for line breaks and for paragraphs.
Paragraphs
<p> This misses one line and starts a new line. NO closing tag is needed.
Note: In some documents you will see the closing tag </p> used. You do not need to use it.

If you add <p align=right> to the tag, then it will make the text form on the right hand side of the page.

For example, <p align=right> See, this text is over here!!!
Will appear as
See, this text is over here!!!
Indent a Paragraph or Leave a Space
There are several options to form an indent at the beginning of a paragraph, or form a blank space:
&nbsp; This is a non-breaking space tag. If you use five of these in a row, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Then you will get a space       this wide.

The only problem with this tag is that some on-line editors will always convert that into no space at all when you next go to edit any page where it is used. It means you will always have to remember to put them back in EVERY time you edit that page!
If you create your pages off-line and FTP them, then the tag will work just fine for you.
Bold Letters
This tag< strong> causes the letters to be bold. You must always close with the </strong> tag.
Italic Lettering
This tag <em> causes the letters to be italicised. You must always close with the </em> tag.
Horizontal Lines
This tag <b>&lt;hr /&gt;</b>makes a very fine shaded horizontal line such as is used throughout this page. NO closing tag is needed.
You can also control the thickness, length and alignment of the line, by combining the following attributes:

Width is expressed as a % of the width of the page.
For example, <hr width=10%>


For example, <hr width=25%>


For example, <hr width=50%>


For example, <hr width=75%>


For example, <hr width=100%>


Size is (thickness) expressed as a number (of pixels).
For example,<hr width=50% size=10>


<hr width=50% size=30>


<hr width=50% size=60>


Align can be left or right. If not specified, it will default to the center.
For example,<hr width=50% size=10 align=left>


<hr width=50% size=10 align=center>


<hr width=50% size=10 align=right>


Noshade You can make the line dark by specifying noshade.
For example,<hr width=50% size=10 noshade>




Line Color You can color the line any color that you want by specifying the color you want.
For example,<hr width=50% size=10 align=right noshade>

To Center Text or Images
<center>
This will cause whatever follows to be centered in the next line in the page. You must always close with the </center>tag.
For example:
<center>This text is centered <center>will appear as:


This text is centered


This would end the secton about HTML basics


Back to the top