Maybe you have noticed that in the previous sections, I used the not very intuitive terms of sender and receiver as they do not represent any specific scenario that you might know but rather all of them in a generic way. The main reason for this choice of terminology is to try to separate HTTP from web applications. You will see at the end of the book that HTTP is used for more than just websites.
If you are reading this book, you already know what a web application is. Alternatively, maybe you know it by other terms, such as website or web page. Let's try to give some definitions.
A web page is a single document with content. It contains links that open other web pages with different content.
A website is the set of web pages that usually live in the same server and are related to each other.
A web application is just a piece of software that runs on a client, which is usually a browser, and communicates with a server. A server is a remote machine that receives requests from a client, processes them, and generates a response. This response will go back to the client, generally rendered by the browser in order to display it to the user.
Even though this is out of the scope of this book, you may be interested to know that not only browsers can act as clients, generating requests and sending them to the servers; even servers can be the ones taking the initiative of sending messages to the browsers.
So, what is the difference between a website and a web application? Well, the web application can be a small part of a bigger website with a specific functionality. Also, not all websites are web applications as a web application always does something but a website can just display information.
Web applications are rendered by the browser so that the user can see its content. To do this, the server needs to send the content of the page or document. The document uses HTML to describe its elements and how they are organized. Elements can be links, buttons, input fields, and so on. A simple example of a web page looks like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Your first app</title> </head> <body> <a id="special" class="link" href="http://yourpage.com">Your page</a> <a class="link" href="http://theirpage.com">Their page</a> </body> </html>
Let's focus on the highlighted code. As you can see, we are describing two <a> links with some properties. Both links have a class, a destination, and a text. The first one also contains an ID. Save this code into a file named index.html and execute it. You will see how your default browser opens a very simple page with two links.
If we want to add some styles, or change the color, size, and position of the links, we need to add CSS. CSS describes how elements from the HTML are displayed. There are several ways to include CSS, but the best approach is to have it in a separated file and then reference it from the HTML. Let's update our <head> section as shown in the following code:
<head>
<meta charset="UTF-8">
<title>Your first app</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Now, let's create a new mystyle.css file in the same folder with the following content:
.link {
color: green;
font-weight: bold;
}
#special {
font-size: 30px;
}This CSS file contains two style definitions: one for the link class and one for the special ID. The class style will be applied to both the links as they both define this class, and it sets them as green and bold. The ID style that increases the font of the link is only applied to the first link.
Finally, in order to add behavior to our web page, we need to add JS or JavaScript. JS is a programming language that would need an entire book for itself, and in fact, there are quite a lot of them. If you want to give it a chance, we recommend the free online book Eloquent JavaScript, Marijn Haverbeke, which you can find at http://eloquentjavascript.net/. As with CSS, the best approach would be to add a separate file and then reference it from our HTML. Update the <body> section with the following highlighted code:
<body>
<a id="special" class="link" href="http://yourpage.com">Your page</a>
<a class="link" href="http://theirpage.com">Their page</a>
<script src="myactions.js"></script>
</body>Now, create a myactions.js file with the following content:
document.getElementById("special").onclick = function() {
alert("You clicked me?");
}The JS file adds a function that will be called when the special link is clicked on. This function just pops up an alert. You can save all your changes and refresh the browser to see how it looks now and how the links behave.
Note
Different ways of including JS
You might notice that we included the CSS file reference at the end of the <head> section and JS at the end of <body>. You can actually include JS in both the <head> and the <body>; just bear in mind that the script will be executed as soon as it is included. If your script references fields that are not yet defined or other JS files that will be included later, JS will fail.
Congratulations! You just wrote your very first web page. Not impressed? Well, then you are reading the correct book! You will have the chance to work with more HTML, CSS, and JS during the book, even though the book focuses especially on PHP.