Web Tasarımının Temelleri
Öğr. Gör. Hüseyin Şengün hsengun@mehmetakif.edu.tr
12. Hafta – Div, Span Etiketi
HTML Div Etiketi Nedir?
• Div etiketi Web sitesinin ana iskeletini oluşturmaya yarayan bu etiket Web sayfasının stilini ve nasıl olması gerektiğini belirleyen boyutlarını tamamen özgürce ayarlayabildiğiniz bir Html etiketidir.
• Div etiketinden daha ayrıntılı bahsedecek olursak, div etiketinin yapısı dört köşesi olan ve içerisine aldığı elementlerle yüksekliği ve boyutu değişebilir.
• Bunun yanı sıra siz div’i oluştururken standart ölçüler
tanımlayabilir veya pencere boyutuna göre genişliğinin ve uzunluğunun dinamik olmasını sağlayabilirsiniz.
HTML Div Etiketi Nedir?
• Html Div etiketi genel olarak belirli bir alanı gruplamak için kullanılmaktadır.
• Kullanıldığı alan belirli bir düzen içinde grupladığınız için düzgün gözükmektedir.
Html Div Etiketi Nasıl Oluşturulur?
• Diğer etiketlere benzerliği çok fazladır. Bu etiketler içi boş
kutucuklardan tutun yatay ve dikey alanlarda oluşturabilirsiniz.
• <div> ... </div>
Html Div Etiketi Nasıl Oluşturulur?
• Div Etiketinin oluşturulması bu kadar basittir. Sıra geldi Div etiketine Stil Bağlamaya yani Class ve Id tanımlamaya.
İç İçe Div Kullanma
• İç içe div kullanımı web tasarım yaparken işinize yarayacak ve en çok kullanacağınız şeyler arasına girecektir.
• Bir şablon(tema) çıkartacağınız zaman iç içe div kullanımı Web şablonunu çıkarırken sizin işinizi kolaylaştıracaktır.
• Web sitesi daha kullanışlı, işlevsel ve daha sonra değiştirilebilmesi daha zahmetsiz olacaktır.
İç İçe Div Kullanma
• Örnek: En üst tarafta banner alanımız var ve bu alanı solda logo sağda banner ve bu ikisin altında menü olacak şekilde iç içe bir div ağacı çıkartalım. Aşağıda CSS ve HTML kodları yer almaktadır.
• HTML:
<div id="header">
<div class="header logo">logo</div>
<div class="header banner">banner</div>
<div class="header menu">menü</div>
</div>
İç İçe Div Kullanma
• CSS:
• <style>
#header { float:left; width:100%; height:auto; } .header{ float:left; height:70px; }
.header.logo{ width:30%; background:red; }
.header.banner{ width:70%; background:yellow; } .header.menu{ width:100%; background:grey; }
</style>
Örnek Div ile Kutu oluşturma
• Yukarıdaki gibi 4 kare kutu ve altına 1 yatay kutu oluşturmak için aşağıdaki kodlar kullanılır.
Örnek Div ile Kutu oluşturma
• HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css-1.css" rel="stylesheet">
</head>
<body>
<div id="kutu1"></div>
<div id="kutu2"></div>
<div id="kutu3"></div>
<div id="kutu4"></div>
<div id="kutu5"></div>
</body>
</html>
CSS
#kutu1{
height:150px;
width:150px;
background-color:#A8A82E;
color:white;
float:left;
margin-right:10px;}
#kutu2 {
height:150px;
width:150px;
background-color:#0B9E8E;
float:left;
margin-right:10px; }
#kutu3 {
height:150px;
width:150px;
background-color:#46D056;
float:left;
margin-right:10px; }
#kutu4 {
height:150px;
width:150px;
background-color:#672A65;
float:left; }
#kutu5 {height:80px;
width:630px;
background-color:#07083F;
margin-top:10px;
clear:both;
float:left; }
Örnek Div ile basit site tasarımı
• CSS ve Div kullanarak basit bir web sayfası tasarımı örneği.
• Örneğimizde içeriğimizin tarayıcıda ortalamış olarak gelmesi için margin:auto kullanımı, sola yaslanama için float:left kullanımı ve diğer css etiketlerinin kullanımını görebilirsiniz.
Örnek Div ile basit site tasarımı
• HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css-3.css" rel="stylesheet">
</head>
<body>
<div id="sayfa">
<div id="ust">Üst</div>
<div id="sol">Sol</div>
<div id="orta">Orta</div>
<div id="sag">Sağ</div>
<div id="alt">Alt</div>
</div>
</body>
</html>
CSS
#sayfa {
width:960px;
margin: auto;
}
#ust {
height:75px;
background-color:#7C84C0;
text-align:center;
vertical-align:middle;
margin:0 0 5px 0;
line-height:75px;
}
#sol {
height:500px;
width:130px;
background-color:#0D275A;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:left;
line-height:350px;
}
#orta {
width:700px;
height:500px;
background-color:#101232;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:left;
color: aliceblue;
}
#sag {
height:500px;
width:130px;
background-color:#0D275A;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:right;
}
#alt {
clear:both;
height:75px;
background-color:#27989A;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
}
Örnek Div ile site tasarımı
• CSS ve Div kullanımı ile ilgili tasarım örneklerine devam ediyoruz.
Örnek web site şablonu için ornek-4.html ve css-4.css dosyalarına ait kodları ve ekran görüntüsünü inceleyebilirsiniz.
Örnek Div ile basit site tasarımı
• HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css-4.css" rel="stylesheet">
</head>
<body>
<div id="sayfa">
<div id="ust">
</div>
<div id="menu">
</div>
<div id="icerik">
<div id="sol">
</div>
<div id="orta">
</div>
<div id="sag">
<div class="kutu">
</div>
<div class="kutu">
</div>
<div class="kutu">
</div>
</div>
<div style="clear: both">
</div>
</div>
<div id="alt">
</div>
</div>
</body>
</html>
CSS body {
margin:0;
}
#sayfa {
width:980px;
margin:0 auto;
}
#ust {
height:120px;
background:#001139;
}
#menu {
height:30px;
background:#0081f9;
}
#sol,#sag {
float:left;
width:200px;
height:600px;
background:#0b9e8e;
}
#orta {
float:left;
width:580px;
height:600px;
background:#7c84c0;
} .kutu {
width:180px;
height:180px;
background:#ddaa00;
margin:10px;
/* kutunun çevresine 10px boşluk verdik */
}
#alt {
height:60px;
background:#672a65;
}
SPAN Etiketi Nedir?
• HTML <span> etiketi, satır içi öğeler ve içerikler için genel
gruplandırma imkanı sunar. Bu Öğeler için stil oluşturma amacıyla kullanılır.
• Span etiketi ile div etiketi arasında bir fark vardır. Span etiketi satır içi öğelerle kullanılırken div etiketi blok düzeyinde içerikle
kullanılır.
• Span etiketi, satır içi öğelerin gruplandırılması için kullanılır.
• Span etiketi tek başına görsel bir değişiklik yapmaz.
• Span div etiketine çok benzer, ancak div blok düzeyinde bir etiket ve span bir satır içi etikettir.
SPAN Etiketi Nedir?
<!DOCTYPE html>
<html>
<head>
<title>HTML span kullanımı</title>
</head>
<body>
<p>Bu bir pragraf etiketidir. <span style = "color:#FF0000;">bu bölüm de span ile </span>biçimlendirildi.</p>
<p>Bu bir pragraf etiketidir. <span style = "color:#FFFF00;"> bu bölüm de span ile </span>biçimlendirildi.</p>
</body>
</html>
SPAN Etiketi Nedir?
<span> etiketleri de diğer HTML etiketleri gibi CSS düzenlemesi yapılabilir. Aşağıdaki örnekte CSS düzenlemesi yapılmıştır.
<!DOCTYPE html>
<html>
<head>
<title>HTML span kullanımı</title>
<style>
span{
font-weight: bold;
font-size:1.5em; } .kirmizi{
color:red; }
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit,<span> amet</span> consectetur adipisicing elit. Voluptatem deleniti expedita vitae, sit, voluptas modi similique
<span>dicta</span> earum voluptate sed eos quisquam dolor quos esse? <span class="kirmizi">Sed</span> nobis nesciunt saepe magnam!
</p>
</body>
</html>
Ekran çıktısı aşağıdaki gibidir.
