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.

02.02 - HTML5 Tags and Syntax

HTML5 入门

与讲师见面