CPSC 1030 – Web Development I
Lab2: [45 marks] HTML Basics
Objectives
Learn how to create simple HTML web pages.
Learn to use description lists, unordered lists, and ordered lists.
Insert hyperlinks to text.
Format web pages.
Preparation
Read Chapter 2 of the textbook.
Create a new folder named Lab2 under your CPSC1030\Labs folder. Save all your
work from this lab inside the folder Lab2.
Get familiar with NotePad++, SciTE or other text editors for creating web pages.
Notes on adding a run command to Notepad++
Click Run, then Run…
Click browse to find the program you want to use to run your code, for
example Google chrome
Add "$(FULL_CURRENT_PATH)" to the end of the program name after a
space.
Click Save…, then enter the Command name you want to use, for
example Chrome.
Click OK.
What to do
1. [15 marks] Do Website Case Study: JavaJam Coffee Bar from Chapter 2 of the
textbook.
Note: Create a new folder called javajam inside the folder Lab2 for this website.
2. [15 marks] Create a personal website:
a. Create a new folder called personal inside the folder Lab2
b. Your personal website will contain the following two pages: index.html
(not home.html) and contact.html
c. Use the four HTML5 structural elements (header, nav, main, and footer) to
structure the body section of both pages.
d. Your home page (index.html) is about yourself. Name the title of your
home page as YourName’s Home Page. Replace YourName with your
name.
e. Add a good heading to the header section.
f. The nav section contains the two links to the two pages of your website.
g. In the main section
i. Use a short paragraph to give yourself a brief introduction. Add a
good heading to your introduction.
ii. Use a list (a description list, an unordered list, or an ordered list) to
list all the courses you are currently taking. Add a good heading to
the course list.
iii. Use another list to list your favorite websites. Insert a hyperlink to
each of your favorite websites. Add a good heading to the list of
favorite websites.
h. The footer section contains the following small italic text.
Copyright © About YourName. All Rights Reserved.
Note: Replace YourName above with your name.
i. The contact page contains your contact information. The structure of the
contact page should be similar to that of the home page. They should have
the same header section, the same nav section, and the same footer section.
In the main section of the contact page, add a good heading and a list to
include your contact information.
j. Test your website.
3. [15 marks] Do Website Case Study: Pacific Trails Resort from Chapter 2 of the
textbook.
Note: Create a new folder called pacific inside the folder Lab2 for this website.
What to hand in
Zip your Lab2 folder and upload it to D2L.
When to hand in
By 11:59pm, Tuesday, September 19, 2023.