diff options
Diffstat (limited to '.md/tutorials/www/quick-intro-html-css.md')
| -rw-r--r-- | .md/tutorials/www/quick-intro-html-css.md | 623 |
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 + + + |