Temel tasarım şablonu önceki konuda da ifade ettiğimiz gibi kendisinden oluşturulacak her sayfada ortak olan özellikleri barındırmak üzere atılan bir temeldir. Bir web sitesindeki her sayfada da logo, sosyal medya ikonları ve dolaşım menüsünü barındıran başlık alanı(header), yan sütun(aside),içeriklerin bulunduğu alan(content), alt alan(footer) gibi ortak paylaşılan bölümler bulunur.

İşte bu bölümleri temel tasarım şablonuna ekleyerek her sayfada otomatik olarak oluşturulmasını sağlayabiliriz. Dilerseniz her bir alan için ayrı bir HTML şablonu oluşturup, temel şablonda birleştirebilirsiniz. Böylece bu alanlardan herhangi birini kullanmak istemediğiniz bir web sayfanız olduğunda farklı bir HTML şablonu oluşturarak onu baz alabilirsiniz.

Eğer ne demek istediğimi kafanızda canlandıramadıysanız, hemen kısa bir örnek fikirle aydınlatabilirim. Örneğin web sitenizde hakkımızda, iletişim, referanslar gibi standart sayfalar olabilir. bunun dışında bir de blog kısmı, sık sorulan sorular, teknik destek gibi sayfalar olabilir. Siz yan sütunun blog, sık sorulan sorular gibi sayfalarda kullanışlı olacağını düşünerek o sayfalara eklemek isteyebilirsiniz ama hakkımızda, iletişim gibi sayfalarda bulunmasına gerek görmeyebilirsiniz. Bu durumda, her bir alanı ayrı bir HTML şablonu olarak oluşturursanız; istediğiniz sayfada yan sütun olan bir HTML şablonu, istediğiniz sayfada yan sütun olmayan HTML şablonunu kullanabilirsiniz.

İsterseniz bu yapıyı kuralım. Öncelikle temel.html şablonumuzu parçalarına ayırarak her bir parçayı ayrı bir HTML şablonu olarak kaydedelim.

temel.html dosyamızın yukarıdaki HTML5 standartlarında oluşturulmuş mevcut hali şöyledir;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temel Tasarım</title>
</head>
<body>
    <div id="container">
        <header>
            Başlık Alanı
        </header>

        <nav>
            Menü Alanı
        </nav>
        <div id="content">
            İçerik Alanı
        </div>
        
        <aside>
            Yan Sütun Alanı
        </aside>
        
        <footer>
            Alt Alan
        </footer>
    </div>
</body>
</html>

Şimdi bu 5 alanımız için 4 HTML şablonu oluşturalım ve menü alanını da başlık alanına dahil edelim; baslik.html, icerik.html, altalan.html, yansutun.html.

baslik.html şablonumuz;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temel Tasarım</title>
</head>
<body>
    <div id="container">
        <header>
            Başlık Alanı
        </header>

        <nav>
            Menü Alanı
        </nav>

icerik.html şablonumuz;

<div id="content">
    İçerik Alanı
</div>

yansutun.html şablonumuz;

<aside>
    Yan Sütun Alanı
</aside>

altalan.html şablonumuz;

<footer>
    Alt Alan
</footer>
</div>
</body>
</html>

Bu bölümler bir araya getirilerek oluşturulmuş yeni temel.html şablonumuz;

{% include "baslik.html" %}
{% include "icerik.html" %}
{% include "yansutun.html" %}
{% include "altalan.html" %}

Gördüğünüz gibi burada jinja2 HTML şablonu diline ait yeni bir anahtar kelime ile karşılaşıyoruz. Şablonlarınıza bir başka şablonun içeriğini dahil etmek istediğinizde include “dosya” ifadesi ile bunu gerçekleştirebiliyorsunuz. Şimdi web tarayıcıda http://127.0.0.1:5000/ adresine göz attığınızda tüm bölümlerin içeriklerinin temel.html dosyamız içinde birleştirilmiş olduğunu ve bu dosyadan miras alan index.html dosyamız tarafından da görüntülendiğini göreceksiniz;

 

Şimdi tasarımımıza biraz daha estetik kazandırmak için CSS ekleyebiliriz. Ben sık kullanılan Bootstrap biçimlendirme iskeletini(framework) kullanacağım. Siz dilerseniz Material, Foundation ya da Bulma gibi diğer seçenekleri de tercih edebilirsiniz. Sağladıkları yapı benzer olmakla birlikte estetik farklılıklar içerirler.

Bootstrap ile çalışmaya başlamak için öncelikle dokümantasyon sayfasını ziyaret ediyor ve nasıl kullanabileceğimize dair bize sağladığı bilgileri ediniyoruz. CSS dosyasında yer alan biçimlendirme sınıflarını kullanabilmemiz için CSS dosyasının linkini HTML sayfamızın <head></head> etiketleri arasına eklememiz gerektiğini belirtiyor. Bu alan baslik.html dosyamız içinde yer alıyor. Hemen gerekli yere CSS linkini ekleyelim;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temel Tasarım</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
    <div id="container">
        <header>
            Başlık Alanı
        </header>

        <nav>
            Menü Alanı
        </nav>

 

Tabii Bootstrap arayüz oluştururken CSS ile biçimlendirmenin yanı sıra Javascript de kullandığı için Bootstrap javascript dosyasını da web sayfamıza yerleştirmemiz gerektiğini belirtiyor. Javascript bağlantısını da </body> kapanış etiketinden hemen önce ekliyoruz ki web sayfamızın yüklenme süresini uzatmasın. Bu alan da, altalan.html dosyamız içinde yer alıyor. Hemen ilgili konuma Bootstrap javascript dosyasının linkini ekleyelim;

<footer>
    Alt Alan
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

 

Bootstrap’in çalışması için gereken dosyaları ekledikten sonra web tarayıcımızdaki proje ana sayfasını yenilersek Bootstrap’in başarılı olarak eklenip çalıştığını fontların değişmesinden anlayabiliyoruz;

Şimdi her web sitesinde olduğu gibi menü oluşturmak için Bootstrap’in Bileşenlerinden navbar bileşenine göz atıyoruz. Bootstrap bu bileşeni kullanmanız için gerçekten detaylı bir doküman hazırlamış ve örnekler ile tüm kullanım şekillerini göstermiş. Dilerseniz sitesinden direkt kopyalayıp yapıştırmak suretiyle kullanabilir, ihtiyacınıza göre özelleştirebilirsiniz.

Bizim menü alanımız baslik.html dosyamızın içinde yer alıyordu. Hemen açıp Bootstrap navbar bileşenini ekleyelim;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temel Tasarım</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
    <div id="container">
        <header>
            Başlık Alanı
        </header>

        <nav>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                  <a class="navbar-brand" href="#">Navbar</a>
                  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          Dropdown
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <li><a class="dropdown-item" href="#">Action</a></li>
                          <li><a class="dropdown-item" href="#">Another action</a></li>
                          <li><hr class="dropdown-divider"></li>
                          <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                      </li>
                    </ul>
                    <form class="d-flex">
                      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                      <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                  </div>
                </div>
              </nav>
        </nav>

Direkt Bootstrap web sitesinden kopyalayıp yapıştırdık ve dolayısıyla yerel web sitemizi ziyaret ettiğimizde Bootstrap sitesindeki görünümün aynısını elde ettiğimizi görüyoruz;

Tabii, şu anda menü web sitemizin içeriğini ifade etmiyor. Bunu navbar kodunu açarak özelleştirebiliriz;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temel Tasarım</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
    <div id="container">
        <header>
            Başlık Alanı
        </header>

        <nav>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                  <a class="navbar-brand" href="/">Flask ile Web Geliştirme</a>
                  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/">Ana Sayfa</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Hakkımızda</a>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          Portföy
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <li><a class="dropdown-item" href="#">Web Geliştirme</a></li>
                          <li><a class="dropdown-item" href="#">Web Tasarım</a></li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">İletişim</a>
                      </li>
                    </ul>
                    <form class="d-flex">
                      <input class="form-control me-2" type="search" placeholder="Arama terimini giriniz..." aria-label="Search">
                      <button class="btn btn-outline-success" type="submit">BUL</button>
                    </form>
                  </div>
                </div>
              </nav>
        </nav>

Web sayfası görünümü;