diff options
| -rw-r--r-- | certbot.html | 1 | ||||
| -rw-r--r-- | html.html | 81 | ||||
| -rw-r--r-- | html2.html | 10 | ||||
| -rw-r--r-- | index.html | 82 | ||||
| -rw-r--r-- | maintenance.html | 23 | ||||
| -rw-r--r-- | pix/html2-01.png | bin | 0 -> 12697 bytes | |||
| -rw-r--r-- | style.css | 69 |
7 files changed, 104 insertions, 162 deletions
diff --git a/certbot.html b/certbot.html index ed3d2b3..dded807 100644 --- a/certbot.html +++ b/certbot.html @@ -123,7 +123,6 @@ ufw allow 443</code></pre> <p> Save the file and exit to activate this cronjob. - For more information about cronjobs, see <a href="maintenance.html#cronjobs">the article on them</a>. </p> <span class=next><a href="html.html">Next: Use HTML to Make Simple Webpages</a></span> @@ -49,7 +49,7 @@ Note how this HTML file appears as a webpage: -<table> +<table class=cnp> <tr> <td> <pre><code><!DOCTYPE html> @@ -70,7 +70,7 @@ multiple lines. Observe if we add lines to the end of this file: </p> -<table> +<table class=cnp> <tr> <td> <pre><code><!DOCTYPE html> @@ -116,7 +116,7 @@ Heading tags are for your page's title and section headings in the document: </ul> -<table> +<table class=cnp> <tr> <td> <pre><code><h1>This is a top-level heading.</h1> @@ -149,69 +149,50 @@ If we use these heading tags, when we clear CSS, we can easily style all <code>& to be the size and color and alignment we want. </p> -<<++>> -<<++>> -<<++>> - <h2>A look at a decent template</h2> +<h2>Text formatting</h2> - <p> - It's a good habit to include the same core things in every HTML page. - I have a template file that I use for this website that includes all the basics. - When I make a new page, I just copy the template and add the content. - Here is what the template looks like: - </p> -<code><pre><!DOCTYPE html> -<html lang=en> - <head> - <title><strong>Your page title</strong></title> - <meta charset="utf-8"/> - <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> - <link rel='stylesheet' type='text/css' href='style.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel='alternate' type='application/rss+xml' title='<strong>Site Title</strong> RSS' href='/rss.xml'> - </head> -<body> - <header><h1><strong>Your page title</strong></h1></header> - - <nav></nav> - - <main> +<p> +HTML can also be used to do text formatting. +We can make bold, italic, underlined or struck through text with more HTML tags: +</p> - <strong>Put all your page content here in the <main> tag.</strong> +<table class=cnp> + <tr> + <td> +<pre><code><p>This is <b>bold text</b>.</p> - </main> +<p>This is <i>italic text</i>.</p> - <footer></footer> -</body> -</html></code></pre> +<p>This is <u>underlined</u>.</p> - <h3>The - </h3> +<p>This is <s>struck through</s>.</p></code></pre> + </td> + <td> + <img src="pix/html2-01.png" alt="formatted text"> + </td> + </tr> +</table> - <h3>HTML can be broken...</h3> + <h2>Semantic Tags</h2> <p> - HTML is interpreted by browsers very liberally. - If you make mistakes in HTML, browsers will do their best to be forgiving and try to figure out what you meant. + While <code><b></b></code> and <code><i></i></code> + do exist, it's actually better <em>not</em> to use them directly in text. </p> <p> - For example, paragraphs are formatted by the <code><p></code> tag and when the paragraph ends, - <code></p></code> should be included. - However, if you forget or neglect to include a <code></p></code> to close the tag, this isn't a big deal, as if your browser sees another <code><p></code> to start a new paragraph, it will consider the previous paragraphy closed and both paragraphs will be formatted correctly. - In fact, there are some people nowadays that only ever use the opening tag and never close them! + Try using <code><strong></strong></code> instead of <code><b></b></code> and <code><em></em></code> instead of <code><i></i></code>. + By default, they will look exactly the same. + You complain that they require more key presses, but it's thought to be a very bad idea to modify lower-level tags with CSS directly. </p> - <h3>...but not always.</h3> - <p> - That works fine with <code><p></code>, but for other tags like <code><b></code>, it won't work. - Your browser can't guess where you want the bolding to end, so if you fail to close a <code><b></code> with <code></b></code>, - the whole rest of your document will show up bold! + Note that some bold words on this site have <strong>different color for emphasis</strong>. + This is a setting set via CSS for all <code><strong></code> tags. + It would not be a good idea for us to use this for <code><b></code>, since there might be a non-colored situation we want to occasionally use it in. </p> - - <span class=next><a href="html2.html">Next: Text formatting in HTML</a></span> + <span class=next><a href="html2.html">Next: Images and Links in HTML</a></span> </main> <footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer> @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang=en> <head> - <title>Text formatting in HTML – LandChad.net</title> + <title>Images and Links in HTML – LandChad.net</title> <meta charset="utf-8"/> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel='stylesheet' type='text/css' href='style.css'> @@ -9,15 +9,13 @@ <link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'> </head> <body> - <header><h1>Text formatting in HTML</h1></header> + <header><h1>Images and Links in HTML</h1></header> <nav></nav> <main> + <h2>Links</h2> <p> - Now we know some basic concepts of HTML, including <code><<++>>p<<++>></code> and <code><<++>>h1<<++>></code>, so now we'll learn all the core formatting abilities of HTML in one brief sitting. + We need to create links </p> - - <h2>Semantic Tags</h2> - <<++>> <<++>> <<++>> @@ -54,7 +54,11 @@ <li><a href="bat.html"><img src="pix/bat.svg">Basic Attention Token (BAT)</a></li> </ul> - <!-- RSYNC --> + <h3 ol=other>Excellent Extras</h3> + <ul> + <li><a href="maintenance.html">How to maintain a server.</a></li> + <li><a href="sshkeys.html">Use your SSH keys to prevent hacking.</a></li> + </ul> <h2>In the Works...</h2> @@ -63,67 +67,40 @@ Subscribe to our <a href="rss.xml"><img src="pix/rss.svg">RSS feed</a> for updates. </p> - <h3>Editing and Styling Webpages</h3> - - <p> - Now that we have a basic webpage up hosted on our own server, we can - look more directly about how to design and style your website to - contain the material you want in the way that you want. - </p> - - <ol class=ll> - <li><a href="html.html">HTML Bare Basics</a></li> - <li><a href="html2.html">Text formatting in HTML</a></li> - <li><a href="html3.html">Links and Images in HTML</a></li> - <li><a href="html4.html">Doing HTML right.</a></li> - <li><a href="css.html">Use CSS to style webpages consistently.</a></li> - </ol> + <h3>Articles and Tutorials in Progress...</h3> - <h3>Email server</h3> - - <p> - The only truly private and way to use email is the host your own! - This is - </p> - - <ul class=ll> - <li><a href="emailwiz.html">An email server the easy way.</a></li> - <li>Or, <a href="email-manual.html">email the longer way.</a></li> - <li><a href="spam.html">Filtering spam efficiently</a></li> + <ul> + <li>Full HTML tutorial</li> + <li>Full CSS tutorial</li> + <li>Setting up an Email server</li> + <li>Using rsync for websites and servers.</li> + <li>XMPP (federated chat)</li> + <li>Matrix (federated chat)</li> + <li>SearX (search engine)</li> </ul> - <h3>Excellent Extras</h3> + <h3>On the look out for...</h3> <p> - There are also many one-off articles on other things you can add to your website. + There are other articles not currently under construction which we would like to add the LandChad.net. + If you have experience with any of these, you may submit an article for review on <a href="https://github.com/lukesmithxyz/landchad">the Github</a>. + Please include directions for Debian 10 as default. + Abstain from using containization. + Attempt to follow the same settings as other articles here. </p> - <ul class=ll> - <li><a href="maintenance.html">How to maintain a server.</a></li> - <li><a href="sshkeys.html">Use your SSH keys to prevent hacking.</a></li> - <li><a href="rsync.html">Rsync is glorious.</a></li> - <li><a href="firewall.html">ufw as a Firewall</a></li> - </ul> - - <h3>Make your own social media</h3> - - <ul class=ll> - <li>Federation</li> - </ul> - - <ul class=ll> - <li>XMPP</li> - <li>Matrix</li> + <ul> + <li>Cronjobs</li> + <li>IRC servers</li> + <li>Email webclients</li> + <li>NextCloud (file hosting)</li> + <li>Calibre (library server)</li> + <li>Nitter</li> <li>Pleroma (like Twitter)</li> <li>PeerTube (like YouTube)</li> + <li>Using ufw as a firewall.</li> </ul> - <h2><img src="pix/rss.svg" alt="rss"> Subscribe for Updates</h2> - - <p> - Subscribe to our <img src="pix/rss.svg" alt="rss logo">RSS feed <a href="rss.xml">here</a> to get updates and new articles on the site. - </p> - <h2>Support LandChad.net</h2> @@ -135,7 +112,8 @@ <ul class=ll> <li>When settings up a website, use our linked affiliate links, like <a href="https://www.vultr.com/?ref=8384069-6G">to Vultr</a>.</li> - <li>Donate cryptocurrencies:</li> + <li>If you enjoy a guest article, the author's donation links may be included at the bottom of the page.</li> + <li>Donate crypto to the long-term LandChad maintenance and expansion fund:</li> </ul> <div class=cryptocontainer> diff --git a/maintenance.html b/maintenance.html index 33a772b..5cdbb1a 100644 --- a/maintenance.html +++ b/maintenance.html @@ -69,29 +69,6 @@ apt upgrade</code></pre> If you no longer want a service to start when the system is rebooted, use <code>disable</code>, or conversely, to make a service start on reboot use <code>enable</code>. </p> - <h2 id=cronjobs>Cronjobs</h2> - <p> - You might want to have your server automatically run commands (like updating something) at a set time without having to tell it. - We can create a "cronjob" to schedule one of these regular commands. - To create a cronjob, simply run: - </p> - - <pre><code>crontab -e</code></pre> - - <aside> - <p> - It might ask you what editor you want to use if you run this for the first time. - Select <code>nano</code> if you don't know how to use vim. - </p> - </aside> - - <p> - In this crontab file, we can add a line for a command. - Here is an example: - </p> - - <p><strong>unfinished</strong></p> - <h2>Finding Files</h2> <p> diff --git a/pix/html2-01.png b/pix/html2-01.png Binary files differnew file mode 100644 index 0000000..b808c0e --- /dev/null +++ b/pix/html2-01.png @@ -1,33 +1,10 @@ /* Since this site is about teaching web concepts, even this file is a learning * opportunity. */ -@-webkit-keyframes next { - 0% {color: yellow ;} - 100% {color: lightblue} -} - -.next a { - color: inherit ; -} - -.next { - color: red ; - -webkit-animation:next 1s infinite alternate ; - font-size: xx-large ; - text-align: center ; - margin: auto ; - display: block ; - font-weight: bold ; - padding: 1em ; -} - -.next:before { - content: "👉" ; -} - body { color: beige ; - background: #222 ; + background: #111 ; + margin-bottom: 200px ; } h1 { @@ -44,9 +21,9 @@ h2 { color: deeppink ; font-variant: small-caps; font-size: 24pt ; - border-bottom: dashed #ddd 1px ; - max-width: 500px ; - margin: 1em auto ; + border-bottom: dashed #ddd 1px ; + max-width: 500px ; + margin: 1em auto ; } h3 { @@ -66,14 +43,14 @@ a:hover { } dt { - font-weight: bold ; + font-weight: bold ; } /* code and pre are for formatting monospace text commands. Use code generally, * but pre is for separate code blocks. pre is also sensitive to whitespace, * unlike most of HTML. */ code { - color: lime ; + color: lime ; border-radius: 5px ; } pre { @@ -149,6 +126,11 @@ aside code { color: green ; } +.cnp { + width: 100% ; + +} + /* This "@media" block defines rules that will only be applied when the minimum * width of the screen is 55em or greater. In essence, they are settings that * only apply on normal weide screens, but *not* phones and low res monitors. @@ -193,3 +175,30 @@ aside code { font-size: small ; overflow-wrap: break-word ; } + +/* The "Next Article" Button changes color and also has a 👉 automatically + * added to its front. */ + +@-webkit-keyframes next { + 0% {color: yellow ;} + 100% {color: lightblue} +} + +.next a { + color: inherit ; +} + +.next { + color: red ; + -webkit-animation:next 1s infinite alternate ; + font-size: xx-large ; + text-align: center ; + margin: auto ; + display: block ; + font-weight: bold ; + padding: 1em ; +} + +.next:before { + content: "👉" ; +} |
