Paragraf ve Hizalama İşlemleri

Herhangi bir text editöründe, metni yazarken satır sonuna gelindiğinde enter tuşuna basarak yazıyı bir alt satıra almak ya da kullanılan text editörün kelime(sözcük) sarma(word wrap) özelliğini devreye sokarak yazmaya çalışılsa da, Internet Explorer uygulamasında görüntülenen şeklinde değişiklik olmaz.
Örneğin metin ağırlıklı bir HTML dosyasını Şekil-1.'de görüldüğü gibi Not Defteri text editörü uygulamasında yazarak, paragrafuygulaması.html adıyla kaydedildiğini varsayalım.

Şekil 1. Not Defteri uygulamasında yazılan paragraf  örnekleri
Dosyayı çalıştırdığımızda, Internet Explorer tarayıcı uygulamasındaki görünümü, Şekil-2.'deki gibi olacaktır.

Şekil 2. paragrafuygulaması.html dosyasının Internet Explorer görünümü
Paragrafları düzenleme işleminde, <P>  tag'ı kullanılır. Paragrafın bittiği yere ya da diğer paragrafın başına <P> paragraf tag'ı yazılır. Bu durum Şekil-3.'de görüntülenmiştir.

Şekil 3. <P> tag'ları ekleme sonrası görünüm
Değişiklik yapılan paragraf uygulaması .html dosyasını kaydedip, Internet Explorer uygulamasında tekrar görüntülendiğinde Şekil-4.'de ki  gibi olur.

Şekil 4. IE uygulamasında <P> tag sonrası görünüm
<P> paragraf tag'ı örnektende görüldüğü gibi sonlandırılmayabilir(</p>), paragraf tag'ı kullanımında yazıların sayfanın sol kenarına, ortasına, sağ kenarına ya da  ve iki kenara hizalanması söz konusu  olduğunda aşağıdaki parametreler ile birlikte kullanılır.
<p align=#>.....</p> #=left, center, right, justify
<p align=center>.........</p>
</p> tag'ına kadar olan tüm metin ortalanacaktır. Eğer kapatılmazsa tüm doküman ortalanacaktır.
<p align=left>..............</p>        
</p> tag'ına kadar olan tüm metin sol kenara hizalanır.
<p align=right>............</p>
</p> tag'ına kadar olan tüm metin sağ kenara hizalanır.
<p align=justify>..........</p>
</p> tag'ına kadar olan tüm metin iki kenara hizalanır.
Paragraf hizalama paragrafları kullanılarak paragrafuygulaması.html dosyasının son şekli, Şekil-5.'de gösterilmiştir.

Şekil 5. Paragraf hizalama parametreleri kullanımı
Paragraf hizalama paragrafları kullanılarak paragrafuygulaması.html dosyası, IE'da görüntülendiğinde son şekli, Şekil-6.'da ki gibi olur.

Şekil 6. IE uygulamasındaki görünüm

<P align="left" style="text-align:justify"> .....</P>
ya da
<P class=MsNormal style="text-align:justify" align="left">.... </P>
tag ve parametreleriyle(class, style) paragraf iki yana yasla işlemleri en düzgün biçimde yapılır. Bu durum, Şekil-7. ve 8'de gösterilmiştir.

Şekil 7.  Ortala ve İki yana yaslı(justıfy) biçimi

Şekil 8.  Ortala ve İki yana yaslı paragraf görünümü
Kolay Sıralama(Numaralı ve Madde İmli Listeler)
HTML dilinde, oluşturulan dökümanlarda madde imli ve numaralı listeler oluşturmak mümkündür. 
Siyah noktalı listeleme(Unordered List-Sırasız Listeler)
<ul><li>...</ul>
Sırasız listeler, liste ögelerinin başına rakam ya da harf değilde içi boş bir daire(disc), içi dolu bir daire(circle) ya da kare(square) şekillerinden biri getirilerek oluşturulan listelerdir.
Bu tip listede de listeleme yaparken <ol> tag’ı yerine <ul> Tag’ı kullanılır, Listenin ögelerinin başına ise, <li> (list item) etiketi getirilir. <ul> tag’ı için parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare). Compact parametresi ise listenin mümkün olan enaz satır aralığına sahip olmasını sağlar. Compact parametresi sıralı, sırasız listelerde kullanılır.
 

<ul type="square">
<li>Today
<li>Tomorrow
</ul>

• Today
• Tomorrow

  <ul>
<li>Today
<li>Tomorrow
</ul>

• Today
• Tomorrow

<ul type="square"><li>....<ul>
Kare ya da içi boş bir daire için type parametresi kullanılır.
Sıralı Listeleme(Ordered List)
<ol><li>...</ol>
Başında rakam ya da harf bulunan ve belli bir düzeni takibeden listeleme türüdür.
Start parametresi ile numaralı listenin başladığı rakam ya da harf belirtilir. Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır.
Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) etiketi getirilir.
Bu etikette <br> etiketi gibi sonlandırılmıyor. <ol> etiketine parametreler eklenebilir. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağı (start) belirtilir.
Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.
<ol type="A" start="3"><li>....</ol>

<ol type="A" start="3">
<li>Today
<li>Tomorrow
</ol>

• Today
• Tomorrow

 

<ol type="I">
<li>Today
<li>Tomorrow
</ol>

1. Today
2. Tomorrow

  <ol>
<li>Today
<li>Tomorrow
</ol>

1. Today
2. Tommorow

Tanımlama  Listeleri(Definition Lists)
Liste ögelerinin başına rakam, harf ya da herhangi bir şey gelmez. Bunların yerine liste ögeleri sayfada biraz daha içten(girintili) görüntüleniyor. 
Bu listelemede kullanılan tag’lar;
<dl>...</dl>, <dd>...</dd>, <dt>...</dt>
Listenin maddelerini belirtmek için kullanılan <li> tag’ının yerini burada <dd> ve <dt> tag’ları alır.
Aynı şekilde <ol>...</ol> veya <ul>...</ul> tag’ları arasına alınan liste bu sefer <dl>... </dl> arasına yazılır. Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanılabilir.
ÖRNEK UYGULAMA:
<html>
<head> </head>
<body>
<font face="verdana" size="4" color="red">Statik Web Sayfası Tasarımı?</font>
<dl compact>
<dt><font size="3" color="blue">HTML nedir?</font>
<dd><font size="2" color="black">HTML (HyperText Markup Language-Hareketli-Metin İşaretleme Dili) <br> tarayıcılarla görebileceğimiz, <br> internet belgeleri oluşturmaya yarayan bir dildir..</font>
<dt><font size="3" color="blue">HTML'de Temel Unsurlar</font>
<dd><font size="2" color="black">Bu dilde binary veya hexadecimal kodlar yok. <br> HTML dökümanı oluşturmak için ihtiyaç olan şey bir editör. <br>Metin tabanlı, kod yazmayı gerektiren editörler.</font>
<dt><font size="3" color="blue">Listeler</font>
<dd><font size="2" color="black">Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmayı, <br>sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmayı sağlar...</font>
</dl>
</body></html>

Web tarayıcısındaki görünüm aşağıdaki gibi olacaktır.
işaret stili <li type=#> #=disk, circle, square
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>

• ONE

• TWO
• THREE

 

<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>

• ONE-ONE
• ONE-TWO

  Sıralı Stil <li type=#> #=A, a, I, i, 1
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>

• ONE-ONE
• ONE-TWO

 

<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>

• ONE-ONE
• ONE-TWO

  <ol><li type=I>ONE-ONE
<li>ONE-TWO</ol>

• ONE-ONE
• ONE-TWO

<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>

• ONE-ONE
• ONE-TWO

Numarasına bakarak listeleme
<ol start=#>
#=numara
<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-ONE
</ol></ol>

5. ONE-ONE
6. ONE-TWO

10. TWO-ONE

11. TWO-TWO