This is it.
Today's the day, I'm finally going to
teach you enough HTML that you can start
making an interesting page to share
with your friends and family.
It's also, unfortunately, probably, or
at least hopefully,
my first really big disappointment to you.
And the reason is, I need to just
break it to you right away that
I can't teach you all of the HTML 5 tags.
I can't teach them all to you and you
don't want me to teach you all the tags.
It would be incredibly boring for
me to list them all off to you.
Instead I'm gonna get you started and
point you in the direction of where
you can find resources for more tags.
Because it's really not until
you need a tag that you
ever really bother learning about it.
Every tag has a beginning and an end.
So, right here I'm using
what's called an h1 tag or
a heading tag to encase
the words Hello World.
The first h1 is my start tag.
It just shows the simple tag
that I want inside brackets.
The second tag, the closing tag,
always starts with a slash.
The indicates to the browser,
she's about to end a tag.
This is one of the most common,
is to have the start tag and
the closing tag,
with some sort of text inside of it.
My next tag, or the image tag,
is what's called a self closing tag.
There's only one tag, and it contains
both the beginning and the end.
In this case, as soon as the browser
see's the image tag, it knows
that you're gonna give it information
that it can use to create a picture.
And since there's no real text associated
with the image, at least at this point, or
any that you want to show on this screen,
it's going to close itself.
So, while every tag has a beginning and
an end, some do close differently.
Also, some tags have
what we call attributes.
So the source which is where
the picture is located,
an href which is where the new
page you want to go to is.
So when we talk about the tags, for
some of them I'll also be
talking about the attributes.
Before we begin,
I want to talk to you about one
of the most important attributes in
an element and that's its display.
The two most common display types
are what are called block and inline.
Block tags are ones that take up
a certain amount of width and height.
So anytime you have a tag that's
called block, it's the same thing
as if when you were typing, you hit
newline at the end, or enter or return.
Inline tags are ones that only take
up as much space as is needed.
I'm gonna show you examples of both, but
I really want you to understand some
tags are block and some are inline.
And it may not seem important now,
but it's the kind of thing that's
going to make it much easier for
you when you're trying to make
your pages look a certain way.
So some of the most common tags, includes
the ones I'm about to tell you about.
Headings are block tags.
You have h1, h2, h3,
all the way down to h6.
These tags have what are both
called syntax and semantics.
To the browser, at first sight,
it might simply mean, hey,
everything that's in an h1 tag,
I want to make it really big and bold.
And things that are h6, I also wanna make
them slightly bigger and bolder, but
not nearly big and
bold as the ones of the lower numbers.
What a lot of people do is they just
kind of randomly throw around h3 tags or
h4 tags just because they like
the look that the text takes on it.
But these tags also have semantics, kind
of a meaning that you don't see when you
just look at it, and the semantics are,
things that are in an h1 tag
have much higher importance than
things that are in an h5 or h6.
And this is very important for
people who are using screen readers.
If you start throwing h3 tags and h2 tags
all over the place just because you want
them to be a little bit bigger and
bolder, it's gonna be very confusing.
Another extremely common
tag is the paragraph tag.
It's also block, and inside of it you
can only contain other inline elements.
So you can put a lot of text, a lot
of pictures and things like that, but
you should never put a paragraph
inside of a paragraph or even,
you should never put a heading
inside of a paragraph.
Another common tag is the div tag.
This is a generic section that tends
to be larger than a paragraph, and
it's related content that you
would like to group together.
Div's used to be the most popular tag.
You would use the div for everything.
The problem with div's is that there's
really no semantic meaning behind a div.
If you put a lot of them to your page
you're not giving your readers or
users any extra information to let them
know that this is a footer or a header or
something along those lines.
Two additional tags that you'll find
you'll use a lot are the list tags.
If you put in the tag OL that stands for
an ordered list.
By default it's going to put each
list item as one, two, three, etc.
You need to make sure that you
end each of your list items
before you start the next one.
And you need to make sure that you've
ended all your list items before you
end your ordered list.
The unordered list is very similar,
only instead of using numbers,
you'll use special symbols,
perhaps the circle, or the small square,
depending upon your browser.
Now, later when we talk about attributes,
I'll mention that you can go ahead and
change your ordered list.
So instead of being regular numbers,
you're using Roman numerals, or
uppercase letters, or lowercase letters.
But by default, these are just
going to either be a one, two,
three, four, etc., or
some sort of little disc.
Finally one more tag that I know you're
gonna see a lot of is the line break tag.
Line break is simply a br, stands for line
break, and this is a self-closing tag.
Now one of the things that's very
important that I tell you is when you're
typing your code you can put as many
line breaks in your code as you want.
Enter, enter, enter, enter, enter.
But the browser ignores all of it.
The browser is not going to
put something on a new line,
unless it runs out of space or
it specifically sees the br tag.
So I mentioned before with the lists
that tags can have attributes.
Attributes provide additional
information about an element.
Sometimes they're absolutely necessary,
sometimes they're just supplemental.
The important thing to remember is that
attributes are always, always specified in
the start tag, in the beginning, and
attributes come in a name value pair.
So let's go ahead and look at a tag
that needs attributes in order to work.
I'm gonna use the image tag as an example.
Images are inline which means
you can actually put many
images next to each other.
And in order for an image tag to work,
you pretty much need to tell the computer
what picture it is you want it to show.
So in this case, the source
attribute that indicates the browser
that the picture you wanna
show is called myPicture.jpg.
Always notice that again
it's a name value pair.
So the name of the attribute it sorts and
the value always goes in double quotes,
and in this case is mypicture.jpg.
Many people will just end right there,
but I don't want you to do that.
Images should also always
include an alt attribute.
Alt stands for alternative text, and
this is what's going to show up to
somebody who's using a screen reader, or
even if the picture is missing for some
reason, because you've misnamed your file.
This will allow, if you have the little
broken picture, some sort of text to show
up, to help people realize what
it is you're trying to show.
So in this case, I have one tag, which
you can tell because of the bracket, and
two attributes, source and alt.
Now speaking of images there's a few
things I want to mention to you.
Images rarely work the first
time you use them.
They're either gonna show a broken link
because you wrote the wrong file name or
you forgot to upload it or
it's not in the right file, or
the picture is going to be too big or
too small or something like that.
Unless you have the broken link, and
you're just worried about the appearance,
I want you to just let it go for
right now.
What we care about right now is
that you can get tags to work.
We're gonna worry about appearance later.
So if you really have your heart set
on making things look a certain way,
then make sure that you open up
the picture in some sort of editor and
save it to exactly the size you want.
And give it a really good name.
It's very frustrating to work on your web
page when all of your files are named
image underscore 02586.
Here's an example for you of one
image tag with multiple attributes.
I have the image tag,
followed by source logo.jpg.
I have the alternative text, which is info
for the screen readers and broken links.
I include a title attribute, which
will often display when you hover over
the image, and then I also have
a class attribute, which might
indicate extra formatting, such as
the height, the width, the position, etc.
As you learn more and
more tags, you're gonna learn that
they have specific attributes.
It makes no sense for an image to
also include some sort of href.
It makes no sense for
a link to include other attributes.
But there are some that apply to many of
the tags, so I just want to mention them
to you quickly and we'll come
back to them later in the class.
The first is, well, the class attribute.
What is does is it applies special
properties to groups of elements.
We'll use that later when we want to say,
hey, we want to style all these
pictures perhaps as thumbnails.
Ids specify a very unique id to
just a single element on the page.
And you're gonna want to do this
if you want to link back to it,
if later you wanna apply JavaScript to it.
But ID says,,
hey this is a special part of the page,
you're not gonna find
anything else like it.
Style is an attribute that
used to be very widely used.
Style lets you apply visual style.
So you can put in special colors or
spacing and things like that.
The next one is called accesskey, and
an accesskey is very important for
accessibility.
It allows a shortcut key to kind of
activate, or put into focus, an element.
So, maybe you have a big page and
you have a form or something on it, and
you want someone to be able to quickly
get to a certain part of your page.
You can give them an accesskey.
In the same way,
some people may be accessing your page and
only using the tab button to
navigate through your page.
If you do that, you're gonna wanna be
careful about putting what's called a tab
index, and
it lets you actually specify which order
people get to different
elements in your page.
So even though something may come later
in the page, if you feel it's really
important you can put a high tag index and
them get there quickly.
Okay, so one of the things I told you
is that all tags start with a bracket.
Which is fine, that's very easy to figure
out, and the browser knows whenever it
sees a bracket, it shouldn't display
the content, it should do something fancy.
So what do you do if you want
the browser to display a bracket?
And say, hey, this isn't a start tag?
Well, then you're gonna
use special entities.
So if you want a bracket, then use & lt ;.
The lt stands for less than and
please note that's an L, not a one.
You could also do & gt for >, & copy.
If you'd like extra blank spaces,
you actually have to use a special entity.
Putting space, space, space,
the browser ignores it.
You'd have to actually put & nbsp.
Again, if you want the cent, all right,
well what if you actually
want an ampersand?
Well, in that case we even have a special
entity for that, which is & amp.
So, we've gone through a number of tags
today, and you're gonna learn more and
more tags and
probably use cheat sheets and
go online to find a bunch of
different tags you wanna use.
So an important this that
I want you to know is,
how do you know the difference
between a tag and an attribute?
And the key is to look for those brackets.
Also you're gonna want to make sure
that you know which two symbols end
a self-closing tag.
All right.
Don't forget,
that's where you have the forward
slash in the closing bracket.
These are the kind of things that can
really mess up your code when you try to
validate it later, and so
being cognizant of these ideas in
the beginning will really help
you write much cleaner code.
