Hanibal
Üye
- Katılım
- 15 Nis 2006
- Mesajlar
- 166
- Puanları
- 1
- Yaş
- 36
Aşagıda HTML tagları ve kullanımlarıyla ilgili bilgiler var.
Bir HTML sayfasının yapısı
Sık kullanılan tag'lar
Tablolar.
Sayfayı Frame'lere (çerçevelere) bölmek
Image Map (Dikdörtgen, daire, çokgen)
Sayfaya Nesne gömmek. (QT, Avi filan)
HTML nedir?: HTML, Hyper Text Markup Lanuage kelimelerinin başharflerinden oluşmuştur. Aslında bir programlama dili değildir. Sayfa şekillendirme dili denebilir. HTML dışında da kullanılabilecek şeyler vardır. Ama çoğu server tabanlı olduğu için bu kadar basit değil. Web'de yeni olanların en önce öğrenmeleri gereken dil olduğunu düşünüyorum.
"TAG"Nedir?: Tag dedikleri HTML sayfasının içine sayfaya şekil vermek niyetiyle kullanılan ama bazen şekilden fazlasını verebilen komutlardır. Tag'lar < ve > karakterleri arasına yazılır. Bir tag'ın bitişini / sembolü belirler. "şimdi neler saçmaladı" demeyin birazdan anlayacaksınız. örneğin bir yazıyı bold (kalın) yapmak istiyorsunuz. O zaman " <B>Bir yazı</B> " yazmalısınız (tırnak işaretleri benden). Burada "Bir Yazı" bold olacaktır. Fazla geç olmadan uygulamaya başlayalım.
Bir HTML sayfasının yapısı: HTML sayfası aslında basit bir metin belgesidir. Yani NotePad veya Kolay Yazı gibi bir Text editörüyle en âla şekilde hazırlanabilir. Aşağıdaki kodu bir inceleyin:
Burada basit bir HTML yapısı görüyoruz. <HTML> tagı HTML kodunun başladığını belirtiyor. Yani Netscape'i veya Internet Explorer'ı buradan sonrası ilgilendiriyor. <HEAD> Sayfanın baş kısmı. Bu kısımda sayfanın özellikleri belirtiliyor (ileride ayrıntılı olarak göreceksiniz). Hemen ardından <TITLE> tagını görüyorsunuz. Bu ise pencere başlığında ne yazacağını belirtir. Tabi ki </TITLE> ile de biter. <BODY> ile başlayan kısım bizi en çok ilgilendirendir. çünkü sayfanın ekranda görünen kısmı burasıdır. Hemen peşinden <B> biraz yazı ve </B> tagları var. Bu taglar yukarıdaki örnekte olduğu gibi aralarındaki yazıyı BOLD yapar.
Sonunda </BODY> ile sayfamızın gövde kısmını bitiriyoruz ve </HTML> ile de HTML kodumuzu bitiriyoruz. Buradan sonra yazanlar browser'ı ilgilendirmiyor.
Sık kullanılan tag'lar:
Buradaki tabloda HTML'de size gerekecek taglar ve açıklamaları var bunları bir yere kopyalayın. Sonra lazım olur.
Bu tag sayfaya resim gömmek için kullanılır.
şeklindedir. Burada resmin kaynağı (resim.jpg), genişliği (width) ve yüksekliği (height) belirtilmiştir. Yükseklik ve genişliği belirtmesek de olur ancak resimleri görmeden dolaşan bir ziyaretçi sayfamızı çok farklı görecektir. Yani resimler yüklenmese de bu bilgiler resmin nereye ne şekilde yerleşeceğini belirtir. HSPACE ile Resmin sağ ve sol yanında kalacak boşluk miktarı ve VSPACE ile ise resmin alt ve üst taraflarında kalacak boşluk belirlenir. Tabi ki pixel türünden. Align ise resmin hizalanmasını belirler. Buraya gelebilecek değerler şunlardır:
RIGHT : Resmin sağa hizalanması.
LEFT: Resmin sola hizalanması.
TEXTTOP : Resim ile aynı satırdaki yazının Resmin üst tarafına hizalanması.
ABSCENTER : Resim ile aynı satırda olan yazının resmin ortasına hizalanması.
CENTER : Resim ile aynı satırda olan yazının alt çizgisinin resmin ortasına hizalanması.
ABSBOTTOM : Resim ile aynı satırda olan yazının tabanının resmin alt çizgisine hizalanması.
Link olayları:
Sayfaya link koymak için <A Href="adres" target="_new">Yazı</A> tagını kullanıyoruz. Href özelliği linkin gideceği adresi belirler. Target özelliği ise linkin nereyi etkileyeceğini belirler. "_new", yeni pencerede açar. Gerekmiyorsa belirlememe hakkınız var. ileride sayfayı Frame'lere ayırmayı göreceğiz. O zaman buraya Frame'in adını yazacağız. Font özellikleri: <Font face="Font ismi" size=3>Yazı</Font> tagı ile kullanacağımız yazı tipini ayarlıyoruz. Eğer size özelliğini punto cinsinden yazmak isterseniz size özelliğini point-size ile değiştirmelisiniz. <Font face="Font ismi" point-size=11>Yazı</Font> gibi. Eğer yazının sadece büyüklüğünü değiştirmek isterseniz face özelliğini silebilirsiniz veya sadece yazı karakterini değiştirmek isterseniz size özelliğinden kurtulun.
Yaptığınız font ayarlarının sayfanın tamamı için geçerli olmasını isterseniz <Base Font Face ="Font ismi" Size=3> tagını kullanabilirsiniz.
**Not: Browser'lar anlamadıkları bir tag ile karşılaşınca onu gözardı ederler. Yani bir tagın bir iki özelliğini silerseniz sayfanız bozulmuş olmaz. Siz de değiştirmek istemediğiniz özellikleri silebilirsiniz. Ayrıca bir tag'daki özelliklerin sırasını değiştirmak bişey kaybettirmez. istediğiniz sırada yazabilirsiniz.
şimdi bildiklerimizle örnek bir sayfa yapalım:
Hata! Köprü başvurusu geçerli değil..
Yalnız burada sayfamızda türkçe karakter sorunu var. Bunu gidermek için <HEAD> bölümüne <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> tagını ekliyoruz. Sorun çözülüyor.
Hata! Köprü başvurusu geçerli değil.l..
Konu 3: Tablolar.
Tablolar sayfanızı düzenlemede en çok yardımcı olan parçalardan biridir. Tablo kullanarak sayfanızı rahatça şekillendirebilirsiniz. örneğin aşağıdaki şekle bir bakın, daha sonra da html koduna bir bakalım:
Kısa Haber
Tablo olmasa bu şekilde bir düzenleme mümkün olmayacaktı. şimdi kaynak koduna bir bakalım:
ilk olarak tablomuzun tamamının sayfanın ortasında olacağını belirledik (<CENTER>). Daha sonra Table tagı ile bir tablo başlattık. Border ile çerçeve kalınlığını belirttik. CELLSPACING ile hücreler arası boşluğu belirttik. CELLPADDING ise hücrelerin içi ile yazılar arası boşluğu belirliyor. Cols'a birazdan geleceğim. WIDTH ile tablonun sayfanın yüzde kaçı kadau geniş olacağını belirtir. HEIGHT de eğer kullanırsanız tablonun minimum yüksekliğini belirler.
Tablomuzun genel özelliklerini belirttik. Tablo başlığını <CAPTION> tagı ile yapıyruz. isterseniz başlık kullanmama hakkınız var. şimdi hücreleri yerleştirmeye geldi. <TR> tagı ile bir satır açıyoruz. VALIGN ile satırdaki hücrelerin içeriğinin dikey olarak nereye hizalanacağını belirtiyoruz. Buraya TOP, CENTER, BOTTOM gelebilir. Hemen ardından <TD> ile de bu satırdaki ilk hücreyi açıyoruz. Hücre içeriğini yazdıktan sonra (Font,Center vs.. 'ye alıştınız sanırım) </TD> ile hücreyi kapatıyoruz. Ardından tekrar <TD> ile bir hücre daha açıyoruz ve içeriği yazdıktan sonra </TD> ile kapatıyoruz. Satırımızın bitşini de </TR> ile sağlıyoruz. En son olarak ise </TABLE> ile tablomuzu bitiriyoruz ve tablomuzu ortalayan <CENTER> tagını da </CENTER> ile bitiriyoruz. Hepsi bu...
Gelelim <Table> tagının içindeki cols özelliğine. Bu özelliği belirtirsek tablodaki sütunların genişliği eşit olatak dağılır. Belirmezsek olabilen en küçük genişlik kabul edilir. Ayrıca eğer birden fazla satır varsa rows özelliği de aynı cols gibi kullanılabilir ancak satırların eşit dağılmasını sağlar.
Bir de <TD> taglarının içine girilen width özelliği var. Bu ise hücrenin bulunduğu sütunun genişliğini özelleştirmek için kullanılır. Ha unutmadan <Table> tagının içindeki width özelliğini % olarak belirmezseniz tablonun genişliğini pixel cinsinden alır. Eğer tablonuzun her bilgisayarda aynı ebatta görünmesini isterseniz kullanın. Tabi takdir edeceğiniz gibi internete giren herkesin ekran çözünürlüğü aynı değil. Siz 1024x768'de sayfa hazırlarsınız ama ziyaretçiniz 800x600'de izliyor olabilir. Herşeyi düşünmelisiniz.
Sayfayı Frame'lere bölmek: Web sayfanızı frame'lere bölebilirsiniz. Mesela bu sitede olduğu gibi. frame'in birini menü, diğerini de ana sayfa olarak ayarlayabilirsiniz.
ilk olarak bir giriş sayfası yapıyoruz ama bu sayfa hiç görünüyor. çünkü bu sayfa frame'lerin şeklini şemalini belirtiyor. Yani hangisi ne kadar büyük, yatay mı, dikey mi, hangi dosyalar buralarda görünecek vs vs...
Ben giriş sayfası olarak index.htm'yi seçtim. Siz de kendinize göre bişey seçin. index.htm'nin içeriği şu olmalı:
Hata! Köprü başvurusu geçerli değil..
ilk göze çarpan <Frameset> tagı. Bu tag frame'lerin dikey veya yatay olacağını ve genişlikleri ile ilgili bilgileri içeriyor. COLS özelliğinde 20%'nin anlamı ilk frame'in sayfanın %20'sini alacağını belirtiyor. Sonra gelen * işareti ise ikinci frame'in sayfanın geri kalan kısmını alacağını belirtiyor. Tabi sayfayı ikiden fazla frame'e bölmek isterseniz ROWS özelliğine bir iki parametre daha ekleyebilirsiniz mesela şu örnek sayfayı üçe böler: ROWS="10%,50%,40%". Sayfanızı dikey değil de yatay bölmek isterseniz COLS yerine ROWS yazmalısınız. Bir de ROWS ya da COLS özelliğinin içindeki sayılar illa % ile bitecek diye bişey yok. Her bilgisayarda aynı görünsün istiyorsanız % koymadan yazabilirsiniz. Tabi sayfanıza giren herkesin sizin ekran çözünürlüğünü kullanmadığını unutmayın. Siz sayfanın solundan ayırırsınız ama düşük çözünürlükte izleyen birisi için o sayfa ortadan ayrılmış olur. Ayrıca eğer bir "menu" frame'indeki linklerin "main"i değiştirmesini istiyorsanız fmenu.htm olarak belirtilen (menü için kullandığınız dosya) dosyanın <HEAD> ve </HEAD> tagları arasına <Base Target="main"> yazmalısınız. Yoksa linklere tıkladığınızda menü'nüzün değiştiğini görürsünüz. Bu da istenmeyen bişey zaten.
Image Map:
Image Map denilen şey bir resim nesnesinin belirli bölgelerinden farklı yerlere linkler oluşturma olayıdır.Yani tek resim dosyasından bir çok link yapabilirsiniz. Aşağıdaki örneğe bir gözatın.
Resmin üzerindeki adreslere tıkladığınızda o sayfaların açıldığını görürsünüz. Veya fareyi üzerlerine getirince durum çubuğunda gidilecek adres yazar. Bunu nasıl yaptık?
ilk olarak bir MAP tagı açtık. ve ismini map1 olarak belirledik. Daha sonra Bu mapin içine tıklanacak alanların kordinatlarını girdik.
<AREA SHAPE=Rect COORDS="x1,y1,x2,y2" HREF="Adres"> tagında SHAPE özelliği tanımlanan RECT özelliği ise bölgenin bir dikdörtgen olduğunu ifade ediyor. COORS özelliğinin içindeki x1 ve
Bir HTML sayfasının yapısı
Sık kullanılan tag'lar
Tablolar.
Sayfayı Frame'lere (çerçevelere) bölmek
Image Map (Dikdörtgen, daire, çokgen)
Sayfaya Nesne gömmek. (QT, Avi filan)
HTML nedir?: HTML, Hyper Text Markup Lanuage kelimelerinin başharflerinden oluşmuştur. Aslında bir programlama dili değildir. Sayfa şekillendirme dili denebilir. HTML dışında da kullanılabilecek şeyler vardır. Ama çoğu server tabanlı olduğu için bu kadar basit değil. Web'de yeni olanların en önce öğrenmeleri gereken dil olduğunu düşünüyorum.
"TAG"Nedir?: Tag dedikleri HTML sayfasının içine sayfaya şekil vermek niyetiyle kullanılan ama bazen şekilden fazlasını verebilen komutlardır. Tag'lar < ve > karakterleri arasına yazılır. Bir tag'ın bitişini / sembolü belirler. "şimdi neler saçmaladı" demeyin birazdan anlayacaksınız. örneğin bir yazıyı bold (kalın) yapmak istiyorsunuz. O zaman " <B>Bir yazı</B> " yazmalısınız (tırnak işaretleri benden). Burada "Bir Yazı" bold olacaktır. Fazla geç olmadan uygulamaya başlayalım.
Bir HTML sayfasının yapısı: HTML sayfası aslında basit bir metin belgesidir. Yani NotePad veya Kolay Yazı gibi bir Text editörüyle en âla şekilde hazırlanabilir. Aşağıdaki kodu bir inceleyin:
HTML:
<HTML>
<HEAD>
<TITLE>Merhaba!!</TITLE>
<BODY>
<B>Herşey burada olup bitiyor!!</B>
</BODY>
</HTML>Burada basit bir HTML yapısı görüyoruz. <HTML> tagı HTML kodunun başladığını belirtiyor. Yani Netscape'i veya Internet Explorer'ı buradan sonrası ilgilendiriyor. <HEAD> Sayfanın baş kısmı. Bu kısımda sayfanın özellikleri belirtiliyor (ileride ayrıntılı olarak göreceksiniz). Hemen ardından <TITLE> tagını görüyorsunuz. Bu ise pencere başlığında ne yazacağını belirtir. Tabi ki </TITLE> ile de biter. <BODY> ile başlayan kısım bizi en çok ilgilendirendir. çünkü sayfanın ekranda görünen kısmı burasıdır. Hemen peşinden <B> biraz yazı ve </B> tagları var. Bu taglar yukarıdaki örnekte olduğu gibi aralarındaki yazıyı BOLD yapar.
Sonunda </BODY> ile sayfamızın gövde kısmını bitiriyoruz ve </HTML> ile de HTML kodumuzu bitiriyoruz. Buradan sonra yazanlar browser'ı ilgilendirmiyor.
Sık kullanılan tag'lar:
Buradaki tabloda HTML'de size gerekecek taglar ve açıklamaları var bunları bir yere kopyalayın. Sonra lazım olur.
Sık Kullanılan HTML Tagları
- HTML'de harşay sizin yazdığınız gibi görünmez. Mesela siz Paragraf tuşuna bastığınızda Browser bunu paragraf olarak algılamaz çünkü her bilgisayarda paragraf tuşu aynı ASCII koduyla ifade edilmez. Mac'te paragraf tuşu Windows'ta " , " tuşuna karşılık geliyor olabilir. Hatta bu uyuşmazlık başınıza Türkçe Karakter sorununu da getirir. Ama korkmayın Karakterlere çözüm var.
Bu tagların kullanımı da önce anlattığım gibi.
Bu tag sayfaya resim gömmek için kullanılır.
HTML:
<IMG Src="resim.jpg" width=320 height=240 HSPACE=5 VSPACE=5 BORDER=1 Align=Center>RIGHT : Resmin sağa hizalanması.
LEFT: Resmin sola hizalanması.
TEXTTOP : Resim ile aynı satırdaki yazının Resmin üst tarafına hizalanması.
ABSCENTER : Resim ile aynı satırda olan yazının resmin ortasına hizalanması.
CENTER : Resim ile aynı satırda olan yazının alt çizgisinin resmin ortasına hizalanması.
ABSBOTTOM : Resim ile aynı satırda olan yazının tabanının resmin alt çizgisine hizalanması.
Link olayları:
Sayfaya link koymak için <A Href="adres" target="_new">Yazı</A> tagını kullanıyoruz. Href özelliği linkin gideceği adresi belirler. Target özelliği ise linkin nereyi etkileyeceğini belirler. "_new", yeni pencerede açar. Gerekmiyorsa belirlememe hakkınız var. ileride sayfayı Frame'lere ayırmayı göreceğiz. O zaman buraya Frame'in adını yazacağız. Font özellikleri: <Font face="Font ismi" size=3>Yazı</Font> tagı ile kullanacağımız yazı tipini ayarlıyoruz. Eğer size özelliğini punto cinsinden yazmak isterseniz size özelliğini point-size ile değiştirmelisiniz. <Font face="Font ismi" point-size=11>Yazı</Font> gibi. Eğer yazının sadece büyüklüğünü değiştirmek isterseniz face özelliğini silebilirsiniz veya sadece yazı karakterini değiştirmek isterseniz size özelliğinden kurtulun.
Yaptığınız font ayarlarının sayfanın tamamı için geçerli olmasını isterseniz <Base Font Face ="Font ismi" Size=3> tagını kullanabilirsiniz.**Not: Browser'lar anlamadıkları bir tag ile karşılaşınca onu gözardı ederler. Yani bir tagın bir iki özelliğini silerseniz sayfanız bozulmuş olmaz. Siz de değiştirmek istemediğiniz özellikleri silebilirsiniz. Ayrıca bir tag'daki özelliklerin sırasını değiştirmak bişey kaybettirmez. istediğiniz sırada yazabilirsiniz.
şimdi bildiklerimizle örnek bir sayfa yapalım:
HTML:
<HTML>
<HEAD>
<TITLE>Merhaba</TITLE>
</HEAD>
<BODY>
<Font point-size="13" Face ="Verdana">Hoşgeldiniz</FONT>
<BR><BR>
Burada bazı linkler var:<BR>
<A Href="http://www.xxxxxx.xxxx">Turk Flashcılar ve Webmasterlar Birligi</A><BR>
<A Href="http://www.xxxxxx.xxxx">Yahoo!</A><BR>
<A Href="http://www.xxxxxx.xxxx">Turkiyenin Enkapsamlı Arama Motoru</A><BR>
<BR>
<Font point-size="8">Copyright 2000 turk2flash.org</FONT>
</BODY>
</HTML>Hata! Köprü başvurusu geçerli değil..
Yalnız burada sayfamızda türkçe karakter sorunu var. Bunu gidermek için <HEAD> bölümüne <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> tagını ekliyoruz. Sorun çözülüyor.
HTML:
<HTML>
<HEAD>
<TITLE>Merhaba</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
</HEAD>
<BODY>
<Font point-size="13" Face ="Verdana">Hoşgeldiniz</FONT>
<BR><BR>
Burada bazı linkler var:<BR>
<A Href="http://www.xxxxx.xxx">Turk Flashcılar ve Webmasterlar Birligi</A><BR>
<A Href="http://www.xxxxx.xxx">Yahoo!</A><BR>
<A Href="http://www.xxxxx.xxx">Turkiyenin Enkapsamlı Arama Motoru</A><BR>
<BR>
<Font point-size="8">Copyright 2000 www.xxxxxx.xxxx</FONT>
</BODY>
</HTML>Hata! Köprü başvurusu geçerli değil.l..
Konu 3: Tablolar.
Tablolar sayfanızı düzenlemede en çok yardımcı olan parçalardan biridir. Tablo kullanarak sayfanızı rahatça şekillendirebilirsiniz. örneğin aşağıdaki şekle bir bakın, daha sonra da html koduna bir bakalım:
Kısa Haber
Tablo olmasa bu şekilde bir düzenleme mümkün olmayacaktı. şimdi kaynak koduna bir bakalım:
HTML:
<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=5 COLS=2 WIDTH="40%" >
<CAPTION><B><FONT SIZE=-1>Kısa Haber</FONT></B></CAPTION>
<TR ALIGN=LEFT VALIGN=TOP>
<TD VALIGN=TOP>
<CENTER><B><FONT SIZE=-1>çevre kirliği</FONT></B></CENTER>
<FONT SIZE=-2>
Birinci Bölüm
</FONT>
</TD> <TD VALIGN=TOP>
<CENTER><B><FONT SIZE=-1>Başlık2</FONT></B></CENTER>
<FONT SIZE=-1>
ikinci Bölüm
</FONT>
</TD>
</TR>
</TABLE>
</CENTER>ilk olarak tablomuzun tamamının sayfanın ortasında olacağını belirledik (<CENTER>). Daha sonra Table tagı ile bir tablo başlattık. Border ile çerçeve kalınlığını belirttik. CELLSPACING ile hücreler arası boşluğu belirttik. CELLPADDING ise hücrelerin içi ile yazılar arası boşluğu belirliyor. Cols'a birazdan geleceğim. WIDTH ile tablonun sayfanın yüzde kaçı kadau geniş olacağını belirtir. HEIGHT de eğer kullanırsanız tablonun minimum yüksekliğini belirler.
Tablomuzun genel özelliklerini belirttik. Tablo başlığını <CAPTION> tagı ile yapıyruz. isterseniz başlık kullanmama hakkınız var. şimdi hücreleri yerleştirmeye geldi. <TR> tagı ile bir satır açıyoruz. VALIGN ile satırdaki hücrelerin içeriğinin dikey olarak nereye hizalanacağını belirtiyoruz. Buraya TOP, CENTER, BOTTOM gelebilir. Hemen ardından <TD> ile de bu satırdaki ilk hücreyi açıyoruz. Hücre içeriğini yazdıktan sonra (Font,Center vs.. 'ye alıştınız sanırım) </TD> ile hücreyi kapatıyoruz. Ardından tekrar <TD> ile bir hücre daha açıyoruz ve içeriği yazdıktan sonra </TD> ile kapatıyoruz. Satırımızın bitşini de </TR> ile sağlıyoruz. En son olarak ise </TABLE> ile tablomuzu bitiriyoruz ve tablomuzu ortalayan <CENTER> tagını da </CENTER> ile bitiriyoruz. Hepsi bu...
Gelelim <Table> tagının içindeki cols özelliğine. Bu özelliği belirtirsek tablodaki sütunların genişliği eşit olatak dağılır. Belirmezsek olabilen en küçük genişlik kabul edilir. Ayrıca eğer birden fazla satır varsa rows özelliği de aynı cols gibi kullanılabilir ancak satırların eşit dağılmasını sağlar.
Bir de <TD> taglarının içine girilen width özelliği var. Bu ise hücrenin bulunduğu sütunun genişliğini özelleştirmek için kullanılır. Ha unutmadan <Table> tagının içindeki width özelliğini % olarak belirmezseniz tablonun genişliğini pixel cinsinden alır. Eğer tablonuzun her bilgisayarda aynı ebatta görünmesini isterseniz kullanın. Tabi takdir edeceğiniz gibi internete giren herkesin ekran çözünürlüğü aynı değil. Siz 1024x768'de sayfa hazırlarsınız ama ziyaretçiniz 800x600'de izliyor olabilir. Herşeyi düşünmelisiniz.
Sayfayı Frame'lere bölmek: Web sayfanızı frame'lere bölebilirsiniz. Mesela bu sitede olduğu gibi. frame'in birini menü, diğerini de ana sayfa olarak ayarlayabilirsiniz.
ilk olarak bir giriş sayfası yapıyoruz ama bu sayfa hiç görünüyor. çünkü bu sayfa frame'lerin şeklini şemalini belirtiyor. Yani hangisi ne kadar büyük, yatay mı, dikey mi, hangi dosyalar buralarda görünecek vs vs...
Ben giriş sayfası olarak index.htm'yi seçtim. Siz de kendinize göre bişey seçin. index.htm'nin içeriği şu olmalı:
HTML:
<HTML>
<HEAD>
<TITLE>Sayfa başlığı</TITLE>
<FRAMESET COLS="20%,*" FRAMEBORDER=2 BORDER=0 FRAMESPACING=1>
<FRAME SRC="fmenu.htm" NAME="menu" TARGET="main" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="AUTO" FrameBorder=2>
<FRAME SRC="fmain.htm" NAME="main" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="AUTO">
</FRAMESET>
</HEAD>
<BODY>
Eğer browser desteklemiyorsa bu yazı çıkacak
</BODY>
<HTML>Hata! Köprü başvurusu geçerli değil..
ilk göze çarpan <Frameset> tagı. Bu tag frame'lerin dikey veya yatay olacağını ve genişlikleri ile ilgili bilgileri içeriyor. COLS özelliğinde 20%'nin anlamı ilk frame'in sayfanın %20'sini alacağını belirtiyor. Sonra gelen * işareti ise ikinci frame'in sayfanın geri kalan kısmını alacağını belirtiyor. Tabi sayfayı ikiden fazla frame'e bölmek isterseniz ROWS özelliğine bir iki parametre daha ekleyebilirsiniz mesela şu örnek sayfayı üçe böler: ROWS="10%,50%,40%". Sayfanızı dikey değil de yatay bölmek isterseniz COLS yerine ROWS yazmalısınız. Bir de ROWS ya da COLS özelliğinin içindeki sayılar illa % ile bitecek diye bişey yok. Her bilgisayarda aynı görünsün istiyorsanız % koymadan yazabilirsiniz. Tabi sayfanıza giren herkesin sizin ekran çözünürlüğünü kullanmadığını unutmayın. Siz sayfanın solundan ayırırsınız ama düşük çözünürlükte izleyen birisi için o sayfa ortadan ayrılmış olur. Ayrıca eğer bir "menu" frame'indeki linklerin "main"i değiştirmesini istiyorsanız fmenu.htm olarak belirtilen (menü için kullandığınız dosya) dosyanın <HEAD> ve </HEAD> tagları arasına <Base Target="main"> yazmalısınız. Yoksa linklere tıkladığınızda menü'nüzün değiştiğini görürsünüz. Bu da istenmeyen bişey zaten.
Image Map:
Image Map denilen şey bir resim nesnesinin belirli bölgelerinden farklı yerlere linkler oluşturma olayıdır.Yani tek resim dosyasından bir çok link yapabilirsiniz. Aşağıdaki örneğe bir gözatın.
HTML:
<MAP Name="map1">
<AREA SHAPE=Rect Coords="13,5,144,24" HREF="http://www.xxxxxx.xxxx">
<AREA SHAPE=Rect Coords="49,29,102,46" HREF="http://www.xxxxxx.xxxx">
<AREA SHAPE=Rect Coords="41,52,106,70" HREF="http://www.xxxxxx.xxxx">
<AREA SHAPE=Rect Coords="40,77,109,98" HREF="http://www.xxxxxx.xxxx">
</MAP>
<IMG Src="imap.jpg" UseMap="#map1">Resmin üzerindeki adreslere tıkladığınızda o sayfaların açıldığını görürsünüz. Veya fareyi üzerlerine getirince durum çubuğunda gidilecek adres yazar. Bunu nasıl yaptık?
ilk olarak bir MAP tagı açtık. ve ismini map1 olarak belirledik. Daha sonra Bu mapin içine tıklanacak alanların kordinatlarını girdik.
<AREA SHAPE=Rect COORDS="x1,y1,x2,y2" HREF="Adres"> tagında SHAPE özelliği tanımlanan RECT özelliği ise bölgenin bir dikdörtgen olduğunu ifade ediyor. COORS özelliğinin içindeki x1 ve
