HTML; Resim Üzerine Yazı Yazmak HTML Dersleri [4]

Bu HTML dersimizin konusu resim üzerine yazı yazmak. Şu ana kadar 3 ders boyunca öğrendiklerimizi bi özetleyelim. Ondan sonra img etiketi ile resim göstermeyi göreceğiz. Ardında ise o resim taban resmi olarak gösterilip üzerine yazı yazdırılacak.

Önceki 3 Dersin Özeti

HTML etiketleri ile işaretleme yaparız.

Şu üç etiket ile tablolar oluşturulur: TABLE, TR, TD

Tablodaki satır sayı kadar TR etiketi kullanırız. Satırdaki hücre sayısı kadar da TD etiketi kullanırız.

Etiketler yanyana olabileceği gibi iç içe de olabilir. İçiçe ve yanyanalığın çeşitli kombinasyonları ile html sayfaları oluşturulur.

Bunu TABLE etiketi üzerinden söyleyecek olursak; TR etiketleri yan yana ve TABLE etiketi içinde yer alırlar. TD etiketi TR'nin içinde olur.

Etiketin özelliklerine İngilizce attribute denir ve bir etiket birden fazla özellik alabilir.

Örneğin TD etiketi şu özellikleri alabilir:
bgcolor, height, width, align, background vs..

Herhangi bir özellik birden çok html etiketi tarafından da kullanılabilir. Tek etikete ait özellik neredeyse yok gibidir.

TR kendi bgcolor değerini barındırdığı TD lere yansıtır. TD kendisi bgcolor özelliği almış ise dışındaki etiketin özelliğinden etkilenmez.

bgcolor özelliği hem tablo etiketi (TABLE) hem satır etiketi (TR) hem de hücre etiketi (TD) tarafından kullanılabilen bir özelliktir.

width, height, align, valign gördüğümüz diğer etiket özellikleridir. Ve etiketlerin alabileceği özellikler bunlarla sınırlı değildir.

Üç ana renk ile birçok renk elde ederiz. FF0000 sayısı kırmızı rengi ifade eder. 00FF00 ise yeşil rengi ifade eder. 0000FF renk kodu ise mavi rengi ifade eder. Bütün renklerin varlığı FFFFFF ile ifade edilir. Renksizlik ise 000000 ile gösterilir.

Renklerin birbiri ile uyumlu olmalarının bir matematikselliği vardır. Palet çalışması yapanların bulduğu renk kombinasyonlarını yayınladığı siteler vardır. Bunlar palet siteleridir.

İnternette color palette diye aratabilirsiniz. Veya şu iki siteyi kullanabilirsiniz:

colorswall.com
colorhunt.co

Bu kadar tekrar yeter hadi şimdi img etiketini ve src yi örnekleyelim.

HTML img Etiketi

HTML IMG Örnek 1:

Bu yukarıdaki görüntü aşağıdaki örnek 1 html koduna aittir. Buradaki mavi ile belirtilen ölçüleri ise ben paint.exe de ekledim. Bu ekleme ile resmin (img) sadece dosya (src) özelliğini vermemize rağmen hangi boyutta görüntülendiğine dikkat çekmek için yaptım.

SRC deki resim dosyası örnek kod (*.html) ile aynı yerde olmalıdır. Eğer cicek3.jpg isimli bir dosya yoksa bu durumda html sayfası bozuk gözükür. Resim bulunamadığında bir yazı gösterilmesini istersek alt özelliğini kullanırız.

HTML IMG Örnek 2:

Örnek 2 de html-img etiketine height özelliği verdik. Özellik yada parametre dediğimiz attribute-height verdiğimizde width özelliği otomatik olarak 213 piksel den küçük oldu.

Orjinal 320x213 boyutlarında olan cicek3.jpg resmi örnek-1 de hangi boyutta görüntülendi?

height veya width belirtmediğimiz için kendi orjinal boyutlarında gösterildi.

Sadece height (yükseklik) yada width (genişlik) verdiğimizde vermediğimiz boyut oransal olarak tespit edilip gösterilir.

HTML IMG örnek kod 3:

Buradaki kodda img özelliğinden bu sefer de width (genişlik) değerini 100 piksel verdik; bununla yükseklik otomatik (oran korunarak) tarayıcı tarafından tespit edildi.

Bir şeye daha dikkat çekmek istedim. "Selam!" kelimesi ile resim aynı satırda olmasına rağmen "Hevesli öğrencim." yeni bir satırdan başlatıldı.

Yeni satır olmamasına inline (satır içi) denir. Buna ileride değineceğim. Biz bu dersin konusu olan "resim üzerine yazı yazmak" olayına geçebilmek için 3. örnek ile öncesine ve sonrası yazı yazdırdık. Siz artık hazırsanız resim üzerine yazı yazmaya geçebiliriz.

4. Örnek ile Resim üzerine yazı yazalım.

Hacker Olmak İsteyene Resim

"Nasıl hacker olunur?" Şeklinde ders serisi olmadığı için Yazılım derslerinde ufak ufak bu konuya değiniyorum. Resim format türleri vardır. Resimlerdeki META data alanına resim görüntüsünü bozmadan exploit kodu yazılabilir. Masum bir html img etiketi ile virüslü resim yüklenebilir.

Exploit nedir? sisteme izinsiz giriş yapmayı, yetkili bir kullanıcı oluşturmayı, sistemi devre dışı bırakmayı amaçlayan kodlardır.

Saumil Shah isimli kişinin bunun nasıl yapıldığını anlatan videoları vardır. Stegosploit denilen bu hacker saldırısının detaylı anlatımını internetten bulabilirsiniz. Bunun son aşaması da img etiketi ile resmin bir web sayfasında yayınlanmasıdır.

(DT=1973 - ÖT=) İsmail PALA

HTML Ana Sayfa Sponsorlar

Bu Sayfanın Detayı:
Konusu: Web Yazılım için HTML Dersi.
Hazırlayan: İsmail PALA (1973-)
Yayın Tarihi: 2022-11-07 04:14:52
Sayfa Tekil Ziyaretçi : 3868