Chapter 1

Examining the Pieces of Web Programming

IN THIS CHAPTER

Understanding how simple web pages work

Incorporating programming into your web page

Storing content in a database

At first, diving into web programming can be somewhat overwhelming. You need to know all kinds of things in order to build a web application that not only looks enticing but also works correctly. The trick to learning web programming is to pull the individual pieces apart and tackle them one at a time.

This chapter gets you started on your web design journey by examining the different pieces involved in creating a simple web page. Then it kicks things up a notch and walks you through dynamic web pages. And finally, the chapter ends by explaining how to store your content for use on the web.

Creating a Simple Web Page

Before you can run a marathon, you need to learn how to walk. Likewise, before you can create a fancy website, you need to know the basics of how web pages work.

Nowadays, sharing documents on the Internet is easy, but it wasn't always that way. Back in the early days of the Internet, documents were often created using proprietary word-processing packages and had to be downloaded using the cumbersome File Transfer Protocol (FTP). To retrieve a document, you had to know exactly what server contained the document, you had to know where it was stored on the server, and you had to be able to log into the server. After all that, you still needed to have the correct word-processing software on your computer to view the document. As you can imagine, it wasn't long before a new way of sharing content was required.

To get to where we are today, several different technologies had to be developed:

• A method for linking related documents together
• A way for the document reader to display formatted text the same way in any type of device
• An Internet standard allowing clients to easily retrieve documents from any server
• A standard method of styling and positioning content in documents

This section describes the technology that made viewing documents on the Internet work the way it does today.

Kicking things off with the World Wide Web

In 1989, Tim Berners-Lee developed a method of interconnecting documents to make sharing research information on the Internet easier. His creation, the World Wide Web, defined a method for linking documents together in a web structure, so that a researcher could follow the path between related documents, no matter where they were located in the world. Clicking text in one document took you to another document automatically, without your having to manually find and download the related document.

The method Berners-Lee developed for linking documents is called hypertext. Hypertext embeds links that are hidden from view in the document, and directs the software being used to view the document (known as the web browser) to retrieve the referenced document. With hypertext, you just click the link, and the software (the web browser) does all the work of finding and retrieving the related document for you.

Because the document-viewing software does all the hard work, a new type of software had to be developed that was more than just a document viewer. That's where web browsers came into existence. Web browsers display a document on a computer screen and respond to the reader clicking hypertext links to retrieve other specified documents.

To implement hypertext in documents, Berners-Lee had to utilize a text-based document-formatting system. Fortunately for him, a lot of work had already been done on that.

Making sense of markup languages

Markup languages were developed to replace proprietary word-processing packages with a standard way of formatting documents so that they could be read by any type of document viewer on any type of device. This goal is accomplished by embedding tags in the text. Each tag indicates a formatting feature, such as headings, bold or italic text, or special margins. What made markup languages different from word-processing packages is that these tags were common text codes instead of proprietary codes, making it generic enough that any device could read and process them.

The first popular markup language was the Generalized Markup Language (GML), developed by IBM in the 1960s. The International Organization for Standardization (ISO) took up the challenge of creating markup languages and produced the Standard Generalized Markup Language (SGML), mainly based on GML, in the 1980s. However, because SGML was developed to cover all types of document formatting on all types of devices, it's extremely complex and it wasn't readily adapted.

Berners-Lee used the ideas developed in SGML to create a simplified markup language that could support his hypertext idea. He called it Hypertext Markup Language (HTML). HTML uses the same concept of tags that SGML uses, but it defines fewer of them, making it easier to implement in software.

An example of an HTML tag is <h1>. You use this tag to define text that's used as a page heading. Just surround the text with an opening <h1> tag, and a corresponding closing </h1> tag, like this:

<h1>This is my heading</h1>

When the browser gets to the <h1> tag, it knows to format the text embedded in the opening and closing tags using a different style of formatting, such as a larger font or a bold typeface.

To define a hypertext link to another document, you use the <a> tag:

<a href="anotherdoc.html">Click here for more info</a>

When the reader clicks the Click here for more info text, the browser automatically tries to retrieve the document specified in the <a> tag. That document can be on the same server or on another server anywhere on the Internet.

HTML development has seen quite a few changes since Berners-Lee created it and turned it over to the World Wide Web Consortium (W3C) to maintain. Table 1-1 shows the path the language has taken.

TABLE 1-1 HTML Versions

Version

Description

HTML 1.0

Formally released in 1989 as the first public version of HTML

HTML 2.0

Released in 1995 to add interactive elements

HTML 3.0

Released in 1996 but never widely adopted

HTML 3.2

Released in 1997, adding support for tables

HTML 4.01

Released in 1999, widely adopted, and remains an often-used standard

XHTML 1.0

Released in 2001, standardizing HTML around the XML document format

XHTML 1.1

Released in 2002, making updates and corrections to XHTML 1.1

HTML 5.0

Released in 2014, adding multimedia features

The HTML version 4.01 standard was the backbone of websites for many years, and it's still used by many websites today. However, HTML version 5.0 (called HTML5 for short) is the future of web development. It provides additional features for embedding multimedia content in web pages without the need for proprietary software plug-ins (such as Adobe Flash Player). Because multimedia is taking over the world (just ask YouTube), HTML5 has grown in popularity. This book focuses on HTML5; all the code included in this book use that standard.

Retrieving HTML documents

Besides a document-formatting standard, Berners-Lee also developed a method of easily retrieving the HTML documents in a client-server environment. A web server software package runs in the background on a server, listening for connection requests from web clients (the browser). The browser sends requests to retrieve HTML documents from the server. The request can be sent anonymously (without using a login username), or the browser can send a username and password or certificate to identify the requestor.

These requests and responses are defined in the Hypertext Transfer Protocol (HTTP) standard. HTTP defines a set of requests the client can send to the server and a set of responses the server uses to reply back to the client.

This section walks you through the basics of how web servers and web clients use HTTP to interact with each other to move web pages across the Internet.

Web clients

The web client sends requests to the web server on a standard network communication channel (known as TCP port 80), which is defined as the standard for HTTP communication. HTTP uses standard text requests sent to the server, either requesting information from the server or sending information to the server. Table 1-2 shows the basic HTTP client requests available.

TABLE 1-2 HTTP Client...