Media Questions Quick Reference

[Grove]

This FAQ is intended to help users to insert images, audio and video into a website. The author of this FAQ is writing with the most prefferable choices that will comply with all browsers. Also please note that this FAQ was created and intended for windows machines. This is not a major consideration as the code should work but some faults may occur throughout the coding proccess. If quotation marks are used in any of the code below, make sure that you also have quotations around required words.

Inserting Images:

Inserting images into your site will allow to convey the message you are trying to bring in your articles or any other piece of text. Like Confucius said, "A picture is worth a thousand words."

To insert an image, you will need to use the image tag. Here is an example:

<img src="filename.jpg" align="left/right" width="XXX" height="XXX"
border="XX" alt="text">

This code is fairly simple if you have a background of HTML. If not, do not worry, I will go through the proccess of explanation.

img src="filename.jpg" - This code states what the file name is. This is known as the Image Source. It simply tells the browser to open the image named "filename.jpg".

align="left/right" - This code give you the option to either align the code left or right. This is pretty straight forward, so no real explanation is needed. Just one quick note, to center the image you cannot simply write align=center. You need to put the image between <center> </center> tags to align it to the center of the page.

width="XXX" (Optional) - This allows you to resize the image yourself without actually editing the image. All the code does is tell how wide the image should be in pixels.

height="XXX" (Optional) - The height is like the width. It allows you to resize the image with no editing required. All the code does it tell how high the image is in pixels.

border="XX" (Optional) - This tag shows the thickness of the border around the image. It is shown in pixels. Only, use the border command when the image is also the anchor for a link. If you do not know what that means, don't worry about the border tag.

alt="text" - This is the Alternative Text tag. This text appears when a users mouse is over the image. It also will appear if the user has his or her image loading turned off or if the browser doesn't display graphics. You should always include some brief alternate text, just a small description.


Inserting Audio:

Audio can be a compelling and yet thwarting feature to a site. If not used correctly, the audio can decrease the popularity of your site. Also with audio, make sure you have the required permissions to play it on your site.

There are various ways to insert audio into your site and therefore I will show you the most commonly used, you then simply choose the one that fits your needs.

Linking to Sound Files:

This is one of the most common ways audio is displayed in a site. It gives the user total control if he or she wishes to play the song.

Listen to the <a href="LOCATION" controls="true/false">SONG</a>

a href="LOCATION" - This code tells what page to open. You need to write the whole location. e.g. C:\Site\Audio\song.mid (I strongly suggest that you only pay audio with the .mid extension. These files are extremely small and will load quickly. The quality is acceptable but not perfect).

controls="true/false" - This tells the browser to display or not to display a sound console. A sound console gives the user the option to stop, pause or rewind the sound clip (The user can only use a sound console if you have created one, this FAQ will not show you how to but feel free to Google).

SONG - This is simply the word that will be linked to the audio.

</a> - This is the end tag for the <a href=""> tag.

Autoplaying Sound:

This allows you to start playing an audio file within an inputed amount of seconds of the page loading.

<META HTTP-EQUIV=refresh CONTENT="#seconds; URL of the sound file">

META HTTP-EQUIV=refresh - This tag simply states that when the page is refreshed or loaded it will activate the CONTENT tag.

CONTENT="#seconds; URL of the sound file" - This first part of the code tells you how many seconds to wait before the audio starts playing and the second part needs the specification of the URL. e.g. CONTENT="5; www.sitethathasasound.com"

Remember that some of your users won't necessarily be expecting the sound so consider the effect sound may have on your user before selecting this method of adding audio to your site.

Embedding Sound:

This is also another popular choice as it allows you to insert the sound within the webpage and yet provides an sound console.

<embed src="LOCATION" autostart="true/false" loop="true/false" height="XX" width="XXX" controls="console">

embed src="LOCATION" - This code will bring up the location of the sound. Be sure to include the whole location. e.g. C:\Site\Audio\song.mid

autostart="true/false" - This command tells the browser to play the audio immediately or if the user clicks on the video.

loop="X" - This code tells the browser how many times it the audio file should be played. True = Infinte, False = Once and X = A Numeral. I recommend leaving this as false as most users get annoyed when the sounds keeps on repeating.

height="XXX" width="XXX" controls="console" (Optional) - This refers to the audio console. If you have not created one or do not know what one is, I suggest you don't worry about this part.

**NOTE** If you place the code at the start of the HTML file it will start playing the sound first and then load the page. If the code is inserted in the middle of the HTML file the page will start loading then the sound will begin playing and then the rest of the page will load. If the code is placed at the end of the page, the page will load and then the sound will start playing.

Adding Background Sound:

This only works with IE and is a poor option but I will show and explain it to you.

<bgsound src="LOCATION OF FILE" loop="X">

bgsound src="LOCATION OF FILE" - This code simply tells the browser where the file is located. Make sure that you type the whole address.

loop="X" - This tells the browser the number of time the audio will be played. Simply, leaving this out will only play it once. Putting a number such as 5 will play it five times and making it play infinite times you would use this code: loop="-1"


Inserting Video:

There are a lot of ways to insert a video into a site. I'll only show you one and my preffered method. It is both efficient and easy to create.

Plugin:

<embed src="file.mov"
pluginspage="http://quicktime.apple.com/"
width="XXX" height="XXX" 
controller="true/false" loop="true/false" autoplay="true/false">
</embed>

embed src="file.mov" - This code tells where the browser shall look for the file. With the embed source tag make sure that you have the full address.

pluginspage="PLUGIN PAGE" - This command will tell the browser to download the plugin from the correct URL. e.g. http://quicktime.apple.com/

width="XXX" height="XXX" (Optional) - This simply controls the width and height of the video.

loop="true/false/X" - This controls the amount of times the video is played. True states that it is played over and over again while false allows it only to be played once. You can also insert a number as to many times the video is played. I recommend you leave this at false.

controller="true/false" - This allows a bar to be seen at the top of the video. You can change this to either true or false. Whatever suits your needs.

autoplay="true/false" - This code tells the browser to either play the video automatically or either false so the user has to click for the video to load.

</embed> - This is the end embed tag.

If you would like something added to this FAQ or I have missed something please feel free to PM me and I shall get to you ASAP.