What URLs are

See more about:

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:

http://www.blm.gov/wo/st/en/bpd.html

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:

Address bar

Figure 1. Address bar

Now for the second method. You can click here to visit the URL.

Extensions

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:

Extension Render as...
html Web page
jpg Image
png Image
... ...

Figure 2. File extensions and types

So:

  • 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.

Cow page

Figure 3. Cow page

You can try the page.

The URL of the page is http://coredogs.com/content_media/lessons/corecore/simple-web-pages/animals/cow.html.

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 cow.html

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 bessie.jpg.

The photo file has its own URL. bessie.jpg is shorthand for the full URL, http://coredogs.com/content_media/lessons/corecore/simple-web-pages/animals/bessie.jpg.

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
  • bessie.jpg

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:

<a href="pig.html">pig</a>

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:

The pig link display

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 http://coredogs.com/content_media/lessons/corecore/simple-web-pages/animals/pig.html. pig.html in <a href="pig.html">pig</a> is shorthand for that full URL.

Summary

  • 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.

What now?

You can see that URLs are important things. Let’s learn a little about what a Web server does when it gets a URL.


How to...

Lessons

User login

Log in problems? Try here


Dogs