-
Notifications
You must be signed in to change notification settings - Fork 0
/
course-notes.html
297 lines (269 loc) · 11.7 KB
/
course-notes.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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<!-- This is a notebook to follow the course
Old Websites (e.g. Yahoo 1996), almost only
used HTML for their websites. Some of the biggest
icons in computer science still only use HTML for their
own wesbites
-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Body vs. Head Tag</h1>
The portion of the code that will be displayed when rendering a html file is called body
<br>and all the content before or after the tag will not be shown (to be confirmed).
<br>The Head is for adding information for Google and setting the Character Set (should be UTF-8).
<br>It will also give information about whichv ersion of HTML is used so the Browser knows how to translate it.
<br>
<hr size=8>
<h1>Text Elements</h1>
<h2>Header Tags</h2>
<h3>Are not self-closing -> they need a code snippet at the end ("/")</h3>
<h4>This Element automatically adds some space after a line.</h4>
<h6>Headers will only go until Level 6</h6>
<br>
<hr size=4 noshade>
<h2>Text</h2>
There are two ways to <em>add</em> simple text: Free text without tags/elements
or with using paragraphs:
<p>(1) Only if we
<br>use a paragraph "p"
<br>and line brekaer element "br" to get to a new line in the text
<br>we ensure that the text does not have too big of a space between lines.
<br>Writing on a new line <strong>in...
the...
code</strong> will not create a line break.
</p>
<p>Creating a new paragraph looks like this.
<br>Here I am using the "br" tag again to control the text width.
<br>However, to display the text correctly on Mobile Phones, one should use other elements (to be researched)
</p>
This is an example of writing text on a new line after closing the paragraph text. It does the same as a new paragraph.
<br>
<br>
Adding the br (>2x) element can create the look of a new paragraph, but with a empty line in between.
<br> Self-closing tags: "br" tags are self-closing, i.e. they don't need a snippet of code at the end.
<br>
<h3>Formatting and Separation</h3>
The hr element creates a customizable horizontal rule (can add a line).
<br>It is customizable in height (size attribute) and appearance (noshade attribute).
<br>
<br>
<br>
<center> The center tag will center the text. <em>Emphasis</em> and <strong>Strong</strong> Elements will add simple formatting</center>
<br>
<h3>Lists</h3>
<ol type="i" start="3">
<li>to define an ordered list use "ol(=ordered list)" and for each item "li=(list item)"
<li>to use Roman numbers add the attribute 'type="i"'
<li>you can start with another number by defining 'start="x"''. But in any case you should close a list item with "/li"</li>
</ol>
<ul>
<li>here's an example of a bulletpoint list
<ul>
<li>and a nested example looks like this (add new ul or ol)
</ul>
<li>you can close finish nesting the same way you would finish ...
</ul> ... a normal list (see the automatic Line Breaker?)
<br>
<hr size=4 noshade>
<h2>Images</h2>
<p>To include images you can use the self-closing tag img. And one of these options:
<br><strong>(1)</strong> If a source (src)is in the same directory as the html file, it can be specified
with the file name e.g. image1.png
<br><strong>(2)</strong> or you can just use an URL - the image will be retrieved from a server.
</p>
<br>
<img src="https://media-exp1.licdn.com/dms/image/C5603AQGWauQWucv4AQ/profile-displayphoto-shrink_200_200/0/1565703056173?e=1613001600&v=beta&t=9tqu4oeFDwr2ekMtTLr6KK9SEX98OLXgzzyTcTDWeSs">
<img src="images/martin-gajdos-linkedin.jpeg" alt="This is the picture I have saved on in the subdirectorx images/ of this project.">
<br>
<hr size=4 noshade>
<h2>Hyperlinks</h2>
<p>HTML means Hypertext Markup Language. The idea is that we can use Hypertext,
that let's you jump from one Text/HTML Page to another.
An example of this is Thewikigame.com where you can click on multiple highlighted
text portions until it won't take you further.
<br>To add a clickable link in a text element you can use the
<strong><a href="https://www.linkedin.com/in/martin-gajdos-a41b798b/">Anchor element "a"</a></strong>.
<br>Its main attribute "href" will take you to the URL destination. After the link,
another "<" has to be used before the text.</p>
<br>
<hr size=4 noshade>
<h2>Tables</h2>
<p>To add tables, use the table tag. A table can have a head (thead) and a body (tbody), just like an html page, but a head is not necessary.
In the body and head you always first create table rows (tr) after the table tag (horizontal line where the data will go from left to right).
For each row you can fill in as many table cells as you want by using a th (=> special: table header cell) or td tag (=> table data cell).</p>
<p>Using thead and tfoot sections makes sense so we can freeze the table header cells in a later stage (intermediate HTML).
Table footers are optional sections for table cells (most tables only use thead and tbody)</p>
<br>
<p>Other attributes can be applied (like border => attribute of table element) to change the appearance of tables.
However, they are "deprecated", which means that it not longer recommended. HTML is for structure, CSS is for Styling and JavaScript is for behaviour.</p>
<table border="1">
<thead>
<tr>
<th>Fruits</th>
<th>Office Supplies</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bananas from Nicaragua</td>
<td>Pen</td>
</tr>
<tr>
<td>Apples from Marion's Grandma</td>
<td>Paper</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>asd</td>
<td>asd</td>
</tr>
</tfoot>
</table>
<hr>
<h3>Styling with Tables (Layout)</h3>
<p>Layouting with HTML, by default, is only possible from top to bottom.
With Tables we can add horizontal sections. Nowadays we are using CSS for more
copmlex Layout options, however, this is a viable way of doing the same thing.</p>
<p>The cell spacing attribute for tables adds a border between the Image and the text on the right (deprecated).</p>
<table cellspacing="10">
<tr>
<td><img src="images/martin-gajdos-linkedin.jpeg" alt="This is the picture I have saved on in the subdirectorx images/ of this project.">
</td>
<td>
<h3>Martin Gajdos</h3>
<p><em>LegalTech enthusiast</em></p>
<p>Law student and and part-time Employee</p>
<br>
<strong>Professional Experience</strong>
<ul>
<li>Contract Digital Tool Expert (Swiss Re)</li>
<li>Business Developer (LEXR)</li>
<li>Legal Assistant (LEXR)</li>
</ul>
</td>
</tr>
</table>
<hr>
<h3>Skills List (Table Challenge)</h3>
<table cellspacing="15">
<tr>
<td>
<table cellspacing="10">
<tr>
<td>HTML</td>
<td>★★☆☆☆</td>
<tr>
<td>CSS</td>
<td>☆☆☆☆☆</td>
</tr>
<tr>
<td>JavaScript</td>
<td>☆☆☆☆☆</td>
</tr>
</table>
</td>
<td>
<table cellspacing="10">
<tr>
<td>PHP</td>
<td>☆☆☆☆☆</td>
</tr>
<tr>
<td>Node.js</td>
<td>☆☆☆☆☆</td>
</tr>
</table>
</td>
</table>
<hr>
<a href="hobbies.html">My Hobbies</a> <a href="course-notes.html">Web Dev Course</a> <a href="contact-me.html">Contact Me</a>
<h2>Collect Data (HTML Forms)</h2>
<p>The form element will create a place where users of a website can submit data or interact with the website (e.g. change color etc.).
Because Forms do not only affect the layout of a website, Javascript knowledge is necessary to fully understand this element.
</p>
<p> The most important elements in forms are, label (auto-fill: delete all attributes) and input.
The input element is used to create interactive controls for web-based forms.
It is one of the most powerful and complex in all of HTML. We can learn more about the input element on <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input">Mozilla Developer Network</a>.
</p>
<p>The deafult action attribute for the form element is "bring me to the index.html" when clicking on the submit button.
We changed this attribute to "mailto:", which opens up the E-Mail Software on the PC.
<br>We also added the Encoding Type "text/plain" to the form element, so the "action" knows that we want the text filled out in Name, Email and Message to be displayed normally.
<br>To know which one is which, we added for each of the inputs (1-3) a name attribute (yourName, yourEmail, yourMessage).
This will be displayed before the actual text hwne the email si created.</p>
<p>Example for Forms (Created in a Table):</p>
<form class="" action="mailto:martin.gajdos@me.com" method="post" enctype="text/plain">
<table>
<tr>
<td><label>Your Name:</label>
</td>
<td><input type="text" name="yourName" value=""><br>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td><label>Your E-Mail:</label>
</td>
<td><input type="email" name="yourEmail" value=""><br>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td><label>Your Message:</label></td>
<td><textarea name="yourMessage" rows="8" cols="10"></textarea><br></td>
<td><input type="submit" name=""></td>
<td><em>input elements can have <strong>types</strong> like "text" and "submit" (auto-fill: delete the "value" attribute so it shows "Submit" by default).
The <strong>textarea element</strong>'s height and width is defined by rows and columns.</em></td>
</tr>
<tr>
<td><label>Password</label>
</td>
<td><input type="password" name="" value="">
</td>
<td><input type="color" name="" value=""></td>
<td><em>Other input <strong>types</strong> are "password" and "color".</em></td>
</tr>
<tr>
<td><label>Do you want to sign up for the Newsletter?</label>
</td>
<td><input type="checkbox" name="" value="">
</td>
<td></td>
<td><em>Other Examples of input (checkboc, file, date,, radio, range).</em></td>
</tr>
<tr>
<td><label>File</label>
</td>
<td><input type="file" name="" value="">
</td>
<td></td>
<td></td>
</tr>
<tr>
<td><label>Date</label>
</td>
<td><input type="date" name="" value="">
</td>
<td><input type="radio" name="" value=""></td>
<td></td>
</tr>
<tr>
<td><label>How much do you like this form?</label>
</td>
<td><input type="range" name="" value="">
</td>
<td></td>
<td></td>
</tr>
</table>
</form>
<h2>Hosting Basics (Github)</h2>
<p>To publish our Website publicly</p>
</body>
</html>