Quick Start for learning HTML basics | Laurence Svekis | Skillshare

Quick Start for learning HTML basics

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 17m)
    • 1. Promo

      1:26
    • 2. HTML course introduction

      2:36
    • 3. Introduction to HTML

      2:29
    • 4. HTML editors

      4:13
    • 5. HTML Structure

      3:19
    • 6. HTML course elements vs tags spacing p tags

      4:10
    • 7. HTML course comments

      2:47
    • 8. HTML course Line Breaks nesting elements

      3:18
    • 9. HTML course headings

      4:14
    • 10. HTML course hyperlinks

      8:10
    • 11. HTML course how to add images to HTML pages

      6:14
    • 12. HTML List Types

      8:59
    • 13. HTML Divs Spans new HTML5 structure

      10:31
    • 14. HTML course use CSS turn your HTML into a webpage

      10:42
    • 15. Apply what we learned in the course

      3:26

About This Class

Quick Start for learning HTML basics

aaa1b2fb


Simple example of HTML tags and how to use them
Learn to create a website from scratch with this simple straight forward HTML course. Apply common HTML tags you need to know in order to be able to create websites. Perfect for beginners who are new to HTML and want to learn to use common HTML tags to make websites.

Start from scratch learn how to create a basic HTML5 structured website.

Top resource to get you going quickly
HTML5 web page structure
elements and tags
HTML spacing
using comments
Line break and how to nest elements
HTML headings
Create hyperlinks to connect content
add images as needed
how to work with lists
Using Divs and Spans in HTML
New HTML5 elements
How to transform your HTML code with styling
All top resources and source code from the course is provided so you can practice working with code right from the course.

I am here to help you learn HTML and ready to answer any questions you may have. I have over 15 years of real world web development experience, which I will share with you within this course.
HTML is an in demand skill and used everywhere.
Nothing to lose, there is a 100% Money Back if you don't like it
Want to know more, what are you waiting for take the first step. Join now to start learning HTML today.

Transcripts

1. Promo: learn to create a website from scratch with the simple, straightforward HTML course perfect for beginners who are new to HTML and want to learn more on how to use common HTML tags to make their websites start from scratch. Learn how to create a basic HTML structured website talk resources to get you going quickly . Each team of five Web page structure discussed HTML tags elements spacing how to use comments, line breaks, how to do nesting of elements, each two mil headings creating hyperlinks to connect content. How to add images, how to work with lists What dibs spans are used for HTML and brand new HTML five elements. And then finally, how to transform your HTML code using styling into an actual website. All the top resources and source scored for this course is provided so you two can practice working with the code that is provided within the course. I'm here to help you learn each to Mel and ready. Answer any questions you may have with over 15 years of real world Web development experience, which I am here to share with you within this course, HTML is an in demand skill. It's used everywhere you've got nothingto lose. There's 100% money back guarantee. Want to know more? What are you waiting for? Take the first step. Joined now to start learning html today. 2. HTML course introduction: welcome to our quick start introduction to HTML, introducing all the HD Mel B six that you need to know in order to create a website just like this. So this is actually going to be the end product of all of the different HTML code that we're going to look at and we're gonna learn throughout this course. My name is Lawrence, and I'm gonna be your instructor for this course. I've been a Web developer for over 15 years. I've worked on hundreds of websites and developed many Web applications as well. So I will be walking you through how to start creating websites using HTML and then applying some CSS toe, actually get a nice look and feel to your HTML content. The first part of this course will introduce you to HTML structure. So how to set up and structure your basic HTML page, including HTML tags heading tags title introduce you to meta us also where to place styling information, and then we're gonna talk about all the different elements that are available in all the different tags that are available within HTML. So we're gonna look at all of the different common tags that would be using on a regular basis everything from paragraphs to line breaks, how to include images, how to set up headings for your website and your web content. Also, we're going to discuss hyperlinks how to set up hyperlinks had include them within your code, how to create lists on ordered lists and ordered lists. And as well, we're gonna be looking at how to apply styling and apply various attributes to HTM a court . Then we're gonna look at spans and dibs, and we're gonna look at the new HTML five Web page structure where we're using specific each to melt tags to contain content information and helped structure our Web pages better . And then, lastly, we're gonna be plying CSS to everything that we've learned in order to create a full and complete website. All of the source code and resources are included within this course. In order to help you better walk through and learn the content being presented in the course. So when you're ready, let's start making and writing some HTML code together 3. Introduction to HTML: welcome to our introduction course to HTML. HTML stands for hypertext markup language, and it is the language of the Web. So here we have an example off what standard HTML code looks like. And within this course, I'm going to be running through how you can write HTML code as well create Web pages and how to structure your Web pages so that they're properly structured to be read through browsers. Essentially, since its inception, there have been five different it orations of HTML. And if you go to w three dot org's, so this is gonna be the main consortium that controls HTML. Eso in this got all that different information here about HTML. What's happening with HTML? What's going on next? Eso They've got some ah blawg entries here and have a whole bunch of information about HTML and how it works within the Web. And also, this is going to be a good reference point if you do want to find out more about HTML as well as try out and make sure that you're compatible on HTML. So there's gonna be some options here in order to do some testing and to find out more about the different standards that are accessible online. If you want to find out more about the history of HTML, they've got a good background here about how HTML was started. They've got the founder here, who first nature of tea, Tim Berners Lee. And he's essentially one of the founders of the or the inventor of the World Wide Web. So there's some more information about him here on swell. And then it's got the whole history of HTML and bring it all the way up to where we are today and as well, some samples about how to write HTML, which we're going to be discussing in upcoming lessons. In the next lesson, we're gonna be looking at common tools to be writing HTML and how to create those HTML Web pages. Get them on the Web, and all of that is what we're gonna be going through in upcoming lessons. 4. HTML editors: If you go to any Web page, you can open up and check out the different source that's available on the page. So on a Windows machine, it's control you, and we can see that it's comprised of all of this code. And this code is what gets read by the browser. And the browser interprets this coat and understands how to output it onto in a more readable format for Web users. So this is what is the card? That what are the contents of a Web page and you can see? Predominately? It's HTML. There's also some JavaScript and also some styling, so we're gonna be going over and covering the HTML portion of Web page code within this course. And one of the first questions that people always ask is Okay, so I understand what HTML is. But how do I create that html code how to actually get on a Web page? And there's a few common tools. So one of the most common tools on Windows machines is to use note pad plus Plus. This is an open source downloadable editor that you can download and create source code with and as well. There's a lot of different editors out there, So you probably have something on your computer right now that you can actually write source code in. So when you need a place to write your HTML code, you can look at no pad plus plus. And for Max, one of the most popular editors is gonna be text Wrangler. So these air both open source and free to download. Ah, and you could download them on your computer and get going right away with them. They're really easy, straightforward, installs and what it is. It's essentially a text editor. It's very straightforward. I've got note pad opened up because I'm on a Windows machine and we see it's a very typical set up where you've got these tabs here at the top when you open up new pages and you have the ability to write something and then save this file. So right now I've created a default page. I've called it index dot html. So when it comes to finding a starting point for your Internet, so if you just go to a domain like note, note pad, dash plus plus start or it has to have actually a starting page So it's probably a collection of files here on the root directory and the server. The way that it interprets it is that it understands that index dot html is a default starting page for your domain, so you don't actually have to specify that starting page. The server is smart enough to be able to serve up that starting page index dot html. Sometimes you might as well also see it as default dot html. So, typically, indexes used most commonly. If you're using scripting languages, you might see something like index dot PHP or something like that to indicate the starting page. But since we're writing HTML code, we're gonna name it index dot html. And the good thing about HTML pages is that they can render out directly within your browser, so you don't actually need to have any hosting machines. Server machine running with no paddle you have to do is go run and select the browser that you want to launch it in and we can see that we launch out that index page and it renders out in the browser, just as it would on the server, because again, this is gonna be html and HTML CSS and JavaScript. So these are the three front end languages. Eso they all render out through the browser, and they don't need a server side scripting, and we'll take a look at Wrangler as well. So text Wrangler. So it's very similar to the way that note pad operates. And again, you could just go over to the website and download it and get started creating some HTML code, which we're gonna be running through in the upcoming lesson. 5. HTML Structure: HTML pages are structured with head, section and body section, and all of the contents, including head and body, get contained within the HTML tanks. So what it is, it's a Siris of tags opening and closing tags as well of self self closing tags, which we're also gonna look at later on in the course. And this is how HTML essentially is structure. So I'm gonna go ahead and open up my editor and go over the basic structure of an HTML page . So essentially we have an opening and closing HTML tag. So these are the different HTML tags. And because we're creating an HTML document and we've got HTML contents in here, we indicate that by starting up with HTML and closing html and then the idea is that anything in between here, this is gonna be part of that HTML document. One thing we do need to do and what's always good to do is to specify the document type. So now, with HTML five, they've really simplified ability to set specified doc type. All we have to do is doc type html, and this will let the browser know that this isn't html five document and it will be able to treat it as such. Now with browsers. They're actually going to be smart enough to render out, ah, Web page or HTML document and render it out as actual visible content within your browser. So this so even though they are smart enough to do that, it's always a good idea to actually structure your website within this type of format. So if I was to just remove all of this and if I type hello, a little world, save that and I go out to my Web page that I had created and a refresh it, we see that hello world actually gets rendered out. So even though it is able to render that eight, this isn't a proper way of formatting and structuring our website. So we do need to go back to what we had earlier where we had these opening and closing HTML tags and then we've got ahead section here, and this is where all of the head contents get placed for your HTML page and then also body and body is typically where all of the visual content goes. So if I want to type out hello world I should be placing it within body like that, saving it going back and refreshing it. And we see that there isn't actually anything different that's being rendered out. But when we go to the page source, we can see that it's actually structured properly. And eso this is an HTML typical HTML document structure where again we declare the document type. We've got opening and closing HTML opening and closing head. So this contains all the head contents which we're gonna look at in the coming lesson. And then this part contains all the bodies of all the visible contents that you actually want users coming to the website to be able to see. 6. HTML course elements vs tags spacing p tags: So when we refer to HTML, we talk about elements. We talk about tags. So I just want to quickly explain the difference between elements and tags. And essentially, it's going to be the same thing. So tag is something like P and then closing p tags. So these air gonna be paragraph tags and it actually becomes an element when it encompasses an opening tag, closing tag and content. So all of this, together with the content in the middle, this is gonna be an element. And then these air the tags for that element. So that's the difference between elements and tags. Often times you're gonna hear them being used interchangeably. So there is a subtle difference, but not much of a difference. So when I refer to tags such as paragraph tags and essentially, this is how you create a paragraph tag, paragraph tags are really popular tags. Within HTML, they get used very often, and there they have opening peak and closing p and then the content in the middle. This is what gets applied to those tag preset styling cues and anything in the middle. Here is what gets applied to that. So if I actually do. Paragraph, paragraph, paragraph. I go out and a refresh my page. I see that I've got three paragraphs here and I do have some default formatting that comes along with this paragraph. First of all, when I look at the code, I see that. OK, well, it's only hello world, and I don't have any content beside there. But although it's taking up a totally new space, a new line, I've got spacing in the middle there, Not right one on top of the other, even though I don't have any spacing in between here, and this is all coming from the paragraph type. So even if I do something like this and I refresh it, the result is gonna be the scene. And this is another thing. Important thing to note about HTML. And when you're writing your HTML pages, all of this white space that I'm including now. So even though it looks really awful here within my editor, when I refresh it, we see nothing changes. And that's because the way that the browser renders out html code so it doesn't when it sees spacing, it defaults this toe one space. It doesn't read the spacing in between the tags. So if there is no spacing here in between there it's not gonna providing the additional spacing. And if their spacing within the tags within the element, it's only gonna default it to one blank space and also, additionally, it won't see any of this line break stuff. So if I have something So if I have something like this, do you think that this is going to be any different now when we look at it, I see that I've got a line break I've got Hello. I've got no space and I've got world down here at the end. So this, I believe, is the second element S o Do you think this one is going to change? Do you think I'm gonna lose my space here? Do you think it's gonna keep a space in there when I refresh it? So when I refresh it, we see that in fact, it does keep a space. So as as well as defaulting for all of this additional space in from spacing, defaulting on Lee toe one space, whatever you do a line break start a new line. It's still defaults that that spacing there, So we see that whenever I drag it down, it adds in that space, even though I can't actually select that space. And when I go back, there's no space there by default. It's still adding that spacing in within the browser when it's rendering out that html file . 7. HTML course comments: when you're writing HTML code. Occasionally you do need to add some documentation, some comments within the code. So when you go back and you reference that later, you can better understand why your code is laid out like that. So if I went back to this code and I see that I've got Hello World listed three times so maybe six months down the line, I might be looking at this this particular HTML file and I may be wondering, Why did I write Hello World three times? That doesn't make any sense right now. So what you can do within HTML is add in Commons. So we see here that within style, we've added in a comment we've added in JavaScript. We've added a comment so we can do the same thing with in our HTML code, and this really helps suit with documenting what you're doing and what why you're doing it at the time when you are doing it and allows you to be able to reference it as well as allows other developers to take a look at that and easy understand why certain things are done in certain ways and as while commenting is really good. If you wanna add in something later on as a placeholder or something like that, and comments actually aren't going to get seen within the browser. So the browser does not render out comments and comments could be placed anywhere within your HTML code. So I'm gonna write. This is a comet and I just right, because and then to close that off, we close it off in the same way, the two to minus signs and the greater than sign. So we opened up oclock comment with the less than sign explanation. Mark two dashes. We right in our comment contents here and additionally, if we have multiple lines here, so sometimes you're going to see comments written like this. Ah, and again, this is for readability. Seek eso, however, works best for you that looks best within your code is how you can structure and write. Your comments and commenting can be done as little or as much as needed. And essentially, it's another way to add some additional information not for the users coming in, but for the developers or anyone that's reading the code to be able to better understand the purpose of that court. At that point, 8. HTML course Line Breaks nesting elements: in the previous lesson, we had looked at paragraphs and this lesson I want to look at what if you just simply wanted to bring world to a new line And you don't want to have all of this default formatting for a new paragraph. So you essentially, you want to write up Hello world, and maybe I'll just coffee some content out here and we refresh it. We see that's all on the same line, but they are separated by paragraph. Now let's say I want to bring this hello world below here, but I don't want to start a new paragraph so you can do this by doing what's called a line break. And this is another one of those self contained tags that you don't contain any content within. It s so all it is is helping the browser understand how you want to structure your Web page content. So now, essentially, when it comes through here reads through the paragraph, it sees line break here, and it knows that this is the time to place another line break. So when I refresh it, we see that now this particular line has gone to a completely new line. So even when I resize it, it's always going to be sitting on a new lying. And this is what the line break does. Structuring, helping structure your website and how it's going a bit output and rendered out in the browser. Now it's also important to note that what we've done here is we've placed a tag inside of an element, and we can also do elements inside of elements. And we can continue to nest eight all of these elements within them and these air going to contain their own set of properties. So that initial parent paragraph is going to contain its set of properties and styling. These paragraphs within here are gonna retain additional paragraph styling that's gonna be contained within that parent paragraph. So when I refresh it, we see that there isn't much change with what's being output here. But the difference is gonna come when we apply some styling to it, or if I want to write another section here, that's completely the same. And we see that this this now is the parent, these air paragraphs within the parent and we've got our line break there, of course, and then so these air going to be separated out by paragraph. So if we're using different HTML tags other than the paragraphs, we'll probably see a bigger difference here and similar to if we're using the line breaks. So if I had something, a line break and I had one, and to when I refresh it, we see that the paragraph styling gets applied. So it's got that buffer here in the bottom buffer here in the top, by default. And even when it's a nested within another paragraph or within another set of tags within an element, we can see that it's still buffering that top and bottom. And so these are the default styling cues for paragraphs. 9. HTML course headings: So when we're looking at typical websites, so we don't just have all over content the same size, some of it you might see that's Boulder. Some is bigger standing out. So we see that we've got these headings that stand out more than the rest of the text, and it helps us better understand the user. Better understand? Okay, well, this has to do with website, Web, Web design and applications. This is web of devices, and when I look at the source code here of this particular element, we see that it's an H to tag. So these air heading tags. And if we go up here, we see that this a swell. This should be an H to tag as well. So all of these are what's called H two tags on. And we see the basic structure of the Web page that anything that's highlighted out, uh, we've we've got our main heading here is H one. And then from there, we've got the subheadings here that are H two. So initially we can see that this Web page wants standards to stand out the most, and then these aren't as important as standards, but we do see that there is some importance in some way to those. So there are essentially 36 different levels of each tanks of heading tags, and each one of those levels shrinks the size of the text and makes it stand out less and less so, going all the way from one being the highest, the biggest size, and then going all the way down h two, h three and so on. So if I had some subheadings under here, I would set them up as H threes. And then if I had subheadings under doors under there, I'd go H four and so on and so on. And that's the way that we structure out important content within our webpage. And typically you're going to see for Seo purposes and standard way of structuring out your Web page content is that you've got your title here and then also on the page. You really highlight that title well, with the H one tags. That's a typical way of adding in heading tags. And this is one of those things that it's always a good idea to highlight certain pieces of content. And then this is how you would be able to do it within your HTML court, so don't overdo it. You don't need to highlight everything. You only want certain pieces of text to be able to stand out and become more visible. So I'm gonna just right heading one. And so this is going to be a typical element where I've got my opening and closing H tags. And let's say I've got some headings below here, So heading to and then this would be an H two. And of course, we can go all the way down if we wanted to. So this one as well is gonna be an h two and just show you what that looks like. So when I refresh the page, we see that it's got incrementally smaller than H two s o heading one really stands out because this would be the main content of our Web page, and then heading to would be the heading for this particular section and so on. This would be for this particular section. And just to illustrate the difference between all the headings as we progress down some that's doing a quick copy and paste there and I'm gonna change this to three, Change it to four and we can go all the way down to six. So six being the smallest of the heading tags and you're going to find that anything really below three very rarely gets used. You see very few Web pages that go beyond the first top three headings. But just in case you wanted to know, this is gonna be the difference about the headings and the sizes. So I strength us back down to 100%. We can see we can better understand how the headings air being presented within our Web page content. 10. HTML course hyperlinks: Another popular tag that almost every Web page is going to contain is going to be links. So links are essentially what the Internet is all about. You can go to any website, any Web page, and all you see is a bunch of different links and links are just that. They actually linked together all the different Web pages to create a new entire website, And this is how users that are coming to the website have the ability to navigate through the website by clicking the links and getting to the next page that is suggested here within the HTML code and to create links within your HTML code, we use the A tag, so this is also known as the anchor tag or the hyperlink tag eso if I want to hyperlink a particular piece of my HTML code. So let's say I want to hyperlink one of these hello worlds, and I want a link it to another Web page. I started out by the anchor tag and then closing off that anchor tag. So this is another. Now it becomes an element because we're opening and closing, and the difference here is that there's gonna be two pieces of information that could be required for this hyperlink. So not only do we need to know what text were hyper linking, we also need to know what's supposed to happen with this hyperlink. And that's where H ref comes in. H ref is gonna be where we want to send the user. So this is gonna be the Earl of the Web page or the Web site or the link that we want to send our user to when they click Hello, World. So these could be either internal or external links, so you could link to something like http Google. And now whenever the user clicks this link, it will bring them to this website or we can link Teoh an internal link. So I give you an example of that in the link down here, and I'm just gonna link to the same Web page. And so now when I go out in a refresh it, we see that I've got these hyperlinks here, so they actually are underlined and something went wrong there. So I'm just gonna quickly take a look at that and see eso. I didn't actually close off that hyperlink That's why I've got that underlying underneath all of that additional text that I had there. So I only initially wanted the hyperlink under this one spot. But when I didn't close off that that a tag then what happened is that the browser automatically thought that l This text needs to be hyperlinked to index dot html and it tried to correct that error by automatically selecting everything as Hlinka ble. So I'm gonna refresh that and that looks a bit better. Onda also weaken notice too that hyperlinks by default. So if you don't have any default styling to them, they get underlined by default. They're gonna be blue. And if it's a link that we've been to and if we visit it it remember this one is linking back to the same index page. Eso If it's a link that we've already clicked or were visiting it, then it's gonna be this purplish color. So when I click this one and we go to the website that it's bring us two, which is gonna be Google Now, when I refresh this page, the next time that link is gonna be purple because now that we've visited it So if I refresh the page eso that we've already clicked it. And the reason that this currently isn't going purple is because we're still working off of this local file, so it's not actually cashing it into that. But typically, if you had this Web page uploaded and you click the length and it would go purple, no additional to that. Sometimes it's not always ideal toe. Open it up in the same window, such as this case where I click it. And then I was have to click back to go to that same page that I started it with eso. You do have some control over that when you're typing your HTML code. This is just brackets that I have open as well has opened up to the same page. This is another example of another editor on, and it's a little bit more colorful. It's got a lot more options here, and it allows us to, uh, html code and various other languages as well. So this is brackets I Oh, this is a free downloadable editor and as an alternative to using note pad or any of those typical text editors, is a really good alternative, But typically you might want of white when you're starting out using something like brackets because it helps you set the cold. It does thes opening and closing of the tags by default. You consider to do that automatically, and it's essentially it guides you along the code. And the disadvantage to that is, of course, that you don't. Actually, I have to take the time to do it properly, to close it all off, as you do within note. Pad eso. That's one of the disadvantages, because it can actually be a hindrance to learning eso if you are learning and starting out . It's generally better to stay with the really straightforward text editors until you get comfortable with the code and you want to improve and increase your speed with writing the code. And you could switch over to something like brackets io in the hyperlinks so I can go down to here. And I had to just show you an example in brackets. So now we can go into our hyperlinks and we can specify where the target is gonna be. Eso target is gonna help us indicate what we want to do with the link So when hello world gets clicked, What do we want to happen? And typically So by default, the link is gonna go to self. That just means that whenever we click the link, it's going to reload the new content, the new webpage within that same open window in the browser. But if we want to open up a brand new window, we would indicate blank. And what this is going to do is this gonna open entirely new window? So typically the way that we do that whenever we've got external links, we link out blank to them S O. That opens up our new window. And it doesn't actually take the user away from your Web, your own website and your own Web content. But within your Web page. So if we're linking internally, we usually keep it itself because we want users to be able to navigate through the website without having multiple tabs open. So just show you what the difference here is gonna be when I refresh it. And if I click Hello world. We see that we automatically go over to Google, and if I click the link, the hyperlink in itself, it's gonna try to. It's going to simply reload that index page, and it's not gonna open up a new window. But alternatively, if I did set up blank here, which I can do really quickly and refresh it now, every time we click hyperlink, we're gonna open up entirely new window. And as we can see, this isn't ideal if you're trying to keep people within your some same Web page. 11. HTML course how to add images to HTML pages: so additional to hyperlinks. Something else that's very common on websites is the use of images, so we can see it over here at W three or we've got an image there, and if we go and inspect that, we can see that's using this image tag. It's got the source there. It's got a width and a height, so it's got some additional attributes. So in this lesson, we're gonna cover off attributes as well as images and adding images into your source code . It's gonna be relatively easy and images and the image tag is gonna be another self closing tag. So all of the information that we need to know when the browser needs to know in order, Rend wrote, That image is gonna be contained within I M. G. So as we see there, there's no opening and closing of the image. It's self closing on, and then it takes its information kind of like what happened here in the hyperlink where we've got our H ref where we're actually going to. But we do need to list a source for the image, and that's what we've got over here, and then the height and the width, and the Ault are all additional attributes that are available. So I'm going to go over to Loren Pixel and this gives me. This is a website that allows you to create dummy or get dummy image paths so I can use something like this as a placeholder for my website, and I could simply copy it out. And this will allow me to set dummy images essentially kind of like Laura, um, text, but with images. And if you're not familiar with what Lauren text is, it's a Lauren text is again. It's a police holder text. When you're designing your Web site, you typically don't wanna have or you do wanna have the that place taken up that standard formatting. So over here I've just been writing in some dummy text. But if I didn't want to go through the process of writing in this dummy text, I don't want all of this Hello world and copy and replaced. And if I actually wanted to look like actual text, something different content on my Web page, I would use something like Lauren text in order to place hold that text. So let's get back to our images and I'm just looking at right now where we can add in an image so I'm gonna nest it just under here within those paragraph tags. And as we can see, the format is I M G. And it's a self closing tag, and then we need to list off a source. So I'm gonna use the same source that I just copied out and provide this as a source for my image. And now when I go out here and refresh it, we should have an image on our page, which we do now. We saw that by default or not by default, but it's always good practice to include all tags. And all tags are Anat tribute that you set within your image, and this is going to be something that's going to show up if that image doesn't render out or if someone is using a screen reader and it obviously can't read what the image contents are. But it can read what the attributes all tag off. The image tag is going to contain, and from there it's going to be able to decipher better what is contained within that image . So, for the most part, always use all tags, and we also see that we've got some additional attributes there, so you can set this via styling as well. Or you can set it as an in line default attributes for images we can set our with and height, so to set a width. So this is going to be based on number of pixels that's going to go across ESO by default were 400 by 200. So if I wanted to set it to be smaller, I can set that default with the B 300 now. The interesting thing about HTML is that if you want to keep those same dimensions, you don't actually necessary. Need to specify the height because as long as you specify either the width or if you want to specify the height and have the with dynamic, you can do that as well. And the browsers are smart enough to know that you want to keep those same dimensions. And essentially, it's just just recount Lee that those dimensions to be to fit in those dimensions that were specifying there So it'll take the width of 300 it will re calculate the height to 150.286 And, of course, if we went into our editor and if we set ah, height. So if we set a height of 300 it's actually going to distort the dimensions of the picture. But it will be able to set and force it to go to be 300.300. So you see now within our Dev Consul here, we've got 300 by 300. That's your options for when you're setting images, and that's how to add in additional attributes and attributes. We've used them before as well up here in the meta tag, where we were setting attributes of name and content. So all of these different tags can contain their own set of attributes and attributes can be anything from styling two additional information that would be required or typical for that for that tag to contain and as well we saw it in the hyperlink, where we've got two attributes that were setting so setting the you are l that we want to visit when the link gets clicked and as well how we want the browser Teoh render it that link. So whether it's a new page or within that same page, 12. HTML List Types: in this lesson. I want to show you how to make lists on ordered lists and ordered lists in HTML. So we're gonna go ahead and open up our HTML page and then within the body section. This is where we're going to create our first list. And the first type of list that we're going to create is going to be on a new ordered list . So there are two different types of lists, and this would be an example of a Nord erred list and the way that you can create lists you first started with the UL tag. And that indicates that the contents between the U. L opening and you all closing tag is where you're going to contain your list items and to create list items. You create list items with the L I tag and then the contents off that particular element. So I'm going to create a list. Maybe that starts with first and then close off that ally tag. So these elements here are going to become the list items. So I've got Ally one 1st 2nd 3rd and we can continue to add in list items as needed. So we go to our Web page, so I gotta simply refresh our index dot html page, and we can see that automatically. The an ordered list uses bullet points, and it lists out all of the list items that we've listed out here and you'll find typically that lists a Norden lists are used for navigation menus. They get styled in order to make it look more like a navigation menu. But you're gonna find lists are used quite often within HTML. So you do also have some options when it comes to styling and styling your list items. So if I wanted to style it, so I'm gonna add in the attributes style. So this is CSS that I'm adding in here, and I can set up list style type. And then here I indicate what type I want. So a lot of navigation menus you're going to see none being used. You also have an option for the default for the circle or the disk. You can also do square as well. So you do have a few different options for the different styles of your list items for your bullet points. So now when I refresh that we see that we've got now square items within our list. So also, along with a new ordered lists, we've got what's called ordered lists. Now, ordered lists are going allow you to list items in a role either numerical, alphabetical, using Roman numerals. So several different options for different ways to present ordered lists. So I'm gonna open up our editor again, and I'm going to create a new ordered list, So this is gonna be different than the an ordered list. But it's gonna still contain those same list items in that similar type fashion and set up so similar to what we did with the UN ordered list. I'm gonna set up a tag for ordered list and closing tag for ordered list. And then within here is where we're gonna list out all of our list items. So the same thing that we did over here, I'm gonna take them and list out 1st 2nd and third. So this is just gonna be a default ordered list. We're going to go back out and refresh your page, and we can see that our list items actually are getting numbered with actual physical numbers instead of the bullet points that we had in the an ordered list. So that's essentially what the differences between using a Nord erred lists and ordered lists is that we have the ability to define the ordered list information as opposed to just pointing out bullet points and listing them out so additional to the default type, which is numbered with numbers, we can list a type and notice that this is a default attributes in ordered list, whereas a nor did list we actually had to use styling attributes, which we could use us well for the borderless so we can essentially turn on ordered list and to similar format to on a new ordered lists. When I refresh this, we see that now they look the same. And this is one of the really cool things about using CSS that you have all these different wonderful options to adjust the way that you're elements are presented within your Web page . So for this example, I also want to show you that ordered list has the default attributes of type and within type. By default, it's gonna be one. So this is going to mean that we're starting out with by default at number one and listing from then on. So this is what our default is, And we also have the ability to use alphabetical so we can use lower case A, B, C, and so on. And also we can use an upper case A and this will present it with letters, uppercase letters and addition to that within the default types, we also have the ability to do Roman numerals. And this is indicated with on I eso again, it could be upper or lower case I. And when we refresh it, we see that automatically they take those properties of those list items. So, actually, if I was to duplicate this on our content within these list items, so it's not gonna be it's not gonna be incriminating here because we haven't set that up. But we're going to be able to represent all the different Roman numerals going all the way up and continuously incremental. And also, when it comes to ordered lists, weaken specify what number it's going to start with, and we do that by indicating start. So if I want to start at five, I could do that as well, and I could switch that back to America if I wanted to, and so on. So now we see that because we're starting with the Roman numeral five and we're incremental all the way to 10 11 12 and 13. And so so with list items, we also have options for styling. So I showed you over here how we can apply some styling Teoh a Norden lists, and if want to apply styling to it, we can indicate UL to select that particular tag and then apply the styling to it. And we can bring all of this styling up into their. So this is presented in a much neater fashion. And what this will do is this will set the A Nordling ist list style type within CSS. So when we refresh it, we're still looking at the scene set up and as well, I did mention that typically you're going to see a new ordered lists used in navigation menus. And if we look at this week and say, Well, this doesn't really look like a navigation menu because I have all of these bullet points and it's horizontal. So what we would do is who would indicate that we have list style type to set that to none . Set a new ordered list list items. We have to make sure that we've got our selectors brought proper, and if you do have it within a navigation menu, always make sure that you're selecting not just the an ordered list list items, but you're also selecting that specific element within your HTML. So we would set how we're doing the display, and that's indicated by display, and we would set that to be in line. So now when I go out and refresh it, we see that now would look more like menu items. And in addition, we could continue to update that where we could add some padding around there as well and refresh it again. So now it's starting to look more and more like menu items. 13. HTML Divs Spans new HTML5 structure: within this lesson. I want to talk about David's and Spans. So let me just give you an example off what dibs are and what spans are so down here. So I'm going to get rid of this ordered list, and I was going to create a basic dip. So dips are used as containers toe hold content within it. And then the idea is that with CSS styling, we attach styling to these particular dibs we gather. Give them on I D or a class. And then that's how we structure our website. So typically, before you would have something like I d equals header. So we add in that attribute of Header and then this would go at the top here. And then we'd have another one here for navigations would have an I d knave or something like that, depending on what we wanted to call it, and then down here below so we would have another div and this one would contain our content. So we would maybe call it something like container or something like that. And then lastly we would have another div here at the bottom called Footer. So when html five came along we actually gave did away with a lot of these different types of dibs that we use for structuring. And now we've got actual tags that are used to replace this markup. So instead of having a div I d header, we would just simply have a header tag and then here would have a knave tag, and then here we would have, ah, a photo tag and then the containers as well. Now, there has been some changes with that. So this is again depending on what your preferences when you are creating your Web pages. So essentially, what a diff does is that it acts similar to what a paragraph does is that it allows us to separate out content. So if I go to my Web page and I refresh it now and I'm going to just go over to a Laura um ipsum generator eso this is default text that you can use when you're creating a website, so make it look more authentic, so you don't just have a bunch of blank spacing. It allows you Teoh better understand what your website and how the layout is gonna be. So this is what I'm adding in over here, and I should separate thes oath by paragraphs as well. So some of these generators, they do give you the ability to pick it up as html code and some don't. So now it's separated as a paragraph, and I'm gonna add in some additional text here within the footer area, and I'm gonna add in some more text within the heading area. And so essentially, this will simulate lot my website and my text layout of the website. And now we can better understand what the dips are going to be doing. So I'm gonna bring it back down to 100% and we see the way that the dibs work. Eso they work similar to the way paragraphs worked, where they take up that entire line of caught content and, um, they have some spacing above it, and below it, in order, taped, able to differentiate between the different dips. So here we have our heading here we have our main content area, and then here, of course, we have our footer section and for their content. So if you wanted to apply styling to it, it's gonna be very easy to do because now, at this point, all we have to do is go to I d header. And then, of course, we can apply some styling to that so I can do a background color or something like that and refresh it and we can see that we can select this particular def. So what if we actually wanted to sit select content in here? So what if I want to highlight this particular piece of text, but I didn't want to highlight the whole thing. So this is where we use spans and spans are another one of those HTML tags that we can use in order to be able to apply and select particular pieces of content. Apply styling to that. So I'm just looking for where that one is located. And let's say we want to apply some styling to it so we could do span and typically with spans, a lot of time would be using class. So maybe I could call it something like highlight or something like that. And then whatever text I want to highlight, I would nest within this particular element, the span element, and then I would go up to my styling and I would do highlights and it could do background color and yellow eso. No, When I refresh it, we can see that that's yellow now. And the thing with spans is we notice that it keeps it within in line within the text so it doesn't apply any additional styling to it. So there's no actually default styling applied to it, and it works right within our text. So now with the advent of HTML five, we're now were sectioning off all of these dibs. They actually did a survey of all of the different millions and billions of webpages, and they found the different ideas that were being used within the dibs most commonly. And they took those out, and in html five, they introduced them as separate tax. So essentially they do function the same way as a div. They're gonna take those same properties as of a diff. But we just have better layout and structuring of our Web pages. So now we can indicate, instead of giving it an I d setting a div with an I d. All we do now is we set header over here. Now we can set this to knave So this is typical that every website would have a navigation menu and we would just typically set this up as now and now with containers. So containers is one of those that in debate because there's different types of content that gets represented here. Eso You may or may not need to use the container, sec, container tags or container i d within. It s so typically containers don't have their own set of tags as headers and footers and knaves do. But we do have an option to do something like section. We can also do article and so on. So typically a section would encompass that entire container area. And again, this is representative of the content that you're providing within this area s. So this is why we're keeping those ideas because we would typically have maybe a section as a divider for the structure. And then we'd have additional sections. Or maybe we would have articles and so on what, representing the different content structure that we have within our HTML code. So I'm just gonna adjust this 1/2 footer now and now when I refresh it. So of course I've gotta update my CSS as well to represent the new heading section eso again with this, you have to be really careful because typically within section you might have you might be reusing header You might be reusing footer over and over again. And if that's the case, then of course you have to be more specific with your selector. But because I'm just using header this one time within my HTML code, I I can get away with not being specific. But when it comes to CSS, you have to be really careful with your selectors and make sure that you're selecting your elements properly and making sure that you're getting those ones that you want but also not including pieces of your HTML code that you don't want included within their. So if I was to select something like knave, but then I had somewhere else I had some additional navigation. So maybe smaller navigation. I don't want my navigation bar styling Teoh be implemented on on any additional navigation areas. Or maybe I do again. It depends on what and how you're setting up your website. So now I'm gonna go back out and refresh it, and now we see that the header once again is red. So once again we're going to find that we're not using. It gives as much, but they still have their place. So if you want to apply styling Teoh that entire Web page you might want to consider using a div and then close it off here before we end the body. And this gives us the ability to apply styling across this entire content area so we don't have to necessarily attached styling to the body. We can get away with us, hatching it to this day of which is just a rapper, in case we don't want apply styling to particular body. Then all we have to do is not include this I d rapper eso. Now I can access Rapper and I can set some styling to rapper eso if I want to select a page with which we're going to show you how to do that in the upcoming lesson. Eso if we want to do that and we want to set Ah, with of this page, we could do that simply by selecting this def so they still have their place in order to apply styling even now, within HTML five 14. HTML course use CSS turn your HTML into a webpage: in this lesson. I want to look a little bit deeper into actually creating an actual website from all of this HTML code that we've been looking at in the previous lessons. So I'm gonna update header and I'm just going to write something like my company name. And then this is what's going to get contained within the header. And then, of course, we've got our navigation section and I'm gonna get rid of this background color for their and I'm gonna update the colors a little bit better. So maybe I'll just keep that highlight. Go vote and refresh the page. So we've got our company name. We've got our navigation bar. We've got all of our content here and then our footer information. So I'm gonna update that to be more typical off a website. So maybe some copyright information, and then I'm gonna add in some Piper links down here, and I'm not gonna make it go anywhere yet s so we can update that as needed whenever we add in those pages. So that's going to keep blank hash. There s oh, this will reload the page and then close that one off. And so Now this looks more like an actual Web page structure. Then, of course, we could add in additional content as well. So maybe we generate some additional Laura Mo text. And I'm just going to copy and paste some of this newly generated text on into our content here. And I gotta add in all those paragraphs and closing paragraphs, tags and also want to go back and pick up an image here. So I'm gonna just simply add in this default image that we looked at before. So maybe I'll add that in just over here in the top text area and refresh its to see what our pages looking like now. So now we've got some more text. We've got an image. We've got a clear footer, navigation and ah, heading area. So now we can go ahead and apply some styling to it. Eso typically within our navigation menu eso these would be length So these would be hyperlinks. So all update them as such And also we probably have on about section. So call this a boat and then lost Lee, we probably have something like contact or something like that. This is typical for websites so these would probably be three typical navigation items. Here s so this is more of a navigation bar. So now we have to apply some additional styling. So we've already looked at how we're applying within the list type, So just go back to that and take a look at our UL. So Ul list type is none. We also have to update those margins and padding. So this would be margin just to make sure that we don't have any lingering styling from the an ordered list because they noticed that over here by default, we do have a margin. We do have some padding their eso when we remove that. That's essentially stripping out that Anno ordered list completely of its default margins and poundings. So the other thing that we need to do is we need Teoh display it within a block format, and when we look at it, we already have in line. So I'm gonna just update this to be in line block. That's better formatting for our list items and then additional to this, I can actually set a width here or something that I want to use and I'm gonna update for only the hyperlinks to include that padding so that it goes directly around that hyperlink eso This will be a with of that entire list item cell. So now when I refresh it, we can see that space date a little bit better. And then just below that, I'm gonna update those a nor did list items that have ah, hyperlink. And then within here, I'm gonna do a display block to make sure that it actually does get displayed as a block. And I'm gonna give it text the line center to make sure that my text is a line center. I want to remove out the underlines. So text decoration none. And I want to set a background color because I also want to update it when it gets hovered over. So I'm gonna just set it as great, and I'm going to give it a color of white, the text color of white. So see what this looks like. So now it starts to look more like an actual navigation bar. And of course, now all we need to do is add in that hover effect so we can add this in by list item ally a and add and hover, and always to do now is update the background. So whenever it gets hovered over, I can update the background color. So maybe I'll turn it into block. So you see that we do have that highlighting there. And then, of course, we can update the the actual navigation bar completely so we can take something like so wrong one there. So it's just ah, we can maybe put some ah black line across the whole thing where we can do something like that as well. And now we can select it by selecting nav itself and give it that parent so we can give it a background color. We can make sure it's with is 100% and take a look and see how that looks now and then. Lastly, I want to go back over here cause actually, I should add in some potting, so I'm gonna add in patting just for the top and bottom, and I'm not gonna have any padding on left and right eso now that we get a full, more styled navigation bar, so a few other pieces that we should update as well. So now that we've got a rapper set. So if want actually set a default with, we could set something like Max with eso. This will make it more responsive. Whenever we re size, it will automatically go to 100% so we could do something like max width of 11 40 pixels. And then, of course, we do need to center it in the way that we center our content is give it Ah, margin of zero top and bottom, an auto left and rates. So now when I refresh it were actually centered for our content and we should also update our header. So update or header, maybe we can add in some additional background color or styling around that. So I'll just do background. So do something like that for the background and we should make that text white. And we should add some padding there. Maybe I can do 25 picks and so do fought size of 24 picks. So refresh that and see how that looks starting look more like a website. And of course, we should do something with this image because we wanna have it in line with the text us. Well, so going back out to our source. So we're going to do, we're gonna float it to the left. So this is gonna pull that image to the left of any content. And of course, we should have a margin around it, son. That's going to attend. Pick, margin, refresh. It s in our image to be floating on the left. Here we have our margin around it. And lastly, now we just need to update our footer. And with the footer, I'm gonna do also set a background color. And I'm gonna do some padding there as well. So it stands out a little bit more in the center. And now we can see that we've got a more styled and more of a typical website feel to our HTML code. So that's how you update your HTML code and actually turn it into what looks more like a website using CSS and styling 15. Apply what we learned in the course: So I want to finish off this HTML course by applying the different tags that we had talked about throughout the course. So we had also talked about and looked at heading tags. So if we notice here that our web page actually doesn't have a heading and we should actually include some heading information here so we can start out with an H one tag and typically this would be similar to what's contained within my title. So if I had HTML course here than I could very well put H one tags here with h html course . And then, of course, if I had different sections within here, So if I had my first section or something like that, So I'm gonna add in some additional sections and I'm gonna close off this section and I'm gonna have a brain use section and then, of course, closed off that section so that I'm always opening and closing, making sure that I've got all of those elements. So ultimately I might want to pull that one out and set up hte tags. So if I had some new subheading information there and then if I'm making my website look within that type of fashion. Then I want to use those H twos within here as well, so that I have a good, similar type of structure to my website. And you can see that now I've got my each one. I've got my h twos set up and everything is ready to go within my web content. So although I maybe should adjust this image because it right now that I've got this new sectioning, this image doesn't really fit that well with the flow of the website. So of course, sometimes you should make some adjustments. What I'm gonna actually do is I'm gonna update the code, and I'm gonna add in some additional text there so that this first section is gonna be longer and I'm gonna contain more information in there, so that will make it look more presentable and mawr in line with the other subheadings. So they're one of the things that you have to make sure and make sure that you're watching when you are creating these types of headings. Eso. Another thing that we had talked about is how to create line breaks. So maybe in here, I'm just gonna add in a line break. So starting this if this wasn you, uh, new bit of information, maybe we want to start it out on a new line. Eso we did talk about hyperlinks adding in images eso also, if we want to set up comments eso typically maybe I want to add in a comment up here and say a logo some point or something like that so that I know that I've got this note here that I definitely want to be adding a local, maybe a sub line under there or something Mawr to be more descriptive about this particular page. So now when I refresh, it s so now we've got all of the typical elements that you would see used within HTML pages and we've presented it all nice and neat, nice and neatly styled using CSS