//-->


Sitemizin Eski Versiyon Tasarımlarını Tasarımlar Bölümünden İndirebilirsiniz... - - - - - - - - - Yeni Coner Arkadaşım Kadir Kaya www.sempati-tasarim.tr.gg

king-tasarimci

HTML Dersi devam

Parametre Örneği 2:

<body> HTML'in body kısmını belirtir.

<body bgcolor="yellow"> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.

Kendin dene: Arkaplan rengi


Değerleri (Value) Daima Tırnak İçerisine Alın

Parametrelerin değerli her zaman tırnak içerisinde olmalıdır.

Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz:

name='Cem "GORA" Yilmaz'

 

HTML Kaynak Kodları Nasıl Görüntülenir?

Tarayıcınızın araç çubuğunda "Görünüm" menüsüne geldikten sonra "Kaynağı Görüntüle" seçeneğini tıklayınız.


Metin Biçimlendirme Etiketleri

Tag Açıklama
<b> Koyu metin
<big> Büyük metin
<em> Vurgulanmış metin
<i> İtalik metin
<small> Küçük metin
<strong> Güçlü metin
<sub> Alt indis metini
<sup> Üst indis metini
<ins> Altı çizili metin
<del> Üstü çizili metin
<s> Önemsiz etiket, bunun yerine <del> kullanınız.
<strike> Önemsiz etiket, bunun yerine <del> kullanınız.
<u> Önemsiz etiket, bunun yerine styles kullanınız.

"Programlama Dilleri" Etiketleri

Tag Açıklama
<code> Programlama dili metini
<kbd> Klavye metini
<samp> Örnek bilgisayar kodu metini
<tt> Tele tip metin
<var> Değişken
<pre> Biçimlendirilmemiş metin.
<listing> Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext> Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp> Önemsiz etiket, bunun yerine <pre> kullanınız.

Alıntılar ve Açıklamalar İle İlgili Etiketler

Tag Description
<abbr> Kısaltma
<acronym> Baş harfleri ile kısaltma
<address> Adres öğesi
<bdo> Metin yönü
<blockquote> Uzun alıntı
<q> Kısa alıntı
<cite> Alıntı
<dfn> Tanımlama terimi

 

HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.

Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır.


Özel Karakterler

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

HTML dökümanı içinde  bu tip karakterleri görüntülemek için &lt; veya &#60; yazmalıyız.

Bir numara yerine isim kullanılmasının avantajı, isimlerin daha rahat hatırlanabilmesidir. Dezavantajı ise piyasadaki tüm tarayıcılarda tam desteklenmemesidir.

Özel karakterlerin büyük/küçük harfe duyarlı olduğuna dikkat ediniz 

Örnek: Özel Karakterler


Birden Fazla Boşluk Bırakabilmek

Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız &nbsp; özel karaktlerini kullanınız.


En Çok Kullanılan Özel Karakterler

Sonuç Açıklama Özel karakterleri Numaralı Hali
  Fazladan boşluk &nbsp; &#160;
< Küçüktür &lt; &#60;
> Büyüktür &gt; &#62;
& Ve &amp; &#38;
" Alıntı &quot; &#34;
' apostorof  &apos; (IE'de çalışmaz) &#39;

Bazı Başka Özel Karakterler

Result Description Özel karakterleri Numaralı Hali
¢ Cent &cent; &#162;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
Euro &euro; &#8364;
§ Section &sect; &#167;
© Copyright &copy; &#169;
® Kayıtlı marka &reg; &#174;
× Çarpma &times; &#215;
÷ Bölme &divide; &#247;

HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.


Örnekler

Link oluşturma

Bir resime link vermek


<a> Etiketi ve href parametresi

HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır.

Kullanım biçimi: 

<a href="url">Görüntülenecek Metin</a>

Bir örnek:

<a href="http://www.htmldersleri.org/">Kodlayın, Tıklayın, Görün...</a>

Bu örnek tarayıcınızda aşağıdaki gibi görünecektir:

Kodlayın, Tıklayın, Görün...


Hedef (target) Parametresi

Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.

Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.

<a href="http://www.htmldersleri.org/"
target="_blank">Kodlayın, Tıklayın, Görün...</a>


<a> Etiketi ve Name Parametresi

Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.

Kullanım Biçimi:

<a name="label">Görüntülenecek Metin</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

Bir Örnek:

<a name="ipucu">Yararlı Bilgiler</a>

İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu yazınız:

<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">
Yararlı İpuçları</a>

Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.

Çerçeve kullanmanın dezavantajları:

  • Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur.
  • İstenilen sayfanın yazıcıya gönderilmesi zordur.

Frameset Etiketleri

  • <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
  • Her frameset satır (rows) veya sütun (cols) olarak belirlenir

Frame Etiketi

  • <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.

Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25'i ayrılmıştır. İkincisine ise %75'i ayrılmıştır. "frame_a.htm" birinci sütuna, "frame_b.htm" ise ikinci sütuna yerleştirilmiştir:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols="200,500"), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols="25%,*").


Temel Notlar - Yararlı İpuçları

Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize="noresize" parametrelerini  <frame> etiketi içine yazabilirsiniz.

<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.

Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!


Frame Etiketleri

Etiket Açıklama
<frameset> Frame ayarlarını belirtir.
<frame> Alt pencere (çerçeve) belirtir.
<noframes> Frame desteğinin kullanılmamasını sağlar.
<iframe> İç frame belirtir.
sd


Tablolar

Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Çıktısı aşağıdaki gibi olacaktır:

satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2


Tablolar ve Kenarlık (border) Parametresi

Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.

Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>


Tablolarda Başlıklar

Başlıklar <th> etiketi ile belirtilir.

<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>

Çıktısı:

Başlık Başka Başlık
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1 Satır 2, Hücre 2


Bir Tabloda Boş Hücreler

Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>

Çıktısı:

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1  

Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).

Bundan kurtulmak için, (&nbsp;) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>&nbsp;</td>
</tr>
</table>

Çıktısı:

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1  


Tablo Etiketleri

Etiketi Açıklama
<table> Tablo
<th> Tablo başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre grupları
<col> Sütun genişliği
<thead> Tablo başı
<tbody> Tablo body özelliği
<tfoot> Tablonun en alt kısmı




Devamı gelecek

Bugün 4 Ziyaretçi 14 Sayfa Tıkladı... IP Numaranız 184.73.56.98 Design King-Tasarım . Version 5
BS-Paylasim - Sempati-Tasarım
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol