HTML: Images

Name: HTML: Images
Author: Jeremy Kurtz

Import and format images into web pages

Preview the first lesson free — get full access to all 5 lessons.

Course: On-Demand

In this lesson, we are going to insert our image into the web page. Remember that the tag for this is IMG. It's a single tag that is really controlled by its attributes. The attribute that we are going to focus on is the SRC attribute. SRC stands for source, so we know that we need to put the file name after the equal sign. So the first thing we want to do is save our page as picture. Now let's get to the image. Please note that the file name you type must be exactly the same as the file name in the directory that you're taking it from. I always rename my images in all lower case, so I don't have to think about it. Also, avoid spaces at all cost when naming image file. In the case of the file that I'm using, it is called family.jpg. To insert it, we're going to place the IMG tag just above the closing body tag. Then we're going to follow it with the attribute source, or SRC. So I'll put a space, equals, and then you follow it by the name of the file with the file extension. So mine is called family. It's a jpeg, so I put a dot followed by jpg, and then I close the quotes and close the tag. This is how you insert the image into the web page. It's very easy, but when we save it and we refresh our page, you'll notice that we have no other attributes for the picture. So if I open up the browser window, you'll see that the picture takes up so much space. So that's something we will deal with. Remember how we placed a copy of the image in our images directory? To access that, we only need to add the directory name in front of the image name, like this. So if I go to family, I'm going to type the word images, followed by a forward slash to denote that it's a directory, and then the file name. This is the preferred method for inserting images, and this is how we will do it for the rest of the course. So if I hit file, save, and refresh, notice nothing changes. So that's how you insert an image into an HTML document. In our next lesson, we will be talking about the alt attribute. See you then.

Beginner Provider : Jeremy Kurtz 5 Lessons · 17m in English

Course Description

This course will teach you how to import and format images in HTML. This important feature will allow you to add any images with copyrights into a web page. You will also learn how to format and scale the image in the browser.

Learning Objectives

Skills

What You'll Learn

Insert images into HTML web pages
Work with the alt attribute to add image descriptions
Format images in HTML by altering height and width
Scale and format images for display in the browser
Place images within websites

Key Takeaways

The course teaches how to import and format images in HTML.
Importing images allows you to add images with copyrights into a web page.
You will learn to format and scale images in the browser.
The alt attribute is used to add descriptions to images.
Image formatting in HTML includes altering the height and width.

Frequently Asked Questions

What will I learn in this course?

You will learn how to import and format images in HTML, including inserting images, working with the alt attribute, and formatting images by altering height and width.

What topics do the lessons cover?

The lessons cover Introduction to Images (Parts 1 and 2), Inserting Images, The Alt Attribute, and Height and Width.

What is the alt attribute used for in this course?

The course teaches working with the alt attribute to add descriptions within it for images.

What skills will I gain from this course?

You will gain skills in placing images in websites and adding descriptions within the alt attribute, along with HTML formatting and image importing and exporting.

Does this course cover resizing images?

Yes, it teaches formatting images in HTML such as altering the height and width, and scaling the image in the browser.