Many years ago, I took a 6 month class on what, basically, is part one of this book. Months into it, it became apparent that the lack of an introductory part that explains how all the components of the course were related, was the course's biggest flaw.
After six months, there were still people who did not understand the difference between Java and JavaScript. So I promised myself two things: that one day I would write a book, and that such a chapter would be part of it. So let's go!
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.
One of the main reasons to use the remote server and the server-side language is going to be the storage and manipulation of data. This data can be in several formats, from a flat text file to a spreadsheet, XML, JSON, or a full-fledged database, which requires a Database Server. In the latter case, you may need to learn yet another language, Standard Query Language (SQL) and deal with another (software) server: a database server. We will address several options in this book.