0 1 00:00:00,310 --> 00:00:00,590 All right. 1 2 00:00:00,690 --> 00:00:07,110 So in the last lesson we looked at how to use HTML lists that were ordered as well as unordered. 2 3 00:00:07,460 --> 00:00:08,120 In this lesson 3 4 00:00:08,130 --> 00:00:14,040 I want to talk about the image element and how we can incorporate images into our web site. 4 5 00:00:14,160 --> 00:00:20,580 So the image tag is again a self closing tag so it doesn't need to be closed. 5 6 00:00:20,700 --> 00:00:26,580 But for the image element just providing an image tag isn't enough. 6 7 00:00:26,580 --> 00:00:33,350 You also need to specify the source and that's the source of the image that will be displayed. 7 8 00:00:33,480 --> 00:00:42,120 So that can either be a URL so it can fetch it from the internet or it can be a local image that's included 8 9 00:00:42,150 --> 00:00:45,900 in the same directory as your web site. 9 10 00:00:45,900 --> 00:00:47,770 So we're going to look at both types. 10 11 00:00:48,060 --> 00:00:56,240 But the first thing I'm going to do is I'm going to look for an image of myself online and let's have 11 12 00:00:56,240 --> 00:01:00,290 a look see if there's any images that are actually me. 12 13 00:01:00,320 --> 00:01:00,960 Oh there we go. 13 14 00:01:01,040 --> 00:01:02,600 So we already found one. 14 15 00:01:02,600 --> 00:01:05,610 So this comes from my Twitter. 15 16 00:01:05,870 --> 00:01:12,710 And you can also go to your own Twitter or your Facebook and you can right click on the image and simply 16 17 00:01:12,710 --> 00:01:15,010 copy the image address. 17 18 00:01:15,020 --> 00:01:20,660 Now if I paste it here you can see the whole URL of where that image is located. 18 19 00:01:20,660 --> 00:01:25,650 And if I hit enter my browser will fetch that image from that location. 19 20 00:01:25,910 --> 00:01:37,030 So now if I copy this image address or image source and I add it to my website as a HTML element. 20 21 00:01:37,160 --> 00:01:39,700 So just above my h1. 21 22 00:01:39,830 --> 00:01:42,190 So just above my name here. 22 23 00:01:42,440 --> 00:01:44,580 I want my image to show up. 23 24 00:01:44,630 --> 00:01:48,230 So I'm going to use the image tag and the source. 24 25 00:01:48,230 --> 00:01:53,480 I'm just going to paste in that URL that I got from earlier on. 25 26 00:01:53,570 --> 00:02:00,720 Now the next attribute here that comes up automatically is the alt or the alternative text. 26 27 00:02:00,900 --> 00:02:09,440 And this is the case for say if a browser can’t render the image then it will simply display an alternative 27 28 00:02:09,530 --> 00:02:13,740 text to the user to describe what that image was about. 28 29 00:02:13,820 --> 00:02:20,600 So I'll just put the alt text as Angela profile picture. 29 30 00:02:20,600 --> 00:02:26,390 Now if you're interested in search engine optimization and getting your web site ranking for certain 30 31 00:02:26,390 --> 00:02:32,650 key words this is something that Google looks at to try and figure out what your web page is about. 31 32 00:02:32,870 --> 00:02:41,240 So if you're making a web page that's about burrito recipes and you add an alt text that says finished 32 33 00:02:41,240 --> 00:02:49,100 burrito product image one then it helps Google to index and figure out that maybe your web page is related 33 34 00:02:49,110 --> 00:02:52,730 when somebody is searching for burrito recipes. 34 35 00:02:52,760 --> 00:02:56,940 All right so let's hit save and let's refresh and check it out. 35 36 00:02:57,140 --> 00:03:03,920 And I've now incorporated my first image onto my personal web site so you can either look around for 36 37 00:03:03,920 --> 00:03:08,400 an image of yourself on Facebook or Twitter or anywhere that would host it. 37 38 00:03:08,600 --> 00:03:15,890 Alternatively if you can't find any images of yourself on the web which is probably a good thing you 38 39 00:03:15,890 --> 00:03:23,270 can also create an account on Photobucket and upload your own picture in order to get a URL and after 39 40 00:03:23,270 --> 00:03:31,580 you do so you can simply click on the image and right click to copy the image address and paste it into 40 41 00:03:31,580 --> 00:03:34,170 your source between the quotation marks. 41 42 00:03:34,220 --> 00:03:36,440 It will work exactly the same. 42 43 00:03:36,440 --> 00:03:37,090 There we go. 43 44 00:03:37,280 --> 00:03:41,300 Angela is now a box of biscuits. Great. 44 45 00:03:41,450 --> 00:03:47,810 Now when my browser looks through this file to see how it should load it up and display it when it comes 45 46 00:03:47,810 --> 00:03:56,870 across this image tag it has to go and ping the servers of Twitter to try and obtain this image. 46 47 00:03:56,870 --> 00:04:03,620 And if it gets permission to download this image then they will grab that image and display it over 47 48 00:04:03,620 --> 00:04:04,030 here. 48 49 00:04:04,130 --> 00:04:12,170 So currently my image is hosted on Twitter's servers and my browser has to download it from there in 49 50 00:04:12,170 --> 00:04:15,780 order to display it inside my web page. 50 51 00:04:15,800 --> 00:04:23,210 Now what if Twitter goes down, what if they die, what if nobody wants to send tweets anymore. 51 52 00:04:23,480 --> 00:04:26,290 Well then their server is going to be shut down. 52 53 00:04:26,390 --> 00:04:33,860 And my image will no longer be available for download and you will instead end up with something that 53 54 00:04:33,860 --> 00:04:38,660 looks a little bit like this and you might have come across it in the past when you've been loading 54 55 00:04:38,660 --> 00:04:39,750 up Web sites. 55 56 00:04:39,800 --> 00:04:47,420 It means that the image is no longer available or is no longer hosted at the address that’s specified 56 57 00:04:47,720 --> 00:04:48,870 in the source. 57 58 00:04:49,100 --> 00:04:57,430 So in order to remove our reliance on Twitter we can also put an image into our folder 58 59 00:04:57,570 --> 00:05:02,870 HTML - Personal Site and refer to it inside our source. 59 60 00:05:02,870 --> 00:05:04,670 So let's go ahead and do that. 60 61 00:05:04,850 --> 00:05:11,120 Now if I go onto my desktop inside Web Development inside the folder HTML - Personal Site 61 62 00:05:11,120 --> 00:05:20,570 I can drag and drop or paste an image of me into this folder and now my index.html and my picture 62 63 00:05:20,600 --> 00:05:27,760 called angela.png is in the same folder and I can refer to it inside my code. 63 64 00:05:27,980 --> 00:05:36,500 So instead of using a web address as the source of my image I can simply refer to the file name because 64 65 00:05:36,560 --> 00:05:44,150 they are at the same level so index.html and angela.png are at the same hierarchical level. They’re both 65 66 00:05:44,210 --> 00:05:46,430 inside my site. 66 67 00:05:46,730 --> 00:05:57,930 Now if I had an images folder and I put my image into there then I would have to add a path to get there. 67 68 00:05:58,140 --> 00:06:01,240 So it would be something like this. 68 69 00:06:01,650 --> 00:06:05,440 Now both ways work and you can do it either way you like. 69 70 00:06:05,490 --> 00:06:13,620 And now if you hit save and you go to my site you'll notice this image change from square which is what 70 71 00:06:13,620 --> 00:06:19,880 it got from Twitter to circular which is what it got from my local file. 71 72 00:06:20,310 --> 00:06:24,780 Now in my case I cropped my image to a circle using Photoshop. 72 73 00:06:24,780 --> 00:06:30,840 But if you wanted to create your own circular image you can use a tool like crop-circle.imageonline.co 73 74 00:06:30,840 --> 00:06:32,100 crop-circle.imageonline.co 74 75 00:06:32,250 --> 00:06:37,980 And here you'll be able to upload an image and crop the part of the image that you're interested and 75 76 00:06:38,040 --> 00:06:42,890 get it as a circle and be able to download it to use it in your website. 76 77 00:06:42,900 --> 00:06:44,200 And there we go. 77 78 00:06:44,220 --> 00:06:50,340 We've managed to brighten up our homepage by adding an image of ourselves to the top of it using the 78 79 00:06:50,430 --> 00:06:57,360 image tag and we've started to look at these HTML attributes and you can see that every single 79 80 00:06:57,470 --> 00:07:04,260 HTML element in the MDN in reference also has a section on attributes and we're really only touching 80 81 00:07:04,260 --> 00:07:09,870 the surface here because there's other attributes that you can add to the image element or most other 81 82 00:07:09,870 --> 00:07:11,600 elements that you decide to use. 82 83 00:07:11,670 --> 00:07:17,750 And we're gonna be looking at these attributes as we come across them for different HTML elements. 83 84 00:07:17,790 --> 00:07:23,880 Now in the next lesson we're going to be looking at anchor tags and how we can start adding links into 84 85 00:07:23,880 --> 00:07:30,330 our website and how we can create new pages that can be linked to from our homepage. 85 86 00:07:30,330 --> 00:07:33,360 So for all of that and more I'll see you on the next lesson.