Web Development
Practical 1: HTML Basics
Preparation:
1. You should have gone through the topic 1 HTML Basics module at
codecademy.
2. Review lecture slides: Introduction to HTML
3. While learning HTML at codeacademy, you have been using its internal
editor. You will experience how to create a web page using a text editor
(Atom)
4. Your learning outcomes checklist:
Be able to use Atom to create a simple webpage with:
Proper HTML document structure
Title <title>
Headings <h1> - <h6>
Paragraphs <p>
Images <img>
Text and images hyperlinks <a>
List
Be able to use Chrome to view webpage and inspect element.
Part A: Try it out! (30 mins)
1. Create a WebDev folder in your home drive.
2. Create a sub-folder named Practical under WebDev folder
(if you have done your tutorial, most likely you already have the folders
created)
3. Create a sub-folder name Week1 under Practical.
4. Download the image file [Link] from BlackBoard into this
folder.
5. Start-up Atom.
6. Under File -> Add Project Folder, select the Week1 folder you have
created.
IT1152 / IT1552 / IT1652 / IT1852 / IT1952 Page 1 of 5
Web Development
7. At the top menu bar, choose File -> New File.
8. Enter the following HTML code. Use the “autocomplete-html” package to
aid you. The package is not yet installed, install it under File -> Settings ->
Install.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>MyProfile - Me </title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
9. At the top menu
bar, choose File -> Save As. Save the file as [Link] under the
folder Week1
10. Check that the package “open-in-browser” is installed under File ->
Settings -> Install. If it is not, install it.
IT1152 / IT1552 / IT1652 / IT1852 / IT1952 Page 2 of 5
Web Development
11. In the Project Pane, right-click and choose “Open in Browser” and launch
the web page [Link] using a browser of your choice (e.g. launch
in Chrome).
12. Making use of what you have learnt, create the following web page.
url for the image is [Link]
q=tbn:ANd9GcS9DZMGYOlTA4P5mUIaV4lVxJbDEWgQgXhTeH26Wfjn9Y
W1wDx5cw
When user click at NYP, lead the user to NYP website.
When user click at the book (studyRecord image), lead the user to
codecademy.
13. Right-click at your web page to get the following pop-up menu, select
Inspect element:
IT1152 / IT1552 / IT1652 / IT1852 / IT1952 Page 3 of 5
Web Development
14. Modify the content of <h1>. Your modification will be immediately
reflected.
You have just experienced the usage of Chrome inspector. Your
modification will not be saved into your file. Inspector will help you to
debug your web page. You may use it more often when task get more
complicated.
IT1152 / IT1552 / IT1652 / IT1852 / IT1952 Page 4 of 5
Web Development
Part B: Check and learn it together (30mins)
Show your work to your tutor. Your team may be selected to present the answer.
Part C: Challenge Me (20mins)
1. Create a web page about yourself.
2. You web page should have
Proper HTML document structure
Title <title>
Headings
Paragraphs <p>
Images <img>
Text and images hyperlinks <a>
List
Part D: Correct Me (20mins)
1. Exchange work and mark the answers for your friends
Checked by :
2. Zip your work (Part C) and submit to BB.
IT1152 / IT1552 / IT1652 / IT1852 / IT1952 Page 5 of 5