Return to Video

The Internet: HTTP and HTML

  • 0:03 - 0:07
    The Internet: HTTP and HTML
  • 0:07 - 0:12
    I'm Jasmine and I'm a program
    manager on the XBOX One engineering
  • 0:12 - 0:19
    team. One of our biggest features is called
    XBOX Live. It's an online service that connects
  • 0:19 - 0:24
    gamers from all around the world, and we rely
    on the internet to make that happen. This
  • 0:24 - 0:30
    is no easy task and there are a lot of things
    happening behind the scenes. The internet
  • 0:30 - 0:36
    is totally changing how people interact and
    connect. But how does it work? How do the
  • 0:36 - 0:43
    computers all across the world actually communicate
    with each other? Let's look at web browsing.
  • 0:43 - 0:50
    First, you open a web browser. It's the app
    you use to access the web pages. Next, you
  • 0:50 - 0:56
    type in the web address, or URL, which stands
    for Uniform Resource Locator of the website
  • 0:56 - 1:07
    you want to visit like tumblr.com. Hi, I'm
    David Karp, the founder of Tumblr and we're
  • 1:07 - 1:13
    here today to talk about how those web browsers
    we use everyday actually work. So you've probably
  • 1:13 - 1:16
    wondered what actually happens when you type
    an address into your web browser and then
  • 1:16 - 1:21
    hit enter. And it really is about as crazy
    as you can imagine. So in that moment your
  • 1:21 - 1:26
    computer starts talking to another computer,
    called a server, that's usually thousands
  • 1:26 - 1:32
    of miles away. And in milliseconds your computer
    asks that server for a website, and that server
  • 1:32 - 1:40
    starts to talk back to your computer in a
    language called HTTP. HTTP stands for HyperText
  • 1:40 - 1:44
    Transfer Protocol. You can kind of think of
    it as the language that one computer uses
  • 1:44 - 1:48
    to ask another computer for a document. And
    it's actually really pretty straightforward.
  • 1:48 - 1:53
    If you were to intercept the conversation
    between your computer and a web server on
  • 1:53 - 1:57
    the internet, it's mainly made up of something
    called "GET" requests. Those are really very
  • 1:57 - 2:02
    simply the word GET and the name of the document
    that you're requesting. So if you try to log
  • 2:02 - 2:06
    into Tumblr and load our login page, all you're
    doing is sending a GET request to Tumblr's
  • 2:06 - 2:14
    server that says GET /login. And that tells
    Tumblr's server that you want all of the HTML
  • 2:14 - 2:22
    code for the Tumblr login page. So HTML stands
    for Hyper Text Markup Language and you can
  • 2:22 - 2:26
    think of that as the language you use to tell
    a web browser how to make a page look. If
  • 2:26 - 2:31
    you think about something like Wikipedia,
    which is really just a big simple document
  • 2:31 - 2:36
    and HTML is the language that you use to make
    that title big and bold, to make the font
  • 2:36 - 2:43
    the right font, to link certain text to certain
    other pages, to make some text bold, to make some
  • 2:43 - 2:47
    text italic, to put an image in the middle
    of the page, to align the image to the right,
  • 2:47 - 2:53
    to align the image to the left. The text of
    a web page is included directly in the HTML,
  • 2:53 - 2:58
    but other parts like images or videos are
    separate files with their own URLs that need
  • 2:58 - 3:05
    to be requested. The browser sends separate
    HTTP requests for each of these and displays
  • 3:05 - 3:12
    them as they arrive. If a web page has a lot
    of different images, each of them causes a
  • 3:12 - 3:21
    separate HTTP request and the page loads slower.
    Now sometimes when you browse the web, you're
  • 3:21 - 3:26
    not just requesting pages with GET requests.
    Sometimes you send information like when you
  • 3:26 - 3:32
    fill out a form or type a search query. Your
    browser sends this information in plain text
  • 3:32 - 3:39
    to the web server using an HTTP POST request.
    Let's say you log in to Tumblr. Well the first
  • 3:39 - 3:45
    thing you do is you make a POST request, that
    is a POST to Tumblr's login page that has
  • 3:45 - 3:50
    some data attached to it. It has your email
    address, it has your password. That goes to
  • 3:50 - 3:55
    Tumblr's server. Tumblr's server figures out
    that okay, you're David. It sends a web page
  • 3:55 - 4:00
    back to your browser that says, Success! Logged
    in as David. But along with that web page,
  • 4:00 - 4:07
    it also attaches a little bit of invisible cookie
    data that your browser sees and knows to save.
  • 4:07 - 4:11
    And it's really important because it's really
    the only way that a website can remember who
  • 4:11 - 4:17
    you are. All that cookie data really is, is
    an ID card for Tumblr. It's a number that
  • 4:17 - 4:22
    identifies you as David. And your web browser
    holds on to that number and the next time
  • 4:22 - 4:27
    you refresh Tumblr, the next time you go to
    Tumblr.com, your web browser knows to automatically
  • 4:27 - 4:31
    attach that ID number with the request that
    it sends over to Tumblr's servers. So now
  • 4:31 - 4:36
    Tumblr's servers sees the request coming from
    your browser, sees the ID number, and knows
  • 4:36 - 4:44
    "Ok, this is a request from David."
    Now, the internet is completely open. All
  • 4:44 - 4:49
    of its connections are shared and information
    is sent in plain text. This makes it possible
  • 4:49 - 4:56
    for hackers to snoop on any personal information
    that you send over the internet. But safe
  • 4:56 - 5:01
    websites prevent this, by asking your web
    browser to communicate on a secure channel
  • 5:01 - 5:08
    using something called Secure Sockets Layer
    and its successor Transport Layer Security.
  • 5:08 - 5:14
    You can think of SSL and TLS as a layer of
    security wrapped around your communications
  • 5:14 - 5:21
    to protect them from snooping or tampering.
    SSL and TLS are active when you see the little
  • 5:21 - 5:27
    lock that appears in your browser address
    bar, next to the HTTPS. The HTTPS protocols
  • 5:27 - 5:34
    ensure that your HTTP requests are secure
    and protected. When a website asks your browser
  • 5:34 - 5:40
    to engage in a secure connection, it first
    provides a digital certificate. Which is like
  • 5:40 - 5:45
    an official ID card proving that it's the
    website it claims to be. Digital certificates
  • 5:45 - 5:50
    are published by certificate authorities,
    which are trusted entities that verify the
  • 5:50 - 5:55
    identities of websites and issue certificates
    for them. Just like a government can issue
  • 5:55 - 6:01
    IDs or passports. Now if a website tries to
    start a secure connection without a properly
  • 6:01 - 6:10
    issued digital certificate, your browser will
    warn you. That's the basics of web browsing!
  • 6:10 - 6:17
    The part of the internet we see day to day.
    To summarize, HTTP and DNS manage the sending
  • 6:17 - 6:23
    and receiving of HTML, media files, or anything
    on the web. What makes this possible under
  • 6:23 - 6:30
    the hood are TCP/IP and router networks that
    break down and transport information in small
  • 6:30 - 6:37
    packets. Those packets themselves are made
    up of binary, sequences of 1s and 0s that
  • 6:37 - 6:43
    are physically sent through electric wires,
    fiber optic cables, and wireless networks.
  • 6:43 - 6:47
    Fortunately, once you've learned how one layer
    of the internet works, you can rely on it
  • 6:47 - 6:52
    without remembering all the details. And we
    can trust that all those layers will work
  • 6:52 - 6:59
    together to successively deliver information
    at scale and with reliability.
Title:
The Internet: HTTP and HTML
Description:

Tumblr founder David Karp and Xbox program manager Jasmine Lawrence give a detailed description of how the Internet works using HTTP and HTML.

Start learning at http://code.org/

Stay in touch with us!
• on Twitter https://twitter.com/codeorg
• on Facebook https://www.facebook.com/Code.org
• on Instagram https://instagram.com/codeorg
• on Tumblr https://blog.code.org
• on LinkedIn https://www.linkedin.com/company/code-org
• on Google+ https://google.com/+codeorg

more » « less
Video Language:
English
Duration:
07:07

English subtitles

Revisions