1. IM PLEMENTATION OF HTML TAGS ( 1) & CREATION OF REGISTRATION FORM USING HTML(15) 2. TYPES OF CASCADING STYLE SHEET (15) 3. IMPLEMENTATION OF JAVASCRIT PROGRAM(2 5) 4. DOM MANIPULATION USING JAVASCRIPT ( 33) 5. FORM VALIDATION USING JAVASCRIP T(37) 6. IMPLEMENTATION OF JSP SCRIPTLET ELEMENTS(50) 7. IMPLEMENTATION OF JSP IMPLICIT OBJECTS(56) 8. IMPLEMENTATION OF JSP ACTION TAGS(69) 9. IMPLEMENTATION OF JSP CLIENT REQ & SERVER RESPONSE(74) 10. SPRING CONFIGURATION METADATA(79) 11. SPRING JDBC TEMPLATE(91) 12. SPRING MVC FRAMEWORK(99) 13. HIBERNATE FRAMEWORK(105) 14. HIBERNATE MAPPING FILES(112) 15. WEB APPLICATION USING ANGULAR JS(127) INDEX Ex. No. 1 a) MODULE 1 – HTML AND CSS Date: IMPLEMENTATION OF HTML TAGS AIM: To Create a HTML page with frames, links, tables and other HTML Style tags, Formatting tags ,Quotations, Comments, Colors, Images for highlighting the facilities in the Department in your College. PROCEDURE: HTML TAGS: • <html> - The HTML tag is the root tag that describes the whole webpage. • <head> - Head tag contains information about the document like its title, author information, description of the webpage • <title> - Title tag is used inside <head>, and it specifies the title of the document. • <body> - The body tag contains all the information which will be displayed on the webpage HTML Heading Tag – Used to add the appropriate heading to the HTML File. <h1> - Heading tag is used to define headings. <h1> is the largest heading, followed by <h2>, <h3>, to <h6>. HTML Paragraph Tag - The <p> tag is used to define a paragraph in a document. HTML Anchor Tag - HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give a link to any file, webpage, image etc HTML Image Tag is used to add Images in HTML documents. ▪ The HTML <img> tag is used to add image in a document. ▪ The 'src' attribute is used to give source (address) of the image. ▪ The height and width of the image can be controlled by the attributes - height="px" and width="px". <hr> • Used for creating the line, mainly used when you want to draw a single line web page. <pre> - This is a very important tag of HTML; • we want to show everything the same as it is written inside the HTML page;   • To print a single space, this is used in HTML. HTML FORMATTING TAGS: • Bold Tag - The HTML <b> Tag defines bold text. Bold text is wider and darker text than the default text, without any extra importance to the browser. • HTML Italic Text - The HTML <i> Tag defines italic text. This type of formatting displays cursive font. • HTML Underlined Text - The HTML <u> Tag defines Underlined text. • HTML Strong Text - The HTML <strong> Tag displays same formatting like a <b> tag. Strong text has some importance to the browser and search engines. • HTML Bigger Text - The HTML <big> element defines BIG text. • HTML Smaller Text - The HTML <small> Tag defines small text. • HTML Marked Text - The HTML <mark> Tag defines Highlighted text. The text will have a background color and represent relevancy in an HTML document. • HTML Emphasized Text - The HTML <em> element defines Emphasized text. It will give the text the same Italic formatting. • HTML Inserted Text - Anything that appears within <ins>...</ins> element is displayed as inserted text. • HTML Deleted Text - The HTML <del> element defines Deleted text. This displays Text with a line strike. • HTML Subscripted Text - The HTML <sub> element defines subscripted text. This type of text is small in size and is placed slightly below the normal line of text. • HTML Superscripted Text - The HTML <sup> element defines superscripted text. The text is placed slightly above the normal line of text. • HTML Monospaced Text - The content of a <tt>...</tt> element is written in monospaced font. • In a monospaced font, however, each letter has the same width.. (for example, the letter 'm' is wider than the letter 'i') • HTML Strike Text - Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below COMMENTS: • Comments are usually added with the purpose of making the source code easier to understand. • An HTML comment begins with <! -- , and ends with -- > Example - 1. <! -- This is an HTML comment -- > <! -- This is a multi - line HTML comment that spans across more than one line -- > <p>This is a normal piece of text.</p> 2. <! -- Hiding this image for testing <img src="images/smiley.png" alt="Smiley"> -- > HTML TABLES: • create a table using the <table> element. • <tr> elements - to create rows and <td> elements - to create columns inside a row. • <th> element - define a cell as a header for a group of table cells. • Spanning allow you to extend table rows and columns across multiple other rows and columns.. • The rowspan or colspan attributes used to span multiple rows or columns in a table. • The <caption> element must be placed directly after the opening <table> tag to add the caption to the table. • HTML provides a series of tags <thead>, <tbody>, and <tfoot> that helps you to create more structured table, by defining header, body and footer regions, respectively. • Tables - Include the details about the placement cell in your department using the below format. HTML LISTS: • There are three different types of list in HTML and each one has a specific purpose and meaning.. • Unordered list — Used to create a list of related items, in no particular order. • Ordered list — Used to create a list of related items, in a specific order. • Description list — Used to create a list of terms and their descriptions. UNORDERED LIST: ▪ The <ul> element represents an unordered list of items, it represents list items by symbols. ▪ <ul> tag is used when there is no need for sequential order ▪ Unordered list is declared using <ul> tag and all of its list items are written inside the <li> tag ▪ type attribute is used to specify the type of symbols to be used in the markers. ▪ In <ul> tag, type attribute can have one of the following values. ✔ disc (default) ✔ circle ✔ square ✔ none ORDERED LIST: • The <ol> element represents an ordered list of items , it represents list items by characters or numbers. • Ordered list declared using the <ol> tag and all of its list items are written inside the <li> tag • type attribute is used to specify the type of symbol s to use in the markers • In <ol> tag, type attribute can have one of the following values. ✔ type="1" (Default value) ✔ type="A" ✔ type="a" ✔ type="I" ✔ type="i" DESCRIPTION LIST: • The description list is created using <dl> element • The <dl> element is used in conjunction with the <dt> element which specify a term, and the <dd> element which specify the term's definition. FRAMES: • An iframe or inline frame is used to display external objects including other web pages within a web page. • Also, the content inside an iframe exists entirely independent from the surrounding elements Syntax: • <iframe src=" URL "></iframe> Design a HTML document consisting of four frames. ● The first frame should display an ordered list and unordered list. ● The second frame should display an image ● The third frame should contain simple login form with username, password , submit and reset button ● The fourth frame should display “Welcome” message using HTML marquee tag CODE: <html> <head> <title>Facilities in Our Department</title> </head> <body> <center><img src="discussion.jpg" width="600px" height="300px"></center> <br><center><img src="computer_lab.jpg" width="600px" height="300px"></center></br> <h1 style="font - size:40px;">About Our Department</h1> <p sty le="font - size:20px;"><b>Department of Information Technology</b>,established in <b> 2019 </b> aims to prepare students as <i> Industry Ready Professionals </i> and helps them to learn the Trending Technologies at its<small> peak of growth</small>.We are co mmitted in providing <big>Broad - based</big> ,<em> Innovative </em>and<insert> High Quality Education </insert>with the <sub>exposure to</sub> interdisciplinary streams.The department <sup>holds a deeper</sup> industry bonding which helps our students to ex cel not <strong>only in academics</strong> but also facilitates a hands - on experience on the technology required for the day.</p> <h2 style=font - size:40px;">College</h2> <ul type="circle"> <li style="font - size:20px;">Computer Practice Laboratory</li> <li style="font - size:20px;">DBMS and Networking Laboratory</li> <li style="font - size:20px;">Networking Laboratory</li> <li style="font - size:20px;">Project Laboratory</li> <li style="font - size:20 px;">IT Center</li> </ul> <h3 style="font - size:40px;">Faculties Profile</h3> <table border=3 bordercolor="black"> <caption><b>List of Faculties</b></caption> <tr> <th>S.No</th> <th>Name</th> <th>Years of Experience</th> </tr> <tr> <td>1</td> <td>Dr.P.John Augutine</td> <td>15</td> </tr> <tr> <td>2</td> <td>Ms.N.Gayathri</td> <td>7</td> </tr> <tr> <td>3</td> <td>Ms.T.Jayapratha</td> <td>5</td> </tr> <tr> <td>4</td> <td>Mr.A.Anandaraj</td> <td>7</td> </tr> </table> <br> <iframe src="login page .html" style="border:2px Solid blue;"></iframe> </br> </body> </html> List: <html> <head> <title>List</title> </head> <body bgcolor="Yellow"> <br>1.Apple</br> <br>2.Orange</br> <br>3.Grapes</br> </br> </body> </html> Marquee: <marquee behavior="scroll" direction="left">Welcome to HTML</marquee> Frames: <html> <head> <title>Frames</title> </head> <body> <iframe src="list (1).html" style="border:2px SolidBlue;"></iframe> <iframe src="computer_lab.jpg" style="border:2px SolidBlue;"></iframe> <iframe src="login page .html" style="border:2px SolildBlue;"></iframe> <iframe src="marquee.html" style="border:2px SolidBlue;"></iframe> </body> </html> OUTPUT: List: Marquee: Frames: RESULT: Thus the HTML page with frames, links, tables, HTML Style tags, Formatting tags, Quotations, Comments, Colors and Images has been created and executed successfully. Ex. No. 1 b) MODULE 1 – HTML AND CSS Date: CREATION OF REGISTRATION FORM USING HTML AIM: To design a Job Registration form/Sign Up form using HTML. The Form should contain Text box[name], Radio button [sex], Text area[comments], List Items[country], File[Browse], Label Field, Password field[password] and check box. PROCEDURE: • Forms contain special elements called controls like inputbox, checkboxes, radio - buttons, submit buttons, etc. • Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for further processing. The <form> tag is used to create an HTML form. • HTML TEXT Field - It allows you to specify various types of user input fields, depending on the type attribute. • HTML PASSWORD Field - Password fields are similar to text fields. The only difference is; characters in a password field are masked, i.e. they are shown as asterisks or dots. • HTML RADIO BUTTONS - Radio buttons are used to let the user select exactly one option from a pre - defined set of options.. • HTML CHECK BOXES - Checkboxes allows the user to select one or more option from a pre - defined set of options. It is created using an < input> element whose type attribute has a value of checkbox. • HTML FILE SELECT BOX - The file fields allow a user to browse for a local file and send it as an attachment with the form data. • HTML SELECT BOXES - A select box is a dropdown list of options that allows user to select one or more option from a pull - down list of options . Select box is created using the <select> element and <option> element CODE: <html> <head> <title> Login Page </title> </head> <body bgcolor = "pink"> <br> <br> <form> <center> <label>UserName:</label> <input type="text" name="UserName" size ="20"/><br><br> Email: <input type="email" id="email" name="email"/><br><br> Password: <input type="Password" id="Pass" name="Pass"/><br><br> <input type="button" value="Sign Up"/> </center> <div> <label>Gender</label><br> <input type="radio" id="male" placeholder="gender" value="Male" required/> Male<br> <input type="radio" id="female" placeholder="gender" value="Female" required/> Female<br> </div> <br> <br> <div> <label for="country">Country</label> <select id="count" required> <option value="">Choose...</option> <option>United States</option> <option>India</option> <option>Denmark</option> </select> </div> <br> <br> <div> <label for="state">State</label> <select id="state" required> <option value="">Choose...</option> <option>Tamilnadu</option> <option>Kerala</option> </select> </div> <br> <br> <label for="file - select">Upload:</label> <input type="file" name="upload" id="file - select"> </form> </body> </html> OUTPUT: RESULT: Thus the Job Registration form/Sign Up form using HTML has been created and executed successfully. Ex. No. 2 MODULE 1 – HTML AND CSS Date: TYPES OF CASCADING STYLE SHEET AIM: To add an embedded and an external style sheet to the html document that represents Grocery Shop. The style sheet contains the rules for displaying all Stationary items in {color:red; font size:smaller; font - weight:bold} and Dairy products in body{font - fa mily:arial, Helvetica, sans - serif} ; li {font - weight:bold} ; h1{text - decoration:underline}; Ul{margin - left:20px}. PROCEDURE: Embedded or Internal Style sheets: ❑ Embedded or internal style sheets only affect the document they are embedded in. ❑ Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. Syntax: <style> body { background - color: YellowGreen; } p { color: #fff; } </style> External Style sheets: ❑ An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. ❑ External style sheets are the most flexible because you can change the look of an entire website by changing just one file. ❑ You can attach external style sheets in two ways — linking and importing ❑ An external style sheet can be linked to an HTML document using the <link> tag. ❑ The <link> tag goes inside the <head> section. Linking External Style Sheets: Syntax: Style.css body { background: lightyellow; font: 18px Arial, sans - serif; } h1 { color: orange; } Importing External Style sheets: ❑ The @import rule is another way of loading an external style sheet. ❑ The @import statement instructs the browser to load an external style sheet and use its styles. ❑ Two Ways: ❑ Other CSS rules may still be included in the <style> element. ❑ Another way , you can use the @import rule to import a style sheet within another style sheet. Syntax: <style> @import url("css/style.css"); p { color: blue; font - size: 16px; } </style> CODE: <!DOCTYPE html> <html> <head> <title>Grocery Shop</title> <link rel="stylesheet" type="text/css" href="shop style.css"> </head> <style type="text/css"> h1{ text - align: center; } h2{ text - decoration: underline; margin - left: 20px; } li{ color: blue; font - size: smaller; font - weight: bold; padding: 10px; } </style> <body bgcolor="pink" > <div id="Content" style="margin: 50px; background - color: white; border - radius: 10px"> <h1>Grocery Items</h1> <div id="one"> <h2>Fruits and Vegitables</h2> <li>Cauliflower</li> <li>Carrot</li> <li>BeetRoot</li> <li>Cucumber</li> <li>Beans</li> <hr> </div> <div id="two"> <h2>Meat</h2> <li>Fish</li> <li>Goat</li> <li>Mutton</li> <li>Chicken</li> <li>Pork</li> <hr> </div> <div id="three"> <h2>Dairy</h2> <li>Milk</li> <li>Cheese</li> <li>Butter</li> <li>Chocolates</li> <li>Milkshake</li> <hr>