Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının HTML'de görseller kullanımını anlattığı eğitim içeriğidir.
- Video, HTML'de görsellerin nasıl kullanılacağını adım adım göstermektedir. İlk olarak img etiketinin özellikleri (src, alt, width, height) tanıtılmakta, ardından internetten görsellerin nasıl bulunacağı ve sayfaya nasıl ekleneceği örneklerle açıklanmaktadır. Konuşmacı, Google'dan ve Lorem Pixum sitesinden görseller alarak, bu görselleri HTML sayfasına nasıl entegre edebileceğimizi göstermektedir.
- Ayrıca, görsellerin doğru klasörde (proje klasörünün içinde) olması gerektiği vurgulanmakta ve görsellerin boyutlarının nasıl ayarlanacağı anlatılmaktadır. Video, görsellerin web sitesinin performansını ve yükleme süresine etkisini de ele almaktadır.
- 00:10Görsellerle Çalışma Giriş
- Çalışmalara başladığımızda hız kazandığımızı düşünüyoruz ve yeni şeyler öğrenmeye devam edeceğiz.
- Bu videoda görsellerle çalışmaya başlayacağız ve görsellerin iki şekilde bulunabileceğini göstereceğiz: kendi bilgisayarımızda veya internette.
- İlk olarak internetten hazır resimler nasıl bulunabileceğini ve kullanılacağını inceleyeceğiz.
- 01:02img Etiketi ve Özellikleri
- Görselleri oluşturmak için img etiketini kullanmamız gerekiyor.
- img etiketinin zorunlu özellikleri arasında src (kaynak) ve alt (alternatif bilgi) etiketleri bulunuyor.
- alt etiketi görme özürlülerin resmin nasıl olduğunu anlaması için kullanılıyor ve arama sonuçlarında da önemli olabiliyor.
- 02:19İnternetten Görsel Bulma
- İnternetten bir resim bulmak için önce görselin adresini kopyalayıp img etiketinin src kısmına yapıştırıyoruz.
- Görselin kendi büyüklüğü bu şekilde geliyor, ancak width ve height bilgisi ile değiştirebiliyoruz.
- CSS ile de görselin boyutlarını değiştirebiliyoruz.
- 04:01Google'dan Görsel Alma
- Google'dan bir görsel almak için önce Google'da arama yapıyoruz, sonra görsellere geliyoruz.
- Görsele sağ tıklayıp "copy imaj adresi" seçeneğini kullanarak görselin adresini kopyalıyoruz.
- Kopyalanan adresi img etiketinin src kısmına yapıştırarak görseli sayfaya ekleyebiliriz.
- 05:10Lorem Pixum Kullanımı
- Lorem Pixum, lorem ipsum'a benzer şekilde anlamsız fotoğraflar sunan bir site.
- Lorem Pixum'da bulunan fotoğrafların özelliklerini (genişlik ve yükseklik) değiştirebiliyoruz.
- Örneğin, 200x300 piksel boyutunda bir görsel için 200'ü 600'e değiştirdiğimizde, 600x300 piksel boyutunda bir görsel elde ediyoruz.
- 06:20Görsel Kaydetme ve Klasör Oluşturma
- Lorem Pixum sitesi kullanılarak görseller kaydedilebilir ve 600'lük boyutta kaydedilebilir.
- Görseller, proje klasörünün içerisinde "imaj" adında bir klasörde saklanmalıdır.
- Görseller masaüstünde veya belgelerin içerisinde değil, proje klasörünün içerisinde olmalıdır.
- 08:35Görsel Kullanımı
- Görseller web sayfasında kullanılırken, klasör ismi ve dosya adı doğru şekilde belirtilmelidir.
- Görsel ismi tam olarak belirtilmediğinde, alternatif olarak metin görüntülenir.
- Görseller kendi bilgisayarındaki proje klasöründe veya web sitesinden alınabilir.
- 11:35Görsel Boyutları ve Performans
- Görsellerin genişliği (width) ve yüksekliği (height) ayarlanabilir.
- Görsellerin boyutu web sitesinin performansını etkiler, büyük görseller yüklenme süresini uzatabilir.
- Görsellerin boyutu önemli olduğundan, web sitesi yüklenirken bu faktör dikkate alınmalıdır.