Postingan kali ini saya khususan bagi kawan-kawan yang masih kurang mengerti bahasa HTML tersebut..yaaaa..seperti saya jugaaaaa..heheheeee karena saya sampai hari ini terus belajar karena ilmu masalah yang seperti ginian masih minim broo..paling tidak kita saling tukar menukar informasi…okee!!!
HTML adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word. Untuk mudahnya, kita gunakan program Notepad.
Sekarang bukalah program Notepad. Bila anda belum tahu caranya, klik Start > Programs > Accessories lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan berikut satu demi satu.
Ini dia kode-kode dasar tersebut:
Supaya tidak bingung-bingung, saya akan jelaskan step by step….heheheee pake bahasa Inggris segala…
1.<html> adalah kode yang terdapat di bagian atas halaman web. Tag penutup dari <html> adalah </html>
2.<head> Semua kode yang diletakkan di antara tag dan tidak akan terlihat di halaman web. Di bagian Head ini, kita bisa melakukan berbagai macam pengaturan, seperti:
- meletakkan kode javascript
- meletakkan kode css
- meletakkan meta tag
- dan lain-lain
3.<title> adalah tag untuk meletakkan Judul halaman web. Ingat, judul halaman web tidak sama dengan nama file.
4.<body> adalah tempat dimana pengunjung dapat melihatnya. Apa saja yang ingin kita sampaikan ke pengunjung disinilah tempatnya. Kalau kode-kode yang lain pengunjung tidak dapat melihatnya.
Rumus penting di dalam kode HTML:
Dalam pembuatan kode HTML, berlaku rumus "first come, last out". Maksudnya, kode yang pertama kali dimasukkan, maka dia harus terakhir kali ditulis. maksudnya gini loo…apabila kita menulis awalannya adalah <a>, maka pada akhirannya harus ditutup dengan <a> juga..tetapi ditambah dengan tanda garis miring (/), dan kodenya akhirannya akan seperti ini </a>.
sekarang kita melakukan percobaan dengan membuat Huruf Tebal, Miring dan Bergaris Bawah.
1.<b> adalah kode untuk membuat huruf tebal ==>> harus ditutup dengan </b>
2.<i> adalah kode untuk membuat huruf miring ==>> harus ditutup dengan </i>
3.<u> untuk membuat huruf bergaris bawah ==>> harus ditutup dengan </u>
Misalkan kita hendak membuat huruf miring sekaligus tebal
Cara Yang Benar :
<b><i> ini huruf miring dan tebal <i><b>
atau:
<i><b> ini huruf miring dan tebal <b><i>
Semua ini bisa dipergunakan pada setiap postingan kawan-kawan. Dimana pada saat membuat postingan kode-kode seperti diatas sangat diperlukan agar menambah cantik postingan kita.
Berbagai macam kode HTML dasar yang perlu diketahui.
| 1 | <br> | Turun satu baris kebawah(enter) / Kursor dan kalimat dibelakangnya turun 1 baris kebawah |
| 2 | <big>isi tulisan</big> | Membuat tulisan menjadi sedikit lebih besar |
| 3 | <font color=”warna tulisan“>isi tulisan</font> | Mewarnai tulisan. Ganti warna tulisan dengan salah satu pilihan yang ada : red, blue, yellow, green, brown, gold, purple |
| 4 | | Menambah 1 spasi karena ada kemungkinan penggunaan 2 spasi tidak akan terbaca pada beberapa engine blog |
| 5 | <font size=”ukuran tulisan“>isi tulisan</font> | Mengganti ukuran tulisan. Bisa digunakan apabila kode pada no. 2 tidak sesuai dengan keinginan kita |
| 6 | <strong>isi tulisan</strong> atau <b>isi tulisan</b> | Untuk menebalkan tulisan. Fungsi sama dengan ”’isi tulisan”’ atau tombol ‘cetak tebal’ |
| 7 | <p> | Kursor dan kalimat dibelakangnya turun satu setengah baris kebawah |
| 8 | <u>isi tulisan</u> | Membuat garis bawah tulisan |
| 9 | <small>isi tulisan</small> | Membuat tulisan menjadi sedikit lebih kecil |
| 10 | <s>isi tulisan</s> | Membuat garis mencoret pada tulisan |
| 11 | <pre>isi tulisan</pre> | Membuat tulisan tetap pada keadaan yang kita inginkan, misalnya untuk urutan berjejer kebawah |
| 12 | <center>isi tulisan</center> | Membuat tulisan berada di tengah halaman |
| 13 | <blink>isi tulisan</blink> | Membuat tulisan tampak berkedip |
Kode Garis
Kali ini saya akan memberitahukan kode Garis1.Garis :
Kode :
<hr></hr>
2.Garis pendek atau panjang
Kode :
<hr width="25%"></hr>
3.Garis lebar
Kode :
<hr size="2"></hr>
*catatan = ukuran lebar (2) bisa diganti sesuka anda
4.Garis berwarna
kode :
<hr style="color:yellow"></hr>
*catatan = warna (red) bisa diganti sesuka anda
5.Garis Besar Berwarna
Kode:
<hr size="8" width="80%" style="color:blue"></hr>
*catatan = ukuran lebar (8) dan warna (biru) bisa diganti sesuka anda
Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar
Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar
Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42
Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42
Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf
Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar
Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar
Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
- DOT 1
- DOT 2
- DOT 3
Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar
Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
| Text |
Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
| Text |
Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
| Text |
Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
| Text |
Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
| Text |
Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.
Tidak ada komentar:
Posting Komentar