Archive for February 2019 -->

Cara Membuat Website Sendiri mudah dan gratis

cara membuat website sendiri gratis
     Hallo, sejahtera semua, kali ini akan dibahas cara membuat website sendiri, mungkin bagi yang ingin belajar membuat website tentu akan membutuhkan waktu bagi yang belejar Otodidak dan terasa sulit.

Adapun Step by step akan saya paparkan untuk membuat website, sebelum bisa membuat website silakan membaca
Dari dasar HTML itu bisa ditarik kesimpulan bahwa menjadi Programer website harus mengerti syntak dari setiap bahasa pemrograman.

  1. Harus memiliki kode Editor untuk website bisa menggunakan Notepade ++ atau paling direkomendasikan adalah Adobe Dreamwaver CS6
  2. 

<html>
<head>
<title>isikan judul website</title>
</head>
<body>
disini tempat kode element dan sebagainya
</body>
</html>

    Kode diatas adalah dasar dari html, silakan di copy atau buat sendiri seperti itu.
  3. Fungsi DIV ini digunakan untuk membentuk suatu element kerangka dasar yang akan di hiasi oleh CSS nanti.
    4. 
<html>
<head>
<title>Juduh website</title>
</head>

<body>
<div id="coverluar"> <!--sangat penting untuk mengatur layout-->
 <div id="kepala">
    </div>
    <div id="menu">
    </div>
    <div id="menukiri">
    </div>
    <div id="isitengah">
    </div>
    <div id="kaki">
    </div>
</div>
</body>
</html>
    Bisa dilihat di atas, bentuk susunan div di atas, dan jangan lupa tetap buat pembungkus DIV seperti yg saya kasi note di atas, pembungkus tersebut berfungsi membuat lebar layout agar tertata
    Setelah itu tambahkan kode link CSS, saya menggunakan code css yang terpisah. 
    
<link rel="stylesheet" href="custom.css" type="text/css" />
</head>
    Letakan pemanggil css sebelum penutup </head>. dan silakan membuat file baru dengan nama custom.css
    Baca Berikutnya
Read More
Bonbon No comments:
Labels:

Cara Membuat Website Sendiri mudah dan gratis (part 2)

cara membuat website sendiri gratis
    2. Setelah memasang script code yang di point 3, selanjutnya configurasi file css sesuai nama ID dan Class yang di pakai.
    hal terpenting dari configurasi css adalah div id pembungkus yaitu ini: 
    
#coverluar{
 width:900px; /*tentukan lebar layout*/
 margin:auto;
 display:block; /*agar posisi layout di tenagh*/
 border:1px solid #CCC;
}

    karena cover pembungkusnya lah yang menentukan ukuran lebar site kita. dan otomatis div didalamnya harus sesuai dengan lebar cover luarnya, baik itu di bagi dua harus hitungannya sama, bisa di perhatikan di config file css di bawah. 
    
@charset "utf-8";
/* CSS Document */
#coverluar{
 width:900px; /*tentukan lebar layout*/
 margin:auto;
 display:block; /*agar posisi layout di tenagh*/
 border:1px solid #CCC;
}

#kepala{
 height:150px;
 background:#0FF;
 clear:both;/*mematikan fungsi float left/kanan,*/
}
#menu{
 width:900px;
 height:50px;
 clear:both;
}
#menukiri{
 width:200px;
 height:700px;
 float:left;
 background:#999;
}
#isitengah{
width:700px;
height:700px;
float:left;
background:#CCC;
}

#kaki{
 clear:both;
 height:50px;
 width:900px;
 background:#333;
 color:#fff; 
}

    Jika Code css di awali dengan tanda "#" maka itu disebut ID seperti ini <div id="nama_ID"></div>
    jika code css di awali dengan tanda "." maka disebut class seperti ini <div class="nama_class"></div> jika code di atas kalian benar memasangnya maka hasilnya akan seperti ini.
    cara mudah membuat website sendiri septi it
    3. tambahkan di menu <div id="menu">, seperti ini dan lihat hasilnya 
    
 <div id="menu">
    <ul>
     <li><a link href="#">Home</a></li>
        <li><a link href="#">Menu 1</a></li>
        <li><a link href="#">Menu 2</a></li>
        <li><a link href="#">Menu lainnya</a></li>
        <li><a link href="#">About Use</a></li>
    </ul>
    </div>
    Sekarang kita tambah css agar lebih menarik
    jadi silakn tambahkan menu css di file css yg kalian buat seperti ini,buat background menu menjadi hitam 
    
#menu{
 width:900px;
 height:50px;
 clear:both;
 background:#000; /*penambahan background ya, sebelumhnya belum di isi*/
}
    sekarang tentukan lebar menunya 
    
#menu ul li{
 display:inline;
 float:left;
 height:40px;
 width:15%;
 list-style:none; /*menghilangkan tanda titik hitam di depan value menu */
}
    bingung darimana saya dapat #menu ul li itu..? jadi magsudnya adalah semua yg berkode li ul ada di elemen DIV ber ID=menu
    sekarang paste juga kode ini dan lihat hasilnya, kalian hilangkan 1 persatu nanti dan lihat perubahan apa terjadi agar mengerti fungsi dari setiap kode yg saya buat 
    

#menu ul li a{
  text-decoration:none; /*menghilangkan garis bawah */
  color:#fff;  
  padding:13%;
}
#menu ul li a:hover{ 
/*agar saat cursor diatas menu kita akan memberi perubahan warna yg berbeda */
  text-decoration:none;
  color:#fff;  
  padding:13%;
  background:#fff;
  color:#000;
}
    kunci terakhir agar menu kalian bisa bagus adalah tambahkan kode Display:block di #menu ul li a dan di #menu ul li a:hover
    jika benar akan hasilnya seperti ini ,klink link ini Hasilnya
    ini yg lihat jika dari mobile, belum mobile frendly ya, nanti akan saya posting bagaimana
    caraya membuat website yg user frendly dan pastinya responsive dengan layar anda.. terimaksih, Baca Sebelumnya
Read More
Bonbon No comments:
Labels:
Subscribe to: Posts (Atom)