<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" href="../styles.css">
<style>
h1 {
font:Georgia, "Times New Roman", Times, serif;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:36px;
border:1px solid grey;
padding:10px;
margin:6px;
color:blue;
}
p.error {
color:red;
}
p#p01 {
color: blue;
}
p#p02 {
color: orange;
}
p#03 {
color:black;
font-family:courier;
font-size:160%;
}
table, td {
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
th{
background-color:red;
text-align: center;
padding: 5px;
border: 2px solid black;
border-collapse: collapse;
}
table#t1 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t1 {
background-color:#f1f1c1;
}
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration:none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color:#6C3;
color:#000;
}
/*a:link {
color: blue;
background-color: transparent;
text-decoration: underline;
}*/
ul#menu li a:visited {
color: green;
background-color: transparent;
text-decoration: none;
}
ul#menu li a:active {
color:#66C;
background-color:#0FF;
text-decoration: underline;
}
.note { font-size:60px;
color:#F00;
}
marquee{
border:solid;
background-color:#F00;
color:#00F;
height:60px;
padding:0px;
}
</style>
</head>
<body style="background-color:white">
<h1 align="center" title="Heading" style="color:green"><q>My <small>First</small> Heading</q></h1>
<marquee><h2>BUKC will remain close till monday.</h2></marquee>
<h2>This is not marked heading <mark> This is marked heading </mark> This is not marked heading</h2>
<h1>My First JavaScript</h1>
<button type="button" onClick="document.getElementById('demo').innerHTML='This is my first Script'">
Click me to display the content.</button>
<p id="demo"></p>
<h1>Script can change the images...!</h1>
<img id="myimage" onClick="change_image()" src="../pics/bulb_off.jpg" height="350" width="200">
<p>Click the image to on/off the bulb.</p>
<script>
function change_image() {
var image = document.getElementById('myimage');
if (image.src.match("../pics/bulb_on.jpg")) {
image.src = "../pics/bulb_off.jpg";
} else {
image.src = "../pics/bulb_on.jpg";
}
}
</script>
<!--<h1>Script can change the images...!</h1>
<img id="myImage" onClick="changeImage()" src="off.png" width="140" height="200">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("on.png")) {
image.src = "off.png";
} else {
image.src = "on.png";
}
}
</script>
-->
<img src="../12.jpg" height="100" width="100">
<p title="Paragraph" style="color:blue"><b>My first paragraph.<br>My first paragraph.<br>My first paragraph.<br>My first paragraph.</b></p>
<hr width="1250">
<a href="http://www.google.com" target="_blank">Google</a>
<pre style="color:red">
<strong>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks</strong>
</pre>
<p id="p02" style="font-family:verdana"><i><q>This is an italic text.</q><br>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks</i>
</p>
<p class="error" style="font-size:25"><em><q>This is an emphasized text</q>.<br>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</em>
</p>
<p style="font-size:35"><b>This is <del>deleted</del> text</b></p>
<p style="font-size:20">The <ins><mark>ins</mark></ins> element or tag represent inserted (added) text.<br>For example:<br>
My favorite <ins>color</ins> is red.<br>"color" is inserted in that text.</p>
<p style="font-size:35"><b>This is <sub>subscripted</sub> text</b></p>
<p style="font-size:35"><b>This is <sup>superscripted</sup> text</b></p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.<br>
The world's leading conservation organization,<br>
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
<p>The <abbr title="World Health Organization"><q>WHO</q></abbr> was founded in 1948.</p>
<table style="width:40%" id="t1">
<caption><h3>Information Table</h3></caption>
<tr>
<!--<th colspan="5"><h3>Information Table</h3></th>-->
</tr>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
<th colspan="2" style="align:left">Telephone</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>123456</td>
<td>798456</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>951456</td>
<td>798357</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
<td>198456</td>
<td>736784</td>
</tr>
</table>
<br>
<h1>My <span class="note">Important</span> Heading</h1>
<table>
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Ordered List with default Numbers</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with uppercase letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with lowercase letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with uppercase romans</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with lowercase romans</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
</dl>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
<ul>
<li>China</li>
<li>Africa</li>
<li>Pakistan</li>
<li>Srilanka</li>
</ul>
</ul>
</li>
<li>Milk</li>
</ul>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="http://www.w3schools.com/html/default.asp">HTML</a></li>
<li><a href="http://www.w3schools.com/css/default.asp">CSS</a></li>
<li><a href="http://www.w3schools.com/js/default.asp">JavaScript</a></li>
<li><a href="http://www.w3schools.com/php/default.asp">PHP</a></li>
</ul>
<address align="center">
Written by Kashif Ali<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
No comments:
Post a Comment