Join this site

kode dasar HTML

Berikut adalah penjelasan tentang kode dasar HTML

Kutipan teks (blockquote)
Contoh:

<blockquote> Ini sebagai contohnya </blockquote>
Hasilnya :
Ini sebagai contohnya

Teks (teletype)
Contoh:
<tt> Ini sebagai contohnya </tt>
Hasilnya :
Ini sebagai contohnya

Teks miring (Italic text)
Contoh:
<i> Ini sebagai contohnya </i>
Hasilnya :
Ini sebagai contohnya

Teks tebal (Bold text)
Contoh:
<b> Ini sebagai contohnya </b>
Hasilnya :
Ini sebagai contohnya

Tulisan dicoret (Strike)
Contoh:
<strike> Ini sebagai contohnya </strike>
Hasilnya :
Ini sebagai contohnya

Tulisan digarisbawahi ( Underlined text)
Contoh:
<u> Ini sebagai contohnya </u>
Hasilnya :
Ini sebagai contohnya

Teks ke kiri (Left)
Contoh:
<p style= "text-align: left; "> Ini sebagai contohnya </p>
Hasilnya :
Ini sebagai contohnya

Teks ke tengah (Center)
Contoh:
<p style= "text-align: center; "> Ini sebagai contohnya </p>
Hasilnya:
Ini sebagai contohnya

Teks ke kanan (Right)
Contoh:
<p style= "text-align: right; "> Ini sebagai contohnya </p>
Hasilnya :
Ini sebagai contohnya

Bullet Numberring
Contoh:
<li> Ini sebagai contohnya </li>
Hasilnya :








  • Ini sebagai contohnya









  • Agar menjorok kedalam anda bisa menambahkan <ul> dan </ul>
    Contoh:
    <ul><li> Ini sebagai contohnya </li></ul>
    Hasil:
    • Ini sebagai contohnya

    Teks lebih besar (Big text)
    Contoh:
    <big> Ini sebagai contohnya </big>
    Hasilnya :
    Ini sebagai contohnya

    Teks lebih ke kecil (Small text)
    Contoh:
    <small> Ini sebagai contohnya </small>
    Hasilnya :
    Ini sebagai contohnya

    Teks agak ke bawah (subscript)
    Contoh:
    <sub> Ini sebagai contohnya </sub>
    Hasilnya :
    Ini sebagai contohnya

    Teks agak ke atas (superscript)
    Contoh:
    <sup> Ini sebagai contohnya </sup>
    Hasilnya :
    Ini sebagai contohnya

    Kotak teks area
    Contoh:
    <textarea> Ini sebagai contohnya </textarea>
    Hasilnya :


    Untuk mengubah besar kolom dan barisnya
    Anda bisa menambahkan kodenya menjadi
    Contoh:
    <textarea rows="3" cols="30"> Ini sebagai contohnya </textarea>
    Hasilnya :

    Untuk mengganti ukurannya tinggal ganti angkanya saja

    Membuat tabel
    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>Tabel 1</th>
    <th>Tabel 2</th>
    </tr>
    <tr>
    <td>Tabel 3</td>
    <td>Tabel 4</td>
    </tr>
    </table>
    Hasil :
    Tabel 1 Tabel 2
    Tabel 3 Tabel 4

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

    Jika masih bingung bisa langsung dipraktekkan Disini

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

    Membuat tulisan berkedip (blink)
    <blink> Ini sebagai contohnya </blink>
    Hasilnya :
    Ini sebagai contohnya

    Membuat tulisan bergerak atau berjalan (marquee)
    <marquee> Ini sebagai contohnya </marquee>
    Hasilnya :
    Ini sebagai contohnya
    Secara default maka tulisan akan bergerak dari kanan ke kiri
    Agar bisa ke arah lainnya tambahkan kodenya menjadi sebagai berikut :
    Bergerak ke atas (up)
    <marquee direction= "up "> Ini sebagai contohnya </marquee>
    Hasilnya :

    Ini sebagai contohnya

    Bergerak ke bawah (down)
    <marquee direction= "down "> Ini sebagai contohnya </marquee>
    Hasilnya :

    Ini sebagai contohnya

    Bergerak ke kiri (left)
    <marquee direction= "left "> Ini sebagai contohnya </marquee>
    Hasilnya :
    Ini sebagai contohnya

    Bergerak ke kanan (right)
    <marquee direction= "right "> Ini sebagai contohnya </marquee>
    Hasilnya :

    Ini sebagai contohnya

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

    Membuat link pada tulisan atau teks
    <a href= "Masukkan link anda di sini"> Masukkan teks anda di sini</a>
    Contoh :
    <a href= "http://parsell.blogspot.com/"> Home</a>
    Hasilnya :
    Home

    Membuat link pada gambar
    <a href="Masukkan link anda di sini "><img border= "0 " width= "Masukkan ukuran lebar gambar anda " src= "Masukkan lokasi gambar anda " height= "Masukkan ukuran panjang atau tinggi gambar anda "/></a>
    Contoh :
    <a href= "http://www.ziddu.com/download/9335414/PrimoPDF.zip.html"><img border= "0 " width= "0 " src= "http://www.indonesiaindonesia.com/imagehosting/images/83751/1_Download.gif" height= "0 "/></a>
    Hasilnya :

    Nah biasanya kita menggabungkan kode ini dengan kode textarea untuk bertukar banner. <textarea> dan </textarea>


    <a href="http://parsell.blogspot.com/
    " target="blank"><img border="0" alt="Tutorial Blog" src="
    http://i1002.photobucket.com/albums/af149/Imtikhan/cooltext442868955-1.gif
    " /></a>

    Hasil:

    Tutorial Blog

    Mengganti warna teks
    <span style= "font-family: Arial; color: #Masukkan kode warna di sini; ">Masukkan teks anda di sini</span>
    Contoh :
    Warna biru
    <span style= "font-family: Arial; color: #0000ff; "> Ini sebagai contohnya </span>
    Hasilnya :
    Ini sebagai contohnya
    Untuk kode warna html bisa dilihat Disini
    Untuk pengembangannya menjadi berwarna pelangi bisa dilihat Disini

    Membuat efek stabilo pada tulisan
    <span style= "background-color: Masukkan kode warna di sini ; "> Masukkan teks anda di sini</span>
    Contoh :
    <span style= "background-color: #00ff00 ; "> Teks yang distabilo </span>
    Hasilnya :
    Teks yang distabilo
    Untuk kode warna html bisa dilihat Disini
    Mengganti background tulisan dengan gambar
    <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://i1002.photobucket.com/albums/af149/Imtikhan/background_posting.jpg
    )no-repeat; "><span style= "color: #000000; "> Ini sebagai contohnya </span></div>
    Hasilnya :
    Ini sebagai contohnya

    Untuk menggunakan enter silahkan tambahkan kode <br/>
    Maka anda akan mendapatkan tulisan dengan ada background dibelakangnya

    Sumber : parsell

    Posting Komentar - Back to Content

    [D-S] COMMENTS RULE :

    -DONT SPAM
    -DONT FLOOD
    -BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
    -BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
    -GUNAKANLAH BAHASA YANG SOPAN
    -FOLLOW THIS BLOG I WILL FOLLOWBACK !!

     
    Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna