MAKALAH

MEMBUAT WEBSITE MENGGUNAKAN HTML & CSS

Disusun Oleh :
Mochamad Musafak (SKA 17.1)
STEKOM WELERI
2019
 Tutorial membuat website took online dengan menggunakan framework css Bootstrap 4

Alat – alat :

 Text Editor (Visual Studio Code)

 Bootstrap 4

Langkah – langkah :

1. Buka text editor, disini saya menggunakan Visual Studio Code

2. Buat 2 buah file yakni HTML dan CSS. Masing – masing beri nama beranda.html
(boleh index.html) & style.css. Simpan kedua file didalam folder “Bootstrap”.

3. Copy source code dibawah ini kedalam file beranda.html.

4. Di bagian tag head pada beranda.html, kita akan me-link-kan bootstrap kedalam file
html kita dengan cara ketik kode dibawah ini.
<link rel="stylesheet" href="css/bootstrap.min.css">

5. Selanjutnya di dalam tag body kita membuat “container” yang berfungsi debagai
penampung konten kita. Tulis kode dibawah :
<div class="container">

</div>
6. Didalam container kita akan membagi halaman web kita menjadi 4 kolom dengan
memanfaatkan grid system, masukkan kode dibawah ini :
<div class="row">
<div class="col-md-3">

</div>
</div>
7. Sesudah itu kita akan membuat tampilan web kita memanfaatkan fasilitas “cards”
yang ada pada bootstrap, masukkan kode dibawah ini :
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on
the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
 </div>
8. Karena diatas kita membagi halaman web kita menjadi 4 kolom, maka tinggal copy
saja kode tersebut sebanyak 4 x.
9. Untuk selanjutnya silahkan modifikasi tampilan web sesuka dan sekreatif Anda
sendiri, sebagai gambaran say ass kan tampilan took online saya sendiri dibawah ini :

10. Dan saya lampirkan kode css untuk mengatur ‘container’ agar seperti gambar diatas :
.container {
width: 30%;
margin-top: 2%;
margin-bottom: 10%;
box-shadow: 0 3px 20px;
padding: 40px;
background-color: gainsboro;
}

button {
width: 47%;
}

h4 {
color: crimson;
}

h5 {
padding-left: 10px;
}
11. Demikian tutorial sederhana membuat website took online menggunakan HTML dan
CSS.