Written Assignment unit 3
Bachelor of Computer Science
University of the People
CS 2205-01: Web Programming 1
Dr. Crystal Cummings
December 1st , 2024
Below is a series of HTML documents that fulfill the requirements specified in query. Each
section is designed t meet the specific criteria outlined.
1. Displaying Numbers 1-10 in Different Colors
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
6. <title>Coloured Numbers</title>
7. <style>
8. h2 {color: blue;
9. font-size: 60px;
10. }
11. .number {
12. font-size: 50px;
13.
14. }
15. .color1 { color: pink; }
16. .color2 { color: red; }
17. .color3 { color: burlywood; }
18. .color4 { color: indigo; }
19. .color5 { color: orange; }
20. .color6 { color: violet; }
21. .color7 { color: yellow; }
22. .color8 { color: purple; }
23. .color9 { color: greenyellow; }
24. .color10 { color: blue; }
25. </style>
26. </head>
27. <body>
28. <h2> Numbers 1- 10</h2>
29. <div class = "number color1">1</div>
30. <div class = "number color2"></div>
31. <div class = "number color3">3</div>
32. <div class = "number color4">4</div>
33. <div class = "number color5">5</div>
34. <div class = "number color6">6</div>
35. <div class = "number color7">7</div>
36. <div class = "number color8">8</div>
37. <div class = "number color9">9</div>
38. <div class = "number color10">10</div>
39.
40. </body>
41. </html>
2. Displaying Square of Numbers 1-10
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
6. <title>Square of Numbers</title>
7. </head>
8. <body>
9. <h2>Squares of Numbers 1-10</h2>
10. <p> 1<Sup>2</Sup>= 1</p>
11. <p> 2<Sup>2</Sup>= 4</p>
12. <p> 3<Sup>2</Sup>= 9</p>
13. <p> 4<Sup>2</Sup>= 16</p>
14. <p> 5<Sup>2</Sup>= 25</p>
15. <p> 6<Sup>2</Sup>= 36</p>
16. <p> 7<Sup>2</Sup>= 49</p>
17. <p> 8<Sup>2</Sup>= 64</p>
18. <p> 9<Sup>2</Sup>= 81</p>
19. <p> 10<Sup>2</Sup>= 100</p>
20. </body>
21. </html>
3. Displaying Lists (Ordered and Unordered)
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
6. <title>Ordered and Unordered List</title>
7. <style>
8. h2 {
9. color: blue;
10. font-size: 30px
11.
12. }
13. ol {
14. color: green;
15. font-size: 24px
16. }
17. ul {
18. color: goldenrod;
19. font-size: 24px
20. }
21. </style>
22. </head>
23. <body>
24. <h2>Ordered List of Fruits: </h2>
25. <ol>
26. <li> Date</li>
27. <li> Orange</li>
28. <li> Berry</li>
29. <li> Pinaple</li>
30. <li> Apple</li>
31. <li> Guava</li>
32. <li> Banana</li>
33. </ol>
34.
35. <h2>Unordered List of Vegetables oil:</h2>
36. <ul>
37. <li>Cashew oil</li>
38. <li>Coconut oil</li>
39. <li>Sunflower oil</li>
40. <li>Olive oil</li>
41. <li>Peanut oil</li>
42. <li>Mustard oil</li>
43. <li>Soyabean oil</li>
44. <li>Palm oil</li>
45. </ul>
46. </body>
47. </html>
4. Displaying two Addresses in Envelope Format
48. <!DOCTYPE html>
49. <html lang="en">
50. <head>
51. <meta charset="UTF-8">
52. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
53. <title>Email Format Example</title>
54.
55. <style>
56. .address {
57. font-family: Time New Roman;
58. line-height: 1.5;
59. margin-bottom: 50px;
60.
61. }
62.
63. .sender {
64. text-align: left;
65. float: left;
66. width: 50%;
67.
68. }
69.
70. .receiver {
71. text-align: center;
72. float: center;
73. width: 100%;
74.
75. }
76.
77. .clear {
78. clear: both;
79. }
80.
81.
82. </style>
83. </head>
84. <body>
85. <div class = "Sender Address">
86. Dilbert H. <br />
87. 1234 Anim Street <br />
88. P.O. Box 22222
89.
90. </div>
91.
92. <div class = "receiver address">
93. Someone A. Person<br />
94. 5555 Street Avenue<br />
95. Metropolitan, Metropolis 11111
96.
97. </div>
98.
99. <div class = "clear"></div>
100. </body>
101.
102. </html>
5. Page with Links for Navigation
103. <!DOCTYPE html>
104. <html lang="en">
105. <head>
106. <meta charset="UTF-8">
107. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
108. <title>Smooth Scroll navigation</title>
109. <style>
110. body {
111. margin:0;
112. padding-inline-end: 0;
113. height:200px; /* Just to creat a scrollable page
*/
114.
115. }
116. #top {
117. position:fixed;
118. top: 0;
119. left:50%;
120. transform:translateX(-50%);
121. background-color: #f8f9fa;
122. padding-inline-end: 10;
123. border-bottom:1px solid #ccc;
124.
125. }
126. #bottom {
127. position:absolute;
128. bottom: 0;
129. left: 50%;
130. transform:translateX(-50%);
131. background-color: #227bd3;
132. padding-inline-end: 10px;
133. border-top: 10px solid #ccc;
134.
135. }
136.
137. a {
138. text-decoration: none;
139. color:#007bff;
140.
141. }
142.
143. a:hover {
144. text-decoration:underline;
145. }
146.
147.
148. </style>
149. </head>
150. <body>
151. <div id = "top"><a href = "#bottom"> Jump to Bottom!
</a></div>
152. <!-- Content -->
153.
154. <h1 style = "margin-top:50px;" > Scroll Down for More
Content...</h1>
155.
156. <p style = "margin-top: 1000px;" > This is the bottom of
the page.</p>
157.
158. <div id = "bottom"><a href = "#top">Jump to Top!
</a></div>
159.
160. </div>
161. </body>
162. </html>
6. Links to Four Different Pages
163. <!DOCTYPE html>
164. <html lang="en">
165. <head>
166. <meta charset="UTF-8">
167. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
168. <title>External Links</title>
169. </head>
170. <body>
171. <h2>Useful Links:</h2>
172. <ul style="list-style-type:none;">
173. <li><a href="https://www.google.com"
target="_blank">Google Search Engine (opens in new
window)</a></li><br />
174. <li><a href="https://www.wikipedia.org"
target="_blank">Wikipedia (opens in new window)</a></li><br />
175. <li><a href="https://www.github.com"
target="_blank">GitHub (opens in new window)</a></li><br />
176. <li><a href="https://www.stackoverflow.com"
target="_blank">Stack Overflow (opens in new window)</a></li><br />
177. </ul>
178. </body>
179. </html>
7. Displaying Five Different Images with Titles
180. <!DOCTYPE html>
181. <html lang="en">
182. <head>
183. <meta charset="UTF-8">
184. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
185. <title>Gallery</title>
186. </head>
187. <body>
188. <h2>Image Gallery:</h2>
189.
190. <img src="images (1).JPG.jpg"Image 1 Title"><br /><br />
191. <p style='text-align:center;'>Green Starfruit </p><br />
192.
193. <img src="image (2).JPG.jpg" alt="Image 2 Title"><br /><br />
194. <p style='text-align:center;'> </p>Passion Fruit<br />
195.
196. <img src="images(3).JPG.jpg" alt="Image 3 Title"><br /><br />
197. <p style='text-align:center;'>Jack Fruit </p><br />
198.
199. <img src="images(4).JPG.jpg" alt="Image 4 Title"><br /><br />
200. <p style='text-align:center;'>Peanut Oil</p><br />
201.
202. <img src="images(5).JPG.jpg" alt="Image 5 Title"><br /><br />
203. <p style='text-align:center;'>Sunflower Oil </p><br />
204. </body>
205. </html>
8. Displaying an Image with Specific Border Size and Dimensions.
206. <!DOCTYPE html>
207. <html lang="en">
208. <head>
209. <meta charset="UTF-8">
210. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
211. <title>Bordered Image</title>
212. </head>
213. <body>
214.
215. <h2>Bordered Image:</h2>
216.
217. <img src='images (1).JPG.jpg' alt='Bordered Image'
style='border:2px solid black; width:200px; height:200px;' />
218. </body>
219. </html>
9. Clickable Image Linking to Itself
220. <!DOCTYPE html >
221. <html lang ="en">
222.
223. <head >
224. <meta charset ="UTF-8 ">
225. <meta name ="viewport " content ="width=device-width,
initial-scale=1.0 ">
226. <title >Clickable Image </title >
227.
228. </head >
229.
230. <body >
231.
232. <h2 >Clickable Image:</h2 >
233.
234. <a href ="image (2).JPG.jpg">
235.
236. <img src ="image (2).JPG.jpg" alt ="Clickable Image "
>
237.
10.Corporation Stock Prices Table
238. <!DOCTYPE html>
239. <html lang="en">
240. <head>
241. <meta charset="UTF-8">
242. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
243. <title>Stock Prices Table</title>
244. <style>
245. h2 {
246. color:blue;
247. font-size: 30px;
248. }
249. table {
250. width :100% ;
251. border-collapse:collapse;
252. }
253.
254. th , td {
255. border :2px solid black;
256. padding :8px;
257. text-align :center;
258. }
259.
260. th:first-child {
261. text-align :left;
262. }
263. </style>
264. </head>
265. <body>
266. <h2 >Current Stock Prices:</h2 >
267.
268. <table>
269. <tr>
270. <th>Company Name</th>
271. <th>Symbol</th>
272. <th>Last Price</th>
273. <th>52 Week High</th>
274. <th>52 Week Low</th>
275. <th>PE Ration</th>
276. </tr>
277. <tr>
278. <td>Apple Inc.</td>
279. <td>Aapl</td>
280. <td>$145.09</td>
281. <td>$157.00</td>
282. <td>$129.04</td>
283. <td>28.78</td>
284.
285. </tr>
286.
287. <tr>
288. <td>Microsoft Corp.</td>
289. <td>MSFT</td>
290. <td>$299.35</td>
291. <td>$349.67</td>
292. <td>$241.51</td>
293. <td>$35.24</td>
294. </tr>
295.
296. <tr>
297. <td>Amazon.com Inco.</td>
298. <td>$3, 200.00</td>
299. <td>$3, 500.00</td>
300. <td>$3, 000.00</td>
301. <td>60</td>
302.
303. </tr>
304.
305. <tr>
306. <td>Tesla Inc.</td>
307. <td>TSLA</td>
308. <td>$700.00</td>
309. <td>$800.00</td>
310. <td>$600.00</td>
311. <td>60.00</td>
312. </tr>
313.
314. <tr>
315. <td>Alphabet Inc</td>
316. <td>GOOGL</td>
317. <td>$2, 500.00</td>
318. <td>$3, 000.00</td>
319. <td>$2, 300.00</td>
320. <td>30</td>
321. </tr>
322.
323. </table>
324. </body>
325. </html>
Conclusion
These HTML documents cover all specified requirements, including displaying numbers in
different colors, calculating squares, creating lists, formatting addresses like envelopes,
implementing navigation links, displaying images, and presenting stock prices in a table format.
