CHAPTER 1
HTML
HTML is not, strictly, a programming language. HTML stands for hypertext markup language. It is a way of marking text, so that a web browser knows how to display it. It can be considered the most basic “building block” of a web page, and as such, it is where we begin.
It is customary when teaching a new language to begin with a simple program that simply outputs Hello, world! With HTML, it couldn’t be simpler. Open a new document in your editor and type in “Hello, world!”, as seen below (Figure 1.1).
Figure 1.1. Desc: “Hello, world!” in a text editor window
Save the file to your web root with the name hi.html (Figure 1.2).
Figure 1.2. Desc: file “hi.html” visible in a folder
View the results in your web browser of choice. Enter in the URL for your web root, and add hi.html to the end (Figure 1.3).
Figure 1.3. Desc: “Hello, world!” displayed in a web browser
You’re done!
FUNDAMENTALS
So what’s really going on here? The short answer is it is the browser’s job to make as much sense of an HTML file as it can. We can see what it has done by inspecting the web page. In Chrome: View -> Developer -> Developer Tools. In the window or pane that opens, select the Elements tab. We see that the browser has taken our file, which the web server has told it is an HTML file (thanks to the.html extension) and added to it. We should see something like the following (Figure 1.4):
Figure 1.4. Developer Tools window in Chrome
The document is located on the left. We see our Hello, world! text on the left. What’s the rest of that?
An HTML file is rendered by the browser into a document with elements. Note the three elements in document: the <html> element, which encompasses the entire document; the <head> element, which is currently empty and provides information about the document; and the <body> element, which contains the part of the document that the web browser is intended to render. Because our file contained only plain text, the browser created enough elements for our document to make sense. It put the contents of our file into the <body> element.
Revisit the document in the text editor and add in some of the elements the browser filled in on its own. Change the document to be as such:
Save the file and refresh the browser window. It should look pretty much the same! Only this time, the browser is reading our file and parsing (making sense of) it.
TAGS AND ELEMENTS
An html file is made up of markup contained in tags. An HTML tag consists of an open angle bracket (less than sign), certain characters to denote the type of tag, and a closing angle bracket (greater than sign). Tags may not have a space between the opening angle bracket and the letters. In the file above, note that we have three tags: <html>, <head>, and <body>. These correspond to the html, head, and body elements that the browser renders in its document.
HTML tags usually come in sets. There is an opening tag, as described above, and there is a closing tag, telling the browser when the element in question should end. A closing tag is an angle bracket, followed by a slash, followed by the same characters used in the opening tag. In the file above, every opening tag has a corresponding closing tag. A more correct description of our file would be that there are three opening tags: <html>, <head>, and <body>; and three closing tags: </head>, </body>, and </html>.
Also note that HTML is hierarchical: Elements can contain other elements when tags of another element are found in between the opening and closing tags. The head and body elements are contained within the html element because the <head> and <body> tags appear between the opening <html> and closing </html> tags.
While it’s possible to not close tags—if our file above was missing the closing tags, the browser would still render it correctly—some tags must be closed, and the browser will always try to render a document as if it were well-formed. It’s also possible to close tags not in reverse order: For example, the following would most likely render correctly:
but it is not well-formed. The following is well-formed:
Note the differences. The </u> closing tag closes the <u> element, which was the last one opened, followed by </b> to end the <b> opening tag. We also properly closed the <p> tag with the closing </p> tag. Don’t worry if you aren’t familiar with what these tags do! They’ll be explained soon enough. For now, simply note what it means to have well-formed HTML: that tags are closed in reverse order that they are opened.
BEST PRACTICE
Although web browsers give their best effort to make sense of an HTML file, throughout this book we will endeavor to generate well-formed documents. A...