WEB DESAIN DAN PEMROGRAMAN WEB
NAMA
|
1.krisna ardiansah
2.fakhurorrozi
|
KOMPETASI
|
SKILL
|
KNOWLEDGE
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
KELAS
|
WEB DESAIN DAN PEMROGRAMAN WEB
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TANGGAL
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
JOB
|
1
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
KERJAKAN SOAL DIBAWAH INI DENGAN ,EMGGUNAKAN WIFI
1. Jelaskan perbedaan dari web statis dan dinamis dan sebutkan contohnya?
2. Jelaskan apa yg kalian ketahui tentang pemrograman web :
-HTML?
-CSS?
-PHP?
-JQUERY?
-Javascript?
-VBScript?
3. Buatlah tablel perbedaan antara pemrograman web yg bersifat client side dengan server side?
4. Jelaskan apa yg kalian ketahui tentang FTP?
5. Jika kalian ingin menggabungkan Desain & Pemrograman Web,Software apa yg kalian gunakan,jelaskan?
6. Jelaskan pengertian tentang Hosting dan domain?
7. Jelaskan yg dimaksud dengan web server dan jenis” web server?
8. Jelaskan yg dimaksud dengan web browser dan jenis” web browser?
9. Jelaskan yg dimaksud dengan web perograming dan macamnya?
10. Jelaskan apa yg dimaksud dengan HTML dan sebutkan macam” tag dalam penulisan HTML?
11. Tuliskan scipt HTML dan masukan suara/music kedalam file HTML?
12. Tuliskan script HTML untuk membuat hyperlink antar dokumen HTML?
JAWAB
1. 1. Web Statis
Web statis adalah website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja. Halaman-halaman web tersebut tidak memliki database, data dan informasi yang ada pada web statis tidak berubah-ubah kecuali diubah sintaksnya. Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server.
Contoh dari web statis :
1. http://www.balitechy.com/website-statis.html
2. http://www.visimaster.com/pelatihan-web-pelatihan-web-statis-dreamweaver.php 3. http://gufron.com/berita-4-website-statis.html 4. http://lendraandrian.com/jasablog/ 5. http://www.find-pdf.com/cari-contoh+web+statis.html 6. http://www.spreadfirefox.com/node/4095 7. http://indografika.net/service/web-design 8. http://www.baliorange.web.id/pengertian-website-webhosting-domainname/ 9. http://ihsanulmuslim.web.id/islam/news.php?readmore=3 10. http://www.pdfqueen.com/pdf/co/contoh-pembuatan-company-profil/4/ 11. http://www.dotsentral.com/article/1/pengertian-website 12. http://arisnurwandana.110mb.com/faq.php 13. http://www.fataranet.com/services.php 14. http://www.bisnisbestseller.com/testimoni.php 15. http://www.pdfexplore.com/book/contoh-web-flash-pdf.html 16. http://www.preweddingweb.com/product.php 17. http://www.rachimuddin.com/search/contoh+proposal+harga+desain+website 18. http://www.blogtopsites.com/sitedetails_11634.html 19. http://www.waroengbetawi.com/apa-perbedaan-website-dengan-blog/ 20. http://www.leoniko.or.id/id/news-detail/43/mengenal-lebih-dekat-website 2. Web Dinamis
Dalam web dinamis, interaksi yang terjadi antara pengguna dan server sangat kompleks. Seseorang bisa mengubah konten dari halaman tertentu dengan menggunakan browser.Request (permintaan) dari pengguna dapat diproses oleh server yang kemudian ditampilkan dalam isi yang berbeda-beda menurut alur programnya. Halaman-halaman web tersebut memiliki database. Web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa yang disampaikan client. Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server.
Contoh dari web dinamis :
1. http://rudyantoarief.com/wp/?tag=web-dinamis
2. http://pizangdesain.com/?q=node/8 3. http://www.beritanet.com /search.php?text=contoh%20web%20dinamis%20dengan%20dreamweaver%20tentang%20artikel%20online 4. http://www.abelputra.com/webdesign_det.php?soft=2 5. http://www.kuliah-informatika.com/2009/09/membuat-website-dinamis-dengan-html-dan.html 6. http://www.iklanbarispro.com/iklan/belajar-buat-web-dinamis-tanpa-kode-rumit-free-software.html 7. http://www.nesmd.com/shtml/15616.shtml 8. http://www.id-joomla.com/forum?func=view&id=98519&catid=16&start=50 9. http://www.aspondmx.com/ 10. http://www.cah-mbudur.co.cc/2009/08/pengantar-web-dinamis.html 11. http://www.docstoc.com/docs/9696828/Modul-Dreamweaver-MX 12. http://www.1iklanbaris.com/iklan/buat-website-dinamis-dan-ekonomis.html 13. http://www.jendelailmu.com/daftar-buku/pid-2628/dasar-pemrograman-web-dinamis-dengan-jsp.html 14. http://www.wordsjunction.com/words/contoh%22dinamis 15. http://www.planta-gmbh.de/contoh+soal+fisika+listrik+dinamis.html 16. http://www.kursusprivat.com/gallery.php 17. http://student.eepis-its.edu/~qishosh/ 18. http://www.jogjashop.com/penawaran.html 19. http://www.internet-marketing.global-article.ws/id/seo-dynamic-websites.html 20. http://www.websitejoomla.co.cc/
2. -HTML = Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
-CSS = CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
-PHP = PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.
-Jquery = jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT.
-Javascript = adalah bahasa pemrograman tingkat tinggi dan dinamis.[4] JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.[5]
-VBScrupt = VBScript atau lengkapnya Visual Basic Scripting Edition adalah sebuah bahasa skrip yang diinterpretasikan saat dieksekusi yang dikembangkan oleh Microsoft Corporation pada tahun 1996 yang seringnya digunakan dalam penjelajah web Internet Explorer (dapat digunakan mulai versi Internet Explorer 3.0). VBScript merupakan sebuah bahasa skrip turunan dari bahasa pemrograman Visual Basic for Applications (VBA) yang digunakan di dalam Microsoft Office dan beberapa platform pengembangan buatan Microsoft lainnya.
3.
4. Pengertian FTP
File Transfer Protocol (FTP) adalah suatu protokol yang berfungsi untuk tukar-menukar file dalam suatu network yang menggunakan TCP koneksi bukan UDP. Dua hal yang penting dalam FTP adalah FTP Server dan FTP Client. FTP server adalah suatu server yang menjalankan software yang berfungsi untuk memberikan layanan tukar menukar file dimana server tersebut selalu siap memberikan layanan FTP apabila mendapat permintaan (request) dari FTP client.
5. Photoshop,karena di photosop cukup mudah menggabungkan desain
6.- Pengertian Domain
Domain adalah nama pengganti dari ip address yang akan menuju pada server tertentu dan biasanya diwakili oleh adanya website.
Contoh nama domain : www.pusathosting.com
-Pengertian Hosting
Hosting adalah tempat untuk menyimpan data digital yaitu termasuk text, gambar, atau video yang nantinya kesemua informasi tersebut akan di tampilkan dalam bentuk website.
7. 1. Apache
Apache merupakan salah satu jenis web server yang paling banyak digunakan di internet. Awalnya, apache didesain untuk sistem operasi UNIX. Apache sendiri memiliki beberapa macam dukungan seperti kontrol akses, PHP, dan SSL. Kontrol akses apache dijalankan bergantung dari nomor IP CGI (Common Gateway Interface) atau nama host. Apache menempatkan kontrol akses sebagai modul, dan yang paling terkenal adalah modul Perl (Practical Extraction and Report Language). Sementara itu, PHP (Personal Home Page) merupakan sebuah program yang menyerupai CGI, untuk memproses teks dan bekerja pada web server.
PHP pada apache web server ditempatkan sebagai salah satu modulnya (mod_php) untuk membuat kinerja PHP lebih baik dan stabil. Apache sendiri termasuk dalam kategori freeware, dengan proses instalasi yang relatif mudah, dapat beroperasi pada berbagai variasi sistem operasi, mudah pengaturan konfigurasinya hanya dengan empat file konfigurasi, dan juga mudah menambahkan peripheral lain ke dalam platform web servernya.
2. Nginx
Nginx (dibaca engine x) merupakan salah satu web server open source selain apache. Walaupun sebetulnya apache sudah begitu populer, terdapat satu kekurangannya, yaitu tak dapat menangani kebutuhan web server dengan traffic yang tinggi. Nginx kemudian tercipta untuk menjadi sebuah solusi yang lebih mengedepankan performa, kemudahan, dan kecepatan. Nginx sendiri memiliki beberapa kelebihan, di antaranya :
1. Arsitektur Event-Based. Berbeda dengan Apache yang menggunakan process based, nginx menggunakan arsitektur event-based sehingga mampu meminimilkan thread untuk memproses sebuah permintaan dari klien, yang artinya memori yang terpakai juga menjadi lebih kecil. Server ringan dan sangat responsif.
2. Performa Luar Biasa. Semakin banyak thread digunakan, maka semakin banyak memori yang diperlukan. Dalam hal ini, nginx telah didesain untuk menangani hingga sepuluh juta permintaan klien tiap harinya, atau beberapa ratus permintaan per detik.
3. Fitur Mantap. Jika apache seperti toko serba ada yang menyediakan produk dengan lengkap, nginx hanya menyediakan fitur-fitur yang kebanyakan orang cari, seperti static file serving, virtual hosts, reverse proxying, access control, URL rewriting, dsb.
3. IIS (Internet Information Services)
IIS merupakan web server yang digunakan dalam Windows, terutama Windows 2000 dan Windows 2003. Web Server IIS didukung dengan berbagai macam komponen pendukung seperti protokol karingan TCIP/IP, DNS, dan software untuk membuat situs web.
IIS sendiri sebetulnya dapat digunakan sebagai platform tempat aplikasi web berjalan. IIS mendukung berbagai macam protokol seperti HTTP, FTP, SMTP, NNTP, dan SSL. Kelebihannya, IIS merupakan web server yang sangat kompatibel dengan Windows sebagai imbas dari keluaran Microsoft, mendukung platform .NET yang hanya bisa dilakukan dengan IIS. Walau begitu, IIS termasuk web server berbayar, cukup mudah diserang oleh para cracker, serta keamanannya mudah ditembus.
4. Lighttpd
Lighttpd (dibaca : lightly) merupakan salah satu jenis web server open source lainnya yang awalnya ditulis oleh programmer berkebangsaan Jerman dalam bahasa pemrograman C.
Web server yang satu ini dapat beroperasi dalam komputer dengan sistem operasi Linux atau keluarga Unix lainnya. Salah satu kelebihan menggunakan Lighttpd adalah kemampuannya dalam mengatur CPU load dengan efektif, juga beberapa fitur advance lainnya seperti SCGI, FastCGi, Output-Compression dan URL-Writing.
· 8. Mozilla firefox,
Web browser ini dibuat oleh Mozilla corporation. Firefox merupakan web open source yang dibuat dengan Gecko layout engine. Firefox didukung dengan sejumlah Add-ons yang dapat kita install secara terpisah yang memungkinkan pengguna melakukan sesuai dengan Add-ons tersebut.
· Internet explorer,
Web browser ini biasa dikenal dengan nama pendek IE . Tahun 1995 IE dikategorikan sebagai default software pada saat instalasi system operasi windows.
· Safari,
Web browser ini dikembangkan oleh perusahaan Apple yang pertama kali diluncurkan pada 7 Januari 2003.
· Opera,
Web browser yang dikembangkan oleh Opera Software Company. Opera mempunyai Opera Widgets yaitu sebuah aplikasi kecil yang dijalankan bersamaan dengan opera yang mempunyai kegunaan tertentu seperti pada firefox yaitu Add-ons.
· Google chrome,
Web browser ini dikembangkan oleh google yang menggunakan WebKit layout engine and application framework. Pertama kali diluncurkan pada 2 September 2008 sebagai versi beta untuk Microsoft Windows.
9. Pengertian Web Programming
Apa yang dimaksud sebagai web programming? Kita sering mendengar istilah itu sebagai sesuatu yang berkaitan dengan internet dan website. Memang tak ada yang salah. Sebab berdasarkan namanya, web programming merupakan proses atau cara membuat program/web untuk kebutuhan akses internet.
Saat ini istilah yang paling populer dan selalu digunakan untuk merujuk website adalah WWW. Tahukah Anda yang dimaksud dengan itu? WWW merupakan akronim dari World Wide Web. Sampai saat ini penggunaan WWW dalam halaman website sudah sangat umum dan menautkan dari satu halaman ke halamain lain dari rangkaian informasi. Sistem WWW sendiri ditunjang oleh protokol HTTP yang merupakan singkatan dari Hypert Text Transfer Protocol.
Untuk belajar web programing, seseorang harus menguasai beberapa tahapan mendasar yang meliputi:
· Penguasaan HTML dan CSS
· Penguasaan PHP
· Penguasaan Javascript
· Penerapan Scrip Tambahan (Jquery, Ajax, dan sebagainya)
· Penguasaan Framework
Dari tahapan-tahapan tersebut, seorang pemula bisa mengembangkan dasar pengembangan web atau yang umum disebut Web Developing. Apakah susah belajar web programming? Tergantung dari tingkat pengenalan dan pemahaman dasar-dasarnya. Sebab web programming membutuhkan ketelitian karena melibatkan penggunaan sistem kode dan script yang nantinya diterjemahkan ke dalam desain web dan fiturnya. Sekarang ini sudah banyak contoh dasar belajar web programming yang bisa diikuti secara otodidak atau dengan mengikuti program kursus tertentu.
10. Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
11. 1) Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML.
2) simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa. 3)Sekarang mari kita mulai untuk membuat playlist lagu pada dokumen HTML seperti pada kotak di bawah ini. <!DOCTYPE html> <html> <head> <title> Cara Memasukkan Playlist Lagu Pada Dokumen HTML </title> </head> <body> <audio controls> <source src="Nama Lagu.mp3" type="audio/mpeg"> </audio> </body> </html> 1) Kemudian Simpan Script di atas yg sudah di Copy Paste di Notepad . 2) Buat folder kosong terlebih dahulu sebelum di Save.Kemudian Masukkan File HTML yg sudah kalian buat. 3) Anda bisa mengganti "Nama Lagu.mp3" diatas dengan judul musik yang ingin dimasukkannya tetapi tanpa menghilangkan ".mp3" nya.
4) Satukan/Masukkan juga File Musiknya yang kalian inginkan di Folder tadi (jangan lupa edit skrip di Notepad kembali jika kalian mau mengganti File Musiknya).
5) Terakhir, buka File HTML yang sudah kalian buat dengan Browser yg kalian inginkan.
12. Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:
<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/" target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://ilmukomputerplus.com/HTML/">Link ini</a> akan membawa anda ke halaman tutorial HTML.
</body>
</html>
Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>
Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>
Dalam contoh ini src atau source yaitu contoh.jpg sengaja dihapus agar alt-nya ditampilkan
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Tidak ada komentar:
Posting Komentar