Following is a brief introduction to some basic formatting commands available in HTML.
HTML is a web language that supports many features, from plain text to fancy animations. Many of the features described below can also be found on the Internet in the form of style guides, which can be easily found via a search engine. In this brief tutorial, we step you through some basic HTML commands that may become useful for many of your web creations in the future.
- If you already feel comfortable with basic HTML commands, you can skip the introduction and go directly to Exercise 1 .
|
If you are new with web page design, you may be wondering just what HTML is and how you can begin creating web documents. HTML documents are plain-text (also referred to as ASCII) files that you can create using any available text editor (e.g., emacs or vi on Unix machines, BBEdit on a MacIntosh, Notepad or Word on a Windows machine). Thus, since you are already familiar with Word on the PCs in the lab, you can use that word processing environment to create your pages as long as you remember to save your document as "text only with line breaks."
The basic component of the structure of an HTML document is the tag. These tags help to separate pieces of your document into headers or footers, tables, paragraphs, lists, and other items. Basically, tags are used to mark the elements of your file, which may just contain plain text or, conversely, a complicated document with tables and frames.HTML tags are denoted by a command within angle brackets. To the left of the command is a left angle bracket (<), and to the right is a right angle bracket ($gt). Tags almost always come in pairs to start and end a tag command. (The end tag look just like the start tag with a forward slash (/) preceding the command within brackets. Below is an example of a tag pair that specifies the heading font H1 for the heading "Introduction to HTML."
<H1>Introduction to HTML</H1> In general, it should be noted that HTML is NOT case sensitive, so <body> specifies the same thing as <Body> and <BODY>.
There are a few basic HTML commands that must appear in every HTML document. Basically, there are two main parts: the head of the document, and the body. The head contains the title of the page (which shows up on the topmost window bar of your browser) and the body contains the actual text that you see when you load the page with the browser (e.g., paragraphs of text, pictures, lists, tables).Below is an example of a very simple HTML document, which only contains a few lines of text with a heading.
<html>
<head>
<title>A Basic HTML Page</title>
<head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is my first paragraph in HTML!
HTML is easy to learn, and fun
to use.</p>
<P>This is my second paragraph.</P>
</body>
</html>
The above document is required to have the <html>, <head>, <title>, and <body> tags with their closing tags. Since these are included in every file you create, it is a good idea to create a template file containing just those tags. You can download a copy of an HTML template if you wish.
You can also see the formatted version of the above HTML example.
You can always go under the View menu of your browser and select
Document Source
to see a copy of the HTML code for the particular page that you are on. This is a good way to view how others have constructed their files and is a good way to learn new techniques.
- <HTML>: Begins an HTML document. Everything you specify for your page goes between this and its closing tag.
- <HEAD>: Specifies the first part of an HTML document. It is here that you give your page a title (which shows up on the title bar of your browser window). After specifying a title, this section is closed.
- <TITLE>: Contains the title of your document that will show up at the top of your browser window. This is the same title that is shown on any bookmarks made to that page, so choosing something descriptive of the page's contents is always a good idea (although try not to make it too long!)
- <BODY>: This is the real meat of your document. It contains the viewable contents of your page within the text area of your browser window. Almost every tag you will learn will be used to format your pages in some way within this section.
Some of the most frequently used formatting tags in HTML are used for creating section headings and paragraphs. Each is described briefly below.
Headings
This is the word or phrase you place at the top of a section of a file that identifies what type of subcontent is to follow. HTML allows 6 different font sizes for headings (H1 through H6), where H1 is the largest and H6 is the smallest. All headings are displayed in bolded font and larger than normal text. As a general rule, the first heading in a document is usually the <H1> tag. Below is an example.
<H1>My Heading</H1> In addition, you should try not to skip more than one level of heading font size at a time. For instance, starting with <H1> and then using <H4> is generally a bad idea.
Paragraphs
What may not be apparent when you first start writing HTML files is the fact that carriage returns are not processed as anything special by the browser. This brings to light two consequences:To specify text that will make up a paragraph, simply place that text in between the start paragraph tag (<P>) and end paragraph tag(<P>). For example,
- You don't have to worry about how long you lines of text are, since autowrapping occurs. In addition, multiple spaces are collapsed into a single space.
- You must specify exactly when you want a line break or paragraph to begin.
<P>This will make up a paragraph. The spacing is ignored by the HTML browser unless I tell it what to do. I'm telling it that this is text for a paragraph.</P>Spacing
You can also tell the browser to make a single line feed by using the <BR> (line break) command tag. This tag is special in that it doesn't need a closing tag. (Actually, <P> doesn't either. You can shortcut by leaving out the <\P> tags, since the browser implies that you meant to close the previous paragraph every time it sees another <P> tag.) This breaks the text up and continues on the next line. Here's an example:<P>What is going to happen if this line gets too long<BR> for my browser to read?
</P>
Yet another way of spacing up your documents is by using the preformmatted tag, <PRE>. Anything you place within the start and end tags will show up exactly as it appears when you typed it. This means that you can place multiple carriage returns into your document by using this tag. Consider the following:
I'm going to follow this sentence with a big vertical space.
<PRE>
</PRE>
Lastly, you can do things like center a piece of text:
<CENTER> This piece of text should be centered. </CENTER>Try these out on your own and view the results in your web browser!
Another way of breaking up text in a document is through the use of horizontal rules, or "lines". The code to do this is:<HR>Which produces a centered line going across the page:
These lines, when combined with other spacing options can add to the readabililty of a page.
HTML will allow you to use several varieties of lists. You can also nest your lists (put one within another), but you should be careful not to nest too many listed items.
Unnumbered Lists
An unnumbered list looks like the one below, with bullets for each point.Here is an example:
- Begin with the unnumbered list opening tag <UL>.
- Place the list item tag <LI> in front of each of the desired list items.
- End the list by closing the unnumbered list tag (</UL>).
<UL>which will look like
<LI> Apple
<LI> IBM
<LI> Compaq
<LI> Power Computing
</UL>
- Apple
- IBM
- Compaq
- Power Computing
Numbered Lists
A numbered (or ordered list) looks just like an unnumbered list except it uses the ordered list tag (<OL>) instead of the unnumbered tag (<UL>). The following list<OL>looks like this:
<LI> Pizza Hut
<LI> Dominos
<LI> Papa John's
</OL>
- Pizza Hut
- Dominos
- Papa John's
You can vary the way these numberings are ordered by using the TYPE specifier within the <OL> tag. For example, the following list labels its items alphabetically:
<OL TYPE='a'>Output:
<LI> Sally's
<LI> Stub & Herb's
<LI> BW3
<\OL>
- Sally's
- Stub & Herb's
- BW3
You can label by Roman numerals by setting TYPE='i' within the <OL> tag.
Nested Lists
A nested list can be created by simply placing a list as a list item:This list looks like<UL> <LI> Songs by Pearl Jam: <UL> <LI> Jeremy <LI> Animal <LI> Spin the Black Circle </UL> <LI> Songs by Garth Brooks: <UL> <LI> The Dance <LI> Rodeo <LI> Shameless <LI> We Shall Be Free </UL> </UL>
- Songs by Pearl Jam:
- Jeremy
- Animal
- Spin the Black Circle
- Songs by Garth Brooks:
- The Dance
- Rodeo
- Shameless
- We Shall Be Free
Several font styles exist which you may find you need at some point in your documents. Below are listed a few of these.<B> bold text </B> <I> italicized text </I> <TT> typewriter text </TT> <BLINK> </BLINK> <U> underlined </U> <STRIKE>For a more comprehensive listing of formatting styles (including color and size), please refer to the basic HTML page found in Lab 1.strike through<STRIKE>
Perhaps the greatest ability HTML has is to be able to provide links from one document (or section) to another document (or section). We will look at how to link two pages together. Your browser highlights a link with a specified color and underlines it to mark it as a "hypertext link." Below is how to specify a link.
- Start by using the beginning of the anchor tag, (<A ), followed by a space.
- Next, specify the address of the document you wish to link to using the href="filename" command within the <A> tag. Follow this with a closing right angle bracket (>), e.g.,
<A href="myfile.html">
- Then enter the text that will be the hypertext link inside your document, e.g.,
<A href="myfile.html">Another Page
- Last, enter the closing anchor tag </A>. The format of this whole line will look like this:
<A href="myfile.html">Another Page</A>
One caveat here is that you must make sure that the file you are linking to exists, and is readable by the browser. Here is a sample hypertext link from a home page to a secondary page about the person's family under the directory links:
Check out <A href="links/family.html">my family</A>.This looks like this in the document (Note: the file family.html does not exist!):Check out my family.
Notes
If you are linking to documents that are within your current directory, you only need to put the file name within the anchor tag. If, however, there are any subdirectories to follow, you will need to put them in preceding the file name, separated by slashes (/). When you desire to link to a page that is not within your web directory, you will need to specify the entire pathname (or URL), beginning with "http://". For example, take a look at this link to a CD music site:<A href="http://www.tunes.com">A Music Site</A> A Music Site
You are also able to place bitmapped images (i.e., pictures or graphics) into your documents. Many of these kinds of files will have the extensions GIF, JPG, or BMP to indicate that they are graphics files (e.g., "rock.gif" could be a picture of a rock).
You should take care to name your graphics files with these endings so that both you and the browser can recognize them when placing them into HTML documents.To include an image into your page, simply enter the following image tag that includes your graphics file wherever you want your picture to appear in your document:
<IMG SRC="ImageName">Here, ImageName is the name of the graphics file you want to include, e.g., bullet.gif, me.jpg, snowman.bmp, etc.Again, if your picture file is in a subdirectory, you will have to specify that in the SRC command inside the <IMG> tag (e.g., <IMG SRC="gifs/ball.gif"> places the file ball.gif from the directory gifs into the page).
Image Sizing
You can make your included images a specified size by putting HEIGHT and WIDTH attributes into the <IMG> tag. These are actually the number of pixels (screen dots) you want the dimensions of the picture to be. The following example includes a picture of a book (from directory gifs) of size 50 by 50 pixels:<IMG SRC="gifs/book.gif" HEIGHT=50 WIDTH=50>This looks like this:![]()
Aligning Images
When you are displaying your images, you can decide whether you want your text to be aligned to the top (ALIGN=TOP), bottom (ALIGN=BOTTOM), or centered (align="center") with respect to your image. It is probably best to try a few of these out when placing your images to see which looks best for you.
Text is by default aligned at the bottom of your images.
You can align your text at the top of the image by using the ALIGN command within the <IMG> tag: <IMG SRC="gifs/book.gif" HEIGHT=50 WIDTH=50 ALIGN=TOP>. Note that only the first line is actually placed at the top, and the rest continues along the bottom.
You can align text in the center using a similar technique. (<IMG SRC="gifs/book.gif" HEIGHT=50 WIDTH=50 align="center">) Again, only one line is centered with respect to the image.
- Another set of options comes from using align="left" or align="right" to move your image to one side of the page or the other. The advantage of these choices is that the text will flow around your image easily.
<P> <IMG SRC="gifs/book.gif" align="right"> <IMG SRC="gifs/book.gif" align="left"> ... include text here ... </P>As can be seen, the text flows around the images easily. The fact that one image was defined before the other doesn't really make a lot of difference, they are still aligned. What is important is that the text can still flow around them, and will continue even after the bottom of the image is reached. The previous commands can be modified further to allow for additional control over text and image placement.
![]()
A good practice to get into is to provide a link on your page(s) for web readers to mail you with suggestions or comments. This is done by placing themailto
attribute within an anchor tag. For instance, to set up a link to mail to you, you could do the following:<A href="mailto:YourEmailAddress">Your Name</A>The example below will send mail to one of your TAs:Mail <A href="mailto:dahlen@cs.umn.edu">me</A>.This will look likeMail me.
Images as Backgrounds
You generally have only one choice when deciding how to specify the background for your page(s). Most of the recent browsers can load images as backgrounds, but it is important that you make sure that your text can be read easily when placed on top of the image.A browser can create a background from a small image by a process called tiling, whereby the image gets repeated across and down the width and length of your page to fill the browser window. The command you use is called BACKGROUND, and you place it within the <BODY> tag of your HTML document:
<BODY BACKGROUND="gifs/image.gif">Background Color
As a default, your browser sets the text you type into an HTML document as black and the background is grey. You are free to change these things as well. The command to use is BGCOLOR to change the background color and TEXT to change the text color. These are placed within the <BODY> tag.<BODY BGCOLOR=white TEXT=red>If you want to place a background color for your page that is not primary or secondary, you can use a 6-digit hex number to specify this. For instance,<BODY BGCOLOR="#993366" TEXT="#ff00ff">You can even change the color of unvisited (LINK), active (ALINK), and visited (VLINK) links:<BODY BGCOLOR="#55ee55" TEXT="#ffffff" LINK="#0000ff" ALINK="#ffff00" VLINK="#ff00ff">FYI - Hex Color Codes
The 6-digit hexadecimal numbers represent colors on an RGB (red, green, blue) scale. Thus, the 6 digits are really just 3 2-digit hex numbers in a row. (The first two on the left is for specifying the red spectrum, the second two is for the green spectrum, and the last two is for the blue spectrum.) The ranges go from 00 to FF, with FF meaning the most color from that particular spectrum. For instance, 000000 is white (absence of color), FFFFFF is black (presence of all color),FF0000 is red, 00FF00 is green, and 0000FF is blue. These are, of course, pretty difficult to deal with without a reference. Below is provided an RGB chart to help you decide on various colors for your background.RGB Color Chart
Information regarding tables will be provided at a later date.
You have now completed the HTML intro!