Pada tutorial ini akan di bahas bagaimana membuat sebuah halaman website yang tampilannya lebih menarik yaitu dari segi layout di antaranya memiliki bagian header, menu navigasi, content, sidebar, dan bagian foter. Pada dasarnya untuk mengatur tampilan tersebut agar membentuk beberapa bagian yang sudah di sebutkan tadi, maka di butuhkan sebuah file untuk mengaturnya sehingga bisa tampil lebih menarik. File yang di maksud untuk mengatur tampilan dan tata letak tersebut yaitu file CSS (Cascading Style Sheet) yang pada dasarnya memang CSS di gunakan untuk penyempurna untuk mengatur layout dan tampilan sebuah halaman website.
Pada tutorial yang penulis tuangkan dalam artikel ini pada dasarnya tidak semua script tersebut di susun dari nol. Akan tetapi, di ambil dari beberapa reperensi yang di download dari internet yang di gabungkan dan di sesuaikan sehingga bisa membentuk sebuah halaman seperti penulis buat. Adapun tambahan lainnya pada tampilan tersebut yaitu penambahan pada menu dalam bentuk dropdown.
Adapun hal-hal yang harus anda perhatikan dalam tutorial ini bahwa file yang di butuhkan ada dua jenis yaitu file HTML dan file CSS. Yang menjadi pertanyaan kenapa harus ada dua file yang kita butuhkan, jawabannya adalah karena pada pembuatan file css kita menggunakan CSS Eksternal yang berarti file CSS di buat secara terpisah atau di rancang dengan file tersendiri. Namun demikian file tersebut pada dasarnya tergabung dengan file HTML.
Untuk lebih jelasnya agar anda tidak bingun bagaimana hasil dari tampilan akhir dari halaman web yang di maksud maka ikuti langkah-langkah berikut. Untuk langkah awal anda buat sebuah file seperti di script di bawah ini yang di ketik atau copy script di bawah ini lalu paste di notepad biasa atau menggunakan notepad++ dan selanjutnya anda simpan dengan nama file Style dengan type file yaitu CSS. Jika anda menggunakan notepad biasa maka ubah pada save as type menjadi All Files lalu ketikkan nama filenya yaitu style.css lalu simpan dalam sebuah folder.
*{
margin:0;padding:0;
}
body{
background:black;
font-family: georgia;
margin-top:40px;
}
p{
padding:20px;line-height:30px;text-align:justify;
}
a{
color:black;text-decoration:none
}
#wrapper{
width:1060px;
margin:auto;
background: white;
box-shadow:0px 0px 0px 2px #62830a;
}
.clear{clear:both;}
#header{
background:#9acf11;
padding:20px;
}
#header:hover{
background:#9acf11;
padding:20px;
}
#navigation ul {list-style:none;background:#62830a;
list-style:none;
background-image:-webkit-linear-gradient(top,#EBEBEB,#D7D7D7);
background-color:#EBEBEB;
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
#navigation ul:after{
content:" ";
display:block;
clear:both;
}
#navigation ul li{
float:left;padding:10px;border-right:1px solid #384b06;
float:left;
position:relative;
}
#naviation ul li a{
color:#111;
display:block;
font-size:12px;
padding:3px 20px;
text-decoration:none;
}
#navigation ul ul li{
float:none;
}
#navigation ul ul{
position:absolute;
top:100%;
display:none; /* sembunyikan sub menu */
}
#navigation ul li:hover{
background-color:#506def;
display:block;
}
#navigation ul li:hover > ul{background-image:-webkit-linear-gradient(top, #506def,#2041DE);
background-color:#506def;
display:block;
}
#navigation ul li:hover >a, navigation ul ul li:hover > a {
color :white;
background-image:-webkit-linear-gradient(top, #506def,#2041DE);
background-color:#506def;
}
#navigation ul ul ul{
position:absolute;
left:100%;
top:0;
}
#content {
float:left;
width:700px;
box-shadow:3px 0px 0px 0px #62830a;
}
#sidebar{
float:right;width:360px;
height:330px;}
#footer{
background:#62830a;
}
Setelah anda buat file style.css langkah selanjutnya adalah buat file HTML dengan mengetik atau copy script di bawah ini lalu pastekan seperti langkah pembuatan file CSS lalu simpan dengan nama file sesuai yang anda inginkan dengan type file HTML. Jika anda menggunakan notepad maka langkahnya hamper sama dengan pembuatan file CSS yang berbeda hanya nama file dan type filenya saja, akan tetapi jika anda menggunakan notepad++ maka langsung saja ketik nama filenya dan save as typenya cari Hypertext Markup Language (HTML) dan simpan dalam satu folder dengan file CSS yang anda telah buat. Pada artikel ini penulis memberikan nama file yaitu index.html.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Blog Haris Larva</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="http://www.haris-larva.blogspot.com" title="">Blog Haris Larva</a></h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<p>
Website merupakan sekumpulan halaman-halaman yang berisi informasi - informasi yang saling berkaitan antara satu
sama lain yang tersimpan dalam hosting yang di akses melalui jaringan internet.</p>
<p>Jenis-jenis Website di bedakan menjadi beberapa macam yaitu : Website Statis, Website Dinamis, dan Website Interaktif.</p>
<p> Yang dimaksud dengan website statis adalah website yang tidak selalu berubah isi atau content pada website tersebut dan hanya admin yang bisa mengubahnya.</p>
</div>
<div id="sidebar">
<p>Informasi Admin : Nama saya Aris Susanto, saya adalah mahasiswa STMIK Bina Bangsa Kendari dan mengambil jurusan Sistem Informasi</p>
</div>
<div class="clear"></div>
<div id="footer">
<p>
copyright � 2014 by <a href="http://www.haris-larva.blogspot.com" rel="dofollow">haris-larva.blogspot.com</a>
</p>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Semoga artikel ini dapat bermanfaat dan memberikan pengetahuan tentang membuat halaman website yang layout dan tampilannya di atur melalui sebuah file CSS (Cascading Style Sheet)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
