From 342d70ecdee87c6cdca4bf7ca15d143ff400019f Mon Sep 17 00:00:00 2001 From: Luke Smith Date: Tue, 29 Jun 2021 09:50:40 -0400 Subject: cleanup for publication --- certbot.html | 1 - html.html | 81 +++++++++++++++++++++--------------------------------- html2.html | 10 +++---- index.html | 82 ++++++++++++++++++++----------------------------------- maintenance.html | 23 ---------------- pix/html2-01.png | Bin 0 -> 12697 bytes style.css | 69 ++++++++++++++++++++++++++-------------------- 7 files changed, 104 insertions(+), 162 deletions(-) create mode 100644 pix/html2-01.png 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

Save the file and exit to activate this cronjob. - For more information about cronjobs, see the article on them.

Next: Use HTML to Make Simple Webpages diff --git a/html.html b/html.html index 7ed32df..e12d8ac 100644 --- a/html.html +++ b/html.html @@ -49,7 +49,7 @@ Note how this HTML file appears as a webpage: - +
<!DOCTYPE html>
@@ -70,7 +70,7 @@ multiple lines.
 Observe if we add lines to the end of this file:
 

 
-
+

     

         
 
<!DOCTYPE html>
@@ -116,7 +116,7 @@ Heading tags are for your page's title and section headings in the document:
 
 
 
-
+

     

         
 
<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 &
 to be the size and color and alignment we want.
 

 
-<<++>>
-<<++>>
-<<++>>
-        
A look at a decent template

+
Text formatting

 
-        

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

-
<!DOCTYPE html>
-<html lang=en>
-    <head>
-        <title>Your page title</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='Site Title RSS' href='/rss.xml'>
-    </head>
-<body>
-    <header><h1>Your page title</h1></header>
-
-    <nav></nav>
-
-    <main>
+

+HTML can also be used to do text formatting.
+We can make bold, italic, underlined or struck through text with more HTML tags:
+

 
-    Put all your page content here in the <main> tag.
+
+    
+        
+        
+    
+

+
<p>This is <b>bold text</b>.</p>
 
-    </main>
+<p>This is <i>italic text</i>.</p>
 
-    <footer></footer>
-</body>
-</html>

+<p>This is <u>underlined</u>.</p>
 
-    
The
-    

+<p>This is <s>struck through</s>.</p>
+        		
+        formatted text
+        

 
-        
HTML can be broken...

+        
Semantic Tags

 
         

-        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 <b></b> and <i></i>
+        do exist, it's actually better not to use them directly in text.
         

 
         

-        For example, paragraphs are formatted by the <p> tag and when the paragraph ends,
-        </p> should be included.
-        However, if you forget or neglect to include a </p> to close the tag, this isn't a big deal, as if your browser sees another <p> 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 <strong></strong> instead of <b></b> and <em></em> instead of <i></i>.
+        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.
         

 
-        
...but not always.

-
         

-        That works fine with <p>, but for other tags like <b>, it won't work.
-        Your browser can't guess where you want the bolding to end, so if you fail to close a <b> with </b>,
-        the whole rest of your document will show up bold!
+        Note that some bold words on this site have different color for emphasis.
+        This is a setting set via CSS for all <strong> tags.
+        It would not be a good idea for us to use this for <b>, since there might be a non-colored situation we want to occasionally use it in.
         

 
-
-    Next: Text formatting in HTML
+    Next: Images and Links in HTML
 
     
 	
LandChad.net
Because Everyone should be an Internet LandChad.
  • chad
  • RSS
  • BTC
  • XMR
  • Github
    • 
diff --git a/html2.html b/html2.html
index 17c6acf..3360f1f 100644
--- a/html2.html
+++ b/html2.html
@@ -1,7 +1,7 @@
 
 
     
-        Text formatting in HTML – LandChad.net
+        Images and Links in HTML – LandChad.net
         
         
         
@@ -9,15 +9,13 @@
     
     
 
-    
    Text formatting in HTML
    
+    
    Images and Links in HTML
    
     
     
    
+        
    Links
    
         
    
-        Now we know some basic concepts of HTML, including <<++>>p<<++>> and <<++>>h1<<++>>, so now we'll learn all the core formatting abilities of HTML in one brief sitting.
+        We need to create links
         
    
-
-        
    Semantic Tags
    
-
 <<++>>
 <<++>>
 <<++>>
diff --git a/index.html b/index.html
index 263d48e..269cf01 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,11 @@
             
  • Basic Attention Token (BAT)
    • 
         
 
-        
+        
    Excellent Extras
    
+        
 
         
    In the Works...
    
 
@@ -63,67 +67,40 @@
         Subscribe to our RSS feed for updates.
         
    
 
-        
    Editing and Styling Webpages
    
-
-        
    
-        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.
-        
    
-
-        
      
-            
    1. HTML Bare Basics
      2. 
-            
    2. Text formatting in HTML
      3. 
-            
    3. Links and Images in HTML
      4. 
-            
    4. Doing HTML right.
      5. 
-            
    5. Use CSS to style webpages consistently.
      6. 
-        
    
+        
    Articles and Tutorials in Progress...
    
 
-        
    Email server
    
-
-        
    
-        The only truly private and way to use email is the host your own!
-        This is
-        
    
-
-        
      
-            
    • An email server the easy way.
      • 
-            
    • Or, email the longer way.
      • 
-            
    • Filtering spam efficiently
      • 
+        
        
+            
      • Full HTML tutorial
        • 
+            
      • Full CSS tutorial
        • 
+            
      • Setting up an Email server
        • 
+            
      • Using rsync for websites and servers.
        • 
+            
      • XMPP (federated chat)
        • 
+            
      • Matrix (federated chat)
        • 
+            
      • SearX (search engine)
        • 
         
      
 
-        
      Excellent Extras
      
+        
      On the look out for...
      
 
         
      
-        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 the Github.
+        Please include directions for Debian 10 as default.
+        Abstain from using containization.
+        Attempt to follow the same settings as other articles here.
         
      
 
-        
-
-        
      Make your own social media
      
-
-        
        
-            
      • Federation
        • 
-        
      
-
-        
        
-            
      • XMPP
        • 
-            
      • Matrix
        • 
+        
          
+            
        • Cronjobs
          • 
+            
        • IRC servers
          • 
+            
        • Email webclients
          • 
+            
        • NextCloud (file hosting)
          • 
+            
        • Calibre (library server)
          • 
+            
        • Nitter
          • 
             
        • Pleroma (like Twitter)
          • 
             
        • PeerTube (like YouTube)
          • 
+            
        • Using ufw as a firewall.
          • 
         
        
 
-        
        rss Subscribe for Updates
        
-
-        
        
-        Subscribe to our rss logoRSS feed here to get updates and new articles on the site.
-        
        
-
 
         
        Support LandChad.net
        
 
@@ -135,7 +112,8 @@
 
         
          
             
        • When settings up a website, use our linked affiliate links, like to Vultr.
          • 
-            
        • Donate cryptocurrencies:
          • 
+            
        • If you enjoy a guest article, the author's donation links may be included at the bottom of the page.
          • 
+            
        • Donate crypto to the long-term LandChad maintenance and expansion fund:
          • 
         
        
 
 
        
diff --git a/maintenance.html b/maintenance.html
index 33a772b..5cdbb1a 100644
--- a/maintenance.html
+++ b/maintenance.html
@@ -69,29 +69,6 @@ apt upgrade
    
         If you no longer want a service to start when the system is rebooted, use disable, or conversely, to make a service start on reboot use enable.
         
    
 
-        
    Cronjobs
    
-        
    
-        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:
-        
    
-
-        
    crontab -e
    
-
-        
-
-        
    
-        In this crontab file, we can add a line for a command.
-        Here is an example:
-        
    
-
-        
    unfinished
    
-
         
    Finding Files
    
 
         
    
diff --git a/pix/html2-01.png b/pix/html2-01.png
new file mode 100644
index 0000000..b808c0e
Binary files /dev/null and b/pix/html2-01.png differ
diff --git a/style.css b/style.css
index 27706a0..4414804 100644
--- a/style.css
+++ b/style.css
@@ -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: "👉" ;
+}
-- 
cgit v1.2.3