CHAPTER 3:

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
list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:none
Description
The list items will be marked with bullets (default)
The list items will be marked with circles
The list items will be marked with squares
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  Often used for line drawings and simple cartoons
techniques to  The files have *.gif extensions
reduce its file for
faster downloading  Animated GIF’s size is larger than static GIF:
on the Web 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 Graphics *.png
TIFF Tagged Imaged File Format *.tif
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 attribute: <img src =“......”>

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>

 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
Ogg audio/ogg
(Its width and length can be changed 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
WebM video/webm
(Its width and length can be changed using CSS)
Ogg video/ogg
loop Plays the video repeatedly
 MULTIMEDIA ON THE WEB
You can use style attribute to
Embedding Video: 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 column in a
cell cell row

cell cell
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>

cell cell

rowspan is used when you have

uneven number of row in a cell
column cell
cell
 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>