Scribd
Upload
17 views7 pages

CS 2205 Written Assignment Unit 3

CS

Uploaded by

Zin Nwe Kyaw Kyaw Myo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views7 pages

CS 2205 Written Assignment Unit 3

CS

Uploaded by

Zin Nwe Kyaw Kyaw Myo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Written Assignment Unit 3

University of the People

CS 2205

Advanced HTML

December 04, 2024

Instructor: Madhukeshwar Khanapur


1. Display Numbers 1-10 in Different Colors

<!DOCTYPE html>
<html lang="en">
<head>
<title>Numbers 1-10 in Different Colors</title>
</head>
<body>
<p style="color:red;">1</p>
<p style="color:orange;">2</p>
<p style="color:yellow;">3</p>
<p style="color:green;">4</p>
<p style="color:blue;">5</p>
<p style="color:indigo;">6</p>
<p style="color:violet;">7</p>
<p style="color:brown;">8</p>
<p style="color:purple;">9</p>
<p style="color:black;">10</p>
</body>
</html>

2. Display Squares of Numbers 1-10

<!DOCTYPE html>
<html lang="en">
<head>
<title>Squares of Numbers 1-10</title>
</head>
<body>
<p>1<sup>2</sup> = 1</p>
<p>2<sup>2</sup> = 4</p>
<p>3<sup>2</sup> = 9</p>
<p>4<sup>2</sup> = 16</p>
<p>5<sup>2</sup> = 25</p>
<p>6<sup>2</sup> = 36</p>
<p>7<sup>2</sup> = 49</p>
<p>8<sup>2</sup> = 64</p>
<p>9<sup>2</sup> = 81</p>
<p>10<sup>2</sup> = 100</p>
</body>
</html>

3. Ordered and Unordered Lists


<!DOCTYPE html>
<html lang="en">
<head>
<title>Lists</title>
</head>
<body>
<h1>My Lists</h1>
<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>

4. Display Two Addresses

<!DOCTYPE html>
<html lang="en">
<head>
<title>Addresses</title>
</head>
<body>
<div style="position: absolute; top: 10px; left: 10px;">
<p>Dilbert H.<br>1234 Anim Street<br>P.O. Box 22222</p>
</div>
<div style="margin-top: 100px; text-align: center;">
<p>Someone A. Person<br>5555 Street Avenue<br>Metropolitan, Metropolis
11111</p>
</div>
</body>
</html>

5. Top and Bottom Page Navigation

<!DOCTYPE html>
<html lang="en">
<head>
<title>Top and Bottom Links</title>
</head>
<body>
<a href="#bottom">Go to Bottom</a>
<p style="margin-top: 500px;"></p>
<a id="bottom" href="#top">Go to Top</a>
</body>
</html>

6. Links to Different Websites

<!DOCTYPE html>
<html lang="en">
<head>
<title>External Links</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a><br>
<a href="https://www.facebook.com" target="_blank">Facebook</a><br>
<a href="https://www.twitter.com" target="_blank">Twitter</a><br>
<a href="https://www.youtube.com" target="_blank">YouTube</a>
</body>
</html>

7. Display Five Images

<!DOCTYPE html>
<html lang="en">
<head>
<title>Images with Titles</title>
</head>
<body>
<img src="image1.jpg" alt="Image 1" title="First Image"><br><br>
<img src="image2.jpg" alt="Image 2" title="Second Image"><br><br>
<img src="image3.jpg" alt="Image 3" title="Third Image"><br><br>
<img src="image4.jpg" alt="Image 4" title="Fourth Image"><br><br>
<img src="image5.jpg" alt="Image 5" title="Fifth Image">
</body>
</html>

8. Image with Specific Dimensions and Border

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image with Border</title>
</head>
<body>
<img src="image.jpg" alt="Image" style="border: 2px solid black; width: 200px; height:
200px;">
</body>
</html>

9. Clickable Image Linking to Itself

<!DOCTYPE html>
<html lang="en">
<head>
<title>Clickable Image</title>
</head>
<body>
<a href="image.jpg" target="_blank"><img src="image.jpg" alt="Image" style="width:
200px; height: 200px;"></a>
</body>
</html>

10. Clickable Image Linking to Search Engine

<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Linking to Search Engine</title>
</head>
<body>
<a href="https://www.google.com" target="_blank"><img src="search.jpg" alt="Search
Image"></a>
</body>
</html>

11. Stock Prices Table

<!DOCTYPE html>
<html lang="en">
<head>
<title>Stock Prices</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
th:first-child, td:first-child {
text-align: left;
}
</style>
</head>
<body>
<h1>My Tech Stock Picks</h1>
<table>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Current</th>
<th>52WK High</th>
<th>52WK Low</th>
<th>P/E Ratio</th>
</tr>
<tr>
<td>Microsoft</td>
<td>MSFT</td>
<td>86-3/8</td>
<td>119-15/16</td>
<td>75-1/2</td>
<td>56.09</td>
</tr>
<tr>
<td>Cisco Systems</td>
<td>CSCO</td>
<td>72-1/8</td>
<td>82</td>
<td>24-13/16</td>
<td>400.69</td>
</tr>
<tr>
<td>America Online</td>
<td>AOL</td>
<td>63</td>
<td>95-13/16</td>
<td>38-15/32</td>
<td>350.00</td>
</tr>
<tr>
<td>Qwest Communications</td>
<td>Q</td>
<td>44-7/16</td>
<td>66</td>
<td>25-3/4</td>
<td>74.06</td>
</tr>
<tr>
<td>Dell Computers</td>
<td>DELL</td>
<td>53-59/64</td>
<td>59-11/16</td>
<td>31-3/8</td>
<td>86.97</td>
</tr>
</table>
</body>
</html>

You might also like