Hey guys, welcome to the first video of my Web Development for Absolute Beginners
series.
This entire series is meant for anyone wanting to learn basic web design and web
development, and there's absolutely no prerequisites.
I'm teaching this course as if I'm talking to someone that's never written a line of
HTML before.
So don't worry about having any kind of prior web development knowledge.
This will be an ongoing course, or ongoing series, and each video will
focus on a different topic.
So in this particular video, we're going to be focusing on HTML only.
Then we'll move on to CSS and possibly some JavaScript.
I also want to show you how to upload a website to the internet.
Alright, so just a couple things before we begin.
So I want to stress that this course and this video, this series, is for beginners.
If you've been a subscriber for a while, I can almost guarantee that you're going
to know everything in this video and in this series.
Well, maybe not in this series, but in this video at least.
If you've been building websites, then you're going to know the basics.
I'm doing a series like this because I don't really feel like I have a place to
start on my channel for absolute beginners.
People that really don't know anything about web development.
So hopefully my advanced programmers that have subscribed to me can understand that.
And just know that this isn't going to be an ongoing thing for the next 20 videos.
It's just this series.
Also, there's going to be little to no CSS in this particular video.
That's going to be covered most likely in the next video.
And just to warn you, HTML without CSS is very, very ugly.
We're not focusing on the style at all here.
We're focusing on HTML syntax.
Alright, so we will be sticking to HTML5.
I don't want to confuse anybody by throwing in standards from HTML4 or XHTML
or any other derivative.
Anything like that.
So we're going to stick to HTML5 only.
So we will be working with examples.
We'll be building a cheat sheet.
But we're also going to take a look at some slides along the way.
Alright, now you're not going to learn HTML or anything for that matter in 5 or
10 minutes.
I've actually seen videos called, you know, learn HTML in 5 minutes.
And that's just absolute bullshit.
If you're going to be a web developer, you have to be patient.
And you have to really enjoy learning.
Because you're going to be learning, even when you land a good job.
You're going to be learning every single day.
So try and be patient.
Try to follow along.
I know people can get a little aggravated with videos that are over, you know,
25 minutes.
But, you know, if you're that impatient where you can't watch an hour-long course,
then you're probably in the wrong profession.
And I don't mean to sound harsh or anything, but I don't want to steer
anybody down the wrong path.
And I really do mean that wholeheartedly.
Alright, so enough with the preface.
Let's go ahead and get started.
So what is HTML?
It stands for Hypertext Markup Language.
And a lot of people just starting out don't realize that HTML is not a
programming language at any level.
It's a markup language for creating webpages and documents.
Okay, HTML documents.
One of the key elements of a programming language is logic.
So you can have things like conditionals where you can say, if this is true,
then do this.
HTML, however, doesn't have any of that.
HTML is used to just display and format elements of a webpage.
That may be a text paragraph, or a heading, a bullet list, or an image,
or many other things.
It's strictly presentational.
Just try to remember that.
There's no logic.
There's no actual programming.
So an example of a programming language would be JavaScript, or PHP, or C Sharp.
These are intricate languages, and they're responsible for things like
connecting to a database, for an online store, something like that, user login,
dynamic functionality, things like that.
Now, with that said, that doesn't make any programming language more important than
HTML.
In fact, if you're getting into web development, HTML, at least in my opinion,
is much more important.
Because HTML is the building block of the web.
Every single site that you see outputs HTML to the browser, no matter what kind
of advanced programming it uses on the back end.
You can build a website using just HTML and CSS.
CSS, of course, is a styling language, and we'll get into that in another video.
But you can have just an HTML site without any JavaScript, or any PHP, or anything
like that.
It will be purely presentational.
You can't have an online store or anything with just HTML.
But you can have a basic business website with information about the company,
and so on.
Now, it is harder these days to get a job with just HTML and CSS knowledge,
but you can do it.
There are still companies that are purchasing websites that are strictly
presentational.
Alright, so I don't want to spend too much time on this stuff, so let's move on to
what we actually need to get started.
So to get started building websites, you only really need two things.
You need a browser to view the HTML, and you need a text editor to write the
HTML.
Now, don't worry about what kind of computer you have.
If you're on Windows, Mac, or Linux, it doesn't matter as long as you have
these two things.
Everything that I'm doing in this series and in this video is completely
cross-platform.
So for a browser, it can be whatever you want.
I highly suggest Google Chrome.
It's the fastest, and in my opinion, it's the best for any web developer.
But of course, you can use Firefox, or Safari, even Edge.
Just please, for God's sakes, don't use Internet Explorer.
If you're using something less than Windows 10, please download a different
browser.
Alright, so you can also use any text editor you want.
Which one is up to you.
You could even use Windows Notepad, but I wouldn't suggest it.
You want to use something with line numbers and syntax highlighting,
stuff like that.
I'm going to be using an editor called Sublime Text, which is available for
Windows, Mac, and Linux.
So feel free to download it.
I'm going to show you where and how to download it.
I'm using Sublime Text because it's very simple.
It's very light.
When I'm working with other technologies and languages, I usually use something
called Atom or Visual Studio Code.
But I think that those are overkill for what we're doing here.
So before we move on, let's go ahead and install Sublime Text so that we can start
writing HTML.
Alright guys, so you want to go to www .sublimetext.com to get this program,
if you want it.
If you want to use something else, that's fine.
Now this program is free to try.
If you want to keep using it, I'd suggest buying a license.
If you use it without a license, it doesn't have any limitations or
anything like that.
You're just going to get a popup every once in a while that says you should
probably buy a license.
Alright, so let's go ahead and download this.
I'm going to click the big download button here.
Alright, so once that's done, we can go ahead and open it.
It's just going to be a simple installer for Windows.
And of course you can grab this for Mac or Linux.
So let's go through this.
Default location is fine.
I'm going to choose to add it to the Explorer context menu.
What that'll do is it'll allow us to right-click on an HTML file and say open
with Sublime Text.
So we definitely want that checked.
And then we're just going to install.
Alright, so it should be all set.
Let's click finish.
And now we should be able to open it up.
I'm just going to search for it down here in my search bar.
If it opens...
And let's just see right here.
Sublime Text 3.
There's also Sublime Text 2, but 3 obviously is the newer version.
Alright, so this is what a text editor looks like.
I'm not going to go through all the features.
I just want to strictly focus on HTML syntax.
So now that we have our editor installed, we can go ahead and we can start to create
our HTML file.
So one great thing about HTML is we don't need any kind of special server or hosting
company to write and test HTML.
You can simply create a file right on your computer, you can give it a .html
extension, and you can open it up with your browser.
Now, when your site is ready to deploy to the internet, you will need to buy a
domain name, you'll need a hosting package, and then you'll need to upload
everything to your web host.
And I'll get into that in a later video.
But for now, we can build our site or build our cheat sheet locally without that
stuff.
So to create an HTML file, it has to have an HTML extension.
You can call it whatever you want, you just have to end it with .html.
This will allow it to be displayed correctly in a web browser.
Now, one thing to remember is that your homepage should always be called index
.html.
If you go to a domain like, let's say, www.something.com, and you upload a file
called index.html, that's the file that's going to show on that root domain.
If you upload a file, let's say, about.html, that's going to show when you
go to something.com slash about.html.
So the index file will always be the root file of the homepage.
Unless, of course, you're messing with server settings and you change it,
but by default, that's the behavior.
It's going to look at index.html.
Alright guys, so we're going to go ahead and create our first HTML file.
Now I'm going to put this in a folder, so I'm going to create a folder,
and I'm going to call this HTMLCheatSheet.
Okay, and then inside that folder, let's create a new file by going to New
Text Document.
And we're going to call this index.html.
Okay, and we'll just say yes, we want to change the file extension.
And notice that mine has a Chrome icon by default because Chrome is my default
browser, and that's what opens up the HTML files.
Yours may be different.
Now, if you're using Windows, you may have an issue where you don't see the .html.
Okay, if you're not seeing that, what you want to do is you want to go to
View, Options, Change Folder and Search Options.
Alright, you want to go to View, and then down here you want to uncheck
Hide Extensions for Known File Types.
Okay, you want to make sure that's unchecked, and then click Apply.
And then you're going to see the extension, and it may say something like
index.html.text.
Just make sure you get rid of the .text.
I'm sure most of you know that, but just in case there's people that
don't.
Alright, so what we want to do now is we want to open this with Sublime Text.
So we can actually just right-click and say Open with Sublime Text.
Let me just bring it over.
It opened up on a different screen.
And that's going to open it up.
You can see up in the tab it says Index .html.
Now, another thing you could have done is you could just go to File, Open,
and you could find that on your computer, that HTML file, and open it.
Alright, so now that we have that open, what I'm going to do is just type in Hello
World here.
Just text, no tags or anything yet.
And you want to make sure you save it.
So you can either go to File, Save, or you can just hit Ctrl-S, which is what
I would suggest.
It's much quicker.
And then it saves.
Okay, now what we want to do is open it up.
So let's go ahead and let's open it up with Chrome.
And that's the default, so all I have to do is double-click.
And then that's going to open it up in the Chrome browser, and you can see it says
Hello World.
Alright, so even if we put just text in here with no HTML tags at all,
it's still going to show the text in the browser.
Alright, now what I'm going to do is just snap this to the edge here.
And then we're just going to open up Sublime Text on this side.
Okay, I'm going to make Sublime a little bit bigger than the browser for now.
Just so we can see everything, all the code.
And I just want to talk a little bit about HTML tags.
So an HTML tag is the basic building block of any webpage.
Different tags format the way that information and text is displayed.
So element names are surrounded in angle brackets, or greater than and less than
symbols.
And tags usually come in pairs.
One's a start tag, one's an end tag.
If we look over here, we have the start tag, the end tag, and then we have content
in between.
Alright, in this example here, we have About Us as the content,
or the text.
And it's surrounded in H1 tags, which stands for Heading 1.
And I'm going to get into the specific tags later on.
Alright, here's another example with a paragraph tag.
And we just have the text, this is a paragraph.
Now, notice with the br tag here, there's no opening and close.
It's just one tag.
This is called a self-closing tag.
And these are basically tags that don't have any content within them.
Notice that the slash is actually after the element.
So br slash, it's after.
And this is an XHTML style.
So we don't really need to do this in HTML5.
You can if you want, but you can just use simply br.
And br is a line break tag, so it's basically going to push it down a line.
And there's no reason to have any content like this inside of a line break.
So that's why it's considered a self-closing tag.
Alright, now there's a very specific structure to an HTML document.
So this is a quick diagram I just want to look at.
You'll see that everything is surrounded in HTML tags.
We have the start and ending tag.
Inside that we have a head area and we have a body area.
Now the head has nothing to do with the output that's in the browser.
The head has things like the page title.
It has things like links to CSS files and JavaScript files that you want to use.
Metadata such as the description and keywords, things like that.
The description and keywords are actually used by search engines like Google so that
it knows some more information about what's actually on the webpage.
Alright, and then in the body we have the actual markup that's going to display in
the browser.
So headings, text, images, things like that.
Now this is an example of a very simple webpage.
Notice that we have the HTML tags, the head, the body.
We also have this thing at the top.
This is a doc type and it's not technically an HTML tag.
It's just a declaration and it should always be the first thing on the webpage.
And what this does is it tells the browser what type of HTML this is actually written
in.
Now this is the standard doc type for HTML 5.
Let's take a look at some of the other ones.
So, as I said, this is HTML 5.
If you were using HTML 4.01, it would have to be a doc type like this.
And you start getting into different types, whether it's strict or
transitional.
And it can get very complicated.
Same thing with XHTML.
I'm not going to get into that because I don't want to confuse you guys.
We're going to just stick with HTML 5.
Just know that other doc types are a lot more complicated.
Alright guys, so we're going to get started on the structure of our HTML
document.
So I made this bigger so there's no doubt that you guys can see this.
I'm going to get rid of the hello world here.
And like I said, the first thing we want to put in here is the doc type.
So we want to put an angle bracket or a less than and then an exclamation.
And then we just want the word DOCTYPE, usually in all caps.
And then HTML and then the closing bracket.
Okay, so this is the official doc type for HTML 5.
After that we want to put in our HTML tags.
Okay, that's going to wrap everything.
Now notice in Sublime, when I put the angle bracket and then as soon as I hit
the forward slash, it actually gives us the ending tag automatically so we don't
have to type it out.
Alright, another thing we can do is, let's say for the head tag here,
we can just put the text HEAD and click TAB and it will give us both the beginning
and the end tag.
Alright, so just a helpful shortcut in Sublime and most text editors at that.
Alright, so in addition to the head we need the body.
So let's go ahead and put the body tags in.
Alright, now in the head all I want is the title.
So let's go ahead and do that and we'll say HTML Cheat Sheet.
Save that.
And then over here I'm going to reload and notice there's nothing in the actual
browser here because we have nothing in the body.
But if you look at the tab, you'll see it says HTML Cheat Sheet.
Okay, so whatever we put in the title here is going to show in this tab.
Now, a lot of times when you're building websites, you're going to want to see the
exact source code that's running in the browser.
And for that we can do a CTRL-U.
And this is going to show us the exact HTML that's being parsed.
Now, what we're doing here is building just a static HTML site.
So it's going to look exactly like this.
But when you're using languages like, let's say, PHP, where you have dynamic
programming that's kind of generating the HTML for you from variables and things
like that, this is very helpful because you can see the exact HTML that's being
parsed.
And you can't see it in your actual code.
Alright, so another thing that is very helpful in Chrome and other browsers is
the developer tools.
So if we hit F12, we get this little console down here.
And there's different things here.
There's the JavaScript console.
There's networking, so you can see what pages are loading and so on.
There's a lot of advanced stuff here.
But for now, we're just going to look at the Elements tab, which just shows the
HTML.
We don't have anything in the body, but if we did, we could hover over things
and it'll actually give it a highlight up here, which is very helpful.
And you can even edit stuff down here, which I might get into later.
Alright, it's not going to stick if you edit down here, but it will until the page
is refreshed.
So let's go back to our body over here, and we're going to start to look at some
tags.
So we're going to start with Headings.
Now before we go into tags, I just want to mention Comments.
So with HTML, you can have these comments with the less than exclamation and then
two hyphens.
And then let's give this a comment.
We'll just say, this is where our headings are going to go.
And then we want to end the comment with double hyphen and then greater than.
Now this is not going to be parsed by the browser.
If I save this and reload, you're not going to see it show up here because it's
a comment.
It's just for the developer to see.
Now when it comes to headings, there's six different tags we can use.
We have H1 through H6.
So let's go ahead and put an H1 in here.
And I'm just going to say, Heading 1.
And save, and let's reload.
And notice that it gives it a bigger text.
So the browser by default has some core styling in it.
And an H1 is going to make the text bigger.
It's also going to add some padding around the edges so that the next piece of
content will be pushed down a little.
So that's an H1 and that's the biggest heading there is.
So let's take a look at an H2.
So we'll say, Heading 2.
Let's save that.
And you'll see that it's a little smaller.
Notice the padding in between the two.
So what I'll do now is just copy this.
And let's do 3, 4, 5, 6.
So this will be an H3, 4, 5, and 6.
This will be 3, 4, 5, and 6.
And I'm just going to change these as well.
Alright, now I want you guys to have this to look back on if you need it.
2, 3, 4, 5, and 6.
Alright, so let's go ahead and save and reload the browser.
And you'll see the different sizes of the headings.
Now you can change the sizes of these texts through CSS, which we're going to
get into probably in the next video of the series, where we can change the font,
we can change the size, whatever you'd like.
You could even make all of these headings the same size through CSS.
Alright, so the next thing we're going to look at are paragraphs.
So let's put a comment here.
We'll say, Paragraph.
And a paragraph is just a P. Okay, it's just a P tag.
Now I'm going to give you a little hint in Sublime.
If you ever want to generate dummy text, which is just sample text to use for
development, you can actually just type in LARM, the word LARM, and then TAB.
And that's going to give you some LARM ipsum.
Now if you wanted a certain amount of words, like let's say we wanted 10 words,
you could say LARM 10 TAB.
I guess you can't do that in Sublime.
I actually haven't used Sublime in a while.
I usually use Atom or Visual Studio Code and you can do that there.
I'm not sure why it doesn't work here.
Anyways, we'll just generate some text.
And we'll save that.
And a paragraph, just like the headings, has some default styling.
For one, it has a display block, which means it's a block-level element.
So if we were to take another paragraph and go ahead and paste that in and reload,
you'll see that it's automatically on a new line.
It also has some margin.
It has, I believe, 1EM of margin, or 1M.
An M is a measurement in CSS, just like pixels, except it's used for more
responsive stuff.
So if we hit F12 and look at the developer tools, I'm just going to make this a
little bigger.
And we look down in Elements, now you can see we can hover over everything,
and it'll show us it up top.
And if we look at the paragraph here, and I just click on it, over here you'll
actually see any CSS or any styling that is associated with this particular
paragraph or whatever tag we're hovering over.
And when you see this User Agent Style Sheet, this is the default browser
styling.
So you can see a paragraph is displayed as a block, so it's block-level, and then it
actually has some default margin.
Now I'm not going to talk about margin and padding and stuff too much in this video,
because this is strictly HTML.
Margin and padding is CSS.
So this is going to be very little to no CSS in this video.
But just know that margin is spacing around the element.
And you'll see that this before and after is actually the top and bottom,
so that's why you see this space right here.
It's actually 1em, which is a measurement in CSS.
So we do have margin on the top and bottom by default.
And then 0 pixels on the start and end, which is the left and right of the
paragraph.
And it even gives us a little diagram here.
You'll see we have the paragraph, and if you look up in the body it shows it
highlighted padding, which there isn't any, border, and then the margin.
And you'll actually see the margin highlighted up above.
So this is really helpful.
Again, I couldn't imagine doing web development without the Chrome tools.
Now tags can either be inline or block-level elements.
So inline elements do not start a new line when you use them.
They take only the necessary width they need.
Block-level elements, however, start a new line, and they take the full
width of that line.
So if this is confusing, don't worry about it.
I will give you some examples.
Block-level elements include tags like div, heading, or headings, sorry,
h1 through h6, paragraphs, form.
Inline elements include spans, images, links, and I'm going to go over
all this stuff in a little bit.
But just know that some tags are block-level, some are inline.
So let's go into our paragraph here, and I'm going to add some other tags here.
And these are all going to be inline.
They're not going to make us start a new line when we use them.
So let's take a look at strong.
So strong is basically, you want to surround something and say that this text
should be strong in some way.
Now by default, it's going to be bold.
So if we save this and I reload, you'll see that the text we surrounded the
strong tags with is actually going to be bold by default.
But that doesn't necessarily mean that it has to be bold.
You can grab onto this from within your CSS, and you can change the font size,
you can make it italic, whatever you want to do.
Just know that it's a semantic tag for making the text stick out.
And this will usually replace the old bold tags, which are not semantic at all and
not recommended anymore.
Same thing with em.
So em is for emphasize.
So let's surround this text right here with em.
And we'll save and reload.
And again, by default, it's going to be italic.
So you'll see right here.
But again, you can grab onto this in CSS, and you can change it to whatever style
you want.
It just basically means that this part of the document should be emphasized,
or this text should be emphasized.
Alright, so now let's take a look at links.
So what I'm going to do is I'll go... let's go to the second paragraph here.
And let's say we want to wrap this text in a link to go to either another page on our
site or an external website.
So a link is actually an a tag.
So let's say a.
And we're going to give it an attribute.
And I'm going to talk about attributes in a second.
Okay, but let's surround this text here.
Alright, and then if I save that and reload, notice over here we now have this
text as a link.
Now, the href attribute is going to be the location that we want this link to open.
And this could be either local.
It could be, let's say, if we had an about .html page on our site.
Or it could be external.
So if we want to put http, we'll say google.com.
And if I save that and we go over here and we click on that link, it's going to open
google.com.
Now notice it opens it on the same page.
Usually when you have an external website, you don't want the user to just leave your
site like that.
So what you could do is you could add another attribute called target.
And one of the values for this is underscore blank.
And that's going to open up a new tab with this site.
So if we save, reload, and click this, notice that Google opens on a new tab and
we still have our site right here.
So it stops the user from having to leave your site.
You usually only want to use target blank if it's an external site.
If you're going to another page on your website, you don't want that to happen.
You don't want all these tabs opening up when you're just navigating the site.
So all HTML tags can have something called an attribute or multiple attributes.
And what they do is they provide more information about a certain element.
For instance, the href provided in the link, what we just did, we created an a
tag with an href.
And what the href does, as you saw, is it opens up or directs it to a certain
location, a certain website link.
We also provided the target attribute, which is not required, but it still
allowed us to make it so that the link opened in another tab.
Attributes are always placed at the start tag.
And they're always formatted as key-value pairs.
The actual attribute itself, such as href or target, as we saw, that's the key.
And then whatever the value is.
So we have the attribute name or the attribute key, and then the value.
Now the value is always going to be in quotes.
You can use double quotes or single quotes.
I would suggest double quotes because that's usually what's used.
Alright guys, so let's get back to our HTML.
So we're going to go below the paragraphs that we just created.
And now I'm going to show you something called a list.
So there's basically two kinds of lists.
There's an unordered list and an ordered list.
So let's start with an unordered list, which is a ul tag.
So in the ul, we need to have list items.
A list is basically like a bullet point list.
So each list item is going to have an li tag.
And then in here we can put whatever we want.
Let's just put the text list item 1.
Okay, and then I'm just going to copy this.
And we'll go ahead and we'll put four of them in.
So we'll say list item 1, 2, 3, 4.
And it doesn't matter what you put inside here.
But let's go ahead and save that and reload.
And notice that we have bullet points now for our list items.
It also adds some default padding.
Notice that this is pushed over by default.
And if we go ahead and open up our Chrome tools.
And actually let's make it a little bigger.
There we go.
So over here, let's hover over ul.
And you'll see that there's actually some default styling from user agent style
sheet, which is basically just the browser default.
So it's displayed as a block.
Okay, it has a list style type of disk, which you can change within the CSS if you
want to have a different kind of bullet point.
It adds some margin.
Okay.
Actually, yeah, it adds margin before and after 1m.
And then also adds 40 pixels of padding on the start, which is the left.
Okay, so it pushes it over 40 pixels.
And of course, you can overwrite this from within your CSS if you want to change
that.
You can also remove the bullet points.
You can do whatever you want as far as styling.
But we're not getting into that just yet.
All right.
So that is an unordered list.
Now, we also have an ordered list, which is an OL tag.
So what I'll do is just copy this.
And I'm just going to change it to an OL instead of a UL.
Okay, we'll save that, reload.
And notice that the ordered list now gets rid of the bullet points and replaces it
with the numbers.
Okay, so it'll automatically add numbers to your list.
Now, unordered lists are usually what's used for website navigation.
When you see a nav bar up at the top, that's usually just an unordered list.
It's just styled so that the elements float to the right.
They're displayed inline, and it has some really nice background colors and things
like that.
But as far as the HTML goes, it's usually just a simple list.
All right, so next thing we're going to look at are tables.
So let's put a comment here, and we'll just say table.
So it's going to be a table tag.
All right, and there's quite a few tags that go into building a table.
So we have table, and then we have a head, an area for the heading, and then an area
for the table body.
So we say THEAD, okay, and then we're going to have TBODY.
Now, in the heading is where we're going to put the row that has, like,
you know, we're going to have a name, email, and age column.
All right, so these will be the headings of each column.
So we're going to put a TR, okay, TR is table row, and then each heading is
going to have a TH tag.
All right, so this will be, let's say, name.
We'll put another one.
This will be email.
And let's say age.
Okay, so these are the headings.
Now, if I save this and reload, this is what it's going to look like by
default.
Now, I'm going to do something here because I don't want you guys to have to
keep looking at the bottom of the screen.
So what I'm going to do is just put in a div right here with a style attribute.
You don't have to do this.
I just want to move this stuff down.
I'm just going to put a margin top of 500 pixels.
All right, and that's just going to make it so that I can put this so you guys can
look in the middle now, not at the bottom.
All right, so back to our table.
We have our T head with our table row and our headings.
Now we want another TR.
Okay, and this time we're not going to use TH because these aren't headings anymore.
This is actual data.
So we're going to use TD.
Okay, so let's say we want a name.
I'll just put my name.
And then we'll put another TD with an email.
We'll just say brad at something dot com.
And then we'll put age.
Put 35.
Save that, reload.
And now we have some data inside of our table.
Okay, and you're most likely going to have more than one row.
So what I'll do is copy that.
Paste it in two times.
And let's just change the name up here.
We'll say John Doe.
We'll say 45.
And then let's change this.
We'll say Sarah Williams.
We'll make her 25.
All right, so we'll reload.
And now we have a couple names.
And again, this is going to look very ugly because we don't have any CSS whatsoever.
It's just HTML markup.
And this is what a default table looks like.
Now, the way that we build HTML websites has changed along the past few years.
We used to use tables to actually create website layouts.
For instance, you'd have a sidebar, and then a main area, and then another
sidebar.
And that could actually be a table with a couple columns.
That is not recommended anymore.
You don't want to use tables for anything for your layout.
You want to use tables for tabular data only.
So if you have a list of customers with their names and info like this,
that's fine to use a table.
But do not use it for your layout.
You want to use CSS for your website layout.
That's very 1999-ish to use tables for layouts.
And there's little rules like that that they're not enforced by the browser per se
or by the technology, but it's just...
there's a right and a wrong way to do things.
And I'm a big advocate for doing things differently and everyone not being the
same, but some things are just wrong.
And using tables for a layout is wrong.
Alright, so now we're going to move on to forms, which you see a lot of on the
internet.
Now, the important thing to know about forms is that with HTML, we can create the
actual look of the form, but we can't add functionality to the form with HTML.
For instance, a login form.
You can build the actual look of the form with HTML, but to actually make it
function, you need to have something like PHP or some other programming language
with dynamic functionality.
Alright, so we're only covering the look of the form.
So we're going to put in a form tag.
Alright, now usually with a form, you'll see an attribute called action,
and that's going to basically submit the form to a certain page.
For instance, a PHP page.
So let's say it was going to go to a file called process.php on our server,
and maybe that would be a newsletter form or a register form, something like that.
You'll also see method.
And method is usually going to be post for a form, this meaning that we're making a
post request to the server, and posts are used to do things like add data to a
database, stuff like that.
It's pretty secure, as opposed to get, which is going to submit it, and with a
get request, you'll actually see the data filled in in the URL, and it's not very
safe.
But it's fine for things like search, things where you're not actually adding
data or something to a server.
Alright, but that's a lot more advanced, we're not going to get into that now.
Okay, I will leave this here, but just know that this has to do with more
advanced server-side programming.
So, in our form, let's go ahead and let's add a label.
Okay, so we're going to have a couple inputs, we're going to put a label for,
let's say, first name.
Alright, and then under that, let's put an input tag.
So an input is going to have an attribute called type, because there's a lot of
different inputs.
This is actually going to be a text input.
Okay, which is probably the most common.
And then the name attribute has to do with, again, server-side programming.
If we were submitting this to a PHP file, this name attribute is how we would grab
the value of this form that's submitted.
Okay, so it's not going to make any difference to us what we put here,
but I'm just going to put first-name.
Alright, so let's go ahead and save that and reload.
And this is what we get.
Now this is awfully close to the table, so what I'm going to do is put a line
break here.
Usually to separate things like this, we would use CSS, but I'm not getting into
CSS yet, so let's just put a line break.
That's going to push it down a little bit.
Alright, we also have an HR tag, which I haven't talked about yet,
which is a horizontal rule, and that gives us kind of a line in our page.
So if I reload, you'll see we now have a line that goes across the page.
I'm just going to put another BR under it as well.
Alright, so it just allows us to separate things.
So let's create another field here in our form.
Let's do a last name.
So what I'll do is copy this, and let's just change this to last name,
name, last name.
Actually, you know what?
Usually what I do here is use camelCase.
So we'll go like this.
Instead of the hyphen.
CamelCase is basically starting it with a lowercase, and then every other word,
every word after that is going to be uppercase.
So now we have a first name and a last name.
If I reload, you'll see it down here.
Now, labels and inputs are both inline.
That's why they're on the same line here, and they only take up the amount of width
that that element takes up.
Usually you'll have form fields, you know, on separate lines.
So what I'm going to do is wrap them in a div, because remember, divs are
block-level elements, so that'll actually put it on the next line.
Alright, so let's do that, and then we'll put a div here, wrap that around both the
label and the input.
Okay, so now if we reload, now they're on separate lines.
They're still pretty close together.
Like I said, we would use CSS to add some padding there, but I'm just going to put a
line break in between the two.
Okay.
Alright, so let's look at some of the other types of field.
Now, you may want an email.
Actually, let's put a line break there.
So for email, you could, of course, use text.
Let me just change this.
You could use text, but with HTML5, we now have a type that we can use called
email, and that'll actually add a little bit of validation without having to add
any JavaScript or anything.
If we try to submit our form, and it's not a valid email address, and we have the
type of email, it's going to give us a little error that pops up.
Alright, so you want to use type email when you're dealing with an email address.
Alright, so let's copy that, and let's put, let's say, message.
So what I want to do here is I want to use a text area, which is kind of like a
bigger text input.
So for that, we don't actually use an input tag, there's an actual text area
tag.
Okay, so we'll go like that.
And usually your text area, if you're submitting to a server-side file,
you'll have a name, so we'll call it message.
Alright, we'll save that, reload, and now we have a text area.
Okay, and you can actually make it bigger and smaller with this little control here.
Another field that you'll see quite a bit is a select list.
Okay, so for that, I'm just going to copy this div.
So let's say this is, I don't know, we'll just say gender, I guess.
So let's say we want a select list to choose either male or female.
So we'll put a select, we'll give it a name of gender.
Okay, now each select is going to have a couple options.
So that'll be the option tag, and then usually you'll have a value associated
with each option.
So let's say male.
Okay, and then the actual text to be displayed will go in here like that.
Alright, so let's save that, I mean copy that.
And just to be politically correct, we'll go ahead and do an other.
So this will be female, and this will be other.
Alright, so if we save that and reload, now we have a little select list with
male, female, other for gender.
Alright, now we have a couple other field types that I want to show you,
but I'm just going to paste these in because we're kind of running out of time
here.
So I'm going to go right into this div, and I'm going to paste in a couple more.
So this is actually a number type, so we're putting an age here with a type
of number, and it has a name, and then I also added a value here because we can
also add a predefined value to our inputs.
Alright, and then we also have the type of date.
Okay, so this is actually a date selector.
And these are HTML5, okay, so these are both HTML5 standards.
So let's save that and reload, and now you'll see you have a number and
it actually has these arrows where we can switch, we can make the number go up and
down.
And then the date, you'll see we have this date selector.
Now, like I said, we can have a value, we can put a value to anything we want
here.
Now, before HTML5, if you wanted to have like, for instance, we'll put a value
here, and we'll just say, let's say we wanted to say, enter first name.
Okay, and reload.
Usually, you know, before HTML5, we would have to do this and we'd use
JavaScript to make it so that when we clicked in here, this would go away.
Okay, and that was, that was a real pain in the ass.
So with HTML5, they actually added a placeholder that we could use here.
Okay, so we'll say placeholder equals enter first name, and now you'll see that
it's grayed out, and if I click in here, we can actually replace it.
Okay, so that, that made things a lot easier.
So the last thing we would need for the form is an input button.
So let's go down to the bottom here, and what I'm going to do is put in an
input, and we're going to say type submit.
Okay, and we'll give it a name of submit, and it's also going to need a value,
which is going to be the actual text of the button, which will be submit.
Alright, so we'll reload, and now we have a submit button.
Okay, it's going to, it's going to actually get submitted to process.php,
because that's what we put in the action of the form, but that doesn't actually
exist.
Okay.
Now we can also have buttons outside of forms, so let's go under the form.
I'm just going to put a comment here.
And there is a button tag.
Okay, so we'll put a button tag here, and we'll just say click me.
Now, this isn't going to do anything.
If we reload, it's going to show the button, but it's not going to do anything
because in order to hook up a button to actually do something, you need to use
JavaScript.
Okay, so what you would do is you would add an event like click equals,
and then you have some function, but we're not going to get into that.
That's something for another video.
Okay, we're just focusing on HTML here.
And as you can see, HTML doesn't really do much as far as, you know, functionality
and dynamic.
That's why it's not a programming language.
It's a markup language.
It's just used to display stuff on the screen, and then use other languages like
JavaScript to make it dynamic.
Alright, so the next thing I want to look at are images, or the image tag.
Okay, so for images, we're going to use an img tag, and this is actually a
self-closing tag.
We don't need to do slash image or anything like that.
You can see it doesn't even...
Sublime Text doesn't even do it for us automatically.
Alright, now an image tag by itself means nothing because it doesn't know what image
to load.
So let's go ahead and grab an image.
I'm just going to search for sample image.
We'll grab this bird here.
Okay, whoops.
Didn't mean to do that.
We'll just save it.
And I'm going to save it into...
Where is this?
I think it's on my desktop.
Yep, HTML cheat sheet.
And let's save it as just sample.jpg.
Alright, and then what we'll do is go to our image and we'll say source.
Okay, source attribute.
And we're going to set this to the name of the image which is sample.jpg.
Alright, and then we'll go back to our HTML, reload, and now we have the image.
Now, the reason it knows where to look is because this is actually in the same
folder as our index HTML, so we didn't have to put any folder names or anything
here.
So what I'm going to do is open up our folder and you can see that it's in the
same directory.
So usually when you build websites you'll have a folder called images or img or
something like that.
And then you'll have your images inside there.
Now if I reload, it's not going to show the image because it's looking in the root
here, but it's really in the images folder.
So what we would have to do is change the location here to go to images slash sample
.jpg.
And we reload and now it's back.
Alright, now with images you should also use an alt attribute.
And basically what this does is if it can't find the image it's going to display
whatever text is here.
So let's just say my sample image.
Okay, now if I save and reload we're not going to see any difference, but if for
some reason it can't find the image, let's just change the name and save and
reload.
Now you'll see that it'll display the text.
So you have a way to kind of show what this image is even if it doesn't,
even if it doesn't load or it can't find it.
Alright, let's just change that back.
Alright, now there's also a width and height attribute you can use in HTML.
Usually I would suggest using CSS to do this stuff, but it is available.
So let's say we wanted this to be, let's say 200 pixels and reload.
It'll change it to 200 pixels.
Notice that images are also inline, that's why it's not on a new line.
So what I'm going to do here is just put a line break.
Oh, I have to put another.
Oh, I put it below the image.
Alright.
And notice that the height is set to auto.
Okay, so the height is auto, so the image still looks good.
But if you wanted to change the height up, you could do that as well.
So let's say you change it to 50 and reload.
And it'll distort it, but it will change it to what you set it to.
But I'm just going to keep the height.
I'm just going to get rid of the height, so it's auto.
Now, if you wanted to, you could wrap a link around the image.
So let's put an A here.
Alright, and then you could actually point to the location of the image.
So we'll just grab this, put that in the href, and reload.
And now if I click on the image, it's going to open it up in the browser.
Okay, browsers don't just open up HTML files, they can open up other types,
such as an image.
Alright.
So we're almost done with the basic HTML tags, and I want to move on to HTML5
semantic tags.
But the last thing I want to show you is quotations.
Okay, so we have different quotation elements we can use.
So let's say quotations.
And those are blockquote, abbreviate, and cite.
Okay, so let's start with blockquote.
And this is usually used just for that, for some kind of quote.
So let's put in blockquote tag.
And this takes an attribute called cite.
And this is going to be from, you know, from where the quote comes from.
Let's say it comes from traversymedia.com.
And we'll just put some sample text in here.
I'll say larm tab.
And we'll save that.
And you'll see that it does add a little bit of styling.
It gives it some padding and pushes it to the middle a little bit.
It's not going to show the actual cite.
Okay, if we look at the source code, it will.
So if we go down right here, you'll see it does show it here.
Alright, and you can style this however you want from within CSS.
We also have the abbr tag or abbreviation tag.
So let's say we have a paragraph here and we'll say the, let's say the www is
awesome.
Alright, now this, we all know, stands for World Wide Web.
So what I'm going to do is just wrap this in an abbr tag.
And we're going to give it a title.
And we'll say World Wide Web.
Okay, so it's used for abbreviations.
So let's go ahead and save that, reload.
And now notice that it has an underline.
And if we go and we hover it, it'll show us the full title.
Okay, we also have a cite tag.
Okay, c-i-t-e.
So let's put another paragraph here.
And let's say HTML Crash Course by Brad Traversy.
Okay, and then we'll just wrap HTML Crash Course in a cite tag.
Okay, we'll save that, reload.
And it gives us this italic style here.
Alright, and it lets, it's semantic to let the browser know that this is something
that's being cited.
Alright, so those are the basic HTML tags and elements.
Now what I want to do is talk a little bit about HTML 5 semantic tags.
So the HTML 5 semantic tags clearly describe their meaning to both the browser
and the developer.
So if we look over here, these are the tags that were added.
And this is kind of a diagram of what you would use these for.
Okay, you use them to kind of lay out your website.
So we have header, which obviously would be the header.
You'd usually have your logo, things like that, your social media links.
Then we have the nav tag, which would be your nav bar.
Section, okay, section would describe like the copy text or something like that on
your home page or whatever.
And then if you have like a blog, you could have an article tag around each
post in the blog.
A side has to do with just like sidebar content.
Alright, and then you have the footer, which is going to be your copyright or
your privacy policy links, things like that.
Okay, so HTML 5 has created these tags to kind of structure your document even
further.
Alright guys, so what we're going to do is we're going to create a new HTML page,
and we're going to use these HTML 5 semantic tags to map out our page.
So let's go to, let's see, HTML cheat sheet folder.
We have our index page, but I'm going to create a new text document, and I'm going
to call this blog.
Yeah, blog.html.
Okay, so we'll say that this is kind of a, you know, like a blog post, a blog page or
a news page, something like that.
So let's open that up with Sublime Text.
Just bring that over.
Alright, and just like with the index page, we need to have our doc type,
our HTML head tags, things like that.
Now, with Sublime Text there's actually a shortcut we can do, and that's to do HTML
tab, and it'll give us kind of a default structure.
So just a nice little shortcut.
Now, in the title, let's just say, we'll just say my blog.
Alright, we're going to add some other stuff in the head in a little bit as well,
but let's go ahead and start with our HTML5 semantic tags.
So first thing we're going to do is have a header.
Alright, and in the header, we're just going to have an H1 and we'll just say my
website.
Okay, again, this is going to look very ugly because we're not using CSS,
but just structurally, you want to have your header at the top.
Alright, then what we'll do is have a section.
Okay, so this would be like the main area of the page.
So if this were like an about page, we could have a couple paragraphs about
the company or whatever.
This is a blog page, so what we're going to do is we're going to have some article
tags and then in each article will be each blog post.
Okay, so let's go ahead and put an H3 here.
That would be the title.
We'll just say blog post 1.
Alright, and then another tag that I haven't showed you yet is the small tag.
And small is usually used for like create dates, things like that, just like sub
content.
So let's just say posted by Brad on July 17.
Okay, so let's save that and take a look real quick.
So we're going to go up here in our browser and we're going to just change
index.html to blog.html.
Alright, that's what it's going to look like.
And by default, the small tags will actually make the text smaller.
So let's put the actual post, which we'll put inside of a paragraph.
So I'm going to type lorem, tab, gives us some sample content.
Alright, and then usually on your main blog page you'll have more than one
article.
What I'm going to do is I'm going to give this a class of post.
Okay, so each article will have a class of post.
And then let's just copy this and we'll just paste in a couple more.
Okay, this one will be blog post two and blog post three.
Alright, so if we save that, reload, now we have a couple blog posts.
You may also have a link at the bottom of each one that goes to the full post.
So let's just put, we'll put an a tag, and it will go to something like,
you know, post.html or something like that.
And then we'll say read more.
Okay, and then let's just copy that.
Put one here and here.
Alright, and since a paragraph is a block level element, it's going to go on to the
next line.
Even though an a tag is inline, since the one before it is a block level,
it's going to push it to the next line.
Now, you may want to have some kind of sidebar on your page with like,
let's say the blog post categories.
So what we'll do is go outside of the section and we're going to put an aside or
a side, whatever you want to call it.
Okay, and then in here, let's say these are categories, so we'll put an H3.
We'll say categories and let's put a UL with some LIs with some links.
So let's say this, we'll just put these to go to a number sign, which basically just
means the same page we're on.
It's not going to go anywhere.
So we'll say category one.
We'll copy that.
And we'll say category two and three.
And we'll save it, reload.
And now we have our categories.
Now, usually you'd use CSS to probably float these to the side rather than have
them down here.
But that's something we'll get into later.
All right.
Now, usually when you have some kind of navigation, you want to use the HTML5 nav
tags.
So what we would do is just surround the UL in the nav.
And we can grab onto this within the CSS and style it if we want.
And then finally, we're just going to have the footer.
So let's go outside of the aside and put in a footer tag.
And we're just going to put a paragraph.
We'll say copyright.
Now, within HTML, you also have these entities you can use, or symbols.
And there's different codes for each one.
So for a copyright, we can do ampersand, copy, semicolon.
And that'll give us a copyright symbol.
Alright, we'll say 2017.
We'll just say my website.
Okay, we'll save it, reload.
And now we have copyright 2017, my website, as our footer.
Alright.
Now, sometimes you may have more than one header and footer.
So it's a good idea to give these an ID or a class.
So in this case, I'm going to give it an ID of just main header.
Okay, and same thing with the footer down here.
We'll give that an ID of main footer.
Because some people might actually use, for instance, the title of a blog post,
the title and the date and stuff.
They might wrap that inside of a header.
It doesn't necessarily mean it has to be your main website header.
Okay.
Now, I really don't want to get into CSS in this video, but I will add just a
couple simple styles to the header.
Alright, now when you're adding CSS, usually you want to put it in an external
file, but you can put it up in the head area inside of a style tag.
And you can let it know that this is going to be CSS.
This does not require the type.
You don't have to have this, but Sublime actually puts it by default.
And then in here, let's say we want to grab onto the ID of main header.
So an ID is represented with a number sign.
Okay, so we'll say ID main dash header.
I'm not going over this thoroughly because we will do this in the next video.
But for the main header, let's say we want to align the text to the center.
Let's say we want to add a background color of black.
Okay, since the background is black, let's change the text color, which is just
going to be color.
And we'll change that to white.
And then I'm just going to add a little bit of padding around everything,
so we'll say 10 pixels.
So I'll save that, reload, and now we have a little website header.
Alright, if we want to grab onto the footer, remember we gave it an ID of main
footer.
And all I'm going to do with that is just text align to the center.
And we'll just make the font size a little bigger.
Alright, and don't worry about learning these styles yet.
We're going to go over all of this in the next video.
So let's save it, reload, and now our footer is centered.
Alright, and the last thing I'm going to go over is the meta tags that you can use
in your head area.
Okay, so when Google indexes your website or your webpages, it's going to look at
the description, and it's going to look at your keywords, things like that.
So let's go right under the title here, and let's put in a meta tag.
Now, meta tags are going to have a name attribute, so we're going to say this is
the description of our page, and then it's going to have a content attribute,
which will be the actual content.
So let's just say awesome blog by Traversy Media.
Okay, so that's our description.
And then we can also add keywords, so that will be another meta tag with the
name of keywords.
Okay, it's going to have content, and the content is going to be a
comma-separated list.
So we'll say web design blog,
web dev blog.
You might put your company name, stuff like that.
Alright, and if we save that, there's not going to be any difference from here.
If we look at the source code, control U, you'll see that now that stuff
is added here, and Google will actually look at that stuff when it scans your
website.
So the last thing I want to do is just link the two pages together, our cheat
sheet and the blog area.
So what I'll do is put a link in the blog page.
Let's see, we'll go right under the header here, and we'll just put an A tag,
and that's going to go to index.html, and let's just say go to index.
Alright, so if we reload, we have this go to index.
If I click that, that'll bring us here.
Now let's go to index.html, and we'll go to the very top, right under the body,
and let's put an A tag, and we'll say go to blog.html, and the text will say go to
blog.
And then let's just put an HR underneath.
Okay, reload.
And now we can switch back and forth to our pages, and that's how navigation is
put together.
Alright guys, so I think we're going to stop here.
All this markup will be in the description, I'll have a link to download
the zip file.
Hopefully you learned something from this and you enjoyed it.
Like I said at the beginning of the video, if you're a subscriber of mine,
you probably already know all this stuff.
If you watched the whole thing, that's awesome.
Thanks for that.
And that's it.
Please subscribe if you like this.
I do much more advanced stuff, so you'll learn much more.
And leave it a like if you liked it.
If you didn't like it, go ahead and leave it a dislike, and I will see you in the
next video.