Exercises

S.Sugan Reg.No:08IT109

Exercises: 1. Write an XHTML document that shows the results of a color survey. The

document should contain a form with radio buttons that allows users to vote for their favorite color. One of the colors should be selected as a default. The document should also contain a table showing various colors and the corresponding percentage of votes for each color. (Each row should be displayed in the color to which it is referring.) Use attributes to format width, border and cell spacing for the table. Code: color survey COLOR SURVEY Vote for your Favourite color Red Blue Yellow Green Black Survey of colors S.no Color Percentage 1. Red 25% 2.

S.Sugan Reg.No:08IT109 Blue 20% 3. Orange 15% 4. Green 30% 5. Black 10%

S.Sugan Reg.No:08IT109

2. Write a CSS rule that makes all text 1.5 times larger than the base font of the system and colors the text red. Code: CSS1 .css1 { font-size: 1.5em; color: red; background: white; } write a css rule that makes all text 1.5 times larger than the base font of the system and colors the text red... write a css rule that makes all text 1.5 times larger than the base font of the system and colors the text red...

S.Sugan Reg.No:08IT109

3. Write a CSS rule that removes the underline from all links inside list items (li) and shifts them left by 3 ems. Code: CSS2 li { margin-left: -3em; } li a { text-decoration: none;} write a css rule that removes the underlines from all links inside list items and shift all list items left by 3ems Three types of CSS types are: Inline Styles Embedded Stylesheets External Stylesheets

S.Sugan Reg.No:08IT109

4. Write a CSS rule that places a background image halfway down the page, tiling it horizontally.The image should remain in place when the user scrolls up or down. Code: CSS3 body { background: url('b.jpg') center repeat-x fixed; } Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.

S.Sugan Reg.No:08IT109

5. Write a CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a grooved border style and a margin of 0.5 ems. Code: CSS4 h1, h2 { padding: 0.5ems; border-style: groove; margin: 0.5ems } CSS STYLES Inline styles Inline styles are CSS styles that are applied to one element using the style attribute. Embedded styleSheets The STYLE element embeds a style sheet in the document. Any number of STYLE elements may be contained in the HEAD of a document. External stylesheets The external style sheets is used with the LINK element.

S.Sugan Reg.No:08IT109

6. Write a CSS rule that changes the color of all elements containing attribute class ="greenMove" to green and shifts them down 25 pixels and right 15 pixels. Code: CSS5 .GreenMove { color:Green; position:relative; top:25px;

S.Sugan Reg.No:08IT109 left:15px; } write a css rule that changes the color of all elements containing attribute class="greenmove" to green and shifts them down 25 pixels &right 15pixels... write a css rule that changes the color of all elements containing attribute class="greenmove" to green and shifts them down 25 pixels &right 15pixels...

7. Add an embedded style sheet to the XHTML document of Fig. 4.5. This style sheet should contain a rule that displays h1 elements in blue. In addition, create a rule that displays all links in blue without underlining them. When the mouse hovers over a link, change the link’s background color to yellow. Code:

S.Sugan Reg.No:08IT109 CSS6 h1 { color:blue; } a { color:blue; text-decoration:none; } a:hover { color:yellow; } CSS Styles There are three styles in css Inline Styles Embedded stylesheets External Stylesheets

S.Sugan Reg.No:08IT109

8. Modify the style sheet of Fig. 6.4 by changing a:hover to a:hver and margin-left to margin left. Validate the style sheet using the CSS Validator. What happens? Code: CSS7 a { text-decoration: none } a:hver { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin left: .5cm } Shopping list for Monday: Milk Bread White bread Rye bread Whole wheat bread Rice Potatoes Go to the Grocery store

S.Sugan Reg.No:08IT109 Before modification of a:hover to a:hver and margin-left to margin left

After modification of a:hover to a:hver and margin-left to margin left

S.Sugan Reg.No:08IT109

9. Box Model Example: Code: Box Model .box { width: 500px; height: 500px; background: url('b.jpg'); margin: 20px; padding: 20px; border: solid gray 20px; } Blue Hills Reservation (commonly referred to by area residents as "the Blue Hills") is a 7,000 acres (2,800 ha) park primarily used for hiking and mountain biking. It is also used for both downhill skiing and cross country skiing during winter, and rock climbing (in certain areas) and horseback riding during permissible months. The park's varied terrain and scenic views, in combination with its proximity to Boston, make it a popular destination for hikers from the metropolitan area. The highest point within the reservation, Great Blue Hill in Milton, is the site of a historic weather observatory whose tower offers views of Boston and the surrounding area. Between approximately December and March, Great Blue Hill offers a ski area. Houghton's Pond and nearby Ponkapoag Pond are popular swimming and recreation areas during the summer. The ecology of the Blue Hills is diverse and includes marshes, swamps, upland and bottomland forests, meadows, and an Atlantic White Cedar bog. A number of endangered species in Massachusetts, such as the Timber Rattlesnake, reside in the reservation. Other flora and fauna include dogwood, lady's slipper, coyotes, turkey vultures, and copperheads.

S.Sugan Reg.No:08IT109