Basic HTML - Getting Started
Brackets
Case Senstive?
Opening & Closing Tags
Format
Different Browsers
View/Source
Spacing
Line Breaks
Paragraphs
Indenting
Bold
Italics
Horizontal Lines
Center
All HTML tags are enclosed within < > brackets.
Anything this is written between the < and > brackets will be invisible, and not appear on your page.
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">
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.
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. Bookmarks pick up on your page title. An example of a poor title would be "Recipes". A better title would be "Low cholesterol recipes".
Body: The main part of your page goes between the <body> and </body> tags.
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.
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.
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.
Note: Please do NOT copy whole chunks of someone else's HTML codes. I think that using this option for finding out HOW to do something is fine, but to use it to COPY someone else's work and turn it in for a grade is wrong!
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.
<br>
This starts a new line. NO closing tag is needed.
<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:
1. Use an "empty" image, and insert it where you want the indent to be. I have placed a "space.gif" in this table ... please feel free to copy it! ... simply click your right mouse button in the middle of the box and select "save picture as".
It will leave a space thiswide in your text.
If you want the space wider, just use the img width and height attributes.
For example, <img width=50 height=5 src="space.gif">
increases the width of the "space.gif" to this wide!
2.
This is a non-breaking space tag. If you use five of these in a row, 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.
<b>
This tag causes the letters to be bold. You must always close with the </b> tag.
<i>
This tag causes the letters to be italicised. You must always close with the </i> tag.
<hr>
This tag 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=50%>
Size is (thickness) expressed as a number (of pixels).
For example, <hr width=50% size=10>
Align can be left or right. If not specified, it will default to the center.
For example, <hr width=50% size=10 align=right>
Noshade You can make the line dark by specifying noshade.
For example,<hr width=50% size=10 align=right noshade>
<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