summaryrefslogtreecommitdiffstats
path: root/.md/tutorials/www/quick-intro-html-css.md
diff options
context:
space:
mode:
authormjfernez <mjf@mjfer.net>2021-11-14 17:23:55 -0500
committermjfernez <mjf@mjfer.net>2021-11-14 17:23:55 -0500
commite4d967be5e306de64b7dbaee82dcd37b4485f44f (patch)
tree17d58f2ed27d3054202f48a225644c29b943f57d /.md/tutorials/www/quick-intro-html-css.md
parentfbd07645b2bc37ab1baebdd0953cfa99b59c00b9 (diff)
downloadsite-files-e4d967be5e306de64b7dbaee82dcd37b4485f44f.tar.gz
Added meta tags. Added HTMLCSS tutorial
Diffstat (limited to '.md/tutorials/www/quick-intro-html-css.md')
-rw-r--r--.md/tutorials/www/quick-intro-html-css.md623
1 files changed, 619 insertions, 4 deletions
diff --git a/.md/tutorials/www/quick-intro-html-css.md b/.md/tutorials/www/quick-intro-html-css.md
index 6b4bc70..2055430 100644
--- a/.md/tutorials/www/quick-intro-html-css.md
+++ b/.md/tutorials/www/quick-intro-html-css.md
@@ -1,3 +1,7 @@
+*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* [*this one*](https://html-css-js.com/)
+
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
@@ -5,19 +9,630 @@ perspective might be useful if you have no clue where to start with this
like I did.
The building blocks are very simple, *but there's a lot of blocks*. The
-HTML5 specification, which most browsers are built around, defines ...
-and the CSS ... I've never gotten deep into the weeds like professional
+[HTML5 specification](https://dev.w3.org/html5/spec-LC/semantics.html#semantics),
+which most browsers are built around, defines the semantics of elements
+that can should be rendered by a web browser. CSS similarly defines the
+*attributes*--or styles--that can be applied to those elements in a
+format specified [here](https://www.w3.org/TR/CSS1/).
+I've never gotten deep into the weeds like professional
designers do--and to be honest, I don't really want to. But I *do* 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.
-## Web browsers render code
+# Web browsers render code
The specifications linked above are followed religiously by major
web browsers like Chromium, Firefox, and Safari so that each symbol
-defined in the standard puts graphics, animations
+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?
+
+## HTML
+
+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.
+
+### Basic Format
+
+All HTML files start with the following (note: the spacing does not
+matter, it's just spaced for readability):
+
+```
+<html>
+ <body>
+ <!-- stuff you see goes here -->
+ </body>
+</html>
+```
+
+You'll notice two *tags* 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:
+
+```
+<html>
+ <body>
+ <h1>My Great page</h1>
+ <p>My great paragraph</p>
+ </body>
+</html>
+```
+
+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.
+
+### Tables and Links
+
+We can do a lot more than text of course. Let's walk through some more
+tags in this example:
+
+```
+<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.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>
+```
+
+We added a few things here, but it's the same pattern right?
+\<open\>\</close\>.
+
+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.
+
+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.
+
+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 *to any other URL in the world*. On it's own,
+the "a" tag doesn't do anything special. We need to use the tag with an
+*attribute*--an extra word that comes after a--in order to make it work
+for us. A more basic example might be this:
+
+```
+<a href="https://example.com">Example</a>
+```
+
+Which you'll see as:
+
+<a href="https://example.com">Example</a>
+
+The "href" attribute doesn't *have* 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:
+
+```
+<a href="/cat.jpg">example</a>
+```
+
+You can also link an email like this
+
+```
+<a href="mailto:email@example.com">example email</a>
+
+```
+
+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:
+
+```
+<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>
+```
+
+### And Everything Else...
+
+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 *to* 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 *inserting* an
+element right into the document.
+
+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 [long
+page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) on
+all the different attributes and effects you can apply to images.
+
+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
+[https://www.w3schools.com/](https://www.w3schools.com/), which is a
+great resource. I personally like to look at the HTML elements reference
+of a common web browser like
+[Firefox's](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+so I know exactly which elements work.
+
+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 *interactive* elements like buttons and
+text input since that will involve another programming language like
+PHP, Javascript, or Python.
+
+#### Shortlist of Text and Formatting Tags
+
+<center>
+<table border="1px" cellpadding=0 cellspacing=0>
+<tr>
+<th>**tag**</th>
+<th>**function**</th>
+</tr>
+<tr>
+<td>\<i\></td>
+<td><i>italic text</i></td>
+</tr>
+<tr>
+<td>\<b\></td>
+<td>**bold text**</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>
+
+### HTML Metadata
+
+Everything we discussed so far was only about *one section* 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?
+
+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:
+
+```
+<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">
+ </head>
+ <body>
+ <h1>My Great page</h1>
+ <p>My great paragraph</p>
+ </body>
+</html>
+```
+
+Note that the "meta" tag works like the "img" tag did and has no
+closing tag.
+
+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.
+
+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.
+
+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.
+
+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.
+
+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.
+
+## CSS
+
+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).
+
+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.
+
+```
+<link rel="icon" href="/favicon.ico">
+```
+
+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 *all* tags in a specific
+document and create a unifying style for all your pages.
+
+```
+<link rel="stylesheet" type="text/css" href="/static/main.css">
+```
+
+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".
+
+### Add style *without* CSS
+
+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 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://archive.org/details/sonichucomplete"
+ target="_blank"
+ rel="noopener noreferrer"
+ style="color:yellow;background-color:red;text-align:right"
+ >
+ And this links to sonichu
+</a>
+```
+
+<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://archive.org/details/sonichucomplete"
+ target="_blank"
+ rel="noopener noreferrer"
+ style="color:yellow;background-color:red;text-align:justify;width:100%"
+ >
+ And this links to sonichu
+</a>
+
+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 *all* their attributes using a CSS file.
+
+### Basic Formatting
+
+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 {
+ margin-top: 1.5%;
+ margin-bottom: 1.5%;
+}
+```
+
+And to highlight code, like you've been seeing, I use:
+
+```
+code {
+ display: inline-block;
+ font-size: 125%;
+ background-color: #d8d8d8;
+ white-space: pre-wrap;
+ word-wrap: break-all;
+}
+```
+
+I get pretty much all the attribute names just by looking them up
+[here](https://www.w3schools.com/CSSref/default.asp). But in order these
+lines:
+
+- Add padding to the text lines to fill any empty space with space
+ characters (this make the background look like a block)
+- Increase the font size a bit more than normal
+- Set the background color gray, chosen from an
+ [HTML color picker](https://www.w3schools.com/colors/colors_picker.asp)
+- preserve white space, like the pre tag does
+- break long lines, even in the middle of words
+
+### Image Formatting
+
+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.
+
+```
+img {
+ max-width: 100%;
+ height: auto;
+ width: auto;
+}
+```
+
+This does the following:
+
+- constrains the image so it doesn't stretch the page
+- automatically scales the height of the image on zoom
+- automatically scales the width of the image on zoom
+
+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.
+
+In addition to this basic stuff, you can style your images heavily
+using the filter option like so:
+
+```
+img.gray {
+ filter: grayscale(100%)
+}
+```
+
+Applied:
+
+<img style="filter:grayscale(100%)"
+src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg"
+/>
+
+You can read lots more options for image formatting
+[here](https://www.w3schools.com/css/css3_images.asp) and about the
+filter property
+[here](https://www.w3schools.com/CSSref/css3_pr_filter.asp)
+
+### Making Custom Classes
+
+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
+*all* images like in the following example:
+
+```
+img {
+ filter: invert(50%);
+}
+```
+
+For one, that will only dim black-and-white images; anything else will
+just turn to mush like this:
+
+<img class="icon"
+src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg"
+/>
+
+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:
+
+```
+img.icon {
+ filter: invert(50%);
+}
+```
+
+And to implement it in HTML:
+
+```
+<img class="icon" src="/static/rss.svg" />
+```
+
+<img class="icon" src="/static/rss.svg" />
+
+#### Use the div tag to make sections
+
+You can use the class property on *any* 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:
+
+```
+.content {
+ text-align: center;
+ max-width: 85%;
+}
+```
+
+Notice, no leading tag. This can be applied to *any* 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:
+
+```
+<div class="content">
+<h1>My cat</h1>
+<p>He's a cool cat</p>
+<img src="/cat.jpg" />
+</div>
+```
+
+### Mobile Optimization
+
+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.
+
+I won't go into as gory details as
+[here](https://www.w3.org/TR/mediaqueries-4/) or
+[here](https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b),
+but for your basic smartphone, you can copy and paste this block:
+
+```
+@media screen and (max-device-width: 480px) {
+ // override your tags here
+ body {
+ font-size: 125%;
+ }
+}
+```
+
+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.
+
+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:
+
+```
+body {
+ font-size: 14px;
+}
+```
+
+But this binds the size to 14 pixels which may look great on desktop,
+but small on a smart phone.
+
+## How to look things up
+
+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 *there are a lot of blocks*. 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.
+
+Your browser is more powerful then I let on earlier. It does just render
+code, *it can edit it too*. 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 *you can
+change it*. 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 *your end*. Once you refresh
+your changes are gone. Why don't you try it here?
+
+<!--Welcome the source code, hope you enjoy your stay :) -->
+
+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.
+
+When you're done mindlessly clicking through source code though, and you
+want to get something done *your way*, 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:
+
+- Mozilla [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+ and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
+- w3schools [HTML](https://www.w3schools.com/tags/default.asp) and
+ [CSS](https://www.w3schools.com/CSSref/default.asp)
+- The official w3 docs [HTML5](https://dev.w3.org/html5/spec-LC) and
+ [All CSS specs](https://www.w3.org/Style/CSS/specs.en.html)
+
+## References
### HTML
+1. https://www.w3.org/standards/webdesign/htmlcss
+
+*\<body\>*
+
+2. https://dev.w3.org/html5/spec-LC/semantics.html#semantics
+3. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+
+*\<head\>*
+
+4. https://www.w3schools.com/tags/tag_meta.asp
+5. https://www.w3schools.com/css/css_rwd_viewport.asp
+6. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
### CSS
+
+// basics
+
+1. https://www.w3schools.com/CSSref/default.asp
+2. https://www.w3.org/Style/Examples/011/firstcss
+3. https://www.w3schools.com/TAGS/att_style.asp
+
+// mobile
+
+4. https://www.w3.org/TR/mediaqueries-4/
+5. https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b
+6. https://stallman.org/common/stallman.css
+
+
+