cleanup for publication
This commit is contained in:
Luke Smith
parent
825282fea9
commit
342d70ecde
|
|
@ -123,7 +123,6 @@ ufw allow 443</code></pre>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Save the file and exit to activate this cronjob.
|
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>
|
</p>
|
||||||
|
|
||||||
<span class=next><a href="html.html">Next: Use HTML to Make Simple Webpages</a></span>
|
<span class=next><a href="html.html">Next: Use HTML to Make Simple Webpages</a></span>
|
||||||
|
|
|
||||||
77
html.html
77
html.html
|
|
@ -49,7 +49,7 @@ Note how this HTML file appears as a webpage:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table>
|
<table class=cnp>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<pre><code><!DOCTYPE html>
|
<pre><code><!DOCTYPE html>
|
||||||
|
|
@ -70,7 +70,7 @@ multiple lines.
|
||||||
Observe if we add lines to the end of this file:
|
Observe if we add lines to the end of this file:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<table>
|
<table class=cnp>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<pre><code><!DOCTYPE html>
|
<pre><code><!DOCTYPE html>
|
||||||
|
|
@ -116,7 +116,7 @@ Heading tags are for your page's title and section headings in the document:
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<table>
|
<table class=cnp>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<pre><code><h1>This is a top-level heading.</h1>
|
<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.
|
to be the size and color and alignment we want.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<<++>>
|
<h2>Text formatting</h2>
|
||||||
<<++>>
|
|
||||||
<<++>>
|
|
||||||
<h2>A look at a decent template</h2>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
It's a good habit to include the same core things in every HTML page.
|
HTML can also be used to do text formatting.
|
||||||
I have a template file that I use for this website that includes all the basics.
|
We can make bold, italic, underlined or struck through text with more HTML tags:
|
||||||
When I make a new page, I just copy the template and add the content.
|
|
||||||
Here is what the template looks like:
|
|
||||||
</p>
|
</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>
|
<table class=cnp>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<pre><code><p>This is <b>bold text</b>.</p>
|
||||||
|
|
||||||
<main>
|
<p>This is <i>italic text</i>.</p>
|
||||||
|
|
||||||
<strong>Put all your page content here in the <main> tag.</strong>
|
<p>This is <u>underlined</u>.</p>
|
||||||
|
|
||||||
</main>
|
<p>This is <s>struck through</s>.</p></code></pre>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img src="pix/html2-01.png" alt="formatted text">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
<footer></footer>
|
<h2>Semantic Tags</h2>
|
||||||
</body>
|
|
||||||
</html></code></pre>
|
|
||||||
|
|
||||||
<h3>The
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<h3>HTML can be broken...</h3>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
HTML is interpreted by browsers very liberally.
|
While <code><b></b></code> and <code><i></i></code>
|
||||||
If you make mistakes in HTML, browsers will do their best to be forgiving and try to figure out what you meant.
|
do exist, it's actually better <em>not</em> to use them directly in text.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
For example, paragraphs are formatted by the <code><p></code> tag and when the paragraph ends,
|
Try using <code><strong></strong></code> instead of <code><b></b></code> and <code><em></em></code> instead of <code><i></i></code>.
|
||||||
<code></p></code> should be included.
|
By default, they will look exactly the same.
|
||||||
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.
|
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.
|
||||||
In fact, there are some people nowadays that only ever use the opening tag and never close them!
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>...but not always.</h3>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
That works fine with <code><p></code>, but for other tags like <code><b></code>, it won't work.
|
Note that some bold words on this site have <strong>different color for emphasis</strong>.
|
||||||
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>,
|
This is a setting set via CSS for all <code><strong></code> tags.
|
||||||
the whole rest of your document will show up bold!
|
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>
|
</p>
|
||||||
|
|
||||||
|
<span class=next><a href="html2.html">Next: Images and Links in HTML</a></span>
|
||||||
<span class=next><a href="html2.html">Next: Text formatting in HTML</a></span>
|
|
||||||
|
|
||||||
</main>
|
</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>
|
<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>
|
||||||
|
|
|
||||||
10
html2.html
10
html2.html
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
<head>
|
||||||
<title>Text formatting in HTML – LandChad.net</title>
|
<title>Images and Links in HTML – LandChad.net</title>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
<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'>
|
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header><h1>Text formatting in HTML</h1></header>
|
<header><h1>Images and Links in HTML</h1></header>
|
||||||
<nav></nav>
|
<nav></nav>
|
||||||
<main>
|
<main>
|
||||||
|
<h2>Links</h2>
|
||||||
<p>
|
<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>
|
</p>
|
||||||
|
|
||||||
<h2>Semantic Tags</h2>
|
|
||||||
|
|
||||||
<<++>>
|
<<++>>
|
||||||
<<++>>
|
<<++>>
|
||||||
<<++>>
|
<<++>>
|
||||||
|
|
|
||||||
82
index.html
82
index.html
|
|
@ -54,7 +54,11 @@
|
||||||
<li><a href="bat.html"><img src="pix/bat.svg">Basic Attention Token (BAT)</a></li>
|
<li><a href="bat.html"><img src="pix/bat.svg">Basic Attention Token (BAT)</a></li>
|
||||||
</ul>
|
</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>
|
<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.
|
Subscribe to our <a href="rss.xml"><img src="pix/rss.svg">RSS feed</a> for updates.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>Editing and Styling Webpages</h3>
|
<h3>Articles and Tutorials in Progress...</h3>
|
||||||
|
|
||||||
<p>
|
<ul>
|
||||||
Now that we have a basic webpage up hosted on our own server, we can
|
<li>Full HTML tutorial</li>
|
||||||
look more directly about how to design and style your website to
|
<li>Full CSS tutorial</li>
|
||||||
contain the material you want in the way that you want.
|
<li>Setting up an Email server</li>
|
||||||
</p>
|
<li>Using rsync for websites and servers.</li>
|
||||||
|
<li>XMPP (federated chat)</li>
|
||||||
<ol class=ll>
|
<li>Matrix (federated chat)</li>
|
||||||
<li><a href="html.html">HTML Bare Basics</a></li>
|
<li>SearX (search engine)</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>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>
|
</ul>
|
||||||
|
|
||||||
<h3>Excellent Extras</h3>
|
<h3>On the look out for...</h3>
|
||||||
|
|
||||||
<p>
|
<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>
|
</p>
|
||||||
|
|
||||||
<ul class=ll>
|
<ul>
|
||||||
<li><a href="maintenance.html">How to maintain a server.</a></li>
|
<li>Cronjobs</li>
|
||||||
<li><a href="sshkeys.html">Use your SSH keys to prevent hacking.</a></li>
|
<li>IRC servers</li>
|
||||||
<li><a href="rsync.html">Rsync is glorious.</a></li>
|
<li>Email webclients</li>
|
||||||
<li><a href="firewall.html">ufw as a Firewall</a></li>
|
<li>NextCloud (file hosting)</li>
|
||||||
</ul>
|
<li>Calibre (library server)</li>
|
||||||
|
<li>Nitter</li>
|
||||||
<h3>Make your own social media</h3>
|
|
||||||
|
|
||||||
<ul class=ll>
|
|
||||||
<li>Federation</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul class=ll>
|
|
||||||
<li>XMPP</li>
|
|
||||||
<li>Matrix</li>
|
|
||||||
<li>Pleroma (like Twitter)</li>
|
<li>Pleroma (like Twitter)</li>
|
||||||
<li>PeerTube (like YouTube)</li>
|
<li>PeerTube (like YouTube)</li>
|
||||||
|
<li>Using ufw as a firewall.</li>
|
||||||
</ul>
|
</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>
|
<h2>Support LandChad.net</h2>
|
||||||
|
|
||||||
|
|
@ -135,7 +112,8 @@
|
||||||
|
|
||||||
<ul class=ll>
|
<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>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>
|
</ul>
|
||||||
|
|
||||||
<div class=cryptocontainer>
|
<div class=cryptocontainer>
|
||||||
|
|
|
||||||
|
|
@ -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>.
|
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>
|
</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>
|
<h2>Finding Files</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
59
style.css
59
style.css
|
|
@ -1,33 +1,10 @@
|
||||||
/* Since this site is about teaching web concepts, even this file is a learning
|
/* Since this site is about teaching web concepts, even this file is a learning
|
||||||
* opportunity. */
|
* 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 {
|
body {
|
||||||
color: beige ;
|
color: beige ;
|
||||||
background: #222 ;
|
background: #111 ;
|
||||||
|
margin-bottom: 200px ;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -149,6 +126,11 @@ aside code {
|
||||||
color: green ;
|
color: green ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cnp {
|
||||||
|
width: 100% ;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/* This "@media" block defines rules that will only be applied when the minimum
|
/* 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
|
* 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.
|
* only apply on normal weide screens, but *not* phones and low res monitors.
|
||||||
|
|
@ -193,3 +175,30 @@ aside code {
|
||||||
font-size: small ;
|
font-size: small ;
|
||||||
overflow-wrap: break-word ;
|
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: "👉" ;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue