Dari pengembangan studi kasus yang telah saya posting sebelumnya, design ini adalah pengaplikasian dari pemanfaatan elemen-elemen HTML5. Sebelum membuat HTML, seperti biasa, harus membuat CSS terlebih dahulu....
Berikut ini sintak dari praktikum.css
body{
margin : 10px auto;
width : 900px;
}
header, logo, te, nav, search, box, section, pict, article, event, footer{
display : block;
}
header{
height: 90px;
width: auto;
background-image : url(images/Fotolia_6525764_XS.jpg);
}
logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/fotolia_9806713_new.jpg);
}
te{
padding: 30px;
font-family : Times New Roman, hanacaraka;
font-weight: bold;
font-size : 32px;
color : white;
}
nav{
width: 900px;
height: 40px;
background-color : #f36899;
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: 21px;
border: 1px solid black;
}
ul {
margin:0;
padding:0;
list-style: none;
}
ul li {
position: relative;
float: right;
width:90px;
}
li ul {
position: absolute;
top: 3px;
display: none;
}
ul li a {
display: block;
text-decoration:none;
line-height:8px;
float: right;
color:black;
padding:7px;
background: #faa1cf;
margin:0.5px 0.5px;
font-weight:bold;
font-size : 15px;
width : 70px
}
menu{
margin-top: 3px;
margin-left: 255px;
float: left;
width: 200px;
height: 30px;
text-align : right ;
padding : 3px;
}
section{
width : 900px;
height : 450px;
background-color : #f36899;
}
pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/hello-kitty-533342.jpg);
}
article{
margin-left: 300px;
width: 580px;
height: 325px;
background-color : #c02c78;
padding : 5px;
}
event{
font-family : Times New Roman ;
font-size : 14px;
font-weight: bold;
color : #459dff;
margin-left: 300px;
width: 590px;
height: 125px;
background-color : #f36899;
}
footer{
clear : both;
height : 30px;
background-image : url(images/Fotolia_6525764_XS.jpg);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}
Dan berikut ini sintak dari praktikum.html
<!Doctype HTML>
<html lang="en">
<HEAD>
<TITLE>Desain Layout Halaman Web</TITLE>
<link rel="stylesheet" href="praktikum.css" type="text/css" />
</HEAD>
<BODY>
<HEADER>
<LOGO></LOGO>
<TE><Font color = "#e98ebd" align = "center" face= "Snap ITC"> - SEMANGAT UNTUK HIDUP -</font></TE>
</HEADER>
<NAV>
<div align="center" size = "1">
<ul id="nav">
<li><a href="" title = "Downloads" >Downloads</a></li>
<li><a href="" title = "Tips" >Tips</a></li>
<li><a href="" title = "Tutorials" >Tutorials</a></li>
<li><a href="" title = "Media" >Media</a></li>
<li><a href="" title = "Home" >Home</a></li>
</ul>
<SEARCH><font color = "#c02c78">Search</font></SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
</NAV>
<SECTION>
<PICT></PICT>
<ARTICLE>
3 hal dalam hidup yang tak pernah kembali :
<br>1. Waktu
<br>2. Perkataan
<br>3. Kesempatan
<br>Kita tak bisa memutar kembali waktu, tapi kita bisa menciptakan kenangan dengan waktu yang masih kita punya dan memanfaatkan waktu yang ada, walau sebentar, untuk menciptakan kenangan yang berarti.
<br>Kita tak bisa menarik ucapan kasar yang keluar dari mulut kita atau statement yang telah membuat harga diri kita lebih penting dari pada menariknya kembali dan mengucapkan maaf.
<br>Kita tak bisa menghapus caci maki yang telah kita katakan hingga membuat orang lain marah, terluka atau menangis.Tapi kita bisa membuat apa yang selanjutnya keluar dari mulut kita menjadi lebih banyak pujian dibanding caci maki, lebih banyak syukur dan terima kasih dari pada keluhan atau komplain, dan lebih banyak nasihat positif dari pada sulutan amarah^^
<br>Kita tak bisa mendapatkan kembali kesempatan yang sudah kita lewatkan. Tapi kita bisa menciptakan peluang untuk membuat kesempatan-kesempatan lain datang dalam hidup kita dengan lebih memperhatikannya.
</ARTICLE>
<EVENT><BR>
<B>   <font color = "#7b1e3f">CATEGORIE yang bisa diakses :</B>
<br> <a href= "http://facebook.com/" title = "facebook"> Masuk ke Link Facebook </a>
<br> <a href= "http://blogger.com" title = "blog"> Membuat Link Blogger </a>
<br> <a href= "http://um.ac.id" title = "um"> Masuk ke Link UM </a>
<br> <a href= "http://www.filehippo.com" title = "Software"> Download FREE Software </a>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<br><font align = "center">® Suastika Yulia Riska-109533414510 </font>
</FOOTER>
</BODY>
</HTML>
Tampilan dari design tersebut adalah :
Semoga bermanfaat untuk Anda, sehingga Anda dapat mengaplikasikan konsep ini sebagai referensi dalam pembuatan WEB Anda...
Terima kasih atas kunjungannya ^.^
Earn Money with Design
-
Designing is a refreshing activity for me. I have done various visual
design project for years. I learn through the process. Understanding a good
design...
4 years ago
4 komentar:
u.ugf apik mbak,...
tanya mbak perbadaannya HTML5 sama HTML 4 atau sebelumnya apa,???
hehee...makacy...yg tak tau t klu HTML 5 dan bs HTML dan XML, trs bs pake flash trs da audio video jga...
Nice post
You’ve an inspiration for me.
Branding effort is successful, a marketer should get a website professionally designed
Custom Website Design India
ka bisa ajarin gk kurang ngerti di css nya :)
trimakasih
Post a Comment