Some notes on writing html

"HTML" stands for HyperText Mark-up Language and is simply a code which instructs the web browser how to display information (mainly text and pictures) on the computer screen. The newer languages XML and XHTML are becoming more popular over time, but HTML provides a good starting point for those making web pages. HTML is not a programming language, in the sense that it has no loops or conditionals -- it just gives the browser enough information to be able to build a page.

This page not provide an in-depth presentation of HTML -- rather it is intended to give just enough HTML to get started using JavaScript, a programming language which interacts with parts of an HTML document. More extensive material may be found by following the links from htmlresources.

Notation: This document will use a "normal" or default font (as in this sentence) for narrative description and commentary. When examples of html code are used, they will typically be typeset in a "pre-" formatted font:

<pre>formatted font</pre>

Grammar in html: Generally speaking (with some exceptions), each tag -- something written inside less than and greater than brackets: <tag> -- marks the beginning of an activity intended to be interpreted by a browser. That activity remains in effect until the tag is turned off (by notation such as </tag>). A few tags like <br> and <img> do not require end tags (though apparently this luxury may disappear in XHTML), but generally a tag requires an ending tag.

For example to begin boldfacing a word, like "artichoke," one writes something like this:

<b> artichoke </b>

The two tags involved are the <b> and the </b>. The first begins boldfacing; the second turns it off. 

The basic structure of a document:

HTML identifier: begin with <html>, end with </html>-- these bracket or enclose the entire document.

A header with information about the document.

<head> material describing the document </head>

Among things which appear in the header, a title is considered necessary, while other things like keywords are viewed as useful for providing hint about content to various Internet search engines. Keep your eyes open in your readings for information about "meta" and "index" tags.

<title> The title of the document </title>

A body with information to appear in the document

<body> materials constituting the document itself </body>

An example:

<html>
<head>
<title> Simple example</title>
</head>
<body>
This is a simple web page.
</body></html>

simplest.html

The HTML A link to the file What it looks like in a browser

The above text ("The HTML") represents a web page including the basic parts: head, title and body. Note that carriage returns are relatively unimportant in HTML: both the end-body and end-html tags appear on the same line above. Also note that one tag, like <head></head> may have another nested inside it (the title tag is inside the head tag), though it is considered bad grammar (even though the browser may understand it) to allow tags to "straddle" one another as in the example that follows.

Bad example:

<html>
<head>
<title> Simple example
</head></title>
<body>
Here the title tag straddles the head tag.
</body></html>

Alignment and spacing:

Certain tags are used to position items on a page, by inserting carriage returns, space characters, or to adjust margins.

<p> 
begin paragraph
</p>
end paragraph
<br>
carriage return (line break)

&nbsp; -- put in a blank space    (horizontally, like the space bar -- see source code of this document for use)

lists:

<ul> -- begin list

<li>list item 1</li>

<li>list item 2</li>

<li>list item 3</li>

</ul>

centering text:

<center>
begin centering
</center>
end centering

Note: The "<center>" tag is "deprecated" meaning that it is old-fashioned and may not work in newer browsers. Nowadays, <p align=center>text</p> would be preferred to <center>text</center>.

indenting text:

<blockquote> followed by

the lines of indented text

followed by </blockquote>

Type attributes:

Type attributes are those features which control the way text appears.

<b>
begin boldface
</b> 
end boldface
<i>
begin italics
</i>
end italics
<h1>
begin biggest headline
</h1>
end biggest headline
<h6>
begin smallest headline
</h6>
end smallest headline

Because browsers and hardware do not necessarily share fonts and fontsizes, best to limit yourself to default fonts and relative font sizes.

Standard links to other web pages: The grammar of a link looks a bit clumsy, but it works:

<a href="http:sitename.domain.typ">your description of the site</a>

so for example,

<a href="http://www.sru.edu">A popular Internet site</a>

shows how we might link to A popular Internet site.

Special topics:

footnotes: also known as anchors, these provide for intra-document links.

In making things look like footnotes, it may be useful to look at how to do:

superscripts1:

<sup>1</sup>

use these in conjunction with intra-document (or extra-document) links to point to errata2 or into a bibliography.

While we're at it:

subscripts3:

<sub>3</sub>

special characters:

<  -- less than symbol -- to display in html, use

    &lt;

> -- greater than symbol -- to display in html, use

&gt;

  -- a blank or space -- to display in html, use

&nbsp; 

Other special HTML characters can be seen at this list maintained by the World Wide Web Consortium. For display of languages other than English, you should be aware of Unicode.

 


[Revised 9/16/2004 by dpd.]

tile5b.gif (7519 bytes)


2This comment is here really just to illustrate the use of links within documents. The syntax consists of putting an "anchor" at the place you want to go to:

<a name="footnote"></a>

and then link to it from a link you create elsewhere using something like

<a href="#footnote"><sup>2</sup> </a>