Advanced HTML
Creating Your Own Home Page: Advanced TechniquesTable of Contents
- More HTML Tags
- Comments in HTML
- More on the Anchor Tag
- More on the Image Tag
- Using Custom Backgrounds
- Creating Tables in HTML Documents
- Using and Creating Forms
- Image Maps
- CGI Scripting
Comments in HTML Remarks or comments are used to document authors comments or HTML design and techniques. When the remark or comment HTML <!--text here--> is ignored by browsers. A commonly seen comment identifies the author of the HTML document.
<!-This HTML document was written by Jane Doe, MTSU->
Comments are not displayed on the HTML document but may be seen by viewing the HTML source.
More on the Anchor Tag In the beginning HTML workshop, we learned how to use the anchor <A> tag to link our WWW pages to other WWW pages. We covered the use of the HREF attribute and created various links to remote pages in our WWW page.
| <A></A> | The "A" stands for anchor, which means "your hyperlink is here." Like the <IMG> tag, the anchor tag takes a series of arguments: NAME: creates a bookmark in a document. |
The NAME="text" attribute of the anchor <A> tag will allow you to link to specific areas in the current HTML document. This type of link is particularly useful when you have an long HTML document with a table of contents. To practice using this attribute, we create an HTML file called advanced.html. Enter the following text and tags:
<HTML>
<TITLE>Advanced HTML Topics</TITLE>
<HEAD><CENTER><H1>Advanced HTML
Topics</H1></CENTER></HEAD>
<BODY>
<H2>Table of Contents</H2>
<A HREF="#TABLES">Tables</A> <BR>
<A HREF="#FORMS">Forms</A> <BR>
<A HREF="#MAPS">Image Maps</A>
<P><HR SIZE=5>
<A NAME="TABLES">
<H2>Tables</H2></A>
<P><HR SIZE=5>
<A NAME="FORMS">
<H2>Forms</H2></A>
<P><HR SIZE=5>
<A NAME="MAPS">
<H2>Image Maps</H2></A>
<P><HR SIZE=5>
</BODY>
</HTML>
More on the Image Tag In the beginning HTML workshop, we learned how to use the IMG command to display in-line graphics on an HTML document. We used the IMG tag with the ALT and SRC attributes to display images in index.html and perinfo.html.
| <IMG></IMG> | The <IMG> tag lets you load inline images. (Remember the more images a document has, the longer it takes to load.) To load a graphic and control its placement, some ancillary commands are required: ALT: indicates text to be displayed if a browser offers no graphics support. |
You can hyperlink images as well as text. (In advanced.html, add the following bolded HTML text before the closing body tag </BODY>.)
<A HREF="index.html"><IMG SRC="home.gif" ALT=" "></A>
Your image will be outlined and "clickable". It will return you to your home page. You can remove the border from a clickable image by adding the attribute BORDER=0 to the IMG tag.
Using Custom Backgrounds If you have been cruising the web, you have probably encountered many WWW pages that have custom backgrounds. To add a custom background to your own page, you must first obtain a .gif or .jpg file that you would like to use. There are several samples at http://www.mtsu.edu/~htmlclas/background.html. To include a background on your page, select one of the sample backgrounds, download it to your hard disk, ftp it to your account, and rename it backimage.gif. Don't forget to change the permissions on the file. In the advanced.html file, you will need to add the following line after the <HEAD> tag:
<BODY BACKGROUND="back.gif">
After making this change, you can save the advanced.html file and then load it in Netscape to view it.
Remember to test your background and make certain that text is clear and legible. Very dark or "busy" images typically make poor backgrounds.
Note: If you see a background on someone else's page that you would like to use, you can view the source to determine the name of the .gif or .jpg file that they are using to create the background, go to it in Netscape by typing its URL in the location box, and then copy to your personal computer. After you have the file on your personal computer, you can ftp it to your account, change its permissions, and then use it as a background in your HTML documents.
Creating Tables in HTML Documents Tables are not support by many older Web browsers but may be displayed using many current browsers such as Netscape 1.12. The text in tables will be displayed in text browsers such as lynx in a continuous format.
| Table Tag | Description |
| <TABLE> | Defines a table. BORDER: adds borders to separate rows and columns in tables. |
| <TR></TR> | Marks the start and end of a table row. The </TR> closing tag is optional and is rarely used. |
| <TD></TD> | Encloses a cell of table data. COLSPAN: Modifies the number of columns a cell will span. |
| <TH></TH> | Encloses a cell of a table heading. COLSPAN: Modifies the number of columns a cell will span. |
To practice, we will add a two row, two column table to the advanced.html in the section marked tables. The table will be centered. It will contain images and four links to helpful sites for people who are learning to create their own WWW pages.
This section centers the table, gives it a title, and defines the border size:
<CENTER>
<H3>Helpful Web Sites for HTMLers</H3>
<TABLE BORDER=10>
This section defines the first row and its two columns:
<TR>
<TD>
<IMG SRC="blueball.gif" ALT=" ">
<A HREF="http://www.contrib.andrew.cmu.edu/~ender/ed/rg/"> Realm Graphics </A>
</TD>
<TD>
<IMG SRC="blueball.gif" ALT=" ">
<A HREF="http://www.mtsu.edu/mtsu/web/help/html.html"> HyperText MarkUp Language (HTML) </A>
</TD>
</TR>
This section defines the second row and its two columns:
<TR>
<TD>
<IMG SRC="blueball.gif" ALT=" ">
<A HREF="http://www.alaska.net/~ckayaker/design.html">Developing Accessible Web Pages</A>
</TD>
<TD>
<IMG SRC="blueball.gif" ALT=" ">
<A HREF="http://www.worldwidemart.com/scripts">CGI Script Archive</A>
</TD>
</TR>
These last two tags end the table and turns centering off.
</TABLE>
</CENTER>
Using and Creating Forms
Forms in your WWW pages will give you a mechanism for gathering information from people who visit your page. Like tables, forms are not supported by many of the older browsers. You will need to experiment with various browsers to see how they handle forms on your WWW page.
| Form Tag | Description |
| <FORM> | Defines a form. ACTION: Defines the cgi-bin script or program to execute the incoming data. |
| <INPUT> </INPUT> | Defines the type of input field. SUBMIT VALUE: Alters the text on the submit button. RESET VALUE: Alters the text on the submit button. IMAGE SRC: Defines URL for the image. HIDDEN NAME: Defines the variable name. RADIO NAME: Defines the variable name. CHECKBOX NAME: Defines the variable name. TEXT NAME: Defines the variable name. |
| <TEXTAREA> | ROWS: Defines the height of the text area. |
| <SELECT> | NAME: Defines the variable name. |
| <OPTION> | SELECTED: Makes the item selected by default. |
To practice form creation, we will add a form in the forms section of the advanced.html document. The following statement defines the form with the ACTION attribute defining the cgi-bin script (this is a program that was written by someone else and it will create a WWW response page for people who submit forms and then mail their responses to you) that will execute the incoming data and the METHOD defining that the incoming data will be stored so that it may be parsed one variable at a time.
<FORM METHOD="Post" ACTION="/cgi-bin/users/oit/FormMail.pl">
The following line lets the FormMail.pl CGI script know where to mail the completed forms. Be sure to put YOUR e-mail address as the VALUE.
<INPUT TYPE="hidden" NAME="recipient" VALUE="youracct@mtsu.edu">
Next, we will add a couple of text input areas for name and e-mail.
Name:
<INPUT SIZE=50 INPUT TYPE="text" NAME="Name "><P>
E-mail:
<INPUT SIZE=50 INPUT TYPE="text" NAME="Email "><P>
Now we will practice using checkboxes:
I think your WWW page is: <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="Page Rating" VALUE="Most Excellent"> most excellent.
<LI> <INPUT TYPE="checkbox" NAME="Page Rating" VALUE="Pretty Good">pretty good.
<LI> <INPUT TYPE="checkbox" NAME="Page Rating" VALUE="Average"> average.
<LI> <INPUT TYPE="checkbox" NAME="Page Rating" VALUE="Needing Work">in need of some major work.
</OL>
The following will allow us to try using preset selection with the SELECT tag.
I think your WWW page needs:
<SELECT NAME="Page Needs">
<OPTION SELECTED> To Be Viewed By All
<OPTION> Better Links
<OPTION> More Images
<OPTION> Additional Color
<OPTION> A Cooler Background
<OPTION> A Miracle
</SELECT>
<P>
Now we will add a large text area for additional comments.
<TEXTAREA NAME="Comments" ROWS=20
COLS=60></TEXTAREA></P>
To finish the form, we must add the following:
<INPUT TYPE="reset" VALUE="Reset">
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
Image Maps Image maps are images that allow you to hyperlink to various web locations depending on the image spot that you click. Unlike a .gif or .jpg file that is surrounded by an anchor tag, the image map breaks a graphic into discrete regions as a map of individual hyperlinks.
To build a clickable map, you must:
- Create or locate a usable image.
- Create the "map file" which defines the pixel coordinates of each point on the boundary of the regions you want to create. This can be done by a variety of shareware applications such as MapEdit for Windows or Web Map for the Macintosh.
- Establish the HTML information in your WWW page (advanced.html) to link the image and the map file.
- Using your image map application, open the image file: sample.gif
- You now have a copy of sample.gif showing and are ready to define the clickable areas. Select a definition tool (circle, rectangle, or polygon).
- Set the following URLs with the appropriate areas:
http://www.mtsu.edu
http://www.mtsu.edu/~htmlclas
http://www.mtsu.edu/yourdepthomepage
- Set the default URL to the following:
http://www.mtsu.edu/~youraccountname/advanced.html
- You will need to save the text file with the URLs to a file named: sample.map.
- You will need to ftp both sample.gif and sample.map to your account and change the read permissions on the files.
- Now you are ready to edit the advanced.html file to include the necessary HTML for the image map. Enter the following bolded text in the image map section:
<CENTER>
<A HREF="http://www.mtsu.edu/cgi-bin/imagemap/~youraccount/sample.map">
<IMG SRC="sample.gif" ISMAP></A>
</CENTER> - Now you are ready to load your page in Netscape and test it!
CGI Scripting To have mail sent to use from our WWW page or to have form handled (responses parsed, presented on a WWW page, and mailed to you), CGI script must be run. Fortunately, the CGI script to perform these functions already existed in a cgi-bin directory that you could access. CGI stands for Common Gateway Interface and its scripts or programs allow for true interaction between browsers and servers across the Web.
To add CGI script to a cgi-bin directory, you must first complete the approval form available from ITD. At MTSU, this type of access is available to those with faculty and staff accounts only.
Common uses of CGI include counters, guest books, form handlers, search engines, and randomizers. CGI typically is written by programmers who have had substantial experience with UNIX. If you need counter or form handling CGI script, you can often download someone else's and modify it. The CGI script archive in your table (http://www.worldwidemart.com/scripts) offers an excellent source of ready-to-customize CGI programs.
Adding a Visitor Counter
A counter may be added to your page to record and display the number of people who have viewed your home page.
A typical counter would appear as below.
You are visitor number:
To add a counter, input the following text and inline image tag.
<img src="http://www.mtsu.edu/cgi-bin/nph-count?width=5&link=http://www.mtsu.edu/~youraccount/&increase=1"
alt="counter"<font size=2>
615-898-5345
* when classes are
in session.
2011 Middle Tennessee State University, a Tennessee Board of Regents institution 1301 East Main Street, Murfreesboro, TN 37132-0001 USA +1.615.898.2300
Middle Tennessee State University, in its educational programs and activities involving students and employees, does not discriminate on the basis of race, color, national origin, sex, religion, or age. Furthermore, the university does not discriminate against veterans or individuals with disabilities.
 |
 |