Tutorial about HTML Embed Tag

Example of a HTML Embed Tag:


<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 HTML Embed Tag (Including the Parameters and their Values):

 

 

You may have seen many html embed tags on the internet, and all can be used to insert a flash clock on a web page, obviously if they are properly configured. You can use whatever html embed tag you want, but it is recommended that you use the most simple one, as html embed tags can be very complex; there are many highly advanced parameters, and their values, to connect the html code with the flash clock, but those I will not explain in this first tutorial. Perhaps in the next one!


The above html embed tag example is the most simple one that you will ever see, and it works perfectly well in all web browsers. You can test it in the "Real-Time HTML Editor" (it is a simple version of the one seen in many free and commercial HTML Editors), provided on the bottom of this page.



<embed


This is the start of the html embed tag. The html embed tag itself is used to insert objects inside a web page, wherever and how many times you want. An object can be a flash clock, flash web site, flash animation or other applications that use flash technology, or a java applet, though a html embed tag for java applets is more extensive and complex.



src=

 

This is the source (src), the link to the flash clock. It is the direct link to where the flash clock is located on the server, and can be your web site's server or another remote server. The direct link must contain the top level domain and the name of the flash clock file (the flash file must be in swf format, or it will not be loaded by the flash player); if you place the flash clock on a folder, or on a sub-folder of a folder, just be sure to include all those folder names in the direct link.


If you download a flash clock from a web site, or if you create your own flash clock, and upload the flash clock's swf file to your own web server, then there is no need to insert the direct link to the flash clock, just the indirect link, namely:


<embed src=free-flash-clock-183.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>


You can only use this html embed tag example if the flash clock is on the same place on the web server as the web page that will display the flash clock. This is more for advanced users that know HTML and how to edit web sites, so it is better to just insert the direct link, which is the easier way.



width=

height=


The width and height parameters configure, in pixels, the size of the flash clock. For a normal analog clock, the width and heigh 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 that both parameters have the same value, even though they should have the same value, so it is always relative.



wmode=


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 the flash clock 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=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).



</embed>

 

Every html tag must be closed. Remember that html is also a programming language, and in each programming language the tags or operators must be closed, otherwise the web browser could in fact stop processing the html embed tag used to display the flash clock.



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) will automatically appear in the Preview Area (the lower area), obviously already converted.



Copy the following html embed tag and paste it in the Code Area, in order to check what the Preview Area will automatically display for you:


<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 parameters' values to learn how they work.





Follow our Future