Html kodları ip ucu
HTMLDE BAZI İŞARETLERİN ANLAMLARI
HTML
-------
metin ---kalın yazar
<TITLE>metin</TITLE> ---sayfanın başlığı
<BR> ---alt satıra geçer
<P> ---bir satır atlayarak alt satıra geçer
<H1> ---en büyük boyut
Örnek:<H1>metin</H1>
<H6> ---en küçük boyut
metin ---italik metin
<EM>metin</EM> ---vurgulu metin
<STRONG>metin</STRONG> ---iyice vurgulu metin
<CENTER>ortalanacak metin</CENTER> ---metin ortalar
<FONT new roman>metin</FONT> ---metin'i istenilen fontlarda yazar.(arial,tahoma vb..)
<BODY TEXT=blue> ---yazıları istenilen renkte yazar.(blue,red,green vb..)
-------------------------------------------------------------------------------------------------
Link vermek:
<BODY>
<A HREF=Link verilecek yer>link olacak yazı</A>
</BODY>
Örnek: <BODY>
<A HREF=http://www.yahoo.com>yahoo'nun web sayfası</A>
için tıklayın
</BODY>
-------------------------------------------------------------------------------------------------
Resmi daha büyük görmek:
<BODY>
<A HREF=resim.htm><IMG SRC=resmim.jpg></A>
</BODY>
NOT:resim.htm dosyasını ayrıca hazırlayıp içine resminizi koymalısınız.Bu kodu eklerken de
resmim.jpg resmi link haline gelip üstüne tıklandığında resim.htm dosyasını açacaktır.
-------------------------------------------------------------------------------------------------
Anchor(Çapa) eklemek:
<A NAME=capa>burası sayfanın başıdır</A>
<A HREF=#capa>sayfanın başına dönmek için tıklayın</A>
NOT:Siz capa yerine başka bir adda kullanabilirsiniz.Bu etiket aynı sayfa içindir.
başka sayfalara çapa vermek içinde:
<A HREF=sayfam.htm#baslangıc>sayfam dosyasının başına gitmek için lütfen tıklayın</A>
-------------------------------------------------------------------------------------------------
Web sitelere link vermek:
<BODY>
<A HREF=http://www.yahoo.com>yahoo'nun web sayfası</A>
için tıklayın
</BODY>
-------------------------------------------------------------------------------------------------
Mail linki vermek:
<BODY>
<A HREF=mailto:tntonur@hotmail.com>bana mail atmak için</A>
</BODY>
NOT:mailto:.......... kısmına kendi mailınızla değiştirmeniz gerekir.
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg> --- resim eklemek için NOT:ocean.jpg herhangi bir resimdir.onun yerine kendi
resminizi koymanız gerekir.
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg WIDTH=90 HEIGHT=100> }
} resmin genişlik ve yükseklik ayarı
<IMG SRC=ocean.jpg WIDTH=90% HEIGHT=100%> }
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg ALIGN=TOP --- resmi hizalamak için
NOT:top yerine right,left,bottom,middle seçeneklerinide kullanabilirsiniz.
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg ALT=ocean resminin üzerine gelindiğinde resmin üzerinde belirecek metni yazın>
NOT:resmin üzerine mouse ınızı getirdiğinizde resmin üzerinde belirecek yazıyı yazmak için...
-------------------------------------------------------------------------------------------------
<BODY BGCOLOR=black> arka plan rengini değiştirmek için(black yerine,red,blue vb.. yazılabilir.
<BODY BACKGROUND=arkaplanresmi.jpg> ---arka plana resim eklemek için
-------------------------------------------------------------------------------------------------
"META" etiketinin eklenmesi:
1.<META NAME=Description CONTENT="sitenizi tanımlayıcı bilgileri buraya girin",kişisel web sitem
2.<META NAME=keywords CONTENT="anahtar kelimeleri buraya girin",,spor,hobi vb....
Örnek bir meta etiketi:
<HTML>
<HEAD>
<TITLE>WEB SAYFAM</TITLE>
<META NAME=Description CONTENT=kişisel web sitem>
<META NAME=keywords" CONTENT=spor,hobi vb....>
</HEAD>
<BODY>
-------------------------------------------------------------------------------------------------
Table eklemek
1.tek satırlık table eklemek için:
<TABLE BORDER>
<TR>
<TD>gül</TD>
<TD>papatya</TD> NOT:gül,papatya,yasemin vb.. gibi örneklerin yerine siz kendi istediğiniz
<TD>yasemin</TD> metinleri yazın.
</TR>
</TABLE>
2.bir den fazla satırlı tablo eklemek için:
<TABLE BORDER>
<TR>
<TD>gül</TD>
<TD>papatya</TD>
<TD>yasemin</TD> NOT:bu kodları kopyalayıp bir web browserda açarsanız tabloyu
</TR> görebilirsiniz.daha fazla satırlı bir tablo yapmak içinde
<TR> </TR> etiketinden sonra bir tane <TR> etiketi koyup
<TD>su ister</TD> yazacağınız yazıları <TD>,</TD> etiketleri arasına
<TD>bol su ister</TD> yazıp sonra </TR> en sonda </TABLE> etiketiyle kapatmak
<TD>haftada bir kez su ister</TD> olacaktır.
</TR>
</TABLE>
-------------------------------------------------------------------------------------------------
tablonun rengini değiştirmek;
<td bgcolor=red,blue,black>
herhangi bir resmi koymak içinde;
<td background=ocean.jpg> etiketlerini kullanabilirsiniz.
-------------------------------------------------------------------------------------------------
Tablo başlığı eklemek için;
<TR>
<TH>ad</TH>
<TH>soyad</TH> NOT:Böylece ad, soyad ve yaş tablonun içinde başlık görevini görüp koyu
<TH>yaş</TH> yazılacaktır.
</TR>
-------------------------------------------------------------------------------------------------
Tabloya başlık eklemek için:
<TABLE BORDER>
<CAPTION ALIGN=TOP>bilgi tablosu
</CAPTION>
........
.......
</TABLE>
bu noktalar yerine istediğiniz tabloyu koyabilirsiniz yinede ben bir tane örnek yaptım...
<TABLE BORDER>
<CAPTION ALIGN=TOP>bilgi tablosu
</CAPTION>
<TR>
<TH>ad</TH>
<TH>soyad</TH>
<TH>yaş</TH>
</TR>
<TD>a</TD>
<TD>b</TD>
<TD>1</TD>
</TABLE>
-------------------------------------------------------------------------------------------------
Yazılarla tablo arasına boşluk vermek ve tablonun kenarını kalınlaştırmak
bu etiketi eklemeniz yeterli;
<TABLE BORDER=1 CELLPADDING=15>
NOT:burada table border ın değerini yükselttikçe tablonun
kenarlarının kalınlığı artacak.eğer cellpaddıng'in değerini alçaltır veya yükseltirsek yazıların
tablonun kenarlarına olan uzaklığı ve yakınlığı değişir.
Örnek;
<TABLE BORDER>
<TABLE BORDER=1 CELLPADDING=10>
<CAPTION ALIGN=TOP>bilgi tablosu
</CAPTION>
<TR> bunları görmeniz için kopyalayıp bir notepad de
<TH>ad</TH> .htm uzantılı kaydetmeniz gerekir.
<TH>soyad</TH>
<TH>yaş</TH>
</TR>
<TD>a</TD>
<TD>b</TD>
<TD>1</TD>
</TABLE>
-------------------------------------------------------------------------------------------------
Hücre içinde metnin hizalanması:
<TD ALIGN=RIGHT>
NOT:right yerine left,left,middle,top,bottom seçeneklerinide kullanabilirsiniz.
-------------------------------------------------------------------------------------------------
Liste eklemek:
1.Sıralı liste eklemek için:
<OL>
<LI>Adana Görünüm:1.Adana
<LI>Adıyaman 2.Adıyaman
<LI>Afyon 3.Afyon
.......
</OL>
2.Sırasız liste eklemek için
<UL>
<LI>Adana Görünüm: .Adana
<LI>Adıyaman .Adıyaman
<LI>Afyon .Afyon
.......
</UL>
-------------------------------------------------------------------------------------------------
Çerçeve oluşturmak:
1.Yatay çerçeve oluşturmak:
<HTML>
<HEAD>
<TITLE>Yatay çerçeveler</TITLE> NOT:Bu etiketle ekranı ikiye bölen yatay bir çerçeve çıkacaktır.
</HEAD> çerçevenin boyutunu değiştirmek için FRAMESET ROWS daki
<FRAMESET ROWS=25%,75%> (%)leri değiştirmeniz gerekir.Yalnız sayıların 100'ü
<FRAME> tamamlaması gerekir.Daha fazla çerçeve eklemek içinde
<FRAME> Frameset Rows'a bir sayı daha ekleyip bir tane daha <FRAME>
</FRAMESET> etiketi koymanız gerekir.(Yatay çerçeve için FRAMESET ROWS
</HTML> etiketi kullanılır)
-------------------------------------------------------------------------------------------------
2.Dikey çerçeve oluşturmak:
<HTML>
<HEAD>
<TITLE>Dikey çerçeveler</TITLE> NOT:Bu etiketle ekranı üçe bölen dikey çerçeveler çıkacaktır.
</HEAD> çerçevenin boyutunu değiştirmek için FRAMESET COLS daki
<FRAMESET COLS=20%,30%,50%> (%)leri değiştirmeniz gerekir.Yalnız sayıların da 100'ü
<FRAME> tamamlaması gerekir.Daha fazla çerçeve eklemek içinde
<FRAME> Frameset Cols'a bir sayı daha ekleyip bir tane daha <FRAME>
<FRAME> etiketi koymanız gerekir.(Dikey çerçeve için FRAMESET COLS
</FRAMESET> etiketi kullanılır)
</HTML>
-------------------------------------------------------------------------------------------------
Çerçeveye dosya eklemek;
Çerçevenize dosya eklemek için önceden ekleyeceğiniz dosyaları hazırlamanız gerekir.Ben önceden
sag.htm ve sol.htm dosyalarını hazırladım ve etiketide ona göre yaptım.Siz <FRAME SRC=sol.htm>
etiketinde sol.htm yerine kendi hazırladığınız dosyanızı koyacaksınız.
<HTML>
<HEAD>
<TITLE>Çerçeve</TITLE> NOT:Siz yine eğer isterseniz çerçevenizi yatay olarak
</HEAD> değiştirebilir veya boyutlarını küçültüp büyültebilirsiniz.
<FRAMESET COLS=25%,75%>
<FRAME SRC=sol.htm>
<FRAME SRC=sag.htm>
</FRAMESET>
</HTML>
-------------------------------------------------------------------------------------------------
Çerçeveler arası link vermek;
Bunun için ilk önce dosyalarımıza ad vereceğiz.Size tavsiyem benim örneklerimle ilk bir tane
denemeniz.Önce bir tane sol.htm dosyası sonra da bir tane sag.htm dosyası açın.bunlar sizin
çerçevenizin içeriği olacaklar.daha sonra bir tane de daha htm uzantılı dosya açın buna aşağıdaki
etiketi ekleyin;
<HTML>
<HEAD>
<TITLE>Çerçeve</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=sol.htm NAME=sol>
<FRAME SRC=sag.htm NAME=sag>
</FRAMESET>
<HTML>
Böylece sol.htm ve sag.htm dosyaları adlandırılmış olundu.Daha sonra mesela sol taraftaki
çerçeveden sağ taraftaki çerçeveye yeni dosya açmak istiyorsanız.aşağıdaki etiketi eklemelisiniz.
<A HREF=yenidosya.htm TARGET=sag>bu link sag tarafa yenidosya.htm dosyasını açar</A>
(Bu etiketi sol.htm dosyasına eklemelisiniz.çünkü TARGET=sag şeklinde etiket.Eğer yeni dosyayı
sol'a açmak istiyorsanız aşağıdaki etiketi sag.htm dosyasına eklemelisiniz)
<A HREF=yenidosya.htm TARGET=sol>bu link sag tarafa yenidosya.htm dosyasını açar</A>
-------
metin ---kalın yazar
<TITLE>metin</TITLE> ---sayfanın başlığı
<BR> ---alt satıra geçer
<P> ---bir satır atlayarak alt satıra geçer
<H1> ---en büyük boyut
Örnek:<H1>metin</H1>
<H6> ---en küçük boyut
metin ---italik metin
<EM>metin</EM> ---vurgulu metin
<STRONG>metin</STRONG> ---iyice vurgulu metin
<CENTER>ortalanacak metin</CENTER> ---metin ortalar
<FONT new roman>metin</FONT> ---metin'i istenilen fontlarda yazar.(arial,tahoma vb..)
<BODY TEXT=blue> ---yazıları istenilen renkte yazar.(blue,red,green vb..)
-------------------------------------------------------------------------------------------------
Link vermek:
<BODY>
<A HREF=Link verilecek yer>link olacak yazı</A>
</BODY>
Örnek: <BODY>
<A HREF=http://www.yahoo.com>yahoo'nun web sayfası</A>
için tıklayın
</BODY>
-------------------------------------------------------------------------------------------------
Resmi daha büyük görmek:
<BODY>
<A HREF=resim.htm><IMG SRC=resmim.jpg></A>
</BODY>
NOT:resim.htm dosyasını ayrıca hazırlayıp içine resminizi koymalısınız.Bu kodu eklerken de
resmim.jpg resmi link haline gelip üstüne tıklandığında resim.htm dosyasını açacaktır.
-------------------------------------------------------------------------------------------------
Anchor(Çapa) eklemek:
<A NAME=capa>burası sayfanın başıdır</A>
<A HREF=#capa>sayfanın başına dönmek için tıklayın</A>
NOT:Siz capa yerine başka bir adda kullanabilirsiniz.Bu etiket aynı sayfa içindir.
başka sayfalara çapa vermek içinde:
<A HREF=sayfam.htm#baslangıc>sayfam dosyasının başına gitmek için lütfen tıklayın</A>
-------------------------------------------------------------------------------------------------
Web sitelere link vermek:
<BODY>
<A HREF=http://www.yahoo.com>yahoo'nun web sayfası</A>
için tıklayın
</BODY>
-------------------------------------------------------------------------------------------------
Mail linki vermek:
<BODY>
<A HREF=mailto:tntonur@hotmail.com>bana mail atmak için</A>
</BODY>
NOT:mailto:.......... kısmına kendi mailınızla değiştirmeniz gerekir.
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg> --- resim eklemek için NOT:ocean.jpg herhangi bir resimdir.onun yerine kendi
resminizi koymanız gerekir.
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg WIDTH=90 HEIGHT=100> }
} resmin genişlik ve yükseklik ayarı
<IMG SRC=ocean.jpg WIDTH=90% HEIGHT=100%> }
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg ALIGN=TOP --- resmi hizalamak için
NOT:top yerine right,left,bottom,middle seçeneklerinide kullanabilirsiniz.
-------------------------------------------------------------------------------------------------
<IMG SRC=ocean.jpg ALT=ocean resminin üzerine gelindiğinde resmin üzerinde belirecek metni yazın>
NOT:resmin üzerine mouse ınızı getirdiğinizde resmin üzerinde belirecek yazıyı yazmak için...
-------------------------------------------------------------------------------------------------
<BODY BGCOLOR=black> arka plan rengini değiştirmek için(black yerine,red,blue vb.. yazılabilir.
<BODY BACKGROUND=arkaplanresmi.jpg> ---arka plana resim eklemek için
-------------------------------------------------------------------------------------------------
"META" etiketinin eklenmesi:
1.<META NAME=Description CONTENT="sitenizi tanımlayıcı bilgileri buraya girin",kişisel web sitem
2.<META NAME=keywords CONTENT="anahtar kelimeleri buraya girin",,spor,hobi vb....
Örnek bir meta etiketi:
<HTML>
<HEAD>
<TITLE>WEB SAYFAM</TITLE>
<META NAME=Description CONTENT=kişisel web sitem>
<META NAME=keywords" CONTENT=spor,hobi vb....>
</HEAD>
<BODY>
-------------------------------------------------------------------------------------------------
Table eklemek
1.tek satırlık table eklemek için:
<TABLE BORDER>
<TR>
<TD>gül</TD>
<TD>papatya</TD> NOT:gül,papatya,yasemin vb.. gibi örneklerin yerine siz kendi istediğiniz
<TD>yasemin</TD> metinleri yazın.
</TR>
</TABLE>
2.bir den fazla satırlı tablo eklemek için:
<TABLE BORDER>
<TR>
<TD>gül</TD>
<TD>papatya</TD>
<TD>yasemin</TD> NOT:bu kodları kopyalayıp bir web browserda açarsanız tabloyu
</TR> görebilirsiniz.daha fazla satırlı bir tablo yapmak içinde
<TR> </TR> etiketinden sonra bir tane <TR> etiketi koyup
<TD>su ister</TD> yazacağınız yazıları <TD>,</TD> etiketleri arasına
<TD>bol su ister</TD> yazıp sonra </TR> en sonda </TABLE> etiketiyle kapatmak
<TD>haftada bir kez su ister</TD> olacaktır.
</TR>
</TABLE>
-------------------------------------------------------------------------------------------------
tablonun rengini değiştirmek;
<td bgcolor=red,blue,black>
herhangi bir resmi koymak içinde;
<td background=ocean.jpg> etiketlerini kullanabilirsiniz.
-------------------------------------------------------------------------------------------------
Tablo başlığı eklemek için;
<TR>
<TH>ad</TH>
<TH>soyad</TH> NOT:Böylece ad, soyad ve yaş tablonun içinde başlık görevini görüp koyu
<TH>yaş</TH> yazılacaktır.
</TR>
-------------------------------------------------------------------------------------------------
Tabloya başlık eklemek için:
<TABLE BORDER>
<CAPTION ALIGN=TOP>bilgi tablosu
</CAPTION>
........
.......
</TABLE>
bu noktalar yerine istediğiniz tabloyu koyabilirsiniz yinede ben bir tane örnek yaptım...
<TABLE BORDER>
<CAPTION ALIGN=TOP>bilgi tablosu
</CAPTION>
<TR>
<TH>ad</TH>
<TH>soyad</TH>
<TH>yaş</TH>
</TR>
<TD>a</TD>
<TD>b</TD>
<TD>1</TD>
</TABLE>
-------------------------------------------------------------------------------------------------
Yazılarla tablo arasına boşluk vermek ve tablonun kenarını kalınlaştırmak
bu etiketi eklemeniz yeterli;
<TABLE BORDER=1 CELLPADDING=15>
NOT:burada table border ın değerini yükselttikçe tablonun
kenarlarının kalınlığı artacak.eğer cellpaddıng'in değerini alçaltır veya yükseltirsek yazıların
tablonun kenarlarına olan uzaklığı ve yakınlığı değişir.
Örnek;
<TABLE BORDER>
<TABLE BORDER=1 CELLPADDING=10>
<CAPTION ALIGN=TOP>bilgi tablosu
</CAPTION>
<TR> bunları görmeniz için kopyalayıp bir notepad de
<TH>ad</TH> .htm uzantılı kaydetmeniz gerekir.
<TH>soyad</TH>
<TH>yaş</TH>
</TR>
<TD>a</TD>
<TD>b</TD>
<TD>1</TD>
</TABLE>
-------------------------------------------------------------------------------------------------
Hücre içinde metnin hizalanması:
<TD ALIGN=RIGHT>
NOT:right yerine left,left,middle,top,bottom seçeneklerinide kullanabilirsiniz.
-------------------------------------------------------------------------------------------------
Liste eklemek:
1.Sıralı liste eklemek için:
<OL>
<LI>Adana Görünüm:1.Adana
<LI>Adıyaman 2.Adıyaman
<LI>Afyon 3.Afyon
.......
</OL>
2.Sırasız liste eklemek için
<UL>
<LI>Adana Görünüm: .Adana
<LI>Adıyaman .Adıyaman
<LI>Afyon .Afyon
.......
</UL>
-------------------------------------------------------------------------------------------------
Çerçeve oluşturmak:
1.Yatay çerçeve oluşturmak:
<HTML>
<HEAD>
<TITLE>Yatay çerçeveler</TITLE> NOT:Bu etiketle ekranı ikiye bölen yatay bir çerçeve çıkacaktır.
</HEAD> çerçevenin boyutunu değiştirmek için FRAMESET ROWS daki
<FRAMESET ROWS=25%,75%> (%)leri değiştirmeniz gerekir.Yalnız sayıların 100'ü
<FRAME> tamamlaması gerekir.Daha fazla çerçeve eklemek içinde
<FRAME> Frameset Rows'a bir sayı daha ekleyip bir tane daha <FRAME>
</FRAMESET> etiketi koymanız gerekir.(Yatay çerçeve için FRAMESET ROWS
</HTML> etiketi kullanılır)
-------------------------------------------------------------------------------------------------
2.Dikey çerçeve oluşturmak:
<HTML>
<HEAD>
<TITLE>Dikey çerçeveler</TITLE> NOT:Bu etiketle ekranı üçe bölen dikey çerçeveler çıkacaktır.
</HEAD> çerçevenin boyutunu değiştirmek için FRAMESET COLS daki
<FRAMESET COLS=20%,30%,50%> (%)leri değiştirmeniz gerekir.Yalnız sayıların da 100'ü
<FRAME> tamamlaması gerekir.Daha fazla çerçeve eklemek içinde
<FRAME> Frameset Cols'a bir sayı daha ekleyip bir tane daha <FRAME>
<FRAME> etiketi koymanız gerekir.(Dikey çerçeve için FRAMESET COLS
</FRAMESET> etiketi kullanılır)
</HTML>
-------------------------------------------------------------------------------------------------
Çerçeveye dosya eklemek;
Çerçevenize dosya eklemek için önceden ekleyeceğiniz dosyaları hazırlamanız gerekir.Ben önceden
sag.htm ve sol.htm dosyalarını hazırladım ve etiketide ona göre yaptım.Siz <FRAME SRC=sol.htm>
etiketinde sol.htm yerine kendi hazırladığınız dosyanızı koyacaksınız.
<HTML>
<HEAD>
<TITLE>Çerçeve</TITLE> NOT:Siz yine eğer isterseniz çerçevenizi yatay olarak
</HEAD> değiştirebilir veya boyutlarını küçültüp büyültebilirsiniz.
<FRAMESET COLS=25%,75%>
<FRAME SRC=sol.htm>
<FRAME SRC=sag.htm>
</FRAMESET>
</HTML>
-------------------------------------------------------------------------------------------------
Çerçeveler arası link vermek;
Bunun için ilk önce dosyalarımıza ad vereceğiz.Size tavsiyem benim örneklerimle ilk bir tane
denemeniz.Önce bir tane sol.htm dosyası sonra da bir tane sag.htm dosyası açın.bunlar sizin
çerçevenizin içeriği olacaklar.daha sonra bir tane de daha htm uzantılı dosya açın buna aşağıdaki
etiketi ekleyin;
<HTML>
<HEAD>
<TITLE>Çerçeve</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=sol.htm NAME=sol>
<FRAME SRC=sag.htm NAME=sag>
</FRAMESET>
<HTML>
Böylece sol.htm ve sag.htm dosyaları adlandırılmış olundu.Daha sonra mesela sol taraftaki
çerçeveden sağ taraftaki çerçeveye yeni dosya açmak istiyorsanız.aşağıdaki etiketi eklemelisiniz.
<A HREF=yenidosya.htm TARGET=sag>bu link sag tarafa yenidosya.htm dosyasını açar</A>
(Bu etiketi sol.htm dosyasına eklemelisiniz.çünkü TARGET=sag şeklinde etiket.Eğer yeni dosyayı
sol'a açmak istiyorsanız aşağıdaki etiketi sag.htm dosyasına eklemelisiniz)
<A HREF=yenidosya.htm TARGET=sol>bu link sag tarafa yenidosya.htm dosyasını açar</A>