Sayfalar

Bunları Okudunuz Mu?

Son Yazılar
HTML Dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
HTML Dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

28 Nisan 2014 Pazartesi

Çerçeve yapma kodu

Selam Html dünyanın en çok kullanılan programlama dillerinden biridir...
Kırmızı renkli 2 sayısı tablonun kenar kalınlığını değiştirir...
<table border="2">
      <tbody>
<tr>
         <td colspan="2">Selam Html dünyanın en çok kullanılan programlama dillerinden biridir...</td>
      </tr>
<tr>
         
   </tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" style="height: 69px; width: 200px;">
    <tbody>
<tr>
            
        </tr>
<tr>
            <td></td>
            <td><div>
</div>
</td></tr>
</tbody></table>
Okuyun >>>

Html dili


  • HTML, Hyper Text Markup Language'in kısaltmasıdır.
  • Günümüzde İnternet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir.
  • HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. 
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>
Sayfa BaşlığıBu benim ilk sayfam Bu metin koyu

Kodları denemek için, menü çubuğundaki HTML editörünü kullanabilirsiniz...
Okuyun >>>

Html Önemli Etiketler

Html Başlık Etiketleri h1 h2 h3 h4 h5 h6

Bizim için en önemli olanları h1-h2-h3 etiketleridir ki,çoğunlukla bunlar daha sık kullanılır.
Html Öğreniyorum.

Bu başlık H1 ile oluşturuldu.

Bu başlık H2 ile oluşturuldu.

Bu başlık H3 ile oluşturuldu.

Bu başlık H4 ile oluşturuldu.

Bu başlık H5 ile oluşturuldu.
Bu başlık H6 ile oluşturuldu.

<html>
<head>
<title>Html Öğreniyorum.</title> 
</head>
<body>
<h1>Bu başlık H1 ile oluşturuldu.</h1>
<h2>Bu başlık H2 ile oluşturuldu.</h2>
<h3>Bu başlık H3 ile oluşturuldu.</h3> 
<h4>Bu başlık H4 ile oluşturuldu.</h4>
<h5>Bu başlık H5 ile oluşturuldu.</h5>
<h6>Bu başlık H6 ile oluşturuldu.</h6>
</body>
</html> 
Okuyun >>>

HTML Etiket Nitelikleri

Parametre Örneği 1:

<h1> Başlık belirtir.

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

Bu başlık 1

Gördüğünüz gibi başlığımız ortada yerini alıyor bu kodla...


<html>
<body>

<h1 align="center">
Bu başlık 1</h1>
Gördüğünüz gibi başlığımız ortada yerini alıyor bu kodla... <br />


</body>
</html><br />
<br />

Parametre Örneği 2:

HTML'in body kısmını belirtir. Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.
<body> HTML'in body kısmını belirtir.

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

Deneyiniz HTML editöründe
Okuyun >>>

HTML Metin Biçimlendirme

HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız...Aşağıda biçimlendirme etiketleri ve işlevleri paylaşılmıştır size uygun olan biçimlendirme etiketlerini kullanabilirsiniz.
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ı.
Kalın bir yazı
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ı.
<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 />
Okuyun >>>

HTML Özel Karakterler

Bazı karakterleri ekranda belirtemzsiniz.Ne kadar aralık verme tuşuna basarsanız basın istediğiniz olmaz.İşte bununla başa çıkmak için küçük kodlara ihtiyacımız vardır...

Özel Karakterler

Örneğin "<" karakterini ekrana yazdırmak için "&lt;" karakterini kullanmalısınız.

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;


Sonuç    Açıklama    Ö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;
Okuyun >>>

Html Link Kodu

Merhaba arkadaşlar bu yazımda sizlere html olarak nasıl başka bir adrese link verilir onu anlatacağım.


htmlcim.blogspot.com

<a href="http://htmlcim.blogspot.com/">htmlcim.blogspot.com</a>

Yeni Sayfada açılmasını istersek ilk verdiğim koda ek olarak target=”_blank” kodunu eklememiz gerek... htmlcim.blogspot.com

<a href="http://htmlcim.blogspot.com/" target="_blank">htmlcim.blogspot.com</a>
Okuyun >>>

HTML tablo yapımı kodu

Ürün Adı   Adet    Fiyat
Telefon        1       1.000 TL

<table style="width:300px">
<tr>
  <td>Ürün Adı</td>
  <td>Adet</td> 
  <td>Fiyat</td>
</tr>
<tr>
  <td>Telefon</td>
  <td>1</td> 
  <td>1.000 TL</td>
</tr>
</table>

Burada gördüğünüz gibi çerçeve yok,şimdi çerçeve içine almak için şu iki kodu birlikte kullanıyoruz...

<style>
table,th,td
{
border:1px solid black;
}
</style>

Ürün Adı
Adet Fiyat
Telefon 1 1.000 TL

Ürün Adı Adet Fiyat
Telefon 1 1.000 TL
Gördüğünüz gibi bir kod daha ekledik ve renklendirdik tüm verilen kodların hepsini bir yerde kullandık...

<table style="width: 300px;">
<tbody>
<tr>
  <td style="background: #0058F3; color: white;">Ürün Adı</td>
  <td style="background: #0058F3; color: white;">Adet</td> 
  <td style="background: #0058F3; color: white;">Fiyat</td>
</tr>
<tr>
  <td>Telefon</td>
  <td>1</td> 
  <td>1.000 TL</td>
</tr>
</tbody></table>

Kodumuzun son hali aşağıdaki gibi olacak...

<style>
table,th,td
{
border:1px solid black;
}
</style>
<table style="width: 300px;">
<tbody>
<tr>
  <td style="background: #0058F3; color: white;">Ürün Adı</td>
  <td style="background: #0058F3; color: white;">Adet</td> 
  <td style="background: #0058F3; color: white;">Fiyat</td>
</tr>
<tr>
  <td>Telefon</td>
  <td>1</td> 
  <td>1.000 TL</td>
</tr>
</tbody></table>
Okuyun >>>