Top Banner
50

TIK kelas xi

Aug 06, 2015

Download

Documents

pelajaran TIK kelas xi
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: TIK kelas xi
Page 2: TIK kelas xi

BAB ISTRUKTUR HTML

HTML dan PHP TIK SMAN 5 Surabaya

HTML (Hypertext Markup Language) adalah sebuah format data yang pada umumnya digunakan sebagai dokumen untuk membangun sebuah halaman web. Dokumen HTML memungkinkan kita untuk mengisikan teks, gambar, audio, video di dalam halaman web. Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan teks tersebut.

Untuk mengawali membuat sebuah dokumen HTML kita harus tahu terlebih dahulu tentang struktur dokumen HTML. Secara umum HTML tersusun dari 3 komponen yaitu:

Elemen HTML Heading dokumen (kepala)Body dokumen (badan)

Berikut adalah contoh HTML sederhana:

Latihan 1.1

1.1 Elemen HTML <html> 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 incase sensitive. Artinya, <HTML> akan sama dengan <html> atau <Html>. * Istilah Penting

a. TagTag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII

sehingga membentuk file html. Setiap tag memiliki fungsi sendiri dan selalu dimulai dengan tanda "<" dan ditutup dengan tanda ">", misalnya <B>,<CENTRE>, <I> dan lain sebagainya. Kebanyakan tag memiliki pasangan penutup yang harus digunakan untuk menutup tag sebelumnya. Tag penutup tidak harus diletakkan satu baris dengan tag pembuka, melainkan dapat diletakkan dimana saja dan selalu dimulai dengan tanda "</" dan ditutup dengan tanda ">", misalnya </B>, </CENTRE>,</I> dan lain sebagainya. Contoh:<B>Home Page</B> ---> oleh browser akan ditampilkan sebagai Home Page<I>Home Page</I> ---> oleh browser akan ditampilkan sebagai Home Page

b. Atribut

2

<HTML><HEAD><TITLE>html pertamaku</TITLE></HEAD><BODY>Hello world !</BODY></HTML>

Page 3: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

Sebuah tag bisa memiliki satu atribut atau lebih. Atribut digunakan untuk mengendalikan kerja tag bersangkutan. Berikut adalah 3 macam atribut yang mungkin dimiliki oleh sebuah tag:

Atribut nama, misalnya ALIGN, WIDTH dll.Atribut tanda sama dengan (=).Atribut nilai, misalnya '60', "80%","red", "index.html" dll.

Atribut nilai boleh juga ditulis tanpa tanda kutip, karena itu tiga contoh dibawah ini sama benarnya:<HR ALIGN=center WIDTH=80><HR ALIGN="center" WIDTH="80"><HR ALIGN='center' WIDTH='80'>

1.2 Elemen HEAD <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>. Header menjadi komponen yang cukup penting untuk sebuah web. Didalam elemen head terdapat beberapa tag antara lain:

<TITLE>Adalah tag yang digunakan untuk memberi judul di pojok kiri atas halaman browser.

Formatnya: <TITLE>....</TITLE>

<BASE>Digunakan untuk mempersingkat penulisan URL dengan memberikan hubungan

relatif pada link dari dokumen. Dengan menggunakan base, seorang dapat mengikuti link dari dokumen anda sekalipun dokumen telah berpindah tempat. Contoh : <base href=”www.ia.net/~rmeegan”>

<LINK>Tidak hanya terdapat dalam elemen head saja tapi juga dalam elemen body. Untuk

lebih lengkappnya terdapat bahasan sendiri.

<META>Tag yang digunakan untuk memberi informasi lain yang bermanfaat bagi browser

atau server selain judul. Adapun atribut dan fungsinya antara lain:

Atribut FungsiHTTP-EQUIV Menghubungkan elemen META ke respon protocol tertentuNAME Untuk menambahlan keterangan elemen. Jika atribut ini tidak ada

diasumsikan sama dengan HTTP-EQUIVURL Mendefinisikan target dokumenCONTENT Menunjukkan respon nilai dari properti

*) untuk meta, base, link tidak begitu penting untuk sementara

Latihan 1.2

3

Page 4: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML><HEAD><TITLE>General Officers of the US Army</TITLE><LINK HREF=”mailto:[email protected]” REV=”made”><BASE HREF=”http://www.ia.net/~rmeegan/civil”><META HTTP-EQUIV=”EXPIRES” CONTENT=”31 Dec 1997”><META NAME=”Last Modified” CONTENT=”16 Dec 1996”></HEAD><BODY>I think the war is trash.</BODY></HTML>

*) untuk link, base dan meta tidak akan tampak di layar

1.3 Elemen BODY <BODY>Adalah elemen yang wajib ada dalam HTML karena di dalam elemen BODY semua

isi halaman page dituliskan. Untuk mendefinisikan body harus diketikan tag <BODY> dan ditutup dengan tag </BODY> dibawah tag HEAD. Adapun yang dibahas pada bab ini hanya atribut dari BODY itu sendiri sedangkan tag dari BODY ini merupakan bahasan terbesar dalam buku ini yang akan dibahas di bab berikutnya. Macam-macam atribut tag body antara lain:

Atribut FungsiAlink Menyatakan warna link yang sedang aktifBackground Menytakan file gambar yang digunakan sebagai latar belakangBgcolor Menyatakan warna yang digunakan sebagai latar belakangBgproperties Jika diset fixed, membuat suatu watermark yaitu background tetap

(tidak ikut menggulung)Leftmargin Mengatur margin kiri dari isi dokumen dengan ukuran pixelLink Warna dari link yang belum pernah dikunjungiText Mengatur warna teks dokumen webTopmargin Mengatur margin atas dari isi dokumen dengan ukuran pixelVlink Warna link yang pernah dikunjugi

Adapun warna yang digunakan dalam dokumen HTML menggunakan kode heksadesimal atau nama RGB. Berikut kami sajikan tabel warnanya:

Warna Kode HeksadesimalBlack #000000Maroon #800000Green #008000Olive #808000Navy #000080Purple #800080Teal #008080Gray #808080Silver #C0C0C0Red #FF0000Lime #00FF00Yellow #FFFF00Blue #0000FFFuchsia #FF00FFAqua #00FFFF

4

Page 5: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

White #FFFFFF

Latihan 1.3

<HTML><HEAD><TITLE>Hallo Surabaya</TITLE></HEAD><BODY BACKGROUND=”nama.jpg” BGCOLOR=”black” TEXT=”yellow” LINK=”blue” ALINK=”green” VLINK=”red”>Hallo-hallo Surabaya bagaimana kabarmu?<br> <A HREF=”http://sma5-sby.net”>Baik-baik saja</A> <A HREF=”http://google.co.id”>Terharu</A> </BODY></HTML>

*) catatan: anda harus meletakkan file nama.jpg di folder yang sama dengan tempat file html anda disimpan.

1.4 Membuat, Menyimpan, dan Menjalankan Dokumen HTML Untuk membuat dokumen HTML di Ubuntu adalah dengan menggunakan program

Geany. Didalam geany lah semua rumusan HTML dituliskan. Untuk menyimpan, seperti biasa masuk FileSave As kemudian simpan dengan

nama.html dan simpan di dalam folder public_html yang ada di dalam folder smala. Untuk menjalankannya menggunakan firefox web broser atau ice weasel. Semua

file yang kita simpan di folder public_html akan dapat dibuka dengan browser yang berada di alamat localhost. Jadi ketikkan di tempat urlnya localhost maka didalamnya akan ada file kita tadi. Kemudian pilih yang akan kita jalankan dan kita bisa melihat hasilnya. Selamat mencoba dan silahkan kerjakan seluruh latihan yang ada di bab ini.

”Tiada kesuksesan yang dapat diraih kecuali dengan kesungguhan, dan sebaik-baik kesungguhan itu dimulai dari rasa cinta. Jadi, jika ingin sukses mengerjakan sesuatu maka

mulailah untuk mencintai perkerjaan itu.”

5

Page 6: TIK kelas xi

BAB IITEKS DALAM PARAGRAF

HTML dan PHP TIK SMAN 5 Surabaya

Teks Dalam HTML tidak sesederhana seperti yang dibayangkan. Banyak komponen yang menyertainya agar teks ditampilkan sesuai dengan yang dikehendaki. HTML menyediakan berbagai macam elen antara lain :

2.1 Paragraf 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.

Nama FungsiLeft Rata kiriRight Rata kananCenter Rata Tengah

Latihan 2.1

<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>

2.2 Berpindah Baris Untuk melakukan pindah baris dalam HTML digunakan tag <BR>.

Latihan 2.2

6

Page 7: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML><HEAD><TITLE>Ganti Baris</TITLE></HEAD><BODY BGCOLOR=”black” TEXT=”yellow”>Baris Pertama <BR>Baris Kedua <BR>Baris Ketiga <BR><BR><BR>Begitulah cara berganti baris </BODY></HTML>

2.3 HeadingMerupakan 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. Secara umum heading menggunakan tag <H> dan mempunyai atribut yang sama dengan P yaitu ALIGN.

Latihan 2.3

<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>

2.4 Garis Pemisah HorisontalUntuk memberi garis pemisah antara satu baris dengan baris lainnya, gunakan

elemen <HR>. Elemen ini akan membuat garis horisontal sepanjang lebar jendela browser. Atribut yang menyertai adalah :Atribut FungsiALIGN Rataan paragrafWIDTH Untuk mengatur panjang garis horizontal yang dapat ditentukan

dengan nilai pixel atau persenSIZE Untuk mengatur ketebalan garis horizontal mempunyai nilai dalam

satuan pixelNOSHADE Menampilkan garis horizontal tanpa baying-bayang 3-DCOLOR Memberi warna pada garis horisontal

Latihan 2.4

7

Page 8: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML> <HEAD> <TITLE>Pemakaian Tag HR</TITLE> </HEAD> <BODY bgcolor=”lightgrey”> <H1 ALIGN=”center”>Pesawat Ruang Angkasa</H1> <BR> <H2 ALIGN=”left”>Soviet</H2> <BR> Vostok<BR> Soyuz<BR> <HR WIDTH=”50%” SIZE=”6” ALIGN=”left” COLOR=”red”> <H2 ALIGN=”left”>Amerika</H2> <BR> Mercury<BR> Apollo<BR> <HR WIDTH=”50%” SIZE=”6” ALIGN=”left” COLOR=”navy”></BODY> </HTML>

2.5 DividerMenngunakan tag <DIV>...</DIV> untuk membagi dokumen HTML dalam hierarki

yang terstruktur. Teks yang dikelilingi <DIV>...</DIV> akan diformat menurut atribut ALIGN yang ditentukan didalamnya.

Latihan 2.5

<HTML> <HEAD> <TITLE>Pembagian Paragraf</TITLE> </HEAD> <BODY BGCOLOR=”lightgrey”> <DIV ALIGN=”center”> <H1>Header rata tengah</H1><BR> Tulisan berada diatas baris teks<BR> <P ALIGN=”right”>baris teks ini rata kanan</P> </DIV> <DIV STYLE=”color:blue”> <H1>Heading warna biru</H1> <P>Teks dalam paragraf berwarna biru</P> </DIV></BODY> </HTML>

2.6 BlockuoteTag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan

menggunakan tag ini maka Anda akan mendapati browser menampilkan teks yang menjorok ke dalam (mengidentifikasi teks).

8

Page 9: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML> <HEAD <TITLE>Blockquote</TITLE> </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>

2.7 Preformatted TextPreformatted text memerintahkan untuk menampilkan teks persis seperti yang

diketikkan dalam dokumen HTML . Dengan demikian masalah pengetikan pada baris baru dan penambahan spasi dapat diatasi. Tag yang digunakan adalah <PRE>...</PRE>.

Latihan 2.7

<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>

9

Page 10: TIK kelas xi

BAB IIIFORMAT KARAKTER DAN LINK

HTML dan PHP TIK SMAN 5 Surabaya

”Air mengalir dari tempat yang tinggi menuju tempat yang rendah, seperti itulah perumpamaan ilmu. Ilmu tidak akan mengalir menuju orang yang tinggi hati (sombong)

tetapi ilmu itu kan mengalir menuju orang yang memiliki kerendahan hati.”

3.1 Physical FormattingAdalah salah suatu jenis format yang diberikan pada teks tanpa tergantung

jenis dari elemen dasar teks tersebut. Tag-tag yang bisa dikategorikan dalam physical formatting adalah:Tag Fungsi<B>...</B> Menebalkan teks<I>...</I> Memiringkan teks<U>...</U> Menggaris bawahi teks<S>...</S> Membuat efek coretan pada teks<BLINK>...</BLINK> Membuat teks tampil berkedip<TT>...</TT> Menampilkan teks dalam font type-writer<BIG>...</BIG> Memperbesar teks<SMALL>...</SMALL> Memperkecil teks<SUB>...</SUB> Membuat teks subscript<SUP>...</SUP> Mebuat teks superscript

Latihan 3.1

<HTML> <HEAD> <TITLE>Physical Formatting</TITLE> </HEAD> <BODY> <B>teks tebal</B> <BR><I>teks miring</I> <BR><U>teks bergaris</U> <BR><S>teks tercoret</S> <BR><BLINK>teks berkelip</BLINK> <BR><TT>teks type writer</TT> <BR><BIG>teks diperbesar</BIG> <BR><SMALL>teks diperkecil</SMALL> <BR>H<SUB>2</SUB>O <BR>X<SUP>3</SUP>Y <BR></BODY></HTML>

3.2 Elemen FONTHTML menyediakan tag FONT yang digunakan untuk mengubah jenis, warna dan

ukuran suatu teks. Pemakain tag ini diawalai dengan <FONT> dan diakhiri dengan </FONT>. Dengan elemen ini teks yang akan ditmapilkan dapat diatur dengan bantuan atribut FACE, SIZE dan COLOR.

SIZEJenis atribut font yang digunakan untuk menentukan ukuran font yang akan dipakai

Latihan 3.2

10

Page 11: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML> <HEAD> <TITLE>Font</TITLE> </HEAD> <BODY>Ini tipe huruf normal(Times New Roman).<BR>Ini<FONT FACE="Algerian" COLOR=”yellow”>ALGERIAN</FONT>.<BR>Ini<FONT FACE="Comic Sans MS" COLOR=”red”>Comic Sans MS</FONT>.<BR>Ini<FONT FACE="Haettenschweiler" COLOR=”green”> Haettenschweiler</FONT>.<BR>Ini<FONT FACE="Broadway" COLOR=”purple”>Broadway</FONT>.<BR>Ini<FONT FACE="Diploma" COLOR=”brown”>DIPLOMA</FONT>.<BR>Ini<FONT FACE="Tahoma" COLOR=”blue”>Tahoma</FONT>.<BR>Ini<FONT FACE="Harlow" COLOR=”cyan”>HARLOW</FONT>.</BODY></HTML>

FACE dan COLORJenis atribut font yang digunakan untuk menentukan jenis dan warna font yang

akan dipakai. Latihan 3.2.1

<HTML> <HEAD> <TITLE>Face dan Color</TITLE> </HEAD> <BODY>Ini tipe huruf normal(Times New Roman).<BR>Ini<FONT FACE="Algerian" COLOR=”yellow”>ALGERIAN</FONT>.<BR>Ini<FONT FACE="Comic Sans MS" COLOR=”red”>Comic Sans MS</FONT>.<BR>Ini<FONT FACE="Broadway" COLOR=”purple”>Broadway</FONT>.<BR>Ini<FONT FACE="Diploma" COLOR=”brown”>DIPLOMA</FONT>.<BR>Ini<FONT FACE="Tahoma" COLOR=”blue”>Tahoma</FONT>.<BR>Ini<FONT FACE="Harlow" COLOR=”cyan”>HARLOW</FONT>.</BODY></HTML>

3.3 Basefont - baoikan fontAdalah tag yang digunakan untuk mengubah settingan default dari font.

Latihan 3.3

<HTML> <HEAD> <TITLE>Basefont</TITLE> </HEAD> <BODY><BASEFONT SIZE="3" COLOR="blue" FACE="arial">Semua teks disini secara default akan ditampilkan dengan tipe huruf Arial berwarna biru dengan ukuran font 3</BODY></HTML>

3.4 Karakter KhususSebagai tambahan, ternyata tidak semua karakter di keyboard kalau kita kita

tuliskan dalam HTML bisa dibaca ketika kita menjalankan web browser. Ada beberapa karakter yang harus diwakilkan dengan notasi khusus antara lain:

11

Page 12: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

Selain karakter diatas, ada beberapa karakter lain yang juga sering digunakan a.l.:

3.5 Membuat Teks BerjalanTeks berjalan dapat dibuat dengan tag <MARQUEE>..</MARQUEE>. Atribut

yangumum digunakan adalah:Atribut FungsiBGCOLOR="warna" Untuk mengatur warna background teksDIRECTION="left | right" Mengatur arah gerakan teksBEHAVIOR="scroll |slide | alternate"

Mengatur perilakugerakan (scroll=teks bergerak berputar, slide=teks bergerak sekali lalu berhenti, alternate=teks bergerak kekiri lalu kekanan dst.)

TITLE="pesan" Pesan akan muncul saat mouse berada diatas teksSCROLLAMOUNT="angka" Mengatur kecepatan gerakan dalam pixel, semakin

banyak semakin cepatSCROLLDELAY="angka" Mengatur waktu tunda gerakan dalam mili detikLOOP="angka |-1 |infinite" Mengatur jumlah loopWIDTH="lebar" Mengatur lebar blok teks dalam pixel atau persen

Latihan 3.2.1

<HTML> <HEAD> <TITLE>Physical Formatting</TITLE> </HEAD> <BODY><BASEFONT SIZE="3" COLOR="blue" FACE="arial">Semua teks disini secara default akan ditampilkan dengan tipe huruf Arial berwarna biru dengan ukuran font 3(setara dengan 12 point dalam windows)</BODY></HTML>

3.6 Membuat Link 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>. Untuk lebih lengkapnya marilah kita perhatikan tabel atribut dan fungsi dari tag Anchor berikut ini:Atribut FungsiNAME Menyatakan titik anchor dalam suatu dokumen HTML

12

Page 13: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

HREF Menunjukkan lokasi dokumen web.HREFLANG Menunjukkan bahasa yang digunakanTYPE Atribut ini akan memberikan catatan tipe isi dari dokumen tujuanREL Menggambarkan hubungan dari dokumen asal dengan dokumen

tujuan yang ditunjuk dengan atribut href.REV Menggambarkan hubungan antara dokumen tujuan dengan

dokumen asal yang ditunjuk dengan atribut href.CHARSET Untuk menspesifikasikan karakter encoding web

Latihan 3.6

<HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY>Pilihlah <br>Apa yang ingin anda lakukan sekarang ? <br><A HREF=”http://google.co.id”>browsing</A><br><A HREF=”http://its.ac.id”>cari kampus</A><br><A HREF=”http://games.co.id”>main game</A><br><A HREF=”mailto:[email protected]”>kirim saya email</A> </BODY> </HTML>

Sebagai catatan bahwa link tidak harus selalu alamat url tapi juga bisa alamat file lain dalam komputer kita. Sedangkan untuk link ke email dalam HREF kita gunakan mailto:.

”Kesuksesan itu 99% keringat dan 1% bakat”

13

Page 14: TIK kelas xi

BAB IVMENYISIPKAN OBJEK DALAM DOKUMEN WEB

HTML dan PHP TIK SMAN 5 Surabaya

Kalau kita lihat dalam web yang ada di internet tentu saja tidak hanya tulisan saja yang ditampilkan tapi juga manampilkan gambar , suara bahkan video. Di bab ini kita akan belajar bagaimana cara untuk menyisipkan objek yang berupa image, suara dan video kedalam website kita.

4.1.1 Menyisipkan gambar Untuk menyisipkan gambar dalam web kita, kita membutuhkan tag yang bernama

<IMG> dan menggunakan atribut SRC=”namafile.jpg”. untuk mempermudah mencari file/mengisikan SRC maka letakkan file gambar didalam folder yang sama dengan anda membuat file htmlnya.Contoh 4.1

<HTML> <HEAD><TITLE>gambar</TITLE></HEAD> <BODY>Ini adalah gambar bola <br><IMG SRC=”bola.jpg”></BODY> </HTML>

Agar berhasil sintax di atas donwload dulu gambar bola dari internet yang berukuran kecil dan letakkan di folder public_html dan beri nama dengan nama bola.jpg

4.1.2 Mengatur posisi gambar Gambar yang dimasukkan ke dalam halaman web tentulah harus diatur tat

letaknya agar terlihat manis. Untuk mengaturnya cukup ditambahkan atribut ALIGN dibelakang IMG untuk meletakkan posisinya.Jenis Atribut FungsiTOP Meratakan teks dengan bagian atas gambarMIDDLE Meratakan teks dengan bagian tengah gambarBOTTOM Meratakan teks dengan bagian bawah gambarRIGHT Meletakkan gambar disebelah kanan teksLEFT Meletakkan gambar disebelah kiri teks

Contoh 4.1.2

<HTML> <HEAD><TITLE>posisi gambar</TITLE></HEAD> <BODY><P><IMG SRC=”bola.jpg” ALIGN=”top”>Teks ini rata dengan bagian atas gambar</P><P><IMG SRC=”bola.jpg” ALIGN=”middle”>Teks ini rata dengan bagian tengah gambar</P><P><IMG SRC=”bola.jpg” ALIGN=”bottom”>Teks ini rata dengan bagian tengah gambar</P></BODY> </HTML>

4.1.3 Mengatur ukuran gambarGambar yang ingi kita tampilkan dalam halaman web kita kadang ukurannya tidak

sesuai dengan yang kita inginkan. Untuk mengatur ukuran gambar ditambahkan atribut HEIGHT (tinggi) dan WIDTH (lebar) dalam tag IMG. Dan ukuran nominalnya berdasarkan pixel. Contoh 4.1.3

14

Page 15: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML> <HEAD><TITLE>ukuran gambar</TITLE></HEAD> <BODY><P><IMG SRC=”bola.jpg” ALIGN=”top” WIDTH=”100” HEIGHT=”150”>Teks ini rata dengan bagian atas gambar</P></BODY> </HTML>

4.1.4 Membuat link dengan gambarKita sering melihat dalambanyakwebsite di internet kalau kita mengklik gambar

yang ada di internet biasanya akan dilinkkan ketempat lain hal ini karena penempatan pengambilan gambar berada diantara tag link. Agar lebih jelas lihat contoh berikut.Contoh 4.1.4

<HTML> <HEAD><TITLE>gambar lagi</TITLE></HEAD> <BODY>Coba klik gambar di bawah ini ! <BR><A HREF=”http://detik.com”><IMG SRC=”bola.jpg”></A></BODY> </HTML>

4.2 Menyisipkan Audio dan Video Di dalam web kita, ternyata kita juga bisa menyisipkan video atau audio. Pada bab

ini kita hanya akan memakai tag <EMBED> sehingga ada beberapa file yang tidak bisa mendukung untuk dimasukkan. Misal untuk audio yang pernah dicoba .mp3 dan .wav , sedangkan video yang sukse dicoba adalah .avi. Untuk yang lainnya silahkan dicoba-coba sendiri mana yang cocok dan bisa masuk. Didalam tag <EMBED> terdapat beberapa atribut tetapi maaf belum bisa saya tuliskan kali ini mungkin di buku selanjutnya.Contoh 4.2

<HTML> <HEAD><TITLE>audio video</TITLE></HEAD> <BODY><EMBED SRC=”namafile.mp3” WIDTH=”100” HEIGHT=”50”>Coba klik gambar di bawah ini ! <BR><A HREF=”http://detik.com”><IMG SRC=”bola.jpg”></A></BODY> </HTML>

Selain menggunakan <EMBED>, untuk meamasukkan audio dan video juga bisa dipakai tag lain yaitu <OBJECT>...</OBJECT> tetapi mohon maaf belum bisa dibahas kali ini demi mengutamakan materi yang lain.

”Mimpi hari ini adalah kenyataan hari esok.Jangan tertawakan mimpi orang lain karena sesungguhnya mimpi itu adalah semangat

hidupnya.”

15

Page 16: TIK kelas xi

BAB VMEMBUAT LIST

HTML dan PHP TIK SMAN 5 Surabaya

Sebuah informasi akan dapat disampaikan dengan mudah apabila disampaikan menggunakan daftar. Banyak hal yang bisa disampaikan dengan daftar misal daftar kelas, daftar lomba dan sebagainya. Pada bagian ini kita akan belajar tentang cara membuat list dalam halaman web.

5.1 Ordered ListAdalah sebuah list yang diurutkan beradasar angka dan huruf. 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>. Adapun macam-macam atribut pada tag <OL> adalah sebagi berikut : Atribut FungsiTYPE=”A” Membuat list dengan huruf besarTYPE=”a” Membuat list dengan huruf kecilTYPE=”I” Membuat list dengan angka romawiTYPE=”1” Membuat list dengan angkaSTART=”n” Memulai dari n

Contoh 5.1

<HTML> <HEAD> <TITLE>Ordered List</TITLE> </HEAD> <BODY> Urutan pemain sepakbola terbaik dunia :<OL> <LI>Messi<LI>Kaka<LI>CR 7<LI>Rizki </OL> </BODY> </HTML>

Kalau tidak diberi atribut maka oredered list menggunakan angka biasa untuk mengrutkan.

5.2 Unordered ListDigunakan untuk membuat daftar yang terdiri dari bullet atau symbol. Jadi yang

digunakan untuk mendaftarnya selain angka dan huruf. Untuk membuat tag ini digunakan tag <UL> dan diakhiri dengan </UL> dan tiap bagiannya digunakan <LI>. Sebagaimana ordered list untuk Unordered list juga mempunyai atribut TYPE tapi hanya berisi tiga yaitu circle, square dan disc.

Contoh 5.2

16

Page 17: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<HTML> <HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> Urutan pemain sepakbola terbaik dunia :<UL> <LI>Messi<LI>Kaka<LI>CR 7<LI>Rizki </UL> </BODY> </HTML>

5.3 Definition listDigunakan untuk mendefinisikan atau menjelaskan istilah-istilah atau yang disebut

juga dengan glosary list (daftar istilah). Definition list dinyatakan dengan tag awal <DL> dan diakhiri dengan</DL>. Dalam tag tersebut teradapat dua bagian yaitu :

Istilah, yang dinyatakan dengan tag tunggal <DT>Definisi dari istilah, yang dinyatakan dengan <DD>.

Contoh 5.3

<HTML> <HEAD> <TITLE>Definition List</TITLE> </HEAD> <BODY> <B>HARDWARE KOMPUTER</B><DL><DT>Motherboard<DD>Sesuai dengan artinya papan ibu, adalah sebuah papan yang digunakan untuk menhubungkan dan menancapkan semua komponen yang ada di CPU mulai dari VGA, hardisk, RAM, processor dan lain-lain.<DT>Processor<DD>Adalah bagian yang mempunyai fungsi yang sama dengan otak dalam tubuh manusia. Procesor adalah komponen yang mengatur seluruh kegiatan kerja dalam komputer.</DL></BODY> </HTML>

”Anda tidak membutuhkan pahlawan besar yang selalu berada didepan anda agar dapat memberi motivasi hidup pada anda. Yang hanya anda butuhlkan hanyalah inspirasi-

inspirasi besar untuk tumbuh, yang anda dapat serap setiap saat dari lingkungan anda.”

17

Page 18: TIK kelas xi

BAB VIBEKERJA DENGAN TABEL

HTML dan PHP TIK SMAN 5 Surabaya

Dalam sebuah web komponen tabel ini mempunyai fungsi yang sangat penting karena biasanya digunakan untuk membagi dan mengatur bagian-bagian dalam web. Selain itu kadang informasi akan lebih ringkas dan mudah dibaca apabila ditampilkan dalam bentuk tabel. HTML dapat membantu anda untuk membuat bermacam-macam ta bel. Tabel tersebut dapat diatur lebar, tinggi, judul, boder dan lain sebagainya.

6.1 Membuat TabelUntuk membuat tabel, 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.<TR> …</TR> menyatakan baris-baris pada table.

Selain elemen elemen diatas tabel juga mempunyai atribut-atribut antara lain :

Atribut FungsiBORDER Membuat batas tepi suatu tabelALIGN Mengatur perataan horisontal data dalam tabelVALIGN Mengatur perataan vertikal data dalam tabelWIDTH Mengatur lebar tabelCELLSPACING Mengatur spasi antar selCELLPADDING Mengatur spasi dalam selROWSPAN Menggabungkan sel-sel dalam barisCOLSPAN Menggabungkan sel-sel dalam colomCOLOR Mengatur warna sel dalam tabelSUMMARY Memberi keterangan singkat struktur dan kegunaan tabelRULES Mengatur unkuran antar sel dalam tabelFRAME Untuk mengatur frame di sekitar tabel

Contoh 6.1<html> <head> <title>table sederhana</title> </head> <body> <table><TD>table pertama tanpa border</TD><br><table border=”3”><TD>table kedua dengan border 3</TD></table> </body> </html>

6.2 Pengaturan lebar dan isi tabelDalam 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

18

Page 19: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

mengatur lebar table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya. Contoh 6.2

<html> <head> <title>Pengaturan lebar dan isi tabel</title> </head> <body> <table width="90%" height="200" border=”2”> <tr> <td width="30%" height="100" valign="top"> tulisan ada di atas <br> </td> <td width="30%" height="100" valign="middle"> tulisan ada di tengah <br> </td> <td width="30%" height="100" valign="bottom">tulisan ada di bawah <br> </td> </tr> </table> </body> </html>

6.3 Pengaturan 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. Contoh 6.3

<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>

6.4 Pengaturan COLSPAN dan ROWSPAN Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1

kolom. ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu. Untuk lebih jelasnya silahkan coba latihan di bawah ini.Contoh 6.4

19

Page 20: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<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>

6.5 Memberi warna pada tablePemberian warna tidak hanya pada teks tetapi juga pada boder tabel. Pemberian

nama dapat berupa angka heksadeimal atau dengan menggunakan warna. Atribut BGCOLOR digunakan untuk memberi warna pada background sel. Atribut BORDERCOLOR digunakan untuk mengubah warna order sel. Contoh 6.5

<html> <head> <title>memberi warna tabel</title> </head> <body> <table width="85%" border="3" cellspacing="5" cellpadding="5" bgcolor=”yellow” bordercolor=”blue”> <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> </table> </body> </html>

“Semua prestasi dan karya besar anda justru akan lebih mudah lahir dan tumbuh dalam situasi krisis, sebab krisi itu lebih membangunkan kesadaran, lebih menggelorakan

semangat , lebih menumbuhkan tanggung jawab, serta lebih melanggengkan kompetisi dan daya juang.”

20

Page 21: TIK kelas xi

BAB VIIMENGGUNAKAN FORM

HTML dan PHP TIK SMAN 5 Surabaya

Form biasanya digunakan untuk melakukan interaksi dengan pengunjung web, misalnya untuk mendapatkan komentar dari pengunjung, untuk melakukan pendaftaran suatu keanggotaan tertentu, pemesanan barang dan lain sebagainya. Untuk membentuk sebuah form, tag yang digunakan adalah <FORM>…</FORM>. Sedangkan atribut yang paling umum digunakan adalah METHOD dan ACTION. Sintak penggunaannya adalah:

<FORM METHOD="post|get" ACTION="alamat_URL">........</FORM>

Form bekerja dengan mengirimkan data yang diketik atau dipilih oleh user ke suatu script program (misalnya CGI Script, php3 atau .pl) yang berada di alamat_URL. Metode post, digunakan untuk mengirim data yang dimasukkan user dan metode get untuk mendapatkan data dari halaman lain. Metode get hampir tidak pernah digunakan. Semua contoh dalam bab ini menggunakan metode post kesebuah alamat e-mail atau mungkin halaman lain. Ini adalah cara paling mudah karena kita tidak perlu mempelajari script apapun. Tetapi setelah mahir menggunakan metode ini, Anda dapat beranjak ke script CGI, PHP atau PERL yang lebih baik.

1. Menggunakan Tag <INPUT>Tag <INPUT> adalah salah satu tag dalam form yang sering digunakan, misalkan

untuk membuat halaman login, tempat menuliskan comment, checkbox, pilihan dan sebagainya. Tag ini tidak memiliki pasangan tag penutup. Atribut yang dapat digunakan adalah:Atribut FungsiTYPE Berisi "text | hidden | checkbox | radio | image | submit | reset" dan

digunakan untuk memilih tipe informasi yang ingin didapatkan dari pengunjung

NAME Digunakan untuk memberi nama item informasi VALUE Digunakan untuk mengisi item informasi defaultSIZE Untuk menentukan panjang kolom isianMAXLENTH Untuk menentukan panjang isian yang dapat diketik oleh

pengunjung

Contoh Penggunaan INPUT type text dan password

<html> <head><title>halaman login</title></head> <body><p align=”center”>Halaman Login</p><form method=”POST” action=”mailto:[email protected]”><pre> <p align=”center”>Username : <input type=”text” size=”80”> <br>Password : <input type=”password” size=”80”> <br><input type=”submit” value=”login”> <input type=”reset” value=”reset”></p><pre></form></body> </html>

21

Page 22: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

Contoh Penggunaan INPUT type radio dan checkbox

<html> <head> <title>Check Box dan Radio</title> </head> <body> <h2>Biodata</h2> <br><form method=”POST” action=”mailto:[email protected]”><pre></p> Nama : <input type=”text”>Jenis Kelamin : <input type="checkbox">mercedes <input type="checkbox">bmw<br> Kelas : <input type="checkbox”>satu <input type="checkbox”>dua<br> <input type="submit” value=”kirim”> </p></pre></form></body> </html>

2. Membuat menu drop-downMenu drop-down pilihan dapat digunakan untuk menghemat halaman survei jika

item pilihan yang kita tawarkan sangat banyak. Tag yang kita perlukan adalah blok tag <SELECT>…</SELECT> dan tag <OPTION> seperti tampak pada contoh berikut :

<HTML> <HEAD> <TITLE>Select Option</TITLE> </HEAD> <BODY><H1><U>SURVEI PENGUNJUNG</U></H1><B><FORM METHOD="post" ACTION="mailto:[email protected]">DARI MANA ANDA BERASAL :<SELECT NAME="ASAL" SIZE=1> <OPTION SELECTED>Surabaya <OPTION>Semarang <OPTION>Yogyakarta <OPTION>Jabotabek <OPTION>Medan <OPTION>Kalimantan <OPTION>Sulawesi</SELECT><P><INPUT TYPE="submit" value=”reset”> <INPUT TYPE="reset"></FORM></B></BODY></HTML>

3. Bekerja dengan TEXTAREAUntuk mendapatkan komentar dari pengunjung, kita perlu menyediakan suatu area

yang cukup untuk menulis komentar. Untuk itu kita memerlukan blok tag <TEXTAREA> … </TEXTAREA>. Atribut yang diperlukan adalah ROWS(untuk menentukan jumlah baris ruangkomentar) dan COLS(untuk menentukan jumlah kolom ruang komentar). Jika diantara tag <TEXTAREA> dan </TEXTAREA> diisi tulisan, maka tulisan tersebut akan ditampilkan dalam kolom teks sebagai teks default. Jika tidak ingin menggunakan teks default, sebaiknya ruang ini dikosongkan saja. Lihat contoh berikut:

22

Page 23: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<html> <head> <title>Textarea</title> </head> <body> <H1><U>KOMENTAR PENGUNJUNG</U></H1><B><form method=”POST” action=”mailto:[email protected]”><pre><p> NAMA : <input type=”text”>EMAIL : <input type="Email"> KOMENTAR ANDA TENTANG HOME PAGE INI :<BR><TEXTAREA NAME="Komentar" ROWS=8 COLS="60"></TEXTAREA><BR><INPUT TYPE="submit"> <INPUT TYPE="reset"></p></pre></form></body> </html>

4. Membuat link dengan tombolForm dapat dimanfaatkan untuk membuat link berbentuk tombol. Caranya adalah

dengan mengisi atribut TYPE dengan "button". Contoh:

<html> <head> <title>Textarea</title> </head> <body> <B>Tombol-tombol ini dibentuk dengan tag FORM daninput bertipe "button"</B><P><FORM><INPUT type="button" value="google"onClick="window.location.href='http://google.co.id'"><INPUT type="button" value="yahoomail"onClick="window.location.href='mail.yahoo.co.id'"><INPUT type="button" value="Cari Kampus"onClick="window.location.href='its.ac.id'"></FORM></body> </html>

”Hari yang baru adalah hari yang berarti bagi orang yang selalu memperbaiki diri. Karena hari itu adalah kesempatan yang diberikan Tuhan kepadanya untuk berubah lebih baik. Maka jadilah orang yang selalu memperbaiki diri sehingga kita mampu memaknai dan

mengisi hari itu dengan sesuatu yang berarti. ”

23

Page 24: TIK kelas xi

BAB VIIIMENGGUNAKAN FRAME

HTML dan PHP TIK SMAN 5 Surabaya

Jika anda menjelajahi web dengan menggunakan browser yang mampu menampilkan frame, anda pasti menemukan frame di setiap web. Melalui frame jendela browser dibagi-bagi menjadi beberapa bagian dimana setiap frame mampu menampilkan berbagai informasi. Setiap link dalam satu frame tidak hanya dapat digunakan untuk memperbaharui isinya, tapi juga dapat dimanfaatkan untuk memperbarui isi frame, disamping juga jendela browser.Frame digunakan untuk :

Membuat daftar isi pada suatu sisi frame sementara sisi frame yang lain untuk menampilkan isiMembuat suatu judul atau logo yang tidak beruba-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen.Membuat suatu dokumen tanya jawab, dimana sisi frame yang satu berisi daftar pertanyaan sedangkan sisi frame yang lain berisi jawabannya.

8.1 Membuat Frame barisUntuk membuat frame dibutuhkan tag <FRAMESET> dan diakhiri dengan

</FRAMESET> dimana peletakkannya tidak dalam elemen <BODY> tapi diantara elemen <HEAD>. Selain itu tag lain yang digunakan adalah <FRAME> yang diletakkan diantara <FRAMESET>..</ FRAMESET>.

Yang dimaksud frame baris ini adalah membuat frame yang digolongkan beradasar baris atau framenya berbentuk potongan horisontal. Untuk membuatnya adalah dengan menambahakan atribut ROWS pada tag <FRAMESET>. Untuk lebih jelasnya silahkan coba latihan berikut.

Latihan 8.1

<html> <head> <frameset rows=”20%,200%”>

<frame src=”coba.hmtl”><frame src=”coba2.hmtl”>

</frameset></head> </html>

Sebagai tambahan file yang dimasukkan dalam src adalah halaman page yang lain atau dengan ekstensi htm atau html. Dengan syarat file tersebut mengandung seluruh elemen HTML yang meliputi HEAD dan BODY. Tetapi kita juga bisa memasukkan file yang lain seperti gambar yang mempunyai ekstensi gif atau jpg.

8.2 Membuat Frame Kolom Yang dimaksud frame kolom ini adalah membuat frame yang digolongkan berdasar

kolom atau frame yang potongan bentuknya vertikal. Untuk membuatnya adalah dengan menambahkan atribut COLS pada tag <FRAMESET>. Mari kita coba lagi latihan selanjutnya.

<html> <head> <frameset cols=”20%,180%”>

<frame src=”coba.hmtl”><frame src=”coba2.hmtl”>

</frameset></head></html>

24

Page 25: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

8.3 Pengaturan ukuran frameDari syntax diatas dapat dipahamai apabila komponen yang dimasukkan ke dalam

cols berjumalah dua maka jumlah framenya adalah 2. Sedangkan apabila dimasukkan 3 misal (230,240,250) maka frame yang akan dibuat berjumlah 3.

Ukuran frame dapat didefinisikan dengan berbagai satuan antara lain :Pixel

Contoh : <frameset rows=”202,210,150”> Persen

Contoh : <frameset rows=”20%,40%,50%”>Nilai relative

Contoh : <frameset rows=”2*,*,5*”>. Untuk pengaturan tsb 2/7 dari tinggi jendela browser untuk ukuran frame pertama, 1/7 kedua dan 5/7 ketiga

8.4 Margin FrameUntuk menentukan margin kiri dan kanan dari suatu frame digunakan atribut

MARGINWIDTH pada tag <FRAME>, sedangkan untuk menentukan margin atas dan bawah frame digunakan atribut MARGINHEIGHT pada tag yang sama.

<html> <head> <frameset cols=”20%,180%”>

<frame src=”coba.hmtl” marginwidth=”20” marginheight=”40”><frame src=”coba2.hmtl”>

</frameset></head> </html>

8.5 Border FrameAtribut BORDER hanya digunakan dengan tag <FRAMESET> yang juga digunakan

untuk mengatur lebar border. Angka yang menyertai atribut BORDER adalah satuan pixel. Dan apabila kita ingin memberi warna background pada frame, gunakan atribut BORDERCOLOR. Atribut BORDERCOLOR dapat digunakan pada tag <FRAMESET> atau <FRAME>.sebagai contoh lihat di bawah ini.

<html> <head> <frameset cols=”20%,180%” border=”8” bodercolor=”red”>

<frame src=”coba.hmtl” marginwidth=”20” marginheight=”40”><frame src=”coba2.hmtl”>

</frameset></head> </html>

25

Page 26: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

Seseorang tidak akan pernah merasakan manisnya perjuangan jika ia tidak pernah menyertakan doa di dalamnya

26

Page 27: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

27

Page 28: TIK kelas xi

BAB IPENGENALAN PHP

HTML dan PHP TIK SMAN 5 Surabaya

1.1. Pengenalan PHP : APA dan MENGAPA PHP

PHP, 'PHP: Hypertext Preprocessor', merupakan bahasa pemrograman web dinamis layaknya ASP, JSP, Perl dan sebagainya. Lalu mengapa harus menggunakan bahasa pemrograman, apa HTML saja tidak cukup ? Ya, tentu saja HTML tidak cukup, salah satunya adalah karena sifat HTML yang statis. HTML hanya berguna untuk desain, saat kita browsing, maka yang kita lihat itu sebenarnya adalah interprestasi dari HTML. Sebagai contoh saat kita menggunakan YahooMail untuk mengirim email, maka tampilan yang dapat kita lihat tersebut merupakan interprestasi dari HTML, sedangkan untuk dapat mengirim email, digunakan bahasa pemrograman web seperti PHP.

Catatan:

Disini kita anggap HTML statis, sedang PHP dinamis. Sebelumnya kita harus menyamakan persepsi mengenai dinamis disini, yang dimaksud dinamis disini bukannya web yang dapat gerak-gerak, tetapi dinamis berarti web yang dapat diubah-ubah tanpa mengubah langsung kedalam file webnya.

PHP akhir-akhir ini semakin populer, jutaan web didunia menggunakannya, hal ini disebabkan oleh berbagai keunggulan PHP, diantaranya kemudahannya untuk dipelajari, gratis, kecepatan yang dapat diandalkan, dan sebagainya.

1.2. Cara instalasi PHP di rumah

1.3. Memulai Program PHP awal

Kode PHP dapat disatukan dengan kode HTML sehingga mempermudah pemrogram dalam pengerjaan web. Sekarang kita akan membuat halaman php pertama kita.

<html>

<head>

<title>Hello World</title>

</head>

<body>

<?

echo "Hai ini Script PHP ku yang pertama";

?>

</body>

28

Page 29: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

</html>

Ketik dan simpan script diatas dengan nama hello.php pada folder htdocs apache anda. Panggil script php anda menggunakan browser dengan url : http://localhost/hello.php

Dari script diatas dapat kita ketahui bahwa script php diawali tengan tanda <? dan diakhiri dengan ?> , tanda tersebut untuk memisahkan antara script php dan script html. Script yang berada didalam tanda <? dan ?> akan dieksekusi sebagai script php.

Echo, di PHP berfungsi untuk menuliskan sesuatu ke browser. Saat hello.php kita browse dan dilihat sourcecode-nya maka akan tempil seperti dibawah ini:

<html>

<head>

<title>Hello World</title>

</head>

<body>

Hai ini Script PHP ku yang pertama

</body>

</html>

Hal ini berarti bahwa user yang mem-browse script php hanya akan melihat scriptnya sebagai script html, sedangkan script php-nya tidak terlihat.

Berbeda dengan HTML, script PHP membedakan antara huruf besar dan huruf kecil, karenanya kita harus berhati-hati dalam penulisan script PHP.

Tips:

Sebaiknya kita selalu menuliskan script PHP dalam huruf kecil, karena lebih enak dibaca dan cenderung konstan sehingga kemungkinan salahnya lebih kecil.

29

Page 30: TIK kelas xi

BAB IIVARIABEL, KONSTATA & TIPE DATA

HTML dan PHP TIK SMAN 5 Surabaya

VARIABEL

Variabel didalam PHP dinyatakan dengan tanda $ diikuti nama variabel, pada PHP variabel tidak perlu dideklarasikan, sehingga mempermudah untuk programmer pemula. Misalnya kita ingin menyimpan nilai Pi kedalam variabel $Pi , maka kita tinggal menuliskan $pi = 3.14; pada script PHP.

KONSTANTA

Konstanta fungsinya hampir sama dengan variabel, hanya saja nilai konstanta selalu tetap, tidak bisa diubah-ubah. Untuk mendefinisikan konstanta digunakan fungsi define(). Nilai Pi yang disimpan dalam variabel $pi diatas sebenarnya lebih cocok bila disimpan dalam konstanta, karena nilai Pi selalu tetap.

Contoh :

define("pi", 3.14);

TIPE DATA

PHP mengenal berbagai macam tipe data, mulai dari integer, float, string, array, dan object. Tipe data integer meliputi semua bilangan bulat, float meliputi semua bilangan pecahan, string untuk karakter atau kumpulan karakter, array untuk kumpulan data, sedangkan tipe data object untuk pemrograman berorientasi object yang tidak akan kita bahas lebih jauh pada buku ini.

Tipe data string harus selalu diapit tanda petik tunggal atau tanda petik ganda. Coba perhatikan script hello.php, pada baris echo "...."; terdapat kumpulan karakter yang diapit tanda petik, kumpulan karakter tersebut bertipe data string.

Dalam PHP kita akan sering menggunakan tipe data array. Tipe data array digunakan untuk menyimpan banyak data dalam satu variabel, sebagai contoh untuk memasukkan daftar siswa kedalam suatu variabel, perhatikan script dibawah :

<html>

<head>

<title>Hello World</title>

</head>

<body>

<?

30

Page 31: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

$siswa[0] = 'ilma';

$siswa[1] = 'tika';

$siswa[2] = 'dina';

$siswa[3] = 'ogi';

$siswa[4] = 'sidik';

$siswa[5] = 'ayik';

$siswa[6] = 'momon';

$siswa[7] = 'ippin';

for ($i=0; $i<7; $i++) {

      echo "variabel \$siswa[$i] bernilai $siswa[$i] <br/>";

}

?>

</body>

</html>

Anda tidak perlu khawatir jika belum tahu maksud dari perintah for dari script diatas, kita akan membahasnya pada bab berikutnya. Pada script diatas pertama-tama dimasukkan data siswa kedalam variabel array $siswa, kemudian ditampilkan nilainya kebrowser.

Lebih jauh kita akan membahas tipe data array pada bab-bab berikutnya.

VARIABEL DARI FORM HTML

Untuk mengirimkan variabel dari satu halaman ke halaman lainnya atau kehalaman itu sendiri biasa digunakan form HTML. Form HTML akan mengirimkan variabel ke webserver, sehingga di webserver variabel tersebut menjadi input yang akan diolah oleh script PHP yang anda buat. Berikut adalah contoh penggunaan variabel dalam form :

<?

if ($submit){

      echo "Nama : $nama <br/>";

      echo "Email : $email<br/>";

      echo "Alamat : $alamat<br/>";

      echo "Pesan: <br/> $pesan<br/>";

      echo "<hr/>";

31

Page 32: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

}

?>

<html>

<head>

<title>Variabel dari Form</title>

</head>

<body>

<form action="form_variabel.php" method="post">

<p>Nama :

  <input type="text" name="nama">

  <br>

  Email :

  <input type="text" name="email">

  <br>

  Alamat :

  <input type="text" name="alamat">

  <br>

  Pesan :<br>

  <textarea name="pesan"></textarea>

  <br>

  <br>

  <input type="submit" name="submit" value="Submit">

  <input type="reset" name="Submit2" value="Reset">

</p>

</form>

</body>

</html>

Ketik dan simpanlah ke form_variabel.php, kemudian coba isi formnya dan klik tombol submit, amati apa yang terjadi.

32

Page 33: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

Saat tombol submit diklik, form akan mengirim variabel ke file tujuan yang tertera pada atribut action pada form. Karena pada script diatas atribut action menunjuk ke form_variabel.php (file itu sendiri) maka variabel dikirim ke file form_variabel.php. File form_variabel.php mengirim beberapa variabel, yaitu variabel $nama, email, $alamat, $pesan, dan $submit, yang kemudian variabel-variabel tersebut dicetak apabila tombol submit sudah diklik. Apabila tombol submit sudah diklik, maka variabel $submit akan bernilai TRUE, hal ini digunakan untuk mengecek apakah tombol submit sudah diklik atau belum.

33

Page 34: TIK kelas xi

BAB IIIOPERATOR

HTML dan PHP TIK SMAN 5 Surabaya

OPERATOR

Operator berguna untuk melakukan suatu operasi pada suatu nilai. Operator di PHP sangatlah umum sehingga mudah untuk dipahami. Disini kita akan membahas operator yang sering digunakan.

Operator Aritmatika

$x + $y ; //untuk penjumlahan

$x - $y ; //untuk pengurangan

$x * $y ; //untuk perkalian

$x / $y ; //untuk pembagian

$x % $y ; //untuk sisa hasil bagi

Operator Assignment

$x = $y ;

$x += 1; //sama dengan $x = $x + 1;

$x -= 1; //sama dengan $x = $x - 1;

$x *= 1; //sama dengan $x = $x * 1;

$x /= 1; //sama dengan $x = $x / 1;

Operator Perbandingan

$x == $y; //sama dengan, jika $x sama dengan $y akan menghasilkan TRUE, jika tidak sama menghasilkan FALSE

$x === $y; //identik

$x != $y; //tidak sama dengan

$x < $y; //lebih kecil dari

$x > $y; //lebih besar dari

$x <= $y; //lebih kecil atau sama dengan

$x >= $y; //lebih besar atau sama dengan

34

Page 35: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

Operator Increment dan Decrement

$x++; //operasi dilaksanakan, baru nilai $x ditambah satu

$x--; //operasi dilaksanakan, baru nilai $x dikurang satu

++$x; //sama dengan nilai $x ditambah satu baru operasi dijalankan

--$x; //sama dengan nilai $x dikurang satu baru operasi dijalankan

35

Page 36: TIK kelas xi

BAB IVSTRUKTUR KENDALI

HTML dan PHP TIK SMAN 5 Surabaya

Statement digunakan untuk mengontrol alur program. Beberapa statement PHP diadopsi dari bahasa C, sehingga bagi anda yang sudah pernah menggunakan C akan jauh lebih mudah dalam memahami statement di PHP. Pada bab ini hanya akan dibahas sekilas mengenai statement, lebih dalam kita akan melanjutkannya bersamaan dalam pembuatan aplikasi.

Statemenet if

if, yang berarti jika, digunakan untuk mengecek apakah suatu syarat dalam if terpenuhi, apabila dipenuhi maka suatu operasi dilakukan, perhatikan contoh dibawah :

<?

$nama = 'castle';

if ($nama == 'castle') {

      echo "Rumah saya berbentuk $nama";

}

?>

Statement if .. else

Seperti halnya statement if, statement if .. else akan mengecek apakah syarat pada if terpenuhi, jika ya maka operasi dibawah if dilakukan, jika tidak maka operasi yang dibawah else yang dilakukan.

<?

$kondisi = 'lapar';

if ($kondisi == 'lapar) {

      echo "Aku akan beli makanan";

}else {

      echo "Aku tidak akan beli makanan";

}

?>

Statement switch

Statement switch digunakan untuk membandingkan syarat dengan berbagai nilai.

36

Page 37: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

<?

$umur = 2;

switch ($umur){

      case 1 :

            echo "Bayi itu masih sangat kecil";

            break;

      case 2 :

            echo "Bayi itu sudah sangat lincah";

            break;

      case 3 :

            echo "Anak itu sudah tampak kecerdasannya";

            break;

      case 4 :

            echo "Anak itu sangat gembira masuk taman kanak-kanak";

}

?>

37

Page 38: TIK kelas xi

BAB VPERULANGAN

HTML dan PHP TIK SMAN 5 Surabaya

While Loop

While, akan mengeksekusi suatu perintah secara berulang-ulang, sampai kondisi pada while tidak terpenuhi.

Contoh:

<?

$i = 0;

while ($i <= 10) {

      echo "nilai i sekarang adalah $i <br />";

      $i++;

}

?>

Program tersebut akan menuliskan nilai hingga i lebih besar dari 10.

For Loop

For digunakan untuk looping dengan memasukkan nilai awal, selama syaratnya terpenuhi. Bentuk umum For adalah sebagai berikut :

for (syarat1; syarat2; syarat3) {

      operasi

}

syarat1 merupakan nilai awal, dijalankan sekali saat operasi loop dilakukan.

syarat2 merupakan kondisi yang selalu dicek setiap looping, apabila syarat terpenuhi maka operasi dilakukan dan mengeksekusi syarat3, jika tidak maka looping berhenti. Syarat 1 hingga 3 diatas tidak harus diisi, anda bisa mengosongkannya.

Perhatikan contoh berikut:

<?

for ($i=0; $i <=10; $i++){

      echo "$i"; 

38

Page 39: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

}

?>

Pada saat looping akan dijalankan, nilai $i diset menjadi 0; kemudian dicek apakah syarat kedua memenuhi, jika ya  maka operasi echo dilakukan kemudian nilai $i dinaikkan 1 (syarat3 : $i++),jika tidak looping berhenti.

39

Page 40: TIK kelas xi

BAB VARRAY & FUNGSI

HTML dan PHP TIK SMAN 5 Surabaya

Array dan FUNGSI

<?

//menghitung rumus abc

// data 1

$a = 2;

$b = 3;

$c = 1;

$hasil_x1 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

$hasil_x2 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

echo "x1 = $hasil_x1 <br/>";

echo "x2 = $hasil_x2 <br/><br/>";

// data 2

$a = 5;

$b = 7;

$c = 1;

$hasil_x1 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

$hasil_x2 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

echo "x1 = $hasil_x1 <br/>";

echo "x2 = $hasil_x2 <br/><br/>";

// data 3

$a = 22;

$b = 145;

$c = 4;

$hasil_x1 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

$hasil_x2 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

echo "x1 = $hasil_x1 <br/>";

40

Page 41: TIK kelas xi

HTML dan PHP TIK SMAN 5 Surabaya

echo "x2 = $hasil_x2 <br/><br/>";

?>

Perhatikan program diatas! Program diatas menghitung nilai x1 dan x2 dari suatu nilai a, b, c yang dimasukkan, kemudian menuliskan hasilnya ke browser. Operasi tersebut dilakukan berulang kali, dan anda harus menuliskannya sebanyak data yang ingin anda hitung, hal ini tentu saja sangat tidak efisien, karenanyalah di PHP terdapat fungsi. Fungsi berguna untuk mengumpulkan operasi, yang dapat menerima masukan(input) dan mengeluarkan output. Fungsi akan sangat membantu dalam pemrograman berskala besar, karena fungsi yang pernah dibuat dapat dipakai kembali(reusable). Program diatas dapat disederhanakan menggunakan fungsi sbb:

<?

// menghitung rumus abc dengan menggunakan fungsi

function hitung_abc($a, $b, $c) {

      $hasil_x1 = (-1*$b + sqrt($b*$b - 4*$a*$c)) / 2*$a;

      $hasil_x2 = (-1*$b - sqrt($b*$b - 4*$a*$c)) / 2*$a;

      echo "x1 = $hasil_x1 <br/>";

      echo "x2 = $hasil_x2 <br/><br/>";

}

//data 1

hitung_abc(2, 3, 1);

// data 2

hitung_abc(5, 7, 1);

// data 3

hitung_abc(22, 145, 4);

?>

Program diatas melakukan operasi persis sama dengan program sebelumnya. Coba perhatikan pemanggilan fungsi hitung_abc() yang pertama! Pemanggilan fungsi disertai pemasukan argumen sebagai input, yaitu untuk argumen variabel $a dimasukkan nilai 2, $b dimasukkan nilai 3, $c dimasukkan nilai 1. Sehingga pada fungsi hitung_abc() akan dihitung rumus abc dari ketiga masukan tadi.

41