Image Tags

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