HTML DİLİ
HTML Dosyası Nedir?
HTML, Hyper Text Markup Language'in kısaltmasıdır.
HTML çeşitli anlamlara gelen kodlamalar (tag) ve düz metinden oluşur.
Bu kodlar ancak bir Web Browser (Internet Explorer, Firefox) tarafından anlamlı hale getirilebilir.
Bu kodla yazılmış dosyaların uzantıları genellikle html ya da htm'dir.
HTML, en basit yolla bir not defteri ile yazılabilir.
Denemek İster Misiniz?
Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp deneme.html olarak kaydedin. Sonra da bu dosyayı açın.
<html>
<head>
<title>Benim Sayfam</title>
</head>
<body>
Bu benim ilk sayfam...
</body>
</html>
HTML Görünümü
Bu benim ilk sayfam...
Şimdi isterseniz bahsedilen HTML kodlarının çalışma mantığını ve ne işe yaradıklarını öğrenelim...
HTML'YE GENEL BAKIŞ
HTML Kodlarını Anlamak
Bu dili kodlamak için öncelikle HTML, XHTML, XML gibi dillerin temel yapı taşı olan elementlerin (aynı zamanda html kodu, html etiketi, html tagı olarak geçebilir) nasıl çalıştıkları hakkında bilgi vermek gerekir. Bu kodlar < ile başlayıp > ile biten anahtarlardır.
<html>
Tüm HTML belgesi bu şekil hazırlanmış kodlardan ve aralarında geçen metin (bunlar arama motorları tarafından ya da ziyaretçi tarafından çoğunlukla görülen düz metinler)'den oluşur. Bir HTML kodu ile ilgili bir özellik belirtilecekse tırnak işareti arasında özellik="değer" şeklinde yazılır:
<body bgcolor="black">
Hangi HTML tagının hangi işe yaradığı ve hangi özellikleri desteklediğini ilerleyen sayfalarda göreceksiniz. Şimdi elementler hakkında biraz daha fazla bilgi edinelim...
ELEMENTLER
Özellikleri
HTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur.
Bu kodlar < ile başlayıp > ile biterler.
Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b>
Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />
Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır.
Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz:
<b>Bu bir kalın yazıdır...</b>
Değişmez Sayfa Yapısı
Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:
<html>
<head>
<title>Sayfa Başlığı</title>
(**** etiketler, scriptler, RSS yolları ve CSS dosyası)
</head>
<body>
(Diğer tüm elementler ve düz metin)
</body>
</html>
W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir..
Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...
İpucu: HTML kodlarını öğrenirken anında deneme yapmak için sağ üstte bulunan HTML Editörü'nü kullanabilirsiniz..
BASİT KODLAR
Bu bölümde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğreneceğiz.
Başlık Kullanma
Başlıklar <H1>'den <H6>'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...
<h1>H1 Başlık</h1>
<h2>H2 Başlık</h2>
<h3>H3 Başlık</h3>
<h4>H4 Başlık</h4>
<h5>H5 Başlık</h5>
<h6>H6 Başlık</h6>
H1 Başlık
H2 Başlık
H3 Başlık
H4 Başlık
H5 Başlık
H6 Başlık
Paragraflar
Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
<p>Bu bir paragraf örneği..</p>
<p>Bu da başka bir paragraf örneği..</p>
Bu bir paragraf örneği..
Bu da başka bir paragraf örneği..
NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve **** dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.
<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>
Bu bir
paragraf ve satır atlama
örneği..
Temelde <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği).
ÖZELLİKLER
Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunları ozellik="deger" tarzı bir kullanımla belirtmekteydik. Şimdi bunu örnekleyelim:
<h1 align="center">Ortalanmış Bir Başlık</h1>
H1 Başlık
Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir.
Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak:
<table> - bir tablo başlattığımızı anlattık.
<table border="0"> - bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık.
Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Örneğin:
<a href="#" title="Murat'ın sayfası için tıklayın..">Benim Bağlantım 1</h1>
<a href="#" title='"Murat" ın sayfası için tıklayın..'>Benim Bağlantım 2</h1>
undan sonraki derslerde nesneleri, kullanabileceğiniz özellikleri ile birlikte tanıyacağız.
BİÇİMLENDİRME
HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız. Bunların birbirinden farklı en önemlilerine aşağıdaki listeden ulaşabilirsiniz. Tüm metin biçimlendirme çeşitleri ise aşağıdaki örnekte verilmiştir.
Etiket Anlamı
<b> Kalın yazmak.
<i> Sağa yatık (italik) yazmak.
<u> Altı çizili yazmak.
<del> Üstü çizili yazmak.
<sup> Üs yazmak.
<sub> Alt hizada yazı yazmak.
<big> Büyük yazı.
<small> Küçük yazı.
<b>Kalın bir yazı</b><br />
<i>Sağa yatık bir yazı</i><br />
<u>Altı çizili yazı.</u><br />
<del>Üstü çizili yazı.</del><br /><br />
Normal Metin <sub>Yazı hizasının altında küçük yazı.</sub><br /><br />
Normal Metin <sup>Yazı hizasının üstünde küçük yazı.</sup><br /><br />
<big>Büyük bir yazı</big><br />
<small>Küçük bir yazı</small><br /><br />
<em>Vurgulu bir yazı</em><br />
<strong>Vurgulu bir yazı</strong><br />
<ins>Vurgulu bir yazı.</ins><br />
<s>Vurgulu bir yazı.</s><br />
<strike>Vurgulu bir yazı.</strike><br />
Sağa yatık bir yazı
Altı çizili yazı.
Üstü çizili yazı.
Normal Metin Yazı hizasının altında küçük yazı.
Normal Metin Yazı hizasının üstünde küçük yazı.
Büyük bir yazı
Küçük bir yazı
Vurgulu bir yazı
Vurgulu bir yazı
Vurgulu bir yazı.
Vurgulu bir yazı.
Vurgulu bir yazı.
Yazı Tipi, Yazı Boyutu ve Renk Seçimi
Bunun için <font> kodunu kullanıyoruz. Örneği inceleyelim:
<font face="Tahoma" size="1" color="red">Bu 1. örnek yazı..</font><br />
<font face="Verdana" size="2" color="blue">Bu 2. örnek yazı..</font><br />
<font face="Times New Roman" size="3" color="#CCFFCC">Bu 3. örnek yazı..</font><br />
Bu 1. örnek yazı..
Bu 2. örnek yazı..
Bu 3. örnek yazı..
face="yazıtipi" - Yazı tipi, font klasöründeki adıyla yazılır.
size="boyut" - 1-6 arasında bir değerdir.
color="renk" - Yazı rengini burdan belirtiriz. Renklerle ilgili bilgi verilecek..
ÖZEL KARAKTERLER
Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. Örneğin (<) karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak kodlamalarda soruna yol açabilir. Böyle durumlarda (&) ya da (#) ile başlayan ve (
ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız.
Kaynak koduna baktığımızda bunlar < şeklinde görülmektedir. Fakat tarayıcının (<) işaretini oluşturduğunu görürüz.
Gözardı Edilemez Boşluklar
Normalde HTML dilinde boşluk ( ) karakterleri bazı özel durumlar hariç sayılmaz. Yani 10 tane boşluk kullanmış da olsanız bu tarayıcı tarafından boşluk yokmuş gibi algılanır. Bu durumu da özel karakterlerle halledebiliriz. Böyle bir durumda boşluk bırakmak için kullanacağımız metin ( )'dir. Aşağıda iki farklı örnekte birinde 10 tane boşluk karakteri, diğerinde 10 tane kullanıldı.
Bu 10'luk standart boşluk.
Bu 10'luk özel boşluk
Hedef Tanım Kullanım
(Boşluk) Boşluk vermeye yarar.
< Küçüktür işareti. <
> Büyüktür işareti. >
& Ve işareti. &
" Tırnak. "
' Ayıraç. '
Bunun dışında fazla kullanılmamakla birlikte © (©), ® (®) gibi işaretlerinde özel kullanım şekilleri vardır. Bunların tamamı HTML Entities olarak geçer.
BAĞLANTILAR
Bir HTML belgesinde bağlantı (link) verme işini <a href="adres"> koduyla yapmaktayız. Link verdiğimiz kelime ortaya gelecek şekilde yine </a> ile bağlantı verme işini sonlandırmaktayız. Bu şekilde başka bir sayfaya ya da web sitesie bağlantı veririz. Aynı zamanda bu yolla bir müzik dosyası, bir zip arşivi vb. de link vermeniz mümkün.
Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim:
<a href="index.html">HTML Dersleri için buraya tıklayın (Sayfa)</a>
<a href="http://sitesi.web.tr/">Ana sayfa için buraya tıklayın (Site).</a>
<a href="mailto:[email protected]">Bize e-mail göndermek için buraya tıklayın (E-mail).</a>
<a href="http://html.sitesi.web.tr/images/html.gif">Site logosunu görmek için buraya tıklayın (GIF resim dosyası).</a>
Ana sayfa için buraya tıklayın (Sayfa).
Ana sitemiz için buraya tıklayın (Site)
Bize e-mail göndermek için buraya tıklayın (E-mail).
Site logosunu görmek için buraya tıklayın (GIF resim dosyası).
Dikkat: Bir siteye link verirken Index of / şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlaka http:// ile başlanmalıdır.
Bağlantıyı Yeni Pencerede Açmak
Bunun için target="_blank" özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır:
<a href="http://sitesi.web.tr/" target="_blank">Ana sitemizi yeni bir sayfada açmak için tıklayın..</a>
Ana sitemizi yeni bir sayfada açmak için tıklayın..
Sayfa İçi Bağlantılar
Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name="" özelliğinden yararlanırız. Böyle durumlarda href="" özelliği kullanılmaz.
Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek <a name="etiket"></a> şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) <a href="#etiket">(metin)</a> şeklinde işaretlediğimiz yere link veriyoruz.
<a href="#top">Sayfa Başı</a>
Sayfa Başı
Örnekte görüldüğü gibi tıklandığı zaman daha önce <a name="top"></a> ile Bağlantılar yazısının hemen üstünde belirttiğimiz yere gidiyor. Bu bölüme dışarıdan link vermek için href="baglantilar.html#top" kullanılabilir. Sayfa yüklendikten sonra işaretli kısım görünecektir.
FRAME KULLANMAK
Frame, HTML'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencereler. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Biz yine de en önemli kısımlarıyla ele alalım:
Pencereleri bölmeye <frameset> koduyla başlarız. Dikkat etmemiz gereken <body></body> arasında yazılamaması gerektiğidir. Bu kısım frame tekniği desteklemeyen tarayıcılar için <noframes></noframes> arasında kullanılacaktır.
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Burada cols="deger1,deger2" şeklinde bir kullanım dikkatinizi çekmiştir. Burada belirteceğimiz değerler pencere sütunlarının oranlarını belirtmektedir. yatay pencereler kullanacaksak bu kez rows="deger1,deger2" şeklinde kullanmalıyız.
Bahsi geçen değerler yüzde (%) olarak ifade edilebileceği gibi piksel olarak da yazılabilir. Eğer bir pencerenin boyutu, diğeri için belirtilen dışındaki alan olacaksa (*) kullanırız. Bir örnek: cols="200,*" yazarsak. İlk pencere (frame_a.htm) 200 piksel genişliğinde olacaktır, diğer pencere ise (frame_b.htm) geriye kalan tüm alanı kaplayacaktır.
Son olarak şunu ekleyelim, değerler pencere sayısı kadar yazılacaktır. Eğer 3 pencere kullansaydık. Bu kez 3 pencere için sırasıyla ayarlama yapacaktık: cols="200,25%,*" gibi.
<frameset cols="25%,25%,*">
<noframes>
<body>Eger tarayıcı frame desteklemiyorsa...</body>
</noframes>
<frame src ="venus.htm" />
<frame src ="mars.htm" />
<frame src ="jupiter.htm" />
</frameset>
Frame Desteklemeyen Tarayıcılar - noframes
Bunun için frameset açılış ve kapanış etiketleri arasında <noframes>(tarayıcınız frame desteklemiyor mesajı)</noframes> şeklinde bir bölüm koyuyoruz. Burası html sayfamızın devamıymış gibi <body></body> tagları arasına almalıyız.
Yatay ve Dikey Pencereleri Bir Arada Kullanmak
Bunun için frame içinde frame kullanmalıyız. Üst tarafta yatay bir pencere ve hemen altında sağ ve sol olarak ikiye bölünmüş bir pencere örneği verecek olursak:
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
Frame Kenarlığı ve Pencere Boyutlarını Sabitleme
Frameleri birbirinden ayıran çizgiyi yok etmek için <frame src="#"> koduna frameborder="0" özelliği eklememiz yeterlidir.
Pencere boyutları sizin belirttiğiniz gibi başlangıçta çalışmakta fakat kullanıcı tarafından değiştirilebilmektedir. Bunu engellemek için <frame src="#"> koduna noresize="noresize" özelliği eklememiz yeterlidir.
IFRAME Kullanmak
Bunun yukarıda anlatılandan farklı yanı normal bir HTML belgesinde farklı bir sayfa ya da site için pencere açmanıza yaramaktadır. Pencere içerisinde boyutu belirttiğiniz boyutlarda olmak üzere belirttiğiniz site görünecektir:
<iframe src="http://kod.anime.web.tr/google.htm" frameborder="0" width="184" height="94" scrolling="no"></iframe>
Yukarıda görüldüğü gibi http://kod.anime.web.tr/google.htm adresini sayfamızda kullandık. iframe kodu içerisinde geçen:
frameborder="0" - Kenarlık kullanılmayacağını belirtir.
width="184" - 184 piksel genişlikte olacağını belirtir.
height="94" - 94 piksel yükseklikte olacağını belirtir.
scrolling="no" - Kaydırma çubuğunu gösterme demek.
TABLOLARLA ÇALIŞMAK
Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:
Kod Anlamı
<table> Tabloya başlamak.
<tr> Satıra başlamak.
<td> Sütuna başlamak.
<table>
<tr>
<td>satır 1, sütun 1</td>
<td>satır 1, sütun 2</td>
</tr>
<tr>
<td>satır 2, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
</table>
HTML Görünümü
satır 1, sütun 1 satır 1, sütun 2
satır 2, sütun 1 satır 2, sütun 2
Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.
<table border="1">
<tr>
<td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>
</tr>
<tr>
<td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
<tr>
<td>satır 3, sütun 2</td>
</tr>
</table>
satır 1, sütun 1 ve 2 birleşti
satır 2 ve 3 birleşti, sütun 1 satır 2, sütun 2
satır 3, sütun 2
Dikkat edilirse rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Bu da satır 3, sütun 2'yi oluşturdu. Bu sayılarda yapacağınız yanlışlık tabloda görünümde sorunlar çıkaracaktır.
Tablo Özellikleri
Özellik Anlamı
border="0" Tablo kenarlığı boyutu.
cellspacing="0" Sütunlar arası kenarlık boşluğu.
cellpadding="0" Satırlar arası kenarlık boşluğu.
width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
TD (Sütun) Özellikleri
Özellik Anlamı
align="hiza" Kutu hizası, left, right, center kullanılabilir.
width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
height="yukseklik" Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.
LİSTELEME
Bu dersimizde 3 tür listeleme şeklini ve komutlarını öğreneceğiz. Bunlar Madde İşaretleri, Numaralandırma ve Kategorileme.
Madde İşaretleri
Klasik listeleme şeklidir. Liste <ul> ile başlar ve </ul> ile biter. Arasına ise <li></li> arasına alınacak şekilde maddeler yerleştirilir:
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Kola</li>
</ul>
* Çay
* Kahve
* Kola
NOT: Sadece <li></li> kullanarak da listeme yapılabilir. Fakat bu şekilde kullanılırsa maddeler hemen satır başlangıcında görünecektir.
Numaralandırma
Eklenen nesneleri numaralandırarak sıralar. Bir öncekinden farklı olarak liste <ol> ile başlar ve </ol> ile biter. Arasına ise <li></li> arasına alınacak şekilde maddeler yerleştirilir:
<ol>
<li>Çay</li>
<li>Kahve</li>
<li>Kola</li>
</ol>
1.Çay
2.Kahve
3.Kola
Kategori Şekilde Listeleme
Bu şekilde bir listeleme kullanarak maddelerin altına açıklama yazılabilir. Liste <dl> ile başlar ve </dl> ile biter. Arasına ise 1. dereceden yakın <dt></dt>, 2. dereceden yakın <dd></dd> kullanılarak arasına sıralanacak nesneler alınır.
<dl>
<dt>Kahve</dt>
<dd>Kahverengidir</dd>
<dd>Sıcaktır</dd>
<dt>Süt</dt>
<dd>Beyazdır</dd>
</dl>
Kahve
Kahverengidir
Sıcaktır
Süt
Beyazdır
FORM NESNELERİ
Formları site ziyaretçileri ya da kullanıcılarından bilgi alma amaçlı kullanırız. Onlardan düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak bilgiler alırız. Bir form alanı <form> ile başlar ve </form> ile biter. Öncelikle bilgi amaçlı yerleştireceğimiz form nesnelerini tanıyalım.
Yazı Alanları ve Form Gönderme
Bu bölümde kısa metinler, uzun metinler ve şifre kutularını tanıyacağız.
<form name="form" action="index.asp" method="post">
<b>Kullanıcı Adı:</b><br />
<input type="text" name="isim" size="24"><br /><br />
<b>Şifre:</b><br />
<input type="password" name="sifre" size="16"><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br />
</form>
Kullanıcı Adı:
Şifre:
name="isim" - Form için bir isim belirleyin, bu isim bilgileri değerlendirirken yardımcı olur.
action="dosya" - Formdan alınan bilgiler hangi dosyaya gönderilecek yazılır.
method="post" - Hangi yöntemle formun teslim edileceği. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.
type="tür" - Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik.
size="boyut" - Nesnenin uzunluğu sadece type değeri text ya da password ise geçerlidir.
name="isim" - Forma isim verdiğimiz gibi nesnelere de isim vermeliyiz. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki isimden yola çıkarız.
value="deger" - Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz.
Görüldüğü üzere type="" bize form nesnesini şekillendirme şansı veriyor. Bazı durumlarda kullanıcıdan uzun bilgi almamız gerekebilir. Bu durumda <textarea></textarea> kodunu kullanarak metin kutusu yapabiliriz.
<form name="form" action="index.asp" method="post">
<b>Yorumunuzu Yazın:</b><br />
<textarea cols="40" rows="4">Yorum Kutusu</textarea><br /><br />
</form>
Yorumunuzu Yazın:
KUTU VAR
cols="sutun sayısı" Sütun sayısı.
rows="satır sayısı" Satır sayısı.
Seçim Kutuları
Yine <input> komutu ile tür bölümüne radio yazarak çoktan seçmeli bir form nesnesi oluşturulabilir:
input type="radio" name="cinsiyet" value="erkek"> Erkek <br />
<input type="radio" name="cinsiyet" value="kiz"> Kız <br />
Erkek
Kız
NOT: Sadece bir seçim yapılabilmesi için mutlaka ilgili seçeneklerde name="" değeri aynı olmalıdır.
Eğer birden fazla nesne seçebilmelerini sağlayacaksak bu kez checkbox türünden yararlanırız.
<input type="checkbox" name="araba_var" value="araba"> Arabam var. <br />
<input type="checkbox" name="ev_var" value="ev"> Evim var. <br />
Arabam var.
Evim var.
Açılır Seçim Kutusu
Seçim kutusu eklemenin diğer bir yolu da <select> kodudur. Bunun kullanımı aşağıdaki gibidir.
<select name="renk">
<option value="beyaz">Beyaz</option>
<option value="beyaz">Kırmızı</option>
<option value="beyaz">Siyah</option>
HTML Görünümü
kutu içinde beyaz,sarı,kırmızı yazısı var.
Örnekte value="" ile belirtilen değer form için bilgi, option kodları arasına yazdığımız renk adları ise seçim kutusunda görünenlerdir. Bu nesnemizin adını select komutunun içinde name="renk" şeklinde belirledik.
RESİM EKLEMEK
HTML belgemize resim eklemek için <img> kodundan yararlanırız.
<img src="ornek.jpg" alt="Örnek Resim">
HTML Görünümü
Buradaki src="" özelliği resmin dosya adını yazacağımız yerdir. Eğer resim, html belgemizin olduğu yerde değil ve bir klasörün içindeyse bu kez src değerine "klasor/resim.jpg" şeklinde yazmak gerekecekti. Resmi farklı bir siteden alacaksanız o halde resmin yolunu yazmanız yeterlidir (http:// ile başlamalı ve bu bir resim dosyası olmalı, jpg, gif, png gibi).
Resimlerimize alt="" özelliği kullanarak fare imleci ile üstüne tuttuğumuzda görünecek açıklayıcı bir yazı yazılabilir. Resmimize link verebiliriz. Bunun için normal link komutu arasına resmimizi alırız.
<a href="#"><img src="html.jpg" alt="Örnek Resim"></a>
Görüldüğü gibi kalın bir çizgi görünüyor resmimizin etrafında. Bunu stil dosyasından ayarlayabileceğiniz gibi, border="0" diyerek tamamen yok edebilirsiniz.
<a href="#"><img src="html.jpg" alt="Örnek Resim" border="0"></a>
Resmimizi yazımızın sağına ya da soluna dayamamız mümkün. Bunun için align="hiza" özelliğinden yararlanırız. Bu değer left ise sağa, right ise sola dayalı olacaktır.
<img src="html.jpg" alt="Sağa Dayalı Resim" border="0" align="right">
Ahmet Bey, küçük, ahşap, kırmızı boyalı, iki katlı bir evde otururdu. Erkenden kalkar, "Haydi ya nasip" derdi ve evden çıkardı. Kimseler anlamazdı "Ya nasip" ne demekti? O mahallede herkes gömlek giyerdi, Ahmet Bey bir de ceket diktirdi, mahalleli bundan pek hoşlanmamış gibiydi.<br /><br />
Mahalleli kahvede zaman öldürüyor, sabah akşam sohbet ediyordu. Oysa Ahmet Bey onlardan farklı olarak sessizliği severdi. Mahallelinin sevmediğini bildiği ceketine bir de astar diktirmişti. Mahalleliye dert olmuştu Ahmet Bey'in ceketi.<br /><br />
Ahmet Bey, küçük, ahşap, kırmızı boyalı, iki katlı bir evde otururdu. Erkenden kalkar, "Haydi ya nasip" derdi ve evden çıkardı. Kimseler anlamazdı "Ya nasip" ne demekti? O mahallede herkes gömlek giyerdi, Ahmet Bey bir de ceket diktirdi, mahalleli bundan pek hoşlanmamış
gibiydi.
Mahalleli kahvede zaman öldürüyor, sabah akşam sohbet ediyordu. Oysa Ahmet Bey onlardan farklı olarak sessizliği severdi. Mahallelinin sevmediğini bildiği ceketine bir de astar diktirmişti. Mahalleliye dert olmuştu Ahmet Bey'in ceketi.
ARKA PLAN KULLANMAK
Daha önceden HTML belgesinin klasik bir formatı olduğunu ve bunun dışına çıkılmaması gerektiğini söylemiştik. Bahsettiğimiz kodlar arasında <body>'ye ekleyeceğiniz bgcolor="" özelliği ile html belgesinin arkaplan rengini belirleyebilirsiniz:
Bu özellik içerisine yazılan renk kodları ingilizce, 16'lık ya da RGB değerlerinde belirtilmelidir. Bunlara bir resim editörü yardımıyla ulaşabilirsiniz (Photoshop tarzı).
<body bgcolor="black">
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
Eğer arkaplanda bir resim kullanacaksak bu kez aynı kod için background="resim" şeklinde bir özellik kullanıyoruz.
<body background="arkaplan.jpg">
Burada belirtilen resim arkaplanda döşeli olarak çıkacaktır. Bu iki özelliği aynı zamanda Tablo sütunları ve DIV layerlar gibi birçok alanda kullanabilirsiniz.
Daha kullanışlı arkaplan uygulamaları için CSS Dersleri bölümüne göz gezdirebilirsiniz.
RENKLER
Bir HTML belgesinde kullanılan renkler RGB (Red, Green, Blue) yani Kırmızı - Yeşil - Mavi tonlarının belirtilmesi ile ortaya çıkarlar. Bunlar 16'lık sisteme göre #RRGGBB şeklinde düzenlenir.
Eğer bir kırmızı elde edeceksek, kırmızı tonlar en çok diğerleri en az kullanılmalı. 16'lık sistemde 0 = siyah, koyu, F = beyaz, açık anlamındadır. Buna göre değerleri koyudan açığa doğru sıralayacak olursak: 0123456789ABCDEF şeklinde olacaktır.
16'lık sisteme göre Kırmızı renk #FF0000 olacaktır. Burada dikkat edildiyse sadece kırmızı tonlar en açık belirtildi, yeşil ve mavi ise 0 yani en koyu tonunda bırakıldı.
Bazı Renkler ve Renk Kodları
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CSS (STİL) DOSYALARI
Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır:
Belge içinde:
<style type="text/css" rel="stylesheet">
<!--
(Stiller burada belirtilir)
-->
</style>
Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için:
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet" />
Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır.
Stil Belirlemek
Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:
.stilim {
font: 12pt Tahoma, Verdana;
color: #FF0000;
}
td.stilim {
width: 100px;
font: 10pt Tahoma, Verdana;
color: #000000;
}
Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz:
body {
background-color: #EFEFEF;
font: 8pt Tahoma, Verdana;
color: #000000;
}
td {
font: 10pt Tahoma, Verdana;
color: #FF0000;
}
Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz:
Arkaplan ile İlgili Özellikler
Özellik Açıklama
background-color: renk; Arkaplan rengini belirleriz.
background-image: url('dosya'); Arkaplan resmi belirleriz.
background-repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder.
background: renk url('dosya') tekrar; Yukarıdaki css kodlarını tek bir komutta kullandık.
Yazı ile İlgili Özellikler
Özellik Açıklama
font: boyut, yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur.
color: renk; Yazı rengini belirleriz.
font-weight: bold; Kalın yazmak.
font-style: italic; Sağa yatık yazmak.
text-align: hiza; Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar.
Boyut ile İlgili Özellikler
Özellik Açıklama
width: deger; Genişliği belirtiriz.
height: deger; Yüksekliği belirtiriz.
Kenar ile İlgili Özellikler
Özellik Açıklama
border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır.
border: boyut renk durum; Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir.
Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:
<style type="text/css" rel="stylesheet">
<!--
.ornek {
font: 10pt Tahoma, Verdana, Arial;
color: #0000C0;
}
-->
</style>
<div class="ornek">
Bu belirlediğimiz stille bir yazı...
</div>
Bu belirlediğimiz stille bir yazı...
Görüldüğü üzere herhangi bir koda class="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en ideali bunları öğrenmektir.
**** TAGLAR
Daha önceden değişmez bir HTML yapısından bahsetmiştik.
<html>
<head>
<title>Sayfa Başlığı</title>
(**** etiketler, scriptler, RSS yolları ve CSS dosyası)
</head>
<body>
(Diğer tüm elementler ve düz metin)
</body>
</html>
Şimdi buradaki <head></head> arasında olması gereken nesnelerden en önemlilerini tanıyalım. Burası HTML dosyamız hakkında tarayıcı (browser, kullanıcı) ve arama motorlarına bilgi verdiğimiz kısımdır. Ne tür bilgiler veririz?
Sayfa Başlığı
<head> etiketinden hemen sonra gelmelidir. <title>Sayfa Başlığı</title> şeklinde kullanılır. Burası tarayıcının en üstünde görünecek kısımdır (aynı zamanda görev çubuğunda)..
**** - Dil Kodlaması
Sayfa başlığından sonra ilk ****'mız dil kodlaması üzerinedir. Sayfanın hangi dil ile kodlandığını bu bölüm yardımıyla tanıtırız. Örneğin sitemiz Türkçe yazılmış ve Türkçe karakterler içermekteyse şu etiket eklenmeli:
<**** http-equiv="Content-Type" content="text/html; charset=windows-1254">
Buna bağlı her ülke ve dil için ayrı charset değeri vardır.
**** - Arama Motorları İçin Site Detayları
Keywords isimli **** için arama motorlarına sitenin hangi anahtar kelimeleri içerdiğini yazabilir, Description kısmıyla ise siteniz hakkında bir cümlelik açıklama yazabilirsiniz.
<**** name="Keywords" content="html dersleri, html, html dili">
<**** name="Description" content="HTML dili üzerine makaleler ve HTML dersleri.">
SCRİPT KULLANMAK
Script olarak bahsettiğimiz şey aslında genellikle tarayıcı tabanlı küçük uygulamalardır. Genellikle HEAD (bilgiler) bölümünde yer verildiği gibi BODY bölümünde de kullanılabilir. İki çeşit ekleme yolu vardır.
HTML belgemizin içerisinde javascript kodlarına yer verebiliriz. Bunun için:
<script type="text/javascript" language="JavaScript">
<!--
/* Kodlar buraya gelecek */
-->
</script>
Kodların HTML belgesinde durması, dosya boyutunu arttırdığı gibi fazla kullanışlı değildir. Bu nedenle javascript kodlarımızı bir metin belgesine yazıp sonunu js bitecek şekilde kaydedip aşağıdaki şekilde src="" özelliğinde yolu belirterek eklememiz mümkün:
<script type="text/javascript" language="JavaScript" src="dosyam.js"></script>
Tüm HTML Tagları
HTML programlama dilinde kullanılan tüm kodlar aşağıda listelenmiştir:
Kod Açıklama XHTML
<!--...--> Açıklama eklemek. Var
<!DOCTYPE> Dosya türünü yazmak. Var
<a> Bağlantı vermek. Var
<abbr> Kısaltma. Var
<acronym> Kısaltmayı açıklamak. Var
<address> Adres vermek. Var
<area> Resim üzerinde alan belirtmek. Var
<b> Kalın yazmak. Var
<base> Tüm bağlantılar için ana yolu bildirme. Var
<bdo> Yazı yönünü bildirme. Var
<big> Büyük yazmak. Var
<blockquote> Alıntı yapmak. Var
<body> İçeriğe başlangıcı bildirmek. Var
<br> Satır atlamak. Var
<button> Buton eklemek. Var
<caption> Tablo başlığı belirtme. Var
<center> Hizayı ortalar. Yok
<cite> Alıntı yapmak. Var
<code> Bilgisayar kodu şeklinde yazmak. Var
<col> Tablo sütununu belirtme. Var
<colgroup> Tablo sütun gruplarını belirtme. Var
<dd> Açıklama eklemek. Var
<del> Üstü çizili yazı yazmak. Var
<div> Dosyada alan belirtme. Var
<dfn> Bir terim açıklamak. Var
<dl> Terimler listesi. Var
<dt> Terim açıklamak. Var
<em> Vurgulu yazı. Var
<fieldset> Alan belirleme. Var
<form> Form kullanma. Var
<frame> Alt pencere açmak (frame) Var
<frameset> Alt pencereleri tanımlamaya başlamak. Var
<h1> to <h6> Başlık (1-6 arası) Var
<head> Dosya bilgilerini açıklama bölümü. Var
<hr> Yatay çizgi çekmek. Var
<html> HTML'ye başlamak. Var
<i> Sağa yatık yazmak. Var
<img> Resim eklemek. Var
<input> Form nesnesi eklemek. Var
<ins> Vurgu yapmak. Var
<kbd> Kelime yazdırma. Var
<label> Etiket belirleme. Var
<legend> Bir alan için başlık belirleme. Var
<li> Listeleme. Var
<link> Dosyaya bağlantı verme. Var
<map> Resim tanımlama. Var
<****> Dosya bilgisi tanımlama. Var
<noscript> Script desteği yoksa yapılacaklar. Var
<object> Bir obje ekleme (flash vs.) Var
<ol> Numaralandırılmış liste ekleme. Var
<optgroup> Seçim grubu. Var
<option> Sürükle-bırak seçim listesi. Var
<p> Paragraf. Var
<param> Parametre bildirme. Var
<pre> Formatlı yazı ekleme. Var
<q> Küçük alıntılar için. Var
<samp> Bilgisayar yazı tipi kullanma. Var
********** Script tanımlama. Var
<select> Seçim kutusu tanımlama. Var
<small> Küçük yazma. Var
<span> Bir alan tanımlaması. Var
<strong> Vurgu yapmak. Var
********* Stil belirleme. Var
<sub> Normalden aşağı yazı. Var
<sup> Üs yazmak. Var
<table> Tabloya başlamak. Var
<tbody> Tablo başlangıcı. Var
<td> Sütun belirleme. Var
<textarea> Metin kutusu. Var
<tfoot> Tablo altlığı. Var
<th> Tablo başlığı. Var
<thead> Tablo başlığı. Var
<title> HTML Dosyası başlığı. Var
<tr> Satır belirleme (tablo). Var
<tt> TT Yazı. Var
<ul> Madde işaretli liste. Var
<var> Değer. Var
<xmp> PRE komutunun aynısı. Yok
Bazı HTML tagları script dili ile anlatılan olaylara izin verirler. Bunların ne anlama geldiğini şimdi görelim:
Pencere Olayları
Bunlar BODY ve FRAMESET taglarında kullanılır:
Özellik Açıklama
onload Sayfa yüklenirken yapılacaklar.
unload Sayfa kapatılırken yapılacaklar.
Bir Örnek. Aşağıda yazdığımız kısım sayfa yüklenirken Merhaba! diyen bir iletişim kutusu çıkmasını sağlayacaktır.
<body onload="alert('Merhaba!');">
Form Nesneleri Olayları
Bunlar INPUT taglarında kullanılır:
Özellik Açıklama
onchange Metin değiştirilirse yapılacaklar..
onsubmit Form gönderilirken yapılacaklar..
onreset Form temizlenince yapılacaklar..
onselect Metin seçilirken yapılacaklar..
onclick Tıklandığında yapılacaklar.
Alıntıdır
HTML Dosyası Nedir?
HTML, Hyper Text Markup Language'in kısaltmasıdır.
HTML çeşitli anlamlara gelen kodlamalar (tag) ve düz metinden oluşur.
Bu kodlar ancak bir Web Browser (Internet Explorer, Firefox) tarafından anlamlı hale getirilebilir.
Bu kodla yazılmış dosyaların uzantıları genellikle html ya da htm'dir.
HTML, en basit yolla bir not defteri ile yazılabilir.
Denemek İster Misiniz?
Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp deneme.html olarak kaydedin. Sonra da bu dosyayı açın.
<html>
<head>
<title>Benim Sayfam</title>
</head>
<body>
Bu benim ilk sayfam...
</body>
</html>
HTML Görünümü
Bu benim ilk sayfam...
Şimdi isterseniz bahsedilen HTML kodlarının çalışma mantığını ve ne işe yaradıklarını öğrenelim...
HTML'YE GENEL BAKIŞ
HTML Kodlarını Anlamak
Bu dili kodlamak için öncelikle HTML, XHTML, XML gibi dillerin temel yapı taşı olan elementlerin (aynı zamanda html kodu, html etiketi, html tagı olarak geçebilir) nasıl çalıştıkları hakkında bilgi vermek gerekir. Bu kodlar < ile başlayıp > ile biten anahtarlardır.
<html>
Tüm HTML belgesi bu şekil hazırlanmış kodlardan ve aralarında geçen metin (bunlar arama motorları tarafından ya da ziyaretçi tarafından çoğunlukla görülen düz metinler)'den oluşur. Bir HTML kodu ile ilgili bir özellik belirtilecekse tırnak işareti arasında özellik="değer" şeklinde yazılır:
<body bgcolor="black">
Hangi HTML tagının hangi işe yaradığı ve hangi özellikleri desteklediğini ilerleyen sayfalarda göreceksiniz. Şimdi elementler hakkında biraz daha fazla bilgi edinelim...
ELEMENTLER
Özellikleri
HTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur.
Bu kodlar < ile başlayıp > ile biterler.
Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b>
Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />
Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır.
Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz:
<b>Bu bir kalın yazıdır...</b>
Değişmez Sayfa Yapısı
Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:
<html>
<head>
<title>Sayfa Başlığı</title>
(**** etiketler, scriptler, RSS yolları ve CSS dosyası)
</head>
<body>
(Diğer tüm elementler ve düz metin)
</body>
</html>
W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir..
Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...
İpucu: HTML kodlarını öğrenirken anında deneme yapmak için sağ üstte bulunan HTML Editörü'nü kullanabilirsiniz..
BASİT KODLAR
Bu bölümde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğreneceğiz.
Başlık Kullanma
Başlıklar <H1>'den <H6>'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...
<h1>H1 Başlık</h1>
<h2>H2 Başlık</h2>
<h3>H3 Başlık</h3>
<h4>H4 Başlık</h4>
<h5>H5 Başlık</h5>
<h6>H6 Başlık</h6>
H1 Başlık
H2 Başlık
H3 Başlık
H4 Başlık
H5 Başlık
H6 Başlık
Paragraflar
Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
<p>Bu bir paragraf örneği..</p>
<p>Bu da başka bir paragraf örneği..</p>
Bu bir paragraf örneği..
Bu da başka bir paragraf örneği..
NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve **** dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.
<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>
Bu bir
paragraf ve satır atlama
örneği..
Temelde <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği).
ÖZELLİKLER
Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunları ozellik="deger" tarzı bir kullanımla belirtmekteydik. Şimdi bunu örnekleyelim:
<h1 align="center">Ortalanmış Bir Başlık</h1>
H1 Başlık
Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir.
Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak:
<table> - bir tablo başlattığımızı anlattık.
<table border="0"> - bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık.
Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Örneğin:
<a href="#" title="Murat'ın sayfası için tıklayın..">Benim Bağlantım 1</h1>
<a href="#" title='"Murat" ın sayfası için tıklayın..'>Benim Bağlantım 2</h1>
undan sonraki derslerde nesneleri, kullanabileceğiniz özellikleri ile birlikte tanıyacağız.
BİÇİMLENDİRME
HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız. Bunların birbirinden farklı en önemlilerine aşağıdaki listeden ulaşabilirsiniz. Tüm metin biçimlendirme çeşitleri ise aşağıdaki örnekte verilmiştir.
Etiket Anlamı
<b> Kalın yazmak.
<i> Sağa yatık (italik) yazmak.
<u> Altı çizili yazmak.
<del> Üstü çizili yazmak.
<sup> Üs yazmak.
<sub> Alt hizada yazı yazmak.
<big> Büyük yazı.
<small> Küçük yazı.
<b>Kalın bir yazı</b><br />
<i>Sağa yatık bir yazı</i><br />
<u>Altı çizili yazı.</u><br />
<del>Üstü çizili yazı.</del><br /><br />
Normal Metin <sub>Yazı hizasının altında küçük yazı.</sub><br /><br />
Normal Metin <sup>Yazı hizasının üstünde küçük yazı.</sup><br /><br />
<big>Büyük bir yazı</big><br />
<small>Küçük bir yazı</small><br /><br />
<em>Vurgulu bir yazı</em><br />
<strong>Vurgulu bir yazı</strong><br />
<ins>Vurgulu bir yazı.</ins><br />
<s>Vurgulu bir yazı.</s><br />
<strike>Vurgulu bir yazı.</strike><br />
Sağa yatık bir yazı
Altı çizili yazı.
Üstü çizili yazı.
Normal Metin Yazı hizasının altında küçük yazı.
Normal Metin Yazı hizasının üstünde küçük yazı.
Büyük bir yazı
Küçük bir yazı
Vurgulu bir yazı
Vurgulu bir yazı
Vurgulu bir yazı.
Vurgulu bir yazı.
Vurgulu bir yazı.
Yazı Tipi, Yazı Boyutu ve Renk Seçimi
Bunun için <font> kodunu kullanıyoruz. Örneği inceleyelim:
<font face="Tahoma" size="1" color="red">Bu 1. örnek yazı..</font><br />
<font face="Verdana" size="2" color="blue">Bu 2. örnek yazı..</font><br />
<font face="Times New Roman" size="3" color="#CCFFCC">Bu 3. örnek yazı..</font><br />
Bu 1. örnek yazı..
Bu 2. örnek yazı..
Bu 3. örnek yazı..
face="yazıtipi" - Yazı tipi, font klasöründeki adıyla yazılır.
size="boyut" - 1-6 arasında bir değerdir.
color="renk" - Yazı rengini burdan belirtiriz. Renklerle ilgili bilgi verilecek..
ÖZEL KARAKTERLER
Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. Örneğin (<) karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak kodlamalarda soruna yol açabilir. Böyle durumlarda (&) ya da (#) ile başlayan ve (
ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız.Kaynak koduna baktığımızda bunlar < şeklinde görülmektedir. Fakat tarayıcının (<) işaretini oluşturduğunu görürüz.
Gözardı Edilemez Boşluklar
Normalde HTML dilinde boşluk ( ) karakterleri bazı özel durumlar hariç sayılmaz. Yani 10 tane boşluk kullanmış da olsanız bu tarayıcı tarafından boşluk yokmuş gibi algılanır. Bu durumu da özel karakterlerle halledebiliriz. Böyle bir durumda boşluk bırakmak için kullanacağımız metin ( )'dir. Aşağıda iki farklı örnekte birinde 10 tane boşluk karakteri, diğerinde 10 tane kullanıldı.
Bu 10'luk standart boşluk.
Bu 10'luk özel boşluk
Hedef Tanım Kullanım
(Boşluk) Boşluk vermeye yarar.
< Küçüktür işareti. <
> Büyüktür işareti. >
& Ve işareti. &
" Tırnak. "
' Ayıraç. '
Bunun dışında fazla kullanılmamakla birlikte © (©), ® (®) gibi işaretlerinde özel kullanım şekilleri vardır. Bunların tamamı HTML Entities olarak geçer.
BAĞLANTILAR
Bir HTML belgesinde bağlantı (link) verme işini <a href="adres"> koduyla yapmaktayız. Link verdiğimiz kelime ortaya gelecek şekilde yine </a> ile bağlantı verme işini sonlandırmaktayız. Bu şekilde başka bir sayfaya ya da web sitesie bağlantı veririz. Aynı zamanda bu yolla bir müzik dosyası, bir zip arşivi vb. de link vermeniz mümkün.
Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim:
<a href="index.html">HTML Dersleri için buraya tıklayın (Sayfa)</a>
<a href="http://sitesi.web.tr/">Ana sayfa için buraya tıklayın (Site).</a>
<a href="mailto:[email protected]">Bize e-mail göndermek için buraya tıklayın (E-mail).</a>
<a href="http://html.sitesi.web.tr/images/html.gif">Site logosunu görmek için buraya tıklayın (GIF resim dosyası).</a>
Ana sayfa için buraya tıklayın (Sayfa).
Ana sitemiz için buraya tıklayın (Site)
Bize e-mail göndermek için buraya tıklayın (E-mail).
Site logosunu görmek için buraya tıklayın (GIF resim dosyası).
Dikkat: Bir siteye link verirken Index of / şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlaka http:// ile başlanmalıdır.
Bağlantıyı Yeni Pencerede Açmak
Bunun için target="_blank" özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır:
<a href="http://sitesi.web.tr/" target="_blank">Ana sitemizi yeni bir sayfada açmak için tıklayın..</a>
Ana sitemizi yeni bir sayfada açmak için tıklayın..
Sayfa İçi Bağlantılar
Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name="" özelliğinden yararlanırız. Böyle durumlarda href="" özelliği kullanılmaz.
Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek <a name="etiket"></a> şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) <a href="#etiket">(metin)</a> şeklinde işaretlediğimiz yere link veriyoruz.
<a href="#top">Sayfa Başı</a>
Sayfa Başı
Örnekte görüldüğü gibi tıklandığı zaman daha önce <a name="top"></a> ile Bağlantılar yazısının hemen üstünde belirttiğimiz yere gidiyor. Bu bölüme dışarıdan link vermek için href="baglantilar.html#top" kullanılabilir. Sayfa yüklendikten sonra işaretli kısım görünecektir.
FRAME KULLANMAK
Frame, HTML'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencereler. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Biz yine de en önemli kısımlarıyla ele alalım:
Pencereleri bölmeye <frameset> koduyla başlarız. Dikkat etmemiz gereken <body></body> arasında yazılamaması gerektiğidir. Bu kısım frame tekniği desteklemeyen tarayıcılar için <noframes></noframes> arasında kullanılacaktır.
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Burada cols="deger1,deger2" şeklinde bir kullanım dikkatinizi çekmiştir. Burada belirteceğimiz değerler pencere sütunlarının oranlarını belirtmektedir. yatay pencereler kullanacaksak bu kez rows="deger1,deger2" şeklinde kullanmalıyız.
Bahsi geçen değerler yüzde (%) olarak ifade edilebileceği gibi piksel olarak da yazılabilir. Eğer bir pencerenin boyutu, diğeri için belirtilen dışındaki alan olacaksa (*) kullanırız. Bir örnek: cols="200,*" yazarsak. İlk pencere (frame_a.htm) 200 piksel genişliğinde olacaktır, diğer pencere ise (frame_b.htm) geriye kalan tüm alanı kaplayacaktır.
Son olarak şunu ekleyelim, değerler pencere sayısı kadar yazılacaktır. Eğer 3 pencere kullansaydık. Bu kez 3 pencere için sırasıyla ayarlama yapacaktık: cols="200,25%,*" gibi.
<frameset cols="25%,25%,*">
<noframes>
<body>Eger tarayıcı frame desteklemiyorsa...</body>
</noframes>
<frame src ="venus.htm" />
<frame src ="mars.htm" />
<frame src ="jupiter.htm" />
</frameset>
Frame Desteklemeyen Tarayıcılar - noframes
Bunun için frameset açılış ve kapanış etiketleri arasında <noframes>(tarayıcınız frame desteklemiyor mesajı)</noframes> şeklinde bir bölüm koyuyoruz. Burası html sayfamızın devamıymış gibi <body></body> tagları arasına almalıyız.
Yatay ve Dikey Pencereleri Bir Arada Kullanmak
Bunun için frame içinde frame kullanmalıyız. Üst tarafta yatay bir pencere ve hemen altında sağ ve sol olarak ikiye bölünmüş bir pencere örneği verecek olursak:
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
Frame Kenarlığı ve Pencere Boyutlarını Sabitleme
Frameleri birbirinden ayıran çizgiyi yok etmek için <frame src="#"> koduna frameborder="0" özelliği eklememiz yeterlidir.
Pencere boyutları sizin belirttiğiniz gibi başlangıçta çalışmakta fakat kullanıcı tarafından değiştirilebilmektedir. Bunu engellemek için <frame src="#"> koduna noresize="noresize" özelliği eklememiz yeterlidir.
IFRAME Kullanmak
Bunun yukarıda anlatılandan farklı yanı normal bir HTML belgesinde farklı bir sayfa ya da site için pencere açmanıza yaramaktadır. Pencere içerisinde boyutu belirttiğiniz boyutlarda olmak üzere belirttiğiniz site görünecektir:
<iframe src="http://kod.anime.web.tr/google.htm" frameborder="0" width="184" height="94" scrolling="no"></iframe>
Yukarıda görüldüğü gibi http://kod.anime.web.tr/google.htm adresini sayfamızda kullandık. iframe kodu içerisinde geçen:
frameborder="0" - Kenarlık kullanılmayacağını belirtir.
width="184" - 184 piksel genişlikte olacağını belirtir.
height="94" - 94 piksel yükseklikte olacağını belirtir.
scrolling="no" - Kaydırma çubuğunu gösterme demek.
TABLOLARLA ÇALIŞMAK
Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:
Kod Anlamı
<table> Tabloya başlamak.
<tr> Satıra başlamak.
<td> Sütuna başlamak.
<table>
<tr>
<td>satır 1, sütun 1</td>
<td>satır 1, sütun 2</td>
</tr>
<tr>
<td>satır 2, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
</table>
HTML Görünümü
satır 1, sütun 1 satır 1, sütun 2
satır 2, sütun 1 satır 2, sütun 2
Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir.
<table border="1">
<tr>
<td colspan="2">satır 1, sütun 1 ve 2 birleşti</td>
</tr>
<tr>
<td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>
<td>satır 2, sütun 2</td>
</tr>
<tr>
<td>satır 3, sütun 2</td>
</tr>
</table>
satır 1, sütun 1 ve 2 birleşti
satır 2 ve 3 birleşti, sütun 1 satır 2, sütun 2
satır 3, sütun 2
Dikkat edilirse rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Bu da satır 3, sütun 2'yi oluşturdu. Bu sayılarda yapacağınız yanlışlık tabloda görünümde sorunlar çıkaracaktır.
Tablo Özellikleri
Özellik Anlamı
border="0" Tablo kenarlığı boyutu.
cellspacing="0" Sütunlar arası kenarlık boşluğu.
cellpadding="0" Satırlar arası kenarlık boşluğu.
width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
TD (Sütun) Özellikleri
Özellik Anlamı
align="hiza" Kutu hizası, left, right, center kullanılabilir.
width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.
height="yukseklik" Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir.
class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).
NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.
LİSTELEME
Bu dersimizde 3 tür listeleme şeklini ve komutlarını öğreneceğiz. Bunlar Madde İşaretleri, Numaralandırma ve Kategorileme.
Madde İşaretleri
Klasik listeleme şeklidir. Liste <ul> ile başlar ve </ul> ile biter. Arasına ise <li></li> arasına alınacak şekilde maddeler yerleştirilir:
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Kola</li>
</ul>
* Çay
* Kahve
* Kola
NOT: Sadece <li></li> kullanarak da listeme yapılabilir. Fakat bu şekilde kullanılırsa maddeler hemen satır başlangıcında görünecektir.
Numaralandırma
Eklenen nesneleri numaralandırarak sıralar. Bir öncekinden farklı olarak liste <ol> ile başlar ve </ol> ile biter. Arasına ise <li></li> arasına alınacak şekilde maddeler yerleştirilir:
<ol>
<li>Çay</li>
<li>Kahve</li>
<li>Kola</li>
</ol>
1.Çay
2.Kahve
3.Kola
Kategori Şekilde Listeleme
Bu şekilde bir listeleme kullanarak maddelerin altına açıklama yazılabilir. Liste <dl> ile başlar ve </dl> ile biter. Arasına ise 1. dereceden yakın <dt></dt>, 2. dereceden yakın <dd></dd> kullanılarak arasına sıralanacak nesneler alınır.
<dl>
<dt>Kahve</dt>
<dd>Kahverengidir</dd>
<dd>Sıcaktır</dd>
<dt>Süt</dt>
<dd>Beyazdır</dd>
</dl>
Kahve
Kahverengidir
Sıcaktır
Süt
Beyazdır
FORM NESNELERİ
Formları site ziyaretçileri ya da kullanıcılarından bilgi alma amaçlı kullanırız. Onlardan düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak bilgiler alırız. Bir form alanı <form> ile başlar ve </form> ile biter. Öncelikle bilgi amaçlı yerleştireceğimiz form nesnelerini tanıyalım.
Yazı Alanları ve Form Gönderme
Bu bölümde kısa metinler, uzun metinler ve şifre kutularını tanıyacağız.
<form name="form" action="index.asp" method="post">
<b>Kullanıcı Adı:</b><br />
<input type="text" name="isim" size="24"><br /><br />
<b>Şifre:</b><br />
<input type="password" name="sifre" size="16"><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br />
</form>
Kullanıcı Adı:
Şifre:
name="isim" - Form için bir isim belirleyin, bu isim bilgileri değerlendirirken yardımcı olur.
action="dosya" - Formdan alınan bilgiler hangi dosyaya gönderilecek yazılır.
method="post" - Hangi yöntemle formun teslim edileceği. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.
type="tür" - Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik.
size="boyut" - Nesnenin uzunluğu sadece type değeri text ya da password ise geçerlidir.
name="isim" - Forma isim verdiğimiz gibi nesnelere de isim vermeliyiz. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki isimden yola çıkarız.
value="deger" - Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz.
Görüldüğü üzere type="" bize form nesnesini şekillendirme şansı veriyor. Bazı durumlarda kullanıcıdan uzun bilgi almamız gerekebilir. Bu durumda <textarea></textarea> kodunu kullanarak metin kutusu yapabiliriz.
<form name="form" action="index.asp" method="post">
<b>Yorumunuzu Yazın:</b><br />
<textarea cols="40" rows="4">Yorum Kutusu</textarea><br /><br />
</form>
Yorumunuzu Yazın:
KUTU VAR
cols="sutun sayısı" Sütun sayısı.
rows="satır sayısı" Satır sayısı.
Seçim Kutuları
Yine <input> komutu ile tür bölümüne radio yazarak çoktan seçmeli bir form nesnesi oluşturulabilir:
input type="radio" name="cinsiyet" value="erkek"> Erkek <br />
<input type="radio" name="cinsiyet" value="kiz"> Kız <br />
Erkek
Kız
NOT: Sadece bir seçim yapılabilmesi için mutlaka ilgili seçeneklerde name="" değeri aynı olmalıdır.
Eğer birden fazla nesne seçebilmelerini sağlayacaksak bu kez checkbox türünden yararlanırız.
<input type="checkbox" name="araba_var" value="araba"> Arabam var. <br />
<input type="checkbox" name="ev_var" value="ev"> Evim var. <br />
Arabam var.
Evim var.
Açılır Seçim Kutusu
Seçim kutusu eklemenin diğer bir yolu da <select> kodudur. Bunun kullanımı aşağıdaki gibidir.
<select name="renk">
<option value="beyaz">Beyaz</option>
<option value="beyaz">Kırmızı</option>
<option value="beyaz">Siyah</option>
HTML Görünümü
kutu içinde beyaz,sarı,kırmızı yazısı var.
Örnekte value="" ile belirtilen değer form için bilgi, option kodları arasına yazdığımız renk adları ise seçim kutusunda görünenlerdir. Bu nesnemizin adını select komutunun içinde name="renk" şeklinde belirledik.
RESİM EKLEMEK
HTML belgemize resim eklemek için <img> kodundan yararlanırız.
<img src="ornek.jpg" alt="Örnek Resim">
HTML Görünümü
Buradaki src="" özelliği resmin dosya adını yazacağımız yerdir. Eğer resim, html belgemizin olduğu yerde değil ve bir klasörün içindeyse bu kez src değerine "klasor/resim.jpg" şeklinde yazmak gerekecekti. Resmi farklı bir siteden alacaksanız o halde resmin yolunu yazmanız yeterlidir (http:// ile başlamalı ve bu bir resim dosyası olmalı, jpg, gif, png gibi).
Resimlerimize alt="" özelliği kullanarak fare imleci ile üstüne tuttuğumuzda görünecek açıklayıcı bir yazı yazılabilir. Resmimize link verebiliriz. Bunun için normal link komutu arasına resmimizi alırız.
<a href="#"><img src="html.jpg" alt="Örnek Resim"></a>
Görüldüğü gibi kalın bir çizgi görünüyor resmimizin etrafında. Bunu stil dosyasından ayarlayabileceğiniz gibi, border="0" diyerek tamamen yok edebilirsiniz.
<a href="#"><img src="html.jpg" alt="Örnek Resim" border="0"></a>
Resmimizi yazımızın sağına ya da soluna dayamamız mümkün. Bunun için align="hiza" özelliğinden yararlanırız. Bu değer left ise sağa, right ise sola dayalı olacaktır.
<img src="html.jpg" alt="Sağa Dayalı Resim" border="0" align="right">
Ahmet Bey, küçük, ahşap, kırmızı boyalı, iki katlı bir evde otururdu. Erkenden kalkar, "Haydi ya nasip" derdi ve evden çıkardı. Kimseler anlamazdı "Ya nasip" ne demekti? O mahallede herkes gömlek giyerdi, Ahmet Bey bir de ceket diktirdi, mahalleli bundan pek hoşlanmamış gibiydi.<br /><br />
Mahalleli kahvede zaman öldürüyor, sabah akşam sohbet ediyordu. Oysa Ahmet Bey onlardan farklı olarak sessizliği severdi. Mahallelinin sevmediğini bildiği ceketine bir de astar diktirmişti. Mahalleliye dert olmuştu Ahmet Bey'in ceketi.<br /><br />
Ahmet Bey, küçük, ahşap, kırmızı boyalı, iki katlı bir evde otururdu. Erkenden kalkar, "Haydi ya nasip" derdi ve evden çıkardı. Kimseler anlamazdı "Ya nasip" ne demekti? O mahallede herkes gömlek giyerdi, Ahmet Bey bir de ceket diktirdi, mahalleli bundan pek hoşlanmamış
gibiydi.
Mahalleli kahvede zaman öldürüyor, sabah akşam sohbet ediyordu. Oysa Ahmet Bey onlardan farklı olarak sessizliği severdi. Mahallelinin sevmediğini bildiği ceketine bir de astar diktirmişti. Mahalleliye dert olmuştu Ahmet Bey'in ceketi.
ARKA PLAN KULLANMAK
Daha önceden HTML belgesinin klasik bir formatı olduğunu ve bunun dışına çıkılmaması gerektiğini söylemiştik. Bahsettiğimiz kodlar arasında <body>'ye ekleyeceğiniz bgcolor="" özelliği ile html belgesinin arkaplan rengini belirleyebilirsiniz:
Bu özellik içerisine yazılan renk kodları ingilizce, 16'lık ya da RGB değerlerinde belirtilmelidir. Bunlara bir resim editörü yardımıyla ulaşabilirsiniz (Photoshop tarzı).
<body bgcolor="black">
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
Eğer arkaplanda bir resim kullanacaksak bu kez aynı kod için background="resim" şeklinde bir özellik kullanıyoruz.
<body background="arkaplan.jpg">
Burada belirtilen resim arkaplanda döşeli olarak çıkacaktır. Bu iki özelliği aynı zamanda Tablo sütunları ve DIV layerlar gibi birçok alanda kullanabilirsiniz.
Daha kullanışlı arkaplan uygulamaları için CSS Dersleri bölümüne göz gezdirebilirsiniz.
RENKLER
Bir HTML belgesinde kullanılan renkler RGB (Red, Green, Blue) yani Kırmızı - Yeşil - Mavi tonlarının belirtilmesi ile ortaya çıkarlar. Bunlar 16'lık sisteme göre #RRGGBB şeklinde düzenlenir.
Eğer bir kırmızı elde edeceksek, kırmızı tonlar en çok diğerleri en az kullanılmalı. 16'lık sistemde 0 = siyah, koyu, F = beyaz, açık anlamındadır. Buna göre değerleri koyudan açığa doğru sıralayacak olursak: 0123456789ABCDEF şeklinde olacaktır.
16'lık sisteme göre Kırmızı renk #FF0000 olacaktır. Burada dikkat edildiyse sadece kırmızı tonlar en açık belirtildi, yeşil ve mavi ise 0 yani en koyu tonunda bırakıldı.
Bazı Renkler ve Renk Kodları
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CSS (STİL) DOSYALARI
Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır:
Belge içinde:
<style type="text/css" rel="stylesheet">
<!--
(Stiller burada belirtilir)
-->
</style>
Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için:
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet" />
Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır.
Stil Belirlemek
Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:
.stilim {
font: 12pt Tahoma, Verdana;
color: #FF0000;
}
td.stilim {
width: 100px;
font: 10pt Tahoma, Verdana;
color: #000000;
}
Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz:
body {
background-color: #EFEFEF;
font: 8pt Tahoma, Verdana;
color: #000000;
}
td {
font: 10pt Tahoma, Verdana;
color: #FF0000;
}
Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz:
Arkaplan ile İlgili Özellikler
Özellik Açıklama
background-color: renk; Arkaplan rengini belirleriz.
background-image: url('dosya'); Arkaplan resmi belirleriz.
background-repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder.
background: renk url('dosya') tekrar; Yukarıdaki css kodlarını tek bir komutta kullandık.
Yazı ile İlgili Özellikler
Özellik Açıklama
font: boyut, yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur.
color: renk; Yazı rengini belirleriz.
font-weight: bold; Kalın yazmak.
font-style: italic; Sağa yatık yazmak.
text-align: hiza; Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar.
Boyut ile İlgili Özellikler
Özellik Açıklama
width: deger; Genişliği belirtiriz.
height: deger; Yüksekliği belirtiriz.
Kenar ile İlgili Özellikler
Özellik Açıklama
border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır.
border: boyut renk durum; Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir.
Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:
<style type="text/css" rel="stylesheet">
<!--
.ornek {
font: 10pt Tahoma, Verdana, Arial;
color: #0000C0;
}
-->
</style>
<div class="ornek">
Bu belirlediğimiz stille bir yazı...
</div>
Bu belirlediğimiz stille bir yazı...
Görüldüğü üzere herhangi bir koda class="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en ideali bunları öğrenmektir.
**** TAGLAR
Daha önceden değişmez bir HTML yapısından bahsetmiştik.
<html>
<head>
<title>Sayfa Başlığı</title>
(**** etiketler, scriptler, RSS yolları ve CSS dosyası)
</head>
<body>
(Diğer tüm elementler ve düz metin)
</body>
</html>
Şimdi buradaki <head></head> arasında olması gereken nesnelerden en önemlilerini tanıyalım. Burası HTML dosyamız hakkında tarayıcı (browser, kullanıcı) ve arama motorlarına bilgi verdiğimiz kısımdır. Ne tür bilgiler veririz?
Sayfa Başlığı
<head> etiketinden hemen sonra gelmelidir. <title>Sayfa Başlığı</title> şeklinde kullanılır. Burası tarayıcının en üstünde görünecek kısımdır (aynı zamanda görev çubuğunda)..
**** - Dil Kodlaması
Sayfa başlığından sonra ilk ****'mız dil kodlaması üzerinedir. Sayfanın hangi dil ile kodlandığını bu bölüm yardımıyla tanıtırız. Örneğin sitemiz Türkçe yazılmış ve Türkçe karakterler içermekteyse şu etiket eklenmeli:
<**** http-equiv="Content-Type" content="text/html; charset=windows-1254">
Buna bağlı her ülke ve dil için ayrı charset değeri vardır.
**** - Arama Motorları İçin Site Detayları
Keywords isimli **** için arama motorlarına sitenin hangi anahtar kelimeleri içerdiğini yazabilir, Description kısmıyla ise siteniz hakkında bir cümlelik açıklama yazabilirsiniz.
<**** name="Keywords" content="html dersleri, html, html dili">
<**** name="Description" content="HTML dili üzerine makaleler ve HTML dersleri.">
SCRİPT KULLANMAK
Script olarak bahsettiğimiz şey aslında genellikle tarayıcı tabanlı küçük uygulamalardır. Genellikle HEAD (bilgiler) bölümünde yer verildiği gibi BODY bölümünde de kullanılabilir. İki çeşit ekleme yolu vardır.
HTML belgemizin içerisinde javascript kodlarına yer verebiliriz. Bunun için:
<script type="text/javascript" language="JavaScript">
<!--
/* Kodlar buraya gelecek */
-->
</script>
Kodların HTML belgesinde durması, dosya boyutunu arttırdığı gibi fazla kullanışlı değildir. Bu nedenle javascript kodlarımızı bir metin belgesine yazıp sonunu js bitecek şekilde kaydedip aşağıdaki şekilde src="" özelliğinde yolu belirterek eklememiz mümkün:
<script type="text/javascript" language="JavaScript" src="dosyam.js"></script>
Tüm HTML Tagları
HTML programlama dilinde kullanılan tüm kodlar aşağıda listelenmiştir:
Kod Açıklama XHTML
<!--...--> Açıklama eklemek. Var
<!DOCTYPE> Dosya türünü yazmak. Var
<a> Bağlantı vermek. Var
<abbr> Kısaltma. Var
<acronym> Kısaltmayı açıklamak. Var
<address> Adres vermek. Var
<area> Resim üzerinde alan belirtmek. Var
<b> Kalın yazmak. Var
<base> Tüm bağlantılar için ana yolu bildirme. Var
<bdo> Yazı yönünü bildirme. Var
<big> Büyük yazmak. Var
<blockquote> Alıntı yapmak. Var
<body> İçeriğe başlangıcı bildirmek. Var
<br> Satır atlamak. Var
<button> Buton eklemek. Var
<caption> Tablo başlığı belirtme. Var
<center> Hizayı ortalar. Yok
<cite> Alıntı yapmak. Var
<code> Bilgisayar kodu şeklinde yazmak. Var
<col> Tablo sütununu belirtme. Var
<colgroup> Tablo sütun gruplarını belirtme. Var
<dd> Açıklama eklemek. Var
<del> Üstü çizili yazı yazmak. Var
<div> Dosyada alan belirtme. Var
<dfn> Bir terim açıklamak. Var
<dl> Terimler listesi. Var
<dt> Terim açıklamak. Var
<em> Vurgulu yazı. Var
<fieldset> Alan belirleme. Var
<form> Form kullanma. Var
<frame> Alt pencere açmak (frame) Var
<frameset> Alt pencereleri tanımlamaya başlamak. Var
<h1> to <h6> Başlık (1-6 arası) Var
<head> Dosya bilgilerini açıklama bölümü. Var
<hr> Yatay çizgi çekmek. Var
<html> HTML'ye başlamak. Var
<i> Sağa yatık yazmak. Var
<img> Resim eklemek. Var
<input> Form nesnesi eklemek. Var
<ins> Vurgu yapmak. Var
<kbd> Kelime yazdırma. Var
<label> Etiket belirleme. Var
<legend> Bir alan için başlık belirleme. Var
<li> Listeleme. Var
<link> Dosyaya bağlantı verme. Var
<map> Resim tanımlama. Var
<****> Dosya bilgisi tanımlama. Var
<noscript> Script desteği yoksa yapılacaklar. Var
<object> Bir obje ekleme (flash vs.) Var
<ol> Numaralandırılmış liste ekleme. Var
<optgroup> Seçim grubu. Var
<option> Sürükle-bırak seçim listesi. Var
<p> Paragraf. Var
<param> Parametre bildirme. Var
<pre> Formatlı yazı ekleme. Var
<q> Küçük alıntılar için. Var
<samp> Bilgisayar yazı tipi kullanma. Var
********** Script tanımlama. Var
<select> Seçim kutusu tanımlama. Var
<small> Küçük yazma. Var
<span> Bir alan tanımlaması. Var
<strong> Vurgu yapmak. Var
********* Stil belirleme. Var
<sub> Normalden aşağı yazı. Var
<sup> Üs yazmak. Var
<table> Tabloya başlamak. Var
<tbody> Tablo başlangıcı. Var
<td> Sütun belirleme. Var
<textarea> Metin kutusu. Var
<tfoot> Tablo altlığı. Var
<th> Tablo başlığı. Var
<thead> Tablo başlığı. Var
<title> HTML Dosyası başlığı. Var
<tr> Satır belirleme (tablo). Var
<tt> TT Yazı. Var
<ul> Madde işaretli liste. Var
<var> Değer. Var
<xmp> PRE komutunun aynısı. Yok
Bazı HTML tagları script dili ile anlatılan olaylara izin verirler. Bunların ne anlama geldiğini şimdi görelim:
Pencere Olayları
Bunlar BODY ve FRAMESET taglarında kullanılır:
Özellik Açıklama
onload Sayfa yüklenirken yapılacaklar.
unload Sayfa kapatılırken yapılacaklar.
Bir Örnek. Aşağıda yazdığımız kısım sayfa yüklenirken Merhaba! diyen bir iletişim kutusu çıkmasını sağlayacaktır.
<body onload="alert('Merhaba!');">
Form Nesneleri Olayları
Bunlar INPUT taglarında kullanılır:
Özellik Açıklama
onchange Metin değiştirilirse yapılacaklar..
onsubmit Form gönderilirken yapılacaklar..
onreset Form temizlenince yapılacaklar..
onselect Metin seçilirken yapılacaklar..
onclick Tıklandığında yapılacaklar.
Alıntıdır
Son düzenleme:
