SCP53) (Web Technology) Unit-2 (Introduction to Style Sheet) Type: 100% Theory Question Bank

Size: px

Start display at page:

Download "SCP53) (Web Technology) Unit-2 (Introduction to Style Sheet) Type: 100% Theory Question Bank"

Elinor Copeland
6 years ago
Views:

1 ACADEMIC YEAR: REGULATION CBCS SCP53) (Web Technology) Unit-2 (Introduction to Style Sheet) Type: 100% Theory Question Bank Syllabus: [Regulation: 2012] UNIT II: Style sheet - Style sheet basic - Add style to document - Creating Style sheet rules - Style sheet properties - Font - Text - List - Color and background color - Box - Display properties. PART A QUESTIONS (2 marks) 1. Give an example for using background color in HTML.(April/May 2015) This tutorial will teach you how to set backgrounds of various HTML elements. You can set following background properties of an element: The background-color property is used to set the background color of an element. The background-image property is used to set the background image of an element. The background-repeat property is used to control the repetition of an image in the background. The background-position property is used to control the position of an image in the background. The background-attachment property is used to control the scrolling of an image in the background. The background property is used as shorthand to specify a number of other background properties 2. Define style sheet. (Apr/May 2013, Apr/May 2014) Style Sheet In word processing and desktop publishing, a style sheet is a file or form that definesthe layout of a document. When you fill in a style sheet, you specify such parameters as the page size, margins, and fonts. A term extended from print publishing to online media, a style sheet is a definition of a document's appearance in terms of such elements as: The default typeface, size, and color for headings and body text. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 1 of 35

2 ACADEMIC YEAR: REGULATION CBCS What is internal style sheet? An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag, like this: Example <head> <style> body { background-color: linen; h1 { color: maroon; margin-left: 40px; </style> </head> 4. What is CSS? Cascading Style Sheets: Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. 5. Explain font properties. Font properties This tutorial will teach you how to set fonts of a content available in an HTML element. You can set following font properties of an element: The font-family property is used to change the face of a font. The font-style property is used to make a font italic or oblique. The font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a font appears. The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font properties. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 2 of 35

3 ACADEMIC YEAR: REGULATION CBCS Explain Text properties. This tutorial will teach you how to manipulate text using CSS properties. You can set following text properties of an element: The color property is used to set the color of a text. The direction property is used to set the text direction. The letter-spacing property is used to add or subtract space between the letters that make up a word. The word-spacing property is used to add or subtract space between the words of a sentence. The text-indent property is used to indent the text of a paragraph. The text-align property is used to align the text of a document. The text-decoration property is used to underline, overline, and strikethrough text. The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters. The white-space property is used to control the flow and formatting of text. The text-shadow property is used to set the text shadow around a text. 7. Explain Color values in CSS. Color Values: CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element(i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects. You can specify your color values in various formats. Following table tells you all possible formats: Format Syntax Example Hex Code #RRGGBB p{color:#ff0000; Short Code Hex #RGB p{color:#6a7; RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%); RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255); keyword aqua, black, etc. p{color:teal; RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 3 of 35

4 ACADEMIC YEAR: REGULATION CBCS What is selector? A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc. Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc. Value: Values are assigned to properties. For example color property can have value either red or#f1f1f1 etc. You can put CSS Style Rule Syntax as follows: selector { property: value 9. Write about link element. <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with.css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. Here is the generic syntax of including external CSS file: <head> <link type="text/css" href="..." media="..." /> </head> 10. What are the advantages of CSS? CSS saves time Pages load faster Easy maintenance Superior styles to Multiple Device Compatibility Global web standards RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 4 of 35

5 ACADEMIC YEAR: REGULATION CBCS Write the properties of background. This tutorial will teach you how to set backgrounds of various HTML elements. You can set following background properties of an element: The background-color property is used to set the background color of an element. The background-image property is used to set the background image of an element. The background-repeat property is used to control the repetition of an image in the background. The background-position property is used to control the position of an image in the background. The background-attachment property is used to control the scrolling of an image in the background. The background property is used as shorthand to specify a number of other background properties 12. What is the properties support list element? List Properties: Lists are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style etc. using CSS The list-style-type Allows you to control the shape or appearance of the marker. The list-style-position Specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker. The list-style-image Specifies an image for the marker rather than a bullet point or number. The list-style Serves as shorthand for the preceding properties. The marker-offset Specifies the distance between a marker and the text in the list. 13. Write about border properties in css. The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change The border-color Specifies the color of a border. The border-style Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. The border-width Specifies the width of a border. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 5 of 35

6 ACADEMIC YEAR: REGULATION CBCS What is external style sheet? An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 15. Explain the pixels and inches CSS Measurement Units. Unit Description Example in Defines a measurement in inches. p {word-spacing:.15in; px Defines a measurement in screen pixels. p {padding: 25px; 16. Define display properties. The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. PART B QUESTIONS (5 marks) 1. Explain the properties of stylesheet with example.(apr/may 2015) This is a complete reference guide for web developers where haved we listed all the CSS properties defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2 Aural Background Border Classification Dimension Font Generated Content List and Marker Margin Outlines Padding Positioning Table Text Print RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 6 of 35

7 ACADEMIC YEAR: REGULATION CBCS Click any property to see its description with examples: Property background-attachment background-color background-image background-position background-repeat border border-bottom border-bottom-width border-collapse border-color border-left-color border-right-color border-top-color border-bottom-color border-left border-left-width border-right border-right-width border-spacing Description Determines if the background image is fixed in the window or scrolls as the document scrolls Sets the background color of an element Sets the background image of an element Sets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%. Determines how the background image is repeated (tiled) across an element Sets all four of an element's borders; value is one or more of a color, a value forborder-width, and a value for border-style Sets an element's bottom border; value is one or more of a color, a value forborder-bottom-width, and a value for border-style Sets the thickness of an element's bottom border. Sets the table border rendering algorithm Sets the color of all four of an element's borders; default is the color of the element Sets the color of an element's left borders; default is the color of the element Sets the color of an element's right borders; default is the color of the element Sets the color of an element's top borders; default is the color of the element Sets the color of an element's bottom borders; default is the color of the element Sets an element's left border; value is one or more of a color, a value for border-left-width, and a value for border-style. Sets the thickness of an element's left border Sets an element's right border; value is one or more of a color, a value forborder-right-width, and a value for borderstyle. Sets the thickness of an element's right border With separate borders set the spacing between borders. One RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 7 of 35

8 ACADEMIC YEAR: REGULATION CBCS border-style border-top border-top-width border-width bottom caption-side clear clip color content counter-increment counter-reset cue-after cue-before cursor direction display elevation empty-cells float font-family font-size font-size-adjust value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively. Sets the style of all four of an element's borders Sets an element's top border; value is one or more of a color, a value for border-top-width, and a value for border-style Sets the thickness of an element's top border. Sets the thickness of all four of an element's borders Used with the position property to place the bottom edge of an element Sets the position for a table caption Sets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear Sets the clipping mask for an element Sets the color of an element Inserts generated content around an element. Increments a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented. Resets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset. Plays the designated sound after an element is spoken Plays the designated sound before an element is spoken Defines shap of the cursor Defines direction of the flow of an element content Controls how an element is displayed Sets the height at which a sound is played With separate borders, hides empty cells in a table Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline Defines the font for an element, either as a specific font or as one of the generic serif, sans-serif, cursive, fantasy, and monospace. Defines the font size Adjusts the current font's aspect ratio RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 8 of 35

9 ACADEMIC YEAR: REGULATION CBCS font-stretch font-style font-variant font-weight height left letter-spacing line-height list-style-position list-style-type margin Determines the amount to stretch the current font Defines the style of the face, either normal or some type of slanted style Defines a font to be in small caps Defines the font weight. if a number is used, it must be a multiple of 100 between 100 and 900; 400 is normal, 700 is the same as the keyword bold Defines the height of an element Used with the position property to place the left edge of an element Inserts additional space between text characters Sets the distance between adjacent text baselines Indents or extends (default) a list item's marker with respect to the item's content Defines a list item's marker either for unordered lists (circle, disc, or square) or for ordered lists (decimal, loweralpha, lower-roman, none, upper-alpha, or upper-roman) Defines all four of an element's margins margin-bottom Defines the bottom margin of an element. Default value is 0. margin-left Defines the left margin of an element. Default value is 0. margin-right Defines the right margin of an element. Default value is 0. margin-top Defines the top margin of an element. Default value is 0. marker-offset marks max-height max-width min-height min-width orphans The marker-offset property can be used in bulleted lists for specifying the distance between the nearest border edges of a marker box (or bullet) and its associated principal box. The marks property is used to set crop marks and cross marks on paged media. This is used with rule. max-height property is used to constrain the height of an element. max-width property is used to set the maximum width of an element. min-height property is used to constrain the height of an element. min-width property is used to constrain the width of an element. Sets the minimum number of lines allowed in an orphaned paragraph fragment RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 9 of 35

10 ACADEMIC YEAR: REGULATION CBCS outline outline-color outline-color-style outline-width overflow padding The outline property is a shorthand property to specify all outline properties. The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular. The outline-style property is used to specify the style of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular. The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular. Determines how overflow content is rendered Defines all four padding amounts around an element padding-bottom Defines the bottom padding of an element. Default value is 0 padding-left Defines the left padding of an element. Default value is 0 padding-right Defines the right padding of an element. Default value is 0 padding-top Defines the top padding of an element. Default value is 0 page page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position quotes Associates a named page layout with an element Forces or suppresses page breaks after an element. Forces or suppresses page breaks before an element. Suppresses page breaks within an element The pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media. Pauses a media after speaking an element Pauses a media before speaking an element Sets the average pitch of an element's spoken content Sets the range of the pitch, from 0 (flat) to 100 (broad); default is 50 If a URL is provided, it is played during an element's spoken content.specifyingrepeat loops the audio; mix causes it to mix with, rather than replace, other background audio. Sets the positioning model for an element Sets the quote symbols used to quote text richness Sets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50 right Used with the position property to place the right edge of an RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 10 of 35

11 ACADEMIC YEAR: REGULATION CBCS size speak speak-header speak-numeral speak-punctuation speech-rate element. The size property is used in paged media to specify the size of the page. Determines how an element's content is spoken. Determines if table headers are spoken once for each row or column or each time a cell is spoken. Determines how numerals are spoken Determines if punctuation is spoken or used for inflection Sets the rate of speech; a number sets the rate in words per minute stress Sets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50. table-layout text-align text-decoration text-indent text-shadow text-transform top vertical-align visibility voice-family volume white-space widows width word-spacing z-index Determines the table-rendering algorithm Sets the text alignment style for an element Defines any decoration for the text; values may be combined Defines the indentation of the first line of text in an element; default is 0 Creates text drop shadows of varying colors and offsets Transforms the text in the element accordingly Used with the position property to place the top edge of an element. Sets the vertical positioning of an element Determines if an element is visible in the document or table Selects a named voice family to speak an element's content Sets the volume of spoken content; numeric values range from 0 to 100 Defines how whitespace within an element is handled Sets the minimum number of lines allowed in a widowed paragraph fragment Defines the width of an element Inserts additional space between words Sets the rendering layer for the current element. 2. Discuss shortly about font and its properties in HTML. (Apr/May 2015) RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 11 of 35

12 ACADEMIC YEAR: REGULATION CBCS Font Properties: This tutorial will teach you how to set fonts of a content available in an HTML element. You can set following font properties of an element: The font-family property is used to change the face of a font. The font-style property is used to make a font italic or oblique. The font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a font appears. The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font properties. Set the font family: Following is the example which demonstrates how to set the font family of an element. Possible value could be any font family name. <p style="font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> Set the font style: Following is the example which demonstrates how to set the font style of an element. Possible values arenormal, italic and oblique. <p style="font-style:italic;"> This text will be rendered in italic style </p> Set the font variant: Following is the example which demonstrates how to set the font variant of an element. Possible values arenormal and small-caps. <p style="font-variant:small-caps;"> This text will be rendered as small caps </p> Set the font weight: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 12 of 35

13 ACADEMIC YEAR: REGULATION CBCS Following is the example which demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. <p style="font-weight:bold;"> This font is bold. </p> <p style="font-weight:bolder;"> This font is bolder. </p> <p style="font-weight:900;"> This font is 900 weight. </p> Set the font size: Following is the example which demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in % <p style="font-size:20px;"> This font size is 20 pixels </p> <p style="font-size:small;"> This font size is small </p> <p style="font-size:large;"> This font size is large </p> Set the font size adjust: Following is the example which demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number. <p style="font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p> Set the font stretch: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 13 of 35

14 ACADEMIC YEAR: REGULATION CBCS Following is the example which demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used. Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. <p style="font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used. </p> 3. Explain External style sheet. (Apr/May 2014, Apr/May 2013) External CSS - The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with.css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. Here is the generic syntax of including external CSS file: <head> <link type="text/css" href="..." media="..." /> </head> Attributes: Attributes associated with <style> elements are: Attribute Value Description type text/css Specifies the style sheet language as a content-type (MIME type). This attribute is required. href URL Specifies the style sheet file having Style rules. This attribute is a required. media screen tty Specifies the device the document will be displayed on. Default value is all. This is optional attribute. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 14 of 35

15 ACADEMIC YEAR: REGULATION CBCS Example: tv projection handheld print braille aural all Consider a simple style sheet file with a name mystyle.css having the following rules: h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing:.4em; margin-bottom: 1em; text-transform: lowercase; Now you can include this file mystyle.css in any HTML document as follows: <head> <link type="text/css" href="mystyle.css" media="all" /> </head> 4. Discuss all the display properties. (Apr/May 2013) Display Properties: The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Display:none Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 15 of 35

16 ACADEMIC YEAR: REGULATION CBCS visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. Example h1.hidden { visibility: hidden; display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: Example h1.hidden { display: none; CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <li> <div> An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span> <a> Changing How an Element is Displayed Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. The following example displays <li> elements as inline elements: Example RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 16 of 35

17 ACADEMIC YEAR: REGULATION CBCS li { display: inline; The following example displays <span> elements as block elements: Example span { display: block; 5. How to add style to html? (Nov/Dec 2013) External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag, like this: Example <head> <style> body { </style> </head> Inline Styles background-color: linen; An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly! RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 17 of 35

18 ACADEMIC YEAR: REGULATION CBCS To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element: Example <h1 style="color:blue;margin-left:30px;">this is a heading.</h1> 6. Write about CSS text properties with examples. This tutorial will teach you how to manipulate text using CSS properties. You can set following text properties of an element: The color property is used to set the color of a text. The direction property is used to set the text direction. The letter-spacing property is used to add or subtract space between the letters that make up a word. The word-spacing property is used to add or subtract space between the words of a sentence. The text-indent property is used to indent the text of a paragraph. The text-align property is used to align the text of a document. The text-decoration property is used to underline, overline, and strikethrough text. The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters. The white-space property is used to control the flow and formatting of text. The text-shadow property is used to set the text shadow around a text. Set the text color: Following is the example which demonstrates how to set the text color. Possible value could be any color name in any valid format. <p style="color:red;"> This text will be written in red. </p> Set the text direction : Following is the example which demonstrates how to set the direction of a text. Possible values are ltr or rtl. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 18 of 35

19 ACADEMIC YEAR: REGULATION CBCS <p style="direction:rtl;"> This text will be renedered from right to left </p> Set the space between characters: Following is the example which demonstrates how to set the space between characters. Possible values arenormal or a number specifying space.. <p style="letter-spacing:5px;"> This text is having space between letters. </p> Set the space between words: Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space.. <p style="word-spacing:5px;"> This text is having space between words. </p> Set the text indent: Following is the example which demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.. <p style="text-indent:1cm;"> This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. </p> Set the text alignment: Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify.. <p style="text-align:right;"> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 19 of 35

20 ACADEMIC YEAR: REGULATION CBCS This will be right aligned. </p> <p style="text-align:center;"> This will be center aligned. </p> <p style="text-align:left;"> This will be left aligned. </p> Decorating the text: Following is the example which demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.. <p style="text-decoration:underline;"> This will be underlined </p> <p style="text-decoration:line-through;"> This will be striked through. </p> <p style="text-decoration:overline;"> This will have a over line. </p> <p style="text-decoration:blink;"> This text will have blinking effect </p> Set the text cases: Following is the example which demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.. <p style="text-transform:capitalize;"> This will be capitalized </p> <p style="text-transform:uppercase;"> This will be in uppercase </p> <p style="text-transform:lowercase;"> This will be in lowercase </p> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 20 of 35

21 ACADEMIC YEAR: REGULATION CBCS Set the white space between text: Following is the example which demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap. <p style="white-space:pre;">this text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag.</p> Set the text shadow: Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers. <p style="text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow.</p> 7. Discuss in details CSS background color. The background-color property is used to set the background color of an element. The background-image property is used to set the background image of an element. The background-repeat property is used to control the repetition of an image in the background. The background-position property is used to control the position of an image in the background. The background-attachment property is used to control the scrolling of an image in the background. The background property is used as shorthand to specify a number of other background properties. Set the background color: Following is the example which demonstrates how to set the background color for an element. <p style="background-color:yellow;"> This text has a yellow background color. </p> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 21 of 35

22 ACADEMIC YEAR: REGULATION CBCS Set the background image: Following is the example which demonstrates how to set the background image for an element. <table style="background-image:url(/images/pattern1.gif);"> <tr><td> This table has background image set. </td></tr> </table> Repeat the background image: Following is the example which demonstrates how to repeat the background image if image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once. By default background-repeat property will have repeat value. <table style="background-image:url(/images/pattern1.gif); background-repeat: repeat;"> <tr><td> This table has background image which repeats multiple times. </td></tr> </table> Set the background image position: Following is the example which demonstrates how to set the background image position 100 pixels away from the left side. <table style="background-image:url(/images/pattern1.gif); background-position:100px;"> <tr><td> Background image positioned 100 pixels away from the left. </td></tr> </table> Set the background attachment: Background attachment determines whether a background image is fixed or scrolls with the rest of the page. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 22 of 35

23 ACADEMIC YEAR: REGULATION CBCS Following is the example which demonstrates how to set the fixed background image. <p style="background-image:url(/images/pattern1.gif); background-attachment:fixed;"> This parapgraph has fixed background image. </p> 8. What are the properties used in table. The border-collapse Specifies whether the browser should control the appearance of adjacent borders that touch each other or whether each cell should maintain its style. The border-spacing Specifies the width that should appear between table cells. The caption-side Captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the captionside property to control the placement of the table caption. The empty-cells Specifies whether the border should be shown if a cell is empty. The table-layout Allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it. The border-collapse Property: This property can have two values collapse and separate. Following is the example to show both values: <style type="text/css"> table.one {border-collapse:collapse; table.two {border-collapse:separate; td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; td.b {border-style:solid; border-width:3px; border-color:#333333; padding:10px; </style> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 23 of 35

24 ACADEMIC YEAR: REGULATION CBCS The border-spacing Property: The border-spacing property specifies the distance that separates adjacent cells. borders. It can take either one or two values; these should be units of length. If you provide one value it will applies to both vertical and horizontal borders Or you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing: <style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px; /* This is how you can provide two values */ table.example {border-spacing:10px; 15px; </style> Now let's modify previous example and see the effect: <style type="text/css"> table.one { border-collapse:separate; width:400px; border-spacing:10px; table.two { border-collapse:separate; width:400px; border-spacing:10px 50px; </style> The caption-side Property: The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values. This property can have one of the four values top, bottom, left or right. Let us see following example to show each value: <style type="text/css"> caption.top {caption-side:top RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 24 of 35

25 ACADEMIC YEAR: REGULATION CBCS caption.bottom {caption-side:bottom caption.left {caption-side:left caption.right {caption-side:right </style> The empty-cells Property: The empty-cells property indicates whether a cell without any content should have a border displayed. This property can have one of the three values show, hide or inherit. Here is the empty-cells property used to hide borders of empty cells in the <table> element. <style type="text/css"> table.empty{ width:350px; border-collapse:separate; empty-cells:hide; td.empty{ padding:5px; border-style:solid; border-width:1px; border-color:#999999; </style> The table-layout Property: The table-layout property is supposed to help you control how a browser should render or lay out a table. This property can have one of the three values fixed, auto or inherit. Here is the example to show the difference between these properties. <style type="text/css"> table.auto { RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 25 of 35

26 ACADEMIC YEAR: REGULATION CBCS table-layout: auto table.fixed { table-layout: fixed </style> 9. Explain the properties of margin in cascading style sheet. The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. The values of the margin property are not inherited by child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal. There are following four properties to set an element margin. The margin A shorthand property for setting the margin properties in one declaration. The margin-bottom Specifies the bottom margin of an element. The margin-top Specifies the top margin of an element. The margin-left Specifies the left margin of an element. The margin-right Specifies the right margin of an element. Now we will see how to use these properties with examples. The margin Property: The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph: <style type="text/css"> p {margin: 15px all four margins will be 15px p {margin: 10px 2% top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. p {margin: 10px 2% -10px top margin will be 10px, left and right margin will be 2% of the total width RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 26 of 35

27 ACADEMIC YEAR: REGULATION CBCS of the document, bottom margin will be -10px p {margin: 10px 2% -10px auto top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser P{margin-left: 50px; margin-right: 50px; margin-top:50px; margin-bottom:50px; </style> (10 marks) PART C QUESTIONS 1. Explain the different ways to include style sheets with example. (Nov/Dec 2013) Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. An example of a style sheet file is shown below: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 27 of 35

28 ACADEMIC YEAR: REGULATION CBCS "mystyle.css": body { background-color: lightblue; h1 { color: navy; margin-left: 20px; Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag, like this: Example <head> <style> body { background-color: linen; h1 { color: maroon; margin-left: 40px; </style> </head> Inline Styles An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly! To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element: Example <h1 style="color:blue;margin-left:30px;">this is a heading.</h1> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 28 of 35

29 ACADEMIC YEAR: REGULATION CBCS How to incorporate style sheet? Explain with screen shots. (Nov 2012) Style Sheet: Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML. Advantages of CSS: CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. CSS Example body { background-color: #d0e4fe; h1 { color: orange; text-align: center; RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 29 of 35

30 ACADEMIC YEAR: REGULATION CBCS p { font-family: "Times New Roman"; font-size: 20px; 3. How to add style sheet to a document? Explain with example. (Apr 2012) HTML : An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: <html> <head> <title>bharathi</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <Div id=div1>bharathidasan Engineering and Techology</div> <Div id=div2>no. 4, Nethaji Nagar, Cuddalore Dist.</div> </body> </html> An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. An example of a style sheet file is shown below: Cascading Style Sheet: "mystyle.css": body { background-color: lightblue; #div1{ color: navy; margin-left: 20px; background-color: pink; width:700px; height:50px; RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 30 of 35

31 ACADEMIC YEAR: REGULATION CBCS padding: 10px; #div2{ color: white; margin-left: 20px; background-color: dark pink; width:700px; height:50px; padding: 10px; 4. Explain basic of style sheet. (Nov/Dec 2013) Style Sheet: Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML. Advantages of CSS: CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 31 of 35

32 ACADEMIC YEAR: REGULATION CBCS Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. CSS Example body { background-color: #d0e4fe; h1 { color: orange; text-align: center; p { font-family: "Times New Roman"; font-size: 20px; 5. Explain CSS selectors with suitable example. CSS Selectors or CSS Syntax A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc. Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc. Value: Values are assigned to properties. For example color property can have value either red or#f1f1f1 etc. You can put CSS Style Rule Syntax as follows: selector { property: value Example: You can define a table border as follows: table{ border :1px solid #C00; Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 32 of 35

33 ACADEMIC YEAR: REGULATION CBCS You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one. The Type Selectors: This is the same selector we have seen above. Again one more example to give a color to all level 1 headings : h1 { color: #36CFFF; The Universal Selectors: Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type : * { color: #000000; This rule renders the content of every element in our document in black. The Descendant Selectors: Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag. ulem { color: #000000; The Class Selectors: You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule..black { color: #000000; RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 33 of 35

34 ACADEMIC YEAR: REGULATION CBCS This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example: h1.black { color: #000000; This rule renders the content in black for only <h1> elements with class attribute set to black. You can apply more than one class selectors to given element. Consider the following example : <p class="center bold"> This para will be styled by the classescenter and bold. </p> The ID Selectors: You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule. #black { color: #000000; This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example: h1#black { color: #000000; The Child Selectors: You have seen descendant selectors. There is one more type of selectors which is very similar to descendants but have different functionality. Consider the following example: body > p { color: #000000; RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 34 of 35

35 ACADEMIC YEAR: REGULATION CBCS This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> etc. would not have any effect of this rule. The Attribute Selectors: You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that has a type attribute with a value of text: input[type="text"]{ color: #000000; The advantage to this method is that the <input type="submit" /> element is unaffected, and the color applied only to the desired text fields. There are following rules applied to attribute selector. p[lang] - Selects all paragraph elements with a lang attribute. p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr". p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr". p[lang ="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-". Grouping Selectors: You can apply a style to many selectors if you like. Just separate the selectors with a comma as given in the following example: h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing:.4em; margin-bottom: 1em; text-transform: lowercase; RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-2 QB Unit 1 Question Bank Page 35 of 35

36 ACADEMIC YEAR: REGULATION CBCS (SCP53) (Web Technology) Unit-1 (Introduction to HTML) Type: 100% Theory Question Bank with Answer PART AANSWER (2 Marks) 1. What is meant by Internet? (April/May 2015) Internet is defined as an Information super Higway, to access information over the web. However, It can be defined in many ways as follows: Internet is a world-wide global system of interconnected computer networks. Internet uses the standard Internet Protocol (TCP/IP). Every computer in internet is identified by a unique IP address. IP Address is a unique set of numbers (such as ) which identifies a computer location. A special computer DNS (Domain Name Server) is used to give name to the IP Address so that user can locate a computer by a name. For example, a DNS server will resolve a name to a particular IP address to uniquely identify the computer on which this website is hosted. Internet is accessible to every user all over the world. 2. Define frames. (April/May 2015) HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. 3. What is HTML? (April/May 2014) HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on a webpage are called Hypertext. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 1 of 40

37 ACADEMIC YEAR: REGULATION CBCS As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display. 4. What is IP address?(apr 2012, Nov/Dec 2013) address exhibits the following properties: IP address is the unique address assigned to each host present on Internet. IP address is 32 bits (4 bytes) long. IP address consists of two components: network component and host component. Each of the 4 bytes is represented by a number from 0 to 255, separated with dots. For example List of html tag. (Nov/Dec 2013) HTML Tag: Tag Description <!DOCTYPE...> This tag defines the document type and HTML version. <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. <head> This tag represents the document's header which can keep other HTML tags like <title>, <link> etc. <title> The <title> tag is used inside the <head> tag to mention the document title. <body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. <h1> This tag represents the heading. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 2 of 40

38 ACADEMIC YEAR: REGULATION CBCS <p> This tag represents a paragraph. 6. Name any four domain name extensions. (Apr 2012) Domain: When DNS was not into existence, one had to download a Host file containing host names and their corresponding IP address. But with increase in number of hosts of internet, the size of host file also increased. This resulted in increased traffic on downloading this file. To solve this problem the DNS system was introduced. Domain Name System helps to resolve the host name to an address. It uses a hierarchical naming scheme and distributed database of IP addresses and associated names Example: i).com ii) iii) iv).edu.org..gov 7. Expand WWW, URL, HTML and TCP/IP. (Apr/May 2013) WWW World Wide Web URL Uniform Resource Locator HTML Hyper Text Markup Language TCP/IP Transfer Control Protocol/ Internet Protocol 8. How do you include image (Apr/May 2013) You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag. <imgsrc= Image URL attributes-list /> The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag. 9. Define WWW. It is stands for world wide web. WWW is also known as W3. It offers a way to access documents spread over the several servers over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The hyperlinks allow the users to navigate between the documents RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 3 of 40

39 ACADEMIC YEAR: REGULATION CBCS What is modem (Apr/May 2014) Dial-up connection uses telephone line to connect PC to the internet. It requires a modem to setup dial-up connection. This modem works as an interface between PC and the telephone line. There is also a communication program that instructs the modem to make a call to specific number provided by an ISP. Dial-up connection uses either of the following protocols: 1. Serial Line Internet Protocol (SLIP) 2. Point to Point Protocol (PPP) 11. What is use of <br> tag? (Nov/Dec 2013) <Br> Tag Whenever we use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. 12. What are the two parts in the definition of list?(apr/may 2014) HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes use of following three tags. <dl> - Defines the start of the list <dt> - A term <dd> - Term definition </dl> - Defines the end of the list 13. Define internet.(nov/dec 2013, Nov 2012) Internet is defined as an Information super Higway, to access information over the web. However, It can be defined in many ways as follows: Internet is a world-wide global system of interconnected computer networks. Internet uses the standard Internet Protocol (TCP/IP). Every computer in internet is identified by a unique IP address. IP Address is a unique set of numbers (such as ) which identifies a computer location. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 4 of 40

40 ACADEMIC YEAR: REGULATION CBCS A special computer DNS (Domain Name Server) is used to give name to the IP Address so that user can locate a computer by a name. For example, a DNS server will resolve a name to a particular IP address to uniquely identify the computer on which this website is hosted. Internet is accessible to every user all over the world. 14. What is hyper link(apr/may 2014) A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. 15. What is table? The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. 16. Write the short note on web browser. web Browser is an application software that allows us to view and explore information on the web. User can request for any web page by just entering a URL into address bar. Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser to interpret text and commands contained in the web page. 17. List out some name of the browser. Browser name: Internet Explorer Netscape Google Crome Fire Box Maxthon 18. Define the term: cookies A small text file (up to 4KB) created by a Web site that is stored in the user's computer either temporarily for that session only or permanently on the hard disk (persistent cookie). Cookies provide a way for the Web site to recognize you and keep track of your preferences. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 5 of 40

41 ACADEMIC YEAR: REGULATION CBCS Define Protocol Protocol is the special set of rules that end points in a telecommunication connection use when they communicate. Protocols specify interactions between the communicating entities 20. What is TELNET? Telnet is a protocol that allows you to connect to remote computers (called hosts) over a TCP/IP network (such as the Internet). Using telnet client software on your computer, you can make a connection to a telnet server (i.e., the remote host). PART B QUESTIONS (5 Marks) 1. Give an introduction to HTML with an example.(april/may2015) HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on a webpage are called Hypertext. As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language. Basic HTML Document In its simplest form, following is an example of an HTML document: <!DOCTYPE html> <html> <head> <title>this is document title</title> </head> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 6 of 40

ACADEMIC YEAR: 2015 2016 REGULATION CBCS - 2012 <body> <h1>this is a heading</h1> <p>document content goes here.

42 ACADEMIC YEAR: REGULATION CBCS <body> <h1>this is a heading</h1> <p>document content goes here...</p> </body> </html> Either you can use Try it option available at the top right corner of the code box to check the result of this HTML code, or let's save it in an HTML file test.htm using your favorite text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the following output: HTML Tags As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example <html> has its closing tag </html>and <body> tag has its closing tag </body> tag etc. Above example of HTML document uses folloiwng tags: Tag Description <!DOCTYPE...> This tag defines the document type and HTML version. <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 7 of 40

43 ACADEMIC YEAR: REGULATION CBCS <head> This tag represents the document's header which can keep other HTML tags like <title>, <link> etc. <title> The <title> tag is used inside the <head> tag to mention the document title. <body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. <h1> This tag represents the heading. <p> This tag represents a paragraph. To learn HTML, you will need to study various tags and understand how do they behave while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage. World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML How to link documents in html. (Apr/May 2013) Anchor Tag: A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. Note: I recommend to go through a short tutorial on Understanding URL Linking Documents A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag. <a href="document URL"... attributes-list>link Text</a> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 8 of 40

44 ACADEMIC YEAR: REGULATION CBCS Example Let's try following example which links at your page: <!DOCTYPE html> <html> <head> <title>hyperlink Example</title> </head> <body> <p>click following link</p> <a href=" target="_self">link Document</a> </body> </html> This will produce following result, where you can click on the link generated Tutorials Point to reach to the home page of Tutorials Point. Click following link Link Document 3. How to insert image in html? Explain. (Nov/Dec 2013) Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages. Insert Image You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag. <imgsrc="image URL"... attributes-list/> The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag. Example To try following example, let's keep our HTML file test.htm and image file test.png in the same directory: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 9 of 40

ACADEMIC YEAR: 2015 2016 REGULATION CBCS - 2012 <!DOCTYPE html> <html> <head> <title>using Image in Webpage</title> </head> <body> <p>simple Image Insert< </p> <imgsrc="test.

45 ACADEMIC YEAR: REGULATION CBCS <!DOCTYPE html> <html> <head> <title>using Image in Webpage</title> </head> <body> <p>simple Image Insert< </p> <imgsrc="test.png" alt="test Image" /> </body> </html> This will produce following result: Simple Image Insert 4. Write short notes on frames.(nov/dec 2013) To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. Example Following is the examplee to create three horizontal frames: <!DOCTYPE html> <html> <head> <title>html Frames</title> </head> RAAK/CA/THAMIZHVENDHAN.T/ /III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 10 of 40

46 ACADEMIC YEAR: REGULATION CBCS <frameset rows="10%,80%,10%"> <frame name="top" src="/html/top_frame.htm" /> <frame name="main" src="/html/main_frame.htm" /> <frame name="bottom" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> This will produce following result: 5. Explain the way of creating frames in HTML with example.(april/may 2014) To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. Example Following is the example to create three horizontal frames: <!DOCTYPE html> <html> <head> <title>html Frames</title> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 11 of 40

47 ACADEMIC YEAR: REGULATION CBCS </head> <frameset rows="10%,80%,10%"> <frame name="top" src="/html/top_frame.htm" /> <frame name="main" src="/html/main_frame.htm" /> <frame name="bottom" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> This will produce following result: The <frameset> Tag Attributes Following are important attributes of the <frameset> tag: Attribute Description Cols specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 12 of 40

48 ACADEMIC YEAR: REGULATION CBCS Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window. As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. rows border frameborder framespacing This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns. This attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero means no border. This attribute specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border. This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames. Example Let's put above example as follows, here we replaced rows attribute by cols and changed their width. This will create all the three frames vertically: <!DOCTYPE html> <html> <head> <title>html Frames</title> </head> <frameset cols="25%,50%,25%"> <frame name="left" src="/html/top_frame.htm" /> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 13 of 40

ACADEMIC YEAR: 2015 2016 REGULATION CBCS - 2012 <frame name="center" src="/html/main_frame.htm" /> <frame name="right" src="/html/bottom_frame.

49 ACADEMIC YEAR: REGULATION CBCS <frame name="center" src="/html/main_frame.htm" /> <frame name="right" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> This will produce following result: 6. Explain types of list in details. (Nov/Dec 2013, Apr 2012) HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain: <ul> - An unordered list. This will list items using plain bullets. <ol> - An ordered list. This will use different schemes of numbers to list your items. <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary. HTML Unordered Lists An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. Example <!DOCTYPE html> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 14 of 40

50 ACADEMIC YEAR: REGULATION CBCS <html> <head> <title>html Unordered List</title> </head> <body> <ul> <li>beetroot</li> <li>ginger</li> <li>potato</li> <li>radish</li> </ul> </body> </html> This will produce following result: Beetroot Ginger Potato Radish HTML Ordered Lists If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. Example <!DOCTYPE html> <html> <head> <title>html Ordered List</title> </head> <body> <ol> <li>beetroot</li> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 15 of 40

51 ACADEMIC YEAR: REGULATION CBCS <li>ginger</li> <li>potato</li> <li>radish</li> </ol> </body> </html> This will produce following result: 1. Beetroot 2. Ginger 3. Potato 4. Radish HTML Definition Lists HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes use of following three tags. Example <dl> - Defines the start of the list <dt> - A term <dd> - Term definition </dl> - Defines the end of the list <!DOCTYPE html> <html> <head> <title>html Definition List</title> </head> <body> <dl> <dt><b>html</b></dt> <dd>this stands for Hyper Text Markup Language</dd> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 16 of 40

52 ACADEMIC YEAR: REGULATION CBCS <dt><b>http</b></dt> <dd>this stands for Hyper Text Transfer Protocol</dd> </dl> </body> </html> This will produce following result: HTML This stands for Hyper Text Markup Language HTTP This stands for Hyper Text Transfer Protocol 7. How to format a paragraph in html? Explain. (Apr/May 2013) Paragraph in HTML The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example: Example <!DOCTYPE html> <html> <head> <title>paragraph Example</title> </head> <body> <p>here is a first paragraph of text.</p> <p>here is a second paragraph of text.</p> <p>here is a third paragraph of text.</p> </body> </html> This will produce following result: Here is a first paragraph of text. Here is a second paragraph of text. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 17 of 40

53 ACADEMIC YEAR: REGULATION CBCS Here is a third paragraph of text. 8. What are the attributes in the table tag? (Apr/May 2014) Attributes of Table Cellpadding and Cellspacing Attributes There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell. Example <!DOCTYPE html> <html> <head> <title>html Table Cellpadding</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5"> <tr> <th>name</th> <th>salary</th> </tr> <tr> <td>ramesh Raman</td> <td>5000</td> </tr> <tr> <td>shabbir Hussein</td> <td>7000</td> </tr> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 18 of 40

54 ACADEMIC YEAR: REGULATION CBCS </table> </body> </html> This will produce following result: Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 Colspan and Rowspan Attributes You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. Example <!DOCTYPE html> <html> <head> <title>html Table Colspan/Rowspan</title> </head> <body> <table border="1"> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> <tr><td rowspan="2">row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">row 3 Cell 1</td></tr> </table> </body> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 19 of 40

55 ACADEMIC YEAR: REGULATION CBCS </html> This will produce following result: Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. Example <!DOCTYPE html> <html> <head> <title>html Table Background</title> </head> <body> <table border="1" bordercolor="green" bgcolor="yellow"> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> <tr><td rowspan="2">row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">row 3 Cell 1</td></tr> </table> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 20 of 40

56 ACADEMIC YEAR: REGULATION CBCS </body> </html> This will produce following result: Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 9. What is Internet? Explain about is features. Internet Internet is defiend as an Information super Higway, to access information over the web. However, It can be defined in many ways as follows: Internet is a world-wide global system of interconnected computer networks. Internet uses the standard Internet Protocol (TCP/IP). Every computer in internet is identified by a unique IP address. IP Address is a unique set of numbers (such as ) which identifies a computer location. A special computer DNS (Domain Name Server) is used to give name to the IP Address so that user can locate a computer by a name. For example, a DNS server will resolve a name to a particular IP address to uniquely identify the computer on which this website is hosted. Internet is accessible to every user all over the world. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 21 of 40

ACADEMIC YEAR: 2015 2016 REGULATION CBCS - 2012 Evolution The concept of Internet was originated in 1969 and has undergone several technological & Infrastructural changes as discussed below: The

57 ACADEMIC YEAR: REGULATION CBCS Evolution The concept of Internet was originated in 1969 and has undergone several technological & Infrastructural changes as discussed below: The origin of Internet devised from the concept of Advanced Research Project Agency Network (ARPANET). ARPANET was developed by United States Department of Defense. Basic purpose of ARPANET was to provide communication among the various bodies of government. Initially, there were only four nodes, formally called Hosts. In 1972, the ARPANET spread over the globe with 23 nodes located at different countries and thus became known as Internet. By the time, with invention of new technologies such as TCP/IP protocols, DNS, WWW, browsers, scripting languages etc.,internet provided a medium to publish and access information over the web. Advantages RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 22 of 40

58 ACADEMIC YEAR: REGULATION CBCS Internet covers almost every aspect Internet allows us to communicate with the people sitting at remote locations. There are various apps available on the wed that uses Internet as a medium for communication. One can find various social networking sites such as: o o o o o o Facebook Twitter Yahoo Google+ Flickr Orkut One can surf for any kind of information over the internet. Information regarding various topics such as Technology, Health & Science, Social Studies, Geographical Information, Information Technology, Products etc can be surfed with help of a search engine. Apart from communication and source of information, internet also serves a medium for entertainment. Following are the various modes for entertainmentt over internet. o o o o Online Television Online Games Songs Videos RAAK/CA/THAMIZHVENDHAN.T/ /III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 23 of 40

59 ACADEMIC YEAR: REGULATION CBCS o Social Networking Apps Internet allows us to use many services like: o o o o o o o Internet Banking Matrimonial Services Online Shopping Online Ticket Booking Online Bill Payment Data Sharing Internet provides concept of electronic commerce, that allows the business deals to be conducted on electronic system. PART C QUESTIONS (10 Marks) 1. Define in detail about creating table in HTML. (April/May 2015) The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. Example <!DOCTYPE html> <html> <head> <title>html Tables</title> </head> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 24 of 40

60 ACADEMIC YEAR: REGULATION CBCS <body> <table border="1"> <tr> <td>row 1, Column 1</td> <td>row 1, Column 2</td> </tr> <tr> <td>row 2, Column 1</td> <td>row 2, Column 2</td> </tr> </table> </body> </html> This will produce following result: Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0". Table Heading Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Example <!DOCTYPE html> <html> <head> <title>html Table Header</title> </head> <body> <table border="1"> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 25 of 40

61 ACADEMIC YEAR: REGULATION CBCS <tr> <th>name</th> <th>salary</th> </tr> <tr> <td>ramesh Raman</td> <td>5000</td> </tr> <tr> <td>shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> This will produce following result: Name Salary Ramesh Raman 5000 Shabbir Hussein How to add graphics in HTML? Explain. (Apr/May 2014) HTML Multimedia Sometimes you need to add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type. You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single JPG image if browser does not support <embed> tag. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 26 of 40

62 ACADEMIC YEAR: REGULATION CBCS Example Here is a simple example to play an embedded midi file: <!DOCTYPE html> <html> <head> <title>html embed Tag</title> </head> <body> <embed src="/html/yourfile.mid" width="100%" height="60" > <noembed><imgsrc="yourimage.gif" alt="alternative Media" ></noembed> </embed> </body> </html> This will produce following result: You can put any media file in src attribute. You can try it yourself by giving various types of files. The <embed> Tag Attributes Following is the list of important attributes which can be used with <embed> tag. Attribute Description align Determines how to align the object. It can be set to either center, left or right. autostart This boolean attribute indicates if the media should start automatically. You can set it either true or false. loop Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false) playcount Specifies the number of times to play the sound. This is alternate RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 27 of 40

63 ACADEMIC YEAR: REGULATION CBCS option for loop if you are usiong IE. hidden Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes. width Width of the object in pixels height Height of the object in pixels name A name used to reference the object. src URL of the object to be embedded. volume Controls volume of the sound. Can be from 0 (off) to 100 (full volume). Supported Video Types You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside embed tag..swf files - are the file types created by Macromedia's Flash program..wmv files - are Microsoft's Window's Media Video file types..mov files - are Apple's Quick Time Movie format..mpeg files - are movie files created by the Moving Pictures Expert Group. <!DOCTYPE html> <html> <head> <title>html embed Tag</title> </head> <body> <embed src="/html/yourfile.swf" width="200" height="200" > <noembed><imgsrc="yourimage.gif" alt="alternative Media" ></noembed> </embed> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 28 of 40

64 ACADEMIC YEAR: REGULATION CBCS </body> </html> This will produce following result: Background Audio You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage. This tag is supported by Internet Explorer only and most of the other browsers ignore this tag. It downloads and plays an audio file when the host document is first downloaded by the user and displayed. The background sound file also will replay whenever the user refreshes the browser. This tag is having only two attributes loop and src. Both these attributes have same meaning as explained above. Here is a simple examplee to play a small midi file: <!DOCTYPE html> <html> <head> <title>html embed Tag< </title> </head> <body> <bgsoundsrc="/html/yourfile.mid"> <noembed><imgsrc="yourimage.gif" ></noembed> </bgsound> </body> </html> This will produce blank hidden. screen. This tag does not display any component and remains RAAK/CA/THAMIZHVENDHAN.T/ /III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 29 of 40

65 ACADEMIC YEAR: REGULATION CBCS Internet Explorer can also handle only three different sound format files: wav, the native format for PCs; au, the native format for most Unix workstations; and MIDI, a universal music-encoding scheme. 3. Design a html page for building a resume. (Apr/May 2013) Source Code: <html> <head> <META http-equiv="content-type" content="text/html; charset=utf-8"> <title>resume (JBoss jbpm3-4jsf Tag library documentation) </title> <meta name="keywords" content="$title"> <link rel="stylesheet" type="text/css" href="../stylesheet.css" title="style"> </head> <script> functionasd() { parent.document.title="resume (JBoss jbpm3-4jsf Tag library documentation)"; </script> <body bgcolor="white" onload="asd();"> <a name="navbar_top"></a> <table border="0" width="100%" cellpadding="1" cellspacing="0"> <tr> <td COLSPAN="3" BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><a NAME="navbar_top_firstrow"></a> <table BORDER="0" CELLPADDING="0" CELLSPACING="3"> <tr ALIGN="center" VALIGN="top"> <td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"> <a href="../overviewsummary.html"><font CLASS="NavBarFont1"><b>Overview</b></font></a> </td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"> <a href="tldsummary.html"><font CLASS="NavBarFont1"><b>Library</b></font></a> </td><td BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev"> <font CLASS="NavBarFont1Rev"> Tag </font> </td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"> <a HREF="../helpdoc.html"><font CLASS="NavBarFont1"><b>Help</b></font></a> </td> </tr> </table> </td><td ALIGN="right" VALIGN="top" ROWSPAN="3"><em></em></td> </tr> <tr> <td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2"></font></td><td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2"> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 30 of 40

66 ACADEMIC YEAR: REGULATION CBCS <a HREF="../index.html" TARGET="_top"><b>FRAMES</b></a> <a href="resume.html" target="_top"><b>no FRAMES</b></a> <script></script> <noscript> <a HREF="../alltags-noframe.html" TARGET=""><b>All Tags</b></a> </noscript> </font></td> </tr> </table> <hr> <h2> <font size="-1">jbpm</font> <br> Tag resume</h2> <hr>resume a running task, token, or process instance.<br> <p></p> <hr> <table border="1" cellpadding="3" cellspacing="0" width="100%"> <trbgcolor="#ccccff" class="tableheadingcolor"> <td colspan="2"><font size="+2"><b>tag Information</b></font></td> </tr> <tr> <td>tag Class</td><td><i>None</i></td> </tr> <tr> <td>tagextrainfo Class</td><td><i>None</i></td> </tr> <tr> <td>body Content</td><td>JSP</td> </tr> <tr> <td>display Name</td><td><i>None</i></td> </tr> </table> <br> <p></p> <table border="1" cellpadding="3" cellspacing="0" width="100%"> <trbgcolor="#ccccff" class="tableheadingcolor"> <td colspan="5"><font size="+2"><b>attributes</b></font></td> </tr> <tr> <td><b>name</b></td><td><b>required</b></td><td><b>requesttime</b></td><td><b>type</b></td><td><b>description</b></td> </tr> <trvalign="top"> <td>name</td><td>false</td><td>false</td><td><code>javax.el.valueexpression</cod e> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 31 of 40

67 ACADEMIC YEAR: REGULATION CBCS <br>(<i>must evaluate to </i><code>java.lang.string</code>) </td><td>a different name to use for this action. Action names are used by some navigation handlers.</td> </tr> <trvalign="top"> <td>navigate</td><td>false</td><td>false</td><td><code>javax.el.valueexpression</c ode> <br>(<i>must evaluate to </i><code>boolean</code>) </td><td>a boolean expression that can be used to control whether navigation will be attempted after this action completes.</td> </tr> <trvalign="top"> <td>unless</td><td>false</td><td>false</td><td><code>javax.el.valueexpression</cod e> <br>(<i>must evaluate to </i><code>boolean</code>) </td><td>a boolean expression that, if true, will prevent this action from being run.</td> </tr> <trvalign="top"> <td>value</td><td>true</td><td>false</td><td><code>javax.el.valueexpression</code > <br>(<i>must evaluate to </i><code>java.lang.object</code>) </td><td>the item to resume.</td> </tr> </table> <br> <p></p> <table border="1" cellpadding="3" cellspacing="0" width="100%"> <trbgcolor="#ccccff" class="tableheadingcolor"> <td colspan="5"><font size="+2"><b>variables</b></font></td> </tr> <td colspan="2"><i>no Variables Defined.</i></td> </table> <br> <p></p> <a name="navbar_bottom"></a> <table border="0" width="100%" cellpadding="1" cellspacing="0"> <tr> <td COLSPAN="3" BGCOLOR="#EEEEFF" CLASS="NavBarCell1"><a NAME="navbar_bottom_firstrow"></a> <table BORDER="0" CELLPADDING="0" CELLSPACING="3"> <tr ALIGN="center" VALIGN="top"> <td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"> <a href="../overviewsummary.html"><font CLASS="NavBarFont1"><b>Overview</b></font></a> </td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"> <a href="tldsummary.html"><font CLASS="NavBarFont1"><b>Library</b></font></a> </td><td RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 32 of 40

68 ACADEMIC YEAR: REGULATION CBCS BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev"> <font CLASS="NavBarFont1Rev"> Tag </font> </td><td BGCOLOR="#EEEEFF" CLASS="NavBarCell1"> <a HREF="../helpdoc.html"><font CLASS="NavBarFont1"><b>Help</b></font></a> </td> </tr> </table> </td><td ALIGN="right" VALIGN="top" ROWSPAN="3"><em></em></td> </tr> <tr> <td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2"></font></td><td BGCOLOR="white" CLASS="NavBarCell2"><font SIZE="-2"> <a HREF="../index.html" TARGET="_top"><b>FRAMES</b></a> <a href="resume.html" target="_top"><b>no FRAMES</b></a> <script></script> <noscript> <a HREF="../alltags-noframe.html" TARGET=""><b>All Tags</b></a> </noscript> </font></td> </tr> </table> <hr> <small><i> Output Generated by <a href=" target="_blank">tag Library Documentation Generator</a>. Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright Sun Microsystems, Inc Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved. </i></small> </body> </html> 4. Explain about any ten html tags. (Apr/May 2014) Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 33 of 40

69 ACADEMIC YEAR: REGULATION CBCS Example <!DOCTYPE html> <html> <head> <title>heading Example</title> </head> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> </body> </html> This will produce following result: Paragraph Tag The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example: Example RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 34 of 40

70 ACADEMIC YEAR: REGULATION CBCS <!DOCTYPE html> <html> <head> <title>paragraph Example</title> </head> <body> <p>here is a first paragraph of text.</p> <p>here is a second paragraph of text.</p> <p>here is a third paragraph of text.</p> </body> </html> This will produce following result: Here is a first paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text. Line Break Tag Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML Example <!DOCTYPE html> <html> <head> <title>line Break Example</title> </head> <body> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 35 of 40

71 ACADEMIC YEAR: REGULATION CBCS <p>hello<br /> You delivered your assignment ontime.<br /> Thanks<br /> Mahnaz</p> </body> </html> This will produce following result: Hello You delivered your assignment ontime. Thanks Mahnaz Centering Content You can use <center> tag to put any content in the center of the page or any table cell. Example <!DOCTYPE html> <html> <head> <title>centring Content Example</title> </head> <body> <p>this text is not in the center.</p> <center> <p>this text is in the center.</p> </center> </body> </html> This will produce following result: This text is not in the center. This text is in the center. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 36 of 40

72 ACADEMIC YEAR: REGULATION CBCS Horizontal Lines Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. For example you may want to give a line between two paragraphs as in the given example below: Example <!DOCTYPE html> <html> <head> <title>horizontal Line Example</title> </head> <body> <p>this is paragraph one and should be on top</p> <hr /> <p>this is paragraph two and should be at bottom</p> </body> </html> This will produce following result: This is paragraph one and should be on top This is paragraph two and should be at bottom Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontak line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML Preserve Formatting Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 37 of 40

73 ACADEMIC YEAR: REGULATION CBCS Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document. Example <!DOCTYPE html> <html> <head> <title>preserve Formatting Example</title> </head> <body> <pre> functiontestfunction( strtext ){ alert (strtext) </pre> </body> </html> This will produce following result: functiontestfunction( strtext ){ alert (strtext) Try using same code without keeping it inside <pre>...</pre> tags 5. Explain about html comments. HTML Comments Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability. HTML comments are placed in between <! > tags. So any content placed with-in <! > tags will be treated as comment and will be completely ignored by the browser. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 38 of 40

74 ACADEMIC YEAR: REGULATION CBCS Example <!DOCTYPE html> <html> <head> <title>this is document title</title> </head> <body> <p>document content goes here...</p> </body> </html> This will produce following result without displaying the content given as a part of comments: Document content goes here... Valid vs Invalid Comments Comments do not nest which means a comment can not be put inside another comment. Second the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-ofcomment string. Example Here given comment is a valid comment and will be wiped off by the browser. <!DOCTYPE html> <html> <head> <title>valid Comment Example</title> </head> <body>  <p>document content goes here...</p> </body> </html> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 39 of 40

75 ACADEMIC YEAR: REGULATION CBCS RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/SCP53/WebTechnology/UNIT-1Answer Unit 1 Question Bank Page 40 of 40

76 ACADEMIC YEAR: REGULATION CBCS (UCP62) (Web Technology) Unit-3 (Introduction to HTML) Type: 100% Theory Question Bank with Answer PART A ANSWER (2 Marks) 1. What is meant by object? (Apr/May 2015) An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. 2. Define-Form object. (Apr/May 2015) A form object is used to take user data as input for processing. Can be created by using html form element. Can be accessed by - i) document.formname, where formname is the name of the form. ii) document.form.formname, where formname is the name of the form. iii) document.forms[] array, where document.forms[0] refers to the first form of the document. 3. Name any two scripting language. (Apr/May 2013) i) Java Script ii) VB Script 4. Explain Conform. A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel. If the user clicks on OK button the window method confirm() will return true. If the user clicks on the Cancel button confirm() returns false. 5. What is event? Give example. (Apr/May 2013, Apr 2012) JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 1 of 35

77 ACADEMIC YEAR: REGULATION CBCS <input type="button" onclick="sayhello()" value="say Hello" /> 6. Give the syntax for creating variable. (Nov/Dec 2013) Var variable-name1, variable-name2, variable-namen; Variable Example Var a,b,c; 7. Write the syntax of conditional operator. (Apr/May 2013) Syntax of conditional operator: (Expression)? Statements: Statement; 8. What is function of parseint()? (Apr/May 2014) Function of parseint(): This function is used to convert the string into integer. Var str= 100 ; Var a=parseint(str); 9. Give the syntax of confirm dialog box. (Nov/Dec 2013) <script type="text/javascript">  </script> 10. State the use of java script. (Apr/May 2014) Less server interaction Immediate feedback to the visitors Increased interactivity Richer interfaces RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 2 of 35

78 ACADEMIC YEAR: REGULATION CBCS What is constant? (Apr/May 2014) JavaScript allows you to work with three primitive data types: Numbers Eg. 123, etc. var a=10; 12. What is java script? (Apr/May 2013, Apr/May 2014) JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement being generated by Java.to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name LiveScript. JavaScript is a lightweight, interpreted programming language with objectoriented capabilities that allows you to build interactivity into otherwise static HTML pages. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers 13. Define Array. (Apr/May 2013, Nov 2012) The Array object let's you store multiple values in a single variable. Syntax: Creating an Array object: var fruits = new Array( "apple", "orange", "mango" ); The Array parameter is a list of strings or integers. When you specify a single numeric parameter with the Array constructor, you specify the initial length of the array. The maximum length allowed for an array is 4,294,967, How to add comments in java script. (Apr 2012) JavaScript supports both C-style and C++-style comments, Thus: Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript. Any text between the characters /* and */ is treated as a comment. This may span multiple lines. JavaScript also recognizes the HTML comment opening sequence  is not recognized by JavaScript so it should be written as //-->. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 3 of 35

79 ACADEMIC YEAR: REGULATION CBCS Expand DOM. (Apr/May 2014) The way that document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document. 16. What do you meant by function? (Apr/May 2014) A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing same code again and again. This will help programmers to write modular code. You can divide your big programs in a number of small and manageable functions. 17. How to declare variable in java script? (Apr/May 2014) <script language="javascript" type="text/javascript">  </script> 18. Why to have loops? (Nov 2012) While Loop: Which is writing a program, there may be a situation when you need to perform some action over and over again. In such situation you would need to write loop statements to reduce the number of lines. FOR Loop: is the most compact form of looping and includes the following three important parts and it is used to repeat the line until the condition filed. 19. Write the syntax of cookies. document.cookie = "key1=value1;key2=value2;expires=date"; 20. What is alert? An alert dialog box is mostly used to give a warning message to the users. Like if one input field requires to enter some text but user does not enter that field then as a part of validation RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 4 of 35

80 ACADEMIC YEAR: REGULATION CBCS What is the significance of variant data type? (Apr 2012) JavaScript allows you to work with three primitive data types: Numbers eg. 123, etc. Strings of text e.g. "This text string" etc. Boolean e.g. true or false. 22. Define prompt. The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus it enables you to interact with the user. The user needs to fill in the field and then click OK. var retval = prompt("enter your name : ", "your name here"); alert("you have entered : " + retval ); PART B QUESTIONS (5 Marks) 23. Give short notes about user defined objects used in HTML. (Apr/May 2015) All user-defined objects and built-in objects are descendants of an object called Object. The new Operator The new operator is used to create an instance of an object. To create an object, the new operator is followed by the constructor method. In the following example, the constructor methods are Object(), Array(), and Date(). These constructors are built-in JavaScript functions. var employee = new Object(); var books = new Array("C++", "Perl", "Java"); var day = new Date("August 15, 1947"); The Object() Constructor A constructor is a function that creates and initializes an object. JavaScript provides a special constructor function called Object()to build the object. The return value of the Object() constructor is assigned to a variable. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 5 of 35

81 ACADEMIC YEAR: REGULATION CBCS The variable contains a reference to the new object. The properties assigned to the object are not variables and are not defined with the var keyword. Example 1 Try the following example; it demonstrates how to create an Object. <html> <head> <title>user-defined objects</title> <script type="text/javascript"> var book = new Object(); // Create the object book.subject = "Perl"; // Assign properties to the object book.author = "Mohtashim"; </script> </head> <body> <script type="text/javascript"> document.write("book name is : " + book.subject + "<br>"); document.write("book author is : " + book.author + "<br>"); </script> </body> </html> Output Book name is : Perl Book author is : Mohtashim 24. Compare and contrast between Window object and Document object. (Apr/May 2015) Web browser is made up of hierarchy of objects. At the root level we have a window object. Window It is the root level element in any web page. All the global variables are defined on the window object. For example, alert(), confirm() are methods defined on the window object. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 6 of 35

82 ACADEMIC YEAR: REGULATION CBCS Writing alert() is similar to window.alert() Also, properties like document, location are properties of the window object. window API Document It is the direct child of the window object. It is aka Document Object Model (DOM). You can access it via window.document or document. document object has many useful methods defined on it. For example, document.getelementbyid(), document.getelementbytagname(), document.createelement(),document.queryselector() and many more document API 25. Discuss on the looping statements in java script. (Apr/May 2014) Looping Statements: The for Loop The for loop is the most compact form of looping and includes the following three important parts: The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins. The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out. The iteration statement where you can increase or decrease your counter. You can put all the three parts in a single line separated by a semicolon. Syntax: for (initialization; test condition; iteration statement){ Statement(s) to be executed if test condition is true RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 7 of 35

83 ACADEMIC YEAR: REGULATION CBCS Example: <script type="text/javascript">  </script> The while Loop The most basic loop in JavaScript is the while loop which would be discussed in this tutorial. Syntax: while (expression){ Statement(s) to be executed if expression is true The purpose of a while loop is to execute a statement or code block repeatedly as long asexpression is true. Once expression becomes false, the loop will be exited. Example: <script type="text/javascript"> <!-- var count = 0; document.write("starting Loop" + "<br />"); while (count < 10){ document.write("current Count : " + count + "<br />"); count++; RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 8 of 35

84 ACADEMIC YEAR: REGULATION CBCS document.write("loop stopped!"); //--> </script> 26. Explain alert dialog box with syntax and example. (Nov/Dec 2013) An alert dialog box is mostly used to give a warning message to the users. Like if one input field requires to enter some text but user does not enter that field then as a part of validation you can use alert box to give warning message as follows: <head> <script type="text/javascript">  </script> </head> Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select and proceed. 27. Explain Math object. (Nov/Dec 2013) Math Object: The math object provides you properties and methods for mathematical constants and functions. Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static and can be called by using Math as an object without creating it. Thus, you refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument. Syntax: Here is the simple syntax to call properties and methods of Math. var pi_val = Math.PI; RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 9 of 35

85 ACADEMIC YEAR: REGULATION CBCS var sine_val = Math.sin(30); Math Properties: Property Description E Euler's constant and the base of natural logarithms, approximately LN2 Natural logarithm of 2, approximately LN10 Natural logarithm of 10, approximately LOG2E Base 2 logarithm of E, approximately LOG10E Base 10 logarithm of E, approximately PI Ratio of the circumference of a circle to its diameter, approximately SQRT1_2 Square root of 1/2; equivalently, 1 over the square root of 2, approximately SQRT2 Square root of 2, approximately Math Methods Method abs() acos() asin() atan() atan2() ceil() cos() exp() floor() Description Returns the absolute value of a number. Returns the arccosine (in radians) of a number. Returns the arcsine (in radians) of a number. Returns the arctangent (in radians) of a number. Returns the arctangent of the quotient of its arguments. Returns the smallest integer greater than or equal to a number. Returns the cosine of a number. Returns E N, where N is the argument, and E is Euler's constant, the base of the natural logarithm. Returns the largest integer less than or equal to a number. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 10 of 35

86 ACADEMIC YEAR: REGULATION CBCS log() max() min() pow() Returns the natural logarithm (base E) of a number. Returns the largest of zero or more numbers. Returns the smallest of zero or more numbers. Returns base to the exponent power, that is, base exponent. random() Returns a pseudo-random number between 0 and 1. round() sin() sqrt() tan() tosource() Returns the value of a number rounded to the nearest integer. Returns the sine of a number. Returns the square root of a number. Returns the tangent of a number. Returns the string "Math". 28. Explain conditional checking with syntax and example. (Nov/Dec 2013) Conditional checking: While writing a program, there may be a situation when you need to adopt one path out of the given two paths. So you need to make use of conditional statements that allow your program to make correct decisions and perform right actions. JavaScript supports conditional statements which are used to perform different actions based on different conditions. Here we will explain if..else statement. JavaScript supports following forms of if..else statement: if statement if...else statement if...else if... statement. if statement: The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 11 of 35

87 ACADEMIC YEAR: REGULATION CBCS Syntax: if (expression){ Statement(s) to be executed if expression is true Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) are executed. If expression is false then no statement would be not executed. Most of the times you will use comparison operators while making decisions. Example: <script type="text/javascript">  </script> This will produce following result: Qualifies for driving if...else statement: The if...else statement is the next form of control statement that allows JavaScript to execute statements in more controlled way. Syntax: if (expression){ Statement(s) to be executed if expression is true else{ Statement(s) to be executed if expression is false RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 12 of 35

88 ACADEMIC YEAR: REGULATION CBCS Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) in theif block, are executed. If expression is false then given statement(s) in the else block, are executed. Example: <script type="text/javascript">  </script> This will produce following result: Does not qualify for driving if...else if... statement: The if...else if... statement is the one level advance form of control statement that allows JavaScript to make correct decision out of several conditions. Syntax: if (expression 1){ Statement(s) to be executed if expression 1 is true else if (expression 2){ Statement(s) to be executed if expression 2 is true else if (expression 3){ Statement(s) to be executed if expression 3 is true else{ Statement(s) to be executed if no expression is true RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 13 of 35

89 ACADEMIC YEAR: REGULATION CBCS There is nothing special about this code. It is just a series of if statements, where each if is part of the else clause of the previous statement. Statement(s) are executed based on the true condition, if non of the condition is true then else block is executed. Example: <script type="text/javascript">  </script> This will produce following result: Maths Book 29. Describe the procedure involved event handling in java script. (Apr/May 2014) Event handling in java script: JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is an event. When the user clicks a button, that click, too, is an event. Another example of events are like pressing any key, closing window, resizing window etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable to occur. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element have a certain set of events which can trigger JavaScript Code. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 14 of 35

90 ACADEMIC YEAR: REGULATION CBCS onclick Event Type: This is the most frequently used event type which occurs when a user clicks mouse left button. You can put your validation, warning etc against this event type. Example: <html> <head> <script type="text/javascript">  </script> </head> <body> <input type="button" onclick="sayhello()" value="say Hello" /> </body> </html> 30. Discuss window object and Browser object. (Apr/May 2014) Window object and Browser object: It is important to understand the differences between different browsers in order to handle each in the way it is expected. So it is important to know which browser your Web page is running in. To get information about the browser your Web page is currently running in, use the built-innavigator object. Navigator Properties: Property Description appcodename This property is a string that contains the code name of the browser, Netscapefor Netscape and Microsoft Internet Explorer for Internet Explorer. appversion This property is a string that contains the version of the browser as well as other useful information such as its language and compatibility. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 15 of 35

91 ACADEMIC YEAR: REGULATION CBCS language mimtypes[] platform[] plugins[] useragent[] This property contains the two-letter abbreviation for the language that is used by the browser. Netscape only. This property is an array that contains all MIME types supported by the client. Netscape only. This property is a string that contains the platform for which the browser was compiled."win32" for 32-bit Windows operating systems This property is an array containing all the plug-ins that have been installed on the client. Netscape only. This property is a string that contains the code name and version of the browser. This value is sent to the originating server to identify the client Navigator Methods: Method javaenabled() plugings.refresh Description This method determines if JavaScript is enabled in the client. If JavaScript is enabled, this method returns true; otherwise, it returns false. This method makes newly installed plug-ins available and populates the plugins array with all new plug-in names. Netscape only. preference(name,value) This method allows a signed script to get and set some Netscape preferences. If the second parameter is omitted, this method will return the value of the specified preference; otherwise, it sets the value. Netscape only. taintenabled() This method returns true if data tainting is enabled and false otherwise. Browser Detection: There is a simple JavaScript which can be used to find out the name of a browser and then accordingly an HTML page can be served to the user. <html> <head> <title>browser Detection Example</title> </head> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 16 of 35

92 ACADEMIC YEAR: REGULATION CBCS <body> <script type="text/javascript">  </script> </body> </html> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 17 of 35

93 ACADEMIC YEAR: REGULATION CBCS Explain the methods of creating and using functions in java script. (Apr/May 2014) Function in java Script: Java Script Function: A function is a group of reusable code which can be called anywhere in your programme. This eliminates the need of writing same code again and again. This will help programmers to write modular code. You can divide your big programme in a number of small and manageable functions. Like any other advance programming language, JavaScript also supports all the features necessary to write modular code using functions. You must have seen functions like alert() and write(). We are using these functions again and again but they have been written in core JavaScript only once. JavaScript allows us to write our own function. Function Definition: Before we use a function we need to define that function. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces. The basic syntax is shown here: <script type="text/javascript">  </script> Example: A simple function that takes no parameters called sayhello is defined here: <script type="text/javascript"> <!-- function sayhello() RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 18 of 35

94 ACADEMIC YEAR: REGULATION CBCS { alert("hello there"); //--> </script> 32. State advantages of java script. (Apr/May 2014) Advantages of Java Script: The merits of using JavaScript are: Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server. Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something. Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. Richer interfaces: You can use JavaScript to include such items as drag-anddrop components and sliders to give a Rich Interface to your site visitors. 33. Explain any five methods of string object with example. (Apr/May 2013) Methods of String Object: Method charat() charcodeat() concat() indexof() lastindexof() localecompare() Description Returns the character at the specified index. Returns a number indicating the Unicode value of the character at the given index. Combines the text of two strings and returns a new string. Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found. Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found. Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 19 of 35

95 ACADEMIC YEAR: REGULATION CBCS match() replace() search() slice() split() substr() substring() Used to match a regular expression against a string. Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring. Executes the search for a match between a regular expression and a specified string. Extracts a section of a string and returns a new string. Splits a String object into an array of strings by separating the string into substrings. Returns the characters in a string beginning at the specified location through the specified number of characters. Returns the characters in a string between two indexes into the string. tolocalelowercase() The characters within a string are converted to lower case while respecting the current locale. 34. Write a java script function to calculate n!. (Apr/May 2014) Factorial Program: <html> <head> <script> function calculate() { var i,n,sum=1; n=document.getelementbyid("text1").value; for(i=1;i<=n;i++) { sum*=i; document.getelementbyid("text2").value=sum; </script> </head> <body> <h1>factorial Program</h1> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 20 of 35

96 ACADEMIC YEAR: REGULATION CBCS Enter the Number<br> <input type="text" id="text1"><br> Facrorial<br> <input type="text" id="text2"><br> <br><input type="button" value="calculate" onclick="calculate()"><br> </body> </html> PART C QUESTIONS (10 Marks) 35. Describe the syntax of a Java script program using an example.(apr/may 2014) (Apr/May 2015) Syntax of a Java script: A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web page. You can place the <script> tag containing your JavaScript anywhere within you web page but it is preferred way to keep it within the <head> tags. The <script> tag alert the browser program to begin interpreting all the text between these tags as a script. So simple syntax of your JavaScript will be as follows <script...> JavaScript code </script> The script tag takes two important attributes: language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute. type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". So your JavaScript segment will look like: <script language="javascript" type="text/javascript"> JavaScript code RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 21 of 35

97 ACADEMIC YEAR: REGULATION CBCS </script> Your First JavaScript Script: Let us write our class example to print out "Hello World". <html> <body> <script language="javascript" type="text/javascript">  </script></body></html> We added an optional HTML comment that surrounds our Javascript code. This is to save our code from a browser that does not support Javascript. The comment ends with a "//-->". Here "//" signifies a comment in Javascript, so we add that to prevent a browser from reading the end of the HTML comment in as a piece of Javascript code. Next, we call a function document.write which writes a string into our HTML document. This function can be used to write text, HTML, or both. So above code will display following result: Hello World! 36. Explain the overview of the Java script document object model. (Apr/May 2015) Very web page resides inside a browser window which can be considered as an object. A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content. The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 22 of 35

98 ACADEMIC YEAR: REGULATION CBCS Window object Top of the hierarchy. It is the outmost element of the object hierarchy. Document object Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page. Form object Everything enclosed in the <form>...</form> tags sets the form object. Form control elements The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes. Here is a simple hierarchy of a few important objects There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content. The Legacy DOM This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images. The W3C DOM This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers. The IE4 DOM This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features. DOM compatibility If you want to write a script with the flexibility to use either W3C DOM or IE 4 DOM depending on their availability, then you can use a capability-testing approach that first checks for the existence of a method or property to determine whether the browser has the capability you desire. For example if (document.getelementbyid) { // If the W3C method exists, use it else if (document.all) { // If the all[] array exists, use it RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 23 of 35

99 ACADEMIC YEAR: REGULATION CBCS else { // Otherwise use the legacy DOM 37. List out and explain the operators in Java script. (Nov/Dec 2013) Java Script Operators: Simple answer can be given using expression is equal to 9. Here 4 and 5 are called operands and + is called operator. JavaScript language supports following type of operators. Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators Lets have a look on all operators one by one. The Arithmetic Operators: Operator Description Example + Adds two operands A + B will give 30 - Subtracts second operand from the first A - B will give -10 * Multiply both operands A * B will give 200 / Divide numerator by denumerator B / A will give 2 % Modulus Operator and remainder of after an integer division ++ Increment operator, increases integer value by one -- Decrement operator, decreases integer value by one B % A will give 0 A++ will give 11 A-- will give 9 The Comparison Operators: RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 24 of 35

100 ACADEMIC YEAR: REGULATION CBCS Operator Description Example == Checks if the value of two operands are equal or not, if yes then condition becomes true.!= Checks if the value of two operands are equal or not, if values are not equal then condition becomes true. > Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true. < Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true. >= Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true. <= Checks if the value of left operand is less than or equal to the value of right operand, if yes then condition becomes true. (A == B) is not true. (A!= B) is true. (A > B) is not true. (A < B) is true. (A >= B) is not true. (A <= B) is true. The Logical Operators: Operator Description Example && Called Logical AND operator. If both the operands are non zero then then condition becomes true. (A && B) is true. Called Logical OR Operator. If any of the two operands are non zero then then condition becomes true.! Called Logical NOT Operator. Use to reverses the logical state of its operand. If a condition is true then Logical NOT operator will make false. (A B) is true.!(a && B) is false. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 25 of 35

101 ACADEMIC YEAR: REGULATION CBCS To understand these operators in better way you can Try it yourself. The Bitwise Operators: Operator Description Example & Called Bitwise AND operator. It performs a Boolean AND operation on each bit of its integer arguments. (A & B) is 2. Called Bitwise OR Operator. It performs a Boolean OR operation on each bit of its integer arguments. (A B) is 3. ^ Called Bitwise XOR Operator. It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both. (A ^ B) is 1. ~ Called Bitwise NOT Operator. It is a is a unary operator and operates by reversing all bits in the operand. << Called Bitwise Shift Left Operator. It moves all bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying by 2, shifting two positions is equivalent to multiplying by 4, etc. >> Called Bitwise Shift Right with Sign Operator. It moves all bits in its first operand to the right by the number of places specified in the second operand. >>> Called Bitwise Shift Right with Zero Operator. This operator is just like the >> operator, except that the bits shifted in on the left are always zero, (~B) is -4. (A << 1) is 4. (A >> 1) is 1. (A >>> 1) is 1. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 26 of 35

102 ACADEMIC YEAR: REGULATION CBCS The Assignment Operators: Operator Description Example = Simple assignment operator, Assigns values from right side operands to left side operand += Add AND assignment operator, It adds right operand to the left operand and assign the result to left operand -= Subtract AND assignment operator, It subtracts right operand from the left operand and assign the result to left operand *= Multiply AND assignment operator, It multiplies right operand with the left operand and assign the result to left operand /= Divide AND assignment operator, It divides left operand with the right operand and assign the result to left operand %= Modulus AND assignment operator, It takes modulus using two operands and assign the result to left operand C = A + B will assigne value of A + B into C C += A is equivalent to C = C + A C -= A is equivalent to C = C - A C *= A is equivalent to C = C * A C /= A is equivalent to C = C / A C %= A is equivalent to C = C % A Miscellaneous Operator The Conditional Operator (? :) Operator Description Example? : Conditional Expression If Condition is true? Then value X : Otherwise value Y The typeof Operator Type String Returned by typeof Number String "number" "string" RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 27 of 35

103 ACADEMIC YEAR: REGULATION CBCS Boolean Object Function Undefined Null "boolean" "object" "function" "undefined" "object" 38. What is function? Write a function to implement arithmetic operations in java script. (Apr/May 2013) Arithmetic Operation: <html> <head> <script> function calculate() { var a,b,c; a=document.getelementbyid("text1").value; b=document.getelementbyid("text2").value; c=parseint(a)+parseint(b); document.getelementbyid("text3").value=c; c=a-b; document.getelementbyid("text4").value=c; c=a*b; document.getelementbyid("text5").value=c; c=a/b; document.getelementbyid("text6").value=c; </script> </head> <body> <h1>arithmatic Operation</h1> Enter the First value<br> <input type="text" id="text1"><br> Enter the Second value<br> <input type="text" id="text2"><br> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 28 of 35

104 ACADEMIC YEAR: REGULATION CBCS Addition<br> <input type="text" id="text3"><br> Subtraction<br> <input type="text" id="text4"><br> Multiplication<br> <input type="text" id="text5"><br> Division<br> <input type="text" id="text6"><br> <br><input type="button" value="calculate" onclick="calculate()"><br> </body> </html> 39. Explain any five events in java script. (Apr/May 2014) Event in Java script: JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is an event. When the user clicks a button, that click, too, is an event. Another example of events is like pressing any key, closing window, resizing window etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable to occur. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element have a certain set of events which can trigger JavaScript Code. onclick Event Type: This is the most frequently used event type which occurs when a user clicks mouse left button. You can put your validation, warning etc against this event type. Example: <html> <head> <script type="text/javascript"> <!-- RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 29 of 35

105 ACADEMIC YEAR: REGULATION CBCS function sayhello() { alert("hello World") //--> </script> </head> <body> <input type="button" onclick="sayhello()" value="say Hello" /> </body> </html> This will produce following result and when you click Hello button then onclick event will occur which will trigger sayhello() function. onsubmit event type: Another most important event type is onsubmit. This event occurs when you try to submit a form. So you can put your form validation against this event type. Here is simple example showing its usage. Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true the form will be submitted otherwise it will not submit the data. Example: <html> <head> <script type="text/javascript">  </script> </head> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 30 of 35

106 ACADEMIC YEAR: REGULATION CBCS <body> <form method="post" action="t.cgi" onsubmit="return validate()">... <input type="submit" value="submit" /> </form> </body> </html> onmouseover and onmouseout: These two event types will help you to create nice effects with images or even with text as well. The onmouseover event occurs when you bring your mouse over any element and theonmouseout occurs when you take your mouse out from that element. Example: Following example shows how a division reacts when we bring our mouse in that division: <html> <head> <script type="text/javascript">  </script> </head> <body> <div onmouseover="over()" onmouseout="out()"> <h2> This is inside the division </h2> </div> </body> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 31 of 35

107 ACADEMIC YEAR: REGULATION CBCS </html> 40. Explain user defined function in Java script. (APR/MAY 2014) Java Script Function: A function is a group of reusable code which can be called anywhere in your programme. This eliminates the need of writing same code again and again. This will help programmers to write modular code. You can divide your big programme in a number of small and manageable functions. Like any other advance programming language, JavaScript also supports all the features necessary to write modular code using functions. You must have seen functions like alert() and write(). We are using these functions again and again but they have been written in core JavaScript only once. JavaScript allows us to write our own functions as well. Function Definition: Before we use a function we need to define that function. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces. The basic syntax is shown here: <script type="text/javascript">  </script> Example: A simple function that takes no parameters called sayhello is defined here: <script type="text/javascript"> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 32 of 35

108 ACADEMIC YEAR: REGULATION CBCS  </script> Calling a Function: To invoke a function somewhere later in the script, you would simple need to write the name of that function as follows: <script type="text/javascript">  </script> Function Parameters: There is a facility to pass different parameters while calling a function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters. A function can take multiple parameters separated by comma. Example: Let us do a bit modification in our sayhello function. This time it will take two parameters: <script type="text/javascript"> <!-- function sayhello(name, age) { RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 33 of 35

109 ACADEMIC YEAR: REGULATION CBCS alert( name + " is " + age + " years old."); //--> </script> Now we can call this function as follows: <script type="text/javascript">  </script> The return Statement: A JavaScript function can have an optional return statement. This is required if you want to return a value from a function. This statement should be the last statement in a function. For example you can pass two numbers in a function and then you can expect from the function to return their multiplication in your calling program. Example: This function takes two parameters and concatenates them and return resultant in the calling program: <script type="text/javascript">  </script> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 34 of 35

110 ACADEMIC YEAR: REGULATION CBCS Now we can call this function as follows: <script type="text/javascript">  </script> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-3 AB Unit 3 Answer Page 35 of 35

111 Academic Year: Regulation CBCS UCP62 Web Technology Unit - 4 Type: 100% Theory Question & Answer Syllabus: [Regulation: 2012] UNIT IV: HTML server controls-anchor Tables, Forms, Files. Basic Web server controls-label, Textbox button, Image, Links, Check & Radio button, Hyperlink. Data List Web server Controls-Check box list, Radio button list, Drop down list, list box, Data grid, Repeater. PART A (2 mark) 1. Give some server controls used in HTML. (Apr/May 2015) Validation controls These are used to validate user input and they work by running client-side script. Data view controls These are various lists and tables, which can bind to data from data sources for displaying. Data source controls These controls provide data binding to different data sources. Login and security controls These controls provide user authentication. 2. Define response object. (Apr/May 2015) Response object is a static object that will be created at each client's request. You can use this object to send output to the client. 3. Why do you mean by page event in ASP? (Apr/May 2015) Error - It is a page event, occurs when an unhandled exception is thrown. Init - It is raised when the page or the control is initialized. Load - It is raised when the page or a control is loaded. PreRender - It is raised when the page or the control is to be rendered. Unload - It is raised when the page or control is unloaded from memory. 4. List the asp label control properties. (Apr/May 2013) Id Name Value Background color RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 1 of 19

112 Academic Year: Regulation CBCS What is the use of data grid control? (Apr/May 2014) The data grid control is used to bind the data values from database through the data source name. 6. What is called page directives? (Nov 2012) The Page directive defines the attributes specific to the page file for the page parser and the compiler. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Trace="true" %> 7. What is file? (Nov 2012) Collections of data or information are stored into the record. The collection of records is stored into file. 8. Give the basic declaration of label control. (Apr/May 2014) <asp:label ID= "Label1" value= First Label runat= "Server"> </asp: Label> 9. What is a form? (Apr/May 2013) ASP.Net web forms extend the event-driven model of interaction to the web applications. The browser submits a web form to the web server and the server returns a full markup page or HTML page in response. 10. Write the syntax of directives. Syntax of Directives: The syntax for declaring a directive is: <%@ directive_name attribute=value [attribute=value] %> 11. What is ASP.NET? ASP.Net is a web development platform, which provides a programming model, a comprehensive software infrastructure and various services required to build up robust web application for PC, as well as mobile devices. 12. What is CLR? Common Language Runtime or CLR: It performs memory management, exception handling, debugging, security checking, thread execution, code execution, code safety, verification and compilation. Those codes which are directly managed by the CLR are called the managed code. When the managed code is compiled, the compiler converts the source code into a CPU RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 2 of 19

113 Academic Year: Regulation CBCS independent intermediate language (IL) code. A Just in time compiler (JIT) compiles the IL code into native code, which is CPU specific. 13. Write some scripting language in ASP.NET. The ASP.Net application codes could be written in either of the following languages: C# Visual Basic.Net Jscript J# 14. What is CLS? CLS - Common Language Specification It contains the specifications for the.net supported languages and implementation of language integration. 15. List the properties of page control. The page class has the following extremely useful properties that correspond to intrinsic objects like: Session. Application Cache Request Response Server User Trace 16. What is meant by request object. The request object is an instance of the System.Web.HttpRequest class. It represents the values and properties of the HTTP request that makes the page loading into the browser. The information presented by this object is wrapped up by the higher level abstractions, however, this object helps in checking some information like the client browser and cookies. 17. What is an event? Event is an action or occurrence like mouse click, key press, mouse movements, or any system generated notification. The processes communicate through events. For example, Interrupts are system generated events. When events occur the application should be able to respond to it. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 3 of 19

114 Academic Year: Regulation CBCS Explain class library of.net. It contains a huge library of reusable types. Classes, interfaces, structures and enumerated values, which are collectively called types. 19. Short note on life cycle of ASP.NET Application. The application life cycle has the following stages: User makes a request. A unified pipeline receives Response objects are created. The request is processed. 20. Short note on life cycle of ASP.NET Page. The page life cycle phases are: Initialization Instantiation of the controls on the page Restoration and maintenance of the state Execution of the event handler codes Page rendering 21. Write the state of ASP.NET. ASP.Net manages four types of state: View State Control State Session State Application State 22. What the use of redirect method? The HttpResponse object still provides some important functionalities, like the cookie feature and the Redirect() method. The Response.Redirect() method allows transferring the user to another page, inside as well as outside the application. It requires a round trip. 23. Explain Server object. The Server object in Asp.Net is an instance of the System.Web.HttpServerUtility class. The HttpServerUtility class provides numerous properties and methods to perform various jobs like request, response and so on. 24. Write the two aspects of client side. ASP.Net client side coding has two aspects: Client side scripts: that would run on the browser and in turn would speed up the execution of page. Client side source code: that the ASP.NET pages generate. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 4 of 19

115 Academic Year: Regulation CBCS PART B (5 mark) 1. Explain how to create Button in ASP with an example (Apr/May 2015) ASP.NET provides three types of button control: Button : It displays text within a rectangular area. Link Button : It displays text that looks like a hyperlink. Image Button : It displays an image. When a user clicks a button, two events are raised: Click and Command. Basic syntax of button control: <asp:button ID="Button1" runat="server" onclick="button1_click" Text="Click" / > Common properties of the button control: Property Text ImageUrl AlternateText CausesValidation CommandName CommandArgument PostBackUrl Description The text displayed on the button. This is for button and link button controls only. For image button control only. The image to be displayed for the button. For image button control only. The text to be displayed if the browser cannot display the image. Determines whether page validation occurs when a user clicks the button. The default is true. A string value that is passed to the command event when a user clicks the button. A string value that is passed to the command event when a user clicks the button. The URL of the page that is requested when the user clicks the button. 2. Write steps to invoke the IIS in your system. (Apr/May 2015) 1. Open IIS Manager. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 5 of 19

116 Academic Year: Regulation CBCS For Windows Server 2012, on the Start page click the Server Manager tile, and then click OK. In Server Manager, click the Tools menu, and then click Internet Information Services (IIS) Manager. For Windows 8, on the Start page type Control Panel, and then click the Control Panel icon in the search results. On the Control Panel screen, click System and Security, click Administrative Tools, and then click Internet Information Services (IIS) Manager. 2. In the Connections pane, expand the Sites node. 3. Right-click the site for which you want to create an application, and click Add Application. 4. In the Alias text box, type a value for the application URL, such as marketing. This value is used to access the application in a URL. 5. Click Select if you want to select a different application pool than the one listed in the Application pool box. In the Select Application Pool dialog box, select an application pool from the Application pool list and then click OK. 6. In the Physical path text box, type the physical path of the application's folder, or click the browse button (...) to navigate the file system to find the folder. 7. Optionally, click Connect as to specify credentials that have permission to access the physical path. If you do not use specific credentials, select the Application user (pass-through authentication) option on the Connect As dialog box. 8. Optionally, click Test Settings to verify the settings that you specified for the application. 9. Click OK. 3. Write short notes on image control. (Nov/Dec 2013) The image control is used for displaying images on the web page, or some alternative text, if the image is not available. Basic syntax for an image control: <asp:image ID="Image1" runat="server"> It has the following important properties: Property AlternateText ImageAlign ImageUrl Description Alternate text to be displayed Alignment options for the control Path of the image to be displayed by the control 4. Explain textbox control with syntax and example. (Apr/May 2014) Text box controls are typically used to accept input from the user. A text box control can accept one or more lines to text depending upon the setting of the TextMode attribute. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 6 of 19

117 Academic Year: Regulation CBCS Basic syntax for text controls: <asp:textbox ID="txtstate" runat="server" ></asp:textbox> Common Properties of the Text Box and Labels: Property TextMode Text MaxLength Wrap ReadOnly Columns Rows Description Specifies the type of text box. SingleLine creates a standard text box, MultiLIne creates a text box that accepts more than one line of text and the Password causes the characters that are entered to be masked. The default is SingleLine. The text content of the text box The maximum number of characters that can be entered into the text box. It determines whether or not text wraps automatically for multi-line text box; default is true. Determines whether the user can change the text in the box; default is false, i.e., the user can change the text. The width of the text box in characters. The actual width is determined based on the font that's used for the text entry The height of a multi-line text box in lines. The default value is 0, means a single line text box. 5. Discuss about the page properties in detail. (Apr/May 2014) Property AccessKey Attributes BackColor BorderColor Context Description Pressing this key with the Alt key moves focus to the control It's the collection of arbitrary attributes (for rendering only) that do not correspond to properties on the control. Background colour. Border colour. The HttpContext object associated with the server control. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 7 of 19

118 Academic Year: Regulation CBCS Controls ControlStyle CssClass Enabled Events Collection of all controls contained within the control The style of the Web server control. CSS class Font Font. Forecolor ID Page Parent Style Visible Indicates whether the control is grayed out Gets a list of event handler delegates for the control. Foreground colour. Identifier for the control. Page containing the control. Parent control. 6. What is drop down list? Explain. Gets a collection of text attributes that will be rendered as a style attribute on the outer tag of the Web server control. It indicates whether a server control is visible. List boxes and drop-down list contain one or more list items. These lists could be loaded either by code or by the ListItem Collection Editor. Basic syntax for a drop-down list control: <asp:dropdownlist ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:dropdownlist> Common Properties of List box: Property Items Rows SelectedIndex Description The collection of ListItem objects that represents the items in the control. This property returns an object of type ListItemCollection. Specifies the number of items displayed in the box. If actual list contains more rows than displayed then a scroll bar is added. The index of the currently selected item. If more than one item is selected, then the index of the first selected item. If no item is RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 8 of 19

119 Academic Year: Regulation CBCS SelectedValue SelectionMode selected, the value of this property is -1. The value of the currently selected item. If more than one item is selected, then the value of the first selected item. If no item is selected, the value of this property is an empty string(""). Indicates whether a list box allows single selections or multiple selections. Common Properties of each list item objects: Property Text Selected Value Description The text displayed for the item Indicates whether the item is selected. A string value associated with the item. The SelectedIndexChanged event is raised when the user selects a different item from a drop-down list or list box. 7. Write and explain the properties of as asp radio button control. (Nov/Dec 2013) Radio buttons present a group of options from which the user can select just one option. To create a group of radio buttons, you specify the same name for the GroupName attribute of each radio button in the group. If more than one group is required in a single form specify a different group name for each group. If you want a radio button to be selected when it's initially displayed, set its checked attribute to true. If the Checked attribute is set for more than one radio button in a group, then only the last one will be selected. Basic syntax for radio button: <asp:radiobutton ID= "rdboption" runat= "Server"> </asp: RadioButton> Common Properties of the Radio Buttons: Property Text Checked GroupName Description The text displayed next to the check box or radio button. Specifies whether it is selected or not, default is false. Name of the group the control belongs to. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 9 of 19

120 Academic Year: Regulation CBCS Brief explain about compiler directives. (Apr 2012) The Control Directive: The Control directive is used with the user controls and appears in the user control (.ascx) files. The basic syntax for a sample Control directive is: <%@ Control Language="C#" EnableViewState="false" %> The attributes of the Control directive are: Attributes AutoEventWireup ClassName Debug Description EnableViewState Explicit Inherits Language Src Strict Description the Boolean value that enables or disables automatic association of events to handlers file name for the control the Boolean value that enables or disables compiling with debug symbols text description of the control page, ignored by compiler the Boolean value that indicates whether view state is maintained across page requests for VB language, tells the compiler to use Option Explicit mode the class from which the control page inherits language for code and script the filename for the code-behind class for VB language, tells the compiler to use the Option Strict mode 9. Write about hyperlink in detail.(apr 2012) The HyperLink control is like the HTML <a> element. Basic syntax for a hyperlink control: <asp:hyperlink ID="HyperLink1" runat="server"> HyperLink </asp:hyperlink> It has the following important properties: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 10 of 19

121 Academic Year: Regulation CBCS Property ImageUrl NavigateUrl Text Target Description Path of the image to be displayed by the control Target link URL The text to be displayed as the link The window or frame which will load the linked page. 10. Discuss about checkbox list control with example. (Apr 2012) A check box displays a single option that the user can either check or uncheck. If you want a check box to be selected when it's initially displayed, set its checked attribute to true. If the Checked attribute is set for more than one radio button in a group, then only the last one will be selected. Basic syntax for check box: <asp:checkbox ID= "chkoption" runat= "Server"> </asp:checkbox> Common Properties of the Check Boxes: Property Text Checked GroupName Description The text displayed next to the check box or radio button. Specifies whether it is selected or not, default is false. Name of the group the control belongs to. 11. Explain the page event with syntax and example. (Apr/May 2014) Page and Control Events: Common page and control events are: DataBinding raised when a control bind to a data source Disposed. when the page or the control is released Error. it is an page event, occurs when an unhandled exception is thrown Init. raised when the page or the control is initialized Load. raised when the page or a control is loaded PreRender. raised when the page or the control is to be rendered Unload. raised when the page or control is unloaded from memory Syntax: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 11 of 19

122 Academic Year: Regulation CBCS <asp:button ID="btnCancel" runat="server" Text="Cancel" Onclick="btnCancel_Click" /> 12. Write short notes on list control. List Control: ASP.Net provides the controls: drop-down list, list box, radio button list, check box list and bulleted list. These control let a user choose from one or more items from the list. Basic syntax for list box control: <asp:listbox ID="ListBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"> </asp:listbox> Common Properties of List box: Property Items Rows SelectedIndex SelectedValue SelectionMode Description The collection of ListItem objects that represents the items in the control. This property returns an object of type ListItemCollection. Specifies the number of items displayed in the box. If actual list contains more rows than displayed then a scroll bar is added. The index of the currently selected item. If more than one item is selected, then the index of the first selected item. If no item is selected, the value of this property is -1. The value of the currently selected item. If more than one item is selected, then the value of the first selected item. If no item is selected, the value of this property is an empty string(""). Indicates whether a list box allows single selections or multiple selections. Common Properties of each list item objects: Property Text Selected Value Description The text displayed for the item Indicates whether the item is selected. A string value associated with the item. RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 12 of 19

123 Academic Year: Regulation CBCS To work with the items in a drop-down list or list box, you use the Items property of the control. This property returns a ListItemCollection object which contains all the items of the list. PART C (10 marks) 1. Discuss the various html server controls with examples. (Apr/May 2013, Apr/May 2014, Apr/May 2015) The HTML server controls are basically the original HTML controls but enhanced to enable server side processing. The HTML controls like the header tags, anchor tags and input elements are not processed by the server but sent to the browser for display. They are specifically converted to a server control by adding the attribute runat="server" and adding an id attribute to make them available for server-side processing. For example, consider the HTML input control: <input type="text" size="40"> It could be converted to a server control, by adding the runat and id attribute: <input type="text" id="testtext" size="40" runat="server"> Advantages of using HTML Server Controls Although ASP.Net server controls can perform every job accomplished by the HTML server controls, the later controls are useful in the following cases: Using static tables for layout purposes Converting a HTML page to run under ASP.Net The following table describes the HTML server controls: Control Name HtmlHead HtmlInputButton HtmlInputCheckbox HtmlInputFile HtmlInputHidden HtmlInputImage HTML tag <head>element <input type=button submit reset> <input type=checkbox> <input type = file> <input type = hidden> <input type = image> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 13 of 19

124 Academic Year: Regulation CBCS HtmlInputPassword HtmlInputRadioButton HtmlInputReset HtmlText HtmlImage HtmlLink HtmlAnchor HtmlButton HtmlButton HtmlForm HtmlTable HtmlTableCell HtmlTableRow HtmlTitle HtmlSelect HtmlGenericControl <input type = password> <input type = radio> <input type = reset> <input type = text password> <img> element <link> element <a> element <button> element <button> element <form> element <table> element <td> and <th> <tr> element <title> element <select> element All HTML controls not listed 2. Write ASP page to display the welcome message into Text box controls. (Apr/May 2015) <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="customcontroldemo._Default" %> <%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" > <head runat="server"> <title> Untitled Page </title> </head> <body> <form id="form1" runat="server"> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 14 of 19

125 Academic Year: Regulation CBCS <div> <asp:label ID="Label1" runat="server" Text="Welcome to ASP.Net Tutorials "></asp:label> </div> <Tfooter:footer ID="footer1" runat="server" /> </form> </body> </html> 3. Discuss about directives in ASP.NET. (Apr/May 2014) Directives in ASP.NET ASP.Net directives are instructions to specify optional settings, such as registering a custom control and page language. These settings describe how the web forms (.aspx) or user controls (.ascx) pages are processed by the.net framework. The syntax for declaring a directive is: <%@ directive_name attribute=value [attribute=value] %> The Application Directive The Application directive defines application-specific attributes. It is provided at the top of the global.aspx file. The basic syntax for a sample Application directive is: <%@ Application Language="C#" %> The Assembly Directive The Assembly directive links an assembly to the page or the application at parse time. This could appear either in the global.asax file for application-wide linking or in the page file or a user control file for linking to a page or user control. The basic syntax for a sample Assembly directive is: <%@ Assembly Name ="myassembly" %> The Control Directive The Control directive is used with the user controls and appears in the user control (.ascx) files. The basic syntax for a sample Control directive is: <%@ Control Language="C#" EnableViewState="false" %> RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 15 of 19

126 Academic Year: Regulation CBCS The Implements Directive The Implement directive indicates that the web page, master page or user control page must implement the specified.net framework interface. The basic syntax for an Implements directive is: <%@ Implements Interface="interface_name" %> The Import Directive The Import directive imports a namespace into a web page, user control pate of application. If the Import directive is specified in the global.asax, then it will apply to the entire application. If it is in a page of user control page, then it would apply to that page or control. <%@ namespace="system.drawing" %> The Master Directive The Master directive specifies a page file as being the mater page. The basic syntax for a sample MasterPage directive is: <%@ MasterPage Language="C#" AutoEventWireup="true" CodeFile="SiteMater.master.cs" Inherits="SiteMaster" %> The Page Directive The Page directive defines the attributes specific to the page file for the page parser and the compiler. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Trace="true" %> The PreviousPageType Directive The PreviousPageType directive assigns a class to a page, so that the page is strongly typed. The basic syntax for a sample PreviousPagetype directive is: <%@ PreviousPageType attribute="value"[attribute="value"...] %> The Reference Directive The Reference directive indicates that another page or user control should be compiled and linked to the current page. <%@ Reference Page ="somepage.aspx" %> The Register Directive RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 16 of 19

127 Academic Year: Regulation CBCS The Register derivative is used for registering the custom server controls and user controls. <%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %> 4. Explain the possible ways to secure your ASP.NET web page. (Nov/Dec 2013) Implementing security in a site has the following aspects: Authentication: it is the process of ensuring the users identity and authenticity. ASP.Net allows four types of authentication system: Windows Authentication Forms Authentication Passport Authentication Custom Authentication Authorization: it is the process of defining and allotting specific roles to specific users. Confidentiality: it involves encrypting the channel between the clients browser and the web server. Integrity: it involves maintaining the integrity of data. For example, implementing digital signature. 5. Explain any three web server controls? (Apr/May 2014) Checkbox list Control: A check box displays a single option that the user can either check or uncheck. If you want a check box to be selected when it's initially displayed, set its checked attribute to true. If the Checked attribute is set for more than one radio button in a group, then only the last one will be selected. Basic syntax for check box: <asp:checkbox ID= "chkoption" runat= "Server"> </asp:checkbox> Textbox control: Text box controls are typically used to accept input from the user. A text box control can accept one or more lines to text depending upon the setting of the TextMode attribute. Basic syntax for text controls: <asp:textbox ID="txtstate" runat="server" ></asp:textbox> Image control: RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 17 of 19

128 Academic Year: Regulation CBCS The image control is used for displaying images on the web page, or some alternative text, if the image is not available. Basic syntax for an image control: <asp:image ID="Image1" runat="server"> 6. Discuss the various data list web server controls with examples. (Nov/Dec 2013, Nov 2012) Controls are small building blocks of the graphical user interface, which includes text boxes, buttons, check boxes, list boxes, labels and numerous other tools, using which users can enter data, make selections and indicate their preferences. Controls are also used for structural jobs, like validation, data access, security, creating master pages, data manipulation. ASP.Net uses five types of web controls, which are: HTML controls HTML Server controls ASP.Net Server controls ASP.Net Ajax Server controls User controls and custom controls ASP.Net server controls are the primary controls used in ASP.Net. These controls again could be grouped into the following categories: Validation controls - these are used to validate user input and work by running client-side script Data source controls - these controls provides data binding to different data sources Data view controls - these are various lists and tables, which can bind to data from data sources for display Personalization controls - these are used for personalization of a page according to the user's preference, based on user information Login and security controls - these controls provide user authentication Master pages - these provides consistent layout and interface throughout the application Navigation controls - these helps in navigation, for example, the menus, tree view etc. Rich controls - these implements special features, for example, AdRotator control, FileUpload control, Calendar control etc. The basic syntax for using server controls is: <asp:controltype ID ="ControlID" runat="server" RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 18 of 19

129 Academic Year: Regulation CBCS Property1=value1 [Property2=value2] /> However, visual studio has the following features, which helps in error free coding: Dragging and dropping of controls in design view IntelliSense feature that displays and auto-completes the properties The properties window to set the property values directly RAAK/CA/THAMIZHVENDHAN.T/III-YEAR/VI-Sem/UCP62/WebTechnology/UNIT-4 QA Unit IV Question and Answer Page 19 of 19

130 ACADEMIC YEAR: REGULATION CBCS (UCP62) (Web Technology) Unit-5 (ASP.NET Database Connectivity) Type: 100% Theory Question and Answer PART A. ANSWERS 1. Expand OLEDB. (Apr/May 2015) Object Linking and Embedding Database (OLEDB) 2. What is ? (Apr/May 2013, Apr 2012) Electronic mail, most commonly referred to as or since c 1993, is a method of exchanging digital messages from an author to one or more recipients. Modern operates across the Internet or other computer networks. 3. Write the methods of response object. (Apr 2012) Methods of response object Redirect(String) Redirect(String, Boolean) SetCookie Redirects a request to a new URL and specifies the new URL. Redirects a client to a new URL. Specifies the new URL and whether execution of the current page should terminate. Updates an existing cookie in the cookie collection. 4. Define cookies. (Nov/Dec 2013, Apr/May 2014) Cookies A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With ASP, you can both create and retrieve cookie values. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 1 of 35

131 ACADEMIC YEAR: REGULATION CBCS What do you understand about IIS? (Nov/Dec 2013) IIS (Internet Information Server) It is a group of Internet servers (including a Web or Hypertext Transfer Protocol server and a File Transfer Protocol server) with additional capabilities for Microsoft's Windows NT and Windows 2000 Server operating systems. 6. Write the namespace to send a simple message. (Apr/May 2014) send Two classes from this namespace: 1. The MailMessage class, for the actual , and 2. The SmtpClient class, for sending the What do you meant by on OLEDB? (Apr/May 2013) OLEDB OLEDB interfaces provide applications with uniform access to data stored in diverse information sources, or data stores.as a design from Microsoft's Component Object Model (COM), OLE DB is a set of methods (in earlier days, these might have been called routines) for reading and writing data. The objects in OLE DB consist mainly of a data source object, a session object, a command object, and a rowset object. 8. What is IIS? (Apr/May 2013, Apr/May 2014) IIS (Internet Information Server) Internet Information Server, is a web server producted by Microsoft. IIS is used with Microsoft Windows OSs and is the Microsoft-centric competition to Apache, the most popular webserver used with Unix/Linux-based systems. 9. What are the information provided by the request object? (Nov/Dec 2013) Request Object: RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 2 of 35

132 ACADEMIC YEAR: REGULATION CBCS When a browser asks for a page from a server, it is called a request. The Request object is used to get information from a visitor. Its collections, properties, and methods are described below: Property Description TotalBytes Returns the total number of bytes the client sent in the body of the request Method Description BinaryRead Retrieves the data sent to the server from the client as part of a post request and stores it in a safe array 10. Expand SSL. (Nov/Dec 2013, Apr/May 2014) SSL stands for Secure Sockets Layer. It provides a secure connection between internet browsers and websites, allowing you to transmit private data online. Sites secured with SSL display a padlock in the browsers URL and possibly a green address bar if secured by an EV Certificate. 11. What are called page directives? (Nov 2012) Page Directives: ASP.NET directives are instructions to specify optional settings, such as registering a custom control and page language. These settings describe how the web forms (.aspx) or user controls (.ascx) pages are processed by the.net framework. The syntax for declaring a directive is: <%@ directive_name attribute=value [attribute=value] %> RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 3 of 35

133 ACADEMIC YEAR: REGULATION CBCS Write about digital signature. (Nov 2012) Digital Signatures aren't the most intuitive software devices, but Matteo boldly gives a quick-start account of Asymmetric Cryptography and Digital Signatures before demonstrating how simple it can be to perform a signature using an X509 certificate and.net Framework base classes. 13. Define the request object. The Request Object: The request object is an instance of the System.Web.HttpRequest class. It represents the values and properties of the HTTP request that makes the page loading into the browser 14. Define the response object. The Response Object: The Response object represents the server's response to the client request. It is an instance of the System.Web.HttpResponse class. Response object does not play a vital role in sending HTML text to the client, because the server-side controls have nested, object oriented methods for rendering themselves. 15. Explain dataset. The DataSet Class The dataset represents a subset of the database. It does not have a continuous connection to the database. To update the database a reconnection is required. The DataSet contains DataTable objects and DataRelation objects. The DataRelation objects represent the relationship between two tables. 16. Explain DataTable. DataTable Class The DataTable class represents the tables in the database. It has table to hold data from database. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 4 of 35

134 ACADEMIC YEAR: REGULATION CBCS Explain DataRow. The DataRow Class The DataRow object represents a row in a table. It maintains to retrieve data form database and write the data row by rows. 18. Short note on DataAdapter. DataAdapter Object The DataAdapter object acts as a mediator between the DataSet object and the database. This helps the Dataset to contain data from multiple databases or other data source. 19. Short note on DataReader. The DataReader Object The DataReader object is an alternative to the DataSet and DataAdapter combination. This object provides a connection oriented access to the data records in the database. These objects are suitable for read-only access, such as populating a list and then breaking the connection. 20. Explain DbCommand. DbCommand The DbCommand object represents the command or a stored procedure sent to the database from retrieving or manipulating data 21. Explain DbConnection. The DbConnection: The DbConnection object represents a connection to the data source. The connection could be shared among different command objects. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 5 of 35

135 ACADEMIC YEAR: REGULATION CBCS PART B ANSWERS 1. Briefly explain any two request object methods. (Nov/Dec 2013) The Request Object: The request object is an instance of the System.Web.HttpRequest class. It represents the values and properties of the HTTP request that makes the page loading into the browser. The information presented by this object is wrapped up by the higher level abstractions (the web control model), however, this object helps in checking some information like the client browser and cookies. Methods of the Request Object: Method BinaryRead Equals(Object) GetType MapImageCoordinates MapPath(String) SaveAs ToString ValidateInput Description Performs a binary read of a specified number of bytes from the current input stream. Determines whether the specified Object is equal to the current Object. (Inherited from Object.) Gets the Type of the current instance. Maps an incoming image-field form parameter to appropriate x-coordinate and y-coordinate values. Maps the specified virtual path to a physical path. Saves an HTTP request to disk. Returns a String that represents the current Object Causes validation to occur for the collections accessed through the Cookies, Form, and QueryString properties. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 6 of 35

136 ACADEMIC YEAR: REGULATION CBCS How to attach a file while sending ? Explain. (Nov/Dec 2013) Sending Sending s with ASP.NET is pretty straight forward. The.NET framework comes with an entire namespace for handling s, the System.Net.Mail namespace. Two classes from this namespace: 1. The MailMessage class, for the actual , and 2. The SmtpClient class, for sending the . Once you have an accessible SMTP server, we're ready to send our very first . For the first example, all you need is an empty page, with the following code in the CodeBehind: protected void Page_Load(object sender, EventArgs e) { try { MailMessage mailmessage = new MailMessage(); mailmessage.to.add("your.own@mail-address.com"); mailmessage.from = new MailAddress("another@mail-address.com"); mailmessage.subject = "ASP.NET test"; mailmessage.body = "Hello world,\n\nthis is an ASP.NET test !"; SmtpClient smtpclient = new SmtpClient("smtp.your-isp.com"); smtpclient.send(mailmessage); Response.Write(" sent!"); catch(exception ex) { Response.Write("Could not send the - error: " + ex.message); RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 7 of 35

137 ACADEMIC YEAR: REGULATION CBCS Attach one or several files: Simply by adding them to the Attachments collection. In this example, we attach a file called "image.jpg", located in the root of the ASP.NET website: mailmessage.attachments.add(new Attachment(Server.MapPath("~/image.jpg"))); 3. Brief explain the various response object method. (Apr/May 2014) The Response Object: The Response object represents the server's response to the client request. It is an instance of the System.Web.HttpResponse class. Response object does not play a vital role in sending HTML text to the client, because the server-side controls have nested, object oriented methods for rendering themselves. However, the HttpResponse object still provides some important functionalities, like the cookie feature and the Redirect() method. The Response.Redirect() method allows transferring the user to another page, inside as well as outside the application. It requires a round trip. The following table provides a list of some important methods: Method AddHeader AppendCookie AppendHeader AppendToLog BinaryWrite ClearContent Description Adds an HTTP header to the output stream. AddHeader is provided for compatibility with earlier versions of ASP. Infrastructure. Adds an HTTP cookie to the intrinsic cookie collection. Adds an HTTP header to the output stream. Adds custom log information to the Internet Information Services (IIS) log file. Writes a string of binary characters to the HTTP output stream. Clears all content output from the buffer stream. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 8 of 35

138 ACADEMIC YEAR: REGULATION CBCS Close End Equals(Object) Flush GetType Pics Redirect(String) Redirect(String, Boolean) SetCookie ToString TransmitFile(String) Write(Char) Write(Object) Write(String) WriteFile(String) WriteFile(String, Boolean) Closes the socket connection to a client. Sends all currently buffered output to the client, stops execution of the page, and raises the EndRequest event. Determines whether the specified Object is equal to the current Object Sends all currently buffered output to the client. Gets the Type of the current instance. Appends a HTTP PICS-Label header to the output stream. Redirects a request to a new URL and specifies the new URL. Redirects a client to a new URL. Specifies the new URL and whether execution of the current page should terminate. Updates an existing cookie in the cookie collection. Returns a String that represents the current Object. Writes the specified file directly to an HTTP response output stream, without buffering it in memory. Writes a character to an HTTP response output stream. Writes an Object to an HTTP response stream. Writes a string to an HTTP response output stream. Writes the contents of the specified file directly to an HTTP response output stream as a file block. Writes the contents of the specified file directly to an HTTP response output stream as a memory block. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 9 of 35

139 ACADEMIC YEAR: REGULATION CBCS Explain OLEDB connection class with syntax and example. (Apr/May 2014 Apr/May 2015) OLEDB Connection The factors we have reviewed so far allow you to specify how the connection would be established and what database would be used. Before performing any necessary operation, you must open the connection. To support this, the OleDbConnection class is equipped with theopen() method whose syntax is: Public Overridable Sub Open() Implements IDbConnection.Open Here is an example of calling this method: Dim oleconn As System.Data.OleDb.OleDbConnection Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load oleconn = New System.Data.OleDb.OleDbConnection oleconn.connectionstring = "Provider=Microsoft.JET.OLEDB.4.0;" & _ "Data Source=C:\Programs\Exercise.mdb;" oleconn.open() End Sub RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 10 of 35

140 ACADEMIC YEAR: REGULATION CBCS Closing a Connection: After establishing a connection and while using it, it consumes resources. When you have finished using a connection and if you don't need anymore or you would not use it for a while, you should close it to release its resources and make them available to other applications. To close a connection, the OleDbConnection class provides the Close() method. Its syntax is: Public Overridable Sub Close() Implements IDbConnection.Close Here is an example of calling this method: Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim oleconn As System.Data.OleDb.OleDbConnection oleconn = New System.Data.OleDb.OleDbConnection oleconn.connectionstring = "Provider=Microsoft.JET.OLEDB.4.0;" & _ oleconn.open() "Data Source=C:\Programs\Exercise.mdb;" End Sub oleconn.close() 5. Explain the term cookies in detail. (Nov/Dec 2013) Cookies: A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With ASP, you can both create and retrieve cookie values. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 11 of 35

141 ACADEMIC YEAR: REGULATION CBCS Create a Cookie The "Response.Cookies" command is used to create cookies. Note: The Response.Cookies command must appear BEFORE the <html> tag. In the example below, we will create a cookie named "firstname" and assign the value "Alex" to it: <% Response.Cookies("firstname")="Alex" %> It is also possible to assign properties to a cookie, like setting a date when the cookie should expire: <% Response.Cookies("firstname")="Alex" Response.Cookies("firstname").Expires=#May 10,2012# %> Retrieve a Cookie Value The "Request.Cookies" command is used to retrieve a cookie value. In the example below, we retrieve the value of the cookie named "firstname" and display it on a page: <% fname=request.cookies("firstname") response.write("firstname=" & fname) %> Output: Firstname=Alex 6. Write the steps to add a website. (Apr 2012) RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 12 of 35

142 ACADEMIC YEAR: REGULATION CBCS Creating Website: 1. Choose a domain name. There are various tools you can use to pick a name if that gets difficult for you. Check out Nameboy.com, makewords.com, and ebay also has some. You can determine if the domain name is available by using sites likehttp:// which can also help you find out if a similar site name has not been registered. 2. Determine what kind of hosting package you will need. Many web hosting companies offer different packages, some of which are free, which will usually fit almost any web hosting needs. Some popular web hosting companies with lowcost starting packages 3. Website navigation/ Website content - Make sure your idea for your website is clear. 4. You might also want to use a web template to make it easier for you as well if you don't have time to do it yourself. Some of these are really good and very cheap. Freewebtemplates.com and templatesbox.com. 5. Design your website - Decide what software you're going to use to design your website 6. Text/Graphics and Web buttons - Use Adobe Photoshop to generate a page header for your website. 7. Website design and development tools - There are many sites available for learning how to design and develop websites. 8. Search engine submission - Don't forget try to get it on all the big guys, Google, Yahoo!, MSN, AOL, and Ask.com 9. Their pages will walk you through the submission progress, from adding your sitemap and including your child pages as well. Don't forget to submit to DMOZ and Searchit.com too. 10. Add Advertise but not least advertise, you can always use Yahoo or Google Adwords and maintain your own budget. 7. Write down your points for authentication with neat diagrams. (Nov 2012) RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 13 of 35

143 ACADEMIC YEAR: REGULATION CBCS Implementing security in a site has the following aspects: Authentication: It is the process of ensuring the users identity and authenticity. ASP.Net allows four types of authentication system: Windows Authentication Forms Authentication Passport Authentication Custom Authentication Authorization: It is the process of defining and allotting specific roles to specific users. Confidentiality: It involves encrypting the channel between the client s browser and the web server. Integrity: It involves maintaining the integrity of data. For example, implementing digital signature. 8. How to work with an IIS? Explain. (Apr 2012) Internet Information Services: The IIS configuration tool helps you rapidly deploy web applications on Microsoft Windows servers family running Internet Information Services (versions 5.0 and above). This Advanced Installer utility ensures a fast and uniform installation of your web applications on multiple servers, without having to worry about manually configuring the IIS on every machine through Microsoft Management Console.Web Sites and Virtual Directories for your web application. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 14 of 35

144 ACADEMIC YEAR: REGULATION CBCS Let's suppose your web application consists of ane-commerce web site, called example.com. This ASP.NET web application has a main user interface for registered users and guests as well as an Administration Panel. This panel will be served from a different secure location installed on the target server, hence the need to configure a separate virtual directory for this application. 1. Add your application files 2. Add your Web Site 3. Configure Web Site Bindings 4. Configure Access Flags for your Web Site 5. Set up default documents for your application 6. Enable FTP access 7. Configure Virtual Directory 8. Configure global IIS settings (optional) 9. Run the project 9. Write the significance of SSL certificates. (Apr 2012) SSL Certificate: SSL Certificates are small data files that digitally bind a cryptographic key to an organization s details. When installed on a web server, it activates the padlock and the https protocol and allows secure connections from a web server to a browser. Typically, SSL is used to secure credit card transactions, data transfer and logins, and more recently is becoming the norm when securing browsing of social media sites. SSL Certificates bind together: A domain name, server name or hostname. An organizational identity (i.e. company name) and location. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 15 of 35

ACADEMIC YEAR: 2016 2017 REGULATION CBCS - 2012 An organization needs to install the SSL Certificate onto its web server to initiate secure sessions with browsers.

145 ACADEMIC YEAR: REGULATION CBCS An organization needs to install the SSL Certificate onto its web server to initiate secure sessions with browsers. Depending on the type of SSL Certificate applied for, the organization will need to go through differing levels of vetting. Once installed, it is possible to connect to the website over as this tells the server to establish a secure connection with the browser. Once a secure connection is established, all web traffic between the web server and the web browser will be secure. Browsers tell visitors a website is SSL secure via several visible trust indicators: Extended Validation (EV) SSL Certificates (such as GlobalSign ExtendedSSL): 10. Explain the term session in detail. (Nov/Dec 2013) Session: When a user connects to an ASP.Net website, a new session object is created. When session state is turned on, a new session state object is created for each new request. This session state object becomes part of the context and it is available through the page.session state is generally used for storing application data like inventory or supplier list, or a customer record or shopping cart. It can also keep information about the user and his preference and keep track of pending operations. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 16 of 35

146 ACADEMIC YEAR: REGULATION CBCS Sessions are identified and tracked with a 120-bit SessionID, which is passed from client to server and back as cookie or a modified URL. The SessionID is globally unique and random.the session state object is created from the HttpSessionState class, which defines a collection of session state items. The HttpSessionState class has the following properties: Properties SessionID Item(name) Count TimeOut Description The unique session identifier The value of the session state item with the specified name. This is the default property of the HttpSessionState class The number of items in the session state collection Gets and sets the amount of time, in minutes, allowed between requests before the session-state provider terminates the session. The HttpSessionState class has the following methods: Methods Add(name, value) Clear Remove(name) RemoveAll RemoveAt Description Adds an item to the session state collection Removes all the items from session state collection Removes the specified item from the session state collection Removes all keys and values from the session-state collection. Deletes an item at a specified index from the session-state collection. The session state object is a name-value pair, to store and retrieve some information from the session state object the following code could be used: RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 17 of 35

147 ACADEMIC YEAR: REGULATION CBCS void StoreSessionInfo() { String fromuser = TextBox1.Text; Session["fromuser"] = fromuser; void RetrieveSessionInfo() { String fromuser = Session["fromuser"]; Label1.Text = fromuser; 11. Give brief notes about data adaptor class. (Apr/May 2015) When you need to extract records from a database and use them to fill a table in a DataSet, you should use ADO.NET object: DataAdapter. Because the DataAdapter comes in a provider-specific object there is separate class for each provider: SqlDataAdapter, OracleDataAdapter, and so on. The DataAdapter works as a bridge between a single DataTable in the DataSet and the data source. It contains all the available commands for querying and updating the data source. You can enable the DataAdapter to edit, delete and add rows by specifying Command objects for the UpdateCommand, DeleteCommand, and InsertCommand properties of the DataAdapter. You can use the DataAdapter to fill a DataSet by setting the SelectCommand. Three key methods provided by the DataAdapter are listed in the next table: Method Description Fill() Adds a DataTable to a DataSet by executing the query in the SelectCommand. If your query returns multiple result sets, this RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 18 of 35

148 ACADEMIC YEAR: REGULATION CBCS method will add multiple DataTable objects at once. You can also use this method to add data to an existing DataTable. FillSchema() Adds a DataTable to a DataSet by executing the query in the SelectCommand and retrieving schema information only. This method doesn t add any data to the DataTable. Instead, it simply preconfigures the DataTable with detailed information about column names, data types, primary keys, and unique constraints. Update() Examines all the changes in a single DataTable and applies this batch of changes to the data source by executing the appropriate InsertCommand, UpdateCommand, and DeleteCommand operations. PART C ANSWERS 1. Explain the possible ways to secure your ASP.NET web page. (Nov/Dec 2013) Implementing security in a site has the following aspects: Authentication: It is theprocess of ensuring the users identity and authenticity. ASP.Net allows four types of authentication system: Windows Authentication Forms Authentication Passport Authentication Custom Authentication Authorization: It is the process of defining and allotting specific roles to specific users. Confidentiality: RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 19 of 35

149 ACADEMIC YEAR: REGULATION CBCS web server. It involves encrypting the channel between the client s browser and the Integrity: It involves maintaining the integrity of data. For example, implementing digital signature. Forms-Based Authentication: Traditionally forms based authentication involves editing the Web.Config file and adding a login page with appropriate authentication code. The Web.Config file could be edited and the following codes written on it: <system.web> <authentication mode="forms"> <forms loginurl ="login.aspx"/> </authentication> <authorization> <deny users="?"/> </authorization> </system.web> </configuration> The login.aspx page mentioned in the above code snippet could have the following code behind file with the usernames and passwords for authentication hard coded into it. protected bool authenticate(string uname, String pass) { RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 20 of 35

150 ACADEMIC YEAR: REGULATION CBCS if(uname == "Tom") { if(pass == "tom123") return true; if(uname == "Dick") { if(pass == "dick123") return true; if(uname == "Harry") { if(pass == "har123") return true; return false; public void OnLogin(Object src, EventArgs e) { if (authenticate(txtuser.text, txtpwd.text)) { FormsAuthentication.RedirectFromLoginPage(txtuser.Text, chkrem.checked); RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 21 of 35

151 ACADEMIC YEAR: REGULATION CBCS else { Response.Write("Invalid user name or password"); Observe that the FormsAuthentication class is responsible for the process of authentication.however, Visual Studio allows you to implement user creation, authentication and authorization with seamless ease without writing any code, through the Web Site Administration tool. This tool allows creating users and roles.apart from this, ASP.Net comes with readymade login controls set, which has controls performing all the jobs for you. 2. How to establish OLEDB connectivity in ASP.NET? Explain. (Apr/May 2013, Apr/May 2014) The factors we have reviewed so far allow you to specify how the connection would be established and what database would be used. Before performing any necessary operation, you must open the connection. To support this, the OleDbConnection class is equipped with theopen() method whose syntax is: Public Overridable Sub Open() Implements IDbConnection.Open Here is an example of calling this method: OLEDB Connection Dim oleconn As System.Data.OleDb.OleDbConnection Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load oleconn = New System.Data.OleDb.OleDbConnection RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 22 of 35

152 ACADEMIC YEAR: REGULATION CBCS oleconn.connectionstring = "Provider=Microsoft.JET.OLEDB.4.0;" & _ "Data Source=C:\Programs\Exercise.mdb;" oleconn.open() End Sub Closing a Connection: After establishing a connection and while using it, it consumes resources. When you have finished using a connection and if you don't need anymore or you would not use it for a while, you should close it to release its resources and make them available to other applications. To close a connection, the OleDbConnection class provides the Close() method. Its syntax is: Public Overridable Sub Close() Implements IDbConnection.Close Here is an example of calling this method: Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim oleconn As System.Data.OleDb.OleDbConnection oleconn = New System.Data.OleDb.OleDbConnection oleconn.connectionstring = "Provider=Microsoft.JET.OLEDB.4.0;" & _ oleconn.open() "Data Source=C:\Programs\Exercise.mdb;" End Sub oleconn.close() 3. Give a brief description about error handling. (Nov/Dec 2013) Error Handling: ASP.NET applications must be able to handle errors that occur during execution in a consistent manner. ASP.NET uses the common language runtime (CLR), which RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 23 of 35

153 ACADEMIC YEAR: REGULATION CBCS provides a way of notifying applications of errors in a uniform way. When an error occurs, an exception is thrown. An exception is any error, condition, or unexpected behavior that an application encounters. In the.net Framework, an exception is an object that inherits from the System.Exception class. An exception is thrown from an area of code where a problem has occurred. The exception is passed up the call stack to a place where the application provides code to handle the exception. If the application does not handle the exception, the browser is forced to display the error details. As a best practice, handle errors in at the code level in Try/Catch/Finally blocks within your code. Try to place these blocks so that the user can correct problems in the context in which they occur. If the error handling blocks are too far away from where the error occurred, it becomes more difficult to provide users with the information they need to fix the problem. Exception Class: The Exception class is the base class from which exceptions inherit. Most exception objects are instances of some derived class of the Exception class, such as the SystemException class, the IndexOutOfRangeException class, or the ArgumentNullException class. The Exception class has properties, such as the StackTrace property, theinnerexception property, and the Message property, that provide specific information about the error that has occurred. In an ASP.NET Web Forms application, exceptions can be handled based on a specific handling hierarchy. An exception can be handled at the following levels: Application level Page level Code level Application Level Error Handling Default errors at the application level either by modifying your application's configuration or by adding an Application_Error handler in the Global.asax file of your application. Default errors and HTTP errors by adding a customerrors section to RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 24 of 35

154 ACADEMIC YEAR: REGULATION CBCS the Web.config file. ThecustomErrors section allows you to specify a default page that users will be redirected to when an error occurs. It also allows you to specify individual pages for specific status code errors. <configuration> <system.web> <customerrorsmode="on"defaultredirect="errorpage.aspx?handler=customerrors%20s ection%20-%20web.config"> <errorstatuscode="404"redirect="errorpage.aspx?msg=404&handler=customerrors %20section%20-%20Web.config"/> </customerrors> </system.web> </configuration> Unfortunately, when you use the configuration to redirect the user to a different page, you do not have the details of the error that occurred. However, you can trap errors that occur anywhere in your application by adding code to the Application_Errorhandler in the Global.asax file. voidapplication_error(object sender,eventargs e) { Exception exc =Server.GetLastError(); if(exc ishttpunhandledexception) { // Pass the error on to the error page. Server.Transfer("ErrorPage.aspx?handler=Application_Error%20- %20Global.asax",true); 4. How to connect the ASP.NET page into backend RDBMS? Explain with example. (Apr/May 2013) RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 25 of 35

ACADEMIC YEAR: 2016 2017 REGULATION CBCS - 2012 Connect the ASP.NET (1) Create a web site and add a SqlDataSourceControl on the web form. (2) Click on the Configure Data Source Link.

155 ACADEMIC YEAR: REGULATION CBCS Connect the ASP.NET (1) Create a web site and add a SqlDataSourceControl on the web form. (2) Click on the Configure Data Source Link. (3) Click on the New Connection button to establish connection with a database. (4) Once the connection is set up, you may save it for further use. At the next step, you are asked to configure the select statement: RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 26 of 35

ACADEMIC YEAR: 2016 2017 REGULATION CBCS - 2012 (5) Select the columns and click next to complete the steps. Observe the WHERE, ORDER BY, AND the Advanced. Buttons.

This way, you can manipulate the data. (6) Add a GridView control on the form. Choose the data source and format the control using AutoFormat option.

156 ACADEMIC YEAR: REGULATION CBCS (5) Select the columns and click next to complete the steps. Observe the WHERE, ORDER BY, AND the Advanced. Buttons. These buttons allow you to provide the where clause, order by clause and specify the insert, update and delete commands of SQL respectively. This way, you can manipulate the data. (6) Add a GridView control on the form. Choose the data source and format the control using AutoFormat option. (7) After this the formatted GridView control displays the column headings, and the application is ready to run. RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 27 of 35

ACADEMIC YEAR: 2016 2017 REGULATION CBCS - 2012 (8) Finally Run the application The content file code: <%@ Page

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.

157 ACADEMIC YEAR: REGULATION CBCS (8) Finally Run the application The content file code: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataaccess.aspx.cs" Inherits="datacaching.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" > RAAK/CA/ THAMIZHVENDHAN.T /III-YEAR/VI-Sem/ UCP62/WebTechnology/UNIT-5 AB Unit 5 Question & Answer Page 28 of 35

Appendix D CSS Properties and Values

HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by