Pengantar HTML dan Membuat Tabel
Format Karakter Font pada halaman HTML dapat diformat sesuai dengan desain yang Anda tentukan, baik ukuran, jenis maupun warna dengan menggunakan tag <font>.
Atribut elemen font :
size = ukuran huruf, default 3
color = warna huruf, default black
face = nama_huruf
Elemen ragam karakter :
<b> teks bold </b> : menghasilkan teks tebal (bold)
<i> teks italic </i> : menghasilkan teks miring (italic)
<u> teks underline </u> : menghasilkan teks bergaris bawah (underline)
face = nama_huruf
Elemen ragam karakter :
<b> teks bold </b> : menghasilkan teks tebal (bold)
<i> teks italic </i> : menghasilkan teks miring (italic)
<u> teks underline </u> : menghasilkan teks bergaris bawah (underline)
Contoh :
<html>
<head>
<title>Latihan-4: Format Karakter</title>
</head>
<body bgcolor=#000000 text=#FFFFFF>
<h1 align=center>
<font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</
font></h1>
<hr width=360 align=center>
<font size=5><b>Toko kami menyediakan</b></font>
<p align=left><font color=red><b><u>Alat Tulis</u></b></font></p>
<p align=left><i>Pensil<br>Ballpoint<br>Penggaris<br>Dll.</i></p>
<p align=center>
<font color=cyan><b><u>Buku-buku Pelajaran</u></b></font></p>
<p align=center>
<u><i>Ilmu pasti<br>Ilmu bumi<br>Sejarah<br>Dll.</i></u></p>
<p align=right>
<font color=lightgreen><b><u>Peralatan Kantor</u></b></font></p>
<p align=right>
<b><u><i>Meja<br>Kursi<br>File manager<br>Dll.</i></u></b></p>
</body>
</html>
<head>
<title>Latihan-4: Format Karakter</title>
</head>
<body bgcolor=#000000 text=#FFFFFF>
<h1 align=center>
<font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</
font></h1>
<hr width=360 align=center>
<font size=5><b>Toko kami menyediakan</b></font>
<p align=left><font color=red><b><u>Alat Tulis</u></b></font></p>
<p align=left><i>Pensil<br>Ballpoint<br>Penggaris<br>Dll.</i></p>
<p align=center>
<font color=cyan><b><u>Buku-buku Pelajaran</u></b></font></p>
<p align=center>
<u><i>Ilmu pasti<br>Ilmu bumi<br>Sejarah<br>Dll.</i></u></p>
<p align=right>
<font color=lightgreen><b><u>Peralatan Kantor</u></b></font></p>
<p align=right>
<b><u><i>Meja<br>Kursi<br>File manager<br>Dll.</i></u></b></p>
</body>
</html>
Elemen List
PROPERTI <LI> DIGUNAKAN UNTUK MENAMPILKAN
INFORMASI DALAM BENTUK DAFTAR (LIST). ADA DUA
JENIS DAFTAR YANG DIKENAL DI HTML, YAITU
1. LIST DALAM FORMAT BULLET (UNORDERED LIST
<UL>)
2. DALAM BENTUK NOMOR (ORDERED LIST <OL>).
ATRIBUT ELEMEN LIST
ORDERED LIST <OL TYPE=TIPE_LIST>
TYPE = [ 1 | A | A | I | I ] (TIPE PENOMORAN, DEFAULT
1)
UNORDERED LIST <UL TYPE=TIPE_LIST>
TYPE = [ DISC | SQUARE | CIRCLE ] (TIPE BULLET,
DEFAULT DISC)
INFORMASI DALAM BENTUK DAFTAR (LIST). ADA DUA
JENIS DAFTAR YANG DIKENAL DI HTML, YAITU
1. LIST DALAM FORMAT BULLET (UNORDERED LIST
<UL>)
2. DALAM BENTUK NOMOR (ORDERED LIST <OL>).
ATRIBUT ELEMEN LIST
ORDERED LIST <OL TYPE=TIPE_LIST>
TYPE = [ 1 | A | A | I | I ] (TIPE PENOMORAN, DEFAULT
1)
UNORDERED LIST <UL TYPE=TIPE_LIST>
TYPE = [ DISC | SQUARE | CIRCLE ] (TIPE BULLET,
DEFAULT DISC)
Contoh :
<HTML>
<HEAD>
<TITLE>LATIHAN-5: MENGGUNAKAN LIST</
TITLE>
</HEAD>
<BODY BGCOLOR=#990066 TEXT=#FFCCFF>
<H1>TOKO BUKU SERBA MURAH</H1>
<HR WIDTH=50% ALIGN=LEFT>
TOKO KAMI MENYEDIAKAN
<H2>ALAT TULIS</H2>
<OL>
<LI>PENSIL
<LI>BALLPOINT
<LI>PENGGARIS
<LI>DLL.
</OL>
<H2>BUKU-BUKU PELAJARAN</H2>
<HEAD>
<TITLE>LATIHAN-5: MENGGUNAKAN LIST</
TITLE>
</HEAD>
<BODY BGCOLOR=#990066 TEXT=#FFCCFF>
<H1>TOKO BUKU SERBA MURAH</H1>
<HR WIDTH=50% ALIGN=LEFT>
TOKO KAMI MENYEDIAKAN
<H2>ALAT TULIS</H2>
<OL>
<LI>PENSIL
<LI>BALLPOINT
<LI>PENGGARIS
<LI>DLL.
</OL>
<H2>BUKU-BUKU PELAJARAN</H2>
<ol
type=A>
<li>Ilmu pasti
type=A>
<li>Ilmu pasti
<ul>
<li>Fisika
<li>Kimia
<li>Biologi
</ul>
<li>Ilmu bumi
<li>Sejarah
<li>Dll.
</ol>
<h2>Peralatan Kantor</h2>
<ol
type=i>
<li>Meja
<li>Kursi
<ul
type=square>
<li>Kursi lipat
<li>Kursi plastik
</ul>
<li>File manager
<li>Dll.
</ol>
</body>
</html>
<li>Fisika
<li>Kimia
<li>Biologi
</ul>
<li>Ilmu bumi
<li>Sejarah
<li>Dll.
</ol>
<h2>Peralatan Kantor</h2>
<ol
type=i>
<li>Meja
<li>Kursi
<ul
type=square>
<li>Kursi lipat
<li>Kursi plastik
</ul>
<li>File manager
<li>Dll.
</ol>
</body>
</html>
Definisi
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen HTML.
Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table>..... </table>.
Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya
terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
<table>
<tr>
<td> data baris 1 kolom 1 </td>
<td> data baris 1 kolom 2 </td>
</tr>
<tr>
<td> data baris 2 kolom 1 </td>
<td> data baris 2 kolom 2 </td>
</tr>
</table>
Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table>..... </table>.
Elemen tabel berisi properti <tr>.....</tr> untuk menentukan baris (table row) yang di dalamnya
terdapat properti <td>.....</td> untuk menampilkan data pada setiap sel tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
<table>
<tr>
<td> data baris 1 kolom 1 </td>
<td> data baris 1 kolom 2 </td>
</tr>
<tr>
<td> data baris 2 kolom 1 </td>
<td> data baris 2 kolom 2 </td>
</tr>
</table>
Skrip Membuat Tabel sederhana
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-7: Membuat tabel sederhana</title>
</head>
<body>
Berikut contoh tabel dengan rowspan dan colspan:
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title bgcolor="#FFFFCC">Latihan-7: Membuat tabel sederhana</title>
</head>
<body>
Berikut contoh tabel dengan rowspan dan colspan:
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Atribut elemen tabel
width = lebar tabel, pixel atau persen
height = tinggi tabel, pixel atau persen
border = tebal garis tepi, pixel
cellspacing = spasi antar sel, pixel
cellpadding = spasi di dalam sel, pixel
align = [ left | center | right ] (perataan tabel)
bgcolor = warna latar belakang tabel
Atribut table row <tr>
align = [ left | center | right ] (perataan sebaris sel secara horisontal)
valign = [ top | middle | bottom ] (perataan sebaris sel secara vertikal)
bgcolor = warna latar belakang baris
Atribut table data <td>
rowspan = jumlah baris yang dispan oleh sel (penggabungan baris)
colspan = jumlah kolom yang dispan oleh sel (penggabungan kolom)
align = [ left | center | right ] (perataan horisontal)
valign = [ top | middle | bottom ] (perataan vertikal)
width = lebar sel, pixel atau persen
height = tinggi sel, pixel atau persen
bgcolor = warna latar belakang tabel
width = lebar tabel, pixel atau persen
height = tinggi tabel, pixel atau persen
border = tebal garis tepi, pixel
cellspacing = spasi antar sel, pixel
cellpadding = spasi di dalam sel, pixel
align = [ left | center | right ] (perataan tabel)
bgcolor = warna latar belakang tabel
Atribut table row <tr>
align = [ left | center | right ] (perataan sebaris sel secara horisontal)
valign = [ top | middle | bottom ] (perataan sebaris sel secara vertikal)
bgcolor = warna latar belakang baris
Atribut table data <td>
rowspan = jumlah baris yang dispan oleh sel (penggabungan baris)
colspan = jumlah kolom yang dispan oleh sel (penggabungan kolom)
align = [ left | center | right ] (perataan horisontal)
valign = [ top | middle | bottom ] (perataan vertikal)
width = lebar sel, pixel atau persen
height = tinggi sel, pixel atau persen
bgcolor = warna latar belakang tabel
Selamat mencoba...!!
Tidak ada komentar:
Posting Komentar