Learn to write HTML code | Laurence Svekis | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 47m)
    • 1. Building Websites Web Design HTML and CSS

      2:10
    • 2. 1 Introduction to Web Design and Web Development

      9:57
    • 3. 2 Course Tools and Resources

      3:33
    • 4. 3 Basics of HTML

      7:03
    • 5. 4 How to create a basic HTML template

      11:38
    • 6. 6 Headings Paragraphs and Line Breaks Content Structuring

      7:32
    • 7. 7 Adding images into HTML

      5:10
    • 8. 8 Ordered Lists Unordered Lists

      3:51
    • 9. 9 Hyperlinks Relative paths vs Absolute Paths

      8:07
    • 10. 11 Divs and Spans Tel and Mailto

      9:00
    • 11. 12 HTML5 Semantic Elements

      5:14
    • 12. 13 Transfer build content to editor

      2:32
    • 13. 15 How to create HTML forms

      8:24
    • 14. 16 HTML5 Input types

      13:02
    • 15. 17 Additional Form Elements

      4:55
    • 16. 19 HTML conclusion

      5:01

About This Class

HTML and CSS are the core building blocks of the internet and make up what you see online everyday.

This course is designed to introduce you to modern web design with a focus on real world everyday web development skills.   Let us show you where to start and how to create websites.

This course has the answers to anyone who wants to learn to make websites, with a practical real world approach to teaching website development.  Just knowing syntax alone is not enough, you need to know how to put it all together.   People are always asking me what do I need to know to create websites, and this course contains everything you need.   Step by step training demonstrating most commonly used syntax.  

Out approach is different, learn to think like a web developer.   Web development broken down into not only HTML syntax but how to think about your HTML as you create it, to better prepare for styling.  Saves you time so that you can create you HTML and then move on to CSS making the website come to life.  

Transcripts

1. Building Websites Web Design HTML and CSS: HTML and CSS are the core building blocks of the Internet and make up what you see online every day. This course is designed to introduce you to modern website design with a focus on real world, everyday Web development skills. Let us show you where to start and how to create websites. This course has the answers to anyone who wants to learn to make websites with a practical , real world approach to teaching website development. It also includes everything you need to know in order to get started quick. Just knowing the syntax alone is not enough. You need to know how to put it all together. People are always asking me what what do they need to do in order to create websites? What do they need to learn? This course has the answers that you've been looking for step by step training, demonstrating how to use the syntax as well as how to apply it with HTML and CSS together make really amazing Website Web. Our approach is different. Learn to think like a Web developer Web development broken down not only into html syntax but also showing you how to think about your age to melt as you created to better prepare for styling. It saves you time so you can create your HTML and then move on to CSS, making your website come to life. CSS is where you can let your creativity flow. Transform your HTML code into a beautiful website. Learn how to use CSS in a modern approach, learning which properties are most commonly used and why learn to make your website responsive, adding different break points to ensure your website is fully accessible and consumable from any size device. Full HD quality videos HTML and CSS talk resources are included. Web development links step by step instruction professional training from instructor with over 18 years of real world experience, modern website design in a modern approach toe Web development source files are also included, so you can work alongside the lessons. I'm here to help you learn about Web development and ready to answer any questions that you may have. You'll be amazed at how easy it is. Easily you can learn. HTML and CSS start creating your websites today 2. 1 Introduction to Web Design and Web Development: welcome to our introductory course on how to build a website using HTML and CSS. My name is Lawrence, and I'm gonna be your instructor for this course. I come to you with over 18 years of Web development experience, and I really enjoy having the opportunity to share my knowledge with you in creating websites. The purpose of this course is in order to help you learn to create riel world websites using HTML and CSS, we're gonna be covering all the fundamental foundations how to write html code and the most commonly used HTML code. And then we're gonna style it using CSS. This is one of the most common questions that I get. People want to know how to create websites, and they want to know how to be able to do it quickly. So this is why I've created this course in order to cover off all of those questions. And those funder, mate, mental foundation questions how and what HTML elements and tags are used most common. And where do they get started? Where do you get started and how do you create a website? So in this course, I'm gonna be covering all of the basic fundamentals of HTML. We're gonna talk about how we can create an HTML template that we can use and then reuse over and over again so that we can create multiple websites just from this one basic template. We're also going to be looking at how we can add heading information body and overall, structuring our website in order to better represent our content and for matter content. So it's more digestible by the users that are gonna be interacting with this content. I'm also gonna be covering off Web design fundamentals. So these things are things that you need to consider when you're designing a website and it's going to make the whole process a lot easier, how we work with different containers and how we start to build out our HTML structure so that when we're ready to apply CSS and styling, it's a whole lot easier to do and to add into our website. This course includes everything you need to know in order to get started. It's going to include all of the source code resources that I'm using in the course, and this is also a step by step tutorial. So all of this source code that you see here we're going to be covering line by line, why it's being added and what it's going to do and how it's going to represent on your Web page on your Web within your HTML file. So even if you don't have any HTML experience or CSS experience, this is gonna be the perfect course for you. In order to get started quickly with HTML, we are gonna be covering all of the most commonly used HTML elements and tags as well as the most commonly used CSS styling properties in order to create websites. This course is designed around modern Web design and Web development concepts, and these air what I'm gonna be covering within the course. So we're gonna look at such things as paragraphs, line breaks to help structure or content make it more readable and presented better for our users. We're also gonna look at adding in images as we know what image is worth 1000 words, and you can do a lot just by adding and images and users are really going appreciate that you've got some nice imagery within your website. We're also going to look at how we can create a new ordered lists and ordered lists. And again, this is gonna be to present our content in a more digestible fashion, for users were also going to look at creating our navigation menu. So this is gonna be created using an a nordeste, and then later on, we're gonna plus styling to make it into a navigation bar. We look at hyperlinks. So this is what the core of the Internet is all about. Connecting different Web files from one to the other and allowing users to easily navigate from one to the other. So we're gonna look at how we can create hyperlinks. And we're also going to look at how we can do these on page anchors so that we can really easily click and go down to a particular section of our website where the content that we're looking for is being represented. Also look at the difference between relatives, paths and absolute paths. Why, it's important to understand the differences and how you can link out to different files within your website and on the Internet, and then did since spans. So distance spans air gonna be an essential part of developing your website did since spans are how we create some structure and then we add in styling using Dimson spends and to really represent different elements and pieces of content on our website, we're also going to look at how we can make telephone and email hyperlinks. So all of this, in a whole lot more and once again source code is going to be included. Then we're gonna look at HTML five semantic elements because this course is based around modern Web development, we are going to be focusing on html five and we're gonna be looking at all of those structure elements that help me structuring your HTML page much more user friendly and much more readable from the Web developer perspective. Also looking at how we can transfer content from the editor back into on online editor. So depending on how you're developing your website, there's a number of different ways how we can transfer content back and forth, and also we're gonna look how we can build out forms. So forms are essential part of web design, understanding how to create these user input forms and Passover information within your website. This is a crucial part of Web development and designing forms really does take a lot because there's a lot of options with forms. There's a whole lot of HTML five input types and there's a whole bunch that have just been added with each to modify this well, so lot really to do with different forms. The elements that are available with informs, the tags that are available within the forms and attributes and all of these different form resources I'm also going to be including within, of course, And then what? When we get to the second section of this course, we're gonna look at how we can apply CSS. So CSS is what makes this website the website that we see in front of us right now. Without the CSS, this website is gonna be look completely different. So if I was to remove it, the CSS refresh the page, this is good. The HTML structure looks like so with the CSS added, it looks a whole lot different, and CSS is how we can easily transform our website into how we want to represent that content. So this is with CSS. This is without etc assess and we're going to be going over all the different ways that we can select elements in our HTML tying it all together with what we learned in the first part, with HTML structuring and how we can work with CSS doing such things as applying colors, background images like we've got here, background colors, updating colors on different elements, updating colors on fonts that we're using and a whole lot more so it's quite a lot of information that's gonna be covered. And this is gonna be all of the core ones that are used on a regular basis for modern Web development. Also, we're gonna look at how we can apply pseudo classes and different design patterns that are used to commonly understand what different elements represent on your weapon. So we're gonna look at such things like design patterns, where when a user comes to your website and they hover over that, they immediately understand that this is a navigation bar, and these are clickable, clickable elements as opposed to just regular text and how to differentiate that when you are designing your Web site. We're also gonna look at floats looking at the box model. So how margins air handled within a Web page. There's an example of a box model as we've got a module margin border patting and then how it all works together and comes together. Also, we're gonna be looking at how we can create shorthand for potting, for margins for backgrounds. So to make a quicker to write our CSS also looking at how we can transform our A nordeste so like you see over here on the left hand side and how we can transform it into a navigation bar. So this is all done in CSS, and we're going to walk you through step by step, how to transform this into this also, how we can position. And then finally, we're gonna do some tweaks and updates and add in some different functionality to really make our Web page come to life. Also, we're gonna be liking at responsive. So as you can see here, as I adjust the screen size, the different elements can have different operating added. So that's what we when we create respond websites and we see that over here, this one just transferred to blue, and this is a break point on our website. So whenever the Web viewing area becomes certain pixel with and it breaks. At a certain point, we represent our elements differently. So you see that the navigation bar restructured. Now this element is red with transform, it stays red and then it goes to blue and so on. So a lot of different weaken do when we start putting in responsive elements and responsive properties into our website designed. So I will be covering that as well within the course. So everything is included as well as HTML CSS summary and then in conclusion, we're gonna have a finished product where we've got a website just like this. So all of this on a whole lot more is included within the website and again the source court is included, so you two can practice and work alongside with the different lessons as of being presented within this course. So when you're ready, let's start creating are well own website 3. 2 Course Tools and Resources: in this lesson. I want to go over some of the resources that I'm gonna be using to build out the HTML and CSS code in the upcoming lessons. So, first of all, you're gonna need to get an editor, and I'm gonna be using in the course, I'm gonna be using a bracket. An editor called brackets. This is an adobe product. It's free to download. But of course, if you already have an editor, then you can go ahead and use that. If you want to try something, you then you can check out brackets. And there's a number of different, really good editors on line. So there's a lot wide selection of different editors to choose from. And essentially, we're gonna use the editor in order to write our HTML CSS and our JavaScript coat. So these are the three foundations for Web development, and you can rate thes files with any text editor. So you can even use something that's probably available on your computer right now like a text editor. And as long as you're saving the file as an HTML file, then it will actually create that Web page. So this is all that that order is doing is it's saving a file called. So I've just got some content in here, so I don't have any HTML formatting, But I do have a file called index dot html and this is all you need in order to set up a Web page html page and get started. So make sure that you do have an editor and I'm gonna be using brackets within this course . Some of the other resources that I'm gonna be using within this course as well are I'm going to be using an online editor. So if you don't want to download an editor on your computer, there are a number of other options and code pen dot Io provides a really good option to type in html text here. So I'm just gonna type in the same thing. I typed into my editor and we see on the left hand side we've got the coding areas. We've got html, CSS and JavaScript and then on the right hand side, we've got our display area. So whatever we put in here gets output here within the visible area on the right hand side . So this simulates what would typically be rendered out by a browser, some of the other resources that we're using. So we're gonna be using a blind text generator place, hold it and Laura um, pixel. And all three of these are going to be used in order to add placeholder content into our Web pages. So again, there's a number of different resources online in order to do this. And the reason that we use placeholder text is because this gives us the ability toe add in content and actually make our website look as it would as a riel website eso. Instead of worrying about the images and the assets and writing up some text, we can go ahead and designer website and we cannot all of that stuff in after and then. Besides, these were also going to be using some online libraries. So one of the libraries that I really like to use is Google fonts, because fonts can make such a massive difference on the way that your website looks. And so it's a really good resource toe have, and there's a number of really nice resources that we're gonna be touching on within the course. So this is just one of them that we're gonna be bring using to bring in styled styled fonts , and you can see there's 808 different funds available. So in the next lesson, we're gonna showing you how to write. Start writing some HTML code, so that's coming up. 4. 3 Basics of HTML: This is a lesson where I'm gonna be introducing you to HTML. So basically, HTML is the backbone of what is presented on the Internet. So we get files that we call either HTM or HTML. So it doesn't actually matter because the browsers will render out either one of these file types, and they understand that these are Web files and they're meant to be rendered it within the browser. So what happens is when you create an HTML file, then your browser comes to that Web page, and it actually renders a with all of that content within the Web page. So we can see here that any Web page, it's a combination of all of these opening and closing tags, and there's just a whole bunch of information. So we look at the source code for this website, we see that there's actually some distinct areas within our web page, So all of them started with HTML. We've got some content here within the head area. We've got a body area, and then we've got some script information here. So this is javascript. We also have some styling up. Here s oh, this is CSS and then in between here, we've got body and we've got a whole bunch of these opening and closing tags. Soapy opening P closing. And this is what this is what html is. So it actually represents Ah, blueprint for how you want the page rendered by the browser. And then we see down here that they're always we've got a body closing and in HTML, closing and all of the Web pages air going to be within that same format because this is the HTML structure that is used in order to design Web pages. So let's go ahead and open up her editor and create some web content. So we saw that all of these HTML pages they had a series of opening and closing tags. So we're going to do the same thing where we're actually going to set up an HTML. I can give you an example of some HTML and then we're gonna go ahead and set up an actual HTML template that we can go ahead and reuse over and over again as we create different websites out of that basic structure. So typically you're going to see an HTML page where we've got an opening and closing tag. So these are tags. This is the paragraph tag. So it's just indicated by a P within the brackets here and whenever whatever content is in between the peas, this is where the paragraph is. So P stands for paragraph and we see that once we create this paragraph and I'm gonna render that over here in the display area, we see we've got content is a paragraph, so it doesn't really look like the HTML tags are doing a whole lot right now. But if I add a whole bunch of them, we're going to see that when I render this out that there's actually some structure that's by default within the HTML. So this is gonna be different than if I was to do something like this and save that and we see that automatically brackets tries to beautify that text, and it puts it within this kind of format where there's no additional formatting provided within the HTML. It gets rid of all that excess white space, and all it does is just line up all of that content. So we see that what HTML is doing is it's allowing us to structure our content that's being presented within the browser. So we see over here the paragraphs are actually structuring them as separate container areas separate paragraphs, and they're actually dividing up these pieces of content. And it's presenting indifferently. And this is essentially what each one of these tags has. It's got its default properties that helped the browser understand how this content is meant to be rendered out. And with HTML we it's a Siris of complex divisions and breakup, of pieces of content and structuring in a way that you want to present it. And also, this is the point where we also start thinking about styling and the different styling that we want to add in within our Web page, because this is how we want to present our content. So anything that's within one container area is gonna be is gonna be content that gets rendered it within that container area. And then that container itself will have some styling attached to it. So we see here that I've got a number of different ways that I'm representing this content and we see that I've got a bunch of white space in here. So one important thing to remember about how html how the HTML file handles and displays the content is going to be different. How its output within the Web page, because you need to use HTML structure in order to tell the browser how you want your Web page to look. So even though I've changed the way it is being displayed here, it's actually when I refresh it, it's actually the same thing. So even if I was to add in a bunch of spacing here and I was to make a real mess of the content that I'm displaying here, it actually doesn't matter, because when it ever received the file, when I render it out, the content is actually gonna be limited toe having one space. So even though I've got a bunch of spacing here, I'm limited to only having one space being displayed out. So this is the difference between the way that you present your HTML file and the way it gets rendered out, and typically when we are writing HTML, then we do want to beautify the content because we wanted to make it nice and readable. So this is just removing out all that excess white space and making it more readable for you when you're coming in and creating that html file. So this is just the basics of HTML, and we do have a serious of opening and closing tags. We also have what are known as self closing tags. So we've got something like a line break, which actually doesn't have any content in between it. But it's actually for formatting within our HTML structure, so we see that the line break. Typically, it wouldn't have any content in it. And it's serving the purpose of creating that line break, which is different than a paragraph, because there's no additional formatting. And this is just something another piece of content. When the browsers rendering it out, it hits that line breaking, it says. Okay, well, this is a new line, starts a new line and continues along with in that paragraph element. And when we are referring to elements, so these air tag. So the paragraph opening and closing tags and its entirety with the opening and closing tag and the content within it, this makes it an element. So this is the difference between tags and elements, and we're referring to are html code. This is how we're typically would refer to that as two elements and tax. So the next lesson. Let's start building out our basic default html template and start creating some Web pages using HTML. 5. 4 How to create a basic HTML template: in the last lesson, we saw what the basics of HTML. So opening and closing tags. We've got some self closing tags and these air just information. This is just information that's gets presented to the browser and helps it render it the content as intended. So typically for a Web page, you've got a whole bunch of information that you might want to present to the browser, and you might not even want to present it to the user. So this might be for the browser on Lee, and this is where we add in meta information, and we typically, what we do is so we'll have an opening. HTML will have an ode closing html tag and also, by the way, it actually doesn't matter If you do upper case and lower case eso, you can close those tags off as well. But typically, we use lower case within Web development because the upper case is just it's too, too large and too bold a note. Eso it stands out a little bit too much, so best practices usually try to keep it toe lower case. But however, if you wanted to, you can use both or either or eso. We've got our opening HTML closing html. And basically what this tag does is it tells the Browns, or that you could be expecting HTML code between these two tags. So this is all it is, and it's the same idea as when we set up the paragraphs where we've got content between the tags and creating the whole entire HTML element. So when you're looking at a Web page, you know there's a lot more information than that just gets displayed here. So we've got information up here that indicates to the website what's contained within the Web page. We've got these titles here, and when we look at the source code, we see we've got a whole bunch of information appear in them. We've got some meta information specifying the character type. We've also got some doc type specifying what type of documented is so There are different types of HTML documents, so this is all guiding the browser to be able to better render out that content. Eso these. That's why we're including it so the browser can better understand and render it that content. So let's take a look at typical structure for a Web page and we're gonna have head tags. So opening and closing head and then next we have body. So it's within this order, and this is really the bare bones of what HTML Web page is gonna look like. So within the head section, this is where you could add in content that you would typically keep as information for the browser to render out So you wouldn't have, like, something like a title here within the visible area. And this is why it sits within the head. So title is gonna be opening and closing tags. And as you can see, the semantics of the wording here used really does make a lot of sense. So we've got a head and a body. So this provides our structure and then within the head. If we wanted to add in a title, we can go ahead and add in that title. So I'm gonna just call it html course basics peach to know. So we see that we've got a title in here opening and closing. And now when I refresh this page, we can see that the title now appears up here in the in the tab here And when we look at the source, we've got our title there. So this is how we can represent the title. But of course, within a Web page, you've got a whole bunch more that you're gonna be representing. So let's go ahead and add in some additional accused in order for the browser to better understand what type of content we want to render out. So now, with HTML five, it's made it a lot simpler to specify the DOC type, so we don't have toe have all of this for the doc type. We can be really specific, and we can specify that the doc type. So we do a bracket here and we do DOC type, and we specify that it's HTML. So this will help the browser understand that our document type that it should be expecting is gonna be HTML. And as we can see when we go to the Web page, it's not actually gonna see nothing else really different is going to get rendered. And this is just a guide for the browser in order to better understand what type of content that can be expecting. So this is you can think of it as helping information to help the browser better understand . So let's specify a language a swell. So another thing within the Web. We know that it's international, a lot of different types of languages. And so this is why it's important to specify that the language is gonna be English so that just so that it knows what type of language that it can expect. And another thing that I'm just gonna turn on this beautify on safe eso. Another thing that we want to also include within our head section is some additional meta information. So this is where I'm gonna place that up here and eso we've already specified that it should be expecting the English language content. Eso We've got these other tags that air called Met attacks. And this is where you can add additional guiding information for your Web browser. So another one that we typically set is a character set, and we see there's a lot of different types of characters for the web, and this is typically for different languages and so on. So if we're English utf Dash eight is the typical language set that we add in the meta information So there are some other pieces of meta content that usually we typically add in eso One of them is gonna be meta s. Oh, this is gonna be typically done for your mobile. So every website thes days should be mobile. Eso we're gonna set a mata another meta tag and name, And this time the name is gonna be a view port. And what this is going to do is this is gonna help scale the screen size depending on what type off, what type of device the users coming in at, and depending on how much with the device is equal to. So basically, it's setting the content to device with. And then here we set that initial scale and we're going to equal it toe one. So basically, this will help resize that content appropriately for the device that that is viewing the content. And this is again all guiding information to help the browser rendered out. Eso really does help with mobile because sometimes maybe if you've gone to a website, you see really tiny tiny little text and that's because they haven't upset the view port eso another one that I usually like to set and none of these air really mandatory. But it is a good idea, depending on what you want to do. So I usually like to set on author s O that content for the author Meta name is gonna be I usually like to author it by my company named us a Discovery v i p. And then we could just say that. So this is going to give the browser when it's rendering up the contents Amore guidance and as well, a search engines will use this a swell to take in some additional information about the website. So this is where you would typically find all of this meta information, and there is really a lot of meta information that you can add him on. Then this is gonna be your choice as well. Eso Previously, when we're designing websites, you might have heard that we use keywords. We use descriptions, and keywords really aren't used a lot. But meta description is, and the reason that we still use meta description is not that search engines apparently don't index that content anymore, but they do display it within the search results. So having ah paragraph here or a sentence, I should say describing what is contained within the page is gonna be really good practice to get into. And it's this format is going to be the same. So name is the meta type. So we've got our net meta names, description, author, Vieux port and then the content that's contained within that meta information. Eso This is where we add in ah content. And this is about 155 characters. Teoh essentially describe what is what page. And also keep in mind that this is content that doesn't get displayed out to the user. So the user actually doesn't see this information, but really good practice, especially when it comes to S CEO and CIO. If you're not familiar with that, that's just optimizing your Web content for better search results. The better you rank within search engines is means the more traffic you're gonna be getting from them. Eso It's really important to optimize the content here, especially focus on the title. Make sure that you have a really good solid different title for every page, and that it makes sense with the content that's being displayed out in the page and also added these descriptions because they are going to help. If you have a really good enticing description within your description field here, you might actually get a few more clicks. Eso Even if you show up, maybe lower in the results than some some of your competitors. If you have a really good and tasting description, people might see that read it and they might be enticed to click over to visit your website so it doesn't hurt. And it's always good practice to get into these S E o practices early when you're designing websites, so always think about those when you are creating your web content. So this is a basic template that you could use in repurpose a place in the con, the title updating the description, and then the rest of it you can just repurpose and use. So essentially, what happens here is that the content will go between Here s so I'm just gonna actually commentate some area here, so to see for content and this is how you make comments within your html and again you'll see that nothing gets displayed up to the user. S o comments are intended for development purposes So you can really specify what you can add in Esso if you design a template, it's always a good idea to add in your commenting that to make sure that you know that you need to make some changes. So you could also do things like change title change description so we could do something over here as well. So that's just a reminder. And the purpose of this is when you open up here html page, you're designing a brand new page you're gonna read through these reminders and you're gonna say, Okay, well, I got a real change, the title and description of this, and I've gotta add in some content here. 6. 6 Headings Paragraphs and Line Breaks Content Structuring: in this lesson. I want to run through a little bit more about HTML and how we use it and what it's being used for. So typically with HTML. So we would use Web editors. And there's a number of different browsers that typically would be accessing websites. So one of the most popular ones is Google, Chrome Safari, Firefox, Internet Explorer and then all the way down opera and Android browser. So keeping this in mind, make sure that your website can if you've got a lot of your visitors air coming in, maybe on opera or if they're using a mobile device like an android browser, make sure that your website is gonna be ableto work within those those different browsers. So always take that into consideration. And before you launch your website tested out on the browser that your typical webs Web visitors would be using. And as we can see in this diagram from Wikipedia that typically Google chrome is one of the more popular ones. Eso basically here's some more information about what HTML is, and you can find all the different information about all the different HTML tags at W three or there is also Aton of Information online s Oh, there's a really a lot of information online about HTML, and in this course I really want to focus on some of those core tags and elements that would use, typically most often within Web pages. So this is where the focus of the course is going to be, and we're also gonna be designing our Web pages based around HTML five. So what happened is originally when HTML five came along, it took over some of the they had more of a semantics for some of the elements and tags that were being used. Eso they made them, presented them in a smarter way and added a whole bunch of new tags for us to use. So there's a really good set of information over here at HTML five from Wikipedia, and we'll show you all the different changes and the new tags. So the basics of Web pages they're based around the fundamental cores concepts of HTML, JavaScript and CSS. So this is the foundation of Web pages. Every Web page is going to be based around html. So this is what the structure of your website looks like. Eso think of it as a building. So when you're constructing a building, you build out the frame and this is what each to melt is. So you've got a bunch of different rooms. If you're building a house, you've got frame, you frame out all your different rooms, you roughly have an idea of what you want to look like. Eso you've got that build and then you apply CSS, which is the styling eso This is what your actual building looks like. Your house looks like the different paint that you're gonna put on the walls, that different flooring and so on. And then JavaScript is that functionality. So if you've got a building and you've got some elevators on all of that different added functionality, that just really brings that content toe life and this is what the purpose of JavaScript is . So three basic core concepts of Web development. So in the last lesson, we looked at meta tags. We looked at how we can add comments. We looked at titles and dark types. So now we want to talk about that. Did so we looked at the different types of HTML tags that we can have an elements, and now we want to look at the actual contents structuring for HTML. So there are different ways to present the content. We briefly looked at paragraphs, line breaks, and now I want to covert headings as well within this section. And as we can see here, there's six different types of headings, starting with H one being the largest, and this is really to emphasize content within your Web page and then going down to H two h three h for H five and H six. So the proper way to use heading tags is it's obviously within your body content, and you would add in heading tags a top of each section of content that you would be representing, so this would be a main header for that content. Ah, lot of times you're going to see the page titles as each one's eso. These air really utilized for seo purposes, and when it comes to headings, you would start with your H one and then you would have h twos after that. And if you had any other sections or pieces of content here that you want to break up, then you would add them in as H threes underneath h twos because they progressively gets smaller so we can see that the way that the content gets represented, you might have a whole bunch of h threes. And if you want to go to the next level than it would be aged four and then you could have another set of eight threes. So you have another H to another age three and someone. So this is typically how we would structure headings very rarely. You're going to get past for past five because a lot of times that's getting to be a lot of content. And you don't want to place them too closely together as I've right now done because it's gonna be really confusing. So they're used to highlight content within your Web page. So I'm gonna add in some typical paragraphs here, and I'm going to open up dummy checks generator. So this is where we can generate some quick dummy text eso to make a lot more sense when I add this in as paragraphs. Here s so if I had a whole bunch of paragraphs here, we would see how the headings now are going to stand it within the Web page. So we see that this is the purpose of the headings where we would have a heading. We have some content, and really it wouldn't make sense or look good if we had an H one and if we had h ones over and over again. So use those sparingly, try to stick to only one for Web page and used the additional heading sizes as you progress down of importance of content as well as the way the content gets structured and represented on. Then also, we've thrown in the paragraph, so paragraphs are opening and closing, and paragraphs are the type of tags that you don't want enclose within another paragraph. So we see that a lot of pair, a lot of different HTML tags. It's about nesting them within other HTML tags. But we don't do this for paragraphs, because paragraphs are seen as the end level that the end level of content splitting so we typically wouldn't split another paragraph in a paragraph. But although however, we can add in additional types of tags as well, with in those paragraphs to really break up that content and represented as we want it, I would put within our webpage. And we're going to talk about spans in the upcoming lessons. A swell. So this is that headings and also line breaks. So whenever you need a line break, but you don't want to start a new paragraph, you can do it that way. And this is just to demonstrate. So I've got the line break. They're breaking up that content, and then I've got everything else, according Toa headings and then paragraphs. 7. 7 Adding images into HTML: another common tag that's used within HTML development. And you can see that in almost any Web page that you go to. We've got a Siris of images so the images are used throughout the Web page, and we know that an image is worth 1000 words. So always a good idea to include those images when you can, and images are really easy to include within your HTML. So we're gonna be using. We're gonna actually get an image over from place, hold it, and basically they give you some placeholder images that you can link to in order to provide imagery within your HTML code. And we also have an example here of how we add an image tag. So it's I M G. And then we specify the source. So the source is the URL or the location of that image file. So if you've got that image file within the same directory as your Web page, then you don't have very far toe link it. If you've got a source like this one that's on line, then you've got to go over and you've got a link it and include that http. So let's create an image file and for this lesson, I'm gonna jump over into code pen and I'm gonna show you how it can add in the images in here because with code pen were able to see whatever that happening within real time in a live environment. So we've got our opening and closing and notice us well, that an image tag is self closing type because that content we so we don't have an image opening and closing, and then we're not doing it like this. So this would not make any sense where we've got an opening and closing and then the u r l to the image. So we do have these self closing tax that contain attributes, and the attribute for image is to get the source of the image. And then this is where we specify where the image location is. So we can do that over here, where if we go to this u r l we see that we've got this image eso Basically it's so putting that image at that. You are else we can copy the link address, go over here, place it in the source, and boom. There we go. We've got our image showing up within our HTML code. Now, Laura, um, pixel actually gives us some actual riel images so I can copy out the link address of that one, and I can update the image here and an update Images really easily within our web pages. And this is what I meant by when First we were not sure why that didn't come through, but we see that I with Lauren picks, we actually don't know what type of images you're going to get. You do have some choice here s so I can specify the choice if I want sports or one of cats and so on eso we saw that we can update those images and we get these images coming through really easily within our Web page. I'm not sure if it was cat accounts was cats, and that's one of the downsides. But Lauren Pixel is that it does take some time sometimes to load these images. So if you are working and if you're not really concerned about the different image types, of course, if you're presenting it to client, it's gonna look a lot better if you have real images. But you can also use the placeholder images. Or you can actually use your riel images that you want include within your web page. Eso It's as easy as that ad in images. So if you had a bunch of text here, you can add in an image within that paragraph and we can see how that image gets displayed out. I am actually update it. And I'm gonna take this, uh, this girl here and I'm gonna update this So it's not taking us much time loading that it. So with images, we've also got some additional attributes that we can add in. So we've got an option where we can set the actual width of it s Oh, this could be a pixel width of that image. And a lot of times you're going to see that this is being done through CSS instead. But you do have a choice. And previously with each team l, we were able to set where we've always been able to set the with the height and so one of the image. And if nothing except that it just defaults to the width Height 100%. Eso here with police hold image. We can see that we can actually set the size here, and it sends our image sizes on. Then also, we can set. So this is the default 100% size, and we can make adjustments on it within our image tags. But better yet, it's probably better to go with our CSS eso. We can use percentages or pixels, and that will set the different heights and widths of the images as they get represented and rendered out within the Web page. So the next lesson we're gonna look also at how we can organize our content within our HTML structure by creating lists and a new ordered lists. So these air also commonly used within Web pages, and that's coming up in the next set of lessons. 8. 8 Ordered Lists Unordered Lists: when it comes to creating our websites. Often times we need toe list out items. So we do have an option here. So we had one and we wanted to have a bunch of different items listed. We could do it as paragraphs, but the thing is, they're not really paragraphs. We could have one too three and so on. So if you want to make a list like this, I mean, this looks OK, but we typically want toe have it within a list format and actually creating in a list format. This is gonna make it more compliant with screen readers and provide more accessibility to your applications to your websites. So instead of listing it out in paragraphs, we have what's called lists s Weaken due on bordered list. So that's represented of O. L. And then again, closing tags so opening closing o l's and make this a bigger so that we can see it better. So you've got open and closing O l's. And then within each ordered list, we have a list item, so we've got one closing that off, and then the next one would be two and three, so I'm just gonna update those two and three, and we see that when we see that, then we do have our listing here. So we've got 123 a. Tidy this up a little bit, so it's a little bit better toe more visible. Eso we see the format is way better, and we can immediately tell that these air all tied together under one list. So besides a new ordered lists, we also or besides ordered list. We also have what's called on a Norden list so we can see that we can use these bullet points and so on. We can also specify where we're starting with so we can start it at five if we want 67 and so on, says a bunch of options here. There's also when we're listening out, we can list up tight as well. So if we want to do it with letters or if you want to do it, upper case, there's a lot of different options for ordered lists. We can also specify within Roman numerals, and I believe we also condemn it uppercase Roman numerals. So with ordered lists there a lot of different types with a new ordered lists we've got this bullet point types, so they're not as much for, ah, sequential list. But they're more for a bunch of points that you might want to list out on your website. And these air, also used commonly on ordered lists, are commonly used when we create our navigation menus. And the reason for this is that it's really nice and readable within your HTML page, so it gets nicely presented. And it's easy to read that format. And this is one of the reasons why you commonly see whenever we've got some menu items that we do them within list items or list format, and we'll use CSS toe, actually reformat and make it look different. And this is where CSS is gonna come in. That's going to give us the capability of grabbing these list items and transforming the way that they're getting were presented. Uh, and also we also have the option here within the different lit the different lists. Teoh continue adding a bunch of different list items, and as we can see, we can remove them away and ordered list will automatically adjust to that. So 56 I could bring that back down to the default in America, where I could do it as a letter, a lettered list and so on. Eso we can see that automatically adjusts, and it fits the next one immediately in place as well. So a lot of really good options with ordered lists and as well as a new ordered lists. 9. 9 Hyperlinks Relative paths vs Absolute Paths: in this lesson, we're gonna be going over hyperlinks and hyperlinks are what very core off the Internet. Essentially, the Internet is a Siris of files, and they're all linked together. And the way that we're linking them together is using hyperlinks. So hyperlinks are at the very core of forming the Web itself, and every single Web page is gonna have hyperlinks. We see them over here in blue, on the brackets Page. We see them over here. Up here. We've got hyperlinks all over the place. So every Web page needs to have hyperlinks because this is how you get your users to flow from one page to the other and eventually end up where you're intending them to end up and also flowing through different websites and so on. So hyperlinks, our core concept of web design and hyperlinks could be added in with the anchor text. So we see here that we've got on anchor opening and anchor closing, and then the content in here is represented by the hyperlink. So right off the bat, we see that nothing is really happening over here. And that's because we haven't actually set anything with the hyperlink. So even though we've added in the anchor tags, it really is meaningless right now because we're not specifying what we want this anchor tag to do. So we can as well specify using H rough, so adding in an attribute, just like we did with the images and this will give us the ability to link to a Web page. So let's say, for instance, we want toe link out to Google so we would add in the whole your eye for Google. And we can see, as I'm typing this end, it gives that underlying and this is a default characteristic of a hyperlink is where underlines the hyperlinked content so that content over here is what gets underlined by default. Now, when it comes to hyperlinks, there's quite a few other things that we can do within hyperlinks as well. So I'm gonna just add in a few more paragraphs here and just to fill up the Web page a little bit more, and I'm gonna show you what else we can do with hyperlinks. So hyperlinks our anchors and much like they allow us to go to other Web pages. We can also create hyperlinks that linked to different sections of our Web page. So here I'm gonna create Ah, hyperlink. And the format is the same. So it's each rough, and we're gonna link it out to on I d within our web page. So we're gonna do the ha sh and we're gonna just call it one to. So if we had our web page sectioned off, we could do it in this type of format where we've got our I'm gonna put this in within a paragraph here, So let's get some formatting around it. So we see that we've got this h rough weaken goto one we click it, nothing happens. But if I give it and this is something else you could do with any element you're able to add in attributes so I can give it an i d of one to coincide Teoh that i d. And we see that whenever now I click it, it automatically scrolls it down. Teoh the one section. So let's add in some peach ones, one can close off this one. So if I had my web page actually sectioned off and if I had a lot of content, a whole bunch of information here or if I was making a one page website, I can add in Ah, hyperlink here or an anchor that will link down to a different section of my actual scene Web page. So it's not like this hyper link that actually is gonna take us to Google if we click it. And I don't want to click it yet because there's something else something to still add in there. But we see that this is gives us the ability to actually anchor different sections of our website, very useful part of hyper linking. So, as I mentioned, I've got this link going out to Google, and if I do click it, I'm actually, it's gonna bring me over to Google. But the one problem here is that it's going to try to link out to another Web page, or it's gonna try to link out and bring my entire browser screen to that webpage to that window. So I just saved the pen and we see when I click it, it brings us over to Google, and this is not what we want to happen within our Web page because we want the users. Teoh. If we're linking externally. Usually best practice is to add in a target and specify the target as blank. And now, whenever somebody clicks this, just save it quickly. And now when somebody clicks it, we see that it opens up and it brings us to opens up a brand new tab within our browser and brings us so so, no longer are we losing that entire web page. And we see that this hyperlinks still works so you can add as many hyperlinks as you want. And this is the whole idea between linking. So we also do linking within our navigation bar. So if we had a new ordered list and if we had a list type and typically you're going to see structure like this where we've got our index page and so on and all of the links, so this might be home and so on. So this would be a typical way of representing a navigation menu and another list item, maybe for another element within the web page. So the about me section. So now whenever I linked to these, they're going to go to these local pages and notice how I'm not including the whole you are I, and this is what's known as a relative path or relative link because it's relative to where you are on the Web page. So if you are on that same directories, we've got Index and about within that same folder than it's gonna know the path. Because this is relative to where your position and absolute paths are something like Google, because it actually doesn't matter which page you're linking to this Google from its always gonna go to this entire you are I. So if you include the http coal and ford slash ford slash, then that's an absolute path. And if you're doing a relative path, then this is in relation to where you're currently sitting. And there are a lot of different cases for using a different path thing. The different path. Four months. So, typically, if you're creating a dynamic website and you're not sure about which page they're actually going to be sitting on, if it's got folders within it and so on, even though it's within your own website, you might want to use the absolute paths s so that you can be sure that you are getting to the right pages And also, even if you're targeting things like images, make sure that you're using the proper path format. So we've got an image here having an ad in an image. So if you had the image locally here, it would be something like this s O. This would be a relative path in an image. And you can also use the full path that we've got over here. So copy link address within your structure as well. Eso This would be an absolute path. So different ways of adding in path systems. And we can see that hyperlinks source code and any other way that you're linking two files is going to use this type of linking format so relative versus absolute 10. 11 Divs and Spans Tel and Mailto: so it comes to designing your Web site. We see that when we're writing HTML code, it really is just about making containers and having these different elements for our content and being able to break it apart on represented as we want it represented within our viewable area of our Web content. So we had a whole bunch of paragraphs. We had some headings, and this is more of, ah way that users can come and consume that content and practice and make sure that it flows really well and utilize all the different available elements within HTML to really present that content in a digestible fashion for the user. So you see here that we've got If we had a number of pages here, we've got a home and about we can also go to different sections of the current page. We've got links out to other useful resources that would be relevant to the content that the user might want to check. Check out as they're reading this, and this is the whole idea of adding and content, designing around what you want to present to your users. So think about if you were a user, how you would want your content represented and work within that fashion. So work backwards from there. Also take a look around your favorite websites and make note of just different ways that they're representing and showing this content. So you're probably looking at this and saying Okay, well, what if I want to really divide up these paragraphs on? There is another way to divide thes up as well. Or what if I wanted to add in some kind of styling to hear if I want to add in an anchor and I don't want to break up the way the content flows within the paragraph, So there are ways of doing that. And this is where Gibbs and Spans come in. So dibs, contempt likely be used for something like so we would have a diff here. Opening and closing in the content between the two def tags is this would break apart that contact, and we see there is some formatting with a dip as well. So if we had a number of dibs next to each other and we had a bunch of content here, we could see that we're gonna do a few more so that we can get a better idea. We see that typically what happens with a div is it takes up that whole line of available space so it takes up the whole block of available space. And if we have another dip, it starts below that. So this is our way of actually breaking apart the content in a more digestible fashion. And if we had a whole bunch of different sections, So if I'm just gonna add in maybe another one down here and this was another section and so on, we could really begin to see how we can break these up. So I'm gonna do the closing one here first and running and added So always remember opening and closing of the different dibs eso its proper structure. And I'm going to do something really quick here with CSS. We're gonna add in a div, and I'm gonna add in the one border solid black so that we can see we can actually distinguish between the different dips. So now we see that we've got all of our content is nicely sectioned off. And now let's see, we wanted Teoh link. So just as we set up these anchors up here. Maybe we wanted toe link to a n'importe part. Maybe we have some area where we've got or have a contact, so contact would be good, So contact would be some something that they use. Their typically might want to be able to see right away, not in a line break their lower case. Let's save that, tidy that up. And now we can see that we've got two different anchors. So let's see, we've got sir contact information, but it's somewhere within the content here, so and yes, of course, if you had contact information, you might want to really split it up. So maybe we have a phone number, and so I'm just gonna make up something that looks somewhat like a phone number down here. But I don't want to really use anybody's phone numbers, so we'll just leave it something like that or email us at. So we had something like this, and we want to distinguish this from the rest of the content area. So we have our content contact information and yes, Typically you would make a whole section for the whole page for that because this is really important. But just for the demonstration purposes. If you have contact up here and you don't want to keep rewriting your contact information, there is a way to isolate it. This piece of content and this is where we do spans. So spans work in line as opposed to dibs that create the blocks, soak, opening and closing spans. And really, at the root of that spans don't really do anything. There's gonna be no difference in the formatting. We see absolutely nothing different. But we now have a way to add in an attribute where we could do on my I d and equal it to contact. So now when someone hits our contact hyperlink, they're brought down to our contact information right away s o much like as we had brought them down to that important section one, we can also bring them down to the contact area and then this way we don't have to repeat content, so contact probably isn't a typical way to use it. But this is something that you would see used fairly often within websites to really highlight and bring people to different pieces of content. And especially if you're designing a one page website. This is going to be important factor in getting your users to be able to scroll down Teoh these particular isolated pieces of content really quickly. So scrolling their entire browser down in the visible area of their browser. And one other thing that I did want to add in so, typically with your contact information, if you've got an email, so you might want a link out to that email so you can do this a swell with the hyperlinks. So I'm going to just do the H ref, and I'm gonna equal it, too. So I'm gonna show you how to do this and close off that hyperlink. So it actually it's gonna look like a hyperlink. But we do have a ways to do it specifically for email addresses. So right now, it's not gonna go to anything. But if I do a male too, and then here, I would have that email address that we're mailing out to, and we can also include something like a subject, So this will automatically populate the subject field. So maybe you want to send a message from the website and so on. So what? What will happen here when they click the link, this will automatically try to open the users Web mail client S So this is something to keep in mind when you've got email addresses. It's always a good, good idea toe link to the users default mail client that set up within the browser. See, click This and still, we're actually trying to go to a Web address. It's going to open up that mail client and allows the user to save some steps whenever they want to email out so they don't have to copy and paste it in to their male client. It will automatically open that up. So really nice feature and something to keep in mind when you are adding those email addresses. Always think to make it easy for the user to do important things within your website. So if they need to communicate with you than make it easy for Web users to be able to do, initiate that communication to you and also keeping in mind a lot of your Web users might be coming to your website on a mobile device. So just like we set up our mail, too, we can also do a specific hyperlink Teoh, A phone number, and this will automatically open up just as the mail client opens up. We can open up the fulling system on a mobile device to this particular phone number. And the syntax for that is E l just like we have mail to, we have t e l indicate that this is a phone number. And now whenever the user clicks this, it's gonna open up their phone provider. And if you have a phone client on your desktop, then I'll try to open that up a swell. So if you click, it will try to open up Skype if it doesn't find anything else on your system. 11. 12 HTML5 Semantic Elements: in the previous lesson, I showed you how we can use dibs. And we're using dibs fairly often to break apart or content. And there actually is a better way. So now, with HTML five, we got the opportunity to have riel meaningful tagging using different sections, headers, footers assigned. So what they actually did is they went through websites, most of the more common used websites. They looked at what dibs. And typically we would do something like header toe, identify it as a div. That this did is a header and we'd have a knave and so on. So what's happened now is that with HTML five, we have more semantic meaningful tagging system. So for navigation, we have nav, so this would create a navigation area. So maybe for this I'm gonna update this active to a header and we see that essentially these elements are gonna be treated in the same way as typical dips would be. But it just gives us more opportunity to create more meaningful structure within our HTML. So we might have something over here where we have a section so and by all means, you can still use dibs or you could break it apart in more meaningful fashion. So if we had section here, so make sure you get the closing def. So sometimes when you're updating like this, it does get a little bit difficult to make sure that you're getting them all opening and closing and then at the bottom here maybe would have a footer. And you can use these over and over again. So it doesn't mean that if you've already said a footer or if you've said a header that you don't need to add that in again. Eso you would see that this is used over and over again. Eso we might have a section in that section might have a header and ah, footer as well might have some content. So it's all really up to you how you want to break that a part of that content. Always think about the way that you want to represent the content of the user and try to think of it as a top down level of sections and all the different containers of these elements and how they fitting into each other. So our nav would be essentially a self contained, self contained set our code snippet that we've got and we've got our own ordered list and sometimes you might have your knob inside of your header So it might look something like this, and sometimes you might have a wrapper around that entire web page. So for this instance, this is where we would use a div again. Because there really isn't a good a good element that you could use eso I would do something like this where I would open and close the div instead of using the body tags to make the rapper. I would use a diff to wrap it so this would be good if we're trying to restrict the size of the page. So I'm gonna throw in a quick yeah, each some quick styling in here. So if we had with of So let's say I wanted my website to be only a width of 500 picks when I do the rapper, I can really easily make this adjustment and have it sit at 500 or 300 pics or whatever amount we want to set there. And this is why the rationale for using the different rappers and if you're reusing headers and sections. Then you might need to identify them to really indicate which one you want apply styling for We're gonna, of course, school over that as we progress through the course. Eso also you might want toe break it apart in articles and these air the more commonly used once and actually shouldn't be articles. It should just be article. So let's say we had a bunch of articles here so we could further break apart our section. And this isn't a more meaningful representation, and they'll make a lot more sense how you need to break up your content as you start adding and styling, because this is gonna be the important part of how you design your website eso We might also have instead of just two sections, so we might have a side menu as well, so this would be known as outside. Or it might have three different sections that we have our side there sidebar or side menu . So whatever you want to call it and this is outside and so this would typically float to the side and we see that none of these really have a lot of built in values into them so built in default properties, there just essentially dips with more meaningful name. So the next lesson we're gonna look, take a quick look at how forms are created within Web pages. So this is another typical HTML structure that you're gonna find on websites. So take a look at building out forms from scratch in the next lesson. 12. 13 Transfer build content to editor: in the previous lessons we've been working on Code pen. Oh, and I want to bring in all of this HTML code that we've been working with and actually bring it into our web editor and actually display it on our own website. So in order to do this and it's important to understand with code pen I o So all we're doing is working with the different areas we've got our HTML. So essentially, this is what's contained within the body area. CSS. So this is linking out to a CSS file. This is linking out Jet javascript file. So this is where the equivalents are that we're actually linking out to these files. So let's take a look and grab all of our HTML open up her editor and paste it within the body of our website. So now whenever we go to over to our web page, we see that we've got all of that structure that we had within the code pen represented within that same format, and we noticed that we don't actually have the styling in place and we can add styling in a number of different ways onto our website so we can either link out to the style sheet, or we can use HTML tags opening and closing style tags to bring it in. And we can do the same thing for JavaScript where we add opening, closing JavaScript or we can link out to a source file. So let's just copy that in currently within our Web page, go to the style. CSS saved that. And now when Wherever we go up to our Web page, we're going to see that we've got some of our stylings added to it as well. So this is how you can build it out in code pen, see it in real view and then bring it into your HTML page and with code pen. If you want to link out toe libraries. There is also an option here to link out to some pre built libraries like Bootstrap Foundation and animate CSS. Or you could link out to your own style libraries and the same thing with JavaScript, where you can quickly add JavaScript libraries. How are you can link out to your own so you got some options here for HTML, where you can add in some pre processors you can add in classes, and you could add in stuff in the head as well. So this will commonly be inserted into the meta information. And then over here, we've got pen title description tags because when you're in code pen, so this is accessible and this is how they do their indexing with with the code pens that you're creating on code pen I Oh, so that's how you would bring that in. And in the next lesson, we're gonna jump into creating a contact for 13. 15 How to create HTML forms: in this lesson, we're gonna be showing you how to create an HTML form. Each symbol forms are essential part of web development, and forms are a great way. Teoh initiate that communication between your Web user and giving them ability to send you information the form. So these are essential part of Web development. And in order to create a form, we're going to use our HTML tags here. So it's just form and opening and closing form. So this creates that initial form element. I've got that in here and now we need to create what we want to do within the form. So we've got our form elemental form container already to go. Make sure when you are creating those form containers that you're not crossing over different elements. So if we've got something like that, this isn't gonna be correct because we can't have opening on element inside of another one before it's closed and so on. So make sure that you are nesting them properly, so let's go back into the form and create an input. And when it comes to inputs there several different types of inputs, so you need to specify what type of input. You want to make it so typically most commonly, we're going to be using a text input, and then we can close that off. And we see that that what that does is that creates an input field, and this allows a space for the user to input some information. Now there's quite a few other attributes that we should add in, such as I d in order to identify it. So maybe this could be a first name field, and we also name it and naming it allows us to pick it up on the server, and so that could pick up that inform information when it gets submitted and pick that up on the server. And there's also a bunch of other attributes that we can add, such as place holder, and this creates that greed out type area, and this is visible by the user. So when I save this, we can see that we get this great out. So that's the police hold placeholder that's allowing us to do that. Now if you notice that by default, we don't have anything here that specifying what we're expecting within this foreign field , if we do use placeholder than that gives the user a little bit better of an idea. But let's say we want to really be specific on what type of information we want to create here. I'm actually going to get rid of this right now for now because it's so It's getting in the way of looking at the form. So you can also get rid of this header area here so that all we have is the form content. Now forms are gonna be similar. It's gonna be created a similar fashion, as you would any other HTML section where you're breaking apart pieces of the content and section it off in different containers. So you can use everything from paragraph here to break apart the different input fields here. And then, of course, we can label it and we can name it. And so on a number of different ways to accomplish that as well. So you could have something like first name and we see that that shows up that shows up pretty nicely. Eso we've got the first name. So it indicates what type of content we're expecting here. We can also put a line break here so that puts the first name above the text field. Now, the best way to do this is actually to use this as a label. So we have another element that we can create. We can call it label, and we indicate within label we haven't attributes for in this attributes will specify which input field this label is gonna before. So we just name it used the name of the input field that we're gonna be utilizing to tie it together and then within that label, this is where he can add in the first name. So by default, the label really doesn't do a whole lot. But one of the things that you will notice when you do click on the label that it automatically starts focuses that input. So that flashing line, their rate within that input field that were specifying and get rid of the placeholder here so we can see that a little bit better. So So when I click the label, it focuses on the input field. So this is probably the best way to go about it in order to indicate that you want specific content being placed within their and then, of course, When it comes to styling, you can apply styling to it usually instead of paragraphs. I'll use dibs, or we can use different formats as well. So I'm just using a div. And remember, again, we do have that styling here for the dibs. So I'm going to get rid of that. Just, uh, indicate what way want our form toe look like? So let's add in some additional options into our form, so every form is going to need a way actually to submit the form, and this is where we can add in buttons. So with buttons, there's different ways of adding in buttons so we can add in a button as an input type, and also depending on how we're formatting are button. So with buttons, you generally wouldn't need a label, because this is gonna be intuitive on what it's doing. We can specify the type as submit, because it's gonna be a submit button. We don't have to given an idea or a name, because this is gonna be understood. We can assign a value that will give us special text within the button here on top of the button. So click me or something like that. And then this is all we need to do in order to create a button. So now it's understood that whenever this gets clicked, were actually submitting the form, and we see over here that we've got within the U R I we get this question mark shows up, it's got first name. So it's taking the name value here from name, and it's giving it equal to. So if I type in something like test, we see that the first name is equal to test now, and this is just that it is passing over that data using the U. R. I. So there are different ways to specify how we pass over data as well, and these air attributes within the form and swell. So we have some attributes where we can set up and specify a method that we want to use. So between the methods we have an option of get and post, so get is the default. So what we see here, this is a get method. So when I refresh it, type in something there, this is get Now, post is gonna be more secure. So it's meant for Pat Pulis sending over more secure data and you'll see that we're just posting to this value and we're not actually including it in the you are anymore. And this is more secure way of posting values from the form. So if you want values that can't be hijacked here in the u. R I, you should be using post Teoh do your posts. So gonna change this back to get. We can also specify where we want to send the form to. So right now, by default, it's just sending it to the boat page. But we could just as easily do action, and we can specify a U R I where we want to submit it to. So if we have a file like, let's say we had a PHP file, doctors just called submit. And if I refresh this So now if I talk to type in something here and we submit it, it's gonna go over to the submit file, and it's still using Gap. Right now, eso cannot get submit because this file actually doesn't exist. But we see that we do have the ability to send over that data the, uh, different methods, and we can also send two different your eyes. So the next lesson we're gonna take a deeper look at the different types of form options that we have field options because, as we know, there's a lot of different ways to access in from and send information to present information to users, and I'm gonna be showing you those in the upcoming lesson. 14. 16 HTML5 Input types: when it comes to forms, there's a lot of options for different input type. So I'm going to copy and paste this into code pen. And I'm gonna show you all the different types of options here when we are creating our forms within HTML. So we can also go over to Mozilla dot org's and they have a whole guide of all the different elements that are available within form. So there's a lot of different HTML elements. We see that we've got button here so we could also change our HTML form so we could do it as a button and we keep type as submit. And then, instead of having the value as Click Me, we could transform that and button is not a self closing tag. So we need to create another button closing button, and essentially, it's going to do the exact same thing. Eso This is depending on what your preferences. There's different options that you can add that in. So we looked at form and we're gonna look at input because input is really the bulk of the different types of interactive control is used within forms and with input. We have a whole bunch of new ones as well. When HTML five came along, they gave us a whole bunch of new input tapes. So we've got button that we've looked at, and we've also looked at text earlier. So I wanted to look at some more of the specific ones, such as email. So it's open up our editor and just going to copy and paste out this section here. And instead of this being first name, we'll do email and label it as email over here. Give it a type, so we're going to give it an I. D. Of email. We're going to give it a name of email. And this, of course you can. As long as they're matching over here for email and name email, it should be matching with the I. D. So this is where we've got label. So the four email and I d email need to match in order for us to label them together, and when we click on it, then we get that focus there. So we do have an option type as email, and although it's gonna look the same, so I'm gonna just quickly save this one over and even though it looks, it looks the same as the text type. When we type in something here and we type in something in the first name, we'll see that we get this little pop up. So this is something us well with HTML five, because it allows us to have this pop up window that shows up that won't allow us to submit the form until it's an actual email address, because it knows it's smart enough to know that it's expecting an email format. And if it's not provided that it won't let you submit the form. If you call the type email, another type of common common input type would be a radio button, so these are also very commonly used. You're going to see them use quite often, and these are the same way as over here. So I just need to copy a label and input, and now we can label that the input buttons and because they work off of the I D. So we could have a number of radio buttons we could have won and give it equal to one and one over here and over here, the name. So this is gonna be, because with radio buttons, the ideas that you probably have more than one. So I'm going to just call it radio for now, and I'm gonna show you how this is gonna work. So the type of input is gonna be a radio button. And we said that that transforms into a radio button and let's check this out now. So now when I add a 2nd 1 and I'm gonna do to I tie this 1 to 2 and this 1 to 2 so that the label and everything ties together, and I'm gonna show you why having the same name and why that works. So when we have the same name, we see that the inputs we can only click on one. And the idea with the radio button is that you only have the ability to click on one one input. So if you click on the 2nd 1 that automatically it unclipped the 1st 1 So I'm gonna add in 1/3 1 and keep it type radio button. And now you see that it doesn't matter which, when I click on it, always unclipped, and we can also see that the type of data that it's sending over is gonna only show the value of that selected radio button. So we'll see within the query string. So maybe I need to copy this back over into here just to show you what's gonna actually be passed through. So we look at this and we refresh it. Now notice that we've got our first name and we've got one of these selections here. And when I click it, we see that we've got email is blank right now and radio is is over here. So we've got the URL for radio, which is on, and this means that we still need to specify a value for it because we don't have anything that's being passed. We just see that it's actually being clicked. So maybe if we can click it and we don't click it, we don't see that anything. So none of the radio buttons got selective. So let's start by sitting in some values here. So we do need to specify that the value of this now they can be anything that you want, and it doesn't always have to coincide, but usually best practices is that you make it coincide with the value that the user is selecting because it really does just make the most sense. Now when I refresh it, take a look at that string again. Refresh it. And now, whenever I pass over, I get the value I thought I've added in here, and we can also add in values for the name input as well. So if we had a name, a default value that we always want to show up or we wanted a default value for an email at email dot com, we saved that. And now when we refresh it, we see that they're already populated. Eso If we want to have a radio button already selected, we can do this a swell by adding in a value called checked. No, they're not really check boxes. But whenever we add in checked, that just indicates that this is the radio button that already is pre selected alert to radio buttons. We might have another one called, so I'm gonna just copy this one out here and we might have a check box here. So if you you'll see this a lot of times agreed to terms, terms of service or something like that, and maybe just call this agree and tied into the I d agree. Transform the type to instead of email. It's gonna be checkbooks. And now these air going to be different from radio buttons because it's going to give us the ability to check off more than one of these. The name here again needs to be different, so it could be agree one. And we can see that if this is checked off, maybe you could just pass over value of one. So we want to make sure that we have the ability to check and I'm check it and we don't have them by the same name with HTML five. We really did get a lot of options for inputs, so we've got everything. So we've looked at button, we've looked at check box. We can also look at color date, date time, and I'm gonna do this within code pen because there's quite a lot of these and we just want to be able to go through them fairly quickly. Because, of course, depending on what you want to do within your Web page, you may or may not want to use different ones, so I'm gonna just create a default type here. I'm going to call it default and give it an I D. Of default. And I call it HTML five types. And this way we can change the types as needed. Oh, it's gonna be over here where we've got a name for it. So So I just got call it new value, or maybe just shorten it. Call it envy. We can change this now to all the different types of Just take a quick look and see what they look like. So if we select input type as color, we see we get this color pop up whenever the user clicks it, allowing them to set Ah Hexi decimal color that gets returned and held as the name field. And now, if you submit that, then it's gonna hold that color value. So just another one that we have is we can use date so this one can be date. Maybe call this one default to. And so now date pops up a window with all of the dates, and it automatically populates the dates. So it gives you the ability to kind of search through calendar entries and return back different values there. We can also add in date time saving that, and David Time doesn't always work across all browsers, but you do have the option to do locale, which is a date and time and allows you entering the date and time with no time zone so we can see that we got the ability to do the date and time there as well. And be more specific with that. We can also add in different types as well. So going back up here if we want to upload a file. So if we want to have the user upload files, we can specify the type that's file, So maybe default three and give it a three. So here, where the user can pick the different tile file types, we can also be more specific going back to these dates and times. So we do default four here and we can be specific. So if we only want to return back a month, we can do it that way as well. So maybe I can set this 12 month and we do have a lot of different options with HTML five, so you see that we can specify the month here, so we can see January 2016. We also have the ability to set. We can also change this to a week, Return back a week. So now we can specify and have the user click and return back. That's their 38th week. We can also just do time if we want. So quite a lot of different options here s so this allows us to set the different times as well and weaken increment and decrease that am PM and so on. If we want a numeric value weaken set number, just change that back to month. And maybe we want a number here. So we're looking for a specific number. This is gonna be default five default 55 and we could specify that this should be returned back as a number that gives us thes icon. The Chevron's here to increment and decrease. We also have the u R l. So this is another one that's an interesting one that can prevent a default submission. So this one has to be in a you URL format or it won't accept the submission of it. So if I just type in a bunch of random characters here. We get that same pop up here that we got with the email, where we need to specify an ad in a specific type of content that it's expecting so quite a lot of options. And you can go over to Mozilla and check out all the different ones so they have passwords , so this is one that was previously used. They also have range. So you've got some other attributes you've got to set here a minimum and the maximum. You can set a step here, and it gives you this slider range that you can set values in between. There's also telephone numbers of TL and so on. So a lot of different options here, and it's definitely worth checking out the different ways that you can get values inputted into your different types of fields. So the next lesson we're gonna look at more options for HTML forms and show you that just some of the different options that you can do when it comes to each to mull forms 15. 17 Additional Form Elements: in the previous lesson we saw there was a lot of options for different input types for allowing users to input data into a form field. And there are also different elements that allow you to input data as well into your HTML form. Eso another one that is commonly used is select. So we do select and we give it a name off. So I'm gonna just give it a name of S E L and close off that select tag. And then in between, here is where we've got a present, different options for users. And typically you will set values here because these options need to coincide with having values that get returned. So again, this is the same way as the radio buttons where we've got different options here for the values that we can set. It doesn't always necessarily need to be that same one. But if you want whatever value want to pass over whenever the form gets submitted, this is gonna be the one that gets passed over. So it's not the one that's in between the option. It's the one that's the set as the value. So here we've got our input type or drop down here. So it's a drop down selection. If I want one that's already selected right off the bat. So if I want a set to as the default selection, then it's going to show up here on two. Otherwise, it will take the 1st 1 the first item in the list there as the selection. And lastly, another really popular element in HTML forms is the text area. So this is actually going toe work differently than the rest of the form inputs because we've got an opening and closing area and the content in here is what the user adds, so they have the ability to actually get to that content that's in there. And here we can specify, just like any other one. We can specify a name for it. So message on, we also have some additional attributes to specify as well, so we can specify the number of rows so we can essentially set the size of it us if you want. Maybe 20 Role is there makes a really long, probably way too long for this demo, so make it quite a bit shorter columns. Now we can set the width of it. So maybe let's set 50 columns wide and gives us a really nice wide form. And then, of course, whatever information is already between the text areas, this gets presented to the user toe access and use, and also when it comes to forms. So we have options, toe have different attributes, and as you can see, there is a whole lot of attributes here. So we just looked at attributes such as the columns and text area, and here tells you which form element uses, which attributes. So we've got one that's fairly popular, the disabled one, which we could set on input fields. So it's pot back into our form and let's say we want a disabled one. This one we consent the attribute of disabled and what we see now you can't actually enter data into their so these are a lot of different attributes that you can set. You can set max lengths so the maximum number of characters they're allowed in the element and a whole lot of information the required is another really popular one, because required makes that pop up box when you try to submit the form. So if I put my file as required and save that. And if I try to submit it, it gets us a little pop up here. So please select a file eso another. That's another really useful now, one that was brought in with HTML five. We've also got the selected we looked at. We can just simply go through here, and there's just a lot of different ones. We use value fairly often. Form, weaken, set the target of where we're located. So these are a lot of the ones that we've already looked at on. There's really is quite a lot of other ones that you can add in. So you've got your auto complete auto focus, and so long when you are creating your form, take some time to plan it out. Determine what type of fields that you want to ask. So what type of fields typically would be asked in the form and what type of information you want your user to provide, and then go ahead and build out the form? Selecting any one of these different elements and attributes or combination. They're off in order to really style and create your input form for users on your website 16. 19 HTML conclusion: the previous lessons we've seen how much you can do with HTML. We've looked at all of the different common elements that are used on a regular basis and Web development, and if you're interested, there's a whole lot more as well. So some of these are less commonly used. But there are a lot of different elements, and there's a really good element reference over at Mozilla dot orig. So they do have a whole listing of the comment. Different elements here. We've got our metadata elements. We've got her ways of doing a content sectioning eso We've got all of those down here, and we've covered most of them here. Definitely the pope. More popular ones we've covered. And then when it comes to the tax content, so structuring your tax content there's a lot of different elements that you can add in tow . Add different meaning to the text that you're out putting within your HTML element in HTML structure. We've also got in line text semantics, so ones like the line breaks. We can also bold text, So just going back over to here, where we were looking at the form, so if we want to bowled out some text here and let's say we want to bowled out this'll Orem ip suit text Here we can add be around it so we can add the the bold And then we closed the bold wherever we want the bull to stop and we see that bullets out the text So a lot of different options here and we also similar to bold We can also do italics weaken do small. So small is another common one that we we might see we can also to strike through as well. Metallic is there so that mitt represents a range of text. So it's offset from the normal text. Essentially what it does it it in coins it slightly. So if I want to incline this piece of text, we can add in that semantic we see that that tax gets inclined There we can also use small , which is another one that is commonly used where essentially what it does is it just makes the text smaller, but keeps it in line. So we see that we've got this particular text we see that slightly smaller stands out in different ways. On this gives us the ability to really add in different in line text semantics, making it look different and representing in different ways. We've got span there as well. We also have strong and strong gives importance. Eso it's typically displayed as bold eso. It looks a lot like be, but it is. Uh, there's different structure for that as well, so we just add in strong and typically you're going to be using B. But you can also go ahead, and you can use strong and get the same type of effect as well to see that the text gets bold ID there, and we also we can also bring in images we can bring in videos. Audio into our Web contents list again was new. With HTML five, we can embed content. We also have ability to use canvas. So what canvases is This is a HTML element that allows us to attach drawing capabilities, and the drawing is done through javascript, so JavaScript essentially is able to draw within that HTML elements. That's a really nice, neat one. If you want to create some kind of dynamic drawings and animations, there's also tables, tables, air, great way to represent content and then of course forms, so there's a lot to forms. So a lot of different information here that we can go through and create different types of HTML structures. And the whole idea when you are creating your each to most structure is to really get a good feel for what and how you want to represent your data. So make sure that you wrap your content appropriately within that right structure, and this is gonna make it a lot easier toe odd CSS. So take a look around and look at some of your favorite websites and just take a look around and see how they were, how they're representing their content within their website and get a feel for how to better represent and how to better structure your HTML content in a way that breaks out that content in different contained sections. And then they're nested within larger ones and going all the way up to body and then finally going all the way up to HTML. Now, in the next lesson, we're going to start bringing some styling into our Web page, so we had already set up some style. We had script script tags, so we're all ready to go to start adding styling into our HTML structure, so that's coming up in the next section.