ESSELAMUN ALEYKUM.WEB SİTEME HOŞ GELDİNİZ.WEB SİTEMİ YILLAR SONRA TEKRAR KULLANIMA AÇIYORUM.HAYIRLI OLSUN. İHVANLAR










Web Tasarlama---Css Desing---Html Desing

tag calisma

Deneme

deneme mustafa kocadag

mk pre
mk var mk code blockoute mk cite italik oluyo büyütüyor big boşluk yok pre tagının özelliği 
Pre tagı arasında
kalan metinler
  tarayıcıda aynı
     şekilde gözükürler.
Bu tag işinizi
   çok kolaylaştırır
Görüldüğü gibi  kullanımıda
  gayet  	  basittir.

mk center

deneme mk Tag Çalışma deneme target yazan _top yazan yere şunları da yazabilirsin ama _top'u sil: inklere Klavye Tuşları ile Kısa Yol Atamak Linklerinize klavye kısa yolları atayabilirsiniz. Böylece klavye tuşları kullanarak sitenizin içerisinde gezilebilir. Bunu tagının elemanı olan accesskey ile yapabiliriz. Kullanımı: Ana Sayfa Link için atadığınız kısa yol harfi tek başına çalışmaz. Yani yazacağınız harf ile "ALT" tuşuna basarak linki aktif hale getirebilirsiniz. Yukardaki örnekteki linki çalıştırabilmeniz için "ALT+A" tuş kombinasyonunu kullanmanız gerekir. Burada önemli olan bir durum; siz eğer bir kısa yol atarsanız bunu ziyaretçinizin bilmesi gerekir ki kısa yolu kullanabilsin. Bunun için link verdiğiniz yerin yanına o linkin kısa yolunu belirtin. _blank _self _parent _top
  1. Mustafa
  2. mk
  3. muro
  4. desing
İç İçe Listeler Oluşturmak Liste kullanımını öğrendik. Sayfamızda bazen alt alta listeler kullanmamız gerekebilir. Bunu listeleri iç içe geçirerek yapabiliriz.
  1. HTML Kodları
    1. Kullanılan Elemanlar
      • aaa
      • bbb
    2. Kullanım Alanları
      • ccc
    3. Püf Noktaları
  2. JavaScript Kodları
Çerçeveler (Frames) Çerçeveleri kullanarak, birden fazla HTML dokümanını aynı sayfada gösterebiliriz. Kullandığımız her HTML dökümanı bir çerçevede gözükür ve her çerçeve diğerlerinden bağımsızdır. İki sayfayı birleştirebilmek için üç HTML dokümanı oluşturmak gerekmektedir. Bunlardan ikisi birleştirilecek sayfalar, üçüncüsü bu iki sayfayı birleştiren frame sayfasıdır. Sayfamızda çok sayıda çerçeve kullanımı hızı azaltacağından, çerçeveleri kullanırken dikkat etmeliyiz. Çerçeve yaratmak için tagını kullanırız. tagı tagı ile tagı arasında kullanılır. Sayfamıza framelerin dikey veya yatay yerleşmeleri için tagının "cols" ve "rows" elemanlarını kullanırız. cols="20%,80%" sayfanın dikey olarak hangi oranda bölüneceğini belirlemenizi sağlar. % değerin dışında piksel cinsinden de değerler verilebilir. "rows="120,*" sayfanın yatay olarak hangi oranda bölüneceğini belirlememizi sağlar. Bu örnekte kullanılar "*" işareti ikinci frame'in geri kalan boşluğun tümünü kaplayacağını belirtiyor. Aynı tag'i içerisinde hem "cols" hem de "rows" elemanları kullanılmaz. Böyle birşey yapmak için iç içe frameler kullanmamız gerekir. Bu konuya Listeler adlı bölümde de değinmiştik. Frame kullanırken kullandığımız frame'e isim vermek için name elemanını ve frame'in bulunduğu yeri göstermek için de src elemanını kullanırız. Şimdi öğrendiklerimizle örnek bir doküman oluşturalım. Frame Kullanımı Yukarıdaki örnekte farklı 3 dokümanı tek sayfada birleştirdik. Aynı bu sitedeki gibi yani. Bunu yapmak için 4 tane HTML dokümanı hazırladık. 3 dokuman birleşecek sayfalar, diğeri ise yukardaki örnekte bulunan ve bu dokümanları tek sayfada birleştirecek olan frame sayfası. Yaptığımız örneği inceleyelim; ile sayfamızı dikey olarak 3'e bölüyoruz. Sayfamız cols elemanın aldığı değerlere göre 3'e bölünüyor. Sonrasında sırayla menu.htm, ana sayfa.htm ve son olarakta menu2.htm dokümanlarını sayfamıza çağırıyoruz. Çağrılan tüm sayfalara name elemanı ile isim veriyoruz. Çerçeveler Arasında Köprü (Link) Kurma name elemanı ile isimlendirdiğimiz frame'leri birbirine köprüler(linkler) ile bağlayabiliriz. Mesela sayfanın solunda bulunan framede bir linke tıkladığımızda, açılacak sayfanın ortadaki framede açılmasını sağlayabiliriz. Aşağıdaki örneği incelerseniz daha rahat anlayacaksınız sanırım. //Menu.htm dosyası Frameler Arası Köprü Kurma Tıklayın Yukarıdaki örnekte deneme.htm dokümanının, sayfamızın ortasında bulunan framede açılmasını sağladık. Ortaki frame'in ismini name="orta" olarak ayarlamıştık bunun içinde target="orta" oldu. Bu konuya Köprüler (Linkler) bölümünde de değinmiştik Yatay ve Dikey Çerçeveleri Birlikte Kullanmak Sayfamızda aynı anda yatay ve dikey çerçeveler kullanmak isteyebiliriz.Bunun iç içe çerçeveler kullanırız. Örnek ; Frame Kullanımı Hazırladığımız örnek tarayıcımızda aşağıdaki gözükecektir; Sol Üst Sağ Orta Alt Sayfanızda çerçevelerinizin boyutlarıyla oynanmasını istemiyorsanız tagı içinde noresize yazmanız yeterli. Çerçevelerinizde bulunan kaydırma çubukları ile ilgili ayarlar yapmak için tagının scrolling elemanını kullanırız. Kaydırma çubuklarının her zaman gözükmesini istiyorsak scrolling="yes", hiçbir zaman gözükmesin istiyorsak scrolling="no" ve kaydırma çubuklarının sadece sayfa çerveye sığmadığında gözükmesini istiyorsak scrolling="auto" değerini kullanmalıyız. Frame Kullanımı Yukarıdaki örnekte, en üstteki framede hiçbir zaman kaydırma çubuğunun gözükmemesini, ortadaki framede kaydırma çubuğunun her zaman gözükmesini ve çerçevenini yeniden boyutlandırılmamasını, en alttaki frame de ise çerçevenin yeniden boyutlandırılmamasını ayarladık. Çerçevelerin Kenarlıklarını Şekillendirme Çerçevelerin kalınlığı border elemanı ile ayarlanır. border elemanının alacağı değer, çerçevenin kenarlık büyüklüğünü etkiler. Eğer çerçevenizde kenarlık istemiyorsanız, border elemanından ayrı olarak frameborder elemanını da kullanmalıyız ve bu iki elemanında değeri de "sıfır (0)" olmalıdır. Kullandığınız çerçevenin kenarlığına renk vermek için ise bordercolor elemanını kullanırız. Border Kullanımı Yukarıdaki örnekte oluşturduğumuz çerçevelerin kalınlığını "2" ve rengini "red" yani kırmızı yaptık. Sayfayı Eşit Şekilde 2' ye Bölerek Çerçevelere Ayırmak Diyelim ki sayfanızı yukarı ve aşağı olarak veya sol ve sağ olarak eşit şekilde ikiye ayırarak, bir tarafta 3, diğer tarafta ise 2 çerçeve yaratmak istiyorsunuz. Bu tür bir sayfayı düzenleyebilmek için tag'ini kullanırız. Nasıl kullanıldığına bir örnek verelim ; Noframe Kullanımı Tarayıcımızda aşağıdaki gibi görünecektir. NoFrame Örneği İç Çerçeve Kullanımı (iframe): Tüm frame'lerin tag'lerinin arasına yerleştirildiğini söylemiştik. Ama bunun bir istisnası var. Bu frame sayfanın içine yerleştiriliyor. Yani tag'lerinin arasına. Bunu yapabilmek için tag'ini kulanıyoruz. Örneği incelecek olursak öncelikle yarattığımız iç frame'e name ile isim veriyoruz, src elemanı ile frame içinde açılacak olan sayfanın yerini gösteriyoruz, width ile genişliğini 666 pixel ve yüksekliğini height ile 113 pixele ayarlıyoruz, iç çerçevemizin kenarlığını bordercolor ile renklendirdikten sonra iç frame' in kenar boşluklarını marginweight ve marginheight ile ayarlıyoruz. Tablo Oluşturmak (Tables) Tablolar web sayfalarının biçimlendirilmesinde kullanılan vazgeçilmez özelliklerdendir. Profesyonel sitelerin tamamında amatör sitelerin de pek çoğunda kaynak kodlarına baktığınızda tabloların ne kadar fazla kullanıldığını göreceksiniz. Tabloları kullanmak tasarımınıza güç katacaktır. Tabloları en iyi kavramanın yolu bol bol pratik ve deneme-yanılmadan geçer. Tablo oluşturmak için
tagını kullanırız. tagı elemanları ile kullanılır. satır yaratmak için kullanılır. ise sütün yaratmak için kullanılır. Örnek verecek olursak;
1.Satır Başı 1.Satır Sonu 2.Satır Başı 2.Satır Sonu
1.Satırın 1.Sütunu 1.Satırın 2.Sütunu
2.Satırın 1.Sütunu 2.Satırın 2.Sütunu
Yukarıdaki kodlar tarayıcınızda şöyle gözükecektir; 1.Satır 1.Sütun 1.Satır 2.Sütun 2.Satır 1.Sütun 2.Satır 2.Sütun Sütunlar her zaman satırların içinde yer alırlar yani her zaman elemanlarının arasında olmalıdır. Tablo oluştururken kullandığımız yardımcı elemanlarını tanıyalım: * =Tablonun gövdesini oluşturur. * =Satır yaratır. * =Tablomuza başlık yazacağımız zaman kullanırız. * =Sütun yaratır. * border= Tablonun kenar büyüklüğünü belirler. * bordercolor= Kenarlık rengini belirler. "" tagı ile birlikte kullanılır. * bordercolorlight= Kenarlığın aydınlık bölümlerinin rengini belirler. "
" tagı ile birlikte kullanılır. * bordercolordark= Kenarlığın karanlık bölümlerinin rengini belirler. "
" tagı ile birlikte kullanılır. * width=Tablonun enini belirler. * height=Tablonun boyunu belirler. * cellpadding=Hücre içi genişliği belirler. * cellspacing=Hücreler arası genişliği belirler. * (align=left,right,center)=Tabloyu sayfanın soluna,sağına veya ortasında gösterir. * (valign="top,middle,bottom")="
" ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) dayar. * bgcolor="" ile birlikte kullanılır. Sütuna arka plan rengi verir. * background="" ile birlikte kullanılır. Sütuna arka planına resim yerleştirmemizi sağlar.() Mesela 3 satırdan ve 4 sütundan oluşan, eni 400, boyu 100, hücre içi genişliği 3, hücreler arası genişliği 2 ve sayfanın tam ortasında yer alacak bir tablo yaratmak istersek; 1.Satır Başı 1.Satır Sonu 2.Satır Başı 2.Satır Sonu 3.Satır Başı 3.Satır Sonu
Başlık 1 Başlık 2 Başlık 3 Başlık 4
2.Satırın 1.Sütunu 2.Satırın 2.Sütunu 2.Satırın 3.Sütunu 2.Satırın 4.Sütunu
3.Satırın 1.Sütunu   3.Satırın 3.Sütunu 3.Satırın 4.Sütunu
Tarayıcımızda şöyle gözükecektir: Başlık 1 Başlık 2 Başlık 3 Başlık 4 2.Satır 1.Sütun 2.Satır 2.Sütun 2.Satır 3.Sütun 2.Satır 4.Sütun 3.Satır 1.Sütun 3.Satır 3.Sütun 3.Satır 4.Sütun 3.Satırın 2.Sütununun boş olduğu dikkatinizi çekmiştir. Sütunu boş bırakmak için " " karakterini kullandık. Eğer sadece boşluk bıraksaydık tablodaki sütun olmazdı. 1.Sütun 2.Sütun 2.Sütun Aynen soldaki örnekte olduğu gibi, gördüğünüz gibi 2.satırın 1.sütunu yok. Ancak   karakterini kulanırsak sütun boş bir şekilde gözükecektir. Tablo İçinde Tablo Yaratmak Tablo içinde tablo yaratmak demek her hangi bir sütun içinde normal bir tablo oluşturmak demektir. Bir örnek verirsek; ---1.Satır Başı--- ---sütun sonu--- ---1.Satır Sonu--- ---2.Satır Başı--- ---2.Satır Sonu---
---sütun başı---
İÇ TABLO
 
Sayfanızda görünümü şu şekilde olacaktır: İÇ TABLO Tablo Satırlarını ya da Sütunları Birleştirmek Satır veya sütunları birleştirmek demek 2 ya da daha fazla sütun veya satırı tek bir haneye çevirmektir. Çok kullanışlı bir özelliktir. Satır veya sütunları birleştirirken rowspan ve colspan elemanlarını kullanırız. * rowspan = Dikey olarak satır veya sütunları birleştirir. * colspan = Yatay olarak satır veya sütunları birleştirir. Örneklerle konuyu inceleyelim: * colspan kullanımı;
COLSPAN="3"
2.satır 1.sütun 2.satır 2.sütun 2.satır 3.sütun
Tarayıcınızda böyle gözükecek: COLSPAN="3" 2.satır 1.sütun 2.satır 2.sütun 2.satır 3.sütun * rowspan kullanımı;
ROWSPAN="2" 1.satır 2.sütun 1.satır 3.sütun
2.satır 2.sütun 2.satır 3.sütun
Tarayıcınızda böyle gözükecek: ROWSPAN="2" 1.satır 2.sütun 1.satır 3.sütun 2.satır 2.sütun 2.satır 3.sütun * Aynı tabloda rowspan ve colspan kullanımı;
COLSPAN="2" 1.satır 3.sütun ROWSPAN="3"
2.satır 1.sütun 2.satır 2.sütun 2.satır 3.sütun
COLSPAN="3"
Tarayıcınızda böyle gözükecek: COLSPAN="2" 1.satır 3.sütun ROWSPAN="3" 2.satır 1.sütun 2.satır 2.sütun 2.satır 3.sütun COLSPAN="3" Hangi Dış Kenarlığın Görüneceğini Seçmek Tablomuzun sadece bazı yerlerindeki dış kenarlıkları yok etmemiz mümkün. Bu özelliği tagının "frame" elemanı sayesinde gerçekleştiririz. "Frame" Elemanının Alacağı Değerler: * void : Tüm dış kenarlıkları yok eder. * above : Sağ,sol ve alt kenarlığı yok eder. * below : Sağ,sol ve üst kenarlığı yok eder. * hsides : Sağ ve sol kenarlıkları yok eder. * vsides : Üst ve alt kenarlıkları yok eder. * rhs : Üst, alt ve sol kenarlığı yok eder. * lhs : Üst, alt ve sağ kenarlığı yok eder. Örnek;
1.satır 1.sütun 1.satır 2.sütun
2.satır 1.sütun 2.satır 2.sütun
3.satır 1.sütun 3.satır 2.sütun
Tarayıcınızda şöyle gözükecektir: 1.satır 1.sütun 1.satır 2.sütun 2.satır 1.sütun 2.satır 2.sütun 3.satır 1.sütun 3.satır 2.sütun Hangi İç Kenarlığın Görüneceğini Seçmek Tablomuzun sadece bazı yerlerindeki iç kenarlıkları da yok etmemiz mümkün. Bu özelliği tagının "rules" elemanı sayesinde gerçekleştiririz. "Rules" Elemanının Alacağı Değerler: * none : Tüm iç kenarlıkları yok eder. * rows : Dikey iç kenarlıkları yok eder. * cols : Yatay iç kenarlıkları yok eder. Örnek;
1.satır 1.sütun 1.satır 2.sütun
2.satır 1.sütun 2.satır 2.sütun
3.satır 1.sütun 3.satır 2.sütun
Tarayıcınızda şöyle gözükecektir: 1.satır 1.sütun 1.satır 2.sütun 2.satır 1.sütun 2.satır 2.sütun 3.satır 1.sütun 3.satır 2.sütun Tablolarınızda "frame" ve "rules" elemanını birlikte de kullanabilirsiniz. Unutmayın tablolar biraz karışık olmasına rağmen öğrenilmesi mutlaka gerekli olan HTML elemanlarıdır. Ne kadar çok pratik yaparsanız konuyu o kadar çabuk kavrarsınız. Tablolar ile ilgili anlatacaklarım bu kadar. Veri Giriş Formu Oluşturmak Formlar ziyaretçilerden bilgi almak için kullanılan HTML elemanlarından biridir. Formları
tagları arasında oluştururuz. Formlar, ziyaretçilerin belirtilen alanları doldurup gönder düğmesine basmaları ile bilgilerin gönderilmesi esasına göre çalışır. Form bilgilerinin bize ulaşmasını php, asp, perl/cgi gibi diller sağlar. Yani formları kullanabilmek için bu dillerden en az biri hakkında bilginiz olması lazım. Ben php' yi öneririm. Bir form örneği yapalım:
Yukardaki form örneğinde "method=post veya get" verilen form bilgilerinin server tarafından hangi yöntem ile iletileceğini belirten yöntemdir. "name=xyz" ile formumuza bir ad tanımlarız. "action=xxx.cgi" ise bilgileri gönderen programın adı ve uzantısını gösterir. Formlarda method ve action kullanımını php, asp, perl/cgi gibi dillerden birini öğrendiğinizde anlayacaksınız. Form Elemanları Form oluştururken
tagları arasında elemanını kullanırız. Bu elemanın kapanış etiketi() yoktur. elemanın aldığı özellikleri inceleyelim;
type= Form öğesinin ne olduğunu belirtir.(metin kutusu,onay düğmesi ,vb.) name= Oluşturduğumuz öğenin adını belirtir. Çok önemlidir. value=Eğer değer vermek istersek kullanırız. size=Form öğesinin karakter uzunluğunu belirtir. Bunların dışında "maxlength" öğesi kullanılarak metin kutusunun maximum uzunluğu belirlenebilir. Ayrıca her zaman "value", "maxlength", "size" gibi öğelerini kullanamak zorunda değiliz. elemanında "type" öğesinin aldığı değerler: * text(metin kutusu) * password(parola alanı) * radio(radyo düğmesi) * checkbox(onay kutusu) * button(düğme) * submit(onay düğmesi) * reset(reset düğmesi) * file(dosya gönderme) Bu değerler dışında elemanı ile kullanılmayan değerler de vardır. Bunlar: * textarea(metin alanı) : Kullanımı() * select(menü) : Kullanımı() Tüm bu değerleri yakından inceleyelim. Text (Metin Kutusu) Yaratmak
Ad : Soyad :
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "value" elemanını kullanmasaydık kutucuklar boş olacaktı. Ad : Soyad : Password (Parola Alanı) Yaratmak
Kullanıcı Adı :
Parola :
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Parola alanına yazdığınız yazılar ****** şeklinde gözükecektir. Kullanıcı Adı : Parola : Textarea (Metin Alanı) Yaratmak
Kullanıcı Adı :
Parola :
Düşünceler :
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "rows" dikey olarak , "cols" ise yatay olarak textarea(metin alanı)' nın büyüklüğünü gösterir. arasında kalan kısımda yazdıklarımız ise "value" elemanının yaptığı işi yapar. Kullanıcı Adı : Parola : Düşünceler : Site Hakkındaki Görüşlerinizi Yazınız... Radio Buton(Radyo Düğmesi) Yaratmak
Adınız :
Soyadınız :
Cinsiyetiniz : Erkek Kadın
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "name" elemanı dikkat ettiyseniz iki radio düğmesinde de aynı değeri almış. Eğer farklı olsalardı aynı anda iki radio düğmesi de seçilebilirdi. Daha iyi anlamak için "name" değerlerini aynı yapıp deneyin. Sonra farklı yapıp deneyin sonucu göreceksiniz. Ayrıca örneğimizde birinci radio düğmesinde "checked" elemanını kullandık. Bu eleman kullanıldığı radio düğmesini seçili hale getirir. Örneğimizde de bu birinci radio düğmesi oldu. Adınız : Soyadınız : Cinsiyetiniz : Erkek Kadın CheckBox (Onay Kutucusu) Yaratmak
Kullanıcı Adınız :
Mail Adresiniz :
Yeni Haberleri Mail ile Gönder :
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. "checked" elemanı ile onay kutuğumuzu seçili hale getirdik. Kullanıcı Adınız : Mail Adresiniz : Yeni Haberleri Mail ile Gönder : Select Menü(Menü Kutusu) Yaratmak
Kullanıcı Adı :
Sisteminiz :
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Menü yaratırken elemanını kullanmıyoruz. Menülerimizi elemanları arasında oluşturuyoruz. name ile menümüzü isimlendiriyoruz, size ile menümüzün yüksekliğini belirliyoruz. (size değeri ile alıştırma yapmalısınız.) ise arasında menümüzde bulunacak elemanları bulunduruyor. value ile bu elemanlara değer veriyoruz. Dikkat ettiyseniz hazırladığımız menünün ikinci seçeneği seçili halde ekrana geliyor, bunu menümüzün ikinci seçeneğindeki selected ile sağlıyoruz. Kullanıcı Adı : Sisteminiz : Bir örnek daha yapalım. Bu sefer size elemanına değer olarak "3" verelim ve menümüzün nasıl göründüğünü inceleyelim.
Kullanıcı Adı :
İşletim Sistemi :
Kullanıcı Adı : İşletim Sistemi: elemanları arasında kullandığımız multiple sayesin yaptığımız menüde birden fazla seçenek seçebiliyoruz. File Upload (Dosya Yüklemek) Etmek
Adınız :
Dosyanız :
Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Adınız : Dosyanız : Submit Button (Gönder Düğmesi) Yaratmak

Adınız :
Yaşınız :

Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Adınız : Yaşınız : Oluşturduğumuz düğme doldurulan form bilgilerini göndermek içindir. value değeri düğmenin üstünde yazıcak yazıyı belirler. Submit Button için düğme yerine resim de kullanabiliriz. Yani seçtiğimiz resme tıklayınca form gönderilir. Bir örnekle göstereyim.

Adınız :
Yaşınız :

Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Adınız : Yaşınız : Reset Button (Sil Düğmesi) Yaratmak

Adınız :
Yaşınız :

Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Adınız : Yaşınız : Oluşturduğumuz düğme doldurulan form bilgilerini temizlemek içindir. value değeri düğmenin üstünde yazıcak yazıyı belirler. Reset Button için düğme yerine resim de kullanabiliriz. Yani seçtiğimiz resme tıklayınca form temizlenir. Bir örnekle göstereyim.

Adınız :
Yaşınız :

Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Adınız : Yaşınız : Formu Biçimlendirmek Hazırladığımız formların
ve taglarını kullanarak göze daha hoş görünmelerini sağlayabiliriz.
Veri Giriş Formu Örneği Kullanıcı Adı :
Parola :
Cinsiyetiniz : Erkek Kadın

Yaşınız :

Hobileriniz :
Seyahat Etmek
Kitap Okumak
Müzik Dinlemek
Koşu Yapmak
Yüzmek

Site Hakkındaki Düşünceleriniz :


Hazırladığınız form tarayıcınızda aşağıdaki gözükecektir. Örneği inceleyerek nasıl oluştuğunu kolayca anlayacaksınız. Veri Giriş Formu Örneği Kullanıcı Adı : Parola : Cinsiyetiniz : Erkek Kadın Yaşınız : Hobileriniz : Seyahat Etmek Kitap Okumak Müzik Dinlemek Koşu Yapmak Yüzmek Site Hakkındaki Düşünceleriniz : Form kullanımında bu bölümde öğrenecekleriniz bu kadar. Nasıl form oluşturulacağını öğrendiniz. Fakat unutmayın formların nasıl gönderileceğini php, perl/cgi, asp gibi dilleri öğrenince anlayacaksınız. Sayfaya Ses, Video Eklemek Sitenizi ziyaret edenler sitenizde gezerken müzik dinleyebilir veya video izleyebilirler. Tabiki bu etkileşimleri kullanmak sayfanızın açılmasını etkiler. Yani sayfanın açılması için öncelikle sayfanıza yüklemiş olduğunuz ses veya görüntünün yüklenmesi gerekir. Eğer kullandığınız dosya boyutu büyük ise sayfanız çok geç açılır bu ziyaretçinin ilgisini kaybetmesine sebep olabilir. Tarayıcınız tüm ses ve görüntü formatlarını tanımaz. Tarayıcınızın uyum sağladı formatlar şunlardır: * .wav * .wma * .au * .mp3 * .mpg * .mpeg * .avi Sayfaya ses gömmek için Netscape' te , Microsoft IE' da tagları kullanılır. Sayfayı ziyaret eden kullanıcıların hangi tarayıcıyı kullanacağını bilemeyeceğimiz için iki tagıda kullanıcaz. Sayfamıza nasıl etkileşim ekleyeceğimize bir örnek verelim: <bgsound src="dt.wav"> src ile dosyanın kaynağını gösteriyoruz, autostart ile sayfa açılır açılmaz etkileşimin çalmaya başlamasını istiyoruz, loop sayfamıza eklediğimiz ses veya görüntünün kaç defa çalacağını belirliyor. Eğer loop="true" olursa etkileşim sürekli çalıyor. hidden ile kontrol konsolunu saklıyoruz. tag&#305; ise taray&#305;c&#305;n&#305;n <embed> i tan&#305;mamas&#305; halinde <bgsound>' u dikkate almas&#305;n&#305; sa&#287;l&#305;yor. Bir örnek daha yapal&#305;m: <embed src="dt.wav" loop="1" controls="smallconsole"> <noembed> <bgsound src="dt.wav"> controls elemanı ile etkileşim kontrol konsolunu küçülttük. Eğer controls elemanını kullanmassak, width,height elemanları ile kontrol konsolumuza istediğimiz boyutu verebiliriz. İsterseniz sayfanıza ses veya görüntü etkileşimi eklemek yerine, etkileşim dosyalarına link verebilirsiniz. Böylece ziyaretçi isterse o etkileşimi aktif hale getirir ve sayfanızda açılırken zorlanmaz. Ses veya görüntü etkileşimine link verme: Dinlemek için tıklayın Unutmayın ses ve görüntü dosyaları kullanırken boyutlarına dikkat edin. Renk Kodları ve İsimleri Sadece 16 renk adı HTML' de kullanılır (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow). Diğer renkleri HTML de kullanmak için kodlarını kullanmalıyız. Html' de kullanılan bazı renk kod ve isimleri: Renk Adı Renk Kodu Renk AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F Darkorange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DodgerBlue #1E90FF Feldspar #D19275 FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22 Fuchsia #FF00FF Gainsboro #DCDCDC GhostWhite #F8F8FF Gold #FFD700 GoldenRod #DAA520 Gray #808080 Green #008000 GreenYellow #ADFF2F HoneyDew #F0FFF0 HotPink #FF69B4 IndianRed #CD5C5C Indigo #4B0082 Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA LavenderBlush #FFF0F5 LawnGreen #7CFC00 LemonChiffon #FFFACD LightBlue #ADD8E6 LightCoral #F08080 LightCyan #E0FFFF LightGoldenRodYellow #FAFAD2 LightGrey #D3D3D3 LightGreen #90EE90 LightPink #FFB6C1 LightSalmon #FFA07A LightSeaGreen #20B2AA LightSkyBlue #87CEFA LightSlateBlue #8470FF LightSlateGray #778899 LightSteelBlue #B0C4DE LightYellow #FFFFE0 Lime #00FF00 LimeGreen #32CD32 Linen #FAF0E6 Magenta #FF00FF Maroon #800000 MediumAquaMarine #66CDAA MediumBlue #0000CD MediumOrchid #BA55D3 MediumPurple #9370D8 MediumSeaGreen #3CB371 MediumSlateBlue #7B68EE MediumSpringGreen #00FA9A MediumTurquoise #48D1CC MediumVioletRed #C71585 MidnightBlue #191970 MintCream #F5FFFA MistyRose #FFE4E1 Moccasin #FFE4B5 NavajoWhite #FFDEAD Navy #000080 OldLace #FDF5E6 Olive #808000 OliveDrab #6B8E23 Orange #FFA500 OrangeRed #FF4500 Orchid #DA70D6 PaleGoldenRod #EEE8AA PaleGreen #98FB98 PaleTurquoise #AFEEEE PaleVioletRed #D87093 PapayaWhip #FFEFD5 PeachPuff #FFDAB9 Peru #CD853F Pink #FFC0CB Plum #DDA0DD PowderBlue #B0E0E6 Purple #800080 Red #FF0000 RosyBrown #BC8F8F RoyalBlue #4169E1 SaddleBrown #8B4513 Salmon #FA8072 SandyBrown #F4A460 SeaGreen #2E8B57 SeaShell #FFF5EE Sienna #A0522D Silver #C0C0C0 SkyBlue #87CEEB SlateBlue #6A5ACD SlateGray #708090 Snow #FFFAFA SpringGreen #00FF7F SteelBlue #4682B4 Tan #D2B48C Teal #008080 Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0 Violet #EE82EE VioletRed #D02090 Wheat #F5DEB3 White #FFFFFF WhiteSmoke #F5F5F5 Yellow #FFFF00 YellowGreen #9ACD32 256-Bit Renk Tablosu 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF Css (Cascading Style Sheet) Nedir? HTML' de zahmet gerektiren çoğu şey, Css kullanımı sayesinde çok basit bir şekilde yapılabilir. Css, HTML imlerinin genel olarak nasıl görüneceği konusunda çok büyük kolaylıklar sağlar. Renkleri, yazı şekillerini, resimleri ve daha bir çok veriyi sayfamızda istediğimiz gibi gösterebiliriz. Css, HTML elemanlarına özellikler ekleyerek sayfamızı istediğimiz boyuta getirir. Tasarım için Css vazgeçilmez bir özellik diyebiliriz. Css Kullanımı Css kullanarak sayfamıza kolayca şekil verebilir ve HTML dokümanımıza da bir düzen getirebiliriz. Css 3 farklı şekilde kullanılabilir. Bunlar: 1. Yerel Stil Şablonları (Tek bir etiket için) 2. Global Stil Şablonları (Sayfadaki etiketler için) 3. Harici Stil Şablonları (Çok sayıda sayfalar için) 1-Yerel Stil Şablonları Herhangi bir etikete özellik eklemek için kullanırız. Mesela

etiketini ele alalım. Örnek:

Yerel Stil Şablonuna Örnek

Yerel stil şablonu kullanarak

etiketini 28 punto büyüklüğünde,mor renkte, sayfaya ortalanmış ve altı çizilmiş hale getirdik. Hazırladığımız örnek tarayıcımızda aşağıdaki gibi gözükecektir. Yerel Stil Şablonuna Örnek Yerel stil şablonunu style elemanı sayesinde oluşturuyoruz. style elemanını kullanırken dikkat etmemiz gereken şey, her düzenliyicinin birbirinden ";" (noktalı virgül) işareti ile ayrılıyor olmasıdır. İstediğimiz html etiketine style elemanı ile şekil verebiliriz. 2-Global Stil Şablonları Global Stil Şablonu sayesinde sayfamızdaki tüm yazı ve görüntüleri tek bir style etiketi ile düzenleyebiliriz. Bunu body etiketinden önce style etiketini kullanarak gerçekleştiririz. Global Stil Şablonu uygulanmış HTML dokümanı şu şekilde olur. Global Stil Şablonu

Başlık

paragraf...

Yukarıdaki örnekte sayfadaki tüm paragrafların "Courier" fontuyla, "kalın" ve "kırmızı" renkte olmasını ayarladık. Ardından da sayfadaki tüm

başlıklarının "22" punto ile, "mavi" renkte olmasını ayarladık. 3-Harici Stil Şablonları En çok işimize yarayacak stil şablonudur. Çünkü tek bir stil şablonu dosyası oluşturarak çok sayıda farklı sayfaların görünümünü düzenleyebiliriz. Öncelikle aşağıdaki gibi bir "css" dosyası oluşturalım ve bu dosyayı ".css" uzantısı ile kaydedelim. body { font-family: Verdana; margin-left: 15; margin-top: 20; background-color: black; color: white; } p { font-style: italic; text-align: justify; } Yukarıdaki dosyamızı mesela deneme.css adı ve uzantısı ile kaydettik. Oluşturduğumuz bu stil şablonunu istedimiz sayfalara ekleyerek, o sayfaların body ve paragraf görünümlerinin ayarladığımız gibi olmasını sağlayabiliriz. Bunun için sayfamızdaki etiketlerinin arasına css dosyamızın yerini belirten komutu yazmamız yeterli olacaktır. Aşağıdaki örneği incelerseniz harici bir css dosyasının nasıl sayfaya eklendiğini anlayacaksınız. .... .... Harici stil şablonlarını kullanarak sitenizin tümünü kolayca şekillendirebilirsiniz. Sadece yapmanız gereken, tek bir ".css" dosyası oluşturup, uygulayacağınız sayfalara bu ".css" dosyasının yerini göstermek olacak. Gruplama Cascading Style Sheet (Zincirleme Stil Sayfaları) kullanırken birden çok seçiciye aynı tanım veya tanımlar verilebilir. Örneklerle bu konuyu inceleyelim; h1,h2,h3,h4,h5,h6 { color: blue } Yukarıda tüm başlıkların renginin mavi olmasını ayarladık. İstersek aşağıdaki örnekteki gibi birden çok özellikte ekleyebiliriz. body,p,em,u,i { color: red; font-size: 70%; font-weight:lighter } Class (Sınıf) ve Id (Kimlik) Seçicileri Class Seçicisi ve Kullanımı: Class (sınıf) seçicisiyle tanımlanan özellikleri HTML dokümanımızda istediğimiz zaman kullanabiliriz. .mavi { color: blue; } Yukarıdaki gibi tanımlanan .css dosyamızı HTML dokümanımızda şöyle kullanırız. Bu yazının rengi mavi.

Bu paragrafın rengi mavi.

Bu başlığın rengi mavi.

Yani "." (nokta) işareti ile css dosyamızda class(sınıf) tanımlaması yapıyoruz ve HTML dokümanımızda bu sınıflandırmayı taglarda class="" elemanını kullanarak uyguluyoruz. Bir diğer kullanım şekli ise, istediğimiz bir taga isim vermek şeklinde olabilir. Aşağıdaki örneği inceleyelim. h1.mavi { color: blue; font-style: italic } h1.mor { color: purple; font-style: italic } Yukarıda

tagını 2 farklı şekilde sınıflandırdık. Bu sınıflandırmaları HTML dokümanımızda aşağıdaki gibi kullanabiliriz.

Normal başlık.

Bu başlığın rengi mavi ve italik.

Bu başlığın rengi mor ve italik.

Id Seçicisi ve Kullanımı: Id (kimlik) kullanımında "." işareti yerine "#" (diyez) işareti kullanılır. Class seçicisininden bir başka farkı ise id' ler HTML dokümanlarında tektir. Örnek: #pempe { color:pink } HTML' de belirlediğimiz id' nin kullanımı aşağıdaki gibidir.

Bu yazı rengi pempe

Bir başka kullanımı: b#pempe { color:pink } HTML dokümanında kullanımı aşağıdaki gibidir. Bu yazı rengi pempe Bir id belirleyerek, bu id altındaki belirli bir tag veya tagların özelliğini değiştirmek istiyorsak eğer aşağıdaki gibi bir yol izlemeliyiz. #deneme u,i{ font-weight: bold; color:pink } Yukarıdaki örnekte deneme adlı id' miz altında bulunan < u> ve etiketleri arasında kalan kısımlar tarayıcımızda kalın ve pempe olarak gözükecektir. HTML dokümanımızda bu id' yi aşağıdaki gibi kullanabiliriz.

Bu bir paragraf. bu yazı italik, kalın ve pempe bu yazının altı çizili, kalın ve pempe

Id' lerin bu kullanımı, DIV etiketinin kullanımını öğrendikten sonra çok işinize yarayacak. Css (Zincirleme Stil Sayfaları) Kullanımı Css kullanımı ile HTML dokümanlarımıza kolayca şekil verebiliyoruz. Tasarım için css vazgeçilmez bir özellik diyebiliriz. Eleman Aldığı Değer Tanımı Kullanım Örneği font-size ...% ...pt larger smaller xx-small x-small small medium large x-large xx-large Font büyüklüğünü değiştirir. p { font-size: 150% } h3 { font-size: 18pt } b { font-size: xx-large } font-family serif sans-serif cursive fantasy monospace HTML elemanının gösterileceği font ailesini belirtir. p { font-family: verdana, helvetica, arial, sans-serif } Paragraftaki yazı varsa Verdana yoksa helvetica yoksa arial o da yoksa sans-serif fontunu kullanacak. font-style normal italic oblique Fontun stilini belirtir. p { font-style: italic } font-variant normal small-caps Yazıyı ebatı küçük büyük harflerle göstermek için. h1 { font-variant: normal } font-weight normal lighter bold bolder 100 Font kalınlığını ayarlamak için. p { font-weight: bold } color red 100%,0%,0% 255,0,0 #980000 Font rengini ayarlamak için. p { color:#FFC800 } h1 { color:255,255,255 } background-color blue 0%,0%,100% 0,0,255 #0000FF Art alan rengini belirtir. p { background-color: blue } background-image url (resim yeri ve adı) Art alana koyulacak resmi belirtir. body { background-image: url ('antalya.gif') } background-repeat repeat repeat-x repeat-y no-repeat Art alana koyulan resmin tekrar edilip edilmeyeceğini belirtir. body { background-image:url('antalya.gif') ; background-repeat: repeat } Sayfanın arka planındaki 'antalya.gif' adlı resmi, tüm sayfayı dolduracak şekilde tekrar ederek gösterir. background-attachment scroll fixed Art alandaki resmin yerinde sabit kalıp kalmayacağını belirtir. body { background-image:url('antalya.gif') ; background-attachment: fixed } Arka plandaki resmi sabitledik. background-position x % y % top center bottom left right Art alandaki resmin yerini ayarlamamızı sağlar. body { background-image:url('antalya.gif') ; background-position: center center } Arka plandaki resmi, yatay ve dikey olarak ortaladık. text-align left right center Metni sağa,sola yaslamaya veya ortalamaya yarar. h2 { text-align:center } margin (left, right, top, bottom) 0 1 2 ... 999 Sağdan, soldan, yukarıdan ve aşağıdan boşluk bırakmaya yarar. p { margin-left: 10; margin-top:20 } body { margin-left: 15; margin-right:15 } padding (left, right, top, bottom) 0 1 2 ... 999 Nesnenin etrafında boşluk bırakmaya yarar. body { padding; 10px } p { padding-top; 10px; padding-bottom: 10px } text-indent 0 1 2 ... 999 Cümleleri içerden başlatmaya yarar. p { text-indent: 15px } line-height 0 1 2 ... 999 Satır aralarındaki boşluğu ayarlamaya yarar. p { line-height: 22px } white-space normal pre nowrap normal seçeneği metindeki extra boşlukların ihmal edilmesini, pre boşlukların olduğu gibi gözükmesini, nowrap ise metnin aşağı satıra geçmesini önler. p { white-space: nowrap } word-spacing 0 1 2 ... 999 Kelimeler arasındaki boşluğu ayarlamaya yarar. p { word-spacing: 3em } letter-spacing 0 1 2 ... 999 Harflerin arasındaki boşluğu ayarlamaya yarar. p { letter-spacing: 5px } text-transform none uppercase lowercase capitalize uppercase tüm harfleri büyük, lowercase tüm harfleri küçük, capitalize tüm kelimelerin ilk harflerini büyük yapmaya yarar. p { text-transform: capitalize } text-decoration none underline overline line-through Metne şekil vermeye yarar. p { text-decoration: underline } border (color, style, width) style:(thick, solid, double, groove, dashed, dotted) Kenarlıkları şekillendirmeye yarar. table { border-color: red; border-style: solid; border-width: 15px } Css dosyamızı sayfamıza yüklemek için kullandığımız etiketinin media elemanının kullanımı ise aşağıdaki gibidir. media elemanı 2 farklı değer alabilir. Bunlar: * screen : sayfanın tarayıcımızdaki görünümü. * print : sayfanın yazıcıdan çıktı alınınca görünmesini istediğimiz hali. Mesela sayfamızdaki bazı yazıların çıktı alınınca kağıda farklı dökülmesini istiyorsunuz. Bunun için 2 farklı css dosyası oluşturarak (normal.css ve cikti.css) normal css dosyamızda istediğimiz ayarları yapıyoruz. cikti alınırken gözükmemesi gereken yerleri ise 2.css dosyasında ayarlayıp, bu 2 farklı css dosyasınıda sayfamıza ayrı ayrı çağırıyoruz. Aşağıdaki örnekteki gibi; Div (Division) Kullanımı Div kullanarak sayfamızın istediğimiz yerine istediğimiz yazıyı, resmi, tabloyu vs.' yi koyabiliriz. Bunun yanında bu nesnelerin birçok özelliğini de değiştirebiliriz. Div tagı css bölümünde öğrendiğimiz id elemanı ve style etiketi ile kullanılır. Div tagının kullanımı:
Bu yazı tarayıcının solundan 10, üstünden 20 pixel içerde başlıyor.
Div etiketi içerisinde style elemanın aldığı değerler: Özellik Aldığı Değer Tanımı position absolute relative static fixed Elemanın, kesin olarak verdiğimiz doğurultuda mı yerleşeceğini, yoksa sayfa içindeki diğer elemanlara göre mi yerleşeceğini belirtir. left ...px ...% Yerleştirilen elemanın sol köşesinin nerden başlayacağını belirtir. top ...px ...% Yerleştirilen elemanın hangi yükseklikten başlayacağını belirtir. width ...px ...% Yerleştirilen elemanın genişliğini belirtir. height ...px ...% Yerleştirilen elemanın yüksekliğini belirtir. clip shape Yerleştirilecek elemanın, görünmesi istenilen bölgeyi içeren kutucuk. overflow scroll visible hidden Bu komut yerleştirilen elemanın, istenilen bölgeye sığmaması durumunda sığmayan kısmına ne olacağını belirtir. vertical-align baseline sub super top text-top middle bottom text-bottom length Elemanın dikey olarak nasıl yerleştirileceğini belirtir. z-index 1, 2, ..,99 Yerleştirilen elemanın destedeki sırası. visibility visible hidden Yerleştirilen elemanın görünüp, görünmeyeceğini belirtir.
Bugün 17 ziyaretçikişi burdaydı!
Genel
İLİM
TEKNOLOJİ
EĞİTİM VE KALKINMA
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol