Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle DIV Kullanımı Uygulamaları 5 programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle DIV Kullanımı Uygulamaları 5 nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.
Css ve Html İle DIV Kullanımı Uygulamaları Kod Alanı
Css ve Html web programlama dilinde DIV Kullanımı Uygulamaları 5 kod metnini oluşturduk. Bu uygulamamızda css ve div kullanımı hakkında basit bir örnek oluşturacağız. Bu tür basit örnekler ile css ve div kullanımının nasıl gerçekleştiğini, ne gibi kodlar kullanıldığını ayrıca kod metinin nasıl dizayn edildiğini anlayabiliriz. Her bir yeni örneğimiz farklı bir konuya değinmektedir. Her bir örneği uygulamanız sizi bir adım daha bu konular hakkında bilgili olmaya itecektir. Bu örneğimizin ana konusu yatay menü kullanımı, liste kullanımı ve CSS ile bazı biçimlendirmelerden oluşmaktadır.
Uygulamanın html kod metin alanı aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/css1.css" rel="stylesheet">
</head>
<body>
<div id="sayfa">
<div id="ust">
<a id="baslik" href="#">
<h1>Web Site Örnekleri</h1>
</a>
<div class="temizle"></div>
<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Visual Basic</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Phyton</a></li>
</ul>
</div>
<div id="orta-sol">
<h2>Başlık</h2>
<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.
Word'de ihtiyaç duyduğunuz yerlerde görüntülenen yeni düğmeler sayesinde zaman kazanın. Bir resmin belgenize sığma şeklini değiştirmek için resme tıklayın. Resmin yanında bir düzen seçenekleri düğmesi belirir. Bir tablo üzerinde çalışırken, bir satır veya sütun eklemek istediğiniz yere tıklayın ve ardından artı işaretine tıklayın.
Yeni Okuma görünümünde okumak da daha kolaydır. Belgenin bölümlerini daraltabilir ve istediğiniz metne odaklanabilirsiniz. Sona ulaşmadan önce okumayı durdurmanız gerekirse, Word farklı bir cihazda bile kaldığınız yeri hatırlar.
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.
Bir resmin belgenize sığma şeklini değiştirmek için resme tıklayın. Resmin yanında bir düzen seçenekleri düğmesi belirir. Bir tablo üzerinde çalışırken, bir satır veya sütun eklemek istediğiniz yere tıklayın ve ardından artı işaretine tıklayın.
Yeni Okuma görünümünde okumak da daha kolaydır. Belgenin bölümlerini daraltabilir ve istediğiniz metne odaklanabilirsiniz. Sona ulaşmadan önce okumayı durdurmanız gerekirse, Word farklı bir cihazda bile kaldığınız yeri hatırlar.Yeni Okuma görünümünde okumak da daha kolaydır. Belgenin bölümlerini daraltabilir ve istediğiniz metne odaklanabilirsiniz. Sona ulaşmadan önce okumayı durdurmanız gerekirse, Word farklı bir cihazda bile kaldığınız yeri hatırlar.
</p>
</div>
<div id="orta-sag">
<h3>KONULAR</h3>
<ul id="liste-1">
<li><a href="#">Konu 1</a></li>
<li><a href="#">Konu 2</a></li>
<li><a href="#">Konu 3</a></li>
<li><a href="#">Konu 4</a></li>
<li><a href="#">Konu 5</a></li>
<li><a href="#">Konu 6</a></li>
<li><a href="#">Konu 7</a></li>
<li><a href="#">Konu 8</a></li>
</ul>
</div>
<div class="temizle"></div>
<div id="alt">
<p>www.programlamahocam.com</p>
</div>
</div>
</body>
</html>
css1.css dosyası içeriği:
/* CSS Document */
body,h1,ul,li,p{
margin: 0;
padding: 0;
}
#sayfa{
width: 1000px;
margin: 10px auto;
background: #978F8F;
}
#ust{
width: 1000px;
height: 150px;
background: #9F1C1E;
}
#baslik{
float: left;
margin-left: 30px;
margin-top: 45px;
font-size: 1.2em;
color: white;
text-decoration: none;
}
#menu{
float: left;
list-style: none;
margin-top: 2.5em;
}
#menu li{
float: left;
}
#menu li a{
color: white;
text-decoration: none;
margin-right: 20px;
margin-left: 10px;
}
#orta-sol{
width: 780px;
margin: 5px 0px 0px 0px;
float: left;
padding-left: 5px;
padding-right: 5px;
text-align: justify;
background: #EBE4E4;
}
#orta-sag{
width: 200px;
margin-top: 5px;
margin-left:5px;
float: left;
}
#orta-sag h3{
margin: 0px auto;
text-align: center;
color: azure;
font-size: 1.4em;
}
#liste-1{
list-style: none;
padding-left: 20px;
padding-top: 30px;
}
#liste-1 li{
padding-top: 10px;
}
#liste-1 li a{
text-decoration: none;
color: aliceblue;
font-size: 1.2em;
}
#alt{
width: 1000px;
background:#130B0B;
text-align: center;
margin-top: 5px;
color: aliceblue;
}
.temizle{
clear: both;
}
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz