Html Kodlar - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

13 Nisan 2006, 15:52

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 200x200 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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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>

</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"></SCRIPT> <BODY OnLoad="flash();">
Geri DüğmesiBrowser'ı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> 
<TR><TH COLSPAN=2> 

Tablo Örneği:

</TR></TD><TR><TD>
deneme1
</TD><TD> 
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> 
deneme4
</TD></TR></TABLE> 

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.

13 Nisan 2006, 15:53

Liste Kullanmak HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır, bunun için öncelikle metnin ne biçimde listeleneceğini seçmelisiniz. Liste hazırlarken en çok rastlananları tipler <OL> ve <UL> dir. <UL> tag'ını listeye ait olan her satırın başına bir nokta koymak için kullanabilirsiniz. <OL> tag'ı ise her bir satırı isteğe göre numaralandırmanızı veya harflendirmenizi sağlar. Bu tag'lar ayrıca bir paragrafı diğer paragraflardan biraz ileriye itmek için de kullanılabilir. Liste tipini belirlemek için yukarıdaki iki seçeneği kullanıyoruz; peki liste seçeneklerini birbirinden ayırmak için nasıl bir yol izleyeceğiz. Listenin her bir öğesini belirtmek için ise <LI> tag'ı kullanılır. Bu karakterleri herhangi bir satırın önüne yerleştirdiğinizde web tarayıcınız bu satırı anında yeni bir liste öğesi olarak kabul edecektir.

Birinci Satır
İkinci Satır
Üçüncü Satır

HTML dokümanınızda yukarıdaki gibi bir görüntü elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:

<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>

Listeyi oluşturmak için <OL> kullanacaksanız bu tag'ın yanına TYPE=X takısını girerek liste biçimini belirleyebilirsiniz. Liste öğelerini sıralatmak için büyük harfleri kullanmak istiyorsanız X yerine A, küçük harflerle sıralamak için a, büyük Roma karakterleri ile sıralamak için I, küçük Roma karakterleri ile sıralamak için I, numaralarla sıralamak için ise L karakterini kullanabilirsiniz.
Büyük harflerle ayrılan bir liste aşağıdaki gibi bir koda sahip olacaktır:

<ol type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</ol>

Herhangi bir liste içerisinde değişik veya aynı tipte bir liste daha açmak mümkündür. Bunun için <UL> veya <OL> tag'ını kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Açılan tüm liste tag'larının kapatılması unutulmamalıdır. Unutulduğu takdirde HTML sayfası düzgün görünmeyecektir.

13 Nisan 2006, 15:55

Nobr TagıZaman zaman, küçücük olsa da hayli işe yarayan HTML tag'larını sizlere tanıtıyoruz. NOBR'de kullanımı çok basit, işlevi de az ve öz bir komut. <NOBR> ve </NOBR> tag'larını kullanarak bu iki komutun arasına yerleştirdiğiniz yazıların hiç bölünmemesini, sadece bir satıra yer almasını sağlayabilirsiniz.
Web tarayıcınız yeri gelse bile bu komutu gördüğünde satırı aşağı kaydırmayacak yatay kaydırma çubuğunu görüntüleyecektir.

<NOBR>İşte bölünmeyecek bir satır..</NOBR>
Üst simge ve Alt simgeWeb sayfanızda içinde özel bir karakter bulunmayan matematiksel bir fonksiyon kullanmak istiyorsunuz diyelim. Ya da özel bir marka kullanıyor ve TM (c) ifadelerini bu özel markanın sağ üst köşesine yerleştirmek istiyorsunuz. HTML dili tüm web tarayıcılarının desteklediği bu işlemi gerçekleştirmeniz için size iki adet özel takı sunuyor.
İngilizce uzatmaları Superscript ve SubScript olan bu iki takıyı kullanarak özel metinlerin, normal metnin yarı uzunluğu kadar aşağısında veya yukarısında olmasını sağlayabilirsiniz.
Bir metni normal metnin üstüne almak için <SUP> ifadesi ile başlamalı metnin bitiminde ise </SUP> ifadesini kullanmalısınız. Aynı şekilde metnin aşağıda yaralamasını istiyorsanız <SUB> takısını kullanın.

YAZININ<SUB>Altında</SUB>
YAZININ<SUP>Üstünde</SUP>
İki kişiye birden e-mail yollamaBir arkadaşınız ile birlikte bir araya geldiniz ve bir Web sitesi hazırladınız. Giriş sayfanızda da kullanıcıların sizinle iletişime geçebilmeleri için
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
gibi bir ifade bulunuyor. Malum Geocities bir Web sitesi için sadece bir tane e-mail hesabı açıyor. Web sayfasını birlikte hazırladığınız arkadaşınızın da bir e-mail adresi varsa kullanıcının sadece bir link'e tıklayarak iki kişiye birden e-mail atmasını sağlayabilirsiniz. Aşağıdaki satırları HTML sayfasına girip sayfaya Web tarayıcınızla baktığınızda ekranda içinde "E-Mail yollamak için tıklayın!" bir buton göreceksiniz. Muhteşem Web sayfanızı ziyaret eden şanslı kullanıcılar bu butona bastığında artık karşılarına gelecek e-mail penceresinin "cc:" bölümünde arkadaşınızın e-mail adresini konu bölümünde ise "deneme" yazısını görecekler.

<FORM>
<INPUT TYPE="button" VALUE="E-Mail yollamak için tıklayın!" onClick="parent.location='mailto:
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
? subject=deneme&cc=
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
'">
</FORM>

13 Nisan 2006, 15:56

Arkaplanda Yazı Bazen güzel bir düzenleme ile biş başlığın arkasında, aynı veya farklı kelimelerin tekrarlanarak zemin oluşturduğunu görürsünüz. Üstelik de sayfa yıldırım hızıyla gelmiştir; yani arkaplandaki yazıların, grafik olmadığı anlaşılıyor. Bunu katman teknolojisi ile başarabilirsiniz:

<SPAN STYLE="position: relative; top: 60px; left: 40px; z-index: 2; font-family: Verdana, Arial, Helvetica; font-weight: bold; font-size: 24pt; color: #ff3300">ÖNDEKİ METİN<BR> </SPAN><BR>
<SPAN STYLE="z-index: 1; font-family: Serif, Times, Georgia; font-size: 10pt; color: #ffcc99"> Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin <BR>Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin <BR>Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin
<BR> </SPAN>

Örneğin Görünümü: ÖNDEKİ METİN

Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin
Arkadaki metin Arkadaki metin Arkadaki metin Arkadaki metin
Arkadaki metin Arkadaki metin Arkadaki

13 Nisan 2006, 15:57

Giriş Web tarayıcıları "navigate" işlemini, HTML (Hyper Text Markup Language) denen bir programlama dili yorumlayıcısı kullanarak yaparlar. HTML, ana hatları SGML (Standart Generalized Markup Language) ile belirlenmiş bir döküman formatlama dilidir. Bu dil, daha çok yazılı bir dökümanı formatlamak ve bir objeden naşka bir objeye linkler sağlamak ile ilgili komutlar içerir. HTML, HTTP ve ilgili diğer protokolleri kullanabilmek için renkli ve güzel kullanıcı arayüzleri hazırlanmasını olanaklı kılar. SGML karışık olmasına rağmen, HTML'e oranla dokümanın yapısı üzerinde daha fazla kontrol imkanı sunan ileri bir dildir. Ayrıca SGML, Adobe Acrobat ve CorelVENTURE gibi halka üretim sisteminin kullandığı pek çok sayfa tanımlama dilinin temelidir.
HTML yayımcılığındaki son gelişmelerden biri HTML 4.0'ın özellikleridir. HTML 3.0 - ve HTML 4.0 - sayesinde Web yayımcıları HTML'in basit ve kullanımı kolay özellikleri ile dokümanlarının genel görünümü için ileri derecede kontrol yapabilme olanağına kavuştular. Yeni versiyonlar; form kullanımını - ki dinamik program tasarımı ve kullanıcı ile etkileşim için kullanılmaları kaçınılmazdır - , frame, tabloları, matematik denklemlerini, manşetleri ve daha da fazlasını desteklemektedir
Son yıllarda HTML içinde, yalnızca döküman formatlama dışında da işler yapan, gerek istemci taraflı (javascript ..), gerek sunucu taraflı (PHP ..) dinamik web teknolojileri de kullanılmaktadır.

13 Nisan 2006, 15:58

Varsayılan HedefFrame'lerden oluşan nefis bir sayfa yaptınız ve sol taraftaki frame'i navigasyon için sağ taraftaki frame'i ise içeriği görüntülemek için kullanıyorsunuz. Daha önce <A HREF=… komutuna target="hedef" gibi bir ek vererek ilgili sayfanın hangi frame'de açılacağını tayin edebileceğinizi söylemiştik. Eğer sol taraftaki frame'inizde çok fazla <A HREF=… takısı varsa <BASE TARGET… komutunu kullanmayı düşünebilirsiniz.

<base target="sagtaraf">
<a href="sayfa1.htm">Hakkımda</a>
<a href="sayfa1.htm">Resimlerim</a>
<a href="sayfa1.htm">Faydalı</a>

Yukarıdaki gibi kodlar kullandığınızda bu kodları koyduğunuz sayfadaki her bir link sağ taraftaki frame sayfasında açılacaktır.
Varsayılan YazıtipiBir sayfa hazırlıyorsunuz ve sayfadaki yazıtipini değiştirmeyi pek düşünmüyorsunuz. Sadece arada bir yazıtipini büyültecek veya küçülteceksiniz. Sizin için böyle bir durum geçerliyse BASEFONT komutunu hatırlatalım. Bu komut tüm bir sayfa için varsayılan bir büyüklük, yazıtipi veya renk belirlemenize olanak sağlar. Böylece yazıtipini hiç değiştirmeden sadece belirli paragraflarda <font size=-1> gibi ifadeler kullanararak varsayılan fontu 1 birim küçültebilirsiniz veya büyültebilirsiniz.. BASEFONT komutunu şöyle kullanabilirsiniz: <BASE FONT COLOR=renk NAME=yazitipi SIZE=büyüklük> Yazıtipi büyüklüğü 1-7 değerlerinden birini alabilir. Varsayılan değer 3'tür.

`Leke · 13 Nisan 2006, 19:00

Saol hocam ;oki

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.