Html ile Web İşlemleri 11 - P, B, Strong, I ve Em Etiketleri

METİN BİÇİMLENDİRME ETİKETLERİ

1. <p> Etiketi

<p> etiketi, paragraf tanımlamak için kullanılır. </p> kapama etiketi ile kullanılır. <p>… </p>

etiketleri arasında kalan metin paragraf blokunu oluşturur. Art arda <p> bloku kullanıldığında tarayıcılarda varsayılan olarak üstte ve altta kenar boşluğu olan bir paragraf stili uygulanır. Günümüzdeki tarayıcılar, paragraf blokları yanlış açılıp kapatıldığında da paragrafı düzgün yorumlar fakat HTML kod blok sayısı arttıkça kodun okunabilirliği azalır, HTML kodlarındaki hataların tespiti zorlaşır (Tablo 3.2).

Tablo 3.2: <p> Etiketi Kullanımı

Doğru Kullanım	Yanlış Kullanım
<p>Bu birinci paragraf</p> <p>Bu ikinci paragraf</p>	<p>Bu birinci paragraf <p>Bu ikinci paragraf</p></p>

2. <b> ve <strong> Etiketleri

Html belgesi içindeki yazıları belirgin yapmak için <b> veya <strong> etiketleri kullanılır. <strong> etiketi, anlamsal etikettir. Görsel açıdan <b> ve <strong> etiketleri arasında bir fark yoktur. Mantıksal olarak daha önemli içerikler için <b> etiketi yerine <strong> kullanılır. <strong> etiketi, arama motorlarına bu metnin önemli olduğunu bildirir.

Sıra Sizde

Görsel 3.12’de tarayıcıdaki görüntüsü verilen HTML belgesini oluşturunuz. Aşağıda kutucuk içinde verilen HTML komutları arasındaki farkları arkadaşlarınızla tartışınız.

<h2>BİZDEN HABERLER</h2>
<p>MESLEKİ EĞİTİMDE <strong> 1000 OKUL İYİLEŞTİRME PROJESİ </strong> KAPSAMINDAKİ
<mark> TÜM OKULLARIN </mark> YÖNETİCİLERİNE <b> BİLGİLENDİRME TOPLANTILARI
</b> YAPILDI</p>

Görsel 3.12. <b> ve <strong> etiketi kullanımı

3. <i> ve <em> Etiketleri

HTML belgesindeki yazıları eğik (italic) yazmak için <i> veya <em> etiketleri kullanılır. <em> etiketi, anlamsal etikettir. Görsel açıdan <i> ve <em> etiketleri arasında bir fark yoktur. Mantıksal olarak daha önemli içerikler için <i> etiketi yerine <em> kullanılır.

Sıra Sizde

Görsel 3.13’te tarayıcıdaki görüntüsü verilen HTML belgesini oluşturunuz. Bu HTML komutları arasındaki farkları arkadaşlarınızla tartışınız.

<h2>Bilişim Terimleri </h2> <b>text-formatting language:</b> <em> metin biçimlendirme
dili,</em> [07.01.28], Metnin ne şekilde biçimlendirileceğini belirtmek için tasarlanmış

problem yönelimli dil. ÖRNEKLER: <i> HTML, nroff </i>

Görsel 3.13. <i> ve <em> etiketi kullanımı

TABLOLAR

5.1. <TABLE>

Hazırlamış olduğunuz web sayfanıza tablo eklemek için kullanılan etikettir. Bir tablo <Table> etiketi ile başlayıp </Table> etiketi ile biter. Tablolar satır ve sütunlardan oluşur. Satırların ve sütunların kesiştikleri kutuya “hücre” adı verilir.

Aşağıdaki örnekte 1x1’lik (1 satır ve 1 sütundan oluşan) bir tablo gösterilmiştir.

5.1.1. TR

Tabloda satır oluşturmak için kullanılır.

Örnek 1:

ÖĞRENME FAALİYETİ-5

AMAÇ

ARAŞTIRMA

Örnek 2:

5.1.2. TD

Tabloda sütun oluşturmak için kullanılır.

Örnek:

5.1.6 Width

Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır.

<table width=”200”> Tablo genişliğini belirlemek için kullanılır.

<td width=”200”> Hücre genişliğini belirlemek için kullanılır.

5.1.7. Height

Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır.

<table height=”200”> Tablo genişliğini belirlemek için kullanılır.

<td height=”200”> Hücre genişliğini belirlemek için kullanılır.

Örnek: