Creating Your Web Page

Creating a Web page w/ a Text Editor

By the end of this Module, you need have created a website that includes:

· 2 internal pages and links to these pages

· 1 external link

· at least one image

· at least one word as image created in .psd (this step is NOT described here, but I trust you to figure it out J)

· a background color of your choosing

Getting Started

Following the steps below, create your page using HTML (Hyper Text Markup Language). Textedit, Text Edit, HTML editors (such as Dreamweaver and Frontpage), or most word-processing programs can be used. In this exercise, we will be using TextEdit, a program installed on all of the macs in the AML.

· On a Mac, open TextEdit (click on the “Start” icon at the left-hand bottom corner of your screen, pull up to “Programs,” then over to “Accessories,” and finally drag over to “Textedit.” The application should launch automatically). On a Mac, open BBEdit (application tree->HTML Editors->BBEdit Lite 6.1->BBEdit 6.1 for OSX).

· In the new document window, type the following:

<html>

<head>

<title>

Web Page of YOUR NAME

</title>

</head>

<body>

</body>

</html>

· Name the document “index.html” and save it in your studentwebsites folder.

NOTE: the reason why you’ve saved the document as “index.html” is because most server systems are set up to recognize a file called “index.html” (or .htm) as the default page for a Web site. Thus, when you eventually save these files on a server, the pages will be your index or main page—the first page that a user will come to when they type in your URL.

Viewing your web page

· Open up your Web browser (Firefox). These directions use images of Netscape (sorry, it’s an old handout) but it will apply to any browser.

· Click on “File” and select “Open” (or “Open Page”). The browser will ask you what file you want to open. Find the file in the studentwebsites folder and open it.

Editing your web page

Ready to make your web page a bit snazzier?

· Go to google and search for an image of your choosing OR choose an image already in your studentwebsites folder.

· Make sure this image is saved in the SAME FOLDER as your “index.html” file.

(NOTE: when you are downloading images for your own use, you may CHANGE the name they are saved under to something easier to remember. For example, if one of the images is named “mtu_smlogo.gif”, and you do not change the name, it will automatically be saves as “mtu_smlogo.gif”. However, you may change it to something else, like “mtu.gif”. Be sure to include the extension--“.gif” or “.jpg”--at the end of the file name.)

Now that you have the picture, it’s time to put it into your Web page.

· Go back into TextEdit (by clicking on the icon in your dock at the bottom of the screen).

NOTE: the ability to go back and forth between TextEdit and your web browser makes Web page creation much easier.

You may click back and forth like this, making changes and actually seeing them, until you are satisfied with your HTML document.

In textedit, edit your “index.html” so that it looks somewhat like this:

<html>

<head>

<title>

Web Page of YOUR NAME

</title>

</head>

</body>

</html>

**IMAGENAME=the exact name of your image, so puppies.jpg, or family.gif…etc.

(NOTE: Be sure to save this document as “index.html” replacing the old version of the “index.html” file. Also, the IMAGENAME should be whatever you named the image you saved.)

· Make the changes you wish to make in TextEdit and save your HTML document.

· Go back into Firefox and click on the “Reload” button on your toolbar to refresh the document and view the changes you just made.

NOTICE that you also changed the background color to pink. To change the background color, choose a web safe color from this chart:

http://www.webmonkey.com/reference/color_codes/

Editing your web page: making an external link

· Go back into TextEdit.

· Edit your “index.html” so that it looks like the following

(NOTE: the big change is the addition of the “a href” tag):

<html>

<head>

<title>

Web Page of YOUR NAME

</title>

</head>

<a href=”http://www.wsu.edu”>Washington State</a>

</body>

</html>

· After you have made your changes, select “File” and drag down to “Save” to replace the old version of your “index.html” with the new, updated version.

· In this example, “Washington State” would be underlined and would be the words a user would click on to go to the WSU Web Site. (NOTE: when making an external link, you do not have to create any new files. You merely have to type in the complete address—including http://--a user will connect to and the words they see to connect to that address.)

Editing your web page: making an internal link

In this example you will create an internal link, or a link to another document you’ve created. You can create the HTML tag (the link itself) first and then create the other document, or you can create the document first and then create the HTML tag (the link itself). In this example, we will first create the tag (link) and then create the new document.

· Edit your “index.html” so that it looks like the following. (NOTE: the big change is the addition of the “a href” tag):

<html>

<head>

<title>

Web Page of YOUR NAME

</title>

</head>

<a href=”http://www.wsu.edu”>Washington State</a>

<a href=”links.html”>My Favorite Web Resources</a>

</body>

</html>

· “My Favorite Web Resources” would be underlined and would be the words a user would click on to go to that page.

· For the link to work, you must also create a new document in TextEdit named “links.html”

· In Textedit, select “File” and drag down to “New.”

· In the new document window type the following:

<html>

<head>

<title>

Name’s Favorite Web Resources

</title>

</head>

<center>My Favorite Web Resources</center>

</body>

</html>

· After you have created the document, select “File” and click on “Save As…”. Name the document “links.html” and save it in the same place as your index.html.

fonts?

I’m hesitant to show you fonts, as Dreamweaver now treats fonts w/ style sheets, as we’ll discuss on Tuesday, BUT some people still use the old way, which I will show you below. FIRST, any font you use MUST BE AVAILABLE on someone else’s computer. This means that web safe fonts are few and far between, and often it’s best to either provide a list and/or stick with very basic fonts such as Times and Arial. Font sizes go from 1-7. Font colors come from the same list as the hex codes I gave you for background colors.

· To change a font on your website, do the following:

<html>

<head>

<title>

Web Page of YOUR NAME

</title>

</head>

<a href=”http://www.wsu.edu”>Washington State</a>

<a href=”links.html”>My Favorite Web Resources</a>

</body>

</html>

(NOTE: this font face signals to the browser that if they don’t have arial, it should go to verdana, if they don’t have verdana, it should to go geneva.)

Play for now with fonts, realizing that you’ll learn a new way on Tuesday BUT also realizing that this way DOES and WILL work just fine.

For more tips/ideas visit:

· http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/

· http://home.alphalink.com.au/~rhduncan/htmlguide/

· http://www.htmlgoodies.com/primers/html/article.php/3478131