Scribd
Upload
19 views61 pages

03 HTML2

This document discusses advanced HTML topics including frames, embedded objects, and forms. It provides examples of how to use the <frameset>, <iframe>, <embed>, <object>, and <param> tags to divide pages into frames and embed multimedia objects like videos. It also explains how HTML forms work using the <form> tag and how forms send input data to servers using the action and method attributes.

Uploaded by

kamran khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views61 pages

03 HTML2

This document discusses advanced HTML topics including frames, embedded objects, and forms. It provides examples of how to use the <frameset>, <iframe>, <embed>, <object>, and <param> tags to divide pages into frames and embed multimedia objects like videos. It also explains how HTML forms work using the <form> tag and how forms send input data to servers using the action and method attributes.

Uploaded by

kamran khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 61

Advanced HTML: Frames,

Embedded Objects, and Forms

By
Fahad Satti
Revisiting Previous Lecture
• HTML fundamentals – Basic example
• Text Formatting elements
• Style Attribute – Introduction of CSS in HTML
• Hyperlinks and Anchors
• HTML Lists – Unordered, Ordered, Definition
• HTML Tables – Rowspan and Colspan

2
Tables, Rows, and Data

<table border="1">
<tr>
<td>Student</td>
<td
align="right">CGPA</td>
</tr>
<tr>
<td>Mansoor</td>
<td align="right">3.8</td>
</tr>
<tr>
<td>Hamid</td>
<td align="right">3.7</td>
</tr>
</table>
Result
3
Tables – Rowspan and Colspan
<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">
<TR>
<TD colspan=2 align='center'>
<font color="red"><b>Student Grades</b></font>
</TD>
</TR>
<TR>
<TD><b>Student</b></TD>
<TD><b>Grade</b></TD>
</TR>
<TR>
<TD>Tom</TD>
<TD rowspan=2>A</TD>
</TR>
<TR>
<TD>Sue</TD>
</TR>
</TABLE>

4
HTML – Fundamentals
Frames

• Frames divide a browser window into several pieces or


panes, each pane containing a separate HTML page.
• Key advantages that frames offer is that you can then
load and reload single panes without having to reload
the entire contents of the browser.
• A collection of frames in the browser window is known
as a frameset.
• The window is divided up into frames in a similar
pattern to the way tables are organized (into rows and
columns)
5
Frames and Framesets
• Separation of contents in multiples pages
<html> rows vs. cols
<head>
<title>Its main page</title>
</head>
<frameset rows="30%,70%">
<frame name="top" src="banner.html"/>
Frameset
<frame name="bottom" src="main.html"/>
</frameset>
</html>

Frame (banner.html)

Another Frame (main.html)


6
Frames and Framesets
<frameset cols="33%,33%,33%">
<frame name="bing" src="http://bing.com"/>
<frame name="google" src="http://google.com"/>
<frame name="duck" src="http://duckduckgo.com"/>
</frameset>

7
HTML – Fundamentals
Basic Frames

Basic tags
• <frameset> ..</frameset>
• <frame />
• <noframes> .. </noframes>

Basic attributes
• cols = “values”
• rows = “values”
• name = “frame_name”
• src = “frame_source(url)”
• target = “frame_name”

8
HTML – Fundamentals
Basic Frames

Banner

Menu Content

Footer

9
HTML – Fundamentals
Basic Frames

<frameset rows=“80,*,80”> Banner

<frame src=“banner.html” /> Menu Content

<frameset cols = “25%,75%” > Footer


<frame src=“menu.html” />
<frame src=“content.html” />
</frameset>
<frame src=“footer.html” />
</frameset>
TIP: Do not write frameset within the body. Should be in head or outside.
10
HTML – Fundamentals
Basic Frames – Noframe element

<frameset rows=“80,*,80”>
<frame src=“banner.html” />
<frameset cols = “25%,75%” >
<frame src=“menu.html” />
<frame src=“content.html” />
</frameset>
<frame src=“footer.html” />
<noframes>
<body>
Welcome to my page.
<A HREF="noframes.htm">Continue</A>
to the frame-free version.
</body>
</noframes>
</frameset>

11
HTML – Fundamentals
Basic Frames

FRAMESET attributes

• FRAMEBORDER="yes|no"
• BORDER=pixels | default is ‘6’
• BORDERCOLOR="#hexcolor|colorname"

• e.g.
< frameset rows="80,*,80" border=2 bordercolor=“red" >
..
</frameset>

12
HTML – Fundamentals
Basic Frames

Individual FRAME attributes

• SCROLLING="yes|no|auto"
• NORESIZE
• MARGINWIDTH=pixels
• MARGINHEIGHT="pixels"
• BORDERCOLOR="color"
• FRAMEBORDER="yes|no"|0
• NAME=“frame_name”

13
HTML – Fundamentals
Floating Frames – iframe element

• Floating frames allow you to create a frame


within the boundaries of a page

Basic Frames Floating Frames

14
HTML – Fundamentals
Floating Frames

<IFRAME attributes ></IFRAME>


Attributes
• SRC=URL
• HEIGHT=pixels|percent,
• WIDTH=pixels|percent
• ALIGN=left|right
• FRAMEBORDER=0

TIP: Usually written inside the body of a page


15
HTML – Fundamentals
Floating Frames
<html>
<head>
<title>My 100th Web Page</title>
</head>
<iframe
src="SimpleFirstWebPage.html“
style="overflow:hidden;
margin:0;
padding:0;
width:1200px;
height:400px;“

frameborder="0"></iframe>
<!– More Page Contents -->
</html>

16
Multimedia in HTML
• Playing Background Sound
• Embed Tag
• Embedding Flash Files
• Embedding Movie
• Embedding youtube movie
Playing Sound
• BGSound Tag (for Internet Explorer)
– Works under the HEAD tag
– Syntax: <BGSOUND src=“bird.mp3” loop=2>
– LOOP = 1 … infinite

• Embed Tag (works in almost every browser)


– Syntax: <EMBED src=“bird.mp3” Autostart=“true”
Height=60 width=140>

18
Embed TAG
• The easiest and "most supported" way to add video or sound to your web site
is to include the special HTML tag called EMBED.
• This causes the browser itself to include controls for the multimedia. No
ActiveX, Java, VBscript or JavaScript is needed for this method. This tag is one-
sided, meaning that there is no </EMBED> tag.
<EMBED SRC="mymovie.mov" WIDTH=100 HEIGHT=100>
Embedding Flash File
• After creating a Flash movie you choose File > Save As from the top menu
to save your movie. Save the file as "Somefilename.fla".

• To embed the Flash movie you just made into an HTML page, you should
go back to your Flash program and do the following steps:
• Step 1
Choose File > Open. Open a Flash movie you have created.
• Step 2
Choose File > Export Movie.
• Step 3
Name the file "somefilename.swf". Choose the location where the file is to be
stored (in your Web folder). Click OK.
• Step 4
Open the HTML page where you want to insert your Flash movie. Insert this
code:
Embedding Flash File
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

• Note: A broken icon will appear on the Web page if the user does
not have the Flash plug-in installed.
Embedded Objects

• Object Tag: Embedding multimedia objects


• Param Tag: Runtime Settings
<object name="unique name" type="MIME Type"
height="nn" width="nn" >
<!-- parameters -->
</object>

<param name="unique name" value="data value“/>

22
Example: Embedding YouTube Video

<h1>Beautiful Pakistan</h1>
<object width="425" height="355"
type="application/x-shockwave-flash">
<param name="movie"

value="http://www.youtube.com/v/lIoPEf9h4QY&rel=1"/>
<param name="wmode" value="transparent"/>
<param name="allowFullScreen“ value="true“>
<param name="quality" value="best" />
</object>

23
What are forms?
• HTML forms are used to create (rather primitive) GUIs on Web
pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
• A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
– Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the
information in the form elements to the server
• The form’s parameters tell how to send the information to the
server
The <form> tag
• The <form attributes> ... </form> tag encloses form elements (and
probably other HTML as well)
• The attributes to form tell what to do with the user input
– action="url" (required)
• Specifies where to send the data when the Submit button is clicked
– method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
– method="post"
• Form data is sent in the body of the URL request
– target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
The <input> tag
• Most, but not all, form elements use the input tag, with a type="..."
attribute to tell which kind of element it is
• type can be text, checkbox, radio, password,
hidden, submit, reset, button, file, or image
• Other common input tag attributes include:
• name: the name of the element
• value: the “value” of the element; used in different ways
for different values of type
• readonly: the value cannot be changed
• disabled: the user can’t do anything with this element
• Other arguments are defined for the input tag but have
meaning only for certain values of type
Input Tags (1/n)
Textfield
<label for="textfield">Input field:</label>
<input type="text" name="textfield" value="with an initial value" />

Password
<label for="passwordField">Input field:</label>
<input type="password" name="passwordField" value="secret" />

Textarea
<label for="textarea">Input field:</label>
<textarea name="textarea" cols="24" rows="2">This is a large input
area.</textarea>

Number
<label for="number">I am:</label>
<input type="number" id="age" name="age" min="1" max="100">
years old</input>

27
Input Tags (2/n)
Color
<label for="color">My favourite color is:</label>
<input type="color" id="color" name="color">

Date
<label for="birthday">I was born on:</label>
<input type="date" id="birthday" name="birthday">

Email
<label for="email">My email address is:</label>
<input type="email" id="email" name="email" size="30"
placeholder="[email protected]">

Tel
<label for="tel">My phone number is:</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{2}-3[0-9]3-[0-9]
{7}" placeholder="92-3XXX-XXXXXXX">

28
Input Tags (3/n)
File
<label for="pic">Here is my picture:</label>
<input type="file" id="pic" name="pic">

Checkbox
<label for="robo">I am a robot!</label>
<input type="checkbox" name="robo" value="checkbox"
checked />

• name: used to reference this form element from JavaScript


• value/id: value to be returned when element is checked

Note that there is no text associated with the checkbox—you have to supply text
in the surrounding HTML

29
Input Tags (4/n)
Radio
<label for="fake">This is a fake web page.</label>
<input type="radio" name="fake" value="yes" checked>Yes</input>
<input type="radio" name="fake" value="no">No</input>

• If two or more radio buttons have the same name, the user can only select
one of them at a time
– This is how you make a radio button “group”
• If you ask for the value of that name, you will get the value specified for the
selected radio button
• As with checkboxes, radio buttons do not contain any text

30
Input Tags (5/n)
Select
<label for="select">What color is the sky?</label>
<select name="select">
<option value="red">Red</option>
<option value="blue" selected="selected">Blue</option>
<option value="green">Green</option>
</select>

• Select an option:
– Selected=“selected”
• Additional Arguments
– size: the number of items visible in the list (default is "1")
– multiple: if set to "true", any number of items may be selected (default is "false")

31
Hidden fields
• A hidden field:

<p>A hidden field:


<input type="hidden" name="hiddenField"
value="nyah" />
&lt;-- right there, don't you see it?
</p>

• What good is this?


– All input fields are sent back to the server, including hidden fields
– This is a way to include information that the user doesn’t need to see (or that
you don’t want her to see)
– The value of a hidden field can be set programmatically (by JavaScript) before
the form is submitted
Buttons
Submit
<input type="submit" name="submit1" value="Submit">

Reset
<input type="reset" name="submit2" value="Reset">

Input type button


<input type="button" name="button1" value="Push Me">

Button
<button name="button2">Push Me 2</button>

Self-Study: https://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use 33
A complete example
HTML – Fundamentals
DIV

• Allows you create a position-able block of


content.

Content
positioned
within this
block

35
HTML – Fundamentals
DIV

<div attributes> content </div>

attributes
• ID=“name”
• STYLE = “style parameters”

36
HTML – Fundamentals
DIV

< DIV ID=“fred”


STYLE = “POSITION:absolute|relative;
VISIBILITY:visible|hidden;
Z-INDEX:number;
WIDTH:width in pixels;
HEIGHT:height in pixels;
TOP:pixels from top of page or block;
LEFT:pixels from left edge of page or block;
PADDING:margin in pixels;
other style attributes; “ >
content
</DIV>

37
HTML – Fundamentals
DIV

content

content
content content

content
content

38
HTML – Fundamentals
DIV

<div style="position:absolute; left:100px;


top:100px; width:100px; height:100px;
background-color:#ffffff; ">

39
Images

• Image Tag
– <img src=“url” height=“…” width=“…” />
– Relative path in src attribute
• Image Maps
<img usemap=“url” …

<map name=“…”>
<area shape=“rect” href=“url” coords=“x1,y1, x2,y2”/>
…
</map>
40
HTML – Fundamentals
Using Images

• Images take longer to download than text


• The larger the image, the slower the page
• Use optimization software
• Use thumb nail images

41
HTML – Fundamentals
Other uses of Images

• Page background
– <body background = “url” >
– <body class=“background”>
– body.background { background-image:$url; }

• Table background
– <table background=“url”>
– <table class=“background”>
– table.background { backlground-image:url; }

• DIV background
– <div style={ background-image:url; } >

42
Relative Paths
Current Page Address Destination Address Relative URL

http://www.demo.com/index.html http://www.demo.com/staff.html staff.html

http://www.demo.com/index.html http://www.demo.com/products/list.html products/list.html

http://www.demo.com/index.html http:// products/specification/


www.demo.com/products/specification/spe spec1.html
c1.html
http:// http://www.demo.com/index.html ../index.html
www.demo.com/products/list.html
http:// http://www.demo.com/index.html ../../index.html
www.demo.com/products/special/sp
ec1.html
Relative URL Formation Examples

43
44 HTML Head
Control Information and Type Declaration
Control Information
• Meta Tag
– Author, Description, Keywords
– http-equiv
<head>
<meta name="Author" content="Ali" />
<title>Title of the page</title>
<!-- Some more information --> Page Refresh
</head>
or Redirection
<META HTTP-EQUIV=“refresh"
CONTENT=“10;URL=http://www.cricinfo.com">

<META HTTP-EQUIV="Refresh"
CONTENT="5;URL=http://www.seecs.edu.pk">
45
Document Types

• DOCTYPE
• Available Options
– Strict
– Transitional/Loose
– Frameset
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Rest of the page -->
</html>

46
W3C Validation Service
• http://validator.w3.org

47
No surprises!

48
Conclusion
• Recap
– Frames, Forms and Embedded Objects
– Header Information

49
HTML5
<!DOCTYPE html> Simplified DOCTYPE
<html>
<head>
Simplified Character Encoding
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

Web Engineering. More HTML 50


There’s more!!
• New semantic elements like <header>,
<footer>, <article>, and <section>.
• New form control attributes like number,
date, time, calendar, and range.
• New graphic elements: <svg> and <canvas>.
• New multimedia elements: <audio> and
<video>.

Web Engineering. More HTML 51


And More!!
• New HTML5 API's (Application Programming
Interfaces)
– HTML Geolocation
– HTML Drag and Drop
– HTML Local Storage
– HTML Application Cache
– HTML Web Workers
– HTML SSE

Web Engineering. More HTML 52


HTML5 Browser Support
• HTML5 is supported in all modern browsers.
• In addition, all browsers, old and new,
automatically handle unrecognized elements
as inline elements.
• Because of this, you can "teach" older
browsers to handle "unknown" HTML
elements.

Web Engineering. More HTML 53


New Semantic/Structural Elements
• <article> Defines an article in the document
• <details> Defines additional details that the user can view or hide
• <dialog> Defines a dialog box or window
• <figcaption> Defines a caption for a <figure> element
• <figure> Defines self-contained content, like illustrations, diagrams, photos, code
listings, etc.
• <footer> Defines a footer for the document or a section
• <header> Defines a header for the document or a section
• <nav> Defines navigation links in the document
• <progress> Defines the progress of a task
• <section> Defines a section in the document
• <summary> Defines a visible heading for a <details> element
• <time> Defines a date/time
• <wbr> Defines a possible line-break

Web Engineering. More HTML 54


New Form Elements
• <datalist> Defines pre-defined options for
input controls
• <keygen> Defines a key-pair generator field
(for forms)
• <output> Defines the result of a calculation

Web Engineering. More HTML 55


New Input Types
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Web Engineering. More HTML 56


HTML5 Graphics
Tag Description

<canvas> Defines graphic drawing using JavaScript

<svg> Defines graphic drawing using SVG

Web Engineering. More HTML 57


New Media Elements
Tag Description

<audio> Defines sound or music content

Defines containers for external


<embed>
applications (like plug-ins)

<source> Defines sources for <video> and <audio>

<track> Defines tracks for <video> and <audio>

<video> Defines video or movie content

Web Engineering. More HTML 58


HTML5 Semantic Elements
• Semantics is the study of the meanings of words
and phrases in language.
• Semantic elements are elements with a meaning.
• A semantic element clearly describes its meaning
to both the browser and the developer.
• Examples of non-semantic elements: <div> and
<span> - Tells nothing about its content.
• Examples of semantic elements: <form>, <table>,
and <img> - Clearly defines its content.
Web Engineering. More HTML 59
HTML5 Semantic Elements
HTML5 offers new semantic elements to
define different parts of a web page:  
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Web Engineering. More HTML 60


Questions?

THANK YOU

Copyright 2005 - The Small Business


61
Depot

You might also like