Lab 0: Static HTML, Intro to the Wiki, Tools, and Favicon

Goals

After the lab, you should know how to

1. install Firefox plugins
2. create pages and update the wiki
3. change your password in the Wiki
4. write simple HTML files
5. use the Web Developer plugin to validate HTML and links
6. create and use favicons

Objective: Setting Up Tools

Firefox has built-in developer tools. There are some other tools that are useful as well. Install add-ons for Web Developer's Toolbox. Specifically:

• Install Firebug plug-in for Firefox. Again, allow Firefox to download plugins from this site.
• Web Developer plug-in for Firefox. If Firefox gives you a warning, change your permissions to allow installations from the site. Try to install again. Restart Firefox

Feel free to add more plugins and try them out. They'll make more sense as we move forward.

Objective: Update the Wiki (10 pts)

Throughout this semester, you're going to create pages on the wiki for documentation of the project. We want to make sure that the wiki is set up correctly and that you have a general idea of how to use it.

• Open the wiki
• Navigate to the "Test Wiki Permissions" page.
• Click on "your" red link on the page. The topic should not exist.
• Login to the application. (If you didn't already have an account, your login and password should have been emailed to your W&L account.)
• If you haven't already, change your password so that it's easy to remember. Click on "Update profile" in the menu towards the top of the page, in the upper right. Enter your new password and confirm your current password and hit "Save".
• Click the "Create this page" link at the top left.
• Use the editor to add an appropriate heading for the page and click "Save". You will now see the page you created.
• Go back to the "Test Wiki Permissions" page. The link for your page should now be blue. Follow the link you created.

If you find good resources that you want others to know about, update the "Resources" page with links to them.

Objective: Creating your own HTML pages

For this objective, you will create your own web pages.

Style note: All web pages that you create in this class must have descriptive headings, link text, and text.

Making your Home Page (15 pts)

In a Web browser, go to http://www.cs.wlu.edu/~yourusername. What do you see? (Answers will vary.)

If you already have a web page:

• Review your home page and make any updates you feel appropriate. You should at least update the dates on your pages and cover everything that is in the else (e.g., descriptive header, title, an image, CSS link).
• You may want to practice your skills if it's been awhile since you edited your web page.

1. Copy the example.css, example.html, and example.jpg files from /csdept/local/courses/cs335/handouts/lab0 into your public_html directory.
2. Point your browser at the location: http://www.cs.wlu.edu/~yourusername/ Now, what do you see?
3. Copy example.html into a file named index.html. Now, point your browser to the location: http://www.cs.wlu.edu/~yourusername/ What do you see?
4. Copy example.css into a file named yourname.css.
5. In a terminal, go to your public_html directory, and open index.html in jedit or your favorite text editor.
6. Edit the file so that the title and the top-level heading say "<Your Name>'s Home Page". Save the file. Reload the page in the browser... How cool is that?
7. Modify the CSS link so that it uses yourname.css.
8. Next, add an image to your web page. Find an image from the web. Save the image into the public_html directory. Change the image tag in your web page to display this image.
9. Update the information at the bottom of the page as well, to give yourself credit for your work.

Feel free to add more. This is your web page, after all! At the least, you must have done the above.

Creating Your Home Page for CS335 (40 pts)

You're going to create your own home page for CS335. One purpose of the page is to link to submissions for some of your assignments.

1. In your public_html directory, create a directory named cs335
2. Create an index.html file in the cs335 directory. (You can use one of the example files as a template.)
3. This page should contain:
   • a main heading and title for the page
   • a link (as in the stylesheet link, not the anchor link) to your copy of the CSS stylesheet in the parent directory
   • a link to the CS335 course page
   • a link to the CS335 wiki page
   • a link to the CS335 page of another student in the class
   • a heading for these links
   • a heading for your submissions for assignments
   • at the bottom of your page, under a horizontal rule, create a link to your home page
   • a comment that lists you as the author
   • meta elements for keywords and description (see metaexample page or slides for examples)
4. You may want to bookmark the above course-related links while you're creating this web page.
5. Modify your "main" home page with a link to your cs335 page.

Validate Your Web Page

1. Validate that your cs335 page adheres to the specification by using the Web Developer plugin. Select "Tools" in the top-bar and select "Validate HTML". If your HTML is not valid, fix the HTML.
2. Validate that your cs335 page has valid links using the Web Developer plugin, under the "Tools" icon. If your links are not valid, fix them.

Objective: Creating a Favicon (10 pts)

Add a favicon to your main web page. You can either create a favicon from an image or create your own using Linux's kIconEdit tool or use favicon.cc. If you make your own image, view it at 100% to see how it will look in the browser. For best results, the size of the icon should be 16x16 pixels and the image format should be .ico or .png.

Grading (75 pts)

Due by midnight tonight.

• Wiki Updates: 10 pts
• Home Page: 15 pts
• CS335 Home Page, Validated: 40 pts
• Favicon: 10 pts