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:
_{Ini sebagai contohnya}
Hasilnya :
_{Ini sebagai contohnya}

Teks agak ke atas (superscript)
Contoh:
^{Ini sebagai contohnya}
Hasilnya :
^{Ini sebagai contohnya}

Kotak teks area
Contoh:
<textarea> Ini sebagai contohnya </textarea>
Hasilnya :
Ini sebagai contohnya
Untuk mengubah besar kolom dan barisnya
Anda bisa menambahkan kodenya menjadi
Contoh:
<textarea rows="3" cols="30"> Ini sebagai contohnya </textarea>
Hasilnya :
Ini sebagai contohnya
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://berita-unik.cyber4rt.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://berita-unik.cyber4rt.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

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

Semoga bermanfaat

http://berita-unik.cyber4rt.com> Hargailah Karya Orang, Apabila ingin Artikel ini bermanfaat dan akan anda Copy-paste di Blog anda Maka Berikanlah Sumber Aslinya ; http://berita-unik.cyber4rt.com

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email