To denote the various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. Minimal HTML tags are listed below.
Required elements are shown in this sample bare-bones document:
<html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short, it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body> </html>The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags).
For example, you might include a shortened title of a book along with the chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Installation. Generally you should keep your titles to 64 characters or fewer.
HTML has six levels of headings, numbered 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>.
The syntax of the heading element is:
<Hy>Text of heading </Hy>
where y is a number between 1 and 6 specifying the level of the heading.
At the end of each paragraph, after the period, put <P>. If you don't , you'll end up with one solid block of text.
In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as
<P>Welcome to the world of HTML. This is the first paragraph. While short, it is still a paragraph!</P>
A Web browser starts a new paragraph only when it encounters another <P> tag.
HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
Here is a sample hypertext reference in a file called US.html:
This entry makes the word Maine the hyperlink to the document MaineStats.html, which is in the same directory as the first document.
Pictures need to be saved on a disk with a one word name that is less than eight letters, then a period, then the extension showing the type, either gif or jpeg, for example:
Any picture you save off the web will already have this. To put a picture anywhere in the paper, put:
To include an image, enter:
where ImageName is the URL of the image file.
The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Filenames of X Bitmap images must end with .xbm; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png.
Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image.
However you only have to create a small piece of the image. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. In sum you generate one image, and the browser replicates it enough times to fill your window. This action is automatic when you use the background tag shown below.
The tag to include a background image is included in the <BODY> statement as an attribute:
For example, here's the background HTML for this page:
I put this code in right after the title at the top of the document.
If you want to center something on the page, like a picture or the title of your paper, use
<CENTER> Whatever you want centered </CENTER>.
NOTE: If you are going to put a page on the Web, all I'll need is a version of your paper with these html commands included. Save the revised paper on a high density (NOT a double density) disk as an ASCII or SIMPLE TEXT or TEXT ONLY WITH LINE BREAKS file, and give it a file name like this: your last name.htm
The disk should also have any pictures you want to use saved on it too.
By the way: you can see the HTML for any webpage you're looking at on Netscape by clicking on the "view" option at the top of the page and then clicking on "document source." Also, if you have any pictures that you'd like to have scanned in, the staff at the CLC (in 201 Armstrong) have a scanner that does both color and black and white, and they will help you scan and save the image. Be sure to bring along a disk. Several other labs on campus can help with this, too.
Return to the main Computing Help page