Modul TKJ - Web Dasarweb Dasar

Modul Mapel Web Dasar Kelas XI TKJ
MODUL WEB DASAR

Untuk Peserta Didik Kelas XI Sekolah Menengah Kejuruan Bidang Keahlian Teknik Komputer & Jaringan (TKJ)
Pengampu : Muhamad Slamet Riyadi, S.Kom

muhamadslametriyadi@yahoo.co.id
Computer Engineering and Network SMK Tunas Harapan Pati 2011

BAB 1
Sejarah Web
Tujuan Pembelajaran : Dapat mendefinisikan berbagai teori yang melandasi sebuah web, sehingga nantinya mengetahui arah dan tujuan daripada pembelajaran ini dan dapat membuat sebuah hasil akhir yaitu sebuah halaman web. Dapat menjabarkan tentang protokol yang digunakan dalam sebuah website dan
cara pengaksesan informasi melalui hypertext. Dapat mengoperasikan software pendukung yang dibutuhkan dalam pembuatan sebuah web.
1.1.
Pendahuluan Untuk memulai belajar pemrograman maupun membuat sebuah halaman tentang perintah-perintah
web khususnya HTML,selain diperlukan
penguasaan
pemrograman HTML tersebut, seorang pemrogram web juga harus mengetahui arah dan tujuan serta distribusi terhadap hasil yang akan diperoleh. Untuk mencapai tujuan tersebut seorang pemrogram harus tepat mengetahui juga teknologi yang membantu
untuk digunakan dalam membantu pekerjaannya. Untuk
penguasaan akan hal itu khususnya para pemula dibidang web, pada bab ini akan dibahas mengenai cikal bakal adanya sebuah web, teori-teori yang berkaitan dengan web, bahkan sampai dengan aplikasi-aplikasi maupun teknologi yang terlibat didalamnya. Untuk mendukung pembelajaran pada bab ini diperlukan
software-software yang sudah harus terinstal pada komputer yang dimiliki, adapaun software tersebut diantaranya : Sistem Operasi yang disarankan Windows 95 ke atas, meskipun Anda dapat menggunakan sistem operasi yang lain seperti linux, karena pembahasan pada buku ini menggunakan sistem operasi Windows. Browser dapat menggunakan Internet Explorer, tetapi jika anda mempunyai Browser yang lain juga dapat digunakan, seperti : Opera, Netscape, Mozila, dan lain sebagainya. Editor text untuk pemula disarankan menggunakan Notepad, karena untuk mencegah supaya para pemula lebih terlatih mengetik program yang dibuat dan tidak ketergantungan software tertentu, yang cenderung selalu instant dalam membentuk kode program tertentu. Serta dapat menginstal software lainya yang mendukung untuk merancang sebuah halaman web.
1.2.
Sejarah Web
2
Computer Engineering and Network SMK Tunas Harapan Pati
Awal perkembangan web dimulai pada bulan maret 1989 saat tim berner-lee yang bekerja di laboratorium fisika partikel eropa atau yang dikenal dengan nama CERN (consei european pour la recherce nuclaire) yang terletak di genewa swiss, mengajukan protokol (bahasa atau prosedur yang digunakan untuk menghubungkan antara komputer yang satu dengan lainnya) sistem distribusi informasi internet yang digunakan untuk berbagai informasi di antara para fisikawan.
Protokol inilah yang selanjutnya dikenal sebagai protokol world wide web dan dikembangkan oleh world wide web consortium (w3c). w3c adalah konsorsium dari sejumlah organisasi yang berkepentingan dalam pengembangan berbagai standar yang berkaitan dengan web. HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen- dokumen web yang ditulis atau berformat HTML (hypertext markup language). Dikatakan markup language karena HTML berfungsi untuk memperindah file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan tag-tag (perintah khusus) pada file teks biasa tersebut.
1.3.
Pengenalan Web Sumber daya yang ada di Internet jumlahnya sangat banyak, seperti Chating, E-mail, Milis, dan sebagainya. Salah satu sumber daya internet yang perkembangannya sangat pesat adalah www (world wide web) atau sering disebut dengan istilah web saja. Web didistribusikan dengan menggunakan pendekatan hypertext. Dimana hanya dengan menggunakan suatu teks yang tidak terlalu banyak/singkat bisa
dijadikan acuan untuk membuka dokumen yang lain. melalui pendekatan hypertext ini seorang user dapat memperoleh Caranya bisa berpindah dari suatu lain. Dokumen-dokumen yang informasi dokumen yang diinginkan dengan cepat. ke dokumen yang
diperlukan informasinya tersebut dapat terletak
dilokasi manapun, asalkan terletak pada jaringan internet. Pengaksesan informasi melalui pendekatan hypertext dapat dilihat pada ilustrasi gambar berikut ini :
Gambar 1. Pengaksesan informasi melalui hypertext. seseorang tidak harus membaca isi dokumen secara berurutan
Jaringan web telah membentang ke seluruh penjuru dunia. Tidak hanya terbatas pada situs-situs pribadi maupun kelompok saja yang ingin mempublikasikan karyakaryanya, web juga banyak digunakan oleh perusahaan baik skala kecil maupun besar yang ingin mempromosikan produk atau untuk melakukan transaksi bisnisnya.
1.4.
Aplikasi Web Banyak aplikasi web dibuat hanya dengan menggunakan bahasa yang disebut HTML (hypertext markup language) dengan menggunakan protokol yang disebut
HTTP (Hypertext Transfer Protocol). Bagaimana sebuah web dapat diakses oleh user dapat dilihat pada ilustrasi berikut ini :
Keterangan : Browser meminta sebuah halaman(informasi) ke suatu situs web melalui protokol http.
Permintaan sampai dan diterima oleh sebuah web server Web server segera mengirimkan dokumen html yang diminta ke klien bila ada, jika tidak akan memberikan pesan error bila dokumen yang diminta tidak ada
Browser pada sisi klien segera menampilkan dokumen(informasi) yang diterima berdasarkan kode-kode pemformat yang terdapat pada dokumen html.
1.5.
Software yang digunakan Software yang digunakan untuk membuat web banyak sekali jumlahnya, seperti : frontpage, dreamweaver, adobe golive, dll. Namun bagi para pemula dianjurkan untuk tidak menggunakan software-software tersebut terlebih dahulu. Karena kalau digunakan diawal anda belajar akan berdampak ketergantungan software bagi anda sendiri sebab semuanya serba instant untuk membuat sebuah halaman web. Oleh sebab itu disarankan menggunakan text editor notepad yang terdapat pada paket windows. Tampilan notepad dapat dimunculkan dengan cara : klik START PROGRAM ACCESSORIES NOTEPAD atau bisa juga dibuka dengan cara lain sesuai dengan setingan komputer Anda misalnya tinggal klik double pada icon notepad di desktop apabila Anda sudah meletakkan icon di desktop, dan mungkin ada cara lainya. Tampilan Notepad dapat dilihat pada gambar berikut :
Gambar 3. Membuka Notepad
Gambar 4. Tampilan Notepad
Sedangkan web browser yang akan digunakan pada latihan yang ada pada buku ini menggunakan Internet Explorer, namun apabila anda memiliki browser lain selain Internet Explorer, seperti Netscape, Opera, Mozila, dan lain sebagainya juga dapat Anda gunakan. Tampilan Internet Explorer dapat anda lihat pada gambar berikut ini :
Gambar 5. Tampilan Web Browser Internet Explorer Latihan Soal : Apakah Yang dimaksud dengan World Wide Web (www) ?
Ketika kita mengakses sebuah situs di internet (misalnya www.darmajaya.ac.id), biasanya di depan tulisan www terdapat tulisan http (lengkapnya
http://www.darmajaya.ac.id). Apakah maksud tulisan http tersebut ?
Jelaskan mekanisme kerja pengaksesan sebuah dokumen html ?
Apakah yang dimaksud dengan Web Server ?
Apakah yang dimaksud Web Browser ?
Selamat Mengerjakan !
BAB 2 Pengantar Web

Tujuan Pembelajaran : Bisa menuliskan struktur dokumen HTML dan tag HTML dengan benar kedalam software pendukung untuk pembuatan sebuah halaman web. Bisa mendefinisikan fungsi berbagai tag HTML. Bisa menggunakan berbagai tag beserta atribut yang ada dalam dokumen/kode- kode HTML.
2.1.
Pendahuluan Hypertext Markup Language (HTML) merupakan dasar untuk
membuat sebuah halaman website. Dokumen dan aplikasi yang dapat berjalan di atas web browser umumnya memiliki format hypertext markup language (HTML). Meskipun sekarang terdapat banyak tool atau software yang dapat
digunakan untuk merancang sebuah halaman secara WYSIWYG (what you see is what you get), jadi apa yang anda lihat itulah yang akan anda dapatkan seperti frontpage, dreamweaver, adobe golive, dll. Namun anda harus tetap menguasai HTML karena HTML merupakan dasar apabila Anda ingin mempelajari dan lebih mendalami tentang web programming. Hal ini menunjukan bahwa sangat pentingnya mempelajari dasar-dasar HTML. Karena itu untuk dapat melakukan pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML. Pada bab ini akan dipelajari dasar-dasar penggunaan kode-kode HTML daiantaranya : Struktur dasar HTML, dasar penggunaan TAG, penggunaan komentar, penggunaan tag break row, penggunaan tag paragraf, penggunaan tag center, penggunaan tag heading, menampilkan garis horizonatal dan penggunaan tag divisi. 2.2. Struktur Dokumen HTML Setiap dokumen atau halaman HTML memiliki struktur atau susunan file seperti terlihat pada contoh berikut :
Struktur.html <html> <head> <title>judul yang browser</title> </head> <body> pada bagian ini dapat berisikan perintah-perintah menampilkan: Text, gambar, suara dan lain-lain. untuk ingin ditampilkan pada title bar web

</body> </html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> </head> dan tag <body> </body>. Header dari halaman HTML diapit oleh tag <head> dan bagian ini tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> </title> yang berfungsi untuk menampilkan judul pada title bar window pada web browser. Tag lain misalnya<meta> dan tag-tag lainya yang akan kita pelajari selanjutnya. Bagian kedua yang diapit oleh tag body merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda dapat menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin anda sampaikan pada pengguna nantinya. Untuk lebih memperjelas perhatikan gambar berikut ini :
2.3.
Dasar Penggunaan TAG Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol < dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / . misalnya pasangan dari tag <example> adalah </ example >. Sebagian tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita kenali berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag ditulis dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran. Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : <P align=center>, pada contoh ini P adalah nama tag, sedangkan align adalah
nama atribut dan center adalah nilai atribut. 2.4. Pemberian Catatan/Komentar pada Dokumen HTML Catatan adalah bagian dari kode HTML yang diabaikan oleh browser.
Kegunaan catatan/komentar dalam kode HTML adalah sebagai keterangan yang berguna untuk pembaca kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan bahkan bisa mencakup beberapa baris.
Komentar.html  <html> <head> <title>Hai</title> <Body>  Saya Sedang Belajar HTML </body> </html>
2.5.
Penggunaan Tag Break Row (pindah baris) Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas sekarang perhatikan contoh berikut ini :
Breakrow.html <html> <head> <title>belajar tag br</title> </head> <body> Mudah-mudahan anda cepat bisa belajar HTML <br> Amin ! </body> </html>
2.6.
Penggunaan Tag Paragraf Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih jelasnya perhatikan contoh di bawah ini.
Paragraf1.html <html> <head> <title>belajar tag paragraf</title> </head> <body> Senja Telah Tiba<p> Mentari kian temaram<br>
10

Samar disela-sela daun cemara<br> Angin mulai berhembus dari samudera<br> Pertanda malam telah tiba </body> </html>
Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Sebagai contoh :
tambahkan pada kode HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut :
Paragraf2.html <html> <head> <title>belajar tag paragraf</title> </head> <body> Senja Telah Tiba <p align = center> Mentari kian temaram<br> Samar disela-sela daun cemara<br> Angin mulai berhembus ke samudera<br> Pertanda malam telah tiba<br> </p> Bandar Lampung, 2004 </body> </html>
2.7.
Penggunaan Tag Center Untuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah : </center>. Untuk jelasnya perhatikan latihan di bawah ini :
center.html <html> <head> <title>belajar tag center </title> </head> <body> <center> Addres : <hr> Green Kost Production<br> <hr size = 5 width = 25% align = left 12<br> Gedung Meneng<br> Bandar Lampung 35145 </center> </body> </html> noshade> Jl. Jambu 1 No.
11
2.8.
Penggunaan Tag Heading Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini : <H1> </H1> (Heading 1) <H2> </H2> (Heading 2) <H3> </H3> (Heading 3) <H4> </H4> (Heading 4) <H5> </H5> (Heading 5) <H6> </H6> (Heading 6)
heading.html <html> <head> <title>belajar tag heading</title> </head> <body> <h1>ukuran heading 1</h1> <h2>ukuran heading 2</h2> <h3>ukuran heading 3</h3> <h4>ukuran heading 4</h4> <h5>ukuran heading 5</h5> <h6>ukuran heading 6</h6> </body> </html>
Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify. Cara menuliskan pada dokumen HTML adalah <h1 align=center>. 2.9. Menampilkan Garis Horisontal (Horizontal Row) Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat dokumen web sering menambahkan garis horisontal biasanya
12
diletakkan di bawah sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali, caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa ditambahkan atribut-atribut seperti berikut ini : Size Width Align Noshade : Untuk merubah Ketebalan garis : Untuk merubah lebar garis : Untuk mengatur tataletak teks dalam baris : Untuk merubah agar garis yang dibuat tidak disertai bayangan
Berikut adalah contoh kode HTML yang menggunakan tag ini :

Garis.html <html> <head> <title>belajar membuat garis </title> </head> <body> Addres : <hr> Green Kost Production<br> <hr size = 5 width = 25% align = left 12<br> Gedung Meneng<br> Bandar Lampung 35145 </body> </html> noshade> Jl. Jambu 1 No.
2.10. Penggunaan Tag Divisi Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe sama. Fungsinya bisa juga disamakan dengan tag <P>. perhatikan pada
contoh berikut ini :
Divisi.html <html> <head> <title>belajar tag div </title> </head> <body> <div align=right> Addres : <hr> Green Kost Production<br> <hr size = 5 width = 25% noshade> Jl. Jambu 1 No. 12<br> Gedung Meneng<br> Bandar Lampung 35145 </div> </body> </html>
13
Latihan Soal :
Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti gambar berikut ini :
14
BAB 3 Pengaturan Text pada dokumen HTML

Tujuan Pembelajaran : Bisa menggunakan tag yang berfungsi untuk mengatur teks pada dokumen HTML. Bisa menjelaskan dan membedakan tag-tag dasar dan tag-tag untuk mengatur teks yang ada pada dokumen HTML. Dapat melakukan pengaturan teks pada dokumen HTML sehingga tampilan dokumen HTML yang dibuat menjadi lebih indah. 3.1. Pendahuluan Untuk memperoleh suatu tampilan yang menarik dalam dokumen HTML, diperlukan kemampuan khusus salah satunya yaitu kemampuan Untuk untuk
memformat/mengatur teks pada
dokumen
HTML.
melakukan
pengaturan teks tidak terlepas dari penggunaan tag-tag HTML Setelah kita mengetahui cara dan fungsi tag-tag dasar HTML seperti yang telah kita pelajari pada bab sebelumnya. selanjutnya pada bab ini akan dipelajari penggunaan tag yang lain, yang dipergunakan untuk pengaturan teks pada dokumen HTML. 3.2. Pengaturan Teks Pada HTML terdapat sejumlah tag yang berguna untuk mengatur bentuk-bentuk teks. Bentuk-bentuk teks tersebut terbagi dalam dua jenis, yaitu bentuk teks secara fisik dan bentuk teks secara logis. Pada tabel berikut ini merupakan contoh TAG yang digunakan untuk mengatur bentuk teks secara fisik : Tag <Strike>Teks</Strike> <I>Teks</I> <B>Teks</B> <SMALL>Teks</SMALL> <BIG>Teks</BIG> <TT>Teks</TT> <U>Teks</U> <SUB>Teks</SUB> <SUP>Teks</SUP> Keterangan Teks menjadi strikethrough/ bergaris tengah Teks menjadi terlihat miring Teks menjadi tebal Teks terlihat lebih kecil daripada ukuran normal Teks terlihat lebih besar dari ukuran normal Teks terlihat seperti ketikan mesin ketik Teks menjadi bergaris bawah Teks menjadi subskrip Teks menjadi superskrip
Tabel 1. Daftar Tag Fisik
Penerapan penggunaan tag-tag pada tabel dapat dilihat pada program berikut :
15

BentukTeksfisik.html <html> <head><title>mengatur teks secara fisik </title></head> <body> <p><strike> strikethrough </strike></p> <i>Teks Miring</i><br> <b>Teks yang ditebalkan</b><br> <small>Teks dengan tag small</><br> Teks Normal<br> <big>Teks dengan tag Big</big><br> Teks Normal <sub>subskrip</sub><br> Teks Normal <sup>superskrip</sup><br> <tt>Teks seperti mesin ketik</tt><br> <u>Teks yang diberi garis bawah</u><br> <b><u><i>Teks garis bawah, miring, tebal</u></i></b> </body> </html>
Pada tabel berikut ini merupakan contoh TAG yang digunakan untuk mengatur bentuk teks secara logis : 3.3. Penggunaan Tag Pre Tag ini digunakan untuk menampilkan keadaan yang telah anda format di dalam kode HTML akan ditampilkan seperti itu pula di web browser. Untuk memperjelas kegunaan tag tersebut kerjakan latihan berikut :
Tagpre.html <html> <head> <title>praformat</title> </head> <body> <h2>Daftar Harga Komputer :</h2> <pre> Intel Pentium I 233 ...750.000 Intel Pentium II 266 . 900.000 Intel Pentium III 800 1.700.000 Intel Pentium IV 1,7 . 3.000.000 </pre> Harga sewaktu-waktu dapat berubah </body> </html>
3.4.
Penggunaan Tag Blockquote Paragraf/kutipan dokumen yang panjang umumnya dalam tag diletakan dalam
dengan menempatkan
<BLOCKQUOTE>
</BLOCKQUOTE>. Teks akan ditampilkan menyesesuaikan dengan ruangan

yang tersedia. Selain itu tag ini akan membuat paragraf/kutipan diletakan sedikit menjorok ke kanan. Contoh penggunaan tag blockquote dapat dilihat pada kode html berikut ini :
Blockquote.html <html> <head> <title>blockquote</title> </head> <body> <h2>Pagi Di Kotaku :</h2> <blockquote> Bulan yang sudah tidak bulat lagi tampak bersinar pucat di langitlangit karena bumi, memang mungkin inilah yang disebut bulan kesiangan, di ufuk yah! timur adalah mentaripun mulai terlihat ini sinarnya kita
pertanda pagi sudah tiba. Kalau kita berada di perkampungan atau di pinggiran hutan saat-saat suara-suara seperti yang dengar binatang pagi, kicauan burung-burung menyambut fajar,
dan mungkin desiran angin pagi yang menggugurkan embun nan jernih. Namun ditempat ini kicauan burung ataupun suara binatang pagi susah sekali terdengar. Yang sesekali terdengar hanyalah lolongan anjing meneriaki jalanan, penarik dan gerobak sampah keliling yang hilir mudik nafkah. mengangkut sampah yang tak kunjung habis, kicauan klakson mobil di teriakan-teriakan mulut manusia mencari Beginilah suasana pagi di kotaku. </blockquote> Kotaku pagi ini </body> </html>
3.5.
Penggunaan Tag Acronym Tag Acronym digunakan untuk memberikan keterangan terhadap suatu teks yang dianggap merupakan singkatan atau juga bisa teks yang bukan
singkatan tetapi memerlukan penjelasan tertentu. Untuk melihat singkatan atau keterangan terhadap suatu teks tertentu adalah dengan meletakan pointer mouse tepat berada di teks yang sudah kita berikan perintah tag Acronym, kemudian secara otomatis akan muncul sebuah keterangan yang terblok warna kuning dan letaknya biasanya berada di bawah teks tersebut.
Bentuk pendefinisian singkatan dan kepanjangan atau keterangan suatu istilah adalah sebagai berikut : <ACRONYM TITLE =Kepanjangan>Singkatan</ACRONYM> Contoh lengkap penggunaan tag ini dapat dilihat pada kode-kode HTML berikut :

Acronym.html <html> <head> <title>singkatan</title> </head> <body> <acronym title=Televisi Republik Indonesia>TVRI</acronym> adalah telivisi pemerintah, sedangkan <acronym title=Televisi Pendidikan Indonesia>TPI</acronym> adalah telivisi swasta. </body> </html>
3.6.
Penggunaan Tag Font Tag font digunakan untuk mengatur jenis, ukuran, maupun warna font. Untuk menentukan jenis font, atribut font yang digunakan adalah Face. Contoh : <font face = arial>teks yang ditampilkan</font> Untuk menentukan ukuran, atribut yang digunakan adalahSize. Contoh : <font size = 10>teks yang ditampilkan</font> Untuk menentukan warna, atribut yang digunakan Color. Contoh : <font color = blue>teks yang ditampilkan</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 RGB 000080 808000 800080 FF0000 C0C0C0 008080 FFFF00 FFFFFF
Tabel 3. Daftar nama warna dan kode rgbnya

Font.html <html> <head> <title>mengatur font html</title> </head> <body> <font face=caurier size=10 color=green> Ini adalah latihan memberikan<br> efek font seperti : <br> jenis font, ukuran, warna<br> pada dokumen HTML </font> </body> </html>
18
Selain pengaturan color font diatas terdapat juga tag untuk menentukan background warna dan textnya yaitu BGCOLOR dan TEXT, seperti terlihat dalam kode berikut :
Bgcolor.html <html> <head> <title>singkatan</title> </head> <body bgcolor=black text=white> Normal font<br> <font color=blue>warna biru</font><br> <font color=red>warna merah</font><br> <font color=green>warna hijau</font> </body> </html>
3.7.
Penggunaan Tag Basefont Tag basefont berfungsi menentukan ukuran default font untuk seluruh
halaman. Tatacara penulisan tag ini dapat dilihat pada kode html berikut ini
Basefont.html <html> <head> <title>basefont</title> </head> <body> <basefont size=5 face=verdana color=pink> teks Normal<br> <font color=blue>Warna biru </font><br> ****** </body> </html>
3.8.
Penggunaan karakter Spesial Karakter spesial disebut juga dengan entity yaitu karakter yang dalam pembuatannya menggunakan sejumlah simbol kode-kode tertentu. Pada HTML terdapat
yang digunakan
untuk
memunculkan
karakter-karakter
khusus yang menerangkan suatu entitas karakter seperti ataupun numerik seperti . Untuk contoh lain dapat dilihat pada Tabel berikut ini :
19
Simbol :
HTML Ä µ Ë Ï Ö Ü ß
Simbol
HTML ä ë ï ö ü © &quote;
Simbol spasi
TM
Spasi &
HTML ® ™ & » «
Simbol < > x
HTML < > × ÷ ½ ¾ ¼
Tabel 4. Simbol dan kode HTML penggunaan Entitas Karakter dan Numerik Hasil dari kode-kode tersebut sebagian dapat dilihat dalam kode program berikut :
Character.html <html> <head><title>char</title></head> <body> <h1>MessagË From Kahlil Gißran</h1>
ßunga-bunga Padang<br>
Adalah Anak-anak kasih sang Mentari<br> Dan
©inta Kasih Semesta Alam, &<br> Anak-anak Manusia ©inta & Kasih Sayang<br><hr>
Adalah<br> Bunga-bunga »<br> «<br> ÷<br> ä </body> </html>
© 2005<br>
20
Latihan Soal : Sebutkan dan Jelaskan fungsi Tag untuk mengatur teks pada dokumen HTML, yang tidak ada pada pembahasan di bab ini dari berbagai sumber. Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti gambar berikut ini :
21
BAB 4 Bullet and Numbering pada Dokumen HTML

Tujuan Pembelajaran : Bisa menggunakan tag yang berfungsi untuk membuat Bullet dalam berbagai bentuk dan cara. Bisa menggunakan tag yang berfungsi untuk membuat Numbering dalam berbagai bentuk dan cara. 4.1. Pendahuluan Pada tampilan dokumen HTML terkadang kita menginginkan terlihat lebih unik dan terlihat menarik. Selain itu mungkin kita hanya ingin memperjelas informasi tertentu, dalam hal ini misalnya kita ingin informasi tersebut diletakan pada poinpoin khusus atau list-list khusus. Untuk membuat poin atau list tersebut
pada bab ini kita menggunakan dua model, yaitu Bullet dan Numbering. Bullet dan Numbering tersebut merupakan simbol atau karakter khusus yang diletakkan didepan suatu teks tertentu.
4.2.
Daftar Item dengan Bullet Pada HTML untuk membuat Bullet atau yang sering dikenal dengan tanda daftar list, kita dapat menggunakan tag <UL>. Dan untuk mengakhiri penggunaan tag <UL> diakhir teks yang diberi tanda bullet diberikan tanda </UL>. cara penulisan pada dokumen HTML dapat dilihat di bawah ini :
Bullet.html <html> <head> <title>pemakaian tag ul</title> </head> <body> <h2>Daftar Nama Ikan :</h2> <ul> Louhan<br> Sepat<br> Betok<br> Nila<br> Lele Dumbo </ul> ******** </body> </html>
Pada netscape navigator, jenis bullet dapat ditentukan melalui atribut type pada tag <li>. Kemungkinan nilai untuk type diperlihatkan pada kode-kode dan hasil program berikut :
22

Bullet2.html <html> <head> <title>pemakaian tag ul</title> </head> <body> <h2>Daftar type li :</h2> <ul> <li>hasil li tanpa diberi atribut type</li><br> <li type="circle">Circle<br> <li type="disk">Disk<br> <li type="square">Square<br> </ul> ******** </body> </html>
4.3.
Numbering Adakalanya daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa anda harus menuliskannya. Untuk lebih jelasnya kerjakan latihan berikut :
Numbering.html <html> <head> <title>pemakaian tag ol</title> </head> <body> <b>Cara Memasak Mie Instant</b> <ol> <li>Masak air di panci sampai mendidih<br> <li>Buka pembukus mie instant<br> <li>Masukan Mie + bumbu kedalam Panci<br> <li>Tunggu +- 3 menit<br> <li>Mie siap dihidangkan </ol> </body> </html>
4.4.
Daftar Definisi HTML menyediakan jenis daftar khusus yang disebut daftar definisi (definition list). Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah diletakan agak menjorok ke kanan. Tiga buah pasangan tag yang terkait dengan daftar definisi dapat dilihat pada
23
tabel berikut :
Tag <DD><DD> <DT></DT> <DL></DL>
Catatan Digunakan untuk menyatakan wadah bagi definisi istilah Digunakan untuk menyatakan wadah bagi istilah yang akan didefinisikan Digunakan untuk menyatakan wadah bagi daftar
Tabel 5. Daftar Tag Definition List Sebagai contoh perhatikan kode berikut :
Definisi.html <html> <head> <title>definisi</title> </head> <body> <b>Kamus Teknologi Informasi</b> <dl> <dt>HTML</dt> <dd>Bahasa yang digunakan untuk menyusun web</dd> <dt>HTTP</dt> <dd>Protokol yang dipakai untuk mentransfer HTML</dd> </dl> </body> </html>
24
Latihan Soal : Dengan menggunakan kode-kode HTML, buat tampilan dokumen HTML seperti gambar berikut ini :
Dengan menggunakan kode-kode HTML, buat tampilan dokumen HTML seperti gambar berikut ini :
25
BAB 5 Menampilkan Gambar

Tujuan Pembelajaran : Dapat menampilkan gambar pada dokumen HTML dengan menggunakan tag tertentu. Bisa memformat tampilan gambar dalam berbagai bentuk dan ukuran serta tatacara peletakan pada naskah/dokumen HTML sehingga diperoleh tampilan web yang komplek. 5.1. Pendahuluan Untuk menambah daya dilakukan adalah selain tarik tampilan dokumen HTML kita, yang harus bisa menampilkan informasi yang menarik dan
memformat teks juga dibutuhkan unsur lain yaitu adanya gambar. Selain itu, adanya gambar ditampilan dokumen HTML kita mungkin akan menunjang atau memperjelas terhadap informasi yang ditampilkan. Untuk menampilkan gambar tersebut yang diperlukan selain gambar itu sendiri, kita juga membutuhkan tag-tag HTML yang berperan untuk menampilkan gambar. Pada bab ini akan dipelajari : Mengenal jenis gambar, tag yang digunakan dalam menampilkan gambar,
memformat gambar, menempatkan teks pada gambar, membuat bingkai pada gambar dan menyediakan teks alternatif.
5.2.
Mengenal Jenis Gambar. Tipe gambar banyak jumlahnya, tetapi tidak semua tipe gambar dapat ditampilkan dalam dokumen HTML. Sebelum kita mulai belajar menampilkan gambar kedalam tampilan dokumen kita, sebaiknya kita mengenal tipe gambar yang sering atau umum digunakan pada sebuah dokumen HTML agar tidak terjadi masalah pada tampilan kita di browser nantinya. Berikut ini dapat dilihat beberapa format atau tipe gambar yang dapat digunakan, namun ini hanya sebagian tipe gambar saja. Jenis Gambar JPEG TIFF/TIF PNG GIF Ekstensi .jpg/.jpeg .tif .png .gif Kepanjangan Ekstensi Joint Photographic Expert Group Tagged Image File Format Portable network Graphics Graphis Interchange Format
Tabel 6. Daftar jenis gambar
26
5.3.
Menampilkan Gambar Tag yang digunakan untuk menampilkan gambar pada dokumen HTML adalah <img>. Atribut yang menyertai tag ini banyak sekali, tetapi tag yang harus selalu disertakan hanya ada satu, yaitu atribut src. Bentuk penulisan dari tag <img> adalah sebagai berikut : <IMG SRC = nama_gambar> Kode berikut memberikan contoh pemakaian tag <IMG> :
Gambar.html <html> <head> <title>gambar</title> <body> Dragon Ball <img src = "C:\gambar\goten.jpg"> </body> </html>
Keterangan : setelah anda menuliskan kode HTML di atas, gambar yang diinginkan akan muncul apabila di drive tujuan yang ditulis tersebut ada file gambar goten.jpg pada drive c: dan folder gambar. Pada baris program <img
src="C:\gambar\goten.jpg">, anda bisa merubah lokasi yang ada sesuai dengan lokasi letak gambar yang diinginkan yang ada pada komputer masingmasing. 5.4. Background Gambar Background atau latar belakang sebuah web selain menggunakan warna kita juga bisa menggunakan background berupa gambar. hal ini diperlukan untuk
menambah daya tarik sebuah dokumen yang dibuat. Namun untuk membuat background yang berupa gambar kita harus pandai memilih gambar yang digunakan, jangan sampai dengan adanya gambar membuat orang yang
melihat menjadi kurang nyaman. Untuk menyertakan suatu gambar sebagai latar belakang, anda bisa menggunakan atribut background pada tag <img>. Bentuknya sebagai berikut : <body background = nama berkas gambar> Contoh kode HTML yang menggunakan gambar latar belakang dapat dilihat pada kode berikut :
27

Background.html <html> <head> <title>gambar latarbelakang</title> <body background="C:\gambar\clamp02.jpg"> </body> </html>
5.5.
Penggunaan Atribut Pada Tag <IMG> 5.5.1. Atribut Border Untuk memberikan border/bingkai pada sebuah gambar, kita dapat
menggunakan atribut border pada tag <img>. Untuk menampilkan border tersebut caranya adalah dengan memberikan bilangan pada atribut border, misalnya angka 1, 2, 3, dan seterusnya sesuai dengan yang kita inginkan. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel. Kode berikut memberikan contoh penggunaan atribut border :
<img src="D:\gambar\logos\test.jpg" border=5>
5.5.2. Atribut Pengatur Teks Terhadap Gambar Pada tag <IMG> terdapat atribut bernama align yang digunakan untuk mengatur penempatan teks terhadap gambar. Nilai yang terdapat pada atribut align adalah : BOTTOM MIDDLE TOP : Teks terletak pada bagian bawah : Teks terletak di tengah-tengah : Teks terletak di bagian atas
Untuk lebih jelasnya perhatikan penulisan kode berikut ini :

Letakteks.html <html> <head> <title>peletakan teks</title> <body> Dragon Balls <img src = "C:\gambar\clamp02.jpg" align=top> </body> </html>
Pada atribut align, top dapat diganti dengan middle dan bottom untuk mendapatkan posisi yang kita inginkan.
28
5.5.3. Menyediakan Teks Alternatif Gambar yang telah ditampilkan ada kemungkinan tidak bisa muncul atau terlihat pada kondisi tertentu, misalnya browser yang digunakan tidak mendukung adanya gambar. Untuk mengantisipasi hal seperti ini, dapat diberikan teks alternatif sebagai pengganti gambar. Caranya adalah dengan memberikan atribut ALT pada tag <IMG>. Sebagai contoh, perhatikan kode berikut :
Alternatif.html <html> <head> <title>membuat teks alternatif</title> <body> halo my friend <img src = "..\clamp02.jpg" alt ="(gambar dian sastro)" align ="middle"> ini adalah gambar yang telah diberi alternatif teks<br> selamat mencoba </body> </html>
5.5.4. Atribut Untuk Mengatur Ukuran gambar Ukuran gambar yang tampil umumnya menyesuaikan pada keadaan asli gambar tersebut. Bila kita menginkan perubahan ukuran gambar tersebut sesuai dengan area yang kita sediakan, kita bisa memberikan atribut pada tag <IMG> yang terdiri dari atribut height dan width. HEIGHT untuk mengatur tinggi gambar WIDTH untuk mengatur lebar gambar
Untuk mengatur ukuran gambar tersebut kita harus memberikan nilai tertentu pada kedua atribut tersebut. Nilai yang diberikan pada kedua atribut berupa nilai dengan satuan piksel. Untuk mengetahui penggunaan kedua atribut tersebut perhatikan pada baris program berikut :
<img src = "C:\gambar\dian\Dian.jpg" ><br> <img src = "C:\gambar\dian\Dian.jpg" height=100 width=100 > <img src = "C:\gambar\dian\Dian.jpg" height=50 width=50 >
5.5.5. Atribut Untuk mengatur Ruang Gambar Atribut yang akan digunakan dalam hal ini adalah Atribut VSPACE dan HSPACE. Atribut ini dapat digunakan untuk mengatur jarak gambar terhadap teks. Untuk memberikan jarak secara vertikal sesuai dengan nilai
29
yang diberikan kita dapat memberikan atribut
VSPACE. Sedangkan
Untuk memberikan jarak secara horisontal sesuai dengan nilai yang diberikan kita dapat memberikan atribut HSPACE. Nilai yang diberikan pada atribut ini dalam satuan pixel. Untuk melihat bagaimana penggunaan kedua atribut ini, perhatikan baris program berikut ini :
<img src="C:\gambar\dian\Dragon.jpg" hspace="25" align="left"> <img src="C:\gambar\dian\Dragon.jpg" vspace="25" align="left">
5.6.
Gambar Animasi Jenis tampilan gambar ada bermacam-macam, ada gambar yang diam dan ada gambar yang bergerak. Gambar bergerak biasanya disebut dengan gambar animasi. Format gif merupakan format gambar bergerak yang sering digunakan dalam dokumen HTML. Gambar animasi dengan format gif, dapat dibuat
dengan software-software pembuat animasi misalnya Macromedia Flash, Adobe Premier, Ulead Gif Animator, dsb. Selain menggunakan ekstensi .gif, juga ekstensi lain juga bisa digunakan salah satunya adalah yang berekstensi .swf yang
dihasilkan oleh software keluaran macromedia yaitu Macromedia Flash. Untuk menampilkan gambar yang berbentuk animasi dalam browser caranya sama seperti anda mengetikan kode-kode untuk meletakan gambar yang bukan animasi. untuk jelasnya lihat kode-kode berikut :
Animasi.html <html> <head> <title>gambar animasi</title></head> <body> <img src=/gambar/anima.gif> </body> </html>
30
Latihan Soal : Buatlah sebuah halaman web yang disertai dengan background gambar. Dengan menggunakan kode-kode HTML, buat tampilan halaman seperti gambargambar berikut ini :
Ukuran normal
31
BAB 6 Menggunakan Tabel

Tujuan Pembelajaran : Dapat membuat dan menampilkan informasi yang berbentuk tabel pada sebuah halaman web. 6.1. Bisa memformat tabel dalam berbagai bentuk. Bisa memanipulasi tabel untuk mengatur bentuk template suatu halaman web. Pendahuluan Untuk mendapatkan tampilan yang lebih menarik diperlukan perencanaan yang baik. Salah satunya adalah diperlukan penguasaan terhadap kode-kode program HTML serta tepatnya penggunaan dari kode yang ada tersebut. Semua hal tersebut harus diperhatikan secara benar supaya hasilnya terlihat lebih profesional. Kode-kode HTML yang digunakan untuk mendapatkan suatu tampilan dokumen HTML jumlahnya banyak, seperti yang sebagian besar telah kita pelajari pada bab-bab sebelumnya. Pada bab ini akan dibahas tentang teknik-teknik
pembuatan tabel pada dokumen HTML. Tabel dapat digunakan untuk membuat suatu bentuk informasi yang ditampilkan dalam bentuk kotak-kotak, yang biasanya terdiri kolom dan baris. Selain itu dengan tabel kita bisa mengatur tampilan yang ada pada sebuah halaman web kedalam bentuk tampilan tertentu.
6.2.
Tag Pada Tabel Tabel biasa digunakan dalam pembuatan sebuah halaman web untuk
memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dilihat dan dibaca. Tag-tag yang digunakan untuk pembuatan tabel dapat dilihat pada tabel berikut : Tag <TABLE></TABLE> <TD></TD> <TH></TH> <TR><TR> Catatan Mengawali dan mengakiri sebuah tabel
<CAPTION></CAPTION> Menentukan judul pada tabel Membuat sebuah sel data Membuat judul kolom Membuat sebuah baris dalam tabel
Tabel 7. Daftar Tag Untuk Tabel
32
Edited by Foxit Reader Copyright(C) by Foxit Software Company,2005-2007 For Evaluation Only.
Contoh sederhana penggunanan tabel dapat dilihat pada kode berikut :
Tabel1.html <html> <head> <title>tabel</title> </head> <body> <table> <caption>Daftar Harga Buah </caption> <tr><th>Nama Buah</th><th> Harga/Kg</th></tr> <tr><td>Jeruk</td><td>7.500</td></tr> <tr><td>Anggur</td><td>15.000</td></tr> <tr><td>Aple</td><td>8.500</td></tr> <tr><td>Peer</td><td>10.500</td></tr> <tr><td>Melon</td><td>6.500</td></tr> </table> </body> </html>
6.3.
Garis pada Tabel I n f o r m a s i yang ditampilkan pada sebuah tabel bentuknya bervariasi, pada tabelnya ada yang menggunakan garis dan ada yang tidak. Untuk mengatur apakah garis tabel dimunculkan atau tidak kita bisa menggunakan atribut border pada tag table. Adapun bentuk penulisan tag ini adalah <table border = bilangan>. Kalau border tidak disertakan dalam tag <table>, nilai border dianggap sama dengan nol, maka hasil yang diperoleh garis <table border=0>. Contoh dalam bentuk program sebagai berikut :
Tabel2.html <html> <head> <title>tabel</title> </head> <body> <table border = 1> <caption>Daftar Harga Buah </caption> <tr><th>Nama Buah</th><th> Harga/Kg</th></tr> <tr><td>Jeruk</td><td>7.500</td></tr> <tr><td>Anggur</td><td>15.000</td></tr> <tr><td>Aple</td><td>8.500</td></tr> <tr><td>Peer</td><td>10.500</td></tr>
tidak akan
ditampilkan. Dengan kata lain, <table> sama dengan kita menggunakan perintah
33

<tr><td>Melon</td><td>6.500</td></tr> </table> </body> </html>
6.4.
Judul Table Biasanya untuk membuat sebuah tabel selalu disertai dengan judul tabel. Judul tabel letaknya bisa di atas tabel atau di bawah tabel. Untuk membuat judul tabel tag yang digunakan adalah <caption>. Apabila anda hanya menggunakan tag <caption> dan diakhiri dengan penutup </caption> maka judul secara otomatis berada di atas tabel. Sedangkan bawah tabel kita untuk membuat judul yang letaknya di
tinggal menambahkan atribut align yang diberikan nilai
botom. Bentuk penulisannya dapat dilihat pada satu baris kode berikut ini : Kode untuk membuat judul di atas tabel
<caption>Daftar Harga Buah </caption>
Kode untuk membuat judul di bawah tabel

<caption align=bottom>Daftar Harga Buah </caption>
6.5.
Warna Latar belakang Tabel Tabel yang dibuat tidak mutlak hanya berwarna putih/transparan dengan garis berwarna hitam saja, melainkan warna background tabel juga bisa berubah. Untuk menambahkan warna latar belakang tersebut tabel, anda bisa menggunakan atribut bgcolor pada tag <table>. Untuk pemberian nilai(warna) pada atribut bgcolor dapat dilihat kembali pada tabel warna yang sudah dibahas pada bab sebelumnya. Cara penulisan kodenya dapat diperhatikan pada penggalan kode program berikut ini. .
<table bgcolor =Green border = 3> <caption>judul tabel </caption> <tr><th></th><th>/Kg</th></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table>
Kode program di atas digunakan untuk memberikan warna background/seluruh tabel. Sedangkan apabila kita hanya ingin memberikan warna pada sebuah sel saja atau warna teks dalam sebuah tabel, penulisan kode program ddapat dilihat pada penggalan kode program berikut ini :
<table bgcolor =blue border = 1> <tr><td>kolom 1</td><td>kolom 2</td></tr>
34
<tr> <td bgcolor=green>kotak hijau</td> <td><font color =white>teks putih</td> </tr> </table>
6.6.
Pengaturan Teks Pada Tabel Untuk mengatur peletakan teks di dalam sebuah sel, kita dapat menggunakan atribut VALIGN yang dapat diletakan pada tag <td>. Posisinya dapat diatur menjadi atas, tengah dan bawah. Untuk menentukan posisi tersebut kita harus memberikan nilai tertentu pada atribut valign. Nilai yang dapat diberikan adalah : top untuk posisi atas, Middle untuk posisi tengah dan Bottom untuk posisi bawah. Contoh kode HTMLnya :
<table border =1 height=200> <tr><td valign=top>Valign adalah Top</td></tr> <tr><td valign=Middle>Valign adalah Middle</td></tr> <tr><td valign=Bottom>Valign adalah Bottom</td></tr>
6.7.
Penggabungan Sel Dengan menggunakan kode-kode HTML, sejumlah baris dan kolom pada tabel dapat digabungkan. Untuk menggabungkan sel baik itu baris maupun kolom, kita hanya menambahkan atribut tertentu pada tag <td> yang ada pada tabel. Atribut rowspan digunakan untuk menggabungkan beberapa baris, sedangkan atribut colspan digunakan untuk menggabungkan kolom. Penggunaan rowspan dan colspan dapat dilihat pada baris program berikut : rowspan
<table border = "1"> <caption>judul kolom</caption> <tr><Td rowspan = "3">brs1gabung kol1</td><td> brs1 kol2</td></tr> <tr><td> brs2 kol2</td></tr> <tr><td> brs3 kol2</td></tr> <tr><td rowspan = "4"> brs4gabung kol1</td><td> brs5 kol2</td></tr> <tr><td> brs6 kol2</td></tr> <tr><td> brs7 kol2</td></tr> <tr><td> brs8 kol2</td></tr> </table>
35
colspan
<table border = "1"> <caption>Daftar Harga </caption> <tr><th colspan = "2">brs 1 kol 1&2</th></tr> <tr><td>brs2 kol1</td><td> brs2 kol2</td></tr> <tr><td>brs3 kol1</td><td> brs3 kol2</td></tr> <tr><td>brs4 kol1</td><td> brs3 kol2</td></tr> <tr><th colspan = "2"> brs 5 kol 1&2</th></tr> <tr><td> brs6 kol1</td><td> brs6 kol2</td></tr> <tr><td> brs7 kol1</td><td> brs7 kol2</td></tr> <tr><td> brs8 kol1</td><td> brs8 kol2</td></tr> </table>
Pada penggunaannya rowspan dan colspan juga dapat digabungkan sekaligus dalam pembuatan tabel. 6.8. Alignment Tabel Untuk mengatur alignment atau perataan teks dalam sebuah tabel, dapat digunakan atribut align. Atribut tersebut dapat digunakan pada <tr>, <th> dan <td>. Untuk mengatur perataannya, baik rata kanan, kiri dan rata tengah kita harus memberikan nilai tertentu pada atribut align. Nilai yang ada pada atribut ini adalah left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah.. Untuk lebih jelasnya lihat pada penggalan kode program berikut : Penggunaan pada <TH>
<th align=left>Teks akan menjadi rata kiri</th> <th align=center> Teks akan menjadi rata tengah </th> <th align=right> Teks akan menjadi rata kanan </th>
Penggunaan pada <TD>

<td align=left>Teks akan menjadi rata kiri</td> <td align=center> Teks akan menjadi rata tengah </td> <td align=right> Teks akan menjadi rata kanan </td>
6.9.
Pengaturan Sel Pada Tabel Untuk mengatur tinggi sel pada sebuah tabel, caranya kita hanya menambahkan atribut HEIGHT pada tag <table> dan memberikan nilai pada atribut tersebut dengan sebuah bilangan bulat. Nilai atribut yang diberikan dinyatakan dalam satuan pixel. Tata cara penulisan kode HTMLnya perhatikan kode-kode berikut ini :
<table border = "1" height=150> <tr><th>nama</th><th>Usia</th></tr>
36

<tr><td>Larnoo</td><td>24</td></tr> <tr><td>Nurul</td><td>22</td></tr> <tr><td>Friend</td><td>21</td></tr> </table>
Bentuk di atas digunakan untuk memberikan tinggi secara keseluruhan pada tabel. Sedangkan untuk memberikan ukuran tinggi pada baris/sel tertentu kita bisa memberikan atribut height pada tag <tr> saja. Seperti terlihat pada
penggalan kode HTML berikut ini :

<table border = 1> <tr><th height=50>Nama</th><th>Usia</th></tr> <tr><td>Larnoo</td><td>24</td></tr> <tr><td>Nurul</td><td>22</td></tr> <tr><td>Yoto</td><td>21</td></tr> </table>
Untuk mengatur lebar sel dapat digunakan atribut WIDTH. Pemberian nilai pada atribut ini selain bisa ditentukan dengan bilangan dengan satuan pixel juga bisa diberikan dalam persen (%). Untuk penggunaannya dapat dilihat pada baris program berikut ini :
<table border = "1" width="50%"> <tr><th height="50">Nama</th><th>Usia</th></tr> <tr><td>Larnoo</td><td>24</td></tr> <tr><td>Nurul</td><td>22</td></tr> <tr><td>Yoto</td><td>21</td></tr> </table>
WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag <TD> atau <TH>. Contoh :
<table border = "1" width="50%"> <tr><th height="50">nama</th><th>Usia</th></tr> <tr><td width=200>Larnoo</td><td>24</td></tr> <tr><td>Nurul</td><td>22</td></tr> <tr><td>Friend</td><td>21</td></tr> </table>
37
6.10. Pengaturan Jarak Tabel Untuk mengatur jarak teks terhadap tepi kiri dan untuk mengatur jarak sel terhadap tepi dalam
<table border = "5" cellspacing="20" cellpadding="10" > <caption>Cellpadding = 10 dan cellspacing=20</caption> <tr><th>Nama</th><th>Usia</th></tr> <tr><td>Larnoo</td><td>24</td></tr> <tr><td>Nurul</td><td>22</td></tr> <tr><td>Yoto</td><td>21</td></tr> </table>
bingkaitabel, kita
dapat menggunakan atribut Cellpadding
dan Cellspacing. Cara penggunaannya dapat dilihat pada kode-kode berikut ini :
6.11. Tabel dan Gambar Informasi yang ada di dalam tabel tidak hanya dapat berupa teks saja, melainkan dapat berupa gambar. Pada prinsipnya kode yang diberikan untuk memunculkan gambar sama dengan menampilkan teks biasa. Apabila kita ingin menampilkan gambar pada sel tertentu kita cukup memberikan tag <img src=.(lokasi gambar)>. Contohnya seperti berikut :
<table border = "1" > <tr><th>Gambar</th><th>Catatan</th></tr> <tr><td><img src=C:\gambar\dian.jpg></td><td>Wajahmu indah bagai sinar rembulan di angkasa</td></tr> </table>
38
Latihan Soal :
Dengan menggunakan kode-kode HTML, buat tampilan-tampilan seperti gambar berikut ini :
4 3 Selamat Mengerjakan !
39
BAB 7 Membuat Hyperlink

Tujuan Pembelajaran : Dapat membuat Link-link yang menjadi acuan untuk dapat berpindah dari satu dokumen ke dokumen lainya dalam sebuah halaman web. Dapat mengatur tampilan link baik warna maupun jenisnya (teks dan gambr). Dapat memperindah tampilan hyperlink.
7.1.
Pendahuluan HTML sesuai dengan sifatnya yaitu hypertext, yang artinya dengan menggunakan teks yang pendek bisa menjadi acuan untuk berpindah dari satu halaman yang satu ke halaman yang lain untuk mendapatkan informasi. Untuk dapat menciptakan teks/tombol yang khusus yang digunakan untuk perpindahan tersebut diperlukan tag
dapat menjalankan perintah ini. Pada bab ini akan dijelaskan
tentang bagaimana membuat sebuat hyperlink yang digunakan untuk tujuan perpindahan halaman sesuai dengan yang kita inginkan.
7.2.
Hyperlink ke Halaman Web Dikatakan hypertext apabila dalam sebuah tambilan halaman website
terdapat hyperlink. Situs dalam internet hampir seluruhnya menggunakan hyperlink. Hyperlink sifatnya ada dua yaitu : pertama, berpindah dari satu halaman ke halaman lain dan yang kedua, dapat berpindah tetapi hanya dalam satu
halaman saja. Tag yang digunakan untuk membuat hyperlink adalah pasangan tag <A></A> atau yang biasa disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut : <a href = url>Label Link</a>. URL(Uniform resource Locator) dapat berupa alamat suatu dokumen web, gambar, ataupun menyatakan suatu protokol lain (misalnya FTP). Untuk lebih jelasnya dapat dilihat pada contoh berikut ini : Simpan Program 1, berikut dengan nama file alamat.html
Alamat.html <html> <head><title>Membuat Link</title></head> <body> <pre> Address : Green Kost Production Jl. Jambu 1 No.12 Gedung Meneng
40

Bandar Lampung 35145 <a href="utama.html">kembali ke menu utama</a> </pre> </body> <html>
Simpan Program 2, berikut dengan nama file Profile.html

Profile.html <html> <head><title>Membuat Link</title></head> <body> <pre> . Green Kost Production . Merupakan Unit Usaha yang bergerak di bidang Video Shooting, yang dapat melayani : Pembuatan Dokumentasi dalam bentuk Video Video Klip Duplikasi VCD & DVD skala kecil/besar (Legal), dll.
<a href="utama.html">kembali ke menu utama</a> </pre> </body> <html>
Simpan Program 3 sebagai file utama, berikut dengan nama file utama.html
Utama.html <html> <head><title>Membuat Link</title></head> <body> <pre> . Green Kost Production . Silahkan Klik Pilihan Anda : <a href =alamat.html>Address</a> <a href =profile.html>Profile</a> </pre> </body> <html>
7.3.
Link ke Situs Web Lain Hyperlink tidak hanya untuk perpindahan dari dari satu halaman ke halamanhalamn web yang berada pada sistem yang sama seperti yang telah kita praktekan pada latihan sebelumnya. Hyperlink juga bisa digunakan untuk menuju ke
41
halaman situs lain yang berada di internet. Untuk lebih jelasnya perhatikan kode program berikut ini :
Weblink.html <html> <head><title>Membuat Link</title></head> <body> <pre> . Alamat Website Pilihan : . Silahkan Klik Pilihan Anda : <a href =www.8tanda.com>Situs Astrologi</a> <a href =www.sikuncung.com>Galery Anak</a> <a href =www.kezia.web.id>Koleksi Dongeng Untuk Anak</a> </pre> </body> <html>
7.4.
Warna Hyperlink Teks atau Label yang menjadi hyperlink atau penghubung ke halaman yang web lain secara otomatis akan diberi warna tertentu (biasanya biru) bergaris bawah. Namun warna tersebut sebenarnya dapat diubah sesuai dengan keinginan kita. Caranya dengan menggunakan atribut LINK yang terdapat pada tag body. Untuk jelasnya dapat dilihat pada latihan berikut :
warnaLink.html <html> <head> <title>Membuat warna Link</title></head> <body link=green> <pre> . Alamat Website Pilihan : . Silahkan Klik Pilihan Anda : <a href =www.8tanda.com>Situs Astrologi</a> <a href =www.sikuncung.com>Galery Anak</a> <a href =www.kezia.web.id>Koleksi Dongeng Untuk Anak</a> </pre> </body> <html>
Selain menggunakan link untuk pemberian warna, terdapat dua atribut lagi yang digunakan untuk memberikan warna pada hyperlink, yaitu : ALINK : Berguna untuk menentukan link aktif, yaitu link yang telah diklik pemakai, tetapi halaman belum selesai dibuka. VLINK : Berguna untuk menentuka warna link yang halaman web Terkaitnya atau yang dilink telah dikunjungi.
42
Penggunaan atribut link, alink dan vlink dapat dilihat pada penggalan program berikut ini :
<body link=green alink=red vlink=pink>
Pada contoh di atas link akan berwarna hijau sekiranya belum pernah diklik, berwarna merah ketika diklik dan halaman belum dibuka, dan berwarna pink jika halaman sudah pernah dibuka.
7.5.
Menggunakan Bookmark Terkadang dalam membuat sebuah halaman dapat berisi informasi yang sangat panjang. Jika suatu halaman web terlalu panjang, untuk menggulung scrool yang panjang dapat menjadi masalah tersendiri bagi seseorang. Untuk mengatasi hal ini adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang menuju ke bagian tertentu pada halaman itu sendiri. Hyperlink seperti diimplementasikan melalui bentuk bookmark. Dengan menggunakan bookmark, pemakai tidak perlu membolak-balik halaman secara manual maupun menggulung scrool bar untuk mendapatkan informasi yang terletak dibagian tertentu dalam halaman tersebut. Untuk lebih jelasnya perhatikan pada contoh berikut ini :
Bookmark.html <html> <head> <title>Membuat Link</title> <body> <center> <h1> Realita Kehidupan </h1><br><br> <b>Daftar Isi :</b><br> <a href =#bag1>Bagian Pertama</a> <a href =#bag2> Bagian Kedua</a> <a href =#bag3> Bagian ketiga</a> <a href =#penutup> Baagian Penutup</a> <hr><hr> <a name=#bag1> <h3>Bagia Pertama</h3> Bagian ini merupakan isi cerita pada bagian pertama . <br> <br> <br> <br> <br> <hr> <a name=#bag2> <h3>Bagian Kedua</h3> Bagian ini merupakan isi cerita pada bagian kedua .
43

<br> <br> <br> <br> <br> <hr> <a name=#bag3> <h3>Bagian Ketiga</h3> Bagian ini merupakan isi cerita pada bagian ketiga . <br> <br> <br> <br> <br> <hr> <a name=#penutup> <h3>Bagian Penutup</h3> Bagian ini merupakan isi cerita pada bagian Penutup . <br> <br> <br> <br> <br> <hr> </center> </body> <html>
7.6.
Link dengan Gambar Link tidak hanya dapat berupa teks tetapi untuk mengganti teks tersebut kita dapat menggunakan gambar. Sebuah gambar dapat dijadikan sebagai link ke halaman lain. Caranya adalah dengan memberikan tag <img> di antara pasangan tag <a> dan </a>, bentuk penulisannya adalah :
<a href=alamat.html><img src="C:/gambar/dian/db.gif" </a></a>
7.7.
Membuka Jendela Baru Variasi lain dari model hyperlink salah satunya adalah apabila kita mengklik suatu link, dokumen utama tidak akan menghilang melainkan akan terbuka jendela lain yang menampilkan informasi suatu halaman. Hal ini bisa dikerjakan dengan menambahkan kode : target = _blank . Penggunaan atribut target
dapat dilihat pada contoh berikut ini :
44

Target.html <html> <head> <title>target</title> </head> <body> <h1>Menu Utama</h1> Silahkan Klik :<br> <a href=hal1.html target = _blank>halaman 1</a><br> <a href=hal2.html target = _blank>halaman 2</a><br> </body> </html>
45
Latihan Soal :
Apakah Yang dimaksud dengan Hyperlink ?
Sebutkan jenis-jenis hyperlink, dan jelaskan cara penulisannya kedalam kode HTML ?
Jelaskan perbedaan LINK, ALINK dan VLINK ?
Buatlah link dengan gambar seperti yang terlihat pada tampilam berikut ini ?
46
BAB 8 Frame Pada Halaman Web

Setelah mempelajari pokok bahasan ini, diharapkan : Bisa menerapklan frame dalam pembuatan sebuah halaman web. Bisa mengatur tampilan web yang mempunyai hyperlink dan menampilkannya kedalam satu halaman saja, sehingga bisa mengurangi waktu akses sebuah halaman web. 8.1. Pendahuluan Frame pada sebuah halaman web merupakan sebuah tempat untuk meletakkan atau menampilkan informasi tertentu. Biasanya frame ini digunakan untuk
menampilkan sebuah hyperlink, akan tetapi informasi dari hasil link tersebut tetap bisa dilihat pada halaman tersebut. Dengan kata lain frame merupakan area yang dibuat untuk menyatukan halaman yang berbeda. Kenapa frame ini dibuat mungkin salah satu tujuannya untuk mempercepat waktu akses/loading untuk membuka suatu halaman web. Untuk mempelajari frame anda juga tidak terlepas dari materi-materi sebelumnya, karena isi dari frame tersebut merupakan pengembangan dari pembahasan-pembahasan materi sebelumnya. Untk lebih
jelasnya tentang pembuatan frame, pada bab ini akan dibahas cara-cara yang perlu dilakukan untuk membuat frame tersebut. 8.2. Bentuk Dasar Frame Di Internet mungkin kita pernah menjumpai sebuah situs yang berisikan banyak informasi, tetapi setiap kita akses melalui tombol tertentu informasi dapat dilihat dihalaman tersebut tanpa berpindah atau menutup halaman itu
sendiri. Apabila yang terjadi demikian, mungkin salah ssatunya menggunakan teknik frame ini. Frame memungkinkan satu halaman web atau lebih bisa ditampilkan pada sebuah jendela browser saja. Bentuk dasar frame bisa berupa kolom dan bais. Untuk membuat frame dalam bentuk kolom, gunakan tag <frameset> dan berikan atribut cols serta berikan nilai pada atribut cols tersebut. Sedangkan untuk membentuk frame dalam bentuk baris atribut yang digunakan adalah rows dan berikan nilai pada atribut rows tersebut. Nilai atribut baik cols maupun row diukur dalam satuan % (persen). Untuk menuliskan frameset cols dan row perhatikan penggunaan tag frameset berikut ini :
47
Bentuk kolom
48
8.3.
Border Pada Frame Border merupakan pemisah antar frame yang satu dengan yang
lainya.Untuk memberikan digunakan
border dan menghilangkan border, Atribut yang
adalah <border>. apabila tidak memberikan atribut border, artinya
frame yang dibuat secara otomatis muncul adanya border hal ini dianggap border = 1. Sedangkan apabila tidak menghendaki tambahkan border = 0 pada adanya pemisah antarframe,
tag <frameset>. Perhatkan pada kode-kode
HTML berikut :
Border.html <html> <head> <title>frame</title> </head> <frameset cols = 30%,* border=0> <frame src=alamat.html> <frame src=profile.html> </frameset> </html>
8.4.
Scrolling Pada Frame Scrolling merupakan tombol penggulung yang muncul secara otomatis
apabila informasi yang ada terlalu panjang untuk dapat ditampilkan dilayar. Keberadaan scrolling pada frame bisa dihilangkan. Caranya pada frame tersebut, anda bisa menambahkan, SCROLLING = No. Seperti yang terlihat pada kode-kode berikut :
Scrolling.html <html> <head> <title>frame</title> </head> <frameset cols = 30%,* border=0> <frame src = frame1.html scrolling = No> <frame src = frame2.html> </frameset> </html>
8.5.
Penggunaan Noresize Pada pembuatan frame secara standar, ukuran frame yang ditampilkan di browser dapat dirubah-rubah sesuai dengan ukuran yang dikehendaki. Jika anda
berkeinginan agar frame tidak dapat dirubah ketika ditampilkan pada browser,
anda bisa menambahkan atribut noresize pada tag <frame>. Contoh dapat dilihat pada berkas berikut :
Noresize.html <html> <head> <title>penggunaan frame</title> </head> frameset cols = 30%, *> <frame src = framekesatu.htm> <frame src = framekedua.html noresize name = oke> </frameset> </html>
8.6.
Penggabungan Frame Frame terdiri dari dua bentuk, seperti yang telah dipelajari pada sub bab sebelumnya , yaitu bentuk vertikal dan horisontal. Tetapi pada penggunaannya frame vertikal dan horizontal dapat digunakan/digabungkan sekaligus. Sekarang marilah mencoba untuk menggabungkan frame horisontal dan vertikal. Untuk membentuknya, berikut : Simpan berkas berikut dengan nama file : judul.html
Judul.html <html> <head> <title>frame</title> </head> <body> <center> <img src = C:\gambar\dian\483.gif> </center> </body> </html>
diperlukan <frameset> berkalang. Implementasinya sebagai
Simpan berkas berikut dengan nama file : index.html
Index.html <html> <head> <title>gabungan frame</title> </head> <frameset rows = 30%,*> <frame src = judul.html scrolling = no>
50

<frameset border = 0 cols = 30%,*> <frame src = daftar.html scrolling = no> <frame src = alamat.html name = oke> </frameset> </frameset> </html>
8.7.
Link Pada Frame Setelah membentuk frame, selanjutnya frame-frame yang ada tersebut akan kita manfaatkan untuk penampung dari dokumen lain yang sifatnya berdiri sendiri. Supaya antara frame yang satu dengan yang lain dapat saling berhubungan perlu dibentuk suatu hyperlink.Untuk lebih jelasnya penggunaan link dalam frame dapat dilihat pada kode- kode program berikut : Simpan berkas berikut dengan nama file berkaspertama.html
Berkaspertama.html
<html> <head> <title>Membuat Link</title> </head> <body> <pre> pada bagian ini dapat berisi berbagai informasi yang diperlukan untuk sebuah halaman website <a href="menuutama.html">kembali ke menu utama</a> </pre> </body> <html>
Simpan berkas berikut dengan nama file berkaskedua.html berkaskedua.html

<html> <head> <title>Membuat Link</title> </head> <body> <pre> Pada bagian ini dapat berisi teks, gambar, music, video Dan informasi yang lainya sesuai dengan keinginan kita <a href="menuutama.html">kembali ke menu utama</a> </pre> </body> <html>
51
Simpan berkas berikut dengan nama file menuutama.html

menuutama.html <html> <head> <title>Membuat Link</title> <body> <center> Silahkan Klik Pilihan Anda : <a href =berkaspertama.html target = oke><h3>Dokumen 1</h3></a> <a href =berkaskedua.html target = oke><h3>Dokumen 2</h3></a> </center> </body> <html>
Pada file menuutama.htm, atribut target digunakan untuk menentukan frame yang akan ditempati oleh halaman web yang dipanggil. Sekarang saatnya untuk
membuat kode yang menggabungkan ketiga berkas di atas melalui <frameset>. Kode yang perlu anda tulis adalah seperti berikut : Simpan dengan nama framenya.html
Framenya.html <html> <head> <title>penggunaan frame</title> </head> frameset cols = 30%, *> <frame src = menuutama.htm> <frame src = berkaspertama.html name = oke> </frameset> </html>
52
Latihan Soal : Dengan menggunakan kode HTML buatlah bentuk frame seperti di bawah ini ?
Buatlah tampilan penggunaan frame dan link seperti yang terlihat pada tampilam berikut ini ?
53
BAB 9 Formulir Pada Halaman Web

Tujuan Pembelajaran : Setelah mempelajari pokok bahasan ini, diharapkan bisa membuat berbagai bentuk komponen dalam sebuah formulir yang diperlukan dalam pembuatan sebuah halaman web. 9.1. Pendahuluan Sebuah halaman dapat berisi informasi yang sifatnya statis dan adapula yang bersifat dinamis. Bersifat statis artinya informasi yang ditampilkan cenderung tetap, apabila ingin merubah informasinya harus melakukan perubahan
programnya. Sedangkan yang bersifat dinamis, informasi yang ada dapat dirubah tanpa harus merubah programnya. Untuk membuat sebuah web yang bersifat dinamis, kita memerlukan adanya komponen- komponen pendukung. Komponen pendukung yang diperlukan bisa berupa inputan teks dan bisa juga berupa tombol eksekusi dan biasanya disajikan dalam bentuk formulir. Untuk dapat
menggunakan komponen yang ada pada formulir, diperlukan penguasaan khusus tentang kode-kode HTML terkait. Pada bab ini akan dipelajari penggunaan kode-kode pembentuk sebuah formulir. 9.2. Dasar Penggunaan Formulir Didalam sebuah halaman web terkadang kita menjumpai adanya buku tamu bagi pengunjung, umpan balik dan pendaftaran anggota. Diantara ketiga bentuk tampilan tersebut pasti telah menggunakan komponen formulir. Untuk
membentuk sebuah formulir diperlukan pasangan tag <form> dan </form>. Dan menggunakan atribut pendukung form yaitu action dan method. ACTION digunakan untuk menentukan tujuan apabila sebuah tombol pada formulir dijalankan.. METHOD digunakan untuk menentukan teknis penyampaian informasi setelah tombol dijalankan untuk mengakses atau mengirim sebuah informasi. Umumnya method terdiri dari dua jenis yaitu get dan post. Bila menggunakan get berarti informasi yang ditampilkan akan diperoleh pada halaman itu sendiri dalam hal ini url pada action. Sedangkan post informasi tersebut akan dikirimkan terpisah dari url. Untuk lebih jelasnya penggunaan action dan method dapat dilihat pada potongan program berikut ini : < form action=kirim.html method=post>.</form>
9.3.
Tag Input Pada Formulir Untuk menginputkan sebuah data atau teks diperlukan sebuah area yang jelas. Area tersebut bermacam-macam bentuknya ada yang berupa kotak isian ada juga yang berupa kotak kecil atau lingkaran yang cara mengisinya cukup dengan mengklik pada area tersebut serta masih ada bentuk-bentuk yang lainnya. Untuk membentuknya pada formulir diperlukan tag <input> dan beberapa atribut pendukung dan letaknya berada dalam pasangan tag <form> dan </form>. Tag input memiliki sejumlah atribut. Atribut- atributnya seperti yang terlihat pada tabel berikut : Atribut Catatan Untuk menentukan nama data Menentukan ukuran kotak masukan untuk teks dan password Menentukan jumlah teks yang dapat dimasukan pada area tertentu misal pada input teks dan password Memberikan nilai awal untuk kotak masukan sebelum mulai diinputkan teks baru Diberikan supaya kotak cek dalam keadaan terpilih. Menentukan tipe kotak masukan, seperti password, text, submit, reset dan lain-lain Tabel 8. Daftar Atribut Tag Input
NAME SIZE MAXLENGTH VALUE CHECKED TYPE
Contoh berikut ini memperlihatkan penggunaan formulir yang melibatkan field teks, tombol submit dan reset.
Formulir.html <html> <head> <title>formulir</title> </head> <body> <form action = info.html method = post> Nama : <input type = text name = Nama_mahasiswa size = 20 maxlength = 20> <br> Hobby <br> <input type = submit value = Kirim> <input type = reset value = Clear> </form> </body> </html> : <input type = text name = hobby size = 25 maxlength = 40>
55
Berkas program info.html

Info.html <html> <head><title></title> </head> <body> Informasi yang anda butuhkan ada di sini </body> </html>
Untuk menujukan bahwa jika tombol submit diklik maka berkas HTML yang disebutkan Setelah dalam atribut action pada tag <form> akan dimuat..
anda mempelajari PHP, ASP atau database web lainya, anda akan
mengetahui bagaimana cara menangkap nilai-nilai yang dimasukan pada kedua field teks di atas. 9.4. Menentukan Textarea Text area biasanya digunakan untuk jenis masukan yang jumlah karakternya banyak. Tag yang digunakan adalah Pasangan tag <textarea> dan </textarea>. Textarea bisa mencakup banyak baris. Atribut-atribut yang digunakan pada tag <textarea> dapat dilihat pada program berikut :
textarea.html <html> <head> <title>textarea</title> </head> <body> <form> Catatan :<br> <textarea name = catatan rows = 5 cols = 40 wrap>Menurut Saya : </textarea> </form> </body> </html>
9.5.
Penggunaan Select Pada Formulir Untuk menentukan pilihan dengan cara memilih sendiri terhadap yang ditampilkan pada daftar tertentu dapat dibuat dengan menggunakan pasangan tag <select> dan </select>, istilah lain dari select adalah kotak kombo (drop-down) atau daftar
56
pilihan.contoh penggunaan select diperlihatkan pada contoh berikut ini :
Select.html <html> <head> <title>textarea</title> </head> <body> <form> Makanan yang paling anda suka :<br> <select name = Makanan> <option value = Sate>Sate <option value = soto>Soto <option value = martabak>Martabak <option value = lain-lain>Lain-lain </form> </body> </html>
9.6.
Penggunaan Tipe Checkbox Memilih sebuah informasi dengan cara mengklik kotak tertentu dan selanjutnya terdapat karakter khusus yang menandai kotak tersebut, pada formulir inilah yang dinamakan tipe checkbox. Karakter tersebut umumnya berbentuk tanda
checklist/centang. Berikut ini adalah contoh penggunaan tipe checkbox

Checkbox.html <html> <head> <title>radio</title> <body> <form> Sayur Kesukaan Anda :<br> <input type = checkbox name = bayam checked>Bayam<br> <input type = checkbox name = kol >Kol<br> <input type = checkbox name = Sawi >Sawi<br> <input type = checkbox name = lain >Lain-lain<br> </form> </body> </html>
9.7.
Penggunaan Tipe Radio Tipe radio umumnya sama penggunaanya dengan checkbox. Hanya saja kalau
57
checkbox berbentuk kotak dan tandanya berupa karakter centang, kalau pada radio berbentuk bulatan dengan ditandai karakter titik berwarna hitam apabila k ita telah memilihnya. Berikut ini diberikan contoh untuk penggunaan tipe radio :
Radio.html <html> <head> <title>radio</title> </head> <body> <form> Jenis kelamin:<br> <input type = "radio" Name = "sex" checked>pria<br> <input type = "radio" Name = "sex">wanita<br> <br> <hr> Agama :<br> <input type = "radio" Name = "agama" value "i">islam<br> <input type = "radio" Name = "agama" value "k">kristen<br> <input type = "radio" Name = "agama" value "t">katolik<br> <input type = "radio" Name = "agama" value "b">budha<br> <input type = "radio" Name = "agama" value "h">hindu<br> <input type = "radio" Name = "agama" value "l">lain-lain<br><br> </form> </body> </html>
9.8.
Penggunaan Tipe Password Password merupakan kata sandi yang digunakan untuk membuka atau mengakses suatu informasi. Password umumnya merupakan karakter baik itu angka maupun huruf. Cara memasukan password biasanya telah disediakan area khusus dan karakter yang dituliskan tidak terlihat seperti kata aslinya. karakter yang telah
dimasukan tersebut umumnya diterjemahkan dalam kode tertentu dan yang sering dijumpai berbentuk karakter * . Berikut adalah contoh kode htmlnya :
58

Password.html <html> <head> <title>password</title> <body> <form> Nama User : <input type = text name = Nama size = 20 maxlength = 20> <br> Password : <input type = password name = kata_kunci size = 8 maxlength = 8> <br> <input type = submit value = Kirim> <input type = reset value = Clear> </form> </body> </html>
9.9.
Tombol Pada Atribut Input Tombol yang sudah kita pergunakan pada contoh-contoh diatas ada dua, yaitu submit dan reset. Dengan menggunakan tag <input>, anda juga dapat
membentuk tombol sendiri dengan fungsi yang berbeda dengan kedua tombol yang telah digunakan tersebut. Cara membuatnya adalah berikan nilai button pada atribut type. Seperti yang terlihat pada program berikut ini :
Button.html <html> <head> <title>buat tombol</title> </head> <body> <form>Klik Tombol berikut :<br> <input type = button value = Kembali onclick = self.history.back();><br> </form> </body> </html>
59
Latihan Soal :
Sebutkan dan jelaskan fungsinya dari komponen-komponen yang ada pada formulir
Buatlah tampilan penggunaan Fromulir seperti yang terlihat pada tampilam berikut ini ?
60
BAB 10 Multimedia Pada Web

Tujuan Pembelajaran : Setelah mempelajari pokok bahasan ini, diharapkan bisa menambahkan komponen penunjang sebuah halaman web khususnya yang melibatkan multimedia, seperti audio dan video.
10.1. Pendahuluan Untuk mendapatkan sebuah website yang menarik, kita harus mampu
mengkombinasikan berbagai unsur pendukung dalam sebuah halaman website. Selain informasi disajikan dalam bentuk teks yang menarik dan frame yang enak dilihat, unsur lain yang sangat menunjang diantaranya adalah perlu
ditambahkan multimedia. Multimedia berupa teknologi yang memadukan unsur teks, gambar diam, animasi gambar, suara dan bahkan video. Namun yang perlu diperhatikan bahwa tidak semua browser mendukung adanya multimedia khususnya yang berkaitan dengan audio dan video. Untuk menagtisipasi hal ini diperlukan software eksternal, misalnya winamp untuk memainkan suara atau windows media player untuk memainkan film ataupun suara.
10.2. Link ke Suara dan Video Untuk memainkan audio dan video pada sebuah halaman web dapat memberikan link yang menghubungkan ke suara atau video tersebut. Sebagai contoh
ditunjukan pada kode berikut :

Multimedia.html <html> <head> <title>suara</title> </head> <body> Anda pengen denger musik ?<br> Klik aja :<br> <a href = E:\lagu\Mp3 Keyboard\midi music\Zodiac.MID> Phil Collins </a><br> <a href = c:\music\mancanegara\radio head Creep.MP3> Radio Head </a><br> </body> </html>
61
Pada program di atas bila anda telah memilih salah satu lagu yang diinginkan misalnya yang berformat .mp3, ada kemungkinan akan muncul gambar seperti berikut :
Gambar 8. Kotak Dialog file Download
Jika ditemukan tampilan seperti ini yang harus dilakukan selanjutnya adalah, mengklik dulu open this file from its current location. Dan ada pula kemungkinan anda langsung dapat mendengar musik yang dikehendaki misalnya anda
memilih musik yang berformat .mid. tampilan yang dapat dilihat adalah sebagai berikut :
Gambar 8. Kotak Dialog Untuk memainkan Suara 10.3. Penggunaan tag <bgsound> Pernahkah Anda saat berkunjung kesebuah situs di internet ketika halaman sedang diakses terdengar suara musik yang mengiringi halaman tersebut ?.
apabila hal ini terjadi berarti halaman sebuah website tersebut telah menggunakan background suara. Tag Tag <bgsound>. Tag yang digunakan untuk membuat tersebut adalah
ini memungkinkan suara dimainkan di latar belakang.
Dapat diterapkan baik pada audio maupun video. Sayangnya tag ini hanya dikenal di browser internet explorer.
62
Atribut yang digunakan pada tag bgsound berupa src dan loop. Src digunakan untuk menentukan nama file suara atau video. sedangkan loop digunakan untuk mengulang sebanyak nilai yang ditentukan apabila suara telah habis diputar. Contoh:
Bgsound.html <html> <head> <title>musik</title> </head> <body> Gunakan Internet Explorer bila anda <br> Ingin mendengarkan background music<br> <bgsound src = E:\lagu\midi music\Zodiac.mid loop = 2> </body> </html>
Pada program di atas background music akan diputar/diulang sebanyak 2 kali. Bila anda menginginkan diputar secara terus menerus tanpa batas tambahkan pada nilai loop = infinitive.
Menggunakan tag <embed> dapat digunakan untuk memainkan suara maupun film. Tag ini didukung oleh netscape navigator maupun internet explorer. Contoh berikut menunjukan cara memainkan film dengan tag embed :
Embed.html <Html> <head> <title>avi dengan embed</title> </head> <body> Silakan menikmati klip video berikut. <embed src = "c:\film\klip.avi" height = "200" width = "320" units = "pixels" autostart = "true" loop = "true"> </body> </html>
63
Latihan Soal :
Jelaskan apa yang dimaksud dengan multimedia ?
Sebutkan dan Jelaskan fungsi dari tag dan atribut apa saja yang terlibat didalam multimedia ?
Buatlah sebuah tampilan website yang dapat memainkan/memutar beberapa lagu maupun video.
64
BAB 11 Paket Instalasi XAMPP

Pasti sudah tidak asing lagi apa itu XAMPP bagi teman-teman yang terjun di dunia komputer khususnya yang suka hosting, web developer, programer yang selalu dugem alias duduk gembira di depan komputer. Sekarang apa itu XAMPP? XAMPP kalo dibahas huruf per huruf adalah X (yang berarti cross, cross platform), A (yang berarti Apache HTTP server), M (yang berarti MySQL), P (yang berarti PHP), dan P yang terakhir (yang berarti Perl). Kalo di istilahkan XAMPP adalah suatu installer web server yang berisi Apache HTTP dan MySQL dan mendukung program PHP dan Perl. Kurang lebihnya seperti itu. Saya menggunakan XAMPP karena lebih mudah cara instalasi. Dan saya menulis postingan ini karena pada saat ini saya mencoba wordpress yang saya instal di komputer saya. Jadi sebelum instal wordpress di komputer harus instal XAMPP yang sudah berisikan paket untuk web server. Berikut ini proses instalasi menggunakan sistem operasi Windows XP dan XAMPP versi 1.7.3. 1. Klik dua-kali file hasil download. Segera akan muncul jendela seperti di bawah ini. Sebaiknya Anda pilih folder untuk instal (destination folder) pada drive C:\. Lalu klik [Install].
2. Proses instalasi sedang berlangsung.
65
3. Pada saat proses instalasi berlangsung akan muncul jendela yang berisi pertanyaan: Apakah Anda perlu menaruh shortcuts di menu Start atau desktop? Jawab saja ya (y dan tekan Enter).
4.
Pada pertanyaan berikutnya, jawab saja dengan ya (y dan Enter).
5. Pertanyaan berikutnya adalah tentang instalasi yang ternyata XAMPP Lite ini bisa diinstal di USB drive sebagai aplikasi portabel. Kalau Anda tetap instal di drive C:, jawablah pertanyaan dengan tidak (n dan Enter). Dan sebaliknya, Anda jawab ya bila ingin instal di USB drive.
66
6. Pada langkah berikutnya, Anda tinggal tekan Enter.
7. Berikutnya, tekan Enter lagi.
8. Berikutnya, tekan x untuk keluar atau tekan 1 bila Anda ingin menjalankan XAMPP Control Panel.
67
9. Bila Anda tekan 1 pada pilihan di atas, maka akan muncul control panel seperti di bawah ini. Atau setiap saat Anda dapat menjalankan control panel ini melalui menu [Start] atau ikon XAMPP di desktop Anda.
10. Untuk mengaktifkan XAMPP, pada control panel XAMPP klik [Start] pada Apache dan klik [Start] lagi pada MySql, sehingga pada keduanya muncul tanda [Running]. Dengan demikian XAMPP sudah aktif.
68
11. Sekarang jalankan browser Internet Anda dan ketik http://localhost. Pada tampilan XAMPP yang muncul, Anda dipersilahkan memilih bahasa. Klik misalnya [English]. Selanjutnya akan muncul tampilan seperti di bawah ini.
Sampai di sini Anda telah berhasil menginstal XAMPP.
69
BAB 12 Membuat database MySQL dan tabel menggunakan phpMyAdmin

Oke, sekarang kita akan membuat sebuah database MySQL menggunakan phpMyAdmin. Sebelumnya, pastikan anda sudah menginstal local server, seperti XAMPP atau Appserv. Pertama, jalankan web browser anda. Ketikkan 'localhost/phpmyadmin' pada address bar web browser anda (tidak usah pakai kutipnya ya...). Jika berhasil akan muncul halaman awal phpMyAdmin seperti gambar di bawah ini.
Sekarang ketikkan nama database yang ingin anda buat, pada field di bawah teks 'create new database'. Misalkan nama databasenya adalah 'latihan_php'. Jadi ketikkan 'latihan_php' pada field tersebut. Setelah itu klik tombol 'Create'. Sebaiknya nama database tidak menggunakan spasi. Gantinya silakan gunakan underscore.
Lihat gambar dibawah.
Selanjutnya membuat tabel. Ada beberapa hal yang harus dipersiapkan sebelum membuat tabel.
70
Pertama, adalah nama tabel. Kedua, berapa jumlah field atau kolom dalam tabel. Ketiga, apa saja nama kolom dalam tabel tersebut. Keempat, tipe dari tiap kolom dan jumlah panjang karakternya. Bingung? Baiklah saya jelaskan.
Pertama. Anda ingin membuat tabel 'pengunjung'. Berarti nama tabelnya adalah 'pengunjung'. Gampang kan?
Kedua. Anda harus merancang ada berapa kolom dalam tabel 'pengunjung' tersebut. Misal anda ingin ada kolom 'nama', 'alamat', 'telepon'. Berarti ada empat kolom. Kok, empat kolom? Bukannya cuma tiga? Dalam merancang tabel anda tidak boleh melupakan primary key. Apa itu primary key? Supaya tabel tidak ada redundant alias pengulangan data dan supaya nanti anda dan program anda tidak bingung ketika mencari data. Oleh sebab itu primary key harus ada dan isinya nanti sebaiknya angka. Primary key akan dijadikan 'id' dari suatu tabel dan bersifat unik alias tidak sama suatu id dengan id yang lain dalam satu tabel.
Ketiga. Anda sudah menentukan ada empat kolom. Berarti nama kolomnya adalah sebagai berikut. Kolom pertama diberi nama 'id_pengunjung'. Kolom kedua diberi nama 'nama_pengunjung'. Kolom ketiga diberi nama 'alamat'. Kolom keempat diberi nama 'telepon'. Oya, untuk penulisan nama tabel sebaiknya jangan menggunakan spasi. Gantinya silakan gunakan underscore.
Keempat. Tipe dari tiap kolom tersebut harus anda tentukan. Apakah 'VARCHAR', 'INT', 'DATE' atau yang lainnya. Biasanya untuk kolom yang nanti diisi oleh berbagai karakter, entah angka huruf dsb gunakanlah 'VARCHAR'. Untuk kolom yang diisi angka saja, gunakan 'INT'. Nah untuk kolom-kolom pada tabel 'pengunjung' kita ini, mari kita tentukan tipenya dan panjang karakternya. Kolom 'id_pengunjung' kita gunakan tipe 'INT' dengan panjang '5'. Kolom 'nama_pengunjung' kita gunakan tipe 'VARCHAR' dengan panjang '50'. Kolom 'alamat' kita gunakan tipe 'VARCHAR' dengan panjang '100'. Kolom 'telepon' kita gunakan tipe 'INT' dengan panjang '15'.
Yuukkk, mari kita isi. Lihat gambar di bawah.
Selanjutnya isikan nama kolom, tipenya dan panjang karakternya.
Jangan klik save dulu. Kita harus membuat kolom 'id_pengunjung' menjadi primary key. Dan tambahkan 'auto_increment' supaya 'id_pengunjung' nya otomatis bertambah dari 1 ke 2 dan seterusnya.
Baru setelah semua selesai, klik 'Save'.
72
Jika sukses akan seperti ini.
OK, sekian dulu untuk artikel Membuat database MySQL dan tabel menggunakan phpMyAdmin.
73
BAB 13 Pengenalan PHP

13.1. Sejarah Ringkas Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP. Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek. 1995 Rasmus Lerdorf memperkenalkan PHP/FI (Personal Home
Page/Forms Interpreter) dibuat dengan PERL. 1997 PHP/FI versi 2.0 muncul ditulis dengan bahasa C. Kurang lebih digunakan oleh 50.000 domain 1997 PHP 3 muncul (nama sudah tidak ada FI-nya), dikenalkan oleh Andi Gutmans dan Zeev Suraski. Akronim berubah menjadi : Hypertext Preprocessor. 1998 PHP 4 muncul 2003 PHP 5 diluncurkan dengan mendukung OOP (Object Oriented
Programming) PHP merupakan script yang menyatu dengan HTML dan berada pada server (server site HTML embedded scripting).
74
Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain: 1. 'Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya.' 2. 'Web Server yang mendukung PHP dapat ditemukan dimana - mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah.' 3. 'Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan.' 4. 'Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak.' 5. 'PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.' PHP memiliki 9 (sembilan) tipe data yaitu : 1. 2. 3. 4. 5. 6. 7. 8. 9. Integer Double Boolean String Object Array Null Nill Resource
13.2. Penggunaan Script PHP Silahkan ketik contoh-contoh program berikut pada direktori/folder yang telah anda jadikan alias : Coba01.php : <?php echo Coba dulu ah ; echo Kenalan dengan PHP ; ?>
13.3. Sintaks Dasar PHP Cara penulisan kode PHP, yaitu : Diawali dengan <?php dan diakhiri dengan ?>. Perhatikan bahwa tiap akhir baris harus selalu diberi tanda titik koma (;). Seperti pada bahasa pemrograman lain Anda pun bisa meletakkan baris komentar pada program Anda. Pada PHP caranya adalah dengan meletakkan komentar tersebut di sebelah kanan tanda // jika komentar satu baris dan di antara /* dan */ jika komentarnya lebih dari satu baris.
13.4. Tipe Data a. Integer Yang termasuk dalam tipe data ini adalah bilangan bulat (tidak pakai koma) :
b. Floating Point Number Disebut juga bilangan pecahan. Terdapat danda titik yang merupakan pemisah antara bagian bulat dan pecahan.
c. String
d. Array Array merupakan tipe data terstruktur yang berguna untuk menyimpan sejumlah data yang bertipe sama. Bagian yang menyusun array disebut elemen array, yang masing masing elemen dapat diakses tersendiri melalui indeks array.
76
Kode diatas jika dijalankan pada browser akan muncul tulisan : Kota favorit saya adalah Malang . e. Pengulangan dengan FOR Seperti halnya bahasa pemrograman lain PHP juga menyediakan fasilitas untuk melakukan pengulangan. Salah satunya adalah menggunakan FOR.
Jika Script diatas dijalankan akan muncul tampilan seperti dibawah ini :
Pada saat baris pengulangan (yang dimulai dari for ($count = 1; count <= 10; $count++)) dijalankan untuk pertama kali, maka nilai $count adalah 1. Oleh karena itu baris yang paling atas yang tercetak pada browser adalah : Ini adalah baris ke 1 Pengulangan tersebut akan terus dijalankan selama nilai $count lebih kecil atau sama dengan 10. f. Pengulangan dengan While Selain dengan for, kita juga dapat melakukan pengulangan dengan menggunakan While.
Jika script diatas dijalankan, maka akan muncul tampilan seperti dibawah ini.
77
Pengulangan tersebut akan terus dijalankan selama nilai $count lebih kecil atau sama dengan 10. g. Mengenal Function Function atau merupakan sejumlah pernyataan yang dikemas dalam sebuah nama. Nama ini selanjutnya dapat dipanggil berkali kali di beberapa tempat pada program. Tujuan penggunaan funfsi adalah : - Memudahkan dalam pengembangan program - Menghemat ukuran program Untuk membuat funsi, harus mengikuti syntax sebagai berikut :
78
BAB 14 PHP Aplikasi Database

Program aplikasi yang banyak dibuat oleh developer adalah yang berhubungan dengan database. Beberapa langkah untuk membuat apliaksi database : 1. Koneksi ke MYSQL Pada program aplikasi database hal pertama yang kita lakukan adalah mencoba untuk mengetahui apakah sudah terhubung dengan MYSQL yang merupakan database server kita. Fungsi yang digunakan adalah : mysql_connect(). Formatnya adalah : mysql_connect(hostname,username,password). Contoh :
<?php $host = "localhost"; $user = "root"; $pass = ""; // masukkan hostname mysql // username // password
$koneksi = mysql_connect ($host,$user,$pass); if ($koneksi) echo "Terhubung ke database mysql"; else echo "Tidak terhubung ke mysql karena : ".mysql_error(); ?>
Jadi yang kita ketahui dulu adalah hostname,username dan password dari mysql yg telah kita install. Untuk mengetahuinya dapat kita lihat dengan menjalankan PHPMYADMIN melalui browser dengan mengetik : silahkan pilih menu Privilege http://localhost/phpmyadmin/ Setelah dapat terbuka
79
Jadi disini terlihat : User = Root , Host = localhost, Password = Yes Password = Yes menunjukan telah ada passwordnya, apabila belum ada passwordnya akan terlihat No. Untuk mengedit Privileges termasuk memasukan atau mengganti password dengan cara lalukan check pada kotak putih disamping kiri dan klik gambar pen disamping paling kanan.
Check disini 2. Koneksi ke Database
Klik disini untuk edit
Langkah berikutnya setelah dapat melakukan koneksi ke Mysql kita mencoba untuk koneksi ke salah satu Database yang ada pada Mysql. Contoh :
<?php $host = "localhost"; $user = "root"; $pass = ""; $db= "coba"; // database $koneksi = mysql_connect ($host,$user,$pass); if ($koneksi) echo "Terhubung ke mysql"; else echo "Tidak terhubung ke mysql karena : ".mysql_error();
80

$koneksi_db = mysql_select_db($db); if ($koneksi_db) echo " Terhubung ke database "; else echo (" Database tidak dapat ditemukan"); ?>
Program ini akan menghasilkan Database tidak dapat ditemukan kalau kita belum mempunyai database coba pada mysql, untuk itu perlu dibuat terlebih dahulu.
Untuk praktikum ini buatlah database dengan nama coba dan tabel dengan nama tab1 dengan field Nama varchar(20) dan Umur int(2).
81
Setelah itu kita bisa mencoba untuk mengisi database tersebut lewat PhpMyAdmin.
Silahkan tambahkan beberapa data.
3. Melakukan Query Setelah membuat table Tab1, kita lakukan query menggunakan PHP.
<?php $host $user $pass $db = = "localhost"; = "root"; = ""; "coba"; // database
$kon = mysql_connect ($host,$user,$pass); mysql_select_db($db); $q = mysql_query("select * from tab1",$kon); while($row=mysql_fetch_array($q)) { echo "nama : $row[nama]<br>"; echo "Usia : $row[umur]<br>"; } $jum = mysql_num_rows($q); echo "Jumlah record : $jum <br>"; ?>
Keterangan :
$q = mysql_query("select * from tab1",$kon);
82
Ini untuk querynya : Tampilkan semua field pada table tab1.

$jum = mysql_num_rows($q);
Ini untuk mengetahui jumlah record yang ada

while($row=mysql_fetch_array($q)) { echo "nama : $row[nama]<br>"; echo "Usia : $row[umur]<br>"; } mysql_fetch_array($q) untuk menampung hasil query dalam bentuk array. Lalu ditampilkan dengan $row[nama] dan $row[umur] Atau di dengan $row[0] dan $row[1]. while($row=mysql_fetch_array($q)) { echo "nama : $row[0]<br>"; echo "Usia : $row[1]<br>"; }
Tampilan dengan disertai tabel : Contoh :

<html> <body> <table border="2"> <?php $host = "localhost"; $user = "root"; $pass = ""; $db = "coba"; // memilih database $kon = mysql_connect ($host,$user,$pass); mysql_select_db($db); $q = mysql_query("select * from tab1",$kon); $jum = mysql_num_rows($q); echo "Jumlah record : $jum <br><br>"; $c = 0; while($row=mysql_fetch_array($q)) { $c = $c +1; echo "<tr> <td>$c</td> <td>$row[nama]</td> <td>$row[umur]</td> </tr>"; } ?> </table> </body> </html>
Keterangan : Program PHP dibuat salah satunya untuk lebih mendayagunakan HTML script, karena pada HTML script tidak bias menampilkan data pada database server, maka dibantu oleh PHP. Tetapi dalam penampilanya digunakan kombinasi antara HTML script dan PHP.
83
4. Melepaskan Query dari Memory Sebaiknya kita membebaskan memory dari hasil query karena setiap query yang dikirim ke Mysql akan tersimpan dalam memory.
Format : mysql_free_result($query); 5. Menginputkan Data Untuk menambah data pada Mysql dapat digunakan cara ini : <?php $host = "localhost"; $user = "root"; $pass = ""; $db = "coba"; // memilih database $kon = mysql_connect ($host,$user,$pass); mysql_select_db($db); $q = mysql_query("INSERT INTO tab1 (Nama, Umur) VALUES ( 'aku tambah', '15')"); if ($q) { echo (mysql_affected_rows()); } ?>
84
BAB 15 Pengenalan Dreamweaver

Dreamweaver merupakan salah satu software pembuat website yang mempunyai banyak sekali kemudahan dalam pengoperasiannya namun juga sangat powerful dalam pembuatan website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan macromedia flash, sebuah tool animasi yang sangat populer di internet. Pertama kali Dreamweaver dibuka, setelah anda instal sebelumnya, maka akan tertampil jendela yang menanyakan kepada kita untuk memilih jenis layout yang diinginkan.
Gambar Jendela dialog ketika pertama kali Dreamweaver di-start
Gambar di bawah merupakan gambaran layout kerja Dreamweaver MX.
Jendela-
jendela
pembantu yang terdapat pada menu window dikelompokkan pada panel bagian kanan. Seluruh panel bisa disembunyikan dengan mengklik tombol yang ditunjukkan oleh tanda panah.
Gambar Bagian-bagian utama tempat kerja Dreamweaver

Gambar Document toolbar. Bisa digunakan untuk mengatur tampilan kerja. Dalam tampilan script saja, tampilan script dan desain, ataukan hanya desain saja. Insert bar membantu kita untuk memasukkan berbagai berbagai elemen-elemen pembentuk halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan lain-lain. Elemen-elemen tersebut direpresentasikan dalam bentuk icon. Document toolbar memberikan kita kemudahan untuk melakukan perintah- perintah yang memberikan efek pada seluruh dokumen, seperti halnya judul dokumen. Property inspector menampilkan berbagai property yang dipunyai elemen tertentu. Kita bisa langsung mengubah properti dari elemen tersebut dengan tool ini, misalnya merubah warna text, memberikan background pada elemen tabel, menggabungkan kolom, dan lainlain. Anda bisa membuka atau membuat lebih dari satu dokumen. Dokumen-dokumen yang sudah anda buka akan diurutkan pada bagian bawah design view. Anda tinggal mengklik tombol tersebut untuk berpindah antar halaman.
86
BAB 16 PROJECT
1. Pembuatan Database - Buatlah database dengan nama smk - Didalam database tersebut, buat tabel siswa
2. Script a. koneksi.php
<?php $server = "localhost"; $username = "root"; $password = ""; $database = "smk"; mysql_connect($server,$username,$password) or die ("gagal"); mysql_select_db ($database) or die ("Database tidak ditemukan"); ?>
b. tampil_siswa.php
<?php echo "<h2>TAMPIL SISWA</h2> <form method=POST action=finput_siswa.php> <input type=submit value='Tambah Siswa'> </form> <table border=1> <tr><td>No</td><td>NIS</td><td>Nama</td><td>Tgl Lahir</td><td>Alamat</td><td colspan=2 align=center>Action</td></tr>"; include "koneksi.php"; $tampil=mysql_query("SELECT * FROM siswa ORDER BY nis"); $no=1; while ($r=mysql_fetch_array($tampil)){ echo"<tr><td>$no</td> <td>$r[nis]</td> <td>$r[nm_siswa]</td> Computer Engineering and Network SMK Tunas Harapan Pati 87
Modul Mapel Web Dasar Kelas XI TKJ <td>$r[tgl_lahir]</td> <td>$r[alamat]</td> <td><a href=hapus_siswa.php?nis=$r[nis]>Hapus</a></td> <td><a href=fedit_siswa.php?nis=$r[nis]>Edit</a></td> </tr>"; $no++; } echo "</table>"; ?>
c. finput_siswa.php
<?php echo"<h2>INPUT SISWA</h> <form method=POST action=input_siswa.php> <table> <tr> <td>NIS</td><td>:</td><td><input type=text name='nis'></td> </tr> <tr> <td>Nama</td><td>:</td><td><input type=text name='nm_siswa'></td> </tr> <tr> <td>Tgl Lahir</td><td>:</td><td><input type=text name='tgl_lhr'></td></tr> <tr> <td>Alamat</td><td>:</td><td><input type=text name='alamat'></td> </tr> <tr> <td>Agama</td><td>:</td><td><input type=text name='agama'></td></tr> <tr> <td>Email</td><td>:</td><td><input type=text name='email'></td></tr> <tr> <td>No Telp</td><td>:</td><td><input type=text name='telp_siswa'></td></tr> <tr> <td>Username</td><td>:</td><td><input type=text name='user'></td></tr> <tr> <td>Password</td><td>:</td><td><input type=text name='pass'></td></tr>
<tr><td>.</td><td>.</td><td><input type=submit value=Simpan></td></tr> </table> </form>"; ?>
d. input_siswa.php
<?php include "koneksi.php"; mysql_query ("INSERT INTO siswa(nis,nm_siswa,tgl_lahir,alamat,agama,email,telp_siswa,user,pass) VALUES('$_POST[nis]','$_POST[nm_siswa]','$_POST[tgl_lahir]','$_POST[alamat]','$_POST[ agama]','$_POST[email]','$_POST[telp_siswa]','$_POST[user]') ,'$_POST[pass]'"); header('location:tampil_siswa.php'); ?>
88
e. hapus_siswa.php
<?php include "koneksi.php"; mysql_query("DELETE FROM siswa WHERE nis='$_GET[nis]'"); header('location:tampil_siswa.php'); ?>
f. fedit_siswa.php
<?php include "koneksi.php"; $edit=mysql_query("SELECT * FROM siswa WHERE nis='$_GET[nis]'"); $r =mysql_fetch_array($edit); echo"<h2>EDIT SISWA</h2> <form method=POST action=edit_siswa.php> <input type=hidden name=nis value='$r[nis]'> <table> <tr><td>NIS</td><td>:</td><td><input type=text name=nis value='$r[nis]' disabled='disabled'></td></tr> <tr><td>Nama</td><td>:</td><td><input type=text name=nm_siswa value='$r[nm_siswa]'></td></tr> <tr><td>Tgl Lahir</td><td>:</td><td><input type=date name=tgl_lahir value='$r[tgl_lahir]'></td></tr> <tr><td>Alamat</td><td>:</td><td><input type=text name=alamat name value='$r[alamat]'></td></tr> <tr><td>Agama</td><td>:</td><td><input type=text name=agama value='$r[agama]'></td></tr> <tr><td>Email</td><td>:</td><td><input type=text name=email value='$r[email]'></td></tr> <tr><td>No Telp</td><td>:</td><td><input type=text name=telp_siswa value='$r[telp_siswa]'></td> <tr><td>Username</td><td>:</td><td><input type=text name=user value='$r[user]'></td></tr> <tr><td>Password</td><td>:</td><td><input type=password name=pass value='$r[pass]'></td></tr> <tr><td>.</td><td>.</td><td><input type=submit value=Update></td></tr> </table> </form>"; ?>
g. edit_siswa.php
<?php include "koneksi.php"; mysql_query("UPDATE siswa SET nis='$_POST[nis]', nm_siswa='$_POST[nm_siswa]', tgl_lahir='$_POST[tgl_lahir]', alamat='$_POST[alamat]', agama='$_POST[agama]', email='$_POST[email]', telp_siswa='$_POST[telp_siswa]', user='$_POST[user]', pass='$_POST[pass]' WHERE nis='$_POST[nis]'"); Computer Engineering and Network SMK Tunas Harapan Pati 89
Modul Mapel Web Dasar Kelas XI TKJ header('location:tampil_siswa.php'); ?>
h. flogin.php
<?php echo "<h2>Login</h2> <form method=POST action=login.php> <table> <tr><td>Username</td><td>:</td><td><input type=text name=user></td></tr> <tr><td>Password</td><td>:</td><td><input type=password name=pass></td></tr> <tr><td></td><td></td><td><input type=submit value=Login></td></tr> </table> </form>"; ?>
i. login.php
<?php // memulai session session_start(); include "koneksi.php"; $user = $_POST['user']; $pass = $_POST['pass']; // query untuk mendapatkan record dari username $hasil = mysql_query("SELECT * FROM siswa WHERE user = '$user'"); $data = mysql_fetch_array($hasil); // cek kesesuaian password if ($pass == $data['pass']) { echo "<h1>Login Sukses</h1>"; // menyimpan username dan level ke dalam session $_SESSION['level'] = $data['level']; $_SESSION['user'] = $data['user']; // tampilkan menu include "admin.php"; echo "<br>"; echo "<a href='logout.php'>LOGOUT</a>"; } else { echo "<h1>Login gagal</h1>"; echo "<p><a href='flogin.php'>Login Kembali</a></p>"; } ?>
j. admin.php
<?php echo "ANDA MASUK HALAMAN ADMIN"; ?>
90
k. logout.php
<?php session_start(); session_destroy(); echo "<h1>Anda sudah logout</h1>"; echo "<p><a href='flogin.php'>Login Kembali</a></p>"; ?>
l. index.php Insert Table
Buatlah sedemikian rupa table tersebut, sehingga menjadi seperti tampilan dibawah :
Home = ?link=home Profil = ?link=profil Login = ?link=login
<?php $link=$_GET[link]; $link="$link.php"; if(file_exists($link)) include"$link"; else include"home.php"; ?>
m. home.php
Ketikkan tulisan : SELAMAT DATANG DI WEBSITE KAMI
91
n. profil.php
Buat table seperti dibawah :
92

Modul TKJ - Web Dasarweb Dasar

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modul TKJ - Web Dasarweb Dasar

Uploaded by

Copyright:

Available Formats

Modul Mapel Web Dasar Kelas XI TKJ

MODUL WEB DASAR

Pengampu : Muhamad Slamet Riyadi, S.Kom

Computer Engineering and Network SMK Tunas Harapan Pati 2011

Modul Mapel Web Dasar Kelas XI TKJ

web khususnya HTML,selain diperlukan

untuk digunakan dalam membantu pekerjaannya. Untuk

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

diperlukan informasinya tersebut dapat terletak

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Gambar 3. Membuka Notepad

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Gambar 4. Tampilan Notepad

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

http://www.darmajaya.ac.id). Apakah maksud tulisan http tersebut ?

Jelaskan mekanisme kerja pengaksesan sebuah dokumen html ?

Apakah yang dimaksud dengan Web Server ?

Apakah yang dimaksud Web Browser ?

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

BAB 2 Pengantar Web

Pendahuluan Hypertext Markup Language (HTML) merupakan dasar untuk

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Berikut adalah contoh kode HTML yang menggunakan tag ini :

contoh berikut ini :

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

BAB 3 Pengaturan Text pada dokumen HTML

memformat/mengatur teks pada

Tabel 1. Daftar Tag Fisik

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

</BLOCKQUOTE>. Teks akan ditampilkan menyesesuaikan dengan ruangan

Modul Mapel Web Dasar Kelas XI TKJ

Modul Mapel Web Dasar Kelas XI TKJ

Tabel 3. Daftar nama warna dan kode rgbnya

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

Computer Engineering and Network SMK Tunas Harapan Pati

Modul Mapel Web Dasar Kelas XI TKJ

HTML &Auml; &micro; &Euml; &Iuml; &Ouml; &Uuml; &szlig;

HTML &auml; &euml; &iuml; &ouml; &uuml; &copy; &quote;

HTML &nbsp; &reg; &#8482; &nbsp; &amp; &raquo; &laquo;

Simbol < > x

HTML &lt; &gt; &times; &divide; &frac12; &frac34; &frac14;

Character.html <html> <head><title>char</title></head> <body> <h1>Messag&Euml; From Kahlil Gi&szlig;ran</h1>

HTML Ä µ Ë Ï Ö Ü ß

HTML ä ë ï ö ü © &quote;

HTML ® ™ & » «

HTML < > × ÷ ½ ¾ ¼

Character.html <html> <head><title>char</title></head> <body> <h1>MessagË From Kahlil Gißran</h1>

Adalah<br> Bunga-bunga »<br> «<br> ÷<br> ä </body> </html>