Web1201 Lab1 HTML

Rev 1.
6
August, 2020
Lab 1: HTML
WEB1201: Web Fundamentals
1 Introduction
This lab is intended to get you accustomed to HTML editing using a text editor and to create a
HTML page using HTML elements.
2 Objectives
At the end of this lab, you should be able to:
1. Create a HTML page and render the file using a browser.

2. Describe and use the different HTML elements that can be used to create a HTML page.
3. Identify and use absolute and relative hyperlinks.
4. Describe the difference between an absolute and relative hyperlinks.
5. Identify and describe structural elements of a web page.
6. Able to create your own web page that consists of a basic navigational structure.
3 Pre-requisites
Before attempting this lab, you should:
1. Have completed Lab 0 on setting up your computer with the necessary tools.
4 Deliverables, timing and additional notes

The estimated time of completion for this lab is approximately four (4) hours. This does not
include the time you will need to answer the questions. You are to compile your work after
every lab - this includes all codes (and comments where necessary), documentation, completed
tasks and answered questions. You can use an online notebook or written notebook. This is
important for later revision purposes. You have to submit your work at the end of this lab.
5 Materials and Equipment

1. A computer with a web browser.
2. A fully-compliant PDF reader. The recommended software is Adobe Acrobat which you
can obtain from here..
3. A text editor (Visual Studio Code, Notepad++, Sublime, Vi, Vim, etc.). It is highly
recommended that you use a text editor that support syntax highlighting as it will make it
1
easier to work.
You can download Visual Studio Code for free from here.
Note: Instructions for what and how to download and install the software is documented
in Lab 0.
4. A W3C compliant web browser:
(a) Firefox Developer Edition (Portable version)
(b) Google Chrome (Portable version)
Do get accustomed to using these browsers and to use the developer tools within. If you
are using the lab computers, you will need to the portable version of these browsers. You
can refer to Lab 0: Lab Preparation on how you can setup your own machine to carry out
these labs.
5. Create a observation file. You will use this file to record your observations from the
experiments. Microsoft OneNote is recommended for this purpose but you are free to
choose your own platform/software. All submissions at the end are to be in PDF format.
Note
You should have a logbook as a place to record notes for labs. This will help you revise
and reflect on the work you have done in the lab. You can use your observation file for this
purpose.
2
6 Document Type Definition
• W3C recommends identifying the type of markup language used in a web page docu-
ment with the Document Type Definition (DTD) because multiple versions and types of
HTML and XHTML exist.
• The DTD identifies the version of HTML contained in your document.

Different document types support different HTML elements and you can find a chart here
https://www.w3schools.com/tags/ref_html_dtd.asp.
• The DTD statement, commonly called a doctype statement, is the first line of a web page
document. The DTD for HTML5 is:
<!DOCTYPE html>
Note
Case Sensitivity:
The HTML syntax in general is not case sensitive. Therefore it is not necessary for the
DOCTYPE to be in uppercase but this is typically how it is written. Do note that given
names like those for classes and ids are case sensitive. (We will look at classes and ids
when we look at CSS)
7 Web Page Template

Every single web page you create will include the DTD and the html, head, title, meta, and body
elements. A basic HTML5 web page template is as follows:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title> // The title of the page that appears on your browser tab
5 Page title
6 </title>
7 <meta charset="utf-8"> // meta always inside the <head> element
8 </head>
9
10 <body> // The main content of the web page
11 Your main content //The main content
12 </body>
13 </html>
3
Note:
• //Comments are NOT standard HTML. I have chosen to use the double forward-slash
for comments for compactness (as I am commenting a single line) rather than the default
HTML block comment which requires opening (). As
they are NON-standard for HTML, logically, do NOT type them into your code! I used it
just for my convenience and it is what is used to comment a line in PHP (and C++ which
PHP is based on). You will see this method of commenting used in other lab sheets.
If you want to include comments into your own code, use the standard HTML method for
adding comments as shown:
1 <!DOCTYPE html> 
2 <html lang="en">
3 <head>
4 <title> 
5 Page title
6 </title>
7 </head>
8 </html>
However, refrain from adding comments to every line as not every line requires an “ex-
planation” or “note” to know what the purpose of the line. HTML has fixed element
types and unlike programming which has custom variable/function names and unless
commented, may only make sense to the person who wrote it. The comments in this
example are unnecessary, except for the purpose of trying to explain what each line does
to you (whom I expect might be learning this for the first time).
• A basic template does NOT mean that all the elements shown are COMPULSORY. It is
what is commonly included. For responsive web, you will see an additional meta tag.
With the exception of the specific page title, the first seven lines will usually be the same on
every web page that you create. Review the code above and notice that the document type
definition statement has its own formatting and that the HTML tags all use lowercase letters1 .
You will be using this template over and over again as you go through the lab.
Task 1: Type out and save your template

In this task, you are going to create a template to reuse for your various webpages.
1. Using Notepad, Notepad++ or another text editor (Sublime, Atom, Vi, Vim, etc.) type
1
Depending on your browser, some can render pages with tags in uppercase letters but it is best to stick lower-
case letter for tags.
4
out the main components of a web page shown in Section 7 (without the comments!)
2. Save this template as: template.html.
Note: You do NOT need to submit this as it is for your own use.
Question(s) 1
1. If each element is starts and ends with the same tag name, can you name the
sections or the elements in this template?
Hint: Omitting the meta tag, you should have four.
8 The HTML Element

• The purpose of the html element is to indicate that the document is HTML formatted.
• The html element tells the browser how to interpret the document. The opening <html>
tag is placed on a line below the DTD.
• The closing </html> tag indicates the end of the web page and is placed after all other
HTML elements in the document.
8.1 Head, Title, Meta and Body Elements
8.1.1 Head Section
• Elements that are located in the head section include the title of the web page, meta tags
that describe the document (such as the character encoding used and information that
may be accessed by search engines), and references to scripts and styles. Many of these
features do not show directly on the web page.
• The head element contains the head section, which begins with the <head> tag and ends
with the </head> tag.
• The first element in the head section, the title element, configures the text that will appear
in the title bar of the browser window.
• The text between the <title> and </title> tags is called the title of the web page and
is accessed when web pages are bookmarked and printed. The title should be descriptive.
If the web page is for a business or organization, the title should include the name of the
organization or business.
• The meta element describes a characteristic of a web page, such as the character encoding.
Character encoding is the internal representation of letters, numbers, and symbols in a file
5
such as a web page or other file that is stored on a computer and may be transmitted over
the Internet.
8.1.2 Body Section
• The body section contains text and elements that display directly on the web page in the
browser window referred to as the browser viewport.
• The purpose of the body section is to configure the contents of the web page.
• The body element contains the body section, which begins with the <body> tag and
ends with the </body> tag. You will spend most of your time writing code in the body
of a web page. If you type text into the body section, it will appear directly on the web
page in the browser viewport.
Note
It is easiest and probably best to always type in the closing tag once you have typed in the
start tag. This way, you will not forget to have a closing tag and it will be in the correct
order (e.g. nested tags).
Later, you will encounter HTML elements that only have the start tag and not the end tag.
These are typically void elements which cannot have any content (but can have attributes).
Task 2: Creating your first web page

Using the template.html, you are going to modify the contents to create your first webpage.
1. To save your new HTML file, create a new folder or directory on your hard drive or
portable flash drive.
Name the folder or directory “Lab1”.
2. Using your text editor, modify the following:
(a) Page title: My First HTML5 Web page
(b) Body: Welcome to my first HTML5 web page.
You should end up with the following code:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>
5 My First HTML5 Web page
6 </title>
6
7 <meta charset="utf-8">
8 </head>
9
10 <body>
11 Welcome to my first HTML5 web page.
12 </body>
13 </html>
Explanation:
(a) Line 1: Declares the doctype.
(b) Line 2-13: The beginning and ending of the HTML code using the <html> ele-
ment.
The purpose of these tags is to indicate that the content between them makes up a
web page.
(c) Line 3-8: The head section is delimited by <head> and </head> tags and con-
tains a pair of title tags with the words “My First HTML5 Web page” in between,
along with a <meta> tag to indicate the character encoding.
(d) Line 10-12: The body section is delimited by <body> and </body> tags. The
words “Welcome to my first HTML5 web page.’ are typed on a line between the
body tags.
See Figure 1 for a screenshot of the code as it would appear in Notepad. You have just
created the source code for a web page document.
Figure 1: Screenshot of the HTML code typed out in Notepad.
7
Note
Spacing and Indentation:
Both spacing and indentations do not matter to the computer/browser but it will help
when you need edit your code. The sample codes here have been indented.
This means the code shown below is equivalent to what shown earlier.
1 <!DOCTYPE html><html lang="en"><head><title>My First
HTML5 Web page</title><meta charset="utf-8"></head><body
>Welcome to my first HTML5 web page.</body></html>
Look at how much more difficult it would be to edit this code!
3. Save your file as: index.html. To do this in Notepad:

(a) Go to menu bar.
(b) Click on File→Save/Save As (See Figure 2.
Figure 2: Screenshot accessing “Save” from the “File” menu.
(c) Select the earlier created folder or directory (See Figure 3: Step 1 ).
The file is going to be saved in that folder/directory.
(d) Type in the file name with the file extension (See Figure 3: Step 2 ).
A common file name for the home page of a website is index.html or index.htm. Web
pages use either a .htm or a .html file extension.
(e) Change the “Save As Type” to “All Files (*.*)” (See Figure 3: Step 3 ).
Changing the Save As Type allows you to save the text file with any extension. The
8
extensions help to identify the file type to the operating system or applications.
(f) Change/set the encoding to “UTF-8” (See Figure 3: Step 4 ).
(g) Click Save (See Figure 3: Step 5 ).
1 Set the save location
3 Change the “Save as Type”
2 Set the Filename and file extension

3 Change the “Save as Type” to All Files (*.*)
4 Set the Encoding Type 5 Click “Save”
Figure 3: Screenshot of saving the HTML code as a HTML file called index.html in Notepad.
4. Test your page.

There are several ways you can go about this:
(a) (In Windows) Double-click on the “index.html” file inside your folder or directory.
This will invoke the default browser to load your HTML file and display your page.
This is not always desirable as the default Windows browser is Microsoft Edge (or
Internet Explorer depending on the version of Windows you are running)
(b) (Note: This only works with installed versions of the web browsers unless you know
how to manually choose another program)
Right-click on the file and choose (from the context-menu) “Open with”. From here,
you will be given several options. If you have installed the browsers, they should
appear as options that can be used to open the file.
(c) Launch a browser. In Firefox, press the Alt key to bring up the menu bar. Go to
File→Open File. When the dialog box appears, select your index.html file. The
steps and the name of the menu items might differ slightly based on the browser
(and it’s version) you use.
(d) Enter the whole path to your HTML file e.g. C:\Lab1\index.html (assuming you
created the folder in Step 1 in the root of drive C:) into your web browser’s address
bar.
9
Question(s) 2
1. What do you see in the address bar after loading your file by pasting the path
to your file in the address bar?
2. What does it mean to append “file:///” in the address bar?
3. When you type into your address bar an address like www.google.com and load
it, do you see anything appended (or added) to what you typed in the address
bar? Why do you think this is so?
4. What does HTTP and HTTPS mean? Why do you think either one is appended
to your web address?
5. Describe the purpose of file extensions.
8.2 Heading Element
Figure 4: Screenshot of the six headings. Normal text was included as a size reference.
1. The Heading element as the name suggests is used to create headings on web pages.
2. Heading elements are organized into six levels: h1 through h6. The text contained within
a heading element is rendered as a “block” of text by the browser (i.e. the heading element
is a block element).
3. The size of the text is largest for <h1> (called the heading 1 tag) and smallest for <h6>
(called the heading 6 tag).
4. The text contained within <h4>, <h5>, and <h6> tags may be displayed smaller than
10
the default text size.
5. All text contained within heading tags is displayed with bold font weight. Figure 4 shows
a web page document with six levels of headings.
Task 3: Creating headings

1. Type in this code:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Heading example</title>
6 </head>
7 <body>
8 <h1>Heading Level 1</h1>
14 Normal text size
15 </body>
16 </html>
2. Save the file as: headings.html

3. Test your file in different browsers.
8.3 Paragraph Element
Paragraph elements are used to group sentences and sections of text together. Text that is con-
tained by <p> and </p> tags display as a “block” (referred to as block display) and will
appear with empty space above and below it. Figure 5 shows a web page document with a
paragraph after the first heading.
Task 4: Adding a paragraph

1. Using your earlier code, add in a paragraph to heading level 1 and change the title.
Your code should look something like this (the indentations do not matter to the computer,
it just makes it more readable)):
1 <!DOCTYPE html>
11
2 <html lang="en">
3 <head>
4 <title>Paragraph example</title>
6 </head>
7 <body>
9 <p>This is a sample pagaragraph. Heading tags can help to make your
pages more accessible and usable. It is good coding practing to use
heading tags to outline the structure of your web page content.</p>
15 Normal text size
16 </body>
17 </html>
2. Save the file as: paragraphs.html

3. Test your file.
4. Remove the paragraph tags.
Note: If you do not see any difference, try modifying the experiment by adding a few
more paragraphs within paragraph elements. After that, try removing the paragraph tags.
Learning point: When we use a single test condition (i.e. with a single paragraph) we
may not gather sufficient information to come to a correct conclusion.
5. Reload the page in different browsers. If you have closed the browsers (or tabs) just load
the file again.
6. Record and describe your observation. Save it in your observation file.
Question(s) 3
1. What is the purpose of using paragraphs?

2. What does “semantic” mean with regards to HTML?
Note: This might make more sense once we go into CSS.
12
Figure 5: Screenshot of a paragraph added to heading level 1.
8.4 Line Break Element
The line break element causes the browser to advance to the next line before displaying the next
element or portion of text on a web page. The line break tag is not coded as a pair of opening
and closing tags. It is a stand-alone, or void element, and is coded as <br>. Figure 6 shows a
web page document with a line break after the first sentence in the paragraph.
Task 5: Adding a line break

1. Using your earlier code, add in a line break tag after the first sentence.
(Note: For this, no sample code is given. Read the instructions and add in the appropriate
tags)
2. Change the title.
3. Save the file as: linebreak.html
4. Test your file.
5. Record and describe your observation in your observation file.
8.5 Blockquote
In addition to organizing text in paragraphs and headings, sometimes you need to add a quo-
tation to a web page. The blockquote element is used to display a block of quoted text in a
13
Figure 6: Screenshot of a adding a linebreak to the earlier paragraph.
special way—indented from both the left and right margins. A block of indented text begins
with a <blockquote> tag and ends with a </blockquote> tag. Figure 7 shows a web page
document with a heading, a paragraph, and a blockquote.
Figure 7: Screenshot of a blockquote environment on a web page.
Task 6: Adding a blockquote to your webpage.

1. Add in the blockquote code into the body of your document.
1 <h1>The Power of the Web</h1>
2 <p>
14
3 According to Tim Berners-Lee, the inventor of the World Wide Web, at http
://www.w3.org/WAI/:
4 </p>
5 <blockquote>
6 The power of the Web is in its universality. Access by everyone regardless of
disability is an essential aspect.
7 </blockquote>
2. Change the title appropriately.

3. Save the file as: blockquote.html
4. Test your file and compare it to the given example in Figure 7.
8.6 Phrase Elements
Phrase elements, sometimes referred to as logical style elements, indicate the context and mean-
ing of the text between the container tags. It is up to each browser to interpret that style. Phrase
elements are displayed right in line with the text (referred to as inline display) and can apply
to a section of text or even just a single character of text. For example, the <strong> element
indicates that the text associated with it has strong importance and should be displayed in a
“strong” manner in relation to normal text on the page. Table 1 lists common phrase elements
and examples of their use. Notice that some tags, such as <cite> and <dfn>, result in the
same type of display (italics) as the <em> tag in today’s browsers. These tags semantically
describe the text as a citation or definition, but the physical display is usually italics in both
cases.
Each phrase element is a container element, so an opening and a closing tag must be used. As
shown in Table 1, the <strong> element indicates that the text associated with it has “strong”
importance. As earlier mentioned, by indicating what text should be treated as “strong”, What
you have done is given the text “meaning” or semantic. How it is interpreted then is left to the
device or software interpreting the file. Usually, the browser (or other user agent) will display
<strong> text in bold font type. A screen reader, such as JAWS or Window-Eyes, might
interpret <strong> text to indicate that the text should be more strongly spoken.
Example of this is:

1 <p>
2 Call for a free quote for your web development needs:
3 <strong>888.555.5555</strong>
4 </p>
15
Table 1: List of Phrase Elements
Element Example Usage

<abbr> WIPO Identifies text as an abbreviation; configure the title attribute
with the full name
<b> bold text Text that has no extra importance, but is styled in bold font
by usage and convention
<cite> cite text Identifies a citation or reference; usually displayed in italics
<code> code text Identifies program code samples; usually a fixed-space font
<dfn> dfn text Identifies a definition of a word or term; usually displayed
in italics
<em> emphasized text Causes text to be emphasized in relation to other text; usu-
ally displayed in italics
<i> italicized text Text that has no extra importance, but is styled in italics by
usage and convention
<kbd> kbd text Identifies user text to be typed; usually a fixed-space font
<mark> mark text Text that is highlighted in order to be easily referenced
<samp> samp text Shows program sample output; usually a fixed-space font
<small> small text Legal disclaimers and notices (“fine print”) displayed in
small font size
<strong> strong text Strong importance; causes text to stand out from surround-
ing text; usually displayed in bold
<sub> sub text Displays a subscript as small text below the baseline
<sup> sup text Displays a superscript as small text above the baseline
<var> var text Identifies and displays a variable or program output; usually
displayed in italics
8.7 List Elements
Lists are used on web pages to organize information. When writing for the Web, headings, short
paragraphs, and lists can make your page more clear and easy to read. HTML can be used to
create three (3) types of list which we will look at, namely:
1. Ordered lists
2. Unordered lists
3. Description lists
All lists are rendered as block display with an empty space above and below. This section
focuses on the ordered list, which displays a numbering or lettering system to itemize the infor-
mation contained in the list.
8.7.1 Ordered Lists
Ordered lists can be organized by the use of numerals (the default), uppercase letters, lowercase
letters, uppercase Roman numerals, and lowercase Roman numerals. See Figure 8 for a sample
16
ordered list.
Figure 8: Screenshot of an ordered list.
Ordered lists begin with an <ol> tag and end with an </ol> tag. Each list item begins with
an <li> tag and ends with an </li> tag. The code to configure the heading and ordered list
shown in Figure 8 is as follows:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Ordered List example</title>
6 </head>
7 <body>
8 <h1>My Favourite Colours</h1>
9 <ol>
10 <li>Blue</li>
11 <li>Teal</li>
12 <li>Red</li>
13 </ol>
14 </body>
15 </html>
Task 7: Creating an ordered list

1. Create your ordered list using the sample code given.
2. Save the file as: ordered.html
3. Load your file in a browser.
4. Observe and record the output.
17
8.7.1.1 The Type, Start, and Reversed Attributes
Now, you may want to change some of the attributes of the list, such as what type of numbering
is used (upper and lowercase letters or roman numerals). The attributes are:
1. Type: Determines the symbol used for the list. By default, it will use Arabic numerals.
Other options:
• Arabic numerals (1, 2, 3, 4, etc.), type="1"
• Uppercase letters (A, B, C, D, etc.), type="A"
• Lowercase letters (a, b, c, d, etc.), type="a"
• Roman numerals, uppercase (I, II, III, IV, V, etc.), type="I"
• Roman numerals, lowercase (i, ii, iii, iv, v, vi, etc.), type="i"
To use this you type in <ol type=“1|a|A|i|I”> (You can only specify one type).
2. Start: Determines where the list begins from. By default, it will being with 1, A, a, I or i,
but you can change that with the “start” attribute. For example:
<ol start=‘‘10’’> means the counter will start from 10.
3. Reversed: Configures the list to display them in descending order. By default, it is in

ascending order. Just add in the attribute reversed into the ol start tag.
Combine multiple options by separating them:

1 <ol type="a" start="2" reversed>
2 <li>...</li>
3 </ol>
Task 8: Modifying your ordered list

1. From what has been described, modify your ordered list to change the following:
• Change the list to lowercase Roman numerals.
• Change the list to start from 100 in a descending order.
2. Save the file as: modifiedOrdered.html
3. Test your file in different browsers. (This is important!)
8.7.2 Unordered Lists
An unordered list displays a bullet, or list marker, before each entry in the list. This bullet can be
one of several types: disc (the default), square, and circle. See Figure 9 for a sample unordered
list.
Unordered lists begin with a <ul> tag and end with a </ul> tag. Each list item begins with
18
Figure 9: Screenshot of an unordered list.
an <li> tag and ends with an </li> tag. The code to configure the heading and unordered list
is as shown:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Unordered List example</title>
6 </head>
7 <body>
8 <h1>My Favourite Colours</h1>
9 <ul>
10 <li>Blue</li>
11 <li>Teal</li>
12 <li>Red</li>
13 </ul>
14 </body>
15 </html>
Task 9: Creating and modifying an unordered list

1. Create an unordered list. You can use the given sample code as a guide.
2. Save the file as: unordered.html
3. Test your file.
4. Now we are going to modify the list by changing the bullet types.
(Note: For this, I will not be telling you how to do it but from the previous task, you
would have guessed that it is using attributes)
5. Change the bullet type to a square.
6. Save the file (as the same name.)
(Note: If you modified the same file as before and saved it with the same name, hitting
19
the refresh button on your browser (typically F5 or Function Key 5) will show you the
changes made)
7. Test your file.
8.7.3 Description Lists
HTML5 introduces a new element name, description list, to replace the definition list element
(used in XHTML and earlier versions of HTML). A description list is useful for organizing
terms and their descriptions. The terms stand out, and their descriptions can be as long as needed
to convey your message. Each term begins on its own line at the margin. Each description
begins on its own line and is indented. Description lists are also handy for organizing Frequently
Asked Questions (FAQs) and their answers. See Figure 10 for an example of a web page that
uses a description list. Description lists begin with the <dl> tag and end with the </dl> tag.
Each term or name in the list begins with the <dt> tag and ends with the </dt> tag. Each
description begins with the <dd> tag and ends with the </dd> tag.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Description List</title>
6 </head>
7 <body>
8 <h1>Sample Description List</h1>
9 <dl>
10 <dt>TCP</dt>
11 <dd>Transmission Control Protocol is a method (protocol) used along with
the Internet Protocol (IP) to send data in the form of message units,
called packets, between computers over the Internet.</dd>
12 <dt>IP</dt>
13 <dd>Internet Protocol (IP) is the mthod or protocol by which data is sent
from one ocmputer to another on the Internet Each computer on the
internet is uniquely identified by tan IP address.</dd>
14 <dt>FTP</dt>
15 <dd>File Transfer Protocol is a protocol used to exchange files between
computers on the Internet.</dd>
16 <dt>HTTP</dt>
17 <dd>Hypertext Tranfer Protocol is the protocol used for exchanging text,
graphics images, sound, video and other multimedia files on the web.</dd
>
18 </dl>
20
19 </body>
20 </html>
Figure 10: Screenshot of a description list.
Task 10: Creating a Description List

1. Create a description list using the given sample code as a guide.
2. Save the file as: descriptionList.html
3. Test your file.
4. Try resizing your browser window and notice how the word wrap on the description text
changes.
8.8 Special Characters
In order to use special symbols such as quotation marks, the greater-than sign (>), the less-than
sign (<), and the copyright symbol (©) in your web page document, you need to use special
characters, sometimes called entity characters (or HTML entities). For example, if you wanted
to include a copyright line on your page as follows:
© Copyright 2019 My Company. All rights reserved.
Use the special character © to display the copyright symbol, as shown in the following
code:
1 © Copyright 2019 My Company. All rights reserved.
21
Another useful special character is , which stands for nonbreaking space. You may have
noticed that web browsers treat multiple spaces as a single space. If you need a small number
of spaces in your text, you may use multiple times to indicate multiple blank spaces.
Character Description Entity name Entity number
" Quotation mark "

’ Right single quotation mark &requo;
© Copyright symbol © ©
™ Trademark ™
& Ampersand & &
Empty space Nonbreaking space
– Long dash (Em dash) — —
| Vertical Bar | | |
You can find more symbols from:
1. https://dev.w3.org/html5/html-author/charref
2. https://www.freeformatter.com/html-entities.html
Note
A HTML entity is a piece of text (“string”) that begins with an ampersand (&) and ends
with a semicolon (;). Entities are frequently used to display reserved characters (which
would otherwise be interpreted as HTML code), and invisible characters (like non-breaking
spaces). You can also use them in place of other characters that are difficult to type with a
standard keyboard.
Also, while not using the Special Characters might appear to look correct on the browser
you are testing on, it may not always be the case for all browsers or devices. This is
particularly true for special characters that you can type out with your keyboard like the
quotation mark ("). Therefore, it is best to always use the special characters to maximize
display compatibility with different browsers and platforms.
Task 11: Using special characters

1. Create a web page that look like that shown in Figure 11.
(a) Ensure the title of the webpage is “Web Design Steps”.
(b) The heading “Web Design Steps” is a level heading which you can declare using the
22
Figure 11: Screenshot of a webpage incorporating heading, list, bold and italics elements.
h1 tag.
(c) The first line of each list item needs to stand out from the rest. You can use either
the strong or b tag.
(d) The last bullet item’s description uses a “long dash”.
(e) Add the copyright information with the small tag and put it in its own paragraph
element.
2. Save the file as: design.html
3. Test the web page.
Task 12: Using special characters and block quotes

This particular task will require you to be able to open your HTML file in your mobile phone
web browser. This can be achieved several ways but perhaps the two easiest ways would be:
• Put the HTML file on a cloud storage and open that file with your mobile device’s web
browser
• Send the file as an attachment to a message to yourself (this can be done using certain
instant messaging programs, e.g. Telegram and Signal)
23
In this task, you will write out code that corresponds to the conditions set in this table:
special characters
used not used
in blockquote 1 2
sans blockquote 3 4
The conditions in this table can be summarized as follows (the numbers in the table corresponds
to the number in the summary):
1. Write a piece of text with special characters represented by their entity name or number
within a blockquote in a HTML document.
2. Write a piece of text with special characters WITHOUT using their entity name or number
within a blockquote in a HTML document.
This just means typing out the special characters using the keyboard.
3. Write a piece of text with special characters represented by their entity name or number
NOT within a blockquote (e.g. in a Paragraph element) in a HTML document.
4. Write a piece of text with special characters WITHOUT using their entity name or number
NOT within a blockquote (.e.g in a Paragraph element) in a HTML document.
Note
Please ensure you study the table and how it maps out to the different conditions. In later
lab sheets as well as your projects you are expected to come up with BOTH your own table
and conditions.
Do you see any relation to Questions 1.3 from Lab 0?
What you need to do:
1. Create codes for the four conditions outlined (Note: You will end up with 4 files).
You can use this sample text (but feel free to modify it): @JohnLee My favourite book is
“Pride&Prejudice.”
2. Test the files under these conditions:
24
desktop browser mobile browser
Condition firefox chrome chrome/safari
1 Result 1 Result 2 Result 3

3. Record your observation in your observation file.
4. Describe your observation.
5. Discuss your observation.
6. What can you conclude from your experiment?
8.9 Anchor Element
Use the anchor element to specify a hyperlink, often referred to as a link, to another web page,
a location with the same page or file that you want to display. Each anchor element begins
with an <a> tag and ends with a </a> tag. The opening and closing anchor tags surround
the text to click to perform the hyperlink. Use the href attribute to configure the hyperlink
reference, which identifies the name and location of the file to access. Figure 12 shows a web
page document with an anchor tag that configures a hyperlink to this book’s website, https:
//webdevfoundations.net.
Figure 12: Screenshot of a webpage with an anchor tag. (Note: Most built-in browser CSS will
highlight hyperlinks but this can be changed (sometimes even for malicious purposes) as we
look into CSS in other labs).
Task 13: Adding anchors

1. Create a webpage using the anchor element with the href attribute to create a hyperlink to
the book’s website. This is an absolute path.
Put this code into the body section of the HTML document.
1 <a href="https://webdevfoundations.net">Web Development & Design
Foundation</a>
25
2. Give a title to the page.
3. Save the file as: anchor.html
4. Test the web page.
8.9.1 Absolute vs Relative Hyperlinks
There are two types of hyperlinks you must be aware of when using the anchor tag with the
href attribute.
8.9.1.1 Absolute
An absolute hyperlink indicates the absolute location of a resource on the Web, i.e. the links do
not change regardless where the HTML file is located. In our labs, you will need to reference
both external resources located and accessible somewhere on the web using the HTTP, HTTPS,
FTP, etc. protocol and internal resources located on your drives. Using a path like:
1 // An example of absolute referencing to a file on a Windows based computer
2 c:\mywebsite\htdocs\myimagefile.png
Use absolute hyperlinks when you need to link to resources on other websites. The href value
for an absolute hyperlink to the home page of a website includes the http:// or https:// protocol
and the domain name. You can also link to other sorts of services or servers such as FTP servers
whose links will start with ftp:// instead.
Note that if we want to access a web page other than the home page on the book’s website, we
could also include a specific folder name and file name. For example, the following anchor tag
configures an absolute hyperlink for a file named chapter1.html located in a folder named 9e on
this book’s website:
1 <a href=‘‘https://bookwebsite.com/9e/chapter1.html’’>Link to Chapter 1</a>
8.9.1.2 Relative
A relative hyperlink is one that is in relation to where the current HTML document is related.
For instance, if you were to link to another HTML file in the same folder or directory, you just
need to type:
1 <a href=‘‘anotherfile.html’’>Link</a>
If it is in a folder or directory at the same level as the current HTML file, then the tag will be:
1 <a href=‘‘./directory/anotherfile.html’’>Link</a>
26
Thus, relative links are useful when you need to link to web pages within your site. The href
value for a relative hyperlink does not begin with the http:// or https:// and does not include a
domain name. For a relative hyperlink, the href value will contain only the file name or file
name and folder or directory of the web page you want to display.
8.10 Structural Elements
Up to this point, you should be familiar with the following:
1. what is contained inside the document <head>

2. the different building blocks most commonly used to structure different items of content
inside the <body>
In this section, we will look at the overall structure of the HTML content, and what distinct
sections the page contains.
Before you read any further, go and have a look at some of your favourite websites. They will
have vastly differing content, functionality, and look and feel, but they will all have common
structural elements. There are very few sites that don’t at least loosely follow this pattern:
1. Header (or masthead) at the top of the page, usually containing the top level heading of
the page, and/or a company logo. This is the big bold statement at the top of the page that
says what the website is and who it belongs to.
2. Main content column, which holds the main content of functionality you are here to use.
3. One or more sidebars, holding peripheral content that is either related to the page’s main
content and changes as new pages are loaded (e.g., related links), or is always relevant
and persists across the whole site (e.g., “shopping cart” information on an e-commerce
site).
4. Navigation menu going across or down the page. This is often put in a sidebar, or may
form part of the header.
5. A footer that goes across the bottom of the page and contains secondary information such
as copyright information and contact details.
Lets visualise this a bit more with a specific example. See Figure 13 which shows the website
of “The Verge”.
We will overlay the elements on top (See Figure 14.) To see the elements in your browser, press
the “F12” (Function Key 12) on your keyboard to open the “Developer tools”. Alternatively, you
can right click on an element and choose “Inspect element” (Firefox) or “Inspect” (Chrome).
These sections could contain any number of different nested elements; for example, a footer
could include a list full of links, a couple of paragraphs and an image. Later, we have to mark
27
Figure 13: Screenshot of The Verge web page.
up these distinct sections and group them together as single entities that can be laid out later
using CSS. Compare the overlay of The Verge web page to that shown in Figure 15. Can you
identify the different elements? (Note: Not all the elements mentioned here are shown in that
example)
1. Header Element
(a) To contain the headings of either a web page document or an area within the docu-
ment
(b) Begins with the <header> tag and ends with the </header> tag.
2. The Nav Element
(a) To contain a section of navigation links.
(b) Begins with the <nav> tag and ends with the </nav> tag.
3. The Main Element
(a) To contain the main content of a web page document.
(b) There should be only one main element per web page.
28
Figure 14: Screenshot of The Verge web page with overlaid structural elements.
(c) Begins with the <main> tag and ends with the </main> tag.
4. The Div Element2
(a) Used for many years to configure a generic structural area or “division” on a web
page as a block display with empty space above and below.
(b) Begins with a <div> tag and ends with a </div> tag.
(c) Use a div element when you need to format an area of a web page that may contain
other block display elements such as headings, paragraphs, unordered lists, and even
other div elements.
(d) Marking up paragraphs and headings with <div>s is bad practice; although it might
look okay at first, the page will be inaccessible to those using screen readers.
5. The Footer Element
(a) To contain the footer content of a web page or section of a web page.
(b) Begins with the <footer> tag and ends with the </footer> tag.
2
The <span> element is an in-line container vs the <div> element which is a block container.
29
header
nav
main
div div div
footer
Figure 15: Structural elements
Task 14: Using Structural Elements

1. Create a webpage using structural elements as shown in Figure 16. The codes for this
page are given as:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Trillium Media Design</title>
6 </head>
7 <body>
8 <header>
9 <h1> Trillium Media Design </h1>
10 </header>
11
12 <nav>
13 <b>Home Services Contact</b>
14 </nav>
15
16 <main>
17 <h2>New Media and Web Design</h2>
18 <p>Trillium Media Design will bring your company’s web
presence to the next level. We offer a comprehensive range of
services.</p>
19
20 <h2>Meeting your Business Needs</h2>
21 <p>Our expert designers are create and eager to work with with you</
30
p>
22 </main>
23
24 <footer>
25 <small><i>Copyright © 2019 Sunway University</i></small>
26 </footer>
27
28 </body>
29 </html>
2. Save the file as: structural.html

3. Test the web page to see if you get the same result as shown in Figure 16.
Figure 16: Screenshot of a website structured using structural elements.
8.11 Creating multiple web pages
Now, you will create multiple web pages with what you have earlier learnt and done. You are
going to create multiple web pages and link them. You will need to:
1. Create a folder or directory for this particular project.

2. Create three (3) web pages and name them:
(a) index.html
(b) services.html
(c) contact.html
31
You may have already created some of these. Otherwise, just modify what you have done.
3. Create links to the pages.
These would be relative links, thus the files need to be in their correct folders/directories.
Task 15: Creating and linking webpages

1. Using your code from the “Structural element” task, copy that file to your new project
folder and name it “index.html”. This will serve as your home page.
You need to:
(a) Change the title.
(b) Add anchors to the nav bar elements.
Refer to Figure 17 for how your web page should look like.
2. Create hyperlinks for each of the navigational links in the nav element using the anchor
tag.
The hyperlinks will be as follows:
(a) Home: index.html
(b) Services: services.html
(c) Contact: contact.html
3. Create the other two pages (services.html and contact.html) based on the home page and
put them in the same folder. Refer to Figure 18 and Figure 19 for how your web page
should look like.
4. Test your website by ensuring all the links work as they should by:
(a) Producing a test case table as we did for Task 12.
(b) Recording each observation.
(c) Describing each observation.
(d) Discussing each observation.
Note: Some of these may seem really trivial as you might be describing or the same thing
over and over again. However, this is part of the rigours of testing and in industry, you
will need to document all test cases and their results.
5. Draw the structure of your web site depicting he relationship between the pages.
Note: Typically, you will first draw the structure BEFORE linking the pages. Your web
site should have been planned out before any implementation work is carried out - and
during this planning, how pages are linked or transition from one to another is decided
upon.
32
Question(s) 4
1. List down the main components of a HTML file.

2. What is “meta” short for?
3. What is the purpose of meta tags?
4. List down THREE (3) other uses of meta tags with the associated code.
5. All special characters must be enclosed between ___ and ___ .
6. What is the purpose of blockquotes?
7. How are blockquotes different from paragraphs?
8. Apart from web pages, what can you link to using anchor tags?
9. What is the purpose of structural elements?
10. Is it mandatory use structural elements to build a website?
Question(s) 5
1. What are number bases?

2. List down THREE (3) commonly used number bases used in computing.
3. What is a numeral?
4. What is a digit?
5. What is a bit?
6. Describe how a computer stores information.
7. Describe what is endianness and what affects or determines it.
8. Describe the difference between big-endian and little-endian.
9. Describe what character encoding is used for.
9 Summary
In this lab, you have learned to create a web page using HTML page elements and have created
a miniature website. At the moment, there is not much of a style or any colour to the web pages
you have created, relying instead on the default look the browsers will render HTML.
33
Figure 17: Screenshot of the home page (Filename: index.html).
Figure 18: Screenshot of the services page (Filename: services.html).
34
Figure 19: Screenshot of the contact page (Filename: contact.html).
35
Submission
Note
As this is an official submission, you must not submit work that is NOT yours. Prevailing
academic malpractice rules apply. Please refer to your student handbook on what they are.
You MUST adhere to all the submission instructions outlined here.
You are to submit all your files in a single Zip archive on eLearn. In your submission archive,
you should have the following:
1. file(s) for each task that you have been asked to save a file. (This would be most but may
not be all)
Filename: as stated in the task.
2. Observations: a single observation file in PDF format.
Filename: <studentID>_observations.pdf, where <studentID> is to be replaced with
your own Student ID.
Example:
If your StudentID is: 11223344, the filename will be “11223344_observations.pdf”.
3. Answers to questions: an answers file in PDF format.
Filename: <studentID>_answers.pdf, where <studentID> is to be replaced with your
own Student ID.
Legend:
: These are folders/directories.

: These are files. No special formatting.
Your archive should have the following structure/content:

<00000000>_<LabNum>.zip. . . . . . . . . . . . . . . . This is the main archive.
<00000000> must be replaced
with your student ID). <Lab-
Num> is the word “Lab”
appended with the current lab
number (without spaces).
task1
file1 from task1
file2 from task1 (where applicable)
all other files from task1 (where applicable)
36
task2
file1 from task2
all other files from task2 (where applicable)
(all other tasks for this part of the submission)
Answers to the questions for this part of the submission (if applicable)
Observation file (in PDF)
37
Changelog
• Version 1.6
Date: 26 Aug 2020
1. Fixed: Some typographical errors, e.g. numbering due to additional \item, indentation
of some code.
2. Updated: Task 1. Added an explanation of the commenting convention used.
3. Updated: Task 2 steps.
4. Updated: Clarification on submission.
5. Added: A note about indenting code.
• Version 1.5.1
Date: 25 Aug 2020
1. Changed: Instructions regarding observations and how to record them in a single file.
Previously it was called “task3_observations” but this has been changed to a single
observation file.
2. Changed: The default viewing layout of the PDF files from two side-by-side pages to a
single column page view.
3. Added: Materials to include the creation of an observation file.
4. Added: Submission of the Observation file.
• Version 1.5
Date: 18 Aug 2020
1. Updated: Submission instructions.
2. Updated: Some file names for submission.
• Version 1.4
Date: 9 May 2020
1. Added: A note about type cases in section 6.
2. Added: Save file for Section 7.
3. Updated: Some formatting due to the addition of materials.
• Version 1.3
Date: 19 April 2020
1. Corrected: The screenshot for Task 10. Removed the incorrect code from the screen
shot
2. Corrected: Statement regarding adding commas between attributes at the end of Task 7.
3. Added: Sample code for how to include multiple attributes for Task 7.
4. Added: Syntax highlighting for Task 12.
5. Added: Question 4 and 5.
6. Updated: Save file formatting.
• Version 1.2.1
38
Date: 14 April 2020
1. Corrected: Caption for Figure 11.
• Version: 1.2
Date: 12 April 2020
1. Added: Pre-requisite to the previous lab on setting up the machine.
2. Added: A fully compliant PDF reader, e.g. Adobe Acrobat Reader.
3. Added: An additional task to test out special characters and block quotes.
4. Added: Questions to Task 2 and 3.
5. Added: More options for testing the file for Task 1.
6. Updated: Task formatting.
• Version: 1.1
Date: 26 Aug 2019
1. Updated: Added revision number and dates to the labsheet.
2. Updated: Changed LaTeX class file
• Version: 1.0
Date: 27 March 2018
1. Initial release
39

Web1201 Lab1 HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web1201 Lab1 HTML

Uploaded by

Copyright:

Available Formats

Rev 1.

1. Create a HTML page and render the file using a browser.

4 Deliverables, timing and additional notes

5 Materials and Equipment

• The DTD identifies the version of HTML contained in your document.

7 Web Page Template

Task 1: Type out and save your template

8 The HTML Element

8.1 Head, Title, Meta and Body Elements

8.1.1 Head Section

8.1.2 Body Section

Task 2: Creating your first web page

Figure 1: Screenshot of the HTML code typed out in Notepad.

Spacing and Indentation:

Look at how much more difficult it would be to edit this code!

3. Save your file as: index.html. To do this in Notepad:

Figure 2: Screenshot accessing “Save” from the “File” menu.

1 Set the save location

3 Change the “Save as Type”

2 Set the Filename and file extension

4. Test your page.

8.2 Heading Element

Task 3: Creating headings

2. Save the file as: headings.html

8.3 Paragraph Element

Task 4: Adding a paragraph

2. Save the file as: paragraphs.html

1. What is the purpose of using paragraphs?

8.4 Line Break Element

Task 5: Adding a line break

Figure 7: Screenshot of a blockquote environment on a web page.

Task 6: Adding a blockquote to your webpage.

2. Change the title appropriately.

8.6 Phrase Elements

Example of this is:

Element Example Usage

8.7 List Elements

8.7.1 Ordered Lists

Figure 8: Screenshot of an ordered list.

Task 7: Creating an ordered list

3. Reversed: Configures the list to display them in descending order. By default, it is in

Combine multiple options by separating them:

Task 8: Modifying your ordered list

8.7.2 Unordered Lists

Task 9: Creating and modifying an unordered list

8.7.3 Description Lists

Figure 10: Screenshot of a description list.

Task 10: Creating a Description List

8.8 Special Characters

© Copyright 2019 My Company. All rights reserved.

Character Description Entity name Entity number

" Quotation mark &quot;

You can find more symbols from:

Task 11: Using special characters

Task 12: Using special characters and block quotes

Do you see any relation to Questions 1.3 from Lab 0?

What you need to do:

1 Result 1 Result 2 Result 3

8.9 Anchor Element

Task 13: Adding anchors

8.9.1 Absolute vs Relative Hyperlinks

8.10 Structural Elements

Up to this point, you should be familiar with the following:

1. what is contained inside the document <head>

" Quotation mark "