{"id":35913,"date":"2025-12-05T13:01:16","date_gmt":"2025-12-05T10:01:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-linkler-gorseller-medya-ve-niteliklerin-gucu\/"},"modified":"2025-12-05T13:01:16","modified_gmt":"2025-12-05T10:01:16","slug":"html-linkler-gorseller-medya-ve-niteliklerin-gucu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-linkler-gorseller-medya-ve-niteliklerin-gucu\/","title":{"rendered":"HTML: Linkler, G\u00f6rseller, Medya ve Niteliklerin G\u00fcc\u00fc"},"content":{"rendered":"

<\/p>\n

HTML ba\u011flant\u0131lar\u0131, g\u00f6rselleri ve medyay\u0131 etkili kullanmak, web sitenizin deneyimini ve eri\u015filebilirli\u011fini zirveye ta\u015f\u0131r. Niteliklerle modern web’i ke\u015ffedin.<\/p>\n

G\u00fcn\u00fcm\u00fcz dijital \u00e7a\u011f\u0131nda internet, hayat\u0131m\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. Sabah uyand\u0131\u011f\u0131m\u0131zda sosyal medyay\u0131 kontrol etmekten, ak\u015fam haberleri okumaya, bankac\u0131l\u0131k i\u015flemlerimizden online al\u0131\u015fveri\u015fe kadar her alanda web siteleriyle etkile\u015fim halindeyiz. Peki, bu devasa bilgi a\u011f\u0131n\u0131 birbirine ba\u011flayan temel unsurlar\u0131n ne oldu\u011funu hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc? Cevap \u00e7ok basit: HTML ba\u011flant\u0131lar\u0131, g\u00f6rseller ve medya. E\u011fer web sitelerindeki linkler \u00e7al\u0131\u015fmasayd\u0131, g\u00f6rseller y\u00fcklenmeseydi veya videolar oynat\u0131lamasayd\u0131, internet bug\u00fcnk\u00fc dinamik ve zengin deneyimden \u00e7ok uzak, statik ve s\u0131k\u0131c\u0131 bir yer olurdu. Bu ba\u011flamda, HTML’in temel yap\u0131 ta\u015flar\u0131ndan olan bu elementler ve onlara anlam katan nitelikler (attributes), web’in ‘ba\u011flant\u0131 kurma’ misyonunun en kritik akt\u00f6rleridir.<\/p>\n

Bir web sayfas\u0131n\u0131 tasarlarken veya geli\u015ftirirken, sadece metinle bilgi aktar\u0131m\u0131 yapmak yeterli de\u011fildir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek, i\u00e7eri\u011fi daha anla\u015f\u0131l\u0131r k\u0131lmak ve onlara interaktif bir deneyim sunmak i\u00e7in g\u00f6rseller, videolar ve ses dosyalar\u0131 gibi medya \u00f6\u011felerini kullanmak zorunluluktur. Ayr\u0131ca, web \u00fczerindeki bilgiyi ke\u015ffetmelerini sa\u011flamak, ilgili sayfalara y\u00f6nlendirmek ve i\u00e7erik derinli\u011fi olu\u015fturmak i\u00e7in ba\u011flant\u0131lar hayati rol oynar. Bu makalede, HTML’in bu g\u00fc\u00e7l\u00fc yeteneklerini nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131, her bir elementin ne i\u015fe yarad\u0131\u011f\u0131n\u0131 ve \u00f6zellikle de onlara s\u00fcper g\u00fc\u00e7 katan niteliklerin web geli\u015ftirme s\u00fcrecindeki \u00f6nemini derinlemesine inceleyece\u011fiz. Kademeli olarak ilerleyerek, hem temel kavramlar\u0131 \u00f6\u011frenecek hem de ileri d\u00fczey ipu\u00e7lar\u0131yla projelerinizi bir \u00fcst seviyeye ta\u015f\u0131yacaks\u0131n\u0131z. Haz\u0131rsan\u0131z, web’in ba\u011flay\u0131c\u0131 g\u00fcc\u00fcn\u00fc ke\u015ffetmeye ba\u015flayal\u0131m!<\/p>\n

HTML Temelleri: Web’i Ba\u011flayan Etiketler Nelerdir?<\/h2>\n

Web sayfalar\u0131n\u0131n iskeletini olu\u015fturan HTML, taray\u0131c\u0131lara i\u00e7eri\u011fin ne oldu\u011funu ve nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini s\u00f6yler. Bu iskeletin en temel ve i\u015flevsel par\u00e7alar\u0131ndan baz\u0131lar\u0131, \u015f\u00fcphesiz ki ba\u011flant\u0131lar (linkler), g\u00f6rseller ve medya elementleridir. Bu elementler, statik metin belgelerini dinamik ve etkile\u015fimli deneyimlere d\u00f6n\u00fc\u015ft\u00fcrerek, web’i bug\u00fcnk\u00fc zengin yap\u0131s\u0131na kavu\u015fturmu\u015ftur. \u015eimdi bu temel elementleri ve onlar\u0131n \u00e7al\u0131\u015fma prensiplerini yak\u0131ndan inceleyelim.<\/p>\n

K\u00f6pr\u00fcler Kurmak: <\/code> Etiketi ve href<\/code> Niteli\u011fi<\/h3>\n

\u0130nterneti “world wide web” yani “d\u00fcnya \u00e7ap\u0131nda a\u011f” yapan \u015fey, farkl\u0131 sayfalar ve kaynaklar aras\u0131nda kurulabilen ba\u011flant\u0131lard\u0131r. HTML’deki <\/code> (anchor) etiketi tam da bu i\u015flevi g\u00f6r\u00fcr. Bir metin par\u00e7as\u0131n\u0131 veya ba\u015fka bir HTML elementini (\u00f6rne\u011fin bir g\u00f6rseli) t\u0131klanabilir bir ba\u011flant\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmemizi sa\u011flar. En temel niteli\u011fi olan href<\/code> (hypertext reference), ba\u011flant\u0131n\u0131n hedefini belirtir. Bu hedef, ba\u015fka bir web sayfas\u0131, ayn\u0131 sayfa i\u00e7indeki bir b\u00f6l\u00fcm, bir dosya indirme linki veya hatta bir e-posta adresi olabilir.<\/p>\n

Web Sitemizi Ziyaret Edin<\/a>\nHakk\u0131m\u0131zda Sayfas\u0131<\/a>\nSayfa \u0130\u00e7i Bir B\u00f6l\u00fcme Git<\/a>\nE-posta G\u00f6nder<\/a>\nRaporu \u0130ndir<\/a>\n<\/pre>\n
<\/code><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, href<\/code> niteli\u011fi olduk\u00e7a esnektir ve ba\u011flant\u0131lar arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131lar\u0131 farkl\u0131 i\u00e7eriklere sorunsuz bir \u015fekilde y\u00f6nlendirmemizi sa\u011flar. Bu, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik bir fakt\u00f6rd\u00fcr, zira iyi d\u00fczenlenmi\u015f ba\u011flant\u0131lar, kullan\u0131c\u0131lar\u0131n web sitenizde kolayca gezinmesine olanak tan\u0131r.<\/p>\n
\n        Uzman \u0130pucu: \u0130\u00e7 ba\u011flant\u0131lar (ayn\u0131 sayfa i\u00e7i) i\u00e7in href=\"#id\"<\/code> kullanmak, uzun sayfalarda kullan\u0131c\u0131 deneyimini art\u0131rarak belirli b\u00f6l\u00fcmlere h\u0131zl\u0131 eri\u015fim sa\u011flar. Men\u00fclerde veya i\u00e7indekiler b\u00f6l\u00fcmlerinde s\u0131kl\u0131kla tercih edilir.\n    <\/div>\n
G\u00f6rsel Hikayeler Anlatmak: <\/code> Etiketi ve \u00d6zellikleri<\/h3>\n
Bin kelimeye bedel bir g\u00f6rselin g\u00fcc\u00fc, web tasar\u0131m\u0131nda tart\u0131\u015f\u0131lamaz bir ger\u00e7ektir. <\/code> etiketi, web sayfalar\u0131na g\u00f6rsel eklemenin temel yoludur. Bu etiket, bir kapan\u0131\u015f etiketi gerektirmeyen (void element) tek ba\u015f\u0131na bir etikettir. G\u00f6rselin kayna\u011f\u0131n\u0131 belirtmek i\u00e7in src<\/code> (source) niteli\u011fi kullan\u0131l\u0131r. Ancak, sadece src<\/code> kullanmak yeterli de\u011fildir; alt<\/code> (alternative text) niteli\u011fi de g\u00f6rselin i\u00e7eri\u011fini metin olarak tan\u0131mlayarak eri\u015filebilirlik ve SEO i\u00e7in hayati bir rol oynar. width<\/code> ve height<\/code> nitelikleri ise g\u00f6rselin boyutlar\u0131n\u0131 belirterek taray\u0131c\u0131n\u0131n yerle\u015fimini optimize etmesine yard\u0131mc\u0131 olur.<\/p>\n
\"\u015eirket\n\"Yeni\n<\/pre>\n
<\/code><\/p>\n
G\u00f6rseller, bir web sitesinin esteti\u011fini ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkiler. Do\u011fru g\u00f6rseller, mesaj\u0131n\u0131z\u0131 g\u00fc\u00e7lendirir, duygusal bir ba\u011f kurar ve kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011finizi daha uzun s\u00fcre t\u00fcketmesini sa\u011flar. G\u00f6rselin alt<\/code> metnini bo\u015f b\u0131rakmak veya anlams\u0131z ifadeler kullanmak, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n deneyimini olumsuz etkiler ve arama motorlar\u0131n\u0131n g\u00f6rseli anlamas\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
Hareket ve Ses Katmak: 
Niteliklerin Sihri: HTML Elementlerine Anlam ve \u0130\u015flevsellik Katmak<\/h2>\n
HTML elementleri, bir web sayfas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131d\u0131r. Ancak as\u0131l g\u00fc\u00e7leri, onlara eklenen 'nitelikler' (attributes) arac\u0131l\u0131\u011f\u0131yla ortaya \u00e7\u0131kar. Nitelikler, elementlere ek bilgi ve davran\u0131\u015f kazand\u0131r\u0131r; adeta birer sihirli de\u011fnek gibi, elementlerin sadece g\u00f6r\u00fcn\u00fc\u015f\u00fcn\u00fc de\u011fil, i\u015flevselli\u011fini ve eri\u015filebilirli\u011fini de d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. <\/code> etiketindeki href<\/code>, <\/code> etiketindeki src<\/code> veya 
Her Elementin Bir Hikayesi Var: En S\u0131k Kullan\u0131lan Nitelikler<\/h3>\n
HTML'de y\u00fczlerce farkl\u0131 nitelik bulunsa da, baz\u0131lar\u0131 neredeyse her projede kar\u015f\u0131m\u0131za \u00e7\u0131kar ve temel bir anlay\u0131\u015f gerektirir. \u00d6rne\u011fin, id<\/code> niteli\u011fi, bir elementi sayfada benzersiz bir \u015fekilde tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Bu, CSS ile belirli bir stile uygulama veya JavaScript ile o elemente eri\u015fim sa\u011flamak i\u00e7in vazge\u00e7ilmezdir. class<\/code> niteli\u011fi ise birden fazla elemente ayn\u0131 stili veya davran\u0131\u015f\u0131 uygulamak i\u00e7in kullan\u0131l\u0131r. Bu iki nitelik, web geli\u015ftiricinin en g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131ndan ikisidir.<\/p>\n
\n    
Bu bir \u00f6rnek paragraf\u0131d\u0131r.<\/p>\n    
Bu da \u00f6zellikli bir paragraf.<\/p>\n<\/div>\n<\/pre>\n
<\/code><\/p>\n
Di\u011fer yayg\u0131n nitelikler aras\u0131nda, style<\/code> niteli\u011fiyle do\u011frudan HTML i\u00e7inde CSS kurallar\u0131 tan\u0131mlayabiliriz (ancak bu pratik genellikle harici CSS dosyalar\u0131 tercih edildi\u011fi i\u00e7in \u00f6nerilmez). lang<\/code> niteli\u011fi, belgenin veya belirli bir b\u00f6l\u00fcm\u00fcn dilini belirtir, bu da arama motorlar\u0131 ve \u00e7eviri ara\u00e7lar\u0131 i\u00e7in \u00f6nemlidir. Her bir nitelik, HTML elementine belirli bir \"hikaye\" veya \"talimat\" ekler, b\u00f6ylece taray\u0131c\u0131n\u0131n ve di\u011fer kullan\u0131c\u0131 arac\u0131lar\u0131n\u0131n i\u00e7eri\u011fi daha do\u011fru bir \u015fekilde yorumlamas\u0131n\u0131 sa\u011flar.<\/p>\n
Eri\u015filebilirlik ve SEO \u0130\u00e7in Vazge\u00e7ilmez: alt<\/code> ve title<\/code> Nitelikleri Neden Kritik?<\/h3>\n
alt<\/code> niteli\u011fi, <\/code> etiketi i\u00e7in \u00f6zel bir \u00f6neme sahiptir. Bu nitelik, g\u00f6rselin alternatif metin a\u00e7\u0131klamas\u0131n\u0131 bar\u0131nd\u0131r\u0131r ve iki temel amaca hizmet eder: birincisi, g\u00f6rselin y\u00fcklenememesi durumunda kullan\u0131c\u0131ya g\u00f6rselin i\u00e7eri\u011fi hakk\u0131nda bilgi verir; ikincisi ise g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in ekran okuyucular\u0131n g\u00f6rseli anlamas\u0131n\u0131 sa\u011flar. Ayn\u0131 zamanda, arama motorlar\u0131 g\u00f6rselleri do\u011frudan \"g\u00f6remedi\u011fi\" i\u00e7in alt<\/code> metnini kullanarak g\u00f6rselin i\u00e7eri\u011fini anlar ve bu da SEO performans\u0131na do\u011frudan katk\u0131da bulunur. K\u0131sacas\u0131, alt<\/code> niteli\u011fi eksik veya hatal\u0131 olan g\u00f6rseller, web'in hem eri\u015filebilirlik hem de ke\u015ffedilebilirlik a\u00e7\u0131s\u0131ndan zay\u0131f kalmas\u0131na neden olur.<\/p>\n
\"Beyaz\n\"Yaz\n<\/pre>\n
<\/code><\/p>\n
title<\/code> niteli\u011fi ise, \u00e7o\u011fu HTML elementine eklenebilir ve fare imleci elementin \u00fczerine geldi\u011finde bir ipucu metni olarak g\u00f6sterilir. Genellikle ek veya a\u00e7\u0131klay\u0131c\u0131 bilgiler sa\u011flamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir ba\u011flant\u0131n\u0131n title<\/code> niteli\u011fi, ba\u011flant\u0131n\u0131n nereye gitti\u011fi hakk\u0131nda daha fazla ba\u011flam sunabilir. Ancak, eri\u015filebilirlik a\u00e7\u0131s\u0131ndan title<\/code> niteli\u011finin alt<\/code> kadar kritik olmad\u0131\u011f\u0131n\u0131 belirtmek gerekir, zira mobil cihazlarda veya klavye navigasyonu kullanan ki\u015filer i\u00e7in title<\/code>'a eri\u015fmek zordur. Bu nedenle, kritik bilgileri alt<\/code> gibi daha eri\u015filebilir niteliklerde veya do\u011frudan sayfa i\u00e7eri\u011finde sunmak her zaman daha iyi bir yakla\u015f\u0131md\u0131r.<\/p>\n
Hedefleme ve \u0130li\u015fkilendirme: target<\/code> ve rel<\/code> Nitelikleri Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n
Ba\u011flant\u0131lar (<\/code> etiketi) i\u00e7in kullan\u0131lan target<\/code> niteli\u011fi, ba\u011flant\u0131n\u0131n yeni bir sekmede mi, ayn\u0131 sekmede mi yoksa belirli bir \u00e7er\u00e7evede mi a\u00e7\u0131laca\u011f\u0131n\u0131 kontrol eder. En yayg\u0131n kullan\u0131lan de\u011feri _blank<\/code>'tir ve bu, ba\u011flant\u0131n\u0131n yeni bir taray\u0131c\u0131 sekmesinde a\u00e7\u0131lmas\u0131n\u0131 sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n mevcut sayfan\u0131zdan ayr\u0131lmadan harici kaynaklara eri\u015fmelerini sa\u011flamak i\u00e7in \u00f6zellikle kullan\u0131\u015fl\u0131d\u0131r, b\u00f6ylece sitenizdeki gezinme ak\u0131\u015f\u0131 bozulmaz.<\/p>\n
Harici Kayna\u011f\u0131 Ziyaret Et<\/a>\nPDF Dok\u00fcman\u0131 A\u00e7<\/a>\n<\/pre>\n
<\/code><\/p>\n
rel<\/code> (relationship) niteli\u011fi ise, mevcut belge ile hedeflenen ba\u011flant\u0131 aras\u0131ndaki ili\u015fkiyi belirtir. SEO ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan \u00f6nemli bir\u00e7ok de\u011feri vard\u0131r. \u00d6rne\u011fin, nofollow<\/code> de\u011feri, arama motorlar\u0131na bu ba\u011flant\u0131y\u0131 takip etmemelerini ve hedef sayfaya \"s\u0131ra de\u011feri\" aktarmamalar\u0131n\u0131 s\u00f6yler. Bu genellikle kullan\u0131c\u0131 taraf\u0131ndan olu\u015fturulan i\u00e7eriklerdeki (yorumlar, forum g\u00f6nderileri) veya sponsorlu ba\u011flant\u0131larda kullan\u0131l\u0131r. noopener<\/code> ve noreferrer<\/code> gibi de\u011ferler ise yeni sekmede a\u00e7\u0131lan ba\u011flant\u0131lardan kaynaklanan g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 \u00f6nlemek i\u00e7in kullan\u0131l\u0131r. \u00d6zellikle target=\"_blank\"<\/code> ile birlikte kullan\u0131ld\u0131\u011f\u0131nda bu ikili, g\u00fcvenlik a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu nitelikler, web sitenizin kullan\u0131c\u0131lar\u0131 i\u00e7in hem g\u00fcvenli hem de optimize edilmi\u015f bir deneyim sunman\u0131za yard\u0131mc\u0131 olurken, arama motorlar\u0131na da sitenizin ba\u011flant\u0131 profili hakk\u0131nda de\u011ferli ipu\u00e7lar\u0131 verir.<\/p>\n
Pratik Uygulama: Etkile\u015fimli Bir \u00dcr\u00fcn Sayfas\u0131 Nas\u0131l Olu\u015fturulur?<\/h2>\n
\u015eimdiye kadar \u00f6\u011frendi\u011fimiz teorik bilgileri prati\u011fe d\u00f6kelim ve modern bir web sitesi i\u00e7in etkile\u015fimli bir \u00fcr\u00fcn sayfas\u0131 olu\u015ftural\u0131m. Bu b\u00f6l\u00fcmde, HTML ba\u011flant\u0131lar\u0131n\u0131, g\u00f6rselleri ve medyay\u0131 nitelikleriyle birlikte nas\u0131l efektif bir \u015fekilde kullanaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6rece\u011fiz. Bir e-ticaret sitesindeki bir \u00fcr\u00fcn\u00fcn tan\u0131t\u0131m\u0131n\u0131 ele alarak, bu elementlerin bir araya geldi\u011finde nas\u0131l zengin bir kullan\u0131c\u0131 deneyimi sundu\u011funu g\u00f6zlemleyece\u011fiz. Ama\u00e7, sadece i\u00e7eri\u011fi g\u00f6stermek de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131y\u0131 bilgilendiren, etkileyen ve sat\u0131n almaya te\u015fvik eden bir sayfa olu\u015fturmakt\u0131r.<\/p>\n
Ad\u0131m 1: Ba\u011flant\u0131larla Gezinme Olu\u015fturma<\/h3>\n
\u00dcr\u00fcn sayfam\u0131z\u0131n ba\u015f\u0131nda, kullan\u0131c\u0131lar\u0131n sayfan\u0131n farkl\u0131 b\u00f6l\u00fcmlerine kolayca atlamas\u0131n\u0131 sa\u011flayacak bir gezinme men\u00fcs\u00fc olu\u015ftural\u0131m. Bu, uzun sayfalarda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n