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