From 1c5025d54c3a8244fcbe818f96dea49e51054ba6 Mon Sep 17 00:00:00 2001 From: mjfernez Date: Wed, 22 Nov 2023 13:55:19 -0500 Subject: Update to new media directory syntax --- tutorials/www/quick-intro-html-css.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 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 9788cf4..4cdb434 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -267,7 +267,7 @@ more tags in this example:

<td>FSF!</td> <td> <a href="https://www.fsf.org/"> - <img src="https://static.fsf.org/common/img/logo-new.png" /> + <img src="https://static/media.fsf.org/common/img/logo-new.png" /> </a></td> </tr> <tr> @@ -447,7 +447,7 @@ example:

<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/main.css"> + <link rel="stylesheet" type="text/css" href="/static/media/main.css"> </head> <body> <h1>My Great page</h1> @@ -491,7 +491,7 @@ the icon you see in the tab of an open page.

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">
+
<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".

@@ -574,7 +574,7 @@ using the filter option like so:

filter: grayscale(100%) }

Applied:

-

+

You can read lots more options for image formatting here and about the filter property here

Making Custom Classes

@@ -587,15 +587,15 @@ appear nice on dark theme browsers just as well. But I don't want to dim }

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:

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

And to implement it in HTML:

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

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

Use the div tag to make sections

You can use the class property on any HTML tag, but you can -- cgit v1.2.3