Daftar Tag pada HTML
Pada artikel kali ini, saya ingin
memberikan daftar-daftar Tag/kode dasar beserta fungsinya dalam HTML untuk
pembuatan web secara offline. www merupakan kependekan
dari World Wide Web, yang berarti suatu layanan di dalam jaringan internet yang
berupa ruang informasi.
Banyak keuntungan yang dapat
diperoleh dari layanan web, diantaranya:
· Informasi
mudah didistribusikan dan dapat diakses oleh semua pengguna internet diseluruh
dunia.
·
Konfigurasi
server dapat dilakukan secara mudah.
· Instalasi
(upload) aplikasi hanya dilakukan sekali, tanpa harus melakukan instalasi
aplikasi di setiap komputer user yang ingin mengakses aplikasi tersebut.
· Tidak
tergantung pada platform, artinya informasi maupun aplikasi dapat diakses dari
komputer yang memiliki sistem operasi berbeda.
Berikut ini adalah beberapa jenis
tag/kode dasar beserta fungsinya:
ELEMEN DASAR
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari
file HTML)
Judul
<TITLE></TITLE>
(harus selalu terdapat pada Header)
Header
<HEAD></HEAD>
(keterangan umum, seperti judul
dsb.)
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)
FORMAT TAMPILAN
Huruf Tebal
<B></B>
(Bold)
Huruf Miring
<I></I>
(Italic)
Garis Bawah
<U></U>
(Underline - jarang digunakan)
Rata Tengah
<CENTER></CENTER>
(Center - berlaku untuk teks maupun
gambar)
Huruf Kedip
<BLINK></BLINK>
(Blinking - tag terlucu sampai kini)
Ukuran Huruf
<FONT SIZE=?></FONT>
(Font Size - boleh diisi dari 1
sampai 7)
Warna Huruf
<FONT
COLOR="#$$$$$$"></FONT>
Pilih Jenis Huruf
<FONT
FACE="***"></FONT>
PEMISAH
Paragraf
<P></P>
(tag penutup seringkali tak
diperlukan)
Align Text
<P
ALIGN=LEFT|CENTER|RIGHT></P>
Pindah Baris
<BR>
(pindah ke baris berikut)
Garis Datar
<HR>
(Horizontal Rule)
Penataan Letak Garis
<HR ALIGN=LEFT|RIGHT|CENTER>
Tebal Garis
<HR SIZE=?>
(dalam satuan pixel)
Lebar Garis
<HR WIDTH=?>
(dalam satuan pixel)
Lebar Garis Persentasi
<HR WIDTH="%">
(dalam persentasi terhadap lebar
halaman)
LATAR BELAKANG DAN WARNA
Latar Belakang Gambar
<BODY
BACKGROUND="URL">
(Tiled Background)
Warna Latar Belakang
<BODY BGCOLOR="#$$$$$$">
(Background Color - urutan:
merah/hijau/biru)
Warna Huruf Teks
<BODY
TEXT="#$$$$$$">
TABEL
Rancangan Tabel
<TABLE></TABLE>
(Untuk pembuatan Table)
Garis Batas Tabel
<TABLE BORDER=?></TABLE>
Lebar Tabel
<TABLE WIDTH=?>
(dalam satuan pixel)
Lebar Tabel Persentasi
<TABLE WIDTH="%">
(dalam satuan persen terhadap lebar
halaman)
Baris dalam Tabel
<TR></TR>
Penataan Letak Baris
<TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam Tabel
<TD></TD>
(harus ada dalam setiap baris tabel)
Penataan Letak Sel
<TD ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel
<TH></TH>
(Table Header - seperti data dengan
Bold dan Center)
Penataan Letak Kepala Tabel
<TH ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala Tabel
<TH
BGCOLOR="#$$$$$$">
Demikian penjelasan yang saya
berikan agar menjadi manfaat bagi anda yang ingin atau sedang belajar untuk
membuat web secara offline. Selamat Mencoba J
Berikut ini contoh kode:
<html>
<head>
<title>Amak
Guitar Shop</title>
</head><body
background="DarkAnimeGirl.jpg">
<p style="font:bold 50px Georgia
;color:Red">MenjualBermacam Guitar Dan Accesories Guitar</p>
<hr color="ff0000" size="4">
<p style="font:30px Calibri ;color:Red">DaftarBarang
Dan Harga</p>
<body>
<table
style="border-collapse:collapse;background:#ffc"
width="75%" border="1">
<tr>
<th
style="background:red;width:10%;">No</th>
<th style="background:yellow;">Nama
Guitar</th>
<th style="background:green;">Gambar Guitar</th>
<th style="background:blue;">Harga
Guitar</th>
</tr>
<tr>
<td>1</td>
<td>Guitar Classic Yamaha</td>
<td><imgsrc="guitarclassicyamaha.jpg"
Height="100" Width="200"/></td>
<td>Rp 400.000,00</td>
</tr>
<tr>
<td>2</td>
<td>Guitar Allegro</td>
<td><imgsrc="gitarallegro.jpg"
Height="100" Width="200"/></td>
<td>Rp 350.000,00</td>
</tr>
<tr>
<td>3</td>
<td>Guitar Cort</td>
<td><imgsrc="GuitarCort.jpg"
Height="100" Width="200"/></td>
<td>Rp 1.500.000,00</td>
</tr>
<tr>
<td>4</td>
<td>Guitar Ovation</td>
<td><imgsrc="ovation2.jpg"
Height="100" Width="200"/></td>
<td>Rp 865.000,00</td>
</tr>
<tr>
<td>5</td>
<td>Guitar Yamaha Acoustic</td>
<td><imgsrc="yamahaakustik.jpg"
Height="100" Width="200"/></td>
<td>Rp 500.000,00
</tr>
<tr>
<td>6</td>
<td>Capo</td>
<td><imgsrc="Capo.jpg"
Height="100" Width="200"/></td>
<td>Rp 75.000,00</td>
</tr>
<tr>
<td>7</td>
<td>Senar Guitar Tender 1Set</td>
<td><imgsrc="Senartender.jpg"
Height="100" Width="200"/></td>
<td>Rp 14.000,00</td>
</tr>
<tr>
<td>8</td>
<td>Senar Guitar Pyramid 1Set</td>
<td><imgsrc="Pyramid.jpg"
Height="100" Width="200"/></td>
<td>Rp 18.000,00</td>
</tr>
<tr>
<td>9</td>
<td>Senar Guitar Yamaha 1Set</td>
<td><imgsrc="Senaryamaha.jpg"
Height="100" Width="200"/></td>
<td>Rp 25.000,00
</tr>
<tr>
<td>10</td>
<td>Pick Guitar</td>
<td><imgsrc="pickguitar.jpg"
Height="100" Width="200"/></td>
<td>Rp 5.000,00</td>
</tr>
</table>
</body>
<P style="font:bold 30px Georgia
;color:Red">Sedang Ada Promo SetelahPembelianDua Kali, Mendapat
Discount 50% untukpembelianselanjutnya</p>
<P style="font:bold 30px Georgia
;color:Red">UntukPemesananTolongHubungi 08787898778</p>
<P style="font:bold 30px Georgia
;color:Red">Alamat:SMK PGRI 2 Depok</p>
<P style="font:bold 50px Georgia
;color:Red">TerimakasihTelahMengunjungi Website Kami</p>
Tidak ada komentar:
Posting Komentar