Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jatuh cinta karena efek animasi yang diberikan; mereka jatuh cinta kepada slideshow, kepada efek dropdown menu, kepada efek gambar kabur, dan lain sebagainya; sebegitu jatuh cintanya mereka hingga mereka sanggup untuk duduk berlama-lama di depan komputer, ketagihan menggoyang-goyangkan pointer mouse mereka di permukaan menu navigasi dropdown berkali-kali hanya demi melihat efek slide-up dan slide-down yang begitu indah…
Minggu, 10 April 2016
Jumat, 05 Februari 2016
Parser Markdown Paling Sederhana
Dukungan Markup
Mendukung hampir semua markup seperti yang dinyatakan dalam dokumentasi Markdown Extra, kecuali markup catatan kaki, abbreviasi, daftar definisi, tautan ber–referensi dan gambar ber–referensi.
Selasa, 02 Februari 2016
Menggunakan `b:include` dan `b:includable`
Kita menggunakan perintah b:include dan b:includable untuk menciptakan bagian halaman tertentu di dalam widget, yang mana bagian halaman tersebut dapat kita tempatkan atau kita panggil berkali-kali. Pertama kali, kita akan menggunakan b:includable untuk membuat sebuah bagian pada halaman, dan kemudian menggunakan b:include untuk memanggil bagian halaman tersebut.
Ambil sebuah contoh, Saya akan membuat sebuah bagian halaman berupa deretan tombol berbagi. Agar Saya bisa meletakkan deretan tombol berbagi tersebut di bagian atas judul posting dan di bagian bawah konten posting tanpa harus menuliskan kode HTML yang sama sebanyak dua kali, maka di sini Saya akan menggunakan b:includable untuk mencatat kode HTML–nya terlebih dahulu..
Kode di bawah ini bisa Anda tuliskan di mana saja di dalam elemen <b:widget>, namun tidak di dalam elemen <b:includable> yang lain. Cara yang paling mudah adalah dengan meletakkan kode ini di bawah tag </b:includable> yang pertama kali Anda temukan:
<b:includable id='my-custom-share-buttons'>
<!-- Kode HTML tombol berbagi di sini… -->
</b:includable>Setelah Anda membuat bagian halaman tersebut, maka Anda bisa memanggilnya dengan menggunakan perintah b:include seperti ini:
<b:include name='my-custom-share-buttons'/>Contoh:
<b:include name='my-custom-share-buttons'/>
<h2 class='post-title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</h2>
<div class='post-body'>
<data:post.body/>
</div>
<b:include name='my-custom-share-buttons'/>
<footer class='post-footer'>
…
</footer>Rabu, 06 Januari 2016
Minggu, 15 November 2015
CARA MENGGUNAKAN FORMAT GAMBAR PADA WEBSITE
Website yang baik akan menampilkan gambar dengan warna yang cerah, jelas dan tajam tidak buram, kurang terlihat jelas dan kabur, disertai ukuran file-nya kecil sehingga bisa melakukan pindah (movement) gambar atau halaman dengan cepat dan cepat di-download. Gambar yang jelas, file-nya kecil adalah gambar yang disarankan untuk penggunaan pada website agar terlihat jelas dan kinerjanya cepat serta dalam penyimpanannya tidak memakan kapasitas yang besar pada memori penyimpanan.
Format gambar yang sering dipakai untuk website ada 3 format, yaitu: Format GIF. Format JPG dan Format PNG
1. Format GIF
Format GIF (Graphics Interchange Format) merupakan format yang paling sering dipakai pada pembuatan atau penampilan gambar di website. Penggunaan gambar format GIF pada website memberi Anda pilihan selective pallete dalam pembuatan sebuah gambar. Dengan penggunaan format gambar GIF Anda menggunakan maksimum 256 warna, dan dapat mengisi keseluruhan header dari file GIF.
Keunggulan format GIF:
Penampilan gambar yang baik dan bersih pada semua browser dan dapat mengisi sebagian besar warna objek dengan baik walaupun ukurannya relatif kecil.
Daya kompresinya dapat dilakukan dengan sekecil mungkin dengan kualitas bagus, sehingga dengan ukuran file yang kecil dapat mempercepat proses down load.
Kualitas transparasi dan animasi yang baik.
Dapat meng-customize jumlah warna yang digunakan untuk pembuatan gambar, dalam arti Anda membuat gambar tidak harus menggunakan ke-256 warna, tapi Anda bisa menentukan berapa jumlah warna yang akan digunakan untuk gambar yang dimaksud, dan ketika menyimpan file, jumlah warna yang dipakai itu saja yang disimpan tidak harus menyimpan dalam bentuk 256 warna, dengan demikian akan memperkecil ukuran file dan mempercepat akses browser degan kualitas gambar tetap baik.
Gambar dengan format GIF sudah cukup baik jika digunakan beberapa warna saja misalkan 7 atau 8 warna saja pada penyimpanan dengan optimized pallette dan menggunakan ‘no transparency’, hal ini akan menghasilkan file yang kecil. Berbeda jika disimpan dengan menggunakan 256 warna dan disimpan dengan ‘transparency’, hasilnya tidak jauh berbeda dengan yang disimpan dengan 7 atau 8 warna, tapi ukuran filenya lumayan besar. Jadi untuk ukuran desain standar cukup menggunakan gambar dengan format GIF disimpan dengan beberapa warna saja (jangan disimpan dengan 256 warna) dan menggunakan ‘no transparency’ maka akan menghasilkan gambar dengan kualitas baik dan ukuran file sangat kecil, hal ini baik untuk kecepatan load website.
2. Format JPG
Format JPG (Joint Photographic Experts Groups) mempunyai teknik kompresi kurang begitu bagus jika digunakan pada gambar yang tanpa warna gradasi, yang berakibat pada besarnya ukuran file sedangkan kualitasnya tiak jauh berbeda dengan format GIF yang disimpan dengan file yang kecil (disimpan dengan ‘no transparency dan hanya beberapa warna saja).
Format JPG sangat bagus digunakan khusus pada gambar yang mengandung warna gradasi (continuous tone), bahkan dapat disimpan dengan ukuran file yang sangat kecil, lebih kecil dari kompres file GIF.
Perbedaan yang signifikan antara format JPG dan GIF yaitu:
Format GIF dapat diedit dan disimpan dengan sistem kompresi lossless. Ketika Anda mengkompres frmat GIF menjadi berukuran kecil, hal ini tidak mengurangi kualitas gambar.
Format JPG ketika di edit dan disimpan dengan sistem kompresi lossless atau lossy akan menyebabkan sebagian warna terutama warna cerah akan dihilangkan sehingga tingkat kecerahan warna hasil penyimpanan dengan kompres menjadi tidak cerah dan banyak kehilangan warna.
3. Format PNG
Gambar dengan format PNG belum dapat digunakan secara luas oleh desainer website karena format ini tergolong baru jadi dapat digunakan hanya pada browser-browser tipe yang lebih baru dan masih dalam pengembangan.
CARA MENGGUNAKAN XHTML DALAM WEBSITE
XHTML merupakan sebuah bahasa penyempurnaan dari HTML untuk merepresentasikan halaman website sebagai formulasi dari bahasa aplikasi XML. Representasi bahasa XHTML sangat konsisten dengan bahasa XML. Bahasa XML adalah aplikasi yang terbaru yang dirilis untuk memudahkan penulisan pada layar browser agar lebih mudah, fleksibel dan tidak baku. Dengan adanya aplikasi XML bahasa HTML masih bisa digunakan melalui XHTML karena pada prinsipnya masih ada kemiripan dan tidak terlalu banyak perbedaan, hanya upaya penyempurnaan saja. Jadi antara XML, XHTML dan HTML tidak terlalu berbeda, hanya ada sedikit perbedaan saja.
Kelebihan atau keuntungan yang didapat dari penyempurnaan HTML ke XHTML diantaranya sebagai berikut:
1. Seluruh tulisan atau dokumen yang ada pada aplikasi XHTML dapat dibaca, ditulis, diedit dan digunakan pada aplikasi XML sebagai aplikasi baru.
2. Dengan adanya aplikasi XHTML penulisan pada layar browser akan lebih mudah dilakukan daripada pada aplikasi HTML. Perkembangan selanjutnya dari aplikasi XHTML akan lebih memudahkan penulisan pada browser, sekaligus dapat diakses dengan aplikasi XML.
Perbedaan mendasar dari File HTML dan XHTML diantaranya sebagai berikut:
1. Semua atribut atau elemen penulisan harus ditulis dalam bentuk huruf kecil.
2. Pada XHTML semua tag pembuka disyaratkan harus mempunyai tag penutup <tag>...</tag>, berbeda dengan aplikasi HTML ada sebagian tag yang tidak disyaratkan atau tidak ditulis dengan tag penutup seperti pada penggunaan tag <br> untuk membuat baris baru dan tag <hr> untuk pengaturan secara horizontal. Jadi pada aplikasi XHTML penulisan tag harus seperti ini: <br>...<br/>, atau <hr>...<hr/>, dengan tanda /> merupakan tanda penutupnya.
3. Seluruh atribut pada XHTML harus menggunakan atau mempunyai nilai, atribut tanpa menuliskan nilai tidak bisa digunakan pada XHTML.
4. Pernyataan nilai untuk atribut pada XHTML harus ditulis dalam tanda kutip.
5. Untuk atribut name dirubah ke dalam atribut “id”, jadi nama tag selalu dituliskan dengan atribut ‘id”, hal ini dilakukan agar penamaan untuk seluruh tag menjadi lebih konsisten.
6. Karakter-karakter berbentuk heksadesimal harus ditulis dimulai dengan: &#x, seperti contohnya �:.
XML
XML (eXtensible Markup Language) dikeluarkan oleh W3C pada tahun 1998, dan merupakan bahasa yang sangat mirip dengan HTML namun dengan beberapa kelebihan atau keunggulan yang tidal dimiliki HTML. Tujuan dibuatnya XML adalah supaya informasi dapat ditampilkan dengan format yang tidak baku, tidak seperti pada HTML dimana informasi dibuat dan dutampilkan dengan tag yang sudah baku, dan pembuatan HTML ditujukan hanya untuk menampilkan informasi saja.
Beberapa perbedaan XML dengan HTML diantaranya: pada XML penulisan nama tag dapat didefinisikan oleh penulis web sendiri, tidak seperti pada HTML harus menggunakan tag yang sudah baku, walaupun begitu XML masih memiliki persamaan dengan HTML diantaranya seperti pada penulisan tanda yang digunakan pada penulisan struktur tag, yang ditulis: “<...>” dan ditutup dengan tanada “</...>”. misalnya penulisan file XML sederhana seperti berikut ini:
<pengiriman>
<tujuan>Semarang</tujuan>
<tanggal> 1 Januari 2015</tanggal>
<nama_pengirim>Indra</nama_pengirim>
<pesan>saya sedang membuat tulisan dengan menggunakan XML</pesan>
</pengiriman>
Pada contoh di atas nama yang digunakan untuk tag dapat dibuat sendiri. Jadi pada dokumen XML nama tag tidak baku seperti pada HTML, atau dapat dibuat sendiri secara bebas asal menuliskan tag pembuka beserta penutupnya dengan tulisan yang sama. Adapun penulisan isi pada informasi yang akan ditampilkan masih sama dengan HTML dimana informasi berada di antara tag pembuka dan tag penutup.
CARA MENGGUNAKAN HTML DALAM PEMBUATAN WEBSITE
HTML (Hypertext Markup Languagae) merupakan sebuah bahasa untuk merepresentasikan halaman website. HTML berbeda dengan bahasa pemrograman, dalam bahasa pemrograman digunakan fungsi logika seperti IF...ELSE, WHILE...DO, dan lainnya. Pada HTML digunakan Hypertext atau link yang dapat menghubungkan antara satu dokumen dengan dokumen yang lainnya, inilah perbedaan sekaligus kelebihan HTML dengan bahasa pemrograman, namun dalam penggunaannya HTML dapat digabungkan dengan bahasa pemrograman.
 |
Struktur Umum File HTML
Struktur umum dari isi file HTML harus selalu mengandung pasangan tag <html>...</html>. Di dalam file HTML informasi dibagi dalam dua bagian besar, yaitu:
1. Header (bagian kepala yang berisi judul HTML), dengan tag: <head>...</head>.
2. Body (berisi informasi yang akan ditampilkan), dengan tag: <body>...</body>.
Contoh penulisan tag html misalkan Anda buka aplikasi internet eksplorer kemudian ketikan tag berikut ini untuk memulai belajar heading (untuk judul):
<html>
<head>
<title>judul html</title>.
</head>.
<body>
<h1>belajar menulis judul html dengan heading H1</h1><br>
</body>.
</html>
Hasil yang akan ditampilkan pada layar browser dari penulisan di atas adalah:
belajar menulis judul html dengan heading H1
Penulisan tag <h1> merupakan penulisan judul dengan heading 1 yang memiliki ukuran besar, dan bisa ditulis taga lain mulai h2 sampai h6 dengan ukuran yang semakin mengecil dengan menuliskan dimuka dan dibelakang judul sebagai berikut: <h2>belajar menulis judul html dengan heading</h2>, <h3>belajar menulis judul html dengan heading</h3>, <h4>belajar menulis judul html dengan heading<h4>, <h5> belajar menulis judul html dengan heading <h5>, <h6>belajar menulis judul html dengan heading</h6>. Penulisan tag <br> di akahir ialah untuk membuat baris baru pada layar browser.
Memisahkan Antara Paragraf
Kalau Anda menulis tulisan yang panjang layaknya sebuah paragraf, memisahkan antar paragraf dapat dilakukan dengan menulis tag <p>, contoh
<html>
<head>
<title>judul html</title>.
</head>.
<body>
HTML (Hypertext Markup Language) merupakan sebuah bahasa untuk merepresentasikan halaman website.
<p>
Pada HTML digunakan Hypertext atau link yang dapat menghubungkan antara satu dokumen dengan dokumen yang lainnya.
</body>.
</html>
Atau menulisakan tag <pre>, yang di tulis di awal dan di akhir halaman menghasilkan hasil penulisan yang sama dengan tag <p> yang dilatakkan di antara dua paragraf, contoh:
<html>
<head>
<title>judul html</title>.
</head>.
<body>
<pre>
HTML (Hypertext Markup Language) merupakan sebuah bahasa untuk merepresentasikan halaman website.
Pada HTML digunakan Hypertext atau link yang dapat menghubungkan antara satu dokumen dengan dokumen yang lainnya.
</pre>
</body>.
</html>
Mengatur Format Huruf
Tag yang dapat digunakan untuk mengatur format huruf diantaranya:
Tag <b>...</b> digunakan untuk mengatur format huruf tebal (bold).
Tag <i>...</i> digunakan untuk mengatur format huruf miring (italic).
Tag <u>...</u> digunakan untuk mengatur format huruf bergaris bawah (underline)
Misalnya seperti:
<html>
<head>
<title>Format huruf html</title>.
</head>.
<body>
<b>Pada HTML digunakan hypertext. </b> <br>
<i>Pada HTML digunakan hypertext. </i> <br>
<u>Pada HTML digunakan hypertext. </u> <br>
</body>.
</html>
Maka hasil yang didapatkan pada tampilan browser adalah seperti berikut:
Pada HTML digunakan hypertext.
Pada HTML digunakan hypertext.
Pada HTML digunakan hypertext.
Membuat Garis Pemisah dan Posisi Tulisan
Pada html tag untuk membuat garis pemisah dengan menuliskan tag <hr>, dan posisi tulisan baik di sisi kiri (left) dengan menuliskan “align”=”left”, atau di tengah (center) dengan menuliskan “align”=”center”, atau di sisi kanan (right) dengan menuliskan “align”=”right”.
Tag <hr> digunakan untuk membuat garis pemisah antara dua tulisan atau dua paragraf, sedangkan panjang garis diatur dengan menuliskan width=”10%” sampai dengan width=”100%”.
Contoh penulisan:
<html>
<head>
<title>Membuat garis pemisah dan posisi tulisan</title>.
</head>.
<body>
Pada HTML digunakan hypertext
<hr size=”4” align=”center” width=”60%”>
Link pada hypertext dapat menghubungkan antar dokumen.
</body>.
</html>
Maka hasil yang didapatkan pada tampilan browser adalah seperti berikut:
Pada HTML digunakan hypertext
............................................................................................................
Link pada hypertext dapat menghubungkan antar dokumen.
Langganan:
Postingan (Atom)