Cool HTML Features

1. Improving your HTML Page
2. Scrolling Boxes
   1. A basic Scroll Box
   2. Colored Scroll Boxes
   3. Scroll Box with Images
   4. Scroll Box with Background Images
   5. Scroll Box Borders
   6. Another example
3. Create a Music Play list
   1. Step 1 - Create a m3u File
   2. Example m3u File
   3. Step 2 - Add the Play list to your Code
4. Image Maps
   1. Purpose
   2. Image Map Example 1
   3. Image Map Example 2
5. HTML Table Menu
   1. Table Basic Menu
   2. Table Mouse Over Effects
   3. Turning Table cells into Links
   4. Nice Rollover Menu
   5. A Complete Menu Interface

Improving your HTML Page

There are some basic resources that could be used to improve your HTML Page.

Scrolling Boxes

An HTML scroll box is a box that grows scroll bars when it's contents are too large to fit in the box.

How do you make the box? You create the box using the HTML div tag.

Then, to make the box scroll, you apply the CSS overflow property to the div.

A basic Scroll Box

        <div style="overflow: scroll; height: 100px; width: 300px; font-family:verdana,arial,sans-serif; 

        font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: 26px; 

        font-size-adjust: none; font-stretch: normal; -x-system-font: none;">

        As you can see, once there's enough text in this box, the box will grow scroll bars...<br>

        that's why we call it a scroll box! You could also place an image into the scroll box.

        </div>


        <p style="font-family:verdana,arial,sans-serif;font-size:15px;">

        <a href="/html/codes/html_scroll_box.cfm">HTML scrollbox</a>

        </p>

      

Colored Scroll Boxes

HTML scroll boxes could be colored.
You have a number of options when it comes to adding color to your scroll box.

        <div style="overflow: scroll; height: 100px; width: 200px; font-family:verdana,arial,sans-serif;

        background-color: rgb(103, 241, 82); color: rgb(166, 18, 13);">

        This HTML scroll box has had color added.<br>
 
        You can add color to the background of your scroll box.<br>
 
        You can also add color to the scroll bars.
</div>


        <p style="font-family:verdana,arial,sans-serif;font-size:15px;">

        <a href="/html/codes/scroll_box_color.cfm">Change the color of your scroll box!</a>

        </p>
      

Scroll Box with Images

You can also add images to your scroll box.
This can be either a background image, or, one or more foreground images.

        <div style="overflow: scroll; height: 150px; width: 250px;

        font-family:verdana,arial,sans-serif;">

        <img src="../images/brazilian_beach.jpg"

        alt="Sample picture for scroll box: Beach, Brazil"

        width="330" height="221">

        </div>


        <p style="font-family:verdana,arial,sans-serif;font-size:15px;">

        <a href="/html/codes/picture_scroll_box.cfm">

        Add an image to your scroll box!</a>

        </p>
      

Scroll Box with Background Images

You can also add background images to your scroll box.

        <div style="height: 220px; width: 325px; overflow: scroll; font: 35px/45px cursive;

        color:#A6120D; background:url('../images/brazilian_dune.jpg');">

        Background pictures are ideal for when you want to place text over the top

        of your picture. When using a background picture, scroll bars will only

        appear if we have enough text in the scroll box.

        </div>


        <p style="font-family:verdana,arial,sans-serif;font-size:15px;">

        <a href="/html/codes/picture_scroll_box.cfm">

        Add a background image to your scroll box!</a>

        </p>
      

Scroll Box Borders

Here's an example of an HTML scroll box with a border added.

        <div style="border: 5px dashed rgb(10, 218, 10); overflow: scroll;

        height: 100px; width: 300px; font: 35px/45px cursive;">

        This scroll box has had a border added to it.

        You can add borders to anything in HTML - including scroll boxes.

        </div>


        <p style="font-family:verdana,arial,sans-serif;font-size:15px;">

        <a href="/html/codes/scroll_box_border.cfm">Add a border to your scroll box!</a>

        </p>
      

Another example

Create a Music Play list

You may already know how to add songs to your website, but what about a music playlist?

A music play list is simply a list of songs.
By using a play list, your music player can play many songs one after the other.
In other words, when the first song in your music play list is finished, the second song will start playing.
Then when that song is finished, the next song will play etc.

To add a music play list to your website you need to do 2 things:

1. Create a m3u file (your music play list file)
2. Create your HTML file with your music code (this plays the music on the m3u file)

Step 1 - Create a m3u File

A m3u file is a file that contains a list of songs.

Follow these steps to create your m3u file (i.e. your play list file):

1. Create a text file
2. Add a list of the mp3 files you want on your play list.
   This can be the full path to the file or a relative path. Place each mp3 file name on a new line
3. Add any comments by preceding them with a hash (#) symbol (this step is optional)
4. Save the file with a .m3u extension. For example, call it music_playlist.m3u

There it is - your music play list file!

Example m3u File

Below is an example of an m3u file:

        
        #This is my m3u file - it contains a list of songs

        /sound/1bailefunk.mp3

        /sound/2brasil.mp3

        /sound/3jorge.mp3

        /sound/4voce.mp3

        
      

Now all you need to do is add your play list to your music code.

Step 2 - Add the Play list to your Code

Place the following code within your HTML file and change the values to suit:

        <embed name="music_playlist" src="music/music_playlist.m3u"

        width="200" height="30" loop="false" hidden="false" autostart="false">

        </embed>
      

- ↑ - If You are using Firefox, will probably don't see anything up here.

If you've ever added music to your website, you are probably familiar with this code.

There is only one difference between this code and any other (non-play list):
in this code, the value of the src attribute (i.e. your source file) is your play list file.
If you weren't using a play list, this source file would be a single .mp3 or .wav file or similar.

CAUTION: Sometimes You will find difficult (or impossible), to reference
the m3u file on an upper level folder relative to the current page.

INFORMATION: Up to December 2009, Play list doesn't work on Firefox up to 3.5.6

A Last minute update!

Since new versions of Firefox are not supporting m3u files like they did in the past, here is an updated version successfully tested against Firefox 9.0.1.

        <embed src="music/music_playlist.m3u" type="application/x-mplayer2" 
        showcontrols="0" showpositioncontrols="0" showaudiocontrols="0" showtracker="0" 
        showdisplay="0" showstatusbar="0" showgotobar="0" showcaptioning="0" autostart="1" 
        autorewind="0" animationatstart="0" transparentatstart="0" allowchangedisplaysize="0" 
        allowscan="0" enablecontextmenu="0" clicktoplay="0" 
        width="250" height="45"></embed>
      

You will need of course, install the WMP Firefox Plugin. More details available HERE.

Image Maps

Purpose

Image maps are images with click-able areas (sometimes referred to as "hotspots")
that usually link to another page.

Creating an image involves using the <img ...>, <map ...>, and <area ...> tags.

To create an image map:

1. First, you need to create an image using the usual method (i.e. via an image editor,
   then save as a gif or jpeg into your website's image folder).
   
   
2. Use the HTML map tag to create a map with a name.
   Inside this tag, you will specify where the click-able areas are with the HTML area tag
   
   
3. Use the HTML img tag to link to this image. In the img tag, use with the usemap attribute
   to define which image map to use (the one we just specified).
   

If used tastefully, image maps can be really effective.

If not, they can potentially confuse users.

Image Map Example 1

HTML Code:

[ Contacts ] [ Products ] [ New! ]

Image Map Example 2

HTML Code:

OK, this code is looking quite complex.

However, once you really study it, it is not that complex.

All we are doing, is specifying an image, then we are creating a map with coordinates.

The hardest part is getting all the coordinates right.

In our example, we use the area in conjunction with the shape and coord attributes.

These accept the following attributes:

Defines a shape for the click-able area. Possible values:

• default
• rect
• circle
• poly

Specifies the coordinates of the click-able area. Coordinates are specified as follows:

• rect: left, top, right, bottom
• circle: center-x, center-y, radius
• poly: x1, y1, x2, y2, ...

You can use the above attributes to configure your own image map with
as many shapes and click-able regions as you like.

HTML Table Menu

With this tutorial, you can create a simple, nice looking menu complete with rollover effects.

It seems like recently, simple sites are coming more into style.

Heavy graphic and flash are out, slick design and coding skill is in.

The intention here is to show how to deal with menus using just the basics of HTML Tables

Table Basic Menu

To start off, you need of course, a basic table with a cell for each menu item.

        <table width="100" border="0" cellpadding="0"
         cellspacing="1" bgcolor="#000000">
        
          <tr>
            <td bgcolor="#FFFFFF">Home</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF">Images</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF">Help</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF">Contact</td>
          </tr>
        
        </table>
      

Table Mouse Over Effects

Now we have a simple table that will contain our links.

The next step is to build in the mouse over effects.

We are gonna put code into each TD tag, telling the browser how to act with the mouse interaction.

        <td bgcolor="#FFFFFF" onMouseOver="this.style.background ='#E8E8E8'" 
            onMouseOut="this.style.background='#FFFFFF'">Home</td>
      

So, the first cell of the table act differently.

Eventually, we will apply this treatment to every cell

What that chunk of code does is make the cell change background color when touched by the mouse cursor.

When the mouse leaves, the color returns to its previous state.

Turning Table cells into Links

Now we need to make each table cell act as a link.

This is done by adding another little snippet:

        <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" 
            onClick="parent.location='index.php'"
            onMouseOver="this.style.background='#E8E8E8'; 
            this.style.cursor='pointer'">Home</td>
      

We have added two things here:

First, the location where the browser will go when the cell is clicked.

Second, we added a command to change the mouse pointer to a hand, the common symbol for a link.

The table should now look like this:

        <table width="100" border="0" cellpadding="0"
         cellspacing="1" bgcolor="#000000">
        
          <tr>
            <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" 
                onClick="parent.location='index.php'"
                onMouseOver="this.style.background='#E8E8E8'; 
                this.style.cursor='pointer'">Home</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF">Images</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF">Help</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF">Contact</td>
          </tr>
        
        </table>
      

Now that the top cell works fine, go down and repeat the process for all remaining cells.

The complete code for this table should look like this:

        <table width="100" border="0" cellpadding="0"
         cellspacing="1" bgcolor="#000000">
        
          <tr>
            <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" 
                onClick="parent.location='index.php'"
                onMouseOver="this.style.background='#E8E8E8'; 
                this.style.cursor='pointer'">Home</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" 
                onClick="parent.location='images.php'"
                onMouseOver="this.style.background='#E8E8E8'; 
                this.style.cursor='pointer'">Images</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" 
                onClick="parent.location='help.php'"
                onMouseOver="this.style.background='#E8E8E8'; 
                this.style.cursor='pointer'">Help</td>
          </tr>
        
          <tr>
            <td bgcolor="#FFFFFF" onMouseOut="this.style.background='#F7F7F7'" 
                onClick="parent.location='contact.php'"
                onMouseOver="this.style.background='#E8E8E8'; 
                this.style.cursor='pointer'">Contact</td>
          </tr>
        
        </table>
      

Nice Rollover Menu

Now, adding some extra cell padding and some little images, we ended up with this:

Main New 20 Rules Contact

And we can make an horizontal version as well.

Main New 20 Rules Contact

A Complete Menu Interface

I have a sort of menus, navigation bars, and other cool stuff just combining HTML and CSS: HERE