hotlink images

site/introwebdev/hotlinks.html

@@ -0,0 +1,34 @@
+[!]
+[=title "Hotlinkable Images"]
+[=content-]
+<p>
+Hotlinks are when you use an image <i>hosted on</i> someone else's website. This implies actually pasting a URL in the form "https://website.com/path/to/image.png" into your
+<code>&lt;img&gt;</code>'s <code>src</code>. You should <b>never hotlink without permission</b>! If the website owner changes their layout, you'll lose your images,
+and every time someone loads <i>your</i> page it'll create traffic on <i>their</i> page which can overload their servers. You have explicit permission to hotlink these images on my server:
+</p>
+<ul>
+<li><code>&lt;img src="https://www.clarkeis.com/introwebdev/cat.png" /&gt;</code>: <img src="cat.png" width="64px" /></li>
+<li><code>&lt;img src="https://www.clarkeis.com/introwebdev/robot.png" /&gt;</code>: <img src="robot.png" width="64px" /></li>
+</ul>
+<p>
+Note: all of the above images are quite large so you should probably use the <code>width</code> property to make them smaller, e.g.
+</p>
+<pre><code>&lt;img src="https://www.clarkeis.com/introwebdev/robot.png" width="200px" /&gt;
+</code></pre>
+<p>
+I set their widths to 64px each for display.
+</p>
+<p>
+Note that it is <i>not</i> hotlinking if you download the image and host it on your own website - this is the way we've used all of our images so far, and is generally correct.
+You should still generally make sure you have permission to download and use it (e.g. some images are copyright-protected and nonpermissively licensed).
+</p>
+<p>
+For a large repository of images that you can download
+at will (but still not hotlink, because that's rude!), use <a href="https://www.pics4learning.com/">Pics 4 Learning</a> - those images are explicitly permitted
+for use in an educational context, so while you shouldn't use them elsewhere, they're ideal for this course.
+</p>
+<p>
+Classroom wifi is unreliable so I recommend downloading a collection of images you like - we'll be using images pretty heavily throughout the entire course.
+</p>
+[/]
+[#template.html]

site/introwebdev/index.html

@@ -19,6 +19,9 @@ and <a href="https://www.khanacademy.org/">Khan Academy</a>, because they have s
 <p>
 A rolling list of tags we've covered can be found <a href="rolling-tags-list.html">here</a>.
 </p>
+<p>
+Hotlink images available <a href="hotlinks.html">HERE</a>.
+</p>
 <h2>Grading</h2>
 <p>
 This is a graded course! The weights are as follows: