Göbegi Eritmek-2

Eğer diyetin ikinci ve en ağır dönemine hazırsanız, hemen devam edelim. Bir önceki yazımda, sayfanın baş kısmında bulunan öğelerinde değişiklik yaptık. Ayrıca sayfa içinde bulunan tüm tablolara bir id ismi verdik. Buraya kadar CSS’e dokunmadık ama bu yazıdan itibaren, CSS ile sayfamızı zayıflatmaya başlayacağız.

Eğer diyetin ikinci ve en ağır dönemine hazırsanız, hemen devam edelim. Bir önceki yazımda, sayfanın baş kısmında bulunan öğelerinde değişiklik yaptık. Ayrıca sayfa içinde bulunan tüm tablolara bir id ismi verdik. Buraya kadar CSS’e dokunmadık ama bu yazıdan itibaren, CSS ile sayfamızı zayıflatmaya başlayacağız.

Üzerinde çalıştığımız sayfanın BODY elementi birçok gereksiz bilgi ile doldurulmuş durumda.


1.    <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">



Yukarıdaki kod içinde gördüğünüz tüm özellikler CSS ile tanımlanabilir ve böylece ileriki tarihte site üzerinde bir değişiklik yapmak istediğinizde, üzerine değişiklik yapmanız gereken yalnızca bir dosya yani CSS dosyası olur.

Hadi gelin ilk CSS’imizi yazalım bu sayfa için. Şimdilik yazacağımız tüm CSS’i dahili olarak yazacağız yani sayfanın içine koyacağız. İşimiz bittiğinde ise bu CSS kodlarını harici dosya içinde saklayacağız. Bunu yapmak için hemen TITLE elementi altına bir aşağıda gördüğünüz gibi bir CSS komutu açmamız gerekiyor:


1.    <title>Diyetmax Turkiye</title> 

2.    <style> 

3.    body {background:#fff; margin:0; padding:0;} 

4.    </style> 

5.    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">



İşte yukarıda gördüğünüz CSS kodu içinde hem arka plan rengini hem de BODY elementinde bulunan leftmargin topmargin marginwidth ve marginheight özelliklerini tanımlamış olduk. Yeni BODY kodumuz şu şekilde olacaktır:


1.    <body onload="preloadImages();">







body {background:#fff; margin:0; padding:0;} icindeki background



arka plan rengini bize vermektedir. Arka plan rengi icin #fff değerini kullandım ki bunun açılımı #ff ff ff’dir yani beyaz. Eğer bir arka plan rengindeki 6 harf ya da sayının ikili grupları aynı harf ya da sayıdan oluşuyor ise benzer harf ya da sayı silinebilir ve bu nedenle #fff değeri #ffffff değeri ile aynıdır. #ff00ee değeri #f0e ile aynidir. Başka bir örnek ise #99CC66 değeri #9C6 ile aynıdır.

CSS içinde kullandığımız margin, bir HTML elementinin etrafındaki boşluğun miktarını belirlemek için kullanılır. margin:0 dendiğinde bu elementin tüm kenarlarının diğer elementlerden uzaklığı 0 piksel olacaktır. margin: 0 deyimini ayni zamanda margin: 0 0 0 0; seklinde de yazabilirdim. Buradaki değerler sırasıyla üst (top), sağ (right), alt (bottom) ve sol (left) margin değerlerinin 0 olduğunu göstermektedir. Buradaki sıralama önemlidir. Yani T (top), R (right), B (bottom), L (left) sıralaması. Bunu daha iyi hatırlamak için size yardımcı olabileceğini inandığım bir kelimeyi ismini aklınızda tutabilirsiniz: TiReBoLu ya da TRaBzonLu.

CSS içinde kullandığımız padding ise, bir element içindeki verilerin, elementin kenarlarına uzaklığını belirten değerdir. Yani bir tablo içindeki yazının, tablo kenarına olan uzaklığını belirleyen değerdir. Yine örneğimizde margin gibi BODY padding değerini 0 verdik. Bütün margin kuralları padding içinde geçerlidir. TiReBoLu kuralı da dâhil olmak üzere.

Gelin şimdi de FONT değerlerini ve link renklerini CSS içine yerleştirelim. Üzerinde çalıştığımız sitedeki hemen hemen her paragraf

<font size="2" color=”#666666” face="Tahoma">



değerini taşıyor. Bu demektir ki o paragraf "Tahoma" fontunu kullanıyor, rengi #666666 ve büyüklüğü ise 2 olarak belirlenmiş. Bu sayfa içinde defalarca tekrar edilmiş durumdu. Bu değeri CSS içine koymak gayet basit.


1.    <style> 

2.    body {background:#fff; margin:0; padding:0;} 

3.    body, p, td {font:normal 90% tahoma, verdana, sans-serif; color:#666;} 

4.    </style>



Yukarıdaki CSS içinde BODY, P ve TD elementi içinde yer alan tüm tekstlerin, stilinin normal (yani italik degil), büyüklüğünün yüzde 90 (yaklaşık size="2" ye eşittir), font tipinin tahoma (eğer tahoma yoksa Verdana eger Verdana yoksa herhangi bir sans-serif font) ve renginin ise #66666 olması gerektiğini belirttik. Font özelliğini CSS içine ekledikten sonra sayfa içindeki bütün ile tanımlanmış olan HTML elementlerini silebilirim (57 tane). İşte gördüğünüz gibi bir satir CSS kodu ile 57 FONT elementini sayfamızdan çıkardık ve ileriki bir tarihte font tipini değiştirmeye karar verirsek, CSS’i değiştirmemiz yeterli olacak.

Şimdi de linklerin renklerinin ve dekorasyonunu belirtecek CSS’i sayfamıza ekleyelim.


1.    body, p, td {font:normal 90% tahoma, verdana, sans-serif; color:#666;} 

2.    a:link, a:visited {text-decoration:none; color:#800000;} 

3.    a:hover {text-decoration:underline; background:#C4BCFB; color:#000;} 

4.    a:active {color:#8000aa;} 

5.    </style>



Yukarıdaki CSS içinde a:link yani normal linkler, a:visited yani ziyaret edilmiş linkler, a:hover yani faremizi linki üzerine getirdiğimizdeki durum ve a:active yani link seçilmiş iken ki stilini tanımladık. CSS içinde gördüğünüz text-decoration bize linkin altının çizili olup olmadığını gösteriyor. CSS linkleri konusunda dikkat edilmesi gereken kural ise yine sıralamadır. Sıralama su şekildedir: a:link , daha sonra a:visited, daha sonra a:hover ve en son a:active gelir. Sıralama için aklınızda tutacağınız kelime LeVHA olabilir.

Yukarıda yazdıklarım belki de birçoğunuzun bildiği CSS bilgileri. Gelin biraz da tablo için nasıl kullanacağımıza bakalım.

Önceki yazıda tablolara id verdik. İşte simdi o verdiğimiz id’leri kullanmaya başlayacağız. Üzerinde çalıştığımız sitedeki ilk tablo aşağıdaki gibi:


1.    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="masthead"> 

Hemen masthead ile ilgili bir CSS yazalım:

1.    table {border-collapse: collapse;border-spacing: 0px;} 

2.    table td { vertical-align: top;} 

3.    #masthead {margin:5px 0 15px 0; padding:0; text-align:left; width:800px;} 

4.    </style>



masthead tablosu logonun ve ana linklerin bulunduğu bir tablo. Bu tablo ve site içindeki diğer tabloların hiçbirinde kenar çizgisi olmadığı için table elementinin kenar çizgi değerlerini 0’a eşitledim ve bunu border-collapse: collapse;border-spacing: 0px; ile gerçekleştirdim. Bu CSS kuralı, önünde bir id ismi olmadığı için, sayfa ve site içindeki tüm tablolar için geçerli olacaktır.

Yine sayfa ve site içinde geçerli olacak bir başka kural ise, tablo hücrelerinin hepsi hücrenin üstüne hizalanacaktır (tablodaki valign=”top” degeri) ve bunu da vertical-align: top ile gerçekleştirdim. Masthead tablosu için ise id ismini kullandım. CSS kodu içinde bütün id’lerin önünde # işareti olmalıdır. Masthead tablosunun uzunluğunu 800 piksel olarak tanımladım (width:800px). Yazıları sola hizaladım (text-align:left) ve yazıların tablonun kenarlarından uzaklığını yani padding değerini 0 olarak verdim. Fakat margin değeri olarak yani tablonun diğer elementlerden uzaklığını ise üstten 5 piksel, sağdan 0, alttan 15 ve soldan 0 olarak tanımladım.
Yeni tablomuzun kodu aşağıdaki gibi olacaktır:


1.    <table cellpadding="0" id="masthead">



İşte bu yeni kod içinde width’i, border’i , align ve cellspacing değerini kaldırdık.
  • Etiketler;
Mehmet Doğan
Hiç kendiniz hakkında bir yazı yazmaya çalıştınız mı? Özgeçmiş yazmaktan en az 10 kat daha zor. Bakalım, bir deneme yapacağım fakat 11 yaşındayken kamp ateşi üzerine yanlışlıkla oturup popomu yaktığım zamanı ve hergün pırasa yediğim kreş yıllarını atlamak istiyorum. (Eğer bir sakıncası yoksa) Sanata olan ilgim daha küçük yaşlarda başladı, 5 yaşında iken ayakkabı boyacısı olmak istiyordum. Bu sanırım benim renklere olan tutkumun bir kanıtı olmalı. Halbuki o dönemde itfayeci, polis ve süper kahraman (özellikle Süperman ya da Zagor) olmak çok cazipti fakat yaratıcı bir karaktere sahip olmak beni hiç terketmedi. Yaratıcılık duygusu lise yıllarında daha da şekillendi içimde. Sanat ve edebiyat ile ilgili dersler beni oyunculuğa itti (sınıfın en güzel kızının da tiyatro ile ilgilenmesinin bununla hiçbir ilişkisi yoktur. Zaten okulun en güzel kızı “tren yolu saç modelli” bir kişiye bakacak kadar çaresiz değildi.) Sanat ve yaratıcılık ile ilgili aldığım onca sinyallere rağmen üniversitede iktisat bölümünde okuyup, mezun oldum. Halbu ki ben kırmızı kurdele sahibi bir öğrenci idim. İktisatdan mezun olduktan sonra ki düşüncem, İstanbul gibi büyük bir şehirde iktisatçı olarak çalışmak, büyük bir şirketin genel müdürlüğünü yapmak, çok para kazanmak ve daha sonra herşeyi bırakıp hayatımın geri kalan kısmını dünyayı gezerek geçirmek idi fakat hayatın akışı benim planlarıma uygun bir yönde gitmiyordu. Kısa zamanda ekonomiden nefret ettim. Para ile uğraşmanın (özellikle diğer kişilerin paraları) ve takım elbise-kravat giymenin bana uygun olmadığını anladım. Web tasarımına girmeden önce birçok değişik işte çalıştım. Radyo programcılığı, TV komedi program sunuculuğu, satış elemanlığı (esasında satış elemanlığı ben 5 yaşında iken başladı. Bir kutu çikolata satıp, kazandığım para ile o çok istediğim plastik yılanı aldım) v.b. Yıllar sonra, ilk Internet bağlantımı satın aldım ve Internet’e aşık oldum. Sanata olan tutkum yeniden geri döndü. İlk tasarımını yaptığım websitesi kötü yazılmış HTML’den ve tahta fon resminden oluşuyordu ama yine de ilk deneme için fena sayılmazdı ve bu ilk deneme benim web için olan tutkumu ateşledi. İşte o gün bugündür, ben, kendime "web tasarımcısı" adını veriyorum. Nerdeyse 8 yıl olmuş, Internet degişmiş, yaptıgım işin şekli, ismi degişmiş ve ama degişmeyen tek şey benim halen o ilk gün ki heyecanı taşımam. Birseyi, her gün, saatlerce, haftalarca, aylarca ve yıllarca yapıp, yorulmadığınız zaman bilmelisiniz ki, siz, yaptığınız isten zevk alıyorsunuz. 2000 yılında, New Brunswick Üniversitesi’nin Bilgi İşlem Bölümü’nün genel müdür yardımcısı John Webster (2005 yılında emekli oldu), beni, Web Geliştirme Bölümü’nün müdürü olarak işe aldı. Eğer ona soracak olursanız, bu kararın şimdiye kadar verdiği en iyi yönetim kararı olduğunu söylecektir size. İşte buradayım ve yaptığım işe AŞIАIM. Bütün bu iş hayatının yanında, ben, sihirbazların kullandığı çeşitli kağıt oyunları ve aksiyon oyuncakları toplamaktayım. Aksiyon oyuncakları benim vazgeçilmez kolleksiyonum. Bazıları parasını giyeceğe, tatile harcar; ben ise oyuncaklara. Özellikle, MacFarlane Oyuncaklarına. Hayatımda ki üç kişi benim için dünyadan bile daha değerlidir. Bu kişilerden biri eşim Jennifer, diğerleri ise kızlarım Jayda ve Aliya. İşte bu kadar. Eğer gerçekten bu yazdıklarımı okuyup, bu satırlara kadar ulaştıysanız sizi tebrik ederim. Zamanınızı iyi harcadınız :)
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

neden ID veriyoruz ki onu anlamadım ben bir yerden çağırmak falan mı bana derlenmiş bir örnek atarmısınız yardım edin lütfen eraser-35@hotmail.com
teşekkürler

Yukarı Git