MENGENAL TAG INPUT II

Melanjutkan dari posting sebelumnya yaitu Mengenal Tag Input, jika sebelumnya adalah tentang input dan typenya, kali ini akan sedikit membahas serta dengan contoh penggunaan beberapa atribut yang lain dalam tag <input/> terkait dalam membuat sebuah form.
Beberapa atribut yang di maksud, yang juga telah tercantumkan pada postingan sebelumnya antara lain:

• size
• maxlength
• checked
• disabled
• src

size

Jika ditulis:

<form>
Nama:<br/>
<input type="text" size="10"/><br/>
Lahir:<br/>
Tgl:<input type="text"size="2"/> Bln:<input type="text"size="2"/> <br/> Thn:<input type="text"size="4"/> <br/>
<input type="submit" value="Kirim"/> </form>

Hasilnya adalah:

Nama:

Lahir:
Tgl: Bln: Thn:

Pada contoh di atas, bidang input nama berukuran "10", Tgl berukuran "2" , Bln berukuran "2" , dan Thn berukuran "4" .

Maxlength

Jika ditulis:

<form>
Pengguna:<br/>
<input type="text" maxlength="10"/><br/>
Password:<br/>
<input type="password" maxlength="8"/><br/> <input type="Submit" value="Login"/>
</form>

Hasilnya adalah:

Pengguna :

Password :

Contoh di atas menjelaskan, panjang maksimal karakter/maxlength dari bidang input Pengguna adalah "10", dan maxlength pada bidang inputPassword adalah "8".
Atribut ini akan berfungsi dengan baik jika disertakan pada input type text dan input type Password.

Checked

Jika ditulis:

<form>
<input type="checkbox"/>Senin
<input type="checkbox"/>Selasa
<input type="checkbox"/>Rabu
<input type="checkbox" checked="checked"/>Kamis
<input type="checkbox"/>Jumat
<input type="checkbox"/>Sabtu
<input type="checkbox"/>Minggu
<input type="submit" value="Kirim"/> </form>

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

Atribut checked berfungsi untuk menentukan unsur input terpilih pada saat suatu halaman WEB di buka.
Atribut ini akan berfungsi dengan baik pada input type checkbox dan type radio.

Disabled

Jika ditulis:

<form>
<input type="radio"/>Senin
<input type="radio"/>Selasa
<input type="radio"/>Rabu
<input type="radio" type disabled="disabled"/>Kamis
<input type="radio"/>Jumat
<input type="radio"/>Sabtu
<input type="radio"/>Minggu <input type="submit" value="Kirim"/>

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

Atribut disabled memungkinkan sebuah/beberapa pilihan dalam unsur input akan menjadi tidak aktif dalam kondisi tertentu.
Atribut ini akan berfungsi dengan baik pada input type checkbox dan type radio

Src

Jika ditulis:

<form>
Nama:<br/>
<input type="text"/><br/>
Umur:<br/>
<input type="text"/><br>
<input type="image" src="http://i676.photobucket.com/albums/vv122/sung_sun6/submit.gif"/>
</form>

Hasilnya adalah:

Nama:

Umur:

Dalam penggunaanya, atribut src harus selalu disertakan pada input type img.
Yaitu berfungsi untuk menentukan lokasi gambar berada.

MENGENAL TAG INPUT

Tag <input>

Tag <input> menentukan bentuk field bidang input yang akan ditampilkan dalam sebuah formulir. Dan dalam penggunaanya, tag <input> ini tidak mengharuskan tag pembuka dan penutupnya secara terpisah, <input> dan </input>. Cukup dengan satu elemen yang merupakan pembuka sekaligus penutupnya, yaitu dengan memberi tanda slash (/) di akhir sebelum tanda (>), sehingga menjadi <input/>.

Beberapa atribut untuk tag input antara lain:

type

Untuk menentukan tampilan bidang input. Nilai yang dapat digunakan antara lain adalah:

• "text" (standar) =>
  
• "checkbox" =>contoh
  
• "radio" => contoh.
  
• "password" =>
  
• "submit" =>
  
• "file" =>
  
• "image".

name

Berfungsi untuk mengidentifikasi formulir pada saat setelah dikirim ke server. Atribut ini tidak mempengaruhi pada tampilan, nilai yang digunakan adalah bisa di isi apapun.

value

Untuk memberikan nilai pada type input terkait. Nilainya adalah bisa diisi apapun.

size

Untuk menentukan lebar bidang. Nilai yang diperlukan adalah, "di isi angka"

maxlength

Untuk menentukan jumlah maksimal karakater yang dapat dimaksukan. Atribut ini hanya untuk disertakan pada type "text" atau "password"

disabled

Berfungsi untuk menon-aktifkan bidang input dalam kondisi tertentu. Nilai yang digunakan adalah "disabled"

checked

Untuk menentukan pilihan standar yang tampilkan pada saat browser dibuka. Atribut ini untuk disertakan pada input type "checkbox" dan "radio".
Nilai yang digunakan adalah "checked".

src

Untuk menentukan lokasi gambar yang digunakan sebagai tombol submit. Dan tentunya, atribut ini untuk disertakan pada input type "image".
Nilai yang digunakan adalah, "Diisi URL".

Berikut ini adalah beberapa contoh, bagaimana cara kerja tag <input/> dengan menggunakan atribut type dalam membuat sebuah formulir.

TEXT&PASSWORD
Jika ditulis:

<form>
Pengguna:<br/>
<input type="text"/><br/>
Sandi:<br/>
<input type="password"/><br/>
<input type="submit" value="Masuk"/>

Hasilnya adalah:

Pengguna:

Sandi:

Pada contoh diatas, lihat dan perhatikan juga bagaimana cara kerja <input type="submit" value="Kirim"/>.

CHECKBOX
Memungkinkan pengguna untuk menentukan pilihan dengan tanda centang.
Jika ditulis:

<form>
<input type="checkbox" name="Senin"/>Senin
<input type="checkbox" name="Selasa"/>Selasa
<input type="checkbox" name="Rabu"/>Rabu
<input type="checkbox" name="Kamis"/>Kamis
<input type="checkbox" name="Jumat"/>Jumat
<input type="checkbox" name="Sabtu"/>Sabtu
<input type="checkbox" name="Minggu"/>Minggu
<input type="submit" value="Kirim"/></form>

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

RADIO
Jika ditulis:

<form>
<input type="radio" name="Senin"/>Senin
<input type="radio" name="Selasa"/>Selasa
<input type="radio" name="Rabu"/>Rabu
<input type="radio" name="Kamis"/>Kamis
<input type="radio" name="Jumat"/>Jumat
<input type="radio" name="Sabtu"/>Sabtu
<input type="radio" name="Minggu"/>Minggu

Hasilnya adalah:

Senin
Selasa
Rabu
Kamis
Jumat
Sabtu
Minggu

FILE&SUBMIT
Jika ditulis:

<form>
<input type="file"/>
<input type="submit" value="upload"/>
</form>

Hasilnya adalah:

IMAGE
Jika ditulis:

<form>
Pengguna:<br/>
<input type="text"/><br/>
Sandi:<br/>
<input type="password"/><br/>
<input type="image" src="http://i676.photobucket.com/albums/vv122/sung_sun6/submit.jpg"/>

Hasilnya adalah:

Pengguna:

Sandi:

Sebelumnya | Berikutnya

MEMBUAT FORMULIR HTML

Tag <form>

Tag <form> mendefinisikan sebuah formulir yang berfungsi untuk menerima masukan data dari pengguna. Dalam pemrosesan dari sebuah formulir, adalah diperlukan bahasa pemrograman tertentu seperti javascript, php, ataupun asp.
Dan dalam penggunaanya, tag <form> akan disisipi dengat tag <input> yang berfungsi untuk menampilkan bentuk/type input dari formulir tersebut. Beberapa type input yang dimaksud antara lain, chekbox, radio, submit, text, dan password. Silahkan baca Mengenal Elemen Input.
Dan, gabungan antara tag< form> dan <input> juga masih dapat dikombinasikan dengan tag yang lain seperti select/option, textarea, dan fieldset/legend.. Sehingga akan membentuk tampilan form yang berbeda. Step by step, terlebih dahulu kali ini akan sedikit mengulas tentang tag <form>.
Atribut standar untuk tag <form> antara lain:

action

Untuk menentukan lokasi penerimaan input data yang dikirim. Nilai yang digunakan adalah berupa URL.

method

Untuk menentukan cara bagaimana data input dari pengguna akan dikirim. Nilai yang digunakan yakni, "get" dan "post" .

Contoh sederhana dalam penggunaanya adalah sebagai berikut:

Jika di tulis:

<form action="diisi url" method="get">
Nama:<br/>
<input/> <br/>
Umur:
<input/><br/>
<input type="submit" value="Kirim"><br/>
</form>

Hasilnya adalah:

Nama:

Umur:

Karena tag <form> tidak berfungsi untuk mempengaruhi pada tampilan, maka hasil yang ditampilkan pada contoh diatas adalah karena fungsi dari tag <input>.
Dan juga, tidak akan menunjukan hasil apapun (eror) karena tidak dilengkapi dengan bahasa-bahasa terkait dengan pemrosesanya. Untuk melihat beberapa contoh sederhana dalam membuat formulir dengan tampilan yang berbeda dengan menggunakan elemen yang berbeda pula, silahkan klik beberapa link di bawah ini:

1. Select/option
2. Textarea
3. Fieldset/Legend

Sebelumnya | Berikutnya

DAFTAR PILIHAN DROP DOWN

Untuk membuat daftar pilihan drop-down adalah dengan menggunakan tag <select> dan <option>.
Drop-down itu seperti apa?
Daftar pilihan dengan gaya jatuh ke bawah, kurang lebih tampilanya sederhananya adalah seperti ini:

Sony Ericsson Nokia Samsung Motorola Siemens

Pada umumnya, tampilan daftar pilihan drop-down akan dibarengi dengan tampilan prosesornya. Dan untuk menampilkan "pemrosesnya", tag yang diperlukan adalah <form> dan <input>.
Contoh tampilannya kurang lebih akan jadi seperti ini:

Sony Ericsson Nokia Samsung Motorola Siemens

Oleh karena disini sedang membahas tentang bahasa HTML yang terkait dengan tampilan, maka pada contoh diatas tidak akan menghasilkan apapun jika di klik pada "Beli Sekarang". Diperlukan bahasa lain diluar HTML untuk dapat memrosesnya, yaitu PHP ataupun Javascript (saya sendiri masih belum banyak mengetahui).

Tag <select>

Atribut yang digunakan antara lain:

disabled

Untuk menampilkan daftar pilihan dalam kondisi tidak aktif. Nilainya adalah, "disabled"

multiple

Untuk menampilkan jumlah item yang akan ditampilkan dalam daftar , harus di ikuti dengan atribut "size". Nilai untuk multiple adalah "multiple".

name

Tidak mempengaruhi pada tampilan, berfungsi untuk dapat dikenali oleh bahasa pemrosesnya.

size

Untuk menentukan jumlah pilihan yang akan ditampilkan. Nilainya, "angka".

Contoh:

Jika ditulis:

<select disabled="disabled">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

Sesuai dengan pengalaman saya sendiri, atribut ini tidak menampilkan sebagaimana mestinya pada browser ponsel, namun tampak jelas pada browser operamini.

Contoh berikutnya dengan atribut "multiple" dan "size"
Jika ditulis:

<select multiple="multiple" size="2">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

Baik pada browser operamini, kurang maksimal pada browser ponselku .

Tag <option>

Atribut yang di gunakan antara lain:

disabled

Untuk item daftar, dalam kondisi tertentu akan menjadi tidak aktif.

Selected

Untuk menentukan item yang akan muncul pada tampilan standar.

Value

Tidak mempengaruhi apapun dalam tampilan, atribut ini sangat penting terkait dengan pemrosesan daftar yang akan di kirim ke server. Dan tentunya adalah dengan menggunakan bahasa lain diluar HTML.

Contoh:

Jika ditulis:

<select>
<option>Pilihan 1</option>
<option disabled="disabled">Pilihan 2</option>
<option>Pilihan 3</option>
<option>Pilihan 4</option>
<option>Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

"disabled" untuk <option>, hasilnya tidak trelihat pada browser ponsel ataupun operamini.

Contoh dengan "selected" dan "value".
Jika ditulis:

<select>
<option value="pil1">Pilihan 1</option>
<option selected="selected" value="pil2">Pilihan 2</option>
<option value="pil3">Pilihan 3</option>
<option value="pil4">Pilihan 4</option>
<option value="pil5">Pilihan 5</option>
</select>

Hasilnya adalah:

Pilihan 1 Pilihan 2 Pilihan 3 Pilihan 4 Pilihan 5

Atribut "selected" sangat baik pada browser manapun.

Sebelumnya | Berikutnya

MEMBUAT LINK ATAU TAUTAN

Dalam setiap halaman WEB, sering dijumpai beberapa teks/kata/kalimat ataupun gambar yang dapat di klik untuk menuju ke halaman atau dokumen lain, atau disebut juga dengan istilah "link" atau juga "tautan".
Dalam HTML, tag yang diperlukan untuk dapat membuat link yaitu <a>(anchor) dengan standar atributnya href yang memiliki value/nilainya adalah berupa "URL tujuan daripada link tersebut".

Tag <a>

Ada banyak atribut yang tersedia untuk tag <a> ini. Yaitu antara lain, href, target, name, rel, dll.
Namun karena keterbatasan fasilitas yang saya milikki dalam hal uji praktek, maka disini hanya akan dijelaskan secara default saja.

Untuk membuat link, atribut href adalah yang wajib disertakan dalam tag <a>. Seperti yang sudah dijelaskan diatas, nilai/value dari href adalah berupa URL.
Contoh:

Jika ditulis:

Selamat datang di blog <a href="http://kakangsung.blogspot.com">Pelanglang Maya</a> dan terimakasih atas kunjunganya.

Hasilnya adalah:

Selamat datang di blog Pelanglang Maya dan terimakasih atas kunjunganya.

Bagaimana jika ingin menempatkan link pada sebuah gambar?
Contoh:
Jika ditulis:

Selamat datang di blog <a href="http://kakangsung.blogspot.com">
<img src="http://i676.photobucket.com/albums/vv122/sung_sun6/kakangsung.png"/>
</a> dan terimakasih atas kunjunganya.

Hasilnya adalah:

Selamat datang di blog dan terimakasih atas kunjunganya.

---

NAME

Keterangan sekaligus contoh

Paragaraf ini membahas tentang atribut "name", nilai yang diperlukan adalah "nama"(bebas). Dimana pada kata pertama paragraph, yaitu "NAME" yang dicetak tebal bergaris bawah, telah ditandai dengan tag dan atribut <a name="nama"> sehingga menjadi seperti ini:

<a name="nama">NAME</a>

Paragraph/bagian selanjutnya
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Paragraph/bagian yang lain Untuk melihat hasilnya, yaitu dengan menambahkan <a href="#nama"> dan penutupnya </a> pada bagian/paragraph lain. Sebagai contoh, saya akan menambahkanya pada beberapa kata terakhir(warna biru) di paragraph ini.
Lihat hasilnya, klik untuk kembali ke NAME

---

Sedikit Tambahan :

Jika ingin supaya link di buka pada jendela baru, maka perlu ditambahkan atribut dan nilainya, target="_blank". Sehingga menjadi seperti ini,
<a href="URL" target="_blank">

Dan apabila diperlukan, adapun atribut rel dengan nilainya yaitu "nofollow dan "dofollow" .
Atribut rel ini tidak mempengaruhi tampilan pada browser. Karena funsi dari atribut ini adalah untuk memberitahu kepada Search Engine tentang hubungan antara halaman peyedia link dengan halaman tujuan dari link tersebut.

Cukup sekian saja ulasan tentang link atau tautan, semoga bermanfaat.

Sebelumnya | Berikutnya

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

MEMBUAT DAFTAR DAN DESKRIPSINYA

Selain daftar berurutan dan daftar tak berurutan, dalam HTML ada juga jenis daftar yang disertai dengan pendeskripsian dari tiap itemnya.
Membuat daftar dengan item yang lengkap disertai dengan deskripsinya, tag yang digunakan adalah:

<dl>

Mendefinisikan daftar

<dt>

Mendefinisikan item

<dd>

Mendefinisikan keterangan item

Contoh:

Jika ditulis: Beberapa alternatif aplikasi browser ponsel yang pernah saya kenal antara lain: <dl> <dt>Opera Mini</dt> <dd>Browser Ponsel yang merupakan pilihan utama dari yang paling sering saya gunakan</dd> <dt>Ucweb</dt> <dd>Pilihan kedua dari yang paling sering saya gunakan.</dd> </dd> <dt>Bolt</dt> <dd>Sebenarnya cukup lumayan, tapi saya kurang tertarik dengan tampilanya.</dd> <dt>Morange </dt> <dd>Yang ini juga cukup lumayan, tapi saya jarang gunakan. </dd> <dt>Teashark<dt> <dd>Pernah sekali mencoba, tapi sepertinya tidak cukup bersahabat dengan ponsel saya.</dd> </dl> Hasilnya adalah: Beberapa alternatif aplikasi browser ponsel yang pernah saya kenal antara lain: Opera Mini Browser Ponsel yang merupakan pilihan utama dari yang paling sering saya gunakan Ucweb Pilihan kedua dari yang paling sering saya gunakan. Bolt Sebenarnya cukup lumayan, tapi saya kurang tertarik dengan tampilanya. Morange Yang ini juga cukup lumayan, tapi saya jarang gunakan. Teashark Pernah sekali mencoba, tapi sepertinya tidak cukup bersahabat dengan ponsel saya.

Setelah melihat contoh diatas, silahkan coba untuk dipraktekan sendiri.

Untuk diketahui, gabungan tag <dl> <dt> dan <dd> ini ternyata tidak menampilkan secara maksimal pada browser bawaan pada hp saya sendiri, SE K608i yang telah di sulap menjadi K600i.
Namun sangat jelas hasilnya jika pada browser Operamini.

Sebelumnya | Berikutnya

DAFTAR TAK BERURUTAN

Jika pada posting sebelumnya adalah mengenai Membuat daftar berurutan, kali ini adalah membuat daftar tak berurutan.
Oh ya, untuk sekedar diketahui juga, semua posting yang ada di PELANGLANG MAYA ini adalah di ketik dengan ponsel dengan menggunakan teks editor yang terdapat di operamini mod. Belum punya opmin mod? Coba cari di postingan terdahulu, Jad dan Jar.

Langsung saja ke konteks utamanya, belajar html.
Untuk membuat daftar tak berurutan, atau daftar yang itemnya ditandai dengan simbol-simbol tertentu, caranya hampir sama dengan membuat daftar yang berurutan. Hanya saja, jika pada yang berurutan menggunakan tag <ol>(ordered list), sedangkan untuk yang tidak berurutan adalah dengan menggunakan tag <ul>(unordered list) yang juga disertai dengan tag <li>. Jadinya seperti ini, <ul><li>item</li></ul>.
Atribut yang digunakan untuk tag <ul> ini adalah, "disc(standar)", "circle", dan "square".
Untuk mengetahui bagaimana cara kerjanya, perhatikan contoh di bawah ini.
Contoh 1:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ul> <li>Nokia</ li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla> </ul> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Contoh diatas adalah tampilan standar dari tag <ul> yang tanpa menggunakan atribut.
Contoh 2:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ul type="circle"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li></ul> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ul type="square"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li></ul> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Contoh diatas adalah penggunaan tag <ul> dengan atributnya, baik dengan "square", ataupun "circle", masing-masing memiliki tanda item dengan ciri khas tersendiri.

Sebelumnya | Berikutnya

MEMBUAT DAFTAR BERURUTAN

Tag <ol>.
Tag <ol> berfungsi untuk mendefinisikan sebuah list atau daftar yang berurutan. Dan dalam penggunaannya, tag <ol> di ikuti dengan tag <li> yang mendefinisikan item dalam daftar.
Cara penulisanya adalah dengan menyisipkan tag <li> diantara tag <ol> dan penutupnya seperti ini, <ol><li>item</li></ol>.Sementara atribut untuk tag <ol> adalah "type" dan "start".
Type adalah untuk menentukan seperti apa model urutan yang ingin ditampilkan dalam browser. Nilai yang dapat digunakan adalah:

• "1" untuk 1,2,3...dst (standar).
• "A" untuk A,B,C...dst.
• "a" untuk a,b,c...dst.
• "i" untuk i,ii,iii,iv,...dst.
• "I" untuk I,II,III,IV...dst.

Start, untuk menentukan mulai urutan item yang mana/ke berapa yang ingin ditampilkan dalam browser.

Untuk lebih jelasnya, perhatikan beberapa contoh berikut ini.
Contoh 1:

Tulis: Beberapa merk ponsel terkenal antara lain: <ol> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Pada contoh diatas tag <ol> tanpa menggunakan atribut apapun, maka yang ditampilkan dalam browser adalah tampilan standar. Yaitu model urutan yang dimulai dari angka "1" dan seterusnya.

Contoh 2:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ol type="A"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Maka hasilnya adalah : Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Dan jika ditulis: Beberapa merk ponsel terkenal antara lain:<ol type="I"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Maka hasilnya adalah : Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Pada contoh di atas, value/nilai "A" digunakan untuk A, B, C.. dst. Dan "I" untuk I, II, III... dst.
Silahkan coba sendiri untuk value yang lain.

Contoh 3:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ol type="1" start="3"> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Maka hasilnya: Beberapa merk ponsel terkenal antara lain: Samsung Siemens Motorolla

Pada contoh di atas menjelaskan bagaimana atribut start bekerja. Dengan memberikan valu "3" maka urutan daftar item dimulai dari 3.

Sebelumnya | Berikutnya

KODE HEXA WARNA

Terkait dengan belajar mengatur teks, berikut ini adalah beberapa contoh warna dan kodenya.
Mengingat diri saya yang bukan type "teliti", harap dimaklumi jika ada ketidakcocokan antara kode dan warnanya. Sampe pegel neh jempol buat ngetik...;D

#000000	#000033	#000066	#000099	#0000CC	#0000FF	#003300
#003333	#003366	#003399	#0033CC	#0033FF	#006600	#006633
#006666	#006699	#0066CC	#0066FF	#009900	#009933	#009966
#009999	#0099CC	#0099FF	#00CC00	#00CC33	#00CC66	#00CC99
#00CCCC	#00CCFF	#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC
#00FFFF	#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF	#336600
#336633	#336666	#336699	#3366CC	#3366FF	#339900	#339933
#339966	#339999	#3399CC	#3399FF	#33CC00	#33CC33	#33CC66
#33CC99	#33CCCC	#33CCFF	#33FF00	#33FF33	#33FF66	#33FF99
#33FFCC	#33FFFF	#660000	#660033	#660066	#660099	#6600CC
#6600FF	#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF	#669900
#669933	#669966	#669999	#6699CC	#6699FF	#66CC00	#66CC33
#66CC66	#66CC99	#66CCCC	#66CCFF	#66FF00	#66FF33	#66FF66
#66FF99	#66FFCC	#66FFFF	#990000	#990033	#990066	#990099
#9900CC	#9900FF	#993300	#993333	#993366	#993399	#9933CC
#9933FF	#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF	#CC0000
#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF	#CC3300	#CC3333
#CC3366	#CC3399	#CC33CC	#CC33FF	#CC6600	#CC6633	#CC6666
#CC6699	#CC66CC	#CC66FF	#CC9900	#CC9933	#CC9966	#CC9999
#CC99CC	#CC99FF	#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC
#CCCCFF	#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FFCC00	#FFCC33	#FFCC66
#FFCC99	#FFCCCC	#FFCCFF	#FFFF00	#FFFF33	#FFFF66	#FFFF99
#FFFFCC	#FFFFFF	#222222	#222244	#222288	#2222AA	#2222BB
#2222EE	#224422	#224444	#224488	#2244AA	#2244BB	#2244EE
#228822	#228844	#228888	#2288AA	#2288BB	#2288EE	#22AA22
#22AA44	#22AA88	#22AAAA	#22AAEE	#22EE22	#22EE44	#22EE88
#22EEAA	#22EEEE	#442222	#442244	#442288	#4422AA	#4422EE
#444422	#444444	#444488	#4444AA	#4444EE	#448822	#448844
#448888	#4488AA	#4488EE	#44AA22	#44AA44	#44AA88	#44AAEE

Untuk yang menggunakan browser di PC/Laptop, bisa melihat tabel warna lebih lengkap lagi Di sini

Selain warna-warna/kode-kode di atas, masih banyak lagi jenis warna yang lain. Dan terkait dengan belajar html, kita dapat mengganti semua nama warna yang ada dengan kode-kode tertentu.

Sebelumnya | Berikutnya

HEADING DAN PARAGRAF HTML

Membuat Heading

Heading itu apa ya? Saya sendiri kurang begitu paham..
Mungkin, kurang lebihnya heading adalah isi bagian atas pada suatu tulisan, artikel, bab, ataupun postingan atau yang biasa disebut dengan judul, yang pada umumnya ukuran teksnya lebih besar daripada teks yang terdapat pada seluruh isi tulisan. Betul tidak? Mohon pencerahanya jika saya keliru.

Langsung saja, belajar HTML saya kali ini adalah tentang heading yang ditandai dengan tag antara <h1> s/d <h6>.
Untuk lebih jelasnya bagaimana cara kerja tag <h1> - <h6>, perhatikan contoh berikut ini:

Jika ditulis: <h1>Kepala Satu</h1> <h3>Kepala Tiga</h3> <h4>Kepala Empat</h4> <h5>Kepala Lima</h5> <h6>Kepala Enam</h6> Hasilnya adalah: Kepala Satu Kepala Tiga Kepala Empat Kepala Lima Kepala Enam

Pada contoh diatas, sekilas saja ternyata hampir sama dengan jika menggunakan tag <font> yang di ikuti dengan atribut size seperti pada Belajar sebelumnya.
Namun demikian, jelas berbeda. Karena fungsinya sebagai "heading", maka secara otomatis browser akan memberikan baris yang lain untuk kata/kalimat berikutnya.
Dan dari beberapa informasi yang pernah saya dapatkan, tag untuk heading ini adalah yang lebih memiliki peran penting dalam hal SEO.

SEO itu apa? Maaf, sebaiknya jangan dulu tanyakan kepada saya.

Membuat Paragraph

Untuk membuat paragraph dalam sebuah artikel, tag yang digunakan adalah <p>.
Langsung ke contoh:

Tulis: <p>Ini adalah paragraph pertama pada artikel belajar HTML</p> <p>Dan ini adalah paragraph kedua pada artikel belajar HTML</p> Hasil: Ini adalah paragraph pertama pada artikel belajar HTML Dan ini adalah paragraph kedua pada artikel belajar HTML

Perataan

Untuk mengatur perataan baris kata pada suatu paragraph, yaitu dengan menambahkan atribut "align" berserta nilainya yaitu left, center, right.
Contoh:

Jika ditulis: <p align="left">Ini adalah paragraph pertama rata kiri pada artikel belajar HTML</p> <p align="center">Dan ini adalah paragraph kedua rata tengah pada artikel belajar HTML</p> <p align="right">Ini adalah paragraph ketiga rata kanan pada artikel belajar HTML</p> Hasilnya: Ini adalah paragraph pertama rata kiri pada artikel belajar HTML Dan ini adalah paragraph kedua rata tengah pada artikel belajar HTML Ini adalah paragraph ketiga rata kanan pada artikel belajar HTML

Terkait Dengan Paragraph

Untuk pindah ke baris berikutnya pada penulisan dengan html, tombol "Enter" pada komputer atau tanda "Panah bengkok kebawah-kiri" pada ponsel, tidak akan dapat berfungsi sebagaimana mestinya. Untuk masalah ini, tag <br> adalah yang berfungsi untuk pindah ke baris berikutnya.
Contoh:

Jika ditulis: Ini baris pertama<br>Ini baris kedua<br>Ini baris ketiga Hasilnya: Ini baris pertama Ini baris kedua Ini baris ketiga

Jika ingin memberikan baris kosong, maka cukup tambahkan tag <br> beberapa kali sesuai yang di inginkan.

Menjorok Ke Dalam

Untuk membuat paragrap yang letaknya jadi agak menjorok ke dalam, tag yang di perlukan adalah <blockquote>
Contoh:

Tulis: <p>Ini hanya paragraph standar yang terletak sebagaimana mestinya.</p><p><blockquote>Sedangkan ini adalah paragraph baru yang menjorok ke dalam</blockquote></p> Hasilnya: Ini hanya paragraph standar yang terletak sebagaimana mestinya. Sedangkan ini adalah paragraph baru yang menjorok ke dalam.

Doooh... mata ngantuk jempol pegel, hooaaem...
Udahan dulu yah, besok disambung lagi.

Sebelumnya | Berikutnya

MENGATUR TEKS DENGAN HTML

Untuk mengatur tampilan font dengan HTML agar dapat menjadi seperti yang kita inginkan, beberapa tag yang diperlukan antara lain:

Tag <b>.
Tag <b>(bold) adalah berfungsi untuk menampilkan teks tebal. Lihat contoh berikut ini:

Jika ditulis begini: <b>teks tebal</b> Maka hasilnya adalah: teks tebal Silahkan untuk percobaan pertamanya.

Catatan:

Browser ponsel dapat mendeteksi tag ini, namun dengan browser Operamini sepertinya masih belum dapat ditampilkan.

Tag <i>.
Tag <i>(italic) adalah berfungsi untuk menampilkan teks miring.
Contoh:

Jika ditulis: <i>teks miring</i> Maka hasilnya adalah: teks miring Silahkan coba kembali

Catatan:

Browser Operamini belum dapat menampilkan fungsi dari tag ini.

Tag <u>.
Tag <u>(underline) adalah berfungsi untuk menampilkan teks dengan garis bawah.
Contoh:

Tulis: <u>teks bergaris bawah</u> Maka hasilnya adalah: teks bergaris bawah Cobalah

Tag <s>.
Tag <s>(strike) adalah berfungsi untuk menampilkan teks dicoret.
Contoh:

Tulis: <s>teks ini dicoret</s> Hasil: teks ini dicoret Jangan bosan mencoba

Tag <big>.
Tag <big> adalah berfungsi untuk menampilkan ukuran teks jadi lebih besar.
Contoh:

Tulis: <big>teks besar</big> Hasil: teks besar Cobalah terus

<small>.
Tag <small> adalah berfungsi untuk menampilkan teks jadi lebih kecil.
Contoh:

Tulis: <small>teks kecil</small> Hasil: teks kecil

Tag <sup>.
Tag <sup>(supcript) adalah berfungsi untuk menampilkan posisi teks sedikit ^{naik ke atas}.
Contoh:

Tulis: 100 M<sup>2</sup> Hasil: 100 M2

Tag <sub>.
Tag <sub> adalah berfungsi untuk menampilkan letak teks sedikit _{turun ke bawah}.
Contoh:

Tulis: O<sub>2</sub> Hasil: O2

Tag <font>.
Tag <font> memilki beberapa atribut yang berfungsi untuk menegaskan bagaimana gaya(style) font akan ditampilkan.
Atribut adalah kode yang memiliki nilai yang berfungsi untuk menjelaskan secara spesifik dari sebuah tag . Terletak di dalam tag pembuka antara nama tag dan tanda (>), cara penulisanya adalah seperti ini,<tag atribut="nilai">.
Dalam tag <font> sendiri, beberapa atributnya antara lain:
Size.
Atribut ini memiliki nilai atntara 1 s/d 7.
Contoh:

Tulis: <font size="1">ini ukuran 1</font> <font size="4">ini ukuran 4</font> <font size="7">ini ukuran 7</font> Maka hasilnya adalah: ini ukuran 1 ini ukuran 4 ini ukuran 7 Silahkan coba sendiri untuk ukuran yang lainnya.

Color.
Atribut ini berfungsi untuk memberikan warna teks, cara penggunaanya sama dengan seperti halnya atribut size. Nilai dari atribut ini yaitu dengan nama warna(dalam bahasa inggris) seperti misalnya, red, blue, green, dll. Selain dengan nama warna, bisa juga dengan kode hexa warna seperti misalnya, #00000 untuk hitam, #FF0000 untuk merah, #0000FF untuk biru, dll. Untuk dapat melihat tabel kode warna, W3shools juga menyediakanya secara lengkap.

Contoh :

Tulis: <font color="red">teks warna merah</font> <font color="blue">teks warna biru </font> <font color="#FFFF00">teks warna kuning/kode</font> Maka hasilnya adalah: teks warna merah teks warna biru teks warna kuning/kode Pada contoh diatas, nilai pada warna kuning adalah menggunakan kode hexa warna. Silahkan coba sendiri untuk warna lainya.

Face.
Atribut ini adalah untuk menentukan tampilan bentuk dari teks. Beberapa nama style font untuk menentukan nilai dari atribut face antara lain, arial, verdana, impact, dll.
Contoh:

Tulis: <font face="arial">gaya teks arial</font> <font face="verdana">gaya teks verdana</font> <font face="impact">gaya teks impact</font> Maka hasilnya a dalah: gaya teks arial gaya teks verdana gaya teks impact Silahkan untuk dicoba.

Dari beberapa atribut di atas, dapat digunakan secara bersamaan dalam sehingga menjadi seperti ini, contoh:

<font size="7" color="green" face="arial">teks ukuran 5 berwarna hijau gaya arial</font> Maka hasilnya adalah: teks ukuran 5 berwarna hijau gaya arial Silahkan untuk dicoba lagi.

Sebelumnya | Berikutnya