diff options
| author | mjfernez <mjf@mjfer.net> | 2024-07-23 00:59:30 -0400 |
|---|---|---|
| committer | mjfernez <mjf@mjfer.net> | 2024-07-23 00:59:30 -0400 |
| commit | 8bcc5e70f895857281b466ff82c0a55c4cd322fb (patch) | |
| tree | d5c132d81be0e422b83baf74f70ac35f39b05ff2 /.md/tutorials/www | |
| parent | 3cf4ffef103badcc5438d086278727923681cda5 (diff) | |
| download | site-files-8bcc5e70f895857281b466ff82c0a55c4cd322fb.tar.gz | |
Add code tags
Diffstat (limited to '.md/tutorials/www')
| -rw-r--r-- | .md/tutorials/www/how-to-make-this-site.md | 8 | ||||
| -rw-r--r-- | .md/tutorials/www/quick-intro-html-css.md | 44 |
2 files changed, 26 insertions, 26 deletions
diff --git a/.md/tutorials/www/how-to-make-this-site.md b/.md/tutorials/www/how-to-make-this-site.md index 0a2abcc..3a8de92 100644 --- a/.md/tutorials/www/how-to-make-this-site.md +++ b/.md/tutorials/www/how-to-make-this-site.md @@ -95,7 +95,7 @@ There are many web servers out there, but I like nginx since the configuration file is a bit easier to read than others. So let's install it. -``` +```bash $ sudo apt install nginx ``` @@ -135,7 +135,7 @@ can access your C drive at "/mnt/c". So let's say you had a folder of cat pics in "C:\\Users\\username\\Desktop\\cats"; you can copy this into your website by running: -``` +```bash $ cp -vr /mnt/c/Users/username/Desktop/cats /var/www/html ``` @@ -172,7 +172,7 @@ 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: -``` +```bash 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 @@ -352,7 +352,7 @@ able access your server by name. ## Setup HTTPS and TLS, for some sense of security -A decade of half-though through security advice has convinced everyone +A decade of half-thought through security advice has convinced everyone that HTTPS and *only* HTTPS is secure. This is simply not true. Using HTTP alone doesn't inherently make you insecure and using HTTPS doesn't automatically guarantee the app your communicating with is diff --git a/.md/tutorials/www/quick-intro-html-css.md b/.md/tutorials/www/quick-intro-html-css.md index d94c254..9c6733f 100644 --- a/.md/tutorials/www/quick-intro-html-css.md +++ b/.md/tutorials/www/quick-intro-html-css.md @@ -42,7 +42,7 @@ need another program, a web browser, to make sense of it. All HTML files start with the following (note: the spacing does not matter, it's just spaced for readability): -``` +```html <html> <body> <!-- stuff you see goes here --> @@ -56,7 +56,7 @@ 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 <html> <body> <h1>My Great page</h1> @@ -78,7 +78,7 @@ a file called "page.html" and open it in your browser. We can do a lot more than text of course. Let's walk through some more tags in this example: -``` +```html <html> <body> <h1>My Great page</h1> @@ -130,7 +130,7 @@ 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: -``` +```html <a href="https://example.com">Example</a> ``` @@ -143,13 +143,13 @@ 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: -``` +```html <a href="/cat.jpg">example</a> ``` You can also link an email like this -``` +```html <a href="mailto:email@example.com">example email</a> ``` @@ -158,7 +158,7 @@ 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: -``` +```html <a href="/index.html">home</a> - <a href="/about.html">about</a> - <a href="/faq.html">faq</a> @@ -263,7 +263,7 @@ 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 <html> <head> <title>My Great page</title> @@ -322,7 +322,7 @@ 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. -``` +```html <link rel="icon" href="/favicon.ico"> ``` @@ -331,7 +331,7 @@ 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. -``` +```html <link rel="stylesheet" type="text/css" href="/static/media/main.css"> ``` @@ -345,7 +345,7 @@ 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: -``` +```html <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> @@ -379,7 +379,7 @@ 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: -``` +```htmlcss p { margin-top: 1.5%; margin-bottom: 1.5%; @@ -388,7 +388,7 @@ p { And to highlight code, like you've been seeing, I use: -``` +```htmlcss code { display: inline-block; font-size: 125%; @@ -416,7 +416,7 @@ 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. -``` +```htmlcss img { max-width: 100%; height: auto; @@ -437,7 +437,7 @@ distorted. In addition to this basic stuff, you can style your images heavily using the filter option like so: -``` +```htmlcss img.gray { filter: grayscale(100%) } @@ -461,7 +461,7 @@ 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: -``` +```htmlcss img { filter: invert(50%); } @@ -477,7 +477,7 @@ src="/static/media/jazzcat.jpg" 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: -``` +```htmlcss img.icon { filter: invert(50%); } @@ -485,7 +485,7 @@ img.icon { And to implement it in HTML: -``` +```htmlcss <img class="icon" src="/static/media/rss.svg" /> ``` @@ -499,7 +499,7 @@ 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: -``` +```htmlcss .content { text-align: center; max-width: 85%; @@ -511,7 +511,7 @@ 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: -``` +```htmlcss <div class="content"> <h1>My cat</h1> <p>He's a cool cat</p> @@ -532,7 +532,7 @@ I won't go into as gory details as [here](https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b), but for your basic smartphone, you can copy and paste this block: -``` +```htmlcss @media screen and (max-device-width: 480px) { // override your tags here body { @@ -551,7 +551,7 @@ 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: -``` +```htmlcss body { font-size: 14px; } |