-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (142 loc) · 4.62 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
142
143
144
145
146
<!--WARNING: THIS IS PURE HTML WITH NO CSS, 90s STYLE-->
<!--HTML DOCUMENTATION-->
<!--www.developer.mozilla.org-->
<!--www.3schools.com/html-->
<!--www.devdocs.io-->
<!--BOILERPLATE-->
<!--A boilerplate is the structure of the webage: head and body-->
<html>
<!--THE HEAD-->
<head>
<!--THE META INFORMATION-->
<!--ENCODING SYSTEM (CHARSET)-->
<!--SEE UNICODE TABLE www.unicode-table.com-->
<meta charset="utf-8">
<!--INFORMATION FOR SEARCH ENGINES-->
<meta name="description" content="Powieść Jaremy Piekutowskiego">
<meta name="keywords" content="koty, literatura">
<!--HOW TO DISPLAY THE PAGE-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--THE PAGE TITLE-->
<title>Jarema Piekutowski</title>
</head>
<style>
a:visited {
color: white;
}
</style>
<!--THE BODY, CSS INLINE (BACKGROUND COLOR)-->
<body style="background-color: #0F2C67; color: #F4E185;">
<!--TABLE WITH CELLSPACING 20-->
<table cellspacing="20">
<!--TABLE BODY-->
<tbody>
<!--TABLE ROW-->
<tr>
<!--TABLE DATA-->
<td>
<!--GET IMAGE OF CERTAIN ALTERNATIVE TEXT, HEIGHT AND WIDTH-->
<img src="kotcircle.png" alt="Kot Bolek" width="200" height="200">
</td>
<td>
<!--A BIG HEADING - h1-->
<h1>LOTAS, PROROK WŚRÓD KOTÓW</h1>
<!--SMALLER HEADINGS - h2, h3...-->
<!--THERE ARE 6 HEADINGS FROM H1 TO H6-->
<h3>by</h3>
<!--ANCHOR TAG + HYPERLINK-->
<h2><a href="http://www.kostera.pl/index.html">Monika Kostera</a> i <a href="piekutowski.html">Jarema Piekutowski</a></h2>
</td>
</tr>
</tbody>
</table>
<!-- DRAW A HORIZONTAL LINE-->
<hr>
<!-- A LINE BREAK-->
<br>
<!-- CREATE PARAGRAPH-->
<p>Lotas wyszedł z bramy, miauknął zdawkowo i przeciągnął się.</p>
<!-- EMPHASIZE AND ITALICIZE TEXT-->
<p><em>Lotas bowiem był kotem.</em></p>
<!-- EMPHASIZE AND MAKE TEXT BOLD-->
<p><strong>Miauknął raz jeszcze i skierował się w stronę centrum.</strong></p>
<!-- DRAW HORIZONTAL RED LINE OF SIZE 3-->
<!-- size=3 IS A HTML ATTRIBUTE-->
<p>Więcej informacji na ten temat znajdą państwo w księgarniach.</p>
<h2>Inne książki</h2>
<!-- AN UNORDERED LIST-->
<ul>
<li><strong>Marcus Proust</strong> - W stronę Szczwana</li>
<li><strong>Bartun Varus</strong> - T dla każdego</li>
<li><em>Mleko</em></li>
</ul>
<!-- AN ORDERED LIST-->
<ol>
<li>Pierwszy kot</li>
<li>Drugi kot</li>
<li>Trzeci kot</li>
</ol>
<!-- AN UNORDERED LIST NESTED IN AN ORDERED LIST-->
<ol>
<li>Pierwszy pies</li>
<li>Drugi pies
<ul>
<li>Pierwszy kot</li>
<li>Drugi kot</li>
</ul>
</li>
<li>Trzeci pies</li>
<li>Czwarty pies</li>
</ol>
<!--A TABLE WITH A BORDER-->
<table border="3px">
<!-- A TABLE HEAD-->
<thead>
<tr>
<!-- TABLE HEAD DATA FOR COLUMN 1 AND 2-->
<th>Numer kota</th>
<th>Imię kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kot nr 1</td>
<td>Bolek</td>
</tr>
<tr>
<td>Kot nr 2</td>
<td>Pims</td>
</tr>
</tbody>
<!-- TABLE FOOT-->
<tfoot>
<tr>
<td>Dwa koty</td>
<td>Bolek i Pims</td>
</tr>
</tfoot>
</table>
<br>
<br>
<!--HEADING 2 WITH STYLE (COLOR)-->
<h2 style="color:white">
Skills 🤏
</h2>
<table cellspacing="15">
<thead>
<tr>
<th>Programming language</th>
<th>Skill level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><span style="color: yellow;">★★★</span><span style="color: black">★★</span></td>
</tr>
</tbody>
</table>
<!--A HORIZ. LINE WITH SIZE, COLOR AND NOSHADE-->
<hr size="3" color="white" noshade>
</body>
</html>