Image Tags3:44 with Treasure Porth
The image tag allows you to add photos and images to your web pages.
Image Tag Attributes:
alt - Short for alternative text, this attribute always goes on an <img> tag and should contain a short description of the image.
- src -Tells the browser where the image is located. You can link to an image from your website’s files, or from an outside URL.
Imagine how dull the web would be without pictures. 0:00 Photos and images are a cornerstone of building exciting, beautiful web pages. 0:03 So we're going to look at the image tag, the tag that allows you to add photos and 0:08 images to web pages. 0:11 Let's start by looking at this image tag in the header of our profile page. 0:13 If you don't have a workspace open and 0:19 wanna follow along, click the launch workspace button. 0:20 Most HTML tags can have additional information 0:23 called attributes added to them. 0:26 An attribute provides instructions for the browser. 0:28 For example, this tag has three attributes. 0:32 Source, alt, and class. 0:35 We've already seen the class attribute a few times before. 0:39 You can use it to create CSS styles that control how the element 0:43 appears on the page. 0:46 And by the way, 0:48 when web develops say HTML element, they simply mean any HTML tag on a page. 0:48 The image tag is a good element to start learning about attributes 0:54 because it needs two of them. 0:57 The source attribute and the alt attribute. 0:59 The source attribute points to a file path, 1:02 to the location of the image file on your site. 1:05 In our case, the image is in this folder called images. 1:08 And image itself is called me.png. 1:12 If you look over here in our Images folder, you can see that image right here. 1:15 So if we change the file path to the other image in this folder, Portland.jpg. 1:21 And save, and refresh the example project, you can see that this tag is now 1:31 pointing to the picture of the steel bridge here in Portland. 1:35 The same image as our header background image. 1:39 You can also link to what's called an absolute URL. 1:42 A full web address that links to an image that's outside of your website. 1:45 Let's replace this image with a place holder, so we can see how that works. 1:50 I'm going to go to a place holder image website called placeimg.com. 1:54 This is a really useful website that provides you with the URL that 2:01 will load a random image onto your page each time your website loads. 2:04 In these boxes, enter a height and width of 400 pixels. 2:09 And you can choose any category you like, but 2:15 I'm going to choose people to get random images of people. 2:17 Now we can copy this URL up here, and 2:22 paste it into our source attribute on the image tag, in between these quotes. 2:26 Save, refresh, and 2:33 now you can see every time we refresh the page, we get a new placeholder image. 2:35 This really comes in handy when laying out pages and need an image on the fly, for 2:40 those times when you don't have an image yet or haven't quiet decided on one. 2:44 Let's move on to the Alt tag. 2:48 Alt here is short for Alternative text. 2:50 You should always put a precise description of your image into your 2:52 Alt attribute. 2:56 This is what visitors to your website will see if the file path cut to image is 2:57 somehow broken or if the image isn't available. 3:01 This text is used by search engines and screen readers too. 3:03 It enhances accessibility for the visually impaired and other people who use tools 3:07 called screen readers that read out the text on a web page. 3:11 If someone using a screen reader visits your site, 3:15 the alt text will tell them about the image. 3:17 One last thing I'd like to mention about image tags. 3:19 Notice that the image tag has no closing tag. 3:23 Tags that don't need to be closed are called self closing tags or 3:26 empty elements. 3:30 There are only a few of these self closing tags, 3:31 like the link tag we talked about in the last video. 3:33 You'll learn which tags are self closing as you get more and 3:36 more familiar with HTML. 3:39 But the majority of HTML elements will need to be closed. 3:40
You need to sign up for Treehouse in order to download course files.Sign up