Tutorials.

+ HTML

+ CSS

+ XHTML

+ JavaScript

IMAGES & MEDIA




Displaying images
To put an image or picture on your site, here's what you can do:

<IMG src="your_image.jpg" border="value" alt="this appears when you hover your cursor over your image.">

src is the URL of your uploaded image.
border is the border frame around your image.
Replace the word value with a number (in pixels), e.g. border="1". Set border="0" for a borderless image.
alt sets the text you want to appear when you hover over your image.
You can include spaces and punctuation marks, just keep them all within the inverted commas " ".



Re-sizing Images

To re-size your image, include the highlighted code:

<IMG src="your_image.jpg" border="value" alt="this appears when you hover your cursor over your image." style="width:value;height:value;">


Replace the word value with a number (in pixels).



Positioning images

To position your image to a certain coordinate, add on the following code highlighted in pink:

<IMG src="your_image.jpg" border="value" alt="this appears when you hover your cursor over your image." style="width:value;height:value; top:value;left:value;position:absolute;">


Again, replace the word value with a number (in pixels). This will set the image to _px from the TOP and _px from the LEFT.


back to top

Music
Adding music to your site is sort of like a double-edge sword. It can help spice up your visitor's experience at your site, but sometimes music can also become a nuisance to visitors (especially if they don't like the music itself). I would suggest that if you want to add music to your website, give your visitors the choice to switch it on/off. Especially if your website is a formal one (e.g. for business), make sure you give thorough consideration to the type of music you add because this greatly affects the user experience.

In any case, here's the code:

<EMBED src="your_music_file.mp3" autostart="false" hidden="false" loop="false" width="150" height="50"></EMBED>


And it will look something like this:
((the song that's playing is Call Me When You're Sober by Evanescence, enjoy!))



You can change the width and height values to whatever dimensions you prefer.

If you don't want visitors to be able to turn on/off the music, i.e. hidden, use this instead:

<EMBED src="your_music_file.mp3" autostart="true" hidden="true" loop="true"></EMBED>


You can change the following:
autostart=true
(Change this value to 'false' for play button to be manually clicked for music to start playing.)
loop=true
(Change this value to 'false' for the music to be played just once.)

The commonly acceptable music file extensions are .mp3 and .wma. Take consideration too that .mp3 files are generally larger than .wma files so uploading a .mp3 file may take a longer time to load, so personally, I always prefer to convert any music files I'm uploading to .wma files first.


back to top

Flash
Putting up flash files also uses the EMBED source code. It will look something like this: (Values in bold can be changed)

<object width="750" height="350">
<param name="flash" value="your_flash_file.swf">
<EMBED src="your_flash_file.swf" width="750" height="350">
</EMBED>
</object>


Uploading flash files onto your site will require Adobe Flash Player in order to view it. You can download the latest version (Adobe Flash Player 9) here.


back to top

Video or movie clips

<EMBED src="your_movie_file.mov" width="750" height="350" autostart="true"> </EMBED>

You can also upload movie clips for visitors to enjoy on your website although I do not really advise you to do so. Reason being that movie clips are usually very very large, so it will really turn off your visitors if they had to wait for a long time to get to watch the clip. I still like uploading my videos onto YouTube and getting the EMBED source from there, though the quality gets compromised a little but at least the loading is a lot faster.


back to top



HTML Tutorials    Images    Music    Video Clips    Flash