Kod Görüntüleme, Alıntılar ve Listelerle İlgili Etiketler

Bu makale, kod görüntüleme, alıntılar ve listelerle ilgili etiketleri açıklar.

Bu, HTML'de kaynak kodu, alıntılar, açıklamalar ve listelerin nasıl yazılacağını açıklar.

YouTube Video

Kod görüntüleme ile ilgili etiketler

<code> etiketi

1Inline code example: <code>let x = 10;</code>

• <code> etiketi, bir HTML belgesinde kod veya program parçalarını göstermek için kullanılan bir satır içi öğedir.
• Varsayılan olarak, kodun okunabilirliğini artıran tek aralıklı bir yazı tipinde görüntülenir.

<pre> etiketi

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre> etiketi, bir HTML belgesinde metni orijinal formatında görüntülemek için kullanılır. Bu etiket, boşlukları ve satır sonlarını koruyarak metnin orijinal formatını muhafaza eder. Genellikle program kodu, şiir veya metin sanatı gibi formatın korunması gereken içeriklerin görüntülenmesi için kullanılır.

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• <pre> etiketinde boşluklar korunur. Bu nedenle, kapanış etiketinden önce bir boşluk varsa, bu örnekte olduğu gibi sonunda boş bir satır görünür.

<samp> etiketi

1Sample system output: <samp>Error: Invalid input.</samp>

• <samp> etiketi, bir bilgisayar programının çıktısını temsil etmek için kullanılan bir HTML etiketidir. Bir program veya sistemden gelen çıktı veya mesajları belirtmek için kullanılır.

<kbd> etiketi

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• <kbd> etiketi, kullanıcı girişini temsil etmek için kullanılan bir HTML etiketidir. Klavye girişi veya kısayol gibi komut girişlerini göstermek için kullanılır.

<var> etiketi

1Variable example: <var>x</var> = 5;

• <var> etiketi, bir programdaki veya denklemlerdeki değişkenleri temsil etmek için kullanılır. Matematiksel formüllerdeki değişken adlarını veya değişkenleri vurgulamak için kullanılır.

Alıntılar vb. için kullanılan etiketler

<blockquote> etiketi

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• <blockquote> etiketi, uzun alıntıları veya diğer kaynaklardan alınan metinleri temsil etmek için kullanılır ve genellikle blok seviyesinde görüntülenir.

<q> etiketi

1This is a short quote: <q>Short quote example.</q>

• <q> etiketi, kısa alıntıları temsil etmek için kullanılan bir satır içi öğedir. Bu etiket, bir metin veya cümlenin bir kısmını alıntı olarak işaretlemek için kullanılabilir. <q> etiketi içine alınmış metin genellikle tırnak işaretleriyle görüntülenir. <q> etiketi iç içe kullanılabilir. Bu durumda, iç alıntılar için genellikle farklı türde tırnak işaretleri kullanılır.

<cite> etiketi

1Reference to a book: <cite>The Great Gatsby</cite>

• <cite> etiketi, bir alıntının veya referansın kaynağını belirtmek için kullanılan bir satır içi öğedir. Genellikle eser başlıkları, makaleler, belgeler, web sayfaları veya kitaplar gibi bir eserin kaynağını belirtmek için kullanılır.

<address> etiketi

1<address>123 Main Street, Springfield, USA</address>

• <address> etiketi, bir belge veya bölümle ilgili yazarın veya sahibinin iletişim bilgilerini temsil etmek için kullanılır. Bu etiket genellikle e-posta adresleri, telefon numaraları, fiziksel adresler ve benzeri bilgileri içerir.

<time> etiketi

1<time datetime="2024-12-04">December 4, 2024</time>

• <time> etiketi, belirli bir zaman noktasını, bir süreyi veya tekrarlayan bir zamanı temsil etmek için kullanılır. Bu etiket, belgeye anlamsal anlam katmak için tarihleri ve zamanları içerebilir.

<data> etiketi

1<data value="2024">Current Year</data>

• <data> etiketi, insanlar tarafından okunabilir içerikleri makine tarafından yorumlanabilir değerlerle ilişkilendirmek için kullanılır. Bu etiket, verinin programlar tarafından kolayca işlenebilecek şekilde işaretlenmesi için kullanışlıdır.

<details> ve <summary> Etiketleri

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• <details> etiketi, daraltılabilir ve genişletilebilir bir widget oluşturur. <summary> etiketi ile birlikte kullanarak, daha fazla detayı göstermek için tıklanabilir bir bölüm oluşturabilirsiniz; genellikle 'Devamını oku' gibi etkileşimli görüntüler için kullanılır.

Liste görüntüleme için kullanılan etiketler

<ul> etiketi

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• Bu etiket, sırasız listeler oluşturmak için kullanılır. Listedeki her bir öğe <li> etiketi ile tanımlanır. Varsayılan olarak, her liste öğesinin önünde bir siyah nokta görüntülenir.

<ol> etiketi

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Bu etiket, sıralı bir liste oluşturmak için kullanılır. Listedeki her bir öğe <li> etiketi ile tanımlanır. Varsayılan olarak, öğelerin sırasını belirtmek için numaralar görüntülenir.

<dl> etiketi

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• Bu etiket, terimler ve tanımlar veya isimler ve detaylar gibi çiftlerden oluşan bir liste oluşturmak için kullanılır. Liste öğeleri <dt> ve <dd> etiketleri ile tanımlanır. Terim veya isim <dt> etiketinde, tanım veya açıklama ise <dd> etiketinde yazılır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video