URLs

Uniform Resource Locator

What they are

URLs, or Uniform Resource Locators, are the addresses of web pages.

The things you type in the the address bar of your browser are all URLs.

Structure of URLs

https://example.com/foo/bar/

https://example.com/foo/bar/baz.jpg

https://example.com/foo/bar/?q=xyz

https://example.com/foo/bar/#section

URL components

https - The scheme or protocol
example.com - the authority or server
/foo/bar/ - the path
?q=xyz - the query (optional)
#section - the fragment (optional)

Relation to files

Often there is a simple relationship between the path component of URLs that a web server can serve and filenames on the computer where the web server is running.

Your web server

In your Codespace the program that you start with ./run is a simple web server that serves the files out of the public/ directory in your project.

File extensions

The web server uses the file extensions—the part of the file name after the .—to know what kind of file it is.

You should use .html for HTML files, .css for CSS, and various extensions like .jpg, .png, and .webp for image files.

And later .js for Javascript files.

A special file: `index.html`

When the URL ends in / the web server serves a special file named index.html if it exists.

This is a common convention with web servers.

Implicit `index.html`

https://example.com/

Serves public/index.html

Explicit `index.html`

https://example.com/index.html

Also serves public/index.html

A different filename

https://example.com/second.html

Serves public/second.html

A different directory

https://example.com/second/

Serves public/second/index.html

Three kinds of URLs

Absolute	`<a href="https://google.com/">`	On a specific server
Document-relative	`<a href="second.html">`	Relative to path of current URL.
Root-relative	`<img src="/images/kitten.jpg">`	Relative to root of current server

URLs in HTML

We use URLs in our HTML in a few places:

Element	Attribute	Purpose
`a`	`href`	Where the link goes
`img`	`src`	Where to load the image from
`link`	`href`	Where to load the linked resource from.

Example

<!doctype html>
<html lang="en">
<head>
    <title>URL examples</title>
    <link href="style.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
  <p>Here's a link to <a href="https://google.com/">Google</a></p>
  <p>Here's <a href="another-page/">another page on my site</a></p>
  <img src="/images/kitten.jpg">
</body>
</html>

Translating URLs

Assuming the previous HTML was the page at https://example.com/ served from public/index.html.

In HTML	Browser requests	Web server serves
`https://google.com/`	`https://google.com/`	???
`style.css`	`https://example.com/style.css`	`public/style.css`
`another-page/`	`https://example.com/another-page/`	`public/another-page/index.html`
`/images/kitten.jpg`	`https://example.com/images/kitten.jpg`	`public/images/kitten.jpg`

A note on spaces

Spaces are not allowed in URLs. They need to be encoded with %20.

http://example.com/name%20with%20spaces.html

Browsers will usually encode spaces in links before requesting the URL.

But the URLs are ugly and that behavior is not guaranteed.

So don’t put spaces in your file names.

More generally

Your URLs are part of your website.

Overall they reflect the organization of things.

And they shouldn’t be ugly.

Most people use all lowercase URLs with hyphens separating words.