Döküman 3 : HTML Giriş 3/3
-
selamlar html 3 ve son dökümanda birlikteyiz döküman biraz gecikti kusura bakmayın iş güç bitmiyorda :D birazda tembellik yaptım canım istemedi herneyse 3.dökümanımıza başlıyoruz fakat bilmeniz gereken 3.döküman olması sebebiyle detaya girmeyeceğim bu sefer azda siz kastıracaksınız detaya fazla girmeyeceğim ve açıklamayı fazla yapmayacağım zaten önceki dökümanları okuyup uyguladıysanız zorluk çekmeyeceksiniz eğer okumadıysanız bu döküman da zorlanırsanız önceki dökümanları tekrar okuyun çünkü bu kaytardığınız anlamına gelir.
çok işe yarar birşey iframe ve frame
önce iframe ve frame nedir? nerelerde kullanılır ? arasındaki fark nedir ?
iframe başka bir sayfayı kendi sitemizdeymiş gibi göstermektir.Hani şu bazı amele sitelerinde olurya son haberler/hava durumu vs. gibi işte onların %99 u iframe ile yapılır iframe kare veya dikdörtgen olabilir css ile ayar geçebilirsiniz çaktırmadan tabiki ama dikdörtgen veya kare olmak zorundadır bir örnek verecek olursak
iframe kodlarımız <iframe> .... ile başlar </iframe> ile biter.
<IFRAME name="frame_ismi" src="frameadresi.html" width="600" height="115" scrolling="no" frameborder="0"></IFRAME>
işte kısaca iframemiz budur ister kendi sayfamızın içinde herhangi kendimize ait bir sayfayı veya başka bir web sitesinin sayfasını alabiliriz.
kodlarımızı açıklayacak olursak ;
name="iframe_ismi" : burası iframenin en önemli kısmıdır ve genelde çok sık karıştırılır.Burada iframenin adı neyse onu vereceğiz ve bunu link ile açacağız peki nasıl ?
link konusunu anlatmıştım o yüzden iframede farklı linkler açmak için
<a target="iframe_ismi" href="ana_sayfa.html">Ana Sayfa</a>şeklinde kullanmamız lazım burda farkettiyseniz target kısmına iframenin name değerini girdim diyelimki sitenizde 1 değil 5 tane iframe var 5 iframenin name değeride değişik olacak şekilde linklere iframenin name değerini vererek hangi iframede istiyorsanız orada direk açtırabilirsiniz.
örneğin tabribat döküman listesini iframede göstereceğiz o zaman şöyle yapmamız gerekiyor
<IFRAME name="frame_ismi" src="http://www.tahribat.com/doccatlist.asp" width="600" height="115" scrolling="no" frameborder="0"></IFRAME>link ve name kısmı bundan ibaret
src="frameadresi.html" : Src mantığı img deki gibi aynıdır frame ilk nereyi açacaksa o sayfayı buraya girersiniz Yani frame ilk olarak frameadresi.html yi açar fakat yukarıdaki link gibi linklendirirseniz ve ana sayfa linkine tıklaranız framede frameadresi.html ilk çıkacak linke tıkladığımız için ana_sayfa.html sayfasını açacaktır.Genelde web sayfalarında kullanılır benimde büün sitelerimde kullandığım bir tekniktir ortaya bir iframe atarım sağda veya solda linkler linke göre iframeye açılacak sayfa adresini yollarım o kadar :) Sayfayı komple yükletmek yerine sadece iframe kısmında çıkmasını istediğim yer çıkar böylece...
width="600" height="115" : bence siz artık oldunuz :D daha ben bunları yazarken çakmışsınızdır köfteyi :) fazla açıklamayacağım önceki dökümanlara iyi çalışanlar bunun iframenin en ve boyunu belirtiğimizi bileceklertir bilemediniz mi ? sağlık olsun önceki dökümanları adam gibi okuyun öyle gelin :)
scrolling="no" : Örneğin yukarıdaki iframede uzunluk değerimiz 600 dü ve yükseklik değerimiz 115 peki iframeadresi.html sayfası bu değerlerden yüksel olursa ne olacak ? örneğin sayfa 768 e 1024 çözünürlükte ise ne olacak bu durumda ? işte o zaman kaydırma çubuklarımız çıkacak ortaya bakın sağdaki varya hani o işte... Biliyorum biliyorum o kadarda mal değilsiniz anladınız meseleyi :) yes yaparsak kaydırma çubukları çıkar no yaparsak çıkmaz... bu şartın yerine gelebilmesi için sayfanın iframeden büyük olması gerekli değilse sorun yok.
frameborder="0" : Artık borderi gördüğünüzde bişeyi çizgisi kenarı olduğunu anladınız yapıştırdınız gitti buda iframenin kesin kenarlığıdır diye :) hani şu <hr> örneğinde yapmıştıkya ? hr nin border değerini yükseltiyorduk bilmem ne yapıyorduk buradada iframede çerçeve görünecekmi görünmeyecekmi kalınmı incemi ayarlarını yapıyoruz. 0 yaparsak bu değeriki 0 yaptık iframe etrafında çerçeve görünmez 1 yaparsak 1 pixeliik bir çizgi belirir 10 yaparsak 10 pixel ile iframenin etrafının kaplandığını görürsünüz...
peki ya frame nedir ?
iframede ne yapıyorduk sayfanın içine kare veya dikdörtgen başka bir sayfayı alıyorduk frame ise sayfayı dikey veya yatay böler yani sayfayı tam ortadan dikey veya yatay olarak bölebiliriz ve iframedeki gibi sayfaları gösterebiliriz. Örneğin benim yazdığım portalda admin panelini iframeler ile yaptım ve 3 e böldüm sağ / sol ve soluda 2 ye böldüm böyle bir sistem için iframe can alıcıdır gerçekten.
örneğin sayfayı 2 ye böldünüz sağda menüler var menülere tıklayınca solda hangi menüye tıklarsanız sağda ona ait içerik çıksın diyorsunuz aha o zaman frame lazım size.
<frameset cols="50%,50%">
<framename="sol" src="sol.html">
<framename="sag" src="sag.html">
</frameset>
yukarıdaki kodumuza bakarsak frame kodu olduğunu hemen anlarız neden <frameset>.....</frameset> demiş...şimdi 3 tane sayfa oluşturun sayfaların adı
index.html sol.html ve sag.html olsun sağ html nin arkaplanı kırmızı solunki sarı olsun. yukarıdaki frameset kodunuda alın ve index.html içine yapıştırın böylelikle framenin nasıl bişey olduğunu görebileceksiniz...
kodları açıklayacak olursak...cols="50%" : bu sayfayı hangi oranda 2 ye böleceğimizi belirtir...% kullanırsak sayfanın yüzdesine göre böler yüzde koymazsak pixel olarak böler...Yukarıdaki koddan %50 bölmüşüz yani 2 ye şöylede olabilirdi 30%,70% şeklinde...
framename="sol" : bununda iframedeki gibi name işi gördüğünü link verirken target e ilgili name yazıp frameyi açtığımızı yazmaya gerek varmı diyeceğim zaten yazdık :D
extradan ;
frameborder="yes" : parametremizi kullanırsak eğer çerçeveler arasındaki çizgi görünür iframedeki gibi...
border="2" : çerçevelerin kalınlığını belirtir.
scrolling="no" : bunuda biliyorsunuz artık iframe ile mantığı aynı bilmiyorsanız iframeyi okuyun söylemeyecem yazmayacam bu sefer buraya ulan.
olay bu kadar artık iframe ile framenin farkınıda biliyorsunuzdur açıklamaya gerek duyarsak iframe kare veya çerçeve şeklinde sayfanın belirli bir yerinde küçük veya büyük olabiliyor.frame ise sayfayı bölmeye yarıyor...
burda işin bir kaç püf noktasına değinirsek başkaları sizin sayfanızı kendi sayfaları gibi gösterebilirler iframe ve frame aracılığı ile peki bunu nasıl önleyeceksiniz ?
<Script language="JavaScript">
<!-- Force all the previous frames off
if (self.parent.frames.length != 0) self.parent.location=document.location.href;
// -->
</script>
ufak bir javascript kodu ile başkaları sizin sayfanızı kendi sayfalarında frame veya iframe olarak gösteremezler....
Diğer bir ufak ayrıntı ise frame ve iframeler arama motorlarında biraz problem çıkarabilirler bunu engellemek için sayfalarınızı indexletmenizi öneriyorum.
bazı durumlarda da frame veya iframe yerine ajax kullanabilirsiniz onuda ileride anlatıcaz inş. :)
yazı kaysın resim kaysın içine ne koyarsam kaymak gibi kaysın gitsin...
en sevdiğim kodlardan biris olan marquee den bahsediyoruz işe javascripti karıştırmadan kayan yazılar resimler vs. herşeyi yapabileceğiz...
kodumuz basit olarak
<marquee> Yeah TBT müzik Editörü </marquee> burda yazımız kayar resim kaydırmak içinde
<marquee> <img src="http://www.tahribat.com/img/forum/avatars/Goz2.jpg"> </marquee> burdada resim kayar gider
yazıyı ne kadar çoğaltırsanız çoğaltın o kayacaktır devamlı yani anlamanız gereken <marquee>.......</marquee> arasına ne koyarsanız kayar gider...
parametrelere gelecek olursak
<marquee behavior="alternate">Yeah TBT Müzik Editör şeysi </marquee> : yazı sağa sola çarpsın derseniz behavior="alternate" kodunu kullanmanız gerekiyor
yazıyı alttan üste çıkarmak için alternate yerine up üsten alta getirmek içinse alternate yerine down kullanmamız gerekiyor.
width="100" heigth="800" : Hiç öyle bakmayın ben bu kodun işlevini daha önce 81294728 kere anlattım bir daha anlatmam koda bakın ne olduğunu siz çözün :D kodun marquee etiketi içinde ne işe yaradığını bilemiyorsanız ALT+F4 tuşlarına basabilirsiniz... :)
onMouseOut=this.start() onMouseOver=this.stop() : bu parametrelerimizide marquee ye verirsek eğer mouse kayan yazı veya resmin üzerine gelince durmasını mouse ilgili marquee alanından gidince tekrar kaymasını sağlayacaktır.
scrollamount="2" : bu kodumuz ise kayma hızımızı belirler.
elimizde şöyle bir sonuç çıktı.
<marquee onMouseOut=this.start() onMouseOver=this.stop() width="100" heigth="800" behavior="alternate" scrollamount="2">
Kayalardan kayarım,
Yoktur benim ayarım,
Gerekirse kayalarada kayarım,
Kodumun kodunu hala anlamadıysan,
Al sana bir kaya,
Nerene dayarsan daya...Şahin YILMAZ
<marquee>
Arkadaşlar tabloları anlatmayacağım zira ben bile adam akıllı öğrenme gereği duymadım neden derseniz elimin altında front page varken tabloyu kodla kastırmak biraz saçma olur ama illa öğrenelim yazalım kodlayalım derseniz. http://www.godoro.com/divisions/ehil/mahzen/Web/TheHTMLBook/txt/html/document_HTMLTable.html brdan öğrenebilirsiniz tablolar hakkında bilmeniz gereken veritabanı tabloları ve html tabloların birbiri ile alakası olmamadığıdır...
bgsound embed ve form elemanlarınıda size javascript bölümünde anlatmaya karar verdim.
<font color="Blue" size="2"><b>Döküman tamamen Buzul tarafından TAHRIBAT.COM için yazılmıştır, tüm hakları saklıdır Çalmayın Zira Çalarsanız çokta tınnn :) </b></font>
-
hep bu anı bekledim biliyor musun :P =))
edit: çok kral olmuş diğerleri gibi, saygılar =))
-
meşhur edecem olm seni :D
senin daha response.write lerini document.write lerinide göreceğiz daha bu bişey diil :D
-
eline sağlık hocam
-
beni utandırıyorsun :$ =)))))
-
Eline sağlık hoca
-
Buzul manyaksın. Öss bitti ilk dokumandan baslayarak html bilgimi tazeleyeceğim. asp ve php dokumanlarını sabırla bekliyorum...
-
begendik asp ve php ye daha çok var php ve ajaxı da sizinle birlikte öğrenicem bende :D
-
afferim la kapmışın benden bişeler:))
güzel olmuş bi ara gelde ajax takılak;)
-
olum sen bunu destek@tahribat.com a atmıyosn?
-
duygusal_serseri bunu yazdı:
-----------------------------afferim la kapmışın benden bişeler:))
güzel olmuş bi ara gelde ajax takılak;)
-----------------------------
kendi xp mizi yapacağımız gibi olmasında yine :Drapd mail gönderecem bugün :)