Writing Your Own Web Pages

Description of a WWW 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.

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

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

• The HTML tags are contained within angle brackets < >, for example, <TITLE> and <IMG SRC="http://webliminal.com/smc-www.gif">.
• Most HTML tags come in pairs, have a matching tag which uses a slash (/) such as <I> and </I> or <H1> and </H1>. The first of these tells the browser to start (<I>) and stop (</I>) displaying the text between them in italic font.
• To write comments or notes in a document that don't show up in the window surround the comments with <!-- and -->.
• 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.

Viewing the Source Version of a Web Page

• You can view the source version of any Web page.
• This lets you see the HTML used to create any web page. It is also straight-forward.
• Click on View from the Menu Bar and then choose Document Source.
• Viewing the source is a good way to see how a Web page is constructed and to learn from the work of others.

What you need to Write a Web Page

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 <B> and </B> placed around text indicate that the enclosed text is to be displayed in bold format. So if

Be sure to follow the <B>Yellow Brick Road</B> 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 ignored by HTML; the text is made 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.

Using an HTML Editor

Starting to Use Dida

1. Click on the button (on the bottom of the screen) labeled Start
2. Move the pointer to Programs
3. Move the pointer to the right and click n Windows Explorer
4. Locate the folder Dida in the list on the left.
5. Click on Dida (in the list in the left)
6. Then click on the program/application entry for Dida on the right

Now for an exercise,

1. type the source with appropriate modifications of the Web page on the handout and save it in a file named try1.htm in the directory/folder that holds DiDa
2. view the file using Netscape as follows
   • bring Netscape back onto the screen
   • click on File in the menu bar and
   • select Open File

General Form of HTML Tags

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 <I> and </I> are displayed in italic font.

Some tags may occur singly and cause an action. We saw that <P>, which causes a new paragraph to start, acts that way.

We've written the tags in upper-case, but HTML ignores the case of the letters in a tag. Remember, though, that in a URL, it's very important to use the proper case for names of files.

To summarize:

Most 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, <I> and </I>. Other tags occur as single entities, such as <P>. Tags can be written using upper- or lower-case letters; HTML ignores the case of letters in a tag. In URLs you have to pay strict attention to the case of the letters.

Structure of a Web Page: Head and Body

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

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

Paragraphs, Line Breaks, Shadow Lines

The advantage to this in that lines are adjusted or formatted by the browser so they fit nicely within the window.

There's also a disadvantage, you need to use an HTML tag to specifically mark the beginning of a paragraph or the end of a line.

Use <P> to mark the beginning of a paragraph..

Use <BR> to separate lines.

The tag <HR> puts a line, called a shadow line, on the Web page. It, like <BR>, can be used to separate lines. Often times it's used to separate sections of a Web page. The length of the shadow line is automatically adjusted so it's always the width of the window.

Take a look at http://webliminal.com/fig2.html

<html>
<HEAD>
<TITLE> Domain Names and Addresses </TITLE>
</HEAD>
<BODY>
<H1> Domain Names and Addresses </H1>
<HR><P>
Each node on the Internet has a numeric address called its <B>IP
address</B>. Additionally most sites also have a name called
the <I>fully qualified domain name</I>. <BR>
These names are usually 3 or 4 strings separated by dots (periods).
The names are associated with numerical IP (Internet Protocol)
addresses <HR>
<PRE> Domain Name <B> IP Address <u> www.umw.edu
</u> <i>192.65.245.76</B> nssdca.gfsc.nasa.gov
128.183.10.4 askhp.ask.uni-karlsruhe.de 192.67.194.33</i>
</PRE>
<HR>
<P>These domain names are used as part of an e-mail address
and also used to access Internet services and resources. 
<P>To send electronic mail to someone you need to know their
Internet address. <BR> For nodes that are directly connected to
the Internet this address is usually <B>login-name@domain-name
</B>
<P>

Character Formatting: Italic, Bold, Emphasized

Pre-formatted Text

Quoted Text

Lists

The types of lists supported by HTML are

• Ordered (Numbered) Lists
• Unordered Lists
• Descriptive Lists

Ordered or Numbered Lists

The rules for using HTML to construct ordered lists are:

• An ordered list starts with the tag <OL> and ends with the tag </OL>.
• Each item in the list starts with <LI>.

Unordered Lists (Bulleted Lists)

An unordered list starts with the tag <UL> and ends with the tag </UL>.

Each item in the list starts with <LI>. Take a look at http://webliminal.com/fig4.html

Links

Hyperlinks to other resources on the WWW

Here's an example of the HTML tags for a hyperlink:The home page for <A HREF="http://webliminal.com/index.html"> Ernest Ackermann</A> has a link to materials for workshops and tutorials.

A Web browser would display that HTML as:

The home page for Ernest Ackermann has a link to materials for workshops and tutorials.

If someone clicked on Ernest Ackermann in their browser's window, the browser would open the location, and go to the resource given by the URL.

The HTML rules for creating hyperlinks are generalizations of the example above.

• The first tag has the form <A HREF="URL"> where an actual URL is substituted for URL between the pair of quotation marks (").
• The matching tag is </A>.
• The tags don't appear on the Web page.
• The text between the two tags appears on the Web page as underlined or highlighted text.
• If there's an image between the two tags then its border is highlighted.
• Clicking on the text or image opens the location or takes the user to the Web resources given by the URL.

Links to other parts of the Web page

Making a link from one part of the document involves link tags and an anchor tag.

The anchor marks a spot within the document and the then ties to that specific anchor.

• Anchor tags have the form <A NAME="word"> portion-of-document </A> where word is some term that's used in the link tags. When the link is selected the page is displayed starting here.
• Links to portions of a document have the form <A HREF="#word"> text or image </A>. Selecting the hyperlink takes the user to the portion of the document where the anchor word is defined.

Images

You can also give directions to the browser as to where the accompanying text will be displayed relative to the image. It can be displayed aligned with the top, middle, or bottom of an image, and it's usually displayed to the left of the image. To do this use ALIGN=TOP, ALIGN=MIDDLE, or ALIGN=BOTTOM within the tag <IMG SRC="..">. For example, <IMG ALIGN=TOP SRC="http://webliminal.com/cover.gif">. With these types of alignments only one line is displayed in the specified position and the remaining text (if there is any) is displayed as beginning under the image. It's also possible to align text with the entire image, starting at the top using ALIGN=LEFT or ALIGN=RIGHT. This puts the image to the left or to the right of the text.

The method of alignment is easier to think about when you see some examples, and we'll show some as part of a Web page. The page we'll look at is accessible through the URL http://webliminal.com/wwwbk/demoalign.html.

URL Formats

Before going into the different formats for URLs, here's a quick review of the concept and general format of a URL. The purpose of a URL is to give the location and the means to get to a resource on the Internet. The Web browser uses it to access items and it's becoming common to see it used as a way to let people know about a resource, source of information, or advertisement. You'll find it helpful to think of a URL as having the form

how-to-get-there://where-to-go/what-to-get

Its general form is

service://domain-name-of-site-supplying-service/full-path-name-of-item

Essentially this is like a sign pointing to something on the Internet. Starting at the far left, the portion of the URL up to the colon (:) tells what type of Internet service to use. The Internet domain name or address of the site supplying the information comes just after the characters ://. After the first single slash you have the full path name of the item. One of the key items of a URL is the type of service or resource it represents

Writing a Web Page

• Think about using one of those templates for your office or department.
• Save the source for one of them in the same folder as DiDa
• Use DiDa modify the template.
• Save the modifications in an html file.

Converting Existing Computer Files to HTML

1. Start Microsoft Word.
2. Open the file.
3. Click on Format on the menu bar and select Auto Format.
4. Save the file as an HTML document.

You may want to make changes, add links, or add images. you use the Internet assistant tools to do that.

Steps to follow to create a Web page:

1. Get a clear understanding/statement/concept of the purpose of the page.
2. Determine what you'll use in the page -- text, images, audio, animation, forms,etc -- to communicate the purpose.
3. Design
4. Design
5. Design
6. Design
7. Design
8. Use an appropriate editor to write the HTML for the page
9. View the page using Netscape
10. Publish it! -- get the page in place on the Web.

Putting your information on the WWW

In our case that computer is 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 that computer.

If you have your home page in a file named index.html in the directory public_html in your log in directory on www.umw.edu 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

-->

.