Resources

• Slides

Video Script

Welcome back everyone. In this video, we’re going to continue our talk on HTML and start looking a little bit at HTML tags. As we mentioned before, the language itself works off of a series of tags, tags are denoted by a less than and greater than symbol with the name of the tag in between. Now, some tags may also actually have attributes in between there, but we’ll get to that later. To make a basic web page, we need four primary tags, HTML, head, and body. But we’ll also add in title there, so we can actually have a name for our webpage as well. The HTML tag primarily wraps the entire contents of the web page, although not all of those contents are actually displayed directly on the web page. For example, the head tag will actually have some meta information about the page, but it’s not actually rendered in the web browser, the title tag actually belongs to the head tag. And while it’s not rendered on the page, it’s actually going to denote the name of the webpage in things like your tabs. So when you open up a page in a new tab, and you have the name of the webpage, there, that’s where that comes from. The body tag is going to have all the rest of the content of the actual website.

So the things that you would typically see on a web page will be contained inside of that body tag. But let’s take a look at an example of a basic web page. so here we can see a lot of the tags that we’ve already talked about the HTML tag, the header tag, the title tag and the body tag. But we also have this doctype up here at the top, this tag is a special tag that we don’t necessarily have to include most modern web browsers will actually render HTML without it. But what this tag does is it informs your web browser what type of content it’s actually going to be displaying. So when you make a request to ace a web server, and the webserver responds with content on the web browser will actually look at this tag and determine how to actually treat this particular web page. But other than that, you can see the gist of our website is actually between these two HTML tags. Now, we talked about tags already, but the tags themselves actually have an open tag and a close tag. There are some tags that will actually be self closing and when we have one, but I’ll show one of those here in a little bit. But the open tag is just as what we’ve seen already the less than symbol and greater than symbol with a name of the tag in between. And then we have a corresponding closing tag that has the same name.

But with a slash to start out with, that’s going to indicate the close or the end of that particular content inside of that tag, we have the same thing with the head tag, we have an open and closed head tags, same thing with the title head tag that will typically come first up here towards the top of your HTML or inside of your HTML tags. And then the body tag will follow where our body tag is we have the content of our actual web page. And then here, we’re just doing a simple text for now. But let’s take a look at how this would actually look like when it’s rendered by the browser. But let’s go ahead and type in our tags that we showed in the slide down there. So we first need the doctype, which indicates the contents of this file our HTML. And then we start out with our HTML tag, our open tag, and I like to get into the habit of always doing the open tag and then immediately typing out the closing tag. That way you don’t have any hanging or loose HTML tags. So let’s do our header tag, then close head. And then we have our body tag, and our closed body tag. inside of our body tag, we just have a simple Hello World. And inside of our head tag, we have our title.

So Open title, close title. And then in between here, we’re going to say homepage. Now, let’s save that out. So I can open this file up. So this is just the actual RAW file being loaded into my web browser. So we have our simple Hello World here. And most web browsers like Firefox or Chrome You can actually Inspect Elements here and actually see the contents of the webpage itself. So here is my head tag that we had before which we have header. You can ignore the script here. This is part of some of my browser extensions. But you should see hello world here, and the end of my body tag in the close my HTML, this is a really great way to debug or look at your web page to make sure everything that you put here is actually being rendered. But let’s take a look at a few more HTML tags. So the header tag is going to be indicated using H and then a number you’ll typically see this go from h1 through h6, h1 being the largest header that you can make, and h6 being the smallest P is going to be for your typical paragraph. So if you want to put text anywhere on your webpage, that’ll be the best way to do it, the paragraph tag will actually add some whitespace before and after the tag itself. line breaks here, this is actually a self closing tag, as we talked about before, but we haven’t actually seen one yet, a line break will actually force all the content to the web page to be separated on out onto a new line itself. And this also goes for like a horizontal rule. So if you have a line across your web page, HR, and then a which has a self closing tag as well. But br here break is going to self close, you won’t actually have an open tag and a closing tag, you just have this particular tag. So it opens and then closes all on the same line. So open and then closes, where typical closing tag will actually have the slash before the name of the tag.

The ‘a’ tag here, this is a typical link that you would expect to click on and your web page. So and but it is called an anchor tag, O L and ul which are ordered and unordered lists, so numbered or bulleted lists in that order. And then inside of a ordered or unordered list, you have a list item. So this is what you will actually use to denote each item in the list. But let’s actually go ahead and try to add a list to our webpage. So here are two simple lists that we have here, O L and ul unordered list and a unordered list. And I just have some default items in here. But let’s try to get this on to our actual web page. So here was our original web page that we just did a little bit ago. And I’m actually going to go ahead and change my hello world here to be wrapped inside of a header tag instead of having it directly into the body. But then, let’s go ahead and start getting out some of our other tags that we already did. Let’s do a simple paragraph here. This is a sample website. So in our sample website here, let’s go ahead and add our ordered lists over here. So remember, r o l is the ordered list and ul is the unordered list.

So I’m going to go ahead and start typing this out here, O L, and then close o l remember to always add your closing tag for an open tag. And then let’s do our list items. And I’m going to do the same thing for the unordered list. But all we need to do here is change o l to ul. And note that my formatting here with the indentation of the tags is not required, I could actually toss all of this all on one single line and the webpage would still render just fine. But this is just to get into some better formatting practices to make your HTML a lot more readable if someone is actually going in here to look at your webpage or edit your code. But if we save that, and go and refresh our local file, we now see something like this, where we have our paragraph text here. We also have hello world as part of a header tag now, so it’s much larger than it was before as just plain text. And notice that there is some white space here between I have my paragraph tag here. And likewise, we have a ordered list and our unordered list. But let’s continue on and checking out more of these HTML tags. One of the most common things that we actually use to create an interactive web page, of course, are links, right or anchor tags. And so an anchor tag works just like this. Will we have the open a tag and the closing a tag, but now we’re actually introducing attributes to our tag.

So most attributes are allowed to have any number of specific attributes. These can help define other properties or things that this particular tag actually does. So in this case, for our anchor tag, we’re going to define an href attribute, this href attribute is going to be equal to http cs ksu.edu. This is going to be the location or the URL, the content that is actually loaded, when you click this link, and then the text that actually appears to the user is going to be the click me here. This can be pretty much anything. So you could actually make almost anything clickable in HTML. So let’s say if you wanted to make an image, a link, you could put the image in here and the image would be clickable to that external URL. Okay, so let’s go ahead and add this link into my webpage. So I am going to go ahead and add that up here towards the top underneath my paragraph tag. So we have the A for anchor, and then the corresponding closing tag. And then we had clicked me here as part of the text to visit. And then we want to actually put the attribute href in here. So we have a particular spot to actually go to when we click OK. So the location that I want to go to is HTTP slash colon CS dot k asu.edu. If we save that, and refresh our page, we can now see the click me. And when I click it, it takes us to the computer science homepage. Now, you can also again, right click and open up a new tab. Notice, right, we forgot to mention earlier, notice that the title of our web page is loaded up here as part of the tab. If you want this to open up in a new tab, we can add a target here. And if you set the target to be blank, it actually ends up loading into a separate tab. So that way, you don’t have to actually press back and forth.