From Web 1.0 to Web 3.0 and Introduction to HTML

A bit of history

What became the web started out as an attempt to network and link up networks of computers at different universities around the world.

In 1989 Sir Tim Berners-Lee invented the World Wide Web as we know it. He conceived it as a way for Universities to easily share information and data.

By 1990 he had written three fundamental technologies that helped shape the evolution of the web as we know it:

• HTML: HyperText Markup Language. The markup (formatting) language for the web.
• URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each resource on the web. It is also commonly called a URL.
• HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the web.

With these three technologies people began making simple web pages.

Sir Tim-Berners Lee made sure that the code underlying all of the technology for the web was released on a royalty-free basis, to ensure that the web could grow and wouldn't be under anyone's control.

Find out more about the history of the Internet at History of the web.

Web 1.0

The beginnings of the web are often referred nowadays to as Web 1.0.

This refers to a period in the '90s when the web was simply static pages, with links between them. Interactivity was limited, the pages didn't 'do' anything, they simply displayed information to visitors, much the same way as print media does today.

During this period the main functionality of a website was provided with static pages, hyperlinks (links to other pages) and... that was about it.

Technologies

Web 1.0 relied heavily on simple HTML markup, with limited interactivity provided by server-side PHP scripting.

Web 2.0

What we now call 'Web 2.0' started to rear it's head in the early 2000s. Websites began putting an emphasis on user-generated content and ease-of-use. Examples of essentially Web 2.0 interactions and uses are blogging, leaving comments, tagging and liking pages.

The idea behind Web 2.0 was that existing content could be supplemented or improved by allowing user contributions, and users could even generate content that would interest other people. This was the advent of the 'Network as a platform' - websites were no long simply portals where a few select people published content for the world to read, they were platforms where people could share and exchange information and content.

The first blogging platforms such as livejournal and skyblog were archetypal Web 2.0 platforms, which relied on a large user base contributing content regularly to attract more users. Indeed one of the main characteristics of Web 2.0 is that it offers all users the possibility to contribute to the discussion.

Technologies

In terms of technologies, Web 2.0 relied much more on interactive technologies:

• PHP or Perl for managing User Generated Content on the server side
• Flash and later HTML5 for user interactivity
• Javascript and most recently Ajax for seamless no-reload-necessary real-time information and interactivity.

Web 3.0

So what is Web 3.0? Most experts would agree that we aren't yet really 'in' web 3.0. Rather we're currently seeing some websites transition towards more Web 3.0 models.

What exactly we mean by web 3.0 can be hard to define, as it defines the direction that the Internet is currently going in, without knowing what it will look like when we get there...!

What we can say is it will certainly feature some or all of the following trends :

Artificial Intelligence

It's clear that Artificial Intelligence will be one of the 'Next Big Things' in the web.

Google photos launched it's 'Intelligent Search' last year, demonstrating the simplicity possible by using Machine Learning AI. Try searching your Google Photos library for 'bridges', and you'll see pictures of bridges from your photos :

The growth of targeted advertising based upon your Social Media accounts and purchasing history, using Artificial intelligence is another possible trend that will grow in Web 3.0.

Virtual reality

Another possible direction the Web 3.0 could take is Virtual reality. More and more websites with 360˚ experiences are popping up and the W3C WebVR standard is gaining steam.

Pervasiveness

Others feel that the web will become even more 'ever-present' in Web 3.0. Currently the web is appearing on smart-phones, tablets, watches, in our cars, on our smart-fridges... and this is clearly an indicator of an upcoming revolution in the way we use the web. Some have dubbed this Web 3.0

Technologies

Web 3.0 technologies include usage of lots of HTML5 components such as:

• video and audio players
• in browser 3D with WebGL
• Virtual reality with WebVR
• Animations and interactions with canvas and SVG

On the Server-side the use of machine learning and AI often translates as usage of Big Data systems, with languages such as Java.

What is a website ?

Now we understand roughly what the 'World Wide Web' is, it's time to take a look at the parts that make it up, namely Websites.

A website is, to put it very simply, a collection of files and code, hosted on someone's server somewhere. Websites come in all shapes and sizes, and I'm sure that you all use tens or hundreds of websites every day.

In this class we'll use the terms server and client quite a bit. A server is just a computer (often a big powerful computer) which is going to let us have access to some files or information remotely over a connection. There are lots of types of server (email server, file server...). In this case we'll be talking mostly about web servers.

The biggest websites such as Amazon, Google or Facebook are massive structures of hundreds of servers which are interlinked, but the simplest websites are simply a single server, which has some files on it. These massive behemoths of the web are what we call 'Web Platforms'. You might also be familiar with some 'Web apps', applications like Google Docs which allow us to perform useful functions right in the browser.

For the purposes of our course, we'll focus on the smaller web sites, such as the website showcasing a small or medium-sized business or a blog.

When you type http://www.example.com into your browser, you see the following:

What's really happening behind the scenes here?

Well, a few things are happening pretty fast :

1. Your web browser tries to make sense of what you typed into your address bar.
2. The browser locates the server you want.
3. The browser connects to this server.
4. The browser asks for the content of the page.
5. The server responds by sending the content of the page (as computer code).
6. The browser looks at the code, and displays a graphical representation of the code - the 'page'.

Now let's break it down.

Step 1: The URL

What you typed into your address bar is called the URL or Universal resource locator. It's called universal because it can be used for pretty much any kind of resource, and in many different contexts (not just in your browser!).

All URLs are made up of several parts. Take the following URL as an example:

1. First we have https://. This part is called the protocol and is always followed by ://. In our case the protocol is https which stands for HyperText Transfer Protocol (Secure). We don't really need to enter into too much detail about the protocol, but you can think of the protocol as the format and order that the data will be exchanged in. It's like defining the order of exchanges in a conversation between two people. Most conversations start with a greeting like 'Hello', followed by a response of 'Hello' from the other party. Then one party will ask for some information, and the other party will provide it. A protocol simply defines the rules about what format and order these messages come in. Take a look at the image below for a visual explanation, or check out the link below for a more detailed explanation:
   What is a protocol
   Therefore, by saying "https" we tell the server that we're expecting the exchange with the server to follow the standard https conventions.

2. Next comes moodle3.unistra.fr. This is the domain and a good analogy to think of this is the name of a building or company when you're sending a letter. In this case the domain has three parts : moodle3, unistra and fr. From right to left:

   • the fr is what we call a Top Level Domain. In this case it's a geographic top level domain (.fr are only issued by the French government), but there are other domains such as .com and .net which are issued by private companies.
   • the unistra is the main domain. This indicates most often the company or organization that registered the domain. In this case it was University of Strasbourg. The main domain owner is usually wholly responsible for...
   • the sub-domain, which here is moodle3. Another very common sub-domain is www. In this case these three parts make up our domain. Further down in this lesson we'll talk about how this domain tells our computer how to contact the server in question. For this part, just think of this domain as the location of the server we need to talk to.

3. After the server name, we have /course/view.php This is often called the path and it tells us which file we want to access on the server. /course/ tells the server we want to look in the folder called course on the server, and view.php tells the server to show us the file with that name. You might have seen paths like this before on your own computer. On Windows folders are seperated with \ back-slash, but the convention on the web and in URLs is to always use a forward-slash or /, as is already the case on Mac and on Linux machines.

4. Finally, we have ?id=7507. This is called a parameter. In some URLs you can have lots of parameters, in which case they will be separated with a &. The parameter is some value or information that the browser wants to send to the server. In this case, the parameter is telling the script at /course/view.php to use the id 7507. In the case of Moodle, the simply means to show us the course with the ID 7507.

Step 2: Looking up the IP

So now the browser has a URL, it knows what protocol we want to use, what domain we are looking for, the location of the file we want, and the parameters we want to send along to the server.

However, the domain of a website doesn't actually tell us where the server is locate, or even how to reach it. Domains were actually invented as a way to have nice human-readable server names, but they don't really help us locate a server.

In order to find out where the server is and how to get there, the browser looks up the domain name in a directory - called a DNS or Domain Name Server - and the DNS returns the browser an IP address. This process is similar to how you might look up the phone number for a person in a phone book.

The IP address for a server is like a street address. It tells us where it is located and how to reach it. All devices connected to the Internet have an IP address, even your computer.

When when we look for a web page, our browser takes the domain - in this case moodle3.unistra.fr - and looks up the IP address that corresponds to this server.

You can try this out yourself!

Great! Our browser does this in the background so you don't see it, but it's the same process!

So now our browser knows the IP address of our website. Onto...

Step 3: Connect to the server

The browser connects to the server on the given IP address. You don't need to know much about this step, but it basically request a connection to the IP address that the server is located on.

Step 4: Ask for the page

Now the browser is connected, it will ask the server for the content of the page. To do this, it uses the format and order defined in the http protocol.

This means in practice that the browser sends the following command:

GET https://moodle3.unistra.fr/course/view.php?id=7507

GET in the HTTP protocol just means 'Send me the following page please'.

Step 5: The response by the server

According to the HTTP specifications, the server should respond with a status code to the browser. You probably already know one famous HTTP status code: 404. If you look in the HTTP specification, you'll see that 404 corresponds to File not found.

In our case, the page does in fact exist, and so the code returned will be 200 or 'OK'.

Along with this code, the server will send all the raw code of the web page. In 99% of cases, this code is HTML, CSS and Javascript.

On any web page, you can press Ctrl+Alt+U (or ⌘⌥U on mac) and you'll see the raw code sent by the server. This is the code that the server sent back to the browser. When you look at a web page, what you see in the main browser window is the browser's rendering or interpretation of this code.

Step 6: Rendering

Based upon all this code, the browser creates a graphical rendering of the page. The rendering is what we think of as the 'page' - it's the graphical representation of the raw HTML/CSS/JS code.

To do this, the browser reads the code from top to bottom, and displays the representation of the code, by following the standards for the languages used in the page source code.

The most common languages used for this are HTML, CSS, and Javascript. Each language has a specific role and they are almost always used in combination.

These languages tell the browser respectively what content to display, how it should look, and how it should interact with the user.

Introduction to HTML5

What is HTML5 ?

HTML or HyperText Markup Language is, as its name would suggest, a markup language. A markup language is not quite the same as a programming language: a markup language allows us to give structure to content, and gives it some basic styles, but doesn't allow us to use logic like a true programming language (there is no 'if this, then that' in markup, there is no interactivity). You can think of markup as a language that defines layout like the layout of a Word document. It gives the document structure and tells the browser what each element is and what it does.

The HTML standard is defined by the W3C or World Wide Web Consortium. HTML5 is simply the latest version of this standard. It was initially released in 2014.

Writing your first web page

Remember when we opened the web page 'source code' above? We saw a lot of code and text. This is the HTML (and CSS and Javascript) behind the web pages we see in our browsers. HTML, CSS and Javascript are not compiled languages. In simple terms this means that the browser simply reads the HTML/CSS/JS as standard text, and you can simply write HTML in a text file with a simple program called a Text Editor.

HTML Structure

Now let's take a look at the different parts we just wrote, and what they did:

Basic principles

The first thing you'll notice in HTML is that most of the markup takes the form of tags. A Tag in HTML is simply a keyword such as body or head which indicates to the HTML the element or type of element that you want to create on the page.

Almost all HTML tags take the following structure <tag_name>Some text here</tag_name>.

All tags start with a < then the name of the tag, then a >. This is called the opening tag as it opens the HTML element. Everything we write after this tag will be 'inside' the element we defined, until we write the closing tag. The closing tag is written in exactly the same way, except that we add a / or slash before the keyword.

Take a look at the line highlighted above in blue:

<title>My First Web Page</title>

This tells the HTML :

1. Start the 'Title' tag
2. The content of the title is "My First Web Page"
3. End the title tag.

In the case of the <title> tag, this tells the web page what to display in the top of the 'tab' of the browser (go and take a look at your webpage in a browser, at the top of the tab or the top of the page you'll see it says 'My First Web Page').

Now take a look at the line in the image highlighted in yellow:

<p>Hello World</p>

This tells the HTML

1. Start a 'p' tag
2. The content of the 'p' is Hello World
3. End the 'p' tag.

In HTML the <p> tag indicates a paragraph.

There are a lot of other tags in HTML, all of them are defined in the standard which you can take a look at on the W3C site. I encourage you to use this reference site when you're writing HTML.

Breaking down our web page

Now we can identify tags as pairs with an opening tag and a closing tag, can you identify the other pairs of tags in your web page?

Take a look at your document, count the pairs of HTML tags. Can you see the pairs of tags?

1. In green we have the <html> opening and closing tag. This tag is obligatory for all HTML documents, and all the other tags in the document should be contained within it (except the DOCTYPE and we'll come to that in a minute).
2. In orange we have the <head> tag, and then below it we have the <body> tag. These tags are also both obligatory in every HTML document.

The Doctype

The only part we haven't talked about now in this document is the red line at the top. This line is called the DOCTYPE and it is also obligatory for all HTML documents.

In our case, <!DOCTYPE html> simply tells the browser 'This document is written in HTML'. In previous versions of HTML (HTML1, 2, 3 and 4) we used to specify the HTML version in the DOCTYPE, so that the browser knows which version of HTML to use to read each page. However, with HTML5 we now leave off this version declaration. So by writing <!DOCTYPE html> we're in effect telling the browser that the document is written in the latest version of HTML, that is to say, HTML5.

NOTE: Be aware that the DOCTYPE tag isn't really an HTML tag like the others. Notice how it starts with <! and it doesn't have a closing tag. It's a special case.

An aside: Choosing a text editor

Let's take a short break from HTML for a second to talk about Text Editors. For our example above I asked you to use Notepad or TextEdit or another default text editor available on your system.

There are many different text editors available either to download, and you can write HTML with pretty much any of them. There's even one installed by default on most operating systems (Notepad on Windows, TextEdit on Mac, Gedit on Ubuntu...).

However, although you can write HTML with any of these, it's not necessarily the easiest way to write HTML.

Most modern Text Editors, especially those written for developers, include a lot of nice features like auto-completion of your code, syntax highlighting, find and replace, useful keyboard shortcuts...

I suggest that you take a few minutes to learn about and install a better text editor than the default one for your operating system. You can try any or all of the following:

• My Personal Recommendation: Sublime Text (Windows/MacOS/Linux)
• Notepad++ (Windows Only)
• Atom
• Brackets

All of these tools can be downloaded and used for free (although Sublime will nag you to purchase it from time to time).

For the purposes of this course, I will assume you're using Sublime Text, although it shouldn't matter which one you're using.

Building blocks

Let's recap what we just learned in the previous section from our first website :

1. HTML files are just text files with the '.html' extension. We can open and edit them with any Text Editor.
2. All HTML files must start with a <!DOCTYPE html> declaration
3. All HTML files must have a <html> element which contains all the other tags on the page.
4. All HTML files must have a <head> element, followed by a <body> element.
5. All our other tags in the page must come inside either the <head> or the <body>.

Now that you are a little familiar with basic HTML structure, let's introduce some tags that we haven't seen before.

Div

The <div> tag is a tag that you will see often if you work with HTML code.

It's what we call a non-semantic tag, that is to say that it doesn't have any 'meaning' with regards to the content. The tag <p> means paragraph, which tells us some information about the content. The tag <div> just stands for division, which doesn't tell us anything about what it contains.

Divs are often useful for structuring our content and dividing the page into blocks, which we will be useful later on when we see CSS.

Another useful thing to know about divs are they are the most basic block element that we will encounter. A block element means that they take up the whole width of the screen, and they will force a 'line return' - aka they will render as a giant block across the whole screen.

By default any block element will take the full width of the screen, and the height of the block will adjust to the height of it's contents.

Nesting HTML

So far we've only seen elements standing alone. But HTML is almost always nested, that is, one or more HTML elements are written inside other HTML elements, which are within other HTML elements...

Consider the following HTML code :

<div>
    <p>This paragraph is awesome</p>
    <p>This paragraph is even more awesome!</p>
    <p>
        <em>This paragraph is italic!</em>
    </p>
</div>

The first 2 paragraphs are children of the main 'div'.

The last paragraph is the child of the main div, and also the parent of the <em>. <em> tags add emphasis (usually through italics).

In this way, one HTML element can sit inside another, as its child, or it can enclose the whole element, and is then its parent.

How NOT to nest

When nesting HTML (that is, most of the time you'll be writing HTML), you must be careful to close your tags in the reverse of the order they were opened.

Consider the following two examples :

<div>
    <p>
        Here's my paragraph
    </div>
</p>

In this example, we close the <div> before we close its child, the paragraph. This will cause weird things to happen in our web page (as the browser will try and ignore or work around the error) and can give unpredictable results. This kind if mistake might work in your browser, but it isn't valid HTML and can cause problems.

Instead we should write :

<div>
    <p>
        Here's my paragraph
    </p>
</div>

If you make the decision to write all your HTMl without indenting and all on the same line, it can quickly become very difficult to understand what tags should come next, so that's another good reason to follow the best practice.

<p><em><strong>This is</strong> my very awesome paragraph</em> 

What's in the <head>

As we saw above, like humans, HTML documents are made of two main parts :

1. A <head>
2. A <body>

It might seem counter-intuitive, but everything we've talked about above (all the tags that display content in the browser) go in the body.

Basically, whatever you write in the body will be shown in the browser window. If you want to add any content to the page, you do so in the body.

So what exactly goes in the <head>?

The head basically contains meta information, that is information about your page.

This could include:

• The page title
• The styles (in CSS which we'll talk about later)
• The character encoding
• Information about the author
• A description of the page...

If you want to find out more about how to add information to the head, take a look at the following tutorial : The Head Metadata in HTML

Text essentials

As we have seen, we can use the tag <em> to add emphasis to HTML (usually by making it italic).

Do you remember we saw the 'Block' content-type above, and we said that <div> and <p> were both block elements?

<em> is an inline element. Whereas block elements create a 'block' of content on the page, an inline element sits in-line with other text in your page.

This is some random text and <div>here is a div</div>.

This is some random text and <em>here is some italics</em>.