TUGAS UTS WEB STATIS Nama : Apriyanto Wibowo NIM : 12141362 Prodi Mata Kuliah : Teknik Informatika S1 (Malam) : Pemrograman Web Statis Pengertian framework Framework adalah kerangka kerja. Framework juga dapat diartikan sebagai kumpulan script yang dapat membantu developer/programmer dalam menangani berbagai masalahmasalah dalam pemrograman seperti koneksi ke database, pemanggilan variabel, file,dll sehingga developer lebih fokus dan lebih cepat membangun aplikasi Framework bootsnipp adalah sebuah elemen galeri untuk desain web dan web developer yang dibuat oleh Maks (untuk lebih jelasnya cari di google). Siapapun yang menggunakan bootstrap akan menemukan website ini penting dalam pekerjaan mereka. Untuk mendownload framework bootsnipp lebih banyak kunjungi http://bootsnipp.com Bootstrap merupakan sebuah framework CSS,yang menyediakan kumpulan komponenkomponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untukmembangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasarhtml untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya. Untuk mendownload bootstrap kunjungi http://getbootstrap.com Tutorial penggunaan framework CSS bootsnipp Berikut adalah cara menggunakan framework CSS bootsnipp untuk form login dengan background 1. Pertama buat file index.html <!DOCTYPE html> <html> <head>
<title>membuat halaman web</title> </head> <body> </body> </html> 2. Selanjutnya kita membuat tag untuk fullscreen background <body> <div id="fullscreen_bg" class="fullscreen_bg"/> <div class= container > 3. Untuk membuat kolom input digunakan tag <form> <form class="form-signin"> <h1 class="form-signin-heading text-muted">sign In</h1> <input type="text" class="form-control" placeholder="email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="password" required=""> </form> <button class="btn btn-lg btn-primary btn-block" type="submit"> </button> Sign In -placeholder digunakan untuk memberikan keterangan input data -untuk membuat tombol bisa menggunakan tag <button class=...>
Di bawah ini adalah hasil screenshot html Agar tampilan layout lebih menarik kita bisa menggunakan kode CSS Berikut adalah salah satu cara menginputkan CSS ke html <body> <link rel="stylesheet" href="login.css" /> <div id="fullscreen_bg" class="fullscreen_bg"/>... </body> </html> - Tag <link rel= stylesheet... /> digunakan untuk memanggil CSS Di bawah ini adalah kode CSS yang telah disebutkan di atas : @charset "utf-8"; /* CSS Document */ body { padding-top: 120px; padding-bottom: 40px;
background-color: #eee; (jenis selector di atas adalah type tag selector untuk tag body).btn { outline:0; border:none; border-top:none; border-bottom:none; border-left:none; border-right:none; box-shadow:inset 2px -3px rgba(0,0,0,0.15); (jenis selector di atas adalah type class selector untuk tag button,class selector akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sesuai).btn:focus{ outline:0; -webkit-outline:0; -moz-outline:0; (class selector di atas digunakan untuk mengatur outline bagian input email).fullscreen_bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: 50% 50%;
background-image: url('http://cleancanvas.herokuapp.com/img/backgrounds/colorsplash.jpg'); background-repeat:repeat; (class selector di atas digunakan untuk mengatur dan memasukkan gambar background).form-signin { max-width: 280px; padding: 15px; margin: 0 auto; margin-top:50px; (class selector di atas untuk mengatur jarak form dari atas).form-signin.form-signin-heading,.form-signin { margin-bottom: 10px; (class selector di atas digunakan untuk mengatur tata letak header sign in).form-signin.form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; (class selector di atas digunakan untuk mengatur box email dan password)
.form-signin.form-control:focus { z-index: 2;.form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-color: #000; (class selector di atas digunakan untuk mengatur border kotak email).form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: rgb(0,0,0); border-top:1px solid rgba(0,0,0,0.08); (class selector di atas digunakan untuk mengatur outline bagian kotak password)
.form-signin-heading { color: #fff; text-align: center; text-shadow: 0 2px 2px rgba(0,0,0,0.5); (class selector di atas digunakan untuk mengatur warna dan text shadow dari kata sign in) Berikut adalah screenshot form login dengan menggunakan CSS diatas