1 00:00:00,630 --> 00:00:04,260 Before we get into the browser's abstraction of HTTP, let's 2 00:00:04,260 --> 00:00:08,590 first look at the language the browser uses to present information to users. 3 00:00:08,590 --> 00:00:13,230 That language, as you probably already know, is called HTML. 4 00:00:13,230 --> 00:00:17,480 HTML stands for Hypertext Markup Language, and is the language used to present 5 00:00:17,480 --> 00:00:21,330 information, graphics, and video to users in a browser. 6 00:00:21,330 --> 00:00:25,340 It is tag based, meaning that the nature of the content to be presented in 7 00:00:25,340 --> 00:00:30,800 a browser always includes tags, which have names, and are enclosed in angle brackets. 8 00:00:30,800 --> 00:00:34,940 For example, if you want to present text as a simple paragraph, you'd take that 9 00:00:34,940 --> 00:00:39,650 paragraph and put an opening p tag at the beginning and a closing p tag at the end. 10 00:00:39,650 --> 00:00:42,170 Notice that the closing tags start with a slash. 11 00:00:42,170 --> 00:00:46,610 We call the entire paragraph, that is the opening p tag, closing p tag, and 12 00:00:46,610 --> 00:00:48,930 the text between, we call that an element. 13 00:00:50,270 --> 00:00:53,690 If you want to present a big heading in the browser, you'd take the heading text, 14 00:00:53,690 --> 00:00:55,390 and wrap it in an h1 element. 15 00:00:56,550 --> 00:00:59,810 Some elements have only one tag, such as an image. 16 00:00:59,810 --> 00:01:03,175 Want to display that Dorito you found yesterday that was shaped like Africa? 17 00:01:03,175 --> 00:01:04,940 >> [APPLAUSE] >> Use an image tag and 18 00:01:04,940 --> 00:01:07,820 inside the tag, use what's called the src 19 00:01:07,820 --> 00:01:10,570 attribute to list the path where the image can be found. 20 00:01:11,820 --> 00:01:14,150 Attributes are used only in opening tags, and 21 00:01:14,150 --> 00:01:18,740 their purpose is to provide the browser additional information about the element. 22 00:01:18,740 --> 00:01:21,310 Maybe we're gonna find an image, or a class, or 23 00:01:21,310 --> 00:01:24,380 ID to be used with JavaScript or CSS. 24 00:01:24,380 --> 00:01:26,260 Or to indicate the destination of a link. 25 00:01:27,680 --> 00:01:29,590 Speaking of which, how about those links? 26 00:01:29,590 --> 00:01:32,695 Or anchors as we call them in HTML. 27 00:01:32,695 --> 00:01:34,665 If you want to make some text clickable, 28 00:01:34,665 --> 00:01:38,285 such that clicking that text will navigate the browser to another page, 29 00:01:38,285 --> 00:01:43,765 wrap it in an anchor element, and in the opening tag, include an href attribute, 30 00:01:43,765 --> 00:01:47,475 where the value listed in quotes is the URL of the destination page. 31 00:01:48,880 --> 00:01:54,580 That acronym I just mentioned, URL, stands for Uniform Resource Locator. 32 00:01:54,580 --> 00:01:58,760 Earlier in the course I said we'd be returning to this, so here we are. 33 00:01:58,760 --> 00:02:02,890 We've talked about Uniform Resource Identifiers, or URIs, and 34 00:02:02,890 --> 00:02:04,930 now we have URLs too. 35 00:02:04,930 --> 00:02:06,200 Are they the same? 36 00:02:06,200 --> 00:02:08,480 If not, what's the difference? 37 00:02:08,480 --> 00:02:10,400 It turns out that they are not the same, 38 00:02:10,400 --> 00:02:13,770 though many use the terms interchangeably without much consequence. 39 00:02:15,290 --> 00:02:20,160 Essentially a URL is a URI that also contains information about 40 00:02:20,160 --> 00:02:22,890 how to locate the resource. 41 00:02:22,890 --> 00:02:28,300 As it pertains here, URLs explicitly, or implicitly, list 42 00:02:28,300 --> 00:02:34,580 HTTP as the protocol for obtaining the resource, and also include the host name. 43 00:02:34,580 --> 00:02:35,650 Here's what I mean. 44 00:02:35,650 --> 00:02:39,860 In making an HTTP request, we list the URI in the request line, 45 00:02:39,860 --> 00:02:43,830 that is /xml, is the URI of our request. 46 00:02:43,830 --> 00:02:48,988 However, the URL that is used to locate that resource remotely, 47 00:02:48,988 --> 00:02:54,812 is http://httpbin.org/xml. 48 00:02:54,812 --> 00:03:02,228 Notice how the URL contains the protocol and hostname used to get the resource. 49 00:03:02,228 --> 00:03:05,488 We can relate this to taking a road trip to your friend's house across the country. 50 00:03:05,488 --> 00:03:07,109 >> [NOISE] >> Since you'll be driving, 51 00:03:07,109 --> 00:03:10,520 you'll be getting there via interstates, highways, and local streets. 52 00:03:10,520 --> 00:03:12,630 Driving is like your trip's protocol. 53 00:03:12,630 --> 00:03:16,100 And you need to know the city and state of your friend's house in order for 54 00:03:16,100 --> 00:03:20,320 your navigation system to understand where exactly the address is. 55 00:03:20,320 --> 00:03:25,400 The city and state are like the hostname and the address is the identifier. 56 00:03:25,400 --> 00:03:28,000 Like the URI in the http request. 57 00:03:29,270 --> 00:03:33,720 Put simply, the URL gives additional information about how and 58 00:03:33,720 --> 00:03:35,840 where the identified resource can be found. 59 00:03:37,150 --> 00:03:42,580 Okay, with URIs and URLs cleared up, and with a short review of HTML in the books, 60 00:03:42,580 --> 00:03:46,100 let's move on to how the browser abstracts the HTTP for you.