Uyumlu Web (Sayfa) Dizaynı Nedir?
- Responsive Web Design, "uyumlu web dizaynı" demektir ve "RWD" şeklinde kısaca ifade edilir.
- RWD, web sayfalarının, farklı boyutlardaki cihazlarda da düzgün görünmesini sağlar.
- RWD, web sayfalarının, tablet ve mobil cihaz uyumluluğu için zorunluluktur.
Aşağıda, uyumlu bir web sayfası dizaynı kodu vardır. İnceleyelim:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
.sehir {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Dersimizkod-html Denemesi</h1>
<h2>Bu sayfanın boyutlarını değiştirin!</h2>
<div class="sehir">
<h2>İstanbul</h2>
<p>İstanbul güzel bir şehirdir.</p>
<p>İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.</p>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
.sehir {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Dersimizkod-html Denemesi</h1>
<h2>Bu sayfanın boyutlarını değiştirin!</h2>
<div class="sehir">
<h2>İstanbul</h2>
<p>İstanbul güzel bir şehirdir.</p>
<p>İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir.</p>
</div>
<div class="sehir">
<h2>Ankara</h2>
<p>Ankara güzel bir şehirdir. Ankara güzel bir şehirdir.</p>
<div class="sehir">
<h2>Ankara</h2>
<p>Ankara güzel bir şehirdir. Ankara güzel bir şehirdir.</p>
</div>
<div class="sehir">
<h2>İzmir</h2>
<p>İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir.</p>
<div class="sehir">
<h2>İzmir</h2>
<p>İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir. İzmir de güzel bir şehirdir.</p>
</div>
<div class="sehir">
<h2>Bursa</h2>
<p>Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir.</p>
<h2>Bursa</h2>
<p>Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir. Bursa da güzel bir şehirdir.</p>
</div>
</body></html>
Yukarıdaki html sayfasını, web tarayıcınızda açın. Daha sonra, en ve boyunu küçülterek html sayfanızın nasıl tepki verdiğine dikkat edin. Uyumluluğu sağlayan anahtar özellik float:left özelliğidir.
<link rel="stylesheet" href="/w3css/html5.css"> (sayfamızın, w3.css kütüphanesine bağlanmasını ve burdaki hazır yapıları (framework) kullanmamızı sağlar)
Aşağıda W3.CSS class kodları kullanılarak hazırlanmış bir sayfa örneği verilmiştir:
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/w3css/html5.css">
</head>
<body>
<header class="w3-container teal">
<h1>Başlığım</h1>
</header>
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Not</th>
</tr>
</thead>
<tbody>
<tr>
<td>Muzaffer</td>
<td>KAYA</td>
<td>50</td>
</tr>
<tr>
<td>Pelin</td>
<td>AY</td>
<td>94</td>
</tr>
<tr>
<td>Adem</td>
<td>YILDIZ</td>
<td>67</td>
</tr>
</tbody>
</table>
<footer class="w3-container teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
</body>
</html>
HTML5.CSS Kullanımı
- Uyumlu bir web sayfası hazırlamak için, CSS bilmek çok da şart değildir.
- Bu iş için hazır CSS kodları içeren kaynaklar vardır. Bu kaynaklarda ihtiyaçlarımıza cevap verecek CSS kodları kullanıma hazır beklemektedir.
- W3.CSS, hazır ve HTML5 uyumlu CSS class'ları barındıran kaynaklardan biridir.
- Yapmamız gerek tek şey W3.CSS sitesini ziyaret ederek, class isimlerini öğrenmektir.
- W3.CSS class'larını kullanabilmek için, html dökümanımızın <head> ile </head> tagları arasına, aşağıdaki meta ve link elemanlarını atamamız yeterlidir:
<link rel="stylesheet" href="/w3css/html5.css"> (sayfamızın, w3.css kütüphanesine bağlanmasını ve burdaki hazır yapıları (framework) kullanmamızı sağlar)
Aşağıda W3.CSS class kodları kullanılarak hazırlanmış bir sayfa örneği verilmiştir:
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/w3css/html5.css">
</head>
<body>
<header class="w3-container teal">
<h1>Başlığım</h1>
</header>
<table class="w3-table w3-striped w3-bordered">
<thead>
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Not</th>
</tr>
</thead>
<tbody>
<tr>
<td>Muzaffer</td>
<td>KAYA</td>
<td>50</td>
</tr>
<tr>
<td>Pelin</td>
<td>AY</td>
<td>94</td>
</tr>
<tr>
<td>Adem</td>
<td>YILDIZ</td>
<td>67</td>
</tr>
</tbody>
</table>
<footer class="w3-container teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
</body>
</html>
Yukarıdaki sayfa şöyle görünecektir:
Başlığım
| Ad | Soyad | Not |
|---|---|---|
| Muzaffer | KAYA | 50 |
| Adem | AY | 94 |
| Semih | YILMAZ | 67 |
Neredeyse hiç CSS kullanmadan, yukarıdaki sayfayı oluşturmuş olduk. Html elemanlarımıza stil atayabilmek için yaptığımız şey, bu elemanlara; class="w3-container teal" gibi hazır klaslar atamaktan ibarettir. W3.CSS sayfası ziyaret edilirse bir çok hazır class görülecektir.
Bootstrap Kullanmak
Bootstrap; uyumlu web sayfaları geliştirmek için; HTML, CSS ve JS yapıları içeren en popüler kaynaktır. Şurayı ziyaret ederek, sayfalarınızda kullanabileceğiniz bütün bootstrap tasarımlarını görebilirsiniz.
Aşağıdaki koda dikkat edelim:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Demo</h1>
<p>Bu uyumlu sayfanın büyüklüğünü değiştir!</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Londra</h2>
<p>Londra, İngiltere'nin başkentidir.</p>
<p>Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris, Fransa'nın başkentidir.</p>
<p>Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo, Japonya'nın başkentidir.</p>
<p>Tokyo, Japonya'nın başkentidir. Tokyo, Japonya'nın başkentidir. Tokyo, Japonya'nın başkentidir. Tokyo, Japonya'nın başkentidir. Tokyo, Japonya'nın başkentidir. Tokyo, Japonya'nın başkentidir.</p>
</div>
</div>
</body>
</html>
Yukarıdaki kodda;
- <meta name="viewport" content="width=device-width, initial-scale=1"> elemanı, sayfamızın farklı büyüklükteki ekranlarda sorunsuz bir şekilde görünmesine yardım eder.
- <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> elemanı, bootstrap kütüphanesi ile bağlantı kurar ve bootstrapın hazır yapılarını kullanabilmemizi sağlar.
- class="container" ve class="jumbotron" ve class="row" class="col-md-4" sınıfları ise, bootstrap kütüphanesinde hazır olarak bizi bekleyen stil class yapılarıdır.
Bootstrap Demo
Bu uyumlu sayfanın büyüklüğünü değiştir!
Londra
Londra, İngiltere'nin başkentidir.
Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir. Londra, İngiltere'nin başkentidir.
Paris
Paris, Fransa'nın başkentidir.
Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir. Paris, Fransa'nın başkentidir.
Tokyo
Tokyo,Japonya'nın başkentidir.
Tokyo,Japonya'nın başkentidir. Tokyo,Japonya'nın başkentidir. Tokyo,Japonya'nın başkentidir. Tokyo,Japonya'nın başkentidir. Tokyo,Japonya'nın başkentidir. Tokyo,Japonya'nın başkentidir.
Hiç yorum yok:
Yorum Gönder