Learn how to use the
- [Instructor] Sometimes you want…to annotate images or reference them by number.…Such as figure one, figure two and so on.…Take for example,…this part of a webpage…that's a fictional account of how to buy tickets…for the Tokyo metro system.…Rather than having these unlabeled images,…you might want to capture them.…The figure and fig caption elements…let you do just that.…For the first image, I'm going to replace…the opening and closing div tags by figure tags.…
If I save that,…and go back to the browser,…you'll notice that figures are a little bit more indented…than the normal images are.…Now you add the fig caption element.…Place it right after the opening figure tag…if you want the caption above the image.…Or right before the closing slash figure tag…if you want the caption below the image.…Which is what I want in this case.…So before the closing figure tag,…I'm going to have an opening…and closing fig caption tag…and in between the text that I want to appear…which will be language selection screen.…
Save that.…Come back to the browser.…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.