Introduction to HTML
HTML or HyperText Markup Language, is the language in which World Wide Web pages are written. HTML documents are basically text documents which contain special codes along with the text to be displayed. They can be written with any word processor that can save the file as plain (ASCII) text, or using a special HTML editor such as FrontPage or HotDog.
The codes, or, as they are called, "markup tags", that are inserted in the text, tell a browser how to display the document on the screen, and how to display images and other multimedia files in the document. They also activate the links between different documents.
Here is a basic example of HTML:
<HTML> <HEAD><TITLE>My Home Page</TITLE>
<center><H2>An Example of a Web Page</H2></center>
</HEAD>
<BODY>
Welcome to my home page!
<P>This is plain text, where I'll be telling you about all the wonderful things I plan to put on this site.</P>
<P>Meanwhile, you can look at <A HREF="http://israweb.co.il/judyk/">my teaching site</A>, or go directly to our course list of <A HREF="html-res.html">HTML guides and tutorials</A> (adapted from a much <a href="http://www.israweb.co.il/judyk/html.htm"> longer list on my teaching site).
</P>
</body>
</html>
When a Web browser displays this according to the instructions in the tags, it looks like this:
An Example of a Web Page
Welcome to my home page!
This is plain text, where I'll be telling you about all the wonderful things I plan to put on this site.
Meanwhile, you can look at my teaching site, or go directly to our course list of HTML guides and tutorials (adapted from a much longer list on my teaching site).
The words in angle brackets (< and >) in the above example are the tags.
- Tags are always enclosed in angle brackets.
- You can write them in upper or lower case.
- Most (but not all) tags are containers, meaning that there is a starting tag (for instance, <TITLE>) and an ending tag (in this example, </TITLE>. The end tag is the same as the starting tag with a slash at the beginning of the command. The tag applies to all the text that comes between the starting and ending tag.
The Basic Layout of a Web Page
- An HTML page is defined by the container tags <HTML> and </HTML> which start and end the whole document.
- The page is split into two parts: the header and the body. (This is true of "simple" pages that occupy the whole window. Some pages with special functions, such as the layout page defining a framed site, work a little differently. We'll learn about those later on.)
- The header is contained in the tags <HEAD> and </HEAD>.
- It tells the browser, and other programs such as search engines that may index the page, information about the page.
- The content of the header is not part of the text of the page and you won't see it in the browser window.
- The only part of the header that even a beginner really should fill in is the title (in the example above: <TITLE>My Home Page</TITLE>). Most browsers write the title in the title bar at the very top of the screen. If you don't fill it in, the title bar will contain either the address (URL) of your page, or the word [Untitled]. Neither of which look very nice and both of which scream "unprofessional author!". (If you care...)
- The header can also contain information about the document, in metatags which we'll learn later.
- And you can put JavaScript programs in the header (you can put them in the body too; the ones in the header are loaded and run before the page displays, the ones in the body are loaded whenever the browser gets to that point in the page).
- The body contains everything that will be displayed as part of the document. It all comes between the two tags <BODY> and </BODY>. (Again, we'll modify that statement when we get to framed sites, but it's true for Web pages displaying single documents).
The body also contains information about the look of the page: background color, background image if there is one, and the colors of various types of links.
- The format for the body command is therefore:
<BODY bgcolor="color code or number" link="color code or number" alink="color code or number" vlink="color code or number" background="url of image file">
For instance:<BODY bgcolor="white" link="blue" alink="orange" vlink="red" background="images/mybackground.gif">
You can get a greater range of colors by using the color codes, e.g. <BODY bgcolor="#FFFFEE"> gives a nice soft ivory instead of white. If you specify both a background color and a background images, browsers that can't handle graphics, or people browsing with graphics turned off, will see the background color. Otherwise they'll see whatever the browser gives them, which in Netscape is white but in Internet Explorer a dull Battleship Grey.
So the basic layout of an HTML document is:
<HTML><HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>
<BODY>
(Everything in the page comes here)
</BODY>
</HTML>
I've set out the code with different indents so that it's easy to see that you have an ending tag for each opening tag. This isn't strictly necessary for the basic page skeleton we've learnt now, but it's useful for some other tags used in the middle of the page, so it's a good idea to get into the habit of it. It makes trouble-shooting much easier!
Some browsers will interpret a page correctly even if you don't use <HTML>, <HEAD>, and <BODY> tags, and you'll see pages on the Web that don't include them. However, this is incorrect HTML, and some browsers will have trouble with it. Also, as soon as you write non-standard HTML which does not conform to the protocol, you have no guarantee that the next version even of a browser that currently understands what you have written, will continue to do so.
