Sebagai ulasan atau rangkuman mengenai kode html sederhana. Semoga
bermanfaat bagi pemula yang ingin menjadi Web Master !:)
1. Membuat kutipan teks
Hasil:
Blockquote
2. Membuat teks teletype (untuk membedakan
tulisan biasa dengan kode html)
<tt>Masukkan teks anda di sini</tt>
Hasil:
Teletype text
3. Membuat teks miring
<i>Masukkan teks anda di sini</i>
Hasil:
Italic text
4. Membuat teks tebal
<b>Masukkan teks anda di sini</b>
Hasil:
Bold text
5. Membuat tulisan dicoret
<strike>Masukkan teks anda di sini</strike>
Hasil:
6. Membuat tulisan digarisbawahi
<u>Masukkan teks anda di sini</u>
Hasil:
Underlined text
7. Membuat teks ke kiri
<p style=”text-align: left;”>Masukkan teks anda di sini</p>
Hasil:
Left
8.Membuat teks ke tengah
<p style=”text-align: center;”>Masukkan teks anda di sini</p>
Hasil:
Center
9. Membuat teks ke kanan
<p style=”text-align: right;”>Masukkan teks anda di sini</p>
Hasil:
Right
10. Membuat Bullet Numberring
<li>Masukkan teks anda di sini</li>
Hasil:
· Bullet
Agar menjorok kedalam anda bisa menambahkan <ul> dan </ul>
Contoh:
<ul><li>Bullet</li></ul>
Hasil:
- Bullet
11. Membuat teks
lebih besar
<big>Masukkan teks anda di sini</big>
Hasil:
Big text
12. Membuat teks
lebih ke kecil
<small>Masukkan teks anda di sini</small>
Hasil:
Small text
13. Membuat teks
agak ke bawah
<sub>Masukkan teks anda di sini</sub>
Hasil:
Tulisannya akan ke bawah subscript
14. Membuat teks agak ke atas
<sup>Masukkan teks anda di sini</sup>
Hasil:
tulisannya akan ke atas superscript
15. Membuat kotak
teks area
<textarea>Masukkan teks anda di sini</textarea>
Untuk mengubah besar kolom dan barisnya
Anda bisa menambahkan kodenya menjadi
<textarea rows=”3″ cols=”30″>textarea</textarea>
Hasil:
Untuk mengganti ukurannya tinggal ganti angkanya saja
16. 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>Bulan</th>
<th>Tabungan</th>
</tr>
<tr>
<td>Januari</td>
<td>Rp.1000000</td>
</tr>
</table>
Hasil:
Bulan
|
Tabungan
|
Januari
|
Rp.1000000
|
Catatan: angka 1 bisa diganti angka 2,3,dst untuk jenis border tabel.
Jika masih bingung bisa langsung dipraktekkan di sini
17. Membuat tulisan
ke bawah (Enter)
<br />
Caranya sisipkan kode tersebut pada kode yang ingin buat menjadi enter atau
ke bawah
18. Membuat tulisan
berkedip
<blink>Masukkan teks anda di sini</blink>
Hasil:
blink
19. Membuat tulisan
bergerak atau berjalan
<marquee>Masukkan teks anda di sini</marquee>
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 direction=”up”>Masukkan teks anda di sini</marquee>
Bergerak ke bawah
<marquee direction=”down”>Masukkan teks anda di sini</marquee>
Bergerak ke kiri
<marquee direction=”left”>Masukkan teks anda di sini</marquee>
Bergerak ke kanan
<marquee direction=”right”>Masukkan teks anda di sini</marquee>
Anda bisa mengganti tulisan up dengan down, left, atau right untuk
mengganti arah tulisan.
Untuk pengembangan marquee lebih lanjut silahkan ke sini
2o. Membuat link pada tulisan atau teks
<a href=”Masukkan link anda di sini”>Masukkan tulisan atau teks anda
di sini</a>
Contoh:
<a href=”http://array16.net/”>Array16</a>
Hasil:
21. 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>
<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://pilihansempurna.com”><img border=”0″ width=”236″
src=”http://i812.photobucket.com/albums/zz42/pilihansempurna/pilihansempurna.gif”
height=”22″/></a>
Hasil:
Nah biasanya kita menggabungkan kode ini dengan kode textarea untuk
bertukar banner. <textarea> dan </textarea>
<textarea> <a href=”http://pilihansempurna.com”><img
border=”0″ width=”236″ src=”http://i812.photobucket.com/albums/zz42/pilihansempurna/pilihansempurna.gif”
height=”22″/></a></textarea>
Hasil:
22. Mengganti warna teks
<span style=”font-family: Arial; color: #Masukkan kode warna di
sini;”>Masukkan teks anda di sini</span>
Contoh:
Warna hijau
<span style=”font-family: Arial; color: #00cc00;”>TEXT</span>
Hasil:
TEXT
Untuk kode warna html bisa dilihat di sini
Untuk pengembangannya menjadi berwarna pelangi bisa dilihat di sini
23. 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: #F5A9A9 ;”> Teks yang distabilo
</span>
Hasil:
Teks yang distabilo
Untuk kode warna html bisa dilihat di sini
24. 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://i812.photobucket.com/albums/zz42/pilihansempurna/thumbnail.jpg)no-repeat;”><span
style=”color: #000000;”>Tulis Teks disini</span></div>
Hasil:
Tulis Teks anda di sini
Untuk menggunakan enter silahkan tambahkan kode
Maka anda akan mendapatkan tulisan dengan ada background
dibelakangnya
Selamat Mencoba
Untuk menggunakan enter silahkan tambahkan kode
Maka anda akan mendapatkan tulisan dengan ada background
dibelakangnya
Selamat Mencoba
Catatan: Gambar akan menyesuaikan panjang tulisan, jadi kalau tulisannya pendek maka
gambarnya akan terpotong, solusinya adalah dengan menambahkan
yang berarti enter sampai gambar tidak terpotong.
yang berarti enter sampai gambar tidak terpotong.
Nah itu semua adalah kumpulan kode HTML sederhana.
Sebagian kode saya dapatkan dari sini
Perlu diperhatikan: jika anda ingin memasukkan kode HTML pada postingan blog, maka anda harus
memasukkan pada mode HTML bukan pada mode Visual atau Tampilan.
Semoga Bermanfaat.
0 komentar:
Posting Komentar