Learn the necessary essentials to put an image on a webpage.
- [Instructor] Here are the essentials of adding an image…into an HTML page.…Use the image element with the source, SRC attribute…that gives the path to the image file.…The image element is an empty element.…It doesn't have any content…and it doesn't have a losing slash image tag.…In some XHTML5 documents,…which is flavor of HTML5…based on something called XML…you may see a notation like this…with a slash greater than at the end.…This is the XML way of saying…this is a beginning and ending tag…all wrapped up into one.…
Here's a diagram of the project structure…which you will find in the exercise files…that accompany this course.…The folder will contain the necessary HTML…and possibly CSS files…along with a directory named images…that will contain any of the images needed…for the project.…In this case, we're putting the image element…into the index.html file…so the correct relative path to the image…will be images/teddybear.jpg.…Here's the HTML for the web page.…In the body of the document,…we have a paragraph that will eventually have…
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.