1 00:00:01,580 --> 00:00:03,500 When you hear the terms World Wide Web or 2 00:00:03,500 --> 00:00:06,370 Internet, you might think of something that's highly connected. 3 00:00:06,370 --> 00:00:11,020 As a spiderweb or fishing net needs to be in order to be effective. 4 00:00:11,020 --> 00:00:15,350 Online, the web of the Internet is spun by what are called hyperlinks. 5 00:00:15,350 --> 00:00:17,747 Today we've shortened that to simply links. 6 00:00:17,747 --> 00:00:20,180 And we have a technical term for that in the browser. 7 00:00:20,180 --> 00:00:22,440 They're called anchors. 8 00:00:22,440 --> 00:00:25,423 We reviewed how anchors are created in HTML, so 9 00:00:25,423 --> 00:00:29,086 let's now look at how they're related to HTTP requests. 10 00:00:30,406 --> 00:00:34,999 Okay, I'm back in Chrome and I'm gonna navigate to httpbin.org. 11 00:00:36,320 --> 00:00:38,610 On this page you see a long list of blue anchors and 12 00:00:38,610 --> 00:00:41,080 clicking on each will take you to the linked page. 13 00:00:41,080 --> 00:00:44,380 Remember, that destination is determined by the URL listed 14 00:00:44,380 --> 00:00:47,010 in the href attribute of the anchor. 15 00:00:47,010 --> 00:00:51,320 To show you more about Chrome Developer tools let's right click the html anchor 16 00:00:51,320 --> 00:00:52,780 and choose Inspect Element. 17 00:00:52,780 --> 00:00:58,340 So I'll scroll down to that /html resource and I'll right-click and choose Inspect. 18 00:01:00,400 --> 00:01:04,890 What we see here is the original html that the browser used to produce, or 19 00:01:04,890 --> 00:01:06,630 render, this anchor. 20 00:01:06,630 --> 00:01:11,540 Notice it has an href attribute with the value /html. 21 00:01:11,540 --> 00:01:14,350 This href value is the URL that the browser 22 00:01:14,350 --> 00:01:16,410 uses to make a request to the destination. 23 00:01:17,480 --> 00:01:21,290 Now you might think, this looks like a URI, Chris, not a URL. 24 00:01:21,290 --> 00:01:24,390 Well, I'd agree with you that it looks that way. 25 00:01:24,390 --> 00:01:27,582 But this is what's called a relative URL, 26 00:01:27,582 --> 00:01:31,937 which means the URL listed is relative to the current URL. 27 00:01:31,937 --> 00:01:36,206 If we look up top at our browser's address bar right here, 28 00:01:36,206 --> 00:01:39,180 we see httpbin.org as the current URL. 29 00:01:39,180 --> 00:01:47,290 So this /html down here is relative to that httpbin.org URL. 30 00:01:47,290 --> 00:01:51,978 And the full URL would translate to 31 00:01:51,978 --> 00:01:56,834 http://httpbin.org/html. 32 00:01:56,834 --> 00:02:01,538 It's worth noting that modern browsers will hide the protocol from the address 33 00:02:01,538 --> 00:02:03,530 bar if it's plain http. 34 00:02:03,530 --> 00:02:09,160 Notice in Chrome I do not see http:// here. 35 00:02:09,160 --> 00:02:11,040 So what happens when we click on the anchor? 36 00:02:11,040 --> 00:02:13,096 Well, only one way to find out. 37 00:02:14,476 --> 00:02:17,197 After clicking on it, the browser navigates to that page. 38 00:02:17,197 --> 00:02:22,224 And what you see if you click on the Network tab is that by 39 00:02:22,224 --> 00:02:27,926 clicking on the anchor your browser made an http GET request. 40 00:02:27,926 --> 00:02:33,130 If I expand this I see the request method was a GET request 41 00:02:33,130 --> 00:02:38,930 using the URL from the href attribute of the anchor, /html. 42 00:02:38,930 --> 00:02:40,860 Let's put this all together. 43 00:02:40,860 --> 00:02:45,250 When viewing the page http://httpbin.org 44 00:02:45,250 --> 00:02:48,670 you saw a link on the page that said /html. 45 00:02:48,670 --> 00:02:53,039 This link was created with an html anchor tag where the href 46 00:02:53,039 --> 00:02:55,480 attribute's value is /html. 47 00:02:55,480 --> 00:03:02,000 Remember that's a relative URL and the text displayed is also /html. 48 00:03:02,000 --> 00:03:04,650 Upon clicking on that link the browser used the relative 49 00:03:04,650 --> 00:03:08,170 URL from the href attribute and combined it with the URL 50 00:03:08,170 --> 00:03:12,040 of the current page to construct a full URL of the destination. 51 00:03:12,040 --> 00:03:15,840 This full URL is known as an absolute URL. 52 00:03:15,840 --> 00:03:17,430 With the absolute URLs, 53 00:03:17,430 --> 00:03:21,810 your browser has everything it needs to construct the http request. 54 00:03:21,810 --> 00:03:27,165 Your browser makes a network connection to httpbin.org using port 80, 55 00:03:27,165 --> 00:03:31,160 kinda like we did in Telnet, then sends a GET request for 56 00:03:31,160 --> 00:03:35,150 the /html resource using HTTP/1.1. 57 00:03:35,150 --> 00:03:39,340 It adds a bunch of headers according to the kind of content that are acceptable, 58 00:03:39,340 --> 00:03:42,570 the type of device making the request, Chrome in our case, 59 00:03:42,570 --> 00:03:47,030 the page that we're currently on, and among others, the language we prefer. 60 00:03:47,030 --> 00:03:50,179 English in this case, though this is determined by your browser settings. 61 00:03:51,860 --> 00:03:56,380 And that's what happens every time you click a standard HTML anchor in a browser. 62 00:03:56,380 --> 00:03:59,540 That was a fancy illustration of something that's quite simple. 63 00:03:59,540 --> 00:04:04,410 Clicking on an HTML anchor in a browser results in an http GET request 64 00:04:04,410 --> 00:04:08,780 to the resource located at the URL specified in the anchor's href attribute. 65 00:04:10,040 --> 00:04:13,050 I should tell you that only GET requests are made with these anchors, and 66 00:04:13,050 --> 00:04:14,430 not post requests. 67 00:04:14,430 --> 00:04:16,970 We'll see later how post requests can be made with a browser.