Updated 9/12/2016 at 5:50pm

HTML Review


HTML Review

HTML stands for "Hyper-Text Markup Language". A markup language describes the general structure of a document. This language defines a set of common structures that documents can be made of, such as headings, paragraphs, lists, and tables. The HTML language is used by an application program to create a document from its definitions and instructions. HTML uses special symbols called tags to give instructions to the application program.

The application program that uses HTML is a browser program. The browser downloads pages and resources (images and such) from a Web server, and displays the page along with its resources.

Strictly speaking, HTML does not, by itself, tell the browser how the document will appear when the browser displays the document. It merely describes what is in the document. HTML has been "extended" by the browser makers to include formatting tags such as <font> and <center> to control the appearance of the page. But these "extension" tags are being phased out. The preferred way of controlling the appearance of the document is with Cascading Style Sheets (CSS), which you will see later in this course.

A browser is a text processor. What this means is that an HTML page is a text file, and the browser parses the page and formats the document based on the HTML commands (tags) that it finds. Parsing means analyzing and separating something (in this case, an HTML page) into its components (in this case, the tags and content of the page).

Let's review briefly the process by which a browser obtains and displays a Web page:

  1. The user requests a page, either by typing the URL into the "Address" box of the browser, or by clicking a hypertext link in another page.
  2. The browser sends a message (request) that is routed (by the network that the user's computer is part of) to a Domain Name Server (DSN). The DNS locates the Internet Protocol Address (IP Address) of the Web server that hosts the requested page. (Usually, a request for a page that is on a local Web server does not go outside the requester's network, but is routed almost directly to the local server.)
  3. The request is sent to the Web server that hosts the requested page, asking for the page.
  4. The Web server locates the page and sends it back to the browser in another message.
  5. The browser parses the message into its parts and then figures out what will be on the page, and where, based on the tags and formatting rules.
  6. The browser displays the page.


Choosing an Editor

In order to make an HTML Web page, you will need a text editor app or program which can save the document in plain text format.

If you are using a Windows PC or laptop, I recommend one of these editors:

If you are using a Mac or Macbook, here are some editors that you can try:


Breadcrumbs

Breadcrumbs use a single line of text and links to show the currently-displayed page's logical location in the site. Breadcrumbs make it easier for users to move around the site and to keep track of where they are in the site's logical organization.

Breadcrumbs are a secondary navigation aid, just as a site map is a secondary navigation aid. To navigate, site visitors mostly use the main navigation bar, but from time to time, your site users will want some way to determine where the current page fits into the site, especially if the main navigation doesn't quite meet their needs or when they have opened a page that is deeper into the site's logical structure than the main navigation bar addresses.

As an example of breadcrumbs, take another look at the instructor's assignment-fulfilling site. The line of code and links that looks like this (when the "About Us" page is displayed):

> Home > About Us

is in the "breadcrumb" area of the site.

And as further examples, here are some sites that use breadcrumbs nicely. While you are looking at them, note how you can navigate back to previous sections of the site by using the breadcrumbs:

Breadcrumbs are becoming fairly standard on a lot of Web sites, and they almost always have these features:

The one main question that usually arises at this point in the discussion is this: "Do I make the breadcrumbs follow the directory hierarchy, or the browser history, or something else?"

The answer is the "something else" and it is the logical relationship of the pages.

In the instructor's site, for instance, all of the pages are in the same directory on the Web server's hard drive. But the breadcrumbs on the Feedback Form page show that the Feedback Form is logically under the Contact Us page. And the good news is that you can make your breadcrumbs reflect whatever logical page relationships seem to make the most sense.

Now let's talk about how to put breadcrumbs into your pages. We will look at the breadcrumbs shown above for the "About Us" page.

I put a <div>...</div> tag around the breadcrumbs, like this:

<div id="breadcrumbs">
  &gt; <a href="index.html">Home</a>
  &gt; About Us
</div>

Please note these points about the breadcrumb sample code:

Just one more note about breadcrumbs: An excellent reference page is Jakob Nielsen's article of April 10, 2007, from which I drew much of what is in this section of the handout.


Sample HTML5 Page

The current standard for HTML pages is HTML5. HTML5 Web pages have a much simpler syntax than the previous standard, which was XHTML. Following is a sample HTML page which uses HTML5 syntax:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample HTML5 Page</title>
  <meta name="keywords" content="sample page, HTML5" />
  <meta name="description" content="This is a sample HTML5 Web page." />
  <link rel="stylesheet" href="myStyles.css">
</head>

<body>
  <div id="mainDiv">
    <header>
      This could be your page header.
    </header>
    <p id="firstPara">
      This could be a first paragraph for the page.
    </p>
    <p id="secondPara">
      This could be a second paragraph for the page.
    </p>
    <footer>
      This could be your page's footer.
    </footer>
  </div>
</body>
</html>

You may find an HTML5 Template in this class site's "Resources" page. You can highlight, copy, and paste this template into your editor to begin making your own pages, if you wish.


HTML Validation

If you want to check your pages to see if they are valid HTML code, you have many ways to do so. I will list just a few of the ones that I know of, here:


Anchors & Links

The <a> tag can be used to make either links or anchors.


Relative vs Absolute URLs

The general format of a simple URL:

scheme:// host /path

http://www.website.com/catalog/usa/texas/dallas/products.html

Parts:

Examples of Full (Absolute) URLs:

Examples of Relative URLs:

Problems with Absolute URLs


Please note: