Basit bir HTML şablonu örneği. HTML Öğrenenler için başlangıç seviyede kolay uygulanabilen bir çalışma. Orijinali https://freewebsitetemplates.com/preview/template3/index.html adresinde olan bu şablonu biraz pratik yapmak amacıyla yeniden kodladım. İster orijinal kodundan isterseniz de benim yazığım koddan karışaltırarak kendinizi geliştrebilirsiniz.
Şablon tek bir sayfadan oluşmakta. HMTL kodları şu şekilde.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" >
<link rel="stylesheet" href="memorial.css" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div class="solKisim">
<div class="solUst"></div>
<div class="solRresim">
<img src="https://f271.https.cdn.softlayer.net/80F271/dal05.objectstorage.softlayer.net/v1/AUTH_b4a3a2ca-226e-4f3c-aef2-b5275f5900cc/cdn/preview/template3/images/photo.jpg" />
</div>
<div class="menu">
<ul>
<li><a href="#">About her</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Candles</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Her Legacy</a></li>
<li><a href="#">Her timeline</a></li>
</ul>
</div>
<div class="solAlt">Powered by Free Website Templates</div>
</div>
<div class="sagKisim">
<h1 class="baslik">This memorial website was created in the memory of our loved one.</h1>
<p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. </p>
<p>Want an easier solution for a Free Website? Head straight to Wix and immediately start customizing your website! </p>
<p>Wix is an online website builder with a simple drag & drop interface, meaning you do the work online and instantly publish to the web. Nothing to download, nothing to upload.</p>
<p>All Wix templates are fully customizable and free to use. Just pick one you like, click Edit, and enter the online editor. Change, add, and remove items as you like.</p>
<p>You can remove any link to our website from this website template, you're free to use this website template without linking back to us. </p>
<p>If you're having problems editing this website template, then don't hesitate to ask for help on the Forums. </p>
</div>
</body>
</html>
Bu şablona bir de memorial.css adında stil dosyası bağlı. Stil dosyasının kodları ise
mamorial.css
@charset "iso-8859-9";
/* CSS Document */
body{width:761px;margin:0px auto;}
.solKisim {
background-color: #0E5BA4;
float: left;
height: 482px;
width: 390px;
display: block;
border-right:2px solid #fff;
}
.solKisim img{float:left;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
border-top:2px solid #fff;
}
.solKisim .solUst {
display: block;
height: 107px;
width: 388px;
background-image: url(https://f271.https.cdn.softlayer.net/80F271/dal05.objectstorage.softlayer.net/v1/AUTH_b4a3a2ca-226e-4f3c-aef2-b5275f5900cc/cdn/preview/template3/images/header.gif);
}
.solKisim ul {
margin: 0px;
padding: 0px;
list-style-type: none;
color: #FFF;
float:left;
margin-top:40px;
display:block;
}
.solKisim ul li{
height:35px;
width:139px;
border-top:1px solid #fff;
}
.solKisim ul li:last-child{
border-bottom:1px solid #fff;
}
.menu{
border-top:2px solid #fff;
border-bottom:2px solid #fff;
display:block;
float:left;
width:139px;
height:306px;
}
.solKisim ul li a {
color: #FFF;
text-decoration:none;
display:block;
width:100%;
height:100%;
text-align:left;
text-indent:20px;
font:bolder 14px/37px Verdana, Arial, Helvetica, sans-serif;
font-weight:bolder;
}
.solKisim ul li a:hover{
background-color:#178dfd;
}
.solAlt{
clear:both;
width:388px;
height:65px;
font: 11px/65px Verdana,Arial,Helvetica,sans-serif;
color:#fff;
text-align:center;
}
.baslik{
color:#0e5ba4;
font: bold 16px/20px Verdana,Arial,Helvetica,sans-serif;
text-align:center;
width:100%;
padding:20px;
margin:0px;
width:330px;
}
.sagKisim{
width:369px;
height:482px;
float:left;
display:block;
background-color:#B8D7F5;
}
.sagKisim p{
font: 11px/15px Verdana,Arial,Helvetica,sans-serif;
padding:9px 20px;
margin:0px;
}
Siz de hazır web sitesi şablonlarını inceleyerek, kodları uygulayarak ya da yeniden yazarak kendinizi geliştirebilirsiniz.
Kayıtlar
