HTML Bloklama

ASP, PHP, PERL, CGI, HTML gibi web programcılık dilleri hakkında yardım, tartışma ve paylaşımlar.
Cevapla
Kullanıcı avatarı
UnreaL
Fast Friend
Fast Friend
Mesajlar: 207
Kayıt: 24-12-2005 17:26

HTML Bloklama

Mesaj gönderen UnreaL »

Bloklama

Nesne Ortalama Bloğu

İlk tanıtacağım bloklama aracı <center>...</center> kodlarıdır. Bu kodlar arasına yazılan HTML nesneleri sayfanın ortasına yaslanır (merkezlenir). Özellikle sayfa tasarımında, tabloların her boyuttaki pencereye uyum sağlaması için kullanılır. Küçük bir uygulama yapalım.

Kod: Tümünü seç

<html>
<head>
  <title>Sayfa Merkezleme</title>
</head>
<body bgcolor="#faebd7">
<center>
  <br><br>
  <table border="2" bordercolor="#000000" cellspacing="0" cellpadding="15" bgcolor="#ffffff" width="300" height="500">
    <tr>
      <td valign="top">
        Bu sayfa pencerenin büyüklüğüne göre kendisini sayfanın ortasında tutar. (Tabi pencere sayfadan daha büyükse.)
      </td>
    </tr>
  </table>
  <br><br>
</center>
</body>
</html> 

Bu uygulama size tanıdık geliyor mu? Dikkat ediyorsanız, okumakta olduğunuz bu sayfa da aynı mantıktan yola çıkılarak hazırlanmıştır. Pencerenin boyutlarıyla oynayarak <center> kodunun işlevini görebilirsiniz. Unutmayın, <center> kodu ile sadece bir tabloyu değil, her türlü HTML nesnesini ortalamak mümkündür.

Sayfa İçi Bloklar

şimdi <center> kodundan daha gelişmiş bir bloklama aracını öğrenelim: <div> Bu kod ile HTML sayfalarını kısımlara ayırırız. CSS derslerinde öğreneceğimiz tarz yaratma yöntemleriyle kullanılır genelde. Şimdilik align parametresini kullanabiliriz. <div align="center">...</div> kodları, <center>...</center> kodlarının işlevini görür. span kodu da div koduyla aynı işlevi görür ama span kodunun align parametresi yoktur. Not: <span> kodunu Netscape Navigator 5 desteklemiyor.

Kod: Tümünü seç

<html>
<head>
  <title>Rakamların Evrensel Tarihi, Georges Ifrah, TÜBİTAK Yayınları</title>
</head>
<body>
<div align="center" style="font-size:24pt; color:crimson">
  Bir Gölgenin Peşinde 
</div><br>

<div style={"text-align:justify"}>
  Bir ön öğretimden geçmiş bazı kuşlarda daha da belirgin bir yetenek saptanmıştır. Çok sayıda ustalıkla yapılmış deney, yiyeceğini iki küçük tahıl yığını arasından seçmeyi öğrenmiş bir saka kuşunun, genel olarak üçü birden, üçü ikiden, dördü ikiden, dördü üçten ve altıyı üçten ayırmayı başardığını göstermiştir. 
</div><br>

<div style="font-family:comic sans ms; text-align:justify">
  Ön öğretim olmaksızın birden üçe ya da dörde kadar giden somut nicelikleri açıkça tanıyabilen bülbüllerin, saksağanların ve kargaların durumu daha da dikkate değer. İşte ünlü bir örnek: Bir şato sahibi şatonun gözetleme kulesine yuva yapan bir kargayı öldürmeye karar vermiş. Kuşu birçok kez ansızın yakalamaya çalışmış, ama o yaklaşınca karga yuvasını terkedip yakındaki bir ağaca konuyor, adam kuleden ayrılır ayrılmaz geri dönüyormuş. Sonunda bir gün bir hileye başvurmuş adam: Arkadaşlarından ikisini kuleye çıkarmış; bir süre sonra biri çekip giderken öteki kulede kalmış. Ama bu oyunu yutmayan karga, yerine dönmek için ikincisinin de gitmesini beklemiş. Sonraki sefer ikisi daha sonra uzaklaşacak olan üç kişi çıkılmış.: Üçüncü adam kargayı yakalama fırsatı bulurum diye bekleyedursun, kanatlı kurnaz ondan çok daha sabırlı çıkmış. Deney birçok kez baştan alınmış, ama hep başarısız. Sonunda hilenin dört ya da beş kişiyle işe yaradığı, karganın aynı anda üç ya da dört kişiden fazlasının varlığını görsel olarak kavrayamadığı ortaya çıkmış. 
</div><br>

<div style="color:#0000ff">
  Bu davranışlar çok ilginç, çünkü hayvanlarda zaten bulunan insan güçlerinin modellerini oluşturuyorlar. 
</div><br>
<div style="font-family:courier">
  Evcil hayvanlar örneğinde kümelerin eşitliği ya da eşitsizliği kavramının gelişmemiş bir çeşit algısı söz konusu, ama ancak sayıca düşük öbeklemelerde kendini gösteren bir algı. 
</div>
</body>
</html> 


Bu uzun uygulamada henüz öğretmediğim style="..." parametrelerini kullandım. Sizler uygulamayı incelediğiniz zaman bu parametrelerin ne işe yaradığını anlamışsınızdır. style="..." parametresiyle veya <style>...</style> kodu ile ilgili ayrıntılı bilgileri CSS derslerimizde göreceğiz. Şimdilik <div> kodu ile sayfa bölümlemesi yapmayı göstermek için kullandım; sizin için de bir ön çalışma olmuş oldu. Bu uzun uygulamayı daha da uzatmamak için <div> kodlarını birer paragrafı kapsayacak şekilde kullandım; elbette bu kodları bir sürü paragrafı kapsayacak şekilde kullanabilirsiniz. Yukarıdaki uygulamada <div> kodu yerine <p> kodunu kullanmak daha mantıklı olurdu; style="..." parametresi bu kod için de geçerlidir. Bu söylediklerim span kodu için de geçerli ama bu kodun align="..." parametresini desteklemediğini tekrar hatırlatırım. (Bu bir eksiklik değil, style="..." parametresiyle bunu kolayca aşarız. Yukarıdaki uygulamayla ilgili son birşey daha: dikkatinizi çektiyse style="text-align:justify" parametresi ile paragrafı iki yana yasladık. (Şimdilik tiyo olarak kullanın, CSS dersinde konunun tamamına hakim olacaksınız, bunları herkes göstermiyor, değerimi bilin.:))

Alıntı Bloğu

Bir başka bloklama kodu: <blockquote>...</blockquote> (alıntı bloku). Bu kod arasına yazılan yazıların solunda ve sağında bir miktar boşluk bırakır.

Kod: Tümünü seç

<html>
<head>
<title>Yüzyılların Gerçeği ve Mİrası, Server TANİLLİ</title>
</head>
<body>

<br><br>
<p>Yaşamın gereksinimleri, II. bin yılın başlarında, matematik bilimleri de geliştiriyor bir ölçüde. </p>

<blockquote>
Babil matematiğin önemli bir gerçekleştirmesi "durum sistemi" diye adlandırılır: Buna göre, aynı rakam, sayıdaki yerine göre değişik değerleri temsil eder. Babilliler, eski Yunan ve Roma'dan önce gelirler bu bakımdan. Ancak, matematiğin gelişimini, "altmışlık sayılama" hayli engelledi orada. Asıl kökeni bilinmiyor bunun; zaman hesabından doğan "kutsal" sayılama kategorilerine bağlıydı belki de. Buna göre, 7. Ay'ın dolaşımındaki gün sayısına, 12 de yıldaki ayların sayısına göre ortaya çıkmıştı. Bu sistemde 60=12x5 sayısının varlığı, ilkel dönemde hayli uygulanan parmak hesabına da bağlılığı gösteriyor. Matematik bilgilere gelince: Babilliler, II. bin yılın başlarında, dört aritmetik işlemi, kareye yükseltmeyi ve karekök almayı bildikleri gibi, alan ölçümü için gerekli geometri ilkelerini de biliyorlardı. Geometri formülleri, toprağı, tarlaları, bahçeleri ölçmede kullanılıyordu. Dairenin 360 derece olduğunu da Babilliler buldular. 
</blockquote>

<p style="text-align:justify"> Babilliler, günü ve geceyi 12 saat olarak saptamışlardı; daha sonra saat 60 dakikaya, dakika da 60 saniyeye bölündü. Babilliler ayı, Ay'ın Dünya çevresindeki dolaşımına göre dörde bölüyorlardı; ancak haftanın yedi gün olarak saptanması, I. bin yılın ortalarında, yedi "büyük" yıldız tanrı, oldu; günler de onlara göre adlandırıldı. Yedi günlük hafta, Romalıların aracılığıyla tüm Avrupa halklarına geçti ve giderek bütün dünyaya yayıldı.</p>
<br><br>

</body>
</html> 

Sütunlandırma

Bir başka bloklama elemanı <multicol>...<multicol> kodudur. Bu kodla sütünlama yapmak mümkündür. Yapmak istediğimiz sütün sayısını cols="..." parametresiyle belirleyebiliyoruz. Ayrıca sütunlar arası mesafeyi piksel cinsinden belirleyebilmek için gutter="..." parametresini kullanırız. Tüm metnin genişliğini ayarlamak için width="..." parametresi kullanılabilir. Not: Malesef bu kod Netscape için geçerlidir, IE browserlar bu kodu desteklemez. Benim gibi IE5 kullananlar görünmez tablolar yöntemini kullanabilirler.

Kod: Tümünü seç

<html>
<head>
  <title>Sahte Bilim, Carl SAGAN</title>
</head>
<body>
<multicol cols="3" gutter="20" width="740">
<p style="text-align:justify">Her bilim dalı için söz konusu ayrı bir sahte bilim bulunuyor. Jeofizikçilerin düz Dünyaları, çukur Dünyaları, sürekli batıp çıkan karaları yerine oturtmak için durmaksızın inip kalkan baltaları olan Dünyaları, deprem kâhinleri; botanikçilerin tutkulu duygusal yaşamları yalan detektörleriyle izlenebilen bitkileri; antropologların halâ yaşayan maymun-adamları; zoologların soyu tükenmiş dinozorları; evrimci biyologların böğrüne çökmüş İncil uzmanları; arkeologların antik astronotları, eski Cermen ve İskandinav uygarlıklarından kalma dövme demir yazmaları, sahte heykelleri; fizikçilerin devridaim makineleri, göreliliğin yanlış olduğunu iddia eden amatörler ordusu, hatta soğuk füzyonları; kimyasıların ise halâ simyası vardır. Ruh çözümlemesi ve parapsikoloji ruhbilimcilerin başının derdi. Ekonomistler, uzun vadeli ekonomik tahminle uğraşıyor. Meteorologların, (uzun vadeli iklim tahmini başka bir konu olmasına karşın) güneş lekelerine dayanılarak hazırlanmış Farmer's Almanac (Çiftçinin Yıllığı) gibi uzun vadeli hava tahminleri bulunuyor. Gökbiliminin kökeni sayılan, bugünse en başta gelen sahte bilimsel versiyonu olan yıldız falcılığı olabildiğince yaygın. Bu sahte bilim örnekleri kimi zaman birleşerek ortalığı iyice karıştırıyor. (Atlantis'in gömülü hazinelerini aramak için telepati kullanılması ya da yıldızlardan ekonomi tahminleri gibi).</p> 
</multicol>
</body>
</html> 

Başlık Oluşturma

Şimdi çok kullanılan bir başka bloklama elemanına geçelim. <h1>...</h1> kodu ile metin başlıkları oluşturabilirsiniz. <h1> (heading1) kodu en büyük boyutlu yazı ile başlık atar, <h6> ise en küçük boyutta başlık atar. Anlayacağınız üzere bu kodlar şunlardır: <h1>, <h2>,......, <h6>. CSS derslerinde bu kodların özellikleri üzerinde oynayacağız.

Kod: Tümünü seç

<html>
<head>
<title>Başlıklar</title>
</head>
<body>

<h1>Married with Children</h1>
<h2>Married with Children</h2>
<h3>Married with Children</h3>
<h4>Married with Children</h4>
<h5>Married with Children</h5>
<h6>Married with Children</h6>

</body>
</html> 



Volkan Derinbay'a tşkler.
Cevapla
  • Benzer Konular
    Cevaplar
    Görüntüleme
    Son mesaj

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 1 misafir