Ünite 3: Web Programlamada Yeni Eğilimler

Giriş

HTML, temel HTML etiketleri, HTML5 semantik etiketleri, HTML5 ses video görüntü etiketleri, HTML5 yeni giriş tipleri, diğer HTML5 etiketleri ve CSS3 kullanarak tasarım, web programlamada yeni eğilimler olarak karşımıza çıkmaktadır.

HTML

HTML, Hyper Text Markup Language (Hiper Metin İşaretleme Dili) ifadesinin kısaltması olup, internet sayfalarını tasarlamakta kullanılan metin işaretleme dilidir.

Windows temelli bir işletim sistemi içerisinde standart olarak kurulu gelen Not Defteri (Notepad) programı ve ücretsiz olarak yükleyebileceğiniz Notepad++ yazılımı, yazılım dünyasında metin editörü olarak kullanılmaktadır.

Notepad++ yazılımı birçok önemli özelliğe sahip olup, bunlardan bazıları aşağıda açıklanmıştır:

• Sözdizimi Vurgulama (Syntax Highlighting): HTML etiketlerini tanıyarak onları farklı renkte göstermesi, programcının kod geliştirmesine ve kod içindeki olası hataları tespit etmesine yardımcı olur.
• Çoklu Belge Desteği: Aynı anda farklı sekmelerde birden fazla belge açılabilir.
• Birden Fazla Programlama Dili Desteği: HTML etiketlerinin yanı sıra başka programlama dillerinde kullanılan yazılım etiketlerini de tanıyarak programcıya geliştirme sırasında yardımcı olur.
• Sayfa Ön İzleme: Yazdığınız web sayfasının Internet Explorer, Firefox gibi internet tarayıcılarında ön izlemesini yapabilirsiniz.

HTML etiketleri < etiket_adı > şeklinde açılır ve başına “ / ” (slash) işareti yazılarak mutlaka sayfanın içerisinde kapatılması gerekir.

Her sayfada en üstte bulunan ve ilk satırda yer alan DOCTYPE belge tipi bildirimi, yazılan HTML kodlarının web tarayıcıları tarafından yorumlanan ve sayfanın HTML sürümü hakkında tarayıcıya bilgi veren anahtar etikettir.

Temel HTML Etiketleri

Temel HTML etiketleri aşağıda sıralanmıştır:

Başlık Etiketi

Hazırlanılan sayfadaki yazılara başlık koymak için kullanılan HTML etiketidir.

Paragraf Etiketi

Tasarladığımız web sayfasına paragraf içeriği eklemek için kullanılan HTML etiketidir.

Bağlantı Ekleme

Hazırlanılan web sayfasında, başka web sayfalarına bağlantı (link) vermek için kullanılan HTML etiketidir.

Metin Biçimlendirme Etiketleri

Tasarlanan bir web sayfasında metinleri biçimlendirmek için aşağıdaki etiketler kullanılmaktadır:

• < strong > etiketi: Metni daha kalınlaştırmak için kullanılır, aynı şekilde < b > etiketi de aynı etkiyi verir.
• < em > etiketi: Metni eğik (italik) hâle getirmek için kullanılır, aynı şekilde < i > etiketi aynı etkiyi yaratacaktır.
• < sub > etiketi: Metni alt yazı hâline getirir.
• < sup > etiketi: Metni üst yazı hâline getirir.
• < del > etiketi: Metnin üzerine çizgi çizer.
• < u > etiketi: Metnin altına çizgi çizer.
• < small > etiketi: Metnin fontunu küçültür.
• < big > etiketi: Metnin fontunu büyütür.
• < tt > etiketi: Metnin daktilo fontunda yazılmasını sağlar.
• < cite > etiketi: Metin alıntı olarak yazıldığında bu etiket kullanılır.
• < abbr > etiketi: Kısaltma şeklinde yazılan bir kelimenin tanımını verir, “title” özelliği ile yazılan bilgi fare imleci ile kısaltılmış kelimenin üzerine gelince tanım olarak ortaya çıkar.
• < br / > etiketi: Bir satırlık boşluk oluşturmak için kullanılan boş etikettir.
• < hr / > etiketi: Bir satırlık yatay bir çizgi oluşturmaya yarayan boş etikettir.

Liste Etiketi

Tasarlanan sayfalarda bilgiler liste hâlinde sıralanması istendiğinde, HTML etiketleri arasında standart olarak Sıralı Liste ve Sırasız Liste şeklinde iki tip liste ile karşılaşılır.

Sıralı liste için tür değerleri ve sıralama gösterim şekli şu şekildedir:

• 1 Onluk tabanda numaralama (1,2,3,4,...)
• i Küçük Romen rakamları (i,ii,iii,iv,...)
• I Büyük Romen rakamları (I,II,III,IV,...)
• a Küçük harflerle alfabetik (a,b,c,...)
• A Büyük harflerle alfabetik (A,B,C,...)

Sıralamasız liste için tür değerleri ve sıralama gösterim şekli şu şekildedir:

• disc İçi dolu bir daire görüntüler
• circle İçi boş bir daire görüntüler
• square İçi dolu ya da boş bir kare görüntüler

Sıralı listelerde “start” özelliği kullanılarak, listenin başlangıç değerini de belirtebilme imkanı bulunmaktadır.

Tanım Listesi Etiketi

Web sayfalarında tanım listeleri oluşturmak için kullanılır.

Tablo Etiketi

Tablo, temel olarak satır ve sütunlara yerleştirilmiş hücrelerden oluşan, HTML programlama esnasında en çok kullanılan elemanlardan biridir.

Satır ve sütunları birleştirme ihtiyacı olduğunda sütunları birleştirmek için “colspan”, satırları birleştirmek için ise “rowspan” özelliği, birleştirilecek sütun ve/veya satır sayısı belirtilerek ayarlanır.

HTML5 Semantik Etiketleri

HTML5 standardı geliştirilirken web sayfasının yapısı semantik (anlamsal) web kavramını destekleyecek şekilde oluşturulmuştur.

HTML5 standardı, aşağıda listelenen anlamsal etiketleri desteklemektedir:

• < header > etiketi sayfanın tanımı, sayfanın başlığı gibi bilgileri içerir.
• < nav > etiketi daha çok sayfa içerisindeki bağlantılar veya site dışı bağlantılar için kullanılır.
• < article > etiketi bir makale ya da yazı alanını temsil eder.
• < section > etiketi HTML sayfası içinde bir kısmı belli eder, bölümleme öğesi olarak kullanılır.
• < aside > etiketi yan menü olarak kullanılır.
• < footer > etiketi bir sayfa veya bir kısım için alt bilgi belirten bölümdür.
• < address > etiketi iletişim bilgilerinin yer aldığı bölümdür.

Details ve Summary Etiketi

HTML5 sürümü ile gelen < details > ve < summary > etiketleri genelde birlikte kullanılırlarken, < details > etiketi detay bilgilerini içerirken < summary > etiketi sayfanın ya da yazının özet bilgisini içerir.

HTML5 Ses Video Görüntü Etiketleri

Bir web sayfasını ilgi çekici hâle getirmenin bir yolu tasarlanan sayfada ses ve video yayımlayabilmektir.

Resim Etiketi

Arama motorlarının bir sitedeki görselleri indeksleyebilmesi için resme bir tanımlamada bulunmalı, siteye herhangi bir görsel eklendiğinde “alt” özelliğini belirten bir metin yazılmalıdır.

Video Etiketi

HTML5 içerisinde gelen standart video oynatıcıyı eklemek için < video > etiketinin kullanılması gerekmektedir.

Video oynatıcımızın genişliğini “width”, yüksekliğini ise “height” özellikleri ile belirleyebiliriz. HTML kodunda geçen “controls” kelimesi video oynatıcının kontrollerinin açık olarak kullanıcıya sunulacağını gösterir. Ayrıca Video oynatıcının kontrol özellikleri aşağıda listelenmiştir:

• Video oynatıcının genişliği “width”, yüksekliği ise “height” özellikleri ile belirlenir.
• “Controls” kelimesi video oynatıcının kontrollerinin açık olarak kullanıcıya sunulacağını gösterir.
• Autoplay özelliği sayesinde video hazır olur olmaz oynamaya başlar.
• Loop özelliği sayesinde video bittiğinde yeniden başlar.
• Muted özelliği yardımıyla, video ilk açıldığında sesi kapalı olup olmayacağı ayarlanır.
• Poster URL özelliği, video oynatılana kadar ekranda bir resim göstermemizi sağlar.
• Preload auto özelliği sayesinde, sayfa yüklendiğinde videonun yüklenip yüklenmeyeceğini ayarlayabiliriz. Üç farklı değer alabilir. Auto değerini aldığında otomatik olarak yüklenir ve video hazır olduğunda oynamaya başlar. Metadata değerini aldığında sadece videoya ait öznitelikler yüklenir. None değerini aldığında ise sayfa yüklendiğinde hiçbir dosya yüklenmez, kullanıcının oynatıcıyı çalıştırması ile yüklenmeye başlar.
• Src özelliği ile hangi videonun oynatılacağı belirlenir.

Ses Dosyası Etiketi

Ses oynatıcının kontrol özellikleri aşağıda listelenmiştir:

• Ses dosyası oynatmak için < auidio > etiketi kullanılır.
• “Controls” ifadesi, ses oynatıcının kontrollerinin açık olarak kullanıcıya sunulacağını gösterir.
• Autoplay özelliği sayesinde ses dosyası hazır olur olmaz oynamaya başlar.
• Loop özelliği ile ses dosyası bittiğinde yeniden başlar.
• Muted özelliği ile ses dosyasının ilk açıldığında sesi kapalı olup olmayacağı ayarlanır.
• Preload özelliği ile sayfa yüklenir yüklenmez, ses dosyasının da yüklenip yüklenmeyeceği üç farklı değerle (Auto - Metadata - None ) ayarlanabilir.
• Src özelliği ile hangi ses dosyasının oynatılacağı belirlenir.

HTML Yeni Giriş Tipleri

HTML5 içerisinde birçok yeni giriş tipini barındırır.

Tarih Giriş Tipi

Giriş alanından tarih seçilmesine yardımcı olacak bu özelliği kullanabilmek için giriş tipi şeklinde ayarlanması gerekmektedir.

T arih-Zaman Giriş Tipi

Kullanıcının tarih ve zaman seçmesini sağlayan giriş şeklini kullanabilmek için giriş tipini “datetime-local” olarak ayarlamak gerekmektedir.

e-Posta Giriş Tipi

Giriş alanından bir elektronik posta alınması için kullanılan bu giriş şeklini kullanabilmek için giriş tipini “email” olarak ayarlamak gerekmektedir.

Ay-Yıl Giriş Tipi

Giriş alanından ay ve yılın seçilmesine olanak veren bu giriş tipini kullanabilmek için giriş tipini “month” olarak ayarlamak gerekmektedir.

Zaman Giriş Tipi

Giriş alanından bir saat seçilmesine olanak veren bu giriş tipini kullanabilmek için giriş tipini “time” olarak ayarlamak gerekmektedir.

Hafta-Yıl Giriş Tipi

Giriş alanından herhangi bir haftanın ve yılın seçilmesine olanak veren bu giriş tipini kullanabilmek için giriş tipini “week” olarak ayarlamak gerekmektedir.

İnternet Kaynak Belirteci (URL) Giriş Tipi

Giriş alanının bir URL bağlantısı içerdiği durumlarda kullanılan bu giriş tipini kullanabilmek için giriş tipini “url” olarak ayarlamak gerekmektedir.

Telefon Giriş Tipi

Son kullanıcının telefon numarası girmesini sağlayan bu giriş tipini kullanabilmek için giriş tipini “tel” olarak ayarlamak gerekmektedir.

Arama Giriş Tipi

Kullanıcıların arama kelimeleri girmesini sağlayan bu giriş tipini kullanabilmek için giriş tipini “search” olarak ayarlamak gerekmektedir.

Aralık Giriş Tipi

Kullanıcının belirli aralıkta olan bir sayıyı seçmesini sağlar ve “min” ve “max” özelliğinin değerlerini ayarlayarak hangi sayıların kabul edilebileceği, “value” özelliğinin değerini ayarlayarak ise başlangıç değeri belirlenir.

Sayısal Bilgi Giriş Tipi

Giriş alanı sayısal bir değer gerektirdiği zaman kullanılan bu giriş tipinde, “min” ve “max” değerleri ayarlanarak hangi sayıların kabul edilebileceği belirtilir.

Renk Bilgisi Giriş Tipi

Kullanıcının giriş alanından bir renk seçebilmesini sağlayan bu giriş tipini kullanabilmek için giriş tipini “color” olarak ayarlamak gerekmektedir.

Diğer HTML5 Etiketleri

Kullanılan diğer HTML5 etiketleri şunlardır:

< canvas > Etiketi

Yalnızca üzerine çizilebilir bir alan oluşturmak için kullanılan bu giriş tipini kullanabilmek için giriş tipini “canvas” olarak ayarlamak gerekmektedir.

< mark > Etiketi

Yazı içerisinde vurgulanan metni tanımlamak için vurgulamak istenilen metni etiketi arasına almak yeterlidir.

< meter > Etiketi

Bilinen bir aralık içindeki değeri görsel olarak veren bu etiketin içerisinden ayarlanacak “min” ve “max” özellikleri ile elemanın alabileceği en küçük ve en büyük değerler verilebilirken, “value” özelliği ile de o anki değer girilebilir.

< progress > Etiketi

Bir işlemin ilerleme sürecini görsel olarak veren bu etiketin değerleri “progress value” özelliği ayarlanarak verilebilirken, “max” özelliği ile alabileceği en yüksek değeri ayarlanabilir.

< datalist > Etiketi

Giriş elemanları için önceden tanımlanmış seçenekler listesini içerisinde barındırır ve bu liste içerisindeki elemanlara otomatik tamamlama özelliği verilmesini sağlar.

< output > Etiketi

Hesaplama sonucu ekrana < output > etiketi vasıtasıyla yazılmaktadır.

< geolocation > Etiketi

Bu etiket sayesinde sayfayı görüntüleyen kullanıcının konumu alınabilir.

CSS3 Kullanarak Tasarım

İngilizce “Cascading Style Sheet” kelimelerinin baş harflerinden oluşan ve dilimize “Basamaklı Stil Sayfaları” şeklinde çevrilebilen CSS işaretleme dili kullanılarak Web sayfalarında biçimlendirme yapılabilir.

“< style type = “text/css” > < /style >” etiketleri arasına yazılan CSS etiketleri ile görünümü değiştirilmek istenilen stilin adı yazılıp istenilen özellikleri değiştirilebilir.

Oldukça kullanışlı iki HTML elemanı < div > ve < span > ile, daha önceden tanımlı hiçbir stilleri olmadığı için CSS biçimlendirmesi ile istenilen görüntü kolaylıkla elde edilebilir.

Herhangi bir HTML elemanı “border-radius” özelliği ile köşeleri yuvarlatılmış bir çerçeve içerisine alınabilir.

“border” özelliği çerçevenin kalınlığını, tipini ve rengini; “padding” özelliği yazının alttan, üstten, sağdan ve soldan ne kadar boşluk bırakılarak yazılacağını; “width” özelliği çerçevenin genişliğini, “height” özelliği ise çerçevenin yüksekliğini ayarlamayı sağlar.

Herhangi bir metin elemanına “text-shadow:” Dikey_Gölge (px) Yatay_Gölge (px) Bulanıklılık(px) kullanılarak gölge görünümü eklenebilir.

Geçiş özelliği ile bir betik (script), ek bir özellik kullanmadan, stil uyguladığımız elemanın fare ile etkileşime girmesi sağlanabilir.

Metinlerin normal akışlarının dışında gazete veya dergilerde olduğu gibi çok kolonlu olarak gösterilmesini sağlar.
Çoklu kolon oluşturmak ve düzenlemek için aşağıdaki özellikler kullanılır:

• column-count: Metnin kaç kolona bölüneceğini belirler.
• column-gap: Kolonlar arasında ne kadar mesafe olacağını belirler.
• column-rule: Kolonlar arasında çizgi olup olmayacağını belirler.
• column-rule-color: Kolonlar arasındaki çizginin rengini belirler.
• column-rule-style: Kolonlar arasındaki çizginin şeklini belirler.
• column-rule-width: Kolonlar arasındaki çizginin kalınlığını belirler.
• column-width: Kolonların genişliğinin ne kadar olacağını belirler.

Çoklu kolon gösteriminin, değişik web tarayıcılarda doğru çalışabilmesi için diğer tarayıcılar için olan kodu da yazmak gereklidir.

Temel olarak doğrusal ve dairesel olmak üzere iki çeşit renk geçişini içeren CSS3 ile renk geçişini gerçekleştirebilmek için başlangıç ve bitiş renkleri olmak üzere iki renk ve yön tanımlanması gereklidir. Doğrusal renk geçişlerinde açı vermek mümkündür.

Belirli bir merkezden tüm yönlere yayılan renk geçişi olarak tanımlanabilen dairesel renk geçişinin standart kullanımı: background: radial-gradient (Renk_1, Renk_2 , … , Renk_n); şeklindedir.