HTML Lecture 3
HTML Frames, Forms, HTML
Multimedia and HTML Graphics.
HTML Frames
What are frames?
A method for dividing the browser window into smaller subwindows.
Each subwindow displaying a different HTML document.
How does a page with frame look like?
Frames & Framesets
• Frames are a way of dividing the browser window into several
independent windows in which can be loaded different urls.
• Each frame can be independently loaded a different url.
• Each frame can scroll independently when necessary
• Has advantages and drawbacks
Advantages
Improved performance (minimal page refresh)
Flexibility
Simultaneous multiple views
Drawbacks
Fairly complex (for developer)
May confuse users (if not properly used)
Some (old) browsers may not support frames
URL masking, when printing and bookmarking
• Frames are found in Framesets.
• Framesets define the ‘layout’ of the frames it contains.
• Several frames can be included in a frameset.
• Framesets can be nested in one another to provide a more complex
layout.
Tag format: Nested framesets
Single frameset <frameset>
<frame>
<frameset> <frameset>
<frame> <frame>
<frame> <frame>
… …
</frameset> </frameset>
<frame>
…
</frameset>
Attributes
Frameset
• rows = “row dimensions” { ex. rows=“10%, 90%” }
• cols = “column dimensions” { ex. cols=“20%, *, 30% }
• border = “value”
• bordercolor = “color”
• frameborder = “value” { 0, 1, no, yes }
• framespacing = “value”
Attributes (cont’d
Frame
• name = “frame_name”
• src = “url” { url can be local or external }
• noresize [= “noresize”]
• scrolling = “value” { auto, yes, no }
• allowtransparency = “value” { in % }
• frameborder = “value” { 0, 1, yes, no }
• bordercolor = “color”
Examples
index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” noresize scrolling=“no”>
<frame name = “viewer” src=“http://www.google.com”
noresize>
</frameset>
</html>
nav.html
<html><body>
<a href=“http://www.google.com” target=“viewer”>google</a><br>
<a href=“http://www.yahoo.com” target=“viewer”>yahoo</a><br>
<a href=http://www.altavista.com target=“viewer”>altavista</a><br>
<a href=“http://www.msn.com” target=“viewer”>msn</a><br>
</body></html>
Examples (cont’d)
index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” scrolling=“no”>
<frameset rows = “20%, *”>
<frame src=“title.html” noresize>
<frame name = “viewer” src=“http://www.google.com”
noresize>
</frameset>
</frameset>
</html>
title.html
<html><body>
<h1>Welcome to My Bookmarks !</h1>
</body></html>
Inline Frames (iframe)
• iframes are also called floating frames
• Like frames
• But can occur anywhere in the <body> tag of an html document
Unlike frames which should only occur in the <frameset> tag
• Tag format: Attributes
• src = “url”
<iframe></iframe>
• name = “name”
• height = “value”
• width = “value”
• scrolling = “value” { auto, yes, no }
• align = “alignment” { left, right,
middle, top, bottom }
• allowtransparency = “value”
Example
<html>
<head>
<title>iFrame sample</title>
</head>
<body>
Below is the google site <br>
<iframe height="600px" width="600px"
src="http://www.google.com" scrolling="auto"></iframe>
</body>
</html>
HTML Forms
• Used to gather input from users
• The input is usually sent to a server-side script for processing
• The data can be sent in two methods: GET & POST
• GET
for small and non-secure data
Is the default method
Data is sent as part of the request URL
Limitation in size of data
HTML Forms (cont’d)
• POST
For large & secure data
Input is sent as a data stream after the request URL
• Tags
The <form> tag
Contains all input elements in the form
Defines the method of sending data
Defines the server-side script responsible for accepting the
data
HTML Forms (cont’d )
Attributes:
name=“name”
method=“method” {get, post}
action=“url” {url of the server-side script to post data to}
enctype=“enctype” {multipart/form-data, text/plain, … }
multipart/form-data – used when uploading files.
Ex.
<form method=“post” action=“search.php”>
….
</form>
HTML Forms (cont’d)
<input> tag
used to define input fields in a form
several types of input fields
{textbox, listbox, checkbox, radio, button, …}
Attributes:
name=“name”
type=“type”
{text, hidden, password, file, submit, reset, button, checkbox,
radio, image}
value=“value”
disabled=“disabled”
checked=“checked”
HTML Forms (cont’d)
The possible input types:
text – input text box
hidden – a hidden field for storing values
password – password input box
file – input box for file uploading (browse)
submit – a button that submits the form
reset – a button that resets form fields to their original values
button – a general purpose button
checkbox – a check box
radio – a radio button (option button)
image – an image button that submits the form
HTML Forms (cont’d)
Other input fields
• <textarea> tag
used to input a large block of text
• Tag format: <textarea>…</textarea>
Attributes:
name=“name”
cols=“num_columns”
rows=“num_rows”
readonly=“readonly”
wrap=“wrap_type” {off, hard, soft, virtual, physical}
HTML Forms (cont’d)
<select> tag
used to create a select box
Tag format:
<select>
<option>…</option>
<option>…</option>
…
</select>
Attributes:
<select>
name=“name”
multiple=“multiple” {enables selection of multiple items}
disabled=“disabled”
HTML Forms (cont’d)
<option>
value=“value”
selected=“selected”
disabled=“disabled” {browser compatibility: Firefox ?}
Ex.
1. <select name=“department”>
<option value=“1”>Computer Science</option>
<option value=“2”>Information Science</option>
<option value=“3”>Computer Engineering</option>
</select>
2. Modify the above input so that Information Science is selected by
default.
HTML Forms (cont’d )
submit & reset buttons
the vlaue attribute is the caption of the buttons
Eg. <input type=“submit” value=“ok”>
inserts a button with the caption (label) ok.
file upload fields
Ex. <input type=“file” name=“doc”>
<label> tag
used to give labels to input fields
Eg.
<label>First Name:
<input type=“text” name=“fname”>
</label>
HTML Forms (cont’d)
<fieldset> tag
used to group input fields in a form
the title/label of the group is set using the <legend> tag
Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>
Attributes:
<legend>
align=“alignment” {left, center, right}
HTML Forms (cont’d)
Presentation
tables can be used to align form fields and their labels so that the
presentation of the form looks more regular.
one possibility is to use:
one table row per input field
within a table row
one column for the labels
one column for the input fields
the table borders can be set to 0 so that they are not visible
other features of tables (rows & columns) can be adjusted as
required
HTML Forms (cont’d)
Presentation (cont’d)
Cascading Style Sheets (CSS) can be used to define further
presentation related attributes for input fields
Ex. all text input fields should have font size of 10 and
background color of grey.
Exercises
Create an HTML page which displays a login screen with
o a username field
o a password field
o a button to submit the form
o a button to reset the content of the form
HTML Forms (cont’d)
Create an HTML page which displays student registration screen with
o a name field
o an ID field
o a department field {select box with values:
1. Computer Science
2. Information Science
3. Computer Engineering
a semester field {select box with values:
1. I
2. II
an academic year field
{select box with values: 1998-2000, 2000 default}
a button to submit the form
a button to reset the form
Inserting multimedia in html
HTML Multimedia
• Multimedia on the web is sound, music, videos, movies, and
animations.
What is Multimedia?
• Multimedia comes in many different formats.
• It can be almost anything you can hear or see, like images, music,
sound, videos, records, films, animations, and more.
• Web pages often contain multimedia elements of different types and
formats.
HTML multimedia cont’d……...
Multimedia Formats
• Multimedia elements (like audio or video) are stored in media files.
• The most common way to discover the type of a file, is to look at the
file extension.
• Multimedia files have formats and different extensions
like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
HTML multimedia cont’d………
HTML multimedia cont’d…….
Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.
Common Audio Formats
Cont’d…..
Note: Only MP3, WAV, and Ogg audio are supported by the HTML
standard.
HTML Video
The HTML <video> element is used to show a video on a web page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>This is my HTML video file</title>
</head>
<body>
<h3>This is my video playlist html5 </h3>
<video width = 400 , controls="">
<source src="video.mp4" type="video/mp4">
your browser doesn't support HTML5 video
</video>
</body> </html>
HTML Graphics
HTML Canvas
What is HTML Canvas?
• The HTML <canvas> element is used to draw graphics on a web
page.
• The <canvas> element is only a container for graphics.
• You must use JavaScript to actually draw the graphics.
• Canvas has several methods for drawing paths, boxes, circles, text,
and adding images.
Browser support
Canvas Examples
• A canvas is a rectangular area on an HTML page.
• By default, a canvas has no border and no content.
• The markup looks like this:
Note: Always specify an id attribute (to be referred to in a script),
and width and height attribute to define the size of the canvas.
To add a border, use the style attribute.
Here is an example of a basic, empty canvas:
HTML canvas cont’d…..
<!DOCTYPE html>
<html>
<body>
<canvas id = “mycanvas” width = ”100” , height = “200”, style =
“border:1px solid #000000;”>
</canvas>
</body>
</html>
Add a JavaScript
• After creating the rectangular canvas area, you must add a JavaScript
to do the drawing.
• Here are some examples:
• Draw a Line
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
HTML canvas cont’d…..
<!DOCTYPE html>
<html>
Draw a Circle
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas
tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Canvas cont’d…..
<!DOCTYPE html>
<html>
Draw a Text <body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas
tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
HTML canvas cont’d…….
<!DOCTYPE html>
<html>
Draw Linear Gradient <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
HTML Canvas cont’d…
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220"
height="277">
<p>Canvas to fill:</p>
Drawing <canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
image Your browser does not support the HTML canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
HTML SVG Graphics
What is SVG?
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation
• The HTML <svg> Element
• The HTML <svg> element is a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text,
and graphic images.
HTML SVG cont’d….
<!DOCTYPE html>
<html>
<body>
SVG Circle
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4"
fill="yellow" />
Sorry, your browser does not
support inline SVG.
</svg>
</body>
</html>
HTML SVG cont’d…..
<!DOCTYPE html>
SVG Rectangle <html>
<body>
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline
SVG.
</svg>
</body>
</html>
Differences Between SVG and Canvas
• SVG is a language for describing 2D graphics in XML.
• Canvas draws 2D graphics, on the fly (with a JavaScript).
• SVG is XML based, which means that every element is available within
the SVG DOM. You can attach JavaScript event handlers for an element.
• In SVG, each drawn shape is remembered as an object.
• If attributes of an SVG object are changed, the browser can automatically
re-render the shape.
• Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn,
it is forgotten by the browser.
• If its position should be changed, the entire scene needs to be redrawn,
including any objects that might have been covered by the graphic.
Comparison of Canvas and SVG
o The table below shows some important differences between Canvas
and SVG:
