From 8bcc5e70f895857281b466ff82c0a55c4cd322fb Mon Sep 17 00:00:00 2001 From: mjfernez Date: Tue, 23 Jul 2024 00:59:30 -0400 Subject: Add code tags --- .md/tutorials/www/quick-intro-html-css.md | 44 +++++++++++++++---------------- 1 file changed, 22 insertions(+), 22 deletions(-) (limited to '.md/tutorials/www/quick-intro-html-css.md') 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 @@ -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

My Great page

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

My Great page

@@ -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 Example ``` @@ -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 example ``` You can also link an email like this -``` +```html example email ``` @@ -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 home - about - faq @@ -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 My Great page @@ -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 ``` @@ -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 ``` @@ -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

this text is red

this background is blue

this text is centered

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

``` @@ -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

My cat

He's a cool cat

@@ -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; } -- cgit v1.2.3