Tugas web
Assalamu’alaikum warahmatullahi wabarokatuh, Kali saya akan membahas dan menggerjakan tugas tugas dibawah ini ya gan…
Berikut ini soalnya,
1. Jelaskan tentang web programmer, web design, dan web developr.
2. Tuliskan tag html dasar dan css dsar beserta fungsinya (minimal masing-masing 10)
3. Buatlah banner tentang pendaftaran sekolah
(Banner di upload di blog)
4. Tuliskan langkah-langkah memasang slider di web menggunakan jquery nivo slider
Jawabannya:
1. PENJELASAN
A. Web programmer, adalah orang yang mengkoding sebuah website yang akan dibuat.
B. Web developer, adalah orang yang merangkai website sesuai dengan design yang ingin dibuat hingga dapat diakses/dibuka/dilihat oleh pengunjung dan web developer yang memiliki tanggung jawab penuh atas web yang telah ia buat.
C. Web designer, adalah orang yang mendesain/mengkreasikan suatu web.
2. PENJABARAN
A. Tag pada HTML:
NO. | Tag | Fungsi |
1. | <hr> </hr> | Membuat garis yang berbentuk horizontal |
2. | <table> </table> | Membuat table |
3. | <button> </button> | Membuat teks agar bias di klik |
4. | <marque> </marque> | Membuat teks berjalan |
5. | <title> </title> | Membuat judul |
6. | <!DOCTYPE> | Mendefinisikan informasi tipe dokumen |
7. | <ul> </ul> | Membuat symbol sebuah daftar |
8. | <menu> </menu> | Mendefinisikan sebuah daftar menu |
9. | <option> </option> | Penampilan dari beberapa pilihan dalam bentuk menurun(drop dwon) |
10. | <p> </p> | Menyisipkan sebuah paragraph |
B. Tag pada CSS
NO. | Tag | Fungsi |
1. | Font-size | Digunakan untuk menggatur ukuran teks/tulisan. |
2. | Font-height | Digunakan untuk menggatur ketebalan teks/tulisan. |
3. | Background-position | Digunakan untuk mengatur posisi dari background yang ingin dipakai. |
4. | Font-family | Digunakan untuk memilih jenis font. |
5. | Text-shadow | Digunakan untuk membuat bayangan. |
6. | Color | Digunakan untuk menggatur warna tulisan. |
7. | Border | Digunakan untuk border atau bingkai di sekitar element. |
8. | Border-width | Digunakan untuk menggatur ketebalan boder/bingkai pada element. |
9. | Border-style | Digunakan untuk menggatur gaya dari border/bingkai tersebut. |
10. | Border-color | Digunakan untuk menggatur warna dari border/bingksi yang telah dibuat. |
3. Banner pendaftaran sekolah
4. Cara memasang nivo slider
1. Download free nivo slider plugin di http://dev7studios.com/nivo-slider/
2. Buat folder baru dengan nama misalnya slider
3. Ekstrak file nivoslider.zip didalam folder slider ( biasanya menjadi folder nivo-slider). Jadi dalam folder slider sudah ada folder nivo-slider ( /slider/nivo-slider/ )
4. Buat file index.php di dalam folder slider ( /slider/index.php ), Berikut ini saya akan perjelas cara pemasanganya agar tidak ada kesalahan saat pemasangan
5. Pada index.php buatlah tag <head> seperti code dibawah ini :
1 2 3 4 5 6 7 8 | <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Nivo Slider</title> <link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" /> <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> </head> |
6. Masukan javascript utama untuk slider di dalam tag <head>, posisikan script di bagian bawah. (sebelum tag penutup </head>)
1 2 3 4 5 | <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> |
7. Buatlah sebuah folder untuk menyimpan image yang akan dijadikan slide misalnya folder img ( /slider/img/ ). Masukan gambar – gambar yang akan digunakan untuk image slideshow misalnya
1 2 3 4 | - /slider/img/1.jpg - /slider/img/2.jpg - /slider/img/3.jpg - /slider/img/4.jpg |
8. Selanjutnya pasang markup html untuk slide pada tag <body> seperti dibawah:
1 2 3 4 5 6 7 8 9 10 11 | <body> <div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="img/1.jpg" alt="Image 1" /> <img src="img/2.jpg" alt="Image 2" /> <img src="img/3.jpg" alt="Image 3" /> <img src="img/4.jpg" alt="Image 4" /> </div> </div> </body> |
9.Nah, sekarang coba buka index.php pada browser. Image slideshow ternyata sudah jalan.
Mungkin untuk lebih advance bisa dipelajari lebih lanjut dari dokumentasi nivo slider http://docs.dev7studios.com/jquery-plugins/nivo-slider. Ada banyak sekali feature tambahan yang bisa ditambah dalam nivo slider dan dengan cara simple tinggal menambahkan beberapa property di script utama di tag <head>. Salah satu contoh merubah effect transisi seperti dibawah ini :
1 2 3 4 5 6 7 | <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: ' fade', // Specify sets like: 'fold, random, sliceDown' }); }); </script> |
Dengan script di atas transisi akan berubah menjadi memudar.
Terima kasih atas perhatiannya, kritik dan saran kalian akan sangat membantu untuk membangun blog ini menjadi lebih baik lagi, mohon maaf jika ada kesalahan kata dalam postingan ini wasalamu'alaikum warahmatullahi wabarakatuh....