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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
|
<!DOCTYPE html>
<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta content="pandoc" name="generator"/>
<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/>
<title>quick-intro-html-css</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link href="../../static/main.css" rel="stylesheet"/>
</head>
<body>
<nav id="TOC" role="doc-toc">
<h2 id="toc-title">Contents</h2>
<ul>
<li><a href="#web-browsers-render-code" id="toc-web-browsers-render-code" target="_self">Web browsers render code</a>
<ul>
<li><a href="#html" id="toc-html" target="_self">HTML</a>
<ul>
<li><a href="#basic-format" id="toc-basic-format" target="_self">Basic Format</a></li>
<li><a href="#tables-and-links" id="toc-tables-and-links" target="_self">Tables and
Links</a></li>
<li><a href="#and-everything-else..." id="toc-and-everything-else..." target="_self">And Everything Else...</a>
<ul>
<li><a href="#shortlist-of-text-and-formatting-tags" id="toc-shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text and
Formatting Tags</a></li>
</ul></li>
<li><a href="#html-metadata" id="toc-html-metadata" target="_self">HTML
Metadata</a></li>
</ul></li>
<li><a href="#css" id="toc-css" target="_self">CSS</a>
<ul>
<li><a href="#add-style-without-css" id="toc-add-style-without-css" target="_self">Add
style <em>without</em> CSS</a></li>
<li><a href="#basic-formatting" id="toc-basic-formatting" target="_self">Basic
Formatting</a></li>
<li><a href="#image-formatting" id="toc-image-formatting" target="_self">Image
Formatting</a></li>
<li><a href="#making-custom-classes" id="toc-making-custom-classes" target="_self">Making Custom Classes</a>
<ul>
<li><a href="#use-the-div-tag-to-make-sections" id="toc-use-the-div-tag-to-make-sections" target="_self">Use the div tag to make
sections</a></li>
</ul></li>
<li><a href="#mobile-optimization" id="toc-mobile-optimization" target="_self">Mobile
Optimization</a></li>
</ul></li>
<li><a href="#how-to-look-things-up" id="toc-how-to-look-things-up" target="_self">How
to look things up</a></li>
<li><a href="#references" id="toc-references" target="_self">References</a>
<ul>
<li><a href="#html-1" id="toc-html-1" target="_self">HTML</a></li>
<li><a href="#css-1" id="toc-css-1" target="_self">CSS</a></li>
</ul></li>
</ul></li>
</ul>
</nav>
<p><em>Note: you should run the examples to see how they work. You can
either write the files yourself and open them in a web browser, or use
an online HTML editor like</em> <a href="https://html-css-js.com/"><em>this one</em></a></p>
<p>As you can see from the current state of this site, I'm not exactly
exactly the most skilled web designer. But I struggled through the
basics enough to get an idiot's sense of front-end web design, so that
perspective might be useful if you have no clue where to start with this
like I did.</p>
<p>The building blocks are very simple, <em>but there's a lot of
blocks</em>. The <a href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5
specification</a>, which most browsers are built around, defines the
semantics of elements that can should be rendered by a web browser. CSS
similarly defines the <em>attributes</em>--or styles--that can be
applied to those elements in a format specified <a href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into
the weeds like professional designers do--and to be honest, I don't
really want to. But I <em>do</em> like understanding how things work.
And getting a unique custom HTML site is something anyone with a text
editor and a web browser can get done in a weekend.</p>
<h1 id="web-browsers-render-code">Web browsers render code</h1>
<p>The specifications linked above are followed religiously by major web
browsers like Chromium, Firefox, and Safari so that each symbol defined
in the standard defines font, graphics, animations, layouts and all
kinds of neat stuff you can stick in an HTML document. But what is that
exactly?</p>
<h2 id="html">HTML</h2>
<p>An HTML file is just a text file that follows the format of HTML.
HTML stands for "Hyper Text Markup Language" and is very much like
standard programming languages in that it maps symbols to things you
actually see in your browser. It is not a true programming language
since you can't run it or compile it on it's own like a typical computer
program. You need another program, a web browser, to make sense of
it.</p>
<h3 id="basic-format">Basic Format</h3>
<p>All HTML files start with the following (note: the spacing does not
matter, it's just spaced for readability):</p>
<pre><code><html>
<body>
<!-- stuff you see goes here -->
</body>
</html></code></pre>
<p>You'll notice two <em>tags</em> here. An "html" tag, and a "body"
tag, both of which are closed with "</html>" and "</body>"
to signify where the sections end. The HTML document proper is anything
between the HTML tags. The body of the document contains the actual
content that the user sees. For example:</p>
<pre><code><html>
<body>
<h1>My Great page</h1>
<p>My great paragraph</p>
</body>
</html></code></pre>
<p>We've introduced two more tags here, both of which are closed within
the body section. The "h1" tag defines a "Heading" which tells the
browser to render the text big and bold, like a document title. You can
define subheadings just by using a different number like "h2" instead of
"h1." The second tag "p" defines a paragraph, which by default, renders
the text normally. Check out how it looks so far by saving the above
text in a file called "page.html" and open it in your browser.</p>
<h3 id="tables-and-links">Tables and Links</h3>
<p>We can do a lot more than text of course. Let's walk through some
more tags in this example:</p>
<pre><code><html>
<body>
<h1>My Great page</h1>
<p>My great paragraph</p>
<br>
<h3>Please check out these links, really cool stuff!</h3>
<center>
<table>
<tr>
<td>FSF!</td>
<td>
<a href="https://www.fsf.org/">
<img src="https://static/media.fsf.org/common/img/logo-new.png" />
</a></td>
</tr>
<tr>
<td>LOONIX!</td>
<td>
<a href="https://www.kernel.org/">
<img src="https://www.kernel.org/theme/images/logos/tux.png" />
</a>
</td>
</tr>
</table>
</center>
</body>
</html></code></pre>
<p>We added a few things here, but it's the same pattern right?
<open></close>.</p>
<p>We started by adding a "center" tag, which does what you think: it
aligns the content to the center of whatever screen it's being viewed
on. This is applied to the table and all the text within the table.</p>
<p>The next is the "table" tag which, you guessed it, arranges elements
in rows and columns like a data table. The "table" tag always comes with
two sub tags for the row and column: "tr" and "td." You always write the
row first and put each "data" column inside (I'm guessing the "d" in
"td" stands for data; I'm actually not sure). By default, "td" works a
lot like "p" does--it'll just spit out whatever text you put in.</p>
<p>To spice things up though, I introduced a new element instead;
probably the most important feature of HTML. The "a" tag lets you link
to other documents on your site, or <em>to any other URL in the
world</em>. On it's own, the "a" tag doesn't do anything special. We
need to use the tag with an <em>attribute</em>--an extra word that comes
after a--in order to make it work for us. A more basic example might be
this:</p>
<pre><code><a href="https://example.com">Example</a></code></pre>
<p>Which you'll see as:</p>
<p><a href="https://example.com">Example</a></p>
<p>The "href" attribute doesn't <em>have</em> to point to some other
website; it can point to anything. For example, you might want to link
to picture your cat (maybe hosted at "/var/www/cat.jpg"). You would do
it like this:</p>
<pre><code><a href="/cat.jpg">example</a></code></pre>
<p>You can also link an email like this</p>
<pre><code><a href="mailto:email@example.com">example email</a>
</code></pre>
<p>Let's say you had a barebones site with 5 HTML files named:
index.html, about.html, faq.html, cats.html, vidya.html. You can make a
neat little navbar just using "a" tags like this:</p>
<pre><code><a href="/index.html">home</a>
- <a href="/about.html">about</a>
- <a href="/faq.html">faq</a>
- <a href="/cats.html">cats</a>
- <a href="/vidya.html">vidya</a></code></pre>
<h3 id="and-everything-else...">And Everything Else...</h3>
<p>There are many other tags out there, many of which I don't know, and
one which I mentioned before, but didn't explain yet: the "img" tag. In
the earlier example with "cat.jpg" we linked <em>to</em> the image, but
if we want to render it, we need to use "img" with it's main attribute
"src." The "src" attribute works like "href" does as it points to the
path where the image is. Note the "img" tag is also a bit different
since it doesn't have a closing tag. This is intentional. Other tags
were enclosing sections of text and content. This is simply
<em>inserting</em> an element right into the document.</p>
<p>What you can do with the "img" tag, and what you can do with HTML
tags in general, is limited only by the browser that's reading the HTML.
The Mozilla Firefox "img" tag has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long
page</a> on all the different attributes and effects you can apply to
images.</p>
<p>There are many places you can get all the common elements laid out
for you, and it's important to bookmark those and refer to them
frequently when you're thinking about designing your webpage. A common
referral from search engines is <a href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which
is a great resource. I personally like to look at the HTML elements
reference of a common web browser like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a>
so I know exactly which elements work.</p>
<p>If you're like me, a referral to a long reference manual can
sometimes seem kind of daunting. So if you're feeling that way, here's a
quick table of the HTML elements I tend to use a lot and how I use them
for formatting text. I won't go into <em>interactive</em> elements like
buttons and text input since that will involve another programming
language like PHP, Javascript, or Python.</p>
<h4 id="shortlist-of-text-and-formatting-tags">Shortlist of Text and
Formatting Tags</h4>
<center>
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<th>
<strong>tag</strong>
</th>
<th>
<strong>function</strong>
</th>
</tr>
<tr>
<td>
<i>
</td>
<td>
<i>italic text</i>
</td>
</tr>
<tr>
<td>
<b>
</td>
<td>
<strong>bold text</strong>
</td>
</tr>
<tr>
<td>
<ol> and <ul>
</td>
<td>
<ol>
<li>
numbered lists
</li>
</ol>
<ul>
<li>
bulleted lists
</li>
</ul>
</td>
</tr>
<tr>
<td>
<li>
</td>
<td>
The items in those lists
</td>
</tr>
<tr>
<td>
<pre> and <code>
</td>
<td>
<pre>These tags preserve
white space.
</pre>
</td>
</tr>
<tr>
<td>
<small>
</td>
<td>
<small>makes text smol</small>
</td>
</tr>
<tr>
<td>
<iframe>
</td>
<td>
Embeds another html file in the current one. Here's your IP from
ipaddress.sh:<br/> <iframe src="https://ipaddress.sh/"></iframe>
</td>
</tr>
</table>
</center>
<h3 id="html-metadata">HTML Metadata</h3>
<p>Everything we discussed so far was only about <em>one section</em> of
the HTML document: the "body." We haven't touched the "head" at all. If
we can put all our content in the body, what do we even need it for?</p>
<p>Even though (most) of the things in the head aren't rendered by the
browser, it still provides useful information to the browser and to
search engines indexing the site that can improve the user experience.
The most common thing you'll see in the head section is the site's
title, and something called "meta" tags. As usual, it's best to see an
example:</p>
<pre><code><html>
<head>
<title>My Great page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="a really cool page">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/media/main.css">
</head>
<body>
<h1>My Great page</h1>
<p>My great paragraph</p>
</body>
</html></code></pre>
<p>Note that the "meta" tag works like the "img" tag did and has no
closing tag.</p>
<p>The first tag in the head is the "title" tag. This is the title of
document as it will appear when the page is opened in a browser tab. It
is also the title that will show up in search engines. Otherwise, it has
no effect on the content rendered.</p>
<p>Likewise, the proceeding "meta" tags also send info to the browser
and to search engines for convenience. Most sites will have tags with
the attributes "name" and "content" as set above. The first one we see
sets the content type of the document. This is a bit redundant, but
making it as well as the character set explicit is useful for older web
browsers that need it.</p>
<p>Next up are some tags as a courtesy to search engines. The one named
"description" is the short description you're familiar with from search
engine results. The "keywords" are a comma separated list of word you
want associated with the content of your site--this is again another
hint to search engines when they add your site to their database.
"Author" serves a similar purpose.</p>
<p>That last meta tag looks a bit funky, but it's purpose is to assist
in scaling your website on all devices. For a standard browser on a
desktop, it just sets the zoom of the text 100% (be default). On mobile,
it will adjust accordingly.</p>
<p>As is the trend, "meta" is just a building block on which you can
build a lot of functionality. Be sure to check the references at the end
for a full treatment of the topic.</p>
<h2 id="css">CSS</h2>
<p>In our last example, I left one tag left untreated, because it
segways into yet another format of file closely linked to HTML:
Cascading Style Sheets (CSS).</p>
<p>The "link" tag in the metadata sections can link any external
resource. It's commonly used to make a "favicon" for example, which is
the icon you see in the tab of an open page.</p>
<pre><code><link rel="icon" href="/favicon.ico"></code></pre>
<p>In the last example, we instead make a reference to a CSS formatted
style sheet. Like HTML, CSS is just a text file written in a specific
syntax. CSS allows you to set attributes to <em>all</em> tags in a
specific document and create a unifying style for all your pages.</p>
<pre><code><link rel="stylesheet" type="text/css" href="/static/media/main.css"></code></pre>
<p>As before, "href" points to the file to be linked. In this example,
we place our CSS in a text file called "main.css" in the "static"
directory of "/var/www/html".</p>
<h3 id="add-style-without-css">Add style <em>without</em> CSS</h3>
<p>Before we make CSS files, I want to stress the point that all this
stuff is defined in HTML. You can set these attributes directly in any
tag we talked about in the last section. For example:</p>
<pre><code><p style="color:red">this text is red</p>
<p style="color:red;background-color:blue">this background is blue</p>
<p style="color:red;background-color:blue;text-align:center">this text is centered</p>
<a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2"
target="_blank"
rel="noopener noreferrer"
style="color:yellow;background-color:red;text-align:right"
>
And this links to sonichu
</a></code></pre>
<p style="color:red">
this text is red
</p>
<p style="color:red;background-color:blue">
this background is blue
</p>
<p style="color:red;background-color:blue;text-align:center">
this text is centered
</p>
<p><a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2" rel="noopener noreferrer" style="color:yellow;background-color:red;text-align:justify;width:100%" target="_blank"> And this links to sonichu </a></p>
<p>This is useful if you want to play around with one section of the
text, but annoying if you want a style to apply to every paragraph.
Instead, we tag a list of tags and set <em>all</em> their attributes
using a CSS file.</p>
<h3 id="basic-formatting">Basic Formatting</h3>
<p>For any HTML tag, you can set an attribute that applies everytime it
appears in an HTML document that links to the CSS file. A common
formatting I use for paragraphs is:</p>
<pre><code>p {
margin-top: 1.5%;
margin-bottom: 1.5%;
}</code></pre>
<p>And to highlight code, like you've been seeing, I use:</p>
<pre><code>code {
display: inline-block;
font-size: 125%;
background-color: #d8d8d8;
white-space: pre-wrap;
word-wrap: break-all;
}</code></pre>
<p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in
order these lines:</p>
<ul>
<li>Add padding to the text lines to fill any empty space with space
characters (this make the background look like a block)</li>
<li>Increase the font size a bit more than normal</li>
<li>Set the background color gray, chosen from an <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML color
picker</a></li>
<li>preserve white space, like the pre tag does</li>
<li>break long lines, even in the middle of words</li>
</ul>
<h3 id="image-formatting">Image Formatting</h3>
<p>Images get more styles in CSS than I can document in detail, but one
important bit you'll want to probably add to all images is the
following.</p>
<pre><code>img {
max-width: 100%;
height: auto;
width: auto;
}</code></pre>
<p>This does the following:</p>
<ul>
<li>constrains the image so it doesn't stretch the page</li>
<li>automatically scales the height of the image on zoom</li>
<li>automatically scales the width of the image on zoom</li>
</ul>
<p>The reason I like this is that when user's zoom on your image, or
view on mobile, the image scales to fit the screen; it never gets cutoff
or distorted.</p>
<p>In addition to this basic stuff, you can style your images heavily
using the filter option like so:</p>
<pre><code>img.gray {
filter: grayscale(100%)
}</code></pre>
<p>Applied:</p>
<p><img src="/static/media/jazzcat.jpg" style="filter:grayscale(100%)"/></p>
<p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about
the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p>
<h3 id="making-custom-classes">Making Custom Classes</h3>
<p>Sometimes, you might want to apply an effect to some elements but not
others. An example on this site, I dim the icons a bit so they can
appear nice on dark theme browsers just as well. But I don't want to dim
<em>all</em> images like in the following example:</p>
<pre><code>img {
filter: invert(50%);
}</code></pre>
<p>For one, that will only dim black-and-white images; anything else
will just turn to mush like this:</p>
<p><img class="icon" src="/static/media/jazzcat.jpg"/></p>
<p>Instead, I'd like it to just apply to select elements; I can do so by
extending the tag with a class. On the CSS side:</p>
<pre><code>img.icon {
filter: invert(50%);
}</code></pre>
<p>And to implement it in HTML:</p>
<pre><code><img class="icon" src="/static/media/rss.svg" /></code></pre>
<p><img class="icon" src="/static/media/rss.svg"/></p>
<h4 id="use-the-div-tag-to-make-sections">Use the div tag to make
sections</h4>
<p>You can use the class property on <em>any</em> HTML tag, but you can
also make general purpose classes that apply to a group of elements.
Let's say you wanted to center a heading, a paragraph, and a picture,
and constrain them to only part of the page, so that there's some
margins on the left and right. We can put them all in one content
section like this:</p>
<pre><code>.content {
text-align: center;
max-width: 85%;
}</code></pre>
<p>Notice, no leading tag. This can be applied to <em>any</em> element,
but usually we use a placeholder tag called "div." You can think of
"div" like a divider for content of similar style. In the present
example, we can use the class we made with a div tag:</p>
<pre><code><div class="content">
<h1>My cat</h1>
<p>He's a cool cat</p>
<img src="/cat.jpg" />
</div></code></pre>
<h3 id="mobile-optimization">Mobile Optimization</h3>
<p>In early development, reading this site on my phone was a painful
experience. Fortunately, in addition to some tricks above like the
"viewport" meta tag, there exist parts of the CSS specification that
allow you to directly manipulate your website based on properties of the
user's device or web browser.</p>
<p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>,
but for your basic smartphone, you can copy and paste this block:</p>
<pre><code>@media screen and (max-device-width: 480px) {
// override your tags here
body {
font-size: 125%;
}
}</code></pre>
<p>This basic example makes the text slightly bigger on smartphone
screens, but you can change everything you need to. I typically find I
need to adjust the padding or the margins since it seems mobile browsers
add a little more style than a typical desktop web browser.</p>
<p>It's also a good idea in general to put percentages as the values for
your CSS attributes, so that size is always defined relative to all the
other elements. This makes functions like zoom work a lot better. You
can for example put a pixel value like this:</p>
<pre><code>body {
font-size: 14px;
}</code></pre>
<p>But this binds the size to 14 pixels which may look great on desktop,
but small on a smart phone.</p>
<h2 id="how-to-look-things-up">How to look things up</h2>
<p>This is a frowned upon, poorly taught skill that any person on this
side of the century needs. As I said at the outset, the blocks are
simple, but <em>there are a lot of blocks</em>. We've gone over a few
that make the site you're looking at what it is. But you're going to
need to seek out the rest on your own if you want to make your own
unique designs.</p>
<p>Your browser is more powerful then I let on earlier. It does just
render code, <em>it can edit it too</em>. You might be familiar with the
developer console. Most browsers I know can access this just by right
clicking anywhere on a page and hitting "Inspect" or "view in Developer
Console," or something like that. At the very least, you should have the
option to "view page source." You can view the HTML, CSS, and various
other things that you're seeing on the webpage written out in code in
the developer console. Double click a value and you'll notice <em>you
can change it</em>. A really fun way to learn this stuff is messing with
other people's websites--don't worry, it's totally okay to change the
HTML! It only changes the document being rendered on <em>your end</em>.
Once you refresh your changes are gone. Why don't you try it here?</p>
<!--Welcome the source code, hope you enjoy your stay :) -->
<p>The Internet itself is the greatest source of examples to learn this.
Fancy websites tend to be inscrutable messes--largely on purpose, so you
can't steal their design. But simple sites like this one are easy to
break apart and grasp. If you scroll up, you'll notice some of the
examples are copied and pasted exactly into this document! Don't be
afraid to do a bit of copy and pasting when you see a design you like,
just try to give credit where credit is due.</p>
<p>When you're done mindlessly clicking through source code though, and
you want to get something done <em>your way</em>, you need to have a
search engine handy, and preferably a few reference manuals handy.
They're a bit scattered throughout this document, but if you've learned
nothing else, these are the must haves:</p>
<ul>
<li>Mozilla <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a>
and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li>
<li>w3schools <a href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li>
<li>The official w3 docs <a href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li>
</ul>
<h2 id="references">References</h2>
<h3 id="html-1">HTML</h3>
<ol type="1">
<li>https://www.w3.org/standards/webdesign/htmlcss</li>
</ol>
<p><em><body></em></p>
<ol start="2" type="1">
<li>https://dev.w3.org/html5/spec-LC/semantics.html#semantics</li>
<li>https://developer.mozilla.org/en-US/docs/Web/HTML/Element</li>
</ol>
<p><em><head></em></p>
<ol start="4" type="1">
<li>https://www.w3schools.com/tags/tag_meta.asp</li>
<li>https://www.w3schools.com/css/css_rwd_viewport.asp</li>
<li>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link</li>
</ol>
<h3 id="css-1">CSS</h3>
<p>// basics</p>
<ol type="1">
<li>https://www.w3schools.com/CSSref/default.asp</li>
<li>https://www.w3.org/Style/Examples/011/firstcss</li>
<li>https://www.w3schools.com/TAGS/att_style.asp</li>
</ol>
<p>// mobile</p>
<ol start="4" type="1">
<li>https://www.w3.org/TR/mediaqueries-4/</li>
<li>https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b</li>
<li>https://stallman.org/common/stallman.css</li>
</ol>
</body>
</html>
|
