 |
|
|
|
||||||||||||||||||||||||||||||
 |
Firmanıza Web Hosting Çözümleri
|
|
|||||||||||||||||||||||||||||||
 |
|
||||||||||||||||||||||||||||||||
|
Demekki bir Web Sayfası hazırlamak istiyorsunuz!
|
||||||||||||||||||||||||||||||||
Web Hosting| Güzel bir şey bir demet çiçek gibi! |
<BODY BGCOLOR="#FFFFFF">
Hey!
Burada
neler
oluyor??
</BODY>
| Hey! Burada neler oluyor?? |
Browser eğer formatı söylemezseniz tanımaz. Siz aksini söylemedikçe, karakterleri ardarda sıralar. Yeni bir satır başlamak istiyorsanız, satırbaşı yapmalısınız.
<BODY BGCOLOR="#FFFFFF">
Hey!
<BR>
Burada
<BR> neler
<BR> oluyor??
<BR>
</BODY>
| Hey! Burada neler oluyor?? |
<BR> sadece satırbaşı anlamına gelir. <BR> benzer bir ikinci komut ise, <P>. Buda yeni bir paragrafın başlangıcını belirtir. Bir satır atlayıp, yeni bir satırdan satırbaşı yaparak paragrafı başlatır.
<BODY BGCOLOR="#FFFFFF">
Hey!
<P>Burada
<P>neler
<P>oluyor??
</BODY>
| Hey!
Burada neler oluyor?? |
Bu satırbaşlatan etiketler hakkında bir not:
Bunları bir defadan fazla kullanamazsınız. Yani bir başka deyişle <P><P><P> şeklinde yazarak bir kaç tane boş satır elde edemezsiniz. Genelde tek bir tane boş satır bırakırlar. Az sonra size bir kaç tane boş satırı nasıl elde edeceğinizi anlatacağım.
Önce buraya bakınız...
<BODY BGCOLOR="#FFFFFF">
Gerçekten güzel bir
şey.
</BODY>
| Gerçekten güzel bir şey. |
Tarayıcı birden fazla boşluğu tanımaz. Gerçekten saçma görünen bir şey ama, böyle olması en uygun hali. Bu size dökümanın görünümünün tüm kontrolunu vermekte.
Browsere "boşluk" geldiğini anlatan küçücük bir kod vardır yani, -> den bahsediyorum.
Şimdi bunu bir deneyin bakalım...
<BODY BGCOLOR="#FFFFFF">
Gerçekten
güzel
bir
şey.
</BODY>
| Gerçekten güzel bir şey. |
& özel bir karakterin başladığını, ; ise bittiğini belirtir; arada kalan harfler ise, özel karakteri tanımlarlar. Bu özel karakterlerden bir kısmı aşağıdadır. Dikkat: bunlar hep küçük harfle yazılmalıdır.
- ( boşluk)
- < (< küçüktür işareti)
- > (> büyüktür işareti)
- & (& ampersand işareti)
- " (" çift tırnak)
- ­ ( soft hyphen)
Bunları herzaman kullanmanız gerekmez, bazen gerçek işareti yazmak tarayıcı programı şaşırtabilir. Bu işaretlerin nezaman karıştıracağını nasıl anlarız? diye sorarsanız; Bunun tam olarak bir kuralı yoktur. Biraz alıştırma ve web sayfanızda sapıtmış şekilde duran karakterleri görünce kullanmaya başlarsınız.
Bu arada hatalarınız üzerine düşüncelerim: Bir kısım insanlar hataların, hata
yapmanın kötü olacağını düşünerek, hata yapmamak için yeni olan hiç bir şeyi
denemezler. Elbette aynı hatayı tekrar tekrar yapmak biraz aptallığın yada
nazikçe dikkatsizliğin belirtisi olsada, öğrenmeniz sırasında herşeyi berbat
etmekten korkmayınız. Sonuçta hatalarınızdan da öğreneceksiniz.
Eğer hiç bir
şeyi berbat etmiyorsanız, hiç bir şey öğrenmiyorsunuz, dolayısı ile, büyük bir
ihtimalle hiç bir şey yapmıyorsunuz demektir. Biliyorsunuz, herşeyi berbat
etmek, öğrenmenin adeta bir yan ürünüdür.
Bu kadar gevezelik yeter artık.
Şimdi sizleri sıkmaya başlamadan bir iki şeyin üzerinden çabucak gidiverelim.
Ne diyorduk?
Browser, eğer satırbaşı yapmasını söylemezseniz, yazdıklarınızı
düzgün bir metin gibi yazmaya devam eder. Bütün boşlukları da 1 boşluk değerine
düşürerek gösterecektir. Eğer arada daha fazla boşluk isterseniz,
( ) boşluk kodu olarak kullanmanız gerekmektedir.
Bahsetmediğim bir nokta:
Eğer, Return (yada Enter) tuşuna basarsanız, browser
onu da bir boşluk olarak kabul edecektir..(gerçekten bir boşluk yoksa.)
Hemen şu örneği inceleyin:
<BODY BGCOLOR="#FFFFFF">
Gerçekten<BR>güzel<BR>bir
şey<BR>
bir demet<BR>çiçek<BR>gibi!
</BODY>
| Gerçekten güzel bir şey bir demet çiçek gibi! Önemli Not: Hemen Yukarıda gördüğünüz <BR> yani "Line Break", browsere satırbaşı yapmasını söyleyen HTML etiketidir. Bu açıklamayı atladığımızı farkedip bizi uyaran Ersan beye teşekkür ederim. Eğer sizde böyle eksiklikleri farkederseniz lütfen bir e-mail ile bildirin. |
Umarım gayet açık seçik olarak demek istediğimi anlatmışımdır...
Bir sonraki anlamı kendinden menkul bir etiket
<BODY BGCOLOR="#FFFFFF">
<CENTER>Gerçekten güzel bir şey</CENTER>
</BODY>
|
|
Gördüğünüz gibi ister bir kelime, isterse de tüm sayfanız olsun, <CENTER> etiketinin arasında ne kalırsa, ortalanır. Bitti...
Neredeyse bir kaçtane boş satır yapmayı anlatmasını unutuyordum. Çok kolay, istediğiniz boş satır sayısı kadar, boşluk işaret + satırbaşı etiketi koyunuz.
<BODY BGCOLOR="#FFFFFF">
Gerçekten güzel<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
bir
şeyyyy..
</BODY>
| Gerçekten
güzel bir şeyyyy.. |
Artık resimlerimizi websayfamıza yerleştirmenin zamanı gelmiş bulunuyor. Şimdi bu resimi kullanacağız, sağ tıklayarak resim klasörüne kopyalayın
Bir resmi belirtmek için <IMG> (image) etiketini kullanırız.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>
Aynı zaman da kaynağını ( src = source ) ve ölçülerini ( size ) belirtiriz.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>
|
|
Bir şeyi belirtmeden olmaz. Kaynak yani SRC
resmin hangi resim olduğunu belirtirken, aynı zamanda nerede
olduğunuda bildirir. Yukardaki SRC, "chef.gif", browserin
"chef.gif" adındaki resmi HTML ile aynı directory den yüklemesini
belirtiyor (yani resim dosyası ile HTML dosyanız aynı klasörün içinde
bulunuyor.)
Aşağıda şemalarla anlatmaya çalıştım (ilk baktığınızda
anlamazsanız, gidin kendinize bir kahve yapın, yada mevsim meyvalarından
atıştırın, uykunuz açılsın, tekrar okuyun. Bunların da faydası olmazsa, üzerinde
resim olan herhangi bir web sayfasını sağ tıklayıp, kaynağını görüntüleyin,
bakın nasıl yapmışlar. Gene çözemediyseniz, üzülmeyin, bana da ilk 1-2 sefer
böyle olmuştu, bakın şimdi size ders bile veriyorum :-))), gerçekten,
anlamadığınız şeyleri hiç dert edinmeyin, nasılsa bir gün öğreniyorsunuz.)
 |
SRC="chef.gif" resmin onu çağıran HTML dökümanı ile aynı klasörde olduğu anlamına gelir. |
 |
SRC="images/chef.gif", resmin, onu çağıran HTML dökümanından bir seviye aşağıda başka bir klasörde olduğunu belirtir. Bu daha da ileri seviyelere gidebilir. |
 |
SRC="../chef.gif", resmin, onu çağıran HTML dökümanından bir seviye yukarda olduğunu belirtir. (bir itiraf-moraliniz düzelsin diye- bu satırda yazdıklarımı, sayfayı tercüme ettiğim şu ana kadar ben bile bilmiyordum. Gerçekte bu benim için bir hobi gibi birşey, ama insanlara olabildiğince yardımcı olmaya çalışıyorum, hepsi bu.) |
 |
SRC="../../chef.gif" resmin, onu çağıran HTML dökümanından iki seviye yukarda olduğunu belirtir (yalan yok, yukardaki satırdaki itirafımı bu satır için de tekrarlayabilirsiniz, gerçekten :-))) |
 |
SRC="../images/chef.gif"resmin, onu çağıran HTML dökümanından bir seviye yukarda ve images klasöründe olduğunu belirtir (artık bu sayfa benim itiraflarım sayfasına dönmeden bu konuyu kapamalıyım, çünkü, bir bilen olarak imajım bayağı hasar aldı.) |
| Diyorum ki: | Siz kafanızı fazla karıştırmayın, web alanınızı da saçma bir hale getirmemek için, bütün resimlerinizi resimler diye bir klasörde toplayın sonrada aşağıdaki formatta bir etiketleme yapın. Hepimizin selameti açısından en uygunu budur. Zaten biz amatörlere bukadarı gerçekten yeterli, hem sonra kim görecek ki directorynizi? |
Bu arada bir değişik yoluda resimlerin kaynağının komple bir URL olması. Örneğin, http://www.korfez.net/images/banners/banner_7.gif Bana bir iyilik yapın, web sitenize aşağıdaki linki yerleştirin (yani dersler hepten bedavaya gelmesin bari.)
|
Bir başka IMG özelliği olan ALT tan da bahsetmeden geçemeyiz....
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">
ALT resimin yerine kullanılan bir açıklama yazısının bulunmasıdır. Kullanıcının tarayıcı programının resim yükleme özelliği sayfaların hızlı yüklenmesini sağlamak için kapatılmış, yada sadece metin gösteren bir browser kullanıyor olabilir. Bu gibi durumlarda ALT özelliği önemli olabilir.
Gelelim resimlerin SIZE yani ölçülerrine.
Bunu bir deneyin bakalım...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif">
</BODY>
| |
Gördüğünüz gibi, browser bütün işi kendisi yapıyor, tahminen resmi ölçülendirdi ve görüntüledi. O zaman ölç,yle işimiz ne? Detaylara girmezseniz sayfanız daha çabuk yüklenir.
Güzel tarafı nerede? Şuna bir bakın...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>
|
|
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>
|
|
Dileğidiniz ölçüleri yazabilirsiniz, ve esas ölçülerin
önüne geçersiniz. Şimdi şu kırmızı noktaya bakın -> 
<-. 1x1 ölçüsünde bir kare.
Bakın onunla neler yapabiliyorum...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510
HEIGHT=1><P>
<IMG SRC="red_dot.gif"
WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif"
WIDTH=2 HEIGHT=200></CENTER>
</BODY>
|
|
Nasıl ama?