Scribd
Upload
19 views19 pages

Written Assignment Unit 3 Web Programming

The document contains a series of HTML code examples for a Web Programming assignment at the University of the People. It includes various tasks such as displaying numbers in different colors, creating lists, formatting addresses, and presenting stock prices in a table. Each section demonstrates specific HTML and CSS techniques to fulfill the assignment requirements.

Uploaded by

munyendoadam9
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
19 views19 pages

Written Assignment Unit 3 Web Programming

The document contains a series of HTML code examples for a Web Programming assignment at the University of the People. It includes various tasks such as displaying numbers in different colors, creating lists, formatting addresses, and presenting stock prices in a table. Each section demonstrates specific HTML and CSS techniques to fulfill the assignment requirements.

Uploaded by

munyendoadam9
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/ 19

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.

You might also like