CREATING A BASIC WEB PAGE
Adapted, with permission, from materials created by Rachel Smith, Sonoma State University

This is the handout for our in-class activities for Week Six of ENG 724. Step-by-step instructions are here for making a basic page that includes links to other pages, an email link to your email address, and bulleted lists, among other things.

Anchor: A reference in an HTML document to another HTML document, or a specific location within an HTML document.
Browser: A software application which can "look at" web pages and display them on your screen.
Client: The local machine, your computer or the one you're using. Web pages on a client are available only to the user of that client.
Data transfer rate: The speed at which a page loads, for example.
Download: To retrieve files from a server.
Editor: A software application used for writing or editing HTML documents.
GIF: A file format which is good for simpler, drawn images.
HyperText Markup Language (HTML): This "language" is really a system of codes, called tags, that explains to a browser how you would like your document formatted.
Hypertext: A traditional document tells you, "see page 18," or "refer to Blotz's paper on..." A hypertext document, by contrast, gives you a link that you can click on or otherwise activate with a minimum of action, and voila! -- you're on page 18 or looking at Blotz's paper.
JPEG: A file format which is good for photographic images.
Link: Clickable or selectable text in a web page that leads to another web page, image, etc.
Server: The remote machine, which you must connect to in some way. Web pages on a server are available to anyone with access to the server.
Tags: The codes used in HTML.
Uniform Resource Locator (URL): The "address" of a web page (e.g. http://www.sfsu.edu).
Upload: To put files onto a server.
Web site: A file or set of files available on the World Wide Web, usually a group of related web pages.
WSIWYG: "What you see is what you get," usually in reference to an HTML editor. The idea is that what you see on the screen as you're creating a web page is what the reader will see after you publish it on the Web.
World Wide Web: The "web" is made up of a collection of documents (web pages) which are viewable by browsers. The web is only a part of the Internet.

Equipment/Applications

SimpleText (Mac), Notepad (PC), and/or a special HTML editor (e.g. Netscape Composer, BBEdit, Dreamweaver)
Netscape, Internet Explorer or other Browser
Connection to a web server via Fetch (Mac), WS_FTP (PC), Yahoo! Geocities, etc.
Prepared Graphics and Content
Storyboard

Be aware of information about copyrights! In general, copyrighted material may be used if:

• It is being used in an academic class, and nowhere else;
• Only parts of a work, and not the whole work, are used (for instance, only one picture from a book);
• The source is always cited, even if the work is only used in a presentation;
• The item is used spontaneously (as in a class assignment) and not continuously (as in courseware: request permission for this).

Creating a Web Page

One way to write a web page is to create a document in HyperText Markup Language (HTML). You'll write a regular text file, add special formatting tags (that's the HTML), and save your new file. Then a browser can read your document and interpret it. Your page will be displayed using the default settings and preferences for that copy of the browser.

It's true that HTML tags will specify the placement and formatting of items on the page to the browser. However, you have limited control over how your document will look, for a number of reasons. First, different browsers interpret HTML in slightly different ways. There are some browsers, like Netscape, which are very "robust" -- they can accept a large range of HTML tags. Other browsers are less flexible and only accept and interpret a subset of the tags available to you. Another factor that influences how your pages will look is the set of rules that a browser must follow for placing text and images on a page.

The Tags in HTML

Almost every set of tags in HTML has an "open" and a "close" tag. There are a few exceptions, but for the most part, tags are opened before the item to be formatted, and closed after it. Tags are enclosed in pointed brackets, < and >. To open a tag, simply type the name of the tag in the brackets, <HTML>. To close a tag, use a slash inside the bracket before the name of the tag, </HTML>.

Creating Your First Document

We'll progress step-by-step to create a document from scratch. First we'll write the document as text, and then we'll use HTML tags to apply the proper formatting.

1. Write some text for your page.

• Launch SimpleText. HTML editing can be done in any word processor, the simpler the better. If you are using Microsoft Word or WordPerfect, there will be formatting codes in the document which are invisible to you, but which will confuse the browser. If you must use a high-end word processor, save as Text Only when you save your document.

• Type some text for your page. For example, type a short course description including a course title, your name, a description of the course, and a list of links. (NOTE: This text is a "placeholder" for this activity--you can go back later and change any of the content.)

ESL 101:  Introduction to ESL

Instructor: Your Name Here
Email: userid@yahoo.com
San Francisco State University

This course will cover the basic skills every student should have 
when communicating with others in English.

Class Resources:
About the Instructor
Assignments
Grades
Lecture Notes
Related Links
Student Projects

• Create a folder/directory on your floppy disk called "Website." Save your file in that folder, naming the file index.html. NOTE: "index.html" is commonly used across servers as the default homepage for a website.
  
  

2. View your page in Netscape Communicator.

• Launch Netscape Communicator. From the File Menu, select "Open" and then "Page in Navigator." Find index.html from your floppy disk in the dialog box and click Open.

• Your file will appear in Netscape, but it will not be formatted.
  
  

3. Make the course name into a header.

• Insert the tags for a level one header around the text of your name as shown:

  <H1>ESL 101:  Introduction to ESL</H1>
  

• There are six preset headers that you may use. Level one is the largest, and level six is the smallest. You may substitute any number from 2-6 in place of the 1 if you wish.

• Save the file index.html. In Netscape, click on the "Reload" button to see the change you have made.
  
  

• Insert the tags for the bold attribute around some of the text as shown:

<B>Instructor: Your Name Here</B>

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

5. Correct the line spacing of the file.

• Add tags for double spacing and for forcing a new line where appropriate. Use the Paragraph tag <P> for double spacing, and the Line Break tag <BR> for single spacing. These tags have no "close tag" counterparts.
  

<H1>ESL 101:  Introduction to ESL</H1>

<B>Instructor: Your Name Here</B><BR>
Email: userid@yahoo.com<BR>
San Francisco State University

<P>

This course will cover the basic skills every student should have
when communicating with others in English.

<P>

Class Resources:<BR>
About the Instructor
Assignments
Grades
Lecture Notes
Related Links
Student Projects

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

6. Create a bullet list in your document.

• Create the list itself by inserting the list tags, <UL> and </UL> around the text that will be your list.
  
  
• Define each bullet with the List Item tag, <LI>. This tag has no "close tag" counterpart.
  

  Class Resources:<BR>
  <UL>
  <LI>About the Instructor
  <LI>Assignments
  <LI>Grades
  <LI>Lecture Notes
  <LI>Related Links
  <LI>Student Projects
  </UL>
  

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

7. Add a Horizontal Rule to separate parts of your page.

• Insert the Horizontal Rule line tag <HR> to set off the bulleted list. This tag has no "close tag" counterpart.
  

  <H1>ESL 101:  Introduction to ESL</H1>
  
  <B>Instructor: Your Name Here</B><BR>
  Email: userid@yahoo.com
  San Francisco State University
  <P>
  This course will cover the basic skills every student should have
  when communicating with others in English.
  <P>
  <HR>
  Class Resources:<BR>
  <UL>
  <LI>About the Instructor
  <LI>Assignments
  <LI>Grades
  <LI>Lecture Notes
  <LI>Related Links
  <LI>Student Projects
  </UL>
  

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

8. Center the title on the page.

• Insert the center tags around the text you wish to center, as shown:

<CENTER><H1>ESL 101:  Introduction to ESL</H1></CENTER>

• Note that when tags are nested, they open and close in reverse order.
  
  
• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

9. Add anchor tags that will allow you to link to other documents.

• When the link is to another web site or remote place, use an "absolute" URL in your tag, like this: <A HREF="http://www.sfsu.edu/">

<A HREF="http://www.sfsu.edu">San Francisco State University</A>

• When the other document is one you created, and have stored in the same folder, you can use a "relative" link which just lists the file name, like this: <A HREF="syllabus.html">
  

  Class Resources:<BR>
  <UL>
  <LI><A HREF="bio.html">About the Instructor</A>
  <LI>Assignments
  <LI>Grades
  <LI>Lecture Notes
  <LI>Related Links
  <LI>Student Projects
  </UL>
  

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

10. Add an email link so viewers can send you email.

• The email anchor tag is similar to a regular anchor tag. Simply replace http: with mailto: and add your email address, as shown:
  
  

Email: <A HREF="mailto:userid@yahoo.com">userid@yahoo.com</A>

• Open and close your document with the <HTML> and </HTML> tags.
  
  
• Define the Head and Body sections with the appropriate tags.
  
  
• Use the Title tags to give a page title to your document.
  

  <HTML>
  <HEAD>
  <TITLE>Your Name Here: San Francisco State University</TITLE>
  </HEAD>
  <BODY>
  <CENTER><H1>ESL 101:  Introduction to ESL</H1></CENTER>
  
  <B>Instructor: Your Name Here</B><BR>
  Email: <A HREF="mailto:userid@yahoo.com">userid@yahoo.com</A>
  San Francisco State University<BR>
  <P>
  This course will cover the basic skills every student should have 
  when communicating with others in English.
  <P>
  <HR>
  Class Resources:<BR>
  <UL>
  <LI><A HREF="bio.html">About the Instructor</A>
  <LI>Assignments
  <LI>Grades
  <LI>Lecture Notes
  <LI>Related Links
  <LI>Student Projects
  </UL>
  </BODY>
  </HTML>
  

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

12. Add a graphic to your document.

• Use a graphic you already have, or copy one from a free clip art site (or other source from which you have permission). To copy a graphic from the Web using Netscape, point your mouse at the image you want. Hold down the mouse until you see a menu pop up. Select "Save this image as ..." and save a copy of the image to your disk. (NOTE: If using a PC, use the right mouse button.)
  
  
• Use the Image tag to specify which graphic to use. The graphic must be in the GIF or JPEG format, and must be stored in the same folder as your web page ("index.html").
  
  <CENTER> <IMG SRC="724_logo.gif"> <H1>ESL 101: Introduction to ESL</H1> </CENTER>

• Save the file. In Netscape, click on the "Reload" button to see the change you have made.
  
  

13. The Final File

<HTML>
<HEAD>
<TITLE>Your Name Here:  San Francisco State University</TITLE>
</HEAD>
<BODY>
<CENTER><IMG SRC="724_logo.gif"><H1>ESL 101:  Introduction to ESL</H1></CENTER>
<B>Instructor: Your Name Here</B><BR>
Email: <A HREF="mailto:userid@yahoo.com">userid@yahoo.com</A>
San Francisco State University<BR>
<P>
This course will cover the basic skills every student should have 
when communicating with others in English.
<P>
<HR>
Class Resources:<BR>
<UL>
<LI><A HREF="bio.html">About the Instructor</A>
<LI>Assignments
<LI>Grades
<LI>Lecture Notes
<LI>Related Links
<LI>Student Projects
</UL>
</BODY>
</HTML>

To put background colors on your pages, use the HTML tag:

<BODY bgcolor="#hex-code-goes-here">

For example, the way to make a white background is this:

<BODY bgcolor="#FFFFFF">

because the hex code for white is #FFFFFF.

To find hex color codes, check the back cover of the Castro (recommended) book, or follow these URLS:

• Browser-Safe Colors (Castro)
• Hex Color Codes

 

For even more help on writing HTML and designing Web pages, visit Frizzy's "Web Design Resources" page of links to lots and lots of HTML, WWW and graphics resources:

• http://fog.ccsf.org/~kfrizler/webdesign.html