Elemen-Elemen HTML
1. HEADHead berfungsi untuk mengidentifikasi header web yang berisikan informasi tentang web. Bentuk umum tag head sebagai berikut:
<html>
<head> …. </head>
</html>
Tag HEAD memilki beberapa atribut, antara lain: title, meta, style, link, script.
- Tag TITLE, digunakan untuk memberikan judul dari suatu homepage, contoh penggunaan tag title:
<head>
<title> Contoh Pembuatan Judul Homepage </title>
</head>
</html>
- Tag META, digunakan untuk menunjukan informasi metadata mengenai halaman web yang sedang diakses, contoh penggunaan tag meta:
<html>
<head>
<meta name=”generator” content=”Wordpress 3.0” />
</head>
</html>
- Tag STYLE, digunakan untuk menentukan berbagai bentuk, ukuran, warna, dari tag yang digunakan agar tidak terjadi pemborosan penggunaan tag. Berikut contoh tag STYLE:
<html>
<head>
<style type=”text/css”>
Body {background-color:orange}
</style>
</head>
</html>
- Tag LINK, digunakan untuk menautkan suatu halaman dengan halaman atau dokumen lainnya. Contoh penggunaan tag LINK:
<html>
<head>
<a href=”http://www.tastajaya.blogspot.com”> Blog Tasta </a>
</head>
</html>
- Tag BASE, menyatakan URL asal dari suatu dokumen
Contoh:
<HTML>
<HEAD>
<TITLE>Homepage Pribadi Q</TITLE>
<BASE HREF=http://www.tastajaya.bogspot.com>
</HEAD>
</HTML>
2. BODY
Tag Body, merupakan tempat untuk menuliskan isi dari sebuah halaman web seperti teks, gambar, tabel dan lainnya yang akan ditampilkan pada halaman web. Tag Body memiliki beberapa atribut diantaranya:
- Tag <background=” “ />, digunakan untuk memuat latar belakang dengan gambar/foto.
Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tag Background</TITLE>
</HEAD>
<body background="E:\Mater Ajar\Pemrograman WEB\Materi Kuliah STKIP Riama\Desert.jpg" >
</body>
</HTML>
- Tag <bgcolor=” “ />, digunakan untuk menentukan warna latar belakang homepage.
Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tag BgColor</TITLE>
</HEAD>
<body bgcolor="#FFFFBB" >
</body>
</HTML>
- Tag <bgproperties=” “ />, digunakan untuk menentukan nilai property background tetap
Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tag BgProperties</TITLE>
</HEAD>
<body bgproperties="fixed" >
</body>
</HTML>
- Tag <leftmargin=” “ />, digunakan untuk menentukan batas kiri halaman dalam satuan pixel, Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tag Leftmargin</TITLE>
</HEAD>
<body leftmargin="50" bgcolor="#99CC33">
Menentukan Batas Kiri Suatu Halaman Web dalam satuan pixel
</body>
</HTML>
- Tag <topmargin=” “ />, digunakan untuk menentukan batas atas halaman dalam satuan pixel, Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tag TopMargin</TITLE>
</HEAD>
<body leftmargin="100" topmargin="150" bgcolor="#99CCAA">
Menentukan batas atas halaman dalam satuan pixel
</body>
</HTML>
- Tag <text=” “ />, digunakan untuk menentukan warna teks, Contoh:
<HEAD>
<TITLE>Contoh Penggunaan Tag Text</TITLE>
</HEAD>
<body leftmargin="100" topmargin="150" bgcolor="#99CCAA" text="#FF0000">
Menentukan Warna Teks
</body>
</HTML>
Pada bagian body terdapat beberapa tag untuk mengatur format Judul, teks, penomoran, paragraf, font diantaranya:
- Heading dengan format tag <h3> …. </h3>, digunakan untuk menentukan ukuran judul naskah (paling kecil <h6> dan paling besar <h1>), Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Tag Judul Naskah</TITLE></HEAD>
<body>
<h1> Ini Ukuran Heading1 </h1>
<h2> Ini Ukuran Heading2 </h2>
<h3> Ini Ukuran Heading3 </h3>
<h4> Ini Ukuran Heading4 </h4>
<h5> Ini Ukuran Heading5 </h5>
<h6> Ini Ukuran Heading6 </h6>
</body>
</HTML>
- Garis Horizontal dengan format tag: <HR />, berfungsi untuk menampilkan garis horizontal, Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Pengauturan Tag HR</TITLE></HEAD>
<body>
Selamat Datang...
<hr>
Terimakasih Atas Kunjungan Anda
</body>
</HTML>
- Breakline (Baris Baru) dengan format tag <BR> berfungsi untuk menentukan baris baru atau baris berikutnya, Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Pengauturan Teks</TITLE></HEAD>
<body>
Ini Baris Awal <br> Ini Pindah ke Baris Baru
</body>
</HTML>
- Format Teks: Adalah suatu jenis format yang diberikan pada teks tanpa tergantung jenis dari elemen dasar teks tersebut antara lain:
o <B>…</B> : Untuk menebalkan teks
o <I>…</I> : Untuk membuat teks tampil miring
o <U>…</U> : Untuk membuat teks tampil bergaris-bawah
o <BIG>…</BIG> : Untuk memperbesar teks
o <SMALL>…</SMALL> : Untuk memperkecil teks
o <STRONG>…</STRONG> : Untuk membuat efek Strong
o <S>…</S> : Untuk membuat efek coretan pada teks
o <TT>…</TT> : Untuk menampilkan teks dalam font typewriter
o <SUB>…</SUB> : Untuk membuat teks subscript
o <SUP>…</SUP> : Untuk membuat teks superscript
Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Pengauturan Teks</TITLE></HEAD>
<body>
<b> Ini Tulisan Cetak Tebal </b><br><br>
<i> Ini Tulisan Cetak Miring </i><br><br>
<u> Ini Tulisan Bergaris Bawah </u><br><br>
<s> Ini Tulisan dengan efek coretan </s><br><br>
<small> Ini Tulisan Kecil </small><br><br>
<big> Ini Tulisan Besar </big><br><br>
<strong> Ini Tulisan efek Strong </strong><br><br>
<tt> Ini Tulisan Tipewriter </tt><br><br>
Ini Tulisan dengan efek Subscript X<sub>2</sub><br><br>
Ini Tulisan dengan efek Superscript X<sup>2</sup><br>
</body>
</HTML>
- ATRIBUT FONT SIZE Untuk menentukan ukuran font, elemen FONT menyediakan atribut dengan nilai 1 sampai 7. Nilai 1 digunakan untuk membuat teks ukuran terkecil, standar teks pada halaman web adalah nilai 3. Ukuran font teks dapat ditentukan secara relatif berdasarkan ukuran default, yaitu dengan mendahului ukuran font dengan tanda + atau -. Contoh : font ukuran 4 bisa ditulis Size=+1, Contoh:
<html>
<head>
<title>Menentukan Ukuran Font</title>
</head>
<body bgcolor=lightgrey>
<h1>Ukuran Font</h1>
<h2> <font size=1> Size 1</font><br>
<font size=-1> Size 2</font><br>
<font size=3> Size 3</font><br>
<font size=4> Size 4</font><br>
<font size=+2> Size 5</font><br>
<font size=6> Size 6</font><br>
<font size=+4> Size 7</font><br>
</h2>
</body>
</html>
- ATRIBUT FONT COLOR digunakan untuk memberi warna pada font. Atribut Color menerima nilai RGB suatu warna atau nama warna, Contoh:
<html>
<head>
<title>Font Size</title>
</head>
<body bgcolor=lightgrey>
<h1>Warna Font</h1>
<h2>
<font size=4 COLOR="#FF0000"> Teks berwarna merah</font><br>
<font size=5 COLOR="GREEN"> Teks Berwarna Hijau</font><br>
</h2>
</body>
</html>
- ATRIBUT FONT FACE: menentukan jenis huruf (font) dengan format Tag:
<FONT FACE=”ARIAL”>…</FONT>, Contoh:
<html>
<head>
<title>Penggunaan Tag Font Face</title>
</head>
<body bgcolor=pink>
<font face="VERDANA" size="6">
Tulisan ini Menggunakan Jenis Font VERDANA
</font>
</body>
</html>
- Penomoran dengan format tag <ol><li> … </li></ol>, digunakan untuk penulisan penomoran, Contoh:
<html>
<head>
<title>Penggunaan Tag OL-LI untuk Penomoran</title>
</head>
<body>
<ol> Teman-tamanku yang paling setia:
<li> Ucok </li>
<li> Butet </li>
<li> Acong </li>
<li> Buyunng </li>
</ol>
</body>
</html>
- Daftar dengan tag <ul><li> … </li></ul> digunakan untuk penulisan daftar tanpa nomor. Contoh:
<html>
<head>
<title>Penggunaan Tag UL-LI untuk Penomoran</title>
</head>
<body>
<ul> Daftar Calon Mahasiswa TP. 2012/2013:
<li> Sukri </li>
<li> Agam </li>
<li> Bonar </li>
<li> Surti </li>
</ul>
</body>
</html>
- PARAGRAF dengan format tag <P>…</P> berfungsi untuk pengaturan perataan teks paragraf dalam dokumen HTML. Atribut yang digunakan dalam paragraf ALIGN mempunyai tiga nilai, yaitu :
• LEFT, untuk meratakan teks ke margin kiri
• RIGHT, untuk meratakan teks ke margin kanan
• CENTER, untuk meratakan teks ke tengah margin
Contoh:
<html>
<head>
<title>paragraf</title>
</head>
<body bgcolor="#CCCC33">
<p align="center">Tulisan pada paragraf ini rata tengah</p>
<br>
<br>
<p align=right>Tulisan pada paragraf ini rata kanan</p>
<br>
<br>
<p align="left">Tulisan pada paragraf ini rata kiri</p>
</body>
</html>
- Tag <DIV>…..</DIV> digunakan untuk membuat tabel sederhana, Contoh:
<html>
<head>
<title>Pembagian Halaman Dokumen HTML</title>
</head>
<body>
<div style="border:double" align=center>
<h1>Ini Tabel Atas </h1>
<br>
<br>
<div style="border:double" align="left">
<h1>Ini Tabel Tengah </h1>
<br>
<br>
</div>
<div style="border:double" align="right">
<h1>Ini Tabel Bawah</h1>
</div>
</body>
</html>
3.Menu
Menu adalah suatu daftar item yang pendek yang tidak disertai dengan nomor ataupun penanda item. Menu List menggunakan tag awal <MENU> … </MENU>, didalamnya menggunakan tag <LI>. Browser secara otomatis akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk membuat link ini digunakan tag <A> yang akan membuat link ke halaman lain. Penggunaan tag <A> adalah <A HREF “page.html”> link ke halaman page.html </A>, Contoh:
<html>
<head>
<title>Menu List</title>
</head>
<body bgcolor="#66FFFF">
<MENU>
<LH><EM><h1><b><u> Menu </h1></b></u></EM>
<LI><A HREF="Beranda.html">Beranda</A>
<LI><A HREF="Profil.html">Profil</A>
<LI><A HREF="Album.html">Album</A>
<LI><A HREF="Artikel.html">Artikel</A>
</MENU>
</body>
</html>
4. Image
Untuk menyisipkan gambar dalam dokumen HTML dengan tag IMG dan diikuti atribut SRC, Contoh:
<img src=”foto.jpg”>
<img src="C:\images\foto.jpg">
<img src="test.jpg" width=100 height=100>
5. Tabel
Untuk membuat table digunakan beberapa tag:
Tag <TABLE>, berfungsi untuk mendefenisikan tabel
Tag <TR>, berfungsi untuk mendefenisikan baris table
Tag <TD>, berfungi untuk mendefenisikan kolom table
Tag <TH>, berfungsi untuk mendefenisikan judul pada kolom atau baris table
Contoh:
<html>
<head><title> Membuat Tabel </title></head>
<body>
<table border="1">
<tr>
<th> Ini Judul Kolom 1 </th>
<th> Ini Judul Kolom 2 </th>
</tr>
<tr>
<th> Ini Baris 1, Kolom 1 </th>
<th> Ini Baris 1, Kolom 2 </th>
</tr>
<tr>
<th> Ini Baris 2, Kolom 1 </th>
<th> Ini Baris 2, Kolom 2 </th>
</tr>
</table>
</body>
</html>
6. Form
Form biasanya digunakan untuk membuat buku tamu, daftar isian dan sebagainya, terdapat beberapa tag yang digunakan antara lain:
Tag <FORM>, berfungsi untuk mendefenisikan pembuatan form yang diikuti oleh atribut yaitu:
o METHOD untuk pengolahan form
o ACTION untuk menentukan direktori file.
Tag <TEXTAREA>, digunakan untuk membuat kotak isian teks yang diikuti oleh atribut:
o NAME untuk nama objek teks area,
o ROWS untuk menentukan jumlah baris teks area,
o COLS untuk pilihan lebih dari satu.
Tag <INPUT>, digunakan untuk meminta masukan dari pengunjung web dengan diikuti oleh atribut:
o NAME untuk objek masukan (input)
o SIZE untuk menentukan ukuran kotak Input
o MAXLENGTH untuk menentukan jumlah teks maksimal
o VALUE untuk menentukan nilai tetap dari objek Input
o CHECKED untuk menentukan pilihan atau RADIO BUTTON
o TYPE untuk menentukan tipe dari input.
Contoh:
<html>
<head>
<title> Membuat Form Sederhana </title>
</head>
<body>
<form>
<center><h5> BUKU TAMU </h5> </center>
<hr>
<pre>
Silahkan Isi Data Berikut: <br>
Nama : <input type=text size="100" name=nama>
Alamat : <input type=text size="100" name=alamat>
E-mail : <input type=text size="100" name=email> <br>
Jenis Kelamin:
<input type=radio name=kelamin value=pria> Pria
<input type=radio name=kelamin value=wanita> Wanita
Komentar: <br>
<textarea name=komentar rows=10 cols=90>
Isi Komentar Anda
</textarea>
</pre>
<center>
<input type="button" name=Submit value="Kirim" Kirim>
<input type="button" name=Reset value="Batal" Batal>
</center>
</form>
</body>
</html>
SELAMAT BLEJAR...
1 comment:
just stopping by to say hi
Post a Comment