Lets Learn HTML

WHAT IS HTML?

Webpages are written in HTML - a simple scripting language.

HTML is short for HyperText Markup Language.

•      Hypertext is simply a piece of text that works as a link.

•      Markup Language is a way of writing layout information within documents.

Basically an HTML document is a plain text file that contains text and nothing else.

When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages.

Since HTML documents are just text files they can be written in even the simplest text editor.

Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using.

All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file (for instance "mypage.html").

For more information: http://www.w3schools.com/html/

LESSON 1: PAGE STRUCTURE

All normal webpages consist of a head and a body. 

The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page. The most basic code - the code you will use for any page you make, is shown below: Figure 1.

LESSON 2: HOW TO MAKE A LINK

The tags used to produce links are the <a> and </a>. 

The <a> tells where the link should start and the </a> indicates where the link ends.

Everything between these two will work as a link.

The target of the link is added to the <a> tag using 
the href="http://www.whateverpage.com" setting.

The example below shows how to make the word here work as a link to yahoo.

Figure 2

LESSON 3: BULLETED LISTS

This page shows how to make different kinds of bulleted lists.

You have the following bullet options:

• disc


• circle


• square

Look at these examples to see the detailed syntax.

Figure 3.

LESSON 4: NUMBERED LISTS

This page shows how to make different kinds of numbered lists.

You have the following number options:

• Plain numbers


• Capital Letters


• Small Letters


• Capital Roman Numbers


• Small Roman Numbers

Figure 5

LESSON 5: HTML IMAGE

To reduce download times as much as possible two of the best image compressing formats used on the web are:

GIF	JPG
256 colors	Unlimited colors
Can handle transparent areas	Can't handle transparent areas
This format is not good at compressing photographs	Excellent for compressing photographs and complex images
In general, it is excellent for banners, buttons and clipart	In general, it is not good for banners, buttons and clipart.

Table: Differences between GIF and JPG image.

LESSON 6: INSERTING HTML IMAGE

Here is the HTML code used to insert the image on this webpage:

Figure 6

LESSON 7: BASIC TABLES USING HTML

Tables are defined with the <table> tag.

To insert a table on your page you simply add these tags where you want the table to occur:

Figure 7

ROWS:

To add rows to your table use the <tr> and </tr> tags.

Example:

<table> <tr></tr> <tr></tr> </table>

It doesn't make sense to write the above lines in itself, cause you can't write content outside of table cells.

If you do write things outside of cells it will appear right above the table.

COLUMNS:

You can divide rows into columns with <td> and </td> tags:

Example:

<table> <tr> <td>This is row one, left side.</td> <td>This is row one, right side.</td> </tr> <tr> <td>This is row two, left side.</td> <td>This is row two, right side.</td> </tr> </table>

Result:

This is row one, left side. This is row one, right side. This is row two, left side. This is row two, right side.