diff options
| author | mjfernez <mjf@mjfer.net> | 2023-11-22 13:55:19 -0500 |
|---|---|---|
| committer | mjfernez <mjf@mjfer.net> | 2023-11-22 13:55:19 -0500 |
| commit | 1c5025d54c3a8244fcbe818f96dea49e51054ba6 (patch) | |
| tree | 22615506663bd546e430feea1c2ca3c4a58513b4 /tutorials/www/quick-intro-html-css.html | |
| parent | f602bb95e0b1160274bed0f125b8cfdedff3af96 (diff) | |
| download | site-files-1c5025d54c3a8244fcbe818f96dea49e51054ba6.tar.gz | |
Update to new media directory syntax
Diffstat (limited to 'tutorials/www/quick-intro-html-css.html')
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 14 |
1 files changed, 7 insertions, 7 deletions
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:</p> <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:</p> <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.</p> style sheet. Like HTML, CSS is just a text file written in a specific syntax. CSS allows you to set attributes to <em>all</em> tags in a specific document and create a unifying style for all your pages.</p> -<pre><code><link rel="stylesheet" type="text/css" href="/static/main.css"></code></pre> +<pre><code><link rel="stylesheet" type="text/css" href="/static/media/main.css"></code></pre> <p>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".</p> @@ -574,7 +574,7 @@ using the filter option like so:</p> filter: grayscale(100%) }</code></pre> <p>Applied:</p> -<p><img src="/static/jazzcat.jpg" style="filter:grayscale(100%)"/></p> +<p><img src="/static/media/jazzcat.jpg" style="filter:grayscale(100%)"/></p> <p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p> <h3 id="making-custom-classes">Making Custom Classes</h3> @@ -587,15 +587,15 @@ appear nice on dark theme browsers just as well. But I don't want to dim }</code></pre> <p>For one, that will only dim black-and-white images; anything else will just turn to mush like this:</p> -<p><img class="icon" src="/static/jazzcat.jpg"/></p> +<p><img class="icon" src="/static/media/jazzcat.jpg"/></p> <p>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:</p> <pre><code>img.icon { filter: invert(50%); }</code></pre> <p>And to implement it in HTML:</p> -<pre><code><img class="icon" src="/static/rss.svg" /></code></pre> -<p><img class="icon" src="/static/rss.svg"/></p> +<pre><code><img class="icon" src="/static/media/rss.svg" /></code></pre> +<p><img class="icon" src="/static/media/rss.svg"/></p> <h4 id="use-the-div-tag-to-make-sections">Use the div tag to make sections</h4> <p>You can use the class property on <em>any</em> HTML tag, but you can |