Berikut adalah penjelasan tentang kode dasar HTML
Kutipan teks (blockquote)
Contoh:
Teks (teletype)
Contoh:
Ini sebagai contohnya
Teks miring (Italic text)
Contoh:
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 :
Teks ke tengah (Center)
Contoh:
<p style= "text-align: center; "> Ini sebagai contohnya </p>
Hasilnya:
Teks ke kanan (Right)
Contoh:
<p style= "text-align: right; "> Ini sebagai contohnya </p>
Hasilnya :
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:
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 :
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>
Hasil:
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 :
Untuk menggunakan enter silahkan tambahkan kode <br/>
Maka anda akan mendapatkan tulisan dengan ada background dibelakangnya
Sumber : parsell
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 (
Contoh:
<strike> Ini sebagai contohnya </strike>
Hasilnya :
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 :
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:
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
Backlinks Please Thanks
URL |
Code For Forum |
HTML Code |
Anda Sekarang Sedang Baca Artikel Tentang kode dasar HTML , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel kode dasar HTML ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link kode dasar HTML Sumbernya. Thank's
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 !!