Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

PEMROGRAMAN BERBASIS WEB Bab I Cara kerja WEB Cara kerja dari WEB bisa dilihat dari fungsinya.yaitu sebagai berikut: Web browser Fungsi dari web browser.

Presentasi serupa


Presentasi berjudul: "PEMROGRAMAN BERBASIS WEB Bab I Cara kerja WEB Cara kerja dari WEB bisa dilihat dari fungsinya.yaitu sebagai berikut: Web browser Fungsi dari web browser."— Transcript presentasi:

1 PEMROGRAMAN BERBASIS WEB Bab I Cara kerja WEB Cara kerja dari WEB bisa dilihat dari fungsinya.yaitu sebagai berikut: Web browser Fungsi dari web browser adalah menerjemahkan kode (script) HTML yang biasanya ditambahkan JavaScript menjadi sebuah informasi yang sudah tertata dan menarik secara visual. Contoh web browser :internet explorer, opera, google chrome,Mozilla Firefox dll Web server Adalah aplikasi yang berguna untuk menrima permintaan informasi dari pengguna melalui web browser dan mengirimkan kembali infromasi yang diminta melalui HTTP (Hiper Text Transfr Protocol). Contoh : apache

2 Gambar 1.1: Diagram kerja WEB

3 Keterangan gambar 1.1: Untuk menjalankan WEB dari sebuah server cukup dengan memanggil alamat web tersebut.Lalu browser akan memunculkan halaman web yang dimaksud sesuai dengan alamat yang diberikan. Untuk menjalankan WEB dari sebuah server cukup dengan memanggil alamat web tersebut.Lalu browser akan memunculkan halaman web yang dimaksud sesuai dengan alamat yang diberikan. Proses yg terjadi : Proses yg terjadi : 1. web browser (client) meminta kepada web server 1. web browser (client) meminta kepada web server 2. web server akan membaca file index (misal : index.html, index.php dll) 2. web server akan membaca file index (misal : index.html, index.php dll) 3. file index tersebut diterjemahkan oleh mesin penerjemah (misal PHP) 3. file index tersebut diterjemahkan oleh mesin penerjemah (misal PHP) 4. mesin penerjemah mengirimkan kembali hasil terjemahan ke web browser 4. mesin penerjemah mengirimkan kembali hasil terjemahan ke web browser 5. web browser akan menerjemahkan kode HTML menjadi Halaman WEB 5. web browser akan menerjemahkan kode HTML menjadi Halaman WEB

4 BAB II Mengenal HTML HTML (Hyper Text Markup Language) adalah suatu bahasa pemrograman yg dikenali oleh web browser untuk menampilkan informasi dengan lebih baik menarik dibandingkan dengan tulisan teks biasa (plain text). A. Dari Cara Pemrosesan HTML dibagi menjadi 2 yaitu : HTML Statis Prosesnya yaitu script HTML dikirimkan ke client dan dijalankan pada client tanpa ada pengolahan data. Kelemahan : Hasil Tampilan Kurang Bagus Kelebihan : Tidak perlu server untuk pengolahan datanya.

5 HTML Dinamis HTML Dinamis Prosesnya yaitu script Pemrograman dijalankan di server kemudian hasil pengolahan data dirimkan ke client yang berupa script HTML yang dibuat secara “on the fly creation” oleh server untuk dijalankan pada client. Prosesnya yaitu script Pemrograman dijalankan di server kemudian hasil pengolahan data dirimkan ke client yang berupa script HTML yang dibuat secara “on the fly creation” oleh server untuk dijalankan pada client. Kelebihan : Halaman web menjadi lebih interaktif dan real time Kelebihan : Halaman web menjadi lebih interaktif dan real time Kekurangan : bila banyak permintaan yg masuk ke server maka akan terjadi overload.karena setiap permintaan akan menjalankan sendiri-sendiri program CGI (Common Gateway Interface). Kekurangan : bila banyak permintaan yg masuk ke server maka akan terjadi overload.karena setiap permintaan akan menjalankan sendiri-sendiri program CGI (Common Gateway Interface). Catatan: CGI merupakan standar interface antara server dan suatu aplikasi Catatan: CGI merupakan standar interface antara server dan suatu aplikasi Sedangkan program CGI adalah program yang dapat melakukan proses sesuai permintaan server untuk menghasilkan suatu dokumen yang hasil dokumen tersebut dalam bentuk HTML (on the fly creation) Sedangkan program CGI adalah program yang dapat melakukan proses sesuai permintaan server untuk menghasilkan suatu dokumen yang hasil dokumen tersebut dalam bentuk HTML (on the fly creation)

6 B. Tag Yang sering digunakan 1. Tag 1. Tag Digunakan untuk menandai sebuah komentar suatu kode (script) dengan tanda ini maka browser tidak akan menerjemahkan. Contoh : coba nulis coba nulis Hasil tampilan di browser : coba nulis

7 2. Tag 2. Tag Singkatan dari anchor, tag ini digunakan untuk membuat sebuah tautan (link) antar web. Singkatan dari anchor, tag ini digunakan untuk membuat sebuah tautan (link) antar web. Contoh : Contoh : ”Link ke yahoo ”Link ke yahoo Hasil tampilan di browser : Hasil tampilan di browser : Link ke yahoo Link ke yahoo

8 3. Tag 3. Tag Digunakan untuk teks cetak tebal Digunakan untuk teks cetak tebal Contoh : Contoh : teks ini dicetak tebal teks ini dicetak tebal Hasil tampilan di browser : Hasil tampilan di browser : teks ini dicetak tebal teks ini dicetak tebal

9 4. Tag 4. Tag Digunakan untuk membuat sebuah tulisan agar nampak lebih besar. Hal ini berbeda dengan cetak tebal (bold).Perhatikan kode tersebur. Digunakan untuk membuat sebuah tulisan agar nampak lebih besar. Hal ini berbeda dengan cetak tebal (bold).Perhatikan kode tersebur. Contoh: Contoh: test menggunakan tag b dan big test menggunakan tag b dan big ini menggunakan bold ini menggunakan bold ini menggunakan big ini menggunakan big

10 Hasil tampilan di browser : Ini menggunakan bold Ini menggunakan big

11 5. Tag 5. Tag Merupakan bagian dari struktur html yang digunakan untuk menandai badan (body) suatu dokumen HTML. Merupakan bagian dari struktur html yang digunakan untuk menandai badan (body) suatu dokumen HTML. penggunaannya dapat dilihat pada rangkaian contoh diatas. penggunaannya dapat dilihat pada rangkaian contoh diatas.

12 6. Tag 6. Tag Digunakan untuk mengakhiri suatu baris tulisan, lalu pindah ke baris berikutnya atau dibawahnya. Digunakan untuk mengakhiri suatu baris tulisan, lalu pindah ke baris berikutnya atau dibawahnya. Contoh : Contoh : ini menggunakan bold ini menggunakan bold ini menggunakan big ini menggunakan big Hasil tampilan di browser : Hasil tampilan di browser : Ini menggunakan bold Ini menggunakan big Ini menggunakan bold Ini menggunakan big Bandingkan dengan beerikut : Bandingkan dengan beerikut : ini menggunakan bold ini menggunakan bold ini menggunakan big ini menggunakan big Hasil tampilan di browser : Hasil tampilan di browser : Ini menggunakan bold Ini menggunakan bold Ini menggunakan big Ini menggunakan big

13 7. Tag 7. Tag Digunakan untuk membuat tombol di web browser. Digunakan untuk membuat tombol di web browser. Contoh : Contoh : klik di tombol ini klik di tombol ini Hasil tampilan di browser : Hasil tampilan di browser : klik di tombol ini klik di tombol ini

14 8. Tag 8. Tag Digunakan untuk membuat judul sebuah tabel. Penggunaan tag ini biasanya bersamaan dengan deklarasi tabel. Digunakan untuk membuat judul sebuah tabel. Penggunaan tag ini biasanya bersamaan dengan deklarasi tabel. Contoh : Contoh : judul Table judul Table bulan bulan saldo saldo January January Rp ,- Rp ,- Pebruary Pebruary Rp ,- Rp ,-

15 9. Tag 9. Tag Digunakan untuk menengahkan suatu teks halaman Digunakan untuk menengahkan suatu teks halaman

16 11. Tag 11. Tag Digunakan untuk memformat bentuk font, warna, ukuran dari sebuah teks.(tersedia font size : 1 s/d 7) Digunakan untuk memformat bentuk font, warna, ukuran dari sebuah teks.(tersedia font size : 1 s/d 7) Contoh : Contoh : tulisan warna merah dengan ukuran 3 tulisan warna merah dengan ukuran 3 tulisan warna hijau dengan ukuran 7 tulisan warna hijau dengan ukuran 7 tulisan warna biru dengan jenis font stencil tulisan warna biru dengan jenis font stencil Hasil tampilan di browser : Hasil tampilan di browser : Tulisan warna merah dengan ukuran 3 Tulisan warna merah dengan ukuran 3 Tulisan warna hijau dengan ukuran 7 Tulisan warna hijau dengan ukuran 7 Tulisan warna biru dengan font stencil Tulisan warna biru dengan font stencil

17 12. Tag 12. Tag Adalah Tag yang digunakan oleh pengguna untuk memasukkan data.Tag ini biasanya dibantu oleh beberapa komponen lain, seperti : input, button, option dll Adalah Tag yang digunakan oleh pengguna untuk memasukkan data.Tag ini biasanya dibantu oleh beberapa komponen lain, seperti : input, button, option dll Contoh : Contoh : Nama Anda: Nama Anda: Alamat: Alamat: Hasil tampilan di browser : Hasil tampilan di browser : Nama Anda : Nama Anda : Alamat: Alamat: Simpan Simpan

18 13. Tag dan 13. Tag dan Tag Digunakan untuk menampilkan halaman web lain dalam sebuah halaman web yang dibuat.Halaman dapat dibuat terpisah dengan menampilkan halaman web yang berbeda-beda. Tag Digunakan untuk menampilkan halaman web lain dalam sebuah halaman web yang dibuat.Halaman dapat dibuat terpisah dengan menampilkan halaman web yang berbeda-beda. Contoh : Contoh :

19 14. Tag 14. Tag Tag Digunakan untuk menampung elemen-elemen header dari sebuah halaman. Tag Digunakan untuk menampung elemen-elemen header dari sebuah halaman. contoh: contoh: test menggunakan tag b dan big test menggunakan tag b dan big ini menggunakan bold ini menggunakan bold ini menggunakan big ini menggunakan big

20 15. Tag sampai dengan 15. Tag sampai dengan Digunakan untuk mendifinisikan tulisan di header. Digunakan untuk mendifinisikan tulisan di header. Contoh : Contoh : Text Style using Heading Text Style using Heading MENGGUNAKAN HEADING 1 MENGGUNAKAN HEADING 1 MENGGUNAKAN HEADING 2 MENGGUNAKAN HEADING 2 MENGGUNAKAN HEADING 3 MENGGUNAKAN HEADING 3 MENGGUNAKAN HEADING 4 RIGHT MENGGUNAKAN HEADING 4 RIGHT MENGGUNAKAN HEADING 5 MENGGUNAKAN HEADING 5 MENGGUNAKAN HEADING 6 dan CENTER MENGGUNAKAN HEADING 6 dan CENTER

21 16. Tag 16. Tag Digunakan untuk membuat garis horisontal Digunakan untuk membuat garis horisontal Contoh : Contoh : diatas garis diatas garis dibawah garis dibawah garis

22 17. Tag 17. Tag Digunakan untuk memberitahu browser kode yg dituliskan merupakan dokumen html. Digunakan untuk memberitahu browser kode yg dituliskan merupakan dokumen html. Contoh : Contoh : contoh dokumen HTML contoh dokumen HTML MENGGUNAKAN HEADING 4 RIGHT MENGGUNAKAN HEADING 4 RIGHT

23 18. Tag 18. Tag Digunakan untuk membuat cetak miring Digunakan untuk membuat cetak miring Contoh : Contoh : huruf miring huruf miring Hasil : Hasil : huruf miring huruf miring

24 19. Tag 19. Tag Digunakan untuk menampilkan gambar dari server Digunakan untuk menampilkan gambar dari server Contoh : Contoh :

25 20. tag 20. tag Digunakan untuk berinteraksi dengan pengguna dalam memasukkan data ke server. Digunakan untuk berinteraksi dengan pengguna dalam memasukkan data ke server. input mempunyai banyak tipe, yaitu :button, checkbox, file, hidden, image, password, radio, reset, submit, dan text. input mempunyai banyak tipe, yaitu :button, checkbox, file, hidden, image, password, radio, reset, submit, dan text. Contoh : Contoh : Nama Anda: Nama Anda: Alamat: Alamat:

26 21.Tag 21.Tag Digunakan untuk menampilkan simbol data berurut, seperti simbol bullet dan nomor.untuk urutan bernomor diawali dengan tag, sedangkan simbol bullet diawali tag Digunakan untuk menampilkan simbol data berurut, seperti simbol bullet dan nomor.untuk urutan bernomor diawali dengan tag, sedangkan simbol bullet diawali tag Contoh: Contoh: satu satu dua dua tiga tiga gula gula garam garam susu susu

27 22. tag 22. tag Digunakan untuk mendifinisikan hubungan antara halaman web yang akan dibuat dengan data atau aturan dari luar. Tag ini biasanya digunakan pada saat web menggunakan file css. Digunakan untuk mendifinisikan hubungan antara halaman web yang akan dibuat dengan data atau aturan dari luar. Tag ini biasanya digunakan pada saat web menggunakan file css. Contoh : Contoh : href=”coba.css”/>

28 23.tag 23.tag Digunakan untuk urutan data bernomor atau numerik, juga alfabet. Digunakan untuk urutan data bernomor atau numerik, juga alfabet. Contoh : Contoh : satu satu dua dua tiga tiga

29 24.tag 24.tag Digunakan untuk mendifinisikan suatu elemen yg bisa dipilih dalam suatu daftar pilihan. Digunakan untuk mendifinisikan suatu elemen yg bisa dipilih dalam suatu daftar pilihan. Contoh : Contoh : jakarta jakarta bandung bandung semarang semarang Yogyakarta Yogyakarta

30 25. tag 25. tag Digunakan untuk mendifinisikan suatu paragraf. Digunakan untuk mendifinisikan suatu paragraf. diatas garis diatas garis diatas garis diatas garis


Download ppt "PEMROGRAMAN BERBASIS WEB Bab I Cara kerja WEB Cara kerja dari WEB bisa dilihat dari fungsinya.yaitu sebagai berikut: Web browser Fungsi dari web browser."

Presentasi serupa


Iklan oleh Google