HTML Dersleri -8 / Resim Etiketi

Bu ders Tayfun Erbilen tarafından hazırlanmıştır.
HTML dersleri serimizin sekizinci bölümünde, resim etiketi olan img etiketini ayrıntılı olarak inceleyeceğiz. Bu videoda, web sayfalarınıza nasıl resim ekleyeceğinizi, resim formatlarını, boyutlarını ve özelliklerini nasıl yöneteceğinizi öğreneceksiniz. Ayrıca, resimlerinizi semantik olarak etiketlemek ve arama motoru optimizasyonu (SEO) için doğru uygulamaları kullanmak hakkında da bilgi edineceksiniz. Bu bölüm, web sayfalarınızı görsel açıdan zenginleştirmek ve kullanıcı deneyimini artırmak için temel HTML resim etiketinin kullanımını anlamanıza yardımcı olacaktır.
Yeni çıkardığım PHP Eğitim Setime gözatın!
udemy.com/php-...
-- Sosyal Hesaplarım;
/ erbilennet
/ prototurkcom
/ tayfunerbilen
/ prototurkcom
/ tayfunerbilen

[@PROTOTURKCOM]

HTML derslerini yazılı olarak öğrenmek isterseniz, prototurk'e bakmayı unutmayın! prototurk.com/html

[@bdk.nurullah]

Hoca link bozuk

[@togrulhsimov7700]

Abi, resim etiketini yazmadan önce yan bir işlem yapmışsın, resimin ismini dahil etmişsin, onun nasıl olduğunu söylermisin lüten

[@NEMETTOSCE]

zaman geçse de samimiyet kalıcılık sağlayabiliyor. emeğin için minnettarım.

[@senem1708]

5. gün rüyamda uykumda uyanıkken heryerde tayfun erbilen ismini görüyorum:)))

[@PROTOTURKCOM]

bu doğru yolda olduğunun göstergesi :D

[@aliihsan8209]

şimdiye kadar en iyi anlatıma sahip bir kaç kanaldan birisin dostum

[@bahlulhasanli]

Ellerine sağlıq. Çok güzel ders hocam. Css içinde böyle bir ders çeksen tadından yenmez.

[@uguryumrutas2272]

Dipnot : Alt etiketi aslında görme engelliler içindir tarayıcılar metinleri okur ama görseli okuyamaz bu sebeple alt etiketi veririz ve tarayıcı görselin neyle ilgili olduğunu kullanıcıya okur ayrıca seo açısından sitenize değer katarsınız unutmayın görseli açıklayan bir metin olmalıdır...

[@huseynhuseynov1525]

ve alt etiketi olmadan code w3cde error verir

[@mericolcay5090]

Tam banane dediğim anda ''''Banane diyebilirler'' dedin çok güldüm :D

[@hasansamet3330]

emeğine sağlık ustam güzel anlatım yapıyosun baştan başladım zaten iglimde vardı. sayende güzel işlere başlıcaz

[@Djjdukfhnjh]

1abone daha kazandın abi anlatımın gerçekten güzel

[@hidayetcanozcan9403]

çook güzel akıcı anlatıyorsun hocam emeğine sağlık..

[@Byz307]

*0:48* hocam yapmayın böyle şeyler gece izliyorum 😀😀

[@AzeAtilla]

abi harbi cok tsk ederim ya css seriside gele bilirmi he bide java schrip

[@ozan52500]

daha yeni yazılıma başlama kararı aldım. 3 4 farklı kanaldan html derslerine başladım fakat hiçbiri beni tatmin etmedi. anlatımları ve dersleri sıralamaları hiç düzgün değildi. ondan sonra bu kanala baktım anlatımınız hem çok iyi öğretmen olsanız öğrencileriniz sınavlardan fuller herhalde. ve dersleri sıralama kaliteniz de çok güzel hiç karışık olmuyor kategori kategori öğreniyoruz. size ne kadar teşekkür etsem azdır emekleriize sağlık :).

[@ozan52500]

bir de önceki derste demek ki bunun ibneliği bize ve bu bölümdeki Allah Allah az önce burda oluyodu ya anlarınıza çok güldüm :D

[@kaan6344]

@ozan52500 ben de seninle ayni yoldayim tanismak isterim birbirimize yardimci olmak icin

[@MsVenom2]

teşekkürlerr

[@Beyazincisi]

Benim 1x ten 2x pixele geçmiyor sayfayı güncelleyince her seferinde 1x kalıyor ne yapmalıyım?

[@PROTOTURKCOM]

Desteklemiyor olabilir mi ekranın?

[@emrekahraman6696]

Hocam alt arama motoru örümcekleri için öenmli mi girmemiz gerekiyor mu illaki?

[@alperenberber7311]

linkli resim koyuyom sayfayı yenilemeye basınca resim gözüküyor sonra gidiyor kafayı yedm neden böyle oluyor

[@ismailsari3558]

Abi ben hem videoları izleyip hem de sitenden konulara bakıyorum da sitede daha çok ayrıntı var bunlar html5'de olmadığı içinmi burada göstermedin cevap verirsen sevinirim abi mesela map etiketi

[@enestiryaki4006]

hocam bu öğrendiğim kodları nasıl ezberliyebilirim ?

[@mashewn]

abi imagei full ekranı kaplaması icin napmam lazım

[@HKURT1905]

srcset "if else" mantığını içeriyor gibi galiba?

[@yusuf-sr8hr]

1:25 ne güldüm ya :DD

[@omergunay5076]

içindeki alt="" niteliğinin bir diğer özelliği de görme engelli kişiler resmi göremediği için resimde ne olduğunu alt etiketinden anlarlar. Ek bilgi vermek istedim.

[@PROTOTURKCOM]

sesli olarak belirtmediğin sürece görme engelli birisinin alt niteliğinde yazılanı görmesi de mümkün olmayacaktır.

[@omergunay5076]

@@PROTOTURKCOM görme engellilere özel yazılmış programlar var. O programlar alt etiketinde yazan yazıyı kişiye okuduğu için demiştim :)

[@PROTOTURKCOM]

Ömer Günay evet şimdi oldu :)

[@hassanharambe8352]

@@PROTOTURKCOM ADJJAFSDLŞMFDKLSADKLKLMDSAMKLSDAFMKADSFADS

[@salihefee]

ALDUXJDNFKRLDKXMCMDKDLFKHDJDJJDNDC

[@mervepolat4740]

Srcset için farklı çözünürlükteki fotoğrafları nereden buluyoruz?

[@darkfear7533]

resimi ilk yüklicez mi ben yapınca olmadı çünkü

[@joachimmura]

benim en cok merak ettigim mesela img etiketi ile resim yukledik ben o resmi sayfanin tam olarak neresine koyacagimi nasil ayarlicam mesela ben biraz daha solda ve bir tik yukarda olsun ve uzerinde yazi olarak merhaba yazsin istiyosam bunu nasil yaparim acaba

[@PROTOTURKCOM]

onu css ile yapacaksin html'de sadece gorseli koyabilirsin

[@dr.ibrahim6379]

ağzına sağlık

[@muhammetseyhan901]

Hocam küçük boyutlu bi resmi sayfanın en altına koymak istiyorum ne yapmam lazım ?

[@phoquez]

resmin yerini nasıl değiştirecez hocam

[@AramAyoub]

emegine saglik keski srcset etiketi biraz daha cok detaili anlatsaydiniz

[@PROTOTURKCOM]

ek olarak sadece sizes niteliği var bununla birlikte kullanılan oda şu aşamada çok önemli değil, yani srcset bundan ibaret :)

[@ismetkopuz2998]

2:54 arkadaşlar trojan,keylogger gibi taktikleri bundan yemeyiniz dikkat ediniz :)

[@yusufcelaltatar3036]

peki adresini yazdığımız gif in bizim bilgisayarımızda olması mı gerekio eğer öyleyse resim dosyasının adresi nerede

[@PROTOTURKCOM]

html dosyan ile aynı dizinde olması ya da alt dizinlerinde olması gerekiyor eğer local olarak dosyanı çağıracaksan. Onun dışında uzaktaki bir gif'ide url'den oynatabilirsin

[@onursalihkececi1806]

Bende height etiketi çıkmıyo neden çıkmıyo.

[@of-gamers2956]

hocam resmi nasıl ortalayacağız ?

[@PROTOTURKCOM]

html'de ortalama etiketi olan center etiketi artık kullanılmıyor, onun yerine css ile ortalama yapmanız gerekiyor.

[@muptezeltv3697]

Tayfun abi etiketleri ezberlemek veya aklımda tutabilmek için bir önerin veya bir düşüncen varmı

[@xlulxd]

kanka htmldeki yazı biçimlendirme etiketleri css öğrenince lazım olmayacak.Gerçi 1 ay geçmiş cssi öğrendiiysen anlamışsındır

[@hasansamet3330]

hocam bir sorum daha olucak madem aktifsin ben şimdi bu ilk dersten herşeyi hemen hemen çaktım. ama mesela bir site yapıcam bunları site depolamasına nasıl atıcam az çok bilgim var ftp ile atabilirmiyiz atsak nasıl olucak?

[@PROTOTURKCOM]

site depolamasından kastın nedir? ileride yazılım derslerine başladığında her şey oturacaktır kafana bu konularla ilgili

[@hasansamet3330]

@@PROTOTURKCOM onları da teker teker izliyeceğim ama mesela önceden benimde bir websitem vardı wordpress tabanlı ordan herşeyi halledebiliyordum bi kaç ftp işim oluyodu ama filezilla ile yapıyodum. mesela şimdi bi website hazırlamak için bu kodları öğreniyoruz yada başka bişey için. bunu website ye rahat bi şekilde yükleyebilicek miyiz? merak ettiğim şey buydu.

[@alielvinhuseynzade8347]

@@hasansamet3330 evet doğru yerlərə kodu yazsan sorun olmaz

[@aysegul-vg4xh]

4:00 srcseti anlamadım ekranın durumu neyse ona göre işlem yapar

[@PROTOTURKCOM]

evet ekran sorgusu yapıyor, retina 2k çözünürlük ise ona göre 2x 4k ise ona göre 4x vs görsel yüklemeni sağlıyor

[@aysegul-vg4xh]

@@PROTOTURKCOM sağ ol abi ben de kendimce not alıyordum videolara :) Yalnız şeyi anlatmamışsın sanırım visual studio ortamında kurulan bir dosyanın diğer kullanıcıların da erişimine sürülüp web ortamına aktarılmasını onu nasıl yapıcaz zor mu arkadaşlarıma falan atıcam da

[@emirceran2895]

Css dersleri gelcek mi

[@onurbamtv7296]

5:06 HOCAM menemen mi

[@sourisbbye]

abi rahatsız etmiuorsam bir soru soracağım benim şu an bilgisayarım yok o yüzden telefondan webcode uygulamasıyla alışmaya çalışıyorum senin yaptıklarının aynısını yapıyorum google den gif,png,jpeg resimler indirdim hepsinide denedim bi türlü resim çıkmıyor sitede acaba telefondan yaptığım için mi olmuyor? yardımcı olabilirsen çok memnun kalırım şimdiden teşekkür ederim.

[@PROTOTURKCOM]

muhtemelen öyledir, uzak sunucudaki resim url'lerini dene örneğin prototurk.com/public/img/prototurk.png şunu göstermeyi deneyebilirsin

[@sourisbbye]

@@PROTOTURKCOM eyv yanıtladığınız için teşekkür ederim

[@sharin4586]

@@sourisbbye Samet Quick Edit adlı mobil html css js dili destekleyen uygulamayı kulanabilirsin.

[@lewis6403]

abi ma downloadı ben gta indirme linki eklemem lazım nasıl yapıcam

[@degisen.beynim]

Hocam Visual Studio Code da çalışıyorum bende ama internet tarayıcısında refresh attığımda hiçbir değişiklilik olmuyor bende mecbur notepad ++ dan elimle yazıyorum hepsini kaydediyorum anca öyle değişiklikleri gözlemleyebiliyorum.Yardımcı olursan çok sevinirim.

[@emreatmaca3464]

Kodu yazdıktan sonra Ctrl+S yap

[@softwaredeveloper9970]

shift+f5 ile dene biraz geç oldu ama :D

[@HouNDAA_]

ayaarlardan her başka sayfaya geçtiğinde kaydet yaaptım ben tabi türkçesi bu oyled oluyor

[@-Kitty._.Routin-]

Abi ben beceremiyorum normal mi?

[@PROTOTURKCOM]

baslarda olur oyle, devam et azmini kaybetme

[@-Kitty._.Routin-]

@@PROTOTURKCOM tamam, teşekkür ederim

[@-Kitty._.Routin-]

​@@PROTOTURKCOMabi sayende yeni internet sitesi açtım fotoğraf fln ekledim çok teşekkür ederim

[@darkfear7533]

hocam resim i nasıl yüklicez yapamdaım ben

[@xlulxd]

resmi bilgisayarına indir ve html uzantısı olan dosyayla aynı klasörde tuttuğuna dikkat et

[@softwaredeveloper9970]

resme sağ tık-farklı kaydet-html dosyasının yanına ayarla

[@darkfear7533]

hocam resim nasıl yüklicez

[@clearshoulder6671]

evet nasılmış

[@revoller8387]

Yine ben :Dd Bahsettiğin srcset komutuyla görselleri 2x - 3x şeklinde ayarlamayı anladım ama mesela ben internetten rastgele beğendiğim bi görseli kaydediyorum ve boyutu 500x1200 oluyor (salladım sayıları), ben bu görselin 2x ve 3x halini nasıl bulabilirim ve srcset ile kullanabilirim ki

[@anatousis555]

resmi ara dersen google a eger bilindik bir resim ise her boyutunu bulabilirsin

[@mlyrics2244]

bende fotograf acmadi

[@PROTOTURKCOM]

yolu yanlış veriyorsundur :) şu makaleme bir gözat prototurk.com/html/goruntuler-resimler

[@polatalemdar8023]

izlenmeler yavaş yavaş düşüyor bir anlık hevesle başlayıp

[@erenulgen7577]

Başarıya giden yolculuk böyledir ama sonlra doğru 13.000 kadar kişini HTML öğrenmiş olması muhtemel ve hoş

[@musicalteen100]

Resmi kasıtlı mı seçtin insanlar html yi ögrenmesin diye .d

[@zatoma8384]

resmin isminimi yazıcaz src den sonra

[@zatoma8384]

resmin ismini RESİM1 yaptım oraya yazıyorum olmuyor

[@ege3288]

@Abdullah Aksoy ya kanka aynısını yaptım ama olmuyor zaten senin dediğin gibi yapmıştım yazını gördükten sonra bir daha denedim yine olmuyor resim yerine beyaz bir kare çıkıyor

[@ege3288]

@Abdullah Aksoy ve hatta yazdığım kodu w3c validation a kopyalayıp yapıştırınca "I got the following unexpected response when trying to retrieve" diyor çözemedim

[@rabiamammadzada34]

@@ege3288 resmin tam url yolunu bulmaniz gerekiyor ornegin C:\Users\Desktop esim.jpg

[@cssscript3902]

@@rabiamammadzada34 onu buldumda beyaz kare cikiyor resim yerine nasıl çözebilirim .cevap verirsen sevinirim

[@enesgok4998]

parti kur oy verelim kral

[@muratakbulut2245]

Ben android telefon üzerinden notepad ++ kullanıyorum. resmi ekledikten sonra acıyorum ama sitede yuklenmemis görünüyor yardımcı olur musunuz?

[@mustafabaltac8574]

Nasıl resim yüklüyorsun yardım edermisin

[@janbergcan4622]

Tayfun Erbilen sende KOVA burcu değilsen ben hiçbirşey bilmiyorum.

[@PROTOTURKCOM]

oğlak burcuyum, sen de hiçbir şey bilmiyormuşsun :D

[@bdk.nurullah]

Banane mk 😂😂😂

[@ottoskorzeny1708]

Hiç bi şey anlamadım

[@PROTOTURKCOM]

neyini anlamadın allah aşkına? resim göstermek için img etiketinde src niteliğine resim yolunu giriyorsun, bunun neyini anlamadın? alfabedeki en temel harf gibi bir şey bu allah aşkına neyini anlamadın?

[@_rebellious_666]

@@PROTOTURKCOM abi sen baya isyan etmişsin😂

[@AWJAHSHSHJ]

​@@_rebellious_666 haklı isyan 😂