Web siteleri genellikle içeriği dergi veya gazete gibi birden çok sütunda gösterir.
<!DOCTYPE html>
<html lang="tr">
<head>
<title>HTML Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section::after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>Şehirler</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Ankara</a></li>
<li><a href="#">İstanbul</a></li>
<li><a href="#">Hatay</a></li>
</ul>
</nav>
<article>
<h1>Ankara</h1>
<p>Türkiye'nin başkentidir. Kalabalık bir nüfusa sahiptir.</p>
</article>
</section>
<footer>
<p>Footer (Alt Taraf)</p>
</footer>
</body>
</html>
HTML Layout Elemanları
HTML’de bir web sayfasının farklı bölümlerini tanımlayan çeşitli öğeler bulunur:
- <header> bir belge veya bölüm için başlığı tanımlar
- <nav> bir sayfanın gezinme bağlantılarının yani menüsünün bulunduğu alandır
- <section> belgedeki bölümleri tanımlar.
- <article> genellikle sayfaların bir kısmı sabitken article kısmındaki içerik değişir. Web sitesinin içerik kısmıdır
- <aside> içeriğin dışındaki alanı tanımlar. Genellikle sağda yer alan menüler veya kenar çubukları
- <footer> site altbilgisidir. genellikle menüleri ve sitenin kim tarafından yapıldığını gösteren yer olarak kullanılır.
- <details> kullanıcının isteğe bağlı olarak açıp kapatacağı ek alanları gösterir.
- <summary> <details> bölümü için başlıkları tanımlamak için kullanılır.
HTML Layout Teknikleri
Çok sütunlu düzenler oluşturmak için dört farklı teknik vardır. Her tekniğin artıları ve eksileri vardır:
- CSS framework
- CSS float property
- CSS flexbox
- CSS grid
CSS Frameworks
Bir web sitesini daha hızlı bir şekilde CSS ile geliştirmek istiyorsanız hazır framework kullanabilirsiniz. En sık kullanılan framework listesi; bootstrap,foundation,materialize,semantik ui,bulma,UIkit’tir.
CSS Float
Tüm web düzenlerini CSS float özelliğini kullanarak yapmak da mümkündür. Float’ın öğrenilmesi kolaydır; sadece float ve clear özelliklerinin nasıl çalıştığını hatırlamanız yeterlidir.
Dezavantajları: Değişkenler belgeye bağlı olduğundan esnekliğe zarar verebilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Örnek Tema</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section::after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>Şehirler</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Ankara</a></li>
<li><a href="#">İstanbul</a></li>
<li><a href="#">Hatay</a></li>
</ul>
</nav>
<article>
<h1>Ankara</h1>
<p>Türkiye'nin başkenti Ankara'dır.</p>
</article>
</section>
<footer>
<p>Alt Bilgi Footer yazısı.</p>
</footer>
</body>
</html>
CSS Flexbox
Flexbox kullanımı, sayfa düzeninin farklı ekran boyutlarına ve farklı görüntüleme aygıtlarına uyum sağlaması gerektiğinde öğelerin ekran çözünürlüğüne uygun hareket etmesi gerektiğinde kullanılır. Kullanımını anlamadıysanız merak etmeyin CSS Eğitimi bölümünde daha detaylı olarak ele alacağız.
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Örnek Tema</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
section {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h2>Şehirler</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Ankara</a></li>
<li><a href="#">İstanbul</a></li>
<li><a href="#">Hatay</a></li>
</ul>
</nav>
<article>
<h1>Ankara</h1>
<p>Türkiye'nin başkenti Ankara'dır.</p>
</article>
</section>
<footer>
<p>Alt Bilgi Footer yazısı.</p>
</footer>
</body>
</html>
CSS Grid
CSS grid, yani ızgara satırlar ve sütunlar içeren ızgara tabanlı bir düzen sistemi sunar. Kayan nokta ve konumlandırma kullanmaya gerek kalmadan web sayfalarının tasarlanmasını kolaylaştırır. Yine Grid yani ızgara sistemini CSS eğitimi konusunda detaylandırmaya çalışacağız.
