Hey, welcome to Draft CAD me my name is Mike in this course, I'm gonna cover everything you need to know to get started
writing HTML
HTML stands for hypertext
Markup 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 a 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 webstorm. 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 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 Khadem 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 center
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 webpages
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
Hey, thanks for watching. If you enjoyed the video, please leave a like and subscribe