BIL1005 - Web Tasarım Temelleri - Özet

DERS ADI Web Tasarımının Temelleri
ÜNİTE ADI Web Tasarımının Gelişimi

ÜNİTE NO 1
YAZAR Öğr. Gör. ORHAN ÇELİKER
UZUN ÖZET
WEB TASARIMIYLA İLGİLİ TEMEL KAVRAMLAR
Web tasarımı söz konusu olduğunda internet, www, web sayfası, web tarayıcı, hosting, domain, statik,
dinamik, veri tabanı, http, IP, proxy, HTML, CSS, front-end, back-end, ASP, Java ve PHP gibi kavramlar
öne çıkmaktadır. Bunlardan bazıları bu ünitede anlatılacak bazılarına da sonraki ünitelerde değinilecektir.
İNTERNET
İnternet genel bir ifadeyle bilgisayar sistemlerini birbirine bağlayan elektronik iletişim ağı olarak
tanımlanabilir. İnternetin kökeni Amerika Birleşik Devletleri hükümeti tarafından 1960 yılında özel bir
bilgisayar ağı kurmaya yönelik yapılan araştırmalara dayanır. Bu araştırmalar için Advanced Research
Projects Agency (ARPA) tasarım finansmanı olmaya başlamış ve 1969 yılında ARPANET günümüzde
bilinen modern internet olarak hayatımıza girmiştir. 1970’li yılların başlarında e-posta (SMTP) ve NNTP
uygulamaları yaygınlaşmış ve bunların ardından FTP ve HTTP ortaya çıkmıştır. 1993 yılında CERN, Dünya
Çapında Ağı (World Wide Web – www) ortaya çıkarmış ve internet, kamunun erişebileceği hale gelmiştir.
WWW
WWW, bilgisayarların birbirleriyle iletişim kurmalarına olanak tanıyan bunun yanında ses, görüntü ve veri
paylaşımını sağlayan dünya çapında büyük bir ağdır. WWW üzerinde görüntülenen her dosya web
sayfalarını temsil eder ve bu web sayfaları web sitelerini oluşturur. Her web sitesinin URL (Uniform
Resource Locator) adı verilen bir adresi vardır. Örneğin Atatürk Üniversitesi Açıköğretim Fakültesi web
sitesinin URL’si “www.ataaof.edu.tr”dir.
HOSTING VE DOMAIN
Hosting kavramı barındırma anlamına gelmektedir. Adından da anlaşılacağı gibi hosting bir verinin, veri
kümesinin ya da bir içeriğin bir yerde tutulmasıdır. Yani bir web sitesine ait tüm içerik bir sunucuda tutulur
ve kullanıcılar o web sitesinin adresinden sunucudaki o alana erişim sağlar. Her web sitesine ait bir IP adresi
vardır. IP adresleri dört bölümden oluşur ve her bölüm 0-255 arasında değer alabilir.
STATİK VE DİNAMİK WEB SİTESİ
Web siteleri altyapı bakımından statik ve dinamik olmak üzere iki grupta ele alınır. Web sitesi
hazırlanmadan önce hangi amaca hizmet edeceği belirlenmeli ve buna göre statik ya da dinamik web sitesi
seçimi yapılmalıdır.
Statik web siteleri tamamen HTML, XHMTL ve CSS kodlarından oluşur ve veri çekme veya kaydetme gibi
işlemler için bir veri tabanına ihtiyaç duymaz. Bu tür web siteleri genellikle bilgi verme veya tanıtım amaçlı
hazırlanır ve web sitesi içeriğinde bir değişiklik yapılması durumunda site içeriğinin sunucuya tekrar
yüklenmesi gerekir.
Dinamik web siteleri ise verilerin veri tabanlarında tutulduğu istenildiği zaman değiştirilebildiği bir
yapıdadır. Dinamik web sitesi oluşturulurken HTML kodları ASP, PHP gibi internet tabanlı programlama
dilleriyle beraber kullanılır. Bu tür web sitelerinde Facebook, Twitter ve Instagramda olduğu gibi belli bir
kitleye ya da kullanıcıya özgü içerikler oluşturulabilir. Dinamik web sitelerinde statik web sitelerinden farklı
olarak içerik güncelleme veya ekleme işlemleri oldukça kolaydır ve sunucuda herhangi bir güncelleme
yapılmasına gerek yoktur.
VERİ TABANI
Veri tabanı (database) en basit tanımıyla verilerin elektronik ortamda düzenli bir şekilde depolanmasıdır.
Veri tabanı genellikle bir veri tabanı yönetim sistemi (DBMS, Database Management System) aracılığıyla
oluşturulur ve yönetilir. Bu sistemlere; Microsoft SQL Server, Oracle, MySQL, Microsoft Access, IBM
DB2, Informix, Interbase, PostgreSQL ve Sysbase örnek olarak verilebilir. Bu sistemler veri tabanı ve
kullanıcıları arasında bir arayüz işlevi görür ve kullanıcıların verileri organize ve optimize etmelerine olanak
tanır. Veri tabanı yönetim sistemleri bu avantajlarına ek olarak veri tabanlarına yönelik gözetim ve kontrol
süreçlerini kolaylaştırarak yedekleme, kurtarma ve performans izleme gibi
1. Ünite - Web Tasarımının Gelişimi 1

çeşitli faaliyetlerin gerçekleştirilmesini sağlar.
WEB TARAYICI
Web tarayıcı (web browser); bilgisayarlar, akıllı televizyonlar ve mobil cihazlar kullanılarak internet
üzerinden web sitelerinin ziyaret edilmesine imkân tanıyan web arayüzüdür. Web tarayıcılar, sunuculardaki
çoklu ortam dosyalarının istemci bilgisayarlarda açılması, görüntülenmesi veya kaydedilmesi gibi birçok
işlemin http protokolleri kullanılarak gerçekleştirilebilmesi için gereken yazılımlardır (Aydemir, 2010). Bu
yazılımlar kullanıcılar ile web sitesi arasındaki bağlantıyı sağlar. Web tarayıcısı sayesinde kullanıcılara,
sunuculardan gelen kodlar değil bu kodlardan oluşan görsel ve metinsel ögeler görüntülenir (Sugözü ve
Demir, 2011).
HTML
HTML, web sayfalarını oluşturmak için kullanılan standart işaretleme dilidir. Hypertext Markup Language
ifadesinin kısaltması olan HTML’de yer alan hypertext dilimize hiper metin olarak çevrilmiştir. Hiper metin
belgeleri, bilgisayar ve diğer elektronik cihazlarda görüntülenir ve sadece metinsel ifadeleri değil bunun
yanında resim, video, animasyon ve ses gibi görsel ve işitsel içerikleri de barındırır.
HTML standartları Dünya Çapında Ağ Konsorsiyumu (W3C) tarafından belirlenmektedir ve HTML’in
temelini etiketler (tag) oluşturur. HTML’de her etiket bir başlangıç etiketi, içerik ve bir kapanış etiketinden
oluşur.
CSS
CSS (Cascading Style Sheets – Basamaklı Stil Şablonları), HTML'e ek olarak metin ve şekilsel
biçimlendirmelere olanak tanıyan bir web teknolojisidir. CSS de tıpkı HTML gibi bir programlama dili değil
bir işaretleme dilidir. CSS, bir HTML belgesine stil vermek ve HTML ögelerinin istenilen şekilde
görüntülenmesi için kullanılır.
CSS sayesinde web sayfaları için genel şablonlar hazırlanabilir bunun yanı sıra istenilen metinsel ifade için
yazı tipi, renk, büyüklük gibi özellikler organize edilebilir. Bir web sitesinde yer alan web sayfalarındaki
renk ve tasarım uyumunu sağlamak için belli biçimsel özellikler kullanılır. Bu özellikleri her sayfada ayrı
ayrı tanımlamak kod tekrarına yol açmaktadır. Bunun yerine bir CSS sayfası oluşturulur ve web sitesindeki
tüm sayfalara ait stiller bu CSS sayfasından biçimlendirilebilir.
ÖN YÜZ (FRONT-END) TEKNOLOJİLERİ
Kullanıcıların web tarayıcıları kullanarak web sitelerinde görüntülediği, etkileşime girdiği web sitesinin tüm
bileşenleri ön yüz web teknolojileri kullanılarak oluşturulmaktadır. Bu teknolojiler ile HTML, CSS veya
JavaScript gibi diller kullanılarak web sitesinin kullanıcı arayüzünü oluşturan kişilere ön yüz geliştiricisi
(front-end developer) denir. Web sitesinde kullanılacak tasarım, renkler, içerik düzeni, yazı tipi büyüklüğü
gibi birçok stil bu kişilerin görevleri arasındadır.
ARKA YÜZ (BACK-END) TEKNOLOJİLERİ
Ön yüz teknolojilerinde yer alan tüm tasarımsal bileşenlerin depolanabilmesi ve uygulamaya geçirilebilmesi
için gereken altyapı arka yüz (back-end) teknolojileri tarafından sağlanır. Arka yüz teknolojileri genel olarak
bir uygulama, bir sunucu ve bir veri tabanından oluşmaktadır. Bir web sitesine ait sistemin mimarisi, veri
tabanının planlanması, sistemin verimliliği ve sunucu ayarları gibi işlemler arka yüz teknolojileriyle
gerçekleştirilir. Bu işlemleri yapan kişilere de arka yüz geliştirici (back-end developer) denir. Web
tasarımının arka yüz bölümünde C#, PHP gibi yazılım dilleri ve Microsoft SQL Server, Oracle, MySQL,
PostgreSQL gibi veri tabanı yönetim sistemleri kullanılmaktadır.
Web tasarımında bir web sitesinin ortaya çıkması için ön yüz ve arka yüz teknolojilerinin bir araya
getirilmesi gerekmektedir. Yukarıda bahsedildiği gibi ikisinin görevleri farklıdır ancak bu iki görevi de yani
bir web sitesinin oluşturulması için tüm işlemleri yapan yazılımcılar da bulunmaktadır, bunlar da full-stack
developer olarak adlandırlmaktadır.
1. Ünite - Web Tasarımının Gelişimi 2

ÜNİTE ADI Front-end
ÜNİTE NO 2
YAZAR Öğr. Gör. ENES SAĞIROĞLU
FRONT-END
Yazılımlarda son kullanıcı ile donanım arasında birçok katman çalışır. Web tabanlı yazılımlarda da katmanlı
yapılar kullanılmaktadır. Bu yapıların en temel hali client-sever yapısıdır. Client, istemci olarak
tanımlanırken, server sunucuyu ifade etmektedir. Front-end ise yazılımların istemci taraflı çalışan bölümünü
ifade etmek için kullanılır. Front-end, web uygulamalarının son kullanıcıların cihazları üzerinde çalışan
kısmını ifade eder.
Kullanılan Yazılım Teknolojileri
Front-end programlamanın geçmişi ve gelişimi arayüz geliştirmede kullanılan yazılım teknolojilerinin
gelişimi ile beraber ilerlemektedir. Front-end programlamada kullanılan teknolojiler HTML, CSS ve
Javascript.
Veri Toplama ve Önemi
Verilerin nasıl ve nelerden/kimlerden toplanacağı çalışmanın amacına hizmet edecek şekilde tespit
edilmelidir. Toplanılacak veri yanlış ve eksik temin edilirse araştırmanın sonuçlarını olumsuz yönde
etkilemektedir.
HTML
Metin işaretleme dili (Hyper Text Markup Language)’ın kısaltması olan HTML, web tarayıcılarının okuyup
yorumlayabildiği bir etiket yapısına sahiptir. 1991 yılında Tim Berners-Lee tarafından genel kullanıma
açılmıştır. İlk versiyonu sadece metin desteklerdi ve 18 etiketten oluşurdu. Günümüzde kullanılan HTML 5
versiyonu metinlerle beraber birçok öğeyi desteklemektedir.
CSS
Basamaklı Stil Şablonu(Cascading Style Sheets)’nun kısaltması olan CSS, bir HTML sayfasının nasıl
görüneceğinin belirlendiği işaretleme dilidir. CSS, web sayfalarındaki içerikleri konumlandırılması, yeniden
boyutlandırılması, yazı boyutu ve renk gibi görsel tanımlamaların yapılması ile ilgilenir.
Bir web sayfasının HTML kısmı içerik katmanı olarak tanımlanırsa, CSS kısmı görselleştirme katmanı
olarak tanımlanabilir.
JAVASCRIPT
HTML ve CSS yardımı ile ortaya çıkarılan web sayfalarının kullanıcı ile etkileşimi Javascript ile sağlanır.
Kullanıcıların web sayfası üzerindeki faaliyetleri (tıklama, kaydırma vb.) JAVASCRİPT ile hazırlanmış
çeşitli fonksiyonları tetikler. Ayrıca, dinamik içeriklerin oluşturulması, multimedya nesnelerinin kontrol
edilmesi, nesnelerin hareketlendirilmesi gibi anlık işlemler JAVASCRİPT aracılığı ile yapılır.
Front-End İle ilgili Tanımlar
UI(User Interface): Kullanıcı arayüzünü anlamına gelir. Arayüz çok geniş bir tanımdır, her hangi bir nesneyi
kullanmak için oluşturulmuş herşey arayüz olarak ifade edilir. Yazı yazmak için kulanılan klavyeler bir
arayüzdir, aynı şekilde telefonların tuşları bir arayüz olarak ifade edilir.
UID(User Interface Designer): Kullanıcı arayüzü tasarımcısı anlamına gelir. Geliştirilen web sayfalarının
amaç ve kapsamını kullanıcılara en iyi şekilde aktarabilecek tasarımları yapmayı hedefler.
UX(User Experience): Kullanıcı deneyimi anlamına gelir. Kullanıcıların alışkanlıklarına odaklanır.
Geliştirilen bir hizmet veya araçtan kullanıcıların ne kadar memnun olduğu ile İlgilenir
UXD(User Experience Designer): Kullanıcı deneyimi tasarımcısı anlamına gelir. UED veya XD olarak da
ifade edilir. UID’ler tarafından oluşturulan tasarımlarım kullanıcılarda bıraktığı etki üzerine çalışırlar.
Back-End İlişkisi
Back-End, arkayüz anlamına gelen ve kullanıcıların görmediği işlemlerin yapıldığı kısmı ifade eder. Başka
bir değişle, Server-side(sunucu taraflı) geliştirmelerinin yapıldığı yerdir. Standart bir web uygulaması için
back-end, sunucu, yazılım ve veri tabanından oluşur.
Back-End geliştiricilerin ortaya çıkarttığı yazılımlar sunucu yardımı ile veri tabanından aldıkları verileri
gerekli işlemlerden geçirerek istemci(client-side) tarafına hazır hale getirirler. Aynı şekilde istemci
2. Ünite - Front-end 3
tarafında gelen verileri, tasarlanan veri yapısına uygun şekilde veri tabanına kaydederler. Bunun yanı sıra,
web sayfası üzerinden yüklenen video, resim vb içeriklerin uygun şekilde sunucularda saklanabilmesini
sağlarlar.
1. Kullanıcı deneyimini iyileştirmek: Geliştirilen bir web uygulaması, her işlem için sunucuya
giderek cevap beklemesi kullanıcıların memnuniyetini düşürecektir. Çünkü her istek için sunucunun
yoğunluğuna bağlı olarak değişen bir cevap süresi vardır. Bu bekleme süresi kullanıcıları rahatsız eder.
Bunun önüne geçmek kodlama ile çözülebilecek işlemler front-end tarafında çözüme kavuşturulur.
JAVASCRİPT kodları ile yazılabilecek asenkron metotlar yardımı ile arkada bir kod parçacığı sunucu ile
veri alışverişi yaparken, arayüzde başka bir işlem yapılabilir.
2. Sunucu performansını arttırmak ve maliyeti azaltmak: Sunucular çalıştırdıkları yazılımlar için ön
bellek ve işlemcilerini kullanırlar. Kaydedilmesi beklenen verilerin veri tabanında tasarlanan uygun veri
yapısına dönüştürülmesi, sunucu tarafından gönderilen verilerin arayüzde gösterilmesi için uygun hale
getirilmesi, basit hesaplamalar ve diğer birçok kodlama gerektiren işlemlerin front-end tarafında yani
istemci (client-side) tarafında yapılması, sunucunun yükünü azaltır.
Front-End ve Güvenlik İlişkisi
Front-end geliştiricilerin back-end tarafında yapılabilecek bazı iş ve işlemleri yapabildikleri yukarıda
anlatılmıştır. Bu durum birçok açıdan avantaj sağlıyor ancak güvenlik açısından dikkatli olunması
gerekmektedir.
Front-End Geliştirme Ortamları
Birçok yazılım teknolojisi belirli geliştirme ortamlarına ve eklentilere ihtiyaç duyar. Ancak front-end
geliştirme yaparken böyle bağımlılıklar yoktur. Çünkü front-end geliştirme de faydalanılan HTML, CSS ve
JAVASCRİPT kodları en basit metin yazma programları kullanılarak yazılabilir. Yine de geliştiricilerin iş
süreçlerini kolaylaştırmak ve daha anlaşılır kodlamalar yapmak için çeşitli geliştirme ortamları ihtiyaç
duyarlar. Bu ortamlara IDE(Integrated development environment) denir.
Front-End ve Tasarım İlişkisi
Tasarım
Tasarım kelimesinin birçok anlamı bulunmaktadır. Tasarım/Dizayn kelimesinin kökenlerine bakıldığında
kelimenin Latincede hem göstermek/belirtmek hem de çizmek anlamına gelen “designare” kelimesinin bir
türevi olduğu görülmektedir. İngilizcedeyse kelime dizayn/tasarım ismi bu ikili anlamı korumuştur.
Kelimenin kullanıldığı yere bağlı olarak anlamı şu şekillerde ifade edilebilir: Bir plan, proje, süreç veya bir
eskiz, model, motif, tarz, görsel kompozisyon. Amaç anlamında dizayn/tasarım bir hedef ve süreç ima
ederken, çizim/grafik anlamında ise bir planın bir eskiz, desen ya da görsel kompozisyon yoluyla tasvirini
anlatmaktadır. Her tasarımın bir hedefi olmalıdır.
Front-End’de Tasarımın Yeri
Tasarım, yazılım geliştirme aşamalarından biri olarak kabul edilir. Web uygulamalarında tasarım
yapılmadan herhangi bir geliştirme yapamazsınız. Yazılım ve tasarım bağlantılı çalışma alanlarıdır.
Tasarımın yazılım geliştirme süreçlerinde bir role etkiye sahiptir.
2. Ünite - Front-end 4
ÜNİTE ADI HTML'e Giriş ve HTML 5
ÜNİTE NO 3
YAZAR SEDA KAYA
HTML’ Giriş
Herhangi bir web sayfasını oluştururken HTML dilini kullanırız. Hyper Text Markup Language
kelimelerinin baş harflerinden oluşan HTML web siteleri için bir standart işaretleme dilidir. HTML için “bir
programlama dili” ifadesini kullanamayız. Çünkü HTML ile çalışır durumda bir program yazılamaz. HTML
ile bir web sayfasının kullanıcıya yönelik görünümü oluşturulur. Örneğin; sayfa içinde bulunan yazıların,
görsellerin vb. birçok verinin sayfada nasıl konumlanacağını ve sayfaların birbirleriyle ilişkilerinin nasıl
olacağını tanımlamamızı sağlar.
Web siteleri ASP.Net, PHP vb. birçok programlama dillerinden biri ile geliştirilir. Ama hangi dil kullanılırsa
kullanılsın kullanıcının gördüğü sayfa yapısı HTML ile oluşturulur. Bu dillerle yazılan kodlar da tarayıcılar
tarafından HTML olarak yorumlanır. Google Chrome, Microsoft Edge, Safari, Mozilla Firefox, Opera vb.
gibi birçok tarayıcı bulunmaktadır. Her kullanıcının kullandığı tarayıcı ve de tarayıcı sürümleri farklı
olacağından, kullanıcıların gördükleri sayfalarda küçük bazı farklılıklar olabilir.
HTML ilk olarak 1991'in sonlarında Sir Tim Berners-Lee tarafından oluşturuldu ama piyasaya sürülmedi.
1995 yılında HTML 2.0 yayınlandı. Şu an kullanılan HTML 5 sürümünden önce başarılı bir sürüm olan
HTML 4.01 mevcuttu ve 2012’ de HTML 5 yayınlandı. (HTML History).
HTML geliştikçe yeni web teknolojileri de ortaya çıkmıştır. Bunların en önemlileri kitabın ilerleyen
bölümlerinde de anlatılacak olan CSS ve Javascrip’ tir.
Bu ünitede HTML 5 anlatıldıktan sonra HTML’ in genel yapısı, HTML’in ana figürü etiketler ve özellikler
anlatılacaktır.
HTML 5 Nedir?
HTML 5, HTML’ in yayınlanan en son sürümüdür. HTML 5 ile gelen yeni etiketler ve özelliklerle, daha az
kod ile daha işlevsel web uygulamaları yazma imkanı doğmuştur.
HTML 5’ in Yenilikleri
• Önceki sürümleri desteklemesi: HTML 5 kendinden önceki tüm sürümleri destekler. Böylece eski
sürümlerdeki etiketler de derlenebilir.
• Kısa DOCTYPE tanımlaması: HTML’ de sayfanın en üst kısmında HTML türü belirtilir. Önceki
HTML sürümlerinde uzun bir kod satırı bulunmaktaydı. HTML 5 ile bu sadece <!DOCTYPE html> kodu
ile yapılabilmektedir. HTML türü bildirildikten sonra ancak bildirilen HTML türünün etiketleri
kullanılabilir.
• Birçok yeni yapısal ve içerik etiketlerin olması: HTML 5 ile kod yazımını kolaylaştıran yeni
etiketler de gelmiştir. Hatta bu etiketlerden bazıları Flash Player gibi başka programların gereksinimini
ortadan kaldırmıştır.
• Çevrimdışı kısmen çalışabilme: İnternet bağlantınız olmasa bile HTML 5 ile geliştirilmiş web
sitelerini kısmen görüntüleyebilirsiniz.
• İnteraktif site oluşturabilme: Javascript de kullanılarak <canvas>, <progress> etiketleri ve SCG
formatıyla birlikte daha kolay animasyon ve hareketli resimler oluşturulabilmektedir (Ağın, 2010).
• Etkili JavaScript ve CSS3 kullanımı: HTML 5 ile birlikte CSS3 ve Javascript de etkili bir şekilde
kullanılmaya başlanmıştır.
• Charset özelliğinin eklenmesi: Bu özellik ile sayfada kullanılacak olan karakter kümesi
tanımlanır. Sayfa içinde bir charset tanımlaması yapılmazsa; tarayıcılar karakterleri düzgün bir şekilde
görüntülemeyebilir.
HTML Yapısı ve Temel Özellikleri
HTML hakkında anlatılacak olan her şey HTML 5 sürümüne uygun olarak anlatılacaktır.
HTML kodlarını yazarken aslında özel bir programa ihtiyaç yoktur. Bilgisayarlarınızda zaten var olan not
defteri programıyla da HTML kodlarınızı yazıp tarayıcıda çalışır hale getirebilirsiniz. Ama not defterinde
kod yazmak hem zor hem de vakit alır. Daha kolay kod yazımını sağlayan ücretli/ücretsiz birçok HTML
editörü bulunmaktadır. Bunların arasında en yaygın ve ücretsiz olan Notepad++ programıdır. Daha
sistematik çalışmalar için Adobe ve Microsoft ürünleri kullanılabilir. Ayrıca online
3. Ünite - HTML'e Giriş ve HTML 5 5

HTML sitelerini kullanarak da basit kodları deneyebilirsiniz. Bu ünite içinde verilen örnekleri oluşturmak
için Notepad++ programı kullanılmıştır.
HTML dili ile yazılmış bir belgenin genel özellikleri aşağıdaki gibi listelenmiştir:
• Bir belgenin HTML belgesi gibi algılanabilmesi uzantısının ‘.htm’ ya da ‘.html’ olması gerekir.
Bir not defterinde açtığınız belgede Farklı Kaydet sekmesine tıklayıp belgenin uzantısını ‘htm’ ya da ‘html’
olarak değiştirmeniz HTML belgesi oluşturmanız için yeterlidir. Daha sonra masaüstünüzde aktif
kullandığınız tarayıcının ikonu ile oluşturulmuş ve sizin verdiğiniz ismi taşıyan bir bağlantının olduğunu
görebilirsiniz.
• HTML belgesi <html> etiketi ile başlar </html> etiketi ile biter.
• Bir web kullanıcısının tarayıcı üzerinde görüntüleyeceği kısım <body></body> etiketleri arasına
yazılır.
• Sayfada görünmeyen ama sayfa için gerekli olan css, javascript gibi dosyaların tanımlanması ve
sayfa ile ilgili bazı bilgilerin verilmesi <head></head> etiketleri arasında yapılır.
• Belge türünü ayarlamak için sayfanın en başında DOCTYPE bildirimi yapılmalıdır. HTML 5’ te
<!DOCTYPE html> etiketi ile bu daha kısa bir şekilde yapılmaktadır.
• HTML’ de söz dizimi <html> etiketi ile başlar ardından <head> etiketi gelir. <head> etiketinden
sonra tanımlanacak css ve javascript dosyaları varsa bu etiketten sonra yazılır. </head> etiketi ile
kapatıldıktan sonra <body> etiketi açılarak araya sayfa içeri yazılır ve </body> etiketi ile kapatılır.
Etiketler (Tags) ve Özellikler (Attributes)
Etiketler (Tags)
HTML etiketlerden oluşan bir dildir. Etiketlerin temel özellikleri aşağıda listelenmiştir.
• Etiketler <etiket> şeklinde tanımlanır. Yani bir etiket ‘<’ sembolü ile başlayıp ‘>’ sembolü ile
bitmelidir.
• Bir etiket açıldığında kapatılması gerekir. <etiket> ile açılan etiket </etiket> şeklinde
kapatılmalıdır.
• Etiket isimlerinde büyük/küçük harf duyarlılığı yoktur. <etiket> ile <ETIKET> aynı şekilde
yorumlanır. Ama HTML kodları yazılırken genellikle küçük harfler tercih edilir.
• Etiket isimlerinde Türkçe karakterler yoktur.
• Etiketler iç içe yazıldığında en son hangi etiket yazılmışsa ilk o etiket kapatılmalıdır.
• Açılan her etiketin kapatılması gerekirken; bazı etiketler sadece açık hali ile yazılır.
• HTML belgenizde; bazı kodların tarayıcı tarafından yorumlanmamasını ve not olarak kalmasını
isterseniz açıklama satırları oluşturabilirsiniz.
• Etiketler yan yana ya da alt alta yazılabilir. Ama etiketlerin alt alta ve boşluk kullanılmadan
yazılması tercih edilir.
Bazı etiketler ve özellikleri aşağıdaki gibidir:
<html> : Bir HTML belgesi bu etiketle başlar ve biter.
<head> : Sayfada görünmeyen ama sayfa için gerekli olan css, javascript gibi dosyaların tanımlanması ve
sayfa ile ilgili bazı bilgiler bu etiket içinde yazılır.
<title> : Sayfanın başlık çubuğunda görünecek başlığı yazmak için kullanılır.
<meta> : Web sitesi hakkında açıklama, yazar, anahtar kelime ve karakter grubu gibi özellikleri bu etiket
içinde yazılır.
<link> : CSS dosyasını HTML belgesine tanımlamak için kullanılır.
<style> : Aynı sayfa içinde ki etiketlere stil özelliklerini tanımlamak için kullanılır.
<script>: Javascript dosyasını tanımlamak için ya da Javascript kodlarını yazmak için kullanılır.
<body> : Sayfa içeriğine ait her şey bu etiket içinde yazılır.
<div> : Başka etiketleri biçimlendirmek için bir blok oluşturur. Bu etikete stil özellikleri verilerek
istenilen görünüm elde edilebilir. Alt satıra geçerek başlar.
<p> : Yeni bir paragraf oluşturmak için kullanılır.
<span> : Div etiketi gibi bir blok oluşturur. Ama yeni satıra geçmeden satır içinde bir blok oluşturur.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Başlık etiketleri çeşitli büyüklüklerde başlık oluşturmak için
kullanılır. En büyüğü <h1>, en küçüğü <h2> etiketidir.
<a> : Sayfa içinde herhangi bir bağlantıya link vermek için kullanılır.
<img> : Sayfa içine bir resim eklemek için kullanılır.
<table> : Sayfada içinde bir tablo oluşturmak için kullanılır.
<tr> : Tablonun satırlarını ayırmak için kullanılır.
<td> : Tablonun sütunlarını ayırmak için kullanılır.
<th> : Sütun başlıklarını tanımlamak için kullanılır.
<caption> : Tablo başlığını tanımlamak için kullanılır.
<ul> : Sırasız bir liste oluşturmak için kullanılır.
<ol> : Sıralı bir liste oluşturmak için kullanılır.
<li> : Listenin elemanlarını ayrı ayrı oluşturmak için kullanılır.

<br> : Alt satıra geçilmesini sağlar.
Özellikler (Attributes)
HTML etiketlerinin daha işlevsel kullanılabilmesi için biçimlendirilmesi gerekmektedir. Bu da özellik
dediğimiz öğeler ile sağlanır. Özellikler hakkında bilmemiz gereken başlıca hususlar aşağıda listelenmiştir.
• Özellikler her zaman başlangıç etiketinde belirtilir.
• Bir etikette birden fazla özellik yazılabilir. Birden fazla yazılan özellikler arasına boşluk
koyulması yeterlidir.
• Özellikler büyük harf ile de yazılabilir ama küçük harf ile yazılması tercih edilir.
• Herhangi bir etiketin içindeki özellik yazarken özellik adı yazılıp ‘=’ işaretinden sonra tırnak
işareti arasında alacağı değer yazılır.
• Bazı özellikler sadece belirli tek bir etikette bulunurken bazı özellikler birden fazla etikette
kullanılabilir. Class, id, style, title vb bazı özellikler tüm etiketlerde kullanılabilir.
• “lang” özelliği sadece <html> etiketi içinde kullanılır. Sayfanın hangi dilde yazıldığını belirtmek
için kullanılır.

ÜNİTE ADI HTML 5 Etiketleri ve Kullanımları
ÜNİTE NO 4
YAZAR Öğr. Gör. İSMAİL KARA
HTML5 ile birlikte temel HTML yazımına göre değişimler yaşanmıştır. Bu ünitede HTML5 yenilikleri,
değişen yazım şekilleri ve yeni etiketlerden bahsedilmektedir.
HTML5 SAYFA YAPISI
Doctype: DOCTYPE, HTML dokümanlarının ilk satırına yazılan, tarayıcıya dokümanın tipini belirten bir
ifadedir ve HTML etiketi değildir.
Sayfa Dili ve Karakter Kodlaması Belirleme
Sayfa dili <html> etiketinin lang değeri üzerinden belirlenmektedir. Karakter kodlaması ise <head>
etiketlerinin arasına meta charset eklenerek belirlenir. Örneğin; <meta charset=”utf-8”>
Harici Script ve Stil Dosyalarının Çağırılması
Html, bir sayfanın iskeletini oluşturmaktadır. Bu iskeletin tasarımı CSS ile animasyon ve etkileşimler ise
javascript(js) ile yapılmaktadır. *.css ve *.js uzantılı dosyaları HTML dokümanı içerisinde çağırırken CSS
için <link>, js için <script> etiketleri kullanılmaktadır. HTML5 tanımlamasından önce stil ve script dosyası
çağırırken type niteliğinin eklenmesi gerekmekteydi. HTML5 ile birlikte sadece src niteliğinin eklenmesi
yeterlidir. Örneğin; <script src=”script.js”>
HTML5 İLE BİRLİKTE GELEN ETİKETLER VE KULLANIM ŞEKİLLERİ
Sitenin iskeletini hazırlarken genelde div’leri kullanmaktayız. Hangi div’in ne amaçla kullanıldığını div’e
verilen class’lardan yola çıkarak öğrenebiliriz. Html5’in yeni semantik elemanları olmadan önce web
sayfasının header bölümü oluşturmak istendiğinde <div class=”header”>…</div> yapısı yani semantik
olmayan bir yapı kullanılmaktaydı fakat bunun yerine artık HTML5 etiketi olan <header> etiketi
kullanılabilir.
<details>: Kullanıcı görüntülemek veya gizlemek anlamına ek ayrıntılar tanımlar.
<dialog>: İletişim kutusu veya pencereyi tanımlar.
<figcaption>: <figure> elemanı için başlık tanımlar.
<figure>: Resim, şekil vb. içerikleri kullanırken tanımlanır
<footer>: Sayfanın alt bölümünü tanımlarken kullanılır
<header>: Sayfanın veya bir bölümün üst kısmını belirlerken kullanılır.
<main>: Sayfanın ana içerik kısmı tanımlanır.
<mark>: Metinde vurgulama yapmak için kullanılır.
<menu>: Komut veya menü listesi oluşturulurken kullanılır.
<meter>: Bilinen bir aralık içinde bir ölçüm tanımlar.
<nav>: Gezinti(navigasyon) linklerinin bulunduğu kısmı tanımlar.
<progress>: Yüzdelik olarak ilerleme sürecini gösterir.
<section>: Sayfanın bir bölümünü tanımlar
<summary>: <details> elemanının başlığını tanımlar
<time>: Sayfa içinde tarih / saat tanımlarken kullanılır. Sayfaya görsel bir etkisi yoktur.
<wbr>: Cümledeki kelime aralarına satır sonu eklemek için kullanılır.
<datalist>: Bir input için önceden tanımlanmış seçeneklerin listesi oluşturulur.
<output>: Script ile oluşturulmuş çıktıların gösterildiği bir elemandır. (Örneğin; iki input değerinin
toplanarak output’un içeriğine yazılması.
<keygen>: Keygen elemanı form etiketi olduğu için değeri sunucu tarafında alınabilir. Değeri almak için
php kullanabilirsiniz.
<canvas>: Çizim tablosudur. Javascript kullanarak çizimler tanımlanır.
<svg>: Svg kullanarak grafik çizimleri yapılır. Vektörel çizimler için kullanılır.
<audio>: Ses içeriği için kullanılır.
<embed>: Harici uygulamalar için kullanılır. (Örneğin; youtube)
<source>: <video> veya <audio> kaynaklarını tanımlar.
<track>: Medya oynatılırken alt yazı koymak için kullanılır.
<video>: Video eklemek için kullanılır.
4. Ünite - HTML 5 Etiketleri ve Kullanımları 8

Yukarıdaki etiketlerde yeni form elemanları da bulunmaktadır. Form elemanlarının yanı sıra input
elemanına yeni türler eklenmiştir. Bunlar Color, range, search, date, datetime, month, week, number, email,
tel, time, url gibi türlerdir.
HTML5 <article>, <section>, <nav>, <aside> Elemanı
<article>: Türkçe karşılığı makale anlamına gelmektedir. Forum veya blog yazıları gibi bir bölümü
oluşturur.
<section>: Sayfanın veya başka bir elemanın bir bölümü için kullanılır. Gruplamak istediğiniz elemanları
tek bir section içine alabilirsiniz.
<aside>: Sidebar olarak adlandırılan alanlar için kullanılır. Sayfa içerisinde yer alacak reklam, sağ veya sol
menüler, blog yazısının yazar veya yazı kategorisi bölümü vb. alanlar için aside etiketi kullanılabilir.
<nav>: Sayfanın gezinme bağlantıları (ana menü) bu etiket içinde yer almaktadır.
4. Ünite - HTML 5 Etiketleri ve Kullanımları 9

ÜNİTE ADI HTML 5 API'leri
ÜNİTE NO 5
YAZAR Bilg. Yük. Müh. İSHAK METEHAN SİS
GİRİŞ
Yazılımlar, onları kullanacak hedef kitleyi düşünülerek tasarlanmaktadır. Yazılımın sağlayacağı
veri veya işlevlerin birçoğu tasarlanan kullanıcı arayüzü (User Interface) üzerinden son kullanıcıya
sunulmaktadır. Tasarlanan arayüzlerinin kullanıcı dostu ve anlaşılabilir olması, geliştirilen yazılımın daha
etkin ve verimli kullanılabilmesini sağlamaktadır. Öte yandan yazılımların sunduğu veri veya işlevlerin son
kullanıcısının insan yerine başka yazılımlar olduğu durumlarda günümüzde git gide artmaktadır. Son
kullanıcı durumundaki bir yazılımın bir insandan farklı olarak gözleri, duyguları ya da sezgileri yoktur. Bu
nedenle eğlenceli veya sezgisel bir grafiksel arayüzüne ihtiyaç duymazlar. İşte tam bu noktada API
(Application Programming Interface) adı verilen araçlar ile yazılımlar arası etkileşim sağlanabilir. Kısaca
API’ler farklı yazılımların birbirleriyle iletişim kurmasını sağlayan arayüzler olarak kullandığı
teknolojilerdir.
Genel olarak API tarihçesine bakılacak olursa, kullanımına ilk izin veren site 2000 yılında
Salesforce.com'du. Bunu 2002'de Amazon, 2004'te Flickr ve 2006'da Twitter ve Facebook izledi. Google,
API'leri 2007'de, Foursquare 2009'da ve Instagram ise 2010'da kullanmaya başladı. Beklendiği gibi, çoğu
API sosyal medya hizmetlerinde kullanılıyor. Finans ve referans hizmetleri de onu takip ediyor. Alışveriş
siteleri ile ödeme ve müzik hizmetleri de sıklıkla API kullanan web sitelerinden. En az API kullanımı ise
genellikle spor ve yemek web siteleri/hizmetleri içindir.
API NEDİR?
Teknik anlamda API (Application Programming Interface) kelimelerinin kısaltılması olarak
söylenir ve dilimizde “Uygulama Programlama Arayüzü” olarak bilinir. Farklı türden uygulamaların aynı
ana akışı üzerinden birlikte çalışmasını sağlayan arayüzdür. Bu daha kolay anlamda bir yazılımın, başka bir
yazılımla iletişime geçmesi ve işlevlerini kullanması demektir. API, bu farklı türdeki yazılım öğelerini ortak
bir noktada bir araya getirir.
Bunu şu şekilde de düşünebiliriz. Kullanıcı arayüzden bir yazılımı/uygulamayı kullandığında
örneğin Spotify’da bir müzik çaldığında veya Twitter bir twit attığında veya Youtube bir video beğenmek.
Bu işlemleri kullanıcı arayüzünden değil de programlama ile yapmaktır. Bunu ancak bu uygulamalar bize
bir API sağladığında yapabiliriz. Örnek olarak aşağıdaki gibi bir API yazılabilir.
API KULLANIMI
API'ler çoğunlukla web ve program geliştiricileri tarafından kullanılmaktadır. Bir program başka
bir servisin özelliğinden de faydalanması gerektiği zamanlarda API kullanarak bu fonksiyonları tam olarak
yerine getirmesi gereklidir.
API kullanımın temel amacı bir uygulamanın bütün veya bazı metotlarını diğer uygulamalara
kullanıma açarak uzaktan gelecek veri ve bilgi taleplerini kolayca ve hızlıca karşılamaktadır.
API Kullanımının Avantajları
•API, yazılımcının işini her zaman kolaylaştırır. Görünüşte zor ve karmaşık görünen projelerin, içeriğinin iyi
bir dilde tasarlanmasını ve uygulanmasını sağlar.
•Projede daha fazla fonksiyon için fırsatlar sağlar. Çalışmaya başlamadan önce hazırlanan API, projenin
ilerlemesi için çok önemlidir.
•API kullanımı ile kullanıcı ve müşteri dostu kolaylıklar sağlanabilir.
•Entegrasyon yoluyla oluşturulan projelerin başarılı olma olasılığı daha yüksektir. Bu duruma bir örnek
vermek gerekirse, web sitesinin Facebook API uygulaması sayesinde kişileri tespit eden ve makalenizi
okuyan kişiye makalenizi tavsiye eden Facebook arkadaşları gibi milyonlarca farklı kavram
oluşturulabilmektedir.
API TESTİ
API testi, analiz yapmak ve hataları tespit etmek için kullanılır. Sürekli olarak API performansını
ölçmek iyi bir yöntemdir. API testinde, giriş koşullarına göre API'ye eklenen dönüş değeri kontrol edilir.
Ayrıca kullanılabilirlik, işlevsellik, güvenilirlik, performans ve güvenlik için garantiler sağlar.
5. Ünite - HTML 5 API'leri 10

API Test Türleri
Birim testi, işlevsel test, yük testi, çalışma zamanı/hata algılama, güvenlik testi, kullanıcı arayüzü(UI) testi,
penetrasyon testi ve fuzz testidir.
API Testi Yararları
•API testi ile mantık tasarlandıktan sonra, yanıtı ve verileri doğrulamak için testler yürütülebilir.
•Kullanıcı arayüzleri (UI) nasıl erişildiklerine (tarayıcılar, cihazlar vb.) bağlı olarak değerlendirilmelidir.
API testleri bu süreçte daha kontrollü yönetilebilir.
•Bir API testi başarısız olduğunda, sistemin nerede başarısız olduğunu ve hatanın nasıl oluştuğunu
belirlemek daha kolaydır. Bu durumda uygulamanın işleyişi de kolaylıkla kontrol edilebilir.
•Kullanıcı etkinliği bağlamında UI testi birkaç gün sürebilir. Ancak API testi birkaç dakika içinde
tamamlanabilir. Bu sayede daha kısa sürede daha fazla hata bulunabilir ve düzenlenebilir.
API Test Araçları
API Testi için kullanılan birçok otomasyon aracı vardır. Bunlar arasında; Postman, Rest Assured,
Katalon Studio, Tricentis Tosca, SoapUI, Karate DSL, Jmeter, Apigee ve Assertible sayılabilir.
HTML 5 İLE YENİ GELEN API’LER
canvas: Grafik çizmeyi sağlar.
video, audio: Ses ve görüntü oynatmayı tanımlar.
drag and drop: Sayfa içindeki nesnelere sürükle-bırak tanımlar.
geolocation: Konum bilgisini tanımlar.
atob, btoa: Base64 kodlama çevirimi yapar.
print: Yazdırma desteği sağlar.
webworker: Javascript komutlarının çok iş parçacıklı olarak çalışmasını tanımlar.
webstorage: İstemci bilgisayarına veri depolamayı tanımlar.
websocket: Sunucu, istemci arasındaki çift yönlü bağlantıyı tanımlar.
Canvas API
Canvas elementi script'ler (genellikle JavaScript) yoluyla grafikler çizmek için kullanılır.
<canvas> etiketi grafikler için sadece bir tutucudur. Gerçekten bir grafik çizmek için script kullanılması
gerekmektedir.
Canvas öğesi, HTML'e doğrudan yerleştirilmiştir ve web tarayıcıları tarafından doğal olarak
desteklenmektedir. Üzerinde çizilen komut dosyaları HTML'de veya bağlantılı bir harici dosyada
bulunabilir.
Yazılımlarınız/uygulamalarınızın mobil cihazlarda (İOS ve Android) ve modern masaüstü
bilgisayarlarda (en yeni tarayıcı sürümlerine güncellenmek kaydıyla) görüntülenmesi gerekiyorsa, canvas
öğesini kullanmak iyi bir seçim olacaktır.
Media API (Video ve Audio)
Media API HTML 5’in öne çıkan API’lerinden biridir. İki önemli medya elementi içermektedir.
Bunlar, video ve audio elementleridir. Media API bu elementleri play, pause, load, canPlayType gibi
JavaScript metotları aracılığıyla kontrol etmeyi sağlar.
Öncelikle video ve audio elementlerinin nasıl kullanıldığını kısaca açıklayalım.
Video elementi
HTML 5'den önce videolar tarayıcılarda flash gibi eklentiler ile çalıştırılmaktaydı. HTML 5
<video> etiketi ile web sayfalarında video göstermeyi standart haline getirdi.
Audio (Ses) elementi
Bir HTML belgesine audio player elementi koymak için kullanılır. HTML 5'ten önce, ses
dosyalarının web’de audio player ile oynatılabilmek için bir standart yoktu. HTML 5 <audio> etiketi ile web
sayfalarına audio player eklemek, resim ekleme kadar kolay. Artık özel eklentilerle (flash) uğraşmayarak
veya karmaşık kodlara ihtiyaç duymayarak, tek bir öğeyle bu işlem yapılabilmektedir.
Geolocation API
HTML 5 Geolocation (Coğrafi Konum) API, bir kullanıcının konumunu bulmak için kullanılır.
Bu API ile kullanıcının bulunduğu konumu alınabilmesi için, kullanıcının buna izin vermesi gerekmektedir.
Ayrıca Google Chrome tarayıcısının 50. sürümünden itibaren bu API'yi kullanabilmek için sitenin https
olması gerekmektedir, aksi takdirde çalışmayacaktır.
İlk olarak “navigator.geolocation” yardımıyla tarayıcının desteklenip desteklenmediği kontrol
edilir.
Daha sonra kullanıcının konumunu almak için “getCurrentPosition()" metodu kullanılabilir. Bu
metot iki parametre alır. İlk parametre eğer kullanıcı izin verirse çalışacak izin fonksiyonu, ikinci parametre
ise eğer bir hata oluşursa çalışacak olan hata fonksiyonudur.
5. Ünite - HTML 5 API'leri 11

ÜNİTE ADI HTML Meta Etiketleri ve Özel Karakterler
ÜNİTE NO 6
YAZAR Bilg. Yük. Müh. İSHAK METEHAN SİS
GİRİŞ
İnternet, fikirler ve gelişmelerle dolu dünyayı tamamen çevreleyen bir dünya pazarı haline geldi.
Ancak, bu sayfaların var olmasına izin veren web sayfaları ve HTML kodu olmasaydı internet muhtemelen
yalnızca ileri düzey bilgisayar bilimcilerinin erişebileceği küçük bir yer olurdu.
HTML’nin daha önceki ünitelerde de bahsedildiği gibi temel görevi yazı, görüntü, video gibi bazı
verileri ve bunları barındıran sayfaları birbirine bağlamaktır. Bunun yanı sıra sayfaların web tarayıcıları
tarafından düzgün olarak görüntülenmesi için gerekli kuralları da belirler. Etiketler ise bilindiği üzere
HTML içinde bulunan ve önceden belirlenmiş bir kod dizinleridir. İşte bu web sitelerin en başında yer alan
ve temel HTML kod yapılarından olan etiketlerden biri de meta etiketidir.
İnternet kullanıcıları bir web sitesine giriş yaparken site hakkında her türlü bilgiyi dikkate alırlar.
Bu bilgilerden bazıları kullanıcıların siteye giriş yapmadan kapatmalarına sebep olurken, bazıları ise sitede
bolca vakit geçirmelerini sağlayabilir. İşte bu süreçte devreye meta etiketi girer. Meta etiketleri, web siteleri
hakkında bilgi vermeyi sağlarlar ve ziyaretçilerin siteye girme konusundaki kararlarını önemli derecede
etkilerler.
HTML kullanıldığında ve görüntülenecek metin yazıldığında, genellikle özel bir kod gerekmez.
Uygun harfleri veya karakterleri girmek için yalnızca bilgisayar klavyesini kullanmak yeterlidir. Sorun,
HTML'nin kodun bir parçası olarak kullanıldığı metne karakter girmek istenildiğinde ortaya çıkar. Bu
karakterler, kodda kullanılan ve düz metin olmayan karakterlerdir. Bu sorunu ortadan kaldırmak için özel
karakterler kullanılır.
Özel karakterler, HTML kodunda kullanılan karakterleri görüntülemek veya klavyede
bulunmayan karakterleri izleyicinin gördüğü metne eklemek için tasarlanmış belirli HTML kod
parçacıklarıdır
HTML META ETİKETİ NEDİR?

Meta etiketi, web sitesinin en başında yer alır ve basit HTML kodlarındandır. Web sitesi hakkında
bilgi vermek, içerik ve başlıkları belirtmek gibi çeşitli amaçlarla kullanılabilir. Meta etiketi küresel alanda
Meta Tag olarak isimlendirilir.
Meta etiketler web sayfası ekranında görünmez, ancak arama motorları veya kullanıcının tarayıcı
programı tarafından okunabilir ve kullanılabilir.
Meta etiketler geçmişte SEO (Arama Motoru Optimizasyonu) için çok önemliydi. Anahtar
kelimelerle ve açıklayıcı meta etiketlerle yazılan kelimeler, sitenin sayfa arama motorunda bir yer
kaplayabilir. Ancak zaman içinde arama motorları geliştikçe, meta etiketler aracılığıyla arama motorlarında
yer edinme yeteneği çoğunlukla geçmişte kaldı. Bu özellikle Google için geçerlidir.
TEMEL META ETİKETLERİ

Web sayfalarında farklı birçok meta etiketi kullanılmaktadır. En çok bilinen ve tercih edilen title,
description, keywords, charset, refresh, author ve robots meta etiketlerinin açıklaması ve kullanımına dair
örnekler aşağıda bulunan başlıklarda verilmiştir.
Meta Title (Başlık) Etiketi

Title sayfa başlığının tanımlanmasını sağlayan meta etiketidir. Bu nedenle özellikle Google arama
motoru için çok önemlidir. Bu bölüme yazılan içerikler, arama motorlarının listeleme alanında en üstte yer
almaktadır. Ayrıca bu içerikler sayfanın kullanıcılar tarafından sık kullanılanlara eklenilmesi durumunda
tarayıcıların başlık bölümünde görünecek alanlardır. Karakter, genişlik açısından değişebilen bir değer
olduğundan katı bir karakter sınırı yoktur. Ancak arama motorları genel olarak
6. Ünite - HTML Meta Etiketleri ve Özel Karakterler 12

başlık kısmında ilk 50-60 arası karakteri gösterir. Yani başlığı 60 karakterin altında tutma, başlığın %90'ının
arama motoru sonuç sayfasında doğru şekilde görüntüleneceği anlamına gelir.
Meta title etiketi ile kullanıcı aradığı veya hedeflediği içeriği bulabilmesi gerekmektedir. Web
sitesinin kimliğini yansıtacak önemli bir unsurdur ve dikkatlice kullanılması gerekmektedir.
Meta Description (Açıklama) Etiketi

Web sitesi için çok önemli olan bu etiket sayfada yer alan içeriğin kısaca tanımlanmasını
sağlamaktadır. Yine tam olarak karakter kullanım sınırı olmasa da arama motorları genellikle 160
karakterden sonrasını kestiği description etiketine yazılacak tanımın 160 karakteri geçmemesi
önerilmektedir. Başka bir dikkat edilmesi gereken nokta çift tırnak kullanımıdır. Arama motorları
algoritmaları özellikle de Google arama motoru, çift tırnak içerisinde bulunan meta etiketi açıklamalarını
arama sonuçları üzerinde göstermesini engellemektedir. Bunun için çift tırnak kullanımı kesinlikle
önerilmemektedir. Son olarak farklı sayfalarda aynı meta description etiketini kullanmak da arama motoru
algoritmaları için olumsuz bir durum olduğu bilinmektedir.
Google, Eylül 2009’da description ve keywords meta etiketlerinin Google’ın web araması için
sıralama algoritmalarını etkilemediğini açıkladı.
Meta Keywords (Anahtar Kelime) Etiketi

Bir web sayfasının kaynak kodunda yer alan ve arama motorlarına sayfa içeriği ile ilgili bilgi
veren bir meta etiketidir. Meta keywords sayfanın içeriğinde kullanıcıların arayabileceğini düşündüğünüz
önemli anahtar kelime veya terimlerden oluşur. Bilgi virgül ile ayrılan kelime ya da kelime öbekleri ile
verilir.
Meta keywords content içeriğinde verilen anahtar kelimeler sayfa içinde görünmezler. Ancak
sayfa kaynak koduna bakılması gerekir. Kullanım amacı meta description etiketinde de olduğu gibi arama
motorlarına sayfa hakkında bilgi vermektir.
Google, daha önce meta description başlığında da bahsedildiği gibi 2009 yılında yaptığı
açıklamayla web arama sıralamasında meta keywords etiketini kullanmadıklarını ifade etti.
Meta Charset (Karakter Seti) Etiketi

Meta charset, web tarayıcıların web sayfasındaki karakterlerin ne olduğunu anlaması için
kullanılmaktadır. Bu sayede tarayıcılar, hangi karakterlerin kullanıldığı bilgisini alır.
Karakterler sayılar, harfler ve özel karakterlerden (*,!,+,&,-…) meydana gelmektedir.
İlk yıllarda, karakter kodlama standardı olarak ASCII kullanıldı. ASCII 128 karakter tanımlayarak
internet ortamında kullanılabilir. Sonraki birkaç yılda, HTML 4'te varsayılan olarak ISO-8859-1 karakter
kodlaması kullanıldı. ANSI, Windows'un karakter kümesidir ve ISO-8859-1 karakter setinden 32 karakter
daha fazladır. Daha sonraki yıllarda, bu karakter kodlamaları kısıtlı olduğundan HTML, UTF-8 karakter
kodlarını destekler. HTML 5'in varsayılan karakter kodlaması UTF-8'dir ve bu karakter seti neredeyse tüm
dünya dillerinin karakterlerini içerir.
Meta Refresh (Yenileme) Etiketi

Meta refresh etiketi kullanılarak belirli bir süre aralıklarla web sayfası yenilenebilir veya
kullanıcılar başka bir sayfaya yönlendirilebilir.
Meta refresh sadece güncellenmesi fazla olan web sitelerinin tercih etmesi gereken bir etikettir.
Meta Author (Yazar) Etiketi

Meta author etiketi, web sayfasını hazırlayan yazar ya da kurumun tanımlanmasını sağlamaktadır.
Bu alana ad, soyad, email veya diğer iletişim bilgileri yazılabilir.
Meta Robots Etiketi

Meta robots etiketi, bir web sayfasının indexlenme ve içinde bulunan bağlantıları takip etme
durumlarının arama motorlarına iletimini sağlamaktadır. Arama motoru robotları web sayfalarını ziyaret
eder, indeksler ve kendi veri tabanlarına kaydeder. Başka kullanımları olsa da genelde web sayfalarının
arama sonuçlarında görünmesini engellemek adına meta robot etiketleri kullanılır.
Varsayılan değer all (index, follow) şeklindedir ve kullanılması gerekmez.
“index” komutu kullanımı arama motorunun sayfayı indexlemesini, veri tabanına kaydetmesini ve
arama sonuçlarında göstermesini sağlar.
”noindex” komutu web sayfasının, arama motorlarının arama sonuçlarında gösterimini engeller.
Dikkatli şekilde kullanılmalıdır yoksa web sayfasının arama sonuçlarında gösterilmemesine sebep olabilir.
“follow” komutu web sayfasının içindeki bağlantıların takip edilmesini sağlar.
“nofollow” komutu sayfa içindeki bağlantıların takip edilmesini engeller.

Meta Viewport (Görüş Alanı) Etiketi
Viewport, kullanıcının tarayıcısında girdiği web sayfasının kapladığı alana denmektedir. HTML 5
ile gelen yeni yeniliklerden Meta viewport etiketi tarayıcıya, ekranı hangi genişlikte görüntüleyeceğini
bildirir. Eğer bu etiketle bir değer belirtilmezse tarayıcı, ekranı bulunduğu cihazın varsayılan değeriyle
görüntüler. Örneğin meta viewport etiketi kullanılmadığında mobil cihazlar sayfayı masaüstü ekran
genişliğinde ve ekrana sığacak biçimde ölçeklenmiş olarak görüntüleyecektir. Bu genellikle çok küçük bir
sayfa görüntüsü anlamına gelmektedir
width=device-width: Görünüm alanı genişliğini piksel cinsinden belirtir. Görünüm alanı
genişliğinin cihaza bağlı olarak değişiklik göstereceğini device-width değeri ifade eder.
initial-scale=1.0: Web sayfası açıldığında yakınlaştırma düzeyini belirmek için kullanılır. 0 ile 10
arasında değer alır.
minimum-scale, maximum-scale ve user-scalable parametreleri de kullanılan diğer
özelliklerdendir. minimum-scale, maximum-scale parametreleri kullanıcını yakınlaştırma ve uzaklaştırma
değerini belirlemek için kullanılır. user-scalable parametresi ise kullanıcının yakınlaştırma ve uzaklaştırma
yapıp yapmayacağı belirler. true ve false olmak üzere iki değer alabilir.
HTML ÖZEL KARAKTERLER
Bazı karakterler HTML’de çeşitli anlamlara gelmekte ve özel bir kullanım gerektirmektedir.
Örnek olarak HTML kodunun başladığını gösteren “<” karakterini düz metin içeriğinde kullanmak, tarayıcı
tarafından etiket olarak algılanabilir ve kodlama tarafında bir sorun oluşturabilir. HTML özel karakterler ile
bu kullanımın düzgün bir şekilde uygulanmasını sağlanmaktadır.
Bir öze karakter üç kısımdan oluşur;
• Bir ampersand (ve) (&) işareti
• Bir belirteç ismi veya # işaretiyle birlikte ASCII kodu
• Bir noktalı virgül (karakter sonunu belirtir)
Belirteç kullanılan özel karakterler akılda daha kalıcı olduğu için kullanımı daha kolaydır. Ancak
birçok tarayıcı bu kısaltmaları yeterince desteklememektedir. Karakter numaraları ile yazılan özel
karakterler ise tüm tarayıcılar tarafından desteklenmektedir.

ÜNİTE ADI CSS 3
ÜNİTE NO 7
YAZAR MEHMET CANCAN
CSS NEDİR?
CSS, İngilizce Cascade Style Sheet kelimelerinin kısaltılmasıdır. Temel olarak, HTML elementlerini
biçimlendirmek için kullanılır. Örneğin <h1> etiketinin içerisine yazmış olan metnin yaz tipi, boyutu, rengi
gibi birçok biçimsel özellik CSS ile belirlenebilir. Kısacası CSS, bir internet sitesinin tasarımsal açıdan daha
etkileyici görünmesini kolaylaştıran bir işaretleme dilidir. HTML büyük ölçüde metin içeriğini belirlerken,
CSS görsel yapıyı, düzeni ve estetiği belirler.
CSS, sanılanın aksine eskilere dayanan bir işaretleme dilidir. İlk kez 1994 yılında, Cern şehrinde Tim
Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Daha sonrasında W3C
adını alan, çeşitli forum sitesi ve posta listelerinde yapılan birkaç farklı tarz sayfası dili taslağını da göz
önünde bulundurarak, 1996 senesinde ilk CSS önerisi sunulmuştur. İnternetin gelişimiyle de 1998’de
CSS’in 2. sürümü sunulmuştur. Günümüzde ise Css’in 3.sürümü kullanılmaktadır.
CSS SÖZDİZİMİ
Bir CSS stil sayfasında, bir dizi stil tanımının bir araya gelerek oluşturduğu tanımlardır. Her stil tanımının
iki ana bileşeni vardır. Seçici ve deklarasyon;
Seçici: CSS seçiciler, CSS ile stil vermek istediğiniz öğeleri tanımlamak için kullanılır. Her biri kendi
benzersiz sözdizimine sahip birçok farklı CSS seçici türü vardır. Bunlar, tarayıcıya CSS özellik değerlerinin
hangi öğelere uygulanacağını bildirir.
Deklarasyon: Seçilen öğenin nasıl biçimlendirileceğini belirtir. Noktalı virgül ile ayrılmış, özellik ve değer
çiftlerinden oluşur. Bu özellikler CSS özellikleridir. Değer ise özelliklerin alabileceği değerlerdir.
CSS SEÇİCİLER, SÖZDE SINIF SEÇİCİLER VE ÖZELLİKLERİ
İnternet sayfasını oluşturan HTML kodları ile yazılmış bir sayfanın barındırdığı elementler CSS ile
biçimlendirilebilir. Tarayıcılar tarafından yorumlanan CSS satırları ayrı ayrı işlenmektedir. Bu nedenle CSS
içerisinde bir satırda yazılan yanlış tanımlama bir diğer satırın yorumlanmasını engellemez.
HTML elementlerini biçimlendirmek için kullanılan tanımlamalara “seçiciler”, sınıf olmayan fakat sınıf gibi
davranış gösteren seçicilere “sözde sınıf seçiciler” ve seçilen elemente dair stil tanımlamalarına “özellikler”
adı verilir. Seçiciler ve stil tanımlamaları birlikte kullanılır, bu kullanım CSS’in yapısını oluşturulur.
CSS Seçiciler
CSS'de seçicileri kullanmanın iki yolu vardır. Birincisi HTML ve CSS'niz tek bir dokümandaysa, web
sayfasının <head> bölümüne <stayle> etiketi arasına CSS seçicileri eklenmesi yeterlidir. Diğeri ise HTML
ve CSS dosyaları ayrı belgelerde de tutulabilir. Bu durumda, index.html etiketli bir HTML belgesi ve
style.css etiketli bir CSS dosyası olabilir. index.html dosyası, bu stillerin web sayfasını oluşturulabilmesi
için CSS dosyasına başvuran bir kod satırı içermelidir. Bu metotlardan yaygın olarak kullanılanı <link>
etiketi kullanılarak yapılan entegre işlemidir.
Bir CSS seçicisi tarafından hedeflenen öğe veya öğeler, "seçicinin konusu" olarak adlandırılır. Öğe türü,
sınıfı, kimlik adı, verilen özniteliği veya sözde durumuna göre bir konu seçilebilir.
Yıldız işareti (*), CSS'deki evrensel seçicidir. Varsayılan olarak, bir belgedeki tüm öğeleri seçer. Evrensel
seçiciyi yalnızca o ad alanındaki öğelerle sınırlamak için tanımlı bir ad alanı kullanılabilir.
Bir basit seçici, belirli bir nesne adına sahip tüm HTML öğelerini seçer. Örneğin, "a", tüm <a> öğelerini
seçer ve bunlara CSS özellik değerlerini uygular. “p” tüm <p> öğelerini seçer, tüm <span> öğelerini “span”
vb. Ayrıca, basit seçiciyi yalnızca o ad alanındaki öğelerle sınırlamak için tanımlı bir ad alanı kullanılabilir.
Bir sınıf seçici, belirli bir sınıf adına sahip tüm öğeleri seçer. Örneğin, .ana_baslik, “ana_baslik” sınıfına
sahip tüm öğeleri seçer.
Bir kimlik seçici, bir öğeyi kimlik özniteliğine göre seçer. Örneğin #baslik, “baslik“ kimliğine sahip öğeyi
seçer. Bu seçicinin yalnızca seçicide verilen öğenin ID özniteliğiyle tam olarak eşleşmesi durumunda çalışır.
Sözde Sınıf Seçiciler
7. Ünite - CSS 3 15
CSS de sınıf olmayan fakat sınıf gibi davranış gösteren seçicilere css sözde sınıflar denir. Örneğin bağlantı
etiketine tıkladığımızda veya üzerine geldiğimizde bazı özellikleri değiştirmesini sağlamak için kullanılan
seçicilere css de sözde sınıflar denir. Bunlar link, hover, active, visited, target, focus, checked, disabled,
enabled, read-only, required, valid, invalid, first-child, last-child, only-child ve nth-child olmak üzere on
yedi özelik olarak tanımlanmıştır.
Animasyon Özellikleri
jQuery veya flash kullanmadan animasyon oluşturmak için kullanılır. Animasyonu bir süreç olarak kabul
ederek, anahtar kare(keyframe) geçişin başlangıç ve bitişi arasındaki durumları tanımlamak için olanak
sağlar.
Anahtar kare(keyframe) tanımlaması ardından animasyon özelliklerini tanıma işlemi yapılır.
Animasyon Özellikleri
Arka plan, herhangi bir elementin arka planını kontrol etmesine olanak tanır. Bu bir steno özelliğidir, yani
birden fazla background özelliğini bir arada yazmayı sağlar. Renk özellikleri ise CSS içerisinde elemente ait
renk tanımlaması rengin İngilizce adı veya sayısal değeri yazılarak yapılabilir.
Kenarlık Özellikleri
Herhangi bir elementin kenarlığının dört tarafının genişliğini, stilini, ovalliğini ve rengini tanımlamak için
olanak sağlar. Bu bir steno özelliğidir, yani birden fazla border özelliğini bir arada yazmayı sağlar.
Boyut Özellikleri
CSS boyut özelliklerini bir elemanın yüksekliğini ve genişliğini kontrol etmek için kullanılır. Alacağı değer
piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.
Yazı Tipi Özellikleri
Belirli bir yazı tipi adı veya genel bir yazı tipi listesi birden fazla yazı tipi ataması yapılabilir. Bunun yanı
sıra normal, italik veya eğik (eğimli) olabilmesi, kalınlığını ve boyutunu ayarlamak için kullanılır.
Liste Özellikleri
Liste etiketinin başındaki işaretleri değiştirmek, kaldırmak, belirtilen görselle eklemek ve pozisyonunu
belirlemek için kullanılır.
Dış Kenar ve İç Kenar Boşluk Özellikleri
Dış kenar boşluk, öğenin çevresi ile ona komşu olan diğer öğeye belirtilen ölçü kadar dışardan boşluk
ayarlamak için, iç kenar boşluk öğenin içeriği ile öğenin tüm kenarlarına ya da tanımlanan kenar/kenarlar
belirtilen ölçü kadar boşluk bırakmak için kullanılır.
Çok Sütunlu Düzen Özellikleri
Yalnızca birkaç CSS kuralıyla, internet sayfalarının esnekliğine sahip, baskıdan ilham alan bir düzen
biçimidir. Sayfa küçüldükçe, sütunlar için içeriğin doğal olarak akmasına izin verecek şekilde otomatik
olarak ayarlamak ve dengelemek için kullanılır.
Tablo Özellikleri
Tablolar daha anlaşılır olmasını sağlamak için kullanılan özelliklerden biridir. Hücrelerin birbirinden görsel
olarak ayrılmasını sağlar, kullanıcılara okunması kolay görsellik sunar.
Metin ve İçerik Özellikleri
CSS dilinde metin üzerinde düzenleme işlemleri (metnin konumunu, harfler ve kelimeler arası boşluk,
büyük harf, küçük harf vb.) yapmak için, içerik özelliklerinde ise seçilen html öğelerinden önce veya
sonrasında bir url, resim, içerik, tırnak işareti gibi elemanlar eklemek için kullanılır.
Dönüştürme Özellikleri
HTML elemanlarını 2 boyutlu ya da 3 boyutlu olarak döndürmek, boyutlandırmak, eğmek gibi eylemleri
gerçekleştirmek için kullanılır.
Geçiş Özellikleri
CSS geçişleri, öğeyi flash veya JavaScript kullanmadan kademeli olarak bir stilden diğerine değiştirmek için
kullanılır.
Görsel Biçimlendirme Özellikleri
Öğelerin görüntülenmesini, konumunu, katmanını ve yeniden boyutlama gibi işlemleri yapmak için
kullanılır.
CSS ANİMASYONLAR
CSS animasyonu, bir öğenin bir veya daha fazla stil özelliğindeki bir değişikliği canlandırmaya ve ayrıca
animasyonun çeşitli yönlerini kontrol etmeye olanak tanıyan bir CSS özelliğidir. CSS animasyonları ek kod
(örn. JavaScript) veya medya (örn. GIF'ler) gerektirmez her şey HTML ve CSS ile yapılır.
CSS animasyonları, sayfaya daha fazla yük vermeden dinamik, ilgi çekici içerik eklemek isteyen internet
sayfaları için kullanılır. Fazladan komut dosyaları gerektirmediklerinden, CSS animasyonlarının sayfaları
yavaşlatmayı da önleyecektir.
Bir CSS animasyonu yapmak için üç şeye ihtiyaç vardır: canlandırılacak bir HTML öğesi, animasyonu bu
öğeye bağlayan bir CSS kuralı ve animasyonun başındaki ve sonundaki stilleri tanımlayan bir ana kare
(@keyframe) grubu. Animasyonunuzu daha fazla özelleştirmek için hız ve gecikme gibi özelliklerde de
eklenebilir.
7. Ünite - CSS 3 16
ÜNİTE ADI CSS 3 Flexbox
ÜNİTE NO 8
YAZAR MEHMET CANCAN
Web’in ilk yıllarında sayfa içerisindeki içerikler ve öğeleri belirli bir düzende kullanıcıya sunmak için tablo
kullanılması çoğu zaman yeterli olmaktaydı. Ancak mobil cihazların yaygınlaşması ile birlikte içeriklerin ve
öğelerin dinamik şekilde ekran boyutuna göre hizalanması ve yerleşmesi ihtiyacı duyarlı ve uyarlanabilir
web tasarımını zorunlu kılmış ve bu durum yeni tasarım yönelimlerinin ortaya çıkmasına ön ayak olmuştur.
Bu doğrultuda ortaya çıkan çözümlerden birisi de CSS3 web düzeni modeli olarak tanımlanan Flexbox’tır.
Tam adı Flexible Box Layout olan ve Türkçe’ye CSS Esnek kutu düzeni olarak çevrilen Flexbox, Front-end
geliştirme sürecinde sıklıkla kullanılan bir yapı olarak öne çıkmaktadır. Özellikle farklı cihazlarda
görüntülenecek olan dinamik web sayfalarını kolaylıkla yönetmek amacıyla W3C’nin aday öneri
aşamasındaki bir geliştirmedir
Flexbox, kullanıcı arayüzü tasarımı için optimize edilmiş bir CSS kutu modelini tanımlar. Flex yapısı altında
hem kapsayıcı (container) için hem de içindeki öğeler (items) için birçok özellik bulunmaktadır. Öğelerin
hem yatay hem de dikey hizalaması bu özellikler kullanılarak kolaylıkla yapılabilir.
FLEXBOX ÖZELLİKLERİ
Flexbox’ın ana ilkesi, web sayfasında sunulan tüm içeriğin ve öğelerin ana eksen ve çapraz eksen olmak
üzere iki eksen boyunca düzenlenmesidir. Varsayılan olarak, ana eksen x ekseni yani yatay ekseni ifade
eder. Çapraz eksen ise y eksenini (dikey) ekseni ifade eder.
Flexbox’ta kapsayıcı ana öğe olarak davranır ve bir kutu içinde yuvalanmış tüm öğeleri de alt öğeler olarak
isimlendirilir. Bu ana öğeye esnek kutu ve tüm alt öğelerine ise esnek öğeler denir. Flexbox’ta kullanılan
temel özellikler şu şekildedir:
Align-content
Özelliği çok satırlı yapılarda öğeleri çapraz eksende (dikey) hizalamak için kullanılır. Ayrıca stretch, flex-
start, flex-end, center, space-between ve space-evenly olmak üzere altı değer alır.
Align-items
Özelliği justify-content‘in yatay eksende yaptığı işlemleri dikey eksende hizalama yapmak için kullanılır.
Ayrıca stretch, flex-start, flex-end, center ve baseline olmak üzere beş değer alır.
Align-self
Özelliği bir esnek kutuya varsayılan veya tanımlanan hizalama tanımının dışına çıkmak için kullanılır.
Ayrıca auto, stretch, flex-start, flex-end, center ve baseline olmak üzere altı değer alır.
Flex
Özelliği esnek uzunlukta bileşenleri belirtir. flex-grow, flex-shrink ve flexbasis özelliklerini aynı anda
ayarlamak için bir kısayol özelliğidir.
Flex-direction
Özelliği esnek öğelerin yerleştirildiği yönü belirler. Özellik, varsayılan olarak yerleşimi yatayda
gerçekleştirir. Ayrıca farklı davranışlar için farklı seçenekler sunmaktadır. Ayrıca row, row-reverse, column
ve column olmak üzere dört değer alır.
Flex-wrap
Esnek kutular varsayılan olarak tek bir satıra sığar flex-wrap özelliği ile öğeleri birden fazla satıra yaymak
için kullanılır. Ayrıca nowrap, Wrap ve Wrap-reverse olmak üzere üç değer alır.
Flex-flow
Özelliği flex-direction ve flex-wrap özelliklerini tek seferde tanımlamak için kullanılan kısayoldur.
Justify-Content
Esnek özelliğine sahip olan bir kapsayıcının yatay eksende nasıl hizalanacağını ayarlar. Öğeler başta mı,
ortada mı, sonda mı, aralıklı mı dizileceğine karar vermemizi sağlar. Ayrıca flex-start, flex-end, center,
space-between, space-around ve space-evenly olmak üzere altı değer alır.
Order
Esnek öğelerin sıralama işlemleri için kullanılır. Eğer order özelliği ilgili kural yazılmadı ise varsayılan
olarak 0(sıfır) değerini alır. Negatif değerler de kullanılabilir ve öğeler order özellikleri kıyaslanarak
sıralanırlar.
8. Ünite - CSS 3 Flexbox 17

ÜNİTE ADI Gelişmiş CSS Kontrolleri
ÜNİTE NO 9
YAZAR EMİR SULTAN GÖKKAYA
NAVBAR BAR (GEZİNME ÇUBUĞU)

“Navigation Bar” kelimesinden türetilmiş olan “Navbar” web sayfası üzerindeki menü ya da gezinme
çubuğu olarak adlandırılabilir.
Menüsü olmayan bir web sayfası düşünülemez. Bu sebeple bir web sitesi için kullanımı kolay bir menüye
sahip olmak oldukça önemlidir. HTML ile oluşturulmuş olan yapılar CSS yardımı ile güzel görünümlü
gezinme çubuklarına dönüştürülebilir.
“Navbar” oluşturmada kullanılan en doğru yaklaşım “<ul>, <li> ve <a>” elementlerini kullanmaktır.
Vertical Navbar (Dikey Gezinme Çubuğu)
“Vertical Navbar (Dikey Gezinme Çubuğu)” adından da anlaşılacağı üzere web sayfası içerisinde dikey
olarak oluşturulmuş bir menü tipidir.
Horizontal Navbar (Yatay Gezinme Çubuğu)
“Horizontal Navbar” bir web sayfası içerisinde yatay olarak oluşturulmuş bir menü tipidir. Yatay gezinme
çubuğu tasarlanırken “<li>” elemanları “float” stil tanımı ile yan yana dizilir. Böylelikle menü elemanları
arasında yatay bir düzen oluşturulur.
IMAGE GALLERY (RESİM GALERİSİ)
CSS kullanarak bir resim galerisi ya da resimlerden oluşan bir kolaj tasarlamak mümkündür. “Image
Gallery”nin örneklerini haber, magazin, teknoloji blogları vb. gibi birçok türde web sayfasında görmek
mümkündür. “Image Gallery (Resim Galerisi)” HTML elementlerle bir yapı tasarlanıp CSS ile bu yapıya
arzu edilen görünümün kazandırılabilmesidir.
2D TRANSFORM (2 BOYUTLU DÖNÜŞTÜRME)
“2D Transform” iki boyutlu (x ve y ekseni) bir uzayda html elementlerinin yerini değiştirme, döndürmek,
ölçeklendirmek ve çarpıtmak için kullanılır. “2D Transform” özelliği çok fazla internet tarayıcısı tarafından
düşük tarayıcı sürümlerinde bile desteklenmektedir.
“2D Transform” yöntemleri;
translate
rotate
scaleX
scaleY
scale
skewX
skewY
matrix
Olmak üzere dokuz (9) başlıkta incelenebilir.
Translate
“Translate” yöntemi ile bir nesnenin konumu x ve y ekseni üzerinde belirlenen değerler doğrultusunda
değiştirilebilir.
Rotate
“Rotate” yöntemi ile bir nesne saat yönünde veya saat yönünün tersine yönde döndürülebilir.
Scale
“Scale” yöntemi ile bir nesnenin x-eksenindeki width (genişlik) ve y-eksenindeki height (yükseklik)
değerleri arttırılıp azaltılabilir.
ScaleX
“ScaleX” yöntemi ile bir nesnenin sadece x-eksenindeki width (genişlik) değeri arttırılıp azaltılabilir.
ScaleY
“ScaleY” yöntemi ile bir nesnenin sadece y-eksenindeki height (yükseklik) değeri arttırılıp azaltılabilir.
Skew
“Skew” yöntemi ile bir nesnenin x ve y-eksenlerindeki eğimi arttırılıp azaltılabilir.
9. Ünite - Gelişmiş CSS Kontrolleri 18

SkewX
“SkewX” yöntemi ile bir nesnenin x-eksenindeki eğimi arttırılıp azaltılabilir.
SkewY
“SkewY” yöntemi ile bir nesnenin y-eksenindeki eğimi arttırılıp azaltılabilir.
Matrix
“Matrix” yöntemi tüm 2 boyutlu dönüştürme metotlarının birleşimidir. “Matrix” yöntemiyle bir element
üzerinde aynı anda istenen tüm dönüştürme işlemleri uygulanabilir.
Matrix metodunun almış olduğu parametreler sırası ile “scaleX(), skewY(), skewX(), scaleY(), translateX()
ve translateY()”dir.
TRANSITIONS (GEÇİŞLER)
“CSS Transitions” teknik olarak bir html elemente ait özelliğin değiştirilmesi sırasında meydana gelen
işlemin hızını kontrol etmektir. Fare imlecinin bir “<div>” elementinin üzerine geldiğinde (hover) arka plan
renginin ya da boyutunun değişmesi gibi işlemler css geçiş komutları ile zamana yayılarak kullanıcının
gözünde daha yumuşak ve estetik görünmesi sağlanabilir. “Transitions” işlemi birçok tarayıcı tarafından
desteklenmektedir. Bu da tasarımcılara geniş bir ortamda kullanıcı deneyimini artırabilme imkanı
sağlamaktadır.
9. Ünite - Gelişmiş CSS Kontrolleri 19

ÜNİTE ADI Bootstrap v5 ile Tasarım Teknikleri
ÜNİTE NO 10
BOOTSTRAP NEDİR?
İçerisinde HTML, CSS ve JavaScript kütüphaneleri barındıran bir arayüz geliştirme kütüphanesidir. Twitter
tarafından geliştirilmiştir ve 2011 yılında kullanıma sunulmuştur.
Bootstrap Kullanmanın Avantajları
İçerisindeki hazır kütüphaneler ile kolay, hızlı ve belirli bir standart çerçevesinde arayüz tasarımları
yapmaya imkan sağlamaktadır. Bootstrap sayesinde tüm masaüstü ve mobil cihazlarla uyumlu Responsive
(Duyarlı) sayfalar oluşturulabilir.
Tarayıcı ve Cihaz Desteği
Bootstrap v5, tüm büyük tarayıcıların (Google Chrome, Firefox, Safari ve Edge) ve platformların en son,
kararlı sürümlerini destekler. Resmi olarak Bootstrap tarafından desteklenmese de Linux işletim sisteminde
de “Linux için Chromium”, “Chrome” ve “Linux için Firefox” tarayıcılarında da Bootstrap çalışmaktadır.
Bootstrap'ın HTML5 Sayfalarına Eklenmesi
Bootstrap'ın bir HTML sayfasına dahil edilebilmesi için 2 (iki) yöntem kullanılabilir. Birincisi, Bootstrap
dosyalarını yerel kaynak olarak eklemek. İkincisi ise dış kaynak olarak bir CDN servisinden faydalanılabilir.
CDN (Content Delivery Network), bir web sitesinin içeriğini en düşük ağ ve işlem gecikmesi ile yani en
hızlı bir şekilde kullanıcılara ulaştırmak üzere coğrafi olarak farklı bölgelerde konumlandırılmış sunucu
kümesine verilen isimdir. Bootstrap özellikleri elementlerin "class" tanımına eklenerek kullanılır.
LAYOUT (DÜZEN SİSTEMİ)
Layout (Düzen) sistemi Bootstrap’ın ana iskeletini oluşturan bir yapıdır. Responsive (Duyarlı) tasarımın en
önemli bileşenleri Breakpoints (Kesme Noktaları), Containers (Kapsayıcılar) ve Grid bu sistemin en önemli
bileşenleridir.
Breakpoints (Kesme Noktaları)
Responsive (duyarlı) bir tasarımın web tarayıcıda nasıl davranacağını belirleyen özelleştirilebilir genişlikler
olarak tanımlanabilir ve duyarlı tasarımın en önemli yapı taşıdır. Her bir kesme noktası 12'lik ızgara
sisteminden oluşmaktadır.
Containers (Kapsayıcılar)
Containers (Kapsayıcılar), web sayfasını belirli bir cihaz veya görünüm alanı içerisine barındıran ve
hizalayan bir yapıdır. Bootstrap’ta “<body>” etiketi içerisinde yer alan tüm elementler bir container
(kapsayıcı) <div> içerisinde yer almalıdır. 3 (üç) tür “Container (Kapsayıcı)” bulunmaktadır. Bunlar;
“container, container-fluid ve container-{breakpoint}”dir. “container”; Sabit genişlikte sayfayı ortalar. Sabit
bir genişlik değerine sahip sayfalarda tercih edilir. “container-fluid”;
Kullanılan cihaz ya da ekranı tamamen (%100) kapsar. Esnek yapılı sayfalarda tercih edilir. “container-
{breakpoint}” ise Belirtilen kesme noktasına kadar olan kısmı kapsar ve doldurur.
Grid (Izgara)
Satır ve sütunlardan oluşan flexbox ile geliştirilmiş Layout (Düzen) sisteminin bir parçasıdır. Bu sistemde
satıları tanımlamak için row, sütunları tanımlamak için ise col css tanımı kullanılır. Her bir satırda toplam 12
adet sütun bulunmaktadır. Grid, container yapısı altında çalışmaktadır. Bu sebeple satır tanımı yapılmadan
önce mutlaka bir container oluşturulmalıdır.
TYPOGRAPY (TİPOGRAFİK STİLLER)
Bootstrap içerisinde yazı tipi (font) başlık (<h>), link (<a>), listeler (<ol> ve <ul>) vb. birçok HTML
elementine ait css kodları hazır bulunmaktadır. Bu kodlar belirtilen elementleri Bootstrap standartlarına göre
yeniden biçimlendirir. Bu kodların bütünü ise Bootstrap tipografisini oluşturmaktadır.
Headings (Başlıklar <h1> ... <h6>)
Başlık(<h1> … <h6>) etiketleri Bootstrap tarafından yazı tipi, yazı boyutu, kalınlık gibi stil özellikleri
yönünden Bootstrap tipografisi çerçevesinde yeniden biçimlendirilmektedir. Ayrıca .h1 den .h6 ya kadar
olan class tanımları ile de bir HTML elementine başlık görünümü kazandırılabilir.
10. Ünite - Bootstrap v5 ile Tasarım Teknikleri 20

Yazı ve Arka Plan Renkleri
Web sayfası içerisindeki yazıları vurgulamak, ön plana çıkarmak, yönlendirme sağlamak ve bilgi vermek
için renklerden faydalanılabilir. Bootstrap bu ihtiyaçtan yola çıkarak kendi içerisinde bir renklendirme
sistemi oluşturmuştur. Böylelikle metinler istenen amaca uygun şekilde oldukça kolay bir şekilde
biçimlendirebilir.
TABLES (TABLOLAR)
Bootstrap klasik HTML tabloları daha estetik, okunabilir ve responsive bir yapıya kavuşturmaktadır.
Bootstrap ’da tablolar üzerindeki kullanıcı deneyimini iyileştirmek ve tabloların okunabilirliğini
arttırabilmek için kullanılan tablo ve satır tasarımları bulunmaktadır.
Striped (Zebra) Tablo
Striped (Zebra) tablo, “<table>” etiketinin “class” tanımına eklenen “table-striped” ifadesi ile kullanılır.
Striped (Zebra) tablolarda satırlardan biri açık biri koyu tonda renk kullanılarak oluşturulur. Böylelikle
satırlar daha kolay görülür ve okunur bir hale gelir.
Hoverable (Mouse'a Duyarlı) Tablo
Hoverable (Mouse’a Duyarlı) tablo, “<table>” etiketinin “class” tanımına eklenen “table-hover” ifadesi ile
kullanılır. Hoverable (Mouse’a Duyarlı) tablolarda mouse imlecinin üzerinde bulunduğu satır kontrast
renkle renklendirilir.
Bordered (Kenarlıklı) Tablo
Bordered (Kenarlıklı) tablo, “<table>” etiketinin “class” tanımına eklenen “table-bordered” ifadesi ile
kullanılır. Bordered (Kernarlıklı) tablolarda, satır ve sütunlarda dahil olmak üzere tablonun tamamına
kenarlık eklenir.
Responsive (Duyarlı) Tablo
Responsive (Duyarlı) tablo, “<table>” elementini içine alan bir “<div>” elementinin “class” tanımına
eklenen “table-responsive” ifadesi ile kullanılır. Tabloların her türlü cihaz ya da ekran boyutunda elverişli
bir şekilde görüntülenmesini sağlar.
10. Ünite - Bootstrap v5 ile Tasarım Teknikleri 21

ÜNİTE ADI Bootstrap v5 Form Elemanı ve Bileşenler
ÜNİTE NO 11
FORM
Form, web sayfası ile kullanıcı arasındaki etkileşimi sağlayan yapı olarak tanımlanabilir. Form aracılığı ile
kullanıcıdan istenen bilgiler kolayca alınıp arzu edilen şekilde işlenebilir. Form “<form> … </form>” etiketi
içerisinde konumlandırılan input, button, img, table vb. gibi elementlerden meydana gelir.
Form içerisindeki elementler yardımcı class tanımları ile davranış şekli ya da boyut bakımından
özelleştirilebilirler. Bu tanımlara aşağıdaki listede yer verilmiştir.
Disabled (Devre Dışı)
Kullanıcının bir sayfada yer alan formun tamamı veya bir kısmı üzerinde işlem yapması istenmeyebilir.
Böyle bir senaryoda Resim 11.1.’de yer alan örnek form tasarımındaki “<fieldset>” etiketine “disabled”
özelliği eklenerek form içerisindeki elemanların tamamı ya da bir kısmı kullanıcı etkileşimine kapatılabilir.
Readonly (Salt Okunur)
Bir formdaki “<input>” elementinde görüntülenen bilgi ya da verinin kullanıcı tarafından değiştirilmesinin
istenmediği durumlarda kullanılır. “<input>” elementine “readonly” özelliği eklenerek kullanılır.
Sizing (Boyutlandırma)
Form elementlerini varsayılan halinden daha küçük ya da daha büyük göstermek için sizing (boyutlandırma)
“class” tanımlarından faydalanılır. Elementi standart görünümünden daha küçük göstermek için “form-
control-sm”, daha büyük göstermek için ise “form-control-lg” class tanımları kullanılır.
Form Tipleri
Elementler görünüm açısından 2 (iki) farklı form yapısı içerisinde kullanılabilir. Bunlar; Horizontal (Yatay)
form ve Inline (Satır içi) formdur.
Horizontal (Yatay) Form
Satır (row) ve sütunlardan (col) oluşan bir ızgara (Grid) yapısı içerisinde elementlerin alt alta dizilerek
konumlandırılmasıyla ortaya çıkan form şeklidir. Kullanılan sütunların genişlik değerlerini ve kullanılan
cihaz ya da ekran türüne göre davranış şeklini belirlemek için “col-{breakpoint}-{sütun-değeri}” class
tanımı kullanılır. Örnek kullanım; “col-md-12”.
Inline (Satır içi) Form
Satır (row) ve sütunlardan (col) oluşan bir ızgara (Grid) yapısı içerisinde elementlerin yan yana dizilerek
konumlandırılmasıyla ortaya çıkan form şeklidir.
Form Kontrolleri
Web sayfası üzerinde kullanıcıdan bilgi girişi almak ya da bilgi toplamak için form kontrolleri kullanılır.
Kullanıcıdan seçim yaptırmak ya da klavyeden girilmesi suretiyle veri toplanabilir. Bu kontrollerden bazıları
“select, check, radio ve input group”dur.
Select (Açılır Liste)
“Select” web sayfasında açılır listeler oluşturmak için kullanılır. “<select>” etiket tanımı ile kullanılır.
Kullanıcının liste üzerinden bir ya da birden fazla seçim yapması sonucu bilgi girişi sağlanmış olur.
Bootstrap, web tarayıcıların varsayılan görünüm ve özellikteki “select” kontrolünü görsel ve fonksiyonel
açıdan iyileştirmektedir. “<select>” kontrolüne eklenen “form-select” class tanımı ile kullanılır.
Check (Onay Kutusu) ve Radio (Radyo)
Var olan seçenekler arasından bir veya birden fazla seçimin yapılabileceği durumlarda “checkbox”, sadece
bir adet seçim yapılması gereken durumlarda ise “radio” kontrolü kullanılır. Bootstrap çeşitli class tanımları
ile “checkbox” ve “radio” kontrollerini görsel ve fonksiyonel açıdan iyileştirmektedir. İlgili kontrole
eklenen “form-check” class tanımı ile kullanılır.
Input Group (Giriş Grupları)
11. Ünite - Bootstrap v5 Form Elemanı ve Bileşenler 22

“<input>” etiketi “type” özelliği sayesinde birçok görünüme ve fonksiyona sahip olabilir. Bunlardan
bazıları; button, file, text, check ve radio’dur. Input Group (Giriş Grupları) ise bu kontrollerin sağına, soluna
veya her iki tarafına metin, buton ve liste eklenmesiyle ortaya çıkan yapıdır. “Input Group” yardımıyla her
türlü ihtiyaca yönelik çok sayıda tasarım yapılabilir.
Form Validation (Doğrulama) İşlemleri
“Validation” kullanıcıdan alınan bilgilerin işlenmeden önce kontrol edilmesini sağlayan bir yapıdır. Sayfa
üzerindeki bir alan için veri girişinin zorunlu hale getirilmesi, girilen verinin istenen türde, formatta,
uzunlukta veya aralıkta olup olmadığının kontrol edilmesi “validation (doğrulama)” işlemleri ile sağlanır.
Bootstrap ile “form validation” işlemini gerçekleştirmek için öncelikle “<form>” elementinin class tanımına
“needs-validation” ve “<form>” elementine “novalidate” özelliği eklenmelidir.
COMPONENTS
“Component”, bileşen anlamına gelmektedir. Bootstrap bir web sitesinin geliştirilebilmesi için gerekli olan
buton, açılır liste, gezinme çubuğu gibi birçok bileşene sahiptir. Bu bileşenler web sayfasını yapılandırmak
için kullanılabilir ve kullanıcının ihtiyaçlarına göre özelleştirilebilir. Bootstrap’te yer alan bileşenlerden
bazıları şu şekildedir;
Accordion
Akordeon şeklinde dikey olarak açılıp kapanabilen paneller olarak tanımlanabilir. Varsayılan çalışma şekli;
bir panelin içeriği görüntülenirken diğer paneller daraltılmak suretiyle kapatılır.
Alert
Web sayfası üzerinde kullanıcıya geri dönüş mesajları vermek için kullanılan esnek mesaj yapısıdır. Hemen
her türde mesaj türü (bilgi, uyarı, hata vb.) için özelleştirilebilir. “alert-info, alert-warning, alert-success” vb.
gibi anlamsal ifadelerle biçimlendirilebilirler.
Badge
“Badge”, web sayfasında yer alan bir bileşenin içerdiği ifadeye dikkat çekmek, verileri etiketlemek ya da
adet bildiriminde bulunmak için kullanılabilir. “Badge” bileşeni sosyal medya uygulamalarında, Gmail ve
Hotmail gibi mail servislerinde sıkça kullanılmaktadır.
Breadcrumb
“Breadcrumb”, neredeyse her web sayfasında bulunan geçerli sayfanın konumunu CSS yardımıyla
hiyerarşik bir şekilde gösteren bir bileşendir.
Button
“Button”lar web sayfası üzerinde kullanıcı etkileşiminin en önemli parçasıdır. Hemen her sayfada
bulunurlar ve her birinin farklı bir işlevi vardır. Bootstrap anlamsal renk tanımları “button”lar üzerinde de
kullanılabilmektedir. Böylece sayfadaki “button”lar fonksiyonları doğrultusunda görsel olarak
biçimlendirilebilir.
Card
Bootstrap’in daha önceki sürümlerinde yer alan “Well, Panel ve Thumbnail” bileşenlerinin yerine
Bootstrap’ın 4 sürümünde bunların hepsini kapsayan ve daha gelişmiş olan “Card” bileşeni
kullanılmaktadır. Birden çok değişken ve seçenek içeren, esnek ve aynı zamanda genişletilebilir yapıya
sahip bir bileşendir.
List Group
“Standart HTML yapısı içerisinde de yer alan “<ol> ve <ul>” listelerinin Bootstrap ile davranış, görünüş ve
fonksiyonel olarak geliştirilmiş halidir.
“<ol> ya da <ul>” elementinin class tanımına eklenen “list-group”, liste elamanlarının ise (“<li>”) class
tanımına eklenen “list-group-item” ifadesi ile kullanılır.
Modal
Kullanıcı ile etkileşim sağlamak için kullanılan bir çeşit iletişim aracıdır. “Modal” aracılığı ile kullanıcıya
uyarı, bilgi, hata vb. gibi mesajları verilebilir, kullanıcıdan işlem onayı alınabilir ya da bilgi toplamak için
kullanılabilir. “Modal” JavaScript yardımıyla çalışan bir bileşendir. Kullanıldığı sayfada iki şekilde aktif
edilerek kullanılabilir. Birinci yöntem “data” özelliklerini kullanarak, ikincisi ise “JavaScript” kodu ile
aktifleştirilebilir.
Tab
“Tab” bileşeni web tasarımında sıkça kullanılan bir bileşendir. İçeriklerin yatay ya da dikey sekmeler
halinde gruplandırılarak gösterilmesini sağlar. “Modal” bileşeninde olduğu “Tab” bileşeni de “data”
özellikleri ya da JavaScript ile aktif edilerek kullanılabilir.
Navbar
Bir web sayfası üzerindeki menü ya da gezinme çubuğu olarak adlandırılabilir. En önemli özelliği
responsive olması ve üzerinde eleman barındırabilir yapıda olmasıdır.
Toast
“Toast”, bir web sayfası üzerinde işlem gerçekleştiren kullanıcıya işlem sonrası duruma yönelik bilgi, uyarı
ya da hata sonucunu bildirmek için kullanılabilen bir bileşendir. “Toast” bileşeni “JavaScript” ile birlikte
kullanılır ve 3 (üç) adet parametreye sahiptir. Bunlar;

animation: Boolean türünden değer alır ve Toast’a CSS fade efekti ekler.
autohide: Boolean türünden değer alır ve Toast’ın otomatik kaybolmasını sağlar.
delay: number türünden değer alır ve Toast’ın otomatik kaybolması için geçmesi gereken
milisaniye cinsinden süredir.

ÜNİTE ADI Duyarlı ve Uyarlanabilir Web Tasarımı
ÜNİTE NO 12
YAZAR Öğr. Gör. EBUBEKİR KABA
Günümüzde teknolojinin gelişmesiyle birlikte bilgi üretimi ve paylaşılması da artmıştır. Buna bağlı olarak
zaman ve mekândan bağımsız bir şekilde bilgiye erişmek isteyen kişi sayısında da artış görülmektedir. Bu
artış ile birlikte mobil cihazların kullanım oranı da artmaktadır. İnsanlar bilgisayar yerine mobil cihazları ile
web sitelerine giriş yapmaktadır.
Mobil Uyumlu Web Site
Mobil uyumlu web sayfaları, farklı çözünürlük ve boyutlardaki cihazlarda ideal görüntülenmesi için
tasarlanan web sayfalarıdır.
DUYARLI (RESPONSIVE) TASARIM
Duyarlı Web Tasarımı ilk olarak 2010 yılında tasarımcı ve geliştirici Ethan Marcotte tarafından yazılan
makale ile tanımlanmıştır. Duyarlı Web Tasarımı, tek bir site ve içerik ile ekran boyutuna göre ideal
görüntüleme deneyimini sağlayan tasarımlardır.
Özellikleri:
• Duyarlı tasarım 3 prensip üzerine kurulmaktadır. (Modüler ızgara yapı, web site bileşenlerinin
ekran boyutuna göre düzenlenmesi, medya sorguları ile ekran çözünürlüğüne göre farklı stillerin
ayarlanması)
• JavaScript bağlama zorunluluğu yoktur.
• Duyarlı düzen, farklı cihazlardaki site öğelerinin nasıl görüneceğini belirler.
• Duyarlı tasarım, sayfadaki öğelerin nesne modeli ile çalışmaz,
• Duyarlı tasarım farklı cihazlarda benzer bir tasarım düzeni sunmaktadır.
Avantajları:
• Arama motoru optimizasyonu açısından daha avantajlıdır.
• Daha az emek ve çaba ile oluşturulabilir.
• Tek bir alan adı ve link ile paylaşılması kolaydır.
Dezavanjtajları:
• Farklı ekranlara göre esnek boyutlandırmada sınırlıdır.
• Uyarlanabilir sitelere göre daha yavaştır.
• Her ekran boyutuna göre içerikler boyutlandırıldığı için her zaman ideal kullanıcı deneyimi
sunmayabilir.
UYARLANABİLİR (ADAPTIVE) TASARIM
Uyarlanabilir web tasarımında her ölçü için ayrı ayrı kontrol sağlanabilmektedir. Bu sayede farklı
boyutlardaki cihazlarda özel tasarımlar yapabilmeyi sağlamaktadır. Burada tek bir HTML kodu ile tüm
cihazlara uygun tasarım yapmak yerine farklı ekran boyutlarına göre farklı tasarımların yapılması
gerekmektedir.
Özellikleri:
• Farklı ekranlara göre site bileşenleri özelleştirilebilir.
• JavaScript kodları uyarlanabilir tasarımlarda web site bileşenlerini kontrol etmek için
kullanılabilir.
• Hedef kitleye uygun özel tasarımlar yapabilme imkânı sunulmaktadır.
DUYARLI (RESPONSIVE) VE UYARLANABİLİR (ADAPTIVE) TASARIM ARASINDAKİ FARK
Hem uyarlanabilir hem de duyarlı tasarımlar, mobil uyumlu web siteleri olduğu için iki prensipte de farklı
ekran boyutlarına göre tasarım yapılmaktadır. İki kavramda birbirine benzer olsa da bazı farklılıkları
bulunmaktadır. Bunlar:
İçerik: Duyarlı tasarımda cihaz boyutuna göre içeriklerin yeniden konumlandırılması yapılırken
uyarlanabilir tasarımda ise cihaz boyutuna göre komut dosyalarının belirli düzende sunulması ile
oluşmaktadır.
Yenilikçilik: Piyasa yeni bir cihaz (ekran boyutu farklı) sürülmesi halinde duyarlı tasarım hemen
adapte olabilirken, uyarlanabilir tasarım için sunucu kodlarında tekrar bir düzenleme yapılması
12. Ünite - Duyarlı ve Uyarlanabilir Web Tasarımı 25

gerekmektedir.
Hız: Duyarlı web siteleri uyarlanabilir web sitelerine göre önemli ölçüde yavaştır.
Esneklik: Tek bir içeriğin farklı ekranlara göre boyutlandırılması yapıldığı için duyarlı tasarımlar
uyarlanabilir tasarımlara göre daha sınırlı yapıdadır.
Web Site Uyumluluk Testi: . Mobil uyumluluk için ücretli / lisanslı bazı yazılımlar yanı sıra ücretsiz çevrim
içi test edilebilecek siteler de bulunmaktadır. Yapmış olduğunuz web sitesini ücretsiz mobil uyumluluk
sitelerinde test edebilirsiniz.
DUYARLI WEB SİTE TASARIMI NASIL YAPILIR?

Mobil uyumlu web site tasarımı yaparken, kullanıcının mobil cihazdan bağlandığını tarayıcının anlaması
gerekmektedir. Tarayıcının içeriği hangi cihaza göre ayarlayacağını belirtmek için ise name=”viewport”
yapısı kullanılmalıdır. HTML’de <head> etiketleri arasında <meta> etiketinin açılıp name parametresine ise
“viewport” olarak tanımlanması gerekmektedir.
Kod:
Ayrıca media etiketi de mobil uyumlu siteler oluşturulurken kullanılan önemli etiketlerden biridir. Pencere
boyutundan font büyüklüğüne kadar tüm HTML etiketlerini piksellere göre belirlemek için media etiketi
kullanılmaktadır.
Kod: Media etiketi örnek kullanım
MOBİL UYUMLU WEB SİTE KÜTÜPHANELERİ (FRAMEWORK)

CSS kodları ile sıfırdan mobil uyumlu site yapılabildiği gibi “Mobil Uyumlu Web Site Kütüphaneleri”
kullanılarak da siteler yapılabilmektedir. Bu kütüphaneler daha önceden yazılmış CSS kodlarının kendi
projemizde kullanılması ile oluşmaktadır. Piyasada birçok CSS kütüphanesi (framework) bulunmaktadır.
Bunlardan en çok kullanılanı Bootstrap, Semantic UI ve Foundation’dır.
12. Ünite - Duyarlı ve Uyarlanabilir Web Tasarımı 26

ÜNİTE ADI Çapraz Tarayıcı Uyumluluğu ve Testleri
ÜNİTE NO 13
YAZAR Öğr. Gör. GÖKHAN TUTAR
2000’li yılların başında beri internet kullanıcılarının sayıları hızla artmaya başlamıştır. Bugün dünyadaki
internete erişebilen kişi sayısı 2000’li yılların başına göre çok daha fazla artmıştır. İnternet gündelik hayatın
vazgeçilmezi haline gelmiştir. Eğlence alnından işletmelerin tanıtımına hatta gündelik alışverişe kadar her
yerde internet üzerinden işlemler yapılmaktadır. Bu sayede web programlamanın önemi artmış ve kendine
yeni pazarlar oluşturmuştur.
Oluşturulan ilk tarayıcıların başında Microsoft tarafından geliştirilen Internet Explorer adlı tarayıcı
gelmektedir. Internet Explorer1990’lı yılların başında çok fazla popülerdi. 2000’li yıllarda ise yazılım
firmaları ardı ardına tarayıcılar çıkarmaya başladı. Bu tarayıcılardan bazıları; Firefox, Safari, Opera ve
Chrome dir.
Tarayıcı sayılarının artması sonucunda bir karmaşa meydana gelmiş ve bir standart oluşturulma ihtiyacı
doğmuştur. Bu standartları oluşturmak için 1994 yılında W3C (World Wide Web) adında bir konsorsiyum
kurulmuştur. Konsorsiyum Netscape ve Microsoft gibi diğer şirketlerle birlikte "ECMAScript" adlı tarayıcı
komut dili için bir standart geliştirilmiştir. ECMAScript 2015 yılındaki büyük çaplı bir revizyondan sonra
JavaScript olarak anılmaya başlandı. Standardın ilk versiyonu 1997'de yayınlandı. ECMAScript'in
standardizasyonundan sonra W3C, Document Object Model (DOM) standardizasyonu üzerinde çalışmaya
başladı. 2005 yılına gelindiğinde, DOM'un büyük bir bölümü Internet Explorer, Opera, Safari ve Gecko
tabanlı tarayıcılar (Firefox, SeaMonkey ve Camino gibi) tarafından desteklendi. Standartlar karmaşayı
azaltsa da karmaşa tamamen sona ermemiştir.
Tarayıcı sayılarının artması sitelerin farklı tarayıcılarda farklı görünmesi veya istenilenden farklı işlem
yapmasına neden oldu. Sitenin farklı tarayıcılarda farklı davranışlar sergilenmesinin asıl nedeni tarayıcı
firmalarının kullanıcıları çekmek için tarayıcılarına yeni özellikler eklemesidir. Örnek olarak; bir firmanın
tarayıcısı yeni bir özellik geliştirdiğinde bu özellik diğer tarayıcılar tarafından henüz bilinmediği için yeni
özelliğin kodu diğer tarayıcılarda hata verecek veya çalışmayacaktır. Bu tarayıcı yarışı internetin var oluş
tarihine yakın olmakla beraber CSS3 ve HTML5 teknolojilerinin ortaya çıkmasıyla en üst zirvesine
çıkmıştır. Çünkü CSS3 ve HTML5 sayesinde web programlamaya çok sayıda yeni özellik gelmiştir. Tabi bir
de mobil teknolojilerin gelişmesi akıllı telefon, tablet hatta televizyonlarda bile tarayıcı ihtiyacını
doğurmuştur. Bu kadar çok ortam ve tarayıcının bulunması tarayıcı uyumluluğunu zorunlu kılmıştır.
Çapraz tarayıcı uyumluluk testlerinde tek etken tarayıcı değildir. İşletim sistemi de çapraz tarayıcı
uyumluluk testlerine etki etmektedir. Aynı tarayıcı dahi olsa farklı işletim sistemlerin farklı davranması
gerekebilir. Örneğin bilgisayarlar için geliştirilen Chrome tarayıcısı ile mobil cihazlar için geliştirilen
Chrome tarayıcısı farklı davranmak zorundadır. Çünkü en basitinden mobil cihazlarda sıklıkla kullanılan
sağa veya sola kaydırma işlemi masa üstü bilgisayarlarda pek kullanılmamaktadır..
ÇAPRAZ TARAYICI UYUMLULUĞU VE TESTİ NEDİR?

Çapraz tarayıcı uyumluluğu en genel tabirle geliştirilen web sitesinin veya web uygulamasının herhangi bir
tarayıcıda beklendiği gibi çalışıp çalışmadığı anlamına gelir. Web sitesinin veya web uygulamasının
herhangi bir web tarayıcısında amaçlandığı gibi çalıştığını test etme işlemine ise çapraz tarayıcı uyumluluk
testi denir.
Günümüzde internet kullanıcıları kendilerinin istediği tarayıcısını seçmekte özgürdürler. Kullanıcıların
tarayıcı seçimi web siteleri veya uygulamalarının ziyaret sürelerini bile etkileyebilmektedir. Çapraz tarayıcı
uyumluluğu ayrıca geliştiricilerin daha planlı ve performanslı yazılımlar ortaya çıkarmasına olanak sağlar.
Çapraz tarayıcı uyumluluğu testleri 5 ana parçada incelenebilir. Bunlar; kod, ara yüz, davranış, mobil ve
performans uyumluluklarıdır.
Kod uyumluluğu: CSS ve JavaScript kodlarının farklı tarayıcılarda geçerli olup olmadığını kontrol eder.
Ara yüz uyumluluğu: Web sitesinin istenilen şekilde görünüp görünmediğini kontrol eder.
Davranış uyumluluğu: Web sitesi istenildiği gibi davranıp davranmadığını kontrol eder. Örneğin sitede
13. Ünite - Çapraz Tarayıcı Uyumluluğu ve Testleri 27

bir butona tıklandığında yeni pencerede bir sayfa açıyorsa bu işlem bütün tarayıcılarda gerçekleşip
gerçekleşmediğini kontrol eder.
Mobil uyumluluk: Responsive tasarımdaki sitenin farklı mobil cihazlarda farklı çözünürlükteki görünümünü
kontrol eder. Ayrıca mobil cihazın yatay veya dikey çevrilmesi sonucundaki oluşacak görüntüyü de kontrol
eder.
Performans uyumluluğu: Sitenin farklı tarayıcılardaki performansına bakarak performansların yakın olup
olmadığını kontrol eder.
ÇAPRAZ TARAYICI UYUMLULUĞU TESTİNİN UYGULANIŞI
Çapraz tarayıcı uyumluluğu sorununu gidermek zor ve karmaşık bir süreçtir. Bu süreçte bir sürü karar alma
gerçekleşecektir. Bu kararları alırken kullanıcıların tercih ettiği tarayıcı veya işletim sistemi gibi istatiksel
bilgiler tarayıcı uyumluluğunda fayda sağlayacaktır.
Çapraz tarayıcı uyumluluk testini uygulamadan önce hedef kitlenin incelenmesi çok önemlidir. Çünkü daha
öncede belirtildiği gibi sitenin bütün tarayıcılar için uyumlu hale getirilmesi çok zor bir işlemdir. Bütün
tarayıcılara uyumlu hale getirmek yerine hedef kitlenin kullandığı tarayıcı ve işletim sistemine uyumlu hale
getirmek daha uygun olacaktır.
Tarayıcıların kullanımı oranı veya farklı alanlarda en çok kullanılan mobil/web tarayıcıları gibi çeşitli
araştırmalar yapılmaktadır. Bu araştırmaları takip ederek hangi tarayıcıların kullanıcılar tarafından daha çok
tercih edildiğini görebilir ve uyumluluk testini bu bilgiler doğrultusunda gerçekleştirilebilir.
Çapraz Tarayıcı Uyumluluğu Sorununun Yaygın Nedenleri
Çapraz tarayıcı uyumluluğu çalışmalarında çok fazla sorun ile karşılaşılabilmektedir. Karşılaşılabilecek
sorunlardan bazıları;
DOCTYPE Kullanımı: DOCTYPE etiketinin kullanımı büyük fark oluşmasına neden olmaktadır.
DOCTYPE etiketi tarayıcıya dokümanın tip bilgisini sunmak için kullanılmaktadır. Bu etiket sayesinde
tarayıcı sayfada hangi HTML sürümü kullanıldığı anlamış olacaktır.
CSS Sıfırlama: Web sitesinin sayfalarında CSS kodları ekli olmasa dahi tarayıcılar kendi sitillerini sayfaya
uygulamaktadır. Yani her tarayıcıların kendine göre varsayılan değerleri vardır ve bu değerler farklılık
gösterebilmektedir. Örnek olarak A tarayıcısında tabloya border (çerçeve çizgisi) değeri verilmediği halde
otomatik olarak eklenirken B tarayıcısında bu durum tam tersi olabilir. Bundan dolayı web sitesindeki
sayfalarda sıfırlayıcı bir CSS dosyası eklenmesi tarayıcı uyumluluğu işlemini kolaylaştıracaktır. Sıfırlayıcı
CSS dosyalarını internetten “reset css” yazarak bulabilirsiniz.
Eğer sitenizde bootstrap gibi framework kullanıyorsanız CSS sıfırlamaya ihtiyacınız olmayacaktır. Çünkü
bu frameworklerin kendi CSS sıfırlamaları mevcuttur.
Tarayıcıya özel CSS kullanımı: Bazı tarayıcılar kendilerine has CSS özellikleri geliştirirler. Eğer
bu yeni özellik kullanıcılar tarafından benimsenirse diğer tarayıcılar da bu özelliği kendi tarayıcılarına
eklerler. Tabi bu özelliğin kullanımı her tarayıcıda farklı kodla olması işleri biraz karıştırır. Bundan dolayı
tarayıcıya has özelliklerin diğer tarayıcılarda çalıştığını kontrol etmek gerekir. Bir CSS kodunun tarayıcıya
has olup olmadığını anlamak için kodun başına bakılması yeterlidir. Eğer kodun başında “-“ işareti var ise
bu kod genellikle tarayıcıya has bir özelliktir. Bu özelliğin hangi tarayıcıya has olduğunu belirlemek için de
“-” işaretinden sonraki kelimeye bakmak yeterli olacaktır. Aşağıdaki örnekte bazı tarayıcıların kendilerine
has özelliklerin hangi ek ile uygulandığı gösterilmektedir. Yani bir CSS kodunun başında “-moz” ifadesi
eklenmişse bu özellik sadece Firefox tarayıcısında çalışacaktır. Diğer tarayıcılar bu kodu tanımayacak ve
hiçbir işlem yapmayacaktır.
HTML kodlarının doğru şekilde kullanımı: HTML kodları genellikle açma ve kapatma taglarından oluşur.
Kod satırlarında açma tag’ını kullanıp kapatma tagı kullanılmazsa tarayıcılar bunu anlayamayabilir ve site
görünümünde istenilen sonuç elde edilmez. Bazı tarayıcılar kapatma tagı kullanılmasa da bunu anlayarak
otomatik olarak kapatma tag’ı eklemektedirler. Ancak bütün tarayıcılar bu özelliğe sahip değildir. HTML
kodlarında bazı tag’ların kapatma tag’ı bulunmaz bu tag’a örnek olarak “br” tag’ı verilebilir. Aşağıdaki
örnekte “br” tagının doğru ve yanlış kullanımları verilmiştir.
Eski Tarayıcı Algılama: Bazı tarayıcılar tam gelişmemiş veya güncellememiş sürüme sahip olduğundan
dolayı JavaScript kodlarını çalıştıramayabilir. Kullanıcılar bu tür tarayıcılar ile siteye giriş yaptığında
JavaScript çalışmadığı tespit ederek kullanıcıya uyarı verilmesi gerekir.
En yeni özellik kullanımı: Web programlamada gelişim ve yenilikler çok hızlı gerçekleşmektedir.
Neredeyse her gün yeni bir fikir ortaya atılarak uygulamaya koyulabilmektedir. Her ne kadar web
programlamadaki bu gelişmeler yazılımcıları heyecanlandırsa da tarayıcıların en yeni özellikleri anında
uygulama koymak tarayıcı uyumluluğu için büyük sorun teşkil etmektedir. Bundan dolayı eklenen yeni
özellikler yaygınlaşana kadar kullanılmaması veya kullanıcının tarayıcısına göre uygulamaya konmalıdır.
ÇAPRAZ TARAYICI UYUMLULUĞU TEST ARAÇLARI

Çapraz tarayıcı uyumluğunu gerçekleştirmek için temelde iki yöntem ile yapılabilmektedir. Bunlardan
birincisi manuel testtir. Manuel testte belirlediğiniz hedef kullanıcıların en çok kullandıkları tarayıcılarda
sitenize tek tek girerek kontrol etmektir. Tabi bu kontrol sitenin bütün sayfaları için tek tek

gerçekleştirilmelidir. Her bir sayfada bulunan buton ve diğer elementler tek tek tıklanarak çalışıp
çalışmadığı kontrol edilmelidir. Bu işlem zahmetli bir iştir ve çok uzun sürebilir. Ayrıca bu işleme insan
dâhil olduğu için süreçte bazı hatalar veya yanlışlıkla gözden kaçırmalar olabilir. Bundan dolayı bu yöntem
çok tercih edilmemektedir.
Çapraz tarayıcı uyumluluğu testi için kullanılan diğer yöntem ise otomatiktir. Bu yöntemde bir yazılım
siteyi ziyaret ederek uyumluluk testini belirlenen kurallara göre otomatik yapılmaktadır. Tabi bu yöntemi
kullanmak için gerekli olan araçlar ücretlidir.
Bu ünitede anlatılacak çapraz tarayıcı uyumluluğu araçları testleri otomatik yapmayacaktır. Sadece testi
uygulayacak kişiye uygun ortamı sağlayacaktır.
Browserling
Bazı araçlar çapraz tarayıcı uyumluluğunu testlerini yarı otomatik yapmaktadır. Yani size belirli ortamlar
sağlayarak sitenizi ziyaret etme imkânı tanırlar. Bu sayede siz de belirlediğiniz ortamda sitenizi kontrol
ederek çapraz tarayıcı uyumluluğu için gerekli düzenlemeleri yapabilirsiniz. Bu tür araçlardan birisi de
https://www.browserling.com/ sitesinde bulunmaktadır. Browserling sitesi bilgisayarınıza farklı işletim
sistemleri veya tarayıcılar yüklemeye gerek kalmadan sitenizin seçtiğiniz tarayıcı ve işletim sistemlerinde
nasıl göründüğüne bakabilir ve buna göre gerekli düzenlemeleri gerçekleştirebilirsiniz. Browserling’in en
büyük avantajı bilgisayarınıza herhangi bir program veya eklenti yüklemeye gerek kalmadan işlemleri
gerçekleştirebilmesidir.
TestComplate
Testin biraz daha otomatik işlemler yaparak işinizi kolaylaştırmasını istiyorsanız SmartBear firmasının
TestComplate programını kullanabilirsiniz. Bu program belirli bir ücret karşılığında edinilebilir. Tabi
programın deneme sürümü ücretsiz kullanılabilir. TestComplate programı Browsering’in aksine bir exe
dosyası olarak bilgisayarınıza indirilerek kullanılır. TestComplate programı kullanılarak bir plan oluşturulur
ve oluşturulan bu plan diğer tarayıcılarda otomatik uygulanabilir. Yapılan bütün işlemlerin ekran görüntüleri
de program tarafından otomatik olarak alınarak kullanıcıya sunulur.
Ghostlab
Çapraz tarayıcı uyumluluğunda kullanılabilecek diğer bir araç Ghostlab programıdır. Bu programı 2021
yılından itibaren ücretsizdir. Ghostlab programı girilen web siteyi eş zamanlı olarak farklı tarayıcılarda
açmaktadır. Site üzerinde yapılan bir değişiklik yine eş zamanlı olarak diğer tarayıcılarda da
uygulanmaktadır. Örnek olarak Ghostlab programına “atauni.edu.tr” adresini girdiniz ve iki farklı tarayıcıyı
açtınız. Açtığınız tarayıcılardan birinde bir butona tıkladığınızda Ghotslab tarafından diğer tarayıcıda aynı
butona tıklanır.

ÜNİTE ADI Wireframe, Mockups ve Prototipler
ÜNİTE NO 14
YAZAR Öğr. Gör. ENES SAĞIROĞLU
WİREFRAME
Bir işin sistematik ve düzenli olarak işlemesini istiyorsak; doğru bir algoritma üzerinde, planlı bir
şekilde çalışmalıyız. WireFrame, UX tasarımcıları tarafından kullanılan ve bir web sitesi, uygulama veya
ürün için tasarımlarının bilgi hiyerarşisini tanımlamalarına ve planlamalarına olanak tanıyan bir
uygulamadır. Bu süreç, kullanıcı deneyimi tasarımcıları tarafından hali hazırda gerçekleştirilen kullanıcı
araştırmasına dayanarak, tasarımcının veya müşterinin kullanıcının bir sitedeki bilgileri nasıl işlemesini
istediğine odaklanır.
Ekranlar için tasarım yaparken, kodla herhangi bir şey oluşturmadan önce tüm bilgilerin diyagramlarda
nereye gideceğini bilmeniz gerekir. Wireframe; renklerin, yazı stillerinin veya metnin dikkat dağıtıcı
unsurları olmadan, geliştirilmek istenen arayüz düzenini ve etkileşimini planlamanıza olanak tanır.
Wireframe için yaygın olarak kullanılan argüman, bir kullanıcı site sayfanızın elle çizilmiş bir diyagramında
nereye gideceğini bilmiyorsa, sonunda hangi renklerin veya dikkat çekici nesnelerin kullanılacağının
alakasız olmasıdır.
Wireframe, hiçbir şekilde kod yazımına ihtiyaç duymadan, proje aşamalarını, kurgusunu;
müşteriye ve yazılımcılara gösterme imkânı sunmaktadır. Bu şekilde bakıldığı zaman WireFrame aslında
bir web sitesinin mimari iskeletinin oluşturulma aşaması diyebiliriz.
WireFrame Hazırlamanın Avantajları
Araştırma Yapmak: Wireframe bir tasarım aşamasında çok bir planlama aşaması olduğu için geliştirilecek
web sitesi veya ürün için kapsamlı bir araştırma yapılması gerekiyor. Bu adım wireframe hazırlanması için
önemli bir adımdır.
Kullanıcı Akış Haritası Hazırlamak: Web sitenizde üretilmesi gereken ekranların sayısı ve bu ekranların
kullanıcılara hangi akış ile gösterileceğinin belirlenmesi gerekir. Akış, kullanıcıların nereden geleceği ve
nereye gideceğini bilerler. Bu aşamanın doğru hazırlanması, kullanıcıların web sitesi üzerinde yapmak
istediklerini daha kolay ve anlaşılır yapması için önemlidir.
Tasarım Ortamının Belirlenmesi: Wireframeler boş bir kâğıt üzerine kalemle de hazırlanabildiği gibi bazı
tasarım araçları da kullanılabilir. Yöntem fark etmeksizin bu aşamada diğer aşamalarda belirlenen konular
renk, yazı stili, ekran boyutu gibi tasarımı ilgilendiren konular dikkate alınmadan, sade bir şekilde ortaya
konur.
MOCK-UP
Mock-up; web sitelerinden mobil uygulamalarda, bir model çerçevesinde uygulanacak alan tasarımın
yüzeyde nasıl görüneceğinin belirlenmesi amacıyla kullanılır. Mock-up çalışmaları, başlangıçta kartvizit,
broşür, katalog çalışmaları gibi ürünlerde kurumsal kimlik oluşturmak amacıyla kullanılırdı. Son yıllarda izi
tüm dijital ortam ürünleri için kullanılmaktadır. Görseller, metin kullanımı, tipografi, renkler ve diğer grafik
elemanları mock-up çalışmasında ele alınır. Görünümünü, temel fonksiyonları ve etkileşimleri ifade eder.
Bir web sitesi için mock-up, son kullanıcı tarafından nasıl görüneceği ile birlikte temel fonksiyonların ve
kullanıcı etkileşimlerinin bir senaryosunu kapsar.
Mock-up Hazırlama Aşamaları
İçerik Düzeni
Bir web sitesinde içeriği bir sayfada veya ekrana nasıl görüneceğinin belirlendiği kısımdır. İçerik dizeni,
kullanıcı deneyimi dikkate alınarak hazırlanmalıdır.
Kullanıcı deneyimleri üzerinde yapılan detaylı çalışmalar sonucunda bazı temel tasarım modelleri ortaya
çıkmıştır. İçerik düzeni belirlenirken yeni kullanıcı deneyimi çalışmaları yapılarak yeni bir model
oluşturulabileceği gibi, önceki çalışmalardan ortaya konulmuş olan tasarım modellerinden de
faydalanılabilir. Bu tasarım modellerinden en yaygın olarak kullanılanlar aşağıdakilerdir:
F-Deseni Tasarım Modeli: Yoğun içerik bloklarının kullanıldığı durumlarda insan gözünün bu blokları
tararken hareket ettiği yolu açıklamaya çalışmıştır. Uzun makalelerin, haber sayfalarının, metin bloklarının
olduğu detaylı içerik sunan alt sayfalarda bu tasarım modelinin kullanılması doğru bir yaklaşım olacaktır.
Yoğun içeriği olan ve metin odaklı sayfalarda F-Deseni tasarım modeli tercih
14. Ünite - Wireframe, Mockups ve Prototipler 30

edilmelidir.
Z-Deseni Tasarım Modeli: Sadece metin odaklı olmayan, içeriğe göre uzayıp kısalabilen sayfa veya
ekranlarda kullanılır. İnsan gözünün daha az yoğun içeriklerde hareket ettiği yolu dikkate alır. Daha basit
olan ve az sayıdaki içeriğin gösterilmesinin amaçlandığı tasarımlar için Z-Deseni tasarım modeli tercih
edilmelidir.
Gutenberg Dİyagramı Tasarım Modeli: Az yoğunlukta ve genellikle tek sayfadan veya ekrandan oluşan
çalışmalarda insan gözünün hareket ettiği yolu açıklamaya çalışmıştır.
Renk Şeması
Renk şeması, projenizde kullandığınız gölgeleri ve renkleri ifade eder. Farklı renkler kullanıcıda farklı
duygular uyandırır. Renkler kullanıcı deneyimini ve davranışını etkileyebileceğinden, her biri renk
dikkatlice seçilmelidir. Metninizin okunaklı olması ve öğelerin görünür olması için renk kontrastına da
dikkat edilmelidir. Nitekim araştırmalar, tüketicilerin %85'e kadarının belirli bir ürünü seçerken rengin en
büyük motivasyon olduğuna inandığını, %92'sinin ise genel olarak en ikna edici pazarlama faktörü olarak
görsel görünümü kabul ettiğini gösteriyor.
Her rengin bir anlamı vardır. Bazı renklerin insanlarda uyandırdığı izlenimler aşağıdaki gibidir:
Kırmızı: Tehlike, heyecan ve enerji ile ilişkilendirilir.
Pembe: kadınlara hitap eden bir renktir. Sıcak pembe gibi farklı tonlar gençlik ve cesareti ifade edebilir.
Turuncu: Genellikle tazeliği ve canlılığı ifade eder. Macera, özgünlük ve uygun maliyeti ile de
ilişkilendirilir.
Sarı: iyimserlik çağrıştırır. Eğlenceli ve mutlu olmakla ilişkilendirilir.
Yeşil: Genellikle doğayı ve sürdürülebilirliği temsil etmek için kullanılır. Prestij ve zenginlik ile de
uyumludur.
Mavi: Güvenli ve güvenilirliği ifade eder. Sakinleştirici bir renktir.
Kahverengi: Gerçekçiliği ve dürüstlüğü temsil der. Genellikle organik ürünlerde veya sağlık ürünlerinde
kullanılır.
Beyaz: Sadeliği ifade der. Genellikle minimalist yaklaşımları temsil etmek için kullanılır.
Tipografi
Tipografi, harf, sayı ve semboller kullanılarak ortaya çıkarılan yazı sanatıdır. Yazı türleri, boyutları, stilleri,
metin aralığı, hizalama gibi konularla ilgilenir. Bir web sitesi üzerindeki metinlerin tipografisi doğru bir
şekilde planlanmalıdır. Metinler için seçilen özellikler kullanıcıyı yormamalı ve dikkat dağıtıcı olmamalıdır.
Boşluk
Boşluk, hangi alanın boş bırakılacağı ve hangi alanın doldurulacağı kararıdır. Negatif alan, sayfanızın boş
kalması ve aşırı yüklenmesi arasında ideal bir denge kurmanızı sağlayan en güçlü tasarım araçlarından
biridir.
Navigasyon Görselleri
Bu aşamaya kadar mimarisi oluşturulmuş olan yönlendirmelerin nasıl görüneceği bu aşamada belirlenir.
Açılır menüler, yan ve alt bilgiler, oklar, geçişler ve kaydırmalar gibi yönlendirme görsellerinin seçimi
yapılır.
Diğer Görseller
Arka plan resimleri, simgeler ve diğer dekoratif öğelerin seçimleri bu aşamada yapılır.
Prototip
Prototip, herhangi bir somut nesnenin veya olgunun, sürecin geri kalanı için bir örnek teşkil eden ilk ve en
ilkel temsilidir. Bir web sitesi için prototip, web sitesinin yayınlanmadan önce neye benzeyeceğini,
işlevlerini ve amacını gösteren, son halinin bir simülasyonudur. Tasarım sürecinde önemli bir adımdır.
Yapılan çalışmadaki fikirleri gösterir. Son ürünün bir provası da denebilir.
Prototip çalışmaları, gerçek kullanıcılara sunulabilir ve gelecek olan geri bildirimlerle web sitesine gerekli
görülen değişiklikler yapılır. Geliştirilen çalışma ile ilgili müşteri, kullanıcı grubu veya yazılım ekibinin
aklındaki soru işaretlerine cevap verebilecek özellikleri basit ölçülerde sunan tasarım sürecidir. İsteğe bağlı
olarak prototiplerin kapsamı, nihai ürünün hangi özelliklerini içermesi gerektiği, ne kadar kısıtlı olması
gerektiği gibi konular tasarım ekibi ve geliştirilen ürünün amacına bağlı olarak değişebilir.
14. Ünite - Wireframe, Mockups ve Prototipler 31

BIL1005 - Web Tasarım Temelleri - Özet

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BIL1005 - Web Tasarım Temelleri - Özet

Uploaded by

Copyright:

Available Formats

DERS ADI Web Tasarımının Temelleri

ÜNİTE ADI Web Tasarımının Gelişimi

1. Ünite - Web Tasarımının Gelişimi 1

1. Ünite - Web Tasarımının Gelişimi 2

3. Ünite - HTML'e Giriş ve HTML 5 5

3. Ünite - HTML'e Giriş ve HTML 5 6

3. Ünite - HTML'e Giriş ve HTML 5 7

4. Ünite - HTML 5 Etiketleri ve Kullanımları 8

4. Ünite - HTML 5 Etiketleri ve Kullanımları 9

5. Ünite - HTML 5 API'leri 10

5. Ünite - HTML 5 API'leri 11

HTML META ETİKETİ NEDİR?

TEMEL META ETİKETLERİ

Meta Title (Başlık) Etiketi

6. Ünite - HTML Meta Etiketleri ve Özel Karakterler 12

Meta Description (Açıklama) Etiketi

Meta Keywords (Anahtar Kelime) Etiketi

Meta Charset (Karakter Seti) Etiketi

Meta Refresh (Yenileme) Etiketi

Meta Author (Yazar) Etiketi

Meta Robots Etiketi

6. Ünite - HTML Meta Etiketleri ve Özel Karakterler 13

6. Ünite - HTML Meta Etiketleri ve Özel Karakterler 14

8. Ünite - CSS 3 Flexbox 17

NAVBAR BAR (GEZİNME ÇUBUĞU)

9. Ünite - Gelişmiş CSS Kontrolleri 18

9. Ünite - Gelişmiş CSS Kontrolleri 19

10. Ünite - Bootstrap v5 ile Tasarım Teknikleri 20

10. Ünite - Bootstrap v5 ile Tasarım Teknikleri 21

11. Ünite - Bootstrap v5 Form Elemanı ve Bileşenler 22

11. Ünite - Bootstrap v5 Form Elemanı ve Bileşenler 23

11. Ünite - Bootstrap v5 Form Elemanı ve Bileşenler 24

12. Ünite - Duyarlı ve Uyarlanabilir Web Tasarımı 25

DUYARLI WEB SİTE TASARIMI NASIL YAPILIR?

MOBİL UYUMLU WEB SİTE KÜTÜPHANELERİ (FRAMEWORK)

12. Ünite - Duyarlı ve Uyarlanabilir Web Tasarımı 26

ÇAPRAZ TARAYICI UYUMLULUĞU VE TESTİ NEDİR?

13. Ünite - Çapraz Tarayıcı Uyumluluğu ve Testleri 27

ÇAPRAZ TARAYICI UYUMLULUĞU TEST ARAÇLARI

13. Ünite - Çapraz Tarayıcı Uyumluluğu ve Testleri 28

13. Ünite - Çapraz Tarayıcı Uyumluluğu ve Testleri 29

14. Ünite - Wireframe, Mockups ve Prototipler 30

14. Ünite - Wireframe, Mockups ve Prototipler 31

You might also like