HTML'de Görüntü İşlemleri

by trustix


Eklenme Tarihi : 16 Aralık 2020 19:16 Views:     334



Bir resim, çizim ya da fotoğraf web sayfanın içeriğinin kalitesini arttırabilir, web sayfasını daha anlaşılır bir hale dönüştürebilir, daha renkli bir hale getirebilir ya da daha ilginç bir görünüme sahip olmasına imkan tanıyabilir. Bu nedenle HTML sayfalarında sık sık görsel içerikler kullanılır.

Bu görseller HTML'de <img> etiketi kullanılarak eklenir. <img> etiketi ile bir dosya yolu, bir sunucu adresi ya harici bir adresten fotoğrafın görüntülenmesi sağlanabilir.

<img> Etiketinin Söz Dizimi şu şekildedir.

 

    <img src="Görüntü Adresi" alt="görüntü ile ilgili metin">

 

Her <img> etiketi iki öznitelik ile birlikte kullanılmalıdır. Bu özniteliklerden biri src özniteliğidir ki bu görüntü dosyasının yolu ya da sunucu adresinin belirtildiği bölümdüdr. İkincisi ise alt özniteliğidir. Bu öznitelik ise metin ile ilgili bir metin içermelidir. Eğer görüntü mevcut değilse, görüntü silinmişse ya da kullanıcının girdiği cihaz görüntüyü göstermiyorsa alternatif metin gibi kullanıcının karşısına çıkacaktır. Bu nedenle alt özniteliği boş bırakılmamalıdır.

<img> etiketi tıpkı <br> etiketi gibi kapanışı olmayan bir etikettir.

Örneğin:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Görüntü İşlemleri </title>


</head>
<body>


    <!--
        Görüntü benim HTML kodlarını yazdığım proje 
        dosyalarımın olduğu kök dizinde olduğu için
        yolunu bu şekilde belirtiyorum.
        Sizin belirteceğiniz resim yolun
        görüntünün bulunduğu dizine 
        göre değişiklik gösterebilir.
        Bu şekilde reesim web sayfasında görüntülenmektedir.
    -->
    <img src="html-7.jpg" alt="HTML Görüntü İşlemleri">
</body>
</html>

 

 

Yukarıdaki kodlar resmin web sayfasında görüntülenmesini sağlayacaktır. Ancak görüntü hali hazırda yüksek kalite olduğu için bütün web sayfasını kaplayacaktır. Bu nedenle HTML aracılığı ile görüntülerin boyut ayarlamasını da yapmamız gerekiyor. Bu ayarlamalar da yine <img> etiketi içerisinde öznitelikler aracılığı ile olmaktadır.

Yüklenen görüntünün 600px genişliğe ve  400px yüksekliğe sahip olması için aşağıdaki gibi bir düzenleme yapmamız gerekecektir.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Görüntü İşlemleri </title>


</head>
<body>


    <!--
        Görüntülerin boyutlandırılması yükseklik için height 
        genişlik içinse width özniteliği ile mümkündür.
        
    -->
    <img src="html-7.jpg" alt="HTML Görüntü İşlemleri" height="400" width='600' >
</body>
</html>

 

Bir görüntü dosyasını height ve width özniteliklerini kullanarak boyutlandırdık. Aynı boyutlandırma işlemi style özniteliği kullanılarak da yapılabilir.

Örneğin:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Görüntü İşlemleri </title>


</head>
<body>


    <!--
        style özniteliği ile de görüntülerin boyutlandırılması
        gerçekleştirilebilir.
        
    -->
    <img src="html-7.jpg" alt="HTML Görüntü İşlemleri" style="height: 400px; width:600px">
</body>
</html>

 

HTML'de görüntü işlemleri ve <img> etiketi öznitelikleri yukarıdaki örneklerde olduğu gibi kullanılabilir.

Herkese İyi Kodlamalar.





0

Yorum Formu

vikikod.com    © 2019