Serinin ilk bölümü: HTML Öğrenelim - 1
Serinin ikinci bölümü: HTML Öğrenelim - 2
Serinin üçüncü bölümü: HTML Öğrenelim - 3
Serinin dördüncü bölümü: HTML Öğrenelim - 4
Serinin beşinci bölümü: HTM Öğrenelim - 5
Serinin altıncı bölümü: HTML Öğrenelim - 6
Github - Repository
Kaynak: W3schools
Serinin ikinci bölümü: HTML Öğrenelim - 2
Serinin üçüncü bölümü: HTML Öğrenelim - 3
Serinin dördüncü bölümü: HTML Öğrenelim - 4
Serinin beşinci bölümü: HTM Öğrenelim - 5
Serinin altıncı bölümü: HTML Öğrenelim - 6
Github - Repository
Kaynak: W3schools
HTML'de Görseller
HTML'de <img> etiketi bir görseli bir internet sayfasına gömmek için kullanılır.
Görseller teknik olarak bir web sayfasına eklenmez; görseller web sayfalarına bağlıdır. <img> etiketi, başvurulan görüntü için bir tutma alanı oluşturur.
<img> etiketi kapanış etiketine ihtiyaç duymaz.
<img> etiketinde 2 özellik öne çıkar:
- src: Görselin yolunu(path) belirtir.
- alt: Resim için alternatif bir metin belirtir.
HTML'de <img> etiketi bir görseli bir internet sayfasına gömmek için kullanılır.
Görseller teknik olarak bir web sayfasına eklenmez; görseller web sayfalarına bağlıdır. <img> etiketi, başvurulan görüntü için bir tutma alanı oluşturur.
<img> etiketi kapanış etiketine ihtiyaç duymaz.
<img> etiketinde 2 özellik öne çıkar:
- src: Görselin yolunu(path) belirtir.
- alt: Resim için alternatif bir metin belirtir.
src Özelliği
src özelliği görselin yolunu(URL) belirtir.
Not: Bir web sayfası yüklendiğinde görüntüyü bir web sunucusundan alan ve sayfaya ekleyen tarayıcıdır(Chrome,Mozilla vs.). Bu nedenle, görüntünün web sayfasına göre aynı yerde kaldığından emin olun, aksi takdirde ziyaretçileriniz kırık bir bağlantı simgesi alır. Tarayıcı resmi bulamıyorsa, bozuk bağlantı simgesi ve alternatif metin gösterilir.
Örnek:
src özelliği görselin yolunu(URL) belirtir.
Not: Bir web sayfası yüklendiğinde görüntüyü bir web sunucusundan alan ve sayfaya ekleyen tarayıcıdır(Chrome,Mozilla vs.). Bu nedenle, görüntünün web sayfasına göre aynı yerde kaldığından emin olun, aksi takdirde ziyaretçileriniz kırık bir bağlantı simgesi alır. Tarayıcı resmi bulamıyorsa, bozuk bağlantı simgesi ve alternatif metin gösterilir.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Alternatif metin</h2>
<p>Alt özelliği, görsel içeriğini metin halinde yansıtmalıdır, böylece görseli göremeyen kullanıcılar görselin ne içerdiğini okuyarak anlar:</p>
<img src="https://i.hizliresim.com/c5awiw0.jpg" alt="Green Team" width="460" height="345">
</body>
</html>
alt Özelliği
Kullanıcı herhangi bir nedenle (yavaş bağlantı, src özelliğindeki bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa) görseli görüntüleyemiyorsa, alt özelliği bir resim için alternatif bir metin sağlar.
alt özelliğinde kullanacağınız metin resmi açıklayıcı nitelikte olmalıdır.
Yukarıdaki görseli görüntüleyemeseydik görselin alt metni olarak Green Team yazısını görüntüleyecektik.
Kullanıcı herhangi bir nedenle (yavaş bağlantı, src özelliğindeki bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa) görseli görüntüleyemiyorsa, alt özelliği bir resim için alternatif bir metin sağlar.
alt özelliğinde kullanacağınız metin resmi açıklayıcı nitelikte olmalıdır.
Yukarıdaki görseli görüntüleyemeseydik görselin alt metni olarak Green Team yazısını görüntüleyecektik.
Görsel Boyutu - Genişlik ve Yükseklik
Görselin genişliğini ve yüksekliğini değiştirmek için style özelliğinin width ve height eklentilerini kullanıyoruz.
İki şekilde kullanım mümkündür:
1-
Görselin genişliğini ve yüksekliğini değiştirmek için style özelliğinin width ve height eklentilerini kullanıyoruz.
İki şekilde kullanım mümkündür:
HTML:
style="width:500px;height:600px;"
HTML:
width="500" height="600"
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Görsel Boyutu</h2>
<p>Görselin genişliğini ve yüksekliğini değiştirmek için style özelliğinin width ve height eklentilerini kullanıyoruz.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Ataturk1930s.jpg" alt="Atatürk" width="500" height="600">
</body>
</html>
Başka Bir Klasördeki Görseller
Görselleriniz bir alt klasördeyse, src özelliğine klasör adını eklemelisiniz.
Örnek:
Görselleriniz bir alt klasördeyse, src özelliğine klasör adını eklemelisiniz.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Başka Bir Klasördeki Görseller
</h2>
<p>Görselleriniz bir alt klasördeyse, src özelliğine klasör adını eklemelisiniz.
</p>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Başka bir internet sitesindeki/sunucudaki görseller
Bazı web siteleri başka bir sunucudaki bir görseli işaret eder. Başka bir sunucudaki bir görseli işaret etmek için, src özelliğinde mutlak bir URL belirtmelisiniz.
Örnek:
Bazı web siteleri başka bir sunucudaki bir görseli işaret eder. Başka bir sunucudaki bir görseli işaret etmek için, src özelliğinde mutlak bir URL belirtmelisiniz.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Başka bir internet sitesindeki/sunucudaki görseller
</h2>
<img src="https://www.turkhackteam.org/styles/v1/tht/logo.png" alt="www.turkhackteam.org" style="width:555px;height:225px;">
</body>
</html>
Hareketli Görseller(GIF)
HTML hareketli görsellere(GIF'lere) izin verir.
Örnek:
HTML hareketli görsellere(GIF'lere) izin verir.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Hareketli Görseller</h2>
<p>HTML hareketli görsellere(GIF'lere) izin verir.
</p>
<img src="programming.gif" alt="Computer man" style="width:111px;height:111px;">
</body>
</html>
Bağlantı(Link) olarak Görseller
Bir görseli bağlantı(link) olarak kullanmak için <a> etiketinin içerisine <img> etiketini koymalıyız.
Bir görseli bağlantı(link) olarak kullanmak için <a> etiketinin içerisine <img> etiketini koymalıyız.
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Bağlantı(Link) olarak Görseller
</h2>
<p>Görsel aslında bir bağlantıdır. Tıklayabilirsiniz. </p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML Öğrenelim" style="width:42px;height:42px;">
</a>
</body>
</html>
Görsel Kaydırma(Image Floating)
Görselin bir metnin sağına veya soluna kaymasını sağlamak için CSS float özelliğini kullanırız.
Örnek:
Görselin bir metnin sağına veya soluna kaymasını sağlamak için CSS float özelliğini kullanırız.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Görsel Kaydırma(Image Floating)
</h2>
<p><strong>Görseli sağa kaydır:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Sağa kaydırılmış görselle birlikte bir paragraf.
</p>
<p><strong>Görseli sola kaydır:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Sola kaydırılmış görselle birlikte bir paragraf.
</p>
</body>
</html>
Sıklıkla Kullanılan Görsel Formatları
Tüm tarayıcılarda (Chrome, Edge, Firefox, Safari, Opera) desteklenen en yaygın görüntü dosyası türleri şunlardır:
| Kısaltma | Dosya Formatı | Dosya Uzantısı |
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
HTML'de Görsel Haritaları
Görsel haritalarını kullanarak görsellerde tıklanabilir alanlar oluşturabilirsiniz.
HTML'de <map> etiketi bir görsel haritası tanımlar. Bir görsel haritası görselde tıklanabilir alanlar oluşturur. Bu alanlar bir veya birden çok <area> etiketi kullanarak oluşturulur.
Örnek:
Görsel haritalarını kullanarak görsellerde tıklanabilir alanlar oluşturabilirsiniz.
HTML'de <map> etiketi bir görsel haritası tanımlar. Bir görsel haritası görselde tıklanabilir alanlar oluşturur. Bu alanlar bir veya birden çok <area> etiketi kullanarak oluşturulur.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Görsel Haritaları</h2>
<p>Büyüteç görseline gitmek için ortadaki yeşil alana, Türk Hack Team'e gitmek için alttaki yazıya arka plana gitme için ise sağ taraftaki boş alana tıklayınız.</p>
<img src="https://i.hizliresim.com/c5awiw0.jpg" alt="GreenTeam" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Büyüteç" href="https://productimages.hepsiburada.net/s/29/375/10279573717042.jpg">
<area shape="rect" coords="290,172,333,250" alt="TürkHackTeam" href="https://www.turkhackteam.org/styles/v1/tht/logo.png">
<area shape="circle" coords="337,300,44" alt="Arkaplan" href="https://i.hizliresim.com/c5awiw0.jpg">
</map>
</body>
</html>
Görsel Haritaları Nasıl Çalışır?
Bir görsel haritasının arkasındaki fikir, görüntünün neresine tıkladığınıza bağlı olarak farklı eylemler gerçekleştirebilmenizdir.
Bir görsel haritası oluşturmak için bir resme ve tıklanabilir alanları tanımlayan bir HTML koduna ihtiyacınız vardır.
Görsel Haritası oluşturma hakkında daha detaylı bilgi edinmek istiyorsanız bağlantıyı inceleyebilirsiniz. (Çok detaya giriyor bahsetmek istemedim.)
Bir görsel haritasının arkasındaki fikir, görüntünün neresine tıkladığınıza bağlı olarak farklı eylemler gerçekleştirebilmenizdir.
Bir görsel haritası oluşturmak için bir resme ve tıklanabilir alanları tanımlayan bir HTML koduna ihtiyacınız vardır.
Görsel Haritası oluşturma hakkında daha detaylı bilgi edinmek istiyorsanız bağlantıyı inceleyebilirsiniz. (Çok detaya giriyor bahsetmek istemedim.)
HTML'de Arka plan Görselleri
HTML'de bir elemana arka plan eklemek için style özelliğini ve CSS'in background-image özelliğini kullanırız.
Örnek:
HTML'de bir elemana arka plan eklemek için style özelliğini ve CSS'in background-image özelliğini kullanırız.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Arkaplan Görselleri</h2>
<p>p elementi için bir arka plan:</p>
<p style="background-image: url('https://www.turkhackteam.org/styles/v1/tht/logo.png');">
Arka plan görsellerini belirtebilirsiniz.<br>
Bu örnekte, arka plan görseli<br>
bir p elementi için belirlendi.<br>
Arka plan varsayılan olarak<br>
aynı yönde tekrar edecek<br>
</p>
</body>
</html>
Bir Sayfanın Arka Planı
Tüm sayfanın bir arka plan görüntüsüne sahip olmasını istiyorsanız, arka plan görüntüsünü <body> öğesinde belirtmelisiniz.
Örnek:
Tüm sayfanın bir arka plan görüntüsüne sahip olmasını istiyorsanız, arka plan görüntüsünü <body> öğesinde belirtmelisiniz.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i.hizliresim.com/cv48p7d.png');
}
</style>
</head>
<body>
<h2>Arkaplan Görseli</h2>
<p>Arka plan görüntüsü, belirtildiği yerde, gövde öğesinden daha küçükse kendini tekrar eder.</p>
</body>
</html>
Arka plan Tekrarı
Arka plan görüntüsü öğeden daha küçükse, görüntü öğenin sonuna ulaşana kadar yatay ve dikey olarak kendini tekrar eder.
Örnek:
Arka plan görüntüsü öğeden daha küçükse, görüntü öğenin sonuna ulaşana kadar yatay ve dikey olarak kendini tekrar eder.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>
<h2>Arka plan Tekrarı</h2>
<p>Arka plan görüntüsü öğeden daha küçükse, görüntü öğenin sonuna ulaşana kadar yatay ve dikey olarak kendini tekrar eder.</p>
</body>
</html>
Arka plan görüntüsünün kendini tekrarlamasını önlemek için background-repeat özelliğini no-repeat özelliğiyle değiştiriniz.
Örnek:
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Arka plan Tekrarı
</h2>
<p>Arka plan görüntüsünün kendini tekrarlamasını önlemek için background-repeat özelliğini no-repeat özelliğiyle değiştiriniz.
</p>
</body>
</html>
Arka Plan Kapağı
Arka plan görüntüsünün tüm öğeyi kaplamasını istiyorsanız, background-size özelliğini cover şekilde ayarlayabilirsiniz.
Ayrıca, tüm öğenin her zaman kapsandığından emin olmak için background-attachment özelliğini fixed olarak ayarlayın.
Bu şekilde, arka plan görüntüsü, herhangi bir esneme olmaksızın tüm öğeyi kaplayacaktır (görüntü orijinal orantılarını koruyacaktır).
Örnek:
Arka plan görüntüsünün tüm öğeyi kaplamasını istiyorsanız, background-size özelliğini cover şekilde ayarlayabilirsiniz.
Ayrıca, tüm öğenin her zaman kapsandığından emin olmak için background-attachment özelliğini fixed olarak ayarlayın.
Bu şekilde, arka plan görüntüsü, herhangi bir esneme olmaksızın tüm öğeyi kaplayacaktır (görüntü orijinal orantılarını koruyacaktır).
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>Arka Plan Kapağı
</h2>
<p>Arka plan görüntüsünün tüm öğeyi kaplamasını istiyorsanız, background-size özelliğini cover şekilde ayarlayabilirsiniz.
Ayrıca, tüm öğenin her zaman kapsandığından emin olmak için background-attachment özelliğini fixed olarak ayarlayın.
Bu şekilde, arka plan görüntüsü, herhangi bir esneme olmaksızın tüm öğeyi kaplayacaktır (görüntü orijinal orantılarını koruyacaktır).</p>
</body>
</html>
Arka plan Germek
Arka plan görüntüsünün tüm öğeye sığacak şekilde uzamasını istiyorsanız background-size özelliğini 100% 100% olarak değiştirin.
Örnek:
Arka plan görüntüsünün tüm öğeye sığacak şekilde uzamasını istiyorsanız background-size özelliğini 100% 100% olarak değiştirin.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://i.hizliresim.com/c5awiw0.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h2>Arka plan Germek
</h2>
<p>Arka plan görüntüsünün tüm öğeye sığacak şekilde uzamasını istiyorsanız background-size özelliğini 100% 100% olarak değiştirin.</p>
</body>
</html>
HTML <picture> Elementi
HTML <picture> elementi, farklı cihazlar veya ekran boyutları için farklı görseller görüntülemenize olanak tanır.
<picture> öğesi, her biri srcset özelliği aracılığıyla farklı görüntülere atıfta bulunan bir veya daha fazla <source> öğesi içerir. Bu şekilde tarayıcı, mevcut görünüme ve/veya cihaza en uygun görüntüyü seçebilir. Her <source> öğesinin, görüntünün en uygun olduğu zamanı tanımlayan bir media özelliği vardır.
Örnek:
HTML <picture> elementi, farklı cihazlar veya ekran boyutları için farklı görseller görüntülemenize olanak tanır.
<picture> öğesi, her biri srcset özelliği aracılığıyla farklı görüntülere atıfta bulunan bir veya daha fazla <source> öğesi içerir. Bu şekilde tarayıcı, mevcut görünüme ve/veya cihaza en uygun görüntüyü seçebilir. Her <source> öğesinin, görüntünün en uygun olduğu zamanı tanımlayan bir media özelliği vardır.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>HTML <picture> Elementi</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>Farklı görüntü alanı boyutlarında yüklenen resmin farklı sürümlerini görmek için tarayıcıyı yeniden boyutlandırın.
Tarayıcı, medya sorgusunun kullanıcının mevcut görüntü alanı genişliğiyle eşleştiği ilk kaynak öğeyi arar,
ve srcset özelliğiyle belirtilen resmi getirir.</p>
<p>img öğesi, resim bildirim bloğunun son alt etiketi olarak gereklidir.
img öğesi, resim öğesini desteklemeyen tarayıcılar için veya kaynak etiketlerden hiçbiri eşleşmediyse geriye dönük uyumluluk sağlamak için kullanılır.
</p>
<p><strong>Not:</strong> picture elementi, IE12 ve önceki sürümlerde veya Safari 9.0 ve önceki sürümlerde desteklenmez.</p>
</body>
</html>
