Teknolojideki destekçiniz

HTML de resim ekleme ve Notepad++

1 1.571
Bir web sayfasını kullanıcı tarafında ilgi çekici kılan en önemli unsur şüphesiz ki sayfada kullanılan resimlerdir. Tabi ki en başından beri belirttiğimiz bazı önemli noktalar bu konu da da var . Şöyle ki,web sayfanızda kullandığınız resimler  de sayfa yüklenmesini yavaşlatmaması için daha küçük boyutları tercih ederiz .

Uzantı ve dosya yoluna dikkat ederek istediğiniz her şeyi web sayfanıza ekleyebilirsiniz.Resimler, videolar, GIF’ler….

Konumuza gelelim. Her şeyini harika yaptığımız bir web sayfamız var. Ama resimleri eksik. Sayfaya resmi çağıralım.(Çağıralım:Lisedeki hocam böyle derdi.)

 

<img src=”images.jpg”>  bu ifade ile çağırmak  bu konu için en kaba tabir.Resmin yüksekliği,genişliği. kenarlıkları , başlığı gibi bir çok özelliği vardır.Hazır resim konusundayken bazı tasarımcılar arkaplanda bir görsel kullanmayı tercih edebiliyor.Ama risk almak istemeyenler beyaz bırakır genel de.Çünkü arkaplan rengini değiştirmek,yüklenme ve cihaz uyumu sorunlarına yol açabilir. İki yazıdır not defterinde çalışmıştık.Şimdi birazda Notepad++ uygulamasını görelim ve hemen ardından Dreamwevar uygulamasına da el atalım.Notepad++, bir çok dil için kod yazabileceğiniz bir editör uygulamasıdır.Tarayıcımıza notepad++ yazıyoruz ve uygulamayı ücretsiz bir şekilde bilgisayarımıza kuruyoruz.

 

 

Notepad++’ı anlatan bir yazı ile karşılıyor sayfa bizi. indirme bağlantısına yan taraftan tıklıyoruz.Kurulum aşamalarını OKUYARAK onaylıyoruz.

 

 

veee ilk proje sayfamız önümüz de. Yolun bundan sonrasına Notepad++ ile devam ediyoruz.

 

 

Burada bir tavsiye vereceğim. Tüm proje çalışmalarını ve eklentileri aynı klasörde tutmaya çalışın. Klasörde tutma işleminiz , size büyük kolaylık sağlayacaktır.Gerekli öneriyi de verdiğime göre şimdi ilk eklemeyi atalım.

 

 

Yine ana taslağımızı kurup sadece resmi görüntülemeye yönelik bir amaçla sayfaya çağırıyoruz.
Aşağıdaki gibi bir önizleme ile karşılaşıyoruz.

 

 

En başta da dediğim gibi bu en kaba hali. Görüntülemeyi hallettiysek tek bir örnekte gerekli tüm özellikleri anlatacağım.

 

 

ALT imiyle açıklama metni ekledik. Align imi ile yerini ayarladık. width ve height ile de genişlik ve yüksekliğini ayarladık. Üstte dikkatinizi çekeceğim nokta arkaplana resim ekledik ve bunu da göstermiş olduk.

 

 

Örneklere bakarak ne zevksiz kız bu demeyin.Örnekler net görünsün diye absürtlüğü kullanıyorum. Umarım işe yarıyordur. Kod kısmında manuel olarak çok fazla seçenek var fakat HTML sürümleri arasında uyum sorunu çıkarmayan belli başlı özellikleri verdim . Yaklaşık 10 yıl daha sizi idare edebilir bu özellikler  … 🙂 HTML diliyle resim ekleme ve Notepad++ uygulamasını kullanma konusunda şimdilik bu kadar…Sonraki yayınları da okuyarak takipte kalın.