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