arekindo: website

Home Posts filed under website

Showing posts with label website. Show all posts

Membuat Form Login Keren Teddy Gangster

Membuat Form Login Keren Teddy Gangster - Teddy bear adalah boneka berbentuk beruang yang sangat lucu ini akan di jadikan login untuk sebuah website tetapi biar menimbulkan kesan keren jadi saya pilih gambar yang bertema gangster dan ternyata tersedia di google dan berikut bahan gambar yang kalian butuhkan.

dan selanjutnya tahap pembuatan scriptnya pertama buatlah script bernama login.html dan isi script di bawah

<html>
<head>
<title>Teddy Gangster Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<br>
<form action="" method="post">
<h2>Teddy Gangster</h2><br>

<label>Username :</label>
<input id="name" name="username" placeholder="username" type="text">

<label>Password :</label>
<input id="password" name="password" placeholder="**********" type="password">

<center><input type="submit" name="submit" id="submit" value="Login"></center><br>
<center><input type="submit1" name="daftar" id="daftar" value="Sing-Up"></center>
</form>
</div>
</body>
</html>

selanjutnya buat lagi script style.css dan isi script di bawah

body{
background: url('img/1.jpg');
background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 10%;
border-radius:15px;
margin-left: 35%;
padding: 20px 25px;
opacity:2;filter:alpha(opacity=10);
box-shadow: 5px 6px 20px 15px #DCDCDC;
}
h2{
background-color: #FFDEAD ;opacity:0.9;filter:alpha(opacity=5);border-radius:15px;
padding: 10px 10px;
margin: -10px -50px;
text-align:center;
color: #00008B;
font-family: calibri;

}

input[type=text]{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: grey;
font-size: 16px;
font-family: arial;
}
input[type=password]{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: grey;
font-size: 16px;
}

label{
color: #00FFFF;
text-shadow: 0 1px 0 BLACK;
font-size: 15px;
font-weight: bold;
font-family: arial;
}

input[type=submit]{
font-size: 16px;
color: BLACK;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}
input[type=submit1]{
text-align:center;
font-size: 16px;
color: BLACK;
font-weight: bold;
cursor: pointer;
width: 50%;
padding: 10px 0;
outline:none;
}

dan selanjutnya buatlah folder bernama img dan kumpulkan menjadi satu folder

dan kalian bisa coba jalankan dengan mengklik login.html dan buka di browser kalian.

website

Membuat Form Daftar Keren : Blue Electro

Setelah pembuatan form login blue electro sekarang kita membahas tentang pembuatan form pendaftaran blue electro bahannya hampir sama hanya saja perbedaan ada pada background body dan background containernya, saya menukarnya gambar 1 saya ganti menjadi gambar 2 hanya itu saja sih perbedaannya. terus perunahan yang lain adalah pada input text yang mana disana bertambah label email dan label re-type password.
seperti halnya yang kemarin kita membuat filenya lagi seperti awal yaitu dengan cara :
1. membuat file index.html/php lalu copykan script yang di bawah ini.

<html>
<head>
<title>Blue Electro Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<br>
<form action="" method="post">
<h2>BLUE ELECTRO</h2><br>

<label>Username :</label>
<input id="name" name="username" placeholder="username" type="text">

<label>Email :</label>
<input id="name" name="username" placeholder="username" type="text">

<label>Password :</label>
<input id="password" name="password" placeholder="**********" type="password">

<label>Re-Type Password :</label>
<input id="password" name="password" placeholder="**********" type="password">

<center><input type="submit" name="submit" id="submit" value="Create Account"></center><br>
<center><input type="submit1" name="login" id="login" value="Login"></center>
</form>
</div>
</body>
</html>

2. selanjutnya buatlah file style.css lalu copy scriptnya.

body{
background: url('img/2.jpg');
background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 5%;
border-radius:15px;
margin-left: 35%;
background: url('img/1.jpg');
background-repeat:no-repeat;
background-size:cover;
padding: 20px 25px;
opacity:0.9;filter:alpha(opacity=5);
box-shadow: 6px 8px 8px 6px #DCDCDC;
}
h2{
background-color: #F0FFFF;
padding: 10px 10px;
margin: -10px -50px;
text-align:center;
color: #000080;
font-family: arial;
}

input[type=text]{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: grey;
font-size: 16px;
font-family: arial;
}
input[type=password]{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: grey;
font-size: 16px;
}

label{
color: #00FFFF;
text-shadow: 0 1px 0 BLACK;
font-size: 15px;
font-weight: bold;
font-family: arial;
}

input[type=submit]{
font-size: 16px;
color: BLACK;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}
input[type=submit1]{
text-align:center;
font-size: 16px;
color: BLACK;
font-weight: bold;
cursor: pointer;
width: 50%;
padding: 10px 0;
outline:none;
}

3. buat foldernya dan berinama img lalu isi dengan gambar yang ada pada pembuatan form login atau pada postingan yang disini

4. setelah kalian pastikan semuanya sudah ada pada posisinya kalian bisa langsung mencobanya menggunakan browser.

selesai deh, semoga bermanfaat.

website

Membuat Form Login Keren : Blue Electro

Membuat Form Login Keren : Blue Electro sangatlah mudah hanya saja perlu pemahaman yang lebih agar bisa membuatnya sendiri dan selain itu dengan memahami coding apa yang kita ketik, kita tidak perlu lagi yang namanya googling. kan sudah hafal dengan code tersebut.

nah langsung saja kita buat form loginnya dan berikut codingnya :

1. kita harus buat yang namanya index.php / index.html dengan script di bawah

<html>
<head>
<title>Blue Electro Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<br>
<form action="" method="post">
<h2>BLUE ELECTRO</h2><br>

<label>Username :</label>
<input id="name" name="username" placeholder="username" type="text">

<label>Password :</label>
<input id="password" name="password" placeholder="**********" type="password">

<center><input type="submit" name="submit" id="submit" value="Login"></center><br>
<center><input type="submit1" name="daftar" id="daftar" value="Sing-Up"></center>
</form>
</div>
</body>
</html>

2. selanjutnya kalian buat file style.css dengan script dibawah ini

body{
background: url('img/1.jpg');
background-repeat:no-repeat;
background-size:cover;
color: #fff;
}
.container {
width: 30%;
margin-top: 10%;
border-radius:15px;
margin-left: 35%;
background: url('img/2.jpg');
background-repeat:no-repeat;
background-size:cover;
padding: 20px 25px;
opacity:0.9;filter:alpha(opacity=5);
box-shadow: 6px 8px 8px 6px #DCDCDC;
}
h2{
background-color: #F0FFFF;
padding: 10px 10px;
margin: -10px -50px;
text-align:center;
color: BLUE;
font-family: arial;
}

input[type=text]{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: grey;
font-size: 16px;
font-family: arial;
}
input[type=password]{
width: 100%;
height: 50px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: grey;
font-size: 16px;
}

label{
color: #00FFFF;
text-shadow: 0 1px 0 BLACK;
font-size: 15px;
font-weight: bold;
font-family: arial;
}

input[type=submit]{
font-size: 16px;
color: BLACK;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}
input[type=submit1]{
text-align:center;
font-size: 16px;
color: BLACK;
font-weight: bold;
cursor: pointer;
width: 50%;
padding: 10px 0;
outline:none;
}

3. kalian buat folder img lalu download gambar dibawah ini

beri nama "1.jpg" dan "2.jpg" pada gambar di atas tanpa petik taruh di dalam foldernya

4. kumpulkan jadi satu semua file yang sudah di buat tadi, seperti gambar di bawah ini

lalu kalian bisa test deh di firefox kalian
dan hasilnya bisa kalian lihat seperti gambar di postingan ini

website

Belajar HTML Dengan Mudah Dan Cepat

Halo para mahasiswa dan mahasiswi KULONTEKNO .Belajar HTML dasar adalah sebuah langkah awal bagi kita yang ingin menjadi programer website, agar kalian bisa memahami pemrograman website untuk tingkat lanjut. website sendiri memiliki banyak kegunaan antara lain untuk bersosial mencari teman bahkan ada yang mencari penghasilan dari website itu, tapi bagi kalian yang baru ingin belajar kalian bisa ikuti tutorial di kulontekno.blogspot.com.
untuk peralatan membuat website sangatlah sederhana yang pasti kalian harus mempunyai website
1. notepad
2. firefox
3. tutorial dari kulontekno.blogspot.com

yang perlu kalian perhatikan adalah kalian wajib atau harus rajin membaca tutorial dan penjelasan dari script yang di tulis.
aplikasi untuk menulis scriptnya ada bermacam - macam mulai dari notepad biasa yang ada pada waktu instalasi windows sampai yang harus kalian download sendiri.
aplikasi lain yang bisa kalian gunakan untuk menulis script website adalah sebagai berikut:
1. notepad windows
2. notepad ++
3. bracket dll
kalian bisa googling sendiri tapi saya lebih menyarankan untuk menggunakan notepad ++.
sedangkan aplikasi yang bisa langsung mendesain websitenya dan hanya membutuhkan sedikit pengetahuan coding yaitu Dreamweaver, aplikasi dreamweaver sendiri sudah banyak di gunakan oleh para designer website tapi kebanyakan yang profesional lebih memilih untuk menggunakan full code dengan menulis menggunakan notepad ++ dan kawan - kawannya.
langsung saja ke pokok pembahasan tentang pemrograman webstie dasar yaitu HTML, dan dibawah ini adalah Script dari HTML.
<html>
<head>
<title>nama website</title>
<head>
<body>

</body>
</html>

penjelasannya :
setiap html wajib di awali dengan <html> dan di akhiri </html> perbedaan akhir sama awal hanya pada garis "/" untuk yang menandakan bahwa itu adalah penutup perintahnya,
<head> adalahan tempat kita memberikan judul dan beberapa kode selanjutnya.
<title> adalah nama atau tulisan yang akan muncul pada tab judul.
<body> adalah tempat kita mendesain tampilan website yang ingin kita buat.

website

cara membuat website 100% gratis

cara membuat website gratis dan mudah

CARA MEMBUAT WEBSITE GRATIS DAN MUDAH ~ Penggunaan website saat ini semakin hari semakin bertambah banyak hal ini terjadi karena kemajuan tehnologi dan tuntutan hidup pada jaman sekarang. Seiring dengan itu penyedia jasa pembuatan website murah juga tumbuh dan berkembang di mana mana. Website yang dalam bahasa Indonesia berarti situs web, merupakan suatu halaman web yang pada dasarnya berupa sebuah berkas baik itu berupa berkas gambar, tulisan, video dan lain sebagainya.

Nah jika anda ingin tahu cara membuat website gratis sendiri dengan mudah tanpa perlu menyewa jasa pembuatan website, maka perhatikanlah langkah-langkah yang ada di bawah.

Untuk mempermudah anda memahani cara membuat website sendiri di sini saya menggunakan sebuah hosting gratis yaitu idhostinger karena anda akan mendapatkan 2 GB disk space, 100GB Bandwidth secara cuma cuma selamanya dan anda dapat upgrade jika diperlukan.

Cara Membuat Website gratis

1. Kunjungi situs idhostinger di www.idhostinger.com
2. Klik kotak Order Sekarang!
3. Isilah form pendaftaran dengan nama anda, email, password, isi kode yang terlihat, centang kotak kecil dan klik buat akun. Jika anda belum tahu cara membuat email gmail silahkan anda baca artikel cara membuat email untuk membantu cara membuat website gratis anda.

4. Buka email anda dan klik link verifikasi yang telah dikirimkan
5. Ada 3 pilihan hosting untuk anda, karena kita ingin belajar cara membuat website gratis maka pilihlah yang gratis, klik order

cara membuat website menggunakan layanan gratis

6. Isi subdomain anda (jangan kurang dari 5 huruf), inilah yang akan menjadi bagian dari alamat anda nanti, pada kotak sebelah kanan pilih yang sesuai keinginan anda. setelah selesai isi semuanya, klik buat. Dan anda klik lagi tombol kelola.

7. Dan sekarang anda berada pada Cpanel, cari tulisan penginstallan otomatis , lalu klik saja tulisan tersebut

Cara membuat website sendiri

8. selanjutnya adalah pilih layanan website gratis dari wordpress

cara bikin website gratis ~ menggunakan wordpress

9. Biarkan kotak bertuliskan install ke - (jangan diisi ), kemudian isi nama pengguna (boleh nama anda kalau bisa jangan menggunakan kata admin), isi password juga dan klik install wordpress 3.3.1., jika ada tampilan isi direktori akan ditimpa ? klik yes..., tunggulah prosesnya hingga selesai.

cara bikin website gratis ~ pengguna wordpress

cara membuat website

10. Dan website gratis anda sudah jadi, anda dapat login ke website anda dengan cara meng-klik 'manage' pada tab hosting atau klik saja nama domain misalnya namadomain.p.ht lalu pilih 'log in' (lihat bagian kanan bawah) dan isi username dan password.

Anda juga bisa masuk ke website anda dengan cara mengetik www.namadomain/wp-admin contoh nya www.namadomain.p.ht/wp-admin ataupun mengetik www.namadomain/wp-login.php dan anda akan masuk ke wordpress sebagai tanda bahwa anda telah berhasil membuat website sendiri.

Silahkan anda berkreasi dengan membuat website anda tersebut dan jika berkeinginan lebih serius lagi untuk agar tahu cara membuat website, silahkan baca kursus membuat website, dari sini anda akan mendapatkan cara membuat website secara profesional.