BLANTERORBITv102

    Membuat Website Biodata Pribadi Menggunakan HTML dan CSS Part 1

    Kamis, 26 Maret 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.

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing