20
Ekim

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 42.923 Defa

Merhaba değerli arkadaşlar bu dersimizde resim eklemeye devam ediyoruz. Bu dersimizde yapacaklarımız ise resim boyutlarını ayarlama ve alt parametresi (Alternatif text) kullanımını göreceğiz arkadaşlar öncelikle bir önceki dersimizi hatırlayalım resim eklemeyi tam olarak anlayabilmek için aşağıdaki linkten faydalanarak göz atabiliriz.

Bir Önceki Dersimiz: Web Tasarım Dersleri Html Resimler Ders7

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ül

Bu 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ırma

Html 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 Ekleme

Html 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 inşeAllah

Yazılarımı derslerimi legal olan tüm platformlarda www.webmasteryolcu.com kaynak belirterek paylaşabilirsiniz.



   Paylaş

2 Yorum yapılmış

  • Bahadır
    19 Aralık 2010 | Cevapla

    Tama Bi soraki DersTe mevcutmuş hocam özür:)

  • ali
    14 Temmuz 2011 | Cevapla

    hocam güzel bir site ve yararlı bilgiler veriyorsunuz. hocam kendıme su anda bır web sıtesı yapıyorum.kendim albüm adında bır sayfa olursturdum ve resımlerımı koymak istiyorum.normal resımlerım 1600×1200 bunu 200x 267 ceviriyorum ve sıteme koyduğumda kalitesi bozuluyor bu fotoyu net birsekilde nasıl yerleştireiliriz .

Yorum yapın