Hypertext Markup Language (HTML)

What you have learned

This chapter has given you a good understanding of what the World Wide Web is and how it works. Here are the major points you’ve covered in this chapter:

• The HTTP (Hypertext Transport Protocol) is used by browsers to request pages of data from web servers.

• Data arriving at the browser is formatted using HTML (Hypertext Markup Language) and a web page contains commands to the browser (for example emphasize this word) using tags (for example, <em>) to mark out elements in the text. Elements can contain text, images, audio, and preformatted text. Elements can also contain links to other web pages, which can be local to a page or on distant servers.

• HTML text can contain symbol definitions. Symbols include characters such as < (less than) and > (greater than), which are used to mark tags and can also be used to incorporate emojis into web pages.

• An HMTL document comprises a line that identifies the document as HTML, followed by header and body elements enclosed in an HTML element. The body of the document can contain a <script> element that holds JavaScript code.

• A web page can contain a button element that runs a JavaScript function when the button is activated.

• JavaScript code interacts with the HTML document via a document object containing all the elements of the page. The document provides methods that a program can call to interact with it. The document method getElementById can be used to obtain a reference to the page element with a particular ID.

• A JavaScript program can contain variables. These are named storage locations. A variable can be assigned a value, which it will store for later use. The assignment operation is denoted by the equals (=) character.

• A JavaScript function can locate elements in a document by their id attribute and then use element behaviors to change the attributes on the elements. This is how a JavaScript program could update the text in a paragraph or change the source file for an image.

• The setTimeout method can be used to call a JavaScript function at a given time in the future.

To reinforce your understanding of this chapter, you might want to consider the following “profound questions” about JavaScript, computers, programs, and programming.

What is the difference between the Internet and the World Wide Web?

The Internet is a mechanism for connecting large numbers of computers together. The World Wide Web is just one thing that we can use the Internet for. If the Internet were a railway, the World Wide Web would be one type of passenger train providing a particular service to customers.

What is the difference between HTML and HTTP?

HTTP is the Hypertext Transport Protocol. This is used to structure the conversation between a web browser and a web server. The browser uses HTTP to ask, “Get me a page.” The server then gives a response, along with the page if it is found. The format of the question and the response is defined by HTTP. The design of the content of the page is expressed using Hypertext Markup Language. This tells the browser things like “put a picture here” or “make this part of the text a paragraph.”

What is a URL?

A URL is the address of a resource that a browser wants to read. It starts with something that identifies what kind of thing is being requested. If it starts with HTTP, it means that the browser would like a web page. The middle part of the URL is the network address of the server that holds the web page to be read. The final part of the URL is the address on the server of the web page. This is a path to a file. If the path is omitted, the server will return the contents of a default file, which is sometimes (but not always) the file index.html

Where do I put things like image and audio files when I build a website?

The simplest place to put images and audio files is in the same folder as the website. So, the folder that contains index.html can also contain these images and sounds. However, a path to a resource can include folders, so it is possible to organize a website so all the images and sound files are held separately from the web pages. We will do this in the next chapter.

Why should I not use preformatted text for all my web pages?

The <pre>..</pre> element allows page designers to tell the browser that a block of text has already been formatted and that the browser is not to perform any additional layout. This can be useful for displaying such things as program listings that have a fixed format, but it does not allow the browser to make any allowance for the target device. One of the fundamentals of web page design is that the browser should be responsible for laying out the page. The page itself should contain hints such as “take a new paragraph here” and allow the browser to sort out the final appearance.

Why should I use <em> rather than <i>?

The <i> (italic) tag means “use italic text.” The <em> tag means “make this text stand out.” If the browser is running on a device that does not support italic text, it is much more useful for it to be asked to emphasize text (which it could do by changing color or inverting black and white), rather than select a character type that it is not able to display.

How are HTML tags and elements related?

A tag is the <p> marker that denotes that this text is an instruction to the browser rather than something to be displayed on a page. A complete sequence of tags (perhaps with a start and end tag) marks a complete element in a web page.

Does every HTML tag have to have a start and an end element?

No. Lots of tags do. For example, <p> marks the start of a paragraph and </p> marks the end. But some, for example <br> (create a new line), do not.

Can you put one element inside another?

Yes. A paragraph element may contain elements of emphasized text. And an audio element contains an element that identifies the source of the audio to be played.

What is the difference between an attribute and a property?

The HTML source of a web page contains elements with attributes. For example, <img src="seaside1.JPG"> would create an image element with a src attribute set to the image in the seaside1.JPG file. Within JavaScript, the web page the program is part of is represented by a document object that contains a collection of objects. Each object represents one of the elements on the page. Each element object has a property that maps to a particular page attribute. A JavaScript program could change the src attribute of an image element to make it display a different picture. In short, attributes are the original values that are set in the HTML, and properties are the representations of these values that can be manipulated in a JavaScript program.

What is a reference?

In real life, a reference can be something that you follow to get somewhere. In a JavaScript program, a reference is used by a program to find a particular object. An object is a collection of data and behaviors that represent something our program is working with. JavaScript uses objects to represent elements on a web page. Each element is represented by an object. A reference is a lump of data that holds the location of a particular object.

What is the difference between a function and a method?

JavaScript contains functions, which are blocks of JavaScript code that have a name. We have written functions with names like doEndTimer. Methods are functions that are held inside objects. We have used the getElementById method, which is provided by the document object.