CHETTINAD COLLEGE OF ENGINEERNG AND TECHNOLOGY DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING UNIT I XHTML

Size: px

Start display at page:

Download "CHETTINAD COLLEGE OF ENGINEERNG AND TECHNOLOGY DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING UNIT I XHTML"

Rosanna Wade
6 years ago
Views:

1 CHETTINAD COLLEGE OF ENGINEERNG AND TECHNOLOGY DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING UNIT I XHTML 1. What is XHTML? XHTML stands for extensable HyperText Markup Language and is a cross between HTML and XML. XHTML was created for two main reasons: a. To create a stricter standard for making web pages, reducing compatibilities between browsers b. To create a standard that can be used on a variety of different devices without changes. 2. What are the main changes in XHTML from HTML? 1. All tags must be in lower case 2. All documents must have a doctype 3. All documents must be properly formed 4. All tags must be closed 5. All attributes must be added properly 6. The name attribute has changed 7. Attributes cannot be shortened 8. All tags must be properly nested 3. What are the difference between XHTML and HTML XHTML requires that all Webpages contain the <html>,, and elements, as well as the DOCTYPE declaration, where as in HTML they are not required. XHTML insists on having closing tags for every element, even empty ones, where as HTML often lets you omit them. HTML requires that all attributes be enclosed by quotation marks, where as HTML lets you omit quotation marks, but only around attribute values which consist of only letters, numbers and these characters: - (dash),. (period), _ (underscore) and : (colon). 1

2 XHTML is case sensitive, where as HTML is not case sensitive. Furthermore XHTML requires that all enumerated attribute values be lower case. 4. Why use XHTML? XHTML's more strict syntax rules has many benefits. By adhering to a more consistent, well structured format, your webpages can be easily parsed and processed by software applications. It also makes your website more easy to maintain, edit, convert and format in the long run. Alternate ways of accessing the Internet are constantly being introduced. The XHTML family is designed with general user agent interoperability in mind, such as mobile devices, new Web browser software, etc. 5. Write the General format for the XHTML Structure <html xmlns=" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /xhtml1- transitional.dtd"> <?xml version="1.0" encoding="utf-8"?>. (Insert the page's head information here...) (Insert the page's body content here...) All XHTML pages begin with a DOCTYPE declaration to specify what version of XHTML you are using. 2

3 The DOCTYPE (document type) tells browsers what type of information to expect in the page, which in turn, tells it how to render the page. The DOCTYPE information is also used byxhtml validators to configure the process by which it verifies the syntax of your Web pages. Creating the XHTML element Immediately after the opening <html> element, type the tag. Insert the contents of the section - we'll discuss this shortly. Type to close the element. Creating the XHTML element Under the closing tag, open the element. Insert the contents of the Type to close the body tag. 6. List out the Important XHTML rules. 7. How to implement the Comments line in XHTML? 3

4 8. Explain the Headers. The XHTML provides six headers, called header elements, for specifying the relative importance of information. Header element h1 is considered the most significant header and it typically rendered in a larger font than the other five headers. Each successive header element is typically rendered in a progressively smaller font. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>heading Tag</title> <h1>department of CSE</h1> <h2>department of CSE</h2> <h3>department of CSE</h3> <h4>department of CSE</h4> <h5>department of CSE</h5> <h6>department of CSE</h6> Output: 4

5 9. Explain the Linking in XHTML. An important feature for the XHTML is the Hyper Link, which references to the other resources, such as XHTML documents and images. In XHTML, both text and images can act as hyperlinks. Web browsers typically underline text hyperlinks and color their text blue by default, so that users can distinguish hyperlinks from plain text. Text HyperLinks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>this is the Text Hyper Link</title> <h1>here are my favorite sites</h1> <p><strong>click a name to go to that page.</strong></p> <a href="file:///c:/documents and settings/sakthiccet08/desktop/xhtml.html">xhtml</a> Output: 5

6 Image HyperLinks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>redirecting a Request to Another Site</title> <h1>here are my favorite sites</h1> <p><strong>click a Image to go to that page.</strong></p> <a href="file:///c:/documents and settings/sakthiccet08/desktop/xhtml.html"> <img src="file:///c:/documents and settings/sakthiccet08/desktop/22.gif"></a> 6

7 10. Explain the <img> tag in XHTML In most Web pages contain both text and images. In fact, images are an equal, if not essential, part of Web page design. The three most popular image formats used by web developers are Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG) and Portable Network Graphics (PNG). Users can create images using specialize pieces of software, such as Adobe Photoshop Elements and Macromedia Fireworks. Images may also be acquired from various Web sites, Such as the Yahoo! Picture Gallery. In the Web page use an img element to insert an image in the document. The image files s location is specified with the img element s src attribute. In his case, the image is located in the same directory as this XHTML document, so only the image s file name is required. Optional attributes width and height specify the image s width and height, respectively. The document author can scale an image by increasing or decreasing the values of the image width and height attributes. If these attributes are omitted, 7

the browser uses the image s actual width and height. Images are measures in pixels, which represent dots of color on the screen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.

8 the browser uses the image s actual width and height. Images are measures in pixels, which represent dots of color on the screen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>image Element in XHTML</title> <h1>this is the Images</h1> <img src="file:///c:/documents and settings/sakthiccet08/desktop/22.gif" height=300 width=300 hspace=100 vspace=100 alt="image not Displayed"> Output: 8

9 11. Explain the Unordered list and Nested Ordered list forms. List may be nested to represent hierarchical relationships, as in an outline format. The ordered list element ol creates a list in which each item begins with a number. A web browser indents each nested list to indicate a hierarchical relationship. Items in an ordered list are enumerated one, two, and three and so on. Nested ordered lists are enumerated in the same manner. The items in the outermost unordered list are preceded by discs. List items nested inside the unordered list are preceded by circles. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>unordered List and Ordered List</title> <h1>this is the Unordered and Ordered List in the Forms</h1> <ul> <li>xhtml <ol type="a"> <li>headers</li> <li>linking</li> <li>images</li> </ol> </li> <li>servlet <ol type="i"> <li>intrduction</li> <li>servlet Architecture</li> <li>servlet Life Cycle</li> </ol> </li> 9

</ul> Output: 12. Explain the XHTML Tables and formatting Tables are frequently used to organize data into rows and columns. Table are defined with the table element.

10 </ul> Output: 12. Explain the XHTML Tables and formatting Tables are frequently used to organize data into rows and columns. Table are defined with the table element. The table element that has several attributes. The border attribute specifies the table s border width in pixels. To create a table without a border, set border to 0. A table has three distinct sections head, body and foot. The head section is defined with a thead element, which contains header information such as column names. Each tr element defines an individual table row. The column in the head section is defined with th elements. Most browsers center text formatted by th elements and display them in bold. Table header elements are nested inside table row elements. The foot section is defined with a tfoot element. The text placed in the footer commonly includes calculation results and footnotes. Like other 10

11 sections, the foot section can contain table rows, and each row can contain columns. The body section, or table body, contains the table s primary data. The table body is defined in a tbody element. In the body, each tr element specifies one row. Data cells contain individual pieces of data and are defined with td(table data) elements within each row. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <title>a simple XHTML table</title> <table border = "1" width = "40%"> <caption><strong>price of Fruit</strong></caption> <thead> <tr> <th>fruit</th> <th>price</th> </tr> </thead> <tfoot> <tr> <th>total</th> <th>$3.75</th> </tr> </tfoot> <tbody> <tr> <td>apple</td> <td>$0.25</td> 11

12 </tr> <tr> </tbody> </table> <tr> </tr> </tr> <tr> </tr> <td>orange</td> <td>$0.50</td> <td>banana</td> <td>$1.00</td> <td>pineapple</td> <td>$2.00</td> Output 12

13 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <title>internet and WWW How to Program - Tables</title> <h1>table Example Page</h1> <table border = "1"> <caption>here is a more complex sample table.</caption> <colgroup> <col align = "right" span = "1" /> </colgroup> <thead> <tr> <th rowspan = "2"> <img src = "file:///c:/documents and settings/sakthiccet08/desktop/22.gif" width = "205" height = "167" alt = "Picture of a camel" /> </th> <th colspan = "4" valign = "top"> <h1>camelid comparison</h1><br /> <p>approximate as of 9/2002</p> </th> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>indigenous region</th> <th>spits?</th> <th>produces Wool?</th> </tr> </thead> 13

14 <tbody> <tr> </tr> <tr> </tr> </tbody> </table> <th>camels (bactrian)</th> <td>2</td> <td>africa/asia</td> <td>yes</td> <td>yes</td> <th>llamas</th> <td>1</td> <td>andes Mountains</td> <td>yes</td> <td>yes</td> Output: 14

15 13. What is a forms in XHTML? When browsing Web sites, users often need to provide such information as search keywords, addresses and Zip codes. XHTML provides a mechanism, called a form, for collecting such data from a user. 14. Explain the forms in XHTML Data that users enter on a Web page normally is sent to a Web server that provides access to a site s resources. These resources are located either on the same machine as the Web server or on a machine that the Web server can access through the network. When a browser requests a Web page or a file that is located on a server, the server processes the request and returns the requested resource. A request contains the name and path of the desired resource and the method of communication. Sends the form data to the Web server, which passes the form data to a CGI script written in Perl, C or some other language. The script processes the data received from the Web server and typically returns information to the Web browser. If the form is submitted (by clicking Submit your Entries) an error occurs because we have not yet configures the required server side functionality. Forms can contain visual and nonvisual components. Visual components include clickable buttons and other graphical user interface components with which users interact. Non Visual components, called hidden inputs, store any data that the document author specifies, such as address and XHTML document file names that act as links. Attribute method specifies how the form s data is sent to the Web server. <? xml version = "1.0"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <title>creating Registration Form using XHTML Forms</title> 15

16 <center><font face="arial black" size="30">registration Form</font></center> <pre> <form name="f1" action="" method="get"> Enter the First Name <input type="text" name="t1" value=""> Enter the Last Name <input type="text" name="t2" value=""> Select the Desgination <select name="s1"> <option>lecture</option> <option>senior Lecturer</option> <option>assitant Professor</option> <option>associate Professor</option> <option>professor</option> </select> Gender <input type="radio" name="r1" value="">male <input type="radio" name="r1" value="">female Address <textarea name="ta"> </textarea> Hoppies <input type="checkbox" name="c1" value="">cricket <input type="checkbox" name="c2" value="">football <input type="checkbox" name="c3" value="">hockey <input type="checkbox" name="c4' value="">volleyball if, any other Details <textarea name="ta1"> </textarea> <input type="submit" name="s22" value="submit"> <input type="reset" name="r22" value="reset"> 16

17 15. Explain the Nested frameset in XHTML All of the Web pages, ability to link to other pages, but can display only one page at a time. Frames allow a Web developer to display more than one XHTML document in the browser simultaneously. A document that defines a frameset normally consists of an html element that contains a head element and a frameset element, the <frameset> tag informs the browser that the page contains frames. Attribute cols specifies the frameset s columns layout. The value of cols gives the width of each frame, either in pixels or as a percentage of the browser width, <? xml version = "1.0"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html> <title>frames Created</title> 17

18 <frameset rows = "35%,*"> <frame src="file:///z:/sakthiccet08/sakthi Detailsss/Subject Oriented/Internet Programming/java_script/JS_13.html" marginheight="100" marginwidth="100" scorolling="no"> <frameset cols = "50%,50%"> <frameset rows = "50%,50%"> <frame src="file:///z:/sakthiccet08/sakthi Detailsss/Subject Oriented/Internet Programming/java_script/JS_10.html" marginheight="100" marginwidth="100" scorolling="no"> <frame src="file:///z:/sakthiccet08/sakthi Detailsss/Subject Oriented/Internet Programming/java_script/JS_11.html" marginheight="100" marginwidth="100" scorolling="no"> </frameset> <frame src="file:///z:/sakthiccet08/sakthi Detailsss/Subject Oriented/Internet Programming/java_script/JS_12.html" marginheight="100" marginwidth="100" scorolling="no"> </frameset> </frameset> Output: 18

19 16. What is Cascading Style Sheet? Style Sheets are powerful mechanism for adding styles(e.g. fonts, colors, spacing) to Web documents. They enforce standards and uniformity throughout a web site and provide numerous attributes to create dynamic effects. With Style Sheets, text and image formatting properties can be predefined in a single list. Html elements on a web page can then be bound to the style sheet. 17. What are the advantages of Cascading Style Sheet? The advantages of a Style Sheet include the ability to make global changes to all documents from a single location. Style Sheets are said to Cascade when they combine to specify the appearance of a page. 18. How to implement the Cascading Style Sheet in Html? The Style assignment process is accomplished with the <style>...</style> tags. The syntax for making the assignment is simple. The <style> </style> tags are written within the... tags. Syntax: <style type= text/css > tag {attribute:value;attribute:value;attribute:value;} </style> 19. Explain the font attribute in CSS with suitable example. Attributes Values font-family A comma-delimited sequence of font family names (serif, sans serif, cursive) font-style Normal, italic, or oblique font-weight Normal, bold, bolder, lighter, or one of the nine numerical values (100, 200, 300, 400, 500, 600, 700, 800, 900) font-size A term that denotes absolute size (xx-small, x-small, small, medium, large, x- large, xx-large), relative size (larger, smaller), a number(of pixels), percentage (of the parent element s size) 19

20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <style type="text/css"> h1 {font-family:arial black;font-style:normal;fontweight:900;font-size:xx-large} h2 {font-family:times new roman;font-style:italic;fontweight:500;font-size:x-small} </style> <h1>welcome to Chettinad College of Engineering and Technology</h1> <h2>department of Computer Science and Engineering</h2> Output: 20

21 20. Explain the Color and Background Attributes with suitable example. Attributes Values color Sets an element s text-color background-color Specifies the color in an element s background background-image Sets the background image background-repeat With a background image specified, sets up how the image repeats throughout the page. Repeat-x (repeats horizontally), repeat-y (repeats vertically), repeat (both), no-repeat <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <style type="text/css"> body {color:#ff00ff;background-color:#00ff00;backgroundimage:url("file:///c:/documents and settings/administrator/desktop/22.gif");background-repeat:repeat-y} h1 {color:red;background-color:blue:backgroundimage:url("file:///c:/documents and settings/administrator/desktop/22.gif");background-repeat:repeat-x} h2 {color:rgb(0,0,255);backgroundcolor:rgb(aa,bb,cc);background-image:url("file:///c:/documents and settings/administrator/desktop/22.gif");background-repeat:repeat} </style> <h1>welcome to Chettinad College of Engineering and Technology</h1> <h2>department of Computer Science and Engineering</h2> <h3>association of Computer Science and Engineering</h3> 21

21. Explain the Text Attributes with suitable examples Attributes Values text-decoration Adds decoration to an element s text None, underline, overline, line-through, blink vertical-align Determines

22 21. Explain the Text Attributes with suitable examples Attributes Values text-decoration Adds decoration to an element s text None, underline, overline, line-through, blink vertical-align Determines an element s vertical position Baseline, sub, super, top, text-top, middle, bottom, text-bottom, also percentages of the element s height text-transform Applies a transformation to the text Capitalize(puts the text into initial caps), uppercase, lowercase or none text-align Aligns text within an element Left, right, center, or justify text-indent Indents the first line of text A percentage of the element s width, or a length <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 22

23 <style type="text/css"> h1 h2 h3 {text-decoration:line-through;texttransform:capitalize;text-indent:400} {text-decoration:underline;text-transform:uppercase;textalign:center} {text-decoration:overline;text-transform:lowercase:textalign:right} size {font-size:xx-large} super {vertical-align:super;text-align:center} sub {vertical-align:sub;text-align:center} </style> <h1>welcome to Chettinad College of Engineering and Technology</h1> <h2>department of Computer Science and Engineering</h2> <h3>association of computer science and engineering</h3> <size>(x+y)<super>2</super> = X<super>2</super> + Y<super>2</super> + 2XY</size><br> <size>h<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O</size> 23

24 Output: 22. Explain the Border Attributes in CSS with suitable example. Attributes Values border-style Solid, double, groove, ridge, inset, outset border-color A color name or color code border-width Thin, medium, think, or length border-top-width Thin, medium, think, or length border-bottom-width Thin, medium, think, or length border-left-width Thin, medium, think, or length border-right-width Thin, medium, think, or length border-top Specifies width, color and style border-bottom Specifies width, color and style border-left Specifies width, color and style border-right Specifies width, color and style border Sets all the properties at once <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 24

25 <style type="text/css"> img {border-top-width:thin;border-style:double} image1 {border-style:solid} image2 {border-style:double} image3 {border-style:groove} image4 {border-style:ridge} image5 {border-style:inset} image6 {border-style:outset} </style> <img src="file:///c:/documents and settings/administrator/desktop/22.gif"> <image1><img src="file:///c:/documents and settings/administrator/desktop/22.gif"></image1> <image2><img src="file:///c:/documents and settings/administrator/desktop/22.gif"></image2> <image3><img src="file:///c:/documents and settings/administrator/desktop/22.gif"></image3> <image4><img src="file:///c:/documents and settings/administrator/desktop/22.gif"></image4> <image5><img src="file:///c:/documents and settings/administrator/desktop/22.gif"></image5> <image6><img src="file:///c:/documents and settings/administrator/desktop/22.gif"></image6> 25

26 Output: 23. Explain the Margin Attributes with suitable examples Attributes Values margin-top Percent, length or auto margin-bottom Percent, length or auto margin-left Percent, length or auto margin-right Percent, length or auto margin Percent, length or auto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <style type="text/css"> body {margin-top:25%;margin-bottom:25%;marginleft:25%;margin-right:25%} </style> 26

27 Welcome to Chettinad College of Engineering and Technology Implementing Normal Attribute Output for the after Implementing Margin Attribute 27

28 24. Explain the List attribute for CSS with suitable example. Attributes Values list-style Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <style type="text/css"> ul {list-style:square} ol {list-style:lower-roman} </style> <ul> <li>xhtml <ol> <li>header</li> <li>linking</li> <li>image</li> <li>table</li> </ol> </li> <li>servlets <ol> <li>introduction</li> <li>architecture</li> <li>life Cycle</li> <li>doget() and dopost()</li> </ol> </li> 28

29 <ul> Output: 25. Explain the Cascading style sheet with Class and <span> </span> Tag. The control over page design that style sheet gives is exciting, but can be heavy handed. Its great to be able to change every paragraph, but what if only one paragraph, or a few paragraphs need to be changed? A particular paragraph may need to look different from other paragraphs. It s probably because the content of the paragraph is in some way different from other paragraphs on the page. Think of a question and answer page. Questions in bold, while the answers are in plain text. The appearance of a paragraph is a function of the content of the paragraph. Style sheets support classes or sets of style changes for a document. A class can be defined to change the style in a specific way for any element it is applied to, and classes can be used to identify logical sets of style changes that might be different for different HTML elements. The style changes can be applied directly to each HTML element or applied to part of a document with 29

the <span> </span> tags. If any element is made a member of a class by inserting Class = ClassName into its opening tab, it conforms to that class s specification. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

30 the <span> </span> tags. If any element is made a member of a class by inserting Class = ClassName into its opening tab, it conforms to that class s specification. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <style type="text/css"> p {font-family:arial black}.question {font-size:x-large}.answer {font-size:medium;font-style:italic}.big {font-size:xx-large;font-weight:900} </style> <p class="question">what is a Computer</p> <p class="answer">computer is a <span class="big">electronic Machine</span></p> Output: 30

31 26. List out the different types of Cascading Style Sheet(CSS). 1. Inline Style Sheet 2. Internal Style Sheet or Embedded Style 3. Multiple Style Sheet 4. External Style Sheet 5. User Style Sheet 27. Explain the External Style Sheets with suitable example. External Style Sheets are composed of standard text, which consists of a series of entries each composed of a selector and a declaration. The selector indicates the HTML element(s) affected by the properties in the declaration. These external style sheets are then saves as a file with extension.css, which can be linked, to a web page via the <link> tag. <link rel = stylesheet href = stylesheet file name > Code for mystyle.css h1 {text-decoration:underline;texttransform:uppercase;text-align:center} h2 {text-decoration:overline;text-transform:lowercase:textalign:right} h3 {text-decoration:line-through;texttransform:capitalize;text-indent:400} size {font-size:xx-large} super {vertical-align:super;text-align:center} sub {vertical-align:sub;text-align:center} Code for the HTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <link rel = stylesheet href = mystyle.css > 31

32 <h1>welcome to Chettinad College of Engineering and Technology</h1> <h2>department of Computer Science and Engineering</h2> <h3>association of computer science and engineering</h3> <size>(x+y)<super>2</super> = X<super>2</super> + Y<super>2</super> + 2XY</size><br> <size>h<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O</size> Output: 28. Explain the Internal Style Sheet or Embedded Style Sheet with suitable example. The Style assignment process is accomplished with the <style> </style> tags. The syntax for making the assignment is simple. Between the <style> </style> written within the tags. This is called Internal Style Sheet or Embedded Style Sheet. <style typ = text/css > tag {attribute:value;attribute:value;... } 32

33 ... </style> Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <style type="text/css"> h1 {font-family:arial black;font-style:normal;fontweight:900;font-size:xx-large} h2 {font-family:times new roman;font-style:italic;fontweight:500;font-size:x-small} </style> <h1>welcome to Chettinad College of Engineering and Technology</h1> <h2>department of Computer Science and Engineering</h2> Output: 33

34 29. Explain the Inline Style Sheet with suitable example. The Style information directly through a HTML tags. This is called Inline Style Sheet. Example: <h1 style = text-align:center>inline Style Sheet</h1> Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <title>inline Style Sheets</title> <h1 style=font-family:arial black;font-style:normal;fontweight:900;font-size:xx-large>welcome to Chettinad College of Engineering and Technology</h1> <h2 style=font-family:times new roman;font-style:italic;fontweight:500;font-size:x-small>department of Computer Science and Engineering</h2> Output: 34

35 Code for the HTML page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "  <link rel = stylesheet href = mystyle.css > 30. Explain the Multiple Style Sheet with suitable example Combination of Internal Style Sheet or Embedded Style Sheet, Inline Style Sheet, External Style Sheet and User Style Sheet are the single HTML file. This is called Multiple Style Sheet. Code for mystyle.css  h1 {text-decoration:underline;texttransform:uppercase;text-align:center}  <style type="text/css"> h2 {text-decoration:overline;text-transform:lowercase:textalign:right}  super {vertical-align:super;text-align:center} sub {vertical-align:sub;text-align:center} </style> <h1>welcome to Chettinad College of Engineering and Technology</h1> <h2>department of Computer Science and Engineering</h2> 35

<! -- This is Inline Style Sheet --> <h3 style=text-decoration: line-through; texttransform: capitalize;text-indent:400>association of computer science and engineering</h3> <!

36 <! -- This is Inline Style Sheet --> <h3 style=text-decoration: line-through; texttransform: capitalize;text-indent:400>association of computer science and engineering</h3>  <size>(x+y)<super>2</super> = X<super>2</super> + Y<super>2</super> + 2XY</size><br> <size>h<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O</size> Output: 31. Explain the User Style Sheet with suitable example Users can define their own user style sheets to format pages bases on their preferences. For example, people with visual impairments may want to increase the page s text size. Webpage authors need to be careful not to inadvertently override user preferences with defined styles. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 36

37 <style type="text/css">  super {vertical-align:super;text-align:center} sub {vertical-align:sub;text-align:center} </style>  (X+Y)<super>2</super> = X<super>2</super> + Y<super>2</super> + 2XY<br> H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O Output: 37

IT350 Web and Internet Programming. XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition)

IT350 Web and Internet Programming XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition) 4.10 Tables 1 Table Basics table element border, summary, caption