HTML Fundamentals/Basics: Getting Started As A Web Developer | Flow Speeches | Skillshare

HTML Fundamentals/Basics: Getting Started As A Web Developer

Flow Speeches, Freelancer

HTML Fundamentals/Basics: Getting Started As A Web Developer

Flow Speeches, Freelancer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
25 Lessons (1h 26m)
    • 1. Text Editor

      1:50
    • 2. Intro

      6:12
    • 3. Skeleton

      5:04
    • 4. Basic Tags

      4:09
    • 5. Unorder Lists

      1:59
    • 6. Nested Lists

      1:40
    • 7. Other Lists

      3:11
    • 8. Block vs. Inline

      2:38
    • 9. Block vs. Inline Prt. 2

      4:13
    • 10. Divs and Spans

      3:16
    • 11. Anchors

      2:26
    • 12. Empty Tags

      2:59
    • 13. Images

      3:36
    • 14. Task Overview

      3:42
    • 15. Tables Overview

      1:07
    • 16. Table Basics

      6:01
    • 17. Colspan

      3:17
    • 18. Rowspan

      4:14
    • 19. Accessibility

      3:59
    • 20. Forms Introduction

      5:16
    • 21. Radio Buttons

      1:51
    • 22. Labels

      3:46
    • 23. Select Options

      3:54
    • 24. Other Cool Inputs

      3:10
    • 25. Extra Resources

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

Community Generated

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

77

Students

--

Projects

About This Class

Now matter how sophisticated a website becomes or how advanced a web developer's skills become, they always have to start with HTML, CSS, and Javascript. In this course we'll get you up and running with everything you need to know about HTML, so you can jump into more advanced HTML, as well as, CSS and Javascript, so that you can build fantastic websites for your company, business, or clients.

Meet Your Teacher

Teacher Profile Image

Flow Speeches

Freelancer

Teacher

Hi, my name is Andrew. I started Flow Speeches to help people learn foreign language. Basically, when I started learning foreign languages I knew nothing. Now I know slightly more than nothing. My goal here is to share with you the things I wish someone had just told me from the start.

 

Becoming Fluent 3-Day Video Series

See full profile

Class Ratings

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

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

Your creative journey starts here.

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

phone

Transcripts

1. Text Editor: the very last thing that we need to do is download a text editor. So for those of you who don't know what a text editor is, it's basically like one of the most fundamental tools that a Web developer has in his tool belt. Just like mechanics use things like jacks and wrenches and socket wrenches and carpenters use things like drills and hammers. Web developers also have tools that they need to use in order to actually speed up the development process and be more efficient. So I have a website pulled up right here. It's called brackets dot io, and this is a really good text editor for beginners. And I'm gonna go ahead and recommend that you go to this website and hit the download button, and it's gonna install ah launcher on your device, and then you can just launch the launcher and follow the steps, and you should be good to go. The main reason I want to recommend it to you is because of this lightning bolt that it has right here, which is a live preview. So what we're gonna be able to do is when we open this text editor, we're gonna be able to hit this lightning bolt and see a live preview of the website we're building. And as we make changes to our HTML in our CSS will be able to see those changes in the browser take place. And in order to actually take advantage of the live preview, you'll need the chrome browser so you can just go ahead and type in chrome browser into Google. And it should be one of the first results that pops up. And even if you don't typically use the Chrome browser, I still recommend that you download the browser. It's got really great Web developer tools for things like debugging and seeing what's going wrong or what's going right in the website. And on top of that, we need to make sure that our websites are compatible with this browser, which is something we'll talk about later. But you have just hit on the first result and hit download chrome, and it should be downloaded super easily, and that's it. So follow these two steps right here. Download brackets, download chrome, and we'll be ready to code 2. Intro: all right. So before we dive in and actually start writing our own HTML, the first thing I want to do is actually give you an idea of what you can expect to be doing here later in the future. That's what I typically like to do. When I learned something is, I looked like to look at the finish product so I can have an idea of what I'm supposed to be aiming for and what the final product is even supposed to look like. Eso. What I've done here is I've created a really basic, honestly kind of ugly resume. But that's not the point of HTML. Remember, the point of HTML isn't to make things look nice. That's what CSS is for. HTML is to define the structure of our document. We're going to go into more detail about structure later, but first you can see this is how we define our structure. I have a title right here, and you notice that it's bigger than all the other titles. So this must be the main point. This must be the main subject of this document right here, which is sort of a resume that I cooked up and then you can see I've included an image right here and then below that I have a secondary title, which is a little smaller than the 1st 1 and it has qualifications. And then it looks like I have some tabular data, some table data right here. So I'm defining the structure of my qualifications here by putting company names start date in date, position, etcetera. And then after that, I have my certifications, which is, of course, just a list. So we can also define where we want our list to be as well. And then after that, I have another title and this is a numbered list. So 12345 of all the different languages, frameworks and libraries that I actually know very well and then below that we have a biography and then below that we have contact information and you can actually click on these links right here. And it will open up different things like email. Or if you're on a on a smart device and you can see when I click on it, it actually opens up my email. But if I click on this phone number right here, If I was on a smartphone, it would actually dial the phone number right there. And then after that, I have a bunch of buttons right here. So this is basically what we can do with HTML. You can actually do a lot more. By the way, you can actually make entire video games with HTML or complex animation. There's a lot you could do. Ah, but this is the main purpose right here is to define the basic skeleton of our documents. So let's look at this What it actually looks like. So I have my text editor open right here. And the first thing we see is this Doc type Matter of fact, all zoom in just to make sure that you can see that nice and clearly side by side, and then we'll go ahead and actually, we'll just do it like this will just put it side by side so you can have a nice, clear look at things. Now. First thing we have is this doc type right here and then after that, we have html Looks like I have something that says laying equal to Ian. That means English, Then inside here I have a header, and it looks like I have a lot of stuff in this header. This is basically just the information about the document, the metadata. And then the first thing that we actually see on the screen is title Andrews CV, which, if you look right up here in the tab, you can see that's actually what it says. Ah, couple of different external links will come back to that later. But then this is the body. Okay? This is where we define the actual skeleton of our document. What we expect it to look like. And then right here we have our first HTML element, which is on H one tag. Okay, so this H one means that this is the most important thing. This is the big subject of the document. And in between the two HTML tags, we actually define our content. So we have to have what's called an opening tag and a closing tag. The reason we need that is, of course, because the computer is not psychic, and so it doesn't know where the title begins and ends and where the paragraph begins and ends. So we have to tell it with this opening tag to start in the closing tag to finish horizontal line, which is what you see this faint grey line right there? Then we have my image right here. And it looks like I have ah link or, ah, path file path to my image, my qualifications, which is an h two, meaning that this is also an important part of the document. But it's not as important as my H one. And then my table I defined a caption. Ah, a couple of table rose table header, table data, etcetera, etcetera. And if we keep scrolling down, you can see this is where I define my certifications. And then we have our UL, which is our own ordered list, and then allies stands for list items. And inside of the opening and closing tags, we define all of our info. Now I'm gonna go ahead and scroll down a little bit on this quote unquote resume. It's not a very good resume, but, um, then we have our languages and frameworks and you can see here we have an ordered list. So the 1st 1 this UL, is an or on ordered list. So it's just bullet points and then the ordered list is actually numbered. 1234 a, b, c. D. Etcetera. And after that we have an H three, which what I want to stay with an H three is it's important, but not as important as my H one in my h two. And then I have a paragraph and inside of here I just put a bunch of filler text because I didn't really want to write a bio honestly. And then after that, last but not least, we have contact information, and then we have some a tags which stands for anchor. Ah, but basically, this is how we define links in the Internet. This is how the Internet is even, Ah, nets, it's connected. And then we have some break tags which actually breaks down to the next line. We'll talk about that later, and then we have different links to different things, like we have our email phone number, and then we have our buttons so we can define the buttons and then inside of here, we define links to our Facebook, get Hub and Twitter. And then after that, we closed the body, meaning that it's the end of this content, and we close the HTML body or document telling the computer that this is the end of the HTML documents, so that's pretty much it. I just want to give you an idea of what you can expect to be able to do in this course. Now let's go ahead and dive in and actually start learning what we're even doing in the next section. 3. Skeleton: all right. The time has finally arrived. Let's get to the meat and potatoes shall way. So first thing I'm gonna want you to do is go ahead and make a new folder. You can, of course, make this folder anywhere in your computer. I would recommend the desktop, though, just so you have easy access and it's easy to always find it and then just, you know, right click and make a new folder. And I believe with Mac it's a very similar process, but yeah, just make a new folder, and then you can name it whatever you want. In this case, I have named my folder HTML Projects, and then after you do that, you can just right click. And if you've already downloaded either brackets or visual studio, like I said before, you can download both. Then go ahead and hit open as brackets project, especially if you're just starting off. I would recommend brackets because very easy to use, very easy to customize, and it has a live preview, which is what I'm going for right now. So as soon as this loads up, which it should take just a second and there it is Okay, What we're gonna do is we're gonna make our first HTML file now. The way we do that is we can just do control knew or we could right click and hit, make new file. So what we'll call this is we'll call this skeleton. And now this is the important part dot html, OK, very important that you call it dot html because this is your file extension. And so you're basically telling servers you're telling Ah, other people's computers. This is a HTML file, and I want you to treat it accordingly. So now that we have that, we can hit this lightning bolt right here, and this lightning bolt gives us a live preview of the project that we're working on if you have the chrome browser, that is. And if I'm not mistaken, new versions of brackets might be able to work with things like Mozilla. But it automatically opens up our file right here, and we'll get a nice live preview. Of course, we don't have anything available, so it's not gonna be very grand, just but in a second will start adding some content. So the first thing I want to do is add a doc type declaration. Okay, so what we'll do is we'll be less than exclamation point. Dark type, Space age team. Ill greater than sign. OK, now what this is dealing is basically it's telling the user's browser What version of HTML that you're using? Um, honestly, you don't need to go into a not a lot of details about this because it's 2018 when I'm making this video. But basically there used to be many different types of HTML versions before this, and they had a lot of different weird behaviors whenever they were loaded in different browsers. All the browsers behave differently in treated HTML differently. And so you needed to declare what type of HTML you were using by making this document type declaration were basically saying that we're working with HTML five, and that's really all we have to dio if you visit this website, of course, you can see the many different doc type declarations that there used to be, Ah, 4.1 strict transitional frame said. It's it's pretty, pretty long, pretty lengthy looking stuff, But like I said, we really don't have to worry about that in the modern Web anymore. We can just add doc type ht mo in the browser knows. Okay, treat this like modern html perfectly fine. So now that we've declared our dark type, the next thing we'll do is we'll do our first HTML tags. In fact, we will do on HTML. Text will do less than html greater than and then we'll do our closing tag, which is less than forwards less html greater than this. Just tells the computer that this is the star of our HTML document. Okay, and then after that, we'll do ahead, which is less than head greater than and then you do your closing tag toe. Let the computer know that this is the end of your head. Okay, now we can actually put HTML tags html elements inside of other HTML elements, and so we'll do it. Title less than entitled greater than and we'll do HTML skeleton. So this will be the actual content of it, and you can see that it changed up top on the tab. So that's actually where it changes. So that's the title. And like I said before, the head is where we put the metadata about our document other than the title, our users not gonna see anything else from the head tag. Okay. And the last thing we'll do is we'll add a body. The body in the closing tag as well is where we define the content of our HTML document. This is where we're gonna be like, Okay, this is how I want my document to look. I want a header here. A list here, a paragraph here. A couple of pictures here. Maybe some buttons, etcetera. Now, this is the basic skeleton. You will define this for every HTML document that you write. No matter how complicated your applications become, they always start with this basic skeleton right here. Now, in the next section, we're gonna look at how we can add some things to it. 4. Basic Tags: Okay, Good. Now we have our board boilerplate code. So the next thing that we're gonna do is actually define some content. Like I told you before, we always define our content in the body tag. And we always define our metadata, like, you know, who wrote the document. You know, things like that inside of the head tag. So inside of our body tag, what we'll do is we'll make a header so we'll do less than a Chuan which stands for Header one. Greater than sign. And then we do our closing tag. Right? So we do less than forward slash h one greater than sign. And this is just to tell the computer this is the start of my title. And this is the end of my title. Eso inside of here. I'll put title title one right there. And as you can see, the text is very big. And then underneath that will do a paragraph tag so we'll do less than p greater than sign . And then we'll do our closing tag, which is less than forward slash p. And so now inside of here, we can put this is my first paragraph, paragraph and It's pretty cool, honestly. So as you can see, all of this is actually the content that shows up on screen. And the most important thing is, hopefully you're seeing why opening and closing tags are important. Because if we didn't have these closing tags, ah, we would get some very weird behavior. Like right now, if I delete this, reload it, you can see the It makes everything a title because the computer doesn't know the browser doesn't know a win. The tag starts and ends. So by using these closing tags were telling the browser that this is where the title starts . This is where the title ends. This is where the paragraph starts, and this is where the paragraph ends. Now there are a couple more things to know about the header. Ah, First off, you have things like Header to so we'll do less than H two. Closing tag will do Title two, and we'll just copy and paste this. There is no sense and actually writing out all of this, but we'll just go. Bam, bam! I believe it's six and then after that we can just edit this very quickly and then we'll do heading three heading for heading five, heading six. Okay. And then after that will change these as well. So we'll do. Heading three for the closing, heading four and then heading five and then heading six. Okay. And as you can see, we get kind of a cool, shrinking effect right here as we go down. And what I can even do here as I can g o and do three, 45 and then six. So why do we have all of these different options available? Is it so we can make our text smaller and bigger? No, Actually, Like I said before, CSS is for changing appearances. This is all about structure and meaning. Okay, H one is basically like saying this is the most important subject of my document. H two is also an important subject, but it's like a sub section of the entire document. H three h four h five h six also follow that same sequence. So this would be like if this was a resume, this would be my name right here, the main subject of the document. And then I would have a lot of h twos because my work experience my certifications and my summary, my bio. All of these things are important. And then maybe as an H three, I would have my contact information and things like that. So typically you only have one h one tag because you have one main subject and then you have a bunch of smaller sub subjects. OK, so that's basically it. The reason this information is important is because we use this a lot for S CEO or search engine optimization. And so whenever you're working with businesses and stuff, they want to appear high and Google and Google is going to look for certain things in your structure of your documents to see what your website is about. That's my spiel on that in the next section, let's get into some more detail. 5. Unorder Lists: all right, Good deal. And just as a side note from the previous video, I typically don't use anything past H four, so I almost never use H five and H six tags. Most of the time. It's just unnecessary. Now. The next thing. Let's look a couple of different ways that we can make lists. OK, so a list is, as its name implies, a list. So there are a couple of different types of list, and the first and probably most common one is a non ordered list. So what we'll do is we'll do less than you. Well, for our list element and in greater than sign. And then we'll do our closing tag, which is gonna be less than forward slash you owe greater than time. Now. Inside of here is where we define the different bullet points of our list. So, for example, we might do favorite foods. So I'll do a list item, which is less than l I greater than closing tag. And then we'll do. Let's see strawberries, which I do love by the way I'm and then after that, we'll do another list item and then we'll do. Let's see watermelons I guess favorite fruits instead of favorite through. And then after that, we'll do. One more will be one Morrell I and inside of here will do grapes. Okay. Actually, pineapples, probably something. I would like more pineapples. So, like I said before, we learned in the head section when we did the skeleton that we can actually put e html elements inside of other HTML elements. And that's exactly what I'm doing here. Okay, I'm telling the browser that this is my list right here, and these are bullet points of my list. And inside of these list items, right here is the actual content of the list, and you can see it actually makes a nice little bullet point list. So what we can do after that is we can define a title for it. So we'll do an H two right here, and we'll just call it favorite fruits like So Okay, now, in the next section, we're gonna look at how we can actually modify this a little bit and change it up 6. Nested Lists: all right. So like I said in the video about the skeleton, you can actually put HTML tags inside of other HTML tags. And we clearly demonstrated that here. So the next thing that we can actually do is makes what's called a nested list. And so we're just nesting list inside of list inside of list. So what we'll do is next will make another list item, and we'll call this types of oranges. And then inside of this list item right here will make another one ordered list right here with opening and closing tags in inside of here. We can do all kinds of different oranges. I think there's one called a tangerine. I'm not sure how to spell that. And then after that, we'll do another list and, well, I think they're called Mandarin Oranges the like, really little ones. And then the last one we can do like, let's see other type I can't remember. There is another type of little orange that I can't remember. But as you can see with this secondary list right here inside of our original ah, the bullet type changed. It went from a traditional bullet point to almost like, Ah, hollow disc right there. And we can basically do this until the cows come home. So you could do another on ordered list inside of your own ordered list, and we would do you? Oh, and inside of here we would do mawr oranges, and you can see right here it changes to a square. Now you can actually customize these bullet points styles. You can even turn them into images so you could do like a little soccer balls or little flames or whatever you like. We'll get into that later. That's more of a CSS thing that we would do. But for now, I just know that you can actually make nested lists. 7. Other Lists: all right. So since we can do on a Norden list, it only makes sense that we can also do an order list ordered being that it's numbered or lettered A B C D 123 So the way we do that is the same we just doing ol instead of a UL inside of here. We'll do a list item, and here I guess I'll do like a list of languages. So my number one is gonna be English. That is definitely my specialty. And then maybe a Spanish and then maybe a Portuguese right there. So after we do this and if I say that Portuguese is hard to spell, you can see it creates a number list. 123 And just like I showed you before, We can also make on ah nested list, if you will, and so will create another l. I just like we did up here and inside a here. I'll do another Oh, well, and I'll give a title to this next sub list right here. I'll call it Germanic Languages. Languages. There we go. Set. Now, if I add this in here, you'll see what we can do is actually add, Let's say I think Dutch is Germanic. Pretty sure it is actually. And then after that, we'll just at German, and if we reload it, you can see that it creates a nested list. However, the numbers stay the same. When we did the UN order list, they went from bullet point to disk to square. In this case, it stays the same. Now there is Ah, there are two different ways that we could change it. The first way is we could change it directly inside of our HTML. However, you're really not supposed to do that. Um, just like we could also change the bullet style for our own ordered list with HTM milk. However, that really is the job of CSS toe actually use it to change the appearance instead of the syntactic meaning the actual structure and meaning of the structure. All right, but that's a Nord Earless on ordered list. Aziz. Well ah, one last thing I'll show you that you can also do is a dictionary list. Just so you know, I never used these almost never. Unless I'm making like a dictionary app, then it becomes extremely useful. Ah, but the first thing you'll do is deal for dictionary list, and there's two different tags you have inside of here. So the 1st 1 is D T, which is dictionary term. And so, for example, we would do like, ah, facetious or maybe sarcastic. So then after that, we'll do ironic because I actually do know the definition of ironic. Ah, and then you do d d, which is dictionary definition. So inside of here we do the opposite of what was expected or would typically happen. All right. And if we say that and scroll down, you'll see that it kind of creates this nice padding for us. And you can even add kind of a dash to give it that appearance, that it's a definition. Ah, but you could do an entire list of different definitions right here, so we can just copy and paste. And then if we reload right here and go down, you can see it just creates a bunch of definitions. So I don't really use this one, But these air, all of the different list you can make a new ordered ordered and a dictionary list. These two are hands down the most common, and you can also ness them 8. Block vs. Inline: So now what I'm gonna do here is basically I have a paragraph tag that I added, and then I just added some filler text. If you want to add some filler text you, you can just google Laura MIPs Um And then you can go to the first website lips, um dot com and it will give you some filler text and you congenital rate as much filler Texas you want. Ah, Laura MIPs, um is just some some text from a really, really long time ago. You don't have to understand it. If you don't want Teoh, it's written in like Latin or something. Ah, but basically it's just filler text that you can use so you can, like, fill out your website without having to type in the actual content. And so you can just take a piece of this right here, for example, and just copy and paste it like so. But either way, once you've done that, you can go back and make a brand new paragraph tag, and what I want to do is inside of this paragraph tag. I want to add a couple of things, so now I'll go down here and you can see I have a little bit of Laura Ipsum. So the first thing I'll do is inside where it says dolor, I'm gonna make a new HTML tag called Strong. Okay. And then inside of this strong tag and it does have a closing tag as well, I'm gonna put dolor. And so, as you can see it immediately change right here. And so now this is bold and the rest of it is not okay, So this is what's called an in line element in in the next video. I'm going to explain the difference between a block level element and an in line element. But for now, I just know that there are basically tags that we can use to change the formatting of our text. We could also do, for example, on where it says do Seamus, we could do an I, and actually, it's for icon. Excuse me, I'm going to do E m, which is for emphasis. And I'll put that inside and then down here, and you could put this anywhere in no particular order. Then, after that, we will put let's say, B b for bold and will put Delores in there, Okay. And if I save this, you can see it re formats, everything. So no Delores Bold do. Simitis is in italics, and then Delores is once again bowled. So these air different options that we have for actually reformatting or text. And there's a lot of different options that we can use here. But it illustrates a more important point that we can actually put these elements inside of our paragraph tag, just like we could put these list items inside of our list and other lists inside of our list. Now, in the next video, we'll talk about what the difference is between a block level element and an in line Alan. 9. Block vs. Inline Prt. 2: So basically it goes like this. Okay, let's say that I have a couple of paragraphs right here, OK? So we'll make another paragraph and we'll just copy and paste are lower MIPs. Um, so we don't have to type it out, and we'll just copy that in there will make one more paragraph and we'll copy it in there. And if we save this, what I want you to notice is that every time I make a new paragraph tag, it goes down to the next line, right? Even though we have all of this extra space right here, it doesn't matter. And what I could even dio is I could make two more paragraph tags. So I'll just put ah, line one right here. And then after that, I'll put line to right there. And if I save this and go back, you could see even though it's just one or two words, it still goes down to the completely separate line. And so, on the other hand, even though I'm making these new HTML tags here and they go down to the next line every time when I do these little strong tag emphasis tag bowl tag they don't go down to the next line. So with this logic, after Dolor, this next part of the paragraph should go down. Same thing would do. Sem iss and same thing with Loris. They should all be on their own separate lines. Well, not exactly. So a paragraph tag is what's called a block level elements and all you really need to know about it is a block level element goes as far as it can go. It takes up a ZMA chiew face as it possibly can. And to illustrate this, I'm actually going to show you how big a paragraph tag is. Now you don't have to do this. I'm doing this purely for example Purposes, kid, just to kind of demonstrate it. But as you can see here, everything that's a paragraph, I turn blue, right? So even though it's one line, the HTML element is actually going to take up a Zeman space as it possibly can. And so every single block level element gets its own line. So every time you define a block level elements, it's gonna be on the next line. That's all you really need to know. However, these strong tagged the emphasis tag in the bold tag or what are called in line elements, meaning that they only take up as much space as they have to. Okay, so I want to illustrate that I'm gonna go ahead and change this to let's say I'm a strong emphasis and then beat. So I turned the strong, the emphasis in the bowl tag green so you can see that they really only take up a Zeman spaces. They have to, and what we typically do is we put in line elements inside of block level elements. Okay, You can also put some block level elements inside of other block level elements, but it depends. Okay, The one thing that you can never do is you can never put a block level elements inside oven in line element, meaning that we can do for example, let's say, a U L, which is a block level elements, and then we can do anel I, which is a block level elements so we can do new list and we can also do a paragraph tag with strong and will do too strong so we can put a block level elements inside of some other block level elements sometimes, and we could put in line elements inside of block level elements. But we can never put in line element or block level elements inside of inland elements are I'm getting tongue tied, so I could never do like, for example, emphasis and then put a p tag and then put Hello. Um, this would be very confusing. Um, I have no idea why you would do this, and then, theoretically, you could do it, but I don't recommend it. So that is the difference between block level on inland block level. They get their own block, they take up in entire block. And so you would define two paragraph tags next to each other, and they would both be on separate lines in line elements. As their name implies air inland. They only take Oppa's much space. Is they have to as is, the case was strong. The lower Do Simmons and Delores 10. Divs and Spans: So the next thing I want to go ahead and do is show you what dibs and spans are Now that we actually know what in line and block level elements are, Ah, development is basically just a rapper. That's really all it is. Imagine if I had like, for example, like a blawg, and so I have, like, a navigation bar right here and then I have a main title. Then I have an article, and then I have, ah, bunch of side articles right here and then maybe a long bar article at the bottom. That's a lot of different information, right? A lot of different paragraph tags, a lot of different heading tags. And so whenever I try to style this, I need to be able to select the specific element that I want to change the color of or change the font of right. So dibs and spans essentially allow us to do that in a very easy way, and I'll talk about the pros and cons of them later. Not to worry. Essentially, what we do is we make it did okay. The same thing is before just opening and closing tags and then inside a here. We can just add whatever we'd like. So in this case, I'll just add H one and I do Andrew M. Holloway. And then after that, we'll go down here and we'll do an H two and we'll do, um, see the And then after that, we can go down here and do a paragraph, and we can just copy and paste are Lauren ipsum right there and throw that inside. So whenever I save this and go down, you can see it makes my headings and it makes my paragraph. Now I want you to pay attention because, as you know, whenever I save things, it changes. So if I got rid of some text, it would automatically change it. What I want you to do is pay attention to what happens when I say this after I delete the development. Okay, I save it. Absolutely. Nothing happens. Okay, That's because it's just a generic container. It's a rapper so that we can organize the different sections of our HTML document in a very logical way. So it's not meant to be anything. It's not meant to style the text like the strong tag does. It's not meant to give semantic meaning like the H one, which says that, Hey, this is the main title of the document or a P tag for our content. It doesn't do anything, OK, it's just a block level rapper because so I'm gonna go ahead and add this back in. And then after that, I'll show you an in line rapper because this is our block level rapper and we can put other block level elements inside of it. Like I told you before with our list, we can put some block level elements inside of each other, and then we have a span tag. A span is like a div, but it's an in line rapper. That's all it is, an in line rapper. So if I wanted to target this specific word and maybe make it uppercase, bright green, flashing or or something terrible like that of the span would be a very good choice for me because now I can specifically target this one word right here. And so hopefully as we get along, and as we get more and more into CIA says, it will really illustrate the usefulness. Whenever I first learned about these tags, They seemed completely useless to me and I didn't really get it. But once I started learning CSS, I really started toe, see the pattern and see where they actually fit into the scheme of things. 11. Anchors: So next thing we need to talk about is anchors. Essentially, anchors are basically the links that link the Internet together and make it a net, and an anchor is actually an in line elements. So what we could do is down below. We can make a new paragraph, and we could dio visit my profile here. Now you've probably seen this on the Internet before, right? Whenever you have some texts and someone says, Visit my profile here and the word here is a link that you can actually click on well, that's pretty easy to do. What we do is we make what's called an anchor tag, okay? And so that's gonna be in a just like that. And then we can put the word here inside so we'll do that real quick and save it. And if we click on it, Ah, whole lot of nothing is gonna happen because we're not telling the browser where toe linked to normally when we click on a website, it takes us somewhere, right? So the way that we tell the browser what to do essentially is we use attributes, attributes or HTML attributes are ways for us to give more information about our elements, okay? And they're really simple. Their key value pairs. And so the key is going to be the name of the attributes. So in this case, it would be a treff. And then we said it equal to a value, okay. And the value is actually going to be the website that we visit and things like that. So in this case, I'm gonna in between quotation marks. That's important. Add resume dot html And now if I save it again, you can see that it's underlined. And if I click on it, it actually goes to my resume right here. So hopefully you're starting to see how things come together and so we can just define it here with H ref. Now there is another thing that you can do. It's called Ault and all to basically defined some alternative text. But those air HTML attributes OK extra information about our element. We have a key, which is the name of the attributes in a value which is the information that we want to associate with that key with that name right there. And so they're very, very useful. And like I said before anchors are in line elements, so typically they would go inside of a block level elements, and that's pretty much it. 12. Empty Tags: Okay, Two more things I gotta show you before. Really, things kind of start to take shape. The 1st 1 is something called an empty tag or a self closing tag or element. So far, we've talked about block, level and in line. But every block level element in every in line element that we have actually written so far has had an opening cat tag and a closing tag. Well, there is a category of elements called empty elements or empty tags that don't have an opening and closing. They just have one tag right there. And so the 1st 1 I'll show you is called a break tag. So what we'll do is we'll make a brand new paragraph right here, and we'll copy some of our Laura MIPs. Um, from up in our actual document, go back and then scroll down if I have to. There we go. Copy that in. And as you can see, everything goes down. Like so what we can do instead here is we can add a self closing tag called a break tag. Okay, so break like that. And that's how you do it. You don't do any closing tag. Nothing like that, Okay? And if you do a break so you can see that everything pops down. So this word quasi right here is where the line breaks and then it goes down. So it's a self closing tag. One thing I will tell you about the break tag is I don't recommend using it just to make things go down to the next line unless it's very important that they do so OK, because typically things like maybe a poem or you're writing an address. In those cases, you you'll use the brake tag a lot because it's very important that they go down on the next line. If you only want your text toe actually go to this length, and you wanted to break it this point every time. There are much better ways to do that, and you'll see them shortly. Another thing that you'll see sometimes is a horizontal line. So the way that we do that is we simply just do less than signs HR greater than sign, and then after that, we save it and you'll see that it throws in a thematic break right here. All this is really doing is basically and I'm actually not supposed to have it inside of, ah, inside of, ah, block level elements. But this is basically just adding a line across the screen. That's all it's doing now. If you want a line across your screen just because then you're going to use CSS. Like I said before, CSS is for style, I'm always going to say that an HTML is just for a semantic meaning. The HR or the horizontal line represents a change in the theme or a change in the subject. So if you were putting a book online, you might use the HR if it's coming to the next chapter or something like that. So it's really for a change in theme or a change in subject. It's not for the looks. OK, so and that's pretty much it. I'll show you one more thing in the next section. 13. Images: there is one very cool, very useful self closing tag, and it's called an image tag. So you have, ah, image that you want to embed into your documents. So what you could do is I'm gonna actually go to my resume html from before. And if I scroll right here, I'm just gonna copy this and then paste it so I don't have toe actually copy the path. But what you do is you have an image tag right here, and this is how you make it just a image. And it has two main attributes that you need to worry about. The 1st 1 is the source. That is where the actual images. Because so if you have some pictures on your computer, you can easily use them as a resource. Ah, what I would typically recommend is if you have some images, like if I go to like, for example, content, and then it will load up and I can go to images, you can see I have a lot of different images here. And so just to make things simple, you could add, for example, this one, any image to your project holder. I'm gonna move that in there. And then I'm gonna go back and I should have an image now. Or maybe not. But either way, the way you define your file path, which is the way that you get to the image, is pretty simple. OK, I'll write it out for you. So first thing, if you do a dot then a slash of forward slash This means that we want to look for the file relative to where we are right now. A relative to where we are right now. Now, if you do, ah dot dot That means go up a level in the file tree. So what I'm saying here is I want to go up a level, so that means I'll be in the desktop because my Project folder is in the desktop. But right now I'm in HTML projects, so we'll go outside of HTML projects and then we'll go in so we'll do a slash into the content and the inside of the content. If I open it up again, you can see you have a folder that's images. So those slash images and then I have a profile pic in here and it says profile pic like so and that's how we actually get to our file. Okay? Typically, you don't want your images to be too far away, but this is what's called a relative path and because the path that we're defining to the file is relative to where we are right now. So that's the source attributes right there. And then we have width and height. Like I said, we can use HTML attributes to give extra information like how tall or how, um wide we want the picture and then we have all altar is alternative text. So that way, if ah blind person uses our website or if for some reason image doesn't load this text will be used instead so I can say picture of yours truly. And then if I say this, you can see it loads up an image. And if I mess up the file path like maybe I just say image singular, like so reloaded, you can see it says picture of yours truly, I would always recommend that you fill in the altar attribute, especially for people who can't see that that way they kind of know what's happening instead of just having an image that they can't see. They actually know what the images. So that's pretty much it. In the next video, we're gonna take everything we have learned and bring it all together, so we'll see in a second. 14. Task Overview: All right. So what I've done here is I've basically made a very primitive website. Primitive is the word. Don't worry. As we get more advanced, we're gonna learn how to make this a lot better. But I just want to show you all of the different things that you can actually do with just this basic understanding and show it all kind of coming together. And this will also really illustrate a point I wanted to make before, which is that Web developers don't really know everything. The most important thing a lot of times is that you're just able to find the answers instead of already having all of the answers. So first I have one page right here. It's called a home dot html and inside of here it looks like I have a list of links, which is all a navigation bar really is just a list of different links. And of course, with CSS, we would be able to make this a lot better. And then we have our home page and it looks like it's a little bigger than ah, we sell shoes, which is kind of the second important thing to know about the home page. Yeah, The home page is really where you tell people what the purpose of your website is. And so this is my basic attempt at that. And then I have an image of a shoe right here and then below that. It looks like I have, Ah, some sort of text. And then here it says, Check out our selection so I can click here and it loads in a bunch of different shoes and you can see we still have our navigation up top so I can click home. Or I can go to products like before and you could see it says shoes. And it looks like we have an image of a shoe and a caption that says, Cool shoes, one cool shoes one and then another Cool shoe and another cool shoe. Obviously, we could make these images the same size, and we might edit them before we even put them on our site. But this is the basic idea right here, and then one extra thing that I did was I made. It's where I can click on the picture, and so whenever I click on the picture, it loads in the image again and it has an add to cart button. It has the price and it has a product description Now, obviously, I didn't teach you everything that you see here. I didn't teach you how to actually make an image into a link. I didn't teach you how to add a caption to your image. And I also didn't teach you how to make a button. But that's the most important thing is that you're able to find answers. So you have three things you need to figure out, OK, you need to figure out how to make a button. You need to figure out how to turn images into links. And you also need to figure out how to add captions to your images. Okay, I'm not the reason that I'm not teaching you This is not because I'm lazy, but rather because it's important to get used to this early and get used to Googling to find the answers. Because Web developers don't have all the answers, they're just good at finding them. So if you have any trouble with this and you start getting frustrated, go ahead and look at the next video where I show you how I built it. But otherwise make sure to go through this and give it your best shot. OK, if you need to review this video by the way and go through and look at the structure again , by all means. But basically it's just a home page, and it has a list of links to the different parts of the website. Quote unquote Ah has some titles and image and then another link that says Check out our selection here and then after that it has a list of different images with all of our different shoes, and the images have captions, and I can click on this 1st 1 You don't have to do this with all of them, by the way, just the 1st 1 in. If I click on the image, it loads in the product with a basic description, the price and an add to cart button that does a whole lot of nothing. So go ahead and do this, and I'll show you the answer. In the next video 15. Tables Overview: So we just got done with our first website and it is a very primitive website, but it is a step in the right direction now. I don't want to get into some kind of intermediate level HTML. More specifically, we're gonna be talking about tables now. Tables in putting data into tables seems very boring, but it's actually very useful. And I pulled up a couple of websites just to demonstrate to you that it's all across the Internet. Really. Um, any time you have pricing options, a lot of times they'll show you, like integrated development environments and the like, check off all the different features it has, or if you're comparing different features, it will show you that this particular package does have this feature. But it doesn't have this. And you can just see table, table, table, table, table. And if you go to ESPN, I mean, you gotta imagine the developers at ESPN have to be table experts at this point. Honestly, look at all these different tables and stats, and then just a man just table after table so very useful. I'm gonna show you how to do it in the next video 16. Table Basics: All right, So, Step one, we're gonna open up our HTM of projects on our desktop. And as you can see, I've kind of split things up into beginner and intermediate. So now you can look inside of your beginner folder and you can see all of the different things that we've done so far. Now, the next thing we'll do is we'll go into our intermediate and will make a couple of new files. So let's just open this up with brackets right here, and it should take just a second. Slowed brackets is typically pretty quick to load up. And we're gonna go ahead and look at how we can make tables in HTML. Um, it's really simple, and you can style him in a lot of different ways. So if you look at the options that I showed you before, you know, you can see that it can clearly be styled in a lot of different ways, and you can put different icons in here like checks or exes, or you can even put links inside of here and different numbers and stats. So, really, the sky's the limit. Any kind of tabular data that you need and you can even throw in some images like they did here with these different players. So now that we have that opened up, next thing we need to do is inside of our intermediate file. We need to make a new filed, and we'll call it tables dot html. Okay, Now we need to actually define our skeleton, and I'm gonna go ahead and close these other windows right here. So the first thing we'll do is define our skeleton. So we'll do dark type HTML. And at this point, you should be like an expert at it. So would you go kind of fast? Html That will do head on with your title and we'll do. Let's see, um, tables, cab. And by the way, the way that I'm making these actual tags so quickly is I basically type out the tag name and then I hit Tab, and it automatically makes it for me. Now the first thing we do when we make a table is we do the table tech. So it's listening in table greater than sign. And it is an opening closing tag. Now inside of here. First thing we'll do is we'll do table row, okay. And table row is basically just one row. Now inside of here will do our first tag, which is table head. So it's th and then opening and closing tag. So we have defined one row inside of our table, and right now we're defining the head. So in this case, if I was doing, like, work experience, I would do something like let's a company, and then the next head would probably the th start date. And then after that, I would do the end date, so I would do th end it. And then after that, I would do something like th and then I would do position. Okay, so now I have to find the head. So if I reload this and actually actually hit the lightning bolt right there so I can see a live preview. There we go. Now it's loading. You can see it loads up. Companies start date nd am position, and it will bold things if it's the table head. But we can, of course, change. That was C s such CSS, which we'll see later. Next thing we'll do is another table row, and so for here will do tag called Tedy, which is the actual table data. Okay, so you have table, row, table, head table data. Now, the next thing will do here is Well, do, let's say Richard and sons and sons. Okay. So as you can see, my I d or my text editor is throwing an error. Okay? This is an important lesson right here. There is certain symbols, okay, Like the and or the less than things like that that you can't directly type out. For example, with less Thean sign can't be typed out like a less than like so I'll show you if I wanted to do some math and here, like less than five K, that would be incorrect. The reason being, we used these symbols already to actually make html tags. So the way we do it instead is we do lt like so in an ampersand at the beginning, and that'll actually give you list. If you go through it, you can see it shows all different kinds of symbols that you can make. So if why do ampersand? It should show you all the possibilities. And if we scroll down, you should see a less stand sign at some point like so. But what we need right now is just in and and the way we make an ampersand sign is pretty simple. We do ampersand a MP, and just like that, we have our and sign. So just so you know, there are certain symbols that you can't type out an HTML because they're already being used as important symbols for making HTML tags and things like that. So we'll do Richard and sons like so and I'll and I'll give you a link to all the different symbols. Typically, I just google them. If it's like some kind of crazy symbol, like a euro symbol or something, I'll just google it. You don't have to memorize them, Richard and Sons. And then after that, we'll do table data and will do start date, which would be, I guess, like we'll do to dash 14 days. They will do 2014 in, and we gotta add this slash in there and then for the end date will just do currently employed and you notice that it's actually moving with it. So that's one of the cool things about tables is it will make a much room as you need before your actual data to match up with your rose. So after that will do table data, and then we'll do lead developer. And as you can see, once again, it's moving. So this is the basics of tables right here. And as we get deeper into CSS, we'll see how weaken style this, how we can add icons like checks. And we can even add links, which you already know how to do an images so we'll get more into this later, but that's really all you need to know for now. 17. Colspan: Okay, so next thing we're gonna do is look at how we can make some more advanced tables now. First thing I'll do is I'll add a horizontal line just to kind of separate amount. And just to see that we're on a very different lines right here. So we'll add that horizontal line in good empty tag we learned about. And the next thing will do is make a brand new table, and I want to show you a couple extra things you can do. First, you can add a caption so we'll add a caption tag. As its name implies. It's just caption for the table, so it gives you a little extra info. I'll do, for example, spending history for this example now, outside of that caption, and you can put the caption at the bottom or the top, whichever you prefer. But outside of that caption, I want to make my table row, and we're gonna put our headers here so we'll put it th for table header and we'll do purchase. Then after that will do. Um, let's see him location and after that will do table header price and less. But not least, we'll add something in the middle like purpose. Okay, so now all we gotta do is fill it in with data, so I'm gonna do a lot of copy and paste. And just so you don't have toe bear through this with me, So Well, do you table data right there. And we'll do, Let's say haircut and then location, table data, barbershop. And then after the purpose table, debt data look better or we'll just call it business business. There we go. And then Price probably about 20 bucks. If I had to guess. 20 bucks there. We g o now that we have that said, I'm gonna go in copy and paste this so we can just ah, show you what we're here for. Okay, maybe one more. Perfect. Now, what I want to do with this is I essentially, after all of the prices for the individual purchases at the bottom, I wanna have a sum total right here. So what I could do is at another table header at the bottom here, where it says some now, the reason I would use a table header right here is because I'm telling you what type of data it is I'm not actually putting data. So that's why we use t. D for this table data. But we used th for these headers right here cause I'm naming the data are giving it an association, I should say, Now we'll go ahead, make another table row and inside of there will make a table header and we'll call it some . And then after that, we will put the table data itself, which is going to be the total. And in this case, that's 80 bucks. I think a lot of money for haircuts now. Of course, as of right now, it's not showing up where I wanted to. I wanted to show up right here on this final column. So what I can do is I can make my column header or my table header span across these old other columns and push this data to the end. The way we do that is there is an attribute on these columns. Are these tables called call span? And I wanted to span three columns in this case. So, as you can see, I just specify call span and I tell it to go. 123 columns across and Now we have a much better looking table, and of course we could color code this to make it easier to look at. That's pretty much it. In the next section, I'll show you the other way. 18. Rowspan: So I showed you call span. So the next thing I want to show you is row span. If we can make our table headers span across multiple columns, it stands to reason that we can also make it span across multiple rows like we have here the vertical part. Now, as you can see, I've also made the table headers Gray. I did that with some simple CSS. And I did that purely for illustrative purposes. Okay, you don't have to do this. I just wanted to be very clear to you what's happening as we do it. And I know if things air invisible, it's very hard to see. Kind of like what I did with the paragraph, how I turned them blue to show you block levels and green for in line. So that's all. Next thing we'll do is add a horizontal line to keep things nice and separate. And so now we have both of our table separate and we're gonna add we're gonna pretend that ah, potential client came to us and says that they want a nice table on their website for their employees to be able to look at the schedule for their different appointments with the animals online, so it will tell the client no problem and will make a table tag right here, and we'll start making one. Now. What I'm gonna do in here is I had the caption, so it'll be animal appointments. Then after that, we'll go outside of the caption and will create our first table row and will create a bunch of table headers. So we'll do Table header, and then we'll do animal. And that will be for the type of animal it is. We'll do a table header and we'll do appointment or will do. Owner actually makes a little more sense owner, and then after that, will do MM scheduled for. So this would be like if they're scheduled for a grooming or a surgery or something. And then after that, we'll do it one last table header, and this will be for the time. Perfect. No. The next thing I want to do is, as we all know, sometimes tables display data vertically, and so I don't wanna have to specify individually dog, cat, dog, dog, dog, cat, especially if it's just one dog after another. I would rather just block it out and show that every one of these is dogs just makes more sense. So the way will do that is in this next table row right here we'll create another table header just like we did before, because we're creating a block of data this time and describing the data. So in this case, it will be a dog kept and it's gonna be two dogs in a row. So what Aiken Dio is have this thing span two rows. So now this appointment will be a dog, and this appointment will be a dog. Okay, now, after that, will do table data and we'll do Tim or Tim A. And then after that, we'll dio td scheduled four grooming. And then after that, we'll do time, which will be three o'clock. Let's say so. Now it will create one more table row and then we'll just copy these table data. But we won't copy the table road because we don't have to. Okay, we really don't have to. And as you can see no, it looks a lot nicer. You can see it's just two blocks or two scheduled appointments for a dog, very simple. And then the next thing we could do after that is we could do the same thing for cats. So we'll do a table Rome create a table header for cats and we'll do that. And we have three appointments with cats. People seem to like cats for some reason, and then we'll do to copy and paste this. Actually, there's no sense in us having a copy and paste all of this again and again. And then after that we will. Just copy and paste are a table road, so we don't have to keep copying that. And then we'll go down perfect. And then go Bam, bam! And as you can see now, our cat span three rows and our dog span to rose. Just so you know, you could easily do this by just doing a table data and then just specifying cat for every one of them. But this is a way to just kind of block the information together and make it look a little nicer. So that's pretty much it for tables. For now, I'll see in the next one 19. Accessibility: All right. So the last thing I want to talk to you about here Yes, there is one more thing. And I did lie. But there is one more thing I want to talk to you about here, and that is the visually impaired. Okay, so whenever we look at this table right here, it's very easy for us to actually associate that data. We can see. Okay, Company Richard and some that that that that the this is this is the sum right here. It's very easy to get a grasp of visualizations. Ah, when you can see, however, for people that are visually impaired, this is not quite so easy. So there is a way for us to make this table easier to use for people who have screener years, because that's what their screen is going to do is try to read it. So we can make it easier for that software to scan our table and make the associations with the data that we intended to make. So the way we'll do that is with some new HTML attributes, namely i d and headers. So the I d is gonna be what we put on our th tags right here. And this is toe Identify the headers right here. So for this case will do company. And this is the very first, very first table that we did. And then after that, we'll do I d for start date, and we'll just call it started to keep it simple. I d for end, which would be end. Don't forget your quotation marks and then I d position right there. Now the next thing we do is pretty simple. We had an attribute of headers to the table data right here. And so this is the header that is associated with this data. So will the headers. And right here will do company and same thing right here. Headers. Then we do start and then headers and and headers position right there, just like that. And so now the data is associated with a particular header company, etcetera. So we have to do this if we also have multiple headers in multiple places. So I'll show you that with our animal appointments table right here. So, as you can see, we have multiple headers up top so we'll do ault and shift to do a multi cursor and we'll hit the down arrow a couple of times. This is so we can just type it a little faster and we'll add an i d to every one of them. Now. Next will do. Animal. We'll do owner. We'll do scheduled and then time right there. And we also have to do this for these headers that we have here. So here I'll have to add an I d. Of dog right there. And for this road down here, I'll have to add an i D. Of Cat. Okay now, for the headers will do all shift again. Toe. Add it very quickly. So we'll do headers. And now we have to actually list out all of the different headers that are associated with it. So in this case, it's not just associated with the owner, but it's also associated with dog in this case. So we'll do owner and dog, and then we'll do owner and scheduled, scheduled what I picked such a hard word to spell. And then we'll do change that to dog rescues me, and then we'll do dog and time. So now the data is associated with dog and the data is associated with Header. That's up top as well, and we'll do the same business right here. So we do all shift to type it a little faster and what headers. And then we'll add dog to every one of them. And then the unique one right there, owner and then scheduled. And then after that, we'll do time right there. Perfect. So just keep that in mind If there is more than one header associated with a particular piece of data, you need to specify both headers that the data is associated with to make people's lives easier when they have a screen reader. But that's pretty much it, Um, and I would go through the rest, but I, of course, don't want toe take up too much of your time, so we'll go ahead and move on to the next section. 20. Forms Introduction: so we've talked a lot about tables. Now the next thing on the docket is going to be formed. So what we'll do is we'll right? Click Create a brand new file. Call it forms dot html, and we'll go ahead and get started. First thing we always have to do is get our skeletons. We'll just do, ah less than exclamation doc type HTML. You should be an expert at this by this point, so we'll go a little faster. Html tab, head tab, title tab forms and then outside will put our content in. The body is always and we're set. So next thing for us to do is go ahead and hit the lightning bolt right there and we'll load up a live preview like so. And we're all set now to make a form. It's really simple. There's certain things I'm not gonna talk about. Deering this part of the Siri's. I'll do other videos and other courses later where we really see how forms play a part in the overall scheme of things. But for now, we're just gonna get our feet wet. So first thing we'll do is we make a form with the form tax that's less than form greater than and at closing tag. And obviously we don't see anything on the screen yet, and that's because we need to add what are called input elements. As their name implies. This is where the users would actually input something. So if you ever see like a sign up form or a log in former anything of that nature, you're always going to be seeing forms. Or if you own, like a consultancy or a freelance business, where basically clients submit their problems and stuff and then you call them later, everything is formed. So this is another big part of the web now. What we do is we have an empty tag called on input empty tag, meaning itself closing. And as you can see now, if I go ahead and look at what's on the screen, you can see that we have this little box right here and I can type stuff into it. This is called an input, and there are many different types of inputs. The way we specify what type of input it is is there is an attribute called type, and as you can see, there are many, many different options in this case. What we're gonna do is we're just going to do text, okay? And this is gonna be the user name. But then there is another type of input called email, okay? And so we can change this to email and it looks the same, and pretty much is the same. Except for if I type something in and then I unfocused and I try and submit the form, it'll provide some basic error checking. So if I didn't include a at symbol or a dot com or at Gmail, you know it's gonna check that and go ahead and let me know by default. The next one is gonna be input of type equals password, and it does the same exact thing. Except for whenever I type, you can see that it actually shows nothing. It just shows dots. And that's how people actually create that on the web. And then, lastly, for now, we'll get into some more stuff later. We need a submit button Now. I taught you before that we can make a button by doing the button, and then we could actually set it to type equals Submit which actually does work, and then inside of here, we could do submit. So now if I, for example, type in an email hit submit, you can see that's why we set it to type email. It says. Please include an ad in the email address. So that's the only difference between type equals text and type. Musical equals email. But there is another way to do this. The other way to do it is to actually do input and then said It's a tight equal submit and automatically you can see right here. It does the same exact thing as before Now. You can also specify values default values for your inputs. So, for example, right here our input type equals submit, and we can set the value Attribute equal Teoh, for example Law again. Okay, that's one option. And we can also do this for the text so we could set a default value. Ah, let's a user name right there and it doesn't really do anything. And that's a good thing. Actually, believe it or not, because if this value was set to use her name, then nothing would ever change. So you don't want that now. There's a couple other things that you're going to see throughout the course. Typically, we give our inputs and name, so name here would be like user name. And then we set the name attribute on this one equal to email. And lastly, we set the name attributes on here equal to password. Uh, I'm not gonna go into huge detail here, like I said, and other courses will talk about this, but for now, just know that whenever a user sends us data, we need a way to reference this data. And so we give the data a name, and that's essentially what this does. Um, And then there's a couple of things on the form you set like the method can be either a get method or a post method, and in the action is where to send the form to. So get is a type of request, and we'll talk about this later. Like I said, for now, we're just getting an overview. And action is basically where do we send the request? OK, so those are the basics of forms. Now, we're gonna look at a couple of other different types of inputs we can allow and create in the next section. 21. Radio Buttons: So now I'll show you a couple of more advanced or not really advanced, but just other options that are available first. You've probably seen this one before. Input and you can set input to type equals radio now radio buttons. You've seen him a 1,000,000 times. They're just these little circles that you can click and ah, yeah, basically select. You'll see him a lot when people ask for, like a gender or, ah, if there's a limited number of options, like a B C D. So ah, multiple choice tests online or another very common thing, Um, and so basically, we can have multiple radio buttons and then we'll do this and this and this right there. Perfect. Now that we have that set. As you can see, we have three different radio buttons, and there's actually another value you can set on this cold checked, and all that's going to do is make this the automatically checked radio button. So that way, if the user accidentally forgets it, we already checked it. Forum and you can see right there. It changes like so, and you can select all of them. Actually, which is pretty interesting. And the big thing we're gonna need to do here is we're gonna need to add a name, property to it, and we'll do a name of gender because if all of these different radio buttons air different , we need to be able to associate it toe one form of data. So that's the way that we make sure that we are associating whatever is selected male, female or other with correct data types. So that way, whenever we referenced the gender, we know it's one of these three options. Okay, so that's to avoid confusion whenever there's multiple radio buttons and you need to reference that data and make sure you're getting the right thing. Now in the next section will look at how we can add some labels, because clearly we have no idea which gender it is right now. But the cool thing about radio buttons is that you can only select one at a time, as you can see here, but we'll look at how we can add labels 22. Labels: so the way we had labels is really pretty simple. Right above our first input will make a new tag called Label, and we will call it user name right there. And then after that, you need to set an attribute on it called four, and then we'll do user name. And then we need to set an I. D. Here called user Name as well. And so this is just to associate the appropriate label with the appropriate input, and that's pretty much it. So there it's all there is to it. Another thing we could do label here, and then we'll do email. And then we'll do email right here. And we just do these labels to help people with screen readers, really. And then I D is email. And then we can do the same thing, Of course, for our radio buttons will do label, and then we'll do not see for male right there and then we'll add a male right. They're wonderful, and then after that we will do I D. Of Male. And then after that, we'll do the same thing for all of these right here. Matter of fact, I really don't want to type this again. So I'm just gonna copy and paste this again. Then we'll do pop pop. Perfect. We're set. Now we just have to change it. So we just do female female right there and then we'll do a female again and then female again. And then we'll do other right there. Boom, other and then other. And then after that, one more other right there and we're set. So now, as you can see things, they're starting to look a lot better. We just need to add a label for our password like eso this just to help people with screen readers. But also, labels are useful for people who can see too, because now we can clearly see what each thing is for. So I had a password right there, and then we will set the i d equal to password. So no, we have a reform all set up. Everything is clearly associated with its value, and we can set the default weaken, check a gender by default right there, and re save this and reload this real quick. Now, obviously, this isn't the most beautiful form in the world. There are a lot of better ways to do this by styling it. But no matter how complicated a form is, it's always gonna follow these same patterns. Now, since this is all contact information, there is a way we can organized this better semantically meaning that we can group all of this together. Um, what I'm about to show you is especially useful if you're working with a bigger form. Ah, it can be very useful for basically grouping certain sections of user data together. So what we'll do is make a field set. Okay, this is kind of like what we did with figure and fig caption. You know, it's just a way to wrap it all together. Um, it gives us a hook as well, so it'll make it easier to select things when we style it. Just put it inside here, like so and then at the top. If we really wanted to, we can even include a legend which will be like the title of this form. So the legend tag will go right above in this case. Or you could put it below and we'll put contact in for or log in information. There we go. That's better. Log in information. And you can style this According Toa. However you wish to style it. But by default it comes with this right here and you can see it creates this box and it puts the legend right in the middle of the box. It puts it in the middle of the line, so it kind of breaks the flow right there. So pretty interesting. Really. It's just semantic. And so you can easily select certain parts of the form, but definitely a good thing to know. 23. Select Options: Now, of course, if you've ever filled out anything where you have to put where you from, you've seen these big drop downs, or if you've ever gone toe like a car website or anything, there's these big drop downs because there's a lot of different options, so we can actually do that as well. And it's pretty easy to Dio. What we'll do first is we'll make a label and we'll call it cars and then we'll call cars. And then after that, we'll make another input called Select OK, and Select is basically has its name implies a way for us to select things, so we'll call it cars, cars and inside of here we put options, so the option is gonna be, for example, um, we'll do on a Ford. And for those of you who are big fans, afford I Chevy for like whatever. I'm just picking something so we can fill that in, and we'll just copy and paste this or will copy and paste. The skeleton of it is better option then copy, copy, copy, and we're good. So we'll do you Chevy and then we'll do GMC and then we'll do VOCs forks bargain. I have to think about it in German, otherwise that can't write it. There we go, and then we'll just put VW G. M. C. And then after that will put Chevy perfect. Now that we have that set up, we can easily select things. But just popping down this menu and you can see we have all of the options that we put in here, and there's also a value in a name. So that way, whenever we get this data, we can reference the name and the value that was selected. So that's the first thing to know. And then another thing you can do is you can select things by default, similar to what we did with Checked with the radio button has checked attributes right here . We can just write selected, and we don't have to write key value pairs. Um, there's certain kinds of attributes where you don't have to write a value for it. For example, Ah, there's one value or one attribute called Disabled, and it basically just disables the button. And so now you can see that the log in doesn't work. Uh, and of that, of course, would be very useful. If a user hasn't typed in the correct information yet, you don't even want them to be able tow, submit a form. So that's another option that you can do right here. And then one other thing I'll show you is you can do text area and this form is getting really crazy. I don't know what type of website this would be where they need to know so much about you. But text area would be good for a blawg. Essentially, Um, that's where I've definitely used it the most or, you know, written complaints, messages, messaging systems, things like that text area just defines a you guessed it a text area and we can write all kinds of stuff and we can do, enter and put all different kinds of things. So is another thing we can do now. There are a couple of attributes to be aware of. First, we can put blawg underscore post right here, But then we have the i d. And that, of course, is for the form or the label. So we'll put log underscore post blawg underscore Post. There we go. They will put a label log, underscore post and Then in here, we'll put like, Blawg post perfect, and we can change the columns and rows. So basically, how long and wide it is. So if I put 300 instead of 30 you can see it stretches like crazy. And then I could put, like 100 instead of 10 and this text area immediately becomes just a beast. So this would be really good, I guess, if you were writing your your last epitaph or something. But yeah, so that's the text area. And that's the select Ah, these air. Definitely some of the most common form options that you'll see. There's obviously other ones you can use. Um, but the's air, definitely the ones that I see the most, but I'll show you a few other cool ones here in the next video. 24. Other Cool Inputs: So now I'll show you a couple of other cool input types you can definitely add in. So the 1st 1 here is gonna be something called data list. This is a new addition as of html five, and so it's not supported by all. Browsers will talk about compatibility here soon, but just know that you can make an input and you can set. If you spell input correctly, you can make an input where you define a pre predetermined set of options that could be entered so it actually won't be here. You have to set the input attributes the list equals browsers, for example, and then we'll define a data list, and then the data list will have an I. D that matches whatever the list was defined us of browsers in this case. And then like before, we just define a list of options. So in this case it will be Mozilla. And then we'll do ma zilla, and then let me see if we actually have it going. Yes, so if we click on this now, you can see it pops down. It's pretty cool, actually, and then we'll do a couple of other ones so we'll do chrome and will do edge option, chrome and then chrome. Last but not least, we'll do. Let's see option, and then we'll do. EJ equals edge and we're set. So now if I click on this, you can see that gives me a bunch of different options. And if I keep typing CH, it'll continue to show that option. And if I keep showing Imo Z, it will show that option, and I can click on it, and then whenever I submit it, it will be good to go. So that's one other option that you have. And of course, there are many different input types that you could play with. Ah, there's an input type called Resa, which is very useful. It allows the user to reset everything they define in the form. So if I typed in a bunch of stuff here and this and this and this and then I hit reset, it clears every value in here. So if I went from one toe oneto one toe this and this and this and then I just hit this, it would reset literally everything. So that's another useful thing to add for your users if they just want to start from scratch, then you could do something. Like, for example, I believe they have one called color. If I'm not mistaken, one of my favorites for sure. And you can actually select a bunch of different colors, and so this will be pretty cool. Um, if you wanted to allow users to customise avatars, that's very useful. And you can, of course, go through these and play with them. I just want to show you some of the other useful ones you have check boxes to. So, um, you know, subscribe to the newsletter. Subscribe, Subscribe, Subscribe. Okay, so there we go. So if someone wanted to subscribe to your newsletter, they would use this check box right here. But these air definitely the most common ones that I use. Um, there is a resource that I'll show you to check if they are available in the current browsers or if it's just such a new feature that you can't quite use it yet. So let's check that out. 25. Extra Resources: So in a perfect world, all users would use all of the latest browsers. So that way, as developers, we can always use the latest features and toys that are available to us. Ah, but life is never so easy. So there's a really good resource. I'll show you. It's called. Can I use dot com? And basically it allows you to check if certain features are available in different versions of browsers. Because, as we know, not everyone uses the same browser. And not everyone has the same version of that browser. So, for example, if I type in and data list, which is something that we just used previously, and if you spell it correctly, it should pop up right here, and we do get data list element. And as you can see, there's only partial support for Firefox Edge Internet Explorer. Ah, and there's almost no support for any of these other ones. So, um, if you're just having fun and you're building an application for, maybe your portfolio are just to experiment, then feel free to use all the experimental features that you want. However, if you're going to be building applications for your clients or for your company, then This is a really good resource because you don't want to use something that doesn't have a lot of support. Unless, of course, you're willing to write Polly fills or use other tools like that. Another example of this would be, for example, the output html element. Soon as this loads in, let me see. Should be. No, not here. Okay. In that case, maybe something like, for example, type equals color. This is a really good resource. You can use it if you'd like. I highly recommend it, and it'll tell you what you can and cannot work with. So another example is flex box, which is, Ah, great feature of CSS. And you can see that it's almost got complete support across all browsers and then CSS grid . You can see if that's available worth. That's not available. Let me see. Yep. Almost all complete support, except for Internet Explorer, as always, but yeah, so hopefully enjoy this resource it is. Can I use dot com