diff options
author | mjfernez <mjf@mjfer.net> | 2023-07-14 13:21:13 -0400 |
---|---|---|
committer | mjfernez <mjf@mjfer.net> | 2023-07-14 13:21:13 -0400 |
commit | 002118777ddf2f81d2894d81bc7fadc64dbbc36f (patch) | |
tree | e7552ee092e4f4601c96d3a1c97de5f066b637ec /tutorials/www | |
parent | d96c7cad92b025ad80a8fe64f91d1c215272e313 (diff) | |
download | site-files-002118777ddf2f81d2894d81bc7fadc64dbbc36f.tar.gz |
Add script to update TOC links
With commit 50b72b5787338ee3c0ef0a4aebfcdf8acf3c3a08 in ezcms,
the default behavior for links changes to open in a new tab. This script
helps override the option for table of content links by updating
"target" to point to "_self"
Diffstat (limited to 'tutorials/www')
-rw-r--r-- | tutorials/www/how-to-make-this-site.html | 90 | ||||
-rw-r--r-- | tutorials/www/how-to-use-the-internet.html | 29 | ||||
-rw-r--r-- | tutorials/www/quick-intro-html-css.html | 177 |
3 files changed, 130 insertions, 166 deletions
diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index 2fcc26f..33d8943 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <head> - <meta charset="utf-8" /> - <meta name="generator" content="pandoc" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> - <title>how-to-make-this-site</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-make-this-site</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,42 +159,41 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#background">Background</a></li> -<li><a href="#what-is-a-web-server-and-how-do-i-run-one">What is a web +<li><a href="#background" target="_self">Background</a></li> +<li><a href="#what-is-a-web-server-and-how-do-i-run-one" target="_self">What is a web server and how do I run one?</a> <ul> -<li><a href="#getting-from-localhost-to-the-internet">Getting from +<li><a href="#getting-from-localhost-to-the-internet" target="_self">Getting from localhost to the internet</a></li> </ul></li> -<li><a -href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How +<li><a href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently" target="_self">How can I make this server available on the Internet <em>cheaply</em> and <em>independently</em></a> <ul> -<li><a href="#can-i-run-a-web-server-at-home">Can I run a web server at +<li><a href="#can-i-run-a-web-server-at-home" target="_self">Can I run a web server at home</a></li> -<li><a href="#so-what-should-i-do">So what should I do</a></li> +<li><a href="#so-what-should-i-do" target="_self">So what should I do</a></li> </ul></li> -<li><a href="#whats-a-domain-name">What's a "Domain Name"</a></li> -<li><a href="#setup-https-and-tls-for-some-sense-of-security">Setup +<li><a href="#whats-a-domain-name" target="_self">What's a "Domain Name"</a></li> +<li><a href="#setup-https-and-tls-for-some-sense-of-security" target="_self">Setup HTTPS and TLS, for some sense of security</a></li> -<li><a href="#perspective">Perspective</a></li> -<li><a href="#references">References</a> +<li><a href="#perspective" target="_self">Perspective</a></li> +<li><a href="#references" target="_self">References</a> <ul> -<li><a href="#terms-of-service-for-certain-isps">Terms of service for +<li><a href="#terms-of-service-for-certain-isps" target="_self">Terms of service for certain ISPs</a> <ul> -<li><a href="#verizon">Verizon</a></li> -<li><a href="#optimum">Optimum</a></li> -<li><a href="#spectrum">Spectrum</a></li> -<li><a href="#att">AT&T</a></li> -<li><a href="#cox-communications">Cox Communications</a></li> +<li><a href="#verizon" target="_self">Verizon</a></li> +<li><a href="#optimum" target="_self">Optimum</a></li> +<li><a href="#spectrum" target="_self">Spectrum</a></li> +<li><a href="#att" target="_self">AT&T</a></li> +<li><a href="#cox-communications" target="_self">Cox Communications</a></li> </ul></li> </ul></li> </ul> </nav> <h2 id="background">Background</h2> -<p><em>TL;DR get to </em><a href="#thepoint">the point</a></p> +<p><em>TL;DR get to </em><a href="#thepoint" target="_self">the point</a></p> <p>I think it was roughly the end of high school when I first had the idea I wanted to make <em>some</em> kind of website. This would be around 2010 and I did what I thought would be a good idea and bought a @@ -222,8 +221,7 @@ you want to take the time to deploy it yourself). But they also give out free .wordpress domains and some storage space with a snazzy dashboard to manage it all.</p> <p>I had fun with that one, I don't update it anymore, but it's still up -at <a -href="https://postquantumpoetry.wordpress.com">postquantumpoetry.wordpress.com</a>. +at <a href="https://postquantumpoetry.wordpress.com">postquantumpoetry.wordpress.com</a>. WordPress got closer to what I wanted, but it still wasn't <em>really</em> my site; it was WordPress's site unless I wanted to pay the hosting and domain fee. It's pretty modest, but I wasn't sold on @@ -261,15 +259,12 @@ and how do I run one?</h2> <p><em>TL;DR a web server is just a program that lets other computers on a network view files in a chosen folder. All you need to do is download a web server: apache and nginx are popular ones, but you can easily -program your own with web frameworks like <a -href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a -href="https://facil.io/">Facil</a></em></p> +program your own with web frameworks like <a href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a href="https://facil.io/">Facil</a></em></p> <p>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 <a -href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. It +Linux. If you're on Windows, follow their guide <a href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. 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 @@ -357,19 +352,16 @@ value.</p> <p>Now get your <em>public</em> ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in the directory you launched the server!</p> -<h2 -id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How +<h2 id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How can I make this server available on the Internet <em>cheaply</em> and <em>independently</em></h2> <p><i> TL;DR Expense scales with independence. It's possible to become your own service provider, get IP addresses from ICANN, your own hardware to host it, to host your cat pics; but it's also a lot of time, -work and money to do all that (<a -href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this -guy</a> did it apparently, and so did <a -href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</p> +work and money to do all that (<a href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this +guy</a> did it apparently, and so did <a href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</i></p> <p>Most likely you'll want to rent someone else's server, usually a VPS. -</i></p> +</p> <p>Once you understand the basic installation above, you can now populate your site with content just by adding HTML files to your web directory. You can use an HTML editor to write these, or you can @@ -388,19 +380,18 @@ 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 <a href="/tutorials/www/quick-intro-to-html-css.html">here</a>. And you can find a number of great guides on how to write files, copy them and -manage them in the <a href="#references">references</a>.</p> +manage them in the <a href="#references" target="_self">references</a>.</p> <p>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 <a -href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p> +has their own options and syntax detailed <a href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p> <ul> <li><a href="https://neocities.org/"><strong>Neocities</strong></a></li> </ul> <p>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 <a href="#whats-a-domain-name">domain name</a>.</p> +set your own custom <a href="#whats-a-domain-name" target="_self">domain name</a>.</p> <ul> <li><strong>Wordpress</strong> (but this time, you set it up)</li> </ul> @@ -423,8 +414,7 @@ online?</p> home</h3> <p>Technically yes, but practically probably not. At least not at a lot of extra cost to you. If you do want to host a small thing at home, like -some text or some cat pics, a <a -href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden +some text or some cat pics, a <a href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden service</a> is a great option.</p> <p>I spent a lot of time searching on this (you can find a full list of references at the bottom), and I've even tested a little bit by hosting @@ -460,7 +450,7 @@ like:</p> <li>Opening up your ports to the outside world.</li> </ul> <p>And in a nutshell that's it. There's fancy stuff of course, like -you'll want a <a href="#whats-a-domain-name">domain name</a> probably +you'll want a <a href="#whats-a-domain-name" target="_self">domain name</a> 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!</p> @@ -525,15 +515,12 @@ the site is somehow dangerous, even if it doesn't collect any information about the user. Because of that, most you will want to go the extra mile to make your visitors feel warm and fuzzy inside and implement HTTPS.</p> -<p>Fortunately, this is now much easier than is used to be thanks to <a -href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously +<p>Fortunately, this is now much easier than is used to be thanks to <a href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously serves as a free certificate authority, which allows you to generate signed certificates that are recognized by every web browser in the -world. The tool they recommend, <a -href="https://certbot.eff.org/">certbot</a> is painless to install. I've +world. The tool they recommend, <a href="https://certbot.eff.org/">certbot</a> is painless to install. I've rarely had to do much more than "certbot certonly" and follow the -prompts to get a certificate. Once you've obtained one, add it to <a -href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a> +prompts to get a certificate. Once you've obtained one, add it to <a href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a> or <a href="https://www.nginx.com/blog/nginx-ssl/#Examples">nginx</a>, switch the port to 443 instead of 80 and bam, you've got HTTPS!</p> <h2 id="perspective">Perspective</h2> @@ -605,3 +592,4 @@ others.</p> </ul> </body> </html> + diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html index 88692cf..b687394 100644 --- a/tutorials/www/how-to-use-the-internet.html +++ b/tutorials/www/how-to-use-the-internet.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <head> - <meta charset="utf-8" /> - <meta name="generator" content="pandoc" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> - <title>how-to-use-the-internet</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-use-the-internet</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,21 +159,21 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#why">Why?</a></li> -<li><a href="#how-to-use-a-web-browser">How to use a web +<li><a href="#why" target="_self">Why?</a></li> +<li><a href="#how-to-use-a-web-browser" target="_self">How to use a web browser</a></li> -<li><a href="#how-to-use-a-search-engine">How to use a search +<li><a href="#how-to-use-a-search-engine" target="_self">How to use a search engine</a></li> -<li><a href="#how-to-read-and-find-scholarly-articles">How to read and +<li><a href="#how-to-read-and-find-scholarly-articles" target="_self">How to read and find scholarly articles</a> <ul> -<li><a href="#how-to-use-wikipedia">How to use Wikipedia</a></li> -<li><a href="#how-to-find-articles-with-google-scholar">How to find +<li><a href="#how-to-use-wikipedia" target="_self">How to use Wikipedia</a></li> +<li><a href="#how-to-find-articles-with-google-scholar" target="_self">How to find articles with Google Scholar</a></li> </ul></li> -<li><a href="#advanced-topics">Advanced Topics</a> +<li><a href="#advanced-topics" target="_self">Advanced Topics</a> <ul> -<li><a href="#how-to-use-tor-to-browse-anonymously">How to use tor to +<li><a href="#how-to-use-tor-to-browse-anonymously" target="_self">How to use tor to browse anonymously</a></li> </ul></li> </ul> @@ -241,3 +241,4 @@ is provided as well, but this is most effective when using hidden services, not using Tor in general.</p> </body> </html> + diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index e3ffc6c..9788cf4 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <head> - <meta charset="utf-8" /> - <meta name="generator" content="pandoc" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> - <title>quick-intro-html-css</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>quick-intro-html-css</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,58 +159,55 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#web-browsers-render-code">Web browsers render code</a> +<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a> <ul> -<li><a href="#html">HTML</a> +<li><a href="#html" target="_self">HTML</a> <ul> -<li><a href="#basic-format">Basic Format</a></li> -<li><a href="#tables-and-links">Tables and Links</a></li> -<li><a href="#and-everything-else...">And Everything Else...</a> +<li><a href="#basic-format" target="_self">Basic Format</a></li> +<li><a href="#tables-and-links" target="_self">Tables and Links</a></li> +<li><a href="#and-everything-else..." target="_self">And Everything Else...</a> <ul> -<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text +<li><a href="#shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text and Formatting Tags</a></li> </ul></li> -<li><a href="#html-metadata">HTML Metadata</a></li> +<li><a href="#html-metadata" target="_self">HTML Metadata</a></li> </ul></li> -<li><a href="#css">CSS</a> +<li><a href="#css" target="_self">CSS</a> <ul> -<li><a href="#add-style-without-css">Add style <em>without</em> +<li><a href="#add-style-without-css" target="_self">Add style <em>without</em> CSS</a></li> -<li><a href="#basic-formatting">Basic Formatting</a></li> -<li><a href="#image-formatting">Image Formatting</a></li> -<li><a href="#making-custom-classes">Making Custom Classes</a> +<li><a href="#basic-formatting" target="_self">Basic Formatting</a></li> +<li><a href="#image-formatting" target="_self">Image Formatting</a></li> +<li><a href="#making-custom-classes" target="_self">Making Custom Classes</a> <ul> -<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make +<li><a href="#use-the-div-tag-to-make-sections" target="_self">Use the div tag to make sections</a></li> </ul></li> -<li><a href="#mobile-optimization">Mobile Optimization</a></li> +<li><a href="#mobile-optimization" target="_self">Mobile Optimization</a></li> </ul></li> -<li><a href="#how-to-look-things-up">How to look things up</a></li> -<li><a href="#references">References</a> +<li><a href="#how-to-look-things-up" target="_self">How to look things up</a></li> +<li><a href="#references" target="_self">References</a> <ul> -<li><a href="#html-1">HTML</a></li> -<li><a href="#css-1">CSS</a></li> +<li><a href="#html-1" target="_self">HTML</a></li> +<li><a href="#css-1" target="_self">CSS</a></li> </ul></li> </ul></li> </ul> </nav> <p><em>Note: you should run the examples to see how they work. You can either write the files yourself and open them in a web browser, or use -an online HTML editor like</em> <a -href="https://html-css-js.com/"><em>this one</em></a></p> +an online HTML editor like</em> <a href="https://html-css-js.com/"><em>this one</em></a></p> <p>As you can see from the current state of this site, I'm not exactly exactly the most skilled web designer. But I struggled through the basics enough to get an idiot's sense of front-end web design, so that perspective might be useful if you have no clue where to start with this like I did.</p> <p>The building blocks are very simple, <em>but there's a lot of -blocks</em>. The <a -href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5 +blocks</em>. The <a href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5 specification</a>, which most browsers are built around, defines the semantics of elements that can should be rendered by a web browser. CSS similarly defines the <em>attributes</em>--or styles--that can be -applied to those elements in a format specified <a -href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into +applied to those elements in a format specified <a href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into the weeds like professional designers do--and to be honest, I don't really want to. But I <em>do</em> like understanding how things work. And getting a unique custom HTML site is something anyone with a text @@ -269,15 +266,15 @@ more tags in this example:</p> <tr> <td>FSF!</td> <td> - <a href="https://www.fsf.org/"> - <img src="https://static.fsf.org/common/img/logo-new.png" /> + <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 href="https://www.kernel.org/"> + <img src="https://www.kernel.org/theme/images/logos/tux.png" /> </a> </td> </tr> @@ -303,25 +300,25 @@ world</em>. On it's own, the "a" tag doesn't do anything special. We need to use the tag with an <em>attribute</em>--an extra word that comes after a--in order to make it work for us. A more basic example might be this:</p> -<pre><code><a href="https://example.com">Example</a></code></pre> +<pre><code><a href="https://example.com">Example</a></code></pre> <p>Which you'll see as:</p> <p><a href="https://example.com">Example</a></p> <p>The "href" attribute doesn't <em>have</em> 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:</p> -<pre><code><a href="/cat.jpg">example</a></code></pre> +<pre><code><a href="/cat.jpg">example</a></code></pre> <p>You can also link an email like this</p> -<pre><code><a href="mailto:email@example.com">example email</a> +<pre><code><a href="mailto:email@example.com">example email</a> </code></pre> <p>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:</p> -<pre><code><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></code></pre> +<pre><code><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></code></pre> <h3 id="and-everything-else...">And Everything Else...</h3> <p>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 @@ -334,18 +331,15 @@ were enclosing sections of text and content. This is simply <em>inserting</em> an element right into the document.</p> <p>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 <a -href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long +The Mozilla Firefox "img" tag has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long page</a> on all the different attributes and effects you can apply to images.</p> <p>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 <a -href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which +referral from search engines is <a href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which is a great resource. I personally like to look at the HTML elements -reference of a common web browser like <a -href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a> +reference of a common web browser like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a> so I know exactly which elements work.</p> <p>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 @@ -430,7 +424,7 @@ The items in those lists </td> <td> Embeds another html file in the current one. Here's your IP from -ipaddress.sh:<br> <iframe src="https://ipaddress.sh/"></iframe> +ipaddress.sh:<br/> <iframe src="https://ipaddress.sh/"></iframe> </td> </tr> </table> @@ -448,12 +442,12 @@ example:</p> <pre><code><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"> + <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> @@ -492,12 +486,12 @@ Cascading Style Sheets (CSS).</p> <p>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.</p> -<pre><code><link rel="icon" href="/favicon.ico"></code></pre> +<pre><code><link rel="icon" href="/favicon.ico"></code></pre> <p>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 <em>all</em> tags in a specific document and create a unifying style for all your pages.</p> -<pre><code><link rel="stylesheet" type="text/css" href="/static/main.css"></code></pre> +<pre><code><link rel="stylesheet" type="text/css" href="/static/main.css"></code></pre> <p>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".</p> @@ -505,13 +499,13 @@ directory of "/var/www/html".</p> <p>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> -<pre><code><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" +<pre><code><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></code></pre> @@ -524,11 +518,7 @@ this background is blue <p style="color:red;background-color:blue;text-align:center"> this text is centered </p> -<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:justify;width:100%" - > And this links to sonichu </a></p> +<p><a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2" rel="noopener noreferrer" style="color:yellow;background-color:red;text-align:justify;width:100%" target="_blank"> And this links to sonichu </a></p> <p>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 <em>all</em> their attributes @@ -549,15 +539,13 @@ formatting I use for paragraphs is:</p> white-space: pre-wrap; word-wrap: break-all; }</code></pre> -<p>I get pretty much all the attribute names just by looking them up <a -href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in +<p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in order these lines:</p> <ul> <li>Add padding to the text lines to fill any empty space with space characters (this make the background look like a block)</li> <li>Increase the font size a bit more than normal</li> -<li>Set the background color gray, chosen from an <a -href="https://www.w3schools.com/colors/colors_picker.asp">HTML color +<li>Set the background color gray, chosen from an <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML color picker</a></li> <li>preserve white space, like the pre tag does</li> <li>break long lines, even in the middle of words</li> @@ -586,13 +574,9 @@ using the filter option like so:</p> filter: grayscale(100%) }</code></pre> <p>Applied:</p> -<p><img style="filter:grayscale(100%)" -src="/static/jazzcat.jpg" -/></p> -<p>You can read lots more options for image formatting <a -href="https://www.w3schools.com/css/css3_images.asp">here</a> and about -the filter property <a -href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p> +<p><img src="/static/jazzcat.jpg" style="filter:grayscale(100%)"/></p> +<p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about +the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p> <h3 id="making-custom-classes">Making Custom Classes</h3> <p>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 @@ -603,17 +587,15 @@ appear nice on dark theme browsers just as well. But I don't want to dim }</code></pre> <p>For one, that will only dim black-and-white images; anything else will just turn to mush like this:</p> -<p><img class="icon" -src="/static/jazzcat.jpg" -/></p> +<p><img class="icon" src="/static/jazzcat.jpg"/></p> <p>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:</p> <pre><code>img.icon { filter: invert(50%); }</code></pre> <p>And to implement it in HTML:</p> -<pre><code><img class="icon" src="/static/rss.svg" /></code></pre> -<p><img class="icon" src="/static/rss.svg" /></p> +<pre><code><img class="icon" src="/static/rss.svg" /></code></pre> +<p><img class="icon" src="/static/rss.svg"/></p> <h4 id="use-the-div-tag-to-make-sections">Use the div tag to make sections</h4> <p>You can use the class property on <em>any</em> HTML tag, but you can @@ -630,10 +612,10 @@ section like this:</p> 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:</p> -<pre><code><div class="content"> +<pre><code><div class="content"> <h1>My cat</h1> -<p>He's a cool cat</p> -<img src="/cat.jpg" /> +<p>He's a cool cat</p> +<img src="/cat.jpg" /> </div></code></pre> <h3 id="mobile-optimization">Mobile Optimization</h3> <p>In early development, reading this site on my phone was a painful @@ -641,9 +623,7 @@ 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.</p> -<p>I won't go into as gory details as <a -href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a -href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>, +<p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>, but for your basic smartphone, you can copy and paste this block:</p> <pre><code>@media screen and (max-device-width: 480px) { // override your tags here @@ -697,16 +677,10 @@ 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:</p> <ul> -<li>Mozilla <a -href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a> -and <a -href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li> -<li>w3schools <a -href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a -href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li> -<li>The official w3 docs <a -href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a -href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> +<li>Mozilla <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a> +and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li> +<li>w3schools <a href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li> +<li>The official w3 docs <a href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> </ul> <h2 id="references">References</h2> <h3 id="html-1">HTML</h3> @@ -739,3 +713,4 @@ href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> </ol> </body> </html> + |