/ Koleksi Trik Kode HTML Dasar

Koleksi Trik Kode HTML Dasar


Catatan: Jika ingin menampilkan kode HTML pada postingan blog, maka Anda harus memasukkan pada mode HTML bukan pada mode Compose.
  1. Membuat kutipan teks

    2. <blockquote>Masukkan teks anda di sini</blockquote>
    Hasil:
    Endolita
  2. Membuat teks teletype (untuk membedakan tulisan biasa dengan kode html)

    3. <tt>Masukkan teks anda di sini</tt>
    Hasil:
    Endolita

  3. Membuat teks miring

    4. <i>Masukkan teks anda di sini</i>
    Hasil:
    Endolita

  4. Membuat teks tebal

    5. <b>Masukkan teks anda di sini</b>
    Hasil:
    Endolita

  5. Membuat tulisan dicoret

    6. <strike>Masukkan teks anda di sini</strike>
    Hasil:
    Endolita

  6. Membuat tulisan digarisbawahi

    7. <u>Masukkan teks anda di sini</u>
    Hasil:
    Endolita

  7. Membuat teks ke kiri

    8. <div style=”text-align: left;”>Masukkan teks anda di sini</div>
    Hasil:
    Endolita-left

  8. Membuat teks ke tengah

    9. <div style="text-align: center;">Masukkan teks anda di sini</div>
    Hasil:
    Endolita-center

  9. Membuat teks ke kanan

    10. <div style="text-align: right;">Masukkan teks anda di sini</div>
    Hasil:
    Endolita-right

  10. Membuat Bullet Numberring

    11. <li>Masukkan teks anda di sini</li>
    Hasil:

    Endolita
    Agar menjorok kedalam anda bisa menambahkan <ul> dan </ul>
     Contoh:
    <ul><li>Endolita</li></ul>
    Hasil:
    • Endolita
  11. Membuat teks lebih besar

    12. <big>Masukkan teks anda di sini</big>
    Hasil:
    Endolita

  12. Membuat teks lebih ke kecil

    13. <small>Masukkan teks anda di sini</small>
    Hasil:
    Endolita

  13. Membuat teks agak ke bawah

    14. <sub>Masukkan teks anda di sini</sub>
    Hasil:
    Tulisannya akan ke bawah Endolita

  14. Membuat teks agak ke atas

    15. <sup>Masukkan teks anda di sini</sup>
    Hasil:

    Tulisannya akan ke atas Endolita

  15. Membuat kotak teks area

    16. <textarea>Masukkan teks anda di sini</textarea>

    Untuk mengubah besar kolom dan barisnya
    Anda bisa menambahkan kodenya menjadi
    <textarea style="height: 75px; width: 300px;">Endolita</textarea>
    Hasil:

    Untuk mengganti ukurannya tinggal ganti angkanya saja

  16. Membuat tabel

    17. Tag <tr> mendefinisikan baris dalam tabel HTML
    Tag <th> mendefinisikan header cell pada tabel HTML
    Tag <td> mendefinisikan standard cell pada tabel HTML
    Sebuah tabel HTML memiliki dua macam cell:

    • Header cells – berisi informasi header (dibuat dengan elemen th)

    • Standard cells – berisi data (dibuat dengan elemen td)
      • Teks dengan elemen th akan tebal dan ke tengah
      Teks dengan elemen td akan biasa dan letaknya di kiri.

    Contoh:
    <table border=”1″>
    <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
    </tr>
    <tr>
    <td>Januari</td>
    <td>Rp.5.000.000</td>
    </tr>
    </table>
    Hasil:

    Bulan Tabungan
    Januari Rp.5.000.000

    Catatan: angka 1 bisa diganti angka 2,3,dst untuk jenis border tabel.

  17. Membuat tulisan ke bawah (Enter)
    18. <br />
    Caranya sisipkan kode tersebut pada kode yang ingin buat menjadi enter atau ke bawah

  18. Membuat tulisan bergerak atau berjalan
    19. <marquee behavior="scroll" direction="up" height="100" scrollamount="2" width="auto">Di sini tulisan yang ingin dibuat berjalan ke atas</marquee>
    Hasil:
    Endolita

    Secara default maka tulisan akan bergerak dari kanan dan ke kiri
    Agar bisa ke arah lainnya tambahkan kodenya menjadi sebagai berikut
    Bergerak ke atas
    <marquee behavior="scroll" direction="up" height="100" scrollamount="2" width="auto">Endolita</marquee>
    <marquee behavior="scroll" direction="up" height="100" scrollamount="2" width="auto">Di sini tulisan yang ingin dibuat berjalan ke atas</marquee>
    Endolita
    Bergerak ke bawah
    <marquee behavior="scroll" direction="down" height="100" scrollamount="2" width="auto">Endolita</marquee>

    Endolita
    Bergerak ke kiri
    <marquee behavior="scroll" direction="left" height="100" scrollamount="2" width="auto">Endolita</marquee>
    Endolita

    Bergerak ke kanan
    <marquee behavior="scroll" direction="right" height="100" scrollamount="2" width="auto">Endolita</marquee>
    Endolita

    Anda bisa mengganti tulisan up dengan down, left, atau right untuk mengganti arah tulisan.

  19. Membuat link pada tulisan atau teks

    20. <a href="Masukkan link anda di sini">Masukkan tulisan atau teks anda di sini</a>
    Contoh:
    <a href=”http://endolita.blogspot.com/”>Endolita</a>
    Hasil:
    Endolita

  20. Membuat link pada gambar

    21. <a href="Masukkan URL link Anda disini" target="_blank" title="Masukkan tulisan atau teks Anda disini"><img src="Masukkan URL link gambar Anda disini" alt="Masukkan tulisan atau teks Anda disini" /></a>
    Contoh:
    <a href="http://endolita.blogspot.com" target="_blank" title="endolita"><img src="http://i880.photobucket.com/albums/ac8/tikulerz/endolita/bannerfans_14439974_zps09c970c6.jpg~original" alt="endolita" /></a>
    Hasil:
    endolita
    Nah biasanya kita menggabungkan kode ini dengan kode textarea untuk bertukar banner. <textarea> dan </textarea>

    <textarea><a href="http://endolita.blogspot.com" target="_blank" title="endolita"><img src="http://i880.photobucket.com/albums/ac8/tikulerz/endolita/bannerfans_14439974_zps09c970c6.jpg~original" alt="endolita" /></a></textarea>





  21. Mengganti warna teks

    22. <span style="color: #Masukkan kode warna di sini;">Masukkan teks anda di sini</span>
    Contoh:
    Warna hijau
    <span style="color: #6aa84f;">Endolita</span>
    Hasilnya:
    Endolita
    Untuk kode warna html bisa dilihat DISINI

  22. Membuat efek stabilo pada tulisan

    23. <span style="background-color: #Masukkan kode warna disini;">Masukkan teks Anda disini</span>
    Contoh:
    <span style="background-color: #6aa84f;">Endolita</span>
    Hasil
    Endolita
    Untuk kode warna html bisa dilihat DISINI

  23. Mengganti background tulisan dengan gambar

    24. <div style="background:url(Masukkan lokasi gambar anda) no-repeat;"><span style="color: #Masukkan kode warna di sini;">Masukkan teks anda di sini</span></div>

     Contoh:
    <div style="background:url(http://i880.photobucket.com/albums/ac8/tikulerz/endolita/green_l_e_zpsb79eb5a6.jpg~original) no-repeat;"><span style="color: #000000;">Endolita</span></div>

    Hasil:
    Endolita






    Endolita




    Endolita
Subscribe to: Posts (Atom)