Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan

Kode Penting Tag Html

Kode Penting Tag HTML

<!– –>Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a href>Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name>Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>Sebagai awal dari Java applets
<area>Mendefinisikan daerah yang dapat diklik (link) pada image map
<b>Membuat teks tebal
<basefont>Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound>Memberi (suara latar) background sound pada halaman web
<big>Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>Membuat teks berkedip
<body>Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br>Pindah baris
<caption>Membuat caption pada tabel
<center>Untuk perataan tengah terhadap teks atau gambar
<comment>Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd>Indents teks
<div>Represents different sections of text.
<embed>Menambahkan sound or file avi ke halaman web
<fn>Seperti tag <a name>
<font>Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form>Mendefinisikan input form
<frame>Mendefinisikan frame
<frameset>Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> … <h6>Ukuran font
<head>Mendefinisikan head document.
<hr>Membuat garis horizontal
<html>Bararti dokumen html
<i>Membuat teks miring
<img>Image, imagemap atau an animation
<input>Mendefinisikan input field pada form
<li>Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map>Mendefinisikan client-side map
<marquee>Membuat scrolling teks (teks berjalan) – hanya pada MS IE
<nobr>Mencegah ganti baris pada teks atau images
<noframes>Jika browser user tidak mendukung frame
<ol>Mendefinisikan awal dan akhir list
<p>Ganti paragraf
<pre>Membuat teks dengan ukuran huruf yg sama
<script>Mendefinisikan awal script
<table>Membuat tabel
<td>Kolom pada tabel
<title>Mendefinisikan title
<tr>Baris pada tabel
<u>Membuat teks bergaris bawah

-----

Membuat Tabel di Blog

MEMBUAT TABEL di BLOG

Membuat sebuah tabel di blog yang harus kita perhatikan adalah penulisan dari kode-kode html. Penulisan kode diawali <> dan diakhiri dengan </>. Tabel dapat dimasukkan kedalam suatu posting, page atau page element html.

Format dasar menuliskan tabel adalah :

<tabel> TEKS / GAMBAR / LINK </table>


atau:

<table border="_"><tbody>
<tr><td> TEKS / GAMBAR / LINK </td></tr>
</tbody></table>


Beberapa Atribut Tabel / Kode html penting di dalam membuat sebuah tabel :

1. Pembuatan tabel diawali dengan tag <table> dan diakhiri dengan tag</table>.
2. Baris-baris dalam tabel dibuat dengan diawali tag <tr> dan diakhiri tag</tr>.
3. Membuat kolom-kolom diawali dengan tag <td> dan diakhiri tag </td>.
4. Untuk header (baris paling atas dari tabel) kolom dibuat dengan tag <th> dan </th>.
5. Judul tabel dibuat dengan tag <caption> dan </caption>.
6. Tinggi kolom/tabel (dalam pixcels) dengan tag <height>, misal : <td height=10>
7. Lebar kolom/tabel (pixel atau percen) dengan <width>, misal : <td width=10>
8. Membuat ada garis-garisnya, ditambahkan atribut <border>, misalnya <table border=1>.
9. Background gambar dengan tag : <td background=gambar.jpg/png>.
10. Background warna dengan tag : <td bgcolor=””>, misal : <td bgcolor=”203e8d”>.
11. Memasukkan link <td><a href=link.html><img src=gambar.gif border=0></td>.
12. Pelurusan horizontal suatu sel : align (left, center, right, justify), misal : <tr align=left>
13. Pelurusan vertical suatu sel : valign(top, middle, bottom), misal : <tr valign=top>.
14. Jumlah (n) kolom yang ditempati sebuah sel : rowspan=n, misal : <td rowspan=2>.
15. Mematikan kemampuan melipat kata dalam sel : nowrap, misal : <td nowrap>.

Berikut beberapa tabel dengan pemakaian kode html:

1. Tabel 1 kolom.

   Tabel 1 kolom   

Tag Html-nya:

<table border="1"><tbody>
<tr><td>Tabel 1 kolom</td></tr>
</tbody></table>


Atau:

 Tabel 1 kolom 

Tag Html-nya:

<table border="6" style="width: 200px;"><tbody>
<tr><td>Tabel 1 kolom</td></tr>
</tbody></table>
____________________________

2. Tabel 2 kolom.

   Tabel 2 kolom         Tabel 2 kolom   

Tag Html-nya:


<table border="2″><tbody>
<tr> <td> Tabel 2 kolom </td> <td> Tabel 2 kolom </td> </tr>
</tbody></table>
____________________________

3. Tabel 2 kolom, 2 baris.

 Tabel 2 kolom, 2 baris  Tabel 2 kolom, 2 baris 
 Tabel 2 kolom, 2 baris   Tabel 2 kolom, 2 baris 

Tag Html-nya:


<table border="2″"><tbody>
<tr> <td> Tabel 2 kolom, 2 baris </td> <td> Tabel 2 kolom, 2 baris </td> </tr>
<tr> <td> Tabel 2 kolom, 2 baris </td> <td> Tabel 2 kolom, 2 baris </td> </tr>
</tbody></table>

____________________________

4. Tabel 3 kolom, 3 baris, dan Judul Tabel.


kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2

Tag Html-nya:


<table border="7"><tbody>
<tr height="40"><td width="150"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 1 dari baris 1</span></td><td width="200"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 2 dari baris 1</span></td></tr>
<tr height="80"><td width="150"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 1 dari baris 2</span></td><td width="200"><span style="font-family: 'times new roman'; font-size: 16px;">kolom 2 dari baris 2</span></td></tr>
</tbody></table>

____________________________



5. Tabel 3 kolom, 3 baris, dan Judul Tabel.

Judul Tabel
Tabel 3 kolom, 3 baris    Tabel 3 kolom, 3 baris  Tabel 3 kolom, 3 baris 
 Tabel 3 kolom, 3 baris   Tabel 3 kolom, 3 baris Tabel 3 kolom, 3 baris
 Tabel 3 kolom, 3 baris  Tabel 3 kolom, 3 baris Tabel 3 kolom, 3 baris

Tag Html-nya:


<table border="2"><caption>Judul Tabel</caption> <tbody>
<tr <th><span class="Apple-style-span" style="font-weight: normal;">Tabel 3 kolom, 3 baris </span></th
<th><span class="Apple-style-span" style="font-weight: normal;">Tabel 3 kolom, 3 baris</span></th>

<tr> <td>Tabel 3 kolom, 3 baris</td> <td>Tabel 3 kolom, 3 baris</td><td>Tabel 3 kolom, 3 baris</td> </tr>
<th><span class="Apple-style-span" style="font-weight: normal;">Tabel 3 kolom, 3 baris</span></th> </tr>
<tr> <td>Tabel 3 kolom, 3 baris</td><td>Tabel 3 kolom, 3 baris</td><td>;Tabel 3 kolom, 3 baris</td> </tr>
</tbody></table>

____________________________



6. Tabel dengan memasukkan gambar.


Pesawat


Helicopter

Tag Html-nya:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6RrBIbP-_W5P7OXmYQxrTqnDkbJ9oa8dQnJYwpbjiDudpPGeHQjrLBeLDOwTIbdOgCq6o5OuX3HBnIZe9K1lNyyQ0WaRKHwLoXEOnZrQonhsS7oj2C7diO_Xxj7000F-tzJpipIL7CY/s1600/Pesawat+Dani.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6RrBIbP-_W5P7OXmYQxrTqnDkbJ9oa8dQnJYwpbjiDudpPGeHQjrLBeLDOwTIbdOgCq6o5OuX3HBnIZe9K1lNyyQ0WaRKHwLoXEOnZrQonhsS7oj2C7diO_Xxj7000F-tzJpipIL7CY/s1600/Pesawat+Dani.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Pesawat</td></tr>
</tbody></table>

</div></td><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLJoGJJOYQpFGfGNvWykvIk0f6hyphenhyphennIVQpSzCBawrkJUn1OwiTpogUcbcxkM_s5eEx4cbSMyaVBpR4Qug7HiyvqDaQcicL5Vc4xCDrbjiXgaCwl1H-LJ2LHeYgzRWAGscDTrLlKNdaev8/s1600/Helicopter.gif" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLJoGJJOYQpFGfGNvWykvIk0f6hyphenhyphennIVQpSzCBawrkJUn1OwiTpogUcbcxkM_s5eEx4cbSMyaVBpR4Qug7HiyvqDaQcicL5Vc4xCDrbjiXgaCwl1H-LJ2LHeYgzRWAGscDTrLlKNdaev8/s1600/Helicopter.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Helicopter</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
_________________________

Iklan Adsensecamp

Bisnis OnLine

LinkWithin

Related Posts Plugin for WordPress, Blogger...