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: • - The HTML tag is the root tag that describes the whole webpage. • - Head tag contains information about the document like its title, author information, description of the webpage • - 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

About Our Department

Department of Information Technology,established in 2019 aims to prepare students as Industry Ready Professionals and helps them to learn the Trending Technologies at its peak of growth.We are co mmitted in providing Broad - based , Innovative and High Quality Education with the _{exposure to} interdisciplinary streams.The department ^{holds a deeper} industry bonding which helps our students to ex cel not only in academics but also facilitates a hands - on experience on the technology required for the day.

College

Computer Practice Laboratory
DBMS and Networking Laboratory
Networking Laboratory
Project Laboratory
IT Center

Faculties Profile

**List of Faculties**
S.No	Name	Years of Experience
1	Dr.P.John Augutine	15
2	Ms.N.Gayathri	7
3	Ms.T.Jayapratha	5
4	Mr.A.Anandaraj	7

List: List
1.Apple

2.Orange

3.Grapes

Marquee: Welcome to HTML Frames: Frames 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

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

Email:

Password:

Gender
Male
Female

Country

State

Upload:

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 section of an HTML document using the 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 tag. ❑ The tag goes inside the 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 CODE: Grocery Shop

Grocery Items

Fruits and Vegitables

Cauliflower

Carrot

BeetRoot

Cucumber

Beans

Meat

Fish

Goat

Mutton

Chicken

Pork

Dairy

Milk

Cheese

Butter

Chocolates

Milkshake

Missbrauch melden

PDF-Details

Kontaktdaten

INDEX