-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTML.txt
200 lines (154 loc) · 7.42 KB
/
HTML.txt
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
###########
### TOC ###
###########
#> OVERVIEW
#> STRUCTURE
#> GROUPING, LAYOUT
#> ELEMENTS
#> FORMS, BUTTONS
#> TEMPLATE
#> MARKDOWN FILE INTEGRATION
#> CHROME EXTENSION TOOLS
###### OVERVIEW
- HTML = content / structure (core focus...)
- CSS = style (a little bit...)
- JS = behaviour / interaction (a little bit...)
- bandwidth focus more html and less of css/js
###### STRUCTURE
- https://in.pinterest.com/pin/345862446359675335/
index.html => Should be the first site
=> Standard structure in the html-file
""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> # Define standard charset
<meta name="description" content="Techcrunch"> # Description of the site
<meta name="keywords" content="one, two, three"> # Keywords of the site
<meta name="viewport" content="width=device-width, initial-scale=1"> # Viewport Definition
<title>Techcrunch</title> # Title of the site
<link rel="preconnect" href="https://fonts.gstatic.com"> # Use Google Font Style
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> # Use Google Font Style
<link rel="stylesheet" href="css/normalize.css"> # Normalizing the CSS-Browser-Styles
<link rel="stylesheet" href="css/techcrunch_layout1.css"> # External CSS-File-Link
<script src="https://kit.fontawesome.com/bf5e040b82.js" crossorigin="anonymous"></script> # Use FontAwesome Icons
</head>
<body>
<!--Everything the user sees -->
</body>
</html>
""
###### GROUPING, LAYOUT
- https://www.w3schools.com/html/html_layout.asp
<div></div> => grouping some html-area
<main></main> => main part of the homepage
<section></section> => part of the homepage - eg. the core middle of the site
<article></article> => part of the section - can be taken and dropped to another place
<aside></aside> => mostly on the side of the homepage - something you can take away and the page would still be working (eg. ads)
<header>...</header> => eg. menue at the title
<nav></nav> => Navigation info for the user (unordered ul list normaly)
<footer></footer> => bottom of the document
###### ELEMENTS
- https://www.w3.org/community/webed/wiki/HTML/Training/Tag_syntax#:~:text=HTML%20is%20using%20tags%20for,to%20compose%20an%20HTML%20element.
- https://developer.mozilla.org/de/docs/Web/HTML/HTML5/HTML5_element_list
<!-- This is a comment --> => commentar in HTML
<a href="www.x.com">X</a> => anker link element
=> form element
""
<form action="search.html" method="post">
<label>Search:</label>
</form>
""
<p>text</p> => Normal Paragraph (long text)
<p>Text <a href="www.x.com">X</a></p> => Paragraph / Text with anchor link
<p class="nine">Hello</p> => Paragraph with a class
<span>text</span> => Short text
<h1>Import Header</h1> => Header1-Tag with Text (most important on the page)
<h2>2nd important thing</h1> => Header2-Tag with Text (second important)
<h6>6th important thing</h1> => Header6-Tag with Text (sixth important thing on the page)
<img src="pic.jpeg" alt="text"> => Insert picture - no close tag (with alternative text - when img can´t be displayed)
<pre> </pre> => Preserves whitespace (not good - should be done by CSS)
<br>, </br> => linebreak (not good - should be done by css)
<hr>, </hr> => htmlbreak (not good - should be done by css)
<em> Stress Emphasis </em> => Emphasis some text - but only for accessibility reason (not styling!)
<strong> Strong Importance </strong> => Bold some text - but only for accessibility reason (not styling!)
<iframe src="" frameborder="0"></iframe> => Insert / embedd video with iframe
<a id="1"></a> => Set JumpMark at a specific position in the html-file (jump to with index.html#1)
=> Insert video
""
<video width="400" controls>
<source src="mov1.mp4" type="video/mp4">
<source src="mov2.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
""
=> Unordered List with anchor links
""
<ul>
<li><a href="x.html">One</a></li>
<li><a href="y.html">Two</a></li>
<li><a href="z.html">Three</a></li>
</ul>
""
=> Ordered List
""
<ol>
<li>One</li>
<li>Two></li>
<li>Three></li>
</ol>
""
=> Table Definition
""
<table>
<tr>
<th>First table header</th>
<th>Second table header</th>
</tr>
<tr>
<td>First row, first column</td>
<td>First row, second column</td>
</tr>
<tr>
<td>Second row, first column</td>
<td>Second row, second column</td>
</tr>
</table>
""
###### FORMS, BUTTONS
<form> ... </form> => Different input fields can be arranged in a form tag
<label for="name">First Name:</label> => Label is shown before the element(for-name should be ident with the id-name or name-tag of the object)
<input type="text" id="name" name="" value=""> => Text-Inputfield - with id, name and value (default)
<input type="tel" name="" value=""> => Telephon-Inputfield - with id, name and value (default)
<input type="email" name="" value=""> => EMail-Inputfield - with id, name and value (default)
=> Range/Slider-Inputfield with id, name, min/max-value for the slider, value (default) and data-sizing-definition (px)
""
<input type="range" id="xyz" name="xyz" min="0" max="25" value="10" data-sizing="px"#
""
=> Definition of a TextField for input with id, name, number of rows and columns
""
<textarea id="textField" name="w3review" rows="4" cols="50">
Pls input your UPPERCASE text here!
</textarea>
""
=> Define Button with id, name and text on the button
""
<button id="check" type="button" name="button">check</button>
""
###### TEMPLATE
=> see Learning-Documentation
<a href="../docs/htmlTemplate.zip">link</a>
###### MARKDOWN FILE INTEGRATION
- Create Text-File
- Convert Text-File with ConverTXT_MD.py to MD-File
- Read MD-File with Markdown Monster - check if formating is ok in the editor
- Save To - Save to HTML - Choose Zip Archive - store the zip-file somewhere and extract
- Copy the part from <Markdown Monster Content> to <End Markdown Monster Content> in the HTML-File
###### CHROME EXTENSION TOOLS
- Wappalyzer - tool for showing which CMS is used, which e-commerce platform, marketing automation tool
- Window Resizer - resize the window for reponsive design
- Viewport Resizer - resize the window for reponsive design
- Marmoset - make an eye-catching snapshot form your code
- CSSViewer - show the css-styles on a site
- WhatFont - shows the used font on the site
- Lighthouse - audit the site - gives feedback what can / should be improved