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

12:30:55 Hi! Everybody! Welcome back in this video, we're gonna continue to learn about web browser-based visualization by talking about elements and tags within.
12:31:03 HTML. Code. So in the last video we talked about introducing HTML code and showed you some examples.
12:31:09 In this one we dive a little bit further into how to actually write.
12:31:13 HTML. Code. So HTML code, and within its tree structure consists of elements or tags.
12:31:20 So for an example, before we dive deeper. This is an example of a part of the sample. HTML.
12:31:27 File from the second lecture, lecture 2 and the and the Repository.
12:31:33 So this is the first paragraph is contained within a.
12:31:37 P. And then the word first is contained within a B, so p and B are considered elements.
12:31:43 So P. Is the standard element for containing all of your text, whereas B.
12:31:47 Takes whatever text is inside and makes it bold. Majority.
12:31:53 Not all, but a majority of your elements are denoted with opening and closing tags.
12:32:00 So in this example, the P. And the B without the backslash, or whatever slash it's called, are the opening tabs.
12:32:08 They come first, and then once you've written everything you'd like contained within said elements.
12:32:15 You have a cling tag which is less than symbol.
12:32:19 Slash that leads forward. I can't remember if that's back or forward slash that leans forward. I can't remember if that's back or forward slash, and then greater than symbol.
12:32:28 So these are the. This is the syntax for closing tag and opening tag is exactly the same, but without the slash.
12:32:34 So here are the 3 big tags that you'll wanna know.
12:32:39 So the you have the HTML tag.
12:32:41 This is the element that contains all the HTML code.
12:32:46 And if you remember, we'll see in our examples in this video that it's common to put this with an exclamation point in the word Doc type.
12:32:54 And we'll see those in the examples we look at.
12:32:57 Then they're within the HTML, if we remember our diagram from the previous lecture.
12:33:01 There's the head and the body tags, so your head tag contains all of the metadata about the page.
12:33:09 So, for example, the title and your body tag contains the content that is displayed on the page.
12:33:15 So those peas and etc. So for the rest of this, we're gonna talk about some common elements that you'll use and we'll see some examples in the code.
12:33:26 I'm not gonna write any code. We're just gonna look at examples.
12:33:29 And then, as we move later into later notebooks, will start writing more of the code.
12:33:33 So here are some common elements that go within the head of the HTML document.
12:33:40 The first is the title, so we've seen this before.
12:33:43 So this sets the title of the web page. It's not always used, but it most usually is used so if you've ever opened up a web page on your browser, and you've seen there's usually some sort of title at the top, Tab or if you only have a single tab
12:33:58 open. It'll be the entirety of the browser bar.
12:34:05 So, for example, in the sample, HTML file was sample.
12:34:09 HTML, file. This is the title of the web page, and usually tells some sort of synopsis of what the web page is about.
12:34:18 There's also something called the style element, which allows us to change how things are appear within the HTML file.
12:34:26 We'll learn more about this. And just a few videos.
12:34:29 There's the script element which allows you to write Javascript code that is executed client-side.
12:34:37 So on your audio's computers or phones, we'll talk about this more.
12:34:41 And another in a later video. When we dive into Javascript stuff.
12:34:46 So those are sort of the 3 most common head, at least within this Mini course.
12:34:52 The 3 most common head tags or elements? What are common elements for the body?
12:34:57 The first is the P. So this is the paragraph element, and it's just used to contain 2 text as well as other tags or elements that alter the appearance of text.
12:35:09 So here was an example from our sample. HTML, it was P.
12:35:14 This is the third and final sentence. This was a paragraph element.
12:35:18 All of these B, i, u, and S are different elements that effectively appearance of text.
12:35:28 So we've got B, which we've seen before, will make the text to bowld.
12:35:31 I makes the text italicized you, underlines the text, and S strikes out the text all of these tend to appear within P.
12:35:39 Elements, or was, we'll see in a later slide.
12:35:46 H! One, h. 2. Headline elements, so why don't I actually skip to that one?
12:35:52 So, headers. That's another version. That's another element that contains text.
12:35:56 So these take the format of Little H, with a number after them, and typically these are numbers, are not.
12:36:02 Typically these numbers range from one through 6 so these are sort of the titles within the web pageage.
12:36:09 So like, if you see a headline on a news article, it's probably contained within an each one or an H.
12:36:14 2. So these headers are headlines.
12:36:19 Shrink in size and boldness as you go with a larger number. So H.
12:36:24 One is typically the biggest and the most bold. H. 2 is the second biggest.
12:36:30 H. 3 is the third biggest, and so forth. So let's see if we have an example of this why don't we go ahead and start with sample head and body comments?
12:36:41 So we're gonna open this with visual studio.
12:36:48 So we can look at the code so, as a quick aside, this is a comments so within.
12:36:53 HTML code, if you want to write a comments that will not be executed as code, you do error, exclamation, dash, dash, arrow!
12:37:02 To close, so within visual studio, this is quite nice.
12:37:07 So in a Mac. If you hit command, and then the question mark it will automatically generate a comment for you in visual studio. This is quite nice. So in a Mac, if you hit command and then the question mark.
12:37:21 It will automatically generate a comment for you. Probably in windows it would be control with the question mark, or probably also in Linux.
12:37:28 You'll have to experiment and find what does this but most code editors have a shortcut that allows you to create a comment.
12:37:30 So it's not as what this exact sin tax is for creating a comment, because the code editor will do that for you.
12:37:36 So, as I mentioned before, within the HTML.
12:37:40 Tag. It is standard to include an exclamation, Doc type and all caps.
12:37:46 This tells the web browser that it should expect this file to be written in HTML.
12:37:51 We talked about this with the head before, and we talked about this with the body.
12:37:55 And here's an example with P. And with B. And then this is just the exact same.
12:38:02 The exact same file we saw in the first introduction to HTML.
12:38:06 This sample. HTML file. So let's go back to our.
12:38:12 We talked about this. So anchors, if we go back to our code, there was an example where we had an A, so a stands for anchor.
12:38:22 These allow you to hyperlink so sort of anchoring the text to another reference on the Internet or within your own file system.
12:38:31 So, for example, in our sample code, we had a Href equals Https, www.pbs.org, and so now you see within them Firefox Browser, that was highlighted.
12:38:44 It's purple because I've clicked on it before, and it will take me to the Pbs web page.
12:38:51 Okay, as another example. So we can go back here. I go to Wikipedia Homepage, and then the Who's homepage?
12:39:00 Not the band, but the United Nations Organization.
12:39:05 Okay, so let's keep going. So we did not talk about lists yet.
12:39:11 So you can create lists with either O. L. Or Ul.
12:39:17 So Ol stands for an ordered list. So the d default is to order these as 1, 2.
12:39:22 But I don't believe you can change it to be ABC.
12:39:26 With some extra arguments. Ul is an unordered list where items are denoted with bullets, and then once you have an or a ul, you can have individual list items by putting an all- elements.
12:39:42 So Alli stands for list items. So here's an example that would create an an ordered list.
12:39:47 Here's an example that would create an unordered list.
12:39:51 2.
12:39:54 Let's see if I we open this with visual studio.
12:39:59 Let's see if there's an example.
12:40:02 Here!
12:40:06 Okay, so no example. Here, just commenting on the existing code.
12:40:09 Okay. So we talked about Headers line breaks are an interesting one.
12:40:15 So line breaks, create a line break between HTML elements, meaning there's some vertical space that's created.
12:40:22 This is one of the few elements in HTML that do not require both an open and closing tag.
12:40:27 So if you just put br slash greater than symbol, this creates a line break.
12:40:34 And so we can actually see an example of this so let's go ahead and look at.
12:40:42 We're looking at this within our Firefox.
12:40:44 So this is the the example, and if I go in here and I add a br.
12:40:51 And you can see the web browser the visual studio automatically completed that for me, and I save that we'll see how this change is.
12:41:00 So now I've included a blind break here, and then I can do it again.
12:41:07 There we go!
12:41:11 Hey? So that's what line breaks do, and that's what they look like.
12:41:17 Okay.
12:41:21 So we've talked about. We have not yet talked about.
12:41:23 Div, so these are way that you divide your HTML page into sections, and we'll we'll see more examples of these in later lectures.
12:41:32 So these are heavily used in web. Page layouts, because they allow you to create a box around an element and basically place the box wherever you'd like on the web page.
12:41:43 So dibs are used, or divisions are used to create layouts within a page.
12:41:49 You can also add images directly to your web page by specifying the Img elements.
12:41:57 So here's an example where we do that. So first we'll open it with visual studio.
12:42:01 So here is the Img element, and then you have to specify the source or Src.
12:42:08 Of the image, and then this is what it will look like within fivefox.
12:42:17 Okay.
12:42:20 So tables. This is talking about how you can create a table with HTML, so they're contained within the table element.
12:42:29 And then within that table element you'll have a head of a table as well as a body of a table.
12:42:38 And then we're not gonna do too much with tables. So if you're interested, I encourage you to work through this.
12:42:41 And then look at the example code, and then you'll see how to make a table.
12:42:47 Okay, so that's it for the most common head and body elements that we'll be working with.
12:42:55 There are others. You can do a web search if there's something you're interested in, or just look at the source code of other websites.
12:43:00 If there's something you like and you'd like to put it in your own web.
12:43:03 Page, but now you have a good start on the most common HTML elements, and then how to write them up in code and what they look like within a web browser.
12:43:12 So I hope you enjoyed this video. In the next video, we're going to talk a little bit more about how you can specify different attributes, or the class or the Id of an HTML element.