Writing Your Own Web Pages

Description of a WWW Page

A Web page is a text file that contains HTML codes or tags.
A text file is a file that contains plain printable characters.
The HTML tags give the browser information about how to display or represent information in the file. The text file is also called the source for the Web page.

Web pages are text or ASCII files in which HTML, HyperText Markup Language, is used to specify the format of the Web page, images to be displayed, hyperlinks, and possibly other elements. A Web browser interprets the HTML in the file and then displays the Web page.

The name of the source file has to end with the extension .htm or .html. Some examples are resources.htm, mvtool12.htm, index.html, and weather.html.

Let's take a look at a specific Web page.

It's URL is http://people.umw.edu/~ernie/writeweb/fig1.html

We'll also want to look at the source for the Web page.

Click on View in the browser's Menu Bar and select Page Source .

A few things to notice are:

The HTML tags are contained within angle brackets < >, for example, <title> and <img src="erniebw.gif" alt="picture of ernie" width="163" height="181" align="right" />.
Most HTML tags come in pairs, have a matching tag which uses a slash (/) such as <p> and </p>, <h1> and </h1>. The first of these tells the browser to start (<p>) and stop (</p>) displaying the text between them as a paragraph.
To write comments or notes in a document that don't show up in the window surround the comments with .
From looking at the page displayed by the browser you can see that carriage returns and spaces are generally ignored by the browser. You can use the HTML tag <p> to indicate the start of a new paragraph.
<a href="URL"> ... text ... </a> is an HTML tag for a hyperlink; any URL may be used between the quotation marks.
<img src="file name or URL"> is an HTML tag for an image; put the name of the file or a hyperlink to a file containing the image between the quotation marks.

Introduction to HTML

Web pages are written using HTML (HyperText Markup Language).

HTML consists of a collection of instructions, called tags, that the Web browser interprets to display a Web page.

The commands or instructions are written in HTML but the effect isn't seen until a Web browser or some program interprets the HTML. For example, the tags <strong> and </strong> placed around text indicate that the enclosed text is to be displayed in bold format. So if

Be sure to follow the <strong>Yellow Brick Road</strong> to get to Oz.

was part of a Web page, then it would be displayed as

Be sure to follow the Yellow Brick Road to get to Oz.

The commands and the way browsers interpret HTML, have more to do with the organization of a document, rather than with it's format.

There are a number of commands that can control the way text is displayed but HTML emphasizes the hypermedia aspects of the World Wide Web-extra spaces, tabs, and line length, for example, are generally not specified; the browser adjusts the text to fit within the size of the browser's window.

HTML contains the commands or tags to create links from one part of a Web page to another part of the same page and to create hyperlinks to other Web pages or resources on the Internet.

Web pages are stored in plain text files; they contain only ordinary printable characters. When the file is saved it needs to be put into a file whose name ends with .htm or .html.

General Form of HTML Tags

HTML tags begin with the character < (right angle bracket) and end with > (left angle bracket).

Some of the tags come in pairs; they surround or enclose text.
The second tag is like the first except that there's a slash / after the <. The text between is treated some special way.
For example, the text between the tags <p> and </p> are displayed in italic font.

Some tags may occur singly and cause an action. For example <hr />is interpreted as a horizontal line by a browser.

Write HTML tags using lower case, but remember that when you're writing a URL you have to pay attention to case.

To summarize:

HTML tags are enclosed between < and >. Some tags occur in pairs with the second being like the first except a slash is used after the < to indicate it's the matching tag, for example, <p> and </p>. Other tags occur as single entities, such as <hr />. Tags should be written using lowercase letters. In URLs you have to pay strict attention to the case of the letters.

Structure of a Web Page: Head and Body

Each Web page ought to start with the tag <HTML> and end with </HTML>.

Within those tags, a Web page has two distinct parts.

The Head or heading which gives some information about the Web page, and the Body which contains the elements or content of the Web page.

Title

Every Web page needs a title.

The title doesn't appear as part of the Web page, but it is visible at the very top of the Netscape Navigator window.

The title is put between the tags <TITLE> and </TITLE>, and these go in the heading section of a Web page.

Headings

Web pages can be given a rigid structure.

You can start with a top-level heading and then have several levels of sub-headings. One rule used for constructing a Web page is to restate the title at the top of the body section as a level-1 heading using the tags <H1> and </H1>, then give a second-level heading using <H2> and </H2>, then a third level heading and so on.

There are six levels of headings using the tags <H1>, <H2>,<H3>, and on through <H6>. The different levels of headings also control the size of the characters displayed.

Take a look at the source for http://webliminal.com/lrn-net4.html

Steps to follow to create a Web page:

Get a clear understanding/statement/concept of the purpose of the page.
Determine what you'll use in the page -- text, images, audio, animation, forms,etc -- to communicate the purpose.
Design
Design
Design
Design
Design
Use an appropriate editor to write the HTML for the page
View the page using a Web browser
Publish it! -- get the page in place on the Web.

Putting your information on the WWW

To make your Web pages available to everyone else on the Internet, the Web page and all supporting files have to be placed on a computer that's acting as a Web server.

In our case that computer has the domain name students.umw.edu.

You have to be able to log into that computer system, and all your Web pages and supporting files have to be put into a directory named public.www which is a sub-directory of your home directory on the H: drive on the campus network.

If you have your home page in a file named index.html in the directory public.www in your home directory on the H: drive then folks can access it by using the URL http://students.umw.edu/~your-login.

If, for example, your log in name were mwashing then the URL for your page would be

http://students.umw.edu/~mwashing/

Other Web documents in that same directory could be accessed by http://students.umw.edu/~mwashing/other.html

Lab exercise: Copy the HTML below into a file named try1.html on your H: drive in the folder named public.www, but modify it so it is information about you. View it using the URL http://students.umw.edu/~yourLoginName/try1.html

<html>
<head>
<title>About Ackermann</title>
</head>
<body>

<p>My name is Ernest Ackermann.</p>

<p>On Tuesday and thursday morning you can find me in <a href="http://people.umw.edu/~ernie/csc104/">CPSC 104 </a> at Mary Washington College<br />of the <a href="http://www.umw.edu">University of Mary Washington</a>, Fredericksburg, Virginia.
</p>

Here is list of courses I am taking this semester:

<ul>

<li><a href="http://people.umw.edu/~ernie/cpsc104">CPSC 104</a></li>
<li><a href="http://people.umw.edu/~ernie/cpsc220">CPSC 220</a></li>

</ul>

You may want to read my <a href="http://theackermann.blogspot.com">blog</a> and leave post a comment to one or more of its entries.

<hr />

Bibliographic information: <br />
<blockquote>
Author: Ernest Ackermann <br />
Title: About Ackermann<br />
URL: http://people.umw.edu/~ernie/try1.html<br />
Last modified: October 10, 2005<br />

</blockquote>
</body>
</html>

For Thursday complete a portfolio TOC page as described in http://people.umw.edu/~ernie/cpsc104/portfolioLab.doc

This work is licensed under a Creative Commons License.
Ernest Ackermann Department of Computer Science, Mary Washington College
CPSC 104 | CPSC 220

Bibliographic Information:

.