From 8bcc5e70f895857281b466ff82c0a55c4cd322fb Mon Sep 17 00:00:00 2001 From: mjfernez Date: Tue, 23 Jul 2024 00:59:30 -0400 Subject: Add code tags --- .../tor/how-to-host-a-tor-hidden-service.html | 88 ++++++-- tutorials/www/how-to-make-this-site.html | 98 +++++++-- tutorials/www/quick-intro-html-css.html | 233 +++++++++++++-------- 3 files changed, 305 insertions(+), 114 deletions(-) (limited to 'tutorials') diff --git a/tutorials/tor/how-to-host-a-tor-hidden-service.html b/tutorials/tor/how-to-host-a-tor-hidden-service.html index b2a6ed7..29e4601 100644 --- a/tutorials/tor/how-to-host-a-tor-hidden-service.html +++ b/tutorials/tor/how-to-host-a-tor-hidden-service.html @@ -21,6 +21,70 @@ vertical-align: middle; } .display.math{display: block; text-align: center; margin: 0.5rem auto;} + /* CSS for syntax highlighting */ + pre > code.sourceCode { white-space: pre; position: relative; } + pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span:empty { height: 1.2em; } + .sourceCode { overflow: visible; } + code.sourceCode > span { color: inherit; text-decoration: inherit; } + div.sourceCode { margin: 1em 0; } + pre.sourceCode { margin: 0; } + @media screen { + div.sourceCode { overflow: auto; } + } + @media print { + pre > code.sourceCode { white-space: pre-wrap; } + pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } + } + pre.numberSource code + { counter-reset: source-line 0; } + pre.numberSource code > span + { position: relative; left: -4em; counter-increment: source-line; } + pre.numberSource code > span > a:first-child::before + { content: counter(source-line); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; + color: #aaaaaa; + } + pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } + div.sourceCode + { } + @media screen { + pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } + } + code span.al { color: #ff0000; font-weight: bold; } /* Alert */ + code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ + code span.at { color: #7d9029; } /* Attribute */ + code span.bn { color: #40a070; } /* BaseN */ + code span.bu { color: #008000; } /* BuiltIn */ + code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ + code span.ch { color: #4070a0; } /* Char */ + code span.cn { color: #880000; } /* Constant */ + code span.co { color: #60a0b0; font-style: italic; } /* Comment */ + code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ + code span.do { color: #ba2121; font-style: italic; } /* Documentation */ + code span.dt { color: #902000; } /* DataType */ + code span.dv { color: #40a070; } /* DecVal */ + code span.er { color: #ff0000; font-weight: bold; } /* Error */ + code span.ex { } /* Extension */ + code span.fl { color: #40a070; } /* Float */ + code span.fu { color: #06287e; } /* Function */ + code span.im { color: #008000; font-weight: bold; } /* Import */ + code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ + code span.kw { color: #007020; font-weight: bold; } /* Keyword */ + code span.op { color: #666666; } /* Operator */ + code span.ot { color: #007020; } /* Other */ + code span.pp { color: #bc7a00; } /* Preprocessor */ + code span.sc { color: #4070a0; } /* SpecialChar */ + code span.ss { color: #bb6688; } /* SpecialString */ + code span.st { color: #4070a0; } /* String */ + code span.va { color: #19177c; } /* Variable */ + code span.vs { color: #4070a0; } /* VerbatimString */ + code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ @@ -60,14 +124,14 @@ Subsystem for Linux.

spin up a temporary hidden file share with Python

Once you have Debian/Ubuntu/whatever installed and it's updated to your liking, you can install Tor with:

-
$ sudo apt install tor
+
$ sudo apt install tor

Start (or stop) Tor with:

-
$ sudo service tor start
+
$ sudo service tor start

or

-
$ sudo systemctl start tor.service
+
$ sudo systemctl start tor.service

You may need to enable the service first. I think this is done by default now, but it doesn't hurt:

-
$ sudo systemctl enable tor.service
+
$ sudo systemctl enable tor.service

Configure Tor

You'll need to edit the file "/etc/tor/torrc" before your service can be available over Tor. Use vim, nano, or whatever you like to edit the @@ -79,27 +143,27 @@ like so:

HiddenServiceDir /var/lib/tor/hidden_service/
 HiddenServicePort 80 127.0.0.1:8000

Save and restart Tor for the changes to apply:

-
$ sudo service tor restart
+
$ 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 and copy it down somewhere. This is your ".onion" address:

-
$ cat /var/lib/tor/hidden_service/hostname
+
$ cat /var/lib/tor/hidden_service/hostname

Set up the server

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/
+
$ 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/
+
$ scp -vr cats pi@raspberry:~/files/

Since we're only doing this temporarily, we don't care too much about security or where the files should go, but if you want to be careful, you can issue the following to set the directory to read only after you copy your files in:

-
$ chmod -R 644 files
+
$ chmod -R 644 files

Change into the directory and run Python's built-in http server:

-
$ cd files
-$ python3 -m http.server
+
$ cd files
+$ python3 -m http.server

You'll see the server is being hosted on port 8000, which is what we chose in the config file earlier. Just leave it running, or send it to the background with Ctrl+Z and run "bg".

diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index 3b975a0..c02f174 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -21,6 +21,70 @@ vertical-align: middle; } .display.math{display: block; text-align: center; margin: 0.5rem auto;} + /* CSS for syntax highlighting */ + pre > code.sourceCode { white-space: pre; position: relative; } + pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span:empty { height: 1.2em; } + .sourceCode { overflow: visible; } + code.sourceCode > span { color: inherit; text-decoration: inherit; } + div.sourceCode { margin: 1em 0; } + pre.sourceCode { margin: 0; } + @media screen { + div.sourceCode { overflow: auto; } + } + @media print { + pre > code.sourceCode { white-space: pre-wrap; } + pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } + } + pre.numberSource code + { counter-reset: source-line 0; } + pre.numberSource code > span + { position: relative; left: -4em; counter-increment: source-line; } + pre.numberSource code > span > a:first-child::before + { content: counter(source-line); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; + color: #aaaaaa; + } + pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } + div.sourceCode + { } + @media screen { + pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } + } + code span.al { color: #ff0000; font-weight: bold; } /* Alert */ + code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ + code span.at { color: #7d9029; } /* Attribute */ + code span.bn { color: #40a070; } /* BaseN */ + code span.bu { color: #008000; } /* BuiltIn */ + code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ + code span.ch { color: #4070a0; } /* Char */ + code span.cn { color: #880000; } /* Constant */ + code span.co { color: #60a0b0; font-style: italic; } /* Comment */ + code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ + code span.do { color: #ba2121; font-style: italic; } /* Documentation */ + code span.dt { color: #902000; } /* DataType */ + code span.dv { color: #40a070; } /* DecVal */ + code span.er { color: #ff0000; font-weight: bold; } /* Error */ + code span.ex { } /* Extension */ + code span.fl { color: #40a070; } /* Float */ + code span.fu { color: #06287e; } /* Function */ + code span.im { color: #008000; font-weight: bold; } /* Import */ + code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ + code span.kw { color: #007020; font-weight: bold; } /* Keyword */ + code span.op { color: #666666; } /* Operator */ + code span.ot { color: #007020; } /* Other */ + code span.pp { color: #bc7a00; } /* Preprocessor */ + code span.sc { color: #4070a0; } /* SpecialChar */ + code span.ss { color: #bb6688; } /* SpecialString */ + code span.st { color: #4070a0; } /* String */ + code span.va { color: #19177c; } /* Variable */ + code span.vs { color: #4070a0; } /* VerbatimString */ + code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ @@ -145,7 +209,7 @@ 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
+
$ 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 @@ -174,7 +238,7 @@ included as part of the web server when viewed in a web browser.

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
+
$ 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". @@ -203,20 +267,20 @@ routers will have some kind of steps similar to this:

"ip a" (Linux). Typically it is listed first and will start with "192.168" or "10.0" but it depends on the manufacturer. Here's my output at home for example:

-
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
-    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
-    inet 127.0.0.1/8 scope host lo
-       valid_lft forever preferred_lft forever
-    inet6 ::1/128 scope host
-       valid_lft forever preferred_lft forever
-2: enp7s0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
-    link/ether 4c:cc:6a:93:eb:0b brd ff:ff:ff:ff:ff:ff
-    inet 192.168.1.202/24 brd 192.168.1.255 scope global dynamic noprefixroute enp7s0
-       valid_lft 74501sec preferred_lft 74501sec
-    inet6 fe80::4ecc:6aff:fe93:eb0b/64 scope link noprefixroute
-       valid_lft forever preferred_lft forever
-3: wlp5s0: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default qlen 1000
-    link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea
+
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
+    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
+    inet 127.0.0.1/8 scope host lo
+       valid_lft forever preferred_lft forever
+    inet6 ::1/128 scope host
+       valid_lft forever preferred_lft forever
+2: enp7s0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
+    link/ether 4c:cc:6a:93:eb:0b brd ff:ff:ff:ff:ff:ff
+    inet 192.168.1.202/24 brd 192.168.1.255 scope global dynamic noprefixroute enp7s0
+       valid_lft 74501sec preferred_lft 74501sec
+    inet6 fe80::4ecc:6aff:fe93:eb0b/64 scope link noprefixroute
+       valid_lft forever preferred_lft forever
+3: wlp5s0: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default qlen 1000
+    link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea

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." Set the forwarding rule according to this @@ -363,7 +427,7 @@ subdomains on the same IP address like "git.mjfer.net".

be able access your server by name.

Setup HTTPS and TLS, for some sense of security

-

A decade of half-though through security advice has convinced +

A decade of half-thought through security advice has convinced everyone that HTTPS and only HTTPS is secure. This is simply not true. Using HTTP alone doesn't inherently make you insecure and using HTTPS doesn't automatically guarantee the app your communicating diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 4248bd9..05302d8 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -21,6 +21,70 @@ vertical-align: middle; } .display.math{display: block; text-align: center; margin: 0.5rem auto;} + /* CSS for syntax highlighting */ + pre > code.sourceCode { white-space: pre; position: relative; } + pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span:empty { height: 1.2em; } + .sourceCode { overflow: visible; } + code.sourceCode > span { color: inherit; text-decoration: inherit; } + div.sourceCode { margin: 1em 0; } + pre.sourceCode { margin: 0; } + @media screen { + div.sourceCode { overflow: auto; } + } + @media print { + pre > code.sourceCode { white-space: pre-wrap; } + pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } + } + pre.numberSource code + { counter-reset: source-line 0; } + pre.numberSource code > span + { position: relative; left: -4em; counter-increment: source-line; } + pre.numberSource code > span > a:first-child::before + { content: counter(source-line); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; + color: #aaaaaa; + } + pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } + div.sourceCode + { } + @media screen { + pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } + } + code span.al { color: #ff0000; font-weight: bold; } /* Alert */ + code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ + code span.at { color: #7d9029; } /* Attribute */ + code span.bn { color: #40a070; } /* BaseN */ + code span.bu { color: #008000; } /* BuiltIn */ + code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ + code span.ch { color: #4070a0; } /* Char */ + code span.cn { color: #880000; } /* Constant */ + code span.co { color: #60a0b0; font-style: italic; } /* Comment */ + code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ + code span.do { color: #ba2121; font-style: italic; } /* Documentation */ + code span.dt { color: #902000; } /* DataType */ + code span.dv { color: #40a070; } /* DecVal */ + code span.er { color: #ff0000; font-weight: bold; } /* Error */ + code span.ex { } /* Extension */ + code span.fl { color: #40a070; } /* Float */ + code span.fu { color: #06287e; } /* Function */ + code span.im { color: #008000; font-weight: bold; } /* Import */ + code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ + code span.kw { color: #007020; font-weight: bold; } /* Keyword */ + code span.op { color: #666666; } /* Operator */ + code span.ot { color: #007020; } /* Other */ + code span.pp { color: #bc7a00; } /* Preprocessor */ + code span.sc { color: #4070a0; } /* SpecialChar */ + code span.ss { color: #bb6688; } /* SpecialString */ + code span.st { color: #4070a0; } /* String */ + code span.va { color: #19177c; } /* Variable */ + code span.vs { color: #4070a0; } /* VerbatimString */ + code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ @@ -104,22 +168,22 @@ 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>
+
<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>
+
<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 @@ -130,33 +194,33 @@ text in a file called "page.html" and open it in your browser.

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/media.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>
+
<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/media.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 @@ -175,25 +239,24 @@ 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>
+
<a href="https://example.com">Example</a>

Which you'll see as:

Example

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>
+
<a href="/cat.jpg">example</a>

You can also link an email like this

-
<a href="mailto:email@example.com">example email</a>
-
+
<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>
+
<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 @@ -314,21 +377,21 @@ 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/media/main.css">
-    </head>
-    <body>
-        <h1>My Great page</h1>
-        <p>My great paragraph</p>
-    </body>
-</html>
+
<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/media/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 @@ -361,12 +424,12 @@ 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">
+
<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/media/main.css">
+
<link rel="stylesheet" type="text/css" href="/static/media/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".

@@ -374,16 +437,16 @@ directory of "/var/www/html".

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://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>
+
<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>

this text is red

@@ -402,12 +465,12 @@ using a CSS file.

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 {
+
p {
     margin-top: 1.5%;
     margin-bottom: 1.5%;
 }

 
And to highlight code, like you've been seeing, I use:

-
code {
+
code {
     display: inline-block;
     font-size: 125%;
     background-color: #d8d8d8;
@@ -429,7 +492,7 @@ picker
 
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 {
+
img {
     max-width: 100%;
     height: auto;
     width: auto;
@@ -445,7 +508,7 @@ 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 {
+
img.gray {
     filter: grayscale(100%)
 }

 
Applied:

@@ -457,7 +520,7 @@ the filter property img {
     filter: invert(50%);
 }

 
For one, that will only dim black-and-white images; anything else
@@ -465,11 +528,11 @@ will just turn to mush like this:

 

 
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 {
+
img.icon {
     filter: invert(50%);
 }

 
And to implement it in HTML:

-
<img class="icon" src="/static/media/rss.svg" />

+
<img class="icon" src="/static/media/rss.svg" />

 

 
Use the div tag to make
 sections

@@ -479,7 +542,7 @@ 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 {
+
.content {
     text-align: center;
     max-width: 85%;
 }

@@ -487,7 +550,7 @@ section like this:

 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">
+
<div class="content">
 <h1>My cat</h1>
 <p>He's a cool cat</p>
 <img src="/cat.jpg" />
@@ -500,7 +563,7 @@ 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 or here,
 but for your basic smartphone, you can copy and paste this block:

-
@media screen and (max-device-width: 480px) {
+
@media screen and (max-device-width: 480px) {
     // override your tags here
     body {
         font-size: 125%;
@@ -514,7 +577,7 @@ add a little more style than a typical desktop web browser.

 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 {
+
body {
     font-size: 14px;
 }

 
But this binds the size to 14 pixels which may look great on desktop,
-- 
cgit v1.2.3