Metin Biçimleme
Bu bölümde öğreneceğimiz etiketler:Başlık etiketleri: <h1>...<h6>
Paragraf etiketi: <p>...</p>
Ortalama: <center>...</center>
Diğer etiketler:
<b>...</b>,<i>...</i>,<u>...</u>
HTMLde metin stillerini üç şekilde
belirleyebiliriz:
Düzenlemek istediğimiz metnin hemen önüne
koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi )
biçimlendirme denir.
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 )
HTML dosyasının dışında başka bir stil
dosyası oluşturarak stil 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 belirleniyor ve bu
stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus
da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu
Internet Explorer ve Netscapein son sürümleri (yorum farklılıkları ile beraber )
destekliyorlar.
Burada konumuz birinci metoda göre
biçimlendirmeyi öğrenmek.
Başlık etiketlerinden başlıyoruz. Notepadi
açıyor ve şu kodları yazıyoruz;
| Kod Alanı: | |
|
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ığı 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.
Şimdi de kendiniz <h1>...<h6>
etiketlerinin yerlerini değiştirerek alıştırma yapın ve tam olarak bu işin nasıl
olduğunu kavrayın. Hatta iyi bir deneme-yanılma olması açısından örneğin her
seferinde değişik bir etiketi veya sonlandırma etiketini HTML kodundan silerek
ne gibi etkiler oluşturduğunu gözlemleyin. Denemelerinizin bir kısmında hiçbir
değişiklik olmadığını gözlemleyeceksiniz bunun sebebi, browserınızın otomatik
olarak hatayı algılayıp düzeltmesidir.
Diğer etiketleri toplu olarak kullanarak yeni
bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:
| Kod Alanı: | |
|
Etiketleri kullanma mantığımızı anlamış
olmalısınız. Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz
ve metnin sonunda da ilgili etiketi sonlandırıyoruz. Etiket biz
sonlandırmadığımız müddetçe etkisini göstermeye devam ediyor. Eğer hala
tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek
kaydedin ve diğer taraftan browserınızın refresh/reload (yenile ) tuşuna
basarak değişiklikleri gözlemleyin.
Yeni öğrendiğimiz kodlara bir göz atalım:
<center>....</center>
Aradaki metinleri sayfaya göre ortalar. (center )
<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, takib eden metin bir satır boşluk bırakılarak ve satır
başına yazılır.
Başladığınız etiketi
sonlandırmayı sakın unutmayın !
Burada bilmeyenler için küçük bir bilgi; bir
html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp
kaynağı görüntüle/view sourceu seçtiğimizde Internet Explorer için Notepad,
Netscape için kendi Source Viewerı açılacak ve bize o sayfanın kodunu
gösterecektir.
Şu ana kadar yazılarımızın font ayarını
browserın varsayılan fontuna bıraktık. Bir sonraki konuda, metinlerde
istediğimiz fontu nasıl kullanacağımızı göreceğiz.