diff options
23 files changed, 293 insertions, 384 deletions
diff --git a/.md/about/faq.md b/.md/about/faq.md index c99a722..4bd201b 100644 --- a/.md/about/faq.md +++ b/.md/about/faq.md @@ -34,22 +34,6 @@ vim for editing. Mostly because it's easy to edit consistently across servers and because I just spend so much of my time in the terminal lately that I'm used to it. -### *Why OpenBSD?* - -Honestly, I though the fish was cool. - - - -I don't know the artist of that one unfortunately, I just found it on a -forum. - -Besides I've installed Debian lots of times so I figured, why not try -something different? It's pretty cool as a server OS. Just a lot of -homework. I'm sure it's good as a desktop/laptop one too, but it's not -different enough for me to move all my data. - -For what it's worth, I use Debian sid for a daily driver. - ### *Why bother making your site from scratch? It looks like crap* Eh. I feel like if what I say isn't interesting, prettying it up won't diff --git a/.md/about/whereami.md b/.md/about/whereami.md index 01d0809..3aed3c3 100644 --- a/.md/about/whereami.md +++ b/.md/about/whereami.md @@ -16,11 +16,11 @@ stuff. *You're on the Internet*. Known to some as a [series of tubes](https://en.wikipedia.org/wiki/Series_of_tubes), -but in reality much more complicated than it has to be. In basic sense, your +but in reality much more complicated than it has to be. Like a phone call, your computer called mine, and mine answered with directory full of pages. The way you get here is through a device you have at home called a router, -which literally does what the name implies--it routes signals to where they +which literally does what the name implies: it routes signals to where they need to go to make things go beep. In the 60s and 70s, routers tended to be people-based and would require workers spend their time plugging cables into and out of ports so calls could connect. @@ -51,7 +51,7 @@ and porn sites. I'm getting lost on your question though, so where are we exactly? -Precisely speaking, you are in a chrooted web server running on rented virtual +Precisely speaking, you are in a web server running on rented virtual machine in a server farm located roughly in New Jersey browsing the "about" directory on the "whereami.html" page. @@ -62,7 +62,7 @@ besides host some private servers for you and your friends and family. But maybe most importantly, you've reached a webpage owned by another human being. Well mostly... I don't own the hardware. But the place is -mine; not a corporation's, or a bot's, or a government's. +mine. Not a corporation's, or a bot's, or a government's. All these files were loving crafted by yours truly in markdown, using vim, and converted with pandoc to HTML because of laziness. @@ -71,7 +71,7 @@ time, used to be filled with places like this. "Homepages" were a thing, or were just starting to be at least. But as soon as it started it all got sucked up and commodified into -social media; we somehow got coerced into profiles, templates, and +social media. We somehow got coerced into profiles, templates, and standards to make us easier for ad companies to study. And even I really liked it for a while, but over time, it got fake. I got fake. diff --git a/.md/about/whoami.md b/.md/about/whoami.md index 55c9cc2..b60a717 100644 --- a/.md/about/whoami.md +++ b/.md/about/whoami.md @@ -12,7 +12,7 @@ cynical. But all in all, not anyone in particular really.* When I first came up with a writing a page with this title, it devolved into a kind of personal essay. The kind of unwelcome nonsense you no doubt encounter (and I no doubt supplied) in comment sections on the -Internet or the paginated newsfeeds written by faceless names or in +Internet or in the paginated newsfeeds written by faceless names or in the rambling profiles that start with birth and forget where they're going around college. It seems to come easy to a lot of us. @@ -45,7 +45,7 @@ things that probably help for context's sake: I still find time to make some lights blink. - I spend a lot of time on the Internet lost. And in the process, - sometimes find useful things; though I largely find nonsense, which + sometimes find useful things: though I largely find nonsense, which has it's own value, but it's separate. Here is as close to home as I'll get for now. diff --git a/.md/thoughts/.description b/.md/thoughts/.description index 3bbad41..ef8826e 100644 --- a/.md/thoughts/.description +++ b/.md/thoughts/.description @@ -1,3 +1,3 @@ Things I am less qualified to write about, but persist nonetheless. -Thoughts on the internet, web, programming, self-improvement +Thoughts on the internet, programming, self-improvement diff --git a/.md/thoughts/society/social-media-human-experimentation.md b/.md/thoughts/society/social-media-human-experimentation.md new file mode 100644 index 0000000..1cb35fe --- /dev/null +++ b/.md/thoughts/society/social-media-human-experimentation.md @@ -0,0 +1,67 @@ +This document contains references to all instances of unethical human +experimentation committed by social media companies. The credit for this +of course goes to the respective authors who have done the real work of +documenting these crimes against humanity. + +So there is no confusion, I define "unethical human experimentation" by +the ten points of the Nuremberg Code (emphasis my own). + +Content is directly from: +https://en.wikipedia.org/wiki/Nuremberg_Code#The_ten_points_of_the_Nuremberg_Code + + + +1. *The voluntary consent of the human subject is absolutely essential.* + This means that the person involved should have legal capacity to + give consent; should be so situated as to be able to exercise free + power of choice, without the intervention of any element of force, + fraud, deceit, duress, overreaching, or other ulterior form of + constraint or coercion; and should have sufficient knowledge and + comprehension of the elements of the subject matter involved as to + enable him to make an understanding and enlightened decision. This + latter element requires that before the acceptance of an affirmative + decision by the experimental subject there *should be made known to + him the nature, duration, and purpose of the experiment*; the method + and means by which it is to be conducted; all inconveniences and + hazards reasonably to be expected; and the effects upon his health or + person which may possibly come from his participation in the + experiment. The duty and responsibility for ascertaining the quality + of the consent rests upon each individual who initiates, directs, or + engages in the experiment. It is a personal duty and responsibility + which may not be delegated to another with impunity. +2. The experiment should be such as to yield *fruitful results for the + good of society*, unprocurable by other methods or means of study, and + not random and unnecessary in nature. +3. The experiment should be so designed and based on the results of + animal experimentation and a knowledge of the natural history of the + disease or other problem under study that the anticipated results + will justify the performance of the experiment. +4. The experiment should be so conducted as to **avoid all unnecessary + physical and mental suffering and injury**. +5. No experiment should be conducted where there is an a priori reason + to believe that death or disabling injury will occur; except, + perhaps, in those experiments where the experimental physicians also + serve as subjects. +6. The degree of risk to be taken should never exceed that determined by + the humanitarian importance of the problem to be solved by the + experiment. +7. **Proper preparations should be made and adequate facilities provided + to protect the experimental subject against even remote possibilities + of injury, disability, or death.** +8. *The experiment should be conducted only by scientifically qualified + persons*. The highest degree of skill and care should be required + through all stages of the experiment of those who conduct or engage + in the experiment. +9. **During the course of the experiment the human subject should be at + liberty to bring the experiment to an end if he has reached the + physical or mental state where continuation of the experiment seems + to him to be impossible.** +10. During the course of the experiment the scientist in charge must be + prepared to terminate the experiment at any stage, if he has + probable cause to believe, in the exercise of the good faith, + superior skill and careful judgment required of him that a + continuation of the experiment is likely to result in injury, + disability, or death to the experimental subject. + + +## INSTAGRAM (META) diff --git a/.md/tutorials/splunk/.description b/.md/tutorials/splunk/.description index 699b696..9857874 100644 --- a/.md/tutorials/splunk/.description +++ b/.md/tutorials/splunk/.description @@ -1,3 +1,3 @@ I use splunk a whole lot at work. As far as docs go they're not bad -but sometimes you just gotta learn trhough comment sections. For +but sometimes you just gotta learn through comment sections. For questions that might not have a comment section, those answers are here diff --git a/.md/tutorials/splunk/how-to-debug-a-splunk-app.md b/.md/tutorials/splunk/how-to-debug-a-splunk-app.md deleted file mode 100644 index e69de29..0000000 --- a/.md/tutorials/splunk/how-to-debug-a-splunk-app.md +++ /dev/null diff --git a/about/faq.html b/about/faq.html index 0564d22..55da809 100644 --- a/about/faq.html +++ b/about/faq.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> @@ -28,26 +20,24 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#frequently-anticipated-questions" id="toc-frequently-anticipated-questions" target="_self">Frequently Anticipated +<li><a href="#frequently-anticipated-questions" target="_self">Frequently Anticipated Questions</a> <ul> -<li><a href="#questions-noone-asked-but-could-maybe" id="toc-questions-noone-asked-but-could-maybe" target="_self">Questions noone asked, -but could maybe</a> +<li><a href="#questions-noone-asked-but-could-maybe" target="_self">Questions noone +asked, but could maybe</a> <ul> -<li><a href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it" id="toc-why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it" target="_self"><em>Why +<li><a href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it" target="_self"><em>Why bother running a Tor hidden service if you're gonna put your full name on it?</em></a></li> -<li><a href="#how-come-i-cant-access-your-main-domain" id="toc-how-come-i-cant-access-your-main-domain" target="_self"><em>How come I can't -access your main domain?</em></a></li> -<li><a href="#you-wrote-all-this-in-vim-why-tho" id="toc-you-wrote-all-this-in-vim-why-tho" target="_self"><em>You wrote all this in -vim? Why tho?</em></a></li> -<li><a href="#why-openbsd" id="toc-why-openbsd" target="_self"><em>Why -OpenBSD?</em></a></li> -<li><a href="#why-bother-making-your-site-from-scratch-it-looks-like-crap" id="toc-why-bother-making-your-site-from-scratch-it-looks-like-crap" target="_self"><em>Why +<li><a href="#how-come-i-cant-access-your-main-domain" target="_self"><em>How come I +can't access your main domain?</em></a></li> +<li><a href="#you-wrote-all-this-in-vim-why-tho" target="_self"><em>You wrote all this +in vim? Why tho?</em></a></li> +<li><a href="#why-bother-making-your-site-from-scratch-it-looks-like-crap" target="_self"><em>Why bother making your site from scratch? It looks like crap</em></a></li> -<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff" id="toc-why-does-your-rss-feed-update-me-on-old-stuff" target="_self"><em>Why does your -RSS feed update me on old stuff?</em></a></li> -<li><a href="#why-is-this-site-public-domain-what-does-that-mean" id="toc-why-is-this-site-public-domain-what-does-that-mean" target="_self"><em>Why is +<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff" target="_self"><em>Why +does your RSS feed update me on old stuff?</em></a></li> +<li><a href="#why-is-this-site-public-domain-what-does-that-mean" target="_self"><em>Why is this site public domain? What does that mean?</em></a></li> </ul></li> </ul></li> @@ -87,16 +77,6 @@ vim? Why tho?</em></h3> using vim for editing. Mostly because it's easy to edit consistently across servers and because I just spend so much of my time in the terminal lately that I'm used to it.</p> -<h3 id="why-openbsd"><em>Why OpenBSD?</em></h3> -<p>Honestly, I though the fish was cool.</p> -<p><img src="/static/media/puffy.gif"/></p> -<p>I don't know the artist of that one unfortunately, I just found it on -a forum.</p> -<p>Besides I've installed Debian lots of times so I figured, why not try -something different? It's pretty cool as a server OS. Just a lot of -homework. I'm sure it's good as a desktop/laptop one too, but it's not -different enough for me to move all my data.</p> -<p>For what it's worth, I use Debian sid for a daily driver.</p> <h3 id="why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why bother making your site from scratch? It looks like crap</em></h3> <p>Eh. I feel like if what I say isn't interesting, prettying it up diff --git a/about/howami.html b/about/howami.html index d7268a5..5c2fe23 100644 --- a/about/howami.html +++ b/about/howami.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> diff --git a/about/whatami.html b/about/whatami.html index 9a345fd..89796bd 100644 --- a/about/whatami.html +++ b/about/whatami.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> diff --git a/about/whereami.html b/about/whereami.html index 35f7a39..4fcab70 100644 --- a/about/whereami.html +++ b/about/whereami.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> @@ -39,11 +31,11 @@ credit cards, golf, and girls' basketball.</p> <em>ok</em>. I don't really get all this stuff either. Let's start with some easy stuff.</p> <p><em>You're on the Internet</em>. Known to some as a <a href="https://en.wikipedia.org/wiki/Series_of_tubes">series of -tubes</a>, but in reality much more complicated than it has to be. In -basic sense, your computer called mine, and mine answered with directory -full of pages.</p> +tubes</a>, but in reality much more complicated than it has to be. Like +a phone call, your computer called mine, and mine answered with +directory full of pages.</p> <p>The way you get here is through a device you have at home called a -router, which literally does what the name implies--it routes signals to +router, which literally does what the name implies: it routes signals to where they need to go to make things go beep. In the 60s and 70s, routers tended to be people-based and would require workers spend their time plugging cables into and out of ports so calls could connect.</p> @@ -68,9 +60,9 @@ bulk connection and rent them out for people to run fake media companies, blogs about cats, and porn sites.</p> <p>I'm getting lost on your question though, so where are we exactly?</p> -<p>Precisely speaking, you are in a chrooted web server running on -rented virtual machine in a server farm located roughly in New Jersey -browsing the "about" directory on the "whereami.html" page.</p> +<p>Precisely speaking, you are in a web server running on rented virtual +machine in a server farm located roughly in New Jersey browsing the +"about" directory on the "whereami.html" page.</p> <p>Less precisely, all that means is you're looking at some files I left in a directory at this address, and paid some people to host for me since local ISPs tend to be ridiculously expensive if you want to do @@ -78,14 +70,14 @@ anything besides host some private servers for you and your friends and family.</p> <p>But maybe most importantly, you've reached a webpage owned by another human being. Well mostly... I don't own the hardware. But the place is -mine; not a corporation's, or a bot's, or a government's. All these +mine. Not a corporation's, or a bot's, or a government's. All these files were loving crafted by yours truly in markdown, using vim, and converted with pandoc to HTML because of laziness.</p> <p>The Internet I grew up with, though I didn't really appreciate it at the time, used to be filled with places like this. "Homepages" were a thing, or were just starting to be at least.</p> <p>But as soon as it started it all got sucked up and commodified into -social media; we somehow got coerced into profiles, templates, and +social media. We somehow got coerced into profiles, templates, and standards to make us easier for ad companies to study. And even I really liked it for a while, but over time, it got fake. I got fake.</p> <p>And speaking of fake, it's not even unreasonable to believe you're diff --git a/about/whoami.html b/about/whoami.html index 2033350..c34ab97 100644 --- a/about/whoami.html +++ b/about/whoami.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> @@ -38,8 +30,8 @@ really.</em></p> <p>When I first came up with a writing a page with this title, it devolved into a kind of personal essay. The kind of unwelcome nonsense you no doubt encounter (and I no doubt supplied) in comment sections on -the Internet or the paginated newsfeeds written by faceless names or in -the rambling profiles that start with birth and forget where they're +the Internet or in the paginated newsfeeds written by faceless names or +in the rambling profiles that start with birth and forget where they're going around college. It seems to come easy to a lot of us.</p> <p>But lately, I'm not so sure I've earned the right yet.</p> <p>I'd rather just let my work (and my play) stand for itself, for @@ -65,7 +57,7 @@ metrics, I'm probably not great at that, but I'm getting there. I love a good math problem, and though I only got a B in my college circuits class, I still find time to make some lights blink.</p></li> <li><p>I spend a lot of time on the Internet lost. And in the process, -sometimes find useful things; though I largely find nonsense, which has +sometimes find useful things: though I largely find nonsense, which has it's own value, but it's separate.</p></li> </ul> <p>Here is as close to home as I'll get for now.</p> diff --git a/about/whyami.html b/about/whyami.html index cbb1e10..60a8246 100644 --- a/about/whyami.html +++ b/about/whyami.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> diff --git a/thoughts/.description b/thoughts/.description index 3bbad41..ef8826e 100644 --- a/thoughts/.description +++ b/thoughts/.description @@ -1,3 +1,3 @@ Things I am less qualified to write about, but persist nonetheless. -Thoughts on the internet, web, programming, self-improvement +Thoughts on the internet, programming, self-improvement diff --git a/thoughts/syntax/my-worst-habit.html b/thoughts/syntax/my-worst-habit.html index ac0c36a..61dcd6a 100644 --- a/thoughts/syntax/my-worst-habit.html +++ b/thoughts/syntax/my-worst-habit.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> diff --git a/thoughts/syntax/random-python-idiosyncrasies.html b/thoughts/syntax/random-python-idiosyncrasies.html index 77d586c..57bfc21 100644 --- a/thoughts/syntax/random-python-idiosyncrasies.html +++ b/thoughts/syntax/random-python-idiosyncrasies.html @@ -8,22 +8,12 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } - .display.math{display: block; text-align: center; margin: 0.5rem auto;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,22 +83,21 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#coding-style-guide" id="toc-coding-style-guide" target="_self">Coding -Style Guide</a> +<li><a href="#coding-style-guide" target="_self">Coding Style Guide</a> <ul> -<li><a href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted." id="toc-strings-are-double-quoted.-keys-and-chars-are-single-quoted." target="_self">1) +<li><a href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted." target="_self">1) <em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and <em>chars</em> are <em>single-quoted</em>.</a></li> -<li><a href="#long-strings-belong-in-parentheses" id="toc-long-strings-belong-in-parentheses" target="_self">2) Long strings belong in -parentheses</a></li> -<li><a href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs" id="toc-tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs" target="_self">3) +<li><a href="#long-strings-belong-in-parentheses" target="_self">2) Long strings belong +in parentheses</a></li> +<li><a href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs" target="_self">3) Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to tabs</a></li> -<li><a href="#always-add-spaces-between-arithmetic-but-never-for-brackets" id="toc-always-add-spaces-between-arithmetic-but-never-for-brackets" target="_self">4) +<li><a href="#always-add-spaces-between-arithmetic-but-never-for-brackets" target="_self">4) Always add spaces between arithmetic, but never for brackets</a></li> -<li><a href="#everything-should-be-snake_case" id="toc-everything-should-be-snake_case" target="_self">5) EVERYTHING should be +<li><a href="#everything-should-be-snake_case" target="_self">5) EVERYTHING should be snake_case</a></li> -<li><a href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class" id="toc-if-its-over-100-lines-you-probably-need-a-new-file-and-a-class" target="_self">6) +<li><a href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class" target="_self">6) If it's over 100 lines, you probably need a new file (and a class)</a></li> </ul></li> @@ -148,7 +138,7 @@ avoid escapes, really)</p> <div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a>quoted_string <span class="op">=</span> (</span> <span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a> <span class="st">'"You miss 100</span><span class="sc">% o</span><span class="st">f the shots you don'</span>t take <span class="op">-</span> Wayne Gretsky<span class="st">"'</span></span> <span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a><span class="er"> ' - Michael Scott'</span></span> -<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a>)</span></code></pre></div> +<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a><span class="er">)</span></span></code></pre></div> <p>That brings me to my next point.</p> <h2 id="long-strings-belong-in-parentheses">2) Long strings belong in parentheses</h2> diff --git a/tutorials/pc_gaming/common-gfx-card-installation-woes.html b/tutorials/pc_gaming/common-gfx-card-installation-woes.html index c3731b2..8478736 100644 --- a/tutorials/pc_gaming/common-gfx-card-installation-woes.html +++ b/tutorials/pc_gaming/common-gfx-card-installation-woes.html @@ -8,22 +8,12 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } - .display.math{display: block; text-align: center; margin: 0.5rem auto;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,18 +83,19 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#step-1-the-replacement" id="toc-step-1-the-replacement" target="_self">Step 1: The Replacement</a></li> -<li><a href="#step-2-re-installing-the-drivers" id="toc-step-2-re-installing-the-drivers" target="_self">Step 2: Re-installing the -drivers</a> +<li><a href="#step-1-the-replacement" target="_self">Step 1: The Replacement</a></li> +<li><a href="#step-2-re-installing-the-drivers" target="_self">Step 2: Re-installing +the drivers</a> <ul> -<li><a href="#part-one-fix-broken-packages" id="toc-part-one-fix-broken-packages" target="_self">Part one: Fix Broken +<li><a href="#part-one-fix-broken-packages" target="_self">Part one: Fix Broken Packages</a></li> -<li><a href="#part-two-re-install-nvidia-driver" id="toc-part-two-re-install-nvidia-driver" target="_self">Part two: Re-install +<li><a href="#part-two-re-install-nvidia-driver" target="_self">Part two: Re-install nvidia-driver</a></li> -<li><a href="#part-negative-three-just-in-case" id="toc-part-negative-three-just-in-case" target="_self">Part negative three: Just in -case</a></li> +<li><a href="#part-negative-three-just-in-case" target="_self">Part negative three: +Just in case</a></li> </ul></li> -<li><a href="#step-three-reboot-and-test" id="toc-step-three-reboot-and-test" target="_self">Step three: Reboot and test</a></li> +<li><a href="#step-three-reboot-and-test" target="_self">Step three: Reboot and +test</a></li> </ul> </nav> <p>I recently upgraded by PC from an Nvidia 1050 Ti card to a new 3060 diff --git a/tutorials/splunk/.description b/tutorials/splunk/.description index 699b696..9857874 100644 --- a/tutorials/splunk/.description +++ b/tutorials/splunk/.description @@ -1,3 +1,3 @@ I use splunk a whole lot at work. As far as docs go they're not bad -but sometimes you just gotta learn trhough comment sections. For +but sometimes you just gotta learn through comment sections. For questions that might not have a comment section, those answers are here diff --git a/tutorials/splunk/i-found-out-splunk-macros-are-awesome.html b/tutorials/splunk/i-found-out-splunk-macros-are-awesome.html index d1ea507..a98947b 100644 --- a/tutorials/splunk/i-found-out-splunk-macros-are-awesome.html +++ b/tutorials/splunk/i-found-out-splunk-macros-are-awesome.html @@ -8,18 +8,10 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } + ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> 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 29e4601..c98c1e2 100644 --- a/tutorials/tor/how-to-host-a-tor-hidden-service.html +++ b/tutorials/tor/how-to-host-a-tor-hidden-service.html @@ -8,22 +8,12 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } - .display.math{display: block; text-align: center; margin: 0.5rem auto;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,13 +83,11 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#how-to-spin-up-a-temporary-hidden-file-share-with-python" id="toc-how-to-spin-up-a-temporary-hidden-file-share-with-python" target="_self">How to +<li><a href="#how-to-spin-up-a-temporary-hidden-file-share-with-python" target="_self">How to spin up a temporary hidden file share with Python</a> <ul> -<li><a href="#configure-tor" id="toc-configure-tor" target="_self">Configure -Tor</a></li> -<li><a href="#set-up-the-server" id="toc-set-up-the-server" target="_self">Set up the -server</a></li> +<li><a href="#configure-tor" target="_self">Configure Tor</a></li> +<li><a href="#set-up-the-server" target="_self">Set up the server</a></li> </ul></li> </ul> </nav> diff --git a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html index c90f1c2..44c933f 100644 --- a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html +++ b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html @@ -8,22 +8,12 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } - .display.math{display: block; text-align: center; margin: 0.5rem auto;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,10 +83,9 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#the-problem" id="toc-the-problem" target="_self">The Problem</a></li> -<li><a href="#the-attempt" id="toc-the-attempt" target="_self">The Attempt</a></li> -<li><a href="#the-actual-solution" id="toc-the-actual-solution" target="_self">The -Actual Solution</a></li> +<li><a href="#the-problem" target="_self">The Problem</a></li> +<li><a href="#the-attempt" target="_self">The Attempt</a></li> +<li><a href="#the-actual-solution" target="_self">The Actual Solution</a></li> </ul> </nav> <p>I really like neovim since <a href="https://github.com/neoclide/coc.nvim">COC</a> is integrated with diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index c02f174..b1fc456 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -8,22 +8,12 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } - .display.math{display: block; text-align: center; margin: 0.5rem auto;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,38 +83,35 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#background" id="toc-background" target="_self">Background</a></li> -<li><a href="#what-is-a-web-server-and-how-do-i-run-one" id="toc-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> +<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" id="toc-getting-from-localhost-to-the-internet" target="_self">Getting from localhost -to the internet</a></li> +<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" id="toc-how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently" target="_self">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" id="toc-can-i-run-a-web-server-at-home" target="_self">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" id="toc-so-what-should-i-do" target="_self">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" id="toc-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" id="toc-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" id="toc-perspective" target="_self">Perspective</a></li> -<li><a href="#references" id="toc-references" target="_self">References</a> +<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" target="_self">Perspective</a></li> +<li><a href="#references" target="_self">References</a> <ul> -<li><a href="#terms-of-service-for-certain-isps" id="toc-terms-of-service-for-certain-isps" target="_self">Terms of service for certain -ISPs</a> +<li><a href="#terms-of-service-for-certain-isps" target="_self">Terms of service for +certain ISPs</a> <ul> -<li><a href="#verizon" id="toc-verizon" target="_self">Verizon</a></li> -<li><a href="#optimum" id="toc-optimum" target="_self">Optimum</a></li> -<li><a href="#spectrum" id="toc-spectrum" target="_self">Spectrum</a></li> -<li><a href="#att" id="toc-att" target="_self">AT&T</a></li> -<li><a href="#cox-communications" id="toc-cox-communications" target="_self">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> diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 1ea2fbf..93169db 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -8,22 +8,12 @@ <style> code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} - div.columns{display: flex; gap: min(4vw, 1.5em);} - div.column{flex: auto; overflow-x: auto;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} - /* The extra [class] is a hack that increases specificity enough to - override a similar rule in reveal.js */ - ul.task-list[class]{list-style: none;} - ul.task-list li input[type="checkbox"] { - font-size: inherit; - width: 0.8em; - margin: 0 0.8em 0.2em -1.6em; - vertical-align: middle; - } - .display.math{display: block; text-align: center; margin: 0.5rem auto;} - /* CSS for syntax highlighting */ + ul.task-list{list-style: none;} pre > code.sourceCode { white-space: pre; position: relative; } - pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } @@ -85,6 +75,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> <link href="../../static/main.css" rel="stylesheet"/> </head> @@ -92,43 +83,37 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#web-browsers-render-code" id="toc-web-browsers-render-code" target="_self">Web browsers render code</a> +<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a> <ul> -<li><a href="#html" id="toc-html" target="_self">HTML</a> +<li><a href="#html" target="_self">HTML</a> <ul> -<li><a href="#basic-format" id="toc-basic-format" target="_self">Basic Format</a></li> -<li><a href="#tables-and-links" id="toc-tables-and-links" target="_self">Tables and -Links</a></li> -<li><a href="#and-everything-else..." id="toc-and-everything-else..." target="_self">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" id="toc-shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text and -Formatting Tags</a></li> +<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" id="toc-html-metadata" target="_self">HTML -Metadata</a></li> +<li><a href="#html-metadata" target="_self">HTML Metadata</a></li> </ul></li> -<li><a href="#css" id="toc-css" target="_self">CSS</a> +<li><a href="#css" target="_self">CSS</a> <ul> -<li><a href="#add-style-without-css" id="toc-add-style-without-css" target="_self">Add -style <em>without</em> CSS</a></li> -<li><a href="#basic-formatting" id="toc-basic-formatting" target="_self">Basic -Formatting</a></li> -<li><a href="#image-formatting" id="toc-image-formatting" target="_self">Image -Formatting</a></li> -<li><a href="#making-custom-classes" id="toc-making-custom-classes" target="_self">Making Custom Classes</a> +<li><a href="#add-style-without-css" target="_self">Add style <em>without</em> +CSS</a></li> +<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" id="toc-use-the-div-tag-to-make-sections" target="_self">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" id="toc-mobile-optimization" target="_self">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" id="toc-how-to-look-things-up" target="_self">How -to look things up</a></li> -<li><a href="#references" id="toc-references" target="_self">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" id="toc-html-1" target="_self">HTML</a></li> -<li><a href="#css-1" id="toc-css-1" target="_self">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> @@ -168,22 +153,22 @@ it.</p> <h3 id="basic-format">Basic Format</h3> <p>All HTML files start with the following (note: the spacing does not matter, it's just spaced for readability):</p> -<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> +<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a> <span class="kw"><body></span></span> <span id="cb1-3"><a aria-hidden="true" href="#cb1-3" tabindex="-1"></a> <span class="co"><!-- stuff you see goes here --></span></span> -<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <p>You'll notice two <em>tags</em> 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:</p> -<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>My great paragraph<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a> <span class="kw"><body></span></span> +<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a> <span class="kw"><h1></span>My Great page<span class="kw"></h1></span></span> +<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a> <span class="kw"><p></span>My great paragraph<span class="kw"></p></span></span> +<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <p>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 @@ -194,33 +179,33 @@ text in a file called "page.html" and open it in your browser.</p> <h3 id="tables-and-links">Tables and Links</h3> <p>We can do a lot more than text of course. Let's walk through some more tags in this example:</p> -<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>My great paragraph<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a> <span class="dt"><</span><span class="kw">br</span><span class="dt">></span></span> -<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h3</span><span class="dt">></span>Please check out these links, really cool stuff!<span class="dt"></</span><span class="kw">h3</span><span class="dt">></span></span> -<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a> <span class="dt"><</span><span class="kw">center</span><span class="dt">></span></span> -<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a> <span class="dt"><</span><span class="kw">table</span><span class="dt">></span></span> -<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a> <span class="dt"><</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span>FSF!<span class="dt"></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a> <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="dt">></span></span> -<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a> <span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="dt">/></span></span> -<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a> <span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a> <span class="dt"></</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a> <span class="dt"><</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span>LOONIX!<span class="dt"></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a> <span class="dt"><</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a> <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="dt">></span></span> -<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a> <span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="dt">/></span></span> -<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a> <span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a> <span class="dt"></</span><span class="kw">td</span><span class="dt">></span></span> -<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a> <span class="dt"></</span><span class="kw">tr</span><span class="dt">></span></span> -<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a> <span class="dt"></</span><span class="kw">table</span><span class="dt">></span></span> -<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a> <span class="dt"></</span><span class="kw">center</span><span class="dt">></span></span> -<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a> <span class="kw"><body></span></span> +<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a> <span class="kw"><h1></span>My Great page<span class="kw"></h1></span></span> +<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a> <span class="kw"><p></span>My great paragraph<span class="kw"></p></span></span> +<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a> <span class="kw"><br></span></span> +<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a> <span class="kw"><h3></span>Please check out these links, really cool stuff!<span class="kw"></h3></span></span> +<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a> <span class="kw"><center></span></span> +<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a> <span class="kw"><table></span></span> +<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a> <span class="kw"><tr></span></span> +<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a> <span class="kw"><td></span>FSF!<span class="kw"></td></span></span> +<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a> <span class="kw"><td></span></span> +<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a> <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="kw">></span></span> +<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a> <span class="kw"><img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="kw">/></span></span> +<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a> <span class="kw"></a></td></span></span> +<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a> <span class="kw"></tr></span></span> +<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a> <span class="kw"><tr></span></span> +<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a> <span class="kw"><td></span>LOONIX!<span class="kw"></td></span></span> +<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a> <span class="kw"><td></span></span> +<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a> <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="kw">></span></span> +<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a> <span class="kw"><img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="kw">/></span></span> +<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a> <span class="kw"></a></span></span> +<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a> <span class="kw"></td></span></span> +<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a> <span class="kw"></tr></span></span> +<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a> <span class="kw"></table></span></span> +<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a> <span class="kw"></center></span></span> +<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <p>We added a few things here, but it's the same pattern right? <open></close>.</p> <p>We started by adding a "center" tag, which does what you think: it @@ -239,24 +224,24 @@ 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> -<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="dt">></span>Example<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="kw">></span>Example<span class="kw"></a></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="dt">></span>example<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="kw">></span>example<span class="kw"></a></span></span></code></pre></div> <p>You can also link an email like this</p> -<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="dt">></span>example email<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="kw">></span>example email<span class="kw"></a></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="dt">></span>home<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="dt">></span>about<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="dt">></span>faq<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="dt">></span>cats<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span> -<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="dt">></span>vidya<span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="kw">></span>home<span class="kw"></a></span></span> +<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="kw">></span>about<span class="kw"></a></span></span> +<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="kw">></span>faq<span class="kw"></a></span></span> +<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="kw">></span>cats<span class="kw"></a></span></span> +<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="kw">></span>vidya<span class="kw"></a></span></span></code></pre></div> <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 @@ -377,21 +362,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:</p> -<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">html</span><span class="dt">></span></span> -<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a> <span class="dt"><</span><span class="kw">head</span><span class="dt">></span></span> -<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a> <span class="dt"><</span><span class="kw">title</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">title</span><span class="dt">></span></span> -<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="dt">/></span></span> -<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="dt">></span></span> -<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="dt">></span></span> -<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="dt">></span></span> -<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a> <span class="dt"><</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="dt">></span></span> -<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a> <span class="dt"><</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">></span></span> -<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a> <span class="dt"></</span><span class="kw">head</span><span class="dt">></span></span> -<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a> <span class="dt"><</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My Great page<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>My great paragraph<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a> <span class="dt"></</span><span class="kw">body</span><span class="dt">></span></span> -<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="dt"></</span><span class="kw">html</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="kw"><html></span></span> +<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a> <span class="kw"><head></span></span> +<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a> <span class="kw"><title></span>My Great page<span class="kw"></title></span></span> +<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="kw">/></span></span> +<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="kw">></span></span> +<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="kw">></span></span> +<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="kw">></span></span> +<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a> <span class="kw"><meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="kw">></span></span> +<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a> <span class="kw"><link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="kw">></span></span> +<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a> <span class="kw"></head></span></span> +<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a> <span class="kw"><body></span></span> +<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a> <span class="kw"><h1></span>My Great page<span class="kw"></h1></span></span> +<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a> <span class="kw"><p></span>My great paragraph<span class="kw"></p></span></span> +<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a> <span class="kw"></body></span></span> +<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="kw"></html></span></span></code></pre></div> <p>Note that the "meta" tag works like the "img" tag did and has no closing tag.</p> <p>The first tag in the head is the "title" tag. This is the title of @@ -424,12 +409,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> -<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="kw"><link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="kw">></span></span></code></pre></div> <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> -<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="kw"><link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="kw">></span></span></code></pre></div> <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> @@ -437,16 +422,16 @@ 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> -<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="dt">></span>this text is red<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="dt">></span>this background is blue<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="dt">></span>this text is centered<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="dt"><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&</span><span class="st">episode_no=2"</span></span> +<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="kw"><p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="kw">></span>this text is red<span class="kw"></p></span></span> +<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="kw"><p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="kw">></span>this background is blue<span class="kw"></p></span></span> +<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="kw"><p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="kw">></span>this text is centered<span class="kw"></p></span></span> +<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="kw"><a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&</span><span class="st">episode_no=2"</span></span> <span id="cb11-5"><a aria-hidden="true" href="#cb11-5" tabindex="-1"></a><span class="ot"> target=</span><span class="st">"_blank"</span></span> <span id="cb11-6"><a aria-hidden="true" href="#cb11-6" tabindex="-1"></a><span class="ot"> rel=</span><span class="st">"noopener noreferrer"</span></span> <span id="cb11-7"><a aria-hidden="true" href="#cb11-7" tabindex="-1"></a><span class="ot"> style=</span><span class="st">"color:yellow;background-color:red;text-align:right"</span></span> -<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a> <span class="dt">></span></span> +<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a> <span class="kw">></span></span> <span id="cb11-9"><a aria-hidden="true" href="#cb11-9" tabindex="-1"></a> And this links to sonichu</span> -<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="dt"></</span><span class="kw">a</span><span class="dt">></span></span></code></pre></div> +<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="kw"></a></span></span></code></pre></div> <p style="color:red"> this text is red </p> @@ -550,11 +535,11 @@ 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> -<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="dt"><</span><span class="kw">div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="dt">></span></span> -<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>My cat<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span> -<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="dt"><</span><span class="kw">p</span><span class="dt">></span>He's a cool cat<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span> -<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="dt"><</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="dt">/></span></span> -<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="dt"></</span><span class="kw">div</span><span class="dt">></span></span></code></pre></div> +<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="kw"><div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="kw">></span></span> +<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="kw"><h1></span>My cat<span class="kw"></h1></span></span> +<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="kw"><p></span>He's a cool cat<span class="kw"></p></span></span> +<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="kw"><img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="kw">/></span></span> +<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="kw"></div></span></span></code></pre></div> <h3 id="mobile-optimization">Mobile Optimization</h3> <p>In early development, reading this site on my phone was a painful experience. Fortunately, in addition to some tricks above like the |