CSS ve DIV Kullanarak Web Sayfası Oluşturma Örneği -1-

HTML ve CSS ile Web Sayfası oluşturma örneği. Div kullanımı ve CSS kullanımını gösteren örnek Web sayfası tasarımına ait html ve css kodları:

Bakınız: Web Site Örnekleri

HTML dosyası (index.html)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Sitesi Örnek-2</title>
<link href="tasarim2.css" rel="stylesheet">    
</head>
    
<body>

<div class="sayfa">
    <div class="ust">
    <a id="baslik" href="#">
    <h1>WEB TASARIM</h1>
    </a>
    <ul id="menu">
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımda</a></li>
    <li><a href="#">Çalışmalarım</a></li>
    <li><a href="#" class="aktif">Yazılar</a></li>
    <li><a href="#">İletişim</a></li>   
    </ul>
        <div class="temizle"></div>
    </div>
    <div class="orta">
    <div class="orta-sol">
    <img src="images/1.jpg">    
    </div>
    <div class="orta-sag">
        <h1>HOŞGELDİNİZ</h1>
        <p>
        Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz. Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. Temalar ve stiller de belgenizin düzenli kalmasına yardımcı olur. Tasarım'a tıklayıp yeni bir Tema seçtiğinizde, resimler, grafikler ve SmartArt grafikleri, yeni temanızla eşleşecek şekilde değiştirilir. Stilleri uyguladığınızda, başlıklarınız yeni tema ile eşleşecek şekilde değiştirilir.

        </p>
        <p>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
        </p>
    </div>
        <div class="temizle"></div>
    </div>
    <div class="alt">
    <p>
            <a href="#">Anasayfa</a> | <a href="#">Hakkımda</a> | <a href="#">Çalışmalarım</a> | <a href="#">Yazılar</a> |  <a href="#">İletişim</a></p><!-- 
            <ul id="alt-menu">
            <li><a href="#">Anasayfa</a>  <li>
            <li><a href="#">Hakkımda</a></li>
            <li><a href="#">Çalışmalarım</a></li>
            <li><a href="#" class="aktif">Yazılar</a></li>
            <li><a href="#">İletişim</a></li>
            </ul> -->
            <p>
            © 2016 Tüm hakları saklıdır.| Tasarım: <a href="#">www.yazilimkodlama.com</a>
            </p>
            <div class="temizle"></div>
    </div>
</div>       
</body>
</html>

<!doctype html>

<html>

<head>

<title>Web Sitesi Örnek-2</title>

</head>

<body>

<h1>WEB TASARIM</h1>

</a>

<li><a href="#">Anasayfa</a></li>

<li><a href="#">Hakkımda</a></li>

<li><a href="#">Çalışmalarım</a></li>

<li><a href="#" class="aktif">Yazılar</a></li>

<li><a href="#">İletişim</a></li>

</ul>

</div>

</div>

<h1>HOŞGELDİNİZ</h1>

<p>

Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz. Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üst bilgi, alt bilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'ye tıklayın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin. Temalar ve stiller de belgenizin düzenli kalmasına yardımcı olur. Tasarım'a tıklayıp yeni bir Tema seçtiğinizde, resimler, grafikler ve SmartArt grafikleri, yeni temanızla eşleşecek şekilde değiştirilir. Stilleri uyguladığınızda, başlıklarınız yeni tema ile eşleşecek şekilde değiştirilir.

</p>

<p>

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.

</p>

</div>

</div>

<p>

<a href="#">Anasayfa</a> | <a href="#">Hakkımda</a> | <a href="#">Çalışmalarım</a> | <a href="#">Yazılar</a> | <a href="#">İletişim</a></p><!--

<li><a href="#">Anasayfa</a> <li>

<li><a href="#">Hakkımda</a></li>

<li><a href="#">Çalışmalarım</a></li>

<li><a href="#" class="aktif">Yazılar</a></li>

<li><a href="#">İletişim</a></li>

</ul> -->

<p>

</p>

</div>

</body>

</html>

CSS Kodları (tasarim2.css):


body,h1,ul,li{
    margin: 0;
    padding: 0;
}

body{
    background:url(images/pattern.png) #252525;
    font-family: sans-serif;
}

.sayfa{
    width: 950px;
    margin:50px auto;
}

#baslik{
    float: left;
    font-size: 1.2em;
    color: white;
    text-decoration: none;
}

#menu{
    float: right;
    list-style: none;
    margin-top: 1em;
}

#menu li{
    float: left;
    
}

#menu li a{
    color: white;
    text-decoration: none;
    margin: 5px;
    padding: 10px 20px;
}

#menu a:hover{
    background: #444;
    border-radius: 15px;
}

.orta{
    margin-top: 15px;
    background: #333;
 
}

.orta-sol{
    float: left;
    width: 450px;
}


.orta-sag{
    float: left;
    margin: 15px;
    width: 470px;
    color: #bbb;
}

.alt{
    background: #555;
    padding: 20px;
    text-align: center;
    color: #fff;
}
.alt a{
     color: #fff;
}

.temizle{
    clear: both;
}

body,h1,ul,li{

margin: 0;

padding: 0;

}

body{

background:url(images/pattern.png) #252525;

font-family: sans-serif;

}

.sayfa{

width: 950px;

margin:50px auto;

}

#baslik{

float: left;

font-size: 1.2em;

color: white;

text-decoration: none;

}

#menu{

float: right;

list-style: none;

margin-top: 1em;

}

#menu li{

float: left;

}

#menu li a{

color: white;

text-decoration: none;

margin: 5px;

padding: 10px 20px;

}

#menu a:hover{

background: #444;

border-radius: 15px;

}

.orta{

margin-top: 15px;

background: #333;

}

.orta-sol{

float: left;

width: 450px;

}

.orta-sag{

float: left;

margin: 15px;

width: 470px;

color: #bbb;

}

.alt{

background: #555;

padding: 20px;

text-align: center;

color: #fff;

}

.alt a{

color: #fff;

}

.temizle{

clear: both;

}

5 Yorum

Serhat Özgür dedi ki:
Kasım 29, 2017, 9:07 am
Teşekkürler yalnız türkçe karakterler sorunu var. Nasıl düzeltiriz?
Cevapla
- Hayri dedi ki:
  Ocak 19, 2018, 12:10 pm
  meta bilgilerini eklemelisin.
  Birde not defteri yada npp kullanıyorsan. Kodlama seçeneğini ANSI yerine UTF8 BOMSUZ yapmalısın.
  Cevapla
Bt dedi ki:
Ekim 19, 2017, 9:09 pm
Div ve css temelini gayet iyi özetleyen bir örnek olmuş teşekkürler
Cevapla
İsmet tekin dedi ki:
Mart 28, 2017, 9:07 am
Ana Sayfadaki olması lazım kapatılmamış düzeltmenizi tavsiye ederim
Cevapla
Cengiz Demir dedi ki:
Aralık 10, 2016, 1:35 am
Bu güzel örnek tasarım için ellerinize sağlık.
Cevapla

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

5 Yorum

Yorum yap X