Lecture 3 - Presentation Design

FC
L
E
C
Presentation
T Design
U Graphics, Animated Images,
R Audio, Video, GUI, Form
E
Fundamentals of Computing
Polytechnic Foundation Programme
3 2022/23, Semester 2
Official (Closed) - Non Sensitive
Objectives
At the end of this lecture, you will learn how to:

• Incorporate graphics and animated images
• Add audio and video into the website
• Create GUI
• Create Form
Polytechnic Foundation Programme Lecture 3

Last updated 07/09/22
FC AY22/23 Sem 2 Slide 2
Topics
 Use of Graphics
 Background Images
 Working with Graphics and Animated Images
 Adding Audio and Video
 Creating Forms

Graphics and Images

Use of Graphics
 Graphics and images are a great way to liven up your
website.
• A picture is worth a thousand words.
 Do not over use animations and images.
• They become irritating, distracting and slow to load.
• Sometimes, something simple is often more effective.
 Background image of a page is set using "style" with the
background-image property for <body> tag.
 Foreground (or inline) images which appear amongst text is
inserted using the <img> tag.

Background Image
 By default, a background-image is placed at the top-left
corner, and repeated both vertically and horizontally (called
tiled).
 Both gif and jpg files can be used as HTML backgrounds.

 Make sure that the image can be joint nicely both left-right
and top-bottom when it is repeated so that it will look nice.
Example – Background Image

 Ensure that the colour of the text displayed on top of the
background image have good contrast with the colour of the
background image so that the text is clearly visible.
Poor design!

Tips on Background Images

 Avoid using colorful, bright images
• Distracting to the user
• Difficult to add text
Poor design!
 Avoid tiling if the image is not homogeneous

 Add a background colour in case images are turned off
• The background colour will be shown until the image loads
 Ensure the text colour contrast with the background colour

Foreground or Inline Images

 Images and graphics are useful for making web pages more
attractive
• Avoid too much text
strike a balance
• Avoid too many graphics
 The most commonly used image file types are .jpg, .gif and .png
 Which tag is to be used to add foreground image?

Inline Images – <img> Tag

 Images can be placed in <a> tags to form image links
• Use style attribute to set the float property to left or right to let the
image float to the left or to the right of a text:
<img style= "float:left;">
<img style= "float:right;">
Add style=“clear:both” to the subsequent html element to turn the text wrapping off.

<img> Attributes
Attributes Description
src specifies the location of image file
alt alternative text in case the image does not display
title shows information as a tooltip text when the mouse moves over the
element.
width specifies the width of the image
height specifies the height of the image
Note: except for "src", all the other attributes are optional

Location of the image file

 The src attribute provides the location of the image file relative to the
location of the HTML document.
• If the file is in same folder (as the HTML document):
<img src="myPicture.jpg">
• If the file is in a subfolder called ‘Media’ within current HTML folder:

<img src="Media/myPicture.jpg">
• If the file is in another folder called ‘Media’ at the same level as the current
HTML folder:
<img src="../Media/myPicture.jpg">
• If the file is located in other websites, e.g. in the NP website Media folder :
<img src="http://www.np.edu.sg/Media/myPicture.jpg">

Image Size
 Always specify both the height and width of the image.
 This will reserve the space required for the image when the page is
loaded.

Image Maps - <map>

 The <map> tags is used to define an Image Map.
 An Image Map is an image with clickable areas (hot-spots)
that would link to different pages or sites.
 The clickable area is defined using <area> tags.
 The img element must have the usemap attribute so that it
can be used in the <map> tag.
 The image acts as a ‘map’ with multiple-links to different
pages or sites.

Example – Image-map
When user clicks

• the square, it links to the website
https://en.wikipedia.org/wiki/Square
• the circle, it links to the website
https://en.wikipedia.org/wiki/Circle
• the triangle, it links to the website
https://en.wikipedia.org/wiki/Triangle
Animated Images
 Animated Images
• Same as normal images
• Animated images are available in the
form of .gif file
 Example

Adding Audio
Adding Audio using <audio> tag

 HTML5 specifies a standard way to include audio, with the <audio>
tag.
 The <audio> tag can play sound files, or an audio stream.
 Currently, there are 3 supported formats for the audio element:
• MP3
• WAV
• OGG
 If the audio format is not supported by the browser, the text you
entered between the <audio> and </audio> tags will display.

<audio> example
 The controls attribute adds audio controls, like play, pause, and
volume
 You may include multiple source in the audio element. The

browser will choose from the source(s) you have listed and play
the first one it recognizes.
 The text between the <audio> and </audio> tags will be displayed
if the browser cannot play any of the listed audio.

Adding Audio using Link <a>tag

 Another way to play an audio is to use the <a> tag.
 Provide a text with the hyperlink to the audio file.
 Once the text is clicked, the browser will open another
window to play the audio once it is downloaded.

Example – Adding Audio (2-in-1)
Viewer can choose to play

the audio either by clicking
on the “play” or the hyperlink
which opens the audio on
another window
<audio> Attributes
Attribute Value Description

Specifies that the audio will start playing as soon as it is
autoplay autoplay ready.
controls controls Controls will be displayed, such as a play, pause buttons.
The audio will start playing again (looping) when it
loop loop reaches the end
muted muted Specifies that the audio output should be muted
auto
Specifies if and how the author thinks the audio should be
preload metadata loaded at page load
none
src url Specifies the URL of the audio to play

Adding Video
Adding Video using <video> tag

 HTML5 specifies a standard way to include video, with the
<video> tag.
 Can contain one or more <source> tags with different
video sources. The browser will choose the first source it
supports.
 If the video format is not supported by the browser, the text
you entered between the <video> and </video> tags will
display.
 Good idea to always include width and height attributes.

Example – Adding Video
Works similar to <audio>

• The controls attribute adds video controls, like play, pause, and
volume
• The browser will play the first src video it recognizes from your list
• If none of the videos are played, the text will be displayed

<video> Attributes
autoplay autoplay If present, the video will start playing as soon as it is ready
controls controls If present, controls will be displayed, such as a play button
height pixels Sets the height of the video player
loop loop If present, the video will start over again, every time the
video ends
muted muted Specifies that the audio output of the video should be muted
poster url Specifies the URL of an image representing the video
auto Specifies if and how the author thinks the video should be
preload metadata loaded when the page loads
none
src url The URL of the video to play i.e. where to find the video
width Pixels Sets the width of the video player

Forms
HTML Forms
 A feedback or survey form is an example of a form.
 HTML forms allow a user to enter data that is sent to a
server for processing.
 A form contains form elements that allow the user to enter
data.
• E.g. text field, checkbox, password, radio button, etc
 A form is defined with the <form> tags.
<form>
…
input elements
…
</form>

A Form Example
 E.g. "Search" feature in a website uses a form
 This is what happens when the form is submitted:

• The search words are sent to a program on the server.
• The program will search a database for matches.
• The program creates a webpage with the results.
• The results webpage is sent back to the visitor.

Using Forms
 Forms are usually used to submit information to another
program for processing
• such as *.aspx or *.php
 To let the browser know where to send the form content, we
add these attributes to the <form> tag:
• action = address (where to send the form to for processing)
E.g.
 action = "password_validation.asp" (name of the program on
the server receiving the form for processing)
 action = "mailto:email@email.com"
• method = "post" or method = "get "

Creating a form example

Action Attribute and Submit Button
 When the user clicks on the "Submit" button, the content of

the form is sent to the server.
• The action attribute specifies where to send the form content or
form data when the form is submitted.
action="mailto:youremail@email.com"
 The file defined in the action attribute usually does something with the
received input.
 The common way to submit a form to a server, is by using
a submit button
<input type="submit" value="Submit" />

Example - Action Attribute and Submit Button

<h2>Send e-mail to youremail@email.com:</h2>
<form method="post" action="mailto:youremail@email.com" enctype=“text/plain>
<label for="userId">Login ID</label>
<input type="text" id="userId" name="userId"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" ><br><br>
<input type="submit" value="Submit" />
</form>
method="post"
When to Use POST?

If the form contains sensitive information

Form Controls
Field Type HTML Code Notes
Plain text <input type="text"> Provides textbox to enter text
Email <input type="email"> Forces a valid email
Password field <input type="password"> Echoes dots instead of characters as you type
Checkbox <input type="checkbox"> Used for multiple selections
Radio button <input type="radio"> When in a group, use to select only one
Drop-down lists <select><option>… Provides a list of items in a dropdown menu
File picker <input type="file"> Pops up an “open file” dialog
Submit button <input type="submit"> To submit form to server program
Clickable button <input type="button"> Provides a clickable button
Web address <input type="url"> Example: http://www.google.com
<input type="number"
Numbers min="0" max="10" Forces numbers
step="2" value="6">
Date <input type="date"> Provides a date picker

Input Fields Attributes

 Input fields has many attributes. The only one that is
compulsory is type.
 type attribute
• Specifies the type of the
input element.
• Possible choices include
text, checkbox, date,
email, image, number,
password, submit

Input Field Attributes

autofocus - When the page is loaded, the cursor goes to the input
field with the “autofocus” attribute
checked - Specifies that the input element is pre-selected when
the page loads (for type="checkbox" or type="radio")
id unique Specifies an id for the input element which is to be
identifier used in CSS or javaScript
maxlength number Specifies the maximum number of characters allowed
in a text field
name fieldname Specifies a name for the input element. The name
attribute is used to collect the fields value when
submitted

Input Field Attributes

placeholder text The entered text is used as a hint to help users fill out
the input field
required - Indicates that the input field's value is required in order
to submit the form
size number Specifies how many characters should be visible in the
text field
value value Specifies an initial value for the input element

Label - <label> tag

 The <label> tag defines a label for input, select and textarea
elements.
• It does not render as anything special for the user.
 The for attribute of the <label> tag should be equal to the id
attribute of the related element to bind them together.
Note: to select the Chinese language, user can click either the check box for Chinese
or the word Chinese

Radio Buttons
 Radio Buttons are used when you want the user to select
one of a limited number of choices.
 Use the name attribute to group the radio buttons in a group
so that only one button can be selected within the group.

Checkboxes
 Checkboxes are used when you want the user to select one
or more options of a limited number of choices.

Drop Down Lists

 A drop-down box is a selectable list.
 It is created with the <select> and <option> tags.
 By default, the first item in the drop-down list is selected.

Text Area
 Text area serves as a multi-line input field for users to enter their own
comments.
• Size can be specified by the rows and cols attributes for the
<textarea> tag.
• rows attribute specifies the visible number of lines in a text area.
• cols attribute specifies the visible width of a text area.

Fieldset and Legend

 The <fieldset> element is used to group related data in a form.
 The <legend> element defines a caption for the <fieldset> element.

Styling Forms
 Forms can be styled using CSS (to be covered next week). You can use
the style attribute to style the form before we learn CSS.

Inline style - Example

Reading Reference
 http://www.w3schools.com/html/html5_intro.asp
 http://www.w3schools.com/html/html_images.asp
 http://www.w3schools.com/html/html5_audio.asp
 http://www.w3schools.com/html/html5_video.asp
 http://www.w3schools.com/html/html_forms.asp
 https://www.tutorialspoint.com/html/html_forms.htm

Summary
 Today we have learnt:
• Inserting images from different locations and modify
their size, position and create hot-spots.
• Adding audio and video to enhance a Web page
• How to insert various FORM elements such as

textboxes, radio buttons, check boxes etc.


Lecture 3 - Presentation Design

Uploaded by

Document Information

Original Description:

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

Lecture 3 - Presentation Design

Uploaded by

Copyright:

Available Formats

FC

At the end of this lecture, you will learn how to:

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

Graphics and Images

Polytechnic Foundation Programme Lecture 3

 Both gif and jpg files can be used as HTML backgrounds.

Example – Background Image

Polytechnic Foundation Programme Lecture 3

Tips on Background Images

 Avoid tiling if the image is not homogeneous

Polytechnic Foundation Programme Lecture 3

Foreground or Inline Images

 Which tag is to be used to add foreground image?

Polytechnic Foundation Programme Lecture 3

Inline Images – <img> Tag

<img style= "float:right;">

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

Location of the image file

• If the file is in a subfolder called ‘Media’ within current HTML folder:

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

Image Maps - <map>

Polytechnic Foundation Programme Lecture 3

When user clicks

Polytechnic Foundation Programme Lecture 3

Adding Audio using <audio> tag

Polytechnic Foundation Programme Lecture 3

 You may include multiple source in the audio element. The

Polytechnic Foundation Programme Lecture 3

Adding Audio using Link <a>tag

Polytechnic Foundation Programme Lecture 3

Example – Adding Audio (2-in-1)

Viewer can choose to play

Attribute Value Description

Polytechnic Foundation Programme Lecture 3

Adding Video using <video> tag

Polytechnic Foundation Programme Lecture 3

Example – Adding Video

Works similar to <audio>

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

 E.g. "Search" feature in a website uses a form

 This is what happens when the form is submitted:

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

Creating a form example

Polytechnic Foundation Programme Lecture 3

Action Attribute and Submit Button

 When the user clicks on the "Submit" button, the content of

Polytechnic Foundation Programme Lecture 3

Example - Action Attribute and Submit Button

When to Use POST?

Polytechnic Foundation Programme Lecture 3

Polytechnic Foundation Programme Lecture 3

Input Fields Attributes

Polytechnic Foundation Programme Lecture 3

Input Field Attributes

Polytechnic Foundation Programme Lecture 3

Input Field Attributes

Polytechnic Foundation Programme Lecture 3