Membuat Website Biodata Pribadi Menggunakan HTML Dan CSS Part 2

B. Membuat Header Menggunakan Gambar dan Text

Tutorial sebelumnya yaitu Membuat Layout Pada Website Pribadi Menggunakan HTML dan CSS , nah sekarang adalah bagaimana kita membuat sebuah header menggunakan gambar dan text , tentunya dengan memberikan style-style pada css.

Tambahkan tag image dan font pada blok div untuk header, jangan lupa untuk meletakan file gambar pada satu folder dengan file websitennya, agar mempermudah pemanggilan.

<div id="header">
  <img src="image/header.jpg">
   <font>
   Biografi Teman-Teman
   </font>
   <font>
   <br/>Adalah situs pribadi untuk menyimpan biografi teman-teman terdekat
   </font>
</div>

Maka akan tampil seperti gambar di bawah ini ,

Karena masih berantakan , disinilah fungsi kode-kode css dapat bekerja. Pada file style.css, tambahlah code seperti berikut ini , * juga bisa mereplace kode sebelumnya.

body {
 margin: 0;
}
#header {
 height: 150px;
 width: 100%;
 background-color: #f75b5b;
}
.header-font {
 font-family: fantasy;
 font-size: 90px;
 color: #fff;
}
.header-font-br {
 font-size: 20px;
 font-family: cursive;
 color: #fff;
}
.header-image  {
 width: 240px;
   height: 120px;
   float: left; 
   border-radius: 25px;
   box-shadow: #fff 0px 0px 20px 5px;
   margin-top: 13px;
   margin-left: 12px;
   margin-right: 20px;
}

Kembali pada file index.html , tambahkan tag class untuk memanggil fungsi class pada style.css. Maka pada file index.html untuk bagian header akan menjadi seperti ini ,

<div id="header">
  <img src="image/header.jpg" class="header-image">
   <font class="header-font">
   Biografi Teman-Teman
   </font>
   <font class="header-font-br">
   <br/>Adalah situs pribadi untuk menyimpan biografi teman-teman terdekat
   </font>
</div>

Lihat hasil pada browser ,

Tidak hanya sampai disitu , anda juga bisa mengkostum gaya pada font nya , bisa memberikan border, warna atau menggunakan jenis font lain. Untuk tutorial selanjutnya yaitu Membuat Menu Vertikal Dengan CSS.