diff options
Diffstat (limited to '.md/tutorials')
| -rw-r--r-- | .md/tutorials/tor/how-to-host-a-tor-hidden-service.md | 23 | ||||
| -rw-r--r-- | .md/tutorials/www/how-to-make-this-site.md | 150 | ||||
| -rw-r--r-- | .md/tutorials/www/quick-intro-html-css.md | 623 |
3 files changed, 741 insertions, 55 deletions
diff --git a/.md/tutorials/tor/how-to-host-a-tor-hidden-service.md b/.md/tutorials/tor/how-to-host-a-tor-hidden-service.md index d13f5d0..2446cf2 100644 --- a/.md/tutorials/tor/how-to-host-a-tor-hidden-service.md +++ b/.md/tutorials/tor/how-to-host-a-tor-hidden-service.md @@ -12,11 +12,12 @@ insecure and not a good idea. For a permanent solution, you'll want to host a real web server as explained [here](/site/tutorials/www/how-to-make-this-site.html). -Unlike that article, I will only explain how to do this on Linux since +Like that article, I will only explain how to do this on Linux since it's way easier and, to be honest, I've never tried to do it on Windows. If you've never used Linux before, buy a Raspberry Pi and follow the basic install guide. If you're strapped for cash, run it in a -virtual machine, or use Windows Subsystem for Linux. +virtual machine, or use +[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/install). ## How to spin up a temporary hidden file share with Python @@ -72,7 +73,8 @@ $ sudo service tor restart ``` Once you do this, you'll get a new onion address located in the -directory noted above. Use cat to read the hostname file: +directory noted above. Use cat to read the hostname file and copy it +down somewhere. This is your ".onion" address: ``` $ cat /var/lib/tor/hidden_service/hostname @@ -83,7 +85,20 @@ $ cat /var/lib/tor/hidden_service/hostname Make some directory to hold your files. ``` -$ mkdir -pv files +$ mkdir -pv ~/files +``` + +If you're on WSL you can copy files from your C drive like so: + +``` +$ cp -vr /mnt/c/Users/username/Desktop/cats ~/files/ +``` + +On a remote server (like a Raspberry pi) you can use scp instead +(replace 'rapsberry' with the hostname or local IP of you Pi): + +``` +$ scp -vr cats pi@raspberry:~/files/ ``` Since we're only doing this temporarily, we don't care too much about diff --git a/.md/tutorials/www/how-to-make-this-site.md b/.md/tutorials/www/how-to-make-this-site.md index bcc4770..2cf8a80 100644 --- a/.md/tutorials/www/how-to-make-this-site.md +++ b/.md/tutorials/www/how-to-make-this-site.md @@ -80,43 +80,72 @@ program your own with web frameworks like [Flask](https://flask.palletsprojects.com/en/2.0.x/) or [Facil](https://facil.io/)* -You can run a web server for free right now. If you're on windows go -download Apache for Windows -[here](https://httpd.apache.org/docs/current/platform/windows.html) and -follow the set up guide -[here](https://www.liquidweb.com/kb/how-to-install-apache-on-a-windows-server/). -If you're on Linux, you probably already have it installed. +You can run a web server for free right now. These instructions will be +for Linux just for consistency since I'm as used to setting this up on +a Windows server. If you've never used Linux, don't be scared! It's very +easy to setup and manage in Windows now with Windows Subsystem for +Linux. If you're on Windows, follow their guide +[here](https://docs.microsoft.com/en-us/windows/wsl/install). It should +be pretty straightforward, but if you have any issues: 1) Make sure you +check your Windows version as noted in the "Prerequisites," 2) Try a +different distribution, like Debian with `wsl --install -d Debian`. Once +you're at a command prompt, come back here. + +There are many web servers out there, but I like nginx since the +configuration file is a bit easier to read than others. So let's install +it. + +``` +$ sudo apt install nginx +``` + +On Ubuntu or Debian, nginx puts the default server configuration in the +folder "/etc/nginx/sites-enabled/default". Open that in a text editor +like vim or nano, and you should see something like this (neglecting the +commented lines starting with "#"): -Find the configuration file in "sites-available/default" (on -windows, this may be led by C:\Program Files\Apache Software -Foundation\Apache2.4\ ). You'll see something like the following: ``` -<VirtualHost *:80> - ServerAdmin webmaster@localhost - - DocumentRoot /var/www - <Directory /> - Options FollowSymLinks - AllowOverride None - </Directory> - <Directory /var/www/> - Options Indexes FollowSymLinks MultiViews - AllowOverride None - Order allow,deny - allow from all - </Directory> +server { + listen 80 default_server; + listen [::]:80 default_server; + + root /var/www/html; + + server_name _; + + location / { + # First attempt to serve request as file, then + # as directory, then fall back to displaying a 404. + try_files $uri $uri/ =404; + } +} ``` For now, you don't need to change anything, so don't worry about what it means. -But do note the directory set on "DocumentRoot," which may differ for -you. This is where the web server looks for files and folders. -So let's put some stuff there! Put whatever, a picture, a text file. -Run the server, then go to your web browser and type: "http://localhost". -You'll find a directory with your files in it! And you can access them -at "http://localhost/filename.extension" +But do note the directory set on "root." This is where the web server +looks for files and folders. You can change this, but usually, you don't +need too. Any files or folders you put under "/var/www/html" will be +included as part of the web server when viewed in a web browser. + +So let's put some stuff there! If you're on WSL as mentioned before, you +can access your C drive at "/mnt/c". So let's say you had a folder of +cat pics in "C:\\Users\\username\\Desktop\\cats"; you can copy this +into your website by running: + +``` +$ cp -vr /mnt/c/Users/username/Desktop/cats /var/www/html +``` + +Run the server, then go to your web browser and type: +"http://localhost". You'll find a directory with your files in it! +And you can access them at +"http://localhost/foldername/filename.extension". Following our +previous example, you can get your cats at "https://localhost/cats". + +### Getting from localhost to the internet The problem is, only you and others on your home network can visit your site right now. @@ -132,7 +161,8 @@ routers will have some kind of steps similar to this: 2) Scroll to the add new rule form -3) Put in the following values +3) Put in the following values: + - source/original port: 80 - forward to address/device: your device's local ip - forward to/destination port: 80 @@ -161,7 +191,8 @@ example: The device "enp7s0" is my Ethernet adapter (starts with an 'e') and my current local ip address for the device is shown. If you use wifi, it -will likely start with a "wl." +will likely start with a "wl." Set the forwarding rule according to this +value. Now get your *public* ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in @@ -188,16 +219,28 @@ about: - **You can just write the damn HTML and use apache or nginx** This honestly is not that hard, it just takes long and takes away from -the joy of writing in my opinion. But if your content is short and -sweet, or you're mostly hosting files, writing a few basic HTML files in -vim or notepad and adding some CSS goes a long way. +the joy of writing in my opinion. I personally have set up my own little +system where I write content in markdown and templates in the Jinja +template language to render it automatically. But if your content is +short and sweet, or you're mostly hosting files, writing a few basic +HTML files in vim or notepad and adding some CSS goes a long way. +I wrote my own view of the topic in the context of how I wrote this site +[here](/site/tutorials/www/quick-intro-to-html-css.html). And you can +find a number of great guides on how to write files, copy them and +manage them in the [references](#references). + +One easy way to create HTML templates with these servers is through the +use of "Server Side Includes," which essentially let you past one html +document into another. This varies by server, for example, nginx has +their own options and syntax detailed +[here](https://nginx.org/en/docs/http/ngx_http_ssi_module.html). - [**Neocities**](https://neocities.org/) Neocities is based on the old Geocities from the mid 90s which allows simple static hosting and features and amazing array of creative projects. Everything is managed through the website, and you can pay to -set your own custom [domain name](#dns). +set your own custom [domain name](#whats-a-domain-name). - **Wordpress** (but this time, you set it up) @@ -233,9 +276,9 @@ twofold. First, if you are in the United States and not a business, you probably have a standard plan with one of the major ISPs (Verizon, Optimum, etc.). This limits you in a few ways. -- Your bandwidth is limited, which limits the amount of people you can serve -at one time *and* the rate you can transfer data to them. Think laggy -games and videos that take 10 years to download. +- Your bandwidth is limited, which limits the amount of people you can +serve at one time *and* the rate you can transfer data to them. Think +laggy games and videos that take 10 years to download. - Your ISP probably explicitly does not allow this (at least in the US). I have *never* had my ISP complain about hosting small personal servers @@ -244,8 +287,12 @@ some problems. ### So what should I do -Most people will find it cheapest to rent from a VPS provider. VPS -stands for "Virtual Private Server," which just means an +As mentioned above, it kind of depends on what your hosting. A small +game server can be run just fine from home. A website with an email +server and other bells and whistles is another thing. + +In those cases most people will find it cheapest to rent from a VPS +provider. VPS stands for "Virtual Private Server," which just means an Internet-connected server stored somewhere in someone's private data center. You pay them for the storage and to keep your server online and accessible. @@ -259,12 +306,11 @@ like: - Opening up your ports to the outside world. And in a nutshell that's it. There's fancy stuff of course, like you'll -want a [domain name](#dns) probably and I'll talk about that too, but at -this point, your stuff is on the Internet! Just tell your friends to -paste in your public ip address (your VPS provider will tell you this) -and there's your stuff! +want a [domain name](#whats-a-domain-name) probably and I'll talk about +that too, but at this point, your stuff is on the Internet! Just tell +your friends to paste in your public ip address (your VPS provider will +tell you this) and there's your stuff! -<a id="dns"></a> ## What's a "Domain Name" @@ -306,7 +352,7 @@ on the same IP address like "git.mjfer.net". Wait a few minutes for the DNS servers to update and you should now be able access your server by name. -## Setup HTTPS and TLS, a false sense of security +## Setup HTTPS and TLS, for some sense of security A decade of half-though through security advice has convinced everyone that HTTPS and *only* HTTPS is secure. This is simply not true. Using @@ -323,7 +369,7 @@ text document, or a cat picture, and not sending any data, HTTP is perfectly acceptable for retrieving that information. HTTPS is also no guarantee that the information your retrieving is actually what you want. There's plenty of malware and other nasty things over HTTPS, just -because it's sent encrypted doesn't make it safe though. +because it's sent encrypted doesn't make it safe. Web browsers have largely responded to this fact by assuming that HTTP is always insecure and printing a warning when you visit a site without @@ -345,6 +391,15 @@ or [nginx](https://www.nginx.com/blog/nginx-ssl/#Examples), switch the port to 443 instead of 80 and bam, you've got HTTPS! +## Perspective + +What I tried to present here was the brief overview of how you get from +files on your computer to files accessible of the Internet. The full +picture though is something you need to seek out yourself. I intend to +add more guides on how I manage this site, but there is so much material +out there already it hardly feels worth adding to. I hope at the very +least to have got you through the start. + ## References 1. https://dataswamp.org/~solene/2021-07-23-why-selfhosting-is-important.html @@ -352,6 +407,7 @@ switch the port to 443 instead of 80 and bam, you've got HTTPS! 3. https://www.howtogeek.com/362602/can-you-host-a-web-server-on-your-home-internet-connection/ 4. https://googiehost.com/blog/create-your-own-server-at-home-for-web-hosting/ 5. https://en.wikipedia.org/wiki/ICANN +6. https://landchad.net/ ### Terms of service for certain ISPs 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 + + + |