HTML DERSİ
Hemen Notepad'i açın ve başlayalım...<HTML>
</HTML>
Terimlerin İngilizcesini söylemek zorundayım zira edineceğiniz bütün yardımcı programlarda İngilizce olacak.Yukarıda Kırmızı ile yazılmış şeylere "TAG" yani "etiket" derler. İlki açılış tag idir, ikincisi kapanış tag i. Kapanış tag i yapmak için açılş tag ine / eklediniz mi yeterlidir. Tag lerin hepsinin olmamakla beraber birçoğunun kapanış tag i vardır.
Tag leri Tarayıcınızla konuşmak gibi değerlendirin, daha doğrusu birşeyler yapmasını tarif ediyorsunuz. Şu anda tarayıcıya bunun 'HTML dökümanının başlangıcı olduğunu' söylediniz (<HTML>) ve bununda 'HTML dökümanının sonu' olduğunu söylediniz. (</HTML>). Şimdi içine birşeyler dolduralım.
Her HTML dökümanı bir çift HEAD tag i ister.
<HTML>
<HEAD>
</HEAD>
</HTML>
HEAD Taglerinin bizi ilgilendiren tarafı şimdilik sadece TITLE tagleridir.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
Ve sayfanın geri kalanı ise BODY ( Gövde )tagleri arasında bulunur. Yani şu anda izlediğiniz sayfa bu tagler arasındadır.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Aman, birşey daha, dökümanınıza TITLE ile BODY tagleri arasına giracak birşeyler ilave edelim.
<HTML>
<HEAD>
<TITLE>Benim ilk web denemem!</TITLE>
</HEAD>
<BODY>
Merhaba ilkturk.net!
</BODY>
</HTML>
Şimdi save yapın, fakat text dökümanı değil, html dökümanı olarak. index.html olarak yeni bir klasörün içinde save yapın. Eğer bu biraz kafayı karıştırdı ise şöyle yapın... NotepaddeDosyayı tıklayın sonra Farklı Kaydet.
Çıkan diyalog kutusunda -> 
tıklayarak yeni bir klasör açın, istediğiniz adı verin. Sonra çift tıklayıp açın
Dosya Adı: diyen yere index.html yazın Farklı kaydet: tıklayın. Ama dikkat edin all files(*.*) yada Bütün dosyalar desin.
Enter'a basın ve bitti evet bitti.!
Tebrikler! artık tam fonksiyonlu webdede yayınlanabilecek bir WEB SAYFANIZ oldu. başardınız. İsterseniz SuperTurks veya ilkturk üye alanınızdan file manager ile web alanınıza yollayın. Artık bütün dünya görebilir...
Bir sonraki basamak sayfanıza güzel birşeyler koymak olacak.
Bir sonraki bölüme geçmeden iki önemli nokta
BİR: bu yaptığınız bir iskelet HTML dökümanı idi. Şu anda bu okuduğunuz sayfa dahil bütün fiyakalı web sayfaları bu esas tagleri bulundurmak zorundadır.
İKİ: Döküman <TITLE>Benim ilk web denemem!</TITLE> etiketleri arasında yazılı olanlar entepede tarayıcı penceresinin sol üst köşesinde, lacivert çubuğun üzerinde çıkar. İnanmazsanız kafanızı kaldırıp dediğim yere bakın.
<BODY>
</BODY>
Güzel bir şey yazın.
<BODY>
Güzel bir şey
</BODY>
| Güzel bir şey |
Dökümanda herhangi bir şey değiştirdiniz mi mutlaka "Kayıt" ile saklatın, "Yenile" yi tıklayın ve değişikliği hemen gözlemleyinki ne olduğunu anlayabilesiniz
Sanırım ilk öğrenmemeiz gereken background - fon - renginin nasıl değiştiği.
<BODY BGCOLOR="#FFFF00">
Güzel bir şey
</BODY>
| Güzel bir şey |
Dilerseniz arkaplanı image - resim - de yerleştirebilirsiniz.
DİKKAT : image -resim- sizin HTML dosyanızla (sayfanızla) aynı folder -klasör- de olmalı. Yoksa resimleriniz çıkmaz. Resimleri göremezseniz endişelenmeyin, mutlaka aynı klasörde değildir veya GIF ve JPG dosyalarınızı Türkçe harfler kullanarak isimlendirmiş olabilirsiniz.
Kodun yazılışı ise aşağıdaki gibidir:
<BODY BACKGROUND="fon.gif">
Güzel bir şey
</BODY>
| Güzel bir şey |
İmage in görünebilmesi için aynı HTML dosyanızla aynı klasörde olması gerek. Bunun en kolay yolu , image ın üzerine sağ tıklayıp birinci derste yaptığınız sayfa bilgisayarın hangi bölümünde ise hemen onun yanına Resmi Farklı Kaydet yapın
Eski düz beyaz ekrana gidelim tekrar.
<BODY BGCOLOR="#FFFFFF">
Güzel bir şey
</BODY>
| Güzel bir şey |
İstersek yazıları böyle Kalın yapabiliriz.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <B>şey</B>
</BODY>
| Güzel bir şey |
Aybı kural italikler içinde geçerlidir....
<BODY BGCOLOR="#FFFFFF">
Güzel <I>bir</I> <B>şey</B>
</BODY>
| Güzel bir şey |
vede.. altçizgi.
<BODY BGCOLOR="#FFFFFF">
<U>güzel</U> <I>bir</I> <B>şey</B>
</BODY>
| Güzel bir şey |
Beyaz ekrana tekrar dönelim.
<BODY BGCOLOR="#FFFFFF">
Güzel bir şey
</BODY>
| Güzel bir şey |
İstersek tagleri birlikte kullanabiliriz.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <I><B>şey</B></I>
</BODY>
| Güzel bir şey |
<THIS><THAT></THIS></THAT> Karışık yani HATALI
<THIS><THAT></THAT></THIS> Nested DOĞRUSU BÖYLE
Elbette font size too font ebatlarıda değişir... Nasıl mı? - Çok kolay.
Önce <FONT> taglerini ilave edin...
<BODY BGCOLOR="#FFFFFF">
Güzel bir<FONT>şey</FONT>
</BODY>
Sonra SIZE ebat özelliğini belirtin.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT SIZE=6>şey</FONT>
</BODY>
| Güzel bir şey |
| minik | küçük | normal | büyücek | büyük | gerçekten büyük | jumboo! |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Şimdi iki şeyi tartışalım. <TAG> browsere bir şeyi yapmasını söyler ve ATTRIBUTE ise <TAG> içine girer ve browsere nasıl yapacağını söyler.
İkinci nokta ise defaultlar yani varsayılanlar. Eğer hiçbirşey belirtilmemişse browser varsayılan değerleri atar. Mesela font ölçülerinde varsayılan değer 3 tür. bir şey belirtmezseniz browser 3 varsayarak karakterleri yazar.
Her browserin değişik varsayılan font ayarları vardır. Eğer PCnizi fazla kurcalamadı iseniz varsayılan ayarları " Times New Roman 12pt ve siyah renk tir". Ama ARIAL and COMIC SANS gibi değişik fontlarda vardır.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT FACE="ARIAL">şey</FONT>
</BODY>
| Güzel bir şey |
Benim gibi jetonu geç düşenlere açıklayayım. Olay şu: Sayfa yüklenirken browser ARIAL arar. Bulursa kullanır, bulamadı ozaman HELVETICA yı arar. Bulursa kullanır olmadı LUCIDA SANSı gider bakar. Onuda bulamazsa çaresiz varsayılan fontu kullanır.
Evvet, eğlenceye geri dönelim..
İsterseniz font rengini değiştirebilirsiniz.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT COLOR="#FF0000">şey</FONT>
</BODY>
| Güzel bir şey |
İstersek birden fazla özelliği <TAG> içine yerleştirebiliriz...
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">şey</FONT>
</BODY>
| Güzel birşey |
Elbette bu kadar değil!
<BODY BGCOLOR="#FFFFFF">
Güzel bir <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">şey</FONT></B></I></U>
</BODY>
| Güzel birşey |
Hangisinin önce olduğu mühim değil. Bir şeyi kırmızı ve kalın yapmak için sıra farketmez. İstediğiniz sırada yapabilirsiniz.
Kendinizi ve browserin kafasını karıştırmak için en kestirme yol, etiketlerin sırasını karıştırmaktır. The fastest way to confuse the browser, not to mention yourself is to overlap the tags...
Son olarak: Browserin text rengi, link rengi, aktif link rengi ve ziyaret edilmiş link rengi ve ekran fon rengi için varsayılan değerleri vardır. Şöyleki:
| Text siyahtır Linkler mavi Actif link kırmızı Ziyaret edilmiş link mor
|
Eğer ihtiyacınız olursa bunları değiştirebilirsiniz (ihtiyacınız olursa dedim!) Bütün dünya linkleri mavi görmeğe alışmıştır. Lütfen fazla değişiklik yapıp kafaları karıştırmayın. Bütün döküman içinvarsayılanları <BODY> etiketinin içinde değiştirebilirsiniz.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Güzel bir şey
</BODY>
| Güzel bir şey Şimdi linkleri öğrenmeden neden suyu bulandırıyorsun diyebilirsiniz!! Haklısınız ama yakında linkleri yapmasını nasılsa öğreneceksiniz. Hiç değilse şimdiden renkleri değiştirmesini öğrendiniz. Şimdi görüyorsunuz fon siyah ve text sarı. Linkler şimdi kırmızı Ziyaret edilmiş linkle bordo ve aktif linkler ise yeşil.
|
Dersi kapatmadan, bir şeye dikkatinizi çekmek isterim. Eğer bir sayfanın HTML kodunu merak ediyorsanız, görmek için sayfanın üzerinde sağ tıklayıp, Kaynağı Görüntüleyi tıklarsanız açılan Notepad penceresinden HTML kodunu görürsünüz. Ama sağ tıklamaya kimi arkadaşlar çok mühim keşiflerinide saklamışlarsada zamanı gelişnce sayfayı sağ tıklamaya kapatmanında pek çözüm olmadığını öğrenirsiniz. İyi haftalar..
|
Sanırım artık browserin (tarayıcı program) nasıl çalıştığı hakkında biraz bilgi edinme zamanı geldi. <BODY BGCOLOR="#FFFFFF">
<BODY BGCOLOR="#FFFFFF">
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">
<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">
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">
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">
& ö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.
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. Bu kadar gevezelik yeter artık. Şimdi sizleri sıkmaya başlamadan bir iki şeyin üzerinden çabucak gidiverelim. Ne diyorduk? Hemen şu örneği inceleyin: <BODY BGCOLOR="#FFFFFF">
Umarım gayet açık seçik olarak demek istediğimi anlatmışımdır... Bir sonraki anlamı kendinden menkul bir etiket <BODY BGCOLOR="#FFFFFF">
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">
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">
Aynı zaman da kaynağını ( src = source ) ve ölçülerini ( size ) belirtiriz. <BODY BGCOLOR="#FFFFFF">
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.)
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">
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">
<BODY BGCOLOR="#FFFFFF">
Dileğidiniz ölçüleri yazabilirsiniz, ve esas ölçülerin önüne geçersiniz. Şimdi şu kırmızı noktaya bakın -> <BODY BGCOLOR="#FFFFFF">
|
<-. 1x1 ölçüsünde bir kare. Bakın onunla neler yapabiliyorum...|
Birazda Link vermesi (yada köprü de derler) öğrenelim. Gerçekten çok basit. Örneğin Korfez.net'e bağlanmak için, şunu deneyin... <BODY BGCOLOR="#FFFFFF">
Sonra bir çift anchor etiketi ekleyin. <BODY BGCOLOR="#FFFFFF">
Sonra URL'sini ekleyin ve tamam!.. URL (Universal Resource Locator) demektir. URL esasında basit anlamda adres demektir. <BODY BGCOLOR="#FFFFFF">
Email linki de aynı şekilde çalışır. Sadece sayfa adresi yerine Email adresi kullanırız. <BODY BGCOLOR="#FFFFFF">
Eğer dilerseniz bir resimden de link verebilirsiniz. Yukardaki 'Korfeze Gidin' örneğindeki gidin yerine bir resim koyabiliriz. <BODY BGCOLOR="#FFFFFF">
Not: Adaşımız korfez.com'a her nekadar tanışmasak da bir jest yapmış olalım, olur ya belki yolunuz düşer (ama önce fiyatlarını bir kontrol etmenizi tavsiye ederim.)
<BODY BGCOLOR="#FFFFFF">
Linkler hakkında bir önemli konu daha... Başkalarının sayfalarına sormadan link verebilirsiniz, zaten webi web yapan da bu değil mi? Bizi nasıl buldunuz sanıyorsunuz? Bu arada hazır link vermesini öğrenmişken, bize de link verirseniz memnun oluruz. Hangi adres mi? Kolay, <A HREF="http://www.korfez.net/htm/">En Güzel Web Dersleri</A>
En Güzel Web Dersleri Büyük bir merak ve hevesle link derlemeye başlayabilirsiniz, ama sizden ricam, link vereceğiniz siteleri önce bir inceleyin. Çünkü rasgele link verirseniz, yada herkesin bildiği Yahoo, Altavista yada bizden Superonline, Turk.net gibi sitelere verirseniz kimseye çok fazla bir faydanız olmaz. Ama surf yaparken rasladığınız bir çok güzel site vardır, bence onları iyice inceledikten sonra linklerinizin arasına katınız. Sayfanıza resimler koyarken, unutmatın, sayfanın yüklenme hızı epeyi düşecektir. Resmin kilobyte büyüklüğünü düşürmek için, ölçülerini düşürmek, hatta renk sayısını düşürmek gerekir. Örneğin;
Gördüğünüz gibi, ilk resim, daha büyük, güzel ve kaliteli, fakat şöyle düşünün... resimlerinizi yüklemek, sonsuza kadar sürecekse, ziyaretçileriniz uçup gidecekler ve büyük olasılıkla hiçbir şeyigörmemiş olacaklar, (buna dikkat, sadece resimleri değil, hiçbir şeyi) Resimlerin nasıl küçültüldüğünü aşağıdaki GIF Optimizer'ı deneyerek görün. Resminizi yolluyorsunuz, ve "optimize" olmuş olarak geri geliyor. Unutmayın, Gif Optimizer bu derslerin bir parçası değil, başka bir sunucudaki bir program olup, kullanmak için online olmanız gerekmektedir.
Bir diğer opsiyon, eğer birçok resim göstermek istiyorsanız thumbnail görüntülerini sağlayabilirsiniz. Böylece sayfanın yüklenmesi kısa zaman alabileceği gibi, ziyaretçiler de gerçekten ilgi duydukları resimlerin yüklenmesini zaten bekleyecekleri için, hiç bir yere de gitmezler. Thumbnail resimleri tıklayanlar da daha büyük resmin olduğu sayfaya giderler.
   Daha büyük resmi görmek için thumbnaili tıklayınız. İlk yapacağınız şey, resim editörünüzü çalıştırıp (image editör), resimlerinizin daha küçük versiyonlarınızı yapacaksınız. Bu aynı zamanda resmin renk derinliğini de düşürecektir. Resimlerin küçük versiyonunu yapma işlemi çok önemli. Bazı kimseler thumbnail resimler yapma gayretiyle resmin <IMG> etiketindeki ebatlarını küçültüyorlar, bu da herşeyi iç içe sokmaktan başka bir işe yaramıyor. Bütün yapmanız gereken sadece daha küçük bir kopya yapmak, hepsi bu. Haydi bir tane yapalım, sanırım ben Corvette'i kullanacağım (yani mavi arabayı.) Küçük ve büyük resimleri çalıştığınız klasörün içine koyunuz. <IMG> etiketinizle başlayınız <BODY BGCOLOR="#FFFFFF">
<A> etiketlerini ilave ediniz. <BODY BGCOLOR="#FFFFFF">
URL'yi de eklediniz mi, tamamdır! <BODY BGCOLOR="#FFFFFF">
Bu arada, isterseniz o mavi çerçeveden kurtulmak için aşağıdaki gibi BORDER=0 şeklinde etiketin içine yazmayı unutmayın. <BODY BGCOLOR="#FFFFFF">
Bir başka link verme şekli ise, bir sayfanın tamamı yerine, yalnızca bir kısmına link vermek. Burayı tıklarsanız, gayet hoş biçimde URL'den ilk bahsetmeye başladığımız kısma gidersiniz. Örnek vermesi zor olduğundan size dilim döndüğünce anlatmaya çalışacağım. İlk önce insanları yollamak istediğiniz kısımla işe başlayalım. O bölümün ilk cümlesinin ilk kelimesini bulun, ve <A> etiketlerinin içine alınız. <A>Sonra</A> URL'sini ekleyin ve tamam! İkinci etapta bir isim (NAME) verin. <A NAME="yukari">Sonra</A> URL'sini ekleyin ve tamam! Yaptığınız iş o noktayı işaretlemek oldu. Artık oraya birini yönlendirebilirsiniz. Şimdi ise gönderen bölümün linkini hazırlayalım. <A>Burayı</A> tıklarsanız, gayet hoş biçimde Şimdi de yönlendireceğimiz dökümanı ekleyelim... <A HREF="ders_4.html">Burayı</A> tıklarsanız, gayet hoş biçimde... En son olarak ise anchor NAMEi aşağıdaki gibi bağlayın... <A HREF="lesson04.html#yukari">Burayı</A> tıklarsanız, gayet hoş biçimde... Tamamı bu kadar; gördüğünüz gibi yüksek matematik bilgisi filan gerektirmiyor değil mi?? Gerçekte bu konuyu anasayfadaki menu başlıklarında Sayfa İçine Link Vermek diye ele almıştık, hatta orada da belirttiğimiz gibi Sıkça Sorulan Sorular bölümleri de aynı mantık ile hazırlanmaktadır, dilerseniz tıklayarak bir inceleyin. |
|||||||||||||||||||||||||||||
|
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ı:
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">
Bir başka kullanışlı araç, LIST özelliğidir. ORDERED list'ler ve UNORDERED list'ler vardır.
Önce bir taneUNORDERED list yapalım. Gerçekten çok basittir. Şööyle başlayın <BODY BGCOLOR="#FFFFFF">
Not- teknik olarak henüz listeyi yapmaya başlamadık, bu sadece başlık.
Unordered list etiketlerini ekleyin <BODY BGCOLOR="#FFFFFF">
Liste maddesi ekleyin. <BODY BGCOLOR="#FFFFFF">
Bir kaç tane daha ekleyin... <BODY BGCOLOR="#FFFFFF">
İş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">
Başka bir liste tipi ise definition list'tir.
Hadi başlayalım... <BODY BGCOLOR="#FFFFFF"> Sonra definition başlığını atınız... <BODY BGCOLOR="#FFFFFF">
Definition maddesini yazınız. <BODY BGCOLOR="#FFFFFF">
Rötuş olarak, başlığı kalınlaştırıp, altına da Taffarel'i yerleştirdik mi listemiz biter. <BODY BGCOLOR="#FFFFFF">
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">
Birkaç tane opsiyonumuz vardır. <BODY BGCOLOR="#FFFFFF">
Bunun anlatımı kendinden menkul.. <BODY BGCOLOR="#FFFFFF">
Aynı zamanda kalınlığı da kontrol edebilirsiniz... <BODY BGCOLOR="#FFFFFF">
İçi dolu, tek bir çizgi de yapabilirsiniz <BODY BGCOLOR="#FFFFFF">
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>
Eveet, <PRE> (preformat) etiketleriyle, bunu engelleyip, metnin yazdığımız şekilde görünmesini sağlarız. <BODY BGCOLOR="#FFFFFF">
|/
(@ @)
+----oOO----(_)-----------+
| HTML DERSLERİ |
| herkese |
| lazım |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
* Dikkat, monospaced font kullanılmıştır.
En son yorum etiketini tartışacağız. <BODY BGCOLOR="#FFFFFF">
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?? 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. |
