Chyul's Zone: Modul 4 Praktikum dan Studi Kasus

Praktikum

prak.css

body{<br /> margin : 10px auto;<br /> width : 900px;<br /> }<br /> <br /> header, logo, te, nav, search, box, section, pict, article, event, footer{<br /> display : block;<br /> }<br /> <br /> header{<br /> height: 90px;<br /> width: auto;<br /> background-image : url(header.jpg);<br /> }<br /> <br /> logo{<br /> float : left;<br /> margin-left : 30px;<br /> height : 90px;<br /> width : 90px;<br /> background-image : url(um2.png);<br /> }<br /> <br /> te{<br /> padding: 30px;<br /> font-family : TIMES NEW ROMAN;<br /> font-weight: bold;<br /> font-size : 32px; <br /> color : white;<br /> }<br /> <br /> nav{<br /> width: 900px;<br /> height: 40px;<br /> background-color : #bbdefb;<br /> color : #459dff;<br /> font-family: TIMES NEW ROMAN;<br /> }<br /> <br /> search{<br /> float : left;<br /> margin-top: 2px;<br /> margin-left : 20px;<br /> width : 50px;<br /> height: 20px;<br /> }<br /> <br /> box{<br /> margin-top: 2px;<br /> float: left;<br /> width: 150px;<br /> height: 20px;<br /> border: 1px solid black;<br /> }<br /> <br /> home{<br /> margin-top: 2px;<br /> margin-left: 270px;<br /> float: left;<br /> width: 40px;<br /> height: 20px;<br /> text-align : center ;<br /> background-color:#5753fa;<br /> color:#ffffff;<br /> }<br /> <br /> news{<br /> margin-top: 2px;<br /> margin-left: 5px;<br /> float: left;<br /> width: 110px;<br /> height: 20px;<br /> text-align :  center ;<br /> background-color:#5753fa;<br /> color:#ffffff;<br /> }<br /> <br /> tutor{<br /> margin-top: 2px;<br /> margin-left: 5px;<br /> float: left;<br /> width: 60px;<br /> height: 20px;<br /> text-align :  center ;<br /> background-color:#5753fa;<br /> color:#ffffff;<br /> }<br /> <br /> tips{<br /> margin-top: 2px;<br /> margin-left: 5px;<br /> float: left;<br /> width: 90px;<br /> height: 20px;<br /> text-align :  center ;<br /> background-color:#5753fa;<br /> color:#ffffff;<br /> }<br /> <br /> down{<br /> margin-top: 2px;<br /> margin-left: 5px;<br /> float: left;<br /> width: 75px;<br /> height: 20px;<br /> text-align :  center ;<br /> background-color:#5753fa;<br /> color:#ffffff;<br /> }<br /> <br /> section{<br /> width : 900px;<br /> height : 450px;<br /> background-color : #bbdefb;<br /> }<br /> <br /> pict{<br /> float: left;<br /> margin-right: 10px;<br /> width: 325px;<br /> height: 450px;<br /> background-image : url(kimi.jpg);<br /> }<br /> <br /> article{<br /> margin-left: 300px;<br /> width: 590px;<br /> height: 325px;<br /> background-color : #ffffff;<br /> font-family : Arial Unicode MS<br /> }<br /> <br /> event{<br /> font-family : TIMES NEW ROMAN ;<br /> font-size : 12px;<br /> font-weight: bold;<br /> color : #459dff;<br /> margin-left: 300px;<br /> width: 590px;<br /> height: 125px;<br /> background-color : #bbdefb;<br /> }<br /> <br /> footer{<br /> clear : both;<br /> height : 30px;<br /> background-image : url(footer.jpg);<br /> text-align : center;<br /> font-weight: bold;<br /> font-family: TIMES NEW ROMAN;<br /> color: white;<br /> font-size: 12px;<br /> }

prak.html

<!Doctype HTML><br /> <html lang="en"><br /> <br /> <HEAD><br /> <TITLE>Desain Layout Halaman Web</TITLE><br /> <link rel="stylesheet" href="prak.css" type="text/css" /><br /> </HEAD><br /> <br /> <BODY><br /> <br /> <HEADER><br /> <LOGO></LOGO><br /> <TE>TEKNIK ELEKTRO</TE><br /> </HEADER><br /> <NAV><SEARCH>Search</SEARCH><BOX><br /> <INPUT type="text" size="20" /><br /> </BOX><br /> <home>Home</home><br /> <news>News & Media</news><br /> <tutor>Tutorials</tutor><br /> <tips>Tips & Tricks</tips><br /> <down>Downloads</down><br /> </NAV><br /> <br /> <SECTION><br /> <PICT></PICT><br /> <ARTICLE><br /> Chen Shui-bian (Hanzi: ???, Pinyin: Chén Shuibian lahir 18 Februari 1951; umur 59 tahun) adalah Presiden Republik Cina sejak tahun 2000. Chen Shui-bian lahir di Desa Hsi-chuang, Kecamatan Kuan-tien, Kabupaten Tainan, Taiwan. Dusun tersebut dihuni hanya beberapa ratus keluarga yang memiliki mata pencaharian utama sebagai petani.<br /> <BR><BR><br /> Nama yang disandangnya merupakan nama tradisional Taiwan. Chen Shui-bian adalah anak pertama dari pasangan Chen Sung-ken (ayah) dan Chen Le-chen (ibu). Ia tiga bersaudara. Namanya sendiri mengacu pada arti 'batang bambu' yang biasa digunakan oleh para petani miskin untuk mengangkat dua ember air di ujungnya. Secara harfiah, karakter shui berarti 'air' dan bian berarti 'datar'.<br /> </ARTICLE><br /> <EVENT><br /> <BR><br /> <B> EVENTS :</B><br /> <ul><li><a href="#">Kiminitodoke 1st Season</a></li> <li><a href="#">Kiminitodoke 2nd Season</a></li> <li><a href="#">Kiminitodoke Behind The Scene</a></li> <li><a href="#">Kiminitodoke Live Action Movie</a></li> </ul></EVENT><br /> </SECTION><br /> <FOOTER><br /> Home | News & Media | Tutorial | Tips & Tricks | Download<br /> </br>© Zulfa<br /> </FOOTER><br /> </BODY><br /> </HTML>

printscreen

studikasusku.css

/*#wrapper{<br />  margin : auto;<br />  width : 750px;<br />  border : 1px solid red;<br /> }*/<br /> <br /> body{<br /> margin : 10px auto;<br /> width : 1000px;<br /> border : 1px solid green ;<br /> }<br /> <br /> #header {<br />  height : 80px;<br />  border : 1px solid green;<br /> }<br /> <br /> #nav{<br />  height : 30px;<br />  border : 1px solid blue;<br /> }<br /> <br /> /*#inner{<br />  float : left;<br />  margin : 5px 0;<br />  border : 1px solid red;<br /> }*/<br /> <br /> #section{<br />  height : 340px;<br />  border : 1px solid red;<br />  padding : 30px;<br /> }<br /> <br /> #sidebar{<br />  float : left;<br />  margin-left : 20px;<br />  margin-right : 30px;<br />  width : 600px;<br />  height : 330px;<br />  border : 1px dashed red;<br /> }<br /> <br /> #aside{<br />  float : left;<br />  margin-left : 15px;<br />  width : 250px;<br />  height : 330px;<br />  border : 1px dashed green;<br /> }<br /> <br /> #footer{<br />  clear : both;<br />  height : 30px;<br />  border : 1px solid green;<br /> }

studikasusku.html

<!DOCTYPE HTML><br /> <html lang='en'><br /> <br /> <head><br /> <title>Desain Layout Sederhana</title><br /> <link rel="stylesheet" href ="studikasusku.css" type="text/css"/><br /> <br /> </head><br /> <br /> <body><br /> <br /> <!--<div id="wrapper">--><br /> <br /> <div id="header">Header<br /> </div><br /> <div id="nav">Nav<br /> </div><br /> <div id="section"><br /> <!--<div id="inner">--><br /> <br /> <div id="sidebar">Sidebar<br /> </div><br /> <div id="aside">Aside<br /> </div>Section<br /> </div><br /> <div id="footer">Footer<br /> </div></div></div></body><br /> </html>

screenshot