03 HTML2
03 HTML2
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
Frame (banner.html)
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”>
<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
• 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
14
HTML – Fundamentals
Floating Frames
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
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
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 />
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:
Reset
<input type="reset" name="submit2" value="Reset">
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
Content
positioned
within this
block
35
HTML – Fundamentals
DIV
attributes
• ID=“name”
• STYLE = “style parameters”
36
HTML – Fundamentals
DIV
37
HTML – Fundamentals
DIV
content
content
content content
content
content
38
HTML – Fundamentals
DIV
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
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
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>
THANK YOU