Today, I’m talking about inserting images into Homeschool Skedtrack with HTML. We all know that images add richness to things we are learning. Sometimes they are crucial to the idea being learned. Some of us are visual learners and seeing pictures and graphics help us learn a concept more quickly and more fully. Examples of images that you might wish to insert into Homeschool Skedtrack are charts, graphs, maps, and photos. Maybe those photos are of important people, geographical places, historical artifacts, or master artwork like the head detail of Michelangelo’s sculpture, David, shown on the computer screen at the bottom of this page.
Just like with any document, images need to first be uploaded to the web before you can insert them into an HTML link. They could be uploaded to file share services like documents, or to dedicated image hosts or cloud photo storage, like Flickr and Photobucket. The images should be in a browser compatible format. JPEG, GIF, and PNG are the most common. Images also shouldn’t be too large or it will take forever to load. You will have a URL or web address for your image, just as with documents. If you want to copy the URL of an image that has already been uploaded to the web, just right click on the image, and click on properties. A properties window will open that includes the URL. Now, just select it, copy, and paste!
Four ways of inserting images
1. The first, most basic option, is to write a basic text link inside the Daily Activities description box that opens the image in another window.
Basic link code: <a href=” URL =”_blank”> LINK TEXT <a/>
Link code for our photo: <a href=”https:// farm4.staticflickr.com/3942/15333639028_22def0c7d7_z .jpg”target=”_blank”>Michelangelo’s David<a/>
What you see: Michelangelo’s David
2. The second option is placing the image inside the Daily Activities description box. <img src=” URL “> The image will appear in the schedule. This is not a link and is not clickable. Now, if you place this code into the Activities description box, the picture will be huge, which won’t work very well inside the schedule. In order to make the image a reasonable size, it needs some size definition. We’re concerned with how high the image is. If we only define the pixel height, the width dimension will scale to fit it within that size viewing window. (Images usually need Alt tags, which are for web accessibility and help search engines find images. They’re not really necessary for our purposes inside Homeschool Skedtrack.)
Basic image code: <img src=” IMAGE URL ” height=” DIMENSION ” alt=” ALT TAG “>
Image code for our photo: <img src=”https:// farm4.staticflickr.com/3942/15333639028_22def0c7d7_z.jpg” height=”200″ alt=”michelangelo_david_head”>
What you see:
3. The third option is creating an image link inside the Daily Activities description box. The image will appear in the schedule and will also open in another window if you click on it. You might choose this option if you want the image to appear, and also make it clickable to go to a web page that contains more information.
Basic image code: <a href=” LINK DESTINATION URL ><img src=” IMAGE URL ” height=” DIMENSION ” alt=” ALT TAG “></a>
Image code for our photo: <a href=”https:// www. flickr.com/photos/10457165@N02/15333639028″ title=”michelangelo_david_head by Julia, on Flickr”><img src=”https:// farm4.staticflickr.com/3942/15333639028_22def0c7d7_z.jpg” height=”200″ alt=”michelangelo_david_head”></a>
The last option I will talk about is copying the code given by the image host. If you click a “share” or “get code” button you’ll likely be given several choices of code to be generated. Options probably include basic URL, HTML code, EMBED code, and may allow input for size and alt tags. You can simply copy and paste.
It’s always a good idea to write a little code, save, and view the results before putting too much time in. Keep doing this frequently as you go along, because you can’t actually see the result as you write.