Learn HTML - The Right Way | John Morris | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

31 Lessons (3h 39m)
    • 1. What Is HTML?

    • 2. Tags, Attributes and Elements

    • 3. File and Folder Structure and Naming Conventions

    • 4. Software and Tools

    • 5. Doctype Declaration

    • 6. The Basic Structure of a Web Page

    • 7. Meta Tags, Title and Links

    • 8. Heading Tags

    • 9. The Paragraph Tag

    • 10. Text Formatting Tags

    • 11. The Image Tag

    • 12. Anchor Tags

    • 13. Project #1: My First Web Page

    • 14. LIsts

    • 15. Tables

    • 16. Forms

    • 17. Entities and Symbols

    • 18. Address

    • 19. Project 2: Build an HTML Form and Data Table

    • 20. IDs and Classes

    • 21. Span and Div

    • 22. Header and Footer

    • 23. Nav, Section and Article

    • 24. Aside

    • 25. Time

    • 26. Abbreviation and Quote

    • 27. HTML5 Audio

    • 28. HTML5 Video

    • 29. Introduction to CSS and JavaScript (jQuery)

    • 30. Class Challenge

    • 31. Next Steps

  • --
  • 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

The Beginner's Guide to HTML is about helping you master HTML. It's more than just learning what to type (like a lot of courses). I want to go beyond and explain the concepts and the WHY behind them to give you a depth of understanding that a lot of courses leave out. I've been a web developer for over 14 years now and there's one truth I've constantly come back to: It's the fundamentals that matter.

And, HTML is the fundamental of fundamentals.

What you'll get in this course is an in-depth understanding of HTML, how to build web pages and a solid foundation for your future development or website-building career. You'll also get the confidence to know that you can do this. And, you'll get the excitement that comes with building your first web pages and seeing first-hand what you can create with code.

This course is for you if you're an absolute beginner and have never written a single line of code OR if you're an intermediate developer who's realized they need a good refresher on the fundamentals. 

Meet Your Teacher

Teacher Profile Image

John Morris

I help freelancers get clients.


Click here to start this class

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.

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. What Is HTML?: So what is HTML? Well, technically, H to mount stands for hypertext markup language. Important key word there is mark up, and what it actually is is a standardized system for creating Web pages. Because if you think about it, all the different websites that are out there, we need some sort of standard system that browsers can look at the code and be able to display a webpage. And that's what HTML gives us. And it is focused on the structure of a Web page. So HTML handles or deals with the structure. CSS deals with the presentation and the styling. And then JavaScript deals with sort of functions and functionality. Ah, animations, adding some dynamic elements to it. Ah, and so forth. So HTML uses tags to mark up a language. And that's why the market part of this is really the key part. So what exactly does that look like? Well, here's some example source code and what I want you to notice here. If you look, for example, at the tag that says title, you'll notice that all of these different these different elements thes different, sort of funny looking things are essentially tags that wrap around text. So, for example, you have title, then you have my first webpage, and then you have essentially slash title. So what this is is we are adding these little snippets of code to the text on a page to mark it up and tell the browser war certain things about how we want it to display this Web page. So when you're creating HTML a writing HTML, this is essentially what you're doing. You are marking up the text that you put on a page and giving the browser hints or instructions about how to render this particular Web page. And so if we look real quick at a sort of standard request, the way that it works is let's say you visit a Web page, for example, google dot com. Well, when you do that and you do that in your Web browser, your browser sort of does all of this both behind the scenes work to figure out when you type google dot com into your browser to figure out what computer it needs to connect to in order to display that Web page. And so it figures that out, and it actually creates a direct connection to that other computer. So when you're viewing a Web page browsing around a Web page or a website, you are actually communing communicating directly with another computer, that computer that you're communicating with that stores. The files for google dot com is called the Server, and you may have heard of, AH, term called a lamp stack or something like that Lamp actually stands for limits Apache, my sequin PHP and is probably the most common Web stack that's out there. And Lennox would be the operating system. And, of course, it's not the only one. You can have Windows operating systems for Web servers as well, but Lennox is probably the most common. Apache is, Ah, the Web server. What a Web server does is if you think about it, you are again directly connecting to another computer, and you are loading files. You're requesting files off of that computer. Normally, any computer to do that you would have toe have a user name and password to have some sort of account to be able to do that. But of course, when you have millions and millions of people visiting a Web page that's very cumbersome and you don't want to give random people that you don't know who they are, you wouldn't want to give them sort of user level access to your computer. And so what? Apache What a Web server software like Apache does is it handles those requests and the permissions and all that sort of thing in the processing of of code on the server side and so forth. It's sort of handles all of that so that we can have this Web where I can connect directly to Google dot coms, servers and be a below low, different Web pages and so forth. So Apache is Web server software that handles all that. My sequel, of course, is for storing data, and then PHP is a server side language that does code processing on that side. So again, when you request a Web page from, say, google dot com, the the Web server, Apache looks for that particular page. If it finds it, that figures out. Hey, do I need to do I need to do any code processing through PHP or some service side language ? It does all of that processing before ever sending anything back to your browser so when we talk about server side languages, what we're talking about our languages that are that where the code is processed by the server. And again, no PHP. My sequel, Python and a number of others that that are out there You probably heard of those are all considered server side languages. They're processed by the server and then the output. The result of that processing is what is sent back to the client. The client receives that, and that comes in the form of age to mouth CSS. JavaScript. Like what we looked at on the previous page. And so it is the browser that then looks at that code that the client received and figures out how to display that code. And so that is why HTML, CSS and JavaScript are cold client side languages because they're processed on the client side of the equation by the browser. Okay, so again, when we're writing, HTML were working on the client side. And ultimately, the bottom line is that as a developer, you are writing code that tells a Web browser exactly how to display a webpage in HTML is one of the languages that browsers understand. So you are telling a browser how to render a page when you write HTML, and ultimately that's what HTML is 2. Tags, Attributes and Elements: we've talked about HTML. It's a markup language, and we used tags to mark do the marking up smell. Let's talk about HTML tags and exactly what they are. So what, in HTML, tag is is a tag name surrounded by less than and greater than brackets? So you're gonna see example here of the body tag. You'll see a less than and a greater than sign, and you will see a body, the word body inside of that. So body is the name of the tags, and then we put it inside of these brackets to the note that it is an HTML tag. And, of course, different tags will have different names like, ah, body tag, a paragraph tag, an image tag, etcetera. Now, normally, HTML tags will consist of an opening and a closing tag like so. So you will have a tag with the less than and greater than sign the name of the tag inside of it. And then to close that tag, you will put a slash in front of the name of the tag. And so what this denotes to the browser tells the browser, Is that anything inside of these two tags? is marked up with this specific tag, and I want you to treat it a particular way based on whatever that tag is. Ah, and so inside here we're denoting that it is a paragraph tag. Now this. You know this whole especially coming to play when you're you're dealing with CSS because we can then target thes tags and our CSS mean and tell the browsers how to style specific tags we give. We give names to tags and so forth, but this is the basic structure of what N H most HTML tags will look like. Now there are exceptions. There are what are called avoid tags, and they're called void tags because they can't have any content inside of them. So sin. Tactically, there's no reason for them to close because there's no contents to put inside them anyway. So a really good example. A common example of that would be an image tech. This is the full image tag that you would use in your HTML. You'll notice inside of this we have a attributes which we'll talk about in a second, which is source, which tells the browser where to find the image we want to display, but you'll notice that there is no closing tag on. This is all just the opening tag, and that's all you'll put when you use this. HTML. You will not put a closing tag with the image tech that would be considered incorrect syntax. So this is what's called a void tag, and you will see some of these through throughout HTML as as you learn it now. One thing that you may see is something that's called a self closing tag, and these are really a leftover from X html. And if you're not familiar, X html was, ah, this flavor of H two melon and it still exists. But for a number of years, it was supposed to become the default html the they smell that we all know and love and uses to become the standard. And it was a mix of XML and HTML in the whole idea. Behind it was to make HTM l. E. A more strict language that followed strict standards that sort of fell apart. And like I said, eight x html still exists. But HTML five has come out and we no longer sort of follow those rules. But again. The self closing tags are a leftover from H X html and again, the image tax. An example of this and what you'll notice is that we have our image tags before, but on the closing bracket here we have a slash before that. And the reason that was done is because X XML is a strict language and required every tag to be closed. But as I just explained, HTML has avoid tags where you have certain tags that don't have any need for them to be close and so they don't have a closing tag for them. And so sort of the compromise and x html was water called thes self closing tags like this . Now for today's HTML, this is no longer necessary unless you're gonna go into X html and actually specifically right that sort of code. But for the normal sort of h smell, this is no longer necessary. However, you may see code out there that still has the Senate, or you may see coders out there who still use this and that will one give you a sign of how long they've been doing it? But it's sort of again, just a left left over of this x html. So something you don't need to use. But again, if you see it, don't get freaked out by it. You can simply remove that closing slash and use it like a normal HTML tag. All right, so let's talk about attributes so each smell tags can have attributes that further describe how the element should be displayed. And so the basic structure of the actual of attributes is as follows. So you have the name of the tag and then you'll have a space, and then you'll have the name of the attributes, an equal sign, and you could have double or single quotes. And then you will have the value of that attributes. So if we look at our image tag, this is actually good. A good example of that. You can see we have I m G, which is the name of our tag for image. Then we have SRC, which stands for source and then equals and my image dot j pegs. So what this does is it tells the browser for this image tag where you're going to find the image is at my image dot j pic now This is what's called a relative path. So the browser will look wherever whatever you are l you happen to be at. So if you're a google dot com slash about and then you put you were to put this image tagging here. The browser would look at google dot com slash about slash my image dot jpeg four That image file, Of course. You know, that may not be exactly how you want to structure your site so you can use what are called absolute. You are elsewhere. You actually put in the full http address of the image here. And when you get into CSS than that, of course changes a little bit, too. But again, the basic idea of the attributes is that you can add attributes that further tell the brow there how they should display this particular tag. Now, the last thing they want to talk about her, what it called elements. And so you may have heard me use this term element as we've talked about all this and an element is essentially the HTML tag and the content inside of it, so does the full sort of tag. We refer to these as elements. So if you can see an example here we have the H one, which is, Ah, header heading tag level one. So we have that opening and closing tag. We have our content inside of that. That full tag and content is referred to as an elements. When someone says element, this is technically what they're referring to, although you will find. And I am certainly guilty of this that people often refer to tags and elements a bit interchangeably. But it's important to understand what an element is again, especially when you start dealing with CSS, because when you target elements inside of CSS, that's something you'll hear. Ah, decent amount that generally is being said in the technical sense. And we're describing not only the tag but also the content inside of that tag. 3. File and Folder Structure and Naming Conventions: Now I want to talk about folder and file structure and naming conventions, because this will be important as you sort of go into this and making sure you have well organized code and well organized structure and makes easy little things a little bit easier to manage. And there are some sort of gouaches and pitfalls you gotta watch out for when it comes to naming your files and so forth. So first I want to talk about structural walk you through a typical, probably pretty common set up when it comes to your folder and file structure, and then we'll get into some of the naming conventions. So one of the things that you'll often heard referred to is something called The Root Folder. Now I'm gonna go ahead, name this route like this, But when someone refers to a root folder, they're not actually referring to a folder called Route like this. Instead, what they're referring to is, let's say this was our our project or this was our website, and inside of this, we would Then let's go ahead and open up this and will create a new folder, and we might call this say images Okay, so we have a structure here where we have a folder inside of another folder. Well, the folder that is all the way, sort of. At the bottom, it is the main one that every all the other files and folders air contained inside of is considered the Route folder. And oftentimes, when you upload to this to your site, this will actually be, say, your where your sort of root domain is. So if we rename this to, say, google dot com or something like this, you know what? What people? What is immediately loaded into that? That main section there is going to be sort of the root folder, and then you have all of your sub folders in sight of that. Okay, so we'll just call this my first web page like this and inside of that, then we can start talking. So that's our route full. Or now we can start talking about the folders that we're gonna have inside of that. And oftentimes what you'll see is you'll see one for images. You will see a another one for your CSS files and you'll see another one for your JavaScript files like this. This is a pretty common set up when it comes to a Web page that you have your images, you have your CSS and another folding every JavaScript in another. And then you would have some sort of new ah, document like this. And let's just call this index dot html. Okay, this would be a pretty common set up for a website now index dot html. I sort of a special file and the reason it is because whenever you have, you could have multiple files inside of here. Let's see what? Let's go ahead and create another one, and we'll call this about dot html right, and these would represent all of your different Web pages. Well, if you just go to say my first Web page, what is the You know you go to google dot com, you don't necessarily specify. You wanna go to google dot com slash index HTM Out. You just say google dot com. So what the Web browser does is it assumes if if no file is specified of no path has specified, it's going to just default to trying to display index dot html so index dot html is sort of the default file that we will be loaded for a folder. And that's true even of these sub folders like this we make. Come in here and we may create a a file called Excuse me, Go ahead and ah, ignore that. We'll go ahead and create a file called AH style dot CSS. All right, we may create a file like this, but that's not going to get the loaded by default if someone tries to go to my first webpage slash CSS. And so if we were to come in here and we were to create a new document called index dot html like this, that would still be the default file, even though it's our see CSS folder. If someone tries to browse this folder, they will get this index dot html file. Now that is actually best practice when we talk about building out our file and folder structure. Because if you don't have this index dot html file, oftentimes what will happen is the server will return. Display a list of all of the files inside of the folder that is clickable. Well, if you don't want someone a potential hacker seeing how all of your files are stored on your server than you wouldn't want them to be able to see that list. So adding this eight index html file and just leaving it blank is sort of a best practice for security when it comes to websites. Okay, so again, this is a pretty standard. I would say folder structure, have your images. You have your CSS, you have your job script and then your individual pages. Your home page, which would be indexed html. Your about page, your contact at HTML and so forth. Ah, would all be sort of right here in your root folder so that when someone goes to your website, they just have to go to your website dot com slash about dot html not slash you know the name of a folder, the name of another folder, then slash about HD amount. That would be sort of difficult to get to now. Another thing that you'll notice that I've sort of been doing as I've done this is you'll notice that I'm using all lower case and I'm using no spaces upper case. It sort of depends on the browser and so forth Onda set up. But if you use upper case. They're mostly case sensitive. You girls are mostly case sensitive. So if you had, for example, if we rename this to a capital about the age to my like this and someone typed in a lower case, they would get, ah, an air that they that that page couldn't be found. So it's best practice to And of course, having to remember that this is upper case and all that sort of thing is just extra that your site visitors are gonna have to do so. The standard is to keep everything lower case and also things like if we were do, let's go ahead and do a new new document here. If we were to do something like contact and than to a space, if I could spell here contact space like this Ah, yeah, it's even have one having trouble saving here, But contact space dot html Like this, um, that can that opens up. There's a potential for problems with this. So the way that you handle this, you don't want to do that. That is sort of a big no no. So the way that you handle this is either you put it all together like this, Or you can use underscores like this or you can use dashes like this. But we don't want toe have any spaces in our both our file names or are folder names. Your best bet is to keep these things as simple as possible because again, you have people often times probably people who maybe aren't as tech savvy who are trying to visit your website. And so the less they have to remember it up capitalized or put a dash or this that the other, the easier it is for them to get to be able to find stuff and easier it is gonna be you for you to remember. And most of the other sites that they're gonna visit are gonna be structured and have their names work this way. Ah, as well. So they're gonna be used to it. So again, all lower case, no spaces generally want to avoid special characters except for underscores ah, and dashes and things like that. So that is file and folder sort of structure and naming conventions and so forth 4. Software and Tools: last thing then, before we get into writing some actual code here, is talking about some of the code editors and tools out there that you can use for development. Now, by far the most common thing that I could ask whenever I do these classes and tutorials is what text editor, What software am I using? So I'm gonna tell you what I'm using, but it's probably not what I would recommend for you, especially if you're this is your first for sort of foray into coding. I'll show you what I started out using the very first piece of software I used all those years ago. So But to talk about what I'm using, what this is right here. What you're looking at is a software called Cloud nine. No, Cloud nine is what's called a cloud. I d e. A. D E stands for integrated development environment. And what integrated development environment tries to do is try to bring all of the stuff that you need for development under one roof or sort of one application. So as you can see it here, it says it lets you write, run and debug your code. In this case, of a cloud I d within just a browser. You also have desktop ideas like, for example, net beans, I think eclipses one as well. Where you these air actually software you download and install on your computer and again they try to bring all of it sort of under one roof and I, you know, And then the cloud version of that. Of course, a cloud idea is one that is hosted in the cloud. You don't have to download it. You just creating account. Sign into an account and you access it through your Web browser. I like these because no matter what computer I'm using, I can just simply log into my account and all of my code as I left. It is right there. I don't There's no sinking or any of that sort of thing. It's all just in one account, and I can access it from anywhere. I don't even have to access it from my own computer, so it's really handy in that sense, however again, if you're just starting out into coding, this could be a little bit sort of overkill. And it can probably make things a little bit harder because you're now trying to figure out this really robust piece of software along with learning the language when there is a lot simpler stuff out there that you can sort of start out on. And once you get sort of comfortable with coding and using the software than you can sort of upgrade into one of these now, if you do want to go the cloud I d route and you wanna just go all in. I personally right now. Don't think that I would recommend Cloud nine. I'm sort of in a unique position because I already have an account. You'll see we have this log in for existing Cloud nine customers. And so I'm logging into an interface that I'm familiar with that I've been using and I like the way it was before. But Cloud nine was bought out by Amazon, and now, in order to use it, you have to create ah, you know, an instance Ah ah ah Inside of their their whole system, I forget the name right off the top of my head, EEC two instance and all of this extra stuff that again, if you're just new to coating that in and of itself could be really, really difficult. So one that's out there, that might be a little simpler. That's a cloud I d is code anywhere. Um, it's a little bit more like what Cloud nine used to be. There's also clothed code envy. You could really just Google cloud I d and see a bunch of different options out there. And what I would suggest is just trying. The most of these are gonna have some sort of free option like this. So try the free option, mess around with a couple different ones and figure out which one you want. If you want to go to cloud I d d I d route. But what I would recommend to you, if you are absolutely brand new to this is actually a piece of software called Note pad Plus plus. And the reason is is because no pad plus plus is just sort of a code editor doesn't have all of that other stuff. Ah, inside of it. And it's actually really handy. Has Syntex highlighting you can has some useful stuff like you'll see right here you have the save, but then you see these multiple Save it actually will save every file that you have open has sort of some some find and replace and undo and things that are a little bit better than just sort of your standard no pad but aren't as complicated as a full i d. So if your brand new I would recommend something like this. There's also sublime Texas out there. There's brackets there, Adam. You know those air All all fine again. No pad plus plus is the one that I started out with. So that would be what I would recommend for you. It is a desktop software, so you download it, install it to your computer. Ah, and it works really, really well. The last thing that I want to talk about is perhaps you may have tried to do maybe mess with some PHP code and so forth before, and you'll have noticed that when you try to run that PHP code just in your browser, it doesn't render the PHP code. It actually just displays the code that you wrote in your code editor and the reason it does that goes back to what we talked about before. Between the difference between a server and a client side language. The service side language needs that server software it needs. Apache in needs. My sequel. It needs PHP. The rendering engine needs all that software installed to be able to render PHP code. So if you just try to open a PHP file in your browser, it's not gonna work. HTML, however, is different. So I'm gonna go ahead and hit edit with no pad plus plus here. And let's just put about me right here just like this. And as a matter of fact, let's do let's put a tag and we'll do about me. So the strong Tadic is basically to make this bold, and we save that. We can actually open this straight up inside of our browser and you'll see here are text here is actually bolted. So because HTML CSS and JavaScript, our client side languages, we don't need that Web server. We don't need that PHP rendering engine. We don't mean that my sequel database software. We can open these files directly in our browser like this now. Eventually, I would recommend that you get sort of a Web server emulator, because if we look at some of the path thing here. If we come down here, look at the girl. You will see that you were at file slash last see users. And so that could be. You know, when you get into certain parts of coating, that can be become a problem. But just for learning the basics of sort of HTML and CSS, you're generally going to be okay when it comes to Ah, that sort of thing. If you do want to download ah, a server emulator, you can use something called Wamp Server. So we got a lamp server dot com And what a piece of software like this is going to dio. Let's click over the English. What a piece of software like this is going to do is it's going to essentially allow you to emulate a server. Remember, we talked about client server. It's gonna allowed you to emulate that on your own computer, and it will install Apache will install my sequel to install PHP, and we'll sort of set everything up so that you can then run files as if you were running them on an actual remote server from a hosting company or whatever. So again, it allows you to emulate that environment. So ah, you don't need it for what we're gonna do here inside of this course. But if you do want to sort of get set up with something like this lamp servers and option, there's another one called Samp. There's one called ma'am up. And then, of course, most cloud ideas have this. This built right into them so you don't actually have toe even installed this software. They bring the the emulator and they bring the code editor sort of all under one roof again . That's Cloud I did specifically desktop I DS don't necessarily do that. So again, I know there's a lot out there at the end of the day. If you're all of this is super, super confusing to you. Download no pad plus plus and then just opened the files in your browser and start there. And then, as you get more comfortable with the coding part of thing, it's things and and so forth. Then you can think about maybe upgrading your software and trying some of this stuff 5. Doctype Declaration: The first thing we're gonna talk about then, as we get into coding, is the first thing that you should have inside of all of your Web pages, at least all of your html Ah, web pages. And that is the doc type. Now, before I get into that, just let me give you a little bit of heads up on structure. You can see I'm I'm using my cloud. I d here. Of course you can go ahead. And however you have your set up, maybe it's a full on your computer or whatever. You can do this same thing inside of there. But I have a folder called HTML and then inside of that, I have index dot h two most. We're gonna be sort of working primarily inside of this eight index dot html page for now. So I'm gonna go and close it up toe to give us a little bit more space. When we talk about a dock type, we put we have our opening bracket here and then an exclamation point. And again, why is it this way? I don't even necessarily know and I don't think it really even matters. It just is how it sort of came about. But the doc type sort of is what it sounds like. So you gonna right doc type, And then you're going to tell it what type of document it ISS. So, in this case, for HTML, we're just going to write HTML and we're going to close it, and that's it. Now, I would say 90% of the Web pages you build, that's what it's going to be, because with HTML five and the way things are now, you just have to tell the browser Hey, we're using html. It used to be again when we had x html and so forth you would have ah doc type declaration that looks something like this. So let me go ahead and drop this in here. You can see there's a lot more to this one. But essentially, it was saying, Hey, we're using HTML. But we're using this specific version html 4.1 And here is the where you can find sort of the the declaration for what that standard is supposed to be in on this case. This would be 4.1 strict, and there was also one which is probably the most common one. Back when I was learning how to code, which was the transitional one. And so this is 4.1 transitional. You could see its at loose dot DDT. So you may as your again looking at code and reviewing different code out there. You may see some of this. Most of this was again that that Trent when we were sort of looking at x html and we're gonna make the transition from html two x html. These things all cropped up. But because of the way all that went and sort of, we moved away from EXT. HTML again 90% of the time, I would say 99 probably 99.9% of the time. The wit Web pages you build are gonna be HTML documents. They're gonna be html five documents since the most current version. And so you're just gonna do doc type HTM. I like this, and that's all you really have to worry about. 6. The Basic Structure of a Web Page: Now let me get into the basic structure of a web page, and this is essentially how every web page that you're going to create when it comes HTML is going to be structured. So the first thing is what we already covered, which is the doc type here. This is gonna be first in every Web page. It needs to be first, and it needs to be in everywhere page. So just keep that in mind. And this doc type is not considered an HTML tag. It's considered a declaration. So it's not, actually ah html tag. So our first HTML tag is actually the HTML tag. So essentially, what's happening here is we're telling the browser Hey, this page is going to be an HTML page. And then now we're saying, Here's our HTML So all of your HTML code is gonna be contained inside of this html Tech, and then inside of this, you're gonna have to Maine to Maine tags. You have ahead tag, and you're gonna have a body tag. And this right here is sort of the basic structure of every Web page that you're going to build. Now. What is the head tag And what is the body tagged the head? Tech is essentially things that are ah, about the document or resource is you're going toe low like a style sheet or a JavaScript file, etcetera that are not going to be visually displayed on the actual page itself, whereas the body is where you're going to have all the things that people will actually see when they visit your page. So the head allows you to describe the document, and the body is where you actually build out the page. Okay, so an example of something that you might put in the head tag is what's called a title tag . And this gives this a title for the browser and other when you linked to its social media shares and so forth will often read this title. So we'll do my first Web page as the title tag, okay, and we'll save that. And then I'm gonna go ahead and and I come over to the browser and let me just sort of shrink this down so you can see. But you'll see up here we have my first Web page that displays that way because of that title tag that we just said So this is the primary place is going to be displayed, but also get if you share this page gets shared on, say, Facebook or Twitter, it's going to look to the title to get the name of the Web page. Okay, so that's what the title tag does. That's one example of the kind of information that you might put in. Ah, the head tag. Now, if we come to the body, I'll do and you'll notice on that page. There's there's no content, right? Even though we set the title tag, it doesn't show up anywhere in the visual display again. That's what the head is for Now. If we do an H one tag like this and we say my first, we'll just say Page So it's different like this, and now we should be able to see that over here, you see, it says my first page. And so again, the head is for stuff that describes the document. The body is for the actual visual display and again, doc type, opening it html tag your head section your body section and then closing HTML tag. This is the basic structure of virtually every HTML page that you're going to create 7. Meta Tags, Title and Links: Now let's dive a little bit further into the head section and talk about some of the common things that you'll put in this head section here. So we've already talked about one of them, and that is the title tag and again that defines the title of the document. And it's required in all HTML documents, and so that will show up in the browser tag. It will show up for the page when it's added to favourites. It will be the title for the page, and Sir genderen results Ah, and so forth. So that is the 1st 1 You can see this in text here. It's an opening and closing title tag, and then the ton, the title that you want for the Web page inside of those tax, another common one that you will see is a link tag. And so this looks like this will be something like Link, and then often this is for loading style sheets. So we'll do Rehl, which means relationship and will say that this is a style sheet because that's what it is . And then you will have a treff, which is the hyper leak reference, and that will be the link to your style Sheets sold. Just say, for example, style that CSS Okay. And so what that's going to do is is gonna tell the browser to load this resource and then that style sheet will be loaded in. And that style she will be applied to all of the tags that you have here now, another thing that you can do instead of loading the style sheet this way, although this isn't recommended, but just in case you run into this, but you can certainly do this, which is instead of loading a style, she you can actually create a style tag like this and put all of your CSS declarations inside of this style tag. Now again, that's not not recommended. Because then you would if you had multiple pages, you'd have toe copy that from each pay into each page. And then if you wanted to make a change, you'd have to go into each page and change that CSS code in every page. And if you had 100 pages, that would get really cumbersome. And so that's why instead you link it in like this, and now we can go to style open toe style dot CSS. Make our change there, and it will be applied to all of the pages where this style sheet is loaded in. But that is a link tag. That's another common one that you're going to see in the head section another common one or one that you'll definitely see our meta tags. And so there are sort of there could be a number of different meta tags that you might see . So a common one when I would sort of recommend that you sort of always include would be of Char set, which is the character set. So this is gonna tell, Ah, the browser. Which character set to use and UT F eight is sort of the most common thing that you're going to see out there. And so that just tells it the There's lots of different character sets out there that can be used in depending on languages and so forth. You know the different character sets can make sense, but UTF eight is sort of the most common one, and so you generally want to put this at the top of all of your Web pages, so that's one that you'll see another really common one and one that you wanna have has to do with responsive design and in the Dane age that we live in. That, of course, is a huge deal. And so this one is going to be we're gonna do meta and the name of it is going to be Vieux Port, and content is going to be equal to with. And you can really just sort of copy this and let me go ahead and close this so we don't run out of room here, but the content is gonna be with equals and then give me device with and then initial scale , and that is gonna be equal to one point. Oh, okay. And so, like I said, this is Ah, this is for responsive design and the View port tag of Vieux Port Element. Here it tells the browser how it should control the pages dimension and the scaling. So the with equals device with part that sets the width of the page and tells it to said it to the screen with of the device. So whatever devices using it, it's saying, make the width of the view port the same as the device. Now the reason that that it comes in a player, Why that matters is if you've ever been to a website where when you initially viewed it, it was really, really small. And then you could sort of zoom in with your fingers, and then it would zoom in closer and so forth. That would be a Web page that does not have this meta tag in it, because what the browser is trying to do is it sees that the width of the devices maybe 640 pixels or 720 pixels or whatever and the width of that's actually in the Web page is maybe 960 or something. It's bigger than what the devices, so it tries to shrink down the website to fit on the device. What this is telling it to do, essentially, is to not do that. Okay, now the initial scale parts. That's the initial zoom level. When the pages first loaded by the browser and so it's saying it, we want it to be 1.0, so we want essentially to be whatever it actually is. So what actually happens as a result of this is, if you don't have the the this view port tag in there, then the browser will try to manipulate and shrink and and mess with, ah, the size of your Web page, whereas if you have this in there is going to render it at the size that is specified by your style, she and so forth. And the reason we need that for a responsive design is because we are. We are calculating for, ah, the different view ports in the different screen sizes in our CSS code, so we don't want the browser messing with it. We wanted to just display it as it is, and then we will adjust in R V R CSS and media queries and other stuff that, um, we're not going to talk about now, but we will adjust it so essentially, for responsive design, you want to make sure and have this tag always be in there. That's that's really important. Now, some other meta tags that you might see that are probably less common here. You might see things like, uh, my have metta, and then description like this, um, name equals description, and then content would be something like This is my first webpage. Now, what this is supposed to do is essentially tell the browser. Hey, this is the description of this page. So and and then when search engines index this page, they might use this description. You can also add a Met attack for keywords. The author, uh, something like, you know, those air different ones that you could. And there you don't really see those as much because search engines tend to ignore those sorts of things. So I would say the most common sort Eager default head tag would be something like this. You'd have your character set to utf eight. You would have this meta your view port set so you can have responsive design. You'd have your title tag and you'd be linking in at a minimum of style sheet, maybe a couple style sheets, maybe a JavaScript file or two as well. But this would be sort of the minimum things that you would have inside of your head Tech 8. Heading Tags: next, we're going to talk about the heading tag, and you actually will see, we've already done one here. This is a heading level one, but they're actually you could do up to six different levels, and I'm gonna just sort of dropped this in here. Real quick is it's repetitive, but you can see we have the six different heading tags. They are the letter h and then whatever level of tag you have the opening tag. You have the closing tag and you have, you know, 1234561 denotes the most important. And then the on down the list to is the next important three is the next important and so forth. And if we take a look at this or run this back up here and we'll go to courses slash each to Mel, you can see that by default. These actually have their own size. I haven't applied any style to this. The browser is doing all of this based off of what kind of tag it iss. So heading being the most important, it's the largest heading. They're heading level one, heading level six, being the least important. It is the smallest now heading tags are important because search engines sort of used them to look at the structure and the content of your Web pages. Users will use them, and it helps them to sort of visually move around and understand your Web page. And so it's important to use headings to show your document structure and give both search engines and users hints about how they should be viewing and looking at your Web pages. So headings are important. Oftentimes what you'll see, for example, is that the main let's say, take a blogger page, for example, the title of that particular article or that blawg post will be in an H one tag. And then any subheadings inside of that article will be in an H three tag often and then sidebar elements. So if you have a sidebar, the title of the sidebar, uh, each sort of element will often be in H three tags. So 8 to 1 and I would say h three are off are the tags you'll probably used most often, But again, you can sort of use these, however, to do no and and mess with the structure of your site. and again you can sort of see the default. Ah, the default sizing that goes on here. Now you can change the sizing by adding and attributes. Style of style is an attributes, and you can This is a little bit of CSS, so I don't want to get into heavy into it. But it's pretty simple. So we could do font size and we could do, say, 100 pixels here. Okay, so this is an attribute called Style, and then inside of that, we're putting CSS and we're saying we want the flaunt size to now be 100 pixels instead of whatever the fault is. And if we reload that, we now see that this heading tag is a lot bigger so you can override the default styling of the default sizing that comes with ease heading tags. But again, by default, they're gonna sort of have their own and be structured this particular way 9. The Paragraph Tag: The next tag that I want to talk about is the paragraph tag. So let's go ahead and get rid of some of these heading tags here. And let's change this heading 12 my first Web page, and then we will create our paragraph tags and they're essentially our brackets with the P tag inside of them. And you can see we have the opening and closing there, and we'll just say, This is a paragraph. And so this does essentially what it says it does. It defines a paragraph now, a lot of this. What it comes down to these different tags is it comes down to default styling, and it comes down to being able to target it with CSS. So if we put these two paragraphs like this and we refresh this, you notice that in between here there's some space. And if we inspect this and we look at our paragraph tag here, you can see it has webbed kip. Margin before is one M Web kit margin after is one m. What that's telling us is, that is the default styling that this browser gives to paragraph tags, whereas if we look at the H one, you can see the font size is too m the Web kit margin before his 0.67 m. The font way is bold. This is all the fault, the fault styling. We have added no styling. This is the styling that the browser itself gives to thes different tags. So a lot of times the difference between making a certain chunk of text and H one tag versus a paragraph tag is the default styling that you want and then and what we sort of talked about before, which is structure having some visual structure to your page. So again, if this were a blawg post, you know you would have the title be the H one tags, what looks like a title. And then you would have the paragraph Texan here B paragraph text. So it it looks like it is actual paragraph text. So some of this stuff is you know it's not. There's nothing sort of earth shattering about why we use a P tag and so forth. A lot of times it just comes down to default styling, and then when you get into doing CSS, you can target an H one tag differently than you would target, say, a P tag. You can have certain CSS that's reserved for and heading Level one versus You can have certain CSS. That's for your paragraph tag or for an image tag or for a heading level three, etcetera. So, again, that's what a lot of this comes down to is just that default, styling and so forth. One thing that I'll sort of throw in here is we also have what's called a break tag and what a break tag does. If we look at this, you'll notice that between paragraphs we have this space. But when I use a break tag, it puts it right below. So a break tag is essentially a single line break, whereas if a paragraph tag is almost like a double line break. So again, if we sort of look at this and we look at our paragraph tag and inside of that we have our break tag here, it doesn't have any sort of default styling on it, so it's not gonna add that margin before and after anything like that. All it's going to do is just break this text down to the next line like that. So that sort of related to a paragraph tag, Which is why I wanted to talk about it here. But you can see the difference in the default styling for the different tags. And more often than not, I mean, there's probably some situations where this isn't 100% true, but most of the content that you're gonna have on a Web page, you're gonna wanna have it inside of, ah, heading tag or a paragraph tag or a list tag or a SPAN tax, some sort of tag so that that text can be has default styling applied to it, and then it can also be targeted via CSS. 10. Text Formatting Tags: next. I want to talk about a series of tags and these air really sort of formatting text formatting tag. So there's sort of two main ones we're gonna go over and then we'll talk about 1/3 that you might see floating around out there. So the 1st 1 is for bolding text now the way that you want to do that. So let's say we wanna have this parrot word paragraph Be bold ID. We would use the the tags strong like this. And so this is to indicate some sort of importance. But the way that it ultimately does that ah, inside of the browser is to make it bold like this so we can see that that is bolted. So that's bolding text. Now, one thing that you might see is something like this was the be like this and you'll notice the effect is the same, but sort of in modern Web design and Web development, we've moved away from using just the B tag like this and using this strong element like that. So if you want a bold something, use the strong tag another one that you'll see that you might want to use is the it's called the emphasis tag. So it's e m and e m essentially makes the text italics. So if we we refresh this you see, we get a south italicized text Now, just like with bolding, we we have ah, sort of an old school counterpart. So something you might see out there is something like this, which is I for italics text, and again you'll see that the effect is the same. But we have again in modern web design, develop, move to emphasise or am like this. It's really just about being semantic instead of talking about and what the text effect is . We're talking more giving it, ah, sort of actual more meaning than that again, we don't have to sort of get into all of that right now. But again, these are things that you're gonna see out there if you want a bold text. If you want toe italicize text, you can use strong and m another one that you might see out there. Go ahead and copy this. Another one that you might see out there is This one is you and what this will dio and I actually sort of wonder if it'll still do it because we moved away from this, but it does. So this is underlying text, and this is something that you will see out there. Ah, you may see out there, but really highly recommended not to use. Instead, what you would do is something like, uh, this. Now, this seems a little bit ah, cumbersome to do this in line like this. But if you imagine instead of doing it in a span like this, and you want something to be underlined, you know, for example, inside of bootstrap, you know, you could you could add, ah, tag. Just a simple tag to with a class on it that would add the underlying to it. But it's it's recommended to do it this way at this point, to actually use CSS to do underlining instead of of tags like this. So but again, like I said, you may see that you tag out there floating around. That's what it is. Um, so so you sort of know what that is? So those are some of the basic, probably the most common, um, most common formatting tags that you'll see out there. You do have some other one. So, for example, you have, ah, something like this small. So this will actually create text that is smaller than what sort of the default paragraph text is. Ah, so you can see that that is a little bit smaller. Ah, you will see, Uh, you might see something like sub, and so this is gonna be a sub script. And of course, it has its counterpart, which is superscript. So do this. And so you can use these out there as well again. Ah, lot of this stuff is not gonna be super super common. But these are some of the different tags that you might ah, find out there. So again, those air some basic formatting tags that you can use. 11. The Image Tag: All right, Now let's talk about image tags and this is where we started. Started getting a little bit more fun stuff here. So I'm gonna actually get rid of most of this text here. And now we're gonna insert an image tag right below this. This heading tech. So as I've sort of describe before, image tagging, I am G. And it doesn't close, and we need to specify a source. Okay, so we need to again specify where the actual image tagged that we want to use is. So what I'm gonna do is I'm going to upload an image. So go over here to work. Space will sort of follow. Our conventions will create a new folder called Images Like This. And then I will take this image that I have on my computer. I will just put it over here in this image is tagging. And let me just make this a little bit easier for us to work with. Well, just to my image dot PNG like this. And so in order to to reference this now, we again we talked about relative you RL's versus ah, versus absolute you URLs. So you know, if we want to to reference this weaken Do images slash my image dot PNG like this. Okay. And you see that that image is dropped into into our Ah, our page here. Now, the problem with this is this is sort of works because we're in index dot html. And so the way the browsers is sort essentially looking at this, is it saying, OK, you're in index dot html and you're looking for my images slash my image. So I'm just going to see if there's an images folder on the same level is index dot each amount. Oh, there is. And does that folder contain my image? So it does now, you know, if I were to if we were to just sort of change this up Ah, somehow, if index dot html was to be further down somewhere in the file structure than this wouldn't work necessarily this exact way. So one thing that you might want to do is you might want to use an actual absolute you, earl like this. So we would actually copy the URL of our website, and we would drop it in here like this and let me put a slash there. So in my case, because I'm on a death server have this crazy long U R l But it be your girl, and there would be the path to your image like this. And if we refresh that, you noticed the image still shows up. So a relative your l Onley works if your if your site is structured in particular way where they can work Absolute Yarl's were sort of always work. We can put this image wherever, and then we can just specify the absolute you are l to it, and it'll always find it as long as it where we say it is, actually where we say it is. So the recommended thing to do here is to use absolute girls like this to to make sure that , um, you specify it explicitly. So that base you don't have anything that crops up that you're you're not expecting. Okay, so again, we're just giving it the URL where that image is uploaded and this could be on site or off site. Okay, so you could have a cdn where you store your images, or you could store them on Amazon s three and reference them from there so it could. You could technically reference A UL from somebody else's website, although that's called hot linking. And that's sort of a big no no, and a lot of sites protect against that. They don't let you do that because they don't want you loading images from their website, and that actually uses up. Their resource is so that's a whole nother thing. But for our purposes, using the explicit Absolutely Earl is the way to go. And then the last thing here is always want to include an all tag like this. And what the all tag does is if for some reason, the image can't be displayed than this text will be displayed in instead. So we'll say something like example, source code and and different browsers handle it different, uh, different ways. This is actually a sort of an internal browser for this I. D. So I actually have no idea how it handles it, so we'll see here. But here you go. You see, you have the broken image and it says example source code, so that it can still be seen. Also, screen readers and so forth will use this. So for accessibility Ah, for people who need that sort of thing. You always want to include that all tag and make that all tag descriptive so that you know , if someone is reading this with a screen reader, no, because they're not able to see it themselves than when the screen reader reads this all tag it actually describes is descriptive about what that particular picture is and so forth , and it actually is useful to them. So that is your image tag again, you know, as as you'll notice Here, let me go in, close this up. I don't have the slash. At the end of it, I don't have a closing image. I don't have something like this. That is an improper syntax. You don't need to do that. You should not do that. Ah, I don't have the HTML or X html sort of slash like this. It is just the opening tag called a void tag. We have the source, which is the specific your l that we want a load we have on attribute called Ault Ah for displaying. And if we can't loaded or for screen readers and so forth. And of course, you can add other attributes in here as well, like style. We could style this with CSS and and so forth, but that is the image tag and how it works. 12. Anchor Tags: next, let's talk about hyperlinks. So hyperlinks let you link to other Web pages on another side or within your own site and so forth. And I've often times you're going to link them to actual text, So we'll go inside our paragraph tag. Here, let me pull this back up real quick cause we're gonna I need to take a look at this, but we'll do courses. So I reached him out. Okay, so let's say we have This is a paragraph and then we'll say, This is a hyperlink. Now the hyperlink is denote ID with the A tag. Now that may seem a little bit confusing, but this is technically called an anchor, and we'll we'll talk about anchors sort of towards the end of this. Um, let me scoot this over just a little, but it's it's technically called an anchor tag, so that's why it's an A. So with the anchor tag, the the attribute that we pretty much have to specify except in certain situations, is an eight ref, which is hyperlink reference. So this is the girl that we want to link to. So here we'll just do w w dot google dot com. Okay, so we've wrapped the word hyperlink in this anchor tag. We've specified the eight ref, which is google dot com, and this again needs to be sort of a full u R l here for this to work. And if we refresh this, you'll see Now again, this has the default styling. It's blue. It's underlined. If we click that, then ah, has may not go just because of the way this works. Let me open this in a new tab, okay? And so it goes to Google here. Okay, so that's what a hyper link does. It's really pretty straightforward. The attributes you need to go along with it. Is that a draft and you can link toe anywhere. Basically any u r l you want with a link tag. Now, I talked about these as anchor tag. Another thing that you can do. Let me. So let me go ahead and see if there's a way that I can easily show you this. So let me go like this. And actually, let's go get some Lauren Ipsum Soul do Laura. Um, Ipsum, Just to give us a little bit of space on our page years will do five paragraphs and will generate. Generate that and then go ahead and copy this, and then we will come back over here. I'm gonna close this up for just a sec so we can see what's going on here, and we'll get rid of all of this. We'll start dropping this in, and I'm gonna sort of put these all in anchor tags here. All right? And last one is up here. Okay, so we've got essentially five paragraphs. We've taken this Lauren Gypsum, and we've wrapped it in in these thes paragraph tags and that will give us some space that we can then look at and on our page and show you how anchor tags can work. All right, so we cleaned up our code here and now if we go back and we preview and we'll go to courses , so I see HTML. So you can see now we have this image, and we've got sort of five well defined paragraph tags. Ah, here. And looks like we don't have enough to create a scroll bar yet. So let me just copy all of this quick and we'll put five more in there, so that should give us something that we can work with here. All right, so now we've got 10 of these. You can see now we can actually scroll here, so let's go ahead and let's do, actually, let's, um let's create a new anchor tag here, and we're going to do a treff. But now we're going to do, um, just just call it last. Something like this, and we'll say, linked to last. And then down here in this paragraph tag, we're going to create an anchor and were, Say, a name equals last like this, and we're going to just leave it blank like that, and we can actually bring this back up here. All right, So if we refresh this, you can see we have this link toe last we click that you'll notice I scrolled down here automatically when I click that so I go like that. That is actually an anchor tag and what it does with in this sense. So we've specified the name of the anchor here, and we've put it as the last paragraph here. And then we have linked to that using the eight ref and pound last. Okay, so that's another thing that you can do with anchor tags is actually create anchors within your pages so you can create a sort of internal navigation within your pages. Ah, this also, I'm actually not sure if it'll work on a paragraph tag or not. So we'll just try this. You can do this with you. Don't necessarily need to have this anchor tag here. You can also do with if you specify an I d of an element. So let me refresh this real quick. See if this works on a paragraph tag. Yes. So I've specified an I d of last like this, and I'm linking to the that pound sign and then last here. So it'll link to that idea as well. So you can add this I d attributes to any element. And then you can link to that using your anchor tag as well. So I know that's not the sort of the normal stuff you think of when you think of hyperlinks and so forth. But we're talking about the anchor tag, and this is one of the things that you can do with the anchor tag as well 13. Project #1: My First Web Page: Now let's get our feet wet with, ah little code that's actually build a page and sort of use everything or most of stuff that we've talked about up to this point. So I'm just gonna build this Web page you can follow along with me, um, as we go through this. So first thing we need to start off with is our doc type. And so we'll do our doc type declaration, and we'll do HTML like this, and then we'll do our opening HTML tag, and then we will do our head, and then we will do our body. Okay, So again, this is the basic structure. Basically every Web page that you're going to create, created title tag and say my first web page like this, and then we'll do Our Met attacks are going to do meta char set equals utf dash eight like this, and then we need to do we need to account for our responsiveness. So we're going to do, um, meta name equals Vieux Port. And then we're going to do content. I want to do equals and with equals device with, like this and then comma. And then initial initial scale equals zero like that. And that's all inside of that. That same meta tag. All right, well, close up the meta tag like that. Um, we're not going to have any links inside of this. We don't have any style sheet or any of that stuff that that we're going to deal with so well, so sort of leave the head like that, and then we're gonna come into our body, and we are going to do our H one tax. We're gonna do my going to H one, and we're gonna do my first web page, all right? And under that, we can put this paragraph tag, and it says I am learning HTML and I am excited. All right, so that gives us our sort of our basic structure. We've got our title we've got are heading. We've got our first paragraph tag. Then we can come down here and actually, why don't we in between here, we'll put an image tag, source equals, and I'm gonna just copy my girl here. You'll, of course, want to copy or use whatever yours is. So a copy in are you Earl? And then we'll do slash and images and it was my imaged a PNG, I believe. And then we'll do all text equals my first Web page like that and close our image tag. Okay, we save that. Now we've got our image showing up there and then let's do, say, NH three tag that says, Um, what have I learned so far? All right. And so we'll say we'll do a paragraph tag and we'll do. I've learned we'll do strong how to bold text and we will do and and they will do E M. How to emphasize text like this. Um, so that's bold and emphasis. And let's come over here and we'll create a new heading here and we'll do another h three and I will just say, What about hyperlinks like this? And then in our paragraph tag, we will say he up. I learned that to for our see example, and we'll say a anchor. A treff equals and will say, http w w dot google dot com We'll close our anchor tag like this and say google dot com. Okay, and so we have our closing anchor. We have our closing paragraph. Got a couple H threes in there as well so if we refresh this, we have my first webpage. We have an image. I'm learning age. Someone excited? What have we learned so far? I've learned how to bowl texts and how to emphasize texts. What about hyperlinks? Yep. Learned that to see. Example, If we click this opening in a new tab, we get google dot com here. Okay. So I mean that. Yeah, that's a That's a pretty straightforward deal in terms of building a web page, but these were the building blocks of HTML. These were the things that you're going to do over and over and over again. So it is stuff you gotta learn. And this is your first webpage. So if you've never built a web page before, I hope you're excited about this, because I mean, heck, this took me when I was learning way back in the day. This took me a long time to learn how to do properly. And you've learned all of that. Now, up to this point in whatever amount of time it's taking you to go through this So I hope you're excited about this. This is, of course, just a foundation. We're gonna continue to build on this throughout the course. But this is this is your first real Web page, structured properly with some text and some images and links and so forth in it. So again, I hope you're excited about this, and Ah, well, keep moving forward from here. 14. LIsts: all right. Now let's talk about lists, and there's a couple different kinds of list that you can make. You can create a new ordered less. You can create ordered lists, and you can create description lists or definition list. So let's go ahead and run through the So a nordeste starts off with a tag like this. You l ul. For a new ordered list, you'll see mine. My editor automatically closes it like that. So it's just like any sort of regular tag where you would have an opening and a closing tags like this and then inside of this, we have to create our list items. So the UL creates the the list as a whole and then each l. I like this creates a list item, and this is going to be for both ordered and on order list. This is gonna be how it works. So inside of this, then you can just put whatever you want, So you could put let's just do number one and then we can create another one and we can do number two and we'll finish up with the 3rd 1 Number three, and we'll refresh over here and that, as you can see, creates, are leveled. Oh, no odor list. Now what makes it a new ordered is that we have dots over here, not numbers. Okay, so that's simple on ordered list. Now, if we want to do an ordered list, it is probably what you would guest instead of UL for a nerd list. It's ol for ah, ordered lists. And again, we just can put in. Ah, it's just do option one. We can put in our ally statements our ally tags here, Option two and option three. And if we take a look at that, then you will see that we have those ordered. So they are number So And that's the difference between a new ordered and ordered lists, so pretty straightforward there you create them. Similarly, description lists are a little bit different. This is something that was introduced in HTML five, and these allow you to create list that have a little bit more detail with them. So, in order to start one of these that the tag, the parent tag, is D. L like this. So for description, lists and equip began its opening and closing tag. But now, inside of here. Instead of having just list items, we can actually have to defer items. So the 1st 1 is a d t. This is for the title, so we can do title here and then we can do D D. And this is for the description. So we can do description goes here and and actually let's just go ahead and make one more like this so we can do Title two goes here and description, too. I was here. All right, So if we take a look at this, then what we get is something where we have a title and then we have a description underneath of that. So it allows us toe create a list with, ah, a few more options. Instead of just being able to put in a 11 p chunka text here like you can in an order Doran ordered list. It allows us to create a title and a description, but still create a list and that can be helpful, for this is particularly helpful for when you start working with JavaScript, Aggie, Korean creating an accordion. That sort of some of the first places that I ever saw it done but there's other uses as well where this can come in handy. So, um, again, that's just another type of list that you can create. Another thing that you want to make may want to do with lists is you may want to nest list . So let's do Are you l Let's do a l I like this. And let's do parent. And then instead of closing this tag, like, happened here, actually, we can keep it close, but we're gonna move it down here a little bit, and then under this parent, we're going to create a new Owen ordered list, and we'll call this child, and then we'll call this grandkids. Her Children, I guess weaken, we can do here. Okay. So, ah, if you look what we have here, actually, that doesn't make any sense. So and I put this down here, Okay? Closing you will. All right. So what we have here is we have a non order list we have inside of that. We have one list item right here and then inside of that list item. We have another a Norden list, and you can do this is valid sort of. HTML. And if we take a look at that? That is how you get this sort of this extra indentation here with your list. So if you want to do a lot of times this is used in menus where you have you have a menu item, and then underneath that menu item, you have some menu items, you have another sub menu and so forth and keep sort of going with that. That is how you do this. You nest on on order list inside of another list item, and it will indented for you. Of course, you need to use some CSS to style this for for menus purposes. But this gives you the basic html Ah, in order to do that, the last thing that will then look at here is when you're dealing with order list. One thing that you may want to do is you may want to change the numbering. So the way that we can do that is with an attribute called Start. So let's say we set this to 33. L pick a very arbitrary number like this and then inside of this, we're gonna do Ah, option one and we'll go. Hello. I option to okay, and we refresh that. And now you can see the numbering starts at 33 instead of one. So that's another thing that you may want to do with your lists. 15. Tables: Now let's talk about tables, tables, a really great way of displaying lots of data and having appear in an organized manner, a lot of applications say, for example, WordPress. They will take their data objects, and when they want to list those out, they'll put them inside of tables. So the post, the pages, the users, all that sort of thing in an application like WordPress will use the table to display it. And again, it's just because it's a good way of vision of displaying data, lots of data in a way that is organized and easy to go through. So in order to create a table, we start off with surprise, surprise attack called Table, and then inside of that, we're gonna have a couple of different tags. So the 1st 1 is for each row. You are going to have a TR tag for table row. Okay, so again each row that you want to create, you'll have one of those will go ahead and drop in just three of these like this, and then inside of your rose. Then you can have columns, and so there's two types of columns you can create. You can create a header column or just sort of a regular data column. And so these have the the header columns have the tag T. H. And this will just be styled a little bit differently. So we'll just do name and we'll dio aids and we will do email. Okay, so that's gonna be our head or row. If we refresh this will quick and just look at it. You can see we have name agent email and you'll notice that these are bolted. Now, if we come down here to one of these rows, we're gonna put in our actual data. And so, for a regular cell, you're gonna use t. D like this and again, that'll be styled a little bit differently. So we'll just do John Morris. We'll do wishful thinking. 29. If you believe that I've got some property for self for you on, then we'll do just email at gmail dot com, and then we'll come down here to our last row and do sort of the same. Things will do just a John Doe, and we'll do age 57. And for the email, we will do John at doe dot com and If we refresh that, then you can see we have We have our data displayed here. We have our rose This way. We have our columns up and down. Everything's organized, nice and easy to read. I'll do this up here just to give us a little bit more definition or of course, not gonna get into CSS here. But, um, I'll do th and TD, and I'll just dio men with 100 pixels like this. So this is going to give ourselves a little bit of with so that the data is not so crunched up there. But again, that's ah, that's a standard table. You're gonna have the rose. Oftentimes you'll have a head or roll like this. Then you're gonna have ah, your your data inside of it. And that will just sort of go on forever. Now a couple things that you can dio if we come down here, we have what's called Call span and Rose spanned. So this allows you to designate that particular a particular rove well, when we're dealing with columns of particular column spans mawr than one calm. So if we come to this header to make sense, we're here and we do this? We do. Call span equals two. What we're saying is that this column now is going to span two. Columns should notice here. Now, we only have to these these header columns, but one that has a call span of two. And then down here we have three. So the way this should work is we have one column and then here we have two columns. We still have a total of three, which should match up with our data down below here. And so what you can see here is now we have name and age spans thes two columns right here . So it's sort of centered on these two right here. So that is how you can do Ah, column span like that. And you can use that in a multitude of ways to display different data. You can do the same thing with Rose. So let's go ahead and copy this. Ah, let's get rid of this call Span equals two. And let's just do was due name in age like this, and we'll get rid of the email block here and now what we'll do is on this sort of second row here and this could be the way this works can be a little bit different. Sometimes you would do this like in a situation where you're displaying data in this way because with tables you can display data in a multitude of different ways. So here we might do a name and then actually display the name in here like this. Um and then you might do down here, let's say age 29 will do email, and we'll do email at email dot com. Okay, so there's different ways that you can to display the data like this. If we look at this one, then you'll see it's just displayed a little bit differently. Um and so what will come down here and do then with this is when actually, these should be th hopes like this. All right, so now you can see it's name, age email, and then you have name age email, so it's displayed a little bit differently. Okay, so when we're talking about something like that, then we can do a row span. So on this 2nd 1 here, we can do row span equals two like this. Okay, We'll keep our TD just like this, but now will come down here and we'll get rid of this th because we did the roast ban on this th Now that's going to essentially eat up the 3rd 1 from this row. And so now you can see just like before, how age is centered across these two cells right here. Now with our row, we have name that's right next to John Morris. But age is centered sort of between 29 email dot com. Now, again, this isn't necessarily how you would use this and display this data and so forth. But you can see here that this is being centred on these two rows. So again, this one works sort of horizontally for column span it it larger to span columns. This one works sort of vertically, which allows you to span across different rose so you can use those sort of as you see fit and and the different situations that you might encounter. But that sort of the ins and outs of of tables Ah, least when it comes to HTML with tables, there's definitely a lot of CSS that you would probably get into to want to style these and so forth. But like I said, this is the HTML parts of it that you that you would really want to know when working with tables. 16. Forms: next. Let's talk about forms now. There's a lot that can go into forms a lot you can do with form. So I'm gonna try and give you the most common things. Ah, that you'll want to know to get started working with form. So the first thing is, just in order to create a form, you're going to use the form tag like this. It is an opening and closing and then inside of this, you are going to have a number of different elements that you can put inside of this that will actually make up your form. Now, when it comes to the actual tag itself, there are a number of important attributes. Probably the two most important ones are first going to be what's called the method and and you can pass and either get or post. Now these are related to processing by server side script, for example, PHP and so that sort of beyond what we want to talk about here. But ah, the idea of the method is that you can specify which method you want this form to be handled by so get. What that will do is the data that submitted by the form. It will actually turn all of that data into query variables, and it will. It will pass that data in the u. R L of the browser, and so that effects. When you then go to process this with, say, PHP, you have to grab the data from the U. R L in that instance, if you use get now, if you use post, it's actually the data is not posting the Oriel. It's sort of posted behind the scenes and then into your PHP script. You have to know to to grab it in that sense, so the method will effect again. How you're going to process this, I would say General rule of thumb. Most often what you see is that when it's passed via get, it's something like a search form where you want to be able. When you create search results from a search form, for example, let's say Google, oftentimes you want to be able to link to those results well, you can't do that if you use the post method. You could only do that if you use the get method, so a lot of times it's if you want to be able to link to or somehow come back and be able to access and be able to go directly to a particular submission from a form you would use get. Since that is passed in the URL, you could then just copy that you are l and and ghost directly to that. You are l. And you would get, ah, the same result as if you had submitted the form. So that's generally the instance where you've use get post method is pretty much for everything else. So most of the time you're going to use the post method. General rule of thumb is default to the post method. Unless you come across some compelling reason why you would want to use get all right. The other thing, then, is the action. So the action is going to be the script that is going to process this form. So wherever that is, that could be a relative. You are like this. It can be, Ah, an absolute you, Earl. It can actually be blank. And that this this ah form will submit right back to this very same page. So depends how your overall application is going to be built, but those are the different, Ah, different actions that you can specify in there. All right, so that's sort of the form tag itself than inside of the form tag. You have a number of different elements that you can can put in there. So the 1st 1 is sort of the most common one. It is the input tag like this. And the way that this structure works, did you start off with Ah, input? So that's the type of tag. And then you have some attributes that you need to specify for this to work. So first is the type, okay? And we'll get into in just a second the different, uh, input types that we can work with. But we'll just start off with sort of the generic one, which is text, and then you need to give it a name. So, for example, email dress like this. Okay, so and this is a tag. This is essentially avoid tag. OK, so you're not going to have a closing l a closing tag for this. It's all just the opening tag. Okay, So that will actually create a If we look at this, that will create an input tag like this. Now, of course, you may want to give that a label. There's another ah, thing that we conclude clued in here and we could say email like this, and then we will have a label and an input like you might see from a lot of different forms . And then, of course, you can style that how you want. So that's the input tag. The next one is the select tag. I'm gonna go ahead and excellence is going leave. That next one is a select tag. So this is for a drop down box. So it's select, and then you need to give it a name. So name and let's just do options. And this is an opening and closing tag because inside of it, now you have to put your options, so you gonna do options or option, and then you're gonna give it a value. We'll talk about this in a sex. So let's just is this a valuable one and we'll say option one and then you might come down here and do option value equals two an option to okay, so if we we refresh this and look at this you can see we get a drop down boxes, says Option one Option two. Okay, so the way that this works is this Option one and option to between the tags is what's going to display visually here. But the value is what's going to be submitted behind the scenes. Remember, our at our method here were saying it's going to be submitted to a processing script. What gets submitted is the value when it comes to these select boxes here. So this allows you to critic a human readable drop option in the drop down box. But this allows you to create something that's a little bit more machine friendly so you can separate those two things that will get submitted behind the scenes, and then you'll be able to handle it accordingly, based off of whatever, uh, whatever you want to do in terms of your processing. All right, so that's the select box. Next one is a text area so we can do text area like this, and then, actually again, I need to give this a name so text Area name equals will just do message like this. Now here you can specify rows and columns to to specify a size so you can do something like this, Rose, let's just say 10 and we will do calls equals 20 something like that. Okay, So that allows you to sort of build in some sizing to it, and then we close that, And then most of the time you're gonna leave this empty like this. You can put in a default value like this And what will happen? Let's just go ahead and look at this. You see, we have now this is sized and we have default value in here. But actually, if someone wanted toe enter data, they would have to get rid of that default value. So usually what we want to do is we want to do placeholders, and we'll talk about placeholders in just a second. But normally with this, you'll want to keep that that that sort of, uh, you want to keep that sort of empty like that. All right, let's drop down here. So we've got text area and again there's there's a number of different ones that we can we can sort of do here in terms of all of the different elements that we could. There's things like field sets. And I showed you labels you could do legends and and data lists and so forth. I guess one other probably common one would be a button like this. You can do buttons inside of here, and we would do type equals button you can dio submit. There's a number of different things that you can do with buttons. But if you want to have some sort of button inside of here and you could you say this is a button like that? Okay. And so this is a button here and again, depending on how you set it up. You can use buttons to submit forms if you want. Um, oftentimes you use an input. Um, but again, there's a number of them inside of here. No data lists. There's output option group and so forth. Those air very, very much less common. These are sort of the standard things that you're going to be used inside of ah, form. And then the thing where you really get into the different sort of of fields that you can create is where you start talking about input types. So we talked about input. We have input select text area button here, but you can do a whole bunch of different input types. OK, so we've got text here. Another one that you can do is that you may you probably will come across is password. So let's do password like this. Let's just say password. Ah, let me real quick. Just wrap some of this inside of paragraph tag. So it's a little easier for us toe to sort of look at. And then we'll come down here. We'll do a paragraph tag like this, uh, and that will give us a little bit of separation that will just move this stuff down here. Okay, So with a password field, which is the 2nd 1 right here, when you type into it, you notice it gives you just the dots. So that's what a password field is used for. That can be very, very useful. Um, you know, obviously another really common one or the 11 that you'll use in pretty much every form is as I mentioned the submit button. So we'll do a paragraph tag and then we'll do input type equals, submit like this, and you can give this a name now the thing about giving this a name is it will allow you to target it a specific. You gonna target this in your processing script? A lot of times that not miss it. That's not necessary. So you don't have to do it. But you can give it a name like name equals submit. And you may see that out there when you're looking at ah html code, we'll leave that off just for brevity sake. But then you could do value equals. And this is gonna be that what shows up in the the actual button when this creates the submit button. So if we refresh that, you can see it says click me here. If we click it, you notice it sort of refresh. They're a little bit. That's because that form was submitted. Okay, so that is how you ultimately submit the form. So that's the submit button. You have things like a reset button that you can you can use. Um, so let's just go it. Let's go ahead and do that. Input type equals reset. And actually, just do this like this. Go ahead and refresh this. You see, we have the reset button here so And you see, it clears the form when you do that. So that's a reset button that you can create. Um, two of the more common ones are gonna be check boxes and radio button. So let's first talk about the radio button. So creating new paragraph you to input type equals, and then we will do radio like this. Now, this is gonna be a little bit tricky. So we're gonna do the name of this, and we'll just call it our radio like this, and then you're gonna give it a value, okay. And the value, let's just say, um, option one, okay? And we close that up. Now, this is just going to create a single radio button. Now, if you're familiar with radio buttons off, oftentimes you are. Ah, you are. Let's go to one one like this, and then we will do On the outside of the tag will do option one. You're choosing among different options, often times. Okay, So in order to do that, let's create a break here. What you'll do is you will take the same tag and well, just actually will copy this whole thing over here. He'll take the same tag and you'll create multiple options with the same name. Okay, so let's drop this down here, and the name is going to remain the same. But the value is what will change soul due to and we'll do to and then one more we'll do three, and then we're changing our display text as well. Okay, so what we end up with is we end up with a radio button where you can Onley select one of these options like this. And what happens is whatever one you select, that is the value that's gonna when you hit submit, that is the value that is going to be sent behind the scenes. So, for example, up here, how we have this input Texan email and whatever we type in here, that is the value that's gonna get sent here. It's whichever option we select is the value that's gonna be sent. Okay, so that's how you create a radio button that allows people to select among one option. Now check boxes are sort of similar, except that they can choose multiple K. So let's do paragraph tag. Let's do input type equals check box, and then here we're going to do name equals and will do Option one I don't value equals. Uh, are you will do. Will do like this will do. Let's say vehicle and we'll do value equals bike. And then outside of that will say I have a bike and break tag and then input type equals check box will do. Name equals vehicle and we'll do. Value equals car I have, Ah, I have a car Now there's a couple different ways that you can do this. You could actually do this like it's a vehicle to and so you would have two different options here and it says I have a car. I have a bike. When this is submitted, the name would be vehicle and then vehicle to, and the value would be bike in the value would be car so the all of that data would be submitted behind the scenes. Another way that you can do this is you can do vehicle, and then you can put these brackets and do bike, and then you can do vehicle and car like this. And you could dio change these the one and one. So what happens when you do that is because these have the same beginning name like this in in and and and again, if you're not familiar with three, say PHP. This may not be as familiar, but what will happen is these will actually be submitted in the same element. Under this in a PHP array, they'll be submitted in the same element called vehicle, and then they'll have nested in that so sort of like on on ordered list, where we have items nested, nested under that it will say bike and car or whichever ones they check here they just check bike. It'll just have bike. If you just check Carl, just have car. If you check both, it will have both, and so and it will have the value set toe one for each of those. And so what it allows you to do in your processing script is just target the one element vehicle and then look inside of that to see how many of the different options that you had listed here available. So again, there's two different ways that you can do that. The biggest difference between check boxes and radio boxes is radio boxes are meant to select one of a group of options, whereas check boxes you can you know you can Ah, you can select multiple and so forth, so those are sort of the main things types that you'll deal with. You do have sort of the HTML types that were added. So things like if we come here, let's do actually, it's go under check box Here. We're going to input type equals color. Name equals color like this. We'll just do color so you can do things like that. And what that will do is you'll notice that now we have a color picker here that brings up a color picker. So that's sort of built in you have email. So if you if we come up here, this email one we change this to email instead of text and we refresh that and I try to submit this with something that's not an email I'll get, Please include this at in the email address. Okay, so it'll actually do a little bit of validation for us. So color, you have date time pickers. You have emails, you have their email. You have month. You do a number, you can do a range you do search telephone numbers time you have you URLs All those are things you can specify as a type, and they all have. They all have some sort of relevant functionality, like the email checks to see if it's about email address, the color picker included. The color includes a color picker. Whatever is relevant to that type, it will sort of include that with it. So those are a bunch of different types that you can deal with, right? So the last thing that I want to deal with here is attributes so and there's again a ton of attributes that we could talk about. But there's to sort of ones that ah, I want to focus on. So let's change this back to text from email. And then, let's add at the end of this something called required. All right, so what that will do is it will make this required. So if I try to submit this without entering any in, you'll see it says, please fill out this field. So that's a really nice way to to make something required that sort of built right. In another thing that you can do. There's a couple different things. Ways you can use this. You can use one called read only. And so if we look at that, it will make this so its read only I can't actually click in it. You'll notice that, um, you can also do disabled like this so we refresh that. And now you'll see it's disabled. I can't do Ah, I can't Actually, it's like, great out. I cant click in there again either. Um, there's things like size. You can specify the max length. So, for example, we could do Max. Lengths equals one, and we'll refresh this. And so in this email block, you'll see if I'm trying to hit Mawr of these, I can Onley type in one character, so you have that available as well. There's things like auto complete and auto focus and, you know, again, lists and men and Max, there's multiple for down here. Under select, you could do something like multiple. Um, let's refresh that. So now this box right here, you can see if I hit, I believe it's control. I can select multiple options here so you can do that as well. So there's a lot of stuff that that that that you can do with different forms and the attributes and so forth. Ah, these are some of the most most common one of the ones that was added in HTML five. That is super common that that you want to know is placeholder. So let's just change this to placeholder. And what a placeholder do will do is let's just say enter email, Okay? So if we'll refresh this, this will actually enter that text in there. But when I click in here, I don't have to get rid of it. I can just start typing. So that's what a placeholder does. That's pretty common. You pretty much wanna include those in. The support for that is now pretty good. And you pretty much wanna include those with all of your input forms where someone it was gonna be typing text. So your emails, your gen generic text boxes, your text areas, and so forth anywhere where that will give them a little bit better hint of what to type. Ah, lot of times forms will actually even just get rid of the label and just include the placeholder there as well. So, um, again, those are those There's a ton of these out there, so going through all these, we could spend hours doing this. But I want to give you the basic idea. Some show you some of the more common ones. And then, you know, once you sort of understand how inputs work and how you can change the type and so forth, then it becomes a little bit straightforward to go from there. 17. Entities and Symbols: Now let's talk about special characters inside of each to melt, and I like to break these down mentally into two different categories. And before I tell you this, I want to just I'm sort of taking a liberty here. If you look at some of the technical documentation and and stuff out there, this isn't exactly ah 100% how they would. They would delineate this, but for me it it just makes a little bit easier way of thinking about it. So I distinguish between entities and symbols. So let's talk about entities first. So an example of an entity would be something that you've already seen before. Ah, less than sign like this. And if I refresh this page and I display this, you'll see when I write out a less than sign like this, I get a less than sign. If I do. If I add to that ah greater than sign like this, we refresh that. Then we get the less than and then the greater then the thing about this is this may not seem like it's that important, but there's a couple things one when you're doing it this way, for example, you may write something in here. Let's say you want to tell someone you might want to write a post. Were you doing a court coating to Tora? And you want to tell someone to use the HTML tag? Right? So you're not actually trying to right the in each to melt tag as the HTML tag? You're trying to tell them to use this wall. You know, you might have to do something like this where you put spaces in there so that this will actually show up. You notice? When I had them together, it disappeared that because the browser thought that this was the actual tag, so that that can start to give a little tricky. So we have this thing that we call entities. So instead of actually typing a less than or greater sent than sign weakened type code that looks like this in and sign lt, and then a colon air semicolon. And then we could do HTML. And we could do and and then we could g t. And we like this. So what? This does these air called html entities. And if we refresh this now, you'll see that the tag appears I don't have to have any spaces to and so forth. So what the browser does is actually takes thes and says, OK, they're trying to display this character. They're not trying to write a tag in their code, so it allows you to to sort of make that delineation explicitly. And so there are all sorts of these HTML entities. There's a huge list you can find out there If you just do HTML entities, you'll find these massive lists that that are out there. But another example would be, ah, great, uh, and sign. So it's called an ampersand. So if you type something like that, then you'll get an ampersand. Um, no one that you might see quite a bit is you'll see. Ah, this and and B S P like this, which stands for non breaking space. This will actually just create if we come down here and we refresh that, you see, we get a little space in here, Okay, so it just creates a little bit of space. So there's double quotation marks, single quotation marks, etcetera. So all of these these entities like this where it is characters that are sort of kind of the part of the normal sort of the normal day to day of coding, like less than and greater their signs and ampersand, double quotes and single quotes. I mentally sort of think of these all as entities, but you also have than these other sort of marks or these other sort of entities that you can use, which I refer more to as symbols. So in a very good example, that you may have seen before is one like this. And if we refresh that, what we get is we get a copyright symbol. Okay, so hopefully that helps make clear the difference between the two. The copyright is an actual copyright symbol that I'm wanting to create, whereas the less than or equal then sign is maybe something that's more relevant or related to coating. That is ah, ah, character that I'm gonna use quite a bit throughout my code. But in this specific case, I want to specify that I just want the character displayed. I don't want it to be processed by the browser as if it were a part of my actual code. Okay? And so then there are all sorts of these symbols that you can do another one. Um, that you may see out there is and trade like this or you can dio Reg like that. Um, you can do stuff like this. So these were probably a little less, more, more, A little less common. But you can do Ah, spades. Or you can do something like this And Ari are are that's for a right arrow. So let's just go ahead and take a look at all of these. So now you get a trademark, you get a registered trademark, you get a spade symbol, you get a right arrow. Okay, so, again, those are HTML entities. The symbols are things that again generally I can't type with my keyboard like I don't have a copy, right? I don't have a copyright button on my keyboard. I don't have a speed button on my keyboard, but I do have a less than in a greater than sign on my keyboard. Oh, I do have a quote, a single clo and a double quote sign on my keyboard. I do have an ampersand on my keyboard. So again, that's the way I like to distinguish him. But on my keyboard, I generally think of it as an entity. If it's not, I think of it as a symbol and you, the way you write these is the same. It's always you start with an ampersand, the name of the entity and then a semi colon to close out. And again. There's just huge lists out there of these that that you can look up for whatever you happen to be looking for an and want to display. 18. Address: The next tag I want to talk about is the address tag, which maybe a little bit more of an obscure tag. But it can be one that you can add to your documents that can potentially add some usefulness to the pages you create. So the address tag looks like this well, and click over here looks like this and again and is an opening and closing tag. And then inside of it, you can put various sorts of information. You can put mill leaks to email addresses, links to your l's. You can put physical addresses Ah, and and so forth. So we might write something like this so written by and then we do 88 Ref equals we use a male to tag or the mail toe to U R L, which will, actually, when someone clicks this, it'll pop open. Ah, their email provider that they use if they've set that or it'll ask him toe set which one they want to use. But we'll just say john abdo dot com. So again, when they click this link will actually try toe open an email and address it to that email address so they don't have to copy and paste in stuff. So say this is written by John Doe plan. Let's use a break tag here. And then we could do something like you are l I do a draft equals, um w w dot john doe dot com like this. And we could do john doe dot com and we could do break tag again. Okay. And then, you know, we could dio let's say, ah, just do it like this address. Actually, it's just 2555 East First Street. Um, some city U. S A. No. 55512 Something like that, right. You could type in an actual physical address here. And if we look at this, then you know, it'll just sort of printed out. You'll notice it puts it in italics. That's sort of the default styling for this, um, and you'll notice. So there's a couple different ways to use this. So I have this in the body tag right here. So what? That what I'm doing here is saying that this is the contact information for this particular page. Okay. And so you're sort of signaling to the browser, but also any search engines that my index, this page and so forth that for this particular web page, this is the contact information. Now, we haven't talked about this tag yet, but you can actually create Ah tag called article like this. And this will specify that you are creating sort of, ah, individual article and you can put your address tag inside of that. And instead of saying that this is the contact information for the entire document, the entire page will say this is the contact information for this individual article within the document. So depending on what you're doing, you can sort of signal that again to the browser search engines and so forth, and they can use this in sort of different ways. Google's sort of always playing with author information and so forth. So this is a good way to signal to them who's the author of this particular article or who is the creator of this particular Web page and allowing them to sort of use that how they may want to use that. The one thing about this particular tag is that you don't just add it if you're you're putting ah, a street address or information like that on a site. You don't just use this for any old sort of postal address or anything like that. So you don't mess. You wouldn't want to use this. Every time you write out a postal address, you on, Lee want to use it when you're specifying this is the contact information for this article or this document? Okay, so if you just gonna write out a regular old postal code, the for that doesn't have anything to do with signaling to the to the browser and search engines that this is These are the contacts for this particular page. If you just writing one out, you wouldn't use the address tag it's on. Lee used to specify this is the comfort contact information for this document. Okay, so I just want to make sure and make that clear. And oftentimes, this will be something that would actually go in your footer tag so you would probably have your body. And then you come down here and create a footer tag like this, and then you This is one of the things that you would put down in the footer tag 19. Project 2: Build an HTML Form and Data Table: Now let's take a lot of the things that we've learned up to this point. And let's go ahead and build a page with ease. So we're going to start off with an H one tag. We're gonna call this my second Web page, and we'll do a paragraph tag that says will build a form and table and some other stuff. Right? And then let's go ahead and pull this over just a little bit. All right, then, inside of this, let's go ahead and create an H three tag and will say, Here's our table. And then let's create a table and we'll give this Well, just give this three rows so we'll go like this. Actually, let's do this. Let's go ahead and just create our hetero. So let's go th and we're gonna go name. And then under that th we will go aids. And then under that, we will go. Um, let's go cat or will go little do animal doesn't make sense in a second. All right, so then we can I'm just gonna copy this. We know we're gonna fill our table with data that May makes this So we'll do. We'll just create two more options in here, and then we will take all of these in my system. I could do control H and that will bring up this find Aiken. Do th and I'm gonna replace with Tedy. But I'm gonna step through these. So let me go back to that 1st 1 and I'm just gonna step through. I'm not gonna hit replace all. I'm just gonna hit, replace one and actually gonna go back even further. You know, that was the right one. Okay, So we can step through these place all these with regular TDs and said of me typing through that. Okay, so that's done. And then we're gonna change this to John. Ah, doh change this to 29. Um, animal is cat, and then we'll do this. Jane Doe age 30. Animal is dog. Okay, so that would give us some tabular data If we refresh all of this, you see my second web page. Here's our table. We've got our table filled out with some data in it, and then under that, we're gonna add a form. So let's just stew h three ad some stuff to our table like this, and then we're gonna create a form. Now we're not. This isn't a PHP course. We're not actually gonna add this data, but this is sort of a similar thing that you might do. Um And then you would, of course, learned PHP or a back service site scripting language to be able to actually at it. But no, we're not actually going to do that here. So here would create a form we'll do. Method equals post action will leave blank. So this would submit to the same page and then inside of this Let's do let's do a paragraph tag and we're gonna do label and we will do email. And then actually, let's go ahead and drop this down so it's a little bit easier to read here. That and we're not messing with CSS. So I'm just gonna use a break tag. You could actually, when you when you learned CSS and are using CSS, you could actually get this toe where you don't have to add this break tag, but for now, we'll just go ahead and do this. Actually, let's make this one. My name is what it was not email will do name and then we'll do input type equals text and we'll do name equals, name and will do. Placeholder equals. Enter your name like that. Okay, so that's for our name. And then let's do our age. So age will do number here to bounce with. You have never actually used the number type before. Um, so we'll see how that that works, But why not take a risk, right? And we'll change this to age as well. So we gotta input text. That's name says any your name. We have input. That's number says age and in your age. And then we need 14 R cat or dog. So we're going to do input type equals check box, and we're going to do name equals animal, and then value equals cat. We'll close that and we'll do. I will do cat and then a break and we'll do input type equals check box. You know, I'm doing check box, but we actually want this to be a radio. So do radio. I like that name equals animal again. Value equals dog, and we'll do you dog like that. And then we need our submit button. So normally these these you don't have to rap in the paragraph tag will do input, type equals, submit. Value equals, submit like that. And then we'll do input type equals or reset like this. Okay, so let's take a look at that. See what we got here. So now we have a form says, enter your name and your age. You can select between dog and cat. If we enter, our name will just do John John Morris in number, so I can't type. I'm trying to type characters here. I can't do that. But if I come over here to type a number, I can certainly type a number. I can also do this and increment it up and down like that. So we'll do our wishful thinking of 29 again. If I hit Reset, it clears at all. If I hit submit, then it'll sort of it will submit it because I haven't made any of these required. If I wanted to make one of these require, let's just drop it in here under name and refresh that and then hit Submit. It won't let me submit it. Now it tells me I need toe fill out the field and so that's our form. And then, you know, we could do. We talked about the special characters so we could do Ah, and a copy. Copyright 2018. John Morris like this to add our copyright in there as well. Maybe wrap that in a paragraph tag like this. So it has a little bit of spacing between Ah, the form there. So those air, some of the main things that we covered, of course, we have on order list. We have, Ah, we have definition lists and so forth that we could add in there. Maybe we'll just no drop something in here like this. So let's come up here and let's just do, um let's do paragraph tag how to use this form, and then we'll do an order list. Ah, enter. You're name. Oops. I'm getting ahead of myself here to have an order list. And then I want to drop that down and then we'll do a list item. Enter your name another list item, enter your age, and then l I and give her that and we'll dio select your animal. Hit some mitt. All right, so there's a little ordered list for us as well. Throw that in there. So how to use this form in your name and your age? You see, it's an ordered list and so forth. So that's that's, ah, rundown of some of the stuff that we've used in in, ah, sort of the second section quote unquote of of, of this course, um, to allow you to get an idea of how you might use something like this. This is something this is somewhat again reasonable in terms of something you might actually do have a form that submits data to a database and then using against server side code, you'd pull the information from that database and display it in a table like this. So from the HTML side of things, this is not an uncommon thing. This is something that you you might actually do on a fairly regular basis. 20. IDs and Classes: Now it's time for ID's and classes in H two melon, how they tie in tow, CSS and JavaScript. So let's start with classes, and what it looks like is you would just create a H two mile Taxis could be added to any HTML tag, and then you use the word class. So it's an attributes like any other equal signs and then your quotes, and then you can give it sort of any name that you wants will just give this the name of name and we'll say, John Morris like this. Okay. And with classes now a class, what it specifies is it essentially gives this HTML element this name, and it could be used by CSS and JavaScript for the different things that those due for styling or for JavaScript, functionality and so forth. And we'll talk about how you target those in CSS in just a second. But with class is the main difference between classes and I DS is with classes. You can have multiple elements that have the same class name so we can do something like this. And this is go John Doe and Jane Doe like this so you can do something like this, and this is perfectly valid. To do with classes, however, would not be something that you could do that would be valid when it comes to I DS. If you were to try to do this with an I D. So classes you can have multiple elements on the same page that have a class with ideas, you can only have one element on a page that has that I d. For it to be valid came. So that's the main difference Now what? We use these four. Something like this would come up here and create style tag and write some CSS. You know, we could do something like you with class is the way you targeted in CSS is used a dot with ideas. It's a pound sign like this. We'll talk about ideas here in a second, but we can do a dot and then with the name of our class. And then it's wrapped inside opening, opening and closing curly brackets So we can do something like this background color and we'll just do e 40 44 like this. That's ah Hexi decimal color and will the text color to actually let's do black, and we'll do a patting of 20 pixels. So something like this, and that's going to apply that styling to any element that has that class name. And actually, let's just go ahead and do this. We'll do one that doesn't have that class name like that. Right? So let me open up my preview here on. Okay, So and actually, we're using Ah, color that is matches the background of this. So let me go ahead and just change this to something. Legs something a little easier to see. All right, so it gives it that styling. You can see we have the padding around it, and you can see that this something else doesn't have it applied. Okay, so that's what this allows us to do. You can also target it with JavaScript. That sort of beyond the scope here. But it's sort of the same ideas now that it has a class name you can target it with. Ah, javascript. Um, you can also not only condemn fringe elements have the same class name a one element can have multiple class names. So it could be, um, you know, family. It could be Morris or less Do dash Morris and then John. Or however you wanted to do that. But it could have multiple class names like this. And you can come up here and you could do Let's say dot John and you could do background color and we could do 555 Let's just say you do hex decimal 555 like this. And now you see that one changes here. Okay, so again, they a an element can have multiple class names and multiple elements can have the same class name. Now, with idea, it's a little. And this could be this could very easily. Just to be clear, this could very easily be a completely different element. Does not have to be the same element, even though they have the same class name. And you know, then you can see here. We've got now on H to tag here, and it still has the styling that we created Ah, in our CSS up here. Okay. Now, with ideas, it's a similar sort of thing we get, except we use the word I d equals. And now we can give this something else. We can give the name something else. and let's go ahead and give this Ah, class equals of ah, name like that. So we're applying that same styling to it. But now let's go ahead and come down here and let's do for foreign CSS for I d. S. We use a pound sign, we target it like, uh, this again opening, closing curly brackets. And now we can do color like this, and it will override what we've specified in the class. Now the way this works is CSS stands for in a is really hard to talk about i ds and classes about talking about CSS. So I'm doing my best to not get too far into CSS here. But to really understand how these works, we have to talk a lot about it a little bit. So CSS stands for cascading style sheets, meaning that the style sort of cascade downward. So if I were to take this now remember, we have the background color, this top one set to gray fire. To take this now or to move this up here, you will see that even though I'm specifying that John should have a background color, it's now still read. The reason is is because this this element up here has two classes. They're both styling the background color. And so the way that CSS figures out which one is should use is is it cascades down. So it first starts with this one. But then this one gets overridden by this one down here. Okay, so that's sort of how CSS works. However, when you haven't I d like this. If we take this up here, put it above name. You see, we still get the styling. So I ds will override classes no matter where they are in the style sheet if all things being equal. So that's something to keep in mind because an idea is something. It's a more specific way to target an element than a class. So again, that's something to keep in mind when you're writing your HTML here. So no, that's ideas and classes sort went through the difference and all that Ah, sort of thing. And and so now you can use those, and as you get in to see assess, those will become a lot more use. Forget him into JavaScript. Those will become a lot more useful for you. 21. Span and Div: Now let's talk about span and did. And you might be a little wondering if you, you know, sort of studied HTML. It'll why would be grouping these two things together? And so I want to talk about these two just a little bit before we dive into actual writing of the code. But one of things that you may have heard quite a bit thrown around when you're talking about HTML is this idea of semantic of mark up and sort of what that means is that HTML is really all about giving meaning to content. So when you wrap something in a Pitak, what you're saying is that that is a paragraph, a paragraph of text, or when you wrap something in an H one or each to tag, you're saying that that is a heading that gives that content that tagged is being applied to the content, gives it some sort of meaning and span Endeav tags or sort of different in that they don't actually apply any meeting at all. And so when you wrap something in a div or a span, you know, they're really just meant to sort of group chunks of code together chunks of content together, and oftentimes they're using conjunction of classes and I ds primarily for styling or maybe just for organization. But they're different than a lot of tags out there. Um, because they don't really have any ah, inherent meaning to them. So the way you write them is what you would probably imagine. Just ah div tag looks just like this. You can ness div tags inside of themselves like this. And then you could do, say, each one and you can do stuff here and then you can target thes using CSS So style going to do div back around color like this, right? And so you can target them, like, sort of like that. You give these classes and i ds if you wanted to. But again, they really don't have any sort of in hair, meaning they're just really meant to sort of group different sort of pieces of text together. Now the difference between a span tag and a div tag is that you know, a span tag is meant to be used in line with your text on. It's usually used for really small chunks of text. Where and so it's an in line element. Whereas the DIV is meant to group larger things together sort of outside of the text, and it is a block level elements. So ah, for a span tag, you would do something like might do something like this span class equals stew, Highlight. And no, we'll close our tag here. Right? So you again, you notice the span is used in line with the text, whereas the device used on sort on the outside wrapping the text and then we could come up here, we could do highlight, And we do color red like this. And so you see the span element has that style applied to it? Okay. And so, uh, again, these are just ways that you can wrap text wrap, wrap different parts of what you're building into these, uh, into these different organizations or grouping or whatever. And the reality is is these really shouldn't with what came out with html five. He's really These were used a lot more before html five, but now they are not used near Azaz much or shouldn't be used. There's much because you are going to have actual semantic, um, sort of organizational parts. Ah, that are available or tags are available inside of HTML five. So a header and a footer, a nab sections, articles, asides, all these elements that we're going to talk about that came along with HTML five. These allow you to do the same thing that gives did but do it in a semantic way. And then when it comes to the span in the in line sort of text like that, uh, you really, you know, you should be using the proper sort of mark up here. So we wanted to highlight something like this. Then we might use something like emphasis, do e m. And then weaken style. Or were we can we could do, like font style metallic like this. And we can still target that element even though it's an ah ah, an E m element Like this is the emphasis element you really should be using. That, or something like strong like this is what you should be using instead of span. Now again, if you're in a situation where those don't make sense or you can't use those for some reason than span is always there. But it should be used a sort of the last resort dividend span should be uses. Last resort. If you have something that is more semantic to use, you should be using that instead. But these air out there, they're available to use if you need them. So I wanted to go over him for you. 22. Header and Footer: Now let's talk about the header and footer tag So these tags are meant to the We just talked about how Devyn Span are sort of anonymous tags. They had provide no meaning. The header and footer tags are some of the tags that came along in HTML five that allowed us to to do grouping and section of content, although Header and Footer or not really met for or used for sectioning but sort of grouping blocks together but still giving them meaning. Okay. And so these air elements that we can use that to do that. And there's two ways that you can sort of use these or two primary ways that they get used . And there's a little bit of rate on this. We looked this up online, people debate, and some people say it's no. It's only supposed to be this one. I know it's only supposed to be that one, but if you actually go to the HMAS Ill. Mozilla Developer Network, which is one of the sort of source materials that are out there for understanding how these things work, you'll see that both of these are used so it can be used in both ways. So the 1st 1 is probably common. One that you've seen is for a Web page. You'll see a header tag like this. And then inside of that you might see something like this and see like, page title and you may see something like, Ah, you may see a knave inside of this or you may see a logo or something along those lines. But the the usage here is this being meant as a page header. It's a header for the page. So that's the first usage, the other one that you will see a lot. And we haven't talked about this element yet, but we will. But inside of something like an article tag like this, yeah, and you will see a header like this. And this would be maybe Post and actually let's go ahead and do H three and you might see something like Post title like this. And so you have Header is sort of the page header. We also have it as the um the content or the article header here. And then you maybe see something like, um no Div class or I think there's even main class equals main like this and this would be like body content. And then down here is where you would see Ah, footer and you nail This would be post or Angus, we use post. So post footer. And then you could still see down here something like this, which would be Footer and this would be your page footer. Okay, so it can be used in both context. And the idea here is to again in our markup give meaning to the layout of what we're doing here. So we're telling any search engine or any anything that reads this or other developers and so forth. We're saying we have a header section, and by the context of where it's at it may, it will make sense that this is the header for the page. But it can also be used inside of this article tag as the header for the article or in the footer for ah, the article. But these air block level elements, and so they will display just like a div does Ah ah, block level elements. Essentially, you see how they're all on new lines is essentially like having a built in sort of line break and so they will display like that in most modern Web browsers. So but again, just a way of grouping or don't want to say sectioning because there's a specific section tag for that, but a way of sort of grouping together pieces of content are pieces of text or pieces of our page in a more semantic way than just using dibs pre html five. All of this would have been done with a div and it would've been, Would've been you probably have seen a ton of this would have been Div and then class equals and it would be Header like this, right? That's pretty much how this was done. We've now moved away from that to now We can just do header and you could still do class equals header. You'll probably see this a decent amount where they'll do header class equals head or whatever like that. But, um, we now have the actual tags with the proper name so we can write our our mark up a little more semantically like this 23. Nav, Section and Article: Let's talk about the section knave and article elements now. So start off with the section element and to created it is what you would imagine something like this that will create the section here. Of course, you give this a class and ideas you could any other HTML element. And this element is used to represent a stand alone section, which doesn't have a MAWR specific semantic element to represent it. So what that means, for example, and this is the example that comes straight from the empty end. But I think it's a good one, and the example is a Navajo navigation menu should be wrapped in navigable top. Talk about having a second because that is a specific element. We have something for that. So we use that instead of using section but a list of, say, search results or a map that you might display on a page. We don't have a map html element or we don't have a search or search result html tag that we can use. So if we wanted to display those, those would make sense inside of a section like this. So that's what section is used for and generally it's not required, but generally each section should be identified with some sort of heading so inside of it. You will generally want to put something like this, and you might do like same map. Okay, to give some to give the proper outline to your HTML document and identify what this section is about because it is not semantically, it doesn't give us any sort of information. It's just a more generic tag we need to. We need to specify what this particular section is about, and so usually you're gonna have some sort of tag inside of it or some sort of heading inside of it. That does that also, if it doesn't make sense to separately, syndicate the content of a section element than you would use the article element instead. And finally, you don't want to use the section element as a generic container. That's what Davis four, especially if you're only doing it for styling purposes. So and the rule of thumb again from the empty end is that a section should logically appear in the outline of a document. So if you think of your document as your tags is sort of the outline for your document. The section would appear in that outline, whereas a div that you using purely for styling purposes you wouldn't want it showing up in the outline for that document. So that's something to keep in mind with your use of section. One other thing is that there's no sort of hard, fast rule about, and this is where we'll get into some of the debate. There's a lot of debate around Ah, the this market where there can be but you can have You can have sections outside of articles so you can have articles inside of a section, so you may have a section that is, let's say, of a newspaper. You may have a sports section and then inside that have articles, but you can also have sections inside of articles as well, so you can have an article, and then one of the sections in there could be like technical information or something like that, so you can have articles inside of sections. You can have sections inside of articles. You can have sections inside of other sections. A lot of people try to tell you that there are hard, fast rules for this stuff. But when we look at the definitions of how they're supposed to be used, there's actually you don't quite have that. And there's a little bit more flexibility with all of that. So just keep that in mind as you're working with all of this, that there's a little bit more flexibility and a lot of people have you believe. All right, so that section the next one we have is knave. So in order to do now, have we just tape, as you would guess, have like this, and then inside of this, you would put your links And no, this is, of course, used to represent Ah ah, A navigation menu are a navigation area with links to different parts of the site. Another thing to keep in mind is this is not just for menus. Menus is one of the ways that it could be used, probably the more common way, but at all cost, so could be used for, say, a table of contents that could be used. If you're writing a post and you have sections within that post that you want to link to, you can use knave to encapsulate those links that say the top of your article so you could have a knave menu. You could have an article tag and then within your article tag, you would have another naff. Okay, so that's that's something toe to keep in mind with that, Ah, it's not necessary that all links be contained inside of a knave. It's really only intended for major block, ah, major blocks of navigation links. So one example again, that's used in the empty end. That's sort of interesting is a lot of times a footer element will have a list of links. Well, those don't need to be in the knave element again. A lot of people out there will sort of se or insinuate that every every navigate piece of navigation has to be within the naff tag. And that's not necessarily the case. One of the big things with this is that browsers or user agents, things like screen readers for disabled users can use this element to determine whether to admit the initial rendering of the navigation only content. So that's a big use of vision. That's something to keep in mind when you're using. This is browsers will use this to determine whether or not to tow, display or render this content for screen readers and things like that. So once you have your knave element, then you can dio you'll see several. A number of different ways is used one. You see, some people just drop in links like this, which you can certainly do. A probably a more common one is to use an A nordle ist like this and then to drop your links inside of that like this, Okay. And so that's a pretty common usage of this. It's really sort of up to you. Um, I probably see this the most. I think Bootstrapped four now has it where it's it's they have examples where they actually I think they do both. But they have a lot of examples where they just drop in links like this. Now, which is something I will remember a bootstrap three. But anyway, you can sort of put your links in here how you want, but you want to contain them inside of this knave element. All right, the last one here, then, is this Ah, article element next to that Me. Let me go ahead and drop these back in here. Just so we have those, all right? And so the article element is, you know, it represents a self contained composition in a document. So it's it's intended to be independently distributable or reusable, so it can be syndicated in and of itself. So this is how you you say toe anything that may use this? Ah, RSS or, ah, search engine or anything, That me Look at this document and want to syndicate it. You say essentially, when you use an article tag, this is, by itself independently. Re distributable can be syndicated. This could be put out by itself somewhere else, you know, it could be pulled from the RSS feed and use somewhere else, etcetera. So again, that's that's what you're specifying when you use this article tag. So you want to make sure the content you're putting in there fits that, So it could be a foreign post, a magazine or newspaper article. A block entry, etcetera, now given document, could have multiple articles in it. So, for example, you know, on the bog that shows the text of each article one after the other as a scroll. So, like a blawg feed each post would be contained inside of an article element. Um, you know when there could be more sections inside of that and so forth. Some of this uses notes on this. Ah, each article should be identified typically using ah, heading tags. So again, inside of this, you're generally gonna wanna have, you know, some sort of heading tag with the post title or article title or whatever the case may be with this when article element is nested, the inner element represents an article related to the outer element. So, for example, the comments of a block post can be article elements nested in the article representing the block post. So you could have once you have this than you could have. Say something like, Let's just do, Dev uh, really be probably section I d equals comments like this. And then each comment could be an article like that. Okay, so that's something to keep in mind when you're using article, they can be nested. Also, author information of our article can be provided through their address element, which we've talked about. Um, but it doesn't apply to nested article elements. So you come down here and put something like this. Ah, address. And that would be the contact information for this individual article. You could also use the publication date and time of article to give the day and time of of this particular article as well. So again as I mentioned, you know, the articles meant for ah, content or information that can be independently distributable can be put out there sort of by itself. It's sort of its own self contained thing. He should have a title. You can nest sections within it. You can nest it within sections. You gonesse, other article items inside of it, if that makes sense on so forth. So again, these three are are some of the main ones that you're going toe work with when you are working with semantic for the html five, uh, mark up and you'll find a lot of debate and misinformation out there on the Web about thes . But I wanted to give you sort of what the source material says sort of my own experience using them and some different ways that can be used and hopefully clear up some misconceptions about these 24. Aside: Now let's talk about the aside element. So the side element is used to represent a portion of a document whose content is only indirectly related to the documents main content, and these are frequently presented as sidebars or call out boxes. All right, so what does that mean? So, first off, the attack is like this aside, and it is for content that is indirectly related to the documents Main Continental. So there's two ways you can really do this. You can do this inside of an article tag like this, or, you know, some other section or whatever. You commonly see it used inside of an article tag like this and you'll have something. You maybe have some content here that says, You know, we played Fortnight last night, and in the aside, what you would put is you may put something like, Fortnight is a game by epic games. Okay, and then you would continue on with your content down here. An article that says No, we had fun. Okay, so what, this aside is, it really is an aside. It's something that's indirectly related. So you're talking about fortnight, but it's not. This isn't necessary to the main thrust of of what you're writing in this article. So it's an aside. So that's how you would use this there. One instance of how you would use this. Another really common one that you'll seen is as the sort of the mdn mentions is, you'll see it used as ah, sidebar. So you may have this article element here, and then you may have something over here outside of the article moment that says aside. And a lot of times you'll see something like, I d equals sidebar just like this. And then inside of this, you will have, you know, uh, section class equals. I'm just doing this to make it a little bit more explicit. So you'll have individual widgets like this and you'll be widget one. And then you'll have some sort of content inside of here, like this gate. So the aside isn't aside to the article as a whole, whereas this aside is to this really to this particular sentence. And you could do this, you know, you could do this again and be like a side. Fun is a thing people have like you could do multiple asides like this within a particular article if they make sense. Whereas this one here is really an aside to the article or to the page as a whole. So and it's it's being used as a sidebar. Now, when this all sort of first came out, this was a little bit debated. And if you go online, you'll see people sort of bait debating back and forth. And then some of the source material was updated to clarify and actually put in the words. You know, sides are frequently presented as sidebars or call out box like to to say, explicitly in the source material on documentation that it using it as a on a side is a sidebar is legitimate. And then using sections within that is this is sort of kind of become the recommended or more standard way that people tend to do this. Now it's having the sidebar is an aside and then have sections within that. So ah, that's something toe to keep in mind as you're working with all of this, but that is what in a side is and how you use it 25. Time: next is the time tag, so the time elementary tag represents a specific period in time. It can include a daytime at tribute to translate whatever the human readable date is into. A machine readable format, which will allow search and just read a better or other custom features that may be in browsers or things that are out there like a calendar can can read it and be able to add that to your calendar easily. So, really, the whole idea of the time tag is to wrap a human readable date time inside of it, and then added the date time attributes to it so that machines can also read it. So it's readable by humans and also readable on my by machines. There's other uses of it, but I would say that's sort of the main way in my experience that you'll see it being used now. The it can represent time on a 24 hour clock. It can represent a precise day in the Gregorian calendar. It can also represent a valid time duration. So in a like two hours and 15 minutes or whatever, so to write the time tag, you'll do just that something like this. And then you could specify a specific Ah, date inside of this, a human readable dates. You could say July 12th like this, and then you would add the date, time attributes and you would make this machine readable so you might do something like 2018-0 7 dash 12. Okay, so this is the human readable part that humans will see. But this is added to it so that machines can read it. And I mean, that's really sort of the main thrust of what you do with this. You can also use it so you'll see some examples like this, like the party started at. And then you'll see time and you'll see this is Ah, this is a common one. You'll see something like this. So you're specifying a time. So you can again one of the ways that you can use this is for time on a 24 hour clock. So this is how you would use it in that sense. And then you could also use it for durations. And so you can say the party will last and then you do time and you can do, say, one hour and 30 minutes. Okay. And so this again makes it so that you're you're sort of calling out this time. And in this sense, because the of the way this is structured and formatted a machine can still read this. It can still read this, Um, And for something like this where it's a little bit harder for it to read, you can specify Specify the date time attributes so that it can still read it. So you're presenting human readable dates and times to the human. We also presenting it anyway where it can be read by machines. Now, one thing with the date time attribute is you do have to use valid date time values. So I'm just gonna drag this over here for you to see. But these are the validate time values. If you're unsure, I just recommend that you go to them d n the Mozilla developer network. Look this stuff up and you could see there's a number of options here, so ah, year string, A month string date, a week time, etcetera. You can sort of see all what's available. Ah, inside of here. So that that would be my recommendation if you're if you're unsure of of what formats actually air are acceptable for this date time. But again, that's sort of the point to present a human readable but also making machine readable and make it more useful for machines that might be reading, Ah, particular document. So that's it for the time tag. 26. Abbreviation and Quote: next up is abbreviations and quotes. So for abbreviations, you do something like this and you would have your abbreviation be human readable. So now we could do something like ABC like this. And then you can add the parameter title and hit this title equals. And then you would actually sort of spell out what the abbreviation is. Something It's American American and broadcasting that company something like that, Right? So that's gonna have the abbreviation was what you see. And then when you hover over it like this, you'll see the actual full abbreviation. So abbreviations, acronyms, all that. This is what you want to use in order to do that. So that one's pretty straightforward. Nothing super fancy there. The next one is quotes. There's actually most people probably know about block quote, but there's actually two that you can use for this. So the 1st 1 is block quote and block quote is intended for something where you're quoting something from another source. Okay, so you might just say quote goes here and then you want to cite it, and so you have a ah parameter that you can adhere the site equals and or an attribute is really so you you cite equals and then you would site where this comes from. So whatever. Http W w dot google dot com Let's just say wherever that quote is actually coming from, then you would cite that here and that would create that quote and you'd have the citation in there and all of that. So that would be how to properly do something with a block quote. What? We probably use quotes. Mawr four is more of these in line quotes where maybe just emphasizing something. So for that you would actually use the quote of the Q tag. And so you might be, say something like this. Um what I said waas. And then you would looks you would use the Q tag here. So you come down here maybe, and like do this and Hi, how are you? And that would be how you use that. That cute tag. Okay. And so, um, so it's a little bit different than then. Maybe what you might see out there in terms of doing quotes and so forth. But when you have something to cite, you want to use that block quote and when you just have something where you want to sort of add some emphasis to it or whatever. Then you would use Hi, how are you? And you notice here that it automatically puts the quotes around the that when you use that qtac. Okay, so again, those are all pretty straightforward. But that's abbreviations and quotes. 27. HTML5 Audio: now it's the moment you've probably been waiting for. We can get into some of the more well known or sought after tags, the 1st 1 being the audio element. The audio element allows you to embed audio into a web page. Now, to give you a sort of an overview of this, I'll just open a new ah browser tab here and I'm gonna paste in. Ah, you're let me click down here so you can see the girl, but, ah, I stroll this down a little bit So this is the u. R l here. And this is normally about you visited your like this. This is a straight audio MP three file. You'll get something like this. The browser will sort of have its own way of trying to play that audio or whatever. So that's just visiting. Ah, file directly. Now what we want to do is we want to embed this into a Web page. So a complaint in line and that's what the audio tag allows is due again. This is something new came out with HTML five that we can now use, right? So it's pretty straightforward tag. We just start with audio like this and it's an opening and closing tag and then inside of it, you're going to have a another tag called Source, and you're gonna then set the SRC, which stands for source equal to the U R l of the audio file you want to play. So in our case, this is the one that I just was playing directly in our browser. So we're going to set that as the source and we're going to set the type and tell it what type of audio file it is. So in this case, it is audio, and it is an MP three. Okay, so whatever it it happens to be in your particular case now, one of the things that you can do with this is you can you can have multiple source elements so you could do something like this. Good source equals and let's just do my audio. This doesn't exist, but let's do something like this and ogg file and then you would be, of course, to type audio slash ogg like this. So this is just a different type of audio file, and what the browser will do is we'll go through each one of these elements, and you can have as many as you want, and it'll it'll try to play each one. So if it can't play the MP three, then it will go to the next one. Try play the Ogg file. If you can't play the Ogg file to go to the next one and the next one the next one, till it finds one that it can play. So we'll play the 1st 1 that it's able to. And so this allows you to. This is how you can have your audio files be compatible on a bunch of different devices and so forth. Now, if it goes through all of those source files and it can't play any of them, then you can put in text like this and say something like, Sorry couldn't play the file and you could just have an air message like that. Or you could make it like super helpful and say, visit the link directly and actually put a direct link to the file in this this little text area here, like that. And so what happens is if the browser goes through and it can't play any of these source files then it will display whatever text you have directly inside of this audio tax. It'll it'll display. Sorry, couldn't play the file, visit the link directly, and then they can. It'll create a link that file. They can click it directly, or they can right click and download, so it gives you sort of a way to handle all of those different situations. One of the other things that is sort of you common that you want to do here is, say, whether you want tohave controls or not. So if you put this controls word in here, then if that attribute is present, the browser will present the controls to allow the user to control the audio file. Otherwise it won't. So that's one of the many attributes that you can use here. Let me go ahead and do this to save that, and the last thing with this is again with some with. As with a lot of these, there's a lot of different attributes that you can do with this. So let me just sort of drag over again. This is the Mdn Mozilla Developer network. You can see there's auto play, there's controls, cross origin, loop muted pre load. You know what? So preloaded course the source, all of these different attributes that you can Ah, you can apply to this if you want to do those particular things. So ah, that's something to keep in mind again. I highly recommend looking at the source material when you want to know what something does , what attack does go to the mdn, Look at the source material, see what the specifications says. Ah, that's usually the best place to find that information. So that's a quick run down of the audio tag and how it works in H tomorrow. 28. HTML5 Video: next up is the video tag, which is a lot like the addio audio tag, and this allows you to embed video in line into your HTML page. So again, getting started with is pretty straightforward. It's just video like this. And then again, you have a source elements that you can add So ah, sort or attributes source like this, and you're going to again specify the source of the video you want to have played here. Now I'll come over here to my workspace, and I've just got a couple videos over here that that I've put in here. And so we'll just reference those roll quick. So they're in videos and then where it's just do 12. 12 MP four like this. And then we're going to again tell it what type of video this is. So it's video slash MP four like that, okay, and that is the source element. And again, you can do multiple ones and it'll fall back and all of that, just like the audio tag. So you could have one down here that was source that, and it could be my video dot web M. No type equals video slash Web and like that. So you could do that again. Ah, of course. And you can also specify then inside of this inside of the tag here again, if you want controls another one that you would probably want to specify appear is heightened wit. So we could do something like with equals 6 40 and height equals 3 60 like this, and so that will give you a width and height for it. And of course, we also have the fallback for complaining of the files. You can specify that Here. Okay, so that's sort of the basic usage of the video tag. It allows you again to embed any sort of video into an HTML plate page like this. Um, it's going to take the first element. Let's add, it s here is going to take the first frame and use that as a poster image. Or you can specify a poster image in it if you want to, as well. So that's another thing that you can specify in terms of attributes for your videos. Ah, and the way to do that would just again in this this area right here. Let's go ahead and clean this up you would just specify and actually you can drop the's down. Thanks a little bit easier to read and you can dio poster equals and then just the u R l to the image that you want to use. I don't happen to have one on hand here, so we'll just stick with it like this. But ah, you can specify that image. Another thing that you want to keep in mind as you can. A lot times you may want to add captions. So you see over here, have this 12 12 dash captions dot v t t. So we'll go ahead and click that open real quick. And now Web vite ET is just It's a It's a specifications for how you can write subtitles so you can see right here from one second toe four seconds. This is the subtitle that's displayed from 6.5 seconds to nine seconds. This is the subtitle and you can just add the subtitles as you want going through Ah, your video. So this is a particular ah way of doing this. I believe there's multiple ways you can do this, although I think this one's pretty common eso again. If you want to specify captions, you first create this file. And then once that files created, you'll come back over here and then, Ah, after your source elements here before you're sort of fall back, you would specify you would use the track attributes so you do track. And then you would say label equals English. So these air English subtitles kind equals subtitles And then you would do the source. Language equals E end. So that's the designator for English. And then you would do source equals and then where they're located. So again, in here would be videos and it would be 12 12 dash captions v t t like that. That's where they are actually located. And then you can specify that these are the default. Okay? And so that's the the track at tribute going close that up. And that will allow us to to specify the the subtitles for this particular video. Okay. And so then we can play this and you'll see that we get this is the first subtitle, and then eventually, as it goes and plays here, you get this is the second. So that's the second subtitle and that is what I wrote over here. Then, of course, you can write whatever you want there. So that is how you handle accessibility and subtitles with the video tag as well. 29. Introduction to CSS and JavaScript (jQuery): all right. Now, what I want to do is a little sort of CSS and JavaScript primer and maybe help you sort of transition over into those two languages, if that's what you're gonna new do next. Which is of course what? What? I work, um, in. Now, I'm gonna give you give you a couple files. I'm gonna go through one of these. But the 1st 1 is this video dot html. That's the one we're gonna go ahead and build here. I have another one called audio dot html. You can see here. I went ahead and built that out for you. Ah, the two files are very, very similar. As we've talked about with the audio and video tag, they're actually very, very similar. So the two files worked very, very similar. But I wanted to give you this audio one as well. She could use that as sort example where we're gonna build this video one here. The other thing I want to show you as I've created a folder called Videos, and I've just put three videos in it. These all just have sort of numbers to them. We're gonna be referencing them in our code, but those air in our videos folder here. All right, so go ahead and close that up. So what we want to go ahead and do then is we want to go inside our body and we're going to create. First off, we're just going to create our video player here, So I'm gonna create a div with an i d equal to video player. We're gonna need this for our CSS later, and we're gonna This is gonna be sort of a rapper for our entire video player. Then we're gonna do Video player are a video tag, and we're gonna give that I d of equal to player. And then we are going to include controls on that, and we'll go ahead and close that up. I think it's see that sort of pops in a video player here. So we have sort of a rudimentary beginning of what we're going to do here. And then I am going to put in a source element like this resource attributes, and I'm gonna set the source here, actually. Ah, blank for now. And we'll get to why that is here in just a minute. And then we'll set the type equal to video slash mp four because we know we're gonna be using all MP four players Now with the JavaScript that we're gonna use here. You could populate the type as well and get into all of that. But I don't want to go too deep into all of this just because this is gonna be a little bit brand new and we haven't obviously gone through JavaScript or CSS. So where is gonna leave that at video session before source empty? And then we're gonna put in our sort of our default message here if it doesn't support the video tag so your browser doesn't support the video player? Just something simple like that. We're not doing going to do anything crazy here. All right, The next thing that we're gonna do then is we're going to build a playlist, So we're gonna build a non ordered list, and we're going to give that an I d equal to play list like this, and we're going to put in our actual source items that we're gonna populate in here using this list here. OK, so we do a list item class equal to current, So the 1st 1 is gonna be the current one. When we load the page and then inside of this, we're going to have an anchor tag, and we are going to then set this to the different videos that we have in our folder. So video slash 12 12 dot mp four. Ah, and we're just gonna call this video number one? All right, So I'm gonna go ahead and then copy all of this and peace that down here, because this is all gonna be very similar. And for a second, we're actually gonna get rid of the class current like that and for a second video than the U. R. L is going to be 28 58 this will be video number two and then get rid of the current here. And our last video is 5005 and this will be video number three. All right, so we have a basic set up here. We have our player and we have a playlist here. Now, what we need to do is we need to use Java script to help this work or Toto play these different items when we click on them. So what we're gonna do is when you come down here right before closing body tag. And we are going to include J Query because we're gonna be using Jake Ray, which is a JavaScript library framework that that helps make working with job script a lot easier. I recommend using something like it doesn't have to be j query, but some sort of framework like that. All right, so once we've got that included, now we can access J query methods and so forth. And so we're gonna open a new script tag like this and inside of that, then we are going to write the Java script, that or the J coury that allows us to to make all of this work. So we are going to write a function called Video player and in that we're going to pass in an element, will talk about that in just second, and we're going to write all of our functionality inside of that and then to invoke that function to to say, Hey, I want to use this function. We're going to call it here, so we'll just say, put out the name of the function and then we're going to pass in the element that we want this to apply to. So we're gonna pass in video player like this and remember, from appear are diff tag. This is referencing this. So this is one of the first things with J query Java script. Is that much like with, Ah, a little bit of CSS we've done. You are referencing elements that you've given ideas or classes to in your HTML. So we're telling this function that the element that we want to manipulate inside of our function is this video player element here. Okay, so just keep that in mind as we go through this. This e l is now sort of a placeholder for this element right here. Every time we use yell, it's gonna be referencing this element here. Okay, so the first thing we're gonna do is we're gonna create a new element like this, and this essentially turns this into a J Cray object that we can then use and manipulate. Ah, this is just sort of something you have to do when you're working with Jake. Worries you needed as Ajay Kori object. Otherwise, it's just sort of the raw tag itself. And you can't apply functions to it. And as you get deeper into JavaScript and J crew, that will probably make a little more sense. But now we want a reference our player, the actual player itself. So this is gonna be equal to, and we're going to use our l variable that we just created. We're gonna use a method called Children. And what we're gonna look for in that is our element with an i d of player. Okay, so what this is doing right here is this This essentially right here is saying this is a new variable we're creating. It's gonna be called player, and it is going to reference whatever element gets passed in, we're gonna look in the Children. So everything right here this video and this one ordered list are the direct Children of this parent tag here. So we're gonna look for the Children, and we're gonna let look for the one named player. So now this player variable is referencing this tag right here. OK, so that's the first thing we need. And then the next thing we need is the playlist, and it's really the same idea. So we're gonna do l dot Children are element. And inside of that, now we're going to look for playlist like this. Need are quotes here. Playlist. All right, so now we have we have three variables. We have our overall parent element, which is video player. We have our player, which is just the video tag. And now we have our playlist, which is just this on order list right here. So now we can reference thes inside the rest of our function here. So the first thing that we want to do is we want to auto play the first track when this page load. So I'm gonna put in a comment there so we know what we're doing here. And this this part is a little bit tricky. I'll try to explain this to you, but this is something that you want toe. Obviously, as you get into ah, JavaScript, Jake, where you'll make a little more sense. OK, so we're doing player, and then we're doing this zero sort of these brackets with zero. This is referencing an index. Okay, so when you start working with a raise and array is essentially sort of a list of different items, and when you have an indexed array. What that means is the way that it is is denoted each. Each item in that list is using a number. So 0123 and in PHP, JavaScript most code that it's going to be zero based being the first element in that array is going to be zero the first number, not one as you would expect. Okay, so when we do this right here and we get this player object right here, what this actually does is it gives us a collection off all of the items that match this This sort of I want to call it a query. But this Ah, this designation here that matched this the selector is the proper word. So there's a There's a collection that was created. Now we only have one item in it, but it is still a collection, and so we need to reference the one that's at the very first index, which happens to be the only one in it. But still, we need to reference it. So this is referencing this player zero here is referencing this video tag right here. If we had multiple video tags in here we could do player zero player, one player to etcetera and would reference the different video tags as they appear in the source code top the bottom 0123 etcetera. Okay, so that's ah, something to keep in mind here with this as we go through this and actually just noticed this big red mark over here, I need to put this in quotes here as well. All right, so now what we want is we want the source attributes. So this source attributes here, we want to manipulate that. So we're going to set that equal to, and then we are going to reference our playlist, and now we're going to use a find method, and we're going to do so. Our playlist is the UN order list. Now we want to do the list item. How do you want to do A and again the which is okay, the list item, the a tag. And now we're going to reference the one at zero index again. Because remember, we had now, in this one, we actually have three different list items, so we're only doing list item A, and that's gonna grab all three of these Well, we just want the 1st 1 We were just gonna auto play the first track. Okay, so that's what this does. It sets. Now what? What actually happens here is when we when this line runs here, it actually sets this source element here. It takes this h ref tag here, and it essentially injects it in here. OK, so now, instead of being empty, will have that that that Ah, you are l in it. Okay, so that's what that does. And now we're just gonna do player reduce zero again because that's the one we want dot play. All right, so let's go ahead and give this a whirl and see if it actually works here. And it's reloading here, taking a taking a second. And my son seemed like my server might be having a few issues, But let me And this also is wrong here. We need to set that equal to and do that. So I'm going to save that and let's refresh this. All right, so my server was having a few issues there, but you can see now once I fixed that air. Now, whenever this page loads, if I reload this Ah, this will go ahead and play this year. Okay, so that is giving us our auto place. So that's the first thing that we want is we just And of course, you don't have to do that. But that's just what I happen to be doing here is I'm gonna auto play that that first track when the page loads. All right now, the next thing that we want to do is we want to click to play a track, and this is where we get into sort of most of the code here. So we are going to again reference our playlist element or a playlist tag, and we're going to use a a method called on. And this is something that you use a lot in particular with Jay Query and on Convey using a lot of different ways it can be we're going to use on click. You know you can use on mouse over you can. There's all the different events that someone could do in terms of interacting with a Web page with their mouse or even their keyboard, whatever anything that they could do in terms of interacting with the page. This on element can reference that. Okay, so we're gonna first, we need to tell it what event we want to deal with. So we're gonna do click. So on, click. And then what is what? What are we clicking? What? What event, or what item are we gonna be looking at? So on click L. I. A member were referencing our playlist element. So there are on order list l I A. So whenever we click one of these links, okay, that's what we're we've said so far. Then we want to run this function, which is a custom function that we're going to write. Okay, so this is sort of what's called an anonymous function. You notice out here, this would be a function, and this one has a name. This one here does not have a name. These air used all the time in javascript a query, their anonymous functions like this that you sort of put right into another method here. Okay, so we're creating this function as were put as we're telling this method. This is the function we want to use. This is very, very common in javascript, Jaqua, etcetera. So Ah, and this Ah e right here is referencing event will need that for the first thing that we're going to do here, which is we are going to prevent the default link click action. So the first thing we want to do these are again hyperlinks. So right now, if you click, one of these is going to take you to that particular video. So what we want to do is we want to go ahead and prevent that from happening. We don't want that to do that. And so we are going to and I click that link. So now it's my server May be having some issues here again, but we're gonna do ee dot Prevent? I'm my servers having a few issues here. All right, e not prevent default. And so what's that this is going to do is this is going to prevent that default link click action. Okay, so now when you click this link, as of right now, because we haven't written anything else is not going to do anything. So that stops that from linking to the actual file at this point. All right, so once we've got that, now we need to We're gonna set up some variables that we're going to need. So the 1st 1 that we're going to set up is one called this and this is equal to something that this. Okay, so it looks like this. This looks probably pretty confusing and all. The first time I saw, it was like, what in the world? But this this code right here, where you do the dollar sign pregnancies and then this inside of it. What this is doing is this is this is a shortcut for the item that was Click. So whichever one of these we click that inside of our function here and inside of this anonymous function. That's what's going to be referenced by this, that you do this all the time because essentially what's gonna happen is whatever link is clicked. We were gonna want to get the source for that particular link and populated into the source item up here. So instead of having to come in and figure to try and figure out which one was clicked and reference, you could just use this. So that's the item that was Click. This means this item that was clicked and so this is going to reference this a tag? Each one of these eight tags, Whichever one happens to be clicked any time one of them is clicked. Now, what we're doing here by creating this variable is this is just for performance. We're saving this variable so that we can then use it later inside of our function instead of having to constantly call this because this actually searches through to Don the Dom to find what was clicked and so forth. And there's there's a performance hit there. Okay, so this is just again something that's going to help us performance wise. All right? And now I'm gonna hit Kurt. Current equals zero. What that saying is that this variable current that we're creating here is set to zero. What that means is we're actually referencing this list item here, which remembers this is zero based. We have that in a collection, so it zero based. So we're referencing that first list item here. We're gonna be using that later. All right, now we want to play track on clicks. We're gonna play whatever track was clicked. And so we are going to do player, sort of like we did before zero, and we're going to do dot source, and we're going to set that equal to our This So this reference, the element that was clicked and we're gonna do adder stands for attribute. H ref. Okay, so what this is saying is in our player, which is our video tag up here, we want to set the source of that equal to whatever link was clicked. That's this. And the attributes. H ref. So this a treff right here. So if this link is clicked, we're gonna set source equal to this a treff. If this link is clicked, we're going to set source equal to this a treff. If this one is clicked, we're gonna set source equals. So that's what this is saying right here. That's the point that we're trying to get to. And then what we want to do again is we wanna do player zero dot play, and we want to automatically play that new thing whenever it's clicked. Case, let me go ahead and save this. And so now let me click video to, and that is going to, huh? You come back here and reload this. All right, so let me go video to and that's playing video to. Now we go Video three as soon as video. Three loads than that plays video three. We'll talk about you noticed the videos. They're starting off small and then they're getting big. We'll fix that here in just a second. But you can see now based off of this, whatever video clicks, it starts auto playing here. All right, so that is the basic functionality. Now, we just want to do some sort of final fine touches. So we want to remove the the current Ah, the current class from this first element because this one auto plays. But when we click this one, this one's now the current or this one, it's now the current. So the first thing we need to do is we need to just remove that that class from whatever it happens to be whatever it happens to be on at the moment. So we're going to move class from L. I elements and we're just going to remove it. Whenever something is click, the first thing we're going to do it was gonna move. Remove it from all of them. OK, so playlist find When do l I? So we're gonna find all the list item elements, and we're going to do remove class and current. So we're gonna move the class named current and were just removing it from all of them because it really should only be on one of them. But instead of worrying about trying to find exactly which one is just removed from all of them, because we're gonna add it back here in just a second and that's what we're gonna do here, we're going to do add class to current play list item, right? So current now is going to be set equal to, and we're gonna do this. Remember this? References the anchor tag that was clicked. So we're gonna do, Parent, which is now giving us the list item of the anchor Tech that was clicked. And we're gonna do the index number. Okay, so remember, 012 So we set it to zero, because that's what it is by default. But now we want to get the index of whichever one was clicked. So that's what current is set to now and then we're gonna do this dot parent, and we're gonna do add class, and we're gonna add current like this. Okay, so this is going to then add the class, add that current class to the parent class of whatever was clicked. Okay, so that's that's how we then add and remove that class from whatever item happens to be clicked. Now, that's gonna come into play when we do our CSS. Okay, so this is just some fine tuning. But basically, whenever we click one of these links, the list item that we click is going to have the class current added to it, and all the other ones will have it removed. Okay, So that's the That is the J. Craig. Don't Don't get too freaked out. If it doesn't make a ton of sense right off the bat, I'm This is something that you know is probably a little bit. I want only states advanced. But this is not the first thing that a lot of people do with Jay Query a JavaScript. But I really want to throw you sort of into the fire toe, help you get your feet wet and have some sense. And then when you goto take no some other course or tutorial on this, it will be a little bit, hopefully easier for you. All right, So now that we have that done, then what we want to do is we're gonna go ahead and style this, So I'm gonna set Ah, the video player. And I'm going to do Max with and 700 pixels. That's just something that I decided on. And when do margin? We're going to 35 pixels and auto like this, Okay. And then we're gonna come down, and we're gonna do the player, and we're going to set the actual player width equal to 100% of its container, which is this video player element here. So now the width is going to stretch that 700 pixels here. And we do that because when we get to the playlist, you'll see we sort of do the same thing, and then we're gonna do height, auto. And so the player itself, the video player, is gonna be 100% of whatever container it is. And then the height is going to adjust itself. So if we change this to 800 you see, the video gets bigger. If we changed it to 200 hopes 2200 you see, the video gets smaller, it adjusts with whatever we change this to in the height. Adjust automatically with it. Okay, so that's just one sort of way of doing this with CSS. Now we're going to style the playlist, and the first thing we're going to style is the actual one ordered list element itself. So we're gonna do margin, we're gonna set 15 pixel on the top, create a margin across the top that we're going to 000 and then we are going to do padding zero. And then we are going to do list style type none, and that gets you. See how now we got rid of the bullets We moved over, got rid of all over the padding that was pushing these over. And that gives us, ah, list that we can then sort of, ah, starting point that we can start messing with this list of a little bit. Now we're going to actually style the list items, which is where most of the code is. We're going to l I A a and we're going these air just sort of stuff that I came up with when I'm gonna set the color to sort of a greatest color, which is 555 So, you see, the links just changed color. We're gonna display these as block elements because, um, anchor tags by default are in line elements. So we're gonna Splain is blocked because we're going to then be adding some sort of design and styling to them New margin bottom. And we'll do negative one pixels like this and we'll do text decoration, none like that. And then we'll do padding 10 pixels, 20 pixels, You see, that gives us a little bit of space around. Our elements will do background as white like that. And then we'll do a border one pixel solid, and we'll do f seven like this so you can see that gives us a little bit sort of a neater looking design here. Obviously, it's not necessarily the the most fabulous design ever, but it gives you a basic idea of how to style this right now we're going to style whatever the current item is, we're going to play list and we're going to do l i dot current and we're going to a And now what we'll do here is will set the background. Actually, uh, I was just set the color and we'll set the color too. 222 So that one that will be a little bit different color than than the default color, which is the 555 Okay. And then the last thing that we're going to do here is we are going to though. This is a little bit more of an advancing with CSS. But we're gonna add some contents were going to play list, and we're going to ally dot current a and then we're gonna do before. And so this is going to this Essentially allows us to insert stuff before the tag, the text in the tag. And so we're going to do content, and we're going to do now. No. Now playing. You see, as I'm typing that it's inserting it before this element here. So that's what that allows us to do. Um, and then I'm gonna do font style. The Talic like this. So now we have this now playing sort of thing Here, let me just refresh this year. So when the video load you see, it's now playing. If I click video to that one is now playing video three. That one is now playing Okay. And of course, you could go through here and do some more sophisticated styling here, but this gives us sort of Ah, a decent little kind of playlist. It actually works. There's a little bit of styling to it, Um, and and you're pretty much good to go at that point. So that is really hot and heavy. Kind of fast and quick Look at sort of an introduction to CSS and and And JavaScript is not meant for you to understand all of it. It's really more to challenge you to snout dive into this stuff since you've been through Ah, the HTML course. Dive into CSS, dive into javascript and, you know, start here. And if you can get this working, then you know you can You can be confident that that you'll be able to tackle CSS Ah, and JavaScript. So try and do this this by yourself at first. You know, obviously use the code at as you need to, because that's all brand new to you. But try and actually build this and get this working and go through this and understand how it works and how you know, changing different parts, changes things and so forth and try to get your head around it. And again, it's meant as a challenge. Not as you're supposed to know how to do this so that'll do it for this video. Thanks for watching. We'll talk to next time. 30. Class Challenge: all right for the class project here. What I want to do is I want to give you another challenge. So what I've done is I've gone through and I've created this site that you see here in front of you. And now this isn't necessarily the most sophisticated thing, but it does use a lot of CSS. Come over here. You'll see there's quite a bit of CSS over here. And the reason I wanted to do that is because really, after you've learned, HTML CSS is the next thing that you should dive into. And so I want you to sort of look through this look through this code and as your class project, take this on as a challenge of of learning this code and sort of how this is built on what does what. And you know, I'm not gonna walk through and show you this. I really want you to take this as a challenge for yourself and and sort of dive into this and figure this out and build something similar to this. Ah, and then post that as your class project so I can take a look at it. Ah, and then leaving any feedback and see how you did and really just sort of celebrate you, you diving into it and getting it done. So again, take this as another challenge for you to dive into and sort of get your feet wet with CSS . There's a ton of it here, toe learn from. And one of the best things that you can do in order to learn coding is to look at other people's coat. Now, keep in mind, I'm not presenting this as the absolute perfect or only way to do this. In fact, I did This specifically avoided things that we did not talk about inside of the course outside of this Ah, this responsive part here I just couldn't give you I couldn't give you a sight that wasn't responsive. But, ah, responsive design is really heavily in CSS. But everything else that's in here is sort of pretty standard. Kind of. I kept it basic to to CSS um didn't get into anything with flex box or CSS grid or any of that. I wanted toe give you sort of just raw, straight CSS. So this is ah, a good way to learn some of that stuff and see that you can do things that way. And then when you get into those other things, um, they make a little bit more sense. Anyway, again, as your class project take, this is a challenge. Go through this. Learned this and try to build this as much as you can on your own or just build and build it a couple times and get to the point where you can build it on their own. However you want to do it, but again challenge yourself with this And and this, of course, is your class project. To get this coach is just go to the Project Class Project section. You'll find all the source code for the course attached there, including this one as well. Alright. Appreciate you taking the course. Of course, if you want to see all my other courses get into PHP, you wanna learn freelancing, get on up work, all that sort of thing that then definitely check out my ah profile and see all of the different courses I have available WordPress course etcetera, and I look forward to seeing you in those other courses 31. Next Steps: I'm honest there's no more. So online.com, so little housekeeping to finish up this course. If you haven't yet, be sure to head on over to the class area. There is a class section for some, some steps for you to walk through for this course. So be sure to head over in that it's under the discussion in Projects tab that you'll see on the course. Also, if you head over to my profile, be sure to give me a follow on my profile here so you'll be notified when I release new courses. And I also have an ongoing sort of weekly podcast style course called Let's Talk freelance. So if you would like to have sort of access to ongoing training regarding freelancing and online business and so forth. Be sure to check out that. Let's talk freelance course as well. And finally, I do have a daily tips newsletter on my website at John Morris online.com. If you head over there, you can sign up to that mailing list. You will also be put into my own, my very own mobile app, or you'll get access to over 78 hours of free content at the time of this recording related to freelance and so forth as well. So if you're interested in that, BD sure to check that out as well. Again, that's John Morris online.com. All right. Thank you for taking the class. If you enjoyed it, I appreciate you for You. Leave me a review and we'll see you in the next course.