Practical Web Development: Learn CSS, JavaScript, PHP, and more with this vital guide to modern web development

HTML, short for Hypertext Markup Language is the name of that language. Hypertext is text that contains hyperlinks, which in turn are those parts of a document which readers can click on to take them to a different document, using the link. You have all seen the blue underlined parts of a text, in not-so-good-looking web pages. These are hyperlinks.

A document in HTML consists of tags, with text in between them. There are opening and closing tags for example, as follows:

<h1>Hello, world</h1>

Here, <h1> is the opening tag and </h1> the closing one. We will learn about a similar markup language: XML. HTML and XML are not the same though. One important difference is that in XML you can define your own tags, as long as you close each one you've opened. XML is used to transfer the data and the tags are used to organize the data.

In HTML, tags do have a specific meaning. <h1> would be used in a document for the text of a level one header. A <a> tag—the anchor tag—is the one used to include the hyperlinks we just discussed. So the purpose of writing HTML is not to transfer data, but to present it to human users.

To do so, these tags are interpreted by the computer program we mentioned earlier. Such a program is called a browser. When the reader clicks on a hyperlink, the browser will detect that as well, and send a request to yet another program, the web server, to go fetch another document.

This is where HTTP, the Hypertext Transfer Protocol fits in. If a user clicks on a link, it is like saying: go fetch another HTML document. The name of that document would be part of a longer string that starts with http:// and also contains the domain name of the server. It is called a uniform resource locator, but we all refer to it as URL. Following is an example: http://www.paulpwellens.com/examples/secondpage.html.

What you can do with HTTP has evolved over time and we will learn about it later on in the book, but for now we need to move on with our history lesson. One more little tidbit of history for you: guess how our friend Tim called his browser, the first ever browser: WorldWideWeb. He later renamed it to avoid confusion.

After he left the CERN in 1994, Tim Berners Lee founded the World Wide Web Consortium (W3C). The consortium tries to enforce compatibility and agreement between vendors that deliver components for the web. Incompatible versions of HTML would cause browsers to render web pages differently; and incompatible features added to browsers have the same unexpected result.

If you visit www.w3.org, the consortiums website, you will notice that the W3C has evolved into a standards body for many technologies, but even in those days, having such an organization was sorely needed.

Mosaic was developed at the National Center for Supercomputer Applications (NCSA)at the University of Illinois in Champaign-Urbana (this is a long drive through cornfields from Chicago, which I took once) by a team led by Marc Andreesen. It was the first browser to support multiple protocols (hence the name) as well as display an image and text on the same page (surprisingly, this is not a trivial matter on a webpage!) It soon caught attention worldwide and the browser was ported to many platforms, so that more and more people could develop or have access to websites.

In November 1992, there were 26 websites. In the Mosaic browser, there was a What's new section that showed a new website everyday. Three years later, there were 10,000 and another three years later, millions. Today, I do not think it is possible to count them anymore. So how did we get from thousands to millions?

Marc Andreesen founded a company, named it after Mosaic, and then later renamed it Netscape Communications Corporation. They basically rewrote the Mosaic browser and optimized it for environments with lower network bandwidth, such as individuals who access the Internet from home through their ISP. The browser was called Netscape Navigator. This was clearly the first commercial browser, making it to the shelves of computer retail stores as part of a bundle, Netscape Communicator.

Netscape was also credited as the first browser to include support for JavaScript. With this scripting language, interactivity could be added to web pages. The World Wide Web could be at anybody's fingertips, as long as you had Netscape. From 1994 to about 1999, Netscape clearly had the biggest market share for browsers.

Over time, Netscape was moved over to Mozilla Corporation, an Open Source organization, and the development of Netscape ended. Today, users can download the Firefox browser from www.mozilla.org.

Another derivative of Mosaic, Spyglass Mosaic, made it into the Microsoft codebase and was eventually bundled with Microsoft Windows. We know it today as Internet Explorer. This is how we reach the topic of the so-called browser wars. As I mentioned, Netscape was trying to win over as many customers as possible by getting into the retail market and charge for its browser. Microsoft, on the other hand, decided to bundle Internet Explorer for free in its Windows Operating System (of course you had to pay for Windows).

This led to many lawsuit-like situations as Microsoft was accused of unfair competition by the other browser vendors. This situation has now changed as all browsers are free. Computer users can today choose which browser they want to use. On tablets, choices are limited, but on the other hand, browsers on tablets usually have all the latest features.

A different and potentially more bloody war was going on at the technical level. Despite having a standards body, the W3C, which controlled and introduced new features (both HTML and CSS), not all browsers were adapting those features equally as fast. So the same web pages continued to look different when they were rendered by different browsers. Sad but true to say, the browser that was the most incompatible and unpredictable, Internet Explorer, was, by the turn of the century, also the one used by the majority of the people who would surf the web.

Developers therefore had no choice but to delay the use of new cool features at the expense of spending a considerable amount of extra time making their web pages look the same on a PC used by most visitors as it did on the system where they were created.

Things got far worse before they began to get better, as more developers started using JavaScript to add interaction and animation to the pages, whereas many System Administrators recommended a configuration with JavaScript switched off. Sometimes this resulted in the visitor seeing nothing at all on the page.

But do not despair, we are in 2015 now! In this book, we will take a different approach and always let you use the new features when the browser supports it.

Some creative minds realized that the Web presented an opportunity to do more than just provide information. It is only a (relatively) small step from providing the information of the products you have on your site, to actually selling them. E-commerce was thus born. Amazon comes to mind as a good example of a site that everybody can relate to as being a Web shop. Developing a web shop of course involved a lot more than having someone in the company type in some content.

These products are real products; they sit in a warehouse, have a part number, a price, a name and description, different sizes and colors, and so on. That information, more than likely, is already present in some database that is updated each time a product is sold in a retail store. To sell something online, your webpage has to interact with the visitor, present him with some kind of an on-screen shopping cart, calculate subtotals, check warehouse inventory, and so on.

To do this, more and more programming was involved, and not just data entry into an HTML file anymore. So the job of Web Developer was born. Traditional programmers are skilled in a single programming language (Java or C++) and usually a single platform (Solaris or .NET). Web Developers have to be fluent in at least four different languages, as well as know a thing or two about databases. I would like to add one aspect which, to me, makes this job very exciting—one gets to be involved in design aspects. The gap between a Web Designer and a Web Developer is narrowing. So today, one talks about Front-End and Back-End developers.

So this is what we will teach you in this book; how to be a Web Developer, but not before wrapping up our history lesson. There are a few more things that made the web what it is today.

So you have a website with information, or a web shop because you are selling something on the web, like www.mycoolproduct.com. How do you expect to reach your potential customers, call every single one of them? This is where Google or Yahoo fit in. These popular companies developed the so-called search engines. You want to find out everything there is to know about a movie you just watched, a song you cannot remember the name of, or simply the phone number of your favorite restaurant? You visit google.com, yahoo.com, or equivalent sites and type in what you are looking for. Chances are you will find it.

We did a usability study at work where we gave one group a set of CDs, a stack of manuals, and a computer to install; the other group did not get the manuals but Internet access. The second group did way better because they felt they did not need the manuals, as they assumed them to probably be out of date, and immediately looked things up online. And this happened over 10 years ago.

Today, the use of search engines is so commonplace that terms like Yahoo! and Google are used as verbs. In some languages, they actually have become verbs and made it into the official dictionary.

I know people who do not use Facebook today, but I do not know anybody who does not know of Facebook. For years I walked by the building where Facebook had its office. I was not really interested. Then, when I moved back to Belgium, I decided to join them so I could stay in touch with my friends in California, who live in a different time zone and several thousands of miles away. From one of them I found out that the Facebook folks have since moved into the building where I used to have my office. Funny how that goes sometimes!

Facebook, Twitter, YouTube, and LinkedIn are examples of popular social networking sites. Nothing is sold here, but shared. People share pictures, stories, events, thoughts, ideas, opinions, and so on.

Files written in HTML form the basis of every website. We briefly touched on its history in the previous section; here we will dig a little deeper in its structure. Look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World example<\title>
<\head>
<body>
  <h1>Hello, world<\h1>
<\body>
<\html>

The first line specifies DOCTYPE, referring to the HTML version used, so the browser knows how to interpret the file. The one in the example is indicative of HTML5. DOCTYPE statements used to be a lot longer.

This is followed by the main tag, the <html> tag. In-between, we will find all our HTML in two sections, <head> and <body>. The body tag is what contains your content, and the head tag contains other information. In our example, there is one metatag that specifies what encoding is used. The <title> tag contains text that will be displayed by the browser at the very top of the window. It is very important to not forget the <title> tag, as this is one of the things search engines will examine.

In this simple example, the body contains a single <h1> tag. This represents a level one header in the document, similar to headers you find in word processors. The browser will decide how to display that content or, as they say, render it. So how do we get the HTML into a file and how do we get it to a browser?

As an HTML file is just a text file, your favorite text editor will do just fine. Just make sure it has the .html extension in the name, for example hello.html.

However, at some point, you are probably going to include some CSS, JavaScript, and surely PHP in the same file, in which case specialized tools will make you far more productive.

So now you have a file called hello.html and you want to look at it in a browser. In real life, this file will be part of your website and you will have to put it there. This is where the company that is hosting your website told you to put your files. They will give you all the information to correctly transfer your file(s) to their server.

They will end up in a folder that is called the document root, the root of all the files that make up your site. If you were to follow the instructions with the hello.html file and transfer it there, you will see the result when you type the following address in the URL bar of your browser:

http://www.mycoolsite.com/hello

You can also look at your file locally, and we will teach you more about that in the next chapter.

It is very important to realize that to the people who visit your site, your web page may not look the same as what you created. One factor—but not the only factor—is the browser that is being used. We therefor recommend that, from the early development stage on, you look at your work using different browsers and increase the number of browsers, for/and different devices.

Always install Mozilla Firefox and Google Chrome on your Mac or PC. Pick one to do your development (I like Firefox because of Firebug), but always do a little bit of testing with other browsers before you deliver.

So, start with our little example, and you will see that even Hello World will look different in different browsers. Fortunately, we can control almost all of this by using CSS.

Cascading Style Sheets (CSS) is a technology that works nicely in accordance with HTML and allows you, not the browser, to determine what your page will look like.

Look at this slightly modified example of our Hello, World webpage, hello.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World example</title>
  <link href="hello.css"   rel="stylesheet" ></link>
</head>
<body>
  <h1 class="green header" id="hello">Hello, World </h1>
</body>
</html>

In the line containing the <h1> tag, we added two HTML attributes, class and id, to the <h1> element. Attributes are strings inside an HTML opening tag of the format name="value" and the two most important attributes you can use are class and id. Many elements can be part of several classes, but ids are unique to a single element.

Now create a file called hello.css with the following content:

h1 {
  font-family:Baskerville, cambria, serif;
  font-size:24px;
}
.green {
  color:green;
}
#hello {
  font-weight:bold;
  font-style: italic;
)

This is our first CSS stylesheet. The first rule in the file means that any <h1> element in our document will be in the Baskerville font (or cambria, if Baskerville is not present on the user's computer), at 24 pixels, and in the color the browser has chosen (usually black).

However, when it, or any other element, not just h1, has a class="green" (in CSS, the . in name means class name), it will be displayed in the color green.

Finally, our specific Hello World header will be displayed in bold and italics because of the last few lines in the CSS file. The # character is used in CSS to indicate an identifier, so the #hello rule means a rule for the element that is set to the id= "hello".

As a result of all of this, any browser should render our HTML file as a line containing the text Hello, world, displayed in letter type Baskerville (a serif font often used for eBooks, no relation to Sherlock Holmes that I know of), in green, of size 24 pixels, and in bold and italic. Just try it, it works!

Note that we did not repeat the Baskerville line in the #hello rule, the rule is simply inherited. The <h1> rules cascade into #hello, as this happens to be an <h1>, hence the name Cascading Style Sheets. As we just demonstrated, we can clearly separate the content and the presentation of our page by using CSS. That is why it is important to learn how to use CSS as early as possible.

So, as a Web Developer, you already know that you need to master at least HTML and CSS. We will now move on to the next piece of the language puzzle—JavaScript.

When we talk about JavaScript in this book, unless noted otherwise, we mean client-side JavaScript. All the code is interpreted, just like the HTML and CSS, by the browser.

By using JavaScript, we can add action to our pages and interaction with the visitors of our website, as well as change the contents and look of our page through programming. Let us take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World example</title>
  <link href="hello.css"   rel="stylesheet" ></link>
</head>
<body>
  <h1 class="green header" id="hello"></h1>
  <script type="text/javascript">

  var answer = confirm("Do you want to say hello?");
  if (answer == true)
  {

  document.getElementById("hello").innerHTML="Hello, world";
  }
  </script>
</body>
</html>

If you look at this page in a browser, there will be no Hello, World displayed on your screen, but a pop-up box will appear with a question. If you answer the question Yes, our familiar green Hello World text will be back. The pop-up box itself will look completely different when you use a different browser.

If you look at the code, you will recognize programming-like stuff. There is an if clause and there is a variable (answer). Note that the name of the variable is a normal character string but in its declaration it is preceded by var. All of the JavaScript code is in-between an HTML <script> tag with a type attribute of text/javascript.

There is one line that is very typical to JavaScript and does all the work for us:

document.getElementById("hello").innerHTML="Hello, world";

Chapter 4, JavaScript is where we will really teach you what this means. For now, we will give you the English interpretation of this line of code: In our document, replace the inner content of the HTML tag with id hello by the string Hello, world.

In subsequent chapters, we will introduce JavaScript libraries, which will allow you to write more compact JavaScript code, with a lot of work already done for you. jQuery is one of these libraries and will be discussed in Chapter 7, jQuery.

JavaScript is a complete language and allows you to do a lot more things than those we showed you in the previous little example. However, as I mentioned, this is client-side JavaScript, interpreted by the browser. So once you switch off your computer or tablet, it is all gone. Well, some of it may be saved on your machine.

Imagine trying to create an online store using only the languages we have mentioned so far. That would not work. The information of what is available in the store, as well as the data of your specific order has to live somewhere else. That would be the computer of the company that runs the store, not the device that runs the browser used to visit the site.

So, dear Web Developer, you have guessed it, you will have to learn at least one more programming language to deal with all of this, before you can create an online store. The language itself could be any of several (it can even be JavaScript), but where the code is stored and interpreted is the key difference here: a remote Application Server. One of the most popular of these languages is PHP, which is covered in detail in Chapter 5, PHP. Let us look at the following example:

 <?php
  $hello = "Hello World Example";
  $helloheader = '<h1 class="green" id="hello">Hello, World</ 
h1>';
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><?php echo $hello; ?></title>
  <link href="hello.css"  type="text/css" rel="stylesheet" ></link>
</head>
<body>
<?php
  echo $helloheader;
?>
</body>
</html>

So far we have been able to test our little examples in a browser, but this is different. To try out this example, you will need to have an Application Server, local or not, installed. For now, just read on.

Notice the <?php and ?> strings in the example. This is the beginning and end of where the PHP code resides and will have to be interpreted by that Application Server. The first portion of the code defines two variables. Note that in PHP, names of variables start with a $ sign, whereas in JavaScript they don't. echo, familiar to UNIX folks, simply echoes the value of these variables.

So once the AppServer is done interpreting the PHP code, all you are left with is our HTML example from the CSS section. This is exactly how it works: the AppServer interprets the PHP code, and then the WebServer passes the resulting HTML code to the browser.

Apache is the name of a very popular AppServer that happens to be a WebServer at the same time. This is software that runs on a computer we also call a server and this is where your program file resides: hello.php.

So http://www.mycoolsite.com/hello will be, once again, the way this webpage can be accessed. This may look like a little bit of using an overkill tour an additional language to display Hello, World. But there are some situations where you'd want to do so, for example if the data you need in your HTML is stored somewhere else.