HTML Örnekleri - HTML Samples

HTML Metin Biçimlendirme

Bu bölümde aşağıdaki konular anlatılacaktır.

Başlık etiketleri <h1>...<h6>
Paragraf etiketi <p>...</p>
Ortalama <center>...</center>
Diğer etiketler <b>...</b>,<i>...</i>,<u>...</u>

HTML'de metin stillerini üç şekilde belirlenebilir.

1. Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (aynı satırda) biçimlendirme denir.

2. Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)

3. HTML dosyasının dışında başka bir stil dosyası oluşturarak til için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.

Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirlenir ve bu stiller istenilen metne uygulanabilir. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekleyebilmektedirler.

Burada konumuz birinci metoda göre biçimlendirmeyi öğrenmek için aşağıdaki kodları inceleyelim.

View Code HTML

<html>
<head>
<title>Başlık Etiketleri</title>
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
</body>
</html>

Yukarıdaki kodları çalıştırdığımızda aşağıdaki pencere ekrana gelir.

Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi html, head, title etiketlerini yerleştirdik. Sayfa başlığı (title) olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde (body) kısmına istediğimiz metinleri yazdık ve bu metinleri h1'den h6'ya kadar olan biçimlendirme etiketlerinin arasına aldık. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.

Diğer etiketleri kullanarak yeni bir HTML dosyası oluşturalım. Kodlar aşağıdaki şekilde olsun:

View Code HTML

<html>
<head>
<title>Başlık Etiketleri-2</title>
</head>
<body>
<h1><center>Sayfaya Hoşgeldiniz </center></h1>
<p>HTML etiketleri ile,</p>
Yazıları
<b>koyu</b>
<i>italik </i>
ve 
<u>altı çizili</u>
olarak yazabilisiniz.
</body>
</html>

Yukarıdaki örneklerde kullanılan etiketleri inceleyecek olursak;

<center>....</center> Aradaki metinleri sayfaya göre ortalar.

<b>....</b> Aradaki metni koyu (bold)yazar

<i>....</i> Aradaki metni eğik (italic) yazar.

<u>....</u> Aradaki metni altı çizili (underline) olarak yazar.

<h1>....<h6> Başlık (heading) etiketi. h1 en büyük, h6 en küçük.

<p>....</p> Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına yazılır.

Yukarıdaki kodları çalıştırdığımızda aşağıdaki pencere ekrana gelir.

email : info@kodornekleri.com