HTML Blok Düzey ve Satır İçi Elemanlar
Bu makale, HTML blok düzey ve satır içi elemanları açıklar.
Bu, blok düzeyindeki elemanlar ve satır içi elemanlar arasındaki farkları ve ana blok düzeyindeki ile satır içi elemanları açıklar.
YouTube Video
Blok seviyesinde öğeler ve satır içi öğeler
HTML, ekranda nasıl görüntüleneceğini belirleyen iki ana öğe kategorisine sahiptir: 'blok seviyesinde öğeler' ve 'satır içi öğeler'. Bu öğeler sayfa düzeninde önemli bir rol oynar ve nasıl konumlandırıldığını doğrudan etkiler. Burada, her bir öğenin özelliklerini ve kullanımını detaylı bir şekilde açıklayacağız.
Blok seviyesinde bir öğe nedir?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Blok seviyesinde öğeler genellikle sayfanın tüm genişliğini kaplar ve diğer öğelerden ayrı bir satırda görünür. Bu öğeler, içinde başka blok seviyesinde veya satır içi öğeler barındırabilir ve bir belgenin genel yapısını tanımlar.
Özellikler:
- Bu öğeler yeni bir satırda başlar ve mümkün olduğunca genişlik kaplar (genelde ana öğenin tüm genişliği).
- Diğer blok öğelerden dikey olarak ayrılırlar ve aralarına boşluk (margin) uygulanır.
- İçlerinde diğer blok veya satır içi öğeler barındırabilirler.
Burada, şu blok seviyesinde öğeler kullanılmıştır:.
<div>etiketi genellikle düzen oluşturmak için kullanılır.<p>etiketi bir paragraf tanımlamak için kullanılır.<h1>ile<h6>arasındakiler başlıkları tanımlamak için kullanılan öğelerdir.<h1>en büyük başlıktır ve<h6>en küçük başlıktır.<ul>etiketi sırasız bir liste oluşturur.<ol>etiketi sıralı bir liste oluşturur.<section>etiketi bir belgenin içinde bir bölümü tanımlar.
Satır içi elemanlar nedir?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Satır içi öğeler, diğer öğelerle aynı satıra yerleştirilir ve genellikle yalnızca içeriklerinin genişliği kadar yer kaplar. Bu öğeler metnin bir parçası olarak kabul edilir ve blok düzeyindeki öğelerden farklı olarak tüm satırı kaplamaz.
Özellikler:
- Öğeler aynı satırda görünür ve diğer satır içi öğelerle yan yana yerleştirilir.
- Genişlik, öğenin içeriği (metin veya resimler) tarafından belirlenir.
- Blok seviyesinde öğelerin içinde yer alabilirler ancak tam tersi mümkün değildir.
Burada, şu satır içi öğeler kullanılmıştır:.
<span>etiketi, metnin bir kısmını belirli bir stil ile vurgulamak için kullanılır.<a>etiketi bir bağlantıyı tanımlar.<img>etiketi görselleri yerleştirmek için kullanılan bir öğedir.<strong>önemli metni vurgular (genellikle kalın yazı ile görüntülenir).<em>vurgulanmış metni gösterir (genellikle italik olarak görüntülenir).
Blok seviyesinde öğeler ile satır içi öğeler arasındaki farklar
- Görüntüleme yöntemi: Blok seviyesinde öğeler yeni bir satırda görüntülenir ve sayfanın tüm genişliğini kaplar. Satır içi öğeler ise diğer öğelerle aynı satırda görüntülenir ve genişlikleri içeriklerine bağlıdır.
- Dahili öğelerin işlenmesi: Blok seviyesinde öğeler, hem blok seviyesinde hem de satır içi öğeler içerebilir. Ancak satır içi öğeler blok seviyesinde öğe içeremez.
- Düzen rolü: Blok seviyesinde öğeler bir sayfanın düzen yapısını oluşturmak için kullanılırken, satır içi öğeler metin ve bağlantılar gibi küçük öğeleri tanımlar.
Ayırıcı noktalar
Düzen oluşturma: Büyük bölümleri ve içerik bloklarını tanımlamak için <div>, <section>, <article> gibi blok seviyesinde öğeleri kullanın.
Metin süslemeleri ve bağlantılar: Metinlerin belirli bölümlerini süslemek veya bağlantılar eklemek için <span>, <a>, <strong>, <em> gibi satır içi elemanları kullanın.
Blok düzeyindeki ve satır içi elemanların karıştırılması
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html><main>,<header>, ve<section>gibi blok seviyesinde öğeler kullanılır ve genellikle yeni bir satırda, ebeveyn öğelerinin tüm genişliğini kaplayarak görüntülenirler.<a>,<strong>,<span>, ve<img>gibi satır içi öğeler kullanılır ve blok seviyesi öğelerin içinde tam genişliği kaplamadan satır içinde yerleştirilirler.
Satır içi elemanları blok düzeyindeki elemanların içine dahil etmek yaygın bir örüntüdür. Örneğin, bir paragraf (<p>) içinde bağlantılar (<a>) veya vurgu (<strong>) eklemek yaygındır. Ancak, satır içi elemanların içerisine blok seviyesindeki elemanlar yerleştirilemeyeceği için, bunları uygun şekilde kullanmak önemlidir.
Özet
Blok seviyesindeki elemanlar ve satır içi elemanlar, her biri kendi rolüne sahip HTML elemanlarının iki temel türüdür. Blok seviyesindeki elemanlar, sayfa düzeninin temelini oluştururken, satır içi elemanlar içerdikleri içeriği süslemek ve düzenlemek için kullanılır. Bu iki eleman türünü anlamak ve doğru bir şekilde kullanmak, etkili bir HTML kodlamasını mümkün kılar.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.