Altın Konu HTML Kodlarıyla Hareketli, Hareketsiz Görsel Eklemek.

ByESiNTi · 24 Tem 2021

Resim görselleriyle, bir web sayfasının tasarımını ve görünümünü iyileştirebilirsiniz.

HTML Görüntüleri Sözdizimi

HTML <img>etiketi, bir web sayfasına bir resim gömmek için kullanılır.

Görüntüler teknik olarak bir web sayfasına eklenmez; resimler web sayfalarına bağlıdır. <img>Etiketi başvurulan resim için bir tutma alanı yaratır.

<img>Etiketi yalnızca niteliklerini içerir ve bir kapanış etiketi yok, boş.

<img>Etiketi, iki niteliği taşımaktadır:

src - Resmin yolunu belirtir
alt - Resim için alternatif bir metin belirtir

Sözdizimi:

Kod:

<img src=" url" alt=" alternatetext">

src Özelliği

Gerekli srcöznitelik, görüntünün yolunu (URL) belirtir.

Not: Bir web sayfası yüklendiğinde; o anda, görüntüyü bir web sunucusundan alan ve sayfaya ekleyen tarayıcıdır. Bu nedenle, görüntünün web sayfasına göre aynı noktada kaldığından emin olun, aksi takdirde ziyaretçileriniz kırık bir bağlantı simgesi alır. altTarayıcı resmi bulamıyorsa, kopuk bağlantı simgesi ve metin gösterilir.

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

Alt Özellik

Gerekli altöznitelik, kullanıcı herhangi bir nedenle (yavaş bağlantı, src özniteliğindeki bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa) görüntüleyemiyorsa, resim için alternatif bir metin sağlar.

Örnek:

Kod:

<!DOCTYPE html>
<html>
<body>

<p>If a browser cannot find the image, it will display the alternate text:</p>

<img src="wrongname.gif" alt="Flowers in Chania">

</body>
</html>

Görüntü Boyutu - Genişlik ve Yükseklik

styleBir görüntünün genişliğini ve yüksekliğini belirtmek için özniteliği kullanabilirsiniz .

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we use the style attribute to specify the width and height of an image:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>
</html>

width Ve height özellikleri her zaman piksel görüntü genişliğini ve yüksekliğini belirler.

Genişlik ve Yükseklik veya Stil?

width, heightVe stylenitelikleri tüm HTML geçerlidir.

Ancak, styleözniteliği kullanmanızı öneririz . Stil sayfalarının görüntülerin boyutunu değiştirmesini engeller:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>Width/Height Attributes or Style?</h2>

<p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Başka Bir Klasördeki Görüntüler

Resimleriniz bir alt klasördeyse, srcözniteliğe klasör adını eklemelisiniz :

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Başka Bir Sunucudaki/Web Sitesindeki Görüntüler

Bazı web siteleri başka bir sunucudaki bir resme işaret eder.

Başka bir sunucudaki bir resme işaret etmek için srcöznitelikte mutlak (tam) bir URL belirtmelisiniz :

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

</body>
</html>

Hareketli Görüntüler

HTML, animasyonlu GIF'lere izin verir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>

<p>HTML allows moving images:</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>

Resime Bağlantı Vermek,

Bir resmi bağlantı olarak kullanmak için <img>etiketi etiketin içine yerleştirin <a>:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>

Görüntü Kaydırma:

floatResmin bir metnin sağına veya soluna kaymasını sağlamak için CSS özelliğini kullanın :

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

</body>
</html>

EsatOfficial · 24 Tem 2021

Paylasım ıcın tesekkurler

SwordRex · 24 Tem 2021

Paylasım ıcın tesekkurler

ByESiNTi · 25 Tem 2021

EsatOfficial' Alıntı:
Paylasım ıcın tesekkurler

SwordRex' Alıntı:
Paylasım ıcın tesekkurler

Rica ederim..Yorumlarınız için teşekkürler.

Replicant · 25 Tem 2021

Paylaşım için teşekkürler

Altın Konu HTML Kodlarıyla Hareketli, Hareketsiz Görsel Eklemek.

ByESiNTi

ByESiNTi TURKMMO

HTML Görüntüleri Sözdizimi

Sözdizimi:

src Özelliği

Örnek:

Alt Özellik

Örnek:

Görüntü Boyutu - Genişlik ve Yükseklik

Örnek:

Genişlik ve Yükseklik veya Stil?

Başka Bir Klasördeki Görüntüler

Başka Bir Sunucudaki/Web Sitesindeki Görüntüler

Hareketli Görüntüler

Resime Bağlantı Vermek,

Görüntü Kaydırma:

Örnek:

EsatOfficial

Kara Gül ... 🥀

SwordRex

𝓣𝓮𝓴 𝓜𝓪𝓵 𝓥𝓪𝓻𝓵𝓲𝓰𝓲𝓶 𝓐𝓬𝓲𝓵𝓪𝓻𝓲𝓶

ByESiNTi

ByESiNTi TURKMMO

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Altın Konu HTML Kodlarıyla Hareketli, Hareketsiz Görsel Eklemek.

ByESiNTi

ByESiNTi TURKMMO

HTML Görüntüleri Sözdizimi​

Sözdizimi:​

src Özelliği​

Örnek:​

Alt Özellik​

Örnek:​

Görüntü Boyutu - Genişlik ve Yükseklik​

Örnek:​

Genişlik ve Yükseklik veya Stil?​

Başka Bir Klasördeki Görüntüler​

Başka Bir Sunucudaki/Web Sitesindeki Görüntüler​

Hareketli Görüntüler​

Resime Bağlantı Vermek,​

Görüntü Kaydırma:​

Örnek:​

EsatOfficial

Kara Gül ... 🥀

SwordRex

𝓣𝓮𝓴 𝓜𝓪𝓵 𝓥𝓪𝓻𝓵𝓲𝓰𝓲𝓶 𝓐𝓬𝓲𝓵𝓪𝓻𝓲𝓶

ByESiNTi

ByESiNTi TURKMMO

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

HTML Görüntüleri Sözdizimi

Sözdizimi:

src Özelliği

Örnek:

Alt Özellik

Örnek:

Görüntü Boyutu - Genişlik ve Yükseklik

Örnek:

Genişlik ve Yükseklik veya Stil?

Başka Bir Klasördeki Görüntüler

Başka Bir Sunucudaki/Web Sitesindeki Görüntüler

Hareketli Görüntüler

Resime Bağlantı Vermek,

Görüntü Kaydırma:

Örnek: