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.
- Membuat kutipan teks
- Membuat teks teletype (untuk membedakan tulisan biasa dengan kode html)
- Membuat teks miring
- Membuat teks tebal
- Membuat tulisan dicoret
- Membuat tulisan digarisbawahi
- Membuat teks ke kiri
- Membuat teks ke tengah
- Membuat teks ke kanan
- Membuat Bullet Numberring
- Endolita
- Membuat teks lebih besar
- Membuat teks lebih ke kecil
- Membuat teks agak ke bawah
- Membuat teks agak ke atas
- Membuat kotak teks area
- Membuat tabel
- 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
- Membuat tulisan ke bawah (Enter) <br />
- Membuat tulisan bergerak atau berjalan <marquee behavior="scroll" direction="up" height="100" scrollamount="2" width="auto">Di sini tulisan yang ingin dibuat berjalan ke atas</marquee>
- Membuat link pada tulisan atau teks
- Membuat link pada gambar
- Mengganti warna teks
- Membuat efek stabilo pada tulisan
- Mengganti background tulisan dengan gambar
<blockquote>Masukkan teks anda di sini</blockquote>
Hasil:
Endolita
<tt>Masukkan teks anda di sini</tt>
Hasil:
Endolita
<i>Masukkan teks anda di sini</i>
Hasil:
Endolita
<b>Masukkan teks anda di sini</b>
Hasil:
Endolita
<strike>Masukkan teks anda di sini</strike>
Hasil:
<u>Masukkan teks anda di sini</u>
Hasil:
Endolita
<div style=”text-align: left;”>Masukkan teks anda di sini</div>
Hasil:
Endolita-left
<div style="text-align: center;">Masukkan teks anda di sini</div>
Hasil:
Endolita-center
<div style="text-align: right;">Masukkan teks anda di sini</div>
Hasil:
Endolita-right
<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:
<big>Masukkan teks anda di sini</big>
Hasil:
Endolita
<small>Masukkan teks anda di sini</small>
Hasil:
Endolita
<sub>Masukkan teks anda di sini</sub>
Hasil:
Tulisannya akan ke bawah Endolita
<sup>Masukkan teks anda di sini</sup>
Hasil:
Tulisannya akan ke atas Endolita
<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
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:
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.
Caranya sisipkan kode tersebut pada kode yang ingin buat menjadi enter atau ke bawah
Hasil:
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>
Bergerak ke bawah
<marquee behavior="scroll" direction="down" height="100" scrollamount="2" width="auto">Endolita</marquee>
Bergerak ke kiri
<marquee behavior="scroll" direction="left" height="100" scrollamount="2" width="auto">Endolita</marquee>
Bergerak ke kanan
<marquee behavior="scroll" direction="right" height="100" scrollamount="2" width="auto">Endolita</marquee>
Anda bisa mengganti tulisan up dengan down, left, atau right untuk mengganti arah tulisan.
<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
<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:
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>
<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
<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
<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
Endolita
Endolita
Post a Comment