HyperText Biçimlendirme Dili veya HTML, web'de görüntülenen dokümanların yapısını açıklamak için kullanılan standart biçimlendirme dilidir. HTML, bir belgeyi anlamlı bir şekilde yapılandırmak için belgedeki tüm bileşenleri işaretlemek üzere kullanılan bir dizi öğe ve özellikten oluşur.
HTML dokümanları esasen HTML öğelerini ve metin düğümlerini içeren bir düğüm ağacıdır. HTML öğeleri dokümanlar için anlam ve biçimlendirme sağlar. Buna paragraf, liste ve tablo oluşturma, resim yerleştirme ve form denetimleri dahildir. Her öğenin birden fazla özelliği olabilir. Birçok öğenin, diğer öğeler ve metinler dahil olmak üzere içeriği olabilir. İşlevlerini tanımlayan etiket ve özelliklere sahip diğer öğeler boş.
Meta veri, bölümlendirme, metin, satır içi anlam, form, etkileşimli, medya, bileşen ve komut dosyası dahil olmak üzere birkaç öğe kategorisi vardır. Dizide bunların çoğunu ele alacağız. Önce öğe nedir?
Öğeler
HTML, içeriğin belirli bir şekilde görünmesi veya hareket etmesi için içeriğin farklı bölümlerini içine almak ya da sarmalamak üzere kullandığınız bir dizi öğeden oluşur. HTML öğeleri, açılı ayraçlar (< ve >) kullanılarak yazılan etiketlerle tanımlanır.
Sayfa başlığımız, <h1> etiketini kullandığımız birinci düzey bir başlıktır. Gerçek başlığı olan "Makine Öğrenimi Atölyesi", öğemizin içeriğidir. İçerik, açılış ve kapanış etiketleri arasındadır. Hepsi (açılış etiketi, kapanış etiketi ve içerik) öğedir.
Kapanış etiketi, açılış etiketiyle aynı etikete sahiptir ve öncesinde eğik çizgi vardır.
Öğeler ve etiketler tam olarak aynı şey değildir ancak birçok kişi bu terimleri birbirinin yerine kullanır. Etiket adı, parantez içindeki içeriklerdir. Etiket, köşeli parantezleri içerir. Bu durumda, <h1>. "Öğe", açılış ve kapanış etiketleri ve iç içe geçmiş öğeler dahil olmak üzere bu etiketler arasındaki tüm içeriktir.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
Bu paragraf öğesinin içinde iç içe yerleştirilmiş başka öğeler var. Öğeleri iç içe yerleştirirken, doğru şekilde iç içe yerleştirilmiş olmaları önemlidir. HTML etiketleri açıldıkları sırayla kapatılmalıdır. Yukarıdaki örnekte, açılış ve kapanış <strong> etiketleri içinde <em> öğesinin nasıl açıldığına ve kapatıldığına ve <strong> etiketlerinin <p> etiketleri içinde nasıl açık ve kapalı olduğuna dikkat edin.
Tarayıcılar etiketleri görüntülemez. Etiketler, sayfanın içeriğini yorumlamak için kullanılır.
HTML çok çok affedici. Örneğin, kapanış </li> etiketlerini atlarsak kapanış etiketleri ima edilir.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
<li> öğesini kapatmamak geçerli olsa da bu iyi bir uygulama değildir. </ul> kapanışı zorunludur. Sıralanmamış listenin kapanış etiketi atlanırsa, tarayıcı listenizin ve liste öğelerinizin nerede biteceğini belirlemeye çalışır, ancak siz bu karara katılmayabilirsiniz.
Her öğenin spesifikasyonu, kapanış etiketinin zorunlu olup olmadığını listeler. Spesifikasyondaki "etiketlerin hiçbiri hariç tutulamaz" ifadesi, hem açılış etiketinin hem de kapanış etiketinin gerekli olduğu anlamına gelir. Bu spesifikasyon, gerekli tüm kapanış etiketlerinin bir listesini sağlar.
Önceki örnekte verilen <em> veya <strong> kapatılmamışsa tarayıcı öğeyi sizin yerinize kapatabilir veya kapatmayabilir. <em> öğesinin kapatılmaması, içeriğin muhtemelen amaçladığınızdan farklı şekilde oluşturulmasına neden olur. Bir </ul> atlanmışsa ve sonraki etiket listenin üst kapsayıcısı için bir kapanış etiketiyse şanslısınız demektir. Diğer yandan, bu bir açılış <h1> etiketiyse tarayıcı, stillerin devralınması da dahil, başlığın listenin bir parçası olduğunu varsayar. Atlanmış bazı kapanış etiketleri daha büyük sorunlara neden olur: <script>, <style>, <template>, <textarea> ve <title> gibi bazı etiketlerin kapatılmaması, aşağıdaki örnekte gösterildiği gibi sonraki içeriğin bozulmasına neden olur.
Bazı içeriklerin istenmeden italik olması veya başlığın girintilendirilmesi işletmenize zarar vermez. Bir </textarea> eklemeyi unuttuğunuz veya bir </style> öğesini kapatmayı unuttuğunuz için hiç görünmemeniz, 200x300 boyutundaki bir metin alanında stilsiz bir şekilde görünmesinin, sitenin kullanılamaz hale gelmesine neden olur.
Bazı durumlarda, etiketler işaretlemede yer almasa bile tarayıcılar öğeler içerir. Öğelerin ima edilebileceği için, etiketler olmadığında bile bir öğe var olabilir. Tarayıcı, eklemeseniz bile içeriğinizin çevresine <body></body> ve tablo satırlarınızın etrafına <tbody></tbody> ekler. Bununla birlikte, etiketleri atlamak geçerli olsa da bunu yapmayın. Ayrıca, daha önce de belirtildiği gibi, bunların doğru şekilde iç içe yerleştirilmiş olduğundan emin olun. İşaretleme sorumlusu olarak gelecekteki kendiniz ve kod tabanınız üzerinde çalışan herkes size teşekkür edecektir.
İki tür öğe vardır: değiştirilmiş ve değiştirilmemiş.
Değiştirilmemiş öğeler
Önceki bölümde işaretlenmiş paragraf, başlık ve listelerin hiçbiri değiştirilmez. Değiştirilmemiş öğelerin, kendilerini çevreleyen açılış ve (bazen isteğe bağlı) kapanış etiketleri vardır ve alt öğe olarak metin ve başka etiketler içerebilir. Bu çevreleyen etiketler bir kelime öbeğini veya resmi köprüye dönüştürebilir, bir cümleyi başlığa dönüştürebilir, kelimeleri vurgulayabilir vb.
Değiştirilmiş ve geçersiz öğeler
Değiştirilen öğelerin yerini nesneler alır. Bunlar, çoğu form kontrolünde grafik kullanıcı arayüzü (UI) widget'ı veya çoğu resimde kafes ya da ölçeklenebilir resim dosyası olabilir. Yerine nesneler gelir. Her biri varsayılan bir görünüme sahiptir. Nesnenin türüne ve tarayıcıya bağlı olarak, geçerli stiller sınırlıdır. Örneğin, çoğu tarayıcı, kullanıcı arayüzü widget'larının ve ilgili sözde öğelerin stil özelliklerini sınırlı şekilde etkinleştirir. Kafes resimler söz konusu olduğunda, yükseklik, genişlik, kırpma ve filtreleme CSS ile kolayca gerçekleştirilir ancak başka pek bir şey yapılmaz. Diğer yandan, HTML'ye benzer XML tabanlı bir biçimlendirme dili kullanılan ölçeklenebilir vektör grafikleri (kafes resimler içermediği sürece) tamamen ölçeklenebilirdir. Ayrıca tarzıyla uyum içinde hareket edebilirler. Yerleştirilmiş bir SVG'yi, onu yerleştiren HTML dosyasına bağlı CSS'den biçimlendirme özelliğinin SVG'nin nasıl ayarlandığına bağlı olduğunu unutmayın.
Bu örnekte, <img> ve <input> değiştirilmiş iki öğenin yerini metin olmayan içerik aldı: resim ve bir grafik kullanıcı arayüzü nesnesi.
<input type="range">
<img src="switch.svg" alt="light switch">
Yukarıdaki HTML'nin çıktısı:
Değiştirilen öğeler ile geçersiz öğeler genellikle birbirine karıştırılır. Boş öğelerin tümü kendi kendine kapanan öğelerdir ve tek bir etiketle temsil edilir. Bu, geçersiz bir öğe için kapanış etiketi diye bir şey olmadığı anlamına gelir. İsteğe bağlı olarak, etiketin sonuna bir eğik çizgi ekleyebilirsiniz. Birçok kişi, işaretlemenin daha kolay okunmasını sağlar. Bu örnekten devam edersek, etiketi bir eğik çizgiyle kapatıyoruz:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
Sondaki eğik çizgi eski tarzdır: Öğenin kendi kendine kapandığını ve eşleşen bir bitiş veya kapanış etiketi olmayacağını belirtmenin bir yoludur.
Boş öğeler, metin içeriği veya iç içe yerleştirilmiş öğeler içeremez. Geçersiz öğeler arasında <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, <wbr> ve diğerleri yer alır.
Değiştirilen öğelerin çoğu boş öğeler olsa da tümü geçersiz öğelerdir. video, picture, object ve iframe öğeleri değiştirilir ancak geçersiz olmaz. Hepsi başka öğeler veya metin içerebileceği için hepsinde bir kapanış etiketi vardır.
Çoğu geçersiz öğe değiştirilir. Ancak base, link, param ve meta öğelerinde gördüğümüz gibi, tümünü değil. İçeriğe sahip olamayan, değiştirilmeyen ve dolayısıyla ekranda hiçbir şey oluşturmayan bir void öğesi neden var? İçerik hakkında bilgi vermek için! Bilgiler, öğelerin özellikleri tarafından sağlanır.
Özellikler
<img> ve <input> örneklerinin açılış etiketlerinde yalnızca öğe türünden daha fazlasını içerdiğini fark etmiş olabilirsiniz. Boşlukla ayrılmış bu ekstra ad/değer çiftleri bitleri (yine de bazen değer eklemek isteğe bağlıdır) özellikler olarak adlandırılır. Öznitelikler, HTML'yi son derece güçlü kılan unsurlardır. Bu seride yüzlerce özelliği ve özellik değerini ele alacağız. Burada ise bunların genel olarak ne olduğundan ve nasıl dahil edileceğinden bahsedeceğiz.
Özellikler, öğe hakkında bilgi sağlar. Açılış etiketinin geri kalanı gibi bu özellik de içerikte görünmez ancak hem gören hem de görme engelli (yardımcı teknolojiler ve arama motorları) kullanıcılarınıza içeriğin nasıl görüneceğini tanımlamaya yardımcı olur.
Özellikler yalnızca açılış etiketinde görünür. Açılış etiketi her zaman öğe türüyle başlar. Türden sonra, bir veya daha fazla boşlukla ayrılan sıfır veya daha fazla özellik verilebilir. Çoğu özellik adından sonra, özellik değerine denk gelen, açılış ve kapanış tırnak işaretleriyle sarmalanmış eşit bir işareti gelir.
Bu örnekte, iki özellik içeren bir bağlayıcı bağlantımız var. Bu iki özellik, "Kayıt" içeriğini dahili bir sabit bağlantıya dönüştürdü. Bu bağlantı, bağlantı tıklandığında, dokunulduğunda veya klavye ya da başka bir cihazla etkinleştirildiğinde mevcut tarayıcı sekmesindeki id="register" özelliğine kaydırıldı.
Özellikler, öğelerin davranışını, bağlantılarını ve işlevlerini tanımlar. Bu serinin Özellikler bölümünde daha fazla özelliği ele alacağız. Şimdilik bazı özelliklerin global olduğunu, yani herhangi bir öğenin açılış etiketinde görünebileceklerini unutmayın. Bunlardan bazıları yalnızca birkaç öğe için geçerli olup tümü için geçerli değildir; diğerleri ise öğeye özeldir ve yalnızca tek bir öğeyle alakalıdır.
Özelliklerin çoğu ad/değer çiftleridir. Değeri true, false veya özelliğin adıyla aynı olan Boole özellikleri, yalnızca özellik olarak eklenebilir. Değer gerekli değildir.
<img src="switch.svg" alt="light switch" ismap />
Bu resmin üç özelliği vardır: src, alt ve ismap. src özelliği, SVG resim öğesinin konumunu sağlamak için kullanılır. alt özelliği, görselin içeriğini açıklayan alternatif metin sağlar. ismap özelliği Boole değeridir ve değer gerektirmez. Bu, özelliklerin ne olduğunu açıklamak içindir. Bu özellikler, resimler bölümünde daha ayrıntılı olarak ele alınacaktır.
Özelliklerden alıntı yapmak her zaman gerekli olmasa da bazen gerekli olabilir. Değerde boşluk veya özel karakterler varsa tırnak işareti gerekir. Bu nedenle, her zaman alıntı yapmanız önerilir. Özellik değeri tırnak içine alınmışsa özellikler arasında bir veya daha fazla boşluk olması gerekmez. Ancak, güvenliği ve okunabilirliği sağlamak için tırnak işaretleri ile boşlukların kullanılması önerilir ve takdir edilir.
HTML, büyük/küçük harfe duyarlı değildir, ancak bazı özellik değerleri duyarlıdır. Spesifikasyonda tanımlanan değerler büyük/küçük harfe duyarlı değildir. id ve class değerleri dahil olmak üzere, anahtar kelime olarak tanımlanmayan dizeler genellikle büyük/küçük harfe duyarlıdır.
Bir özellik değeri HTML'de büyük/küçük harfe duyarlıysa, CSS'de ve JavaScript'te özellik seçicinin parçası olarak kullanıldığında büyük/küçük harfe duyarlı olduğunu unutmayın.
İşaretlemenin okunmasını kolaylaştırmak amacıyla, etiketlerinizdeki tüm öğe adları ve özellik adları için küçük harfler kullanarak HTML'nizi işaretlemeniz ve tüm özellik değerlerini tırnak içine almanız önerilir, ancak zorunlu değildir. "XHTML stil işaretlemesi" terimini ve sonunda eğik çizgiyle kapanan boş öğeleri görürseniz, bunun anlamı şudur.
Öğelerin görünümü
Anlamsal öğelerin varsayılan görünümü, kullanıcı aracısı stil sayfaları tarafından ayarlanır. Çoğu tarayıcı bu amaçla gerçek stil sayfalarını kullanırken, diğerleri bunları kodda simüle eder. Sonuç aynıdır. Kullanıcı aracısı stil sayfalarındaki bazı kısıtlamalar HTML spesifikasyonu tarafından belirlense de, tarayıcılar çok geniş bir enlem yelpazesine sahiptir, bu da tarayıcılar arasında bazı farklılıklar olduğu anlamına gelir.
Etiketlerin anlamsal anlamı olduğundan, seçtiğiniz öğe ve dolayısıyla kullandığınız etiketler, görüntülediğiniz içeriğe uygun olmalıdır. Bir öğenin semantiği veya role, yardımcı teknolojiler ve bazı durumlarda arama motorları için önemlidir. HTML, içeriğin görünümünü tanımlamak için değil, içerik yapılandırmak için kullanılmalıdır. Görünüm, CSS'nin alanıdır. <h1>, <strong> ve <em> gibi içeriğin görünümünü değiştiren birçok öğe semantik bir anlama sahip olsa da görünüm yazar stilleri ile değişebilir ve genel olarak da değişir.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
Öğe, özellikler ve JavaScript
Belge Nesne Modeli (DOM), HTML belgesinin yapısının ve içeriğinin veri temsilidir. Tarayıcı HTML'yi ayrıştırırken karşılaşılan her öğe ve metin bölümü için bir JavaScript nesnesi oluşturur. Bu nesnelere düğüm (sırasıyla öğe düğümleri ve metin düğümleri) adı verilir.
Her HTML öğesinin işlevini tanımlayan bir arayüz vardır. HTML DOM API'si, DOM aracılığıyla her HTML öğesine erişim ve kontrolü sağlar. HTML öğesi ve ondan devralan tüm HTML sınıfları için arayüzler sağlar. HTMLElement arayüzü, HTML öğesini ve tüm alt düğümlerini temsil eder. Diğer tüm öğeler, bunu kendisinden devralan bir arayüz aracılığıyla uygular. Devralan her arayüzün bir oluşturucusu, yöntemleri ve özellikleri vardır. Devralınan HTMLElement özellikleri aracılığıyla tüm genel özelliklerin yanı sıra input, pointer, transition ve animation etkinliklerine erişebilirsiniz. Bağımsız öğenin alt türü (ör. HTMLAnchorElement ve HTMLImageElement) üzerinden öğeye özel özellik değerlerine ve yöntemlere erişebilirsiniz.
Öğrendiklerinizi sınayın
HTML bilginizi test edin
HTML öğeleri stil için kullanılır.
Değiştirilen öğeleri seçin.
<img><p><ul><input>Doğru ifadelerin tümünü seçin.