Get to know HTML Learn HTML Basics | Laurence Svekis | Skillshare

Get to know HTML Learn HTML Basics

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (1h 50m)
    • 1. GettoknowHTML

      1:30
    • 2. 1 Getting to know HTML resources and tools needed

      3:54
    • 3. 2 Create and update your first HTML file

      6:35
    • 4. 3 Create Basic HTML Structure

      5:07
    • 5. 4 Build a Default HTML template

      6:31
    • 6. 6 Using Heading for more readable content

      6:36
    • 7. 7 Paragraphs and Line Breaks

      6:39
    • 8. 8 Creating Lists in HTML

      5:39
    • 9. 10 Hyperlinks and Bookmarks

      8:53
    • 10. 11 Working with Images

      5:14
    • 11. 13 Create Tables

      4:44
    • 12. 14 CSS styling in HTML

      9:23
    • 13. 15 Divs and Spans in HTML for better structure

      7:13
    • 14. 16 Semantic HTML5 elements

      4:37
    • 15. 18 HTML forms

      8:28
    • 16. 20 Form Attributes

      6:40
    • 17. 21 CSS files

      4:45
    • 18. 22 What is JavaScript

      5:06
    • 19. 23 HTML course introduction

      2:51

About This Class

Step by Step introduction to HTML Explore HTML coding and how you can get started creating your own Web Content pages
HTML is the foundation of the internet. Learning how to create HTML code is the starting point to creating your own web pages and creating HTML formatted web content.

Simple and comprehensive guide dedicated to helping beginners who want to learn HTML and how to use it. This course walks you through all common elements of HTML outlining front-end web design and web development.

This course is perfect for beginners to web page creation. Learn to create HTML code from scratch.

Step in the course and you will find that HTML is easy to get started with we provide all the resources and links you need. Everything is included to get you started quickly.

Explore HTML Tags see what they can do
Learn the fundamentals of HTML
See how HTML elements can be used to structure and design your web page
Get to Know HTML
Learn how to create tables, lists, forms, and more
create your own reusable HTML template
learn whats new with HTML5
HTML5 for modern web design
Add images and links to your web content
This course will teach you how to create and develop web pages.

I'm here to help you learn and ready to answer any questions you may have. When you are ready join now and start learning to create your own websites.

Transcripts

1. GettoknowHTML: html is the foundation of the Internet. Learning how to create HTML code is the starting point to creating your own Web pages and creating HTML formatted Web content. Simple and Comprehensive Guide Dedicated to helping beginners who want to learn more about HTML and want to learn how to use it, this course walks you through all the common elements of each to melt, outlining front end Web design and Web development. This course is perfect for beginners. Want to a little more about Web page creation? Learn to create HTML code from scratch. Step into the course and you'll find that HTML is easy to get started with. We provide all of the resources and links that you need. Everything is included to get you started quickly explore HTML tags, see how and what they can do. Learn the fundamentals of html C html elements and how they could be used to structure your Web page. Get to know HTML. Learn how to create tables, lists, forms and a whole lot more. Create your own reusable HTML template. Learn what's new with HTML five. Html. Five is ready for modern Web site design. Learn how you can add images and links within your Web content. This course will teach you how to create and develop Web pages. I'm here to help you learn about HTML and ready to answer any questions you may have. So what are you waiting for? Start learning. Create your own Web pages today Joined now. 2. 1 Getting to know HTML resources and tools needed: in this lesson, I'm gonna be providing you a quick overview of some of the resources and tools that we're gonna be using within this course in order to create HTML code. So the good thing about HTML code is that it actually just runs in your browser. So html CSS, which is used for styling of Web pages in javascript, which is used for create dynamic interaction for Web pages. All of this gets rendered out and run through your browser so you don't need any special tools in order to create and practice HTML. So that's really the good news. And as a matter of fact, as long as you've got a chrome browser, you can actually create an update your HTML code directly within your browser. So the first thing that we need to do is actually create an HTML file, and we're going to start out by creating index dot html. And this is gonna be essentially our default file that the browser is gonna know to go to and render out a content within our Web page. Eso We're gonna be showing you how to create your own index page within the next lesson. So to finish off about the different tools that there are out there. So there's a lot of different free editors. You probably already have something on your computer right now that you can use in order to render out and create HTML code. If you're looking for a good text editor, which is open source provided by Adobe, so no cost to it. And it's a really good editor when you're starting out and you can create Ah, lot of really cool things with this editor. So as you can see here, you can write some HTML. You can also update your CSS rate within line and a whole lot more So this is available at brackets Io and I am going to be using brackets. I owe my brackets application within this course on swell and another really good resource . Something gonna be using is code pen i o. And the really cool thing about Code pen is that it allows me to write html code, and I can actually see it rendered a rate within the page below or within the display area . And as mentioned before, CSS and JavaScript are also all available within code pen and whatever we're typing within our CSS. So after you look at HTML and you understand the basics of HTML, you could progress to CSS and out in some styling and then, of course, JavaScript for some dynamic interaction. And as you can see here what? We're focusing on HTML within this course. So I've got some basic html in there. I can also change the views here. So if I want to have a side view here in the display area here on the right hand side, I can do that as well. You can also minimise the CSS and JavaScript and really focus just on that html. So as you see, whatever you right out here on the left hand side, then you see being displayed here within the right hand side. So any changes or any HTML syntax And of course, we are going to be covering this each one. So this is heading one eso There are different types of headings and these air just pre styles for the output text. And as you can see once I type that here shows up here on the right hand side, you can also save here on code pen and this gives you the ability to access at a later point. Just keep in mind if you're using the free version that this is publicly accessible. So basically, these are the resources that we're gonna be using. So code pen and brackets io and we're gonna be creating out and also chrome as our browser and these old only tools that we need in order to show you and demonstrate how you too can start writing your own HTML code. So the next lesson we're gonna dive right in and start looking at creating HTML code in creating our first HTML template. 3. 2 Create and update your first HTML file: this lesson, I'm gonna show you how to create an HTML template, and we're going to get into the basics of what HTML is. So, first of all, we actually need to create a file in order to write our content into So I'm on a Windows machine. This is where I'm going to be creating my index page my index dot html page eso we need to create that initial file that's gonna hold our HTML content so that we can go to that file via the browser rendered out and actually C r html content visible within our page. So you probably already have the tools within your computer in order to create a file. If you don't, then you can go ahead and use brackets and simply all we need to do to start out is create a brand you file. So I'm just going to create a brand new file, and now I'm going to save this file is a completely blank file, and I'm opening it up. So make sure that you got that correct path there that you're saving it too. So I'm saving it, and a good practice to get into is still we start eight and your initial page where you want your website tow launch out of should be called index dot html. So especially if you're doing an HTML page. This is where the server will understand that this is the route page, and if there's no other page specified than by default, it will render that out. So that's for when the server is running and it's looking for a starting point for your domain. It's gonna look at those index files in order to start it, find a starting point for your file. So now that we've created that, we can go and we can access it within our browser and as we see not much happening as of yet because we don't have any HTML code yet within our page. So as I did say, there are different ways that you can work with your code s so we can go ahead and we can open up her editor weaken type content into the editor so I can start typing in some content in here. I say that I could go it here, refresh it, and I can see my HTML code getting output within the page and you're probably saying, Well, wait a minute. This is an HTML code because all you've done is created a file called it index dot html, given extension of HTML and just type hello World. So this is true because the what The way that the browser actually works is that when it sees this extension HTML, then it knows that it should try to render this out as HTML code. And if there's no HTML wrapping that code, then it just reads that as regular text that you want output within your Web page. And that's why we're able to see hello world as I've typed it in. So one of the things that I want to show you as well is how you can actually update your code right within your browser. Save that file so that you've got that ability to see what's being displayed. So kind of like what we saw Code pen, where we can see and we could make some updates, and then we could just refresh it so we don't have to always flip back and forth between our browser and our editor. So go ahead and open that file up that you've created index dot html so it could be completely blank. Open it up in your browser, and hopefully you've got chrome installed on your system. And if you don't, then chrome is a really good browser in order to install, because it gives you a lot of flexibility. Eso Let's go ahead and open that file up in chrome and within chrome. We've got what's called our deaf tools and you can open this up again. I'm on a Windows machine, some control shift I. But you can also open that up within Max. You can go into the settings here, and you could go under more tools, and you've got developer tools as well. So a number of different ways to access that same console. And when you click that developer tools, you're going to see that you've got this developer dashboard that opens up and they've got a number tabs. Here at the top, you've got elements, so basically under elements, we see all of our code. So I just made it bigger as well in order, So it's better toe to see it within this course. But within elements under the elements tag, you can see that you've got all of the source code there, so it's automatically as mentioned before, even though I don't have that in the source code, it's actually trying to add some h two mil, and I'm gonna be explaining this as well as we progress through the course or for we progress through the lesson. So there's a number of other really important tabs here within browser tools, and other one that we want to look at is sources, So sources gives you a full path to where your file is located. So we see that this file is located on my KK Drive under the folder Websites under Folder Course, and it's called index dot html. So it gives me the full path, and the really cool thing about chrome is I can add a folder to my workspace. So I just right clicked it here so you can just click it and select add folder to work space. And once we do that, so no need to make sure that we specify that folder that I wanted to add in. So let's go all the way down to the folder and just click OK, and it's gonna ask you to give you access to it. Eso again Make sure that you don't expose an insensitive information because now this is going to get communicated through the browser. So I'm gonna go ahead and sit select allow. Now I can go down to the different folders that I've added here, I can select that index file so this I can close this one down because now we can work off of this one, and I can go ahead and make an update. Say that. Refresh it and I've got my update live. So we're all set up and ready to go now to start typing some HTML code. And of course, if you want to work with your editor, you can work with that as well. So it actually doesn't matter where you're placing your HTML code because it's gonna be the same file. So this is just different ways that we can access the file and type in our HTML code. So the next lesson we're gonna jump into starting our page template. So this is gonna be a default template that we can use over and over again, and we can use that in order to help better structure our HTML code. So it's coming up in the next lesson. 4. 3 Create Basic HTML Structure: In the last lesson, we saw how we can access our newly created HTML file, and we saw how we can start updating the contents of that file in a number of different ways and within the lesson. Within the next few lessons, I'm actually going to be using my chrome browser in orderto update my HTML because this way , we can actually see what's happening here on the live page s. Oh, this is gonna be a great way to that. We don't actually have to flip between the editor and what our HTML code output is gonna be going to make it slightly bigger here as well, so that we can have a better preview of actually what's being displayed out here s so we see that we've got the full path there. You can also use your editor here. Eso It doesn't actually matter because all we're doing is writing to this HTML file. So every good each to Mel file needs some HTML code. So let's start creating some code. And we saw here when we look at the source code that the as the browsers actually rendering this out, it's setting this up within an html structure So we've got this html opening html closing. We've got this head opening, head closing, body opening and body closing. And this is what is This is thes air the basics of what HTML is. We've got a Siris of opening and closing tags, and it's essentially building out a structure. So all of our HTML content all over html code is going between the two opening and closing HTML tags we've got ah, head section. So the head section contains meta information title links out to some styling and so on. So this is where you place all of that information that essentially the browser would be using in order to render out that page content. And then actually, the page content would be sitting between body so between the opening body and closing body tax. So this is the proper each temple structure for this hello world to. So let's go ahead and update our code in order to better reflect that and we're not gonna actually see anything different. All we're gonna be doing is formatting that html than HTML tags adding those in and one important thing to note here with HTML tags. They're actually not case sensitive, so I could do something like lower case. I can do uppercase, so that really doesn't matter. But out of good practice, most the time you're going to see it as lower case because this is the best way to format. It s so you don't want to have all of these upper case characters. So stick to the lower case even though it's it's it doesn't matter what case you're using. Stick to the lower case when you're writing your HTML code. Just best practices. Also here we're gonna set my body, so wrap it with closing body. So what? The idea, too? Is that just keeping in mind? Whenever you open up a tag, make sure that you close it. So there we go. So now we've got essentially, we've written out our HTML in the same format that our browser is expecting it to look like whence it's rendering out some content here in the middle so that when I refresh it, we actually don't see anything different. If I go into my editor, we see that we've styled it appropriately and one of the things about editors one of the really cool things about editors is that they've got some additional functionality. So stuff that you're not getting within the browser and you see that we've got these opening and closing Chevron's that can open and close the different opened and closed tags . And this is a better way to kind of give you a quick overview of HTML. So let's just cover off once again what we've covered within this lesson. We know that with HTML tags where we're setting up tags and within those tags where we've got content and you notice a swell that we've got tags nested in other tags. So the HTML is the parent tag, and this helps the browser understand that to be expecting some HTML content in here and the first thing that's gonna look at his head. So it's gonna look through whatever content you've placed within the head section. So if you've got something in here, this is where you've got your head contents, and then next it's gonna go to body. So three essential pieces, one mean container into essential parts to an HTML page and to your HTML structure. In the next lesson, we're gonna show you how you can add some additional meta information and also how you can add some head information so that the browser actually have something more to consume and to actually better understand what type of HTML document and what it could be expecting to render out. So this is what's coming up in the next lesson. 5. 4 Build a Default HTML template: in the previous lesson, we introduced you to HTML tags. We saw that tags have an opening and a closing content that's nested between those tags. So this content between the tags, this is now considered an element because it's got content in here and anything within here is part of that element, so that each team L parent element has several other tags nested within it. So it's got some Children in here, so it's got the head, It's got the body, and this is the default structure of any HTML page. And now let's add some more specifics into the content. So this is actually not going to be something that gets consumed by the user. But this is actually meant to help the browser better understand what we want output and what type of content it can actually be expecting. So typically within a Web page you need to add DOC Type and Doc type help specify what type of document it is Now I know that we snow that it's an HTML document by that extension, but also DOC Type can specify what version of HTML the browser should be expecting when it's rendering this out And when we specified doc type HTML this essentially, this is the latest HTML five document type. So basically, this is just a hidden message to the browser. When it reads the file to say, OK, I know what I should be expecting here. I'm expecting html five content. So next we're going to go into the head section, and a lot of times you're going to see that you've got this type of trees structure where you've got this in Dent, where you've got nested tags are indented between the parent tags, and so this is done for readability. So whenever we've got a bunch of content here where we're opening and closing the tags, we want to nest that content in here and this is again for readability makes a lot more readable and easier to digest. Especially got a lot of aged him out chord so that you can quickly look it over and say, Okay, well, this is the head. Here is the open. Here's the close. So we've got it on that seem kind of lying here, So we know that any one of these air opening and closing these air with along the same lines that we can expect a closing body when we've got the open body on that line. So going back into the head, there's also some meta information that I did mention and meta information again helps the browser better understand what to expect. What type of output to expect. So we know that there's can be different character sets. So because each tim off code is universal, we know that sometimes we're not writing English characters, and this is where you can specify what type of character X said the Web page should be expecting on the output eso meta information. We can also include things like a page description. We can include key wears author and so on, so you'll see that some of this stuff commonly gets included within Web pages. Will we look at this one over here? So we've got our meta character set utf eight. It's also specifying a view port, So this is for mobile devices to make your Web page mawr flexible and responsive on different sizes. We also see that we've got all of these meta properties, so all of this information this is meta information to help with social media tracking. So when we're sharing the page and Facebook or Twitter sees the Web page, they can pull out this information the contents of the page really easily. So that's why all of this stuff is included. So it knows it looks like quite a lot of information, but it essentially it's repetitive, and it's essentially helping guide along any applications that might be looking at your Web page. And we also see that we're linking out to external files, some source files and so on. And that's the bulk of what's contained within most of the head of any Web page. And we also see one more here where we've got title. And so title is another thing that's really important to include within every website. So notice up here in the top left hand corner. My tab just has the file name, and it's doing that because we actually haven't set a title. So I'm gonna give it a title of learned html and we're gonna close that off and say that. And now when I refresh it, watch what happens up here in the top. We see that now we've got learn html. So although I know I said that the head contents It's not gonna be visible by the user. The title is the only exception here because the title is also used within the meta information. That's why it sits in the head on. And that's why we actually we are able to see it because it's a title. You can also see it when search engines are indexing your file. A lot of times, they're going to set it up and use that title in order to represent that page. So for S E O purposes title is also really, really important. Those of you that aren't familiar with S. E. O S CEO is search engine optimization. And essentially, this is the practice of trying to get your Web pages to rank better in search engines. So title super important for S. E O. Make sure that your title is meaningful Makes sense with the rest of the content of your Web page. Don't just name the title something generic. Make sure that it's relevant to the content of the Web page. And next we're gonna look at body. So essentially, we've already typed some body content here, and we see that we've got our hello world s. So this is what's getting rendered it. So the next lesson we're gonna jump into content that can get rendered out into the body. So this is gonna be that visible content within four year users in order for those users to consume that content when they visit your website. And that's where things are going to start getting really interesting because we're actually gonna change what's getting output on the page. So that's coming up in the next lesson. 6. 6 Using Heading for more readable content: in this lesson, we're gonna talk about headings, So every good Web page, you're going to see that when you go to any website, we've got page structure, so not all of the content looks the same. We've got some words that are larger, some words that are bold ID and just some that actually stand out more than other text. So you see on any webpage, we've got a variety of content, and it's structured in a number of different ways in order to better break that content apart. So it's more consumable for anyone visiting the website. So we see, even here, there's uses of images and so on, and I'm gonna be showing you all of this and how to add in images as we progress through the course. But the first thing that I wanted to show you is how to make heading and heading tanks so heading tags in html, there's actually going to be six different sizes of headings and headings are used in order to define important parts of your Web page and also headings a really important for s seal and the reason being so if we look at some content here and we've got some more content here, just down below. And then we've got hello world again. And let's just say that and refresh it. So what content actually jumps out at you when you look at the web page, you see that hello World jumps out at you, It's actually differentiated from the rest of the text, and we know that this is actually important. So this might represent what kind of content is actually below it. This also might represent the Web page content and so on. So the idea here is that we want to highlight important content within your Web pages and also again going back to S. E. O headings are super important. It for seo purposes. And the reason is, that s CEO. So search engines are gonna be going, and they're gonna reading through all of your content and they're going to read through. And once they hit these, each one's they're gonna know that thes each ones stand out from the rest of the content. So that means that the content contained within here is super important. It's more important than the rest of the content. So this is where you place your keywords for Seo and so on. They're probably saying Okay, well, why don't I make everything each one? And the reason is that it actually wouldn't stand a bit. And also, for best practices, you want to really emphasize highlight on Lee a few key words that are gonna be relevant to the content of the web page. So you want to make things that are good for the users coming in as well as good for search engines as their indexing your web page. So you gotta think for the most important part is you want your users to have a good experience. So let me show you some additional sizes for each tags. So there's also hte too. So I was gonna type each to, and you're gonna be able to see the difference between H ones and H twos as we've saved those. So I gotta go back and refresh it to see the H two is slightly smaller. It doesn't jump out, doesn't stand out as much as the H one, and we can go all the way down to H three. And the idea here is that we're progressing ever smaller. So we're starting out with our first main tags. Our main category. Our main information is gonna be H one. And then as we go down, we might have We might have aged too, so we might have a number of H twos. And then so these air subheadings off of the main heading eso even instead of calling them each to, We'll just call it subheading and subheading and we see that now once I save it. So now we've got this breakdown of the content and it's actually starting to get broken apart. We see what's being emphasized and as the use air coming in reading this. We know that if this whatever content here's and subheading to if it's in the each to and this catches our attention than we continue reading, if we're not interested in this subheading, we go to the next big subheading and so on. And we were using H three toe further breakdown the content. So typically you won't see it used in this way because we'd have subheading and would have some content and then some h three. So you progressively increments that each value until you reach all the way to six a lot of Web pages, you know, not really going to see too many headings going past maybe four at the most, because the idea is that the structure is that each ones are going to be the largest heading. And then the H twos are used to break apart the rest of that content. And if you want, break about those chunks of content underneath each Tuesday, then that's where used eight threes and so on. And then the A H three is you'd use on you break apart content from the each three h four and so on. So those would be subheadings of this age three and all the way down. And as you can see that I just start breaking that down, you're going to get really, really smaller text, less emphasised text and as well, it's gonna be a lot heard of. Unless you've got a tonic content and a thana sub headings in order to get to H six. So use these headings, used the heading elements heading tags wisely to break apart your content and to better represent your content. And as you can see here when you're coming in here, you can see that when we inspect this one here, we can see that these air h twos and this one page has. So these are the H twos, and we could also see that if there's a H threes and so on. So this page is broken down with H two h two's eight threes, air the smaller ones and so on. So when you're looking at the page, thes ones jump out the most than these ones are sequentially, less less important. But they're still being emphasized as different areas within the Web page. So the next lesson we're gonna look at MAWR structuring with your Web page, paragraphs, line breaks and so on. And this is all in order to better represent and make your text content more digestible for your Web visitors. So it's coming up in the next lesson. 7. 7 Paragraphs and Line Breaks: so so far within our text within our HTML document, we actually don't have a lot of text, and that's why the headings don't really make a whole lot of sense because we're really just breaking apart and we're just holding out some stuff and we don't have anything in between. So what I want to do in this lesson is that in some dummy text and dummy text is really important when you're designing your Web page, and you actually wanted to make and have it look proper and actually look like a riel Web page. So let's add in a big chunk of dummy text. Amusing blind text generator dot com number different resources online in order to generate some dummy text. So Laura Ipsum is text that actually looks riel. But it's actually so it's not English language. It's just Laura Mitsu text, so it's basically used for place holding within website design. So let's go ahead, and I'm gonna get rid of some of these paced all of that text in save it and refresh it. So there we go. So now we've got our Web page. We've got a big chunk of text and well it doesn't really look that great. Eso someone coming into this website. Ah, lot of times, if you see something like this, you're not gonna go reading through it because it's just too much text and Web visitors, they don't like to kind of the that. You've got under five seconds to actually capture a user's attention on a website, So always make sure that it's not too overwhelming. Something like this is overwhelming. And this is where we structure our page even more, using elements like paragraphs or tags like paragraph tags. So these air opening and closing tags again. And basically it's just breaking apart your content and making it more digestible. So see here that when I add in paragraphs right away, I this first sentence, it looks more readable, more presentable. I'm actually going to jump into here, and I'm gonna add the paragraph tags here because this was very long, and I don't want to scroll all the way over. So I'm gonna take this apart at in some paragraphs and some random spots here, and I'll show you how I can magically transform this to be a lot more readable. And also make sure that when you're opening your also closing and paragraphs. I don't include paragraphs in other paragraphs, so don't nest a paragraph within a paragraph. Some browsers don't take well to that. They're going to throw an error. Eso sometimes just make sure that you're keeping them all separated out. So now just a little bit more readable In brackets, you can beautify the code, so it is more readable within the code. So basically that it in paragraphs and we can see that now when I go to the Web page and refresh it, it's a lot more digestible for a user coming in. And then you throw in a few headings. Uh, this is a really great way to break apart that content. And so if I had this content was maybe something in regards to look at this and maybe over here if we had of site about pets. If we had cats here opening, closing, always remember to have those open and close tags, and then maybe this paragraph could be about dogs and so on. And when I refresh it and I come into the website, it actually looks like something that is fairly easy and straightforward. So if I'm coming into the Web page, if I'm thinking I want to look about cats, then I know where I immediately go to. And I can start reading this instead of having to look over like a huge block of of just regular text. I know where I need to go in order to find what I'm looking for. So also, if you notice here that with paragraphs were actually breaking apart that content So there is a little bit of formatting there where we've got the paragraph starting paragraph ending . We've got a new paragraph starting new paragraph ending, and we've got this spacing in between. And we also see that over here as we're wrapping the text, we have no spacing. And you can actually do this within your HTML code as well. So if I had a really long paragraph here, and if I want to break it up a little bit, I can add the's line breaks. So these are just br tags. And whenever I refresh it, we see that we've got this line break, which is different than a paragraph, because we have no additional formatting or styling that's being added in all we're doing is adding in and returning the character to a new role, and that's all it's doing here. So no additional formatting. And this is another way that you can break apart your text, make it more consumable and easier to read. And one thing that we did notice here with the line breaks, there's no closing line break. And that's because line breaks are a different type of each team of tag, where they're just inserting, inserting information about how that page gets rendered out. So there's actually nothing that you could really place in the line break because there's no content in a line. Break it just essentially, as the browsers render earning out. It's a line break. It knows what to do. It means this has moved to the next line and does the same thing. So it's essentially more works, more like a command, and it allows the browser Teoh, render out that content as expected. And as the Web developer designed it to look. So the next lesson we're gonna look at adding even more for mounting and structure. So if you had something where you've got a list of items in a list of content. You want a list that content out and have it all kind of block together. So this is where we can use a Norden lists and lists within HTML. So those I'm gonna show you in the next lesson. 8. 8 Creating Lists in HTML: for this lesson. I want to show you and introduce you to lists on ordered lists and ordered lists. And for this lesson, I'm gonna be using code pin because I want to show you Kyle, we can build a list of items and I really want to focus on these particular elements within HTML. So ordered list is representing an ordered list. Is an old L tag. So again, opening closing ordered list. And we've got some content in here, so I've got 123 and four. So as we saved that, we see Well, this doesn't really look like a list because we've got a bunch of content in here and it doesn't even represent as we would want a list to represent. This is just essentially doing one line of code, and it's just out putting some content in the middle. And this isn't really a list. And what is missing within this to make it actually a list, you need to be able to break apart each one of these items here, and we need tohave a starting point and a finishing point so that the browser knows what the contents of the list is so all the different items in the list and this is where list items come in and the tag is L I for a list item, and these again are opening and closing. So make sure that when you're hoping that your closing it and we see that look what's happening over here. We're already getting that for mounting coming in. It's already starting to look like a list and the browsers automatically throwing this one in here, and it's representing our first list item. So let's see what happens as we turn the rest of these into list items. So we see that it represents that cuts a number two there. And now let's do another one here. And what do you think is gonna happen when I close off this list item? We've got number three and list item number four, and we see that this is another week that we can pull out content and make it more meaningful within our Web pages for Web visitors. So creating a list really simple, straightforward, and you're probably wondering, Ok, well, what if my list What if I didn't want these numbers here? What if I wanted something else like if I wanted letters, for instance. So sometimes you see lists with letters, and we can nearly easily change that. The letters by doing type eight and this is all built in with HTML s. Oh, this is just something that the browser understands that a new ordered lists have ability to change different list types, and what we've introduced now is an attribute. So going over and as we're specifying a type equals A. This is additional information that's contained within the ordered list. So we're not where no longer are we expecting that default ordered lists, which is the system Eric Value that were actually specifying what type of list were expecting. And there's a number of different types of lists so I can do upper case. I can do Roman numerals. Eso leaves air all changing, and we see these air all updating here. I can even do upper case I for the uppercase Roman numerals. So depending on how you want this list to look, you can do it in a number of different ways and you're probably wondering, OK, well, what if I don't want to start at one? What if my list starts at five, for instance. So this is another attributes, and we could be really specific where we want these numbers to start. Notice that Roman numeral 5678 And this is where we can specify how our list is starting. We can also go back to the letters. We can start them out at E, which is the fifth letter F g h, and so on. So notice that this is giving us a lot of flexibility in our output. So there's also another type of list, so sometimes you don't want a order. Your list. You want to create a list and you're not sure how many items Aaron the list and so on. Maybe bullet points is something that's good enough to output here instead of these numbers , and these are what's known as a non ordered lists. So you l for one ordered lists, and we also still need those list items in there. So all we need to do in order to create an ordered list and update it to it a nordeste change the old to au and there we go. So we've turned this one into a known word list. We don't need to specify these attributes because we already have our bullet points and this is a default for a new ordered list. So if you're creating a 900 lists, you're just going to be using the bullet points. So the next lesson we're gonna look at MAWR about attributes because this was an interesting spin on our typical opening and closing tags, because now we were able to get more specific and add in additional information cues as to how we want that content to be output. And that's the purpose of attributes is to be more specific within those html tax. So if we need Todd's in specifics, we do them by attributes, and we're gonna look closer at attributes in the upcoming lesson. 9. 10 Hyperlinks and Bookmarks: in this lesson, we're going to be looking at essential pieces of what actually makes the Internet, the Internet, and what is what is used in order to connect all of these pages together? So any web page you go to, you see that you've got clickable links and links are essentially how Web browsers and how Web users can navigate from one page to the other. So if you go to this page, it doesn't have what you're looking for. You look for links to click on and move to the next page is even search engines just a collection of links, and this is how we actually crawl through and we move navigate through the web. So links are super important when it comes to Web pages. So let's open up our browser here. We've got that index file that we were working on, and I'm gonna show you how to do essentially different types of links so you can actually link within a page. So if I've got, like, a ton of content and I'm actually gonna copy out some even Mawr content here, and I had some paragraphs here, and I've got a whole bunch of content here. Now that I can add into my web page going into my web page, I'm gonna add that in. I'm gonna make it look nice. Beautify. And I know I've just got a bunch of content in here. So what I want to do within this page now is I want to add in some blinks. So I'm gonna close this one off for now. And let's look at our web page. So I've got a ton of words here and we need to scroll down to find additional information and so on, some actually making it bigger. So it zooming in. So we see that we do need to do quite a bit of scrolling to get down to the bottom. Eso may be at the bottom. We might have something within this Web page and we might have area on birds. And what we want is we want the user to be able to come in and actually navigate to the part of the Web page that they're looking for. And we can accomplish this via links and let's set those links up. So let's go back into our Web page and ideally, we want the links at the top, so links are just a opening. Closing A and let's just do this cats and we'll do another one dogs. But that shouldn't be dogs, But that should be a link to dogs. Not that dog tag, but a link to dogs. And lastly, let's do one for the birds. And also maybe what we want to do is incorporate what we learned in the last lesson where we've got on a Nordic list and I'm gonna change all of these toe list items so that they nice and neatly get represented it into my Web page. And so I'm just doing some cop quick copying and pasting. They're wrapping the list items around those, and it's gonna beautify that. Save that. And now let's go to our Web page and see what we've got. So we've got cats, dogs, birds and nicely listed out there. Eso It's in line with what's within our Web page and notice that I can click thes, and actually nothing's happening because going back again to the last lesson. What do we need within this anchor text? We need additional information, so that means we need to add in attributes in these attributes within hyperlinks. That's what actually makes a hyperlink. Ah, hyperlink. So make sure that you're sitting up here your hyperlink and the attribute that we're using is H rough. And this is gonna allow us to specify what Web page we want to go to. So if I wanted to link to a page or if I had a page called Cats and I want to link out to it, let's go back and refresh it. We see right away we get that underlying and this is the default in HTML for hyperlinks that we've got on underlined, underlined content. And now, in a click it, we go to that Web page cats. And of course, we don't have that would page yet. So that's what's going to nowhere. But essentially, we've created that hyperlink there. So another type of hyperlink potentially would be I link within the page so or we could link out to an external source. So we had something like http and we had something like, So we'll link out to google dot com and maybe we had a link to a dog website or something s Oh, this is gonna link out to this page. This one linked out to cats start html. This is gonna link out to an external Web page and again remember that we're connecting a bunch of websites together by these external links. And another thing to keep in mind with external links and always a good practice, because the idea of a website is to try to keep people on your website as much as possible . So if I add in google dot com, someone comes to my website clicks, dogs ghosted google dot com Well, I've just lost my Web visitor, and that's where we add in another attribute to accommodate that and we use the target. And this is what the target browser window is gonna be when the user clicks this hyperlink . So let's check this out. Now I go to my page, I've got my cats page there and I've got my dogs. So I click dogs. We open up into Google, so it's opening up a brand new tab in my browser, and I see that I can really usually go back to where I started from Ah, and also with cats. You can always go back as well as you get the back button there in your browser. So lastly, there's actually another way to use hyperlinks within your Web content. And I promise you, I didn't add in all this dummy text just to confuse what we're talking about. Eso the purpose of it Waas that if you're coming into a website, maybe I want to go down to the birds section of my page. So maybe I'm not interested in cats. Maybe I'm not interested in dogs and I want to go right down to birds. And I want something up here at the top of my website. So the user can really easily go down to that content so they don't have to read through everything and they could just click because they're getting Remember those Web users they're looking to do something. They're looking Teoh, fulfill their need on your website as quickly as possible. So the best idea when you're designing websites is to represent something and help that user find what they're looking for. And this is a great way to do that as well. So it's open up our editor and odd birds. So the way that we want to do it, we actually want a link to this particular piece of content within our website. And how do we do that? So we know that we need toe add in on a treff. So we need to add in where we want the user toe end up, and that's what we use h refs were. But what type of what information do we place in here in order to indicate that we want to send them over to this particular section. And this is where we have to add another attribute So attributes can be added to any one of these elements. Any one of these tags we've got ability to add and attributes to any one of them. And one of the attributes that we can use and you guys see it used quite often is the i. D. So this allows us to actually identify this particular element on earpiece. So we're going to give it an I. D. Of birds, something that makes sense going up here. Now we're gonna each ref and we're gonna link out to birds. So using the hash to indicate that this is on, I'd identified element within our web page, and we've got birds there. Now let's go back out to our Web page, see what happens. So it looks like all the other two hyperlinks, and when I click it, look what happens. We get brought down two birds, and this is great for the user coming in. They can click it and they can see Well, now I'm in the birds section of my Web page, and this is a great tool if you've got a lot of content within your website, and you want users to be able to quickly navigate through that content. So the next lesson, as I mentioned use of images, is all over the place. It's a really great way to engage and satisfying your users as they come into your Web page , and they don't just get represented with a bunch of text. Nobody likes that. Add those images in, and I'm gonna show you how to do that in upcoming lesson 10. 11 Working with Images: So far, we've been working on a fairly boring Web page, we added and hyperlinks which added in something to our website. But coming into this website, there's just a lot of text and Web visitors. They want to be entertained, they want to be engaged. They want to get something that captures their attention and you see this all over the place. Any website there's always uses of images and max mixed in with the text Texas formatted on different sizes and so on. And this lesson I will show you can add in images into your website. Let's go ahead and add in an image. So maybe first of all, we want to add in for cats who want to add in picture of maybe some animals or something like that. So let's create a brand new line here and the tag toe adding images is I m G. So typically, what you might be expecting with opening and closing tags is that maybe you'd have I m g. And then you put the image there and then you close it. But really, that doesn't make a lot of sense, because the image would typically or should be represented as an attribute, just like it is within the hyperlinks, because with an image, it's just like the line breaks that we saw earlier that this is a self closing tag. We don't need any other content. We just need to know where that image is located. So let's set up a source for that image and equal out the source. So just like what we did with the hyperlinks, we need to specify where this image is located. So if that image is located within our root folder might be something like cat dot jp. But for this lesson, I don't have any content. Actually, images set up and ready to go. So where am I gonna turn to turn to the Internet, just as I did with the blind text generator? There's actually a solution for dummy images, and luckily for us, we've got one for cats, so I can go ahead and I could get a color image of a cat. I can get something like this and I can get a path to that cat. Eso All we're doing over here is I'm gonna copy out that path to the cat going over to here and instead of the source being cat J. Peg, let's open up and create. Just make sure that I'm specifying a properly so cats and go back into my code Here. Save that and let's go back up to our Web page and refresh it. And there we go. So we've got some cats there, and we can also add in some other animals as well. So not sure if I'm going to get dogs, but maybe for the next paragraph. Since the cats I want to add in some dogs. We don't have dogs, but we can do animals. So maybe luckily we might get some some dogs. Same thing for birds. Let's do something like that as well and do some animals there. Now let's quote, refresh our page and see what happens. So luckily for us, we ended up with the dog there, interact with the dog into the birds. But that's okay because we never know what we're expecting when we get in this automatically generated content placeholder content within our website. So there we go cats, dogs and so on. So another thing with images is that a lot of times if somebody is coming in here and maybe the image doesn't load. Or if they're using a screen reader, they're not gonna be able tell what's contained within this image. So good practice. Best practice with images always added those all tags. So all tags is basically a way that you can specify to screen readers or in case your image doesn't load some additional information about what the user were, what is intended to be within this space. So this could be, oh, cat and this one would be dog pick. And these are just the all tags and again specifying Bird, maybe so, not sure what's actually coming up here, but maybe we get a bird there. So now when I refresh it, I've got a cat got a giraffe, and I've got a way to specify if that image doesn't show up. Eso Let's just mix up this path here, refresh it. So now the second image isn't going to show up, but we get something that says dog pick. And this is what's coming from the altar tags as well as if you're coming in with a screen reader, it'll instead of re instead of just trying to show you an image. It'll actually read out what the contents of that image is meant to be. So the next lesson we're gonna look at additional ways that we can break apart some of this content. So maybe we want to set up a table and we want to have a bunch of information I would put for the Web user. And I'm gonna show you how to set up a table in the upcoming lessons that's coming up. 11. 13 Create Tables: In one of the previous lessons, we looked at a new ordered lists and ordered lists, and we saw weaken list out some content. Well, what happens if you've got multiple columns of content, multiple rows and you are list this content out nice and neatly for your Web visitors? And in order to do this, we have tables so similar to the list items we've got it opening and closing table. So opening and closing table tags And now we need to add in some content within the table and a table is actually gonna have more than just that one dimension. So in list items, we had a bunch of items here. We listed them all out. But we also need to consider that we've got rows and columns, so there's gonna be two dimensions here, so we need to build this within our Web page and for tables. So we specify that for each road we specify the breakdown. So we're gonna have a multiple number of rows so we can just open and close those row tags . And so now we've got all of our rose set up here, and no need to add in that content. So for tables we can do t d. So I believe that's table did us. So we've got one close off that Tedy. And if we had more than one column, so we'd have to and would have maybe three over here and so on. Now you can see that we're already starting to build up some structure for our tables. Eso for table headings. There's actually additional instead of TD, we're using T h so that this way, the browse understands that these air table headings. So this was, if so if we were collecting bunch of people's names. So first name close off that table head next, heading in our table. You see, it gets bold automatically. There s So if we had lost name, close off that table head and let's say we're collecting a bunch of phone numbers. So if God are opening and closing table head, we've got essentially columns get listed out and so on. So everything is getting output and represented. And now, instead of that we had John would just do it. John Smith there and will make up some kind of full number here. Non existent phone number. Copy that over. So copy that that format and the next person in our list might be someone named Mike. Just give him a name. Mike Jones. And then he's got a slightly different phone number. And so what? So this way we can start representing an out putting your content in a more meaningful fashion to our Web visitors. So probably looking at this and saying Okay, well, it looks pretty good, but the table is kind of a little bit cramped here. The first name last name. It's crammed together with the phone number, and it's not really evident that even though it looks kind of like a table, it doesn't really look exactly as what we would want our table toe look like. And this is where we add in attributes. So we added additional styling into our tables and also any other attributes we could add in in order to make our Web pages look ah lot better or Web Khan aged him a content look a lot better. So with adding in styling into our Web pages, we can do it in line Riyadh, in the style attributes here, so I'm gonna just specify that this is 100% and give it property of with. So you see that right away it changes the way the look and feel of our content. We can also add in styling in a CSS file as well where we had added in style tags up at the top of the page. It's a number of different ways to add in styling within the Web pages s so this is a way to add it in as an attribute. So in the next lesson, I'm gonna show you how you can add styling and update the look and feel of your HTML elements that's coming up in the next lesson. 12. 14 CSS styling in HTML: the last lesson we looked at, how we can build a table, and we introduced how we can add some styling. So actually customizing the way that HTML content is output within the Web page. So not all tables have to look the same way when we add in attributes. And this is exciting part of Web design, because this allows you to use attributes in order to add your own spin, look and feel to the content of your output in your Web page. So we saw that we can add in a width of 100%. We can also do things so we can change these styles together by the semi colon here. And I could do something like a border. So one pick border on make that porter solid black. So this is all within that same property, and we see that right away we get this border around there so it makes a little bit more sense. There. We can tell that this is the contents of that table. We can also add in styling and the good. The cool thing about attributes is you can add them to anyone of your elements, so if I wanted to add it up here. I can add that same styling within the role here, and we don't actually. So when I save this so wanted to illustrate what this is gonna look like, so I actually don't see any change there. And that's because the role itself you can't set a width of 100% on the role doesn't make sense. And border of one pick solid black again. The role is this whole thing over here. So it doesn't really make a whole lot of sense to do it 100%. So you have to cut that back and only apply styling that actually really makes sense. And typically, for something like this, you would be applying that styling on the on the actual active cell. So we see here that the first name gets that we see that the last name gets set and so on, and now we see that we able to add in individual styling for those individual elements. We can update that and change the look and feel. But the downside of what we're doing is that we're adding a whole ton of code in here and really bad practice add those style attributes, even though it's good to try out styling and try out all these different values here and make some updates like you want maybe thicker borders. You can really easily play around with this and make some updates to it and see how they turn out and how they look and so on so you can see that there are a bunch of updates. Weaken do here make do something like eso solid. So there's a lot of different options. But the downside is that we've got to repeat this pasted over and over again if we're applying it for each and every single element, which is just it's very time consuming, very confusing. And if you want to make an update, you've got a lot of code and a lot of attributes to update. So if I want to update thes table headers, I don't like black. I want to get blue. It's gonna be really difficult because I've got to go through every single one. And this is why having styling for the page on page styling as well as CSS is super helpful with in this case. So it's jumped back into our Web page. And let's look at how we can style every one of these elements here. Let's go up into the top of the page, and we're going to create a brand you tag called Style. So open and close that style type. So this is CSS cascading style sheets, and essentially, this gives us the ability to patch into any one of our elements or a whole group of elements and actually make some changes to those elements. And with styling, we've got a number of ways Teoh select these elements from our Web page. So we see that we've got just a whole bunch of content here we saw previously how we can add them style attributes to every single one of these elements, but not really efficient. So let's look at our heading to and let's make a selection of all of our heading twos. So H two curly bracket and now we all want to do is specify the properties that we want, a place that we want each to to hold and how we want to look like. So we saw that we used border before, so let's use that one again. So one pick solid red. Save that. Go back out to our Web page. Refresh it. And now we see that all of our H twos now have the same property. So basically, what we've done is we've taken our HTML code. We found a way to pick out the different elements than have them represented and be able to apply something to those. So you probably look at this and say Okay, well, what if some of these h twos I don't want to have this border I don't want have this color I don't want to have these properties to. And this is where styling gives us a few other additional options. So one of the things that we saw earlier is that we can I d different elements. And with i DS, we can't have multiple elements with the same I d not a good idea. So but with ideas were really able to specify that for birds, Maybe I want some kind of specific background color for just this one particular element within the web page. So let's select out birds same way as we did our hyperlink. So the hash there, the name or the I d off the element, and now we're selected birds. Let's do a background color so we can do background color and let's pick a color for the background. Save that. Go back up to the page, refresh it, and there we go. So this one, we were able to pick it out from all the other elements using the I. D and apply some styling to it. And this way we could have just as easily gone over here and style. Azan attributes and added the background color so this would work the same way. But best practice usually is to keep all of your styling and one area within your HTML code , so that you can have it more readable whenever you need to make updates and so on. So much, much, much better way of representing and updating their styling of your page. So we saw how we can select out different elements. We can even do something where we can do the list items and really easily update those go back up here. We see all of our list items now have that red border and so on. So all we need to do it's like the tag name and we can apply styling to it and selected it from our content. So one of the problems that you're probably thinking of Well, you know, you can select out thes tags. We can select about one individual element within our page. But what happens if I've got some paragraphs where I want to add in some content from styling to and maybe have got, uh, H two here? I won't apply that steam styling. So how do I select those? I want to have it have happened multiple times within the Web page. Maybe one highlighted or something like that. And I can't I can't find it. I can't pick it out between the tags and between the i DS. And there's one other way to select an odd in representation for the elements. And those are classes. So we added another attribute, and we do class. So maybe would do something like highlight. So always try to keep your names meaningful. Eso if I want to highlight that and I want to highlight my dogs here and then just within here. I want to highlight some content as well that I show you how to do that. A swell. But for now, let's just highlight several different tags. And with highlights we do for classes. It's a dot in order to represent those classes, and we're going to do the same. One here is we did a background color and this time was do background color, yellow school, back out. Refresh it and we can see that we can highlight anything with the attribute, the class of highlight and it highlights. But what if we want to highlight maybe a few words, but we don't want to change the way our output over HTML is being represented. So we want to just in line something. Highlight a few words here, there, and we don't want Oh, highlight the whole element. We don't want to create a paragraph rock around it and so long. So there is a solution for that. Within HTML, I'm gonna show you how to do that in the upcoming lesson. 13. 15 Divs and Spans in HTML for better structure: in this lesson. I want to introduce you to bibs and spans, and what Gibson spans do is they allow us to actually break up our HTML content without adding any additional formatting. So let's say, for instance, I want to highlight this word I could add in a span in a span essentially, is an HTML element isn't going to change how my content is getting output so I can put them all over the place. And when I go to the Web page, it's actually not going to be any different. I'm going to get rid of my highlighting here because I want to get I don't want that whole paragraph to be highlighted. I refresh it, and we actually don't know where our spans air located. But the cool thing about spans is that now we can add in attributes into it so we can add in that class of highlight into this span if we want to go into this span or maybe into this span, and maybe this one will just keep as it ISS so we can update. We can select the spans just like we did any other tags. I want to add in a border around there. And I can also add in, uh, for the class, the highlight of yellow. Let's take a look and see what this looks like now. So we see that all of the spans get the border around it because it's just selecting that that styling on that particular class. But the interesting thing here is that we're able to highlight different pieces of content in different ways, and we can really break apart that content. So there is another essentially a container that we can use to really structure our HTML code. A lot of times you might have seen it used, maybe to wrap the entire page. So instead of just using our body, we can do something like did I d rapper or something like that? Close that off and we could wrap a whole bunch of content. You might also see it being used for and you can rot. You can place thes within eso dibs within other dips and so on so I can have another div. And maybe this is maybe this area here represents my header. So I've got my each one here and so on. So I've got some head content here, and I'm just going to add in some additional content here, close that one off and save it. Make it look nice. Beautify. And now let's refresh and we can see that the dibs, they're actually taking up the full with block, but meet most of all, they're allowing us to break apart and look at our content as if it was in pieces. So just like what we looked at with HTML head and body, the dips allow us to really break apart this content into more meaningful sections of our web page. So I've got one div that wraps this one. And now maybe we want to have another div here. Given them I d of mean. So this would be all over main content here. And we just go down to maybe this all of this stuff is within Maine, and I want to have another div here and given an I D off footer and just to add in some content here, make it look nice again. Go back it to our page. Check it out and we see that basically, we've gotten to break apart for content using these dibs Dibs automatically started new lines. So if I was to wrap this one in a div and not going to give this div on I d eso you don't need to specify those attributes. The attributes air not mandatory within dips. And we see that what happens here when this DIV breaks it automatically starts a new line there because the div actually takes up that entire block of code. So it's actually sorry, this one. That's the diff. You see that the div just like the each ones. So they have the same properties as they each one's state properties, paragraphs takes up that whole block of cold. So if I was to actually specify instead of there if I wanted to do Div so we can see what the DIV looks like as opposed to span so quickly. This is still the span. We see that the span Onley contains that particular section so it's in line doesn't break anything. It doesn't look any different until we apply some styling to it. So take a look at what happens to the dibs when we refresh him. We see that the Dev's move all the way to the end. They take up the full available line of code. So this Dave here is taking up that full line. The footer is taking up the full line. We've got the rapper taking up the full line, the header taking up the full line and so on. So dibs and spans essentially used to build that structure within your Web pages and to create some smarter breaking and structure within your content of your Web page. Eso building out your website, building out your structure. Look at it as different sections, different pieces use those dibs. Used those spans to break those apart and better represent that content. And especially when you're thinking applying styling, make sure you've got those dibs nicely laid out and ready to be able to accommodate styling as you added into the Web page. So now one of the thing here it that we're probably looking at and that we should be considering is that we wanted to work as an HTML five page eso using dibs and using spans, especially gives s Oh, this is an older way of thinking. Originally, when we're designing our Web pages, we didn't have additional options, so we would creatives would give them ideas of footers. But when HTML five came along, they realize that Web developers were commonly doing the same thing. We're giving these ideas for the dibs, and they were looking for a more semantic, more meaningful, meaningful words for breaking apart your content. And this was all brought in with HTML five. So with HTML five, we got a whole bunch of new tags that we can utilize in order to better structure our Web pages and the use all of these new semantic ones. A lot of them. They work the same way as dibs, but they allow us to have more meaning when you're reading through that HTML code. So I'm gonna show you and introduce you to those in the upcoming lesson. 14. 16 Semantic HTML5 elements: we saw in the previous lesson as we built at our website. And as we look at our HTML code, we started to use dibs Ah, whole lot. And with each to Mel five. Now we've got some more options and a better naming mechanism within our HTML tax. So let's take a look at what was introduced with HTML five and it is always a good idea to take into consideration these new elements. We see we've got a whole ton of them here. We've got article outside and we've got Footer, Header, and we've got section here. We've got a bunch of them here that actually represent the same thing that we're doing originally within the dips. So basically, from article outside and using any one of these, we can actually restructure our H two males instead of having header here and Div as header , we can update this and I'm gonna just call it better. And so this is gonna make more sense when you're reading through your web page and you can see Okay, well, this is obviously a header from my website and sometimes Web developers, they might use just the header for the head section another. Other times they might have over here, they might have a header. So this might be a header for this particular section. And that's why you still need to keep that idea in there because you want to make sure that that header it also represents different sections within your content. So always be aware that whenever you're using these more semantic html five elements that they're actually reusable. And if you're gonna be risi using them anywhere else within your page, make sure that you keep those ideas if you want to be able to differentiate them. So we saw that earlier that we, when we ever were collect, connecting to our styling. We need to be able to pick out those elements and isolate them. So if we want some specific attributes, some specific styling attached to them make sure that we have a way to identify them. So another one that used gets used fairly often. ISS footer. So a lot of times you might see something like, you've got header footer. If we've got a web page, we've got multiple columns. Here s so we might have something where we've got section here. So this might be one section and then another one s o for a side menus. We might have something called aside, and then this is where our side menu contents would go. So maybe so maybe the outside would go there. This would be another section, and I'm gonna have to wrap this one around, so sometimes you're gonna see article gets used. And so now this article has two sections in it on we've got aside. So you so maybe in here you've got on a no ordered list and you've got a bunch of list items. So by now, let's Tatum new products and so on. So let's go take a look at our web page. Now we'll see what it looks like. So we've we've broken apart blood, smarter, sexual doesn't look a whole lot different. But now we've set up the structure and we're ready to apply our styling to make her website look and feel as we're intending it to look and feel. So that's the main thing here with the new semantic elements to keep in mind that this is a better way, that for us to represent our code and make it a lot easier when we're thinking about her code, how we want to look and how we won't apply all of these different blocks of code when we apply some styling, how we want to look like. So the next lesson. We're gonna take a deeper look at CSS, and we also have forms coming up. So there's quite a lot of information coming up in the upcoming lessons on how to use HTM out. So next lesson, we're looking at forms. 15. 18 HTML forms: in this lesson. I want to show you how you can add forms to your Web pages. So forms are a really essential part of any website. If you want your users to be able to send you some information, communicate with you, then you need to add in a form. So I'm gonna within this project, I'm gonna add in a form right at the bottom with in my Footer and I'm gonna set up just a really basic form here and again. It's starts with opening and closing of form tags. So opening, closing and the content within here is what we're gonna be utilizing for the form. So maybe if you want to do something really simple, like a newsletter sign up or something like that. So you need to get something like the users first name. And typically what we usually do for forms is we add in form. So we've got a number of different form options eso input. So that input type and there's several different input types. As you can see here, brackets is actually giving me a whole bunch of suggestions. Have got button check box. We've got some new ones with html five so we can do color, date and so on. So this one is just a really typical text one. So just open close. And we also need to add in some additional attributes in here. So we've specified one of the attributes that it's a text input field. We also need to specify a name for it. And the reason that we need to specify a name is because we need some way of actually picking up this information and being able to identify this wherever it's being submitted. You can also use i. D. So I d is a way to apply styling to it and so on. If you've got some JavaScript ideas used a great way to go to make that connection between the contents of the form. We also have some additional options. So I just saved that, and we'll take a look at our web page now see what it looks like, and we could see there. We've got our form element. So let's actually coffee all of this pop over to code Pen and placed our form in there. And the reason I want to bring it into Code pen is because I want to apply a bunch of different input types here, and I want to be able to show you right away what they look like eso I'm gonna do a line break here, and you might also want something like the email. So you want to pick up that users email address? So we're gonna do type instead of text so we could do text. It looked the same. But let's do another one here called email. So give it a name and email. So again, you don't have to be really that specific with that and get rid of those ones because I'm not gonna be adding any any styling to this. This is just for demonstration purposes. So now we've got one called email and we see we can type in some text in there and what is missing on this form. So we type in some taxed here, but we actually have no button to submit this form. So I need to add that button and let's go ahead and create another type. So we've got several ways where we can do input. We can do type. And you saw that we had an option for button so we can do an input type button set of value for submit or something like that and close that off so it gives us a button to submit it. But it's actually not working cause it's just the type is just a button. And it's not actually being specific that this is our submit button eso. We need to be able to specify that what we want our button to do. We want to make it submit. So there's a number of different ways to accomplish this, where we consensus instead of a button. What we want this to do is actually submit our form so by default, changes it to submit Button. Even if I was to get rid of the value here, we see by default, the browser knows that this is a submit button so that give it submit. When I click the button, it tries to actually submit the content here. Eso here, let's update the email, and this is where it gets really interesting because because I've specified this as email and I try to submit it. We get this message that says please include the at in the email address and this is new with HTML five because this gives us stability essentially to see what type off input we're expecting. So it checks an ISI is before we submit it, that making sure that the users actually submitting email information in there we also have additional fields. So I'm going to just do a default here, and we've got ones where we can specify the types that we could do something like number, and I'm going to get rid of. That s So we've got a number here. So if I try to type in text in here, it's not gonna let me make sure that I always have a number in there. I can also update this do color. So we get the color picker popping up and these air all brand new with html five. We see we've got a whole bunch of really nice, nice, different types that we can really utilize. We also have ones that previously with HTML five, So we had ones. So I'm going to get rid of that. And we had radio buttons. So these air the radio buttons and typically with radio button should have, too, and one other thing with radio buttons is make sure that it's so If you've got to radio buttons, make sure that the name is the same, and that gives us the ability to have this type of effect where we click on one it cantata Gle between them. It's always making sure that we have at least one radio button. If we're using radio buttons, make sure you have a couple of them. Keep the name the same in order to be able to toggle between them. We have another type here where we can specify that if we need a check box, there's another type here so similar to the radio buttons weakens. Change this into a check box if we wanted to, so we've got a number of different ones. Some of the really nice one here with each team of five. We've got a date. So we've got this default calendar that pops up, and we can specify the date, and that automatically populates it. We saw that we could do email text number we've got you are L. So this is another useful one, because if I try Teoh, it's type something in here, so that's not a U. R L And if I submit it, we get that same error message that we got with the email eso making sure that our text duck we're expecting is actually what the user is putting in s a number of other ones that you might see so we might see text. There's text area, and this one is going to be different than their typical ones. We've got text area here, and the content is actually sitting in between here doing everything, just with attributes. We've got content in here that we've got in the middle and we see the output is being output there. And then here is where we could specify the names. We have a text area or whatever we want to call it, and we see that the output sits in the middle. So this is another type of input where we can specify we have a whole bunch of content we want to pull in, and so on. So, along with a whole range of thes different tags that we can use in these attributes, we also have the ability to add some more specific attributes within our HTML forms. So I'm gonna show you more on this in the upcoming lesson 16. 20 Form Attributes: the previous lesson, we saw all the really cool things we can do with age to mull forms. So this lesson I want to get more specific on the different attributes that are available to us when we're creating our forms. So with forms, there's quite a lot that you can do with them. And one of the things that you can do is you can set some default values. So if we want Teoh set a value off for the first name, so everyone coming in would automatically see this first name of Mike, we can go. Value equals Mike. It's the same thing that we did over here with the input button. So if we don't want to type submit, then we would do value, get this or whatever you want to call it, and we see that that changes. So the value attributes is used in order to change the value of the input, for We can also do things where maybe we want to disable this. We could do disabled, and that gives us the ability to not give the user, not give them an opportunity to actually update the content in there. We can also specify things where we want to be want specify required as well. So this email, maybe we want to do required. So this is HTML five eso When I click it, we've got this pop up here that says, please fill in this form. This another really useful one in h 205 where we're setting that required. So another thing here, in order to keep in mind, is what we actually do with the form itself. So we don't actually know. We haven't specified where we're actually sending this form, where, how we're sending this form or anything like that. And this is where you need to add in some attributes within the form itself. So the action is going to specify where we're actually sending the form to submit docked. And usually you're going to do something where you're submitting it in the server and eso that could actually pick up that data and utilize it. So if we do submit and now we click it and I should actually take this required off because otherwise I'm gonna constantly have to click that. So if I click, this was to save this quickly, we click it and we see that we don't have that you are else. We got to go back there, and that's one of the things here within the form that when we specify where we're going, it actually defaults and sends that page to there. There's another thing that's really important within forms, and that's to specify the method. So with forms we have an option to send, get method and actually within here were not able to see. So I'm gonna create a brand new page place, this foreman here and we'll just say that as as my forearm dot html And now I can go over here and let's go over to my form HTML. Now we see we've got this form here and I click it and we see so it's trying to send it over to submit dot com. But look in the U. R I hear where we've actually specified information that we entered into the form. This is what I meant by what we're receiving within the form and when we use get it, actually places this content from the form into our u R l here within where we're sending the data. If we use post what's gonna happen. So now when I refresh this and now remember, this isn't get anymore. This now is post. So when I click it, we see that we don't get any of that information being passed within the You're right, and basically the difference between get and the Post Post is where you send your secure information. So if you've got passwords or you've got a bunch of data that you want to keep from being within the URL that make sure that you are submitting the post instead of get because guest is not not secure and it's not, it's not. The best way to send data is because it is readable within the U. R I. And if you're picking up from that, you or I, if somebody gets that, you or I, then that actually could get sent over and submitted to the server. So if the server is picking up that information, so use post for secure communications use yet, for if you want that data to be sitting within the URL, and if you don't specify the page that you're sending a to some going back out here on the refresh it and I hit. It s so we just default back to the default page. Or I should say, the current page that the users on so we don't actually go to a new page. We just go back to the same page that we just sent from. And some important part of this lesson is this is why we specify with names, because this is how we pick it up within the server. If we didn't specify these names, we'd actually have no way to be able to pick up the content here. So see, within that you are l there where you can type in some content there and course it needs to be a year, Earl. So let's create a euro here. And when we hit it, we're not actually passing anything over. And that's because we haven't specified the name. But if I change this and if I add a name Teoh to their second, I just call it Earl. Go back out. Refresh this page. Now you're taping. You are l again. And now I too many teas. So now we see that now it's actually passed within the u. R l here up at the top. So always make sure that you do specify the name on this is how you're able to retrieve that data on the other end when you're picking that up, so you work with forms in HTML. So the next lesson we're gonna finalize the course, we're going to quickly go over how we can add in styling, how we cannot in JavaScript and how we can really update our Web page in order to make it more effective and dynamic, using CSS, making it look better and then javascript in orderto odd dynamic interactions that's coming up in the next lesson. 17. 21 CSS files: in this lesson. I want to show you Mawr about how we can work with CSS how we cannot CSS to our web pages and a whole lot more so previously we looked at what we can do with forms, and we saw we can do quite a lot of really neat things with forms. So I'm going to just go back and open up our original index page here. So this is that original Web page that we were working with, and we're gonna take a closer look at what we were working with styling. So going over to Code Pen, which we also had looked at within the course we saw that code pen breaks apart our code into HTML, CSS and JavaScript. And we also saw that if I wanted to, I could connect form. I could do something like background color, and I could specify color here and see that it automatic Tate takes effect. So what is happening here? And also, if I want to include some java script, Aiken, do some quick JavaScript there would see that we get this pop up window coming, and as it page renders that we get our javascript firing off. We get our CSS and the way that this is working with CSS. We saw that we can include it within the same page. But we also saw way, way back within when we're looking at the original source code. We see we've got a lot of links out to CSS pages and we can do it. And this is actually the smarter way to bring CSS into your Web projects because this gives you the ability to actually build out a website and link a whole bunch of pages. And then when you update that CSS file, then it updates all of your Web pages simultaneously because all they are is they're connecting and they're getting their CSS or their styling values from that CSS page. So let's show you how that works. So going back into our source code, let's remove out are on page styling. Save that, open up a new file, paste that in and notice that I'm not adding any HTML files. I'm not opening and closing or HTML tags opening and closing because this is gonna be a different type of file. It's a CSS file, so let's go ahead and save this. I'm gonna call it style. CSS given extension of CSS. And now this is an actual CSS file. Let's show that side bar. And now whenever we save our index page, we go back out here and let's go back to that index page. Refresh it. So all of our styling is gone. We've lost our styling on her page, and that means that we need to hook up and connect to that CSS peach. And again, the real nice part about linking Oh to see assess pages and why it's being done on numbers of Web pages is that now, if I've got Index, if I've got my forum, all of them are linking up to that CSS file. If I update the CSS file, it updates all those pages. How about the output of the pages? So you could, by all means also includes styling so on page styling. So if you have specific styling for this specific page, you could add that in, just as if you had styling for each individual element, you could add it in as a attributes as well. And this is where the order of where you're representing the content it means comes into play because if we want a just stuff on her Web page after the styling has brought in, we put this style after we linking up to the style sheet. If we want to do it before then, which typically isn't done, then we would do it before. So let's set this CSS and this is a self closing tag, and we're specifying all of those attributes the same way that were doing linking out. We're using H ref linking it to a style sheet. We do R E l to specify that this link is a style sheet. That's what we're expecting. Go back out to the page, refresh it, and our styling is back. And now, whenever I opened up this, I can update the styling. I can update the colors and we can see that when I update the page, it's actually updated and gets reflected across all of the pages linking to it. So the next lesson we're gonna show you and we're gonna briefly talk about what JavaScript is and how it could be added into your HTML page that's coming up in the next lesson. 18. 22 What is JavaScript: so much like we could bring in external CSS content into our Web pages can bring in JavaScript and the same way that we did. JavaScript weaken do CSS. Let's open up our editor and let me show you. So basically, with CSS, we linked out to a style sheet Well said Option to use our current. Our current on page styling is the same thing with JavaScript. So if I want to link out to a JavaScript file, I could do script and I could just take pain. The script source. So this one, interestingly enough, works like images were specifying source, as opposed to the styling that works like the hyperlinks. Eso specify the source file and let's create a source file so we'll just call it script. So JavaScript files are Js files, and what JavaScript does is it gives you the ability to create dynamic interaction within your Web content. So when you look at your Web page, you've got three basic founder fundamental languages that make up every single Web page and that the browsers render out that content from So you've got your HTML, which is your overall structure and your content of the Web page. So everything that's visual and everything, everything that the user is able to consume within the Web page. Then we've got styling, which allows us to customize the look and feel of our Web page. And then we've got JavaScript, which allows us to create dynamic interactive content, interact with their HTML elements and a whole lot more so we can bring ah, script file in and you'll see also online. There's a number of libraries, and this gives you the ability to bring these libraries into your projects and use JavaScript. Now, if you want to use JavaScript within your page, you don't always have to link out to script file much like what we did with CSS Weeks and create the tags script and then within here we can do so. This is just a simple alert within Java script that does that little pop up thing. I'm not going to get too much into JavaScript. I just want to show you that how to bring javascript into your pages. And as you get comfortable with HTML, then you move on to CSS as you're comfortable, CSS and HTML then move on to JavaScript, so it's open up our web page and I'll show you how we've got JavaScript firing off. And I can also create a brand new javascript file. So going over to here, I can copy that script content over to that page. And again, remember, I'm not specifying opening up that HTML tags because this in itself is gonna be a JavaScript file. So we're gonna give it a JavaScript extension Js. And now that we've linked to it like we did with the style sheet, let's refresh it. And we see our JavaScript still fires off as if it was on the page. Works the same way, just like the CSS. So what? You can run it and have it function as if it was on the page. And again, the benefit of linking out to this external file is that you can really easily bring this functionality across your tire website. Eso doesn't matter how many pages you have. If you link to the job script feeling to the CSS, you can utilize it within your web page. Now, of course, with HTML with javascript with CSS, it takes practice. So I do encourage you to take a look through the source code. Take a look through the different lessons and open either open up. Get your own editor. Try it out on your computer. Try out those HTML files within your browser, or you could go to resources like Code Pen and try out different HTML CSS and JavaScript and see what you can make happen with these with these languages and always a great place to start is to develop your first HTML template. Start again with just that basic structure. You've got your HTML opening and closing. Tax your head opening, closing body and opening and closing, and then try to add in content and add more and more structuring until you develop your website as you're expecting it to look and then add in that styling to really get that look and feel and that customized, customized display off your website content and then, after you're comfortable with HTML and CSS, then you could look into JavaScript and JavaScript is excellent way to provide additional functionality for Web users 19. 23 HTML course introduction: welcome to our introductory course about HTML. My name is Lawrence, and I'm going to be instructor for this course. I come to you with over 18 years of Web development experience, and I'm excited to have the opportunity to share my knowledge with you. Within this course, I'm going to be walking you through the fundamental core concepts of developing a website. And that's HTML. I was showing you how you can create HTML Web pages really easily and quickly. We're going to start by introducing you to the basics of HTML. And I'm gonna show you how you can build out your own HTML template in order to structure your each to Mel Cord. And we're gonna be going also into building out your own HTML five template, discussing Maura about HTML five. What it is, how it's you used and how to develop content smarter. Also looking at basic structuring of your content so you don't just have one big blob of content. You can break it apart with headings with paragraphs with line breaks and so on. We're also gonna be looking at how we can use lists in orderto list out content, so it's more consumable by Web users. Also the core fundamentals of websites and how we can use hyperlinks linking out to external pages the pages within my website and also to bookmark pieces of content or sections of my current Web projects. Also looking at images, images are fundamental for any website. Users love images. I'm gonna show you how to bring those images into your Web pages. Also looking at dibs and spans how we can better structure content, how it could bring in styling CSS into our Web projects to get a better look and feel also how html five more semantic elements and html five like headers, footers and so on. Also, HTML forms all the different fundamental types off. HTML forms how we can apply attributes to get even mawr power out of reach to male elements and then also how we can build out our entire Web page and how we construct Chur our web page and our website content. So all this and a whole lot more is included in this course. Also, the source code and resources have been gonna be using within this course as well are going to be included so that you have everything you need in order to get started creating HTML code. So when you're ready, let's start creating some HTML code and work through the lessons. Also, try it out for yourself and see what you can make happen with HTML.