Programlama-Dilleri

html dersi sıfırdan

HTML TEMEL

HTML dosyası nedir?

  • HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
  • Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
  • Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
  • Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
  • Bir HTML dosyası basit bir text editör ile oluşturulabilir.

 

Denemek İster misiniz?

Eğer Windows kullanıyorsanız not defterini açın.

Eğer MAC kullanıyorsanız SimpleText programını açın.

Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!

Aşağıdaki metini açtığınız editör içerisine yazın:

<html>

<head>

<title>Sayfa Başlığı</title>

</head>

<body>

Bu benim ilk sayfam <b>Bu metin koyu</b>

</body>

</html>

Dosyayı "sayfam.htm" olarak kaydedin.

Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır.

 

Örneğin Açıklaması

HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler.

<head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.

<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.

<body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.

<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.

 

HTML Editörleri Hakkında Not:

HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz.

Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz.



HTML Öğeleri

HTML dökümanları, HTML öğeleri kullanılarak oluşturulan metin dosyalarıdır.

HTML öğeleri, HTML etiketleri kullanılarak tanımlanır.

 

HTML Etiketleri

  • HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
  • HTML etiketleri 2 karakter ile sınırlanır. < ve >
  • Bu karakterlere grup parantezleri (angle brackets) denir.
  • HTML etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu fonttadır. </b>
  • Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir.
  • Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir.
  • HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını unutmayınız.)

 

HTML Öğeleri

Önceki sayfadaki örneğimizi hatırlayalım:

<html>

<head>

<title>Sayfa Başlığı</title>

</head>

<body>

Bu benim ilk sayfam <b>Bu metin koyu</b>

</body>

</html>

Bu bir HTML öğesidir:

<b>Bu metin koyu</b>

HTML öğesi başlangıç etiketi olan <b> ile başladı.
HTML öğesinin içeriği: Bu metin koyu
HTML öğesi bitiş etiketi olan </b> ile sonlandırıldı.

<b> etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir.

 

Etiketleri neden küçük harflerle belirtiriz?

HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: <B> ve <b> aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun bütük harflerle yapılmış olduğunu göreceksiniz..Fakat biz her zaman küçük harf kullanırız. Neden?

Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.



Temel HTML Etiketleri

HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir.

HTML'i öğrenmenin en iyi yolu örneklerle çalışmaktır. Sizin için çok kullanışlı bir HTML deneme editörü hazırladık. Bu editör ile kendi kaynak kodlarınızı girip anında test edebilirsiniz.



 

Başlıklar

Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir.

<h1>Bu bir başlık</h1>

<h2>Bu bir başlık</h2>

<h3>Bu bir başlık</h3>

<h4>Bu bir başlık</h4>

<h5>Bu bir başlık</h5>

<h6>Bu bir başlık</h6>

HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar.

 

Paragraflar

Paragraflar <p> etiketi ile belirtilir.

<p>Bu bir paragraf</p>

<p>Bu da başka bir paragraf</p>

HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.

Etiketleri kapatmayı unutmayın!

Bir önceki örnekte paragrafın </b> etiketi ile bittiğini gördünüz:

<p>Bu bir paragraf

<p>Bu da başka bir paragraf

Çoğu browser büyük ihtimalle yukardaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir.

 

Satır atlama

Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız.

<p>Bu <br>bir <br>çok satırlı paragraftır.</p>

 <br> etiketi boş bir etikettir. </br> gibi bir bitiş etiketi yoktur.

 

<br> mi <br /> mi?

Bir çok yerde <br> etiketinin <br /> olarak kullanıldığını göreceksiniz.

Çünkü <br> etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br /> etiketini kullanmanızı tavsiye ederiz.

 

HTML içinde açıklama (yorum) satırları yaratmak

Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser'da görüntülenirken dikkate alınmazlar.

<!-- Bu bir açıklama -->

 

Temel Notlar - Yararlı İpuçları

HTML kodlarınızın başka browser'larda nasıl görüntüneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın.

HTML koyduğunuz boşlukları sürekli teke indirecektir.

Boş bir satır bırakmak için <p> kullanmak kötü bir tekniktir, bunun yerine <br /> etiketini kullanınız. (Ama asla <br /> ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.)

 

Temel HTML Etiketleri

Etiket (Tag)

Açıklama

<html>

Bir HTML dökümanını belirtir

<body>

Dökümanın görüntülenecek kısmını berlitir.

<h1> to <h6>

Başlıkları belirtir.

<p>

Bir paragraf belirtir

<br>

Boş bir satır bırakır.

<hr>

Sayfada yatay bir çizgi çizer

<!-->

Yorum satırı olduğunu belirtir.

HTML Parametreler (Nitelikler)

Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.

 

HTML Etiket Nitelikleri

HTML etiketleri parametrelere sahip olabilir. Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.

Parametreler daima isim/değer çiftleri arasında gelir: name="value".

Parametreler daima başlangıç etiketi içerisinde belirtilir.

 

Parametre Örneği 1:

<h1> başlık belirtir.

<h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir.

 

Parametre Örneği 2:

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

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

 

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

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

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

name='Cem "GORA" Yilmaz'

HTML Metin Biçimlendirme

HTML, metini koyu veya itelik yapmak için bir çok tanımlama biçimi barındırır.

Aşağıda bu konu ile ilgili bir çok örneği görebilir ve kendiniz deneyebilirsiniz.

 

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

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

 

Metin Biçimlendirme Etiketleri

Tag

Açıklama

<b>

Koyu metin

<big>

Büyük metin

<em>

Vurgulanmış metin

<i>

İtalik metin

<small>

Küçük metin

<strong>

Güçlü metin

<sub>

Alt indis metini

<sup>

Üst indis metini

<ins>

Altı çizili metin

<del>

Üstü çizili metin

<s>

Önemsiz etiket, bunun yerine <del> kullanınız.

<strike>

Önemsiz etiket, bunun yerine <del> kullanınız.

<u>

Önemsiz etiket, bunun yerine styles kullanınız.

"Programlama Dilleri" Etiketleri

Tag

Açıklama

<code>

Programlama dili metini

<kbd>

Klavye metini

<samp>

Örnek bilgisayar kodu metini

<tt>

Tele tip metin

<var>

Değişken

<pre>

Biçimlendirilmemiş metin.

<listing>

Önemsiz etiket, bunun yerine <pre> kullanınız.

<plaintext>

Önemsiz etiket, bunun yerine <pre> kullanınız.

<xmp>

Önemsiz etiket, bunun yerine <pre> kullanınız.

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

Tag

Description

<abbr>

Kısaltma

<acronym>

Baş harfleri ile kısaltma

<address>

Adres öğesi

<bdo>

Metin yönü

<blockquote>

Uzun alıntı

<q>

Kısa alıntı

<cite>

Alıntı

<dfn>

Tanımlama terimi

HTML Özel Karakterler

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

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

 

Özel Karakterler

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

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

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

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

 

Birden Fazla Boşluk Bırakabilmek

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

 

En Çok Kullanılan Özel Karakterler

Sonuç

Açıklama

Özel karakterleri

Numaralı Hali

 

Fazladan boşluk

&nbsp;

&#160;

< 

Küçüktür

&lt;

&#60;

> 

Büyüktür

&gt;

&#62;

&

Ve

&amp;

&#38;

"

Alıntı

&quot;

&#34;

'

apostorof 

&apos; (IE'de çalışmaz)

&#39;

Bazı Başka Özel Karakterler

Result

Description

Özel karakterleri

Numaralı Hali

¢

Cent

&cent;

&#162;

£

Pound

&pound;

&#163;

¥

Yen

&yen;

&#165;

€

Euro

&euro;

&#8364;

§

Section

&sect;

&#167;

©

Copyright

&copy;

&#169;

®

Kayıtlı marka

&reg;

&#174;

×

Çarpma

&times;

&#215;

÷

Bölme

&divide;

&#247;

HTML Bağlantılar (Links)

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

<a> Etiketi ve href parametresi

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

Kullanım biçimi: 

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

Bir örnek:

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

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

 

Hedef (target) Parametresi

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

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

<a href="http://www.htmldersleri.org/"

target="_blank">Kodlayın, Tıklayın, Görün...</a>

 

 

<a> Etiketi ve Name Parametresi

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

Kullanım Biçimi:

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

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

Bir Örnek:

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

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

<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">

Yararlı İpuçları</a>

Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek: 

<a href="#ipucu">Yararlı İpuçları</a>

 

HTML Çerçeveler (Frames)

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.

Çerçeveler

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

Çerçeve kullanmanın dezavantajları:

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

Frameset Etiketleri

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

Frame Etiketi

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

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

<frameset cols="25%,75%">

   <frame src="frame_a.htm">

   <frame src="frame_b.htm">

</frameset>

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

 

Temel Notlar - Yararlı İpuçları

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

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

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

 

Frame Etiketleri

Etiket

Açıklama

<frameset>

Frame ayarlarını belirtir.

<frame>

Alt pencere (çerçeve) belirtir.

<noframes>

Frame desteğinin kullanılmamasını sağlar.

<iframe>

İç frame belirtir.

HTML Tablolar (Tables)

HTML ile tablolar oluşturabilirsiniz.

Tablolar

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

<table border="1">

<tr>

<td>satır 1, hücre 1</td>

<td>satır 1, hücre 2</td>

</tr>

<tr>

<td>satır 2, hücre 1</td>

<td>satır 2, hücre 2</td>

</tr>

</table>

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

satır 1, hücre 1

satır 1, hücre 2

satır 2, hücre 1

satır 2, hücre 2

 

 

Tablolar ve Kenarlık (border) Parametresi

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

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

<table border="1">

<tr>

<td>Satır 1, Hücre 1</td>

<td>Satır 1, Hücre 2</td>

</tr>

</table>

 

 

Tablolarda Başlıklar

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

<table border="1">

<tr>

<th>Başlık</th>

<th>Başka Başlık</th>

</tr>

<tr>

<td>Satır 1, Hücre 1</td>

<td>Satır 1, Hücre 2</td>

</tr>

<tr>

<td>Satır 2, Hücre 1</td>

<td>Satır 2, Hücre 2</td>

</tr>

</table>

Çıktısı:

Başlık

Başka Başlık

Satır 1, Hücre 1

Satır 1, Hücre 2

Satır 2, Hücre 1

Satır 2, Hücre 2

 

Bir Tabloda Boş Hücreler

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

<table border="1">

<tr>

<td>Satır 1, Hücre 1</td>

<td>Satır 1, Hücre 2</td>

</tr>

<tr>

<td>Satır 2, Hücre 1</td>

<td></td>

</tr>

</table>

Çıktısı:

Satır 1, Hücre 1

Satır 1, Hücre 2

Satır 2, Hücre 1

  

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

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

<table border="1">

<tr>

<td>Satır 1, Hücre 1</td>

<td>Satır 1, Hücre 2</td>

</tr>

<tr>

<td>Satır 2, Hücre 1</td>

<td>&nbsp;</td>

</tr>

</table>

Çıktısı:

Satır 1, Hücre 1

Satır 1, Hücre 2

Satır 2, Hücre 1

 

 

Tablo Etiketleri

Etiketi

Açıklama

<table>

Tablo

<th>

Tablo başlığı

<tr>

Satır

<td>

Hücre

<caption>

Manşet

<colgroup>

Hücre grupları

<col>

Sütun genişliği

<thead>

Tablo başı

<tbody>

Tablo body özelliği

<tfoot>

Tablonun en alt kısmı

 

 

HTML Listeleme (Lists)

HTML, sıralı, sırasız ve tanımlama listelerini destekler.

Sırasız Liste

Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile işaretlenir.

Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

<ul>

<li>Kahve</li>

<li>Süt</li>

</ul>

Çıktısı:

  • Kahve
  • Süt

Bir liste madde içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları koyabilirsiniz.

 

Sıralı Listeler

Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her madde de  <li> etiketi ile başlar.

<ol>

<li>Kahve</li>

<li>Süt</li>

</ol>

Çıktısı:

  1. Kahve
  2. Süt

 

Tanımlama Listeleri

Bir tanımlama listesi maddelerin sıralanması demek değildir. Bu, terimlerin açıklanması demektir.

Bir tanımlama listesi <dl> etiketi ile başlar. Her terim  <dt> etiketi ile başlar. Each terimin tanımlaması da <dd> etiketi ile başlar.

<dl>

<dt>Kahve</dt>

<dd>Koyu sıcak içecek</dd>

<dt>Süt</dt>

<dd>Beyaz soğuk içecek</dd>

</dl>

Çıktısı:

Kahve

Koyu sıcak içecek

Süt

Beyaz soğuk içecek

Bir tanımlama listesi içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları vs. koyabilirsiniz.

 

Listeleme Etiketleri

Etiket

Açıklama

<ol>

Sıralı liste

<ul>

Sırasız liste

<li>

Liste maddesi

<dl>

Tanımlama listesi

<dt>

Terim tanımı

<dd>

Tanım açıklaması

<dir>

Önemsiz etiketi. Yerine <ul> kullanınız.

<menu>

Önemsiz etiketi. Yerine <ul> kullanınız.



HTML Form Oluşturma

HTML Formları kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır.

Formlar

Bir form, form elemanlarını içinde bulunduran alandır.

Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları)

Kullanım biçimi:

<form>
  <input>
  <input>
</form>

 

Giriş (Input)

En çok kullanılan form etiketi <input> etiketidir.

Metin Alanları

Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullabilirsiniz.

<form>
Adınız:
<input type="text" name="isim">
<br>
Soyadınız:
<input type="text" name="soyad">
</form>

Çıktısı:

Adınız:     
Soyadınız:

Formun kendisinin görünmediğine dikkat ediniz. Ayrıca bir çok tarayıcının metin giriş alanı için varsayılan olarak 20 karakterlik alan bıraktığına dikkat ediniz. 

Seçenek Butonları (Radio Buttons)

Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman bunu kullanırsınız.

<form>
<input type="radio" name="Cinsiyet" value="Erkek"> Erkek
<br>
<input type="radio" name="Cinsiyet" value="Kadın"> Kadın
</form>

Çıktısı:

Erkek
Kadın

Kontrol kutuları (Checkboxes)

Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini sağlamak için bunu kullanabilirsiniz.

<form>
Bir bisikletim var:
<input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var:
<input type="checkbox" name="Tasit" value="Araba">
<br>
Bir uçağım var:
<input type="checkbox" name="Tasit" value="Uçak">
</form>

Çıktısı:

Bir bisikletim var:
Bir arabam var:
Bir uçağım var:

 

Formlarda "Action" Parametresi ve "Submit" Butonu

Kullanıcı submit (gönder) butonuna tıkladığında girilen bilgiler başka bir sayfaya gönderilir. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir.

<form name="input" action="ornekler/html_form_action.php"
method="get" target="_blank">
Kullanıcı Adı:
<input type="text" name="kullanici">
<input type="submit" value="Gönder">
</form>

Çıktısı:

Kullanıcı Adı:

Eğer yukarıdaki kutuya birşeyler yazıp butona tıklarsanız, girdiğiniz bilgileri "html_form_action.php" dosyasına gönderirsiniz. Yeni pencerede açılacak olan bu sayfada girmiş olduğunuz bilgileri görebilirsiniz.

 

Form Etiketleri

Etiket

Açıklama

<form>

Form

<input>

Giriş alanı

<textarea>

Çok satırlı metin giriş alanı

<label>

Etiket

<fieldset>

Alanların ayarlarının nasıl olacağını belirtir.

<legend>

Manşet

<select>

Açılabilir liste (combobox)

<optgroup>

Seçenek kutusu grubu

<option>

Açılabilir liste içindeki maddeleri belirtir.

<button>

Buton

<isindex>

Önemsiz. Bunun yerine <input> etiketini kullanınız.

 



HTML Resimler

HTML dökümanı içerisinde resim görüntüleyebilirsiniz.

 

Resim "<img>" Etiketi ve "src" Parametresi

HTML dökümanlarda resimler <img> etiketi ile belirtilir. 

<img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

Sayfanızda bir resim görüntüleyebilmek için "src" parametresini kullanmak zorundasınız. Src, "source" (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız.

Kullanım biçimi

<img src="resim yolu">

<img src="dosyalar/banner.jpg">

<img src="http://www.htmldersleri.org/dosyalar/banner.jpg">

 

 

"Alt" Parametresi

Bu parametre alternatif metin (alternate text) anlamına gelir. Bu metin, resimin üzerine mouse gelip bir süre beklendiği zaman görünen metindir.

<img src="home.gif" alt="Ana Sayfa">

Bu özellik sayesinde bazen sayfa  yüklenirken resimlerin görüntülenememesi gibi problemlerde oradaki resimin ne olduğunu anlarız. Bu parametre yeni nesil HTML'de WWC tarafından zorunlu hale gelmiştir.

 

Temel Notlar - Yararlı İpuçları

Bir HTML dosyasına 10-15 resim  koymak sayfanın yüklenişi sırasında yavaşlamaya neden olur. Bu yüzden sayfa tasarlarken bu notu dikkati alınız. Unutmayın ki kullanıcıların bir web sayfasında aradığı ilk özellik, hızdır!

 

Image Etiketleri

Etiket

Açıklama

<img>

Resim

<map>

Bir resimden alınacak belirli bir bölge.

<area>

Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü.

  

HTML Arka Plan

İyi bir arka plan tasarımı, bir web sitesinin gerçekten çok iyi görünmesini sağlayabilir.

 

Arka Plan

<body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar "bgcolor" ve "background" parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resimi belirtebilirsiniz.

Bgcolor

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Background

<body background="ornekler/background.jpg">
<body background="http://www.fikrin.net/grafik/logo.jpg">

Not: Eğer bir arka plan resimi kullanmak isterseniz aşağıdaki soruları aklınıza getirmeyi unutmayınız.

  • Yüklenmesi uzun sürer mi?
  • Sayfadaki diğer resimler ile uygun bir görüntü sağlar mı?
  • Sayfadaki metinlerin rengi ile uygun bir görüntü sağlar mı?
  • Sayfaya döşendiği zaman farkedilmemesi sağlanacak mı?
  • Sayfadaki metinlerden daha az dikkat çekecek mi?

·         

·         HTML Renkler

  • Renkler Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) "ışık" renklerinin kombinasyonu ile oluşturulur.
  • Işık renklerinde ana renkler kırmızı yeşil ve mavidir.

 

Renk Değerleri

HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir.

En düşük değer 0 (hex #00) ve en yüksek değer de 255'tir (hex #FF).

Aşağıda bu kombinasyonlar ile ilgili bir tablo görünmektedir:

Renk

HEX Değeri

RGB Değeri

 

#000000

rgb(0,0,0)

 

#FF0000

rgb(255,0,0)

 

#00FF00

rgb(0,255,0)

 

#0000FF

rgb(0,0,255)

 

#FFFF00

rgb(255,255,0)

 

#00FFFF

rgb(0,255,255)

 

#FF00FF

rgb(255,0,255)

 

#C0C0C0

rgb(192,192,192)

 

#FFFFFF

rgb(255,255,255)

 

 

W3C Standart Renk İsimleri

W3C, 16 tane geçerli renk ismi vermiştir:

Bunlar; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

 

Ana Renklerin Çaprazlanması İle Oluşturulmuş Renkler

Yaklaşık 150 adet en çok kullanılan tarayıcılar tarafından desteklenen renk isimleri (İngilizce):

 

Çaprazlanmış Renk Değerleri

Yıllar önce, bilgisayarların sadece 256 rengi desteklediği zamanlarda, 216 tane Güvenli Web Renkleri (Web Safe Colors), Web standardı olarak önerildi.

Aşağıda bu 216 rengin bulunduğu bir renk paleti bulunmaktadır:

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

HTML Renk Değerleri

Renkler, kırmızı (RED), yeşil (GREEN), mavi (BLUE) renklerinin kombinasyonu ile üretilir.

 

Renk Değerleri

HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir.

En düşük değer 0 (hex #00) ve en yüksek değer de 255'tir (hex #FF).

 

Kırmızı Rengini Kapatmak

Eğer kırmızı rengini kapatırsanız geriye 65536 (256 x 256) tane yeşil ve mavi kombinasyonundan oluşan renk paleti kalır.

Kırmızı Rengini Açmak

Eğer kırmızı rengini açarsanız geriye 65536 (256 x 256) tane yeşil ve mavi kombinasyonundan oluşan renk paleti kalır.

 

16 Milyon Farklı Renk

Kırmızı, yeşil ve mavi renklerinin her birinin 256 tane değişik tonu vardır. Bu üçünün kombinasyonu ile 16 milyon tane (256 x 256 x 256) tane renk üretebilirsiniz.

Bir çok son model monitör en az 16384 tane farklı rengi gösterebilmektedir.

Aşağıdaki tabloyu incelerseniz, kırmızının 256 tane değişik tonunu görebilirsiniz. (Mavi ve yeşil kapalıdır.)

rgb(0,0,0)

Kırmızı

HEX

RGB

 

#000000 

<rgb(0,0,0) ></rgb(0,0,0) >

 

#080000 

rgb(8,0,0) 

 

#100000 

rgb(16,0,0) 

 

#180000 

rgb(24,0,0) 

 

#200000 

rgb(32,0,0) 

 

#280000 

rgb(40,0,0) 

 

#300000 

rgb(48,0,0) 

 

#380000 

rgb(560,0) 

 

#400000 

rgb(64,0,0) 

 

#480000

rgb(72,0,0) 

 

#500000 

rgb(80,,0) 

 

#580000 

rgb(88,0,0) 

 

#600000

rgb(96,0,0) 

 

#680000 

rgb(1040,0) 

 

#700000 

rgb(112,0,0) 

 

#780000

rgb(120,0,0) 

 

#800000 

rgb(128,0,0) 

 

#880000 

rgb(136,0,0) 

 

#900000 

rgb(144,00) 

 

#980000 

rgb(152,0,0) 

 

#A00000

rgb(160,0,0) 

 

#A80000 

rgb(16,0,0) 

 

#B00000 

rgb(176,0,0) 

 

#800000

rgb(184,0,0) 

 

#C00000 

rgb192,0,0) 

 

#C80000

rgb(200,0,0) 

 

#D00000 

rgb(208,0,0) 

 

#D80000 

rgb(216,0,0) 

 

#E00000 

rgb(224,0,0) 

 

#E80000 

rgb(232,00) 

 

#F00000 

rgb(240,0,0) 

 

#F80000 

rgb(248,0,0) 

 

#FF0000 

rgb(255,0,0) 

 

 

Gri'nin gölgeleri

Gri rengi aşağıda her ana ışık renklerinden eşit miktarda alınarak oluşturulabilir:

 

RGB(0,0,0) 

#000000 
none repeat scroll 0% 0%; width: 57.58%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

 

RGB(8,8,8) 

#080808 

 

RGB(16,16,16) 

#101010 

 

RGB(24,24,24) 

#181818 

 

RGB(32,32,32) 

#202020 

 

RGB(40,40,40) 

#282828 

 

RGB(48,48,48) 

#303030 

 

RGB(56,56,56) 

#383838 

 

RGB(64,64,64) 

#404040 

 

RGB(72,72,72) 

#484848 

 

RGB(80,80,80) 

#505050 

 

RGB(88,88,88) 

#585858 

 

RGB(96,96,96) 

#606060 

 

RGB(104,104,104) 

#686868 

 

RGB(112,112,112) 

#707070 

 

RGB(120,120,120) 

#787878 

 

RGB(128,128,128) 

#808080 

 

RGB(136,136,136) 

#888888 

 

RGB(144,144,144) 

#909090 

 

RGB(152,152,152) 

#989898 

 

RGB(160,160,160) 

#A0A0A0 

 

RGB(168,168,168) 

#A8A8A8 

 

RGB(176,176,176) 

#B0B0B0 

 

RGB(184,184,184) 

#B8B8B8 

 

RGB(192,192,192) 

#C0C0C0 

 

RGB(200,200,200) 

#C8C8C8 

 

RGB(208,208,208) 

#D0D0D0 

 

RGB(216,216,216) 

#D8D8D8 

 

RGB(224,224,224) 

#E0E0E0 

 

RGB(232,232,232) 

#E8E8E8 

 

RGB(240,240,240) 

#F0F0F0 

 

RGB(248,248,248) 

#F8F8F8 

 

RGB(255,255,255) 

#FFFFFF 

HTML Renk İsimleri

HTML Renk İsimleri

Aşağıdaki tablo, en çok kullanılan tarayıcılar tarafından desteklenen renkleri ve isimlerini içermektedir. (İngilizce)

Renk İsmi

HEX Değeri

Renk

AliceBlue

#F0F8FF

  

AntiqueWhite

#FAEBD7

  

Aqua

#00FFFF

  

Aquamarine

#7FFFD4

  

Azure

#F0FFFF

  

Beige

#F5F5DC

  

Bisque

#FFE4C4

  

Black

#000000

  

BlanchedAlmond

#FFEBCD

  

Blue

#0000FF

  

BlueViolet

#8A2BE2

  

Brown

#A52A2A

  

BurlyWood

#DEB887

  

CadetBlue

#5F9EA0

  

Chartreuse

#7FFF00

  

Chocolate

#D2691E

  

Coral

#FF7F50

  

CornflowerBlue

#6495ED

  

Cornsilk

#FFF8DC

  

Crimson

#DC143C

  

Cyan

#00FFFF

  

DarkBlue

#00008B

  

DarkCyan

#008B8B

  

DarkGoldenRod

#B8860B

  

DarkGray

#A9A9A9

  

DarkGrey

#A9A9A9

  

DarkGreen

#006400

  

DarkKhaki

#BDB76B

  

DarkMagenta

#8B008B

  

DarkOliveGreen

#556B2F

  

Darkorange

#FF8C00

  

DarkOrchid

#9932CC

  

DarkRed

#8B0000

  

DarkSalmon

#E9967A

  

DarkSeaGreen

#8FBC8F

  

DarkSlateBlue

#483D8B

  

DarkSlateGray

#2F4F4F

  

DarkSlateGrey

#2F4F4F

  

DarkTurquoise

#00CED1

  

DarkViolet

#9400D3

  

DeepPink

#FF1493

  

DeepSkyBlue

#00BFFF

  

DimGray

#696969

  

DimGrey

#696969

  

DodgerBlue

#1E90FF

  

FireBrick

#B22222

  

FloralWhite

#FFFAF0

  

ForestGreen

#228B22

  

Fuchsia

#FF00FF

  

Gainsboro

#DCDCDC

  

GhostWhite

#F8F8FF

  

Gold

#FFD700

  

GoldenRod

#DAA520

  

Gray

#808080

  

Grey

#808080

  

Green

#008000

  

GreenYellow

#ADFF2F

  

HoneyDew

#F0FFF0

  

HotPink

#FF69B4

  

IndianRed

#CD5C5C

  

Indigo

#4B0082

  

Ivory

#FFFFF0

  

Khaki

#F0E68C

  

Lavender

#E6E6FA

  

LavenderBlush

#FFF0F5

  

LawnGreen

#7CFC00

  

LemonChiffon

#FFFACD

  

LightBlue

#ADD8E6

  

LightCoral

#F08080

  

LightCyan

#E0FFFF

  

LightGoldenRodYellow

#FAFAD2

  

LightGray

#D3D3D3

  

LightGrey

#D3D3D3

  

LightGreen

#90EE90

  

LightPink

#FFB6C1

  

LightSalmon

#FFA07A

  

LightSeaGreen

#20B2AA

  

LightSkyBlue

#87CEFA

  

LightSlateGray

#778899

  

LightSlateGrey

#778899

  

LightSteelBlue

#B0C4DE

  

LightYellow

#FFFFE0

  

Lime

#00FF00

  

LimeGreen

#32CD32

  

Linen

#FAF0E6

  

Magenta

#FF00FF

  

Maroon

#800000

  

MediumAquaMarine

#66CDAA

  

MediumBlue

#0000CD

  

MediumOrchid

#BA55D3

  

MediumPurple

#9370D8

  

MediumSeaGreen

#3CB371

  

MediumSlateBlue

#7B68EE

  

MediumSpringGreen

#00FA9A

  

MediumTurquoise

#48D1CC

  

MediumVioletRed

#C71585

  

MidnightBlue

#191970

  

MintCream

#F5FFFA

  

MistyRose

#FFE4E1

  

Moccasin

#FFE4B5

  

NavajoWhite

#FFDEAD

  

Navy

#000080

  

OldLace

#FDF5E6

  

Olive

#808000

  

OliveDrab

#6B8E23

  

Orange

#FFA500

  

OrangeRed

#FF4500

  

Orchid

#DA70D6

  

PaleGoldenRod

#EEE8AA

  

PaleGreen

#98FB98

  

PaleTurquoise

#AFEEEE

  

PaleVioletRed

#D87093

  

PapayaWhip

#FFEFD5

  

PeachPuff

#FFDAB9

  

Peru

#CD853F

  

Pink

#FFC0CB

  

Plum

#DDA0DD

  

PowderBlue

#B0E0E6

  

Purple

#800080

  

Red

#FF0000

  

RosyBrown

#BC8F8F

  

RoyalBlue

#4169E1

  

SaddleBrown

#8B4513

  

Salmon

#FA8072

  

SandyBrown

#F4A460

  

SeaGreen

#2E8B57

  

SeaShell

#FFF5EE

  

Sienna

#A0522D

  

Silver

#C0C0C0

  

SkyBlue

#87CEEB

  

SlateBlue

#6A5ACD

  

SlateGray

#708090

  

SlateGrey

#708090

  

Snow

#FFFAFA

  

SpringGreen

#00FF7F

  

SteelBlue

#4682B4

  

Tan

#D2B48C

  

Teal

#008080

  

Thistle

#D8BFD8

  

Tomato

#FF6347

  

Turquoise

#40E0D0

  

Violet

#EE82EE

  

Wheat

#F5DEB3

  

White

#FFFFFF

  

WhiteSmoke

#F5F5F5

  

Yellow

#FFFF00

  

YellowGreen

#9ACD32

  

 

HTML 4.01 Hızlı Liste

Htmldersleri.org 'dan sizin için HTML Hızlı Liste. Yazdır, klasörle, at çantana

 

HTML Temel Dökümanlar

<html>
<head>
<title>Buraya başlık</title>
</head>

<body>
Görünecek metinler buraya
</body>

</html>

Başlık Öğeleri

<h1>En büyük başlık</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>En küçük başlık</h6>

Metin Öğeleri

<p>Bu bir paragraf</p>
<br> (satır atlama)
<hr> (yatay çizgi)
<pre>Biçimlendirilmemiş yazılar buraya</pre>

Mantıksal Stiller

<em>Vurgulu metin/em>
<strong>Güçlü metin</strong>
<code>Bilgisayar programlama kodu</code>

Fiziksel Stiller

<b>Koyu</b>
<i>İtalik</i>

Linkler ve Image Öğeleri

<a href="http://www.fikrin.net">Bu bir link</a>
<a href="http://www.fikrin.net"><img src="resim dosyasının yolu" alt="Alternatif metin></a>
<a href="mailto:webmaster@htmldersleri.org">E-mail gönder </a>

Sırasız Liste

<ul>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ul>

Sıralı Liste

<ol>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ol>

Tanımlama Listesi

<dl>
<dt>İlk terim</dt>
<dd>Açıklaması</dd>
<dt>İkinci terim</dt>
<dd>Açıklaması</dd>
</dl>

Tablolar (Tables)

<table border="1">
<tr>
<th>Bir başlık</th>
<th>Bir başlık daha</th>
</tr>
<tr>
<td>metin</td>
<td>metin</td>
</tr>
</table>

Çerçeveler (Frames)

<frameset cols="25%,75%">
  <frame src="sayfa1.htm">
  <frame src="sayfa22.htm">
</frameset>

Formlar (Forms)

<form action="http://www.htmldersleri.org/html_form_action.php" method="post/get">

<input type="metin" name="soyisim" value="GZO" size="30" maxlength="50">
<input type="şifre">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Elmalar
<option selected>Muzlar
<option>Kirazlar
</select>

<textarea name="Yorum" rows="60" cols="20"></textarea>

</form>

Özel Karakterler

&lt; ifadesi, bununla aynı çıktıyı verir: <
&gt; ifadesi, bununla aynı çıktıyı verir: >
&#169; ifadesi, bununla aynı çıktıyı verir: ©

Diğer Öğeler

<!-- Bu bir yorum -->

<blockquote>
Bu metin başka bir metinden alıntılanmış bir parçadır.
</blockquote>

<address>
Adres 1<br>
Adres 2<br>
Şehir<br>
</address>

HTML Gelişmiş

HTML Tasarım

Girdiğiniz çoğu sitede, sayfaların gazeteler gibi tasarlandığını görürsünüz.

 

HTML Tasarım - Tabloları Kullanma

En çok kullanılan tasarım yöntemi tabloların kullanılmasıdır.

Sayfanın bu kısmı gazete gibi iki sütuna ayrılmıştır.

Gördüğünüz üzere burada sol ve sağ sütunlar bulunmaktadır.

Bu metin, sol sütunda görüntülenmektedir.

HTML <table> komutu ile bir sayfayı iki ayrı sütuna bölebiliriz.

Tabloları kullanmanın asıl önemini border özelliğini sıfır yapınca görürsünüz. Kullanıcı kenarlık görmez ama sayfa istediğiniz şekilde oturtulmuştur.

Buraya ne kadar metin eklediğiniz önemi yoktur. Ne kadar yazarsanız yazın, hepsi bu hücre içerisinde kalacaktır.

 

 

Aynı Tasarım - Renklendirilmiş

En çok kullanılan tasarım yöntemi tabloların kullanılmasıdır.

Sayfanın bu kısmı gazete gibi iki sütuna ayrılmıştır.

Gördüğünüz üzere burada sol ve sağ sütunlar bulunmaktadır.

Bu metin, sol sütunda görüntülenmektedir.

HTML <table> komutu ile bir sayfayı iki ayrı sütuna bölebiliriz.

Tabloları kullanmanın asıl önemini border özelliğini sıfır yapınca görürsünüz. Kullanıcı kenarlık görmez ama sayfa istediğiniz şekilde oturtulmuştur.

Buraya ne kadar metin eklediğiniz önemi yoktur. Ne kadar yazarsanız yazın, hepsi bu hücre içerisinde kalacaktır.

 

HTML Fontlar (Fonts)

<font> artık önemsiz bir etiket olmuştur. Gelecek nesil HTML dillerinde bunun kullanılması söz konusu olmayacaktır.

Bir çok kişinin halen bunu kullanmasına karşın, bu komutu artık unutmanızı ve yerine stilleri kullanmanızı öneririz.

 

HTML <font> Etiketi

<p>

<font size="2" face="Verdana">

Bu bir paragraf.

</font>

</p>

<p>

<font size="3" face="Times">

Bu da başka bir paragraf

</font>

</p>

Font Parametreleri

Parametre

Örnek

Açıklama

size="number"

size="2"

Punto büyüklüğü

size="+number"

size="+1"

Puntoyu 1 arttır

size="-number"

size="-1"

Puntoyu 1 düşür

face="face-name"

face="Times"

Yazı tipi belirle

color="color-value"

color="#eeff00"

Yazı rengi belirle

color="color-name"

color="red"

Yazı rengi belirle

 

 

<font> Artık Kullanılmamalıdır!

<font> etiketi HTML 4 ve XHTML dillerinde artık geçersiz olmuştur.

World Wide Web Consortium (W3C) bunun yerine style sheets (CSS) kullanılmasını önerir.

 

Stiller İle Doğru Şekilde Font Ayarları

HTML Stiller (Styles)

HTML 4.0 ile birlikte tüm biçimlendirme öğeleri ayrı bir dosya içerisine taşınmıştır.

 

Stiller Nasıl Kullanılır?

Bir tarayıcı bir stil dosyasını okumaya başladığı zaman HTML dökümanını ona göre biçimlendirir. Stil dosyalarını eklemenin üç yolu vardır.

Harici Stil Dosyası

Harici bir stil dosyası her zaman daha iyidir. Çünkü sadece .css dosyasının içerisinde değişiklik yaparak tüm sitenin görünümünü değiştirebilirsiniz. Her sayfa stil dosyasına <link> etiketi ile bağlanmalıdır. <link> etiketi <head>..</head> içerisinde tanımlanmalıdır.

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

Dahili Stil Dosyası

Eğer sadece bir HTML dökümanı içerisinde stil uygulanacaksa bu yöntem kullanılabilir.

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

Satır İçi Stiller

Tek bir öğeye uygulanacağı zaman kullanılır.

<p style="color: red; margin-left: 20px">
Bu bir paragraf.
</p>

HTML Başlık (Head)

Başlık (Head) Öğesi

Head öğesi genel bilgiler ve ayrıca meta-bilgilerini içerir.

 

Head Öğesi İçinde Bilgi

Buraya yazılan bilgiler tarayıcıda görüntülenmez. 

HTML standartlarına göre sadece bir kaç etiket head etiketi içerisinde kullanılabilir, Bunlar: <base>, <link>, <meta>, <title>, <style> ve <script>. 

Aşağıdaki kullanım biçimi yasaktır, kullanılamaz.

<head>

  <p>Metin</p>

</head>

Bu noktada tarayıcının iki seçeneği vardır:

  • Metini gösterir, çünkü bir paragraf öğesi içindedir.
  • Metini gizler, çünkü bir head öğesi başındadır.

 

Head EtiketleriEtiket

Açıklama

<head>

Başlık

<title>

Sayfa başlığı

<base>

Temel URL hedef çerçevelerini belirlemek için kullanılır.

<link>

Kaynak dosyası belirtilir

<meta>

META bilgileri girilir.

HTML Meta

 

Meta Öğesi

Bir çok meta öğesi daha çok arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. Arama motorlarının bot programları sitenizi ziyaret ettiğinde Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında indeksler.

 

Arama Motorları İçin Keywords

Bu meta öğesi sayfanız hakkında açıklama içerir.

<meta name="description" content="HTML hakkında bedava web tabanlı interaktif eğitim">

 

Bu meta öğesi siteniz hakkında keywords içerir.

<meta name="keywords" content="HTML, ders, online, dene">

 

Bilinmeyen Meta Parametreleri

Bazen aşağıdaki gibi bilinmeyen parametreler görebilirsiniz.

<meta name="security" content="low">

Bunu gördüğünüz anda bunun sizinle alakalı olmadığı kabul edin.

HTML Uniform Resource Locators (URL)

Uniform Resource Locators (Düzenli Kaynak Konumlandırıcı)

Bu terimin Türkçe olarak tam bir karşılığı bulunmamaktadır.

URL aşağıdaki dizilime göre kullanılır:

scheme://host.domain:port/path/filename

scheme internet servisinin tipidir. Genellikle kullanılan tip http dir.

host alan adının sunucusunu bildirir. Örnek: www.

domain alan adıdır. Örnek: htmldersleri.org

:port sunucuya hangi porttan bağlanacağınızı belirtir. http portu 80 olarak sabitlenmiştir.

path, o sunucu içerisindeki alt klasörlere veya direkt bir dosyaya ulaşmak istediğinizde kullanmanız gereken elemandır.

filename ise sunucu içerisinde alt klasörlerde bulunan bir dosyaya direkt ulaşmak isterseniz kullanmanız gereken elemandır.

URL İnternet Servis Tipleri

Tip (Schemes)

Erişim

file

Kendi lokal bilgisayarınızdaki bir dosyaya ulaşmanızı sağlar.

ftp

FTP sunucu üzerindeki bir dosyaya ulaşmanızı sağlar.

http

World Wide Web Sunucu üzerindeki bir dosyaya ulaşmanızı sağlar.

gopher

Gopher sunucu üzerindeki bir dosyaya ulaşmanızı sağlar.

news

Bir Usenet haber grubu

telnet

Telnet bağlantısı

WAIS

WAIS sunucu üzerinde bir dosya

HTML Script'ler

HTML sayfalarına scriptler eklemek sayfayı daha dinamik ve interaktif yapar.

 

HTML sayfasına bir script ekleme

Scriptler HTML içerisinde <script> etiketi ile belirtilir. "type" parametresini kullanmak zorunda olduğunuza dikkat ediniz.

<html>

<head>

</head>

<body>

<script type="text/javascript">

document.write("Merhaba Dünya!")

</script>

</body>

</html>

Çıktısı:

Merhaba Dünya!

 

Script Etiketleri

Etiket

Açıklama

<script>

Script başlıyor...

<noscript>

Script çalıştırılamadığı zaman

<object>

Sabitlenmiş nesne

<param>

Bir nesne için parametre belirtir.

<applet>

Önemsiz etiket. Bunun yerine <object> etiketini kullanın.

HTML 4.0 Standard Parametreleri

HTML etiketlerinin parametreleri olabilir. Aşağıda HTML4 ile gelen bazı özel parametreler gösterilmiştir.

Merkezi Parametreler

base, head, html, meta, param, script, style, ve title elements'lerde geçerli değildir.

Parametre

Değer

Açıklama

class

class_rule veya style_rule

Öğenin sınıfı

id

id_name

Öğeler için özgün ID (tanımlama)

style

style_definition

Tek satırlık stil tanımı

title

tooltip_text 

Tool tip açıklama stili (Üzerine gelindiğinde çıkan sarı zeminli metin)

 

 

Dil Parametreleri

base, head, html, meta, param, script, style, ve title elements'lerde geçerli değildir.

Parametre

Değer

Açıklama

dir

ltr | rtl

Metin yönünü belirtme

lang

language_code

Dil kodu

 

 

Klavye Parametreleri

Parametre

Değer

Açıklama

accesskey

character

Bir öğeye erişmek için bir kısayol belirtme

tabindex

number

Bir öğe için tab sekme sırasını belirtme

HTML 4.0 Olay Parametreleri (Events)

HTML4 ile gelen diğer bir özellik te bir olay olduğu anda döküman içerisinde kodlar ile o sırada neler yapılacağını belirtebilmektir. Örneğin sayfa yüklenirken, üzerine gelindiğinde, tıklandığı gibi olay parametreleri mevcuttur.

 

Pencere Olayları

Sadece body ve frameset etiketleri içerisinde geçerlidir..

Parametre

Değer

Açıklama

onload

script

Döküman yüklenirken çalıştırılacak olan script.

onunload

script

Dökümandan ayrılıken çalıştırılacak olan script.

 

 

Form Öğe Olayları

Sadece form etiketi içerisinde geçerlidir.

Parametre

Değer

Açıklama

onchange

script

Öğe değişirken çalıştırılacak olan script.

onsubmit

script

Submit'e tıklandığında çalıştırılacak olan script.

onreset

script

Form sıfırlandığında çalıştırılacak olan script.

onselect

script 

Öğe seçildiğinde çalıştırılacak olan script.

onblur

script 

Öğeden ayrılınca çalıştırılacak olan script.

onfocus

script 

Öğe seçilince çalıştırılacak olan script.

 

 

Klavye Olayları

base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title elements içerisinde geçerli değildir.

Parametre

Değer

Açıklama

onkeydown

script 

Bir tuş basılı tutulduğunda yapılacak olanlar.

onkeypress

script 

Bir tuşa basılıp bırakıldığına yapılacak olanlar.

onkeyup

script 

Bir tuş bırakıldığında yapılacak olanlar.

 

 

Mouse Olayları

base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title elements içerisinde geçerli değildir.

Parametre

Değer

Açıklama

onclick

script 

Tıklandığında yapılacak olanlar.

ondblclick

script 

Çift tıklandığında yapılacak olanlar.

onmousedown

script 

Bir mouse tuşu basılı tutulduğunda yapılacak olanlar.

onmousemove

script 

Mouse işaretçisi hareket ettirildiğinde yapılacak olanlar.

onmouseout

script

Mouse işaretçisi bir öğeden ayrıldığında yapılacak olanlar.

onmouseover

script

Mouse işaretçisi bir öğenin üzerine geldiğinde yapılacak olanlar.

onmouseup

script 

Mouse butonu bırakıldığında yapılacak olanlar.

HTML ASCII Kodlar

Aşağıda ASCII karakterlerin HTML diline göre şifrelenmiş biçimlerini gösteren bir tablo bulunmaktadır.

 

%00 - %8F Arası ASCII Karakterler

ASCII Değeri

URL-Kodlanmışı

ASCII Değeri

URL-Kodlanmışı

ASCII Değeri

URL-Kodlanmışı

æ

%00

0

%30

`

%60

 

%01

1

%31

a

%61

 

%02

2

%32

b

%62

 

%03

3

%33

c

%63

 

%04

4

%34

d

%64

 

%05

5

%35

e

%65

 

%06

6

%36

f

%66

 

%07

7

%37

g

%67

backspace

%08

8

%38

h

%68

tab

%09

9

%39

i

%69

linefeed

%0a

:

%3a

j

%6a

 

%0b

;

%3b

k

%6b

 

%0c

< 

%3c

l

%6c

c return

%0d

=

%3d

m

%6d

 

%0e

> 

%3e

n

%6e

 

%0f

?

%3f

o

%6f

 

%10

@

%40

p

%70

 

%11

A

%41

q

%71

 

%12

B

%42

r

%72

 

%13

C

%43

s

%73

 

%14

D

%44

t

%74

 

%15

E

%45

u

%75

 

%16

F

%46

v

%76

 

%17

G

%47

w

%77

 

%18

H

%48

x

%78

 

%19

I

%49

y

%79

 

%1a

J

%4a

z

%7a

 

%1b

K

%4b

{

%7b

 

%1c

L

%4c

|

%7c

 

%1d

M

%4d

}

%7d

 

%1e

N

%4e

~

%7e

 

%1f

O

%4f

 

%7f

space

%20

P

%50

€

%80

!

%21

Q

%51

 

%81

"

%22

R

%52

‚

%82

#

%23

S

%53

ƒ

%83

$

%24

T

%54

„

%84

%

%25

U

%55

…

%85

&

%26

V

%56

†

%86

'

%27

W

%57

‡

%87

(

%28

X

%58

ˆ

%88

)

%29

Y

%59

‰

%89

*

%2a

Z

%5a

Š

%8a

+

%2b

[

%5b

‹

%8b

,

%2c

%5c

Œ

%8c

-

%2d

]

%5d

 

%8d

.

%2e

^

%5e

Ž

%8e

/

%2f

_

%5f

 

%8f

%90 - %FF Arası ASCII Karakterler

ASCII Değeri

URL-Kodlanmışı

ASCII Değeri

URL-Kodlanmışı

ASCII Değeri

URL-Kodlanmışı

 

%90

À

%c0

?

%f0

‘

%91

Á

%c1

ñ

%f1

’

%92

Â

%c2

ò

%f2

“

%93

Ã

%c3

ó

%f3

”

%94

Ä

%c4

ô

%f4

•

%95

Å

%c5

õ

%f5

–

%96

Æ

%c6

ö

%f6

—

%97

Ç

%c7

÷

%f7

˜

%98

È

%c8

ø

%f8

™

%99

É

%c9

ù

%f9

š

%9a

Ê

%ca

ú

%fa

›

%9b

Ë

%cb

û

%fb

œ

%9c

Ì

%cc

ü

%fc

 

%9d

Í

%cd

y

%fd

ž

%9e

Î

%ce

?

%fe

Ÿ

%9f

Ï

%cf

ÿ

%ff

 

%a0

?

%d0

 

 

¡

%a1

Ñ

%d1

 

 

¢

%a2

Ò

%d2

 

 

£

%a3

Ó

%d3

 

 

 

%a4

Ô

%d4

 

 

¥

%a5

Õ

%d5

 

 

|

%a6

Ö

%d6

 

 

§

%a7

 

%d7

 

 

¨

%a8

Ø

%d8

 

 

©

%a9

Ù

%d9

 

 

ª

%aa

Ú

%da

 

 

«

%ab

Û

%db

 

 

¬

%ac

Ü

%dc

 

 

¯

%ad

Y

%dd

 

 

®

%ae

?

%de

 

 

¯

%af

ß

%df

 

 

°

%b0

à

%e0

 

 

±

%b1

á

%e1

 

 

²

%b2

â

%e2

 

 

³

%b3

ã

%e3

 

 

´

%b4

ä

%e4

 

 

µ

%b5

å

%e5

 

 

%b6

æ

%e6

 

 

·

%b7

ç

%e7

 

 

¸

%b8

è

%e8

 

 

¹

%b9

é

%e9

 

 

º

%ba

ê

%ea

 

 

»

%bb

ë

%eb

 

 

¼

%bc

ì

%ec

 

 

½

%bd

í

%ed

 

 

¾

%be

î

%ee

 

 

¿

%bf

ï

%ef

 

 

Sayfanızı Yayınlamaya Hazır mısınız?

İlk Adım: Kişisel Web Sunucusu

  • Başkalarının sayfanızı görmesini istiyorsanız, sayfanızı yayınlamalısınız.
  • Bunu yapmak için sayfanızı bir web sunucuya kopyalamalısınız.
  • Eğer internet bağlantınız varsa kendi kişisel bilgisayarınız da bir web sunucusu gibi davranabilir.

Internet Information Service (IIS)

Kendi bilgisayarınızda ASP dosyalarını çalıştırmak için kullanmanız gereken yayınlama yazılımıdır.

 

IIS Nasıl Kurulur?

  • Windows XP CD'nizi taktıktan sonra Program Ekle/Kaldır özelliği ile Windows Bileşenleri kısmına geliniz.
  • Internet Information Service seçeneği seçerek "İleri"yi tıklayıp yönergeleri izleyiniz.
  • Yaptığınız siteyi tüm klasörü ile C:Inetpubwwwroot klasörü içine kopyalayınız. (Örnek: Klasörünüz adı "WebSitem" olsun)
  • Çalışıp çalışmadığını görmek için tarayıcınızın adres satırına "localhost/WebSitem" yazınız..

Not: Microsoft Windows XP Home Edition üzerinde IIS çalıştıramazsınız!

 

Apache Web Sunucusu

Kendi bilgisayarınızda PHP dosyalarını çalıştırmak için kullanmanız gereken yayınlama yazılımıdır.

Apache Nasıl Kurulur?

  • Internet üzerinden ücretsiz olarak "apache2triad" yazılımını indirip bilgisayarınıza kurunuz. (Bu program ile php ile ilgili tüm yazılımlara sahip olursunuz).
  • Daha sonra sitenizi klasör halinde C:apache2triadhtdocs klasörü içine kopyalayınız.
  • Tarayıcınızın adres satırına "localhost/WebSitem" yazınız.

 

Önemli Notlar

HTML dosyanızın içerisinde bir link oluşturmak istediğinizde veya bir resim eklemek istediğinizde bu hedef dosyaların hepsinin önceden sitenizin klasörünün içerisinde olduğundan emin olun.

Örneğin sitenizin klasörü C:sitem olsun. C:sitemindex.html dosyası içerisine belgelerim klasöründen bir resim eklediğinizde bu resim <img alt="" src="../Documents%20and%20settings/<oturum adı>/Belgelerim/resim.jpg"> olarak alacaktır.

Eğer bu şekilde web sunucusuna upload ederseniz, büyük ihtimalle resim dosyanız görüntülenemeyecektir. Çünkü web sunucu bilgisayarda öyle bir yol olmayacaktır.

 

Bugün 30 ziyaretçi (33 klik) kişi burdaydı!