Assalamualaikum wr.wb. Mari kita lanjutkan belajar web, hehehe….
Untuk kali ini kita akan belajar membuat DESAIN WEB sederhana menggunakan CSS, sebelum kita memulai pada script terlebih dahulu saya akan bahas sedikit tentang CSS,,,,,,,,,,,
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.
CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Disarankan kita menggunakan cara External Style Sheet karena lebih mudah untuk mengelolanya.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. CSS adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga digunakan membuat style baru yang biasa disebut class.
CSS dapat digunakan untuk menggantikan , , dan , dikarenakan hal berikut:sebuah file css dapat menjadi rujukan banyak halaman HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan meminimalkan file2 HTML yang akan dibuat. Jika ingin mengubah tampilan website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya.
CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna background, border, shadow, yang berbeda pada masing-masing tag yang digunakan. Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan masing2), dan sebuah web browser tentunya.
Penggunaan css yang langsung dimasukkan ke dalam file HTML, biasa disebut inline style sheet. Ada juga css yang diletakkan diluar file html, dan untuk menggunakannya, css tersebut akan dipanggil melalu 1 baris kode.
- · rel=”stylesheet” digunakan untuk memberi tahu browser bahwa file yang di “link” kan adalah file css.
- · type=”text/css” menginformasikan kepada browser bahwa tipe dari file yang di “link” adalah text dan mengandung css didalamnya.
- · href=”style1.css” memberitahukan pada browser bahwa file yang akan diload adalah style.css
Tag HTML yang digunakan untuk membuat menu adalah . Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah
. Selain tag li, kita juga akan mendesain tag dan tag CoolText merupakan sebuat class pada css. Keistimewaan class adalah dapat menyusun tampilan banyak tag. Kita ambil contoh penggunaan .CoolText.
Format penulisan class secara umum:
.[Class Name]
{
[Attribute]: [Value];
[Attribute]: [Value];
[Attribute]: [Value];
}
Aturan penulisan nama class, adalah alphanumeric. Jadi boleh saja jika kita ingin menulis nama class dengan perpaduan angka dan huruf, misalnya: BigGoldWriting99
[Attribute], berisi tag atribut yang akan diganti pada penggunaan class. Dapat berupa font-family, color, border, dll.
[Value] berisi nilai perubahan yang diinginkan pada masing-masing atribut.
Sekarang kita masuk pada aplikasinya….
Seperti biasa buka editor teks/notepad++ setelah itu ketikkan kode css berikut:
#wrapper
{ margin:auto;
width:980px;
border:2px solid white;
}
#header
{ height:80px;
border:1px solid orange;
}
#inner
{ float:left;
margin:5px 0;
border:1px solid white;
}
#footer
{ clear:both;
height:50px;
border:1px solid purple;
}
#sidebar
{ float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid blue;
}
#content
{ float:left;
width:760px;
height:400px;
border:1px solid white;
}
#content-top
{ clear:both;
margin:auto;
width:760px;
height:120px;
border:1px solid red;
}
#content-main
{ float:left;
margin:auto;
width:480px;
height:260px;
border:1px solid green;
}
#content-right
{ float:right;
margin:auto;
width:260px;
height:270px;
border: 1px solid yellow;
}
Kemudian save dengan nama mystyle2.css
Selanjutnya kita ketik kode html nya ....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Desain1</title>
<link type="text/css" rel="stylesheet" href="mystyle2.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Selanjutnya simpan kode-kode html tersebut dengan nama Desain1.html dan letakkan pada direktori C:\wamp\www\
Untuk mengetahui hasil dari dokumen html yang kita buat, seperti tutorial sebelumnya yaitu buka Wampserver kemudian buka Localhost. Panggil dokumen html tersebut dengan memanggil tempat dan nama html nya, seperti http://localhost/Modul3/Desain1.html dan hasilnya seperti gambar di bawah :
Html di atas masih desain layout halaman web, berikut akan saya tampilkan desai halaman web nya……..
Berikut kode css nya...
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.85em/150% Century; }
#wrapper {
margin:auto;
width:980px;
}
#header {
height:80px;
margin:0px auto;
background:#006600;
}
#header-content{
height:70px;
margin:auto;
background:#66CC00 url(bg_top.gif);
}
#menu-top {
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}
#logo {
float:left;
margin:10px 10px 10px 50px;
height:50px;
}
#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'Century';
font-weight: bold;
}
#search {
clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;
}
#inner {
float:left;
margin:0px;
}
#footer {
clear:both;
height:60px;
background:#66CC00;
}
#sidebar {
float:left;
width:200px;
height:400px;
background-color:#FFFF66
}
#content {
float:right;
width:780px;
height:400px;
background:#FFFFFF
}
#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(rektorat.jpg)
}
#content-main {
float:left;
margin:auto;
width:480px;
height:240px;
}
#content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
.style {font-size:x-small}
#content-main hr{
width:440px;
color:#FFF;
margin: 10px 20px 0px 20px;
}
#content-right {
float:right;
margin:10px auto;
width:260px;
border: 1px solid green;
background:#FFFF66
}
#content-right h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
#content-right ul{
padding: 10px 20px 20px 40px;
list-style:square;
}
#leftmenu ul {
width:200px;
list-style-type:none;
padding:0;
margin:0;}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px; text-decoration:none;}
#leftmenu a {
padding: 5px 0px 5px 15px;
display:block;
background:#6cae15 no-repeat left center;
margin: 0px 0px 1px;
color:#000000
}
#leftmenu a:hover {
background:#5e9711 no-repeat left center;
color:#FFFF99
}
Simpan dengan nama css2.css
dan di bawah ini adalah kode html nya…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Desain</title>
<link type="text/css" rel="stylesheet" href="css2.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="logoum.jpg" width="55"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Pendaftar Seleksi Beasiswa Bidik Misi UM Tembus 1500 Peserta</h3>
<hr />
<p class="style">
Minggu, 28 Februari 2010
<p>
Program perdana beasiswa pendidikan bagi mahasiswa dari keluarga tidak mampu yang berprestasi (Bidik Misi) mendapat sambutan antusias. Sejak Universitas Negeri Malang (UM) membuka pendaftaran pada tanggal 1 Februari 2010, tercatat sudah ada 1.500 pendaftar data sampai tanggal 2 Maret 2010.
Padahal jatah di UM untuk Bidik Misi hanya 450 calon mahasiswa. Mereka sudah memasukkan berkas data via online.
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Kunjungi Blog Elektro</a></li>
<li><a href="#">Pelatihan KORPS ASISTEN</a></li>
<li><a href="#">Seminar Nasional</a></li>
<li><a href="#">Software Aplikasi Pendidikan</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<h4 align="center"><blink><font color="#000000" face="century" size="2">ulfa-fauziah.blogspot.com</font></blink></h4>
<p><marquee><font color="#000000" face="century"><b>© 2010 Teknik Elektro UM. Malang, Indonesia </marquee></font></b></p>
</div>
</body>
</html>
Simpan kode-kode html tersebut dengan nama Desain.html kemudian panggil dokumen html tersebut dengan memanggil tempat dan nama html nya, seperti http://localhost/Modul3/Desain.html dan hasilnya seperti desain di bawah :
Sekian dari saya n semoga bermanfaat….
Dalam acara Microsoft TechEd 2009, Microsoft telah memberikan variasi produk, dan menurut 
