Scribd
Upload
2 views

frames&forms

This document covers HTML topics including frames, forms, multimedia, and graphics. It explains the structure and attributes of frames and forms, the methods of data submission, and how to embed multimedia elements in HTML. Additionally, it introduces the HTML canvas for drawing graphics using JavaScript.

Uploaded by

Tesfalegn Yakob
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

frames&forms

This document covers HTML topics including frames, forms, multimedia, and graphics. It explains the structure and attributes of frames and forms, the methods of data submission, and how to embed multimedia elements in HTML. Additionally, it introduces the HTML canvas for drawing graphics using JavaScript.

Uploaded by

Tesfalegn Yakob
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

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:

You might also like