HTML

DOCTYPE ne işe yarar?

DOCTYPE, Belge Türü'nün kısaltmasıdır. Bir DOCTYPE her zaman bir DTD - Belge Türü Tanımı ile ilişkilidir.

Bir DTD, belirli bir türdeki belgelerin nasıl yapılandırılması gerektiğini tanımlarken (yani bir button bir span içerebilir ancak bir div içeremez), bir DOCTYPE, bir belgenin hangi DTD'ye uyması gerektiğini beyan eder (yani bu belge HTML DTD'ye uyar).

Web sayfaları için DOCTYPE bildirimi gereklidir. Kullanıcı aracısına belgenizin HTML spesifikasyonlarının hangi sürümüne uyduğunu bildirmek için kullanılır. Bir kullanıcı aracısı doğru bir DOCTYPE'u tanıdığında, belgeyi okumak için bu DOCTYPE ile eşleşen no-quirks modunu tetikleyecektir. Bir kullanıcı aracısı doğru bir DOCTYPE'u tanımazsa, quirks modunu tetikleyecektir.

HTML5 standartları için DOCTYPE bildirimi <!DOCTYPE html> şeklindedir.

Birden çok dilde içeriğe sahip bir sayfayı nasıl sunarsınız?

En yaygın durum olan, birden çok dilde içeriğe sahip bir sayfanın nasıl sunulduğunu sorduğunu varsayacağım, ancak sayfa içindeki içerik yalnızca tek bir tutarlı dilde gösterilmelidir.

Bir sunucuya HTTP isteği yapıldığında, istekte bulunan kullanıcı aracısı genellikle Accept-Language başlığı gibi dil tercihleri hakkında bilgi gönderir. Sunucu daha sonra bu bilgiyi, böyle bir alternatif mevcutsa, belgenin uygun dildeki bir sürümünü döndürmek için kullanabilir. Döndürülen HTML belgesi ayrıca <html> etiketinde lang özelliğini de bildirmelidir, örneğin <html lang="en">...</html>.

Elbette bu, bir arama motoruna aynı içeriğin farklı dillerde mevcut olduğunu bildirmek için işe yaramaz ve bu nedenle <head> içinde hreflang özelliğini de kullanmalısınız. Örn: <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />

Arka uçta, HTML işaretlemesi i18n yer tutucuları ve YML veya JSON formatlarında depolanan belirli dil için içeriği içerecektir. Sunucu daha sonra, genellikle bir arka uç çerçevesinin yardımıyla, o belirli dildeki içerikle HTML sayfasını dinamik olarak oluşturur.

Çok dilli siteler tasarlarken veya geliştirirken nelere dikkat etmeniz gerekir?

  • HTML'inizde lang özniteliğini kullanın.
  • Kullanıcıları kendi ana dillerine yönlendirme - Bir kullanıcının ülkesini/dilini kolayca değiştirmesine izin verin.
  • Raster tabanlı resimlerdeki metin (örn. png, gif, jpg vb.) ölçeklenebilir bir yaklaşım değildir - Metni bir resme yerleştirmek, iyi görünen, sistem dışı yazı tiplerini herhangi bir bilgisayarda görüntülemenin hala popüler bir yoludur. Ancak, resim metnini çevirmek için, her metin dizesi için her dil için ayrı bir resim oluşturulması gerekecektir. Birkaçdan fazla bu tür değişiklikler hızla kontrolden çıkabilir.
  • Kısıtlayıcı kelime/cümle uzunluğu - Bazı içerikler başka bir dilde yazıldığında daha uzun olabilir. Tasarımda düzen veya taşma sorunlarına dikkat edin. Metin miktarının bir tasarımı bozacağı veya yapacağı tasarımlardan kaçınmak en iyisidir. Karakter sayıları başlıklar, etiketler ve düğmeler gibi şeylerde devreye girer. Gövde metni veya yorumlar gibi serbest akışlı metinlerde daha az sorun teşkil ederler.
  • Renklerin nasıl algılandığına dikkat edin - Renkler diller ve kültürler arasında farklı algılanır. Tasarım renkleri uygun şekilde kullanmalıdır.
  • Tarihleri ve para birimlerini biçimlendirme - Takvim tarihleri bazen farklı şekillerde sunulur. Örn. ABD'de "31 Mayıs 2012"ye karşılık Avrupa'nın bazı bölgelerinde "31 Mayıs 2012".
  • Çevrilmiş dizeleri birleştirmeyin - "Bugünün tarihi " + date gibi bir şey yapmayın. Farklı kelime sıralamasına sahip dillerde bozulacaktır. Bunun yerine her dil için parametre değiştirmeli bir şablon dizesi kullanın. Örneğin, İngilizce ve Çince'deki aşağıdaki iki cümleye bakın: I will travel on {% date %} ve {% date %} 我会出发. Değişkenin konumunun dilin dilbilgisi kuralları nedeniyle farklı olduğuna dikkat edin.
  • Dil okuma yönü - İngilizce'de soldan sağa, yukarıdan aşağıya okuruz, geleneksel Japonca'da metin yukarıdan aşağıya, sağdan sola okunur.
  • Kullanışlı - yolu yerel ayarı dahil edin (örn. en_US, zh_CN vb.).

`data-` öznitelikleri ne işe yarar?

JavaScript çerçeveleri popülerleşmeden önce, ön uç geliştiricileri data- özniteliklerini, standart dışı öznitelikler, DOM'daki ekstra özellikler gibi başka hileler olmadan, DOM'un içinde ek verileri depolamak için kullanırdı. Sayfaya veya uygulamaya özel, daha uygun öznitelik veya öğelerin bulunmadığı özel verileri depolamak için tasarlanmıştır.

Günümüzde, data- özniteliklerini kullanmak genellikle teşvik edilmez. Bunun bir nedeni, kullanıcıların tarayıcıda öğeyi incele işlevini kullanarak veri özniteliğini kolayca değiştirebilmesidir. Veri modeli, JavaScript'in içinde daha iyi depolanır ve muhtemelen bir kitaplık veya çerçeve aracılığıyla veri bağlama yoluyla DOM ile güncel tutulur.

Ancak, veri özniteliklerinin mükemmel bir geçerli kullanımı, anlamsız sınıflar veya ID öznitelikleri oluşturmak zorunda kalmadan Selenium ve Capybara gibi uçtan uca test çerçeveleri için bir kanca eklemektir. Öğenin belirli bir Selenium spesifikasyonu tarafından bulunması için bir yola ihtiyacı vardır ve data-selector='the-thing' gibi bir şey, anlamsal işaretlemeyi başka türlü karıştırmadan bunu yapmanın geçerli bir yoludur.

HTML5'i açık bir web platformu olarak düşünün. HTML5'in yapı taşları nelerdir?

  • Semantik - İçeriğinizin ne olduğunu daha hassas bir şekilde tanımlamanıza olanak tanır.
  • Bağlantı - Sunucuyla yeni ve yenilikçi yollarla iletişim kurmanıza olanak tanır.
  • Çevrimdışı ve depolama - Web sayfalarının verileri istemci tarafında yerel olarak depolamasına ve çevrimdışı daha verimli çalışmasına olanak tanır.
  • Multimedya - Video ve sesi Açık Web'de birinci sınıf vatandaş haline getirir.
  • 2D/3D grafikler ve efektler - Çok daha çeşitli sunum seçeneklerine olanak tanır.
  • Performans ve entegrasyon - Daha fazla hız optimizasyonu ve bilgisayar donanımının daha iyi kullanımı sağlar.
  • Cihaz erişimi - Çeşitli giriş ve çıkış cihazlarının kullanımına izin verir.
  • Stil - Yazarların daha karmaşık temalar yazmasına olanak tanır.

Bir `cookie`, `sessionStorage` ve `localStorage` arasındaki farkı açıklayın.

Yukarıda bahsedilen tüm teknolojiler, istemci tarafında anahtar-değer depolama mekanizmalarıdır. Yalnızca değerleri dize olarak depolayabilirler.

| | cookie | localStorage | sessionStorage | | --- | --- | --- | --- | | Başlatıcı | İstemci veya sunucu. Sunucu Set-Cookie başlığını kullanabilir | İstemci | İstemci | | Süre Sonu | Manuel olarak ayarlanır | Sonsuza kadar | Sekme kapandığında | | Tarayıcı oturumları arasında kalıcı | Süre sonu ayarlanıp ayarlanmadığına bağlıdır | Evet | Hayır | | Her HTTP isteğiyle sunucuya gönderilir | Çerezler otomatik olarak Cookie başlığı aracılığıyla gönderilir | Hayır | Hayır | | Kapasite (alan adı başına) | 4kb | 5MB | 5MB | | Erişilebilirlik | Herhangi bir pencere | Herhangi bir pencere | Aynı sekme |

Not: Kullanıcı tarayıcı tarafından sağlanan herhangi bir mekanizma aracılığıyla Tarama verilerini temizlemeye karar verirse, bu, depolanan herhangi bir cookie, localStorage veya sessionStorage'ı temizleyecektir. Yerel kalıcılık tasarlarken, özellikle sunucu tarafında bir veritabanında veya benzeri bir yerde depolama gibi alternatiflerle karşılaştırırken bunu akılda tutmak önemlidir (ki bu, kullanıcı eylemlerine rağmen elbette kalıcı olacaktır).

`<script>`, `<script async>` ve `<script defer>` arasındaki farkı açıklayın.

  • <script> - HTML ayrıştırması engellenir, komut dosyası hemen getirilir ve yürütülür, komut dosyası yürütüldükten sonra HTML ayrıştırması devam eder.
  • <script async> - Komut dosyası HTML ayrıştırmasına paralel olarak getirilir ve kullanılabilir hale gelir gelmez yürütülür (HTML ayrıştırması tamamlanmadan önce potansiyel olarak). Komut dosyası sayfadaki diğer komut dosyalarından bağımsız olduğunda, örneğin analizler için async kullanın.
  • <script defer> - Komut dosyası HTML ayrıştırmasına paralel olarak getirilir ve sayfa ayrıştırmayı bitirdiğinde yürütülür. Birden fazlaysa, her ertelenen komut dosyası belgede karşılaştıkları sırada yürütülür. Bir komut dosyası tamamen ayrıştırılmış bir DOM'a güveniyorsa, defer özniteliği, yürütülmeden önce HTML'in tamamen ayrıştırılmasını sağlamada yararlı olacaktır. Ertelenen bir komut dosyası document.write içermemelidir.

Not: async ve defer öznitelikleri src özniteliği olmayan komut dosyaları için yok sayılır.

CSS `<link>`'leri `<head></head>` arasına ve JS `<script>`'leri hemen `</body>` öncesine konumlandırmak neden genellikle iyi bir fikirdir? Herhangi bir istisna biliyor musunuz?

<link>'leri <head> içine yerleştirme

<link>'leri <head> içine koymak, optimize edilmiş bir web sitesi oluşturmada doğru spesifikasyonun bir parçasıdır. Bir sayfa ilk yüklendiğinde, HTML ve CSS eşzamanlı olarak ayrıştırılır; HTML DOM'u (Belge Nesne Modeli) oluşturur ve CSS CSSOM'u (CSS Nesne Modeli) oluşturur. Her ikisi de bir web sitesinde görselleri oluşturmak için gereklidir, bu da hızlı bir "ilk anlamlı boyama" zamanlamasına olanak tanır. Bu aşamalı oluşturma, optimize edilmiş sitelerin performans puanlarında ölçüldüğü bir kategori optimizasyonudur. Stil sayfalarını belgenin altına yakın bir yere koymak, birçok tarayıcıda aşamalı oluşturmayı engelleyen şeydir. Bazı tarayıcılar, stilleri değişirse sayfanın öğelerini yeniden boyamak zorunda kalmamak için oluşturmayı engeller. Kullanıcı daha sonra boş beyaz bir sayfayı görüntülemek zorunda kalır. Diğer zamanlarda, stil uygulanmamış bir web sayfasını gösteren, stillendirilmemiş içerik flaşları (FOUC) olabilir.

<script>'leri hemen </body> öncesine yerleştirme

<script> etiketleri indirilirken ve yürütülürken HTML ayrıştırmasını engeller, bu da sayfanızın yavaşlamasına neden olabilir. Komut dosyalarını alta yerleştirmek, HTML'in önce ayrıştırılmasını ve kullanıcıya görüntülenmesini sağlar.

<script>'leri alta konumlandırmak için bir istisna, komut dosyanızın document.write() içermesidir, ancak günümüzde document.write() kullanmak iyi bir uygulama değildir. Ayrıca, <script>'leri alta yerleştirmek, tarayıcının komut dosyalarını indirmeye yalnızca tüm belge ayrıştırıldıktan sonra başlayabileceği anlamına gelir. Bu, DOM öğelerini manipüle etmesi gereken kodunuzun bir hata vermemesini ve tüm komut dosyasını durdurmamasını sağlar. <script>'leri <head> içine koymanız gerekiyorsa, defer özniteliğini kullanın, bu, HTML ayrıştırıldıktan sonra komut dosyasını çalıştırmanın aynı etkisini sağlayacak ancak tarayıcı komut dosyasını daha erken indirebilecektir.

Komut dosyalarını kapanış </body> etiketinin hemen öncesine koymanın, sayfanın boş bir önbellekte daha hızlı yüklenmesi yanılsamasını yaratacağını unutmayın (çünkü komut dosyaları belgenin geri kalanını indirmeyi engellemeyecektir). Ancak, sayfa yüklenirken çalıştırmak istediğiniz bazı kodlarınız varsa, bu kod yalnızca tüm sayfa yüklendikten sonra yürütülmeye başlayacaktır. Bu komut dosyalarını <head> etiketine koyarsanız, daha önce yürütülmeye başlayacaklardı - bu nedenle önbellek hazır olduğunda sayfa aslında daha hızlı yüklenmiş gibi görünecektir.

<head> ve <body> etiketleri artık isteğe bağlıdır

HTML5 spesifikasyonuna göre, <head> ve <body> gibi belirli HTML etiketleri isteğe bağlıdır. Google'ın stil kılavuzu bile bayt tasarrufu için bunları kaldırmayı önermektedir. Ancak, bu uygulama hala yaygın olarak benimsenmemiştir ve performans kazancı muhtemelen minimal olacak ve çoğu site için muhtemelen önemli olmayacaktır.

Aşamalı oluşturma nedir?

Aşamalı oluşturma, bir web sayfasının performansını iyileştirmek (özellikle algılanan yükleme süresini iyileştirmek) için içeriği mümkün olduğunca hızlı bir şekilde görüntülemek amacıyla kullanılan tekniklere verilen addır.

Geniş bant internet öncesi dönemlerde çok daha yaygındı ancak mobil veri bağlantıları giderek daha popüler (ve güvenilmez) hale geldiği için modern geliştirmede hala kullanılmaktadır!

Bu tür tekniklere örnekler:

  • Resimlerin tembel yüklenmesi - Sayfadaki resimler hepsi aynı anda yüklenmez. JavaScript, kullanıcı görüntüyü görüntüleyen sayfanın kısmına kaydırdığında bir resmi yüklemek için kullanılacaktır.
  • Görünür içeriği önceliklendirme (veya katlama üstü oluşturma) - Mümkün olduğunca hızlı görüntülemek için kullanıcının tarayıcısında ilk önce oluşturulacak sayfa miktarı için yalnızca minimum CSS/içerik/komut dosyalarını dahil edin, daha sonra diğer kaynakları ve içeriği yüklemek için ertelenen komut dosyalarını kullanabilir veya DOMContentLoaded/load olayını dinleyebilirsiniz.
  • Asenkron HTML parçaları - Sayfa arka uçta oluşturulurken HTML'in bazı kısımlarını tarayıcıya gönderme. Tekniğin daha fazla ayrıntısı bulunabilir.

Bir resim etiketinde `srcset` özniteliğini neden kullanırsınız? Tarayıcının bu özniteliğin içeriğini değerlendirirken kullandığı süreci açıklayın.

srcset özniteliğini, kullanıcıların cihazlarının ekran genişliğine bağlı olarak farklı görüntüler sunmak istediğinizde kullanırsınız - retina ekranlı cihazlara daha yüksek kaliteli görüntüler sunmak kullanıcı deneyimini artırırken, düşük çözünürlüklü görüntüler sunmak düşük kaliteli cihazlara performansı artırır ve veri israfını azaltır (çünkü daha büyük bir görüntü sunmanın gözle görülür bir farkı olmayacaktır). Örneğin: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> tarayıcıya istemcinin çözünürlüğüne bağlı olarak küçük, orta veya büyük .jpg grafiğini görüntülemesini söyler. İlk değer resim adı, ikincisi ise resmin piksel cinsinden genişliğidir. 320 piksel genişliğe sahip bir cihaz için aşağıdaki hesaplamalar yapılır:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

İstemcinin çözünürlüğü 1x ise, 1.5625 en yakın olandır ve small.jpg'ye karşılık gelen 500w tarayıcı tarafından seçilecektir.

Çözünürlük retina (2x) ise, tarayıcı minimumun üzerindeki en yakın çözünürlüğü kullanacaktır. Yani 500w'yi (1.5625) seçmeyecektir çünkü 1'den büyüktür ve görüntü kötü görünebilir. Tarayıcı daha sonra 2'ye daha yakın bir sonuç oranı olan 1000w'yi (3.125) seçecektir.

srcset'ler, dar ekranlı cihazlara daha küçük resim dosyaları sunmak istediğinizde oluşan sorunu çözer, çünkü masaüstü ekranları gibi büyük resimlere ihtiyaç duymazlar - ve isteğe bağlı olarak yüksek yoğunluklu/düşük yoğunluklu ekranlara farklı çözünürlüklü görüntüler sunmak istediğinizde de işe yarar.

Daha önce farklı HTML şablonlama dilleri kullandınız mı?

Evet, Pug (önceden Jade), ERB, Slim, Handlebars, Jinja, Liquid ve EJS sadece birkaçıdır. Bence bunlar aşağı yukarı aynıdır ve içeriği kaçırma ve görüntülenmek üzere veriyi işlemek için faydalı filtreler sağlama konusunda benzer işlevsellik sunarlar. Çoğu şablon motoru, görüntülemeden önce özel işlemeye ihtiyacınız olması durumunda kendi filtrelerinizi enjekte etmenize de izin verecektir.

Canvas ile SVG arasındaki fark nedir?

Canvas, piksellerle çalışan raster tabanlıdır, SVG ise şekillerin matematiksel tanımlarını kullanan vektör tabanlıdır. Canvas, animasyonlar ve oyunlar gibi dinamik ve etkileşimli grafikler için ideal olan, her adımın JavaScript ile belirtildiği zorunlu çizimi kullanır.

Tersine, SVG, şekillerin ve yolların doğrudan HTML'de tanımlandığı bildirimsel çizimi kullanır, bu da onu daha erişilebilir ve SEO dostu hale getirir. Canvas, daha düşük ek yükü nedeniyle karmaşık sahneler için optimaldir, ancak ölçeklendirme görüntü kalitesi kaybına yol açabilir. SVG, çözünürlükten bağımsız olduğundan, kaliteden ödün vermeden çeşitli ekran boyutlarına uyum sağlar.

Sonuç olarak, canvas dinamik, performans yoğun grafikler için uygundur, SVG ise ölçeklenebilir, çözünürlükten bağımsız grafiklerde, doğal erişilebilirlik ve SEO avantajlarıyla öne çıkar.

HTML'deki boş elemanlar nelerdir?

HTML'deki boş elemanlar, açılış ve kapanış etiketleri arasında herhangi bir içerik içermeyen elemanlardır. Bunun yerine, kendi kendini kapatan etiketlerdir, yani kapanış açılı ayraçtan (>) önce bir eğik çizgi (/) içerirler. Boş elemanların bazı yaygın örnekleri şunlardır:

  • <img>: Belgeye resim eklemek için kullanılır.
  • <input>: Kullanıcı girişi almak için kullanılır.
  • <br>: Satır sonu veya zorunlu satır sonu eklemek için kullanılır.
  • <hr>: Yatay çizgiler veya ayırıcılar oluşturmak için kullanılır.