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

Goals

After the lab, you should know how to

create pages and update the wiki
change your password in the wiki
write simple, valid HTML files
validate your HTML files
create and use favicons

Lab Notes

Links are bold and when you hover over them, you'll see a gold background to them. (I don't know if it's necessary to mention that in this class; it is an issue in the intro class.)
If you have questions later, check out the Lab 0 FAQ.

Objective: Browser and Its Tools

Firefox (and other browsers) has built-in developer tools. We will tend to use Mozilla Firefox because Mozilla is a not-for-profit company. You are welcome to use other browsers, but you should get to know the Firefox tools in this course.

Objective: Review Unix Commands

Review common Unix commands, since I will assume your knowledge of using them in the terminal.

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 Spring 2019 "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. If you have images, you must include the alt attribute.

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.)

Copy example.css, example.html, and example.jpg from /csdept/courses/cs335/handouts/lab0 into your public_html directory.

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. No need to do much, though; we'll work with this page more tomorrow.

else:

Point your browser at the location: http://www.cs.wlu.edu/~yourusername/ Now, what do you see?
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?
Copy example.css into a file named yourname.css.
In a terminal, go to your public_html directory, and open index.html in jedit or your favorite text editor.
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?
Modify the CSS link so that it uses yourname.css.
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.
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. (We'll do more to this page tomorrow.)

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.

In your public_html directory, create a directory named cs335
Create an index.html file in the cs335 directory. (You can use one of the example files or your home page as a template.)
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 the student to the right of you (or someone else in the class). If you are against the wall, link to the leftmost person in the row behind you. If you're in the back right corner, link to the person in the front left of the room.
- 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)
You may want to bookmark the above course-related links while you're creating this web page.
Update your "main" home page so that it has a link to your cs335 page.

Validate Your Web Page

Open a new tab to the W3C Markup Validation Service
Validate that your cs335 page adheres to the specification by entering the URI to your page into the textfield and click "Check". If your HTML is not valid, fix the HTML.
Validate that your cs335 page has valid links using the W3C Link Checker. 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 (search in applications) or use favicon.cc. (Or find your own service.) 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.

Beyond favicons, there are also app or touch icons (e.g., those icons on your smart phone). If you'd like to know more, see The 2019 Guide to FavIcons for Nearly Everyone and Every Browser

Grading (75 pts)

Due by 11:59 p.m. tonight.

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