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:
<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:
Gambar
1. Judul Tab Halaman
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:
Gambar
2. Mengatur Paragraf
3. Mengatur
ukuran huruf, buka notepad++, kemudian
ketikan code dibawah ini:
<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>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 3 berikut:
Gambar
3. Ukuran Huruf
4.
Mengatur
format texs, Buka notepad++, kemudian ketikan code dibawah ini:
<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:
Gambar
4. Format tulisan
5.
Membuat
from komentar, buka notepad++, kemudian ketikan code dibawah ini:
<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:
Gambar
5. From komentar
6.
Mengatur
kolom, buka notepad++ kemudian ketikan code dibawah ini:
<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 6 berikut:
Gambar 6. Tabel
B.
Hyperlink
1.
Membuat
hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja
code dibawah ini:
<html>
<head>
<title> Judul tab </title>
</head>
<body>
Ini hyperlink ke wordpress
<a href="http://www.wordpress.com/"
title="Masuwordpress"> Wordpress </a>
<br>Klik dan masuk ke yahoo<a
href="http://www.yahoo.com/" title="Masuk yahoo"> Yahoo
</a>
<br>Masuk ke facebook anda
<a
href="http://http://www.facebook.com/" title="Masuk ke
facebook"> Facebook </a>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:
Gambar 7 link halaman web lain
2. Membuat
hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy
saja code dibawah ini:
<html>
<head>
<title>
Judul tab </title>
</head>
<body>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html"
title="ke Rumah"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg"
border="0" width="80" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html"
title="Profilku"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg"
border="0" width="100" height="30"/></a>
<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html"
title="Kode Warna Pada HTML"><img
src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg"
border="0" width="150" height="30"/></a>
<a href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html"
title="kumpulan Kata-kata Mutiara"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg"
border="0" width="100" height="30"/></a>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format
HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti
pada gambar 8 berikut:
Gambar 8. Link Antar Bagian Dalam Web
No comments:
Post a Comment