Englih 394
Fall 2000
"Writing (in) Cyberspace"


Using HTML for your Simple Web Page

 


To create a Simple Web page, type the following code:

<html>
<head>
<title>
<Type in the Title of your Web page here but be sure to remove the brackets >


</title>
</head>
<body bgcolor="#ffffff">
<CENTER>
<h1>
< type in the Title of your Web page here
but be sure to remove the brackets>


</h1><BR>
<h2>
<Type a Description of your Web page here
but be sure to remove the brackets>


</h2></CENTER><P>
<Type in your first paragraph here
but be sure to remove the brackets>


<P>
<Type another paragraph here
but be sure to remove the brackets>


<P>
<Type another paragraph here
but be sure to remove the brackets>


<P>
</body>
</html>

Click on FILE, then select SAVE. On the line that says, "SAVE AS" type index.html

 

Note: the .html tag is essential.
Use lower-case letters, with no spaces between characters.
(I suggest using lowercase letters for every page you create because it's easier to remember.)

 

This page now contains the HTML Source Code for your Web page. Be sure not to delete any of the brackets, like < or >, or any characters between them.

Remember: The file begins with a <HTML> tag, and ends with a </HTML> tag. These tags tell a Web browser to open the file as a Web page.

Tags begin with < and end with > and tell a Web browser how and where to display text and graphics.

What the codes mean:
.
<P> Creates a space between paragraphs. Add this tag at the end of each paragraph. No ending tag needed.

<BR> Creates a break between lines of text, without adding a space.

<CENTER> This tag shows where text should begin to appear centered on the Web page. The ending tag </CENTER> appears after the last word to be centered.

<h1>Text between these tags appear in large, bold type.</h1>
<h2>Text between these tags appear slightly smaller.</h2>
<h3>Use these tags for a smaller but bold type.
</h3>


Now that you've marked-up the bare bones page, here's how you add new features to your Web page, including E-mail links, text size, photos or graphics and changing colors of backgrounds and text.

Remember:
Tags begin with < and end with >
Tags also tell a Web browser how and where to display text and graphics.

Background Color:
To change the background color of your Web page, find the following tag in your HTML file. The six F's between # and " represent a WHITE background:

<body bgcolor="#FFFFFF">

Select a new color from the list below, and replace the F's with the color code:

000000  Black          FF0000 Red        0000FF  Dark Blue

99CCFF Light Blue      FF6600  Orange      #FFFF00 Yellow

00CC33 Green          CCCCCC Gray


Notice there are 6 characters between
# and "
Use zero or capital O. If you use a black background, specify a text color (below), as default black text won't show up.


Changing Text Colors:
If black text is desired, no font tags are necessary.
To change the color of text, add the following tags to your HTML file:

<font color ="FF0000">All text between the beginning and ending tags will appear RED.</font>

For other colors, refer to the Background Color list above, and type in the 6-digit color code between the quotation marks. Here's another example:

<font color ="FF6600">All text between these tags will appear Orange. Of  course, I could type anything else I wanted to between these tags </font>


More Tags...

<B>All text between these tags will appear in BOLD type.</B> 

<I>
All text between these tags will appear in italics.</I> 

<HR>
Creates a solid line. No ending tag needed.


Add a photo or graphic: Add the following tag to insert a graphic file into your Web page.

<IMG SRC="    ">

Inside the quotation marks, type in the name of the file and extension.
Example:
<IMG SRC="eslot.jpg">

Be sure to use the dot between file name and extension.
To add a graphic file like
.gif or .jpg


Add an E-mail link

<a href = "mailto:      ">                </a>
Type in an actual E-mail address between : and "
Type in a contact name after >

Example:
<a href="mailto:K.Heenan@asu.edu"> Katherine Heenan</a>

Notice there's a space between > and Katherine Heenan. Sometimes, you may have to add a space like this, if other text appears on the same line as the E-mail link.


To add a link to another Web page, add the following tag. My home page is used as an example:

<a href="http://www.public.asu.edu/~kheenan">Katherine Heenan's Homepage</A>

On a Web page, the only text that would appear is Katherine Heenan's Homepage.


GRAPHICS: While surfing the Web, you can click the right mouse button and save
a graphics file to disk. If you find a graphics file to use, save it to the same
directory, folder or disk as your HTML file(s).