Download presentation
Presentation is loading. Please wait.
1
Try coding… Try to code the following table design: Cell 2 Cell 1
Lectures 7 & 8 Try coding… Try to code the following table design: Cell 2 Cell 1 Cell 3
2
<HTML> <BODY> <Table Border=1 Align=center> <TR> <TD rowspan=2>Cell1</TD> <TD>Cell2</TD> </TR> <TD>Cell3</TD> </Table> </Body> </HTML>
4
Text boxes - Attributes
<input type=text Name=“URL” Value= <Input type=text Name=“address” size=“40”> <input type=text Name=“age” maxlength=“3”>
6
Example – Checkbox <HTML> <HEAD>
<TITLE>CheckBox Example</TITLE> </HEAD> <BODY> <H3>Describe Your Phobia!</H3> <FORM ACTION= METHOD="POST"> What is <I>your</I> phobia? (Please check all that apply): <P> <INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR> <INPUT TYPE="CHECKBOX" NAME="Bald">Fear of becoming bald<BR> <INPUT TYPE="CHECKBOX" NAME=“Lock”>Fear of being locked inside<BR> <INPUT TYPE="CHECKBOX" NAME="Flying" Checked >Fear of flying<BR> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML>
8
Example – Radio button <HTML> <HEAD>
<TITLE>Radio Button Example</TITLE> </HEAD> <BODY> <H3>Survey</H3> <FORM ACTION=" METHOD="POST"> Which of the following best describes your current income level:<BR><BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE="Poverty">living below the poverty line<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Middle” Checked>living at the level of middle class<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Upper">living at the level of upper class<BR><BR> Which of the following best describes your political inclination:<BR><BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Nationalist" CHECKED>Worker of Nationalist Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Socialist">Member of Socialist Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Republican">Supporter of Republican Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“None">None of the above<BR> <P> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML>
10
Example - lists <HTML><BODY>
<FORM ACTION=" METHOD="POST"> Select your nationality:<P> <SELECT NAME=“Nationality" SIZE="4"> <OPTION>American</OPTION> <OPTION>Australian</OPTION> <OPTION>Hungarian</OPTION> <OPTION>Indian</OPTION> <OPTION>Iranian</OPTION> <OPTION SELECTED>Pakistani</OPTION> <OPTION>French</OPTION> </SELECT><P> Select your favorite city:<P> <SELECT NAME="City"> <OPTION>Sydney</OPTION> <OPTION>London</OPTION> <OPTION SELECTED>Lahore</OPTION> Countries visited last year:<P> <SELECT NAME=“Countries" SIZE="5" MULTIPLE> <OPTION>Canada</OPTION> <OPTION>Russia</OPTION> <OPTION>England</OPTION> <OPTION>Egypt</OPTION> <OPTION>Saudi Arabia</OPTION> </SELECT> </BODY></HTML>
12
Dividing the screen horizontally
<HTML> <HEAD> <TITLE>Horizontal Frames</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAME> </FRAMESET> </HTML>
14
Dividing the screen vertically
<HTML> <HEAD> <TITLE>Vertical Frames</TITLE> </HEAD> <FRAMESET COLS="20%,60%,20%"> <FRAME> </FRAMESET> </HTML>
15
frames.htm <HTML> <HEAD>
<TITLE>Horizontal Frames with Content</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAME SRC="1.htm“ Name=“upper”> <FRAME SRC="2.htm“ Name=“lower”> </FRAMESET> </HTML>
17
1.htm - Code <HTML> <HEAD> <BODY>
<H1>This text is from 1.HTM</H1> </BODY> </HTML>
18
2.htm- Code <HTML> <HEAD>
<TITLE>Horizontal Frames with links</TITLE> </HEAD> <BODY> <H1>This text is from 2.HTM</H1> <H1><A HREF=“3.htm" TARGET="lower">This is a link to 3.HTM</A></H1> </BODY> </HTML>
20
3.htm - Code <HTML> <HEAD>
<TITLE>Horizontal Frames</TITLE> </HEAD> <BODY> <H1>This text is from 3.HTM</H1> <H1><A HREF=“2.htm" TARGET="lower">This is a link back to 2.HTM</A></H1> </BODY> </HTML>
21
Ready-made names for frames
Target=“_self” Target=“_top” Target=“_blank”
22
Some frame attributes NORESIZE SCROLLING BORDER or FRAMEBORDER
24
Nesting frames <HTML> <HEAD>
<TITLE>Nested Frames</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAME SRC="1.htm" NAME="upper"> <FRAMESET COLS="50%,50%"> <FRAME SRC="2.htm" NAME="lower"> <FRAME SRC="3.htm" NAME="right"> </FRAMESET> </HTML>
25
Try Coding!
27
Images can be links, too <HTML> <HEAD>
<TITLE>Images Can Be Links, Too</TITLE> </HEAD> <BODY> Click this house <A HREF=“main.htm"><IMG SRC="home.gif"></A> to return to my home page. </BODY> </HTML>
28
Image Maps An image map is a web page graphics with several defined ‘clickable’ areas Three steps Determine coordinates of clickable regions Use the <Map> and <Area> tags Add a special version of the <IMG> tag
29
Finding Coordinates <A href=“whatever”><Img src=“imagename” ISMAP></A>
30
199,0 0,0 399,0 599,0 A B C 399,99 599,99 199,99
31
<Map> and <Area> Tags
<Map Name=“Testmap”> <Area shape=“Rect” coords=“0,0,199,99” href=“a.htm”> <Area shape=“Rect” coords=“199,0,399,99” href=“b.htm”> <Area shape=“Rect” coords=“399,0,599,99” href=“c.htm”> </Map>
32
Applying <image> Tag
<Img src=“coords.gif” usemap=“#Testmap”>
33
Shape Attribute Shape attribute also accepts values “Circle” and “Poly” (for a polygon)
Similar presentations
