Tugas Pemrograman Web Membuat Form Login HTML

Tugas Pemrograman Web, Salam hangat buat sobat pembaca semua. Pada postingan kali ini akan dibahas mengenai Tugas Pemrograman Web yaitu Membuat Form Login HTML dan CSS. Seinget saya mata kuliah pemrograman web ada di semester 5 teknik informatika unpam.

Baca Juga : Struktur Dasar HTML

Salah satu tugas latihan pemrograman web yaitu membuat Form Login HTML dengan CSS. Silakan simak pada postingan berikut :

Form Login HTML

Buat lah folder untuk menyimpan file html dan css nya.
Buka software editor kalian. Saya menggunakan visual studio code.
Jika ingin menggunakan background siapkan file jpgnya simpan di folder yang sudah dibuat.
Berikut contoh source code untuk HTMLnya :

Simpan Source dengan extensi .html
Untuk source code css nya seperti berikut :

*{ 	margin: 0; 	padding: 0; 	outline: 0; 	font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif; }  body{ 	height: 100vh; 	background-image: url(‘../Web/resource/piclogin.jpg’); 	background-size: auto; 	background-position: center; 	background-repeat: no-repeat; } .container{ 	position: absolute; 	left: 50%; 	top: 50%; 	transform: translate(-50%,-50%); 	padding: 20px 25px; 	width: 300px;  	background-color: rgba(0, 0, 0,.7); 	box-shadow: 0 0 10px rgba(255, 255, 255,.3); } .container h1{     text-align: left;     color: #ffffff;     margin-bottom: 15px;     text-transform: uppercase;     border-bottom: 4px solid #93bbff; } .container h5{     text-align: center;     color: #ffffff;     margin-bottom: 15px;     text-transform: uppercase;     font-size: 12px; } .container label{ 	text-align: left;     color: #ffffff;     text-transform: uppercase; } .container form input{     width: calc(100% – 20px);     padding: 8px 10px;     margin-bottom: 15px;     border: none;     background-color: transparent;     border-bottom: 2px solid #2979ff;     color: #fff;     font-size: 20px; } .container form button{ 	width: 100%; 	margin-bottom: 10px;     padding: 5px 5px;     border: lemonchiffon;     background-color:#2979ff;     font-size: 16px;     color: #fafafa; }

Untuk background-image: url(‘../Web/resource/piclogin.jpg‘); silakan ganti tulisan berwarna biru dengan link atau url penyimpanan gambar background yang sudah didownload sebelumnya.

Baca Juga : Tugas Akhir Pemrograman Web Form Registrasi

Seperti itu kira-kira untuk Tugas Pemrograman Web Membuat Form Login HTML, kalian bisa modifikasi atau kalian kembangkan kembali source code dasar tersebut.

Form Login HTML

Leave a Reply Cancel reply