MODUL PEMROGRAMAN WEB - Heri Priyono P.
MODULPEMROGRAMAN WEBMATERI DASAR HTMLSMK MEDIA INFORMATIKAJl. Kostrad Raya No. 2 Petukangan Utara Pesanggrahan Jakarta 12260Telp: 021-5865251
DAFTAR ISIDAFTAR ISI .2STANDAR KOMPETENSI LULUSAN (SKL) KOMPETENSI INTI (KI) KOMPETENSI DASAR (KD) .3BAB I PENDAHULUAN.41.1Sejarah Internet .41.2Istilah-istilah Internet .41.3Nama Domain.51.4Teknologi web .61.5Kebutuhan pemrograman web .71.5.1Perangkat keras .71.5.2Perangkat lunak .7BAB II HTML .82.1Pengertian HTML .82.1.1Pengertian Tag pada HTML .82.1.2Pengertian Elemen pada HTML .92.1.3Pengertian Atribut pada HTML .92.2Membuat struktur dasar HTML . 102.3Elemen-elemen dasar HTML untuk memformat halaman web . 132.3.1Elemen HEAD . 132.3.2Elemen BODY . 152.3.3Komentar . 162.3.4Memberi Identitas . 162.3.5Memformat Dokumen HTML . 172.3.6Memformat Karakter . 202.3.7Menambah Gambar . 232.3.8Menggunakan Link . 242.3.9Menggunakan Table . 262.3.10Menggunakan Frame. 332.3.11Menggunakan Form . 38Sunarya ApPEMROGRAMAN WEB SMK MEDIA INFORMATIKA2
STANDAR KOMPETENSI LULUSAN (SKL)KOMPETENSI INTI (KI)KOMPETENSI DASAR (KD)NAMA SEKOLAHBIDANG STUDI KEAHLIANPROGRAM STUDI KEAHLIANPAKET KEAHLIAN::::SMK MEDIA INFORMATIKATEKNOLOGI INFORMASI DAN KOMUNIKASITEKNIK KOMPUTER DAN INFORMATIKA- MULTIMEDIA- TEKNIK KOMPUTER DAN JARINGAN- REKAYASA PERANGKAT LUNAK: PEMROGRAMAN WEBMATA PELAJARANKI 1K2(SIKAP RELEGIUS) (SIKAP SOSIAL) Sunarya ApK3(KETERAMPILAN)Menerapkan elemen-elemendasar HTML untuk memformathalaman webMenerapkan elemen HTMLtable untuk layout halamanwebMenerapkan elemen HTMLframe untuk layout halamanwebMenerapkan elemen HTMLlayer untuk layout halaman webMenerapkan link untuk berbagaifungsi pada halaman webMenambahkan obyek-obyekmultimedia ke dalam halamanwebMenerapkan pemrogramanclient side dalam halaman webMerancang form untukmenangkap masukan data(input) dari penggunaMenerapkan pemrogramanclient side untuk validasimasukan dataMenerapkan pemrogramanserver side ke dalam halamanwebMenerapkan pemrogramanserver side untuk validasimasukan data K4(PENGETAHUAN)Menjelaskan konsep teknologiWeb pageMenjelaskan kebutuhan softwarepemrograman webMembuat struktur menu web(site map)Menjelaskan struktur dokumenHTMLMenjelaskan penggunaanpemrograman dalam halamanwebMenjelaskanpenggunaanpemrograman di sisiclient (client side) untukmenambah interaktifitas webMenjelaskan penggunaanpemrograman di sisiserver(server side) untukmengolah data input daripenggunaPEMROGRAMAN WEB SMK MEDIA INFORMATIKA3
BAB I PENDAHULUANDewasa ini dunia komputer dan informasi berkembang sangat pesat, terlebih lagidengan adanya Internet. Internet merupakan jaringan komputer global yang terbentuk darijaringan komputer di seluruh dunia yang memungkinkan orang yang terkoneksi bertukarinformasi, berkomunikasi, serta berbagi sumber daya komputer. Selain menyediakan mediamedia online di bidang-bidang pendidikan, ilmu pengetahuan dan teknologi, bisnis dansebagainya, dengan Internet orang dapat berkomunikasi dengan cepat dengan memanfaatkanantara lain fasilitas e-mail.Para produsen komputer, terutama mikroprosesor, berlomba-lomba untuk menemukankomputer yang canggih, dan umumnya komputer-komputer tersebut dikembangkan untukmemenuhi kebutuhan akan informasi, terutama informasi melalui Internet. Internet itu pulalahyang membuat dunia informasi berkembang dengan sangat pesat mencengangkan.Beberapa tahun yang lalu, informasi umumnya hanya diperoleh melalui media massa baikyang bersifat cetak, seperti surat kabar, buku, maupun elektronik, seperti televisi danradio. Media-media informasi tersebut memiliki beberapa kekurangan, antara lain hanya dapatmemberi informasi saja, tetapi tidak dapat “mencarikan” informasi yang kita butuhkan,juga memiliki keterbatasan waktu karena dibatasi oleh waktu terbit maupun waktu tayang.Dengan Internet, kita dapat mencari hampir semua informasi yang kita butuhkan dan tidakterbatas oleh waktu, karena internet “dibuka” 24 jam sehari. Modul ini akan memberikanpengetahuan dasar praktis tentang internet browsing, e-mail, dasar HTML, web design dan webprograming.1.1 Sejarah InternetMungkin agak sulit dipercaya bahwa cikal bakal Internet sesungguhnya diawali dariUnisovyet, ketika pada tahun 1957 mereka meluncurkan sebuah satelit bernama Sputnik.Peluncuran Sputnik ini dirasakan sebagai “ancaman” oleh musuh besar mereka, yaituAmerika Serikat. Presiden Dwight D. Eisenhower menyatakan perlunya membangunsebuah teknologi yang membuat AS tetap sebagai negara superior. Kemudian dibentuklahsebuah badan yang disebut Advanced Research Projects Agency (ARPA). ARPA bernaung dibawah Departemen Pertahanan Amerika Serikat atau Department of Defense (DoD).Pada tahun 1969, DoD memberi tugas kepada ARPA untuk membangun sebuahmata rantai komunikasi antara DoD dengan militer yang tidak dapat disabot oleh musuhmereka. Jaringan komunikasi yang diciptakan ini disebut ARPAnet. Pada awalnya, ARPAnethanya menghubungkan empat buah situs saja, yaitu : Stanford Research Institute (SRI)University of California at Santa Barbara (UCSB)University of California at Los Angeles (UCLA)University of UtahPada tahun 1970, penelitian yang dilakukan di Stanford University menghasilkan sebuahprotokol yang disebut TCP/IP. Protokol TCP/IP inilah yang berkembang terus hingga sekarangdan menjadi protokol standar dalam Internet.1.2 Istilah-istilah InternetWWWSunarya ApWorldWideWebmerupakansuatubentuklayanan Internet yangPEMROGRAMAN WEB SMK MEDIA INFORMATIKA4
ilSearch EngineMailing ListChatBlogmenggunakan konsep hypertext antar dokumen yang berkaitan, yang didalamnya terdapat halaman web (web page). Untuk mengakses wwwdigunakan protokol http (HyperText Transfer Protocol).TCP/IP singkatan dari Transfer Control Protocol/Internet Protocolmerupakan jenis protocol yang memungkinkan komputer berkomunikasidengan komputer lain melalui suatu jaringan yang di sebut dengan internet.URL (Uniform Resource Locator) digunakan sebagai penunjuk lokasi padainternet. URL dapat dimisalkan dengan alamat yang menunjuk pada suatulokasi.Tampilan awal (halaman utama) suatu website yang memuat informasisingkat tentang apa isi dari website tersebutSuatu alamat di dalam sebuah webSoftware yang digunakan untuk surfing atau browsing Internet, sepertiInternet Explorer, Opera, Netscape dllInternet Service Provider, penyedia jasa layanan Internet, sepertiIndosatnet, Wasantara, Meganet dllMenyalin/mengambil file atau objek dari Internet ke komputerMengirim file atau objek dari komputer ke InternetElectronic Mail, suatu layanan/fasilitas yang disediakan untuk saling berkirimsurat lewat internetMesin pencari, suatu layanan/fasilitas untuk melakukan pencarian diInternetSuatu forum/kelompok diskusi di Internet yang dapat saling bertukarInformasiSuatu fasilitas internet yang bisa berkomunikasi secara langsung (online)yang dapat mengobrol dengan cara saling kirim text, suara, gambar bahkanbisa bertatap muka seraca dengan menggunakan web camera (webcam)Blog merupakan singkatan dari web log adalah bentuk aplikasi web yangmenyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuahhalaman web umum.1.3 Nama DomainNama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasinama server komputer seperti web server atau email server di jaringan komputer ataupuninternet. Nama domain berfungsi untuk mempermudah pengguna di internet pada saatmelakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungitanpa harus mengenal deretan angka yang rumit yang dikenal sebagai alamat IP (192.168.1.1).Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperticontohnya "wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, ataualamat website. Daftar nama-nama domain di bawah ini;comnetcoorggov;goacedumilSunarya ApCommerce, komersialJaringan (Network)Company, perusahaanOrganization, organisasiGovernment, pemerintahAcademic, akademikEducation, pendidikanMilitary, militerPEMROGRAMAN WEB SMK MEDIA INFORMATIKA5
idusauitIndonesiaUnited State, AmerikaAustraliaItalia1.4 Teknologi webWeb berdasarkan teknologinya terbagi menjadi dua, yaitu Web Statis dan Web Dinamis.Sebelum menuju ke perbedaan web statis dan web dinamis, mari kita bahas persamaannyaterlebih dahulu. Persamaan web statis dan web dinamis yaitu sama-sama keduanya merupakansuatu website yang menampilkan halaman yang ditampilkan di internet yang memuat informasitertentu (khusus).1.4.1 Pengertian Web Statis dan Web DinamisWeb statis adalah website yang mana pengguna tidak bisa mengubah konten dariweb tersebut secara langsung menggunakan browser. Interaksi yang terjadi antarapengguna dan server hanyalah seputar pemrosesan link saja. Halaman-halaman webtersebut tidak memliki database, data dan informasi yang ada pada web statis tidakberubah-ubah kecuali diubah sintaksnya. Dokumen web yang dikirim kepada client akansama isinya dengan apa yang ada di web server.Contoh dari web statis adalah web yang berisi profil perusahaan. Di sana hanya adabeberapa halaman saja dan kontennya hampir tidak pernah berubah karena kontenlangsung diletakan dalam file HTML saja.Dalam web dinamis, interaksi yang terjadi antara pengguna dan server sangatkompleks. Seseorang bisa mengubah konten dari halaman tertentu dengan menggunakanbrowser. Request (permintaan) dari pengguna dapat diproses oleh server yang kemudianditampilkan dalam isi yang berbeda-beda menurut alur programnya. Halaman-halamanweb tersebut memiliki database. Web dinamis, memiliki data dan informasi yang berbedabeda tergantung input apa yang disampaikan client.Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di webserver.Contoh dari web dinamis adalah portal berita dan jejaring sosial. Lihat saja webtersebut, isinya sering diperbaharui (di-update) oleh pemilik atau penggunanya. Bahkanuntuk jejaring sosial sangat sering di-update setiap harinya.1.4.2 Perbedaan Web Statis dan Web Dinamis1. Interaksi antara pengunjung dan pemilik webDalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung denganpemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjungdengan pemilik web seperti memberikan komentar, transaksi online, forum, dll.2. Bahasa Script yang digunakanWeb statis hanya menggunakan HTML saja, atau paling tidak bisa ditambah denganCSS. Sedangkan web dinamis menggunakan bahasa pemrograman web yang lebihkompleks seperti PHP, ASP dan JavaScript.3. Penggunaan DatabaseSunarya ApPEMROGRAMAN WEB SMK MEDIA INFORMATIKA6
Web statis tidak menggunakan database karena tidak ada data yang perlu disimpandan diproses. Sedangkan web dinamis menggunakan database seperti MySQL, Oracle,dll untuk menyimpan dan memroses data.4. KontenKonten dalam web statis hanya diberikan oleh pemilik web dan jarang di-update,sementara konten dalam web dinamis bisa berasal dari pengunjung dan lebih seringdi-update. Konten dalam web dinamis bisa diambil dari database sehingga isinya punbisa berbeda-beda walaupun kita membuka web yang sama.1.5 Kebutuhan pemrograman webPembuatan halaman web membutuhkan persiapan tidak saja pengetahuan tentangbagaimana disain halaman web, namun juga perlu dukungan persiapan perangkat keras,perangkat lunak, dan yang lainnya.1.5.1 Perangkat kerasPerangkat keras yang dibutuhkan untuk pembuatan halaman web tidak berbedajauh dengan kebutuhan komputasi biasa. Seperangkat komputer lengkap dengan CPU,monitor, keyboard, mouse, printer dan beberapa perangkat tambahan lain sudah dapatdigunakan untuk membuat halaman web. spesifikasi tergantung dari perangkat lunak yangakan diinstal pada perangkat komputer tersebut. Jika kita menginstal web server,pengolah gambar untuk disain halaman web, HTML editor yang komplet, tentu kitamembutuhkan spesifikasi yang lebih tinggi.1.5.2 Perangkat lunak1. Web/ HTML Editor adalah perangkat lunak yang digunakan untuk membuat halamanhalaman web, baik yang bersifat statis maupun dinamis. Di pasar perangkat lunak,saat ini tersedia banyak sekali jenis perangkat pengembang web, mulai dari yangsederhana sampai yang canggih dan kompleks. Namun sebenarnya untuk membuathalaman web baik statis maupun dinamis kita dapat menggunakan teks editor biasaseperti Notepad atau Vi. Hanya saja teks editor tidak menyediakan fasilitas-fasilitasyang memudahkan kita dalam membuat halaman web. Pada perangkat pengembangwebyang lebih kompleks seperti Adobe Dreamweaver (dulu MacromediaDreamweaver), Microsoft Visual Studio.Net, dan beberapa yang lainnya, kita akanmendapati fasilitas yang sangat membantu mempercepat pembuatan halaman web,antara lain: tampilan berbasis GUI, automatic code completion(melengkapi kodesecara otomatis), WYSIWYG (What You See Is What You Get) HTML Editor, koneksi kebasis data yang lebih mudah, dan banyak lagi fasilitas. Tentu saja perangkatpengembang ini berharga relative mahal. Pada bagian lain dari bab ini kalian akandiajak untuk mengenali sedikit beberapa perangkat lunak ini.Sunarya ApPEMROGRAMAN WEB SMK MEDIA INFORMATIKA7
BAB II HTML2.1 Pengertian HTMLHTML atau Hypertext Marksup Language merupakan salah satu format yang digunakandalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumenHTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yaknibahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur formattampilan suatu dokumen. Simbol markup yang digunakan oleh HTML ditandai dengan tandalebih kecil ( ) dan tanda lebih besar ( ).HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untukmentransfer data atau document yang berformat HTML dari web server ke browser (InternetExplorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Andamenjelajah internet dan melihat halaman web.Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa.Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yangdigunakan untuk membuat atau mendesain halaman web). Tetapi tanpa mengetahui dasardasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupunsoftware-software tersebut semakin menawarkan kemudahan dalam membuat halaman web,tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual.Terutama untuk halaman web yang sangat komplek.Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web.Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad,MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelahanda memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuathalaman web dengan menggunakan web tool.2.1.1 Pengertian Tag pada HTMLSebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu webbrowser bagaimana suatu text ditampilkan. Apakah text itu ditulis sebagai sebuahparagraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. Hampirsemua tag dalam HTML ditulis secara berpasangan, tag pembuka dan tag penutup,dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup.Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antaradua kurung siku.Format penulisan tag: tag pembuka objek yang dikenai perintahtag /tag penutup Contohnya jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal ataumiring, dalam HTML dapat ditulis sebagai berikut:Ini adalah sebuah paragraf. i Hanya kumpulan beberapa kalimat /i .Paragraf ini terdiri dari b 3 kalimat /b .Hasil dari sebagian kode HTML diatas, diterjemahkan oleh browser menjadi:Ini adalah sebuah paragraf. Hanya kumpulan beberapa kalimat.Sunarya ApPEMROGRAMAN WEB SMK MEDIA INFORMATIKA8
Paragraf ini terdiri dari 3 kalimat.Tag i pada kode HTML diatas memberikan perintah kepada browser untukmenampilkan text secara garis miring (i, singkatan dari italic), dan tag b untukmenebalkan tulisan (b, singkatan dari bold).Contoh tag: p Ini adalah sebuah paragraf /p p adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraph /p adalahtag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda backslash(/)Jika kita lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini dantetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun hal inimemudahkan kita, namun tidak disarankan.*pengecualian beberapa tag tidak berpasangan, seperti br untuk break (pindahbaris) atau hr untuk horizontal line (garis horizontal) ditulis dengan br / , dan hr / . Tag ini dikenal juga dengan sebutan self closing tag.HTML tidak case-sensitif, dalam artian p sama dengan P . Pada awal kemunculanHTML, programmer menggunakan huruf besar untuk seluruh tag, agar membedakandengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan hurufkecil untuk semua tag. Oleh karena itu disarankan menggunakan huruf kecil dalampenulisan tag.2.1.2 Pengertian Elemen pada HTMLElemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.Seperti contoh diatas, “Ini adalah sebuah paragraf” adalah element dari tag p .Elemen tidak hanya berisi text, namun juga bisa tag lain.Contoh elemen: p Ini adalah sebuah em paragraf /em /p Dari contoh diatas, Ini adalah sebuah em paragraf /em merupakan elemen dari tag p .2.1.3 Pengertian Atribut pada HTMLAtribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisaberupa instruksi untuk warna dari text, besar huruf dari text, d
Mesin pencari, suatu layanan/fasilitas untuk melakukan pencarian di Internet Mailing List Suatu forum/kelompok diskusi di Internet yang dapat saling bertukar Informasi Chat Suatu fasilitas internet yang bisa berkomunikasi secara langsung (online) yang dapat mengobrol dengan cara saling kirim text, suara, gambar bahkan
HERI Faculty Survey HERI Sponsored by the Higher Education Research Institute Dear Faculty Member: Welcome to the HERI Faculty Survey. This project is sponsored by the Higher Education Research Institute at UCLA, a national organization that has conducted research on the college faculty experience since 1989.
E. Dasar Hukum F. Materi Pokok dan Sub Materi MATERI POKOK 1 KARAKTERISTIK MODUL A. Self Instructional B. Self Contain C. Stand Alone D. Adaptive E. User Friendly MATERI POKOK 2 PENGEMBANGAN MODUL DAN MUTUNYA A. Pengembangan Modul B. Mutu Modul MATERI POKOK 3 PROSEDUR PENYUSUNAN MODUL A. Analisa Kebutuhan Modul B. Penyusunan Modul PENUTUP A .
9. Modul OC IV (Organische Stoffklassen und Synthesen) 13 10. Modul PC I (Allgemeine Chemie) 14 11. Modul PC II (Physikalische Chemie II) 15 12. Modul PC III (Physikalische Chemie III) 16 13. Modul PC IV (Physikalische Chemie IV) 17 14. Modul MC (Makromolekulare Chemie) 18 15. Modul BC (Biochemie und Zellbiologie) 19 16. Modul Physik 20 17.
instruksi ke mesin, khususnya komputer. Bahasa pemrograman dapat digunakan untuk membuat program untuk mengontrol perilaku mesin atau untuk mengekspresikan algoritme. " Bahasa pemrograman adalah notasi untuk menulis program, yang merupakan spesifikasi dari suatu komputasi atau algoritma. (Aaby, Anthony (2001). Pengantar Bahasa Pemrograman)?
chozi la heri 27) Suala la ufisadi limeshughulikiwa katika Chozi la heri kwa njia mbalijnbali. Fafanua njia hizo 28) Fafanua matumizi ya mbinu ya Sadfa katika chozi la heri 29) Hotuba ni kipengele cha kimundo. Eleza j
2011 HERI Faculty Survey What is the HERI Faculty Survey? The Higher Education Research Institute (HERI) at UCLA administers a faculty survey to institutions nationwide once every three year. The national comparison group includes collective results from UCLA of all public 4-year colleges and universities participating in the survey.
Lampiran 3 : FORMAT COVER LAPORAN RESMI SETIAP MODUL PRAKTIKUM KONSEP PEMROGRAMAN KOMPUTER MODUL IV JUDUL MODUL Times New Roman 14 bold Oleh KELOMPOK XX Richard Stallman (0104405065) Budi Anduk (0104405080) Tora Sudiro (0104405078) Dian Sastro (0104405062) Asisten : Nama Asisten LABO
Provide laminates for the bearings that comply with ASTM A 36, AASHTO M 270 (ASTM A 709) Grade 36, ASTM A 1011 SS Grade 36 or A 1008 SS Grade 40, unless otherwise specified in the Contract Documents. d. PTFE/Elastomeric Sliding Bearings. Provide an elastomeric portion satisfying subsection 1701.2(c).
