Http and Html, hypertext explained
In my pervious post i explained what is involved in learning web development on your own. Now i’ll go into the actual topic and provide an overview of the technologies involved. This is meant to provide you with a solid basic understanding for your own future studies. To go forth and do courses and understand where the pieces fit together before your start. To reduce confusion and speed you up, in short.
Client Server
Many beginners are not familiar with the basis of how the web works, so i’ll go into it from really no previous knowledge. A client-server architecture is one where there are a lot of clients (clients of the server) , but only one server, “serving” information in some sense.
This is a bit like a classroom, with one teacher and many students. In that analogy somebody on their own would be a desktop application where there is no server, and possibly no internet. Another scenario would be analogous to a party, where everybody talks to everybody, sometimes at the same time. This is called a peer to peer architecture in computer lingo, and file sharing and crypto currencies work like that.
For us future web developers, we are mainly concerned with the server. We want to build the software that runs on the server and is then accessed by the clients. The clients are pretty standardised pieces of software (called browsers :-) that enable our users to access our service in a standardised way.
The way the clients (browsers) talk to the server is called http. Browsers display documents that conform to the html standard, so that is what our server needs to return. The rest of this post will be about those two technologies, http and html, while future ones will then go on to styling (css) and how to generate the html.
Hypertext Transfer Protocol: HTTP
The name is actually quite descriptive if you read it. Firstly http is a protocol, and protocols govern how information is exchanged. Protocols have ways to establish and close connections, and to request and receive information, but we won’t go into much detail on that. The protocol transfers hypertext, and what that is will be covered in the next chapter. So are we done: not quite.
Two important facts about the http will govern our work, one is the addressing, the other is the fact that http is request based. To be more precise the current version of http, 1.1 , creates a connection for every request. Why do you have to know? Well, creating a connection (a tcp connection), takes time, often more time than the actual data transfer. Imagine making a new phone call for every sentence you want to say (brr). The short of that is that we want to reduce the number of requests a page makes and use caching if possible. Obviously more details will follow, but just to end this on some good news, the next version, 2.0, will let us keep our calls going.
The other part to know is about addressing: if you look up in the browser bar, you will see the http (possibly with s), the server name, and the “rest”. This “rest” is called a path, while the whole thing in the browser bar is called a url. As the server and protocol of a url for our app will be the same, the path is what addresses a specific page of our application. We will go into good practises how to design the name spaces for the addresses and how to map a path to the code that generates the response in a later post.
Hypertext Markup Language: HTML
A markup language is just about anything with a formatting that makes it machine readable. And hyper was supposed to mean that it can contain images and video, which at the end of the 80’s was far out.
HTML started life as a very simple way of formatting text documents that were shared, usually between scientists, via http. It was not meant to do what we use it for, but i has been adapted, and especially since HTML5 , works well, mainly due to it’s separation of concerns.
Separation of concerns means that people with different skills do different things, each what they are good at. Programmers are not good at design, and designers not good at coding. So programmers create html, and designers create css: no-one steps on other peoples toes or constantly has to ask someone else to make changes. Everyone is happy, and importantly, productive.
A html document has two parts, a header which is mostly meta information about the document, and the body is the content of the document. Below is a very simple document to demonstrate.
As you can see, elements are marked (up?) by brackets, like <body>, and an element is always closed by a similarly looking element tag, with a slash (/) included, like </body> . In the browser, each element will be displayed as a box, which is styled with backgrounds here to make the areas visible.
The important takeaway is: a html element is a box on the screen.
Elements are nested. In the above example header etc are inside body, and thus called descendants. But as demonstrated below, elements can be inside elements, inside elements. The html document forms a tree of elements, much like a folders in a file explorer.
Here we see this hierarchical way html works. We have included three more elements inside the main element. They take up the whole space of the main box, in the same way that our header, main and footer take up the whole space of the body, ie the whole document.
The main takeaway here: html is boxes inside boxes (inside boxes …)
A small aside is that we have used element names (eg body, header etc), up to now. There is a limited list of element names in html, that have meaning (semantics). But if none of the specific names fit, we can always use a general purpose element called div. All elements can have classes assigned (the class=”aside” bit), but generally speaking div ones need to have one, in order to be styled. More on that in the next post.
To continue to learn about html, you can go forth to the w3c schools and do the tutorial. That’s a bit dry though and you could just wait and pick it up as you learn css. Off course, an online course like codeschool’s is also good. If you prefer a book, the missing manual series is good for beginners, as it had tutorials in it that you can type out.
The next article in the series is about the basics of css.
