MENAMBAH GAMBAR DENGAN HTML

Jika kebetulan anda belum berkesempatan memiliki PC, optimalkan penggunaan ponsel untuk terus dapat belajar.
Belajar HTML dengan ponsel? siapa takut..
Sedikit panduan, silahkan klik Praktek HTML Dengan Ponsel. Dan barangkali perlu, silahkan baca juga Optimalkan Penggunaan Operamini.

Tag <img>

Untuk menambahkan gambar ke dalam suatu elemen tulisan/posting blog/artikel ataupun pada elemen lain dalam halaman WEB, tag yang diperlukan adalah <img>.
Tag <img> tidak memerlukan tag penutup secara terpisah, cukup dengan memberikan tanda "/" (slash) pada bagian akhir sebelum tanda">" sehingga menjadi seperti ini, <img/>.

Beberapa atribut dari tag <img>, yang diperlukan untuk dapat mengatur tampilan gambar pada browser antara lain:

src

Atribut ini wajib digunakan, yaitu untuk menentukan "lokasi asal" gambar yang akan ditampilkan. Lokasi yang dimaksud adalah, url yang mengarah/menuju ke sebuah file gambar.

border

Untuk mengatur bingkai

width

Untuk mengatur lebar gambar

height

Untuk mengatur tinggi gambar

alt

Alternatif yang akan ditampilkan jika gambar tidak dapat tampil dalam browser

Selain atribut "src" yang wajib dalam penggunaanya, atribut lain yang tersebut diatas adalah bersifat opsional.

Contoh:

Jika ditulis:

<img src="http://i676.photobucket.com/albums/vv122/sung_sun6/kakangsung.png"/>

Hasilnya adalah:

Contoh berikutnya:

Jika ditulis:

<img src="http://i676.photobucket.com/albums/vv122/sung_sun6/kakangsung.png" width="50px" height="25px"/>

Hasilnya adalah:

Contoh berikutnya:

Jika ditulis:

<img src="http://i676.photobucket.com/albums/vv122/sung_sun6/kakangsung.png" width="80px" height="40px" border="3" alt="contoh"/>

Hasilnya adalah:

Sebenarnya masih banyak hal yang perlu dipelajari terkait dengan gambar. Namun, berhubung saya sendiri baru banyak belajar secara teori, maka yang di ulas dalam posting ini adalah berdasarkan apa yang telah pernah saya praktekan sendiri dengan ponsel.

Sebelumnya | Berikutnya

KARAKTER TERTENTU HTML

Dalam suatu tampilan halaman HTML, beberapa tampilan simbol/karakter tertentu adalah dengan menggunakan kode-kode tersendiri dalam halaman editnya. Dengan kata lain, browser tidak akan menampilkan simbol/karakter(tertentu) yang dimaksud jika pada halaman edit di ketik dengan simbol/tanda/karakter itu sendiri.
Sebagai contoh misalnya, untuk menampilkan tanda "<" (buka kurung runcing) kode yang diperlukan adalah &lt;, dan untuk menampilkan ">", kodenya adalah &gt;.

Berikut ini adalah beberapa contoh simbol/karakter yang memerlukan kode tertentu untuk dapat ditampilkan pada halaman WEB.

KARAKTER KHUSUS
SIMBOL	KODE	KETERANGAN
<	&lt;	Kurung runcing buka
>	&gt;	Kurung runcing buka
"	&quot;	Tanda kutip
(spasi)	&nbsp;	Spasi
©	&copy;	Hak Cipta
®	&reg;	Terdaftar
±	&plusmn;	Plus Minus
½	&frac12;	Setengah
¼	&frac14;	Seperempat
²	&sup2;	Pangkat 2/Persegi
³	&sup3;	Pangkat 3/kubik

Contoh penulisan:

Jika ditulis:

Tiga &lt; empat.
Tiga &gt; tiga.
Harap maklum, blog &quot;PELANGLANG MAYA&quot; memang begini adanya.

Hasilnya adalah:

Tiga < Empat
Empat > Tiga
Harap maklum, blog "PELANGLANG MAYA" memang begini adanya.

Contoh berikutnya:

Jika ditulis:

Tiga&nbsp;&nbsp;&nbsp;Spasi
Enam&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Spasi
Delapan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Spasi
Hak Cipta &copy; oleh Pelanglang Maya
Terdaftar &reg; 2010

Hasilnya adalah:

Tiga   Spasi
Enam      Spasi
Delapan        Spasi
Hak Cipta © oleh Pelanglang Maya
Terdaftar ® 2010

Contoh yang lain:

Jika ditulis:

&plusmn; &frac12; bagian isi dari Pelanglang Maya adalah hasil melanglang dunia maya. Dan &plusmn; &frac14; bagian saja dari isi keseluruhan, proses pekerjaanya dibantu dengan browser PC.

Hasilnya adalah:

± ½ bagian isi dari Pelanglang Maya adalah hasil melanglang dunia maya. Dan ± ¼ bagian saja dari keseluruhan, proses pekerjaanya dibantu dengan browser PC.

Dan jika ditulis:

5&sup2; = 25
5&sup3; =1 25

Hasilnya adalah:

5² = 25
5³ = 125

Untuk simbol/karakter dan kode lainya, tersedia lengkap di W3schools.

Sebelumnya | Berikutnya

TABEL HTML BAGIAN AKHIR

Tag <td>

Melanjutkan dan melengkapi dari dua posting sebelumnya, TABEL HTML membahas tag <table> dan TABEL HTML II membahas tag <tr>, maka kali ini giliran tag <td>.

Tag <td> ini dapat disisipi dengan beberapa atribut yang terdapat pada tag <table> maupun pada tag <tr>. Yaitu antara lain, "bgcolor", "width", "align", ataupun "valign".
Selain daripada itu, atribut yang dapat digunakan adalah:

colspan

Untuk menggabungkan beberapa sel pada satu baris yang sama, dalam sebuah tabel yang memiliki lebih dari satu baris.

rowspan

Untuk menggabungkan beberapa sel pada satu kolom, dalam sebuah tabel yang terdiri dari banyak baris dan sel.

Mulai dengan contoh.
Contoh pertama adalah bagaimana membuat lebih dari satu baris dan sel dalam sebuah tabel.

Jika ditulis:

<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td width="20%">Simpati</td>
<td width="20%">As</td>
<td width="20%">Mentari</td>
<td width="20%">IM3</td>
<td width="20%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:

Simpati	As	Mentari	IM3	Axis
Bebas	Jempol	3(three)	???	???
Flexi	Esia	Fren	Hepi	Smart
Star One	???	???	???	???

Perhatikan juga, lebar sel(<td>) yang juga bisa diatur dengan atribut "width" untuk tag <td> pada baris(<tr>) pertama saja.

Colspan

Contoh dengan "colspan "

Jika ditulis:

<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td colspan="5" bgcolor="red">Operator Selular</td>
</tr>
<tr align="center">
<td width="20%">Simpati</td>
<td width="20%">As</td>
<td width="20%">Mentari</td>
<td width="20%">IM3</td>
<td width="20%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:

Operator Selular
Simpati	As	Mentari	IM3	Axis
Bebas	Jempol	3(three)	???	???
Flexi	Esia	Fren	Hepi	Smart
Star One	???	???	???	???

Lihat dan perhatikan juga pada baris pertama, tag <td> juga dapat disisipi dengan atribut "bgcolor"

Rowspan

Contoh dengan "rowspan "

Jika ditulis:

<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td rowspan="2" width="10%">GSM</td>
<td width="18%">Simpati</td>
<td width="18%">As</td>
<td width="18%">Mentari</td>
<td width="18%">IM3</td>
<td width="18%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(Three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td rowspan="2">CDMA</td>
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:

GSM	Simpati	As	Mentari	IM3	Axis
	Bebas	Jempol	3(Three)	???	???
CDMA	Flexi	Esia	Fren	Hepi	Smart
	Star One	???	???	???	???

Untuk lebih memaksimalkan tabel seperti pada contoh diatas, gunakan atribut colspan dan rowspan secara bersamaan.

Contoh:

Jika ditulis:

<table border="1" width="360px" cellpadding="5px">
<tr align="center">
<td colspan="6">Operator Selular</td>
</tr>
<tr align="center">
<td rowspan="2" width="10%">GSM</td>
<td width="18%">Simpati</td>
<td width="18%">As</td>
<td width="18%">Mentari</td>
<td width="18%">IM3</td>
<td width="18%">Axis</td>
</tr>
<tr align="center">
<td>Bebas</td>
<td>Jempol</td>
<td>3(Three)</td>
<td>???</td>
<td>???</td>
</tr>
<tr align="center">
<td rowspan="2">CDMA</td>
<td>Flexi</td>
<td>Esia</td>
<td>Fren</td>
<td>Hepi</td>
<td>Smart</td>
</tr>
<tr align="center">
<td>Star One</td>
<td>???</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</table>

Hasilnya adalah:

Operator Selular
GSM	Simpati	As	Mentari	IM3	Axis
	Bebas	Jempol	3(Three)	???	???
CDMA	Flexi	Esia	Fren	Hepi	Smart
	Star One	???	???	???	???

Sebelumnya | Berikutnya

TABEL SEDERHANA HTML II

Tag <tr>

Masih terkait dengan posting sebelumnya yaitu tabel sederhana html,dimana kali ini adalah akan sedikit mengulas tentang salah satu tag yang dalam penggunaanya selalu beriringan dengan tag <table> yaitu tag <tr>(table rows).
Atribut untuk tag ini antara lain:

align

Untuk menentukan perataan kanan-kiri konten dalam tabel. Pilihan nilai/value yang diperlukan adalah "left" "center" "justify" dan "right"

height

Untuk mengatur ketinggian tabel. Nilainya adalah dalam satuan piksel "px"

valign(vertical align)

Untuk menentukan perataan atas-bawah. Value/nilainya adalah, "top" "middle" "bottom" "baseline"

Lihat beberapa contoh dibawah ini.

Contoh 1 dengan align

Jika ditulis:

<table border="1">
<tr align="left"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di sebelah kiri. </td></tr>
</table>

Hasilnya adalah:

Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di sebelah kiri.

Atau jika ditulis:

<table border="1">
<tr align="center"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di tengah. </td></tr>
</table>

Hasilnya adalah:

Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di tengah.

Atau juga jika ditulis:

<table border="1">
<tr align="justify"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata kanan-kiri. </td></tr>
</table>

Hasilnya adalah:

Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata kanan-kiri.

Dan atau jika ditulis:

<table border="1">
<tr align="right"><td> Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata di kanan. </td></tr>
</table>

Hasilnya adalah:

Tulisan ini adalah contoh, tulisan ini terletak didalam sebuah tabel dengan ukuran border satu dan memiliki gaya rata kanan.

Contoh 2 dengan height

Jika ditulis:

<table border="1" width="200px">
<tr height="100px">
<td> Tinggi tabel sama dengan dua kali lebar tabel
</td></tr>
</table>

Hasilnya adalah:

Tinggi tabel sama dengan dua kali lebar tabel

Contoh 6 dengan valign

Jika ditulis:

<table border="1" width="200px">
<tr height="100px" valign="top">
<td>
Pelanglang Maya
</td></tr>
</table>

Hasilnya adalah:

Pelanglang Maya

Atau jika ditulis:

<table border="1" width="200px">
<tr height="100px" valign="middle">
<td>
Pelanglang Maya
</td></tr>
</table>

Hasilnya adalah:

Pelanglang Maya

Dan jika ditulis:

<table border="1" width="200px">
<tr height="100px" valign="bottom">
<td>
Pelanglang Maya
</td></tr>
</table>

Hasilnya adalah:

Pelanglang Maya

Jika ditulis:

<table border="1" width="200px">
<tr height="100px" valign="baseline">
<td>
Hasil tidak tampak pada browser opera mini
</td></tr>
</table>

Hasilnya adalah:

Hasil tidak tampak pada browser opera mini

Untuk contoh berikut ini adalah tabel yang terdiri lebih dari satu baris.

Jika ditulis:

<table border="1" width="250px" cellpadding="10px">
<tr><td>Baris 1 </td></tr>
<tr><td>Baris 2 </td></tr>
<tr><td>baris 3 </td></tr>
<tr><td>Baris 4 </td></tr>
<tr><td>Baris 5 </td></tr>
</table>

Hasilnya adalah:

Baris 1

Baris 2

Baris 3

Baris 4

Baris 5

Untuk mengoptimalkan hasilnya, cobalah sendiri dengan memberikan beberapa atribut pada setiap tag.

Sebelumnya | Berikutnya

TABEL SEDERHANA HTML

Setelah sudah melewati beberapa tahapan dalam belajar html, belajar kali ini adalah tentang bagaimana cara membuat tabel sederhana. Kenapa saya katakan sederhana? karena cukup banyaknya atribut yang dapat digunakan dalam membuat tabel, dan juga karena keterbatasan yang ada( praktek dengan ponsel=>operamini mod)
, maka disini saya hanya akan menjelaskan sedikit dasar-dasarnya saja untuk membuat tabel secara sederhana.
Untuk membuat table dalam HTML, diperlukan beberapa tag yang digunakan secara bersamaan sesuai dengan fungsinya, yaitu:

<table>

Untuk mendefinisikan sebuah tabel

<tr>

Untuk mendefinisikan baris pada tabel

<td>

Untuk mendefinisikan sel pada tabel

Dari ketiga tag tersebut, untuk memaksimalkan tampilan tabel, tentunya masing-masing dapat diberikan dengan berbagai atribut.

Oleh karena panjangnya tulisan yang harus saya ketik jika harus sekaligus saya menjelaskanya, maka untuk sekedar menghindari kejenuhan, saya akan menjelaskanya satu per satu pada tiap tag.

Tag <table>.
Atribut yang digunakan antara lain:

border.

Ukuran untuk mengatur garis tepi, nilainya adalah 0, 1 (standar), 2, 3,..dst.

width.

Untuk menentukan lebar tabel. Nilainya adalah satuan dalam piksel (px), atau persen (%).

cellpadding.

Untuk mengatur jarak antara dinding sel dengan konten. Satuan nilainya adalah piksel (px) ataupun persen (%)

cellspacing

Untuk mengatur jarak antar sel. Satuan nilainya adalah piksel (px) ataupun persen (%)

bgcolor.

Untuk menentukan warna background. Nilainya adalah nama warna ataupun dengan menggunakan kode warna. Silahkan untuk melihat terlebih dahulu beberapa contoh warna dan kodenya.

Mulai dengan contoh.

Contoh Pertama Dengan border:

Jika ditulis:

<table border="1">
<tr><td>
Tabel Border 1 piksel </td></tr>
</table>

Hasilnya adalah:

Tabel Border 1 piksel

Atau jika ditulis:

<table border="5px">
<tr><td>
Tabel Border 5 piksel </td></tr>
</table>

Hasilnya adalah:

Tabel Border 5 piksel

Perhatikan perbedaan kedua contoh diatas

Contoh 2 dengan width:

Jika ditulis:

<table border="1" width="350px">
<tr><td>
Lebar Tabel 350px </td></tr>
</table>

Hasilnya adalah:

Lebar Tabel 350px

Atau jika ditulis:

<table border="1" width="85%">
<tr><td>
Lebar Tabel 85% </td></tr>
</table>

Hasilnya adalah:

Lebar Tabel 85%

Perhatikan perbedaan kedua contoh diatas

Catatan:

Jika persen (%) digunakan, perhitunganya adalah berdasarkan lebar dari elemen bagian (divisi) terkait, dalam suatu halaman web

Contoh 3 dengan cellpadding

Jika ditulis:

<table border="1" width="350px" cellpadding="10px">
<tr><td>
Jarak sel=>isi 10piksel </td></tr>
</table>

Hasilnya:

Jarak sel=>isi 10px

Atau jika ditulis:

<table border="1" width="350px" cellpadding="20px">
<tr><td>
Jarak sel=>isi 10piksel </td></tr>
</table>

Hasilnya:

Jarak sel=>isi 20piksel

Perhatikan perbedaan kedua contoh diatas

Contoh 4 dengan cellspacing:
Atribut ini sangat diperlukan untuk tabel yang terdiri lebih dari satu sel.
Contoh berikut adalah sekaligus bagaimana membuat tabel lebih dari 1 sel.

Jika ditulis:

<table border="1" width="100%" cellpadding="10px" cellspacing="5px">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
<td>Sel 5</td>
</tr>
</table>

Hasilnya:

SEL 1

SEL 2

SEL 3

SEL 4

SEL 5

Atau jika ditulis:

<table border="1" width="375px" cellpadding="10px" cellspacing="15px">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
<td>Sel 5</td>
</tr>
</table>

Hasilnya:

SEL 1

SEL 2

SEL 3

SEL 4

SEL 5

Perhatikan perbedaan kedua contoh diatas

Contoh 5 dengan bgcolor

Jika ditulis:

<table border="1" width="350px" bgcolor="red">
<tr><td> background warna merah</td></tr></table>

Hasilnya adalah:

Background warna merah

Harap dimaklumi jika ada bahasa yang salah, saran dan kritiknya diharapkan.

Sebelumnya | Berikutnya