Apa sih adobe dreamweaver itu?
Mungkin sebagain dari kalian belum tau apa itu dreamweaver, Dreamweaver adalah program yang digunakan untuk membuat atau menyunting halaman web. Menurut saya, inti dari pengertian Dreamweaver adalah sebuah program atau aplikasi yang digunakan untuk membuat sebuah template web.
Trus apa gunanya form login sendiri?
Sebenarnya saya sendiri kurang faham tentang kegunaan form login hhehe. Tapi sepengertian saya sendiri adalah berguna untuk menjadi template atau background sebuah halaman login/masuk ke web.
- HTML = singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
- Template = template adalah layout atau tampilan web blog, atau website yang akan dirancang, atau sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.
- Css = CSS adalah singkatan dari Cascading Style Sheets. Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language. Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website.
Nah, setelah beberapa penjelasan diatas sekarang waktunya menjelaskan cara membuat form login.
Ikuti langkah-langkah berikut
- Membuat folder
Gambar 1.1 membuat folder baru
Gambar 1.2 membuat folder baru
- Membuat file html dan css
Gambar 2.1 membuat file html dan css
Setelah itu ganti nama file tersebut sesuai keinginan masing-masing dengan format .html bila ingin membuat file html dan .css bila ingin membuat file css.
Gambar 2.2 membuat file html dan css
- Buat format html untuk usename, password, dan login
Setelah file jadi, buka file tersebut.
Hapus kode html bawaannya, kemudian isi dengan format html dibawah ini:
Hasil dari format html di atas adalah seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>contoh html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Form Login</h1>
<div class="kotak_login">
<p class="tulisan_login">Silahkan login</p>
<form>
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="Username atau email">
<label>Password</label>
<input type="text" name="password" class="form_login" placeholder="Password">
<input type="submit" class="tombol_login" value="LOGIN">
<br/>
<br/>
<center>
<a class="link" href="https://www.google.com">kembali</a>
</center>
</form>
</div>
</body>
</html>
Gambar 3.1 buat format html
- Buat format css
Sekarang kita akan membuat css yaitu yang berfungsi untuk memperindah template yang kita buat yaitu dengan cara buka file css yang kita buat tadi.
Yang pertama kita buat adalah font dan background dari template tersebut, dengan cara ketik format dibawah ini di awal (hapus dulu semua format bawaan bila ada)
body{
font-family: forte;
background: url(ux.png) no-repeat;
color: #FFF;
}
Penjelasan untuk format di atas
- Font-family= berfungsi untuk merubah jenis font secara keseluruhan pada template tersebut. Kalian bebas mau memakai jenis font apa seperti di contoh itu menggunakan jenis font ‘forte’
- Background= berfungsi sebagai background form login nanti nya. Di contoh itu menggunakan gambar (image) sebagai backgroundnya (dengan catatan file gambar sudah dimasukan ke dalam file html dan css yang kita buat di awal). Apabila hanya ingin menampilkan warna saja di background bisa menggunakan format
- Background: #OFF; (biru laut) atau bisa menggunakan warna lain
- Color= color disini berfungsi sebagai warna dari semua font/text di template tersebut.
Tapilan template setelah di beri css font dan background
Gambar 4.1 buat format css
Setelah membuat format font dan background kita akan membuat format untuk mempercantik kolom username dan password. Berikut adalah format untuk bagian username dan password.
h1{
text-align: center;
/*ketebalan font*/
font-weight: 300;
}
.tulisan_login{
text-align: center;
/*membuat semua huruf menjadi kapital*/
text-transform: uppercase;
}
.kotak_login{
width: 350px;
background: none;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
}
label{
font-size: 11pt;
}
.form_login{
/*membuat lebar form penuh*/
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
.tombol_login{
background: #46de4b;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
.link{
color: #FFF;
text-decoration: none;
font-size: 10pt;
}
Sedikit penjelasan tentang format di atas yaitu
Bacground di kotak_login adalah untuk membuat kotak pada bagian username dan password contoh
background: #white; atau background: #FFF;
hasilnya akan seperti ini
Gambar 4.2 buat format css
Selesai pembuatan template form login sederhana menggunakan dreamweaver dan ini adalah hasil dari format html dan css di atas
Gambar 4.3 html dan css selesai
Mudahkan cara membuatnya, karena menurut saya dreamweaver ini lebih mudah dari aplikasi lainnya karena sesuatu yang saya tidak mengerti.
Terima kasih atas kunjungannya... dan Mohon maaf apabila apa yang saya sampaikan susah di mengerti, untuk itu koment untuk kemajuan blog ini dan apabila anda menyukainya tolong share ke teman-teman anda untuk berbagi ilmu karena dengan anda berbagi anda akan mendapatkan pahala.
0 Response to "Cara membuat form login sederhana menggunakan Adobe Dreamveaver"
Posting Komentar