MCSL-016 BLOCK 1->UNIT 3

+++++++++++

+++Links...+++

+++++++++++



A links moves us from the current page to a destination that is specified in the HTML page.



URL stands for Universal Resource Locator.



Anchor Tag(<a>, </a>) : is used to create links between different objects like HTML pages, files, web sites, etc. href is the most common attribute of the ANCHOR tag. It defines the destination of the link.



Example:

<a href="http://www.google.co.in">GOOGLE.CO.IN</a>



For Email LINK:

<a href="mailto:emailid@domainname.com">send mail to</a>





++++++++

++LIST...++

++++++++



List are used when the data are to be mentioned in the form of points.



List are segerated into three types namely ORDERED list, UNORDERED list, and DEFINITION list



UNORDERED LIST: <UL>,</UL>



Sometimes these list are also called bulleted lists. These lists are characterized by list items that do not have numbers. They ar used when the points in the list have no particular order. It has the TYPE attribute through which we can be changed bullet appearance.

There are three types

1. "disc"

2. "square"

3. "circle"



Each point in the list is delimited by the <LI>, </LI> tags.



Example

<UL type = "DISC"> <!-- you have use only one type at a time. By default its type is DISC-->

<LI>PRADEEP</LI>

<LI>SHANKAR</LI>

<LI>SHARAN</LI>

</UL>





ORDERED LIST: <OL>, </OL>



Lists having numbered items are known as ordered lists. They are used when the items in the list have a natural order. It has the TYPE attribute through which we can be change the numbering format.

There are listed the types:



1. "1"

2. "i"

3. "I"

4. "a"

5. "A"



Each point in the list is delimited by the <LI>, </LI> tags.

Example

<OL type = "A"> <!-- you have use only one type at a time. By default its type is "1"-->

<LI>PRADEEP</LI>

<LI>SHANKAR</LI>

<LI>SHARAN</LI>

</OL>



DEFINITION LIST: <DL>, </DL>



Definition lists have a heading and the text appears below that.



Defintion headings specified by the <DT>, </DT>

Definition should be specified between <DD>, </DD>



Example:

<DL>

<DT>LIFE</DT>

<DD>LIFE BECOMES LIE WITHOUT FRIENDS......</DD>

</DL>





++++++++++

++TABLES..++

++++++++++



A table is simply a combination of rows and columns. Three tags form the essential ingredients for creating a table.



1.<TABLE>,</TABLE> => This is main tag. It tells the browser that a table follows. It has attributes like size, border, cellspacing, cellpadding, width, height.

2.<TR>, </TR> => It defines horizontal row that consists of Table Data cells.

3.<TD>,</TD> => It specifies an individual block or cell in a table row.



TR and TD has attributes like width, height, align, valign.



CELLSPACING :-> It determines the spacing between adjacent cells. Its default value is 2.

CELLPADDING:-> It determines the space between the border of the cell and the contents of the cell.



COLSPAN:-> Using this attribute we can MERGE the multiple columns into one column.

ROWSPAN:-> Using this attribute we can MERGE the multiple rows into one row.



Example:



<table border="0" cellspacing="2" cellpadding="2" width="100%" height="100%">

<tr align = "center" valign="center">

<td>a</td>

<td>b</td>

<td>c</td>

</tr>

<tr>

<td colspan = "2" align="center" valign="center"> colspan</td>

<td>notspaned</td>

</tr>

<tr>

<td rowspan = "2" align="center" valign="center">rowspaned</td>

<td>notspaned</td>

<td>notspaned</td>

</tr>

<tr align = "center" valign="center">

<td>a</td>

<td>b</td>

</tr>

</table>



+++++++++++

++FRAMES...++

+++++++++++



If we want to see the multiple HTML documents in a one HTML document side by side then we use the frames. For this there are only two major frame tags:



1. <FRAMESET> :-> It is a container tag. It has the COLS and ROWS attributes which specifies the division of page(How many frames shows on the page at a time in rows or cols depends on you).

2. <FRAME> :-> It's not a container tag. It has the SRC attribute which specifies the source file path to be displayed in that frame.



Exapmle:

<FRAMESET cols="50%,25%,25%"><!-- Make sure that the percentage total must be 100% -->

<FRAMESET rows="25%,62%,*"><!-- We can use * instead of a number. The * means whatever is left over-->

<FRAME SRC="URL">

<FRAME SRC="URL">

<FRAME SRC="URL">

</FRAMESET>

<FRAME SRC="URL">

<FRAME SRC="URL">

</FRAMESET>

<BODY>

<NOFRAMES>Oooops!!! Your browser does not handle frames!</NOFRAMES>

</BODY>



There is a NOFRAME tag, This tag is used for those browsers that are not able to interpret FRAME tags.



++++++++++

++FORMS..++

++++++++++



1. FORM Tag <FORM>,</FORM> :->

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.



2. INPUT Tag <INPUT> :-> The INPUT tag is used to indicate where user input is expected. It has different attributes, of which the TYPE attribute is used to specify the kind of input that is to be provided and the NAME attribute is used to specify the name of that INPUT. Default type is TEXT box.



FOR TEXT:

<input type="text" name="mytext" value="" size="10">



FOR PASSWORD:

<input type="password" name="mypass">



FOR RADIO BUTTON:

<input type="radio" name="gender" value="male" /> Male

<input type="radio" name="gender" value="female" /> Female



FOR CHECKBOX:

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike

<input type="checkbox" name="vehicle" value="Car" /> I have a car



FOR PULL DOWN LIST: <SELECT>,</SELECT>

for this input type we have to use <SELECT> tag instead of <INPUT> tag.

for listing an items in the pull down list we have to use <OPTION>,</OPTION> tag



<select name="Alphabets">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

</select>



FOR BUTTONS:

<input type="button" name="mybutton" value="BUTTON">



FOR SUBMIT BUTTON: => This submits the all data from the form.

<input type="submit" name="submitbutton" value="SUBMIT">



<input type="reset" name="resetbutton" value="CLEAR">



TO BE CONTINUE.......

MCSL-016 BLOCK 1->UNIT 4(1)

Before starting the Java Script Tutorial, Let us see the how add the JAVA SCRIPT in the HTML document../

In the HTML document we can write the java script in the HEAD tag and also in the BODY tag, using SCRIPT tag.

Syntax of writing java script in HTML document...

Under Head tag
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
                OR
<SCRIPT TYPE="text/JavaScript">
---------------------------------------
---------------------------------------
    BODY OF THE JAVASCRIPT

---------------------------------------
---------------------------------------
</SCRIPT>

</HEAD>


       OR

Under Body tag
<BODY>

<SCRIPT LANGUAGE = "JavaScript">
                OR
<SCRIPT TYPE="text/JavaScript">
---------------------------------------;
---------------------------------------;
    BODY OF THE JAVASCRIPT;

---------------------------------------;
---------------------------------------;
</SCRIPT>

</BODY>

NOW, Lets go to the JavaScript Tutorial.........

JAVA SCRIPT IS CASE SENSITIVE LANGUAGE.


Commenting in JavaScript

// Single line comment
/*Multiline
comment*/

Every Statement must be terminated by Semicolon( ; )

VARIABLES:

Variables store and retrieve data/values. A variable can refer to a value, which changes or is changed. For declaring a variable there are some rules are as follows:

1. Variable should be start with the letter, Underscore"_", Dollar($).

2. Variable should be unique in his own scope(about scope we can read later).

3. Variable must not contain any blank space and special characters except underscore"_".

4. Subsequent digits can also be digits (0-9).

We can declare JavaScript variables with the var keyword:

Example:

var a; //single variable declaration.

var _a; 

var $a;

var a90, a_bc, $r; // Multiple variables declaration.

Assigning value to variables:

var a = 90;

    OR

var a;

a = 90;

Now Scope of variable:

Local JavaScript Variables

A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (the variable has local scope).
You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.
Local variables are deleted as soon as the function is completed.

Global JavaScript Variables

Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it.
Global variables are deleted when you close the page.

DATA TYPES:

Java Script considers data to fall into several possible types. Depending on the type of data certain operations may or may not be allowed on the values. Variables can be of these types:

1. NUMBER :-> Integer(can be expressed in Decimal, Hexadecimal(leading with 0x/0X), Octal(leading with 0)) and Floating-point numbers

2. BOOLEAN :-> True or False

3. STRING :-> Strings are delineated by single(') or double(") quotation marks.

STATEMENTS AND OPERATORS:

Assignment Operators

OPERATORS	FUNCTIONALITY
=	Assigning the value
+=	Shortcut for Adding to the current value
-=	Shortcut for Subtracting from the current value
*=	Shortcut for Multiplying the current value
/=	Shortcut for Dividing the current value

Comparision Operators

OPERATORS	FUNCTIONALITY
==	Returns true value if the items are same
!=	Returns true value if the items are not same
>	Returns true if the item on the left is greater than the item on the right
>=	Returns true if the item on the left is equal to or greater than the item on the right
<	Returns true if the item on the left is less than the item on the right
<=	Returns true if the item on the left is equal to or less than the item on the right

Arithmetic or Computational Operators

OPERATORS	FUNCTIONALITY
+	Add two values together
-	Subtract one value from another
*	Multiply two values
/	Divides the value on the left by the one on the right and returns the result
++X	Increments the value, then return the value
X++	Returns the value, and then increments the value
--X	Decrements the value, then return the value
X--	Returns the value, and then decrements the value

Logical Operators

OPERATORS	FUNCTIONALITY
&&	Looks at two expressions and returns a value of TRUE if the expressions on the left and right of the operators are both true
||	Looks at two expressions and returns a value of TRUE if either one --but not both-- of the expressions are true

CONTROL STRUCTURES:

JavaScript supports the usual control structures:

1. The Conditional :-> If, If-else, and switch.

2. The Iterations/Loop :-> For, While, Do-While, Break, Continue.

CONDITIONAL STATEMENTS:

When we want to perform different actions for different decisions, then we used Conditional Statements.

In JavaScript we have three Conditional Statements:

1. IF :-> we use this statement if we want to execute a set of code when a condition is true.

2. IF-ELSE :-> we use this statement if we want to select one of two sets of code to execute.

3. SWITCH :-> we use this statement if we want to select one of many sets of code to execute.

Syntax for IF Statement: 

if(condition)
{

            -----------;
            -----------;
            Statements;
            -----------;
            -----------;

}

Syntax for IF-ELSE statement:

if(condition) {             -----------;             -----------;             Statements;             -----------;             -----------; } else {     if(condition)     {               -----------;             -----------;             Statements;             -----------;             -----------;      }     else     {                       -----------;             -----------;             Statements;             -----------;             -----------;      } }

if(condition) {             -----------;             -----------;             Statements;             -----------;             -----------; } else if(condition) {          -----------;          -----------;          Statements;           -----------;           -----------; }

if(condition) {             -----------;             -----------;             Statements;             -----------;             -----------; } else if(condition) {          -----------;          -----------;          Statements;           -----------;           -----------; } else {          -----------;          -----------;          Statements;           -----------;           -----------; }

Syntax for Switch Statement:



switch(myVar) //myVar value must be an integer or a character.
{
     case 1:
            -----------;
            -----------;
            Statements;
            -----------;
            -----------;
            break;

     case 2:
            -----------;
            -----------;
            Statements;
            -----------;
            -----------;
            break;
     case 3:
        | | |
        | | |
        | | |
     default:
            -----------;
            -----------;
            Statements;
            -----------;
            -----------;
            break;

}

Examples:

1. For IF statement: 

var a=10;

if(a==10)

{

    b="true";

}

else

{

     b="false";

}

2. For IF-ELSE statement:

var a = 10; if(a==10) {         b="true"; } else {      if(a == 5)      {             b="Other value";       }       else       {           b = "false";         } }

var a = 10; if(a==10) {     b="true"; } else if(a == 5) {        b="Other value"; } else {       b = "false"; }

3. For SWITCH statement:


switch(myVar) //myVar value must be an integer or a character.
{
     case 1:   //If myVar is 1 this is executed
            -----------;
            -----------;
            Statements;
            -----------;
            -----------;
            break;

     case 2:   //If myVar is 2 this is executed
            -----------;
            -----------;
            Statements;
            -----------;
            -----------;
            break;
     default:   //If myVar is does not satisfy any case
            -----------;
            -----------;
            Statements;
            -----------;
            -----------;
            break;

}
//Break is used here for getting out from the switch statement.

LOOP/ITERATION STATEMENTS:

A loop is a set of commands that executes repeatedly until a specified condition is met/TRUE. Java script supports two loop statements: FOR and WHILE.

FOR LOOP:

A for loop repeats until a specified condition evaluates to false.

Syntax for FOR loop:

for(initial-expression; condition; increment/decrement-expression) 

{

      - - - - - - - - - - - - - -;

      - - - - - - - - - - - - - -; 

            Statements;

      - - - - - - - - - - - - - -; 

      - - - - - - - - - - - - - -; 

}

Example:


for(var i=0; i<=5; i++)

{
    alert(i); // Shows the 6 alert windows with the value of "i"...
}

WHILE LOOP:

The while statement defines a loop that iterates as long as a condition remains true.

Syntax for WHILE loop:

initial-expression;

while(condition)

{

   

      - - - - - - - - - - - - - -;

      - - - - - - - - - - - - - -; 

            Statements;

      - - - - - - - - - - - - - -; 

      - - - - - - - - - - - - - -;
     increment/decrement-expression;

 }

Example:

var i=0;
while(i<=5)

{
    alert(i);  // Shows the 6 alert windows with the value of "i"...
    i++;
}

BREAK STATEMENT:



The break statement is used for terminating the current WHILE of FOR loop and then transferring program control to the statement just after the terminated loop.


Example:


for(var i=0; i<=5; i++)

{
    alert(i);
    if(i == 3) //Here, if the i is 3 then the loop is terminated from for loop.
    {
       break;
     }
}
//This is show only 4 alert windows  with the value of "i" on your browser

CONTINUE STATEMENT:


A continue statement terminate execution of the block of statements in a WHILE or FOR loop and continues execution of the loop with the next iteration.


Example:



for(var i=0; i<=5; i++)

{
    if(i == 3 || i == 4) //Here, if the i is 3 or 4 then the loop is terminated for the next iteration.
    {
       continue;
     }
     alert(i);
}
//This is shows alert windows with the value of "i" except whenever "i" is 3 or 4 alert windows.

NEXT


To Be Continued.................

Please leave the comments... and give feedbacks...

MCSL-016 BLOCK 1->UNIT 2

+++++++++++++

++What is HTML?++

+++++++++++++



Ans:

1. HTML stands for Hypertext Markup Language.

2. It is not a PROGRAMMING language, It is a Markup Language.

3. It provides a way of displaying Web Pages.

4. HTML file must have htm or html extension.

5. HTML file is a Text fiel.

6. Its not a case sensitive language.



Example of HTML page

<!--COMMENT -- >

<html> <!-- HTML page begins with this tag-- >

<head><title>RUDRA-KSH</title></head> <!-- Contains info. about a page that will not appear on page itself-- >

<body></body> <!-- Contains all info. that appears on the page.-- >

</html> <!-- HTML page ends with this tag-- >



HTML pages are 2 types:

1. Static Pages

2. Dynamic Pages



+++++++++++++++++++++++

++++Basic Tags of HTML.....++++

+++++++++++++++++++++++



HTML TAG : <html> Opening tag, </html> closing tag -> It is necessary to write the code for an HTML page between these tags.



TITILE TAG: <title>,</title> -> This tag is written under the Head tag. This tag is used to display the document title on the top of BROWSER WINDOW.



BODY TAG: <body>, </body> -> All the content to be displayed on the web page has to be written within the these tags. It has the following attributes:



1. bgcolour -> for changing the background color of page, Bydefault its white.

2. background -> for specifyng the image to be displayed in the background of the page.

3. link -> indicates the color of the hyperlinks.

4. alink -> indicates the color of active hyperlinks.

5. vlink -> inidcates the color of visited hyperlinks.

6. text -> indicates the color of the text displayed on the page.



+++++++++++++++++++++

++Formating of the TEXT....++

+++++++++++++++++++ ++



HEADERS: Headers are used to specify the headings of sections or sub-sections in a document.

Header TAGS are as follows:



1. <h1> Heading 1</h1>

2. <h2> Heading 2</h2>

3. <h3> Heading 3</h3>

4. <h4> Heading 4</h4>

5. <h5> Heading 5</h5>

6. <h6> Heading 6</h6>



FormattingTags: These tags are used for formatting our text or say give a good look to text.

These Tags are as follows:



1. <B>, </B> || <STRONG>, </STRONG> =>These tags are used for display the text in BOLD face.

2. <I>, </I> || <EM>, </EM> || <ADDRESS>,</ADDRESS> || <CITE>, </CITE> =>These tags are used for display the text in ITALIC.

3. <U>, </U> => This tag is used for Underlining the text to be displayed

4. <P>, </P> =>This tag is use for displaying the text in the form of paragraph.

5. <BR> || <BR /> => This tag is used for insertin a lin break. It has not a closing tag.

6. <HR> || <HR /> => This tag is used for puts a horizontal line on page. It has not a closing tag.

7. <STRIKE>, </STRIKE> => This tag is used for marking a text with strikethrough.(CUTTED TEXT)

8. <TT>,</TT> => This tag is used for displaying text in a fixed width font similar to that of a typewriter.

9.<BLOCKQUOTE>, </BLOCKQUOTE> => This tag indents the left margin of text.





PRE TAG: <PRE>, </PRE>This tag is used to present the text exactly written in the code, including whitespace character.



FONT TAG: <FONT>,</FONT>=> This tag is used to change the characteristics of the font such as: size, color, etc. It has the following attributes:



1. face -> for change the font style. Its value should be given as the name of the desired font.

2. size -> for change the size of text. Font can be displayed in any 7 sizes:

=====> 1 for TINY

=====> 2 for SMALL

=====> 3 for REGULAR

=====> 4 for EXTRA MEDIUM

=====> 5 for LARGE

=====> 6 for REAL BIG

=====> 7 for LARGEST



3. colour -> With this attribute we can change the desired font colour. The values can be specified either in HEXADECIMAL(#RGB=> #000000 to #FFFFFF) format or name of the colour.



Example:

<font face="arial" size=5 colour="RED">



SPECIAL CHARACTERS: There are different character symbols to display the special characters in our HTML document. These are as follows: SC(Special Character), CS(Character Symbol)

SN SC CS

1. < &lt;

2. > &gt;

3. & &amp;

4. " &quot;

5. whitespace &nbsp;



++++++++++++++++++++++

++WORKING WITH IMAGES...++

++++++++++++++++++++++



We can insert/specifies the image on a page with the <IMG> tag. <IMG> tag can be used for displaying an image with the desired height and width.

It has the following attributes:



1. SRC -> This specifies the pathname to the source file that contains the image.

2.WIDTH -> for specifying the desired width of the image.

3. HEIGHT -> for specifying the desired height of the image.

4. BORDER -> It specifies the width of the border of the image. By default it is 0 i.e. there is no border.

5. ALT -> It gives the proper text to describe the image, when image is not loaded or not available or user turnedoff image loading.



Example:



<img src="image.jpeg" width=100 height=100 border=10 alt="image">


Please leave the comments... and give feedbacks...