HTML dokümanları, bir doküman türü bildirimi ve <html> kök öğesini içerir. Doküman başlığı ve doküman gövdesi, <html> öğesinin içinde yer alır. Belgenin başlığı gören ziyaretçi tarafından görülemese de, sitenizin çalışır durumda olması çok önemlidir. Arama motorları ve sosyal medya sonuçlarıyla ilgili bilgiler, tarayıcı sekmesi simgeleri ve mobil ana ekran kısayolu gibi tüm meta bilgileri ve içeriğinizin davranışı ile sunumunu içerir. Bu bölümde, hemen hemen her web sayfasında görünür olmasa da bulunan bileşenleri keşfedeceksiniz.
MachineLearningWorkshop.com (MLW) sitesini oluşturmak için işe her web sayfası için gerekli olması gereken bileşenleri ekleyerek başlayın: belge türü, içeriğin insan dili, karakter kümesi ve tabii ki sitenin veya uygulamanın başlığı veya adı.
Her HTML dokümanına ekleyin
Herhangi bir web sayfası için gerekli olması gereken birkaç özellik vardır. Bu öğeler eksikse tarayıcılar içeriği oluşturmaya devam eder, ancak bunları içerir. Her Zaman'a dokunun.
<!DOCTYPE html>
Herhangi bir HTML dokümanında ilk olarak giriş bölümü bulunur. HTML için yalnızca <!DOCTYPE html> gereklidir. Bu bir HTML öğesi gibi görünebilir ancak değildir. Bu, "doctype" adlı özel bir düğüm türüdür. doctype, tarayıcıya standart modu kullanmasını söyler. Atlanırsa tarayıcılar Quirks modu olarak bilinen farklı bir oluşturma modunu kullanır. DOCTYPE'ın eklenmesi, Quirks modunu önlemeye yardımcı olur.
<html>
<html> öğesi, HTML dokümanının kök öğesidir. <head> ve <body> öğelerinin üst öğesidir ve HTML dokümanında doctype dışında her şeyi içerir. Atlanırsa ima edilir ancak doküman içeriğinin dilinin açıklandığı öğe olduğu için bunu dahil etmek önemlidir.
İçerik dili
<html> etiketine eklenen lang dil özelliği, dokümanın ana dilini tanımlar. lang özelliğinin değeri, bölgenin geldiği iki veya üç harfli bir ISO dil kodudur. Bölge isteğe bağlıdır, ancak bir dil, bölgeler arasında büyük farklılıklar gösterebileceğinden önerilir. Örneğin, Fransızca, Kanada'da (fr-CA) ve Burkina Faso'da (fr-BF) çok farklıdır. Bu dil bildirimi ekran okuyucuların, arama motorlarının ve çeviri hizmetlerinin doküman dilini bilmesini sağlar.
lang özelliği, <html> etiketiyle sınırlı değildir. Sayfada, ana doküman dilinden farklı bir dilde metin varsa doküman içindeki ana dille ilgili istisnaları tanımlamak için lang özelliği kullanılmalıdır. Başlıkta yer aldığı gibi, gövdedeki lang özelliğinin de görsel bir etkisi yoktur. Yalnızca anlamsal bilgiler ekleyerek yardımcı teknolojilerin ve otomatik hizmetlerin etkilenen içeriğin dilini bilmesini sağlar.
Özellik, dokümanın dilini ve bu temel dil için istisnaları ayarlamaya ek olarak CSS seçicilerde de kullanılabilir. <span lang="fr-fr">Ceci n'est pas une pipe.</span>; özellik ve dil seçiciler [lang|="fr"] ve :lang(fr) ile hedeflenebilir.
<head>
Açılış ve kapanış <html> etiketleri arasında iç içe yerleştirilmiş iki alt öğe bulunur: <head> ve <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head> ya da doküman meta veri üstbilgisi, bir siteye veya uygulamaya ait tüm meta verileri içerir. Gövde, görünür içeriğe sahip olmalıdır. Bu bölümün geri kalanı, <head></head> açılış ve kapanışlarında iç içe yerleştirilmiş bileşenlere odaklanmaktadır.
<head> içindeki gerekli bileşenler
Doküman başlığı, karakter kümesi, görüntü alanı ayarları, açıklama, temel URL, stil sayfası bağlantıları ve simgeler dahil olmak üzere 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üntü alanı ayarlarını ekleyin.
Karakter kodlama
<head> içindeki ilk öğe, charset karakter kodlama bildirimi olmalıdır. Bu satır, tarayıcının bu başlıktaki karakterleri ve dokümanın geri kalan kısmındaki karakterleri oluşturabildiğinden emin olmak için başlıktan önce gelir.
Çoğu tarayıcıda, yerel ayara bağlı olarak varsayılan kodlama windows-1252 kullanılır. Ancak, var olduğunu bile bilmedikleriniz dahil olmak üzere tüm karakterlerin bir ila dört baytlık kodlamasını etkinleştirdiğinden UTF-8 kullanmalısınız. Ayrıca, HTML5 için gereken kodlama türüdür.
Karakter kodlamasını UTF-8 olarak ayarlamak için şunları ekleyin:
<meta charset="utf-8" />
UTF-8 (büyük/küçük harfe duyarlı değil) özelliğini belirterek başlığınıza emoji de ekleyebilirsiniz (ancak lütfen bunu yapmayın).
Karakter kodlaması, <style> ve <script> dahil olmak üzere dokümandaki her şeye devralınır. Bu küçük bildirim, emojileri sınıf adlarına ve selectAPI'ye ekleyebilmenizi sağlar (tekrar lütfen bunu yapmayın). Emoji kullanıyorsanız bunları erişilebilirliğe zarar vermeden kullanılabilirliği artıracak şekilde kullandığınızdan emin olun.
Doküman başlığı
Ana sayfanızın ve tüm ek sayfaların her birinin benzersiz bir başlığı olmalıdır. Doküman başlığının içeriği, açılış ve kapanış <title> etiketleri arasındaki metin, tarayıcı sekmesinde, açık pencere listesinde, geçmişte, arama sonuçlarında ve <meta> etiketleriyle yeniden tanımlanmadığı sürece sosyal medya kartlarında görüntülenir.
<title>Machine Learning Workshop</title>
Görüntü alanı meta verileri
Gerekli olarak kabul edilmesi gereken diğer meta etiket, site duyarlılığına yardımcı olan ve görüntü alanı genişliği ne olursa olsun içeriğin varsayılan olarak iyi oluşturulmasını sağlayan viewport meta etiketidir. Görüntü alanı meta etiketi, ilk iPhone'un piyasaya sürülmesinden sonra Haziran 2007'den beri kullanılıyor olsa da, bu etiket kısa süre önce bir spesifikasyonda belgelenmiştir. Bu, bir görüntü alanının boyutunun ve ölçeğinin kontrol edilmesini sağladığı ve site içeriğinin 960 piksellik bir sitenin 320 piksellik bir ekrana sığacak şekilde küçültülmesini önlediği için kesinlikle önerilir.
<meta name="viewport" content="width=device-width" />
Yukarıdaki kod, "içeriğin genişliğini ekranın genişliğini yapmaktan başlayarak siteyi duyarlı hale getirmek" anlamına gelir. width özelliğine ek olarak, yakınlaştırma ve ölçeklenebilirlik de ayarlayabilirsiniz. Ancak her ikisi de varsayılan olarak erişilebilir değerleri kullanır. Açıkça belirtmek istiyorsanız şunları ekleyin:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Görüntü alanı, Lighthouse erişilebilirlik denetiminin bir parçasıdır. Siteniz ölçeklenebilirse ve maksimum boyut ayarlanmamışsa başarılı olur.
Şu ana kadar HTML dosyamızın ana hatları şu şekildedir:
<!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>, daha birçok konuya değiniyor. Hatta tüm meta veriler. <head> bölümünde bulacağınız öğelerin çoğu burada ele alınmışken bir sonraki bölüm için birçok <meta> seçeneği kaydedilmiştir.
Meta karakter kümesini ve doküman başlığını gördünüz ancak <meta> etiketlerinin dışında, eklenmesi gereken çok daha fazla meta veri var.
CSS
<head>, HTML'nize stil eklediğiniz yerdir. Stiller hakkında bilgi edinmek istiyorsanız CSS'ye özel bir öğrenme yolu bulunmaktadır, ancak bunları HTML dokümanlarınıza nasıl ekleyeceğinizi bilmeniz gerekir.
CSS eklemenin üç yolu vardır: <link>, <style> ve style özelliği.
HTML dosyanıza stil eklemenin başlıca iki yolu, rel özelliği stylesheet olarak ayarlanmış bir <link> öğesi kullanan harici bir kaynak eklemek veya <style> açılış ve kapanış etiketleri içine CSS'yi doğrudan dokümanınızın başına eklemektir.
Stil sayfası eklemek için tercih edilen yöntem <link> etiketidir. Bir veya birkaç harici stil sayfasının bağlanması, hem geliştirici deneyimi hem de site performansı için iyidir: CSS'yi her yere yayılmak yerine tek bir noktada tutabilirsiniz ve tarayıcılar harici dosyayı önbelleğe alabilir, yani her sayfa gezinmesinde tekrar indirilmesine gerek kalmaz.
Sözdizimi <link rel="stylesheet" href="styles.css"> şeklindedir ve stiller.css, stil sayfanızın URL'sidir. Genellikle type="text/css" ile karşılaşırsınız. Gerekli değil! CSS dışında bir şekilde yazılmış stiller dahil ediyorsanız type gerekir ancak başka bir tür olmadığından bu özelliğe gerek yoktur. İlişkiyi rel özelliği tanımlar: Bu örnekte stylesheet. Bunu çıkarırsanız CSS'niz bağlanmaz.
Kısa süre içinde başka rel değerleri keşfedeceksiniz. Ancak öncelikle CSS eklemenin diğer yollarından bahsedelim.
Harici stil sayfası stillerinizin kademeli bir katman içinde olmasını istiyorsanız ancak katman bilgilerini içine yerleştirmek üzere CSS dosyasını düzenleme erişiminiz yoksa, @import içeren CSS'yi <style> içine ekleyebilirsiniz:
<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 <style> veya bağlı stil sayfanızdaki karakter kümesi bildiriminin dışındaki ilk ifadeler olmalıdır.
Basamaklı katmanlar hâlâ oldukça yeni olsa da @import etiketini başlık <style> içinde fark edemeyebilirsiniz, ancak genellikle özel özelliklerin bir başlık stili bloğunda belirtildiğini görürsünüz:
<style>
:root {
--theme-color: #226DAA;
}
</style>
<link> veya <style> ya da her ikisi aracılığıyla stiller başa yerleştirilmelidir. Bunlar dokümanın gövdesine eklendiklerinde çalışır ancak performans nedeniyle stillerinizin başlıkta olmasını istersiniz. İçeriğinizin ilk olarak yüklenmesini istediğiniz bir şey olduğu için bu mantık mantığa aykırı gibi görünebilir ancak aslında tarayıcının, içerik yüklendiğinde içeriği nasıl oluşturacağını bilmesini istersiniz. Stil eklemek öncelikle, bir öğe ilk oluşturulduktan sonra stil belirlenirse gereksiz yeniden boyama yapılmasını önler.
Ardından, dokümanınızın <head> öğesinde hiçbir zaman kullanmayacağınız stilleri eklemenin tek bir yolu vardır: satır içi stiller. Kullanıcı aracılarının stil sayfaları varsayılan olarak kafayı gizlediğinden büyük olasılıkla hiçbir zaman başlıktaki satır içi stilleri kullanmayacaksınız. Ancak, örneğin, sayfanızın özel öğelerini test edebilmek için JavaScript'siz bir CSS düzenleyici yapmak istiyorsanız, başlığı display: block ile görünür hale getirebilir, ardından başlıktaki her şeyi gizleyebilir ve satır içi style özelliğiyle içerik düzenlenebilir bir stil bloğunu görünür yapabilirsiniz.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
<style> üzerinde satır içi stiller ekleyebilirsiniz ancak style üzerinde <style> stilini belirlemek çok daha eğlencelidir. İstiyorum.
<link> öğesinin diğer kullanım alanları
link öğesi, HTML belgesi ile harici kaynaklar arasında ilişki oluşturmak için kullanılır. Bu kaynakların bazıları indirilebilir, bazıları ise bilgilendirme amaçlıdır. İlişkinin türü, rel özelliğinin değeriyle tanımlanır. Şu anda <link>, <a> ve <area> veya <form> ile kullanılabilen rel özelliği için 25 değer vardır. Bazı değerler ise tümüyle kullanılabilir. Başlıkta meta bilgilerle ilgili olanların ve performansla ilgili olanların <body> bölümüne eklenmesi tercih edilir.
Şimdi başlığınıza üç tür daha ekleyeceksiniz: icon, alternate ve canonical. (Sonraki modülde dördüncü bir türü (rel="manifest") ekleyeceksiniz.)
Site simgesi
Dokümanınızda kullanılacak site simgesini tanımlamak için rel="icon" özellik/değer çiftiyle birlikte <link> etiketini kullanın. Site simgesi, tarayıcı sekmesinde, genellikle doküman başlığının solunda görünen çok küçük bir simgedir. Çok sayıda sekme açık olduğunda, sekmeler küçülür ve başlık tamamen kaybolabilir ancak simge her zaman görünür durumda kalır. Çoğu site simgesi şirket veya uygulama logosudur.
Site simgesi bildirmezseniz tarayıcı, üst düzey dizinde (web sitesinin kök klasörü) favicon.ico adlı bir dosyayı arar. <link> ile farklı bir dosya adı ve konumu kullanabilirsiniz:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Önceki kodda "16 piksel, 32 piksel veya 48 piksel değerinin mantıklı olduğu senaryolarda simge olarak mlwicon.png kullanın" ifadesi yer alıyor. Boyutlar özelliği, ölçeklenebilir simgeler için any değerini veya kare widthXheight değerlerinin boşlukla ayrılmış listesini kabul eder. Bu geometrik sırada genişlik ve yükseklik değerleri 16, 32, 48 ya da daha büyük olduğunda piksel birimi atlanır ve X büyük/küçük harfe duyarlı değildir.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Safari tarayıcıda standart olmayan iki tür simge vardır: iOS cihazlar için apple-touch-icon ve macOS'teki sabit sekmeler için mask-icon. apple-touch-icon yalnızca kullanıcı ana ekrana bir site eklediğinde uygulanır: Farklı cihazlar için farklı sizes ile birden fazla simge belirtebilirsiniz. mask-icon yalnızca kullanıcı, masaüstü Safari'de sekmeyi sabitlerse kullanılır: Simgenin kendisi tek renkli bir SVG olmalıdır ve color özelliği simgeyi gereken renkle doldurur.
Her sayfada ve hatta 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. Twitter mavi kuşu kullanır: Tarayıcı sekmenizde mavi kuşu gördüğünüzde, sekmeye tıklamadan bir Twitter sayfasına açık olduğunu anlarsınız. Google, her farklı uygulaması için farklı site simgeleri kullanır: Örneğin, bir posta simgesi, bir takvim simgesi vardır. Ancak tüm Google simgeleri aynı renk şemasını kullanır. Yine, açık bir sekmenin tam olarak ne olduğunu yalnızca simgeden anlayabilirsiniz.
Sitenin alternatif sürümleri
Sitenin çevirilerini veya alternatif sunumlarını tanımlamak için rel özelliğinin alternate değerini kullanırız.
Sitenin Fransızca ve Brezilya Portekizcesine çevrilmiş sürümleri 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, çevirilerden daha fazlası içindir. Örneğin, type özelliği application/rss+xml veya application/atom+xml olarak ayarlandığında type özelliği, RSS özet akışı için alternatif URI'yı tanımlayabilir. Sitenin örnek PDF sürümüne bağlantı verelim.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
rel değeri alternate stylesheet ise alternatif bir stil sayfasını tanımlar ve title özelliği, bu alternatif stile ad verecek şekilde ayarlanmalıdır.
Standart
Makine Öğrenimi Atölyesi'nin çeşitli çevirilerini veya sürümlerini oluşturursanız arama motorları, hangi sürümün yetkili kaynak olduğu konusunda kafa karışıklığı yaşayabilir. Bunun için, sitenin veya uygulamanın tercih edilen URL'sini tanımlamak üzere rel="canonical" kullanın.
Tercih ettiğimiz URL'yi belirterek, standart URL'yi çevrilmiş tüm sayfalarınızda ve ana sayfaya ekleyin:
<link rel="canonical" href="https://www.machinelearning.com" />
rel="canonical" standart bağlantısı, genellikle orijinal kaynağa atıfta bulunmak üzere yayınlarla ve blog platformlarıyla çapraz yayın yapmak için kullanılır. Bir site, ortak içerik sunduğunda, orijinal kaynağın standart bağlantısını içermelidir.
Komut Dosyaları
<script> etiketi, komut dosyalarını eklemek için kullanılır. Varsayılan tür JavaScript'tir. Başka bir kodlama dili eklerseniz MIME türüyle type özelliğini veya JavaScript modülüyse type="module" özelliğini ekleyin. Yalnızca JavaScript ve JavaScript modülleri ayrıştırılır ve yürütülür.
<script> etiketleri, kodunuzu kapsüllemek veya harici bir dosya indirmek için kullanılabilir. MLW'de harici komut dosyası yoktur. Çünkü yaygın inanışın aksine, çalışan bir web sitesi için JavaScript'e ihtiyacınız yoktur ve bu bir JavaScript değil, bir HTML öğrenme yoludur.
Daha sonra bir Paskalya yumurtası 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, switch kimliğine sahip bir öğe için etkinlik işleyici oluşturur. JavaScript ile, bir öğeye var olmadan başvuruda bulunmak istemezsiniz. Henüz mevcut olmadığından bu değeri henüz eklemeyeceğiz. Işık düğmesi öğesini eklediğimizde <script> öğesini <head> yerine <body> öğesinin altına ekleyeceğiz. Neden? İki neden. Bu komut dosyasını bir DOMContentLoaded etkinliğine dayandırmadığımızdan, öğelere referans veren komut dosyasıyla karşılaşılmadan önce öğelerin var olduğundan emin olmak istiyoruz. Temel olarak JavaScript, yalnızca oluşturmayı engelleme değildir. Aynı zamanda, komut dosyaları indirildiğinde tarayıcı tüm öğeleri indirmeyi durdurur ve JavaScript yürütmesi bitene kadar diğer öğeleri indirmeye devam etmez. Bu nedenle, JavaScript isteklerini genellikle başlıkta değil, belgenin sonunda bulursunuz.
JavaScript indirme ve yürütme işleminin engelleme yapısını azaltabilecek iki özellik vardır: defer ve async. defer ile indirme sırasında HTML oluşturma engellenmez ve JavaScript yalnızca dokümanın oluşturulması tamamlandıktan sonra yürütülür. async kullanıldığında, oluşturma işlemi indirme sırasında da engellenmez ancak komut dosyasının indirilmesi tamamlandıktan 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>. bölümünde bulunan başka bir öğe daha vardır. Çok sık kullanılmayan <base> öğesi, varsayılan bağlantı URL'sinin ve hedefin ayarlanmasına olanak tanır. href özelliği, tüm göreli bağlantılar için temel URL'yi tanımlar.
<base> ürününün yanı sıra bağlantılar ve formlarda geçerli olan target özelliği bu bağlantıların açılması gereken yeri belirler. _self varsayılanı, bağlı dosyaları geçerli dokümanla aynı bağlamda açar. Diğer seçenekler arasında, her bağlantıyı yeni bir pencerede açan _blank, geçerli içeriğin _parent öğesi (açan bir iframe değilse kendisiyle aynı olabilir) veya aynı tarayıcı sekmesinde olup sekmenin tamamını kaplayacak şekilde herhangi bir bağlamdan çıkan _top bulunur.
Çoğu geliştirici, <base> kullanmak yerine bağlantılarda veya formda yeni bir pencerede açmak istedikleri birkaç bağlantıya (varsa) target özelliğini ekler.
<base target="_top" href="https://machinelearningworkshop.com" />
Web sitemiz Yummly gibi bir sitedeki iframe içine yerleştirilmişse (kullanıcı dokümanımızdaki bağlantılardan birini tıkladığında <base> öğesi de dahil olmak üzere), bağlantı iframe'in dışına çıkarılarak tarayıcı penceresinin tamamını kaplayacak şekilde yüklenir.
Bu öğenin dezavantajlarından biri, sabit bağlantıların <base> ile çözümlenmesidir. <base>, <a href="#ref"> bağlantısını etkili şekilde <a target="_top" href="https://machinelearningworkshop.com#ref"> biçimine dönüştürerek temel URL'ye parça eklenmiş bir HTTP isteği tetikler.
<base> ile ilgili dikkat edilmesi gereken diğer noktalar: Bir dokümanda yalnızca bir <base> öğesi olabilir ve bu öğe, olası komut dosyası veya stil sayfası referansları dahil olmak üzere göreli URL'ler kullanılmadan önce gelmelidir.
Kod artık şu şekilde görünür:
<!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" src="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ının bazı açılı ayraçlar, tireler ve patlama arasına yerleştirilmiş olduğunu unutmayın. HTML'yi bu şekilde yorumlayabilirsiniz. Sayfada asıl içerik kalana kadar komut dosyasını yorum yapmadan bırakacağız. <!-- ile --> arasındaki hiçbir şey görünür veya ayrıştırılamaz. HTML yorumları, sırasıyla JavaScript ve CSS yorumlarını kullanmanız gereken komut dosyaları veya stil blokları hariç olmak üzere, sayfada başlık veya gövde dahil herhangi bir yere yerleştirilebilir.
<head> içeriğinde temel bilgileri ele aldınız ancak temel bilgilerden daha fazlasını öğrenmek istiyorsunuz. Sonraki bölümlerde meta etiketler hakkında bilgi edinecek ve web sitenize sosyal medyada bağlantı verildiğinde görüntülenen bilgileri nasıl kontrol edeceğinizi öğreneceksiniz.
Öğrendiklerinizi sınayın
Belge yapısı bilginizi test edin.
Belgenin dilini nasıl tanımlarsınız?
language özelliğini HTML etiketine ekleyin.lang özelliğini HTML etiketine ekleyin.Add the <lang> öğesini <head> öğesine ekleyin.<head> içine eklenebilecek öğeleri seçin.
<p><title><meta>