From 8bcc5e70f895857281b466ff82c0a55c4cd322fb Mon Sep 17 00:00:00 2001 From: mjfernez Date: Tue, 23 Jul 2024 00:59:30 -0400 Subject: Add code tags --- tutorials/www/quick-intro-html-css.html | 233 ++++++++++++++++++++------------ 1 file changed, 148 insertions(+), 85 deletions(-) (limited to 'tutorials/www/quick-intro-html-css.html') diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 4248bd9..05302d8 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -21,6 +21,70 @@ vertical-align: middle; } .display.math{display: block; text-align: center; margin: 0.5rem auto;} + /* CSS for syntax highlighting */ + pre > code.sourceCode { white-space: pre; position: relative; } + pre > code.sourceCode > span { line-height: 1.25; } + pre > code.sourceCode > span:empty { height: 1.2em; } + .sourceCode { overflow: visible; } + code.sourceCode > span { color: inherit; text-decoration: inherit; } + div.sourceCode { margin: 1em 0; } + pre.sourceCode { margin: 0; } + @media screen { + div.sourceCode { overflow: auto; } + } + @media print { + pre > code.sourceCode { white-space: pre-wrap; } + pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } + } + pre.numberSource code + { counter-reset: source-line 0; } + pre.numberSource code > span + { position: relative; left: -4em; counter-increment: source-line; } + pre.numberSource code > span > a:first-child::before + { content: counter(source-line); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; + color: #aaaaaa; + } + pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } + div.sourceCode + { } + @media screen { + pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } + } + code span.al { color: #ff0000; font-weight: bold; } /* Alert */ + code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ + code span.at { color: #7d9029; } /* Attribute */ + code span.bn { color: #40a070; } /* BaseN */ + code span.bu { color: #008000; } /* BuiltIn */ + code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ + code span.ch { color: #4070a0; } /* Char */ + code span.cn { color: #880000; } /* Constant */ + code span.co { color: #60a0b0; font-style: italic; } /* Comment */ + code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ + code span.do { color: #ba2121; font-style: italic; } /* Documentation */ + code span.dt { color: #902000; } /* DataType */ + code span.dv { color: #40a070; } /* DecVal */ + code span.er { color: #ff0000; font-weight: bold; } /* Error */ + code span.ex { } /* Extension */ + code span.fl { color: #40a070; } /* Float */ + code span.fu { color: #06287e; } /* Function */ + code span.im { color: #008000; font-weight: bold; } /* Import */ + code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ + code span.kw { color: #007020; font-weight: bold; } /* Keyword */ + code span.op { color: #666666; } /* Operator */ + code span.ot { color: #007020; } /* Other */ + code span.pp { color: #bc7a00; } /* Preprocessor */ + code span.sc { color: #4070a0; } /* SpecialChar */ + code span.ss { color: #bb6688; } /* SpecialString */ + code span.st { color: #4070a0; } /* String */ + code span.va { color: #19177c; } /* Variable */ + code span.vs { color: #4070a0; } /* VerbatimString */ + code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ @@ -104,22 +168,22 @@ it.

Basic Format

All HTML files start with the following (note: the spacing does not matter, it's just spaced for readability):

-
<html>
-    <body>
-    <!-- stuff you see goes here -->
-    </body>
-</html>
+
<html>
+    <body>
+    <!-- stuff you see goes here -->
+    </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:

-
<html>
-    <body>
-        <h1>My Great page</h1>
-        <p>My great paragraph</p>
-    </body>
-</html>
+
<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 @@ -130,33 +194,33 @@ text in 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>
-    <body>
-    <h1>My Great page</h1>
-    <p>My great paragraph</p>
-    <br>
-    <h3>Please check out these links, really cool stuff!</h3>
-    <center>
-        <table>
-            <tr>
-                <td>FSF!</td>
-                <td>
-                <a href="https://www.fsf.org/">
-                <img src="https://static/media.fsf.org/common/img/logo-new.png" />
-                </a></td>
-            </tr>
-            <tr>
-                <td>LOONIX!</td>
-                <td>
-                <a href="https://www.kernel.org/">
-                <img src="https://www.kernel.org/theme/images/logos/tux.png" />
-                </a>
-                </td>
-            </tr>
-        </table>
-    </center>
-    </body>
-</html>
+
<html>
+    <body>
+    <h1>My Great page</h1>
+    <p>My great paragraph</p>
+    <br>
+    <h3>Please check out these links, really cool stuff!</h3>
+    <center>
+        <table>
+            <tr>
+                <td>FSF!</td>
+                <td>
+                <a href="https://www.fsf.org/">
+                <img src="https://static/media.fsf.org/common/img/logo-new.png" />
+                </a></td>
+            </tr>
+            <tr>
+                <td>LOONIX!</td>
+                <td>
+                <a href="https://www.kernel.org/">
+                <img src="https://www.kernel.org/theme/images/logos/tux.png" />
+                </a>
+                </td>
+            </tr>
+        </table>
+    </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 @@ -175,25 +239,24 @@ 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>
+
<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:

-
<a href="/cat.jpg">example</a>
+
<a href="/cat.jpg">example</a>

You can also link an email like this

-
<a href="mailto:email@example.com">example email</a>
-
+
<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:

-
<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>
+
<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 @@ -314,21 +377,21 @@ 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>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-        <meta name="description" content="a really cool page">
-        <meta name="keywords" content="HTML, CSS, JavaScript">
-        <meta name="author" content="John Doe">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" type="text/css" href="/static/media/main.css">
-    </head>
-    <body>
-        <h1>My Great page</h1>
-        <p>My great paragraph</p>
-    </body>
-</html>
+
<html>
+    <head>
+        <title>My Great page</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <meta name="description" content="a really cool page">
+        <meta name="keywords" content="HTML, CSS, JavaScript">
+        <meta name="author" content="John Doe">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" type="text/css" href="/static/media/main.css">
+    </head>
+    <body>
+        <h1>My Great page</h1>
+        <p>My great paragraph</p>
+    </body>
+</html>

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 @@ -361,12 +424,12 @@ 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">
+
<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.

-
<link rel="stylesheet" type="text/css" href="/static/media/main.css">
+
<link rel="stylesheet" type="text/css" href="/static/media/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".

@@ -374,16 +437,16 @@ directory of "/var/www/html".

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>
-<a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2"
-    target="_blank"
-    rel="noopener noreferrer"
-    style="color:yellow;background-color:red;text-align:right"
-    >
-    And this links to sonichu
-</a>
+
<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>
+<a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2"
+    target="_blank"
+    rel="noopener noreferrer"
+    style="color:yellow;background-color:red;text-align:right"
+    >
+    And this links to sonichu
+</a>

this text is red

@@ -402,12 +465,12 @@ using a CSS file.

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 {
+
p {
     margin-top: 1.5%;
     margin-bottom: 1.5%;
 }

 
And to highlight code, like you've been seeing, I use:

-
code {
+
code {
     display: inline-block;
     font-size: 125%;
     background-color: #d8d8d8;
@@ -429,7 +492,7 @@ picker
 
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 {
+
img {
     max-width: 100%;
     height: auto;
     width: auto;
@@ -445,7 +508,7 @@ 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 {
+
img.gray {
     filter: grayscale(100%)
 }

 
Applied:

@@ -457,7 +520,7 @@ the filter property img {
     filter: invert(50%);
 }

 
For one, that will only dim black-and-white images; anything else
@@ -465,11 +528,11 @@ 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:

-
img.icon {
+
img.icon {
     filter: invert(50%);
 }

 
And to implement it in HTML:

-
<img class="icon" src="/static/media/rss.svg" />

+
<img class="icon" src="/static/media/rss.svg" />

 

 
Use the div tag to make
 sections

@@ -479,7 +542,7 @@ 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 {
+
.content {
     text-align: center;
     max-width: 85%;
 }

@@ -487,7 +550,7 @@ section like this:

 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">
+
<div class="content">
 <h1>My cat</h1>
 <p>He's a cool cat</p>
 <img src="/cat.jpg" />
@@ -500,7 +563,7 @@ 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) {
+
@media screen and (max-device-width: 480px) {
     // override your tags here
     body {
         font-size: 125%;
@@ -514,7 +577,7 @@ add a little more style than a typical desktop web browser.

 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 {
+
body {
     font-size: 14px;
 }

 
But this binds the size to 14 pixels which may look great on desktop,
-- 
cgit v1.2.3