WTK207U-WEB TABANLI KODLAMA
Ünite 2: Metinlerin Biçimlendirilmesi
Giriş
Metin kullanımı özellikle web sayfası tasarım sürecinin ilk çıktığı yıllarda aktarılan bilginin temsilcisi durumunda iken, çoklu ortam özelliklerinin gelişmesine karşın hâlen önemli oranda web sayfalarında tercih edilmektedir. Bu tercihte muhtemelen bilgisayar ekranı da dâhil olmak üzere çoğu yerde okuma alışkanlığının baskın gelmesi gerekçe gösterilebilir.
HTML’de Metin Kullanımı
HTML kodlamaya yeni başlayanlar için metin kullanımı konusunda karşılaşılacak ilk sorun kelime işlemci programlarında yapılan metin kullanım etkilerinin doğrudan program ara yüzünden de beklenmesidir. Ancak metinle alakalı html yazımında maalesef html kodlarının ayrı yazım kuralları vardır. Bu açıdan yazılan metinlerin nasıl, nerede ve ne şekilde görünmesi gerektiği html’de etiket olarak adlandırılan kodlarla metin içerisinde belirtilmelidir. Örneğin, kelime işlemci programı içerisinde satır sonu vermek (yani enter tuşuna basmak) alt satıra geçişi sağlarken, html kodları için aynı anlama gelmemektedir. <br> etiketi html’de enter tuşunun işlevini yerine getirmekte, tarayıcı da alt satıra geçişi sağlamaktadır. Html etiketleri farklı tarayıcılar üzerinde satır satır yorumlanmakta, tarayıcıda web sayfalarına dönüşmektedir. Bu nedenle farklı tarayıcılarda aynı siteler farklı şekillerde görünebilmektedirler.
Karakter Seti Özelliklerinin Belirlenmesi
Html kodu yazımı, belirli bir kalıp içerisinde olmaktadır. Html, head ve body olarak üç parça bilginin yer aldığı bu yapıda < ve > işaretleri içerisine ifadeler yazılırken, bu ifadelerin her birine etiket denir. Ayrıca kod yapılarının bittiğini belirtmek için </> şeklinde bir kullanım söz konusudur. Bir html tasarımı <html> etiketi ile başlar ve </html> etiketi ile biter. Ayrıca şart olmamakla birlikte <head> </head> bloğu ile web sayfasına ait üst düzey ayarlar yapılabilir. Ayrıca sitede eğer Türkçe karakter sorunu yer alıyorsa (örneğin i yerine y görünüyorsa vb.) bu kısımda kullanılacak <meta> etiketi ile Türkçe gösterim ayarı yine bu kısımdan yapılabilir. Meta etiketleri içerisinde metin düzenleme adına özellikle charset önemli bir kullanımdır. Türkçe karakter sorunu yaşanması durumunda UTF-8 veya windows-1254 atanarak sorun çözülecektir.
Metin Özelliklerinin Düzenlenmesi
Bir web sayfasındaki yazının başlık türü <h> etiketi ile belirtilir. Bu etiket yanına 1’den 6’ya kadar sayı alır ve böylece yazı başlığının hangi derecede öneme sahip olduğu belirtilebilir. Bir kitabın içindekiler sayfası düşünüldüğünde bunların her biri bir başlıktır ve metin içinde <h> etiketi ile işaretlenmelidirler. Ancak başlık biter bitmez metin bilgisinin başlık olmadığını belirtmek için </h> etiketi kullanılmalıdır. Metin içerisindeki yazıların vurguları için çoğunlukla koyu, altı çizili ve italik olmak üzere kullanılacak üç etiket vardır. Bu etiketler koyu için <b>, italik için <i> ve altı çizili için
<u>’dur. Vurgu yapılacak kelime veya kelimelerden önce bu etiketler kullanılmaya başlanır, bitiminde ise kullanılan etikete göre </b>, </i> veya </u> ile bitirilmelidir. Bir metne hem kalın hem italik hem de yazı renginin farklı olması gibi birden fazla metin özelliği eklenebilir. Bu durumda her biri birbirinden bağımsızmış gibi düşünülerek düzenleme yapılmalıdır. Nadiren de olsa H2O gibi bir formül yazmak için alt simge kullanılması gerekir ve html’de bu işlem için de kod kullanılmaktadır. H<small>2</small> arasına yazılacak karakterler alt simge, <big></big>arasına yazılacak karakterler ise üst simge olarak görünecektir.
Metin özellikleri ile ilgili yapılabilecek diğer bir işlem ise yazı rengi, stili ve büyüklüğünün değiştirilmesidir. Yazının bu özelliklerinin değiştirmek için <font> etiketi kullanılır. Ayrıca değişikliğin etkisini sürdürmemesi için yine </font> etiketi ile ilgili yerde kapatma işlemi yapılmalıdır. Bu etiket hangi özellik verilmesi gerekiyorsa yanına o parametre veya parametreleri ile birlikte kullanılır. Üç parametre almaktadır. face parametresi ile yazı tipi, size ile punto olarak yazı büyüklüğü, color ile de yazı rengi değiştirilebilir. Renk değişikliği için kodların color parametresinden sonra sırası önemli olmaksızın atanması yeterlidir. Ayrıca yazının hem rengi hem büyüklüğü hem de stili değiştirilebilir.
Paragrafların Biçimlendirilmesi
Paragrafların düzenlenmesi de yine kelime işlemci programlarından farklı bir şekilde olmaktadır. Web tasarımlarında sıklıkla kullanılan alt satıra geçiş işlemi için ilgili metnin sonrasına <br> etiketi kullanılmalıdır. “Açılan etiket kapatılmalıdır” kuralı bu etiket için geçerli değildir. Yani açılan <br> etiketi </br> etiketi ile kapatılmaz. Ayrıca yazılan metin bir paragraf ise bu metin <p> etiketi ile </p> etiketi arasına yazılmalıdır. Bu durumda stil ayarı ile ilgili paragrafa atanacak bir özellik, tüm paragraf için etkili olacaktır.
Metinler için yapılabilecek bir diğer işlem ise hizalamadır. Bu amaçla metnin paragraf yani <p> etiketinin içerisinde align parametresi kullanılmalıdır. Dört değer almaktadır. Right sağa, left sola, justify iki yana, center ortaya hizalama için align parametresine atanmalıdır. Normalde daha önce gördüğümüz bir başlık etiketi ile (örneğin <h2>BAŞLIK</h2>) başlık sola doğru hizalanmaktadır. Bu durumda başlığın da ortalanması istenebilir ve bu ortalama işlemi doğrudan <center><h2>BAŞLIK</h2> </center> şeklinde yazılarak gerçekleştirilebilir. Yani <p> etiketinin olmadığı yerde doğrudan <center> veya <left> parametreleri kullanılarak da ortalama veya sola hizalama işlemleri yapılabilir.
Listelerin Oluşturulması
Metinlerin sıralanması veya kategorilenmesi adına sıklıkla kullanılan seçeneklerden biri de listelerdir. Kelime işlemci programlarında kullanılan madde işaretleri ve madde numaraları html kodlamada listeler olarak ifade edilmektedir. Bu kapsamda madde numaraları sıralı liste,
madde işaretleri ise sırasız liste olarak nitelendirilebilir. Sıralı listelerin (ordered list) ve sırasız listelerin (unordered list) oluşturulmasında İngilizce kelimelerinin baş harfleri olan <ol> ve <ul> etiketleri kullanılırken, maddelerin belirtilmesinde ise her ikisinde de <li> etiketi kullanılmakta ve nihai olarak hangi liste kullanılmışsa </ol> veya </ul> ile kapatılmalıdır. Akla gelebilecek bir soru ise sıralı ve sırasız listelerde sunulan sıralama seçeneklerinin değiştirilmesidir. Standart olarak sıralı listeler için 1, 2, 3, sırasız listeler içinse • işareti kullanılmaktadır. Ancak <ol> ve <ul> etiketlerinin içerisine kullanılacak type parametresi ile bu seçenekler değiştirilebilmektedir. <ol type=“a”> şeklinde bir atama ile gösterim değiştirilebilir. Bu durumda type için atanabilecek değerler A, a, 1, i, I şeklinde herhangi bir değer olabilir. Benzer şekilde sırasız listeler için de type parametresi ile değer atanabilmektedir. <ul> etiketinin type parametresi ise disk, circle ve square’dir. Bazı durumlarda ise iç içe listelerin kullanılması gerekir. Bu durumda <li> etiketinin içerisinde yeniden <ul> veya <ol> etiketleri ile <li> etiketini yeniden kullanmak yeterli olacaktır. Son olarak listelerde kullanılabilecek bir liste türü de kategorik veya diğer ismi ile tanım listelerdir. Bu listelerde madde işareti ve numarası görünmez. Kategorik listelerin oluşturulması için <dl>, kategorilerin herbirini oluşturmak için <dt>, kategoriler içerisinde yer alacak seçenekler için <dd> etiketleri kullanılır ve her bir açılan etiket yine </dl>,</dt> veya </dd> etiketleri ile kapatılmalıdır.
Köprü ve Bağlantıların Kurulması
Köprü veya diğer adı ile link verme html sayfa tasarımlarında kullanılan en önemli özelliklerden biridir. Bu kapsamda herhangi bir metin veya resme tıklanması durumunda yeni bir sayfanın açılması, sayfanın yeniden yüklenmesi, resim, ses veya video dosyalarının açılması sağlanabilir. Bu kapsamda kullanılması gereken etiket <a href=“”>… </a> etiketidir. Genel kullanım şekli itibari ile href parametresinden sonra açılması istenen sayfa veya resmin adresi eklenilmelidir. Ayrıca <a href=“anasayfa. html”>Ana Sayfaya Dön</a> şeklindeki kullanımda ekranda yazacak bilgi Ana Sayfaya Dön şeklinde altı çizili ve mavi bir yazıdır. Bu kullanımda tarayıcı otomatik olarak bu gösterimi kullanıcı adına sunar ve üzerine gelince fare işareti tıklanılabileceğini gösterir. Köprüye tıklanması durumunda ise bağlantı olan anasayfa.html sayfasına geçiş işlemi gerçekleşir ve tarayıcı belirtilen sayfayı açar.
Link sadece web sayfalarına verilmekle sınırlı olmayıp, istenirse href parametresinden sonra resim, müzik vb. dosyalara da link verilebilir. Bu durumda ilgili medya öğesi açılacaktır. Burada özellikle vurgulanması gereken bir diğer konu ise hedefin konumudur. Web tasarımında genellikle düzen sağlama adına müzikler, resimler alt klasörler içerisinde saklanır. Dolayısı ile index.html gibi bir dosya kök dizinde yer alırken, zorunlu olmamakla birlikte düzeni sağlama açısından, resim dosyaları fotolar, pictures, ses dosyaları ise sesler, sounds, muzikler gibi
klasörler içerisinde tutulur. Benzer şekilde ses dosyaları için de kullanım söz konusudur. Bu durumda da tarayıcı da resim gelmesi yerine ses dosyasının oynatıldığı görülebilir.
Metinlerde Stil Kullanımı
Stil (style) web sayfalarda nesnelerin biçimlendirilmesi işlemidir. Html’de bütün sayfa için yapılması planlanan değişiklikler <body> etiketi içerisine parametreler ekleyerek gerçekleştirilmektedir. Diğer yandan sayfadaki metinler yukarıda bir kısmı ifade edilen html komutları (font, b, i vb.) ile biçimlendirilebilir. Bu sadece belirli bir metin grubu içerisinde geçerli olup, tüm değişikliklerde bu ayarlamaları yapmak oldukça zor ve yorucu bir iştir. Stil burada devreye girmektedir. Stil kullanımı site içerisinde farklı metinleri farklı şekillerde göstermek için önceden harici veya dahili kurallar tanımlama ve sonrasında bu kuralın ismine göre belirtilen yerde bu kuralın uygulanmasını sağlama işlemidir. CSS (Cascading Style Sheets – Stil Şablonları) olarak adlandırılan ve aslında web sayfalarını biçimlendirmek üzere yazılı bir dil olan stil kullanımı metinler üzerinde etkin kullanılmasına karşın resim, tablo gibi her türlü nesnenin kullanımında da işlevseldir. Html içerisinde metin odaklı stil kullanımı birkaç yerde yapılabilir. Bunun için öncelikli olarak Türkçe olarak kuralların belirlenmesidir. Hangi şekilde yapıldığı amaca göre değişiklik gösterir. Stil kullanımı için style parametresinin kullanım yeri farklılaşabilmektedir:
Etiketin İçerisinde Stil Kullanımı
Bu kullanım stilinde html’in temel etiketlerinin içerisinde nesnenin özelliklerinin belirlenmesidir. Inline kullanımı sadece <h> etiketlerinde değil, <p> ve <a> gibi çok sayıda etiket içerisinde de kolaylıkla kullanılabilir. Paragraf etiketi olan <p> de yapılan değişikliklerin tamamı </p> etiketine kadar geçerli olacaktır. Ayrıca bu paragraf içerisinde istenilen metin bölümlerinde yine <font> etiketi ile istenilen yazının stili istenildiği şekilde değiştirilebilir. Diğer yandan linklerin gösterim şekillerini değiştirmek isteyen bir tasarımcı da stil kullanabilir.
Gömülü Stil Kullanımı
Etiketin içerisinde stil kullanılması durumunda stil kapatılmasına kadar o stil kullanımı geçerli olacaktır. Diğer yandan bir kullanıcı bir etiketin tüm özelliklerini sitesi için değiştirmek isteyebilir. Örneğin paragraf yani <p> etiketlerinde kullandığı yazının siyah yerine mor olmasını, yazı tipi olarak arial ve paragraf girintisi olarak 2 cm’lik paragraf girintisine sahip olmasını ve bunun tüm <p> etiketi kullanılan yerlerde uygulanmasını isteyebilir. Bu durumda inline kullanım ile her <p> etiketinde teker teker yeniden tanımlamak yerine <head></head> etiketleri arasında <style></style> etiketleri arasına gömülü stil olarak tanımlamak yeterli olacak, tüm <p> etiketlerinde ilgili değişiklik otomatik olarak geçerli olacaktır. Ancak bir tasarımcı bazı paragraflarda belirli kuralların, bazı paragraflarda ise diğer belirli kuralların
geçerli olmasını isteyebilir. Bu durumda kurallar listesinin (class seçici veya id seçici) belirli bir isimle gömülü stil olarak tanımlanması gerekir. Programlama dillerinde özel fonksiyon tanımlama ve özel isim tanımı ile gömülü stil kullanımı ile benzetilebilir. Bu kullanımın bir diğer yararı ise, ismi belirli olan bir stil grubunda yapılacak bir değişikliğin site içerisindeki tüm kullanıldığı yerlerde de etkisini göstermesidir. Bir sitede . ile class seçici, # ile id seçici birlikte kullanılabilir. Sadece paragraf içerisinde kullanımı karıştırılmamalıdır. Class seçici için etiketin içerisinde class= “ ” ile id seçici için id= “ ” ile tanımlama yapılmalıdır. Seçiciler ile metin kullanımı konusunda anlatılması gereken önemli bir etiket ise <span> </span> etiketleridir. Bu etiket bir yazı içerisinden istenilen aralığı belirlemek için kullanılır. <p> </p> etiketi paragrafı etkilerken, <span> </span> etiketleri daha özel seçimler (kelime, cümle veya paragraflar) seçiminde kullanılır ve yanına class veya id etiketi alabilmesi ile stil kullanımında önemli işleve sahiptir.
Dışarıdan CSS Dosyası Kullanma
“Kendime çok sayıda html dosyası olan bir web sitesi yapacağım ama ilk açıldığında zemin açık sarı renkli olsun, yazılar siyah değil bordo gelsin, büyük başlıklar koyu yeşil olsun ama web sitemdeki tüm sayfamda bunlar standart olarak gelsin, sürekli uğraşmayayım” şeklinde bir isteği olan tasarımcı dışarıdan css dosyası çağırarak isteklerine kavuşabilir. Bir sitenin birden fazla html’den meydana geldiği ve bunların aynı şablon üzerinden tasarlanacağı varsayılırsa her html için stil tanımı hem karmaşaya neden olacak hem de uzun satırlardan oluşan html dosyaları ortaya çıkacaktır. Bunun yerine html’in temel özellikleri body, p, h1,h2...h6 başlıkları, pre, ul, ol, li gibi tüm özellikleri tek bir dosyada bir kez yazılıp, css uzantılı olarak kaydedilebilir ve her html içerisinden tek bir satırla çağrılabilir. Bir css dosyası note defteri gibi basit programla da yazılabilir. Sadece dosya uzantısının .css olması gerekir. html ile dışarıdan css dosyasının çağrılması ise link ve @import etiketleri kullanılarak iki farklı şekilde gerçekleştirilmektedir.