Html Kod Örnekleri

Html Kod Örnekleri

sterseniz, HTML hakkında ayrıntılı birşeyler öğrenmeden önce ilk web sayfamızı hazırlayalım ve mutlu olalım!

Bir HTML belgesi hazırlamak için özel bir programa ihtiyaç duymazsınız. Sıradan bir düz metin editörü işinizi görür. Düz metin editörü ile oluşturulan dosyaların, diske kaydedilirken, hiçbir değişime uğramadan, bilgisayar diline vs. çevrilmeden olduğu gibi kaydedildiğini hatırlayalım.

Bu durumda, Windows kullanıcıları içn NotDefteri, Macintosh ortamında çalışanlar için ise SimpleText yeterlidir.

Şimdi ilk sayfamızı hazırlamaya başlayalım; bir metin editörünü açın ve yazmaya başlayın.

<html>
<head>
<title>Merhaba dünya!</title>
</head>
<body>
<p>Merhaba Dünya!</p>
</body>
</html>

İşte ilk sayfamızın kodları bunlar… Tam anlamıyla bir web belgesi olmasa da, herhangi bir tarayıcıda görünmesi için gereken tüm temel etiketleri içeriyor. Şimdi dosyanızı “merhaba.htm” adıyla kaydedin ve adını çift tıklayarak tarayıcınızda açın. İlk sayfanızı oluşturmuş oldunuz.

<a> Bağ, Link

   Web üzerinde herhangi bir belgeye, grafiğe, ya da başka bir dosyaya, kullanıldığı sayfadan bağlantı sağlamaya yarar. Bağlantıyı bir metne verebileceğiniz gibi, bir grafiğe, hatta grafiğin belirli bir bölümüne de verebilirsiniz.

Bağlı Özellikler

href=”url”

href attribute’undan ve ‘eşittir’ işaretinden sonra, çift tırnak içinde yazacağınız adrese, belgeye ya da dosyaya bağlantı sağlar.

name=”metin”

name ile atayacağınız bir isme, belgenin başka bir satırından, başka bir belgeden ya da başka bir web’den bağlantı verebilirsiniz. Örneğin, bu sayfada, etiket bölümlerinin sonundaki “Başa Dön” bağlantısı, sayfanın ilk cümlesine önceden verilen bir name değişkenine bağlıdır. Tıkladığınızda, o cümle görüntülenir, yani sayfanın baş kısmına dönmüş olursunuz.

rel=”metin”

Verdiğiniz bağlantının türünü belirtmeye yarar.

type=”metin”

Verdiğiniz bağlantının dosya türünü belirtir.

target=”hedef_çerçeve”

Bağlantı verilen sayfanın hangi çerçevede gösterileceğini bildirir.

Örnekler
<a href="http://www.muratolmez.com" type="text/html" target=" _
mainframe">HTML Rehberi</a>              
 
<a name="bastaraf">Burası Sayfanın Başlangıcı</a>
 
<a href="#bastaraf">Sayfanın Başlangıcına Gitmek İçin Tıklayın</a>
 
<a href="http://www.sony.com"><img src="images/sony.jpg"></a>

<abbr> Kısaltma

   Metin içinde vereceğiniz bir kısaltmanın üzerine gelindiğinde, açık halini görüntüler.

Bağlı Özellikler

title=”metin”

Title özeliğine vereceğiniz metin, kısaltmanın açılımı olarak görüntülenir.

Örnek
<abbr title="Türkiye Büyük Millet Meclisi">T.B.M.M.</abbr>

<acronym> Kısaltmalar

   Bu etiket <abbr> ile aynı biçimde, title= özelliğine atayacağınız metni, kısaltmasının üzerine gelindiğinde tooltip olarak görüntüler. (Araç Çubuklarının ipuçları gibi)

Bağlı Özellikler

title=”metin”

Title özeliğine vereceğiniz metin, kısaltmanın açılımı olarak görüntülenir.

Örnek
<acronym title="Amerika Birleşik Devletleri">A.B.D.</acronym>

Fare imlecinizi, buradaki A.B.D. yazısının üzerine getirip biraz bekletin.

<adress> Adres

   adress etiketi, bir belgenin tamamı ya da bir kısmı için “adres bilgisi” sağlar. Belge sahibinin adresini bildirmede kullanılabilir. Bu etiketin özelliği, browser’ larda içeriğinin farklı biçimde görüntülenmesidir.

Örnekler
<ADDRESS>Bu sayfaya <a href="http://www.muratolmez.com;_ 
HTML Rehberi</a> adresinden ulaşabilirsiniz.
</ADDRESS>
 
 
<ADDRESS>
Siteyle ilgili görüş ve önerilerinizi <a href="mailto:htmlrehberi _ 
@ixir.com">htmlrehberi@ixir.com</a> adresine e-postayla _
bildirebilirsiniz.
</ADDRESS>

<applet> Java Applet

   Artık pek kullanılmayan bu etiket yerine, Embedded (Gömülü) Java Appletleri için daha çok <object> etiketi kullanılır. Belge içine gömülü Java Applet kodlarının başlangıcını belirtir.

<area> Grafik Map Bölgesi

Sayfalarda kullandığımız grafiklere bağlantı atayabiliriz. Ayrıca bir grafik nesnesinin tamamı yerine bizim belirlediğimiz bir kısmı için, hatta aynı grafik nesnesinin birden çok bölgesi için birden fazla link sağlayabiliriz. Bu işi de <area> etiketi yapar. Bu etiket <map> etiketi ile birlikte kullanılır.

Bağlı Özellikler

href=”URI”

Belirlenen grafik alanının bağlantı sağlayacağı URI.

shape=”metin”

Bağlantı sağlanacak grafik alanının şekli. rect=dört köşeli, circle=yuvarlak, poly=çok köşeli ve default değerlerini alabilir.

coords=”metin”

shape ile belirlenen şeklin grafik üzerindeki koordinatlarını verir.

Örnekler
<p><map name="map1">
<area href="http://www.muratolmez.com" shape="rect" _
coords="40, 40, 150, 150"></map><img border="0" src=_
"images/001.jpg" usemap="#map1"></p>

<b> Koyu Metin

Başlangıç ve bitiş etiketleri arasında kalan metni koyu gösterir.

Örnek
<p>Metni <b>koyu</b> gösterir.</p>

<base> Belge Temel URI’si

Belgenin temel URI’sini bildirir. Belgedeki göreceli URI’lerle birlikte tam bir web adresi oluşturur. Belgede yalnız bir tane base elemanı kullanılabilir ve belgenin <head> kısmında yer alır.

Birçok web sayfası bu elemana ihtiyaç duymaz. Eğer linkler içeren bir sayfa, örnek olarak başka bir web’de yayınlanıyorsa, içerdiği linklerin çalışması için base elemanı gerekir. Ayrıca, bir web sayfasını –örneğin e-mail ile– birine gönderdiğinizde, içeriğindeki linklerin çalışması için yine bu elemana gerek duyulur.

Bağlı Özellikler

href=”URI”

Belgenin temel URI’si.

target=”metin”

Hedef çerçevenin adı.

Örnek
<base href="http://www.galatasaray.org" target="mainframe">

<basefont> Temel Font

Belgede bir temel font belirlenmesine yarayan bu etiket, CSS kullanılmaya başlandığı için artık kullanılmamaktadır.

<bdo> BiDi Override

Yazılan metnin, yazılış yönünü belirler. Örneğin Türkçe bir sayfada sözcükler soldan sağa yazılır oysa İbranice’de sağdan sola doğru yazılır.

Bağlı Özellikler

dir=”ltr” veya “rtl”

Metnin yazılış yönünü bildirir. rtl right-to-left (sağdan sola), ltr left-to-right (soldan sağa)

Örnekler

Aşağıdaki paragrafları bir web belgesinde deneyin.

<p><bdo dir="rtl">Bu yazı ters yazıldı</bdo></p>
 
<p><bdo dir="ltr">Bu yazı düz yazıldı</bdo></p>

<big> Büyük Metin

Halen kullanılan ama eskimeye yüz tutmuş, yerine Style Sheet önerilen bir etikettir. Başlangıç ve bitiş etiketleri arasında kalan metni normalden bir kat büyük gösterir. İki kez kullanılırsa, iki kat büyük gösterir.

Örnekler
<p>Yazımız daha <big>büyük</big> olsun istiyorsak bu etiketi _
kullanmamız gerekir.</p>
 
<p>Yazımız daha da <big><big>büyük</big></big> olsun istiyorsak _
bu etiketi iki kere kullanmamız gerekir.</p>
 

<blockquote> Block quotation (Alıntı Metin)

Alıntı paragraflar, normal paragrafa göre daha içerden yazılır. Bu etiketin görevi bu etkiyi sağlamaktır. Ancak, kullanışlı bir etiket olduğu için, alıntı olmayan bölümlerde de margin ayarlaması için kullanılabilir. Ancak bu tip ayarlamalar için CSS kullanmak daha uygundur.

Örnek
<blockquote>
<p>Yeni tip PIII işlemciler 0.18 mikron teknolojisi _
ile üretilmektedir.</p>
</blockquote>

Bu örnek paragrafı belgeye eklediğinizde, aşağıdaki görünümü alırsınız.

Yeni tip PIII işlemciler 0.18 mikron teknolojisi ile üretilmektedir.

<body> Belge Gövdesi

Bir web belgesinin, içeriği en geniş olan etiketidir. Browser penceresinde web sayfanıza ait görüntülenen ne varsa, tümü <body> ve </body> etiketleri arasında yer alır. Yani belgenizin gövdesini bu etiket belirler.

Bağlı Özellikleri

background=”URI”

Belgenin artalanında görüntülenecek grafik dosyasının yolu ve adı.

bgcolor=”color”

Belgenin artalan rengini belirten renk kodu ya da renk adı.

text=”color”

Belgenin içeriğindeki metnin renk kodu.

link=”color”

Bildiğiniz gibi, eğer ayarlarla oynamadıysanız, bir web sayfasında verilen bağlantı metinleri mavi renkte gösteriliyor. Bu özellikle belgede verilen linklere ait metinlerin renklerini siz belirlersiniz.

alink=”color”

Bu özellik, o anda aktif olan bağlantı içeren metnin rengini belirlemenizi sağlar.

vlink=”color”

Daha önce ziyaret edilen linkleri belirten metinlerin rengi değişir. Bu özellikle bu rengi de siz belirleyebilirsiniz.

onload=”script”

Belge yüklendiğinde çalıştırılmak istenen bir script varsa, bu özellikle belirtilir.

onunload=”script”

Ziyaretçi aktif sayfadan başka sayfaya gitmek üzere hareketini gerçekleştirdiğinde çalışması istenen script bu özellikle belirtilir.

Örnekler

Bu etiket için verilecek örnek, aslında birçok etiketi kapsar, “ilk web sayfamızı oluşturalım” kısmına bakabilirsiniz.

<br> Satır Kesme

Bir belgede, oluşturulan metinler, paragraflar halinde yer alır. Paragrafları da <p> etiketi ile belirtilir. Her paragraf arasında da bir satırlık bir boşluk olur. Yeni bir paragraf oluşturmadan, yazılan metnin bir alt satırda olması isteniyorsa; yani bir paragraf içinde satır tamamlanmadan, yazılan bir metnin bir alt satırda görünmesi isteniyorsa, alt satıra bölünmesi istenen ilk sözcüğün başına
etiketi konulabilir. Kısacası, bu etiket “satır kesme” işi görür. Bu etiketin sonlandırıcısı yoktur.

Örnek

Aşağıdaki kodu bir sayfa oluşturarak deneyin. Alttakine benzer bir görüntü elde etmelisiniz.

<p>Bu satırın sonu gelmeden<br>metinleri<br>alt satıra<br>geçirelim.</p>

Bu satırın sonu gelmeden
metinleri
alt satıra
geçirelim.

<button> Buton, Düğme

Günümüzde web sayfalarında çeşitli formlar ve butonlar görmemek neredeyse imkansız. Bir formda istenen bilgileri doldurup “GÖNDER” butonunu tıklıyorsunuz, bilgileriniz gitmesi gereken yere gidiyor. İşte bu formların (genellikle) altlarında yer alan butonlar (düğmeler) bu etiket ile oluşturulur.

Bağlı Özellikler

name=”metin”

Butona vereceğiniz ismi belirler. Buradaki isim, butonun üzerinde görüntülenen isim değil, butonla ilgili yapılan işlemlerde kullanılan isimdir.

value=”metin”

Butonun ilk değerini belirtir.

type=”reset” / “submit”

Butonun tipini belirler.

disabled

Butonun belirli bir olay gerçekleşmeden aktive olmaması gerekiyorsa, ya da belirli bir işlem gerçekleştikten sonra aktif olmaması gerekiyorsa eklenecek özelliktir.

accesskey=”karakter”

Butonun kısayol tuşunu belirler.

Örnekler

Aşağıdaki kodları, yeni bir html belgesi oluşturarak body kısmına girin, elde edeceğiniz düğmelerin görüntüleri aşağıdaki gibi olmalıdır.

<button type="reset" name="button1" value= _
"Button">Button</button>

<caption> Tablo Açıklama Yazısı

Oluşturulan bir tabloya ait kısa bir tanım içerir. Bu tanım tablonun üstünde bir başlık halinde yer alır.

Örnekler

Aşağıdaki kodlarla basit bir tablo oluşturalım ve <caption> etiketini kullanalım. Ortaya çıkacak tablonun aynısını kodların altında görebilirsiniz. <caption> etiketi ile bildirilen metnin nerede olduğuna dikkat edin. Örneğimizde kullanılan kodlardan bilmediğiniz varsa, onların ne işe yaradıklarını da kendi bölümlerinden öğrenin.

<table width="300" border="1">
<caption>Web Sayfalarında Renkler ve Kodları</caption>
<thead>
<tr>
               <td>Renk</td>
               <td>Kodu</td>
</tr>
</thead>
<tbody>
<tr>
               <td>Kırmızı</td>
               <td>#FF0000</td>
</tr>
<tr>
               <td>Mavi</td>
               <td>#0000FF</td>
</tr>
</tbody>
</table>
Web Sayfalarında Renkler ve Kodları
RenkKodu
Kırmızı#FF0000
Mavi#0000FF

<center> Ortalanmış Metin

Görevi, başlangıç ve bitiş etiketleri arasında kalan metni bulunduğu yerin ortasına hizalamaktır. Bu bulunulan yer, bir tablo hücresi de olabilir, sayfanın tamamı da olabilir. Bu kodlar arasında kalan metin yatay olarak ortalanmış olarak görüntülenir.

Örnek
<p>center etiketi ile yazacağınız metin,<center>sayfanın ortasına _
</center> hizalanır.</p>

Center etiketi ile yazacağınız metin, sayfanın ortasına hizalanır.

<cite> Başvuru, Kaynak Gösterimi

Metinde geçen bir başvuru kaynağını, bir belgeye, kaynağa başvuruyu içerir.

Örnek
<p>En iyi bilgi kaynaklarından biri olan <cite>Ana Britannica 
Ansiklopedisi</cite> artık bilgisayarlarımızda...</p>

<code> Bilgisayar Kodları

Sayfanızda, bilgisayar kodları, ya da benzeri bir metin yayınlıyorsanız, bu kod ile onları olduğu gibi görüntüleyebilirsiniz. <pre> ya da <tt> etiketleri gibi, bu etiket de içeriğinin yazıtipi olarak normal paragraf metinlerinden farklı biçimde görüntülenmesini sağlar.

Örnek
<p>Bu işlemi yaptırmak için gereken kodlar ise;
<cite>
if k= 10 then<br>
               Showmsg='Yeterli puana sahipsiniz.';<br>
else<br>
               Showmsg='Puanınız yetersiz.';<br>
</cite>
</p>

Elde edeceğiniz görüntü, şöyle olmalıdır;
if k= 10 then
Showmsg=’Yeterli puana sahipsiniz.’;
else
Showmsg=’Puanınız yetersiz.’;

<col> Tablo Sütunu

Bir tablonun herhangi bir sütunu için ayrı attribute’ler tanımlamayı, ayrı biçimlendirmeler yapmayı sağlar. Bir kolonun tüm hücrelerine hitap edecek kodları taşıyabilir. Bir tabloda kullanımı isteğe bağlı olan bu etiket, eğer kullanıldıysa, <caption> etiketinden sonra, <thead> etiketinden önce kullanılmalıdır.

Bağlı Özellikler

span=”sayı”

Sütun özelliklerinin kapsadığı sütun sayısı (Bu özellik, sütunları birleştirmez)

width=”sayı”

Sütunun genişliğinin yüzde ya da piksel olarak belirtilmesini sağlar.

align=”metin”

Sütundaki içeriğin hizalanacağı parametreyi verir. (center, left veya right gibi)

valign=”metin”

Kolonun kapsadığı hücrelerdeki içeriğin dikey hizalamasını bildirir. (center, left veya right gibi)

Bu özellikle ilgili örnek için <colgroup> etiketine bakabilirsiniz.

<colgroup> Tablo Sütun Grubu

Eğer tablonuzdaki her sütuna <col> etiketi ile biçimlendirme vermek isterseniz, her sütun için bu etiketi tekrar tekrar yazmanız gerekecektir. <colgroup> etiketi ile bu işlemleri tek etiketle halledebilirsiniz. Bu etiketi de <caption> etiketi ile <thead> etiketleri arasında kullamalısınız.

Bağlı Özellikler

span=”sayı”

Sütun grubunun kapsadığı sütun sayısını belirtir.

width=”sayı”

Sütun grubundaki her bir sütunun genişliği.

align=”metin”

Sütun grubundaki sütunların kapsadığı hücrelerin içeriklerinin hizalanmasını sağlar.

valign=”metin”

Sütun grubuna dahil sütunların kapsadığı hücrelerdeki içeriğin dikey hizalama yönünü belirtir.

Örnek

Aşağıda bir tablo için hazırlanan kodlar ve bu kodların browser’da görünümü yer alıyor. Örneğimizde, tablomuz 7 sütun içeriyor. Bu 7 sütundan 1. için ayrı, 2, 3 ve 4.ler için ayrı, 5, 6 ve 7.ler için ayrı tanımlamaları tek etiketle yaptık. 1. sütundaki yer alan içerikler sağa hizalanacak ve sütun genişliği 100 piksel olacak, 2, 3 ve 4. sütunların genişliği 70 piksel olacak ve içerik ortaya hizalanacak , son üç sütunun genişlikleri ise 80 piksel olacak ve içerikleri sola hizalanacak.

<table border="1">
  <COLGROUP align="right" width="100">
  <COLGROUP SPAN=3 align="center" width="70">
  <COLGROUP SPAN=3 align="left" width="80">
  <THEAD>
    <TR>
      <TH SCOPE=col ROWSPAN=2>Başlık 1</TH>
      <TH SCOPE=col ROWSPAN=2>Başlık 2</TH>
      <TH SCOPE=col ROWSPAN=2>Başlık 3</TH>
      <TH SCOPE=col ROWSPAN=2>Başlık 4</TH>
      <TH SCOPE=colgroup COLSPAN=3>Diğer Başlık</TH>
    </TR>
    <TR>
      <TH SCOPE=col>Hücre 1</TH>
      <TH SCOPE=col>Hücre 2</TH>
      <TH SCOPE=col>Hücre 3</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Veri 1</TD>
      <TD>Veri 2</TD>
      <TD>Veri 3</TD>
      <TD>Veri 4</TD>
      <TD>Veri 5</TD>
      <TD>Veri 6</TD>
      <TD>Veri 7</TD>
    </TR>
  </TBODY>
</TABLE>

DİĞER BLOG / DUYURU