HTML dokümanları, bir belge türü bildirimi ve <html> kök öğesini içerir. <html> öğesinin içinde doküman başlığı ve doküman gövdesi bulunur.
Dokümanın başlığı kodun dışında görünmese de bir sitenin çalışması için çok önemlidir. Arama motorları ve sosyal medya sonuçlarıyla ilgili bilgiler, tarayıcı sekmesi ve mobil ana ekran kısayolu için simgeler, içeriğinizin davranışı ve sunumu dahil olmak üzere tüm meta bilgilerini içerir. Bu bölümde, görünür olmamasına rağmen neredeyse her web sayfasında bulunan bileşenleri öğreneceksiniz.
MachineLearningWorkshop.com (MLW) sitesini oluşturmak için her web sayfası için gerekli olması gereken bileşenleri ekleyerek başlayın: belge türü, içeriğin dili, karakter kümesi ve elbette sitenin veya uygulamanın başlığı ya da adı.
Her HTML belgesine ekleme
Her web sayfası için gerekli olan birkaç öğe vardır. Tarayıcılar, bu öğeler eksik olsa bile içeriği oluşturur ancak bunları eklemeniz gerekir.
<!DOCTYPE html>
Herhangi bir HTML belgesindeki ilk şey önsözdür. HTML için ihtiyacınız olan tek şey <!DOCTYPE html>. Bu, bir HTML öğesi gibi görünse de aslında doctype adı verilen özel bir düğümdür. DOCTYPE, tarayıcıya standartlar modunu kullanmasını söyler.
Atlandığında tarayıcılar, uyumsuzluk modu olarak bilinen farklı bir oluşturma modu kullanır.
DOCTYPE'nin eklenmesi, Quirks modunun önlenmesine yardımcı olur.
<html>
<html> öğesi, bir HTML dokümanının kök öğesidir. <head> ve <body> öğelerinin üst öğesidir ve doctype dışında HTML dokümanındaki her şeyi içerir. Atlanırsa dil ima edilir ancak dokümanın dilini bildirmek için bu öğeyi eklemeniz gerekir.
İçerik dili
<html> etiketindeki lang özelliği, dokümanın ana dilini tanımlar. Değer, ISO dil kodudur ve isteğe bağlı olarak bölge kodu da eklenebilir.
Örneğin, Kanada'da Fransızca fr-CA, Burkina Faso'da ise fr-BF olarak gösterilir. Bu bildirim, ekran okuyucuların, arama motorlarının ve çeviri hizmetlerinin belge dilini belirlemesine yardımcı olur.
Dokümanın birincil dilindeki istisnaları belirlemek için diğer etiketlerde lang özelliğini kullanabilirsiniz. lang özelliği, gövdede kullanıldığında başlıkta kullanıldığı gibi görsel bir etkisi olmaz. Anlamsal yapı ekler. Bu nedenle, yardımcı teknolojiler ve otomatik hizmetler belirli içeriklerin dilini tanımlayabilir.
Özellik, dokümanın dilini ve bu temel dildeki istisnaları ayarlamanın yanı sıra CSS seçicilerinde de kullanılabilir. <span lang="fr-fr">Ceci n'est pas une pipe.</span>, özellik ve dil seçicilerle ([lang|="fr"] ve :lang(fr)) hedeflenebilir.
<head>
Açılış ve kapanış <html> etiketleri arasına yerleştirilmiş iki alt öğe bulunur: <head> ve <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head>, bir site veya uygulamayla ilgili meta verileri içerirken <body>
görünür içeriği içerir. Bu bölümün geri kalanında, <head> öğesinin içine yerleştirilmiş bileşenlere odaklanılmaktadır.
<head> içinde gerekli bileşenler
Doküman başlığı, karakter kümesi, görünüm alanı ayarları, açıklama, temel URL, stil sayfası bağlantıları ve simgeler gibi doküman meta verileri <head> öğesinde bulunur. Bu özelliklerin tümüne ihtiyacınız olmasa da her zaman karakter kümesi, başlık ve görünüm alanı ayarlarını ekleyin.
Karakter kodlaması
<head> içindeki ilk öğe, charset karakter kodlama bildirimi olmalıdır. Tarayıcının, başlıkta ve dokümanın geri kalanında yer alan tüm karakterleri oluşturabilmesi için başlığın önüne eklenir.
Çoğu tarayıcıda varsayılan kodlama, yerel ayara bağlı olarak windows-1252'dır. Ancak tüm karakterlerin bir ila dört baytlık kodlamasını sağlayan UTF-8 kullanmanız gerekir.
Karakter kodlamasını UTF-8 olarak ayarlamak için şunları ekleyin:
<meta charset="utf-8" />
UTF-8 (büyük/küçük harfe duyarsız) bildirerek başlığınıza emoji bile ekleyebilirsiniz.
Karakter kodlaması, <style> ve <script> dahil olmak üzere belgedeki her şeye uygulanır. Bu küçük bildirim, sınıf adlarına ve selectorAPI öğesine emoji ekleyebileceğiniz anlamına gelir. Emoji kullanıyorsanız erişilebilirliğe zarar vermeden kullanılabilirliği artıracak şekilde kullandığınızdan emin olun.
Doküman başlığı
Ana sayfanız ve tüm ek sayfalarınız dahil olmak üzere her sayfanın benzersiz bir başlığı olmalıdır.
Doküman başlığı, açılış ve kapanış <title> etiketleri arasındaki metin tarayıcı sekmesinde, açık pencerelerin listesinde, geçmişte, arama sonuçlarında ve <meta> etiketleriyle yeniden tanımlanmadığı sürece sosyal medya kartlarında gösterilir.
<title>Machine Learning Workshop</title>
Görüntü alanı meta verileri
Görüntü alanı meta etiketi, sitenin duyarlılığı için çok önemlidir. İçeriğin, görüntü alanı genişliğinden bağımsız olarak iyi şekilde oluşturulmasını sağlar. Görüntü alanı meta etiketi 2007'den beri kullanılsa da yakın zamanda bir spesifikasyonda belgelenmiştir. Görüntü alanı boyutunu ve ölçeğini kontrol ederek içeriğin daha küçük ekranlara sığacak şekilde küçülmesini önler.
<meta name="viewport" content="width=device-width" />
Yukarıdaki kod, "öncelikle içeriğin genişliğini ekranın genişliği yaparak siteyi duyarlı hale getir" anlamına gelir. width'ya ek olarak yakınlaştırma ve ölçeklenebilirlik ayarlayabilirsiniz ancak her ikisi de varsayılan olarak erişilebilir değerlere ayarlanır. Açıkça belirtmek isterseniz şunları ekleyin:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Görünüm alanı, Lighthouse erişilebilirlik denetiminin bir parçasıdır. Siteniz ölçeklenebilir ve maksimum boyutu ayarlanmamışsa testi geçer.
Şimdiye kadar HTML dosyamızın ana hatları şu şekilde:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Diğer <head> içerikleri
<head>'da çok daha fazla şey yer alır. Aslında tüm meta veriler bulunur.
<head>'da bulacağınız öğelerin çoğu bu modülde ele alınsa da Meta veri modülünde daha fazla bilgi paylaşacağız.
Meta karakter kümesini ve doküman başlığını gördünüz ancak <meta> etiketlerinin dışında, dahil edilmesi gereken çok daha fazla meta veri var.
CSS
<head>, HTML'niz için stilleri eklediğiniz yerdir. Stiller hakkında bilgi edinmek istiyorsanız CSS'ye özel bir öğrenme rotası vardır ancak bunları HTML belgelerinize nasıl ekleyeceğinizi bilmeniz gerekir.
CSS'yi dahil etmenin üç yolu vardır: <link>, <style> ve style özelliği.
HTML dosyanıza stil eklemenin iki temel yolu vardır: rel özelliği stylesheet olarak ayarlanmış bir <link> öğesi kullanarak harici bir kaynak eklemek veya CSS'yi doğrudan belgenizin başına açma ve kapatma <style> etiketleri içinde eklemek.
<link> etiketi, stil sayfalarını eklemek için tercih edilen yöntemdir. Tek bir harici stil sayfasını veya birkaç harici stil sayfasını bağlamak hem geliştirici deneyimi hem de site performansı açısından iyidir: CSS'yi her yere dağılmış şekilde değil, tek bir yerde tutabilirsiniz ve tarayıcılar harici dosyayı önbelleğe alabilir. Bu da her sayfa gezinmesinde dosyanın tekrar indirilmesi gerekmediği anlamına gelir.
Söz dizimi <link rel="stylesheet" href="styles.css"> şeklindedir. Burada styles.css, stil sayfanızın dosya adı ve göreli konumudur. type="text/css" özelliğini görebilirsiniz ancak bu özellik zorunlu değildir. rel özelliği, bu örnekte stylesheet olan ilişkiyi tanımlar. rel
özelliğini atlarsanız CSS'niz bağlanmaz.
Kısa süre içinde birkaç rel değer daha keşfedeceksiniz ancak öncelikle CSS'yi dahil etmenin diğer yollarını öğreneceksiniz.
Harici stil sayfası stillerinizin bir basamaklı katman içinde olmasını istiyorsanız ancak CSS dosyasını düzenleme erişiminiz yoksa CSS'yi <style> içinde @import ile birlikte eklemeniz gerekir:
<style>
@import "styles.css" layer(firstLayer);
</style>
Stil sayfalarını dokümanınıza, isteğe bağlı olarak basamaklı katmanlara aktarmak için @import kullanırken @import ifadeleri, karakter kümesi bildiriminin dışında, <style> veya bağlı stil sayfanızdaki ilk ifadeler olmalıdır.
Basamaklı katmanlar hâlâ oldukça yeni olduğundan @import öğesini bir başlıkta <style> görmeyebilirsiniz ancak genellikle bir başlık stil bloğunda özel özellikler bildirilir:
<style>
:root {
--theme-color: #226DAA;
}
</style>
<link>, <style> veya her ikisiyle birlikte eklenen stiller, head bölümüne gitmelidir. Bu stiller, doküman gövdesine eklendiğinde çalışır ancak performans nedenleriyle stilleri head bölümüne eklemeniz gerekir. İçeriğinizin önce yüklenmesini istediğinizi düşünebileceğiniz için bu durum mantıksız görünebilir. Ancak tarayıcının, içerik yüklendiğinde nasıl oluşturacağını bilmesi daha iyidir. Önce stil eklemek, bir öğe ilk oluşturulduktan sonra stillendirilirse gerçekleşen gereksiz yeniden boyamayı önler.
Hiç kullanmayacağınız stilleri belgenizin <head> bölümüne eklemenin bir yolu vardır: satır içi stiller. Kullanıcı aracılarının stil sayfaları, head bölümünü varsayılan olarak gizlediği için büyük olasılıkla hiçbir zaman head bölümünde satır içi stil kullanmazsınız. Ancak, örneğin sayfanızın özel öğelerini test edebilmek için JavaScript olmadan bir CSS düzenleyici oluşturmak istiyorsanız display: block ile başlığı görünür hale getirebilir, ardından başlıkta yer alan her şeyi gizleyebilir ve daha sonra satır içi style özelliğiyle içeriğin düzenlenebilir olduğu bir stil bloğunu görünür hale getirebilirsiniz.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
<style> öğesine satır içi stiller ekleyebilirsiniz.
<link> öğesinin diğer kullanımları
link öğesi, HTML belgesi ile harici kaynaklar arasında ilişkiler oluşturmak için kullanılır. Bu kaynaklardan bazıları indirilebilir, bazıları ise bilgilendirme amaçlıdır. İlişkinin türü, rel özelliğinin değeriyle tanımlanır. <link>, <a> ve <area> veya <form> ile kullanılabilen rel özelliği için 25 değer mevcuttur. Bunlardan bazıları tüm özelliklerle kullanılabilir. Meta bilgilerle ilgili olanları head bölümüne, performansla ilgili olanları ise <body> bölümüne eklemek tercih edilir.
Başlığınıza artık üç tür daha ekleyeceksiniz: icon, alternate ve canonical. Bir sonraki modülde dördüncü bir tür olan
rel="manifest" ekleyeceksiniz.
Site simgesi
Dokümanınızın site simgesini tanımlamak için <link> etiketini rel="icon" ile birlikte kullanın. Favicon, tarayıcı sekmesinde görünen küçük bir simgedir ve genellikle belge başlığının solunda yer alır. Sekmeler küçüldüğünde başlık kaybolabilir ancak simge görünür kalır. Çoğu favicon, şirket veya uygulama logosudur.
Favicon bildirmezseniz tarayıcı, üst düzey dizinde (web sitesinin kök klasörü) favicon.ico adlı bir dosya arar. <link> ile farklı bir dosya adı ve konum kullanabilirsiniz:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Önceki kodda "16 piksel, 32 piksel veya 48 pikselin uygun olduğu senaryolarda simge olarak mlwicon.png kullanın" ifadesi yer alıyor. Sizes özelliği, ölçeklenebilir simgeler için any değerini veya boşlukla ayrılmış kare widthXheight değerleri listesini kabul eder. Burada genişlik ve yükseklik değerleri, geometrik sırada 16, 32, 48 veya daha büyüktür, piksel birimi atlanır ve X büyük/küçük harfe duyarsızdır.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Safari tarayıcı için iki özel standart dışı simge türü vardır:
apple-touch-icon iOS cihazlar için ve mask-icon macOS'te sabitlenmiş sekmeler için.
apple-touch-icon yalnızca kullanıcı bir siteyi ana ekrana eklediğinde uygulanır:
Farklı cihazlar için farklı sizes ile birden fazla simge belirtebilirsiniz.
mask-icon yalnızca kullanıcı sekmeyi masaüstü Safari'ye sabitlerse kullanılır: Simgenin kendisi tek renkli bir SVG olmalı ve color özelliği simgeyi gereken renkle doldurmalıdır.
Her sayfada veya her sayfa yüklemesinde tamamen farklı bir resim tanımlamak için <link> kullanabilirsiniz ancak bunu yapmayın. Tutarlılık ve iyi bir kullanıcı deneyimi için tek bir resim kullanın. Google, farklı uygulamalarının her biri için farklı favicon'lar kullanır. Örneğin, bir posta simgesi ve bir takvim simgesi vardır. Ancak tüm Google simgeleri aynı renk şemasını kullanır. Açık bir sekmenin içeriğinin ne olduğunu simgeden tam olarak bilirsiniz.
Sitenin alternatif sürümleri
Sitenin çevirilerini veya alternatif gösterimlerini tanımlamak için rel özelliğinin alternate değerini kullanın.
Sitenin Fransızca ve Brezilya Portekizcesine çevrilmiş sürümlerinin olduğunu varsayalım:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Çeviri için alternate kullanılırken hreflang özelliği ayarlanmalıdır.
Alternatif değer yalnızca çeviriler için değildir. Örneğin, type özelliği type özelliği application/rss+xml veya application/atom+xml olarak ayarlandığında bir RSS özet akışının alternatif URI'sini tanımlayabilir.
Sitenin sahte PDF sürümüne bağlantı:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
rel değeri alternate stylesheet ise alternatif bir stil sayfası tanımlar ve title özelliği, bu alternatif stile bir ad verecek şekilde ayarlanmalıdır.
Standart
Makine Öğrenimi Atölyesi'nin birden fazla çevirisini veya sürümünü oluşturursanız arama motorları yetkili kaynağı tanımlamayabilir. Site veya uygulama için tercih edilen URL'yi tanımlamak üzere rel="canonical" kullanın.
Çevrilmiş tüm sayfalarınızda ve ana sayfada standart URL'yi ekleyerek tercih ettiğimiz URL'yi belirtin:
<link rel="canonical" href="https://www.machinelearning.com" />
rel="canonical"Standart bağlantı, orijinal kaynağa atıfta bulunmak için en sık yayınlar ve blog platformlarıyla çapraz yayınlama amacıyla kullanılır. Bir site içerik yayınladığında orijinal kaynağın standart bağlantısını eklemelidir.
Komut Dosyaları
<script> etiketi komut dosyaları içeriyor. Varsayılan tür JavaScript'tir. Başka bir komut dosyası dili kullanıyorsanız MIME türüyle birlikte type özelliğini veya JavaScript modülü için type="module" özelliğini ekleyin.
Yalnızca JavaScript ve JavaScript modülleri ayrıştırılıp yürütülür.
<script> etiketleri, kodunuzu kapsüllemek veya harici bir dosyayı indirmek için kullanılabilir. MLW'de harici bir komut dosyası yoktur. Çünkü yaygın inanışın aksine, işlevsel bir web sitesi için JavaScript'e ihtiyacınız yoktur. Bu, JavaScript öğrenme rotası değil, HTML öğrenme rotasıdır.
Daha sonra sürpriz yumurta oluşturmak için küçük bir JavaScript kodu ekleyeceksiniz:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Bu snippet, kimliği switch olan bir öğe için etkinlik işleyici oluşturur.
JavaScript ile, bir öğe mevcut olmadan önce ona referans vermekten kaçınmalısınız. switch henüz mevcut olmadığından etkinlik işleyiciyi eklemeyeceğiz.
Işık anahtarı öğesini eklediğimizde <script> öğesini <head> yerine <body> öğesinin en altına ekleyeceğiz. Neden? Bunun iki nedeni vardır. Bu komut dosyasını DOMContentLoaded etkinliğine dayandırmadığımız için, kendilerine referans veren komut dosyasıyla karşılaşılmadan önce öğelerin mevcut olmasını sağlamak istiyoruz.
Ayrıca, JavaScript yalnızca oluşturmayı engelleyici değildir. Komut dosyaları indirildiğinde tarayıcı tüm öğeleri indirmeyi durdurur ve JavaScript'in yürütmesi tamamlanana kadar diğer öğeleri indirmeye devam etmez. Bu nedenle, JavaScript isteklerini genellikle dokümanın sonunda, head bölümünde değil bulursunuz.
JavaScript'in indirilmesi ve yürütülmesinin engelleme özelliğini azaltabilecek iki özellik vardır: defer ve async. defer ile indirme sırasında HTML oluşturma engellenmez ve JavaScript yalnızca belge oluşturma işlemi tamamlandıktan sonra yürütülür. async ile indirme sırasında oluşturma engellenmez ancak komut dosyası indirildikten sonra JavaScript yürütülürken oluşturma işlemi duraklatılır.
MLW'nin JavaScript'ini harici bir dosyaya eklemek için şunu yazabilirsiniz:
<script src="js/switch.js" defer></script>
defer özelliğinin eklenmesi, komut dosyasının yürütülmesini her şey oluşturulana kadar erteler ve komut dosyasının performansa zarar vermesini önler. async ve defer özellikleri yalnızca harici komut dosyalarında geçerlidir.
Temel
Yalnızca <head>. içinde bulunan başka bir öğe vardır. Nadiren kullanılan <base> öğesi, varsayılan bir bağlantı URL'si ve hedefi ayarlamaya olanak tanır. href özelliği, tüm göreli bağlantılar için temel URL'yi tanımlar.
target özelliği, bağlantıların ve formların yanı sıra <base> üzerinde de geçerlidir ve bu bağlantıların nerede açılacağını belirler. _self varsayılan olarak bağlantılı dosyaları mevcut dokümanla aynı bağlamda açar. Diğer seçenekler arasında _blank (her bağlantıyı yeni bir pencerede açar), _parent (geçerli içeriğin açıcısıdır ve açıcı bir iFrame değilse kendisiyle aynı olabilir) veya _top (aynı tarayıcı sekmesindedir ancak tüm sekmeyi kaplamak için herhangi bir bağlamdan çıkarılmıştır) yer alır.
Çoğu geliştirici, <base> kullanmak yerine bağlantıların veya formların kendisinde yeni bir pencerede açılmasını istediği bağlantılara (varsa) target özelliğini ekler.
<base target="_top" href="https://machinelearningworkshop.com" />
Web sitemizin Yummly gibi bir sitede iFrame'e yerleştirilmiş olması durumunda <base> öğesinin eklenmesi, kullanıcının dokümanımızdaki herhangi bir bağlantıyı tıkladığında bağlantının iFrame'den çıkarak yüklenmesi ve tarayıcı penceresinin tamamını kaplaması anlamına gelir.
Bu öğenin dezavantajlarından biri, bağlantıların <base> ile çözümlenmesidir. <base>, bağlantıyı <a href="#ref"> olarak etkili bir şekilde dönüştürür ve <a target="_top" href="https://machinelearningworkshop.com#ref"> ile temel URL'ye bir HTTP isteği tetikler.
<base> hakkında bilmeniz gereken diğer noktalar:
- Bir dokümanda yalnızca bir
<base>öğesi olabilir. - Olası komut dosyası veya stil sayfası referansları da dahil olmak üzere göreli URL'ler kullanılmadan önce gelmelidir.
Kod artık şu şekilde görünüyor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
HTML yorumları
Komut dosyası, HTML'de yorum satırı oluşturmak için kullanılan köşeli parantezler, tireler ve ünlem işaretiyle sarmalanır. <!-- ile --> arasındaki hiçbir şey görünmez veya ayrıştırılmaz. JavaScript ve CSS yorumlarını kullanmanız gereken komut dosyaları veya stil blokları hariç olmak üzere, HTML yorumlarını sayfanın herhangi bir yerine yerleştirebilirsiniz.
<head> bölümüne neyin ekleneceğiyle ilgili temel bilgileri öğrendiniz ancak temel bilgilerden daha fazlasını öğrenmek istiyorsunuz. Sonraki bölümlerde meta etiketler ve web siteniz sosyal medyada bağlantı verildiğinde nelerin gösterileceğini kontrol etme hakkında bilgi edineceğiz.
Bilgilerinizi sınayın
Belge yapısı hakkındaki bilginizi test edin.
Dokümanın dilini nasıl tanımlarsınız?
language özelliğini ekleyin.lang özelliğini ekleyin.Add the <lang> öğesini <head> öğesine.<head> içine eklenebilecek öğeleri seçin.
<p><title><meta>