Class Days
4 HTML Lab

Class 4 (Lab Session 1): Create your personal homepage

About this hybrid class/lab session

Before you get started, I wanted to make sure that you are aware of a couple of things.

Ensuring filenames are correct

HTML is case sensitive, so because of this, I would advise you to:

  1. Stick to having all of your files be lower-case
  2. Use _ or - instead of spaces for your filenames
    • Spaces require special characters like %20 in any URL filename, which makes the URL look weird
      • and we often forget to make this change in any file links that we have
  3. Use VS Code's inline suggestion editor as you are typing out the filenames to correctly select a file
    • This avoids any potential misspellings of filenames or why a picture or other object would not show up.

Installing a Keymap Extension in VSCode

VSCode and pretty much every other proper Coding software out there recognizes the importance of key bindings and allows you to install other keymaps that bind to your favorite keyboard shortcuts in other editors.

Feel free to install whatever keyboard shortcuts you like. If you don't have a preferred list of keyboard shortcuts and you want to follow along with what I'm doing, you can install the eclipse keyboard shortcut extension (opens in a new tab) so that you can use the same keybindings that I use and try them out when you see them in the videos.

The use of 127.0.0.1

The IP Address 127.0.0.1 refers to your own computer. That does not link you to any other machine, so when you see me use that or localhost, understand that that is only working or referring to my own computer on my own machine. This also means that you should not have that IP address in your HTML code for later. Otherwise, if you try to validate a web page with that as an IP address, you will get errors.

Make sure that you follow the workflow from Lab 0

This is especially important if you are using multiple computers. Do not push or connect to your own repo, but rather the repo from comp127. The personal repo is specifically to allow us to upload the work to our ISP, so that we can actually have the URL that we can give to others. We are doing this more complex workflow to mirror what happens in industry and follow best practices there.

Learn about HTML 5

HTML 5 is a newer standard that came out that was meant to give HTML some lively additions and support, mostly for multimedia. You may still encounter some older material out there that does not go through this information as closely.

This lecture video (opens in a new tab) will explain more of the features that were introduced with HTML 5.

The video also goes over additional information that is important to know about different media formats.

Instructions

Oh, and one of the course requirements is that you need to finish a term project. The first thing to do is whether you will work alone or with a team, but you will not get to pick your team. We will talk more about this in the coming days.

3 Basic HTML5 CSS