Tuesday, November 20, 2012

CSS Float

The css float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.
float:left;
float: right;

Div and span

Div:
Div <div> tag is that it divides the HTML document into sections. Proper usage of the <div> tag is fundamental to good HTML coding, the <div> tag is one of the most powerful tools available to a web developer.

Span:
Span <span> is  in-line level elements, they only span across small amounts of content, typically words or phrases.
For example:
a <span> tag might be used to make a word red in color or to give it an underline.

HTML meta elements:

Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified and other metadata.
The <meta> tag always goes inside the head element. The metadata can be used by browser(how to display content or reload page), search engines(keyword) or other web services.

HTML Tables

The HTML tables is used to show your datas, information, etc in an appropriate way.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for “table data,” and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
To create table, <table> tag is used. An HTML table consists of one or more <tr>, <th> and <td> elements.

HTML Lists

There are 3 different types of lists. They are as follows:
  • Ordered List: A <ol> tag is used an ordered list
  • Unordered List: A <ul> tag is used unordered list
  • Dictionary List: A <dl> tag is used for definition lists

HTML Tags

Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign “<” and end with a greater-than sign “>”.Generally speaking, there are two kinds of tags – opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash “/”. You label content by putting it between an opening tag and a closing tag.

HTML Elements

An HTML element is everything from the start tag to the end tag.
An element consists of three basic parts: an opening tag, the element’s content, and finally, a closing tag.
  • <p> – opening paragraph tag
  •   Element Content – paragraph words
  •  </p> – closing tag
Every (web)page requires four critical elements: the html, head, title, and body elements.

Building calculator using javascript function

Code:
<script type=”text/javascript”>
function add()
{
var first=parseInt(document.getElementById(‘first’).value);
var second=parseInt(document.getElementById(‘second’).value);
var third=document.getElementById(‘answer’);
answer.value= first + second;
}
function subtract()
{
var first=parseInt(document.getElementById(‘first’).value);
var second=parseInt(document.getElementById(‘second’).value);
var third=document.getElementById(‘answer’);
answer.value= first – second;
}
function multiply()
{
var first=parseInt(document.getElementById(‘first’).value);
var second=parseInt(document.getElementById(‘second’).value);
var third=document.getElementById(‘answer’);
answer.value= first * second;
}
function divide()
{
var first=parseInt(document.getElementById(‘first’).value);
var second=parseInt(document.getElementById(‘second’).value);
var third=document.getElementById(‘answer’);
answer.value= first / second;
}
</script>
<table width=”250″ border=”0″ align=”center” >
<tr>
<th width=”100″ scope=”row”>First no:</th>
<td width=”140″><input type=”text” name=”first” id=”first”>&nbsp;</td>
</tr>
<tr>
<th scope=”row”>Second no:</th>
<td><input type=”text” name=”second” id=”second”></td>
</tr>
<tr>
<th colspan=”2″ scope=”row”>
<input type=”submit” name=”add” value=”+” onClick=”add();”>
<input type=”submit” name=”subtract” value=”-” onClick=”subtract();”>
<input type=”submit” name=”multiplication” value=”*” onClick=”multiply();”>
<input type=”submit” name=”division” value=”/” onClick=”divide();”>
</th>
</tr>
<tr>
<th scope=”row”>Total</th>
<td><input type=”text” id=”answer”></td>
</tr>
</table>
Output:

Javascript Functions

Function is a block of codes that performs certain task. A function contains code that will be executed by an event or by a call to the function.
You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file).
A function that does not execute when a page loads should be placed inside the head of your HTML document. Creating a function is really quite easy. All you have to do is tell the browser you’re making a function, give the function a name, and then write the JavaScript like normal.
HTML & JavaScript Code:
<html>
<head>
<script type=”text/javascript”>
<!–
function popup() {
alert(“Hello World”)
}
//–>
</script>
</head>
<body>
<input type=”button” onclick=”popup()” value=”popup”>
</body>
</html>
Display:

JavaScript Operators

JavaScript Arithmetic Operator Chart

OperatorEnglishExample
+Addition2 + 4
-Subtraction6 - 2
*Multiplication5 * 3
/Division15 / 3
%Modulus43 % 10
Modulus % may be a new operation to you, but it's just a special way of saying "finding the remainder". When you perform a division like 15/3 you get 5, exactly. However, if you do 43/10 you get an answer with a decimal, 4.3. 10 goes into 40 four times and then there is a leftover. This leftover is what is returned by the modulus operator. 43 % 10 would equal 3.

JavaScript Operator Example with Variables

Performing operations on variables that contain values is very common and easy to do. Below is a simple script that performs all the basic arithmetic operations.

HTML & JavaScript Code:

<body>
<script type="text/JavaScript">
<!--
var two = 2
var ten = 10
var linebreak = "<br />"

document.write("two plus ten = ")
var result = two + ten
document.write(result)
document.write(linebreak)

document.write("ten * ten = ")
result = ten * ten
document.write(result)
document.write(linebreak)

document.write("ten / two = ")
result = ten / two
document.write(result)
//-->
</script>
</body>

Display:

two plus ten = 12
ten * ten = 100
ten / two = 5

Comparison Operators

Comparisons are used to check the relationship between variables and/or values. A single equal sign sets a value while a double equal sign (==) compares two values. Comparison operators are used inside conditional statements and evaluate to either true or false. We will talk more about conditional statements in the upcoming lessons.
OperatorEnglishExampleResult
==Equal Tox == yfalse
!=Not Equal Tox != ytrue
<Less Thanx < ytrue
>Greater Thanx > yfalse
<=Less Than or Equal Tox <= ytrue
>=Greater Than or Equal Tox >= yfalse

JavaScript Variables and Arrays

JavaScript Variables
Variables are used to hold data in memory. JavaScript variables are declared with the var keyword.
var age;
Multiple variables can be declared in a single step.
var age, height, weight, gender;
After a variable is declared, it can be assigned a value.
age = 34;
Variable declaration and assignment can be done in a single step.
var age = 34;
A Loosely-typed Language
JavaScript is a loosely-typed language. This means that you do not specify the data type of a variable when declaring it. It also means that a single variable can hold different data types at different times and that JavaScript can change the variable type on the fly. For example, the age variable above is an integer. However, the variable strAge below would be a string (text) because of the quotes.
var strAge = "34";
If you were to try to do a math function on strAge (e.g, multiply it by 4), JavaScript would dynamically change it to an integer. Although this is very convenient, it can also cause unexpected results, so be careful.
Arrays
An array is a grouping of objects that can be accessed through subscripts. At its simplest, an array can be thought of as a list. In JavaScript, the first element of an array is considered to be at position zero (0), the second element at position one (1), and so on. Arrays are useful for storing data of similar types.
Arrays are declared using the new keyword.
var myarray = new Array();
It is also possible and very common to use the [] literal to declare a new Array object.
var myarray = [];
Values are assigned to arrays as follows.
myarray[0] = value1;
myarray[1] = value2;
myarray[2] = value3;
Arrays can be declared with initial values.
var myarray = new Array(value1, value2, value3);
//or, using the [] notation:
var myarray = [value1, value2, value3];

JavaScript Basics

Javascript Syntax
  1.     JavaScript statements end with semi-colons.
  2.     JavaScript is case sensitive.
  3.     JavaScript has two forms of comments:
  •   Single-line comments begin with a double slash (//).
  •  Multi-line comments begin with "/*" and end with "*/".
Syntax
// This is a single-line comment
/*
This is
a multi-line
comment.
*/

Dot Notation
In JavaScript, objects can be referenced using dot notation, starting with the highest-level object (i.e, window). Objects can be referred to by name or id or by their position on the page. For example, if there is a form on the page named "loginform", using dot notation you could refer to the form as follows:
Syntax
window.document.loginform
Assuming that loginform is the first form on the page, you could also refer to this way:
Syntax
window.document.forms[0]
A document can have multiple form elements as children. The number in the square brackets ([]) indicates the specific form in question. In programming speak, every document object contains an array of forms. The length of the array could be zero (meaning there are no forms on the page) or greater. In JavaScript, arrays are zero-based, meaning that the first form on the page is referenced with the number zero (0) as shown in the syntax example above.
Square Bracket Notation
Objects can also be referenced using square bracket notation as shown below.
Syntax
window['document']['loginform']
// and
window['document']['forms[0]']
Dot notation and square bracket notation are completely interchangeable. Dot notation is much more common; however, as we will see later in the course, there are times when it is more convenient to use square bracket notation.
Where Is JavaScript Code Written?
JavaScript code can be written inline (e.g, within HTML tags called event handlers), in script blocks, and in external JavaScript files. The page below shows examples of all three.

Example:
<html>
<body>
<h1>My First Javascript</h1>
<script type="text/javascript">
document.write("Hello!! How are you?");
</script>
</body>
</html>

Difference between Java and Javascript

Java
Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems.
Initially, it was designed to make small programs for the web browser called applets.
Java uses the concept of classes and objects that makes reuse of the code easier
Java exhibits the properties like inheritance, data encapsulation and polymorphism.
The main features of Java are as follows:
Provides more flexibility to develop software applications because of object oriented approach.
• Easy to use as it combines the best properties of other programming languages.
• Allows code written in Java to run on different platforms or Java code is independent of platform.
• The code from the remote source can be executed securely.
• Built-in support for computer networks.
Java must be compiled into what is known as a "machine language" before it can be run on the Web. Java also supports automated memory management model that allows developers to get rid of the time consuming method called manual memory management. Programmers can easily do this by implementing automatic garbage collection. But according to some people, Java is slow as well as consumes more memory than other programming languages such as C++.
Javascript
JavaScript is a scripting language(programming language) that was created by the fine people at Netscape and was originally known as LiveScript. It is used to make web pages more dynamic as well as interactive.
Most modern day web browsers have built-in JavaScript. However, JavaScript based web pages can run only if JavaScript is enabled on the web browser and the browser supports it. JavaScript is enabled in most browsers by default.
No special program is required in order to write code in JavaScript as it is an interpreted language. You can use any text editor such as Notepad in order to write JavaScript code. You can also use other text editor that colorizes the different codes making it easier to detect any error.
JavaScript is different from HTML because JavaScript is used to create more dynamic web pages while HTML is a markup language that is used to create static content on the web page.
You can insert the JavaScript code in a HTML file by using the <script> tag. But if you want to use the script in different pages of the website then you can save the scripts in different files with .js extension.

Javascript Introduction

What is JavaScript?

  • JavaScript was designed to add interactivity to HTML pages
  • JavaScript is a scripting language
  • A scripting language is a lightweight programming language
  • JavaScript is usually embedded directly into HTML pages
  • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

PHP Introduction and Installation

PHP is a powerful tool for making dynamic and interactive Web pages.PHP stands for PHP: Hypertext Preprocessor.PHP is a server-side scripting language, like ASP.PHP scripts are executed on the server.PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.).PHP is an open source software.PHP is free to download and use.
PHP files can contain text, HTML tags and scripts.PHP files have a file extension of “.php”, “.php3″, or “.phtml”.
PHP file can be written as follows:
<?php
echo “Namaste! Nepal”;
?>
Here, <?php is the starting tag and ?> is an ending tag. These must be included to write a php file. And echo is used to print output.

An introduction to the HTML

HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other’s research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.

An Introduction to CSS

The CSS is an abbreviation of Cascading Style Sheet. The style-sheet is used to make web pages.  It is used to make a table-less design. The file extension of the css file is .css. There are three ways of inserting style-sheet.
i.            External style-sheet
ii.            Internal style-sheet
iii.            Inline style-sheet