[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.41,0:00:01.84,Default,,0000,0000,0000,,Բարի գալուստ մեր կայքէջ
Dialogue: 0,0:00:01.84,0:00:04.06,Default,,0000,0000,0000,,Գիտեմ որ սա անյնքան էլ գրավիչ կայքէջ չէ
Dialogue: 0,0:00:04.06,0:00:07.48,Default,,0000,0000,0000,,Այն ամբողջովին դատարկա է, բայց ամեն կայքէջ այդպես է սկսվում\N\N
Dialogue: 0,0:00:07.48,0:00:10.17,Default,,0000,0000,0000,,և ես Ձեզ շուտով ցույց կտամ, թե ինչպես կարելի է կառուցել էջ\N
Dialogue: 0,0:00:10.28,0:00:11.68,Default,,0000,0000,0000,,Բայց առաջին հերթին եկեք
Dialogue: 0,0:00:11.68,0:00:14.86,Default,,0000,0000,0000,,ուսումնասիրենք դատարկ էջի կմախքը\N
Dialogue: 0,0:00:15.39,0:00:16.94,Default,,0000,0000,0000,,Ամեն կայքէջ սկսվում է
Dialogue: 0,0:00:16.94,0:00:20.38,Default,,0000,0000,0000,,այս, վերևում երևացող տողը, DOCTYPE-ը
Dialogue: 0,0:00:20.56,0:00:21.96,Default,,0000,0000,0000,,տեղեկացնում է զննիչին, որ
Dialogue: 0,0:00:21.96,0:00:24.60,Default,,0000,0000,0000,,այս կայքէջը գրված է ժամանակակից HTML-ով\N
Dialogue: 0,0:00:24.60,0:00:27.53,Default,,0000,0000,0000,,այլ ոչ hին ու տաօրինակ HTML-ով
Dialogue: 0,0:00:27.93,0:00:31.03,Default,,0000,0000,0000,,Հիմա նայենք էջի առաջին թեգին
Dialogue: 0,0:00:31.03,0:00:34.58,Default,,0000,0000,0000,,HTML is markup language,\Nso it's all about tags.
Dialogue: 0,0:00:34.64,0:00:36.40,Default,,0000,0000,0000,,A tag is one of these things
Dialogue: 0,0:00:36.40,0:00:38.31,Default,,0000,0000,0000,,that starts with an angle bracket
Dialogue: 0,0:00:38.31,0:00:40.68,Default,,0000,0000,0000,,and ends with another angle bracket.
Dialogue: 0,0:00:40.74,0:00:42.35,Default,,0000,0000,0000,,Or if you like math,\Nyou might think of them
Dialogue: 0,0:00:42.35,0:00:45.38,Default,,0000,0000,0000,,as less than and greater than signs.
Dialogue: 0,0:00:46.47,0:00:48.36,Default,,0000,0000,0000,,The first tag of every page is always
Dialogue: 0,0:00:48.36,0:00:51.34,Default,,0000,0000,0000,,that HTML tag right under the DOCTYPE.
Dialogue: 0,0:00:51.34,0:00:53.87,Default,,0000,0000,0000,,This one is the start HTML tag,
Dialogue: 0,0:00:53.87,0:00:57.06,Default,,0000,0000,0000,,and then at the bottom,\Nthere's this end HTML tag,
Dialogue: 0,0:00:57.06,0:00:59.73,Default,,0000,0000,0000,,which is the same except\Nfor this backslash,
Dialogue: 0,0:00:59.73,0:01:01.75,Default,,0000,0000,0000,,which is really important.
Dialogue: 0,0:01:01.89,0:01:05.15,Default,,0000,0000,0000,,The HTML tag needs to\Ncontain every other tag
Dialogue: 0,0:01:05.15,0:01:07.35,Default,,0000,0000,0000,,that makes up this webpage.
Dialogue: 0,0:01:07.38,0:01:11.05,Default,,0000,0000,0000,,That's why we don't have the\Nend HTML tag until the bottom.
Dialogue: 0,0:01:11.12,0:01:13.35,Default,,0000,0000,0000,,A lot of HTML tags come\Nin pairs like this,
Dialogue: 0,0:01:13.35,0:01:15.10,Default,,0000,0000,0000,,but not all of them.
Dialogue: 0,0:01:15.57,0:01:19.18,Default,,0000,0000,0000,,Underneath HTML, there's\Nalways a head tag.
Dialogue: 0,0:01:19.44,0:01:22.15,Default,,0000,0000,0000,,That contains tags that helps\Nthe browser render the page,
Dialogue: 0,0:01:22.15,0:01:25.16,Default,,0000,0000,0000,,but doesn't contain anything\Nthe user actually sees.
Dialogue: 0,0:01:25.44,0:01:27.88,Default,,0000,0000,0000,,There's this meta tag\Nthat gives the browser
Dialogue: 0,0:01:27.88,0:01:30.02,Default,,0000,0000,0000,,more details about how to render the page.
Dialogue: 0,0:01:30.20,0:01:31.88,Default,,0000,0000,0000,,For example, if you're\Nusing common characters
Dialogue: 0,0:01:31.88,0:01:33.28,Default,,0000,0000,0000,,like from English language
Dialogue: 0,0:01:33.28,0:01:34.75,Default,,0000,0000,0000,,and not harder to render characters
Dialogue: 0,0:01:34.75,0:01:36.63,Default,,0000,0000,0000,,from the Arabic language,
Dialogue: 0,0:01:36.63,0:01:39.62,Default,,0000,0000,0000,,then you should have meta\Ncharset equals utf-8.
Dialogue: 0,0:01:40.10,0:01:41.58,Default,,0000,0000,0000,,Then there's this title tag,
Dialogue: 0,0:01:41.58,0:01:45.01,Default,,0000,0000,0000,,which the browser uses to\Ndecide the title of the page.
Dialogue: 0,0:01:45.21,0:01:47.62,Default,,0000,0000,0000,,This is what shows in the\Ntab on top of browsers
Dialogue: 0,0:01:47.62,0:01:50.04,Default,,0000,0000,0000,,and in bookmarks and in search results.
Dialogue: 0,0:01:50.16,0:01:53.43,Default,,0000,0000,0000,,Here on Khan Academy, the title\Nshows up above our webpage.
Dialogue: 0,0:01:53.69,0:01:55.54,Default,,0000,0000,0000,,Let me change the title.
Dialogue: 0,0:01:55.70,0:01:59.35,Default,,0000,0000,0000,,I'm going to make a\Npage all about rabbits.
Dialogue: 0,0:01:59.35,0:02:01.91,Default,,0000,0000,0000,,So I'll say "All About Rabbits"
Dialogue: 0,0:02:01.91,0:02:04.92,Default,,0000,0000,0000,,and maybe you can actually\Nsee as it changes above.
Dialogue: 0,0:02:05.54,0:02:08.15,Default,,0000,0000,0000,,Nice, now we're done with these details
Dialogue: 0,0:02:08.15,0:02:11.95,Default,,0000,0000,0000,,so we end the head tag\Nand move on to the tag
Dialogue: 0,0:02:11.95,0:02:14.81,Default,,0000,0000,0000,,where it's all going to\Nhappen, the body tag.
Dialogue: 0,0:02:15.03,0:02:17.80,Default,,0000,0000,0000,,It's pretty boring right now,\Njust the start and the end.
Dialogue: 0,0:02:18.08,0:02:19.52,Default,,0000,0000,0000,,What should I add?
Dialogue: 0,0:02:19.52,0:02:21.92,Default,,0000,0000,0000,,Well, I'm making a webpage about rabbits,
Dialogue: 0,0:02:21.92,0:02:23.16,Default,,0000,0000,0000,,so I should probably declare
Dialogue: 0,0:02:23.16,0:02:25.46,Default,,0000,0000,0000,,that in a big ole headline at the top.
Dialogue: 0,0:02:25.56,0:02:28.66,Default,,0000,0000,0000,,To add a headline, we use the H1 tag.
Dialogue: 0,0:02:29.57,0:02:33.15,Default,,0000,0000,0000,,All about rabbits, great.
Dialogue: 0,0:02:33.15,0:02:34.77,Default,,0000,0000,0000,,Actually we have six\Ntags that we could use
Dialogue: 0,0:02:34.77,0:02:38.44,Default,,0000,0000,0000,,for headlines: H1, H2, H3, H4, H5 and H6.
Dialogue: 0,0:02:38.46,0:02:41.15,Default,,0000,0000,0000,,The H1 is for the most\Nimportant headlines on the page
Dialogue: 0,0:02:41.15,0:02:43.36,Default,,0000,0000,0000,,and H6 is the least important.
Dialogue: 0,0:02:43.49,0:02:45.68,Default,,0000,0000,0000,,Let me add a few more\Nheadlines for other sections.
Dialogue: 0,0:02:45.70,0:02:49.04,Default,,0000,0000,0000,,I'll use an H2 since these are slightly
Dialogue: 0,0:02:49.04,0:02:51.20,Default,,0000,0000,0000,,less important sections.
Dialogue: 0,0:02:51.96,0:02:55.47,Default,,0000,0000,0000,,And some songs, ok, great.
Dialogue: 0,0:02:56.21,0:02:58.24,Default,,0000,0000,0000,,Now let's add some information.
Dialogue: 0,0:02:58.40,0:03:00.44,Default,,0000,0000,0000,,Well, my target audience for this page
Dialogue: 0,0:03:00.44,0:03:03.93,Default,,0000,0000,0000,,is aliens that have never seen rabbits.
Dialogue: 0,0:03:03.93,0:03:06.94,Default,,0000,0000,0000,,So I better give them a\Ngood description of rabbits.
Dialogue: 0,0:03:07.10,0:03:10.17,Default,,0000,0000,0000,,In fact, I think I need a\Nwhole paragraph of information.
Dialogue: 0,0:03:10.40,0:03:12.86,Default,,0000,0000,0000,,How can I markup a paragraph in HTML?
Dialogue: 0,0:03:13.39,0:03:16.05,Default,,0000,0000,0000,,With the P tag of course.
Dialogue: 0,0:03:16.47,0:03:20.74,Default,,0000,0000,0000,,We put in that P tag, and then\NI'm just going to go ahead
Dialogue: 0,0:03:20.74,0:03:22.63,Default,,0000,0000,0000,,and paste in the information
Dialogue: 0,0:03:22.63,0:03:25.57,Default,,0000,0000,0000,,so that you don't have to\Nwatch me type the whole thing.
Dialogue: 0,0:03:25.86,0:03:27.12,Default,,0000,0000,0000,,Beautiful.
Dialogue: 0,0:03:27.70,0:03:30.90,Default,,0000,0000,0000,,Now the aliens will need a\Nsong to greet the rabbits with,
Dialogue: 0,0:03:30.91,0:03:33.17,Default,,0000,0000,0000,,so I'll give them lyrics\Nto my personal favorite.
Dialogue: 0,0:03:33.17,0:03:38.17,Default,,0000,0000,0000,,Once again, use that P tag\Nfor it and paste in the song
Dialogue: 0,0:03:39.52,0:03:43.42,Default,,0000,0000,0000,,"Little Bunny Foofoo", such a good song.
Dialogue: 0,0:03:43.57,0:03:47.67,Default,,0000,0000,0000,,But uh oh, it's showing\Nup all on the same line.
Dialogue: 0,0:03:47.87,0:03:50.32,Default,,0000,0000,0000,,How will the aliens know when to pause?
Dialogue: 0,0:03:50.42,0:03:51.66,Default,,0000,0000,0000,,Why didn't the browser render
Dialogue: 0,0:03:51.66,0:03:54.09,Default,,0000,0000,0000,,the line breaks that I put in here?
Dialogue: 0,0:03:54.35,0:03:57.05,Default,,0000,0000,0000,,Well actually, browsers\Nmostly ignore line breaks
Dialogue: 0,0:03:57.05,0:03:59.14,Default,,0000,0000,0000,,and white space in your HTML.
Dialogue: 0,0:03:59.32,0:04:01.65,Default,,0000,0000,0000,,If we want the browser\Nto render a line break,
Dialogue: 0,0:04:01.65,0:04:05.02,Default,,0000,0000,0000,,we have to tell it\Nexplicitly using another tag,
Dialogue: 0,0:04:05.02,0:04:08.18,Default,,0000,0000,0000,,the BR tag, which stands for break.
Dialogue: 0,0:04:08.40,0:04:12.51,Default,,0000,0000,0000,,We'll go through and\Nadd BRs after each line.
Dialogue: 0,0:04:12.78,0:04:14.88,Default,,0000,0000,0000,,Now it looks like lyrics.
Dialogue: 0,0:04:15.44,0:04:18.89,Default,,0000,0000,0000,,Do you notice something funny about BR?
Dialogue: 0,0:04:19.22,0:04:20.85,Default,,0000,0000,0000,,There's no end tag.
Dialogue: 0,0:04:20.97,0:04:21.94,Default,,0000,0000,0000,,If you think about it,
Dialogue: 0,0:04:21.94,0:04:23.49,Default,,0000,0000,0000,,a line break doesn't contain any content,
Dialogue: 0,0:04:23.49,0:04:25.86,Default,,0000,0000,0000,,so it has nothing to end after.
Dialogue: 0,0:04:26.01,0:04:28.50,Default,,0000,0000,0000,,Just the start tag is all we need.
Dialogue: 0,0:04:29.06,0:04:30.36,Default,,0000,0000,0000,,There we have it.
Dialogue: 0,0:04:30.46,0:04:32.70,Default,,0000,0000,0000,,The aliens will learn\Nthe basics of rabbits
Dialogue: 0,0:04:32.70,0:04:35.88,Default,,0000,0000,0000,,and you've learned the basics of HTML.
Dialogue: 0,0:04:36.04,0:04:37.16,Default,,0000,0000,0000,,After I'm done talking,
Dialogue: 0,0:04:37.16,0:04:39.92,Default,,0000,0000,0000,,play around with this\Nand try changing things.
Dialogue: 0,0:04:39.98,0:04:43.66,Default,,0000,0000,0000,,When you're ready, go on to\Nyour first HTML challenge.