This isn’t a single tutorial but a collection of small bells and whistles that you can add to your site to make it more attractive and make your visitor’s online experience something to remember and esteem. Whether it’s a personal or professional site, your website is your online identity and it defines your online presence so it is very important that your website speaks to your visitor who you are. These little enhancements with basic HTML will help you along.
· Highlighting important text in a different color will make it stand out.
Here you will use the <span> tag which serves the same function in both HTML and XML – to group the inline elements in a page.
This code will highlight default text in color
<span style="background-color: #FFFF00">Highlighting text in color</span>
This code will add colored text to a page
<span style="color: blue; font-size: 12pt"> Colored text</span>
This code will add highlight default text with a background image
<span style="background-image: url(txtbckgrd.jpg)">Adding a background image to text</SPAN>
· Opening a webpage in a new window.
This is especially useful when you are placing an external link and you don’t want the visitor to leave your site to visit the other. This code will open the other site in a new window.
<A HREF="http://www.abc.com" TARGET="_blank">Welcome to the ABC site</a>
target="_blank" >> Opens the linked page in a new window.
target="_self" >> It is only useful when working with frames. It opens the linked page in the same window. This is the default for ordinary pages and doesn't need to be specified.
target="_parent" >> Opens the linked page in the parent frame when using frames.
target="_top" >> Opens the linked page in a full (i.e. top level) window when used in frames pages. This one is useful for letting a linked page 'break out' of a frame.
If you have placed a lot of external links and wish to open all of them in different windows then place this code in the <head> section.
<base target="main">
· Background Music.
If you have a professional site that sells say, aromatherapy products or similar therapeutic goods how would you lie to have some soothing music playing in the background? I’m sure that’s one thing your visitors would appreciate.
You can use the <bgsound> tag for IE and <embed> tag for Netscape. Using <bgsound> the music automatically loads when your visitor opens the page but in Netscape the user can be given the choice to click and choose to play sound.
In IE:
<Bgsound Src =”your_file.mid” Loop=1>
Looping is for looping the number of times you wish to play the sound, set it to -1 for playing infinitely.
In Netscape:
<Embed src = “your_file.mid” Autostart=true Width=100 Height=50 Loop=1>
· Autostart=true will make the sound automatically load and play when the page is loaded. If you set it to “false” it will play only when the button is clicked.
· Loop is set to a numeric value or to true and false to play the sound a certain number of times, loop=true will keep repeating the sound until the button is clicked for stopping it.
· Width and Height are to decide the width and height of the music console that will be displayed. You can choose to hide this console by having a Hidden=true.
<Embed Src = “your_file.mid” Autostart=true Hidden=true Loop=1>
You can also use the <noembed> tag for browsers that don’t support <embed>.
<noembed>Your browser doesn't support EMBED</noembed>
· Making an Image Change on Mouse Rollover
You can choose to swap one for another using the following. Add this to the <head> section
<SCRIPT LANGUAGE = "JavaScript">
function change_image() {document.button.src = "Your image when mousover";}
function normal_image() {document.button.src = "Your image normal";}
</SCRIPT>
Now you can add this to your normal site code:
<img src="normal image.gif" hsrc="mouseover image.gif">
These are a couple of tips and tricks to help you make a striking webpage.
This article is the property of http://www.Elegant-Templates.com
Copying and publishing any article from our site is allowed but you have got to give us a back link and keep the author info in tact. |
