GloryLife-Paylaşımın Dostluğu

GloryLife Forum
AnasayfaKapıGaleriKullanıcı GruplarıKayıt OlGiriş yap
Yetkinforum.com | ©phpBB | Bedava yardımlaşma forumu | Haberleşme | Suistimalı göstermek | Yetkinblog


Sitemizden Yararlanmak ?çin

Lütfen Üye Olun..


Hosgeldiniz
Hala Üye degilmisiniz?
Üye olmak çok kolay
Üye olmak için tiklayin

HTML Dersleri

Önceki başlık Sonraki başlık Aşağa gitmek
Yazar Mesaj
DrâGoNMâSTéR
Forum Yöneticisi
Forum Yöneticisi
avatar
Cinsiyet:
Yaş :

Kayıt tarihi : 18/01/09

Mesaj Sayısı : 250

Nerden : 7kule




Kullanıcı profilini gör http://glorylife.forumm.biz



MesajKonu: HTML Dersleri Salı Ekim 06, 2009 10:56 am

html dersleri

Kategorisi Ağustos 27th, 2009


FLOATING FRAME KULLANIMI

HTML sayfalarında sık kullanılmayan bir unsur olsa da HTML 3.2 standartlarına giren Floating Frame özelliğini anlatmakta fayda görüyoruz. Sayfa içerisinde başka bir HTML sayfasını göstermek istiyor ve bu sayfanın dilediğiniz sınırlar dışına taşmasına engel olmak istiyorsunuz. O zaman Floating Frame’leri kullanabilirsiniz. Aşağıda gördüğünüz örnek satırı HTML sayfanıza girdiğinizde 200×200 piksel ebatlarında bir pencere açılacak ve DENEME.HTM sayfası bu pencerenin içerisine yüklenecek.
<IFRAME SRC=”deneme.htm” width=200 height=200></IFRAME>
SRC= ifadesinin karşısına HTML dosyasının adını vererek kullanabileceğiniz gibi <IFRAME SRC=”http://www.sitenekodlar.com” width=200 height=200></IFRAME> benzeri bir adres de kullanarak bir ‘ Web sitesinin’ pencere sınırlarınız içerisinde açılmasını sağlayabilirsiniz


İlk sayfa bir kaç saniye görünsün, kaybolsun!..

Buna “Splash page” (suya dalma sayfası) da deniyor; bir kaç saniye görünüyor, sitenizin niteliği hakkında fikir veriyor, ilgi çekiyor, sonra yerini ana sayfaya bırakıyor.:
<META HTTP-EQUIV=”Refresh” CONTENT=”5; URL=ANASAYFA.HTML”>
<BODY><IMG width=”300″ height=”200″ alt=”Giriş grafiği” SCR=”giris.gif”>
<BODY>
Bu tekniği iki sayfasının arasında reklam amacıyla uygulayanlar bile var!
———————————————————————–
Sayfa Kendisini Kapatsın

Öyle bir web sitesi oluşturdunuz ki bir sürü yardımcı pencere açıyor�. Öyle ki kullanıcılar artık açılan bu yeni pencerelerin içinde boğulduklarından şikayet ediyorlar. Endişelenmeyin tam sizin durumunuza göre bir püf noktası vereceğiz şimdi.
Aşağıdaki 4 satırlık HTML kodunu sayfanıza eklediğinizde kodu eklediğiniz alanda bir düğme oluşacaktır. Artık kullanıcılarınız bu düğmeye basarak pencereyi rahatlıkla kapatabilir. Şimdi siz “İyi de güzelim kullanıcılarım pencerenin sağ tarafındaki çarpı tuşuna basmayı zaten akıl edebilirlerdi.” diyeceksiniz. Bence bu tuş aynı zamanda sayfanın izlendikten sonra işinin bittiğinin de bir göstergesi.

<FORM>
<INPUT TYPE=”BUTTON” VALUE=”Kapat” NAME=”lowerButton” onClick=”self.close()”>
</FORM>


Sayfanızı Sık Kullanılanlar’a eklettirin:

IE 4.0 ve üstünü kullanan ziyaretçilere, isterlerse, bir kelimeyi tıklattırarak, sayfanızı Windows Sık Kullanılanlar klasörüne eklettirebilirsiniz. Buradaki kod, kendi Browser belirleme fonksiyonunu da içeriyor; dolayısıyla başka tür ve sürüm Browser’ı olan ziyaretçiler açısında arzu etmedikleri bir durum olmayacaktır:
<SCRIPT>
<!– if ((navigator.appVersion.indexOf(”MSIE”) > 0) && (parseInt(navigator.appVersion) >= 4)) { document.write(”<U><SPAN STYLE=’color:blue;cursor:hand;’ onclick=’window.external.AddFavorite(location.href , document.title);’> Add this page to your favorites</SPAN></U>”); }
//–>
</SCRIPT>
———————————————————————–


Durum çubuğunda yanıp sönen yazı

Kullanıcı herhangi bir URL üzerine gittiğinde devreden çıkan yazı hiç bir kısayol üzerine gidilmediğinde yine yanıp sönmeye başlıyor.
<SCRIPT language=”JavaScript”><!— var yazi = “Yanip sönen yazilarla dikkat cekebilirsiniz…”; var hiz = 150; var control = 1; function flash() {if (control == 1) {window.status=yazi; control=0;} else {window.status=”"; control=1;} setTimeout(”flash();”,hiz);} // –></SCRIPT> <BODY OnLoad=”flash();”>


Geri Düğmesi

Browser’ın Geri düğmesi özellikle Çerçeveli sayfalarda nereye geri döneceğini bilmeyebilir. Bu bakımdan sayfalarınızda arzu ettiniz yere kendi Geri düğmenizi koyabilirsiniz:
<FORM><INPUT TYPE=”button” VALUE=”Geri dönmek için burayı tıklayınız!” onClick=”history.go(-1)”></FORM>
Aynı kodu grafik yerine bir veya daha fazla kelimeye de kazandırabilirsiniz:
<a href=”javascript:history.go(-1)”>Geri dönmek için burayı tıklayın</a>
Aynı kodu, HTML-vari düğmelere de uygulayabilirsiniz:
<FORM><INPUT TYPE = “BUTTON” VALUE = “Back” onClick = “window.history.go(-1);”>
<INPUT TYPE = “BUTTON” VALUE = “Forward” onClick = “window.history.go(1);”></FORM>
———————————————————————–


Tablolar

Tablolar, HTML sayfasında listeler ve şablonlar hazırlamak dışında, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerleştirmek ve bunun gibi bir çok alanda kullanılırlar. HTML 3.2 ile birlikte pek çok yeni özelliğe kavuşan ve daha görsel hale getirilen tablolar konusunu iyi öğrenen bir webmaster, hayalgücü ile tasarladığı “TÜM” sayfaları tablolar yardımı ile oluşturabilir. <TR>,<TD>,<TH> ve bunları kapatma taglarıyla birlikte kullanılan <TABLE…> tag’ının genel kullanımı şöyledir:
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND=”X”>
BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler. WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
<TABLE> tag’ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive…) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz. Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag’ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag’ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag’larının koymayı unutmayın!
Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3> <!—Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.—>
<TR><TH COLSPAN=2> <!—iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) —>
Tablo Örneği:
</TR></TD><TR><TD>
deneme1
</TD><TD> <!– yeni bir kolona başlıyoruz… –>
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!– yeni bir kolona başlıyoruz… –>
deneme4
</TD></TR></TABLE> <!– tüm tag’ları kapatıp tabloyu sonlandırıyoruz. –>
Eğer renkli tablolar elde etmek isteseydik
<TABLE …. ifadesinin yanına BGCOLOR=”#FFFF80″,
<TD.. ifadesinin yanına ise BGCOLOR=”#000080″ eklerini girmeniz gerekecekti
———————————————————————–


Arama Motorlarına Yardımcı olun..

GECENİZİ gündüzünüze kattınız ve bir site hazırladınız. Şimdi insanların sitenizin varlığından haberdar olmasını istiyorsunuz. Ne yapacaksınız? Tabii ki sitenizi bilinen arama motorlarına kayıt edeceksiniz. İşte bu noktada bir püf noktasına ihtiyacınız var. Arama motorlarının kullandığı ‘ ajan’ programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>…</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır.
<META name=”description” content=”Sitenizin amacı, kısa açıklaması, sloganı”>
<META name=”keywords” content=”sitenizdeki bölümler, anahtar kelimeler” >
<META name=”copyright” content=”Telif sınırlamaları ve tanımları” >


Türkçenizi kaybetmemek için

Bilgisiyarla uğraşalı beri, kendi dilimiz sık sık kazaya uğruyor, ama sayfalarımızın dilini korumak elimizde. Her sayfanın başına şu META etiketi koyabilirsiniz:
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
<meta http-equiv=”Content-Language” content=”tr”>
Resimleri Bloklayın!

Sayfanızdaki grafiklerin hepsinin sol tarafı aynı hizaya gelsin istiyorsanız, sadece yazı için kullanılır sandığınız <BLOCKQUOTE> etiketinden grafiklerde de yararlanabilirsiniz:
<BLOCKQUOTE><IMG scr=”resim.gif”></BLOCKQUOTE>
Bütün grafikleriniz soldan yaklaşık 40 piksel hizalanacaktır! Resimleriniz sayganın sağına hizalansın istiyorsanız, buna bir de ALIGN ekleyebilirsiniz:
<BLOCKQUOTE><IMG scr=”resim.gif” ALIGN=right></BLOCKQUOTE>
<BLOCKQUOTE> etiketi kendi içinde kullanırsa, içindeki unsuru 80 piksel sağa iter.
<BLOCKQUOTE><BLOCKQUOTE><IMG scr=”resim.gif” ALIGN=right> </BLOCKQUOTE></BLOCKQUOTE>
Tabiî, en istikrarlı hizalama aracı olarak daima tablodan yararlanabilirsiniz
———————————————————————–
Dikey Çizgi

HTML’de yatay çizgi (<HR>) var da, dikey çizgi yok. Tasarımınız, sayfada dikey çizgi gerektiriyorsa, tablodan yararlanabilirsiniz. Grafik programınızda eni ve boyu 1 piksel ve rengi siyah bir kutu resmi yapın. Bunu 1psiyah.gif adıyla kaydedin. Dikey çizgiye ihtiyacınız olan yerde bir tablo oluşturun; metinlerinizin bir kısmı ve tablonun içine girebilir; girmeyebilir. İşte
bir örnek:
<table width=”75%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr> <td align=”center” valign=”top”>Burada metin var.</td>
<td><img src=”1psiyah.gif” width=”5″ height=”300″></td>
<td align=”center” valign=”top”> Burada metin var </td></tr>
</table>
Çizginin yüksekliği ne kadar olacaksa, çizginin bulunduğu kutudaki IMG etiketinin yüksekliğini o kadar arttırın.
Beyaz Boşluklar

Bazen, iki satır arasında tam istediğiniz ölçüde boşluk elde etmek zor olur. <P> çok, <BR> ise az boşluk bırakır. Kolayı var. Eni 1, boyu 2 piksel, saydam bir GIF dosyası yapın ve 1psaydam.gif adıyla kaydedin. Boşluğa ihtiyacınız olan iki satırın arasına şu etiketi koyun:
<IMG scr=”1psaydam.gif” width=1 height=1 hspace=20 vspace=49>
Burada 20 ve 49 yerine, kendi ihtiyacınız olan boşluğun değerini yazacaksınız. Bir satırı arzu ettiğiniz kadar içerden başlatmak amacıyla da aynı teknikten biraz farklı ifadeyle yararlanabilirsiniz:
<IMG hspace=”25″ scr=”1psaydam.gif>Bu satır 25 piksel içerden başlayacak.
İki sütun yazı arasına arzu ettiğiniz kadar boşluk vermek için, sütunları bir tablonun hücrelerine alın, ortalarındaki hücrenin boyunu ve enini istediğiniz boşluk ölçüsüne getirin.
Sadece Netscape’de bulunan <SPACER> etiketi de beyaz boşluk sağlayabilir:
<SPACER TYPE=”block” WIDTH=”30″ HEIGHT=”45″> IE, bu kodu görünce, hiç bir şey yapmaz.
_________________
Forum kuralları
http://glorylife.forumm.biz/forum-duyurular-f3/site-ve-forum-kurallar-t6.htm

Flood nedir niçin yapılmaz ?
http://glorylife.forumm.biz/forum-duyurular-f3/flood-nedir-nicin-yaplamaz-t309.htm
Sayfa başına dön Aşağa gitmek

HTML Dersleri

Önceki başlık Sonraki başlık Sayfa başına dön
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var: Bu forumdaki mesajlara cevap veremezsiniz
GloryLife-Paylaşımın Dostluğu :: WebMaster Bölümü :: WebMaster Genel -
www.glorylife.forumm.biz
GloryLife Team
İletişim: admin@glorylife.biz
Design By LiBeRtY & Korsan