SchoolofComputingScienceandEngineering(SCSE) B.

TechCSE[Winter2012] Course:CSE308InternetandWebProgrammingLAB InstructionstotheStudents:

ThefollowingtopicsarecoveredinIWPLAB HypertextMarkupLanguage(HTML) CascadingStyleSheet(CSS) JavaScriptBasics PHPScriptingLanguage

YoucanuseeithersimpletexteditororNetbeansIDEfordevelopingcode.[Donotuse DreamweaveroranyWYSIWYGEditor] YoucanreferthelatestandupdatedtutorialsofwebrelatedprogrammingfromW3C Schoolswebsite(http://www.w3schools.com/) DeadlineforCompletingLABCycle1:17/02/2012

I.HyperTextMarkupLanguage(HTML) Activity1:IntroductiontoHTML
1. WriteHTMLcodetodevelopawebpagehavingthebackgroundinredandtitleMyFirst Pageinanyothercolor. 2. CreateaHTMLdocumentgivingdetailsofyourname,age,telephone,address,pincode& Emailidalignedinproperorder? 3. WriteHTMLcodetodesignapagecontainingatextinaparagraphgivesuitableheading style.

Activity2:TagsinHTML
HTMLTopics:Words,Lists,SimpleLinks,MoreAdvancedText,SimpleImages, Tables,Colours,AdvancedLinks 1. Createasimplepageintroducingyourself,howoldyouare,whatyoudo,whatyoulike 1

anddislike. 2. Modifytheintroductiontoincludeabulletlistofwhatyoudoandputlistthe5thingsyou likemostanddislikeasnumberedlists. 3. Createanotherpageaboutyourfavouritehobby,andlinkitto(andfrom)yourmainpage. 4. Centresomething,andputaquoteononeofyourpages 5. Putanexistingimageonawebpage. 6. Createatable,useaheadingandatleastoneuseofrowspan/colspan 7. Colourapageandsometextwithinthepage 8. Linktoanothersite

Activity3:FramesinHTML
1. Createawebpagewhichshoulddividepageintotwoequalframes Frame1 Frame2

2. Createawebpagewhichshouldgeneratefollowingoutput: Frame1 Frame2 Frame3

3. Createawebpagehavingtwoframesonecontaininglinesandanotherwithcontentsof thelink.WhenlinkisclickedappropriatecontentsshouldbedisplayedonFrame

Activity4:FormsinHTML
1. Designaformusingallinputtypes. 2. Createasimpleformaccepting Name RegisterNumber CourseCode DateofRegistration EmailID andSubmitbutton

Activity5:HTML5Introduction 1. DesignwebsiteswithfollowingHTML5tags <figure> <header> 2

<footer> <audio> <embed> <canvas>

2.ApplyHTML5validationforanactivity4

II.CascadingStyleSheet(CSS)
Activity6:DesignaWebpagewithStyling Lists

Activity7:WriteaCSScodetocreateroundedcornerinyourwebpageandalsoconsiderthe browsercompatibilitywhiledesigningit.

Activity8:WriteaCSScodetodesignawebpageusinghorizontaldropdownmenu.

Activity9: WriteaCSScodetodesignawebpagewithfollowingstyle(UseHTMLGrouping Tags<div>and<span>).

Activity10:DesignthefollowingTableusingHTMLandCSScode(Changetherowcolorwhile hoverthemousecursor).

III.JavaScript
Activity11:JavaScriptBasics CreateapagewithJavaScripttodothefollowing.Thesecanallbeononepage. 1. Prompttheuserfortheirname. 2. Useapopupboxtowelcometheuserbyname. 3. Displaythecurrentdateonthepageinthefollowingformat:February12,2012.Donot displaythetime.Donot"hardcode"thedate;ifIloadthepagetomorrow,Ishouldgeta differentdatethanifIloadittoday. 4. Displaythelastmodifieddateofthedocument. 5. Putsomeusefuladvice,onanysubject,inthestatuslineofthebrowser.

6. DisplayamessagesayingGoodMorningifitisinthemorning,GoodAfternoonifitisin theafternoon,andGoodEveningifitisintheEvening. Activity12:CookieandDialogBox 1. WriteaJavaScriptstatementthatdisplaysadialogboxwelcomingvisitorstoyourweb pagewithvisitorcount. 2. Createapagethatpromptstheuserforhisorhernameasthepageloads(viadialogbox) andthenwelcometheuserbynameinthebodyofthepageandalsorememberand displaythenameinotherpages. Activity12:FunctioninJavaScript 1. Writeascriptthatcontainsafunctionthatyoucanpassamarkasaparameteranddisplay agradewithpassorfailcondition.Demonstratethefunctionsbyprintingoutthegrade andpass/failstatusforfivestudents.Thegradeshouldbecalculatedbasedonthe following

Activity13: Createwebpagecontainingadynamicdigitalclockatthetoprightcorner.The clockshouldbethefollowingformat 24HourFormatClock[23:11:13] ApplyCSStomakeborderandbackground

Activity14: 1. Createaformthatincludes2textboxes(oneforname,oneforemailaddress),atextarea, adropdownbox(<select>tag),asetofradiobuttons,andasetofcheckboxes.Format theformusingatable.TheACTIONattributeoftheformtagshouldbetoemailtheform resultstoyouremailaddress. 2. AddJavaScripteventhandlerstotheformtovalidatetheformbeforeitisemailedtoyou. Ifthereisaproblem,displaytheproblemwiththepageinsomeway.Possiblewaystodo thisare: apopupbox displayingtheproblemsinanewwindowinredtextandhavingtheuserusethe backbuttontogobacktotheoriginalpage displayingtheproblemsinthecurrentwindowatthetopofthepageinredtext displayingtheprobleminanotherframe

3. Validatethatanentryhasbeenmadeineachformelement 4. Validatethattheemailaddresscontainsan@sign.