Bu sayfa, HTML Metin ve Görünüm Düzenleme Etiketleri Örneklerini içerir. HTML derslerine yeni başlayanlar için ilk ve önemli konulardan biri de HTML içindeki metin düzenleme etiketleridir. Bu yazıda metin düzenleme etiketleri ve ekran çıktılarını bulacaksınız. Kodları kopyalayıp bir HTML sayfasında çalıştırabilirsiniz.
Başlık Etiketleri
Hx: H1 (en büyük) etiketinden başlayıp h6 (en küçük) etiketine kadar bölüm başlıklarını vermek için kullanılan etikettir.
1 2 3 4 5 6 7 8 |
<h1>Bu Ana Başlık</h1> <h2>Bu 2. Seviye Başlık </h2> <h3>Bu 3. Seviye Başlık</h3> <h4>Bu 4. Seviye Başlık</h4> <h5>Bu 5. Seviye Başlık</h5> <h6>Bu 6. Seviye Başlık</h6> |
Paragraf Etiketi
Paragraf: Yazılardaki paragrafları oluşturmak için <p> etiket kullanılır.
1 2 3 4 5 6 7 8 |
<p> Bir paragraf, kendine yeten bir söylem birimi oluşturan bir veya daha fazla cümleden oluşur. Bir paragrafın başlangıcı yeni bir satır ile gösterilir. </p> <p> Metin, metin birimlerine bölündüğünde anlaşılması daha kolaydır. Örneğin, bir kitabın bölümleri olabilir. Bölümlerde alt başlıklar olabilir. Her bir başlık altında bir veya daha fazla paragraf olacaktır. </p> |
Kalın Etiketi (Koyu Renk)
B: Bir metin içinde bir değeri kalın göstermek için kullanır. Eğer bir etiket önemli ve vurgulanmak isteniyorsa b etiketi yerine strong yada başlık grubu etiketlerden biri kullanılmalıdır. B etiketi sadece yazıyı kalın yapmak için kullanılır.
1 2 3 4 |
<p> Bu kelimeyi <b> kalın </b> yaptık.</p> <p> Bir ürün açıklamasında, bazı <b> temel özellikler </b> kalın yapmak için kullanılır. </p> |
İtalik (Eğik) Etiketi:
i: Metin düzenlemesinde istenilen değeri eğik hale getirmek için i etiketi kullanılır.
1 2 3 4 |
<p> İşte bu şekilde bir kelime <i> italik </i> görünür hale getiriyoruz. </p> <p> Bu bir patates <i> Çimlendirme Tablosudur</i>. </p> |
Üst simge ve Alt simge
Üst simge oluşturmak için <sup> etiketi kullanılır.
Alt simge oluşturmak için <sub> etiketleri kullanılır.
1 2 3 4 |
<p> Enerji formülü E = MC <sup> 2 </sup> olarak gösterilemktedir.. </p> <p> 2010 yılında atmosferdeki CO <sub> 2 </sub> miktarı 2 pppm arttı.</p> |
Beyaz boşluk (White Space)
HTML içinde beyaz boşluk olarak ifade edilen boşlukların görünüm üzerinde hiç bir etkisi yoktur. Ne kadar boşluk olursa olsun. Boş alanlar sadece tek boşluk olarak gösterilmektedir.
HTML içinde birden fazla boşluk bırakmak için tek boşluk (single space) olarak ifade edilen ifadesi kullanılır.
1 2 3 4 5 6 7 8 |
<p> Ay, Dünya'dan uzaklaşıyor. </p> <p> Ay, Dünya'dan uzaklaşıyor. </p> <p> Ay, Dünya'dan uzaklaşıyor. </p> |
Satır Kesme
br:Bir paragraf içinde bir alt satıra geçmek için <br> etiketi kullanılır. <br> etiketi tanımlandığı bölümden sonraki yazılar bir alt satırdan devam eder.
1 2 3 4 5 6 7 8 |
<p> Dünya'ya <br> uzaydan<br> hergün, 100 tondan falza toz<br> düşmektedir. </p> |
Yatay Çizgi
hr: paragraf düzeyindeki tematik bir kopuşu temsil eder, ör. Bir öyküde bir sahne değişikliği veya bir referans kitabın bir bölümünde bir başkasına geçiş.
1 2 3 4 5 6 7 |
<p> Venüs, saat yönünde dönen tek gezegendir. <hr> Jüpiter,diğer bütün gezgenlerin birleşiminden daha büyüktür. </p> |
Güçlü (Strong)
strong: İçeriği içindeki ifadenin güçlü ve önemli olduğunu ifade etmek için kullanılır. Bir ifadenin diğer ifadelerden daha fazla dikkate değer olduğunu göstermek için strong etiketi kullanılır.
1 2 3 4 5 6 |
<p>İnsan DNA'sı<strong> %50 oranında</strong> muz DNA'sı ile aynıdır.</p> <p> Plüton keşfedildiği tarihten itibaren bir kez bile güneşin etrafında tam tur dönmemiştir.<strong> Bu yüzden artık bir gezegen olarak kabul edilmiyor.</strong> </p> |
Vurgu (emphasis)
em: Bir paragraf içindeki bir ögenin vurgulanması için kullanılır.
1 2 3 4 5 |
<p><em> Kediler </em> sevimli hayvanlardır. </p> <p><em>Oku baban gibi </em> eşek olma</p> <p>Oku babangibi<em> eşek olma</em> </p> |
Alıntı (Blockquote):
Blockquote , başka bir kaynaktan alıntılanan içeriği, isteğe bağlı olarak bir footer veya cite öğesi içinde olması gereken bir atıf ile ve isteğe bağlı olarak ek açıklamalar ve kısaltmalar gibi satır içi değişikliklerle temsil eder.
1 2 3 4 5 6 7 |
<p> <blockquote> Hayat, bisiklete binmek gibidir. Dengede kalmak için hareket etmek zorundasınız. <cite>Albert Einstein</cite> </blockquote> Bu yüzden çalışmak ve kendimizi geliştirmek zorundayız. </p> |
Kısaltmalar
abbr: Kısalatmayı göstermek için kullanılır. Kısaltmanın tam adını title niteliği verilerek yazılabilir.
1 2 3 4 |
<p><abbr title="Türkiye İstatistik Kurumu">TÜİK</abbr> verilerine göre Türkiye nüfusu 2016 yılında toplam 79.814.871 kişidir.</p> <p><abbr title="Profasör">Prof</abbr> Stephen Hawking teorik bir fizikçi ve kozmologdur.</p> |
Atıf (Cite)
Cite: Bir çalışmaya, başlığı ya da yazarın adına (kişi, kişi ya da kuruluş) atıfta bulunmak için kullanılır.
1 2 3 |
<p>Stephen Hawking'in <cite>Zamanın Kısa Tarihçesi</cite> dünya çapında on milyondan fazla sattı.</p> |
Tanımla
dfn:Bir terimin tanımlayıcı öğresini temsil eder.
1 2 3 |
<p><dfn>Çene Kası</dfn> bir kaç tane kas grubundan oluşur ve insan vücudundaki en güçlü kastır.</p> |
Adres
address: En yakın makale yada öge atası için adres bilgisini ifade eder.
1 2 3 4 5 6 |
<address> <p><a href="mailto:iletisim@yb.com">iletisim@yb.com</a></p> <p>Barbaros Bulvarı Çamlıca İstanbul</p> </address> |
Ekle ve Sil
ins, del:Bir yazının del etiketi ile paragraf içinden çıkarıldığını ifade edebilirsiniz. Yeni bir yazıyı da ins etiketi ile de paragraf içine sonradan ekleyebilirsiniz.
1 2 3 |
<p>Bu onun sahip olduğu<del> en kötü</del> <ins>en iyi</ins> fikirdi.</p> |
çizili (s)
s:artık doğru olmayan ya da artık alakalı olmayan içeriği temsil eder.
1 2 3 4 |
<p>Dizüstü bilgisayar:</p> <p><s>2500₺</s> 1900₺ ye düştü</p> |
Add Comment