Pengenalan HTML dan JavaScript
Dalam pemrograman untuk web kita tidak mungkin lepas dari script yang bernama HTML (Hypertext Markup Language). HTML ini adalah merupakan suatu bahasa penandaan yang di pergunakan browser dalam menampilkan sebuah informasi pada halaman web. Sedangkan Javascript adalah sebuah bahasa program yang berada pada sisi crient yang di pergunakan untuk melakukan dinamisasi tampilan halaman sebuah web.
3.1 HTML dasar
Di dalam Penulisan script HTML di apit dengan tanda lebih kecil (<) dan tanda lebih besar (>) yang di sebut dengan tag dan hampir setiap script HTML kebanyakan akan saling berpasangan-pasangan atau dengan kata lain ada perintah untuk pembukan dan ada penutup. Pada penulisan informasi pada halaman web kita dapat menggunakan editor apapun mulai dari notepad pada windows, gedit pada linux ataupun editor yang lain.
Penulisan HTML pada intinya dapat di bagi menjadi dua bagaian yaitu bagaian header yang di pergunakan untuk menangani informasi informasi bawaan dari halaman web dan bagaian body yang di pergunakan untuk menampilkan informasi yang akan di tampilkan dalam halam web. Bentuk penulisan dari script HTML dapat di lihat pada latihan 1.
Latihan 1a (HTML-Dasar)
<html>
<head>
<title> Latihan 1 HTML </title>
</head>
<body>
</body>
</html>
Latihan 1b (HTML-Dasar)
<html>
<head>
<title> Latihan 1 HTML </title>
</head>
<body>
Latihan 1 HTML
</body>
</html>
Pada latihan 1a di atas jika di jalankan akan menghasilkan informasi kosong atau tidak berisi apa-apa tetapi header yang tertulis pada layar browser akan berisi “ Latihan 1 HTML”. Sedang pada latihan 1b kondisi header sama dengan latihan 1a tetapi pada halaman browser akan muncul kata “Latihan 1 HTML”.
Latihan 2 (HTML-Properti)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body text='white' bgcolor='red'>
ini adalah isian properti di dalam body
</body>
</html>
pada latihan 2 di sini kita akan membahas properti-properti yang ada pada body. Sebagai contoh pada latihan dua tersebut kami menampilkan background merah (bgcolor='red') pada halaman HTML dan mengubah warna tulisan menjadi putih (text='white'). Dan untuk properti yang lain pada tag body ini silahkan lihat tabel di bawah ini.
Latihan 3 (HTML-Hn,Br,P)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah untuk judul
<h1> Judul 1 </h1>
<h2> Judul 2 </h2>
<h3> Judul 3 </h3>
<h4> Judul 4 </h4>
<h5> Judul 5 </h5>
<h6> Judul 6 </h6>
ini adalah halaman 1 <br> dan ini ada di baris ke 2
<p> ini adalah sebuah paragrap </p>
</body>
</html>
Pada latihan ke tiga ini kita akan membahas tag header. Tag ini di pergunakan untuk memberikan sebuah informasi header atau judul sebuah document dimana tag <h> ini memiliki tingkatan sampai dengan 6 (<h1> sampai dengan <h6>) diman tiap tingkatan memiliki besar huruf yang berbeda. Sedang tag yang kedua yang kita bahas pada latihan 3 ini adalah tag <br> yang berfungsi untuk ganti baris yang baru pada sebuah halaman web. Untuk kita ketahui bahwa sewaktu kita menuliskan script HTML, apabila kita membuat sebuah informasi atau document HTML berapapun enter (untuk ganti garis yang baru) yang kita lakukan tidak akan di hitung. Dan tag yang ke tiga yang kita bahas pada latihan 3 ini adalah tag <p> yang di pergunakan untuk membuat sebuah paragrap pada sebuah dokumen atau informasi yang kita buat.
Latihan 4 (HTML-table)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah table
<table>
<tr>
<td>nama</td><td>alamat</td>
</tr>
<tr>
<td>ali</td><td>sidoarjo</td>
</tr>
<tr>
<td>jamal</td><td>sidoarjo</td>
</tr>
<tr>
<td>muksin</td><td>sidoarjo</td>
</tr>
</table>
</body>
</html>
pada latihan 4 ini kita membahas sebuah tabel. Dimana untuk membuat sebuah tabel kita memerlukan tag <table> dan di tutup dengan tag </table>, di dalam tag <table> ini di dalamnya di gunakan tag <tr> untuk membuat sebuah baris dan tag <td> untuk membuat sebuah colom.
Latihan 5 (HTML-pre, center)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
<center>
ini ada di tengah halaman
</center>
ini di buat dengan tanpa pre
nama : ali
Alamat : sidoarjo
<pre>
ini di buat dengan pre bandingkan dengan yang di atas
nama : ali
Alamat : sidoarjo
</pre>
</body>
</html>
pada latihan ke 5 ini kita membahas tag <center dan tag <pre> dimana fungsi dati tag <center> adalah di pergunakan untuk membuat align center atau memposisikan data atau informasi kita berada di tengah, sedangkan tag <pre> di pergunakan untuk mengabaikan kondisi halaman sebuah web (seperti enter, spasi dll) sehingga tampilan kita sama dengan sewaktu kita merancang halaman web tersebut.
1.
Form
Form di dalam sebuah program memiliki kedudukan yang sangat penting, dengan adanya sebuah form maka seorang user dapat saling berinteraksi dengan aplikasi yang kita buat. Meski pada dasarnya dalam program HTML ini sebuah form dalam pengelolaanya memerlukan bahasa pemrograman yang lain sebagai pengelola informasi yang di inputkan padanya.
Latihan 6a (HTML-form1)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah halaman form 1
<form method=post name=form1 action=form2>
nama :<input type=text nama=txtnama>
password :<input type=password name=txtpassword>
jenis kelamain :<br>
<input type=radio name=radiogroup1 value=laki-laki> laki-laki
<input type=radio name=radiogroup1 value=perempuan> Perempuan
hoby :<br>
<input type=checkbox name=checkbox1 value=makan> makan
<input type=checkbox name=checkbox1 value=baca> baca
<input type=checkbox name=checkbox1 value=tidur> tidur
alamat : <br>
<textarea name=txtalamat> </textarea>
list :
<select name=seleksi>
<option value=1> satu </option>
<option value=2> dua </option>
</select>
<input type=submit name=setuju value=ok>
<input type=button name=tombol value=bebas>
<input type=reset name=kosong value=blank>
</form>
</body>
</html>
Latihan 6b (HTML-form2-sekilasPHP)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah halaman ke dua
<?php
$nama = $_post[txtnama];
$jenis = $_post[radiogroup1];
$alamat = $_post[txtalamat];
echo "nama : $nama";
echo "jenis Kelamin : $jenis";
echo "Alamat : $alamat";
?>
</body>
</html>
Pada latihan 6 ini kita membahas materi form. Dalam tag form terdapat properti yang harus kita gunakan agar kita dapat berhubungan dengan file-file yang di pergunakan untuk mengelola input yang kita masukkan di dalam tag <form> yang di ambil tag <input>. Properti minimal yang kita pergunakan adalah name, method dan action.
Properti “name” di pergunakan untuk mendefinikan nama dari form yang kita buat yang di pergunakan untuk membedakan antara sebuah form dengan form yang lain. Properti method kita pergunakan untuk mendefinisikan metode pengiriman data yang kita lakukan, pada method ini ada 2 macam metode pengiriman yang kita pergunakan yaitu metode “post” dan “get”. Kemudian properti action yang di pergunakan untuk mendefinisikan file yang selanjutnya untuk mengelola hasil dari file input tersebut.
Dalam pemrograman untuk web kita tidak mungkin lepas dari script yang bernama HTML (Hypertext Markup Language). HTML ini adalah merupakan suatu bahasa penandaan yang di pergunakan browser dalam menampilkan sebuah informasi pada halaman web. Sedangkan Javascript adalah sebuah bahasa program yang berada pada sisi crient yang di pergunakan untuk melakukan dinamisasi tampilan halaman sebuah web.
3.1 HTML dasar
Di dalam Penulisan script HTML di apit dengan tanda lebih kecil (<) dan tanda lebih besar (>) yang di sebut dengan tag dan hampir setiap script HTML kebanyakan akan saling berpasangan-pasangan atau dengan kata lain ada perintah untuk pembukan dan ada penutup. Pada penulisan informasi pada halaman web kita dapat menggunakan editor apapun mulai dari notepad pada windows, gedit pada linux ataupun editor yang lain.
Penulisan HTML pada intinya dapat di bagi menjadi dua bagaian yaitu bagaian header yang di pergunakan untuk menangani informasi informasi bawaan dari halaman web dan bagaian body yang di pergunakan untuk menampilkan informasi yang akan di tampilkan dalam halam web. Bentuk penulisan dari script HTML dapat di lihat pada latihan 1.
Latihan 1a (HTML-Dasar)
<html>
<head>
<title> Latihan 1 HTML </title>
</head>
<body>
</body>
</html>
Latihan 1b (HTML-Dasar)
<html>
<head>
<title> Latihan 1 HTML </title>
</head>
<body>
Latihan 1 HTML
</body>
</html>
Pada latihan 1a di atas jika di jalankan akan menghasilkan informasi kosong atau tidak berisi apa-apa tetapi header yang tertulis pada layar browser akan berisi “ Latihan 1 HTML”. Sedang pada latihan 1b kondisi header sama dengan latihan 1a tetapi pada halaman browser akan muncul kata “Latihan 1 HTML”.
Latihan 2 (HTML-Properti)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body text='white' bgcolor='red'>
ini adalah isian properti di dalam body
</body>
</html>
pada latihan 2 di sini kita akan membahas properti-properti yang ada pada body. Sebagai contoh pada latihan dua tersebut kami menampilkan background merah (bgcolor='red') pada halaman HTML dan mengubah warna tulisan menjadi putih (text='white'). Dan untuk properti yang lain pada tag body ini silahkan lihat tabel di bawah ini.
| No | Nama properti | Fungsi |
| 1 | ALINK | Menyatakan warna dari link yang sedang aktif |
| 2 | BACKGROUND | Menyatakan file gambar yang digunakan sebagai latar belakang |
| 3 | BGCOLOR | Menyatakan warna yang digunakan sebagai latar belakang |
| 4 | BGPROPERTIES | Jika di set fixed, membuat suatu watermark yaitu background tetap |
| 5 | LEFTMARGIN | Mengatur margin kiri dari isi dokumen dengan ukuran pixel |
| 6 | LINK | warna dari link yang belum pernah dikunjungi |
| 7 | TEXT | Mengatur warna teks dokumen web |
| 8 | TOPMARGIN | Mengatur margin atas dari isi dokumen dengan ukuran pixel |
| 9 | VLINK | Warna link yang pernah dikunjungi |
Latihan 3 (HTML-Hn,Br,P)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah untuk judul
<h1> Judul 1 </h1>
<h2> Judul 2 </h2>
<h3> Judul 3 </h3>
<h4> Judul 4 </h4>
<h5> Judul 5 </h5>
<h6> Judul 6 </h6>
ini adalah halaman 1 <br> dan ini ada di baris ke 2
<p> ini adalah sebuah paragrap </p>
</body>
</html>
Pada latihan ke tiga ini kita akan membahas tag header. Tag ini di pergunakan untuk memberikan sebuah informasi header atau judul sebuah document dimana tag <h> ini memiliki tingkatan sampai dengan 6 (<h1> sampai dengan <h6>) diman tiap tingkatan memiliki besar huruf yang berbeda. Sedang tag yang kedua yang kita bahas pada latihan 3 ini adalah tag <br> yang berfungsi untuk ganti baris yang baru pada sebuah halaman web. Untuk kita ketahui bahwa sewaktu kita menuliskan script HTML, apabila kita membuat sebuah informasi atau document HTML berapapun enter (untuk ganti garis yang baru) yang kita lakukan tidak akan di hitung. Dan tag yang ke tiga yang kita bahas pada latihan 3 ini adalah tag <p> yang di pergunakan untuk membuat sebuah paragrap pada sebuah dokumen atau informasi yang kita buat.
Latihan 4 (HTML-table)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah table
<table>
<tr>
<td>nama</td><td>alamat</td>
</tr>
<tr>
<td>ali</td><td>sidoarjo</td>
</tr>
<tr>
<td>jamal</td><td>sidoarjo</td>
</tr>
<tr>
<td>muksin</td><td>sidoarjo</td>
</tr>
</table>
</body>
</html>
pada latihan 4 ini kita membahas sebuah tabel. Dimana untuk membuat sebuah tabel kita memerlukan tag <table> dan di tutup dengan tag </table>, di dalam tag <table> ini di dalamnya di gunakan tag <tr> untuk membuat sebuah baris dan tag <td> untuk membuat sebuah colom.
Latihan 5 (HTML-pre, center)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
<center>
ini ada di tengah halaman
</center>
ini di buat dengan tanpa pre
nama : ali
Alamat : sidoarjo
<pre>
ini di buat dengan pre bandingkan dengan yang di atas
nama : ali
Alamat : sidoarjo
</pre>
</body>
</html>
pada latihan ke 5 ini kita membahas tag <center dan tag <pre> dimana fungsi dati tag <center> adalah di pergunakan untuk membuat align center atau memposisikan data atau informasi kita berada di tengah, sedangkan tag <pre> di pergunakan untuk mengabaikan kondisi halaman sebuah web (seperti enter, spasi dll) sehingga tampilan kita sama dengan sewaktu kita merancang halaman web tersebut.
1.
Form
Form di dalam sebuah program memiliki kedudukan yang sangat penting, dengan adanya sebuah form maka seorang user dapat saling berinteraksi dengan aplikasi yang kita buat. Meski pada dasarnya dalam program HTML ini sebuah form dalam pengelolaanya memerlukan bahasa pemrograman yang lain sebagai pengelola informasi yang di inputkan padanya.
Latihan 6a (HTML-form1)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah halaman form 1
<form method=post name=form1 action=form2>
nama :<input type=text nama=txtnama>
password :<input type=password name=txtpassword>
jenis kelamain :<br>
<input type=radio name=radiogroup1 value=laki-laki> laki-laki
<input type=radio name=radiogroup1 value=perempuan> Perempuan
hoby :<br>
<input type=checkbox name=checkbox1 value=makan> makan
<input type=checkbox name=checkbox1 value=baca> baca
<input type=checkbox name=checkbox1 value=tidur> tidur
alamat : <br>
<textarea name=txtalamat> </textarea>
list :
<select name=seleksi>
<option value=1> satu </option>
<option value=2> dua </option>
</select>
<input type=submit name=setuju value=ok>
<input type=button name=tombol value=bebas>
<input type=reset name=kosong value=blank>
</form>
</body>
</html>
Latihan 6b (HTML-form2-sekilasPHP)
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
ini adalah halaman ke dua
<?php
$nama = $_post[txtnama];
$jenis = $_post[radiogroup1];
$alamat = $_post[txtalamat];
echo "nama : $nama";
echo "jenis Kelamin : $jenis";
echo "Alamat : $alamat";
?>
</body>
</html>
Pada latihan 6 ini kita membahas materi form. Dalam tag form terdapat properti yang harus kita gunakan agar kita dapat berhubungan dengan file-file yang di pergunakan untuk mengelola input yang kita masukkan di dalam tag <form> yang di ambil tag <input>. Properti minimal yang kita pergunakan adalah name, method dan action.
Properti “name” di pergunakan untuk mendefinikan nama dari form yang kita buat yang di pergunakan untuk membedakan antara sebuah form dengan form yang lain. Properti method kita pergunakan untuk mendefinisikan metode pengiriman data yang kita lakukan, pada method ini ada 2 macam metode pengiriman yang kita pergunakan yaitu metode “post” dan “get”. Kemudian properti action yang di pergunakan untuk mendefinisikan file yang selanjutnya untuk mengelola hasil dari file input tersebut.
Comments