YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← HTML Basics (Video Version)

{'type': u'plain'}

Get Embed Code
10 Languages

Showing Revision 1 created 11/13/2014 by Myusernamegoeshere2.

  1. - [Voiceover] Welcome to my webpage.

  2. I know, it's not a very exciting webpage.
  3. It's completely blank, but
    every webpage starts that way
  4. and I'll show you how to
    build up this page soon.
  5. First though, give me a minute
  6. to show you around the
    skeleton of a blank webpage.
  7. Every webpage starts with
  8. this fun looking thing
    called a DOCTYPE at the top.
  9. This is just a signal to the browser
  10. that this webpage is
    written in modern HTML
  11. and not a kludgy old weird HTML.
  12. Next, to the very first tag of the page.
  13. HTML is markup language,
    so it's all about tags.
  14. A tag is one of these things
  15. that starts with an angle bracket
  16. and ends with another angle bracket.
  17. Or if you like math,
    you might think of them
  18. as less than and greater than signs.
  19. The first tag of every page is always
  20. that HTML tag right under the DOCTYPE.
  21. This one is the start HTML tag,
  22. and then at the bottom,
    there's this end HTML tag,
  23. which is the same except
    for this backslash,
  24. which is really important.
  25. The HTML tag needs to
    contain every other tag
  26. that makes up this webpage.
  27. That's why we don't have the
    end HTML tag until the bottom.
  28. A lot of HTML tags come
    in pairs like this,
  29. but not all of them.
  30. Underneath HTML, there's
    always a head tag.
  31. That contains tags that helps
    the browser render the page,
  32. but doesn't contain anything
    the user actually sees.
  33. There's this meta tag
    that gives the browser
  34. more details about how to render the page.
  35. For example, if you're
    using common characters
  36. like from English language
  37. and not harder to render characters
  38. from the Arabic language,
  39. then you should have meta
    charset equals utf-8.
  40. Then there's this title tag,
  41. which the browser uses to
    decide the title of the page.
  42. This is what shows in the
    tab on top of browsers
  43. and in bookmarks and in search results.
  44. Here on Khan Academy, the title
    shows up above our webpage.
  45. Let me change the title.
  46. I'm going to make a
    page all about rabbits.
  47. So I'll say "All About Rabbits"
  48. and maybe you can actually
    see as it changes above.
  49. Nice, now we're done with these details
  50. so we end the head tag
    and move on to the tag
  51. where it's all going to
    happen, the body tag.
  52. It's pretty boring right now,
    just the start and the end.
  53. What should I add?
  54. Well, I'm making a webpage about rabbits,
  55. so I should probably declare
  56. that in a big ole headline at the top.
  57. To add a headline, we use the H1 tag.
  58. All about rabbits, great.
  59. Actually we have six
    tags that we could use
  60. for headlines: H1, H2, H3, H4, H5 and H6.
  61. The H1 is for the most
    important headlines on the page
  62. and H6 is the least important.
  63. Let me add a few more
    headlines for other sections.
  64. I'll use an H2 since these are slightly
  65. less important sections.
  66. And some songs, ok, great.
  67. Now let's add some information.
  68. Well, my target audience for this page
  69. is aliens that have never seen rabbits.
  70. So I better give them a
    good description of rabbits.
  71. In fact, I think I need a
    whole paragraph of information.
  72. How can I markup a paragraph in HTML?
  73. With the P tag of course.
  74. We put in that P tag, and then
    I'm just going to go ahead
  75. and paste in the information
  76. so that you don't have to
    watch me type the whole thing.
  77. Beautiful.
  78. Now the aliens will need a
    song to greet the rabbits with,
  79. so I'll give them lyrics
    to my personal favorite.
  80. Once again, use that P tag
    for it and paste in the song
  81. "Little Bunny Foofoo", such a good song.
  82. But uh oh, it's showing
    up all on the same line.
  83. How will the aliens know when to pause?
  84. Why didn't the browser render
  85. the line breaks that I put in here?
  86. Well actually, browsers
    mostly ignore line breaks
  87. and white space in your HTML.
  88. If we want the browser
    to render a line break,
  89. we have to tell it
    explicitly using another tag,
  90. the BR tag, which stands for break.
  91. We'll go through and
    add BRs after each line.
  92. Now it looks like lyrics.
  93. Do you notice something funny about BR?
  94. There's no end tag.
  95. If you think about it,
  96. a line break doesn't contain any content,
  97. so it has nothing to end after.
  98. Just the start tag is all we need.
  99. There we have it.
  100. The aliens will learn
    the basics of rabbits
  101. and you've learned the basics of HTML.
  102. After I'm done talking,
  103. play around with this
    and try changing things.
  104. When you're ready, go on to
    your first HTML challenge.