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:

This meta element defines keywords for your page:

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:

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!

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!

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 –>

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:

<!–

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:

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:

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

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:

Upload Forms

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

0

We always cross such websites where we can upload images or some files on the page. For example to upload pictures, movies, or even their own webpages. An upload form is another type of input form, where we apecify the type as file.

Example:

<input type=”file” />

Upload Form:

Readonly

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

0

We can make an input field as read only if we want the user not to interfere with the text written. We give the value of readonly attribute as true to make it readonly and then the user can not manipulate the data inside the input field.

This attribute is only for textbox and textarea input types.

Example:

<textarea cols=”20″ rows=”5″ wrap=”hard” readonly=”yes”> As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.</textarea>

Disabled

As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the input field altogether and inhibits any change in the text as well as text highlighting.

This attribute can be used for most of the input fields including the buttons.

Example:

<textarea cols=”20″ rows=”5″ wrap=”hard” disabled=”yes”>As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.</textarea>

Textareas

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

0

Textareas retrieve descriptive type of information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area. It can take large inputs, and have scroll bars to navigate within the text entered.

Example:

Text area Cols and Rows

We can display the text area according to our choice by using the rows and cols attribute.

Use a numeric value for each attribute and the larger the value the larger the field will appear.

Example:

<textarea cols=”20″ rows=”10″>Text Area!</textarea>
<textarea cols=”40″ rows=”2″>Text Area!</textarea>
<textarea cols=”45″ rows=”5″>Text Area!</textarea>

Textarea Wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

· soft

forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

· hard

Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

· off

Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

· wrap=

o “virtual”

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.

o “physical”
Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.

Example:

<textarea cols=”20″ rows=”5″ wrap=”hard”>As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read.</textarea>

Example:

<textarea cols=”20″ rows=”5″ wrap=”off”>As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read.</textarea>

Radios

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

0

Radios are best used in “multiple choice” type quizzes and questionaires, where the user can have only one single choice.

Radios are types of input forms that allow a user to pick an either/or type of selection. In order to achieve this, we must properly name each radio button selection accordingly. These types of forms must be named.

· value – specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).

· name – defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.

Example:

Italian: <input type=”radio” name=”food” />
Greek: <input type=”radio” name=”food” />
Chinese: <input type=”radio” name=”food” />

By naming these three radios “food” they are identified as being related by the browser and we achieve this either or effect (only being able to make one selection).

Radio Checked

By using the checked attribute, we can tell our form to automatically “check” a default radio.

Example:

Italian: <input type=”radio” name=”food” checked=”yes” />
Greek: <input type=”radio” name=”food” />
Chinese: <input type=”radio” name=”food” />

Checkboxes

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

0

Checkboxes allow the user to select multiple choices for a single question. for example if we need multiple selections for a single question.

Checkboxes are another type of <input /> form. We set the type attribute to check and we also must set a name and value attribute for them to be at all helpful.

Example:

<input type=”checkbox” />
<input type=”checkbox” /><input type=”checkbox” />

Checkboxes are used for instances where a user may wish to select multiple options, a sort of check all that apply question.

It is possible to precheck the input boxes for your viewers using the checked attribute. Simply set the checked attribute to yes or no.

Example:

name=”sports” value=”football” />
<br />
Baseball: <input type=”checkbox”
name=”sports” value=”baseball” />
<br />
Basketball: <input type=”checkbox” checked=”yes”
name=”sports” value=”basketball” />

Password Fields

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

0

Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.

Example:

<input type=”password” size=”5″ maxlength=”5″ />
<input type=”password” size=”15″ maxlength=”15″ />
<input type=”password” size=”25″ maxlength=”25″ />

Password Fields:

The only difference between these fields and the normal text fields is that when you type into them, the browser hides the characters being typed; replacing them with dots, stars, or boxes.

Text Field

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

0

You have seen many websites which provide the facility of creating accounts, and so that we need to register with a username and a password.

Text fields are small rectangles that allow a user to simply input some text and submit that information to the web server.

This information is usually then processed through a server side scripting language such as PHP, PERL, or ASP.

Example:

<input type=”text” />
<input type=”password” />

Text Fields and Passwords:

Text Field Size

We can control the size of the text area by specifying the size attribute. The example below provides 3 different sizes for your text fields. The default size is around 20 characters long.

Example:

<input type=”text” size=”5″ />
<input type=”text” size=”15″ />
<input type=”text” size=”25″ />

Text Fields:

Changing the size attribute changes the size of the display of the text field on our site.

Text Field Maxlength

Without specifying a maxlength attribute, the viewer is able to type as many characters as they wish into the text field (even if you specify a size). To limit the number of characters a user can type into your fields, always specify a maxlength, generally this should match the size of your field.

Example:

<input type=”text” size=”5″ maxlength=”5″ />
<input type=”text” size=”15″ maxlength=”15″ />
<input type=”text” size=”25″ maxlength=”25″ />

Maxlength Attribute:

Using the value attribute, we could pre-populate our text fields with some information. Later on as you develop your skills with a scripting language such as PHP, this will become more useful as you will be able to pre-populate text fields for returning users through the use of session variables.

Example:

<input type=”text” size=”5″ maxlength=”5″ value=”55555″ />
<input type=”text” size=”15″ maxlength=”15″ value=”Corndog” />
<input type=”text” size=”25″ maxlength=”25″ value=”Tizag Tutorials!” />

Text Field Values:

Input Tags

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

0

Without user input a website is just a static show page. We use user inputs to make it more and more effective and to interact with the users.

When we are talking about websites and users visiting the website you must be well aware that this requires user interaction in variuos ways. For example if we want to make our website interactive then we have to take in some inputs from the use and display some output according to the input provided.

This process requires, first of all somewhere or some area where a user can write directly or it can interact in any way with the page being displayed.

We have various kind of input tags according to the different purpose like checkboxes, text fields, radios, and form submission buttons.

The <input /> tag does not require a closing tag and is thus an “all in one” tag.

The Type Attribute

To specify the type of input we want to use, we have to set the type attribute to one of the following values.

“text”
“password”
“checkbox”
“radio”
“submit”
“reset”

HTML Character Entities

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

0

Several symbols such as copyright, trademark, or foreign cash symbols don’t exist on the keyboard, but they are sometimes required in your document In order to display these characters, you have to know 4 things.

Each begins with a ampersand – &
Then the entities name – copy
And finally a semicolon – ;

Copyright:

Additional Spaces and <>.

As you have may have learned within paragraph and heading tags, browsers will only recognize and format 1 space between words reguardless of how many you may actually type in your coded HTML. That means no tab would work. But sometimes its necessary to provide multiple spaces between the words. We can do so by using the non-breaking space entity.

Example:

<p>Everything that goes up, must come     down!</p>

Spaces:

Everything that goes up, must come down!

In HTML the less than and greater than signs are used for tags so they cannot be directly used as the browser will not show them on the page

to use them on your web site you will need entities.

&lt for less than

&gt for greater than

Example:

<p>
Less than – < <br />
Greater than – > <br />
Body tag – <body>
</p>

Less than Greater than:

Less than – <
Greater than – >
Body tag – <body>

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

Vacation Rentals Advertising and MarketingVacation Rentals Solution | Vacation Rentals Websites | Vacation Rentals Network

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

0

HTML Javascript Code

Example:

HTML Vbscript How To

Example:

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

0

Keywords Meta Tag

Example:

Example:

Example:

Revised Meta Tag

Example:

Refresh Page and Redirect

Example:

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

0

Example:

Basic Layout:

Example:

Basic Layout 2:

<!– Comments –>

Example:

<!– Commenting Existing Code –>

Example:

Example:

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

0

Example:

Noresize and Scrolling:

Layout

Example:

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

0

Example:

Example:

Frame Target:

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

0

Example:

FrameBorder and FrameSpacing

Example:

Frame Borders:

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

0

Example:

Frame Set:

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

0

Example:

Paragraph Bgcolor:

Adding Color to Your Tables

Example:

Table Bgcolors:

Adding Color to Table Rows & Columns

Example:

Alternating Colors:

Background Color and Font Color Together!

Example:

Example:

Colored Paragraph:

Background

Example:

Background Image:

Example:

Repeating Background:

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

0

Example:

Form Action:

HTML Reset Buttons

Example:

HTML Reset in Action

Example:

Summary of Form Tags

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

0

Example: