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:
<?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>
S.Sugan
Reg.No:08IT109
<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>
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:
<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>
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:
<head>
<title>
CSS2
</title>
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>
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:
<head>
<title>
CSS3
</title>
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>
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:
<head>
<title>
CSS4
</title>
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>
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:
<head>
<title>
CSS5
</title>
<style>
.GreenMove
{
color:Green;
position:relative;
top:25px;
S.Sugan
Reg.No:08IT109
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:
<head>
S.Sugan
Reg.No:08IT109
<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>
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:
<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>
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:
<head>
<title>
Box Model
</title>
.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>
S.Sugan
Reg.No:08IT109
</html>

Exercises

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Exercises

Transféré par

Droits d'auteur :

Formats disponibles

S.

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:

Vous aimerez peut-être aussi