Scribd
Upload
65 views5 pages

Practical 1: HTML Basics: Preparation

This document provides instructions for a practical assignment on HTML basics. Students are asked to create a simple webpage about themselves using Atom text editor. They will learn to add common HTML elements like headings, paragraphs, images and links. The document guides students through setting up folders, creating an HTML file, and viewing it in a browser. It also introduces using the browser's inspector tool to debug webpages.

Uploaded by

Oh Zhe Hao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 views5 pages

Practical 1: HTML Basics: Preparation

This document provides instructions for a practical assignment on HTML basics. Students are asked to create a simple webpage about themselves using Atom text editor. They will learn to add common HTML elements like headings, paragraphs, images and links. The document guides students through setting up folders, creating an HTML file, and viewing it in a browser. It also introduces using the browser's inspector tool to debug webpages.

Uploaded by

Oh Zhe Hao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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 studyRecord.png 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 exercise1.html 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 exercise1.html 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 https://encrypted-tbn1.gstatic.com/images?


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

You might also like