Master HTML5 without CSS! | Andrew Whitworth | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (1h 37m)
    • 1. Course Trailer

    • 2. Course Files

    • 3. Getting started

    • 4. (1) html intro

    • 5. (2) Setup Intructions

    • 6. (3) Start Here

    • 7. (4) explained

    • 8. (5) html basics overview

    • 9. (6) headings

    • 10. (7) Lists

    • 11. (8) Links

    • 12. (9) Images

    • 13. (10) paragraphs

    • 14. (11) inline elements

    • 15. (12) quotes

    • 16. (13) tables

    • 17. (14) formatting

    • 18. (15) semantics

    • 19. (16) forms

    • 20. (17) dropdowns

    • 21. (18) entities

    • 22. (19) audio and video

    • 23. (20) project overview

    • 24. (21) project assistance

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

**Take this class for free with Skillshare's offer of 2 free months!**

There are so many courses out there for HTML and CSS. What would happen if you mastered just HTML? Then you wouldn't need to take another course on HTML again. Well that is what I am proposing to you. Take this course and Master just HTML that way you don't have to worry about it in the future.

Meet Your Teacher

Teacher Profile Image

Andrew Whitworth

Full Stack Web Developer


From an early age I showed an interest in computers and tech gadgets. One day my parents bought the family a computer. From that day forward, you could always find me in front of the computer. Later I learned how to take it apart, put it back together, and upgrade it along the way. When that wasn't enough I learned how to make websites early on. Fast forward 18 years and several college degrees later and you will still find me in front of a computer. Now days I build beautiful websites and programs which inspired me to teach others how to do the same.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course Trailer: welcome to my course. In order to build any website, you must matched her. HTML. Once you have mastered age two mil, then you can easily move on to the more complicated sites using CSS. This course is just what it says it is Master HTML without CSS, which means without distractions and without complex examples that are hard to understand. The best part is, once you take this course, you can skip the HTML sections in other beginner courses, so join me in this course and master HTML together. 2. Course Files: Hey, I mean, you're in. I'm your instructor for this course. Now, sometimes it's a little hard to find the project files and resource is that you need In order to complete this course, I wanted to let you know right where those are. So those air down here at the bottom on projects and resource is so if you scroll down, you're watching. The course should get ready to start. Go ahead and go straight into this. You go projects and resource is and you just click on both of these files and they'll download, and then you can put them wherever you need to see. It's already started downloading. All right. And I have to do is you just click this button and show and finder or if you're on a PC show, showed the folder is probably your downloads folder. But anyway, just figured it help you out where these project files are, and you'll need those in order to get going in this course after that, then you're ready to take number two and then followed the number system that I have going through the course, and that's pretty much it. So I hope that helps you out in hopes she'd get hope. That helps you get started on the course or in the course. You know what I mean. Have a good one. 3. Getting started: in this video, we're going get everything set up for your browser. Now, I've already downloaded the course files, and that's very important. You should go and do that now if you haven't already. So if you see is dot zip file, then I have to do is double click on it. And there you go. It'll unzip the file or decompress it and I'm gonna move that into trash cause I already have one over here. And what I'm going to do is if you're on a PC and that didn't work for you can right click and then find the unzip option and you should be able to under bit. So you'll have basically what looks like two copies of the same thing. One compressed and one decompressed. We're on the breast. Let's go to Google Chrome and we're going to open this up and we're going to go to the index dot html and we're going to simply drag that into our chrome. And there we go. This is how we're going to complete this course. Everything could be done in a simple browser, but there will be some challenging bits in a minute and probably in our next video and I'll go ahead and get us there. So I'm gonna close this back out. I'm not gonna need it for a while, We will, but just not quite like this. So welcome to HTML training. The current page is index dot html, which it is, but it's a user path. It's coming from this boulder. It's not on a server. It's on Lee on this computer. Most servers load this file first, and that's the index dot html file some teaching you a little bit more advanced things right now, But I think it gives you you know, enough knowledge that when we go to a live server, you'll notice the difference of how everything changes, because right now I have to hit the reload button every time there was a change. So it's going go to the next page, and this is where I'll leave off for the next video. I'll see you there 4. (1) html intro: Okay, so this is where we left off in the last video. What is HTML? HTML stands for hypertext markup language. Technically, it is also not a programming language. It's more of like encoding messages for the browser, like chrome and safari. So that's what it's doing. It's actually encoding the message so that it knows where everything's laid out like this is a heading, and this is also heading. So technically, it's not a programming language because there is no logic to it. It's just more of, ah, long list of elements. Now the best way to describe HTML is the structure of a Web page. It's imagine it just being word like a word document and it taking nothing. No pictures, no, nothing like that. It was just all text. If you've ever written a paper and now you've got headings and subheadings and that's more like Microsoft Word. Well, guess what? That's kind of what HTM. O is for most sites. Until you add the pictures and the pretty CSS, nothing really makes it attractive. Like this right here is just a bunch of text. Now, how do we describe the HTML elements? They're called tags and so each one is a tag and we'll get into this. This is common overview, but HTML tags or elements tell the browser how to display the content, Same thing and word. You lay it out and it is a paragraph. This is heading. This is a table if you have those, and we have that as well. In html, HTML tags label pieces of content such as headings, paragraphs, tables and so on. An important note. Browsers do not display that HTML tags, and what I mean by that is they don't show you what the tags look like. That's an encoded message. Instead, browsers interpret HTML tags to render the content of the page, which is what we're seeing right here. If we right click in inspect, Element will see that everything is just, you know, encoded message. It's got brackets. On each side are alligators or whatever you wanna call them. So let's go to the next page, and that's where we leave off. I'll see in the next video 5. (2) Setup Intructions: in this video, we're going to cover the set up instructions, understanding html in haste to my five from the ground up. Now, if you want to check out my company and see what a website looks like with good CSS, then just simply go here and look, This is what CSS does to a website now. Without that, it looks something like this. And that's kind of the point. You want to get to a point where you can make stuff like this. And in my other course, you can do that. It's my bootstrap course. So when you get done with this one, I go check that one out. And thanks for let me do a little tangent there about my course and my company. Now let's get back to the essentials and less download Google Chrome. So we're gonna click this and it says google dot com slash chrome. So even if you don't have this installed, you can get it installed right here. Ah, highly recommend Google chrome for everything. All right, Next, we're going to download visual studio code, and this link will take you to the direct link in order to find windows which version always go 64 bit these days. So Windows, people on the left, Mac on the right. I will not be supporting Lennox, unfortunately, but you could still fall along and probably I wouldn't have a problem. But anyway, download your appropriate one. I've already done so and up is down. Learned again. So there we go. Alright. Once we get that downloaded and it's popping up over there, I get it. I am going to move this out of the way and make room for our visual studio code that already haven't installed. Gonna close the welcome. You don't need any of that right now and check this magic out. We will grab the HTML course files and just drag him over and drop him in. And that's perfect. Here's all our files. Now there are a couple of things we need to do. So let's go through our checklist. We've done that. So we've downloaded chrome. We've downloaded visual studio code and you can Paul's this video, by the way, any time you need to, don't feel like you have to follow along so quickly. And once you have visual studio code downloaded and installed, then you are good to go. You will want to put it in your applications folder. So, for your own A Mac, you'll want to put it in this folder right here. And that's where I have mine. So you'll just if it doesn't give you the option, install it. You can put it there among of editor developer Tools Folder. So whatever works for you, as long as you have your visual studio code, I recommend us all staying on the same page. So we have it downloaded. And now we need to add three extensions extensions. They changed the button, but it's normally in the same place. So if you're using a newer version the minor, an older version Munn this is where they use it. I'm gonna close the recommended, and here we can search for Intel a sense, and I'm going to make this bigger so you can see what's going on. So it has the basically the intel A sense for everything gives you all this nice drop down features when you're trying to type stuff in. This is a good extension. These were the ones that I use. You don't need sas right now, but I would recommend using the visual studio code icons. And so if you just search word in this box right here, you can find it pretty easy. So we'll try that one just to see, be as code. I can see it's already installed right here. You taken and click the install option like that. So let's go back and see all of ours. You also want the live server. Intelligence is optional, but the live server you definitely need, um, just as a backup, because you don't wanna have to continue to reload Google Crump. All right, so let's snap that to the right. Have a special program again, magnet. And I'm gonna use magnet on this one on the left. And there we go. Let's make that a little bigger for you. And it is a little long winded. Sorry about that. But there is a lot of set up to the beginning of this course. It should flow more naturally when we get to the rest of the course. I'll see there 6. (3) Start Here: in this video, we're going to continue where we left off, and that is our next page. So we're leaving to underscore set up diced email. You want to see what we're up to were right over here, and that's what the's course files are doing, except for their on their own path. So let's go ahead. And ah, good or next one. It's a start here, so let's start our live server. Let's actually choose the right one. Or let's just go for that to underscore set up anger. Live okay, and we'll go to the next page. Now, if you notice something here at this path, it gives you the file path. But this is what it would be like if it was on the server. And if we take this part out, was gone. Hit, delete and his inner. We go back to the beginning, making next page next page and next page, and here we are back and start here pretty cool. So that's what the server is doing. It's changing it from dragging it into a file to now are live server. So any time we make a change to like following those buttons to go away. Let's do that. Let's focus just on our our start here. So it's three underscore star underscore here and this were wrapped. So I'm gonna double click on this. You'll notice that will change from it's kind of slanted or a talent. So if you double click on it, it will leave that window up for you. Let's go ahead and comment this out and these air comments right here. So we're going to command slash and that is a, uh, also control slash on a computer. So it's right there by the shift button. So let's save this and reload this and there's nothing there. We totally air in control. That's pretty cool. So we're on the live server. But if you notice this, this didn't go away and this didn't go away because we didn't have HTML, so we weren't truly running. It was more like a a text file kind of, but it was still HTML. So let's just go ahead and stop talking about it and do html Colon five and enter, and that is called Emit. We're using a way to auto populate all this information, and that's what the created HTML five template is so I'm gonna cut that out, and I'm gonna put that up at the top. We created that HTML template. So now if we save and reload or page, we still don't have our buttons. But we have document now. This changed from start here. So let's change it to testing. And look at that. It changed. Now, if we were over here, it would have to reload. And you noticed there has not been any more changes for the same thing. That's pretty cool. So when I reload this, they're gone, and it still says the same thing, and our testing is there. So this is the difference between running from a file path and running it from a server. Now, let's do a hello world. So I'm gonna grab this Hello world down here. I'm gonna cut it out. I'm gonna put it up here. Let's uncommon this and do Hello, world taken. Type this out if you want to. You could totally say anything you want and that will show up instantly because they were using this live server down here where it's a go live. And if you notice testing hasn't really changed much And that's because we're only doing it from the far path. So we reloaded again. Air stuff. So that's why I like using this live server. I think we're gonna you get the picture and we can go and close this at any time. So any time you look and you see we're running on the server, you now know how it works. What's also do a hello world with headings, and we'll uncommon this one and save We can go back and just right. Hello, No, I and you can see the difference. And these were just some HTML tags that will learn in the future videos to come. And I'll on comment that one. It says This is HT Mill. It's pretty cool, kind of bland, but it's the foundation for everything, and what we're trying to get to is we want our buttons back so that we can go to the next page. So all I'm doing is to start your own template. So this is your own template. Html toe html, and then this stock type teacher tells the computer or the browser that it is to interpret this file as HTML. Now, if you noticed this comment does not show through, and that's because it is a comment. It's to leave all this stuff behind for us as developers. So we're gonna copy all that are cut all that and bring it down here. And I know this is going fast. It's pretty relatively simple once you get the hang of it. All amusing is some command shortcuts. So if you're on a computer, it's control. So control slash command slash tab that over a little bit. Bring that back to the front and then save that. And look, they're all our buttons or back. I had him hiding at the bottom the whole time. So this is number three. Start here, and this is to get you, you know, familiar with using HTML and each one of these files along the way, he's gonna have something a little different that we're gonna get into. So let's go to the next page, and we'll go through all of this together over the next couple videos. All right, I'll see you there 7. (4) explained: in this video. We're going to pick up where we left off, and that is in four. Underscore explained. I'm gonna close this explorer when No and double click to make sure we stay on this. Now, here we have the body tag is everything explained? All of this is on the left. So let's take it long bile on. This is what we have and how do we get it? We typed html colon five and it is an abbreviation for him. It to know we want an HTML five document populated right now by his inner bam. Same thing that we're looking at above, except for the one above has a lot of stuff in the body. And that is what you see here on the left. I don't want you to be confused as to what is going on. There's a lot to discuss here, and it made even take two videos. So let's go ahead and undo this or delete this cause we don't need it. We're gonna talk about our own project, appear which is what I had for you already. So this body has a lot of of data in here, so I'm gonna tryingto go down here and I can collapse a little bit, but it doesn't really make a difference because there's no real structure to the page and that's on purpose. I wanted to make it as simple as possible. I wanted it to just be about the body. So on the right. We have the doc type and it tells us exactly what type of file this is. And you noticed. There's comments down here. Don't worry about those. It's no big deal. Just focus on this. So we have a dock type of HTML. We have an HTML document that is in language English. That's what the Ian is for. So it's laying English and their ways toe. You know, you could put it French or whatever. There's different abbreviations for your HTML. If you're writing it that way for me and most of my students, it's English. So we're gonna leave that alone and we're gonna talk about the head. So all we're doing is if you notice we're just going through this line by line. But I put it over here in the body so that you could see it, and I encoded the message in such a way that see these brackets, they won't show up. It interprets it in the browser that it needs to be explained. You see, I'm saying so here we have this H one and it's got these angle brackets or less than and greater than brackets on the end. And that's HTML. And I'm telling my computer that I want this to interpret it as this symbol on the page. So that's all that is. It looks long and convoluted, but it's not a problem. So I'm going to do that and it goes way out there, so I'm gonna put the wrapping back on, and that's with all Z or options. E depends on if you're on a Mac or PC. So let's get going. Got a lot of discuss here, so we know what the doc type is. We know what HTML is. Let's collapse that body again and let's just study it over here. So the HTML tag is where you put all of your html c. I collapsed it there. That's all the HTML, So let's take it to the head. What's in the head cannot be seen on the browser are in the browser. It's metadata and information for the browser, and it says our title is four, Underscore explained. We contest that again, and it changed. Let's take that back and save it and put it back the way it waas. Now the head tag is the container for the metadata, just like the head and the body are all wrapped by the HTML tag. And then what is the Met attack? While the meta tag is very important, it's the malicious Read it. The metal element is used to specify which character set is used. Page description, not keywords. Author and other metadata. Metadata is used by the browser how to display content, me keywords or for search engines and then other Web services. So here's an example. This utf eight is what is used for 93% of the the world for Web traffic, and it means it encoded information for the browser or Web Traffic is in utf eight. So you set that right here. We're telling it utf eight now the next information would be keywords or descriptions or author. Who's the author now? This last one is the most important. It's what make your it's what makes everything responsive. When you get to CSS, it'll make more sense. But this view port content with device equals all that stuff is very specific for the device to make this responsive, so that's what that is. The width is determined by the device. Then the initial scale and zoom level are set toe one point. Oh, this is what happens to make us page responsive. And what I mean by that is, when I start wrapping it, the words start to wrap, and that's partly because it's made to be responsive. And that's the whole point of this. It's all HTML structure, but it still looks pretty plain, and it's not that pretty, but you have to learn to make a good foundation for your websites. Otherwise, you'll have problems down the road, so the body tag holds everything that the user will see. Whereas everything else is hidden from the user, the body is mostly where you where you will be working most of your time is not up here in the head. This is initial set up and keywords and metadata, four search engines and four you know, to tell the browser what you want to do when your body is where you lay out all of your paragraphs, your headings and such even heading threes and we'll get into all this main thing is on Juno what this stuff means. And if this video didn't help you, I recommend you just quickly read this over. And maybe it will help you a little better, Uh, understand what's going on. I'll see in the next video. Let's go ahead and click next, just for the heck of it. 8. (5) html basics overview: in this video, we will be picking up where we left off. If this looks unfamiliar to you or you forgot where we left off and you've been some time away, we're in html five basics. Overbey double click on that and collapsed the Explorer window. So here is the file. It's displayed on the left. If it's not, you can cancel that, closed the port and then go live again and you'll be caught up with us. So here we are. We're at HTML. Basics overview. We're going to stop on this page and talk a little bit about what's going on. This is an ordered list, and it has numbers, and it's going to be what we're going to cover in the next several videos. So we're going to cover the headings. We're gonna cover lists, ordered an un ordered lists. Ah, we're going to cover links images with all attributes, images with wits and heights, inland elements, quotes, single versus double tables. Those are pretty cool. All these things that we would build in our HTML without CSS. It'll basically look just like a word document, so to speak, without a lot of the formatting, So we'll cover formatting and in semantics forms, drop downs, entities and audio and video. There's some new tags for that. So over here on the right, this is everything that I've basically just covered. So, as you can see in the code we have and H one heading, which is this right here. And then we have our ordered list and we're gonna go to headings next and talk about those . So let's go and click the next page and let's talk about headings, I'll see you there. 9. (6) headings: in this video, we're going to pick up where we left off, and that is with six. Underscore headings dot html. So I'm gonna open it up in our file explorer over here. And if you forget how to launch this, you simply go to your port and if it says it's running, but you're you don't remember where it is, that's fine. We can start it again and it go live, and I will close the 1st 1 So this is where we're at. Everything should be set up and you should be good to go. So this collapse that and let's start right here online. 10. It says we have headings one through six to cover. So this is a church one. It is the biggest. I'm gonna take away this six, so we'll know I'll save that. And every time you see a change happen, there's a little circle appear and we'll talk about it. It basically just means they're changes that need to be saved. So after each line, I will save them with Commander Control s Let's go on, See the circle. Now that just means we need to save it. There are some changes So let's make some changes. H two in its lower case and it auto completes for us using emit in visual studio code. Not all text editors do that, and we just cyp headings to or actually let's make heading to heading one. There we go and let's type heading three and then heading for and you get the picture. This is basically all it is is different size headings to bring authority to your work, such as paragraphs for an article or anything like that. I know this is kind of redundant, but just stick with me heading six all right Now it looks a little small, and that is correct. Here is normal text size. So if you notice our text size is actually small is actually larger than are heading size. So that's probably not appropriate for bringing attention to this Other than the fact that this is bold, a little heavier. This is normal text, but it is bigger, so you probably won't at least a heading five. But there are times that you would want heading six in order to bring authority to something maybe minor, um, maybe bold in the terms and conditions or something along those lines. But anyway, this is one through six, and you have your biggest headings. So your headlines on your news article or paragraph for you or whatever it is you're building, this is what you would use. Pretty simple, huh? All right, so that's it for headings. It's really simple. And let's go on. Go on to the next page and we'll be talking about HTML lists and I'll see you there. 10. (7) Lists: in this video. We're going to go over HTML lists there, several of them, so we'll have to move quickly. We're in seven underscore lists. So let's bring that up closer File Explorer And this is role be doing our work. I'm going to use Magnet to make the right side bigger. And there we go. It looks a little, gives us a little more space. So I'm going to scroll down to line 16 which is going to start with this on ordered list right here. What types of lists can we come up with? Well, they're all pretty much the same, except for a few differences. Do you want it to be a Norden list, or do you want it to be an ordered list? Well, on a northward list can be in any order, meaning that I don't have to go 12345 in a specific order. So it's just bullet points or circles or various different things like that. So we have a new order list with list items, and we have ordered lists with list items. Now the only thing that's really differ is a definition list, and that is online. 30 and all of that goes together. And so it's a definition list with list items and what it is. You have a definition term in the definition data or item that you're talking about. And if I want to make it where I have a repeating item or say it's, you know, with sugar or something like that with sugar, I don't know coffee with sugar. So just to let you know, those are different things that you can have. I'll put it back to the way it was, and that's definition list. We won't use it very much. In fact, I haven't used it before. I'm sure you can come up with the use for it, but that is a definition list. Now, this is where the fun begins. We're gonna have part two, and this is where we will literally, What? I said, this is where the fun begins. So we're gonna highlight online 44 years, maybe a little different. But just find that horizontal rule and uncommon that. And you can quickly do that by holding control or command and the slash button. Save that. And now you'll see across the whole screen we have horizontal rule, and that's the separate everything. So this lists I style is type of one. Now this would be the default. As you can see here says, there's actually two default for ordered lists and we will select 52 to 48. Uncommon that. And there we go on ordered lists and that will be seen before. Yes, it is. But this type of one is what's interesting. So it has different types. That and that's the default. So we're gonna leave that alone. This is an ordered list or ol just to let you know. And here is one same thing. This is an ordered list, but it starts at 50 so this is the same exact text, but it starts at 50 because we tell it start equals 50 in quotes. Let's do a different one. All right, this one is a lower case. A. So a type of alphabet or a or B or C or D. Depends on where you want to start. This one. We're going to one comment, and it is of Type A, but this one's capital. So this one's capital if you want capital letters and this one is lower case If you want lower case, then this one appears starts at 50 and this one's the default. Its code to Roman numerals back down online, 72 through 76. On comment. That and it's type I So Roman numerals, capital letters. And this one is type lower case I, and that is the Roman numeral type of I take that away and save that it goes back to the default. All right, that is it for the ordered list. Let's go see what we have for the A Nordling list. So again we have on Line 88 horizontal rule. This is part three of the video. I'll probably keep it all together and keep it less confusing. All right, this list style type of disc is actually the default four ul. So let's uncommon this and see what we have have going on here. And look at that. It's this standard that we have appear. So all this style right there we can take it out, and it would be the exact same notice. I'm saving that in two different ways. All right, so let's see what this one actually has. This one is a circle. So 99 to 1 or three. And look at this circle is similar to bullet points, but they're not solid. They're just the outer edges of a circle. All right, let's check out this next one. That's who we have here, type of square. Now. I haven't used that before, but it is pretty cool. It's a type of square here, and so we have. If we take out this part, we can replace it with circle, and then it's back to circle or weaken. Just basically, take that out altogether. What was the default all disc? They call it a disk, so we have disc circle in square, and then what's the last one? This one's interesting. Nothing at all, but it is indented. So if we took the it says a type none, so it doesn't want any bullet points, but it still wants toe like organize your text in a list form. Then this would be perfect for you, and you can use an UN ordered list and it wouldn't populate. So that's the difference between ordered list, an unaltered list. I hope this gives you some clarity and some options as to what we can go over again. This is where we're gonna leave off and let's page to the next video links. I will see their 11. (8) Links: in this video, we're going to talk about HTML links, so we're on eight underscore links dot html Now, in case you didn't notice, we've been using links as buttons to go between pages. Let's talk about that more. So let's get a little more room for us. And right down here you'll see the HTML links to take us to the previous page in the next page. So I've been doing that the whole time. But let's teach you about them. So here will start with a a treff, and it's already highlighted. Just inner. We will air to the right and we'll close that one. And then let's put Xbox. I like Xbox. It's pretty cool. Your fan and PlayStation while you can put PlayStation and then another one is a H. Ref equals, and this time I tried to do it myself. And you see, it's not this clean as quick that a using, emit and then auto completed with him it. I once had seen it to the mix, and let's talk about this for a minute. These air in line elements, meaning they don't wrap to their own line. So let's make that a little clear. Make put a br right there. Okay, so this is a link with different text that's all this different. Now let's go to seen it. Or let's just type C seeing that dot com Now there's or their link is just like this, so we're gonna put it in just like it is actually copied. Https and www. Now let's go to xbox dot com And here we have xbox dot com. No, the only reason I did this was just to give us something to do other than just typing in the links. So I copied and pasted cause I know it could be a little boring staring at a plain white page for too long. So we shouldn't have Teoh do anything to simply click on the link. Refresh. Yeah, I've already been there. That's why they're purple. Otherwise they would be blue. Oh, no, it it took me out of the page I was in, but I don't want to do that. I wanted to open in a new tab. Let's go back. Let's add target. Underscore blamed. And that's what this That's what the difference between this link and this link and I'll leave those here, so you can use them as a reference. But check this out. So this one links to a new page, and if I want to go back, I just I can leave them both open. I can close this one now. Seen it still doesn't have that. So if I click on it, I'll be stuck there unless I back up right away and then right click and open in a new tab . Well, instead of having to do that, let's also add Target, too, this one. So underscore blank, and that's pretty much it. Anything that you wrap in the text or if this was an image or anything, that's all you have to do for a link. It's not that hard. It's actually pretty cool. It's easy to remember, and if you ever forget you just come here and look it up. I'll see in the next video 12. (9) Images: in this video, we're going to talk about images, so we're in nine underscore images dot html. Let's find the code and there it is, endless. Look right here in the middle. Have some commented out items and what we can do is let's start with just an image. So I have a rather large image. I'm gonna bring it in any way. So it's an I m. G. Then it s R C is the image path. So image. If you look back here, there's an image folder with some images in it. So we will say I am G slash And there were you. We want the original version and the reason we want the original version. So down here at the end, it says original and the copy the copyist smaller will do with that one in a minute. Let's go ahead and pick that one right there, okay, and we'll add some Ault text to it's called a sunset. So we just wanted to be a sunset, and then it's a self closing tag. So we just closed the tag and it doesn't need anything like this. Um, it's fine. It actually is a self closing tag. So here's the image, and if you look there, look at the scroll will. It's just huge Ego's all the way up all over the place, and it's like I believe 5000 pixels wide. I could be wrong, but I know it's rather large, so we need to bring that in. That's too much. And so we can put the width and there and let's put the wit at, say, 500. And there we go. It looks much better. Look, it's much more, Um, easy to see on a Web page is still rather large for, say, mobile, but for the website, it would be OK if you control the height as well as the the width, then you're gonna have some stretching. So let's go ahead and add that and as you see it stretches it out. It's not the natural ratio of that picture, so we're gonna leave that off, and that's why sometimes you'll see that people would just choose to use the width, and then our auto calculate what's best for the height. Now if we take and go load the other pitcher. So I was going to die AMG. If you notice emit completed that for us. I am G. And I'm gonna go to copy this time. And it's also the Sunset Belt text needs to be sensitive. All right, So sunset and this one. I had already, um, reduce the size of the picture before actually loading it. So in, although they're the same, I would prefer this one because it'll take less time to load on the web page than this one . This you do not need. You really will ever need a version of 5000 for a picture on the Internet. And that's why I did that. Those air, like proofs or prints, they're good enough toe print on a high DP. I type printer if you're gonna keep it and actually wanted a print out of it or see it in all of its glory. So that's what I did there. As you can see, some of the detail gets lost a little bit, actually, no, it's pretty much the same. Best I can tell. So there you go. That's how you do it. So I'm gonna take this one away. Actually, I'll just leave it for you as a reference, But what I want to do with the 2nd 1 Someone a wrap it in a link. So a eh, Trev? And let's get the Earl of for where I found it in its unspool ehsh dot com. We're just gonna copy that and put it right there and then we're going to take this a cut it out, bring it down here, and then we will tab that in that way, it's wrapping it. It looks nice and orderly, and when we go back to ours, we should see will save it. When we click on this, it'll take us to unspool, Ash. Now, that's not what we want to do. We wanted to actually here will comment this one out just for the heck of it. So that we know we're only dealing with one, and then we want it to target under scorer blank. So there we go that way. Still leaves up our existing page in the links section of this course. I'm sure you you looked over those and learned about the blank. That's pretty much it. I'm gonna add a b are just for the heck of it. There we go. All right, So that's it for images. I'll see you in the next lecture paragraphs. 13. (10) paragraphs: in this video we're going to cover Paragraphs were in 10 underscore paragraphs dot html. So let's bring up the file Close Explorer. And here we are. There's not much here other than our buttons and are heading for paragraphs. So let's go right Blue are commented out item. It's just there for reference for me, and all we have to do is create a paragraph and we can type lore. Um, and let's give a number of, say, 100. That's quite a bit, but we'll go with it now if you come over here. Here is the text and it's Laura. Memphis, Um, is just filler text, you know, teach you more about paragraphs and less about what the words actually mean. It's it's meant to be. They mock things up in photo shop and in articles in order to see how things are laid out. And that's all I really wanted to do so we can take in, come down here and we'll go to the next section and or the next paragraph brother, and we can let's do a smaller one. So let's do Florham. Ah, 50. Well, let's do 25 all right. And as you can see we have more paragraphs, but this time there's a space right here in between. If you look, there's a space here and there's a space mostly believe it's below. Here, let's doing inspect on this. So we have our HTM Nobody. We come in here in there's or paragraph, just like I thought, as some margin on the top and some margin on the bottom in order to separate it, That's pretty cool. So it has some space, and you can tell if he knew the box model is down here and it has 16 for the margin. That outer edge. All right, so we can go on and you can make a much lower, um, Epsom that you won't. I'm just gonna copy and base this one a couple times, and the space is not actually coming from me. It's coming from the tag itself. So I doom like this. It still has the space coming from the actual element. So this is the element, the paragraph tag, not the spaces that I'm adding here. I could do this and it wouldn't matter. So spaces air kind of weird, but this is how you do paragraphs in, uh, in visual studio code for HTML, and that's pretty much it. There's really not that much to it. I just wanted to show you that you can make pair graphs and kind of mock things up along the way and teach you the paragraph tag, the paragraph tags, just one of the simple tags that they make. All right, So that's it for this video. I'll see you in the next video. 14. (11) inline elements: in this video, we're going to cover in line elements. So we're on 11 under scorer Inland underscore elements dot html. Let's pick that up over here. Closed the File Explorer and let's talk about in line elements and what is an inland element? Well, in order to do that, you kind of have to understand dibs and paragraphs and spans. So let's break those down a div assembly a division or a area where he can put things so I can put did right here. That's the most common rapper element. I can just put Text Lord testing dibs Ford gives. Okay, you would expect that item to end, and then I could continue writing an image all fall in the same line. That is not what happens. So here we'll put this on the same line again. Just testing a div. Why did a good, then the next line? Well, this one's wrapped in Div, and it's a block level element. This is an in line element right here. All this text that were writing, we can wrap that in a span, and I'll put this at the end, and the only reason I'm putting it in a span is to keep it together. Now I can take this and I can put it in a div and in a wrap. And again Look, it missed one. There's only one space there, but I can add more spaces, but there aren't more spaces over here, so kind of interesting. You would think it would be more like a word processor, but it is not. It allows for single space, and we're good to go. I'm gonna undo that text that I added and leave it alone. And this is a span I could take that whole span. I can put it there and then that brings it in. Or the way that I, by removing this ban, it brings it there So I can add modifiers to the span for Onley this text such as, You know what? If I wanted it to be bold or strong or whatever we wanted to do, we can do that too, just these items right here because it is in line now if the word is right, if it's all wrapping, say there's a lot of text here and it's wrapping to multiple lines is still all in line. Now here's another block level elements. So this is a block level element. This is a in line element and this is a another block level elements. So let's take in at a paragraph. Florham, Let's do 15 an inner. Okay, so now we have some texts and Google translate trying to figure out what it is. It's just a bunch of Laura medicine. Now I'm gonna take this span and I can take this man and I can put it in a paragraph and it will do it lacked the same exact way as it did in a div. So basically, Div and paragraph are both block level elements. As you can see up with this here and I'll go to the next line, put it there and look what we get now with the Div. There is no margin given, so let's discount break this down a little bit. Here we have a div, but there is no margin. We have a span and it goes to the end. And if I go to the end of the span and I just start typing bunch of gibberish, it goes past. It's not wrapped in anything, but this is an in line element. So it's like, Yes, you're just adds Add on to the end and we'll keep it moving so we could do Laurel MIPs, um, on that one as well. But I think you get the point. It'll just wrap to the next line, and that's what will happen to the Div. So the Div in that span are kind of looking very similar unless you crack open the code and all that we did was right. Click and inspect to get this to come up. So here's our gibberish. It's not wrapped in anything. And then here is our paragraph, and you'll see that there's margin on the top in the bottom. And then we have another span, and that's in line elements and block level elements. So Dave is a block level meaning, Hey, here's a chunk of space. Write what you want to do, what you want to wrap whatever you won't in a div and you have a block level elements. Same thing with a paragraph. But the paragraph comes with margin or spacing around it to address that. Hey, I am a paragraph. So that's how it's a little bit different from a div Where is the dibs? Like I'm just here and then we have article and stuff like that. If you want, we can try out article, you know, article. It's down at the bottom, all selected. And let's do Laura Um ah, 25 and the article that is similar to a div, and it doesn't have any spacing or margin around the outside of it, and we can look and see it. Sure enough, when we see the article, there's no margin. They can add margin. But that's not what we're discussing here. Had mainly wanted to discuss inland versus block level elements, and you can see the span is not letting any items at the end with the article and on kind of speaking in riddles. But if you just pay attention spans like, Hey, I got some room, but they're like, Nah, I want to make my own block and that's an article that's a block level that's a block level , and that's a block level. So if you're trying to dissect something, just think about it in in line and block level elements, and that's it. What clothes this and go to the next item quotes. I'll see you there 15. (12) quotes: in this video, we're going to look at quotes. So we're in 12 Underscore quotes that HTML find it. And there we are. So we have a lot of quote items here. Mostly we just have a quote heading. Awesome text hears from Laura MIPs. Um, have you noticed this is a different piece of HTML? It's a que the element represents some phrasing content quoted from another source. So, yeah, if you ever want to know, you just hover over it. Now I'll bring up the MDM reference. So we need to actually at a space in there, because if you notice there is no space now when we add the quote tag to this specific area . So Ironman rocks like Army and the movie and Robert Downey Jr and all that good stuff. So Ironman rocks, and then it gives a quote quoted source from where it came. And so you had noticed. Oh, this is a direct quote, and then you could adds more stuff, Have you? Look, it skips it, but it actually has the quote markers, the proper quote markers. So it's just a quote that we found somewhere and we could put anonymous. You know or whatever you want to put. But that's what a quote tag is. It's just a que and that opens and closes. Now. If you need a block of text and then you'd have a heading of an article something like this , he could either do paragraph. Are you whatever you want to say? So this is the paragraph it probably needs to be in heading, but we'll leave it as it is. It's just there as a reference. Okay, let's change it to a heading just to be more appropriate and fitting. So let's say it's an H for there we go. That looks pretty good. Makes more sense. All right, heading of article. And I think it's build that room. Her dick. Cool. There we go. Okay, so we have, ah, block quote, opening and closing right here. And we have that over here. Let's do an inspector on this and see if it's adding yes. Adding a lot. It's adding some marginal side and the top so 40 on the sides and 16 on the top and the bottom. So, aside from the heading, there's some come from the heading to, but the to cancel themselves out, see how much this has about 21. So there's a nice sweet spot in there. Close that back out. And this one is coming from my website. So Bite says, education is the company that I run, and we do training videos and courses like what you're watching right now, So bite size, education dot com Check it out. So that's pretty much it about quotes and block quotes. You just have your quote tag and you have your block quote tag and you have to cite your source. And then in there you can reference that you cited your source, and that's just telling the browser where the source came from. So if it's a screen reader or anything like that, it should pick it up. All right, I'll see in the next video, which will be tables. See there 16. (13) tables: in this video we're going to talk about. Tables were in 13 underscore tables. Die Age Team L. Let's go and get that tables. And here you'll see we're in the tables file and down online. 17 starts our table so I can collapse the whole table, and that's it. It's all in one big encompassing block, which pretty goal. So let's expand it. And right away we see we have some styles on that. There's air inland styles, meaning they're right there on their You're not using styles from CSS or anything like that , these air right there on the element under table. So we've got width of 50% and text salon center. And that basically means these items air centered to give him a little better presentation or look, and then they're also this table is only taking up 50% of the window instead of going all the way across. We don't need that much space, but to prove it, I'll show you, and there we go. So that's what it's controlling in the center. You can take that away and do the same thing, is making them all left justified. So let's put it back like it was, and let's continue. So you wrap everything in a table down here, so you wrap everything in a table, and then what you have is your table rose. So we have a first row, second row in third row, and then you put everything in that row. So everything that goes in the road for the 1st 1 is first name. That's a table heading table, row, table heading, and we have three items. So that's the first name, the last name and the age. And then if you go to the next row, you have the table definition or data table data. And so it's Jill Smith and Cheese 50. And then Eve Jackson is 94 and that just gives you basically your table structure. You could have. We could repeat this just by copying this whole thing. The whole table row and you'll see it's repeated. But that's pretty much how it works that the tables air not that complicated. They just kind of bland and boring because this is just HTML. There is no CSS to make it, you know, it's a pretty colors, but we do have some CSS up here that is in the same file to give it that border, that black border. Because without this, this is what it looked like. So I did ads themselves to it in order to give it a little definition. And that's what CSS is. So that's just a glimpse of when you get there. So some things just look better President ID the way I have. Um, otherwise you can just create your own table and and go with it so you can have a play around with ease and see what you can create her. It's pretty simple. It's just a table that's about it. So let's see what we got next, formatting, I'll see there. 17. (14) formatting: in this video, we're going to cover formatting. We're in 14 underscore formatting dot html. Let's go grab it. All right, so here you'll see everything looks normal, and then we have our body where all of our stuff is located. We have our heading, and so we'll skip that since we know what heading is. Now we know what a B R is. It's a line break, and there's a lot of them right here. And that's just to send everything to the next line so we can clearly see it just like it is in our code. So the B tag and the strong tag are identical in the sense that they both make it bold or important. But be has been somewhat phased out, and the new norm is now the rapid and strong. And if you look up, this is kind of the old way, represents a span strong represents, important their birth representing, you know, emphasis on something with using a bold so it since it's important at serious or urgent. And then we have the I tag, which is being replaced by the emphasis and so you can see that things were kind of heading in a different direction. You have the one and then the replacement with one and then the replacement. And then we have marked text, and that's pretty interesting. It's almost like a highlighter just went across that in highlighted it. And normally you would need see SS to make that Ah, yellow. But it didn't and that's what's kind of cool about it. It's marked through HTML and then we have small text. Then we have delete, and then we have the I. N s or insertion or addition to And then we have the normal texts right beside the subtext are subscript normal text next to the superscript, and that's pretty much it for formatting. If you have any questions, just kind of play around with them and see what you get. We can go in here and add Let's try. The deleted text would just add some gibberish. Yep, And there you go. So not much to it. There's just another view. You can use them in any of your HTM. Oh, take care 18. (15) semantics: in this video, we're going to cover what it means to be a semantic Web site. We're in 15 underscore semantics and we'll go pick it up. And here we are. We're all in line 11. Let's find the end of this That goes right there, too. Into this section, I got a NCAA meant that. All right, let's take it a little bit at a time. What the heck is a semantic Web site, and should I build my website or websites the same way? A semantic Web site clearly describes to both the browser and the developer the meaning or purpose of each element? Here are some examples of non Samant semantic elements or tags a Divina span. These tags or elements tell us nothing about the content, and that's true. They don't. I don't know what a span is or DIV is, other than one's a block level elements. Other ones a in line element. If you taken those, if you've watched those videos, other than that, what is a semantic Web site or tag? Well, we have semantic tags such as forms and tables and articles and sections to be more descriptive than what we see here with the divine, the span, these air all clearly defined about the content they hold. So basically, yes, more semantic sections and articles. And hey, this is wrapped in code and stuff like that. And that's what gave it the text format that it did. Where's Devon Span? You don't have that. Let's bring out this horizontal rule with some more semantic items. All right, one comment that save it. And here are some items. So here's some examples of semantics, our semantic elements or tags. American muscle cars. I know what that's gonna be about. I love classic cars, but nothing is better than a fully restored American muscle car. Also like Italian sports cars. American muscle cars are nice, but nothing compares to an Italian sports car like a Ferrari or Lamborghini. Whatever you're envisioning the first time you heard that sentence. Okay, so I kind of know what's going on. We have sections and those sections hold paragraphs and headings, and that's exactly what we mean. We know that this is a section is holding something, and then we have the last but not least on article, and this is just some alarmism. But we have a section with an article which tells us, Oh, hey, there's this is an article. And when a robot crawler comes through or Google comes through, they'll be able to say, OK, I understand this website. It's got semantic tags that I need to pay attention to, like a section or an article when those there were their key words really matter instead of Oh, this is a foreign. Add those air. Less important, I'm going for the content so that I know who direct to the article. And so that's why it's good to have semantic Web sites. I'll see you in the next video. 19. (16) forms: in this video, we're going to talk about forms. We're in 16 underscore forms dot html and we're online 12 with the text area. What's cool about a text area is, although you say it's one size, you can make it whatever size you won't as an individual, no code required. But on the back end, it is set to a specific area. So I'm gonna reload, and that's what it looks like. Now you have four rows and 20 I guess for the columns you have an idea of main text and the name is main text area and then a placeholder text, which is right here, and we can change it to whatever we won't or take it away. And then we're going to skip a couple lines and we're gonna look at it input type of text. So we have a bunch of input fields here, but we have, um, with different types. So all these air inputs, but we have just different types. So this one's a type of text, so it allowed text in numbers, and the next one is a check box. So this one's of type check box I'm gonna check and unchecked this and then this one's new two. HTML. It's new as of HTML five, and that is of color, and it's a color picker, so you pick whatever color you won't. I can make it whatever color. I won't believe it. Black we can. Also, a new one is type of date, and it has a date picker in here. You can pick whatever date it is or select forward backward. I'm just gonna leave it alone. This one is for email and through JavaScript. You can detect that it can throw an error if there's not an actual email address. If it's not a valid email address at with the at symbol on all of that. So that's email. Then we have a file so type of file and I would load up a file and give them access to whatever filed that and uploaded. You would have to have all back in for that. But you can do it. The next one is hidden, and that's because there is no input. It's hidden. Take that off. We're add text and then a reload, but the field is not hidden anymore, so I go back to hidden and then we have number, so it will not take any letters. I'm typing and it won't. But it will take numbers, and this one will be like password. This one's a radio button. Now. Have you had multiple buttons? So let's just see what we have here. We'll do say something like this, and most they never. We don't want any password held, and then we have different radio buttons. They're all selected. There's way to make it select just one, and that's to put it in a form, all right, And then we have You are ill and I only accept the euro, and it doesn't check for any of that. It's just letting you know what it's for and tagging it, and it should be a euro. You have to do your job, script and stuff like that. Toe validate. It is your ill all right, part two. So those air inputs, then we have a little bit of different inputs. We have some inputs with a type of button and a value of button, and the value is what's actually being displayed on the button. So here's your little button. We have a submit button, then we have a reset button. And when you use these buttons and wrap them in forms like, say, I was two, I gotta input button of type radio, and that's the question over here. So yes or no, and see it's wrapped in a form, so it'll choose yes or no? Yes, to the question. And so you have your name, your value, the i D. Yes, I d no. And your labels. So those air all, uh, for a form And then we have the next one, which is an H four submitting a Fulham. We're not gonna actually submit it. Well, that's great. It's minute. We could do blah, blah, and then submit This page isn't working because it's not a page we have created. It's an action page dot PHP and we're not covering that. But I wanted you to see what would happen if we were using PHP or JavaScript or some language on the back end. It would take that submit form and give us some information that hey, Epsom it in my name or whatever, and that's pretty much it. You have your F name, your last name, and, uh, we have your method is to post and the action is the website and you can see here we have the labels and inputs so we can do just the inputs, and that's what we have. It counts as an input for the button as well. Hopefully this makes sense to you. We have our values and just study this. There's a lot going on on this page, but I recommend that you study this and kind of play around with it. He can go to some websites and learn more about the form actions, but this is pretty much it. There's not much to it. All the different types of forms are on this page, but I wanted you to see what all the form options are for building your informs with just straight hte email I'll see in the next video. 20. (17) dropdowns: in this video, we're going to be talking about drop downs. What are they? How can use them? Or maybe I've seen these before. Let's dive in Were on 17 underscored Drop down stage Team Ill. So describe her file and collapse. Our File Explorer and, well, let's go down to Lan 13. Here you will see where we have a form that is already laid out, and we have our select options. So anything in the select category is based on the name locations. So what are some locations? Well, we have three options. We can add more, but let's just start at the three that we have. We have a beach valley in the mountains. What school? So we have three options and then we have a type of submit. So what is that? Well, what's going on over here on the left is we have those three options and we pick one, and then it will submit it to some back in service. And it's not actually hooked up, but that's what it would be if you're just designing the HTML. Someone else is doing. The CSS and someone else was doing, say, the programming side of things. Well, then this is all you would have to do is you'd say where you can load it dynamically, which is pretty popular, too. Which means it would load from the server. But anyway, back to our example, we have beach, Bali and mountains, Mr Ah, the valley. And then we would hit submit. And if you notice it says locations equals two. Well, what about if I choose the beach or the mountains? It changes to 30 wow. Okay, So what's going on here? Well, here at the question mark, it's adding on additional parameters. And what it's saying is is okay. I want the beach. I changed. Maman. Forget the mountains. Forget the valley. I want to go to the beach. And so you say, I want to go to the beach. The name is the location. So let's try changing this. Let's just say testing. Get it? Testing 123 So Ah, Anyway, let's submit this in a change to do testing. So whatever you name, it is what will appear in the you are. L Now you would only want to do this if it was something that maybe like a page number So let's just say Page and the reason behind this is a rule. It's just hit. Submit. So we changed it to Page, and the reason behind this is that you don't. It's a security issue to do a type submit where it post directly to the U. R L. And this is outside the scope of the course. But I figured I would give you a little bit of a taste of what you're kind of getting into when you start doing these forms and and drop downs and stuff like that. So it's pretty cool. I'm gonna leave it with, um locations, so I'll change it back. That sounds kind of cool, but you can also change the value of these. You could change the value to beach if you actually needed it, so locations equal speech. Now the others will still say the same, so you have to make him consistent. And that's why I just made them 123 Well, that's pretty much it. We have select the name but that we won't in a form and then our button with the type of submit, and that's all it is to drop down. So you take just this and run it with your form minus the button if you just wanted to drop down. But it's best to have all this stuff together create as many of those as you would like, play around with it and try to learn something new. And then when you're ready, I'll see in the next video. 21. (18) entities: in this video, we're going to discuss entities. What are they and why do we need them? So we're in 18 underscore into these dot html. Open that up. Got quite a bit of code here, so let's just get to it. I have a little bit of CSS to style our borders around each cell and around the entire table, so that's just a little bit of work that I've done for you. Now here, you'll see a table has all of the information in it upto line 85. So we have the description, entity, name and the end of the number. And these are special things like the non breaking space in orderto add more spaces. Between these, I can just add a space and save it, and nothing has changed. But we can use these these characters or these entities to add more space so I can take that. Copy it, and then I could just add more and look, the space changed over here, So that's how you add more space between items on a Web page, or you can use things like spans and stuff like that. But what we really need is just one. So that's the non breaking space. There's another way to do it, and that is with a number. So with the hash and number, you can create more space. Let's see here if I get that right, see same thing. We're changing this field now, and we have two different ways to do the less than symbol. And that is the Lt apostrophe or the number 60. So these air things that you can find on the Internet and these air called entities and I've listed several common ones right now that's the greater than it's the number 60 Tuesday entity number. And as long as you have one or the other that generally would comply with the utf eight. And what I mean by that is it's just a reserved characters in HTML that must be replaced with character entities. So such as the spaces or anything that needs to, basically is a reserved item like yen or euros. Good luck getting those symbols, you know, just copied in. So let's go back down to where we were. We have the ampersand, which is the and symbol. We have the double quotation mark. We have the single quotation mark or apostrophe. We have since or no change in U. S currency. We have the pound toward the UK and yen for Japanese, our Japan's currency, the euro. We have copyright listens pretty common. You would put a copyright at the bottom of your page, and you can have the copyright symbol and will be year 2020 or whatever year it is for you . Um, and that's that's how you died. Your copyright. You know, you do something like this copyright and then say 2020. And if you look over here, that's what we have, and you can do it again with the text or with the number. I'll try it with the number now ends the same thing. And then we have last but not least, the registered trademark and all of these air entities. And there may be entities that you need that you'll have to look up. But these are the most common ones, and this is a great reference for you. Let's go to the next page and I'll see you in the next video. Check it out 22. (19) audio and video: in this video, we're going to talk about, well, video and audio and how it relates to HTML five. So we're in a 19 underscore video dot html. So here you'll find our audio components and our video components, and all they are is a special kind of tag for HTML five. I don't have an MP three, and I struggled to find one that was rolled to free, but all you would have to do is find one and then put your your l here, and this would come to life. And this is your audio without the whole video. So that's what the audio tag will bring you. Is this whole browser look, at least in chrome? That's what it will look like. And then over here in the video, I have certain sizes. So I have a width of 4 20 have a height of 3 15 and that gives me the perfect ratio for this particular video. It's just one I found online. It's for Google. It's an advertisement, and we're gonna watch it here in a second, and it's pretty cool because before HTML five, you'd have to build your own video or audio player So you have your audio controls and I can take away that controls if I want to. Si, but it takes away the whole thing. Now you can take away your controls for your video, but then how do you play your video? So we wanted to leave those alone and let's just play it pretty cool. All right, so that's a commercial 15 2nd commercial. But if you look, we can make it is big as the screen, because here is and you can just start and you can watch. And that's pretty cool. So that's why you want the user to be ableto have access to the controls, and then you have your source and you can change out your source to anything you want, and you can find out how to make the ratios work for you. And this is called type of video. Um, and then you tell it the MP four format. So just any time you're building something, use this as a reference point, and that's the whole reason that built this course. The course is a reference point for you, for all of the files and things together, create a great resource for ht male. And you shouldn't have to look anything up unless you really need to, because I tried to cover just about everything. So if you could do me a huge favor and leave a review for the course, then that I'll let others know that this is a good course to learn. HTML. 23. (20) project overview: congratulations. If you made it to this video, that means you have completed the course. But there's still one last thing to do. Nestor created project you've been following along, and you should have enough reference material to build a project of your own. Now I know it will not look beautiful because it doesn't have CSS. But build something with structure. Maybe it'll be a video and you'll link in a new video for us or you'll get the MP three working and you can bond. Resource is online, but try to use the resource is in this course in order to create a better experience for you. Just use whatever you confined and trade a form created video. Be resourceful and and then you show me what you got. So how do I do that well, and go back to school share, which you're probably still on right now, even though I'm not, and I'll go to my class, I'll get there quickly, and then here in the projects in Resource is section. You will be able to share your your projects and so you can add your projects and then share them with other students. What did you build. Show me what you build. And maybe you built something better than I have. Minor. Just project files to take you from one step to the other. But I'm really curious to see what you will create. Also here. The course files in case you you've misplaced them. Well, that's pretty much it for the course. Congratulations again on completing it. But still, I'd be happy to see your project, and we can talk there. Have a good one. 24. (21) project assistance: a real quick you probably working on a project by now. But I wanted to give you some additional assistance after I rewatched the video about the project overview, it wasn't really clear as to how to create that file. So to go and create the file that scroll up and we'll click this button right here says New file. And I have to do start typing. So let's let's call this 20 underscore project dot html Cool. Okay, let's go to Let's get emit to set up everything for us. That's HTML colon five and hit Enter, and now you should be off to the races, and you should be able to rename this to, you know, document or let's just call this project or my project and save that now in your follows, you won't have this. You'll have to create it. And in order to do that, you have to watch this video, so that's pretty much it. Once you go through and pick out whatever you want to add from the additional things. So if I want to go grab that audio, I can go grab the audio from here, put it on my page in my project. You can totally do that. What I want you to do is go through all of your stuff. And then once you get done, I'm gonna start my server over and there it is. So do some. Do something cool. Um, so that we can see it so we can all talk about it. Another is really not that much cool things. You can do a tags, but maybe you'll find a way. That's pretty much it for what you have to create and post. It's not really hard. It's just to get you in the practice of actually working through your problems in this course. And I want you to have a project to walk away with, even if it's something simple and that's it. Good luck out there and take out check out one of my other courses on, you know, using CSS and making it beautiful. You'll probably find it somewhere around my name. So take care, have a good one