Skip to main content.

Lab 1: HTML5, Web Tools, and Favicon

Goals

After the lab, you should know how to

  1. write simple, valid HTML files
  2. validate your HTML files
  3. create and use favicons

Notes about Lab Assignment

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.

Any browser will let you view a web page's source. Viewing the source is sometimes a useful way to see errors in your HTML--unclosed tags will be colored red.

Update your browsers if you see a message that they need to be updated.

Resources

I reference these two sites frequently to get help on HTML:

Objective: Setting up your account on the CS web server

For this objective, you need to be on the CS web server.

Setting up your cs335 directory

This directory will be where you will put your content for this course.

  1. Within your public_html directory, create a cs335 directory: mkdir cs335
    and then go into that directory.
  2. Within the browser, try to view the directory, i.e., point your browser at https://cs.wlu.edu/~yourusername/cs335 . What do you see? It is likely an empty directory.

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.

If you already use VS Code: instead of working directly on the web server, you could use VS Code with the Remote - SSH extension.

Making your Home Page (15 pts)

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

Back in the terminal, confirm that you're in the public_html directory.

If you already have a web page:

else:

  1. Use the wget command to retrieve starter files:
    wget https://cs.wlu.edu/~sprenkles/cs335/labs/html_lab/example.html
    wget https://cs.wlu.edu/~sprenkles/cs335/labs/html_lab/example.css
    wget https://cs.wlu.edu/~sprenkles/cs335/labs/html_lab/example.png
  2. Point your browser at the location: https://cs.wlu.edu/~yourusername/ Now, what do you see?
  3. Copy example.html as the new file index.html
  4. Run emacs index.html & (Alternatively, if you are comfortable with vim, you could use that as your text editor.)

    Possible problems:

    • If emacs opens with a "split" screen, click on the screen you want (likely the top one), then hit Ctrl+x 1. (Note that you are no longer holding down control when you hit 1.)
    • emacs may open by default on a "scratch" file. Under the "Buffers" menu, select index.html
  5. Edit the file so that it uses your username in two places, updating your username where it says WLUUSERNAME with your W&L username. Leave the punctuation, etc. the same.
  6. Save the file. Reload the page in the browser... How cool is that?
  7. Edit the file so that the title and the top-level heading say "<Your Name>'s Home Page".
  8. Next, add an image to your web page. Find an image from the web. Save the image into your public_html directory. Change the image tag in your web page to display this image.

    You can use the wget command, e.g.,
    wget url_to_image
    This will download the image and save it, by its original name, in the current directory (where you ran the command).
    Rename the file using the mv command.

    If you want your image to be a different size, you can add the width attribute to the img tag and specify how many pixels wide you want it to be.

  9. Update the information at the bottom of the page as well, to give yourself credit for your work.

This isn't pretty or fancy. Give us some more time.

Interactive Textbook

In the textbook, read chapter 2 and do the problems and quiz.

Creating Your Home Page for CS335 (40 pts)

Now, 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. Create a new directory cs335 directory in your public_html directory.
  2. Within that new directory, create a new index.html file. (You can use one of the example files or the given example.html to get you started.)

    You should now be able to view this web page in the web browser from https://cs.wlu.edu/~yourusername/cs335

    Adapt the instructions above about editting this file -- either on the CS web server or on your personal machine.

  3. This page should contain:
    • a main heading and title for the page
    • a link to the CS335 course page
    • a link to the CS335 page of the student to the right of you. The link text should include the person's full name.

      The goal is to make a "ring" of web pages around the classroom.

      Imagine (or actually) reaching out your right hand to the next person. If you're on the "outside" of the pod (towards the center of the room), that person is probably across from you. If you're the right-most person in your pod against the wall, then that person is probably the leftmost person in the pod to your right. I know this sounds complicated to explain in words, but it shouldn't be too difficult to locate that person.

    • a link to your home page
    • a heading for these links
    • a heading for your submissions for assignments
    • a comment that states your favorite color, as a fun(!) Easter egg. Please include the word "color" in the comment so I can find it easily.
    • a main section for the main content of your page (which is most of it)
    • meta elements for keywords and description about your page (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. Update your "main" home page so that it has a link to your cs335 page.

Your browser may be helping you by caching files and not fetching it again, even though you pressed the reload button. Typically, that would be helpful, right? Why bother spending that time/resources fetching a file that hasn't changed? But, you know it did change, so you can force the reload.

To force the reload (and skip the cache), I usually just hit Command/Control-Shift-R. You can also press Shift and the click the Reload button.

Objective: Creating a Favicon (10 pts)

Add a favicon to your main (not cs335) web page. You can use favicon.ico or use favicon.cc or create your own using Linux's kIconEdit tool (search in Applications). (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.

Save the favicon in your public_html directory. You may need to scp the file from your computer to the web server. (You can name it something besides the default. Don't include spaces in the name.)

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 2022 Guide to FavIcons for Nearly Everyone and Every Browser

Objective: Validate Your Web Page

  1. Open a new tab to the W3C Markup Validation Service
  2. 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.
  3. Validate that your cs335 page has valid links using the W3C Link Checker. If your links are not valid, fix them.

Objective: Updating Your Web Page

  1. Back on the web server, open up your cs335 index page.
  2. In the appropriate section, add a link to the HTML validator and a link to the link checker you just used for fast reference later.
  3. Use those tools to make sure your page is still valid.

Grading (65 pts)

Due by 11:59 p.m. tonight.