Html, resim ekleme, metin biçimlendirme, listeleme etiketleri
3100 0

Resim Ekleme

Html sayfaya resim eklemek için "<img/>" etiketi kullanılır ve yazımı aşağıdaki gibidir.

<img src="resim dosyasının yolu"/>

En basit hali ile yazım şekli budur. "src" özelliğine dosyanın yolu yazılmalıdır. Bu yolu göreceli veya mutlak adres ile yazabilirsiniz. Bu adres şekillerini daha önce anlatmıştık ve şuradan bakabilirsiniz. Daha önce oluşturduğumuz klasör yapısına göre;

kök klasörümüzresimler kalsörü

Yukarıdaki klasör yapısına göre "index.html" içerisine bir resim ekelemek istersek;

<img src="resimler/koca-yusuf.jpg"/>

şeklinde yazılmalıdır. Bu yazım şekli hatırladığınız gibi göreceli adres yazımıdır.

Eğer resme genişlik ve yükseklik vermek isterseniz, "width" ve "height" özelliklerini kullanabilirsiniz.

<img src="resimler/koca-yusuf.jpg" width="100" height="150"/>

Burada dikkat edilmesi gereken şey, resmin orijinal görünümünün bozulacağıdır. Mümkünse aynı oranda küçültme yapılmalıdır yada dosya en başta sayfamızda olması gereken boyutlarda hazırlanabilir. Html kodları ile yapılabilecekler bunlardır. Genişlik ve yükseklik gibi başka özellikler de mevcut bunlardan videoda bahsedildi. Ben de bir tablo içerisinde bunlardan bahsedeyim.

<img/> Etiketi Özellikleri
Özellik Tanım Kullanım Sonuç
src="url" Resim yolu <img src="logo.jpg"/>
height="sayısal değer" Resim yükseklik <img src="logo.jpg" height="50"/>
width="sayısal değer" Resim genişlik <img src="logo.jpg" width="50"/>
title="metin" Resim üzerine fare ile gelindiğinde çıkacak metin <img src="logo.jpg" width="50" height="50" title="logo"/> logo
alt="metin" Grafiği temsil eden bir yazı yazılır, görme engellilerin de grafiği okuyabilmesini sağlar. <img src="logo.jpg" width="50" height="50" alt="logo"/> logo
vspace="sayısal değer" Dikey boşluk, alttan ve üstten <img src="logo.jpg" width="50" height="50" title="logo" vspace="10"/> logo
hspace="sayısal değer" Yatay boşluk, sağdan ve soldan <img src="logo.jpg" width="50" height="50" title="logo" hspace="10"/> logo
align="değerler" Resmin metinlerle olan ilişkisini tanımlar.

<img src="logo.jpg" width="50" height="50" align="top"/>Logo

logo​Logo
  <img src="logo.jpg" width="50" height="50" align="middle"/>Logo logo​Logo
  <img src="logo.jpg" width="50" height="50" align="bottom"/>Logo logo​Logo
left veya right kullanarak yazıların etrafına sarılmasını sağlayabilirsiniz. <img src="logo.jpg" width="50" height="50" align="left"/>Logo<br/>Logo<br/> Logo logo​Logo
Logo
Logo

Metin Biçimlendirme Etiketleri

Metin Biçimlendirme Etiketleri
Etiket Tanım Kullanım
<p> Paragraf yapma <p>Paragraf</p>
<hr/> Yatay çizgi ekleme <hr/>
<strong>, <b> Kalın yazı <strong>Kalın Yazı</strong>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Başlık etiketleri <h1>Başlık 1</h1>
<em>, <i> Yatık yazı <em>Yılmaz</em>
<br/> Satır atlatma <br/>
<u> Altı çizili <u>Yılmaz</u>
<strike>, <s> Üstü çizili <strike>Yılmaz</strike>
<sup> Üst simge x<sup>2</sup>
<sub> Alt simge H<sub>2</sub>SO<sub>4</sub>

Listeleme Etiketleri

1- Sırasız Listeler

<ul>
    <li>Matematik</li>
    <li>Türkçe</li>
    <li>Tarih</li>
</ul>

Bu kodun çıktısı şu şekilde olur.

  • Matematik
  • Türkçe
  • Tarih

Eğer elemanların başlarında bulunan simgeleri değiştirmek isterseniz, "type" özelliği ile belirtilebilir. Alacağı değerler "disc","square","circle" şeklinde olabilir.

<ul type="square">
    <li>Matematik</li>
    <li>Türkçe</li>
    <li>Tarih</li>
</ul>

Sonuç;

  • Matematik
  • Türkçe
  • Tarih

2- Sıralı Listeler

Başlarında bir simge değilde sıralama elemanı olduğu için böyle isimlendirdik.

<ol>
    <li>Matematik</li>
    <li>Türkçe</li>
    <li>Tarih</li>
</ol>

Sonuç;

  1. Matematik
  2. Türkçe
  3. Tarih

Sırasız listede kullandığımız "type" özelliğini burada da kullanabilirsiniz, tek fark alcağı değerler. Şu değerleri alabilir, "1","A","a","I","i" bunları deneyerek görebilirsiniz. Kısaca sıralamanın ne şekilde olacağını söylersiniz. Örneğin "A" derseniz sıralama "A,B,C..." şeklinde olur veya "I" dersek roma rakamları kullanılır "I,II,II,IV,V..." şeklinde olacaktır.

<ol type="A">
    <li>Matematik</li>
    <li>Türkçe</li>
    <li>Tarih</li>
</ol>

Sonuç;

  1. Matematik
  2. Türkçe
  3. Tarih

Eğer sıralamanın belli bir değerden başlamasını isterseniz "start" özelliğini kullanabilirsiniz.

<ol type="A" start="2">
    <li>Matematik</li>
    <li>Türkçe</li>
    <li>Tarih</li>
</ol>

Sonuç;

  1. Matematik
  2. Türkçe
  3. Tarih

Gördüğünüz gibi sıralama 2. değerden başlamış oldu.

3- Açıklama Listeleri

Böyle bir isim vermek istedim çünkü, oluşturduğu görünüm bir başlık ve onun açıklaması şeklinde görünüyor. Açıkçası çok ta kullanıldığını görmedim. Kullanım şekli aşağıdaki gibidir.

<dl>
    <dt>Yılmaz</dt>
    <dd>Çok azimli bir arkadaştır.</dd>
    
    <dt>Ahmet</dt>
    <dd>Çok şımarık.</dd>
    
    <dt>Mehmet</dt>                  
    <dd>Daha iyi olabilir.</dd>

</dl>
^
X