Daha fazla dil != daha fazla HTML \u015fablonu<\/h2>\n\n\n\n
\n Bunu ne kadar vurgulasak azd\u0131r: T\u00fcm dil s\u00fcr\u00fcmleri i\u00e7in ayn\u0131 \u015fablonu yeniden kullan\u0131n ve \u015fablonunuzun HTML yap\u0131s\u0131n\u0131 her zaman basit tutmaya \u00e7al\u0131\u015f\u0131n.\n<\/p>\n\n\n\n
\n HTML kodunu t\u00fcm diller i\u00e7in ayn\u0131 tutman\u0131n bak\u0131m konusunda avantajlar\u0131 vard\u0131r. Hatalar\u0131 d\u00fczeltmek i\u00e7in her dilin HTML koduyla u\u011fra\u015fmak \u00f6l\u00e7eklenebilir bir y\u00f6ntem de\u011fildir; sayfa kodunuzu m\u00fcmk\u00fcn oldu\u011funca temiz tutun ve stil sorunlar\u0131n\u0131 CSS ile \u00e7\u00f6z\u00fcn. Temiz kodun sadece bir faydas\u0131ndan bahsetmek gerekirse: \u00e7o\u011fu \u00e7eviri arac\u0131, \u00e7evrilebilir i\u00e7erik dizelerini HTML belgesinden ayr\u0131\u015ft\u0131r\u0131r ve HTML iyi yap\u0131land\u0131r\u0131lm\u0131\u015f ve ge\u00e7erli oldu\u011funda bu i\u015f \u00e7ok daha kolayla\u015f\u0131r.\n<\/p>\n\n\n\n
Metin uzunlu\u011fu ne kadar olmal\u0131?<\/h2>\n\n\n\n
\n Tasar\u0131m\u0131n\u0131z metnin sabit boyutlu \u00f6\u011felerle uyumlu olmas\u0131na dayan\u0131yorsa, metni \u00e7evirmek her \u015feyi alt\u00fcst edebilir. \u00d6rne\u011fin, sol taraftaki navigasyon metniniz bir\u00e7ok dilde \u00e7ok daha uzun metin dizelerine d\u00f6n\u00fc\u015febilir; ayn\u0131 i\u00e7erik i\u00e7in \u0130ngilizce<\/a> ve Felemenk\u00e7e<\/a> navigasyon aras\u0131ndaki dize uzunlu\u011fu fark\u0131na bir g\u00f6z at\u0131n. Navigasyon ba\u015fl\u0131klar\u0131n\u0131n birden fazla sat\u0131ra ta\u015fabilece\u011fini g\u00f6z \u00f6n\u00fcnde bulundurarak sat\u0131r y\u00fcksekli\u011finizi buna g\u00f6re ayarlay\u0131n (bunu en ba\u015fta \u0130ngilizce navigasyon metninizi olu\u015ftururken de d\u00fc\u015f\u00fcnmekte fayda var).\n<\/p>\n\n\n\n \n De\u011fi\u015fken kelime uzunluklar\u0131, form etiketlerinde ve kontrollerinde \u00f6zel sorunlara yol a\u00e7ar. \u00d6rne\u011fin, form d\u00fczeniniz etiketleri solda, alanlar\u0131 sa\u011fda g\u00f6r\u00fcnt\u00fcl\u00fcyorsa, daha uzun metin dizeleri iki sat\u0131ra ta\u015fabilirken, daha k\u0131sa metin dizeleri form giri\u015f alanlar\u0131yla ili\u015fkisiz g\u00f6r\u00fcnebilir; her iki senaryo da tasar\u0131m\u0131 bozar ve formun okunabilirli\u011fini engeller. Ayr\u0131ca, sa\u011fdan sola (RTL) d\u00fczenler i\u00e7in ihtiya\u00e7 duyaca\u011f\u0131n\u0131z ekstra stilleri de d\u00fc\u015f\u00fcn\u00fcn (buna daha sonra de\u011finece\u011fiz). Bu nedenlerle, kolay okunabilirlik ve diller aras\u0131nda iyi bir \u015fekilde \u00e7evrilebilecek stiller i\u00e7in formlar\u0131, etiketler alanlar\u0131n \u00fczerinde olacak \u015fekilde tasarl\u0131yoruz.\n<\/p>\n\n\n\n \n Ayr\u0131ca sabit y\u00fckseklikli s\u00fctunlardan ka\u00e7\u0131n\u0131n; d\u00fczeninizi e\u015fle\u015fen y\u00fckseklikte kutu arka planlar\u0131yla d\u00fczene sokmaya \u00e7al\u0131\u015f\u0131yorsan\u0131z, metniniz \u00e7evrildi\u011finde metnin sadece \u0130ngilizce i\u00e7eri\u011finizi s\u0131\u011fd\u0131racak kadar y\u00fcksek olan alanlar\u0131 a\u015fmas\u0131 muhtemeldir. Tasar\u0131m\u0131n\u0131zda kullanmay\u0131 planlad\u0131\u011f\u0131n\u0131z UI \u00f6\u011felerinin daha fazla veya daha az metin oldu\u011funda \u00e7al\u0131\u015f\u0131p \u00e7al\u0131\u015fmayaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn; \u00f6rne\u011fin, yatay<\/a> ve dikey<\/a> sekmeler gibi.\n<\/p>\n\n\n\n \n \u00c7ift y\u00f6nl\u00fc (bidirectional) HTML i\u00e7in kaynak d\u00fczenleme sorunlu olabilir \u00e7\u00fcnk\u00fc bir\u00e7ok d\u00fczenleyici Unicode \u00e7ift y\u00f6nl\u00fc algoritmas\u0131n\u0131 destekleyecek \u015fekilde olu\u015fturulmam\u0131\u015ft\u0131r (sorunlar ve \u00e7\u00f6z\u00fcmler \u00fczerine daha fazla ara\u015ft\u0131rma<\/a>). K\u0131sacas\u0131, i\u015faretlemenizin g\u00f6r\u00fcnt\u00fclenme \u015fekli bozulabilir:\n<\/p>\n\n\n\n \n G\u00fcnl\u00fck kullan\u0131m\u0131m\u0131z, \u015fu d\u00fczenleyicilerin \u00e7ift y\u00f6nl\u00fc d\u00fczenleme i\u00e7in \u015fu anda makul \u00e7\u00f6z\u00fcmler sundu\u011funu g\u00f6stermi\u015ftir: \u00f6zellikle Coda ve ayr\u0131ca Dreamweaver, IntelliJ IDEA ve JEditX.\n<\/p>\n\n\n\n \n RTL dilleri i\u00e7in tasar\u0131m yaparken, ihtiyac\u0131n\u0131z olan deste\u011fin \u00e7o\u011funu temel CSS’e yerle\u015ftirebilir ve \n Dikkat edilmesi gereken baz\u0131 temel stil sorunlar\u0131: sa\u011fa yaslanan t\u00fcm \u00f6\u011felerin sola yaslanmas\u0131 gerekecektir ve tam tersi; bir \u00f6\u011fenin bir taraf\u0131na uygulanan ekstra dolgu veya kenar bo\u015flu\u011fu geni\u015fliklerinin ge\u00e7ersiz k\u0131l\u0131nmas\u0131 ve de\u011fi\u015ftirilmesi gerekecektir ve t\u00fcm text-align \u00f6znitelikleri tersine \u00e7evrilmelidir.\n<\/p>\n\n\n\n \n Genellikle a\u015fa\u011f\u0131daki yakla\u015f\u0131m\u0131 kullan\u0131yoruz; eski taray\u0131c\u0131larla uyumlu oldu\u011fu i\u00e7in \u00d6\u011feler:<\/p>\n\n\n\n Soldan sa\u011fa (varsay\u0131lan) stil:<\/p>\n\n\n\n Sa\u011fdan sola stil:<\/p>\n\n\n\n \n (Bunu \u0130ngilizce<\/a> ve Arap\u00e7a<\/a> dillerinde \u00e7al\u0131\u015f\u0131rken g\u00f6rebilirsiniz.)\n<\/p>\n\n\n\n \n Bu konuyla ilgili son bir not: Sa\u011fdan sola dil sayfalar\u0131n\u0131z i\u00e7in haz\u0131rlad\u0131\u011f\u0131n\u0131z i\u00e7eri\u011fin \u00e7o\u011fu, tamamen RTL olmaktan ziyade \u00e7ift y\u00f6nl\u00fc olacakt\u0131r, \u00e7\u00fcnk\u00fc baz\u0131 dizelerin LTR y\u00f6n\u00fcn\u00fc korumas\u0131 gerekecektir; \u00f6rne\u011fin, Latin alfabesindeki \u015firket adlar\u0131 veya telefon numaralar\u0131. Taray\u0131c\u0131n\u0131n bunu temel olarak RTL olan bir belgede do\u011fru \u015fekilde i\u015flemesini sa\u011flaman\u0131n yolu, g\u00f6m\u00fcl\u00fc metin dizelerini, y\u00f6n\u00fc ayarlamak i\u00e7in bir \u00f6znitelik kullanan sat\u0131r i\u00e7i bir \u00f6\u011feyle sarmalamakt\u0131r, \u015f\u00f6yle:\n<\/p>\n\n\n\n \n Ba\u015fl\u0131k \u00f6\u011feleri veya mesaj istemleri i\u00e7in JavaScript taraf\u0131ndan olu\u015fturulan kaynak kod gibi dir \u00f6zniteli\u011fini ba\u011flayabilece\u011finiz bir HTML kapsay\u0131c\u0131n\u0131z\u0131n olmad\u0131\u011f\u0131 durumlarda, y\u00f6n\u00fc ayarlamak i\u00e7in bu e\u015fde\u011feri kullanabilirsiniz; burada ‫<\/span> ve ‬\u202c<\/span> sa\u011fdan sola g\u00f6mme i\u00e7in Unicode kontrol karakterleridir:\n<\/p>\n\n\n\n JavaScript kodunda \u00f6rnek kullan\u0131m:<\/p>\n\n\n\n \n (Daha fazla ayr\u0131nt\u0131 i\u00e7in W3C’nin Arap\u00e7a, \u0130branice ve di\u011fer sa\u011fdan sola yaz\u0131lan diller i\u00e7in HTML olu\u015fturma<\/a> ve sa\u011fdan sola yaz\u0131lan dilleri yazma<\/a> hakk\u0131ndaki makalelerine bak\u0131n.)\n<\/p>\n\n\n\n \n Daha \u00f6nce Latin alfabesi d\u0131\u015f\u0131ndaki karakter setleriyle (Kiril, Yunanca ve say\u0131s\u0131z Asya ve Hint dilleri) hi\u00e7 \u00e7al\u0131\u015fmad\u0131ysan\u0131z, hem d\u00fczenleyicinizin hem de taray\u0131c\u0131n\u0131z\u0131n i\u00e7eri\u011fi ama\u00e7land\u0131\u011f\u0131 gibi g\u00f6r\u00fcnt\u00fclemedi\u011fini fark edebilirsiniz.\n<\/p>\n\n\n\n \n D\u00fczenleyici ve taray\u0131c\u0131 kodlamalar\u0131n\u0131z\u0131n UTF-8 (\u00f6nerilen) olarak ayarland\u0131\u011f\u0131ndan emin olun ve HTML \u015fablonunuza bir \n Son olarak, birka\u00e7 dil s\u00fcr\u00fcm\u00fc olu\u015ftururken isimlendirme kurallar\u0131 hakk\u0131nda pratik bir ipucu. ISO 639-1 dil kodlar\u0131<\/a> gibi bir standart kullanmak, ayn\u0131 belgenin birka\u00e7 dil s\u00fcr\u00fcm\u00fcyle u\u011fra\u015fmaya ba\u015flad\u0131\u011f\u0131n\u0131zda yard\u0131mc\u0131 olur.\n<\/p>\n\n\n\n \n Geleneksel bir standart kullanmak, kullan\u0131c\u0131lar\u0131n sitenizin yap\u0131s\u0131n\u0131 anlamalar\u0131na yard\u0131mc\u0131 olaca\u011f\u0131 gibi, siteyi geli\u015ftirebilecek t\u00fcm web y\u00f6neticileri i\u00e7in daha s\u00fcrd\u00fcr\u00fclebilir hale getirecektir. Ayr\u0131ca di\u011fer site varl\u0131klar\u0131 (logo g\u00f6rselleri, PDF belgeleri) i\u00e7in dil kodlar\u0131n\u0131 kullanmak, dosyalar\u0131 h\u0131zl\u0131 bir \u015fekilde tan\u0131mlamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.\n<\/p>\n\n\n\n \n URL yap\u0131lar\u0131 ve \u00e7ok b\u00f6lgeli web siteleriyle \u00e7al\u0131\u015fma<\/a> ve \u00e7ok dilli web siteleriyle \u00e7al\u0131\u015fma<\/a> ile ilgili di\u011fer konular hakk\u0131ndaki tavsiyeler i\u00e7in \u00f6nceki Webmaster Central g\u00f6nderilerine bak\u0131n.\n<\/p>\n\n\n\n \n G\u00fcnl\u00fck olarak u\u011fra\u015ft\u0131\u011f\u0131m\u0131z temel zorluklar\u0131n bir \u00f6zeti bu; ancak iyi yap\u0131land\u0131r\u0131lm\u0131\u015f HTML ve sa\u011flam CSS i\u00e7in \u00f6nceden planlama yapman\u0131n ve \u00e7al\u0131\u015fman\u0131n yerelle\u015ftirme s\u0131ras\u0131nda meyvelerini verdi\u011fini garanti edebiliriz!\n<\/p>\n\n\n\n![\"Web](\"https:\/\/alienroad.com\/wp-content\/uploads\/kb-gorsel\/g-fff0ba2bc5e5.png\")
\n\n\n\nDi\u011fer taraftan<\/h2>\n\n\n\n
html<\/code> \u00f6\u011fesinin y\u00f6n \u00f6zniteli\u011fini (geriye d\u00f6n\u00fck uyumluluk i\u00e7in) body<\/code> \u00f6\u011fesindeki bir s\u0131n\u0131f ile birlikte kullanabilirsiniz. Her zaman oldu\u011fu gibi, t\u00fcm stilleri tek bir temel stil sayfas\u0131nda tutmak daha iyi bir bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flar.\n<\/p>\n\n\n\nhtml[dir=rtl]<\/code> CSS se\u00e7icisi yerine body etiketi \u00fczerinde bir s\u0131n\u0131f kullanmay\u0131 tercih ediyoruz:\n<\/p>\n\n\n\nBana hepsi Yunanca geliyor…<\/h2>\n\n\n\n
<span><\/code> \u00f6\u011fesi ve html<\/code> \u00f6\u011fesinin lang<\/code> \u00f6zniteli\u011fini eklemeyi d\u00fc\u015f\u00fcn\u00fcn; b\u00f6ylece taray\u0131c\u0131lar sayfan\u0131z\u0131 olu\u015ftururken ne bekleyeceklerini bilirler. Bunun, t\u00fcm Unicode karakterlerinin do\u011fru g\u00f6r\u00fcnt\u00fclenmesini sa\u011flama gibi ek bir faydas\u0131 da vard\u0131r, bu nedenle é<\/code> (\u00e9) gibi HTML varl\u0131klar\u0131n\u0131 kullanmak gerekmeyecek ve de\u011ferli baytlardan tasarruf edeceksiniz! Sorun ya\u015f\u0131yorsan\u0131z W3C’nin karakter kodlama e\u011fitimine<\/a> g\u00f6z at\u0131n; sorunlar\u0131n derinlemesine a\u00e7\u0131klamalar\u0131n\u0131 i\u00e7erir.\n<\/p>\n\n\n\n\u0130simlendirme \u00fczerine bir not<\/h2>\n\n\n\n