HTML Attributes, Classes, and IDs Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

15:21:10 Hi, everybody, welcome back in this video. We're continuing to learn about HTML by talking about attributes, classes and ids.
15:21:21 So an attribute provides additional information about an HTML element.
15:21:27 These are entered in the opening tag of the elements. So, as an example, I.
15:21:33 Img elements or image elements have a source attribute which is Src.
15:21:38 Where you specify the file path of the source image typically, when you put in an attribute, the format is the name of the attribute equal to whatever you want, the value to be.
15:21:50 So some examples, img images have source. You can set the both the height and the width as well, and a has the hyper reference which allows you to perform.
15:22:01 A link to a different web page. Let's go ahead and look at an example of this.
15:22:11 In visual, studio.
15:22:14 So here we have first our anchor, which has the hyper ref attribute set to be the link to the cat page of Wikipedia.
15:22:23 And then here we have our image that has both the source attributes set to be the file name of the image will be showing, as well as the width attribute for now let's look at it without the width attribute, and then we'll see what changes when we
15:22:38 set it. So let's open this file in our browser so we can see we've got our anchor that goes to the cat.
15:22:43 Wikipedia Page, and then we've got our image.
15:22:48 And this image is located here. This is what the image looks like as an image file, so let's demonstrate that width attribute.
15:23:00 Just as another example. So you can set the width to be either a set number of pixels.
15:23:04 Wide, and then the height will be scaled accordingly, or you could set it to be a percentage, in which case the percentage sets it to be blank percent of whatever the element holding the in image element is so for this case, it would be the body.
15:23:21 So if I said it to be 50%, the image then becomes 50% of the body of the HTML. Page.
15:23:28 If I said it to be 20%, the width of the image will then be 20% as wide, and then the height scales accordingly, to keep the aspect ratio of the original image file and.
15:23:41 So 2, we're gonna learn about 2 very particular attributes.
15:23:45 The first of which is the class. So class is a special attribute.
15:23:49 They serves. A class serves to be a signifier for a number of for multiple HTML. Elements.
15:23:57 So in our previous example, with the sample HTML, we had those 3 anchors that were links to different websites if you wanted to group them together and make it so that all of your links could look the same way.
15:24:07 You might set them to have the class of link, so classes are useful because they can be used to set the style of a number of elements in the single style, setting part of the code which we'll see in a later lecture on Css.
15:24:26 You can also select a group of elements by their class using Javascript, which will also do later when we talk about D.
15:24:33 3 Js elements can also have multiple classes where, if you have multiple classes, you'll do class equals.
15:24:41 And then the multiple classes are separated by spaces.
15:24:45 So, looking at an example, let's look at the code.
15:24:50 Here we have 3 links, and then we can see that Pbs has the class link.
15:24:57 But then also the class broadcaster. And we can tell that it's 2 different classes because of the space between them. We can see that Wikipedia has the class of link as well as the who website.
15:25:14 Why don't we actually go ahead and look at this as in our web browser, to see what this does?
15:25:20 So if we go to our developer tools.
15:25:24 We can look at our instructor.
15:25:29 And we can see that within each of the peas that they have their classes set.
15:25:34 So there's the class. That's the link. The class that's the link and the class that's broadcaster.
15:25:39 And again, a class of link. Okay?
15:25:45 Another special attribute is known as the Id. So this allows you to signify or E identify a single unique element.
15:25:55 So classes are for groups of elements, ids are for a single element.
15:26:00 So, and Id should usually not be shared among different elements.
15:26:04 When you have a idea, it should only apply to a single element.
15:26:07 So, for example, here we could specify our link to the Pbs website has the idea of Pbs, so these can be used also to set the style in the head which we'll talk about more later.
15:26:21 Also, you can select an element by its id using Javascript.
15:26:25 And finally, you can actually specify a location within the web page using hashtag or the pound sign whichever you'd like in the websites address so, for example, we have the class Id example.
15:26:41 HTML, if you follow that up with a hashtag or a pound symbol, follow by the Id.
15:26:46 Pbs. It will take you to the Pb. S. Anchor.
15:26:50 So let's see that. So here we've got Pbs as we showed before.
15:26:54 It has an id of Pbs and so then, if I go up here and go all the way over, I can do a hashtag or pound symbol Pbs, and then that gets highlighted, we can do it for the other 2 as well, so the first one was wiki and now
15:27:12 wikipedia is highlighted, and the last one was who and now the Who website is highlighted.
15:27:17 So, while it may seem silly on such a small web page like this, if we go to a Wikipedia article, maybe we go back to that one on cats, and we can find a different section.
15:27:31 So, for instance, there is be characteristics, and if we look at the characteristics, it has the id characteristics.
15:27:40 So, if we add.
15:27:44 Hashtag characteristics. It will then take us automatically to this page.
15:27:51 Regardless of like. Let's say we were up here.
15:27:54 We can now hit, enter, and loading the page with the hashtag or pound symbol characteristics, takes us to the characteristic section.
15:28:03 So these are very useful. I's are very useful, for when you want to.
15:28:08 Navigate a large web page to a specific area.
15:28:12 Take your users to a specific area if you're linking from a different web page.
15:28:16 Okay, so that's it for attributes, classes and ids we'll continue to learn more about HTML and css, and all that in the coming lecture.