Բարի գալուստ մեր կայքէջ
Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ
Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում
և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ
Բայց առաջին հերթին եկեք
ուսումնասիրենք դատարկ էջի կմախքը
Ամեն կայքէջ սկսվում է
այս, վերևում երևացող տողը, 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.