HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam setiap file HTML akan selalu didahului dengan tag <HTML> Tag ini akan membuat web browser mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam web browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag <HTML> dengan <HTML>. Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu :
<HTML>
untuk mengakhiri :
<HTML>
Penulisan Tag HTML adalah incasesensitive. Artinya, <HTML> akan sama dengan <html> atau <Html> Untuk selanjutnya akan dibagi menjadi 2 seksi: head dan body.
<HEAD>
Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untuk
mendefinisikan header dalam tag HTML maka anda harus menambahkan <HEAD> dan </HEAD> tag di bawah tag <HTML> dan akan menjadi seperti berikut :
<HTML>
<HEAD>
</HEAD>
</HTML>
<BODY>
Pada bagian body merupakan bagian dimana Anda dapat menuliskan berbagai text yang ingin Anda tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan tag <BODY> dan ditutup dengan tag <BODY> dibawah tag header, sehingga akan terlihat :
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Untuk menamai atau memberikan judul pada halaman web yang akan Anda buat maka digunakan tag <TITTLE> dan </TITTLE> Judul ini akan terlihat pada sudut kiri atas pada halaman web. Tag <TITTLE> akan berada di dalam tag <HEAD> Kini saatnya Anda membuat halaman web Anda yang pertama. Bukalah Notepad
dari Start Menu 
dan ketik kode html di bawah ini, kemudian simpanlah di C:\My Documents\hello.htm. Ingat! Nama filenya adalah hello.htm, bukanlah hello.htm.txt atau hello.txt.<HTML>
<HEAD>
<TITTLE>Selamat datang pada HomePage Saya</TITTLE>
</HEAD>
<BODY>
Halo semua, Bagaimana kabar Anda sekalian?
</BODY>
</HTML>
Menyimpan kode html ke file hello.htm dengan Notepad
Kemudian, bukalah Internet Explorer dan pilih menu: File ==> Open, dan bukalah C:\My Documents\hello.htm. Maka akan terlihat sebagai berikut :
Heading <h1>...</h1>
Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading akan berbeda dengan tag <TITTLE> yang tidak akan muncul dalam halaman web. HTML menyediakan enam tingkat heading.
<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading level1</H1>
<H2>Heading level2</H2>
<H3>Heading level3</H3>
<H4>Heading level4</H4>
<H5>Heading level5</H5>
<H6>Heading level6</H6>
</BODY>
</HTML>
Paragraf <p>...</p>
Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri dengan </P> Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut ALIGN dengan dikuti posisi yang Anda inginkan, LEFT untuk rata kiri, CENTER untuk rata tengah, dan RIGHT untuk rata kanan:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari
</P>
<P ALIGN="center"> Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari
</P>
<P ALIGN="left">Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari
</P>
</BODY>
</HTML>
Blockquote <blockquote>...</blockquote>
Tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan menggunakan tag ini maka Anda akan mendapati browser menampilkan teks yang menjorok ke dalam
(mengidentifikasi teks). Contoh
HTML>
<HEAD
<TITLE>Blockquote</TITLE> 6
</HEAD>
<BODY>
<H2>Aspek dalam Interface</H2>
<BLOCKQUOTE>Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut.
</BLOCKQUOTE>
</BODY>
</HTML>
Preformated Text <pre>...</pre>
Digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML. Browser akan menampilkan dalam font monospace (biasanya courier new).
<HTML>
<HEAD>
<TITLE>performatted text</TITLE>
</HEAD>
<BODY>
<PRE>Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut.
</PRE>
</BODY>
</HTML>
Begin Row <br>
Digunakan untuk menulis teks pada baris berikutnya. Tag <BR> akan membuat baris baru tanpa memberikan ruang kosong di bawahnya. Contoh :
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Dalam perancangan suatu antarmuka terdapat
<BR>akses-akses penting yang harus diperhatikan.
<BR>Aspek-aspek tersebut akan sangat menunjang
<BR>dalam hasil dari perancangan perangkat lunak tersebut.
</P>
</BODY>
</HTML>
Ukuran Font <font size="2">...</font>
Untuk mengaur huruf pada HTML Anda menggunakan tag <FONT SIZE> Tag ini memiliki atribut untuk mengatur ukuran huruf. Contoh :
<HTML>
<HEAD>
<TITLE>Font Size</TITLE>
</HEAD> 7
<BODY>
<FONT SIZE="1">ukuran font 1</FONT>
<FONT SIZE="2">ukuran font 2</FONT>
<FONT SIZE="3">ukuran font 3</FONT>
<FONT SIZE="4">ukuran font 4</FONT>
<FONT SIZE="5">ukuran font 5</FONT>
<FONT SIZE="6">ukuran font 6</FONT>
<FONT SIZE="7">ukuran font 7</FONT>
</BODY>
</HTML>
Jenis Font <font face="arial">...</font>
Untuk mengatur jenis huruf yang digunakan Anda bisa menggunakan atribut FACE yang harus diisi dengan string jenis font seperti arial, verdana, Tahoma dll. Contoh :
<HTML>
<HEAD>
<TITTLE>Jenis font</TITTLE>
</HEAD>
<BODY>
<FONT SIZE="4">
<P><FONT FACE="ARIAL"> Arsenal, contoh font arial </FONT></P>
<P><FONT FACE="verdana"> Arsenal, contoh font verdana </FONT></P>
<P><FONT FACE="tahoma"> Arsenal, contoh font tahoma </FONT></P>
</FONT>
</BODY>
</HTML>
Warna Font <font color="red">...</font>
Atribut COLOR Anda bisa gunakan untuk mengatur warna font. Ada 2 cara untuk memberi
warna pada atribut color. Cara yang pertama dengan menuliskan nama warna yang ingin
digunakan seperti: red, blue, yellow, dll. Cara yang kedua dengan menggunakan nilai RGB.
<HTML>
<HEAD>
<TITTLE>Warna font</TITTLE>
</HEAD>
<BODY>
<FONT SIZE="4">
<P><FONT COLOR="RED"> Arsenal, Juara piala FA</FONT></P>
<P><FONT COLOR="#FF0000"> Arsenal, The Best</FONT></P>
<P><FONT COLOR="#00FF00"> Arsenal, Top Bgt</FONT></P>
</FONT>
</BODY>
</HTML>
Link <a>...</a>
Perintah anchor <A> digunakan untuk membuat link. Dan digunakan tag <A HREF = "nama_dokumen"> teks pada browser </A>. Untuk membuat link dalam sebuah dokumen HTML perlu disiapkan nama anchor lokasi tujuan link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>
File 1: contoh.html
<HTML>
<HEAD>
<TITTLE>Link</TITTLE>
</HEAD>
<BODY> 9
<A NAME="lengkap">pemain Milan</A>
<BLOCKQUOTE>
<P>DIDA, <A HREF="#DIDA">info selengkapnya</A>
<P>MALDINI
<P>SHEVA
<P>REDONDO
<P>RIVALDO
<P>
<A HREF="tujuan.html">info selengkapnya</A>
</BLOCKQUOTE>
<A NAME="DIDA">KLIK AJA !!!!</A>
<BLOCKQUOTE>
<P>KIPER UTAMA TIMNAS BRAZIL
</BLOCKQUOTE>
<A HREF="#lengkap">UP</A>
</BODY>
</HTML>
File 2: tujuan.html
<HTML>
<HEAD>
<TITLE>Link TUJUAN</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"> info
<BR>PIRLO
<BR>INZAGHI
<BR>GATTUSO
<BR><A HREF="contoh.html">kembali</A>
</BODY>
</HTML>
HTML Tingkat Lanjut
Mengapa disebut tingkat lanjut. Hal ini dikarenakan pada bahasan ini akan dilanjutkan bagaimana menggunakan grafik dalam halaman web. Tabel merupakan salah satu yang akan digunakan dalam pembuatan web. Dan dalam pembuatan tabel nanti Anda akan mempelajari bagian yang penting dalam pembuatan web yang dinamis yaitu tabel dan form.
Ordered List <ol>
Digunakan untuk membuat daftar dimana tiap bagian memiliki nomor secara berurut. Tag ini menggunakan tag <OL> dan diakhiri dengan </OL> Sedangkan untuk tiap bagiannya digunakan tag <LI> dan tidak menggunakan penutup. Ketika menggunkan OL ini maka penomoran dimulai 1,2,3,… , namun hal ini dapat diubah dengan menggunkan atribut TYPE pada tag <OL>
TYPE=1; daftar berurut dengan 1, 2, 3,
TYPE=I; daftar berurut dengan I, II, III,
TYPE=a; daftar berurut dengan a, b, c,
<HTML>
<HEAD>
<TITTLE>Ordered List</TITTLE>
</HEAD>
<BODY>
Urutan mobil berdasar peminat :
<OL>
<LI>Mercedest Benz
<LI>BMW
<LI>Honda
<LI>Hyundai
</OL>
</BODY>
</HTML>
Unordered List <ul>
Dalam unordered list, tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan bullet yang merupakan default dari unordered list. Untuk membuat tag ini digunakan tag <UL> dan diakhiri dengan </UL> dan tiap bagiannya digunakan <LI> Juga bisa digunakan tanda cakram/disk, lingkaran, dll.
<HTML>
<HEAD>
<TITTLE>Ordered List</TITTLE>
</HEAD>
<BODY>
Urutan mobil berdasar peminat :
<UL TYPE="square">
<LI>Mercedest Benz
<LI>BMW
<LI>Honda
<LI>Hyundai
</UL>
</BODY>
</HTML>
Grafik dalam Halaman Web <img>
Dalam HTML digunakan tag <IMG> untuk menampilkan gambar dalam halaman web. Format gambar yang paling sering digunakan dalam halaman web yaitu GIF dan JPEG, dengan format penulisan : <IMG SRC="file_gambar" ALT="nama_alternatif">. Atribut SRC digunakan untuk menentukan sumber gambar. Sedangkan ALT digunakan sebagai teks pengganti gambar.
Ada beberapa atribut dalam tag <IMG> yaitu :
BORDER: memberikan suatu batas atau border pada gambar defaultnya = 0
HEIGHT,WEIGHT: menentukan tinggi dan lebar gambar dalam pixel
HSPACE,VSPACE: menentukan jarak spasi horizontal dan spasi vertical antara gambar
dengan obyek sekitarnya.
ALIGN: mengatur perataan gambar terhadap obyek disekelilingnya.
Table <table>
Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE> Tag <TABLE> mewakili beberapa bagian penting :
<CAPTION>...</CAPTION> digunakan untuk membentuk judul table. Judul table akan terletak di luar table di bagian atas atau di bagian bawah. <TH>...</TH> digunakan untuk meletakkan judul table di bagian paling atas atau bagian paling kiri dari table. <TD>...</TD> digunakan sebagai tempat menulis data atau informasi dalam table.
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<caption>seputar liga italia</caption>
<tr>
<th>nama klub</th>
<th>berita</th>
</tr>
<tr>
<td>Ac milan</td>
<td>Ac milan mengalahkan Intermilan di semifinal liga champion</td>
</tr>
<tr>
<td>Juventus</td>
<td>Juventus juara liga italia musim 2002/2003</td>
</tr>
<td>
<tr>Roma</tr>
<tr>Roma akan berhadapan dengan Milan di final copa italia</tr>
</td>
</table>
</body>
</html>
Table ALIGN dan WIDTH
Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa bernilai left untuk perataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda dapat menggunakan VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan tengah dan BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk mengatur lebar table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya.
<html>
<head>
<title>Tabel dengan width dan align</title>
</head>
<body>
<table width="88%" height="210">
<tr>
<td width="30%" height="110" valign="top">lihatlah
valign="top"<br>
jangan kamu malu pada sesuatu yang tidak kamu ketahui
</td>
<td width="34%" height="110" valign="middle">bandingkan
dengan valign="middle"<br>
</td>
<td width="36%" height="110" valign="bottom">bagaimana dengan
valign="bottom"<br>
</td>
</tr>
</table>
</body>
</html>
Table CELLSPACING dan CELLPADDING
Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat antar batas/border dengan isi atau teks di dalam cell tersebut.
<html>
<head>
<title>cellspacing dan cellpadding</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%">baris 1, kolom 1</td>
<td width="57%">baris1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>
Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom. ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.
<html>
<head>
<title>colspan dan rowspan</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%" rowspan="2">baris 1, kolom 1 <p>baris 2, kolom 1</td>
<td width="57%">baris 1, kolom 1</td>
</tr>
<tr>
<td width="57%">baris 2, kolom 2</td>
</tr>
<tr>
<td width="100%" colspan="2">baris 3, kolom 1 <p> baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>
Table COLOR
Selain warna pada background, border juga bisa ditentukan warnanya. Untuk background
digunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan atribut BORDER COLOR.
<html>
<body>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolor="#FF0000">
<tr>
<td width="50%" bgcolor="#808080"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%" bgcolor="#008080"> </td>
</tr>
</table>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolorlight="008080"
bordercolordark="800080">
<tr>
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
Form <form>â...¦</form>
Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan dari user untuk dikirim ke server. Tag <FORM> membuat kerangka dan tag <INPUT> menyediakan elemen antarmuka dengan user. Untuk standar penulisan form adalah sebagai berikut :
<FORM METHOD ="POST/GET" ACTION ="URL">
...
...
...
</FORM>
Atribut METHOD memiliki 2 nilai POST dan GET. Metode GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST mengirimkan datanya secara terpisah. Jika masukan banyak maka disarankan Anda menggunakan POST. ACTION akan berisi URL dari program yang dipanggil form tersebut.
Input teks <input type="text">
Textbox adalah salah satu jenis control untuk memasukkan data. HTML menyediakan tag <INPUT> dengan atribut TYPE="text" untuk membuat kotak input. Untuk atribut VALUE digunakan untuk memberi nilai input, dan SIZE digunakan utuk
menentukan batas terpanjang dari sebuah masukan. Contoh :
<html>
<head>
<TITLE>form input dengan textbox</TITLE>
<body>
<p>Rancangan awal BUKU TAMU</p>
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="11%">Nama</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="nama" size="20"></td>
</tr>
<tr>
<td width="11%" height="22">Alamat</td>
<td width="3%">:</td>
<td width="86"><input type="text" value="jember" name="alamat"
size="20"></td>
</tr>
<tr>
<td width="11%">Sekolah</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="sekolah" size="20"></td>
</tr>
</table>
</body>
</head>
</html>
Input Checkbox <input type="checkbox">
Anda juga bisa memberikan atribut TYPE dengan menggunakan Checkbox yang berfungsi
untuk memberikan user pilihan. Contoh :
<html>
<head>
<title>Check Box</title>
</head>
<body>
<p>Berikan poling !</p>
<p>Daftar mobil</p>
<p>
<input type="checkbox" name="c1" checked>mercedes<br>
<input type="checkbox" name="c2" checked>bmw<br>
<input type="checkbox" name="c3" checked>honda<br>
<input type="checkbox" name="c4" checked>toyota
</p>
</body>
</html>
Input Radio Button <input type="radio">
Jika atribut TYPE="checkbox" diganti dengan TYPE="radio", maka user harus memilih salah satu pilihan yang tersedia. User tidak bisa memilih lebih dari satu pilihan. Atribut CHECKED digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan.
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<p>berikan piihan Anda</p>
<p>Rentang Usia</p>
<p>
<input type="radio" value="v1" checked name="R1">15 tahun<br>
<input type="radio" value="v2" checked name="R1">15-19 tahun<br>
<input type="radio" value="v3" checked name="R1">19-25 tahun <br>
<input type="radio" value="v4" checked name="R1">25-30 tahun<br>
</p>
</body>
</html>
Salam...
0 komentar:
Posting Komentar