CodeXpert - It's All About The Code

Basics

Tags

URL

Forms

Frames 1

Frames 2

Frames 3

Tables 1

Tables 2

FTP

HTML Tags

Before we show you all the TAGS you can use between the <body> & </body> TAGS, it's important to show you some of the other things you can do with the <body> TAG itself.

You can add any or all of these ATTRIBUTES to the <body> TAG:

bgcolor="" This specifies the colour of the background of your webpage. Insert a colour between the quote marks (""), either by name (red) or by hex code (#FF0000). Note the American spelling of colour (color).

background="" This specifies an image to use as the background for your webpage. Insert the URL of the image to use between the quote marks ("").

link="" This specifies the colour of all links in your webpage.

alink="" This specifies the colour of all links when you click on them.

vlink="" This specifies the colour of all links after you have visited or followed them.

text="" This specifies the colour of all the text in your webpage. You can override this with the <font> TAG, or miss it out altogther & just use the <font> TAG to specify the colour of text.

So... the <body> TAG could look like this:
<body bgcolor="#FF0000" background="images/back.jpg" link="#FFFFFF" alink="#FFFFFF" vlink"#FFFFFF" text="#FFFFFF">
You can use as many, or as few, of these ATTRIBUTES as you wish. Add some or all of these to the index.html page you created in the HTML Basics chapter, re-save, and see how it looks in your browser.

IMPORTANT:
All of these attributes affect the styling of your webpage, and are depreciated... meaning they're old hat and not really used any more, and their use is therefore discouraged. Modern web design uses CSS to style the page instead. However all current browsers still understand these attributes, so you can technically still use them!

OK, now you've got the <body> TAG itself sorted out, here is a list of the most common TAGS you can use inside the <body> section of your webpage:

<div></div> <span></span> These are the DIV & SPAN TAGS. They are essentially empty, do nothing, TAGS. You can use them for whatever purpose you like. If you want a box with a blue border that is 100px high x 500px wide... a DIV is perfect for that... especially when styled with CSS.
Example: <div style="width:500px;height:100px;border:solid #000080 1px;">Here's the box!</div> Would produce:

Here's the box!

There is one small, but really important difference between these tags... divs are block-level elements, and spans are inline elements. This means that divs take up a line all to themselves, while spans sit next to other inline elements (like images) or text!

<ul>

<li></li>

</ul>

These are the UNORDERED LIST & LIST ITEM TAGS. They allow you to quickly create... you guessed it... an unordered list of items.
Example:


<ul>

<li>Item A</li>

<li>Item B</li>

</ul>

Would produce:

Item A
Item B

<ol>

<li></li>

</ol>

These are the ORDERED LIST & LIST ITEM TAGS. They allow you to quickly create... you guessed it... an ordered list of items. Ordered as in numbered!
Example:


<ol>

<li>Item 1</li>

<li>Item 2</li>

</ol>

Would produce:

Item 1
Item 2

<b></b> These are the BOLD TAGS. Wrap them around any text you want to appear bold.
Example: <b>This text is bold</b>
<u></u> These are the UNDERLINE TAGS. Wrap them around any text you want to appear underlined.
Example: <u>This text is underlined</u>
<i></i> These are the ITALIC TAGS. Wrap them around any text you want to appear italic.
Example: <i>This text is italic</i>
<p></p> These are the PARAGRAPH TAGS. Wrap them around each paragraph. The paragraph TAG automatically inserts a blank line before and after itself. You can align paragraphs to a certain horizontal position within your page by using align="", and inserting left, right, center or justify between the quote marks ("").
Example: <p align="right">This is a paragraph of text</p>
<hr> This is the HORIZONTAL RULE TAG. Use it to insert a graphical line in your webpage, to seperate content.
Note: it has no closing tag (</hr>). You can also specify it's colour, height, width and alignment.
Example: <hr align="center" color="#FF0000" height="2" width="700">
<br> This is the BREAK RETURN TAG. Use it to start a new line. Simply pressing the RETURN key on your keyboard will be ignored. Browsers ignore whitespace (returns, or spaces).
Note: it has no closing tag (</br>) Example: Hello<br>My name is...<br>I live at...
<h1></h1> ... <h6></h6> These are the HEADING TAGS. Use them for HEADINGS, and not for full PARAGRAPHS. You can use <h1>, <h2>, <h3>, <h4>, <h5> or <h6>.
The higher the number, the smaller the text. Whichever number you choose to use, make sure you close the TAG with the same number. You can also specify it's alignment.
Example: <h3 align="left">This is a size 3 heading</h3>
<img> This is the IMAGE TAG. Use it to insert images into your webpage. Like the <hr> & <br> TAGS, the IMAGE TAG does not require a closing TAG (</img>), but it does have a required ATTRIBUTE (src=""), otherwise it won't work.
src="" tells the browser where to find the image (src stands for source). Insert the URLof the image to use between the quote marks (""). You can also specify the images' height, width, and alignment in relation to surrounding text.
Example: <img src="images/me.jpg" align="right" height="100" width="50">
<font></font> These are the FONT TAGS. Use them to alter the appearance of text. Wrap them around any text you want to change. To the start tag, you can add face="", size="" & color="".
Example: <font face="Arial" size="2" color="#FF0000">This text is in Arial font, size 2 & red</font>
<a></a> These are the ANCHOR TAGS. Use them to create hyperlinks (links). You can link to other pages or websites, to a place in the current page, or to an email address.
To link to another page or website, you would wrap <a href=""> & it's closing TAG (</a>) around the text or image you wish to use as a link for people to click on. Insert the URLof the page you want to go to in the quote marks ("").
Example: <a href="http://www.mywebsite.com">LINK TO CLICK</a> If you want the link to open in a new browser window, add target="_blank" to the START TAG.
Example: <a href="http://www.mywebsite.com" target="_blank">LINK TO CLICK</a> To make an email link, insert mailto:me@emailaddress.com between the quote marks (""). mailto: tells the browser that this link is to be used to send email, and you follow it with the email address you want people to send email to.
Example: <a href="mailto:me@emailaddress.com">EMAIL ME</a> To link to a place in the current page, first go to the place you want to be able to jump to, and wrap the ANCHOR TAG around a piece of text or image, and give it a name instead of a URL.
Example: <a name="third">My 3rd Paragraph</a> To create your link to that place called "third", create a normal ANCHOR around a piece of text or an image, and use it's name as a URL, but prefixed with #. Example: <a href="#third">Go to my 3rd paragraph</a>.

You can also use the <table> & <form> TAGS within the <body> TAG, but we'll cover those in other chapters as they're rather more complicated.

Tables

Forms