What is HTML?
STEP 1- create a folder for this project.
Text Instructions:
  1. First, logon to your computer with your own username and password.
  2. Open the folder on your desktop with your name on it. - the your DOCUMENTS folder.
  3. Click on NEW FOLDER and name it Web Design
  4. Open that folder
  5. Again, click on NEW FOLDER and name it HTML1
  6. You will save ALL the work on this page in your HTML1 folder
STEP 2 - Create your home web page:
VIDEO Instructions: How to create and modify your first web page using HTML and Notepad
Test Instructions:
  1. Open notepad++ (go to: Start-->Accessories-->notepad++). If you don't have notepad++ just select notepad.
  2. Copy and paste the following HTML code that is in bold below:

<title> My first web page</title>

  1. Go to: File-->Save and save the file in your HTML1 folder exactly as: index.html (NO SPACES IN NAME!)
  2. Note: the home page file of any web site is ALWAYS named: INDEX
  3. Test the file in your browser: Go into your folder, and double-click on the index.html file. It should have saved as a Google icon if Chrome is your default browser.
How do we modify a web page?

  1. Open your index.html file in Notepad
  2. Do a search on HTML tags and use the reference to modify your page.
  3. Modify the index.html file. Replacing the text, so that when you save the changes and open the page in the browser, or refresh it, it says the following. Use HTML heading tags to change the size of the text on each line.


from <your full name> at




HTML3 - How do we change and add HTML tags to a page?
Goal: Use the following new HTML tags on your web page:
  1. center
  2. italic
  3. font
  4. image
Assignment Instructions:
  1. Using paragraph tags write the following four statements so that each statement is on its own line on your web page.
    1. Check out my first web page.
    2. I love web design!
    3. HTML is fun!
    4. HTML is getting easier and easier.
  2. Do the following to each statement. (Search for an information on each HTML tag to find out how to change your code in notepad. Make one change, save and refresh your page in the browser to see your changes.)
    1. Center the first statement
    2. Apply italic to the second one
    3. Change the font face of the third one to verdana and the size to 4
    4. Change the font color to any other color than black (use a hex color code instead of the color name).
  3. Add another paragraph of text to your page that says: I LOVE WEB SITE DESIGN!! Use the font tag to make it look different from all other text - your choice.
  4. Add this image to your page by right-clicking on it below and select File->Save Image As. Make sure you save it to the same folder your index.html file is in
. familyguy.jpg# Display this image on your web page (or another of your choice). Hint: search on "html image tag"
  1. This file name in your image tag's src attribute will be: "familyguy.jpg" Hint: this image file MUST be in the same folder as your index page or it will not be found and you will get a broken image on your page.
  2. Reminder: Make sure you add the image tag BEFORE the closing body tag </body> of the page.
  3. Save and test your changes in the browser.
Challenge: Make the text - HTML if really FUN! scroll across you page.
  1. So a search on: <marquee> code select:
  2. Copy and paste the marquee tag that scrolls across the page AND has a background color.
    1. Tell us who your best friend is.
    2. Do a search on "web hex colors". Select a light color.
    3. Use the hex color code (#xxxxxx) for that color and put it in the "bgcolor" tag attribute of the marquee tag.

HTML4 - How do we change the background of our web page?
  1. Use BODY tag attributes - bgcolor
  2. Use the hex color code to define the colr

Read about pixels and hex colors

Assignment Instructions:
To change the background color of your web page:
  1. Open your index page in Notepad and in your browser
  2. Do a search on: hex color codes and choose a hex code for a light color (Example: #dd44ff )
  3. In another browser tab, search on "HTML body tag", choose W3schools and READ the attributes.
  4. Find the <body> tag in your code. Add the bgcolor attribute in the opening tag. For Example: <Body bgcolor="#EF9999" >
  5. Save and test.
Easy challenge:
  1. Create a separate web page (For example: save under another name like index2.html) that contains a soft-colored patterned image as a background. Note: Use the index.html for the following exercises.

HTML5 - How do we create lists in HTML?
Goal: Use the following new HTML tags on your web page:
  1. ordered list
  2. unordered list customize the bullets - shape and color

Using the web site, do a search on HTML lists.
There are two types of lists:
  1. Ordered List: (a numbered list)
  • Unorder List: (a unnumbered list which is called a bullet list)

Assignment Instructions:
Add two different types of lists in your index.html page.
Create an unordered list (bullets) of your favorite music artists
  • your favorite artist1
  • your favorite artist2
  • your favorite artist3

DEFINE in an ordered list (numbered) defining these web terms:# default
  1. pixel
  2. acronym
  3. RGB
  4. web-safe color
Save and test as you go along.

For full credit - complete ALL of the following:
  1. Can you figure it out WITHOUT HELP from me?- Problem Solving Challenge (but not required): Modify the unordered list to display a square instead of a disc(the default). (Hint: use the web site, read, click on links and the try buttons to figure it out or do a search on "html unordered list types")
  2. Modify the ordered list to display A,B,C instead of 1,2,3. (Hint: use the web site, read, click on links and the try buttons to figure it out or do a search on "html ordered list types".
  3. Make the unordered list's bullets BOTH a different color

HTML6 - What is a Hyperlink and how can we customize link colors?
  1. create a hyperlink
  2. create an email link
  3. define a custom color for active links
  4. define a custom color for visited links

Assignment Instructions:
  1. SEARCH on "HTML hypertext link" to find the code. The HTML anchor element <a>......</a>, is used to define both hyperlinks and anchors. Use the site as a reference.
  2. ADD A LINK on your page to: so that when the user clicks on it, the page opens IN A NEW BROWSER WINDOW - the user SHOULD NOT LEAVE YOUR WEB PAGE. Your link text should read: Click here to go to - NOTE: For your link to work, the URL in the code MUST contain the entire address: inside quotes.
  3. ADD A LINK to a web site of your choice. The active link text on your web page should say: "Click here to go to one of my favorite sites".N A NEW BROWSER WINDOW - the user SHOULD NOT LEAVE YOUR WEB PAGE. Make sure the link works and
  4. ADD AN EMAIL LINK to your gmail address. The active link text on your page should say: Contact Me. The user should not see you email address on the page. HINT: Search "HTML email link" and use the code.
  5. MODIFY YOUR LINK COLORS - SEARCH on "HTML body tag". Visit the attributes table and body your body tag to customize the colors of your active and visited links.
DEFINE these words IN YOUR WEB PAGE using a numbered list:
  1. hyperlinks
  2. anchor tag
  3. relative link
  4. email link
  5. link rot
Extra Credit:
  • Create a anchor link on your web page. Put the link at the top of the page and have it link to text at the very bottom of the page.

WEB SITE USABILITY TIP: Link names should always be short and clear what they link to.