The first necessary tag is the <HTML> tag. Its end tag is </HTML>. The very first thing in your document must be the <HTML> tag, and the very last thing in your document must be the </HTML> tag. This tag tells the browser what kind of document it is downloading.
There are two parts to an HTML document, the head and the body. The head section is defined by the <HEAD> and </HEAD> tags. Inside of these two tags you should include a <TITLE> and </TITLE> tag. The title tag provides the title which comes up at the top of the browser window. Other things can be put in the <HEAD> section, but most are more advanced than our purposes require.
The body of the document is defined by the <BODY> and </BODY> tags. Anything that you actually want to appear on the page (e.g., text and images, animations, etc.) should be included inside the body tags.
So, you now have the tools to create a very, very, simple web document.
<HTML>
<HEAD>
<TITLE>Very, Very Simple Web Page</TITLE>
</HEAD>
<BODY>
This is my very, very simple web page!
</BODY>
</HTML>
Enter the above text into SimpleText and save your file to the disk as mypage.html, in the same area as this document. Then in Netscape go to file -> open file, and select mypage.html to preview your work.
Many tags have attributes that can be adjusted to create desired effects. The basic format for an attribute is:
<TAG ATTRIBUTENAME="attributevalue">...</TAG>
An example of an attribute for the <BODY> tag we have already seen is that of a document's background color. The name of the attribute is BGCOLOR and it can have any of many color values. There are 16 original colors that the browsers support:
Use SimpleText to add the BGCOLOR attribute to your mypage.html document and then preview in Netscape.
e.g., <BODY BGCOLOR="aqua">
You can also define colors as a hexadecimal RGB number, such as
#00FF00 for green, but this is generally a little advanced for our
purposes.
Now the heart of the internet is its content, especially the textual information that is stored in the documents. To make your text look good, there are many HTML tags used to format text. The most important are detailed below.
|
<P> |
This tag begins a new paragraph. If you'd like a nice space between two lines, use this tag between them. (Without this tag, all of the text would just run together.) The end tag </P> is optional. |
|
<BR> |
This tag makes a line break. It gives you a small space between two lines but it is still greater than if no tag is used. This tag has no end tag. |
|
<B>...</B> |
These tag makes your text bold. |
|
<I>...</I> |
These tag makes your text italic. |
|
<TT>...</TT> |
These tag makes your text monospaced. |
|
<U>...</U> |
These tag makes your text underlined. |
|
<CENTER>...</CENTER> |
These tags center your text (they can also center images and movies). |
|
<H1>...</H1> |
These tags make your text Bold and Large |
|
<H6>...</H6> |
These tags make your text Bold and Small (legal stuff?) |
|
<SUP>...</SUP> |
These tags make text superscript |
|
<SUB>...</SUB> |
These tags make text subscript |
|
<BLINK>...</BLINK> |
These tags make text blink (PLEASE USE SPARININGLY! IT SOON BECOMES VERY ANNOYING!) |
|
<FONT COLOR = "colorname">...</FONT> |
These tags display the text in the selected color. |
Use SimpleText to add some text to the body of mypage.html. Then use some of the above tags to change the appearance of your text. Again preview your page in Netscape.
Many web pages use horizontal rule lines to separate different sections of documents and to add coherence to a page. The following are examples of horizontal rules:
|
|
To create a horizontal rule you use the <HR> tag. (There is no end tag). This will produce a rule line like the first one above.
For more interesting rule lines you can use the HEIGHT, WIDTH and ALIGN attributes of the <HR> tag. Rules are normally aligned to the center, but can also be ALIGN="RIGHT" or ALIGN="LEFT". The Height and Width attributes can be in pixels or percentages, and they are specified by HEIGHT="12" or WIDTH="34%". The HTML for the rule lines above is below.
<HR WIDTH="50%" ALIGN=LEFT>
<HR SIZE="12" WIDTH="80%">
<HR SIZE="12" WIDTH=250 ALIGN=RIGHT>
Use SimpleText to add some rule lines to the body of mypage.html. Then preview your page in Netscape.
Linking to Other Places/Documents
The great thing about HyperText is the ability to have one
document or place link to another. There are basically three types of
links: within a document, within a local directory, or to outside
sources
Links Within a Document
Links within a document are useful especially when you have a very large document or one made of many parts which won't necessarily be accessed in order. There are a few good reasons to have large single documents, the first being that they usually take up less space than separate pages. Another reason is that the links you create won't "break" or not work.
To create a link to a section within a document, you must first choose where you wish the link to go to. At that point you will create and name an anchor using the <A> tag and its NAME attribute.
Using SimpleText, right before the </BODY> tag in mypage.html, insert an anchor called "pagebottom". That is,
Now there is a place in the document called pagebottom that you can link to.
Now we will link to this place. Again, we will use <A> tag. This time we use an attribute called HREF (as in HyperText Reference) to tell the browser where to look for the place we want to link to.
Using SimpleText, right after the first <BODY> tag, insert the following "code."
The text between the <A> and </A> tags will be underlined and set in a different color to distinguish it as a link. When you click on the text in Netscape, the browser will take you to the bottom of the page.
Preview mypage.html in Netscape and test out your new link.
Links to Other Local Documents
Links to local documents are very similar to links within documents. The same <A> tag is used, but the HREF is the name of a document. Let's make a link from your HTML document to this electronic manual, whose first page is called index.html.
Using SimpleText, insert the following "code" somewhere within the body of your HTML document.
Now open up mypage.html in Netscape and test out your new link. The word "here" should be underlined and highlighted in a different color. When you click on it, the browser should bring up the title page of this manual.
In this way you can link to any other documents contained in your
folder.
You can link to outside sources in much the same way as you can link to local ones. When you link to outside sources, you need to use the complete URL of the document you are linking to. The URL is the Uniform Resource Locator, in other words, the internet address, like the ones you see after commercials and hear on the radio.
If you wanted to link to Apple's home page, you would include the following link in your document:
In this case the word Apple is the link and in a browser will come up underlined and highlighted in a different color.
Using images is very similar to using links. Images are added to documents using a special <IMG> tag. It has no end tag. The <IMG> tag has two important attributes. The first is the ALT="ImageName" attribute. This attribute gives a title to the image so that if someone visits your site with a text-only browser or with "auto-load images" off, they will know what your images represent.
The most important attribute of the image tag is the SRC attribute. This attribute tells the browser where to find the image on the other computer. SRC represents a path name, that is an internet address (URL) such as http://www2.shore.net/~lhs/. There are some images already saved on the disk in a folder named images, including this one below, called happy.gif:
To place this image in your document, you need to use this tag
The forward slash after the word 'images' indicates that the document happy.gif is inside of a folder or directory called 'images'. The ALT attribute specifies a title for the picture. This allows those users who have images turned off or who use text based browsers (like Lynx) to understand what the picture is of. It is bad form not to use these attributes.
Use SimpleText to add this image to mypage.html. You can place <CENTER> tags around it to center it on the page. Preview your page again in Netscape.
As long as your HTML document stays in the same folder where the images folder is, you can use this same method to add any image in the images folder to the HTML document. You can also add images from other sites by using their URL for the SRC value, but this clogs the network.
Encoding Other Types of Documents for Downloading
Say you have a ClarisWorks file (any file, really) that you want to share with the rest of the world. Browsers don't understand ClarisWorks documents, but browsers can be used to copy such files from computer to computer.
To do this, follow the directions below:
That's it! When the browser sees the ".hqx" suffix at the end of the file, it automatically knows to save it and sometimes will even call the program Stuffit Expander to open it.