|
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>
HTML'de 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 Netscape'in 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.
Notepad'i açıyor ve şu kodları yazıyoruz;
<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>
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:
<html>
<head>
<title>Başlık Etiketleri-2</title>
</head>
<body>
<h1><center>Sayfama Hoşgeldiniz</center></h1>
<p>HTML etiketleri ile, </p>
Yazıları
<b>koyu </b>
<i>italik </i>
ve
<u>altı çizili </u>
olarak yazabiliyorum
</body>
</html>
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 source'u
seçtiğimizde Internet Explorer için Notepad, Netscape için kendi
Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.
ÖDEV: Öğrendiğiniz
komutlarla yukarıdaki gibi bir sayfayı nasıl oluşturursunuz?
Cevap:
<html>
<head>
<title>odev</title>
</head>
<body>
<h4>toplumsal sözleşme,</h4>
<p>Siyaset felsefesinde, bireylerin belli haklarını belli
koşullar altında ya da belli güvenceler karşılığında yönetime devretmesini
dile getiren kavram.</p><p>Jean-Jacques Rousseau <i>Du contrat social</i>
(1762; <i>Toplum sözleşmesi</i>, 1965, 1984)
adlı yapıtında doğa durumunda insanın savaşkan olmadığını,
mantığının, ahlak duygusunun ve sorumluluk bilincinin henüz
gelişmemiş olduğunu ileri sürdü. Karşılıklı korunma amacıyla
bireysel davranma özgürlüklerinden vazgeçerek, yasalar ve
hükümetler oluşturduklarında ise insanların bir ahlak ve
yurttaşlık duygusu geliştirdiğini savundu...</p>
<p><u><b>Kaynak:</b>Ana Britannica Cilt: 21</u></p>
</body>
</html>
Ş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. |