Learn HTML in one day/ HTML full course. learn HTML and earn money.

 

HTML full course for beginners learn HTML in one day and earn money .

Introduction.

Hey, welcome to this blog my name is Terrius. In this course, I'm gonna cover everything you need to know to get started writing HTML stands for hypertext Mark-up language and it's basically just a language that we can use to create web pages.

 So if you've ever been on the internet almost every single page on the internet was written in this language called HTML And in HTML you can define the series of HTML tags Which will define the layout and the look and the feel of your website So if you can learn what those HTML tags are and if you can learn where to put them and how to use them together Then you can build your own website.

 It's actually  lot easier than people think to build a custom website I mean so often people will run off to use like content management systems or they use programs to build websites for them

But sometimes it's fun to just go in and get your hands dirty and start building a website from scratch And you're gonna learn how to do that in this course in this course I'm gonna cover the basics of using HTML So from the first lesson on to the last lesson You're gonna be writing HTML you're gonna be learning new tags and you're gonna be learning new ways to manipulate a webpage to make it Look and feel the way that you want it to HTML is an invaluable skill I mean even just putting HTML experience on your resume Could help you get a job one day or it could just be something cool that you could brag to your friends about as awesome As it is I think sometimes people can be a little bit Intimidated to try and learn HTML because it seems like there's so much to learn and it seems so complicated

I'm here to tell you that it's actually really Easy to learn and I'm gonna be here with you throughout the entire course walking you through all of the basics.

 Trust me I've known HTML for a while so I know what's worth learning and what's not we're gonna cover everything that you need We're going to talk about all the important things and by the end of this course,

 you're gonna have a true and full Understanding of what hTML is how to use it and how to build your own website In this tutorial I want to talk to you about choosing a text editor for HTML now whenever you are writing HTML,

you're actually writing it inside of what's called an HTML file So this is a file just a lot like a text file but instead of a dot Txt or a dot do CX extension. We have a dot HTML extension so with HTML you're basically just writing these HTML files and then your web browser is able to take those files and Display them as web pages and it's some of this really cool thing but the first step in writing HTML is picking some program that you can use to write these HTML files and There's a bunch of different options when you're trying to choose an HTML text editor and I think a lot of times it can get a little bit confusing or maybe even a little bit overwhelming just because there's so many options and so many people have different opinions on which is the best Editor and you know,

 

what's the best thing for beginners to do in this video?

 I just want to give you an overview of like what are your options and then maybe give you some recommendations? As far as like where to start so with HTML text editors,

really all you need is just a simple text editor so any text editor that you have which is capable of editing files and saving them in different formats is gonna work for you and Generally when you're writing HTML,

 you don't want to use like a word processing program There's a lot of word processors out there, you know Microsoft Word Google Docs LibreOffice

 These are like these big word processing programs and This is generally not something that you want to use so you don't want to be typing out your HTML inside of a you know, Microsoft Word,

that's Kind of an overkill when you're running HTML the simpler the better So a lot of times for beginners people will recommend that you use the just very simple text editor that you have on your computer On windows

 it's gonna be notepad on Mac It's like TextEdit and these are just the bare-bones Simple text editors and it's actually more than enough that you need to write HTML and so like I said generally for beginners writing HTML in something simple like notepad or TextEdit really forces you to focus on writing the HTML and you to type out every single line and you have to really look to make sure that everything's formatted correctly and Ultimately,

 it'll just help you to really grasp the fundamentals But if you're somebody who doesn't want to use like notepad or TextEdit You can actually use a specially designed Program and there's a bunch of these programs out there which are specially designed to write HTML in some of the popular programs There's one called atom sublime Brackets txt regular web storm.

 

 There's a bunch of these different programs that have been developed by different companies and you can go online and do a bunch of research, but Essentially what these are  programs that are especially designed to help you write your HTML So they'll take the HTML and they might display it differently They might give you the ability to use like add-ons or different features that will make writing HTML a little bit easier But as a penalty for that They're also a little bit more complicated to use and so like I said generally for beginners like the less Complicated things are the better.

 

 So you may want to err more on the side of doing something simple And then once you learn HTML move up to one of these other programs,

I want to show you sort of the difference in what? these might look like So over here, I have TextEdit and this is just the default like text editor on Macs So if I open this you'll see here I have this file and this is actually an HTML file So inside of this file I have written a bunch of HTML and this is like the simplest HTML document you're ever gonna see But this is what writing HTML would look like in something like this and so if I wanted to add some more HTML down here I could just type it out and You know,

it's very simple there's nothing to configure there's nothing to add on you just sort of write out your HTML But something more complicated it would be a program like this This is called Adam and this is one of those text editors.

 

 I was talking about and this makes it you know a little bit easier for you to Write the HTML you can see it's formatted a little bit differently, right? So This is the same code by the way. So over here, these little tags are color. This is colored up here So there's different colors generally programs Like this will allow you to choose different themes so I could you know Make the whole look in the feel of this different.

 

So there's a lot of really cool options and Configuration options that you can use with a text editor like this But we also need to understand is writing HTML and this is doing exactly the same thing as this doing functionally These are the same thing.

 

 They're just you know, it's an environment for us to write HTML in so here's my recommendation to you I would definitely recommend and a lot of people recommend this starting with a simple text editor like this. It doesn't have to be TextEdit, but it can be something simple and the whole idea Is that the simpler the better

 

when you're first learning HTML?

You don't want to have to worry about you know, configuring different things or working with some heavy text editor you know using something light and simple like TextEdit is just gonna allow you to focus on the HTML and then once you have a grasp for writing HTML And you really feel comfortable doing it. Then you can move up to a program like this now, obviously,

 that's just my recommendation You don't have to listen to me. And if you do want to choose a program like this Definitely do your research try out a couple different programs see which one fits for you You're gonna hear a lot of people online saying like this text editor is the best that one's the best, you know People always get into little fights about those things.

 

 But the best text editor is the one that is right for you And so it's the one that you enjoy using the most Don't listen so much to what other people are saying the best way to pick is just to try a bunch of these different text editors and as you go through this course Even you can try a bunch of different ones and see how you like using each one but again for beginners I would recommend starting simple HTML is a really simple language And so the less you can bog it down with like all these Plugins and add-ons and themes like the better it is because with web development and just programming in general It's usually the simpler and the more straightforward something is the better it is In this tutorial I want to talk to you about creating your first HTML file So I'm going to show you how to create an HTML file I'll show you how you can view that HTML file on your web browser and

I'll show you how to set up your HTML file with some default HTML code in order to make it work properly So the first thing I'm going to do is create a folder for my project so I'm gonna create a folder that I can put my HTML files in for my website over here in my file explorer I'm just gonna make a new folder and I'm just gonna call this GA underscores site for draft Khadim e site and then now what we can do is open up this folder inside of my text editor so I'm gonna come over here and I'll just this project folder And now inside of this folder I'm gonna create a new file so I'm gonna say new file and I'm just gonna call this Index dot HTML Now the reason I'm naming this file index dot HTML is because generally when you're creating your first web page You want to name it index dot HTML Index that HTML is a special file name that we can use and if a file is named index.html And it's at the root directory of your folder. Then your web browser will think that that's the home page of your website So if you're just creating one web page like this,

 it's a good idea for us to name it index dot HTML But really you can name it whatever you want. I'm gonna name mine index.html and So now we have our HTML file open. So this is actually a File now that we can use and view on our web browser So if I just came over here and type hello world I can actually take this file and I'm just gonna open it up inside of my web browser So I'm gonna click open open with and then I'll open it with my web browser So I'm going to open it with Google Chrome And now what will happen and you'll see this file will open up and over here on the web browser We have our text.

 

So this is like the simplest purest form of HTML which is just typing out some bare-bones text inside of an HTML file and It'll display here on our screen. But if we want to have an HTML file that's like an official file and that's structured correctly We're actually gonna have to add in some extra Code in here so I'm gonna get rid of this and we're gonna create what's called an HTML tag Now HTML is a language that's used to define Layouts for web pages and we can define those layouts Using things called tags so I can create a series of tags and those tags will basically tell my web browser How I want my website to look and what content I want to have on my website.

 

So in order to kind of Start creating our HTML file.

 We're gonna have to create a basic Skeleton of HTML tags and these are just standard tags that every HTML file is gonna have and they're basically going to give our browser Different information about what's in our file so up here The first tag that I want to create is gonna be called doctype and we're basically going to define what the document type of this file is gonna be and We're gonna create an HTML file.

 

 So i'm gonna type an exclamation point Do see typ e all caps just like that and then I want to say HTML So this tag is basically telling my web browser the type of this document is HTML so, this is an HTML document and Now down here. I can start creating what are called container tags.

 

 So this is a single tag We only need one of these tags, but in HTML There's a lot of tags which are called container tags and it basically means that there's two tags So there's a starting tag and there's an ending tag and you can put other tags inside of them So they act as containers for either content or other HTML tags And the first one we're gonna create is just called the HTML tag, so I'm gonna make it less than sign HTML and a greater than sign and now I can close off this tag So this is the starting tag, and I want to create an ending tag So I'm going to create that down here and the way that you create an Tagg is you take the name of the starting tag and You basically just put a forward slash before it and then you type out the name of the starting tag So this is now a pair of tags and you can see the relationship right? So up here. We have the starting tag So hTML is the name of this tag, you could say that this is an HTML tag and this is the ending tag So it uses that same name,

but it uses this forward slash so that forward slash is used to denote that this is the ending tag and this HTML tag is Gonna be necessary for any HTML files that you have.

 

This is basically like the highest level tag in our website It's like the overall container tag for our website. And so all of the HTML code and HTML tags are gonna go inside of here So now there's two other sets of tags that I need to create The first set is called the head tags, and the second is called the body tags So in any HTML file,

there's two basic sections There's the head of the document and then there's the body of the document and the head of the document Defines data about the document so we can define things like the title of the document we can give the document a description We could define other attributes about the document like maybe an image that's associated to the document We can also use the head to import any resources that we need into our HTML file so you'll find out later that we can actually link this HTML file to other types of files and Inside of the head we can do all of that. So the head is sort of like the settings of the HTML file It's like the command centre It's sort of like metadata about the actual file and we can create the head by creating head tags So it's gonna be a less than sign we're gonna type head and now we can close off this tag just like that

and Now I'm going to create a body tag So the body tag is where we're gonna put like the meat and the bones of the HTML page So the body tag is where all of our HTML content is going to go Generally, the body is gonna be a lot bigger than the head The body is gonna be where you're actually putting all the content for your web page So anything that's in the body for the most part is gonna show up or at least it's gonna get rendered by the browser Now down here. I'm just gonna make these body tags. So I'm gonna say body and we'll make another closing tag Body and so I'm defining all of these different tags And when I open this file up inside of my web browser The web browser is able to look through all of these tags and figure out information about the page so the web browser can actually like parse through all of these different tags and it can figure out how to Display all of the information so you can define information and you can use tags to help define that information and layout that information differently and the web browser will be able to parse through all of that and basically Decipher it and use it to build a website.

 

 So it's really cool Now one thing I want to point out is the way that I'm formatting everything so you'll notice here that I have these HTML tags and Inside of these HTML tags. I have this head tag, and I have this body tag So I want to point out the relationship between all of these tags And I'm also going to introduce you guys to some terminology The first thing you want to notice is that I'm indenting the head tag And I'm indenting the body tag so you can see there's like a couple of spaces here this is basically just a tab and Generally when you're writing HTML You want to indent all of your files? And so the rules for indenting are basically like we have this container, right? So I have this HTML tag and this HTML tag and inside of here. We have the head in the body So any tags that are inside other tags you want to indent and so it's just like this Right this head tag is inside of this HTML tag,

 so I'm indenting it same thing with the body I'm indenting it and that will basically visually help you to decipher the relationships between the tags and we can actually define the relationships with these tags and one of the most common ways to do that is with like family terminology So we would refer to this HTML tag up here as the parent of this head tag And this body tag, so the body tag is the child of the HTML tag because it's inside of it So if you ever talking to like HTML developers a lot of times, they'll you that terminology they'll say like oh the head tag is the child of the HTML tag so I could ask you like What's the parent of this body tag and the answer would be the HTML tag because the body tag is? Inside of the HTML tag we would also define the head tag and the body tag as siblings So these would be sibling tags because they share the same parent and so you can kind of understand that relationship so if I was to create a series of tags inside of here another tag We can make is like a paragraph.

 

 Actually, you would want to put it in the head. We want to put it in the body So I could create a paragraph tag and don't worry too much about what paragraph tags are we're gonna get into that. But this Paragraph tag would be the grandchild of this HTML tag And it would be the child of this body tag So that's kind of like some terminology that you're gonna hear a lot, you know, generally we're defining these HTML tags in terms of like generational syntax,

so parent child grandparent you get the point So now that we have this basic HTML skeleton laid out. We essentially have everything that we need for This website and so I can refresh Or I can save this page and I'm actually gonna head over here into my browser And now when we refresh this page, you'll see that nothing happens. So this is a completely blank HTML document it's like the simplest HTML document that we could ever write So I'm gonna show you one more tag that you can use and this is called the title tag So up here in the head of the document.

 

I'm going to create another tag called title and this tag We're gonna put some information in here. So generally when you have HTML tags certain tags are meant as containers So for example, this HTML set of tags is a container It's basically used to hold other tags, but certain tags are used to hold content So this title tag is used to hold text and so inside of these title tags We want to put text and this is going to be the title of my website so I could say like Mike's Website and this is gonna now be the official title of our website and you'll notice that if I come over my web browser Look up here at this tab. You can see the title up here is currently Index.html. That's the name of the file. But when I refresh this file,

you'll see that it updates to Mike's website so this is a good example of the browser is able to parse through our website and it's able to read these title tags and figure out what the title of our website is So these are the kind of tags that you can put inside of your head or like title tags You know tags that are defining information about the HTML document And so down here in the body tag,

 I could put any content that I want to have inside of my web page so I can put like Hello world Down here. And now when I refresh the page, it'll show up in my web browser So that's how you want to go writing out content on your website Any of the content is gonna go inside of these body tags and throughout the rest of this course We're gonna get into all the cool tags that you can put inside this body tag,

 seriously There's so many of these awesome tags in HTML and there's so many tags that can help us to do awesome things Inside of our web browser. So I hope you stick around and we'll learn how to put stuff inside the body In this tutorial I want to talk to you about using some basic HTML tags So we're gonna look at some of the most Common HTML tags that you're going to be using in your website and we'll use them to define a pretty good looking site So by the end of this video you'll have a good idea of how to layout a bunch of content inside of HTML And display it on your browser the first tag that I want to show you is a tag that actually is going to go up here in the head of our document and I'm gonna put it right here above the title and Right now I just have a basic skeleton of an HTML file It's sort of like the simplest version of an HTML file and one thing that I want to do is define something called a meta tag and a meta tag is basically a Tag that defines information about our file So it's giving us metadata so I can use this less than sign and I'm gonna define this meta tag And I'm basically just gonna use this to define the character encoding for my webpage so this is basically just telling the web browser what types of characters I'm using inside of this document so I can say Char set is equal to and then inside of these quotation marks.

 

I'm just gonna say UTF - 8 and this will define the character set for my document as utf-8 Which is like a really common character set. It's the character set that I'm using So like I said, this is a meta tag, and it's used to define information about our file I'm gonna define one more meta tag, and this is gonna be a meta description tag and so we can use this tag to basically give a Description for our website and this tag can be used by things like web browsers. So for example,

 Google Could go into our file look at this meta tag, and it can use it to display information on its search pages So generally when you search for something on Google a lot of times they'll be like a little description of it and they're using this tag from the file so I can say meta and I'm gonna say name is equal to description and now I'm gonna say Content is Equal to and now I can type the description for my website so I could say like this is an awesome Website and now we have this description which is just like this is an awesome website and I'm gonna go ahead and end this tag So I want to show you guys one concept or you know,

one thing in HTML, which is HTML attributes now we have these HTML tags. So this is a meta tag right here This is a meta tag, but inside of these tags, we have things called attributes. Sometimes people call them attributes Sometimes people call them properties. Basically, we're passing this tag some information So I have my meta tag, and I'm giving this tag some custom information So inside of this meta tag,

 I'm telling it what type of information I wanted to find So I'm telling it that I want to define a description and I'm telling it what that description should be So a lot of times in these HTML tags, you can pass them attributes or properties And those tags will be able to use those attributes and properties to do their job So this meta tags job is to define metadata about the file and when we pass it these attributes or properties We're giving it the information that it needs to define that metadata So a lot of times inside of our HTML tags We're gonna have different attributes and we're gonna have to give those tags different information So just keep that in mind and these meta tags kind of do a good job of showing that because they take you like this one takes two attributes So those are two tags that we can define up here in the head of our document now Let's move down into the body of our document and we'll start having some fun So the body of the document is where we can put all of like the actual content for our website so all this stuff that you see on the website is generally gonna go here inside the body now the first tag I want to show you guys is Basically a tag that we can use to define a header or like a title on our website so over here I have this Hello world,

 but I'm just gonna get rid of that because I don't really like it Imagine that I want to give my website a headache, right? So I wanted to define like the heading for my website well over here I can use something called a heading tag And the way that we write this heading tag is with lesson sign and I'm gonna use this H and then after H I'm gonna give this a number so I can give this a number either 1 through 6 so I can give it a 2 3 4 5 or a 6 and this will basically Spit out a header for our website.

 

 So header 1 let's just say that this is gonna be Mike's Website and I'm gonna use this ending tag right here.

 

 So this is an example of the tag That's gonna take some text input inside of it. And now when I go over here and I refresh my page You'll notice that Mike's website shows up and it's nice and big right? So I have this nice big header on my website and it's you know The text is really big and it looks really good And in addition to defining an h1, I could also make this an h2 And so now when I make this an h2, it's gonna be a little bit smaller So you see that it shrunk a little bit and I can make this an h4, and it's gonna shrink even more and I can go all the way down to an h6 Which is the smallest size of header that hTML is gonna allow us to define and that's gonna be a pretty small header So anytime you want to sort of like announce something or you want a like title? maybe like a section of a document you can use these headers and the headers will look a little bit bigger and bolder than just normal text would So in addition to having a header,

maybe we'll leave this as an h2. I can also define just regular textual information so I can define like a paragraph on my website and If you're writing like an article or a web page a lot of times you're gonna want to use a paragraph, right? You're gonna want to have some text on your website so I can make what's called a paragraph tag and a paragraph tag is just gonna be P and then we're also going to need an ending tag and now any text that I write in here is gonna go inside of its own paragraph so I could write like this is my paragraph and Now when I refresh my page You'll see that this showed up in its own paragraph. And what's cool about paragraphs is that they'll Automatically sort of format themselves so I could actually make another paragraph right below this So we could say this is another paragraph and this paragraph will automatically space itself out and it'll be Below this other paragraph.

 

 Okay, so we have this paragraph and then we have this paragraph and they're kind of just like lined up like that and you can put as Much text as you want inside these paragraphs and generally whenever you're writing out like a block of text you're gonna want to use this paragraph tag Now we can also style some of the elements inside of this paragraph So let's say that I wanted this word here paragraph to be bolded Well,

 I can use another special HTML tag, which is the bold tag and this will make this word bow so I can do less than sign and the bold tag is just a B and then You want to end it over here? So inside of these open and closed bold tags We can put any of the text inside of a paragraph or inside of another place in our website That we want to be bold. So now when I refresh this page,

 you'll see that paragraph is bold I can also use another tag so instead of making it bold we can make it italicize so I could use an eye right here instead of a B and now instead of being bold this text is gonna be italicized and you can actually embed these tags inside one another so I could use the bold tags and the italics tags so over here,

I'll take this bold tag and I'll take this other ending bold tag and inside of the bold tags I'm gonna put the italics tags and then I'm gonna put the paragraph and Now we'll have a bold italics Paragraph just like that. So it's just Italicizing one of the words and building with a word at the same time So that's a really great way for you to you know You could italicize certain words or you can bold certain words and it really makes it easy just by using those tags Another thing that we can do is we can control the layout of the document So one of the things with HTML is that it lays out our web pages In a very specific way and I want to kind of show you how that happens so when HTML lays out our web page, it basically takes the layout that we define here inside the body and Displays it over here on the web page So the order that we have the elements here in the document is the order that they're gonna show up on the browser So if I was to cut out this paragraph and paste it up here above the header now my documents Layout and structure will reflect that So now the paragraph is gonna be above the website the website header and then this other paragraphs gonna be below it so the way that you order these Tags inside of HTML is the way that they're gonna show up on the website. And the other thing is HTML doesn't necessarily care about The way that we format this file So in other words HTML doesn't care about the whitespace in other words if I made two Extra lines here.

 

You might think okay Now there's going to be two extra lines between the paragraph and the title, right because there's all this space inside of here But that's actually not the case When I refresh the page nothing happens HTML lays itself out and orders itself out using these tags and so it doesn't care about any of this Whitespace that's inside of our files.

 

 It really just cares about what's inside these tags So imagine that we wanted to create some whitespace, right? And I'm just gonna put this header back up here so it's a little bit easier to read I Could actually create a new line so let's say here inside of this after this header - I wanted to make a new line I can use another HTML tag which is called a break and the break tag will basically create a new line in our HTML document so I can just do a lesson sign of BR and then we're gonna do a forward slash and we're gonna do a greater than sign and you'll see now when I refresh this page,

there should be a space between The title and between this first paragraph so you can see that we have this space here and you can use as many of these Great tags as you want I can make two of them and now it's gonna be even further down So these break tags can be really good to kind of break things up another tag that I can use is called the horizontal rule tab and the horizontal rule tab will basically give us a Straight line right across the website that's going to help us to separate some of our content So I can make that tag I can say HR and then I'm gonna do a forward slash and I'm gonna do a greater than sign and so you'll notice that this HR tag was a lot like that Br tag that we used before and this is another special type of HTML tag So this is a tag that's called a single tag, right so over here in this header two. We have one tag And then we have this other ending tag,

 

but sometimes they'll be tags For example like this horizontal rule tab where you don't really need two tags Like there's nothing that needs to go inside of them. And so it's just gonna be a single tag and a lot of times With these single tags, you will format them this way so you'll write out the name and then we'll use this ending sign and then you use this greater than sign and Actually in certain cases you can actually just get rid of this forward slash but we're gonna keep it in because it's like technically correct HTML so now you'll see that instead of a break here we're gonna have a horizontal line and this horizontal line is basically just something we could use to break up our Content right you could put you could even put like another one in here and it might style it grace You could have like a double line there whatever and the horizontal rule will go all the way across the page There's also a couple other tags that we can use to control the size of our text. So down here in this paragraph Let's say that we wanted to make one of these words bigger.

 For example, let's say we wanted to make this bigger right here we can use two tags called big and small and they'll actually make our Text a little bit bigger or smaller. So I can do the big tag here and I'll do the ending tag So this works just like all those other tags where anything that goes inside of this big tag is actually gonna get bigger So now watch this this right here When I refresh my page It's actually gonna get a little bit a little bit bigger and you can see that it did and so I could do the same Thing with this is tag down here. Let's make this bigger as well just to really illustrate this and now when I refresh this page The is tag is also gonna get bigger.

 

So it doesn't get that much bigger, but you can use this to kind of Control how the text looks like. Maybe you want some text to be a little bit bigger or smaller I can do the same thing. But with small tags so here on this my word I'm gonna give this a small tag. So we'll say small and then again, we're gonna end it and Now watch the my right here. This is gonna get smaller.

 

So You can see that it shrunk a little bit so using those big and those small tags can help us to control the size of the text on our website we can also use other tags called subscripts and superscripts So this can be used to format like subscripts and superscripts, especially if you're doing something like math You're gonna want to use something like this.

 

So I'm gonna go over here into this paragraph and we'll create a subscript and a superscript so imagine that I wanted to like type out the chemical formula for water right we could say h2o But this too should actually be a subscript, right it should be like a small little too right down below H so I can use this sub tag and I can surround this too with the sub tag and Now this is gonna be like a little bit smaller.

 

So you'll see here we have h2o So it's formatted correctly. I could also do the same thing with a superscript so Another good example would be like math so I could say like maybe we want to write out 10 Squared so like 10 ^ - I can use this superscript Tag and this will make this a superscript So now we have 10 squared So these are all like little HTML tags that you can basically just use to Format the text on your website and when HTML was first written you have to understand that websites were just all textual so nowadays,

 we have like a bunch of images and videos and all these different things on our web pages, but you know Generally HTML was just used to write out text and there were some images and some other stuff But there's a lot of HTML tags that just deal with formatting your So these are all Tags that can come in handy And you can definitely use them to format text inside of your paragraphs or you can use any of these Tags inside of other elements.

 

So I Don't want you to think you can know that you can only use these tags inside of like a paragraph you can use these tags Anywhere that there's text on your website so we could use these up here in the header or you could use them in any other HTML tag that you want so those are there's some basic tags Obviously there's a bunch of these tags that we can learn and we're gonna get into more of them But what you want to do is really get a handle for the basics And so this is really like the basics of HTML things like headers horizontal rules breaks paragraphs Get a handle for the basics and practice like fleshing out different websites using only these things and then when you move on to more complex HTML you'll be better off for it because you know the fundamentals In this tutorial I want to talk to you about comments in HTML Now comments are basically little pieces of text that you can write inside of your HTML Which will be ignored by the browser and generally the purpose of comments is for either yourself to read or for other Developers to read so you can write an HTML comment inside of your HTML code and it'll be completely ignored by the web browser But if for example you come back to your code later you might leave yourself a little reminder or you could explain what a little block of code is doing or If you give your file to another developer,

you can use comments to give them little notes now I'm gonna show you how you can use comments inside of HTML and then we're also going to talk about the comments best practice so like how can you use comments the best way in HTML the way that you can create a comment is by using a very particular syntax and so I can create a comment by using a less than sign an exclamation point and then two hyphens and so now you can see here in my text editor that the when I put this second - in here like the look of the comment actually changed and That's because now we're in a comment and so any text that I type is gonna be grayed out So this text looks different from the text out here and basically that's just to indicate that okay We have now an HTML comment One of the things I want to point out is that when I created this comment all the code below it Turned also into this little comment. So now what I'm doing is I'm creating an opening tag for a comment so a comment is gonna go inside of these opening and closing tags and I can close off this comment tag by using a Hyphen, - and a greater than sign So now anything inside of these tags is gonna be a comment and I can run these comments down across multiple lines So I can create comments you know that span a couple different lines in our text and like I said comments are basically just special pieces of text that aren't gonna get rendered by the browser so Generally, the browser's not just gonna not gonna look at them. They're just kind of kind of ignore them and In here, you can just put little so I could say like to do like I need to work on this or I could say You know don't display this,

 

you know, really any comment that you want to put I mean It really doesn't matter but comments can definitely be useful and you're gonna want to know how to use comments You can also use comments to comment out Specific pieces of code. So let's say for example that I didn't want this H2 in this horizontal rule to show up so that's like this header over here my website I could take this and surround it with comments and now this basically just won't show up on my website and You can see because the browser is ignoring it So a lot of times people who write HTML in addition to using comments to like write little notes They'll also just use comments to kind of comment out little pieces of code So it's kind of useful, right? Because none of this code is gonna get rendered by the browser now so if I wanted to maybe try a different piece of code or you know Try something else I can comment this code out and it's still gonna be there inside of the HTML file But it's not gonna get used by the browser and another thing a lot of people will do is they'll put like the reason why they comment about so you can just say like redoing this or something and then you know that would mean like you're Rewriting whatever is in here and you just want to have a backup inside the comment.

 

 So that's the basics of comments They're really simple, but they're also really powerful now One word of I guess kind of warning and this is sort of like me just talking like with my personal opinion I think when you're using comments, you need to use them sparingly I think some people have a bad habit of just writing out like all of these, you know Really long comments explaining things and doing things, you know personally I think the purpose of a comment is is to explain something that can't be explained with code So just sometimes people will write like a bunch of messy code So they'll write out a bunch of messy HTML and then it'll just write a comment above it being like oh it does this like oh, this is the header Meanwhile, the code is like, you know a complete disaster.

 

 It's really messy I'm a big believer in letting the HTML speak for itself And I think it's a decent philosophy to adopt You know when you let the HTML speak for itself You make sure that you write clean and readable HTML and that way when somebody goes to view your HTML document they don't even need any Comments to explain anything because it's all clear You know what? You don't want to be as the guy who writes a bunch of messy code writes a comment telling what it does Because it doesn't help anyone out Right.

 

 Sure The comments telling me what this line of code is doing but it doesn't help me if I need to go in there or modify It so before you use a comment try to explain what you're doing using your HTML comments are used for things that can't be explained with the HTML and they can also be used like I said to Comment out lines of code and you know put things on hold for a second hide them from the browser, you know Really?

 This is all just kind of my opinion and me kind of riffing about comments, but use comments, however you want and Be sure to add them into your HTML files to increase your productivity In this tutorial I want to talk to you about styles and colors one of the cool things you can do in HTML is you can actually style the individual elements and when you style HTML elements you can use something called a style attribute and you can actually Give each of these HTML elements certain styling information

 

Now when we're talking about styling HTML There's an entire other subject that you can get into which is called CSS and that stands for cascading Style sheet. So in this lesson I just want to kind of give you an introduction into how you can use basic CSS to style Some of these HTML elements now This isn't a meant to be a full course on CSS And in fact, this draft Academy course is really only meant to be used for HTML We have another course that talks solely about CSS, but just know for now. I want to introduce you to the topic of styling some of your HTML You can see over here. I have this header up here And then I have this paragraph here in my file and I can actually give these two color attributes I can color the text and I can actually give them a background color as well So in this lesson,

I'm going to show you how you can start adding some basic colors onto the elements for your HTML But again, keep in mind that this isn't meant to be like a full course on CSS This isn't meant to be a full course on styling. I just want to give you guys an introduction So in here in this paragraph I can pass this paragraph in attribute So in HTML in addition to just defining the tag, you can also give the HTML tag certain information These are called like attributes or properties or some people call them parameters I'm gonna give this something called Style,

so I type out style is equal to and now inside of these quotation marks I can type out some different style attributes that I want to give to this element One of them is color and color is going to control the color of the text for this paragraph I can do a colon and now I can basically just type out any color that I want So let's use blue because that's one of my favorite colors So now when I refresh this page, you'll notice that this paragraph over here has turned blue And so instead of just being that boring black color now,

 it's blue we could also change it to red and Now it will be red so you can use a bunch of these different colors and you can change the color of the text I could also change something called background color so in addition to changing the color to red, let's change the background color to Maybe blue so now I can type out background - color and I can pass in another color.

 

So let's make this blue And so now this paragraph will have its text colored as red and it'll have its background colored as blue Just like that. And so you can use these different color combinations to control the background of the text and the color of the text and you can also use these attributes and other elements so For example, I could use this same thing inside of this header right here. I could say Style, I remember this is just a an attribute that we're passing in I can say color and now we'll make this green So I can make this thing green and I can also use these stylings on these container tags So up here.

 

 We have this body tag I could give this a style as well so I can say style and why don't we give this a background color? so I'm gonna give this a background color of Light blue, so I'll say background color light blue and Now what you'll see is the entire body. So the entire body of our HTML So all this stuff is gonna turn blue and that's exactly what happens so you can use this Background color inside of this body tag to control the background of the website And what you'll notice is even though we made the background of the body light blue Since we made the background of this paragraph blue as well It's overriding the styling that we from the body so that's how you can use this style attribute in order to give your HTML elements some basic style and if you want to learn more about styling your elements JAF Academy has a full course talking about CSS where we get into all of this stuff styling your HTML doing all that But for now if you're just trying to learn HTML and I would definitely recommend learning HTML first Just know that you can use these basic coloring styles to change the look in the field of your website Now I want to show you a website where you can go to to find all of the colors that you can use.

 

So this is a website called w3 schools and you can just kind of google search like w3 schools color list and It'll give you a list of all these CSS colors. So again, don't worry too much about CSS Just know that you can use these inside of those style tags So this is just a full list of like the name of the color and if you don't want to pass in the name So like I could say like aqua inside one of those style tags and it would color the text of the background aqua You can also just put these hex tags in there So you could copy this guy and put it in place of the color name and it's still gonna work So that's just some basics on Using color and styling in HTML again. If you're just trying to learn HTML, don't worry too much about styling, but I just wanted to show you guys like the basics of styling an element just so you can kind of like get your teeth wet and start working with styling inside of your HTML In this tutorial I want to talk to you about using various HTML tags to layout the structure of your website Now we've looked at some of these basic HTML tags things like body and this HTML tag We also looked at things like headers and paragraphs all these very basic HTML Tags in this tutorial.

 

 I want to talk to you about tags that we can use to format the content on our page so these tags are gonna help us to lay out the different content on our website into different sections and Really when we're writing HTML you want to make sure that you're using the right? tags to layout your page one of the most common mistakes that new Developers to HTML make is that they don't use the correct tags and they don't use all of the HTML tags that they have Available to them to layout their pages A lot of times people won't use the right tags Or they won't lay out their pages as well as they could because maybe they don't know about certain HTML tags Or they just don't feel like taking the time to use them But in this tutorial,

I want to show you all the tags that you should be using to layout your web pages so The first thing I want to show you is how you can start laying out some of the code inside of your body Now most web pages are gonna have three distinct sections normally, there's a header and the header is like up at the top and generally the header is an element that's on every page of Your website so this could be like a navigation menu Maybe it has some branding information So it has like the name of the website and maybe a logo and you'd have links to like other parts of your websites I mean you guys have seen a website before you kind of know what a header of a website is supposed to look like The next section is the main section.

 

So this is like the meat and the bones of the website, right? This is where all the content is going to go So maybe you have would have like an article you might have different sections of an article some images. Whatever It's like the main section of the website and the third section is the footer and most websites are gonna have a footer right if you scroll all the Way down to the bottom. There's some additional navigational links again.

 

Maybe some branding information May be links to like some social media pages most websites though are gonna implement basic three Section structure the header the main and the footer and HTML has tags that we can use to Define all of those sections so here inside my body I'm gonna start by defining the header and I can just make a Header tag just like this and we'll make two of them and so now any of the code that we want to put in the header of our website is gonna go up in here and Now over here,

 I'm gonna make a mane and so we have these other tags mane And what you want to do is put all the main content of your website inside of here And finally, we can have the last one which is the footer tag so footer and again I'm just gonna close this off footer so we have this basic three tag layout We have the header. We have the main and we have the footer and these are all sibling elements So they're all they all have the same parent element Which is this body tag and a good practice whenever you're using HTML is to separate the code for these specific area So you want to put all the code for the header of your website? Inside the header tags for the main inside the main tags in the footer inside the footer tags Inside of these different tags we can also define Certain things so imagine that inside of my header tag.

 

I had a navigation menu right a lot of times in a header of a website they'll be Navigation links, so it'll be like here's the home page Then the about page Contact Us page, whatever we would want to put any of those Navigational elements inside of something called a nav tag and this nav tag is used to store navigational elements So if you had like, you know a list of different links inside your website Then you could put them here inside of these nav tag now Obviously the point of this video isn't to show you like how to build a navigation tag or a navigation list I just want to show you what you would need to use for a structure So I'm showing you like how to structure this information. So any navigational items like maybe navigational lists or navigational links are gonna go inside of Have tags and that's a special tag inside of HTML.

 

There's also some other tags that we could use inside of this main So imagine that I had like a blog website and on my blog website. I had a bunch of blog posts Well, one thing I could do would be to use what's called an article tag So I can make an article tag and then inside of those article tags I could write my blog post so I can make a tag called article and Down here. We're just gonna close this and So inside of these article tags,

 you could put all the text for your article and then the browser would know like, okay There's gonna be an article inside of here. We can also use another tag, which is called a section so generally if you're writing a blog you might have like Different sections on your website and so we can use this section tag to break up our article or really any part of your website into different sections So once again, the section tags don't have to be used with the article tag but they just happen to go together really well and that's on purpose so I could say section and We can close this off and then any of the code for like the first section of your blog post could go in here and Maybe I'll have another section And again, we can just close this off so you can make as many of these section containers as you want You can put all of the content for this section of your website And usually whenever you have a different section, you'd want to include a header for the section so you can clewd Like an h1 or h2 or h3, whatever Header that you'd want to have now I also want to talk to you guys about using headers inside of your HTML documents and this isn't something that is required to do but Generally if you're laying out an HTML page or an HTML article You want to be careful with how you're using your headers? So generally on a web page you want to have one header one and that header one will be like the main Title for the website and then below that header one you would have header twos which is define the different sections of your website So you might have this Top header one and then you'd have header twos and then you have another header two down here and then if you wanted another header Side one of those sections you would use a header three So a lot of times people will recommend using headers in like a hierarchy fashion So you'd want to have like a header 1 and then header 2? header 2 and Then inside of here like another header 3 So you'd want to define the headers of your website in this kind of like hierarchy fashion And that's not required like it's not going to change the performance of your website if you don't do that But that's sort of like a best Practice that a lot of people a lot of developers are going to use when they're designing their websites And since we're talking about laying out like the structure of the website I think that's good information to take the heart another tag that we can use to help lay out Our websites is called in a side tag and then a side tag is basically a tag that you can use for any content That's not directly Related to like the main content on the page And a good example of a scenario where you'd want to use in a side tag might be like an advertisement So a lot of websites will have advertisements like you might be using Google Adsense or you know Whatever like if you have an advertisement on your website, you could use and a side tag to define that and the aside tag Basically would just mean like this content is on the page and it's getting shown to the users But it's not directly related to like the core content of our website so those are just a bunch of different tags that you can use to help layout your website and I would Definitely consider using the tags when you're building the basic structure of your website one thing that a lot of people end up doing is they'll just sort of use like general container tags to lay out their website so they won't use the specific HTML tags that HTML has defined for them to lay out their website and one of the advantages of using these tags of you know specifying like this is the section of my website and this is another section of my website because you might say like Why do I have to define all those sections and honestly? like using tags like this isn't necessarily gonna change the look and the feel of your website like you could create a header a main and a footer for your website without using the header the Or the footer tags,

 

the purpose of those tags is one to act for organizations So if you are writing an HTML file one of your goal should be to make the file as readable as possible So when you write the file you want it to be able to be read by either yourself later on or other developers and when you use these HTML tags these structure tags It makes it a lot easier to tell what's going on Right so I can look at your HTML and I can tell like okay. Here's the header.

 

Oh, here's the main So this is where like all of the core content is. Okay. Here's the article and I need to go to the second section Here's the second section. It just makes it easier to Read the file and it just makes the organization more organized and again these tags These structural tags aren't necessarily going to change the look or the feel of the website, but they're extremely useful another reason they're useful is for search engine optimization and search engine optimization is Basically, just how your website is viewed by Search engines.

 

So a lot of well, there's actually more to it than that But that's sort of like the basic idea is like if your site has good search engine optimization Then it'll be really easy for search engines like Google To be able to go read through your site and figure out what it's about and when you use these very specific HTML tags It makes it a lot easier for something like Google to go into your website and figure out the structure of your website and figure Out where all of the content of your website is when you use these HTML tags Something like Google could easily go into your file and figure out like where the article is and it can figure out the different sections of your website and you can figure out like How your website is laid out and then it can use that information to display your website better A lot of people underestimate the power of these HTML tags And so I want to kind of instill in you guys who are watching this video the power that these tags can have you? Definitely want to use things like this to layout your websites Don't listen to people who tell you that they're not important because they definitely are important That's the reason that they're included in HTML hTML is a no-nonsense language.

 

 There's not a whole lot of fluff in there So when HTML define something, you know that it's important anyway I would always recommend laying out your files something like this you These different tags if you don't want to you don't want to but I think it takes a little extra time But it can really increase the readability and also the possibility of your file by like search engine In this tutorial I want to talk to you about using links in HTML a link is one of the most popular HTML elements and it's used to link your website to other websites on the internet so I could create a link that would bring my users to like google.com or Facebook.com or I could link to other pages on my website So if I wanted to build like a navigational list I could have links to the other pages of my website that users could click and then they go to those pages you can also Link to files things like images or PDFs and you can create those links and then users can look at those images or PDFs So I'm gonna show you how to create a link. We need to use a special HTML tag called a and After a we need to pass this tag some information We need to give it something called an H ref and the href is basically just where we want to link to so the easiest way to create a link would be to create like an external link, so Linking to a page that's not on our website. Imagine.

 

We wanted to create a link that would go to like google.com inside of this href I can just type the address to google.com so I can say HTTP colon forward slash forward slash and you need to make sure that you include this like HTTP or HTTPS part a lot of times when you will give someone a link like you won't include this it would just be like ww-whatever But when you're creating an href and you're creating a link, you need to be very specific about where you want to go So you're going to need to include this part and then I can just type Wwm so what we've effectively done is told this link attribute that we want it to link to this address which is Google and now I'll close this and I can actually close off this entire tag so we can just make this closing a tag and now inside of here I can put any Text for this link so we could say for example Google's homepage now.

 

 I also just want to point out that inside of these link tags You can put more than just text so you don't have to just put text you could actually put other HTML elements so I could put like a header in here. For example so why don't we do that will make this a header one and Now when I refresh my page, you'll see that we have this big old link over here it's this big header one and when we click on it, it will link us to google.com so I'm gonna click this and you'll see that we get transported over to Google's homepage, right? So we're over here on Google so that's how you can create a link and basically you can just go to any website that you want come up here to the URL bar copy the URL Including this like HTTP or HTTPS part throw it into the href of your link and you'll be able to link there There's one other thing that we can do though One thing I want you to notice is when I click this link it navigates me away from the website So I click this and all of a sudden we're on Google in certain cases, though You're not gonna want users to navigate away from your website when they click a link right in certain cases You might want this to open up for example in a new tab and the way that you can do that is by giving this a tag another attribute so we can say We want to say target is equal to and now inside of these quotation marks We want to say underscore the link. Ok So when you pass in this underscore blank value to this target attribute This is gonna basically tell the browser to open up this link in a new tab So now when we open up Google it's going to open up here in a new tab and we still have our website open So that's one thing that you can do to make this better And so again inside of this link I can put any HTML elements that I want so I could put like an h1 Maybe we wanted to like make this homepage bold. We could put a bold tag in here and You can really like get creative and like style these different links different ways you want to so don't be afraid to put HTML elements inside of these a tags because it's definitely something that you're gonna want to do Another thing that we can do is we can link to other pages on our website So I'm gonna get rid of the text for that link I'm also going to get rid of this target blank And if you look over here in my file explorer my little file tree, you can see that in addition to this index.html File which is the file that we're using right now I also have this page - dot HTML and this page three dot HTML and these are both just like other Web pages that are on my website. So any given website is gonna have a number of web pages you might have like an about page a Contact me page if it's a blog you might have a bunch of like blog articles You get the point a lot of times you're gonna have more than one HTML file for your website And we can actually link between those files and you can use this link attribute to do that So in here in this href instead of linking to Google using this like absolute address I can link to those pages on my website using a relative URL So if I wanted to access this page - for example, let's say that I wanted to link to page two Because the page that I'm currently on and page two are in the same directory I can just type out page twos name so down here I can just say like Page two dot HTML and the browser will automatically know that we want to go here to page two so over here I can just tell you page two and Now in the browser you'll see that we have a link to page two So when I click this it'll bring me over here to page two and you'll notice that inside of page two I've already set up a link inside of here. So here in page two I have another link which is just linking me back to index dot HTML and this is a way that we can create navigation on our site So now I'm over here in page two and I can navigate back to the home page so I can navigate between these two pages on my website I Can also create another link to page 3 so let's do that right here below this page two will make another link this time to page three and One thing you want to notice is that page three is inside of this directory So page three is inside of a folder called dyrone if I want a link to page three I can't just say page three dot HTML Because the browser's not going to know Where this page three is supposed to be we have to tell it exactly where it is relative to the current file that we're on so I can say der one forward slash page three and what this is going to say is We want to go to directory one and we want to link to a page inside of directory one called page three dot HTML So now we should have a link to page three and you can see that showed up right here I can click this and it'll bring us to page three So that's a way that you can link to different pages on your website. You can also create links to files on your website so in our case we just have this little cat picture and this is just kind of like a cute cat and we could actually Link to this picture of the cat on our website, so I'm going to go over here into my index file and we can access this picture the same way that we've been accessing these HTML files so I can just say Instead of dyrone the cat pictures at the same directory so I can just say cat and it's a jpg file so dot jpg Having change this to cat And now I should have a link to this cat picture So I click this it'll bring me to this picture of the cat and I can look at the cat So that's kind of how you can link to external websites other pages on your website and files on your website so in addition to a jpg I could also link to like a PDF or a word document if I had it stored on my website It doesn't matter and that's one of the basics of using links in HTML In this tutorial I want to talk to you about using images on your website One of the most common things people want to do when they have a website is put images up there and so today I'm gonna show you the basics of working with images we can talk about Resizing images and basically just placing them on our HTML pages So I'm going to create an image tag down here and an image tag is basically just less than sign. I am G and inside this image tag we actually have to give it a couple pieces of information the first thing we want to give this image tag is the location of the image that we want to show so when you have this image tag You have to basically link it to an actual image And then the HTML will be smart enough to go grab that image and then place it on our web site So I can just say source SRC is equal to and then these quotation marks and inside of these quotation marks We want to put the location of the image Now one of the most basic ways to do this is to link to an image that's on the internet So there's a lot of images on the Internet obviously and we can actually just put the address for an image inside of this source Tag and it'll link us to that image so over here my browser I just have some pictures of dinosaurs and there's a bunch of dinosaurs here here's like a t-rex like really scary so I can just view this image and You can see up here that this image has like an address associated to it, right? So this image is like, you know, obviously it's like this crazy address, but I can copy the address to this image And then I can just paste it onto this source attribute so I can just paste that bad boy right in here and we got this awesome image and so When we want to use an image in addition to specifying the source, I can also specify one more attribute Which is called alt and the alt attribute is basically what's gonna show up if the image can't be found so one of the problems that sometimes you'll run into when you're making your HTML is that an image that you're linking to is like either? Deleted or it's not there or it can't be loaded by the browser. So for example if this The scary dinosaur ever like disappeared like if that person took it off of their website Then it wouldn't show up anymore. And so we have this alt tag as like a backup So whatever text you put inside this alt tag will show up if the image doesn't show up and also it's a good practice always to just have an alt tag and you want to make this like maybe one sentence that's like pretty descriptive so I could just say like a really scary Dino, and now this is like describing the image and sort of like plain text So always want to make sure you have an alt tag and when we have an image, it's just gonna be a single tag So a lot of times an HTML will have like two tags like a starting tag in an ending tag And we'll put some stuff inside of there not the case with an image We can just do this forward slash and we can do a greater than sign and now the tag is gonna be done So it's just a single image tag just like this and obviously it's a pretty long URL Now what this should do is it should go out grab this image and display it on our website and that's exactly what happens So this dino is actually like pretty big you can see Super scary, but now we have this image on our website so we can link to this image Another thing that we can do is link to images that are on our actual computer So instead of linking to an image that's on the internet I can just link to an image maybe that I have like You know for myself So I'm gonna get rid of this source here and I have this image on my little file tree over here it's just this cute cat and I can actually take this cat picture and insert it into my website just like I did with that picture from the internet So inside the source, I'm just gonna link to the image of the cat. So we're just gonna be cat dot jpg and now I'll change the alt so we can just change it from like a really scary dinosaur to really cute cat and When I refresh my page, we'll have the cat picture so one of the problems that you might be noticing with the dinosaur picture and now with this cat picture is that They're kind of big right like this is kind of like a big image and especially that dinosaur picture That was huge took up like the entire Green So one of the things you can do with images is resize them and we can give this image tag a couple more attributes so in addition to defining the source and defining the alt text we can also define a width and a height and the width and the height will control the size of the Image so I can give this a whiff You know I could say actually it's gonna be equal to and we can say maybe like a hundred and we can give it a height and This will be a hundred right so when we kind of shrink it down a little bit and these like 100 what that means is 100 pixels a Pixel is a unit of measurement that we can use in HTML basically like defines sizes and a pixel is kind of hard to explain like how big it is because it's not a Standard unit in other words a pixel could be a different size Depending on the resolution of the screen that you're looking at So a hundred pixels, you know for the most part it's gonna be kind of the same distance on most web pages But it's not like an absolute distance of measurement like a centimeter or an inch so just keep that in mind so I can say a hundred pixel width and a hundred pixel height and Now when I refresh my page the cat is a little bit smaller, right so we can see it a little bit better But we have another problem which is that the cat looks horrible, right I mean it's kind of like smooshed in a little bit and you'll notice if I get rid of this within the height that I'm actually Changing the aspect ratio of the image. So now refresh this you see the image is actually like wider than it is tall. So When you're defining a different width and a height for an image You want to be sure to keep the same aspect ratio? What you can do is you can figure out what the aspect ratio of your image is so over here in this cat jpg you can see down here that the aspect ratio for this image is 300 by 200 so it's like 300 pixels by 200 pixels so it has like so it has a 300 by 200 You know aspect ratio or whatever and we can just keep that same aspect ratio inside of our within our height, so put these back in so if it's 300 by 200 we could make it 100 by 66 and this should give us the Correct, like aspect ratio, right? That's the same ratio as 300 to 200 So now when I resize the image, it looks great, right? It's just it's a little bit smaller, but it's the same dimensions like it's the same aspect ratio. So That's kind of how you can resize your images You And you can also use other things with images so I could combine this image with a link for example so I could come over here and we can create a link tag and we just say hey and we give this an href and Inside here. I could put like whatever Link that I wanted to for. So for example, I could link this to like this dinosaur picture alright put the URL for the dinosaur in there and We can close off this link and now when I click on the image It will bring me to that picture of the dinosaur so you can make these images like clickable You can really do a lot of stuff with these images and you can embed them inside of other HTML tags so I could put like an image inside of other HTML tags, you know you can put them anywhere you want and images are super powerful and you're definitely gonna want to make sure that you use them on your website and you always want to make Sure that you include this all attribute. This is really important A lot of people get lazy and they don't put it in there, but it's really important and for example if I was to get rid of this cat jpg here and the source you'll see that now what it does is it just Gives me that alt text so it's really important. Just so your website Conte stays together in the case. That an image link is broken In this tutorial I want to talk to you about using videos on your website so I'm gonna show you how you can take a video that you have saved on your computer and Put it into your website and then I'm also gonna show you how you can include a YouTube video into your website So let's start with a normal video over here I have this tutorial dot mp4 video and this is just like one of the tutorials that I did for traffic Adam II and I want to include this on my website so I can actually use the HTML video tag and it's just going to be video just like this and I'm going to give this an attribute called source So it's gonna be SRC as equal to and then inside of these quotation marks I want to type in the location of the video. So the relative path to the video from the current file in my case it's just tutorial dot P for and then I can close off this video tag and We're actually gonna need an ending video tag as well Now one thing you might want to do is put some text inside of these video tags And this is text that's gonna show up if the users browser can't display like videos in a certain format This is kind of rare like most browsers are gonna be able to display video But just know that any text that you put in here will get displayed if the video fails for any reason So if I go over here to my website I can refresh the page and you'll notice that the video is gonna show up and it shows up But the problem is if I click on this video, I can't actually play it, right So I keep clicking in the videos not playing and that's because we haven't given this video any video controls So I can come down here and I can actually just give this another attribute called Controls and as long as we type controls in here now This video will be able to have video controls so sometimes you might just want to like store a video on your website and you don't want anyone to watch it or whatever and you Can just use that normal video tag, but if you want them to be able to control the video they need these so now we can click the play button and You can see I'm watching the video I can skip to different parts in the video Over here I can control like the volume I can make get full screen or whatever So now we have like full control over this video. Another thing I can do is control the size of the video, so you Can notice the video is a little bit big if I wanted to give this a different size I can do that so I can give this two attributes a width and I can also give it a height Now one trick is you want to keep the aspect ratio of the video? So I'm just gonna give this a width and the height will automatically adjust to fit whatever width I'm using so we can give this a width of like 300 and this is gonna be 300 pixels. So now when I refresh the page the video is gonna be 300 pixels so it's a little bit smaller a little bit easier for me to see and you can Control the width and the height by just using this width property. Another thing I can do is control the thumbnail of the video So you'll notice that when I refresh the page, it just gives me like a picture of like the first scene of the video but if I have a specific thumbnail, I can also use that on here so over here I can just say poster and inside of these quotation marks I can basically pass this an image file so over here I have this thumbnail image and this is actually the thumbnail for that image on YouTube so I can actually open up my index dot HTML file again, and I can just put in here that thumb dot Jpg image and now when I refresh my page, it's gonna use that thumbnail for the video So actually let me make this a little bit bigger So instead of just showing the first scene of the video like the first image from the video It's actually gonna give me that thumbnail and that can be really useful Another thing you can do is specify whether or not you want this to autoplay so I could say over here Autoplay, and now when I open this page the video is gonna automatically start playing so I can kind of like be useful in certain circumstances you can also tell this to loop so I can say loop here and now When the video is finished playing like if we went all the way to the end of the video It's actually just gonna loop back around so it'll loop around and start playing once it gets to the end so you can see When I got it all the way to the end here it started looping around So those are a couple of the little you know Attributes that you can pass it and there's a couple more I'm not going to get into all of them so that's how you can take a video that's just like stored locally on your computer and put It on your webpage now in addition to doing that. You can also include YouTube videos so this is something that a lot of people are probably gonna want to do a lot of videos are stored on YouTube and you Want to just like include them into your website and YouTube actually makes that really easy so over here I just have this dinosaur video and if I wanted to Embed this dinosaur video onto my website. I can actually just come down here to YouTube And I can click this share button and then down here. There should be an option to embed. So over here it will allow me to Click embed so I can click that and this is actually gonna give me some HTML code so you can see over here This is an HTML tag. It's called an iframe And basically what the iframe tag does is it allows you to like peek into another website? So this will like load up the youtubes website into our website and it'll like center around that video I'm gonna make an entire HTML video just talking about iframes. So don't worry too much about that right now just know that you can copy this code and then we can paste it in and YouTube actually gives you options so you can like uncheck or check these different options and it'll Show a player controls or show the video title and other actions so I'm just gonna copy this and now we can come over here into our HTML and we can just paste all this code in and we'll be able to use the YouTube video and one of the cool things about these YouTube videos is you have all of the YouTube player controls so like I have like the fullscreen YouTube button. I have like the YouTube volume button and all that stuff So it looks really nice if you're just embedding a video from YouTube and with these videos you can also change the width and the height so you can modify both of these values and Make them bigger or smaller. So that's the basics of using videos I think that covers most of the use cases either you have a video That you want to put on your website or you want to put a YouTube video on your website? That's kind of how you can do both of those things In this tutorial I want to talk to you about creating lists in HTML Now HTML allows you to list out a group of items and it provides you with a couple different tags to do that there's a lot of scenarios where you might need to list something out maybe a list of names or the list of steps in a Recipe and you can use specific tags in HTML to format those lists and make them look really good like I said There's a couple different types of Lists that we can define and I'm gonna show you Basically how you can define a list? The first type of Lists is called an unordered list and this is a list that doesn't have a particular order. So imagine you we're making a list of just like a bunch of different items and they didn't have to go in a specific order you Can make an unordered list So we're just gonna type ul and then we're also gonna need a closing tag And we're gonna close that off inside of this unordered list. We can define items for the list So these two tags are basically like a container for the list and inside of here. We're gonna create something called a list item So for each item in the list, we're gonna need this Collection of tags which is to list item tags and in here we can just write out what we want them to be So I could write out like a list of fruits for example so we could say apples oranges and Bananas right, so I'm listing out a bunch of different fruits and If I wanted to I could even make these list items a little bit more complex. So I could include something in here like a link so I can make a link and we could give it an href and I'm not actually gonna give this a real address just because I don't need to and then I can close off this link so you can put like HTML tags inside of these lists items you can really do whatever you want inside of there Now when I refresh the page, you'll notice that we have this awesome list so it's listing out all of these items and you can see this one's a link and Because this is an unordered list. We have these little circle markers that just marks each list item in the list So that's how you can define an unordered list, but what if you want to order the items inside of this list? Right, imagine that you were writing the recipe or something in a recipe. You need to follow steps very Specifically so you can't just skip to like any step you want We get to find an ordered list and in an ordered list We just type oh L and that's gonna stand for ordered list And now what you'll see is all of the items in this list are going to be ordered So its ordered like 1 2 3 so there you know there's a specific order assigned to each element and that Order is basically just the order that these list items appear inside of the ordered list And you can actually change the style of lists. So you notice that we were listing everything out with numbers I can actually change that so I can say type and we can specify a type so the default type is gonna be one just like this but instead of 1 I could say a and capital a is gonna mean that It's just listening it out in alphabetical. So we have like a B and C I can also do a lowercase a and that's gonna be lowercase numbers I can do Uppercase I and this is going to be Roman numerals or I could do a lowercase I and it'll be lowercase Roman numerals So you can change around the style of the list depending on the type of items that you have inside You can also embed these lists so I could put a list inside of a list item So let's put a list inside of this oranges and we could just put another ordered list right so I can make another oh L and We'll close this off and I could define different list items so I could just say like item 1 Etc. And now we're gonna have a list inside of this list. So inside of the oranges list item We have another list and it'll start listing out things So you can embed these lists all you want and that can be a really useful thing to do. So Ordered lists and unordered lists are the two most popular types of Lists. You'll see in HTML and 90% of the time you're only gonna be working with those but there's actually another list that Exists and I just want to kind of tell you guys about it You're probably not gonna see this one as much because it's not as popular But at least you can sort of learn what it does So it's called a description list and this is a special type of list to where you can list out items and then you can describe those items so you can create a description list with these DL tags and I'm just going to close this one off and then inside of here we can define not a list item We're gonna define a description term So this is gonna be DT and it works just like a list item does so in here I could just type apples and in addition to a description term We can also give the description term a description so we can describe the description term and we're just gonna type DD and we'll end this off and so here I can describe the apples so I could say like - They are red or something. And now when I go over to my website, you'll see that we have this apples item in the list and then we have the description right below it so I could add in another one for like Oranges And we'll have a couple different items with description So this can be kind of useful if you want to, you know have list items that have descriptions So those are the three basic types of Lists Like I said for the most part, you're probably only going to be using ordered lists or unordered lists Or at least those are the most popular that you're gonna see but description list exists and they're really useful as well So you can now start making different lists in HTML In this tutorial I want to talk to you about creating tables in HTML a table is basically a way that you can Format information and display it to your users. So if you ever use something like Microsoft Excel or Google sheets, you're basically working with tables and that's kind of what we're doing here in HTML over here I just pulled up some images of a bunch of different tables and these are just examples Of the kind of things that we can create when we create our tables in HTML so you can layout information in this table format So the way we could table is by using the HTML table tag, and this is kind of a complex tag So you want to make sure that you pay attention to all the components that go into a table? so I'm just gonna create this table tag and Then I'm also going to need an ending tag and so inside of here we can put everything that we want to go inside of our Table and the most basic layout for a table is you're defining a table row So a table row is like a horizontal part of a table, right? It's one entry into the table and we can define a table row using these table row tags. So TR and Ending tags for TR So this is gonna represent like one horizontal row one entry into our table and You can define the individual data for the table In other words like the individual data for each column in the table by using something called table of data. So table data is Just gonna go inside of this tag, so I could create one piece of data. I'm just gonna call this one and That would represent one column in my table So this is like one column and then if I put another table data, it would be like another column in the table So I'm gonna copy this and we'll just paste it below here. We'll call this one too. And I'm gonna do the same thing. We'll do one more and we'll call it three So now when I come over to my website What I should have is a basic table with three entries or columns in one row of information And that's exactly what I have. So I just have 1 2 and then 3 Right here. What I could do is I could insert another row into my table, right so I have this initial table row right here if I wanted I could just copy this and I can paste it right below and Now what we're doing is we're defining another row. So if I refresh my page, you can see we have these two rows So why don't we change this to 4? 5 & 6 And you can see that the rows in the table are formatted just like they are here So this row was specified first, and it's showing up first in the table Then we specified this row and now that's showing up second So that's the basics of adding data into a table, but we can also take this a step further So if I wanted to instead of just defining data, I could define headers for the data So I'm gonna make another table row and Over here. It's gonna stay a table row, but instead of defining table data, I'm gonna define a table header So instead of TD, it's gonna be th and I'm just gonna change that on all of these And so now I'm gonna change these so these are gonna be like the titles or the titles of each column for our table So I could say like num1 num2 And number 3 so basically, they have to list out three numbers and you'll see here that these are now like specified in bold, so these would be like You know the different column titles and then here we have the information for each column One of the other things about tables is that they're really flexible so if I wanted to come over here and add in another or column to the table, all I have to do is just Copy this guy we can just put in another table data entry so we could say like three and a half So now in addition to this three, we're also gonna have another entry in the table But we don't have to have entries for like these table headers or for this other guy You can just put whatever entries you want. And the other cool thing about tables is that they'll resize themselves So as I make this window smaller You'll see that the text inside of this table is Like wrapping around and that's kind of cool so you can compress the table and you'll still have all this Information and you can see that the information below it is actually moving down to accommodate it so tables are actually really responsive so you can define as many Table rows and as much table data as you want and there's actually another thing we can do which is add in a caption So the caption will be like the overall title of the table. So right here underneath the table tag, I'm gonna put these Caption tags. And again, this is like the title of the table so we could just say like list of numbers And Now this table will have a nice caption on it. So you can see the caption will sit like right in the middle right above the table and a lot of times what people will do is they'll make this like a header so you can make this a header - and Now it'll be like this nice big title for our table. So it looks really good So that's the basics of using a table another thing that people like to do is define a table head and a table body and this is just makes it easier for People to read through the tables in the HTML So for example right now it's like not super obvious that this is supposed to be the table Heading and it's not super obvious that this is supposed to be like the content of the table so you can separate the two Sections by specifying the table head and a table body. So up here right underneath the actually right before This caption we're gonna define the table head. So I'm just gonna say tee head and Then below here, I'm gonna say I'm just and this and Now I'll just sort of indent this so it looks a little bit better So this is going to be all the information in the header of the table Now we can create another tag called a table body and it's going to be the same thing. I'm just gonna say T body and Then we'll end the T body down here at the bottom of the table And Again, I'm just gonna kind of indent these things so it's easier to see so now our table is laid out with a head and a body and you'll see that it doesn't change the way the table looks but it just allows us to Format it and organize it a little bit better Now there's one more thing that we can do with tables which is control with something called call span and Call span stands for a column span. So For example, I have this one right here. Right? And this is in the table You'll notice that when we look at the table one takes up exactly one column in the table, right? So it's taking up one column and then in the second column, we have two and then three but I can actually have one take up more than one column so I can come over here in the table data and I can say Call span is equal to and inside of these quotation marks I can just put an integer number so I could say for Example two and now this piece of table data is gonna take up two columns in the table. So You'll see right now. It's taking up one when I refresh the page. It's taking up two now So this one entry takes up two columns in the table, and then everything else gets pushed over to the side so I could also say like three and Now this will take up three columns just like that so you can control how many columns each Individual table data is going to take up and that really allows you to control like every aspect of your table So that's the basics of using tables. I mean you want to just make sure that you're using the right tags I mean tables at least for me have always been like Kind of daunting because there's so many of these like little tags in there But as long as you keep them well indented and you keep them organized then you should have no problem In this tutorial I wanna talk about containers in HTML now a container in HTML is basically a Set of tags that wraps other HTML elements so I can define a starting and an ending tag and then inside of those tags I'll just put a bunch of other HTML elements Generally when you're writing HTML, it's good to wrap your HTML tags in what we would call like a wrapper tag and that's basically just like a set of tags that sort of stores all of the HTML and that's because 

When you start getting into more advanced HTML and you're looking at things like CSS Which is basically just a language that you can use to style your web pages Usually if you want to apply a certain styling to a bunch of different elements you can just apply it to that wrapper element and all of the elements inside of it will Inherit that style I don't want to get too into like CSS and styling, but just know that a lot of times in HTML It's good to wrap up a bunch of elements into a like overall container And in this lesson, 

I want to talk to you guys about two of those popular containers in HTML, which are divs and spans And those are both sets of HTML tags that you can use as containers You can put a bunch of different HTML elements inside of a div or a span And then you'll you're sort of like wrapping them up before I get into Divs and spans. 

I want to talk to you guys about the different ways that HTML elements are displayed and this is kind of an important concept for you guys to understand the difference between a div and a span and this is also just An important concept in general when we're talking about HTML So HTML has two basic ways that it displays elements and keep in mind. There's more than two You can get into a bunch of different other ones but the two main ways like the two ways that you need to know if you want to know HTML are Block and inline. So CSS can display what are called block elements and it can display inline elements now block elements are CSS or HTML Elements that take up the entire width of the page so they're just like a block on the page and inline elements are elements that only As much space as they need so you could have inline elements like sitting right next to each other But you couldn't have block elements sitting right next to each other because the block elements take up the entire width of the page Now different HTML tags are gonna display differently so some tags are block tags other tags are inline tags a good example of this is Paragraphs versus links. So if I was to create two links inside of HTML, 

I can just make a link and It doesn't really have to link to anything. It doesn't really matter and I'll just say link 1 and I'll make another link down here. I'm just gonna copy this one And we'll call this link 2 when I refresh my page You'll see over here that these the links are actually sitting right next to each other So link 1 is sitting right next to link 2, and this is a good example of two inline elements So these links are able to sit next to each other because they're only taking up as much Space on the page as they need right link one only needs this amount of space So it only takes up that much space if I made the text and link one longer Now it's gonna have to take up more space, but you can see we can still stick link to here right next to it These are like I said inline CSS elements so they can sit in line with each other or they can sit on the same line as a good analogy And now I'm gonna create two HTML paragraphs so when HTML paragraph is in a good example of a block element, so I'm just gonna make one paragraph and Then I'm gonna make another paragraph down here And I'm actually gonna separate these So what you'll notice is unlike these links how they sat next to each other These two paragraphs aren't gonna be able to do that so you can see we have paragraph 1 up here and Even though there's enough room up here in this file to put paragraph 2 It's not gonna go there right? So it doesn't matter how small I make paragraph 1 like it doesn't matter How much room there is over here for paragraph two to go? It's never going to go over there because these are block elements. So block elements Like I said, they take up the entire width of the page And so they force the next element to go below them these inline elements. 

Don't do that So with these inline elements, you can just store them right next to each other in the file and that's the difference between the two main display types in HTML block display an inline display as long as you understand that concept the concept of a block element and the concept of an Inline element then you're gonna understand what spans and divs are used for So the big difference between spans and divs is that spans are inline? Containers and divs are block containers so I can create a span and you just do it by making these span tags And we can make an end one and I can just put some text inside of here. 

So Let's just say span one and then I'll make another span down here Span two and what you'll notice is when I refresh the page These two spans in other words the elements or the text inside of these two spans is displayed right next to each other Right. So this span is an inline container When I make two divs, I'm gonna make div and I'll do the same thing. So We'll just put some text in here.

 We can just say div 1 and div 2 and Now when I refresh the page, you'll notice that these divs are on different lines So unlike those spans which are inline elements. These divs are block elements So the divs can't be on the same line because they're blocks so div 1 is taking up the entire width of the screen But these spans can because they're in line. So that's the big difference between divs and spans is that divs are Inline or no divs are block elements and spans our inline elements and these are both containers So we can use spans and divs as containers, right? So these are gonna hold either text or they're gonna hold like other HTML elements when you start getting into CSS Which is how you style HTML you can actually apply Styling to these spans as well. So that's another reason why you might use a spin divs are containers as well But divs are block elements. 

So anything you put inside a div is gonna be like a block element on the page So that's the basic use for divs and spans. You're gonna see these used a lot I think probably divs are used a little bit more than spans are just cuz The circumstances for using spans are a little bit more specific than for divs Generally, if you're defining a like overall container in HTML You just want to use a div and a lot of times if you see people using containers in HTML

They're gonna wrap stuff in a div. So just remember that a div is a block element So anything that goes inside of a div is gonna take up the whole width of the screen right that div container Itself is going to take up the width because it's a block element In this tutorial I want to talk to you guys about using input tags in HTML Now input tags are basically going to allow you to add elements on your page. Where users can input information so these are things like text boxes or text areas or Checkboxes radio buttons, you know all sorts of elements on the site that users can interact with to enter information Now here's the catch when you're defining these elements in HTML. 

We're not actually making them functional So if I defined like a text box on my website just because I define it in HTML Doesn't mean that it's gonna work in other words just because you have the text box there doesn't mean someone's gonna be able to type In information and you'll be able to do stuff with that in Order to like get information from a user through these text boxes.

 You need to use a language called JavaScript But that's a little bit beyond the scope of this course. We're just trying to learn HTML So I'm just gonna show you guys the actual HTML elements that you can use to define these things like text boxes and text areas and Then if you want you can go off and learn JavaScript and you can learn how to get input from them. So Down here. I'm gonna define my first input and all the inputs for the most part We're gonna use the same tag so they're going to use this input tag so I can just say input and I need to pass this a HTML attribute So I need to give it some information we can say type and I need to tell it what type of Input I want to accept and there's a long list of different types of inputs that you can accept in HTML But the most basic one is just text So this will basically create a text box for us and you notice that the input is only one tag It's like a single tag. So we're just ending it over here There's not like another tag another ending tag when I refresh my page you'll see that we have this text box up here and I can actually just start typing in whatever I want inside of here and It's gonna be a functional text box.

Another thing I can do is create a text box for a password so something that is really common on websites is to have the user enter a password and What you can do is you can actually hide the text that's getting input into the text box So instead of saying type text we can say type password and you'll see what happens when I come up here. I can type normally in this text box, but when I type down here it Covers these things up. So now they're just like little dots and you can't actually see what's being typed inside of there So that's kind of like a HTML way of hiding the input from a text box another thing we can do is define default content inside of these text boxes so I could give this a value attribute and now we can just define a default value so I could say like enter your User name?

 Maybe this is like a username prompt and now you'll see that this text is automatically included Inside of that text box without me having to do anything now I can also define something called a Text area and a text area is a lot like an input but instead of just having one single line We can have like a huge block where we can add your text. So this isn't technically an input tag It has its own type of tag, so it's just called Text area and in here we can make two tags.

 So we're also going to need a closing tag and This text area you'll see is gonna be like a big thing that we can put our text in so Unlike these two blocks right here this text area is a little bit bigger and we can actually resize it so I could take this text area and make it a lot bigger on my page just like that and then I can you know type in whatever I wanted into here and That would basically be a place for me to enter in lots of text.

 You can also define some attributes for a text area so I can give this a specified number of rows or columns so I could say here Rose is equal to And now we can say like maybe we want it to be like ten rows and we could say columns so remember rows are going down columns are going across we can say Columns and While we make this like 30, so it's really obvious. And now this text area is gonna be really big just like that so it's 30 columns across and ten rows down and You know, you can kind of just like see how that works there and you can also define default text for text images. So Inside of these two text area tags, I could just type, you know enter a Paragraph and now that text is going to be in there by default. 

So that's the text area field and that's pretty fun There's a couple other Input tags that we can look at so there's different types of input that you can accept And I'm just gonna get rid of this value actually In addition to accepting things like text we can also accept something like a date So a lot of times you might have someone like enter their birthday or something and you can see now The browser is displaying like this little date input for us and you get this a little calendar widget and this is gonna look different on different browsers But for the most part if you use this input type you can control like what the user is going to input so in addition to date we could also do like email and Email is actually pretty similar to just the text box We could also do like a range So this could be like a range of numbers and you can see we have this little slider here We could also do a file So a lot of times on websites you want users to upload a file and you'll see that this actually opens up my little file Browser here and I can click open and it will like grab the name of the file and obviously You know you without JavaScript or another programming language. You can't actually upload these files but point is you can give the actual input prompt for these files and you can also define different types of buttons so I can define like a Checkbox and here. We just have a little box that we could check you could also define a radio button Actually, I want to show you guys the difference between checkboxes and radio buttons. So if I have two checkboxes, I Can check both of them at the same time? Okay, just like that if I have two radio buttons though And if I give them an attribute called name so we can name radio button so I could say Button, and we'll give this one that same exact name You can actually only click on one of these radio buttons at a time So if they have the same name, then I can only click one at a time.

So checkboxes You can click as many as you want with radio buttons though, as long as they have the same name You can only check one at a time. We can also define different buttons so I could define like a submit button That's kind of a popular button that people have so if you have a form like an HTML form You can define a submit button so I can just say submit and now we'll get this nice little button here for submitting So there's actually a bunch of these different input types and I have this web page open over here.

 This is a web page on W3schools and it basically just defines all of the input types for HTML so the address is wz schools comm four slash tag s /a t t underscore input underscore type and down here There's this really good list and it just lists out all of the different types of inputs that you can have So you see like button check box color date file text URL all these different You know types of like text boxes or buttons or little elements that you can use to input information In HTML,

 so I want to talk to you guys about one more HTML element which is called a form and a Form is basically an element that is going to be used to store all of these inputs, generally so generally if you see people using this form element, they're gonna be putting These input tags inside of here. So a form is like a wrapper for a bunch of the user input and you know I was always saying before like when you really want to like accept input from a user you're gonna need an other another language besides HTML and that's usually where forms are gonna come in handy because Forms can like give information to like your web server or whatever, but you don't have to worry about that right now Just know that a form tag is a lot of times acts as a wrapper for these different input So hopefully you guys, you know got something out of that You can kind of got a little bit of an introduction into these different input tags And now you can style your website so users can input information into it In this tutorial I'm going to talk to you about using iframes in HTML an iframe is an HTML element that's actually able to display another website Inside of your web page so you can effectively embed an entirely different website inside of your own web page, which is pretty cool so you can create an iframe tag pretty much anywhere in your site and It's just I frame like that and then we need to pass this one attribute Which is a source and this is going to be like the website that you want to embed So in my case, why don't we just do the draft Academy website? 

And then I can close off this iframe tag and You're also going to need a closing iframe tag, so you're going to need one over here now inside of these iframe tags You can put some text and this is text that's gonna get displayed if the user that's on your website Can't view iframes. 

So maybe their browser just like doesn't support iframes Or maybe they you know have some option toggled where it doesn't view iframes Basically, this code would be displayed to them if they can't view it So now when I head over here, I can refresh this page and you'll notice that inside this little window The draft Academy homepage is displaying but it's like super small so if you want you can come down here and we can resize these iframes so I can give this a Width attribute and we'll just make it a thousand and I can also give it a height attribute And we can make this like 800 So now this iframe should display a lot bigger, right?

So now I can see the whole website and so this website is Literally embedded inside of my website so I can go to all the different pages of the website It works just like a normal website would but it's inside of our website So another thing you can do is you can control the border So if you look here on this iframe, you can see there's like a little Border around here.

 It's like this little gray bar It's kind of hard to see but if you want to get rid of that There's another attribute we can pass in we can just say Frame border is equal to 0 and now this will get rid of that little border. So the iframe will just be like Even more embedded inside of the website now iframes are really great and you can pretty much use an iframe for any website But one thing that a lot of websites will do a lot of like big web sites is they'll prevent other Websites from using their websites as iframes. So like if I tried to make this iframe for like Amazon, for example Amazon com Then when I refresh the page you'll see that nothing shows up Right i'm not able to use amazon as an iframe and that's because they have some setting toggled where they don't allow their website to be used as an iframe and Kind of for a good reason. I mean one of the problems or one of the dangers of iframes is that Someone else's website could pose as another person's website so I could create a website and just have an iframe of Amazon's website in my website and I could trick people into Going to my website and they would just think it's Amazon, right? So they'd be like, oh, I'm on Amazon.

 This is cool Meanwhile, they're on my website and I could like take their data or you know do something malicious to them So that's one reason why people wouldn't want to have iframes and it kind of makes sense But in my case like for traffic Adam e-comm, like I have no problem letting people I frame that so it's available to me Yeah, that's the basics of iframes Like I said it, you know You can resize them you can move them around and they can be a really useful feature in your website In this tutorial I want to talk to you about meta tags in HTML So up here in the head of my website, you'll see that I have this meta tag right here And this is normally a meta tag that's included in most HTML and it's specifying the char set of my file right the character set but in addition to this meta tag We can also define other meta tags and meta tags live in the head of the HTML file and the head is basically just used to like to find Information about the file or do some different like configuration with the file and these meta tags are used for metadata So metadata is like data about data so we can use meta tags to define information about this particular webpage I'm going to show you some of those different meta tags and we'll talk about like how they're used and why they're useful so I'm gonna make a new meta tag, and we're gonna call this one Name, so we're gonna give it a name and we're gonna call it Description so this is gonna be the like full-on description of our website and over here. I'm just gonna type content so this is gonna be the content of the meta tag and here you could type like your description and Most websites are going to have a description and this is something that can be used by for example a search engine in Order to kind of like help to figure out what your website's about so if you give a good description of what your website is doing then a search engine could use that information to kind of figure out where your page should sit and like page rankings and stuff like that and the general rule people usually would say like maybe A hundred and sixty characters for a description is like kind of good um, you don't want the description to be too long like if the descriptions over like let's say 200 characters then most search engines are just kind of gonna ignore it or they might even like penalize you for that and like your search ranking, so Description is very important. Just make sure you keep it brief another meta tag that we can use is for the author so I can say meta name and this is gonna be author And actually I don't think I closed this tag. Yeah, so you can just close all of these like this And then again we can just define the content So this is gonna define like the contour who the author is so I can our case it's me And we can also define some keywords. So this is gonna be Keywords and again content so the keywords can just be stored in like a comma separated list so you could say like HTML, you know? tutorial You know Traffic Adam eats stuff like that. So we're just defining this long list of keywords And again, like the search engine could use those keywords to kind of help index your site now one of the things with this keywords tag is like back in the day a lot of people would just like shove a bunch of keywords inside of there and then their pages would Get like ranked on Google or Yahoo! Like artificially so like all these pages would get ranked Meanwhile, they had nothing to do with the keywords that were on the keyword tag So I think probably most search engines at this point Just don't even like bother looking at the keywords tag But it can be good to have in there just in case and another meta tag that we can use And this one's actually really important and this controls how your website is displayed on different devices so we can say name and It's just called a viewport and this has a couple complicated little options here that we can configure So we can just say content and you want to type out basically just this so it's gonna be with we're defining the width and device width and then initial Scale is Equal to 1.0 So this is something that you might see in like HTML files if you're looking at them and basically what this does is it controls how your Website is displayed on different devices So if you didn't have this in here and you went to look at your website on like a mobile device Then the website would just display as it would on a desktop So it would display like really zoomed out and really far away and a lot of times people will design their websites to be To look really good on mobile So like if you designed this website to look really good on a mobile device if you didn't include this lineup in here then it's possible that the mobile device wouldn't display the website in that mobile if you would display it like it would on a Desktops like really zoomed out and it just wouldn't look good. So defining like the width as the device width So the current device that's looking at it allows the HTML to kind of like respond to the size of the screen So this is another important meta tag So these are some basic Meta tags that you can use inside your website and there's a couple more you could just do a Google search and kind of find Like all of the possible meta tags But I would say these like four or five meta tags are like the most commonly used and the most important for your website.