LAYOUT

Membuat Tampilan WEB sederhana dengan menggunakan CSS internal

Pada kesempatan yang lalu,sebelumnya saya sudah Memposting tentang bagaimana cara membuat layout dengan menggunakan CSS, bagi sobat yang Belum sempat,Sobat Bisa baca artikelnya di sini.

Lanjut pada Topik,yaitu cara membuat tampilan web sederhana dengan menggunakan CSS.

Dimana kali ini saya masih menggunakan cara yang sama seperti pada postingan saya 1 bulan yang lalu,yaitu dengan membuat layout.Perbedaan layout kali ini dengan sebelumnya hanya pada tampilan di mana kali ini saya menambahkan tombol navigasi kemudian memiliki 2 buah sidebar kiri dan kanan

Dan sedikit tambahan buat sobat yang belum tau tentang apa itu layout.

Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif.

Untuk Lebih jelas nya, berikut adalah listing yang saya gunakan :

<html>
<head>
<title>CSS Portal - Layout</title>
<style>
body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 13px;color:#333}
p {padding: 10px;}
#wrapper {margin: 0 auto;width: 1000px;}
#headerwrap {width: 1000px;float: left;margin: 0 auto;}
#header {height: 75px;background: #FF6633;border-radius: 5px;border: 1px solid #eb521f;margin: 5px;}
#navigationwrap {width: 1000px;float: left;margin: 0 auto;}
#navigation {height: 40px;background: #;border-radius: 5px;border: 1px solid #;margin: -13px 0 0 -30px;}
#contentwrap {width: 700px;float: left;margin: 0 auto;}
#content {background: #FFFFFF;border-radius: 10px;border: 1px solid #ebebeb;margin:-5px 3px 3px 3px ;}
#leftcolumnwrap {width: 150px;float: left;margin: 0 auto;}
#leftcolumn {background: #33CCFF;border-radius: 2px;border: 1px solid #1fb8eb;margin: -5px 3px 3px 3px;}
#rightcolumnwrap {width: 150px;float: left;margin: 0 auto;}
#rightcolumn {background: #CC33FF;border-radius: 2px;border: 1px solid #b81feb;margin: -5px 3px 3px 3px;}
#footerwrap {width: 1000px;float: left;margin: 0 auto;clear: both;}
#footer{height: 40px;background: #33FF66;border-radius: 10px;border: 1px solid #1feb52;margin: 5px;} /*- Menu Tabs 6-- */
#tabs6 {font: bold 11px/1.5em Verdana;
float:left;width:100%;background:change-background;font-size:93%;line-height:normal;}
#tabs6 ul {margin:0;padding:10px 10px 0 50px;list-style:none;}
#tabs6 li {display:inline;margin:0;padding:0;}#tabs6 a {float:left;
background:url("https://lh3.googleusercontent.com/-aazUPNRYRMw/UREBYBL9wcI/AAAAAAAABWA/gstN_ZMk_s4/s84/tableft6.gif") no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}
#tabs6 a span {float:left;display:block;
background:url("https://lh5.googleusercontent.com/-Bu09G-p4QEY/UREBYhLxnRI/AAAAAAAABWI/N_ZWNP_hqgQ/s175/tabright6.gif") no-repeat right top;padding:5px 15px 4px 6px;color:#FFF;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs6 a span {float:none;}
/* End IE5-Mac hack */
#tabs6 a:hover span {color:#FFF;}
#tabs6 a:hover {background-position:0% -42px;}
#tabs6 a:hover span {background-position:100% -42px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<H1 align="center">JUDUL DI SINI</H1>
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<div id="tabs6">
<ul>
<li><a href="http://d-crow.blogspot.com/" title="D-Crow web developer"><span>D-Crow</span></a></li>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="http://d-crow.blogspot.com/" title="D-Crow web developer"><span>D-Crow</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
<li><a href="#" title="Link 7"><span>Link 8</span></a></li>
<li><a href="#" title="Link 7"><span>Link 9</span></a></li>
<li><a href="#" title="Link 7"><span>Link 10</span></a></li>
<li><a href="#" title="Link 7"><span>Link 11</span></a></li>
<li><a href="#" title="Link 7"><span>Link 12</span></a></li>
</ul></div></div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>Jquery merupakan salah satu pustaka javascirpt (JS) yang di bangun untuk mempercepat dan memperingkas serta menyederhanakan manipulasi dokumen HTML.penanganan even,animasi,dan interksi ajax untuk mempercepat pemgembangan web.Sebelum anda memperlajari jquery,anda harus mempunyai pengetahuan dasar tentang mengenai HTML,CSS dan javascript.</p>
</div></div>
<div id="contentwrap">
<div id="content">
<p>MAMPU MENGAKSES BAGIAN HALAMAN TERTENTU DENGAN MUDAH<br>
Tanpa adanya library js khusus untuk mengaksses bagian tertentu di halaman,anda harus mengikuti aturan document object model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML,dengan kata lain pengaksesan bagian tertentu dari halaman sangat tergantung pada sturuktur HTML.Jquery menawarkan cara yang mudah dalam mengakses bagian tertentu dari halaman.</p><br>
<img src="https://lh6.googleusercontent.com/-CJYnhonUgk4/UREBYGYIUGI/AAAAAAAABV8/W9M9uJ62eFc/s125/icon%2520feed.png" height="160" widdth="150"><br>
<p> MAMPU MENGUBAH TAMPILAN HALAMAN DI BAGIAN TERTENTU<br>
CSS menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web,namun CSS mempunyai kelemahan,yaitu beberapa perintah CSS tidak di dukung oleh semua browser,cukup merepotkan jika anda harus mendesain halaman dengan beberapa CSS sekaligus.Jquery menawarkan solusi untuk mengatasi hal tersebut.dengan Jquery kesenjangan yang terjadi antar Browser dalam urusan CSS akan dapat teratasi dengan baik. </p>
</div></div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>Jquery merupakan salah satu pustaka javascirpt (JS) yang di bangun untuk mempercepat dan memperingkas serta menyederhanakan manipulasi dokumen HTML.penanganan even,animasi,dan interksi ajax untuk mempercepat pemgembangan web.Sebelum anda memperlajari jquery,anda harus mempunyai pengetahuan dasar tentang mengenai HTML,CSS dan javascript.</p>
</div></div>
<div id="footerwrap">
<div id="footer">
<h3 align='center'><b>Support by: <a href="http://d-crow.blogspot.com/" style=" text-decoration:none">D-Crow Web-Developer </a></h3>
</div></div></div>
</body>
</html>

Catatan :
untuk yang berwarna merah di atas merupakan elemen di dalam CSS, bagi sobat yang Belum Jelas Atau ingin Lebih memperjelas tentang Tag-tag di dalam CSS sobat Bisa baca artikelnya di sini.

Untuk yang ingin Men-download Lisitng secara rinci di atas,Sobat Bisa Cek filenya di sini.
Dan untuk Melihat Contoh hasil dari Listing,Sobat Bisa lihat pada Gambar Di atas.semoga Tutor ini Bisa membantu,Atau bisa menjadi Bahan Referensi Belajar Anda.Terima kasih.

D-Crow

Cara Membuat Layout dengan CSS part II

LAYOUT

Membuat Tampilan WEB sederhana dengan menggunakan CSS internal

Tambahkan Komentar

15 komentar: