Bismillahirrahmanirrahim
Assalamualaikum Wr.Wb
Lab
Tag <br>
Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah
baris. Contoh :
<HTML>
<HEAD>
<TITLE>Tag BR</TITLE>
</HEAD>
<BODY>
selamat Belajar HTML<BR>
Semoga Sukses !
</BODY>
</HTML>
Tag <p>
Tag <P> digunakan untuk membuat paragraf. Contoh
<HTML>
<HEAD>
<TITLE>Contoh Paragraf</TITLE>
</HEAD>
<BODY>
Pesona Tanaman Hias<P>
Keindahan tanaman hias<BR>
Membawa suatu pesona tersendiri<BR>
Warna-warni bunga<BR>
aneka rupa corak daun<BR>
membuat orang dengan senang hati mengoleksinya
</BODY>
</HTML>
Seperti halnya pada tag <P>, tag judul atau heading ini
juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada
ALIGN adalah :
- LEFT (default), mengatur teks rata kiri terhadap halaman
- RIGHT, mengatur teks rata kanan terhadap halaman
- CENTER, menempatkan judul di tengah-tengah layar pada baris
yang bersangkutan
- JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya
terlihat untuk teks yang sangat
panjang.
Contoh :
<HTML>
<HEAD>
<TITLE>Atribut ALIGN</TITLE>
</HEAD>
<BODY>
<H1>Pesona Tanaman Hias</H1>
<H1 ALIGN = "LEFT">Pesona Tanaman Hias</H1>
<H1 ALIGN = "RIGHT">Pesona Tanaman Hias</H1>
<H1 ALIGN = "CENTER">Pesona Tanaman Hias</H1>
</BODY>
</HTML>
Tag <HR>
Untuk mempercantik halaman, seringkali pembuat
dokumen Web menambahkan garis horisontal. Garis ini
sebenarnya dapat dibuat dengan mudah, yakni dengan
menyertakan tag
<HR>. Contoh :
<HTML>
<HEAD>
<TITLE>Tag HR</TITLE>
</HEAD>
<BODY>
<H2>Aneka Tanaman Hias</H2>
<HR>
Aglaonema atau Sri rejeki
<HR> Begonia
<HR> Bromelia
<HR>dll
<HR>
</BODY>
</HTML>
Daftar atribut tag <HR>
Atribut
SIZE
WIDTH
ALIGN
Keterangan
Menentukan ketebalan garis
Menentukan lebar garis
Menentukan peletakkan teks dalam baris
<H1>KEBUN PESONA</H1>
<HR SIZE = "10">
Jl. Solo Km 14<BR> Yogyakarta<BR> Indonesia<BR>
</BODY>
</HTML>
Tag <CENTER>
Untuk menengahkan suatu teks, bisa juga digunakan tag
<CENTER>. Tentu saja, untuk mengakhiri penengahan teks
(yakni agar teks berikutnya tidak ditengahkan), perlu disertakan
</CENTER>. Contoh :
<HTML>
<HEAD>
<TITLE>Tag CENTER</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Berbagai Jenis Keladi
yang mempesona:</H2>
Red Flash
<BR>Red Fire
<BR>
Fannie Munson
<BR>
Pink Beauty
<BR>
Hilo Beauty
<BR>
Jackie Suthers
<BR></CENTER>*****
</BODY></HTML>
MENGATUR TEKS
Mengatur Teks Secara Fisik
keterangan
Teks ditampilkan dalam keadaan ditebalkan
Teks ditampilkan dengan ukuran lebih besar dari
Teks ditampilkan dalam keadaan miring
Teks ditampilkan dengan ukuran lebih kecil dari
Teks ditampilkan sebagai subskrip
Teks ditampilkan sebagai superskrip
Teks ditampilkan dalam bentuk seperti ketikan
Teks ditampilkan dengan diberi garis bawah
Contoh :
<HTML>
<HEAD>
<TITLE>Memformat Secara Fisik</TITLE>
</HEAD>
<BODY>
<SMALL>Teks dengan Tag BIG</BIG><BR>
<HR>
Teks Normal<BR>
<B>Teks dengan tag B</B><BR>
<I>Teks dengan tag I</I><BR>
Normal<SUB>Teks dengan tag SUB</SUB><BR>
Normal <SUP>Teks dengan tag SUP</SUP><BR>
<TT>Seperti ketikan mesin ketik</TT><BR>
<U>Teks diberi garis bawah</U><BR>
<U><B><I>Tebal, miring, dan diberi garis bawah</I></B></U>
</BODY>
</HTML>
UKURAN FONT
Nama Warna
aqua
black
blue
fuchsia
gray
green
lime
maroon
RGB
00FFFF
000000
0000FF
FF00FF
808080
008000
00FF00
800000
Nama Warna
navy
olive
purple
red
silver
teal
yellow
white
Contoh :
<HTML>
<HEAD>
<TITLE> Warna Bagian 1</TITLE>
</HEAD>
<BODY>
Normal<BR>
<FONT COLOR = aqua >aqua</FONT><BR>
<FONT COLOR = black >black</FONT><BR>
<FONT COLOR = blue >blue</FONT><BR>
<FONT COLOR = fuchsia >fuchsia</FONT><BR>
<FONT COLOR = gray >gray</FONT><BR>
<FONT COLOR = green >green</FONT><BR>
<FONT COLOR = lime >lime</FONT><BR>
<FONT COLOR = maroon >maroon</FONT><BR>
<FONT COLOR = navy >navy</FONT><BR>
<FONT COLOR = olive >olive</FONT><BR>
<FONT COLOR = purple >purple</FONT><BR>
<FONT COLOR = red >red</FONT><BR>
<FONT COLOR = silver >silver</FONT><BR>
<FONT COLOR = teal >teal</FONT><BR>
<FONT COLOR = yellow >yellow</FONT><BR>
</BODY>
</HTML>
RGB
000080
808000
800080
FF0000
C0C0C0
008080
FFFF00
FFFFFF
Membuat Link
Hyperlink ke Halaman Web
Untuk membuat link ke halaman lain, digunakan pasangan
tag <A></A> atau yang biasa yang disebut tag
jangkar atau anchor tag. Bentuk paling sederhana
penggunaan tag jangkar adalah sebagai berikut :
<A HREF = URL>Label</A>
Dalam hal ini, URL (Uniform Resource Locator) dapat
berupa alamat suatu dokumen Web, berkas grafik, ataupun
menyatakan suatu protokol lain (misalnya FTP).
Untuk mempraktikan link, buatlah terlebih dulu dua buah
berkas HTML bernama halx.htm dan
haly.htm.
File halx.htm :
<HTML>
<HEAD>
<TITLE>Halaman X</TITLE>
</HEAD>
<BODY>
<H1>Halaman X</H1>
</BODY>
</HTML>
File haly.htm :
<HTML>
<HEAD>
<TITLE>Halaman Y</TITLE>
</HEAD>
<BODY>
<H1>Halaman Y</H1>
</BODY>
</HTML>
Sekarang marilah membuat kode HTML yang
menyediakan link ke dua buah kode HTML di depan.
File halutama.htm :
<HTML>
<HEAD>
<TITLE>Halaman Utama</TITLE>
</HEAD>
<BODY>
<H1>Halaman Utama</H1>
Silahkan klik pada link-link berikut:<BR>
<A HREF = halx.htm>Halaman X</A><BR>
<A HREF = haly.htm>Halaman Y</A><BR>
</BODY>
</HTML>
Menggunakan Tabel
Tag-tag yang terkait dengan pembuatan table :
Tag
<TABLE></TABLE>
<CAPTION>
</CAPTION>
<TR></TR>
<TH></TH>
<TD></TD>
Contoh :
Keterangan
Mengawali dan mengakhiri sebuah table
Menentukan judul pada table
Membuat sebuah baris dalam table
Membuat judul kolom
Membuat sebuah sel data
Contoh :
Contoh :
Menambahkan Gambar
Mengatur Gambar Latar Belakang
Terkadang kita jumpai halaman Web dengan latar belakang
berupa suatu gambar. Latar belakang seperti itu
kadangkala mempercantik tampilan halaman Web. Untuk
menyertakan suatu gambar sebagai latar belakang, dapat
digunakan atribut BACKGROUND pada tag <IMG>.
Bentuknya sebagai berikut :
<BODY BACKGROUND = NamaFileGambar>
Contoh :
<BODY BACKGROUND = Caladium.jpg>
Menampilkan Gambar
Untuk menampilkan gambar, digunakan tag <IMG>.
Bentuk paling sederhana dari tag
<IMG> :
<IMG SRC = nama_gambar>
Contoh :
<IMG SRC = keladi.jpg>
Menggunakan FORM
Dasar Penggunaan Form
Form dibentuk dengan menggunakan pasangan tag
<FORM> dan </FORM>. Dua atribut yang umum
digunakan pada tag <FORM> berupa ACTION dan
METHOD.
ACTION menentukan URL yang akan dijalankan
dan menerima semua masukan pada formulir. Jika
ACTION tidak disebutkan, informasi akan dikirimkan ke
URL yang sama dengan halaman web itu sendiri.
METHOD digunakan untuk menentukan bagaimana
informasi dikirim ke URL yang disebutkan
dalam ACTION. Nilai yang umum untuk atribut ini
berupa GET dan POST. POST membuat informasi
dikirimkan secara terpisah dengan URL, sedangkan GET
akan membuat informasi dikirim menjadi satu dengan
URL.
Contoh penggunaan pasangan tag <FORM> dan
</FORM> :
<FORM ACTION = info.htm MTHOD = POST>
</FORM>
Atribut
NAME
keterangan
Menentukan nama data. Atribut ini diperlukan oleh semua jenis
masukan, kecuali
SUBMIT dan RESET
SIZE
VALUE
CHECKED
TYPE
Tipe TEXT
Tipe TEXT bermanfaat untuk memasukkan data
seperti nama orang atau alamat seseorang. Contoh
pemakaian :
<INPUT TYPE = TEXT NAME = nama_pegawai SIZE = 20
MAXLENGTH = 20>
File info.htm :
Tipe PASSWORD
Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag
<INPUT> akan membuat setiap karakter yang diketikkan oleh
pemakai pada field ini disembunyikan (misalnya dengan diganti
tanda * untuk setiap karakter yang diketikkan pemakai).
Contoh:
Tipe CHECKBOX
Tipe CHECKBOX berguna untuk membuat kotak cek.
Kotak cek adalah suatu bentuk masukan yang
memungkinkan pemakai mencentang atau tidak
mencentang kotak tersebut dengan mengklik mouse pada
saat penunjuk mouse menunjuk kotak cek.
Kotak cek paling tidak melibatkan atribut NAME. Adapun
atribut CHECKED bersifat opsional, yang digunakan
untuk memberi nilai awal berupa tanda centang. Contoh :
Tombol Radio
Tombol radio digunakan dalam bentuk 2 tombol atau lebih
MODUL 1
Variable dan operator
Operator
Operator membuat suatu nilai menjadi penting. Ada
beberapa jenis operator yang berguna dalam pemrogaman
menggunakan PHP. Ada operator matematika, assignment,
perbandingan, logika, increment, decrement.
Makna
5+9
Penjuamlahan
9-2
Pengurangan
3*4
Perkalian
9/3
Pembagian
10%3
Modulus
$pembagian=9/3;
$modulus=10%3;
echo"penjumlahan dari 5+9=$penjumlahan <br>";
echo"pengurangan dari 9-2=$pengurangan <br>";
echo"perkalian dari 3*4=$perkalian <br>";
echo"pembagian dari 9/3=$pembagian <br>";
echo"modulus dari 10%3=$modulus <br>";
?>
False
!=
True
<
$a<$b
True
>
$a>$b
False
<=
$a<=$b
True
>=
$a>=$b
Contoh
+=
$jumlah += 2
$jumlah = $jumlah+2
-=
$jumlah -= 2
$jumlah = $jumlah-2
*=
$jumlah *= 2
$jumlah = $jumlah*2
/=
$jumlah /= 2
$jumlah = $jumlah/2
%=
$jumlah %= 2
$jumlah = $jumlah%2
.=
Contoh operator ;
<html>
<head>
<title>Operator & Variabel</title>
</head>
<body>
<h1>Penjumlahan</h1>
MODUL II
PENGUJIAN (if)
Fungsi IF
Fungsi IF ELSE
MODUL III
PENGULANGAN (FOR)
if(isset($_POST['go'])){
$nilai=$_POST['nilai'];
for ($i= 1; $i <= $nilai ; $i++)
{
echo "Nilai Ke ".$i;
echo "<br />";
}
}
?>
</body>
</html>
MODUL IV
FUNGSI
Fungsi (atau Function) dalam bahasa pemograman adalah
kode program yang dirancang untuk menyelesaikan sebuah
tugas tertentu, dan merupakan bagian dari program utama.
Kita dapat membuat fungsi sendiri, atau menggunakan fungsi
yang dibuat oleh programmer lain.
<body>
<h3>Pengujian</h3>
<form action="" method="POST">
Input nilai 1 : <input type="number" name="nilai1" value="<?php echo
$_POST['nilai1'];?>"><br>
Input nilai 2 : <input type="number" name="nilai2" value="<?php echo
$_POST['nilai2'];?>"><br>
Input nilai 3 : <input type="number" name="nilai3" value="<?php echo
$_POST['nilai3'];?>"><br>
<select name="pilih">
<option value="1" <?php if($_POST['pilih']==1) ?>>Paling Besar</option>
<option value="2" <?php if($_POST['pilih']==2) ?>>Paling Kecil</option>
</select><br>
<input type="submit" value="Go" name="go">
</form>
<?php
if(isset($_POST['go'])){
function terbesar($x,$y,$z){
if($x>$y && $x>$z){
echo $x;
} else if($y>$z && $y>$x) {
echo $y;
} else {
echo $z;
}
}
function terkecil($x,$y,$z){
if($x<$y && $x<$z){
echo $x;
} else if($y<$z && $y<$x) {
echo $y;
} else {
echo $z;
}
}
$nilai1=$_POST['nilai1'];
$nilai2=$_POST['nilai2'];
$nilai3=$_POST['nilai3'];
$pilih=$_POST['pilih'];
if($pilih==1){
echo terbesar($nilai1, $nilai2, $nilai3);
} else {
echo terkecil($nilai1, $nilai2, $nilai3);
}
}
?>
</body>
</html>