Metin etiketleri

Paragraf

Etiket <p> - küçük cümle öğelerini gruplamak, birbirinden ayırmak ve daha fazla şekillendirmek için evrensel bir kap. Varsayılan olarak, paragraf bir blok elemanıdır, yani yeni bir satırda başlar ve CSS'de değiştirilebilen dikey bir tamamlayıcıya sahiptir.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
  eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
  asperiores non temporibus ut nisi minima?
</p>

Genellikle, gönderilecek metnin kendisinin henüz mevcut olmaması durumunda, etiketi boş metinle doldurmak gerekir. Bunu yapmak için özel bir ikame sembolü kullanılır.

SIDES

VSCode düzenleyicisinde, bir HTML belgesine lorem10 yazabilir ve ardından Tab tuşuna basabilirsiniz. Bu, 10 kelimelik bir metin dizisi oluşturacaktır. Herhangi bir sayı 10 yerine girilebilir.

Başlıklar

Etiket grubu <h1>...<h6> - kendilerini takip eden içerik bölümünün anlamını belirten çeşitli seviyelerde anlamsal bölüm metin başlıklarını tanımlar. Metinsel içeriği yapılandırmak için bir araçtır.

<h1> etiketi çoğunlukla yalnızca bir kez, ana sayfanın başlığı olarak kullanılır. Geri kalan başlıklar istediğiniz kadar kullanılabilir, ancak hiyerarşiye göre her zaman doğru şekilde kullanılmalıdırlar.

SIDE

Arama motorları başlıklara özellikle dikkat eder, bu nedenle bu etiket grubunun doğru kullanımı son derece önemlidir. Başlık düzeyini mizanpajdaki metnin boyutuna göre belirlemeyin. Tüm büyük metinler başlık içermez. Başlık, içerik bölümü başlığı ile kastedilen şeydir.

Edebiyat

Listeler, koleksiyonlarınızı organize etmenize, görsel ve kullanıcı dostu bir şekilde sunmanıza olanak tanır. Liste, alt öğeleri yalnızca liste öğeleri, yani <li> etiketleri olabilen bir kapsayıcıdır.

<ol> etiketi - numaralı (sıralı) bir liste, yani listenin her bir öğesini oluşturur numaralandırılmıştır. Tarayıcı, öğeleri sırayla otomatik olarak numaralandırır ve böyle bir listeden bir veya daha fazla öğeyi silerseniz, kalan sayılar otomatik olarak yeniden hesaplanır. Elemanların numaralandırılması özel liste nitelikleri kullanılarak kontrol edilebilir.

Aktiviteleri belirli bir sıraya göre (örneğin yemek tarifi) görüntülemek için kullanılır.

<h1>Çay nasıl yapılır</h1>
<p>
   İsteksiz olanlar için ayrıntılı talimatları tekrarlayın, başaracaksınız!
</p>

<ol>
   <li>Suyu kaynatın</li>
   <li>Çayı bir bardağa dökün</li>
   <li>Bir bardağa kaynar su dökün</li>
   <li>10 dakika bekledikten sonra içebilirsiniz</li>
</ol>

Etiket <ul> - her öğesi küçük bir karakterle (madde işareti) başlayan madde işaretli (sırasız) bir liste oluşturur. CSS ile madde işareti kaldırılabilir veya değiştirilebilir.

Bir kümeyi herhangi bir sıraya yerleştirmek için kullanılır, örneğin bir tatil köyleri listesi.

<h1>En popüler tatil köyleri</h1>
<p>Uzmanlar bu yıl aşağıdaki yerleri ziyaret etmenizi öneriyor.</p>

<ul>
   <li>Tunus</li>
   <li>Türkiye</li>
   <li>Yunanistan</li>
   <li>Mısır</li>
</ul>

DİKKAT

Spesifikasyona göre, <ul> ve <ol> etiketlerine yalnızca liste öğeleri (<li> etiketleri) yerleştirilebilir. <li> etiketlerinin içine başka etiketler yerleştirilebilir.

İç içe listeler

Çok seviyeli bir liste oluşturmak basittir — bir liste öğesine bir liste daha koyarız. Bu genellikle çok seviyeli menüler oluşturmak için kullanılır.

<ul>
   <li>
     Bilgisayarlar ve aksesuarlar
     <ul>
       <li>İşlemciler</li>
       <li>Monitörler</li>
       <li>Grafik kartları</li>
     </ul>
   </li>
   <li>
     Evde bulunan malzemeler
     <ul>
       <li>Buzdolapları</li>
       <li>TV'ler</li>
       <li>Çamaşır makineleri</li>
     </ul>
   </li>
   <li>
     Ev aletleri
     <ul>
       <li>Koltuklar</li>
       <li>Yataklar</li>
       <li>Elektrikli şömineler</li>
     </ul>
   </li>
</ul>

Bağlantı

<a> etiketi - tıkladıktan sonra bağlantılar ve metin oluşturmak için kullanılır. başka bir sayfaya gitmek, dosya indirmek vb. Bağlantı metni tarayıcıda altı çizili olarak görüntülenir, yazı tipi rengi mavidir ve bağlantının üzerine geldiğinizde fare imleci görünümü değiştirir.

Bağlantı adresi gerekli href="adres" özelliğinde belirtilir. Adres, bir sayfaya, dosyaya veya herhangi bir kaynağa işaret edebilen URL'dir.

<a href="https://google.com">Google ana sayfasına bağlantı</a>

target ve rel öznitelikleri

Varsayılan olarak, bağlantı geçerli tarayıcı sekmesinde açılır. target="value" özniteliği, bağlantılı belgenin hangi sekmede açılacağını belirler. Eğer değer _blank ise, sayfa yeni bir tarayıcı sekmesinde açılacaktır.

rel niteliği, href niteliğini geçerli belge ile bağlantılı belge arasındaki ilişki hakkında bilgi ile tamamlar ve target="_blank" niteliği ile birlikte kullanılır.

<!-- Harici kaynağın bağlantısı geçerli sekmede açılır -->
<a href="https://www.facebook.com/">Facebook</a>

<!-- Dahili kaynağa bağlantı yeni sekmede açılır -->
<a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
  Facebook
</a>

download niteliği

Bağlantının href bölümünde bir dosyanın yolu belirtilmişse, tarayıcı bu tür dosyaları işleyebiliyorsa dosyayı geçerli pencerede açmaya çalışacaktır. Bu genellikle resimler ve PDF dosyaları için geçerlidir.

download="filename" niteliği, tarayıcıya belirtilen kaynağın açılmaması gerektiğini, ancak kullanıcı bağlantıyı tıkladığında yükleneceğini söyler. Özniteliğin değeri yüklenecek dosyanın adını belirtir, yani indirme sırasında ad değiştirilebilir. Öznitelik bir değer belirtilmeden de kullanılabilir, bu durumda orijinal dosyanın adı kullanılır.

<!-- Link do pobrania pliku -->
<a href="/ścieżka/к/cv.pdf" download>CV İndir</a>

Özel değerler href

Bağlantılar yalnızca başka sitelere gitmenize ve dosya indirmenize değil, aynı zamanda telefon görüşmeleri yapmanıza, mesaj göndermenize veya Skype aramaları yapmanıza da olanak tanır.

<!-- Link do numeru telefonu -->
<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Link do adresu e-mail  -->
<a href="mailto:example@mail.ru">example@mail.ru</a>

Çapa bağlantısı

Çapa bağlantı, geçerli sayfada gezinti oluşturmak için kullanılır. Örneğin, bir bölüme hızlı bir şekilde atlamak için (bu materyallerde olduğu gibi). Böyle bir bağlantıya tıklandığında, tarayıcı sayfayı yeniden yüklemeden bağlantıya kaydıracaktır.

Bir bağlantı linki oluşturmak için, sayfayı kaydırmak istediğiniz etikete id niteliğini — benzersiz bir tanımlayıcı — eklemeniz gerekir. Öte yandan, bağlantıdaki href niteliğini # ile başlayan bir değere ve ardından belirtilen öğe tanımlayıcısına ayarlayın.

Düğme

JavaScript kullanılarak hayata geçirilen etkileşimli bir öğe. Örneğin, bir açılır pencereyi açıp kapatmak, bir mobil menüyü değiştirmek veya bir form göndermek için bir düğme. Type niteliği açıkça belirtilmelidir. Varsayılan değeri — submit tir, ancak çoğu zaman button değerine ihtiyaç duyarız. Evet, button tipi bir düğme, böyle bir özellik.

<button type="button">Modal pencereyi aç</button>

YARDIM

Bağlantı ve düğmeyi karıştırmamak önemlidir. Eğer bir arayüz elemanına tıkladığınızda bir adrese gidiyorsanız, yani bir "href" varsa, bu bir bağlantıdır. Eğer tıkladığınızda sayfa yeniden yüklenmeden veya yönlendirilmeden bir şey oluyorsa, bu kesinlikle bir düğmedir.

lang özniteliği

Bir sayfa farklı dillerde metin içeriyorsa, yardımcı teknolojiler için daha erişilebilir hale getirmek amacıyla, lang özniteliği yalnızca tüm belge için değil, aynı zamanda tek tek etiketler için de ayarlanabilir.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Çerez kılavuzu" />
    <title>Kurabiyeler çok lezzetli!</title>
  </head>
  <body>
    <p>Kullanım kılavuzu</p>
    <p lang="en">Operating instructions</p>
    <p lang="fr">Manuel d'utilisation</p>
  </body>
</html>

NOT

Bu bir olasılıktır, bir tavsiyedir, bir gereklilik değildir. Yardımcı teknolojiye uygun düzenlemeler yalnızca talep üzerine yapılır.