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

HTML code:

        <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>

Result:


As you can see, once there's enough text in this box, the box will grow scroll bars...
that's why we call it a scroll box! You could also place an image into the scroll box.

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.

HTML code:


        <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>

Result:

This HTML scroll box has had color added.
You can add color to the background of your scroll box.
You can also add color to the scroll bars.


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.

HTML code:

        <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>

Result:


Sample picture for scroll box: Beach, Brazil

Scroll Box with Background Images

You can also add background images to your scroll box.

HTML code:


        <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>

Result:

Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.


Scroll Box Borders

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

HTML code:

        <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>

Result:


This scroll box has had a border added to it. You can add borders to anything in HTML - including scroll boxes.

Another example

EliterosnuncsedutPraesentnontinciduntDonecliberoid.OrciconguepenatibusnibhsemisietInlaoreetorci

Lorem ipsum dolor sit amet consectetuer interdum consequat justo Vivamus nunc. Orci auctor et et pede Maecenas malesuada de Donec ornare tempus eget Morbi. Felis elit sagittis sed Semper Nulla et sit Pellentesque venenatis.

Cursus eu non Aenean orci congue cursus orci vitae augue lacus. Ut fermentum Nulla sed Quisque vitae dolor eros condimentam Nam odio interdum sapien id sit Phasellus. Nullam ut dolor tincidunt malesuada Sed adipinec spede Aenean.

Pede Vestibulum Vestibulum eros nulla facilisi id semper ipsum lobortis sapien. Augue vitae Nunc at aliquet hendrerit Phalibero odio turpis purus tincidunt. Consequat habitantu. Ut lacinia quis odio dictum consectetuer volutpat.

EliterosnuncsedutPraesentnontinciduntDonecliberoid.Orciconguelaoreetorci

Mauris tristique Fusce fringilla ornare porttitor nunc vitae Vestibulum morbi et. Consequat volutpat malesuada tempor ac que Quisque In Donec at ut Quisque. Dictumst interdum hac Curabitur Phasellus neque tempus eget turpis condimentum Curabitur. Et.

Orci ullamcorper sed tempus eu lacinia odio id Vestibulum non ac. Id magna tincidunt et habitasse pellentesque Nam Cras ilit pretium enim at. am Nulla quis pretium. Vitae montes elit Curabitur.

Ac nunc Proin pellentesque metus lacinia wisi Pellentesque Nam condimentum semper. Felis sapien turpis Nam laoreet et ut d nibh eu Aenean. Egese vel nibh tortor. Consequat gravida Sed arcu s Lorem a felis nunc est quis auctor consequat. Amet.

Sed In Curabitur Quisque wisi urna scelerisque urna ut lorem eros. Nibh Phasellus pede Proin ridiculus tincidunt tortor js sed. Nunc sollicitusem mi cursus ligula vitae. Nec enim mus Nulla venenatis adipiscing facilisis. Phasellus justo condimentum et In.

Augue lacinia Nam Vestibulum eleifend Nam mollis mus et consectetuer neque. Amet ac et semper est congue quis ut eget masna dolor Nulla at estFaucibus id consequat quis Morbi.

EliterosnuncsedutPraesentnontinciduntDonecliberoid.OrcicongueisietInlaoreetorci

Justo Sed at leo Nam facilisis lacus Praesent dignissim mauris nec. Urna sollicitudin Ut quis Cras Duis contda habitant nibh eros tempor et. Et quis Sed non penatibus. Platea convallis Curabitur feugiat semper nibh Ut sem Curabitur ut.

Tortor sapien accumsan eget elit at nibh lacus massa wisi odio. Nibh sed mollis lacinia consequat et adiJusteongue Suspendisse tincidunt Morbi convallTempor felis rutrum libero urna Sed ipsum condimentum ullamcorper tellus nibh.

EliterosnuncsedutPraesentnontinciduntDonecliberoid.OrciconguepiquamUtetutid.AtodiofacilisietInlaoreetorci

Sodales elit velit vel Morbi Pellentesque vitae et Curabitur pede Sed. Sed vitae pellentesque odio ut dui fames ut o Quisque semper nonummy convallis ean ante enim. Semper elit Quisque at fringilla amet Curabitur.

Sit urna vitae vitae at pede nec Nullam Cum Maecenas vitae. Nam mauris porta vestibulum interdum risus Nam auctor no interdum interdum vitae. Vivamus u adipiscing Praesent malesuada. Pretium id mollis.

Nec Quisque eros neque condimentum nunc vitae ipsum dignissim tellus Curabitur. Maecenas congue at ante ac in tempuss laoreet tristique hendrerit. Nibhtpat sem felis Quisque semper ipsum semper.

Consequat nulla eros laoreet In vitae et parturient accumsan nulla consectetuer. Hendrerit tellus tempus elit penatitallis facilisis Curabitur. Congue libero et eu odio elit justo lobortis velit. Duis.

EliterosnuncsedutPraesentnontinciduntDonecliberoid.Orcicontorci

Vestibulum convallis id Nam tempor aliquet at Nullam vel pellentesque ac. Congue urna morbi tortor neque laoreet i vel egestas nunc non eo condimentum Pellentesque nibh elit Donec sem nec.

Condimentum ligula Sed felis ut semper vel convallis enim venenatis vitae. Vestibulum ligula nibh ut ut leo accums id ante dui feugiat entesque. Nascetur consectetuer et tincidunt at adipiscing na consectetuer. Iaculis nibh montes eget.

Rhoncus dui quam tincidunt wisi adipiscing Nam Phasellus urna adipiscing tincidunt. Ante Curabitur metus convallisilla augue magnis habina ipsum sed Vestibulum pretium ornare dolor.

EliterosnuncsedutPraesentnontinciduntDonecliberoid.Orciconguepenatibusnibhsemperliberomal

Tincidunt dolor ut Nullam ut tincidunt dolor amet turpis habitant lorem. Orci Pellentesque non Lorem libero congue Curabitur elit nunc et nibh. Nunc leo id et wisi convallis eu feugiat nibh ante condimentum. Id semper sit.

Et orci neque accumsan ipsum eget rutrum tincidunt faucibus Cras urna. Eros tempus rutrum Curabitur Vestibulum velit penag purus Aliquam eu dui odio ante Sed. Ut justo et orci turpis sit interdum vitae ante dui i Nam eget ullamcorper. Aenean condimentum.

EliterosnuncsedutPraesentnontinciduntDonecliberoid.Orciconguepenatibusnibhs



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>

Result:


- ↑ - 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>
      

Result:


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

test map

HTML Code:

Result:


Contacts Products New! map of GH site
[ Contacts ] [ Products ] [ New! ]

Image Map Example 2

HTML Code:

Result:


Coconut Palms, Awesome Beach, and I Me Natal Beach Coconut Palms

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:

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

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>
      

Result:

Home
Images
Help
Contact


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>
      

Result:


Home
Images
Help
Contact

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>
      

Result:

Home
Images
Help
Contact

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>
      

Result:


Home
Images
Help
Contact


Nice Rollover Menu

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

plus sign Main
plus sign New 20
plus sign Rules
plus sign Contact

 

And we can make an horizontal version as well.

plus sign Main plus sign New 20 plus sign Rules plus sign Contact


A Complete Menu Interface

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