Inserting Images Into Your Web Pages @ OWDC

LESSON 1-07-01: Inserting Images Into Your Web Pages

Web Design Lessons > Lesson 1-07-01: Inserting Images Into Your Web Pages

Previous Lesson | Lesson Index | Next Lesson

If you wish to add an image to a spot on your HTML document, you can simply use the <img> tag. The general usage includes the "src" attribute to indicate the source file (i.e. location and filename of the image you want to use). Save the below image to the same location as your HTML page, and then copy & paste the code to get a feel of what I mean:

Right Click On This Image And Select 'Save Picture As...'

Copy & paste the below code after you save the above image to the same location as you'll save your sample web page:

Note that you do not need to close the <img> tag by using a </img> tag. Now save your HTML document as .htm or .html and double-click it - you should see a web page with the above image inside:

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Lesson 1-07-02, which is the next subsection of Lesson 1-07, is going to teach you how to add an "alternative text" to your images. This way...

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

• Lesson 1-07-01 Inserting images into your web pages

• Lesson 1-07-02 Adding alternative text to your images

• Lesson 1-07-03 Sizing images & adding image borders

• Lesson 1-07-04 GIF vs JPEG

• Lesson 1-07-05 The PNG format

• Lesson 1-07-06 Using spacer images
• Lesson 1-08 Hyperlinking
• Lesson 1-09 Aligning Your Content

Back To Top

IMAGES!