Rabu, 30 Januari 2013

Dasar-dasar kode HTML untuk Blog

Mengenal Dasar - Dasar Kode HTML | Pada kesempatan kali ini bang dadan akan membahas tentang Mengenal Dasar - Dasar Kode HTML. tutorial ini mungkin dikhususkan untuk para sahabat Blogger yang masih baru / pemula dalam dunia Blogger/blogspot. Sebelum sobat mengenal lebih jaut tentang Kode - Kode HTML alangkah baiknya sahabat mengenal terlebih dahulu dasar - dasarnya, karena ini merupakan pondasi awal untuk sobat melangkah pada Kode - Kode HTML selanjutnya yang mungkin jauh lebih rumit.

Nah, apabila sobat sudah tahu awalnya dasar - dasar Kode HTML itu seperti apa, insya Allah kedepan jika menemukan Kode HTML yang lebih kompleks lagi sobat tidak akan kebingungan.
Oke langsung saja berikut adalah Dasar - Dasar Kode HTML + Contohnya, silahkan sobat simak baik - baik ya??
Berikut daftar isi yang akan kita bahas:


  • Kode untuk mempertebal huruf
  • kode untuk membuat huruf miring
  • Membuat Garis Bawah pada Huruf
  • Kode untuk Membuat Baris Baru
  • Membuat Tulisan Rataan Tengah
  • Membuat Tulisan Rataan Kanan
  • Membuat Tulisan Rataan Kiri
  • Merubah Style Font atau Gaya Huruf
  • Memberi Warna pada Teks





  • Mengatur Ukuran Huruf Besar/Kecil
  • Membuat Tulisan Berkedip / Blink
  • Membuat Tulisan Berjalan / Marquee
  • Membuat Tulisan Format Numbering
  • Membuat Tulisan Format Bullets
  • Membuat Tulisan Stabilo
  • Membuat Tulisan Background Warna
  • Membuat Efek Tulisan Pelangi



  •  Belajar Dasar - Dasar Kode HTML 

    1. Kode untuk Mempertebal Huruf
    Kodenya sbb:
    <b> pensil pintar <b>
    Contoh : pensil pintar

    2. Kode untuk Membuat Huruf Miring
    Kodenya sbb:
    <i> pensil pintar </i>
    Contoh : <i>pensilpintarpintar pintar</i>
    Maka hasilnya = pensilpintar
    3. Membuat Garis Bawah pada Huruf
    Kodenya sbb:
    <u> pensil pintar </u>
    contoh : <u> pensil pintar </u>
    Hasilnya = pensil pintar

    4. Kode untuk Membuat Baris Baru
    Kodenya sbb:
    pensil <br />pintar
    Contoh : pensil <br />pintar
    Hasilnya =
    pensil
    pintar
    5. Membuat Tulisan Rataan Tengah
    Kodenya sbb:
    <center> pensil pintar </center>

    6. Membuat Tulisan Rataan Kanan
    Kodenya sbb:
    <p align="right"> media on7 </p>

    7. Membuat Tulisan Rataan Kiri
    Kodenya sbb:
    <p align="left"> pensil pintar </p>
    8. Merubah Style Font atau Gaya Huruf
    Kodenya sbb:
    <font face="Arial"> pensilpintar </font>
    Note : Silahkan sobat ganti tulisan Arial dengan font jenis yang lain seperti: Verdana, Georgia, Times New Roman dll.

    9. Memberi Warna pada Teks
    Kodenya sbb:
    <font color="blue"> pensil pintar </font>
    Note : Warna blue/biru bisa sobat ganti sesuai dengan keinginan sobat. misal: Merah/Red, Kuning/Yellow, Hijau/Green, Hitam/Black.

    10. Mengatur Ukuran Huruf Besar/Kecil
    Kodenya sbb:
    <font style="font-size:500%;"> pensilpintar </font>
    Note : Ukuran 500% bisa sobat ganti sesuai dengan keinginan sobat.

    11. Membuat Tulisan Berkedip / Blink
    Kodenya sbb:
    <blink> pensil pintar </blink>

    12. Membuat Tulisan Berjalan / Marquee
    Kodenya sbb:
    <marquee> pensil pintar </marquee>
      pensilpintar Contohnya seperti diatas.

    13. Membuat Tulisan Format Numbering
    Kodenya sbb:
    <ol>
    <li>pensil</li>
    <li>pintar</li>
    </ol>
    Contoh :
    1. pensil
    2. pintar

    14. Membuat Tulisan Bormat Bullets
    Kodenya sbb:
    <ul>
    <li>pensil</li>
    <li>pintar</li>
    </ul>
    contoh :
    • pensil
    • pintar
    15. Membuat Tulisan Stabilo
    Kodenya sbb:
    <br /><span style="background-color:#F2F2F2"> pensil pintar </span><br />
    Contoh :  pensilpintar

    16. Membuat Tulisan Background Warna
    Kodenya sbb:
    <div style="background: #8CAA7B; border:1px solid #F5003D; padding:5px;"> pensilpintar
    </div>
    Contoh :
    pensil pintar
    Note : kode #8CAA7B adalah Kode warna background dan #F5003D adalah warna border silahkan sobat ganti bisa lihat DISINI untuk Kode warna yang lain. padding adalah ukuran lebar background

    17. Membuat Efek Tulisan Pelangi
    Kodenya sbb:
    <script src='http://myscriptforme.googlecode.com/files/rainbow.js'> </script>

    Teks/tulisan link pelangi
    • Silahkan sobat menuju Rancangan
    • Kemudian pilih template lalu klik Edit HTML
    • Cari Kode seperti ini : </head>
    • Simpan Kode di bawah ini tepat di atasnya
    <script src='http://myscriptforme.googlecode.com/files/rainbow.js'> </script>
    • Simpan templete.
    Nah, mungkin cukup sekian dulu pembahasan kita kali ini tentang Dasar-dasar Kode HTML. Semoga artikel ini bermanfaat ya sob..!!
    Selamat mempelajari Kode - Kode HTML.

    Tidak ada komentar:

    Posting Komentar