HTML EXERCISE
HTML ACTIVITY
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<!-- css code -->
<style type="text/css">
body{
background-color: none;
width:100%px;
}
</style>
</head>
<body>
<!-- Simple Work -->
<p>Hello World</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Activity 2</title>
<!-- css code -->
<style type="text/css">
body{
margin-top: 20px;
}
/*table css code*/
table{
border:1px solid gray;
width: 750px;
margin-left: 330px;
margin-right: 100px;
margin-top: 2px;
}
tr,th,td{
border:1px solid gray;
}
</style>
</head>
<body>
<a><b><center>Specification Table with Hours and Marks</center></b></a>
<!-- table code -->
<table>
<tr>
<th rowspan="2">Unit No.</th>
<th rowspan="2">Unit Title</th>
<th rowspan="2">Teaching Hours</th>
<th colspan="4">Distribution of Theory Marks</th>
</tr>
<tr>
<th>R Level</th>
<th>U Level</th>
<th>A Level</th>
<th>Total Marks</th>
</tr>
<tr>
<th>I</th>
<td>Introduction to Internet Technology</td>
<th>2</th>
<th>4</th>
<th>4</th>
<th>0</th>
<th>8</th>
</tr>
<tr>
<th>II</th>
<td>Basics of HTML & CSS</td>
<th>6</th>
<th>0</th>
<th>2</th>
<th>6</th>
<th>8</th>
</tr>
<tr>
<th>III</th>
<td>Active Server Pages 3.0</td>
<th>6</th>
<th>4</th>
<th>8</th>
<th>0</th>
<th>12</th>
</tr>
<tr>
<th>IV</th>
<td>Server Side Coding with VBScript and XML</td>
<th>8</th>
<th>2</th>
<th>4</th>
<th>6</th>
<th>14</th>
</tr>
<tr>
<th>V</th>
<td>ASP Objects & Components</td>
<th>10</th>
<th>4</th>
<th>4</th>
<th>6</th>
<th>14</th>
</tr>
<tr>
<th>VI</th>
<td>Accessing database with ASP & ADO</td>
<th>10</th>
<th>4</th>
<th>4</th>
<th>6</th>
<th>14</th>
</tr>
<tr>
<td></td>
<th>Total</th>
<th>42</th>
<th>18</th>
<th>26</th>
<th>26</th>
<th>70</th>
</tr>
</table>
</body>
</html>
Create a static web page which defines all text formatting tags of HTML in tabular
format
<!DOCTYPE html>
<html>
<head>
<title>Activity 3</title>
<style type="text/css">
body{
margin-top: 20px;
}
a{
color: red;
}
/*table css code*/
table{
border:1px solid gray;
width: 300px;
margin-left: 470px;
margin-right: 100px;
margin-top: 2px;
}
tr,th,td{
border:1px solid gray;
}
</style>
</head>
<body>
<a><b><center>Text Formatting Tags</center></b></a>
<table>
<tr>
<th><b>HTML Tag</b></th>
<th><b>Output</b></th>
</tr>
<tr>
<td>normal text</td>
<td>hello world</td>
</tr>
<tr>
<td>Font & its attributes</td>
<td style="font-size: 20px; color: blue;">hello world</td>
</tr>
<tr>
<td>< b ></td>
<td><b>Bold</b></td>
</tr>
<tr>
<td>< I ></td>
<td><i>Italic</i></td>
</tr>
<tr>
<td>< U ></td>
<td><u>Underline</u></td>
</tr>
<tr>
<td>< EM ></td>
<td><em>Emphasis</em></td>
</tr>
<tr>
<td>< STRONG ></td>
<td><strong>STRONG</strong></td>
</tr>
<tr>
<td>< TELETYPE ></td>
<td><tt>TELETYPE</tt></td>
</tr>
<tr>
<td>< CITE ></td>
<td><cite>Citation</cite></td>
</tr>
<tr>
<td>< STRIKE ></td>
<td><s>strike through text</s></td>
</tr>
<tr>
<td>< BIG ></td>
<td><big>text in a big font</big></td>
</tr>
<tr>
<td>< SMALL ></td>
<td><small>text in a small font</small></td>
</tr>
<tr>
<td>< SUB ></td>
<td>a<sub>b</sub></td>
</tr>
<tr>
<td>< SUP ></td>
<td>a<sup>b</sup></td>
</tr>
</table>
</body>
</html>
Create webpage using list tags of HTML
<!DOCTYPE html>
<html>
<head>
<title>Activity 4</title>
<!-- css code -->
<style type="text/css">
/*css code for body structure*/
body{
margin-top: 20px;
width: 690px;
margin-left: 300px;
}
h3{
margin-bottom: -5px;
}
/*css code for unordered list*/
.abc{
list-style-type: none;
}
</style>
</head>
<body>
<h3>HTML List: Ordered,Unodered & Definition List</h3>
<hr>
<p>Following is the list of proposed student activities</p>
<!-- Ordered list -->
<ol>
<li>Develop programs related with unit vice topics in computer laboratory.</li>
<li>Develop any module of to be useful in real life application.</li>
<li>Multimedia presentation of module developed by students.</li>
</ol>
<hr>
<p>List of Software/Learning Websites</p>
<!-- Urdered list -->
<ul>
<li><a style="color: black" href="">ASP Tutorial - W3Schools</a></li>
<li style="list-style-type: none;"><a href="">www.w3school.com/asp</a></li>
<li><a style="color: black" href="">Classic ASP Tutorials & Articles - Web Wiz</a></li>
<li class="abc"><a href="">www.webwiz.co.uk - Knowledgebase</a></li>
<li><a style="color: black" href="">HTML Tutorial - W3Schools</a></li>
<li class="abc"><a href="">www.w3school.com/html</a></li>
<li><a style="color: black" href="">CSS Tutorial</a></li>
<li class="abc"><a href="">www.csstutorial.net</a></li>
<li><a style="color: black" href="">VBScrip Tutorial - Tutorial Point</a></li>
<li class="abc"><a href="">www.tutorialspoint.com/vbscript/index.htm</a></li>
<li><a style="color: black" href="">ADO Tutorial - W3Schools</a></li>
<li class="abc"><a href="">www.w3schools.com/ADO/default.asp</a></li>
</ul>
<hr>
<!-- Definition list -->
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>
</body>
</html>
Create webpage to include image using HTML tag
<!DOCTYPE html>
<html>
<head>
<title>Activity 5</title>
</head>
<body>
<!-- Case-1 -->
<img src="pbte logo.gif" width="150px;" height="150px;" alt="pbte-logo">
<br>
<!-- Case-2 -->
<img src="images\pbte logo.gif" width="150px;" height="150px;" alt="images\pbte-logo">
<br>
<!-- Case 3 -->
<img src="D:\E-Rozgar (Course Training Lectures)\1. Activities\pbte logo.gif" width="150px;" height="150px;" alt="images\pbte-logo"><br>
<!-- Case 4 -->
<img src="https://pbte.edu.pk/images/contact/pbte.png" width="150px;" height="150px;" alt="images\pbte-logo">
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
Thanks For Uploading
ReplyDelete