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" />
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>
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>
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="" />
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>
<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.
 eklemeyi, bu eklemelerde kullanacağımız etiketleri anlatacağım.){kind=link}