1 00:00:00,540 --> 00:00:03,490 Imagine how dull the web would be without pictures. 2 00:00:03,490 --> 00:00:08,030 Photos and images are a cornerstone of building exciting, beautiful web pages. 3 00:00:08,030 --> 00:00:11,650 So we're going to look at the image tag, the tag that allows you to add photos and 4 00:00:11,650 --> 00:00:13,700 images to web pages. 5 00:00:13,700 --> 00:00:17,410 Let's start by looking at this image tag in the header of our profile page. 6 00:00:19,290 --> 00:00:20,760 If you don't have a workspace open and 7 00:00:20,760 --> 00:00:23,940 wanna follow along, click the launch workspace button. 8 00:00:23,940 --> 00:00:26,690 Most HTML tags can have additional information 9 00:00:26,690 --> 00:00:28,920 called attributes added to them. 10 00:00:28,920 --> 00:00:32,040 An attribute provides instructions for the browser. 11 00:00:32,040 --> 00:00:35,420 For example, this tag has three attributes. 12 00:00:35,420 --> 00:00:39,870 Source, alt, and class. 13 00:00:39,870 --> 00:00:43,080 We've already seen the class attribute a few times before. 14 00:00:43,080 --> 00:00:46,330 You can use it to create CSS styles that control how the element 15 00:00:46,330 --> 00:00:48,080 appears on the page. 16 00:00:48,080 --> 00:00:48,800 And by the way, 17 00:00:48,800 --> 00:00:54,300 when web develops say HTML element, they simply mean any HTML tag on a page. 18 00:00:54,300 --> 00:00:57,640 The image tag is a good element to start learning about attributes 19 00:00:57,640 --> 00:00:59,760 because it needs two of them. 20 00:00:59,760 --> 00:01:02,660 The source attribute and the alt attribute. 21 00:01:02,660 --> 00:01:05,430 The source attribute points to a file path, 22 00:01:05,430 --> 00:01:08,300 to the location of the image file on your site. 23 00:01:08,300 --> 00:01:12,700 In our case, the image is in this folder called images. 24 00:01:12,700 --> 00:01:15,980 And image itself is called me.png. 25 00:01:15,980 --> 00:01:21,280 If you look over here in our Images folder, you can see that image right here. 26 00:01:21,280 --> 00:01:28,073 So if we change the file path to the other image in this folder, Portland.jpg. 27 00:01:31,273 --> 00:01:35,726 And save, and refresh the example project, you can see that this tag is now 28 00:01:35,726 --> 00:01:39,900 pointing to the picture of the steel bridge here in Portland. 29 00:01:39,900 --> 00:01:42,410 The same image as our header background image. 30 00:01:42,410 --> 00:01:45,200 You can also link to what's called an absolute URL. 31 00:01:45,200 --> 00:01:50,020 A full web address that links to an image that's outside of your website. 32 00:01:50,020 --> 00:01:53,480 Let's replace this image with a place holder, so we can see how that works. 33 00:01:54,520 --> 00:01:59,644 I'm going to go to a place holder image website called placeimg.com. 34 00:02:01,150 --> 00:02:04,220 This is a really useful website that provides you with the URL that 35 00:02:04,220 --> 00:02:07,750 will load a random image onto your page each time your website loads. 36 00:02:09,600 --> 00:02:15,250 In these boxes, enter a height and width of 400 pixels. 37 00:02:15,250 --> 00:02:17,860 And you can choose any category you like, but 38 00:02:17,860 --> 00:02:20,620 I'm going to choose people to get random images of people. 39 00:02:22,750 --> 00:02:26,740 Now we can copy this URL up here, and 40 00:02:26,740 --> 00:02:31,230 paste it into our source attribute on the image tag, in between these quotes. 41 00:02:33,140 --> 00:02:35,640 Save, refresh, and 42 00:02:35,640 --> 00:02:40,540 now you can see every time we refresh the page, we get a new placeholder image. 43 00:02:40,540 --> 00:02:44,980 This really comes in handy when laying out pages and need an image on the fly, for 44 00:02:44,980 --> 00:02:48,620 those times when you don't have an image yet or haven't quiet decided on one. 45 00:02:48,620 --> 00:02:50,170 Let's move on to the Alt tag. 46 00:02:50,170 --> 00:02:52,248 Alt here is short for Alternative text. 47 00:02:52,248 --> 00:02:56,120 You should always put a precise description of your image into your 48 00:02:56,120 --> 00:02:57,630 Alt attribute. 49 00:02:57,630 --> 00:03:01,240 This is what visitors to your website will see if the file path cut to image is 50 00:03:01,240 --> 00:03:03,890 somehow broken or if the image isn't available. 51 00:03:03,890 --> 00:03:07,630 This text is used by search engines and screen readers too. 52 00:03:07,630 --> 00:03:11,780 It enhances accessibility for the visually impaired and other people who use tools 53 00:03:11,780 --> 00:03:15,090 called screen readers that read out the text on a web page. 54 00:03:15,090 --> 00:03:17,450 If someone using a screen reader visits your site, 55 00:03:17,450 --> 00:03:19,720 the alt text will tell them about the image. 56 00:03:19,720 --> 00:03:23,050 One last thing I'd like to mention about image tags. 57 00:03:23,050 --> 00:03:26,520 Notice that the image tag has no closing tag. 58 00:03:26,520 --> 00:03:30,010 Tags that don't need to be closed are called self closing tags or 59 00:03:30,010 --> 00:03:31,362 empty elements. 60 00:03:31,362 --> 00:03:33,800 There are only a few of these self closing tags, 61 00:03:33,800 --> 00:03:36,960 like the link tag we talked about in the last video. 62 00:03:36,960 --> 00:03:39,350 You'll learn which tags are self closing as you get more and 63 00:03:39,350 --> 00:03:40,520 more familiar with HTML. 64 00:03:40,520 --> 00:03:43,690 But the majority of HTML elements will need to be closed.