diff options
| author | mjfernez <mjf@mjfer.net> | 2021-12-22 16:40:46 -0500 |
|---|---|---|
| committer | mjfernez <mjf@mjfer.net> | 2021-12-22 16:40:46 -0500 |
| commit | d0595724cd13a2274e34a813119cf457a796af75 (patch) | |
| tree | 90a3b6d44ff929c47f05b354a5f682f6df6e30f1 /tutorials/www/quick-intro-html-css.html | |
| parent | 3e87511c9ded4663150d6c4c4a1d829b53a16ed4 (diff) | |
| download | site-files-d0595724cd13a2274e34a813119cf457a796af75.tar.gz | |
Table of Contents! Adds some works in progress
This commit adds a table of contents generated in the panupdate script.
It also changes some links on the homepage to conform with removing
'/site' as the parent directory
Diffstat (limited to 'tutorials/www/quick-intro-html-css.html')
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 33fba18..53073d3 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -1,3 +1,55 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<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> + code{white-space: pre-wrap;} + span.smallcaps{font-variant: small-caps;} + 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;} + ul.task-list{list-style: none;} + </style> +</head> +<body> +<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> +<ul> +<li><a href="#html">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> +<ul> +<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text and Formatting Tags</a></li> +</ul></li> +<li><a href="#html-metadata">HTML Metadata</a></li> +</ul></li> +<li><a href="#css">CSS</a> +<ul> +<li><a href="#add-style-without-css">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> +<ul> +<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make sections</a></li> +</ul></li> +<li><a href="#mobile-optimization">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> +<ul> +<li><a href="#html-1">HTML</a></li> +<li><a href="#css-1">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> @@ -338,3 +390,5 @@ src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg" <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> |