- The Browser as a GUI for HTTP 1:52
- Intro to Chrome Developer Tools 7:07
- HTML Review and URIs vs URLs 3:47
- URIs vs URLs 1 question
- Using Anchors for GET Requests 4:18
- Using Anchors for GET Requests 1 question
- Using Forms for GET Requests 8:44
- Data in POST Requests 1 question
- Using Forms for POST Requests 8:32
- Using Forms for HTTP Requests 2 questions
- Wrap-Up 0:53
Preview
Video Player
00:00
00:00
HTML Review and URIs vs URLs
3:47In case you haven't seen HTML in a while (or ever!), we spend some time in this video talking about the HyperText Markup Language. Specifically, we review the parts that are necessary for triggering both GET and POST requests on a website.
Before we get into the browser's
abstraction of HTTP, let's
0:00
first look at the language the browser
uses to present information to users.
0:04
That language, as you probably
already know, is called HTML.
0:08
HTML stands for Hypertext Markup Language,
and is the language used to present
0:13
information, graphics, and
video to users in a browser.
0:17
It is tag based, meaning that the nature
of the content to be presented in
0:21
a browser always includes tags, which have
names, and are enclosed in angle brackets.
0:25
For example, if you want to present text
as a simple paragraph, you'd take that
0:30
paragraph and put an opening p tag at the
beginning and a closing p tag at the end.
0:34
Notice that the closing
tags start with a slash.
0:39
We call the entire paragraph, that is
the opening p tag, closing p tag, and
0:42
the text between, we call that an element.
0:46
If you want to present a big heading in
the browser, you'd take the heading text,
0:50
and wrap it in an h1 element.
0:53
Some elements have only one tag,
such as an image.
0:56
Want to display that Dorito you found
yesterday that was shaped like Africa?
0:59
>> [APPLAUSE]
>> Use an image tag and
1:03
inside the tag, use what's called the src
1:04
attribute to list the path
where the image can be found.
1:07
Attributes are used only in opening tags,
and
1:11
their purpose is to provide the browser
additional information about the element.
1:14
Maybe we're gonna find an image,
or a class, or
1:18
ID to be used with JavaScript or CSS.
1:21
Or to indicate the destination of a link.
1:24
Speaking of which, how about those links?
1:27
Or anchors as we call them in HTML.
1:29
If you want to make some text clickable,
1:32
such that clicking that text will
navigate the browser to another page,
1:34
wrap it in an anchor element, and in the
opening tag, include an href attribute,
1:38
where the value listed in quotes is
the URL of the destination page.
1:43
That acronym I just mentioned, URL,
stands for Uniform Resource Locator.
1:48
Earlier in the course I said we'd be
returning to this, so here we are.
1:54
We've talked about
Uniform Resource Identifiers, or URIs, and
1:58
now we have URLs too.
2:02
Are they the same?
2:04
If not, what's the difference?
2:06
It turns out that they are not the same,
2:08
though many use the terms interchangeably
without much consequence.
2:10
Essentially a URL is a URI that
also contains information about
2:15
how to locate the resource.
2:20
As it pertains here,
URLs explicitly, or implicitly, list
2:22
HTTP as the protocol for obtaining the
resource, and also include the host name.
2:28
Here's what I mean.
2:34
In making an HTTP request,
we list the URI in the request line,
2:35
that is /xml, is the URI of our request.
2:39
However, the URL that is used to
locate that resource remotely,
2:43
is http://httpbin.org/xml.
2:48
Notice how the URL contains the protocol
and hostname used to get the resource.
2:54
We can relate this to taking a road trip
to your friend's house across the country.
3:02
>> [NOISE]
>> Since you'll be driving,
3:05
you'll be getting there via interstates,
highways, and local streets.
3:07
Driving is like your trip's protocol.
3:10
And you need to know the city and
state of your friend's house in order for
3:12
your navigation system to understand
where exactly the address is.
3:16
The city and state are like the hostname
and the address is the identifier.
3:20
Like the URI in the http request.
3:25
Put simply, the URL gives additional
information about how and
3:29
where the identified
resource can be found.
3:33
Okay, with URIs and URLs cleared up, and
with a short review of HTML in the books,
3:37
let's move on to how the browser
abstracts the HTTP for you.
3:42