Skip to main content.

Lab 1: HTML5, Web Tools, and Favicon

Page Contents:

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.

Objective: Review Unix Commands

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

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 git

Like you did in the last lab, you will need to set up your account with git on the web server:

Configure Git for your computer (recall these commands only need to be done once for each computer you want to use git on)-- make sure to replace the information as appropriate 

	  git config --global user.name "YOUR NAME"
	  git config --global user.email "YOURUSERID@mail.wlu.edu"

So you don't need to enter your credentials in every time, you can use git's credential helper to store your credentials. Note that this will store your credentials in plain text, so anyone who has access to your account could view your credentials.
git config --global credential.helper store

Setting up your cs335 directory

This directory will be where you will put stuff 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.

Cloning the HTML Lab Repository

  1. Accept the assignment.
  2. Clone the git repository. You should now see the directory html-lab-yourgithubusername in your cs335 directory if you view it from the command line or from the browser.
  3. If you want to work separately from the CS lab machines and not use ssh, clone the repository on your personal machine.

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 https://cs.wlu.edu/~yourusername. What do you see? (Answers will vary.)

If you already have a web page:

else:

  1. In your git repository, copy example.html into home.html. Add home.html into your repository, commit the file, and push.
  2. Go back to your public_html directory, run the command--adjusting as necessary; use tab-completion to reduce the number of typos-- ln -s cs335/html-lab-yourgithubusername/home.html index.html
    This command is creating a symbolic link from ~yourusername/index.html to the home.html file in your git repository.
  3. Point your browser at the location: https://cs.wlu.edu/~yourusername/ Now, what do you see?
  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. You are editting home.html file because it is linked from the index.html file.

    If you want to work remotely, clone your repository and work on the home.html file on your personal machine. View the file in the browser, locally, on your machine. Whenever you want, commit and push the file. Then, on the CS web server, pull the repository. Then, the repositories are synched up between the CS lab machine and your machine. View the web page in the browser and make sure the page looks like you intended.

    When you start up again, you can open home.html in the git repository or open index.html in the public_html directory in emacs.

  6. Edit the file so that it uses your username in two places. Update your username where it says WLUUSERNAME with your W&L username. Update the spot that says GITHUBUSERNAME with your GitHub username. Leave the punctuation, etc. the same.
  7. Save the file. Reload the page in the browser... How cool is that?
  8. Edit the file so that the title and the top-level heading say "<Your Name>'s Home Page".
  9. Next, add an image to your web page. Find an image from the web. Save the image into the git repository directory and add the image to the repository. Change the image tag in your web page to display this image. Since we're using the symbolic link so the page is available in your git repository and from public_html, make sure you use the absolute path to the image rather than the relative path.

    If you want to save an image in the repository on the CS web server, 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 directory.
    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.

  10. Update the information at the bottom of the page as well, to give yourself credit for your work.
  11. Make sure your files are in git. It's probably easiest to go into the repository directory to run the git commands.

    While putting your updated files into your repository is a good practice, you will not be graded on the contents of your repository -- only on what I see in the web browser when I go to your web page.

This isn't pretty or fancy. Just wait.

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 cs335.html file in your git repository. (You can use one of the example files or the given example.html to get you started.)
  2. Add this file to your repository. Commit and push it.
  3. From your cs335 directory, run ln -s your-git-repo-dir/cs335.html index.html

    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.

  4. 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. If you are in the room and next to the right-side 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 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
    • meta elements for keywords and description about your page (see metaexample page or slides for examples)
  5. You may want to bookmark the above course-related links while you're creating this web page.
  6. Update your "main" home page so that it has a link to your cs335 page.

Make sure your files are in the git repository, but you will not be graded on the contents in the repository--only what I can see on the web.

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 git repository directory. (You can name it something besides the default. Don't include spaces in the name.) Add the file to your git repository, commit, and push it. Then, on the web server, pull the repository.

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