WEB TABANLI KODLAMA

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.

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.

Section kelimesi kesit, kısım, bölüm anlamına gelmektedir.

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. Main etiketinin kullanımı ile ilgili farklı görüşler olmasına rağmen W3
Konsorsiyumuna göre; web sayfalarında sadece bir
adet main etiketi kullanılmalıdır ve article, aside,
footer, header, veya nav etiketleri içinde main etiketi kullanılmamalıdır. Ayrıca W3 Konsorsiyumu
main etiketi için role=”main” özelliğini kullanmayı
tavsiye etmektedir.

Web sitesinin en başında logo ve isim bilgilerinin bulunduğu header etiketi yerleştirilebilir. Header
etiketinin altında web sitesinin ana bağlantılarının bulunduğu (Örneğin Ekonomi, Siyaset, Güncel, Spor,
Finans, vb.) nav etiketi konulabilir. Nav etiketinin altında ise sayfanın ana içeriği olan bilgileri main etiketi
içinde gruplandırılmıştır. Haberler 3 sütun şeklinde verilmektedir ve her bir sütun section etiketi içinde
gruplandırılmıştır. Hatırlanacağı üzere section etiketi içinde gruplandırılacak içeriğin temasal bir bağının
olması gerekir. Bu bağlamda birinci section etiketi içinde futbol haberleri, ikinci section etiketi içinde
basketbol haberleri, üçüncü section etiketi içinde ise voleybol haberleri verilebilir. Eğer sütunlar arasında
böyle temasal bir ayrım yapılmak istenmiyorsa section etiketi kullanılmamalı, bunun yerine div etiketi
tercih edilmelidir. Section etiketlerinden sonra ise aside etiketine yer verilmiştir. Hatırlanacağı üzere aside
etiketi tüm sayfa ya da sayfa içinde bir bölümle ilgili yan bilgi ya da ikincil bağlantılar için kullanılabilecek
bir etikettir. Bu bağlamda aside etiketi içinde sayfanın tamamı spor haberleri ile ilgili olduğu için spor haberlerine yönelik alt menü amacıyla kullanılabilir.

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.

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.

Web sitelerinde kullanıcıların rahatlıkla gezinebilmesi için menü veya menüler oluşturmak gerekmektedir.

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

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 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.

Div ve span gibi etiketler anlamsal etiketler değildir.

Nav etiketi web sayfasındaki web bağlantılarını gruplandırmak için kullanılması gereken bir etikettir.

Max-width özelliği kullanıldığında elemanların genişlikleri sabit olmak yerine esnek olacaktır ve bulundukların ortamın genişliğine uyum sağlayarak kullanıcılara daha iyi bir kullanma deneyimi sunabilecektir.

Position kelimesi mevki, konum anlamları gelmektedir. Position özelliği ile elemanların ne tür bir konuma sahip olacağı belirlenir.

Viewport, web tarayıcısının web sayfalarını gösterdiği alana verilen isimdir.

@media only screen and (max-width: 500px) {

nav { width: 100%;}

}

Bu ortam sorgusunda bilgisayar, tablet, cep telefonu gibi cihazların ekranlarının kullanılması durumunda (screen) ve tarayıcı penceresinin genişliğinin en fazla 500px olması durumunda nav etiketinin genişliğinin 100% olacağı belirtilmiştir.

12 eşit parçaya bölünür.

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.