Learn the basics of starting to use HTML and how to create a website | Laurence Svekis | Skillshare

Learn the basics of starting to use HTML and how to create a website

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 43m)
    • 1. 1 HTML Lesson introduction

      2:15
    • 2. 2 HTML Lesson resources

      8:04
    • 3. 3 HTML Lesson HTML structure

      7:53
    • 4. 4 HTML Lesson attributes and styling

      11:25
    • 5. 6 HTML Lesson headings paragraphs

      11:40
    • 6. 7 HTML Lesson HTML Hyperlinks

      8:32
    • 7. 8 HTML Lesson Images

      6:13
    • 8. 9 HTML Lesson lists

      9:24
    • 9. 11 HTML Lesson divs spans

      11:52
    • 10. 13 HTML Lesson HTML5 elements

      6:31
    • 11. 14 HTML Lesson CSS navbar

      9:51
    • 12. 15 HTML Lesson Styling Create webpage

      9:06

About This Class

introduction to HTML Course

Learn the basics of starting to use HTML and how to create a
website

HTML is everywhere and more and its more important than ever.
Its not only for web developers, having knowledge of HTML and
how it works is beneficial in most careers.

HyperText Markup Language, commonly abbreviated as HTML, is the
standard markup language used to create web pages. Along with
CSS, and JavaScript, HTML is a cornerstone technology used to
create web pages as well as to create user interfaces for mobile
and web applications.

Taught by an instructor with over 15 years of real world web
development experience. This course has everything you need to
learn how write HTML code from scratch.

Fast paced get to the point training, to learn about creating
websites and using HTML code.

By the end of the course you will have the skills and know how
to apply HTML to make a real website.

I am here to help you learn how to create your own websites and
ready to answer any questions you may have.

Learning how to apply HTML to design web content will help to
separate you from the crowd.

Want to know more, what are you waiting for take the first step.
Join now to start learning how you too can write your own HTML
code today.

Transcripts

1. 1 HTML Lesson introduction: Hi, My name is Lawrence and I've been creating websites since 1999. I've created hundreds of websites and hundreds of Web applications and one of the starting points and probably the best starting point to understanding how to create websites and create content online is to understand html within the next settle lessons. I'm gonna walk you through the basic structure of HTML and how you too can really easily start to create content online. And then also, I'm gonna be introducing you to the fund ALS Rentals of CSS. And what CSS does is it allows us to take ah basic HTML structure and really transformative visually into something more presentable That looks like a website itself. So this is essentially the same piece of HTML code. But I was ableto really easily transform it just with applying CSS Teoh a more presentable website. So I'm gonna be going over all the tools that I'm gonna be using and a bunch of really cool resources to get you started and writing HTML code quickly. So this type of website is going to be something that you're gonna be able to build by the end of this course and I'm gonna walk you through all of the different fundamental concepts of using HTML and everything that's involved with writing HTML and then hooking it over into CSS to make it more presentable. So we're gonna be discussing fundamental structure for each two mil, including how to structure HTML tags, what's included within the head tags and how to set up all of that head information and then going into the body and presenting what's getting presented to the users coming into the website and how to structure your body properly in order to be able to better access it through your CSS. So when you're ready, let's start creating websites. 2. 2 HTML Lesson resources: in this lesson. I want to walk you through all the different tools and resources that I'm gonna be using throughout this course. So what we have open right now is no pad. This is an open source editor s so you can download that at no pad plus plus, and it's free to download. So I'm gonna be using this as well as I'm gonna be using brackets and brackets is another open source text editor. This one's by Adobe, and this one actually has some or features that no, Todd actually doesn't. So this one is more of my preferred editor that I've been using quite a lot lately, and it's a really good editor. It's got a lot of good features to it. So this one I'm gonna be using in conjunction with note pad plus plus, also, when it comes to resources for this course, I'm also going to be going over to code pen. I Oh, so this is an online website that you can simply type in html code and you can see the results immediately displayed on while on the right hand side for me. You can also change the view over here so you can place it at the bottom. You can place it over to the left and so on, so whatever to code you're typing in here on the left hand side with in HTML, CSS and JavaScript, it automatically gets rendered aid on within the display area. Now, this is a really good resource for practicing code. So whether you're practicing HTML, CSS and JavaScript, it's a really good resource to be ableto immediately. See the code as it's being displayed out and as it will be displayed out within your website, similar to note pad so note pad would be if you're on a Windows environment. And if you're on a Mac, there's a similar application. It's called Text Wrangler. So both of these air really bare bones type editors that are very straightforward and easy to use to create HTML files and other application files. So in addition to editors, I'm also gonna be generating some dummy text, and I'm gonna use this to use as placeholders for text where text areas eso. This is done at blind text generator dot com, and it gives you the ability to generate just some dummy text placeholder text that you can use within your HTML design when you're designing your Web site and you don't actually have the text handy s. So this is a really good resource to just fill in that spacing and must make the website actually look like a real website without having to write in all of the text and in conjunction to text. We also need images in a website, and that's where I use laura, um, pixel dot com, and this gives you the ability to generate placeholder images so I can simply generate a placeholder image. I can even select different categories. I can do colors and I could just do agree image. So there's a lot, quite a lot of options here and again. This is a really good resource to be able to generate those police holders images that you can use within your dummy text that you can use within your HTML code to make it look like a website without without having to actually write out and source of images and write out the text. In addition to those resources, I'm going to be on a Windows machine, and I'm also going to be using chrome as my browser. And actually Chrome is my browser of choice because it's definitely got really good Dev tool console so you can see here. This is the file that we're gonna be starting with, so it's a completely blank file, but with deaf tools, you have the ability to open up this deaf to a screen, and you can get quite a bit of information about what's going on with your HTML code, with your CSS code and JavaScript and so on. So there's quite a lot of information that's contained within the deaf tools itself, and this is available by default within chrome. And as I said, it gives you a lot of ability you can even flip through to toggle different views. So if you want to see what a website, so take brackets, for instance. And if I want to see what this website looks like on a mobile device, I can flip it through on different devices. Eso If I want to see on an iPad, I can see what it looks like and so on. So this is available by default within within chrome, and it gives you quite a lot of capabilities to be able to really see how your code is going to be performing within multiple different devices and screen sizes. And this day and age when we are developing websites, we've always got to be cognizant of the fact that most people might be accessing your website on different screen sizes, so you're not gonna have that standard screen size that we might have had before. This is gonna be a lot of variations of screen sizes, and that's an important thing to know when you are developing your website and your website content that there are all of these variations of devices that are accessing your content. Eso make sure that you build Teoh. Be ready for visitors that are coming in on any one of these sizes. Aesir building out making it responsive, making the design fluid which we're gonna also talk about later on within the lesson. Ah, and then whenever you want to shut out and go back to the normal browsing, you just simply click this and you can close that down. But in addition to this, we also see that in the deaf tools, there's so much information we can find out styling information with JavaScript. We can find out what our event listeners are. We confined out a whole bunch of properties here that's in tune with the code that's on the page. And this is really useful when you're developing JavaScript. In order to be able to set up all these hooks, set up all of these listeners and get all of that content back and making it in a usable form out within your JavaScript code. So the focus of this course is going to be to go through how to set up your own HTML code and then how to actually render that out, using some styling in order to actually make it look like an actual website. So we're gonna be going through step by step, all the different code that you need in order to create websites. And additionally, we see that I'm on local host here. So with with HTML CSS and javascript, this actually gets rendered out in your browser so you don't necessarily need to be running on a server environment s Oh, this is not a requirement. When you're try when you're practicing and writing html CSS JavaScript code. All you need to do is have a browser installed on your system and open up that file within the browser, and the browser will take care of reading through the code and rendering out appropriately . So when you're practicing the code, you can use any combination of these resources to pry haute and practice it your code, Any editors? So if you don't have an editor, you can check out any one of these editors. Or if you do have an editor that you are comfortable with using, then you could skip over this and just use the editor you're comfortable with. And if you want to just work online and try out different code that we're gonna be talking about throughout the lessons, then you can check out one of these resources, like code Pen I O. Where you can simply type in that HTML type in your CSS and visually see it being displayed in the next lesson. We're going to be discussing how to structure and how to set up your basic Web page. So it's all coming up in the next lesson. 3. 3 HTML Lesson HTML structure: within this lesson, we're gonna jump right in and start writing some HTML code. So when you go open up your blank document as long as you're saving out as an HTML or HTM page Ah, and you open it up with you within your browser, your browser will try to render out that code. So if I do something like Hello world, even though structurally this isn't this isn't proper for HTML, your browser is actually going to be smart enough that when you go over to it, refresh it that it's actually going to render that content. But we will look at the source code. We see that it's just simply hello world. So this could literally be just like a text file and the browsers just rendering out or making the best use of the content that's presented within the source file. But when we go over to another website and we look at the source, we see there's a whole bunch mawr and there's an actual structure to our HTML code. So we see that there's always this document type that's being declared at the top of any website. So even if I go over to here we see the same thing that first, the first line of code is declaring that document type. So when we're writing our HTML code, we need to structure our pages even though it will render out and the browsers air smart enough to render that aid simply as it is within the file. We need to render and structure it properly in order to better assist your browser to understand how to render out that content. And thus is this is what HTML is all about in order to create that structure, to render out and to be able to better present that content to the user. So HTML essentially is a structure for your Web content in order to properly structure it. So we're going to open up our browser, and we're going to start it with that same line of code where we do doc type now. Doc Type helps the browser understand what type of document this is, and this is typical for HTML five, where we're coming in and we're rendering out that when the browser sees DOC Type HTML and understands that this is an HTML document and from this point on it's going to be expecting typical HTML structure within this document. So always, always, always start by declaring the document type, and then the next thing that we do is we set a Siris of tax. So HTML is a structure built with a Siris of tags, and we've got tags that open and tags that close. And then the content in the middle of these tags is what's gonna be rendered out eyes the entire element within HTML. So we've got html opening html closing. We know that anything in between here is gonna be part of not HTML code, and the browser is gonna understand that anything in between here is what should be rendered out as such. And then typically in html, we have head. So we've got ahead opening and ahead, closing. And then lastly, we've got body body opening and closing. And the difference between head and body is that between the head tags, any of this content that's contained within here this is considered to be information that helps the browser. Rend wrote that that content properly. So we've got titles we've got meta, we've got linking to other resource files such a styling and so on. So this is all gets contained within the head, and it's actually not meant to be seen by the visitor. So this is where all of that structural, assistive type of content goes. So if we're setting up our view ports on and we're gonna be discussing all of this all this metadata and what we can place within our head tag in the upcoming lesson so but with the head. So we've got all of this, I this helper, informational content and then within the body. This is where the actual visual part, that of HTML structure gets presented. So within here is where you're actually placing what's intended for the Web visitor to be able to see and interact with and visualized that content that's being presented with in here. So when you look in head tags, typically you'll see titles and titles are essential for S e O and for the purposes of proper website structure, so within the head, you should always, always, always include a title because this is an important part of how your website is presented so most of time, you're not going to really see the title. So if I do something like HTML course, and I save it. I go out onto my page and I'm just going to simply refresh it, and we actually don't see anything being presented within our visual area in regards to the title. But if you look up here within the tab, we do have HTML course indicated here within the top, and we see that that across all of these Web pages that we've got open right now, we can see all of the titles really easily and as well we can flip through them. And this is Mawr for probably only part of the head that were actually visually interacting with within the user that we see this this title here we can click on it and helps us better understand what's contained within this document so we could flip through all the types and we have a better understanding of what we're expecting within those taps and as well for S e o purposes. We should always include a title within our Web pages, but titles can be anything that you want, but it's always good practice to try to keep them unique as well as try to keep them keep your some of your keywords in there as well as make it relevant to the content that's being presented within the body section. Eso it always has to be in conjunction with that, try to also keep it at up to 70 characters. Eso, of course. Sometimes you might have to go over, but it's always a good idea to keep it within those parameters because of the way that it's going to get displayed out. When people are searching for your website or your website content, and how search engines would be displaying your title information and as well when we look over to these tabs, we're very limited on the amount of space that we have here. Eso We would only be going up to maybe about 25 characters here within these tabs. So always be cognizant of the fact that how people are going to be interacting with what you're presenting within your HTML structure. So in the next lesson, we're gonna dive deeper into how to rate html code within your HTML page. Eso Essentially, what we've covered so far is just a very typical plain HTML structure that we can use and reuse over and over again within our Web page development, because now we've got a basic outline of how we need to structure our content in HTML. And then from here we can build out all the different pieces of those Web pages as we develop the moat. 4. 4 HTML Lesson attributes and styling: in this lesson. I want to talk about mawr. Typically included elements and tags that you might see within your HTML code. So staying within our head section a lot of times you're going to see this meta meta tag eso There's a number of different types of met attacks on and they're all separated by different names. So in this case, I'm gonna be setting up a meta name and it's gonna be a description. And as we can see here within the drop down from brackets, it offers up several different options here for our meta, we can have author. We can have key words. We can have generators, application names and so on. So all of this is helpful for indexing and understanding how your content, all of this information that's contained within your content. So this is meta information. It's not meant to be digested by the users coming into your website, but it is helpful additional information in regards to your web content. So as for description, I so here we would specify meta. We've got a name for the meta and we've got content. And if we notice here that this isn't isn't uh, this is different than the other HTML tags that we've done so far. So all of the previous ones we've seen that we've got an opening and closing tag. But this within the meta we actually have a self closing tag. So we just have a tank of meta, and then within the tag itself, we're adding what's called attributes. And these attributes are where the content is gonna be contained for this Met attack. So we're indicating that it's got a name called Description, and this is how we're differentiating all these meta tags. So this is what's called a self closing tag, and the content for the self closing tag isn't between meta and then the closing meta. It's sitting within the tag itself, and there's a few other examples of this that we're going to be looking at throat the following lessons of these self closing tags, where the information is contained within the attributes of the tag as opposed Teoh between the closing, opening and closing tags. So another thing that you would find typically within the head section is styling and within style. So we've got this opening and closing style and then within here is where we would place any CSS content and CSS content is cascading style sheets content. Eso What CSS essentially is is it's how your HTML structure gets presented to the user so you could differentiate. You could have that same HTML page, but you change your CSS and it can look totally different. S O. For example, if you want to change the background color or if you want to select a certain tag or an element within your HTML document, you could manipulate the way that's gonna be presented to the user. So this is done by CSS, and we're going to be discussing a little bit of CSS throughout this course. Because, of course, we're gonna write out some HTML code, and then we want to make it presentable. Maurin a website format. So CSS is where the magic comes in, bringing your Web pages toe life on, and that's what's contained within the style tags. And there's actually three places where you can place CSS. You can place it within a style tag like this, and this CSS would would render out all of that HTML content that's within this file. So in within my index dot html file. This would be what would take these style sheets properties that's placed within these style tags. Now we do have some more options with styling, and one of them is that we can actually bring in a style sheet. And this is more common that when you're building out larger websites and there's a definitely on advantage to having style sheets. And one of the main advantages to having style sheets is that you have the ability to simply link out to a CSS file and re use that same CSS file over and over again, so as opposed to having to create. Maybe if you had five HTML files and you want to apply a background color to the body so you would have to go into each one of these five files and place the styling within the style tags in order to render that eight. But if you had to come back and make a change, so what? Say it a red background, which these days is probably unlikely. But let's say you did, and all of a sudden you realized, well, you know, it's it's it's not common practice to have a red background. It doesn't really go well and you want to change it to more of a neutral background or a white background eso You could simply go into the CSS file and access the background styling to all five of the pages. So you don't have to make one change as opposed to If you have it on page, you're styling is on page. You'd have to go to every single page and updated. And this, of course, this is a lot more difficult, and it's a lot harder to manage eso What I'm doing over here is I'm gonna show you how we can link to a CSS file. Eso again. This is one of one of those self closing tags in HTML where were indicating link and then it's gonna just to close it off. So this closes off link and then any of the content within here. This is where that link content is going to go. So I'm going to indicate that this is gonna be an RTL, so we have to specify what type of link it's gonna be. Eso we do have some options here, but typically it's gonna be a style sheet for the most part, we're gonna link out to style sheets and then next eso What do you think we need to include here? Eso were indicating that's a style sheet, but this is gonna be an external file. So we actually have to indicate the path to the style sheet. So I don't actually have a style CSS and you actually should if you're linking to it. But this was just to indicate how we actually do are linking and then save it. So now the styling properties are actually going to come from style CSS and as well we can actually include several different ways of styling. We could have style within on page as well. We can use a combination of both eso if we had particular pieces of content that we want to style. But only on this page we might do them up here within the styling tags. And if we want to have something site wide, we'd have a style sheet or or vice versa, depending on how we want to work with that and then addition to that, we can also apply styling for as an attribute within the HTML tags themselves. So you also have the option. Teoh, select any one of your HTML elements here and apply styling to it. So I could just simply do style and I can apply styling to this particular element. So there's three different ways applying styling within your HTML document and also within this one. Sometimes you might see this as well, although it's not necessary because this is an understood option. So types should actually be an equal sign and I'm gonna equal it to type text CSS. So to better help understand what type of source file this is, B this is going to be and what's to be expected from that source file And when it comes to applying styling. So we do have three options. Eso First, it's going to be the style sheet, and then we're gonna override it with the on page styling and then the in line styling in order to set styling. So you you specify what element you want. Apply the styling too. So I'm gonna just simply select body cause that's only one that I have right now and I'm gonna ply a background s. So I'm gonna do background color and then I've got a bunch of options here for colors on this is again thanks to brackets. So these air pre defined colors. If I wanted to make it crimson, I can simply said it like that s So what's gonna happen here is that once the browser hits the link to the style sheet, it's going to go over to here, and it's gonna read that. Okay, well, this style sheet says that body is going to be a crimson color, and it's gonna then apply that styling when it hits the body type. So let's just see what happens here and refresh it. We see that we get this crimson background, and as I said, a lot of times you're not going to see these red crimson backgrounds. Eso I'm gonna reset it over here within style, and I'm gonna do style, background color, and I do need to again specify that it's for body. And from here I can specify a background color that should be applied. Eso I did wanna have something a little bit, uh, less outstanding than that crimson color so I can take more of this yellowish color. Eso refresh it and we see that now we've got this beach color. And then lastly, we're gonna look at how to apply style over here. And what's just happening over here is we're simply overriding the previous colors. So I'm gonna reset this back to be white, and our background color is gonna be weight, so it's gonna hit that style sheet. First, it's going to change it red. Then it's gonna hit the background color here within the in line styling. It's gonna change it to this beige color and then lastly, it's gonna hit, uh, that in line US style attribute, and it's gonna change it toe white. So we refresh it. Now we've gotta wait background in the upcoming lesson. We're gonna actually start having something displayed for visitors because right now it's just really plain, and we're gonna start adding in some HTML tags within the body section in order to have some content rendered. It's something visible that the user can take a look at within the HTML page. So it's coming up in the next lesson. 5. 6 HTML Lesson headings paragraphs: So let's start adding some content into our HTML page. I'm gonna get rid of this link to the style sheet, and I'm gonna get learn of this body attributes. And I'm just going to simply change this to white or maybe Floral White. So we do have a little bit of color in there, a little tint of some different color. So when we're looking at our code here, I see that within style. I've got what's called a comment here. So this helps us better understand what we're what we're doing. What we're planning. Ondas. Well, when you come back to your Web document, if you come back six months down the line, you might be wondering, Well, you know what's in here, and this is the way to apply comments within your style sheets as well as your CSS page. But if you want to apply a comment in your HTML and comments again, these air notes essentially toe help. You better understand, or Teoh convey messages back and forth about the cold. Ah, and this is not meant for the average visitor to be able to see. And as we can see here, brackets is actually graying out these comments because these aren't going to be presented to the users. So even when they load the page, they won't readily see that there's a comment here. Of course, if they look in the source code, they can see that. Or if anyone opens up your index dot html, then they're gonna be able to see that that there's a comment there. And that's exactly what it's for. Its ah, comment or a note toe help. Better understand the coating on what you're doing with the coating structure. So when you come down the line eso first thing that we want to look at our headings. So these are I'm gonna actually go back out into the page here. I'm going to get some dummy text here, so simply select is dummy text, and I'm gonna place it within my HTM up body. So now we've got some text here, and when I go back out here and I refresh it, we see that we now we just have this dummy text. And if you notice what happened here, is that within when I'm so copying and pasting the stomach text, I've actually got these paragraphs here where I've got this content is divided. But when I go back over to here within my brackets and actually need to turn beautify off on save off in order to be able to demonstrate this eso, what beautify on Save was doing is that it was automatically formatting my code in a more readable fashion. And the reason that was getting rid of all of the spacing is the way that your browser handles spacing in your HTML document. So when I go over to here and I look in the source code, I've got a big, huge bunch of blank spaces here. I've got these new paragraphs line breaks, so I've got it spaced out in a much different fashion. But when I go back into my Web browser, and if I refresh it, actually, I don't see any of that spacing anything happening. There's nothing different that's being done, and this is because of the way that your browser renders out. HTML code is that all of this white space simply just gets ignored. So if you have white space, all of this just gets turned into and understood as just one space. One block a coat or 11 space within your text, and it's not gonna automatically add in all of this spacing. So if you want to add in spacing, typically the best way to do it would be within styling but as well. Within HTML, you do have some options. Toe add that spacing in in order to present it in the format that you want to be able to see it. So we're gonna look at this upcoming and how we can present it in different ways. So if we actually did wanna have it presented in this type of format on her HTML page, we need to start using HTML elements in order to help better structure this content. And this is what I mean when it comes to the difference between just copying and pasting a bunch of text in Teoh your source code and having it rendered out on your for your viewers . So you want to have control about how it's structured and how it actually gets presented. So one of the simplest and most common tags is gonna be paragraph, and if we want to start off a new paragraph, we would do something like this so I'm gonna simply add paragraphs here and then show you what the difference is gonna be and notice that this is another tag that has an opening and closing and then contents in the middle. And, of course, we do have the same options is what we looked at earlier with the styling where we can apply attributes to these thes different tags. So when I go back out here and if I refresh it, we finally get our output looking like more of what we wanted. Teoh. So it looks like more of what we've copied and pasted here. And that's why within the blind text generator, you have the option to display your paragraph tags. So now when I copy and paste it that I've got this HTML tagging within my code here when I paste it within my source code, I could immediately see that's going to get presented in that same format. And we see that this is how we're going to start working with our HTML in order to indicate to the browser how we want it to structure and how we want it to look so typically within a website, you're not going to see all of the text presented. Within that same size, you might want to see something Where there's a heading, something stands out and the way to do this. HTML has a built in tag for that. So I go back to the source code. Eso Typically, you will see something like a heading. And this is where you use the H tanks. Eso six different each tax. So typically you're going to see that, um, you have maybe one h one tag on, and usually a coincides with the title or something similar. So where you've got your key wording eso something that you want to bring to the attention of the visitor and then next you've got your h two. So you probably see different levels of the H two. So this is Mawr for a subheading type. And then if you had some additional subheadings off of this subheading that you'd go to H three on and then also all the way down the line to H six, we have the ability to start at each one, go all the way to H six, and when I refresh it, we see that effect. It does bring that those headings out, it helps separate out our paragraphs in a more presentable format. For readers that are coming into our Web page, they can say, OK, this is heading one So the content here has to do with this heading one, and then we might see the heading to eso. We see that this is smaller, although it's still highlighted. Stand saved and we see that it's presented as heading. There's a few things to, uh, to end it to notice about how headings get presented, how paragraphs get presented. We see that even though there's only a little bit of text here, it's taken up that whole line, and we also see that their spacing in between the same thing with the paragraphs we've got spacing at the top in the bottom, and when we close that paragraph, it takes up the rest of the line that's available for us. So regardless, if we had one letter or a whole bunch of words, we still end up taking up that full available with of the content and some of the HTML tags hot contained different different styling properties by default. So with headings with paragraphs, you do have this buffer here below, buffer above and which creates this buffer in between them. So if you actually want it to have no spacing in between them. But let's say I did want to bring this to a new line. We would use the B, R and B R is a line break tag, and it gives us the ability Teoh breakthrough and start a brand new line. And this is another one of those self closing tags that we had looked at up here where we don't actually have any contents in between. Here we just simply have this BR and this creates that line break. So now when I refresh it, we see that we've got this new line which is actually taking up that whole spacing here. But it's important to notice that we don't actually have any pre defined buffers here on top of it or below it. So simply just brings it to a new line and starts again. So with headings, we have the option to go all the way to. So I've got 83 I've got on option for H four, and as we increase in the value of them, we're going to decrease in size. And we only have the ability to go up to H six. And when you see the each six, you're gonna see why we're only going up to each six. Because once if we're to go any higher than h six, it really wouldn't make any sense. Because these leaves letters already getting really small and they're just going to be simply look like they're bold ID s. It's not going to really stand out from the text, and we can see that it's actually, in fact, it's smaller than our default text. Eso Something like this would not not really, ever make sense. Although it is an option, you're gonna very rarely see anything past NH three you might see in each four h five and h six is You probably will never see or never have a need to be able to add that into your html court. But they are there if you do want to use them and when you go to any website you're going to see. So if we go to the Wrangler website, we see that by default they start out with the biggest heading, so I can see the source code Here s we see that we've got when I select these different sections here. So we've got an H three. If I goto brackets, it's going to be the same thing where we've got headings And then it's broken down all the way down. Maybe note pad has a better example. So we see that when we inspect this. So this is an H two. We've probably got another H two there and so on. So they're starting at h twos and they're breaking down the different heading sizes. And that's how they're breaking apart their content. That's how you use headings within HTML. 6. 7 HTML Lesson HTML Hyperlinks: in the last lesson, we presented how we can output something for the user to be able to visually see within our Web page. So when they go over to here, they can actually see something on our Web page. But they don't actually have any way to interact with anything. And within this lesson, we're going to start talking about and looking at how we can add some user functionality and one of the most common things that you're gonna find and actually what is essentially what the Internet is. Our hyperlinks and hyperlinks give us the ability to click and go to another peach, essentially linking through and networking all of those all of that Web content. So whether it's within our website, we've got links going, Teoh other pages on our website or if we've got hyperlinks going to different websites. This is all connecting all of the different Web pages online, and this actually gives the user something to do besides just reading out that content, and it allows them to actually start interacting with your content and hyperlinks are gonna be. I hyperlinks could be included anywhere within your HTML, so typically you might find them within other elements over HTML or in different locations . You're gonna always find them within a navigation bar because essentially, that's what a navigation bar has to do. And it just about creating those hyperlinks so that users come into the website. They can navigate through your website and see other pieces of content within your website . Eso hyperlinks are with a tag really simple and straightforward. Us. This is an anchor tag, and anchor is another one of those that you have to open and close and then the content in between here, So this would be our hyperlinked, so maybe we want a link to our home page. Now, when you look at this, there's something that's missing here that OK, well, we've got a link to our home page, but it doesn't tell us where the home page is located. And this is again where these attributes come in that we had looked at earlier within the style sheet. When we linked to on external file, we use this h ref, and this is the same thing that we're gonna be using within hyperlinks in order to indicate where we want a link to. So if I want a link back to my index. Stop html and this could literally be anywhere that I'm linking. As long as I do have something valid for the user to go through. Even if it's not valid, your browser will try to render that eight s. Oh, that's not a valid page. It will try to render something out at that address. So if I'm including on external address, we've got to make sure that we include that full path and that Http as well. So that's the full path. And I'll show you how to do that. So maybe we can do another one here and I can do something like http and W w so google dot com. And for this one, we're gonna call this one Google. So within hyperlinks, you gotta always make sure that you include that path so that we know where we're connecting this link to on when the user clicks this link where it's going to go to. So we go and refresh our page. Now we've got hyperlinks here and we see that we've got home page. We've got Google, and by default, your it's got some styling applied to it, and this is similar to what we looked at within the headings and paragraphs. It's got automatic default styling where it stands out. So we've got visited pages eso our home pages of visited page on. That's why it's got a different color. But by default, if it's page that hasn't been visited, a link that hasn't been clicked, it's gonna be blue and all of the links they're gonna be underlined. Their slightly bold ID text. The font is the same. So when I click on home page, I can see it just simply brings me back to that same page. But if I click on Google, it will bring me all the way into the Google page. And so just gonna go back out of there and eso Now I've got a few links here and one of the things that if you notice that typically if you're linking to an external page like Google , you generally don't want to bring. People offer your website because the whole idea for creating a website you want people to interact with the content that you're creating so generally, if you've got an external page you don't want to open up within that same window, you ideally want to open up into a new tab. So when the user finishes with that time, or if there's a problem with that link or whatever, you want the user to be able to just simply x that and be able to make it back into your website and hopefully navigate through your website a little bit more, interact with your content and, um, provide some additional value to that user within your content. So the way to create a link We do have an option to specify how we don't want the linking toe happen. Eso We have another attribute that we apply, and that's called Target. And this is exactly that where we specify a target of where we're going to. Ah, I see here that brackets is nice enough to drop down four different options for target, and it's got blank here at the top because typically when you're doing target, you're going to do blink because all of those other options eso by default. We saw that it opens up within the self peach, so I'm gonna just open that again. So by default itself, so whether you include target with cell for you don't include it. It's not gonna make a difference on how the behaviour takes place. So by default it is self. So if you're not including a target, it's just going to use self parent and top eso. These are for if you've got a window open or if you've got a frame, then if you want to actually open on top of your current page than you would use those ones , and they're really not as common you, probably most the time you're gonna be using something like Target or just not having one at all. So now when you go back into the page and refresh it, and if I click that link to Google, we see that opens up on a brand new tab, and I don't have to worry about that. If the user says all well, I don't like what does what's presented here in Google and they exit. They can still see your website and have some interaction with that website, and to finish off this lesson, I want to talk a little bit of it terminology. So throughout this, possibly lessons have been talking about tags. I've been talking about elements and the difference between tags and elements is that when we look at something like this, each one, this is a tag. This is also a tag, but together when we've got an opening, we've got some content in the middle and we've got a closing all together. This is an element. So that's the difference between tags and elements is that tags are what we're using the actual HTML tag. And then the element is when we've completed it. And we've written out that entire structure there where we've got opening and closing and something presented within the middle. That's the difference between elements and tags and the terminology that we use within HTML . So in the next lesson, we're gonna be going back to some visual stuff and showing you about images within your HTML because you know what they say. An image is worth 1000 words. So we've got a lot of words on here, and we'll see how to bring in images into our HTML. So it's coming up from the next lesson 7. 8 HTML Lesson Images: in this lesson, we're gonna talk about adding in images into our HTML page. So right now we've built out on HTML page. We looked at headings, we looked at hyperlinks, and we're going to show you how to add images. And this is where Loren Pixel comes into. Play in a gives me the ability to simply grab an image path and add that within my HTML. So if I don't have an image handy, which I don't at the moment, I can use something like one of these paths here and get this random picture here that I can use within my coding structure. So that's when they grabbed that as a path. I'm going to go over into my HTML code. So now that I've got that copied into my clipboard, I can add an image there just looking at this. So maybe I want out an image, and to hear the way that I do that is I do image. So this is gonna use that image tag, and this is a self closing time. Eso Immediately when we look at this, we can sick a well, this image tag. It's actually missing something because we can't placed content between image opening an image closing that wouldn't really make a lot of sense. But when we look at something like our hyperlink, we got a better idea of that. What what's needed and what is needed is we need to specify the source and so notice that it is different. It's not an H rough. It is a source, so we specify where the source of the images. So the URL path of the source of the image. So when we saved that, now we're going to get this image rendered out on our page. And when I go back out into my Web page and refresh it, we're going to see that now we've got the contents of an image within our HTML documents. So there's our image and with images. There's several other attributes that weaken set eso when we're so what happens if this image isn't displayed or we're using a reader something that's reading the text of the page and encounters an image. It can't very well determine what's contained within this image s So this is where we use all tax. So all tags are on attributes that helps specify what's contained within that image, so it helps define the information. So salt is a lt, and then this is a boat damage. So I could do something like this, and I can talk about what's contained within this image, and I can specify different information within the all tax and good practice is to always include all tag information, just in case your image doesn't show up or someone's using a screen reader in order to read through your website. So along with her all tags, there's actually some additional tags that we can use for images. So we look at our image. Maybe it's too big. Maybe we don't want it 400 by 200. It's not practical, actually, to be able to download that image and resize it and uploaded, So HTML allows us to actually specify are with and our height. If we don't specify width and height, it takes the default size to 100% of the image. But if I do specify something like with and if I specify height, I can see that I can actually change the dimensions of the image to be 100 by 100 this is by default as pixels. When I go back, you'd hear and refresh it. We're going to see that now are images now 100 by 100. So notice that our dimensions before it was 400 by 200. So now are images is squished. So if you don't want that and if you want to still be able to shrink it and fit it into a certain a certain width or certain height, you can remove either one of them. And now, instead of taking that default value of 200 it's automatically going to resize it to be in in line with the dimensions of width of 100. So the same thing. If I would have left it at height, it would have resized that with. So now it's gonna resize the height. The height should roughly be about 50 picks, which we can see when we refresh it. Now our image is 100 by 50 and we can see that now we're keeping with those same dimensions where we've got a to buy a one sizing dimensions how typically when we're doing sizing, we do have this option here as attributes within our images typically, we gonna be using that and applying sizing within styling because again, this has to do with the way that the content actually looks and gets presented to the user not having to do with structure. And the whole idea with CSS is to be able to break out the structure from the way it's being presented. And that's why commonly, now we use we apply our styling to the images. So if I wanted to set a with, I would do something like with, and I want to set it to, like 200 pics. I could do it that way and this way we're able Teoh keep all of our styling within one spot . So even though it's an option, it's an attribute with an image we we most the time we're gonna be placing it within our CSS. In the upcoming lesson, we're gonna look at lists and lists, actually allow us another way to present content to the user in a more visual and meaningful ways are gonna be looking that at that in the upcoming lesson 8. 9 HTML Lesson lists: Another common way to present content to users is to use lists. So I'm gonna add in a list up here, and there are two different types of list tags within HTML. The 1st 1 is that we're gonna look out is a new ordered list. And this is just that if you don't have a specific order to your list If you've got these bullet points that you want a list out, this is the one that you would use as well as you're going to see this used quite a bit within navigation menus s are going to show you how to set that up. And the way that we use lists within navigation menus is that we listed all the navigation links and then we apply styling in order to make it actually look like a navigation bar. So show you how to do that in upcoming lessons. But for now we're going to look at on ordered lists and within this a nordeste, we would generally need toe list out several items. So if we did have something like a home page or if we did have something like about us Page and contact us Page that should be list, item and weaken list off as many list items as necessary. Ah, and this all all the list items actually have to be list nested within the the main listing type. So the an ordered list or the ordered list and show you ordered lists later on within this lesson. So now when I go back out here, I've got this neatly presented bullet point form list of possibly the pages within my website. Oh, are it could be used for any number of things. So there's a lot of different uses for lists. And when it comes to annoy ordered lists, we do have some options with a new ordered lists if we and this is typically applied through styling. So if I had on a new ordered list, but I want to get rid of that default bullet point or if I want to get rid of the default in denting of it, I would do that within my styling. So, in addition to a new ordered lists, let's see, I did wanna have all of the numbers presented if I wanted to list out how many pages I had , So if I had 123 pages and I want to list 8123 We could change this. A nordeste Teoh an ordered list and an ordered list is just dot that it's an ordered set of list items and the more list items we're gonna add the mawr, the ordered list will increment. So show you what the difference is here. So nothing that's gonna make it a little bit bigger and refresh the page. So essentially the ordered list is going to transform our bullet points numerically. So now we've got 123 and with ordered lists. We actually have some options here, so let's see, You didn't want to do 123 But you want to do, um, letters instead. So you want to do something like ABC. So with ordered lists, we do have this attribute of type, and here we can specify several different types. So we see that brackets is nice enough to give us a bunch of options. Here s we've got an upper case. A. So if I select that, just see what that looks like and refresh it so it's going to make it all uppercase list and then of course, the next one would be D than E and so on and these were all uppercase letters. There's also an option for the lower case, and that's just does exactly that. Transforms our index here for the list items to be lower case. We also have the option to do Roman numerals because typically you might see list items listed out with Roman numerals on. So this is indicated with the character I eso again we can do upper case and lower case with this and we see that it increments as it would with Roman numerals flipping back to the code. And let's say we actually wanted to start at a specific number, so we're on Roman numerals and we wanted to start it at, and we do have an attribute for that, So html does have an attribute for it. So let's say we wanted to start it out 50 or something like that, so I don't put a really big number. Eso this could be literally anything. So any number and it would increment from there, so our starting point would be 50 and then 51 52. So maybe that wasn't the best example, eso Maybe we want to start it off at 10 or something like that. So now this is 10 11 12 enrollment numerals and I can easily switch this back to be numeric or it could be letters. So just two letters started off at the 10th letter in the alphabet, so J. K. L. And so on. That's how you create lists and a new ordered lists and additionally to listing out attributes within here. Typically, you're gonna find that we use styling to control the attributes so you might have on a Nord Erred list, and it's gonna grab that over here within the CSS and just to explain CSS a little bit more . What we're doing is we're specifying a selector, so we're selecting the tag all of the different. Over here. All of the tags that are body tags would get these properties. All the image tags would get these properties and all the an ordered list tags. We'll get this set of properties, So if one apply it to the honored honored list, we can apply to the A Norden list all together, or we can apply it to the different list items and Yeah, there is a difference when we're specifying either the an ordered list or lists items. Take, for example, if we had margins or borders around there, the parent here, the an ordered list would only get that one board around it, whereas if we applied it to list items, we'd get three borders around each list item. So there is a difference. And this is why, when you are making selections in your CSS, you have always got to be make sure that you're selecting the proper element that you want to apply that styling, too. So in styling, I'm gonna specify my list style, and I do have some options here. That brackets is nice enough to present me on the one that we want to look at this style type. And so I'm gonna just select list style type. And here it's really interesting because we're presented with a whole bunch of options so I can literally change my A Nordeste into an ordered list by stylings. When I refresh that, now we see that even though it's on a northward list, we've actually transformed it into an ordered list via styling. That's something really cool to remember and as well. Typically, when we're using list items, maybe we don't even wanna have any bullet points or any indicators. There s so I can set it toe list style? None. And essentially, what that will do is that will remove out any of that list style information. But we also still see that we do have some default padding here. Default margins. Eso Usually if you want to remove all of that formatting from your lists on ordered lists or were ordered lists, we set our margins to be zero, and we set our potting to be zero. So this will remove out all of that additional formatting that we had within our list items and simply bring us into what looks like a line breaks separated, separating these. And as I said, there's quite a lot you can do with styling on when applying styling to your coat. And in the next lesson, we're gonna talk more about different ways to you section off and divide up pieces of your content within your HTML structure in order to be able to apply styling. So we're gonna be looking at a default way to be able to grab out certain pieces of your content. So let's say I wanted to highlight certain words or certain sets of words, and I don't want to apply any paragraph tags. I don't want to do any. Each one tags. So if I want to do this, there's specific tags that we use in HTML in order to divide up our structure and toe. Also better present are HTML in order to be able to apply styling, so we're gonna look at that in more detail, upcoming in the next lesson, looking at dibs and spans and more about HTML structure. 9. 11 HTML Lesson divs spans: in this lesson. We're gonna look at how we can connect our HTML structure better to our styling, our CSS. And for that we use dibs and spans. So there's a slight difference between what dis do and what spans do. So I'm gonna show you both, and I'm gonna show you what the difference between those two are. So we're looking at our text here. So this is Laura, Mom, if Sue text. So it's actually not gonna make any sense. It's not a real language, but if we want to highlight some of this text so maybe we want toe highlight Nullah, eso, whatever that means. We want to highlight that. And we want to be able to see that within our users are visitors to be able to see that and have it stand out in a way. And when we look at all the different tags that we've looked at an HTML so far, we don't really have any good options to be able to select Onley this piece of content and that's where spans come in. So we have the ability to use spans. We have the ability to use dibs and any one of these tags, They do have some default properties with them, but they also help us better structure our HTML in order to be able to access it with our CSS. So just to show you what I mean, when I add in span around Nullah glow to my page and if I refresh it and maybe I'm just gonna make this back down 200% and we see that there's nothing really around here, it's just simply nullah, and it looks the exact same as it did before. So you're probably saying, Well, you know, why do we including that if it does the same thing? And exactly the reason is that we want to be able to access this through our styling so I could do something like Span. And I can add a background color to this particular piece of content. So if I want to, like, highlight it, some just looking for a yellowish color or if I want to make it dark orange on a swell, we could apply any type of styling to it. So we want to set borders round at margins, padding and salon. We could do this within CSS eso now we're selecting any spans and we're applying a dark orange to it. And when I refresh it, we see that there's our new color being applied to the background. And it's actually kind of highlighting that text and the beauty about using styling eyes that we can use it over and over again. So typically, uh, you might want to use this highlight capability somewhere else, a swell and was CSS, especially when we're doing it on page or linking to a file. We can update on Lee this one piece. So all of a sudden, if one changed dark orange to yellow, we can do this simply by updating our styling, and now it gets applied to both of those pieces of content. Now the difference between dibs and spans is that Spans doesn't have any additional styling attached to it. So essentially, it's just ah blank empty tag, or it allows us to create on empty. No styled element doesn't have anything additional styling. With that, nothing different happens when we include it, but it allows us to select it from our CSS and when we use something like a def. So if I update the span to a div. Show you what happens there and this is the second option and it goes along with all the different tags that we've been looking at. In HTML we saw that some of them take up that whole line of code content, and some of them like the image we can place within their same with the hyperlinks. It doesn't actually take up that whole line of content. Eso This stays what's called in line, as opposed to taking up our whole block of content. So dibs and spans are different in the fact that dibs actually going to take up and take up that whole line of content. So we're gonna look at what happens with Nullah when I refresh it, and we see that Nullah now has its own line and it's only word on this line, and the the text afterwards continues on a new line, so there's no styling applied to it, but we see that it breaks and takes up that whole block of space that's allocated for that letter and or that's that content and with dips and spans, weaken do quite a lot by sectioning off and better structuring, updating the content of our website s O. If we want to apply styling to any particular piece of content or often times you're going to see something like one DIV that contains the whole piece of content that's within the body instead of using body would have a particular def for it s so it often times this is probably a better format to do it within this type of format. And so, typically, I just changed this back to span because typically we wouldn't place a div within a paragraph because the paragraph is the one that's providing that structure for our our content. So we would be using spans and paragraphs and in place of paragraphs we might even want to use dips. Eso There's a few options there. So this DIV is gonna in compass all of our content that's available. So that's what we've got it opening right after body and closing rate before body eso typically also to do really divide up our text. We'd have another div here, and so maybe this would be where our head content would go and then maybe another def for our navigation. It's a place, another diff there and maybe we'd have our navigation and additionally, another DIV for our mean content area and then another div for maybe a footer. So now that we see that we've got all of these dibs set up, there's actually no way to really distinguish between all these dips, and that's where we add additional attributes to them. Eso We have a few options of attributes that we can apply to our dis and our spans in order to get access to them and be able to better select them within our CSS. So so far, what we've been looking at, we've just been looking at the tags. And this really isn't an efficient way to be able to apply styling because most the time I don't want apply a background color yellow to every span because I might be using spans for different reasons within my content. So we would use ID's or classes in order to be able to better select and specify that this is what we want. Apply this particular styling, too, So I'm gonna update the spans with a class. I'm going to give it a class of something like highlight and again, this could be anything that you want most the time. It's always a good idea to you when you're doing naming convention to keep something that just does make sense. Eso In this case, I'm doing class highlight, and I want to highlight all of these different elements on and classes you can use as many times as you want so I can use this over and over again. So even if I want to apply class, highlight to my heading. That doesn't necessarily to be in a span I can apply to my H one. I can apply it to my a nordle ist I can apply to my hyperlink. I can apply it anywhere I want. And this is the beauty of classes is that it really does provide a very versatile weight of accessing eso. One thing with classes is there's a different way to select it within CSS, and, uh, the way to select a class is to do a dot and then the class name, and this allows us to specify and select that it's the highlight class that should have the property of background yellow and going out to our page, refreshing it. We see that anywhere we've applied highlight class. Now we've got a background of yellow so additional to that. What if you want to only specify for ah particular element and you only air using at once? Eso there is a way to be more specific, and that's using I DS. And this is typical where we would apply something and ideas are only used once through it . The page. So if I had a rapper that was wrapped around my entire content, I would typically maybe give it a name of rapper an idea of rapper. And then this is going to be unique within this Web page. I can only have one i d with this particular name of rapper and the way to access it within HTML. Instead of doing body background White. Now access that rapper and I ds are accessed through the hash and then opening and closing just like anything else. And maybe I can do a background color for here and selecting outside. You can see there's a lot of nice colors. Here s so if I wanted to do corn silk, for example, go back out and refresh it. We see that now because we've got a rapper were not applying it to that entire body were applying it to that particular div. And this Div Onley contains the contents of the page. So there's a difference between the body and the DIV, whereas the Davis on lee the contents the body is that entire pH. So I could actually apply different color to the body entirely, and it would look entirely different. So I'm going to just switch this to be white, and I'm going to switch this to contain a color. So I'm gonna update this. So maybe if I wanted toe have ah bluish background and can refresh it and they can see now I'm able to really isolate it that content by adding in that rapper and this would be a typical good use for a div setting up that structure and applying styling. So in the next lesson, we're going to dive deeper into updating our HTML code and making it more presentable to make it look like more like a website. So that's coming up in the next lesson 10. 13 HTML Lesson HTML5 elements: with HTML five who were introduced to a new set of tags that we have the ability to use. So apparently they had gone through the Internet, and they had looked at the most commonly named tags the most commonly named dibs. And they decided to, instead of having dibs, have actual elements that would contain that same information as dibs in order to be able to better understand and structure our Web content. So this is new within HTML five. And of course, you can always use dibs with the I. D. S. Ah, and this is perfectly acceptable. But as well, you can also use more of a structuring method that we have available in HTM. Oh, fight. So this Div with I d header would transform into header this Div with a novel I d would transform into nav and back down here a the bottom, the stiff with footer who transformed into footer. Now footers are used footers. Headers are used over and over again. So might so sometimes you might have a header and a footer for all of your content. But you also have header and footer for different sections of your content and So typically , you might want to keep those ideas in and call it Main Footer or something like that in order to be able Teoh break those out and still be able to specify that particular header and that particular footer, Uh, that's the main header and mean footer. And when it comes to your content so we don't have anything, really to specify this content area. But we have a lot of different ways to present it, and one of them is using something like section. So this now would contain as a section all of that content that's included within here. And instead of having this heading one and so on, we might have some additional sections. So these air ones that you would commonly used over and over again. So if I had a section here and if I ended that, I'm going to take this subheading and I could apply it to the top of my section. And I wanted to break apart this one and this was another section. So this is my second section. So we see that we've got section nested within section, and this alone gives us the ability to really see that we can isolate out any sections within sections or he could isolate sections within a container and so on. And when it comes to applying all of these sections and the structure, this is really up to the web developer. How they want to present it. So here for me, typically, I like toe have a div that contains all of the contents of where I broke it out of the body . But you don't necessarily need tohave that so again, this is depending on how you want to present it. Usually I like to have websites and may be set a certain with. So maybe I want to do a width of 10 80 or something like that. And I want to have all that border spacing around. It s Oh, this is typically why I would use our wrapper. So now I want to quote to our page and refresh it. We can see that now we've got this broken down area, but we don't. There's a few problems with just setting a with and just leaving it at that eso. One of them is that if we're forcing a default with of pixel size, then we don't have any ability when we re size it, so this will automatically start to scroll. And that doesn't present the website very well across smaller screens and as well. When we look at it on a big screen, it's pulled off to the left. So by default it's pulling it to the left and we can update and take care of all of this with styling as well. So if I wanted to set my with, typically we would use something like Max with so anything below there would just be at 100%. And this allows us to be responsive and address any sizing issues on smaller screens. And then what we do for the fact that's pulled off to the left is that we set a margin of zero. So for top and bottom zero and the left and right is gonna be auto. And what auto is going to do is this is automatically adjust that that margin to center it . So when I go over to here and refresh it now, we've got our Web page and it's centered. Another one that I wanted to address is the image, so the image really doesn't present well here. It's pulled off here and maybe I want to move images off to the right or I want to move it off to the left and I want to have a little bit of a buffer around there. So one toe add in a margin around there, some potting. So going back into my code, I can see that I've set a width of 200 on the image. And another thing that I wanted to set is I want to float my image over to the right. And also I wanted to add in some buffer around there. So that's gonna add in a margin of maybe 10 picks or something like that around there and go back out to the page. Refresh it. It was. See, now that it's gonna be presented a little bit better. Eso now it's not kind of standing out of that text, but it's more in line with the tax. 10 more. It looks more in line with the content of the page. So for the next lesson, I'm actually going to take this out of my brackets that have been using and I'm gonna bring it over into code pen so we can see the actual transformation, the code taking place. So that's coming up in the next lesson, and we're gonna present this in more of a website fashion. So it's not gonna look like it's coming out of the 19 nineties. S are going to bring it up to date and apply more styling to it now that we've finished with our HTML structure. 11. 14 HTML Lesson CSS navbar: in this lesson. I want to update our HTML structure into a more modern design, and we're going to do this with CSS. So I'm gonna use code pen I o. And as we saw earlier, whatever I type here within code pen Io, we actually see take place within the display area here on the right hand side. So this is gonna be ideal for applying styling because we're gonna be able to see the transformations take place right away as we're updating the code. So that will better illustrate how the code is being applied and used within the HTML structure. So, first of all, I need to go back out here to my default page, and I got a copy of all of this HTML code. And one thing to remember with code pen io is that you don't need all of this heading information. All I need is to get anything that's contained having a little bit of a hard time selecting here. But anything that's contained within the body is what I want to be able to grab. The head stuff is already taken care of by the editor itself. Eso all of this title we don't net. We don't need it within the page within the code pen. I'll so flipping back here that I could copy and paste art in and we can see that wait for a second and we can see that we've got all of our website code here. It's all in place, and now we need to apply some transformations to it. And we've got all of the structure already set up where we can select different areas within our HTML code and using CSS. And they also have this really need option to tidy it up. Eso This does the same thing as the beautify in brackets where it makes it more readable. The court make this bigger and now going into our styling. So in the last lesson, we already applied a little bit of styling. So I'm gonna take this styling that we've already applied and copy this over. Of course, I don't need the background and where the body and go back into here and apply our styling there. And now you can see that we've got literally the same thing that we have here within this Web page, and maybe we can make it even smaller just so that there is something that we can see that's happening here within the rapper here. So now we've made our wrapper smaller were at 7 80 at Max with, and we're ready to start applying some styling. The first thing and probably one of the coolest things with styling is that you have the ability to update this a nordeste into an actual navigation bar. So at the moment, we have applied some styling there. So if I was to remove this and we went through this in the earlier lessons, I'm not going to spend too much time on it. But we see that we've got on a Nord erred list and we can transform this a Norden list into a more usable type of list on We've got our code just up here. So all this is is just a nerd list and three list items with hyperlinks in them. So we're gonna use our CSS and selectors within CSS to really bring out that and turn that into a navigation bar. So first thing that we need to do is be able to select where we want to apply styling to, and because I'm using a new ordered lists. And maybe my strategy within my website is that I'm gonna just use ordered lists within the content, so I don't necessarily need tohave making updates of styling here. And it's only navigation I'm gonna use on ordered lists. Uh, so what we do to be really specific, I could specify within nav within the nav tag, a Norden lists and lists items are gonna have all of this styling applied to it. So it's going to really isolate out on any one of these list items. Eso I can even do something like a background color. And I am going to get rid of this color. So off the top of my head, I know that this one is red. So you see that each list item gets red applied to it and they don't actually look like this is gonna be, ah, navigation bar. So it's it's not styled properly. It's horizontally. So we need to definitely have to change that. And the way that we do that is we do display and we said it in line and we're gonna set it as block, so that functions as entirely separate pieces So here we've got our three different blocks . They're set up to be in line, and this now is starting to look a little bit more like a navigation bar. Also also, because we've selected each list item, we can specify Ah, with to them. So maybe if we want to set them out 100 pics eso to be presented a little bit neater, weaken do that as well. And now, typically, I don't wanna have this red background on my list items because I like to separate that out for my hyperlinked items within the U L list. Items on again. This is something that is, ah, preference depending on how you want to design and how you want to look eso with the navigation bar, let's say I want to have a complete background color for the navigation bar and I can set a background to there. It's a background color, and I'm gonna leave it kind of a grayish color. And when you're designing and you're unsure of your color scheme, it's always a good idea to use grayscale s so that you can you can better get a better idea of what colors are gonna be dark. What colors? They're going to be light and how things gonna look against each other and then update when she get an actual color schema update those, uh, grease scale colors to match the actual colors that you're going to be using eso We're gonna set it at a with of 100 just to make sure it takes up that entire with their eso. Now we've got the list items. We've got a new ordered list as a whole. So now we need to focus on each individual so much Sure what happened there? It looks like it's ah reloaded their randomly. Uh, so it actually had saved itself. So, um, that's what happened. There s oh, now I want to actually isolate out anything that's in the navigation, anything that's under a new ordered list. Anything that has ah is a list item and has ah hyperlink. And this is where I apply most of my styling to it. A swell as the hover styling which we're going to look at in a second eso. First thing I want to do is I want to display it, Lee as a block that should be dis play and, uh, we want toe align the text to be center. We also we want to bring that text states so that it's visible so color of the text, so make it white. So it really stands out. One thing we might want to do is remove out our underlines there. We could do that with text, so that's text decoration. So that removes the underlines of the navigation bar. Also, here is a good spot toe add in some padding, so if one of its empowering top and bottom. So bring that parting note and maybe we want to make it look like separate blocks. So background color. And I'm gonna set this to be dark of slightly darker, so it stands out a little bit there. I can either bring my potting down here or I can update, uh, the height of my bar. So I just bring the potting down So everything is in lying there and typically with navigation bars. So it doesn't even look really like these air clickable eso We do need to add in ability to make whenever we're hovering over it to make a clickable. So that is a and we've got this selector here so that it's a knack shin selectors. So it's hover whenever we hover. Older were an update our background color, and I'm gonna update it to be black. So I'm gonna stay with my grey scale on now. We see whenever I hover over it, it does look like they're clickable. We get a little bit of highlighting their and moving over it. That's how you set up your navigation menu in CSS. Transform your HTML into an actual knave bar in upcoming lesson where look at how it can transform their heading area there and do a little bit more with our content here and then also are footer to make it look more like a modern website, So it's coming up in the next lesson. 12. 15 HTML Lesson Styling Create webpage: in this lesson, we're gonna build out, continue to build out our HTML page on and apply some additional styling to it. So images typically because I'm linking to all images. So I wanna set Amat. Maybe I want to set all my images to be 50%. Float them right margin. So typically here, I would want to identify the image that I want to have access to an update eso For now. I'm just gonna leave it as image. But you might want to set a particular image class and have multiple classes that you work with over here for heading. So this is has to do with the entire website the way that it's gonna look. So all the main header areas. I want to look the same. Eso whereas images, you might have variations of how you want your images presented s. The first thing I want to do is I want to set a background color in order to better distinguish it from the rest of the content. So I'm gonna set a background color sticking with my Greece. Great scaling. I want to have some padding around too. So maybe something like 25 picks or something like that. Also color. So any of that fought in there I intercept to be white and adjust the fought size so make it bigger. And also maybe I wanna have a particular height that I want to specify. So I'm gonna just set up to maybe 200 pics. 2000 picks would have been a little bit too much or maybe even two hundreds, maybe a little bit too much. So I forgot I had made my zoom zoomed in on it. So maybe I can bring this down to 100 or something like that. So this allows us Teoh reserve this much spacing for our head section and this would create that uniform. Look for all the different pages that we have also going down here at the footer So footer doesn't really stand out. Eso I do want to update something for the main footer and again. First thing I want to do is do my background so that it again it stands out. So generally like to keep my footers Ah, later shade and patting their to 25 picks. Now we've got our header or footer Potting there. Um so I'm gonna gonna just adjust thes eso that I'm not adding padding for the top and or I'm adding on only for the top and bottom. And I'm not adding it for did that backwards there. So this way I'm not adding it for the left and right, because we saw that when I add it left and right, it's it brought it in a little bit too much. So maybe five picks makes a little bit more sense. So something like that. So that brings in that wording. And when we look at our section so we want to actually break apart thes sections to eso we hadn't given the main section any i d s o. I could give it an I d. Of mean section and apply some and apply styling to each section under main section and do some padding around there. So maybe we want to do 25 picks or something like that. Apply some potting around those sections and I'm just looking at this, and I think I've got this main section in the wrong spot. So I already had it called containers. So maybe I just got an update that mean section to be container, and that's gonna make a little bit more sense. So it's gonna be Mawr presented here. So the top and bottom 10 picks bring it in 25 picks and again the depending on how your design is working, you might want to make some adjustments to this. And also typically, we probably would want to change our font. Maybe our fought for our entire document. Or maybe for just this content area, the container area. Eso We've got an option over here with Google fonts, which gives you the access to a lot of really cool thoughts. And all I have to do is simply go through. You can search. You can check which ones are popular. There's a bunch of different options here for stiles categories. So I'm gonna select the handwriting one cause that I think is going to stand out the most eso we can list out all the different Really cool handwriting styles. Eso If I wanted to access this one, I could just simply select this quick use here, and this will explain how I can add it in within my styles. So I have a few options here. I can add it in with my head section or it could simply import into my style. So I'm gonna add this into my head section of gonna actually flip all of my code pen work back into my HTML document so I can add in a style there, go back out to, uh, to hear keep that fought family there. And that's how we get access to Google thoughts. So that gives you the option to really bring out a bunch of different font styles really easily into your Web documents. Go back over here and I'm gonna copy all of this in so everything from image down and go back into my HTML and copy that going to hear. And I didn't all of that work that we've just done in the past few lessons and make sure that I've got everything out of body pasted and save it. And now it can go to our Web page and we can enjoy our newly transformed website that's actually gonna look more like an actual presentable website. And from here you can start building out your website and adjusting the styling as needed and one other finishing touch I do want to remove that yellow from that heading eso Maybe I want to just that style because it does seem like it's standing out a little bit too much. Eso maybe I want to quickly adjust if it's any, each one the highlight and will up just that background color to be, um, or toned down color. So something like that I am. Go back and refresh the page so that air heading one does stand out, it's gonna have a little bit of color to it, actually can't really see it. But, uh, we do have something there, so it's gonna redo that and pick something that actually stands out a little bit more. And maybe I should have just stuck with the grayscale options and made it like an off white or something like that. And so just gonna keep it as an H one there and refresh it and now are each one is gonna have this kind of grayish background, so they're going to stand out even more within the website. And, of course, again you could use something like code pen, and it's really helpful because it allows you to visually see the styling that you're applying right within your page. It's a very useful tool as well as you have abilities to see that and share it within, um online. And it's with the CSS styling that you have the ability to transform a plain boring HTML page into really interesting format with styling. And then, of course, depending on the styling that you apply, it could look totally different. And as long as you've got your HTML code structured, you should be able to apply your styling fairly easily into the court.