Selasa, 17 Desember 2013

MEMBUAT DROPDWON DAN TABEL ZEBRA DENGAN MOUSHOVER

Cara membuat Menu Dropdown.
langsung saja ini adalah script Html nya,,

<html>
<head>
<link href="data.css" rel="stylesheet" type="text/css" />
<title>Menu Dropdown</title>
</head>
<table id="data">
 <tr>
<td>
<ul id="tabel">
<li><a href="#">Beranda</a>
<ul>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tips & Trik</a></li>
</ul>
</td>
<td>
<ul id="tabel">
<li><a href="#">Kontak</a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</li>
</ul>
</td>
 <td>
<ul id="tabel">
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Alamat</a></li>
<li><a href="#">Koleksi Foto</a></li>
</ul>
</li>
</ul>
</td>
 </tr>
</table>
</html>

Bagaimana script HTMLnya... mudah kan untuk di pahami dan di pelajari,,
Selanjutnya adalah scrip CSSnya inilah dia scrip CSSnya,,

#data{
border:4px solid blue;
width:20%;
margin: 40 ;
background-color:white;
color:white;
font-size:24;
text-decoration:none;
}

a{text-decoration:none;}

#tabel
{
padding: 0;
margin: 0;
}
#tabel a
{
width: 150px;
}
#tabel li
{
float:left;
padding: 2px 4px ;
}
#tabel li ul
{
position: absolute;
background: blue;
padding: 4px;
width: 150px;
right: -9999px;
}
#tabel li:hover ul
{
right: auto;
}
#tabel li ul a
{
color: white;
text-decoration: none;
display: block;
}
#tabel li ul a:hover
{
color: green;
background:white;
}

Cara membuat Tabel Zebra

Langsung saja kita menuju scrip HTMLnya. Bisa dilihat dibwah ini

<html>
<head>
<link href="dataq.css" rel="stylesheet" type="text/css" />
<title>Tabel Zebra</title>
</head>
<body>
<body id="body">
</div>

</body>
<table class="data">
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Jenis</th>
<th>Banyak</th>
</tr>
<tr class="data1">
<td>1</td>
<td>Buku</td>
<td>Novel</td>
<td>1</td>
</tr>
<tr class="data">
<td>2</td>
<td>Buku</td>
<td>Cerpen</td>
<td>2</td>
</tr>
<tr class="data1">
<td>3</td>
<td>Buku</td>
<td>Komedi</td>
<td>4</td>
</tr>
<tr class="utama">
<td>4</td>
<td>Buku</td>
<td>Legenda</td>
<td>1</td>
</tr>
</table>
</html>

Selanjutnya jngan lupa scriip CSSnya. disini saya menggunakan CSS yang eksternal dan bisa dilihat seperti inilh scrip CSSnya.

#body{
background-color:white}
.data
{
width:40%;
margin-top:20px;
margin-left:100px;
border:1px solid blue;
font-family: Arial, Helvetica;
text-align:center;

}
td{
border: 1px solid;

}

th
{
text-align:center;
align:center;
background-color:black;
color:white;
}
.data1
{
text-align:center;
background-color:#ccc;
}

tr:hover   {
color:red;
cursor: pointer;
}
transition: all 1s;




Senin, 18 November 2013

SEJARAH DAN PERKEMBANGAN CSS

CSS adalah singkatan dari Cascading Style Sheet. Adalah standar pembuatan dan pemakaian style untuk dokumen terstruktur. CSS digunakan untuk mempersingkat penulisan tag HTML \ seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML maupun XHTML. Meskipun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk juga SVG dan XUL. Spesifikasi CSS diatur oleh  Word Wide Web Consortium (W3C).

CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama HÃ¥kon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS. Pada akhir tahun 1996, CSS telah resmi dipublikasikan (dan menyusul kemudian CSS Level 1 pada bulan Desember). Pengerjaan proyek ini juga didukung oleh seorang programmer bernama Thomas Reardon dari perusahaan software ternama, Microsoft.

CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. 

Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).
Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu :

  1. External Style Sheet (file CSS berbeda dari file HTML),
  2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
  3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan)

Sedikit saran lebih baik menggunakan cara External Style Sheet karena lebih mudah pengelolanya.

Sejarah 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.


Keunggulan CSS

Sebelum kehadiran CSS, seorang webmaster harus bekerja ekstra keras menuliskan tag-tag HTML baik untuk mendesain layout ataupun untuk memberi gaya tampilan (style) pada bagian-bagian tertentu dari situ web yang akan dibuatnya. Pekerjaan ini tentu semakin berat apabila situs web tersebut terdiri dari puluhan atau bahkan ratusan halaman dengan tampilan yang berbeda-beda, karena setiap tampilan membutuhkan penulisan tag-tag yang secara mandiri unik. Untuk bagian-bagian dengan tampilan yang sama pun seorang webmaster harus direpotkan dengan penulisan tag-tag HTML secara berulang-ulang. Hadirnya CSS, pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampu menghindarkan pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauh lebih kecil. Dengan ukuran file yang kecil, proses loading situs web juga akan jauh lebih cepat.

Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun umumnya file CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagian tertentu dari halaman web secara serempak.
Inilah manfaat paling penting dari CSS! Mempelajari CSS bisa jadi bukan pekerjaan mudah. Namun, ada banyak keuntungan lain yang akan kita peroleh dengan menggunakan CSS ini, yaitu:

1. Update tampilan lebih mudah
Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu jauh lebih mudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapat mengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karena semua tag untuk style ini berada pada satu file CSS saja.

2. Beban bandwidth lebih kecil
Dengan CSS, ukuran file web akan menjadi “langsing” karena tag-tag style dipisahkan secara mandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selain itu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halaman-halaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-load berulang-ulang.

3. Modifikasi web template lebih mudah
Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita. Dengan CSS, kita akan lebih mudah melakukan “vermak” pada template tersebut, misalnya mengganti warna latar atau mengubah jenis huruf.

4. Lebih mudah digunakan pada mobile phone
Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi juga melalui mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakan oleh mereka yang browsing melalui gadget-gadget tersebut.

5. Seacrh engine friendly
Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situs-situs web yang menggunakan table sebagai pondasi layoutnya.

Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser. 

Minggu, 15 September 2013

Sejarah dan Perkembangan HTML

Sejarah dan Perkembangan HTML

Sebelum kita mempelajari sejarah dan perkembangan HTML apakah teman-teman sudah mengerti apakah HTML itu sendiri.....

Jika belum mari kita sedikit membahas tentang apakah itu HTLM...?
ya ini adalah kepanjangan dari HTML >> ( Hyper Text Markup Language ) didefiniskan sebagai sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi dalam sebuah browser internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan didunia penerbitan dan percetakan yang disebut dengan SGML ( Standard generalized Markup Language ), HTML adalah sebuah standard yang digunakan secara luas untuk menampilkan halaman web. 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. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla firefox atau aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks biasa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu.
Maf ya teman agak panjang penjelasannya sekarang masuk ke sejarah dan per kembangan HTML...
Sejarah singkat tentang HTML yang biasanya disebut dengan Hypertext Markup Language atau yang biasa disingkat HTML pertama kali diciptakan dan dikembangkan oleh Tim Berners-Lee pada awal tahun 1990-an yang pada saat itu masih bekerja di CERN. HTML diciptakan dengan tujuan sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. HTML pertama kali dipopulerkan  dengan menggunakan browser Mosaic.


Perkembangan HTML

  1. 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.
  2. 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. 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 ( 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 ( 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 ( 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. XHTML versi 1.0 ( 20 Januari 2000 ). XHTML 1.0 merumuskan HTML 4.0 dalam XML.
  8. HTML 5 ( 22 Januari 2008 ). HTML versi 5.0 ini masih dikerjakan/dikembangkan mulai 4 Maret 2010 kemaren oleh W3C(World Wide Web Consortium),W3C sendiri adalah sebuah Organisasi yang menangani pengembangan web standar. HTML 5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaiman untuk menangani semua elemen HTML, dan bagaimana memulihakan dari kesalahan. Beberapa fitur dalam HTML 5 adalah fungsi untuk audio embedding, video, grafik, sisi penyimpanan data klien, dan dokumen interaktif. 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. 
Nah demikianlah materi yang dapat saya berikan semoga bermanfaat dan berguna bagi teman-teman semua,,,,,,,


Sumber : Dari beberapa Sumber.