0:00:00.411,0:00:01.835
Բարի գալուստ մեր կայքէջ

0:00:01.835,0:00:04.059
Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ

0:00:04.059,0:00:07.477
Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում[br][br]

0:00:07.477,0:00:10.166
և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ[br]

0:00:10.275,0:00:11.681
Բայց առաջին հերթին եկեք

0:00:11.681,0:00:14.860
ուսումնասիրենք դատարկ էջի կմախքը[br]

0:00:15.389,0:00:16.944
Ամեն կայքէջ սկսվում է

0:00:16.944,0:00:20.384
այս, վերևում երևացող տողը, DOCTYPE-ը

0:00:20.562,0:00:21.961
տեղեկացնում է զննիչին, որ

0:00:21.961,0:00:24.603
այս կայքէջը գրված է ժամանակակից HTML-ով[br]

0:00:24.603,0:00:27.530
այլ ոչ hին ու տաօրինակ HTML-ով

0:00:27.931,0:00:31.026
Հիմա նայենք էջի առաջին թեգին

0:00:31.026,0:00:34.582
HTML is markup language,[br]so it's all about tags.

0:00:34.635,0:00:36.399
A tag is one of these things

0:00:36.399,0:00:38.314
that starts with an angle bracket

0:00:38.314,0:00:40.684
and ends with another angle bracket.

0:00:40.745,0:00:42.346
Or if you like math,[br]you might think of them

0:00:42.346,0:00:45.383
as less than and greater than signs.

0:00:46.474,0:00:48.356
The first tag of every page is always

0:00:48.356,0:00:51.343
that HTML tag right under the DOCTYPE.

0:00:51.343,0:00:53.871
This one is the start HTML tag,

0:00:53.871,0:00:57.055
and then at the bottom,[br]there's this end HTML tag,

0:00:57.055,0:00:59.729
which is the same except[br]for this backslash,

0:00:59.729,0:01:01.747
which is really important.

0:01:01.889,0:01:05.147
The HTML tag needs to[br]contain every other tag

0:01:05.147,0:01:07.354
that makes up this webpage.

0:01:07.376,0:01:11.051
That's why we don't have the[br]end HTML tag until the bottom.

0:01:11.119,0:01:13.351
A lot of HTML tags come[br]in pairs like this,

0:01:13.351,0:01:15.099
but not all of them.

0:01:15.571,0:01:19.176
Underneath HTML, there's[br]always a head tag.

0:01:19.437,0:01:22.146
That contains tags that helps[br]the browser render the page,

0:01:22.146,0:01:25.162
but doesn't contain anything[br]the user actually sees.

0:01:25.435,0:01:27.885
There's this meta tag[br]that gives the browser

0:01:27.885,0:01:30.017
more details about how to render the page.

0:01:30.204,0:01:31.885
For example, if you're[br]using common characters

0:01:31.885,0:01:33.281
like from English language

0:01:33.281,0:01:34.747
and not harder to render characters

0:01:34.747,0:01:36.628
from the Arabic language,

0:01:36.628,0:01:39.618
then you should have meta[br]charset equals utf-8.

0:01:40.100,0:01:41.578
Then there's this title tag,

0:01:41.578,0:01:45.009
which the browser uses to[br]decide the title of the page.

0:01:45.212,0:01:47.623
This is what shows in the[br]tab on top of browsers

0:01:47.623,0:01:50.039
and in bookmarks and in search results.

0:01:50.161,0:01:53.430
Here on Khan Academy, the title[br]shows up above our webpage.

0:01:53.687,0:01:55.544
Let me change the title.

0:01:55.695,0:01:59.348
I'm going to make a[br]page all about rabbits.

0:01:59.348,0:02:01.914
So I'll say "All About Rabbits"

0:02:01.914,0:02:04.923
and maybe you can actually[br]see as it changes above.

0:02:05.539,0:02:08.149
Nice, now we're done with these details

0:02:08.149,0:02:11.946
so we end the head tag[br]and move on to the tag

0:02:11.946,0:02:14.809
where it's all going to[br]happen, the body tag.

0:02:15.033,0:02:17.805
It's pretty boring right now,[br]just the start and the end.

0:02:18.081,0:02:19.521
What should I add?

0:02:19.521,0:02:21.921
Well, I'm making a webpage about rabbits,

0:02:21.921,0:02:23.155
so I should probably declare

0:02:23.155,0:02:25.455
that in a big ole headline at the top.

0:02:25.559,0:02:28.656
To add a headline, we use the H1 tag.

0:02:29.574,0:02:33.154
All about rabbits, great.

0:02:33.154,0:02:34.772
Actually we have six[br]tags that we could use

0:02:34.772,0:02:38.441
for headlines: H1, H2, H3, H4, H5 and H6.

0:02:38.461,0:02:41.153
The H1 is for the most[br]important headlines on the page

0:02:41.153,0:02:43.358
and H6 is the least important.

0:02:43.491,0:02:45.682
Let me add a few more[br]headlines for other sections.

0:02:45.696,0:02:49.035
I'll use an H2 since these are slightly

0:02:49.035,0:02:51.197
less important sections.

0:02:51.957,0:02:55.469
And some songs, ok, great.

0:02:56.214,0:02:58.240
Now let's add some information.

0:02:58.402,0:03:00.435
Well, my target audience for this page

0:03:00.435,0:03:03.934
is aliens that have never seen rabbits.

0:03:03.934,0:03:06.943
So I better give them a[br]good description of rabbits.

0:03:07.100,0:03:10.174
In fact, I think I need a[br]whole paragraph of information.

0:03:10.396,0:03:12.856
How can I markup a paragraph in HTML?

0:03:13.391,0:03:16.049
With the P tag of course.

0:03:16.470,0:03:20.736
We put in that P tag, and then[br]I'm just going to go ahead

0:03:20.736,0:03:22.633
and paste in the information

0:03:22.633,0:03:25.568
so that you don't have to[br]watch me type the whole thing.

0:03:25.856,0:03:27.116
Beautiful.

0:03:27.699,0:03:30.901
Now the aliens will need a[br]song to greet the rabbits with,

0:03:30.912,0:03:33.170
so I'll give them lyrics[br]to my personal favorite.

0:03:33.170,0:03:38.170
Once again, use that P tag[br]for it and paste in the song

0:03:39.521,0:03:43.419
"Little Bunny Foofoo", such a good song.

0:03:43.572,0:03:47.672
But uh oh, it's showing[br]up all on the same line.

0:03:47.868,0:03:50.315
How will the aliens know when to pause?

0:03:50.418,0:03:51.660
Why didn't the browser render

0:03:51.660,0:03:54.092
the line breaks that I put in here?

0:03:54.350,0:03:57.052
Well actually, browsers[br]mostly ignore line breaks

0:03:57.052,0:03:59.139
and white space in your HTML.

0:03:59.318,0:04:01.647
If we want the browser[br]to render a line break,

0:04:01.647,0:04:05.022
we have to tell it[br]explicitly using another tag,

0:04:05.022,0:04:08.176
the BR tag, which stands for break.

0:04:08.398,0:04:12.513
We'll go through and[br]add BRs after each line.

0:04:12.777,0:04:14.885
Now it looks like lyrics.

0:04:15.440,0:04:18.890
Do you notice something funny about BR?

0:04:19.221,0:04:20.851
There's no end tag.

0:04:20.966,0:04:21.938
If you think about it,

0:04:21.938,0:04:23.492
a line break doesn't contain any content,

0:04:23.492,0:04:25.861
so it has nothing to end after.

0:04:26.006,0:04:28.496
Just the start tag is all we need.

0:04:29.062,0:04:30.361
There we have it.

0:04:30.456,0:04:32.704
The aliens will learn[br]the basics of rabbits

0:04:32.704,0:04:35.883
and you've learned the basics of HTML.

0:04:36.044,0:04:37.158
After I'm done talking,

0:04:37.158,0:04:39.915
play around with this[br]and try changing things.

0:04:39.976,0:04:43.658
When you're ready, go on to[br]your first HTML challenge.