HTML Coding Tips: Basic Skills you need to Know

To properly code HTML you need to know how your HTML TAGS are written.

An HTML tag is actually made up of TWO separate tags with some stuff in between:

 An opening tag
 An tag attribute(s) to help define the opening tag
 A value for the attribute(s)
 Text or image you want the tag to affect
 A closing tag

The Opening Tag

The opening tag consists of an angular bracket < followed by a tagname and then completed
with a closing angular bracket >.

Let‟s pretend the tagname of the tag we want to use is example. We would code the example
opening tag like this:

<example>

The Tag Attribute (s)

A tag attribute lets you help define the tag it resides in more precisely and allows you to specify
more functions within the same tag:

<example attribute = >

The Value

Values can be a number or a word depending on which attribute you are using:

<example attribute = “value”

An opening tag consists of a tagname, attribute (s) and a value for each attribute (s). Now our
opening tag is complete, so we can close it off with „other bracket‟:

<example attribute = “value”>

The Text or Image to affect

Now that we have the opening tag complete, we need to give the opening tag something to
actually work on. We do that by defining some text or perhaps a graphic WITHIN the tag:

<example attribute = “value”> Text we want to affect here

1
The Closing Tag

All that remains now is to finish it off by adding the closing tag. This tells the browser to stop
creating the effect we defined in the opening tag. A closing tag consists of a bracket, a forward
slash (not a backward slash), the tagname and then the „other bracket‟, like this:

</example>

So, here is our complete example tag:

<example attribute = “value”> Text we want to affect here </example>

Combining Tags with several Attributes

Learning to properly COMBINE attributes is extremely important! Let‟s use the <font> tag to
illustrate the way you combine attributes into a single tag.

What happens when you want black text, slightly larger than normal, displayed in Arial, on your
page?

This is how most beginners will code this scenario:

<font size = “4”><font face = “Arial”><font color = “#000000”>testing the tags and
attributes</font></font></font>

….WRONG!!!...thanks for playing

As you can see each attribute was given its own opening and closing tag. All this will do is give
you a zillion closing tags and confuse your poor browser. What you SHOULD do is CONBINE
all of the attributes into ONE <font> tag like this:

<font size = “4” color = “#000000” face = “Arial”>testing the tags and attributes</font>

All you really need to do is take all the attributes and values and nest them inside ONE opening
tag. The order of the attributes is up to you. As long as you have them all set with the correct
values, in quotes, it will work just fine.

Nesting Tags Properly

Nesting tags is simply the process of applying more than one tag to the same block of text or
object.

Let‟s take a simple font tag for example:

<font size =”2”>Nesting the tags</font>

2
Here is how it looks on your page:

Nesting the tags

Now let‟s say we want to have that text appear bolded. We have to add the bold tag set around
the text we want to affect:

<font size = “2”><b>Nesting the tags</b></font>

Here is how the newly bolded text will appear on your page

Nesting the tags

Now let‟s add a third tag to our text. Let‟s display our text in Italics by adding the Italics tag set
to our text:

<font size = “2”><b><i>Nesting the tags</i></b></font>

Nesting the tags

Learning how to properly nest multiple tags around one block of text or an object is crucial to
successfully coding your web pages.

If you look at our example above, the opening tags have been put in a certain order and the
closing tags ALL appear in the EXACT OPPOSITE ORDER. For example:

<tag1><tag2><tag3>Text or object here</tag3></tag2></tag1>

Now you have the basic required skills for coding HTML, let‟s show you how to start building
your first web page:

Creating a Basic HTML Web Page

There are 4 HTML tags you need to learn to create a basic page:

<html> and </html>

<head> and </head>

<title> and </title>

<body> and </body>

These are the 4 tags that MUST appear on a page in order for it is viewed correctly.

The <html> Tag

3
This set of opening and closing tags tell your browser that the document it is loading is an
HTML document. The opening <html> tag MUST appear at the very top of your document since
the rest of your document has to reside inside this tag.

The closing </html> tag MUST appear at the very bottom of your document. This tag tells the
browser that there is no more HTML document to display.

The <head> Tag

The head portion of your page will display absolutely nothing in your browser. It‟s functions is
to contain hidden internal information your browser requires to display your page properly.
Between the opening <head> tag and the closing </head> tag you will often find the Meta tag
elements and possibly Javascript tags.

The <title>Tag

The title tag set is entered INSIDE your head tag set, like this:

<head>

<title> Type the title for your page right here</title>

</head>

All this tag does is display whatever text you enter as the title in your browser‟s title bar. This
title does not appear anywhere on your page.

NOTE: Most search engine use your title when it displays search results to a viewer. Keep your
title short (no more than 10 words) and try to describe the main theme of your site.

The <body> Tag

All of the text and images you put on your page must appear BETWEEN the opening and
closing <body> tags. There are several basic attributes that you can use in the opening <body>
tag.

background

Use this attribute to specify a background graphic (GIF or JPEG) like this:

background="filename", example: background = “picture.gif”

bgcolor

Use this attribute instead of backgroung image to define a color for your web page background:

4
bgcolor="color value", example: bgcolor = “#FFFFFF” or “White”

text

Use this attribute to define what color ALL of the text on your page will appear in:

text="color value", example: text = “#000000” or “Black”

link

This attribute let you define the color that ALL of your links are displayed as:

link="color value", example: link = “#008080”

vlink

The vlink (visited link) defines the color that ALL the visited links appear in.

vlink="color value" , example: vlink = “#FFFF00”

alink

The alink (active link) sets the color the link will turn as you click on them:

alink = “#FF0000”

Creating and Formatting Text

Being able to create and format text the ways you want it appear on a web page is the very
essence of HTML. There are several tags that will allow you to display your text:

The <font> Tag

The <font> tag is designed to let you create and make modifications to the text on your page but
you have to decide which of the <font> tag attributes you need.

There are some of the attributes for this tag:

Size = “1-7”

This attribute will let you enter text sizes from 1 to 7. The default is size 3. 1 is the smallest text
size and 7 is the largest.

Face = “font name here”

This attribute will let you define the font you want the text to appear in. If you specify you want
your text to show up in Arial, for example, and the person viewing the page doesn‟t have the

5
Arial font installed on their system then the text will show up in whatever font they have defined
as the default font in their browser.

Let say I want to have text show up in Arial, but I know some people don‟t have Arial, so I want
to define a secondary font that they might have. Just type in another font name and separate the
two with a comma, like this:

<font face = “Arial, Verdana”>testing the face attribute</font>

Color = “Color code or name here”

This attribute lets you define the color you want your text to appear in. You can use a 6 character
color identifier (Hexadecimal Color Code) or the name of the color.

Text Formatting Tags

Once you have decided on the size, color and font you wish to use, you can further modify your
text by applying one or more of these formatting tags:

Text Formatting Tags:

<b> this text is bolded</b>

<i>this text is italicized</i>

<u>this text is undetlined</u>

<tt>this is typewriter text</tt>

_{this is subscript}

^{this is superscript}

Special Characters

Some characters will not be shown unless you tell the browser to show them, and some
characters are not on the keyboard, so you have to use a “special character” to tell the browser
what to display. The character will start with an ampersand (&) and finish with a semicolon (;).
These are also case sensitive, so do not use capital letters.

Example:

&copy; ©

6
&reg; ®

&amp; &

&beta; β

The most common special character is a blank space

If you simply hit the space bar between two words, only one space will show up. If you want
several blank spaces between words, you have to use the „non-breaking space‟ special character:

&nbsp;

So if I wanted to space out these two words, I would type this:

Hello &nbsp;&nbsp;&nbsp;Goodbye

And the result would be: hello Goodbye

Images: adding them to your page

You can add graphic images in two formats to your web pages:

 GIF images (.gif extension)

 JPEG images (.jpg extension)

If you need some good clip art images, check out 321ClipArt.com

The <img> (image) tag is a „one sided‟ tag and requires several attributes for successfully
embedding an image on your page:

Src =

If you have a graphic image with the filename my_picture.gif then you would enter the filename
as the value for the src = attribute, like this:

<img src = “my_picture.gif”>

Width = and height =

You can set the height and width attributes like this:

<img src = “my_picture.gif” width=”100” height=”200”>

7
The number I used refer to the image size in PIXELS. The above image would therefore appear
on the page as 100 pixels wide and 200 pixels high.

Alt =

It is ALWAYS a good habit to include the alt = attribute. Some people turn OFF their browsers
ability to display pictures for faster performance, and if you do not have a text description to
replace the graphic, they won‟t be able to do or see much on your site. This is especially
important if you have a menu built with graphic menu.

<img src = “sample.gif” width=”140” height=”64” alt=testing the alt text trick” >

Border =

You can specify that your image be displayed with or without a border by adding a simple border
= attribute, like this:

<img src = “sample.gif” width=”140” height=”64” alt=testing the alt text trick” border=”0”>

Border =”0” tells the browser not to use a border.

Image Dimensions: how to find out what they are

You can usually check the dimensions of your images in a graphics editing program like Paint or
Adobe Photoshop.

Changing Image Size

HTML allows you to specify any dimensions you like IN THE TAG. The image itself may be
200 pixels wide and 150 pixels height, but you can tell the browser to display bigger or smaller
just by adjusting the size in the tag attribute code like this:

<img src = “sample.gif” width = “250” height = “200”>

I have simply told the browser to display the image in the dimensions I have chosen. If the file
size was 15k to start with, it will remain as a 15k file size. The only thing that changes is the
displayed dimensions.

Note: It is important to note that changing the dimensions can drastically degrade the image
quality badly. If you need to make major changes to the size of a graphics, change the
dimensions in your image editor and re-save the graphic with new dimensions.

Align

8
By adding the align = attribute to your image tag, you can align text around your image. Correct
value‟s for this attribute are: “bottom”, “top”, “middle”, “left” and “right”.

<img src = “sample.gif” width = “250” height = “200” align=”left”>

Miscellaneous Useful Tags

Headings

There are 6 heading sizes you can use. This is to have text bigger than normal, like for the
heading of a section of your page. Headings are coded as follows, with the largest first and
getting smaller as we reach 6: h1,h2,h3,h4,h5,h6.

Note: the header tags will insert a blank line above and below the tag.

Paragraphs and Line Breaks

Next you will want to write a paragraph. Text will automatically wrap when it hits the edge of
the screen, so you don‟t have to force the text to wrap while writing a paragraph. If you want to
force a “line break” you can put in the “break” tag <br>. This tell the browser to move to the
next line down before continuing.

Horizontal Rules

The horizontal rule is a line that runs horizontally across your web page, The <hr> tag is a one-
sided tag.

If you enter the <hr> tag you will get a line all the way across your web page, the same color as
your browser‟s color.

There are several attributes you can use to modify your horizontal rule:

width

Use this attribute to specify how wide you want your line to be. You can use percentage value to
specify the percentage of the page you want the line to cover or you can specify the absolute
pixel size of the line.

Percentage Method:

Width = “50%”

This will give you a line exactly half the size of your page. This method is recommended since
no matter what resolution the viewer is looking at your page in, the line will be 50% of the width
of their screen.

9
Absolute Method

Width = “300”

This number is the width in pixels. This works well when you need to specify an exact size for
your line.

Align =

Using this attribute will give you the ability to specify where the line should appear on your
page. The correct value‟s to use are “right”, “left”, and “center”.

Size =

Use this attribute to specify the height of the line.

Noshade

This attribute is more like a ON/OFF switch on a value. You can specify that the line is
displayed as a solid line with no shading (shading gives you 3-D effect) by coding the noshade
attribute like this:

<hr noshade>

HTML Lists: unordered, ordered and definition lists

With HTML you can make nicely laid out list. The list can be indented, have bullet in front, or
they can be automatically numbered. Every item in a list is tagged with <li> and there I no need
to close the li tag.

The Unordered List

An unordered list will have bullets in front. You open an unordered lit with <ul> and close it
with </ul>.

The code:

<ul>

<li>milk>

<li>bread

<li>fruit

</ul>

10
The result:

 milk

 bread

 fruit

Unordered List: defining „bullet‟ types

We can use the type = attribute to define how we want the unordered bullets to look:

type = “disc”

type = “circle”

type = “square”

The code:

<ul type = “square”>

<li>milk>

<li>bread

<li>fruit

</ul>

The result:

 milk

 bread

 fruit

The ordered List

An ordered list will have numbers in front. You open an ordered list with <ol> and close it
with</ol>.

The code:

<ol >

<li>milk>
11
<li>bread

<li>fruit

</ul>

The result:

1. milk

2. bread

3. fruit

Ordered List: defining number types

The ordered list tag has several attributes that work exactly the same way as the unordered list
tag attributes we discussed above:

type = “A” (upper case letter)

type = “a” (lower case letter)

type = “I” (upper case roman numerals)

type = “i” (lower case roman numerals)

type = “2” (standard numbers)

Definition List

A definition list is a little more involved as there are two levels to this list. There is the Term and
the Definition You opens a Definition list with <dl> and close it with </dl>. The two levels are
determined with <dt> for the term and <dd> for the definition>.

The code:

<dl>

<dt>milk<dd>a very healthy liquid

<dt>bread<dd>contains a lot of vitamins

<dt>fruit<dd>my favorite are bananas

</dl>

The result:
12
milk

a very healthy liquid

bread

contains a lot of vitamins

fruit

my favorite are bananas

Hyperlinking: linking from one page to another

Hyperlinking, or Linking is the ability to click on a bit of text or an image and have it jump you
to another page, or area of a page. This requires both the opening <a> and the closing </a>
anchor tag.

Anchors also must have the href = (hypertext reference) attribute to work properly:

<a href = http://www.HTMLclinic.com/example.html> HTML help for all</a>

If the page is in the same folder use just the filename, like this:

<a href = “examplepage.html”> click here</a>

Name Anchors: links to areas on the same page

Anchors can also be used to jump to a specific spot on the same page.

Lets‟say you have a page about pets, and at the top of this page you want to provide a link down
to the area about your dog. Go to the area about your dog and put a name anchor around the title
or first word of the „dog‟ portion:

<a name = “dog”> All about my dog Fluffy:</a>

Fluffy is my dog. He has a tail, 4 legs and likes to bark.

Now go up to the top of the page where you want to put the link to the „dog‟ section. Here is the
code for the link at the top of the page:

<a href = “#dog”>Click for Fluffy the Dog</a>

Now when you click on the link on the top of your pets page, it will jump right down to the
section about Fluffy!
13
If you are linking to the Fluffy section from a different page you‟ll have to do this:

<a href = “animals.html#dog”>Click for Fluffy Dog</a>

Mailto Anchor: making a link to an email address

If you want to link to jump to sending mail to a specific email address, you have to add mailto: to
the anchor.

<a href=mailto:support@hotmail.com>Email Me Now!</a>

Image Anchor: Hyperlink to a graphic image

Let‟s say we have a specify new graphic and we want to make it clickable so people can use it to
go to another page.

<a href=”folder/page2.html”><img src=”mypicture.gif” height=”30” width=”40” alt=”My

picture” border=”0”></a>

Using Tables

Tables allow you to place objects and page elements very precisely on your web page allowing
you a lot more creative freedom.

Tables are broken down into rows and cells. Each row contains cell and the cell contain your
images and text. An individual table cell can contain anything you can put on a page, even
another full table.

Table Creation Tags: The Tags Function:

<table> This tells the browser to start a table

<th>…</th> This starts and ends a table header cell.

<tr>…</tr> This starts and ends a table row.

<td>…</td> This starts and ends a table cell.

</table> This tells the browser to end the table.

Coding a Table with One Row

<table border=”1”>

<tr>
14
<td>Cell A</td>

<td>Cell B</td>

<td>Cell C</td>

</tr>

</table>

Cell A Cell B CellC

Coding a Table with Two or More Rows

<table border=”1”>

<tr>

<td>Cell A</td>

<td>Cell B</td>

<td>Cell C</td>

</tr>

<tr>

<td>Cell D</td>

<td>Cell E</td>

<td>Cell F</td>

</tr>

</table>

Cell A Cell B Cell C

Cell D Cell E Cell F

Spanning Columns and Rows

15
Spanning is a very useful table creation tool. Cell spanning allows you to alter the size of cells to
your own needs. Here is the simple table we created before:

Cell A Cell B Cell C

Cell D Cell E Cell F

You will notice each row ha 3 cells but what do we do if we want the second row to have only
two cell? If you simply remove one cell, you will notice your table gets all screwed up.

So, what we need to do is modify the cell <td> tag with an attribute that will allow us to span one
cell across two existing cells. If we use the colspan= attribute we can stretch a cell across 2 or
more columns of the table.

Cell A Cell B Cell C

Cell D Cell F

<table border=”1”>

<tr>

<td>Cell A</td>

<td>Cell B</td>

<td>Cell C</td>

</tr>

<tr>

<td colspan=”2”>Cell D</td>

<td>Cell F</td>

</tr>

</table>

Here is a slightly different variant, suing the rowspan=attribute

<table border=”1”>

<tr>
16
<td>Cell A</td>

<td>Cell B</td>

<td rowspan=”2”>Cell C</td>

</tr>

<tr>

<td>Cell D</td>

<td>Cell E</td>

</tr>

</table>

Cell A Cell B Cell C

Cell D Cell E

17