CEA: HTML 1, Creating a Basic Web Page

HTML 1 Course, Center for Electronic Art

LESSON 1: CREATING A BASIC WEB PAGE

This is the handout for the first class session of HTML 1 offered at the Center for Electronic Art in San Francisco. 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.

Vocabulary

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.cea.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.

Resources/Materials

Equipment/Applications

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

Copyright Restrictions

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).

Remember that simply modifying a work does not protect you from infringing on copyright!

Procedure

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.

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 description of your job objective, skills and experience. Feel free to be inventive.

My Resume/Portfolio
Full Name
Email: userid@cea.edu
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
Find out more about me:
Education
Professional Experience
Skills
Certification, licenses & training
References
Additional info

Save your file in a folder/directory on your own disk. Name the folder "public," and name the file index.html. Save "index.html" into "public." If you are in a lab, you should not save the file on the hard disk.

2. View your page in Netscape Communicator.

Launch Netscape Communicator. From the File Menu, select "Open ... Page in Navigator." Find index.html 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>My Resume/Portfolio</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.

4. Make some text in your paragraph bold.

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

<BOLD>Your Name Here</BOLD>
or simply
<B>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>My Resume/Portfolio</H1>

<BOLD>Your Name Here</BOLD><BR>
Email: userid@cea.edu
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
Find out more about me:<BR>
Education
Professional Experience
Skills
Certification, Licenses & Training
References
Additional Info

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.


Find out more about me:<BR>
<UL>
<LI>Education
<LI>Professional Experience
<LI>Skills
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</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>My Resume/Portfolio</H1>

<BOLD>Your Name Here</BOLD><BR>
Email: userid@cea.edu
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
Find out more about me:<BR>
<UL>
<LI>Education
<LI>Professional Experience
<LI>Skills
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</UL>

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

8. Center the main heading on the page.

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

<CENTER><H1>My Resume/Portfolio</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 other document is in the same folder, you can use a "relative" tag which just lists the file name, like this: <A HREF="skills.html">

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


Required Readings:<BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</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@cea.edu">userid@cea.edu</A>

11. Add the final tags required for a proper HTML document.

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. Remember that whatever text is in the title of your page will appear as the bookmark in a user's browser.

<HTML>
<HEAD>
<TITLE>Your Name Here: Resume/Portfolio</TITLE>
</HEAD>
<BODY>
<CENTER><H1>My Resume/Portfolio</H1></CENTER>

<BOLD>Your Name Here</BOLD><BR>
Email: <A HREF="mailto:userid@cea.edu">userid@cea.edu</A>
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
Find out more about me:<BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</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 the Image tag to specify which graphic to use. The graphic must be in the GIF or JPEG format. Photos are typically JPEG format, and graphics GIF. The image should be in the same folder as your file, or in a folder called "images." We are going to copy this graphic from the CEA homepage. Go to http://www.cea.edu and point at the CEA logo in the upper left corner. Hold down the mouse and a small menu will pop up. Select "Save this image as ..." and name the file "cea.jpg."

Use this code if you save the file into your "public" folder:
<CENTER>
<IMG SRC="cea.jpg">
<H1>My Resume/Portfolio</H1>
</CENTER>

Use this code if you save the file into a folder called "images" within your "public" folder:
<CENTER>
<IMG SRC="images/cea.jpg">
<H1>My Resume/Portfolio</H1>
</CENTER>

Also, be sure to always include alternative text for every image in your website, using the ALT tag. Some browsers do not support images at all, especially those for blind or visually-impaired users. Rather, they rely on textual descriptions to convey the idea of the photo or graphic. Using the example above, "Center for Electronic Art" would make a better alternative text description than, say, "Logo."

<CENTER>
<IMG SRC="cea.jpg" ALT="Center for Electronic Art">
<H1>My Resume/Portfolio</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:  Resume/Portfolio</TITLE>
</HEAD>
<BODY>
<CENTER><IMG SRC="cea.gif" ALT="Center for Electronic Art"><H1>My Resume/Portfolio</H1></CENTER>
<BOLD>Your Name Here</BOLD><BR>
Email: <A HREF = "mailto:userid@cea.edu">userid@cea.edu</A>
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
Find out more about me:<BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</UL>
</BODY>
</HTML>

Preparation for Next Lesson:

Read Castro book

Complete Assignment 1: Storyboard

Gather content for online resume

details in course syllabus