1 00:00:05,450 --> 00:00:12,010 Welcome back in this lecture we're going to discuss HTL attributes some element tax attributes that 2 00:00:12,010 --> 00:00:16,640 you can directly manipulate such as adding a link or adding a source image. 3 00:00:16,860 --> 00:00:22,800 Well we're going to do is actually use the smell of the two main common examples and that is how you 4 00:00:22,800 --> 00:00:28,260 can actually show an image on your Web site and how you can link to either another page or another outside 5 00:00:28,260 --> 00:00:31,050 Web site inside your HTL. 6 00:00:31,110 --> 00:00:32,340 Let's get started. 7 00:00:32,340 --> 00:00:37,500 All right here you have my text editor and this text editors open right now it's a basic the h t m l 8 00:00:37,770 --> 00:00:43,170 and in my browser I also have basic body it's T.M. file path linked to I'm going to create one more 9 00:00:43,230 --> 00:00:44,370 each time I'll file. 10 00:00:44,550 --> 00:00:46,170 So there's different ways you can do this. 11 00:00:46,170 --> 00:00:51,600 One easy way to do it is just duplicating my existing HDMI file and calling it something different. 12 00:00:51,630 --> 00:00:54,430 So I literally just call it different thought each time. 13 00:00:54,660 --> 00:00:59,000 And now I have to edit html files basically HTML and different age HTML. 14 00:00:59,070 --> 00:01:06,600 Let's start with the basic h T.M. so I'll type out HVM L and then inside the body I'll have a heading 15 00:01:06,600 --> 00:01:17,140 1 and then I will say basic h tim L. This is just so I remember what actual file I'm looking at. 16 00:01:17,490 --> 00:01:19,170 I've connected it already to my browser. 17 00:01:19,200 --> 00:01:25,240 So if I refresh I.S. basic page T.M. and notice these are both located in the same folder and I defer 18 00:01:25,370 --> 00:01:27,140 to him all right now it's blank. 19 00:01:27,150 --> 00:01:30,970 So we'll keep it that way back to the basic H.T. mail. 20 00:01:31,230 --> 00:01:36,990 But we're going to do is show you how you can actually link to an image inside of our age T.M. images 21 00:01:37,390 --> 00:01:40,750 there are specific tab is known as a self-closing tag. 22 00:01:41,010 --> 00:01:46,620 You'll see here that a lot of these other tags have both in opening tags such as H-1 here and then a 23 00:01:46,620 --> 00:01:47,450 closing tag. 24 00:01:47,550 --> 00:01:49,940 Again H-1 has a forward slash. 25 00:01:49,940 --> 00:01:53,870 You noticed the same for this head tag as well as the body tag. 26 00:01:53,910 --> 00:02:00,180 However this HTL tag actually closes by itself as well as this medtech an image tag works the same way 27 00:02:00,930 --> 00:02:04,890 as you begin to type I am g which is an image tag and enter. 28 00:02:04,920 --> 00:02:09,950 You'll notice that it's actually self-closing meaning there's no corresponding closing image tag. 29 00:02:09,990 --> 00:02:13,370 Instead we just need to provide the source of the image. 30 00:02:13,440 --> 00:02:18,480 You can actually provide the source of the image either locally or online. 31 00:02:18,480 --> 00:02:24,300 So you should do is inside your browser go to a Web site called and splash dot com. 32 00:02:24,360 --> 00:02:27,510 So actually have it open here again it's just an splash dot com. 33 00:02:27,540 --> 00:02:31,650 These are beautiful free photos and they're all gifted so you don't have to worry about any copyright 34 00:02:31,650 --> 00:02:32,270 issues. 35 00:02:32,430 --> 00:02:34,340 Let's look up a picture of a puppy. 36 00:02:34,800 --> 00:02:38,340 So I'll just say search for a puppy and find one that you like. 37 00:02:38,400 --> 00:02:39,900 So this guy looks pretty cute. 38 00:02:39,900 --> 00:02:47,240 Let's get him and then I'm going to just right click this and I'm going to copy the image address once 39 00:02:47,240 --> 00:02:48,770 that copy the image address. 40 00:02:48,920 --> 00:02:51,560 I'm going to put it here as the source. 41 00:02:51,590 --> 00:02:57,680 So as our C stands for source so this basically is telling the image tag what the source of the file 42 00:02:57,680 --> 00:02:59,170 is for the image. 43 00:02:59,180 --> 00:03:02,640 So if we zoom out a little more so you can see the big file path here. 44 00:03:03,450 --> 00:03:05,060 You'll notice here I have an image tag. 45 00:03:05,180 --> 00:03:10,590 And in this case it's a super long source because it's a really long link for the splash image but there 46 00:03:10,590 --> 00:03:11,460 it is. 47 00:03:11,460 --> 00:03:12,180 OK. 48 00:03:12,330 --> 00:03:17,270 So again just copy and paste that address that the image is hosted at. 49 00:03:17,290 --> 00:03:23,990 When we come back the basic HMO let me save the image change refreshed my basic each team on site and 50 00:03:24,050 --> 00:03:27,590 if I collapse this you'll notice now I have this picture of the dog. 51 00:03:27,630 --> 00:03:29,160 You'll notice that it's actually huge. 52 00:03:29,190 --> 00:03:32,670 It's a high quality image so it's a really big picture. 53 00:03:32,670 --> 00:03:34,420 Later on we discuss CSI. 54 00:03:34,440 --> 00:03:36,290 We'll tell you how you can resize this. 55 00:03:36,360 --> 00:03:41,910 But right now you know how to link a basic image using images. 56 00:03:41,910 --> 00:03:42,510 OK. 57 00:03:42,630 --> 00:03:46,700 So let's actually then show you how you can link to a local image. 58 00:03:46,920 --> 00:03:53,430 So to do that I'm going to download this image so they save images and they'll save it to that same 59 00:03:53,430 --> 00:03:58,640 folder where I have the flask examples and say save it as puppie underscore pick. 60 00:03:58,860 --> 00:04:00,980 So I'll save that as a JPEG file. 61 00:04:01,380 --> 00:04:07,200 And if you take a look now with basic H.T. mail and different bodies to mail I now have that Papy underscore 62 00:04:07,200 --> 00:04:10,490 pick a pig and it doesn't have to be a picture from this Web site. 63 00:04:10,500 --> 00:04:13,600 It can be any jpeg or PAGG file. 64 00:04:13,620 --> 00:04:16,830 The idea is sort of now linking to something online. 65 00:04:16,860 --> 00:04:19,110 I'm going to show you how you can link to something locally. 66 00:04:19,110 --> 00:04:23,340 So this the image we had earlier. 67 00:04:23,480 --> 00:04:25,210 And then let's zoom in a little bit. 68 00:04:27,570 --> 00:04:36,510 So here we have basic HMO type image again from an image tatic AMG enter and now wants the source since 69 00:04:36,570 --> 00:04:40,260 my JPEG file is in the same location as the HD Metafile. 70 00:04:40,290 --> 00:04:48,840 All I need to do is provide the name of that file which I've named puppy underscore pick that jpeg will 71 00:04:48,880 --> 00:04:49,850 save that. 72 00:04:50,050 --> 00:04:56,110 And then when I come back to basic each T.M. when I refresh notice nothing changes because now this 73 00:04:56,110 --> 00:05:00,390 image right here it's not actually from an splashback com. 74 00:05:00,400 --> 00:05:05,740 It's instead just being shown locally and pretty much will always be showing our own images hosted on 75 00:05:05,740 --> 00:05:07,110 our own servers. 76 00:05:07,360 --> 00:05:10,930 But you can actually link both locally and on the Internet. 77 00:05:10,990 --> 00:05:12,530 So keep that in mind. 78 00:05:12,610 --> 00:05:19,810 You probably also noticed this a LTE parameter or Allt that basically stands for alternative which intends 79 00:05:19,810 --> 00:05:24,510 to show something else in case you can't find the actual peg. 80 00:05:24,510 --> 00:05:29,310 So for instance Let's type in the source as missing that jpeg. 81 00:05:29,520 --> 00:05:31,970 Now I don't have a file called missing that jpeg. 82 00:05:32,160 --> 00:05:37,040 So I should see some sort of broken link so I will save that change. 83 00:05:37,110 --> 00:05:40,950 Refresh my browser and notice right now it's broken. 84 00:05:40,950 --> 00:05:43,430 There's actually no image to show. 85 00:05:43,430 --> 00:05:48,680 So what I can do is have an alternate either an alternate image link or even just a string. 86 00:05:48,720 --> 00:05:54,390 I can say oh image no image or image not found. 87 00:05:54,740 --> 00:05:57,990 So I'm going to collapse my bar here my left hand side panel. 88 00:05:58,230 --> 00:06:03,420 So I'm saying image source is missing touch pad again I don't actually have the file called Missing 89 00:06:03,620 --> 00:06:04,260 a peg. 90 00:06:04,380 --> 00:06:07,320 So I have an alternate and it'll say oh no image. 91 00:06:07,410 --> 00:06:10,970 So when I save this and refresh I see oh no image. 92 00:06:10,980 --> 00:06:13,350 And that little broken image. 93 00:06:13,380 --> 00:06:13,990 OK. 94 00:06:14,160 --> 00:06:16,390 So that's the main idea behind Image that. 95 00:06:16,470 --> 00:06:18,080 Essentially there's two main components. 96 00:06:18,270 --> 00:06:25,220 The source which is either a local file that you're hosting or a link to an image online. 97 00:06:25,230 --> 00:06:32,970 Keep in mind I was able to do something like puppy underscore pic because I have this file in the same 98 00:06:32,970 --> 00:06:40,590 folder as basic but aged him l if I have this Pyg file somewhere else on my server on my computer I 99 00:06:40,650 --> 00:06:48,990 may need to actually provide the whole file path which maybe something like on Windows see user Jose 100 00:06:49,180 --> 00:06:54,150 probably pic or something similar to that later on when we actually learn about Flast we won't be hard 101 00:06:54,150 --> 00:06:56,870 coding these paths ourselves. 102 00:06:56,940 --> 00:06:58,950 OK so we have images down. 103 00:06:59,040 --> 00:07:03,620 The last thing we want to show you is how you can actually create hyperlinks inside of her age HTML 104 00:07:03,630 --> 00:07:04,300 file. 105 00:07:04,500 --> 00:07:11,730 So I'll delete this image tag and I'm going to not use a tag or an anchor tag which allows me to see 106 00:07:11,790 --> 00:07:13,730 a link to another Web site. 107 00:07:14,010 --> 00:07:17,280 So right now we have a ref and just a hash tag. 108 00:07:17,430 --> 00:07:25,050 And notice this anchor tag is not a self-closing tag so has an opening tag and a closing tag. 109 00:07:25,050 --> 00:07:28,050 And what happens is you can type in something to the anchor tag. 110 00:07:28,050 --> 00:07:35,580 So my link here saved this and then I refresh the page here I see miling here. 111 00:07:35,730 --> 00:07:41,010 The hyperlink created when I click on it nothing is actually going to happen because it doesn't know 112 00:07:41,010 --> 00:07:43,990 where to link to which is what this HFS for. 113 00:07:44,370 --> 00:07:45,410 So I have two options. 114 00:07:45,450 --> 00:07:51,760 I can either link it to another HVM all file I'm hosting locally or I can even link it to another Web 115 00:07:51,760 --> 00:08:01,350 site for example I can type out HTP colon for Slash forward slash W.W. dot and then just the Web site 116 00:08:01,350 --> 00:08:10,170 name for instance Google or Facebook dot com or NPR dot org et cetera. 117 00:08:10,170 --> 00:08:14,970 So let's say that for NPR the OR and I'll say go to NPR 118 00:08:17,690 --> 00:08:20,180 and then if I refreshed this I get to see this link. 119 00:08:20,180 --> 00:08:26,630 Basic HTL go to NPR and when I click on go to NPR it will actually take me now to whatever link I said 120 00:08:26,720 --> 00:08:32,870 which was the NPR Web site npr.org and now it can link to other web sites on the Internet. 121 00:08:32,870 --> 00:08:37,170 Let me go back here often we won't be linking to other Web sites. 122 00:08:37,170 --> 00:08:43,070 Instead we'll be linking to other web pages on our own server so notice that I have this different age 123 00:08:43,200 --> 00:08:43,760 l. 124 00:08:44,010 --> 00:08:47,370 Let's go ahead and link two different rates T.M.. 125 00:08:47,400 --> 00:08:52,720 First off let's type out HVM L and have it fill in that skeleton code for us. 126 00:08:52,890 --> 00:09:01,420 And in the body of different thought T.M. I'll have heading one and Ill just say that I can remember 127 00:09:01,450 --> 00:09:02,920 what actual Web site I'm looking at. 128 00:09:03,130 --> 00:09:07,100 So I have my basic Steimle which has go to NPR. 129 00:09:07,100 --> 00:09:13,600 So we'll come back here and instead of saying go to NPR for my reference I'm actually going up put in 130 00:09:13,620 --> 00:09:17,240 that file path which is different h T.M.. 131 00:09:17,340 --> 00:09:22,800 Again keep in mind if different that is smell's located on a different part of my computer look at different 132 00:09:22,800 --> 00:09:25,350 folder I'd have to provide the whole file path. 133 00:09:25,470 --> 00:09:30,540 But since it's in the same folder as basically the HTML I just didn't provide its name so let's save 134 00:09:30,570 --> 00:09:34,390 that change refresh here and it still says go to NPR. 135 00:09:34,390 --> 00:09:35,570 So let's change that as well. 136 00:09:35,790 --> 00:09:41,900 Let's say go to different save that refresh. 137 00:09:41,900 --> 00:09:43,150 All right now it says go to different. 138 00:09:43,180 --> 00:09:45,600 And when I click on it it's different. 139 00:09:45,700 --> 00:09:49,060 So it was able to take me to that other team out page. 140 00:09:49,060 --> 00:09:49,750 All right. 141 00:09:49,750 --> 00:09:53,160 That's really the basics of using image tags and anchor tags. 142 00:09:53,200 --> 00:09:59,650 Again image tags can either have a source that's a local image or linked to an image online an anchor 143 00:09:59,650 --> 00:10:05,770 text and a very similar manner can either link to another Web site online by providing the HTP file 144 00:10:05,770 --> 00:10:06,720 path for it. 145 00:10:06,910 --> 00:10:14,190 Or you can provide a local ASML file and link to your own web sites or web pages or own templates. 146 00:10:14,580 --> 00:10:16,580 OK that's it for the basics. 147 00:10:16,630 --> 00:10:21,880 H simple attributes the main idea behind attributes is that again inside of these tags we have attributes 148 00:10:21,880 --> 00:10:25,690 we could define such as the SIRC source or a Tref. 149 00:10:25,960 --> 00:10:27,580 Thanks and we'll see you at the next lecture.