Dinda Ayu Subagio's Blog
Selamat Datang :)

Cascading Style Sheets (CSS)

Posted Selasa, 24 Mei 2011 by bahagia bersama dinda :)


Objektif
¡  CSS Syntax
¡  CSS Id
¡  CSS Class
¡  CSS Formating 

Cascading Style Sheets (CSS)
CSS dihadirkan para designer web untuk mengoptimalkan kemampuannya dalam merancang halaman web.
CSS memungkinkan para designer untuk mengatur format dan layout halaman secara lebih efisien.
CSS dapat diletakkan pada bagian atas dokumen HTML atau pada file tersendiri.

CSS Syntax
Ada tiga cara untuk menggunakan style pada halaman web. Penggunaan cara-cara tersebut tergantung kebutuhan halaman web. Tiga cara tersebut adalah :
      1. Linking.
      2. Embedding.
      3. Import.
Css Linking yaitu menggunakan style sheet dengan cara membuat suatu link pada file dimana style tersebut berada.
CSS Embedding yaitu dengan meletakkan definisi style sheet di bagian atas sebelum dokumen sebelum bagian <body>
CSS Import yaitu mengimport file yang berisi Style Sheet

Contoh Sintax CSS Embedding:

<html>
                <head>
                                <title>Langsung</title>
                                <style type="text/css">
#header{background-color:navy; border:1px solid blue; width:50%;
                margin-left:auto; margin-right:auto; text-align:center;
                font-family:arial; color:white; padding-top: 17px; padding-bottom: 17px;}
hr{
                color:red;
}
                                </style>
                </head>
                <body>
                                                <div id="header">
                                Saya Adalah Anak Gembala, Selalu Riang Serta Gembira
                </div>
                <hr />
                </body>
</html>

Contoh CSS Linking:

<html>
                <head>
                                <title>Coba Style Sheets</title>
                                <link href="css/style.css" rel="stylesheet" type="text/css">
                </head>
                <body>
                <div id="header">
                                Saya Adalah Anak Gembala, Selalu Riang Serta Gembira
                </div>
                <hr />
                                </body>
</html>
Nb :Perhatikan Syntax <link href>, file css berada di folder css dengan nama file style.css

Sedangkan isi dari file style.css adalah :

#header{
                background-color:navy;
                border:1px solid blue;
                width:50%;
                margin-left:auto;
                margin-right:auto;
                text-align:center;
                font-family:arial;
                color:white;
                padding-top: 17px;
                padding-bottom: 17px;
}
hr{
                color:red;
}

Contoh CSS Import :

<html>
                <head>
                                <title>Langsung</title>
                                <style type="text/css">
                                                @import url(http://localhost/cs/css/style.css);
                                </style>
                </head>
                <body>
                                                <div id="header">
                                Saya Adalah Anak Gembala, Selalu Riang Serta Gembira
                </div>
                <hr />
                </body>
</html>

Sedangkan isi dari file style.css adalah :

#header{
                background-color:navy;
                border:1px solid blue;
                width:50%;
                margin-left:auto;
                margin-right:auto;
                text-align:center;
                font-family:arial;
                color:white;
                padding-top: 17px;
                padding-bottom: 17px;
}
hr{
                color:red;
}

CSS ID and CSS Class
Untuk mensetting style untuk html element, CSS menyediakan beberapa pilihan yang biasa disebut ID dan Class
Secara garis besar css id dideklarasikan menggunakan karakter “#” (Pagar) sedangkan css class dideklarasikan menggunakan karakter “.” (Titik)
CSS ID merujuk sebagai style specifik single user atau unique element atau bahasa paling gampang hanya boleh sekali digunakan
CSS ID merujuk sebagai style specifik single user atau unique element atau bahasa paling gampang hanya boleh sekali digunakan
CSS Class adalah kebalikan dari CSS id, jadi CSS class dapat digunakan beberapa kali dan bukan element unique melainkan group element
CSS Class lebih digunakan untuk format style tulisan, sedangkan ID untuk melayout bagian-bagian utama template seperti header, sidebar atau kolom footer.

CSS ID
The id Selector
•          The id selector is used to specify a style for a single, unique element.
•          The id selector uses the id attribute of the HTML element, and is defined      with a "#".
•          The style rule below will be applied to the element with id="para1":
Contoh :
#para1
{
text-align:center;
color:red;
}

CSS Class
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
Contoh :
.center {text-align:center;}

CSS Formating
CSS menyediakan fungsi untuk memformat tampilan di halaman web berikut ini contoh dari css formating : 

Property
Description
Values
Color
Sets the color of a text
Color
Text-align
Aligns the text in an element
Left, right, center, justify
Text-decoration
Adds decoration to text
None, underline, overline,
line-through, blink
Float
Specifies whether or not a box should float
Left, right, none, inherit
Position
Specifies the type of positioning for an element
Absolute, fixed, relative, static,
inherit
DLL



| 0 komentar

Client Side Programming (Javascript)

Posted by bahagia bersama dinda :)


Objektif
¡  Scripting Variable
¡  Scripting Arithmetic
¡  Scripting Comparison
¡  Scripting Branching
¡  Scripting PopUp
¡  Scripting Function
¡  Scripting Loops
¡  Scripting Event
¡  Scripting Error Handling
¡  Scripting Special Characters

What is Javascript
JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
•          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)
•          Everyone can use JavaScript without purchasing a license

Scripting Variable
Rules for JavaScript variable names:
•          Variable names are case sensitive (y and Y are two different variables)
•          Variable names must begin with a letter or the underscore character
Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
Examples declaring variable in Javascript :
<html>
                <body>
                                <script type="text/javascript">
                                <!--
                                var a = "Kelas Desain dan Pemrograman Web";
                                //-->
                                </script>
                </body>
</html>
Beberapa variable in javascipt;
Var a = “teguh”;  ->(string)
Var b = 123;       ->(numerik)
Var c = 123.321; ->(float)
Convert nilai:
Var d = parseInt(123.321);
Var e = parseFloat(123.01);

Scritping Arithmetic
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators: 

Operator
Decription
Examples
Result
+
Addition
x=y+2
X=7
-
Subtraction
x=y-2
X=3
*
Multiplication
x=y*2
X=10
/
Division
x=y/2
X=2.5
%
Modulus (division remainder)
x=y%2
X=1
++
Increment
x=++y
X=6
--
Decrement
x=--y
X=4


Scripting Comparison
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x=5, the table below explains the comparison operators:

Operator
Description
Example
==
Is equal to
x==8 is false
===
is exactly equal to (value and type)
x===5 is true
x==="5" is false
!=
is not equal
x!=8 is true
> 
is greater than
x>8 is false
< 
is less than
x<8 is true
>=
is greater than or equal to
x>=8 is false
<=
is less than or equal to
x<=8 is true

Logical Operator :
Logical operators are used to determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators: 

Operator
Description
Example
&&
and
(x < 10 && y > 1) is true
||
or
(x==5 || y==5) is false
!
not
!(x==y) is true

Scripting Branching
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
if statement - use this statement to execute some code only if a specified condition is true
if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false
if...else if....else statement - use this statement to select one of many blocks of code to be executed
switch statement - use this statement to select one of many blocks of code to be executed 

Scripting PopUp
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box. 

Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed. 

Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Scripting Function
The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
<html>
<head>
<script type="text/javascript">
                function product(a,b){
                                return a*b;
                }
</script>
</head>
<body>
<script type="text/javascript">
                document.write(product(4,3));
</script>
</body>
</html>

Scripting Loops
In JavaScript, there are two different kind of loops:
for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true 

Sintax For
<html>
<body>
                <script type="text/javascript">
                                var i=0;
                                for (i=0;i<=5;i++){
                                                document.write("The number is " + i);
                                                document.write("<br />");
                                }
                </script>
</body>
</html>

Sintax While
<html>
<body>
                <script type="text/javascript">
                                var i=0;
                                while (i<=10){
                                     document.write("The number is " + i);
                                       document.write("<br />");
                                        i++;
                                }
                </script>
</body>
</html>

Scripting Event
Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Event
Fungsi
onLoad
Pertama kali di tampilkan
onClick
Button di Click
onMouseOver
Event pointer masuk ke daerah yang diblok
Dan lain-lain

Scripting Error Handling
When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.
The try...catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.
Scripting Special Character
In JavaScript you can add special characters to a text string by using the backslash sign. 

Code
Output
\’
single quote
\”
double quote
\&
ampersand
\\
backslash
\n
new line
\r
carriage return
\t
tab
\b
backspace
\f
form feed

| 0 komentar
Langganan: Postingan (Atom)

Shoutmix