Lompat ke konten Lompat ke sidebar Lompat ke footer

Belajar Membuat Halaman Login Dengan HTML

    Belajar Membuat Halaman Login Dengan HTML

    Belajar Membuat Halaman Login Dengan HTML. Pasti kita tidak asing dengan istilah login di dunia web. Halaman login sendiri dibikin untuk memberi akses ke pemakai supaya bisa nikmati feature/service pada web itu yang umumnya kerap kita jumpai pada media sosial atau e-commerce. Menyaksikan jumlahnya macam design form login dari setiap web yang memikat, apa kalian tidak berminat untuk coba membuat sendiri? Di sini kita akan belajar bagaimana membuat desain form login yang sederhana mirip contoh gambar di halaman cover.


    Seterusnya, kita dapat mengawali dengan mengeklik salah satunya link pada indeks berikut :


    Pertama kali, kita harus membuat file html lebih dulu yakni dengan :


    Jika kita lihat nama tab pada penampilan browser seperti gambar di atas, nama itu sesuai tag Login pada file html yang kita bikin. di sini memang berperan untuk tentukan judul dari halaman situs yang kita bikin dan nanti akan ada pada tab browser.


    Kita harus masukkan tag ke tag seperti disebut dalam w3.org sebagai ketentuan dasar sebuah situs.


    Seterusnya, kita akan membuat card atau kotak putih seperti kartu yang di depannya akan kita isikan dengan tombol dan form


    Janganlah lupa taruh file setiap usai mengupdate isi file. Jika kita ingin menyaksikan hasilnya, refresh browser yang kalian pakai maka ada penampilan sebagai berikut :


    Jika ada penampilan di atas memiliki arti kita sudah sukses membuat card. Peluang penampilan di browser kalian dapat semakin besar ataupun lebih kecil karena resolusi tiap PC berlainan.


    Saat ini silahkan kita bedah satu demi satu tujuan dari setiap baris yang barusan kita tambah:


    Saat ini kita tentukan warna latar belakang dari halaman situs untuk percantik penampilan.


    Berikut hasilnya :


    Text itu sebagai CSS untuk mengganti warna latar belakang pada tag atau sama dengan mengganti latar belakang halaman situs kita. Saat ini silahkan kita ketahui arti setiap barisnya :


    Kita bisa menambah warna gradient sebanyak-banyaknya dengan jenis warna minimum 2.


    Sekarang waktunya untuk memberikan judul pada form yang hendak kita bikin, berikut triknya :


    Taruh file itu sesudah menambah text di atas selanjutnya kerjakan refresh pada browser. Kita akan memperoleh hasil sebagai berikut :


    Seterusnya kita akan analisis text CSS barusan dipertambah, supaya tidak berbelit-belit kita akan ulas sisi yang belum diterangkan awalnya.


    Saat ini kita awali masuk ke komponen khusus dari halaman login yakni form. Pertama kali kita akan menambah komponen saat sebelum paling akhir sama seperti yang saya terangkan awalnya. Tambah text berikut:


    Perlu kalian kenali, setiap kita ingin membuat form karena itu kita wajib buat membuat tag lebih dulu baru selanjutnya didalamnya kita tambah sesuai keperluan. metodedisini tentukan buat apa form itu dan bermanfaat saat kita sudah menambah code PHP dan SQL untuk proses validasi di saat login, "post" memiliki arti form itu dipakai untuk mengirim data pada database. Karena arah panduan ini untuk design, karena itu kita cukup konsentrasi mengulas HTML dan CSS. (:

    Karena itu kita akan memperoleh hasil sebagai berikut :


    Sudah pasti kita akan memperoleh penampilan yang paling amburadul karena di sini kita barusan menambah HTML, seterusnya kita atur dan mempercantik memakai CSS. Tulis text berikut ke tag :


    Saat ini coba taruh file sesudah menambah text itu dan melakukan refresh pada browser, karena itu kita akan memperoleh penampilan sebagai berikut


    Elok kan? Sama seperti yang kita saksikan, CSS di sini berperanan penting dalam membereskan sekalian percantik penampilan. Seterusnya silahkan kita analisis model yang barusan kita pakai, saya cuman menerangkan sisi yang belum kita ulas awalnya.


    Finally, kita sudah tiba di bagian akhir yang tidak kalah penting dalam membuat desain halaman login yakni tombol login tersebut. Berikut langkahnya:


    Taruh file itu dan melakukan refresh pada browser, kita akan memperoleh hasil sebagai berikut :


    Jika sudah ada penampilan itu seterusnya kita kerjakan styling memakai CSS, tulis text berikut ke tag


    Lihat baris #submit-btn:hover, hover sebagai CSS selector yang bermanfaat untuk mengaplikasikan model saat kita arahkan kursor mouse ke komponen itu.


    Jika kita ingin membuat sedikit animasi pada CSS, karena itu kita perlu membuat 2 model yang lain. Pada contoh di atas ada model pada #submit-btn dan adapula #submit-btn:hover. Pada #submit-btn kita membuat model khusus pada komponen dengan id itu, dan pada#submit-btn:hover kita membuat model tambahan saat kursor mouse ditujukan pada komponen dengan id itu. Supaya peralihan yang terjadi kelihatan mulus karena itu dalam #submit-btn kita menambah transition: 0.25syang tujuannya ialah saat kita arahkan kursor mouse ke komponen itu bisa terjadi peralihan dengan durasi waktu 250ms.


    Untuk mempermudah pengetahuan,langsung taruh file sesudah mengopi text itu dan melakukan refresh pada browser. Coba tujukan kursor mouse kalian pada tombol Login dan lihat apa yang terjadi.


    Jika masih tetap ada error pada beberapa cara barusan, berikut saya beri source kode komplet untuk membuat desain Login Card.


    Posting Komentar untuk "Belajar Membuat Halaman Login Dengan HTML"