Monday, 20 May 2013

Pengenalan Dasar HTML Beserta Scriptnya

       2 comments

HTML adalah merupakan singkatan dari (Hyper Text Markup Language) dimana ini adalah bahasa pemrograman standar di lingkungan berbasis web, yang digunakan untuk mengahasilkan dokumen-dokumen hyper text untuk digunakan dalam World Wide Web. Dalam penggunaan tersebuat akan diawali dengan tanda “<” dan diakhiri dengan “>”. Dalam tanda tersebuat didalamnya akan memuat berbagai hal dokumen-dokumen yang akan ditampilkan tersebut. File HTML biasanya disimpan dengan ekstensi html “.html”. dalam pembuatan dokumen HTML murni kita dapat membuat/menuliskannya pada editor sperti Notepad, EditPlus, Adobe Dreamweaver, dll.

A.  Struktur Dasar HTML
Dalam memulainya pembuatan dokumen pada HTML, terlebih dahulu kita harus mengerti dengan tag-tag yang ada pada HTML, dalam dokumen HTML akan memuat elemen-elemen berupa tag-tag tertentu, seperti, jika diawali dengan <nama tag> maka akan di akhiri oleh </nama tag> pula. Berikut struktur dasar yang ada pada HTML:
<html>
<head>
<title> judul dokumen </title>
</head>
<body>
Isi dari dokumen
</body>
</html>










Tampilan Program:




1.   HTML
Elemen/Tag dasar ini yang mendefenisikan dokumen kita bahwa pada elemen/tag ini adalah dokumen HTML. Dalam penulisan tag ini harus diawali dengan <html> dan diakhiri dengan </html>.

2.   HEAD
Pada elemen ini akan memberikan judul pada dokumen yang akan kita buat. Pada pembuatan  judul kita harus mengetikkan tag yang diawali <head> dan diakhiri </head>.
3.   TITLE
Elemen ini berada diantara tag <head>. Tag ini berfungsi untuk memberikan judul untuk masing-masing halaman atau judul yang tampil diatas web browser. Dalam penulisan tagnya yaitu diawali <title> dan diakhiri dengan </title>.
4.   BODY
Elemen/tag ini digunakan untuk mengisi sebuah data yang akan kita buat dan di tampilkan pada halaman dokumen HTML nantinya. Jadi data yang perlu kita tampilkan pada dokumen ini kita harus masukkan pada tag body ini. dalam penulisan tagnya seperti berikut: diawali dengan <body> dan diakhiri oleh </body>.





B.  Struktur Dasar HTML
1.   Heading
Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu dokumen HTML. Walaupun sama-sama merupakan judul, tetapi Heading berbeda fungsi dengan tag Title yang hanya muncul pada title bar dari suatu jendela web, namun bukan didalam halaman web.

Dalam HTML menyediakan enam level/tingkatan dari heading, tag heading yang pertama itu dimulai dari heading level pertama yang mempunyai ukuran yang lebih besar dari level heading berikutnya dan begitupun selanjutnya. Dimana heading hanya mempunyai 6 level/jenis ukuran. Penggunaan tag heading sama dengan penggunaan tag-tag sebelumnya sperti heading level satu ini yang diawali <H1> dan diakhiri dengan </H1>. Dan berikut contoh-contoh mengenai Heading:
<html>
<head>
<title> Contoh penggunaan Heading </title>
</head>
<body>
 <h1> Penggunaan Heading Level 1 </h1>
<h2> Penggunaan Heading Level 2 </h2>
<h3> Penggunaan Heading Level 3 </h3>
<h4> Penggunaan Heading Level 4 </h4>
<h5> Penggunaan Heading Level 5 </h5>
<h6> Penggunaan Heading Level 6 </h6>
</body>
</html>

Tampilan Program:


2.   Font
Dalam HTML juga menyediakan elemen Font yang digunakan untuk mengubah jenis text, warna, beserta ukuran text yang ada pada dokumen yang kita buat. Pada tag font diuraikan speperti berikut <font size=”ukuran font” color=”warna text face”jenis font”>.
Ø  Size
Dalam penggunaan size pada tag Font yaitu diberikan ukuran atau angka, yang digunakan untuk mengatur besar kecilnya text tersebu.
Contoh: size=8.
Ø  Color
Dalam penggunaan Color pada tag Font yaitu diberikan nama atau jenis warna yang di inginkan dan diapit dengan tanda petik dua (“), yang berguna untuk merubah jenis warna pada text dokumen tersebut.
Contoh: Color=”yellow”.
Ø  Face
Dalam penggunan Face pada tag Font yaitu diberikan nama atau jenis font dan diapit oleh tanda petik dua (“). Face ini berguna untuk merubah jenis/tampilan pada text dokumen tersebut.
Contoh: Face=”arial”.
<html>
<head>
<title> Penggunaan Font </title>
<head>
<body>
<font size=5 color="Green" face="comic sans ms">
Text ini berukuran 5, berwarna hijau, dan berjenis font Comic Sans ms </font>
<font size=10 color="Blue" face="Berlin Sans FB">
Text ini berukuran 10, berwarna Biru, dan berjenis font Berlin Sans FB </font>
<font size=4 color="red" face="Cambria">
Text ini berukuran 4, berwarna Merah, dan berjenis font Cambria </font>
</body>
</html>


Tampilan Program :

3.   Break (Pemenggalan Kalimat)
Dalam menulis sbuah dokumen pastinya panjang kan, nah disini kita sangat memerlukan  yang namanya Break (pemenggalan kalimat), agar dokumen yang kita buat nanti bisa tersusun/tertata rapih. Dalam penulisan tag ini diberi tanda <BR>, dan penggunaan tag ini disimpan pada akhir kata yang ingin kita penggal. Sebagai contoh perhatikan sintax dibawah ini:


<html>
<head>
<title> Contoh Penggunaan Break </title>
</head>
<body>
Dalam menulis sbuah dokumen pastinya<BR>
panjang kan, nah disini kita sangat memerlukan<BR>
yang namanya Break (pemenggalan kalimat),<BR>
agar dokumen yang kita buat nanti bisa<BR>
tersusun/tertata rapih.
</body>
</html>

Tampilan Program:






4.   Paragraf
Dalam menulis/membuat sebuah dokumen, pastinya kita akan membutuhkan sebuah paragraf untuk lebih efisien dalam penyusunan kalimat yang kita rangkum nantinya. Nah tag ini hampir sama dengan fungsi dari Break, hanya saja break berfungsi untuk memenggal sebuah kalimat, namun fungsi dari paragraf yaitu untuk pindah ke baris yang baru dan melangkahi satu baris. Penulisan tag paragraf yaitu <P> dan ditutup dengan </P>.

Dalam pembuatan paragraf pastinya kita juga membutuhkan perataan text. Dalam pearataan ada empat jenis yaitu RIGHT, LEFT, CENTER, dan JUSTIFY. Dalam pemanggilan perataan text kita membutuhkan sebuah pemanggil yaitu ALIGN. Dalam penulisan tag yaitu <ALIGN=”jenis perataan”>. Unutk lebih jelasnya dapat melihat contoh kasus dibawah ini:
<html>
<head>
<title> Penggunaan Tag Paragraf </title>
</head>
<body>
<P Align="Right">
Dalam menulis/membuat sebuah dokumen,<br>
pastinya kita akan membutuhkan sebuah paragraf<br>
untuk lebih efisien dalam penyusunan kalimat yang<br>
kita rangkum nantinya.
</P>
<P Align="Left">
Nah tag ini hampir sama dengan fungsi dari Break,<br>
hanya saja break berfungsi untuk memenggal sebuahkalimat,<br>
namun fungsi dari paragraf yaitu untuk pindah ke baris<br>
yang baru dan melangkahi satu baris.
</P>
<P Align="Center">
Dalam pembuatan paragraf pastinya kita juga<br>
membutuhkan perataan text. Dalam pearataan ada<br>
empat jenis yaitu RIGHT, LEFT, CENTER, dan JUSTIFY.<br>
</P>
<P Align="Justify">
Dalam pemanggilan perataan text kita membutuhkan<br>
sebuah pemanggil yaitu ALIGN.<br>
Dalam penulisan tag yaitu <ALIGN=”jenis perataan”>.
</P>
</body>
</html>

Tampilan Program:

5.   Horizontal Rule (Garis Datar)
Dalam HTML, sebuah garis datar juga dapat disisipkan dalam  sebuah dokumen web, pada umumnya ini digunakan sebagai pemisah antar bagian, seperti header, paragraf, dll.

Dalam penggunaan/penulisan tag ini yaitu kita memberi tag <HR> pada bagian yang ingin diberikan garis datar tersebut. Perhatikan contoh berikut:



<html>
<head>
<title> Penggunaan Tag Paragraf </title>
</head>
<body>

<HR>
<P Align="Right">
Dalam menulis/membuat sebuah dokumen,<br>
pastinya kita akan membutuhkan sebuah paragraf<br>
untuk lebih efisien dalam penyusunan kalimat yang<br>
kita rangkum nantinya.
</P>

<HR>
<P Align="Left">
Nah tag ini hampir sama dengan fungsi dari Break,<br>
hanya saja break berfungsi untuk memenggal sebuah kalimat,<br>
namun fungsi dari paragraf yaitu untuk pindah ke baris<br>
yang baru dan melangkahi satu baris.
</P>

<HR>
<P Align="Center">
Dalam pembuatan paragraf pastinya kita juga<br>
membutuhkan perataan text. Dalam pearataan ada<br>
empat jenis yaitu RIGHT, LEFT, CENTER,danJUSTIFY.<br>
</P>

<HR>
<P Align="Justify">
Dalam pemanggilan perataan text kita membutuhkan<br>
sebuah pemanggil yaitu ALIGN.<br>
Dalam penulisan tag yaitu <ALIGN=”jenis perataan”>.
</P>

</body>
</html>



Tampilan Program:


C.  FORMATING TEXT
Dalam HTML, ada beberapa jenis format teks yang biasa digunakan dalam membuat sebuah dokumen, yaitu sebagai berikut:
1.   Format menebalkan huruf
Menebalkan huruf atau Bold Penggunaan format ini dalam sebuah dokumen HTML yaitu cara penulisannya diawali dengan <B> dan diakhiri oleh </B>.
2.   Format memiringkan text
Memiringkan text atau Italic, penggunaan format ini dalam sebuah dokumen HTML yaitu cara penulisannya diawali dengan <I> dan diakhiri oleh </I>.
3.   Format memberi garis bawah pada huruf
Menggaris bawahi huruf atau Underline, penggunaan format ini dalam sebuah dokumen HTML yaitu cara penulisannya diawali dengan <U> dan diakhiri oleh </U>.
4.   Format mengecilkan huruf
Mengecilkan huruf atau Small, penguunaan format ini dalam sebuah dokumen HTML yaitu cara penulisannya diawali dengan <SMALL> dan diakhiri oleh </SMALL>.
5.   Format SuperScript
Format ini pada umumnya biasanya dipakai untuk memberi rumus-rumus atu pemangkatan. Yaitu cara penulisannya pada tag HTML agak berbeda dengan yang lainnya. Diawali dengan <SUP> dan diakhiri oleh </SUP>.
6.   Format SubScript
Format ini hampir sama dengan fungsi SubScript, hanya saja huruf atau kata yang diberikan pada tag ini mengecil kebawah. Yaitu cara penulisannya pada tag HTML diawali dengan <SUB> dan diakhiri oleh </SUB>.



Adapun contoh-contoh format tag diatas sebagai berikut:
<html>
<head>
<title> Penggunaan Format </title>
</head>
<body>
<B> Format text tebal </B><P>
<I> Format text miring </I><P>
<U> format text bergaris bawah </U><P>
<SMALL> Format mengecilkan huruf </SMALL><P>
Format memberi <SUP> SuperScript </SUP><P>
Format memberi <SUB> SubrScript </SUB><P>
</body>
</html>

Tampilan Program:
D.  EFFECT PADA TEXT
Dalam HTML, kita juga dapat menyisipkan sebuah effect animasi bergerak atau berjalan ke kanan dan ke kiri pada text agar terlihat lebih menarik. Adapun nama effect tersebut yaitu Marquee.

Tag yang digunakan untuk menampilkan effect tersebut yaitu di awali dengan <marquee> dan diakhiri oleh </marquee>. Nah adapun beberapa atribut sederhana pada effect untuk tambah lebih menarik lagi yaitu sebagai berikut:
1.   Alternate    : Teks berjalan ke kanan dan ke kiri dengan memantul
2.   Scroll         : Teks bergerak terus ke kanan dan ke kiri
3.   Slide          : Teks berhenti saat berada di kanan layar
Dengan atribut yang tertera diatas, adapun cara menggunakan tagnya yaitu dengan diawali <Marquee Behavior=X>dan diakhiri oleh </Marquee>. Tanda X yang ada yaitu tempat untuk menuliskan atribut.
<html>
<head>
<title> Contoh Effect </title>
</head>
<body>

<Marquee> Kami Dari Kelompok 2 </Marquee>
<Marquee Behavior="Alternate"> Kami Dari Kelompok 2 </Marquee>
<Marquee Behavior="Scroll"> Kami Dari Kelompok 2 </Marquee>
<Marquee Behavior="Slide"> Kami Dari Kelompok 2 </Marquee>

</body>
</html>


E.  BACKGROUND
Dalam membangun sebuah web agar kelihatan lebih menarik, maka kita akan menampilkan sebuah background ke dalam web yang kita bangun. Untuk menampilkan background kedalam web yang kita bangun yaitu dengan cara tuliskan atribut pada bagian tag <BODY>, atau <Body Background=”X”>. X yang berarti lokasi/tempat dimana file yang ingin dijadikan sebuah background. Sebagai contoh perhatikan sintax dibawah ini.
<html>
<head>
<title> Penggunaan Background </title>
</head>
<body background="D:\Dipanegara Computer Club (DCC)\Thec Blue\xxx.jpg">
</body>
</html>

Tampilan Program:


F.   IMAGE
Dalm pembuatan dokumen, biasanya kita ingin memasukkan image atau foto kita kedalam web yang kita bangun. Cara penggunaan/penulisan tag ini tidak jauh berbeda dengan penggunaan background, hanya saja background ditulis pada bagian tag body, namun penulisan tag image ini berada didalam atau diantara tag body. Perhatikan contoh berikut:
<html>
<head>
<title> Penggunaan Image </title>
<body background="D:\Dipanegara Computer Club (DCC)\ThecBlue\backdrop-blue-technology-gear.jpg">
<h2><B> Peggunaan Image </B></h2>
<IMG SRC="D:\DSCN0268.JPG" WIDHT="120"HEIGHT="150">
</body>
</html>

Tampilan Program:

G.  HYPERLINK
Hyperlink berfungsi untuk menghubungkan antara dokumen atau situs yang lain. Dalam pembuatan hyperlink kita bisa menggunakan sebuah gambar atau text untuk berfungsi melakukan pemanggilan dokumen atau halaman yang lain. Dan gambar atau text yang dijadikan sebuah hyperlink menandakan adanya sebuah garis bawah dan font yang berwarna terang, apabila kursor diarahkan ke arah text atau gambar tersebuat maka kursor akan berubah secara otomatis menjadi gambar tangan atau siap klik.

Dalam penggunaan/penulisan tag hyperlink ini diawali dengan <A HREF=X> dan diakhiri oleh tag </A>. X tersebut adalah nama_file/dokumen  yang akan dijadikan sebuah hyperlink. Perhatikan contoh berikut:
<html>
<head>
<title> Penggunaan Hyperlink </title>
</head>
<body>
<font size=4 face="Berlin Sans FB">
<A HREF=www.google.com> Access To Google </A><br><br>
<A HREF=www.twitter.com> Access To Twitter </A><br><br>
<A HREF=www.facebook.com> Access To Facebook </A>
</font>
</body>
</html>

Tampilan Program:


H.  TABEL
1.   Pemamfaatan Tabel
Tabel biasanya digunakan untuk menempatkan data, mendesain web, tabel digunakan untuk merapikan sebuah text, ataupun gambar. Desain menggunakan tabel, teks ataupun gambar dapat disusun agar menjadi lebih kelihatan rapih.
2.   Tag Pembuatan Tabel
Dalam pembuatan tabel adapun elemen-elemen yang digunakan untuk membuat sebuah tabel yaitu sebagai berikut:


a.   Tabel
Yaitu tag utama yang digunakan untuk memulai pembuatan
tabel.
b.   TR (Tabel Row)
Tabel Row atau baris tabel yaitu baris-baris pada suatu tabel, cara penulisan tag atribut yaitu diawali dengan <TR> dan diakhiri oleh </TR>.
c.   TD (Tabel Draw)
Tabel Draw atau tabel kolom yaitu tempat untuk dimasukkannya sebuah data yang kita input ke dalam tabel tersebut. Cara penulisan tag atributnya yaitu diawali dengan <TD> dan diakhiri oleh </TD>.
d.   TH (Tabel Header)
Tabel Header atau biasa disebut dengan judul tabel, yang berfungsi untuk menjadi sebuah judul tabel atau berada di paling atas tabel. Cara penulisan tag atributtnya yaitu diawali dengan <TH> dan diakhiri oleh </TH>.
Perhatikan contoh berikut:
<html>
<head>
<title> Penggunaan Tabel </title>
</head>
<body>
<table border>
<tr>
 <td colspan=2> Contoh Pembuatan Tabel </td>
</tr>
<tr>
 <td> Dull </td>
 <td> Leo </td>
</tr>
<tr>
 <td> Aco </td>
 <td> Anca </td>
</tr>
</table>
</body>
</html>

Tampilan Program:

I.    FORM
Form adalah suatu cara untuk menjadikan halaman web menjadi lebih interaktif, karena akan mendapatkan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pendaftaran, survey, meminta komentar dan sebagainya. Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk seperti Input, Checkbox, Option, dan sebagainya.
  
1.   Komponen Text
Komponen text biasanya digunakan untuk memasukkan data. Dalam penulisan tag yaitu <Input Type=Text Name=”Nama” size=30>. Perlu kita perhatikan beberapa atribut yang harus diketahui di perintah input ini:
a.   INPUT   : Tag perintah untuk menginput
b.   TYPE    : Jenis atau type penginputan
c.   NAME   : Devenisi Variabel
d.   “Nama”  : Nama Variabel
e.   SIZE     : Batas jumlah karakter yang akan diinput


Perhatikan contoh sebagai berikut:
<html>
<head>
<title> Komponen Text/Input </title>
</head>
<body>
STB      : <Input Type="text" Name="STB" Size="6"><br>
Nama    : <Input Type="text" Name="NM" Size="30"><br>
Jurusan : <Input Type="text" Name="JUR" Size="20">
</body>
</html>

Tampilan Program:

2.   Radio Button
Radio Button merupakan salah satu komponen form yang digunakan untuk memilih salah satu pilihan dari banyak pilihan yang tersedia. Dengan kata lain hanya ada salah satu yang harus pilihan yang dianggap True sedangkan yang lainnya False. Adapun cara penulisan tagnya adalah diawali dengan <Input Type=”Radio” Name=”Nama” Value=”T”>. Perhatikan atribut sebagai berikut:
a.   INPUT   : Tag perintah untuk menginput
b.   TYPE    : Jenis atau type penginputan
c.   NAME   : Devenisi Variabel
d.   VALUE : Nilai dari variabel bisa dipilih

Perhatikan contoh sebagai berikut:
<html>
<head>
<title> Komponen Text/Input </title>
</head>
<body>
Jenis Kelamin :
<Input Type="radio" Name="JK" Value="L"> Laki-Laki
<Input Type="radio" Name="JK" Value="P"> Perempuan
</body>
</html>

Tampilan Program:

3.   Checkbox
Checkbox merupakan komponen form yang digunakan untuk memilih lebih dari satu pilihan. Dalam hal ini disediakan beberapa pilhian dalam bentuk check berupa kotak kecil yang diberi tanda checklist jika dipilih. Dan kita dapat memilih lebih dari satu pilihan yang tersedia. Adapun cara penulisan tagnya yaitu <Input Type=”Checkbox” Name=”Nama” Value=”K”>. Perhatikan atribut sebagai berikut:
a.   INPUT   : Tag perintah untuk menginput
b.   TYPE    : Jenis atau type penginputan
c.   NAME   : Devenisi Variabel
d.   VALUE : Nilai dari variabel bisa dipilih

Perhatikan contoh sebagai berikut:
<html>
<head>
<title> Komponen Checkbox </title>
</head>
<body>
Menu Makanan dan Minuman : <br>
<Input Type="Checkbox" Name="NasGor" Value="NG"> Nasi Goreng<br>
<Input Type="Checkbox" Name="NasKun" Value="NK"> Nasi Kuning<br>
<Input Type="Checkbox" Name="NasTel" Value="NT"> Nasi + Telur<br>
<Input Type="Checkbox" Name="EsTeh" Value="ET"> Es Teh<br>
<Input Type="Checkbox" Name="EsJer" Value="EJ"> Es Jeruk<br>
<Input Type="Checkbox" Name="EsTel" Value="ETL"> Es Teler
</body>
</html>

Tampilan Program:

4.   Select Dan Option
Select merupakan komponen form yang digunakan untuk memilih salah satu pilihan dari daftar pilihan dalam bentuk Dropdown. Pilihan ditampilkan dalam daftar Option.
Select maksudnya menampilkan pilihan secara default. Dan juga bisa ditampilkan dalam bentuk Scrollup dan Scrolldown dengan menggunakan komponen Select dan Option. Penulisan tag pada select yaitu diawali dengan <Select> dan diakhiri oleh </Select>, dan diantara tag Select kita dapat menyisipkan atribut yaitu Option dengan cara penulisan tagnya yaitu diawali dengan <Option> dan diakhiri oleh </Option>. Perhatikan contoh program dibawah ini:


<html>
<head>
<title> Komponen Select dan Option </title>
<html>
<head>
<title> Komponen Select dan Option </title>
</head>
<body>
Pilih Kelompok :
<Select Name="J_Komponen">
 <Option> Kelompok 1 </Option>
 <Option> Kelompok 2 </Option>
 <Option> Kelompok 3 </Option>
 <Option> Kelompok 4 </Option>
 <Option> Kelompok 5 </Option>
 <Option> Kelompok 6 </Option>
</Select>
</body>
</html>
Tampilan Program:

5.   Menggunakan Button
Dalam HTML dikenal 2 jenis button yang sangat populer yaitu Submit dengan Reset. Tombol Submit digunakan untuk mengaktifkan action ketika kita sudah berhadapan dengan ASP atau CGI yang ada dalam server. Tetapi dalam buku ini, tidak dibahas mengenai pengaktifan action dalam ASP. Sedangkan tombol Reset digunakan untuk membersihkan data yang ada dalam form yang telah diinput.
Tombol Submit dan Reset dapat diganti dengan memberikan kalimat atau teks pada Value, misalnya Value=”SIMPAN”, Value=”HAPUS”, dll.
Contoh Program sebagai berikut:
<html>
<head>
<title> Komponen Text/Input </title>
</head>
<body>
STB      : <Input Type="text" Name="STB" Size="6"><br>
Nama    : <Input Type="text" Name="NM" Size="30"><br>
Jurusan : <Input Type="text" Name="JUR" Size="20"><br><br>
<Input Type="Submit" Name="SMP" Value="SIMPAN">
<Input Type="Reset" Name="HPS" Value="HAPUS">
</body>
</html>

Tampilan Program:

6.   Text Area
Teks Area digunakan untuk memasukkan data dalam area yang lebih luas. Yang biasanya ini digunakan sebagai tempat komentar dan sebagainya. Dalam atribut ini suadh bisa diatur dengan menggunakan pernyataan Roes=X dan Cols=X. X disini menjelaskan bahwa X digunakan untuk memberikan angka untuk mengatur luasnya Text Area ini. Adapun cara penulisan tagnya yaitu diawali dengan <Textarea> dan diakhiri oleh </textarea>.
Untuk lebih jelasnya oerhatikan contoh sebagai berikut:


<html>
<head>
<title>Penggunaan Text Area </title>
</head>
<body>
<table>
<tr>
 <td><label> Tentang Anda </label><td>
 <td><textarea name="memo" rows="5" cols="20">Tulis Tentang Anda
</textarea></td>
</tr>
</body>
</html>
       

   Tampilan Program:

J.   PROGRAM SEDERHANA
Stelah mempelajari semua isi mengenai bab 1, anda akan dilatih untuk membuat sebuah dokumen sederhana, dengan menggabungkan semua komponen-komponen yang telah kita pelajari sebelumnya. Nah kita akan membuat sebuah Form Registrasi Mahasiswa dengan menggunakan software EditPlus+.

Ketikkan tag html ini dan pelajari lebih lanjut, berikut tag-tagnya:
<html>
<head>
<title> Form Registrasi </title>
</head>
<body background="D:\Dipanegara Computer Club (DCC)\Thec Blue\backdrop-blue-technology-gear.jpg">

<marquee behavior=Scroll><font size=7 color="yellow" face="Black Wolf">
<B> WELCOME </B></font></marquee><br><br>
<HR><HR>
<P Align="Left">
<font size=6 color="black" face="Berlin Sans FB">
<b>Form Registrasi Mahasiswa </B></font></P>
<form action="" method="post">
<table>
<tr>
<td><font size=3 face="Comic sans ms"><label > STB  </label></font></td>
<td><input type="text" size="6" name="STB" maxlength="6"></td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Nama  </label></td>
<td><input type="text" size="30" name="NM"></td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Jurusan </label></td>
<td><input type="text" size="20" name="JR"></td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Alamat </label></td>
<td><input type="text" size="30" name="AL"></td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Jenis Kelamin </label></td>
<td><input type="radio" name="JK" value="L">Laki-Laki
<input type="radio" name="PR" value="P">Perempuan </td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> HobbyB</label></td>
<td><input type="checkbox" name="FT" value="Foot">Football
<input type="checkbox" name="BB" value="Basket">Basket ball
<input type="checkbox" name="FL" value="Futsal">Futsal
<input type="checkbox" name="LL" value="Lain2">Lain-Lain</td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Provinsi </label></td>
<td><select name="Provinsi">
<option> Sulawesi Selatan </option>
<option> Sulawesi Barat </option>
<option> Sulawesi Tenggara </option>
<option> Sulawesi Utara </option>
</select></td>
</tr>
<tr><td><font size=3 face="Comic sans ms"><label> Kabupaten </label></td>
<td><input type="text" size="20" name="KB"></td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Agama</label></td>
<td><select name="agama">
<option> Islam </option>
<option> Ktolik </option>
<option> Protestan </option>
<option> Hindu </option>
<option> Budha </option>
</select></td>
</tr>
<tr>
<td><font size=3 face="Comic sans ms"><label> Tentang Anda</label></td>
<td><textarea name="memo" rows="5" cols="30">Tulis tentang pengalaman Anda
</textarea></td>
</tr>
<tr>
<td><input type="submit" value="DAFTAR"></td>
<td><input type="reset" value="HAPUS"></td>
</tr>
</table>
</form
</body>
</html>


Tampilan Program:

2 comments:

  1. Unknown15 March 2017 at 21:20

    misi mas saya mau tanya , kalo kalimanatnya begini "Kesalahan saat mengurai XML, baris 5, kolom 209: The reference to entity "l" must end with the ';' delimiter."
    minta pencerahannya ya mas .
    terima kasih

    ReplyDelete
  2. Unknown28 February 2020 at 18:34

    Terima kasih kak, sangat bermanfaat buat kami dan bisa jadi bekal pembelajaran saya
    Nama saya:Yulinda sari Nim:1922500197
    Dan link web kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete