Barbara Hjorth – http://ridgefieldselfstorage.com recommends goweb99.com

Posted by admin | Posted in GoWeb99, Top 18 Reasons For Having A Website | Posted on 01-09-2010-05-2008

0

I have been working with Tony Walker of goweb99 for several months regarding the development of a website for our business. His creative suggestions, helpful tips and immediate reply to my many requests were very professional and courteous. And, of course, the PRICE to design a pro website is remarkably affordable!
Barbara Hjorth – http://ridgefieldselfstorage.com

Vacation rental owner Sandy Anderson – http://tiburonvacation.com recommends goweb99 travelehome.com

Posted by admin | Posted in Marketing of your Vacation Rentals, Testimonials, Top 18 Reasons For Having A Website, Travelehome - Serving Vacation Rentals | Posted on 30-08-2010-05-2008

0

Working with David and Tony has been a pleasure! They are extremely patient, knowledgeable, dedicated, and wonderful to work with. This is our second web sites we have purchased from them, and when it comes time to need another, I wouldn’t hesitate to work with them again!
The same day we placed our web site up for the first time, we received 7 bookings, in just one day! Outstanding! Thank you from the bottom of my heart!
I would recommend anyone needing a web site or any other services go the www.goweb99.com

Sincerely,
Sandy Anderson – http://tiburonvacation.com

Code Links

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

Another use may be to enhance the look and feel of the  links on your page. This tag provides a very quick way to accomplish this.

Example:

  • <p>Feel free to search <a href=”http://www.google.com” target=”_blank”>
  • <code>Google</code>
  • </a> for
  • anything you need to find on the internet.</p>

<pre> Preformatting element

Web browser generally interprets your html document as one long line. You may have tabs and line breaks in notepad aligning your content so it is easier to read for you, but the web master, your browser ignores those tabs and line breaks.

We showed you one way to get around this by using the &nbsp; character or  ltbr /> tag. Tabs and spacing are quite different, and absolutely annoying at times. One simple solution might be to use the <pre> tag, standing for previously formatted text.

<pre> tag can be used for any special circumstances where you want your text to appear in some preformatted manner. For example any extra spaces or tabs will not be displayed in a normal text but this could be done using the <pre> tag.

Example:

  • <pre>
  • Roses are Red,
  • Violets are blue,
  • I may sound crazy,
  • But I love you!
  • </pre>

Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!

<sup> Superscript element

Superscripted text can be placed onto your website using the <sup> tag. You may also give an id to these tags so that they can be used in the whole documents through the style sheets.

Example:

  • <p>This text is <sup>superscripted!</sup></p>

This text is superscripted!

Exponents

Exponential expressions can be written by using the superscripting technique.

Example:

  • 2<sup>3</sup> = 8
  • 14<sup>x</sup>

Exponents:

23 = 8
14x

Footnotes

You may have come across several texts where a referencing, superscripting directs your attention to the bottom of the page. These footnotes can also be created with the superscript tag.

Example:

  • <p>”It was a lover’s tryst<sup>1</sup>.”
  • <hr />

1. Secret meeting between lovers

Footnotes:

“It was a lover’s tryst1.”

1. Secret meeting between lovers

<sub> Subscript element

This tag is used to place subscripted text onto your websites.

Example:

  • <p>This text is <sub>subscripted!</sub></p>

This text is subscripted!

Chemical Compounds

This tag allows for the creation of chemical compounds.

Example:

  • <p>H<sub>2</sub>0<sub>2</sub> – Hydrogen Peroxide
  • <p>CO – Carbon Monoxide
  • <p>CO<sub>2</sub> – Carbon Dioxide

H2O2 – Hydrogen Peroxide
cO – Carbon Monoxide
CO2 – Carbon Dioxide

Strikethrough

To place text onto your site that appears to be crossed out, we can use the <del> tag.

Example:

  • <p>This text is <del>not needed now </del> </p>

This text is not needed now!

Div Layouts

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

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.

Example:

  • <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:

HOME | CONTACT | ABOUT

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.

Example:

  • <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:

HOME | CONTACT | ABOUT | LINKS

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.

Tips

·           Use CSS Positioning with divs and code like a pro!

Bold

Creating bold text can be accomplished through the use of the <b> bold tag.

Example:

  • <b>This text is entirely BOLD!</b>

Bold:

This text is entirely BOLD!

Place the bold tag inside other elements to highlight important words and give feeling to your text.

Example:

  • <p><b>Don’t</b> touch that!</p>

More Bold:

Don’t touch that!

You may also use it to separate words from their meaning in a dictionary fashion.

Example:

  • <p><b>Cardio:</b> Latin word meaning of the heart.</p>

Dictionary:

Cardio: Latin word meaning of the heart.

The idea here is to use the bold tag in quick formatting situations. It is not a good idea to bold entire paragraphs or other elements simply because you want the text to be larger or fatter. Use Cascading Style Sheets for font styles and sizes.

Italic(s)

The italics tags should be used to highlight a key word or phrase. These tags are not intended to to stylize or shape your font face. Rather, use them to emphasize text or words.

Example:

  • Italic <i>tag</i>!
  • <em>Emphasized</em> Text!
  • Create a <blockquote>blockquote</blockquote>!
  • Format your <address>addresses</address>!

Italic tag!
Emphasized Text!
Create a blockquote!
Format your addresses!

Each of the above tags is generally interpretted by the browser in a similar way. The two commonly used tags to place italics onto a website are <em> and <i>. They are short and sweet.

Example:

  • <b>HTML</b>
  • <i>Hyper Text Markup Language</i>

or

  • <b>HTML</b>
  • <em>Hyper Text Markup Language</em>

HTML
Hyper Text Markup Language

or

HTML
Hyper Text Markup Language

As you can see, the output is the same regardless of what tag we used to emphasize our definitions.

Bold and Italics

Both the <b> and the <i> tags can be placed within other elements to format your texts. They can also be used together to bold and italisize words or phrases. Nothing fancy here, just be sure you open and close the tags in the same order.

Example:

  • <p>Phillip M. Rogerson <b><i>MD</i></b></p>

Display:

Phillip M. Rogerson MD

This is brilliant when placing text links directly inside your paragraphs as a reference to the user.

Example:

  • <p>Include several external
  • links throughout your texts as references to your viewers,
  • we will discuss
  • <a href=”" target=”_blank” title=”Tizag Links”>
  • <b><i>HTML Links</i></b>
  • </a>
  • in a later lesson.</p>

Format Links:

Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a later lesson.

As you can see, the code becomes quite complex as you begin to place more and more tags on the board. Be assured that once you learn Cascading Style Sheets the code will become simpler.

<code> element

The <code> tag allows you to specify some of your text as computer code. This simply changes the font face, size, and letter spacing to give the text the feel of being computer code.

Example:

  • This text has been formatted to be computer <code>code</code>!

This text has been formatted to be computer code!

Use this tag to separate any computer code you wish to display on your website. It is not always necessary, but the tag exists if you so desire.

Div Element(s)

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

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. (CSS Tutorial)

·           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.

Example:

<body>

<div style=”background: green”>

<h5 >SEARCH LINKS</h5>

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

</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.

Embed Google Video

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

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.

Body Margins

Unique Attributes1

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.

Example:

  • <body topmargin=”50″>
  • <body leftmargin=”50″>

Margin Examples:

Top Margin
Left Margin

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.

Example:

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

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.

Example:

  • <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.

Video Media Types

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

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.

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).

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.

Example:

  • <! — Google Video Example — >
  • <embed style=”width:400px; height:326px;” id=”VideoPlayback”
  • align=”middle” type=”application/x-shockwave-flash”
  • 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 Example –>

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

HTML Music Codes

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

We can insert musical codes or some music on ouy web page. 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.

Example:

  • <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)

Example:

  • <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.

Example:

  • <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.

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.

Example:

  • <embed src=”http://www.tizag.com/files/html/htmlexample.mpeg”
  • 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.

Example:

  • <a href=”http://www.tizag.com/pics/flash/motiontween1easy.swf”>
  • motiontween1easy.swf</a>

Flash Media:

motiontween1easy.swf

How to Handle Older Browsers

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

If a browser does not recognize the <script> tag, it will display the tag’s content on the page in a textual format. To prevent the browser from doing this, you should hide the script in comment tags.Such a browser will ignore the comment and it will not write the tag’s content on the page, while a new browser will understand that the script should be executed, even if it is surrounded by comment tags.

Example

JavaScript:
<script>
<!–
document.write(”Hello World!”)
//–>
</script>

VBScript:
<script >
<!–
document.write(”Hello World!”)
‘–>
</script>

The <noscript> Tag

Instead of commenting out the scripts we can use the <noscript> tag

The <noscript> tag is used to define an alternate text if a script is not understood and executed by the browser. This tag is used for browsers that recognize the <script> tag, but do not support the script inside, so these browsers will display the text inside the <noscript> tag instead.If a browser supports the script inside the <script> tag it will ignore the <noscript> tag.

Example

JavaScript:
<script>
<!–
document.write(”Hello World!”)
//–>
</script>
<noscript>Your browser does not support JavaScript!</noscript>

VBScript:
<script >
<!–
document.write(”Hello World!”)
‘–>
</script>
<noscript>Your browser does not support VBScript!</noscript>

Script Tags

Tag Description
<script> Defines a script
<noscript> Defines an alternate text if the script is not executed
<object> Defines an embedded object
<param> Defines run-time settings (parameters) for an object
<applet> Deprecated. Use <object> instead

HTML 4.0 Standard Attributes

All HTML tags have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):

Core Attributes

Attribute Value Description
class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip

Note: Not valid in base, head, html, meta, param, script, style, and title elements.

Language Attributes

Attribute Value Description
dir ltr | rtl Sets the text direction
lang language_code Sets the language code

Note: Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

Keyboard Attributes

Attribute Value Description
accesskey character Sets a keyboard shortcut to access an element
tabindex number Sets the tab order of an element

HTML 4.0 Event Attributes

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.

Window Events

Only valid in body and frameset elements.

Attribute Value Description
onload script Script to be run when a document loads
onunload script Script to be run when a document unloads

Form Element Events

Only valid in form elements.

Attribute Value Description
onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus

Keyboard Events

Attribute Value Description
onkeydown script What to do when key is pressed
onkeypress script What to do when key is pressed and released
onkeyup script What to do when key is released

Note:Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Mouse Events

Attribute Value Description
onclick script What to do on a mouse click
ondblclick script What to do on a mouse double-click
onmousedown script What to do when mouse button is pressed
onmousemove script What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an element
onmouseover script What to do when mouse pointer moves over an element
onmouseup script What to do when mouse button is released

Note: Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.

HTML URL Encoding

URL encoding converts characters into a format that can be safely transmitted over the Internet.

URL – Uniform Resource Locator

The address that we type in a browser to open a page is called a URL. All the webpages available on the internet are recognised by this URL only. There is a unique URL for each and every page.Web browsers request pages from web servers by using a URL.

The URL is the address of a web page like: http://www.xyz.com.

URL Encoding

URLs are sent over the Internet using the ASCII character-set only.

Since URLs often contains characters outside the ASCII set, the URL has to be converted. URL encoding converts the URL into a valid ASCII format.

URL encoding replaces unsafe ASCII characters with “%” followed by two hexadecimal digits corresponding to the character values in the ISO-8859-1 character-set.

URLs cannot contain spaces. URL encoding normally replaces a space with a + sign.

URL Encoding Examples

Character URL-encoding
%80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5

HTML Scripts

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

There are two very popular scripts that are commonly used in HTML to make web pages interactive. HTML javascript and HTML vbscript are very useful scripting languages.

With HTML scripts you can create dynamic web pages, like creating effects on the images or the headings of the page, or to validate the forms etc being used in the web page. These scripting languages are a bit complex than the HTML.

But once you get to know them in detail they are easy like the html only.

HTML Javascript Code

If you want to insert javascript code into your HTML you are going to use the script tag.

Example:

  • <script>
  • <!–script
  • ***Some javascript code should go here***
  • –>
  • </script>

For javascript you set the type attribute equal to “text/javascript”. 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.

Example:

  • <script>
  • <!–script
  • ***The vbscript code should go in this spot***
  • –>
  • </script>

For vbscript you set the type attribute equal to “text/vbscript”. 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 Meta Tags

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

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.

Example:

  • <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.

Example:

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

Keywords for Search Engines

Some search engines on the WWW uses the name and content attributes of the meta tag to index your pages.

This meta element defines a description of your page:

<meta content=”Free Web tutorials on HTML, CSS, XML, and XHTML” />

This meta element defines keywords for your page:

<meta content=”HTML, DHTML, CSS, XML, XHTML, JavaScript” />

The name and content attribute were used to describe the content of a page.

However, since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely.

Unknown Meta Attributes

Sometimes you will see meta attributes that are unknown to you like this:

<meta content=”low” />

Then you just have to accept that this is something unique to the site or to the author of the site, and that it has probably no relevance to you.

Example:

  • <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.

Example:

  • <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.

Example:

  • <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.

Standard Layout

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.

Example:

  • <table cellspacing=”1″ cellpadding=”0″ border=”0″
  • bgcolor=”black” height=”250″ width=”400″>
  • <tr height=”50″><td colspan=”2″ bgcolor=”white”>
  • <table title=”Banner” border=”0″>
  • <tr><td>Place a banner here</td></tr>
  • </table>
  • </td></tr>
  • <tr height=”200″><td bgcolor=”white”>
  • <table title=”Navigation” border=”0″>
  • <tr><td>Links!</td></tr>
  • <tr><td>Links!</td></tr>
  • <tr><td>Links!</td></tr>
  • </table>
  • </td><td bgcolor=”white”>
  • <table title=”Content” border=”0″>
  • <tr><td>Content goes here</td></tr>
  • </table>
  • </td></tr></table>

Basic Layout:

Place a banner here
Links!

Links!

Links!

Content goes here

This approach is basic yet organized. Often times websites become too complex for the viewer to follow. The code becomes complex rather fast, you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less debugging you will have to perform.

Example:

  • <table title=”Shell” height=”250″ width=”400″
  • border=”0″ bgcolor=”black” cellspacing=”1″ cellpadding=”0″>
  • <tr height=”50″><td bgcolor=”white”>
  • <table title=”banner” id=”banner”>
  • <tr><td>Banner goes here</td></tr>
  • </table>
  • </td></tr>
  • <tr height=”25″><td bgcolor=”white”>
  • <table title=”Navigation” id=”navigation”>
  • <tr><td>Links!</td>
  • <td>Links!</td>
  • <td>Links!</td></tr>
  • </table>
  • </td></tr>
  • <tr><td bgcolor=”white”>
  • <table title=”Content” id=”content”>
  • <tr><td>Content goes here</td></tr>
  • </table>
  • </td></tr></table>

Basic Layout 2:

Banner goes here
Links!

Links!

Links!

Content goes here

The code is quite a lot to look at, break it up and organize it in your own way to make things easier for you.

<!– Comments –>

A comment is a way for you to put some extra details and still hide them from the viewer.

For example if the web page developer want to control what lines of code are to be ignored by the web browser, and what should be shown to the user.

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. to identify which line is for what purpose.

·           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.

A coment tag has an opening and closing tag between which goes the content which is to be commented.

·           <!– Opening Comment

·           – > Closing Comment

Example:

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

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

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.

<!– Commenting Existing Code –>

As a web developer often times you may have many works in progress, or elements that aren’t quite finished. In this case you may comment out an element until it is 100% ready for the site. Below we have commented out an input form element since we are not quite ready to receive input from our users.

Example:

<!– <input size=”12″ /> — Input Field –>

Now when we are ready to display that element, we can simply remove the comment tags and our browser will readily display the element.

Scripting languages such as Javascript and VBScript must be commented out as well. You will learn that once they are placed within the <script> tags, only then does the browser correctly execute the scripts.

Example:

<script>

<!–

document.write(”Hello World!”)

//–>

</script>

Noresize and Scrolling

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

It’s possible to further customize the <frame> tag using the noresize and scrolling=”" attributes.

Example:

  • <html><head></head>
  • <frameset border=”2″ frameborder=”1″ framespacing=”2″ rows=”20%,*”>
  • <frame src=”title.html” noresize scrolling=”no”>
  • <frameset border=”4″ frameborder=”1″ framespacing=”4″ cols=”30%,*”>
  • <frame src=”menu.html” scrolling=”auto” noresize>
  • <frame src=”content.html” scrolling=”yes” noresize>
  • </frameset>
  • </html>

Noresize and Scrolling:

Here’s the Visual: Visual

·           noresize – Do not let the frames be resized by the visitor.

·           scrolling=”(yes/no)”- Allow scrolling or not inside a frame.

We set the scrolling for our content frame to yes to ensure our visitors will be able to scroll if the content goes off the screen. We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.

Frame Tags

Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)

The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML.

Even if a lot of people are using it, you should try to avoid it, and use styles instead.

Layout

HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other hand are the bread and butter of HTML layouts. Any element may be placed inside of a table including tables themselves.

Example:

  • <table bgcolor=”black” border=”1″ heigh=”200″ width=”300″>
  • <tr><td>
  • <table bgcolor=”white” heigh=”100″ width=”100″>
  • <tr><td>Tables inside tables!</td></tr>
  • </table>
  • </td></tr></table>

Tables inside tables:

Tables inside tables!

The white table (identified as inner) exists inside of the (shell) table, the black one. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.

Frame Name and Frame Target

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

Name attribute gives a unique name to a frame, by which it is identified whenever we need to call it or refer to it.

Target attribute species a name of a frame in which we want that link to be opened.

Example:

  • <html><head></head>
  • <frameset rows=”20%,*”>
  • <frame src=”title.html”>
  • <frameset cols=”30%,*”>
  • <frame src=”menu.html”>
  • <name=”content” src=”content.html”>
  • </frameset>
  • </html>

Example:

  • <html>
  • <head>
  • <base target=”content”>
  • </head>
  • </html>

Frame Target:

Here’s the Visual: Visual

We first named the content frame “content” on our frame page and then we set the base target inside menu.html to point to that frame. Our frame page is now a perfectly functional menu & content layout!

Adding a Banner or Title Frame

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

Add a row to the top for a title and graphics with the code as follows:

Example:

  • <html><head></head>
  • <frameset rows=”20%,*”>
  • <frame src=”title.html”>
  • <frameset cols=”30%,*”>
  • <frame src=”menu.html”>
  • <frame src=”content.html”>
  • </frameset>
  • </html>

frameset rows=”#%, *”- rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a “*”, which means that menu and content (which are the 2nd row) will use the remaining height.

FrameBorder and FrameSpacing

Frameborder and framespacing attribute are used to manipulate the borders and the spacing between the frames. These attributes appear in the frameset tag.

Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

·           frameborder=”#” – A zero value shows no “window” border.

·           border=”#”- Modifies the border width, used by Netscape.

·           framespacing=”#” -Modifies the border width, used by Internet Explorer.

Example:

  • <html><head></head>
  • <frameset border=”0″ frameborder=”0″ framespacing=”0″ rows=”20%,*”>
  • <frame src=”title.html”>
  • <frameset border=”0″ frameborder=”0″ framespacing=”0″ cols=”30%,*”>
  • <frame src=”menu.html”>
  • <frame src=”content.html”>
  • </frameset>
  • </html>

Frame Borders:

  • Here’s a visual:Visual

HTML Frames

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

Frames allow multiple web documents to be displayed inside one browser window at a time.

This means that the actual page has no content of its own but rather specifies n address and that page is displayed there

Frames are now obsolete but are still in use and being used by developers, because they are easy to use and cannot be escaped sometimes.

Frames are most typically used to have a menu in one frame, or a generic header, and content in another frame. When someone clicks a link on the menu that web page is then opened on the content page. Here is a classic example of a basic “index” frameset with a menu on the left and content on the right.

Example:

  • <html>
  • <head>
  • </head>
  • <frameset cols=”30%,*”>
  • <frame src=”menu.html”>
  • <frame src=”content.html”>
  • </frameset>
  • </html>

Frame Set:

  • Here’s the example: Frame Index

·           frameset – The parent tag that defines the characteristics of the main page which have the frame. Individual frames are defined inside it.

·           frameset cols=”#%, *”- Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a “*”, which means the content (the 2nd column) will use the remaining width for itself.

·           frame src=”" -The location of the web page to load into the frame.

A good rule of thumb is to call the page which contains this frame information “index.html” because that is typically a site’s main page.

Each frame in a webpage is independent of the others.

The disadvantages of using frames are:

·           The web developer must keep track of more HTML documents

·           It is difficult to print the entire page

The Frameset Tag

·           The <frameset> tag defines how to divide the window into frames, ie in rows or in columns.

·           Each frameset defines a set of rows or columns

·           The values of the rows/columns indicate the amount of screen area each row/column will occupy.We can specify the values in percentage relative to the web page or in pixels.

The Frame Tag

·           The <frame> tag defines which HTML document to display into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document “frame_a.htm” is put into the first column, and the HTML document “frame_b.htm” is put into the second column:

<frameset cols=”25%,75%”>
<frame src=”frame_a.htm”>
<frame src=”frame_b.htm”>
</frameset>

Note: The frameset column size value can also be set in pixels (cols=”200,500″), and one of the columns can be set to use the remaining space (cols=”25%,*”).

Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.

HTML Color – bgcolor

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags. However, we suggest you only use it for your page’s main background (<body>) and in tables.

Example:

<body bgcolor=”Silver”>

<p>We set the background…</p>

</body>

Paragraph Bgcolor:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

Adding Color to Your Tables

We can add colors to the tables, and to the text inside the rows and columns.

Example:

  • <table bgcolor=”lime” border=”1″><tr>
  • <td>A lime colored table background using color names.</td>
  • </tr></table>
  • <table bgcolor=”#ff0000″ border=”1″><tr>
  • <td>A red colored table background using hexadecimal values “#FF0000″.</td>
  • </tr></table>
  • <table bgcolor=”rgb(0, 0, 255)” border=”1″><tr>
  • <td>A blue colored table background using RGB values “rgb(0, 0, 255)”.</td>
  • </tr></table>

Table Bgcolors:

A lime colored table background using color names
A red colored table background using hexadecimal values “#FF0000″.

Adding Color to Table Rows & Columns

Here’s a few common examples of “bgcolor” and font color

Example:

  • <table>
  • <tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
  • <tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
  • <tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
  • <tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
  • <tr bgcolor=”#FFFF00″><td>This Row is Yellow!</td></tr>
  • <tr bgcolor=”#AAAAAA”><td>This Row is Gray!</td></tr>
  • </table>

Alternating Colors:

This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!

Background Color and Font Color Together!

Example:

  • <table bgcolor=”#000000″>
  • <tr><td bgcolor=”#009900″>
  • <font color=”#FFFF00″ align=”right”>Green Bay</font></td>
  • <td><font color=”#FFFFFF”>13</font></td></tr>
  • <tr><td bgcolor=”#0000FF”>
  • <font color=”#DDDDDD” align=”right”>New England</font></td>
  • <td><font color=”#FFFFFF”>27</font></td></tr>
  • </table>

Scoreboard:

Green Bay 13
New England 27

Example:

  • <table bgcolor=”#777777″>
  • <tr><td>
  • <p><font face=”Monotype Corsiva, Verdana” size=”4″ color=”#00FF00″>
  • This paragraph tag has…
  • </font></p>
  • </td></tr>
  • </table>

Colored Paragraph:

This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.

Background

We can place images within the elements of HTML. Tables, paragraphs, and body can have a background image.

the background atrribute is used for setting a specific color or an image, whichever needed.

Example:

  • <table height=”100″ width=”150″
  • background=”http://www.tizag.com/pics/htmlT/background.jpg” >
  • <tr><td>This table has a background image</td></tr>
  • </table>

Background Image:

This table has a background image

If the image being used is of same dimension then it will be diplayed as it is, if the image is larger then only a part of iamge will be displayed. And if the image is smaller then it will go on repeating itself to cover up the whole web page like a tiled background.

Example:

  • <table height=”200″ width=”300″
  • background=”http://www.tizag.com/pics/htmlT/background.jpg” >
  • <tr><td>This table has a background image</td></tr>
  • </table>

Repeating Background:

This table has a background image

It is obvious this is often not the desired outcome, however, it can also be quite useful as you will see in the following example.

Form Submission – Action

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

For a submission button to accomplish anything it must be placed inside of a form tag with an action and a method. The action is always set to a server side scripting file such as a PHP, PERL, or ASP file. Another choice may be to set the action to mailto followed by an email address, and the form will be emailed to the specified address.

Mailto has been depreciated, however for the purpose of this example and to get a feel for form submission, it will work great in our example.

Example:

  • <form method=”post” action=”mailto:youremail@youremail.com” >
  • First:<input name=”First” size=”12 maxlength=”12″ />
  • Last:<input size=”24″ maxlength=”24″ />
  • <input value=”Send Email” />
  • </form>

Form Action:

First:
Last:
Fill out the above form and as your mail program opens, you can change the email address to your email and then send yourself the results of your form.

HTML Reset Buttons

Reset button is yet another button, but is not much linked with the server or the scripting.Setting the type to reset will place a button within your form to reset each field when clicked.

For example a wrong entry is made and you want to start it all again then you can click on this button and start over again.

Example:

  • <input value=”Reset Fields” />
  • <input value=”Start Over” />

Reset Buttons:

Reset buttons exist to reset the fields of your form. These are handy for very large forms and the user is having difficulty or simply needs to start filling in the form from scratch.

HTML Reset in Action

To actually make submit and reset buttons function with your other input fields. They need to be placed within a form tag. HTML Forms has some great examples of how to use the form tag properly.

Example:

  • <form action=”myphp.php” method=”post”>
  • <input size=”12″ maxlength=”12″ />
  • <input size=”24″ maxlength=”24″ />
  • <input value=”Reset” />
  • </form>

Reset Forms:

Summary of Form Tags

Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a push button
<isindex> Deprecated. Use <input> instead

Selection Forms

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

The size attribute is used to break out from the single displayed drop down list. i.e. if we specify a size for the dropdown list then that many elements will be displayed on the form within the dropdown list.

Example:

  • <select size=”3″>
  • <option>California — CA</option>
  • <option>Colorado — CO</option>
  • <option>Connecticut — CN</option>
  • </select>

Selection Forms:

Selecting Multiples

We can further add to our selection forms by adding the multiple attribute. This allows the user to select more than one entry from your selection forms. Obviously this attribute does not work with the single drop down lists.

Example:

  • <select multiple=”yes” size=”3″>
  • <option>California — CA</option>
  • <option>Colorado — CO</option>
  • <option>Connecticut — CN</option>
  • </select>

Multiple Selections:

Submit Buttons

We often see that there are buttons on the webpage and when we click on the button the page is refreshed or changed and some other page is displayed.

Submit buttons are special buttons which, when clicked, activates the action part of a form.

These are generally used when some data is to be saved or fetched from the server.Basically the working of this button is related to the scripting used on the webpage.

Since we are creatting a submission button. We need to introduce a new attribute, the value attribute. Anyword(s) specified as the value will be displayed on our button. Often it is best to stick with “Submit” or “Continue”.

Example:

  • <input value=”Submit” />
  • <input value=”Continue Please!” />

Submit Buttons:

Submission buttons are a type of <input /> tag. Set the type attribute to submit. This creates a special type of button in your forms that will perfom the form’s set action. We learned about the action attribute in our HTML Forms lesson.

Notice that in the above example we also changed what was written on our button using the value attribute. This can be changed to any value you wish.

Selection Forms and Drop Down Lists

Posted by admin | Posted in HTML Tutorial | Posted on 11-08-2010-05-2008

0

Drop down lists are the lists which help inputing data from a fixd set of information.You might have come across various sites where you have to select choices from a drop down list, for example egistering on a site or filling up a recuisition form etc.

Example:

  • <select>
  • <option>California — CA</option>
  • <option>Colorado — CO</option>
  • <option>Connecticut — CN</option>
  • </select>

Drop Down List:

The first coded <option> will be displayed or selected as the default.But we can vey well change this using the selected attribute.

Example:

  • <select>
  • <option>California — CA</option>
  • <option>Colorado — CO</option>
  • <option selected=”yes”>Conneticut — CN</option>
  • </select>

Drop Down List: