2b. Web Technology HTML Basics-2

Web Technology HTML-2 Dr. Jyoti Yadav

Frames  Frames are a relatively new addition to the HTML standard. First introduced in Netscape Navigator 2.0. Objectives: Upon completing this section, you should be able to:  Create a Frame based page.  Work with the Frameset, Frame, and Noframes elements.  Use the attributes of the Frames elements to control the display.  Set Targets appropriately. 2

Frames A framed page is actually made up of multiple HTML pages. There is one HTML document that describes how to break up the single browser window into multiple windowpanes. Each windowpane is filled with an HTML document. For Example to make a framed page with a windowpane on the left and one on the right requires three HTML pages. Doc1.html and Doc2.html are the pages that contain content. Frames.html is the page that describes the division of the single browser window into two windowpanes. 3

Frames 4 Doc2.html Doc1.html Frames.html Doc2.html Doc1.html

Frame Page Architecture A <FRAMESET> element is placed in the html document before the <BODY> element. The <FRAMESET> describes the amount of screen real estate given to each windowpane by dividing the screen into ROWS or COLS. The <FRAMESET> will then contain <FRAME> elements, one per division of the browser window. Note: Because there is no BODY container, FRAMESET pages can't have background images and background colors associated with them. 5

Frame Page Architecture <HTML> <HEAD> <TITLE> Framed Page </TITLE> <FRAMeSET COLS=“23%,77%”> <FRAME SRC=“Doc1.html”> <FRAME SRC=“Doc2.html”> </FRAMeSET > </HEAD> </HTML> 6

7 FRAMESET COLS=”23%, 77%” FRAME NAME=right_pane SRC= Doc2.html FRAME NAME= left_pane SRC=Doc1.html The Diagram below is a graphical view of the document described above

<FRAMESET> Container <FRAMESET> : The FRAMESET element creates divisions in the browser window in a single direction. This allows you to define divisions as either rows or columns. ROWS : Determines the size and number of rectangular rows within a <FRAMESET>. They are set from top of the display area to the bottom. Possible values are: Absolute pixel units, I.e. “360,120”. A percentage of screen height, e.g. “75%,25%”. Proportional values using the asterisk (*). This is often combined with a value in pixels , e.g. “360,*”. <Frameset cols=“200,20%,*,2*”> 8

Creating a Frames Page COLS: Determines the size and number of rectangular columns within a <FRAMESET>. They are set from left to right of the display area. Possible values are: Absolute pixel units, I.e. “480,160”. A percentage of screen width, e.g. “75%,25%”. Proportional values using the asterisk (*). This is often combined with a value in pixels , e.g. “480,*”. 9

Creating a Frames Page  FRAMEBORDER : Possible values 0, 1, YES, NO. A setting of zero will create a borderless frame.  FRAMESPACING: This attribute is specified in pixels. If you go to borderless frames you will need to set this value to zero as well, or you will have a gap between your frames where the border used to be.  BORDER(thickness of the Frame): This attribute specified in pixels. A setting of zero will create a borderless frame. Default value is 5.  BORDERCOLOR: This attribute is allows you choose a color for your border. This attribute is rarely used. 10

<FRAME> <FRAME>: This element defines a single frame within a frameset. There will be a FRAME element for each division created by the FRAMESET element. This tag has the following attributes: SRC: Required, as it provides the URL for the page that will be displayed in the frame. NAME: Required for frames that will allow targeting by other HTML documents. Works in conjunction with the target attribute of the <A>, <AREA>, <BASE>, and <FORM> tags. 12

<FRAME>  MARGINWIDTH: Optional attribute stated in pixels. Determines horizontal space between the <FRAME> contents and the frame’s borders.  MARGINHEIGHT: Optional attribute stated in pixels. Determines vertical space between the <FRAME> contents and the frame’s borders.  SCROLLING: Displays a scroll bar(s) in the frame. Possible values are: 1. Yes – always display scroll bar(s). 2. No – never display scroll bar(s). 3. Auto – browser will decide based on frame contents. By default: scrolling is auto. 13

<FRAME> • NORESIZE: Optional – prevents viewers from resizing the frame. By default the user can stretch or shrink the frame’s display by selecting the frame’s border and moving it up, down, left, or right. 14

<NOFRAMES> <NOFRAMES>: Frame – capable browsers ignore all HTML within this tag including the contents of the BODY element. This element does not have any attributes. <HTML> <HEAD> <TITLE> Framed Page </TITLE> </HEAD> 15

<NOFRAMES> <FRAMESET COLS="23%,77%"> <FRAME SRC="" NAME="left_pane“> <FRAME SRC="" NAME="right_pane"> <NOFRAMES> <P> This is a Framed Page. Upgrade your browser to support frames.</P> </NOFRAMES></FRAMESET> 16

Compound FRAMESET Divisions In this case a second FRAMESET element will be inserted in the place of the FRAME element that would describe the second row. The second FRAMESET element will divide the remaining screen real estate into 2 columns. This nested FRAMESET will then be followed by 2 FRAME elements to describe each of the subsequent frame divisions created. 17

Compound FRAMESET Divisions 18 <html> <head> <title> Compound Frames Page</title> </head> <frameset rows=“120,*”> <frame src=“banner_file.html” name”banner”> <frameset cols=“120,*”> <frame src=“links_file.html” name=“links”> <frame src=“content_file.html” name=“content”> <noframes> <p> Default message </p> </noframes> </frameset> </frameset> </head>

19 Banner File Contents File Links File Compound FRAMESET Divisions You may want to create a frames design with a combination of rows and columns.

Compound FRAMESET Divisions Example <HEAD> <FRAMESET ROWS="25%,50%,25%” <FRAME SRC=""> <FRAMESET COLS="25%,*"> <FRAME SRC=""> <FRAME SRC=""> </FRAMESET> <FRAME SRC=""> </FRAMESET> </HEAD> 20

Frame Formatting • Example: <frameset rows=“20%, *, 20%”> <frame src=“header.html” noresize scrolling=no> <frame src=“body.html”> <frame src=“navigationbar.html” noresize scrolling=no> </frameset> 25

What do the following mean? 1. <FRAMESET COLS="2*, 3*, 5*"> 2. <FRAMESET COLS="150, 20%, *, 3*"> So what are the space-allocation priorities? Absolute pixel values are always assigned space first, in order from left to right. These are followed by percentage values of the total space. Finally, proportional values are divided based upon what space is left. 26

Generic Frame Formula • The <FRAME> tag has six associated attributes: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. Here's a complete generic FRAME: • <FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE> 27

What will be the Output? <FRAMESET ROWS="*, 2*, *" COLS="2*, *"> <FRAME SRC=“”> <FRAME SRC=“”> <FRAME SRC=“”> <FRAME SRC=“”> <FRAME SRC=“”> <FRAME SRC=“”> </FRAMESET> 28

Targets When you use links for use in a frames environment you will need to specify an additional attribute called TARGET. The TARGET attribute uses the NAME attribute of the FRAME element. If we were to place a link in doc1.html that linked to doc3.html and we wanted doc3.html to be displayed in the right windowpane; the HTML code would appear in doc1.html as follows: <A HREF=“doc3.html” TARGET=“right_pane”>Link to Document 3 </A> 29

Special Targets There are 4 special target names that cannot be assigned by the NAME attribute of the FRAME tag. 1. TARGET=“_top” : This loads the linked document into the full browser window with the URL specified by the HREF attribute. All frames disappear, leaving the new linked page to occupy the entire window. The back is turned on. 2. TARGET=“_blank” : Opens an unnamed new browser window and loads the document specified in the URL attribute into the new window (and your old window stays open). The back is turned off. Other windows remains on. 3. TARGET=“_self” : Loads the document in the same window where the anchor was {Clicked}. This is the default setting for linking elements. 4. TARGET=“_parent” : the _parent frame is a prior frameset that the current frameset was “spawned” from. If there isn’t one it is the browser window. The document is loaded into the area occupied by the columns or rows frameset containing the frame that contains the link. The back is turned on. All windows disappear. 30

31 If a frame contains the following link, then clicking the link launches a new, unnamed browser display window that contains the content defined in stuff.HTM. This can be a simple HTML document, or an entirely new FRAMESET definition. 1. <A HREF="stuff.html" TARGET="_blank"> If a frame contains the following link, then clicking the link will simply cause the frame which contains the link to clear, and its content will be replaced with whatever is in stuff.htm. 2. <A HREF="stuff.html" TARGET="_self"> If a frame contains the following link, the frameset that contains the frame that contains this link will be replaced by stuff.HTM. 3. <A HREF="stuff.html" TARGET="_parent"> Finally, if a frame contains the following link, clicking the link replaces the entire browser window with the contents of stuff.HTM. 4. <A HREF="stuff.html" TARGET="_top">

32 TheTARGET attribute allows you to specify the frame into which a page is to be loaded into in a frames setting. <A HREF=“chap1.html”TARGET=“_self”> [Chapter 1]</A> <A HREF=“chap1.html”TARGET=“_parent”> [Chapter 2]</A> Parent window Learning HTML [Chapter 1][Chapter 2][Chapter 3] chap1.html chap2.html Targeting links to frames

33 TheTARGET attribute allows you to specify the frame into which a page is to be loaded into in a frames setting. <A HREF=“chap1.html”TARGET=“bottom”> [Chapter 1]</A> <A HREF=“chap2.html”TARGET=“bottom”> [Chapter 2]</A> <A HREF=“chap3.html”TARGET=“bottom”> [Chapter 3]</A> Learning HTML [Chapter 1][Chapter 2][Chapter 3] chap1.html chap2.html chap3.html Targeting links to frames

Forms  Forms add the ability to web pages to not only provide the person viewing the document with dynamic information but also to obtain information from the person viewing it, and process the information. Objectives: Upon completing this section, you should be able to 1. Create a FORM. 2. Add elements to a FORM. 3. Define CGI (Common Gateway Interface). 4. Describe the purpose of a CGI Application. 5. Specify an action for the FORM.  Forms work in all browsers.  Forms are Platform Independent. 34

Forms  To insert a form we use the <FORM></FORM> tags.The rest of the form elements must be inserted in between the form tags. <HTML> <HEAD> <TITLE> Sample Form</TITLE> </HEAD> <BODY BGCOLOR=“FFFFFF”> <FORM ACTION = http://www.xnu.com/formtest.asp> <P> First Name: <INPUTTYPE=“TEXT” NAME=“fname” MAXLENGTH=“50”> </P> <P> <INPUTTYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”> </P> </FORM> </BODY> </HTML> 35

<FORM> element attributes ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to accept the data from the form, process it, and send a response back to the browser. METHOD: GET (default) or POST specifies which HTTP method will be used to send the form’s contents to the web server.The CGI application should be written to accept the data from either method. NAME: is a form name used byVBScript or JavaScripts. TARGET: is the target frame where the response page will show up. 36

Form Elements  Form elements have properties:Text boxes, Password boxes, Checkboxes, Option(Radio) buttons, Submit, Reset, File, Hidden and Image.  The properties are specified in theTYPE Attribute of the HTML element <INPUT></INPUT>. 37

Form Elements <INPUT> Element’s Properties TYPE = Type of INPUT entry field. NAME = Variable name passed to CGI application VALUE = The data associated with the variable name to be passed to the CGI application CHECKED = Button/box checked SIZE = Number of visible characters in text field MAXLENGTH = Maximum number of characters accepted. 39

Text boxes: Used to provide input fields for text, phone numbers, dates, etc. <INPUTTYPE= "TEXT " > Browser will display Textboxes use the following attributes:  TYPE: text.  SIZE: determines the size of the textbox in characters. Default=20 characters. MAXLENGHT : determines the maximum number of characters that the field will accept.  NAME: is the name of the variable to be sent to the CGI application.  VALUE: will display its contents as the default value. 40 Text Box

Example on Text Box <TITLE>FormText_Type</TITLE> </HEAD> <BODY> <h1> <font color=blue>Please enter the following bioData</font></h1> <FORM name="form1" Method= " get " Action= " URL " > First Name: <INPUTTYPE="TEXT" NAME="FName" SIZE="15" MAXLENGTH="25"><BR> Last Name: <INPUTTYPE="TEXT" NAME="LName" SIZE="15" MAXLENGTH="25"><BR> Nationality: <INPUTTYPE="TEXT" NAME="Country" SIZE="25" MAXLENGTH="25"><BR> The Phone Number: <INPUTTYPE="TEXT" NAME="Phone" SIZE="15" MAXLENGTH="12"><BR> </FORM> </BODY> </HTML> 41

Password:Used to allow entry of passwords. <INPUTTYPE= " PASSWORD " > Browser will display Text typed in a password box is starred out in the browser display. Password boxes use the following attributes:  TYPE: password.  SIZE: determines the size of the textbox in characters.  MAXLENGTH: determines the maximum size of the password in characters.  NAME: is the name of the variable to be sent to the CGI application.  VALUE: is usually blank. 43 Password

Hidden Hidden: Used to send data to the CGI application that you don’t want the web surfer to see, change or have to enter but is necessary for the application to process the form correctly. <INPUTTYPE=“HIDDEN”> Nothing is displayed in the browser. Hidden inputs have the following attributes: TYPE: hidden. NAME: is the name of the variable to be sent to the CGI application. VALUE: is usually set a value expected by the CGI application.45

Check Box: Check boxes allow the users to select more than one option. <INPUTTYPE=“CHECKBOX”> Browser will display Checkboxes have the following attributes:  TYPE: checkbox.  CHECKED: is blank or CHECKED as the initial status.  NAME: is the name of the variable to be sent to the CGI application.  VALUE: is usually set to a value. 46 Check Box

• <HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD> • <BODY> • <h1> <font color=green>Please check one of the following</font></h1> • <FORM name="form3" Action="url" method="get"> • <font color=red> Select City: </font><BR> • Delhi:<INPUTTYPE="CheckBox" Name=“City" CHECKED><BR> • Mumbai:<INPUTTYPE="CheckBox" Name=“City"><BR> • Kolkatta:<INPUTTYPE="CheckBox" Name=“City"><BR> <BR> • <font color=blue>Select Language:</font><BR> • English:<INPUTTYPE="CheckBox" Name="language"CHECKED><BR> Hindi:<INPUTTYPE="CheckBox" Name="language"><BR> • Marathi:<INPUTTYPE="CheckBox" Name="language"> <BR> • </FORM> • </BODY> • </HTML> 47

Radio Button:Radio buttons allow the users to select only one option. <INPUTTYPE=“RADIO”> Browser will display Radio buttons have the following attributes:  TYPE: radio.  CHECKED: is blank or CHECKED as the initial status. Only one radio button can be checked NAME: is the name of the variable to be sent to the CGI application.  VALUE: usually has a set value. 49 Radio Button

• <HTML> <HEAD><TITLE>CheckBoxType</TITLE> </HEAD> • <BODY> • <h1> <font color=green>Please check one of the following</font></h1> • <FORM name="form3" Action="url" method="get"> • <font color=red> Select City: </font><BR> • Delhi:<INPUTTYPE=“Radio" Name=“City" CHECKED><BR> • Mumbai:<INPUTTYPE=" Radio " Name=“City"><BR> • Kolkatta:<INPUTTYPE=" Radio" Name=“City"><BR> <BR> • <font color=blue>Select Language:</font><BR> • English:<INPUTTYPE=" Radio " Name="language"CHECKED><BR> Hindi:<INPUTTYPE=" Radio" Name="language"><BR> • Marathi:<INPUTTYPE=" Radio " Name="language"> <BR> • </FORM> • </BODY> • </HTML> 50

52 <HTML><HEAD> <TITLE>RADIOBox</TITLE> </HEAD> <BODY> Form #1: <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="one"> Yes. <INPUT TYPE="radio" NAME="choice" VALUE="two"> No. </FORM> <HR color=red size="10" > Form #2: <FORM> <INPUT TYPE="radio" NAME="choice" VALUE="three" CHECKED> Yes. <INPUT TYPE="radio" NAME="choice" VALUE="four"> No. </FORM> </BODY></HTML>

Push Button:This element would be used with JavaScript to cause an action to take place. <INPUTTYPE=“BUTTON”> Browser will display Push Button has the following attributes:  TYPE: button.  NAME: is the name of the button to be used in scripting.  VALUE: determines the text label on the button. 54 Push Button

<DIV align=center><BR><BR> <FORM> <FONT Color=red> <h1>Press Here to see Form1 :<BR> <INPUT TYPE="button" VALUE="PressMe"><BR><BR> <FONT Color=blue> Click Here to see Form2:<BR> <INPUT TYPE="button" VALUE="ClickMe" > <BR><BR> <FONT Color=green> Hit Here to see Form3:<BR> <INPUT TYPE="button" VALUE="HitME" > <BR><BR> <FONT Color=yellow> </FORM></DIV> 55

Submit: Every set of Form tags requires a Submit button. This is the element causes the browser to send the names and values of the other elements to the CGI Application specified by the ACTION attribute of the FORM element. <INPUTTYPE=“SUBMIT”> The browser will display Submit has the following attributes:  TYPE: submit.  NAME: value used by the CGI script for processing.  VALUE: determines the text label on the button, usually Submit Query.57 Submit Button

58 <FORM Action="URL" method="get"> First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"><BR> Family Name: <INPUT TYPE="TEXT" Size=25 name="LastName"><BR> <BR> <FONT Color=red> Press Here to submit the data:<BR> <INPUT TYPE="submit" VALUE="SubmitData " > </FORM>

• Reset: It is a good idea to include one of these for each form where users are entering data. It allows the surfer to clear all the input in the form. • <INPUTTYPE=“RESET”> • Browser will display • Reset buttons have the following attributes: • TYPE: reset. • VALUE: determines the text label on the button, usually Reset. 60 Reset Button

61 <FORM Action="URL" method="get"> First Name: <INPUT TYPE="TEXT" Size=25 name="firstName"> <BR> Family Name: <INPUT TYPE="TEXT" Size=25 name="LastName"><BR> <BR> <FONT Color = red> <STRONG><font size=5>Press Here to submit the data:</font></STRONG><BR> <INPUT TYPE="submit" VALUE="SubmitData"> <INPUT TYPE="RESET" VALUE="Reset"> </FORM>

Image Submit Button:Allows you to substitute an image for the standard submit button. <INPUT TYPE=“IMAGE” SRC=“India.gif”> Image submit button has the following attributes:  TYPE: Image.  NAME: is the name of the button to be used in scripting.  SRC: URL of the Image file. 63 Image Submit Button

64 <form> <H1><font color=blue> Click to go India’s Map: <INPUT TYPE="IMAGE" SRC=“India.gif"> </form>

• File Upload:You can use a file upload to allow surfers to upload files to your web server. • <INPUTTYPE=“FILE”> • Browser will display • File Upload has the following attributes: • TYPE: file. • SIZE: is the size of the text box in characters. • NAME: is the name of the variable to be sent to the CGI application. • MAXLENGHT: is the maximum size of the input in the textbox in characters. 65 File

<BODY bgcolor=lightblue> <form> <H3><font color=forestgreen> Please attach your file here to for uploading to My <font color =red>SERVER...<BR> <INPUT TYPE="File" name="myFile" size="30"> <INPUT TYPE="Submit" value="SubmitFile"> </form> </BODY> 66

<TEXTAREA></TEXTAREA>: is an element that allows for free form text entry. Browser will display Text area has the following attributes: NAME: is the name of the variable to be sent to the CGI application. ROWS: the number of rows to the textbox. COLS: the number of columns to the textbox. 67 Other Elements used in Forms

68 <BODY bgcolor=lightblue> <form> <TEXTAREA COLS=40 ROWS=20 Name="comments" > The National Pledge is an oath of allegiance to the Republic of India. It is commonly recited by Indians in unison at public events, especially in schools, and during the Independence Day and Republic Day celebrations. It is commonly found printed in the opening pages of school textbooks and calendars. </TEXTAREA>: </form> </BODY>

The two following examples are <SELECT></SELECT> elements, where the attributes are set differently. The Select elements attributes are: NAME: is the name of the variable to be sent to the CGI application. SIZE: this sets the number of visible choices. MULTIPLE: the presence of this attribute signifies that the user can make multiple selections. By default only one selection is allowed. 72 Other Elements used in Forms

73 <BODY bgcolor=lightblue> <form> Select the cities you have visited: <SELECT name=“list” size=5> <option> London</option> <option> Tokyo</option> <option> Paris</option> <option> New York</option> <option> LA</option> <option> KL</option> </SELECT> </form> </BODY>

Drop Down List: Name: is the name of the variable to be sent to the CGI application. Size: 1. 75 Other Elements used in Forms

List Box: Name: is the name of the variable to be sent to the CGI application. SIZE: is greater than one. 76 Other Elements used in Forms

Option The list items are added to the <SELECT> element by inserting <OPTION></OPTION> elements. The Option Element’s attributes are: SELECTED:When this attribute is present, the option is selected when the document is initially loaded. It is an error for more than one option to be selected. VALUE: Specifies the value the variable named in the select element. 77 Other Elements used in Forms

</HEAD> <BODY> <h2><font color=blue>What type of Computer do you have?</font><h2> <FORM> <SELECT NAME="ComputerType" size=4> <OPTION value="IBM" SELECTED> IBM</OPTION> <OPTION value="INTEL"> INTEL</OPTION> <OPTION value=" Apple"> Apple</OPTION> <OPTION value="Compaq"> Compaq</OPTION> </SELECT> </FORM></BODY></HTML> 78

<HEAD> <TITLE>SELECT with Mutiple </TITLE> </HEAD> <BODY> <h2><font color=blue>What type of Computer do you have?</font><h2> <FORM> <SELECT NAME="ComputerType" size=5 multiple> <OPTION value="IBM" > IBM</OPTION> <OPTION value="INTEL"> INTEL</OPTION> <OPTION value=" Apple"> Apple</OPTION> <OPTION value="Compaq" SELECTED> Compaq</OPTION> <OPTION value=" other"> Other</OPTION> </SELECT> </FORM></BODY></HTML> 80

2b. Web Technology HTML Basics-2

2b. Web Technology HTML Basics-2

More Related Content

Similar to 2b. Web Technology HTML Basics-2

More from Jyoti Yadav

Recently uploaded

2b. Web Technology HTML Basics-2