MASIGNASUKAv101
4551133496077351792

Membuat Website Biodata Pribadi Menggunakan HTML dan CSS Part 1

Membuat Website Biodata Pribadi Menggunakan HTML dan CSS Part 1
Add Comments
Thursday, 26 March 2015
A. Membuat Layout Pada Website Pribadi Menggunakan HTML dan CSS

Sebelum kita memulai membuat sebuah website, alangkah baiknnya kita telah mengerti beberapa tag HTML ataupun bentuk-bentuk style yang akan di gunakan dalam CSS. Untuk hal-hal tersebut anda bisa langsung belajar pada situs W3School. Karena saya disini akan langsung memberikan source code atau syntax-syntax yang akan menghasilkan sebuah Website Biodata.

Buatlah sebuah folder dimana anda akan meletakan file-file yang dibutuhkan dalam membuat website tersebut. Kemudian klik kanan dan pilih New > Text Document. Apabila file tersebut tidak melihatkan atau menampilkan ekstensi file , kita mesti mengaturnya terlebih dahulu. Pilih Organize pada menu bar di window (*pojok kiri dekat tombol back dan next), pilih Folder and Search Options > View > Hapus centang Hide Extensions for know file type > Ok . Kemudian rename lah file new text document.txt tadi mejadi index.html. Catatan , disini kita akan membuat website biodata pribadi menggunakan aplikasi Text Editor , kita dapat menggunakan Notepad , Notepad++, ataupun Sublime Text. *dapat di cari di google dan silahkan di download.

Gambar-1-Membuat-Website-Biodata-Pribadi-Menggunakan-HTML-dan-CSS

Apabila file index.html tadi bericon Google Chroom atau Firefox, silahkan klik kanan dan open with dengan aplikasi text editor yang anda punya. Pertama kita akan membuat layout, perhatikan syntax berikut ini.


<html>
<head>
 <title>Biodata Hady Eka Saputra</title>
</head>
<body>
 <div>
  Ini adalah Header
 </div>
 <div>
  Ini bagian kiri
 </div>
 <div>
  Ini bagian isi / kanan
  
 </div>
 <div>
  Ini Footer
 </div>
</body>
</html>
Maka setelah kita buka pakai browser akan tampil seperti ini.

Gambar-2-Membuat-Website-Biodata-Pribadi-Menggunakan-HTML-dan-CSS
Selanjutnya buatlah sebuah file baru lagi , dan beri nama dengan style.css. Ketikan kode berikut ,


#header {
 height: 100px;
 width: 100%;
 background-color: red;
}
#left {
 height: 100%;
 width: 20%;
 float: left;
 background-color: blue;
}
#right {
 height: 100%;
 width: 80%;
 float: right;
 background-color: green;
}
#footer {
 float: right;
 height: 20px;
 width: 100%;
 background-color: yellow;
}
Pada file index.html , tambah link untuk memanggil file style.css , lebih lengkapnya lihat code di bawah ,


<html>
<head>
 <title>Biodata Hady Eka Saputra</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="header">
  Ini adalah Header
 </div>
 <div id="left">
  Ini bagian kiri
 </div>
 <div id="right">
  Ini bagian isi / kanan
 </div>
 <div id="footer">
  Ini Footer
 </div>
</body>
</html>
Buka pakai browser, maka akan tampil seperti gambar dibawah ini ,

Gambar-3-Membuat-Website-Biodata-Pribadi-Menggunakan-HTML-dan-CSS

Tutorial selanjutnya yaitu Membuat Header Menggunakan Gambar atau Text.
Hady Eka Saputra

Belajarlah ketika orang lain sedang malas-malasan, dan malas-malasan lah ketika orang sudah mulai sadar untuk belajar. :v