Body Tagı

Temel sayfa içerik tagı

Karışıklığa sebep vermemek için <BODY> taglerinin içini yazacağım. Bunadan sonra <HTML>, <HEAD> & <TITLE> taglerini artık yazmayacağım ama siz mutlaka yazın. (ben kısaltmış olmak için yazmıyorum-belirteyim).

<BODY> </BODY>

Güzel bir şey yazın.

<BODY> Güzel bir şey </BODY>

Güzel bir şey

Dökümanda herhangi bir şey değiştirdiniz mi mutlaka "Kayıt" ile saklatın, "Yenile" yi tıklayın ve değişikliği hemen gözlemleyinki ne olduğunu anlayabilesiniz

Sanırım ilk öğrenmemeiz gereken background - fon - renginin nasıl değiştiği.

<BODY BGCOLOR="#FFFF00"> Güzel bir şey </BODY>

Güzel bir şey

FFFF00 sarı renginin HEX kodudur. Tıklarsanız burada biraz daha var.

Dilerseniz arkaplanı image - resim - de yerleştirebilirsiniz.
DİKKAT : image -resim- sizin HTML dosyanızla (sayfanızla) aynı folder -klasör- de olmalı. Yoksa resimleriniz çıkmaz. Resimleri göremezseniz endişelenmeyin, mutlaka aynı klasörde değildir veya GIF ve JPG dosyalarınızı Türkçe harfler kullanarak isimlendirmiş olabilirsiniz.
Kodun yazılışı ise aşağıdaki gibidir:

<BODY BACKGROUND="fon.gif"> Güzel bir şey </BODY>

Güzel bir şey

Arkaplan image ı burada

İmage in görünebilmesi için aynı HTML dosyanızla aynı klasörde olması gerek. Bunun en kolay yolu , image ın üzerine sağ tıklayıp birinci derste yaptığınız sayfa bilgisayarın hangi bölümünde ise hemen onun yanına Resmi Farklı Kaydet yapın

Eski düz beyaz ekrana gidelim tekrar.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

İstersek yazıları böyle Kalın yapabiliriz.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

Biz aslında browsere diyoruz ki görünce harfleri kalın yapmağa başla  görüncede durdur.

Aybı kural italikler içinde geçerlidir....

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

vede.. altçizgi.

<BODY BGCOLOR="#FFFFFF"> güzel bir şey </BODY>

Güzel bir şey

Beyaz ekrana tekrar dönelim.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

İstersek tagleri birlikte kullanabiliriz.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

Bu nested - yani içiçe geçmiş - taglere örnektir. İlerde etiketleri birlikte kullandığınız zaman aşağıdaki şekilde yapın yoksa browserin kafasını karıştırırsınız.

<THIS><THAT></THIS></THAT> Karışık yani HATALI
<THIS><THAT></THAT></THIS> Nested DOĞRUSU BÖYLE

Elbette font size too font ebatlarıda değişir... Nasıl mı? - Çok kolay.

Önce  taglerini ilave edin...

<BODY BGCOLOR="#FFFFFF"> Güzel birşey </BODY>

Sonra SIZE ebat özelliğini belirtin.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

Fontlar 7 ebatta gelir:

minik	küçük	normal	büyücek	büyük	gerçekten büyük	jumboo!
1	2	3	4	5	6	7

Şimdi iki şeyi tartışalım. <TAG> browsere bir şeyi yapmasını söyler ve ATTRIBUTE ise <TAG> içine girer ve browsere nasıl yapacağını söyler.
İkinci nokta ise defaultlar yani varsayılanlar. Eğer hiçbirşey belirtilmemişse browser varsayılan değerleri atar. Mesela font ölçülerinde varsayılan değer 3 tür. bir şey belirtmezseniz browser 3 varsayarak karakterleri yazar.

Her browserin değişik varsayılan font ayarları vardır. Eğer PCnizi fazla kurcalamadı iseniz varsayılan ayarları " Times New Roman 12pt ve siyah renk tir". Ama ARIAL and COMIC SANS gibi değişik fontlarda vardır.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

Tabii fontların gözükmesi için PCnize yüklü olması gerekir. Tekrarlayayım eğer sayfanıza bakan kimse, sizin belirttiğiniz fontlar bilgisayarına yüklü değilse, sadece kendi bilgisayarının varsayılan fontunu görür. Onun için fontlarınızla biraz dikkatli olun.Arial ve Comic Sans MS Windows ile gelen yaygın fontlardandır. Aynı şekilde Impact! da. Yapmanız gereken, işi garantiye almak için birden fazla font belirtmeniz. (Evet! yapabilirsiniz) Bunlardan birini yapın.. Hidee Ho.
Benim gibi jetonu geç düşenlere açıklayayım. Olay şu: Sayfa yüklenirken browser ARIAL arar. Bulursa kullanır, bulamadı ozaman HELVETICA yı arar. Bulursa kullanır olmadı LUCIDA SANSı gider bakar. Onuda bulamazsa çaresiz varsayılan fontu kullanır.

Evvet, eğlenceye geri dönelim..
İsterseniz font rengini değiştirebilirsiniz.

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel bir şey

İstersek birden fazla özelliği <TAG> içine yerleştirebiliriz...

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel birşey

Elbette bu kadar değil!

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey </BODY>

Güzel birşey

Tekrar belirteyim, birden fazla tag nested olmalı.

<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>

Hangisinin önce olduğu mühim değil. Bir şeyi kırmızı ve kalın yapmak için sıra farketmez. İstediğiniz sırada yapabilirsiniz.

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

Kendinizi ve browserin kafasını karıştırmak için en kestirme yol, etiketlerin sırasını karıştırmaktır. The fastest way to confuse the browser, not to mention yourself is to overlap the tags...

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>

Son olarak: Browserin text rengi, link rengi, aktif link rengi ve ziyaret edilmiş link rengi ve ekran fon rengi için varsayılan değerleri vardır. Şöyleki:

Text siyahtır
Linkler mavi
Actif link kırmızı
Ziyaret edilmiş link mor

Eğer ihtiyacınız olursa bunları değiştirebilirsiniz (ihtiyacınız olursa dedim!) Bütün dünya linkleri mavi görmeğe alışmıştır. Lütfen fazla değişiklik yapıp kafaları karıştırmayın. Bütün döküman için varsayılanları <BODY> etiketinin içinde değiştirebilirsiniz.

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000"> Güzel bir şey </BODY>

Güzel bir şey

Şimdi linkleri öğrenmeden neden suyu bulandırıyorsun diyebilirsiniz!! Haklısınız ama yakında linkleri yapmasını nasılsa öğreneceksiniz. Hiç değilse şimdiden renkleri değiştirmesini öğrendiniz.     Şimdi görüyorsunuz fon siyah ve text sarı.
    Linkler şimdi kırmızı
    Ziyaret edilmiş linkle bordo
    ve aktif linkler ise yeşil.

Dersi kapatmadan, bir şeye dikkatinizi çekmek isterim. Eğer bir sayfanın HTML kodunu merak ediyorsanız, görmek için sayfanın üzerinde sağ tıklayıp, Kaynağı Görüntüleyi tıklarsanız açılan Notepad penceresinden HTML kodunu görürsünüz. Ama sağ tıklamaya kimi arkadaşlar çok mühim keşiflerinide saklamışlarsada zamanı gelişnce sayfayı sağ tıklamaya kapatmanında pek çözüm olmadığını öğrenirsiniz.

Sanırım artık browserin (tarayıcı program) nasıl çalıştığı hakkında biraz bilgi edinme zamanı geldi.
Önce bir örnek..

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey bir demet çiçek gibi! </BODY>

Güzel bir şey bir demet çiçek gibi!

<BODY BGCOLOR="#FFFFFF"> Hey! Burada neler oluyor?? </BODY>

Hey! Burada neler oluyor??

Browser eğer formatı söylemezseniz tanımaz. Siz aksini söylemedikçe, karakterleri ardarda sıralar. Yeni bir satır başlamak istiyorsanız, satırbaşı yapmalısınız.

<BODY BGCOLOR="#FFFFFF"> Hey! Burada neler oluyor?? </BODY>

Hey!
Burada
neler
oluyor??

  sadece satırbaşı anlamına gelir.   benzer bir ikinci komut ise, . Buda yeni bir paragrafın başlangıcını belirtir. Bir satır atlayıp, yeni bir satırdan satırbaşı yaparak paragrafı başlatır.

<BODY BGCOLOR="#FFFFFF"> Hey! Burada neler oluyor?? </BODY>

Hey!

Burada

neler

oluyor??

Bu satırbaşlatan etiketler hakkında bir not:
Bunları bir defadan fazla kullanamazsınız. Yani bir başka deyişle  şeklinde yazarak bir kaç tane boş satır elde edemezsiniz. Genelde tek bir tane boş satır bırakırlar. Az sonra size bir kaç tane boş satırı nasıl elde edeceğinizi anlatacağım.

Önce buraya bakınız...

<BODY BGCOLOR="#FFFFFF"> Gerçekten güzel bir şey. </BODY>

Gerçekten güzel bir şey.

Tarayıcı birden fazla boşluğu tanımaz. Gerçekten saçma görünen bir şey ama, böyle olması en uygun hali. Bu size dökümanın görünümünün tüm kontrolunu vermekte.

Browsere "boşluk" geldiğini anlatan küçücük bir kod vardır yani, ->   den bahsediyorum.

Şimdi bunu bir deneyin bakalım...

<BODY BGCOLOR="#FFFFFF"> Gerçekten         güzel         bir şey. </BODY>

Gerçekten güzel bir şey.

& özel bir karakterin başladığını, ; ise bittiğini belirtir; arada kalan harfler ise, özel karakteri tanımlarlar. Bu özel karakterlerden bir kısmı aşağıdadır. BODY tagı Dikkat: bunlar hep küçük harfle yazılmalıdır.

  ( boşluk)

< (< küçüktür işareti)

> (> büyüktür işareti)

& (& ampersand işareti)

" (" çift tırnak)

 ( soft hyphen)

Bunları herzaman kullanmanız gerekmez, bazen gerçek işareti yazmak tarayıcı programı şaşırtabilir. Bu işaretlerin nezaman karıştıracağını nasıl anlarız? diye sorarsanız; Bunun tam olarak bir kuralı yoktur. Biraz alıştırma ve web sayfanızda sapıtmış şekilde duran karakterleri görünce kullanmaya başlarsınız.

Bu arada hatalarınız üzerine düşüncelerim: Bir kısım insanlar hataların, hata yapmanın kötü olacağını düşünerek, hata yapmamak için yeni olan hiç bir şeyi denemezler. Elbette aynı hatayı tekrar tekrar yapmak biraz aptallığın yada nazikçe dikkatsizliğin belirtisi olsada, öğrenmeniz sırasında herşeyi berbat etmekten korkmayınız. Sonuçta hatalarınızdan da öğreneceksiniz.
Eğer hiç bir şeyi berbat etmiyorsanız, hiç bir şey öğrenmiyorsunuz, dolayısı ile, büyük bir ihtimalle hiç bir şey yapmıyorsunuz demektir. Biliyorsunuz, herşeyi berbat etmek, öğrenmenin adeta bir yan ürünüdür.

Bu kadar gevezelik yeter artık.

Şimdi sizleri sıkmaya başlamadan bir iki şeyin üzerinden çabucak gidiverelim. Ne diyorduk?
Browser, eğer satırbaşı yapmasını söylemezseniz, yazdıklarınızı düzgün bir metin gibi yazmaya devam eder. Bütün boşlukları da 1 boşluk değerine düşürerek gösterecektir. Eğer arada daha fazla boşluk isterseniz, ( ) boşluk kodu olarak kullanmanız gerekmektedir. Bahsetmediğim bir nokta:
Eğer, Return (yada Enter) tuşuna basarsanız, browser onu da bir boşluk olarak kabul edecektir..(gerçekten bir boşluk yoksa.)

Hemen şu örneği inceleyin:

<BODY BGCOLOR="#FFFFFF"> Gerçekten güzel bir şey bir demet çiçek gibi! </BODY>

Gerçekten
güzel
bir şey
bir demet
çiçek
gibi!

Önemli Not:
Hemen Yukarıda gördüğünüz yani "Line Break", browsere satırbaşı yapmasını söyleyen HTML etiketidir. Bu açıklamayı atladığımızı farkedip bizi uyaran Ersan beye teşekkür ederim. Eğer sizde böyle eksiklikleri farkederseniz lütfen bir e-mail ile bildirin.

Umarım gayet açık seçik olarak demek istediğimi anlatmışımdır...

Bir sonraki anlamı kendinden menkul bir etiket

<BODY BGCOLOR="#FFFFFF"> <CENTER>Gerçekten güzel bir şey</CENTER> </BODY>

Gerçekten güzel bir şey

Gördüğünüz gibi ister bir kelime, isterse de tüm sayfanız olsun, <CENTER> etiketinin arasında ne kalırsa, ortalanır. Bitti...

Neredeyse bir kaçtane boş satır yapmayı anlatmasını unutuyordum. Çok kolay, istediğiniz boş satır sayısı kadar, boşluk işaret + satırbaşı etiketi koyunuz.

<BODY BGCOLOR="#FFFFFF"> Gerçekten güzel           bir şeyyyy.. </BODY>

Gerçekten güzel

bir şeyyyy..

Kaynak www.kemalunsal.com/htm/html/ders_2.html