You are on page 1of 18

MCSL : 016 Internet Concepts and Web Design ADVANCE HTML

SESSION 1 1.How do you handle situation when browser does not support frames? The <NOFRAMES> tag is used for those browsers that are not able to interpret <FRAME> tags. If the browser does not support FRAME the text between this <NOFRAME> and </NOFRAME> will displayed on the browsers window

<html> <head> </head> <frameset cols="150,150,*" frameborder="yes" > <frame src="CINECURRY.txt" name="tom"> <frame src="CINECURRY.txt" name="tom"> <frameset rows="150,150" frameborder="yes" > <frame src="CINECURRY.txt" name="tom"> <frame src="CINECURRY.txt" name="tom"> </frameset> </frameset> <body> <noframes>Your browser does not handle Frames</noframes> </body>

</html> 2. What are inline frames? Inline frames are a great implementation of the frames idea---they allow you to open new pages ,without the many problems brought to you by classic-style frames Inline orfloating frames are one which appear on a page, much like an image ar a table would.This allows you to open completely separate pages in the middle of your pages. <iframe src=..//MSCL-016/ses3(2).html width=80% height=110> </iframe>

3.Which tag is used to define frames in HTML? <Frameset>Frameset tag is used to define frames in HTML <frameset rows=50%,50% frameborder=NO border=0framespacing=0> <frame src=ses2.html > <frame src=ses1.htmll > </frameset>

SESSION 2 1 . Write an html code to develop a web page having two frames that divide the web page into two equal rows. <html> <head> </head> <frameset rows="*,*"> <frame src="zy.pdf"> <frame src="zy.pdf"> </frameset> </html>

2.Write an html code to develop a web page having two frames that divide the web page into two equal rows and then divide the second row into two equal columns <html> <frameset rows="*,*" frameborder="yes" border="1"> <frame src="back.html"> <frameset cols="*,*" frameborder="yes" border="1"> <frame src="back1.html"> <frame src="back2.html"> </frameset> </frameset> </html>.

3.Write an Html code to develop a web page having frames as described in these bove question and fill each frame with different background colors <html> <head> </head> <frameset rows="*,*" frameborder="yes" border="1" "allowtransarency=true" style="bgcolor:"#15a201"> <frame src="demo.html" > <frameset cols="*,*" frameborder="yes" border="1"> <frame src="demo.html"> <frame src="demo.html" > </frameset> </frameset> </html>

SESSION 3 1.What tags used to display information for browsers that do not support frames?

<NOFRAMES></NOFRAMES> tag is used to display information for browsersthat does not support frames. 2.Write various attributes of frameset tag and frame tag?
All of these attributes go into the main <frameset> tag, and affect all frames contained in it.
border="x"

sets the width of the grey borders between frames, in pixels, for Netscape browsers.
frameborder="x"

is the same as the attribute above but for Internet Explorer. If you use one, use them both.
framespacing="x"

denotes the distance between frames, in pixels. These attributes go in single <frame> tags, and as such, only affect that particular frame.
frameborder="x"

sets the border thickness around that frame. (IE)


framespacing="x"

sets the amount of blank space around this frame.


marginheight="x"

sets the margin (or, if you like, padding) from the top and bottom of the frame for the content of the frame.
marginwidth="x"

sets the margin from the sides. Note that these last two are added on to anymargins you have specified in the framed page's <body> section.
noresize

stops the user from being able to widen or contract the frame as they want, so your layout doesn't get messed up. It doesn't need any value.
scrolling="yes/no/auto"

allows or prohibits the frame from scrolling if the contents will not all fit into the viewable area. Attributes are "yes" or "no". If you don't let it scroll, people with small screens/low resolutions may not be able to see all your page

3 . Write code in html to design a page with two frames. The frame should remain proportionate even

when page is resized

<html> <head> </head> <frameset rows="*,*"> <frame src="zy.pdf"> <frame src="zy.pdf"> </frameset> </html>

SESSION 4 1 . Write the code to develop a webpage as shown below, using frames <html> <head> </head> <frameset cols="30%,*"> <frame src="demo.html"> <frameset rows="*,*"> <frame src="demo.html"> <frameset cols="40%,*"> <frame src="demo.html"> <frame src="demo.html"> </frameset> </frameset> </frameset> </html>

2 .Write the code to make the background color of each frame in the above question different <html> <head> </head> <frameset cols="30%,*"> <frame src="back.html"> <frameset rows="*,*"> <frame src="back1.html"> <frameset cols="40%,*"> <frame src="back2.html"> <frame src="back3.html"> </frameset> </frameset> </frameset> </html>

3. Create a web page divided into Two Equal Frames <html> <head> </head> <frameset rows="*" cols="50%,50%"> <frame src="demo.html"> <frame src="demo.html"> </frameset>

</html>

SESSION 5

1 . Create a web page having two equal frames, one containing link and the other containing content of the link. When the link is clicked the appropriate content should be displayed in frame 2. <html> <head> </head> <frameset rows="*" cols="50%,50%"> <frame src="demo.html"=a1 name> <frame src="demo.html" name=a2> </frameset> </html>

2.Create a home page for a TLC in the following format <html> <title>Master page</title> <head> </head> <frameset rows="10%,90%" cols="*"> <frame src="tlc.html"> <frameset rows="*" cols="*,*"> <frame src="left.html" name="Terminator1"> <frame src="demu.html" name="Terminator2">

</frameset> </frameset> </html>

3.Create a web page using all attributes of frame and other tags <html> <head> </head> <frameset cols=30,* bordercolor=#00FF00 border="2"> <frame src=frm1.html> <frameset rows=*,* bordercolor="#ff0000" frameborder="yes" framespacing="0"> <frame src=animals7.jpg marginwidth="1" marginheight="1" height="160px" width="140px" scrolling="yes" marginwidth="1"> <frameset cols=40%,* bordercolor="0000ff"> <frame src=frm2.html> <frame src=frm3.html> </frameset> </frameset> </frameset> <noframes> </noframes> <body></body> </html>

SESSION 6

1.Design a web page with a textbox called name and a button with label Enter.When you click the button another page should open with the message Welcome<name>, where name should be equal to the name entered in the first page. //Name of the fileTest1.html <HTML> <HEAD> </HEAD> <BODY> <FORM NAME="formname" action=Test2.html> NAME:<INPUT TYPE="TEXT" NAME="name"/> <INPUT TYPE="submit" value=Enter/> </FORM> </BODY> </HTML> //Name of the fileTest2.html <HTML> <HEAD> </HEAD> <BODY> <FORM NAME="formname"> Welcome <INPUT TYPE="TEXT" NAME="name"> </FORM> <SCRIPT LANGUAGE="JavaScript"> function getParm(string,parm) { // returns value of parm from string var startPos = string.indexOf(parm + "="); if (startPos > -1) { startPos = startPos + parm.length + 1; var endPos = string.indexOf("&",startPos); if (endPos == -1) endPos = string.length;

return unescape(string.substring(startPos,endPos)); } return ''; }

var passed = location.search.substring(1); document.formname.name.value = getParm(passed,'name'); </SCRIPT> </BODY> </HTML> 2.What are the values of method attributes of the form tag? The method Attributes of the form tag are: GET:-This is the default method and causes the fill-out form contents to be appended to the URL as if they were a normal query. POST:-This method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

3.Set default value of name text above of question 1 of this session to Victoria. Addanother button called reset on click of this button name textbox should be set to100-default value <html> <head></head> <title>Clearing Forms!</title> <script type='text/javascript'> function clearForm() { document.myForm.username.value = "100"; } </script>

<body> <form name="myForm" method="post"> <input type="text" name="username" id="username" value="Victoria" size="20" /> <br /> <br/> <input type="submit" value="Send" /> <input type="button" onClick="clearForm()" value="Reset" /> </form> </body> </html>

SESSION 7

1.Design a form using all input value <html> <body> <h1 align="center">Sachin's Fan Page</h1> </body> <form> <input type="text" maxlength="10" size="15" name="box1"/> <input type="password" maxlength="10" size="15" name="pass1"/> <input type="hidden" name="hidden1" value="Text not changeable by user" /> <input type="submit" value="Send to Server" /><br><br> <input type="checkbox" name="chk" value="yes" > Do you want the newsletter?<br> <input type="checkbox" name="chk" value="yes"> Do you want to receive Emails?<br><br><br> <input type="radio" name="rdChoice" value="Mag1"> Magazine 1

<br> <input type="radio" name="rdChoice" value="Mag2"> Magazine 2 <br><br> <input type="file" name="file1" /> <center><input type="image" src="sachin-shane.jpg" height="300" width="400" /></center> </form> </html>

Q2.Create a simple form accepting Name Enrolment Number And Submit button <html> <head> </head> <form name =frm1> <label>Name&nbsp;&nbsp;&nbsp;</label><input type textsize=20/><br> <label>Enrolment Number</label><input type= text size=20/><br> <input type ="submit" value="Submit"/> </form></html>

SESSION 8

1.Design a webpage, which is like compose page of e-mail <html> <form>

To &nbsp;&nbsp;<input type="text"></br></br> Copy <input type="text"></br></br> Message:</br> <textarea rows="4"></textarea></br> <input type="submit" value="Send"> </form> </html>

2.Which element is used to accept large text inputs from user? <TEXTAREA> </TEXTAREA> TEXTAREA accepts large text inputs from user 3.Write a code to create a web page having radio button labeled as name of colors.Clicking on each radio button should change the color of the web page. <html> <body> </body> <FORM> <input type="radio" name="group1" onClick="document.bgColor='yellow'"><label>Yellow</label> <input type="radio" name="group1" onClick="document.bgColor='green'"><label>Green</label> <input type="radio" name="group1" onClick="document.bgColor='blue'"><label>Blue</label> </FORM> </html>

SESSION 9

1.What is the purpose of the hidden field?

Hidden field are similar to text fields with one very important difference!. The Hidden field does not show on the page.Therefore the visitor cant type anything into a hidden field,which leads to the purpose of the field,To submit information that is not entered by the visitor.

2.Create a form accepting the values: Name Address Marks in 10+2, Graduation and Post Graduation <html> <head> </head> <body> <form name frm1> <label>Name </label><input type =text size="20"/><br> <label>Address</label><br><textarea name=txtarea rows="5" cols="25"></textarea><br> <label>Marks in 10+2</label><input type text size="10" maxlength="5"/><br><br> <label>Marks in Graduation</label><input type=text size="10" maxlength="5"/><br> <label>Marks in Post Graduation</label><input type=text size="10" maxlength="5"/><br> <input type="submit" value="submit"/> </form> </body> </html>

3 . Which element is used to display a drop down list box? <html> <form>

<SELECT name=select> <option>Edit plus</option> <option>Word pad</option> <option>Note pad</option> </SELECT> </form> </html>

SESSION 10

1.Design a series of three HTML pages for ABC.COM each called from the previousone .Accept name on the first page. When the user clicks on the enter button, second page should be open. The second page should not display the name but a Welcomescreen with some information about ABC.COM .When the user clicks on the next button it should display the name accepted in page 1 on page 3 (Hint: you use hidden fields) //page1 <HTML> <title>Page1</title> <HEAD> </HEAD> <BODY> <FORM NAME="formname" ACTION="ses10page1.html"> Name :<INPUT TYPE="TEXT" NAME="name"> <INPUT TYPE="SUBMIT" value="Enter"> </FORM> </BODY> </HTML>

//page2 <HTML> <HEAD> </HEAD> <BODY> <FORM NAME="formname" action="ses10page2.html"> <h1>Welcome To Webportal</h1> <p>ABC.COM MEDIA PTV LTD.</p> <INPUT TYPE="hidden" NAME="name"> <input type="submit" value="Enter"/> </FORM> <SCRIPT LANGUAGE="JavaScript"> function getParm(string,parm) { // returns value of parm from string var startPos = string.indexOf(parm + "="); if (startPos > -1) { startPos = startPos + parm.length + 1; var endPos = string.indexOf("&",startPos); if (endPos == -1) endPos = string.length; return unescape(string.substring(startPos,endPos)); } return ''; } var passed = location.search.substring(1);

document.formname.name.value = getParm(passed,'name'); </SCRIPT> </BODY> </HTML> //page3 <HTML> <HEAD></HEAD> <BODY> <FORM NAME="formname"> <INPUT TYPE="TEXT" NAME="name"> </FORM> <SCRIPT LANGUAGE="JavaScript"> function getParm(string,parm) { // returns value of parm from string var startPos = string.indexOf(parm + "="); if (startPos > -1) { startPos = startPos + parm.length + 1; var endPos = string.indexOf("&",startPos); if (endPos == -1) endPos = string.length; return unescape(string.substring(startPos,endPos)); } return ''; } var passed = location.search.substring(1); document.formname.name.value = getParm(passed,'name'); </SCRIPT> </BODY> </HTML> 2 . Create a web page divide that page into two frames. In one frame create two links that will display different html forms in other frame. <html> <frameset rows="*" cols="35%,65%" frameborder="yes" border="5" framespacing="0"> <frame src="linkpage.html" name="menu"> <frame src="frame2.html" name="main">

</frameset> </html>

Thank you Me ------Any query Write to snkpandey1@gmail.com