Lab2/news.html at main · Yopdiff/Lab2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!--
=========================================================
Name        : news.html
Assignment  : Lab 2 Exercise C
Author(s)   : Hyunmyung Park and Hongwoo yoon
Submission  : Jan, 24th 2024
Description : A simple HTML file.
=========================================================
-->
<!DOCTYPE html>
<html>
<head>
    <title>Comprehensive HTML Page</title>
	<!--Copy and paste remaining tags of the head section from images.html file.-->
    <meta charset =" UTF-8">
    <meta name ="description" content ="An HTML example with img tags">
    <meta name ="keywords" content ="HTML, Web Development, Example, img">
    <meta name ="author" content ="Hongwoo Yoon, Hyunmyung Park">
    <link rel ="shortcut icon" href ="favicon.ico" type ="image/x-icon">
</head>
<body>

    <header>
        <h1>Welcome to My HTML Page</h1>
    </header>

    <nav>
        <ul>
            <br><a href="index.html">Back to Home</a><br>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>

    <section id="section1">
        <article>
            <h2>Article Title</h2>

			<p>This is a paragraph in an article section. It demonstrates text formatting, like ,<strong>bold</strong>, <em>italic</em> , and <mark>marked text</mark>.</p>
			<!-- To emphasize specific words in the paragraph, apply appropriate HTML tags:
			<strong> or <b> for bold text,
			<em> or <i> for italic text, and
			<mark> for highlighted text.
			Ensure each formatting style is correctly demonstrated on the respective words. -->

            <p>Here's a quotation:</p>
            <blockquote cite="http://example.com">
                This is a blockquote, a section that quotes content from another source.
            </blockquote>
            <p>The article section typically contains text, images, and other content that forms an independent part of a document.</p>
        </article>
    </section>

    <section id="section2">
        <h2>List Examples</h2>
        <p>Ordered List:</p>
        <ol>
            <li>First item</li>
            <li>Second item</li>
			<!--Make a sub-ordered list here-->
            <ol>
                <li>First item</li>
                <li>Second item</li>
                <li>Third item</li>
            </ol>
            <li>Third item</li>
        </ol>
        <p>Unordered List:</p>
        <ul>
            <li>Bullet item</li>
			<!--Make a sub-unordered list here-->
            <ul>
                <li>Bullet item</li>
                <li>Another bullet item</li>
            </ul>
            <li>Another bullet item</li>
            <li>Yet another bullet item</li>
        </ul>
    </section>

    <section id="section3">
        <h2>Additional Elements</h2>
        <p>This section includes a variety of additional HTML elements:</p>

		<h3>Definition Lists:</h3>
		<p>A list where each item has a term and definition.</p>
        <dl>
            <dt>HTML</dt>
            <dd>Hypertext Markup Language.</dd>
			<dt>CSS</dt>
            <dd>Cascading Style Sheets</dd>
        </dl>


		<h3>Tables:</h3>
		<p>Here is an example of a table:</p>
        <table border="1">
			<caption>Monthly Sales Report</caption>
			<thead>
				<tr>
					<th>Month</th>
					<th>Sales</th>
					<th>Expenses</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>January</td>
					<td>$2000</td>
					<td>$1500</td>
				</tr>
				<tr>
					<td>February</td>
					<td>$1800</td>
					<td>$1200</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>Total</td>
					<td>$3800</td>
					<td>$2700</td>
				</tr>
			</tfoot>
        </table>

		<h3>Images:</h3>
        <p>Adding an image:</p>
        <img src= "images/example.jpg" alt="Example Image"> <!--Fix addressing issue-->
    </section>
    <br><a href="./">Back to Home</a>
    <footer>
        <!--<p>Footer content, like contact info or copyrights.</p>-->
		<!--Comment out the above p tag and add a new p tag under this comment.
			The new p tag must contain {Copy right + your names}.-->
        <p>&copy; 2024 Hongwoo Yoon and Hyunmyung Park</p>
    </footer>
</body>
</html>