CEEn 414 - Civil Engineering Applications of GIS

Groups
 

Account Login

HTML Tips

Purpose: This page may suggest few issues that might be of interest to you while creating a homework page for the class.

Generally, you can use any web page creator package to generate your html files. Most packages have more or less the same features. As examples, you can use Microsoft FrontPage, Netscape Composer, Dreamweaver...etc

Backgrounds are usually of your choice. Any software package will come with default and template backgrounds. The backgrounds of multiple page web site do not have to be the same.

Horizontal lines can be added by selecting Horizontal Line from the Insert menu.  You can edit the properties of the line by double clicking on it.

LINKS

You can create links by selecting the desired text and selecting the Link tool on the tool bar (or right click the selected mouse and choose Hyperlink, Links, Properties.... depending on the package).  Then enter the URL of the location that you want to link to.  Here is a link back to the Homework & Info page.  You can also edit existing links in your package by right clicking on the link and selecting Link Properties (or any other similar command).

You can create links to send mail.  This is done in the same way as adding other links, except you will need to enter mailto: and then the email address instead of a URL.  Here is an example of a link to Dr. Nelson's email:  mailto:jimn@byu.edu.Some software packages have a special feature to link to an email though.

You can create links to different parts of the same page.  First you need to insert a target (or "bookmark") at the location of the page that you want to jump to.  This can be done by selecting the Target (or bookmark) tool in the tool bar (or from the Insert, or Tools menu) while your cursor is in the desired location.  A dialog box will come up in which you can enter the name of the target.   Then you can link to this part of the page in the same manner as other links, except you will just need to select the name of the target in the dialog box instead of entering the URL (usually you can also find a "Places in This Document" feature in the Hyperlink dialog of your software package).  The following links are to different headings within this page.

LISTS
INDENTING
INSERTING IMAGES
FILE LOCATIONS

BACK TO THE TOP

LISTS

There are several different ways of making lists:

1. Numbered lists can be made by selecting Format|List|Numbered

2. They can also be made by selecting the Numbered list tool on the tool bar.

   • Bullet lists can be created by selecting the Bullet list tool on the tool bar.

   • They can also be created by selecting Format|List|Bulleted

3. You can change the type of list or the bullet type by right clicking on a list and selecting Paragraph/List properties

BACK TO THE TOP

INDENTING

You can indent your paragraph by selecting the Increase Indent tool on the tool bar or by hitting CTRL = (or Tab a whole selected paragraph as opposed to the first line, depending or your software).  This will indent your entire paragraph.  You can use this on lists to make sub-lists.  This is shown in the LISTS section on number 2.

You can decrease the indenting on your paragraph by selecting the Decrease Indent tool on the tool bar or by hitting CTRL - (or Shift + Tab the whole paragraph).  This will decrease the indenting on your entire paragraph.

    Hitting the TAB key on just the first line of a paragraph is equivalent to hitting the spacebar 4 times.   It will not indent the entire paragraph (unless the whole paragraph is selected) but will only insert 4 spaces from the location of the cursor when the TAB key was selected.

BACK TO THE TOP

INSERTING IMAGES

To insert an image, select the Image tool on the tool bar with your cursor in the desired location (you can also select Insert->Picture-> From File... from the "Insert" menu), then specify the name of the image.  It is easiest to have the image in the same location as your html document.  This way, you only need to enter the name of the image in the insert image dialog instead of the entire path. 

You can edit the image properties by right clicking on the image and selecting Image Properties ( or Picture Proerties).  The following image shows a watershed and its elevations as delineated by WMS.

(You can get help on capturing images for PCs at this link )

Images can also be links to other documents.  This is done by right clicking on the image and selecting Create Link Using Selected... (or a similar command) or by selecting the image and then selecting the Link tool on the tool bar.

BACK TO THE TOP

FILE LOCATIONS

Make sure that your HTML files and the associated images are stored appropriately in the WWW folder of your J:\ Drive. This should take care of everything. However, if you are saving any file that is linked to your homework page, in a local drive (C:\, D:\, a CD-ROM or a jumb drive...etc), your homework page will not work the way you intended it to,  it WILL lack those links. In this sense, the best way is to keep ALL your images and other external auxiliary files (that are needed for the *.html) saved in the WWW folder of your J:\ drive. A "soft link", where you specify the name of the file (*.jpg, ...) in the link (e.g. "myimage.jpg") and save it where the *.html file, that uses it, is located, is usually the best. Also, make sure, if you move the *.html file, to move all the associated files that are used as links with it.

Linking an image to your local; i.e. C:\, drive would make it unavailable to any other computers except the one you are working on, because simply, other computers "C:\ dive" doesn't have the image that you have it at your computer.

Also, if you move your files around, make sure you update the links in your web page accordingly.

BACK TO THE TOP