Belajar memahami kode html secara sederhana

Hai sobat...gimana kabar nya..!!! moga selalu semangat ya..!!

Kita berjumpa lagi di kesempatan ini..kali ini saya akan mencoba berbagi pengalaman saya selama ini untuk belajar dasar-dasar dari kode html..ehm..dulu waktu baru pertama mengenal blogger dan kode html nya sempet puyeng juga..tapi setelah banting tulang ,jungkir balik ,mondar mandir di kasur dan habiskan berbatang-batang rokok he he akhir nya ada sedikit cara untuk mempermudah memahami nya.eh..ternyata kode-kode tersebut mengasikan juga..!!!

Oh ya buat master-master yang sudah berpengalaman mungkin artikel ini tidak ada manfaat nya dan tidak menarik buat Mr. dan Mrs. sekalian ...namun dalam artikel ini saya mencoba berbagi pengalaman dengan para sobat sekalian yang masih pemula dan baru di dunia blog ini untuk mempermudah pemahaman masalah kode html agar mempermudah memodifikasi blog nya supaya lebih menarik.

OK..ga usah berbasa basi lagi yuk kita coba bahas cara-cara nya:

• Seperti biasa anda login terlebih dahulu.

• pada saat di dasbor klik entri baru seperti gambar di bawah ini :

Sebelum Kita membahas cara sederhana untuk lebih mempermudah memahami kode html..di sini saya coba membagi ke dalam dua kolom.

1.Kolom Compose

Kolom Compose boleh di anggap sebagai hasil dari kumpulan kode tag html yang enak untuk di lihat dalam artian suatu gambar atau tulisan yang mudah sekali untuk kita pahami bentuk nya.

2.Kolom Edit HTML

Kolom ini merupakan sebalik nya,kolom ini berisi kumpulan dan tag kode html yang dikandung oleh bentuk tulisan atau gambar pada kolom compose di atas.

Nah untuk mempermudah penjelasan masalah ini coba sobat perhatikan gambar di bawah ini dan untuk mempermudah nya saya beri contoh dengan nomor-nomor yang sesuai dengan posisi masing-masing.

A.Posisi dalam kotak editor Compose

B.Posisi dalam kotak editor Edit HTML

Gimana dengan gambar di atas..kira kira kesulitan ga untuk memahami nya,,kalau menemukan kesulitan saya akan mencoba memberikan keterangan dan penjelasan sesuai dengan nomor-nomor nya.

 

Cara penjelasan sederhana nya :

CONTOH 1: Tulisan  bercetak tebal.

Pada posisi kolom compose kita akan melihat tulisan gallerydunia bercetak tebal selanjut nya coba anda klik kolom edit html nya anda akan menemukan tulisan gallery dunia di awali oleh kode tag <b> dan di akhiri oleh kode </b>.

Setiap tag akan selalu berawal dan berakhir dengan tag yang sama dan hanya di bedakan dengan tanda ( / ) yang merupakan tanda dari penutup kode : 

contoh :

<i> yang akan di akhiri dengan </i>  (ket : tag ini membuat efek tulisan miring)
<u> yang di akhiri dengan </u> (ket : tag ini membuat efek garis bawah)

dan tag yang lain nya bisa sobat baca dan di pahami  di sini dan di sini


CONTOH 2:Memberi efek blink

Pada contoh no 2 ini tidak jauh berbeda dengan yang pertama hanya saja tag yang di masukan di awal dan diakhir kata gallery mempunyai efek yang menarik yaitu membuat tulisan berkedip-kedip.



CONTOH 3: Gambar

Contoh pada gambar di atas pada kolom edit html  merupakan kode baku dari yang link nya udah di hapus yang kalau kita lihat pada kolom compose terlihat sebuah icon chat..nah mari kita coba memahami kode nya :

kode html gambar nya seperti ini :

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOl5zVfO5olOwMotMDv_9qEyzocWqweDKv9c36bh6IVTdoPOUc3AX76U9ZTeCJaHOhi-7JaCFVmk2wX2tMChTeHtGqYPjCq_SKZh5UgyeOi6L2y_LyMLqw7sVRYC4EBIJcYbOhppqGh613/s1600/chat-icon.png" />

• kode yang bercetak tebal berwarna biru merupakan bentuk ketebalan bingkai yang akan mengelilingi gambar nah untuk melihat perbedaan nya coba sobat ganti angka "0" dengan angka yang lain nya boleh 2, 4 ,7 atau lain nya sobat akan lihat perbedaan nya.
• Sedangkan yang berwarna merah adalah link atau alamat gambar yang tersimpan di data internet,boleh anda coba silahkan di copy link tulisan berwarna merah di atas dan di paste pada addres bar browsur anda terus di enter anda akan lihat gambar nya seperti contoh di atas.

CONTOH 4 : Memberi warna tulisan

Pada contoh no 4 ini pernah saya bahas di artikel sebelum tentang cara membuat tulisan berwarna ..kalau sobat ingin melihat nya kembali silahkan sobat klik artikel belajar dasar-dasar kode html di sini.

Pada artikel ini saya coba memberikan cara mudah memberi warna untuk tulisan nya yaitu anda harus berada di posisi kolom compose coba anda tulis tulisan apa aja terus anda blog tulisan nya lalu klik lambang pada kotak editor yang berlambang A silahkan pilih warna nya...kalau sudah coba anda lihat kode html nya dengan klik kolom edit HTML..lihat hasil nya..

Coba anda melakukan percobaan seperti itu dengan warna yang lain pasti ada perbedaan nya.

CONTOH 5 : Link

Pada contoh no 5 kita coba memahami kode link pada sebuah  gambar atau tulisan,seperti contoh di atas kira-kira kode nya seperti ini :

<a href="http://www.gallerydunia.com/">Gallerydunia</a>

Kalau kita perhatikan tulisan kode berwarna merah merupakan suatu link yang kalau kita klik akan menuju halaman yang di tuju dari link tersebut..

Kesimpulan nya :

Kolom pada editor edit HTML merupakan tempat untuk menulis tag-tag kode nya sedangkan kolom pada compose untuk melihat hasil dari kumpulan kode html yang kita ketik pada kolom edit HTML dan sebagai catatan kadang ada juga kode atau tag html yang tidak bisa di lihat hasil nya di kolom compose namun kalau postingan kita terbit kan akan terlihat efek-efeh kode nya.

Kayak nya demikian aja dulu pengalaman yang sederhana ini dan sebelum nya mohon maaf jika banyak kekurangan ..yaa semoga bisa di maklumin dan bisa memberi sedikit mamfaat buat para sobat semua dalam menggeluti dunia blogger ini...sampai ketemu lagi di artikel selanjut nya.

Jangan lupa teguran nya ya di kotak komentar..!!! 

 

By : syafrizal ( Dunia Web Desain )