Sunday, November 2, 2014

Memahami Javascript di Dalam Web

java_script

JavaScript adalah bahasa script, bahasa yang tidak memerlukan kompiler untuk menjalankannya, cukup dengan interpreter. Javascript untuk membuat program yang digunakan agar dokumen HTML yang ditampilkan dalam browser menjadi lebih interaktif dan dinamis. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript adalah bahasa script yang membutuhkan interpreter untuk menjalankannya, sedangkan Java adalah bahasa pemrograman yang membutuhkan proses kompilasi terlebih dahulu agar bisa dijalankan. Hampir semua browser web sudah ada interpreter javascript. Oleh karena itu, di sarankan menggunakan browser web versi yang lebih baru agar mendapat dukungan javascript yang lebih baik.

Struktur Javascript


<script language="javascript" type="text/javascript">
<!--
Penulisan kode javascript
//-->
</script>


Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.

Penggunaan javasscript pada obyek :


  • Properti 

Properti adalah atribut dari sebuah objek. Contoh, objek laptop punya properti warna laptop.

Sintak penulisan:

Nama_objek.nama_properti = nilai
window.defaultStatus =”Hello JavaScript”;



  • Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.

Sintak Penulisan :

Nama_objek.nama_metode(parameter)
document.write(”Belajar JavaScript”)



Pemakaian Javascript :

Ada 3 yang bisa kita gunakan yaitu :

1. Embedded Script

Embedded script adalah cara menyisipkan javascript di dalam dokumen HTML. Anda bisa menyisipkan script javascript di bagian head dan bagian body. Bagian body biasanya jarang digunakan.

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>Embedded Script</title>
<script type="text/javascript">
document.write("Hello, Ini Javascript di bagian &lt;head&gt;")
</script>
</head>
<body>
<h2>Bagian Body</h2>
<script type="text/javascript">
document.write("Belajar JavaScript")
</script>
</body>
</html>

2. Inline Script

Kode program JavaScript didefinisikan langsung didalam elemen HTML sebagai sebuah atribut. Atribut pada elemen HTML ini biasanya berkaitan dengan event , yaitu sebuah aksi yang dilakukan oleh seorang user. Misalnya seperti saat user menekan (klik) sebuah tombol.

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>Inline Script</title>
</head>
<body>
<a href="#" onClick="alert('Makasih Sudah Klik.');">Ayo Klik! </a>
</body>
</html>

3. External Script

Menempatkan kode program JavaScript secara terpisah, kode program terhubung dengan dokumen dengan meletakkanya pada elemen head. File JavaScript disimpan menggunakan ekstensi .js.

Contoh :

kode hello.js
function hello(){
document.write("Selamat Datang  . . .!")
}

Kode pemanggilan HTML nya 
<!DOCTYPE html>
<html>
<head>
<title>Eksternal Script</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<script type="text/javascript">
hello()
</script>
</body>
</html>

Saturday, November 1, 2014

Jenis - jenis Selektor di Dalam CSS


selektor_css


  • SELEKTOR TAG

Ciri-cirinya :
Nama selektor berupa nama tag.
Contoh :

h1{
font-family : arial;
text-align:center;
background-color:#9900FF;
}


  • SELEKTOR PSEUDO-KELAS

Untuk mengatur sebuah atribut dalam suatu tag.
Ciri-cirinya :
Tag : Pseudo_kelas

Contoh :

a:link { color:purple;}
a:hover {
background-color:purple;
color:white;
}
a:visited { color:yellow;}
a:active { color:red;
}


  • SELEKTOR KELAS

Ciri-cirinya :

•Selektor kelas diawali dengan tanda titik.
•Selektor kelas bisa diterapkan hanya pada elemen tertentu.
•Sebuah elemen bisa mempunyai lebih dari satu kelas.
•Di dalam atribut class, nama-nama kelas dipisahkan oleh spasi.

Contoh :

.header{
background-color:#0000FF;
color:#FFFFFF;
}
.content{
background-color:#00FF00;
color:#FF0000;
}
.band{
color:#00FFFF;
}
div.band{
background-color:#FFFF00;
}
.teknik{
color:blue;
}
.informatika{
background-color:#FF0000;
}


  • SELEKTOR ID

Untuk mengatur elemen yang mempunyai ID tertentu.

Ciri-cirinya :
Selektor ID diawali dengan tanda #

Contoh:

.isi{
background-color:#FF6633;
}
#posisi1{
text-align:right;
color:white;
}
#posisi2{
text-align:left;
color:yellow;
}


  • SELEKTOR KETURUNAN

Selektor yang diberlakukan terhadap suatu elemen HTML yang merupakan keturunan dari suatu elemen.

Contoh:

div ul {
list-style-type:square;
color:red;
}



  • SELEKTOR ORTU-ANAK

Selektor ortu-anak merupakan kasus khusus dari selektor keturunan.
Contoh :

body p {
background-color:green;
color:white;
}


  • SELEKTOR BERSEBELAHAN

Untuk mengatur elemen HTML yang bersebelahan dengan suatu elemen yang lain.

Contoh:

h1+h2{
border-top-style:solid;
}



  • SELEKTOR ATRIBUT

Untuk mengatur elemen HTML yang atribut beserta nilainya cocok dengan kriteria dalam selektor.
Contoh :

div[class="color-3"]{
background-color:red;color:white;
}


  • SELEKTOR PSEUDO-ELEMEN

Selektor ini disediakan dengan tujuan untuk memberikan efek yang menarik.

Css menyediakan 3 pseudo-elemen yaitu:


  1. Pseudo-elemen first-letterberarti karakter pertama.
  2. Pseudo-elemen first-lineberarti baris pertama.
  3. Pseudo-elemen first-childberarti elemen anak pertama

Contoh first-letter:

p:first-letter{
font-size:500%;
color:blue;
float:left;
}

Contoh first-line :

.kesatu:first-line {
font-variant:small-caps;
font-weight:bold;
}

Contoh first-childp:

first-child{
font-variant:small-caps;
font-weight:bold;
}


  • SELEKTOR UNIVERSAL

Selektor yang ditujukan untuk semua elemen.

Contoh :

*{color:red;
}


  • PENGGABUNGAN SELEKTOR

Apabila sejumlah selektor mempunyai bagian deklarasi properti yang sama, maka selektor- selektor tersebut bisa disatukan.

Contoh :

h1,h2,h3{
color:blue;
}


Semoga Bermanfaat !!!

Definis dan Cara Penggunaan CSS

cascading_style_sheet

CSS merupakan singkatan dari Cascading Style Sheet. CSSadalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Macam - macam versi Css :

  • CSS 1 

Masih kuno, css hanya di kembangkan dan digunakan untuk formatting dokumen.

  • CSS 2

Lebih terasa mantap, Css sudah menggunakan font, table-layout, dan format dokumen agar mendukung media printer.

  • CSS 3

 Terbaru, pengembangan dari versi sebelumnya dan memberikan fitur yang mengarah efek animasi seperti border efek, accordion,dll.

Keuntungan Menggunakan Css :


  • Memisahkan pembuatan dokumen (CSS dan HTML).
  • Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web.
  • Akses web lebih cepat saat di-loading (mempercepat pembacaann HTML).
  • Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang.
  • Lebih kecil ukuran file sehingga bandwith yang digunakan juga otomatis menjadi lebih kecil.
  • Dapat digunakan pada semua web browser.

Cara Menggunakan Css :
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu:

  1. Embedded Style Sheet.
  2. Inline Style Sheet.
  3. Linked Style Sheet.


  • EMBEDDED STYLE SHEET


Embedded Style Sheetadalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>.
Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML.

Sintak Penulisannya : <style type="text/css"><!—Atribut CSS --></style>

Contoh

<!DOCTYPE html>
<html>
<head>
  <title>Embedded Style Sheet</title>
</head>
<style type="text/css">
   body{
       background-color:red;
   }
   p{
       font-weight:bold;
       font-size:20px;
       color: white;
       text-decoration: underline;
   }
</style>
<body>
<p>Contoh Embedded Style Sheet</p>
</body>
</html>


  • INLINE STYLE SHEET


Inline Style Sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan saja. Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.

Sintak Penulisannya : <tag HTML style="Properti:value/nilai"> ... </tag HTML>

Contoh :

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Sheet</title>
</head>
<body>
<h1 style="background-color:#9900ff; color:#FFFFF; text-align:center">
Contoh Inline style sheet</h1>
</body>
</html>


  • LINKED STYLE SHEET


Linked Style Sheet adalah cara yang dianjurkan untuk menggunakan kode css dengan HTML. Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di pisahkan. Untuk menggunakan kode css yang telah dipisahkan ini, maka dalam kode html dibuat skrip yang isinya adalah memanggil file css tersebut untuk digunakan dalam kode html.

Sintak Penulisannya : <link rel="stylesheet" type="text/css" href="namafile.css" >

Contoh :

<!DOCTYPE html>
<html>
<head>
<title>Linked Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Contoh Linked style sheet</h1>
</body>
</html>



Code cssnya dengan nama style.css :

body{
background-image:url(latar.jpg);
font-family:georgia;
}
h1{
background-color:#C3B413;
text-align:center;
color:#FFFFF;
}


Keterangan :
Untuk teks yang berwarna biru adalah kode css nya.

Semoga Bermanfaat !!!

Contoh Tampilan Web Sederhana Menggunakan Div

Kali ini saya akan menshare Contoh Tampilan Web Sederhana Menggunakan Div. Sebelumnya kita sudah membahas Cara Membuat Web Statis Sederhana Menggunakan Table, dan sekarang kita akan menggunakan elemen div untuk membuat website. jika kalian belum mengetahui tentang tabel dan div silahkan baca dulu artikel sebelumnya tentang Perbedaan Tabel dan Div di Dalam Html.

Berikut adalah rancangan interfacenya :
rancangan_interface

Berikut contoh tampilan web  nya :

elemen_div

Berikut code Html nya :


<!DOCTYPE html>
<head>
<title>SMA Prestasi Yogyakarta</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon">
</head>

<body>
<!-- homewebsitedesign.blogspot.com -->
<div id="kotak">
<div id="logo"></div>
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Akademik</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
  </div>
<div id="headcont"></div>
<div id="content">
<div id="kiri">
<div id="nav">Info Sekolah</div>
<div id="pages">Content 1</div>

<div id="nav">Support Online</div>
<div id="pages">Content 2</div>

<div id="nav">Award</div>
<div id="pages">Content 3</div>
</div>
<div id="tengah">
<div id="pages">
            <div id="navteng">BERITA TERBARU</div>
                    Berita
            </div>
</div>

<div id="kanan">
<div id="nav">Berita IT</div>
<div id="pages">Content 4</div>

<div id="nav">Link</div>
<div id="pages">Content 5</div>

<div id="nav">Alamat</div>
<div id="pages">Content 6</div>
</div>
</div>
    
<div id="footcont"></div>
<div id="batas"></div>
<div id="footer">Copyright &copy; 2013 SMA PRESTASI Yogyakarta. All Right Reserved</div>
<!-- homewebsitedesign.blogspot.com -->
</div>
</body>
</html>

Keterangan :

Untuk tulisan yang berwarna biru itu pemanggilan code css nya.

Berikut code Css nya :

/*homewebsitedesign.blogspot.com*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #380a62;
font-size:14px;
}
#kotak {
width: 920px;
margin:auto;
}
#kotak #logo {
background-image: url(../images/logo.jpg);
height: 60px;
width: 920px;
}
#kotak #header {
background-image: url(../images/header.jpg);
float: left;
height: 252px;
width: 920px;
margin-bottom:18px;
}
#kotak #content {
background-image: url(../images/background.jpg);
float: left;
width: 902px;
padding-right: 10px;
padding-left: 8px;
}

#kotak #content #kiri {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#kotak #content #tengah {
float: left;
width: 502px;
}
#kotak #content #kanan {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}

#kotak #batas {
clear: both;
}

#kotak #footer {
height: 46px;
width: 920px;
margin-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: center;
}
#kotak #content #tengah #pages {
margin-top: -8px;
text-align: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px; 
border: 1px solid #B6B4B4;
}

#kotak #content #tengah #pages #navteng {
background-color: #FB9B23;
height: 23px;
width:479px;
text-align: left;
color: #FFFFFF;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:20px;
padding-top:10px;
margin-top:-11px;
margin-left:-10px;
border-radius: 0px 0px 0px 0px; 
-moz-border-radius: 0px 0px 0px 0px; 
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #B6B4B4; 
}

#nav {
background-color: #DEBBFB;
height: 20px;
text-align: center;
color: #780ed0;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding:6px 2px 0px 1px;
border: 1px solid #B6B4B4;
border-radius: 7px 7px 0px 0px; 
-moz-border-radius: 7px 7px 0px 0px; 
-webkit-border-radius: 7px 7px 0px 0px;
}
#pages {
border: 1px solid #B6B4B4;
margin-bottom: 5px;
padding-left:8px;
padding-top:10px;
padding-bottom:10px;
padding-right:2px;
border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px;
}

#kotak #headcont {
background-image: url(../images/headcont.jpg);
float: left;
height: 9px;
width: 920px;
}
#kotak #footcont {
background-image: url(../images/footcont.jpg);
float: left;
height: 7px;
width: 920px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 30px;
width: 901px;
top: 220px;
position: relative;
left: 8px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li a {
text-decoration: none;
float: left;
display: block;
padding: 8px;
color: #FFFFFF;
}
#menu ul li a:hover {
color:#F9951D;
}
/*homewebsitedesign.blogspot.com*/


Keterangan : 

Untuk tulisan yang berwarna biru itu merupakan url gambar, silahkan ganti dengan gambar anda sendiri.


Selamat Mencoba !!!


Perbedaan Tabel dengan Div di dalam Html


Berikut ini adalah perbedaan antara Table dan Div :

Tabel 

Tabel biasanya diawali dengan tag <table> dan memiliki tag <td> (kolom) dan tag <tr> (baris).Untuk tabel biasanya penggunakan background warna, gambar dan lainya berada didalam tabel tersebut, tidak terpisah. Tabel memang mudah dipahami karena sistematis dalam pengerjaanya dan tingkat presisi elemenya pun lebih tinggi sehingga pasti kompetibel dengan kebanyakan browser.
Tetapi  sayangnya menggunakan table dapat memakan memory karena ukuranya lebih besar, sehingga tidak menutup kemungkinan loading sebuah website akan terasa lama dan juga membutuhkan bandwith yang cukup besar.

Contoh Penulisan Tabel :

<tabel>
  <tr>
     <td>baris 1, kolom 1</td>
     <td>baris 1, kolom 2</td>
     <td>baris 1, kolom 3</td>
  </tr>
</table>

 DIV

Div merupakan singkatan dari division yaitu sebuah tag html yang di gunakan untuk membuat suatu bagian atau kelompok tertentu untuk mengelompokan suatu file agar lebih mudah saat kita ingin mencarinya. Div merupakan elemen berbasis Css yang bersifat "float" sehingga bisa diletakan dimana saja.  Div sangat cocok jika digunakan untuk layout yang kompleks, ukuranya pun lebih kecil dibanding tabel sehingga tidak menyedot banyak bandwith dan loading sebuah website pun akan terasa cepat. selain itu juga menggunakan div dapat mempercepat pendeteksian di search engine. Tetapi dalam hal menggunakan div dibutuhkan ketelitian dalam hal menuliskan tag-tag div, dan ketika terjadi error cukup sulit untuk memperbaikinya apabila kita tidak mengetahui pasti dan tidak teliti dalam hal penulisan sebuah tag.

contoh penulisan tag Div dengan Css :

<div style="background: #fffff">
Isi content
</div>

Kedua elemen tersebut memiliki kelebihan dan kekurangan masing-masing, tergantung kebutuhan anda, elemen yang mana yang pas untuk anda gunakan.

Cara Membuat Web Statis Sederhana Menggunakan Table

Disini saya akan menshare bagaimana caranya membuat sebuah website dengan mudah dan sederhana. disini saya akan menshare cara membuat web statis menggunakan table, disini tidak diperlukan yang namanya css, hanya cukup dengan menggunakan tabel, dan disini saya menggunakan 3 kolom dan 3 baris, untuk pengembangan mungkin anda bisa mengembangkanya dan membuat yang lebih baik dari yang saya contohkan. sekiranya mungkin tampilan websitenya seperti dibawah ini :

website_sederhana

Dan ini kode HTML nya :


<html >
<head>
<title>Contoh Web Sederhana</title>
</head>

<body>
<!-- homewebsitedesign.blogspot.com-->
<table width="700" height="851" border="1">
  <tr bgcolor="#FF0000">
    <td height="96" colspan="3"><h1 align="center"> WEBSITE SAYA </h1></td>
  </tr>
  <tr bgcolor="">
    <td bgcolor="#00FFFF" width="148" height="359">
    <ul type="circle">
       <li><a href="index.html"> HOME</a></li>
       <li><a href="About.html">ABOUT</a></li>
    </ul>  
    </td>
    <td width="315">
    Website ini berisi tentang materi perkuliahan Perancangan Pemrograman Web.
    
    <p>Berikut materinya :</p>
    
    <ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>Pengenalan Bootstrap</li>
    </ol>
    
    </td>
    <td  bgcolor="#00FFFF"width="215">
      <form>
      <table border="0" width="100" height="100">
        <tr>
          <td>Username</td>
          <td><input type="text" name="username" /> </td>
        </tr>
        <tr>
          <td>Password</td>
          <td><input type="password" name="password" /></td>
        </tr>
        <tr>
          <td align="center"><input type="submit" value="Login" /></td>
          <td><a href="form.html">Daftar</a>
        </tr>
      </table>
      </form>
    </td>
  </tr>
  <tr bgcolor="#FF0000">
    <td height="23" colspan="3" align="center">Copyright &copy; Contoh Website Sederhana</td>
  </tr>
</table>
<!-- homewebsitedesign.blogspot.com-->
</body>
</html>