Html Nedir? Html örnekleri.. Html Kodları Ve Tüm Gerekli Bilgi Ve özelikleri
#1
Tablolar

<table>...</table>Tablolar sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.
İşte tablolar
SonbaharKışİlkbaharYazEylülAralıkMartHaziranEkimOc akNisanTemmuzKasımŞubatMayısAğustos


Tabloyu renklendirelim
SonbaharKışİlkbaharYazEylülAralıkMartHaziranEkimOcakNisanTemmuzKasımŞubatMayısAğustos


Başka bir örnek (farklara dikkat ediniz)
ÖLÇÜLER BoyKilo1.Hakkı1.77802.Mustafa1.82753.Osman1.7583





Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:
Tablonun alt yazısı(caption)Tablo Başlığı (thead)Sütun Başlığı
#1Sütun Başlığı
#2Sütun Başlığı
#3Sütun Başlığı
#4hücrehücrehücrehücrehücrehücrehücrehücrehücrehüc re

Bu kadar örnek yeterli şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz.
hücre<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>hücre1hücre2<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2hücre3hücre4<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>


Tabloda başlık ve gövde

Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür.
Sütun başlıklarına gelince her bir başlık <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.
Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.
Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;

Tablo Başlığı (thead)alt-yazı (caption)1.Sütun2.Sütun3.Sütunhücre1hücre2hücre3hü cre4hücre5hücre6hücre7hücre8hücre9
<table border="1">
<thead>Tablo Başlığı (thead)</thead>
<caption align="bottom">
alt-yazı (caption)
<caption>
<tr>
<th>1.Sütun</th>
<th>2.Sütun</th>
<th>3.Sütun</th>
</tr>
<tbody>
<tr>
<td>hücre1</td>
<td>hücre2</td>
<td>hücre3</td>
</tr>
<tr>
<td>hücre4</td>
<td>hücre5</td>
<td>hücre6</td>
</tr>
<tr>
<td>hücre7</td>
<td>hücre8</td>
<td>hücre9</td>
</tr>
</tbody>
</table>

Parametreler

<table border="..." cellpadding="..." cellspacing="..." align="..." width="..." height="...">border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.
hücre<table border="0">
<tr>
<td>hücre</td>
</tr>
</table>hücre<table border="2">
<tr>
<td>hücre</td>
</tr>
</table>hücre<table border="4">
<tr>
<td>hücre</td>
</tr>
</table>hücre<table border="6">
<tr>
<td>hücre</td>
</tr>
</table>


cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre içinde bulunan unsurun (metin/grafik) hücre çerçevesine bitişik olmasını sağlar.


hücre<table border="1" cellpadding="0">
<tr>
<td>hücre</td>
</tr>
</table>hücre<table border="1" cellpadding="5">
<tr>
<td>hücre</td>
</tr>
</table>hücre<table border="1" cellpadding="10">
<tr>
<td>hücre</td>
</tr>
</table>


cellspacing parametresi hücreler arası marjı belirler.


hücre1hücre2<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" cellspacing="10">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>


align parametresi tabloyu düşey hizalamada kullanılır align=left sola align=right sağa dayalı yapar align=center ortalar


hücre1hücre2<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" align="center">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" align="right">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>


width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz.
hücre1hücre2<table border="1" width="150" height="200">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" width="80" height="80">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" width="5" height="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

<td> etiketi için parametreler


<td bgcolor="..." background="..." width="..." height="..." align="..." valign="...">bgcolor parametresi hücreyi renklendirmede kullanılır.


hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"><tr> <td bgcolor="#ff0000">hücre1</td></tr><tr> <td bgcolor="#00ff00">hücre2</td></tr><tr> <td bgcolor="#0000ff">hücre3</td></tr><tr> <td bgcolor="#ffff00">hücre4</td></tr></table>


background parametresi ile hücreye grafik-artalan yerleştirebiliriz.


hücre1hücre2hücre3hücre4<table border="1" cellpadding="9"><tr> <td background="resim1.jpg">hücre1</td></tr><tr> <td background="resim2.jpg">hücre2</td></tr><tr> <td background="resim3.jpg">hücre3</td></tr><tr> <td background="resim4.jpg">hücre4</td></tr></table>


width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır.

hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"> <tr><td width=120 height=20>hücre1</td></tr> <tr><td width=120 height=40>hücre2</td></tr> <tr><td width=120 height=60>hücre3</td></tr> <tr><td width=120 height=80>hücre4</td></tr></table>
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"> <tr> <td width=40 height=30>hücre1</td> <td width=70 height=30>hücre2</td> <td width=90 height=30>hücre3</td> <td width=120 height=30>hücre4</td> </tr></table>


align parametresi hücre içinde yatay hizalama yapar.


hücre1hücre2hücre3<table border="1" cellpadding="7"><tr><td width="100" align="left">hücre1</td></tr><tr><td width="100" align="center">hücre2</td></tr><tr><td width="100" align="right">hücre3</td></tr></table>


valign parametresi hücre içinde düşey hizalama yapar.


hücre1hücre2hücre3<table border="1" cellpadding="7"><tr> <td height="80" valign="top">hücre1</td></tr><tr> <td height="80" valign="middle">hücre2</td></tr><tr> <td height="80" valign="bottom">hücre3</td></tr></table>

Hücreleri Birleştirme

<td colspan=".." rowspan="..">Aynı satırdaki hücreleri birleştirmek için colspan aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.
ABCDEFGHIJKL<table border="1" cellpadding="12"> <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> <tr><td>E</td><td>F</td><td>G</td><td>H</td></tr> <tr><td>I</td><td>J</td><td>K</td><td>L</td></tr></table>

Yukarıdaki tabloda;
A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td> <td>G</td> etiketlerini siliyoruz.
ACDEHIJKL<table border="1" cellpadding="12"> <tr><td colspan="2">A</td><td>C</td><td>D</td></tr> <tr><td colspan="3">E</td><td>H</td></tr> <tr><td>I</td><td>J</td><td>K</td><td>L</td></tr></table>

Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td>  <td>K</td> etiketlerini siliyoruz.
ABCDEFHJL<table border="1" cellpadding="12"> <tr><td>A</td><td>B</td> <td rowspan="3">C</td><td>D</td></tr> <tr><td rowspan="2">E</td><td>F</td><td>H</td></tr> <tr><td>J</td><td>L</td></tr></table>
 vbrep_register("44046")  

Çerçeveler

Çerçeveler (frame) HTML'e sonradan eklenmiştir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler. (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekliyor). Bunun yanında çerçeve kullanımına karşı düşmanca (!) tavır sergileyen tasarımcılar da hatırı sayılır miktarda ve hala birçok site ziyaretçisine çerçeveli ve çerçevesiz sunum seçeneği sunuyor.
Çerçeveler sayfanın bazı kısımlarını sabit bırakırken diğer kısımlarını değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir. Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir.
Aşağıdaki örneği inceleyelim:






Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor (yani ana dosya). Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini bunlardan birisinde htm1.htm dosyasını diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.
<body bgcolor="..."> etiketi ile htm1.htm dosyasının artalan rengi kırmızı htm2.htm dosyasının artalanı ise mavi yapılmış kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi.
Şimdi bu çerçeveyi birlikte oluşturalım:
frame.htm dosyası:
<html>

<head>
<title>Çerçeveler</title>
</head>

<frameset cols="**">
<frame name="sol" src="htm1.htm">
<frame name="sag" src="htm2.htm">
</frameset>

<noframes>
<body>
</body>
</noframes>

</html>
htm1.htm dosyası:
<html>
<head></head>
<body bgcolor="red">
<font size="7" color="#ffffff">htm1.htm</font>
</body>
</html>


htm2.htm dosyası:
<html>
<head></head>
<body bgcolor="blue">
<font size="7" color="#ffffff">htm2.htm</font>
</body>
</html>

<frameset>...</frameset>

Çerçeve oluşturmada kullandığımız etiket: frameset cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.



cols (sütunlar)



rows (satırlar)

cols="**" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz buraya örneğin cols="140500" gibi sayı yazılabilir cols="25%75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır cols="140*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor.
Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki çerçeve aç anlamındadır 3 değer 3 çerçeve açar.
frame name="..." src="..." etiketi çerçevelere bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor. Resimler bahsinde belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanıyoruz.
Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik işte noframes kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz.


FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;

frameborder="..." (yes no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.

border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler



FRAME etiketi ile kullanabileceğimiz parametreler;

marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

scrolling=".." (yes no auto) Kaydırma çubuklarının durumunu belirler.

noresize Pencere boyutlarının sabit olmasını sağlar.


Daha karmaşık Çerçeveler

Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok fakat aynı görünümü elde etmek mümkün.
Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip etiketleri sonlandırıyoruz.
Örnekleri ve yanlarındaki kodları inceleyip farklı çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın


<frameset rows="**" cols="**">
<frame name="a" src="htm1.htm"> <frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm"> <frame name="d" src="htm4.htm">
</frameset>

<frameset cols="150*">
<frame name="a" src="htm1.htm">
<frameset rows="100*">
<frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm">
</frameset>
</frameset>

<frameset rows="50%50%">
<frameset cols="**">
<frame name="a" src="htm1.htm"> <frame name="b" src="htm2.htm">
</frameset>
<frame name="c" src="htm3.htm">
</frameset>

<frameset rows="***">
<frame name="a" src="htm1.htm">
<frameset cols="**">
<frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm">
</frameset>
<frame name="d" src="htm4.htm">
</frameset>

<frameset cols="**">
<frameset rows="**">
<frame name="a" src="htm1.htm"> <frame name="b" src="htm2.htm">
</frameset>
<frame name="c" src="htm3.htm">
</frameset>

Resimler


Renkleri de öğrendikten sonra geldik en heyecanlı konuların bir diğerine evet bu konuda sayfamıza ve artalana nasıl resim ekleyebileceğimizi öğreneceğiz. Bu konu aslında tablolar ve bağlantılarla da alakalı bu yüzden burada genel olarak işleyeceğiz. Resim seçiminde seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında tabi) Resim ekleme işi gayet kolay. Yapmamız gereken browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibaret. Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz sayfanızın hayrına olacaktır. Kullanacağımız etiket şu şekilde olacak;
<img src="resmin bulunduğu yer ve adı" width="x" height="y">Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz.


Dikkat Edilecek Hususlar


Örneğin bu sevimli kediyi sayfamıza ekleyelim peki işte size bir soru: bu resmin nerede olduğunu browser'a nasıl izah ederiz?
Diyelim ki resmimizin adı kedi.gif eni 65 boyu da 91 piksel eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok kod aynen şu şekilde olmalı:

<img src="kedi.gif" width="65" height="91">Fakat siz diyorsunuz ki; benim sayfamda kullanmak istediğim bir sürü resmim var ve bunları resim adlı bir alt klasörde topladım. Yani html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanacağız;
<img src="resim/kedi.gif" width="65" height="91">

Bölü işaretinin yönüne dikkat edin. Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölü işaretinin tersi yani normal bölü işareti. HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır. Ziyaret ettiğiniz Internet adreslerini hatırlayın.

Peki ya şu şekilde olsaydı; resim klasörünün altında başka bir klasör var ve kedi.gif dosyası o klasörde diyelim ki klasörün adı da gifler olsun. Bu durumda kedi.gif'in harddiskimizdeki yolu da c:\html_ders\resim\gifler\kedi.gif şeklinde olacak. Etiket tahmin ettiğiniz gibi şu şekilde olmalı:
<img src="resim/gifler/kedi.gif" width="65" height="91">Bu şekilde istediğimiz kadar alt dizine ulaşabiliriz. Fakat üst dizinlere nasıl ulaşacağız? O da kolay. Bu seferde html dosyamızı bir klasör oluşturup o klasörün içine koyalım mesela klasörün adı da html olsun -umarım karıştırmazsınız. Kedicik bulunduğu gifler klasöründe kalsın. Son durum şöyle olacak;

c:\html_ders\html\deneme.htm yolunda html dökümanımız
c:\html_ders\resim\gifler\kedi.gif yolunda resim var. İzlememiz gereken yol şöyle: browser deneme.htm dosyasının bulunduğu klasörü kök dizin kabul etti. Önce bir üst dizine çıkmalıyız ardından resim dizinine oradan gifler dizinine girmeliyiz. Üst dizine çıkmayı ../ ifadesiyle belirtiyoruz.
<img src="../resim/gifler/kedi.gif" width="65" height="91">Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar üst dizine geçebiliriz. Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.


Resmi Hizalama

Resim artık sayfamızda fakat daima hep solda duruyor.
Bir hizalama (align) komutuyla resmi sağa (right) ya da sola (left) alabiliriz.
-iyi ama resim zaten solda değil miydi??
Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır.
<img src="resim.jpg" width="25" height="25" align="right">

Artalana Resim Koyalım

Artalanı renklendirmeyi öğrenmiştik: <body bgcolor="...."> ifadesiyle bu işi kolayca yapıyorduk. Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir.
<body bgcolor="..." background="...">Kullandığımız resme yakın tonda bir rengi bgcolor ifadesinin karşısına yazmayı ihmal etmemek yine bizim hayrımızadır. Bunun yanında background ifadesinin karşısına yukarıda anlattığımız kurallar çerçevesinde istediğimiz resmi koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok. Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir.


Resme alternatif metin eklemek

Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa resim yerine alternatif açıklama görüntülenecektir.
alt="..." parametresiyle açıklama ekliyoruz bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir.
<img src="resim.gif" alt="kum saati">

 

Son bir örnekle bu konuyu bitirelim






Gökyüzünü artalana koyalım dünyayı da ortalanacak şekilde sayfaya yerleştirelim.
<body bgcolor="#666dfe" background="bulut.jpg">
<center>
<img src="world.gif" width="360" height="170" alt="harita">
</center>
Eğer hala yapmadıysanız resimlere sağ tıklayıp (Resmi farklı kaydet../Save image as..) seçeneğiyle bu resimleri harddiskinize kaydedebilirsiniz.
Şu ana kadar öğrendiğimiz komutlarla yerleştirme işlemini ancak bu kadar yapabiliyoruz. Daha sonraki konularda tabloları kullanarak istediğimiz düzeni sağlamayı öğreneceğiz.



  Alıntı
Bu mesajı beğenenler:
#2
Renkler

Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik. Şimdi daha ayıntılı olarak ve bu işin mantığına inerek yeniden ele alacağız. Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz.
Bu bölümde öğreneceğimiz konular:

Renk kodları
Artalanı renklendirmek
Renk Kodları


Fontlar konusunda metnin rengini belirlerken <font color="..."> etiketini kullanmıştık ve color komutunun karşısına rengin ingilizce karşılığını yazabiliriz demiştik. Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım. </B>Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır. Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılı (hexadecimal) sayı sistemleridir.


İkili sayı sistemi nasıl olur? Bildiğiniz gibi günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam vardır. Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir nasıl mı? İşte burada işin içine matematik giriyor. Kısa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye bölünür ve kalanlar soldan sağa doğru yanyana yazılır.

Gelelim asıl konumuz olan 16'lık sayı sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar;
0 1 2 3 4 5 6 7 8 9 A B C D E F
[10'un karşılığı A ... 15'in karşılığı F'dir.]


Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-bluekırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum 00 minimum karışımı verir).
Buna göre; #000000 siyah #FF0000 kırmızı #00FF00 yeşil #0000FF mavi #FFFFFF beyaz'dır. Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.

#000000=black(siyah)
#000080=navy(lacivert)
#0000FF=blue(mavi)
#008000=green(yeşil)
#008080=teal(koyu yeşil)
#00FF00=lime(parlak yeşil)
#00FFFF=aqua(turkuaz)
#800000=maroon(vişne çürüğü)
#800080=purple(mor)
#808000=olive(zeytuni yeşil)
#808080=gray(gri)
#C0C0C0=silver(gümüşi gri)
#FF0000=red(kırmızı)
#FF00FF=fuchsia(parlak pembe)
#FFFF00=yellow(sarı)
#FFFFFF=white(beyaz)
Artalanı Renklendirmek

Bu renklerle yalnızca metinleri değil sayfamızın artalananını da renklendirebiliriz.
Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz.

Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !

<body bgcolor="#ffcc00"> <font face="verdana" size="4" color="#ffffff"> <ol><h2><u>Günler</u></h2> <font color="#0000ff"> <li>Pazartesi <li>Salı <li>Çarşamba <li>Perşembe <li>Cuma </font> <font color="#ff0000"> <li>Cumartesi <li>Pazar </font> </ol> </font></body>



Listeler

HTML bize üç tip liste hazırlama imkanı veriyor.
Bunlar;

Sıralı listeler (ordered list)
Sırasız listeler (unordered list)
Tanımlama listeleri (definition list)
Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır.


Sıralı Listeler

Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Liste maddelerinin başına ise <li> (list item) etiketini getiriyoruz. Bu etikette tıpkı <br> etiketi gibi sonlandırılmıyor. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.
Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü vereceğiz. Kodun geri kalan kısımlarını kendi sayfanızda tam olarak yazmayı unutmayın.
<ol type="1"> <li>Kimya <ol type="a"> <li>İnorganik <li>Analitik </ol> <li>Fizik <ol type="a"> <li>Dinamik <li>Statik </ol> <li>Matematik <ol type="a"> <li>Sayılar <li>Diğer <ol type="i"> <li>Türev <li>İntegral </ol> </ol></ol>
Kimya
Organik
İnorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
İntegral
Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar harfler (küçük/büyük) ve romen rakamları (iiiiii gibi)


Sırasız Listeler

Bu tip listelerde de mantık aynı. Fark; listeleme yaparken maddelerin başına harf rakam gibi unsurlar yerine küçük yuvarlaklar kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz liste maddeleri için kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire) circle (içi boş daire) square (içi dolu kare). Compact parametresi sırasız listelerde de kullanılabiliyor.
<ul type="disc"> <li>Kimya <ul type="square"> <li>İnorganik <li>Analitik </ul> <li>Fizik <ul type="square"> <li>Dinamik <li>Statik </ul> <li>Matematik <ul type="square"> <li>Sayılar <li>Diğer <ul type="circle"> <li>Türev <li>İntegral </ul> </ul></ul>
Kimya
Organik
İnorganik
Analitik
Fizik
Dinamik
Statik
Matematik
Sayılar
Diğer
Türev
İntegral
Tanımlama Listeleri

Bu listelemede kullanılan etiketler şöyle; <dl>...</dl>  <dd>  <dt> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz. Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.
Hemen örneğimize geçelim
<font face="verdana" size="4" color="red">Neler öğrendik?</font>

<dl compact>

<dt><font size="3" color="blue">HTML nedir?</font>

<dd><font size="2" color="black">HTML (HyperText MarkupLanguage-Hareketli-Metin İşaretleme Dili) basitçe browserlarla görebileceğimiz internet dökümanları oluşturmaya yarayanbir çeşit dildir...</font>
<dt><font size="3" color="blue">HTML'de Temel Unsurlar</font>

<dd><font size="2" color="black">Bu dilde binary veyahexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanıoluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editörbulunuyor. Birisi metin tabanlı kod yazmayı gerektiren...</font>
<dt><font size="3" color="blue">Listeler</font>

<dd><font size="2" color="black">Sıralı listeler rakamveya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sırasızlisteler rakam/harf yerine madde imleri koyarak listeoluşturmamızı sağlar...</font>



Fontlar

Font etiketinin kullanımı;
<font face="..." size="..." color="...">...</font>
face = yazıtipinin adı (arial tahoma verdana ...)
size = yazının büyüklüğü (1-7 arası)
color = yazının rengi (red green gibi renklerin ingilizce karşılığı yada RGB renk değeri)
Bunlara font etiketinin parametreleri diyoruz.
<font> etiketinin yanısıra öğreneceğimiz bir diğer etiket <br> etiketi. Önce bu etiketin kullanımını göreceğiz. <br> etiketi bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir. Bu yüzden metinleri bölmek yani ikinci satıra atmak için <br> etiketini kullanıyoruz. İstisnai etiketlerden birisi bu: <br> etiketi sonlandırılmıyor.
Buna bir örnek verelim;
<html><head> <title>BR etiketi</title></head><body> pazartesi
salı
çarşamba
<br>ocak<br> şubat<br> mart<br> nisan
</body></html>




Yukarıdaki örneğimizde "pazartesi salı ve çarşamba"yı yazarken Enter tuşu ile bir alt satıra geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını tek bir satıra yazdığımız halde bu kez browser aradaki <br> etiketine bakarak bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere metni bir alt satıra geçirmek için <br> etiketini kullanıyoruz. Bu etiketin bir özelliği de sonlandırılmaması.
Şimdi font etiketinin kullanımını bir örnekle inceleyelim. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz. Eğer benim örnekte kullandığım yazıtipleri (tahoma comic sans ms verdana arial) sisteminizde yüklü değilse bunun yerine sizde yüklü olan istediğiniz bir fontu kullanabilirsiniz.

<html><head><title>Renkler ve Mevsimler</title></head><body><font face="tahoma" size="5" color="#008000">İlkbahar</font><br><font face="verdana" size="5" color="#ff0000">Yaz</font><br><font face="arial" size="5" color="#ffff00">Sonbahar</font><br><font face="comic sans ms" size="5" color="#0000ff">Kış</font><br></body></html>



Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık. Aslında bunun bir yolu daha var; o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi).
Bu konuyu renkler bölümünde ayrıntılı olarak inceleyeceğiz. Burada yalnız bir kaç örnekle yetinelim:
Kırmızı-red
Mavi-blue
Siyah-black
Sarı-yellow
Lacivert-navy
Yeşil-green

Metin Biçimleme

Bu bölümde öğreneceğimiz etiketler:
Başlık etiketleri: <h1>...<h6>
Paragraf etiketi: <p>...</p>
Ortalama: <center>...</center>
Diğer etiketler: <b>...</b><i>...</i><u>...</u>
HTML'de metin stillerini üç şekilde belirleyebiliriz:
Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi) biçimlendirme denir.
Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)
HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.

Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar. Burada konumuz birinci metoda göre biçimlendirmeyi öğrenmek.
Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları yazıyoruz;
<html><head> <title>Başlık Etiketleri</title></head><body> <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6></body></html>

 


Sayfanın işleyişine baktığımızda önce her zaman yapmamız gerektiği gibi <html> <head> <title> etiketlerini yerleştirdik. Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.
Şimdi de kendiniz <h1>...<h6> etiketlerinin yerlerini değiştirerek alıştırma yapın ve tam olarak bu işin nasıl olduğunu kavrayın. Hatta iyi bir deneme-yanılma olması açısından örneğin her seferinde değişik bir etiketi veya sonlandırma etiketini HTML kodundan silerek ne gibi etkiler oluşturduğunu gözlemleyin. Denemelerinizin bir kısmında hiçbir değişiklik olmadığını gözlemleyeceksiniz bunun sebebi browser'ınızın otomatik olarak hatayı algılayıp düzeltmesidir.
Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:
<html><head> <title>Başlık Etiketleri-2</title></head><body> <h1><center>Sayfama Hoşgeldiniz</center></h1> <p>HTML etiketleri ile </p> Yazıları <b>koyu </b> <i>italik </i> ve <u>altı çizili </u> olarak yazabiliyorum</body>
</html>





Etiketleri kullanma mantığımızı anlamış olmalısınız. Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz ve metnin sonunda da ilgili etiketi sonlandırıyoruz. Etiket biz sonlandırmadığımız müddetçe etkisini göstermeye devam ediyor. Eğer hala tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek kaydedin ve diğer taraftan browser'ınızın *******/reload (yenile) tuşuna basarak değişiklikleri gözlemleyin.

Yeni öğrendiğimiz kodlara bir göz atalım:


<center>....</center>Aradaki metinleri sayfaya göre ortalar. (center)<b>....</b>Aradaki metni koyu (bold) yazar.<i>....</i>Aradaki metni eğik (italic) yazar.<u>....</u>Aradaki metni altı çizili (underline) olarak yazar.<h1>....<h6>Başlık (heading) etiketi. h1 en büyük h6 en küçük.<p>....</p>Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında takib eden metin bir satır boşluk bırakılarak ve satır başına yazılır.

Başladığınız etiketi sonlandırmayı sakın unutmayın !

Burada bilmeyenler için küçük bir bilgi; bir html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp kaynağı görüntüle/view source'u seçtiğimizde Internet Explorer için Notepad Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.




ÖDEV: Öğrendiğiniz komutlarla yukarıdaki gibi bir sayfayı nasıl oluşturursunuz?
Cevap için tıklayın. </B>



Şu ana kadar yazılarımızın font ayarını browser'ın varsayılan fontuna bıraktık. Bir sonraki konuda metinlerde istediğimiz fontu nasıl kullanacağımızı göreceğiz.

İlk sayfam

İşte ilk HTML sayfamızı yapıyoruz.
Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin mesela html_ders olsun. Daha sonra bu ad bize lazım olacağından kolaylık olması için siz de yeni klasöre bu adı verebilirsiniz.
Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun (sağ fare/Yeni/Metin belgesi).
Dosyayı çift tıklayarak açın ve şunları yazın:
<head> <title>İlk Sayfam</title> </head> <body> Sayfama Hoşgeldiniz </body> </html>
Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar dahil) ve Tamam'a basın.
Notepad'i kapatın metin dosyasını silin ve oluşan yeni dosyayı açın. Dosya varsayılan browser'ınız (Internet Explorer Netscape Navigator gibi) tarafından açılacaktır. Şöyle bir görüntü elde edeceksiniz:




Tebrikler ilk HTML sayfanızı yaptınız.
Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim. Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.
Burada kullandığımız etiketler ve anlamları şöyle:
<html>...</html>Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır. <head>...</head>
<body>...</body>Bir HTML belgesi iki bölüme ayrılır: head (baş) ve body (gövde). <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazılır **** ve title gibi etiketler burada yeralır. **** etiketlerine ileride değineceğiz.
<body>...</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor. <title>...</title>Title sayfanın başlığını belirtiyor. Burada yazılanlar browser penceresinin başlığında browser adıyla beraber gösteriliyor.

Dikkat ederseniz hazırladığımız sayfada sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor. İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.
Sonraki bölümde metin biçimlendirmeye yarayan etiketleri öğreneceğiz.



  Alıntı
Bu mesajı beğenenler:
#3
Temel unsurlar

Bu sayfaya geldiğinize göre HTML öğrenme işinde ciddisiniz demektir. HTML nispeten kolay bir dildir dedik. Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz. Piyasada iki tip editör bulunuyor. Birisi metin tabanlı kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler (HotDog HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage Dreamweaver NetObjects Fusion..). Benim yeni başlayanlara tavsiyem Windows'un Notepad'i. Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar bu da döküman boyutunun büyümesi demek.
Burada şunu da belirtmek gerekiyor; browserlar arasındaki yorum farklarından dolayı sayfanız bir browser'da iyi görünürken bir başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir. Hele yeni bazı teknikleri (css dhtml gibi) sadece MS Internet Explorer 4 ve üstü desteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayı neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerine üstün olduğu yönleri var. Sonuçta ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz başarı sayfanızı ziyaret eden kişinin kullandığı browser'a mahkum. Hatta ziyaretçiniz browser'ına verdiği bir talimatla "yalnız şu fontu kullan" "grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti demektir. Yine de bu kadar karamsar olmayalım.
Bu kadar genel bilgi yeter. Bir sonraki konuda ilk HTML sayfamızı yapıyoruz.

HTML nedir?


HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe browserlarla görebileceğimiz internet dökümanları oluşturmaya yarayan bir çeşit dildir. Örneğin okuduğunuz bu sayfa HTML dili kullanılarak hazırlandı. Siz de browser'ınızı (Internet Explorer Netscape Navigator..) kullanarak bu sayfayı ekranınızda görüntülüyorsunuz. Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz.
HTML programlama dilleri (c pascal basic..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek düzenlemek için kullandığımız komutlar dizisi bile diyebiliriz HTML için.
HTML Dersleri yazı dizimizi okuyarak bu dil hakkında hiçbir bilginiz olmasa bile yazı dizisinin sonunda öğrendiklerinizle siz de kendi sayfalarınızı hazırlayabileceksiniz.



Başka sistemdeki bir bölüme atlama

Internet'in temel özelliklerinden biri URL adı verilen evrensel kaynak belirleyici kodlama sistemidir. Bu dünyanın neresinde olursa olsun size başka bir sunucu üzerinde başka bir dokümana veya dizine kolaylıkla erişmenizi sağlar. Bu kaynaklar sadece WWW diye bilinen ve adresleri http:// ile başlayan web ile sınırlı değildir.
Kullanıcıyı hipermetin aktarım protokolu (hyper text transfer protocol http) ile çalışan herhangi bir sisteme yönlendirmek için evrensel kaynak belirleyici tipini belirtmek kullanımı zorunludur. Bu örnekte URL veya internet adresi veya evrensel kaynak belirleyici olarak http:// kullanılmıştır. Gidilecek sayfa http://www.boyutbilgi.com.tr/ifsaksergi/index.html olsun
<a href="http://www.boyutbilgi.com.tr/ifsaksergi/index.html">"IFSAK Sanal Ortam Sergisi"ne Git </a>
"IFSAK Sanal Ortam Sergisi"ne Git
Şifreli http protokolu:
<A HREF="https://sunucu.adı">Link Yazısı</A>
Kullanımı http'ye benzer.
Daha önce belirtildiği gibi tek URL tipi http değildir. Diğer protokoller için farklı evrensel kaynak belirleyiciler vardır.
Bunların kullanımını örnekler ile açıklamayalım. Protokollerin ne anlama geldiğini açıklamak bu belgenin kapsamı dışındadır.
Haber grupları:
Varsayılan sunucu üzerindeki grup adına yönelik linkler:
<A HREF="news:grup_adi">Link Yazısı</A>
<A HREF="news:soc.culture.turkish"> SCT</A>
SCT
Sunucuya yönlendirilmiş linkler:
<A HREF="news://sunucu_adi">Link Yazısı</A>
<A HREF="news://news.istanbul.edu.tr">Istanbul Üniversitesi Haber Sunucusu</A>
Istanbul Üniversitesi Haber Sunucusu
Belli sunucu üzerindeki gruba yönelik evrensel kaynak belirleyiciler:
<A HREF="news://sunucu_adi/grup_adı"></A>
<A HREF="news://news.marun.edu.tr/alt.culture.turkish.internet">acti grubu</A>
acti grubu
Secure (Şifreli Güvenli) iletişim destekleyen haber sunucusu:
<A HREF="snews:secnews.netscape.com">Netscape Güvenli Haber Sunucusu</A>
Netscape Güvenli Haber Sunucusu
Kullanıcı hesabı kullanılarak haber sunucusuna bağlantı:
<A HREF="news://kullanıcı_adi:şifresi@sunucu.adı/">Link Yazısı</A>
Dosya aktarım protokolu (FTP) link'i
<A HREF="ftp://ftp.zdnet.com">ZDnet FTP sunucusu</A>
ZDnet FTP sunucusu
Kullanıcı hesabı kullanılarak FTP'ye bağlantı:
<A HREF="ftp://kullanıcı_adi:şifresi@ftp.sunucu.adı/">Link Yazısı</A>
Her hangi bir e-mail adresine gönderilecek mektup:
<A HREF="mailto:kullanıcı@doamin.adı">Link Yazısı</A>
<A HREF="mailto:nevilo@yahoo.com">Nevit'e mektup</A>
Nevit'e mektup
Birden fazla kullanıcıya mektup:
<A HREF="mailto:kullanici1@domain1.adi?to=kullanici2@ domain2.adi&to=kullanici3@domain3.adi">Link Yazısı</A>
Birden fazla adrese e-mail
Mektup içerisinde varsayılan başlık ve metin:
<A HREF="mailto:kullanıcı_adi@domain.adi.net?subject= Başlık Buraya&body=Gövde içindeki yazı">Link Yazısı</A>
Varsayılan Başlık ve Yazı içeren mektup
Telent protokolu uzaktaki bilgisayara terminal bağlantısı:
<A HREF="telnet://sunucu.adi">Link Yazısı</A>
<A HREF="telnet://ttnbbs.rtpnc.epa.gov">Air Polution BBS USA</A>
Air Polution BBS USA
Gopher Protokolu:
<A HREF="gopher://sunucu.adi">Link Yazısı</A>
<A HREF="gopher://gopher.metu.edu.tr">ÖDTÜ Gopher Sunucusu</A>
ÖDTÜ Gopher Sunucusu


Başa dön
Sayfalara resim ekleme

Tüm tarayıcıların resim desteklemediğini unutmayın. Sayfanız ne olursa olsun resimsiz görünebilmeli. Bu sayfayı ziyaret edenlere daha fazla serbesti sağlayıp resimlerin görünemediği durumlarda sayfaya gelen ziyaretçiyi eli boş döndürmemiş olmaya yarar.
HTML'de resimler yazılardan bağımsız bir şekilde sunucu üzerinde ayrı dosyalar olarak bulunurlar. Resim ancak gif ve jpg gibi tarayıcının içinden görünebilien formatta ise sayfada kullanılabilir. Resimler evrensel kaynak belirleyici kuralları dahilinde internetin herhangi bir yerinden çağrılabilirler. Çağrılan resim aynı dizin içerisinde ise konum kısmına sadece dosya adının yazılması yeterli olacaktır.
<IMG SRC="resim.gif">
<IMG SRC="http://sunucu.adi/dizin_adi/resim.jpg">
Diğer sayfa elemanları gibi resimlere link eklemek olasıdır. Diyelimki resim.jpg'ye tıklayınca dosya.htm veya belirli bir adresin açılmasını istiyoruz:
<A HREF="dosya.htm"><IMG SRC="resim.gif"></A>
<A HREF="Gidilecek_Adres"><IMG SRC="http://sunucu_adi/dizin_adi/resim.jpg"></A>
Resimler hakkında söylenmesi gereken en önemli şey boyutudur. Aşırı veya bilinçsiz kullanımı sayfanızı gerçekten ağırlaştırabilir. Sayfanızın şimşek gibi açılmasını istiyorsanız resim boyutlarını 1-5K arasında tutmaya çalışıp tüm sayfa artı resimlerin 30K'ye geçmemesine dikkat edin. Bir birine atlayan sayfalarınız varsa aynı resimleri tekrar kullanmaya çalışıp yeni resim sayısını azaltın.
Resimler içerisinde kullanılan ekstra bazı işaretler zaman içerisinde gereklilik nedeniyle doğmuştur.
WIDTH=300 HEIGHT=200 Resim boyutları HTML içinde belirtildiğinde sayfa daha çabuk yüklenir tarayıcı sayfayı çizmek için gereken resim boyutunu almak için sunucunun yanıtını beklemek zorunda kalmaz.
ALT="resim yazısı" Alt işareti resim yokluğunda ve yükleninceye kadar görünen yazı.
BORDER=sayı kenar kalınlığı mevcut renk ile istenen kalınlıkta gösterilir.
VSPACE=Sayı HSPACE=Sayı Resim etrafında dikey ve yatay eksende kullanılacak boşluk.
ALIGN=TEXTTOP/ABSCENTER/ABSBOTTOM/BOTTOM
ALIGN=LEFT/CENTER/RIGHT Hizalama işaretleri gerektiğinde resim ile birlikte kullanılabilir.
LOWSRC="dusuk_rezolusyon.gif" Asıl resim yükleninceye kadar çabuk yüklenebilen düşük çözünürlüklü resim.
<IMG SRC="deneme.gif" WIDTH=300 HEIGHT=200 ALT="resim yazısı" BORDER=0 > Başa dön
Ses Dosyaları

Bir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
<EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 > WAV
<EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 > AU
<EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false"> MOD
<EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true > MIDI

Aktif Ses Kullanımı:
<EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES> Here is a <A HREF="page.htm"
OnMouseOver="Play_()">
link</A> aktif ses Başa dön
Tablolar:

Tablolar artık HTML'nin vazgeçilmez parçalarıdır. Tablolar <TABLE > ile tanımlanır. </TABLE> ile biter. Her satır: <TR> ile başlar </TR> ile biter. Haneler: <TD> ile başlar </TD> ile biter. Başlık kısmı <CAPTION> içindedir. Border=0 tablo kenar kalınlığını belirtir.
İşte basit bir tablo:
<TABLE Border=1>
<CAPTION>Başlık</CAPTION>
<TR><TD>satır1 Sutun1</TD><TD>satır1 Sütün2</TD></TR>
<TR><TD>Satır 2 Sutun 1</TD><TD>Satır 2 Sütün 2</TD></TR>
</TABLE>
Tablo başlık kısmıda <TABLE > içerisinde kullanılabilen seçenekler şu şekilde:
Border=sayı tablo kenar kalınlığı
Width=sayı tablo genişliği piksel olarak
Width=yüzde tablo genişliği yüzde olarak bu ikisinden sadece biri kullanılabilir.
CELLPADDING=sayı Nesne-hücre aralığı
CELLSPACING=sayı Hücre-Hücre aralığı
BGCOLOR="#xxxxxx" Tablo Arkaplan Rengi
BACKGROUND="resim.jpg" Tablo Arkaplan Resmi
ALIGN=right/left/center Tablo hizalama
COLS=sayı Sütün sayısı ( #n adet eşit genişlikte sütün eşit sütün genişlikli tablo)
Satır <TR> içerisinde kullanılan komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Satır Arkaplan rengi
BACKGROUND="resim.jpg" Satır Arkaplan Resmi
Hücre <TD> içerisinde HTML elemanlarının kendi komutlarına ilave olarak kullanılabilen komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Hücre Arkaplan rengi
BACKGROUND="resim.jpg" Hücre Arkaplan Resmi
COLSPAN="2" Birleşen kolon sayısı
ROWSPAN="2" Birleşen satır sayısı
İç içe tablo kullanabilirmiyim? Hanelerin içerisinde ikinci bir tablo dahil HTML elemanlarından herhangi biri olabilir.
Bir sayfada yan yana dört resim yerleştirip altına adlarını yazmak istiyorum.
İlk önce 4 sütün 4 satır bir tablo yaratın. Her tablo satırı <TR> ile başlar </TR> ile biter. Haneler <td> ile başlar </td> ile
biter.
<TABLE Border=0 >
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>
Resimleri hanelere yani <td> ve </td> arasına yerleştirin. Tablo elemanlarında önemli olan elamanın </td> ve <td> arasına gelmemesidir. Yazıyı bir sonraki satırda aynı hanenin altına denk gelecek şekilde yerleştirin.
Bir kaç resmi birleştirip tek resimmiş gibi yüklemek istiyorum:
<table cellpadding="0" cellspacing="0" border="0">
0 aralıklı bir tablo tanımlar. Hücreler içerisindeki resimler arasında mesafe yoktur. Başa dön
Formlar:

Formlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
<form action="mailto:kullanici@adresiniz.net?subject=Kon u Başlığı" method="POST" enctype="text/plain" >
Form Elemanları
</form>
Cgi için örnek POST komutu:
<form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değişken">
</form>
GET komutu nadir kullanıldığından anlatılmayacak.
Formlarda kullanılan bazı alan seçenekleri:
Radyo Buton'u tipi:
<BR>Soru1.
<BR><INPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt"> İkinci_Yanıt
<BR><INPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt"> İkinci_Yanıt
<BR><INPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt"> Üçüncü_Yanıt
Liste tipi soru:
<BR>Soru2<BR>
<SELECT NAME="Soru_adi2" >
<OPTION> Seçenek1
<OPTION> Seçenek2
<OPTION> Seçenek3
</SELECT><BR>
Küçük metin:
<BR>Soru3:<BR>
<INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30><BR>
Geniş metin alanı:
<TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100>
Varsayılan Yazı
</TextArea><BR>
Kutu işaretleme tipi soru
<Br> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1">seçenek1
<BR> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2">seçenek2
<BR> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3">seçenek3
</UL>
Gönderme ve Sıfırlama butonları:
<INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder">
<INPUT TYPE=Reset NAME="Reset" VALUE="Reset">


Başa dön
Çerçeveler Frames

Çerçeveler veya Frames Netscape Navigator (2.0 üstü) ve Internet Explorer (3.0 üstü) tarafından desteklenen işaretlerdir. Aynı çerçeve içerisinde birden fazla sayfanın açılmasını sağlar. Çerçeve yapısı HTML'ye benzerdir sadece <BODY> yerine <FRAMESET> içerir.
<FRAMESET> çerçeve içeren dokümanın hangi dokümanların bileşiminden oluşacağını ve bu dokümanların hangi biçimde yan yana geleceğini tanımlayan basit bir dokümandır. <FRAMESET>'den önce herhangi bir işaret olmamalıdır yoksa tarayıcı tarafından gözardı edilir.
Örnek bir Frame dokümanı:
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Frame set içerisinde ROWS ve COLS yardımı ile dokümanın yaty mı dikey mi bölüneceği tanımlanır. Yine Frameset içerisinde her bölmeye ayrılan alan piksel veya yüzde olarak tanımlanabilir.
Yatay bölünen doküman:
ROWS="row_height_value_list"
<FRAMESET ROWS="20%60%20%">
<FRAMESET ROWS="100*100">
Frame komutu ilave olarak içerideki belgelerin özelliklerini belirler dikkat ederseniz her pencereye bir isim verildi. Bundan sonra kullanılacak linklerde bu isimlerin kullanımı tıkalndığında istenen belgenin hangi çerçevede açılacağını belirler.

Aşaığdaki örnekte ilk sütün 150 piksel genişlikte soldaki çerçevenin adı solframe sağdaki çerçevenin adı sagframe olarak atandı. Solda açılacak belge solsayfa.htm sağda açılacak belge ise sagsayfa.htm adını taşıyor.
<FRAMESET COLS="150*" >
<FRAME SCROLLING="yes" NAME="solframe" SRC="solsayfa.htm" >
<FRAME SCROLLING="yes" NAME="sagframe" SRC="sagsayfa.htm" >
</FRAMESET>
Frame komutunda kullanılan seçenekler:
SCROLLING="yes|no|auto"
NORESIZE
Çerçevesiz Doküman:
<noframes> <a href="main.html">Ana sayfa</a> </noframes>
Çerçeveler sonlandırılmak istendiği zaman top seçeneği kullanılmalıdır.
<a href="test.html" target="_top">Çerçeveden Çık</a> Çerçeveden Çık


Başa dön
Comment Tag veya Bilgi



<!-- --> işareti içerisinde yazılanlar sayfa içerisinde görünmez ve sadece view source yapıldığı zaman bilgi verme amacını taşır. Bazı Javascript program parçalarnı eski tarayıcılardan saklamak için yine <!-- --> kullanılır. Eski programa dillerine alışkın olanlar için bu işareti REM ibaresine benzetebiliriz. Başa dön
****-işaretler:

**** işaretler tarayıcılar arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç ****işaretin anlamını açıklamak yeterli olacaktır. **** işaretler sayfada <HEAD> bölümü içerisine yerleştirlir.
<**** HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> Turkish ****tag Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.
<**** NAME="generator" CONTENT="Yazılım Adı"> Generator **** tag sayfanın hangi yazılım ile hazırlandığını gösterir.
<**** NAME="Author" CONTENT=" Nevit "> Author **** tag sayfanın hazırlayıcısı olan kişiyi gösterir.
<**** NAME="keywords" CONTENT="keyword keyword keyword"> Content **** tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.
<**** NAME="description"CONTENT=" Sayfanın tanımı "> Description **** tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.
<**** HTTP-EQUIV="*******" CONTENT="7;URL=index.html"> ******* İtme teknolojisi ile devreye giren bir **** işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.
<**** HTTP-EQUIV="Content-Type" Content-Base: "http://www.geocities.com/SoHo/Studios/9594> Content Base sayfa içeriğinin bulunduğu URL'yi gösterir.



Başa dön
Türkçe



Uluslararsı standartlar ensitütüsü ISO-8859-9'u Türkçe standardı olarak kabul ediyor. IE ve Netscape'de bunu destekleyenlerdendir. Türkçe standartlarına uygunluu denetlemek için önce browserinizin düzgün çalıştığından emin olmanız gerekir. Bunun için http://www.immt.pwr.wroc.pl/export_hp/test/ adresinde Browerinizin ISO-8859-9 karakterlerini düzgün gösterip göstermediğini kontrol edin.
ISO8859-9 Ansi-Turkish ve Windows-1254 ile neredeyse aynı karakter tablosuna sahip. ASC-II harfleri olduğu yerde çıkmasına rağmen Batı standardı olan ISO-8859-1 'den farklı olarak Türkçe harfler tanımlıdır.
Ayarlarınız doğru ise hepsinde sorunsuz Türkçe görürsünüz.



Başa dön
Özet:



HTML Basit bir işaretleme dilidir ve Hypertext Markup Language kıstaltmasıdır. WEB'de gördüğünüz tüm *.htm ve *.html uzantılı dokümanlar bu şekilde yazılmış.
<body> ve </body> arasındaki kısım dokümanın ana kısnmını oluşturur.
Burada paragraflar <p> ile başlar biter. Bundan sonra her ikisini yazmiyacağım. bitişler / içerir. yani paragrafın bittiği yerde istenirse </p> konur.
Bu şekilde hazırlanmış doküman web'de belli bir adrese konulunca isteyen buna girip içeriğine bakabilir.
Hala bir çok kişi Browserlerin 3.0 sürümleri kullaniyorlar. Opera kullanlar Unix Linux Mac OS/2 kullananlar var dünyada.
İletişimin amacı ziyaretçilere sorun çıkartmak olmamalı.
Dokümanın bir yerine resim koymak için öncelikle en iyisi resim ve doküman aynı dizinde olmalılar. Değillerse resimin bulunduğu yer
dokümana tanıtılmalı. En basit resim ekleme komutu <IMG SRC="resim_adi.gif"> şeklinde. Bu arada dediğim gibi resim aynı
dizinde olmalı.
Size basit bir HTML örneği veriyorum:
<HTML>
<BODY>
<P>Merhaba </P>
<IMG SRC="resim.gif">
</BODY>
</HTML>
Burada merhaba diye bir yazı ve bir'de resim.gif adında bir resim olacak. Bunu notepad'e kopyalayın ve deneme1.htm adı ile kaydedin. Daha sonra Netscape ile deneme belgesini açın. Resim görünmüyorsa o dizin içerisinde resim.gif adında bir dosya olmadığı içindir. Bunu sağladığınız anda yazı ve resim görünecek.
Bazı HTML Linkleri:
GeoCities Home Page Building Resource Guide.
Index Dot HTML
Barebones Guide to HTML
A Beginners Guide to HTML
Ten Commandments of HTML
comp.infosystems.www.authoring.cgi
alt.html.editors.enhanced-html
alt.html.editors.webedit
alt.html.webedit
alt.html.writers
alt.html.writers.guild.list
alt.homepages.xoom
alt.homepages.geocities

HTML nedir?html örnrkleri..kodlar ve tüm gerekli bilgi ve özelikler
HTML nedir?

NCSA yani National Center for Super Computing Association değişik firmalar ve bölgeler arasında belge çeşitliğine bir son vermek için hiper metin veya hiper text olarak bilinen HTML işaretleme dilini tanımladı. Bu dil tarayıcı adı verilen yazılımlarda sayfanın gereken biçimde görünmesini sağlar. Sayfa hangi yazılım kullanılırsa kullanılsın aynı biçimde görünecek. Bugün HTML geliştirme ve yaygınlaştırma işini içine sindiremeyen bazı tekel firmalar kendi kodlarını yerleştirmeye çalışsalar dahi HTML salt metin belgelerden sonra dünyada kendi yerini edindi. Tarayıcı yazılımınız sayfanın kaynak kodunu gösterme seçeneği varsa beğendiğiniz bir sayfanın nasıl yazıldığını görebilirsiniz. Örneğin Netscape'de View Source seçeneğini seçerek şu an okumakta olduğunuz sayfanın HTML kodunu görebilirsiniz. Bu kodlardan oluşan belgeye HTML belgesi denmektedir.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
Sayfanın ana bölümü burada olacaktır.
</BODY>
</HTML>
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde (< >) bitiş işaretleri (</ >) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı <HTML> ile açılır </HTML> ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz. Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni şeyler öğreneceksiniz.



Başa dön
Doküman Renkleri

Sayfadaki ana renkler arkaplan görüntüsü ve bazı diğer öznitelikler <BODY> işareti tarafından kontrol edilirler.
Dokümandaki öznitelikler <BODY> gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
<BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin rengi
alink: üzerine tıklandığında aktifleşen linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece <BODY> yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Beyaz = FFFFFF
Sarı = FFFF66
Kırmızı = FF0000
Gri = CC9999
Mavi = 0000FF
Yeşil = 00FF00
Siyah = 000000
Turkuaz = 00FFFF
Majenta = FF00FF
Mor = CC33FF
Açık Mavi = 00CCFF
Renklerde ilk iki harf maviyi ikinci iki harf yeşili ve üçüncü iki harf kırmızıyı kontrol eder. Her renk Hexadesimal yani 16 tabanlı olarak belirtilir ve 00'dan FF'ye kadar 256 farklı değer arasında değişebilir. Bu şekilde belirtilebilen renk sayısı 16.777.216'dır.RENKLER hakkında internet'te daha fazla bilgi bulabilirsiniz. Beğendiğiniz bir sayfanın renklerini taklit etmek için tarayıcıdaki "View Source" komutunu kullanarak <BODY> içindeki renkleri kopyalayabilirsiniz.
Öneri başlamak için en basit renkleri kullanabilirsiniz:
<body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000">
Deneme ve yanılmalarınız devam ederken bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> Margins



Başa dön
Arkaplan görüntüleri sayfa duvarkağıdı

Sayfada düz arkaplan yerine renkli görüntüler kullanmak için background="resimadı" işareti kullanılmaktadır. Örneğin sayfanızda zemin.jpg adlı resimi kullanmak için
<BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600">
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor renginde görünecektir.



Başa dön
Yatay çizgiler

sayfa içerisinde istediğiniz yere <hr> (horizontal ruler) işareti ile yatay bir çizgi atabilirsiniz. Bu çizgi aşağıdakine benzeyecektir:

Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
<hr size=10 align=left noshade width=50%>
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı 10 piksel genişliğinde gölgesiz ve sayfa genişliğinin yarısı genişlikte bir çizgi.

Web sayfalarında gördüğünüz bir çok süslü çizgi <hr> işareti ile değil resimler kullanılarak oluşturulmuştur. Başa dön
Sırasız listeler

Kendi sırasız listelerinizi <ul> (unordered list) işaretini kullanarak yaratabilirsiniz. Nokta olması istenen her liste maddesi başında <li> bulunmalıdır. Komut biçimi şu şekilde:
<ul>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ul>
Sırasız liste şu şeklide görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sırasız listeler istendiğinde iç içe döngülendirilebilir.
<ul>
<li>Birinci madde
<li>İkinci madde
<ul>
<li>İkinci madde birnici şık
<li>İkinci madde ikinci şık
</ul>
<li>Üçüncü madde
</ul>
Döngülendirilmiş liste şu şekilde görünecektir.
Birinci madde
İkinci madde
İkinci madde birinci şık
İkinci madde ikinci şık
Üçüncü madde
Başa dön
Sıralı veya Numaralı listeler

Sıralı listeler yaratmak için <ol> (ordered list) işaretini kullanabilirsiniz.
<ol>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ol>
Listeniz aşağıdaki gibi görünecektir.
Birinci madde
İkinci madde
Üçüncü madde
Sıralı listeler sırasız listeler gibi döngülendirilebilirler. Ayrıca sıralı ve sırasız listeler ile karışık iç içe döngüler oluşturmak mümkündür. Başa dön
Tanım listeleri

Tanım listesini en iyi açıklamanın yolu bir örnek göstermektir.
<dl>
<dt> Elmalar
<dd> Elmalar hakkında bilgi burada verilmektedir.
<dt> Armutlar
<dd> Armutlar hakkında bilgi burada verilmektedir.
</dl>
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir. Elmalar Elmalar hakkında bilgi burada verilmektedir. Armutlar Armutlar hakkında bilgi burada verilmektedir. <dl> bunun bir liste olduğunu gösterir.
<dt> bunun bir liste terimi olduğunu gösterir.
<dd> bunun bir liste maddesi olduğunu gösterir. Başa dön
Başlıklar

Tarayıcılar altı başlık düzeyini kabul ederler.
<h1>Birinci düzey başlık</h1>
<h2>İkinci düzey başlık </h2>
<h3>Üçüncü düzey başlık </h3>
<h4>Dördüncü düzey başlık </h4>
<h5>Beşinci düzey başlık </h5>
<h6>Altıncı düzey başlık </h6>
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir. Birinci düzey başlık

İkinci düzey başlık

Üçüncü düzey başlık

Dördüncü düzey başlık

Beşinci düzey başlık

Altıncı düzey başlık

Başa dönOrtalama

Resim veya metinleri <CENTER> işaretleri arasına alarak ortalayabilirsiniz.
Örnek olarak
<center> Bu yazı ortalanacaktır </center>
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.


Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left" "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
<DIV ALIGN="CENTER">Bu yazı ortalanacaktır</DIV> ve
<CENTER> Bu yazı ortalanacaktır </CENTER> arasındaki tek fark <CENTER> işaretinin tüm tarayıcılar tarafından desteklenmesidir.


Başa dön
Ön biçimli metin:

Bazen daha önce yazdığımız ve biçimlendirdiğimiz metinleri HTML içerisinde biçimleri bozulmadan kullanmak gerekir. Bu durumlarda metin parçasını <pre> işareti içine koymak yeterlidir.
Örnek: b e nd a ğ ı nık b i rada m ı mbır ak ındağ ı nıkk a l s ı n<pre> içine aldığımız metinlerin biçimi korunmuş olacak. Başa dön
Koyu eğik vs.

Bir metin parçasının biçimini bu işaretler ile kolayca değiştirebilirsiniz.
Koyu görünmesini istediğini metin parçasını <b> işaretleri içine yerleştirin.
<b> Koyu yazı </b>
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı <i> işaretleri arasına yerleştirin.
<i> Eğik yazı </i>
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
<b><i> Koyu ve Eğik Yazı</i></b>
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
<U>Alt Çizgili</U>
Alt Çizgili

<STRIKE>Üstü Çizgili</STRIKE>
Üstü Çizgili
<Strong>Güçlü</Strong>
Güçlü
<EM>Vurgu</EM>
Vurgu
<BIG>Büyük</BIG> İç içe döngü OK
Büyük
<Small>Küçük</Small> İç içe döngü OK
Küçük
<SUB> Alt yazı </SUB>
Alt yazı Alt yazı
<SUP> Üst yazı </SUP>
Üst yazı Üst yazı
<FONT SIZE=+1> </FONT> Font boyutunu arttırır.
<SAMP>Örnek Kod </SAMP>
Örnek Kod
<CODE>Örnek Kod </CODE>
Örnek Kod
<TT>Teletype </TT>
Teletype
<VAR>Değişken Notu </VAR>
Değişken
<CITE>Kısa Not </CITE>
Kısa Not

Göz kırpan şeyler:

Basit bir işaret ile metinde bir noktanın yanıp sönerek göz kırpmasını sağlayabiliriz.
You can make text or graphics blink on and off by surrounding them with tags.
İşte işaret:
<blink> Yanıp sönerim! </blink>
Ve yazı böyle görünecektir.
Yanıp sönerim!
Bunu fazla yapmamaya dikkat edin. Başa dön
Yazıtipi rengi:



<FONT COLOR=#KKYYMM> Yazının bulunduğu yer </FONT> Yazı rengini değiştirir
İlk iki harf kırmızı pixeli orta iki harf yeşil son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah FFFFFF hepsi tam şiddet yani beyaz...
<FONT COLOR="#000000">Siyah</FONT>
<FONT COLOR="#FF0000">Kırmızı</FONT>
<FONT COLOR="#00FF00">Yeşil </FONT>
<FONT COLOR="#0000FF">Mavi</FONT>
<FONT COLOR="#FFFF00">Sarı</FONT>
<FONT COLOR="#FF00FF">Mor</FONT>
<FONT COLOR="#00FFFF">Turkuaz</FONT>
<FONT COLOR="#FFFFFF">Beyaz</FONT> |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Başa dön
Yazı Tipleri:

<font face="Kidprint">Font biçimi </font> ile yeni nesil tarayıcılar için yazıtipi tanımı yapılabilmesine rağmen bu yazıtipinin aynı zamanda diğer işletim sisteminde ve kullanıcıda bulunması gerekir. Bu kısıtlılık nedeniyle sayfaları hazırlarken kullanıcının varsayılan yazıtipi ile okunabilmesi için mümküm olduğu kadar yazıtipleri arasında az geçiş yapmak gerekir. Örnekteki yazının düzyün okunabilmesi için sistemde kidsprint yazıtipi bulunması gerekir. Çok özel biçimse ve yazıtipi efektleri kullanmak gerekiyorsa .gif formatında düşük renk sayısı ile yazılması yazının her sistemde düzgün ve aynı biçimde görünmesini garanti eder. Başa dön
Paragraf ve satırbaşı



Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden son bulur.
<br> yani satır başının yaptığı etki metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
<p> yani paragraf işaretinin tek farkı yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır. Başa dön

Belge içerisinde başka yere atlama

Belge içinde gidilecek yerleri tanımlayıp bir tıklama ile sayfanın o bölümüne gidilmesini sağlayabilirsiniz.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu adı daha önce tanımlamak gerekmektedir. <a name="hedef_adi"> Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak gerekmektedir. Tıklanacak metin ve gidilecek nokta
<a href="#hedef_adi">Tıklanacak yazı</a>
Link olarak tanımladığımız yazı altı çizgili ve <body> içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
Aynı sistemde başka dokümana atlama

Tarayıcının aynı sistem üzerinde bulunan başka bir belgeye gitmesini sağlamak oldukça kolay. Gidilecek belgeniz üzerinde çalıştığınız doküman ile aynı dizin içerisinde bulunuyorsa sadece belgenin adını yazmak yeterlidir.
<a href="boludagece.jpg"> Bolu'da Gece </a>
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
<a href="göreceli_yol_ve_dosaya_adi">Link Yazisi</a>
Örnekler:
Kök dizinde bulunan varsayılan belge:
<a href="/">Ana sayfa</a>
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg resim belgesi
<A HREF="../SoHo/Museum/9404/barutcu.jpg"> Şinasi Barutçu</A>
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
<A HREF="eski/aramis.htm"> Aramis </A>
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin belgesi
<A HREF="../scandisk.txt">Scandisk Hakkında</A>



  Alıntı
Bu mesajı beğenenler:
#4
moderotorun dikkatine bu konuyu sabitelerseniz sevinirim tşkler iyi site kurmalar



  Alıntı
Bu mesajı beğenenler:


Benzer Konular...
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  JQuery Nedir delıkanlı02 2 2.731 24-02-2014, 14:51
Son Mesaj: Tornado
access-sql-9 Domain Nedir? delıkanlı02 2 3.050 11-11-2012, 14:40
Son Mesaj: delıkanlı02
  HTML Türkçe Görsel Eğitim Dersleri kod_adı_pars 1 2.444 09-03-2012, 23:17
Son Mesaj: kafkas066
  Hosting Scripti (Html/Gayet GuzeL) kod_adı_pars 4 4.329 25-04-2011, 21:16
Son Mesaj: metinse

Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi