oop lec complete prelim

8/10/2019 Oop Lec Complete Prelim

1/17

Introduction to HTML

LANGUAGE REFERENCES

HyperText Markup Language(HTML) is a markup language designed for the creation of web pages with hypertext andother information to be displayed in a web browser. HTML is used to structure information denoting certain text asheadings paragraphs lists and so on and can be used to describe to some degree the appearance and semantics ofa document. HTML!s grammar structure is the HTML "T" that was created using #$ML syntax.

Markup Languagecombines text and extra information about the text. The extra information for example about the text!sstructure or presentation is expressed using markup which is intermingled with the primary text. The best%known markuplanguage in modern use is HTML (HyperText Markup Language) one of the foundations of the &orld &ide &eb.

Web page or webpage is a resource on the &orld &ide &eb usually in HTML'HTML format with hypertext links toenable naigation from one page or section to another. *arying filename extensions can be used such as .htm .html o.php to name a few. &eb pages often use graphic files to proide illustration. + web page is displayed using a webbrowser which can hae a $raphical ,ser -nterface like -nternet xplorer Mo/illa 0irefox or 1pera or can hae a2ommand Line -nterface like Lynx.

Hypertextis a user interface paradigm for displaying documents which according to an early definition (3elson 4567)8branch or perform on re9uest.8 The most fre9uently discussed form of hypertext document contains automated cross%references to other documents called hyperlinks. #electing a hyperlink causes the computer to display the linked

document within a ery short period of time.

Web browseris a software application that enables a user to display and interact with text images and other informationtypically located on a web page at a website on the &orld &ide &eb or a local area network. Text and images on a webpage can contain hyperlinks to other web pages at the same or different websites. &eb browsers allow a user to 9uicklyand easily access information proided on many web pages at many websites by traersing these links.

Uniform Resource Locator (URL) is a string of characters conforming to a standardi/ed format which refers to aresource on the -nternet (such as a document or an image) by its location. 0or example the ,:L of this page on&ikipedia is http;''en.wikipedia.org'wiki',niform


2/17

Markup e!ement types

Structura!markup. "escribes the purpose of text. 0or example ; ChBD$olfC'hBD

directs the browser to render 8$olf8 as a second%leel heading similar to the 8Markup element types8 title at thestart of this section. #tructural markup does not denote any specific rendering but most web browsers haestandardised on how elements should be formatted. >y default for example headings like these will appear inlarge bold text. 0urther styling should be done with 2ascading #tyle #heets(2##).

#resentationa! markup. "escribes the appearance of the text regardless of its function.

0or example CbDboldfaceC'bD

will render 8boldface8 in bo!dtext. -n the maEority of cases using presentational markup is inappropriate andpresentation should be controlled by using 2##. -n the case of both CbDboldC'bD and CiDitalicC'iD there areelements which usually hae an e9uialent isual rendering but are more semantic in nature namelyCstrongDstrong emphasisC'strongD and CemDemphasisC'emD respectiely. -t is easier to see how an aural useagent should interpret the latter two elements. 3ote that most presentational markup elements hae becomedeprecatedunder the HTML F.7 specification in faour of 2## based style design.

Hypertextmarkup. Links parts of the document to other documents.

0or example ; Ca hrefG8http;''wikipedia.org'8D&ikipediaC'aD

HTML e!ement indicates structure in an HTML document. More specifically it is an #$MLelement that meets there9uirements of one or more of the HTML "ocument Type "efinitions ("T"s). HTML elements generally consist of threeparts; a start tagmarking the beginning of an element some amount of content and an end tag. lements may represenheadings paragraphs hypertext links lists embedded media and a ariety of other structures.

Many HTML elements include attributesin their start tags defining desired behaior. The end tag is optional for manyelements@ in a minimal case an empty elementhas no content or end tag. There are a few elements that are not part ofany official "T"s yet are supported by some browsers and used by some web pages. #uch elements may be ignored ordisplayed improperly on browsers not supporting them. -nformally HTML elements are sometimes referred to as 8tags8(an example of synecdoche) though many prefer the term tagstrictly in reference to the semantic structures delimiting thestart and end of an element.

HTML Basic Structure

HTML TH 0-:#T +3" L+#T T+$# -3 + "12,M3T #H1,L" +L&+# > TH HTML T+$#. TH# +: TH

T+$# TH+T TLL + &> >:1: &H: TH HTML -3 1,: "12,M3T >$-3# +3" 3"#. TH+>#1L,T M1#T >+#-2 10 +LL =1##->L &> "12,M3T# -#; CHTMLD C'HTMLD

H$%&. TH H+" T+$# 213T+-3 +LL 10 TH "12,M3T!# H+": -301:M+T-13. &H3 - #+ 8H+":8 -"13!T M+3 &H+T +==+:# +T TH T1= 10 TH >:1: &-3"1& >,T TH-3$# L-I TH"12,M3T T-TL +3" #1 13. #=+I-3$ 10 &H-2H...

2
http://en.wikipedia.org/wiki/Headingshttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://en.wikipedia.org/wiki/Deprecatedhttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/SGMLhttp://en.wikipedia.org/wiki/Document_Type_Definitionhttp://en.wikipedia.org/wiki/Synecdochehttp://en.wikipedia.org/wiki/Headingshttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://en.wikipedia.org/wiki/Deprecatedhttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/SGMLhttp://en.wikipedia.org/wiki/Document_Type_Definitionhttp://en.wikipedia.org/wiki/Synecdoche


3/17

T'TL$. TH-# 213T+-3: -# =L+2" &-TH-3 TH H+" #T:,2T,:. >T&3 TH T-TL T+$# 1, #H1,L"H+* TH T-TL 10 1,: "12,M3T. TH-# &-LL +==+: +T TH T1= 10 TH >:1:!# T-TL >+:

+3" +L#1 +==+:# -3 TH H-#T1: L-#T. 0-3+LL TH 213T3T# 10 TH T-TL 213T+-3: $1-3T1 1,: >11IM+:I 0-L -0 1, 2:+T + >11IM+:I T1 + =+$.

&*. >1" 21M# +0T: TH H+" #T:,2T,:. >T&3 TH >1" T+$# 1, 0-3" +LL 10 TH #T,00TH+T $T# "-#=L+" -3 TH >:1: &-3"1&. +LL 10 TH TT TH $:+=H-2# +3" L-3I# +3"#1 13 %% TH# TH-3$# 122,: >T&3 TH >1" T+$#. &!LL $T T1 &H+T H+==3# TH:

#T+:T-3$ &-TH TH 3T 2H+=T:.

#o putting eerything we!e coered thus far into one file we hae;CHTMLDCH+"D CT-TLD"ocument TitleC'T-TLDC'H+"DC>1"D

C'>1"DC'HTMLD

3


4/17

Basic Tags

Headings

Headings are defined with the Ch4D to Ch?D tags. Ch4D defines the largest heading. Ch?D defines the smallestheading.

Ch4DThis is a headingC'h4DChBDThis is a headingC'hBDChADThis is a headingC'hADChFDThis is a headingC'hFD

ChJDThis is a headingC'hJDCh?DThis is a headingC'h?D

HTML automatically adds an extra blank line before and after a heading.

Paragraphs

=aragraphs are defined with the CpD tag.

CpDThis is a paragraphC'pDCpDThis is another paragraphC'pD

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks

The CbrD tag is used when you want to end a line but don!t want to start a new paragraph. The CbrD tag forces a linebreak whereer you place it.

CpDThis CbrD is a paraCbrDgraph with line breaksC'pD

The CbrD tag is an empty tag. -t has no closing tag.

Comment Tags

-f you want to leae yourself notes in an HTML document but don!t want those notes to show up in the browserwindow you need to use the comment tag. To do that you would do the following;CK%% Hi -!m a comment. %%D

our note would go where the text Hi, I'm a comment.appears. es you do need an exclamation point after theopening bracket but not before the closing bracket. That!s the way the standard is written

Text ormatting Tags

Tag &escription

CbD "efines bold text

CbigD "efines big text

CemD "efines emphasi/ed text

CiD "efines italic text

CsmallD "efines small text

CstrongD "efines strong text

CsubD "efines subscripted text

CsupD "efines superscripted text

CinsD "efines inserted text

CdelD "efines deleted text

CsD "eprecated. ,se CdelD instead

CstrikeD "eprecated. ,se CdelD instead

CuD "eprecated. ,se styles instead

4
http://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_u.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_strike.asphttp://www.w3schools.com/tags/tag_u.asp


5/17

HT!L Character "ntities

#ome characters like the C character hae a special meaning in HTML and therefore cannot be used in the text.To display a less than sign (C) in HTML we hae to use a character entity.

Character "ntities

#ome characters hae a special meaning in HTML like the less than sign (C) that defines the start of an HTML tag. -f wewant the browser to actually display these characters we must insert character entities in the HTML source.

+ character entity has three parts; an ampersand () an entity name or a and an entity number and finally a semicolon

(@).

To display a less than sign in an HTML document we must write; +!t,or +-./,

The adantage of using a name instead of a number is that a name is easier to remember. The disadantage is that not albrowsers support the newest entity names while the support for entity numbers is ery good in almost all browsers.

#on$breaking %pace

The most common character entity in HTML is the non%breaking space. 3ormally HTML will truncate spaces in your text. -fyou write 47 spaces in your text HTML will remoe 5 of them. To add spaces to your text use the nbsp@ character entity.

The Most Coon Character Entities!

Resu!t &escription $ntity 0ame $ntity 0umber

non%breaking space nbsp@ 4?7@

C less than lt@ ?7@

D greater than gt@ ?B@

ampersand amp@ AN@

8 9uotation mark 9uot@ AF@

! apostrophe apos@ (does not work in -) A5@

Soe Other Coon"# Used Character Entities!

Resu!t &escription $ntity 0ame $ntity 0umber O cent cent@ 4?B@

P pound pound@ 4?A@

Q yen yen@ 4?J@

R section sect@ 4?6@

S copyright copy@ 4?5@

registered trademark reg@ 46F@

U multiplication times@ B4J@

V diision diide@ BF6@

The HT!L &ont( Tag

The CfontD tag in HTML is deprecated. -t is supposed to be remoed in a future ersion of HTML.en if a lot of peopleare using it you should try to aoid it and use styles instead.

Cfont colorG8red8D #ample Text C'fontD

5


6/17

0ont +ttributes

+ttribute xample =urpose

#i/eG8number8 si/eG8B8 "efines the font si/e

#i/eG8Wnumber8 si/eG8W48 -ncreases the font si/e

si/eG8%number8 si/eG8%48 "ecreases the font si/e

faceG8face%name8 faceG8Times8 "efines the font%name

colorG8color%alue8 colorG8eeff778 "efines the font color

colorG8color%name8 colorG8red8 "efines the font color

The CfontD tag is deprecated in the latest ersions of HTML (HTML F and HTML).

The &orld &ide &eb 2onsortium (&A2) has remoed the CfontD tag from its recommendations. -n future ersions ofHTML style sheets (2##) will be used to define the layout and display properties of HTML elements.

The Image Tag and the %rc )ttribute

-n HTML images are defined with the CimgD tag.

The CimgD tag is empty which means that it contains attributes only and it has no closing tag.

To display an image on a page you need to use the src attribute. #rc stands for 8source8. The alue of the srcattribute is the ,:L of the image you want to display on your page.

The syntax of defining an image;

Cimg srcG8url8D

The ,:L points to the location where the image is stored. +n image named 8boat.gif8 located in the directory 8images8on 8www.wAschools.com8 has the ,:L; http;''www.wAschools.com'images'boat.gif.

The browser puts the image where the image tag occurs in the document. -f you put an image tag between twoparagraphs the browser shows the first paragraph then the image and then the second paragraph.

The +lt +ttribute

The alt attribute is used to define an 8alternate text8 for an image. The alue of the alt attribute is an author%definedtext;

Cimg srcG8boat.gif8 altG8>ig >oat8D

6


7/17

The 8alt8 attribute tells the reader what he or she is missing on a page if the browser can!t load images. The browserwill then display the alternate text instead of the image. -t is a good practice to include the 8alt8 attribute for each image ona page to improe the display and usefulness of your document for people who hae text%only browsers.

Backgrounds

The CbodyD tag has two attributes where you can specify backgrounds. The background can be a color or an image.

>gcolor

The bgcolor attribute specifies a background%color for an HTML page. The alue of this attribute can be ahexadecimal number an :$> alue or a color name;

Cbody bgcolorG87777778D Cbody bgcolorG8rgb(777)8D Cbody bgcolorG8black8D

>ackground

The background attribute specifies a background%image for an HTML page. The alue of this attribute is the ,:L ofthe image you want to use. -f the image is smaller than the browser window the image will repeat itself until it fills theentire browser window.

Cbody backgroundG8clouds.gif8D

Cbody backgroundG8http;''www.wAschools.com'clouds.gif8D

The ,:L can be relatie (as in the first line aboe) or absolute (as in the second line aboe).3ote; -f you want to use a background image you should keep in mind;

&ill the background image increase the loading time too muchX

&ill the background image look good with other images on the pageX&ill the background image look good with the text colors on the pageX&ill the background image look good when it is repeated on the pageX&ill the background image take away the focus from the textX>asic 3otes % ,seful Tips

The bgcolor background and the text attributes in the CbodyD tag are deprecated in the latest ersions of HTML(HTML F and HTML). The &orld &ide &eb 2onsortium (&A2) has remoed these attributes from its recommendations.#tyle sheets (2##) should be used instead (to define the layout and display properties of HTML elements).

The )nchor Tag and the Hre )ttribute

HTML uses the CaD (anchor) tag to create a link to another document.

+n anchor can point to any resource on the &eb; an HTML page an image a sound file a moie etc.

The syntax of creating an anchor;

Ca hrefG8url8DText to be displayedC'aD

The CaD tag is used to create an anchor to link from the href attribute is used to address the document to link to andthe words between the open and close of the anchor tag will be displayed as a hyperlink.

7


8/17

The Target )ttribute

&ith the target attribute you can define where the linked document will be opened.

The line below will open the document in a new browser window;

Ca hrefG8http;''www.wAschools.com'8 targetG8elowis the syntax of a named anchor;

Ca nameG8label8DText to be displayedC'aD

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The linebelow defines a named anchor;

Ca nameG8tips8D,seful Tips #ectionC'aD

ou should notice that a named anchor is not displayed in a special way.

To link directly to the 8tips8 section add a sign and the name of the anchor to the end of a ,:L like this;

Ca hrefG8http;''www.wAschools.com'html


9/17

ColDCliD2offeeC'liDCliDMilkC'liDC'olD

Here is how it looks in a browser;4. 2offeeB. Milk

-nside a list item you can put paragraphs line breaks images links other lists etc.

einition Lists

+ definition list is not a list of items. This is a list of terms and explanation of the terms. + definition list starts with the CdlDtag. ach definition%list term starts with the CdtD tag. ach definition%list definition starts with the CddD tag.

CdlDCdtD2offeeC'dtDCddD>lack hot drinkC'ddDCdtDMilkC'dtDCddD&hite cold drinkC'ddDC'dlD

Here is how it looks in a browser;2offee

>lack hot drinkMilk &hite cold drink

-nside a definition%list definition (the CddD tag) you can put paragraphs line breaks images links other lists etc.

List Tags

Tag "escription

ColD "efines an ordered list

CulD "efines an unordered list

CliD "efines a list item

CdlD "efines a definition list

CdtD "efines a definition term

CddD "efines a definition description

Tables

Tables are defined with the CtableD tag. + table is diided into rows (with the CtrD tag) and each row is diided into data

cells (with the CtdD tag). The letters td stands for 8table data8 which is the content of a data cell. + data cell can containtext images lists paragraphs forms hori/ontal rules tables etc.

Ctable borderG848DCtrDCtdDrow 4 cell 4C'tdDCtdDrow 4 cell BC'tdDC'trDCtrDCtdDrow B cell 4C'tdDCtdDrow B cell BC'tdDC'trDC'tableD

How it looks in a browser;

row 4 cell 4 row 4 cell B

row B cell 4 row B cell B

Tables and the Border )ttribute

-f you do not specify a border attribute the table will be displayed without any borders. #ometimes this can be usefulbut most of the time you want the borders to show.

To display a table with borders you will hae to use the border attribute;

Ctable borderG848DCtrDCtdD:ow 4 cell 4C'tdD

9
http://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dd.asphttp://www.w3schools.com/tags/tag_ol.asphttp://www.w3schools.com/tags/tag_ul.asphttp://www.w3schools.com/tags/tag_li.asphttp://www.w3schools.com/tags/tag_dl.asphttp://www.w3schools.com/tags/tag_dt.asphttp://www.w3schools.com/tags/tag_dd.asp


10/17

CtdD:ow 4 cell BC'tdDC'trDC'tableD

Headings in a Table

Headings in a table are defined with the CthD tag.

Ctable borderG848DCtrD

CthDHeadingC'thDCthD+nother HeadingC'thDC'trDCtrDCtdDrow 4 cell 4C'tdDCtdDrow 4 cell BC'tdDC'trDCtrDCtdDrow B cell 4C'tdDCtdDrow B cell BC'tdDC'trDC'tableD


Heading %not1er Heading


row B cell 4 row B cell B

"mpty Cells in a TableTable cells with no content are not displayed ery well in most browsers.

Ctable borderG848DCtrDCtdDrow 4 cell 4C'tdDCtdDrow 4 cell BC'tdDC'trDCtrDCtdDrow B cell 4C'tdDCtdDC'tdDC'trDC'tableD



row B cell 4

3ote that the borders around the empty table cell are missing (3>K Mo/illa 0irefox displays the border).To aoid this add a non%breaking space (nbsp@) to empty data cells to make the borders isible;

Ctable borderG848DCtrDCtdDrow 4 cell 4C'tdDCtdDrow 4 cell BC'tdDC'trDCtrDCtdDrow B cell 4C'tdDCtdDnbsp@C'tdDC'trDC'tableD



row B cell 4

Basic #otes $ *seul Tips

The CtheadDCtbodyD and CtfootD elements are seldom used because of bad browser support. xpect this to change

in future ersions of HTML. -f you hae -nternet xplorer J.7 or newer you can iew a working examplein our MLtutorial.

Table Tags

Tag "escription

10
http://www.w3schools.com/xml/tryit.asp?filename=cd_catalog_island_theadhttp://www.w3schools.com/xml/tryit.asp?filename=cd_catalog_island_thead


11/17

CtableD "efines a table

CthD "efines a table header

CtrD "efines a table row

CtdD "efines a table cell

#panning Multiple :ows and 2ells

,se rowspan to span multiple rows and colspan to span multiple columns.3ote; if you would like to place headers at the top of your columns use the CthD tag as shown below. >y default theseheaders are bold to set them apart from the rest of your table!s content.

Ctable borderG848DCtrDCthD2olumn 4C'thDCthD2olumn BC'thDCthD2olumn AC'thDC'trDCtrDCtd rowspanG8B8D:ow 4 2ell 4C'tdDCtdD:ow 4 2ell BC'tdDCtdD:ow 4 2ell AC'tdDC'trDCtrDCtdD:ow B 2ell BC'tdDCtdD:ow B 2ell AC'tdDC'trDCtrDCtd colspanG8A8D:ow A 2ell 4C'tdDC'trD

C'tableD

2olumn 4 2olumn B 2olumn A

:ow 4 2ell 4:ow 4 2ell B :ow 4 2ell A

:ow B 2ell B :ow B 2ell A

:ow A 2ell 4

2ell =adding and #pacing

&ith the cellpadding and cellspacing attributes you will be able to adEust the white space on your tables. #pacingdefines the width of the border while padding represents the distance between cell borders and the content within. 2olorhas been added to the table to emphasi/e these attributes.

HT!L Code-

Ctable borderG848 cellspacingG8478 bgcolorG8rgb(7BJJ7)8DCtrDCthD2olumn 4C'thDCthD2olumn BC'thDC'trDCtrDCtdD:ow 4 2ell 4C'tdDCtdD:ow 4 2ell BC'tdDC'trDCtrDCtdD:ow B 2ell 4C'tdDCtdD:ow B 2ell BC'tdDC'trDC'tableD

The FORM Tag

ou!e probably been wondering how the browser knows where a form begins and ends. 0or that matter how does thebrowser know where to send the dataX es of course to the 2$- program but... where is that program locatedX The datahas to be sent to a specific location.

This is accomplished by using the C01:MD tag. This tag has two attributes which must be used if the form is to hae anyprayer of working correctly. The attributes are MTH1" and +2T-13.

Here!s what an empty form would look like;C01:M methodG8post8 actionG8'cgi%bin'program48D

C'01:MD

M$TH&attribute has two possible alues; $T and =1#T. -f you want the data to go from the browser to the 2$-program as discussed below then use the method =1#T. -!m not een sure what $T does to be honest but as soon as- figure it out -!ll explain it (briefly) here.

11
http://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/tags/tag_th.asphttp://www.w3schools.com/tags/tag_tr.asphttp://www.w3schools.com/tags/tag_td.asphttp://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/tags/tag_th.asphttp://www.w3schools.com/tags/tag_tr.asphttp://www.w3schools.com/tags/tag_td.asp


12/17

%2T'0attribute contains the ,:L of the 2$- program which processes the data sent by the browser. -n the exampleaboe the program (program4) resides in the cgi%bin directory of the serer which contains the form itself. The alue of

+2T-13 can be either a relatie or a full ,:L.

+ny tag which is allowed inside of the C>1"D container is allowed inside a form. Headings paragraphs lists tablesimages links%% anything and eerything goes. -n addition there are certain tags which are allowed to exist inside a formand nowhere else.

+ form is an area that can contain form elements.0orm elements are elements that allow the user to enter information (like text fields textarea fields drop%down menusradio buttons checkboxes etc.) in a form.

+ form is defined with the CformD tag.

CformD CinputD CinputDC'formD

In$ut O%&ects

The most used form tag is the CinputD tag. The type of input is specified with the type attribute. The most commonlyused input types are explained below.

Text 0ields

Text fields are used when you want the user to type letters numbers etc. in a form.

CformD0irst name;Cinput typeG8text8 nameG8firstname8DCbrDLast name;Cinput typeG8text8 nameG8lastname8DC'formD

:adio >uttons

:adio >uttons are used when you want the user to select one of a limited number of choices.

CformDCinput typeG8radio8 nameG8sex8 alueG8male8D Male

CbrDCinput typeG8radio8 nameG8sex8 alueG8female8D 0emaleC'formD

2heckboxes

2heckboxes are used when you want the user to select one or more options of a limited number of choices.

CformDCinput typeG8checkbox8 nameG8bike8D- hae a bikeCbrDCinput typeG8checkbox8 nameG8car8D- hae a carC'formD

The For's Action Attri%ute and the Su%it Button

&hen the user clicks on the 8#ubmit8 button the content of the form is sent to another file. The form!s action attributedefines the name of the file to send the content to. The file defined in the action attribute usually does something with thereceied input.

Cform nameG8input8 actionG8html


13/17

Te(tarea O%&ect

"efines a text3area(a multi%line text input control). + user can write text in the text%area. -n a text%area you can writean unlimited number of characters. The default font in the text%area is fixed pitch.

#ource 1utput

Ctextarea rowsG8B8 colsG8B78DThe cat was playing in the garden. #uddenly a dog showed

up.....C'textareaD

Re)uired Attri%utes

"T" indicates in which "T"the attribute is allowed. #G#trict TGTransitional and 0G0rameset.

+ttribute *alue "escription "T"

cols number #pecifies the number of columns isible in the text%area #T0

rows number #pecifies the number of rows isible in the text%area #T0

+ptional )ttributes

+ttribute *alue "escription "T"

disabled disabled "isables the text%area when it is first displayed #T0

name name


14/17

HTML 4orm 2omponents and $!ements

2ontrol elements that are commonly used;

text boxesfor text and numerical entries

se!ection !istsfor long lists of options usually appearing in a drop%

down list box

radio buttons also called option buttons to select a single option

from a predefined list

c1eck boxesto specify an item as either present or absent

groups boxesto organi/e form elements

text areasfor extended entries that can include seeral lines of text

buttons that can be clicked to start processing

T1e 5form6 tagidentifies the beginning and end of a form. + single pagecan include seeral different forms but you cannot nest one form insideanother. The general syntax of the CformD tag is;

5form attributes6form e!ements and !ayout tags

57form6

>etween the CformD and C'formD tags place the arious tags for each of the fields in the form. ,se standard HTML tagsto specify the formZs appearance. + single &eb page can contain multiple forms the CformD tag includes the nameattribute. The name attribute identifies each form on the page.

The name attributeis also needed for programs that retriee alues from the form.

There are two possible alues for the method attribute; [get\ or [post\.the [get\ method (the default) packages the form data by appending it to the end of the ,:L specified in the actionattribute the [post\ method sends form data in a separate data stream allowing the &eb serer to receie the datathrough what is called [standard input\ the [post\ method is considered the preferred way of sending data to a &eb sererThe [post\ method is also safer because some &eb serers limit the amount of data sent ia the [get\ method and will

truncate the ,:L cutting off aluable information

4orm 'nput Text 8 C-3=,T T=GTT 3+MGnae M+L3$THG"ength#-]Gsi*e*+L,G+a"ueD

The text type input tag specifies a single line text entry field within the form that contains it.The 3+M attribute is a re9uired field and is used to identify the data for the field.The M+L3$TH attribute specifies the number of characters that can be entered into this field.The #-] attribute specifies the amount of display space this field should take up.The default for #-] will ary by browser.The *+L, attribute specifies the initial alue of the field.

4orm 'nput 21eck ox8C-3=,T T=G2H2I>1 3+MGnae*+L,G+a"ue 2H2I" D

The checkbox type input tag specifies a >oolean choice within the form that contains it. -f more than one checkboxappears in the form with the same name the user can select none one or seeral of the choices.The 3+M attribute is a re9uired field and is used to identify the data for the field.The *+L, attribute specifies the alue that is returned if the box is checked. -f the 2H2I" attribute is specified thebox is initially selected.

4orm 'nput Radio utton 8 C-3=,T T=G:+"-1 3+MGnae*+L,G+a"ue 2H2I" D

The radio button type input tag allows a choice among a number of options. 3ormally more than one radio button willappear in the form with the same name. The user can then select only one of the of the choices.

14


15/17

The 3+M attribute is a re9uired field and is used to identify the data for the field. -f one of the choices has the 2H2I"attribute it will initially be selected. -f none of the choices has the 2H2I" attribute then the first one defaults as initiallyselected. The *+L, attribute specifies the alue that is returned if the box is checked.4orm 'nput 4i!e 8 C-3=,T T=G0-L 3+MGnae+22=TGie t#$e "istD

The file type input tag allows the user to attach one or more files to the form for submission.The 3+M attribute is a re9uired field and is used to identify the data for the field.The +22=T attribute is a list of mime types that will be accepted. (e.g. 8image'^8 or 8image'gif image'Epeg8).

4orm 'nput #assword 8C-3=,T T=G=+##&1:" 3+MGnae M+L3$THG"ength #-]Gsi*e*+L,G+a"ueD

The password type input tag specifies a single line text entry field within the form that contains it. The alue entered by theuser will be obscured as it is entered.The 3+M attribute is a re9uired field and is used to identify the data for the field.The M+L3$TH attribute specifies the number of characters that can be entered into this field. -f M+L3$TH is notspecified then there is no limit on the number of characters entered. -f M+L3$TH is longer than #-] then the text fieldwill scroll appropriately.The #-] attribute specifies the amount of display space this field should take up. The default for #-] will ary bybrowser.The *+L, attribute specifies the initial alue of the field.

4orm 'nput Reset 8 C-3=,T T=G:#TD

The reset type input tag specifies a button. &hen the user clicks the button all the fields in the form are reset to theirinitial alues.

4orm 'nput Submit 8 C-3=,T T=G#,>M-T 3+MGnae *+L,G+a"ueD

The submit type input tag specifies a button. &hen the user clicks the button the form is submitted.The 3+M attribute is used to identify the data for the field.-f no 3+M attribute is gien then this element does not form part of the submitted response.The *+L, attribute specifies the label for the button.

4orm Se!ect

C#L2T 3+MGnaeM,LT-=L #-]Gsi*eD o$tion entriesC'#L2TD

C1=T-13D contentC1=T-13 #L2T"D contentC1=T-13 *+L,G+a"ueD contentC1=T-13 #H+=Gsha$eD

The select tag specifies a multiple line selection box field within the form that contains it. The user can select one or morelines if the attribute M,LT-=L is specified. The 3+M attribute is a re9uired field and is used to identify the data for thefield.The #-] attribute specifies the number of lines of selections that are to be displayed.The #L2T" attribute of the option tag specifies that the option is to be initially selected.The *+L, attribute specifies the alue to be returned if this option is selected.-f the *+L, attribute is not specified the content of the option is used.

4orm Text %reaCTT+:+ 3+MGnae21L#G, co"uns:1G, ro-sD contentC'TT+:+DThe text area tag specifies a multiple line text area field within the form that contains it.The 3+M attribute is a re9uired field and is used to identify the data for the field.The 21L# attribute specifies the width in characters of the text area.The :1 attribute specifies the number of lines the text area contains.The content is used as an initial alue for the field. The field can be scrolled beyond the 21L# and :1 si/e to allow folarger amounts of text to be entered.

15


16/17

FRAMES . SYNTA/

0rames are generated by three things; FRAMESETtags FRAMEtags and Frae"ocuments.

4R%M$ &2UM$0T

+ 0rame "ocument has a basic structure ery much like your normal HTML document except the &*container isreplaced by a 4R%M$S$Tcontainer which describes the sub%HTML documents or 0rames that will make up the page.

CHTMLD

CH+"DC'H+"D

C0:+M#TDC'0:+M#TD

C'HTMLD

4R%M$ S*0T%9

0rame syntax is similar in scope and complexity to that used by tables and has been designed to be 9uicklyprocessed by -nternet client layout engines.

54R%M$S$T6

This is the main container for a 0rame. -t has B attributes RWSand 2LS. + frame document has no >1"and no tags that would normally be placed in the >1" can appear before the 0:+M#T tag or the0:+M#T will be ignored. The 0:+M#T tag has a matching end tag and within the 0:+M#T you canonly hae other nested 0:+M#T tags 0:+M tags or the 310:+M# tag.

RWS:;row+ simple numeric alue is assumed to be a fixed si/e in pixels. This is the most dangerous type of alue to usesince the si/e of the iewer!s window can and does ary substantially. -f fixed pixel alues are used it will almost

certainly be necessary to mix them with one or more of the relatie si/e alues described below. 1therwise theclient engine will likely oerride your specified pixel alue to ensure that the total proportions of the frame are477_ of the width and height of the user!s window.=a!ue?This is a simple percentage alue between 4 and 477. -f the total is greater than 477 all percentages are scaleddown. -f the total is less than 477 and relatie%si/ed frames exist extra space will be gien to them. -f there areno relatie%si/ed frames all percentages will be scaled up to match a total of 477_.=a!ue@The alue on this field is optional. + single !^! character is a 8relatie%si/ed8 frame and is interpreted as a re9uestto gie the frame all remaining space. -f there exist multiple relatie%si/ed frames the remaining space is diided

16


17/17

eenly among them. -f there is a alue in front of the !^! that frame gets that much more relatie space. 8B^^8would gie B'A of the space to the first frame and 4'A to the second.xample for A rows the first and the last being smaller than the center row;C0:+M#T :1G8B7_?7_B7_8D

xample for A rows the first and the last being fixed height with the remaining space assigned to the middle row;C0:+M#T :1G8477^4778D

2LS:;co!umnThe 0:+M#T tag can be nested inside other 0:+M#T tags. -n this case the complete subframe is placed in thespace that would be used for the corresponding frame if this had been a 0:+M tag instead of a nested 0:+M#T.54R%M$6

This tag defines a single frame in a frameset. -t has ? possible attributes; SR2 0%M$ M%R'0W'&THM%R'0H$'HT S2RLL'0 and 0R$S'A$. The 0:+M tag is not a container so it has no matching endtag.

SR2:;ur!;The #:2 attribute takes as its alue the ,:L of the document to be displayed in this particular frame. 0:+Mswithout #:2 attributes are displayed as a blank space the si/e the frame would hae been.

0%M$:;window

oop lec complete prelim

Documents