Scribd
Upload
42 views

Practical 3 - HTML Graphics, Audio, Video and Form

This document provides instructions for a practical assignment on HTML graphics, audio, video, and forms. It describes how to: 1) Create an image gallery with images, headings, paragraphs of text, and hyperlinks to other websites. 2) Add audio and video elements to the webpage. 3) Create a form with different field types like text, radio buttons, checkboxes and submit buttons. The document gives detailed steps and examples of how to structure the HTML elements to display the content as desired. It also provides hints and challenges to enhance the webpage design.

Uploaded by

Travis Teoh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views

Practical 3 - HTML Graphics, Audio, Video and Form

This document provides instructions for a practical assignment on HTML graphics, audio, video, and forms. It describes how to: 1) Create an image gallery with images, headings, paragraphs of text, and hyperlinks to other websites. 2) Add audio and video elements to the webpage. 3) Create a form with different field types like text, radio buttons, checkboxes and submit buttons. The document gives detailed steps and examples of how to structure the HTML elements to display the content as desired. It also provides hints and challenges to enhance the webpage design.

Uploaded by

Travis Teoh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Official (Closed) - Non Sensitive

Page 1 of 9

Fundamentals of Computing Week 3


Polytechnic Foundation Program
2022/23 Semester 2 Session 2
Practical 3 – HTML Graphics, Audio, Video and Form

OBJECTIVES

At the end of this exercise, you should know how to

 Insert images and background wallpaper


 Create hotspots on an image
 Incorporate audio and video in a web page
 Create a HTML document with functional form features

REFERENCES

 http://www.w3schools.com/html/

SUBMISSION

 Create a folder, Week03 in your FC folder.


 Download the files index.html and form.html from BrightSpace and save
them in the Week03 folder created above.
 At the end of the session, copy the Week03 folder (which contains all your
work) to FC folder in MS Team

ACTIVITIES

Notes:
 Create a folder Media in Week03 folder.
 Download all the media files from Week03 Learning Material in BrightSpace
and save them in the Media folder.
 Open index.html and form.html for editing in Visual Studio Code for Parts
A and B respectively.
 Save the file and test your work using Firefox / Chrome after each step.

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 2 of 9

Part A - HTML Graphics, Audio and Video

1. Update name of author and creation date

Change the name of author to your name and the creation date to today.

Save the file and view the document in a browser. You should see an empty
web page with the title FC Practical 3A.

2. Create an Online Gallery

(a) Set the background colour of the page to light-blue:


Add the style attribute in <body> tag that sets the background property
to value light-blue:
style="background: light-blue;"
(b) Add wallpaper to the background:
Add background-image:url('Media/wallpaper.jpg'); in the style attribute in
step (a) above.
You should see the background image now as the background image
takes precedence over the background colour.
(c) Add a heading to the webpage:
Add a heading "My Gallery" by using the h1 element and draw a
horizontal rule below using the hr element.
(d) Define a division for car:
Division is used to create a logical grouping. It is used as a container
which can be styled with CSS. It is created by using the <div> tag.
<div>
….
</div>
(e) Add a car image in the division created in (d):
Add the image car.jpg in the division using <img> tag. As the image is
quite large, we will set the width to 214 pixels and height to 160 pixels.
To improve user-friendliness, add alternate text as "Car" and title as
"Wheels".
<img src="Media/car.jpg" width="214" height="160"
alt="Car" title="Wheels">
Note: The title text of an image appears in a small rectangle after you
place the mouse pointer over an image, telling viewer something
about the image. If the image cannot be loaded (could be the
browser set to not downloading images), the alternate text will

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 3 of 9

display in the image holder. Alternate text is a helpful tool for


images which serve as hyperlinks.
Check to make sure that your output shown in the browser matches with
Fig 1 below:

Fig 1
(f) Add hyperlink to the car image:
Add the <a> and </a> tag around the <img> tag created in (e) above so
that the car image is hyperlinked to another website. Set href attribute to
specify the link to be http://www.cars.com and set target attribute to
_blank so that the page is opened in a new tab.
<a href="http://www.cars.com" target="_blank">
….
</a>
(g) Add a heading to the division:
Add a heading "Car" by using the h3 element. Set the color of the
element to darkblue by using the style attribute in the <h3> tag:
<h3 style="color:darkblue;">Car</h3>
(h) Add the description for the car image:
Enter the description shown in the box below in <p> tags:

This is an image of a car. It may look like a simple picture, but it is in


fact a link that will take you to an online cars sales website that
provides a place for people to buy used-cars as well as sell their
vehicles. Click on the image to visit www.cars.com.

Set the text color to blue by using the style attribute in the <p> tag:
<p style="color:blue;"> . . . . </p>

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 4 of 9

(i) Float the image to the right of the text:


Use the style attribute to set the style of the img element as follows:
float: right. This ensures that the image is placed on the right, allowing
text to wrap around it.
<img src="Media/car.jpg" width="214" height="160"
alt="Car" title="Wheels" style="float:right;">
Your output shown in the browser should look like Fig 2 below:

Fig 2

Challenge:

(j) Create another division for flowers.


Add the following in the section:
 The image flower.jpg that has the size as the car image. The
image has an alternative text "Flowers" and title "Tulips".
Link the image to http://tulipfestival.ca.
 The heading of the section is Flowers.
 The description of the image is given in the box below. Color of
the text is blue.
The world's largest tulip festival, now encompassing an 18-day
celebration each May, was established in 1953 to preserve the
heritage of Canada's role in liberating the Dutch during the Second
World War. The symbolic tulip – Ottawa's official flower – was given
as a gift in perpetuity to the Canadian people for having provided safe
harbour to the Dutch Royal Family during the German Occupation of
the Netherlands. The tulip remains a valuable symbol of friendship
and of spring, with special meaning to the people of Canada and its
National Capital Region.

 The style of the information in this section is the same as the


previous section except the image is to float to left.

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 5 of 9

Your output shown in the browser should look like Fig 3 below:

Fig 3
[ Hint: use the style of “clear: right;” for the second <div> tag so that the
second division doesn’t overlap the first division ]

3. Add Audio and Video to the Web Page

Add your choice of audio file to the web page using <audio> tag in a new
division with a h2 heading "Audio".
Add your choice of video to your web page using <video> tag in another
division with a h2 heading "Video".
Test your web page using different browsers such as Chrome and Firefox.
Your webpage should look as follows (the top part which is the same as Fig
3 above is truncated):

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 6 of 9

Fig 4
Part B - HTML Form

1. Update name of author and creation date

Change the name of author to your name and the creation date to today.

2. Create a Form

(a) Add a heading to the webpage:


Add a heading "Feedback Form" by using the h1 element and draw a
horizontal rule below using the hr element.
(b) Add a description to the document:
Type the following text in <p> tags after the horizontal rule:

We value your feedback. Please fill in the form below and click Submit
button.

(c) Create the feedback form:


The feedback form contains relevant input fields for user to enter his/her
name, salutation, age, email, phone, address, comment and buttons for
submit feedback or clear form as shown below:

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 7 of 9

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 8 of 9

(i) Add the <form></form> tags.


(ii) Add the text field for name together with the label:
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</p>
(iii) Add the radio buttons for salutation together with the label:
<p>
<label for="salutation">Salutation</label>
<input type="radio" id="dr" name="salutation" value="Dr">
<label for="dr">Dr</label>
<input type="radio" id="mr" name="salutation" value="Mr">
<label for="mr">Mr</label
<input type="radio" id="ms" name="salutation"
value="Ms">
<label for="ms">Ms</label>
<input type="radio" id="mrs" name="salutation" value="Mrs">
<label for="mrs">Mrs</label>
</p>
(iv) Add the dropdown list for age together with the label:
<p>
<label for="age">Age</label>
<select name="age">
<option value="none">Select Age</option>
<option value="teen">&lt21</option>
<option value="youth">21 to 35</option>
<option value="adult">&gt35</option>
</select>
</p>
(v) Add the textfield for email together with the label.
(vi) Add the textfield for phone together with the label.
(vii) Add the text area for address together with the label:
<p>
<label for="address">Address:</label>
<textarea id="address" name="address"
rows="3" cols="50">
</textarea>
</p>
(viii) Add the text area for comment together with the label.
(ix) Add two buttons, one for submitting and the other for resetting the
form:

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2
Official (Closed) - Non Sensitive

Page 9 of 9

<input type="submit" value="Submit Feedback">


<input type="reset" value="Clear Form">
(x) In order for our form to work, we need to add the action and
method attributes to the <form> tag. Modify the <form> tag as
shown below. Substitute the email address with your own.
<form method="post" action="mailto:[email protected]"
enctype="text/plain">
(xi) View the form in the browser and give it a try after filling it out.

Challenge:
(d) Style your webpage:
(i) Set the style attribute for body element as follows:
font-family: Verdana, Geneva, Tahoma, sans-serif;
width:50%;
margin:auto;
(ii) Set the style attribute for form element as follows:
background-color: lightgray;
padding:10px;
(iii) Set the style attribute for label element as follows:
display: inline-block;
font-weight: bold;
width:100px;
View the form in the browser again to see the effect.

FC AY22/23 Sem 2 Last update 07/09/22


Week 3 Session 2

You might also like