Membuat Website Sederhana

Haaiii.. Ogenkidesuka minna??
Semoga semuanya sehat dan baik-baik aja yaa..
setelah sekian lama ga nulis blog lagi, akhirnya gua memutuskan buat nulis lagi..

Dari tahun kemaren, gua nulis blog cuma buat sekedar iseng karna ga ada kerjaan.. dan tahun ini gua memutuskan nulis blog buat ngasi sedikit ilmu tentang "Website". Gua gak jago-jago banget si di bidang ini, cuma bisa HTML sama CSS aja.. tapi ya lumayan ilmunya buat kalian yang mau belajar web dari dasar.

Dalam Membuat Website Sederhana, kita juga hanya butuh aplikasi yang sederhana pula. Cukup Install Notepad ++ di Laptop / PC kalian, sudah bisa membuat sebuah Website Sederhana yang kalian inginkan. Ohiya, kalo bisa Notepad ++ nya yang versi lama yaa, biar bisa ngapalin codingnya sekalian. Karna kalo yang versi terbaru terlalu banyak coding bantuannya.

Udah donlod Notepadnya? Yuk, langsung coba kita Membuat Website Sederhana nya.

Dalam Membuat Website Sederhana kita bisa hanya menggunakan HTML dan CSS saja.
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman website, dan CSS disini berfungsi untuk menghias dan mengatur gaya tampilan website yang akan kita buat.

Kode CSS dan HTML bisa berada dipage yang berbeda, tapi disini gua bahas yang kode CSSnya berada satu page dengan HTMLnya supaya kalian bisa cepat paham.

Website biasanya terdiri dari 3 tag yaitu header, content dan footer. Nah, dalam Membuat Website, kalian harus membayangkan dahulu ingin membuat desainnya seperti apa. Seperti halnya kalian ingin membuat rumah, pastinya kalian harus punya desain / gambarannya terlebih dahulu agar mempermudah pembangunan rumah tersebut.

Disini gua kasi contoh kaya ini :

Sebelum mulai, gua kasi penjelasan dikit.. disini antara code HTML dan CSS saling berhubungan.

HTML harus dimulai dengan mengunakan tag < >, contoh :

<div id="logo"> </div> 

Ini disebut dengan tag div. "Id" berfungsi sebagai selector dan "logo" adalah nama variabel yang di select, setiap tag harus diakhiri dengan tag penutup  </div>

Ada dua jenis selector dalam HTML yaitu selector Id dan selector Class. Fungsinya sama saja, tapi biasanya <div id> hanya digunakan untuk tag yang bersifat khusus. sedangkan <div class> dapat digunakan berulang dalam satu page website.

Beda selector, beda pula inisialisasinya di CSS. Selector Id di inisialisasi dengan tanda pagar (#) sedangkan selector Class di inisialisasi dengan tanda titik (.), contoh :

<div id="logo"> </div> dalam CSSnya menjadi #logo

<div class="logo"> </div> dalam CSSnya menjadi .logo

Nah, sekarang kita coba buat websitenya.  

Pertama, buat satu folder bernama belajar, lalu didalam folder belajar buat sebuah folder lagi bernama Images ( untuk menyimpan gambar ). Lalu buka Notepad ++ kalian, dan mulailah menulis codenya.

Semua code dibawah, bisa kalian copas, lalu simpan file notepad didalam folder belajar dan namai index.html

<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> 

<style>

body {

width:100%;  /* untuk mendefinisikan lebar website keseluruhan*/

height:auto;   /* untuk mendefinisikan tinggi website*/

margin:auto;  /* dapat berfungsi sebagai jarak, bila diisi dengan auto; agar posisi web berada ditengah/rata; */

font-family: 'Titillium Web', sans-serif;   /* jenis font yang dipakai */

font-size: 15px;   /* ukuran font */

}

p {                 /* mengatur tampilan paragrap */

line-height:28px;   /* untuk mengatur tinggi paragraf*/

}

#header {     /* mengatur tampilan header*/

margin:auto;

background:#fff;   /* agar background header berwarna putih*/

padding-top:10px;   /* memberi jarak ke atas 10px*/

padding-bottom:10px;  /* memberi jarak ke bawah 10px*/

}

.batas {     /* mengatur tampilan batas*/

width:1200px;     /* lebar tag batas 1200px */

margin:auto; 

height:auto;

overflow:hidden;

}

.logo {     /* mengatur tampilan logo*/

float:left;     /* agar posisi logo berada di kiri*/

}

.logo img {

width:100px;     /* untuk menentukan lebar gambar logo*/

}

.menu {     /* mengatur tampilan menu*/

float:right;    /* agar posisi menu berada di kanan */

}

.menu ul {      /* mengatur tampilan list /  menu */

list-style-type:none;  

}

.menu li{    /* mengatur tampilan list item */

display:inline-block;   /* mengatur list menu menyamping */

}

.menu li a {    /* mengatur tampilan list item per item*/

padding-right:30px;  /* memberi jarak ke kanan 30px*/

padding-left:30px;  /* memberi jarak ke kiri 30px*/

line-height:50px;  /* untuk mengatur tinggi menu per item*/

color:#000;   /* untuk mengatur warna tulisan pada menu*/ 

}

#content {

margin:auto;

background: #ddd;   /* agar background content menjadi abu2 */ 

}

.gambar {

width:100%;   

}

.gambar img {

width:100%;       /* agar gambar full sreen*/ 

} 

#footer {

margin:auto;

}

</style>

<div id="all">

 <div id="header">      <!-- tag untuk header -->

   <div class="batas">         <!-- tag untuk batas -->

     <div class="logo">     <!-- tag untuk logo -->

       <img src="Images/logo.png" />   <!-- tag untuk memanggil gambar-->

     </div>   <!-- tag penutup logo-->

  

     <div class="menu">  <!-- tag untuk menu-->

        <ul>      <!-- ul= Unorder List untuk membuat list -->

           <li><a href="home.html">Home</a></li>    <!-- li= List item untuk isi dari unorder list -->

           <li><a href="about.html">About</a></li>

           <li><a href="contact.html">Contact</a></li>

        </ul>

     </div>  <!-- tag penutup menu-->

   </div>    <!-- tag penutup batas-->

 </div>      <!-- tag penutup header-->

 <div id="content">

    <div class="gambar">

      <img src="Images/sd1.jpg" />

    </div>

 

  <div class="batas">

      <p>Here at Box And Pack Packaging Supplies Newcastle, we’re an established business that produces highly functional products for various purposes. We do our part for the environment by using consumer compositable materials; we continue to exceed expectations by maintaining the highest of standards. </p>

   

    <p>Our goal is to ensure that shifting isn’t stressful, as our practices are reviewed by our team leaders to guarantee our clients receive the best care.</p>

  </div>
</div>

 <div id="footer">

    <div class="batas">

       <p>©2017 Jakarta - Dee Wataru</p>

    </div>

 </div>

</div>

hasil outputnya. ini gua jadiin kecil, biar keliatan semua elemen yang udah dibuat tadi.

Coba pahami setiap code, dan coba rubah2 code yang ada supaya kalian cepet paham.

Nb:
- Di paling atas ada code
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">

Ini untuk link yang diambil dari google font agar tampilan font pada web lebih rapih ( https://fonts.google.com/ )

-  ada kode /* bla bla bla */ dan <!-- bla bla bla --> itu adalah kode komentar, jadi tidak akan dieksekusi dalam page HTMLnya,


Yup, mungkin itu dulu belajar Membuat Website Sederhana nya. kalo ada yang kurang paham boleh tanya2 yak.

Dan sori banget kalo tulisan gua sulit untuk dimengerti, karna gua emang ga begitu bisa nulis, tapi disini gua berusaha buat menjelsakan sedetail mungkin. Semoga bermanfaat buat kalian yang mau bikin website sendiri..

Semoga ada yang baca.. hahahaha
Sankyu minna.. :D