WTK207U-WEB TABANLI KODLAMA
Ünite 6: Bölüm ve Kanvas Yapılarının Kullanımı
Giriş
Web sayfasındaki elemanların görsel tasarımının yapılması ve sayfada yerleşimlerinin doğru şekilde ayarlanması gerekir. HTML etiketleme dilinde sayfa içi elemanların yerleşimini yapmak için bölümlerin oluşturulması gerekmektedir. Bölümlerin düzgün şekilde oluşturulması, web sayfasının istenen görünümde olabilmesini sağlamak açısından büyük öneme sahiptir. Günümüzde web sayfaları, sadece düz metinden oluşmamaktadır ve sadece masaüstü/dizüstü bilgisayarlar ile görüntülenmemektedirler. Web sayfaları; başlık, alt bilgi, gezinti, temasal bölümler, makale, yan bilgi, vb. bir çok bölümden oluşabilirler ve masaüstü/dizüstü bilgisayar, tablet bilgisayar ve cep telefonları gibi farklı ortamlarda görüntülenmeleri gerekebilir. İşte bu noktada web sayfalarının farklı ortamlarda istenen şekilde görüntülenebilmesi için görsel tasarımının yapılması, bölümlerinin çok iyi tasarlanması ve biçimlendirilmesi gerekmektedir. HTML dilinde sadece bölüm oluşturmaya yönelik div, header, footer, article gibi çeşitli etiketler bulunmaktadır. Bu tür etiketler kapsayıcı etiketlerdir ve diğer etiketleri kendi etiket bloğu içinde bulundurabilirler. Bu etiketlerden en önemlisi, genel amaçlı olarak kullanılan div etiketidir. Bu bölümde HTML dilinde bölüm oluşturma etiketlerinin kullanımı ve CSS dili ile biçimlendirilmesi konusunda bilgi verilecektir.
Div Etiketi
Div etiketi HTML dilinde sıklıkla bölümler oluşturmak için kullanılan, varsayılan display özelliği block olan kapsayıcı bir etikettir. Div etiketinin kullanım amacı sayfa içinde bölümler oluşturmaktır. Sayfa tasarımına göre iç içe bölümler de oluşturulabilir. Genellikle div ile bölümler oluşturulurken, oluşturulan bölüm, id ya da class özelliği ile işaretlenir. Böylece CSS kullanılarak bu bölümler rahatlıkla biçimlendirilebilecektir.
Div etiketi dışında bölüm oluşturmak amacıyla kullanılabilecek HTML5 sürümü ile birlikte gelen yeni etiketler de vardır. Bu etiketlerden bazıları header, footer, section, aticle, nav, aside, main gibi etiketleridir. HTML5 sürümü ile, yazılan kodların daha anlamsal (semantik) olması amaçlanmıştır. Aslında işlevsellik olarak bu etiketlerin div etiketinden farklı yoktur. Div ve span gibi etiketler anlamsal etiketler değildir. Ancak header, footer, article gibi etiketler anlamsal etiketlerdir ve bu etiketlerin içine yazılması gereken bilgi konusunda açık şekilde bir tanımlama yapmaktadırlar. Header kelimesi başlık, footer kelimesi ise alt bilgi anlamlarına gelmektedir.
Section kelimesi kesit, kısım, bölüm anlamına gelmektedir. Bir başka anlamsal etiket olan section etiketi, web sayfasındaki içeriğin tematik olarak gruplandırılmasına yönelik bir etikettir.
Article kelimesi makale anlamına gelmektedir. Article etiketi, kendi başına anlamlı ve diğer içeriklerden bağımsız olan içeriğin gruplandırılmasında kullanılır.
Aside kelimesi; ayrı, bir tarafa anlamlarına gelmektedir. Aside etiketi, web sayfasında bulunan bir içerik ile ilgili olup da içerikten ayrı şekilde durması gereken bilgiler için kullanılmalıdır. Bu içerik tüm web sayfası olabileceği gibi web sayfası içerisinde bir article ya da section bölümleri de olabilir.
Main kelimesi; esas, başlıca, ana anlamlarına gelmektedir. Main etiketi bir belgenin ya da uygulamanın ana içeriğini temsil etmektedir. Bu bakımdan web sayfalarının ana içeriği main etiketi içinde gruplandırılabilir.
HTML5 ile Sayfa Yapısı Oluşturma
Web sitesinin en başında logo ve isim bilgilerinin bulunduğu header etiketi yerleştirilebilir. Nav etiketinin altında ise sayfanın ana içeriği olan bilgileri main etiketi içinde gruplandırılmıştır.
Bölüm Özelliklerinin Belirlenmesi
Güzel bir görüntü elde edebilmek için HTML etiketleri ile oluşturulan bölümlerin CSS ile biçimlendirilmesi gerekmektedir.
Display Özelliği
Display özelliği sayfa yerleşimini ayarlamak için kullanılan en önemli CSS özelliklerinden biridir. HTML dilinde tüm etiketler için varsayılan olarak tanımlanmış display isminde bir CSS özelliği bulunmaktadır. Varsayılan olarak atanan bu değer, genellikle inline veya block olmaktadır. Örneğin; Div, section, article, nav, p gibi etiketleri için varsayılan display özelliği block iken, span, i, img, a gibi etiketleri için ise varsayılan display özelliği inline olarak tanımlanmıştır. Display özelliği block olarak tanımlanan elemanlar yeni satırda başlarken, display özelliği inline olan elemanlar satır içinde yer almaktadırlar.
Width ve Max-Width Özellikleri
Display özelliği block olan etiketler için width ve max- width değerlerini ayarlamak mümkündür. Varsayılan olarak bu etiketler bulunduğu ortamın tüm genişliğini kullanırlar. Eğer bu etiket doğrudan body etiketinin altında ise tarayıcı penceresinin en solundan en sağına kadar yer kaplayacaktır. Eğer bu etiket başka bir kapsayıcı etiketin altına yer alıyorsa, kapsayıcı etiketin sınırları dâhilinde olabilecek en yüksek genişliğe ulaşacaktır. Width özelliği ile ise etiketler için sabit bir genişlik tanımlaması yapılır ve bu etiket ve içindeki bileşenler bu genişlik içinde yer alırlar.
Margin Özelliği
Margin özelliği bildiğiniz üzere HTML elemanlarının diğer elemanlarla arasındaki mesafeyi ayarlamak için kullanılmaktadır. Ancak margin özelliğinin bir başka kullanımı ise blok düzeyindeki etiketlerin yatay olarak ortalanmasını sağlamaktır. Bunun için etiketin margin-left ve margin-right özelliklerine ya da sadece margin özelliğine auto değerinin verilmesi gerekmektedir.
Position Özelliği
Position kelimesi mevki, konum anlamları gelmektedir. Position özelliği ile elemanların ne tür bir konuma sahip olacağı belirlenir. Position özelliğine static, relative, fixed ve absolute değerleri verilebilmektedir. HTML sayfasındaki elemanların konumları left, right, top ve bottom özellikleri ile ayarlanabilir. Ancak bu ayarlamaların istenilen şekilde çalışabilmesini sağlamak için öncelikle position özelliği ile konum türü belirlenmelidir.
Relative kelimesi göreceli anlamına gelmektedir. Position özelliği relative olarak ayarlanan bir eleman için left, right, top ve bottom özelliklerine değer atanmaz ise static ile aynı şekilde davranış gösterecek ve sayfa akışına göre elamanın yerleşimi tarayıcı tarafından ayarlanacaktır.
Absolute kelimesinin anlamı mutlaktır. Position özelliği absolute olarak ayarlanan bir elaman için left, right, top veya bottom özelliklerine değer atanmalıdır. Böylece bu eleman için web sayfasında veya bulunduğu blok içinde sabit bir konum belirlenmiş olur.
Fixed kelimesi sabitlenmiş anlamına gelmektedir. Position özelliği fixed olan bir elmanın koordinatları tarayıcı penceresi referans alınarak belirlenir ve bu eleman tarayıcı penceresine sabitlenir.
Overflow Özelliği
Overflow kelimesi taşmak, dışına taşmak anlamlarına gelmektedir. Bu özellik, genişlik ve yükseklik özellikleri belirtilen elemanların içeriğinin sığmaması, taşması durumunda nasıl davranılacağı ile ilgilidir. Bu özellik visible, hidden, scroll ve auto olmak üzere 4 değer alabilmektedir. Varsayılan değer visible değeridir. Overflow özelliği visible olarak ayarlandığı zaman taşan içerik görünür durumda olur.
Float Özelliği
Float kelimesi yüzmek, süzülmek anlamına gelmektedir. Float özelliği ile elemanların sayfa içinde yüzmesi sağlanabilmektedir. None, left, right değerleri alabilmektedir. HTML etiketlerinin varsayılan float değeri none’dır. En basit kullanımı ile float özelliği kullanılarak sağ ya da sol tarafa yerleştirilen bir resmin etrafından metnin akması sağlanabilir.
Display Özelliği İçin Inline-Block Değeri
Float özelliği dışında resim galerisinde olduğu gibi sayfada yüzen elemanlar oluşturmanın bir başka yolu da display özelliğine inline-block değeri vermektir. Bu özellik kullanıldığında float özelliğini kullmaya gerek kalmamaktadır. Ayrıca normalde float özelliği kullanıldıktan sonra clear özelliği kullanılarak temizlik yapmak gerekmektedir. Ancak inline-block ile buna da gerek yoktur.
Menü Uygulamaları
Web sitelerinde kullanıcıların rahatlıkla gezinebilmesi için menü veya menüler oluşturmak gerekmektedir. Bu
bölümde nasıl menü oluşturulabileceği konusunda bilgi verilecektir. Daha önce de bahsedildiği üzere web sayfasının ana menüsünü veya web sayfasının bir bölümü ile ilgili menüleri oluştururken nav etiketini kullanmak tavsiye edilmektedir. Oluşturulacak menü sayfa tasarımına göre yatay ya da dikey olabilmektedir. Menüler aslında bağlantılardan oluşan bir listedir. Bu bağlamda menü oluşturmak için ul etiketi ile bağlantılardan oluşan sırasız bir liste oluşturmak kabul görmüş bir yöntemdir. Menü oluşturmak için kullanılabilecek kod örneği Şekil 6.39’da verilmiştir.
CSS ile biçimlendirme yapılmadığı zaman oluşturulan menü standart bir sırasız liste şeklinde görülmektedir. Bu listeyi web sayfasının tasarımına uygun hâle getirmek için CSS ile biçimlendirmek gerekir.
ul etiketi kullanmadan da CSS ile uygun şekilde biçimlendirerek benzer menülerin oluşturulması mümkündür.
Esnek Bölüm Tasarımı
Bilindiği üzere son zamanlarda mobil cihazların kullanımı oldukça artmıştır. Özellikle cep telefonlarından internete girenlerin sayısında önemli bir artış yaşanmıştır. Hatta dünya genelinde İnternet erişimi ile ilgili istatistikler incelendiğinde, mobil cihazların masaüstü bilgisayarlardan daha fazla kullanıldığı görülmektedir (Chaffey, 2016).
Web sayfası geliştiricileri için bu noktada en önemli unsur ekran büyüklüğüdür. Cep telefonlarının ekranları normal olarak masaüstü/dizüstü bilgisayar monitörlerinden çok daha küçüktür ve genellikle dikey olarak kullanılmaktadırlar. Eğer web sayfasında mobil cihazlara yönelik bir tasarım yapılmaz ise, kullanıcı cep telefonu ekranından web sayfasını gezinmekte zorluk yaşayacaktır. Geliştirilecek web sayfalarının cep telefonları ile uyumlu olması, cep telefonu kullanıcılarının web sayfalarında rahatlıkla gezinebilmelerini sağlamak büyük önem arz etmektedir. Bunun için web sayfası tasarımı yaparken farklı ekran büyüklüklerinde nasıl görünmesi gerektiğini de tasarlamak gerekir. Farklı ekran büyüklüklerine otomatik olarak uyum sağlayabilen tasarımlara, esnek (responsive) tasarım adı verilmektedir. Sayfa 158’de şekil 6.47’te farklı ekran büyüklükleri için nasıl farklı tasarımlar yapılabileceği ile ilgili bir örneğe yer verilmiştir.
Viewport
Viewport, web tarayıcısının web sayfalarını gösterdiği alana verilen isimdir. Bu alan masaüstü/dizüstü bilgisayarlarda daha büyük iken cep telefonlarında doğal olarak daha küçüktür. Tablet ve akıllı cep telefonu kullanımı bu kadar yaygınlaşmadan önce web sayfaları sadece masaüstü/dizüstü bilgisayar monitörlerinde kullanılmaya yönelik olarak geliştirilmekteydi. Bu bakımdan genellikle web sayfaları için sabit genişlikli bir tasarım yapılırdı. Mobil cihazlar göz önünde bulundurulmadan geliştirilen web sayfaları aksi belirtilmez ise mobil cihazlar tarafından küçültülerek
sunulmaktadır. Bir başka deyişle, sayfa genişliği ekranın genişliğine sığacak şekilde sayfada küçültme işlemi uygulanır. Bu durumda sayfa okunamayacak kadar çok küçüleceği için kullanıcı sayfayı inceleyebilmek için sayfayı iki parmağıyla büyütüp yatay ve dikey olarak sayfayı kaydırması gerekecektir. Sayfayı incelemek için büyütmek ve yatay olarak kaydırmak zorunda olmak kullanılabilirlik açısından iyi değildir. Bu bakımdan mobil cihazlar ile uyumlu olarak geliştirilen web sayfalarında, tarayıcıya web sayfasının mobil cihazlar ile uyumlu olduğuna yönelik bilgi vermekte gerekmektedir. Bunun için de meta etiketinden yararlanılır (Şekil 6.48 sayfa 159).
Ortam Sorgusu
Ortam sorgusu (media query) CSS’nin 3. sürümü ile gelen yeniliklerden biridir. Ortam sorgularının en önemli amacı tarayıcı penceresinin genişliği ile ilgili bilgi almaktır. Bunun dışında tarayıcı penceresinin yüksekliği, yerleşimi (yatay veya dikey), çözünürlüğü gibi bilgileri sorgulamakta mümkündür.
Grid Kullanımı
Günümüzde bir çok web sayfası tasarımında grid yapısı kullanılmaktadır. Hatta bir çok CSS kütüphanesi grid kullanımını destekleyecek araçlar sunmaktadırlar. Grid kullanımı ile genel olarak sayfa genişliği 12 eşit parçaya bölünür ve tarayıcı penceresinin tüm genişliği kullanılır. Grid kullanımı, tasarım öğelerini sayfa içinde yerleştirmeyi kolaylaştırır. 12 parçanın toplam genişliği yüzde yüz olacak şekilde ayarlanmaktadır. Bu durumda her bir parça yüzde 8,33’lük bir genişliğe sahip olacaktır.
Resimler
Esnek tasarım yaparken dikkat edilmesi gereken bir başka konu ise resimlerdir. Eğer resimlerin genişlik veya yükseklik özelliklerine değer atanmaz ise resimler web sayfasında gerçek boyutlarında görüntülenirler. Eğer resmin genişliği tarayıcı penceresinin genişliğinden daha fazla ise bu durum resmin taşması ve yatay kaydırma çubuğunun çıkmasına neden olacaktır. Daha önce de belirtildiği üzere web sayfalarında yatay kaydırma çubuğunun olması istenilen bir durum değildir. Bu durumda resmin boyutlarının tarayıcı penceresinin genişliğine veya bulunduğu bloğun genişliğine uygun olması gerekmektedir.
Kanvasların Kullanımı
Canvas etiketi HTML5 ile birlikte gelmiştir ve bu etiketin HTML5 için en önemli yeniliklerden biri olduğu söylenebilir. Canvas etiketi kullanılarak web sayfası içinde boş bir tuval oluşturulmuş olur. Bu tuval üzerinde etkileşimli canlandırmalar, oyunlar, 3 boyutlu çalışmalar yapmak mümkündür. HTML5 ile gelen bu çok önemli özellik sayesinde Adobe Flash programı ile web sayfalarında kullanılmak üzere geliştirilen birçok içerik ve oyunlar yerini HTML5 Canvas içeriklerine ve oyunlarına bırakmıştır. Adobe Flash ile geliştirilen içeriklerin çalışabilmesi içinde tarayıcıda Adobe Flash Player
eklentisinin kurulu olması gerekmektedir. Bu tür eklentiler, güvenlik açığı ve yavaşlama gibi bazı sorunların beraberinde getirebilmektedir. Bu bakımda bir süredir mobil cihazlarda kullanılan tarayıcılar Adobe Flash Player eklentisini desteklememektedirler. Bu durum Canvas kullanımının önemini daha da arttırmıştır. Çünkü hiçbir tasarımcı mobil kullanıcıları göz ardı edemez. Canvas etiketinin kullanımı Şekil 6.61’de verilmiştir.
Canvas etiketi ile oluşturulan tuvalin üzerine JavaScript programlama dili kullanılarak çizim yapılabilir, etkileşimli içerikler oluşturulabilir. Tabi bunu yapabilmek için JavaScript programlama diline hakim olmak gerekecektir. Bu bölümde örnek olması açısından birkaç sabit çizim örneğine yer verilmiştir. Şekil 62’de JavaScript kodu ile birkaç geometrik çizim örneği oluşturulmuştur.