WTK209U-GÖRSEL WEB TASARIMI
Ünite 5: Tipografi
Giriş
Yazının kullanılmaya başlamasıyla birlikte basılı ve basılı
olmayan ortamlarda yazıların farklı şekillerde
gösterilmesi, yazıya sanat katılması sürecine geçilmiştir.
Bu bağlamda “yazı ile sanat yapmak” anlamına gelen
tipografi kavramı ortaya çıkmıştır.
Yazı görselleştirilerek insanların ilgisi çekilmeye
çalışılmış ve kitaplarda, gazetelerde, dergilerde, reklam
bültenlerinde ve film afişlerinde çeşitli tipografiler
kullanılmaya başlanmıştır. Tipografik ögeler basılı
medyada sıklıkla kullanırken; teknolojinin gelişmesiyle
birlikte dijital ortamlarda her tür platforma ve her boyuta
rahatlıkla uyum sağlayabilen dijital içerikler
üretilmektedir.
Tipografi ve Tipografi ile İlgili Temel Kavramlar
Yunanca typos (form) ve graphia (yazmak) kelimelerinden
türetilen tipografi kavramı en basit açıklamasıyla forma
uygun yazmaktır. Tipografi, harf, sözcük ve satırlarla,
boşluklarının düzenlenmesi gereken diğer ögelerle
belirlenmiş bir sayfa üzerinde yapılan görsel ve işlevsel
düzenlemelerdir. Bir başka tanımla, izleyiciye sözel
mesajları iletmek için tasarlanmış harfler, rakamlar ve
noktalama işaretlerinin iki boyutlu yüzeyler üzerinde, tek
başlarına, kelimeler ya da metinler olarak hangi büyüklük
ve türde kullanılacaklarını ve bir araya geleceklerini
belirleyen kurallar sistemidir. Tipografi, bilgi ve mesajın
anlaşılabilir bir form diliyle iletilmesinin yanı sıra bir tarz,
kişilik, görsel bir dil ve farklı imge olarak ortaya konan
elemanlar olarak yazı karakteri boyutu ortaya çıkmaktadır.
Tipografi dalında uzmanlaşmış bireylere tipograf denir.
Tipograflar; grafik tasarımı, reklamcılık ve web tasarımı
gibi görsel mesajların ağırlıklı olduğu iş kollarında görev
yapmaktadırlar.
Tipografi ile ilgili temel kavramlar aşağıdakilerdir:
• Serif: Karakterlerin uç kısımlarındaki tırnaklı
kısımları ifade eder.
• Sans Serif: Tırnaksız karakterleri ifade eder.
• Leading: Metindeki satırlar arası boşluğu ifade
eder.
• Kerning: Metni oluşturan harfler arasındaki
boşluğu ifade eder.
• Tracking: Bir satır içindeki karakterler arası
boşluktur.
• Baseline: Metni oluşturan harflerin kuyruklarının
dâhil edilmediği tabanı ifade eder.
• x-Height: Metni oluşturan küçük harflerin kuyruk
ve harfin üst çıkıntısı dışında kalan gövdesinin
yüksekliğini ifade eder.
• Type Size: Metni oluşturan harflerin,
karakterlerin boyutunu ifade eder. Tipografik
ölçü birimleri dijital ve baskı için ayrı ayrı
aşağıdaki gibi ifade edilir:
o Dijital Ölçüler: 12 punto (point) = 1 em
(pica)
o Baskı Ölçüleri: 1 punto = 0,376 mm, 72
punto (point) = 6 pika (pica) = 1 inç
(inch)
• Descender (Alt): Harfin satır çizgisinin alt
kısmında yani gövde kısmının (x-Height) alt
bölgesinde kalan kuyruk kısmıdır.
• Ascender (Üst): Harfin gövde kısmının (x-
Height) üst kısmında kalan çıkıntıdır.
Reklam amaçlı çalışmalarda tipografi özellikle iki amaçla
kullanılmaktadır. Bunlardan birincisi verilmek istenen
mesajı ikna edici kılmaktır. İkincisi ise mesajı dikkat
çekici bir hale getirmektir. Bu anlamda, tipografinin
sadece font seçimi olmadığını bilmek gerekir. Aksi halde,
verilmek istenen bir mesajdaki diğer görseller ne kadar iyi
olsa da iyi bir tipografik görsel oluşturulmamışsa,
reklamın istenen etkiyi yaratamayacağı söylenebilir.
Tipografi ile Anlam Yaratma ve Tipografik
Vurgular
Bir metinde verilmek istenen mesajın doğru şekilde
iletilebilmesi için dikkat edilmesi gereken noktalardan en
önemlisi sayfa yapısında hiyerarşik düzendir. Hiyerarşik
düzenden kasıt başlık, alt başlıklar ve metin sıralamasının
doğru bir şekilde yapılmasıdır. Sayfalardaki hiyerarşik
düzenin sağlanması için harf büyüklüklerine, yazı
karakterlerinin farklılıklarına ve bold, italik gibi şekilsel
değişkenlere dikkat edilmelidir. Hiyerarşik düzenlemelerin
yanı sıra yazı biçimi, yazı karakterleri, yazı ailesine de
dikkat edilmelidir.
Yazı Biçimi: Sayfa tasarımında sadece harflerin
kullanıldığı ve bu kullanımda büyük ve küçük harf
dizisinin sayfa hiyerarşisine göre doğru bir şekilde
kullanılmasıdır.
Yazı Karakteri: Metinde kullanılan harflerin, rakamların,
işaretlerin, sembollerin aynı biçimsel özellik ve oranlara
göre seçilerek kullanılmasıdır. Metnin okunurluğu
açısından karakterlerin birbirinden ayırt edilerek
algılanması açısından harflerin oranları önemlidir.
Alfabedeki harflere bakıldığında en dar harfin “I” en geniş
harfin ise “M” olduğu görülmektedir. Bu bağlamda harfler
arasındaki boşlukların da harf genişliklerine göre
düzenlenmesi anlam oluşturmada önemlidir. Bir başka
ifade ile yazı karakterlerini bilmenin sağlayacağı fayda
harflerin birbirinden farklı şekilsel yapıda olduklarını
bilerek ona göre aralarındaki boşluğu ayarlayabilmektir.
Yazı Ailesi: Yazı karakterlerinin yanı sıra anlam
oluşturabilmek için yazı ailesinin de bilinmesi
gerekmektedir. Bu bağlamda, metni oluşturan
karakterlerin anlam oluştururken vurgu yapılmasını
sağlamak amacıyla biçimsel özelliklerine dikkat
edilmelidir. Yazı ailelerine bakıldığında Serif (Tırnaklı),
Sans Serif (Tırnaksız) ve Typewriter (Daktilo) olarak üç
sınıflandırma altında toplandığı görülmektedir. Yazı
ailelerinin karakterlerinin biçimsel özelliklerine
bakıldığında farklı kalınlıklardaki uyarlamaları extra light
(çok ince), light (ince), book, demi (yarım), medium
1
 WTK209U-GÖRSEL WEB TASARIMI
Ünite 5: Tipografi
(orta), bold (kalın), extra bold (çok kalın), heavy (ağır) ve
ultra (aşırı)’dır. Farklı kalınlıklara sahip bu uyarlamaların
condensed (yoğunlaştırılmış), regular (normal) ve
extended (seyreltilmiş) uyarlamaları, farklı açılara sahip
roman (dik) ve italik (eğik) uyarlamaları ile işleme
seçenekleri outline (kontür), shaded (gölgeli), decorated
(süslü) de bulunmaktadır.
Metni oluştururken karakterlerin biçimsel özelliklerinin ve
oranlarının yanı sıra metnin okunurluğu açısından harfler,
sözcükler ve satırlar arasındaki boşluk da önemlidir. Bu
boşluk düzenleri aşağıdaki gibi açıklanabilir:
• Harf Boşluk Düzeni: Okunurluğu artırabilmek
için büyük puntolarla yazılan başlıkların harf
aralıklarının doğru bir şekilde düzenlenmesi
önemlidir. Harf aralarındaki boşlukların ne çok
az ne de çok fazla olmamasına dikkat edilmelidir.
• Sözcük Boşluk Düzeni: Metni oluşturan
sözcüklerin arasındaki boşluklar “ı” harfinin
genişliği kadar olmalıdır. Başlıkların daha iyi
algılanması ve bütünün algılanması sağlanarak
daha akıcı bir okuma için sözcükler arasındaki
boşluklar azaltılır.
• Satır Boşluk Düzeni: Bir metinde satırlar arası
boşluk düzenlenirken boşluğun ne çok az ne de
çok fazla olmamasına dikkat edilmelidir. Metni
okuyan bir kişi satır boşluklarından kaynaklanan
sorundan dolayı aynı satırı tekrar okumamalı ya
da satır atlayarak başka satırlara geçmemelidir.
Satır aralıkları düzenlenirken harflerin alt
(descender) ve üst (ascender) uzantılarının
satırlarda kaybolmaması da önemlidir. İdeal satır
arası boşluk ölçüsüne harfin punto değerine 2
eklenerek ulaşılır.
Tipografik Kurallara Dayalı Tipografi Seçimi
Bir tasarım yapılırken görsellerin kullanılması kadar doğru
tipografi seçimi de metin okunurluğunun sağlanması
açısından çok önemlidir. Tipografi seçiminde takip
edilmesi gereken adımlar sırasıyla aşağıdaki gibidir:
1. Font Seçimi
2. Büyük ve Küçük Harf Kullanımı
3. Boşlukları Düzenleme
4. Metni Düzenleme
5. Yayınlanacak Ortamı Seçme
Font Seçimi: Metnin okunurluğunda öncelikli olarak font
seçiminin doğru yapılması gerekmektedir. Font seçimi
aşaması en zor aşamadır. Çünkü bu aşamada metin
yazarlarının karşısına yüzlerce font çıkmaktadır. Font
seçiminde dikkat edilecek hususlar şu şekilde sıralanabilir:
• Yazının yazılma amacına göre font seçimi
değişiklik gösterir. Formal bir metin için
geleneksel fontlardan serif’li yazı fontu tercih
edilebilirken; informal bir metin için modern
fontlardan olan sans serif’li yazı fontu tercih
edilmelidir.
• Metinde kullanılan yazı fontları, metnin vermek
istediği mesajın önüne geçmemelidir.
• Metin içerisinde duruma göre farklı fontlar tercih
edilebilir. Fakat okunurluğu azaltacak ve dikkat
dağıtacak şekilde fazla font kullanılmamalıdır.
• Kullanılan fontların baskıya uygun olması
gerekmektedir.
Dan Mayer’in font seçimi için belirlemiş olduğu beş kural:
• Duruma uygun seçim
• Font ailelerini bilme
• Arka planın metnin önüne geçmemesi
• Kullanım amacına göre seçim
• Kuralsızlık
Büyük ve Küçük Harf Kullanımı: Uygun font
belirlendikten sonra metin içerisinde büyük ve küçük harf
kullanımına dikkat edilmelidir. Metni komple büyük
harflerle yazmak metnin okunurluğunu azalttığı gibi yazılı
iletişimde büyük harf ile yazmak, karşı tarafa bağırarak
konuşmak anlamına da gelmektedir. Diğer taraftan,
devamlı aynı şekilde hiç hareketsiz ilerleyen yazı da
okuyucuda sıkıcılığa sebep olacak ve belli bir zaman sonra
okumayı bırakacaktır. Bu nedenle, büyük harfler
başlıklarda ve cümle başında, sadece büyük harflerden
oluşan yapılar ise kısa uyarılarda, yönlendirme
levhalarında, emir cümlelerinde kullanılmalıdır. Bu
durumlar dışında metnin devamında alt ve üst kuyruk
yapıları sayesinde gözü tekdüzelikten kurtaran ve metnin
okunurluğunu arttıran küçük harfler tercih edilmelidir.
Boşlukları Düzenleme: Metni oluşturan sözcüklerin ve
sözcükleri oluşturan kelimelerin arasındaki boşluklar ile
satırlar arasındaki boşluklar da tipografi seçiminde dikkat
edilmesi gereken önemli noktalardan biridir. Bir metinde
boşluklar düzenlenirken dikkat edilmesi gereken hususlar
şu şekilde sıralanabilir:
• “Sözcükler arasında” ve “noktalama
işaretlerinden sonra” bir boşluk bırakılır.
• “Harf arası” ya da “satır arası” boşluk gereğinden
fazla arttırıldığında/azaltıldığında okuma güçlüğü
doğar.
• Paragraf boşluğu verildiği durumlarda satırların
arası ayrıca açılarak paragraf vurgulanmaya
çalışılmaz.
Metni Düzenleme: Oluşturulan metnin sayfada doğru
şekilde konumlandırılması okunurluğu artıracaktır. Göz,
sayfada aynı yapıda hareket etmek isteyeceğinden, metnin
satırlarının aynı hizada başlaması metni okuyan kişi için
faydalı olacaktır. Metni düzenlerken dört farklı hizalama
ya da bloklama tekniği kullanılır.
• Sola Yaslı (Soldan Blok, Sola Hizalı): Metnin
sola yaslanması ile oluşturulan her satırın aynı
başlangıç noktasında başladığı ve sonunun farklı
olabildiği sayfa düzeni yapısıdır. Soldan sağa
doğru okuma düzeni, gözün her satırda aynı
başlangıç noktasına dönmesini sağladığından
2
 WTK209U-GÖRSEL WEB TASARIMI
Ünite 5: Tipografi
dolayı okunurluğu artıran ve gözü yormayan bir
düzendir.
• Sağa Yaslı (Sağdan Blok, Sağa Hizalı): Metnin
sağa yaslanması ile oluşturulan ve her satırın
farklı başlangıç noktalarından başladığı fakat
satır sonlarının eşit olduğu sayfa düzeni yapısıdır.
Soldan sağa doğru okuma düzeninde gözün her
satırda farklı başlangıç noktalarına hareket
edeceğinden dolayı okunurluk azalır ve göz
yorulur.
• Ortaya Hizalı (Ortadan Blok): Metnin ortadan
hizalanması sonucunda satırların başlangıç ve
bitiş noktaları farklı olacaktır. Genellikle
başlıklarda tercih edilir.
• Her İki Yana Yaslı (Her İki Taraftan Blok, Her
İki Tarafa Hizalı): Metnin sağ ve sol sütunlara
yaslanmasıyla oluşturulan sayfa yapısıdır.
Başlıklarda tercih edilen bir yapıdır.
Okuma düzeni soldan sağa doğru olan dillerde yazılan
içeriğin sunulmasında sola yaslı ya da her iki tarafa yaslı
yapılar tercih edilirken; başlık ve türevlerinde ortaya ya da
her iki yana yaslı yapılar tercih edilir.
Yayınlanacak Ortamı Seçme: Tipografi seçiminde dikkat
edilmesi gereken en önemli noktalardan biri metnin
yayınlanacağı ortamın belirlenmesidir. Basılı ortamda
yayınlanacak metinlerin düzenlenmesinde ilk dört kural
takip edilebilir. Fakat metnin basılı olmayan elektronik
ortamda (yani web ortamında), yayınlanması durumunda
yayınlanacak ortamda kullanılan yazılımın alt yapısı,
üstünlükleri ve sınırlıklarının yanı sıra içeriğin
görüntüleneceği ekran büyüklüğü önemlidir. Web
ortamında kullanılan tasarım yapıları şunlardır:
• Sabit (Fixed) Tasarım: İçeriğin bulunduğu web
sayfalarının tasarlanırken sayfa genişliğinin sabit
ölçülerle yapılması ve görüntüsünün farklı
araçlarla etkili bir şekilde görüntülenememesidir.
Bu tarz tasarımlar, küçük ekranlı araçlarda
görüntülenirken sayfayı sağa sola kaydırarak
sayfa içeriği net şekilde okunabilir.
• Akışkan (Fluid) Tasarım: İçeriğin bulunduğu web
sayfalarının genişliği yüzde (%) oranlar
kullanılarak geliştirilir. Bu tarz tasarımlarda
sütunlar tarayıcıların izin verdiği ölçüde aşağı
yukarı olacak şekilde ölçeklenir. Böylece, içerik
görüntülenmeye çalışılırken ekranda sağa sola
gitmeye gerek kalmaz.
• Uyarlanabilir (Adaptive) Tasarım: Belirli araç
ölçülerine göre tasarım yapılan tasarımdır. Ekran
boyutu farklı olan her dijital araç göz önünde
bulundurulmalıdır.
• Esnek (Responsive) Tasarım: Esnek tasarım,
sayfa yapılarının bütün dijital araçlarda sağlıklı
görüntülenmesi için gerekli olan tasarımdır. Bu
tasarım ile sayfa yapıları dijital araçların ekran
boyutları ve çözünürlüklerine bağlı kalarak
ölçeklendirilmekte ve sayfaların sağlıklı şekilde
görüntülenmesi sağlanmaktadır. Hazırlanan
içeriğin esnek tasarıma uygun şekilde
görüntülenebileceği sayfa yapılarının
oluşturulması için ücretsiz ya da ücretli olan
birçok tipografi paketi bulunmaktadır.
Tipografi Paketleri
Özellikle 21. yüzyılın ilk çeyreğinde internete
ulaşılabilecek iletişim teknolojileri çok çeşitlenmiştir.
Akıllı telefonlar, tabletler, masaüstü̈ bilgisayarlar, akıllı
televizyonlar bunlara örnektir. Bunların hepsinin ekran
büyüklükleri de birbirinden farklı olabilir. Tipografi
paketlerinin çoğunluğu ise herhangi bir sorun yaşamadan
bütün bu ekranlarda yazılı metinlerin kullanıcılar
tarafından okunmasını sağlayabilirler.
Tipografi paketlerinin temelini Cascading Style Sheets
(CSS) oluşturmaktadır. CSS, HTML yapısındaki web
sayfalarında metin ve format biçimlendirme alanında
olanaklar sunan bir web teknolojisidir. Web sayfaları için
hazır şablonlar sunduğu gibi bağımsız olarak harflerin
stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini
değiştirmek için de kullanılabilir. Bu tekniğin en önemli
özelliği kullanımındaki esnekliktir.
Web sayfası tasarımında esnek tasarımı sağlayan başlıca
tipografi paketleri Bootstrap, Skeleton, Cardinal, Concise,
Furtive, BassCSS, Mueller, vb.dir.
Bootstrap: HTML, CSS ve JavaScript çerçevesi için
geliştirilmiş esnek ve mobil cihaz uyumlu web
biçimlendirme çatısıdır. www.getbootstrap.com
adresinden .zip dosyası indirilerek web tasarımı
çalışmalarında kullanılabilir. Bootstrap, tipografi için
CSS, ön işlemci olarak Less ve Sass’ı tercih etmektedir.
Less, Bootstrap ile geliştirilecek tasarımlarda CSS kodları
ile kolaylıkla kullanılabilir. Sass için aynı durum söz
konusu değildir, zira dosyaları indirip tasarım projesinin
içerisine kurmak gerekmektedir. Bootstrap ile hazırlanan
web tasarımlarında tek çerçeve ile bütün cihazlarda uyum
sorunu olmadan projeleri yayınlamak mümkündür.
Skeleton: Daha küçük web tasarımı projelerinde
kullanılabilecek tipografi paketidir. www.getskeleton.com
adresinden .zip dosyası indirilerek web tasarımlarında
kullanılabilir. Skeleton, standart HTML elementleri
stillerini kullanır ve ızgara (grid) yapısını içerir. Izgara
yapısı, genişliği en fazla 960px olan bir yapıyı 12 sütunluk
akışkan ızgaralara dönüştürür. Bu sayede en geniş sayfa
yapısı tek satır CSS kodu ile tek sütun olacak şekilde
yeniden ölçülendirilir ve küçük cihazlarda sayfa yapısı
sağlıklı görüntülenebilir. Skeleton’da tipografi, “rems” ile
ayarlanır. Bu şekilde yazıların boyutu ve özel ilişkileri tek
HTML kodu ile esnek yapıda olabilir ve tüm boyutlardaki
cihazlarda görüntülenebilir.
Cardinal: Modüler yapıda olan ve mobil cihazlar için
performans ve ölçeklenebilir yapıda geliştirilmiş CSS
çerçevesidir. www.cardinalcss.com adresinden .zip
dosyası indirilerek web tasarımlarında kullanılabilir.
3
 WTK209U-GÖRSEL WEB TASARIMI
Ünite 5: Tipografi
Cardinal’in amacı, web tasarımcılarının esnek, kullanıcı
dostu arayüze sahip uygulamalar için kolaylıkla
ölçeklenebilir ve sürdürülebilir CSS yapısı oluşturmalarını
sağlamaktır. Cardinal’in benimsendiği modern
yaklaşımlardan biri CSS Box Model’dir. Bu sayede
sayfadaki ögelerin genişlik ve yükseklikleri kolaylıkla
belirlenebilir. Bootstrap’te olduğunu gibi ön işlemci olarak
Less CSS yapısını kullanmaktadır.
Concise: Sürdürülebilir CSS yollarından en önemli
adımlar olan Sass, Less ve Stylus temelli CSS
çerçevesidir. Bunun yanı sıra basit CSS yapısı da tercih
edilebilir. www.concisecss.com adresinden .zip dosyası
indirilerek tasarımlarda kullanılabilir. Web tasarımında
gereksiz kodlarla yapıyı şişirmeden ihtiyaç̧ duyulan
eklentilerin kolaylıkla eklenebildiği bir yapıdır. Temel
kullanımda gerekli olan başlık, paragraf, tablolar, formlar
ve butonlar gibi ögeleri içinde barındırmaktadır.
Furtive: Izgara yapısının ve ögelerin boyutlandırılmasında
rem parçası için Flexbox ve SVGs kullanımı gibi gelişmiş
web standartları etrafında geliştirilmiş CSS çerçevesidir.
www.furtive.co adresinden .zip dosyası indirilerek web
tasarımlarında kullanılabilir. Furtive, eski tarayıcıların
desteklemediği küçük CSS ayak izine sahiptir ve CSS
indirmeleri için gerekli olan bant genişliğini kesmektedir.
Gelişmiş web tasarımı projelerinde kullanılmak üzere
geliştirilmiş yapıdır. Esnek ızgara yapısıyla sayfa yapıları
rahatlıkla cihaz boyutuna göre ölçeklenebilir.
BassCSS: Esnek uygulamaları yapmak için temel stil,
yardımcı programlar, ana hat ve renk stili ögelerinin
oluşturulmasını sağlayan CSS çerçevesidir. Bu çerçeveyi
kullanmak için herhangi bir .zip dosyası indirmeye gerek
yoktur. Web üzerinden sağlanan CSS dosyasının HTML
kodları kullanılarak tasarım bağlanılabilir. CSS dosyasının
içerdiği stil kolay bir şekilde kişiselleştirilebilir ve
tipografi ile oynamalar yapılabilir.
Mueller: Sass ve Compass temelinde yapılmış esnek
modüler ızgara sistemidir. www.muellergridsystem.com
adresinden .zip dosyası indirilerek web tasarımlarında
kullanılabilir. Mueller ile ya HTML ögelerine sınıf
eklenerek ya da tercihe bağlı olarak düzenli HTML ögeleri
“grid()” fonksiyonu kullanılarak ızgara yapılabilir.
Mueller ızgarası, Masonry JS Kütüphanesi ile sıralı
kullanılabilir.
Yukarıda belirtilen tipografi paketlerinin yanı sıra Tuktuk,
Base, Toast, CSS Lint, CSS Prism, PCSS, Normalize.css
gibi daha birçok tipografi paketi bulunmaktadır. Web
tasarımı projesinin amacına uygun olarak bu paketlerden
herhangi biri tercih edilerek web sayfası geliştirilebilir.
Tipografi Paketi ile Web Sayfası Oluşturma
Bootstrap tipografi paketi kullanılarak bir web şablonu
hazırlamak için aşağıdaki adımlar izlenmelidir:
1. Bootstrap’e ait .zip dosyası
www.getbootstrap.com adresinden “Download
Bootstrap” düğmesine basarak indirilir.
2. Bootstrap dosyası indirildikten sonra aynı
sayfanın alt kısmında bulunan “Basic Templates”
başlıklı kısımdaki kodlar kopyalanarak bir html
sayfası oluşturulur.
a. Bu aşamada, kopyalanan html kodları ile
bir web sayfası oluşturmak için
Dreamweaver programı kullanılabilir.
b. Burada dikkat edilmesi gereken nokta
oluşturulan html sayfasının HTML5
sayfa özelliğinde olmasıdır.
3. Oluşturulan HTML5 sayfasına Bootstrap için
hazırlanacak olan “Basic Template” kodu
eklendikten sonra kaydedilir.
a. Dreamweaver’da oluşturulan HTML5
sayfası, masaüstünde oluşturulan klasöre
kaydedilir.
b. Kaydetme işleminden sonra daha önce
indirilen .zip’li Bootstrap dosyasının
içindeki dosyalar HTML5 sayfasının
kaydedildiği klasöre taşınır.
c. Oluşturulan HTML5 dosyası ile
Bootstrap dosyalarının aynı klasörde yer
alması daha önce “Basic Template”
bölümünden alınan kodlarla
gerçekleştirilen CSS dosyalarını
bağlama ile web sayfasının sorunsuz
çalıştırılması sağlanmıştır. Bu sayede,
web sayfasında görünmesini istediğimiz
içeriklere Bootstrap dosyasının içindeki
CSS dosyaları ile şekillendirmeler
yapılabilecektir.
4. Kod kısmında el ile kodlama yapılabileceği gibi
Bootstrap dosyalarının indirildiği
www.getbootstrap.com adresinde “Components
(Bileşenler)” sekmesinden tipografi paketlerine
ulaşmak mümkündür. Burada bulunan kodları
kullanarak web şablonunda bulunması gereken
ögeler sayfaya rahatlıkla eklenebilmektedir.
a. “Components (Bileşenler)” sekmesinde
bulunan bileşenleri kullanarak bir sayfa
düzenlemek istenildiğinde, sayfanın
sağındaki bileşenler seçilerek kodları
kopyalama yoluyla html uzantılı
HTML5 sayfasına eklenebilir. Bu
sayede sayfalar kolaylıkla üretilebilir.
Bootstrap gibi tipografi paketleri ile hazırlanan web
şablonlarının en önemli özelliği her platformda ve her
boyuttaki cihazda görüntülenmesinde sorun yaşanmaması
ve altta bulunan gezinme çubuğu yerine içeriğin sayfaya
sığdırılmasıdır. Aynı içeriğin tablet bilgisayarlarda ve
akıllı telefonlarda görüntülenmesinde de sorun
oluşmamaktadır. Ekran boyutuna ve cihazın sahip olduğu
işletim sistemine göre sayfa yapısı iyileştirilmekte ve
görüntülenmesi sağlanmaktadır.