Laboratorium Pemrograman dan Basis Data

HTML List

dalam html list ada dua macam yaitu ordered dan unrodered list.

Ordered List

kalau dilihat-lihat maksdnya adalah ke list teratur karena menggunakan nomor.  Tag yang digunakan untuk ordered list ini adalah <ol> dan isi dari masing-masing list menggunakan tag <li>. Bentuk Ordered List :

1. Satu
2. Dua
3. Tiga

Contoh script :

Coffee

- black hot drink

Milk

- white cold drink

HTML Table

Contoh :

Hasil :

HTML Table Heading

<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Ser Geser dengan data-transition...

Kali ini masih membahas mengenai sebuah framework yang fenomenal yaitu jQuery Mobile. Bagi yang belum tahu dengan jQuery mobile bisa klik disini atau disini untuk mengenal jQuery Mobile. Baiklah, sekarang saya akan memperkenalkan salah satu fitur yang bisa kita handalkan dalam membangun aplikasi. Fitur yang saya maksud adalah "Transition"...

Menurut Google Translate, Transition dalam bahasa Indonesia diartikan dengan peralihan. Jadi sudah jelas, fitur yang satu ini akan membantu kita memberikan animasi peralihan dari halaman satu ke halaman yang lain. Pada dasarnya, transition ini bisa kita kustomisasi sesuai dengan kebutuhan. Tapi kali ini saya beri batasan masalah untuk menjelaskan mengenai transition yang ada pada bawaan jQuery Mobile versi 1.3.0 (Versi yang saya gunakan...)

Berikut penjelasan singkat mengenai Transition yang ada pada jQuery Mobile:

1. fade : peralihan dari halaman ke halaman lain dengan memberikan efek blur seolah-olah halaman hilang atau muncul dari kegelapan. 
2. pop : peralihan dari halaman ke halaman lain dengan memberikan efek seperti "muncul kepermukaan". Jadi ibarat kata, halaman yang tenggelam muncul ke layar. (Penjelasan yang membingungkan)
3. flip : peralihan dari halaman ke halaman lain dengan memberikan efek seperti membalikkan halaman tersebut, tapi bukan seperti membalikkan halaman pada buku.
4. turn : memiliki efek yang mirip dengan flip, namun ini seolah-olah titik rotasi halaman berada di pinggir halaman, sedangkan pada flip, titik rotasi pada garis tengah halaman.
5. flow : efek yang dihasilkan adalah halaman seperti tenggelam, kemudian dilempar ke bagian samping hingga tidak terlihat lagi. Efek yang satu ini, emang terlihat lebih garang dari pada yang lain, karena halaman bertukar dengan cara dilempar-lempar. Cocok bagi developer yang suka main keras.
6. slidefade : gabungan dari fade dan slide, sehingga halaman tersebut bergeser kemudian menghilang.
7. slide : efek yang diberikan pada peralihan ini yaitu membuat halaman seolah-olah meluncur dan digantikan oleh halaman berikutnya.
8. slideup : sama seperti slide, namun pergerakannya dari bawah ke atas.
9. slidedown : sama seperti slide, namun pergerakannya dari atas ke bawah.
10. none : sesuai namanya, peralihan tidak ada efek apa-apa. Main tukar aja. Simple, no animation!

Untuk menggunakan transition ini, kita harus menambahkan atribut pada element yang menjadi trigger (Pemicu) misalkan link atau <a></a>. Rumusnya seperti ini :

  <a href="index.html" data-transition="flow">Let Me Flow!</a>

 Dengan formula ini, maka halaman "index.html" akan dibuka dengan efek transition "flow". Silahkan ganti sesuai data transition yang diinginkan. Pada beberapa efek transition, bisa juga ditambahkan atribut "data-direction='reverse'" tanpa kutip. Contoh:

 <a href="index.html" data-transition="slide" data-direction="reverse">Let Me Slide!</a>

Formula diatas akan memberikan efek slide dengan arah pergerakan sebaliknya. Selebihnya, tergantung imajinasi teman-teman dalam memanfaatkan fitur yang ada pada jQuery Mobile untuk menciptakan aplikasi yang responsif.

Karena saya menyadari bahwa penjelasan saya mengenai transition sangat terbatas makauUntuk mengetahui dan mencoba demo dari masing-masing efek transition silahkan kunjungi link ini.
Referensi: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
Sumber Gambar: http://blogfreakz.com/mobile-development/jquery-mobile-tutorials/

1.  Ini merupakan versi terbaru dari HTML, yang memiliki element baru, attribute baru, dan behaviour  baru.
2.  Memiliki sekumpulan teknologi yang lebih besar yang memungkinkan website lebih bagus.

::FK::

Pada postingan kali ini saya akan membahas bagaimana cara membuat tabel dengan HTML dan mempercantik tampilannya dengan CSS.

Berikut adalah script HTML untuk membuat tabel:

 
Header1
        
Header2


        
Kolom1 Baris1
        
Kolom2 Baris1


        
Kolom1 Baris2
        
Kolom2 Baris2


        
Kolom1 Baris3
        
Kolom2 Baris3

Script di atas akan tampil di browser seperti berikut








Hasilnya terlihat sangat hampa dan monoton 'kan? Oleh karena itu mari kita warnai tabel yang hampa tersebut dengan file CSS yang berisi script berikut:

table, th, td {
table, th, td {
 border: 1px solid #DAA520;
 border-collapse: collapse;
 font-family: "Trebuchet MS", Arial, sans-serif;
 color: #555;
}

caption {
 font-size: 150%;
 font-weight: bold;
 margin: 5px;
}

td, th {
 padding: 4px;
}

th {
 text-align: center;
 background: #FFD700;
 color: #4F76A3;
 font-size: 100% !important;
}

tbody th {
 font-weight: bold;
}

tr { background: #FAFAD2; }

Maka tabel kita akan menjadi seperti berikut:

Header1	Header2
Kolom1 Baris1	Kolom2 Baris1
Kolom1 Baris2	Kolom2 Baris2
Kolom1 Baris3	Kolom2 Baris3

Sekian postingan kali ini, semoga bermanfaat :)