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, [email protected]

Computer Engineering and Network SMK Tunas Harapan Pati 2011BAB 1Computer Engineering and Network SMK Tunas Harapan Pati 1

Sejarah WebTujuan 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.

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.

Sejarah Web2

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.

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.

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.

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

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 judul yang browser pada bagian ini dapat berisikan perintah-perintah menampilkan: Text, gambar, suara dan lain-lain. untuk ingin ditampilkan pada title bar web

Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan . Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag dan tag . Header dari halaman HTML diapit oleh tag dan bagian ini tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti yang berfungsi untuk menampilkan judul pada title bar window pada web browser. Tag lain misalnya 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 :

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 adalah . 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 : , 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 Hai Saya Sedang Belajar HTML

Penggunaan Tag Break Row (pindah baris) Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata lain satu tag
sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas sekarang perhatikan contoh berikut ini :Breakrow.html belajar tag br Mudah-mudahan anda cepat bisa belajar HTML
Amin !

Penggunaan Tag Paragraf Tag berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan paragraf/tek kedua sama dengan anda menggunakan tag
dua kali. Untuk lebih jelasnya perhatikan contoh di bawah ini.Paragraf1.html belajar tag paragraf Senja Telah Tiba Mentari kian temaram

Modul Mapel Web Dasar Kelas XI TKJSamar disela-sela daun cemara
Angin mulai berhembus dari samudera
Pertanda malam telah tiba

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 belajar tag paragraf Senja Telah Tiba Mentari kian temaram
Samar disela-sela daun cemara
Angin mulai berhembus ke samudera
Pertanda malam telah tiba
Bandar Lampung, 2004

Penggunaan Tag Center Untuk meratakan teks ketengah, kita juga bisa menggunakan tag . Dan untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah : . Untuk jelasnya perhatikan latihan di bawah ini :center.html belajar tag center Addres : Green Kost Production
Jl. Jambu 1 No.

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 : (Heading 1) (Heading 2) (Heading 3) (Heading 4) (Heading 5) (Heading 6)heading.html belajar tag heading ukuran heading 1 ukuran heading 2 ukuran heading 3 ukuran heading 4 ukuran heading 5 ukuran heading 6

Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :

seperti halnya pada tag , 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 . 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 biasanya12

diletakkan di bawah sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali, caranya yakni dengan menyertakan tag horizontal Row . Pada tag 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 belajar membuat garis Addres : Green Kost Production
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 . perhatikan pada

contoh berikut ini :

Divisi.html belajar tag div Addres : Green Kost Production
Jl. Jambu 1 No. 12
Gedung Meneng
Bandar Lampung 35145

Latihan Soal :

Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti gambar berikut ini :

BAB 3 Pengaturan Text pada dokumen HTMLTujuan 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

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

Modul Mapel Web Dasar Kelas XI TKJBentukTeksfisik.html mengatur teks secara fisik strikethrough Teks Miring
Teks yang ditebalkan
Teks dengan tag small
Teks Normal
Teks dengan tag Big
Teks Normal subskrip
Teks Normal superskrip
Teks seperti mesin ketik
Teks yang diberi garis bawah
Teks garis bawah, miring, tebal

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 praformat Daftar Harga Komputer : 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 Harga sewaktu-waktu dapat berubah

Penggunaan Tag Blockquote Paragraf/kutipan dokumen yang panjang umumnya dalam tag diletakan dalam

dengan menempatkan

. Teks akan ditampilkan menyesesuaikan dengan ruanganComputer Engineering and Network SMK Tunas Harapan Pati 16

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 blockquote Pagi Di Kotaku : 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. Kotaku pagi ini

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 : Singkatan Contoh lengkap penggunaan tag ini dapat dilihat pada kode-kode HTML berikut :Computer Engineering and Network SMK Tunas Harapan Pati 17

Modul Mapel Web Dasar Kelas XI TKJAcronym.html singkatan TVRI adalah telivisi pemerintah, sedangkan TPI adalah telivisi swasta.

Penggunaan Tag Font Tag font digunakan untuk mengatur jenis, ukuran, maupun warna font. Untuk menentukan jenis font, atribut font yang digunakan adalah Face. Contoh : teks yang ditampilkan Untuk menentukan ukuran, atribut yang digunakan adalahSize. Contoh : teks yang ditampilkan Untuk menentukan warna, atribut yang digunakan Color. Contoh : teks yang ditampilkan 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 rgbnyaFont.html mengatur font html Ini adalah latihan memberikan
efek font seperti :
jenis font, ukuran, warna
pada dokumen HTML

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 singkatan Normal font
warna biru
warna merah
warna hijau

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 basefont teks Normal
Warna biru
******

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

memunculkan

karakter-karakter

khusus yang menerangkan suatu entitas karakter seperti ataupun numerik seperti . Untuk contoh lain dapat dilihat pada Tabel berikut ini :

Simbol :

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 char Messag From Kahlil Giran

unga-bunga Padang
Adalah Anak-anak kasih sang Mentari
Dan

inta Kasih Semesta Alam, &
Anak-anak Manusia inta & Kasih Sayang

Adalah
Bunga-bunga

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 :

BAB 4 Bullet and Numbering pada Dokumen HTMLTujuan 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.

Daftar Item dengan Bullet Pada HTML untuk membuat Bullet atau yang sering dikenal dengan tanda daftar list, kita dapat menggunakan tag

. Dan untuk mengakhiri penggunaan tag

diakhir teks yang diberi tanda bullet diberikan tanda

. cara penulisan pada dokumen HTML dapat dilihat di bawah ini :Bullet.html pemakaian tag ul Daftar Nama Ikan :

Louhan
Sepat
Betok
Nila
Lele Dumbo

******** Pada netscape navigator, jenis bullet dapat ditentukan melalui atribut type pada tag

. Kemungkinan nilai untuk type diperlihatkan pada kode-kode dan hasil program berikut :


22

Modul Mapel Web Dasar Kelas XI TKJBullet2.html pemakaian tag ul Daftar type li :

hasil li tanpa diberi atribut type

Circle

Square

********

Numbering Adakalanya daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag , pemberian nomor dapat diotomatiskan tanpa anda harus menuliskannya. Untuk lebih jelasnya kerjakan latihan berikut :Numbering.html pemakaian tag ol Cara Memasak Mie Instant Masak air di panci sampai mendidih
Buka pembukus mie instant
Masukan Mie + bumbu kedalam Panci
Tunggu +- 3 menit
Mie siap dihidangkan

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

tabel berikut :

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 definisi Kamus Teknologi Informasi HTML Bahasa yang digunakan untuk menyusun web HTTP Protokol yang dipakai untuk mentransfer HTML

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 :

BAB 5 Menampilkan GambarTujuan 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.

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

Menampilkan Gambar Tag yang digunakan untuk menampilkan gambar pada dokumen HTML adalah . Atribut yang menyertai tag ini banyak sekali, tetapi tag yang harus selalu disertakan hanya ada satu, yaitu atribut src. Bentuk penulisan dari tag adalah sebagai berikut : Kode berikut memberikan contoh pemakaian tag :Gambar.html gambar Dragon Ball

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 , 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 . Bentuknya sebagai berikut : Contoh kode HTML yang menggunakan gambar latar belakang dapat dilihat pada kode berikut :

Modul Mapel Web Dasar Kelas XI TKJBackground.html gambar latarbelakang

Penggunaan Atribut Pada Tag 5.5.1. Atribut Border Untuk memberikan border/bingkai pada sebuah gambar, kita dapat

menggunakan atribut border pada tag . 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 :

5.5.2. Atribut Pengatur Teks Terhadap Gambar Pada tag 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 peletakan teks Dragon Balls

Pada atribut align, top dapat diganti dengan middle dan bottom untuk mendapatkan posisi yang kita inginkan.

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 . Sebagai contoh, perhatikan kode berikut :Alternatif.html membuat teks alternatif halo my friend ini adalah gambar yang telah diberi alternatif teks
selamat mencoba

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

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

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 :

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

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

BAB 6 Menggunakan TabelTujuan 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.

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 Catatan Mengawali dan mengakiri sebuah tabel

Menentukan judul pada tabel Membuat sebuah sel data Membuat judul kolom Membuat sebuah baris dalam tabel

Tabel 7. Daftar Tag Untuk Tabel

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 tabel Daftar Harga Buah Nama Buah Harga/Kg Jeruk7.500 Anggur15.000 Aple8.500 Peer10.500 Melon6.500

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 . Kalau border tidak disertakan dalam tag , nilai border dianggap sama dengan nol, maka hasil yang diperoleh garis . Contoh dalam bentuk program sebagai berikut :Tabel2.html tabel Daftar Harga Buah Nama Buah Harga/Kg Jeruk7.500 Anggur15.000 Aple8.500 Peer10.500

tidak akan

ditampilkan. Dengan kata lain, sama dengan kita menggunakan perintah

Modul Mapel Web Dasar Kelas XI TKJMelon6.500

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 . Apabila anda hanya menggunakan tag dan diakhiri dengan penutup 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 tabelDaftar Harga Buah

Kode untuk membuat judul di bawah tabelDaftar Harga Buah

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 . 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. . judul tabel /Kg

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 : kolom 1kolom 2

kotak hijau teks putih

Pengaturan Teks Pada Tabel Untuk mengatur peletakan teks di dalam sebuah sel, kita dapat menggunakan atribut VALIGN yang dapat diletakan pada tag . 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 : Valign adalah Top Valign adalah Middle Valign adalah Bottom

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 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 judul kolom brs1gabung kol1 brs1 kol2 brs2 kol2 brs3 kol2 brs4gabung kol1 brs5 kol2 brs6 kol2 brs7 kol2 brs8 kol2

colspan Daftar Harga brs 1 kol 1&2 brs2 kol1 brs2 kol2 brs3 kol1 brs3 kol2 brs4 kol1 brs3 kol2 brs 5 kol 1&2 brs6 kol1 brs6 kol2 brs7 kol1 brs7 kol2 brs8 kol1 brs8 kol2

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 , dan . 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 Teks akan menjadi rata kiri Teks akan menjadi rata tengah Teks akan menjadi rata kanan

Penggunaan pada Teks akan menjadi rata kiri Teks akan menjadi rata tengah Teks akan menjadi rata kanan

Pengaturan Sel Pada Tabel Untuk mengatur tinggi sel pada sebuah tabel, caranya kita hanya menambahkan atribut HEIGHT pada tag 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 : namaUsia

Modul Mapel Web Dasar Kelas XI TKJLarnoo24 Nurul22 Friend21

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 saja. Seperti terlihat pada

penggalan kode HTML berikut ini : NamaUsia Larnoo24 Nurul22 Yoto21

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 : NamaUsia Larnoo24 Nurul22 Yoto21

WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag atau . Contoh : namaUsia Larnoo24 Nurul22 Friend21

6.10. Pengaturan Jarak Tabel Untuk mengatur jarak teks terhadap tepi kiri dan untuk mengatur jarak sel terhadap tepi dalam Cellpadding = 10 dan cellspacing=20 NamaUsia Larnoo24 Nurul22 Yoto21

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 . Contohnya seperti berikut : GambarCatatan Wajahmu indah bagai sinar rembulan di angkasa

Latihan Soal :

Dengan menggunakan kode-kode HTML, buat tampilan-tampilan seperti gambar berikut ini :

4 3 Selamat Mengerjakan !

BAB 7 Membuat HyperlinkTujuan 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.

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.

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 atau yang biasa disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut : Label Link. 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.htmlAlamat.html Membuat Link Address : Green Kost Production Jl. Jambu 1 No.12 Gedung Meneng

Modul Mapel Web Dasar Kelas XI TKJBandar Lampung 35145 kembali ke menu utama

Simpan Program 2, berikut dengan nama file Profile.htmlProfile.html Membuat Link . 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.

kembali ke menu utama

Simpan Program 3 sebagai file utama, berikut dengan nama file utama.html

Utama.html Membuat Link . Green Kost Production . Silahkan Klik Pilihan Anda : Address Profile

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

halaman situs lain yang berada di internet. Untuk lebih jelasnya perhatikan kode program berikut ini :Weblink.html Membuat Link . Alamat Website Pilihan : . Silahkan Klik Pilihan Anda : Situs Astrologi Galery Anak Koleksi Dongeng Untuk Anak

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 Membuat warna Link . Alamat Website Pilihan : . Silahkan Klik Pilihan Anda : Situs Astrologi Galery Anak Koleksi Dongeng Untuk Anak

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.

Penggunaan atribut link, alink dan vlink dapat dilihat pada penggalan program berikut ini :

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.

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 Membuat Link Realita Kehidupan

Daftar Isi :
Bagian Pertama Bagian Kedua Bagian ketiga Baagian Penutup Bagia Pertama Bagian ini merupakan isi cerita pada bagian pertama .

Bagian Kedua Bagian ini merupakan isi cerita pada bagian kedua .


Bagian Ketiga Bagian ini merupakan isi cerita pada bagian ketiga .

Bagian Penutup Bagian ini merupakan isi cerita pada bagian Penutup .

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 di antara pasangan tag dan , bentuk penulisannya adalah :

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.htmlJudul.html frame

diperlukan berkalang. Implementasinya sebagai

Simpan berkas berikut dengan nama file : index.html

Index.html gabungan frame

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.htmlBerkaspertama.html Membuat Link pada bagian ini dapat berisi berbagai informasi yang diperlukan untuk sebuah halaman website kembali ke menu utama

Simpan berkas berikut dengan nama file berkaskedua.html berkaskedua.html Membuat Link Pada bagian ini dapat berisi teks, gambar, music, video Dan informasi yang lainya sesuai dengan keinginan kita kembali ke menu utama

Simpan berkas berikut dengan nama file menuutama.htmlmenuutama.html Membuat Link Silahkan Klik Pilihan Anda : Dokumen 1 Dokumen 2

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 . Kode yang perlu anda tulis adalah seperti berikut : Simpan dengan nama framenya.html

Framenya.html penggunaan frame frameset cols = 30%, *>

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 ?

BAB 9 Formulir Pada Halaman WebTujuan 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 dan . 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>.Computer Engineering and Network SMK Tunas Harapan Pati 54

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 dan beberapa atribut pendukung dan letaknya berada dalam pasangan tag dan . 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 formulir Nama :
Hobby
:

Berkas program info.htmlInfo.html Informasi yang anda butuhkan ada di sini

Untuk menujukan bahwa jika tombol submit diklik maka berkas HTML yang disebutkan Setelah dalam atribut action pada tag 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 dan . Textarea bisa mencakup banyak baris. Atribut-atribut yang digunakan pada tag dapat dilihat pada program berikut :textarea.html textarea Catatan :
Menurut Saya :

Penggunaan Select Pada Formulir Untuk menentukan pilihan dengan cara memilih sendiri terhadap yang ditampilkan pada daftar tertentu dapat dibuat dengan menggunakan pasangan tag dan , istilah lain dari select adalah kotak kombo (drop-down) atau daftar

pilihan.contoh penggunaan select diperlihatkan pada contoh berikut ini :

Select.html textarea Makanan yang paling anda suka :
Sate Soto Martabak Lain-lain

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 checkboxCheckbox.html radio Sayur Kesukaan Anda :
Bayam
Kol
Sawi
Lain-lain

Penggunaan Tipe Radio Tipe radio umumnya sama penggunaanya dengan checkbox. Hanya saja kalau

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 radio Jenis kelamin:
pria
wanita

Agama :
islam
kristen
katolik
budha
hindu
lain-lain

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 :

Modul Mapel Web Dasar Kelas XI TKJPassword.html password Nama User :
Password :

Tombol Pada Atribut Input Tombol yang sudah kita pergunakan pada contoh-contoh diatas ada dua, yaitu submit dan reset. Dengan menggunakan tag , 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 buat tombol Klik Tombol berikut :

Latihan Soal :

Sebutkan dan jelaskan fungsinya dari komponen-komponen yang ada pada formulir

Buatlah tampilan penggunaan Fromulir seperti yang terlihat pada tampilam berikut ini ?

BAB 10 Multimedia Pada WebTujuan 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 suara Anda pengen denger musik ?
Klik aja :
Phil Collins
Radio Head

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

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 musik Gunakan Internet Explorer bila anda
Ingin mendengarkan background music

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 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 avi dengan embed Silakan menikmati klip video berikut.

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.

BAB 11 Paket Instalasi XAMPPPasti 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.

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

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.

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.

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.

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.

BAB 12 Membuat database MySQL dan tabel menggunakan phpMyAdminOke, 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.

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'.Computer Engineering and Network SMK Tunas Harapan Pati 71

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

Jika sukses akan seperti ini.

OK, sekian dulu untuk artikel Membuat database MySQL dan tabel menggunakan phpMyAdmin.

BAB 13 Pengenalan PHP13.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).

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 : Computer Engineering and Network SMK Tunas Harapan Pati 75

13.3. Sintaks Dasar PHP Cara penulisan kode PHP, yaitu : Diawali 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.

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

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

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.

Keterangan :$q = mysql_query("select * from tab1",$kon);

Ini untuk querynya : Tampilkan semua field pada table tab1.$jum = mysql_num_rows($q);

Ini untuk mengetahui jumlah record yang adawhile($row=mysql_fetch_array($q)) { echo "nama : $row[nama]
"; echo "Usia : $row[umur]
"; } 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]
"; echo "Usia : $row[1]
"; }

Tampilan dengan disertai tabel : Contoh :

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.

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 :

modul tkj - web dasarweb dasar

Documents