HTML Tag-By-Tag Reference Guide
Of course, listed below are not all the HTML tags, but the ones that you will use most often. I've included URL's and recommended searches that will list all the rest of the tags and URL's you will ever need to master HTML.
Note: Most of these tags may be written in upper or lower case. When creating a standard or trying to develop your own "unique style", set a standard and stick with it. Also, you can use more than one tag in tandem. These are better known as 'nested tags', and the first tag on is always the last tag off.
Example:
Just remember the Cardinal Rule which will be explained later!
An attribute is an extension to a tag, kind of like a special feature within that tag.
FPI (Formal Public Identifier) - This goes right over the tag. This is the only tag that does this:
HTML Tags - Everything with an ".html", ".htm" or ".shtml" document must be enclosed in the following tags:
Header Tags - Anything included inside these tags, especially the Meta tags, is useful for the search engines. WYSIWYG (What you see is what you get) editors like Microsoft Front Page never put this info inside header tags, so It's up to you to do it manually:
Meta Tags - This allows search engines to properly index your file you've uploaded. No closing tags are required on these. These tags go between the tags.
The 16 Background Colors:
Ex:
Note: You should specify one color for a background color, even if it's white, or you might get a grey color by default.
Aqua Navy
Black Olive
Blue Purple
Fuschia Red
Gray Silver
Green Teal
Lime White
Maroon Yellow
Comment Tags - Comment tags are tags that are ignored by browsers. You can use this to write little notes for yourself:
Heading Tags - H1 will display the largest text where H6 will display the smallest text. Also, search engines tend to put a greater emphasis on these heading tags (don't confuse with header tags mentioned above), than they do on normal text enclosed in paragraph tags.:
Center Tags - This will center your text on a page:
This text will be centered on your ".html" page
Paragraph Tags - This tag will display text in a standard paragraph format, without any indentation.
Type a paragraph here for display on the web.
Title Tags - These tags need to be nested within the tags. The title tags will be displayed and viewable on the very top of the users browser. The title shouldn't exceed 50 characters. Search engines really recognize these tags!:
Blockquote Tags - These tags are like paragraph tags, but much better. These tags can be nested, which means that you can make one or more of these tags. Blockquote tags indents 5 characters on the left and right side. This way, your text isn't showing all the way to the right and left of each users monitor. This gives your Website a more clean look.
Type your paragraph here
Unordered List Tags - These tags serve two purposes.
1. To left indent text
Type text here.
2. To Create an unordered (Bulleted) list:
- Name
- Address
- Phone Number
Would look like this:
· Name
· Address
· Phone Number
To Create an ordered (Numbered) list:
- How to Make Money in the Information age
- How to Make a Fortune Selling Real Estate
- How to Get Free Internet access
Would look like this:
1.How to Make Money in the Information age2.
2.How to Make a Fortune Selling Real Estate
3.How to Get Free Internet access
Line Break - You will use this tag constantly. Use it when you want to create more space between text. Remember to use two
tags to make a 'double space' between the text in question.Example:
Brian Garvin
PO Box 903
Oceanside, CA. 92049
Worldwide Distributor and Affiliate Programs
Draw a Horizontal Line - This will draw a line in your HTML document. The HR stands for Horizontal Rule.
width - width of the line in pixels. Most monitors are 640 pixels wide, but I would never make a line wider than 550 pixels.
size - how fat the line will be in pixels.
Bold Text - This tag creates bolded text:
Anything here will be bolded.
Italicize text - Any Text here will be in italics
Anything here will be in italics
Underline Text - Any Text here will be underlined
Anything here will be underlined
Subscript Text - This will create subscripts
H20
Superscript Text - This will create superscripts
Reprints Galore(tm)
Teletype Text - This will Teletype Text
This will create text that looks like those old fashioned typewriters created it.
Insert Tags around preformatted text - If you want to just copy and paste text from a WordPerfect file or other file and don't want to waste time putting Blockquote or Paragraphs or Break tags around each paragraph, then this tag will come in very handy. This tag is good for multiple page documents to save you formatting time:
My big document that I'm too lazy to put tags around will go here.
Make your text blink - Some people say this is annoying, but nevertheless you might have a use for it.
Make your text scroll - This won't work in Netscape, but will work in MSIE.
Font Tags - This allows you to control the color, size and typeface of a font
Regarding font sizes, 1 is the smallest size and 6 is the largest font size.
Popular Type faces are Arial, Times New Roman and Helvetica.
Example:
The Cardinal Rule of HTML - The first tag on should be the last tag off.
====================================================
Create a Physical Link - A physical link is a link to a remote server, or in simple terms, a link from a webpage other than your own.
Example:Text Here
Create a Logical Link - A logical link is a link to another spot on your website, within the same directory. You can put the full URL like above, but you don't have to. If it's on your Webpage and in the same directory, all you really need to include is the file name.
Example:Products
Creating a Mail Link - You can create a Mail Link very easy. This will allow someone to send you an email from your Website. Here's the code and a special trick few people know (except us now :-):
Here's some additional code you can tack on the end that will automatically display Text in the subject field of the users browser:
Creating a Jump Link - A jump link is a link that takes you to another point on the same Webpage.
There are actually two links you'll be creating, a from and a to link. Pay careful attention to formatting. Here they are:
Jump From: Text Here
What happens is that you put the Jump to Link somewhere else on the Webpage. When you click the Text Here in the Jump From link, you will 'Jump' immediately to the other part of the Webpage where you inserted the Jump To code.
Inserting an image - There are currently only two filetypes that are acceptable for the World Wide Web. One is ".gif" (Graphics Interchangeable Format) and the other is ".jpg or ".jpeg" (Joint Photographics Group). An image tag may have many attributes, or it can have none.
Image Tag Attributes:
1.Filename - Every image tag obviously must have this. File names and extensions on image tags are extremely case sensitive! badboy18.jpg, BADBOY.JPG, and badboy.JPG are all different.
2.Alternate Message - Sometimes known as an "alt statement". This will display a text message when a user rolls his mouse over the image. It's good to put an alt statement because some people don't display graphics on their browsers, and this way an alt statement describing your image will give them an idea of what is there. Otherwise, they might be feeling like they're missing something.
3.Width - Measured in Pixels. You can use this attribute to adjust the width of an image to a predetermined size.
4.Height - Measured in Pixels. You can use this attribute to adjust the height of an image to a predetermined size.
5.Alignment - This determines how you want your image aligned on your page, either left, right or center.
6.Border - This will put a square border around your image and is measured in pixels.
7.Hspace - This attribute determines the Horizonal Space in pixels that your image will be separated from surrounding paragraph text.
8.Hspace - This attribute determines the Vertical Space in pixels that your image will be separated from surrounding paragraph text.
Here's an example of an image statement displaying every possible attribute so you can study it:
Common Special Characters - These characters will display the items on the left when inserting the code given on the right. Note that these special characters are case sensitive, and should all be coded in lower case.
<<
>>
TM& reg;
©©
space
degrees °
This is it for now. This is just a beginners tutorial. I will cover table tags, form tags, frame tags sound tags and more in the accompanying lessons. I hope you found this lesson fulfilling. I know it was fulfilling authoring it!
No comments:
Post a Comment