HTML ile ilgili temel bilgiler

Bir Önceki Ders : Web Tasarım’da Dosyalarla İlgilenmek 

HTML ( lH yper t dahili M arkup L anguage) bir web sayfasını ve içerik yapısı için kullanılan bir koddur. Örneğin, içerik bir paragraflar kümesi, madde işaretli noktalar listesi veya resimler 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 bilgi verecektir.

Peki HTML nedir?

HTML bir programlama dili değildir; içeriğinizin yapısını tanımlayan bir biçimlendirme dilidir . HTML, belirli bir şekilde görünmesini sağlamak veya belirli bir şekilde davranmak için içeriğin farklı bölümlerini örtmek veya sarmak için kullandığınız bir dizi öğeden oluşur . Çevreleyen etiketler başka bir yere bir kelime veya görüntü köprüsü yapabilir, kelimeleri italik hale getirebilir, yazı tipini büyütebilir veya küçültebilir vb. Örneğin, aşağıdaki içerik satırını alın:

My cat is very grumpy

Çizginin kendi başına kalmasını isteseydik, paragrafın paragraf etiketlerine ekleyerek bir paragraf olduğunu belirtebiliriz:

<p>My cat is very grumpy</p>

HTML öğesinin anatomisi

Bu paragraf öğesini biraz daha inceleyelim.

Öğemizin ana bölümleri aşağıdaki gibidir:

  1. Açılış etiketi: Bu, açılış ve kapanış açılı parantez içine alınmış öğenin adından (bu durumda p) oluşur . Bu, öğenin nerede başladığı veya etkili olmaya başladığını belirtir – bu durumda paragrafın başladığı yer.
  2. Kapanış etiketi: Bu, öğe adından önce eğik çizgi içermesi dışında açılış etiketi ile aynıdır . Bu, öğenin nerede bittiğini belirtir – bu durumda paragrafın nerede bittiği. Kapatma etiketi eklenememesi, standart başlangıç ​​hatalarından biridir ve garip sonuçlara yol açabilir.
  3. İçerik: Bu, yalnızca metin olan öğenin içeriğidir.
  4. Öğe: Açılış etiketi, kapanış etiketi ve içerik birlikte öğeyi oluşturur.

Öğeler ayrıca aşağıdakilere benzer niteliklere sahip olabilir:

Özellikler, gerçek içerikte görünmesini istemediğiniz öğe hakkında ek bilgiler içerir. Burada, classöznitelik adı  ve editor-noteöznitelik değeridir . classÖzniteliği elemanının stil bilgisi ve diğer şeylerle elemanı hedeflemek için daha sonra kullanılabilir bir tanımlayıcı yapmamızı sağlar.

Bir özellik her zaman aşağıdakilere sahip olmalıdır:

  1. Bu öğe ile öğe adı (veya öğenin zaten bir veya daha fazla niteliği varsa önceki özellik) arasındaki boşluk.
  2. Özellik adı ve ardından eşittir işareti.
  3. Tırnak işaretlerini açıp kapatarak öznitelik değeri.

Not : ASCII boşluk (veya karakterlerden herhangi biri " ' ` = < >) içermeyen basit özellik değerleri  tırnaksız kalabilir, ancak kodu daha tutarlı ve anlaşılır hale getirdiği için tüm özellik değerlerini alıntılamanız önerilir.

Yuvalama elemanları

Öğeleri diğer öğelerin içine de koyabilirsiniz – buna yuvalama denir . Kedimizin çok huysuz olduğunu belirtmek istersek, “çok” kelimesini bir <strong>öğeye sarabiliriz, bu da kelimenin güçlü bir şekilde vurgulanması gerektiği anlamına gelir:

<p>My cat is <strong>very</strong> grumpy.</p>

Bununla birlikte, öğelerinizin doğru şekilde yuvalandığından emin olmanız gerekir. Yukarıdaki örnekte, önce <p>öğeyi sonra öğeyi açtık <strong>; bu yüzden önce <strong>elemanı sonra da <p>elemanı kapatmalıyız . Aşağıdakiler yanlış:

<p>My cat is <strong>very grumpy.</p></strong>

Elemanlar, açıkça birbirlerinin içinde veya dışında olacak şekilde doğru bir şekilde açılıp kapanmalıdır. Yukarıda gösterildiği gibi çakışırlarsa, web tarayıcınız söylemeye çalıştığınız şeyi en iyi şekilde tahmin etmeye çalışır ve bu da beklenmedik sonuçlara yol açabilir. Öyleyse yapma!

Boş elemanlar

Bazı öğelerin içeriği yoktur ve boş öğeler olarak adlandırılır . <img>HTML sayfamızda zaten bulunan öğeyi alın :

<img src="images/website-icon.png" alt="My test image">

Bu iki özellik içerir, ancak kapanış </img>etiketi ve iç içerik yoktur. Bunun nedeni, bir görüntü öğesinin onu etkilemek için içeriği sarmamasıdır. Amacı, görüntüyü HTML sayfasına göründüğü yere yerleştirmektir.

Bir HTML belgesinin anatomisi

Bu, tek tek HTML öğelerinin temellerini tamamlar, ancak kendi başlarına kullanışlı değildir. Şimdi tek bir öğenin tüm HTML sayfasını oluşturmak için nasıl birleştirildiğine bakacağız. index.htmlÖrneğimize koyduğumuz kodu (ilk olarak Dosyalarla ilgilenme makalesinde tanıştığımız) tekrar gözden geçirelim :

<!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ğıdakiler var:

  • <!DOCTYPE html>– doktrin. Önsöz gereklidir. Zamanın sisinde, HTML gençken (1991/92 civarında), doktipler, HTML sayfasının iyi HTML olarak kabul edilmesi için uyması gereken bir dizi kurala bağlantı görevi görüyordu; bu, otomatik hata kontrolü ve diğer kullanışlı şeyler. Ancak bu günlerde pek bir şey yapmıyorlar ve temelde sadece belgenizin doğru şekilde çalıştığından emin olmak için ihtiyaç duyuyorlar. Şimdilik bilmeniz gereken her şey bu.
  • <html></html>– <html>eleman. Bu öğe, tüm sayfadaki tüm içeriği sarar ve bazen kök öğe olarak da bilinir.
  • <head></head>– <head>eleman. Bu öğe, HTML sayfanıza , sayfanızın görüntüleyenlerine gösterdiğiniz içerik olmayan eklemek istediğiniz tüm öğeler için bir kap görevi görür . Bu, arama sonuçlarında görünmesini istediğiniz anahtar kelimeler ve sayfa açıklaması, içeriğimizi şekillendirmek için CSS, karakter kümesi bildirimleri ve daha fazlasını içerir.
  • <meta charset="utf-8">– Bu öğe, belgenizin kullanması gereken karakter kümesini, yazılı dillerin büyük çoğunluğunun çoğunu içeren UTF-8 olarak ayarlar. Esasen, şimdi üzerine koyabileceğiniz herhangi bir metinsel içeriği işleyebilir. Bunu ayarlamak için hiçbir neden yoktur ve daha sonra bazı sorunlardan kaçınmaya yardımcı olabilir.
  • <title></title>–  <title> eleman. Bu, sayfanızın yüklendiği tarayıcı sekmesinde görünen başlık olan sayfanızın başlığını belirler. Ayrıca, yer işareti eklediğinizde / favorilere eklediğinizde sayfayı tanımlamak için de kullanılır.
  • <body></body>– <body>eleman. Metin, resim, video, oyun, oynatılabilir ses parçaları veya başka herhangi bir şey olsun, web kullanıcılarına sayfanızı ziyaret ettiklerinde göstermek istediğiniz tüm içeriği içerir .

Görüntüler

Dikkatimizi <img>tekrar öğeye çevirelim:

<img src="images/website-icon.png" alt="My test image">

Daha önce söylediğimiz gibi, sayfamıza göründüğü konumda bir resim yerleştirir. Bunu, srcgörüntü dosyamızın yolunu içeren (kaynak) özniteliğiyle yapar.

Ayrıca alt(alternatif) bir özellik de ekledik . Bu öznitelikte, muhtemelen aşağıdaki nedenlerden dolayı görüntüyü göremeyen kullanıcılar için açıklayıcı metin belirtirsiniz:

  1. Görme engelli. Önemli görme bozukluğu olan kullanıcılar, alt metni okumak için genellikle ekran okuyucu adı verilen araçları kullanır.
  2. Görüntünün görüntülenmemesine neden olan bir şeyler ters gitti. Örneğin, srcyanlış yapmak için özelliğinizin içindeki yolu bilinçli olarak değiştirmeyi deneyin . Sayfayı kaydedip yeniden yüklerseniz, görüntünün yerine böyle bir şey görmelisiniz:

Alternatif metin için anahtar kelimeler “açıklayıcı metin” tir. Yazdığınız alternatif metin, okuyucunun görüntünün ne aktardığına dair iyi bir fikre sahip olması için yeterli bilgi sağlamalıdır. Bu örnekte, şu andaki “Test resmim” metnimiz hiç de iyi değil. Firefox logomuz için çok daha iyi bir alternatif “Firefox logosu: Dünyayı çevreleyen yanan bir tilki” olacaktır.

Resminiz için şimdi daha iyi alternatif metinler bulmayı deneyin.

Metin işaretleme

Bu bölüm, metni işaretlemek için kullanacağınız bazı HTML öğelerini kapsayacaktır.

Başlıklar

Başlık öğeleri, içeriğinizin belirli bölümlerinin başlık – veya alt başlık olduğunu belirtmenize olanak tanır. Bir kitabın ana başlığı, bölüm başlıkları ve alt başlıkları olduğu gibi, bir HTML belgesi de olabilir. HTML 6 başlık seviyeleri içerir <h1>– <h6>, yaygın olarak sadece en az 3 ila 4 kullanacağız rağmen:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Şimdi HTML sayfanıza öğenizin hemen üstünde uygun bir başlık eklemeyi deneyin <img>.

Paragraflar

Yukarıda açıklandığı gibi, <p>elemanlar metin paragrafları içerir; normal metin içeriğini işaretlerken bunları sıklıkla kullanırsınız:

<p>This is a single paragraph</p>

Senin örnek metin ekleyin (eğer onu olmalıdır gibi Web sitenizin görünür? Gerekenler birine veya birkaç paragraflar halinde, sizin altına doğrudan yerleştirilen) <img>elemanı.

Listeler

Web içeriğinin çoğu listelerdir ve HTML’nin bunlar için özel öğeleri vardır. İşaretleme listeleri her zaman en az 2 öğeden oluşur. En yaygın liste türleri sıralı ve sırasız listelerdir:

  1. Sırasız listeler , alışveriş listesi gibi öğelerin sırasının önemli olmadığı listeler içindir. Bunlar bir <ul>öğeye sarılır .
  2. Sıralı listeler , tarif gibi öğelerin sırasının önemli olduğu listeler içindir. Bunlar bir <ol>öğeye sarılır .

Listelerin içindeki her öğe bir <li>(liste öğesi) öğesinin içine yerleştirilir .

Örneğin, aşağıdaki paragraf parçasının bir kısmını bir listeye dönüştürmek isteseydik

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

İşaretlemeyi buna göre 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ırasız bir liste eklemeyi deneyin.

Bağlantılar çok önemlidir – web’i bir web yapan şeydir! Bir bağlantı eklemek için basit bir eleman kullanmamız gerekir – <a>– “a”, “çapa” için kısa biçimdir. Paragrafınızdaki metni bir bağlantıya dönüştürmek için şu adımları izleyin:

  1. Biraz metin seçin. “Mozilla Manifesto” metnini seçtik.
  2. Metni <a>, aşağıda gösterildiği gibi bir öğeye sarın :<a>Mozilla Manifesto</a>
  3. Öğeye aşağıda gösterildiği gibi <a>bir hrefözellik verin :<a href="">Mozilla Manifesto</a>
  4. Bu özelliğin değerini, bağlantının bağlanmasını istediğiniz web adresiyle doldurun:
  5. <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Web adresinin başlangıcında protokol adı verilen kısmı https://veya http://bölümü atlarsanız beklenmedik sonuçlar alabilirsiniz . Bir bağlantı oluşturduktan sonra, bağlantıyı istediğiniz yere gönderdiğinden emin olmak için tıklayın.

hrefilk başta bir özellik adı için oldukça belirsiz bir seçim gibi görünebilir. Bunu hatırlamak sorun yaşıyorsanız, bunun açılımı unutmayın h ypertext ref uzakliginda .

Henüz yapmadıysanız, sayfanıza şimdi bir bağlantı ekleyin.

Sonuç

Bu makaledeki tüm talimatları izlediyseniz, aşağıdakine benzeyen bir sayfa bulmalısınız (buradan da görüntüleyebilirsiniz ):

Firefox logosunu, mozilla'nın serin olduğunu söyleyen bir başlığı ve dolgu metninin iki paragrafını gösteren bir web sayfası ekran görüntüsü

Sıkışırsanız, çalışmanızı her zaman GitHub’daki bitmiş örnek kodumuzla karşılaştırabilirsiniz.

Bir Önceki Ders : Web Tasarım’da Dosyalarla İlgilenmek 

Bir Sonraki Ders :

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu