CHAPTER 2:

HTML & Multimedia

on the Web

Prepared for:
CSC264 – Introduction to Web and
Mobile Application
OVERVIEW OF THIS CHAPTER

In this chapter, you will learn about:

 Alignment and font style
 Links, List and Table
 Objects and Images
 Adding multimedia elements like images,
audio and video on the webpage
 HTML STRUCTURE:TEXT
Bold and Italic Tag:
 The syntax for bold tag:

<b> content </b> <strong> content </strong>

 The syntax for italic tag:

<i> content </i> <em> content </em>

 Will display bold/italic text

when used
 HTML STRUCTURE:TEXT
Sup and Sub Tag:
 The syntax for sup tag:
(Will display text as
superscript)
^content

 The syntax for sub tag:

(Will display text as
subscript)
_content
 HTML STRUCTURE: TEXT

Text Layout:
 The following tags or attributes can be used to change how
the text is aligned:
 HTML STRUCTURE: TEXT

Text Layout:
 HTML STRUCTURE: DIVISION
Div Tag:
 The syntax for font
tag:
<div> content </div>

 Defines a division or a section of a HTML

document
 Is used to group elements to format them with
CSS: < div style = “property:value;”>
 HTML STRUCTURE: LISTS

Unordered Lists:
 Allows you to list down items without any form of
ordering
 The syntax for unordered list is:
<ul> content </ul>

 Each item that needs to be listed down will have the following
syntax:
<li> content </li>
 HTML STRUCTURE: LISTS
Unordered Lists (Style Attribute):
 To define the style of the marker (bullet points), a style attribute
can be added
Style Description
list-style-type:disc The list items will be marked with bullets
(default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
 HTML STRUCTURE: LISTS
Ordered Lists:
 Allows you to list down items in order
(numerically)
 The syntax for ordered list is:
<ol> content </ol>

 Each item that needs to be listed down will have the following
syntax:
<li> content </li>
 HTML STRUCTURE: LISTS

Ordered Lists (Type Attribute):

 To define the style of the marker (bullet points), a type attribute can be
added
Style Description
type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers
 HTML STRUCTURE: LISTS

Description Lists:
 Allows you to list down items with a description of each
item
 The syntax for description list is:
<dl> content </dl>

 Each item name or term that is listed down will have the following
syntax:
<dt> content </dt>

 For the description of each item, the following syntax is

used:
<dd> content </dd>
 HTML STRUCTURE: LISTS
Description Lists:
 HTML STRUCTURE: LISTS
Nested Lists:
 Allows you to list items within
another list
MULTIMEDIA ON THE WEB

What is MULTIMEDIA?

Is a variety of elements of media

such as: Text,Video,Audio, Graphic
and Animation.

Why is it used
on a web
page?

To enhance the appearance and

presentation of
the web page
 MULTIMEDIA ON THE WEB

Graphics (Images):
 Most commonly used formats for graphics are:
1. JPEG (Joint Photographic Expert Group)

WHY? 
Often used for scanned photographs, artworks,or other
images that include smooth colour variations
 The files have *.jpg extensions.

2. GIF (Graphics Interchange Format)

 Works best for images with only a few distinct colours

Uses compression
techniques to  Often used for line drawings and simple cartoons
reduce its file for  The files have *.gif extensions
faster downloading
on theWeb  Animated GIF’s size is larger than static GIF:
Therefore, overusing animated GIF can increase the page size.
 MULTIMEDIA ON THE WEB

Graphics (Images):
 Other graphics format
include:
Acronym Name File Extension
PNG Portable Network *.png
Graphics
TIFF Tagged Imaged File *.tif
Format
PCX PC Paintbrush *.pcx
BMP Bitmap *.bmp
 MULTIMEDIA ON THE WEB
Graphics (Images):
 To add an image as content on a web
page,
the img element is used (NO end tag)

 Also, you need to include src <img src =“......”>

attribute:

You can use CSS to customize your

image
 MULTIMEDIA ON THE WEB
Graphics (Images):
 To add an image as a background of a
web page, the background attribute is
used:
<body background = “......”> content </body>
 MULTIMEDIA ON THE
WEB
Audio and Video:
 Can be included in a web page by either:
1. Embedding:
 Audio and video that are embedded can be
played directly on
the same web page
 Allows audio and video to be integrated with
other elements within the page
 It provides a smoother viewer experience
1. Linking:
 Audio and video that are linked to a web page
are played in their own separate window
 It sets up a link to an external page which will
open when the
link is clicked
 MULTIMEDIA ON THE WEB
Embedding Audio:
 To embed sound on a web page, the audio element and src
attribute
will be used:
<audio otherAttributes>
<source src =“......”type =“.....”>
</audio>
naming
 Other attributes that can be used to control the way the sound
is played are shown below:

Attribute Result
File Format Audio Type
autoplay Plays sound when the page is viewed
MP3 audio/mpeg
controls Shows a slider that lets the user control the
sound (Its width and length can be changed Ogg audio/ogg
using CSS)
Wav audio/wav
loop Plays the sound repeatedly
 MULTIMEDIA ON THE WEB
Embedding Audio: You can use style
attribute to customize
your controls

What is the purpose of this

line?
 MULTIMEDIA ON THE WEB
Embedding Video:
 To embed video on a web page, the video element and src
attribute
will be used:
<video otherAttributes>
<source src =“......”type =“.....”>
</video>

 Other attributes that can be used to control the way the sound
is played are shown below:

Attribute Result
File Format Video Type
autoplay Plays video when the page is viewed
MP4 video/mp4
controls Shows a slider that lets the user control the
video (Its width and length can be changed using WebM video/webm
CSS) Ogg video/ogg
loop Plays the video repeatedly
 MULTIMEDIA ON THE WEB
You can use style attribute
Embedding Video: to customize your controls

Provide alternatives:
The browser will use the first recognized
format.
 HTML: LINKS

Links:
 Allow users to get from one web page to another
 In HTML, a link is known as Hyperlink

Is an element, a text,or an image that you can click

on
allowing you to jump to another document (web
page)

 A hyperlink has two ends:

1. Source anchor:
The link will start here and point to the
destination anchor
2. Destination
anchor: Any
web document
 HTML: LINKS

Links:
 Uses the anchor
tag:
<a> link text </a>

This is the visible part of the link (usually

underlined)

 Also, it uses the href attribute:

<a href = “...........”> link text </a>

Refer to the destination

address
 HTML: LINKS
Links:
 There are 2 types of links:
1. Internal Link (Local Link):
Will link to a different page of the same website
NOTE: Name your files and folders in lower case and
without spaces
 HTML: LINKS
Links:
 There are 2 types of links:
2. External Link (Global Link):
Will link to a different page outside the current site (a new
website)
 HTML: LINKS

Links (Target Attribute):

 By default:
Links will open in the current window
 If you want the link to open up in another
window: You can add a target attribute to
the anchor tag

<a href =“.....”target =“value”> link text </a>

Specify where to open the linked

document
Value Purpose
_self Link will be opened in the same frame as it was clicked
(default)
_blank Link will be opened in a new window or tab
 HTML: LINKS

Links (Target Attribute):

 HTML: TABLES
Table Element:
 Allows you to arrange data into rows and columns of cells
 HTML tables are created using the table element, which
contains:
 tr tag:
Used to create table rows
<table>
 td tag: .... tr,th and td tags ...
Used to create data cells </table>
 th tag:
Used to create table
headings

cell <th> cell <th> row <tr>

table
<table>

row <tr>
cell <td> cell <td>
HTML:
TABLES

Notice that the table has

no border
WHY IS THAT?
 HTML: TABLES
Internal Style Sheet

Inline Style
Sheet
HTML:
TABLES

Used to make borders

collapse into only
one border

Used to add cell padding:

By creating a space
between the cell
content and its borders
 HTML: TABLES

Notice that these cells should

have been headings

To make a table cell as

heading: Use the <th> tag
 HTML: TABLES
Table Cells that Spans Many Column:
 To make a cell span more than one column, use the colspan
attribute:

<th or td colspan =“value”>

.....................................
</th or /td>

cell colspan is used when you

have uneven number of
cell column in a row
cell

cel cel
l l
HTML: TABLES

This is what happens

when you span your
columns

This is what happens

when you
don’t span your columns
 HTML: TABLES
Table Cells that Spans Many Row:
 To make a cell span more than one column, use the rowspan
attribute:

<th or td rowspan =“value”>

.....................................
</th or /td>

cel cel
l l
rowspan is used when you
have uneven number of cel
l
row in a column cel
l
cel
l
 HTML: TABLES

This is what happens when

you span your rows

This is what happens when

you
don’t span your column
This is what happens when
you
don’t span your rows
 HTML: TABLES

Table with a Caption:

 To give a caption to your table,
use
the caption tag:
<caption> content </caption>