|Information Systems||College of Business Administration||University of Missouri - St. Louis|
This is the size of <H1>.
This is the size of <H2>.
This is the size of <H3>.
This is the size of <H4>.
This is the size of <H5>.
This is the size of <H6>.
Another way to affect the size of text is to use a command, "font size". This allows you to increase or decrease the size of the font relative to the currently selected size. The format is <font size = +x> or <font size = -x> where x represents the increment or decrement in size. When you want to return to the original font, you need the command </font>.
If we begin with <H4> size text, this is the effect of increasing the font size by 1, this is the effect of increasing the font size by 2, this is the effect of increasing the font size by 3, this is the effect of decreasing the font size by 1, this is the effect of decreasing the font size by 2, and this is the effect of decreasing the font size by 3.
If we move just
The use of <p> leaves additional space as above.
In addition, HTML will move to new lines when you use one of the "h" commands to affect the size of the text
as it did just now.Use of the <font size=...> command does not move the text to the next line. Similarly
Another way to demark spaces between text is with the line command. In its simplest form, it is just <hr>. The result is that etched
line shown below.
For this document, the command was:
Of course, you can change the color of specific text individually too. That color was #009900. This helps to highlight specific ideas. To change particular text, precede the text with the command <font color="#xxxxxx"> and place a </font> at the point where you want to return to the basic color for the page. Remember, these fonts numbers are in a computer numbering scheme referred to as hexidecimal (which simply means base 16), so they can look unusual; the number for the red is ff0000. Be careful about mixing too many colors.
If you would rather control the background color with a graphic, then do it. You specify this in the "body" command as well. You can use it alone, such as that below,
or with the colors noted above,
One thing that makes the World Wide Web special is its ability to link to other sources immediately. This is done with hypertext links. The command tells the page what words or images to link, and what page to load if the link is selected. As with many HTML commands, it has a beginning and an end. The words or images between the two are the "hot" links, or the places where a person may click a mouse and move directly.
At the beginning, you provide the notation that a link is coming with <a href="......">. At the end of the text or image that you want connected, you provide the ending command, </a>. The .... in between the quotes refers to the URL of the page you want connected. If you wanted to skip to the IS 5800 home page, you would provide the command <a href="http://www.umsl.edu/~sauter/5800"> at the beginning and </a> at the end of the text linked (which, in this case was everything after the word "command" and before this parenthetical statement).
You can use absolute links by providing the full URL (including the http:// at the beginning) of the page. This is safe to be sure you always get to a particular page, even if you just copied the link from somewhere else.
You can use relative links by providing the URL in terms of the location of the page referencing the URL. In our case, since this page is on the same server, and in the same directory and subdirectory as the IS 5800 syllabus, you could state the URL as <index.html> instead of the entire URL. If the desired page is in a different directory, such as my main home page, you can also state the directory structure. In the case of my home page, it could be stated as </~sauter/index.html>. This allows you to reference pages within your own directory easily, even if you change the host of the web pages.
You can also have "external" links and "internal" links. External links go to some other page, and use the notation shown above. Internal links provide navigation within a page, such as the index links at the top of this page. To use an internal link, you must first "name" the location to which you want to link. This is done with the <a name="...."> command at the beginning of the location to which you want to link, and the </a> link at the end of the location to which you want to link. For example, the heading of this section, Hypertext Links, really appears as
This identifies a specific location on the page to which anyone could link directly.
To provide that direct link internally, you use the "#" to indicate that the location is a named location. Hence, to link to it directly, you would have the code
where the text in green actually appears between pointed brackets.
To use this special location from another page, you would simply use the entire URL with the new information
where the text in green actually appears between pointed brackets.
One special form of link is the <a href="mailto:.....> link. This allows the user to send email to the specified account automatically with the click. The information between the quotes is your email address. For example, I might use "mailto:Vicki.Sauter@umsl.edu" to allow mail to come to me. The full form of the command is <a href="mailto:Vicki.Sauter@umsl.edu">. Of course, as with any hypertext reference, you must finish it with </a>.
Use these links a lot to help explain your page, or to provide more information about topics you have selected.
There are some options you can invoke to affect how that image appears. One is the alignment, indicated by the keyword "align" to control either the vertical alignment,
or the horizontal alignment,
You could make it smaller by adjusting one of these, say the width=35
or the height=55
or by specifying both of them. This might be particularly important if you use an image from someone else's page.
Finally, it is good form to specify some text equivalent that could be displayed if the image is not displayed (either because it is not available, or because the user has turned off the automatic loading of images. To do this, specify the option alt="..." where the text between the quotes would be displayed. In our case, we might have alt="UM-St. Louis" to be displayed in the absence of the UM-St. Louis logo.
Some sources for images are:
Always, always document your page. Some versions of browsers do not print out the URL with the page. In those circumstances, unless you have it stated on your page, someone would not know how to find your page again. Furthermore, the page might be loaded into a "frame" of another Web page. In this cirucmstance, the user would not know how to find your page again without the documentation.
Generally, the documentation should include at least the URL, the page owner and how to contact that person, and the last time the page was updated. The form that I use most often is:
This page was last modified on: Sunday, June 17, 2006 01:18:40 *
URL: http://www.umsl.edu/~sauter/help/primer.html *
Page Owner: Professor Sauter (Vicki.Sauter@umsl.edu)
© Vicki L. Sauter. All rights Reserved.
Use of a table is the best way to get control over the location of items on the page.
The first command for a table is: <table>. This tells html that you are about to define a table format. If you just use <table> then you will have a basic table with no borders (or lines between cells), and will be sized as a function of the size of the longest text, the largest image and/or the size of the window in which the browser is open. Generally, that is bad. The following options allow you to control some of those features as shown below.
Each cell of the row must be declared by having the command <td> at the beginning of the definition of the cell and </td> at the end of the definition of the cell.
Hence, the syntax for the last table above is:
The width and height of individual rows or individual cells can be controlled by using the "height" and "width" options associated with the "tr" and "td" commands, respectively--regardless of whether you used them with the table command or not. This gives you further control of the look of your table.
You can also change the background color of a cell using the "bgcolor" command with the appropriate RGB after it. For example, to have the first column red,
The graphic above is what we call an "image map." It allows the designer to create regions on which the user can click and activate a hypertext link. There are three critical documents that must be identified: (a) the page; (b) the graphic; and (c) the map. The page is simply the document on which the graphic is displayed. In the case of this document, it is http://www.umsl.edu/~sauter/480/primer.html. One creates this page generally in the same fashion as any other page. What is different is how you define this particular entry. In this example, the underlying code is:
The first line identifies the location of the instructions for interpreting the graphic, called a map. This particular one is located in the 480 subdirectory of the ~sauter account and is called "sample.map". The new requirements for the URL are to use the keywords, "cgi-bin/imagemap" between the node and the account to tell it to interpret it as an imagemap.
In the second line of the new code, you identify your image as you would any other image. However, you must specify the option, "ISMAP", to tell the browser to interpret it as a map.
The second document is the graphic itself. This can be any image that is located in the user's directory. In this case, the image is located at http://www.umsl.edu/~sauter/480/graphics/map_example.jpg. After creating the image, you must define the corner points of the region on which you want to create the hyperlinks. If you do not have a graphics editor, you can look in Netscape by moving the mouse to the position, and noting the coordinates on the status bar at the bottom. Of course, this only works after you have defined it as an image map. Hence, if you have no clue, then just put down anything, check it in Netscape, and fix the map. In this example, the entire region located within the orange boxes will be linked. This means the user can click on the button, the words, or somewhere near, and still have the same effect.
The third document is the map itself. This document is a text file with the specifications for the regions and the document to which each region is linked. For example, for the image below, the map appears to be:
rect http://www.umsl.edu/~sauter/help/Links_HTML.html 16,8 226,39
rect http://www.umsl.edu/~sauter/help/primer.html 16,40 226,71
rect http://www.umsl.edu/~sauter/help/index.html 16,72 226,100
rect http://www.umsl.edu/~sauter/help/Links_java.html 16,101 226,127
rect http://www.umsl.edu/~sauter/jelp/Links_CSS.html 16,128 226,160
The keyword, "rect," indicates that the region being identified is rectangular. (If your region is irregular, then use the keyword "poly".) The numbers at the end of each line identify the left, upper coordinates (separated by a comma) and the right, lower coordinates (separated by a comma) of the region. Note there is only a space between the two sets of coordinates. (If you used the polygon option, you must specify the set of coordinates of each vertex.) The URL in between identifies the page to which the browser should move with the click. In addition, there is a default region defined in the event that the user clicks on some region other than the ones identified.
For more information about developing Web Pages, please visit my Links to HTML Help Page.
| Go to UM-St. Louis Home Page | College of Business Page | IS Home Page | Resource Page |