HTML

Objectives:

design and structure web pages using correct HTML tags, such as paragraph, heading, list, and image
draw a page by tracing its HTML source code

Resources:

slides for chapter 2
Tutorials on w3schools
HTML tag reference
198.209.19.99/~blu/book_examples/ch02-html-files/all_examples.html
a short wikibook on HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language for defining web pages, which serve as the interfaces to your web applications. HTML files are plain-text files following the HTML syntax. A browser knows how to take an HTML file and display in a browser window the page defined by the HTML file. The file can be stored locally on the computer the browser is running on or fetched from a web server using a URL. Creating HTML files is coding because the result source code gets executed by a browser, which is a virtual machine.

Tags Define the Page Structure

An HTML file consists of content marked-up by tags as shown in this picture:

The tag at the beginning of the file is special as it is used to indicate the standard the file is following. <!DOCTYPE html> means HTML5 - the latest HTML standard, which some new features. You can copy and paste this tag to every HTML file you create.

Most tags appear in pairs - an opening tag and a closing tag. Each pair of tags defines an element for the web page, which can be visible or invisible. The visible elements are like boxes. All boxes hold some content and some boxes can contain other boxes. For instance, the <html></html></html> defines the root (highest level) element, which should enclose everything else in your HTML file. Inside the "html" element we have a "head" element and a "body" element defined by their corresponding tags. Inside the "head" element is a "title" element and inside the "body" element is a "paragraph" element defined by the

<p></p>

tag pair. Both the "title" element and the "paragraph" element have text as their content. This type of nested structure resembles a tree. In fact, a browser always parse an HTML file first into a DOM object (a tree data structure) before it draws the page on the screen. Note that

<!-- -->

tag defines a comment, which is used for documentation and has no effect to the page. The figure to the right depicts the tree structure defined by the nested tags in the HTML file.

We call elements that enclose other elements parent elements and enclosed elements children elements. Obviously a child element must be completed enclosed in its parent element, which means the tags must be properly nested. For instance, the following HTML fragment is confusing to a browser because the two elements are intermingled:

<em> emphasized and<bold>bold-faced</em></bold>

We call elements block elements if they can contain other elements. For example, a paragraph (<p>) element and a list (<ul>) element are block elements and they usually occupy multiple lines on the page. All other elements are called inline elements. Some tags are self-closing, e.g. the <br/> defines a linebreak, which is necessary because all space characters in HTML are ignored by browsers. Some tags allows us to define additional attributes for the elements, e.g. <img src="MyPicture.jpg"/> defines a image at location specified by the "src" attribute. Each attribute is a name and value pair with the value in double quotes. As you can see from this example, images are embedded into web pages by using the <img> tag that points to the images and the actual images are not part of the HTML file. This is an example of an external component, which also includes CSS and JavaScript files. Such external components must be downloaded separately and incorporated into the web pages.

Here is an example showing all kinds of elements and what they appear on a web page. Right click on the page and select "view source code" to see what's inside the page's HTML source file.

The best way to learn HTML is to study examples and tweak them to meet your needs. Our goal is to be able to draw mental pictures of a page by looking at the HTML source file. In other words we want to understand the relationship between what we write in an HTML file and what will appear on the page so that we can imagine and create web pages.

Essental Tags

You can find a comprehensive list of HTML tags at W3C schools. More specifically you need to know how to use the following tags (click on a tag to see a description and example use of the tag).

Meta Tags

In the head element a number of meta tags can be used to provide information about the HTML document as show in this example.

The meta tag with "charset" attribute is required. The attribute is commonly set to "utf-8" as shown this example.

HTML5 Semantics

HTML5 introduces a number of semantic elements to help search engines or other programs better identify the structure of a web page.