Html Dersleri

**KoJiRo** · 10-27-2007, 04:16 PM

HTML

HTML dosyası uzantısı .HTM veya .HTML olan web tasarımı için kullanılan dosyadır. Derste, bu tip dosyalar hazırlanırken Başlat/Programlar/Donatılar/Not Defteri(=NotePad) programı kullanılacaktır.

2.1.1 Yeni Bir HTML Dosyası Hazırlamak

1. Internet Explorer penceresini açın,

Adres çubuğuna about:blank yazıp Enter tuşuna basın.

(Yeni boş bir dosya oluşturulmuştur.)

Bu sayfada farenin sağ tuşuna, boş bir zemini, tıklayın.
Çıkan menüden Wiew Source/Kaynağı Görüntüle komutunu verin.

(Bir Not Defteri dosyası açılacaktır.)

Bu programı Dosya menüsünden Farklı Kaydet i tıklayın.
Dosya adı kendi soyadınız ve uzantısı .HTM veya .HTML olacak biçimde dosyanızı, masa üstünde html adlı bir klasör açıp bu klasörün içine kopyalayın. (Hazır).

HTML Kodları

HTML kodları(=deyimleri,komutları)<>şeklinde ifade edilen işaretlerin arasına yazılan HTML deyimleridir. Hemen hemen her kodun başlangıcı<>ve bitişi</>şeklindedir. Bu ibareler arasında kalan işlemler ilgili komut tarafından icra edilir. Bazı deyimlerin bir veya daha fazla parametresi vardır. Bu parametrelerin hepsi seçimliktir. Yani kullanma zorunluluğu yoktur. Fakat kullanıldığı takdirde deyime zenginlik katar. Ayrıca bu parametrelerin kullanılması için belli bir sıralama yoktur. HTML kodları yazılımında büyük harf küçük harf ayrımı da yoktur,örneğin <BODY>=<body>gibi. Aşağıda verilen örneklerin bir çoğunda büyük harf kullanılmıştır.

2.1.2 Giriş

<HTML></HTML>
Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır.

<HEAD></HEAD>
Web sayfası ile ilgili temel özellikler,Sayfa Başlığı, Yazı karakterler kümesi, link özellikleri gibi,burada tanımlanır.Kısacaheadkısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır.Yeri geldikçe bu deyimin kullanımı gösterilecektir.

<TITLE></TITLE>
<TITLE>satırında Internet Explorer (=IE) programına sayfaya başlık verilmek istendiği işaret edilmektedir. IE<TITLE>ve</TITLE>arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler<HEAD></HEAD>deyimleri arasına yeralır.

<BODY></BODY>
Web sayfasında yer alacak asıl bilgiler HTML formatındaki dosyanın <BODY> deyimi belirlenen kısma yazılır. İşlem </BODY> deyimi ile biter. Bu iki deyim arasında herhangi bir metin web sayfasında ekranda aynen görülür.


Dosyanın içinde bir açıklama yapmak için kullanılır. Açıklama ... ile belirlenen kısma yazılır.

Örnek 1: Aşağıdaki örneği bir not defterine yazın ve dosya uzantısını htm veya html olarak belirleyin.

Kod:
<HTML><HEAD><TITLE>Ornek01.html</TITLE></HEAD><BODY>Merhaba Dünya!...</BODY></HTML>
 
Bir metin yazılırken bir alt satıra geçmek için kullanılır. Bu deyim kullanılmazsa Tüm işlemler aynı satırdaymış gibi işlem görür. Yani deyimi Enter tuşunun görevini görür.

<CENTER></CENTER>
Bir veya daha fazla satırı sayfa içinde ortalamak için kullanılır.

Örnek 2:

Kod:
<HTML><HEAD><TITLE>Ornek02.html</TITLE></HEAD><BODY>Gölbaşı Meslek Yüksek Okulu GölbaşıMeslek Yüksek Okulu <CENTER>A D I Y A M A N</CENTER> </BODY></HTML>
<H?></H?>
Bu deyim Web sayfasında yazılacak olan metnin puntosunda değişiklik yapmak için kullanılır. ? İşareti yerine 1-5 arası bir rakam gelir. Örneğin,<H1>büyük puntolu yazı yazmak için kullanılır.Sayı değeri büyüdükçe punto küçülür.</H1>ile bitirilir.


<H?></H?>deyimlerini kullanmak yerine bu deyim kullanılabilir.

Parametreler:
SIZE :Sayfada bulunan bir yazının punto ayarı burada yapılır. Örneğin sayı yerine +4 yazılırsa
FONT deyiminin arasına yazılmış olan metnin boyutu +4 birim daha büyük görülecektir, -2
yazılırsa metin -2 birim daha küçük görülecektir.
COLOR :Yazının rengi burada belirlenir. Red,Blue... gibi
FACE :Yazı tipi ayarlamalarını burada yapılır. Arial, Tahoma... gibi

Örnek 3:

Kod:
<HTML><HEAD><TITLE>Ornek03.html</TITLE></HEAD><BODY><CENTER><H3>Ahmet Bingül</H3>  Ahmet Bingül Ahmet Bingül </CENTER></BODY></HTML>

Bu iki deyim arasına yazılan metni koyu (=Bolt) olarak sayfada gösterilmesini sağlar.


Bu iki deyim arasına yazılan metni altıçizili (=Underline) olarak sayfada gösterilmesini sağlar.


Bu iki deyim arasına yazılan metni italik (=Italic) olarak sayfada gösterilmesini sağlar.


Bu iki deyim arasına yazılan metin üstindis olarak işlem görür.


Bu iki deyim arasına yazılan metin altindis olarak işlem görür.

Örnek 4:

Kod:
<HTML><HEAD><TITLE>Ornek04.html</TITLE></HEAD><BODY><CENTER>Bu metin koyu Bu metin italik Bu metin altıçizili Bu metin koyu ve italik </CENTER>a kare + ab kare = a2 + b2 x1 + x2 = x1 + x2</BODY></HTML>

2.1.3 Paragraf Biçimlendirme

<PRE></PRE>
Web sayfasında yazılan kelimelerin arasında yalnız bir boşluk vardır. Ayrıca bir alt satıra geçerken deyiminin kullanılması gerektiği daha önce bahsedilmişti. Web sayfasında yazdığınız metnin NodPad e yazdığınız formatta görünmesi için bu deyim kullanılır.

Örnek 5:

Kod:
<HTML><HEAD><TITLE>Ornek05.html</TITLE></HEAD><BODY>AhmetBingül<PRE> AhmetBingül </PRE></BODY></HTML>

Eğer uzun bir metin birden fazla paragrafla belirlenmek istenirse paragrafın başına ve sonuna bu deyimler yazılır.

Parametreler:
ALIGN aragrafın tipini belirler.Örneğin olarak kullanılırsa paragraf
sağa dayalı yazılır.sola dayalı olarak ve
paragraf ortalanarak sayfada görüntülenir.

Örnek 6:

<HTML>
<HEAD><TITLE>Ornek06.html</TITLE></HEAD>
<BODY>
HTML de font ayarları SIZE ile yazılan metnin punto ayarı yapılabilir. sayı, +5 olarak seçilirse yazı büyüklüğünün 5 punto kadar arttır anlamındadır.-5 seçilseydi 5 birim azalt anlamındadır. COLOR ile yazının rengi belirlenir. Renk ingilizce renk adlarından biri olmalıdır, yellow gibi. FACE ile yazı tipi belirlenebilir. Bu üç parametre seçimliktir ve sırası önemli değildir. İstenilen parametre kullanılabilir.

Ahmet Bingül
 
<H2>
Gölbaşı MYO
</H2>
</BODY>
</HTML>

2.1.4 Sayfanın Artalanını Belirleme

Bu işlem<BODY>deyiminin parametreleri kullanılarak yapılır. Daha önce<BODY>deyimini kullanırken bu parametrelerden bahsedilmemişti.

i) Artalan Rengini Belirleme

<BODY BGCOLOR=”renk”></BODY>
Renk kısmına sayfanın istenilen artalan rengi yazılır. Bu renkler ingilizce renk isimleri olmalıdır.
Örneğin: Blue, Black, Green, Yellow, Red, Gray, Cyan... gibi.

<BODY BGCOLOR=”#kkyymm”></BODY>
Yukarıdaki kısımda kullanacağınız renk sayısı sınırlıdır. Dolayısıyla Aradığınız renk tonu yukarıdaki özellikte bulamayabilirsiniz. doğada bulunan üç ana renk kırmızı,yeşil,mavi dir. Tüm renkler bu renklerin karışımından elde edilebilir. #kkyymm ifadesini kullanarak bir k-y-m renklerinden bir karışım elde edebilirsiniz. Burada kk,yy,mm ifadeleri birer rakama karşılık gelmektedir. Örneğin #990000 tam olarak kırmızı renge karşılıktır. Renk tonu ayarları bu rakamlar aracılığı ile yapılır. Bazen bir renk tamamen kullanılacaksa, yani ilgili pozisyona 9 konacaksa, F(=Full) kullanılabilir. Örneğin;
#FF15FF = #991599, #0F5FFF = #095999 gibi.(yaklaşık olarak!)

Örnek 7:

Kod:
<HTML><HEAD><TITLE>Ornek07.html</TITLE></HEAD><BODY BGCOLOR=”#FF00FF”><CENTER>MERHABA DUNYA!..</CENTER></BODY></HTML>

ii) Artalana Resim Ekleme

<BODY BACKGROUND=”file://artalana_konacak_olan_resmi_ konumu”></BODY>
Artalanı belli bir renkte boyamak yerine, artalana konumu bilinen bir resim dosyası eklenebilir. Bu dosyaların uzantıları .GIF,.JPG,.JPEG veya .BMP olmalıdır.

Örnek 8:

Kod:
<HTML><HEAD><TITLE>Ornek08.html</TITLE></HEAD><BODY BACKGROUND=”File:///a:/resimler/artalan.gif”>Ahmet Bingül</BODY></HTML>

2.1.5 Sayfaya Yatay Çizgi Ekleme

<HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE>
Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır.

Parametreler:
WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir.
Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır.
Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder.
SIZE : Çizginin kalınlığı burada ayarlanır. 1-5 arası değerler kullanılır.
COLOR : Yatay çizginin rengi burada belirlenir.
NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay
çizginin gölgesi ortadan kalkar.

Örnek 9:

Kod:
<HTML><HEAD><TITLE>Ornek09.html</TITLE></HEAD><BODY BGCOLOR=”#000000”><HR><HR WIDTH=”75%” NOSHADE><CENTER>AHMET BINGUL...<HR COLOR=”#F0FF09” WIDTH=”200” SIZE=”2” NOSHADE><HR COLOR=”White” WIDTH=”200” SIZE=”2”></CENTER></BODY></HTML>
2.1.6 Sayfaya Resim Ekleme

<IMG SRC=”file://dosya” WIDTH=”genişlik” HEIGHT=”yükseklik”
ALT=”açıklama” BORDER=”sınır”>
Web sayfası içinde resim dosyası yerleştirmek için bu deyim kullanılır.

Parametreler:
SCR : file:// dan sonra sayfaya eklenecek olan resim dosyasının konumu yazılır.
WIDTH :Sayfaya eklenmiş olan resmin eninin ebatları piksel veya % olarak burada belirlenir.
HEIGHT : Sayfaya eklenmiş olan resmin boyunun ebatları piksel veya % olarak burada belirlenir.
ALT : Sayfaya eklenmiş olan resmin fare ile üzerine gelindiğinde, açıklama amaçlı bir yazı
göstermek için kullanılır.
BORDER :Sayfaya eklenmiş olan resme kenarlık vermek için kullanılır. Sınır (0-6) arası.

**KoJiRo** · 10-27-2007, 04:17 PM

Örnek 10:

Kod:
<HTML><HEAD><TITLE>Ornek10.html</TITLE></HEAD><BODY> ...RESiMLERiM... <IMG SRC=”File:///a:/resimler/resim1.jpg” ALT=”Gölbaşı”> <IMG SRC=”File:///a:/resimler/resim2.gif” WIDTH=”60” HEIGHT=”30%”> <IMG SRC=”File:///a:/resimler/resim3.gif” ALT=”MYO” WIDTH=”100”BORDER=”1”></BODY></HTML>

2.1.7 Sayfaya Madde işaretleri(=İmleri) Ekleme

<UL>,<OL> ve <LI>
Web sayfası dahilinde liste hazırlarken bu deyimler listeleme özelliğini başlatmaktadır. Eğer listede bulunan maddelerin başına büyükçe bir noktanın konulması isteniyorsa <UL> deyimi kullanılmalıdır. Listedeki maddeleri numaralı sıralamak için <OL> değimi kullanılır. Madde olarak kullanılacak her satır <LI> deyimi ile başlayıp </LI> deyimi ile bitmelidir.

<UL TYPE=”DISC|CIRCLE|SQUARE”></UL>
Bir listede bulunan maddelerin başına büyükçe bir nokta,küçük bir çember veya içi dolu bir kare işareti koymak için kullanılır.

Parametreler:
TYPE :Listedeki maddelerin başına konacak olan işaret tipi burada belirlenir. Notka içinDISC, içi
boş bir nokta içinCIRCLEve kare işareti içinSQUAREdeyimleri kullanılır.Bir şey
belirtilmezse varsayılan değer noktadır.

Örnek 11:

Kod:
<HTML><HEAD><TITLE>Ornek11.html</TITLE></HEAD><BODY BGCOLOR=”#00FFFF”>TÜRKİYE 1.FUTBOL LIGINDEDE ŞAMPİYON OLAN TAKIMLAR<UL TYPE=”disc”><LI> Galatasaray SK 14 kez </LI><LI> Fenerbahçe SK 13 kez </LI><LI> Beşiktaş JK 9 kez </LI><LI> Trabzonspor SK 6 kez </LI></UL></BODY></HTML>
<OL TYPE=” A|a|I|i|1” START=”sayı”></OL>
Bir listedeki maddeleri numaralı olarak sıralamak için kullanılır.

Parametreler:
TYPE :Listedeki maddelerin sıralanma tipleri burada belirlenir. Örneğin <OL TYPE=”a”>
kullanılırsa maddeler a,b,c.. şeklinde sıralanır. TYPE belirtilmezse varsayılan değer1,2,3...
START :Sıralamaya kaçıncı maddeden başlanacağı burada belirlenir.

Örnek 12:

Kod:
<HTML><HEAD><TITLE>Ornek12.html</TITLE></HEAD><BODY><CENTER>TÜRKİYE 1.FUTBOL LIGINDEDE ŞAMPİYON OLAN TAKIMLAR <OL TYPE=”I” START=”3”><LI> Galatasaray SK 14 kez </LI><LI> Fenerbahçe SK 13 kez </LI><LI> Beşiktaş JK 9 kez </LI><LI> Trabzonspor SK 6 kez </LI></OL></CENTER></BODY></HTML>
2.1.8 Sayfaya Tablo Ekleme

<TABLE>,<TR> ve <TD>
Bu deyim sayesinde web sayfalarında tablolar hazırlanabilir. Bu deyim<TD>ve<TR>deyimleri ile birlikte kullanılmalıdır. <TR>satır ,<TD>tablonun satırlarının içindeki işlemler için kullanılır.

<TABLE BORDER=”sınır” WIDTH=”en” HEIGHT=”boy”></TABLE>
<TABLE></TABLE> deyimleri tablonun başlangıcını ve bitişini gösterir. Unutmayın! bütün parametreleri kullanmak zorunda değilsiniz.

Parametreler:
BORDER :Tabloyu oluşturan çerçevenin kalınlığı burada belirlenir.sınır ifadesi 1-5 arası bir sayıya
karşılık gelir.
WIDTH :Tüm tablonun ister piksel ister % olarak genişliği.
HEIGHT :Tüm tablonun ister piksel ister % olarak yüksekliği.

<TR></TR>
Tablonun satırlarında yapılacak olan işlemlerde bu deyim kullanılır. Her satır için farklı işlem yürütülebilir.

<TD BGCOLOR=”renk” ALIGN=”LEFT|RIGTH|CENTER”></TD>
Tablo hücrelerini düzenlemek için kullanılır.<TR></TR>deyimleri arasına yazılmalıdır.

Parametreler:
ALIGN :Tablo içine yazılan metnin biçimi belirlenir. Sağa dayalı, ortalı gibi.
BGCOLOR :Tablo hücrelerinin artalan rengi burada belirlenir.

Örnek 13:

Kod:
<html><head><title>Ornek13.html</title></head><body><table border="3"> <tr><td>Adı soyadı </td><td>Numarası </td><td>Notu</td></tr><tr><td>selçuk özdemir </td><td>2001 </td><td>75 </td></tr><tr><td bgcolor=”Yellow”>gülden durmuş</td><td>2054 </td><td>96 </td></tr> </table></body></html>
Örnek 14:

Kod:
<html><head><title>Ornek14.html</title></head><body bgcolor="#000000"><center><table border="0" width="80%" height="100%"><tr><td bgcolor="#909090">Web Sayfama Hoş Geldiniz.. </td></tr></center></table></body></html>

2.1.9 Sayfalara e-mail Adresi Ekleme

<A HREF=”mailto:e-mail_adresi”></A>
Web sayfasında e-posta (=elektronik posta) adresi eklemek için<A> ve HREFdeyimlerini kullanmak gerekir.

Örnek 15:

Kod:
<HTML><HEAD><TITLE>Ornek15.html</TITLE></HEAD><BODY><a href=”mailto:[email protected]”>E-Mail</a></BODY></HTML>
2.1.10 Başka Web Sitelerine Geçiş

<A HREF=”http://bağlantı_kurulacak_olan_sayfanın_adresi”></A>
Bir kişi veya kurumun web sitesine hazırladığınız web sayfasından bağlantı kurmak için yine<A>ve HREFdeyimleri kullanılır.

Örnek 16:

Kod:
<HTML><HEAD><TITLE>Ornek16.html</TITLE></HEAD><BODY><A HREF=”http://www.gantep.edu.tr”>Gaziantep Üniversitesi</A> Gölbaşı MYO sayfasını <A HREF=”http://www.golbasimyo.8m.com”>tıklayın</A></BODY></HTML>
2.1.11 Başka HTML/Text dosyalarına Bağlantı Kurma

Daha evvelden hazırlamış olduğunuz HTML dosyalarına bağlantı kurmak için yine<A>ve<HEAD><TITLE>Ornek16.html</TITLE></HEAD>
<BODY>
<A HREF=”http://www.gantep.edu.tr”>Gaziantep Üniversitesi</A> 
Gölbaşı MYO sayfasını
<A HREF=”http://www.golbasimyo.8m.com”>tıklayın</A>
</BODY>
</HTML>

2.1.11 Başka HTML/Text dosyalarına Bağlantı Kurma

Daha evvelden hazırlamış olduğunuz HTML dosyalarına bağlantı kurmak için yine<A>veHREFdeyimleri kullanılır. Bağlantı kurulacak dosyanın uzantısı txt, htm veya html olabilir. Bunun için;

<A HREF=”file://dosyanın_konumu”></A>
file://ile belirtilen yerden sonra bağlantı kurmak istediğiniz dosyanın konumu yazılır.

Örnek 17: Bu örnekten önce masaüstüneDosya1.html ve Dosya2.txtadlı dosyaları oluşturun.

Kod:
<HTML><HEAD><TITLE>Ornek17.html</TITLE></HEAD><BODY><A HREF=”file:///c:/windows/desktop/Dosya1.html”>Dosya1</A> <A HREF=”file:///c:/windows/desktop/Dosya2.txt”> Dosya2</A><A HREF=”ornek15.html”>15. Örnek</A></BODY></HTML>
2.1.12 Bağlantı (Link) Özelliklerini Ayarlama

i) Link Renklerinin Ayarları

Yukarıdaki iki örnekte Web sayfanızda linklerin renkleri altı çizili ve mavi renktedir. Bir siteyi ziyaret ettiğinizde IE ziyaret edilen bu sitenin link rengini eflatun renginde gösterir. Kendi sayfanızda bulunan linkleri rengini ayarlayabilirsiniz. Bunun için<BODY>deyiminin aşağıda verilen özelliklerini inceleyin.

<BODY LINK=”link” ALINK=”aktif_link” VLINK=”ziyaret_edilen_link”></BODY>

Parametreler:

LINK : Sayfada bulunan linklerin ayarlamaları burada yapılır.
ALINK : Fare ile link tıklandığında link in alacağı renk burada belirlenir.
VLINK :Eğer bir link daha önce ziyaret edilmişse, o sitenin ziyaret edildiğini gösteren renk ayarı
burada yapılır.

Örnek 18:

Kod:
<HTML><HEAD><TITLE>Ornek18.html</TITLE></HEAD><BODY BGCOLOR=”Black” LINK=”Yellow” VLINK=”White” ALINK=”Gray”> <A HREF=”http://www.metu.edu.tr”>ODTU</A> <A HREF=”http://www.microsoft.com”>Microsoft</A> <A HREF=”mailto:[email protected]”>E-Mail</A></BODY></HTML>

ii) Linklerin Altı Çizili Özelliğini Kaldıra

Sayfanızda bulunan linklerin altı çizili özelliğini kaldırma işlemi<HEAD></HEAD>deyimleri arasına aşağıda verilen kodları yazmalısınız. Ayrıca bu deyimlerle altı çizili özelliği fare linkin üzerine geldiğinde, link altı çizili, üstü çizili veya altı-üstü çizili duruma getirilebilir.

:-):-):-):-):-):-):-):-):-)
A:link { color : renk; text-decoration :none|underline }
A:active { color : renk; text-decoration :none|underline }
A:visited { color : renk; text-decoration :none|underline }
A:hover { color : renk; text-decoration :none|underline|overline }
</style>

Parametreler:
link :Sayfada bulunan bir link renk ve durumu
active :Link tıklandığında alacağı renk ve durum
visited :Ziyaret edilmiş bir linkin alacağı renk ve durum
hover :Fare ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin
fare linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında
underline seçilmelidir. Üstü çizili olması içinoverlineseçilmelidir. Hem
altı hem üstü çizili olması için iki tane hover kullanılmalıdır.
color :Linklerin, ziyaret edilen linklerin.. renk özelliğinin ayarlanması burada
yapılır.
text-decoration :Bu kısımda linkin tipi belirlenir. Fare linkin üzerine geldiğinde, linkin
alacağı durum burada ayarlanır. none seçilirse ilgili linkin altı çizili özelliği
ortadan kalkar.underline seçilirse ilgili linkin altı çizili özelliği devam
eder.

Örnek 19:

Kod:
<html><head>:-):-):-):-):-):-):-):-):-)A:link { color : Yellow; text-decoration :none }A:active { color : Yellow; text-decoration :none }A:visited { color : White; text-decoration :none }A:hover { color : Yellow; text-decoration :underline}A:hover { color : Yellow; text-decoration verline }</style><title>Ornek19.html</title></head><body bgcolor=”#000080”><a href=”http://www.gantep.edu.tr”>Gaziantep Üniversitesi</a></body></html>
ii) Aynı Sayfa İçinde Bağlantı Kurma
Web sayfalarında birbirine bağlı konular aynı sayfa içinde yer alabilir. Bu konular başka sayfalara geçmeden aynı sayfa içinde birbirleri için link oluşturulabilir. Bunun için yine <A> deyimi kullanılır. Çok uzun metinlerde kullanılması kolaylık sağlar.

<A HREF=”#isim”></A>
Aynı sayfa içinde link yapılırken link burada bir adres veya dosya değildir. Sadece fare ile link e tıklandığında aynı sayfa içinde, link bizi başka bir yere yönlendirecektir(=gönderecektir). Bu işlem sayfa içinde gidilecek olan yere bir isim vermekle yapılır.

<A NAME=”isim”></A>
Link e tıklandığında sayfada gidilecek yer burasıdır. Dikkat linkdeki isimle gideceği yer ismi aynı olmalıdır. Aksi takdirde bağlantı kurulamaz.

**KoJiRo** · 10-27-2007, 04:17 PM

Örnek 20:

Kod:
<HTML><HEAD><TITLE>Ornek20.html</TITLE></HEAD><BODY><a name="BAS">İÇİNDEKİLER</a> <ul> <li><a href="#Bolum1">Bolum1</a><li><a href="#Bolum2">Bolum2</a><li><a href="#Bolum3">Bolum3</a></ul> <hr><a name="Bolum1">Burası Bolum1</a><a href="#BAS">Başa Dön</a><hr> <a name=”Bolum2”>Burası Bolum2</a><a href="#BAS">Başa Dön</a><hr> <a name=”Bolum3”>Burası Bolum3</a><a href="#BAS”>Başa Dön</a></BODY></HTML>

2.1.13 Sayfaya Çerçeve(Frame) Özelliği Kazandırma

Web sayfalarının bir çoğu ikiye bazen üçe bölünmüş olarak görülür.FRAMESETdeyimi aynı IE penceresinde birden fazla IE penceresi ile çalışma imkanı verir. Bu şekilde daha aktif bir Web sayfasıhazırlanabilir. Ana sayfanızı 2 veya 3 e bölmek içinBODYdeyimi yerineFRAMESET deyimi kullanılmalıdır.

<FRAMESET ROWS|COLS=”?,*” BORDER=”?”></FRAMESET>
Aynı pencerede birden çok sayfayı kontrol etmek için kullanılır. FRAMESET deyimi kullandığınızda BODY deyimi kullanılmaz.

Parametreler:
ROWS : Web sayfasını yatay olarak bölmek için kullanılır. ROWS=”100,*” seçilirse yukarıdan
itibaren 100 piksel ayrılır ve yatay bir çizgi ile sayfa ikiye bölünür.
COLS :Web sayfasını dikey olarak bölmek için kullanılır.
BORDER :Sayfa bölündüğünde ortaya çıkan çizginin kalınlığı burada ayarlanır. ? yerine 0-5 arası bir
rakam gelir.

<FRAME SCR=”dosyaadı” NAME=”çerçeve_ismi” SCROLLING=”YES|NO|AUTO” NORESIZE>
<FRAMESET></FRAMESET> deyimleri arasında belirlenen çerçevelerin formatları bu deyimle yapılır.

Parametreler:
SRC :Ana sayfa açıldığında daha önce belirlenmiş yere bağlantı kurulacak olan dosyanın
adı.
NAME :İlgili çerçevenin ismi.
SCROLLING :Ana sayfa açıldığında sayfalar pencereye sığması veya sığmaması ayarı burada
yapılır.
NORESIZE : Ana sayfadaki diğer sayfaları bölen pencereleri ayıran çizginin üstüne gelindiğinde
bu çizginin fare ile ebatlarının değiştirildiği görülür. Kullanıcıya bu izni vermek
istemiyorsanız bu deyimi de eklemelisiniz.

Örnek 21: Bu örnekten önce masaüstüne sayfa1.html, sayfa2.html ve sayfa3.html adlı
dosyaları oluşturun. Bu örneği de masaüstüne index.html olarak kaydedin. Yada bu üç
dosya aynı klasöre kaydedin.

Kod:
<HTML><HEAD><TITLE>Ornek21.html,index1.html</TITLE></HEAD><Frameset Cols="150,*"> <Frame Src="sayfa1.html" name="Sol" Noresize><Frame Src="sayfa2.html" name="Sag"></Frameset></HTML>
Örnek 22 : Bir sayfanın 3 e bölünmesi
Kod:
<HTML><HEAD><TITLE>Ornek21.html</TITLE></HEAD><FRAMESET COLS="100,*"><FRAME SRC="sayfa1.html" NAME="Sol"><FRAMESET ROWS="150,*"><FRAME SRC="sayfa2.html" NAME="SagUst"><FRAME SRC="sayfa3.html" NAME="SagAlt"></FRAMESET> </FRAMESET> </HTML>
Bir Çerçeveden Diğerine Bağlantı

<A HREF=”URL” TARGET=”Hedef_Çerçeve”></A>
Bir çok web sayfasında sol çerçevede bulunan bir linkin etkisini sağ tarafta görülür. Bu özelliği kazandırmak için<A>ve HREF in yanındaTARGETparametresi de kullanılmalıdır.

Parametreler:
TARGET : Bağlantı etkisinin görüleceği çerçevenin ismi burada yazılır. TARGET kullanılmazsa link
aynı pencerede açılacaktır. Fakat Hedef_Çerçeve yerine mevcut çerçeve isimlerinden
başka bir isim yazılırsa link, için başka bir IE penceresi açılır.

Örnek 23: Burada sayfa1.html, sayfa2.html,sayfa3.html ve index.html dosyalarının içerikleri de belirlenmiştir. Bu 4 dosyayı aynı klasörün içine kopyalayın. Böylece link yapılırken dos-
ya yollarını belirtmek zorunda kalmayacaksınız.

Kod:
<HTML><HEAD><TITLE>Ornek23.html,index2.html</TITLE></HEAD><Frameset Cols="150,*"><Frame Src="sayfa1.htm" name="Sol" Noresize><Frame Src="sayfa2.html" name="Sag"></Frameset></HTML> <HTML><HEAD><TITLE>sayfa1.html</TITLE></HEAD><BODY>SAYFA1<A HREF=”Yahoo!” TARGET=”disari”>yahoo</A><A HREF=”sayfa3.html” TARGET=”Sag”>Sayfa3</A><A HREF=”http://www.altavista.com”>altavista</A></BODY></HTML> <HTML><HEAD><TITLE>sayfa2.html</TITLE></HEAD><BODY>SAYFA2 <A HREF=”sayfa3.html”>Sayfa3</A></BODY></HTML> <HTML><HEAD><TITLE>sayfa3.html</TITLE></HEAD><BODY>SAYFA3<A HREF=”sayfa2.html”>Sayfa2</A></BODY></HTML>

HTML KODLARI ÖZETİ

URL : Herhangi bir bağlantı
? : Bir sayı
*** : Karakter topluluğu
#$$$$$$ : #kkyymm

GENEL (Tüm HTML dökümanları bu deyimlere sahip olmalıdır)

Döküman Tipi <HTML></HTML> (Dosya başı ve sonunda olmalı)
Sayfa Başlığı <TITLE></TITLE> (En başta olmalı)
Başlık <HEAD></HEAD> (Tanımlayıcı özellikler)
Gövde <BODY></BODY> (Sayfanın tüm içeriği burada yazılmalı)

YAZI

Koyu 
Italik 
Altıçizili 
Altindis 
Üstindis 
Text Formatı <PRE></PRE>
Ortalı <CENTER></CENTER>
Yazı Boyutu (1-7 arası)
Yazı Rengi 
Yazı Tipi 
Açıklama 

LINKLER VE RESIMLER

Link <A HREF="URL"></A>
Aynı Sayfa Link <A HREF="#***"></A>
Hedefe Link <A HREF="URL" TARGET="***"></A>
Tanımlı Hedef <A NAME="***"></A>
Display Image <IMG SRC="URL">
Alt Yazı <IMG SRC="URL" ALT="***">
Ölçüler <IMG SRC="URL" WIDTH=”?” HEIGHT=”?”> (Piksel olarak)
Sınır <IMG SRC="URL" BORDER=”?”> (Piksel olarak)

SAYFA BÖLÜCÜLER

Paragraf 
Hizalama 
Alt Satıra Geçme (Tek bir Return işlemi)
Yatay çizgi <HR>
Hizalama <HR ALIGN=LEFT|RIGHT|CENTER>
Boy <HR SIZE=?> (Piksel olarak)
En <HR WIDTH=?> (Piksel olarak)
% olarak En <HR WIDTH="?%"> (Sayfadaki bir satırın % si olarak)
Gölgesiz <HR NOSHADE>

LİSTELEME

Madde imli Liste <UL><LI></UL> (Listedeki her maddeden önce <LI>)
İşaretli <UL TYPE=DISC|CIRCLE|SQUARE>
Numaralı Liste <OL><LI></OL>
Numaralama Tipi <OL TYPE=A|a|I|i|1>
Başlangiç Numarası<OL START=?>

ARTALAN VE LINK RENKLERİ

Artalan Rengi <BODY BGCOLOR="#$$$$$$”> ( kırmızı/yeşil/mavi karışımı)
Link Rengi <BODY LINK="#$$$$$$">
Ziyaret Edilmiş <BODY VLINK="#$$$$$$">
Aktif Link <BODY ALINK="#$$$$$$">

TABLOLAR

Tablo Tanımı <TABLE></TABLE>
Tablo Sınırı <TABLE BORDER=?></TABLE> (0-6 arası bir değer)
Tablo Eni <TABLE WIDTH=?> (Piksel olarak)
Tablo Eni <TABLE WIDTH=”?%”> (Sayfanın % si olarak)
Tablo Satırı <TR></TR>
Tablo Hücresi <TD></TD> (Tablo satırları arasında görünmeli)
Hücre Hizalama <TD ALIGN=LEFT|RIGHT|CENTER>
Hücre Eni <TD WIDTH=?> (Piksel olarak)
Hücre Eni <TD WIDTH="?%"> (Tablonun Yüzdesi)
Hücre Rengi <TD BGCOLOR="#$$$$$$">

ÇERÇEVELER

Çerçeve Oluşturma <FRAMESET></FRAMESET> (<BODY> nin yerine)
Satır Yüksekliği <FRAMESET ROWS=”?,*”></FRAMESET>
Kolon Genişliği <FRAMESET COLS=”?,*”></FRAMESET>
Sınır Büyüklüğü <FRAMESET BORDER=”?”>
Çerçeve Dökümanı <FRAME> (Bağımsız çerçevelerin içerikleri)
Bağlantı Dosyası <FRAME SRC="URL">
Hareket Çubuğu <FRAME SCROLLING="YES|NO|AUTO">
Ölçülendirilemez <FRAME NORESIZE>

**uyuzsultan** · 10-27-2007, 04:25 PM

Bu bilgiler için teşekkürler

Web tasarım derslerinde işe yarayacaktır.

10-27-2007, 04:16 PM	#1
KoJiRo Aşmış Üye Kayit Tarihi: Dec 2006 Nerden: KoCaELi Yaş: 39 Mesajlari: 34,356 Teşekkür Etme: 21 Teşekkür Edilme: 162 Teşekkür Aldığı Konusu: 97 Üye No: 23848 Rep Power: 8726 Rep Puanı : 54700 Rep Derecesi : Cinsiyet : Erkek	Html Dersleri HTML HTML dosyası uzantısı .HTM veya .HTML olan web tasarımı için kullanılan dosyadır. Derste, bu tip dosyalar hazırlanırken Başlat/Programlar/Donatılar/Not Defteri(=NotePad) programı kullanılacaktır. 2.1.1 Yeni Bir HTML Dosyası Hazırlamak 1. Internet Explorer penceresini açın, Adres çubuğuna about:blank yazıp Enter tuşuna basın. (Yeni boş bir dosya oluşturulmuştur.) Bu sayfada farenin sağ tuşuna, boş bir zemini, tıklayın. Çıkan menüden Wiew Source/Kaynağı Görüntüle komutunu verin. (Bir Not Defteri dosyası açılacaktır.) Bu programı Dosya menüsünden Farklı Kaydet i tıklayın. Dosya adı kendi soyadınız ve uzantısı .HTM veya .HTML olacak biçimde dosyanızı, masa üstünde html adlı bir klasör açıp bu klasörün içine kopyalayın. (Hazır). HTML Kodları HTML kodları(=deyimleri,komutları)<>şeklinde ifade edilen işaretlerin arasına yazılan HTML deyimleridir. Hemen hemen her kodun başlangıcı<>ve bitişi</>şeklindedir. Bu ibareler arasında kalan işlemler ilgili komut tarafından icra edilir. Bazı deyimlerin bir veya daha fazla parametresi vardır. Bu parametrelerin hepsi seçimliktir. Yani kullanma zorunluluğu yoktur. Fakat kullanıldığı takdirde deyime zenginlik katar. Ayrıca bu parametrelerin kullanılması için belli bir sıralama yoktur. HTML kodları yazılımında büyük harf küçük harf ayrımı da yoktur,örneğin <BODY>=<body>gibi. Aşağıda verilen örneklerin bir çoğunda büyük harf kullanılmıştır. 2.1.2 Giriş <HTML></HTML> Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır. <HEAD></HEAD> Web sayfası ile ilgili temel özellikler,Sayfa Başlığı, Yazı karakterler kümesi, link özellikleri gibi,burada tanımlanır.Kısacaheadkısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır.Yeri geldikçe bu deyimin kullanımı gösterilecektir. <TITLE></TITLE> <TITLE>satırında Internet Explorer (=IE) programına sayfaya başlık verilmek istendiği işaret edilmektedir. IE<TITLE>ve</TITLE>arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler<HEAD></HEAD>deyimleri arasına yeralır. <BODY></BODY> Web sayfasında yer alacak asıl bilgiler HTML formatındaki dosyanın <BODY> deyimi belirlenen kısma yazılır. İşlem </BODY> deyimi ile biter. Bu iki deyim arasında herhangi bir metin web sayfasında ekranda aynen görülür. <!-- ... --> Dosyanın içinde bir açıklama yapmak için kullanılır. Açıklama ... ile belirlenen kısma yazılır. Örnek 1: Aşağıdaki örneği bir not defterine yazın ve dosya uzantısını htm veya html olarak belirleyin. Kod: <HTML><HEAD><TITLE>Ornek01.html</TITLE></HEAD><BODY>Merhaba Dünya!...</BODY></HTML> <BR> Bir metin yazılırken bir alt satıra geçmek için kullanılır. Bu deyim kullanılmazsa Tüm işlemler aynı satırdaymış gibi işlem görür. Yani<BR>deyimi Enter tuşunun görevini görür. <CENTER></CENTER> Bir veya daha fazla satırı sayfa içinde ortalamak için kullanılır. Örnek 2: Kod: <HTML><HEAD><TITLE>Ornek02.html</TITLE></HEAD><BODY>Gölbaşı<BR>Meslek Yüksek Okulu<!-- Bir yukarıdaki ve bir aşağıdaki satırları dikkatle inceleyin. --> GölbaşıMeslek Yüksek Okulu<BR> <CENTER>A D I Y A M A N</CENTER> </BODY></HTML> <H?></H?> Bu deyim Web sayfasında yazılacak olan metnin puntosunda değişiklik yapmak için kullanılır. ? İşareti yerine 1-5 arası bir rakam gelir. Örneğin,<H1>büyük puntolu yazı yazmak için kullanılır.Sayı değeri büyüdükçe punto küçülür.</H1>ile bitirilir. <FONT SIZE=”sayı” COLOR=”renk” FACE=”yazı tipi”></FONT> <H?></H?>deyimlerini kullanmak yerine bu deyim kullanılabilir. Parametreler: SIZE :Sayfada bulunan bir yazının punto ayarı burada yapılır. Örneğin sayı yerine +4 yazılırsa FONT deyiminin arasına yazılmış olan metnin boyutu +4 birim daha büyük görülecektir, -2 yazılırsa metin -2 birim daha küçük görülecektir. COLOR :Yazının rengi burada belirlenir. Red,Blue... gibi FACE :Yazı tipi ayarlamalarını burada yapılır. Arial, Tahoma... gibi Örnek 3: Kod: <HTML><HEAD><TITLE>Ornek03.html</TITLE></HEAD><BODY><CENTER><!-- 3 punto ile --><H3>Ahmet Bingül</H3> <!-- punto ayarı verilmemiş --> <FONT FACE=”Courier New” COLOR=”Blue”>Ahmet Bingül</FONT> <!-- punto ayarı 2 birim azaltılmış --><FONT COLOR=”Green” SIZE=”-2”>Ahmet Bingül</FONT> </CENTER></BODY></HTML> <B></B> Bu iki deyim arasına yazılan metni koyu (=Bolt) olarak sayfada gösterilmesini sağlar. <U></U> Bu iki deyim arasına yazılan metni altıçizili (=Underline) olarak sayfada gösterilmesini sağlar. <I></I> Bu iki deyim arasına yazılan metni italik (=Italic) olarak sayfada gösterilmesini sağlar. <SUP></SUP> Bu iki deyim arasına yazılan metin üstindis olarak işlem görür. <SUB></SUB> Bu iki deyim arasına yazılan metin altindis olarak işlem görür. Örnek 4: Kod: <HTML><HEAD><TITLE>Ornek04.html</TITLE></HEAD><BODY><CENTER><B>Bu metin koyu </B><BR><I>Bu metin italik</I><BR><U>Bu metin altıçizili</U><BR><B><I>Bu metin koyu ve italik</I></B><BR><BR></CENTER>a kare + ab kare = a<SUP>2</SUP> + b<SUP>2</SUP><BR>x1 + x2 = x<SUB>1</SUB> + x<SUB>2</SUB></BODY></HTML> 2.1.3 Paragraf Biçimlendirme <PRE></PRE> Web sayfasında yazılan kelimelerin arasında yalnız bir boşluk vardır. Ayrıca bir alt satıra geçerken <BR>deyiminin kullanılması gerektiği daha önce bahsedilmişti. Web sayfasında yazdığınız metnin NodPad e yazdığınız formatta görünmesi için bu deyim kullanılır. Örnek 5: Kod: <HTML><HEAD><TITLE>Ornek05.html</TITLE></HEAD><BODY>AhmetBingül<!-- Yazı tipinin varsayılan değeri Courier New dir.--><PRE> AhmetBingül </PRE></BODY></HTML> <P ALIGN=”Right\|Left\|Center”></P> Eğer uzun bir metin birden fazla paragrafla belirlenmek istenirse paragrafın başına ve sonuna bu deyimler yazılır. Parametreler: ALIGN aragrafın tipini belirler.Örneğin <P ALIGN=”Right”> olarak kullanılırsa paragraf sağa dayalı yazılır.<P ALIGN=”Left”>sola dayalı olarak ve<P ALIGN=”Center”> paragraf ortalanarak sayfada görüntülenir. Örnek 6: <HTML> <HEAD><TITLE>Ornek06.html</TITLE></HEAD> <BODY> <P ALIGN=”RIGHT”>HTML de font ayarları SIZE ile yazılan metnin punto ayarı yapılabilir. sayı, +5 olarak seçilirse yazı büyüklüğünün 5 punto kadar arttır anlamındadır.-5 seçilseydi 5 birim azalt anlamındadır. COLOR ile yazının rengi belirlenir. Renk ingilizce renk adlarından biri olmalıdır, yellow gibi. FACE ile yazı tipi belirlenebilir. Bu üç parametre seçimliktir ve sırası önemli değildir. İstenilen parametre kullanılabilir. </P> <P><B>Ahmet Bingül</B></P> <BR> <H2> <I>Gölbaşı </I><U>MYO</U> </H2> </BODY> </HTML> 2.1.4 Sayfanın Artalanını Belirleme Bu işlem<BODY>deyiminin parametreleri kullanılarak yapılır. Daha önce<BODY>deyimini kullanırken bu parametrelerden bahsedilmemişti. i) Artalan Rengini Belirleme <BODY BGCOLOR=”renk”></BODY> Renk kısmına sayfanın istenilen artalan rengi yazılır. Bu renkler ingilizce renk isimleri olmalıdır. Örneğin: Blue, Black, Green, Yellow, Red, Gray, Cyan... gibi. <BODY BGCOLOR=”#kkyymm”></BODY> Yukarıdaki kısımda kullanacağınız renk sayısı sınırlıdır. Dolayısıyla Aradığınız renk tonu yukarıdaki özellikte bulamayabilirsiniz. doğada bulunan üç ana renk kırmızı,yeşil,mavi dir. Tüm renkler bu renklerin karışımından elde edilebilir. #kkyymm ifadesini kullanarak bir k-y-m renklerinden bir karışım elde edebilirsiniz. Burada kk,yy,mm ifadeleri birer rakama karşılık gelmektedir. Örneğin #990000 tam olarak kırmızı renge karşılıktır. Renk tonu ayarları bu rakamlar aracılığı ile yapılır. Bazen bir renk tamamen kullanılacaksa, yani ilgili pozisyona 9 konacaksa, F(=Full) kullanılabilir. Örneğin; #FF15FF = #991599, #0F5FFF = #095999 gibi.(yaklaşık olarak!) Örnek 7: Kod: <HTML><HEAD><TITLE>Ornek07.html</TITLE></HEAD><BODY BGCOLOR=”#FF00FF”><!-- Artalan Mor renk olarak seçildi. --><CENTER><FONT COLOR=”WHITE” SIZE=”3”>MERHABA DUNYA!..</FONT></CENTER></BODY></HTML> ii) Artalana Resim Ekleme <BODY BACKGROUND=”file://artalana_konacak_olan_resmi_ konumu”></BODY> Artalanı belli bir renkte boyamak yerine, artalana konumu bilinen bir resim dosyası eklenebilir. Bu dosyaların uzantıları .GIF,.JPG,.JPEG veya .BMP olmalıdır. Örnek 8: Kod: <HTML><HEAD><TITLE>Ornek08.html</TITLE></HEAD><BODY BACKGROUND=”File:///a:/resimler/artalan.gif”><!-- Diskette bulunan bir resim artalan olarak görüntüleniyor... --><P ALIGN=”Center”><B>Ahmet Bingül</B></P></BODY></HTML> 2.1.5 Sayfaya Yatay Çizgi Ekleme <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE> Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır. Parametreler: WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder. SIZE : Çizginin kalınlığı burada ayarlanır. 1-5 arası değerler kullanılır. COLOR : Yatay çizginin rengi burada belirlenir. NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay çizginin gölgesi ortadan kalkar. Örnek 9: Kod: <HTML><HEAD><TITLE>Ornek09.html</TITLE></HEAD><BODY BGCOLOR=”#000000”><HR><HR WIDTH=”75%” NOSHADE><CENTER><FONT COLOR=”White” FACE=”Arial”>AHMET BINGUL...</FONT><HR COLOR=”#F0FF09” WIDTH=”200” SIZE=”2” NOSHADE><HR COLOR=”White” WIDTH=”200” SIZE=”2”></CENTER></BODY></HTML> 2.1.6 Sayfaya Resim Ekleme <IMG SRC=”file://dosya” WIDTH=”genişlik” HEIGHT=”yükseklik” ALT=”açıklama” BORDER=”sınır”> Web sayfası içinde resim dosyası yerleştirmek için bu deyim kullanılır. Parametreler: SCR : file:// dan sonra sayfaya eklenecek olan resim dosyasının konumu yazılır. WIDTH :Sayfaya eklenmiş olan resmin eninin ebatları piksel veya % olarak burada belirlenir. HEIGHT : Sayfaya eklenmiş olan resmin boyunun ebatları piksel veya % olarak burada belirlenir. ALT : Sayfaya eklenmiş olan resmin fare ile üzerine gelindiğinde, açıklama amaçlı bir yazı göstermek için kullanılır. BORDER :Sayfaya eklenmiş olan resme kenarlık vermek için kullanılır. Sınır (0-6) arası. __________________

Bugün	#n/a
Teşekkür Botu Bot Giriş Tarihi: Ocak 2005 Yaş: 0 Mesaj : 0 Üye No: 0 Rep Power: Çok	uyuzsultan (10-27-2007) bu konu için teşekkür ettiler...

10-27-2007, 04:17 PM	#2
KoJiRo Aşmış Üye Kayit Tarihi: Dec 2006 Nerden: KoCaELi Yaş: 39 Mesajlari: 34,356 Teşekkür Etme: 21 Teşekkür Edilme: 162 Teşekkür Aldığı Konusu: 97 Üye No: 23848 Rep Power: 8726 Rep Puanı : 54700 Rep Derecesi : Cinsiyet : Erkek	Örnek 10: Kod: <HTML><HEAD><TITLE>Ornek10.html</TITLE></HEAD><BODY><BR>...RESiMLERiM...<BR><!-- diskette bulunan birkaç resmin eklenmesi --><IMG SRC=”File:///a:/resimler/resim1.jpg” ALT=”Gölbaşı”><BR><IMG SRC=”File:///a:/resimler/resim2.gif” WIDTH=”60” HEIGHT=”30%”><BR><IMG SRC=”File:///a:/resimler/resim3.gif” ALT=”MYO” WIDTH=”100”BORDER=”1”></BODY></HTML> 2.1.7 Sayfaya Madde işaretleri(=İmleri) Ekleme <UL>,<OL> ve <LI> Web sayfası dahilinde liste hazırlarken bu deyimler listeleme özelliğini başlatmaktadır. Eğer listede bulunan maddelerin başına büyükçe bir noktanın konulması isteniyorsa <UL> deyimi kullanılmalıdır. Listedeki maddeleri numaralı sıralamak için <OL> değimi kullanılır. Madde olarak kullanılacak her satır <LI> deyimi ile başlayıp </LI> deyimi ile bitmelidir. <UL TYPE=”DISC\|CIRCLE\|SQUARE”></UL> Bir listede bulunan maddelerin başına büyükçe bir nokta,küçük bir çember veya içi dolu bir kare işareti koymak için kullanılır. Parametreler: TYPE :Listedeki maddelerin başına konacak olan işaret tipi burada belirlenir. Notka içinDISC, içi boş bir nokta içinCIRCLEve kare işareti içinSQUAREdeyimleri kullanılır.Bir şey belirtilmezse varsayılan değer noktadır. Örnek 11: Kod: <HTML><HEAD><TITLE>Ornek11.html</TITLE></HEAD><!-- maddelerin yanına büyük nokta koyar --><BODY BGCOLOR=”#00FFFF”><U>TÜRKİYE 1.FUTBOL LIGINDEDE ŞAMPİYON OLAN TAKIMLAR</U><UL TYPE=”disc”><LI> Galatasaray SK 14 kez </LI><LI> Fenerbahçe SK 13 kez </LI><LI> Beşiktaş JK 9 kez </LI><LI> Trabzonspor SK 6 kez </LI></UL></BODY></HTML> <OL TYPE=” A\|a\|I\|i\|1” START=”sayı”></OL> Bir listedeki maddeleri numaralı olarak sıralamak için kullanılır. Parametreler: TYPE :Listedeki maddelerin sıralanma tipleri burada belirlenir. Örneğin <OL TYPE=”a”> kullanılırsa maddeler a,b,c.. şeklinde sıralanır. TYPE belirtilmezse varsayılan değer1,2,3... START :Sıralamaya kaçıncı maddeden başlanacağı burada belirlenir. Örnek 12: Kod: <HTML><HEAD><TITLE>Ornek12.html</TITLE></HEAD><!-- Maddeler Romen rakamı ile sıralanır. --><BODY><CENTER>TÜRKİYE 1.FUTBOL LIGINDEDE ŞAMPİYON OLAN TAKIMLAR <!-- Sıralama Romen rakamı ile III(=3) başlanarak sıralanır --><OL TYPE=”I” START=”3”><LI> Galatasaray SK 14 kez </LI><LI> Fenerbahçe SK 13 kez </LI><LI> Beşiktaş JK 9 kez </LI><LI> Trabzonspor SK 6 kez </LI></OL></CENTER></BODY></HTML> 2.1.8 Sayfaya Tablo Ekleme <TABLE>,<TR> ve <TD> Bu deyim sayesinde web sayfalarında tablolar hazırlanabilir. Bu deyim<TD>ve<TR>deyimleri ile birlikte kullanılmalıdır. <TR>satır ,<TD>tablonun satırlarının içindeki işlemler için kullanılır. <TABLE BORDER=”sınır” WIDTH=”en” HEIGHT=”boy”></TABLE> <TABLE></TABLE> deyimleri tablonun başlangıcını ve bitişini gösterir. Unutmayın! bütün parametreleri kullanmak zorunda değilsiniz. Parametreler: BORDER :Tabloyu oluşturan çerçevenin kalınlığı burada belirlenir.sınır ifadesi 1-5 arası bir sayıya karşılık gelir. WIDTH :Tüm tablonun ister piksel ister % olarak genişliği. HEIGHT :Tüm tablonun ister piksel ister % olarak yüksekliği. <TR></TR> Tablonun satırlarında yapılacak olan işlemlerde bu deyim kullanılır. Her satır için farklı işlem yürütülebilir. <TD BGCOLOR=”renk” ALIGN=”LEFT\|RIGTH\|CENTER”></TD> Tablo hücrelerini düzenlemek için kullanılır.<TR></TR>deyimleri arasına yazılmalıdır. Parametreler: ALIGN :Tablo içine yazılan metnin biçimi belirlenir. Sağa dayalı, ortalı gibi. BGCOLOR :Tablo hücrelerinin artalan rengi burada belirlenir. Örnek 13: Kod: <html><head><title>Ornek13.html</title></head><body><table border="3"> <tr><td>Adı soyadı </td><td>Numarası </td><td>Notu</td></tr><tr><td>selçuk özdemir </td><td>2001 </td><td>75 </td></tr><tr><td bgcolor=”Yellow”>gülden durmuş</td><td>2054 </td><td>96 </td></tr> </table></body></html> Örnek 14: Kod: <html><head><title>Ornek14.html</title></head><body bgcolor="#000000"><center><table border="0" width="80%" height="100%"><tr><td bgcolor="#909090"><font color="#000080" size="5"><b>Web Sayfama Hoş Geldiniz..</b></font> </td></tr></center></table></body></html> 2.1.9 Sayfalara e-mail Adresi Ekleme <A HREF=”mailto:e-mail_adresi”></A> Web sayfasında e-posta (=elektronik posta) adresi eklemek için<A> ve HREFdeyimlerini kullanmak gerekir. Örnek 15: Kod: <HTML><HEAD><TITLE>Ornek15.html</TITLE></HEAD><BODY><a href=”mailto:[email protected]”>E-Mail</a></BODY></HTML> 2.1.10 Başka Web Sitelerine Geçiş <A HREF=”http://bağlantı_kurulacak_olan_sayfanın_adresi”></A> Bir kişi veya kurumun web sitesine hazırladığınız web sayfasından bağlantı kurmak için yine<A>ve HREFdeyimleri kullanılır. Örnek 16: Kod: <HTML><HEAD><TITLE>Ornek16.html</TITLE></HEAD><BODY><A HREF=”http://www.gantep.edu.tr”>Gaziantep Üniversitesi</A><BR>Gölbaşı MYO sayfasını <A HREF=”http://www.golbasimyo.8m.com”>tıklayın</A></BODY></HTML> 2.1.11 Başka HTML/Text dosyalarına Bağlantı Kurma Daha evvelden hazırlamış olduğunuz HTML dosyalarına bağlantı kurmak için yine<A>ve<HEAD><TITLE>Ornek16.html</TITLE></HEAD> <BODY> <A HREF=”http://www.gantep.edu.tr”>Gaziantep Üniversitesi</A><BR> Gölbaşı MYO sayfasını <A HREF=”http://www.golbasimyo.8m.com”>tıklayın</A> </BODY> </HTML> 2.1.11 Başka HTML/Text dosyalarına Bağlantı Kurma Daha evvelden hazırlamış olduğunuz HTML dosyalarına bağlantı kurmak için yine<A>veHREFdeyimleri kullanılır. Bağlantı kurulacak dosyanın uzantısı txt, htm veya html olabilir. Bunun için; <A HREF=”file://dosyanın_konumu”></A> file://ile belirtilen yerden sonra bağlantı kurmak istediğiniz dosyanın konumu yazılır. Örnek 17: Bu örnekten önce masaüstüneDosya1.html ve Dosya2.txtadlı dosyaları oluşturun. Kod: <HTML><HEAD><TITLE>Ornek17.html</TITLE></HEAD><BODY><A HREF=”file:///c:/windows/desktop/Dosya1.html”>Dosya1</A><BR><A HREF=”file:///c:/windows/desktop/Dosya2.txt”> Dosya2</A><!--Eğer ornek16.html ve bağlantı kurulacak dosya aynı klasörde olursa HREF deyiminden hemen sonra dosyanın adını yazmak yeterlidir.--><A HREF=”ornek15.html”>15. Örnek</A></BODY></HTML> 2.1.12 Bağlantı (Link) Özelliklerini Ayarlama i) Link Renklerinin Ayarları Yukarıdaki iki örnekte Web sayfanızda linklerin renkleri altı çizili ve mavi renktedir. Bir siteyi ziyaret ettiğinizde IE ziyaret edilen bu sitenin link rengini eflatun renginde gösterir. Kendi sayfanızda bulunan linkleri rengini ayarlayabilirsiniz. Bunun için<BODY>deyiminin aşağıda verilen özelliklerini inceleyin. <BODY LINK=”link” ALINK=”aktif_link” VLINK=”ziyaret_edilen_link”></BODY> Parametreler: LINK : Sayfada bulunan linklerin ayarlamaları burada yapılır. ALINK : Fare ile link tıklandığında link in alacağı renk burada belirlenir. VLINK :Eğer bir link daha önce ziyaret edilmişse, o sitenin ziyaret edildiğini gösteren renk ayarı burada yapılır. Örnek 18: Kod: <HTML><HEAD><TITLE>Ornek18.html</TITLE></HEAD><BODY BGCOLOR=”Black” LINK=”Yellow” VLINK=”White” ALINK=”Gray”><BR><A HREF=”http://www.metu.edu.tr”>ODTU</A><BR><A HREF=”http://www.microsoft.com”>Microsoft</A><BR><A HREF=”mailto:[email protected]”>E-Mail</A></BODY></HTML> ii) Linklerin Altı Çizili Özelliğini Kaldıra Sayfanızda bulunan linklerin altı çizili özelliğini kaldırma işlemi<HEAD></HEAD>deyimleri arasına aşağıda verilen kodları yazmalısınız. Ayrıca bu deyimlerle altı çizili özelliği fare linkin üzerine geldiğinde, link altı çizili, üstü çizili veya altı-üstü çizili duruma getirilebilir. :-):-):-):-):-):-):-):-):-) A:link { color : renk; text-decoration :none\|underline } A:active { color : renk; text-decoration :none\|underline } A:visited { color : renk; text-decoration :none\|underline } A:hover { color : renk; text-decoration :none\|underline\|overline } </style> Parametreler: link :Sayfada bulunan bir link renk ve durumu active :Link tıklandığında alacağı renk ve durum visited :Ziyaret edilmiş bir linkin alacağı renk ve durum hover :Fare ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin fare linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında underline seçilmelidir. Üstü çizili olması içinoverlineseçilmelidir. Hem altı hem üstü çizili olması için iki tane hover kullanılmalıdır. color :Linklerin, ziyaret edilen linklerin.. renk özelliğinin ayarlanması burada yapılır. text-decoration :Bu kısımda linkin tipi belirlenir. Fare linkin üzerine geldiğinde, linkin alacağı durum burada ayarlanır. none seçilirse ilgili linkin altı çizili özelliği ortadan kalkar.underline seçilirse ilgili linkin altı çizili özelliği devam eder. Örnek 19: Kod: <html><head>:-):-):-):-):-):-):-):-):-)A:link { color : Yellow; text-decoration :none }A:active { color : Yellow; text-decoration :none }A:visited { color : White; text-decoration :none }A:hover { color : Yellow; text-decoration :underline}A:hover { color : Yellow; text-decoration verline }</style><title>Ornek19.html</title></head><body bgcolor=”#000080”><a href=”http://www.gantep.edu.tr”>Gaziantep Üniversitesi</a></body></html> ii) Aynı Sayfa İçinde Bağlantı Kurma Web sayfalarında birbirine bağlı konular aynı sayfa içinde yer alabilir. Bu konular başka sayfalara geçmeden aynı sayfa içinde birbirleri için link oluşturulabilir. Bunun için yine <A> deyimi kullanılır. Çok uzun metinlerde kullanılması kolaylık sağlar. <A HREF=”#isim”></A> Aynı sayfa içinde link yapılırken link burada bir adres veya dosya değildir. Sadece fare ile link e tıklandığında aynı sayfa içinde, link bizi başka bir yere yönlendirecektir(=gönderecektir). Bu işlem sayfa içinde gidilecek olan yere bir isim vermekle yapılır. <A NAME=”isim”></A> Link e tıklandığında sayfada gidilecek yer burasıdır. Dikkat linkdeki isimle gideceği yer ismi aynı olmalıdır. Aksi takdirde bağlantı kurulamaz. __________________

10-27-2007, 04:17 PM	#3
KoJiRo Aşmış Üye Kayit Tarihi: Dec 2006 Nerden: KoCaELi Yaş: 39 Mesajlari: 34,356 Teşekkür Etme: 21 Teşekkür Edilme: 162 Teşekkür Aldığı Konusu: 97 Üye No: 23848 Rep Power: 8726 Rep Puanı : 54700 Rep Derecesi : Cinsiyet : Erkek	Örnek 20: Kod: <HTML><HEAD><TITLE>Ornek20.html</TITLE></HEAD><BODY><a name="BAS">İÇİNDEKİLER</a><br><br><br><br><br><ul> <li><a href="#Bolum1">Bolum1</a><li><a href="#Bolum2">Bolum2</a><li><a href="#Bolum3">Bolum3</a></ul><br><br><br><br><br><br><br><br><br><br><br><br ><hr><a name="Bolum1">Burası Bolum1</a><a href="#BAS">Başa Dön</a><hr><br><br><a name=”Bolum2”>Burası Bolum2</a><a href="#BAS">Başa Dön</a><hr><br><br><a name=”Bolum3”>Burası Bolum3</a><a href="#BAS”>Başa Dön</a></BODY></HTML> 2.1.13 Sayfaya Çerçeve(Frame) Özelliği Kazandırma Web sayfalarının bir çoğu ikiye bazen üçe bölünmüş olarak görülür.FRAMESETdeyimi aynı IE penceresinde birden fazla IE penceresi ile çalışma imkanı verir. Bu şekilde daha aktif bir Web sayfasıhazırlanabilir. Ana sayfanızı 2 veya 3 e bölmek içinBODYdeyimi yerineFRAMESET deyimi kullanılmalıdır. <FRAMESET ROWS\|COLS=”?,” BORDER=”?”></FRAMESET> Aynı pencerede birden çok sayfayı kontrol etmek için kullanılır. FRAMESET deyimi kullandığınızda BODY deyimi kullanılmaz. Parametreler: ROWS : Web sayfasını yatay olarak bölmek için kullanılır. ROWS=”100,” seçilirse yukarıdan itibaren 100 piksel ayrılır ve yatay bir çizgi ile sayfa ikiye bölünür. COLS :Web sayfasını dikey olarak bölmek için kullanılır. BORDER :Sayfa bölündüğünde ortaya çıkan çizginin kalınlığı burada ayarlanır. ? yerine 0-5 arası bir rakam gelir. <FRAME SCR=”dosyaadı” NAME=”çerçeve_ismi” SCROLLING=”YES\|NO\|AUTO” NORESIZE> <FRAMESET></FRAMESET> deyimleri arasında belirlenen çerçevelerin formatları bu deyimle yapılır. Parametreler: SRC :Ana sayfa açıldığında daha önce belirlenmiş yere bağlantı kurulacak olan dosyanın adı. NAME :İlgili çerçevenin ismi. SCROLLING :Ana sayfa açıldığında sayfalar pencereye sığması veya sığmaması ayarı burada yapılır. NORESIZE : Ana sayfadaki diğer sayfaları bölen pencereleri ayıran çizginin üstüne gelindiğinde bu çizginin fare ile ebatlarının değiştirildiği görülür. Kullanıcıya bu izni vermek istemiyorsanız bu deyimi de eklemelisiniz. Örnek 21: Bu örnekten önce masaüstüne sayfa1.html, sayfa2.html ve sayfa3.html adlı dosyaları oluşturun. Bu örneği de masaüstüne index.html olarak kaydedin. Yada bu üç dosya aynı klasöre kaydedin. Kod: <HTML><HEAD><TITLE>Ornek21.html,index1.html</TITLE></HEAD><Frameset Cols="150,"><!-- İlk yazılan Frame deyimi sol olarak kabul edilir. --> <Frame Src="sayfa1.html" name="Sol" Noresize><Frame Src="sayfa2.html" name="Sag"></Frameset></HTML> Örnek 22 : Bir sayfanın 3 e bölünmesi Kod: <HTML><HEAD><TITLE>Ornek21.html</TITLE></HEAD><FRAMESET COLS="100,"><FRAME SRC="sayfa1.html" NAME="Sol"><FRAMESET ROWS="150,"><FRAME SRC="sayfa2.html" NAME="SagUst"><FRAME SRC="sayfa3.html" NAME="SagAlt"></FRAMESET> </FRAMESET> </HTML> Bir Çerçeveden Diğerine Bağlantı <A HREF=”URL” TARGET=”Hedef_Çerçeve”></A> Bir çok web sayfasında sol çerçevede bulunan bir linkin etkisini sağ tarafta görülür. Bu özelliği kazandırmak için<A>ve HREF in yanındaTARGETparametresi de kullanılmalıdır. Parametreler: TARGET : Bağlantı etkisinin görüleceği çerçevenin ismi burada yazılır. TARGET kullanılmazsa link aynı pencerede açılacaktır. Fakat Hedef_Çerçeve yerine mevcut çerçeve isimlerinden başka bir isim yazılırsa link, için başka bir IE penceresi açılır. Örnek 23: Burada sayfa1.html, sayfa2.html,sayfa3.html ve index.html dosyalarının içerikleri de belirlenmiştir. Bu 4 dosyayı aynı klasörün içine kopyalayın. Böylece link yapılırken dos- ya yollarını belirtmek zorunda kalmayacaksınız. Kod: <HTML><HEAD><TITLE>Ornek23.html,index2.html</TITLE></HEAD><Frameset Cols="150,"><Frame Src="sayfa1.htm" name="Sol" Noresize><Frame Src="sayfa2.html" name="Sag"></Frameset></HTML> <HTML><HEAD><TITLE>sayfa1.html</TITLE></HEAD><BODY>SAYFA1<A HREF=”Yahoo!” TARGET=”disari”>yahoo</A><A HREF=”sayfa3.html” TARGET=”Sag”>Sayfa3</A><A HREF=”http://www.altavista.com”>altavista</A></BODY></HTML> <HTML><HEAD><TITLE>sayfa2.html</TITLE></HEAD><BODY><P ALIGN=”CENTER”>SAYFA2</P><!-- Dikkat Target belirtilmemiş --> <A HREF=”sayfa3.html”>Sayfa3</A></BODY></HTML> <HTML><HEAD><TITLE>sayfa3.html</TITLE></HEAD><BODY><P ALIGN=”CENTER”>SAYFA3</P><A HREF=”sayfa2.html”>Sayfa2</A></BODY></HTML> HTML KODLARI ÖZETİ URL : Herhangi bir bağlantı ? : Bir sayı * : Karakter topluluğu #$$$$$$ : #kkyymm GENEL (Tüm HTML dökümanları bu deyimlere sahip olmalıdır) Döküman Tipi <HTML></HTML> (Dosya başı ve sonunda olmalı) Sayfa Başlığı <TITLE></TITLE> (En başta olmalı) Başlık <HEAD></HEAD> (Tanımlayıcı özellikler) Gövde <BODY></BODY> (Sayfanın tüm içeriği burada yazılmalı) YAZI Koyu <B></B> Italik <I></I> Altıçizili <U></U> Altindis <SUB></SUB> Üstindis <SUP></SUP> Text Formatı <PRE></PRE> Ortalı <CENTER></CENTER> Yazı Boyutu <FONT SIZE=?></FONT> (1-7 arası) Yazı Rengi <FONT COLOR="#$$$$$$"></FONT> Yazı Tipi <FONT FACE=""></FONT> Açıklama <!-- --> LINKLER VE RESIMLER Link <A HREF="URL"></A> Aynı Sayfa Link <A HREF="#"></A> Hedefe Link <A HREF="URL" TARGET=""></A> Tanımlı Hedef <A NAME=""></A> Display Image <IMG SRC="URL"> Alt Yazı <IMG SRC="URL" ALT="*"> Ölçüler <IMG SRC="URL" WIDTH=”?” HEIGHT=”?”> (Piksel olarak) Sınır <IMG SRC="URL" BORDER=”?”> (Piksel olarak) SAYFA BÖLÜCÜLER Paragraf <P></P> Hizalama <P ALIGN=LEFT\|CENTER\|RIGHT></P> Alt Satıra Geçme <BR> (Tek bir Return işlemi) Yatay çizgi <HR> Hizalama <HR ALIGN=LEFT\|RIGHT\|CENTER> Boy <HR SIZE=?> (Piksel olarak) En <HR WIDTH=?> (Piksel olarak) % olarak En <HR WIDTH="?%"> (Sayfadaki bir satırın % si olarak) Gölgesiz <HR NOSHADE> LİSTELEME Madde imli Liste <UL><LI></UL> (Listedeki her maddeden önce <LI>) İşaretli <UL TYPE=DISC\|CIRCLE\|SQUARE> Numaralı Liste <OL><LI></OL> Numaralama Tipi <OL TYPE=A\|a\|I\|i\|1> Başlangiç Numarası<OL START=?> ARTALAN VE LINK RENKLERİ Artalan Rengi <BODY BGCOLOR="#$$$$$$”> ( kırmızı/yeşil/mavi karışımı) Link Rengi <BODY LINK="#$$$$$$"> Ziyaret Edilmiş <BODY VLINK="#$$$$$$"> Aktif Link <BODY ALINK="#$$$$$$"> TABLOLAR Tablo Tanımı <TABLE></TABLE> Tablo Sınırı <TABLE BORDER=?></TABLE> (0-6 arası bir değer) Tablo Eni <TABLE WIDTH=?> (Piksel olarak) Tablo Eni <TABLE WIDTH=”?%”> (Sayfanın % si olarak) Tablo Satırı <TR></TR> Tablo Hücresi <TD></TD> (Tablo satırları arasında görünmeli) Hücre Hizalama <TD ALIGN=LEFT\|RIGHT\|CENTER> Hücre Eni <TD WIDTH=?> (Piksel olarak) Hücre Eni <TD WIDTH="?%"> (Tablonun Yüzdesi) Hücre Rengi <TD BGCOLOR="#$$$$$$"> ÇERÇEVELER Çerçeve Oluşturma <FRAMESET></FRAMESET> (<BODY> nin yerine) Satır Yüksekliği <FRAMESET ROWS=”?,”></FRAMESET> Kolon Genişliği <FRAMESET COLS=”?,*”></FRAMESET> Sınır Büyüklüğü <FRAMESET BORDER=”?”> Çerçeve Dökümanı <FRAME> (Bağımsız çerçevelerin içerikleri) Bağlantı Dosyası <FRAME SRC="URL"> Hareket Çubuğu <FRAME SCROLLING="YES\|NO\|AUTO"> Ölçülendirilemez <FRAME NORESIZE> __________________

10-27-2007, 04:25 PM	#4
uyuzsultan ÇaKaL Üye Kayit Tarihi: Aug 2007 Yaş: 46 Mesajlari: 1,031 Teşekkür Etme: 61 Teşekkür Edilme: 46 Teşekkür Aldığı Konusu: 23 Üye No: 43997 Rep Power: 0 Rep Puanı : -1404 Rep Derecesi : Cinsiyet : Bayan	Bu bilgiler için teşekkürler Web tasarım derslerinde işe yarayacaktır. __________________ *uyuzsultan*:clover: єηтєяєѕαη σℓαуℓαя İÇİNİZİ DÖKÜN SERBEST KÜRSÜ

Bu Konudaki Online üyeler: 1 (Üye Sayisi : 0 Ziyaretçi Sayisi : 1)