1
00:00:00,411 --> 00:00:01,835
Բարի գալուստ մեր կայքէջ

2
00:00:01,835 --> 00:00:04,059
Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ

3
00:00:04,059 --> 00:00:07,477
Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում



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


5
00:00:10,275 --> 00:00:11,681
Բայց առաջին հերթին եկեք

6
00:00:11,681 --> 00:00:14,860
ուսումնասիրենք դատարկ էջի կմախքը


7
00:00:15,389 --> 00:00:16,944
Ամեն կայքէջ սկսվում է

8
00:00:16,944 --> 00:00:20,384
այս, վերևում երևացող տողը, DOCTYPE-ը

9
00:00:20,562 --> 00:00:21,961
տեղեկացնում է զննիչին, որ

10
00:00:21,961 --> 00:00:24,603
այս կայքէջը գրված է ժամանակակից HTML-ով


11
00:00:24,603 --> 00:00:27,530
այլ ոչ hին ու տաօրինակ HTML-ով

12
00:00:27,931 --> 00:00:31,026
Հիմա նայենք էջի առաջին թեգին

13
00:00:31,026 --> 00:00:34,582
HTML is markup language,
so it's all about tags.

14
00:00:34,635 --> 00:00:36,399
A tag is one of these things

15
00:00:36,399 --> 00:00:38,314
that starts with an angle bracket

16
00:00:38,314 --> 00:00:40,684
and ends with another angle bracket.

17
00:00:40,745 --> 00:00:42,346
Or if you like math,
you might think of them

18
00:00:42,346 --> 00:00:45,383
as less than and greater than signs.

19
00:00:46,474 --> 00:00:48,356
The first tag of every page is always

20
00:00:48,356 --> 00:00:51,343
that HTML tag right under the DOCTYPE.

21
00:00:51,343 --> 00:00:53,871
This one is the start HTML tag,

22
00:00:53,871 --> 00:00:57,055
and then at the bottom,
there's this end HTML tag,

23
00:00:57,055 --> 00:00:59,729
which is the same except
for this backslash,

24
00:00:59,729 --> 00:01:01,747
which is really important.

25
00:01:01,889 --> 00:01:05,147
The HTML tag needs to
contain every other tag

26
00:01:05,147 --> 00:01:07,354
that makes up this webpage.

27
00:01:07,376 --> 00:01:11,051
That's why we don't have the
end HTML tag until the bottom.

28
00:01:11,119 --> 00:01:13,351
A lot of HTML tags come
in pairs like this,

29
00:01:13,351 --> 00:01:15,099
but not all of them.

30
00:01:15,571 --> 00:01:19,176
Underneath HTML, there's
always a head tag.

31
00:01:19,437 --> 00:01:22,146
That contains tags that helps
the browser render the page,

32
00:01:22,146 --> 00:01:25,162
but doesn't contain anything
the user actually sees.

33
00:01:25,435 --> 00:01:27,885
There's this meta tag
that gives the browser

34
00:01:27,885 --> 00:01:30,017
more details about how to render the page.

35
00:01:30,204 --> 00:01:31,885
For example, if you're
using common characters

36
00:01:31,885 --> 00:01:33,281
like from English language

37
00:01:33,281 --> 00:01:34,747
and not harder to render characters

38
00:01:34,747 --> 00:01:36,628
from the Arabic language,

39
00:01:36,628 --> 00:01:39,618
then you should have meta
charset equals utf-8.

40
00:01:40,100 --> 00:01:41,578
Then there's this title tag,

41
00:01:41,578 --> 00:01:45,009
which the browser uses to
decide the title of the page.

42
00:01:45,212 --> 00:01:47,623
This is what shows in the
tab on top of browsers

43
00:01:47,623 --> 00:01:50,039
and in bookmarks and in search results.

44
00:01:50,161 --> 00:01:53,430
Here on Khan Academy, the title
shows up above our webpage.

45
00:01:53,687 --> 00:01:55,544
Let me change the title.

46
00:01:55,695 --> 00:01:59,348
I'm going to make a
page all about rabbits.

47
00:01:59,348 --> 00:02:01,914
So I'll say "All About Rabbits"

48
00:02:01,914 --> 00:02:04,923
and maybe you can actually
see as it changes above.

49
00:02:05,539 --> 00:02:08,149
Nice, now we're done with these details

50
00:02:08,149 --> 00:02:11,946
so we end the head tag
and move on to the tag

51
00:02:11,946 --> 00:02:14,809
where it's all going to
happen, the body tag.

52
00:02:15,033 --> 00:02:17,805
It's pretty boring right now,
just the start and the end.

53
00:02:18,081 --> 00:02:19,521
What should I add?

54
00:02:19,521 --> 00:02:21,921
Well, I'm making a webpage about rabbits,

55
00:02:21,921 --> 00:02:23,155
so I should probably declare

56
00:02:23,155 --> 00:02:25,455
that in a big ole headline at the top.

57
00:02:25,559 --> 00:02:28,656
To add a headline, we use the H1 tag.

58
00:02:29,574 --> 00:02:33,154
All about rabbits, great.

59
00:02:33,154 --> 00:02:34,772
Actually we have six
tags that we could use

60
00:02:34,772 --> 00:02:38,441
for headlines: H1, H2, H3, H4, H5 and H6.

61
00:02:38,461 --> 00:02:41,153
The H1 is for the most
important headlines on the page

62
00:02:41,153 --> 00:02:43,358
and H6 is the least important.

63
00:02:43,491 --> 00:02:45,682
Let me add a few more
headlines for other sections.

64
00:02:45,696 --> 00:02:49,035
I'll use an H2 since these are slightly

65
00:02:49,035 --> 00:02:51,197
less important sections.

66
00:02:51,957 --> 00:02:55,469
And some songs, ok, great.

67
00:02:56,214 --> 00:02:58,240
Now let's add some information.

68
00:02:58,402 --> 00:03:00,435
Well, my target audience for this page

69
00:03:00,435 --> 00:03:03,934
is aliens that have never seen rabbits.

70
00:03:03,934 --> 00:03:06,943
So I better give them a
good description of rabbits.

71
00:03:07,100 --> 00:03:10,174
In fact, I think I need a
whole paragraph of information.

72
00:03:10,396 --> 00:03:12,856
How can I markup a paragraph in HTML?

73
00:03:13,391 --> 00:03:16,049
With the P tag of course.

74
00:03:16,470 --> 00:03:20,736
We put in that P tag, and then
I'm just going to go ahead

75
00:03:20,736 --> 00:03:22,633
and paste in the information

76
00:03:22,633 --> 00:03:25,568
so that you don't have to
watch me type the whole thing.

77
00:03:25,856 --> 00:03:27,116
Beautiful.

78
00:03:27,699 --> 00:03:30,901
Now the aliens will need a
song to greet the rabbits with,

79
00:03:30,912 --> 00:03:33,170
so I'll give them lyrics
to my personal favorite.

80
00:03:33,170 --> 00:03:38,170
Once again, use that P tag
for it and paste in the song

81
00:03:39,521 --> 00:03:43,419
"Little Bunny Foofoo", such a good song.

82
00:03:43,572 --> 00:03:47,672
But uh oh, it's showing
up all on the same line.

83
00:03:47,868 --> 00:03:50,315
How will the aliens know when to pause?

84
00:03:50,418 --> 00:03:51,660
Why didn't the browser render

85
00:03:51,660 --> 00:03:54,092
the line breaks that I put in here?

86
00:03:54,350 --> 00:03:57,052
Well actually, browsers
mostly ignore line breaks

87
00:03:57,052 --> 00:03:59,139
and white space in your HTML.

88
00:03:59,318 --> 00:04:01,647
If we want the browser
to render a line break,

89
00:04:01,647 --> 00:04:05,022
we have to tell it
explicitly using another tag,

90
00:04:05,022 --> 00:04:08,176
the BR tag, which stands for break.

91
00:04:08,398 --> 00:04:12,513
We'll go through and
add BRs after each line.

92
00:04:12,777 --> 00:04:14,885
Now it looks like lyrics.

93
00:04:15,440 --> 00:04:18,890
Do you notice something funny about BR?

94
00:04:19,221 --> 00:04:20,851
There's no end tag.

95
00:04:20,966 --> 00:04:21,938
If you think about it,

96
00:04:21,938 --> 00:04:23,492
a line break doesn't contain any content,

97
00:04:23,492 --> 00:04:25,861
so it has nothing to end after.

98
00:04:26,006 --> 00:04:28,496
Just the start tag is all we need.

99
00:04:29,062 --> 00:04:30,361
There we have it.

100
00:04:30,456 --> 00:04:32,704
The aliens will learn
the basics of rabbits

101
00:04:32,704 --> 00:04:35,883
and you've learned the basics of HTML.

102
00:04:36,044 --> 00:04:37,158
After I'm done talking,

103
00:04:37,158 --> 00:04:39,915
play around with this
and try changing things.

104
00:04:39,976 --> 00:04:43,658
When you're ready, go on to
your first HTML challenge.