Welcome to the wonderful world of HTML programming! We're going to be creating web pages by hand ... that means we're not going to be using HTML editors such as Microsoft's FrontPage Express. This document includes examples and descriptions of all HTML tags and even has some extra JavaScript goodies at the end. If you don't understand any of the terminology, don't worry, it'll be explained later. This tutorial only covers the basics of HTML. I will not cover tables and other advanced tags unless needed.
Pay careful attention to the font used in the text. Words are highlighted so you can be alerted to them and pay careful attention to how they are used. Code examples use a different font to stand out.
You would expect to see a paragraph about the history of HTML and HTTP here, but I'm tired of all that! All you need to know is this:
All you need is a plain text editor such as Emacs, Notepad, or even DOS-Edit and a web browser such as Microsoft Internet Explorer or Netscape Navigator.
HTML has specifications for what a tag should look like. A tag has the basic form of:
<tag_name ATTRIBUTE1 ATTRIBUTE2 ... ATTRIBUTEn>. . .</tag_name>Requirements:
Before we get too far into programming in HTML, we need to make sure that we type our code in correct form and add comments to code. HTML is not case sensitive, so tags can be in uppercase, lowercase, or a mixture of both. HTML also ignores white space, so spacing is not necessary. I can hear hardcore HTML programmers shouting at me already! Although you don't need to comment and indent your lines of code, most programmers do. Why? 1) Typing all tags in uppercase makes the code easier to distinguish from plain text, 2) indenting makes code easier to read by others and yourself, and 3) commenting allows you to understand what you actually did.
This is it, the moment you've been waiting for. Read on to learn about all those cool HTML tags.
This is the first and last tag of your code. <HTML> tells the browser that it's reading ... HTML!
Within the <HEAD> tags are all of your header information such as the title of the web page, author information, etc...
The <TITLE> tag must be placed within the <HEAD> tags.
Usage: <TITLE>Blah! Blah! Blah!</TITLE>
The title of your web page would then be "Blah! Blah! Blah!"
This is where the majority of your code will reside. <BODY> tells the browser that the following code contains all the text, tags, formatting, etc... to be displayed to the user. The <BODY> tag contains several options for formatting the page.
<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#0000FF BACKGROUND="background.jpg">
Comments can be used to explain code to yourself, leave reminder for yourself
about past updates or leave a message to all those code thieves!
Example: <!-- Place your comment here -->
Notice that the starting and closing tag are very different
compared to other HTML tags
Output:
Notice something funny? No output! Comments are not displayed to the user.
We finally come to the first basic command that is viewable by the user.
<P> is used to create paragraphs of text. Any text and HTML tags
enclosed within the <P> tags will be in one paragraph.
Usage:
<P>All of this stuff is going to be in a paragraph. That's pretty groovy, Baby!<P>
All of this stuff is going to be in a paragraph. That's pretty groovy, Baby!
Paragraphs are always aligned to the left-hand side, but the <P> tag supports aligning to the center or right-hand side. To do so you must use the ALIGN attribute. Adding the ALIGN attribute is quite easy as demonstrated by the following code:
<P ALIGN=CENTER>All of this stuff is going to be centered!</P>This statement will be centered on the screen as such,
All of this stuff is going to be centered!
Other values for the ALIGN attribute are RIGHT, LEFT, and CENTERThis is an example of a full working HTML file. If you type the following statements exactly as they appear, you will see the best web page ever!
<HTML>
<HEAD>
<TITLE>Hello World Web Page</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF TEXT=#000000>
<P>
Hello World!
</P>
</BODY>
</HTML>
Now that you know how the basic HTML commands work, we'll move onto more
features including images, links, etc...
This section deals with using italics, underlining, etc... Text can be formatted by adding one simple tag (OK, I lied it's two. Remember? One in the front and one in the end.). Here's a quick example:
<U>This text is underlined<U>Output: This text is underlined
<BLOCKQUOTE>"It's not my bag, Baby!" - Austin Powers<BLOCKQUOTE>Output:
"It's not my bag, Baby!" - Austin Powers
Text in a header tag is automatically bolded and the font size is increased according to which header tag you use. There are six header tags:
The <FONT> tag is used to change the colour or size of the enclosed text. I will ignore the FACE attribute since it is a browser specific command. The other two attribtutes for <FONT> are SIZE and COLOR. SIZE received an integer value and changes the font size to the value specified. generally numbers less than three are smaller than the normal font and numbers over three are larger. COLOR receives Hex values (or basic colour names such as green, white, blue, etc...). Here is an example of SIZE:
<FONT SIZE=5>This text is going to be big.</FONT>Output: This text is going to be big.
<FONT COLOR=#0000FF>This text is going to be blue.</FONT>Output: This text is going to be blue.
The <BR> makes the browser go to the next line. It's like a \n character
in C/C++. <HR> creates a horizontal line (useful in separating the page
into parts). Both tags only require the beginning tag.
Usage: <BR> or <HR>
Attributes:
There are three types of lists in HTML:
<UL> <LI>This is item one.</LI> <LI>This is item two.</LI> <LI>and so on...</LI> </UL>Output:
A link allows you to create an anchor to another page. It's the same idea
as a pointer in other computer languages.
Usage: <A HREF="www.a_url.com">Text here<A>
Example: <A HREF="http://www.cs.bu.edu">Click me!</A>
Output: Click me!
Let's break down the tag to see what's going on. The HREF
attribute tell the browser what the link is pointing to. You can put any
URL in this area. Hint: If you're linking to a local file, you
don't need to add http:// in front of the file name. You can also
use other commands such as ftp://my_url.com, telnet://my_url.com,
or mailto:my_email@blah.com.
Links also provide a way to name specific parts of your web page. I'm
not going to cover this today, but if you really want to know how to do it,
ask me!
This is what you really wanted to know about, huh? Images are a big part of
a web page nowadays. As it is, I'm finding it hard reading all the text I
just typed out! The <IMG> tag allows you to display many
different graphic formats, the most common being GIF and JPEG.
Usage: <IMG SRC="filename">
Attributes:
JavaScript is a language that is used to give commands directly to the browser. I use JavaScript to perform "behind-the-scenes" formatting. I don't like all the flashy stuff like a scrolling marquee in the browser's status bar, etc... Don't worry, I tried it out too, but I've finally found the right niche for JavaScript. You should note that JavaScript is only supported by Intern Explorer 3.0 or higher and Netscape Navigator 3.0 or higher.
Including JavaScript in your web pages is easy. The JavaScript code can be placed inside of the HTML file itself. All you need to do is tell the browser that you're going to be using JavaScript code by using the <SCRIPT> tag. If the user is not using a JavaScript compatible browser, it will ignore the tag. All code within the <SCRIPT> tag will be interpreted by the browser's built-in JavaScript compiler. You must also tell the browser what language the code is in using the LANGUAGE="JavaScript" attribute.
I said that the <SCRIPT> tags are ignored by non-JavaScript compatible browsers, but what about all the juicy code? We must hide all of the code in the event that the user is using a sucky browser like Lynx. To accomplish this feat: we use a combination of HTML and JavaScript commenting. Here is an example:
<SCRIPT LANGUAGE="JavaScript"> <!-- HIDE SCRIPT // JUICY STUFF HERE... // --> <SCRIPT>(This code does nothing at the moment because it contains no JavaScript code).
This lovely piece of code demonstrates how you can use JavaScript to display when the document was last updated.
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE SCRIPT
document.write('<P><FONT SIZE=2>Last modified: ');
document.write(document.lastModified);
document.write('</FONT><P>');
// -->
</SCRIPT>
Output:
This code detects what browser the user is using and sends specific HTML tags accordingly.
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE SCRIPT
var uagent = navigator.userAgent;
if (uagent.indexOf("MSIE") == 25)
document.write('<P>Try a little Netscape next time?</P>');
else
document.write('<P>How about you, me, and Internet Explorer make three?</P>');
// FINISH HIDING SCRIPT -->
</SCRIPT>
Output:
The End
for now...
Home