Jump to content

Html Tag Basics


TCH-Sales

Recommended Posts

Basic Body Tags

 

HTML Tags:

><html></html>

This is what every basic web page starts and ends with. You'll always see "<html>" at the

 

beginning of your pages' source and "</html>" at the end.

 

HEAD Tags:

><head></head>

This is what holds all the stuff at the top of your page together. All of the stuff that the

 

browser does not display. This could be meta tags, your title tags and more.

 

TITLE Tags:

><title></title>

These tags display the title of your web page. It goes between the head tags mentioned above.

 

BODY Tags:

><body></body>

The body tags are what hold together your actual page. Between these two tags are everything

 

that displays on your web pages.

 

The fallowing tags are a list of combinations you can make with the body tags.

 

Body Background Color:

><body bgcolor="???">

You can replace the ??? above with either a color's name or it's hex number value to change

 

the background color of your web page.

 

Body Text Color:

><body text="???">

You can replace the ??? above with either a color's name or it's hex number value to change

 

the text color on your web page.

 

Body Link Color:

><body link="???">

You can replace the ??? above with either a color's name or it's hex number value to change

 

the link color on your web page.

 

Body Visited Link Color:

><body vlink="???">

You can replace the ??? above with either a color's name or it's hex number value to change

 

the link color on your web page.

 

Body Active Link Color:

><body alink="???">

You can replace the ??? above with either a color's name or it's hex number value to change

 

the active link color on your web page.

 

Text Tags

Headlines:

><h1></h1>

This creates headline text. This is good for putting at the top of each of your major sections

 

on a page to set it apart from the rest. You can go all the way up to "h6" with "h6" being

 

the smallest and "h1" being the biggest.

 

Bold Text:

><b></b>

This creates bold text. Good for setting words apart in a big paragraph.

 

Italic Text:

><i></i>

This creates italic text. This also good for setting words apart in a big paragraph.

 

Emphasize Text:

><em></em>

This puts a little more emphasizes a word or group of words.

 

Strong Text:

><strong></strong>

This also puts a little more emphasizes a word or group of words.

 

Typewriter Text:

><tt></tt>

This creates typewriter text.

 

Preformatted Text:

><pre></pre>

This create the text effect of preformatted text.

 

Citation:

><cite></cite>

This creates a citation. Citations are usually used in long pages or research papers when you

 

want to reference where you got the material from.

 

Font Size:

><font size="???"></font>

This changes the font size. You can change what's in the "???" to a number between 1 and 7

 

where 7 is the largest and 1 is the lowest. You may also work in negative numbers as well,

 

like "-1" or "-2".

 

Font Color:

><font color="???"></font>

This changes the font color. You can use a color name (white) or the hex value (#FFFFFF)

 

where you see the ??? above.

 

Hyperlink Tags

 

Hyperlink Tags:

><a href="http://www.mysite.com">MySite</a>

This is your basic hyperlink tag. The "http://www.mysite.com" can be replaced with any page

 

path while the "MySite" will be the actual text that links to the path you give. I know when

 

I click "MySite" that it will lead me to the mysite.com homepage.

 

E-Mail Link Tag:

><a href="mailto:mitch@totalchoicehosting.com">E-Mail Mitch!</a>

This is your basic e-mail link tag. You can replace "mitch@totalchoicehosting.com" with any

 

e-mail address, then replace the "E-Mail Mitch!" with any text you need to link to the email

 

address. When you click the "E-Mail Mitch!" then your default e-mail program should open up

 

with an email opened up with my address already in the address bar.

 

Name That Link:

><a name="http://www.mysite.com" title="Lets go to the example's website">The 

example!</a>

When you hover over this link, whatever you define as the title is shown. This works much in

 

the same way as an image's "alt" tag, giving you more information about what that link is for.

 

Good for giving your site more accessibility to the confused as well.

 

Link's Target:

><a name="example">Example</a>

This is a little deeper as far as links go. This will create a place holder on a page for you

 

to link to it. You can set this as it is, or with no text at all and the next tag is what

 

will actually lead you to the place you use this to mark. If you leave the "Example" in then

 

it uses the word as the place holder, if you leave the word "Example" out then it just marks

 

that part of the page.

 

Go to Target Link:

><a href="#example">Lets Go to the Example!</a>

If on a page, this would lead us to where ever the link's target might be sitting. This is

 

good to use if you want to create a sub-menu on a really long website.

 

Formatting Tags

 

Line Break Tag:

><br>

Our trusty companion, and probably the first HTML tag that anybody ever learns is the line

 

break tag. This little guy is useful in as the title says it, breaking long paragraphs of

 

lines. Hence the reason why it is named the "Line Break Tag".

 

Blockquote Tags:

><blockquote></blockquote>

This will format whatever text might be between the two tags by indenting both the left and

 

right sides.

 

Paragraph Tags:

><p></p>

This is the way you define a paragraph. Whatever is between the two tags is blocked together

 

as a paragraph, like in a book. You can use multiple paragraph tags to break up long blocks

 

of solid text on a web page.

 

Paragraph Align Tag:

><p align="???">

This is something extra you can do with the paragraph tags. You can set it to be aligned to

 

the left, center, or right of your web page.

 

Div Align Tags:

><div align="center">This text would be centered!</div>

This is a way to align your text either to the "left", "right", or "center". by replacing what

 

is inside the quotations marks you see in the example above. Div tags are also very handy

 

when working in style sheets.

 

Center Tags:

><center></center>

This one pretty much explains itself. Whatever might be between these two tags will be

 

centered. That's it.

 

Ordered List Tags:

><ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>

Wraps around your actual list, and gives each a number.

 

Un-Ordered List Tags:

><ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>

Wraps around your actual list, and gives each a bullet.

 

List Tags:

><li>Something</li>

Whatever replaces the "Something" in the middle defines one item on the list, ordered or

 

un-ordered.

 

Image Tags

 

Basic Image Tag:

><img src=“???”>

This is your basic, stripped down image tag. Where you see the ??? is where you would put the

 

direct location of the image as it sits on your web hosting plan.

 

Image Align Tag:

><img src=“???” align=“left”>

You may replace the left with either left, right or center to change the alignment of the

 

image you define in the basic image tag.

 

Image Border Tag:

><img src=“???” border=“0”>

The image’s boarder can also be controlled by defining it where you see the 0 above. Giving

 

your image a 0 border width is helpful for when you want to turn it into a link, but don’t

 

want the link color making a border around your image.

 

Image Alt Tag:

><img src=“???” alt=“The description of your image!”>

 

The “alt” tag gives your image more information when somebody hovers over it. It will display

 

whatever you might want to put inside the alt tag. Good for accessibility; people can read

 

what the image is about before it downloads.

 

Image Height/Width Tags:

><img src=“???” height=“???” width=“???”>

 

These tags are useful so that the browser may go ahead and draw out the size the image is

 

going to take on the web page before the image downloads.

 

Horizontal Rule Tags

 

Horizontal Rule Tag:

><hr>

This will insert a horizontal line across your page. Good for separating large blocks of text

 

or content.

 

Horizontal Rule Width Tag:

><hr width=“???”>

You can use this to set the width of the horizontal rule, by using either percents (60%) or

 

actual numbers (345).

 

Horizontal Rule NOSHADE Tag:

><hr noshade>

Makes sure that the horizontal rule has no shadow casting onto your page.

 

Horizontal Rule Color Tag:

><hr color=“???”>

The ??? may be replaced by and color value, either by hex number or by the actual name of the

 

said color.

 

Table Tags

 

Table Tags:

><table></table>

Every table you will ever see will start with the “<table>“ tag and end with the “</table>“

 

tag. This is what tells your browser, “Woah! This is where your table starts and ends!”

 

Table Header Tags:

><th></th>

These are the tags the define your table’s header information.

 

Table Row Tags:

><tr></tr>

These are the tags the define your table’s rows.

 

Table Cell Tags:

><td></td>

These are the tags the define your table’s cells inside a row.

 

Now that you know how to build your basic table, lets get into customizing it!

 

Table Border Tags:

><table border=“0”>

The 0 that you see defined above tells the browser that you have no border at all. This can

 

be bumped up to any number you need.

 

Table Width Tags:

><table width=“100%”>

The 100% that you see defined above tells the browser that your table will go all the way

 

across the width of your web page. You can set this number to any percent or number that you

 

need it to be.

 

Table Cell Spacing Tags:

><table cellspacing=“0”>

The 0 that you see defined above tells the browser that you have no space between your table

 

cells. This can be bumped up to any number you need.

 

Table Cell Padding Tags:

><table cellpadding=“0”>

The 0 that you see defined above tells the browser that you have no space between your table

 

cells and the border surounding the outside of the table. This can be bumped up to any number

 

you need.

 

Table Align Tags:

>align=“???”

The align code can be slapped into either a table’s row or cell to define if it is justified

 

to your left, right or center of the table.

 

Table Vertical Align Tags:

>valign=“???”

The valign code can be slapped into either a table’s row or cell to define if it is justified

 

to your top, middle or bottom of the table.

 

Table No Wrap Tags:

><td nowrap>

This code prevents your cell’s data from being wrapped, or broken to fit inside the predefined

 

space.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...