HTML is an acronym that stands for "Hypertext Markup Language". "Hypertext" is text in which some words are active links to other text either in the same document or in some other document. "Markup" originally meant the instructions an editor or book designer would add to a manuscript to give the typesetter instructions on formatting. In HTML, the markup explicitly describes the structure of you document by marking headings, paragraphs, lists and tables so a web browser can recognize what it is and make it look right on the computer screen. For example, when it sees text marked as a heading, it will probably display it with a larger font.
Computer files containing HTML are sent to your web browser as you click on links to go to new pages on the web. HTML files contain the text of your document plus markup describing the parts of the document. The markup is in the form of "tags". For example the following shows the word "yeah" with an "em" tag surrounding it to indicate it should be emphasized:
<em>yeah</em>
The tag has two parts enclosed in "angle brackets" which are also the symbols for greater than and less than. The name of the tag, 'em', for 'emphasis' is inside the brackets. and the end of the emphasized text is marked with a matching tag that starts with a slash '/'. The tag is meant to describe what is between its beginning part and end part, but not give information about what it should look like. That, as we shall see it determined by a separate file called a "stylesheet".
There are two ways to create the HTML file needed to publish information on the web. 1) A graphical editor which shows what the page will should look like in a browser and allows you to edit the content or 2) Typing the HTML text in directly with a plain text editor (as opposed to a word processor) such as Notepad or Wordpad in Microsoft Windows. Most web designers and teachers recommend learning the second method before using the graphical editors to give you a firm grasp of how a HTML works. The graphical editors can be a great time saver, but are difficult to use without understanding how the HTML they create is working.
One simple and free alternative to commercial HTML editors that runs on most computers is called Composer and it is a part of Mozilla suite, best known for its browser. After starting up Mozilla, you can start a new file in Composer by selecting from the menu: File->New->Composer Page. I find it easier to start from an existing page such as our template page. To do this, open up the page with Mozilla's browser (called Navigator) and from the menus select File->Edit Page. This loads the page into the composer and allow direct editing of it. There are also tabs at the bottom of the window which will show different views of the same page including a view with little symbols showing the tag structure, and one showing the actual HTML that describes the page. These views can also be edited. A small pull-down selection box in the upper right above the contents of you page allows you to choose which tag to use for the current text (paragraph, heading 1, etc.) Other tools are also much the same as those in a typical word processor.
Most computer operating systems come with some kind of simple text editor that can be used to write HTML directly giving the ultimate control over your web documents provided you are willing to learn HTML.
Here is a tutorial to get you started, although there are many more for all levels of computer experience available on the web if you search for "HTML tutorial".
Perhaps the simplest HTML page looks like this:
<html>
<body>
<p>Hello World!</p>
</body>
</html>
There are three tags all nested within one another. The indention is not necessary, but helps to understand the structure of the document and is a good habit to get into. The outer <html> tag surround all of the rest and marks all of its contents as using the HTML format. The <body> tag represents the visible content on you page. To put a title in the title bar at the top of a browser window, you would add a <head> to the document with a <title> tag containing the title. Note that this title only appears at the top of the browser window, not at the beginning of your page of text.
<html>
<head>
<title>A First Web Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
<html>Try opening a text editor such as Notepad and typing the HTML code above into a file called "first.htm". Save the file and from Windows Explorer, double-click on the file to open it in a browser. Anytime you make changes to the file, you will need to remember to save the file again and hit the 'refresh' button on the browser to see the changes.
Now to add a title to the page using one of the heading tags. There are six levels of headings denoted by the tags <h1> through <h6>. The higher numbered headings are normally displayed with smaller and smaller fonts so <h1> is the first and largest level of heading.
<html>
<head>
<title>A First Web Page</title>
</head>
<body>
<h1>My Title</h1>
<p>Hello World!</p>
</body>
<html>
Now try adding an image to your page. The tag to use is <img>. This is a special tag because it doesn't have a closing tag. All of the information about the image is included within the angle brackets as "attributes" which describe the image:
<img src="me.jpg">
The image is in a file named "me.jpg" which we specify with the src attribute which stands for the "source" of the image. Put this tag within the body of your document, save, and refresh the browser to see what it looks like. Try putting it in different places in the HTML file and see how this affects the look in the browser.
Now to make our page a true hypertext we need to be able to add hypertext links. Suppose we want the page we have been working on to link to another page in an HTML file named "second.htm". The tag to use is <a> which stands for "anchor" and it looks like this:
<a href="second.htm">go to the next page</a>
This will make the text within the tag ("go to the next page") into a link that will take the browser to "second.htm". The tag has an attribute, href, which is short for "hypertext reference" and refers to the file that the link should take us to.
Now lets look at the completed HTML page:
<html>
<head>
<title>A First Web Page</title>
</head>
<body>
<h1>My Title</h1>
<p>Hello World! When you are ready,
<a href="second.htm">go to the next page</a>
</p>
</body>
<html>
Congratulations on learning the basics of HTML web pages. For further information and complete lists of the tags available try some of these resources:
- NCSA's more detailed tutorial includes more information about what I've already shown such as laying out images, and tables.
- W3 Schools even more complete tutorial on HTML
- A complete list of HTML tags
- The official HTML specification This is not for the faint of heart.
An important concept in web page design is called "separation of content and presentation". This means that the content of the document marked up mostly with tags which describe what the contents of the tags are, but not how it should look when displayed. 'emphasis' just means that the word should somehow be emphasized. This might be by making it italics (the usual case) or bold face, or on a text reader for the blind, it might make the word be spoken louder. Separating content and presentation allows for the same document to appear in many different forms according to the needs or tastes of the person reading it.
The sample pages for our Counting Books follow the principle of separation of content and presentation by putting as much information as possible about the presentation, the look of the document in a separate file called a "stylesheet". By making changes to the style sheet, you can control things like the colors, fonts, font sizes, margins, etc. The stylesheet is usually in a file with '.css' as the final extension to the name of the file. The format of the style sheet is different from HTML. It associates style information in curly brackets '{}' which should be applied to the text within certain tags. For example the following line from page1.css says that text surrounded by the <p> tag (<p> for paragraph) should have a the margin of 10 pixels all the way around (above and below as well as on each side):
p { margin: 10px; }
Here is what a complete stylesheet looks like: page.css
To use a style sheet you must put a special link to it in your HTML files. For example, if I have all of my style information in a file called "stylin.css", I would need to put a link tag into the <head> of my HTML file like so:
<html>
<head>
<title>My Stylin Page</title>
<link rel="stylesheet" href="stylin.css" type="text/css" />
</head>
.
<body>
</body>
</html>
The only thing you need to modify is the name of the stylesheet in the href attribute.
More information on style sheets can be found on the following resources:
Defining a color is a bit confusing to learn because our language is not well suited to giving precise descriptions of color. Although some names of basic colors are defined such as black, white, red, etc. stylesheets usually use a special numeric representation to specify an exact color. Here is a line from a stylesheet which determines the background color and the default color to use for text and other marking such as table borders:
body { background-color: #66AA99; color: black }
The numbers represent colors. Because the words we use in human languages are too vague to specify an exact shade, number are used instead. Colors are formed from combinations of red, green, and blue. In the number, the first two digits represents the amount of red, the second two digits green, and the last two digits represent the amount of blue to mix together to make the desired color. The two digit numbers for each color are not decimal numbers, they are base sixteen numbers which are known as "hexadecimal" (which just means 6+10). Sometimes "hexadecimal" is just shortened to "hex". Hex numbers use the digits 0-9 as well as the letters A-F.
Unfortunately this hard to understand convention is inherited from computer hardware engineers who use hexadecimal numbers as an abbreviated way to represent the binary numbers in the computer itself. While the hexadecimal system has some interesting patterns that make it useful, it is not so important for us to understand it. The important thing is to be able to get the hexadecimal representation for the color we want. One way is to use The Gimp (or Photoshop) which has a tool called the "eyedropper" which will tell you the color of whatever you click on in the same 6 digit hexadecimal number. Then you can copy and past this into your stylesheet.