Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Modul1 Dasar-Web-dan
Document related concepts
no text concepts found
Transcript
Ir. Darmadi, MM Email : [email protected] HP 085715311155 1 Pengantar Sistem Berbasis Web atau Aplikasi Berbasis Web adalah sebuah sistem yang dibangun dengan konsep rekayasa web (web engineering) dan diaplikasikan secara online melalui media internet. Web engineering adalah suatu proses yang digunakan untuk menciptakan suatu sistem aplikasi berbasis web dengan menggunakan ilmu rekayasa, prinsip-prinsip manajemen dan pendekatan sistematis sehingga dapat diperoleh sistem dan aplikasi web dengan kualitas tinggi. Tujuannya untuk mengendalikan pengembangan, meminimalisasi resiko dan meningkatkan kualitas sistem berbasis web (itb.ac.id, 2005). 2 Model Pemrograman Web Klien (PC) USER (PC) Web Server Request (URL) Request (URL) HTTP Server Response (Content) Web Browser Response (Content) Content 3 Dasar-dasar Pemrograman Berbasis Web Beberapa konsep dasar pemrograman berbasis web , yaitu : • Komunikasi antara web browser dan web server berdasarkan protokol Hypertext Transfer Protocol (HTTP) . • Dokumen dan semua sumber daya apapun di jaringan yang dikehendaki diidentifikasi dengan Universal Resource Locator (URL). • Dokumen web ditulis berdasarkan standar Hypertext Markup Language (HTML) . • Pemrograman sisi klien (client-side scripting) dan Java applet. • Pemrograman sisi server (server-side scripting/programming). 4 Pemrograman Sisi Klien (client-side scripting) Bahasa pemrograman yang untuk mengaplikasikannya tidak memerlukan web server, atau bahasa pemrograman yang berjalan di sisi client. Contoh : HTML(.html) JavaScript (.js) 5 Pemrograman Sisi Server (server-side scripting) Bahasa pemrograman yang untuk mengaplikasikannya memerlukan web server, atau bahasa pemrograman yang berjalan di sisi server. Contoh : ASP, memerlukan web server IIS. PHP, memerlukan web server Apache. 6 Web Browser Web Browser adalah perangkat lunak yang mulanya hanya untuk menampilkan (rendering) dokumen web/HTML. Namun saat ini, web browser harus mampu mengeksekusi (interpretasi) JavaScript atau VBScript, menjalankan Java Applet, memahami dokumen XML, dan menjalankan dokumen tertentu dengan fasiltias plug-in seperti file .swf Macromedia Flash dan sebagainya. Disamping itu, web browser juga mempunyai fasilitas kenyamanan pemakai seperti dapat membuka lebih dari satu jendela, manajemen alamat web yang bagus, pengamanan yang memadai dan sebagainya. Contoh : Internet Explorer, Mozilla Firefox, Opera. 7 Web server Web server adalah HTTP server sebagai penyedia dokumen yang diminta web browser. Saat ini, web server telah kompleks karena harus melayani banyak hal dan bahkan menjadi pusat layanan-layanan lain. Web server telah menjadi komponen terpenting di application server. Web server harus mampu melayani permintaan dokumen yang diminta web browser, dan mampu disetting berinteraksi dengan program JSP, ASP, PHP, secara CGI dan sebagainya. Contoh : Apache, IIS. 8 Hypertext Transfer Protocol (HTTP) Hypertext Transfer Protocol (HTTP) adalah protokol level aplikasi untuk sistem informasi hypermedia tersebar. Protokol ini generik dan stateless yang dapat dimanfaatkan banyak tugas selain untuk hypertext. HTTP adalah bahasa komunikasi antara web browser dan web server, dimana kebanyakan komunikasi ini di luar perhatian pemakai web browser. 9 Universal Resource Locator (URL) URL adalah penunjuk ke sumber daya tertentu di jaringan TCP/IP (internet) yang mempunyai format sintaks standar sebagai berikut. Protokol://Servername:PortNumber/Filepath Contoh : http://jayabaya.ac.id/index.html http://jayabaya.ac.id:30234519/index.html 10 Hypertext Markup Language (HTML) Hypertext Markup Language (HTML) merupakan bahasa markup paling popular, disusul eXtensible Markup Language (XML). XML adalah bahasa yang digunakan untuk membuat bahasa markup lain yaitu Wireless Markup Language (WML). Bahasa markup bukan bahasa pemrograman. Oleh karena itu, penyebutan bahasa pemrograman HTML adalah kurang tepat 11 Format Dasar HTML <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> { Tempat untuk coding } </body> </html> 12 1. TEXT HTML <html> <head> <title>Halaman Latihan 1</title> </head> <body> <h1>Ini adalah latihan pemrograman web pertamaku.</h1> </body> </html> 13 Tampilan Web 14 2. Tabel HTML 15 Kode program tabel standar <table width="80%" border="1" cellspacing="10“ cellpadding="10"> <tr> <!--deklarasi baris --> <td><div align="center">No</div></td> <!--deklarasi kolom --> </tr> </table> Tag HTML untuk menambahkan komentar : <!-- …..--> Cellpading : Besarnya jarak antara teks pada cell dengan garis/border. Cellspacing : Besarnya jarak spasi antara cell. Width : Lebar tabel yang dinyatakan dalam persen atau pixel. 16 Contoh 17 Kode Program <table width="80%" border="1" cellspacing="10“ cellpadding="10"> <tr> <td><div align="center">No</div></td> <td><div align="center">NIM</div></td> <td><div align="center">Nama</div></td> <td><div align="center">Alamat</div></td> </tr> <tr> <td><div align="center">1</div></td> <td><div align="center">30551113001</div></td> <td>Doni</td> <td>Sleman</td> </tr> </table> 18 3.FORMAT HTML untuk Teks <p>..</p> : untuk paragrap baru <BR> baris baru <pre>..</pre> : menetapkan teks yang formatnya sudah dibuat terlebih dahulu Contoh : <p>Teks pada pragrap</p> <pre>Teks dengan format Pre * * * * * * * * * * * * * * * * * * </pre> 19 4.gambar HTML Anda dapat menyatakan pemakaian gambar dengan tag <IMG> (image). <BODY><IMG src=””></BODY> Kita juga harus menyebutkan sumber (nama dan tempat) serta ukurannya. Contoh : <img src="compaq front specs.jpg" width="167" height="153" /> <BODY> <IMG SRC=“minum.gif" WIDTH=130 HEIGHT=101> </BODY> 20 MEMBUAT LINK </BODY> Lihat Yahoo!Kemudian tambahkan sepasang anchor tag. <BODY> Lihat <A>Yahoo!</A> </BODY> Lihat Yahoo!Tambahkan URL-nya dan selesailah sudah! URL adalah singkatan dari Universal Resource Locator. Ini adalah istilah canggih yang diciptakan oleh orang-orang komputer. Mereka memang punya kecenderungan untuk banyak melakukan hal-hal seperti ini. URL sebenarnya adalah sekedar alamat saja. <BODY> Lihat <A HREF="http://www.yahoo.com/">Yahoo!</A> </BODY> Lihat Yahoo!Mari kita coba satu lagi. <BODY> Lihat PTS Online! </BODY> List Ordered List(Daftar terurut, untuk mengatur teks dengan urutan berdasarkan nomor) Contoh : <ol> <li>Majalah TI</li> <li>Buku TI</li> </ol> Unordered List(Daftar tidak terurut, yang menggunakan bullet sebagai simbol urutannya) Contoh : <ul> <li>Majalah TI</li> <li>Buku TI</li> </ul> 22 Cascading Style Sheet (CSS) Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking 23 Dalam modul ini akan dipelajari: Apa CSS 2. Text formating (color, size) 3. Pewarisan 4. Class 5. Positioning 6. Watermarking 1. 24 1. Apa itu CSS • • • • CSS = Cascading Style Sheet adlah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs CSS dimulai dengan : <STYLE TYPE="text/css"> NamaKODeBaru { Parameter : nilai } </STYLE> Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak tebal pada teks yang terletak diantaranya. Dengan CSS kita dapat mendefinisikan <B>..</B> agar memiliki efek tambahan sesuai yang kita inginkan, misalnya efek terhadap warna huruf. Contoh : <Style TYPE=“txt/CSS” U {color=red} </Style> 25 Contoh efek <U>..</U> menjadi pengatur warna Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan. Hasilnya sama dengan kode berikut : 26 Efek yang sama pada dua kode I dan U Tag <U> =under line Dan tag <I> = italic Diberi efek baru, yaitu warna merah hurufnya Tag <B> = bold, diberi efek warna hijau Klik untuk lihat hasil 27 Beberapa efek pada satu kode B Misalkan pada tag <B> akan dilekatkan efek warna, jenis huruf dan gaya huruf Perintahnya CSS-style nya B { color:lime; text-decoration: underline; font-family:Arial } Klik untuk lihat hasil 28 2. CSS-GLOBAL :Sekali Tulis, pakai bersama Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS File tersebut dapat diacu oleh setiap HTML Jika file HTML akan mengacu file CSS tersebut ditulis : <HEAD> <LINK REL="stylesheet" HREF="global.css" TYPE="text/css"> </HEAD> File : global.css B {color: red; text-decoration: underline; font-family: Arial } I {color:blue; font-family:"Monotype Corsiva"; font-size:20} Digunakan oleh Dan Digunakan oleh Css_global.html Css_global2.html 29 Selanjutnya 2 file html digabung dalam 1 frame Klik lihat hasil Terlihat : Efek dari tag <B> dan tag <I> yang didefinisikan dalam STYLE di file global.css 30 3. Pewarisan Jika kita definisikan suatu CSS yang berefek pada huruf, sementara dalam HTML juga didefinisikan efek huruf, dan jika tag CSS mengapit tag HTML maka pengaruh tag CSS akan mewaris (menurun) pada tag HTMLnya Efek warna huruf sebagai pengaruh tag CSS “menurun” pada Kliktag lihatHTML hasil font, yaitu warna hijau 31 4. Class Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class <STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue} </STYLE> Pada efek HTML dapat digunakan sbb : <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek class tanya</P> Efek class dapat dilekatkan paad tag HTML apa saja, seperti pada tag <B>, tag <I> dst 32 Contoh class (untuk ubah warna) Klik lihat hasil Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b> 33 Contoh class (untuk ubah ukuran huruf) Klik lihat hasil Font-size : xx-small, x-small, small, medium, large, x-large, xx-large 34 Contoh class (untuk ubah warna) Klik lihat hasil Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b> 35 5. Positioning Klik lihat hasil 36 6. Watermarking Watermarking adalah konsep mendesaign background layar dengan gambar tertentu Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut : <STYLE TYPE="text/css"> .nama_Class {background-image: url(“namagambar"); backgroundrepeat: yes} Hasil </STYLE> </HEAD> klik CONTOH : klik ! 37 Latihan 1. 2. 3. 4. Buatlah gambar dari windows search seperti gambar dog sebelah ini Namakan gambar tersebut dengan dog2.bmp Gunakan gambar dog2.BMP tersebut sebagai watermarking dalam menampilkan tulisan seperti dalam gambar berikutnya Atur dalam konsep class sedemikian sehingg huruf berwarna magenta dan berukuran 20 38 Membuat Form Membuat web page yang bersifat interaktif dengan penggunaan tag <FORM>. Dengan tag ini anda dapat membuat buku tamu, formulir pemesanan, survey , meminta komentar atau apa pun di web site anda. Pada dasarnya, form html mempunyai bentuk seperti ini.... <FORM> awal form <INPUT> minta masukan menggunakan salah satu dari beberapa cara yg tersedia.... <INPUT> ....anda bisa gunakan berapa pun input yang anda inginkan </FORM> akhir form Itulah form html secara garis besar. Pelajaran 1 Mulailah dengan membuka Notepad, kemudian copykan baris-baris di bawah ini: <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY> </BODY> </HTML> Simpan dengan nama form1.html di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.html tadi. Biarkan Notepad tetap terbuka sehingga apa yang anda tuliskan di situ bisa langsung anda lihat Tuliskan tag FORM . <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY> <FORM> </FORM> </BODY> </HTML> Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke suatu program/cgi script untuk diproses, atau 2) anda dapat meminta browser untuk mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan pemahaman tentang pemrograman web yang ada di luar cakupan tutorial ini Cara kedua, biasa disebut mailto form, CARA KEDUA <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY> <FORM METHOD=POST ACTION="mailto:[email protected]" ENCTYPE="application/x-www-formurlencoded"> </FORM> </BODY> </HTML> Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat email anda sesudah Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini... NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT =Jl.+Bali+No.+13 &KOTA=Semarang&Propinsi=Jawa+Tengah Padahal yang anda inginkan adalah format yang lebih mudah kita pahami seperti ini... NAMAFORM=Daftar Anggota NAMA=Bram D. Wardhana ALAMAT=Jl. Bali No. 13 KOTA=Semarang PROPINSI=Jawa Tengah Ada beberapa program yang dapat digunakan untuk mengubah format tersebut, misalnya Mailto Formatter Program kecil ini sangat bagus dan bisa anda dapatkan secara gratis (freeware) di internet. Contoh di atas menunjukkan bahwa form html tidak lebih dari nama masukan (NAMA, ALAMAT, dll) yang dipasangkan dengan nilai masukan (Bram D. Wardhana, Jl. Bali No. 13, dll). Satu-satunya variabel adalah bagaimana cara kita mendapatkan data-data tersebut. Pelajaran 2 Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag <FORM>. Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda. Bentuk masukan (TYPE of <INPUT>) yang paling umum digunakan dalam form html adalah TEXT. <INPUT TYPE=TEXT> Setiap masukan memerlukan nama (NAME). <INPUT TYPE=TEXT NAME="ALAMAT"> Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13. Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan. <INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31"> Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya. Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas. Kita dapat juga menentukan panjang kotak masukan. <INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=10> <INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=20> <INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31" SIZE=30> Pelajaran 3 Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons. <INPUT TYPE=RADIO NAME="TEMAN BAIK"> Tambahkan 2 lagi. <INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing. <INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><P> Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini. Setiap Radio Buttons harus diberi VALUE. <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"><BR> Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap. Jangan frustasi, saya sendiri sering merasa bingung. Itulah sebabnya saya sangat mengandalkan catatan/referensi tentang html. (Anda pikir saya menyimpan semuanya di kepala saya??) OK, masing-masing kita beri label/nama. <INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja. Siapakah di antara mereka yang merupakan sahabat anda?<BR> <INPUT TYPE=CHECKBOX NAME="ED" VALUE="YA" CHECKED> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA" CHECKED> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P> Pelajaran 4 Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan <SELECT> sebagai pengganti <INPUT> dan anda harus tambahkan tag penutup. Mari kita coba. <SELECT> </SELECT> Jangan lupa beri nama. <SELECT NAME="TEMAN BAIK"> </SELECT> Kemudian tambahkan beberapa option. <SELECT NAME="TEMAN BAIK"> <OPTION>Edi <OPTION>Ricky Dan setiap <OPTION> kita beri VALUE. <SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza </SELECT> Defaultnya adalah pilihan pertama dalam daftar. Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar. <SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi" Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama. <SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza <OPTION VALUE="Arie">Arie <OPTION VALUE="Putri">Putri <OPTION VALUE="Maria">Maria </SELECT> Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag <SELECT>. <SELECT NAME="TEMAN BAIK" SIZE=4> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza <OPTION VALUE="Arie">Arie <OPTION VALUE="Putri">Putri <OPTION VALUE="Maria">Maria </SELECT> Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan? Bentuk masukan lain yang sangat berguna adalah <TEXTAREA>. <TEXTAREA NAME="KOMENTAR"> </TEXTAREA> Anda menentukan besarnya kotak masukan dengan cara.... <TEXTAREA NAME="KOMENTAR" ROWS=6 COLS=50> </TEXTAREA> ROWS adalah tingginya, COLS adalah lebarnya. Satu atribut yang cukup membantu dalam <TEXTAREA> adalah WRAP. Mungkin ada browser yang tidak mengenal perintah ini, tapi Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan.... <TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=VIRTUAL> </TEXTAREA> WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak terputus. Lakukan hal yang sama dengan ini.... <TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=PHYSICAL> </TEXTAREA> Pelajaran 5 Bentuk lain dari masukan adalah HIDDEN input. <INPUT TYPE=HIDDEN NAME="RAHASIA" VALUE="Form 1"> HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan diprosesnya. Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda tanyakan. Masalahnya adalah, anda ingin menempatkan Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini.... <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 1"> ... untuk web site pertama <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 2"> ... untuk web site kedua <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 3"> ... untuk web site ketiga Dan seterusnya dan selanjutnya.... Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini (bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh berikut ini tetap merupakan HIDDEN input yang sah.... <INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan dapatkan E=Mc^2 HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script. Bentuk terakhir dari input adalah tombol SUBMIT dan RESET. Kedua perintah ini sangat sederhana.... <INPUT TYPE=SUBMIT> SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form.... Cara Mudah Membuat Frame Hai. Kali ini saya akan menjelaskan tentang pembuatan frame untuk dokumen html anda. Pemakaian frame secara baik dapat membantu penampilan web site anda dan mempermudah navigasi halaman-halaman web tersebut. Ingat, kata kuncinya adalah pemakaian secara baik. Jelas? Membagi halaman web menjadi beberapa frame sebenarnya sangat mudah. Konsep dasarnya adalah seperti ini: Setiap frame adalah dokumen html biasa. Jika anda ingin membagi halaman web anda menjadi 2 frame yang bersebelahan, maka anda harus membuat dokumen html yang lengkap untuk frame kiri dan dokumen html yang lengkap pula untuk frame sebelah kanan. Sebagai tambahan anda perlu membuat dokumen html ketiga. Dokumen ini adalah frame definition document (untuk mudahnya kita sebut saja MASTER PAGE) dan berisi tag <FRAME> yang menentukan tata letak setiap frame dan dokumen html yang akan mengisi frame tersebut. Sebetulnya, memang hanya itu fungsinya. . Cara Mudah Membuat Frame Pada dasarnya, hanya ada tiga tag utama tentang frame yang paling perlu kita perhatikan yaitu: <FRAMESET> dan <FRAME>. </FRAMESET> Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda. Pelajaran 1 Sekarang coba anda buat dokumen html berikut. <HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Lisa </BODY> </HTML> Simpan di folder tadi dengan nama Lisa.html. Lakukan hal yang sama untuk Tessy, Tina, Sari, dan Ratna. Simpan semuanya di folder frame. Seharusnya anda sekarang mempunyai satu folder dengan 5 dokumen html yang Ok, ini yang menarik... membuat master page anda. Mulai dengan ini. <HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> <BODY> </BODY> </HTML> Hapus tag <BODY>. Master page tidak menggunakannya...sehingga menjadi <HTML> <HEAD> <TITLE>Frame HTML Saya- Master .Pemakaian tag <FRAMESET>. <HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML> Agar lebih bersih dan jelas, saya tidak akan tuliskan lagi tag <HTML>, <HEAD> dan <TITLE>. Ingat, anda harus tetap menuliskannya di dokumen anda. <FRAMESET> </FRAMESET> Mari kita tentukan bagaimana penampilan halaman tersebut. Kita minta pada browser untuk membaginya menjadi 2 kolom, masingmasing menempati 50% bagian. <FRAMESET COLS="50%,50%"> <! Cols=columns> </FRAMESET> Kita harus beritahu browser apa yang mengisi masing-masing frame. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <!src=source> <FRAME SRC="putri.html"> </FRAMESET> LIHAT. Anda seharusnya bangga dengan frame html yang sudah anda ciptakan! Pelajaran 2 Kita ingat bahwa tag <FRAMESET> lah yang melakukan semua pembagian. Memang itulah yang dilakukannya... membagi halaman. Tag ini menentukan juga bagaimana pembagian tersebut dilakukan. Tapi ingat, kapanpun anda ingin melakukan pembagian - gunakan <FRAMESET>. Dapatkah kita membagi halaman menjadi lebih dari 2 bagian? Ya, tapi jangan lupa menyediakan satu halaman untuk setiap frame atau anda akan membingungkan browser. <FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> LIHAT Tentu saja kita bisa membuat setiap frame berbeda ukurannya. Pastikan anda tidak salah hitung atau browser akan menampilkan interpretasinya sendiri. <FRAMESET COLS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET> LIHAT Bila halaman kita bagi menjadi baris (ROWS) dan bukannya kolom (COLS), kita akan mendapat sesuatu yang berbeda sama sekali. <FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> <FRAME SRC="tina.html"> <FRAME SRC="sari.html"> </FRAMESET> LIHAT Mari kita kembali ke bentuk 2 frame, halaman yang dibagi menjadi 2 kolom sama besar. <FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> </FRAMESET> LIHAT Kita bisa mengganti 50% dengan 50 pixels (picture elements, setiap titik di layar komputer anda. Atau kita gunakan saja istilah titik. OK? OK). Dan kita bisa gunakan * sebagai pengganti angka. * berarti berapapun sisanya. <FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> Ada satu hal yang sangat penting dan harus anda perhatikan. Misalkan anda membuat frame selebar 100 titik di sebelah kiri, dan 100 titik di kanan. Karena ukuran layar anda adalah 800x600, maka frame ketiga di tengah menjadi selebar 600 titik. Semuanya tampak bagus dan keren... untuk anda. Misalkan layar komputer saya ukurannya hanya 640x480. Kedua frame dengan lebar 100 titik tadi hanya tampil selebar 80 (640/800x100) titik di layar saya. Bila anda memakai ukuran absolut dalam tag <FRAMESET> anda, SELALU gunakan paling tidak satu * sebagai frame yang elastis. Dengan cara ini segala sesuatunya akan tampak baik bagi semua orang. Ini adalah kesalahan umum yang sering terjadi dalam pemakaian frame dan saya ingin anda ekstra hati-hati mengenai hal ini. Pembagian halaman Penyebabnya adalah karena anda menentukan frame sebelah kiri lebarnya 15%. 15% dari apa? 15% dari berapapun lebar layar komputer mereka. Ini berarti frame kiri bisa 'tampil beda' bagi orang yang berbeda pula. Bagaimana mengatasinya? Gunakan saja nilai absolut untuk frame kiri dan buatlah frame kanan elastis (misalnya <FRAMESET COLS="120,*">). . Tidak ada salahnya jika nilai absolut tersebut kita perbesar sedikit. Supaya tidak terlalu sesak dan ada ruang untuk bernafas. Sebagai contoh, jika 100 titik mencukupi tetapi tampak terlalu sempit... ubahlah lebar frame menjadi 120 atau 125 titik. Kita juga dapat membuat lebih dari satu frame elastis dan menyatakan ukurannya relatif satu terhadap yang lain. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <FRAME SRC="ratna.html"> </FRAMESET> LIHAT Terjemahannya kurang leb: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan Ratna ketiga. Bagaimana jika kita ingin membagi Ratna menjadi dua bagian horisontal. Ingat yang saya katakan bahwa kalau anda ingin membagi halaman, anda harus menggunakan tag <FRAMESET>. Pertamatama kita harus mengganti Ratna dengan pasangan tag <FRAMESET>. <FRAMESET COLS="50,*,2*"> <FRAME SRC="lisa.html"> <FRAME SRC="putri.html"> <! Ini frame sisanya> <FRAMESET ROWS=”50,50”> <FRAME SRC=”ratna.html"> </FRAMESET > </FRAMESET> Membuat halaman direktori LINK <HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3>Daftar</H3> <A HREF="home.html" TARGET="FRAMEUTAMA">Home</A><P> <A HREF="sini.html" TARGET="FRAME-UTAMA">Ke sini</A><BR> <A HREF="sana.html" TARGET="FRAME-UTAMA">atau ke sana</A><P> atau kunjungi<BR> <A HREF="http://www.pts.co.id/" TARGET="_top">PTS Online</A><BR> <A HREF="http://www.tutorial.or.id/" TARGET="_top">Web Tutorial</A> </BODY> </HTML> Coba lihat Master Page. Latihan2 73 Latihan2 74 Tanda & berarti awal suatu karakter khusus. Tanda ; berarti akhir karakter khusus tadi dan huruf-huruf di antaranya adalah semacam singkatan yang menunjukkan fungsinya. Hanya sedikit karakter yang tergolong khusus. Ada 6 lagi yang perlu anda tahu. (Catatansemuanya harus dituliskan dengan huruf kecil) non-breaking space (spasi) < < less-than symbol (tanda lebih kecil) > > greater-than symbol (tanda lebih besar) & & ampersand (dan) " " quotation mark (tanda petik) ­ soft hyphen (tanda sambung) Anda tidak harus menggunakannya setiap saat, hanya kalau dengan menuliskan karakter aslinya browser menjadi bingung. Bagaimana anda tahu kalau itu terjadi? Tidak ada 'aturan' pasti yang bisa saya kemukakan. Hal itu akan anda ketahui dengan sedikit latihan dan beberapa kali kesalahan. Sebagian orang beranggapan bahwa membuat kesalahan itu jelek. Mereka tidak berani mencoba sesuatu yang baru karena takut akan mengacaukan semuanya. Melakukan kesalahan yang sama berulang-ulang memang sedikit bodoh. Tetapi, khususnya pada saat anda belajar, jangan takut untuk mengacaukan hasil kerja anda. Kesalahan adalah teman kita :-) Jika anda tidak pernah mengacaukan sesuatu berarti anda tidak belajar apapun dan kemungkinan tidak melakukan apapun. Ingat, mengacaukan hasil kerja adalah bagian yang sah dan sangat bisa diterima dari proses belajar! Hosting dan Domain Website Pengantar Setelah anda selesai membuat sebuah website atau sistem berbasis web, lalu anda ingin menguploadnya ke internet agar dapat diakses secara online oelh setiap orang, maka anda memerlukan tempat hosting dan nama domain sebagai pengenal website anda. Web Hosting Perusahaan Web Hosting adalah penyedia/provider yang menyewakan tempat(space) dengan kapasitas tertentu dan harga tertentu, untuk menyimpan semua file website anda, agar bisa diakses online. Biasanya ada yang memberlakukan sistem sewa per 3 bulan, 6 bulan atau per tahun. Umumnya perusahaan web hosting sekaligus menjual domain, bahkan ada yang membuat paket tertentu antara hosting dan domainnya. Misalkan untuk paket hosting enterprise, maka domainnya diberikan gratis untuk tahun pertama. Namun ada juga perusahaan yang menjual terpisah antara hosting dan domainnya. Misalkan, hosting di provider A, tapi domainnya beli dari provider B. Selain yang bayar, anda pun bisa memanfaatkan fasilitas web hosting gratis untuk proses belajar. Misalnya : myjspace.com. Untuk mencari web yang memberikan layanan hosting gratis, maka anda bisa mencarinya di google dengan keyword “Free web hosting”. Contoh perusahaan web hosting di Jogja : - Rumahweb.com - Idwebhost.com - Citra.net, dll Software untuk Upload File Website Ada beberapa software yang dapat anda gunakan untuk proses upload file ke internet, diantaranya : FileZilla(bawaan Xampp) CuteFTP SecureFX, dll Domain Domain adalah nama pengenal/alamat website anda di internet. Penamaan domain diatur oleh sebuah organisasi yaitu Internet Corporation for Assigned Names and Numbers(ICANN). Dalam penamaan domain ada yang disebut Top Level Domain(TLD) yaitu format penamaan domain dengan posisi paling tinggi misalnya .com. Ada 3 jenis TLD , yaitu: - Generic TLD(gTLD), terdiri dari 3 huruf atau lebih - Country-code TLD(ccTLD), terdiri dari 2 huruf dan merupakan domain yang mengindikasikan nama negara - TLD Arpha, yang digunakan khusus untuk tujuan pengelolaan infrastruktur teknik dalam jaringan internet. Generic TLD(gTLD) TLD Tahun Dibuat Penggunaan Domain .com 1995 Tidak ada batasan, umumnya dipakai untuk tujuan komersial .edu 1995 Digunakan untuk istitusi edukasi oleh negara Amerika Serikat .gov 1995 Digunakan untuk domain pemerintah Amerika Serikat .mil 1995 Digunakan untuk militer Amerika Serikat .net 1995 Tidak ada batasan, namun umumnya digunakan untuk provider jaringan, penyedia jasa layanan internet, dll .org 1995 Tidak ada batasan, tapi umumnya digunakan untuk organisasiorganisasi .int 1998 Digunakan untuk organisasi yang sifatnya internarsional .aero 2001 Digunakan untuk perusahaan transportasi udara .biz 2001 Digunakan untuk tujuan bisnis .coop 2001 Digunakan untuk domain badan-badan koperasi .info 2001 Tidak ada batasan penggunaan .museum 2001 Digunakan untuk domain Museum .name 2001 Digunakan untuk nama individu .pro 2002 Digunakan untuk kalangan profesional, seperti akuntan, lawyer, dll Country-code TLD(ccTLD) Daftar diantara kode domain negara No TLD 1 .ae 2 Negara/Wilayah Teritorial No TLD Negara/Wilayah Teritorial United Arab Emirates 15 .id Indonesia .af Afghanistan 16 .in India 3 .ar Argentina 17 .ir Iran 4 .au Australia 18 .jp Japan 5 .bn Brunei Darussalam 19 .kr Korea, Republic of 6 .br Brazil 20 .mm Myanmar 7 .ca Canada 21 .my Malaysia 8 .cn China 22 .pk Pakistan 9 .co Colombia 23 .sg Singapore 10 .de Germany 24 .th Thailand 11 .dk Denmark 25 .tw Taiwan 12 .eg Egypt 26 .us United States 13 .fr France 27 .vn Vietnam 14 .hk Hongkong 28 .ye Yaman Domain Indonesia Beberapa domain yang khusus digunakan di Indonesia No Nama Penggunaan 1 .go Departemen Pemerintah/PEMDA 2 .ac Perguruan Tinggi 3 .co Perusahaan/Company 4 .sch Sekolah 5 .tv Perusahaan Televisi Contoh : http://deplu.go.id, http://tasikmalaya.go.id http://uty.ac.id, http://ugm.ac.id http://kompas.co.id http://an.tv, dll Domain Gratis Sebagaimana hosting gratis, maka domain pun ada yang memberikannya secara gratis. Misalnya freedomain.co.nr. Dia memberikan domain gratis dengan akhiran .co.nr. Contoh http://euismarlina.co.nr.
