Microsoft.NET

……………………………………………….Expertise in .NET Technologies

HTML more Tags – Part 6

Posted by Ravi Varma Thumati on December 15, 2009

HTML – <!– Comments –>

A comment is a way for you as the web page developer to control what lines of code are to be ignored by the web browser.

There are three main reasons you may want your code to be ignored.

Writing notes or reminders to yourself inside your actual HTML documents.

Scripting languages such as Javascript require some commenting.

Temporarily commenting out elements especially if the element has been left unfinished.

Use the last example place text inside your code and documents that the web browser will ignore. This is a great way to place little notes to yourself or to remind yourself what pieces of code are doing what.

HTML Code:

<!–Note to self: This is my banner image! Don’t forget –>

<img src=”http://www.tizag.com/pics/tizagSugar.jpg&#8221; height=”100″ width=”200″ />

As you can see comment syntax may be a little complicated, there is an opening and a closing much like tags.

<!– Opening Comment

— > Closing Comment

Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track elements embedded in your webpages. Also, your code may exist for many years, these notes to yourself are a great way to remember what was going on as you may not remember 5 or more years down the road.

All combinations of text placed within the comment tags will be ignored by the web browser, this includes any HTML tags, scripting language(s), etc.

HTML Meta Tags

Meta tags are used to supply information for search engines that will not be seen by the web surfer unless they were to view your web site’s HTML. In the past, meta tags were a primary way for your site to be recognized by web spiders, but the internet community abused the meta tags to artificially increase their ranking in the search engine databases. Nevertheless, you should still include meta for those search bots that do recognize them, allow your site to be included in their search engine.

Keywords Meta Tag

Keywords or phrases are placed in this meta tag’s content attribute. You should specify the most popular search terms you believe someone would use to reach your web site. A few years back, you could spam this meta tag with any and every keyword possible to gain ranking on search engines. Repeated words, or words that do not pertain to the content of the site will not benefit you or those using a search engine. Here’s an example of proper usage for a site.

HTML Code:

<head>

<meta content=”keyword, key keywords, etc” />

</head>

name defines what type of meta tag being used. Note that the keywords are separated by commas.

An example of the keywords meta tag for Tizag.com would be as follows.

HTML Code:

<head>

<meta content=”HTML, XHTML, CSS, tutorials, tizag” />

</head>

Description Meta Tag

As you might have guessed, this tag will show a brief description of the web page to a search engine. Your description should be a sentence or two about your web site. Keywords that appeared in the keyword meta tag should appear here as well.

HTML Code:

<head>

<meta content=”Tizag contains webmaster tutorials.” />

</head>

Description and Keywords tags are very similar, and they should be. As mentioned above if they do not match, you may be ignored or blocked by some search engines. Be careful.

Revised Meta Tag

The revised meta tag records when the last update was done to the site.

HTML Code:

<head>

<meta content=”Happy New Year: 1/1/2003″ />

</head>

Refresh Page and Redirect

Later down the road, you may need to redirect traffic to another domain. A common reason might be that you have just purchased a better domain name and would like to retain your old visitors, yet still use your new domain. With the refresh meta tag you will be able to redirect visitors to the web site of your choice.

HTML Code:

<head>

<meta http-equiv=”refresh” content=”10; url=http://www.tizag.com” />

</head>

Above shows refreshing Tizag’s home page every 10 seconds. A quick refresh may be necessary for news, stocks, or any other time-sensitive information. The most common use for this type of meta tag, however, is redirection. To redirect a viewer automatically, just change the URL to the new site as shown below. This code will send your visitors to espn.com after being at your site for five seconds.

HTML Code:

<head>

<meta http-equiv=”refresh” content=”5; url=http://www.espn.com” />

</head>

HTML Scripts

There are two very popular scripts that are commonly used in HTML to make web pages come alive. HTML javascript and HTML vbscript are very useful scripting languages to know, if you have the time.

With HTML scripts you can create dynamic web pages, make image rollovers for really cool menu effects, or even validate your HTML form’s data before you let the user submit. However, javascript and vbscript are very complicated compared to HTML. It may be simpler just to download someone elses scripting code and use it on your web page (if they have given you permission to do so, of course!).

HTML Javascript Code

If you want to insert javascript code into your HTML you are going to use the script tag.  Below is the correct code to insert embedded javascript code onto your site.

HTML Code:

<script>

<!–script

***Some javascript code should go here***

–>

</script>

For javascript you set the type attribute equal to “text/javascript”, which is similar to the process of specifying CSS. We also include a comment around the javascript code. This will prevent browsers that do not support javascript or have had javascript disabled from displaying the javascript code in the web browser.

HTML Vbscript How To

To insert vbscript code onto your website you must once again make use of the script tag. Below is the correct code to insert vbscript code onto your site.

HTML Code:

<script>

<!–script

***The vbscript code should go in this spot***

–>

</script>

For vbscript you set the type attribute equal to “text/vbscript”, which is similar to specifying CSS. We also include a comment around the vbscript code. This will prevent browsers that do not support vbscript or have had vbscript disabled from displaying the vbscript code in the web browser.

HTML Music Codes

Inserting music onto a web page is relatively easy. In the past multiple tags had to be used because browsers did not have a uniform standard for defining embedded media files. However, I am glad to announce that this is a problem of the past and you will have a much easier time then webmasters of the past.

HTML Embed

Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music, but embed is now considered the standard for inserting media. Below is an minimalist example of the embed tag using the src attribute to define the media file’s location.

HTML Code:

<embed src="beethoven.mid" />

<p>Above is an embedded media player.  To stop the music press stop/pause.</p>

Depending on what kind of media software you or your visitor has installed, the above example will appear slightly different. To make your embedded player display properly change the attributes associated with display.

Embed Attributes – Related to Display

To customize the appearance of the embedded media player be sure to set the following attributes.

width – the width of the media player.

height – the height of the media player

hidden – if this value is true then the media player will not be displayed. We recommend using this attribute only if you know that your visitors will not want the option to stop the music that is playing on your web page. (Values are true/false)

HTML Code:

<embed src=”beethoven.mid” width=”360″ height=”165″ />

Embedded Music:

Usually, you do not want to mess with the width and height of the media player as it can cause the media player to look rather distorted.

Embed Attributes – Related to Functionality

To customize the functionality of the embedded media player be sure to set the following attributes.

autostart – choose if the media file will start automatically

loop – sets the media file to repeat or not

volume – set the volume of the media file. The range is 0-100.

HTML Code:

<embed src=”beethoven.mid” autostart=”false” loop=”false”

volume=”60″ />

Customize Your Code:

Controls Attribute

The attribute controls sets which controls for the media player will be displayed.

autostart – choose if the media file will start automatically

loop – sets the media file to repeat or not

volume – set the volume of the media file. The range is 0-100.

HTML – Video Codes

Videos can be embedded into your html documents (web pages) two different ways. One method is to use the <embed /> tag to display your media file. The embed tag does not require a closing tag. In fact, it works much like the image tag. A src attribute must be defined by the correct URL (local or global) in order for the video file to be displayed correctly. Here is a look at the embed tag with a global URL, feel free to use this URL while you practice.

HTML Code:

<embed src=”http://www.tizag.com/files/html/htmlexample.mpeg&#8221;

autostart=”false” />

Mpeg Movie:

You may start and stop your movie files by either pressing the buttons at the bottom of the object or by single clicking (stop) on the object and double clicking your mouse (continue/play).

You may also simply place the URL of your media files into the href attribute of an anchor tag, much like the concept of “thumbnailing” images.

HTML Code:

<a href=”http://www.tizag.com/pics/flash/motiontween1easy.swf”&gt;

motiontween1easy.swf</a>

Flash Media:

motiontween1easy.swf

HTML – Video Media Types

Flash movies (.swf), AVI’s (.avi), and MOV’s (.mov) file types are supported by the embed tag.

.swf files – are the file types created by Macromedia’s Flash program.

.wmv files – are Microsoft’s Window’s Media Video file types.

.mov files – are Apple’s Quick Time Movie format.

.mpeg files – set the standard for compression movie files created by the Moving Pictures Expert Group.

The listings above are the most commonly used formats for the internet. “.mpeg” files and Macromedia’s .swf files are the most compact and widely used among the internet. Stick to any of the file types above for use with your web pages.

HTML – Embed Attributes

Along with the previously discussed src attribute, there are some unique attributes available to the <embed /> tag including: volume, autostart, hidden, and loop.

autostart – controls the media’s ability to start without prompting. Values are true or false.

hidden – controls whether or not the play/stop/pause embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise).

loop – A true value means the media will continuously loop, false means no looping.

playcount – Setting a playcount means the media will repeat itself x number of times instead of continuously as with the loop attribute above. (playcount=”2″ will repeat the video twice).

volume – set a numeric value for the loudness of your media. (0-100).

HTML – Google Video

Google video has recently gained popularity as a source for sharing movies on the internet. At Google Video it is possible to search for any type of movie. Google allows you to download and display these movies on any of your own html pages.

As you search through videos there Google has provided a text area with an embed tag inside of it. Copy this text area to your own HTML pages to embed Google videos onto your own pages.

HTML Code:

<! — Google Video HTML Code — >

<embed style=”width:400px; height:326px;”

align=”middle”

src=”http://video.google.com/googleplayer.swf?videoUrl=http%3A%

2F%2Fvp.video.google.com%2Fvideodownload%3Fversion%3D0%26

secureurl%3DvgAAAG7ggqAHSiJjpW0D3w4aYTUFW9M-NghJgbJjy8mhm

cEoPD-qcpQj2i1OD9xJ6RseUKhCxEKqxhx0jnEJlzf04o-E7gUJc5z_Ur

OEGJAZeqGJwm5u3VIm_6cNAj34Tj_GwI13lu4V8_s49xIsqh8GGFa2yKI

pP3DN-u3fZclxMdm3EKZKMqwjROPGPOcl1AMH17kgA5XA503H4WS0Gefm

G5TKWrRHsY2d3pOatXR_2IxBzGEIq5p-9ybrmmn_o0zj6g%26sigh%3DP

dJGakwLdDs6uXBefAsAxQMQDls%26begin%3D0%26len%3D3569%26doc

id%3D8734085858581743191&thumbnailUrl=http%3A%2F%2Fvi

deo.google.com%2FThumbnailServer%3Fapp%3Dvss%26contentid%

3Dbc66969d46ff8d61%26second%3D0%26itag%3Dw320%26urlcreate

d%3D1147452288%26sigh%3DhQlKmBGLA2yrYhrTGpU029bCEHA&p

layerId=8734085858581743191″ allowScriptAccess=”sameDomain”

quality=”best” bgcolor=”#ffffff” scale=”noScale”

wmode=”window” salign=”TL” FlashVars=”playerMode=embedded”>

</embed>

<! — End of Google Video HTML Code –>

It is a messy code above, but once you put it into your HTML documents you get a great video clip.

HTML – Body

As we mentioned, the body tag serves as the element containing all the content for the website. Tables, Lists, Forms, Paragraphs, everything must be placed within the body element to be displayed on your site.

HTML – Body Margins

Unique Attributes

leftmargin

Sets a lefthand margin for your body element.

topmargin

Sets a margin along the top of your body element.


A unique set of margin attributes are available to the body tag. These attributes work much like those of a word processing program, allowing you set a pixel value margin for the left, right, top, or bottom of your website. Setting these attributes means that all the content you place within your body tags will honor the preset margin.

HTML Code:

<body topmargin=”50″>

<body leftmargin=”50″>

Margin Examples:

Top Margin
Left Margin

HTML – Base Text

The text attribute sets the text color of all text contained within the body tags. Think of it as a means to set the color of your text ‘unless otherwise noted’. Basically you set a base color scheme and then you may use other means to modify the text color as needed in your site.

HTML Code:

<body text=”red” >

or

<body text=”rgb(255,0,0)” >

HTML – Base Links

Along the same lines, we may also specify base colors for visted or unvisted links. This method has deprecated, we recommend using Cascading Style Sheets instead.

HTML Code:

<body link="white" vlink="black" >

or

<body link=”rgb(255,255,255)” vlink=”rgb(0,0,0)” >

Setting a baselink is a great way to ensure your viewers will not receive that annoying error message that occurs with broken links.

HTML – Div Element(s)

The <div> tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS.

id

width

height

title

style

For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.

HTML Code:

<body>

<div style=”background: green”>

<h5 >SEARCH LINKS</h5>

<a target=”_blank” href=”http://www.google.com”>Google</a&gt;

</div>

</body>

HTML Div Element:

SEARCH LINKS

Google

Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.

HTML – Div Layouts

When HTML first began, web creators only had two choices. A table layout, or frames. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.

HTML Code:

<div align=”right” >

<a href=””>HOME</a> |

<a href=””>CONTACT</a> |

<a href=””>ABOUT</a>

</div>

<div align=”left” bgcolor=”white”>

<h5>Content Articles</h5>

<p>This paragraph would be your content

paragraph with all of your readable material.</p>

</div>

HTML Div Layout:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with.

Let’s add a “LINKS” page to our menu, and another article of content below the existing content.

HTML Code:

<div align=”right” >

<a href=””>HOME</a> |

<a href=””>CONTACT</a> |

<a href=””>ABOUT</a> |

<a href=””>LINKS</a>

</div>

<div align=”left” >

<h5>Content Articles</h5>

<p>This paragraph would be your content

paragraph with all of your readable material.</p>

<h5 >Content Article Number Two</h5>

<p>Here’s another content article right here.</p>

</div>

HTML Div Layout II:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here’s another content article right here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: