-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (133 loc) · 4.93 KB
/
index.html
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
141
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="HTML tutorial">
<meta name="keywords" content="HTML, HTML properties, HTML tags">
<meta name="author" content="Janine SooThow">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--all meta info goes in head section-->
<title>Best cities to visit in Europe </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<h1>Best cities to visit in Europe</h1> <!---III number 10-->
<body>
<main>
<header>
<nav>
<!-- works like <a href="/index.html">Home</a> -->
<a href="/">Home</a>
<a href="./form.html">Form </a>
</nav>
</header>
<article>
<div>
<h4> Munich </h4>
<img src="https://images.unsplash.com/photo-1595867818082-083862f3d630?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bXVuaWNofGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" width="200">
<p> When you are in Munich, you must visit the <span style="color: blue;"> Deutsches Museum </span>, <span style="color: blue;"> Marienplatz</span> and <span style="color: blue;"> Karlzplatz </span> to get a good understanding of Munich's history. </p>
</div>
<div>
<h4> Rome </h4>
<img src="https://hotelmedia.s3.amazonaws.com/720/480/9835272af7e5758426d8fda4d2e4e70d10be5da4" width="200">
<p>The public voted that the top places to visit in Rome are the <span style="color: blue;"> Vatican Museum</span>, <span style="color: blue;"> St Peter's Basilica </span> and <span style="color: blue;"> Trevi Fountain </span> </p>
</div>
<div>
<h4> Copenhagen </h4> </div>
<img src="https://media.istockphoto.com/id/587892190/photo/copenhagen-denmark-at-nyhavn-canal.jpg?s=612x612&w=0&k=20&c=36euZjYvsTQnIYVcTUhErkGLU564g9fnctOAEzVUlIg=" width="200">
<p>The top three places in Copenhagen are the <span style="color: blue;">Copenhagen Museum</span>, <span style="color: blue;"> Tivoli Gardens </span> and <span style="color: blue;"> Christianborg Palace </span> </p>
</div>
<div>
<p> <!--III number 3 -->
p represents paragraph
</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</div>
<div>
<h4> Foods to try in Europe </h4>
<ul>
<li> German Potato Salad </li> <!-- III number 7 -->
<li> German Beef Stew </li>
<li> Italian Cheeses
<ul> <li> Mozzarella </li>
<li> Ricotta </li>
</ul>
</li>
</ul>
<article> <!---III number 11-->
<h2> Learn to make German Potato Salad </h2>
<ol> <!--III number 8 -->
<li> <span style="color: red;">Boil </span>, drain, and cool the diced and peeled potatoes. </li>
<li> Fry the bacon in a skillet, then cook the onion in the bacon grease. </li>
<li> the vinegar, sugar, water, salt, and pepper and bring to a boil. </li>
<li> the potatoes and ½ of the bacon to the boiling liquid. </li>
<li> When heated through, transfer the potatoes to a serving dish. </li>
<li> Garnish with remaining bacon and parsley. </li>
</ol>
</article>
</div>
<article> <!--IV HTML elements - table exercise -->
<h2> Table </h2>
<table> <!-- IV HTML number 2 -->
<h1> Travel Budget Table Element </h1>
<table>
<thead>
<tr>
<th colspan="2">First header</th> <!--IV HTML number 7-->
<th>Second header</th>
</tr>
</thead>
<tbody>
<tr>
<td>First cell - first row</td>
<td>Second cell - first row</td>
<td> Third cell - first row </td>
</tr>
<tr>
<td> First cell - second row </td>
<td> Second cell - second row </td>
<td> Third cell - second row</td>
</tr>
<tr>
<td> First cell - third row </td>
<td> Second cell - third row </td>
<td> Third cell - third row </td>
</tr>
</tbody>
</table>
</article>
<div>
<br>
<img src="https://picsum.photos/200/300" alt="photos" />
</br>
</div>
<div>
<br>
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm">
<source src="/media/cc0-videos/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</br>
</div>
<div>
<br>
<audio controls src="/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</br>
</div>
<footer>Copyright 2021 ©</footer>
</body>
</main>
</html>