Howyoubuildit - Tutorial on html web pages.

Tutorial on html web pages

Table Of Contents

Introduction

There are many tutuorials on creating web pages; this is my attempt. Hope it is useful. A web page uses HTML, which stands for Hyper Text Markup Language. It is essentially a scripting language that allows one to specify the manner in which a web page should be displayed by a browser.

Browswer

A browser (such as Internet Explorer or Firefox) serves as the user's interface to the html files stored on the web. The browser requests a page from a server and the server returns the desired information. The html language is designed to be platform independent such that the same text-based html file is interpretted by all browsers on all systems in the same or similar manner. In reality there are some differences in how different browsers display information; some tend to be more finicky than others. Therefore, when creating web pages, it makes sense to test them in many popular browsers to ensure that they display the page the way you want it to display.

Server

A server (running linux, unix, or win nt O/S) runs a web server application (such as apache) that answers (i.e. serves) the requests provided to it from the browsers. The requests are typically requests for the text of html pages or of images or perhaps the output of a cgi/perl/php script.

Creating first page

 First Page The simplest html page contains only 2 pair of tags; namely the <html> start tag and the </html> finish tag. Within that tag pair is the <body> and </body> pair. Here is a simple html page that doesn't really do anything.

<html>

<body>
</body>
</html>
Copy this and future examples and paste to an empty notepad (or ascii editor) file and save it (as example1.html) on your desktop. Double-click on the desktop icon to open it in your default browser.

This page should be understood by all browsers but it doesn't attempt to display anything. Let's revise that as follows...

<html>

<body>
Hello World!!!
</body>
</html>

This page displays text simply by including it between the <body> and </body> tags. That is all you need to do to create a simple page, however to make the page more useful, it is desirable to add links.

Adding Links

Adding a link to other pages or pictures is simple. You merely use the <a> tag which is known as the anchor. For example, to link to my favorite site on the web you would type
<a href="http://www.howyoubuildit.com"> my favorite site </a> into the body section of your html page.
This creates a link as follows:
my favorite site

Adding Pictures

Now let's suppose that you want to include the picture directly in your page instead of linking to it. You do that by using the <img> tag as follows:
<img src="http://www.howyoubuildit.com/logo.gif"> .
To turn the border off, just add "border=none" inside the img tag as follows:
<img src="http://www.howyoubuildit.com/logo.gif" border=none> .
Here is the picture created by this code

Making a picture a link to a file or another picture

We can combine the 2 techniques discussed above by putting the img tag inside the anchor tag as follows:
<a href="http://www.howyoubuildit.com"> <img src="http://www.howyoubuildit.com/logo.gif" border=none> </a> This combination creates a link as follows:

Adding Tables

 Adding Tables allows one to organize information in a nice visual manner. To add tables, use <table> and </table> tags to enclose the table information. Each row is enclosed with <tr> and </tr> tags and each column is enclosed with <td> and </td>. For example, consider the following code.
<table border=1>
<tr>
<td>This is row1, column 1 </td>
<td>This is row1, column 2 </td>
</tr>
<tr>
<td>This is row2, column 1 </td>
<td>This is row2, column 2 </td>
</tr>
</table>

The "border=1" inside the table tag adds a visible border to add definition to the table. This code creates a table as follows:

This is row1, column 1 This is row1, column 2
This is row2, column 1 This is row2, column 2

Using Frames

Frames allow one to display seperate html files in different portions of the screen. For example, suppose that I wished to display my home page on the left of the screen and this page on the right. I can accomplish this using the following the frameset tag pair. Here is the sample code:
<frameset cols="*,*">
<frame src="http://www.howyoubuildit.com" name="left">
<frame src="http://www.howyoubuildit.com/webpage" name="right">
</frameset>

Ordered Lists

Ordered Lists allow one to display a nice list of items numbered from 1 to N without requiring one to renumber the list when an item is added. The <ol> and </ol> tags setup the list and the <li> and </li> tags identify the list items. For example, the following code sets up an ordered list.
<ol>
<li> item_1 </li>
<li> item_2 </li>
<li> item_3 </li>
</ol>
The list setup by this code is the following:
  1. item_1
  2. item_2
  3. item_3
Now let's suppose that you have a new item to take the place of item_2 and wish to shift all other items down. All you need to do is add the line
<li> new_item_2 </li>
between items 1 and 2 and the following new list is created.
  1. item_1
  2. new_item_2
  3. item_2
  4. item_3

Unordered Lists

An unordered list is useful when you wish to display items that have no definite hierarchy. We can create an unordered list as follows:
<ul>
<li> item_1 </li>
<li> item_2 </li>
<li> item_3 </li>
</ul>
The list created from this code is the following:

Learning More

See the Bibliography section of this tutorial. Another great resource for learning more about html pages is to use your browswer's ability to view the source code of a page.

Bibliography