Cara menggunakan biodata html sublime text

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.

Cara menggunakan biodata html sublime text

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.

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 ,

Tutorial selanjutnya yaitu Membuat Header Menggunakan Gambar atau Text.

Membuat Form Biodata Dengan HTML Dan CSS

Cara menggunakan biodata html sublime text
Yayan

Cara menggunakan biodata html sublime text

Blogger@- Sebelum membuat form biodata sebaiknya anda memerlukan software text editor seperti Notepad ++, Sublime Text, Maupun aplikasi editor lainnya. Atau anda bisa sedot aplikasinya di link bawah ini.

Baca Juga : Download Notepad++

Baca Juga : Download Sublime Text 3

Script Html

 
Save dengan nama biodata.html.

Tampilan Css/Style



Simpan dengan biodata.Css

Atau langsung saja download scriptnya di link bawah ini. 

Link Download