Is there a difference between Java & JavaScript ?

Many people believe that JavaScript is Java because of the similar names. Actually, this is not true & they are two different languages.
JavaScript is an Object Oriented Programming (OOP) language created by James Gosling of Sun Micro-systems and of Netscape. Java is also an OOP language. Many of their programming structures are similar. However, JavaScript contains simpler commands than Java.

What To Do If You Have A Blank PAGE Editor!! & You Don't Know Even How To Generate A Link!! How To Develop A Great Page Using JavaScript Language!! Let Me Help You.. :)

*First Of all, You should add the HTML, HEAD, BODY Tags & The Page Title as follows

What else is inserted inside the Head Tags beside Title?
*Cascading Style Sheets(CSS) may be one of the components of Head Section. Continue to third step..

*Third Step:, You begin to write your scripts using JavaScript Language. Notice that any script you write should be inside the Script Tags as follows :

Tip: The Script tag denotes the beginning of JavaScript Code.

The Language Attribute! Is it Important?

Notice also that we defined the language Used which is JavaScript To Inform People That The Code Between Script Tags Is Written In JavaScript. It Also Tells the Browser So. Actually, Till Now It's Optional To Define The Language Used & You Can Use <script> Instead Of <script language="JavaScript"> Why? Due to the dominance of JavaScript over other languages from the start & any Browser Will Realize That.

*After setting up your script, the last step appears, which is inserting the script in the HTML Tags in the Head Section. Sometimes it goes in the Body Section!

*Here is how it will look:

What Is The Relation Between HTML & JavaScript ?

It Is Inside These HTML Documents [WebPages] That JavaScript Code Must Be Inserted Into...

In Other Words, It's Inside The HTML Tags That JavaScript Code Is Inserted Into...Or It's Inside The HTML-Page Where JavaScript Code Is Embedded..

Document object:

*How To write anything Using JavaScript Language (The write Method) :

Source Code :

Description of the above Code: The write method of the document object displays its argument, the text string (Any text).

Here Are All other Document objects:

bgColor [Changes BackGround Color]

write [Writes something]

lastModified [Gives date of document's last change]

writeln [Writes in new line]

referrer [Gives URL of the page that linked here]

fgColor [Changes Text Color]

linkColor [sets the link color in hex code]

alinkColor [sets the active link color in hex code]

vlinkColor [sets the visited link color in hex code]

location [sets the URL of the page]

referrer [sets the URL of the page the user came from . If no page is available, a blank space will be shown]

title [Create a Tile For the page]

Important Fact: Event Handlers are inserted in the HTML TAGS within buttons, check boxes & links NOT in the Script tags.

Let me give an example to make it more clear:

Others:

The onFocus Command

This Event Handler is most used in Forms Especially within Textarea, Text Input.
Let Me Give You an Example:
Click Here 4 Example

Source Code:

The onChange Command

Like the OnFocus Event, This Event Handler is most used in Forms Especially within Textarea, Text Input.
To Get the Idea of This Script, I Will give you an example.
Click Here 4 Example

Source Code:

The onSubmit Command

Like the OnFocus Event, This Event Handler is most used in Forms Especially within Textarea, Text Input.
You can Even get the idea of the script from its name.
When you use forms, for example, Guest-Book, after people finish writing their name, E-mail & comments, they click on submit. You can direct them to another page, for example, Thanks Page - The page where you thank your visitors for signing the guest Book.

Source Code :

Other Tips:

The Comment Tags : Used to hide your code against older browsers of both Netscape and IE. Actually, It's Optional Whether To Use It Or Not & You Will Never Have An Error If You Didn't Use It, But It Is Recommended To Use It..

What is an HTML file?

-HTML stands for "HyperText Markup Language" and is the language we use to make Web pages.
-HTML allows you to set titles, insert images on your site, and make hyperlinks, tables, Select Menus & More. It is the language that makes the Web possible.
-An HTML file must have an htm or html file extension.

*How To Set A Text Color, Background Color, Link Color, Active Link Color, Visited Link Color, and A Background For the entire page!

*Other attributes in the Body Section:

-background="URL of Image to be a Background"
-bgproperties="fixed" Fixes the background image so that it doesn't scroll.

*How to set a Base Font for the entire pages so that you don't have to use font tags every time.

Source Code:

Attributes:

Size="number": Sets the size of the font.
Color="Hex-code" : Sets the font color for the page.
Name="" : Sets the typeface of the font.

How to EMBED a multimedia object, or video or sound file in a page?

First, what's EMBED Function?
It tells the browser to embed multimedia object.

Attributes:

autostart="True/False" : Possible values are "True" or "False". True will let the multimedia object to play by itself upon page load. False : the multimedia object should be activated by the visitor.
height="" : The height of the display in pixels or percentage.
loop="True/False" : Possible values are "TRUE" or "FALSE". True will let the multimedia object repeats continously forever until you stop it . False will let it play one time and stop.
name="" : The name of the object.
src"/mymultimedia/clip.avi" : The URL of the object file.
width=" " : The width of the display in pixels or percentage.

Example:

*Note: For Hex Color Codes Visit Link at the bottom of this page.

*How To Make A Text Colored Or Change Its Size Or Even Make It Bold and Italic :

Source Code :

*How To Write Any Text With The Typewriter Font ?

Source Code :

*Other HTML Commands To Use:

Source Code :

*What are The Multicol Tags ?

*It Displays text in columns.

Attributes:

cols="" : Sets the number of columns to use.
gutter="pixels" : Sets the space between each column.
width="" : Sets the width of the columns.

*What Is The <P> Tag ?

It Is used For Setting text in a New Paragraphs..It Acts Like A Space

What attributes Can Be Inserted Inside The P Tag ? Only One attribute!

• align="left/right/center" : To Align Text Of The P Tag.

It Is Used For The Multiple Spacing,How? Simply, Repeat The Tag.. Unlike The P Tag Which Can't Do That

*What's The Preformatted Text?

Preformatted Text Is Used To Preserve Both       Spaces & Line Breaks.

Source Code :

*Blockquote Tags Is Used To Display A long quotation:

Blockquote Is Used To Display A long quotation.Blockquote Is Used To Display A long quotation.Blockquote Is Used To Display A long quotation.Blockquote Is Used To Display A long quotation.Blockquote Is Used To Display A long quotation.Blockquote Is Used To Display A long quotation.

Source Code :

*Q Tags Is Used To Display Short Quotation:

*Example:

Q Tags Is Used To Display Short Quotation

Source Code :

Source Code :

What attributes Can Be Inserted In The Image Tag ?

Here Is A Source Code For An Image Tag With All Possible attributes Inserted Into..

Source Code :

What Is alt="image" ?

alt="myimage" = The Word "myimage" Will Appear The Browser Didn't Load The Image or when you move your mouse over the image.

So Generally, What's "Alt" ?

It Stands For An "Alternate Text" For An Image

*You Can Use This Command To Center Anything, Image Or A Text :

Source Code :

*How To Make Underlined Text, Striked, Blink, Subscript, Supscript...

Source Code :

*Headings :

*Example:Click Here To See Headings.

Source Code :

*Text Will Be Written From The Right To The Left, If Your Browser Supports Bi-Directional Override.

Your Text Here!

Source Code :

*The Link (A Tag):

Attributes:

• href="URL" : The URL of the page you will go when the link is clicked on.
• name="Name" : If you have a long page with lots of info, you may want to provide relative links to sections of your page.
• onClick="" : Call an execution of a script when the mouse is clicked (activate a JavaScript Code when a link is clicked on).
• onMouseOver="" : Call an execution of a script when the mouse is moved over the link (activate a JavaScript Code when the mouse is moved over the link ).
• rel="..." : Sets a relative relationship.
• rev="..." : Sets the reverse relationship.
• target="..." : Specifies which window the link will be loaded into. *Possible Values: "_blank" : Loads the link into a new blank window. "_parent": Loads the link into the immediate parent of the document the link is in. "_top" : Loads the link into the full body of the current window.
• title="example" : Sets the title (Text String) that appears when the link is selected, but not yet clicked.

*Examples:
*How To Generate A Link In Your Site :

Source Code :

You can shorten the URL if the place where you desire is on the same server..

*Let Me Make It More Clear, If Your Site Is Hosted By AngelFire & You Would Like To Make A Link For This Page "https://www.angelfire.com/hi3/whatever.html" ..Instead Of Writing The Whole URL In The HREF Section You Can Write It As Follows :

*How To Generate Anchor Link In Your Site :
*If you have a long page with lots of info, you may want to provide relative links to sections of your page.

Example:Click Here To Go To The Cut'N'Paste JavaScript Section

Source Code :

*Create An Email Link :

Source Code :

*Create a Picture Link To An E-mail Address:

Source Code :

*How To Make An Image As A Link :

Source Code :

Input Tags

What Is Common In The Input Types ?

• Type : Button, CheckBox, Radio Button, Submit, Reset, Text, Password
• Value : This Has Many Things To Do Depending On The Type Of The Input, For Example, In Case Of Text Input, It Will Be The Text Written Inside The Text Area Example :
  
• For Buttons, Value is the Text String that appear on Buttons.

*How To Create A Reset Button :

First Of All, What Is The Rest Button?

I Will Give You An Example To Recognize It

Test: Check The Box, Then Press Reset :

Source Code :

*How To Create A Submit Button :

What Is A Submit Button?

Actually, It Is Used To Submit Any Type Of Information.. It's Normally Used In The Forms

Source Code :

*How To Create a Button :

Source Code :

*How To Create a Check Box :

Source Code :

*How To Create a Radio Button :

Source Code :

*Password Field :

*Notice That When You Type Characters In The Password Field, It Will Displays Asterisks Instead Of The Characters.

*Test: Type Anything In This TextArea.

Source Code :

*The Last Type Of Input Tags Is The "Text"

Source Code :

Here Is A Live Example of The Above Code :

*Tips On InPut TyPeS!

*checked: Use this attribute in a RADIO or CHECKBOX type, and it will be pre-selected when the page loads.
*maxlength="number": Sets the maximum number of characters that can be entered in a text input.

*To make a "marquee", or scrolling text, put the text to be scrolled between the Marquee tags.

Source Code :

Attributes:

behavior="slide/scroll/alternate" : "Scroll" is the default , "slide" makes the text slide from off the screen and then stop, "alternate" makes the text alternate back and forth.
bgcolor="..." : Specifies the background color of the marquee.
align="..." : Possible values of "top", "middle", or "bottom". Specifies the alignment of the text.
direction="Left/Right" : Sets the direction for the text to scroll. Possible values are "left" (default) or "right".
height="in pixel or percentage" : The height of the marquee in number of pixels or % of screen.
width="in pixel or percentage" : Sets the width of the marquee.

*How To create a horizontal line :

Source Code :

*You Can Even Control The Size Of The Line, Let Us Have A Look! :

Source Code :

*How To Control Its Size Using Percentage :

Source Code :

*How To Change Even Its Color And Its Place :

*Note : (color IE only) , Change align To "Center" If You Would Like The Line To Be In The Center & "Left" For The Left ...

Source Code :

Other attributes:
*noshade : The line is drawn solid with no shade.

Different Types Of Lists

*How To Create Numbered List (Ordered List) :

Source Code :

*To Create Unnumbered list (Unordered List) :

Source Code :

*Types Of Unordered List

1.Disc Bullets List

2.Circle Bullets List

3.Square Bullets list

*Types Of Ordered List

1.Letters List

2.LowerCase Letters List

3.Roman Numbers List

4.Lowercase Roman Numbers List

*How To Create a Definition List

Source Code :

*Create a Directory list of items :

*Note : Items should be less than 20 characters long.

Source Code :

*How To Generate Select Menus :

Option 1 Option 2 Option 3 Option 4

Here Is The Source Code Of The Above SELECT Menu :

What attributes Can Be Inserted In The SELECT Tag ?

• name="name" : The Name Of The SELECT List.
• multiple : Inserting this attribute In The SELECT Tag Allows To Be More Than One item Shown At A Time.
• size="size" : This is the number of options you want displayed at one time. Only Used When You Use The "Multiple" attribute

Example For The The Multiple Select Tags :

Option 1 Option 2 Option 3 Option 4

Here Is The Source Code Of The Above :

What attributes Can Be Inserted In The OPTION Tag ?

• selected : This is for setting an option as default option - You Can Write Or Not - If You Would Like Any Of The items To Be pre-selected before the page loads(default option), Just Insert The Select Tag In The Desired Option..This item will already be highlighted when the page loads
• value="value" : This One Is Rarely Used. It's Better Not To Use This One.

Here Is An Example Of A Select Menu With 'Selected' Inserted In Option 3 :

Here Is A Live Example Of The Above Code :

Option 1 Option 2 Option 3 Option 4

*Notice That Option 3 Is The Initial Value(default Value)...This Is How The 'Selected' Option Works.. :)

*As you see this select menu has nothing to do. To make use of the select menu, we should add JavaScript To make it useful. Later in this page, U'll Know how JavaScript make Select menu works.

*How To Generate A Text Area : Creates a multi-lined text entry box.

Source Code :

<FORM>
<textarea name="My_Text_Area" rows="5" cols="20" wrap="virtual"> Put your text here</textarea>
</FORM>

*Attributes:

cols="Pixel/Percentage" : Sets width the text box will be.
rows="Pixel/Percentage" : Sets height the text box will be.
name="example" : Sets the name of the text area.
wrap="Hard/Soft/None" : How text will wrap. Possible values are "hard", "soft", or "none".

*How To Change Even Its Look, Example: Add BackGround , Control Its Font Color, Style using CSS:

Source Code :
<FORM>
<textarea name="My_Text_Area" rows="5" cols="50"
style="background:#your color here"
style="font-family:your font here"
style="font-weight:bold"
style="color:#your font color here"
style="border style:solid"
wrap="virtual"> Put your text here </textarea>
</FORM>


*Note : If You Don't Want Text Inside Text Area To Be Bold , Just Remove The "Font-Weight" Line. Through "Font-Family" You Choose Your Font Style Example: Arial, New Times Roman...

*How To Create a Table :

Here Is The Simple Form :

Heading1	Heading2
Description For Title1	Description For Title2

Source Code :

*Good Info: What are Table, TR, TH, TD Tags functions?

What Are The attributes That Can Be Inserted Inside The <Table> Tag :

• border="number" : This Is The Size Of The Border Around The Tables.. If You Would Like To Get Rid Of The Border Around The Table Set The Table Border With Zero
• bordercolor="color-code" : The Color Of The Border If Exists
• cellpadding="number" : This Is The Shaded-Area For The Border. You Can Use This Option Only If You There Is A Border...
• cellspacing="number" : This Is The Spacing Or White-Area For The Border, This Option Doesn't Need The Existence Of The Border Or Not...
• width="number" : This Is The Width Of The Table. This Can Be In a Pixels Or A Percentage.
• height="number" : This Is The Height Of The Table. This Can Be In A Pixels Or A Percentage.
• background="URL" : The URL of the image if you are going to add a Background for your table
• bgcolor="Hex-Code" : The background color of the table.
• cellspacing="number" : Gives the space between the cells of the table.
• cellpadding="number" : The space between the edges of the cell and the text inside cell.
• frame="Possible Values" : Which side of the outer border of the table you want to be displayed.
  Possible Values: VOID: No outer borders are displayed. ABOVE: Displays a border on the top side of the table. BELOW: Displays a border on the bottom side of the table. HSIDES: Displays the top and bottom borders of the table. VSIDES:Displays the right and left side borders. LHS: Displays the left-hand side border. RHS: Displays the right-hand side border.
• RULES="Possible Values" : Specifies which inner borders of the table are displayed.
  Possible types: NONE: No inside borders are displayed. GROUPS--Displays inner borders between the various table groups such as THEAD, TFOOT, TBODY, and COLGROUP groups. ROWS--Displays inner borders between the table rows. COLS--Displays inner borders between the table columns. ALL--Displays inner borders between all rows and columns.

What Are The attributes That Can Be Inserted Inside The <TD> Or <TH> Tag -The Cell Tag- :

• bgcolor="color-code" : This Will Set the Background Color Of The Cell.
• background="yourimage.jpg" : An Image BackGround For The Cell.
• align="left/right/center" : To Set The Place Of The Text In The Cell, Whether To Appear In The Left/Right/Middle (Horizontally)..The Default Is The Left..
• valign="top/middle/bottom" : To Set The Place Of The Text In The Cell, Whether To Appear In The Top/Middle/Bottom (Vertically)..The Default Is Middle.
• width="number" : The Width Of The Cell. This can be in pixels or in percentage.
• bordercolor="Hex-Code" : The border color of the cell.
• nowrap : Prevents word wrapping in the cell
• rowspan="number" : Sets the number of rows the cell should span.
• colspan"number" : Sets the number of columns the cell will span.
• width="number" : The width of the cell.
• height="number" : The height of the cell.

• align="Left/Right/Middle" : To Set The Place Of The Text In The row, Whether To Appear In The Left/Right/Middle (Horizontally)..The Default Is The Left..
• bgcolor="Hex-Code" : The background color for the row.
• bordercolor="Hex-Code" : The border color of the row.
• valign="Top/Middle/Bottom/Baseline" : To Set The Place Of The Text In The Cell, Whether To Appear In The Top/Middle/Bottom/Baseline(Vertically)..The Default Is Middle.
• height="number" : The height of the cell.

*Here Is An Example Of A Table With Different attributes

Source Code :

Notice that any text inside TH Tag is Bold font (default)!

*Here Is An Example Of A Table With No Border..

Source Code :

*Table Tricks:

Other Uses Of the Table: As a matter of fact, Learning how to establish tables using HTML is very essential. There many things you can do using tables. Let me Give you an example.

*Using tables to line up links or Buttons:

Source Code: