WIXLIB

BMSIT & M, Bengaluru -56006415CSL77 – WEBTECHNOLOGY Lab ManualMr. Shankar R

15CSL77 – WEB TECHNOLOGY Lab ManualSYLLABUSPART A1. Write a JavaScript to design a simple calculator to perform the following operations:sum, product, difference and quotient.2. Write a JavaScript that calculates the squares and cubes of the numbers from 0 to 10 and outputs HTMLtext that displays the resulting values in an HTML table format.3. Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the interval of100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-SHRINKING” in BLUE color.then the font size decreases to 5pt.4. Develop and demonstrate a HTML5 file that includes JavaScript script that uses functions for thefollowing problems:a. Parameter: A stringb. Output: The position in the string of the left-most vowelc. Parameter: A numberd. Output: The number with its digits in the reverse order5. Design an XML document to store information about a student in an engineering college affiliated toVTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining, andemail id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.6. Write a PHP program to keep track of the number of visitors visiting the web page and to display thiscount of visitors, with proper headings.7. Write a PHP program to display a digital clock which displays the current time of the server.8. Write the PHP programs to do the following:a. Implement simple calculator operations.b. Find the transpose of a matrix.c. Multiplication of two matrices.d. Addition of two matrices.9. Write a PHP program named states.py that declares a variable states with value "Mississippi AlabamaTexas Massachusetts Kansas". write a PHP program that does the following:a. Search for a word in variable states that ends in xas. Store this word in element 0 of a list namedstatesList.b. Search for a word in states that begins with k and ends in s. Perform a case-insensitivecomparison. [Note: Passing re.Ias a second parameter to method compile performs a case-insensitivecomparison.] Store this word in element1 of statesList.c. Search for a word in states that begins with M and ends in s. Store this word in element 2 of thelist.d. Search for a word in states that ends in a. Store this word in element 3 of the list.10. Write a PHP program to sort the student records which are stored in the database using selection sort.BMSIT & M, Bengaluru -560064 Author: Mr. Shankar R, Asst. Prof, CSE2

15CSL77 – WEB TECHNOLOGY Lab ManualPART –B ( MINI-PROJECT)Develop a web application project using the languages and concepts learnt in the theory and exercises listedin part A with a good look and feel effects. You can use any web technologies and frameworks anddatabases.Note:1. In the examination each student picks one question from part A.2. A team of two or three students must develop the mini project. However during the examination, eachstudent must demonstrate the project individually.3. The team must submit a brief project report (15-20 pages) that must include the followinga. Introductionb. Requirement Analysisc. Software Requirement Specificationd. Analysis and Designe. Implementationf. TestingConduction of Practical Examination:1. All laboratory experiments from part A are to be included for practical examination.2. Mini project has to be evaluated for 30 Marks as per 6(b).3. Report should be prepared in a standard format prescribed for project work.4. Students are allowed to pick one experiment from the lot.5. Strictly follow the instructions as printed on the cover page of answer script.6. Marks distribution: a) Part A: Procedure Conduction Viva:10 35 5 50 Marks b) Part B:Demonstration Report Viva voce 15 10 05 30 Marks7. Change of experiment is allowed only once and marks allotted to the procedure part to be made zero.BMSIT & M, Bengaluru -560064 Author: Mr. Shankar R, Asst. Prof, CSE3

HTML Tags ChartTo use any of the following HTML tags, simply select the HTML code you'd like and copy and pasteit into your web page.TagNameCode ExampleBrowser View !--comment !--This can be viewed in the HTML part of aNothing will show (Tip)document-- a -anchor a href "http://www.domain.com/" Visit Our Site /a Visit Our Site (Tip) b bold b Example /b Example big big (text) big Example /big Example (Tip) body body ofHTML body The content ofdocumen your HTML page /body tContents of your webpage (Tip) br linebreakThe contents of your page br The contentsof your pageThe contents of your webpageThe contents of your webpage center center center This will center yourcontents /center dd dl dt Definition Term /dt definition dd Definition of the term /dd descripti dt Definition Term /dt on dd Definition of the term /dd /dl Definition TermDefinition of thetermDefinition TermDefinition of theterm dl dl dt Definition Term /dt definition dd Definition of the term /dd list dt Definition Term /dt dd Definition of the term /dd /dl Definition TermDefinition of thetermDefinition TermDefinition of theterm dt dl dt Definition Term /dt definition dd Definition of the term /dd term dt Definition Term /dt dd Definition of the term /dd /dl Definition TermDefinition of thetermDefinition TermDefinition of theterm em emphasisThis is an em Example /em of usingthe emphasis tagThis is an Example of usingthe emphasis tag embed embedobject embed src "yourfile.mid" width "100%"height "60" align "center" (Tip)embed embed object embed src "yourfile.mid" autostart "true"hidden "false" loop "false" noembed bgsound src "yourfile.mid"loop "1" /noembed font font face "Times NewRoman" Example /font fontThis will center yourcontentsMusic will begin playingwhen your page is loadedand will only play one time.A control panel will bedisplayed to enable yourvisitors to stop the music.Example (Tip)

font font font face "Times New Roman"size "4" Example /font Example (Tip) font font font face "Times New Roman" size " 3"color "#ff0000" Example /font Example form form form action "mailto:you@yourdomain.com" Name:Name: input name "Name" value ""size "10" br Email:Email: input name "Email" value ""Submitsize "10" br center input type "submit" /center /form h1 h2 h3 h4 h5 h6 headingheadingheadingheadingheadingheading head headingof HTML head Contains elements describing thedocumen document /head t hr horizonta hr / l rule123456 h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6 Heading123456(Tip)(Tip)Example /h1 Example /h2 Example /h3 Example /h4 Example /h5 Example /h6 Nothing will showContents of your webpage (Tip)Contents of your web page hr hr horizonta hr width "50%" size "3" / l rulehorizonta hr width "50%" size "3" noshade / l ruleContents of your web pageContents of your web pageContents of your web pageContents of your web page hr (InternetExplorer)horizonta hr width "75%" color "#ff0000" size "4"l rule/ Contents of your web page hr (InternetExplorer)horizonta hr width "25%" color "#6699ff" size "6"l rule/ html html head meta hypertext title Title of your web page /title markup /head language body HTML web page contents /body /html Contents of your web page i italic i Example /i Example img image img src "Earth.gif" width "41"height "41" border "0" alt "text describingthe image" / Contents of your web pageContents of your web pageContents of your web page(Tip)

Example 1: input inputfield form method post action "/cgibin/example.cgi" input type "text" size "10"maxlength "30" input type "Submit" value "Submit" /form Example 1: (Tip)SubmitExample 2: input (InternetExplorer)inputfield form method post action "/cgiExample 2: (Tip)bin/example.cgi" input type "text" style "color: #ffffff;Submitfont-family: Verdana; font-weight: bold; fontsize: 12px; background-color: #72a4d2;"size "10" maxlength "30" input type "Submit" value "Submit" /form Example 3: input inputfield form method post action "/cgibin/example.cgi" table border "0" cellspacing "0"cellpadding "2" tr tdbgcolor "#8463ff" input type "text"size "10" maxlength "30" /td tdbgcolor "#8463ff" valign "Middle" inputtype "image" name "submit"src "yourimage.gif" /td /tr /table /form Example 4: input inputfield form method post action "/cgibin/example.cgi" Enter Your Comments: br textarea wrap "virtual" name "Comments"rows 3 cols 20maxlength 100 /textarea br input type "Submit" value "Submit" input type "Reset" value "Clear" /form Example 3: (Tip)Example 4: (Tip)SubmitClearExample 5: input input inputfieldinputfield form method post action "/cgibin/example.cgi" center Select an option: select option option 1 /option option selected option 2 /option option option 3 /option option option 4 /option option option 5 /option option option 6 /option /select br input type "Submit"value "Submit" /center /form Example 6:Example 5: Tip)Select anoption:option 2SubmitExample 6: (Tip)

form method post action "/cgiSelect an option:bin/example.cgi" Option 1Select an option: br input type "radio" name "option" OptionOption 21 input type "radio" name "option"Option 3checked Option 2 input type "radio" name "option" OptionSelect an option:3 br Selection 1 br Select an option: br Selection 2 input type "checkbox" name "selection" Selection 3Selection 1 input type "checkbox" name "selection"Submitchecked Selection 2 input type "checkbox"name "selection" Selection 3 input type "Submit" value "Submit" /form Example 1:Example 1: (Tip) menu li type "disc" List item 1 /li li type "circle" List item 2 /li li type "square" List item 3 /li /MENU li list itemExample 2: ol type "i" li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li /ol link link marquee scrolling(Internet textExplorer) o List item 1List item 2List item 3Example 2:i.ii.iii.iv.ListListListListitemitemitemitem1234 head link rel "stylesheet" type "text/css"href "style.css" / /head marquee bgcolor "#cccccc" loop "-1"scrollamount "2" width "100%" ExampleMarquee /marquee (Tip)menu menu li type "disc" List item 1 /li li type "circle" List item 2 /li li type "square" List item 3 /li /menu meta meta meta name "Description"content "Description of your site" meta name "keywords"content "keywords describing your site" meta meta meta HTTP-EQUIV "Refresh"CONTENT "4;URL http://www.yourdomain.c Nothing will show (Tip)om/" menu o List item 1List item 2List item 3Nothing will show (Tip)

meta meta meta http-equiv "Pragma" content "nocache" Nothing will show (Tip) meta meta meta name "rating" content "General" Nothing will show (Tip) meta meta meta name "robots" content "all" Nothing will show (Tip) meta meta meta name "robots"content "noindex,follow" Nothing will show (Tip)NumberedNumbered ol li List li List li List li List /ol itemitemitemitem1.2.3.4.1 /li 2 /li 3 /li 4 /li ListListListListitemitemitemitem1234Numbered Special StartNumbered Special Start ol start "5" li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li /ol 5.6.7.8. ol orderedlista.b.c.d.A.B.C.D.Lowercase Roman Numerals ol type "i" li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li /ol stitemitemitemitem1234Capital Letters SpecialStartC.D.E.F.Capital Letters Special Start ol type "A" start "3" li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li /ol 1234Capital LettersCapital Letters ol type "A" li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li /ol itemitemitemitemLowercase LettersLowercase Letters ol type "a" li List item 1 /li li List item 2 /li li List item 3 /li li List item 4 /li /ol 34Lowercase temitem1234Capital Roman em1234