1 / 86

Dasar - dasar Web dan HTML, css

Ir. Darmadi, MM Email : emailkuumum@yahoo.com HP 085715311155. Dasar - dasar Web dan HTML, css. Pengantar.

kalil
Download Presentation

Dasar - dasar Web dan HTML, css

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ir. Darmadi, MM Email : emailkuumum@yahoo.com HP 085715311155 Dasar - dasar Web dan HTML, css

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

  3. Request (URL) Response (Content) Model Pemrograman Web Request (URL) Response (Content)

  4. Dasar-dasarPemrogramanBerbasis Web Beberapakonsepdasarpemrogramanberbasis web , yaitu: • Komunikasiantaraweb browserdanweb serverberdasarkanprotokolHypertext Transfer Protocol (HTTP) . • Dokumendansemuasumberdayaapapun di jaringan yang dikehendakidiidentifikasidenganUniversal Resource Locator (URL). • Dokumen web ditulisberdasarkanstandarHypertext Markup Language (HTML) . • Pemrogramansisiklien(client-side scripting) dan Java applet. • Pemrogramansisiserver(server-side scripting/programming).

  5. PemrogramanSisiKlien(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)

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

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

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

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

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

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

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

  13. 1. TEXT HTML <html> <head> <title>Halaman Latihan 1</title> </head> <body> <h1>Ini adalah latihan pemrograman web pertamaku.</h1> </body> </html>

  14. Tampilan Web

  15. 2. Tabel HTML

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

  17. Contoh

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

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

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

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

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

  23. Cascading Style Sheet (CSS) Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking

  24. Dalam modul ini akan dipelajari: • Apa CSS • Text formating (color, size) • Pewarisan • Class • Positioning • Watermarking

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

  26. Contoh efek <U>..</U> menjadi pengatur warna Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan. Hasilnya sama dengan kode berikut :

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

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

  29. 2. CSS-GLOBAL :Sekali Tulis, pakai bersama File : global.css • 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> B {color: red; text-decoration: underline; font-family: Arial } I {color:blue; font-family:"Monotype Corsiva"; font-size:20} Digunakan oleh Css_global.html Dan Digunakan oleh Css_global2.html

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

  31. 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 tag HTML font, yaitu warna hijau Klik lihat hasil

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

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

  34. Contoh class (untuk ubah ukuran huruf) Klik lihat hasil Font-size : xx-small, x-small, small, medium, large, x-large, xx-large

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

  36. 5. Positioning Klik lihat hasil

  37. 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"); background-repeat: yes} • </STYLE> </HEAD> • CONTOH : klik ! Hasil klik

  38. Latihan • 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

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

  40. 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 hasilnya di browser. Klik tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di Notepad.

  41. Tuliskan tag FORM . • <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY> • <FORM> • </FORM> • </BODY> </HTML>

  42. Selanjutnya browser harusmempunyaicarauntukmengirim data yang didapatkepadakita. • Ada duahal yang dapatandalakukan: • 1) andadapatmengirim data tersebutkesuatu program/cgi • script untukdiproses, atau • 2) andadapatmeminta browser untukmengirim data • tersebutmelalui email kepadaanda. • Cara pertamamemerlukanpemahamantentangpemrograman web yang ada di luarcakupan tutorial ini • Cara kedua, biasadisebutmailto form, memerlukanbeberapahaluntukditambahkandalam tag <FORM>.

  43. CARA KEDUA • <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY> • <FORM METHOD=POST • ACTION="mailto:darmadi@yahoo.com" • ENCTYPE="application/x-www-form-urlencoded"> </FORM> • </BODY> </HTML> • Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar, tetapi harus ada spasi di antara setiap atribut tadi

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

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

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

  47. 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 BAIK">

  48. 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> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"><P>

  49. 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" VALUE="YA"> Baramuli<P> • Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli

  50. 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> • Siapakah di antara mereka yang merupakan sahabat anda? Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli

More Related