How we navigate around on the Internet

Go back to HTML and CSS Index

Just to be clear, this page won't give you a deep understanding of how the Internet works, it will only focus on what goes on behind the scenes when browsing.

The URL

When you open up your browser to look for a specific resource online, you type in a URL.

Let's have a look at an example:

https://www.lailanadine.dk
Example 1.20 | A URL

The HTTP or Hypertext Transfer Protocol is a set of rules (a protocol) for transferring files on the World Wide Web. The HTTPS is a variant that adds a layer of security to the data in the transit.

You can leave the protocol out when typing in a URL as the browser is programmed to automatically add it if you haven't.

www.lailanadine.dk
Example 1.21 | A domaine

What you see above is the address of the website, also known as the domaine. The WWW is not required so you don't need to type it in - you could just type in:

lailanadine.dk
Example 1.22 | A domaine without the WWW prefix

What we don't see in the example is that the actual page that we land on when following the URL has a name of it's own - this usually being either index.html or index.php. The index file is the default file that is returned when you type in a URL.

To verify this, open up a new fan and type in the following URL:

lailanadine.dk/index.php
Example 1.23 | URL with specified file name

The Internet

Ok, so what happens when you type in a URL? A lot, actually!

  • You type in the URL (or maybe you just click on a link).
  • The browser sends an HTTP or HTTPS request to the server and requests the file.
  • If the file does not exist, it returns an error.
  • If the file does exist, the server returns it to the browser.
  • The browser then analyses the file.
  • If it finds any images or other external resources in the file, it contacts the server again (one call to the server for each file) and requests these files.
  • If the files exist, the server returns them to the browser. If not, it returns an error.
  • The browser then inserts the images and/or applys the style instructions.

As a user, you often don't even notice any of this happening unless your Internet connection is bad, the external files very large, or if any of the files are missing.

HTML

HTML or HyperText Markup Language was invented by Tim Berners-Lee around 1990.

It is, as the name indicates, a markup language that is used to markup elements to make them appear in the right way in the browser.

Let's look at an example:

This is an example of plain text

This is plain text
Example 1.24 | Plain text

When you write an essay or a paper in e.g. Word, this is probably how it looks before you edit the styling of it.

As a standard, all text you add to a Word document is a paragraph. When it comes to web development, that's not really the case. You need to tell the browser whether you are adding a heading or a paragraph, or whatever else it is that you have on your website. You do this by adding markup:

This text is marked up using HTML

<p>This is a paragraph</p>
Example 1.25 | Example of HTML

Using the p tag (we'll get back to that), we're telling the browser that this is a paragraph. Looks pretty simple right?

Now, just to be clear - HTML is not a programming language as such language contains elements of logic, eg. is the light on yes/no or as long as there are apples in the basket, pick them up. HTML tells the browser what type of content it is dealing with - that's it.

Learn more

  • Robbins, Jennifer Niederst (2018): Learning Web Design – A Beginner’s Guide to HTML, CSS, Javascript, and Web Graphics. 5th edition. Chapters 1-4

Next up

Well, this was just a little taste of what HTML is. Let's learn some more so that we can create our first webpage. Next up: Creating our first webpage in HTML5