Java Script Beginner Tutorial 1 : Introduction

Introduction :
JavaScript is the most popular scripting language on the internet, and works in all major browsers. It can be used without purchasing a license. 


JavaScript was designed to add interactivity to HTML pages. It is a scripting language. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages.


Java and JavaScript :
Java and JavaScript are two completely different languages in both concept and design. Java is a powerful and much more complex programming language , such as C and C++. 
Java is server side language while Java Script is client side language.


Usage of Java Script :
Java Script is used for following purposes.

1. Java Script gives HTML designers a programming tool.
2. Java Script can react to events.
3. Java Script can manipulate HTML elements.
4. Java Script can be used to validate data.
5. Java Script can be used to detect the visitor's browser.
6. Java Script can be used to create cookies.

What is ECMAScript :
JavaScript is an implementation of the ECMAScript language standard. ECMA-262 is the official JavaScript standard.
JavaScript was invented by Brendan Eich at Netscape, and has appeared in all browsers since 1996.
The official standardization was adopted by the ECMA organization in 1997.
The ECMA standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.

CSS Advanced tutorial 14 : CSS Pseudo Elements

There are four pseudo elements. These are :

• First letters 
• First lines
• Before 
• after

First letter :
The first-letter pseudo element applies to the first letter of an element. for example


p:first-letter {
font-size: 2em;
float: left;
}


This will create drop caps for paragraph.


First line :
The first-line pseudo element applies to the top line of an element. For example


p:first-line {
font-weight: bold;
}


This will create a bold first-line for paragraph.


Before and after :
The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML. The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imgname). For example


blockquote:before {
content: open-quote;
}


blockquote:after {
content: close-quote;
}


li:before {
content: "Dragon : "
}


p:before {
content: url(images/img.jpg)
}

CSS Advanced tutorial 13 : Page Layout in CSS

Page layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't, it's just different and actually makes much more sense.

What is Positioning :
The position property is used to define whether an element is absolute, relative, static or fixed. The value static : is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.
relative : is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.
absolute : pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. The absolute element can be placed anywhere on the page using top, right, bottom and left.
fixed : behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, fixed elements should stay exactly where they are on the screen even when the page is scrolled.

Floating :
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page, but it can also be used with bigger chunks. For example

<div style="float:left; width:200px;"> 
    <p>  
         This is paragraph inside first div.      
   </p>
</div>



<div style="float:right; width:300px;"> 
    <p>  
         This is paragraph inside second div.      
   </p>
</div>

This will float the first div to the left side of web page, and float the second div to the right side of web page.

CSS Advanced tutorial 12 : The Display Property

The 'Display' property is used for visual representation of HTML elements. The most fundamental types of display are inline, block-line and none and they can be manipulated with the 'display' property and the values inline, block and none.

inline :   Elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline. For example


#title {
        display : inline;
        color : blue;
}


#desc {
             display : inline;
             color : black;
}


The HTML elements with id 'title' and 'desc' will display next to each other.


block : puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line. For example



#title {
        display : block;
        color : blue;
}


#desc {
             display : block;
             color : black;
}


The HTML elements with id 'title' and 'desc' will display above and below to each other.



none : It doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations , alternate stylesheets or advanced hover effects. For example



#title {
        display : none;
        color : blue;
}



The HTML element with id 'title' will not display in browser.


Difference between display and visibility :
The display and visibility property behaves differently in browser. The 'display: none' and 'visibility: hidden' vary in that 'display: none' takes the element completely out of play, where as 'visibility: hidden' keeps the element and its flow in place without visually representing its contents. For example


<p> This is first paragraph. </p>
<p style="display:none;"> This is second paragraph. </p>
<p > This is third paragraph. </p>


Above code will display the first and third paragraph above and below to each other. If you remove the display:none; from second paragraph then there will be some re-arrangement done with HTML elements. Third paragraph will move down and there will be shown some text between first and third paragraph. 



<p> This is first paragraph. </p>
<p style="visibility:hidden;"> This is second paragraph. </p>
<p > This is third paragraph. </p>


Above code will display first and third paragraph above and below to each other. But there will be a gap between them, This gap is equal the size of second paragraph. If you remove visibility:hidden; from second paragraph then you will see the text in place of gap. No HTML element re-arrangement will be done.



Other display types :
There are some other types of display that you can use with HTML elements. These are


list-item :  It displays as in the way that you would usually expect an li HTML element.
run-in :  It makes an element either in-line or block-line depending on the display of its parent. It doesn't work on IE and Mozilla.
compact : It makes the element inline or block-line depending on the context.
marker : It is used exclusively with the :before and :after pseudo elements to define the display of the value of the content property. The automatic display of the content property is already marker, so this is only useful if you are overriding a previous display property for the pseudo element.

CSS Beginner tutorial 11 : Background Images

There are a number of properties involved in the manipulation of background images. But the property background can deal with them all. For example


body {
background: white url(http://www.yoursite.com/images/bg-image.jpg) no-repeat top right;
}


There are some other properties, which you can use instead using above single property. These properties are as follows.

• background-color
• background-image 
• background-repeat 
• background-position

The details of these properties are below.


background-color : 
It is the color of background.


background-image : 
It is the location of the image.


background-repeat : 
It will set, how the image repeats itself. This can be 

• repeat
• repeat-y         (repeating on the 'y-axis', above and below) 
• repeat-x         (repeating on the 'x-axis', side-by-side)
• no-repeat       (which shows just one instance of the image).

background-position : 
It can be top, center, bottom, left, right or any sensible combination, just like as above.