WEBVTT

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

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

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



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


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

00:00:11.681 --> 00:00:14.860
ուսումնասիրենք դատարկ էջի կմախքը


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

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

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

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


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

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

00:00:31.026 --> 00:00:34.582
HTML is markup language,
so it's all about tags.

00:00:34.635 --> 00:00:36.399
A tag is one of these things

00:00:36.399 --> 00:00:38.314
that starts with an angle bracket

00:00:38.314 --> 00:00:40.684
and ends with another angle bracket.

00:00:40.745 --> 00:00:42.346
Or if you like math,
you might think of them

00:00:42.346 --> 00:00:45.383
as less than and greater than signs.

00:00:46.474 --> 00:00:48.356
The first tag of every page is always

00:00:48.356 --> 00:00:51.343
that HTML tag right under the DOCTYPE.

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

00:00:53.871 --> 00:00:57.055
and then at the bottom,
there's this end HTML tag,

00:00:57.055 --> 00:00:59.729
which is the same except
for this backslash,

00:00:59.729 --> 00:01:01.747
which is really important.

00:01:01.889 --> 00:01:05.147
The HTML tag needs to
contain every other tag

00:01:05.147 --> 00:01:07.354
that makes up this webpage.

00:01:07.376 --> 00:01:11.051
That's why we don't have the
end HTML tag until the bottom.

00:01:11.119 --> 00:01:13.351
A lot of HTML tags come
in pairs like this,

00:01:13.351 --> 00:01:15.099
but not all of them.

00:01:15.571 --> 00:01:19.176
Underneath HTML, there's
always a head tag.

00:01:19.437 --> 00:01:22.146
That contains tags that helps
the browser render the page,

00:01:22.146 --> 00:01:25.162
but doesn't contain anything
the user actually sees.

00:01:25.435 --> 00:01:27.885
There's this meta tag
that gives the browser

00:01:27.885 --> 00:01:30.017
more details about how to render the page.

00:01:30.204 --> 00:01:31.885
For example, if you're
using common characters

00:01:31.885 --> 00:01:33.281
like from English language

00:01:33.281 --> 00:01:34.747
and not harder to render characters

00:01:34.747 --> 00:01:36.628
from the Arabic language,

00:01:36.628 --> 00:01:39.618
then you should have meta
charset equals utf-8.

00:01:40.100 --> 00:01:41.578
Then there's this title tag,

00:01:41.578 --> 00:01:45.009
which the browser uses to
decide the title of the page.

00:01:45.212 --> 00:01:47.623
This is what shows in the
tab on top of browsers

00:01:47.623 --> 00:01:50.039
and in bookmarks and in search results.

00:01:50.161 --> 00:01:53.430
Here on Khan Academy, the title
shows up above our webpage.

00:01:53.687 --> 00:01:55.544
Let me change the title.

00:01:55.695 --> 00:01:59.348
I'm going to make a
page all about rabbits.

00:01:59.348 --> 00:02:01.914
So I'll say "All About Rabbits"

00:02:01.914 --> 00:02:04.923
and maybe you can actually
see as it changes above.

00:02:05.539 --> 00:02:08.149
Nice, now we're done with these details

00:02:08.149 --> 00:02:11.946
so we end the head tag
and move on to the tag

00:02:11.946 --> 00:02:14.809
where it's all going to
happen, the body tag.

00:02:15.033 --> 00:02:17.805
It's pretty boring right now,
just the start and the end.

00:02:18.081 --> 00:02:19.521
What should I add?

00:02:19.521 --> 00:02:21.921
Well, I'm making a webpage about rabbits,

00:02:21.921 --> 00:02:23.155
so I should probably declare

00:02:23.155 --> 00:02:25.455
that in a big ole headline at the top.

00:02:25.559 --> 00:02:28.656
To add a headline, we use the H1 tag.

00:02:29.574 --> 00:02:33.154
All about rabbits, great.

00:02:33.154 --> 00:02:34.772
Actually we have six
tags that we could use

00:02:34.772 --> 00:02:38.441
for headlines: H1, H2, H3, H4, H5 and H6.

00:02:38.461 --> 00:02:41.153
The H1 is for the most
important headlines on the page

00:02:41.153 --> 00:02:43.358
and H6 is the least important.

00:02:43.491 --> 00:02:45.682
Let me add a few more
headlines for other sections.

00:02:45.696 --> 00:02:49.035
I'll use an H2 since these are slightly

00:02:49.035 --> 00:02:51.197
less important sections.

00:02:51.957 --> 00:02:55.469
And some songs, ok, great.

00:02:56.214 --> 00:02:58.240
Now let's add some information.

00:02:58.402 --> 00:03:00.435
Well, my target audience for this page

00:03:00.435 --> 00:03:03.934
is aliens that have never seen rabbits.

00:03:03.934 --> 00:03:06.943
So I better give them a
good description of rabbits.

00:03:07.100 --> 00:03:10.174
In fact, I think I need a
whole paragraph of information.

00:03:10.396 --> 00:03:12.856
How can I markup a paragraph in HTML?

00:03:13.391 --> 00:03:16.049
With the P tag of course.

00:03:16.470 --> 00:03:20.736
We put in that P tag, and then
I'm just going to go ahead

00:03:20.736 --> 00:03:22.633
and paste in the information

00:03:22.633 --> 00:03:25.568
so that you don't have to
watch me type the whole thing.

00:03:25.856 --> 00:03:27.116
Beautiful.

00:03:27.699 --> 00:03:30.901
Now the aliens will need a
song to greet the rabbits with,

00:03:30.912 --> 00:03:33.170
so I'll give them lyrics
to my personal favorite.

00:03:33.170 --> 00:03:38.170
Once again, use that P tag
for it and paste in the song

00:03:39.521 --> 00:03:43.419
"Little Bunny Foofoo", such a good song.

00:03:43.572 --> 00:03:47.672
But uh oh, it's showing
up all on the same line.

00:03:47.868 --> 00:03:50.315
How will the aliens know when to pause?

00:03:50.418 --> 00:03:51.660
Why didn't the browser render

00:03:51.660 --> 00:03:54.092
the line breaks that I put in here?

00:03:54.350 --> 00:03:57.052
Well actually, browsers
mostly ignore line breaks

00:03:57.052 --> 00:03:59.139
and white space in your HTML.

00:03:59.318 --> 00:04:01.647
If we want the browser
to render a line break,

00:04:01.647 --> 00:04:05.022
we have to tell it
explicitly using another tag,

00:04:05.022 --> 00:04:08.176
the BR tag, which stands for break.

00:04:08.398 --> 00:04:12.513
We'll go through and
add BRs after each line.

00:04:12.777 --> 00:04:14.885
Now it looks like lyrics.

00:04:15.440 --> 00:04:18.890
Do you notice something funny about BR?

00:04:19.221 --> 00:04:20.851
There's no end tag.

00:04:20.966 --> 00:04:21.938
If you think about it,

00:04:21.938 --> 00:04:23.492
a line break doesn't contain any content,

00:04:23.492 --> 00:04:25.861
so it has nothing to end after.

00:04:26.006 --> 00:04:28.496
Just the start tag is all we need.

00:04:29.062 --> 00:04:30.361
There we have it.

00:04:30.456 --> 00:04:32.704
The aliens will learn
the basics of rabbits

00:04:32.704 --> 00:04:35.883
and you've learned the basics of HTML.

00:04:36.044 --> 00:04:37.158
After I'm done talking,

00:04:37.158 --> 00:04:39.915
play around with this
and try changing things.

00:04:39.976 --> 00:04:43.658
When you're ready, go on to
your first HTML challenge.