Tag-tag dasar HTML

Sebagai ulasan atau rangkuman mengenai kode html sederhana. Semoga bermanfaat bagi pemula yang ingin menjadi Web Master !:)
1. Membuat kutipan teks
<blockquote>Masukkan teks anda di sini</blockquote>
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:
Strike
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
_{Masukkan teks anda di sini}
Hasil:
Tulisannya akan ke bawah _subscript
14. Membuat teks agak ke atas
^{Masukkan teks anda di sini}
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
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_test
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:
marquee
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>
Up
Bergerak ke bawah
<marquee direction=”down”>Masukkan teks anda di sini</marquee>
Down
Bergerak ke kiri
<marquee direction=”left”>Masukkan teks anda di sini</marquee>
Left
Bergerak ke kanan
<marquee direction=”right”>Masukkan teks anda di sini</marquee>
Right
Anda bisa mengganti tulisan up dengan down, left, atau right untuk mengganti arah tulisan.
Untuk pengembangan marquee lebih lanjut silahkan ke sini
http://www.artikelinternet.com/trik-membuat-teks-berjalan-dengan-marquee/
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:
Array16
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>
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
http://html-color-codes.info/
Untuk pengembangannya menjadi berwarna pelangi bisa dilihat di sini
http://www.artikelinternet.com/memberikan-efek-pelangi-pada-link/
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
http://html-color-codes.info/
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

http://inforay.awardspace.info/