-
Notifications
You must be signed in to change notification settings - Fork 0
/
html.html
264 lines (264 loc) · 15.9 KB
/
html.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
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
261
262
263
264
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">OVERVIEW</h2>
<!-- /wp:heading -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">STRUCTURE</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Should be the first site</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>index.html</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Standard structure in the html-file</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><!DOCTYPE html><br><html><br> <head><br> <meta charset="utf-8"> # Define standard charset<br> <meta name="description" content="Techcrunch"> # Description of the site<br> <meta name="keywords" content="one, two, three"> # Keywords of the site<br> <meta name="viewport" content="width=device-width, initial-scale=1"> # Viewport Definition<br> <title>Techcrunch</title> # Title of the site<br> <link rel="preconnect" href="https://fonts.gstatic.com"> # Use Google Font Style<br> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> # Use Google Font Style<br> <link rel="stylesheet" href="css/normalize.css"> # Normalizing the CSS-Browser-Styles<br> <link rel="stylesheet" href="css/techcrunch_layout1.css"> # External CSS-File-Link<br> <script src="https://kit.fontawesome.com/bf5e040b82.js" crossorigin="anonymous"></script> # Use FontAwesome Icons<br> </head><br> <body><br> <!--Everything the user sees --><br> </body><br></html></code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">GROUPING, LAYOUT</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>grouping some html-area</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><div></div></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>main part of the homepage</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><main></main></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>part of the homepage - eg. the core middle of the site</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><section></section></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>part of the section - can be taken and dropped to another place</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><article></article></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>mostly on the side of the homepage - something you can take away and the page would still be working (eg. ads)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><aside></aside></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>eg. menue at the title</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><header>...</header></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Navigation info for the user (unordered ul list normaly)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><nav></nav></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>bottom of the document</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><footer></footer></code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">ELEMENTS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>commentar in HTML</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><!-- This is a comment --></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>anker link element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><a href="www.x.com">X</a></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>form element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><form action="search.html" method="post"><br> <label>Search:</label><br></form></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Normal Paragraph (long text)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><p>text</p></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Paragraph / Text with anchor link</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><p>Text <a href="www.x.com">X</a></p></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Paragraph with a class</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><p class="nine">Hello</p></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Short text</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><span>text</span></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Header1-Tag with Text (most important on the page)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><h1>Import Header</h1></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Header2-Tag with Text (second important)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><h2>2nd important thing</h1></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Header6-Tag with Text (sixth important thing on the page)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><h6>6th important thing</h1></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Insert picture - no close tag (with alternative text - when img can´t be displayed)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><img src="pic.jpeg" alt="text"></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Preserves whitespace (not good - should be done by CSS)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><pre> </pre></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>linebreak (not good - should be done by css)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>, </br></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>htmlbreak (not good - should be done by css)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><hr>, </hr></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Emphasis some text - but only for accessibility reason (not styling!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><em> Stress Emphasis </em></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Bold some text - but only for accessibility reason (not styling!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><strong> Strong Importance </strong></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Insert / embedd video with iframe</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><iframe src="" frameborder="0"></iframe></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Set JumpMark at a specific position in the html-file (jump to with index.html#1)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><a id="1"></a></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Insert video</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><video width="400" controls><br> <source src="mov1.mp4" type="video/mp4"><br> <source src="mov2.ogg" type="video/ogg"><br> Your browser does not support HTML video.<br></video></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Unordered List with anchor links</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><ul><br> <li><a href="x.html">One</a></li><br> <li><a href="y.html">Two</a></li><br> <li><a href="z.html">Three</a></li><br></ul></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Ordered List</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><ol><br> <li>One</li><br> <li>Two></li><br> <li>Three></li><br></ol></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Table Definition</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><table><br> <tr><br> <th>First table header</th><br> <th>Second table header</th><br> </tr><br> <tr><br> <td>First row, first column</td><br> <td>First row, second column</td><br> </tr><br> <tr><br> <td>Second row, first column</td><br> <td>Second row, second column</td><br> </tr><br></table></code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">FORMS, BUTTONS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Different input fields can be arranged in a form tag</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><form> ... </form></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Label is shown before the element(for-name should be ident with the id-name or name-tag of the object)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><label for="name">First Name:</label></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Text-Inputfield - with id, name and value (default)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><input type="text" id="name" name="" value=""></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Telephon-Inputfield - with id, name and value (default)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><input type="tel" name="" value=""></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>EMail-Inputfield - with id, name and value (default)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><input type="email" name="" value=""></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Range/Slider-Inputfield with id, name, min/max-value for the slider, value (default) and data-sizing-definition (px)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><input type="range" id="xyz" name="xyz" min="0" max="25" value="10" data-sizing="px"#</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Definition of a TextField for input with id, name, number of rows and columns</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><textarea id="textField" name="w3review" rows="4" cols="50"><br> Pls input your UPPERCASE text here!<br></textarea></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define Button with id, name and text on the button</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><button id="check" type="button" name="button">check</button></code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">TEMPLATE</h2>
<!-- /wp:heading -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">MARKDOWN FILE INTEGRATION</h2>
<!-- /wp:heading -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">CHROME EXTENSION TOOLS</h2>
<!-- /wp:heading -->