Pembuatan Halaman Web Sederhana Kosongan Dengan CSS
NaHh, kawaNn jumpa lagi daHh,, makin rumit aja ini pembelajaran html kita..
heHheee,,
masalahnya kita harus combine script html kita dengan menggunakan CSS.
pada dasarnya ini semua masih pada program latihan saja..
sponsored by
heHheee,,
masalahnya kita harus combine script html kita dengan menggunakan CSS.
pada dasarnya ini semua masih pada program latihan saja..
sponsored by
aq sih pengen nampilin halaman seperti inini guyss,, jadi ntar kalian tinggal nginputin content, terserah dah mau diisi apa'an, sekaligus pengen kasih link event
terserah dehh, suka suka kalian ntar yang ngebuat nya.. hehe
nihh halaman nya guYyss..
bnernya sih tampilan diatas itu belum sesuai sama apa yg aq inginkan guyss, tapi ntar biar aq perbaikin lagiduludah,, g penting aq ingin ngeshare ilmunya dulu sama kalian kalu kita pengen mendisain halaman web dengan CSS.
petama,
buat script CSS nya kawaNn..
nih script nya guys..
body{
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/A.jpeg);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/c.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;body{
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/d.JPG);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/b.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/c.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(d.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(b.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(e.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/A.jpeg);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/c.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;body{
margin : 10px auto;
width : 900px;
}
header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/d.JPG);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/c.jpg);
}
te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/b.jpg);
}
nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}
home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}
home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}
news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}
tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}
tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/c.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(d.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
background-color : #bbdefb;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(b.jpg);
}
article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}
info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}
footer{
clear : both;
height : 35px;
background-image : url(e.JPG);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}
linkmenu a{
padding: 2px 0px 2px 5px; display: block;
margin: 0px 0px 1px; color: #ffffff;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}
list{
list-style-position: inside;
}
lalu kita panggil script di atas menggunakan script HTML sperti yg kita ketahui bersama guySs,,
dan ini untuk script HTML nya guyss..
<!Doctype HTML>
<html lang="en">
<HEAD>
<TITLE>Your Title</TITLE>
<link rel="stylesheet" href="rumah4.css" type="text/css" />
</HEAD>
<BODY>
<HEADER>
<LOGO></LOGO>
<TE>WEB DESIGN</TE>
</HEADER>
<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
<LINKMENU>
<HOME><a href="#">Home</a></HOME>
<NEWS><a href="#">News & Media</a></NEWS>
<TUTORIAL><a href="#">Tutorial</a></TUTORIAL>
<TIPS><a href="#">Tips & Trick</a></TIPS>
<DOWNLOAD><a href="#">Download</a></DOWNLOAD>
</LINKMENU>
</NAV>
<SECTION>
<PICT></PICT>
<ARTICLE>
Kamu dapat berkreasi sesuai dengan apa yg kalian mau pada halaman ini, seperti pada halaman web pada umumnya jadi kita menyediakan sebuah konten yg nantinya dapat kita gunakan untuk memberikan sebuah informasi bagi pengunjung.
</ARTICLE>
<INFO>Your_Information</INFO>
<EVENT><B>ELECTRO EVENT :</B>
<ul><li><a href="#">FUTSAL COMPETITION</a></li>
<li><a href="#"">ELEKTRO BAND</a></li>
<li><a href="#">LINE TRACER RoBOTIC</a></li>
<li><a href="#">WEB DESIGN</a></li>
</ul>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>© CopyRight andibayu 2011
</FOOTER>
</BODY>
</HTML>
<html lang="en">
<HEAD>
<TITLE>Your Title</TITLE>
<link rel="stylesheet" href="rumah4.css" type="text/css" />
</HEAD>
<BODY>
<HEADER>
<LOGO></LOGO>
<TE>WEB DESIGN</TE>
</HEADER>
<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
<LINKMENU>
<HOME><a href="#">Home</a></HOME>
<NEWS><a href="#">News & Media</a></NEWS>
<TUTORIAL><a href="#">Tutorial</a></TUTORIAL>
<TIPS><a href="#">Tips & Trick</a></TIPS>
<DOWNLOAD><a href="#">Download</a></DOWNLOAD>
</LINKMENU>
</NAV>
<SECTION>
<PICT></PICT>
<ARTICLE>
Kamu dapat berkreasi sesuai dengan apa yg kalian mau pada halaman ini, seperti pada halaman web pada umumnya jadi kita menyediakan sebuah konten yg nantinya dapat kita gunakan untuk memberikan sebuah informasi bagi pengunjung.
</ARTICLE>
<INFO>Your_Information</INFO>
<EVENT><B>ELECTRO EVENT :</B>
<ul><li><a href="#">FUTSAL COMPETITION</a></li>
<li><a href="#"">ELEKTRO BAND</a></li>
<li><a href="#">LINE TRACER RoBOTIC</a></li>
<li><a href="#">WEB DESIGN</a></li>
</ul>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>© CopyRight andibayu 2011
</FOOTER>
</BODY>
</HTML>
Soo, begitulah kawaNn cara kerja kita klau meng combine script css dengan script html,
benernya gambar diatas masih kurang dari sempurna sih, keburu aq upload aja di blogQ, hehHeeee
ntar pasti aq perbaikin kok,, update info dari blog ini yahh guySs..
Coba dulu daHh..
Gud Luck guyysss..
