Transcripts

1. Introduction to the Course: hi guys. And welcome to the ultimate Web developer course. We're gonna be learning three very specific technologies in this oddity. Of course, the 1st 1 is HTML, which defines the elements on a certain Web page so you can text in a You know, that's basically where you tell what needs to appear on the screen. We're then gonna be learning CSS or cascading style sheets and that defines how those elements look. And then we're gonna be finishing off the course with a little bit of JavaScript, which is behavioral, as shown in this image here. And what that means, basically, is if I click an element on a Web page. JavaScript is a bit of code that's running in the background, and it's a listening for button clicks, for example, and when I click a specific button, the JavaScript can be programmed to perform a certain function which manipulates the page content. So if I click this X here, it closes that, and that's a bit of JavaScript. It's running on this website. So again, what we're going to be doing is we're gonna be learning html five CSS three, and then a bit of Jake weary actually, So Jake Weary is a framework for JavaScript. It's simplified. It's meant for rapid development. But I would also like to teach you guys full on JavaScript as a programming language because there is so much potential for that on its own. But I don't think we're gonna have time in this course to do that. So I'm most likely going to be putting on a specific, dedicated JavaScript course after this. So if you guys want to learn that kind of stuff, that's gonna be awesome. So look forward, Toa So without any further ado, let's get started. 2. Atom Setup: All right, guys, Welcome back. Let's get started writing code. And so first off, I just want to be very upfront about this. There are multiple ways to create websites. The most common one is to actually write the code in a text editor. However, there are methods where you can use a site builder or a graphical tool to point and click website into existence. And we're not gonna be covering that. And I would recommend against that at all times, Um and is because first of all is very limited and restrictive in what you can actually do . You have so much less control over the final version of whatever you're building than if you write the code. And if you're gonna be a Web developer, you are not allowed to use a point click Web site creator. So now that that's out of the way, we need a good text editor to write this coat. Now, when we think about a text editor, we think about maybe Microsoft word or no pad. Even if you're on windows and no pad, we can definitely write the code that we need right in here. This is a little bit of HTML, and we can totally right that and save it. And that would run in the Web browser as HTML code. So it is all text. That's all a website really is. However, this lacks a few fundamental and basic features that we need nowadays when writing Web pages. And that is first of all, syntax highlighting, as you can see here on the page. Behind this is syntax, highlighting its a different color for each type of statement. Ah, within the page. And so this makes it incredibly easy to read through and navigate through the code that no pad just doesn't have. And the 2nd 1 is auto completion or code. Completion of what this means, basically, is if I open up a tag here, what should happen is the closing tag would appear on the right hand side of my cursor. My cursor would stay here so that I could just start typing. That's another very important feature, and no pad lacks both from So what I need you guys to do is go ahead and go over to adam dot io a t o m d Ohio, and we're gonna be downloading this text Editor so just click the download button. If you want to see other platforms, click that other platforms link of your on Mac or Lennix. I mean, if you're on Lennox, you're probably gonna be installing from the package manager anyway, so that that's not gonna be a problem. If you guys are nude Olympics and need help with that, let me know in the discussion for this video, and I will try and help you out with that. Make sure to get the correct version. If you have a 32 bit system, do not download a 64 bit installer. If you have a 64 bit system, feel free to download a 32 bit or a 64 bits dollar. However, I recommend the 64 bit installer. If you have a 64 bit processor and operating system Now that that is out of the way, let's go ahead and launch it. It's gonna make you install it, and it can take a few minutes. So if you guys want to pause the video now, that would be great. Now what happens when you launch the text editor for the first time? You see this welcome screen, and we need to just close thes files here. So there we go, and I'm not sure that's loading from my ah, Web server directory. Interesting. Let's remove that folder. So what we're gonna be doing in this video, we're gonna be working within here now has a file browser on the left hand side, and it has the code. It will be a tabbed interface right here. So what we're gonna be doing is right. Click here. I want you guys to click Add Project folder. And what you need to do is find your project folder. If you don't have one yet, create one. I like to keep my projects all within a projects directory and then each one in its own directory inside that. So for this course, I've created a web course directory. We're gonna be using that right now. It's empty. Once you guys have your folder added to the project, I hadn't right click and click new file and we're gonna name this index dot html. So all html files that we create are going to have the html extension, and this is what you're going to see. Ah blank text editor. So what we're gonna do. We're going to do something really simple right here. And so I have the ability to open open in new window. Okay? Drag it. No. All right. We'll go ahead and open this in a moment. What we're gonna do is type out. Just hello, world. So no, no tags right now, we're just gonna print out some text. I'm going to save it. And then here's my project directory here. What I'm gonna dio isn't gonna drag and drop it into chrome. It's gonna open. As you can see, there is my text exactly as I had written it here. So you've just written your first web page, Go out and make some money. Um, what we're gonna be doing is, uh this was just a basic example to help you guys who set up. So in the next video, we're going to start learning about the individual tags And what on HTML tag 3. Intro to HTML - Document Structure: Welcome back, guys. What we're gonna be learning now is about html tags and what attack is so basically in HTML , you're gonna write text in text, but for anything that's not text, you need to use a tag for and there's a lot of these we're gonna be covering. I think all of you know, there's probably gonna be a few older ones that I'm gonna leave out, And that's just because you most likely will never have to use those, and I'll try and mention them as we against them. The first thing we need to do is erase the text here when you build an HTML file, tags are contained within pointy brackets like that. So you open it, you type the name of the tag here, and then you close it. We're not gonna be writing tag because there is no tag names tired. What we're gonna be doing is when we open up on HTML document, you need a my God. All right, when you when you start writing and html document, you need to open on on html tag. So just html that wraps around the entire page. So anything you write in this page is gonna go between these two tags now. It's also good practice to in dende whenever you open a new tag. So there's two top level tags that we need to use to build the page. I guess we don't need to, but we're going Teoh. The 1st 1 is head, and that's gonna close right there and then body. I'm gonna need to configure code completion on this because I don't like how this is working now in the head tag. This everything that's in here will not be shown on the Web page. But it just tells the browser a little bit more about, um, about the page itself. So, as you can see up there, that's by default. Going to show the, uh, the title of the document where the name of the document or file, which is index dot html. But I can go ahead and put a tag in here in the head called title, and then I'm going to just write whatever text I want to appear on the window title bar or the tab. Depending on what browser you're using, we're gonna go ahead and save this, and we're gonna refresh this And now, as you can see, the title says my title and it is not printed out in the page. So in the head tag or in the header, the website. There's a lot of tags that we're gonna throw in here that's gonna provide information about the Web page, and it's going to include resource files. When we get to CSS, you guys will see this, but basically, just remember that the head tag, anything that goes in there is not printed on screen a supposed to the body tag. Every bit of content that you put into a website that's not supposed to go with a header should be within a body. And so if I write hello world here and save it, you're gonna see that appear on the screen. And so this is the basic structure of a Web page on, and you can we're going to get into a very basic HTML elements in the next video in the next few videos, actually, and we're gonna be learning how to use them properly on all that is going to be within the body element here. So on element, I'm not sure if I mentioned this button element is the opening tag, all of the content within it, and then the closing tag itself. So this is one element. This is one element. This is one element. And then also this is so that's a little bit about the basics of HTML structure. What we're gonna be doing in the next videos again getting into some basic tags. 4. Elements - Div, Span: Welcome back, guys. So let's get into the actual HTML. Um, we're gonna be learning about tags. So again, a tag is like this and then also the closing version. And the closing tag is just the exact same as the opening tag, but it's preceded by this little forward slash, So just remember that. So we're gonna be talking about I'm just going to make the body of the document a little bigger that we can actually right in this and also in HTML documents. If you skip a bunch of lines and write something here and then here when you load it in the browser, it's not gonna do that. It's going to show on the same line. So that's right. And then way down here, let's right world on. I'm gonna save it and refresh. As you can see, it says hello, world If you don't believe because that's what it said before, Maybe you didn't save. I'm gonna write. Hello, Nic. And there you go. So there are ways to brake lines and one of the easiest ones and probably the one you're going to use most is a div element. So a development you open it like that. And you close it like that and then you can type stuff here. So let's say hello. This is a div and save it and let's refresh, and you see that that appears in the same way. But now if I go and put another development under at, say, this is a different or div rent like what? It is there. All right, I just accidentally zoomed in, which is another point. Um, you guys are gonna need me toe zoom in. Uh, what is this, uh, control shift equal? I think that's good. Um, yes. So basically what I do these courses I have ah, 10 80 p screen and some some of you may not. And so trying to read Ah, high resolution text on a lower resolution screen is very painful. So I apologize that I completely forgot that up until now, but now it's bigger. So anyway, when we save this and refresh, you're going to see that did do a line break. And that's because developments by default are full width. Which means if you put another div, it can't go anymore on this line, so it has to appear under it So that is what a div element is. It's called a block element. So in HTML and CSS, what block element means is that it is, however tall it needs to be or however tell you, specify it and then it's the full with. That's what block means. The opposite of a block element is an in line element, and it does. It is not, for with it is only as tall and as wide as it has to be, and that is called a span element. This is in line. So, um yeah, so if I type hello, how are and then dropped out a few lines, you do what I've done. There is, I've created to span elements that look. It reads as though it should be only one line. And if I refresh, you will see that it is only one line, and that's because this is one span element. It's on Leah's. Why does it needs to be? And then this is the other one. We open up developer tools. This is something else that you guys are gonna have to no control shift. I brings up developer tools. This is what we need. So let's look at a few things when I have her over things in developer tools here, this kind of highlights the elements on the screen. So, as you can see, the body element is full width and full height and in the bottom left if you look at the bottom left of my browser, Russia, if you can see that, um, it says the exact width and height in pixels that's need if you need to know that now, in chrome of the Element's width and height, the actual size of the element is shown in blue margin, which specifies how much outside room there is Teach Element is orange and then patting his green. We'll get into all that after that's gonna be more into the CSS. You guys will see that before, though, so let's drop down into the body and you can expand each tag here within developer tools. And what I'm gonna do is hover over each of these things and look how it's highlighted. You can see that this now is the full width. Now there is space to the top on besides of it, and that's about 10 pixels because the body has a margin of 10 pixels. So this element is contained within this. This cannot be the entire width of the page of the page itself. It can only be the entire width of its parent. So developments look like this. They're full with of their container parent and then span elements, in contrast, look like this. They're only as wide as they need to be. And that's why developments will show in different lines and span elements will show in the same line and the last you tell it not too. And that's also CSS. And we're gonna be getting to that as well, but not right now. So again, developments are full with span elements are only as the as wide as they need to be. And there are other differences and we will get to those as well. For the most part, this is the main difference between the two. And admittedly, these are gonna be two elements that you use most in creating a web page, but we're not going to use them exclusively. There is a name for that. When you open up a Web site and all you see are developments that's called Def soup and that problem has been solved with HTML five in the introduction of new elements that we can use instead of developments. And we're gonna be discussing a lot of those as well. And I'll point those out as we get so again just to recap, you build an element by opening and closing it. And then the content that you put within it is part of that element. The entire element is that right? 5. i, b, p, a: all right. Now where we're going to do is those air kind of top level elements. We're gonna be talking about more in line elements and it's going to be used to style eyes , different pieces of text or content. So the 1st 1 we're gonna be talking about is the I tag. It is literally the letter I and all it means is if you put a word or even just a character inside of it. So, as you can see, this is now an eye element on it wraps around the word div. What's gonna happen is the word div on here is going to appear italicized, which means it's kind of slanted right along the same lines, a B element. We just wrapped the word different here. B means bold, and it's going to make the font very heavy. It's going to make it thicker, give you the next element we're gonna be using is a key element. And this is a block elements. So it's more like a div, and it's kind of a replacement furtive. Let's say you have whoa, the need for a paragraph and this is a Siris of words blah, blah, blah I'm just gonna copy And paste is a bunch of times that we can see a really big element and how it wraps. Refresh this. You will see that this is now a block element is the full width of the page. And then if we copy it the entire line, I'm gonna remove that other span element. And I put that here underneath it and I'm gonna scroll left. You guys couldn t this a bit better? I'm going to save this now. We have two paragraphs and what should happen is they will display with a space of a single line between the two. So that's what a paragraph does it add space above and below each p element, uh, which helps it read more like more like paragraphs. Now, in contrast, if you were to do that with a div, there is no space between like, there's no space between vertically between the developments, unless you specify. And we're not into that yet because that is CSS. So those are some in line elements and there is one more than I want to show you guys. And that is the a element. And what that does is create a link. Save this and refresh. Did I say this? Maybe we actually need to put, uh, a draft, so ah, link on its own doesn't do anything. What you need to do is at a property. So so far, we've learned about elements Very simple. You just open the element, but texture, content, or an image or whatever within the opening and closing tags, what you can also do is specify properties, and how you do that is within the opening tag here. So I'm gonna do it for the A element. You put a space, and then you type the name of the property you want to set, and this can change the appearance or functionality of certain elements and will be visiting this more in the future. Um, what we're gonna do is add h raff, which means hypertext reference. So this is a link. Basically, it needs to point somewhere after the property name, you put an equal sign and then quotations. Ah, there's a bit of code completion notice when I opened quotations that closed it for me and put the cursor right in the middle. So what we need to do at this point is, tell the a element what it is linking to so that when someone clicks it, this property is responsible for getting them to that page. So for now, just http google dot com I'm going to save this and refresh. And now you see this looks like a link, and if you click on it, you'll see it takes you to google dot com so you can put any web address here. You can even put no web address. If you just want to have a link that doesn't go anywhere, you can just put a number sign there within the quotations, and that's setting the value of the property. H, Raph $2 the number side there. And then if you click, it doesn't go anywhere. But it does add this to the URL, and we're gonna be discussing this more later. That's amore advanced concept. I think on we're gonna be discussing it later. Right now, just know that if you need, you are. Or if you need a link on a page without actually making it, go somewhere. That's how you do it. Or I think you can even do this, and that will just go to itself. So again, in this video, we learned some single character elements, like the I element, which I tallis, sizes, text the B element, which makes that text bold the P element, which is kind of like a div. It's full with its a block element, but their space above and below it. And then we also learned about creating links on as you guys noticed. I didn't specify, but you guys have noticed whatever is between the opening and closing tags of the A element is what the link consists of. And this is kind of obvious because every other element follows the same. And we also learned about a property and these air. We're gonna be getting more into these later. I first want you guys to be comfortable with everything else I'm teaching you. And if you don't feel like you're getting it yet, don't worry, because we're gonna be doing ah lot of this. And I'm a firm believer that by doing, you learn. So let's continue 6. ul, li, ol: All right, guys, welcome back. What we're gonna be covering in this video more is, um, is basically just lists. So there's two important elements that are both components of the list. One is the actual list, which is a U L element. And then for each item in the list, there's an ally element. So we're gonna do is destroy all this stuff. I'm gonna leave my two paragraphs there, and I'm going to create a non ordered list. That's what you l stands for and close it right there. And this, on its own, does nothing by refresh this page. You will not see anything from that list. But if we look down here, it is created. This is another block element. Now, we're gonna go ahead and create a list item, and we're just going to list off our favorite, uh uh, games so all out for right now. That's the one I'm playing. Actually, I have almost completed it. Uh, Witcher, hold on. That's not a tag. There we go. Ally Element. Uh, I know. I see. And then close that l I we're gonna save and refresh. As you can see, it has created a list. Now, this doesn't really give context to what this list is. So I'm just going to create, uh, Dave right here and say, my favorite video games. Let's save it. Refresh. And there we go. Now, alternatively, see, this UL creates the list structure and the inside of this, the l i elements each have a little dot left hand side and again, Ally means list item ul means a Norden list. But if we wanted to change this to an ordered list, we will save it and refresh. And now we have numbers now? Yeah, basically, that's how that's how you create lists. So just remember that generally the tag that you're creating is somehow corresponding to the actual thing it creates. Um, I'm not sure if given means biter or division, but I'm sure it means something like that. The P element means Paragraph ol is an acronym for ordered list and you l is unknown ordered list. And he can also change the properties of these. We're not gonna be getting into that too much. Now we're just covering the list itself and what it does. No. Yeah. So that's that's really easy. And you can continue. Ah, listing things. But also, uh, let's go ahead and do this. We're gonna create first an ordered list with the ol tag and refresh their and then within this last element, let's move this up, actually, so we can see it between these two, See how it's gonna print down within this list. What I'm gonna do isn't gonna drop down at the end of the word there. So we're now using multiple lines to display within the code, the list item and what we're gonna do right here. We're gonna create an A northerly list, and we're gonna list our favorite final fantasy games. So seven, obviously, and then, um 15 was pretty good short, very short, but good. And then nine, There we go. So let's save this and refresh. And what you will see is that it's created a sub list. So this I don't want it to look too much too confusing to you guys. So what I'm gonna do is breaking out of it. Okay, so within this single list item, and when you put your cursor right here, it kind of highlights the closing tag of it. So within a single list item. You put the text of the actual content of that list item, and then you can create a sub list by either using the UL or the ol and notice that sub lists are by nature going to look a bit different if he used the A nordeste. And you can also change this to use letters if you want. And we're not going to get to that right now. So on. You can continue. If you'd like. You can continue on maybe within seven. Here. You might want a list what your favorite characters were from and then, you know, you could continue going, but we're not going to do that. I think this is sufficient for right now. You guys now know how to create lists, and with CSS, we can change these. So it's horizontal. Ah, we can change this to a drop down. So when you hover over this, it's gonna drop that down, and that can be done in either CSS or JavaScript. And we're gonna be discussing both methods once we actually get into that kind of thing. 7. Header, Footer: Alright, guys. So a few videos ago when we were looking at developments, I told you that it's really bad practice to use a div just because it's a block element just because it's full width. It's really bad practice to use that for everything. Just because, you know, it makes it like that. So what we have in HTML five is the introduction of new elements, and we're gonna be covering those in this video and the next one on their block elements that are used to arrange the content in a better way. So let's say I have a header. Basically, just says the name of the site. So I'm gonna create as a div right here, and I'm going to write my site. Now I need this to look a bit different, so I do have to add some properties to it. So what I'm going to add is a height property, and it's going to be ah, 100. That's 100 pixels high. So I'm gonna save this. I'm going to refresh this and now this is a day of at the top of my site that says It's my sight. It just shows the title maybe I don't want to show my navigation up there to links to other pages within the site itself. However, I'm not gonna jump into that right now. Instead of using a development which does not specify what type of content this tag includes, we're gonna use on HTML five Header of it and this is not a header or this is not a head element. So within eight, an HTML document the head of the document just provides meta information. But within the body you can use a header element. That's four. Content is just like a div, except when you're reading through the site, that looks a lot better and you know exactly what's in. And it looks the exact same, because again, it is a block element. Just like a give is just a lot better practice to use more appropriate tags where possible . So along the same lines at the bottom of site was created, DIV. That says Copyright 2017 and I'm going to see that and refresh. Now this looks a lot like a footer. And so in that case, instead of doing this right here as a div, we're going to be writing footer. So Footer is another HTML five tag that didn't exist in HTML for and we're always gonna be using this at the bottom of a site if it better describes the content within it than a div does. And so, in this case, this is most definitely footer content. So I'm going to wrap it in a footer, and here's a free one for you guys. You can make a copyright symbol and ask you by using an inside and in the word copy and then a semi colon. So this we're gonna be getting into this as well. These air HTML entities, I believe it's just asking characters. It's a way to code in asking characters. So if I save this and refresh, it shows a copyright symbol there, and you can also do these with other things. And I can't remember any off the top my head right now because I don't use them often. But if you need to put more than one space between words, for instance, eight CML doesn't like that. It only will recognize the first space character. But if you want more than that, you can use another asking character called uh, and as well done. What is it? And BSP? Yeah, that is OK. Nbsp So you can, um I'm not sure what it stands for. I just know that it does this. You can copy and paste it. And now you'll see that we're getting a lot of spaces in between. Here it is a space character that makes the HTML recognize it and print it as a space. So, but more importantly, in this video, what we did was we learned about these html five elements. Header and footer. Now, if you guys don't have a web development background, these are going to be new to you, and you're not gonna maybe see the problem that these solved. But if you have done a little bit of web development in the past, he will know exactly the problem exists here. And what I'm gonna do is actually I'm gonna look at the source of this page right here. Okay? This is a perfect example. So you see all these dibs here If we go down, We Seymour and more and more. This is Div Soup people. When a website is made up mostly of dibs, where it doesn't have to be. Oh, they have a footer. Okay, cool. So they But then in the within the footer element, they have a deal with the class of footer. Um, so they just kind of I mean, they could have applied the styles that applied to this class directly to the foot or tag, but they didn't. Ah, And up here they have a top are this should be ah, header element. As you can see, it highlighted there. That is most definitely the header of the web site. Um and so this is what Dave Soup is. And with HTML introducing all these other elements that we can use in place of developments , it makes the document neater and easier to read through. So that's why we're learning these. 8. Section, Main, Article: All right, so along the same lines is the previous video, Um, where we learned about elements that we can use instead of gives. I'm going to destroy all the content within here and right up front, we're gonna be learning about a line break. So I'm gonna save this. So you guys could see how it looks. Now, See, this is shown right there, and that's shown right there. We want space between them. So go ahead and create an element. Now, you would think this be our or break element used to be written like this, but it doesn't. So there are such thing as self closing elements within HTML. This is wrong, by the way. Uh, this is right. So if you're creating an element that doesn't have any inner content, so in her content is this stuff between tags. If it doesn't have any of that, you can create certain elements like this image tags. Another perfect example we're gonna be learning about that is we're gonna copy this a few times, and this is generally bad practice, but we haven't got into CSS yet, so this is the only way that we can reliably brake lines as we need them. As you can see, it's now put in all these single lines between the content. So what I'm gonna do is I'm gonna create some def soup. Ah, with an a element here. And for all intents and purposes, let's just imagine that it links to somewhere Riel. Uh, and then we needle. Wow, we can just use a paragraph. So this is a sample text for the article that you will be reading. Okay, close that element there is going to save this and refresh. Cool. So we do see that now this works. If this is what the page waas This would work. However we can use html five. I'm gonna show you guys. Okay, so I got a bunch of those, and they're all in a day of and it looks messy, but on the front, it looks exactly how we wanted you. Let's say that this was a news website on each one of these is a different article. Links to a different article. Why use developments than when we can actually use the html five article? I love it. And if you save it and refresh, it looks the exact same. The only difference is now, without even reading any of the internal content of this tag, we know that it's specifically contains an article. So I'm gonna go ahead and delete all these developments. I'm gonna copy this. Look, that looks a bit messy, but we know just by looking at we don't even have to read it. We know that each of these contains an article, and I'm gonna refresh. And as you can see, it doesn't look any different because it does the exact same thing. Except in here. Now it looks a little better as we see a header. We see articles, and we've actually don't have to use any device in here. But let's go ahead and add one. So, um, this is gonna be called main. I'm gonna drop down right to the end, and I'm going to close it. If I say that and refresh within the page, you will notice that it looks even better. Now there's a header, there's the main content area and then there's a footer. And inside the main content area, there are there's a Siris of articles which contain links in paragraphs. So this structure using these tags does appropriately convey what's within those tags. We know that this is obviously the main content without even highlighting and seeing what it contains. We know just by reading the tag name that main must be the main content of that page. And, uh, we also have sections, so I'm gonna end in in Dent. These articles actually go. So let's say we have multiple sections. Ah, we want to have a section with all the articles in it. And then we wanna have a section called Like About me. Maybe it has some information about the site and then a section for contact forms. So what we can do is use the section. Did I just get turned? On section is another html five element that we can use to avoid using dibs. I'm gonna go ahead and create a section here and make it say about me. Some content would normally oh, here and then another section, and we haven't learned about creating forms yet, so I'm not gonna form in there. But just imagine that this is a great big block attacks, maybe an image, but it is its own section. We can logically, uh, when we think about this page, we can logically section it up into a contact section about me section at an article section a refresh. And now, if you look through the code on the right here, we see Okay, we don't need to expand this because we know what's in here. We know that there's a title element. Maybe there's some meta tags. Maybe there's included Resource, like a style sheet. We don't need to look at any of that. If we don't need to look at it within the body, we know what's in there. All the content of the page. We know the header. Okay, let's say we're trying to locate on articles link maybe just to see ah, what it links to which I mean, you can totally have her over there and see what it links to. But we're looking through for something specific. So we're gonna go into main because it makes sense that everything's in Maine. We're gonna open up a section and we see articles in here, so we know that it's one of these and we know that feeling cause right there, So with sections you can kind of section off in your content logically, and it allows you to again keep things clean. And that's a big, big part of Web development. I want you guys to really pay attention to the code that you're writing. If it doesn't intend properly, fix it. For instance, if this indented like that, I would not leave it like that. Maybe I most city about this. I'm not sure, but it should look clean and balanced. Everything should be in the correct spot. An indentation matters very much. If the indentation is off, it's not going to break the page or anything. But it's going to make it really difficult when you come back to it to expand on your work and add things to it. Um, you know, you can tell about how far in the content is. If it's indented way over here, you know, it's in about, you know, 10 different elements. It has about 10 different parents. So that's why that's important as well. So for right now, those air all the HTML five elements that we're gonna talk that were introduced with eight about five specifically to resolve Div Soup. So remember, if there's one of these elements that makes more sense to use than a div, use it, please 9. H1-H6, Aside: Alright, guys, I'm actually gonna destroy a lot of this content again because in this video, we're just talking about I shouldn't have done that in this video. We're talking about titles or an HTML. They're called heading. Drop this down so that we have my site text on its own line. And when we look over here, we see it just looks like regular text. But let's say we want people to really notice it. You know, if it's the name of your site and you want people to really remember the name of your site , you're gonna wrap it in an H element. Now there is six different levels of the H element. There's each one right up to age six, so each one is going to be the biggest. I think it's like 50 pixels off on size. So if we refresh this, you're going to see now that looks a lot bigger. So that's obviously our title. It's the biggest bit of text on the page, but let's say also and these are block elements, by the way, So they are full with Let's say we want to add a subtitle. So what? We're gonna dio H two would be a bit too big. So we're gonna use H three and then we're gonna close that age three element and save it. Is it going to make a header that's a bit smaller or heading small and again you can do H one h two. Change that. It's a bit smaller H three as it goes on and gets smaller right up until age six. This is the smallest text on this page. There we go and refresh, and you're going to see that it is tiny. So the lower the number, the bigger the text, the higher the number, the smaller the text. Keep that in mind on then Also, we have a side. So again, that's I lied in the last video. I said we weren't going to be doing any more HTML five def soup, uh, of mitigating. So that was alive. What we're gonna learn about is the aside and this is good for if you actually have content side of something. Eso This is some. Refresh this, and as you will see, this did not go on the side. But it says aside eso. What we're gonna do is, you know, It's kind of like, um, it's secondary to the main content. Let's say that Ah, what we're gonna do is don't worry about this. I'm going to make it float left, and I'm going to make it 200 pixels wide and 200 pixels high there. I don't worry about this. This is all CSS This. We're gonna be learning about that later. But I just want to show you guys how this should look. So if you have an aside element and you want it on the actual side, throw it in there and make it float on the left. 10. Tables: All right, guys, Welcome back. I hope you guys air following along and writing the code with me because again, the best way to learn something is to do that thing that you want to learn. As you do it more and more you'll get better and better at it. Through repetition comes perfection. So what we're gonna learn in this video is about tables. Now, in HTML, a table is a way to create Ah, grid view of data. So you have Rose and you have columns. So let's create a table. I'm going to remove everything within the main content area here. I'm gonna keep the main content around in here. I'm going to create a table so the HTML element is table and we're gonna drop down here and close it. Now it's able you will be creating on multiple lines elements like an age to element or span elements, you know, links and stuff like that. You will be creating on the same line. But there are certain tags that you should create on multiple lines just because if you didn't, they would so long that you have to scroll left and right. And the idea is. You should not have to scroll left and right on a page. There is actually a hard limit at 72 characters. I believe so over about here. And I think we could set that fire. Oh, there it is. Okay, so it's already satisfy that. Looks like about 80 characters. I'm not sure we're not gonna worry about that, but basically, you don't wanna have text that goes way beyond that. So you would create on multiple lines. Now, within a table. There are two top levels. There is the table header, which contains the titles of each column. And then there's the table body that that contains the actual data. So for this, we're gonna go ahead and head and create T head. Now, a T head is a table head, and what it does is again it prints out the titles of Thea of each column. So we're gonna create uh, a three column table. I'm not exactly sure what we're gonna be. Ah, putting in the table. Let me think about that for a minute. In the meantime, let's create a row within the table head. So a TR is a table row. It's an acronym. And within this row, it's gonna be printed out. Left right in. However many columns we in a column in the header of table is defined by the H and this I should create on the same line because they're gonna be this is gonna be the actual headings of each column. So I want to create, um, pizza menu. So we're gonna if you guys have ever seen a pizza menu, uh, which you most likely have. There are multiple columns and rows. So the left side is the type pizza. The next column over is ingredients. Maybe on the next column over is size. And let's just leave size out for now, put price. Now, if we save this and refresh our page, we will see this. It just looks like regular text in a line. And it's supposed to at this point, once we start adding that off the table will grow to however it needs to. We could also specify certain size parameters within HTML through you know, the properties of our attributes of an element or through CSS. And we haven't got today that so. The first pizza up is the classic. Create a row for it now The T H elements are e just sell. So we've created a row. And in this road there are three cells which are their own individual elements in the show like that within the tea body within the rose in the body, you're gonna create the elements instead of t h and T D stands for table data, I believe. I mean, I could be wrong on that, but regardless you need to use E d elements. I find it's helpful when you know what each element means, and it will help you remember it. So if you need it, you can be like, Well, I need a table data element O t d. There it is. So the 1st 1 pepperoni ingredients for this one is going to be, Yeah, Peroni and Mozza cheese. And then the cost is going to be 18 99. Save it and then refresh. We'll see our first pizza. Awesome. Let's go ahead and create another table row and go up within the element here. So again, we're typing everything between the opening and closing tag. I think you guys have got this. You guys are doing great. 2nd 1 is going to be meat lovers, and this is going to have a ton of stuff on it. There's gonna be a good pizza. So the ingredients is pepperoni, Italian sausage, him, uh, bacon. And what other kind of meat you get on a meat lover's pizza? I think that's good for now. Oh, no. Ah, yes, salami. There we go. That looks like a good pizza. Where has a few more ingredients? The price is gonna be a bit more. So we're gonna say 2199. Save this and refresh. There we go. That looks a lot better. Now we're starting Teoh to get data into our table. Let's go ahead and out of one more pizza and this is going to be Hawaiian. Now, if you're under the impression that Hawaiian pizza's don't taste that good, you have never had a pizza. I bet for the longest time, I thought that pineapple does not want pizza. Ah, and then I I figured one day I was ordering a pizza. Um, like, yeah, let's go for that. So, uh, and since then, let me tell you, pineapple goes on pizza so Hawaiian, uh, so we need type there. The ingredients is very simple. Ham and cheese. Uh, no ham and pineapple and cheese. And then the price of this where it's so awesome, we're gonna make it a bit cheaper. Maybe this will get you guys to buy some. If you haven't had it, or if you have, it's refresh. And there we go. So as you can see, what we're doing in this video is creating elements here. And I want there to be a table border, so Oh, wow. Um, that's not how you do it border there. Really? So what this is going to do is it's gonna put a border around, each selling around the table itself, and it lets us visualize it better. We can also set ah, call span or with on any of the th or TD elements, and it will affect the entire column. So if I make type, if I said that with two, uh, 300 I refresh your going to see all the the the cells within that column have to stretch to fit in. Same thing for the ingredients I'm gonna make you see with is going to be 500 and then the price over there is fine. We don't even need to do anything on. That is how you do it now. Without doing this, we can actually make the table with 100%. That would make each element grow to. However. It needed to be, uh, to make it. You know, 50 entire with the page and you do get that extra space, and it kinda averages it out. And you know it doesn't Percentage is based on the left column, the right column and then the center column in which ones longer. So that is an introduction to tables. Guys, there is a lot more things we can do, and sometimes these attributes or properties we are adding. We can also add them through CSS or a style sheet. And so you're not going to see me, or chances are anybody else use these in line tags, thes air called in line styles, and they're bad practice. So once we get into CSS, you guys will see why 11. Creating a Simple Text Site: Alright, guys, in this video, what we're gonna be doing is start with a blank slate here. We're gonna be creating a website using everything we've learned so far. Andi, it's gonna be very basic. It's gonna be unstylish, so don't worry that it looks terrible. It will look terrible, but you will have created a web page. So I'm gonna make a web page about, um I don't know, just like random news articles, I guess. Feel free to choose something that you guys are more interested in. And what we're gonna do is we're gonna learn a new element. Wealth? No. We'll learn a new one after it's already have it sectioned out eso Let's go ahead and start creating. If you guys want a pause, once I get the header element done, then feel free. Um, then, you know, do your own content, then come back to the video May be or if you want to watch this first and then go at it and go for it. So what we're gonna do is start off with ah, with the HTML. We're gonna close it right there. Now with in here, I'm creating my head element and again This rise, more information to the browser like title is going to be, Ah, best news ever. And I'm going to close that title tied. I'm not going to go over anything else within the head element right now, Um, this we're gonna be focusing on quite a bit once we get through with all the body. So again at the body, this is where the main content is going to go. And so we're gonna create a header, and it's just going to have the title of the site. So as the title, I wanted to be very large. I'm going to say, Ah, best news ever. And the subtitle is going to be We don't care if it's accurate. We care that it's the best. That's an age three element. Say this. We're going to take a look right now, and this is the header of our website. And what we're gonna do is we're going to create Ah, let me see just a Siri's. Well, let's put an about me section there first, and then let's put a list of articles and then the footer website with a few links in it. So we're gonna create the main area and then within here, the first section section is going to be about me. Andi, maybe the paragraph would say something like, uh, we've spent years in the news industry and have found that readers for the best news not the accurate news bubble and we would continue writing until we were done. So closed section that is the about me section Let's go ahead and save it. And when you guys don't see me save here if you didn't know I'm clicking Control s on, uh, on Ah, Mac OS installation. It would be command us. So we've got the header. We've got the about me section Let's start with the articles. So this is going to be a section specifically for the articles and let's go ahead and start creating so particle in here. The first thing we need is the title of the article. So I'm going to make this an H three element. Uh, dog kidnaps. Uh uh. I'm not sure who would a dog now. Clown? Sure. A shocking turn of events. Dog has kidnapped a clown. Andi is demanding a helicopter on. And Big Mac save this. And there we go now, this needs to be a link to the actual article. Sweat you can dio is you can put each three element within an a element again to make it actually show up. This was way off that a element has an h ref tag. Right now I'm gonna set to a ah hash symbol and that's going to make There's not link anywhere, but it's going to make it an actual length. If I refresh, you're gonna see that right now and then at the bottom of each article, we're gonna have a few line rates just to create some more space. So I'm gonna go ahead and copy this a few times. I was gonna change the headings here. New study confirms, uh, chocolate is in space. Have you ever wondered what outer space tastes like? New study firms that it tastes like chocolate. Without the calories, this new news article will be. You seem all five saves the day since its introduction. There's being less div and let's just leave the last one, cause I don't really want to type anything out there. There we go. So these are news articles. Each one should link to its own page. However, we don't actually have pages for them. So other linking nowhere. And then let's create a footer that basically maybe has a copyright notice and then also a terms of service link. So let's go ahead and use the center element. I think this is actually an old element that was taken out of HTML, so this shouldn't work. Uh, I just remember this right now. I haven't seen this in a long time. Oh, it does still work. Awesome hardline. Never use this. Uh, yeah. Always used CSS to tell us something that it should be centered. That's just bad. But we're gonna break line here with the self closing BR tag, and we're going to put on a element that has a terms of service. Save it. And there we go. So this looks like a Web page. This doesn't look like any web page you would want to use, but it does look like a web page, and that's because that's what you've just built. That's what I've just built. Hopefully you guys built one dio in the next video. We're going to be getting to some forms were going to be creating, Actually, no, we're going to be creating images. So that started 12. Images: Alright, guys. So what we're gonna be learning about in this video is just how to put images into a Web page. And it's important to note that images or image tags are block level, which means they're going to appear full width of the page. So for our news article here, I've downloaded some images. I've downloaded a dog chocolate and HTML five from Google and these air going to be corresponding to each article, so each article is going to have its own image. So what we're gonna dio is jump up to the top one here and the image should be, um, above the title within the article. We're gonna go ahead and type I m g. No, this is self closing. That's all you need to do to create an image element. But as you'll see, there's no image inside of it. And that's because there's an essential property here or attributes of the element which is S R. C. And this basically is a gnabry V ation for the word source. So we need the source of the image that we want to show here, and that is a file path. Now if it's within the same directory. You don't have to worry about anything. Just type the name of the of the file. So in this case, it's dog got J G. Save it, refresh. And there we go. There's the picture of her dog. Let's go ahead and create one for the second article, which is about chocolate in outer space. So the source for this one is going to be chocolate J. Peg. But what you can do is if you want, if it's in the same directory and this is going to be relevant sometimes if it's in the same directory at the same half, you can use just the title. And once we get into rewriting and stuff for you, RL's, which might not even be in this course, you're gonna have to reference the current directory that its pages in So that's dot forward slash. So it's chocolate dot jp g, and then we close it. As you can see, new study confirms chocolate isn't space. There's a Mars bar, which is fitting. And then finally, we have the HTML five article. And so the source in this one, um, we could see the source to our projects. We're gonna put an absolute source here. So see, users Nick G. Roger its Web dash course and in the file name, which is it seem a five dot PNG and then self closed that and we see here This is actually pretty big. So what I need to do is I need to set the with of this 200% or any pixel size we could also do. But by setting it to 100% it's just going to make it only be is wide is the page. But then it's also going to scale it proportionally so that it won't be stretched or anything. It will then become as tall as it needs to be to fit the winds that we've specified. And so that is the image tag and how to add it to your Ah, your webpage. These are block elements, but you can do crafty things like making them appear in line. And we're going to be getting into that with CSS 13. Forms: All right. So what we're gonna be learning in this video is about forms and what they can do and basically had to set them up. And then in the next few videos, we're going to be covering all the different elements that ah form can consist off. So the first thing we're gonna dio basic Ah, very basic a part of this is. Well, first, we're gonna create a section for it. Ah, And this time, since we haven't used a lot of properties other than the images with the images, we learned the basic format of a property we didn't learn about what kind of values can go into what kind of property on, And that's something we're really gonna focus on later on and again, this is a property, and this is the value of that property. So you rate the property name equals, and then the value, usually in quotations. So we're gonna be setting an I d here on, and it's going to be contact form. And the reason why you would set properties sometimes is just to be ableto have something that you can target either to style something using a style sheet or Teoh create user interactions with JavaScript. And so using i d elements are I d properties and class properties air the to most common things that you're gonna be adding Talibans themselves in terms of properties. So I want you guys to get into the practice of that. And so that's why we're starting here right now. Having this I d set, we're not actually going to do anything with it, but it is just to get you guys used to writing out properties inside of elements. So the first thing we're gonna do is create the form element itself. Now, this is gonna contain a lot of different types of data. It might include input fields where you can type in single lines, text areas, check boxes and what not. And so a form is going to be a data set. So any input, uh, or yeah, any data that's user generated within this form is gonna be stored in the same data set, and you can then use it for other reasons. Um, so this is gonna be a bit difficult because we're not learning PHP uh, which I might I mean, I might just write a quick script aside just to be able to demonstrate what this does. So the method is going to be either post or get. And the key difference between these is, let's say I have domaine dot com if I'm submitting a form with the method post, uh, the u R L just days like this. But if it's get once you actually submit the form, let's say you had ah, name, you know, and then that would be equal to whatever the user put in on. And age would be equal to whatever user put in etcetera, etcetera. And so this is what a get submission will look like are a form submission using the method and post it does it all behind the scenes and you don't see it in the URL. So when you're doing passwords and stuff, obviously it's gonna make sense to post it. Sometimes it's easier to use get because then you can also just linked to very specific results within the U. R. L. You know, if you want to send someone to you are all with pre filled values. You can do that and the action this is going to be the where it's going to submit to. So let's say I had a file in here called. Well, we need on, uh, let's build a pizza order for So that's what we're gonna be doing throughout the next few videos, I guess. So, um, we're gonna create a script called place order dot PHP. And that file doesn't exist right now, but it would exist right here. And so these two properties air the most important properties for a form. Unless you're submitting with JavaScript and we will learn that later. So don't even worry about that. When you create a form, create the method attribute which can either be post or get and then the action attribute, which is gonna be the script that runs Ah, when it gets the data. So this is where you're going to direct the form to, and that's the basics of setting up a form. Now what we're gonna be doing in the next video is just putting some basic inputs. We're gonna be focusing on just regular text, and then we'll get to more advanced form, um, elements 14. Inputs: Alright, guys, what I have done since the last video is I've created a very basic place order PHP script on. I will write it out and try and explain the basics of how the dad has received. But we're not gonna be learning PHP unless we get to the end of the course. And it didn't take long as I think it will then will definitely jump into some huge be Ah, What I have running here is a server, which means I can access PHP. It's an Apache web server powered by amps, and it has PHP 5.5 and my SQL five as well. If we need any of those which we're just gonna need PHP for this because we want to be able to see our form submitting. So this is the script I'm going to be building that out in and don't worry about that right now. Right now, we're worrying about the front end of the HTML only, and so that it's going to be right here. Not that in there. So let's go ahead and some of the content in here, specifically the articles and then in the contact form section I'm gonna add a title. Gonna follow? The same format is up here, so I'm gonna use an H two element. It's going to say contact our change these place order. Remove that, actually. And then let's also change the name the site to Best pizza ever. Come and get some Mommy. All right, so if we refresh this, this is what our page currently looks like. So we actually need to start building out our form and how we're going to do that. First off, we're gonna start adding input elements. So the element itself is input, and it is self closing. So if I just write that, save it and refresh, we're going to see an input here. But it doesn't really do much right now. It doesn't have any attributes or properties assigned to it. So there are about three or four different properties you are always going to be using with an input field. The 1st 1 is name. And this is not going to change how the front end looks or anything is just going to tell the input what it should be referred to as so we're gonna name this, um uh, address one and we are going to give it a placeholder, which is going to be address line one. So if I save it now and refresh, see that we get this nice little place holder we can write stuff into disappears. Now, This is a new alternative to the old method of creating a label above or to the side of every input. This'll it's it look a lot cleaner. So we're also going to be doing a bit of CSS, I guess. So what we're gonna be doing is adding a class and this class is going to be called Ah, large input. And this can be whatever you want. You can make up whatever class names you want there just to reference the thing within CSS . So I'm going to do a line break here, and I'm going to create another input and this is going to be address to placeholder is going to be address line. And again the class is going to be large input. Then we're gonna put a line break. Now we're going to create a city state, uh, inputs. So input name, city and the placeholder. It's going to be city. And let's create a class of small input abbreviated. And then let's put a space here and create the other one on the same line. So input name, state and the lace holder attribute is gonna be set to state that That's what the, uh, input field is going to say before anything's typed into it. And the class again here is gonna be small in blood. And if we save it and refresh here, we see what we've got is the address line one and two on their own lines. And then the city and state on separate lines are on the same line. And that's because we're not using a line break here. So it knows these air in line elements, so it knows to try and put them all on the same line. If it can fit kind of like span elements now we can change. That is well on CSS. We could make a span element into a block element. Uh, but we're not gonna be discussing that right here. And then the last one is going to be an input with the name zip code. We're just gonna call, is it? Placeholder is going to be zip code and the class is going to be small input, and then we're gonna save this and refresh. We forgot to add a line break there. The zip good should be underneath the, um, the state we've added, Ah, line break to the end of the state input. Um, so that the zip would appear on the next line, and it did. So this put an aged four heading called address. And then we're gonna jump down a few lines, and we're going to start creating the actual order form. So we want people able to choose a size. And so what we're gonna be using for this specifically is a select. We're gonna be doing that in the next video. 15. Checkboxes: So what we've done so far in this form is specifically all we've done is used input elements, and that kind of lets the user type in whatever they want. You know, gibberish here. So if we put on input here that allowed them to type out what ingredients they want, they could ask for some pretty crazy ingredients that no pizza place would actually offer. So what we need to do to limit that and to make it a lot easier is to use check boxes for those. So before we get to that, I think I think I had mentioned the select box. So we're gonna be doing the select box later. The check box is a type of input, so we're gonna go ahead and create an input. The name is going to be Ah, Pep Baroni. Eso The name of each input check box is going to be the name of the ingredient itself. The value is going to be, uh, let's not do that. The, um, type. It's going to be check box. Save this refreshingly see a check box here that we can check and uncheck. Let's put another line break here and the h four I believe we used. That's gonna be ingredients. Save this and refreshing. We see now that we've started to do this. So what I'm gonna do is right next to the check box. We're gonna type out just in plain text the name of the ingredients so we can choose pepperoni. Now. Then we're gonna put a line break two skipped out of the next line, and we're gonna type input name, uh, salami and the type attributes again, going to be checked box and then just the regular text that's gonna print out to the right of the check box. I'm gonna save and refresh, starting to get a list here, so Ah, let's see what we're gonna do. Actually, now we'll do like this for now. Well, well, I'm gonna show you guys a different way to do this after this. Gonna make more sense once we get into PHP. So there are two ways to do it. Uh, let's say bacon is gonna be one of the options. And the majority of this video is simply creating the different ingredients. It's kind of repetitive, but with repetition comes perfection. So we're gonna be repeating it sausage is the next one with the type of check box. All right, we got a create the pointy bracket there. Name here is going to be onion type is for the re check box. You know what I did here? I'm not sure if you guys caught that, but I put the forward slash in the line break element before the actual tag name. And you don't do that. A self closing tag is always opening pointy bracket the tag name. And then when you close that opening tag, you just put forward slash right before that closing bracket. That's how a self closing element looks and you can see actually in the input as well. That's the exact format of it. We're gonna add a few more ingredients. This isn't gonna be full fledged or anything. The name is gonna be peppers. That's the type of ah, ingredient it is. And then the input type is going to be checked. Box. There we go. So I'm gonna save now and refresh. And there we've got a list of ingredients so you can enter your in your address and then start checking off whichever ingredients you want. So in the next video, we're gonna be talking about radio buttons 16. Radio Buttons: All right. So what we're going to do at this point is we're gonna be talking about radio buttons, which are another type of input. So input has a lot of different types that makes it become something different. That's what we're gonna do right up here, right above the address field. We're going, Teoh put delivery as the title. And then we're going to create two elements. One is going to be delivery when is going to be pick up? So I hadn't created input element. And in the input element, the name is going to be delivery. The type is going to be radio. The value of this is going to be delivery, and that's that's a bit confusing, but you guys will see in a moment how it connect, because this option is to actually have it delivered. So ah, radio button is just like a check box except the drought with a check box with the same name. Ah, you get an array and we'll actually fix that up after it's the name of the next radio button is gonna be the same. But the value is going to be pick up, gonna save this and refresh. Now what? You guys will notice that when I check one of them, the other one on Jax by having the same name. It means only one of them can be picked. And that's why we've given it both the name of delivery. Now, I could have changed this name to make it not one of the up one of the values. So the two values that you can get for a delivery method is delivery and pick up. So I could have written this as delivery method that would have made a little more sense. Now we're gonna move down here a bit, and we're going to revisit the check boxes. So what I've done here is I've put the name each as their own A Z, their own ingredient. And this would allow us to target specific, um, specific, you know, ingredients. But what we're gonna do is we're gonna change all of these two. Ingredient. I'm going to copy this, Gonna paste it in the name attributes of each one. Now the problem with this, okay, if we refresh, we can still select many. Unlike with the radio buttons with the radio buttons, you can only select one, but with check boxes, you can always select however many want. But now, within the element itself, it doesn't know what its value is. So what we need to do is go ahead and out of value for each ingredient. So just follow along. Guys, update your, uh, page if you've been following along, which I hope you have and then the value of this pepper. So I'm not sure if I've explained clearly why we're doing what we're doing. So I'm gonna try, uh, just to do that right quick. The name is the type of input or what we want to target. So if we want to find out all checked ingredients, we're going to somehow target that Amy there with JavaScript, uh, or PHP which will discuss and then the value is unique. So this is going to be the actual value of that check box. If somebody checks that, they want peppers, we need to be able to tell within the element and that they've chosen peppers. And that's why we put that there. So, uh, that's all for the radio buttons and check boxes. These are important parts of ah, any form and That's why we're learning them in the next video. We're gonna be finishing this up by, uh, adding a few more elements and then a submit button. 17. Select, Option, Buttons: All right, guys. So we've got ah, mostly working for him here with very basic functionality. What we're gonna be doing is adding, in a way, for the user to, uh, select a size. So under the address here Ah, let me move these lines here so I can get both of those line breaks above where I'm gonna create the size. Gonna create an age for element as a title so we can know what this refers. Do It's gonna be size. So we open it type stuff, close it. And now we're gonna create a select after view or, ah, element And what this is. It's multiple choice in a drop down that people can select one of. So it's kind of like a radio element, except it displays in a drop down. You can also select multiple in a select box, and that's not really pertinent what we're doing here. So just learning the select box, that's what it does. So we're gonna give it a name. The name is gonna be size, and that's all we need to do. So let's go ahead and close this select. Save it and refresh here and you'll see that it drops down, but there's nothing in it yet because we haven't put anything in it. So that's what we're gonna be learning now. Uh, within a select element, which lets you select items from a drop down. We need to have options. And so the next element we're gonna learn is very appropriately named option, and each option is going to have a property of value, and this is going to be what the the option is. We're going to start off with 12 inch and it's but the cost there, too. Let's say that's 13 99. I'm not sure if that's expensive or not, Uh, but it's good pizza. So the next one is going to be 16 inches and just so you guys can see better the format of it, you open it and put all the You never put an attribute in the closing bag. I guess that's important to note. You only ever put attributes within the opening tag itself. We're gonna say 16 inch and we're going to say that is gonna be 16 99 on the next line, and we don't need to add line breaks or anything. It's all automatic here with the select list. We're going to create another one with the value of 18 and we're gonna take about what's going to appear as the option and this is going to be 1999 and then Justin gays. Anybody's really hungry. We need to add a very large option, and this is going to be 72 inches. And the price for that's gonna be 1 49 99 All right, So with our select box created and four options within it, I'm going to save this and refresh. And there we go. So we've got our select box there. It's gonna let people choose a size. So right now, this is basically feature complete as what it's intended to do on the front end. We give the user the option of delivery or pick up If they choose delivery, they need to add in their address maybe their phone number as well. We let them choose the size of a pizza and then also ingredients. These are all the important things about ordering a pizza thes air, the things you need to be able to dio. So what we're gonna do now we're ready for it. We just need to let them send it to us. So we're gonna create a button with a type submit, and it's gonna say place, order. And we're gonna close that. But I'm gonna save it here and then refresh. I need to add a line break above that doesn't look quite right and add two of them. Actually, now we go. So now what we're able to do is we're able to select a few different ones and then hit Please Order. As you can see, I've made this a get method up in the form here, Method is equal to get. And so what it does is it carries across all of these values, as you know, in the in the Erle. So this is how they're gonna be accessed within PHP. If you wanted Teoh automate this a bit e. I mean, this is why you would use get if you want to send someone directly to a page and send parameters to that page as well. Use this. So if I sent you a link like this would automatically order you a pizza at my address. So that's how the get method works and posed just so you guys can see Go back here. Gonna refresh, place your order again We're gonna hit place, order and it sends it to the place Order script without you or else. So it's all done behind the scenes And that's why you would use the post method for sensitive data like passwords or address stuff like that. So that is our form. And basically, that's complete, except for one final thoughts when we're gonna add that in the next video. 18. HTML5 Videos: all right, so we've learned about images, forms a bunch of their basic elements. In HTML. What we're gonna be learning about now is the HTML video. And so in the past, let's let's go back to like the nineties. For instance, in order to play videos on a Web page you needed to use flash eso, you need to convert your video to AH NFL V file and then build a flash video player and then plug it in Website and flash is dead, and if it's not quite yet, it should be very soon. So what HTML. Five introduced was a native, each TML five video element that you could load of a video in, and it's cross browser. So what that means is that you could be using Chrome Firefox safari what whatever browser you're using to view a Web page. A modern browser that supports html five and you'd be able Teoh to use the video element on that page. So, for example, if you're using chrome and your chrome version is above four and you're gonna be fine watching it native HTML five videos, same for Firefox and version 3.5 Internet Explorer and nine and so on. Eso What we're gonna do in this video is just embed a video into our page. So let me bring up our actual page right here. Go back. All right. So right at the top of this page, actually, all delete everything. What? Lead that. I'm gonna go ahead and add a section here and him. I'm trying to close a div attack that doesn't exist. That would have not been over very well because the section would have continued to wrap around everything because it didn't see a closing bag, so it would have thought everything was supposed to be inside of it. And then the day if I mean, it just failed. So what we're gonna do is I have a video in my projects directory. So this is my project directory right here in here. I have ah, videos directory, and I actually have the intro video that I recorded for this course in an MP four format. Now it's important to note that Web kit and blink support MP four. I believe it's fire Fox or the gecko engine average that supports Ogi formats. So chances are if you're gonna be embedding videos into a Web age, and you want true cross platform or cross browser support, you're gonna need to convert it into a few different formats. For the sake of this video, we're just going to be using my MP four video. So let's go ahead and create a video element. So we open it and close it now in the video element, we're gonna add a few parameters on the 1st 1 is gonna be with, and we're gonna say that should be 5 40 pixels wide and height and the height should be 3 20 And I'm not sure what aspect ratio this is, but I think it's like 16 by nine or more than Adam I really short on. And then the other parameter we're gonna add actually doesn't have a value. And that's why I said most the time format is value equal. Are name equals, value her parameter property or attribute whatever you want to call this attribute equals and then the value of that attribute for this one in the HTML five video element, we use a parameter or attribute called controls and actually has no value just exists to tell this element that we do want to use controls, and that's the overlay on the video. The play button, The Sikh buyer, etcetera. So inside this video element, we're going to add a source element. And much like an image tag, it takes an S R C attributes, and this is going to be the file path of your video. So in this instance, it's in the current directory in the Videos directory, and it's named intro dot mp for All right. And you need to also add a type attribute. I think like you boards like Slightly Tilted or something rotated a little oddly, and so I'm not ableto type as efficiently as normal. So the type for a video is always going to start with the video slash. Then you're gonna put in the type of video that it is. So in this case, it's MP four, and this has no closing bag. That's kind of odd. So let's go ahead and save this and let's refresh our page, and we now see a native video player that we can actually play. Andi used in this way, so that's how to do native video, and this is obviously a much better implementation than trying to use flash because flashes . So the support for Flash and Web browsers is is actually being defaulted to, like, not supported so chrome. I believe they've already removed support for Flash and other browsers are doing the same thing. Um, but aside from that set up of a flash video player is a lot more convoluted. This is quite simple. You just put a video element and then a source element within it. Actually, you're gonna be putting multiple source elements, So go ahead and create another one. And this would be, Let's say, I had the same a version of the video, but it was in Ogi format, and this would support Firefox. For instance, this is the video that would play on Firefox. This is how I would do that. So you'd add the source the SRC attributes, and you'd set the value to the Ogi video, and then you would set the type to video slash O. G. And then something else you can do, which is pretty me is. If your browser doesn't support the video player, you can actually add a message within the video. Element on this will be printed out if the video cannot load. So let's say your browser does not support. It came out five. If I save this and refresh, we're not going to see that message because it has already loaded this. Now what happens? It's kind of it loads in a procedural manner. So it attempts to load the first, um, the first element. If it can't load that, it tries toe load the next one. If it can't load that, it continues on until it can load something. Now, where this is just plain text, every browser can load this. So that is the HTML five video player and along the same lines is the audio player, and we'll get to that in the next video. 19. HTML5 Audio: using audio in a Web page is a very similar process to using videos. And so what I've done is I just downloaded one of my old MP three songs from Soundcloud. And what I'm gonna do is just drop it into an audio element. All right, so let's go ahead and start this. Uh, can I just drag this over? No. I would have to move this and then drag it like that. Here we go. So what we're gonna do is remove this video element here and we're gonna create an audio, and this is going to be set to, ah, wigs of 600 and controls. It's very important to add these controls and I will show you why in a moment. And so in here, we're using the same source element we're gonna set the s r. C attributes to contract Cherie Audio. Uh, thing you do dot mp three and the type is just, you know, gonna be audio slash mp three. So we're going to save this and load up our page here. As you can see, it actually shows Thea audio. I'm not sure if you guys can hear that or not. I'm not sure if it's recording the sound from my, uh from, you know, the master volume on the computer or not. But that did play by the way on Beacon set. The volume is from now what happens if you don't have controls there is that it will appear , but it will just appear blank. You can't see it. And this is useful if you want to have a sound play in the background of a page. So if you don't want to actually show an HTML element but you wanted to play, that's how you can do it. Actually, you can also set auto play. So this is another attribute that does not have a value. And if we refresh, you can see as by the sound indicator here it is playing the five controls here so you can actually see better, cause I'm pretty sure you guys can't hear it. There we go. So, as you can see right off the bat, as soon as I love the page, it starts playing. That's for auto play. Does. They can also have loop. We're gonna refresh and put it near the end. What's gonna happen is when it gets right to the end is just going to start playing again. So if you have a looping piece of music on, you want a loop it, that's all you have to do. Maybe hide the video player, don't show the controls for the audio player and then set the auto play and loop attributes . So that is how to use audio within a webpage. And actually, you can give this an I D. And I'm just gonna call it my sound, and then this would be appropriate. You can actually hook into these HTML elements with JavaScript, and you can play the audio through JavaScript. So if I wanted to have a sound play every time I click a button, let's say let's say that has a click sound that we want to play every time I click a button . What we would do is we would not have any of these. So if we would have an idea, this is how we would target it. So in the event handler for clicking a button, we would write something that basically targets this element and then tells it to play. And if we refresh the page here, it doesn't play it doesn't loop and we don't see it. But it exists in the background so we can manipulate it using JavaScript later if we wanted to. So that's how to use an audio player. 20. HTML Doctypes: so moving on Teoh. It's more advanced concepts or even just outside of HTML elements. There's a few things, or rather, content elements. There's a few things we need to cover in the header. Some elements that only work in the header or rather, work best. And I'll explain them to you how you can use them differently once we get to that. But before we even do that, in order for a Web browser to properly, um, parse our HTML file and display it, we need to have a doc type. And this tells the browser what type of document this is. In this case, it's html five, and we are always going to be using a team of five. In fact, when I started making websites about in 2012 professionally, I used to write in HTML 4.1 on, and since then, you know, obviously I've started writing an HTML five because there is no other way at this point. It's like if you're a computer manufacturer, you're not gonna manufacture a computer from the nineties and expect to sell it in today's economy on world and so same thing with a website. If you're getting into business making websites. You are going to be writing an HTML five. Now, how you write a doc type is you put a, uh, left angle bracket with an exclamation point. And this fellow Theo C t y p e doc type I've always written in capital, but I don't think it actually has to be in all capitals. Now, what you're gonna do next is you're actually gonna tell the browser what the doc type is so in this instance were just right. HTML This is gonna tell the browser that this is an HTML five document. This is literally all you need to dio and then you're able to I mean, if you're using bootstrap, for instance, and we're going to get into bootstrapped later. But if you're using bootstrap, this needs to be set to html five. However, if you're writing in older languages, the are older HTML versions. The DOC type definitely gets more convoluted. For instance, if you're writing an X html, this is gonna be the doc type string you'll have to use, and nobody's going to remember that. So you're going to have Teoh copy and paste it, or you can memorize if you want, But again, you are never going to be using any doc type other than HTML. So with that said, and out of the way, that is a dark type. Ah, what we're going to be doing in the next few videos is some meta tags. And then we're gonna be, well, probably just the next video. And then we're gonna be getting in CSS. And there is one specific element that you need to use in the header in order to use CSS. 21. Meta Tags: submitted tags basically provide more information to browsers about our web page and much like the entire header, Really? But the meta tags provide Betta data, so just additional data that describes what they're looking at Now the meta tags go into that er, and the 1st 1 we're gonna look at is just what the character said is of the, uh of the page. They well, the browser is looking at. So how we do that is we're going to open up a meta tag and the the attribute of this one that we're going to discuss right now, the character set is C H A R S E d. And nine times out of 10 10 times out of 10 rather, it's gonna be set to utf dash meta tags. Do not close, said did not use forward slashes and do not close it manually. This is what a meta tag looks like. It is just a taggert is not an element. I guess so. The next one we're going to discuss is very important for S e O. And it's a description. Now, the description meta tag is gonna be used for search results. For instance, of your webs. Well, when your website is scraped by Google, Google's body is going to look at the description meta tag. And if it's appropriate, it's going to use that tag as the little blurb that you see on Google results. So let's go ahead and look up, pointy bracket and let me try and find one. So this right here that looks like it's a meta tag. If I actually click through to that website, gonna inspect the source of the page, we're gonna go into the header. We're gonna look at their meta tags they have here on, and maybe that is not the case here. All right, so just look like they haven't met a description that I can see. Maybe I'm just missing it. Um, let me look up here again. Have also they have key words. There is the description. All right, So, as you can see, this text right here is exactly what was used right here. Ah, and so you can kind of tell you can keep it short. I think it's 240 characters. That description should be and enough that it fits in here without, you know, without breaking up the text in making the user not able to read the entire description. So that's why this is good practice to use a meta tagged for description. So we're gonna go ahead and create a meta tag, and the name of this is going to be description. And then the content he's gonna be This page is a Web page for you. Learn a chim out and we'll close that something that's deprecating At least a Sfar, as Google is concerned, eyes the meta keywords. Now, this used to be big for for s CEO as well, because what the search engines would do is when they when they crawl your site, they look at the keywords and they use those while they used to use those keywords. So if people were searching their search engine for those keywords and your site was a relevant fit based on that on your site would have here. So we're gonna cover this to just for the sake of covering it. However, I've I don't think I've I have ever used this. Oh, I have rather, But it's been a really long time. So here you would just write a comma separated list of words. So, for instance, HTML five, uh, you to me learn code, etcetera, etcetera. These air all keywords that would be used hypothetically for the search engines to deliver my page when these keywords were searched. So that's the meta keywords tag and the metal author tag. Let's move that trailing comma dropped down here. This one is something I do recommend using its the author. So this would be the author of the website. So, for instance, right here it would be your main, because I am the person writing this page and I want credit for it to some degree. Now, the next one we're going to talk about is a viewpoint meta tag, and this is very important for responsive Web design. So when I say responsive, that means if I look at it on my computer, if I look at it on a laptop, maybe even a Jumbotron or my cell phone, I want it to look good. Now. Right now, this is not a problem, because we haven't really built out must to the site. So I can re scale here, and we can see that everything kind of just fits as it is this is not the case. Once you actually start building websites, we need to manually and kind of automatically account for different screen sizes. And we're gonna be learning about that once we jump into CSS. And that is another reason why. Why Bootstrap? It's such an amazing framework because automates ah, and really increases the speed of development just by giving you a base framework where responsive design is directly, it's a foundation of the framework. So, uh, the meta tag responding to it and you will need this in order to use bootstrap is the name of it is Vieux port, and the content is here. It's gonna be winds equals device dash with With a comma. An initial scale equals 1.0. This is going to mean that the initial while you guys can probably understand what this means. The winds of the ages gonna be equal to device with at all times, and the initial scale is gonna be equal to one point. Oh, now this scale can change, as we, uh, you know, resize the browser. So those air meta tags and how to use thumb in the next video, we're gonna jump in to CSS. So you guys have completed the HTML portion of this course. It wasn't as long as I thought it was, but there's only a handful of elements we really need to learn. And each one is similar to other ones. Um, now we are going to be working in HTML still, and we're gonna be learning more about the attributes you can give to elements and why you would give him two elements. 22. Intro to CSS - Targeting, Color, Background: her. I welcome back, guys. So we've done basically all of the HTML that we really need to focus on. Now. There's a few other elements, and we'll get to that later on. But right now we're going to jump into styling the website. So, as you recall most likely in my first video in the intro video I did for this course, I explained how there's generally three parts of a website. You've got the HTML, which defines the elements that are on the page, and then you've got CSS, which defines how those elements look. And then you've got javascript, which defines what those elements can do. So we are done with the 1st 1 We already know how to put content onto the page. Now this is the bigger and the more important one. So if you get into Web design and I'm going to discuss the concepts as well, Aziz, you've venturing toe of development and design. You're going Teoh, you're going to adopt your own style preference, and that's fine. So in this video, Siri's What you're going to see is my preference now not say that my preference is better than anybody else's. Um But we're also just gonna learn basically everything to do a style sheet. So I've got this added. I'm going to remove that. I'm gonna add it again. What you need to do in order to start using style sheets is within your head element to add a new element called Link. And this takes two attributes or two properties. The 1st 1 is rehl, which means basically what we're we're going to link to something. What is that? Something's relation to this HTML file. So in this case, it's a style sheet, and then the second attribute of this element is going to be a trap. And this is the hypertext a reference of this file. So, as always, you can either be relative or absolute. I'm going to use a relative path in this instance, which is CSS flash style CSS. And if you guys don't have this created, just created directory in your project route named CSS and within that directory create a style CSS file. The DOT CSS extension is very important there, and this link element is self closing. Let's go ahead and save this and jump into styling this so if we look at our HTML file here we can see that we've got a body element, header, main section, etcetera, etcetera. And we're going to be learning about how Teoh had a style each of those things. But also, inheritance is a big thing. So, for instance, and I'll demonstrate that in a moment. But to just jump into styling in a very easy way, I'm going to make the body element gray background of it. So I'm going to jump into the style sheet here and now how you target elements if you're targeting by the element name, in which case this is body, that's what the tags name is. You just write that name so body space and you open up Hurley races, and then you could drop down all the rules for this element is going to be between these curly braces, and there are a lot of rules that it can half the 1st 1 we're going to talk about is colors . We're gonna talk about both background color and text color, and those are the two main colors that you're gonna be working with on. Well, I mean, there's also border color and other stuff, and so they all follow the same rules which are there. You can use two types of colors. You can either use a hex color, which is a color, a representation written in hacks, a decimal, or you can use RGB or RGB A. An RGB is kind of like has three numbers in it. The first number relates to read 2nd 1 green 3rd 1 blue and then rgb A also adds a force number in there, which refers to opacity, so you can either make it fully transparent or fully opaque. So let's that was a bit to absorb. So let's jump into it. Uh, how you write a property within a style sheet eso again. This is the element, and this defines what rules are gonna be applied to this element. So let's go ahead and write background, and this is how you write a property name. So in this case, the background is a property. And actually, if you guys were using Adam like I am, you're going to see a lot of these suggestions. Drop in and these are all properties that you can use for. Right now, we're just gonna be using this one. So after you write a property name that you're gonna define. You need to put a colon and then the value of it. So I'm going to start this off just by explaining hex colors first. So to begin a hex color, you need to put a hash symbol there. And now it's gonna be either three digits or six digits. Right now, we're gonna work with six digits and then I'll explain how to make that short hand and use three digits instead. So the background I'm going to make it right now is gonna be black. So it's going to be 000000 and you end a line in a ah definition of a property with a semi colon. So this is the syntax of a style sheet, and you can drop down here and write more more properties and rules to apply to this element if you like. Now to explain the hex color here what? This is If I highlight the center two digits, you can you can we can look at them separately. So the 1st 2 digits relate to the color red. How much red, isn't it? Second to numbers relate to green and then the last to represent blue. So by setting these 20 and then the middle 2 to 0 and in the last 2 to 0 were saying There is no red, no green and no blue And if we save this and refresh the page that's going to make it black now in Hexi Decimal, you can. They're the values can go from zero all the way up to f. So ah, you know, zero through nine and then a, B, C, D E f, and F is the most. You know, that's the biggest number you can have. So if we set the 1st 2 digits to f f and save it and refresh, you're going to see it's red and it's very hard on the eyes. So I apologize for that. Now, along the same lines, we're gonna set thes back to 00 and we're going to set the centre to which represents green to the most green that we can put to it. So this color code means there is no red. There is no blue, But there is every bit of green in this that there can be, you see again very bright now we can We can manipulate thes here, centre to which right now it's saying there's much green and as possible, we can reduce that. So if I go backwards from half, let's go F E D c. Try See, What you're gonna notice is that it's gonna get darker because there is nothing of anything else. There's just green. So by reducing the amount of green back Teoh from white black, you know, from full to none were going to get this darkening shade of green as we go along. It's not noticeable there, but if I go with 55 which is quite a bit less, it's gonna be very dark. I go with 11 gonna be incredibly dark, and then 00 would return it to black and the same thing with blue that would work the same way. So just remember, you're thinking about it in Ah, in I guess, three pairs of digits and each pair can be 00 all the way up to FF, which means if you want to to, you could make green. Um, and here's Here's where it gets a bit complicated because we've been working with double digits all along like that. But let's say I wanted Teoh put it somewhere between f f e What we can dio. So if I fresh that, that's very green. But if I make it F f, which is the most screen, gonna get a tiny bit more green. But let's say I wanted to do something between those. What I can say is, OK, let's start with the most after convey be and then this one Let's set it a and this is where you can get that fine tuning for colors and this is why they need to be six digits. Alternatively, I consent that a and this won t e it's going to change it like that. So you have a full scale from 00 to f f. She can have 00010203 and it continues up. You can have 24 You can have a five for each pair. So, as you can imagine, there are a lot of colors and how you determine what color is gonna be just by setting the hex value here is you look at each of these as their own individual number or letter accessible, I guess on. And you're gonna start thinking and hex pretty soon. Now, in the previous examples I used ah, system where the 1st 2 were the same second to were the same, and then the third pair was the same. And so, in this instance, where each pair consists of the two of the same numbers, you can actually remove the second digit from each one to make it three digits. So this I'm gonna drop down to the next line and re declare the background, and this is gonna be the same color. So the 1st 2 digits and the 2nd 2 and the third to are all Ah, symmetrical. I guess. So you go zero f zero, and that's going to be the same color now, this wouldn't work if only the 1st 2 in the last two mirror images per digit. The centre one had two different ones that wouldn't work. Each pair needs to only use one number for both of the digits in order to be a shorthand. And if this doesn't make sense, we're gonna be working with that. I want you guys to play around with these hex codes. Um, now, I know that was probably a lot to absorb, but we're also gonna be learning about RGB, and it's kind of the same system. So the first number you've got here represents red. So the only difference between Hex and RGB is instead of having hex a decibels. Um, so from zero f, you've got numeric six. You've got integers that represent level of each color within this master color and numbers can go from zero all the way to 2 55 So 2 55 here. You can probably guess this is going to be very, very red, very red, and we can put this at 200 kind of orange, and then we'll put this 100 which just lightened that up a bit. I think now is this nice peach color. So that's RGB, and we're going to jump into RGB a which just adds one more parameter here and that is opacity. So it goes from zero toe one. So in this case, we're gonna make it about half transparent. So we're gonna put 0.5, save it and refresh. And now you've got uneven, lighter shade because we've made it somewhat transparent. All right, So one last part in this video we've learned about hex colors and rgb A And I want you guys to play around with this seriously, because this is big and it sounds complicated, but it is literally one of the simplest things you're gonna be doing with CSS. So learn the colors. The second property that we can set related to colors is color. And this, uh, this represents the text color, the color, um, of the text on the page. So if we want to make the text of blue, we're gonna go zero, I'll speak it. Uranus blew a tough and let's refresh and we got this nice blue color and notice the inheritance here. So I've set this property on the body element, which means any element contained within the body element. The text of it is going to be that color as well. So, as you can see, the H one element and the age three elements are affected as well. Is this copyright within the footer? So that's inheritance. You gotta be mindful of this because let's say you only want to change the color for one of them or you want to change the color for all o