952 kez okundu

Html Dersleri Resim Boyutlandırma ve Alt Parametresi

10 10 952 kez okundu incelendi

Bu dersimizde yapacaklarımız ise resim boyutlarını ayarlama ve alt parametresi (Alternatif text) kullanımını göreceğiz

Width ve Height

Width parametresi arkadaşlar resmin sayfa içindeki genişliği ayarlamaya yararki sadece resimlerde değil tabloların boyutlandırmasındada width parametresini kullanacağız.

Height Parametresi ise width parametresi aksine yükseklik ayarını boyutunu belirlememizi sağlar

Resim Boyutlandırma Uygulaması

Tüm arkadaşlar olarak aynı işlemi görebilmek için aynı resmi kullanalım arkadaşlar aşağıdaki resmi farklı kaydet diyerek bilgisayarınızın masaüstüne gul.jpg olarak kaydedin arkadaşlar ve aşağıdaki kodları boş bir not defteri açarak başlıyoruz yazmaya ve yazınca farklı kaydet diyerek dosya adı resimboyu.html olarak masaüstüne kaydedin yani resimin olduğu yere kaydedin.

gülBu resmi farklı kaydet diyerek masaüstünüze gul.jpg olarak kaydedin

<html>
<head>
<title>Web Tasarım Dersleri Html resim Ekleme Ders8</title>
</head>

<body>
<img src=”gul.jpg” width=”300″ height=”250″ />
</body>
</html>

Yukardaki işlemi özetliyim arkadaşlar img src=”gul.jpg” resim ekleme kodu ile gul.jpg isminde bir resim eklemek istediği belirttim width=”300 diyerek genişlik 300 olsun height=”250″ yükseklik 250 olsun dedim ve hata yapmadığınız sürece aşağıdaki görüntüyü elde edersiniz.

Html Resim BoyutlandırmaHtml Resim Boyutlandırma

Resim Boyutlandırmada Dikkat Edilecekler


size verdiğim resim 300 px genişliğinde 250 px yüksekliğinde arkadaşlar bunu sayfanızda genişlik 500 600 derseni resim bulanık olur kalita bozulur onun için boyutları fazla aşmadan çalışmalısınız arkadaşlar.

Resimlere Alt Parametresi Ekleme

Alt parametresi (Alternatif metin demektir) arkadaşlar aslında zorunlu bir kod değildir kulanırsanız avantajlarınız olur nedir bu avantajlar Resimleriniz google resim aramada yer alır ayrıca bir iyaretçi kaynağı sayılır resimlerin üzerine maosla gelince alt parametresi görülür resim hakkında kısa bilgi verilmiş olur.

Alt parametresi işleyişini görmek için yukarda verdiğim resmin üzerine maosla gelin göreceksiniz şimdi birde uygulama yapalım aşağıdaki gibi resim ekliyoruz yine ve alt parametreimizi kullanıyoruz arkadaşlar alternatif metin ne isterseniz yazabilirsiniz.

Aşağıdaki kodları yazıyoruz ve dosya adı altparametre.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Html Resim Alt Parametresi Ders8</title>
</head>

<body>
<img src=”gul.jpg” width=”300″ height=”250″ alt=”Webmasteryolcu İle Dersler” />
</body>
</html>

Html Alt Parametresi EklemeHtml Alt Parametresi Ekleme Resime Dikkat ediniz

Bugünkü dersimizde bu kadar değerli arkadaşlar bir sonraki dersimizde son olarak resimleri işleyecez ne görecez derseniz resimlerin farklı klasörde yayınlanması ve resimlerin hizalanmalarını görüp resimleri geçicez

Yorum yap

Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter