HTML stands for Hypertext Markup Language. Most of what you need for preparing documents concerns the Markup Language. The Hypertext part refers to the linking together of HTML files. Much of the power of the web comes from this provision , but it requires only a miniscule amount of learning.
The Markup Language involves special words and symbols giving instructions as to how a document is to be displayed. For example, when <I> is encountered by the browser it indicates that the text that follows is to be displayed in italics. It is like a switch that turns on italics. This means that at the end of text to be italicized you must switch off italics. You do this by including </I> at the end of the italicized section. Likewise there are switches (or TAGS as they are called) for underlining (<U> and </U>), and for displaying the text in bold letters (<B> and </B>).
The general structure of an HTML files is:
<HTML>
<HEAD> <TITLE>���.</TITLE> </HEAD>
<BODY>
�.text�.
</BODY>
</HTML>
The HEAD portion of the HTML is basically for presenting the title of the document to be used by search engines. The University wants each HTML document to display its name near the top of the page. This can be achieved by including the following at the beginning of the BODY part of the document:
<CENTER>San Jose State University</CENTER>.
The <CENTER></CENTER> tags will center the text.
You can use a simple word processor to enter the necessary tags at the beginning and end of a document you already have. You will also have to make some additions to the text itself. You will need to put <P> at the beginning of each paragraph. Web browsers will ignore carriage returns and will wrap the text to fit the screen. If you want a break in the text such as for an equation you must tell the browser to make a line break by including a <BR> tag. The <BR> tag does not have to be switched off . Likewise there is no need to indicate the end of a paragraph by a </P> tag.
This is the minimal basics of HTML. The previous material is enough information to prepare HTML documents from your existing files. There is of course much more that you can do with HTML.
You can link one HTML file to another by means for what is known as an anchor tag; i.e.,
<A HREF="http://www.sjsu.edu/depts/economics/econweb.htm">
Economics Home Page</A>.
This line in your web page file would result in Economics Home Page appearing underlined and when anyone clicks on it the browser would go to address:
http://www.sjsu.edu/depts/economics/econweb.htm
This is known as the URL (universal reference locator) for the file.
If the URL does not include the http://www.sjsu.edu/depts/economics/ part then the browser looks for the file in the same directory as that of the file it is reading.
HTML is not case sensitive except for things enclosed within quotation marks. This means it is best to avoid having to remember exactly where you used uppercase letters by using only lower case letters for file names.
To include images in a web page you need the image in the form of a gif file, a bmp file or a jpg file.
The line needed to include an image labeled sj12.gif is:
<IMG SRC=sj12.gif>.
Displayed this is:
Fonts:
There is a FONT tag that permits you to specify the size of the font, color, and font style. The sizes run from 1 to 7 with size 4 being the ordinary size and the default value. Color can be specified for the usual colors by name. To display text in very large red letters the following can be used:
<FONT SIZE=7 COLOR="red"> �.text�.. </FONT>
This gives Big Red Letters
The various font sizes are:
This display shows that if you specify a font size greater than 7, say 8, the font size is set to 7.
Unusual colors can be specified in terms of RGB (red, green, blue) which is a triple of two-digit hexidecimal numbers. Here is a file that displays a variety of colors and their RGB codes. With a little experimentation you can create the colors you want. If the RGB values are all equal then the color is a shade of gray from white (#FFFFF) to black (#000000). The minimum of the RGB levels establishes the shade of gray to which the values above the minimum adds coloring. For example, the color #FF9999 is like the gray #999999 to which pure red is added.
The background color can be specified in the <BODY> tag; e.g.,
<BODY BGCOLOR="green" >
Unfortunately HTML has not been modified to allow the use of Greek characters and mathematical symbols. There are some characters in a standard character set called Latin-1 which can be used. For example, there is a character that was used in Old English called "eth" that approximates the partial differentiation sign, ð. It is represented in HTML as ð The & indicates that a special character is being presented and the semicolon indicates the end of the special character.
The other way of handling such special symbols is to scan them into Photoshop and create gif files for them. The disadvantage of this method is the gif file do not change when the font size for the other characters is changed.
<MATH> <ABOVE> x </ABOVE> </MATH>
should produce an x with a line above it, the familiar x-bar: . Unfortunately most of the existing browsers do not recognize the <MATH> tags, so you just get an x. The same affect can be achieved in non<MATH> enabled browsers using a <TABLE> construction; i.e. <TABLE><TH>_<BR>x</TH><TABLE> which gives
| _ x |
|---|
Some of the proposed tags are:
Lists may ordered <OL>or unordered <UL>. An unordered list of the Pacific Coast states would be expressed as follows:
<UL>
<LI>California
<LI>Oregon
<LI>Washington
</UL>
This would display as:
Tables are a bit tedious to specify. The form is:
<TABLE BORDER=5>
<TH>Column Heading 1</TH>
<TH>Column Heading 2</TH>
<TR><TD>Datum A</TD>
<TD>Datum B</TD></TR>
<TR><TD>Datum C</TD>
<TD>Datum D</TD></TR>
</TABLE>
<TABLE BORDER=5>
<TH>State</TH>
<TH>Gross State <BR>Product</TH>
<TR><TD>Baja Oklahoma</TD>
<TD>$60 billion</TD></TR>
<TR><TD>East Dakota</TD>
<TD>$29 billion</TD></TR>
</TABLE>
This would display as:
| State | Gross State Product |
|---|---|
| Baja Oklahoma | $60 billion |
| East Dakota | $29 billion |
Browsers in formatting usual HTML code put only one space between words no matter how many spaces there are in the text. Additional spaces can be included by putting in the code for a nonbreaking space, which is .
Sometimes the above procedure is awkward and tedious. An alternative is to use the preformatted tag <PRE>.....</PRE> This tag includes all the spaces and line breaks. The drawback is that the font used is rather drab. However, other tags can be used within these tags.
Here is how the set of frames in which the pages is divided into an upper frame occupying 40% of the page and a lower frame occupying 60% of the page would be created.
<FRAMESET ROWS="40%,60%">
</FRAMESET>
These frames do not have any content. To give them content the <FRAME> tag is used. Suppose there are two HTML files called upper.htm and lower.htm. The content of these two files will be displayed in the frames by means of the following code.
<FRAMESET ROWS="40%,60%">
<FRAME NAME="upper" SRC="upper.htm">
<FRAME NAME="lower" SRC="lower.htm">
</FRAMESET>
The contents of upper.htm and lower.htm are:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="red">
This is the upper frame.
</BODY>
</HTML>
and
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="blue">
This is the lower frame.
</BODY>
</HTML>
To see the result: Frame 0
The page can also be divided vertical, as with:
<FRAMESET COLS="30%,70%">
<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="right.htm">
</FRAMESET>
To see the result: Frame 1
Or the page can be divided horizontally and then the upper horizontal frame divided vertically as with:
<FRAMESET ROWS="40%,60%">
<FRAMESET COLS="30%,70%">
<FRAME NAME="left" SRC="left.htm">
<FRAME NAME="right" SRC="right.htm">
</FRAMESET>
<FRAME NAME="lower" SRC="lower.htm">
</FRAMESET>
To see the result: Frame 2
To divide the upper and lower frames vertically in different proportions the following code may be used.
<FRAMESET ROWS="40%,60%">
<FRAMESET COLS="30%,70%">
<FRAME NAME="upperleft" SRC="upperleft.htm">
<FRAME NAME="upperright" SRC="upperright.htm">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME NAME="lowerleft" SRC="lowerleft.htm">
<FRAME NAME="lowerright" SRC="lowerright.htm">
</FRAMESET>
</FRAMESET>
To see the result: Frame 3
Image maps allow a reader to access information from an image by clicking on links defined by areas of the image. The link areas are defined by a shape and a set of coordinates. A rectangular shape is defined by the coordinates for the upper left corner and the lower right corner. The coordinates are measured in pixels from (0,0) at the upper left corder of the window the image is displayed in.
The following code will display a map of the U.S. and southern Canada. Of course the target files for the links must be prepared separately.
<CENTER>
<MAP NAME=map1>
<AREA SHAPE=RECT COORDS="90,100,150,150" HREF=slc.htm>
<AREA SHAPE=RECT COORDS="320,80,350,100" HREF=detroit.htm>
<AREA SHAPE=RECT COORDS="350,100,400,120" HREF=pitts.htm>
</MAP></CENTER>
<IMG SRC=map1.gif WIDTH=500 HEIGHTH=400 usemap=#map1>
Click on cities to view information on their economies.
<A HREF="korea.htm#SEOUL"> Seoul</A>.
In the korea.htm file at the section targetted there would be an anchor tag of the form
<A NAME="SEOUL">Seoul
Likewise there would be a link for Pusan and a corresponding anchor tag in the korea.htm file.
The <FORM> tag is designed for taking information from the viewer and processing it to present back the results to the viewer or to pass on to the server where the file originates.
The <FORM> tag itself can contain a variety of information such as what action to executed on some event like "onclick."
The code contained between the <FORM> and </FORM> gives the structure of the Form. A key element of this is the <INPUT> tag. For example, a form to obtain the first and last name of a viewer would be created with these two lines:
<INPUT TYPE="text" NAME="firstname" SIZE=="40">
<INPUT TYPE="text" NAME="lastname" SIZE=="40">
The complete code for getting the viewers name would be:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="firstname" SIZE=="40">
<INPUT TYPE="text" NAME="lastname" SIZE=="40">
</FORM>
</BODY>
</HTML>
To see how this code runs click here. Form 1
In a real application the </FORM> would provide instructions to the computer about what to do with the name information. To see such an application click here. Form 2
For a more elaborate application of this type see, Form 3
Cascading Style Sheets serves three functions: 1. Maintain some common characteristics of a number of webpages such as background color 2. Change those common characteristics quickly and easily 3. Customize some of the HTML tags to provide for such things as indentation and highlighting.
Here is an example of a CSS file:
P {font-size:12pt; text-indent:0.2in}
H4 {margin-left:0.2in; margin-right:0.2in;
text-align:center; font-size:18pt; color:#000000; background:#FFFF00}
BODY {background:#AAFFFF; color:#000000; margin-left:0.2in; margin-right:0.2in; font-weight:bold}
The format of the CSS specifications is that there is an HTML tag word and then the new attributes values for that tag given within curly braces. An attribute value consists of the attribute followed by a colon (:) and then the value. For example, the line for the paragraph tag P says that the font-size will be 12pt (12 point) and there well be an indentation of the opening line which is 0.2in (inch).
The H4 tag is a small heading and is little used. The line for H4 in the CSS file turns the H4 tag into something very useful, an arrangement for mathematical equations in which the equation (or any other text) is indented and centered with the characters made a larger font size and highlighted in yellow.
The <BODY> tag is used to specify the background color as blue-green in the above CSS. The color attribute establishes the text color. In the above CSS the right and left indentation are also specified.
There are many more stylistic elements that can be established with CSS.
In order for an HTML file to use a particular CSS it is necessary to inclued a <LINK> tag in the HEAD part of the HTML document. The above CSS is labled ecostyle.css. The <LINK> tag to be included is as follows:
<HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL=stylesheet HREF="ecostyle.css" TYPE="text/css">
</HEAD>
Note: When using CSS it is a good idea to close paragraphs with </P>. Also it is good to include a document type line such as the following
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
A more elaborate CSS is the following:
BODY {background:#00FFFF; color:#004444; margin-left:0.5in;
margin-right:0.5in; font-weight: bold}
H1 {margin-left:0.5in; margin-right:0.5in; text-align:center;
font-size:24pt; color:#FF0000; background:#FFFF88}
H2 {margin-left:0.5in; margin-right:0.5in; text-align:center;
font-size:20pt; color:#00AA00; background:#FFFFFF}
H3 {margin-left:0.5in; margin-right:0.5in; text-align:center;
font-size:18pt; color:#000000; background:#DDAA88}
H4 {margin-left:0.1in; margin-right:0.1in; text-align:center;
font-size:18pt; font-weight:bold; color:#000000; background:#FFFF00}
P {font-size:12pt; text-indent:0.5in}
UL {background:#44FF88; margin-right:0.3in}
TABLE {bgcolor:yellow;}
TD {font-size:16pt; font-weight:bold; text-align:right}
TH {font-size:16pt; font-weight:bold; text-align:right}