Notes 2
— print (last updated: Jun 28, 2009) — print

The basic structure of an HTML document.

The basic structure consists of the html, head, title, and body elements. When you open HTML-Kit and create a new file, automatically, HTML-Kit creates this section of HTML-code for you:

<!DOCTYPE HTML PUBLIC "...">

<html>
<head>
<title>Untitled</title>
</head>
<body>

</body>
</html>

The DOCTYPE tag is put there for XML conformance, primarily so that the HTML code can be validated against some standard. The course textbook and other books make a point of using correct indentation to reflect the levels of nesting within tags, something like this:

<!DOCTYPE HTML PUBLIC "...">

<html>
  <head>
    <title>Untitled</title>
  </head>
  <body>

  </body>
</html>

For example the title element's start tag is used inside the html and head tags and so it appears indented two levels. For better or worse, HTML-Kit doesn't impose a formatting on HTML files, so we won't always force proper indentation, although often it does help to clarify the HTML code.

Headers

Header tags are a way to delineate sections of a document. The "h" elements are used and they come in 6 sizes from larger to smaller: h1, h2, h3, h4, h5, h6.

Paragraphs and line breaks

Normally HTML treats all whitespace characters equally - this includes tabs, spaces and linebreaks. In order to separate paragraphs, you can use the p element in of two ways:

surround the paragraph by  .. 
separate one paragraph from the next by an empty paragraph by ; although technically incorrect, the start tag  by itself functions in the same way.

The way to force a line break is with the br element used in a complete tag:  .

Common text elements

Bolding, italicizing, underlining, quoting, size and font changes are common ways to make words stand out within a line of other words. In HTML, underlining is perhaps less attractive to use because it often signifies a hyperlink.

This is a <b>bolded set</b> of words.
This is an <i>italicized set</i> of words.
This is an <u>underlined set</u> of words.
This is a <big>big set</big> of words.
This is a <small>small set</small> of words.
This is a <tt>teletype set</tt> of words.

This is a <strong>strengthened set</strong> of words.
This is an <em>emphasized set</em> of words.

Here is how they appear in HTML:

This is a bolded set of words. This is an italicized set of words. This is an underlined set of words. This is a big set of words. This is a small set of words. This is a teletype set of words. This is a strengthened set of words. This is an emphasized set of words.

The strong and em elements are said to create logical style changes as opposed to the others which create physical style changes.

Simple style properties

Style properties can be added through the style attribute in this fashion:

<element style="property1:value1;property2:value2;..."  ...

We will treat this subject in greater depth later, but it's useful to have available some basic properties. Here are two properties that are of very common usage:

color: the value can be any legitimate color including named colors described in HTML Named Colors.
text-align: the value can be "left", "right", or "center"

Here are two example usages:

<h1 style="text-align:center">Centered Header</h1>
<i style="color:blue">Blue Italicized text</i>
<h1 style="color:blue;text-align:center">Blue Centered Header</h1>

which looks like this:

Centered Header

Blue Italicized text

Blue Centered Header

Hyperlinks (anchors)

Hyperlinks are, in some sense, the most important part of the World Wide Web because they provide us the most basic non-linear navigation scheme. Hyperlinks use the a (anchor) element (see HTML4.01 a specs). Don't confuse the a (anchor) element with the link element, which is something different.

Structure of hyperlink element

The hyperlink is the a element which uses the href attribute to specify the target URL:

<a href="target URL" target="target FRAME" ...>Content</a>

The target attribute specifies where the target URL will be displayed. By default, the target Frame is the current browser window, but this can be controlled in several ways, which at this point the only ones of interest are:

target=somewindow: to the frame identified by "somewindow", which will be created at first and reused thereafter
target=_blank: always to a new browser window

URL targets

The targets of hyperlinks are commonly classified by:

internal: hyperlinked URL resides on same server as this page
external: hyperlinked URL resides on another server

Here are some examples:

This is a link to 
<a href="http://www.some.site">some external site</a>.

This is a relative link to 
<a href="file_or_folder">some internal site</a>.

This is a link to 
<a href="some_web_page#section">some section within a page</a>.

The first of the examples uses a complete URL, starting with the protocol, http. A complete URL must always be used to reference an external URL.

There are a number of other protocols which are commonly used in web sites

https://www.some.secure.site
ftp://ftp.some.anonymous.site
ftp://user@ftp.some.site
mailto:user@some.mail.site
file://some_folder_path/some_file

Relative URLs

Internal URLs most often use a relative or partial URL format in which the protocol and server are not specified. In this case we assume that the location is relative to the current location. For example, suppose we are viewing the following page through IE in "file" mode (i.e., by double-clicking the file)

file://C:\samples\one.html

The partial URL

file://C:\samples\

is considered the base of the URL for relative links. In particular if, within this file, we have the hyperlink:

<a href="two.html">...</a>

then clicking on the hyperlink would take us to this page:

file://C:\samples\two.html

Generally, it is better to use a relative URLs whenever possible because the effectiveness of linking will not be compromised by changing the root URL of the site (i.e., change domain names or change paths).

Bookmark URLs

A hyperlink to a bookmark has the form

<a href="some_page.html#section_marker">Bookmark to section</a>

Upon activating such a hyperlink, the document some_page.html is visited and the browser automatically scrolls to the position defined by the occurrence of this bookmark:

<a name="section_marker"></a>

Like the hyperlink, the bookmark uses the anchor element, but with the name attribute instead of the href attribute. It is always used in this style with empty content between the start and end tags.

If the hyperlink and the bookmark both occur in some_page.html then we can abbreviate the hyperlink as:

<a href="#section_marker">Bookmark to section</a>

Linking within Folders

The relative URL in file a.html,

<a href="b.html">...</a>

assumes that a.html and b.html reside in the same folder. Let's consider a more complex scenario using subfolders F and G:

a.html  
b.html
F: folder containing this file:
  c.html
G: folder containing this file:
  d.html

We want to prescribe a way to achieve the linking between any of these documents. The idea is to prepend the target URL file name with a combination of these prefixes:

"F/": go into the F folder (note the forward slash)
"../": go up one folder

The following table gives examples of linking:

in file:	to get to file:	use this hyperlink:
`a.html`	`c.html` in `F`	`<a href="F/c.html">...</a>`
`c.html` in `F`	`a.html`	`<a href="../a.html">...</a>`
`c.html` in `F`	`d.html` in `G`	`<a href="../G/d.html">...</a>`

Notes 2 — print (last updated: Jun 28, 2009) — print