What URLs are
Where are we?
Browsers ask servers for files. How do browsers know which files to ask for? They use URLs.
This lesson’s goals
This lesson is about URLs. You’ll learn:
- What a URL is.
- How browsers work out how to render data they get from a URL.
- That clickable links on Web pages have URLs embedded in them.
URLs are addresses
Every file on the Web has a URL (uniform resource locator). Whether it’s an HTML file, a photo file, whatever, it has a URL.
A file’s URL is its unique address on the Web. Just as a cell phone has a unique telephone number, a file has a unique URL.
It’s a little more complex in some cases, but let’s ignore those cases for now.
Here’s an example of a URL:
The URL has several parts. You’ll learn how the pieces work in the next lesson.
How URLs get into browsers
To get a URL into your browser, you usually either:
- Put the URL into a browser’s address field.
- Click on a link to the page.
Try both for the URL above. Copy the link and paste it into your browser’s address field:
Figure 1. Address bar
Now for the second method. You can click here to visit the URL.
That URL again is
http://www.blm.gov/wo/st/en/bpd.html. It’s a URL for a page, not a photo or some other thing.
How do I know it’s a URL for a page?
The part of the file name after the last period (.) is the file’s extension. It tells the browser what type of data is in the file. Then the browser can decide how to render the file.
Every browser has a table like this:
Figure 2. File extensions and types
- Every file on the Web has a unique URL.
- The file’s extension tells the browser what type of file it is.
The cow page
Here’s the cow page again.
Figure 3. Cow page
You can try the page.
The URL of the page is
There are three things on the page:
- Some text, like “I am a cow.”
- An image.
- A link to the pig page.
Here’s some code from
cow.html. The browser renders it to make the three things.
<p> <img src="bessie.jpg" alt="Bessie"> </p> <p> I am a cow. I know a <a href="pig.html">pig</a>. </p>
Figure 4. Code from
Don’t worry about the details. We’ll cover them later. Just a couple of things to note for now.
First, the text “I am a cow” is in the file. You can see it in line 5.
But the cow photo is not in
cow.html. So how did the photo get into the page? Look at line 2:
<img src="bessie.jpg" alt="Bessie">
The photo is in a separate file, called
The photo file has its own URL.
bessie.jpg is shorthand for the full URL,
Copy and paste the URL into a browser. You’ll see the photo by itself, without the rest of the page.
So when you tell your browser to go to
cow.html, your browser asks the server for two files:
cow.html has instructions on how to draw the text and the link to the pig page. The instructions follow the HTML standard.
bessie.jpg has data on how to make the photo. The data follow the JPEG standard.
OK, so there are three things that make the cow screen:
- Some text.
- An image.
- A link to a pig page.
Let’s talk about the link.
This code makes a link:
When the browser renders this, it does two things:
- It shows something on the display.
- It gets ready to execute a behavior.
The display is like this:
Figure 5. The pig link display
The browser draws the word “pig” in blue, and underlines it. That’s the display part.
The behavior? When the user clicks on the link, the browser asks the server for a new file. The link gives the URL of that file. The URL is usually for a Web page (ending in
.html), but it could be for any type of file.
The full URL of the file is
<a href="pig.html">pig</a> is shorthand for that full URL.
- Every file on the Web has a URL. A file’s URL is its address on the Web.
- The file’s extension tells the browser what type of data is in the file.
- Photos are stored in separate files from HTML pages.
- Links contain URLs.
You can see that URLs are important things. Let’s learn a little about what a Web server does when it gets a URL.