Tutorial about HTML Embed Tag

Example of a HTML Embed Tag we usually use:


<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>






Explanation of the above HTML Embed Tag (including of its Parameters)



HTML Embed Tag:



<embed ... ></embed>


Example: <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>


This is the HTML embed tag itself and is already configured to display a specific flash clock from our website. The HTML embed tag is used to display objects on web pages. An object can be a flash clock, flash web site, flash animation or other applications built with flash technology. For your information, the HTML embed tag can also be used to display a java applet, which is created with java technology, but HTML embed tags for java applets are usually extensive and complex.






Parameters:



src=


Example: src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf

 

This is the source (src), the link to the flash application, in this case, a link to a flash clock hosted on our web server. It is the direct link to where the flash clock is located on the web server, and can be your own web server or another one that is not yours.


If you download a flash clock from a website, or if you create your own flash clock, and upload the swf file to your own web server, there will be no need to insert the direct link on the src parameter, merely the indirect link, namely:


src=free-flash-clock-183.swf


Note: The above indirect link will only work if the swf file is on the same folder as the web page that has the HTML embed tag to display the flash clock. For example, if you want to display a flash clock on your home page (which is named index.html, for example, and is located on the root of the web server), the flash clock must be placed in the same folder as the file index.html is located on the web server, which is the root. If your home page is placed in a folder with a specific name, you must place the swf file in that same folder, and insert the name of the folder in the indirect link, on the src parameter's value, namely:


src=name-of-the-folder/free-flash-clock-183.swf






width=


Example: width=200


height=


Example: height=200


The width and height parameters configure, in pixels, the size of the flash clock. For a normal analog clock, the width and height usually have the same value. For a digital clock, because it displays the time in numbers, not graphics of any kind whatsoever, the width and height should have different values.


You should try different values for width and heigh, because your site might need specific values.





wmode=


Example: wmode=transparent


The wmode parameter is extremely important and very useful. If you use Joomla or WordPress (or any other platform or script), make sure this parameter is included in the html embed tag, because the point is to blend the background color of the flash clock with the background color of the web page where the flash clock is to be displayed in.


Here are the available values for the wmode parameter:


wmode=transparent

wmode=window

wmode=opaque


The transparent value is to be used when the flash clock has a background color different from the background color of the web page where you want to display the flash clock. This value blends both background colors and makes the flash clock's background color transparent, thus blending with the background color of the web page. Very useful indeed.


The window value is used when you want to insert a flash clock on a web page with the default background color of the flash clock (every flash clock must be created with one default background color, but the flash clock can have a graphic with many colors as a background, and in this case it is not possible to make use of these 3 values of wmode parameter).


When the flash clock has the same background color as the web page where ir is to be displayed in, there is no need to use the transparent value. When you want to use the default background color of the flash clock, the window value is also to be used in this case.


The opaque also uses the default background color of the flash clock. Therefore, the result is exactly the same as if you used the window value, as there is no significant difference between window value and opaque value, because nobody will notice the difference.






type=


Example: type=application/x-shockwave-flash

 

This is a very simple parameter that must be included inside the html embed tag (only if you use the style of our html embed tag). The purpose of this parameter is to communicate with the web browser, namely to tell the browser to load the adobe flash player (if it is already installed in the web browser, otherwise the flash clock will not be displayed).

Test HTML Embed Tag Online

Below is the "Real-Time HTML Editor" mentioned at the beginning of this tutorial. You will see that any HTML code entered in the Code Area (the upper area) is automatically converted and displayed in the Preview Area (the lower area).


Please copy the following HTML embed tag and paste it in the Code Area (the upper area), in order to visualize what is automatically displayed in the Preview Area (the lower area):


HTML embed tag (to copy and paste):

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>


Note: Change the parameter values to learn how they work.





Follow our Future