hay guys hari ini saya sedang belajar membuat halaman utama menggunakan Bootstrap template. Disini saya belajar membuat website secara simple saja karena saya masih proses belajar.
nah disini saya gak banyak omong karena saya disini akan menjelaskan bagaimana cara membuat halaman utama yang responsive.
Apa yang anda ketahui tentang web desing yang responsif?
Responsive adalah teknik untuk membuat layout website dapat secara otomatis menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya.
Kemudian disini saya akan menujukkkan bagaimana script pada tampilan halaman utama di website saya buat.
1.Untuk membuat tampilan/halaman utama biasanya menggunakan, drowp down, akan tetapi disini saya tidak memakai itu saya lang meng-link kan sebuah hlaman ke halaman lainnya.( isi dari Halaman utama saya yaitu : home, profil, Berita, Contact.
Inilah script yang digunakan untuk membuat tampilan Home/Halaman utama :
Bisa juga dengan menambahkan Judul pada halaman utama.
Hasilnya akan terlebihat seperti ini :
2. kemudian kita juga bisa menambahkan Kalimat singkat ntuk menjelasakn suatu web yang kita tujuhkan kepada para pembaca dan bisa kita link kan ke alamat yang ditujuh.
Hasil :
</head>
<style>
body {
background-color:skyblue;
}
</style>
<body>
<style>
body {
background-color:skyblue;
}
</style>
<body>
Dan otomatis warna baground akan langsung terganti di website anda.
4. lalu jika kita ingin membuat tampilan untuk sosmed bisa kita letakkan sesuai selera anda dan menambahkan , disini saya meletakkannya dibawah footer. Berikut contoh scriptnya :
6. Selanjutnya pada langkah berikut saya emenambahkan contact here pada tampilan website saya kali ini dengan menambahkan nama, email adress, No hp, pesan dan tombol botton kirim hal ini bertujuan untuk jika seseorang ingin mendaftarkan diri di sekolah tersebut.
7.Berikut ini adalah script yang membuat website anda menjadi lebih responsive.
8. Dan ini lah hasil untuk ponsel/andoroid jika website anda sudah responsive.
10. Tampilan pada Komputer/pc anda.
sekian dari saya semoga bermanfaat. mohon maaf kalau tampilan utama saya kurang maksimal karena saya masih dalam proses belajar.
Selamat Mencoba. Terima Kasih
Wassalamualaikum wr.wb
Tidak ada komentar:
Posting Komentar