<IMG SRC="resmin bulunduğu yer ve adı yazılacak yer" WIDTH="x" HEIGHT="y" > 
     

Seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur. Resim eklemek için yapmamız gereken sayfaya koyacağı resmin nerede olduğunu göstermemiz gerekir.Resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz resmin düzgün görünmesi sağlar ama şart değildir. Kullanacağımız etiket şu şekilde olacak; Burada x resmin enini y ise boyunu ifade ediyor 

      Örnek : 
      <img src="Fil.gif" width="64" height="79"> 

      Eklemek istediğiniz çok sayıda resim varsa bunları resimler adlı bir alt klasörde ise html dosyası c:\ders dizininde resimler de c:\ders\resimler\Fil.gif dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanılır; 

<img src="resimler/Fil.gif" width="64" height="79"> 

      Resmi Hizalamak 
      Hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola (left) koyabiliriz. 

<img src="resim.jpg" width="25" height="25" align="left"> 

      Resme alternatif metin eklemek: <img src="resim.gif" alt="saat">  buradaki alt="saat" ifadesi bize resmimize alternatif metin eklememizi sağlar. 

      Resme Çerçeve eklemek : <img src="resim.gif" border="6">   border ise resmimize çerçeve içine alır. Resimlerinizi kaymasını istiyorsanız marquee kodunu kullanmanız gerekir. Örnek kulanımı ise şu şekildedir;

<marquee width=500 height=100 direction=left>

<img src="resim-1.jpg" alt="Resim 1">&nbsp; <img src="resim-2.jpg" alt="Resim 2">&nbsp; <img src="resim-3.jpg" alt="Resim 3">&nbsp; <img src="resim-4.jpg" alt="Resim 4">&nbsp; <img src="resim-5.jpg" alt="Resim 5">&nbsp;</marquee>

 



<TABLE>...</TABLE> 

      Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde olmasini saglamak amaçlariyla kullanabiliriz. Sayfada gözüksün ya da gözükmesin tablolari bir iskelet gibi kullanabilir, böylece su ana kadar ögrendiklerinizle yapamayacaginiz gerçek düzenlemeyi yapabiliriz. Elbette HTML dizayn konusunda bir masaüstü yayincilik programinin gösterdigi hassasiyeti göstermez, bir de browserlarin tablo etiketlerini yorumlamada gösterdigi farkliliklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor oldugu anlasilabilir. 

      Basit bir tablo yapmak için gerekli etiketleri ögrenelim. Öncelikle <TABLE>...</TABLE> etiketlerini yaziyoruz ve arasini doldurmaya basliyoruz. <TR> etiketi ile satirlari <TD> etiketi ile de sütunlari olusturuyoruz. Parametreler: 

      <TABLE BORDER=".." CELLPADING=".." CELLSPACING=".." ALIGN=".." WIDTH=".." HEIGHT=".."> 

      Border parametresi çerçevenin kalinligini belirtir. border=0 çerçevenin görünmemesini saglar. Cellpadding parametresi hücre içi marj degerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitisik olmasini sagliyabilirz. 
 

HTML etiketi Etiketin Web Sayfasindaki görüntüsü
           <table border="1" cellspacing="1"> 
      <tr> 
      <td>hücre1</td> <td>hücre2</td> 
      </tr> 
      <tr>
      <td>hücre3</td> <td>hücre4</td>
        </tr>
              </table>
hücre1 hücre2
hücre3 hücre4


      Align parametresi tabloyu düsey hizalamada kullanilir, align=left sola, align=right saga dayali yapar, align=center ortalar. colspanayni sütundaki hücreleri birlestirmek için de rowspan degiskeni kullanilir. Birlestirilen hücreye ait

<td>. . </td>

etiketi silinir.




HTML etiketi Etiketin Web Sayfasindaki görüntüsü
           <table border="1" cellspacing="1"> 
      <tr> 
      <td>hücre1</td> <td>hücre2</td><td>hücre3</td> 
      </tr> 
      <tr>
      <td rowspan="2">hücre4</td> <td colspan="2">hücre5</td></tr>
      <tr><td>hücre6</td><td>hücre7</td> </tr>
              </table>
hücre1 hücre2 hücre3
hücre4 hücre5
hücre6 hücre7



Listeler:

      HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;

  1. Sıralı listeler (ordered list)
  2. Sırasız listeler (unordered list)
  3. Tanımlama listeleri (definition list) 

      Sıralı listeler rakam , harf yada her ikisini içiçe alarak liste oluşturmamızı sağlar.Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Listemizin rakamla mı harfle mi olacağını (type) parametresi ile belirtebiliriz. 

     Sıralı Listeler

 

Html Etiketi Etiketin Web Sayfasındaki görüntüsü
<OL TYPE = "1">ELEMANLAR : 
<LI>ELEMAN 1
<LI>ELEMAN 2
<LI>ELEMAN 3
</OL>
    ELEMANLAR :
  1. ELEMAN 1
  2. ELEMAN 2
  3. ELEMAN 3

     Sırasız Listeler

Html Etiketi Etiketin Web Sayfasındaki görüntüsü
<UL TYPE="DISC"> ELEMANLAR: 
<LI>ELEMAN 1
<LI>ELEMAN 2
<LI>ELEMAN 3 
</UL>
    ELEMANLAR:
  • ELEMAN 1
  • ELEMAN 2
  • ELEMAN 3


      Tanımlama listeleri


<dl>
<dt>Karbonhidrat ve ben
<dd>En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. </dd></dt>
<dt>Sebze ve ben
<dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. </dd></dt>
<dt>Et ve ben
<dd>Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. </dd></dt>
</dl> 
Karbonhidrat ve ben
En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini..
Sebze ve ben
Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.
Et ve ben
Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. 



« 1 »