More Advanced HTML Code

Questions about HTML to Contact: StudentWeb Help

Section 3.1: More on Text Types

Here are some more ways to change text. Again, you begin with a start tag and end with an end tag.

<strong> Strong is like bold </strong>

<blink> BLINK </blink>

<U> Underline </U>

<S> Strike Out </S>

You can change text by using the <font> </font> command. You need to start a tag with font, but before you put the > symbol you have to add a size statment much like the ones used in horizontal rules. This command has a few different variations which basicaly do the same thing.

For Example: 

 <font size=6> I like football </font>
Gives an output like this:

I like football

or: 

 <font size=+2> I like baseball </font>
Would give an output like this.

I like baseball

Notice that there is a difference between the two but they both will work. One cool example that you can do with this feature would be this:

NETSCAPE!

Section 3.2: Lists

Lists can be used in many ways. Two types of lists used in HTML are Ordered Lists and Unordered Lists. Both of the lists insert a tab and then, depending on the type of list, it will add a bullet or numbers accordingly.

An Unordered List: 

<ul>
<li> first item
<li> second item
<li> third item
</ul>
Looks like:

An Ordered List: 

<ol>
<li> first item
<li> second item
<li> third item
</ol>
Looks like:

  1. first item
  2. second item
  3. third item
In these two examples you should notice two things. The first being that the only main difference between the lists is the fact that the Ordered List uses <ol> and the Unordered list uses <ul>. In both examples, the "bullets" were initiated with an <li> which put the appropriate number or dot.

You may also use sublists in your page. 

<ul>
<li> item A
<li> item B
<li> item C
<ol>
<li> first item
<li> second item
<li> third item
</ol>
<li> item D
<li> item E
</ul>

Looks Like:

You can do as many sub lists as you want, BUT if you forget to put an end tag, ie: </ul> or </ol>, you will get all sorts of messed up list shapes.

Section 3.3: Graphic Commands

There are only a few graphic commands. Here is a list of most of them. They are explained below. 
<img src="http://studentweb.tulane.edu/~login_name/Your_Picture.gif">
<img align=right src="mailbox.gif">
<img align=left src="mailbox.gif">
<img align=top src="mailbox.gif">
<img align=middle src="mailbox.gif">
<img align=bottom src="mailbox.gif">
<img alt="mailbox" src=".mailbox.gif">
<img border=0 src="mailbox.gif">
<img border=10 src="mailbox.gif">
<img height=15 src="mailbox.gif">
<img width=15 src="mailbox.gif">

There are a few icons that you may use from StudentWeb they are located here 

 <img src="mailbox.gif">
This loads the image to the page. 

<img align=right src="mailbox.gif">
This alligns the image to the far right of the page. 

<img align=left src="mailbox.gif">
This alligns the image to the far left of the page. 

<img align=top src="mailbox.gif">
This alligns the text to the top of the image. 

<img align=middle src="mailbox.gif">
This alligns the text to the middle of the image. 

<img align=bottom src="mailbox.gif">
This alligns the text to the bottom of the image. 

<img alt="mailbox" src=".mailbox.gif">
If the image does not load properly, you can have text appear in its place. mailbox

When using a picture as a link a border is automaticly included 
<a href="><img src="mailbox.gif"></a>

If you choose to get rid of the border, you can use these commands. 

<a href="><img border=0 src="mailbox.gif"></a>

<img border=10 src="mailbox.gif">
When using a Picture as a link this allows you to change the size of the border. 

<img height=15 src="mailbox.gif">
With these two you can change the size of the image you are loading. 

<img width=15 src="mailbox.gif">

Section 3.4: Imagemaps

Server Side "Old School"

Imagemaps are pretty simple to set up. The first step is creating or finding an image, and the second being creating a map based off of it. Map files should have the same name as the image file. An image with the name of "filename.gif" would have a map named "filename.map"

Within the .map file you need to "map out" your picture. To do this you need to break your picture up into rectangles, circles, or straight edged polygons.

The map defines the shapes and also where each shape points. This is done by nameing type of shape, then the URL linked to that shape, and finaly the coordinates of the necessary points for each shape. These coordinates are in pixels.
The necessary points are as follow:

For a Rectangle the points are the upper-left corner and the lower-right corner.

For a circle the points are the center and any point on the outer rim of the circle.

Finaly for a polygon the points needed are all of the corners in consecutive order around the shape.

For this upcoming example useing example.gif the html code would look like this: (NOTE: the ISMAP addition at the end of the img tag)

<a href="http://studentweb.tulane.edu/help/example.map">
<img src="http://studentweb.tulane.edu/help/example.gif" ISMAP> </A>



 The .map file (called example.map) looks like: 

default http://studentweb.tulane.edu/help/White.html
rect http://studentweb.tulane.edu/help/Red.html  16,16 82,52
poly http://studentweb.tulane.edu/help/Green.html 137,56 182,10 194,48 209,49  206,92  167,90
circle http://studentweb.tulane.edu/help/Blue.html 66,98 102,97

(The Default URL is the link where the map will point if they miss any of the specified shapes.)

The above codes in use:

Client Side "New Wave"

Now days most web browsers can support "Client Side" imagemaps. The only drawback is that some older browsers can not read this type of format, which would then leave your image "mapless".

The information needed is exactly what is needed in the above server side imagemap. The only change is in the code.

ONE MAJOR CHANGE: for a circle the points needed is the center "x,y" and then the radius "r" in the form x,y,r

With a client side imagemap there is NO need for a ".map" file, all of that information will be in the same .html document.

Here is the code to do the same map from above but with a client side map. 


<IMG SRC="http://studentweb.tulane.edu/help/example.gif" USEMAP="#MAP1" ISMAP>

<MAP NAME="MAP1">
<AREA SHAPE="rect" COORDS="16,16,82,52" HREF=http://studentweb.tulane.edu/help/Red.html>
<AREA SHAPE="poly" COORDS="137,56,182,10,194,48,209,49,206,92,167,90" HREF=http://studentweb.tulane.edu/help/Green.html>
<AREA SHAPE="circle" COORDS="66,98,36" HREF=http://studentweb.tulane.edu/help/Blue.html>
<AREA SHAPE="default" HREF=http://studentweb.tulane.edu/help/White.html>
</MAP>


Questions about HTML to Contact: StudentWeb Help

Help Index - Help Page 1 - Help Page 2
Help Page 3 - Help Page 4 - Help Page 5