Webgem-Bilgi Ve Teknoloji

html



HTML Nedir, Nerede ve Nasıl Kullanılır ?
HTML (Hyper Text Markup Language - İşaretlenmiş Üstün Yazı Dili gibi bir çeviri yapılabilir) en temel web yayını kodlama dilidir. Yayın aktarımı için HTTP (Hyper Text Transfer Protocol) kullanan HTML, diğer bazı programlama dilleri gibi derleme gerektirmeyen düz metin dosyalarından oluşur. Bununla birlikte HTML dosyaları, içeriğinde web sayfasının nasıl görüntüleneceğini belirleyen etiketler ve etiketlerin düzen seçenekleri ile şekillenmektedir. Aslında bir web sayfasının görünen yüzünün arkasında bir çok etiket ve kodlar bulunduğundan emin olabilirsiniz.

Web sayfanızda göstereceğiniz tüm içeriğin sunucu tarafından doğru yorumlanarak görünmesini istediğiniz şekilde ekrana yansıtılması için HTML düzenlemeye ihtiyaç duyulacaktır. Dolayısıyla dilerseniz kendi sayfanızı tasarlayın, dilerseniz hazır sistemler kullanın, HTML bilgisi işiniiz daima kolaylaştıracaktır. 

HTML dilinde kodlanmış bir dosyanın uzantısı .html ya da .htm olacaktır. HTML dosyaları aynı zamanda güncel bir çok sunucuda varsayılan olarak çağırılan dosyalardır. Sunucu başka bir şekilde yapılandırılmadıysa, o sunucuda barınan bir alan adının yayın dizini çağırıldığında ziyaretçi ekranına gelen dosya index isimli html dosyası olacaktır. Özellikle Unix - Linux tabanlı sunucularda ilk çağırılan dosyalar index.html, index.htm, default.html, default.html olup Windows tabanlı sunucularda default isimli dosya tercih edilmektedir. Bunlar genel yapılandırmalar olup elbette sunucu yönetimince farklı bir yapılandırma tercih edilmiş olabileceğinden kesinlik arz etmez.

HTML, her türlü web programlamasında kullanılmakta olan temel dildir. Ancak güncel web projelerinde dinamik içerik ihtiyacı sebebiyle HTML tek başına yeterli olmamakta, bununla birlikte diğer dillerde de gömülü olarak kullanılabilmektedir. Böylelikle HTML'in statik ya da dinamik tüm web sitelerinde kullanıldığını söyleyebiliriz.

HTML dosyalarının düz metinlerden ibaret olacağını belirtmiştik. Bu sebeple bir HTML dosyası oluşturmak için notepad gibi basit bir metin düzenleyici ya da Notepad++ gibi gelişmiş metin-kod düzenleyiciler veya web yayıncıları için geliştirilen Frontpage, Dreamwever gibi profesyonel düzenleyiciler tercih edebilirsiniz. Ben Notepad++ öneriyorum.

 

Bir HTML dosya 3 bölüm, dolayısıyla 3 ana etiketten oluşur.

  1. Bölüm: <html> Etiketi. HTML etiketi bir HTML dosyasının tümünü içine alan ana etikettir. Bütün bir HTML dosyası bu etiket içinde <html> </html> açma-kapama etiketleri arasında bulunacaktır. HTML açma etiketi <html> olup HTML sonlandırması da </html> şeklindedir.
  2. Bölüm: <head> Etiketi. HEAD etiketi ziyaretçilerimizin web sayfamızda görmediği ama bizim tarayıcı vasıtasıyla tanıtma, sunma amaçlı kullandığımız bilgi lanıdır. Bu alanda arama motorlarına ilgili sayfa hakkında temal bilgileri sunabilir, varsa sayfaya çağırdığımız sitil dosya yolu, sayfa dili, yazar-sahip bilgisi gibi ekrana yazdırılmayan diğer bilgileri sunabiliriz. Sayfada çağıracağımız-çalıştıracağımız bazı dış betikleri de (javascriptler gibi) bu alanda belirtiriz. HEAD etiketi <head> ile başlar ve </head> ile biter.
  3. Bölüm: <body> Etiketi. BODY etiketi aslında isminden de çağrıştırdığı gibi bir HTML sayfasının görünen gövdesidir. BODY etiketi içinde ne yaparsak, web sayfamızda bir etki oluşturacak, ziyaretçilerimize dilediğimiz şekilde bir sunum yapabilmemize hizmet edecektir. Ziyaretçilerimiz için HTML sayfamız BODY içerisinde başlayacak ve bitecektir. BODY etiketi <body> ile başlar ve </body> ile biter.

Şimdi buraya kadar gördüğümüz ile bir HTML dosyası oluşturalım. Öncelikle bir notepad belgesi açıp içine hiç bir şey yazmadan index.html ismiyle kaydedelim ve bu dosyayı HTML isimli klasörümüzün içine atalım. Bu dosyayı ders boyunca denemelerinizi yaparak tarayıcıdan değişimleri takip etmek için kullanabilirsiniz.

index.html dosyamıza bu aşamada çift tıklarsak, dosyanın boş beyaz bir sayfa şeklinde varsayılan tarayıcımızda ve hata vermeden açıldığını göreceğiz. Buradan anladığımız üzere Bir HTML dosyası -var olmak için- içeriğe ya da başka bir bağlantıya ihtiyaç duymaz. Ancak elbette asli amacı web sayfamızın içeriğini amaçladığımız şekilde göstermek olduğundan biz onu gerçek bir HTML dosyası haline getireceğiz.   

3 ana bölümden oluştuğunu söylediğimiz web sayfamızda ana bölümlerin konumlanması da unutmamalıyız ki doğru şekilde olmalıdır. index.html dosyamızı açalım ve şunları yazalım:

HTML Dosyanın Temeli
1
2
3
4
5
<html>
<head></head>
<body>
</body>
</html>


Doğru kullanılan etiket açma kapamalarının birbiri ile aynı satırda ya da doğru sırayla olduğu müddetçe farklı satırlarda olması sorun teşkil etmeyecektir. Bu, HTML sayfamız içinde kullanacağımız tüm etiketler için söz konusudur. Burada yeri gelmişken etiket kullanımı hakkında bir noktaya daha değinelim. HTML etiketler aslında BÜYÜK HARF ya da küçük harf ile yazılabilir. Yorum farkı oluşmaz, tarayıcılar her ikisini de aynı şekilde yorumlar (şimdilik). Ancak HTML 4 sürümden itibaren tavsiye edilen küçük harf kullanımıdır ve XHTML (ayrıca değineceğiz) uyumlulukta arananlardan biri de küçük harfli etiketlerdir. Dolayısıyla biz örneklerimizde buna riayet edeceğiz.

Kodlamaya başlarken etiketler hakkında bir bilgiden daha bahsetmekte fayda var. Etiketlerimiz bazı özel niteikler içerebilir. Nitelikler başlangıç etiketleri içerisinde yer alır ve birer değer içerir. Bununla ilgili örneğimizi <head> etiketi içinde yer vereceğimiz etiketlerde görmeye başlayacağız.

Çok kullanılan HTML etiketlerini metin düzenleyiciler, tablolamalar ve resim düzenleyiciler olarak temelde üçe ayırabiliriz. Aslında bunları belki alt katgorilere de ayırmak mümkün olabilir. Şimdi ben bunları üçe ayırıyorum ve yatay çizgiyi de metin düzenleyenler sınıfına koyuyorum. Etiketlerin anlatımlarını olabildiğince sade yaparak, özellikle niteleyicilerle genişleyen kullanımlarına ayrıca değinmeyi düşünüyorum. Niteleyicilere inşeallah CSS konularında derinlemesine bakacağız. Şimdi Metin düzenleyen etiketlerle başlayalım:

p (Paragraph) Bir paragraf başlatır. Başlatma etiketi <p> ve sonlandırması </p> şeklinde kullanılır. Bir p etiketi bazı niteleyiciler kullanabilir. Sayfanızda bir paragrafı <p>Buraya yazarak</p> gösterebilirsiniz. Paragraf etkisini görmek için html dosyanızı açarak p etiketini deneyin.

b (Bold) Bir karakter, karakter dizisi ya da komple bir metin için kalınlaştırma etkisi verir. b etiketi <b> ile başlar </b> ile biter. Başlama ve bitiş etiketlemesi arasındaki tüm karakterleri kalın yazı şeklinde gösterir. Vurgu yapmak istediğiniz bir kelimeyi kalınlaştırmak için <b>Buraya</b> yazmanız yeterlidir. Cümle ya da kelime içinde herhangi bir yerde kullanılabilir, bütünlüğü bozmaz. b etiketi çeşitli niteleyiciler kullanabilir. Kullanımı çok basit olan bu etiketi hemen deneyin, çok yerde kullanacaksınız.

i (Italic) Eğik yazı için kullanılan i etiketi içine aldığı karakter, karakter dizisi ya da komple bir metni eğik gösterir. Kullanım için eğik yazılacak metin <i>Buraya</i> yazılmalıdır. Bir eğik yazı yazmak için şimdi index.html dosyanızı açıp deneyebilirsiniz.

h1 h2 h3 (Head) Başlık belirtmek için kullanılır. Tarayıcı ve arama motorları h etiketini gördüğünde bunu bir başlık olduğunu anlar. h etiketinin temeli h1, web sayfanızdaki en büyük başlığı belirtir. Tarayıcılar ve aramamotorları tarafından 6 standart (h1, h2, h3...) h boyutu yorumlanır. h etiketi <h1> ile başlar ve </h1> ile biter. h etiketiyle bir başlığı göstermek için <h>Buraya Yazarak</p> gösterebilirsiniz. 

sub (Subscript) Subscript etiketi özellikler kimyasal konularda kullanılan alt karakterleri basar. <sub> ile başlar ve </sub> ile biter. Örneğin H2O formülünü doğru yazmak için 2 sayısını H<sub>2</sub>O şeklinde subscript etiketi içine almamız gerekir. index.html dosyanızda hemen bir kimyasal formül yazarak nasıl kullanıldığını tecrübe edin.

sup (Superscript) Superscript etiketi özellikle üslü sayılar ve marka imlemeleri için kullanılan, karakter üstündeki küçük karakterleri basar. Bunu aynı zamanda kaynakçaya işaret ederken de kullanabilirsiniz. Joomla!TM yazmak için izleyeceğimiz yol şu olacaktır: Joomla!<sup>TM</sup>. HTML dosyanızda bunu deneyebilirsiniz.

br (Break) Break ile satır atlayabilirsiniz. Her br etiketi 1 satır aşağı inilir. br etiketi eski HTML sürümlerde <br> şeklinde kullanılan ve kapaması olmayan, boş bir etikettir. Dolayısıyla br etiketi <br> şeklinde kullanılır ve bu haliyle görevini tamamlar. Birden fazla br birarada kullanılabilir. br etiketi paragraf oluşturmaz. Ayrıca çok sık kullanılan br etiketinin XHTML uyumuluğu için <br /> şeklind ekullanılması gerektiğini burada hatırlatalım. Konu XHTML başlığımızda detaylı şekilde anlatılacaktır. html dosyanızda 1 ve birden fazla br etiketlerini yanyana kullanarak oluşturduğu etkiye bakıp p etiketi ile karşılaştırmasını yapın.

blockquote (Block Quote) Bir alıntı metni göstermeye yarayan bu etiket <blockquote> ile başlayıp </blockquote> ile biter. Başlangıç ve bitiş etiketi arasındaki metni alıntı şeklinde girintili olarak gösterir. Bu etiket bir paragraf oluşturmaz. Paragraf içinde girintili bir metin bloğu oluşturmaya yarar. Şimdi blockquote etiketini denemeye başlayabilirsiniz.

abbr (Abbreviation) Kısaltmaları göstermeye yarayan bu etiket ile bir kısaltmayı abbr etiketi içine alıp neyin kısaltması olduğunu açıklayabilirsiniz. abbr etiketi boş olarak kullanılamaz ve title niteleyicisine ihtiyaç duyar. Örnek kullanım şu şekildedir: <abbr title="Content Management System">CMS</abbr>. Şimdi index.html dosyanızda abbr kullanarak bir kısaltma yapın ve tarayıcınızdan nasıl göründüğüne bakın.

center Ortalama etiketi olan center, içinde olduğu tablo ya da katmana göre ortalama görevini yerine getirir. Ortalanmak istenen girdi açma ve kapama etiketleri arasında <center>Burada</center> yer almalıdır. center etiketini html dosyanızda hemen tecrübe edin.

!-- HTML Yorum etiketi ya da Admin yörum etiketi de denen bu etiket ile web sayfamızı gösteren HTML satırlarımız arasında küçük notlar yazabiliriz. Yorum etiketi içinde yazılan düz metin ya da HTML biçimlemeler hem yorumlanmaz hem de gösterilmez. Böylelikle bazı HTML etiketleri de dilediğimiz zaman silmeden gösterimden kaldırabilir, daha sonra düştüğümüz nottan bularak tekrar yorum dışına almak suretiyle etkinleştirebiliriz. HTML yorum etiketi <!-- ile başlar ve --> ile biter. <!--Buradaki Yorum ve Kodlar--> gözükmez ve etkisizleşir. Şimdi bu etiketi deneyiniz.

hr (Horizontal (Line)) hr etiketi, içinde bulunduğu katman boyunca yatay bir çizgi oluşturur. Etiket boştur. Sonlandırması, yani kapatma etiketi bulunmamaktadır. Dolayısıyla XHTML uyumluluğu için <hr> yerine <hr /> şeklinde kullanılması gerekir. hr etiketi kullanıldığı satırda tekbaşına yatay çizgi gösterir. İki kelime arasında, bir kelime ya d aresmin yanında hr etiketi kullanırsanız soldan sıralı olarak 2. sırada bulunan bir alt satırda gözükür. index.html dosyanızda bunu deneyerek görebilirsiniz.


İleride değineceğimiz div kullanımına kadar HTML yazımlarda en çok başvurulan etiketler tablo etiketleri idi. Tablo etiketleri ile bir sayfayı dilediğiniz gibi bölümleyebilmeniz mümkün. Bu öyle bir kolaylık ki, tasarımın iskeletini oluşturan ögenin tablolar olduğunu dahi söyleyebiliriz. Tabii bu düne kadar olan gerçek. Ancak asıl gerçek, özellikle tarayıcı rekabetlerinin mantık dışı olumsuz etkileri arasında tablo etiketlerinin çoğu zaman uyumluluk kurtarıcısı olarak çıkması. Tablo etiketleri ile başlangıç anlatımlarımız devam ediyor.

 

Tablolar

table Tablo etiketi bir çok niteleyici ile birlikte ya da ham olarak kulanılabilir. Tablo etiketi içinde ayrıca sütun, satır, gövde, başlık, bitiş gibi etiketleri de barındırabilir. Standart olarak bir tablo etiketi satır ve sütun etiketleriyle kullanılır. Tablo etiketi <table> ile başlar, diğer açma ve kapama etiketlerinden sonra </table> ile biter. Bir tablonun içeriğine ait tüm veri ve etiketler <table>Burada</table> bulunmalıdır. Table etiketi bazı niteleyiciler kullanabilir.

tr (Table Row) Bir tablonun içindeki satırı ifade eder. Tek başına kullanılamaz. Kendisinden evvel table başlatma etiketine ihtiyaç duyar. Bazı niteleyiciler beraber ya da ham olarak kullanabilir.

td (Table Cell ?) Bir tabloda web sayfası üzerinden gösterilecek verilerin girildiği alandır. Tablonun hücrelerini oluşturur. Tek başına kullanılamaz, kendisinden evvel tr başlatma etiketine ihtiyaç duyar. Bazı niteleyicilerle beraber ya da ham olarak kullanılabilir.

Bir tabloyu oluşturan bu 3 etikete bakarsak kullanımını denemekte fayda olacaktır. Bir tablo oluşturabilmek için table, tr ve td etiketlerini içiçe kullanmamız gerekir. Tabloyu oluşturan ana etiketimiz table olup 1 tablo için 1 table açma ve kapama etiketi olacaktır. Ancak tablomuzda dilediğimiz kadar satır için tr etiketi ve bu satırların içinde dilediğimiz kadar yatay hücre için td etiketi kullanabiliriz. Hiyerarşik düzene ise dikkat etmemiz gerekir. Aşağıda tek satır ve hücre içeren bir tablo görüyorsunuz.

Basit Bir Tablo
 
<table><!--Tablomuz başlıyor-->
<tr><!--Tablomuzun satırını açtık-->
<td><p>Bu da hücremizde görünecek yazı olsun</p></td>
<!--Bu araya not düşebilirsiniz-->

</tr><!--Artık satırımızı da kapatabiliriz-->
</table><!--ve tablomuzu kapatma etiketiyle tamamlayabiliriz.-->


Bu tabloyu siz de kendi index.html dosyanızda deneyin. 2 satırlı bir tablo oluşturmak için ise izleyeceğimiz yol ilk satırı kapadıktan sonra 2. satırı açıp gerekli düzenlemeyi yapmak olacak. Örneğe bakalım:

2 Satırlı Tablo
 
<table><!--Tablomuz başlıyor-->
<tr><!--1. satırı açtık-->
<td><p>Bu da hücremizde görünecek yazı olsun</p></td>
<!--ilk satırdaki hücreye verimizi girip kapadık-->
</tr><!--1. satırı kapattık-->
<tr><!--2. satırı açtık-->
<td><p>Artık tablo yapmak çok kolay</p></td>
<!--2. satırın hücresini de hallettik-->
</tr><!--2. satırı kapattık-->
</table><!--2 satırlı 2 hücreli tablomuz burada biter-->

 

Bu tabloyu da deneyin ve tablo oluşturmada son temel yöntemi de görerek tablo konumuzu şimdilik kapatalım. Yapacağımız şey 2 satıra 2 sütun yani 4 hücreli bir tablo oluşturmak. Bunun için her satıra 2 hücre gireceğiz. Bir hücre açılıp kapatılacak, yanına bir hücre daha açılıp kapatılacak...yöntem bu. Buyrun:

2 Satır 2 Sütunlu Tablo
 
<table><!--Tablomuz başlıyor-->
<tr><!--1. satırı açtık-->
<td><p>1. satırın 1. Hücresi</p></td>
<td><p>1. satırın 2. Hücresi</p></td>
</tr><!--1. satırı kapattık-->
<tr><!--2. satırı açtık-->
<td><p>2. satırın <br />1. Hücresi</p></td>
<td><p>2. satırın <br />2. Hücresi</p></td>
</tr><!--2. tablo satırında br etiketini de kullandık-->
</table><!--2 satırlı 4 hücreli tablomuz burada biter-->

 

Bu son örneğimizi de birkaç kez tekrar edip daha fazla satır-sütun ilişkisinde tablolar oluşturabilirsiniz. Tablolar hakkında detaylı anlatımlara ileriki yazılarda yer vereceğim. Sıradaki yazımda ise maddeleme-listelemeleye değineceğim

HTML etiketler arasında yine sık kullandıklarımızdan biri liste etiketleridir. Liste etiketleri sıralı listeleme, sırasız listeleme ve açıklamalı listeleme şeklinde üçe ayrılmaktadır. Gayet basit olmakla birlikte liste etiketleri, az kullananlarca en çok hata yapılan etiketlerdendir. Liste etiketlerinde dikkat edilmesi gereken nokta, öncelikle liste türü etiketinin, ardından bunun içinde liste öğelerinin yerleştirilmesidir. Bunu bir tablo mantığı gibi düşünmek sanırım işi kolaylaştıracaktır. Anlatım ve örneklerimize geçelim.



 

ol ve li (Ordered List - List Item) Sıralı liste etiket grubu aynen tablo etiketlerinde olduğu gibi birarada kullanılır. Sıralı liste etiketleri listemizi numaralandırılmış maddeler halinde sunmamızı sağlar. ol etiketi ile sıralı liste sunumunu başlatırken liste öğelerini li etiketi içinde kullanırız. Örneğimize bakarsak:

Sıralı liste - Numerik listeleme

 
<ol>
<li>Birinci Öğe</li>
<li>İkinci Öğe</li>
<li>Üçüncü Öğe</li>
<li>Dördüncü Öğe</li>
<li>Beşinci Öğe</li>
</ol>


Sıralı Liste etiketlemesi ile bir liste oluşturmayı deneyin.

ul ve li (Unordered List - List Item) Sıralanmamış Liste etiketi aslında ismi itibariyle yanıltıcı olabilir. Bu dinamik bir karışık liste oluşturmaz. Görevi, listemizi numaralanmamış madde imleri şeklinde oluşturmasıdır. Örneğe bakarak bunu deneyerek görmemizde fayda var.

Sırasız Liste
 
<ul>
<li>Birinci Öğe</li>
<li>İkinci Öğe</li>
<li>Üçüncü Öğe</li>
<li>Dördüncü Öğe</li>
<li>Beşinci Öğe</li>
</ul>


dl dt ve dd (Definition List - Describes the - Defines the Definition) Açıklama Listesi etiketleri de tablo etiketleri mantığında bir gruplama ile kullanılır. dl etiketi liste alanını başlatırken tüm etiketler dl başlama ve bitiş etiketi arasında olacaktır. dt etiketi liste öğesini, dd ise dt öğesinin açıklaması ya da maddelerini oluşturur. Bir dt etiketi altında birden fazla dd etiketli liste ve dl içinde birden fazla dt etiketli liste başlığı oluşturulabilir. Örneğimizi deneyerek tecrübe edin.

Açıklamalı Liste - Tanımlı Liste - Alt Maddeli Liste
 
1
2
3
4
5
6
7
8
9
<dl>
<dt>Birinci Öğe</dt>
<dd>Birinci Öğe Açıklaması</dd>
<dd>Birinci Öğe Açıklaması</dd>
<dd>Birinci Öğe Açıklaması</dd>
<dt>İkinci Öğe</dt>
<dt>Üçüncü Öğe</dt>
<dd>Üçüncü Öğe Açıklaması</dd>
</dl>


Gördüğünüz gibi bu türden listelemede her dt bir liste öğesi ve her dd ise üstündeki dt etiketli başlığın açıklama maddeleri olmakla birlikte hem dt etiketleri hem dd etiketleri kendi metinleri girildikten sonra kapatılmaktadır.

Bir dahaki yazıda adresleme-bağlantı etiketleri ve resim etiketlerinden bahsedeceğim.Şimdilik iyi denemeler.

Web tasarım dillerinde en çok kullanılan etiketlerden ikisine kısaca değineceğim. Bunlar anchor ve image etiketleri. Anchor dediğimiz etiket, web sayfamızda iç-dış bağlantılar oluşturmamıza yarayan, link ve name özellikli etikettir. Image etiketi ise adından da anlaşıldığı üzere sayfamızda resimleri göstermemize ve gösterim ayarlarını belirtmemize yarar. Bu yazıda kısaca yer vereceğimiz anchor ve image etiketlerine ayrı ayrı daha detaylı şekilde ayrıca değineceğim.



 

Anchor, Türkçe karşılığı ile çapa kelimesi HTML sayfalarımızda bağlantılarımızı düzenliyor. a ile etiketlenen anchor ile iç ve dış bağlantıları oluşturduğumuz gibi sayfa içinde bir bölgeyi de işaret edebiliyoruz. Öncelikle temel şekliyle link özelliğine bakalım.

Bu etiket başlama etiketinde niteleyicileri tanımlanarak görevlendirilir, işaret konan metinden sonra ise kapama etiketi ile kapatılır. Örnek ile gösterelim. Bir iç bağlantı oluşturarak sitemizin iletisim.html sayfasına işaret edelim. HTML dokümanımızda kullanmamız gereken yöntem şu olacak:

İç Adres Verme
 
<a href="iletisim.html">İletişim</a>

 

Gördüğünüz gibi öncelikle etiketimizi a ile açtık, href ile dosya yolunu gösterdik. Başlatma etiketimiz ile kapama etiketimiz arasında ise bu dosya bağlantısının atanacağı kelimeyi belirttik. Böylelikle İletişim kelimesi artık iletisim.html sayfasına giden tıklanabilir bir bağlantı oldu. Burada kullandığımız yöntem bir iç adresi belirtmek olduğundan, kendi web dizinimizde açmak istediğimiz sayfanın dosya adresini yazmamız yeterli oldu. Yine anchor etiketinin link özelliğinde bir dış sayfaya bağlantı vermek istersek kullanacağımız yöntem değişmeyecek, ancak dış adresin tamamını href kısmında belirtmemiz gerekecektir. Örneğe bakarsak:

Dış Adres Verme
 
<a href="http://www.aytugakar.info/iletisim.html">AKAR'la İletişim</a>

 

Bununla birlikte anchor etiketinin güzel bir özelliği ise sayfa içi işaretlenmiş alana yönlendirme yapabilmek. Özellikle tek sayfadan oluşan kullanım kılavuzları ya da sıkça sorulan sorular gibi dokümanlarda karşılaştığınız, soruya tıklayınca sayfanın ilgili cevap bölümüne inmesi veya sayfa başına çıkma gibi uygulamalar bunlardır. Anchor etiketinin name özelliği ile yapılabilen bu uygulamada name işareti koyacağımız yere, özel bir sayfa içi bağlantı kurabileceğiz. Kullanımı şu şekilde:

Anchor etiketinde name özelliği ile işaret koymak
 
 
<a name="Turkce">Türkçe</a>

-

Anchor etiketinde name işaretine göndermek
 
<a href="#Turkce">Türkçe'ye Bak</a>

Burada yaptığımız şey, işaretlediğimiz Türkçe kelimesine sayfanın dilediğimiz bir yerinde ziyaretçiyi gönderebilmek. Uygulama buradan deneyebilirsiniz: Türkçe'ye Bak .Yazıya tıkladığınızda daha evvel yukarıda işaretlediğimiz Türkçe kelimesi sayfa başına hizalanacak şekilde yukarı çıktığımızı farkedeceksiniz.

Ne yaptığımızı tekrar incelersek, önce gidilmesini istediğimiz yerde name özelliği ile bir anchor etiketi kullandık. Daha sonra buraya ziyaretçimizi kendi seçimi doğrultusunda göndermek için, talebi aldığımız yerde href ile name adresini verdik. Dikkat ederseniz bunun içir name adresi olduğunu belirtmek için # işaretini kullandık. Eğer bunu yapmasaydık sunucumuz kodu yorumlamak için web dizinimizde uzantısı olmayan Turkce isimli dosyayı arayacak ve bulamadığı için hata verecekti.

Name özelliğini, açıklama sayfalarınızda her bir paragrama gönderme için kullanabilirsiniz. Başlıkları sayfa başında vereceğiniz bir detay sayfasında tıklanan başlığın açıklama kısmına gönderme yapmak hem ziyaretçiniz hem de sayfa dolaşımı için büyük kolaylık olacaktır.

 

Resim <img> Etiketi

Image etiketi, sayfamızda bir resmi yayınlamayı sağlar. Bu etiket ile sunucumuzda olan ya da dışarıda barınan bir resmi gösterebiliriz. Image etiketi çeşitli niteleyiciler ile kullanılabilir. Basit çe img etiketi kullanımına bakarsak;

Image etiketi kullanımı
 
<img src="resim.jpg">

Gördüğünüz gibi image etiketi sonlanmayan bir etikettir. Dolayısıyla xhtml uyumluluğu için aynı zmanda kendi kapamasını da içermelidir. Bu durumda xhtml uyumlu image etiketi kullanımımız şu şekilde olmalı:

XHTML uyumuna göre img
 
<img src="resim.jpg" />

 

Dikkat ederseniz etiketimiz içinde doğrudan tanımlama yaptık. Kapama etiketi ayrı olmadığı için etiketimizi açarken src ile dosya yolunu gösterdik ve bitirdik. Resim etiketi içinde kullanabileceğimiz niteleyicilere de yine aynı etiket içerisinde; dışarı çıkmadan yer vereceğiz. Buna etiketin detaylı anlatımında değineceğim.

Bir resim etiketini bağlantı içine almak, dolayısıyla bir resme bağlantı vermek isterseniz yapmanız gereken şey, resim etiketini anchor etiketleri arasınd almaktır. Aynen bir metne bağlantı verirmişçesine resim etiketine bağlantı vermelisiniz. Örneğe bakarsak sanırım daha net ortaya çıkacaktır:

Resme bağlantı vermek
 
<a href="iletisim.html"><img src="resimler/e-posta.png" /></a>

Böylece resimler dizinimizde bulunan e-posta.png resmine iletisim.html dosyamızın yani İletişim sayfamızı bağlantısını vererek resimli bir yönlendirme oluşturduk.

Sonraki yazıda, web sayfamızın görünmeyen head etiketlerine değineceğim. Ondan sonra da inşeallah buraya kadar anlatıığımız etiketlere detaylı olarak değinmeye başlayacağım.

Şimdilik sizlere kolay gelsin.

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol