Advanced HTML
Programming Assignment Unit 3
University of the People – UoPeople
CS 2205 - WEB PROGRAMMING 1 - AY2024-T3
Hemant Sharma (Instructor)
February 21, 2024
1
1. Create an HTML document that displays the numbers 1 - 10, each number being
a different color.
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
</head>
<body>
<font color="green">1</font>
<font color="yellow">2</font>
<font color="red">3</font>
<font color="cyan">4</font>
<font color="purple">5</font>
<font color="brown">6</font>
<font color="orange">7</font>
<font color="gold">8</font>
<font color="grey">9</font>
<font color="magenta">10</font>
</body>
</html>
2. Create an HTML document that displays the squares of the numbers 1 - 10.
Each number should be on a separate line, next to it the number 2 superscripted,
an equal sign and the result. (Example: 102 = 100)
<html>
2
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
</head>
1<sup>2</sup> = 1<br />
2<sup>2</sup> = 4<br />
3<sup>2</sup> = 9<br />
4<sup>2</sup> = 16<br />
5<sup>2</sup> = 25<br />
6<sup>2</sup> = 36<br />
7<sup>2</sup> = 49<br />
8<sup>2</sup> = 64<br />
9<sup>2</sup> = 81<br />
10<sup>2</sup> = 100
</body>
</html>
3. Create an HTML document that displays two lists with any information you
want. One list should be an ordered list, the other list should be an unordered list
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<body>
<b>Professional Certificates Achived</b>
<ol>
3
<li>Microsoft Adoption Service Specialist</li>
<li>Designing Microsoft Azure Infrastructure Solutions</li>
<li>Designing and Implementing Microsoft Azure Networking Solutions</li>
</ol>
<b>Samsung Product Types</b>
<ul type="S24 Ultra">
<li>Galaxy S24 Ultra Unlocked | 512GB | Titanium Black</li>
<li>Galaxy S24 Ultra Unlocked | 1TB | Titanium Orange</li>
<li>Galaxy S24 Ultra Unlocked | 512GB | Titanium Yellow</li>
<li>Galaxy S24 Ultra Unlocked | 1TB | Titanium Green</li>
</ul>
</body>
</html>
4. Create an HTML document that displays two addresses in the same format used
on the front of envelopes (senders address in top left corner, receivers address in
the center). Like the following
Dilbert H.
1234 Anim Street
P.O. Box 22222
4
Someone A. Person
5555 Street Avenue
Metrpolitan, Metropolis 11111
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
</head>
<body>
<i>
<address>Dilbert H.<br />
1234 Anim Street<br />
P.O. Box 22222</address>
</i>
<br /><br />
<i> <center>
<address> Someone A. Person <br />
5555 Street Avenue <br />
Metrpolitan, Metropolis 11111</address>
</i></center>
</body>
</html>
5. Create a page with a link at the top of it that when clicked will jump all the way
to the bottom of the page. At the bottom of the page there should be a link to
jump back to the top of the page.
5
<!DOCTYPE>
<html>
<head>
<title>UoPeople Assignment Page</title></head>
<body>
<div id="maincntr">
<nav>
<a href="#" id="home">Welcome</a> <br/>
<a href="#footer">End of Page</a>
</nav>
<article>
<h1>Welcome to the UoPeople Assignment Page</h1>
<h3><strong>Here you will find the outline and aspect requirements for your
assignment</strong></h3><br />
<p><strong>
Create an HTML Document? </p>
</strong>
<p>
Create an HTML document that displays the numbers 1 - 10, each number being a
different color. </p>
<p><strong>
6
Create a Second HTML Document?
</strong>
<p>
Create a second HTML document that displays the squares of the numbers 1 - 10.
Each number should be on a separate line, next to it the number 2 superscripted, an
equal sign and the result. (Example: 102 = 100). </p>
<p><strong>
Create a Third HTML Document?
</strong>
<p>
Create a third HTML document that displays two lists with any information you want.
One list should be an ordered list, the other list should be an unordered list. </p>
<p><strong>
Create a Forth HTML Document?
</strong>
<p>
Create a forth HTML document that displays two addresses in the same format used
on the front of envelopes (senders address in top left corner, receivers address in the
center). Like the following
</p>
<p>
Dilbert H.
7
1234 Anim Street
P.O. Box 22222
</p>
<p>
Someone A. Person
5555 Street Avenue
Metrpolitan, Metropolis 11111. </p>
<p><strong>
Create a Page?
</strong>
</p>
Create a page with a link at the top of it that when clicked will jump all the way to the
bottom of the page. At the bottom of the page there should be a link to jump back to
the top of the page. </p>
<p><strong>
Create Links?
</strong>
</p>
Create links to four different pages on four different websites that should all open in a
new window. </p>
<p><strong>
8
Please Note:</strong> Assignment is due for submission on Wednesdays at 23:55.
</p>
</article>
<footer id="footer">
<a href="#home">Top of Page</a> <br/>
</footer>
</div>
</body>
</html>
6. Create links to four different pages on four different websites that should all
open in a new window
<!DOCTYPE>
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<body>
<h1> Four Different Pages On Four Different Websites </h1>
<h3> Click on the links provided below to browse to the different types of websites.
</h3>
<nav>
<a href="https://abrilliantmind.blog/" target="_blank">A BRILLIANT MIND
9
</a> <br/><br/>
<a href="https://www.cbinsights.com/" target="_blank">RESEARCHS YOU'LL
ACTUALLY READ
</a> <br/><br/>
<a href="https://www.gathr.one/platform/machine-learning/" target="_blank">THE
BEST MACHINE LEARNING WEBSITE
</a> <br/><br/>
<a href="https://eloomi.com/" target="_blank">PEOPLE DEVELOPMENT
</a> <br/><br/>
</nav>
</body>
</html>
7. Display five different images. Skip two lines between each image. Each image
should have a title
<!DOCTYPE>
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<head>
<title>UoPeople Assignment Page</title>
</head>
10
<body>
<h1> IMAGES AND TITLES </h1>
<p>
<img
src="https://cdn.dxomark.com/wp-content/uploads/medias/post-151141/Samsung-
Galaxy-Book3-Pro-16_featured-image-packshot-review.jpg" alt="GALAXY
BOOK3" width="200" height="132" <title>GALAXY BOOK3 <br/> <br/>
<img
src="https://www.beatsbydre.com/content/dam/beats/web/home/2022/10/hp-register--
fitpro-solo3.png.large.2x.png" alt="BEATS BY DRE" width="250"
height="132"
<title>BEATS BY DRE <br/> <br/>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/
c05249116.png?impolicy=Png_Res"
alt="YAHOO LOGO" width="200" height="132" <title>HP OFFICEJET 3830 <br/>
<br/>
<img src="https://i.pcmag.com/imagery/reviews/05ksNAGEUPzZ1E4pNWrUhb4-
1.fit_lim.size_840x473.v1676064988.jpg"
alt="Asus ROG Rapture GT-AXE16000" width="200" height="132" <title>ASUS
ROG RAPTURE
<br/> <br/>
11
<img src="https://fdn.gsmarena.com/imgroot/news/24/01/samsung-galaxy-s24-ultra-
what-to-expect/-326/gsmarena_001.jpg" alt="SAMSUNG GALAXY S24 Ultra"
width="200" height="132" <title>SAMSUNG GALAXY S24 Ultra <br/> <br/>
</p>
</body>
</html>
8. Display an image that has a border of size 2, a width of 200, and a height of 200.
<!DOCTYPE>
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<style>
#image001 {
border: 2px solid black;
width: 200px;
height: 200px;
</style>
<body>
<p id="image001" >
<img
12
src="https://logowik.com/content/uploads/images/941_amazon.jpg" alt="AMAZON
WEB SERVICES" width="200" height="150"
title="AMAZON WEB SERVICES">
</p>
</body>
</html>
9. Display an image that when clicked will link to itself and will display the image
in the browser by itself
<!DOCTYPE>
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<style>
img{href:self}
</style>
<body>
<a
href="https://logowik.com/content/uploads/images/941_amazon.jpg" target="_self">
<img
13
src="https://logowik.com/content/uploads/images/941_amazon.jpg" alt="AMAZON
WEB SERVICES" width="200" height="150"
title="AMAZON WEB SERVICES">
</a>
</body>
</html>
10. Display an image that when clicked will link to a search engine of your choice
(should be opened in a new window)
<!DOCTYPE>
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<style>
img{href:self}
</style>
<body>
<a href="https://www.google.com/" target="_blank">
<img
src="https://blogs.microsoft.com/wp-content/uploads/prod/
2012/08/8867.Microsoft_5F00_Logo_2D00_for_2D00_screen.jpg"
alt="MICROSOFT" width="250"
14
height="132" title="MICROSOFT">
</a>
</body>
</html>
Pick 5 corporations and hunt down their current stock prices. Place them in a neatly
arranged table with their name, symbol, last price, 52wk high, 52wk low and PE ratio.
The end result should look like the following. Notice that he first column is aligned left
and the rest are centred.
<!DOCTYPE>
<html>
<head> <p>CS 2205-01 Programming Assignment Unit 3
</p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
text-align: center;
</style>
15
</head>
<body>
<table style="font-size:20px; font-family:verdana;" border="2">
<tr>
<th style="font-size:30px; font-family:verdana; font-style:
italic;" colspan="6">Best Technology Stocks of 2024</th>
</tr>
<tr>
<th style="text-align: left;">NAME</th>
<th>SYMBOL</th>
<th>Market Cap</th>
<th>YTD Performance</th>
<th>P/E RATIO</th>
<th>SECTOR</th>
</tr>
<tr>
<td style="text-align: left;">Broadcom</td>
<td>AVGO</td>
<td>$562.12 billion</td>
<td>115.19%</td>
<td>36.46.</td>
16
<td>Technology</td>
</tr>
<tr>
<td style="text-align: left;">ASML</td>
<td>ASML</td>
<td>$354.7 billion</td>
<td>14.91%</td>
<td>41.45.</td>
<td>Technology</td>
</tr>
<tr>
<td style="text-align: left;">Salesforce</td>
<td>CRM</td>
<td>$275.33 billion</td>
<td>28.34%</td>
<td>107.96.</td>
<td>Technology</td>
</tr>
<tr>
<td style="text-align: left;">Cisco Systems</td>
<td>CSCO</td>
17
<td>$204.05 billion</td>
<td>0.09%</td>
<td>15.15.</td>
<td>Technology</td>
</tr>
<tr>
<td style="text-align: left;">SAP</td>
<td>SAP</td>
<td>$219.28 billion</td>
<td>11.97%</td>
<td>30.05.</td>
<td>Technology</td>
</tr>
</table>
</body>
</html>
18
References
LearnCode.academy. (2013, October 21). Web development tutorial for beginners (#1) - How
to build webpages with HTML, CSS, Javascript. YouTube. Retrieved from
https://youtu.be/3JluqTojuME
Morris, J. (2018, July 30). HTML tags, attributes and elements [Video]. YouTube. Retrieved
from https://youtu.be/vNOyRZIkC7o
w3schools. (n.d.). HTML Tutorial. Retrieved
from https://www.w3schools.com/html/default.asp
Words: 1,295
