//-->

 
--- Yeni Web Sitemize Gitmek İçin Buraya Tıklayın..

Web Sitemiz Taşınmıştır

Birazdan yeni web sitemize yönlendirileceksiniz...!!
 ----
Eğer yönlendirilmezseniz "Yeni web sitemize gitmek için buraya tıklayın..."


Profesyonel HTML Dersler

HTML'e Giriş

HTML, HyperText Markup Language,

 Browser'lardan görebileceğimiz (İnternet Explorer, Netscape gibi) internet dökümanlarını yaratmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı html'dir. Browser olmadan html kodları bir şey ifade etmez. 
 HTML dökümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.html, *.shtml gibi uzantılarla kaydedilir.

 Bunun için notepad, pico, wordpad gibi editörler yeterlidir. Bunların yanında Dreamweaver, Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.
 
 Her html dökümanı <html> ile başlar ve </html> ile biter. < > şeklinde görülen komutlara etiket (tag) adı verilir. İki ana kısımdan oluşmaktadır:
 <head>...</head> ve <body>...</body>. head'ın içine <tittle>...</tittle> etiketi gömülür. tittle, brower'ımızın en üstünde yazan açıklamayı içerir. tittle'dan sonra head kapatılır ve ana kısım olan body'e geçilir. Sayfamızda görüntülemek istediğimiz her şeyi body içine gömeriz.
 
       Örnek:
 
Örnek HTML
 Herhangi bir web sayfasının html kodunu görmek istediğimiz zaman, mouse'ın sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.

 METİNLER
 
 BAŞLIKLAR:
 6 çeşit başlık vardır: <h1>,<h2>,....<h6>.
 Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır. 

 
<h1>H1 ile yapılan başlık</h1>

H1 ile yapılan başlık

 

<h2>H2 ile yapılan başlık</h2> 

H2 ile yapılan başlık

<h3>H3 ile yapılan başlık</h3> 

H3 ile yapılan başlık

<h4>H4 ile yapılan başlık</h4> 

H4 ile yapılan başlık

<h5>H5 ile yapılan başlık</h5> 
H5 ile yapılan başlık
<h6>H6 ile yapılan başlık</h6> 
H6 ile yapılan başlık
HTML'e Giriş



 
 
 Fontlar ve Metin Biçimleme:
 
 <font color="red" face="arial" size="3">
 Color, yazı karakterinin rengini, face, yazı tipini (arial, verdana, tahoma gibi), size'da, boyutunu belirler. Size özniteliğinde rakam 1'den 7'ye kadardır.

 <b>...</b>: koyu renk yazı(bold)
 <i>...</i>: italik
 <p>...</p>: paragraf
 <u>...</u>: alt çizgi(underline)
 <center>...</center>: metni ortalar
 <br>: satır atlama
 <hr>: yatay çizgi (horizontal rule)
 Not: Metin biçimlerken başladığınız etiketi kapatmayı unutmayın.

 Renkler: 
 HTML dökümanlarında renkler ya İngilizce isimleriyle, ya da "hexademical" değerleriyle belirtilir. En sık kullanılan ve hemen hemen bütün browserlar'ın desteklediği 16 renkler aşağıdakilerdir; 
 
 16 Renkler
  
 Renklerin hex-code'larını pek çok ilgili yerden bulabilirsiniz.
 
 Örnek:
 
 <body bgcolor="green">
 Bu örnekte artalan yeşile döner.
 <body bgcolor="#008000"> aynı sonucu verir.

 Örnek:
 
 <font color="#4B0082">
 Font rengi "indigo" olarak belirlenir.
 
 LİNKLER:
 
 Linkler <a>...</a> etiketi içinde, href="" komutuyla belirtilir. 
 
 Örnek: 

 <a href="http://www.html-dersler.tr.gg/" target="_blank">HTML Ana Sayfası</a> 
 HTML Ana Sayfası

 Bur örnekte birde target özniteliği verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target"_blank" komutunu eklemeniz gerekir. Aynı pencerede açılmasını isterseniz de target"_top" olmalıdır, ya da hiç belirtmezseniz de olur.
 <a href="http://www.html-dersler.tr.gg/">HTML Ana Sayfası</a> HTML Ana Sayfası şeklindede normal sade bir link olarak da ekleyebilirsiniz.
 
 Eğer hazırladığınız dökümanlar arasında bir bağlantı kurmak istiyorsanız,<a> etiketini aşağıdaki gibi kullanmalısınız. 
 <a href="dosyaadi.html"Önceki Sayfa</a>
 Önceki Sayfa
 Bir mail adresine link vermek istiyorsanız:
 <a href="mailto:html-dersler.tr.gg@hotmail.com">Mail atmak için tıklayın.</a>
 Mail atmak için tıklayın. 
 Bu linke tıklandığıında bilgisayarda kullanıcıya ait mail programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar. 
 Bu sayfada olduğu gibi aynı döküman içinde bağlantı kurmak istersek de:
 
 <a href="#HTML">HTML Tarafına Git</a>
 HTML Tarafına Git
 kalıbını kullanırız ve bağlantı kurmak istediğimiz yere, mesela HTML başlığına: 
 <a name="HTML">HTML'e Giriş</a> şeklinde bir ekleme yaparız. 
 
 Resim Ekleme: 
 
Resim ekleme: 
 <img src="resim.jpg"> şeklinde olur. Dikkat etmemiz gerekenler kullanacağımız imajın ".jpg" ya da ".gif" formatında olması ve dizin yapısıdır. 

 Öznitelikler: 
 
 <img src="" width="" height="" border="" alt="">
 src="": Resim dosyasının kaynağını belirtir. 
 width="": Resim dosyasının genişliğini belirtir.
 height="": Resim dosyasının yüksekliğini belirtir.
 alt="": Resme açıklama vermemizi sağlar. Mouse'ı resmin üstüne getirdiğimizde, alt özniteliğinde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür.

 Eğer arkaplanda bir imajın çıkması istenirse: 
 <body background="resim..jpg"> şeklinde yazılır.

 Listeler: 
 Üç çeşit liste vardır: i.Sıralı Liste(Ordered List):
 Örnek:
 
 
 Listeler

 Örnekte görüldüğü gibi type özniteliği sıralı listenin türünü belirler. 
 type: {1,a,A,I,i}
 Listeye bir değer vererek istediğimiz sayıdan başlatabiliriz:
 
 Örnek: 
 Listeler2

 ii.Sırasız Liste(Unordered List): 
 
 Örnek: 
 Listeler3

 Gene burda da type özniteliği sıralı listenin türünü belirler. 
 type:{square,disc,circle}

 iii.Tanımlama Listeleri (Definition List):
 Listeler 4
 
 
 TABLOLAR: 
 
 
Tablolar <table>...</table> etiketleri arasında yapılır.  <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.
 Örnek: 
 <table border="1">
 <tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
 <tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr> 
 </table>

1. hücre 2. hücre 3. hücre
4. hücre 5. hücre 6. hücre

 Öznitelikler: 
 <table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
 <td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">
 border="": Çerçevenin kalınlığını belirler. border="0"  dersek tabloda çerçeve bulunmaz, bu miktari arttırdıkça çerçevenin kalınlığı da artar. 
 cellpadding="" , cellspacing="": Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing özniteliği ile belirtilir. 
 bgcolor="": <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor="red"> şeklinde sadece tek bir hücre renklendirilir. 
 align: Hücredeki elemanın yatay konumunu belirler ve "right,left,center" opsiyonları ile kullanılır.
 valign: Hücre elemanının düşey konumunu belirler ve opsiyonları "top,bottom,middle"dır.
 colspan="", rowspan="": Aynı satırdaki hücreleri birleştirmek için colspan, aynı sutündaki hücreleri birleştirmek için de rowspan özniteliği kullanılır. 
 Birleştirilen hücreye ait <td>..</td> etiketini silinir.
 
 Örnek: 
 
 <table border="1">
 <tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
 <tr><td rowspan="2">4. hücre</td><td colspan="2">5. hücre</td></tr>
 <tr><td>6.hücre</td><td>7. hücre</td></tr>
 </table>
 
1. hücre 2. hücre 3. hücre
4. hücre 5. hücre
6.hücre 7. hücre
 
 FORMLAR: 
 

 Formlar <form>...</form> etiketleri arasında yapılır. 
 
 Örnek: 
 <form name="kimlik" action="gonder.php" method="get">
 İsim/Soyad :  <input type="text" size="20"><br>
 Doğum Yeri : <input type="text" size="20"><br> 
 Doğum Tarihi :  <input type="text" size="20"><br>
 Cinsiyet : <input type="radio" name="cins"> Erkek <input type="radio" name ="cins"> Kız<br>
 Hobiler:<br>
 <input type="checkbox">Müzik dinlemek<br>
 <input type="checkbox">Mantı Açmak<br>
 <input type="checkbox">Bungee Jumping<br>
 <input type="checkbox">Aikido<br>
 <input type="checkbox">Halay Çekmek<br>
 <input type="checkbox">Diğer :<br>
 <textarea rows="4" cols="30" name="diger"></textarea><br>
 Şifrenizi giriniz:<br>
 <input type="Password" size="15"><br>
 <input type="submit" value="GÖNDER"> <input type="reset" value="SİL">
 </form> 
 
 Görünümü: 
 
İsim/Soyad :
Doğum Yeri :
Doğum Tarihi :
Cinsiyet : Erkek Kız
Hobiler:
Müzik dinlemek
Mantı Açmak
Bungee Jumping
Aikido
Halay Çekmek
Diğer :

Şifrenizi giriniz:

 action: Formun göndereceği adresi belirler. 
 method="get": Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır. 
 method="post": Formdaki bilgiler bir adrese postalanacaksa kullanılır.
 type="text": Tek satırlık bir metin alanı açar.
 size="": Bu metin alanının boyutunu belirler.
 type="checkbox": Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
 type="radio": Tek seçenekli bir sorunun tek yanıtı alınır.
 type="submit": Formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
 type="reset": Bu butona basınca form boş hale gelir.
 type="password": Bir password alanı oluşturur. Buraya girilen her karakter * şeklinde görünür.
 <textarea rows="" cols="">: type="text" gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullanırız. cols metin alanının uzunluğunu, rows ile yüksekliğini pixel cinsinden verir.

 Listeleme: 
 Örnek: 
 <select name="otolar">
 <option>Alfa Romeo</option> 
 <option>BMW</option>    
 <option>Peugeot </option> 
 <option>Renault </option> 
 <option>Seat </option> 
 <option>Lada </option>
 </select>
 Görünümü: 
 

 ÇERÇEVELER: 
 
Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız.
 
ÇerçevelerÖrnek:

 



 <html><head>
 <tittle>Cerceveler</tittle></head>
 <frameset rows="*.*.*">
 <frame src="1.html">
 <frame src="2.html">
 <frame src="3.html">
 </frameset>
 </html> 

 Örneklerde gördüğünüz gibi * miktarı eşit miktarda kaç tane çerçeve olacağını gösterir. <frameset> etiketinde kaç tane * belirttiysek o kadar <frame src=""> belirtmemiz gerekir. * yerine pixel cinsinden bir sayı ya da % cinsinden oran da belirtebiliriz. cols, sayfaların yanyana çıkmasını, rows üst üste çıkmasını sağlar.
 

  

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

Bir özel karakterler bloğu 3 kısımdan oluşur: 
1-) "&" işareti  
2-) "#" işareti ve arkasından kod numarası veya direkt ismi
3-) Sonuncu olarak ta ";" işareti.

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;


 






Bu sayfa hakkında yorum ekle:
İsminiz:
E-mail adresiniz:
Siteniz:
Mesajın:

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=