Pengenalan Tag Pada HTML
Dalam
HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan
yang kita inginkan. Tag pada HTML selalu diawali dengan <x>
dan ditutup dengan </x>
dimana x adalah perintah dari apa
yang kita inginkan.
Daftar Tag Pada HTML
ELEMEN
DASAR
|
||
Jenis Dokumen
|
<HTML></HTML>
|
(terdapat pada awal dan akhir dari
file HTML)
|
Judul
|
<TITLE></TITLE>
|
(harus selalu terdapat pada
mukadimah)
|
Mukadimah (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>
|
|
Pndah 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>
|
|
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="#$$$$$$">
|
|
A. Dasar
dasar HTML
1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:
1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:
<html>
<head>
<title> My First HTML
Project </title>
</head>
<body BGCOLOR=“Green” TEXT=“Red”>
WELCOME TO
MY WEBSITE
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam
format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan
seperti pada gambar 1 berikut:
2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code
dibawah ini:
<html>
<head>
<title> Tag P, Br dan Hr
</title>
</head>
<body>
<p>Ini adalah paragraf
pertama, yang berisi 3 baris. Baris satu, dua dan tiga.
<br><br></p>
<p>Ini adalah paragraf
kerdua, yang berisi garis horizontal</p>
<hr> Ini adalah garis
horizontal.
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam
format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan
seperti pada gambar 2 berikut:
<html>
<head>
<title> Tag Heading
</title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
<body bgcolor=”#00ff00”>
</html>
<html>
<head>
<title>format
tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small
</small><br>
<big> teks
big</big><br>
<b> teks tebal
</b><br>
<i> teks miring
</i><br>
<u> teks bergaris bawah
</u><br>
Contoh superscript : x
<sup>2</sup><br>
Contoh subscript :
H<sub>2</sub>O<br>
<strike> Ini teks tercoret
</strike><br>
<font size = 5 face = verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR
="#00FF00">
</html>
Langkah selanjutnya simpan dalam
format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan
seperti pada gambar 4 berikut :
<html>
<head>
<title> From komentar
</title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text
name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text
name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea name="komentar" rows=6
width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input type=submit
name="submit"
value=submit></td>
</tr>
</table>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam
format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan
seperti pada gambar 5 berikut :
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table
width="300" border="1">
<tr>
<td colspan="3" align="center">warna-warna
</td>
</tr>
<tr>
<td bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FFFF00">Kuning</td>
<td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td bgcolor="#999999">Abu-abu</td>
<td bgcolor="#0000FF">Biru</td>
<td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru muda</td>
<td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam
format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan
seperti pada gambar berikut :
0 komentar:
Posting Komentar