So, the first lecture will be about HTML. What is it? So, everybody today goes to a browser one way or another, either in the phone, a tablet, desktop computer, laptop, they open the browser, they go to a website, type in the address bar or something, enter. And then you see a website like this one. This is the Google website. How is this built? That's where HTML comes in. It stands for hypertext, markup language. So, back in the early days of the internet, they created this to share scientific documents among the scientific community. But they didn't kind of foresee that everybody would be using them in a different way that we do today for social media, for example, like Facebook, Instagram, and all these fancy apps that are highly interactive and dynamic in those things that you see. You click something, you move things around. You upload, you comment. There's so much that's evolved from that very early days of the internet where they just wanted to share a text. That's why when we talk about HTML, you're going to hear the term document a lot because that's the original meaning of that. So, when you visit a web page, that's an HTML document. Now, that's written with some code, some sort of language, and that's called HTML. If you go to your browser, right-click, and click to view the page source, you can actually see the source code for any website today. It's open source, anybody can see it. So, if I click that, this is the actual HTML page for the Google. Of course, there's a lot of stuff you don't understand because when you build a page and everything, they remove all the space and all the visuals that makes us better read the code. But, ultimately, it boils down to HTML. Of course, there are other elements that you have to add on. HTML is just the structure of a website. Although, how do you change the visuals? That's a different matter. It's called CSS, Cascani style sheets, and that's the topic for another lecture. And then the third and final element that we do on the front-end is called the JavaScript programming language. That's used to actually manipulate the document. That is, you can actually change things in real time to make it dynamic. But, again, that's the topic for another day. Today, we focus just on the structure with HTML. Okay, so what do we do? First, you've got to go somewhere in a file system and create a directory where we're storing the projects. In my case, I have that repository directory here. I open Visual Studio Code and I click File and I click Open Folder, and I open this directory that I had created. Now, if you're not familiar with the file system, I don't know how... If everybody here knows how to create folders and files, I suppose so. But let me just demonstrate for the sake of having to do it the first time. Okay, let's see. I'll share my... I'm using Windows right now, so I use File Explorer. If you're a Mac, it's Finder. And if you're a Linux, it's Nautilus or Tuna or whatever your distro uses. So, again, if you want to go by the user interface, just go here somewhere and your computer can create a folder for all your projects. And what I did is created a directory by right-clicking New Folder. And the one that I did was full-stack-wabdab3. That's what I did others before I had to add a number. So, this is the one. I go to this folder and I create my files here, okay? So, that's what I'm using for my Visual Studio Code. I just opened this folder and I have this ReadMe file that's information about the course. And I'll be writing out the code here. Okay, so let me create a directory. I'll call it SRC, which stands for Source. Inside that, I'm going to create a new file called index.html. So, when we have HTML files or web pages, you have to name with .html extension. Now, index is a special name which means like the main page, the root page of a certain endpoint or slash resource. Now, when we have HTML pages, you have to always have a boilerplate to define the structure. Now, this boilerplate might not make any sense to you in the beginning. You just got to write it out. Later, you'll understand what it means. But the way we write HTML is with markup language. And markup language is basically you have what we call tags. And these tags are written this way. You have the less than sign and then you have a name of the tag, for example, HTML, that's the name. And then you close it with a greater than sign. Now, this is called a tag and the name of the element is HTML. Let me make it bigger if it's too small for you. Okay. Now, these are also called angle brackets. You might hear that as well. All right. So, what I did, I opened a tag with the element HTML. Now, this will contain the HTML thing. I also have to make sure to add a closing tag, a corresponding closing tag. So, when you have closing tags, all you do is repeat the same except you have to say less than slash. And then the same name as the opening tag. Okay. So, we open the HTML tag. We close the HTML tag. Okay. At the top, we usually have the doc type like this. Basically, it's less than exclamation. The doc type all caps. Make sure you're following the same convention as me with all caps. Space HTML, none greater than. Now, this is a kind of special thing that's saying, when the browser reads or loads this page, I want you to use the version of HTML five because in the past, HTML had other versions and the browser will be confused. What HTML version are you using? Because some features are not available in certain versions, right? So, to avoid the browser confusing what version you're using, when we say the doc type HTML, it means using HTML version five. Okay. Now, we always have to have this. It's just a boilerplate. Just, okay. Now, let me disable my extension here because I have a GitHub co-pilot, but we're beginners. We shouldn't be using this. Otherwise, it's going to tell us what to do. All right. Let me just reload to make it go away. Okay. Now, with that, we have to have, we usually have two other tags under HTML. So, the document itself has a part that people see, that's the body of the document, and they have the part that people don't see, but it's a metadata thing. That's the head. Now, the head contains things like defining what the title of the page is. So, when you have the browser, you have many tabs open. You're going to see that title. It's defining the head. Okay. So, we got the head. So, we got to make it a tag like this with angle brackets. Make sure to close it. So, whenever I type HTML, I always make sure to close it right away. Otherwise, I always forget. So, that's why I already closed it. Now, the second part is the body. So, open the body tag with the angle brackets, and then close it like this. Now, you might have noticed I typed my code with some spaces and line breaks. It doesn't really matter. It could be like one line like this, but this is really hard to read. You know, as a person, it's really hard. The computer doesn't care, but for us, really hard. That's why we always add new lines to make the code more readable. So, whenever I open a tag like this, I break a new line and add some space in the beginning, usually at least two. And this space at the beginning of the line, it's called in general for programming languages. It's called indentation, okay? Indentation. And that's why my Visual Studio Code already does that for me automatically, because it's very common practice, not only in HTML, but in programming, computer programming in general. Okay, so whenever I open a tag, I make sure to add two spaces on the left. So, you notice if I have two open tags like this, it will add one, two, three, four, because every open, it adds more space. So, when it close it, after the closing, it's when it goes back to the same level as before, only two. So, like that, and then like that. Okay, so this is how you nicely structure it out. That's better to read, although it's not really necessary to add all those spaces and new lines. Okay, so HTML document, always two sections, the head and the body. The body is what people see. The head is metadata like the title in the browser tab. So, let's go to the body, and we're going to type hello world. And then we're going to go to the head and add a title to this document. That's what we're going to see in the tab. So, that's done with the title tag. So, angle brackets, title, close, angle brackets, and then give it a name, my first web page about that. And then you have to finish it off with the closing tag. So, usually it's like this. We have a tag that's open. We type some content or text that usually people will see. And then to finish it off, you have to close the tag to tell the browser, hey, I finished writing my title. That's what it is. So, it's between the open and closing tags. Okay, does that make sense to everybody? If you have any questions, please ask in the chat. Okay, now we save the file, I press control S in my visual studio code. Now, how can I see this web page? It's simple, just open in the browser. So, one way is you can right click here and you can use the reveal in file explorer or finder if you're using Mac. And that will open the window with that directory. Let me share with you. Here's my file explorer and here's the file. I can right click, open, or open with if you have multiple browsers like me, you choose the browser of your choice. Let me choose Chrome for the sake of example. And then I'm going to go to my Chrome. And you should be able to see it here. Another way is obviously you can go to the browser and click here, open file somewhere, one of these things, or you can type the address, the path to the file like it's here, colon slash users and so on, all the way to index.html. And you can see hello world is here. If you right click view page source, you will see that's exactly what we typed for the code. Okay, so that's our first web page. If you remember, why do you have a title under the head? Because look at the tab here. That's what I wrote there. So if you have multiple tabs, you know what the page is about with the title under the head, right? And obviously you can also change this icon using another thing that you learned later on. If you link a favicon, but today we're not going to do that. You can look up in your own. Anyway, let's write some more harder code. Now that everybody got down to basics, we can go on. Now most of the work that we do is going to go under the body. So you can kind of ignore all the rest as you're building your pages for now. So everything between the open and closing tag for body is where we want to write the content for the website. Now, when we talk about something being inside another, I want to point out that when I say hello world is inside the body, that just means this text, the sequence of characters is between the open tag for body and the closing tag for body, right? It has to come after the open and before the closing. Keep that in mind. And because we have indentation here, that allows us to visualize that this is inside that. That's why we use that. Okay, just a tool for us to visualize the code. Anyway, let me teach you the paragraph element. So when you have documents, we write paragraphs. So to write a paragraph is very simple. The name of the element is P. So you write angle brackets P, close the angle brackets and then write whatever tags you want for the paragraph. Let's keep the hello world and then angle brackets and you have to close the paragraph tag with angle brackets slash and then P, which is the same name as the open tag and then greater than. So it's always like this. Remember, angle brackets, name of the element, and then whatever content if it's if it's necessary, and then close the tag with the angle brackets slash, and then the name is the same has to match the same name of the element as the open tag. Okay, that's the paragraph there. If you save that when you change the source code, you have to save the file and then reload the page to see it. Okay, let me show you there. Back to Chrome. I have to reload. Okay, reload the page. And now this is a paragraph. I know you might notice it's the same. Actually, it added some stuff space to the top and bottom because the default paragraph styles does that. But if you if you see the page source, it's a paragraph. Now another tool to analyze websites besides right click view page source is if you right click this paragraph here and click inspect. Now this will bring up a very powerful tool called the browser developer tools. And you see this bottom panel. That's the dev tools. And in particular, there's so many functions that are useful to analyze and understand what's going on your website or debug any problems. This one under elements tab in Chrome. I think it's going to say inspector in Firefox. So Firefox has slightly different tab names. You can see here all the live document view. It's similar to view page source except view page source only shows you the original document as it was received from the server. But once it's received from the server, usually the document is manipulated and many elements get moved around things get changed. So this allows you to see the live view of the document as it is right now at this point in time. You can see there's a P there and that's the paragraph. Let me make it bigger. By the way, I make it bigger for you with control plus and minus plus is bigger minus is zoom out. Okay, if you cannot see this, let me know I don't make it bigger even bigger. Okay, so you can click this click that to see all this stuff and you can see if as I point to the different elements it highlights in the content there. Some stuff now that stuff is mostly to do with the styling and dimensions are the space that's taking in the content. We're going to learn more about that later, but suffice to say this is just adding margins. You can see there's some space before the text and after. So that's called a margin. Okay, and that's what that kind of beige brown color highlight is doing and and it's telling you also in the kind of pop over thing, the bubble. The name of the element, the dimensions with and the height right the height is after the cross and the unit for dimensions here is called a pixel px. So you're going to see that a lot. That's how we usually measure things on the computer screen. Okay. Now I talked a lot about elements. So you hear me take a look about that a lot. So basically in HTML, we build a page with different elements. We have like paragraphs, we have images, we have video, we have audio, we have like headings, which is the big titles. We have input elements that allows the user to type maybe a number like an email. Maybe they put a date like a calendar input element and so on. So that's how we build them. Now you might see the name element being interchanged a lot with the tag. Right. So when you have the tag here, it has angle brackets. So it's called a p tag. But in itself without the angle brackets, we call it paragraph elements. And that's how it is internally as we learn and learn with JavaScript. It's this is a paragraph element. Okay. HTML element. Okay. Is that clear to everybody. If you have questions, let me know. Okay. So that's the main point about HTML. We're always going to approach it like this with tags opening something between the tags and tags closing. Now there's going to be a lot more to that later as we learn because how do you give it additional information because you can only put things between the open and close. We're going to learn about other things called attributes later. But as far as to say, let's learn about the headings one through six. So when you have a book, usually you have chapters, right, we have sections of a book. Well, same thing kind of for a document, you have like a big text with a section name, right, title, and then some paragraphs and then subsections and so on. We can use the h one through h six elements for that. So let's start with a tag and go back. It's h one. H stands for heading. Okay. And then you can type your title here. Let's call it section one. And then you have to close it with the less than slash h one. Like that. I'm going to save it. Now, I have to go back to the browser refresh, right? But let me teach you a very convenient way to do it from within visual studio code itself. If you go here, if you're using visual studio code, I know you're if you use a different editor, it has a similar feature. If you go to the extensions or plugins. And you look for live preview. And install this one for Microsoft. And click install. I already did. And that will give you a way to preview the document from within visual studio code. So I don't have to have an external browser. Now it does have some limitations. That was as we'll see later, like when we click links, but good enough for now. Okay. So I go back to the Explorer view. I can click my file here again. So what I'm going to do is open the command palette. I can click view command palette, or I can press control shift B in my case. That's the hot key. And it's going to have this search menu with the greater than sign. And I'm going to type live preview. And there are several options. I'm going to choose the one for internal browser show preview internal browser. It should open to the side. Like a small browser. So I can see the document in real time as I change the code. Okay. So I can see this is the H one. It's the first thing here. Visually, it appears as taxing big letters and bold. Now, suppose we add another paragraph here. So again, when we add new elements of the document, it doesn't matter where you like the spacing and white space and line breaks. So I could add a new paragraph here. I can type Lauren, like three ab on VS code, and it will generate random text. If you didn't catch that, I just typed Lauren three, and I press tab, and it generates random tax like three words. So I can have something there. Anyway, close the paragraph last then slash B like that. Now, it can be in the same line doesn't matter, but it will come after this, right? You can see visually, hello world is not exactly on the same line in the document. And that's because of the behavior of the elements by default, a paragraph, it will like push any other thing beside it. It doesn't like anybody next to it. That behavior can be changed with CSS as we later learn. So it doesn't matter if you have it here or there, the output is the same. So usually this is better for me to read the code. So that's why I always have a paragraph for line. Okay, now I taught you H one, which determines this is a section of the top level section. What if I have a subsection of this, that's when the H two comes in. This is a subsection. Like that. So open tag is to type whatever you want to say, but a subsection title, and then close it with the closing type. For H two, don't forget to slash before the element name. Okay, and then the subsection with would have more paragraphs, right? So you can go on add a P. Let me add five words with Lauren five tab character. Like that. And so on and so one, right? You have other stuff there. By the way, I duplicated the line with, in my case, I'm using windows. I press alt, shift, down, down. Okay, alt, shift, down will duplicate the line down. That's what I did. Or you can just copy and paste or do Lauren, whatever, or type whatever. Okay, so and so on. So we have subsections of a subsection of a subsection. So you can have H three. Oops, my keyboard changed. Change your back H three. This is heading level three. And I made a typo there. Add thing looks like that. You can see as visually if I type H four visually the font size, it's gradually smaller and smaller. Right. H five. So this is like subsection of a subsection of a subsection of a subsection. You get the point, right? And this is adding level six. That's the last one. Okay. One through six. So I just have to tell you about these, but these days, people don't really use them coherently. In the beginning, the websites were just documents. So that's why they, they thought about this. But these days, it's mostly they only use H one for SEO, search engine optimization and all the subsections of H two. And you might see people using them a very weird way. So one thing I have to tell you also, despite HTML having specific elements or tags for specific things like paragraph, image, video and so on, you can always modify them to be whatever you want. Okay. So you might see people using a tag in a completely different way from its original purpose. Okay. So you're going to see that a lot. For example, there's an eye tag that people usually use for icons from font awesome. They use the eye element, which was meant for idiomatic text and visually it appears as italics. That's the way it is. And HTML has evolved into all these dynamic apps. So people had to find ways of doing whatever they needed to do so they will repurpose all the elements for their use case. Okay. And offside about that. If you somebody asks if you have multiple subsections, can you put multiple H two's absolutely. Yes. So you can have another H two here. And if you go by the original meaning this would mean okay this is the top level. This is one subsection. This is another. And this is like the subsection of this one. Yeah, it's up to you to make it coherent. You don't have it's not a rule or anything to write them in a specific way. So HTML will let you do whatever you want. You can have all weird stuff happening some tag inside another tag inside another tag. That doesn't make any sense semantically, but that's totally allowed. Okay. Let me see what else can we do. Oh yeah. Let's have fun adding links. Okay, hello world. We got that. What if I want to go to a website or another page. Let me teach you how to go to a website externally somebody else's website and I'll teach you how to make our own different page. So let's say you want to go to your favorite website. Let's say I'm going to go to yahoo.com. How do I do that? Well, it's called the anchor tag or a for short. So I'm going to go here to line eight. After hello world. I'm going I want to have a text saying go to yahoo. And I want to make that a link. So I have to enclose this in an anchor tag so angle brackets a. And then after the text angle brackets a with the slash preceding the element name. Okay, that's how you create an anchor tag, which we commonly call links hyper links, and so on. Now the a needs to know where you want to go if I click nothing happens. So that's when we have to introduce you to the concept attributes. When you need to provide additional information to an element, you add an attribute and to add an attribute you locate the open tag. And then to the right hand side of its element name out of space. Then you type the attribute name in this case it's h r e f h ref. And to give it a value associated value of this attribute you have to type the syntax equals sign double quotes, and then type the value and finish off another double quotes. Okay, so here in the value, the value is between the double quotes, you have to pass the URL. The URL is what we usually see in the browser address bar so if I hold to yahoo.com press enter I copy from the address bar. And that's going to be something like it should be as colon slash slash yahoo.com or www.yahoo.com right. So you can go to your favorite website copy the URL and paste here. Okay, so now you can see there's a highlight. It's a underlined right underscore with the tax now in blue, which is the default color for links. Now I don't want to use this to click because this live review is weird, and it will take me somewhere it doesn't work to go back. So I'm going to use the actual browser to demonstrate this. So I'm going to first save the file and go to Chrome. And let me do Firefox because I want to have different browsers for people to see what it's like. It's the same thing right Firefox here. Let me copy the file path. And here you go I reloaded it. Oops, and I can click go to yahoo and it goes to yahoo.com. Let me go back. Okay, I'm going to add a zoom here control plus so it's easier for it to see but the original is not zoomed in. And that's how you make links just build an anchor tag, give it an href attribute and point it to the URL of your website. Now I might be asking what if we have a different page within our own website. Well, what we usually do is create a new file for another page. Let's say we have the news page got HTML. This page would be for news. So I have to follow the same pattern as before the boilerplate for every single HTML file. I know it's tedious just the way it is. You get used to it. First the doc type less than exclamation all caps doc type space HTML rather than because what this is telling the browser use HTML version five. Next we have the HTML tag which is always there in closing the head and the body. So HTML tag and I always like to close it before I forget. And we got the head close the head. We got the body close the body. I recommend you always close it right away because you always forget. And then we got a title tag to the head to add so that when we see the browser tab will see something. Let's call it news. And then the body like we can add some news here. Lauren five in a paragraph. Just for the sake of something. Okay. And that's the complete news page. You can right click the news in your file explorer and open it in the browser or you can control shift be here and live review. It will open to the side but obviously I don't want to do that. I want to demonstrate how you can navigate from index to news. So I'm going to click back to index. And you can see here I want to add a link to that other page from our own website. Let's let me go here before section one. I'll add an anchor tag. Read the news about that. And then close the anchor tag. Now I have to tell it where where will it go at the attribute href go to the open tag right hand side of its name space href equals sign double quotes double quotes and between the double quotes you type the path to this file to this page. In our case, we can use a relative path because we have the files in the same directory. Okay. Otherwise, you can always use the absolute with the C colon slash if you're on Windows, blah, blah, blah, but that's just overkill. Right. So we want to just be relative. So we just say the name of the file news.html because they're in the same directory. It will know it's there. Save it. Let's see here. I scroll up, click read the news. And I go to the news page with the Lauren Ibsen text. Now let's go back right we need a way to go back obviously I can click the browser back button. But how do I do through the UI here the user interface. Let's just add an anchor tag. href right space href. What's the name of the index file index HTML. And then go back to index or homepage how about that. And let's put it before the paragraph. Okay, so we got here at the top go back to homepage. That's the text between the open and close anchor tag. And if you hover the pointer over it, you can see usually the browser in the bottom left, it tells you where that link is pointing to. So it's going to go to the index dot HTML. So that way we're back. Now we can read the news, we can go back to homepage. Okay, so that's our create hyperlinks. Let's make it more exciting and learn how to do images. How do I add an image to my document to my website to my web page. That's the IMG tag. And this one is special as you will see. So let's let's go here to actually let's let's stay news. Let's go to news and add an image there. So after the paragraph, I'm going to add an image how to add an image tag angle bracket IMG close tag like that. Now, IMG is called a self closing tag. There are some tags on HTML that don't need a closing tag corresponding closing tag. One of them is IMG. So you can just have an IMG like this. Now, how does it know what image show attributes. So you need an attribute. So go here, right hand side of its name with a space. Now this is called SRC which stands for source. Okay, be careful not the same as the anchor href. And you notice they all the names usually abbreviated because back in the days of programming people like to abbreviate stuff. Okay, so source. The same way we did href, we need a URL here. So the image can be anywhere on the internet. You can find an image and right click copy its image link. Go to a search engine find an image. Or you can have an image in your own machine here. And you follow the same pattern just put the name of the image here like we did for href, but I'm going to do an external image. So let me go here to a search engine and find an image. In my browser Chrome here, I go to bing.com that's search engine click images tab. I'll just find the image of a dog for the sake of example. And now maybe choose this one here. And I click view image that should open the image there. I can either also right click and copy image address that's also possible. Or you can copy here at the top the URL from the address bar. Control C to copy. In my case Mac is command C. And going back to the source code, I can paste that for the value of the source attribute. Like that. Now I see this one doesn't work. Some websites don't allow you to use their images like they block an external. So I think this one is not working. Let me grab another one. Let's see. This one is no good. I this one I know works that automation I always use this one. Let me copy that. And I'll replace it. Now that one worked. But it's just too big for us to see. So we always have to make sure to resize the images. One way to reach the ML is with it with attribute and hide attribute if you need to change the height as well. How do I add another attribute to an element that already has one you can do either before or after an existing one. Make sure it doesn't space though. So I can do it here before. Or I can do it here after. Okay. It doesn't matter. Let's do after. That's the easiest. I'm going to add a with attribute. Equal sign double quotes double quotes. So it's always like this the syntax attribute name equal sign double quotes double quotes. Now between the double quotes of the value. What's the way of value? Well, it's a number that's going to have the unit pixel. So if you do 100s like that, maybe that's too small. Let's start 200s like that. That looks good to me. You notice I only change the width and the height change accordingly. That's because if you only change the width one dimension, the height the other dimension will proportionately resize. If you really wanted to change also the height add another height attribute here, like 50. But you can see it stretches it and breaks the original aspect ratio of the image. That's why I just use one dimension. So the orders automatically resize. That's how you do images. Now, you might see a lot as another attribute that people use for images called alt. And that's used for two purposes. One is when the image breaks, you want to show alternative alternate text describing exactly what the image was supposed to be. Okay, for example, a Dalmatian dog. That's exactly what the image is about, right? So if for some reason the image is broken, for example, I remove the source, you're going to see a Dalmatian dog instead of the image there. Let me revert back. The other uses for accessibility. There are people who have trouble reading a website, seeing or blind people. They use what's called a screen reader. Screen reader is a program that when it visits a website, it reads out loud everything for you. So when it comes to this paragraph, it's going to read Lauren Ibsen, Dolor, Isida Met, blah, blah, blah. And then it hits the image. Since the person cannot see the image, its description is read and the description comes from the alt attribute. So the person will hear a Dalmatian dog. That way they understand, oh, this part of the website is an image of a Dalmatian dog. Despite being able to see it, they understand what it is. So that's why it's very important to accessibility. To whenever you add images, make sure to add an alt attribute that specifically describes the image. Okay. And that's it for images. You can just add more with the same way. We're almost out of time. I just want to show you how we can do audio and how we can do video. And for the audio, I want to give you, after the image here, we're going to use the audio tag. So audio like this. And then make sure to close it. It's not self-closing. You need a closing corresponding tag. Now you need to know, okay, what's the source of the audio? So source just like image. You add it there. Now we need an audio URL from somewhere. I'm going to paste in a Zoom chat, one that I made. And it's the dog's barking. I paste with the Zoom chat. You can copy and paste to the source. Once I got that, you can see nothing shows. That's because we have to tell the element audio to show some default controls. Otherwise, I'm going to think we are in charge of designing the controls. I want you to the default, so I add controls attribute to make it show the default browser one. Now this is, you might see the controls slightly visually different among across Firefox from and other browsers, because each of them has their own style. But ultimately it's the same thing with the play button and volume control and dot dot dot. Okay, if you click the play, I hear the dogs barking. Obviously the recording for this will not hear, but the dogs are barking in the audio. All right, everybody. And that's audio. And then video is the same way. Can you guess the name of the tag for video? It's video. And then source attribute. Close the video tag and then give it a source, a URL from somewhere. I'm going to give you one of big bug bunny. And I pasted a zoom chat and I pasted here. And this is like some bunny video. It's just too big as well. So like images, you should add a width attribute to make it smaller, 200. And let's see if it's still working. You need to also show the controls like the audio. So add the controls attribute. By the way, notice the controls attribute doesn't need a value, right? It's a special kind of attribute that's kind of like a Boolean true or false. So you don't have to have equal sign and the quotes. Just say controls there. And if I click play, I should be able to see the video, a big bug bunny. And I click pause there. Okay. So very similar image, audio and video. Just change the name of the tag and keep the source and possibly add the width. And for audio and video add the controls if you don't want to design your own. Now let's finish off with lists. Okay. I want to go here and after this video, how do I make a bullet point list in HTML? Now that will involve two elements. The element for the list itself, the container, and then the elements for the list items. Now for the list, it's called UL, unordered list, because there's no specific order. So UL like that, make sure to close it. And then between them, we're going to type the list item elements. So li, li, and then type first point, close the li. And just like that, you can duplicate, you add more allies, second point, and so on. You can just out shift down and it'll be like that. So that's how you make a bullet point list. UL elements, that's the container for the list, unordered list. And then you make a point with the li or list item elements. Between the open and closing tags, type whatever you want to show to the user. And a bullet point will be added by default. That's the default style. You might also see this element a lot when you have website navigations. They're not actually bullet point lists visually, but people repurpose the UL to be navigation links, usually at the top of websites, or in some sort of navigation vertically as well. So you might see that a lot, okay? How do I make this bullet point list numbered? For example, one period, two dot, three point. It's very easy. That's the ordered list element. And all you have to do is change the parent here, this container element. Instead of UL, type OL, make sure to also change the corresponding closing tag to OL. You see that automatically in the right hand side, I see one period to period and so on. That's the order list. So just change UL to OL, keep the yellow eyes the same way. All right, then there's all the kind of HTML lists. Obviously, you don't have time to go over every single HTML element there is. Some of them are most popularly used. Some of them are kind of obscure, not very much used. But I tried to show you the most popular ones, and these are the ones that are commonly used. If you are curious about how somebody built a website, what element they use, you can always go to your browser, right? Let's go to browser here. Let's go to this website, Bing, right? Microsoft Bing. How do they build this button here? Right click, click inspect, that will open the developer tools, okay? You can see that they built this with an element called span. And then you can see all the elements. This icon is also span element with some class attribute. And then they have this whole thing in a div, which is the generic container element. And that div in turn is inside an ally. Oh, that's why we just learned. Like I told you, they repurpose the allies for navigation. You see that? This whole thing is a UL on our list, which was repurposed for navigation. Well, all these buttons. All right, so you're going to see that a lot. If you want to find out how people build their websites, right click, inspect, everyone's website is open. Anybody can see the source code. So that's how you find out how to build things, okay? Somebody asked, how would you space out the bullet points or numbered list to add spacing between them? That's mostly done with CSS cascading style sheets, which we'll learn in a later lesson. Okay. Basically, you want to add either padding or margin to the bottom of the element. Okay, and with that, I finished this lecture.