Web Development (Com 225) Practical Manual

Author: Peter Oluwasheyi Oluokun

Year: 2022

Table of Contents
Table of Contents ......................................................................................................................................... i
List of Figures............................................................................................................................................. iii
INTRODUCTION: ..................................................................................................................................... 1
What is a Website (Theoretical Summary) ............................................................................................... 1
Lab 1: Introduction to web development tools ......................................................................................... 2
Objective: ................................................................................................................................................. 2
Web application ........................................................................................................................................ 2
Web application interface ......................................................................................................................... 2
Text Editors .............................................................................................................................................. 2
Text Editor Interface................................................................................................................................. 3
Lab 2: Introduction to HTML ................................................................................................................... 4
Objectives: ................................................................................................................................................ 4
HTML Elements ....................................................................................................................................... 4
HTML Structure ....................................................................................................................................... 4
Welcome to our first HTML page ............................................................................................................ 4
Lab 2 Code 1: ....................................................................................................................................... 4
Lab 3: Text Formatting .............................................................................................................................. 6
Objectives: ................................................................................................................................................ 6
Font sizes .................................................................................................................................................. 6
Lab 3 Code 1: ....................................................................................................................................... 6
Text Decorations....................................................................................................................................... 6
Lab 3 Code 2: ....................................................................................................................................... 6
Text types ................................................................................................................................................. 7
Lab 3 code 3 ......................................................................................................................................... 7
Text Color ................................................................................................................................................. 7
Lab 3 code 4 ......................................................................................................................................... 7
Lab 4: Introduction to CSS ........................................................................................................................ 9
Objectives: ................................................................................................................................................ 9
Understanding CSS................................................................................................................................... 9
Lab 4 code 1: ........................................................................................................................................ 9
CSS Structure ........................................................................................................................................... 9
CSS Webpage ........................................................................................................................................... 9
Lab 4 code 2: ........................................................................................................................................ 9
Objectives: .............................................................................................................................................. 11

i
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Adding Images to a Webpage ................................................................................................................. 11

Lab 5 code 1 and 2 ............................................................................................................................ 11
Webpage background image .................................................................................................................. 12
Lab 6: Lists ................................................................................................................................................ 13
Objectives: .............................................................................................................................................. 13
Creating an ordered list........................................................................................................................... 13
Lab 6 Code 1: ..................................................................................................................................... 13
Lab 7: Hyperlinks ..................................................................................................................................... 15
Objectives: .............................................................................................................................................. 15
Hyperlink: how does it work? ................................................................................................................ 15
Lab 7 code 1: ...................................................................................................................................... 15

ii
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

List of Figures
Figure 1: Browser interface .......................................................................................................................... 2
Figure 2: Text Editor Interface...................................................................................................................... 3
Figure 3: Text editor explaining a test code .................................................................................................. 4
Figure 4: Output of test code ........................................................................................................................ 4
Figure 5: My web application output ............................................................................................................ 5
Figure 6: Text size output ............................................................................................................................. 6
Figure 7: Text Decoration ............................................................................................................................. 7
Figure 8: text type output .............................................................................................................................. 7
Figure 9: Text colour output ......................................................................................................................... 8
Figure 10: Exercise 3 color output ................................................................................................................ 8
Figure 11 Introduction to CSS output ........................................................................................................... 9
Figure 12: CSS webpage output.................................................................................................................. 10
Figure 13: image and html file folder explainer ......................................................................................... 11
Figure 14: adding image file to webpage .................................................................................................... 11
Figure 15: adding background image to webpage ...................................................................................... 12
Figure 16: Listing of items in a webpage .................................................................................................... 14
Figure 17: hyperlink explained ................................................................................................................... 15
Figure 18: Text hyperlink ........................................................................................................................... 16

iii
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

INTRODUCTION:
What is a Website (Theoretical Summary)
A website is a compound word formed from the words “web” (which means an interconnected system of things or
people), and “site” (which means location or address of something). A website is a location (address) on the internet
where a particular information or resource is located.

A website consists of web pages connected together using a hyperlink (a link from a hypertext file to another location
or file) to form a robust or bigger resource. It can be likened to exercise book consisting of different pages forming
just a notebook on a particular subject.

Accessing a website requires the use of a web browser (an application with the capability to access locations on the
internet), and internet (a computer network consisting of a worldwide network of computer networks that use the
TCP/IP network protocols to facilitate data transmission and exchange) access. There are numerous internet browsers
but their function is just for accessing the internet. Some popular internet browsers include: internet explorer, chrome,
opera mini, and Mozilla fire fox.

1
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 1: Introduction to web development tools

Objective: Introducing students to the various parts and functions of web applications and text editors (Google
Chrome, Opera Mini, and Notepad).

Web application
A web application is an application used in accessing websites or webpages. Google Chrome, Opera Mini, and Mozilla
Fire Fox are popular examples of web applications.

Web application interface

Figure 1: Browser interface

Text Editors
A text editor are application programs that are used for formatting and manipulation of text to suit certain functions
or formats. Notepad, Notepad++, MS Word, VS Code, Atom, and Sublime are a few popular examples of text editors.

2
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Text Editor Interface

Figure 2: Text Editor Interface

Exercise 1:
Explain, where it is necessary and highlight the function(s) of the following.

 Tabs
 Menu Bar
 Refresh
 Navigation
 History
 Title bar
 Search box

3
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 2: Introduction to HTML

Objectives:
 Familiarizing with html tags
 Understanding the structure of html
 Using html to welcome guests to our first webpage
HTML Elements
These are tags that tells the browser how to structure our html codes. Examples of html tags include
 Html <html>
 Header <header>
 Paragraph <paragraph>
 Break <br>
 Body <body>
 Title <title> e.t.c.
HTML Structure
Html codes are structured to execute in the simplest possible form. Any text written and saved as html file (.html)
executes directly on a web browser. Below is an illustration with two images, one from a text editor with strings of
code and the other, an output on a web browser

Figure 3: Text editor explaining a test code

Output of the code above

Figure 4: Output of test code

For best practice, the lines of html codes are written within html tags in the following format, “<html> this is a test
</html>”. Applying this tag does not necessarily change the output appearance on the webpage because the lines of
codes are that short and requires no further formatting.

Welcome to our first HTML page

Based on standard practice, we shall create our first html page using the standard structure for html codes.

Lab 2 Code 1:
<html>
<head>
<title> Mypage </title>

4
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

</head>
<body>
Hello there, I am _____ with the matric number ____, Welcome to my page
</body>
</html>

Figure 5: My web application output

Exercise 2:
1. Examine the source code in “Lab 2 Code 1” above and explain why
there is a single line of code in the body of the code environment yet
they are broken into three different lines on the output.

2. Repeat this exercise with your details on the output. Screenshot and
print the output to attach to the practical manual for next
submission. Also, you are to send your softcopy to
[email protected] using “Lab 2 practical result” + your
matric number as your subject.
(Subject: Lab 2 practical result: Matric Number: FPA/CS/_________)

5
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 3: Text Formatting

Objectives:
At the end of this lesson, students should be able to accomplish all of the following with minimal or no supervision.

 Use the different text formatting tags

 Manipulate font types
 Apply color to texts
Font sizes
There are various ways to change font sizes and some are already predefined for the browser to understand. For
example in the code 1 below, different font sizes gives different outputs on the browser.
Lab 3 Code 1:
<html>
<head>
<title> Lab 3 : Header texts </title>
<head>
<body>
<font size = 1> 1. This is text size one </font> <br>
<font size = 2> 2. This is text size two </font> <br>
<font size = 3> 3. This is text size three </font> <br>
<font size = 4> 4. This is text size four </font> <br>
<font size = 5> 5. This is text size five </font> <br>
<font size = 6> 6. This is text size six </font> <br>
<font size = 7> 7. This is text size seven </font> <br>
</body>
</html>

Figure 6: Text size output

Text Decorations
To decorate text simply means to add styles to the font. For example in the code 2 below, texts are bolded, italicised
and underlined.

Lab 3 Code 2:
<html>
<head>
<title> Lab 3 : Header texts </title>
<head>
<body>
<b><font size = 5> 5. This is text size five </font></b> <br>
<i><font size = 6> 6. This is text size six </font></i> <br>
<u><font size = 7> 7. This is text size seven </font></u> <br>
</body>
</html>

6
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Figure 7: Text Decoration

Text types
Just as in other word processors, text types give beauty to texts and paragraphs as it makes job suit a particular design.
Web texts can also be formatted into these different text forms. For example in the code 3 below, the texts are formatted
differently to give different text styles.

Lab 3 code 3
<html>
<head>
<title> Lab 3 : Text types </title>
</head>
<body>
<font SIZE = 5> This is text size five </font> <br>
<font SIZE = 6> This is text size six </font> <br>
<font SIZE = 7> This is text size seven </font> <br>
<br>
<font SIZE FACE = CURSIVE> This is text size five 1 2 3 4 5</font><br>
<font SIZE FACE = COURIER> This is text size six 1 2 3 4 5 6</font> <br>
<font SIZE FACE = MONACO> This is text size seven 1 2 3 4 5 6 7</font> <br>
</body>
</html>

Figure 8: text type output

Text Color
Adding colour to texts using html is quite easy and fun. In code 4 below, different ways of applying color to texts
were experimented and the output are displayed afterwards.

Lab 3 code 4
<html> <font SIZE = 7 color = green> This is text size seven
<head> <title> Lab 3 : Text types </title> </head> </font> <br> <br>
<body > <font SIZE FACE = CURSIVE color = blue> This is
<font SIZE = 5 color = blue> This is text size five text size five 1 2 3 4 5</font> <br>
</font> <br> <font SIZE FACE = COURIER color = red> This is
<font SIZE = 6 color = red> This is text size six </font> text size six 1 2 3 4 5 6</font> <br>
<br> <font SIZE FACE = MONACO color = green> This is
text size seven 1 2 3 4 5 6 7</font> <br> <br>

7
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

<font color = blue> This is text size five </font> <br> <font color = green> This is text size seven
<font color = red> This is text size six </font> <br> </font><br> </body>
</html>

Figure 9: Text colour output

Exercise 3:
1. Repeat Lab 3 code 4 with different font sizes, font types, and decorations.

Take a screenshot of this result and the source code and send it to the mail address
[email protected] using Your name and matric number as the subject of the
mail and “Lab 3 code 4 result” in the body of the mail. You are also required to print a
copy of your source code and result to be attached to your practical manual
(Subject: Lab 3 practical result: Matric Number: FPA/CS/_________)

2. Produce the source code of the output below. You are to also send a softcopy of your code
and output to this mail address [email protected] using “Lab 3 practical result”
+ your matric number as your subject. You are to screenshot the working environment
with your source code as well as the output or result
(Subject: Lab 3 exercise 3 practical result: Matric Number: FPA/CS/_________)

Figure 10: Exercise 3 color output

8
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 4: Introduction to CSS

Objectives:
At the end of this lesson, students should be able to accomplish all of the following with minimal or no supervision.

 Understand CSS
 Use CSS to standard measures.
 Understanding the structure of CSS
 Use CSS to style webpages
Understanding CSS
Cascaded Style Sheets (CSS) is often used to beautify or structure html web pages. It can be used in three different
ways; “in line”, “internally or embedded”, or/and “externally”. CSS is broken into three different parts; the “selector”,
the “property”, and the “value”. “styles” is often used to introduce css in any html code.

Lab 4 code 1:
<html> <head> </style> </head>
<title> Introduction to CSS </title> <body>
<style> This is a simple embedded or internal CSS sample code
body { color: blue; font-size: 25px; } <div> This is another sample code </div>
div { color: red; font-size: 50px; } </body> </html>

Figure 11 Introduction to CSS output

CSS Structure
CSS structure is divided into three parts; “selector”, “property”, and “value”. All these three are used together to
decorate or beautify our web page. Lab 4 code 1 is used to explain this structure.
Lines 4 to line 13 holds our CSS codes in our code environment. Since its internal CSS we are applying, we targeted
the “body” from our CSS code in line 5. This is simply our selector and it implies that we have selected the body as
our focus for the code that may follow in the curly brackets ({ }). Next is the “property” and it simply tell us what we
are going to manipulate about the tag we have selected. Lines 6 is modifying the color property to blue while line 7 is
modifying the font-size to 25 pixel. The blue color and 25 pixels are both the values of the properties color and font-
size. The same thing happens when we decided to make the “div” the selector to be targeted. All three parts were
involved to produce different but similar style.

CSS Webpage
Lab 4 code 2:

9
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

<html> height: 200px; margin: auto; }

<head>
<title> Lab 4 : CSS webpage </title> footer { background-color:blue; height:50px; }
<style> </style>
body { width: 1024px; background-color: grey; </head>
margin: 0 auto; } <body>
<header></header>
header { background-color: black; width: 1024px;
height: 50px; margin-top: 0; padding-top: 0; } <main> <div></div> </main>

main { background-color: white; padding: 150px; } <footer></footer>

</body>
div { background-color: red; width: 200px; </html>

Figure 12: CSS webpage output

Exercise 4:
1. Create a similar webpage to “Lab 4 code 2” using the following information in your CSS code.
body = width: 1024px; background-color: black; margin: 0 auto;
header = background-color: red; width: 1024px; height: 30px; margin-top: 0; padding-top: 0;
main = background-color: white; padding: 100px;
div = background-color: blue; width: 200px; height: 200px; margin: auto;
footer background-color: red; height:50px;
Note:
Take a screenshot of this result and the source code and send it to the mail address [email protected]
using Your name and matric number as the subject of the mail and “Lab 5 Exercise 1 result” in the body of the
mail. You are also required to print a copy of your source code and result to be attached to your practical manual
(Subject: Lab 4 practical result 1: Matric Number: FPA/CS/_________)
2. Add another “div” inside your main, save, and execute it. Send the screenshot of the output and the code to the
mail address provided above as;
(Subject: Lab 3 practical result 2: Matric Number: FPA/CS/_________)

10
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 5: Image
Objectives:
At the end of this lesson, students should be able to accomplish all of the following with minimal or no supervision.

 Insert images into a webpage

 Design a webpage with a background image
Adding Images to a Webpage
Before you begin, make sure to copy the image file you wish to include in your webpage to the
same folder you are saving your html file (see figure 13 below). “Lab 5 code 1” is an illustration
of how to include image file in a webpage.

Lab 5 code 1 and 2

<html> </head>
<head> <body>
<title> Lab 5 : adding background image </title> <header> </header>
<style> <main style = "background-image: url('b.jpg');">
body { width: 1024px; background-color: grey; <div> <img src = "passport1.jpg" alt = "passport
color: white; margin: 0 auto; } img" width ="150px" height = "200px"\> </div>
header {background-color: black; width: 1024px; I just added background image and a Passport
height: 50px; margin-top: 0; padding-top: 0; } photograph to my webpage
main { background-color: white; } </main>
div { width: 200px; height: 200px; } <footer> </footer>
footer { background-color:blue; height:50px; } </body>
</style> </html>

Figure 13: image and html file folder explainer

Figure 14: adding image file to webpage

11
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Webpage background image

To make an image the background of your webpage, you simply add “style = "background-
image: url('b.jpg');” to your lines of code in inline CSS or you simply add it to as internal CCSS
to your style as “style = "background-image: url('b.jpg');”. The image was added to the “main”
in the Lab 5 code 2 to replace the white background colour.

Figure 15: adding background image to webpage

Exercise 5:
1. Repeat Lab 5 code 1 and 2 with the following details;
a. Change the background of the body to black, the header to red, the footer to red, and the main
to white.
b. Use 1024px for body width and change the height of the footer and header to 70px.
Take a screenshot of this result and the source code and send it to the mail address
[email protected] using Your name and matric number as the subject of the mail and “Lab 5
Exercise 1 result” in the body of the mail. You are also required to print a copy of your source code and
result to be attached to your practical manual.
2. Add your passport photograph to the webpage and change the background to any image of your choice.
Take a screenshot of this result and the source code and send it to the mail address
[email protected] using Your name and matric number as the subject of the mail and “Lab 5
Exercise 2 result” in the body of the mail. You are also required to print a copy of your source code and
result to be attached to your practical manual

12
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 6: Lists
Objectives:
At the end of this lesson, students should be able to accomplish all of the following with minimal or no supervision.

 Create an ordered list of items

 Create an unordered list of items
 Explain the difference between the two
Creating an ordered list
Listing items with html can be accomplished using either the “ol” element (ordered list) or the
“ul” element (unordered list). Using either of this two elements with the “li” element (list element)
create a list of items on our webpage. This is achieved by including “<ul> <li> item 1 </li> <li>
item 2 </li> </ul>” for unordered list or “<ol> <li> item 1 </li> <li> item 2 </li> </ol>” for
ordered list. Lab 6 code 1 further explains these two methods of listing items on a webpage.

Lab 6 Code 1:
<html> <p style = "display:inline-block; color:Blue; font-
<head> size:2rem;">
<title> Lab : Listing </title> <b>Oluokun Peter Oluwasheyi</b></p>
<p><em> Web Development Lecturer</em></p>
<style> <p> At Federal Polytechnic, Ado-Ekiti </p>
body { </div> </div>
width: 1024px; background-color: grey;
margin: 0 auto; } <hr>

header { <div style = "height:200px; width: 500px;

background-color: blue; background-color:purple; color:white;">
width: 1024px; height: 50px; <p> My skills are listed below </p>
margin-top: 0; padding-top: 0; } <ol>
<li> Graphics Design </li>
main { background-color: white; } <li> Web Development </li>
<li> Computer Troubleshooting </li>
div { <li> Software testing/installation </li>
margin:0; padding: 5px; <li> Computer Maintenance and Repair </li>
display: inline-block; } </ol>
</div>
p { margin: 0; padding: 0; }
<div style = "height:200px; width: 500px;
footer { background-color:red; color:white;">
background-color:blue; height:50px; } <p> My interests are listed below </p>
<ul>
</style> <li> Programming </li>
</head> <li> Reading </li>
<body> <li> Surfing </li>
<li> Swimming </li>
<header> </header> <li> Problem Solving </li>
</ul>
<main> </div>
<div> </main>
<img src = "passport1.jpg" alt = "My Passport" width
= "150px" height = "200px" /> <footer> </footer>
<div style = "padding-left:20px"> </body>
</html>

13
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Figure 16: Listing of items in a webpage

Exercise 6:
1. Repeat Lab 6 using the following specifications;
a. Change the background color of the webpage to black, the header to red, footer to
red, and main to white. Use 1024px for body width and change the height of the footer
and header to 70px.
b. Create a div and add your passport photograph inside the div element you’ve created.
c. Create a paragraph element and add your name and matric number inside the
paragraph element.
d. Add a horizontal rule at the end of the div you created.
2. Create another div element after the horizontal rule. Inside the div element, create a paragraph
of list of food items. To do this;
a. Open a “p” element and write “List of food Items” inside it then close. After closing
the “p” element, create an ordered list of 7 food items you know.
b. Close the div element you created.
3. Create another div element after the last div. inside the div element, create a paragraph of list
of flowers. To do this;
a. Open a “p” element and write “List of flowers” inside it then close. After closing the
“p” element, create an ordered list of 7 flowers you know.
b. Close the div element you created.
Take a screenshot of this result and the source code and send it to the mail address
[email protected] using Your name and matric number as the subject of the mail and
“Lab 6 Exercise result” in the body of the mail. You are also required to print a copy of your source
code and result to be attached to your practical manual.

14
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

Lab 7: Hyperlinks
Objectives:
At the end of this lesson, students should be able to accomplish all of the following with minimal or no supervision.

 Understand how hyperlink works

 Create webpages that links to another webpage
 Make an image a link to other webpages
Hyperlink: how does it work?
Hyperlinks serves as shortcut to an address or location on a webpage or another website entirely. They simply link the
address of another webpage or website to a string of text or image. It is divided into four parts; “html element”,
“attribute”, link “destination/address”, and “link text/image url/address”. The figure below further explains this.

Figure 17: hyperlink explained

To add a link to a text, the element “a” is used along with the “href” (hyper reference) in this form; “<a
href=https://www.google.com> Go To Google </a>”. Adding a link to an image, the link text will be replaced with
the address or location of the image file to be used as the link. For example; “<a href=https://www.google.com> <img
src=“passport1.jpg” </a>. Let’s put this to a test in a real coding environment. From our Lab 6 code 1, lets add a link
to Google website underneath the list of food and the list of flowers. The code below is a continuation of Lab 6 code
1 but with the inclusion of hyperlinks.

Lab 7 code 1:
<html> p { margin: 0; padding: 0; }
<head>
<title> Lab : Listing </title> a { color: yellow; }

<style> footer { background-color:blue; height:50px; }

body {
width: 1024px; background-color: grey; </style>
margin: 0 auto; } </head>
<body>
header {
background-color: blue; <header> </header>
width: 1024px; height: 50px;
margin-top: 0; padding-top: 0; } <main>
<div>
main { background-color: white; } <img src = "passport1.jpg" alt = "My Passport" width
= "150px" height = "200px" />
div { <div style = "padding-left:20px">
margin:0; padding: 5px; <p style = "display:inline-block; color:Blue; font-
display: inline-block; } size:2rem;">
<b>Oluokun Peter Oluwasheyi</b></p>

15
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

<p><em> Web Development Lecturer</em></p>

<p> At Federal Polytechnic, Ado-Ekiti </p> <div style = "height:200px; width: 500px;
</div> </div> background-color:red; color:white;">
<p> Some Interests are listed below </p>
<hr> <ul>
<li> Programming </li>
<div style = "height:200px; width: 500px; <li> Reading </li>
background-color:purple; color:white;"> <li> Surfing </li>
<p> Some Digital skills are listed below </p> <li> Swimming </li>
<ol> <li> Problem Solving </li>
<li> Graphics Design </li> </ul>
<li> Web Development </li> <p> To search for more interests, <a
<li> Computer Troubleshooting </li> href="https://www.google.com"> Click Here to visit
<li> Software testing/installation </li> Google website </a> </p>
<li> Computer Maintenance and Repair </li> </div>
</ol> </main>
<p>To search for more digital skills, <a
href="https://www.google.com"> Click Here to visit <footer> </footer>
Google website </a> </p> </body>
</div> </html>

Figure 18: Text hyperlink

The underlined text above has been set to link the user to Google website. Once a user clicks on
these underlined texts the browser will automatically load the Google search engine, provided
the computer is connected to the internet.

To link an image to the internet, the process is the same but with little modification. Instead of
adding texts after the link destination, and before the closing tag, an image url is added. For
instance; the text “Click here to visit Google website” will be replaced in our code as follows; <a

16
 Web Development (Com 225) Practical Manual
Author: Peter Oluwasheyi Oluokun
Year: 2022

href=”https://www.google.com”> <img src=”computerman.jpg” /></a> and this shall change the

text link to an image whose url was provided just as illustrated below

Exercise 7:

1. From your Lab 6 code, add a paragraph element after the closing tag of your ordered list.
Input the line of code to link the text “Click here to visit Google website” to Google
search engine page. Repeat this step for the second div of unordered list using same text
to link your webpage to Google search engine.
2. Change the link text to Google logo for both divs and link them to the Google search
engine page.
Take a screenshot of this result and the source code and send it to the mail address
[email protected] using Your name and matric number as the subject of the mail
and “Lab 7 Exercise result” in the body of the mail. You are also required to print a copy of
your source code and result to be attached to your practical manual.
3. Make your passport image and your name a link to your Facebook page.
(https://www.facebook.com/yourusername/)

17