Hypertext Markup Language (HTML)

What you will learn

In the previous chapter, you learned that a JavaScript program can live inside a web page. You saw that the file hello.html had a secret script inside it. In this chapter, we will find out more about the HTML standard that tells the browser program what a web page should look like. Then we’ll discover how to link JavaScript to elements on a web page to allow our programs to interact with the user.

• HTML and the World Wide Web

• What is HTML?

• Making active web pages

• Work with object properties

• Egg timer

• Investigate the egg timer

• An image display program

• Create your own pages

• What you have learned

HTML and the World Wide Web

The first version of a Hypertext Markup Language (HTML) was created in 1989 by Tim Berners-Lee. He wanted to make it easier for researchers to share information. At the time, research reports were written as individual documents. If a document you were reading contained a reference to another document, you would have to go and find the other one. Tim Berners-Lee designed a system of computer servers to share electronic copies of documents. A document could contain hyperlinks to other documents. Readers used a browser program to read the document from the servers and follow the links from one document to another. These documents are called hypertext documents, and the language that described their contents is called the Hypertext Markup Language, or HTML.

Tim Berners-Lee also designed a protocol to manage the transfer of HTML-formatted documents from the server into the browser. This standard is called the Hypertext Transfer Protocol, or HTTP. Also, now there is a secure version of this protocol called HTTPS, which adds security to the web. HTTPS allows a browser to confirm the identity of a server, and it also protects messages sent between the server and the browser to prevent eavesdropping. The HTTPS protocol is what makes it possible for us to use the World Wide Web for banking and e-commerce.

In 1990, the first system was released as the “World Wide Web.” The documents that you could download were called “web pages.” The server hosting the web pages was called a “website.” In 1993, Marc Andreessen added the ability to display images in web pages, and the web became extremely popular.

The World Wide Web was designed to be extensible, and for many years, different browser manufacturers added their own enhancements to the standards, leading to problems with compatibility where websites would only work with specific browser programs. Recently, the situation has stabilized. The World Wide Web Consortium (W3C) now sets out standards that are implemented by all browser manufacturers. The latest standard, HTML5, is now very stable and is the version used in this book.

Fetching web pages

The location of the page on a server is given using a uniform resource locator, or URL. This has three elements:

• The protocol The protocol is used to talk to the site. This sets out how a browser asks for a web page, and how the server replies. Web pages use HTTP and HTTPS. HTTP stands for “Hypertext Transport Protocol” and HTTPS is the secure version of this protocol.

• The host This gives the address of the server on the network. The World Wide Web sits on top of a networking protocol called TCP/IP (Transport Control Protocol/Internet Protocol), and this is the address on that network of the system that holds the website you want to connect to.

• The path This is the host’s path to the item that the browser wants to read.

You can see all these elements in the URL that we used to access the hello.html page in Chapter 1 (see Figure 2-1).

FIGURE 2-1 URL structure

This URL specifies that the site uses the secure version of the hypertext transfer protocol, that the address of the host server is begintocodewithjavascript.com, and that the path to the file containing the web page is hello.html. If you leave off the path, the server will deliver the contents of a default file which might be called index.html or Default.htm or some other name, depending on how the server has been set up.

When the user requests a website, the browser sends a message to the server to request the page. This message is formatted according to the Hypertext Transport Protocol (HTTP) and is often called a “get” request (because it starts with the word GET). The server then sends a response that includes a status code and then, if it is available, the text of the web page itself is sent. If the page cannot be found on the server (perhaps because the URL was not given correctly), the HTTP status code results in the familiar “404 page not found” message. We will learn more about this process later in the book when we write some JavaScript code that gets web pages.