ThePlace	[ Home ] [ Search ] [ Resources ] [ Site Map ] [ Contact Me ] Dave's Information Technology Resource
[ Up ]
[ Steps to Build a Page ] [ Tables ] [ Frames ] [ Forms ]
--- Steps to Build a Page ---

Easy Steps to Build a Web Page

We are going to build a web page in parts. In each of the following sections we will construct a web page that you can see and copy, and try for yourself. Do not be afraid to experiment.

We suggest you use a text editor such as Windows Notepad or SimpleText on a Macintosh. REMEMBER - you must save the file in plain text format.

You will save the file with a .htm extension. For example: myweb.htm or demo.htm.

You can copy and paste the examples from this page into the text editor, save them, and then load them into your web browser (you may want to start a second web browser application). Use the File, Open menu on your browser to find your HTML file on your local computer.

Remember to reload your page every time you make changes and save the file.

In each of the following sections, we will provide you with the code and then show you how that code appears in the browser content window.

Outline the Page

Every web page has the following basic structure:

<html>

<head>

<title>This is a title in the caption bar of the browser</title>

</head>

<body>

this is where the content goes

<body>

</html>

This will look like the following:

this is where the content goes

**Look for the title in the caption of the browser.

Note the following:

	Every HTML document starts and ends with <html> and </html>.
	The document has 2 sections: 1) The Head (<head> and </head> and 2) the Body (<body> and </body>)
	The title appears in the caption bar at the top of your browser application.
	Unformatted text (that is, text with no tags appears just as you typed it)

Go ahead and copy the above example (make sure you get all the tags), save the file, and open it in a browser.

Text and Headers

Let's get a little fancier.

Headers are used to separate sections of text and make it easier to read and organize the overall document.

<html>

<head>

<title>This is a title in the caption bar of the browser</title>

</head>

<body>

<h1>This is a main title</h1>
this is where the content goes
<p>This starts a new paragraph.</p>
<br>This is a simple line break</br>
<h2>This is a second level header</h2>
<h3>This is a third level header</h3>
There are up to 6 levels of headers -- but this line is text.

<body>

</html>

This will look like the following:

This is a main title

this is where the content goes

This starts a new paragraph.
This is a simple line break

This is a second level header

This is a third level header

There are up to 6 levels of headers -- but this line is text.

**Look for the title in the caption of the browser.

Note the following:

	There are six levels of headers ranging from H1 to H6. H1 is the largest, boldest down to H6 as the smallest (and still bold). Most people use H1 to H3.
	The paragraph tag (<p>) causes a double line feed (and carriage return) as opposed to the <br> or line break tag.

Now, let's format the text a little:

<html>

<head>

<title>This is a title in the caption bar of the browser</title>

</head>

<body>

This is plain old unbolded text.

<p><strong><em>This is a new paragraph that is bolded and italicized</em></strong></p>

<p><u>This is underlined</u></p>

<body>

</html>

This will look like the following:

This is plain old unbolded text.

This is a new paragraph that is bolded and italicized

This is underlined

Note the following:

	You can "nest" tags. See how the bold and italic tags work together.
	Be careful with underlining, it is often confused with hyperlinks.

Please try the above examples on your own. Remember to save your HTML files and to refresh your browser to reload the file.

Try experimenting with different combinations of tags for headers and text formatting!

Lists

Lists are great ways to break up your page and organize information. Web pages have three kinds of lists:

Ordered lists...

This is item one
This is item two

Unordered Lists...

	This is the first
	This is second

and Definition Lists...

Item one is here

This is item two

Using these examples here is the HTML code:

<html>
<head>
<title>This is a title in the caption bar of the browser</title>
</head>
<body>
Ordered lists...
<ol>
   <li>This is item one</li>
   <li>This is item two</li>
</ol>
<p>Unordered Lists...
<ul>
   <li>This is the first</li>
   <li>This is second</li>
</ul>
<p>and Definition Lists...
<dl>
    <dd>Item one is here</dd>
    <dd>This is item two
</dl>
<body>
</html>

This will look like the following:

Ordered lists...

This is item one
This is item two

Unordered Lists...

	This is the first
	This is second

and Definition Lists...

Item one is here

This is item two

Note the following:

	Lists use nested "subtags" to identify each element in the list. Note the main tag (<ul>, <ol>, and <dl>) that indicates a list structure. Within these tags are the appropriate list item tags (<li> and <dd> as appropriate).
	You can also use text formatting tags such as strong and em to modify the appearance of text as well as use header tags within lists for emphasis.
	Numeric ordering (1, 2, 3...) is based on the order of the items within the list.

Please try the above examples on your own. Remember to save your HTML files and to refresh your browser to reload the file.

Create your own lists with more elements by simply adding additional subtags. Try using the definition list for creating indented dictionary entries.

Images

Images, graphics, or pictures-whatever you call them, add spice and valuable information to web pages. Web pages display images by referring to a file and loading that file into a web page at the appropriate place.

Although there are many ways to store images in files, there are two widely accepted file formats for graphics:

	JPEG (Joint Photographic Experts Group) - files have a ".jpg" extension
	GIF (Graphics Interchange Format) - files have a ".gif" extension

These file formats are popular because they compress the image to a relatively small file that is well-suited for sending it across the Internet. JPEG files are best for photograph-like images while GIF files are best for drawn images. The following are examples of web files:

The following is a JPEG image (filename = demo1.jpg). Note that JPEG files can use millions of colors to create highly textured, rich images.

demo1.jpg (4265 bytes)

The following is GIF image (filename = "demo2.gif"). Note that GIF images are limited to 256 colors and are best suited for flatter images including drawings, tables, and graphs.

demo2.gif (5132 bytes)

Where can you get images? Images can be created and or borrowed from a variety of sources:

	Copied from web sites (make sure you have permission if you need it). Most web browsers will let you copy a file to a local disk.
	Create them from scratch using drawing and paint software programs. Remember to save the files with .jpg or .gif extensions.
	Create them using scanners and video digitizers.

The HTML for loading an image is the <img src="filename.ext">. The filename reference must indicate where the image file is relative to the HTML file. For example:

	If the image is in the same directory, only the filename is used (src="file.jpg").
	If the image is in a subordinate directory called "images", the path must be included (src="images/file.jpg").
	Likewise, if the file is in a superior directory, the path is also included (src="..\file.jpg").
	The file could also be in a another location on the Internet (src="http:\\www.domain.com\pathname\file.jpg").

For the purposes of our lesson, let's assume the file is in the same directory.

Now, let's format the text a little:

<html>

<head>

<title>This is a title in the caption bar of the browser</title>

</head>

<body>

This is an image on a web page.

<p>

<body>

</html>

This will look like the following:

This is an image on a web page.

Note the following:

	You must use the text formatting tags such as <p> and <br> to position the image in the place you want it to appear.
	The image (<img...>) tag does not have an end tag.

Now you try it! You can copy one of the above images to your local disk (you have our permission). Remember to copy it to the same directory as the HTML file you are working with (or into a path that your reference in src attribute).

There are many things you can do with images such as:

	Use the width and height attributes to vary the image size (e.g., <img src="demo2.gif width="360" height = "482"> will double the size of the image).
	Use animated GIF images (a special kind of GIF file) to create interesting, eye-catching animations.
	Use images as hyperlinks (see the next section of this lesson).

Links

Links or hyperlinks are the heart of web pages!

They allow you to organize information in a way that is more manageable and easier to understand.

Links are based on the anchor tag: <a href="filename.htm">Click here</a>.

There are essentially three parts to this tag:

The starting tag that begins the link.
The reference to the link (a local filename or remote web page).
The text (or image) that is displayed to represent the link on the web browser.

For example:

<html>

<head>

<title>This is a title in the caption bar of the browser</title>

</head>

<body>

This is a hyperlink:

<p>

<a href="demo.htm">Click here to jump to a local page.</a>

</p>

<body>

</html>

This will look like the following:

This is a hyperlink:

Click here to jump to a local page.

Note the following:

	The text or image between the start <a...> and end tags </a> is the visible aspect of the hyperlink. It is typically presented as underlined in a different color than the remainder of the text.
	The href can refer to a page in a subordinate or superior directory relative to the HTML file.
	You can also link to a remote web site or page. You need to include the entire URL reference: <a href="http://www.neamb.com">Jump to the NEA MB Web Site</a>. You can copy the URL directly from a web browser when you visit the site to ensure that you have the correct information.

Your turn - copy the above code to a local file and create a link to another web page. Create a second HTML page and link to it using a local href or link to a remote web site with the full URL.

Posting Your Page to the Web

Now that you have created a web page, it is time to load it into your web site.

You will need a place (called a web server) that is capable of storing and "hosting" web pages. Hosting is the ability to respond to requests from web browsers to send a copy of the web page to be displayed on the web browser.

Many Internet Service Providers (ISPs) offer hosting services for your web pages (a family or personal web page).

You will need a program that provides File Transfer services or you can check with your ISP and see if they offer services via a web browser to upload your files.

If you use a File Transfer program (sometimes called an FTP Client) you will need to know:

	Where the file is going - usually a directory.
	A userid to access the web server.
	A password.

[ Home ] [ Up ] [ Computer Architecture ] [ Programming Bootcamp ] [ Database Bootcamp ] [ Visual BasicS ] [ Web Basics ] [ Web Multimedia ] [ Web Programming ] [ Advanced Web Topics ] [ Developing Web Sites ] [ XML Technology ] [ Web Glossary ]