HTML Görüntüler ve Linkler – HTML Dersleri 5

0
438
görüntülenme
HTML Öğreniyorum
HTML Öğreniyorum Görseli

Bir önceki dersimizde HTML etiketlerinde çeşitli öznitelikler tanımlanabileceğini ve bu özniteliklere çeşitli değerler atanabileceğinden bahsedilmişti. Bu dersimizde ise içeriğimize HTML görüntüler ve linkler (resim ve bağlantı) eklemeyi, bu eklemelerde kullanacağımız etiketleri ve bu etiketlerde kullanılan özniteliklerden bahsedeceğim.

<img> Etiketi

<img> etiketi oluşturacağımız html sayfasına bir görüntü eklemek için kullanılır. Etiket içerisinde sadece nitelik değerleri yer alır ve kapanış etiketi yoktur.

Görüntünün URL’si ( Uniform Resource Locator, adresi, bulunduğu yeri ) src niteliğiyle tanımlanır.

HTML görüntü syntax’ı (sözdizimi) şu şekilde yazılır;

<img src="resim.jpg" />
alt niteliği görüntü yerine alternatif bir yazı belirtir.

Görüntü Konumu

Görüntü konumunu src niteliği ile gösterirken alıntı (Çift tırnak işareti) arasında göstermek gerekmektedir.

Örneğin, eğer html dosyanız ile aynı klasör içerisinde resim.png adında bir görüntünüz var ise yazacağınız kod şu şekilde görünür;

<html>
<head>
    <title>ilk sayfam</title>
</head>
<body>
    <img src="resim.png" alt="" />
</body>
</html>
Eğer görüntü herhangi bir sebeple görüntülenemezse, alt niteliği görüntü yerine görüntüyü kelimelerle anlatan alternatif bir yazı gösterir. Bunun için alt niteliği zorunludur!

Görüntü Boyutlandırma

Görüntülerin boyutlarını tanımlamak/düzenlemek için width (genişlik) ve height (yükseklik) nitelikleri kullanılır.
Görüntü boyutlandırma değerleri piksel ve yüzde olarak belirtilebilir.;

<html>
<head>
    <title>ilk sayfam</title>
</head>
<body>
    <img src="resim.png" height="150px" width="150px" alt="" />
    <!-- veya -->
    <img src="resim.png" height="50%" width="50%" alt="" />
</body>
</html>
Görüntülerin yüklenmesi zaman alır. Büyük boyutlu resimler kullanmak sayfanızı yavaşlatır. bu sebeple görüntüeri dikkatli kullanın!

HTML Görüntü Kenarlığı (Border)

Varsayılan olarak bir görüntünün kenarlıkları yoktur. Eğer görüntülerinize kenarlık eklemek isterseniz görüntü etiketinin içerisinde kenarlık (border) niteliğini kullanmanız gerekmektedir.

<img src="resim.png" height="150px" width="150px" border="1px" alt="" />
Internet Explorer 9 ve önceki sürümlerinde kenarlık niteliği kullanılmasa da görüntünün etrafında varsayılan olarak kenarlık görüntüler!

HTML Link <a> Etiketi

Linkler (Bağlantılar) her web sayfasının ayrılmaz bir parçasıdır. Bağlantıları bir metne veya resimlere ekleyerek ziyaretçileri farklı bir sayfaya veya dosyaya yönlendirebilirsiniz. HTML’de bağlantılar <a> etiketi kullanılarak tanımlanır. Bu etiketin kapanış </a> etiketi vardır.

Bağlantıların (linklerin) nereye yönlendirileceği ise “href” özniteliği ile tanımlanır.

<a href=""></a>
Bir görüntüyü (resmi) başka bir belgeye bağlamak için etiketini etiketlerinin içine yerleştirin.
<a href=""><img src="" alt="" /></a>

Aşağıdaki örnekte web sitemin anasayfasına yönlendirilen bir bağlantı tanımladım:

<a href="https://www.lokmandogan.com">Lokman DOĞAN | Kafama Estikçe</a>

Kod kaydedildikten sonra “Lokman DOĞAN | Kafama Estikçe” bir bağlantı olarak gösterilecektir.

Lokman DOĞAN | Kafama Estikçe (Tıkladığınızda sitemin anasayfasına yönlendirilirsiniz.)

target Özniteliği

target özniteliği bağlantılanmış belgenin/sayfanın nerede açılacağını belirtir. Bu özniteliğe _blank değerini atamak bağlantının yeni bir pencerede veya yeni bir sekmede açılmasına neden olur.

<a href="https://www.lokmandogan.com" target="_blank">Lokman DOĞAN | Kafama Estikçe</>

Ziyaret edilmiş (tıklanmış) bağlantılar, varsayılan olarak (herhangi bir stil ataması yapılmamışsa, CSS vs.) altı çizili ve mor renkte görünür.

Bu dersimizde HTML görüntüler ve linkler ile ilgili bir anlatım yaptık. Bir sonraki dersimizde listeler oluşturmayı göreceğiz. Sıralı ve sırasız (düzenli ve düzensiz) listelerin nasıl oluşturulacağımızı göreceğimiz dersimize buraya tıklayarak ulaşabilirsiniz.

CEVAP VER

Lütfen yorumunuzu yazınız.
Lütfen isminizi buraya yazınız