Server lokal atau localhost atau virtual web server atau virtual web hosting merupakan server web yang bersifat offline. Ketika sebuah situs web yang asli bisa diakses dengan cara mengetik alamat seperti http://www.example.com, maka sebuah situs web lokal pada umumnya dapat diakses dengan cara mengetik alamat http://localhost. Server lokal digunakan sebagai alat bantu untuk membuat situs web secara offline tanpa koneksi internet. Di dalam sebuah aplikasi server lokal biasanya sudah terdapat beberapa fitur yang ada di dalam server web online yang ada di internet pada umumnya seperti PHPMyAdmin, PHP, MySQL dan Apache. Aplikasi yang paling sering digunakan —terutama untuk menangani berkas-berkas dengan ekstensi .php— adalah WAMPSERVER dan XAMPP.
Proses instalasi sangat mudah: Unduh salah satu aplikasi tersebut sesuai dengan tipe Sistem Operasi yang Anda pakai (32 bits atau 64 bits). Buka berkas hasil unduhan, kemudian akan muncul jendela bimbingan instalasi aplikasi, setelah itu tinggal klik next…next…next… saja, I agree with the term of service… dan seterusnya sampai muncul tombol Finish.
Sebagai contoh, di sini Saya menggunakan WAMPSERVER sebagai server lokal. Yang paling penting untuk Anda perhatikan adalah ada pada folder www, selebihnya bisa Anda abaikan terlebih dahulu sebagai tahap awal latihan. Masing-masing aplikasi server lokal memiliki nama folder publik mereka sendiri. Sebagai contoh, XAMPP memiliki folder publik bernama htdocs. Tapi secara umum Anda akan dapat menemukan folder-folder publik pada aplikasi-aplikasi semacam ini dengan nama www, public_html dan htdocs. Ini juga akan Anda temukan pada server web yang asli, jadi Anda tidak perlu bingung.
Klik ikon WampServer yang ada di desktop komputer Anda, atau kalau tidak ada Anda bisa mencari programnya melalui tombol Start. Setelah itu akan muncul kotak dialog User Account Control. Klik tombol Yes. Lihat daftar ikon pada Taskbar atau Superbar di sebelah kanan bawah, di situ seharusnya akan muncul ikon WAMPSERVER berwarna merah, yang secara normal seharusnya akan berubah warna menjadi jingga dan kemudian menjadi hijau secara perlahan.
Buka peramban favorit Anda, lalu akses alamat http://localhost. Jika muncul halaman seperti ini, maka itu artinya proses instalasi telah berhasil dilakukan dan server lokal Anda sudah siap untuk digunakan:
Halaman awal server WAMP.
www
Kembali ke folder www. Jika sebelumnya Anda tidak mengubah-ubah pengaturan lokasi folder www pada saat instalasi, maka folder tersebut seharusnya akan terletak pada lokasi C:\wamp\www. Anda bisa dengan mudah mengakses lokasinya melalui menu:
Menu server WAMP.
Anda bisa membuang semua berkas yang ada di dalamnya, tapi untuk berjaga-jaga, Anda bisa membiarkan mereka seperti apa adanya sampai Anda cukup percaya diri untuk membuangnya. Di dalam folder ini Anda bisa memasukkan berkas-berkas web Anda untuk ditampilkan di layar peramban nantinya. Sebagai contoh, Anda membuat berkas bernama tes-halaman.php pada folder ini, maka Anda akan bisa mengakses berkas tersebut melalui alamat http://localhost/tes-halaman.php
Sebenarnya Anda bisa melakukan hal ini di lokasi mana saja di folder komputer Anda, hanya bedanya, Anda tidak akan bisa menerjemahkan kode-kode Hypertext Preprocessor menjadi HTML jika berkas tersebut tidak ditempatkan di dalam folder www. Misalnya Anda membuat berkas tes-halaman.php di desktop, maka Anda bisa membuka berkas tersebut dengan cara klik-kanan pada ikon berkas dan kemudian pilih Open with » Firefox (misalnya). Sehingga pada address bar akan tampil alamat seperti file:///C:/Users/DTE/Desktop/tes-halaman.php
Seperti itu saja dulu. Selanjutnya Anda bisa mencoba belajar bahasa pemrograman PHP atau sekedar mengetes CMS yang Anda unduh di dalam folder ini. Cukup salin dan tempel berkas saja seperti biasa. Target Saya membuat tutorial ini sebenarnya adalah untuk memperkenalkan CMS Mecha pada pembaca, tapi rilis versi stabil yang terakhir masih belum ada dan masih dalam tahap pengetesan.
Ini adalah versi mentah dari plugin spoiler pada CMS Mecha. Anda bisa menerapkannya di Blogger atau di web mana saja dengan cara mengikuti langkah-langkah berikut.
Masuklah ke halaman editor HTML Template Anda. Pertama-tama salin kode di bawah ini dan letakkan di atas kode </head>:
Terakhir, salin kode JavaScript ini dan letakkan di atas </body>:
<script> //<![CDATA[
// http://www.dte.web.id
(function(w, d) { var panel = d.getElementsByClassName('spoiler'); if (!panel) return; for (var i = 0, len = panel.length; i < len; ++i) { if (!panel[i].id) panel[i].id = 'spoiler-' + (i + 1); } function toggleSpoiler(elem, index) { var toggle = d.createElement('a'), toggleText = (elem[index].getAttribute('data-toggle-text') || ' ').split(' | '), togglePlacement = elem[index].getAttribute('data-toggle-placement') && elem[index].getAttribute('data-toggle-placement') !== 'bottom' ? elem[index].getAttribute('data-toggle-placement') : 'bottom'; toggleText.push(toggleText[0]); toggle.className = 'spoiler-toggle'; toggle.href = '#' + elem[index].id; toggle.innerHTML = toggleText[/(^| )spoiler-state-collapsed( |$)/.test(elem[index].className) ? 0 : 1]; toggle.onclick = function() { var target = this.parentNode, isExpanded = /(^| )spoiler-state-expanded( |$)/.test(target.className), isConnected = target.getAttribute('data-connection'); if (/(^| )spoiler-state-disabled( |$)/.test(target.className)) return false; target.className = isExpanded ? target.className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2') : target.className.replace(/(^| )spoiler-state-collapsed( |$)/, '$1spoiler-state-expanded$2'); this.innerHTML = toggleText[isExpanded ? 0 : 1]; if (isConnected) { for (var i = 0, len = elem.length; i < len; ++i) { var isConnectedTo = elem[i].getAttribute('data-connection'), toggleTextSibling = (elem[i].getAttribute('data-toggle-text') || ' ').split(' | '), togglePlacementSibling = elem[i].getAttribute('data-toggle-placement') && elem[i].getAttribute('data-toggle-placement') !== 'bottom' ? elem[i].getAttribute('data-toggle-placement') : 'bottom'; if (isConnectedTo && isConnected === isConnectedTo && target.id !== elem[i].id) { elem[i].className = elem[i].className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2'); elem[i].children[togglePlacementSibling === 'bottom' ? 1 : 0].innerHTML = toggleTextSibling[0]; } } } return false; }; toggle.onmousedown = false; elem[index].insertBefore(toggle, togglePlacement == 'bottom' ? null : elem[index].firstChild); } for (var i = 0, len = panel.length; i < len; ++i) { toggleSpoiler(panel, i); } })(window, document); //]]> </script>
Klik tombol Simpan Templat.
Penggunaan
Semua konfigurasi hanya didasarkan pada atribut-atribut di dalam HTML spoiler.
Dasar
Sebuah spoiler sederhana dapat dibuat dengan menyisipkan kode HTML ini ke dalam posting. Pastikan Anda sedang berada pada mode HTML, dan bukannya berada pada mode Tulis:
<div class="spoiler spoiler-state-collapsed" data-toggle-text="Spoiler"> <div class="spoiler-content">Konten di sini…</div> </div>
Terbuka secara Default
Ganti kelas spoiler-state-collapsed menjadi spoiler-state-expanded untuk membuat spoiler menjadi terbuka secara default:
<div class="spoiler spoiler-state-expanded" data-toggle-text="Spoiler"> <div class="spoiler-content">Konten di sini…</div> </div>
Modifikasi Teks pada Tombol Toggle
Tambahkan atribut data-toggle-text untuk menambahkan teks pada tombol. Pisahkan teks tombol menjadi dua bagian dengan sebuah “ | ” untuk membuat tombol berubah status secara bergantian ketika panel spoiler terbuka dan tertutup:
<div class="spoiler spoiler-state-collapsed" data-toggle-text="Buka Spoiler | Tutup Spoiler"> <div class="spoiler-content">Konten di sini…</div> </div>
Mengubah Posisi Tombol
Secara normal, tombol toggle akan ditempatkan setelah panel. Anda bisa mengubah posisinya menjadi sebelum panel dengan cara menambahkan atribut data-toggle-placement dengan nilai sebagai top:
<div class="spoiler spoiler-state-collapsed" data-toggle-placement="top"> <div class="spoiler-content">Konten di sini…</div> </div>
<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Default"> <div class="spoiler-content">Konten di sini…</div> </div>
<div class="spoiler spoiler-primary spoiler-state-collapsed"> <div class="spoiler-content">Konten di sini…</div> </div>
<div class="spoiler spoiler-success spoiler-state-collapsed"> <div class="spoiler-content">Konten di sini…</div> </div>
<div class="spoiler spoiler-info spoiler-state-collapsed"> <div class="spoiler-content">Konten di sini…</div> </div>
<div class="spoiler spoiler-warning spoiler-state-collapsed"> <div class="spoiler-content">Konten di sini…</div> </div>
<div class="spoiler spoiler-danger spoiler-state-collapsed"> <div class="spoiler-content">Konten di sini…</div> </div>
Efek Akordion
Tambahkan atribut data-connection untuk mengaitkan antara panel yang satu dengan panel yang lainnya yang juga memiliki atribut data-connection dengan nilai yang sama. Nilai bisa berupa apa saja:
Pengguaan spoiler ini kelihatannya memang sedikit rumit jika dilihat dari segi penulisan markup HTML. Mungkin beberapa dari kalian lebih menginginkan markup yang sederhana seperti sebuah elemen <div> dengan ID spoiler-1 dan sebuah tombol dengan atribut onclick bernilai toggleSpoiler('spoiler-1'). Tapi ini adalah resiko yang akan selalu muncul pada semua alat, widget dan plugin dengan fitur yang cukup banyak. Terdapat arsitektur dan pola tersendiri di dalamnya yang tidak bisa dilepaskan maupun disederhanakan begitu saja.
Aslinya ini adalah tugas bebas yang Saya dapat dari kampus, akan tetapi karena Saya merasa berkas ini cukup bermanfaat jadi Saya bagikan saja untuk kalian.
Berbicara mengenai elemen formulir, umumnya elemen radio dan checkbox akan menjadi jenis elemen yang cukup sulit untuk ditangani oleh pihak pengguna karena ukurannya yang sangat kecil. Contoh sederhana:
<input type="radio" name="o"> Pilihan 1 <br> <input type="radio" name="o"> Pilihan 2
Formulir di atas memang bekerja, tetapi tidak cukup nyaman untuk digunakan. Area yang bisa diklik hanya terfokus pada elemen radio saja yang ukurannya sangat kecil:
Area pengecekan hanya terbatas pada elemen radio yang berukuran sangat kecil.
Mungkin tidak masalah jika orang yang mengisi formulir tersebut adalah orang-orang yang masih muda. Tetapi bagaimana jika yang mengisi formulir tersebut adalah para orangtua dan lanjut usia? Karena bagi mereka, mengarahkan mouse saja sudah kewalahan, apalagi mengeklik elemen radio yang ukurannya kecil seperti itu!
Selalu Ingat untuk Menambahkan Elemen Label
Untuk memperluas area pengecekan, kita bisa membungkus setiap opsi formulir dengan elemen label seperti ini:
<label><input type="radio" name="o"> Pilihan 1</label> <br> <label><input type="radio" name="o"> Pilihan 2</label>
Cara ini memungkinkan teks (atau elemen apa saja) yang berada di dalam elemen label tersebut untuk bisa bekerja sebagai pemicu perubahan kondisi radio yang merupakan anak dari label tersebut:
Area pengecekan menjadi lebih luas, meliputi radio dan teks di sampingnya.
Kursor
Berikan elemen label dan semua jenis tombol dengan kursor jari telunjuk untuk meningkatkan kenyamanan:
Perubahan warna saat opsi disentuh dan saat opsi terseleksi, semua itu akan memberikan rasa keyakinan kepada setiap pengguna yang sedang mengisi formulir Anda:
label:hover {background-color:whitesmoke} label:active {background:none} label.selected {background-color:forestgreen} /* Kelas `.selected` akan diciptakan oleh JavaScript */
Demonstrasi
Berikut ini adalah sebuah demonstrasi soal pilihan ganda online dengan akses jawaban yang mudah untuk kenyamanan pengguna:
// Fungsi ini digunakan untuk menambahkan/menyingkirkan // kelas `.selected` pada elemen `<label>` // berdasarkan kondisi radio di dalamnya $(document).ready(function() { $('#qa-form :radio').on("change", function() { $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected'); }); $('#qa-form :reset').on("click", function() { $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false); }); });
Selalu pastikan bahwa pengguna bisa merasa nyaman dengan apa yang Anda berikan untuk mereka gunakan. Berikan efek timbal balik yang tegas kepada pengguna agar mereka yakin dengan apa yang telah mereka putuskan, sehingga hal-hal seperti kegagalan tes karena kesalahan antarmuka pengguna tidak akan terjadi.
Yang Saya maksudkan di sini adalah, jadikan tampilan artikel sebagai prioritas utama sebelum memulai pondasi desain/rancangan tema/template. Mengingat kebiasaan buruk yang sering terjadi adalah kita membentuk hasil jadinya terlebih dahulu kemudian baru merancang tampilan-tampilan paragraf, kuota dan blok kode. Padahal, dengan merancang elemen-elemen kecil dan umum tersebut terlebih dahulu, kita bisa memastikan bahwa tampilan akhir nantinya akan menjadi lebih konsisten.
Merancang penampilan secara keseluruhan dan melanjutkannya dengan merancang tampilan elemen artikel hanya akan menambah waktu kerja kita menjadi dua kali lipat lebih lama dan lebih rumit tanpa kita sadari. Sebagai contoh, saat kita merancang tampilan posting, saat itu kita juga akan menentukan tampilan judulnya. Setelah itu kita akan merancang tampilan sidebar dan footer, kemudian juga akan menentukan tampilan judulnya dan seterusnya:
Terlalu banyak pekerjaan hanya untuk membuat beberapa blok area saja. Seharusnya pekerjaan ini bisa menjadi lebih singkat apabila kita merancang framework elemen-elemen artikel terlebih dahulu secara global. Sudah ada beberapa framework yang tersedia untuk mengatasi kebiasaan buruk ini, misalnya Normalize dan HTML5 Boilerplate. Tapi di sini kita akan mencoba untuk membuatnya sendiri. Dimulai dengan CSS reset.
Merancang Framework CSS
CSS Reset
CSS ini akan menormalkan semua tampilan elemen HTML —kecuali elemen-elemen formulir— menjadi seragam/normal. Dimulai dari ukuran, warna, margin, padding, dimensi dan juga ketebalannya. Mengawali rancangan elemen artikel dengan CSS reset akan mempermudah kita dalam merancang tampilan elemen-elemen HTML setelah ini:
Berikutnya kita atur ukuran huruf, tipe huruf, line-height dan warna huruf secara global pada elemen <body>:
body { /* `font-style:normal`, `font-weight:normal`, `font-size:13px`, `line-height:1.4em`, `font-family:Arial,Sans-Serif` */ font:normal normal .8125em/1.4 Arial,Sans-Serif; background-color:white; /* warna latar secara global */ color:#333; /* warna huruf secara global */ }
Huruf Tebal, Huruf Miring dan Elemen-Elemen Kecil Lainnya
Karena tampilan elemen HTML sudah diatur ulang oleh CSS reset, maka kita perlu mengatur beberapa tampilan elemen menjadi seperti semula:
/* penanda teks */ mark { background-color:#ffce00; color:black; }
Margin Paragraf
Paragraf membutuhkan kerenggangan antara teks paragraf yang satu dengan yang lainnya. Begitu pula elemen-elemen lain yang biasa menyertainya seperti kuota, tabel, figur, formulir, daftar dan blok kode:
Atur elemen heading dengan line-height menjadi normal dan huruf menjadi tebal. Tentukan juga margin heading secara global sebelum kemudian kita melanjutkannya dengan menentukan ukuran elemen heading sesuai dengan level/tingkatannya:
Jangan biarkan elemen daftar menjadi terlalu sejajar dengan paragraf karena pada umumnya itu hanya akan membuat mata kita menjadi merasa tidak nyaman dan tertekan. Posisikan elemen daftar menjadi sedikit menjorok ke depan untuk menciptakan kesan istirahat/fokus:
/* ordered, unordered list & description list */ ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside} /* atur ulang `list-style` pada elemen `<ol>` */ ul {list-style:disc outside} /* atur ulang `list-style` pada elemen `<ul>` */ li {margin:.5em 0} /* beri sedikit jarak atas dan bawah pada elemen `<li>` untuk item daftar dengan konten yang panjang */
dt {font-weight:bold} dd {margin:0 0 .5em 2em}
Elemen Formulir
Biasanya ini tidak terlalu penting. Tetapi setidaknya samakanlah tipe dan ukuran huruf sesuai dengan huruf pada elemen induknya. Mengenai tampilan selanjutnya seperti warna latar dan efek :hover bisa ditentukan nanti setelah framework selesai dibuat:
/* mengeset `box-sizing` menjadi `border-box` pada `<textarea>` untuk mengatasi masalah pengguna yang sering kesulitan menentukan lebar akurat pada elemen ini menjadi `100%` ketika menggunakan logika box-model yang lama */ textarea { display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
Blok Kode dan Kuota
<pre> dan <blockquote> biasanya mendapatkan perlakuan khusus mengingat elemen ini biasa kita gunakan untuk menyatakan hal-hal yang penting. Blok kode digunakan untuk menyatakan kode yang perlu dicatat/dipahami dan kuota digunakan untuk menyatakan teks yang perlu diingat atau direnungkan:
Seperti yang pernah Saya nyatakan pada tutorial pembuatan tabel dengan HTML, disarankan untuk menentukan border dan padding pada tabel yang memiliki atribut border=1 saja demi keamanan:
Sampai di sini Saya rasa sudah cukup untuk dijadikan sebagai dasar. Setelah ini Anda bisa melanjutkan untuk membuat kelas-kelas produktif seperti .hidden, .visually-hidden, .btn dan yang lainnya untuk keperluan rancangan tingkat lanjut:
Beberapa nama kelas di atas akan sangat mudah Anda temui pada framework HTML5 Boilerplate dan Twitter Bootstrap (Twitter Bootstrap juga memakai HTML5 Boilerplate). Anda akan mengetahui fungsi-fungsi kelas tersebut, mengapa kelas tersebut dibuat dan mengapa kelas-kelas tersebut menjadi semacam “standar” saat Anda mempelajarinya.
Beralih ke Framework Buatan Sendiri
Untuk mempercepat pekerjaan, yang terpenting sebenarnya adalah framework. Namun jika Anda tidak mengerti apa dan bagaimana framework itu dibuat dan digunakan, maka hasil akhirnya nanti akan sama saja. Memulai membuat framework sendiri Saya pikir jauh lebih baik dibandingkan hanya sekedar menyalin dan menempel kode dari framework lain yang sudah ada. Mengikuti dan mempelajari bagaimana mereka menciptakan framework seharusnya lebih diutamakan dibandingkan hanya sekedar memakainya. Karena dengan mempelajari bagaimana sebuah framework terbentuk, maka dari situ Anda bisa lebih cerdas di dalam mencontoh dan menyaring apa-apa saja yang sebenarnya diperlukan dan apa saja yang sebenarnya tidak diperlukan menurut kebutuhan Anda saat itu untuk keperluan yang lebih spesifik dan efisien tentunya:
Berbeda dengan JavaScript dasar window.print() yang akan mencetak keseluruhan halaman, fungsi ini akan mencetak halaman pada bagian-bagian tertentu saja. Cara kerjanya adalah fungsi ini akan mencetak duplikat konten area di dalam iframe pencetakan.
Dua buah elemen, yaitu <textarea> dan <iframe> dibuat untuk keperluan ini. Area teks digunakan untuk menyimpan kode CSS pencetakan, sedangkan iframe digunakan untuk menampung salinan bagian halaman yang ingin dicetak. Saat salinan bagian halaman tersebut sudah masuk ke dalam iframe yang kita sembunyikan wujudnya, hal yang perlu kita lakukan selanjutnya adalah mencetak konten iframe tersebut, bukan halaman yang sedang aktif:
<textarea id="printing-css" style="display:none;">.no-print{display:none}</textarea> <iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe> <script type="text/javascript"> //<![CDATA[ function printDiv(elementId) { var a = document.getElementById('printing-css').value; var b = document.getElementById(elementId).innerHTML; window.frames["print_frame"].document.title = document.title; window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b; window.frames["print_frame"].window.focus(); window.frames["print_frame"].window.print(); } //]]> </script>
Aktivasi bisa dilakukan dengan cara memicu fungsi printDiv(elementId) pada tautan atau tombol, dimana elementId adalah ID dari area khusus yang ingin dicetak:
Kode CSS pencetakan yang digunakan Saya sarankan adalah kode CSS yang pernah Saya tuliskan di sini, untuk memastikan agar tampilan halaman yang dicetak tertata dengan rapi. Atau kosongkan saja textarea tersebut dan biarkan User Agent Stylesheet pada masing-masing peramban menangani tampilan elemen yang ada.
Alternatif lain, Anda juga bisa menggunakan CSS eksternal jika Anda merasa bahwa textarea tanpa makna di atas hanya akan mengganggu kebersihan kode sumber web Anda:
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe> <script type="text/javascript"> //<![CDATA[ function printDiv(elementId) { var a = "/path/to/printing-css.css"; var b = document.getElementById(elementId).innerHTML; window.frames["print_frame"].document.title = document.title; window.frames["print_frame"].document.body.innerHTML = '<link rel="stylesheet" type="text/css" href="' + a + '">' + b; window.frames["print_frame"].window.focus(); window.frames["print_frame"].window.print(); } //]]> </script>
Hasilnya akan terlihat jelas pada peramban Google Chrome yang notabene memiliki komunikasi pencetakan halaman yang berbeda dengan peramban lainnya.
Pada peramban WebKit seperti Google Chrome dan Safari, sebuah elemen input bertipe search memiliki kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jika kita telah mengetikkan sesuatu di dalamnya. Tapi tidak pada peramban yang lain. Terkadang kita merasa butuh dan menyukai fitur itu, dan berharap bisa bekerja pada semua peramban.
Kita bisa menggunakan markup ekstra dan sedikit JavaScript untuk menciptakan rekayasa seperti itu. Tapi untuk memastikan tampilannya polos, gunakan elemen input bertipe text, bukan search:
(function() { var searchForm = document.getElementById('search-form'), textInput = searchForm.q, clearBtn = textInput.nextSibling; textInput.onkeyup = function() { // Show the clear button if text input value is not empty clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden"; }; // Hide the clear button on click, and reset the input value clearBtn.onclick = function() { this.style.visibility = "hidden"; textInput.value = ""; }; })();
Tutorial ini akan menjelaskan langkah-langkah singkat mengenai cara membuat tabel dengan HTML. Anda akan diberi beberapa penjelasan mengenai kerangka HTML tabel dari yang paling sederhana hingga menuju langkah-langkah modifikasi tampilan.
Sebuah tabel sederhana terdiri dari elemen <table> yang diisi dengan beberapa <tr>, dimana setiap <tr> akan berisi beberapa <td>. <table> adalah table, <tr> adalah table row dan <td> adalah table data:
Header tabel terbentuk dari elemen <th> (table header). Secara normal, tampilan teks di dalam header tabel akan secara otomatis bercetak tebal dan tersusun rata tengah:
Ada dua atribut yang bisa Anda gunakan, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan:
Catatan: Karena sel tabel mendapatkan atribut colspan="2", maka dua buah posisi sel akan digabungkan. Jadi, sel di sebelahnya harus dibuang. Ini berlaku juga untuk rowspan, hanya saja penggabungannya secara vertikal:
Diutamakan untuk border, CSS akan membuat tampilan border pada tabel menjadi lebih baik dan lebih bisa dikendalikan:
table, th, td { border:1px solid purple; }
Namun, karena border tabel secara normal tampak terpisah, kita harus mendeklarasikan border-collapse:collapse untuk merapatkan mereka:
table, th, td { border:1px solid purple; border-collapse:collapse; /* untuk menghilangkan jarak antar sel */ }
Setelah itu Anda bisa menentukan width, padding, background, font, color dan lain-lain. Beberapa properti CSS seperti vertical-align dan text-align juga nantinya akan dibutuhkan:
table { width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */ font:normal normal 13px/1.4 Arial,Sans-Serif; color:#333; border-collapse:collapse; /* untuk menghilangkan jarak antar sel */ }
th, td { padding:1em 1.4em; vertical-align:top; /* membuat semua konten tabel menjadi rata atas */ text-align:left; /* membuat semua teks di dalam tabel menjadi rata kiri */ }
th { background-color:#080; color:white; }
Markup HTML Standar
Markup HTML tabel standar secara garis besar dapat disusun seperti ini:
<table border="1" summary="Tabel ini menjelaskan tentang perkembangan kelangsungan hidup umat manusia di tahun 2013"> <caption>Tabel Kelangsungan Hidup Manusia</caption> <thead> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> </thead> <tbody> <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr> <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr> <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr> </tbody> </table>
Setiap kelompok baris yang mengandung elemen <th> akan dibungkus kembali dengan elemen <thead> sementara kelompok baris yang mengandung elemen <td> akan dibungkus dengan elemen <tbody>
Footer Tabel
Anehnya, footer tabel harus diletakkan di sebelah atas, lebih tepatnya sebelum <tbody>. Tapi jangan khawatir, karena hasil akhirnya nanti akan tetap tampil di bagian paling bawah:
Berikut ini adalah salah satu uraian mengenai elemen <tfoot> dari W3:
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
Catatan Tambahan
Lawan border-collapse:collapse adalah border-collapse:separate
Tidak semua tabel harus dilengkapi dengan border. Lebih baik set deklarasi border hanya untuk elemen tabel yang memiliki atribut border="1":
Dulu Saya pernah sekali mencatat beberapa kode CSS untuk HTML tabel. Anda bisa membacanya di sini. Mungkin itu akan berguna sebagai referensi tambahan.
Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bagian atas dasbor Forum Blogger (2013). Ini hanyalah penerapan konsep drop-down menu sebagai pelengkap elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik pembicaraan seperti pada grup Google.
Elemen ini bisa Anda gunakan untuk memberikan sugesti atau pilihan kata kunci secara tidak langsung tanpa harus repot-repot menuliskan perintah-perintah khusus di sekitar formulir untuk pengguna agar mereka menuliskan kata kunci seperti ini dan itu. Cukup letakkan beberapa sugesti kata kunci pada menu drop-down, maka para pengguna akan segera mengerti gambaran formulir tersebut saat mereka menampilkan menu:
/* the down arrow before the submit button */ .input-text-wrap .down-arrow { display:block; width:20px; height:30px; position:absolute; top:0; right:70px; cursor:pointer; }
/* create the down-arrow triangle with pseudo-element and border hack */ .input-text-wrap .down-arrow:before { content:""; display:block; width:0; height:0; border:4px solid transparent; border-top-color:#666; position:absolute; top:14px; left:50%; margin-left:-4px; }
JQuery
(function($) {
var $inputWrap = $('.input-text-wrap'), $arrow = $inputWrap.find('.down-arrow');
// Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere... $(document).on("click", function() { $inputWrap.find('ul').hide(); $arrow.removeClass('active'); });
$arrow.on("click", function(e) {
// Remove all the `focused` class and hide all visible drop-down menu $inputWrap.removeClass('focused').find('ul:visible').hide(); // Remove al the `active` down arrow $arrow.removeClass('active');
// Toggle the `.down-arrow` active class $(this).toggleClass('active') // Add a `focused` class to the `.input-text-wrap` .closest('.input-text-wrap').addClass('focused') // Show or hide the dropdown `ul` .find('ul').toggle() // When we click the `li`... .find('li').on("click", function() { // Set the input text value to the clicked `li`'s text $(this).closest('.input-text-wrap').find('.text-input').val($(this).text()) // and trigger the focus event to it .trigger("focus"); // After that, hide the visible dropdown menu $(this).parent().hide(); });
// Prevent event bubbling! e.stopPropagation();
});
// When the text input focused... $inputWrap.find('.text-input').on("focus", function() { // Add a `focused` class to the `.input-text-wrap` $(this).closest('.input-text-wrap').addClass('focused'); // When the text input loses the focus... }).on("blur", function(e) { // Remove the `focused` class from `.input-text-wrap` $(this).closest('.input-text-wrap').removeClass('focused'); });
Elemen input bertipe file sebenarnya tidak jauh berbeda dengan elemen radio atau checkbox. Mereka sangat sulit untuk dimodifikasi tampilannya. Selain itu, elemen <input type="file"> juga memiliki tampilan default yang berbeda-beda pada setiap peramban:
Tampilan elemen input file yang berbeda-beda, tergantung jenis peramban.
Namun, dengan sedikit elemen tambahan, kita bisa membuat elemen ini tampak sama pada semua peramban. Pada intinya kita hanya akan mengubah tampilan input tersebut menjadi transparan, kemudian kita letakkan sesuatu di bawahnya sebagai elemen input palsu, sehingga saat elemen palsu tersebut diklik, yang terjadi sebenarnya adalah kita memicu elemen input yang menutupi di atasnya yang tidak tampak karena transparan:
JavaScript ini sebenarnya tidak terlibat secara langsung pada kerja <input type="file">, dan hanya digunakan sebagai pelengkap. Fungsinya untuk mengambil nilai elemen input tersebut, kemudian meletakkannya ke dalam elemen <span> yang berperan sebagai pengganti kontainer teks (penampil path menuju file):
(function() { var input = document.getElementsByClassName('custom-file-input'); for (var i = 0, len = input.length; i < len; ++i) { var theInput = input[i].getElementsByTagName('input')[0]; theInput.onchange = function() { this.parentNode.parentNode.children[0].innerHTML = this.value; this.title = this.value; }; } })();
Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk menangani tampilan blog versi mobile/perangkat seluler. Namun sebelum memulainya, ada beberapa hal penting yang harus Saya jelaskan terlebih dahulu sebagai pondasi:
1. URL Blog Desktop dan Seluler
Menampilkan tampilan blog blogspot versi seluler bisa dilakukan dengan cara menambahkan kueri berupa ?m=1 pada URL. Sebagai contoh, jika alamat blog Anda adalah http://nama_blog.blogspot.com, maka untuk menampilkan tampilan blog perangkat seluler, Anda harus mengubah URLnya menjadi http://nama_blog.blogspot.com/?m=1. Tampilan blog versi biasa bisa Anda akses dengan mengubah nilai m menjadi 0, atau cukup buang kueri tersebut dari URL:
URL Blog Seluler: http://nama_blog.blogspot.com/?m=1 URL Blog Normal: http://nama_blog.blogspot.com/?m=0 URL Blog Normal: http://nama_blog.blogspot.com/
2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler
Setiap widget posting yang masih asli akan selalu dilengkapi dengan duplikat markup HTML khusus untuk tampilan blog seluler. Ini ditandai dengan munculnya beberapa elemen <b:includable> dengan atribut-atribut bernilai (atau setidaknya memiliki imbuhan kata) “mobile”.
Beberapa gulungan layar ke bawah, Anda akan menemukan kode yang nyaris sama dengan kode di atas. Perbedaan hanya terlihat pada karakteristik berupa ditambahkannya kelas-kelas dengan imbuhan “mobile” dan/atau hilangnya beberapa elemen HTML dari kode mirip yang pertama kali Anda temukan:
Fungsinya adalah untuk membedakan markup HTML antara blog tampilan layar desktop dengan blog tampilan seluler. Sehingga, sebagai contoh, jika kita mengakses halaman blog kita pada perangkat desktop, maka kita akan melihat kode HTML seperti ini pada sumbernya:
Masing-masing elemen <b:includable> akan ditampilkan sesuai keadaannya (dalam hal ini adalah mengenai apakah kita sedang berada pada perangkat desktop ataukah perangkat seluler), yang dalam sebuah widget dapat dikondisikan dengan kondisional <b:if cond='data:mobile'>:
<b:if cond='data:mobile'> <!-- menampilkan navigasi halaman versi mobile pada perangkat seluler --> <b:include name='mobile-nextprev'/> <b:else/> <!-- menampilkan navigasi halaman versi desktop pada perangkat desktop --> <b:include name='nextprev'/> </b:if>
<b:if cond='data:mobile'> hanya berlaku jika diletakkan/dideklarasikan di dalam <b:includable> dan tidak bisa bekerja di luar elemen itu. Kondisional universal untuk menyatakan tampilan seluler bisa dinyatakan sebagai ini:
<b:if cond='data:blog.isMobile'> … </b:if>
<b:if cond='data:blog.isMobileRequest'> … </b:if>
Anda bisa menerapkan kondisional di atas di mana saja.
Pastikan Fitur Blog Seluler Aktif
Pembaharuan: Kondisional data:blog.isMobileRequest dapat bekerja meski fitur blog seluler tidak aktif, karena kondisional ini tampaknya hanya mengecek keberadaan ?m=1 pada URL.
Jika tidak, aktifkan kembali dengan cara masuk ke tab Templat kemudian klik ikon roda gigi yang berada di bawah penayang blog seluler Anda:
Mengaktifkan fitur blog seluler.
Setelah itu Anda akan mendapati pilihan untuk mengaktifkan atau tidak mengaktifkan fitur blog seluler. Pilih untuk mengaktifkan fitur blog seluler.
Dua Metode Modifikasi
Setelah mengerti tentang bagaimana Blogger bisa menangani tampilan blog seluler terhadap tampilan blog biasa, kita bisa memulai untuk mengetahui dua ide yang biasa digunakan untuk membedakan tampilan antara blog versi biasa dengan blog versi seluler.
Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body>
Blogger sudah memiliki tag data tersendiri yang akan menggenerasikan kelas bernama mobile berdasarkan tipe tampilan blog, yaitu data:blog.mobileClass yang bisa kita letakkan pada tag HTML di dalam templat sebagai nilai kelas. Misalnya pada tag <body> seperti ini:
<body expr:class='data:blog.mobileClass'>
Dengan cara di atas, maka kita akan mendapati bahwa tag <body> telah dilengkapi dengan kelas mobile pada blog tampilan seluler seperti ini:
<body class=' mobile'>
Saat kita membuka blog pada tampilan desktop, nilai mobile pada atribut akan menghilang. Sehingga kita bisa membedakan tampilan blog seluler dengan blog biasa melalui kelas blog seluler tersebut melalui CSS:
Kita juga bisa menggunakan kondisional universal yang digunakan untuk menyatakan tampilan blog seluler sebagai pembatas tampilnya elemen-elemen HTML —termasuk tag <style>— dengan cara seperti ini:
Membedakan CSS Blog Desktop dengan Blog Seluler
<b:if cond='data:blog.isMobile'> <style> body {background-color:black} /* blog akan berwarna hitam pada tampilan seluler */ </style> <b:else/> <style> body {background-color:white} /* blog akan berwarna putih pada tampilan desktop */ </style> </b:if>
Menggunakan Kondisional Seluler Sebagai Bagian dari Kelas
Pada dasarnya, data:blog.isMobile akan menampilkan nilai berupa true atau false tergantung dari apakah blog tersebut dibuka pada tampilan seluler ataukah pada layar desktop. Sehingga, sebenarnya kita juga bisa menggunakan data tersebut sebagai nama kelas (bagian dari nama kelas) untuk menyatakan bahwa blog tersebut sedang dibuka pada perangkat seluler atau perangkat desktop:
Kode ini memungkinkan kita untuk mengambil node komentar HTML yang kemudian bisa kita gunakan sebagai elemen HTML biasa. Sehingga jika komentar HTML adalah berupa elemen HTML yang mengandung permintaan HTTP, maka kita bisa memuat elemen tersebut secara tidak langsung dengan cara menuliskannya sebagai komentar HTML terlebih dahulu:
#fake-elem-container adalah elemen yang akan dijadikan sebagai penampung komentar HTML, sedangkan #container akan menjadi penampung node komentar yang sudah berubah menjadi elemen HTML:
Alat ini digunakan untuk menggenerasikan kode-kode karakter spesial HTML yang bisa Anda gunakan untuk menghiasi tulisan atau untuk keperluan-keperluan lain seperti penambahan ikon pada menu tanpa gambar dan sebagainya. Cukup tentukan angka awal dan banyak karakter yang akan ditampilkan kemudian tekan tombol Show the Code List untuk menampilkan deret karakter beserta kodenya.
Anda juga bisa menggenerasikan kueri URL berdasarkan deretan simbol yang ditampilkan. URL ini bisa Anda gunakan sebagai URL berbagi atau URL bookmark untuk karakter-karakter favorit Anda:
Untuk indentasi karakter yang akurat, kode hendaknya dituliskan di dalam elemen <pre> atau elemen blok apapun yang dikenai deklarasi white-space:pre dan bertipe font Monospace:
<!-- Dengan tag `PRE` --> <pre> Teks dan unikode di sini ... </pre>
<!-- Dengan tag HTML biasa --> <div style="white-space:pre;word-wrap:break-word;font-family:Monospace;"> Teks dan unikode di sini ... </div>
Demo
A ├─── AA │ └─── AAA ├─── AB │ ├─── ABA │ ├─── ABB │ └─── ABC └─── AC
A ├─── AA │ └─── AAA ├─── AB │ ├─── ABA │ ├─── ABB │ └─── ABC └─── AC
