Did you know you can easily create an image that is an active link to another page or resource? In this video, author Chris Mattia shows you the proper way to wrap your images with additional HTML.
- Let's combine what we've learned…about both images and links.…I'm in syllabus.html and I've created…a page called lowtide.html that contains a full-size image…and a description that I'd like to send my learners to.…Those images are located in the images folder.…Let's begin by inserting a cropped version of the image…just above the heading one tag.…Create the image tag, and set the source equal to…quote the relative path to the image.…
In this case, I'll use images/lowtide_crop.png.…Then, to make the image fill the entire width…of the top of the page, set the width equal to 100%.…And then add an alt attribute equal to quote…Link to full size image and description…of low tide on Koro Island, Fiji.…Since we're going to create a link to this image,…your alt text should describe…the page that the link will take the learner to.…
Now, to create a link, you need to wrap the anchor tag…around the image tag, thus making the image tag…our label for this link.…So, in front of the image tag,…create an opening anchor tag…and set the href attribute equal to…
- Coding a site, a page, or parts
- Managing digital assets
- Formatting headings and paragraphs
- Creating links to pages
- Linking to a PDF or a Google Doc
- Inserting your own images into an LMS
- Embedding YouTube, Vimeo, and SoundCloud media
- Making pages responsive for mobile devices
- Working with CSS using web developer tools
- Overriding existing CSS
- Setting up your own domain
- Using FTP
Skill Level Intermediate
WordPress for Education: Multisitewith Chris Mattia1h 55m Intermediate
Measuring Learning Effectivenesswith Jeff Toister47m 4s Beginner
1. Web Basics
2. Semantically Formatting Text
3. Leveraging Links
4. Integrating Images
5. Embedding Resources
6. Adding Style with CSS
7. Setting Up Web Infrastructure
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.