Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
13 views

Programming Assignment Unit 3

The document outlines a programming assignment for a web programming course at the University of the People, detailing various tasks to create HTML documents. Tasks include displaying numbers in different colors, creating lists, formatting addresses, and incorporating images with specific attributes. The assignment emphasizes practical HTML skills and includes references for further learning.

Uploaded by

sam
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Programming Assignment Unit 3

The document outlines a programming assignment for a web programming course at the University of the People, detailing various tasks to create HTML documents. Tasks include displaying numbers in different colors, creating lists, formatting addresses, and incorporating images with specific attributes. The assignment emphasizes practical HTML skills and includes references for further learning.

Uploaded by

sam
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

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

You might also like