diff options
Diffstat (limited to 'tutorials/www/quick-intro-html-css.html')
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 177 |
1 files changed, 76 insertions, 101 deletions
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index e3ffc6c..9788cf4 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <head> - <meta charset="utf-8" /> - <meta name="generator" content="pandoc" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> - <title>quick-intro-html-css</title> - <style> +<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> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,58 +159,55 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#web-browsers-render-code">Web browsers render code</a> +<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a> <ul> -<li><a href="#html">HTML</a> +<li><a href="#html" target="_self">HTML</a> <ul> -<li><a href="#basic-format">Basic Format</a></li> -<li><a href="#tables-and-links">Tables and Links</a></li> -<li><a href="#and-everything-else...">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">Shortlist of Text +<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">HTML Metadata</a></li> +<li><a href="#html-metadata" target="_self">HTML Metadata</a></li> </ul></li> -<li><a href="#css">CSS</a> +<li><a href="#css" target="_self">CSS</a> <ul> -<li><a href="#add-style-without-css">Add style <em>without</em> +<li><a href="#add-style-without-css" target="_self">Add style <em>without</em> CSS</a></li> -<li><a href="#basic-formatting">Basic Formatting</a></li> -<li><a href="#image-formatting">Image Formatting</a></li> -<li><a href="#making-custom-classes">Making Custom Classes</a> +<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">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">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">How to look things up</a></li> -<li><a href="#references">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">HTML</a></li> -<li><a href="#css-1">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> </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> +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 +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 +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 @@ -269,15 +266,15 @@ more tags in this example:</p> <tr> <td>FSF!</td> <td> - <a href="https://www.fsf.org/"> - <img src="https://static.fsf.org/common/img/logo-new.png" /> + <a href="https://www.fsf.org/"> + <img src="https://static.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 href="https://www.kernel.org/"> + <img src="https://www.kernel.org/theme/images/logos/tux.png" /> </a> </td> </tr> @@ -303,25 +300,25 @@ 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> +<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> +<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> +<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> +<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 @@ -334,18 +331,15 @@ 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 +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 +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> +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 @@ -430,7 +424,7 @@ The items in those lists </td> <td> Embeds another html file in the current one. Here's your IP from -ipaddress.sh:<br> <iframe src="https://ipaddress.sh/"></iframe> +ipaddress.sh:<br/> <iframe src="https://ipaddress.sh/"></iframe> </td> </tr> </table> @@ -448,12 +442,12 @@ 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/main.css"> + <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/main.css"> </head> <body> <h1>My Great page</h1> @@ -492,12 +486,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> -<pre><code><link rel="icon" href="/favicon.ico"></code></pre> +<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/main.css"></code></pre> +<pre><code><link rel="stylesheet" type="text/css" href="/static/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> @@ -505,13 +499,13 @@ 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> -<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" +<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> @@ -524,11 +518,7 @@ this background is blue <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" - target="_blank" - rel="noopener noreferrer" - style="color:yellow;background-color:red;text-align:justify;width:100%" - > And this links to sonichu </a></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 @@ -549,15 +539,13 @@ formatting I use for paragraphs is:</p> 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 +<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 +<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> @@ -586,13 +574,9 @@ using the filter option like so:</p> filter: grayscale(100%) }</code></pre> <p>Applied:</p> -<p><img style="filter:grayscale(100%)" -src="/static/jazzcat.jpg" -/></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> +<p><img src="/static/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 @@ -603,17 +587,15 @@ appear nice on dark theme browsers just as well. But I don't want to dim }</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/jazzcat.jpg" -/></p> +<p><img class="icon" src="/static/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/rss.svg" /></code></pre> -<p><img class="icon" src="/static/rss.svg" /></p> +<pre><code><img class="icon" src="/static/rss.svg" /></code></pre> +<p><img class="icon" src="/static/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 @@ -630,10 +612,10 @@ 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> -<pre><code><div class="content"> +<pre><code><div class="content"> <h1>My cat</h1> -<p>He's a cool cat</p> -<img src="/cat.jpg" /> +<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 @@ -641,9 +623,7 @@ 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>, +<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 @@ -697,16 +677,10 @@ 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> +<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> @@ -739,3 +713,4 @@ href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> </ol> </body> </html> + |