Lab3/old-school.html at main · Yopdiff/Lab3 · 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
<!--
=========================================================
Name        : index.html
Assignment  : Lab 3 Exercise B
Author(s)   : Mahdi Ansari, William Arthur Philip Louis
Submission  : May 21, 2030
Description : Understanding Old-School HTML Layouts.
=========================================================
-->
<!DOCTYPE html>
<html>
<head>
    <title>Table Layout Webpage</title>
    <style>
        table { width: 100%; }
        td { vertical-align: top;}

        td.medium{ border: 1px dashed gray; }

        #header, #footer { background-color: #f2f2f2; text-align: center; padding: 10px; }
        #menu { width: 150px; background-color: #e6e6e6; }
        #main { padding: 15px; }
        #footer { position: fixed; bottom: 0; width: 100%;}

        .news-item { padding: 10px; }
        .large { width: 100%; }
        .medium { width: 70%; }
        .small { width: 30%; }
    </style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" id="header">Header</td>
    </tr>
    <tr>
        <td id="menu">
            <!-- Menu Items -->
            <p><a href="google.com" target="_blank">Google</a></p>
            <p><a href="ucalgary.ca" target="_parent">UofC</a></p>
        </td>
        <td id="main">
            <table id="main-table">
                <tr>
                    <td class="large news-item">
                        <!-- Large news item -->
                        <header>
                            <h1>Revolutionary New Computer Changes the Tech World</h1>
                        </header>

                        <img src="images/large.jpg" alt="Large Image" width="100%">
                        <article>
                            <h2>The Dawn of a New Era</h2>
                            <p>In a groundbreaking development, TechCorp has unveiled a computer with the ability to learn and adapt. This new technology, which the company has been developing in secret for years, promises to revolutionize the way we interact with machines.</p>

                            <h3>Unprecedented Capabilities</h3>
                            <p>Experts are astounded by the computer's capabilities, which include advanced artificial intelligence, unparalleled processing speed, and an intuitive user interface. "It's unlike anything we've ever seen," said a leading tech analyst.</p>

                            <h3>The Future is Here</h3>
                            <p>With this release, TechCorp not only sets a new standard in computing but also opens up a world of possibilities for future technology. The company plans to make this technology available to the public by the end of the year.</p>
                        </article>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100%";>
                        <table style="width: 100%";>
                            <td class="small news-item" colspan="2">
                                <!-- Small news item -->

                                <header>
                                    <h1>Calgary's Natural Beauty Captivates Tourists</h1>
                                </header>

                                <img src="images/small.jpg" alt="Small Image" width="100%">

                                <article>
                                    <h2>Emerald Oasis in the Heart of the City</h2>
                                    <p>Calgary, known for its vibrant city life, is now gaining fame for its lush green spaces and rich biodiversity. The city's parks and riversides have become a haven for nature lovers.</p>

                                    <h3>Urban Wildlife Flourishes</h3>
                                    <p>Recent reports indicate a rise in urban wildlife sightings, adding to the city's allure. Deer, coyotes, and various bird species are now common sights in Calgary's green spaces.</p>

                                    <h3>A Green Transformation</h3>
                                    <p>The transformation of the city into a green paradise has been praised by environmentalists, calling it a perfect blend of urban development and nature conservation.</p>
                                </article>

                            </td>
                            <td class="medium news-item">
                                <!-- Medium news item -->
                                <header>
                                    <h1>Mahdi Ansari Takes a Historic Spacewalk Near the ISS</h1>
                                </header>

                                <img src="images/medium.jpg" alt="Medium Image" width="100%">
                                <article>
                                    <h2>A Historic Moment in Space Exploration</h2>
                                    <p>In an unprecedented feat of human courage and technological prowess, astronaut Mahdi Ansari completed a spacewalk near the International Space Station (ISS), marking a new milestone in space exploration.</p>

                                    <h3>A Breathtaking Journey</h3>
                                    <p>Ansari, aboard the spacecraft Voyager X, ventured out into the void of space, capturing breathtaking views of Earth and conducting important research that could pave the way for future interstellar travel.</p>

                                    <h3>Pushing the Boundaries of Science</h3>
                                    <p>The successful spacewalk not only demonstrates human resilience but also advances our understanding of space and our capabilities to explore further into the unknown.</p>
                                </article>
                            </td>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2" id="footer">
            <footer>
                <p>Fictional News Article for Educational Use at UofC</p>
            </footer>
        </td>
    </tr>
</table>

</body>
</html>