HTML Basics (Video Version)

{'type': u'plain'}

Բարի գալուստ մեր կայքէջ

Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ

Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում

և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ

Բայց առաջին հերթին եկեք

ուսումնասիրենք դատարկ էջի կմախքը

Ամեն կայքէջ սկսվում է

այս, վերևում երևացող տողը, DOCTYPE-ը

տեղեկացնում է զննիչին, որ

այս կայքէջը գրված է ժամանակակից HTML-ով

այլ ոչ hին ու տաօրինակ HTML-ով

Հիմա նայենք էջի առաջին թեգին

HTML is markup language,
so it's all about tags.

A tag is one of these things

that starts with an angle bracket

and ends with another angle bracket.

Or if you like math,
you might think of them

as less than and greater than signs.

The first tag of every page is always

that HTML tag right under the DOCTYPE.

This one is the start HTML tag,

and then at the bottom,
there's this end HTML tag,

which is the same except
for this backslash,

which is really important.

The HTML tag needs to
contain every other tag

that makes up this webpage.

That's why we don't have the
end HTML tag until the bottom.

A lot of HTML tags come
in pairs like this,

but not all of them.

Underneath HTML, there's
always a head tag.

That contains tags that helps
the browser render the page,

but doesn't contain anything
the user actually sees.

There's this meta tag
that gives the browser

more details about how to render the page.

For example, if you're
using common characters

like from English language

and not harder to render characters

from the Arabic language,

then you should have meta
charset equals utf-8.

Then there's this title tag,

which the browser uses to
decide the title of the page.

This is what shows in the
tab on top of browsers

and in bookmarks and in search results.

Here on Khan Academy, the title
shows up above our webpage.

Let me change the title.

I'm going to make a
page all about rabbits.

So I'll say "All About Rabbits"

and maybe you can actually
see as it changes above.

Nice, now we're done with these details

so we end the head tag
and move on to the tag

where it's all going to
happen, the body tag.

It's pretty boring right now,
just the start and the end.

What should I add?

Well, I'm making a webpage about rabbits,

so I should probably declare

that in a big ole headline at the top.

To add a headline, we use the H1 tag.

All about rabbits, great.

Actually we have six
tags that we could use

for headlines: H1, H2, H3, H4, H5 and H6.

The H1 is for the most
important headlines on the page

and H6 is the least important.

Let me add a few more
headlines for other sections.

I'll use an H2 since these are slightly

less important sections.

And some songs, ok, great.

Now let's add some information.

Well, my target audience for this page

is aliens that have never seen rabbits.

So I better give them a
good description of rabbits.

In fact, I think I need a
whole paragraph of information.

How can I markup a paragraph in HTML?

With the P tag of course.

We put in that P tag, and then
I'm just going to go ahead

and paste in the information

so that you don't have to
watch me type the whole thing.

Beautiful.

Now the aliens will need a
song to greet the rabbits with,

so I'll give them lyrics
to my personal favorite.

Once again, use that P tag
for it and paste in the song

"Little Bunny Foofoo", such a good song.

But uh oh, it's showing
up all on the same line.

How will the aliens know when to pause?

Why didn't the browser render

the line breaks that I put in here?

Well actually, browsers
mostly ignore line breaks

and white space in your HTML.

If we want the browser
to render a line break,

we have to tell it
explicitly using another tag,

the BR tag, which stands for break.

We'll go through and
add BRs after each line.

Now it looks like lyrics.

Do you notice something funny about BR?

There's no end tag.

If you think about it,

a line break doesn't contain any content,

so it has nothing to end after.

Just the start tag is all we need.

There we have it.

The aliens will learn
the basics of rabbits

and you've learned the basics of HTML.

After I'm done talking,

play around with this
and try changing things.

When you're ready, go on to
your first HTML challenge.