HTML dersleri, Site yapma, web tasarım dizayn

HTML
GIRIS
TAGLAR
GENEL BILGI
LINK VERME
FORMATLI METINLER
TABLOLAR

Karisikliga sebep vermemek için <BODY> taglerinin içini yazacagim. Bunadan sonra <HTML>, <HEAD> & <TITLE> taglerini artik yazmayacagim ama siz mutlaka yazin. (ben kisaltmis olmak için yazmiyorum-belirteyim).

<BODY> </BODY>

Güzel bir sey yazin.

<BODY> Güzel bir sey </BODY>

Güzel bir sey

Dökümanda herhangi bir sey degistirdiniz mi mutlaka "Kayit" ile saklatin, "Yenile" yi tiklayin ve degisikligi hemen gözlemleyinki ne oldugunu anlayabilesiniz

Sanirim ilk ögrenmemeiz gereken background - fon - renginin nasil degistigi.

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

Güzel bir sey

FFFF00 sari renginin HEX kodudur. Tiklarsaniz burada biraz daha var.

Dilerseniz arkaplani image - resim - de yerlestirebilirsiniz.
DIKKAT : image -resim- sizin HTML dosyanizla (sayfanizla) ayni folder -klasör- de olmali. Yoksa resimleriniz çikmaz. Resimleri göremezseniz endiselenmeyin, mutlaka ayni klasörde degildir veya GIF ve JPG dosyalarinizi Türkçe harfler kullanarak isimlendirmis olabilirsiniz.
Kodun yazilisi ise asagidaki gibidir:

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

Güzel bir sey

Arkaplan image i burada

Image in görünebilmesi için ayni HTML dosyanizla ayni klasörde olmasi gerek. Bunun en kolay yolu , image in üzerine sag tiklayip birinci derste yaptiginiz sayfa bilgisayarin hangi bölümünde ise hemen onun yanina Resmi Farkli Kaydet yapin

Eski düz beyaz ekrana gidelim tekrar.

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

Güzel bir sey

Istersek yazilari böyle Kalin yapabiliriz.

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

Güzel bir sey

Biz aslinda browsere diyoruz ki görünce harfleri kalin yapmaga basla  görüncede durdur.

Aybi kural italikler içinde geçerlidir....

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

Güzel bir sey

vede.. altçizgi.

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

Güzel bir sey

Beyaz ekrana tekrar dönelim.

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

Güzel bir sey

Istersek tagleri birlikte kullanabiliriz.

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

Güzel bir sey

Bu nested - yani içiçe geçmis - taglere örnektir. Ilerde etiketleri birlikte kullandiginiz zaman asagidaki sekilde yapin yoksa browserin kafasini karistirirsiniz.

<THIS><THAT></THIS></THAT> Karisik yani HATALI
<THIS><THAT></THAT></THIS> Nested DOGRUSU BÖYLE

Elbette font size too font ebatlarida degisir... Nasil mi? - Çok kolay.

Önce  taglerini ilave edin...

<BODY BGCOLOR="#FFFFFF"> Güzel birsey </BODY>

Sonra SIZE ebat özelligini belirtin.

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

Güzel bir sey

Fontlar 7 ebatta gelir:

minik	küçük	normal	ehh	büyük	çok büyük	jumbo
1	2	3	4	5	6	7

Simdi iki seyi tartisalim. <TAG> browsere bir seyi yapmasini söyler ve ATTRIBUTE ise <TAG> içine girer ve browsere nasil yapacagini söyler.
Ikinci nokta ise defaultlar yani varsayilanlar. Eger hiçbirsey belirtilmemisse browser varsayilan degerleri atar. Mesela font ölçülerinde varsayilan deger 3 tür. bir sey belirtmezseniz browser 3 varsayarak karakterleri yazar.

Her browserin degisik varsayilan font ayarlari vardir. Eger PCnizi fazla kurcalamadi iseniz varsayilan ayarlari " Times New Roman 12pt ve siyah renk tir". Ama ARIAL and COMIC SANS gibi degisik fontlarda vardir.

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

Güzel bir sey

Tabii fontlarin gözükmesi için PCnize yüklü olmasi gerekir. Tekrarlayayim eger sayfaniza bakan kimse, sizin belirttiginiz fontlar bilgisayarina yüklü degilse, sadece kendi bilgisayarinin varsayilan fontunu görür. Onun için fontlarinizla biraz dikkatli olun.Arial ve Comic Sans MS Windows ile gelen yaygin fontlardandir. Ayni sekilde Impact! da. Yapmaniz gereken, isi garantiye almak için birden fazla font belirtmeniz. (Evet! yapabilirsiniz) Bunlardan birini yapin.. Hidee Ho.
Benim gibi jetonu geç düsenlere açiklayayim. Olay su: Sayfa yüklenirken browser ARIAL arar. Bulursa kullanir, bulamadi ozaman HELVETICA yi arar. Bulursa kullanir olmadi LUCIDA SANSi gider bakar. Onuda bulamazsa çaresiz varsayilan fontu kullanir.

Evvet, eglenceye geri dönelim..
Isterseniz font rengini degistirebilirsiniz.

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

Güzel bir sey

Istersek birden fazla özelligi <TAG> içine yerlestirebiliriz...

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

Güzel birsey

Elbette bu kadar degil!

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

Güzel birsey

Tekrar belirteyim, birden fazla tag nested olmali.

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

Hangisinin önce oldugu mühim degil. Bir seyi kirmizi ve kalin yapmak için sira farketmez. Istediginiz sirada yapabilirsiniz.

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

Kendinizi ve browserin kafasini karistirmak için en kestirme yol, etiketlerin sirasini karistirmaktir. 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 edilmis link rengi ve ekran fon rengi için varsayilan degerleri vardir. Söyleki:

Text siyahtir
Linkler mavi
Actif link kirmizi
Ziyaret edilmis link mor

Eger ihtiyaciniz olursa bunlari degistirebilirsiniz (ihtiyaciniz olursa dedim!) Bütün dünya linkleri mavi görmege alismistir. Lütfen fazla degisiklik yapip kafalari karistirmayin. Bütün döküman için varsayilanlari <BODY> etiketinin içinde degistirebilirsiniz.

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

Güzel bir sey

Simdi linkleri ögrenmeden neden suyu bulandiriyorsun diyebilirsiniz!! Haklisiniz ama yakinda linkleri yapmasini nasilsa ögreneceksiniz. Hiç degilse simdiden renkleri degistirmesini ögrendiniz.     Simdi görüyorsunuz fon siyah ve text sari.
    Linkler simdi kirmizi
    Ziyaret edilmis linkle bordo
    ve aktif linkler ise yesil.

Dersi kapatmadan, bir seye dikkatinizi çekmek isterim. Eger bir sayfanin HTML kodunu merak ediyorsaniz, görmek için sayfanin üzerinde sag tiklayip, Kaynagi Görüntüleyi tiklarsaniz açilan Notepad penceresinden HTML kodunu görürsünüz. Ama sag tiklamaya kimi arkadaslar çok mühim kesiflerinide saklamislarsada zamani gelisnce sayfayi sag tiklamaya kapatmaninda pek çözüm olmadigini ögrenirsiniz. Iyi haftalar....

Türk MCSD.NET © 2005
Siteyi en kaliteli Internet Explorer 5 ve üzeri versiyonlarinda 800 x 600 pixel çözünürlükte izlemenizi tavsiye ederiz.