Cara membuat layout website menggunakan HTML+CSS
Dalam pembuatan website diperlukan sebuah desain awal dari web yang akan kita
buat sebagai sebuah dasar dari pembuatan web untuk mempermudah kita membuat
website secara kompleks .Desain awal yang saya maksud adalah sebuah kerangka
atau pun layout dari website yang akan kita buat tujuan dari pembuatan layout
terlebih dahulu adalah untuk membantu kita mendesain tata letak dari website
mulai dari nama webite ,logo/gambar,konten,menu,link,footer dll.
Untuk cara pembuatan layout website yang saya buat saya menggunakan aplikasi notepad++ untuk membuat script html dan css ,selain menggunakan notepad++ anda juga bisa menggunakan aplikasi lain seperti menggunakan dreamweaver versi apa saja,dan tentu saja untuk menampilkan website yang kita buat bisa menggunakan browser jenis apa saja. Pada pembuatan web menggunakan html dan juga css ini saya buat script html dan css nya terpisah yang mana script htmlnya diberi nama dengan ekstensi dot (.)html contoh: webgw.html ,dan cssnya dengan ekstensi dot (.) css contoh: style.css.sebnarnya Untuk menggunakan CSS, ada dua cara yang bisa dipakai, yaitu dengan cara memasukan langsung script CSS pada tag <style> di dalam tag <head>…</head>, atau bisa juga dengan mnggunakan link yang menghubungkan antara file HTML dengan file CSS.Berikut ini adalah contoh script yang memakai cara pertama:
Untuk cara pembuatan layout website yang saya buat saya menggunakan aplikasi notepad++ untuk membuat script html dan css ,selain menggunakan notepad++ anda juga bisa menggunakan aplikasi lain seperti menggunakan dreamweaver versi apa saja,dan tentu saja untuk menampilkan website yang kita buat bisa menggunakan browser jenis apa saja. Pada pembuatan web menggunakan html dan juga css ini saya buat script html dan css nya terpisah yang mana script htmlnya diberi nama dengan ekstensi dot (.)html contoh: webgw.html ,dan cssnya dengan ekstensi dot (.) css contoh: style.css.sebnarnya Untuk menggunakan CSS, ada dua cara yang bisa dipakai, yaitu dengan cara memasukan langsung script CSS pada tag <style> di dalam tag <head>…</head>, atau bisa juga dengan mnggunakan link yang menghubungkan antara file HTML dengan file CSS.Berikut ini adalah contoh script yang memakai cara pertama:
<head>
<title>Coba</title>
<style>
//script CSS
</style>
</head>
Lalu cara kedua :
<head>
<title>Coba</title>
<link type="text/css” rel="stylesheet”
href="css/style.css"
>
</head>
Sekarang kita mulai tutorial pembuatan
layoutnya,cekidot:
1.Pembuatan script HTML
Untuk memulainya silahkan masuk pada aplikasi notepad++ atau aplikasi pembuat
script html lainnya.pada script ini saya akan membuat sebuah script html yang
didalamnya terdapat sebuah perintah didalam tag < > yang akan terhubung
dengan script css.Scriptnya sebagai berikut:
<HTML>
<TITLE> Desain layout </TITLE>
<link type="text/css" rel="stylesheet" href="style.css">
<BODY>
<div id="wrapper" >WRAPPER
<div id="nama" > NAMA </div>
<div id="logo"> LOGO </div>
<div id="menu" > MENU </div>
<div id="kiri" > KIRI </div>
<div id="konten" > KONTEN </div>
<div id="kanan" > KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="bawah"> BAWAH </div>
</div>
</BODY>
</HTML>
<TITLE> Desain layout </TITLE>
<link type="text/css" rel="stylesheet" href="style.css">
<BODY>
<div id="wrapper" >WRAPPER
<div id="nama" > NAMA </div>
<div id="logo"> LOGO </div>
<div id="menu" > MENU </div>
<div id="kiri" > KIRI </div>
<div id="konten" > KONTEN </div>
<div id="kanan" > KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="bawah"> BAWAH </div>
</div>
</BODY>
</HTML>
jika anda sudah selesai memasukkan
script diatas maka langkah selanjutnya adalah menyimpan scriptnya dengan contoh
webgw.html.
untuk
penjelasan script sebagai berikut:
<
HTML> </HTML>
Digunakan untuk mendefinisikan bahwa script
didalam tag <HTML> hingga ditutup dengan </HTML> adalah sebuah root
dari suatu dokumen HTML.
<TITLE>
Desain layout </TITLE>
Sebuah tag
yang akan ditampilkan pada bagian atas web sebenarnya tag TITLE biasa
ditempatkan didalam tag <HEAD> namun karna didalam tag head ini hanya
terdapat tag TITLE yang dapat ditampilkan tanpa harus berada di dalam tag HEAD
maka saya menghilangkan tag HEAD nya
agar lebih simple.
<link
type="text/css" rel="stylesheet"
href="style.css">
tag ini yang
digunakan untuk menghubung dengan script html dengan css ,didalam tag
<link> ini memiliki attribut type text/css untuk mendefinisikan link css namun
tanpa perlu didefinisikan pun script akan tetap jalan lalu ada attribut rel,nah attribut ini yang
penting untuk memberi tahu program html bahwa link ini bertpe stylesheet atau
css,kemudian yang paling penting adalah attribut href yang akan menunjukan akan
terhubung dengan apa script html ini.
<body>
</body>
Ini adalah
tag yang paling penting atau inti dari web karena tag ini lah isi dari sebuah
web yang akan ditampilkan dilayar website.didalam tag body terdapat tag:
<div id="wrapper" >WRAPPER
<div id="nama" > NAMA </div>
<div id="logo"> LOGO </div>
<div id="menu" > MENU </div>
<div id="kiri" > KIRI </div>
<div id="konten" > KONTEN </div>
<div id="kanan" > KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="bawah"> BAWAH </div>
</div>
<div id="nama" > NAMA </div>
<div id="logo"> LOGO </div>
<div id="menu" > MENU </div>
<div id="kiri" > KIRI </div>
<div id="konten" > KONTEN </div>
<div id="kanan" > KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="kanan"> KANAN </div>
<div id="bawah"> BAWAH </div>
</div>
Tag div ini
digunakan sebagai section didalam dokumen html kemudian didalam tag div
semuanya saya buat attribut id untuk memisahkan perintah masing masing kode id
yang perintahnya terdapat pada script css.karena tag div dengan id wrapper merupakan tag div paling
awal dan tag penutupnya </div> berada paling belakang dari tag div lain
maka seluruh tag div didalamnya akan dipengaruhi oleh perintah pada tag div
dengan id wrapper.tujuan dari pembuatan tag div id wrapper adalah untuk menunjukan
batas dari posisi keseluruhan perintah didalamnya,untuk lebih jelasnya anda
bisa lihat outputnya yang mana tag div id wrapper ini didefinisikan dengan
warna hitam,silahkan anda pahami sendiri.
2.Pembuatan script CSS
Untuk memulainya maka silahkan anda buka tab baru untuk memasukkan
script cssnya. Pada css pendeklarasian untuk tag kita bisa langsung menuliskan
nama tagnya dan untuk pendeklarasian id ditandai dengan simbol # lalu nama idnya lalu dilanjutkan dengan tanda
kurung { } yang didalamnya merupakan perintah untuk tag tersebut ,untuk perintah pada css selalu diakhiri dengan tanda ; bentuk
umumnya seperti namaperintah:perintah; dicontohkan seperti background-color:gray;
.berikut keseluruhan script css nya:
body
{
background-color:gray;
font-size:20px;
text-align:center;
}
#wrapper
{
background-color:black;
width:990px;
}
#nama
{
margin-bottom:5px;
padding:15px;
background-color:green;}
#logo
{
font-size:35px;
margin-bottom:5px;
padding:40px;
height:80px;
background:red }
#menu
{
margin-bottom:5px;
padding:15px;
background-color:green;
}
#kiri
{
margin-right:5px;
margin-bottom:5px;
height:600px;
float:left;
width:180px;
background-color:blue;
}
#konten
{
font-size:28px;
margin-bottom:5px;
height:600px;
float:left;
background-color:orange;
}
#kanan
{
margin-left:5px;
margin-bottom:5px;
height:146px;
float:right;
width:180px;
background-color:blue;
}
#bawah{
margin-top:5px;
clear:both;
padding:15px;
height:50px;
background-color:chocolate;
}
Untuk
penjeleasan scriptnya sebagai berikut:
background-color:gray;
digunakan
untuk memberi warna background yang mana pada perintah diatas backgroundnya
berwarna gray atau abu-abu.
font-size:20px;
digunakan
untuk memberi unruan font atau huruf dengan nilai 2o pixel.
text-align:center;
digunakan
untuk menentukan posisi text center atau rata tengah.
width:990px;
digunakan
untuk mendefinisikan ukuran lebar dengan lebar 990 pixel.
margin-bottom:5px;
digunakan
untuk memberi jarak dengan section bawahnya denagn jarak 5 pixel.selain
margin-bottom ada margin-top,margin-right dan margin-left.
float:right;
digunakan
untuk mendefinisikan posisi dari section yaitu pada posisi kanan
height:600px;
digunakan
untuk mengatur panjangnya dengan panjang 600 pixel.
clear:both;
digunakan
untuk menonaktifkan float left dan right.
Lalu
jika sudah scriptnya harus disimpan dengan
nama style.css jika anda ingin membuat nama css yang berbeda silahkan
anda ganti link css pada script htmlnya dengan nama script css yang anda
inginkan.jika sudah coba masuk ke folder dimana anda meletakkan file
html lalu anda klik 2 kali script htmlnya dan lihat hasilnya akan
sebagai berikut:
