The goal of this assignment is to have built a basic home page for yourself by the end of the class period today. In order to do that you will need to learn a little bit about HTML. Below is the assignment for learning Basic HTML, followed by some additional notes on HTML editors, and design hints and tips. I have provided an example of a basic page to look at as you create your own page. See also the grading rubric on a separate page for the standards by which your web page will be graded.

Basic HTML

HTML is what makes the web go round. It is very easy to learn and to master because contrary to what you might think there is no complex computer programing involved (though if you really get into things it can become complex). By the next time we meet you should be up and running with your own basic home page. Once you master the basics, you can start to use on of the many HTML editors that take some of the tedium out of HTML coding. (Note: if you already have a home page, you should spend this time making a home page specifically for this class that satisfied the requirements listed on the grading rubric, and helping your fellow students.)

We will be using an online tutorial from Webmonkey.com to learn the basics.

1. Read Intro to HTML on Webmonkey. This will cover the basic rules you need to get started.

2. Follow the "learn more" link at the end of Intro to HTML to HTML Teaching Tool. At this point it might be a good idea to follow the HTML Cheat Sheet link and print it or bookmark it out for future reference.

3. Do the tutorials for View Source, Paragraphs, Headlines, Links, Mailtos, Comment tags, Bold/Italics, Font color, Font size, Background image, Background color, Line breaks, Aligning text, Adding/Aligning Images, Unordered Lists and wrapping text. If you have time you may want to complete some of the other tutorials on this page.

4. Now take a stab at creating your own home page. Use the notepad application for now. This is just a simple text editor. Later you can begin to explore a program specifically designed for creating web sites like Dreamweaver.

• Give your page a head and a body. Review Intro to HTML for instructions.
• Be sure to save as you go along. Create a directory for you web site in your personal space in your home directory on the H: drive. Call it home page, or web site, wwwdocs, or something similar. You'll save all the files for your web site in this directory. Save your document as index.html in your web directory along with any images that you have included on your page (or if you already have a homepage by that name, save it as something else.) Pages named index.html automatically load when the user types just the name of the directory that your web site is in.
• Give your page a nifty background color or background image. Make sure that the color provides enough contrast so that your text is visible or that your image is relatively small in file size.
• Create a title for your page using headline tags.
• Create a description for yourself. You might address some of the following questions but you don't have to. Where are you from? What year in school are you? What are your interests? What is your favorite place in the whole world? What is your experience with computers? Include some information so that your professor and the other students in the class can get to know you a bit better or include some information on a topic of interest to you. Remember the whole world will be able to see this, so don't include anything you don't want the whole world to know.
• (Optional) Include a mailto link with your e-mail address. This is optional since placing your e-mail address out on the web tends to attract spam. If you don't mind dealing with spam, then go ahead.
• Create an unordered list of at least three links to other web sites of interest to you. Any three sites will do, but you should probably link to something fairly tasteful.
• Insert a picture and have some of your text wrap around it. You can use some of the pictures that I took the other day. Various Valpo logos are available as well. Include alternate text for the image for those browsing using screen readers or who are browsing with images turned off. View the source of the basic page example and look for the image code to see how alternate text is created.
• Include the required disclaimer in very small type at the bottom of your page "The content, views, opinions and positions expressed on these personal pages are strictly and exclusively those of the page author, and not of Valparaiso University. Comments and reactions to these pages should be directed to the page authors directly." We are using their server spaces so it is probably a good idea to play by their rules.
• Be sure to save your home page along with any images that you have used.
• Check to see how your homepage looks in a web browser. Open Mozilla or IE and use "open file" under the file menu to navigate to your page and open it up.
• Once you have your home page looking the way you want it to or at least looking mostly like you want it to, you'll need to upload it to the web server using FTP. FTP stands for File Transfer Protocol. EIS has some basic instructions for doing this. We will see if we can figure out exactly what we need to do in the lab. Be sure to try uploading before you leave from class today.
• Check the grading rubric and make modifications to your page until you have created a great home page. Then send your professor an e-mail and ask him to grade it.

For inspiration, you can take a look at my home page, or any one of those produced by Valpo students, faculty, and staff. You can also choose view source from the View menu in Mozilla or IE to see how a page was created. When you are done, send me an e-mail so that I can take a look at your home page.

Additional Notes on HTML Editors

Most likely you will not be doing your HTML coding for this course by hand but will rather use an HTML Editor. The best one to start exploring for this class is Dreamweaver. The biggest advantage of Dreamweaver is that it lets you edit using a WYSIWYG (What You See Is What You Get) display of your page. You can also look at the raw HTML code as well. Managing and uploading your site is a bit easier because you can FTP files through the program rather than doing it using a separate FTP program. We will not cover how to use Dreamweaver, but I encourage (and really expect) you to explore on your own. Open it up and play around with it to your heart's content. EIS has some helpful instructions (see the links down toward the bottom of the page) for using Dreamweaver to create and manage your web site on campus. EIS offers classes on using Dreamweaver and web page design.

An additional convenient way to create HTML is to save documents created in Microsoft Word as HTML documents. This is an easy way to convert word processed document into HTML but it is not necessarily as easy as something like Dreamweaver for creating web pages. Choose the filtered HTML option to get a web site that looks a bit like something you can understand and edit later. There are other filters available on the net that will also convert word processing documents into HTML.

Design Hints and Tips

Sure you can now make a home page, but can you make one that looks good and functions well? Here are some hints and tips.

Since some people still surf the web using slow modem connections, make sure that the images you put on your web site are as small in file size as possible without loosing too much quality. gif file compression is good for line art and logos, while jpg file compression is good for photographic images. The dimensions of an image can still be large even if the file size is small. Ideally your web page will download in no more than 30 seconds, and if possible quicker. Photoshop has a Save for Web utility (look under File) that can help you create images with smaller file sizes.

The way your web page looks will vary depending upon the type of browser, the available fonts, and the screen size that your viewer has. Use fonts that most everyone has (Arial, Times Roman, Tahoma, Verdana) and don't make your web site layout too wide especially if you are designing on a large screen.

Busy backgrounds often make a web page hard to read. Stick to subtle patterns and muted colors. Use a dark background and light text or a light background and dark text.

Save underlines for links. If you use underline formatting in a web document then users invariably try to click on it.

You can use tables to control the layout of your web site. This is easiest to do in a program like Dreamweaver, but you can also attempt it "by hand."

Provide alternate text to provide a brief description of images on your site. Your viewer will see the text as the image loads and blind people using screen readers will be able to get the description of the image.

Remember your web site will be out there for the world to see. Making it look as professional as possible is to your advantage. Cluttering your page with a melange of miscellaneous graphics, lots of animated gifs, or other stuff might detract from the professionalism of your page. Hey even Hampsterdance is looking more professional these days.

This exercise has only covered the most basic aspects of HTML. There's more to learn including using style sheets to control formatting, creating forms, designing for accessibility and usability, and mastering the art of creating graphics for the web. Nevertheless, after today you should be able to impress your friends and family with your skill at creating a simple yet good looking web page.