HTML Dersleri 1 ( 5 Bölümden Oluşmaktadır )

HTML Dersleri
-----------------------------------------------------------------------------------------------------------------------------------------
Bölüm 1 (Giriş)
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.

************************************

<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.

-----------------------------------------------------------------------------------------------------------------------------------------
Bölüm 2 (Etiketler)

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.)

-----------------------------------------------------------------------------------------------------------------------------------------

Bölüm 3 (HTML Terimleri)

1-)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.

2-)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.

3-)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>

Kendin dene!

<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 ederim.

-----------------------------------------------------------------------------------------------------------------------------------------
Bölüm 4 ( Arka Plan )

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.ornek.net/resim/ressim.jpg">

-----------------------------------------------------------------------------------------------------------------------------------------
Bölüm 5 ( Listeleme )

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>

Örneği:

●

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>

Örneği:

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>

Örneği:

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.

-----------------------------------------------------------------------------------------------------------------------------------------