The goal of this assignment is to have built a basic home page for yourself by the end of the class period today that you can build on and enhance over the next few days and throughout the semester.. 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. Did you notice how I made links to various sections of this page?  You'll learn how to do that below.

First off, make sure that you have created space for your homepage on VU's servers.

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 programming 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 online tutorials from Webmonkey.com and HTML.net to learn the basics.

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

2. Now take a look at the HTML Cheat Sheet and print it out or bookmark it for future reference.

3. Do the tutorials on html.net for Lesson 4 Create Your First Web Site,  Lesson 6: A few more elements, Lesson 7 Attributes, Lesson 8 Links, Lesson 9 Images.  Finish up with the tutorial Aligning text and images with div tags on Webmonkey.  Later you may want to complete some of the other tutorials on html.net or browse Webmonkey for more advanced tips.

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.

• First create a workspace on your H drive from which you will upload your site to the web. 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 (including pictures) for your web site in this directory. You can create a subdirectory called images for your pictures to keep things a bit more organized if you wish. 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.) Generally you should save all pages in your web site using one word names without spaces and with the extension .html. Pages named index.html automatically load when the user types just the name of the directory that your web site is in.
• Be sure to save as you go along.
• Open Notepad and give your page a head (with a title) and a body. Review Intro to HTML for instructions.
• 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 the content for your homepage. You have freedom to include whatever you want (within reason and VU's acceptable use policies). For a standard homepage you should include a description for yourself and you might address some of the following questions:. Where are you from? What year in school are you? What are your interests? What is your favorite place in the whole world?  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.
• As you add to your page you can see what it looks like by saving your file and opening it up in a web browser.  Within the web browser you can see your html code in Firefox by opening the View Menu and selecting "Page Source".
• Include a link to the web site for this class.
• (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. Provide a short annotation for each site explaining what is there.
• Insert a picture and have some of your text wrap around it. I have provided a few pictures that you can use. 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.
• Create a section on your home page for links to assignments for this class. You can call it Geography of Cyberspace Assignments. Alternatively you may create a separate page for assignments and then link to that page from your homepage. Since you don't have any assignments yet you can, if you wish, create a self referential link to your homepage. As the semester progresses you will add links to assignments that you hand in via a web page.
• 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 space 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 Firefox 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. 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.
• When you are done, send me an e-mail so that I can take a look at your home page. Include the address of your homepage.
• Your initial homepage is due one week from today. Throughout the semester you should work to improve and add to your homepage. At the end of the semester your web page (or by then web site) will again be evaluated. I'll be looking to see how you have improved your web design skills throughout the semester as well as for any required elements/assignments added to your site as the semester progresses. What you ultimately do with your web site is up to you, but I do expect to see you work on it throughout the semester as your skills improve. See the grading rubric for some general guidance on what is expected of a good web page for this class. See also the Design Hints and Tips below.
• 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 Firefox or IE to see how a page was created.

Additional Notes on HTML Editors

Most likely you will not be doing your HTML coding for this course by hand but will 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 yet, but I encourage you to explore on your own. Open it up and play around with it to your heart's content.

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.

First of all, Webmonkey and html.net both have tons more advice for you if you have questions about how to do something or want to learn some advanced skills. You might want to explore CSS. 

Since you don't want people waiting for their web pages to download, 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 on a slower home DSL or even dial up connection, 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." If you are really ambitious you can learn how to use CSS to position elements on your page. There's more information on HTML.net on creating tables.

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 mélange 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.