HTML (Hypertext Markup Language), bir web sayfasını ve içeriğini yapılandırmak için kullanılan koddur. Örneğin, içerik, bir paragraf, liste veya görüntüler ve veri tabloları kullanılarak yapılandırılabilir. Başlıktan da anlaşılacağı gibi, bu makale size HTML ve işlevleri hakkında temel bir anlayış verecektir.
Peki HTML nedir?
HTML, içeriğinizin yapısını tanımlayan bir biçimlendirme dilidir. HTML, içeriğin farklı bölümlerini belirli bir şekilde görünmesini sağlamak veya belirli bir şekilde hareket etmesi için kullandığınız bir dizi öğeden oluşur. HTML etiketleri bir sözcük veya görüntü köprüsü oluşturabilir, sözcükleri italik hale getirebilir, yazı tipini daha büyük veya daha küçük hale getirebilir vb. Örneğin, aşağıdaki içerik satırını alın:
My cat is very grumpy
Satırın öylece durmasını istiyorsak, başına ve sonuna paragraf etiketleri ekleyerek paragraf olduğunu belirtebiliriz:
<p>My cat is very grumpy</p>HTML öğesinin anatomisi
Bu paragraf öğesini biraz daha inceleyelim.
Elementimizin ana bölümleri şunlardır:
- Açılış etiketi (opening tag): açma ve kapama parantezlerine sarılmış elemanın adından (bu durumda p) oluşur. Bu, öğenin başladığı veya etkili olmaya başladığı yeri belirtir — bu durumda paragrafın başladığı yer.
- Kapanış etiketi (closing tag): öğe adından önce bir eğik çizgi içermesi dışında, açılış etiketiyle aynıdır. Bu, öğenin nerede bittiğini belirtir — bu durumda paragrafın bittiği yer. Kapanış etiketinin unutulması standart başlangıç hatalarından biridir ve garip sonuçlara yol açabilir.
- İçerik (content): öğenin içeriğidir. Bu örnekte yalnızca metindir.
- Öğe: Açılış etiketi, kapanış etiketi ve içerik birlikte öğeyi oluşturur.
Öğeler aşağıdaki gibi görünen özniteliklere (attribute) de sahip olabilir:
Öznitelikler, öğe hakkında gerçek içerikte görünmesini istemediğiniz ek bilgiler içerir. Burada, class öznitelik adı ve editor-note öznitelik değeridir. class özniteliği, öğeye stil bilgileri ekleyebileceğiniz benzersiz olmayan bir tanımlayıcı vermenizi sağlar.
Bir öznitelik her zaman aşağıdakilere sahip olmalıdır:
- Öğe adı ile arasında boşluk (veya öğenin zaten bir veya daha fazla özniteliği varsa önceki öznitelik ile arasında boşluk)
- Öznitelik adının ardından eşittir işareti.
- Tırnak işaretleri açıp kapatarak içine yazılmış öznitelik değeri.
İç içe öğeler
Öğeleri diğer öğelerin içine de koyabilirsiniz — buna iç içe yerleştirme denir. Örneğin yukarıdaki örnekte metne bir kelime daha ekleyip bunu vurgulamak istiyoruz. very kelimesini <strong> etiketine sarabiliriz, bu da kelimenin koyu bir şekilde yazılacağı anlamına gelir:
<p>My cat is <strong>very</strong> grumpy.</p>Ancak, öğelerinizin düzgün bir şekilde iç içe olduğundan emin olmanız gerekir. Yukarıdaki örnekte, önce <p> elementini, sonra <strong> elementini açtık; bu nedenle, önce <strong> elementini sonra <p> elementini kapatmalıyız. Aşağıdaki kullanım yanlış olacaktır:
<p>My cat is <strong>very grumpy.</p></strong>Elementler, birbirlerinin içinde veya dışında net bir şekilde doğru açılmalı ve kapatılalır. Yukarıda gösterildiği gibi yapılırsa web tarayıcınız ne söylemeye çalıştığınız konusunda en iyi tahmini yapmaya çalışacaktır, bu da beklenmedik sonuçlara yol açabilir.
Boş öğeler
Bazı öğelerin içeriği yoktur ve boş öğeler olarak adlandırılır. HTML sayfamızda bulunan <img> elementine bakalım:
<img src="images/firefox-icon.png" alt="My test image">Bu öğe iki öznitelik içerir, ancak kapanış etiketi ( </img> )ve iç içerik bulunmaz. Bunun nedeni, bir görüntü öğesinin bir etkide bulunmak için içeriği sarmasına gerek yoktur. Amacı, HTML sayfasına göründüğü yere bir resim gömmektir.
HTML öğelerinin temellerini tamamladık, ancak bu öğeler kendi başlarına kullanışlı değildirler. Şimdi tek tek öğelerin nasıl birleştirilerek tüm HTML sayfasını oluşturduğuna bakacağız.
HTML belgesinin anatomisi
Örneğimize koyduğumuz kodu tekrar gözden geçirelim (ilk olarak dosyalarla başa çıkma makalesinde tanıştık): index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>Burada, aşağıdakilere sahibiz:
<!DOCTYPE html>— doctype. Bu gerekli bir önsözdür. HTML daha gençken (1991/92 yıllarında), doctype’lar, HTML sayfasının iyi HTML olarak kabul edilmesi için uyması gereken bir dizi kural anlamına gelirdi. Bu da otomatik hata kontrolü ve diğer yararlı şeyler demekti. Ancak son zamanlarda doctype’lar çok fazla şey yapmazlar ve temelde belgenizin doğru davrandığından emin olmak için gereklidirler. Şimdilik bilmeniz gereken tek şey bu.<html></html>—<html>elementi. Bu öğe tüm sayfadaki tüm içeriği kapsar ve bazen kök öğe olarak bilinir.<head></head>—<head>elementi. Bu öğe, HTML sayfasına eklemek istediğiniz ve sayfanızında tarayıcı tarafından gösterilmeyecek tüm şeyler için bir kapsayıcı görevi görür. Bunlar, anahtar kelimeler, sayfa açıklaması, içeriğimizi stillendirmek için CSSler, karakter kümesi bildirimleri ve daha fazlası gibi şeyleri içerir.<meta charset="utf-8">— Bu öğe, belgenizin kullanması gereken karakter kodunu UTF-8 olarak ayarlar.<title></title>—<title>elementi. Bu, sayfanızın başlığını ayarlar; Ayrıca, yer işareti/sık kullanılanlarda da sayfayı tanımlamak için de kullanılır.<body></body>—<body>. Bu, metin, resim, video, oyun, oynatılabilir ses parçaları veya başka bir şey olsun, sayfanızı ziyaret ettiklerinde web kullanıcılarına göstermek istediğiniz tüm içeriği içerir.
Görüntü
Dikkatimizi tekrar <img> elementine çevirelim:
<img src="images/firefox-icon.png" alt="My test image">Daha önce de söylediğimiz gibi, sayfamıza bir resim ekledik. Bunu, görüntü dosyamızın yolunu içeren (kaynak) src özelliği aracılığıyla yaptık.
Ayrıca bir alt (alternatif) özniteliği de dahil ettik. Bu öznitelikte, büyük olasılıkla aşağıdaki nedenlerden dolayı görüntüyü göremeyen kullanıcılar için açıklayıcı metinler belirtirsiniz:
- Görme engelliler. Önemli görme bozuklukları olan kullanıcılar genellikle alternatif metni okumak için ekran okuyucularını kullanırlar.
- Görüntünün görüntülenmemesine neden olan bir şeyler oldu. Örneğin, özniteliğinizin içindeki
srcyolu kasıtlı olarak yanlış yazmayı deneyin. Sayfayı kaydedip yeniden yüklerseniz, görüntünün yerine şöyle bir şey görmeniz gerekir:
Alternatif metindeki sözler “açıklayıcı metin”dir. Yazdığınız alternatif metin, okuyucuya görüntünün ne aktardığı hakkında yeterli bir bilgi sağlamalıdır. Bu örnekte, şu anki “Test görüntüm” metnimiz hiç de iyi değil. Örneğin Firefox sitesine giderseniz, Firefox logosu için kullanılan alternatif “Firefox logosu: Dünyayı çevreleyen alevli bir tilki” olacaktır.
Şimdi görüntünüz için daha iyi bir alternatif metin bulmaya çalışın.
Metni işaretleme
Bu bölümde, metni işaretlemek için kullanacağınız bazı temel HTML öğeleri ele alınacaktır.
Başlık
Başlık öğeleri, içeriğinizin belirli bölümlerinin başlıklar veya alt başlıklar olduğunu belirtmenizi sağlar. Bir kitabın ana başlığı, bölüm başlıkları ve altyazıları olduğu gibi, bir HTML belgesinin de olabilir. HTML, <h1>–<h6> olmak üzere 6 başlık düzeyi içerir, ancak genellikle en fazla 3 ila 4 kullanırsınız:
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>Şimdi HTML sayfanıza <img> elementinizin hemen üstünde uygun bir başlık eklemeyi deneyin.
Not: Başlık düzeylerinin örtük bir stile sahip olduğunu göreceksiniz. Örneğin Başlık 1 diğerlerinden daha büyük yazılır. Ancak, metni büyütmek veya kalın hale getirmek için başlık öğelerini kullanmayın, çünkü bunlar erişilebilirlik ve SEO gibi diğer nedenlerle kullanılır. Başlık seviyelerini atlamadan sayfalarınızda anlamlı bir başlık dizisi oluşturmaya çalışın.
Paragraf
Yukarıda açıklandığı gibi, <p> metin paragrafları içindir; normal metin içeriğini işaretlerken bunları sık sık kullanırsınız:
<p>This is a single paragraph</p> <img> elementinizin hemen altına bir veya birkaç paragrafa eklemeyi deneyin.
Liste
Web içeriğinin çoğu listelerden oluşur ve HTML bunlar için özel öğelere sahiptir. Listeler her zaman en az 2 elementten oluşur. En yaygın liste türleri sıralı ve sıralanmamış listelerdir:
- Sıralanmamış listeler, alışveriş listesi gibi öğelerin sırasının önemli olmadığı listeler içindir. Bunlar
<ul>etiketi ile sarılır. - Sıralı listeler, bir tarif gibi öğelerin sırasının önemli olduğu listeler içindir. Bunlar
<ol>ile sarılır.
Listelerin içindeki her öğe bir <li> (liste öğesi) öğesinin içine konulur.
Örneğin, aşağıdaki paragraf parçasının bir bölümünü listeye dönüştürmek istersek;
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>Bununla değiştirebiliriz:
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>Örnek sayfanıza sıralı veya sıralanmamış bir liste eklemeyi deneyin.
Bağlantı
Bağlantılar çok önemli – web’i web yapan şeyler! Bağlantı eklemek için basit bir öğe kullanmamız gerekir – <a>– “a”, ‘anchor’dan gelir. Paragrafınızdaki metni bir bağlantıya yapmak için şu adımları izleyin:
- Biraz metin seçin.
- Metni aşağıda gösterildiği gibi
<a>öğesine sarın<a>Koddla</a> - Aşağıda gösterildiği gibi
<a>öğesine birhrefözniteliği verin:<a href="">Koddla</a> - Bu özniteliğin değerini, bağlantının bağlanmasını istediğiniz web adresiyle doldurun:
<a href="https://koddla.com/">Koddla</a>
Web adresinin başında protokol olarak adlandırılan bölümünü atlarsanız beklenmeyen sonuçlar alabilirsiniz. Bir bağlantı yaptıktan sonra, sizi istediğiniz yere gönderdiğinden emin olmak için bağlantıyı tıklayın.
href ilk başta bir öznitelik adı için oldukça belirsiz bir seçim gibi görünebilir. Hatırlamakta sorun yaşıyorsanız, hypertext reference anlamına geldiğini unutmayın.
Henüz yapmadıysanız, sayfanıza şimdi bir bağlantı eklemeyi deneyin.
Son
Bu makaledeki tüm yönergeleri izlediyseniz, aşağıdakine benzeyen bir sayfayla sonuçlanmalısınız (ayrıca burada da görebilirsiniz):