exercises

S.SuganReg.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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> color survey </title> </head> <body> <h3>COLOR SURVEY</h3> <form method="post" action="/cgi-bin/formmail"> <p><Strong>Vote for your Favourite color</strong></p> <p><input name="colors" type="radio"/>Red</p> <p><input name="colors" type="radio"/>Blue</p> <p><input name="colors" type="radio" checked="checked"/>Yellow</p> <p><input name="colors" type="radio" />Green</p> <p><input name="colors" type="radio" />Black</p> <input type="Submit" value="vote the favorite color"/> <table border="1" cellspacing="10" summary="color survey table"> <caption><h4>Survey of colors</h4></caption> <thead> <tr> <th>S.no</th> <th>Color</th> <th>Percentage</th> </tr> </thead> <tbody> <tr><td>1.</td> <td><font color="red">Red</font></td> <td><font color="red">25%</font></td> </tr>


<tr><td>2.</td> <td><font color="blue">Blue</font></td> <td><font color="blue">20%</font></td></tr> <tr> <td>3.</td> <td><font color="orange">Orange</font></td> <td><font color="orange">15%</font></td></tr> <tr><td>4.</td> <td><font color="green">Green</font></td> <td><font color="green">30%</font></td> </tr> <tr><td>5.</td> <td><font color="black">Black</font></td> <td><font color="black">10%</font></td> </tr> </tbody> </table> </form> </body></html>


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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS1 </title> <style type="text/css"> .css1 { font-size: 1.5em; color: red; background: white; } </style> </head> <body> <p class="css1"> write a css rule that makes all text 1.5 times larger than the base font of the system and colors the text red... </p> <p> write a css rule that makes all text 1.5 times larger than the base font of the system and colors the text red...</p> </body></html>


3. Write a CSS rule that removes the underline from all links inside list items (li) and shifts them left by 3 ems.

Code:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS2 </title> <style type="text/css"> li { margin-left: -3em; } li a { text-decoration: none;} </style> </head> <body> <p>write a css rule that removes the underlines from all links inside list items and shift all list items left by 3ems <p>Three types of CSS types are:</p> <li><a href="a.html">Inline Styles</a></li> <li><a href="b.html">Embedded Stylesheets</a></li> <li><a href="c.html">External Stylesheets</a></li> </p> </body></html>


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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS3 </title> <style type="text/css"> body { background: url('b.jpg') center repeat-x fixed; } </style> <body> <p> 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.</p> </body></html>


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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS4 </title> <style type="text/css"> h1, h2 { padding: 0.5ems; border-style: groove; margin: 0.5ems } </style> <body> <h1>CSS STYLES</h1> <h2>Inline styles</h2> <p>Inline styles are CSS styles that are applied to one element using the style attribute.</p> <h2>Embedded styleSheets</h2> <p>The STYLE element embeds a style sheet in the document. Any number of STYLE elements may be contained in the HEAD of a document.</p> <h2>External stylesheets</h2> <p>The external style sheets is used with the LINK element.</p> </body></html>


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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS5 </title> <style> .GreenMove { color:Green; position:relative; top:25px;


left:15px; } </style> <body> <p> <br/>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... </p> <div class="GreenMove"> 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... </div> </body></html>

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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head>


<title> CSS6 </title> <style> h1 { color:blue; } a { color:blue; text-decoration:none; } a:hover { color:yellow; } </style> </head> <body> <h1>CSS Styles</h1> <p>There are three styles in css</p> <li><a href="a.html">Inline Styles</a></li> <li><a href="b.html">Embedded stylesheets</a></li> <li><a href="c.html">External Stylesheets</a></li> </body></html>


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:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS7 </title> <style> 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 } </style> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul>

<li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li>

</ul> </li> <li>Rice</li> <li>Potatoes</li> </ul> <p><a href = "http://www.food.com">Go to the Grocery store</a></p> </body></html>


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


9. Box Model Example:

Code:

<?xml version="1.0"?><!DOCTYPE html PUBLIC "~//w3c//DTDXHTML1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Box Model </title> <style type="text/css"> .box { width: 500px; height: 500px; background: url('b.jpg'); margin: 20px; padding: 20px; border: solid gray 20px; } </style> <body> <div class="box"><p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> </div> </body>


</html>

exercises

Documents

css rule

left s

underline color

em color

sugan reg

color percentage

red backgroundcolor

favorite color