diff options
| author | mjfernez <mjf@mjfer.net> | 2026-06-28 14:44:00 -0400 |
|---|---|---|
| committer | mjfernez <mjf@mjfer.net> | 2026-06-28 14:44:00 -0400 |
| commit | 62e8467e59d7d30d7cbda080f6b5f1d37a17d905 (patch) | |
| tree | 3d7c7797862bfdd0efe19d991ba5180eed689f7d /tutorials/www/quick-intro-html-css.html | |
| parent | 15a267bf0a5d47ec0189261d1ce0cfd5e4268c66 (diff) | |
2026 Touch up, mostly FAQ
Diffstat (limited to 'tutorials/www/quick-intro-html-css.html')
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 211 |
1 files changed, 98 insertions, 113 deletions
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 1ea2fbf..93169db 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -8,22 +8,12 @@ <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;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} 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;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,43 +83,37 @@ <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> +<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a> <ul> -<li><a href="#html" id="toc-html" target="_self">HTML</a> +<li><a href="#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> +<li><a href="#basic-format" target="_self">Basic Format</a></li> +<li><a href="#tables-and-links" target="_self">Tables and Links</a></li> +<li><a href="#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> +<li><a href="#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> +<li><a href="#html-metadata" target="_self">HTML Metadata</a></li> </ul></li> -<li><a href="#css" id="toc-css" target="_self">CSS</a> +<li><a href="#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> +<li><a href="#add-style-without-css" target="_self">Add style <em>without</em> +CSS</a></li> +<li><a href="#basic-formatting" target="_self">Basic Formatting</a></li> +<li><a href="#image-formatting" target="_self">Image Formatting</a></li> +<li><a href="#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 +<li><a href="#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> +<li><a href="#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> +<li><a href="#how-to-look-things-up" target="_self">How to look things up</a></li> +<li><a href="#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> +<li><a href="#html-1" target="_self">HTML</a></li> +<li><a href="#css-1" target="_self">CSS</a></li> </ul></li> </ul></li> </ul> @@ -168,22 +153,22 @@ 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> -<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> +<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a> <span class="kw"><body></span></span> <span id="cb1-3"><a aria-hidden="true" href="#cb1-3" tabindex="-1"></a> <span class="co"><!-- stuff you see goes here --></span></span> -<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>My great paragraph<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a> <span class="kw"><body></span></span> +<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a> <span class="kw"><h1></span>My Great page<span class="kw"></h1></span></span> +<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a> <span class="kw"><p></span>My great paragraph<span class="kw"></p></span></span> +<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <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 @@ -194,33 +179,33 @@ 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> -<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>My great paragraph<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a> <span class="dt"><</span><span class="kw">br</span><span class="dt">></span></span> -<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h3</span><span class="dt">></span>Please check out these links, really cool stuff!<span class="dt"></</span><span class="kw">h3</span><span class="dt">></span></span> -<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a> <span class="dt"><</span><span class="kw">center</span><span class="dt">></span></span> -<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a> <span class="dt"><</span><span class="kw">table</span><span class="dt">></span></span> -<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a> <span class="dt"><</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span>FSF!<span class="dt"></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a> <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="dt">></span></span> -<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a> <span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="dt">/></span></span> -<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a> <span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a> <span class="dt"></</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a> <span class="dt"><</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span>LOONIX!<span class="dt"></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a> <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="dt">></span></span> -<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a> <span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="dt">/></span></span> -<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a> <span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a> <span class="dt"></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a> <span class="dt"></</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a> <span class="dt"></</span><span class="kw">table</span><span class="dt">></span></span> -<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a> <span class="dt"></</span><span class="kw">center</span><span class="dt">></span></span> -<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a> <span class="kw"><body></span></span> +<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a> <span class="kw"><h1></span>My Great page<span class="kw"></h1></span></span> +<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a> <span class="kw"><p></span>My great paragraph<span class="kw"></p></span></span> +<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a> <span class="kw"><br></span></span> +<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a> <span class="kw"><h3></span>Please check out these links, really cool stuff!<span class="kw"></h3></span></span> +<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a> <span class="kw"><center></span></span> +<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a> <span class="kw"><table></span></span> +<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a> <span class="kw"><tr></span></span> +<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a> <span class="kw"><td></span>FSF!<span class="kw"></td></span></span> +<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a> <span class="kw"><td></span></span> +<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a> <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="kw">></span></span> +<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a> <span class="kw"><img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="kw">/></span></span> +<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a> <span class="kw"></a></td></span></span> +<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a> <span class="kw"></tr></span></span> +<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a> <span class="kw"><tr></span></span> +<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a> <span class="kw"><td></span>LOONIX!<span class="kw"></td></span></span> +<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a> <span class="kw"><td></span></span> +<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a> <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="kw">></span></span> +<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a> <span class="kw"><img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="kw">/></span></span> +<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a> <span class="kw"></a></span></span> +<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a> <span class="kw"></td></span></span> +<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a> <span class="kw"></tr></span></span> +<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a> <span class="kw"></table></span></span> +<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a> <span class="kw"></center></span></span> +<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <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 @@ -239,24 +224,24 @@ 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> -<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="dt">></span>Example<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="kw">></span>Example<span class="kw"></a></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="dt">></span>example<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="kw">></span>example<span class="kw"></a></span></span></code></pre></div> <p>You can also link an email like this</p> -<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="dt">></span>example email<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="kw">></span>example email<span class="kw"></a></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="dt">></span>home<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="dt">></span>about<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="dt">></span>faq<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="dt">></span>cats<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="dt">></span>vidya<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="kw">></span>home<span class="kw"></a></span></span> +<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="kw">></span>about<span class="kw"></a></span></span> +<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="kw">></span>faq<span class="kw"></a></span></span> +<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="kw">></span>cats<span class="kw"></a></span></span> +<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="kw">></span>vidya<span class="kw"></a></span></span></code></pre></div> <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 @@ -377,21 +362,21 @@ 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> -<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">head</span><span class="dt">></span></span> -<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a> <span class="dt"><</span><span class="kw">title</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">title</span><span class="dt">></span></span> -<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="dt">/></span></span> -<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="dt">></span></span> -<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="dt">></span></span> -<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="dt">></span></span> -<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="dt">></span></span> -<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a> <span class="dt"><</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">></span></span> -<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a> <span class="dt"></</span><span class="kw">head</span><span class="dt">></span></span> -<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>My great paragraph<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a> <span class="kw"><head></span></span> +<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a> <span class="kw"><title></span>My Great page<span class="kw"></title></span></span> +<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="kw">/></span></span> +<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="kw">></span></span> +<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="kw">></span></span> +<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="kw">></span></span> +<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="kw">></span></span> +<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a> <span class="kw"><link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="kw">></span></span> +<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a> <span class="kw"></head></span></span> +<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a> <span class="kw"><body></span></span> +<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a> <span class="kw"><h1></span>My Great page<span class="kw"></h1></span></span> +<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a> <span class="kw"><p></span>My great paragraph<span class="kw"></p></span></span> +<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <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 @@ -424,12 +409,12 @@ 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> -<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="kw"><link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="kw">></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="kw"><link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="kw">></span></span></code></pre></div> <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> @@ -437,16 +422,16 @@ directory of "/var/www/html".</p> <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> -<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="dt">></span>this text is red<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="dt">></span>this background is blue<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="dt">></span>this text is centered<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&</span><span class="st">episode_no=2"</span></span> +<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="kw"><p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="kw">></span>this text is red<span class="kw"></p></span></span> +<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="kw"><p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="kw">></span>this background is blue<span class="kw"></p></span></span> +<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="kw"><p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="kw">></span>this text is centered<span class="kw"></p></span></span> +<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&</span><span class="st">episode_no=2"</span></span> <span id="cb11-5"><a aria-hidden="true" href="#cb11-5" tabindex="-1"></a><span class="ot"> target=</span><span class="st">"_blank"</span></span> <span id="cb11-6"><a aria-hidden="true" href="#cb11-6" tabindex="-1"></a><span class="ot"> rel=</span><span class="st">"noopener noreferrer"</span></span> <span id="cb11-7"><a aria-hidden="true" href="#cb11-7" tabindex="-1"></a><span class="ot"> style=</span><span class="st">"color:yellow;background-color:red;text-align:right"</span></span> -<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a> <span class="dt">></span></span> +<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a> <span class="kw">></span></span> <span id="cb11-9"><a aria-hidden="true" href="#cb11-9" tabindex="-1"></a> And this links to sonichu</span> -<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="kw"></a></span></span></code></pre></div> <p style="color:red"> this text is red </p> @@ -550,11 +535,11 @@ section like this:</p> 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> -<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="dt">></span></span> -<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My cat<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span><span class="dt">></span>He's a cool cat<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="dt">/></span></span> -<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="dt"></</span><span class="kw">div</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="kw"><div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="kw">></span></span> +<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="kw"><h1></span>My cat<span class="kw"></h1></span></span> +<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="kw"><p></span>He's a cool cat<span class="kw"></p></span></span> +<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="kw"><img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="kw">/></span></span> +<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="kw"></div></span></span></code></pre></div> <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 |