HTML etiketi kavramı. HTML 3 Temelleri Çift Etiket Nedir?

HTML etiketi kavramı.  HTML 3 Temelleri Çift Etiket Nedir?
HTML etiketi kavramı. HTML 3 Temelleri Çift Etiket Nedir?

Bir HTML öğesi, bir web sayfasının HTML ile yazılmış temel yapısal birimidir.

Eşleştirilmiş ve Tek HTML Etiketleri

HTML sözdizimi eşleştirilmiş etiketlerden oluşan öğeler:

  • Öğe bir açılış etiketiyle başlar.
  • Öğe bir kapanış etiketiyle biter.
  • Bir öğenin içeriği, açılış ve kapanış etiketleri arasındaki her şeydir. İçerik metin ve/veya diğer HTML öğeleri olabilir.

Not: Kapanış etiketine "/" koymayı unutmayın; bu, tarayıcıya öğenizin sona erdiğini ve ondan sonra başka bir öğenin geldiğini bildirir. Kapanış etiketine "/" karakterini koymazsanız, tarayıcı bunu bir önceki öğenin içine yerleştirilmiş yeni bir öğe sanacak ve tarayıcı bunun hala kapalı olmadığını düşünecektir.

Tek etiketlerden oluşan HTML öğelerinin sözdizimi şöyledir:

  • Öğe yalnızca bir açılış etiketinden oluşur.

Tek etiketlerden oluşan öğelere boş denir. HTML'de toplam 16 tek etiket vardır:

İç İçe Öğeler

Eşleştirilmiş etiketlerden oluşan HTML öğeleri ya başka öğeler içerebilir ya da kendileri başka öğelerin içine yerleştirilebilir ve öğelerin iç içe geçme derinliği sınırlı değildir.

Aşağıdaki örnek, ikisi iç içe olan üç öğeden oluşur:

İlk paragrafım

Bir öğe diğerinin içine yerleştirildiğinde, iç içe geçmiş öğenin aynı öğe içinde başlayıp bitmesini sağlamanız gerekir. Yani örneğin aşağıdaki kod yanlıştır:

Bu çok

İlginç

Burada eleman, elemanın sınırlarının ötesine geçer

Doğru yerleştirmeye örnek:

Çok ilginç

Burada eleman düzgün bir şekilde yuvalanmıştır - tamamen elemanın içindedir

Boşluk karakterleri

Tarayıcı, HTML kodundaki boşluk karakterlerini yok sayar; böylece kodunuzu daha okunaklı hale getirmek için bunları kendi yararınıza kullanabilirsiniz. Boşluk karakterleri sekmeleri, satır sonlarını ve düzenli boşluklar, herhangi bir miktarda kullanılabilirler. Boşluk kullanan örnek kod:

Başlık İlk başlığım

İlk paragrafım

Örnek kod kullanılmadan yazılabilirdi boşluk karakterleri, ancak bu kod daha az okunabilir olacaktır:

Titleİlk başlığım

İlk paragrafım

HTML belge kodu zamanla büyüdükçe ve karmaşıklaştıkça, boşluk kullanmanın aslında kodun okunabilirliğini artırdığını göreceksiniz.

HTML çok basit Metin dosyası.htm (html) uzantılı. İlk başta basit bir sayfa oluşturmak için, sadece antrenman yaparken sadece bir not defterine ihtiyacınız var. Not defterini açın ve bir miktar metin yazın.

Her HTML öğesi köşeli parantezlerle çevrelenmiş bir etikettir. Herhangi bir dosya, html sayfası bir etiketle başlar ve bir etiketle biter.

Bu etiket yalnızca tarayıcıya (bu, İnternet sayfalarını görüntülediğiniz programdır) şunu bildirir: bu belge bir HTML biçimlendirme belgesidir.

Etiketi html belgesinin başlangıcını, kapanış etiketi ise html belgesinin sonunu ifade eder.



Bu etiketlerin içinde birkaç önemli etiket daha vardır. Etiketin hemen ardından sayfa başlığını ve sayfa gövdesini belirten etiketler gelir.


İlk HTML sayfam




Etiket, bu sayfa görüntülendiğinde pencere başlığının başlığı anlamına gelir.
Artık yeni bir tane oluşturabilirsiniz Metin belgesi not defterinde yukarıda sunulan metni kopyalayıp Sayfa1.html olarak kaydedin ve tarayıcıda çalıştırın, tarayıcı penceresinin başlık çubuğunda sayfanın başlığını ve boş bir sayfa göreceksiniz, çünkü Sayfanın gövdesinde etiketler halinde hiçbir şey göstermiyoruz.

Dolayısıyla yukarıdaki metin bizim için herhangi bir web sayfasının temel iskeleti olacaktır.

Eşleştirilmiş ve eşleştirilmemiş etiketler!

, , Bunlar yalnızca eşleştirilmiş etiketlerdir - çift olarak gelen etiketler: bir etiket ve kapanışı, / sembolünü içeren bir kapanış etiketi. Eşleştirilmiş etiketler için, etiketin başlangıcı ile bitişi arasında bulunan değer, etiketin eylemidir. / sembolünü içeren bir etiket bulunana kadar eylem devam edecektir.

Eşlenmemiş etiketler – kapanış etiketleri yoktur. Aşağıda bu tür etiketlerin örneklerini vereceğiz.

— Başlık HTML sayfaları, dahil oldukları yer anahtar kelimeler arama motorları, çeşitli komut dosyaları vb. için

— HTML belgesinin gövdesi.


Olumsuz eşleştirilmiş etiket.

Not: Çoğu durumda, artık web siteleri oluştururken hazır rutinler, eklentiler vb. kullanılmaktadır. - daha fazlası için hızlı oluşturma ancak bu tür rutinleri ve şablonları uygulamak ve kullanmak için yine de bu oturumlar hakkında minimum bilgiye ihtiyacınız var.

HTML etiketleri HTML dilinin temelidir. Etiketler, işaretlemedeki öğelerin başlangıcını ve bitişini sınırlamak için kullanılır.

Her HTML belgesi, HTML öğeleri ve metinlerden oluşan bir ağaçtan oluşur. Her HTML öğesi bir başlangıç ​​(açılış) ve bitiş (kapanış) etiketiyle tanımlanır. Açılış ve kapanış etiketleri etiketin adını içerir.

Tüm HTML öğeleri beş türe ayrılmıştır:

  • boş öğeler - , ,
    , , , , , , , , , , , , ;
  • biçimlendirilmemiş metin içeren öğeler - , ;
  • biçimlendirilmemiş metni görüntüleyen öğeler - , ;
  • başka bir ad alanındaki öğeler (MathML ve SVG);
  • sıradan unsurlar - diğer tüm unsurlar.

Tablo gösteriyor tam liste HTML4 ve HTML5 tarafından desteklenen öğeler. Deneysel ve eski etiketler hariçtir. HTML5 spesifikasyonuna eklenen öğeler deniz mavisi renkle vurgulanmıştır.

HTML öğelerinin tam listesi Tablo 1. HTML öğeleri Etiket Açıklama
Yorum eklemek için kullanılır.
Belge türünü bildirir ve tarayıcıya dili ve sürümü gibi temel bilgileri sağlar.
Köprü metni bağlantıları oluşturur.
Metni kısaltma veya kısaltma olarak tanımlar. Açıklayıcı metin, başlık özelliği kullanılarak belirtilir.
Belgenin veya makalenin yazarının/sahibinin iletişim bilgilerini belirtir. Tarayıcıda italik olarak görüntülenir.
Bir görüntü haritasındaki belirli bir alana veya görüntü haritasındaki aktif bir alana karşılık gelen metni içeren bir köprüdür. Her zaman bir etiketin içine yerleştirilmiştir.
Dergi makalesi, blog yazısı, yorum gibi bir belgenin veya web sitesinin bağımsız bir parçasını oluşturan içerik bölümü.
Sayfanın/sitenin ana içeriğiyle dolaylı olarak ilgili olan sayfa içeriğini temsil eder.
Ses içeriğini bir web sayfasına yükler.
Vurgulanan metne vurgu veya önem eklemeden metnin bir pasajını kalın olacak şekilde ayarlar.
Tüm göreli adreslerin hesaplandığı temel adresi (URL) belirtir. Bu, tüm bağlantılar eskisi gibi çalışacağından sayfayı başka bir konuma taşırken sorunların önlenmesine yardımcı olacaktır.
Metnin sağdan sola okunduğu bir dilde yazılmış bir metin pasajını metnin geri kalanından ayırır.
Metni, geçerli metin yönünü geçersiz kılarak, dir özelliği tarafından belirtilen yönde görüntüler.
Büyük alıntıları tanımlamak için kullanılan metni alıntı olarak vurgular.
Belgenin gövdesini temsil eder (belgenin meta verilerinin parçası olmayan içerik).

Metni yeni bir satıra kaydır.
Etkileşimli bir düğme oluşturur. Etiketin içine metin veya resim gibi içerik yerleştirebilirsiniz.
Basit resimler, çizelgeler, grafikler vb. gibi görselleri dinamik olarak görüntülemek için tuval kabı. Çizim için JavaScript kodlama dili kullanılır.
Tabloya bir başlık ekler. Etiketin hemen sonrasına eklendi .
Bir alıntının kaynağını belirtmek için kullanılır. İtalik olarak görüntülenir.
Tek aralıklı yazı tipi ailesinde görüntülenen program kodunun bir parçasını temsil eder.
Aynı türde bilgi içermeyen bir veya daha fazla tablo sütununu biçimlendirme için seçer.
Mantıksal olarak homojen birçok hücreyi tanımlayan yapısal bir sütun grubu oluşturur.
Eleman, değer özelliğinin makine tarafından okunabilir formattaki ve bilgisayar tarafından işlenebilen değerini etiket içeriğiyle ilişkilendirmek için kullanılır.
Bir açılır liste öğesi için kapsayıcı öğesi. Varyant değerleri elementlere yerleştirilir.
Bir etiketteki terimi tanımlamak için kullanılır.
Metnin üzerini çizerek silinmiş olarak işaretler.
Kullanıcının açabileceği veya kapatabileceği etkileşimli bir widget oluşturur. İçerik için bir kapsayıcıyı temsil eder; widget'ın görünür başlığı etikete yerleştirilir.
Bir kelimeyi italik yazarak terim olarak tanımlar. Aşağıdaki metin bu terimin tanımını içermelidir.
Kullanıcının bir görevi tamamlamak için etkileşimde bulunduğu iletişim kutusu, denetçi veya pencere gibi etkileşimli bir öğe. Open özelliği olmadan kullanıcı tarafından görülemez.
Bir HTML belgesinin bölümleri için kapsayıcı etiketi. Stillerle biçimlendirmek üzere blok öğelerini gruplamak için kullanılır.
Bir terimi ve açıklamasını içeren kapsayıcı etiketi.
Bir terimi belirtmek için kullanılır.
Metnin önemli pasajlarını italik olarak görüntüleyerek vurgular.
Harici etkileşimli içerik veya eklenti eklemek için bir kapsayıcı etiketi.
Bir formdaki ilgili öğeleri etraflarına bir kutu çizerek gruplandırır.
Öğenin başlığı/başlığı.
Çizimler, diyagramlar, fotoğraflar, kod örnekleri gibi içerikler için genellikle bir başlık içeren bağımsız bir kap etiketi.
Bir belgenin veya bölümün bitiş alanını (alt bilgi) tanımlar.
Kullanıcılardan sunucuya bilgi toplamak ve göndermek için bir form. Action özelliği olmadan çalışmaz.
İlgili bölümler için altı düzeyde başlık oluşturun.
, , , , gibi HTML belgesi meta verileri için bir kap öğesi.
Bir sitenin veya gezinme bağlantısı grubunun tanıtıcı bilgilerinin yer aldığı bölüm. Yazar hakkında bir veya daha fazla başlık, logo, bilgi içerebilir.
Paragrafların tematik bölümü için yatay bir çizgi.
Bir HTML belgesinin kök öğesi. Tarayıcıya bunun bir HTML belgesi olduğunu söyler. Diğer tüm html öğeleri için bir kaptır.
Bir metin pasajını ek vurgu yapmadan italik olarak yazın.
Geçerli HTML belgesine başka bir belge yükleyerek satır içi çerçeve oluşturur.
Değeri gömülü görüntünün URL'si olan src özelliğini kullanarak görüntüleri bir HTML belgesine gömer.
Kullanıcının veri girebileceği zengin form alanları oluşturur.
Metni altı çizili olarak vurgular. Bir belgede yapılan değişiklikleri vurgulamak için kullanılır.
Kullanıcının klavyeyi kullanarak tek aralıklı yazı tipinde gireceği metni seçer.
Sayfa hakkında ek bilgi depolamak için kullanılır. Bu bilgiler tarayıcılar tarafından sayfayı işlemek için, arama motorları tarafından ise dizine eklemek için kullanılır. Kullanılan niteliklere bağlı olarak farklı bilgiler taşıdıkları için bir blokta birden fazla etiket bulunabilir.
Belirli bir aralıktaki ölçüm göstergesi.
Bir belgenin siteye yönelik gezinme bağlantılarını içeren bölümü.
Komut dosyası oluşturmayı desteklemeyen bir bölümü tanımlar.
Multimedyayı gömmek için kapsayıcı (örn. ses, video, Java uygulamaları, ActiveX, PDF ve Flash). Geçerli HTML belgesine başka bir web sayfası da ekleyebilirsiniz. Etiket, eklentinin parametrelerini iletmek için kullanılır.
Sıralı numaralandırılmış liste. Numaralandırma sayısal veya alfabetik olabilir.
Bir grup öğe için başlığı olan bir kapsayıcı.
, veya , açılır listesinden seçilecek bir seçeneği/seçeneği belirtir.
Komut dosyası kullanılarak hesaplanan bir hesaplamanın sonucunu görüntüleme alanı.

Metindeki paragraflar.
Öğe kullanılarak oluşturulan eklentiler için parametreleri tanımlar.
Bir öğe içeren bir kap öğesi ve sıfır veya daha fazla öğe. Kendi başına hiçbir şey göstermez. Tarayıcının en uygun görseli seçmesine izin verir.
Metni biçimlendirmeden, boşlukları ve metin sonlarını koruyarak çıkarır. Bilgisayar kodunu, e-posta mesajlarını vb. görüntülemek için kullanılabilir.
Her türlü görevin tamamlandığının göstergesi.
Kısa bir alıntı tanımlar.
Doğu Asya sembolleri ve kodlarının çözülmesi için kapsayıcı.
İç içe geçmiş metnini ek açıklamanın temel bileşeni olarak tanımlar.
Öğede bulunan karakterlerin üstüne veya altına, daha küçük bir yazı tipiyle görüntülenen kısa bir açıklama ekler.
Gömülü metni ek açıklama olarak işaretler.
Tarayıcı öğeyi desteklemiyorsa alternatif metni görüntüler.
Güncel olmayan metni üstü çizili olarak görüntüler.
Sistem mesajlarının yanı sıra program kodunun veya komut dosyasının yürütülmesinin sonucunu temsil eden metni görüntülemek için kullanılır. Tek aralıklı yazı tipinde görüntülenir.
İstemci tarafı komut dosyasını (genellikle JavaScript) tanımlamak için kullanılır. Betik metni içerir veya src niteliğini kullanan harici bir betik dosyasına işaret eder.
Bir sayfanın mantıksal alanını (bölümünü) genellikle bir başlıkla tanımlar.
Önerilen bir kümeden değer seçmenizi sağlayan bir kontrol öğesi. Varyant değerleri içine yerleştirilir.
Metni daha küçük yazı tipi boyutunda görüntüler.
, , için alternatif medya kaynaklarının konumunu ve türünü belirtir.
Satır içi öğeler için kapsayıcı. Tek tek sözcüklerin renkle vurgulanması gibi metin pasajlarını biçimlendirmek için kullanılabilir.
Metne vurgu yapar ve kalın harflerle vurgular.
Yerleştirilebilir stil sayfalarını içerir.
Kimyasal formüllerdeki element dizini gibi sembollerin alt simge yazımını belirtir.
Etiket için görünür bir başlık oluşturur. İçi dolu bir üçgenle görüntülenir, üzerine tıkladığınızda başlık ayrıntılarını görebilirsiniz.
Karakterlerin üst simge yazımını belirtir.
Tablo oluşturmak için etiket.
Tablonun gövdesini tanımlar.
Bir tablo hücresi oluşturur.
Bir betik tarafından kopyalanıp bir belgeye eklenebilecek HTML kod parçalarını bildirmek için kullanılır. Bir etiketin içeriği bir alt öğe değildir.
Büyük metin giriş alanları oluşturur.
Tablo altbilgisini tanımlar.
Bir tablo hücresi başlığı oluşturur.
Tablo başlığını tanımlar.
Tarih/saati tanımlar.
Tarayıcının başlık çubuğunun üst kısmında görünen bir HTML belgesinin başlığı. Arama sonuçlarında da görünebilir, bu nedenle başlık verilirken bu dikkate alınmalıdır.
Bir tablo satırı oluşturur.
Öğeler ve için altyazılar ekler.
Metindeki bir pasajın altını çizerek, ilave vurgu yapmadan vurgular.
Madde işaretli bir liste oluşturur.
Programlardaki değişkenleri italik olarak görüntüleyerek vurgular.
Sayfaya video dosyaları ekler. 3 video formatını destekler: MP4, WebM, Ogg.
Uzun bir satırın nerede kesilebileceğini tarayıcıya belirtir.
Etiketleri içeren kopya kağıdı

Kullanım kolaylığı için etiketleri tematik bölümler halinde gruplandırdım ve her etiket için görüntü özelliği değerleri ekledim. Tabloya gitmek için resmin üzerine tıklayın.

Etiket ( pl. etiketler, bazen etiket), bir web sayfasının kaynak metnini işaretlemek için kullanılan HTML dilinin bir öğesidir. Etiketler, köşeli parantez içine alınmış İngilizce kelimelerin kısaltmaları veya kısaltmalarıdır; örneğin, etiket

İngilizce kelimenin kısaltması paragraf yani bu etiketin içine alınan metin tarayıcılar tarafından paragraf olarak tanınacaktır.

HTML'deki her etiketin özel bir anlamı vardır ve belirli verilerin görüntülenmesinden sorumludur. Etiket adlarındaki harflerin büyük/küçük harf durumu önemli değildir; örneğin etiket

ve etiket

- Bu aynı. Yani etiketler hem küçük hem de büyük harflerle yazılabilir. Daha önce, etiketlerin sıradan metinden farklı olması için tüm etiketlerin büyük harflerle yazılması yaygın bir uygulamaydı. Artık pek çok düzenleyicide sözdizimi vurgulaması olduğundan böyle bir ihtiyaç yok.

Etiket sınıflandırması

HTML'de 90'dan fazla etiket vardır. Tipik olarak bir etiket, belgenin yalnızca bir bölümünü etkiler; örneğin, birinci düzey başlık etiketi... Bu gibi durumlarda eşleştirilmiş etiketler kullanılır: açılış Ve kapanış. Bir açılış etiketi (örneğin, ) efekti oluşturur ve bir kapanış etiketi ( ) efekti durdurur. Örnekte de görebileceğiniz gibi, kapanış etiketinde her zaman bu simge (/) bulunur; bu bir eğik çizgidir. Bu etiketlere denir çiftler.

Bazı etiketler göründükleri yerde tek seferlik bir etki sağlar. Örneğin yatay çubuk etiketi veya resim görüntüleme etiketi . Bu tür etiketlerin kapanış etiketleri yoktur. Bu tür etiketlere eşlenmemiş denir.

Etiket türleri

Ek olarak, etiketler işlevleri bakımından farklılık gösteren çeşitli türlere ayrılmıştır:

  • belge başlığı etiketleri;
  • blok elemanları;
  • satır içi öğeler;
  • evrensel unsurlar;
  • listeler;
  • tablolar;
  • çerçeveler.

Bu ayrım katı değildir, dolayısıyla bazı etiketler farklı gruplardadır. Örneğin, liste oluşturmaya yönelik etiketler ve

    hem listelere hem de blok öğelerine uygulanır.

    Etiket yapısı

    Tarayıcıya yüklendiğinde etiketlerin kendisi görüntülenmez ancak içeriklerinin görüntülenme şeklini etkiler. Bir etiket yanlış yazılırsa tamamen göz ardı edilir.

    Tüm etiketlerin yazarken uyulması gereken belirli bir yapısı vardır. Ayrıca neredeyse tüm etiketlerin içeriğin görüntülenme şeklini değiştirebilecek çeşitli özellikleri vardır.

    Nitelikleri içeren etiketlerin doğru yapısına bakalım:

  • Kendi web yöneticiniz
  • Örnek olarak tamamen farklı iki etiket verdim. Birinci tek - resimlerin görüntülenmesinden sorumludur, özellik - src = "logo.jpg" . Saniye eşleştirilmiş olan bağlantıların oluşturulmasından sorumludur, özellik href = "site" dir.

    Sonuç 1: Nitelikler eşleştirilmiş ve eşlenmemiş etiketlere sahip olabilir.

    Sonuç 2: Yalnızca açılış etiketlerinin nitelikleri olabilir, kapanış etiketlerinin nitelikleri yoktur.

    Açıklama için resim:

    Şekil 1. HTML etiket yapısı

    HTML sözdizimine ilişkin dikkat ve bilgi testi

    Derste incelediğimiz basit bir web sayfası örneğine bakalım.

    Tüm dillerin etiketlerden oluştuğunu zaten okudunuz. Bu dersimizde HTML etiketlerine daha yakından bakacağız. HTML dilinde etiketler tekli (eşlenmemiş) ve eşleştirilmiş etiketlere ayrılır. Yani tek HTML etiketleri tek etiketten oluşur, yani kapanış etiketi yoktur. Ve eşleştirilmiş tanımlayıcıların bir açılış ve kapanış etiketi vardır.

    Tek HTML Etiketleri

    Tek etiketlerin kapanış etiketi yoktur. Örneğin:
    , . Daha önce şöyle yazmışlardı:
    , , artık bu tek etiket yazma tarzı konuyla alakalı değil, o yüzden bu şekilde yazmayın. En çok kullanılan tek etiketler:
    - transfer Yeni hat, - Sınır çizgisi, - bir resim ekleyin.

    Eşleştirilmiş HTML etiketleri

    Daha birçok eşleştirilmiş etiket var. Eşleştirilmiş bir tanımlayıcının bir açılış ve kapanış etiketi vardır. Eşleştirilmiş etiket bir kap oluşturur. Kapsayıcının içeriği açılış ve kapanış etiketleri arasındadır. Bu makaledeki örnekte HTML'deki tanımlayıcılar nedir? etiketini gördünüz. , yani bu eşleştirilmiş bir etikettir, bu etiketin içeriği "HTML'deki etiketler nedir?" metnidir. Başlangıcı etiket ve sonu .

    Yeni başlayanların eşleştirilmiş etiketler yazarken yaptığı ana hata, iç içe yerleştirmedeki karışıklıktır. Örneğin, doğru giriş budur:

    Kalın paragraf

    . Ve işte hata:

    Kalın paragraf

    , böyle bir düzene sahip bir HTML belgesi geçersiz kabul edilir. Yuvalamayı karıştırmamak için şunu yapın: eşleştirilmiş etiketler oluşturun, ardından diğerlerini bunların içine yerleştirin ve sonunda metni her iki etiketin içine yazın.

    Eşleştirilmiş etiketler nasıl doğru şekilde yazılır?

    .

    Etiketler açısından HTML5'teki yenilikler neler?

    HTML5, HTML4'ün bir uzantısıdır, dolayısıyla HTML4'teki tanımlayıcıların çoğunu veya tamamını korur ve kendi tanımlayıcılarını ekler. HTML5, siteyi ana bloklara bölmek için özel etiketler getirdi: başlık, menü, alt bilgi, kenar çubuğu ve içerik.

    Etiketlerin nasıl kullanılacağını öğrenmek neden önemlidir?

    Arama motorları Yandex ve Google sayfa düzenine duyarlıdır HTML belgeleri, bunların geçerlilik açısından kontrol edilmesi. Özel tanımlayıcılar vb. içine alınmış anahtar kelimeleri ararlar. Ancak bu bölüm bununla ilgili değil. Bu promosyon (SEO) için geçerlidir.

    Tüm HTML etiketlerini nasıl öğrenebilirim?

    Evet, oldukça fazla etiket var. Ancak onlara özel olarak öğretmeye gerek yoktur. Bir şeyler yazmaya çalıştığınız sürece, eşleştirilmiş ve tekli tüm tanımlayıcılar kolayca hatırlanacaktır. Zamanla elbette.