My Photos

My Photos
Rocking..

Thursday 29 December 2011

My Semester so Far

It has been awhile since I last blogged. Though on a technical note, that is not true. You see, I am currently working as a blogger for my school. And no, I would not post the link here as my posts there does not sound like me at all :) So yeah, blogging has basically became more of a job to me than of a leisure like it used to be. And to think about it, I am two posts behind on it right now :/

So anyway, enough of that. As most of you would know, I went back home for the summer! woo hoo for that! And now that I'm back in Michigan. I'm starting to get sick of the constant cold here and is starting to miss the warmth back home. Though ironically I could almost bet myself that I would think otherwise if I'm home :p

Things have been going fairly well here I suppose. My life here is definitely much smoother now than it first was.

So a couple of updates! I am currently the secretary of my school's SIFE team, as well as one of the head leaders of my school's International Student Union (ISU) team. I am also in my school's production team called Epic, where they produce episodes online. I am not really active in Epic due to time constraint. But it is fun to be able to work with the camera and behind the scene stuffs :) so my schedule is mostly filled with meetings meetings and more meetings. and classes of cos. heh. Apart from that, my semester so far is pretty mixed up. Being that I have decided to take most of my general classes. Zoology being one of them, and I'm absolutely loving that class! Probably cos it mostly has got to do with animals :) I am most definitely active in the gym. In fact, most people seem to know me for that. haha. I'm starting on a new 52 weeks workout though and I'm already almost one month in! Hoping to get results pretty soon! Also, I'm currently working as an accompanist! Yes I get paid to play for others to sing. hehe.

And yes, I just have to say this, but, I have been to Cedar Point!! World's top amusement park! where the world's best steel roller coaster is located, as well as the world's fastest and highest coaster. and i'm proud to say that I've sat them. woo hoo!

Oh! and I've finally been to my first homecoming dance, experienced my first fall/ autumn, joined my first jazz band, and rode a bull! :) well fake one lah. haha. So many new experiences and more yet to come! It's great! I'm ready for snow!

So I have a study group to go to in about 15 minutes. That's probably why I've decided to finally update this blog of mine. To waste some precious time :p

On a final note, I'm excited to meet up some old friends over Christmas break in Texas! Can't wait :) Though I would most definitely prefer ingraining my buttocks for 28 hours on an airplane seat back home to see the boyfriend again. But he can wait till next summer :p Patience ya dear!

till next time! Maybe a long time. who knows? hehe.

Wednesday 28 December 2011

CSS Manuals


What is CSS?
·         CSS stands for Cascading Style Sheets. A style defines how an HTML element is displayed.
Why use CSS?
·         Making website changes quickly.
·         Saving lots of works and loading website fast.
·         Build more diverse websites.
Types of CSS
 The Style Declaration is at the heart of CSS.  There are 3 types of Styles we are using
    1.  Internal (Embedded) Styles
    2.  Inline Styles
    3.  External Styles

1. Internal / Embedded Styles

·         These Styles can be re-used only for the web page in which they are embedded.
·         Therefore, you would need to create these styles over and over again for each web page you wish to style.
·         When using the style builder, Define the style in the Current Page.   This will create an Internal Style. But, Internal Styles are not ideal.
·         The <style> tag is used to write an Internal Style. Here's an Example:

<head>
            <style type="text/css">
            .test{
                        color: #222;
                        font-weight:bold;
            }
            </style>

</head>

2. Inline Styles

Inline Styles cannot be resused at all, period.  Inline styles are placed directly inside an HTML element in the code.  We cannot use the Style Builder to make an Inline Style. Instead, to purposely create an inline style requires you to go into the HTML code and type the style yourself.

·         Inline Styles do not have a Selector.  Why not?  The reason is because an inline style is embedded directly inside the html element it styles.  Therefore, there's no need for a selector.

·         Example of an Inline Style:
<p style="font-size: 14px; color: purple;"></p>

3.  External Style Sheet

   
·         The External Style Sheet is basically a Text File that is Saved As a .css file.  It is simply a separate page from our html pages.
·         This will allow us to reuse the styles as many times as we would like simply by linking the External Style Sheet to other web pages.
·         We must Link the External Style Sheet to the Web Page(s) in order for the External Styles to be applied as specified.
·         <link href="main.css" rel="stylesheet" type="text/css" >
CSS Syntax
·         A CSS rule has two main parts: a selector, and one or more declarations:
·         The selector is normally the HTML element you want to style.
·         Each declaration consists of a property and a value.
·         The property is the style attribute you want to change. Each property has a value.
·         A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:






CSS Comments
·         Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this

CSS Selectors
·         The core selectors are   
    1.   ID
    2.   Class
    3.  Tag or Element
    4.  Descendant
    5.  Universal
1. ID Selectors
·         An ID Selector is indicated by using the pound # sign.
·         Use an ID Selector for page elements that occur one time on a web page.   In other words, ID  Selectors must be unique.
·         A perfect example is the Layout.  Use an ID Selector for each div of the CSS Layout.
·         Example : #idname(example : <p id=”idname”>Text</p>)
·          
2. Class Selectors
·         For instance,  .bold_text  is a class selector that defined.
·         Class Selectors must begin with a period followed by a letter.  Cannot use a number immediately after the period.
·         A Class Selector can be used as many times as needed on a single web page.
·         You are required to use the period at the beginning, but you can use any words you would like to name the selector
·         Example: .classname
·         We can call the class using class within HTML tag(example : <p class=”classname”>Text</p>)

3. Tag Selectors
·         A Tag Selector is simply the HTML tag weare styling, but without the class name and ID name.
4. Descendant Selectors 
·         A Class Selector is indicated by a period .
·         Descendant Selectors are created to style any nested elements.  For instance, if we style a paragraph that is inside the #maincontent div, we will use a descendant selector.

#maincontent p { font-size: 13px;}

·         The space between #maincontent and the letter p is intentional.  It means we are styling all paragraphs located inside the maincontent div.
5. Universal Selectors
Pseudo Class Selectors are used to style the four states of a hyperlink.
  • a
  • a:link
  • a:visited
  • a:hover
  • a:active
CSS Properties
1.Background Properties
·         CSS background properties are used to define the background effects of an element.
·         CSS properties used for background effects:
1.       background-color
2.       background-image
3.       background-repeat
4.       background-attachment
5.      background-position
*  The background-color property specifies the background color of an element. You can set the background color to a certain color or set the background color as transparent.( body { background-color: #98AB6F }  or      pre { background-color: transparent;})
* Background-image is to set an image as as the background of an element. By default, the image is repeated so it covers the entire element. The Syntax goes like this: (background-image : none or url ( url ) )
*  By default,the background-image property repeats an image both horizontally and vertically, however you can set the background-image repeats only horizontally (repeat-x) or only vertically (repeat-y). The Background-repeat Syntax goes in this way: (background-repeat : repeat | no-repeat | repeat-x | repeat-y)
*  Background attachment is to used to set background scroll naturally, or to have it in a fixed position.
Example:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
 Background-position is used to define the exactly position an image appears within an element.
Example:
body
{

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
2.Font Properties
·         CSS font properties define the way text is displayed, the font family, boldness, size, and the style of a text.
1.       font
2.       font-family
3.       font-size
4.       font-style
5.      font-variant
6.      font-weight
*  font: Sets all the font properties in one declaration.
*  The font-family property is to define the font family of a text.
*  The font-size property is to set the size of your fonts. There are three ways to set it, by using values, percentages, or key terms.
p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }
h1 {font-size:2.5em;}
*  font-style property is mostly used to specify italic text.This property has three values:
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
*  font-variant property is to specify and convert font to all small caps.
span { font-variant: small-caps; }
*  The font-weight property sets how thick or thin characters in text should be displayed.

p.normal {font-weight:normal}
p.thick {font-weight:bold}
p.thicker {font-weight:900}

3.Text Properties
·         CSS Font covers most of the traditional ways to format your text, CSS Text enables you to control the spacing, decoration, and alignment of your text.
1.       color
2.       text-decoration
3.       text-transform
4.       text-align
5.      letter-spacing
6.      word-spacing
7.      direction


*  The color property is used to set the color of the text, The color can be specified by :name,RGB,Hexa
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
*  The text-decoration property is used to set or remove decorations from text.
text-decoration : none |underline |blink |overline |line-through|blink
*  The text-transform property is used to specify uppercase and lowercase letters in a text, or capitalize the first letter of each word.
text-transform : none | capitalize | uppercase | lowercase
* The text-align property is used to set the horizontal alignment of a text.Text can be centered, or aligned to the left or right, or justified.
text-align : left | right | center | justify
*  The letter-spacing property is used to set the distant between letter in a text.
letter-spacing : normal | length
      normal is the default setting
.div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }
*  The word-spacing property is used to set the distant between word.
letter-spacing : normal | length
*  The direction property specifies the text direction/writing direction.

4.List Properties
In HTML, there are two types of lists:
  • unordered lists - the list items are marked with bullets
  • ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
list-style-image: url('sqpurple.gif');

5.Link Properties
·         CSS Links can be a style with any CSS property (e.g. color, font-family, background-color). Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
* a:link – a normal, unvisited link
* a:visited – a link the user has visited
* a:hover – a link when the user mouses over it
* a:active – a link the moment it is clicked.
·         a:link {color:#FF0000;} /* unvisited link */
·         a:visited {color:#00FF00;} /* visited link */
·         a:hover {color:#FF00FF;} /* mouse over link */
·         a:active {color:#0000FF;} /* selected link */
  • The CSS border properties allow you to specify the style and color of an element's border.
  • The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
  •   The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
  •  The CSS padding properties define the space between the element border and the element content.
  •   The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
  • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
  •  Float is very often used for images, but it is also useful when working with layouts.
                         I will add more shortly......



The Mother...




Hi, Mommy.
... ...I'm your baby. You don't know me yet, I'm only a few
weeks old. You're going to find out about me soon, though, I promise.
Let me tell you some things about me. My name is John, and I've got
beautiful brown eyes and black hair. Well, I don't have it yet, but I
will when I'm born. I'm going to be your only child, and you'll call me
your one and only. I'm going to grow up without a daddy mostly, but we
have each other. We'll help each other, and love each other. I want to
be a doctor when I grow up.


You found out about me today, Mommy! You were so excited, you couldn't
wait to tell everyone. All you could do all day was smile, and life was
perfect. You have a beautiful smile, Mommy. It will be the first face I
will see in my life, and it will be the best thing I see in my life. I
know it already.

Today was the day you told Daddy. You were so excited to tell him about
me! ...He wasn't happy, Mommy. He kind of got angry. I don't think that
you noticed, but he did. He started to talk about something called
wedlock, and money, and bills, and stuff I don't think I understand
yet. You were still happy, though, so it was okay. Then he did
something scary, Mommy. He hit you. I could feel you fall backward, and
your hands flying up to protect me. I was okay... but I was very sad
for you. You were crying then, Mommy. That's a sound I don't like. It
doesn't make me feel good. It made me cry, too. He said sorry after,
and he hugged you again. You forgave him, Mommy, but I'm not sure if I
do. It wasn't right. You say he loves you... why would he hurt you? I
don't like it, Mommy.

Finally, you can see me! Your stomach is a little bit bigger, and
you're so proud of me! You went out with your mommy to buy new clothes,
and you were so so so happy. You sing to me, too. You have the most
beautiful voice in the whole wide world. When you sing is when I'm
happiest. And you talk to me, and I feel safe. So safe. You just wait
and see, Mommy. When I am born I will be perfect just for you. I will
make you proud, and I will love you with all of my heart.

I can move my hands and feet now, Mommy. I do it because you put your
hands on your belly to feel me, and I giggle. You giggle, too. I love
you, Mommy.

Daddy came to see you today, Mommy. I got really scared. He was acting
funny and he wasn't talking right. He said he didn't want you. I don't
know why, but that's what he said. And he hit you again. I got angry,
Mommy. When I grow up I promise I won't let you get hurt! I promise to
protect you. Daddy is bad. I don't care if you think that he is a good
person, I think he's bad. But he hit you, and he said he didn't want
us. He doesn't like me. Why doesn't he like me, Mommy?

You didn't talk to me tonight, Mommy. Is everything okay?

It's been three days since you saw Daddy. You haven't talked to me or
touched me or anything since that. Don't you still love me, Mommy? I
still love you. I think you feel sad. The only time I feel you is when
you sleep. You sleep funny, kind of curled up on your side. And you hug
me with your arms, and I feel safe and warm again. Why don't you do
that when you're awake, any more?

I'm 21 weeks old today, Mommy. Aren't you proud of me? We're going
somewhere today, and it's somewhere new. I'm excited. It looks like a
hospital, too. I want to be a doctor when I grow up, Mommy. Did I tell
you that? I hope you're as excited as I am. I can't wait.

...Mommy, I'm getting scared. Your heart is still beating, but I don't
know what you are thinking. The doctor is talking to you. I think
something's going to happen soon. I'm really, really, really scared,
Mommy. Please tell me you love me. Then I will feel safe again. I love
you!

Mommy, what are they doing to me!? It hurts! Please make them stop! It
feels bad! Please, Mommy, please please help me! Make them stop!

Don't worry Mommy, I'm safe. I'm in heaven with the angels now. They
told me what you did, and they said it's called an abortion.

Why, Mommy? Why did you do it? Don't you love me any more? Why did you
get rid of me? I'm really, really, really sorry if I did something
wrong, Mommy. I love you, Mommy! I love you with all of my heart. Why
don't you love me? What did I do to deserve what they did to me? I want
to live, Mommy! Please! It really, really hurts to see you not care
about me, and not talk to me. Didn't I love you enough? Please say
you'll keep me, Mommy! I want to live smile and watch the clouds and
see your face and grow up and be a doctor. I don't want to be here, I
want you to love me again! I'm really really really sorry if I did
something wrong. I love you!
I love you, Mommy.

Every abortion is just…

One more heart that was stopped.

Two more eyes that will never see.

Two more hands that will never touch.

Two more legs that will never run.

One more mouth that will never speak.


Javascript Manual


What is JavaScript?
·         JavaScript is scripting language used for client side scripting. JavaScript developed by Netscape in 1995 as a method for validating forms and providing interactive content to web site.
·          JavaScript is usually embedded directly into HTML pages
·           JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
·           Everyone can use JavaScript without purchasing a license
Benefits of JavaScript
Following are the benefits of JavaScript.
  • associative arrays
  • loosely typed variables
  • regular expressions
  • objects and classes
  • highly evolved date, math, and string libraries
  • W3C DOM support in the JavaScript
Disadvantages of JavaScript
  • Developer depends on the browser support for the JavaScript
  • There is no way to hide the JavaScript code in case of commercial application
Javascript Rules
·         SCRIPT - The area between the <SCRIPT> and the </SCRIPT> tags defines the script program. Language - Defines the script language. Choices are JavaScript and VBScript.
·         SRC - Defines an external file containing the source code of the JavaScript. It may be a URL with the complete path to the script which may reside at another website. An example is:    <script language="JavaScript" SRC="testscript.js">
·         NOSCRIPT - The area between the <NOSCRIPT> and the </NOSCRIPT> tag is run by browsers that can't run JAVA script or have the feature turned off.
·         JavaScript code starts with the tag <script language="JavaScript"> and ends with the tag </script>. The code placed between <head> and </head>. Sometimes, people embed the code in the <body> tags
·         JavaScript statements end with semi-colons.
·         JavaScript is case sensitive.
·         JavaScript has two forms of comments:
·         Single-line comments begin with a double slash (//).
·         Multi-line comments begin with "/*" and end with "*/".
Document object
document.write("Hi there.")
·         In this code, document is the object. write is the method of this object.
Message Box
There are three message boxes: alert, confirm, and prompt.
Examples:
§  Alert(“Good Morning”);
§  window.confirm("Are you sure you want to quit?")
§  window.prompt("please enter user name")

* An alert can display whatever you want in the dialog box. The only differnce between alert and document.write is that the alert displays the message in a dialog box instead of on the web page and the alert function doesn't understand HTML so there is no point in including HTML tags into an alert call.
*  The confirm function differs from the alert function only in that it has two buttons to choose between instead of only one. The confirm function returns true or false depending on which of the two buttons is selected. If OK is selected then the confirm function returns true, if Cancel is selected it returns false.
*  The prompt() method displays a dialog box that prompts the visitor for input.This method returns the string the visitor has entered.
  Javascript Varibale
*  JavaScript variables are used to hold values or expressions. JavaScript variables can be declared with the var keyword
    Example: var x=5; var name=”Rama”.
Functions
* A function will be executed by an event or by a call to the function.
*  We may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file).
*  Javascript functions are defined using the key word "function" followed by its name and variables being passed
*  Function is two types: User defined function and Pre defined function.
Example1:  function without argument:
<script type=”text/javascript”>
            Function add(){
                        Var a=5;var b=7;
                        Var c=a+b;
                        Alert(c);
            }
            Add();
</script>
Example2:  Function with argument:
Function add(a,b){
                        Var c=a+b;
                        Alert(c);
          }
            Add(4,7);

Example3:  Function with argument with return type:
Function add(a,b){
            Var c=a+b;
            Return c;
          }
           Var c= Add(4,7);
Alert(c);
Event handler
*  Event handler can be considered as triggers that execute JavaScript when something happens, such as click or move your mouse over a link, submit a form etc.
* Events are normally used in combination with functions, and the function will not be executed before the event occurs!


Javascript Date Functions
·         The Date() is used to get today’s date and Time, The Date object is used to work with dates and times. 
Example:
var d=new Date();
document.write(d);
·         getFullYear() is uded to grt full Year
Example:
var d=new Date();
document.write(d.getFullYear());
·         getDay() is returned a weekday, and not just a number.
·         getHours()is returned Hour of the day (integer)(0-23)
·         getMinutes()is returned Minutes of the Last Hour (0-59)
Javascript Array
·         An array is a special variable, which can hold more than one value, at a time.
·         Values are stored into an array by using the array name
·         Values in an array are accessed by the array name and location of the value. Example: myCars [2];
Example : var myCars=new Array("Saab","Volvo","BMW");
·         Object we can access array by using array index.
Example: document.write(myCars[0]); // it will return the first value of myCars array.

·         concat() : Joins two or more arrays, and returns a copy of the joined arrays
Example:
<script type="text/javascript">

var fruit1= Array("apple","orange");
var fruit2= Array("Manago","banana");
var Fruit= fruit1.concat(fruit2);
document.write(Fruit);

</script>
·         pop():Removes the last element of an array, and returns that element.

Example:
<script type="text/javascript">

var fruit1= Array("apple","orange");
document.write(fruit1.pop());

</script>
·         push():Adds new elements to the end of an array, and returns the new length.
·         shift():Removes the first element of an array, and returns that element.
·         unshift():Adds new elements to the beginning of an array, and returns the new length
·         toString() : Converts an array to a string, and returns the result
·         reverse():Reverses the order of the elements in an array.
Javascript String
·         Strings are simply groups of characters. When we declare and manipulate strings in JavaScript, always write them with single quotes ' or double quotes " around them
·         toUpperCase():Convert any text or string from Lower case to Upper Case text by using this function.

var str="This is my 1st new tutorial 123";
var a1 = str.toUpperCase();
document.write(a1);

·         toLowerCase():convert Upper case text to Lower case text by using this function
·         length():Count the total number of chars present including the blank space by using length function.

var my_str="Hello world!"
document.write(my_str.length)

·         concat():add two or more strings by using concat function.
·         indexOf: This returns the first occurrence of a substring within the main string.

var my_str="Welcome to www.Google.com"
document.write(my_str.indexOf("Google "))

·         replace():replace function to search and replace part of a string.

var msg="Welcome to PHP tutorial section to learn PHP";
msg=msg.replace("PHP","JavaScript");
document.write(msg);


                Here is the code to search and replace all occurrence string.

<script type="text/javascript">
var msg="Welcome to PHP tutorial section to learn PHP";
msg=msg.replace(/PHP/g,"JavaScript");
document.write(msg);
</script>


·         split():Splits a string into an array of substrings
var str="2011-11-15";
alert (str.split("-"))

JavaScript Form Validation
JavaScript can be used to validate data in HTML forms before sending off the content to a server.
Form data that typically are checked by a JavaScript could be:
  • has the user left required fields empty?
  • has the user entered a valid e-mail address?
  • has the user entered a valid date?
  • has the user entered text in a numeric field?
Note: We can validate the form using two ways
·         With form (document.formname.fieldname.value)
·         Using ID(document.getElementById(‘id_name’).value);
Example:

HTML Code
<form name=”f1” action=”index.php” method=”post”>
Name:<input type=”text” name=”uname”/><br/>
Password:<input type=”password” name=”pass” id=”pass”/><br/>
<input type=”button” name=”Click” value=”click” onclick=”return validate();”/>
</form>
Javascript Code
<script type=”text/javascript”>
            Function validate(){
            Var name=document.f1.uname.value;  //Using form name and Field name we get value from text box
            Var pass=document.getElementById(‘pass’).value; //Using form name and Field name we get value from password field
            If(name==””){
                        Alert(“name cannot be blank”);
                        Return false;
            }
ld be six character length”);
                        Return false;
            }
If(pass==””){
                        Alert(“Password cannot be blank”);
Return false;
}
  }
If(pass.length<6 || pass.length>10){
                        Alert(“Password should be between six to tencharacter”);
                        Return false;
            }
</script>