Post by: Eric Li

HTML tutorial
5

In practical

There's still more to learn but for now, let's have a checkpoint to see how what you've learnt fits in.

1. Start by opening you HTML editor.
2. Now write or copy if you forgot the HTML structure in the editor.
3. Suppose:
   • you want to display a big "Hello World!" message on top
   • then draw a horizontal line
   • then find some text to format so as there is at least one hyperlink, one bold, italic and underlined part and one different color text
   • add a picture
   • and end with the date you wrote this on the lower RIGHT side of the page in comic sans ms

How to proceed?

Now that you already have your HTML editor opened and the structure in it, let's go directly to the "problem", it should be a piece of cake.

Proceed as I tell you...

• Start by writing "Hello World!" anywhere in the body part. You can easily delete unwanted space later, remember it's only the beginning.
• Now specify it's size with tags like: <h1> or the <font size="">tag to define it's size. Then center it using the <div align="center"> tag.
• Now leave one or two space (to keep the code neat and comprehensible, feel free to leave as much line as you want) then draw a horizontal line. Use the <hr> tag and feel free to define its width.
• Now, after leaving some lines, write something or find a text. Let's see... Aha! Here's my text:
  

  HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of labels (known as tags), surrounded by less-than (<) and greater-than signs (>). HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.

  
  Now, let's edit its appearance! Let's make the first part bold then underlined then italic and the final part in green and I'll add a link where appropriate! The tags have been colored red to better understand it.
  
  

  <b><a href="http://en.wikipedia.org/wiki/Html">HTML, short for Hypertext Markup Language</a>, is the predominant markup language for the creation of web pages.</b><u> It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects.</u><i> HTML is written in the form of labels (known as tags), surrounded by less-than (<) and greater-than signs (>).</i><font color="green"> HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.</font>

  
  ... which gives...
  

  HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of labels (known as tags), surrounded by less-than (<) and greater-than signs (>). HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.

  
  
• Now, let's insert an image. You could find any image you want using the "google" or "Yahoo!" image search to find the url (address) of the image.
  Note: When specifying an image url, the url in which the image is must contain only the image and nothing else. By default there's a blank (white) background with the image in the upper left. Here's an example of an image url: example here and we use the same address or url when using the <img src> tag to display the image.
  
  Let's use this same image. So we type this in:

  <img src="http://www.drfad.com/images/cube.jpg">

  
  To get this...
  
  
• And now the date. Let's say we wrote this on the 30^th February 2053. So, we write this:

  <font face="Comic Sans MS"><div align="right">30<sup>th</sup> February 2053</div></font>

  
  Output:
  

  30th February 2053

  
  

Now that we have finished with our page, we do:

1. "File -> Save". A window will be promted. Specify its directory where you want and give it a name (maybe "Hello World!") then click save to save it in .txt format as default.
2. Then do "File -> Save As..." then specify its directory, normally the same as before then give it a name, normally the same as the first one THEN (very important!) add the extension .html at the end of the name to make it an html document.

That way you will get a text format of the page to be able to edit it whenever you want and an html document viewable with any web browser. Double click on the html document to view it in your default web browser or open your web browser then do "File -> Open File... -> directory of the html file" to view it on the web browser you opened.

Note that the first time you write the page it might contain typos (wrongly written tags or other words), omittion of certain things or other "hazards". So you will have to re-open the text document where you wrote your html page then do the necessary changes then re-save once and save it with the .html extension the second time then review it to see how it is now.

Previous| Intro | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |Next

| | Comment rules