Kamis, 19 Desember 2013

Membuat Tabel dengan Mouse Hover

Inilah contoh Script Tabel dengan Mouse Houver,, bisa nanti di sesuaikan dengan keinginan sendiri..
sialhkan di simak dan di coba..

<html>
<title>Table</title>
<head>
<style>
 #body{
 background-color:white;
 margin: 0 0 0 70
 }
 .table
  {
  width:80%;
  margin-top:20px;
  margin-left:100px;
  border:1px solid black;
  font-family:Chalibri, Arial, Comic Sans MS;
  text-align:center;
  border-radius:4px;
  }
  td{
  border: 1px solid red;
  border-radius:5px;
  }

  th{
  text-align:center;
  align:center;
  background-color:blue;
  color:white;border-radius:5px;
  }
 #table
  {
  text-align:center;
  background-color:pink;
  border-radius:30px;
  }
  tr:hover   {color:yellow; cursor: pointer;}
  transition: all 1s;
 
 </style>

</head>
<center><h1>DATA MAHASISWA FKI</h1></center>
<body id="body">
</body>
<table class="table">
 <tr>
  <th>NIM</th>
  <th>NAMA</th>
  <th>JURUSAN</th>
  <th>JENIS KELAMIN</th>
  <th>IP. KUMULATIF</th>
 </tr>
 <tr id="table">
  <td>L200120007</td>
  <td>TRIANA DEWI SALMA</td>
  <td>INFORMATIKA</td>
  <td>PEREMPUAN</td>
  <td>4.0</td>
 </tr>
 <tr id="table">
  <td>L100120012</td>
  <td>MAISYAROH</td>
  <td>KOMUNIKASI</td>
  <td>PEREMPUAN</td>
  <td>3.9</td>
 </tr>
 <tr id="table">
  <td>L200120009</td>
  <td>TIWIK HANIF Z.</td>
  <td>INFORMATIKA</td>
  <td>PEREMPUAN</td>
  <td>3.9</td>
 </tr>
 <tr id="table">
  <td>L100120008</td>
  <td>FAKHRUDIN RIFA'I</td>
  <td>KOMUNIKASI</td>
  <td>LAKI-LAKI</td>
  <td>3.8</td>
 </tr>
 <tr id="table">
  <td>L100120006</td>
  <td>BAGAS </td>
  <td>KOMUNIKASI</td>
  <td>LAKI-LAKI</td>
  <td>3.8</td>
 </tr>
 <tr id="table">
  <td>L100120002</td>
  <td>BUDI DARMANTO </td>
  <td>INFORMATIKA</td>
  <td>LAKI-LAKI</td>
  <td>3.7</td>
 </tr>
</table>
</html>

Dan,, berikut hasilnya..

MEMBUAT MENU SCROLL DOWN

ini mau share sedikit cara untuk membuat menu dengan sub menu scroll down..
monggo disimak ^-^


<html>
<title>menu</title>
<head>
<style>
#MenuBox{
    background:pink;
 margin: 10 0 0 450;
 border-radius:10px;
    width: 364px;
    height: 35px;
    font-size: 12px;
    font-family: cursive;
    color:yellow;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
#BoxTurun {
    width: 875px;
 border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#Posisi {
 border-radius:6px;
    margin: 0;
    padding: 0;
}
#Posisi ul {
 border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#Posisi li {
 border-radius:6px;
 float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#Posisi li a, #Posisi li a:link, #Posisi li a:visited {
 border-radius:6px;
    color:black;
    display: block;
    font-size: 16px;
    font-family: Georgia;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#Posisi li a:hover, #Posisi li a:active {
 border-radius:6px;
    background:black;
    color:blue;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#Posisi li li a, #Posisi li li a:link, #Posisi li li a:visited {
 border-radius:6px;
    background:pink;
    width: 150px;
    color:black;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#Posisi li li a:hover, #Posisi li li a:active {
 border-radius:6px;
     background:pink;
    color:black;
    padding: 7px 10px;
}
#Posisi li {
 border-radius:6px;
    float: left;
    padding: 0;
}
#Posisi li ul {
 border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#Posisi li ul a {
 border-radius:6px;
    width: 140px;
}
#Posisi li ul ul {
 border-radius:6px;
    margin: -32px 0 0 171px;
}
#Posisi li:hover ul ul, #Posisi li:hover ul ul ul, #Posisi li.sfhover ul ul, #Posisi li.sfhover ul ul ul {
 border-radius:6px;
    left: -999em;
}
#Posisi li:hover ul, #Posisi li li:hover ul, #Posisi li li li:hover ul, #Posisi li.sfhover ul, #Posisi li li.sfhover ul, #Posisi li li li.sfhover ul {
 border-radius:6px;
    left: auto;
}
#Posisi li:hover, #Posisi li.sfhover {
 border-radius:6px;
    position: static;
}
</style>
</head>
<body>
<h1> MEMBUAT MENU SCROLL DOWN </h1>
<h2> oleh TRIANA DEWI SALMA_L200120007</h2>
<HR>
<BR>
<BR>
<div id="MenuBox">
       <div id="BoxTurun">
      <ul id="Posisi">
        <li><a href="#">MENU</a></li>
        <li><a href="#">PROFIL</a>
          <ul>
            <li><a href="#">ORGANISASI</a>
              <ul>
                <li><a href="#">VISI</a></li>
                <li><a href="#">MISI</a></li>
                <li><a href="#">ANGGOTA</a></li>
              </ul>
            </li>
            <li><a href="#">SEJARAH</a></li>
            <li><a href="#">PROGRAM KERJA</a></li>
          </ul>
        </li>
        <li><a href="#">AGENDA</a></li>
        <li><a href="#">CONTAC</a></li>
      </ul>
    </div>
  </div>
</body>
</html>


Inilah untuk hasilnya

Sabtu, 16 November 2013

SEJARAH DAN PERKEMBANGAN CSS

PENGERTIAN CSS
CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

SEJARAH CSS
CSS pertama kali bermula sejak munculnya SGML pada tahun 1970-an. Sejak itu, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak digunakan sekarang ini merupakan ide dari seorang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan oktober 1994 (dalam konferensi W3C di Chacigo. Illinois). Kemudian, beliau bersama dengan Bert Bos mengembangkan suatu standart CSS. Pada tahun 1996, SCC resmi dipublikasikan. Pengerjaan Proyek ini juga didukung oleh seorang progamer Thomas Reardon dari perusahaan software ternama, Microsoft. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Versi untuk saat ini ada 3 versi dari CSS, yaitu CSS1, CSS2, dan CSS3.

PERKEMBANGAN CSS
·      CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan  huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
5. Margin, border dan padiing.
·      CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 
·      CSS 3
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
Fitur terbaru CSS 3 :
1.  Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.
2.      Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".
3.      Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.
 
KELEBIHAN DAN KEKURANGAN CSS :
Keunggulan CSS:
1.      Update tampilan lebih mudah
2.      Beban bandwith lebih kecil
3.      Modifikasi Web template lebih mudah
4.      Lebih mudah digunakan pada mobile phone
5.      Search engine friendly

Kekurangan CSS:
1.    Tampilan pada browser berbeda-beda.
2.    Kadang juga terdapat browser yang tidak support CSS (browser lama).
3.    Harus tahu cara menggunakannya.
4.    dibutuhkan waktu lebih lama dalam membuatnya.
5.    Belum lagi ada bug/error dalam CSS








Jumat, 13 September 2013

SEJARAH DAN PERKEMBANGAN HTML

Sejarah dan Pengertian  HTML
sebelum kita membahas sejarah dan perkembangan HTML,, ada yang tau gak HTML itu apa?? 
gampangnya nih ya,, HTML adalah bahasa pemrograman web yang sering digunakan. sebenarnya HTML  (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi dalam sebuah browser internet. HTML ini dikembangkan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML saat ini merupakan standard internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML berupa kode-kode tag yang menginstrusikan browser untuk menghasilkan tampilan sesuai yang diinginkan.
HTML telah menjadi teknologi utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee saat masih bekerja untuk CERN (Conseil Europeene Pour La Recherche Nuclaire) menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik dan dipopulerkan pertama kali oleh Browser Mosaic. tujuan awal dari web browser adalah untuk melayani sebagai pembaca untuk dokumen berformat HTML. Dua dekade kemudian, browser itu sendiri telah menjadi sebuah portal ke dunia media online

Perkembangan HTML

1.        HTML VERSI 1.0
HTML versi 1.0 adalah versi pertama sejak lahirnya nama html tersebut. Versi ini memiliki kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakkan sebuah gambar.
fitur HTML 1.0 :
·      Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
·      Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
·      Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
·      Penulisan kode yang lebih efisien.
·      Dapat dimengerti oleh peramban lawas (backwards compatible)
2.        HTML VERSI 2.0
HTML versi 2.0 ( 14 Januari 1996 ). Pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan sebuah pionner dalam perkembangan homepage interaktif.
3.        HTML VERSI 3.0
HTML versi 3.0 ( 18 Desember 1997 ). HTML versi 3.0 juga disebut-sebut HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidaj bertahan lama.
4.        HTML VERSI 3.2
HTML versi 3.2 ( 14 Januari 1997 ). HTML versi ini adalah penyempurnaan dari HTML versi 3.0. keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek  yang banyak digunakan oleh pengembang browser dan diterima secara umum. Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
5.        HTML VERSI 4.0
HTML versi 4.0 ( 18 Desember 1997). Versi ini sudah terdapat penambahan pada link, meta, image dan lain-lain sebagai penyempurnaan versi 3.2.
6.    HTML VERSI 4.01
HTML versi 4.01 ( 24 Desember 1999 ). HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01 adalah minor update-koreksi dan perbaikan bug dari HTML 4.0.
7.    HTML  5
HTML 5 ( 22 Januari 2008 ). HTML 5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana untuk menangani semua elemen HTML, dan HTML, dan bagaimana memulihkan dari kesalahan.
Beberapa fitur di HTML 5 adalah :
·         Unsur kanvas untuk menggambar.
·         Video dan elemen audio untuk media pemutar.
·         Elemen baru, seperti artikel, footer, header, dan navigasi.
·         Dukungan lebih baik untuk penyimpanan offline local.
·         Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, URL, dan search.
HTML 5 juga mengandung unsur-unsur baru seperti <nav>, <header><footer>, dan <figure>. Yang termasuk kelompok kerja diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan banyak lagi vendor lainnya.
Beberapa kelebihan yang dimiliki oleh HTML5 adalah:
1.    Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.
2.    Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.
3.    Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footerdan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.
4.    Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developerdapat membangun pemahaman yang lebih detil mengenai halaman web.
5.    Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
6.    Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
7.    Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
8.    Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)
9.    Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.
Nah.. seperti itulah ulasan tentang HTML kali ini..  anda-anda yang mungkin tertarik dengan dunia ke-HTML-an ini silahkan memperdalam tentang pemrograman web.. hehe ^_^
Arigato Gozaimasu..
Semoga bermanfaat...


Kamis, 12 September 2013

My Profile

Assalamualaikum..
hai semua..
blog ini bisa dibilang blog personal namun bisa juga tidak..
banyak hal cuap-cuap gak penting namun juga tempat share tugas. langsung aja nih gak banyak kata..
profile saya..
Nama   : Triana Dewi salma
Nim      : L200120007
Alamat  : Tuban, Jawa Timur
sebenarnya banyak data yang akan saya cantumkan di  atas, namun mengingat tidak begitu penting jadi ya cukup singkat padat saja..
yang penting ada nama dan nimnya itu buat penilaian tugas web dasar nantinya.. hehe
sekian... selamat membaca blog saya...
wassalamualaiku.. ^_^