1-İlk olarak kullandığımız bir editörle html5 sayfası açıyoruz.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>www.seonet.com.tr</title>
</head>
<body>
</body>
</html>
2-İkinci adımda sayfamızın yapısını html5 kodlarını kullanarak oluşturalım
sayfamızı taşıyıacak bir dış container divi oluşturalım sonra içerisine header etiketi yerleştirelim.
<div id=”container”>
<header>
<!–Buraya logo , menu ve banner gelecek–>
</header>
</div>
3-Bu adım da header kısmını tamalıyoruz.
<header>
<div class=”logo”>
<img src=”img/seologo.png” width=”250″ height=”61″>
</div>
<nav>
<ul>
<li><a href=”#”>Anasayfa</a></li>
<li><a href=”#”>Hakkımda</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>
</nav>
<div id=”banner”>
<img src=”img/test.jpg” alt=”banner” />
</div>
</header>
4. Adım) Content yani içerik kısmına geçiyoruz.
Bu adımda da yine html5 etiketlerinden <section> ve <aside> etiketlerini kullanarak content kısmını tamamlıyoruz ve <p> etiketini kullarak bir iki paragrafta ekliyoruz.
<section>
<h3>Sol taraf</h3>
<p>In that example, we changed the layout of the entire page based on the space available. It isn’t required that we make such drastic changes with this technique though, so in this tutorial we’ll go over a design tweak with a smaller scope. We’ll also cover the syntax for using media queries within a single stylesheet and more examples of that.</p>
</section>
<aside>
<h3>Sağ taraf</h3>
<p>The amount of information given is also something to think about, because a desktop website should have way more information and elements than a website designed for portable devices. There are very many things to think about before going responsive on the web, but it is also therefore the internet grows and becomes more and more important. With such a big amount of decisions to take before even starting to design, it should be clear to everybody that designing responsive is a challenge for even the finest experts out there.</p>
</aside>
5.Adım) Son olarak da sitenin alt kısmı yani <footer> etiketini kullanarak tamamlıyoruz.
<footer><p>www.seonet.com</p></footer>
Şimdi gelelim şekillendirme işine
6.Adım ) Bir css sayfası oluşturup yada mevcut sayfasının içinde <head></head> etiketlerinin arasına bir <style></style> etiketi açıp kapatarak da css kodlarımızı içine yazabiliriz.
Öncelikle sıfırlama koduyla başlayalım.
/* Reset
———————————————————— */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
Bu kodu ekleyince css sayfası okunmaya başladığında sayfanın bütün özellikleri sıfırlandığından görüntüleme de bir sıkıntı oluşmayacaktır.
7.Adım) Ana etiketlerimiz için css kuralları oluşturuyoruz.
#container{
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;}
/*Section etiketine bağlanacak*/
#main {
width: 60%;
margin-right: 5%;
float: left;
}
aside {
width: 35%;
float: right;
}
footer{
width:%95;
height:50px;
background-color:#333;
text-align:center;
}
/*Section sola ve aside sağa yaslanacağından düzgün görünmesi için temizliyoruz. */
.clear{ clear:both;}
8.Adım) Menü ve başlıkları ayarlayalım
/* Logo H1 */
header h1 {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(../images/demo.gif) 0 0 no-repeat;
text-indent: -9999px;
}
/* Nav */
header nav {
float: right;
margin-top: 40px;
width:920px;
padding-top:10px;
padding-bottom:10px;
background-color:#333;
}
header nav li {
display: inline;
margin-left: 15px;
}
9.Adım) Media screen özelliği yani diğer cihazlarda nasıl görüneceğini yine css kodlarıyla ayarlıyoruz.
@media screen and (max-width: 480px) {
header nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
header nav li {
margin: 0;
background: #efefef;
display: block;
margin-bottom: 3px;
}
header nav a {
display: block;
padding: 10px;
text-align: center;
}
}
10.Adım) Kodların bitmiş hali
*(<body> etiketleri arasına gelecek.)
<div id=”container”>
<header>
<div class=”logo”>
<img src=”img/gw_logo_social.png” width=”250″ height=”61″>
</div>
<nav>
<ul>
<li><a href=”#”>Anasayfa</a></li>
<li><a href=”#”>Hakkımda</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>
</nav>
<div id=”banner”>
<img src=”img/asdfasdf.jpg” alt=”banner” />
</div>
</header>
<section id=”main”>
<h3>Sol taraf</h3>
<p>In that example, we changed the layout of the entire page based on the space available. It isn’t required that we make such drastic changes with this technique though, so in this tutorial we’ll go over a design tweak with a smaller scope. We’ll also cover the syntax for using media queries within a single stylesheet and more examples of that.</p>
</section>
<aside>
<h3>Sağ taraf</h3>
<p>The amount of information given is also something to think about, because a desktop website should have way more information and elements than a website designed for portable devices. There are very many things to think about before going responsive on the web, but it is also therefore the internet grows and becomes more and more important. With such a big amount of decisions to take before even starting to design, it should be clear to everybody that designing responsive is a challenge for even the finest experts out there.</p>
</aside>
<div class=”clear”></div>
<footer><p>seonet</p></footer>
</div>