free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

Index/You are here

Ten HTML Codes

Outline



Creating a webpage is easy.  One does not need to know a lot of HTML to create one.  One needs to know only ten HTML codes to create a perfectly readable webpage through different browsers.  Of course, with the presence of  WYSIWYGs one need not even have to learn from this page.  Just download, let's say, NVu and -- voila! -- you'll be making your first webpage in no time!  But if you would like to go a step further than other people and would like to create a webpage with only a simple text editor like NotePad or Vim then this page is for you.

The Basic Codes

A webpage is a simple text file with a set of codes that a web browser interprets and presents to you.  An empty webpage, as such, is not empty.  It is called via a filename, that is, anypage.html.  Please note the suffix "html" -- it identifies the page as a webpage1.  Second, it has a series of paired tags that tell the browser it should be treated as a HTML document.  These codes appear as follows in a web page:

<html>
          <head>
                     <title></title>
          </head>
          <body>


         </body>
</html>


The webpage must begin with the tag <html> and end with </html>.  Note the slash inside the closing tag.  The slash mark actually characterizes the closing tags of all HTML codes.  Within the beginning and closing tags of your webpage, there are other paired codes that are arranged in a nested structure.  Two paired tags divide the webpage into two parts, namely, the head and the body.  

The Head and Title of the Webpage 

The <head> tag is closed by </head> and contains information that may or may not be visible through the browser.  One of these pieces of information is contained in the <title> tag which is also closed by </title>.  The browser shows the title of the webpage as a label on the upper left corner of your screen.    The title of this webpage is "Ten Useful HTML Codes" and is coded this way:
<title>Ten Useful HTML Codes</title>
Look for it at the left top corner of your screen!  

The head can contain other information that you can add later to enhance your page.  This is enough for now.

The  Body of the Webpage

The section in your webpage that will contain all the other HTML codes is called the "body" which is marked by a paired tag <body> and  the closing tag </body>.  What you see on the browser when you read a webpage is contained in this section of your page.  Below are the six most used HTML codes that you find in the body of a webpage:

The headline tags <h...>


The headline tags are important for creating the paragraph headings of your web page.  The structure of the tag is H and a number from 1-6.  The code is formatted thus <Hn></Hn>.  The numbers designate the size of the headline, with 1 as the largest.  Below is a comparative table of the sizes of the headline with their corresponding codes:

<h1>This is a headline size 1</h1>

This is a headline size 1
<h2>This is a headline size 2</h2>

This is a headline size 2
<h3>This is a headline size 3</h3>

This is a headline size 3
<h4>This is a headline size 4</h4>
This is a headline size 4
<h5>This is a headline size 5</h5>
This is a headline size 5
<h6>This is a headline size 6</h6>
This is a headline size 6

The  paragraph tag <p>

The paragraph tags are  the most used tags in the body section of the webpage.  They are the tags that tell the browser that a specific section of your page should be shown as a paragraph.  Hence, a paragraph like the present one is coded in the following way:

<p>The paragraph tags are  the most used tags in the body section of the webpage.  They are the tags that tell the browser that a specific section of your page should be shown as a paragraph.  Hence, a paragraph like the present one is coded in the following way:</p>


The line-break <br>


When you post poetry on the web, you use the code <br> to break paragraphs.  <BR> is the old way of  coding a  linebreak.  The newer method requires that the code look this way:  <br />. Either way, it can work.  The following illustration of a paragraph broken up by linebreak tags should show you how to post a poem on a webpage:

<p>I think that I shall never see<br />a poem lovely as a tree.<br />A tree whose hungry mouth is fed<br />against the earth's sweet flowing breast;
<br />A tree that looks at God all day<br />and lifts its leafy arms to pray.</p>

I think that I shall never see
a poem lovely as a tree.
A tree whose hungry mouth is fed
against the earth's sweet flowing breast;
A tree that looks at God all day
and lifts its leafy arms to pray.


The line break tag is NOT paired with another one.

The image tags <img src= ... />

While it is not required to include images in a webpage, graphic files can be useful for illustration purposes.  Graphics are sometimes used to liven up the content of a webpage.  Inserting a graphic inside a webpage can be a tricky matter for beginners since it involves knowing the URL of an image and its relative location vis-a-vis the webpage where it should be inserted.  The standard code for an image tag is <img src="..." width="..." height="..." alt="..." /> .  With this code, one is telling the browser to search for (src) a particular image (img) in a given URL, present it with the specified width and height, and to give the viewer a  description of it (alt) while it loads.  Like the linebreak, the image tag is not paired.

Absolute and Relative URLS

What is a URL?  It is the acronym for Uniform Resource Locator.  It is the address on the web of a particular file.  When you upload a file into a webserver, you are uploading it in a specific location in the World Wide Web.  Thus, if I upload a file called "mypicture.jpg" into a folder of my tripod webserver at http://www..tripod.com/myaccount/images/  the URL of my uploaded file is going to be http://www.tripod.com/myaccount/images/mypicture.jpg.  That address is called "the absolute URL" of "mypicture.jpg."

Now, let us say, I would like to insert that image into a webpage called "myself.html" that is located in http://www.tripod.com/myaccount/myself.html, I will include the following code in "myself.html"

<img src="images/mypicture.jpg" alt="A photo of myself." />

The line "images/mypicture.jpg" is called the relative URL of mypicture.jpg.  It is "relative" because its location is "relative to" the page "myself.html".  Below is an illustration of the difference between absolute and relative URLs:


   tripod.com/
                   myaccount/myself.html                 {Absolute URL http://www.tripod.com/myaccount/myself.html}
                                         images/mypicture.jpg     {Absolute URL:  http://www.tripod.com/myaccount/images/mypicture.jpg}

Note that the file mypicture.jpg is located in the "images" folder inside the place where myself.html also resides.  Or to put it differently, mypicture.jpg is located in a folder next to myself.html.   Thus the relative address of the picture file is images/mypicture.jpg.  If, however, myself.html is located in another folder called "pages", even the coding changes.  Let us look at this graphically again.


   tripod.com/
                   myaccount/
                                        pages/myself.html                 {Absolute URL http://www.tripod.com/myaccount/pages/myself.html}
                                         images/mypicture.jpg     {Absolute URL:  http://www.tripod.com/myaccount/images/mypicture.jpg}

Note that now, myself.html is located in a folder that is alongside that of "images" where our graphic file is.  To specify that the graphic file is one folder away from myself.html, one should write "images/mypicture.jpg" plus the standard code for "one folder down" -- "../", a pair of unspaced periods and a slash 2.

Graphic Files and Some Precautions
The graphic files that  are used for webpages should have the following suffixes:  GIF, JPG or PNG.  Do not use BMP files since these are large and difficult for a web browser to download.  JPG files are for photos while GIF's are for cartoon pics, message graphics and animations; PNG can work for both (but I.E. does not seem to support it well.).  You can generate your own graphic files.  A good free software like Irfanview or Photofiltre can change the BMP files you generate through Windows Paintbrush into a JPG, GIF or PNG.

One can also get premade graphic files from the web; there are so many providers of  web graphic files that I will not list them here.  Just go to this link and choose what you need.  A note of caution, however.  When you use a graphic file from the web, it is best to download it first into your computer and then to upload it to your website account.  This way, you won't be overloading the bandwidth capabilities of those free graphic sites.  The best way to insert graphics into your webpage is to use the relative URL -- the page loads faster and you don't steal bandwidth from another website.  There are however sites that allow you to make use of their bandwidth.  But seeing how difficult life is on the web right now, these sites are becoming rare.

The Width and Height Specifications
The following image has the following code <img src="thispicture.gif" width="306" height="230" alt="Just A Picture">

Just A Picture

With the height and width specifications, I can make it smaller (width="190" height="143")

Just A Picture

or even larger (width="428" height="320")

Just A Picture

The width and height of an image is counted in pixels (px) which represent the digital dots that make it up.  Thus, 1 pixel is equivalent to 1 "digital" dot.  When you use a graphic file from a scanner, make sure that it is resized to within the 600x600 mark.  A graphic file larger than that can be difficult for a browser to download.  But even if the file is as big as 600x600, it is still best to resize it to a much smaller size (a thumbnail picture) and then to allow the viewer  the opportunity to see it in its full size as in the following case:

A Cute Dog

Click on the above thumbnail to see the full picture.

The thumbnail trick above was made possible through another HTML tag: the anchor HREF.

the anchor tags <a ...></a>

The heart of the webpage is the hyperlink.  We go from one page to another or from a section of a page to another section via hyperlinks.  What we have said about relative and absolute URLs is useful here.  We can go from one page to another page in the same server using relative links, or go from one page to another page in a different web server via absolute links.

Going from one page to another page.  The anchor tag used to link one page to another one is called the A HREF tag and is coded this way:  <a href="relative or absolute URL">Click this link</a>.  Thus a link to Yahoo would look like the following:
Code Output
<a href="http://www.yahoo.com">Yahoo</a> Yahoo

The URL given here is in the absolute.  If I wish to reference page2.html lying next to this page in a webserver, the URL would look like this:  <a href="page2.html">Read the next page</a>  and will look like this in a web browser Read the next page.  Note that the A HREF tag is closed by </a>.

Going from one section of a page to another section in the same page.  Did you notice that some hyperlinks on this page actually makes your browser jump from one place to another place on this same page?  This is the standard way of referencing footnotes or for helping one go through the contents of a long web document like this one.  Please go back to the outline above and click on "anchor tags".

What I did above is first, to set up a target and second,  to create the link.
Step 1:  Setting up the target.
I wanted my reader to jump to the Outline at the top of this page when he clicks on the word "outline" in the paragraph above.  What I did was to put an anchor NAME tag like so <a name="outline">Outline</a>.  With that, I can reference this particular section of this page from any point I choose.  I chose to reference it through the words "outline above" in the sentence "Please go back to the outline above and click on "anchor tags""
Step 2: Setting up the link
Since the hyperlink needed here is to a named target, it would look slightly different from what we have been discussing here.  The main structure remains the same:  <a href="#outline">outline above</a>.  Please note how the reference is formed:  there is an asterisk followed immediately by the named anchor.  With this hyperlink code, one is actually telling the browser "Go to the target (#) named "outline"."
Going from a page to a designated target on a different page.  This is basically a combination of the two preceding.  Let us say you have created a webpage where you reference this particular section of this webpage.  What you will need to do is type the absolute URL of this page (http://iamfora.sinfree.net/tencodes.html) immediately follwed by the named target of this section which is "goingtopage3".  Thus your reference should be <a href="http://iamfora.sinfree.net/tencodes.html#goingtopage3">More about tags</a> .

The codes for lists

You have seen what I did to the Outline at the top of this page.  I actually combined two kinds of lists there:  the ordered and the unordered list.  The ordered list is one with ordinal numbers, and is coded thus:

Code Output
<ol>
<li>cow</li>
<li>goat</li>
<li>horse</li>
<li>mule</li>
</ol>
  1. cow
  2. goat
  3. horse
  4. mule

The unordered list, on the other hand, is automatically rendered by your browser with bullets.

Code Output
<ul>
<li>a book</li>
<li>a bottle</li>
<li>a radio</li>
<li>a piece of paper</li>
</ul>
  • a book
  • a bottle
  • a radio
  • a piece of paper

Notice that the only difference in ordered and unordered lists are the way they start and end.  The ordered list starts with <ol> and ends with </ol> on the one hand while the unordered list  begins and ends with <ul> and </ul> respectively.  Current HTML specifications require that an opening <li> (for list items) is closed by </li>.

There is more to say about lists, but we leave that for a more advanced tutorial.

The Horizontal Rule <HR />

The horizontal rule is used  for dividing the webpage into sections.  As you can see, I have used the horizontal rule on this page to close the introductory section and to mark the beginning of the footnotes.  The horizontal rule is coded simply with an <hr />.  Like the image tag and the linebreak, it does not have a closing tag.  One can also specify how a horizontal line would look like by stating the following:

size - theoretically, it can be any number beginning with "1", the smallest size;
alignment - left, center or right
width - by percent (e.g. 50%, 100% of the screen) or by px (pixels, e.g. 250)3

Thus you can code your horizontal rules in the following way.  (Note that in actual use, the horizontal rule should be longer than 120 pixels and size 50 isn't going to be appropriate.)

Code Output
<hr size="4" align="right" width="120" />
<hr size="1" align="center" width="120" />
<hr size="50" align="left" width="120" />

Summary


In conclusion then, we have shown that it is possible to create a webpage using just ten HTML codes.  Four of these codes make up the basic structure of a webpage.  These are the tags for <html>, <head>, <title>, and <body>, all of which have their corresponding closing tags.  Of the six other tags that one finds in the body of the webpage, three are unpaired and the other three are paired.  The unpaired tags are <img src /> (image search), <hr /> (horizontal rule) and <br /> (linebreak).  The paired tags are <p> (paragraph), <a  href> (name and hyperlink anchors) and <h...> (headlines).  With this, we close your basic introduction to HTML coding.

Resource Links

The following list of links is not exhaustive, but it is hoped that  it can serve the beginner who wishes to create a website for the first time.


Back to Index

1 Or htm. The three letter suffix was used for computers running on the old operating systems.   Go back up
2Two folders down would be "../../"; Three folders away would be "../../../" and so on.  Go back up
3The specifications given here belong to an earlier version of HTML. The more recent specifications would look like this:   Go back up
<hr style="width:85%;height:4px;margin-left:0px;margin-right:auto" /> to produce