how-to-make-this-site

From 5a0d5c2bb7d700343adbef66185675215cc983e5 Mon Sep 17 00:00:00 2001 From: mjfernez Date: Tue, 11 Jul 2023 23:31:16 -0400 Subject: HTML generation --- tutorials/www/how-to-make-this-site.html | 504 +++++++++++++++++++++++++---- tutorials/www/how-to-use-the-internet.html | 249 ++++++++++++++ tutorials/www/quick-intro-html-css.html | 475 +++++++++++++++++++++++---- 3 files changed, 1094 insertions(+), 134 deletions(-) create mode 100644 tutorials/www/how-to-use-the-internet.html (limited to 'tutorials/www') diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index c3290e9..2fcc26f 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -6,12 +6,153 @@ how-to-make-this-site @@ -19,21 +160,29 @@

Background
What is a web server and how do I run one? +
What is a web +server and how do I run one?
- Getting from localhost to the internet
- Getting from +localhost to the internet
How can I make this server available on the Internet cheaply and independently +
How +can I make this server available on the Internet cheaply and +independently
What's a "Domain Name"
Setup HTTPS and TLS, for some sense of security
Setup +HTTPS and TLS, for some sense of security
Perspective
References
- Terms of service for certain ISPs +
- Terms of service for +certain ISPs
  - Verizon
  - Optimum
  -
  You can get your device's local ip by typing "ipconfig" (Windows) or "ip a" (Linux). Typically it is listed first and will start with "192.168" or "10.0" but it depends on the manufacturer. Here's my output at home for example:
  +
  You can get your device's local ip by typing "ipconfig" (Windows) or +"ip a" (Linux). Typically it is listed first and will start with +"192.168" or "10.0" but it depends on the manufacturer. Here's my output +at home for example:
```
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
     link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
     inet 127.0.0.1/8 scope host lo
@@ -115,74 +350,199 @@
        valid_lft forever preferred_lft forever
 3: wlp5s0: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default qlen 1000
     link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea
```
  -
  The device "enp7s0" is my Ethernet adapter (starts with an 'e') and my current local ip address for the device is shown. If you use wifi, it will likely start with a "wl." Set the forwarding rule according to this value.
  -
  Now get your public ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in the directory you launched the server!
  -
  How can I make this server available on the Internet cheaply and independently
  -
  TL;DR Expense scales with independence. It's possible to become your own service provider, get IP addresses from ICANN, your own hardware to host it, to host your cat pics; but it's also a lot of time, work and money to do all that (this guy did it apparently, and so did Null)
  -
  Most likely you'll want to rent someone else's server, usually a VPS.
  -
  Once you understand the basic installation above, you can now populate your site with content just by adding HTML files to your web directory. You can use an HTML editor to write these, or you can download a full content management system to help you. Here are some options I know about:
  -
  - You can just write the damn HTML and use apache or nginx
  -
  Note: you should run the examples to see how they work. You can either write the files yourself and open them in a web browser, or use an online HTML editor like this one
  -
  As you can see from the current state of this site, I'm not exactly exactly the most skilled web designer. But I struggled through the basics enough to get an idiot's sense of front-end web design, so that perspective might be useful if you have no clue where to start with this like I did.
  -
  The building blocks are very simple, but there's a lot of blocks. The HTML5 specification, which most browsers are built around, defines the semantics of elements that can should be rendered by a web browser. CSS similarly defines the attributes--or styles--that can be applied to those elements in a format specified here. I've never gotten deep into the weeds like professional designers do--and to be honest, I don't really want to. But I do like understanding how things work. And getting a unique custom HTML site is something anyone with a text editor and a web browser can get done in a weekend.
  +
  Note: you should run the examples to see how they work. You can +either write the files yourself and open them in a web browser, or use +an online HTML editor like this one
  +
  As you can see from the current state of this site, I'm not exactly +exactly the most skilled web designer. But I struggled through the +basics enough to get an idiot's sense of front-end web design, so that +perspective might be useful if you have no clue where to start with this +like I did.
  +
  The building blocks are very simple, but there's a lot of +blocks. The HTML5 +specification, which most browsers are built around, defines the +semantics of elements that can should be rendered by a web browser. CSS +similarly defines the attributes--or styles--that can be +applied to those elements in a format specified here. I've never gotten deep into +the weeds like professional designers do--and to be honest, I don't +really want to. But I do like understanding how things work. +And getting a unique custom HTML site is something anyone with a text +editor and a web browser can get done in a weekend.
  
  Web browsers render code
  -
  The specifications linked above are followed religiously by major web browsers like Chromium, Firefox, and Safari so that each symbol defined in the standard defines font, graphics, animations, layouts and all kinds of neat stuff you can stick in an HTML document. But what is that exactly?
  +
  The specifications linked above are followed religiously by major web +browsers like Chromium, Firefox, and Safari so that each symbol defined +in the standard defines font, graphics, animations, layouts and all +kinds of neat stuff you can stick in an HTML document. But what is that +exactly?
  
  HTML
  -
  An HTML file is just a text file that follows the format of HTML. HTML stands for "Hyper Text Markup Language" and is very much like standard programming languages in that it maps symbols to things you actually see in your browser. It is not a true programming language since you can't run it or compile it on it's own like a typical computer program. You need another program, a web browser, to make sense of it.
  +
  An HTML file is just a text file that follows the format of HTML. +HTML stands for "Hyper Text Markup Language" and is very much like +standard programming languages in that it maps symbols to things you +actually see in your browser. It is not a true programming language +since you can't run it or compile it on it's own like a typical computer +program. You need another program, a web browser, to make sense of +it.
  
  Basic Format
  -
  All HTML files start with the following (note: the spacing does not matter, it's just spaced for readability):
  +
  All HTML files start with the following (note: the spacing does not +matter, it's just spaced for readability):
```
<html>
     <body>
     
     </body>
 </html>
```
  -
  You'll notice two tags 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:
  +
  You'll notice two tags 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:
```
<html>
     <body>
         <h1>My Great page</h1>
         <p>My great paragraph</p>
     </body>
 </html>
```
  -
  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 define subheadings just by using a different number like "h2" instead of "h1." The second tag "p" defines a paragraph, which by default, renders the text normally. Check out how it looks so far by saving the above text in a file called "page.html" and open it in your browser.
  +
  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 +define subheadings just by using a different number like "h2" instead of +"h1." The second tag "p" defines a paragraph, which by default, renders +the text normally. Check out how it looks so far by saving the above +text in a file called "page.html" and open it in your browser.
  
  Tables and Links
  -
  We can do a lot more than text of course. Let's walk through some more tags in this example:
  +
  We can do a lot more than text of course. Let's walk through some +more tags in this example:
```
<html>
     <body>
     <h1>My Great page</h1>
@@ -101,30 +285,76 @@
     </center>
     </body>
 </html>
```
  -
  We added a few things here, but it's the same pattern right? <open></close>.
  -
  We started by adding a "center" tag, which does what you think: it aligns the content to the center of whatever screen it's being viewed on. This is applied to the table and all the text within the table.
  -
  The next is the "table" tag which, you guessed it, arranges elements in rows and columns like a data table. The "table" tag always comes with two sub tags for the row and column: "tr" and "td." You always write the row first and put each "data" column inside (I'm guessing the "d" in "td" stands for data; I'm actually not sure). By default, "td" works a lot like "p" does--it'll just spit out whatever text you put in.
  -
  To spice things up though, I introduced a new element instead; probably the most important feature of HTML. The "a" tag lets you link to other documents on your site, or to any other URL in the world. On it's own, the "a" tag doesn't do anything special. We need to use the tag with an attribute--an extra word that comes after a--in order to make it work for us. A more basic example might be this:
  +
  We added a few things here, but it's the same pattern right? +<open></close>.
  +
  We started by adding a "center" tag, which does what you think: it +aligns the content to the center of whatever screen it's being viewed +on. This is applied to the table and all the text within the table.
  +
  The next is the "table" tag which, you guessed it, arranges elements +in rows and columns like a data table. The "table" tag always comes with +two sub tags for the row and column: "tr" and "td." You always write the +row first and put each "data" column inside (I'm guessing the "d" in +"td" stands for data; I'm actually not sure). By default, "td" works a +lot like "p" does--it'll just spit out whatever text you put in.
  +
  To spice things up though, I introduced a new element instead; +probably the most important feature of HTML. The "a" tag lets you link +to other documents on your site, or to any other URL in the +world. On it's own, the "a" tag doesn't do anything special. We +need to use the tag with an attribute--an extra word that comes +after a--in order to make it work for us. A more basic example might be +this:
```
<a href="https://example.com">Example</a>
```
  Which you'll see as:
  
  Example
  -
  The "href" attribute doesn't have 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:
  +
  The "href" attribute doesn't have 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:
```
<a href="/cat.jpg">example</a>
```
  You can also link an email like this
```
<a href="mailto:email@example.com">example email</a>
 
```
  -
  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:
  +
  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:
```
<a href="/index.html">home</a>
  - <a href="/about.html">about</a>
  - <a href="/faq.html">faq</a>
  - <a href="/cats.html">cats</a>
  - <a href="/vidya.html">vidya</a>
```
  And Everything Else...
  -
  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 the earlier example with "cat.jpg" we linked to the image, but if we want to render it, we need to use "img" with it's main attribute "src." The "src" attribute works like "href" does as it points to the path where the image is. Note the "img" tag is also a bit different since it doesn't have a closing tag. This is intentional. Other tags were enclosing sections of text and content. This is simply inserting an element right into the document.
  -
  What you can do with the "img" tag, and what you can do with HTML tags in general, is limited only by the browser that's reading the HTML. The Mozilla Firefox "img" tag has a long page on all the different attributes and effects you can apply to images.
  -
  There are many places you can get all the common elements laid out for you, and it's important to bookmark those and refer to them frequently when you're thinking about designing your webpage. A common referral from search engines is https://www.w3schools.com/, which is a great resource. I personally like to look at the HTML elements reference of a common web browser like Firefox's so I know exactly which elements work.
  -
  If you're like me, a referral to a long reference manual can sometimes seem kind of daunting. So if you're feeling that way, here's a quick table of the HTML elements I tend to use a lot and how I use them for formatting text. I won't go into interactive elements like buttons and text input since that will involve another programming language like PHP, Javascript, or Python.
  -
  Shortlist of Text and Formatting Tags
  +
  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 +the earlier example with "cat.jpg" we linked to the image, but +if we want to render it, we need to use "img" with it's main attribute +"src." The "src" attribute works like "href" does as it points to the +path where the image is. Note the "img" tag is also a bit different +since it doesn't have a closing tag. This is intentional. Other tags +were enclosing sections of text and content. This is simply +inserting an element right into the document.
  +
  What you can do with the "img" tag, and what you can do with HTML +tags in general, is limited only by the browser that's reading the HTML. +The Mozilla Firefox "img" tag has a long +page on all the different attributes and effects you can apply to +images.
  +
  There are many places you can get all the common elements laid out +for you, and it's important to bookmark those and refer to them +frequently when you're thinking about designing your webpage. A common +referral from search engines is https://www.w3schools.com/, which +is a great resource. I personally like to look at the HTML elements +reference of a common web browser like Firefox's +so I know exactly which elements work.
  +
  If you're like me, a referral to a long reference manual can +sometimes seem kind of daunting. So if you're feeling that way, here's a +quick table of the HTML elements I tend to use a lot and how I use them +for formatting text. I won't go into interactive elements like +buttons and text input since that will involve another programming +language like PHP, Javascript, or Python.
  +
  Shortlist of Text and +Formatting Tags
  @@ -199,14 +429,22 @@ The items in those lists <iframe>
  
  -Embeds another html file in the current one. Here's your IP from ipaddress.sh:
  +Embeds another html file in the current one. Here's your IP from +ipaddress.sh:
  
  HTML Metadata
  -
  Everything we discussed so far was only about one section of the HTML document: the "body." We haven't touched the "head" at all. If we can put all our content in the body, what do we even need it for?
  -
  Even though (most) of the things in the head aren't rendered by the browser, it still provides useful information to the browser and to 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:
  +
  Everything we discussed so far was only about one section of +the HTML document: the "body." We haven't touched the "head" at all. If +we can put all our content in the body, what do we even need it for?
  +
  Even though (most) of the things in the head aren't rendered by the +browser, it still provides useful information to the browser and to +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:
```
<html>
     <head>
         <title>My Great page</title>
@@ -222,21 +460,51 @@ Embeds another html file in the current one. Here's your IP from ipaddress.sh:
```
  -Note that the "meta" tag works like the "img" tag did and has no closing tag. -The first tag in the head is the "title" tag. This is the title of document as it will appear when the page is opened in a browser tab. It is also the title that will show up in search engines. Otherwise, it has no effect on the content rendered. -Likewise, the proceeding "meta" tags also send info to the browser and to search engines for convenience. Most sites will have tags with the attributes "name" and "content" as set above. The first one we see sets the content type of the document. This is a bit redundant, but making it as well as the character set explicit is useful for older web browsers that need it. -Next up are some tags as a courtesy to search engines. The one named "description" is the short description you're familiar with from search engine results. The "keywords" are a comma separated list of word you want associated with the content of your site--this is again another hint to search engines when they add your site to their database. "Author" serves a similar purpose. -That last meta tag looks a bit funky, but it's purpose is to assist in scaling your website on all devices. For a standard browser on a desktop, it just sets the zoom of the text 100% (be default). On mobile, it will adjust accordingly. -As is the trend, "meta" is just a building block on which you can build a lot of functionality. Be sure to check the references at the end for a full treatment of the topic. +Note that the "meta" tag works like the "img" tag did and has no +closing tag. +The first tag in the head is the "title" tag. This is the title of +document as it will appear when the page is opened in a browser tab. It +is also the title that will show up in search engines. Otherwise, it has +no effect on the content rendered. +Likewise, the proceeding "meta" tags also send info to the browser +and to search engines for convenience. Most sites will have tags with +the attributes "name" and "content" as set above. The first one we see +sets the content type of the document. This is a bit redundant, but +making it as well as the character set explicit is useful for older web +browsers that need it. +Next up are some tags as a courtesy to search engines. The one named +"description" is the short description you're familiar with from search +engine results. The "keywords" are a comma separated list of word you +want associated with the content of your site--this is again another +hint to search engines when they add your site to their database. +"Author" serves a similar purpose. +That last meta tag looks a bit funky, but it's purpose is to assist +in scaling your website on all devices. For a standard browser on a +desktop, it just sets the zoom of the text 100% (be default). On mobile, +it will adjust accordingly. +As is the trend, "meta" is just a building block on which you can +build a lot of functionality. Be sure to check the references at the end +for a full treatment of the topic. CSS -In our last example, I left one tag left untreated, because it segways into yet another format of file closely linked to HTML: Cascading Style Sheets (CSS). -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. +In our last example, I left one tag left untreated, because it +segways into yet another format of file closely linked to HTML: +Cascading Style Sheets (CSS). +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. <link rel="icon" href="/favicon.ico"> -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 all tags in a specific document and create a unifying style for all your pages. +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 all tags in a +specific document and create a unifying style for all your pages. <link rel="stylesheet" type="text/css" href="/static/main.css"> -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". +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". Add style without CSS -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: +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 style="color:red">this text is red</p> <p style="color:red;background-color:blue">this background is blue</p> <p style="color:red;background-color:blue;text-align:center">this text is centered</p> @@ -261,9 +529,14 @@ this text is centered rel="noopener noreferrer" style="color:yellow;background-color:red;text-align:justify;width:100%" > And this links to sonichu -This is useful if you want to play around with one section of the text, but annoying if you want a style to apply to every paragraph. Instead, we tag a list of tags and set all their attributes using a CSS file. +This is useful if you want to play around with one section of the +text, but annoying if you want a style to apply to every paragraph. +Instead, we tag a list of tags and set all their attributes +using a CSS file. Basic Formatting -For any HTML tag, you can set an attribute that applies everytime it appears in an HTML document that links to the CSS file. A common formatting I use for paragraphs is: +For any HTML tag, you can set an attribute that applies everytime it +appears in an HTML document that links to the CSS file. A common +formatting I use for paragraphs is: p { margin-top: 1.5%; margin-bottom: 1.5%; @@ -276,16 +549,23 @@ this text is centered white-space: pre-wrap; word-wrap: break-all; } -I get pretty much all the attribute names just by looking them up here. But in order these lines: +I get pretty much all the attribute names just by looking them up here. But in +order these lines: -Add padding to the text lines to fill any empty space with space characters (this make the background look like a block) +Add padding to the text lines to fill any empty space with space +characters (this make the background look like a block) Increase the font size a bit more than normal -Set the background color gray, chosen from an HTML color picker +Set the background color gray, chosen from an HTML color +picker preserve white space, like the pre tag does break long lines, even in the middle of words Image Formatting -Images get more styles in CSS than I can document in detail, but one important bit you'll want to probably add to all images is the following. +Images get more styles in CSS than I can document in detail, but one +important bit you'll want to probably add to all images is the +following. img { max-width: 100%; height: auto; @@ -297,8 +577,11 @@ this text is centered automatically scales the height of the image on zoom automatically scales the width of the image on zoom
-The reason I like this is that when user's zoom on your image, or view on mobile, the image scales to fit the screen; it never gets cutoff or distorted. -In addition to this basic stuff, you can style your images heavily using the filter option like so: +The reason I like this is that when user's zoom on your image, or +view on mobile, the image scales to fit the screen; it never gets cutoff +or distorted. +In addition to this basic stuff, you can style your images heavily +using the filter option like so: img.gray { filter: grayscale(100%) } @@ -306,60 +589,124 @@ this text is centered -You can read lots more options for image formatting here and about the filter property here +You can read lots more options for image formatting here and about +the filter property here Making Custom Classes -Sometimes, you might want to apply an effect to some elements but not others. An example on this site, I dim the icons a bit so they can appear nice on dark theme browsers just as well. But I don't want to dim all images like in the following example: +Sometimes, you might want to apply an effect to some elements but not +others. An example on this site, I dim the icons a bit so they can +appear nice on dark theme browsers just as well. But I don't want to dim +all images like in the following example: img { filter: invert(50%); } -For one, that will only dim black-and-white images; anything else will just turn to mush like this: +For one, that will only dim black-and-white images; anything else +will just turn to mush like this: -Instead, I'd like it to just apply to select elements; I can do so by extending the tag with a class. On the CSS side: +Instead, I'd like it to just apply to select elements; I can do so by +extending the tag with a class. On the CSS side: img.icon { filter: invert(50%); } And to implement it in HTML: <img class="icon" src="/static/rss.svg" /> -Use the div tag to make sections -You can use the class property on any HTML tag, but you can also make general purpose classes that apply to a group of elements. Let's say you wanted to center a heading, a paragraph, and a picture, and constrain them to only part of the page, so that there's some margins on the left and right. We can put them all in one content section like this: +Use the div tag to make +sections +You can use the class property on any HTML tag, but you can +also make general purpose classes that apply to a group of elements. +Let's say you wanted to center a heading, a paragraph, and a picture, +and constrain them to only part of the page, so that there's some +margins on the left and right. We can put them all in one content +section like this: .content { text-align: center; max-width: 85%; } -Notice, no leading tag. This can be applied to any element, 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: +Notice, no leading tag. This can be applied to any element, +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: <div class="content"> <h1>My cat</h1> <p>He's a cool cat</p> <img src="/cat.jpg" /> </div> Mobile Optimization -In early development, reading this site on my phone was a painful experience. Fortunately, in addition to some tricks above like the "viewport" meta tag, there exist parts of the CSS specification that allow you to directly manipulate your website based on properties of the user's device or web browser. -I won't go into as gory details as here or here, but for your basic smartphone, you can copy and paste this block: +In early development, reading this site on my phone was a painful +experience. Fortunately, in addition to some tricks above like the +"viewport" meta tag, there exist parts of the CSS specification that +allow you to directly manipulate your website based on properties of the +user's device or web browser. +I won't go into as gory details as here or here, +but for your basic smartphone, you can copy and paste this block: @media screen and (max-device-width: 480px) { // override your tags here body { font-size: 125%; } } -This basic example makes the text slightly bigger on smartphone screens, but you can change everything you need to. I typically find I need to adjust the padding or the margins since it seems mobile browsers add a little more style than a typical desktop web browser. -It's also a good idea in general to put percentages as the values for your CSS attributes, so that size is always defined relative to all the other elements. This makes functions like zoom work a lot better. You can for example put a pixel value like this: +This basic example makes the text slightly bigger on smartphone +screens, but you can change everything you need to. I typically find I +need to adjust the padding or the margins since it seems mobile browsers +add a little more style than a typical desktop web browser. +It's also a good idea in general to put percentages as the values for +your CSS attributes, so that size is always defined relative to all the +other elements. This makes functions like zoom work a lot better. You +can for example put a pixel value like this: body { font-size: 14px; } -But this binds the size to 14 pixels which may look great on desktop, but small on a smart phone. +But this binds the size to 14 pixels which may look great on desktop, +but small on a smart phone. How to look things up -This is a frowned upon, poorly taught skill that any person on this side of the century needs. As I said at the outset, the blocks are simple, but there are a lot of blocks. We've gone over a few that make the site you're looking at what it is. But you're going to need to seek out the rest on your own if you want to make your own unique designs. -Your browser is more powerful then I let on earlier. It does just render code, it can edit it too. You might be familiar with the developer console. Most browsers I know can access this just by right clicking anywhere on a page and hitting "Inspect" or "view in Developer Console," or something like that. At the very least, you should have the option to "view page source." You can view the HTML, CSS, and various other things that you're seeing on the webpage written out in code in the developer console. Double click a value and you'll notice you can change it. A really fun way to learn this stuff is messing with other people's websites--don't worry, it's totally okay to change the HTML! It only changes the document being rendered on your end. Once you refresh your changes are gone. Why don't you try it here? +This is a frowned upon, poorly taught skill that any person on this +side of the century needs. As I said at the outset, the blocks are +simple, but there are a lot of blocks. We've gone over a few +that make the site you're looking at what it is. But you're going to +need to seek out the rest on your own if you want to make your own +unique designs. +Your browser is more powerful then I let on earlier. It does just +render code, it can edit it too. You might be familiar with the +developer console. Most browsers I know can access this just by right +clicking anywhere on a page and hitting "Inspect" or "view in Developer +Console," or something like that. At the very least, you should have the +option to "view page source." You can view the HTML, CSS, and various +other things that you're seeing on the webpage written out in code in +the developer console. Double click a value and you'll notice you +can change it. A really fun way to learn this stuff is messing with +other people's websites--don't worry, it's totally okay to change the +HTML! It only changes the document being rendered on your end. +Once you refresh your changes are gone. Why don't you try it here? -The Internet itself is the greatest source of examples to learn this. Fancy websites tend to be inscrutable messes--largely on purpose, so you can't steal their design. But simple sites like this one are easy to break apart and grasp. If you scroll up, you'll notice some of the examples are copied and pasted exactly into this document! Don't be afraid to do a bit of copy and pasting when you see a design you like, just try to give credit where credit is due. -When you're done mindlessly clicking through source code though, and you want to get something done your way, you need to have a search engine handy, and preferably a few reference manuals handy. They're a bit scattered throughout this document, but if you've learned nothing else, these are the must haves: +The Internet itself is the greatest source of examples to learn this. +Fancy websites tend to be inscrutable messes--largely on purpose, so you +can't steal their design. But simple sites like this one are easy to +break apart and grasp. If you scroll up, you'll notice some of the +examples are copied and pasted exactly into this document! Don't be +afraid to do a bit of copy and pasting when you see a design you like, +just try to give credit where credit is due. +When you're done mindlessly clicking through source code though, and +you want to get something done your way, you need to have a +search engine handy, and preferably a few reference manuals handy. +They're a bit scattered throughout this document, but if you've learned +nothing else, these are the must haves: -Mozilla HTML and CSS -w3schools HTML and CSS -The official w3 docs HTML5 and All CSS specs +Mozilla HTML +and CSS +w3schools HTML and CSS +The official w3 docs HTML5 and All CSS specs References HTML -- cgit v1.2.3

Contents

Background

What is a web server and how do I run one?

What is a web server +and how do I run one?

Getting from localhost to the internet

Getting from localhost +to the internet

How can I make this server available on the Internet cheaply and independently

How +can I make this server available on the Internet cheaply and +independently

Can I run a web server at home

Can I run a web server at +home

So what should I do

What's a "Domain Name"

Setup HTTPS and TLS, for some sense of security

Setup HTTPS and +TLS, for some sense of security

Perspective

References

Terms of service for certain ISPs

Terms of service for certain +ISPs

Verizon

Why?

How to use a web browser

How to use a search engine

How to read and find +scholarly articles

How to use Wikipedia

How to find articles +with Google Scholar

Advanced Topics

How to use tor to browse +anonymously

Web browsers render code

HTML

Basic Format

Tables and Links

And Everything Else...

Shortlist of Text and Formatting Tags

Shortlist of Text and +Formatting Tags

HTML Metadata

CSS

Add style without CSS

Basic Formatting

Image Formatting

Making Custom Classes

Use the div tag to make sections

Use the div tag to make +sections

Mobile Optimization

How to look things up

References

HTML