Demekki bir Web Sayfası hazırlamak istiyorsunuz! İşiniz var..
Ders 5!..
Gerçekten buraya kadar epeyi şey öğrendik. Şöööyle bir hafızanızı yoklarsanız,
text ve font manipülasyonu, resimler, linkler. İşin temel prensiplerinden bahsedersek
daha söylenecek çok şey var (TABLE-FORM-FRAME-CSS dersleride yolda.) Ama siz bu birkaç
sayfadan sonra hiç değilse eline yüzüne bakılabilir web sayfaları yapabilirsiniz.
Biraz da TABLE ve CSS derslerini okudunuzmu göze hoş gözüken sayfalar yapma devriniz
başlar. Bence eğer bu işi amatör seviyede devam ettirmek isterseniz hiç FRAME'lere
bulaşmayın. Zaten kimsede mecbur kalmadıkça kullanmanzıı tavsiye etmez (sayfa yüklenme
hızı FRAME'li sayfalarda epeyi düşmektedir.
Artık sıra ekran çözünürlüğü (Screen Resolution)
konusuna geldi. Hani bir takım sayfalarda en iyi 800x600 yada 1024x768 çözünürlükte
izlenir derler ya, o konu işte.
Ben şahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlüğün
800x600 olduğunu gösteriyor. Bunun bu işle ilgisi nedir? diye sorarsanız, cevabı:
Çok önemli olduğudur. Çünkü sayfanızın insanlara nasıl göründüğünü ilgilendirmektedir.
Aşağıda bir sayfanın her üç çözünürlükte görünümünü vermektedir. Sanırım farkı biraz
değerlendirirsiniz.
Sayfanızı tüm çözünürlüklerde kontrol etmek çok iyi bir fikirdir. Çünkü saatler
süren çalışmalar ve yerleştirmeler sonunda websitenizi Upload edersiniz ve 10-15
gün sonra diyelim 17 inç ekranda 1024×768 çözünürlükte çalışan arkadaşınızın
bilgisayarından şööyle havalı bir biçimde websitenizi göstermeye kalkarsınız; Aman,
o da ne, o saatlerce uğraştığınız anasayfanız almış başını gidiyor, durun, tutun,
yakalayın...(Bu dersleri size çeviren nacizane ben aynı hatayı yaptım, daha da
korkuncu sadece kendi browserimden kontrol ettiğim bizim ilkturk.net'in anasayfasıydı
ve ben tam 2.5 ay sonra, 40.000 (kırkbin) ziyaretçiden sonra olayın farkına vardım,
ne kötü değil mi?)
Bundan dolayı, yalnız diğer çözünürlüklerde değil, başka ekran büyüklüklerinde de
kontrol edin; 14-15-17-19 inç ekran, Notebook, WebTV filan, aklınıza gelen herşey.
Şimdi biraz da, kullanabileceğiniz formatlama araçlarından
anlatalım. Birincisi <BLOCKQUOTE> 'dur. Bir çok browserlerde marjinlerinizi
içeriye çeker (Tam doğru terimi bulamadım, sanırım yaklaşık olarak anlatabildim.)
Şimdi hemen yukardaki paragrafa uygulayalım ve bir web sayfasında olsa nasıl olurdu,
hemen aşağıda izleyin.
<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Ben şahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlüğün
800x600 olduğunu gösteriyor. Bunun bu işle ilgisi nedir? diye sorarsanız, cevabı:
Çok önemli olduğudur. Çünkü sayfanızın insanlara nasıl göründüğünü ilgilendirmektedir.
Aşağıda bir sayfanın her üç çözünürlükte görünümünü vermektedir. Sanırım farkı biraz
değerlendirirsiniz.
</BLOCKQUOTE>
</BODY>
Ben şahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlüğün
800x600 olduğunu gösteriyor. Bunun bu işle ilgisi nedir? diye sorarsanız, cevabı:
Çok önemli olduğudur. Çünkü sayfanızın insanlara nasıl göründüğünü ilgilendirmektedir.
Aşağıda bir sayfanın her üç çözünürlükte görünümünü vermektedir. Sanırım farkı biraz
değerlendirirsiniz.
|
Bir başka kullanışlı araç, LIST özelliğidir.
ORDERED list'ler ve UNORDERED list'ler vardır.
Bu ordered list örneğidir
- Büyük bir şey
- Küçük bir şey
- Kısa bir şey
- Uzun bir şey
|
|
Bu da unordered list örneği
|
Önce bir taneUNORDERED list yapalım. Gerçekten çok basittir.
Şööyle başlayın
<BODY BGCOLOR="#FFFFFF">
Karnemi alınca istediklerim!.
</BODY>
Karnemi alınca istediklerim!.
|
Not- teknik olarak henüz listeyi yapmaya başlamadık, bu sadece başlık.
Unordered list etiketlerini ekleyin
<BODY BGCOLOR="#FFFFFF">
Karnemi alınca istediklerim!.
<UL>
</UL>
</BODY>
Karnemi alınca istediklerim!.
|
Liste maddesi ekleyin.
<BODY BGCOLOR="#FFFFFF">
Karnemi alınca istediklerim!.
<UL>
<LI>kırmızı bir bisiklet
</UL>
</BODY>
Karnemi alınca istediklerim!.
|
Bir kaç tane daha ekleyin...
<BODY BGCOLOR="#FFFFFF">
Karnemi alınca istediklerim!.
<UL>
<LI>kırmızı bir bisiklet
<LI>bir sürat teknesi
<LI>bir PC
<LI>bir TV
<LI>bir de Melanie Griffith
</UL>
</BODY>
Karnemi alınca istediklerim!.
- kırmızı bir bisiklet
- bir sürat teknesi
- bir PC
- bir TV
- bir de Melanie Griffith
|
İşte Liste dediğin de böyle olmaz mı?!
Pekiii ordered list'i nasıl yapacağım? Kolay! <UL>
etiketini <OL> olarak değiştirin.
<BODY BGCOLOR="#FFFFFF">
Karnemi alınca istediklerim!.
<OL>
<LI>kırmızı bir bisiklet
<LI>bir sürat teknesi
<LI>bir PC
<LI>bir TV
<LI>bir de Melanie Griffith
</OL>
</BODY>
Karnemi alınca istediklerim!.
- kırmızı bir bisiklet
- bir sürat teknesi
- bir PC
- bir TV
- bir de Melanie Griffith
|
Başka bir liste tipi ise definition list'tir.
- Rüştü Rençber
- Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini
korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında
diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.
- Taffarel
- Galatasaray'ın son bir kaç sezondur file bekçiliğini yapan Taffarel, aynı
zamanda Brezilya Milli takımının da kalecisidir. Türkiye'yi çok seven Taffarel
bu sene memleketine dönecekmiş.
Hadi başlayalım...
<BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
</BODY>
Sonra definition başlığını atınız...
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Rüştü Rençber
</DL>
</BODY>
Definition maddesini yazınız.
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Rüştü Rençber
<DD>Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini
korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında
diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.
</DL>
</BODY>
- Rüştü Rençber
- Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini
korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksada, 2001 yılında
diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.
|
Rötuş olarak, başlığı kalınlaştırıp, altına da Taffarel'i yerleştirdik mi
listemiz biter.
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>Rüştü Rençber </B>
<DD>Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini
korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında
diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.
</DL>
</BODY>
<DL>
<DT><B>Taffarel </B>
<DD>Galatasaray'ın son bir kaç sezondur file bekçiliğini yapan Taffarel, aynı
zamanda Brezilya Milli takımının da kalecisidir. Türkiye'yi çok seven Taffarel
bu sene memleketine dönecekmiş.
</DL>
</BODY>
- Rüştü Rençber
- Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini
korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında
diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.
- Taffarel
- Galatasaray'ın son bir kaç sezondur file bekçiliğini yapan Taffarel, aynı
zamanda Brezilya Milli takımının da kalecisidir. Türkiye'yi çok seven Taffarel
bu sene memleketine dönecekmiş.
|
Gelelim çok sık kullandığımız Horizontal Rule (yani Ufki
Hat-eski Türkçe) yani düz çizgi. Bunu gerçekten çok sık kullanırız.
<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>
Birkaç tane opsiyonumuz vardır.
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
Bunun anlatımı kendinden menkul..
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>
Aynı zamanda kalınlığı da kontrol edebilirsiniz...
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>
İçi dolu, tek bir çizgi de yapabilirsiniz
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
Hatırlarsınız, geçmişte bir yerde, browserin formatlamayı anlamadığını, sadece
metni peşpeşe yazdığını söylemiştim, aynen bu şekilde...
<BODY BGCOLOR="#FFFFFF">
\|/
(@ @)
+----oOO----(_)-----------+
| HTML DERSLERİ |
| herkese |
| lazım |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</BODY>
\|/ (@
@) +----oOO----(_)-----------+ | HTML DERSLERİ | | herkese | | lazım
| +-----------------oOO-----+ |__|__| || || ooO Ooo |
Eveet, <PRE> (preformat)
etiketleriyle, bunu engelleyip, metnin yazdığımız şekilde görünmesini sağlarız.
<BODY BGCOLOR="#FFFFFF">
<PRE>
\|/
(@ @)
+----oOO----(_)-----------+
| HTML DERSLERİ |
| herkese |
| lazım |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
</BODY>
\|/
(@ @)
+----oOO----(_)-----------+
| HTML DERSLERİ |
| herkese |
| lazım |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
|
* Dikkat, monospaced font kullanılmıştır.
SSS :kardeşim, bunlar çocuk işi, bizim böyle soytarılıklara
ayıracak vaktimiz yok (çocuklar, alınmayın, ama 20 yaşın üstündeki herkes böyle
söyler.)
Cevap: Biraz hayal gücünüzü kullanın bakalım, hadi, söylemezsem duramam,
<PRE></PRE> etiketlerini kullanarak bir de şiir yazmayı
deneyin bakalım, yada şöyle diyelim, önce bir iki kıt'a Orhan Veli'den yazın,
neye benziyor, sonra da her şeyi yeniden <PRE></PRE> etiketlerini
kullanarak yazın.
Tamam, tamam şiir meraklıları teşekküre gerek yok, zaten yeterince
teşekkür etmişsinizdir içinizden.
|
En son yorum etiketini tartışacağız.
<BODY BGCOLOR="#FFFFFF">
<!--Bu bir yorumdur-->
Bu değildir<P>
Yorumlarınızı dökümanın herhangi bir yerine koyabilirsiniz ve browser de
içindeki hiçbirşeyi değerlendirmesine almaz. Gizli mesajlar koyabilirsiniz
<!--Selam abicim!-->
kendinize notlar olabilir, <!--Akşam
ekmek al--> yada önemlisi, sayfanızın kaynak koduna bakan birine
yardımcı olabilecek bir mesaj olabilir
.<!--Bu sayfadan araklama yapanınnn&%Ç£#$!-->
</BODY>
Bu değildir
Yorumlarınızı dökümanın herhangi bir yerine koyabilirsiniz ve browser de içindeki hiçbirşeyi değerlendirmesine almaz. Gizli mesajlar koyabilirsiniz kendinize notlar olabilir, yada önemlisi, sayfanızın kaynak koduna bakan birine yardımcı olabilecek bir mesaj olabilir .
|
Herşeyin açıkça anlaşılması için, yorum <!-- ile başlamalı
-->ile bitmeli
Yorumun için başka HTML etiketleri koysanız bile, browser onları dikkate almaz.
Browseriniz taaa ki --> işaretini
görene kadar herşeyi atlar.
İster inanın, ister inanmayın ama bitti. Evet çevirisi bana sıkıntı verdi, ama
sizlerin yüzündeki mutlu ifadeyi düşündükçe ha gayret dedim ve biraz da e-dersane.com
un vermiş olduğu link sayesinde 6 aydır elimin bir türlü varıpta yapamadığım çeviriyi
2 günde bitirdim. Şimdi istatistiklere bakacağım, bu sayfalar yeterince ilgi
görürse (ilgiden kastettiğim, günde en az 10 ziyaretçi), aynı çabuklukla CSS ve TABLE
derslerine devam ederim, ona göre.
Gelelim konumuza; Artık bir web sayfası yapmak için gerekli esas etiketlerin
hepsini biliyorsunuz. Daha başka etiketler var mı? Evet, tahmin ettiğinizden de fazla.
Fakat size garanti veririm, buraya kadar öğrendiklerinizle %70 etiketleri öğrenmiş
oldunuz. TABLE, FRAME ve FORM konularını da çevirdim mi, geri kalan %27 yi de öğrenmiş
olursunuz. Şimdi çok meraklılar soracaklar, bize kalan %3 ü göstermiyecekmisiniz??
Hayır, çünkü o etiketler ya şimdiye kadar öğrendiklerinizin bir kopyası, ya da çok
sınırlı ve özel kullanımı olan şeyler, sonra zaten bir yerlerde karşınıza çıkınca öğrenirsiniz.
Gelelim, HTML editör programı faslına. Derler ya, bir kelime HTML bile
bilmenize gerek yok, işte FRONT Page kullanın falan filan. Hiç böyle şeylere
rağbet etmeyin. Çünkü FRONTPAGE gibi bir programı öğrenmek için harçayacağınız
zaman içerisinde bu HTML derslerini yalayıp yutarsınız. Ondan sonra mantığını
bile çözemediğiniz bir programı kullanırken yaptığınız hataları bulmaya
çalışacağınıza, text-tabanlı HTML Editör programınızla sayfanıza hakim
olmanız daha kolay olur.
Benim favorim, yani bu gördüğünüz sayfaları aşağıdaki linkten ulaşacağınız 1st Page 2000 ile yaptım
< Ders 4
|