my_codes_HTML/index.html at main · lisolores/my_codes_HTML · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Page title</title><!-- this is name that showing on top of browser -->
    <link rel="stylesheet" href="main_styles.css">
    <link rel="stylesheet" href="index.css">
    <link rel="icon" type="image/x-icon" href="https://www.favicon.cc/logo3d/1015365.png" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<ul id="main page">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#class">Classs</a></li>
</ul>
<!-- trying to make one more page from another html document named index2 -->
<a href="index2.html" target="_parent">Here you can see what is in another HTML document<br></a>


<h1 >My first heading</h1>
<p>My first paragraph</p>

<a href="#C2">Jump to chapter 2</a>
<a href="#C3">Jump to chapter 3</a>
<p>This is another paragraph.</p>
<p style="color:#5a2e00;">This is a different color paragraph.</p>

<p title="some hidden info opened when you are on it">This is a paragraph but also a place to put your mouse.</p>

<!--Inserting page into page-->
<iframe src="https://my-codes-html.pages.dev/index2" style="border:none;" height="400px" width="50%" title="my another page"></iframe>


<p title='John "ShotGun" Nelson'>John with double quotes put mouse to see</p>
<p title="John 'ShotGun' Nelson">John with single quotes put mouse to see</p>

<h2 style="font-size:30px;">Heading the 30px big one</h2>
<h2 id="home">Home</h2>
<!-- HOME ancor


-->
<h2>This is heading 2</h2>

<p>This is another one more paragraph.</p>
<hr>
<button onclick="document.location='https://lv.wikipedia.org/wiki/Eži'" title="go to wiki">Link to wiki THIS IS A BUTTON</button>
<hr>

<h2>This is heading 2</h2>

<p>Just image</p>
<img src="ezis%20(1).jpg" alt="picture of animal" width="25%">
<!--<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Igel01.jpg" alt="link to wiki" height="142">
-->
<a href="#main page">Get to main page</a>
<h3>This is heading 3</h3>
<a href="https://www.w3schools.com" target="_blank">This is a link to click<br></a>
<a href="https://www.w3schools.com" target="_top">This is a same link but clicks different</a>

<p style="text-align:center;">Centered paragraph.</p>

<p>This is<br>a paragraph<br>with line breaks.</p>


<h2 id="C2">Chapter 2 </h2>

<h2 id="news">News</h2>
<!--News


ancor-->
<p>The HTML < pre > element defines preformatted text.</p><!-- Write your comments here -->
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
<a href="#main page">Get to main page</a>

<h2 style="font-size: 60px; font-family: 'Courier New', serif; text-align: center;">HTML Formatting Elements</h2>

<p><b>The HTML < b > element defines bold text, without any extra importance.</b></p>
<p><strong>The HTML < strong > element defines text with strong importance. The content inside is typically displayed in bold</strong></p>
<p><i>The HTML < i > element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. Tip: The < i > tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.</i></p>
<p><em>The HTML < em > element defines emphasized text. The content inside is typically displayed in italic. Tip: A screen reader will pronounce the words in < em > with an emphasis, using verbal stress.</em>></p>
<p><small>The HTML < small > element defines smaller text</small></p>
<p><mark>The HTML < mark > element defines text that should be marked or highlighted</mark></p>
<p><del>The HTML < del > element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text</del></p>
<p><ins>The HTML < ins > element defines a text that has been inserted into a document. Browsers will usually underline inserted text</ins></p>
<p><sub>The HTML < sub > element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O</sub></p>
<p><sup>The HTML < sup > element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW</sup></p>

<h2 style="font-size: 60px; font-family: 'Courier New', serif; text-align: center;">HTML Quotation and Citation Elements</h2>
<p>Here is a quote from WWF's website:</p>

<blockquote cite="https://www.w3schools.com/html/html_quotation_elements.asp">
    The HTML < blockquote > element defines a section that is quoted from another source.Browsers usually indent < blockquote > elements
</blockquote>
<p>The HTML < q > <q> tag defines a short quotation.</q> Browsers normally insert quotation marks around the quotation.</p>
<p>The HTML < abbr > tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation systems and search-engines. <abbr title="World Health Organization">WHO</abbr></p>
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<a href="#main page">Get to main page</a>

<h2 id="contact">Contact</h2>
<!-- Contact


ancor -->
<address style="border: 3px solid #5a2e00">
    Written by John Doe.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>
<p>The HTML < cite > tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.) <cite>The Scream</cite> by Edvard Munch. Painted in 1893..</p>
<p>The HTML < bdo > tag is used to override the current text direction: <bdo dir="rtl">This text will be written from right to left</bdo></p>
<!--Comment-->
<hr>
<p>This is a paragraph. <br> look at source </p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
<a href="#main page">Get to main page</a>

<h2 id="C3">Chapter 3 </h2>
<table>
    <caption>This is a table caption</caption>
    <tr style="height : 100px">
        <th colspan="2">Big cell</th>
    <tr style="height : 100px">
        <th>Person 1</th>
        <th>Person 2</th>
        <th>Person 3</th>
        <th rowspan="2">Big cell but different way</th>
    </tr>
    <tr style="height : 100px">
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
    <tr style="height : 100px">
        <td>16</td>
        <td>14</td>
        <td>10</td>
    </tr>
</table>
<a href="#main page">Get to main page</a>

<h2 id="about">About</h2>
<!-- about ancor --->
<p>This is web-page where learning process is chaotic but is trying to get organised</p>
<div style="background-color:black;color:white;padding:20px;">
    <h2>Completely diferrently styled bunch of elements < div > </h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

<div class="mycontainer">

    <div style="background-color:#FFF4A3; width:600px;">
        <h2>London</h2>
        <p>London is the capital city of England.</p>
        <p>London has over 9 million inhabitants.</p>
    </div>

    <div style="background-color:#FFC0C7; width:600px;">
        <h2>Oslo</h2>
        <p>Oslo is the capital city of Norway.</p>
        <p>Oslo has over 700,000 inhabitants.</p>
    </div>

    <div style="background-color:#D9EEE1; width:600px;">
        <h2>Rome</h2>
        <p>Rome is the capital city of Italy.</p>
        <p>Rome has over 4 million inhabitants.</p>
    </div>
</div>

<!-- another way how to make table-->
<p>This is grid-container based table</p>
<div class="grid-container">

    <div style="background-color:#FFF4A3;">
        <h2>London</h2>
        <p>London is the capital city of England.</p>
        <p>London has over 9 million inhabitants.</p>
    </div>

    <div style="background-color:#FFC0C7;">
        <h2>Oslo</h2>
        <p>Oslo is the capital city of Norway.</p>
        <p>Oslo has over 700,000 inhabitants.</p>
    </div>

    <div style="background-color:#D9EEE1;">
        <h2>Rome</h2>
        <p>Rome is the capital city of Italy.</p>
        <p>Rome has over 4 million inhabitants.</p>
    </div>
</div>

<a href="#main page">Get to main page</a>
<!--get to main page


-->
<!--here we work with classes-->
<h2 id="class">Using classes to style</h2>
<div class="city">
    <h2>London</h2>
    <p>London is the capital of England.</p>
</div>

<div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
</div>

<div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>

<h2>My <span class="note">Important</span> Heading</h2>
<p>This is some <span class="note">important</span> text <span class="note"> < span > </span>.</p>

<!-- USing attribute and Java Script-->

<h2 id="myHeader">Hello World!</h2>
<button onclick="displayResult()">Change text</button>

<script>
    function displayResult() {
        document.getElementById("myHeader").innerHTML = "Have a nice day!";
    }
</script>


<a href="#main page">Get to main page</a>

</body>
</html>