Desain WEB Menggunakan CSS
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
2. Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Dalam membuat desain web kita terkadang kesulitan dan bingung dalam mengisi atau membuat indah dan bagus suatu web. kali ini saya postingkan suatu contoh dalam membuat web secara sederhana dan mudah dipahami oleh para pembaca...web ini menggunakan CSS dalam mengisi dan menata web buatan sendiri secara atraktif, ini bisa dijadikan suatu dorongan dan juga inspirasi para pembaca untuk belajar pemrograman web dasar ini adalah gambar sederhana desain web menggunakan CSS style..silahkan mencoba...
Dibawah ini adalah source code .html dan .css dari gambar layout web diatas,
----------source code ( .html )----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tugas Praktikum 1 </title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="file_css.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
---------akhir script .html--------
copy code diatas kemudian buka program notepad.exe kemudian paste di program notepad tersebut. Simpan file dalam format html, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .html pada nama file contohnya namafile.html kemudian buka file tersebut melalui browser.
--------source code ( .css )---------
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#top{
float:left;
width:544px;
height:100px;
border:1px solid green;
}
#content {
float: left;
width: 320px;
height: 230px;
border: 1px solid yellow;
}
#right {
float:right;
width:200px;
height:150px;
border:1px solid pink;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
---------akhir script .css----------
copy code diatas kemudian buka program notepad.exe kemudian paste di program notepad tersebut. Simpan file dalam format css, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .css pada nama file contohnya namafile.css kemudian simpan dalam 1 folder dengan namafile.html, buka file tersebut melalui browser.
Setelah melihat desain layout yang sederhana diatas maka kita bisa mengisi layout tersebut agar lebih bagus dan atraktif, web ini sengaja diposting bagi para pembaca yang ingin belajar web dasar yang nantinya bisa anda kembangkan sendiri...CSS adalah desain style yang digunakan untuk memformat elemen-elemen HTML sehingga menjadi lebih atraktif. dibawah ini adalah hasil desain web yang menggunakan layout diatas yang sudah ada elemen-elemen HTML seperti border, link, list, text area, dan lain sebagainya.
----------source code ( .html )----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Tugas Praktikum 2 </title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="image/aa.jpg">
<div id="wrapper">
<div id="header">
<div id="menu">
<ul id="main">
<li><a href="index.html"> Home |</a></li>
<li><a href="#">Sitemap |</a></li>
<li><a href="#">RSS |</a></li>
<li><a href="contact.html">Contact |</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form></div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="image/btt.jpg"></h4>
</li>
<li><a href="profil.html">Profil Jurusan </a></li>
<li><a href="akademik.html">Akademik</a></li>
<li><a href="fasilitas.html">Fasilitas</a></li>
<li><a href="kerjasama.html">Kerjasama</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="news.html">News</a></li>
</ul>
</div>
</div>
<div id="top">
</div>
<div id="content"><marquee behavior="scroll">Welcome to " TEKNIK ELEKTRO"
</marquee>
<p> </p>
</div>
<div id="right">
<p>LInk Website:</p>
<ul>
<li>
ft.um.ac.id </li>
<li>www.um.ac.id</li>
</ul>
</div>
</div>
<div id="footer">
<div align="center">@copyright nue.com
</div>
</div>
</div>
</body>
</html>
---------akhir script .html--------
@uthor agus nuryanto
mail agus.nue48@gmail.com
--------source code ( .css )---------
#wrapper {
margin: auto;width: 750px;
background-color:#e0ebd5;
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-image:url(image/header.jpg);
background-repeat:no-repeat;
background-color:#e0ebd5;
}
/* Menu */
#menu {
width: 250px;
padding: 0;
height: 77px;
float:right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
margin-right: 2px;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#menu a:hover {
text-decoration: underline;
}
#inner {
float: left;
margin: 5px 0px 0px 0px;
background-color:#557aa4;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#94a0c5;
border: 1px;
}
h4{
margin: 0;
text-transform: uppercase;
letter-spacing: .15em;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
background: #183134 no-repeat left center;
}
#leftmenu ul {
width: 180px;list-style-type:none;
padding:0; margin:0;
font-size:13px
}
#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:#1a2032 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #326398 no-repeat left center; color: #ffffff
}
#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(image/top.jpg);
background-repeat:no-repeat;
border:1px solid green;
}
#content {
float: left;
width: 330px;
height: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px 5px 5px 10px;
background-color:#557aa4;
border: 1px;
}
#right {
float:right;
width:200px;
height:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 5px 0px 5px 0px;
padding: 10px 5px 5px 15px;
background-color:#94a0c5;
border:1px;
}
#search{
padding:30px 0 0 10px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#footer {
clear: both;
height: 50px;
margin: 0px 0px 0px 0px;
background-color:#1a2032;
font:Arial, Helvetica, sans-serif;
color:#FFFFFF;
border: 1px;
}/* CSS Document */
---------akhir script .css----------
Bila para pembaca berminat dalam mempelajari web sederhana ini, silahkan download tutorialnya berikut source code desain web menggunakan CSS yang lengkap disini: DesainWeb(CSS)
^_^ SELAMAT MENCOBA^_^
^_^ SELAMAT MENCOBA^_^
Tidak ada komentar:
Posting Komentar