HTML Dersleri

spider_9600 · 13 Mart 2008

Denizhan Dakılır dedi ki:
Videolu dersler yakında bizi izlemeye devam edin...

walaa vidyolu yapsanız sdn ye ne dua ederim bi Allah bilir bide ben

buraqq · 13 Mart 2008

onair dedi ki:
Dersler başladı, herkes sınıfa

esat23 · 14 Mart 2008

inş videolu derslerde başlar yaw çok süper olur valla ;D ;D ;D

asenadedik · 25 Mart 2008

ben kodları göremiyormuyum ne?

calvaria · 25 Mart 2008

denizhan 7. mesajdaki kodu ben göremedim istersen sende bir bak sorun kimde bi anlayalım istersen ss yollayabilirim.

unattended · 6 Mayıs 2008

arkadaşlar html ile bence site yapmak için Frontpage biçilmiş kaftan. Dreamwaver ide inceledim. Özellik olarak frontpageden kat kat fazla. Ama HTML ile site yaoan birisi zaten o özellikleri kullanamazki. Dreamwaver bence asp ve php ile site yapanlar için daha elverişli olabilir. Ama şunuda söylemek istiyorum. HTML bir yere kadar. yapa yapa bıkıyorsunuz, bi yerden sonra kesmiyor. ASP yada PHP şart. saygılar

uzyr · 9 Temmuz 2008

Dreamweaver 8 bu proğramı nerden bulabilirim veya kullanımı türkçe olanı varmı

HizDellisi · 16 Temmuz 2008

frontpage 2008 çıktımı beyler, 2003 vardı en son daha 2003 mü yoksa 2008 çıktımı??

craftingMaterial · 16 Temmuz 2008

HizDellisi dedi ki:
frontpage 2008 çıktımı beyler, 2003 vardı en son daha 2003 mü yoksa 2008 çıktımı??

frontpage serisi 2003 ile bitti artık expression serisi var

Microsoft® Expression®

Microsoft Expression Web Designer, Frontpage in 2008 versiyonu gibi düşünülebilir...

OLA!!! · 17 Temmuz 2008

bende geldim

nezihdarcin · 6 Ağustos 2008

Sabit başlığı başlatan Denizhan Hoca banned şeklinde yazıyor... neden acaba?
Dersler devam edecek mi? Merak ettim de... (

Yunus ÖZCAN · 14 Ağustos 2008

yani şurda 42 tane mesaj yazılmış iki tane tag açıklanmamış

:uvv::uvv:

craftingMaterial · 14 Ağustos 2008

Yunus ÖZCAN dedi ki:
yani şurda 42 tane mesaj yazılmış iki tane tag açıklanmamış :uvv::uvv:

normal konu sahibi denizhan cünkü. varsa yoksa copy / paste

HRNKC · 29 Ağustos 2008

konuyu göçmüş gördüm ! umarım düzelir...

ev1lcreature · 1 Ocak 2009

hımm

istanbultelekom · 29 Ocak 2009

hımm güzelll

Mehmet_Tahir · 28 Şubat 2009

ben ögrencem bu işi
ama bugun günü degil
akşam başlıyorum
pcyi ögrendik wepmaster yolunda devam edices hade hayırlısı

zeytark · 15 Ağustos 2009

güzel bilgiler teşekkürler

Mehmet Satar · 5 Şubat 2010

Gerçekten faydalı bilgiler var.
HTML'de en önemli olay taglardır aslında. Tagları nasıl kullanacağınızı öğrenirseniz gerisini derleyiciler yardımıyla getirirsiniz zaten. HTML'yi öğrendikten sonra CSS'e geçebilirsiniz. Böylelikle daha kısa kodlar sayesinde görsel açıdan da daha güzel sayfalar oluşturmak zevkli hale gelir.

ivejz · 25 Mart 2010

artık kodlama bilmeyen insanlar programlardan dolayı çok rahat kendi sitesini yapabilirler.

Majeste · 25 Mart 2010

Alttaki çizgiyi soran arkadaşlar onu şöyle yok edebilirler;

HTML:

<html>
<body>

<a href="http://www.shiftdelete.net" style='text-decoration: none;'>ShiftDelete.Com</a>

</body>
</html>

biltekesra · 3 Nisan 2010

arkadaşlar güzel bi çalışma olmuş

teşekkürler...

Fantoma · 8 Mart 2011

DERS 2 :

Html dilinde yazılacak web sayfaları basitçe, Windows işletim sistemlerinde programla beraber kurulan Notepad (Not Defteri) adlı yazılımla hazırlanırlar. Not Defteri, Windows Başlat menüsü / Programlar / Donatılar altında bulunabilir. Bu programın bulunduğu dizin ise Bilgisayarım / C: / Windows klasörü içindedir.
Şimdi Not Defteri uygulamasını bu adreslerle bularak çalıştıralım.

Buradan itibaren yapacağımız işlemlerin bir düzen içinde olmasına dikkat etmek zorundayız. Bu düzenlilik aslında gerekli bir işlem. Artık bir web sayfası oluşturmaya başlayalım.
Şimdi Belgelerim klasörünüzü açın. Klasör açılınca, klasörün boş bir bölgesine mouse (Fare) nizin sağ kısmına tıklayarak New (Yeni) ve Folder (Klasör) adımlarını seçelim.
Açılan yeni klasöre "web" adını verelim.
Neden yeni bir klasör gerekiyor?
Bundan sonra yapacağımız tüm işlemler, web sayfamız/sayfalarımız, görüntü ve ses dosyalarımız artık sadece bu klasörün içinde bulunmak zorunda. Hazırlayacağımız web sayfasının işlevselliğini izleyebilmek için, web sayfamızda kullanacağımız tüm nesnelerin aynı klasörde bulunması gerekmektedir.
Şimdi web tarayıcımızı açalım. Web'de gezinirken değişik bir tarayıcı kullanabilirsiniz ancak işlemlerimizi Internet Explorer'da yapacağız. İşletim sistemi Windows, bu sisteme de en uygun tarayıcı yine Microsoft firmasının tarayıcısıdır. Şimdi, tarayıcımızı İnternete bağlı değilken açalım. Web tarayıcınızın İnternete her girdiğinizde sizin favori web sitenizle açılıyor olabilmesi de bir olasılık. Biz kendi uygulamalarımızı işleme koyabilmek için Blank (Boş) bir sayfa açmak zorundayız. Bunun için tarayacımızın Tools (Araçlar) menüsünü açalım. En alttaki Internet Options (İnternet Seçenekleri) sekmesini tıklayarak açılan pencerede About:Blank (Boş Kullan) seçeneğine tıklayalım. Tarayıcımızı kapatıp tekrar açtığımızda karşımıza boş bir sayfa gelecektir.
Bu durumda iken View (Görünüm) menüsünü açalım. Altta Source (Kaynak) sekmesine tıklayalım. İşte Not Defteri uygulamamız tekrar karşımızda.
Şimdi Not Defteri uygulamamızı File (Dosya) menüsünden Save As.. (Farklı Kaydet..) adımı ile Web adlı klasörümüzün içine adına index diyerek kaydedelim. Dikkat ederseniz bu dosya bir .txt soyadlı dosya olarak kaydedildi. Şimdi web adlı klasörümüzü açalım. index.txt dosyasının adını index.html olarak değiştirelim. Windows sistemi "Dosya uzantısını değiştirirseniz dosya kullanılamayabilir" gibi bir ikaz verecektir. Biz tamama basalım.
İçi şimdilik bomboş olsa da işte ilk web sayfamız bu.
Internette yayınlanması düşünülen sayfaların soyadlarını ya sayfaadı.html veya sayfaadı.htm olarak kullanabilirsiniz.

---------- Post added at 12:14 ---------- Previous post was at 12:12 ----------

DERS : 3

Artık bu boş sayfayı gerçek, yani yayınlanabilir bir web sayfası haline getirmeye başlayalım.
Şimdi tarayıcı açıp tekrar Görünüm / Kaynak adımlarını tıklayıp Not Defterimizi açalım. Not defterimize İşte ilk sayfam yazalım. Not Defterinin üzerindeki Dosya / Kaydet adımlarını izleyerek bu sayfamızı bilgisayarımıza kaydedelim. Burada Alt ve Tab tuşlarına basarak tarayıcımıza geri dönelim. Şimdi önümüzde boş olarak duran tarayıcı penceresini görüyoruz hala. Hemen (MS Internet Explorer için) F5 tuşuna veya (Netscape Navigator için) Ctrl + R tuşlarına basalım. (Uygulamalarda F5 tuşu İnternet Explorer, Ctrl + R tuşu Netscape Navigator tarayıcılarında kullanılır.) Tarayıcınıza dokunan sihirli değnek çalıştı ve tarayıcı penceresinde "İşte ilk sayfam" yazısını gördünüz.
Ama daha tam manasıyla bir web sayfası elde etmedik.
Bu sayfanın web sayfası sayılabilmesi için her web sayfasında bulunması gereken temel 4 takının bulunması gerekiyor.
Şimdi bu temel 4 takıyı görelim ve hazırladığımız sayfa tam bir web sayfası olsun.
Bu takıların ilki <html></html> takısıdır. Kural olarak her web sayfası <html> takısı ile başlatılır ve sayfanın tüm işlemleri bittikten sonra sayfanın en altında, cümle sonundaki nokta işareti gibi, </html> takısı ile kapatılır. Çok değişik bir iki istisna dışında bu bir kuraldır.
İkinci temel takımız <head></head> takısıdır. Bu takının işlevi, arasına yazılacak özel işlev gördürmeye yarayan ekstra takıların çalışmasını sağlamaktır. Bir örnek vermek gerekirse, sayfamızın dili, yayıncısı, içeriği, copyright yani yayın hakları, Internetteki arama motoru denilen özel sitelerce izlenip, izlenmemesi gibi özel durumların belirtildiği ve Meta Takıları denilen takıların yer aldığı bölümdür. Meta takılar, <head></head> takısı içerisinde aşağıdaki gibi yer alırlar.
<head>
<meta NAME="Language" **********turkish english">
<meta NAME="Robots" **********Index, Follow">
</head>
Bunun gibi, Java Script veya CSS (Cascading Style Sheets) yani Katmanlı Stil Sayfaları gibi bazı özel kodlar da tarayıcıyı yapılması gereken emirlerin verilmesi amacı ile bu bölüme eklenmek zorundadır.
Üçüncü temel takımız <title></title> takısıdır. Bu takının anlamı (başlık) demektir. İşlevi ise, bir web sitesi açılınca tarayıcımızın üstteki Başlık çubuğunda sitemizin adını, içeriğini vb. görüntületmektir.
Dördüncü ve son takımız <body></body> takısıdır. Anlamı (gövde) olan <body> takısı açıldıktan sonra tüm web sitemizin içeriğini yazıp, resimleri, diğer grafikleri, belki müzikleri ekledikten sonra bu sayfa ile artık işimizi bitirip yayına hazır hale getirdiğimizde sayfamızı </html> takısıyla kapatmadan önce </body>takısı yazarak bitiririz.
Şimdi Not Defteri uygulamasını çalıştıralım ve sıarası ile;
<html>
<head></head>
<title>Benim Sayfam</title>
<body>İşte bu benim ilk, gerçek web sayfam
</body>
</html>
yazalım. Not defterimizin Dosya / Kaydet adımlarıyla kaydedelim. Not Defterimizi kapatıp, tarayıcımız açıkken F5 tuşuna basalım.
Şimdi taracımızın en üstünde "Benim Sayfam" ana sayfasında da "İşte bu benim ilk, gerçek web sayfam" ibarelerini görmüş olmalısınız.
Evet, gerçekten de html dili kullanılarak yazılmış gerçek bir web sayfanız var artık.
Tags : (Takılar)
İlk web sayfamızı hazırlarken Tag (Takı) kelimesini çokça kullandık.
Nedir bu Takı?
Html'nin basitçe bir program dili olduğunu bir önceki sayfamızda söylemiştik. Bu dilin bir web sayfasında kullanılması çok geniş bir yelpazesi olan Takılar sayesinde olur. Sayfamızı bir takı ile başlatırız, yazdığımız tüm yazılara renk, kalınlık vb. özellikleri takılarla sağlarız. Takılarla tablolar yapar, çerçeveler yaratırız. Kısaca sayfamıza kazandıracağımız her özellik bu takılar sayesinde gerçekleşebilir. takılar <> </> işaretleri ile diğer metinlerden ayrılırlar. Düz olarak yazdığımız bir yazıya bir takım fonksiyonlar kazandırmak için bir tür komut vermek gerektiğinde, örneğin yazının kalın olmasını sağlamak için, kalın olmasını istediğimiz bölümün önüne <b> takısını ekler, kalın kısmın bitiminde </b> takısıyla kapatırız.
Takılar <> işaretleri ile başlatılır ve bir iki istisna dışında komut uyygulamasının sonunda </> işaretleriyle kapatılır.
Bir üst paragrafta, <head></head> takısının içeriğini örneklerken;
<meta NAME="Language" **********turkish english">
şeklinde bir takı kullanıldığını belirtmiştim. Dikkat ederseniz <> işaretleri ile açıldığı halde bu takı </> işaretiyle kapatılmadı. Bu özel bir takı olduğu ve içeriğini komut olarak tarayıcıya gönderdiği için, takının kapatılması gerekmiyor.
Bu tür istisnalar dışında takılar </> işaretiyle kapatılırlar. Eğer kapatılmazlarsa sayfa sonuna dek aynı işlemi vurgulamaya devam ederler.
Tarayıcı özellikleri :
İnternet uygulaması yaygınlaşmaya başlayınca gerek Windows işletim sisteminin yapımcısı Microsoft, gerekse ona rakip olan firmalar zamanla, işletim sistemi konusunda olduğu gibi, web tarayıcılarında da rekabete başladılar. Microsoft'un İnternet Explorer programına karşı çeşitli tarayıcılar geliştirildi. İlk dönemlerde Netscape firmasının Navigator'u, Exploreri oldukça zorladı ise de, zaman içinder itibarını kaybetmeye başladı. Araya bir de Opera gibi daha özgün yazılımlar girdi. Günümüze gelindiğinde, Netscape firması Mozilla adlı açık kaynak kodlu bir yazılımla Explorer'in tahtını sallayarak firmanın eski itibarını kazanmasına neden oldu.
Günümüzde, hemen hemen aynı yapıda geliştirilen bu tarayıcılarla, aralarında önceleri kaynaklanan uyuşmazlıklar da önlenmiş oldu. Bu durumda web sayfalarının İnternet'den yayınlanması esnasında oluşabilecek uyumlar, adeta standart bir duruma geldi.
Web sitelerinin yayınlanmasında sabit bir standart olmamasına karşın, web sitemizin yayını esnasında bazı özellikleri de göz önünde bulundurmakta fayda var. Bunların en önemlisi ekran çözünürlüğü.
Ekran çözünürlüğü, sabit olmayıp, kişilerin beğenilerine göre ayarlanabilir olduğu için, hazırladığımız ve bize göre uygun bir görünüme sahip web sayfasının, diğer kullanıcılar, yani ziyaretçilerimiz açısından da rahatça izlenebilmesi için kullandığımız ekran çözünürlüğünü ziyaretçilerime bir not oılarak aktarmakta fayda var.
Kullanılan yaygın ekran çözünürlüğü 800 X 600 piksel ve 16 bit renk derinliğinde olanıdır. Bu, ekranımızın soldan sağa (boyuna) 800, yukarıdan aşağı (enine) 600 piksel (noktacıkla) görüntüleri vermesi demektir. Ancak görüntünün 1024 X 768 ve daha değişik ekran çözünürlüklerinde de ayarlanabilmesi olası. Yani yatay 1024, düşey 768 noktacık düşen bir ekran. Bu durumda görüntünün daha ufaldığı, adeta pencere ve simgelerin minik minik kaldığı gözlenebilir.
Kişilerin beğenileri her ne olursa olsun, web sayfalarının görünümünde en çok uygulanan usul 800 X 600 ekran çözünürlüğü kullanmaktır. Siz de web sitenenizi bu ölçütte boyutlanmdırmaya ve ziyaretçilerinizi " Web sitem en düzgün 800 X 600 ekran çözünürlüğünde görüntülenir." gibi bir ibare ile bilgilendirmenize dikkat etmeyi unutmayın

Fantoma · 9 Mart 2011

DERS : 4

Fonts : Yazı Tipleri

Önceki sayfalarda belirtilen temel unsurlardan sonra artık web sayfamıza değişik görünümler kazandırmaya başlayalım.
İlk etapta web sayfamızın içinde yer alacak olan (Font) yani yazı karakterlerini tanıyalım ve yazı karakterlerini web sayfamız içinde nasıl kullanabileceğimizi öğrenelim.
Font (Yazı karakteri) :
Web sayfamıza eklediğimiz her yazının değişik bir çok karakteri olabilir. Genellikle Arial, Bookman Old Style, Comic Sans MS, Courier, Tahoma, Verdana, MS Sans Serif gibi yapımcısının koyduğu isimlerle anılırlar.
Merhaba (Arial yazı tipi)
Merhaba (Bookman Old Style yazı tipi)
Merhaba (Comic Sans MS yazı tipi)
Merhaba (Courier yazı tipi)
Merhaba (MS Sans Serif yazı tipi)
Merhaba(Times New Roman yazı tipi)
Gördüğünüz gibi yazı karakterleri yapımcıları değişik şekillerde, yazılara değişik görünümler kazandırırlar. Bu yazı karakterlerinin ne şekilde olduğunu izlemek için bilgisayarınızın;
C: / Windows / Fonts Klasörünü açarak ve font isimlerine tek tek tıklayarak bir fikir sahibi olabilirsiniz. Ayrıca İnternette genellikle grafik ağırlıklı bir çok web sitesinde daha değişik bir çok font bulma olasılığınız da mevcut.
Fakat, bu konuda çok önemli bir iki hatırlatma yapmamda fayda var.
Biz, her ne kadar kendi dilimizde yani Türkçe bir site yapmayı planlıyorsak da, İnternetin ana kullanım dili İngilizcedir. Size ücretsiz olarak font sunan (ki, özellikle bazı tanınmış font siteleri bile vardır.) web sitelerinden indireceğiniz fontlar büyük bir çoğunlukla sizin düşündüğünüz gibi bir sonuç vermeyecektir. Dilimizde bulunan özel harfler (örn.: ö, ü, ş, ç,..gibi) ingilizcede bulunmadığı ve font yapımcılarının büyük bir çoğunluğu da global kullanım dili olan İngilizceyi kullandıkları için, indireceğiniz yazı karakterleri ile hazırladığınız yazılarınız ziyaretçilerinizin tarayıcılarında aynı yazı karakterleri kurulu olmaması nedeniyle istediğiniz etkiyi yaratamayacaktır. Her tarayıcının default ( kullanılan) bir yazı tipi vardır. İşte sizin özene bezene hazırladığınız sayfa ziyaretçinizin default yazı karakteri ile görüntülenecektir. Ekran çözünürlüğü konusunda olduğu gibi (Benim sitem filanca yazı karakteri ile en iyi görüntülenir) diyecek bir lüksümüz bulunmadığına göre ne yapabiliriz?
Bunun en doğru çözümü, Windows işletim sisteminin her bilgisayara kurduğu (ki, sizin bilgisayarınızda da aynısı vardır.) standart yazı karakterlerini kullanmaktır.
Peki, hiç bir yazı karakteri indirmeyelim mi? İndirin. Ancak önemle vurgulanması gereken bir uyarıyı daha belirterek size yardımcı olayım.
Sisteminizin zaman içinde çökmemesi için yüzlerce yazı karakteri indirmeyin! Yeterli sayıda (20 - 50) yazı karakteri indirip, kullanabilirsiniz.(Sitelerdeki yazı karakteri dosyaları genellikle (zip) ile sıkıştırılmış dosyalardır. İndirme bittikten sonra - Lütfen İnternet üzerinden indirdiğiniz her dosyayı virus taramasından geçirmeden kullanmayın! - açtığınız zipli dosyanın içinde bulunan (.ttf = True Type Font) soyadlı dosyayı C: / Windows / Fonts klasörü içine extract edin (çıkartın).
Bilgisayarınızda Windows işletim sisteminin kurulumu ile gelen standart yazı tipleri, web sayfanız içindeki yazı tipleri kullanımına uygundur.
Buna karşın, çeşitli yazı tipi sağlayan web sitelerinden üstte değindiğim standart yazı tipleri dışında da değişik yazı tipleri bulabilirsiniz.
Bu yazı tiplerini web sayfanızda kullanmak için özel bir işleme tabi tutmanız gerekmektedir.
Bunu yapabilmek için Internette kimi Photoshop gibi ücretli, kimi Gimp gibi açık kaynak kodlu ve ücretsiz bir grafik editörü edinmelisiniz.
Bu editörlerin yazım tasarımı gereci ile yapacağınız standart boyutlu banner, yani ilan bandı veya değişik boyutlarda benzer ilan ve reklam bantları hazırlayabilir,
bu alanda dilediğiniz yazı tipini kullanabilirsiniz. Bu işlemi bir resim formatı ile (jpg, gif, png, bmp) soyadlı olarak kaydedebilirsiniz.
Neticede hazırladığınız bir resim dosyası olacağından sayfanıza eklediğinizde, ziyaretçinizin bilgisayarında kullandığınız yazı karakteri bulunmasa dahi,
eklenen resim dosyası formatı olması dolayısıyla olduğu gibi görüntülebecektir.
Yapılan işlem dışında, sayfanıza kod olarak ekleyeceğiniz karakterler, ziyaretçinizin tarayıcısının ancak varsayılan yazı karakteri olarak görülebilir.
Bir örnek vermek gerekirse, sayfanızı her bilgisayarda yüklü gelen Arial yazı tipiyle yazarsanız ziyaretçiniz yazı tipini Arial, ama diyelim ki yazılarınızı dışardan beğenip indirdiğiniz Copper
Gothic Bold yazı karakteriyle yazarsanız, ziyaretçinizin bilgisayarının varsayılan yazı karakteri Arial ise, yazdığınız yazılar sadece Arial olarak görüntülenecektir.

Windows klasöründe yazı karakterlerini bir miktar tanıdıktan sonra, ilk etapta bu karakterin isimlerini bir kenara kaydedin. Sitenizdeki yazılara nasıl bir takı uygulayacağımızı göreceğimiz bu kısımda, siz de aynı işlemi kağıda not aldığınız yazı karakterlerini kullanarak uygulayın.
Şimdi tarayıcımızı açıp, Görünüm / Kaynak adımlarından web sayfamızı Not defteri ile açalım.
<font face=Arial>Merhaba</font>
satırını yazalım ve Dosya / Kaydet menüsünden kaydedelim. Alt ve Tab tuşlarına basarak tarayıcımıza geri dönelim ve F5 tuşuna basalım. Merhaba yazısı "Arial" yazı karakteri ile karşımızda. <font face=Arial> takısı içindeki yazı karakterini bir deftere kaydettiğimiz diğer yazı karakterleri ile deneyelim.
Yazı karakterimize hangi işlemleri uygulayabiliriz?
Hazırlayacağımız web sayfasının içinde kullanacağımız yazı karakteri / leri'ne bazı özel görünümler verebiliriz. Bu işlemleri takılara çeşitli parametreler uygulayarak yapabiliriz.
Tekrar Not Defterini açalım.
<font face=Arial>Merhaba. Adım Ali. <b> Web siteme hoşgeldiniz.</b></font>
Dikkat ettiyseniz yazı <font> takısını açtık. Takının içine yazı karakteri parametresini face ekledik, bir cümle yazdık ve araya <b> takısını ekledik. Bu takı vurgulamayı düşündüğümüz yazının Bold (Kalın) olmasını sağladı. Vurgulamayı düşündüğümüz kısım bitince önce </b> takısını, ardından yazı takısını kapattık.
Yazımızı kalınlaştırmaya yarayan <b> ve </b> takılarından sonra yazı karakterini kapamayıp, yazımıza devam edebiliriz.
<font face=Arial>Merhaba. Adım Ali. <b> Web siteme hoşgeldiniz.</b>Sizlere hoşça zaman geçireceğinizi garanti ediyorum.</font>
Bu iki satırdan sonra yazdıkalrımızı kaydedelim Alt ve Tab tuşları ile tarayıcımıza dönelim. F5 tuşuna bastığımızda bu açıklamaların nasıl bir sonuç verdiğini görelim.

İşte yazdığımız yazının uygulaması
Not defterimizi tekrar açalım.
<font face=Arial>Merhaba. Adım Ali. <i> Web siteme hoşgeldiniz.</i></font>
Şimdi yazdıklarımız arasına eklediğimiz, <i></i> takısı yazımızın İtalik (Sağa Yatık) olmasını sağladı. Bunu görmek için sayfamızı kaydedelim ve tarayıcımız açıkken F5 tuşuna basalım. Gördüğünüz gibi yazımız İtalik (Sağa Yatık) oldu.
Unutmayın.
Kullandığımız takıları </> işaretleri ile sonlandırmadığımız sürece takı işlevini devam ettirmek mecburiyetindedir.
Örneğimizde olduğu gibi İtalik olmasını istediğimiz bölümün sonunda eğer </i> takısını koymasaydık, yazdıklarımız sayfamızın sonuna dek İtalik olarak kalacaktı.

Yazımızı renklendirelim :
Web sayfamızın içine yazımızı yazıyoruz. Önemli kısımları <b> ve </b> takısı ile Bold, yani kalın yapıyoruz. Gerekli gördüğümüz kısımları ise <i> ve </i> takıları ile İtalik yana sağa yatık hale getiriyoruz. Peki yazımızı (veya istediğimiz bir bölümü) nasıl renklendiririz?
Bu işlemi gerçekleştirebilmek için, <font> takımızın içine Color (renk) parametresini eklememiz gerekmektedir. Not Defterimizi açalım.
<font color=red>Bu yazının rengi kırmızıdır.</font>
Eğer bu sayfayı kaydedip tarayıcımızda bakarsak kırmızı renkli bir yazı görürüz.
Bu uygulamayı şöyle de uygulayabiliriz.
Yazının bu kısmının rengi <font color=red>kırmızıdır.</font>
Ancak herhangi bir yazı karakteri kullanmak istersek yazımızı aşağıdaki gibi düzenlememiz gerekecektir.
<font face=Arial color=red>Bu yazı kırmızı renkli Arial karakterle yazılmıştır.</font>
Bu yazıda bir değişiklik dikkatinizi hemen çekti sanırım.
<font> takısının içinde hem face ve hem de color parametrelerini birlikte kullandık.
Yazdıklarımızı kaydedip, tarayıcımızda izlediğimizde Arial karakterli ve kırmızı renkli bir yazı göreceğiz demektir.
Önemli : Takılar içinde birden çok parametre kullanabiliriz.
Öyleyse hemen değişik bir uygulama yapmaya başlayalım. Not defterinize alttaki satırları yazın.
<font face=Arial color=black>Bu yazıyı yazarken </font><font face=Tahoma color=red>bu bölümün kırmızı.</font> <font face=Comic Sans MS color=red><b>bu bölümün kırmızı ve kalın</b></font> <font face=Arial color=red><i>bu bölümün kırmızı ve italik</i></font> <font face=Arial color=black>olmasıni istemiştim. </font>
Şimdi bu yazdıklarımızı kaydederek tarayıcımızda bakalım. Yazdığımız yazı karakterlerine uygun önce Arial ve siyah, peşinden Tahoma ve kırmızı, ardından Comic Sans MS ve kırmızı ayrıca kalın, son olarak da Arial ve kırmızı ve italik ile yine Arial ve siyah bir yazı görmüş olmalıyız.

İşte bu yazımızın örneği.
Bu arada, yazdığımız örneklerde Not Defterimizi kulanırken, html dilinin temel kurallarını gösteren bir önceki sayfada belirttiğim ve bir web sayfasının vazgeçilmez ana takıları olan;
<html>
<head></head>
<title>Benim Sayfam</title>
<body></body>
</html>
kalıbını MUTLAKA her işleme eklemeyi unutmadığınızı varsayıyorum.
Ben örnekleri basitçe göstermek için bu sayfaya bu ana takıları eklemedim. Ancak ilerki sayfalarda artık devamlı ekleyeceğim. Bu sayfadaki yazdıklarım ise bir tür sınama. Bu kalıbı hiç unutmamak ve bir el uzluğu kazanmak için sizin verilen örnekleri bu standart takıları kullanarak hazırlamanızı öneriyorum.
Bir de sakın, "bu takıları ana html takılarının neresine ekleyeceğim?" gibi bir soru sormayı aklınızdan geçirmeyin.
Bildiğiniz gibi standart tüm uygulamalar <body> ve </body> takıları arasına eklenmelidir.
Öyleyse, en son örneğimizi sizin,
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial color=black>Bu yazıyı yazarken </font><font face=Tahoma color=red>bu bölümün kırmızı.</font> <font face=Comic Sans MS color=red><b>bu bölümün kırmızı ve kalın</b></font> <font face=Arial color=red><i>bu bölümün kırmızı ve italik</i></font> <font face=Arial color=black>olmasıni istemiştim. </font></body>
</html>
şeklinde yazmış olmanız gerekiyor.

Yazı takısında kullanılan diğer parametreler :
Web sayfamızda ziyaretçilerimizle iletişim kurmanın, sitemizi tanıtmanın, ilgili bağlantılara yönlendirmenin, kısacası onlara sitemizi sevdirmemizin ilk yolu düzgün bir anlatım, sade bir tasarım ile gerçekleşebilir. Bunun ilk etabı ise yazılardır.
Bu adıma kadar yazı <font> takısına eklenen "face" parametresini, yazımızı kalınlaştırmayı sağlayan <b> takısını, italik bir yazı haline getirmye yarayan <i> takısını kullanmayı gördük.
Peki yazdığımız yazının önemini vurgulamak için altını çizmek gerekirse ne yapalım?
Bu işlem de basit bir takı olan <u></u> takısıyla olur.
Not Defterimizi açalım ve alttaki satırları ekleyelim.
<html>
<head></head>
<title>Benim Sayfam</title>
<body>Ben bu satırları yazdım ama <u>burası daha önemli</u></body>
</html>
Yazdıklarımızı kaydedip, tarayıcımıza dönelim ve F5 tuşuna basalım. Gördüğünüz gibi, "burası daha önemli" ibaresinin altı çizgili oluverdi.
İyi, güzel de yazılarımızın boyutlarını da değiştiremez miyiz?
Elbette değiştirebiliriz.
Yazdığımız yazını boyutunu değiştirebilmek için, yazı takımızın içine bir "size" (ölçüt) parametresi eklememiz ve yazımızın boyutunu belirtmemiz yeterlidir. Not Defterinize bu satırları yazın.
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial color=blue size=5>Bu yazı çok büyük oldu.</font></body>
</html>

İşte yazı takımıza eklediğimiz "size" yani boyut parametresine "5" değeri atanınca görünüm böyle olur.
Şimdi buraya kadar öğrendiklerinizle bir yazı yazın, yazınıza renk verin, puntosunu (basılı medyada yazı boyutuna "punto" denir) değiştirin, kalınlaştırın, italık yapın, altı çizgili yapın ve değişik parametleri uygulayarak elinizi alıştırın.
Sayfamızın bir de başlığı olsun :
Hazırlayacağımız web sayfasının içinde kullanacağımız bazı kısımlar başlık olarak kullanılmak istenebilir. Başlık olarak betimlenecek kelime veya cümle, yazımızın puntosunu büyültmekle <font size=1> ufak bir punto <font size=5> büyük bir punto, sağlanabileceği gibi,sadece başlık için kullanılan takılarla da sağlanabilir.
Tekrar Not Defterini açalım.
<h1>Merhaba. Adım Ali. </h1>
<h2>Merhaba. Adım Ali. </h2>
<h3>Merhaba. Adım Ali. </h3>
<h4>Merhaba. Adım Ali. </h4>
<h5>Merhaba. Adım Ali. </h5>
<h6>Merhaba. Adım Ali. </h6>
Bu satırları aynen yazdığımız Not defterimizi kaydedelim ve F5'e basarak tarayıcımızda bakalım.
<h1></h1> içinde kocaman, <h6></h6> içinde daha ufak bir başlık yazmış olduk.
İşte <h> takısının marifetleri
Başlık takısının yanında yazı karakterini betimleyecek "font" takısını da ekleyebilir, böylece istediğiniz yazı karakterinde bir başlık elde etmiş olursunuz.
<h1><font face="Arial">ddddd</font></h1>
Böylece yazı <font> takısına 3 adet de parametre ekleyebileceğimizi öğrenmiş olduk.
<face> parametresi : Yazımızın hangi tip yazı (harf) karekteri ile yazılmasını istiyorsak bu parametreyi kullanacağız. Örneğin : <font face=Arial>
<size> parametresi : Yazımızın kaç punto olmasını istiyorsak bu parametreyi kullanacağız. Örneğin : <font size=3>
<color> parametresi : Yazımızın hangi renk olmasını istiyorsak bu parametreyi kullanacağız. Örneğin : <font color=yellow>
Bir de hiç unutulmayacak önemli hususu bir kez daha anımsatayım : Takılara birden çok parametre atarken iki parametre arasına klavyemizin aralık tuşu ile bir aralık bırakacağız.
Yazı konusunda bir örnek : <font face=Times New Roman size=3 color=grey>Ali</font>
Web sitemize ekleyeceğimiz yazılar, yazı parametreleri ve yazı ile ilgili diğer takılardan sonra sıra geldi yazımızı sayfamıza yerleştirmeye. Öyle ya! Bir satır başı yapmamız gerekebilir, yazımızı sayfamızın istediğimiz bir bölümüne yazmamız gerekebilir kısaca yazacaklarımızı bir uslup içinde sitemize koymamız gerekir.
Yazacağımız yazılar web sayfamızın yapımında önemli bir yer tutar. Ziyaretçilerimize meramımızı anlatmak için yazıları, resimleri web sayfasının içine belli bir düzene göre yerleştirmeliyiz ki, kolay okunsun, kolay anlaşılsın.
Şimdi Not Defterimizi tekrar açalım.
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial size=2 color=blue>Ben bu yazıları düzgün olarak yazıyorum ama satır bitince alt satıra geçemiyorum
Klavyemin Enter tuşuna bastım. Alt satıra geçtim. Bakalım ne olacak?</font>
</body>
</html>
Bu satırları yazarak yazdıklarımızı kaydedelim ve tarayıcımızın F5 tuşuna basarak yaptıklarımızı görelim.

Görüldüğü gibi "Enter" tuşuna basarak yazdığımız yazıdan alt satıra geçemiyoruz.
Peki, ne yapmalıyız ? Şimdi alttaki bağlantıya tıklayın ve çalışmalarımıza devam edelim.

Sayfa düzeni :
Web sayfamızda yazılarımızın bir düzen içinde sunulması için paragraf ve satır özelliklerini kullanmak zorundayız.
Web sayfamızda yazıların bir tertip ve düzen içinde bulunması için, yazdıklarımızı çalakalem yazmak yerine belirli yerlerde satır takısı ekleyerek bir alt satıra, paragraf takısı ekleyerek bir alt paragrafa geçmemiz gerekir. Bir önceki sayfamızda denediğimiz gibi satır sonunda klavyemizin "Enter" tuşuna basmakla Not Defterimizde bir satır aşağıya geçmiş gibi görünsek de bu eylem web sayfasına bu görünümde yansımaz.
Şimdi tekrar Not Defteri uygulamamızı açalım ve alttaki satırları aynen yazalım.
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial size=5 color=black><p>Yazımı buradan başlayarak yazmaya başladım </p><p>buradan itibaren alt paragraftan devam ediyorum</p></font>
</body>
</html>
Yazdıklarımızı kaydedip, tarayıcımıza dönelim ve F5 tuşuna basalım.

Gördüğünüz gibi, küçük bir takı ile alt paragrafa geçiverdik.
Bu işlemi gerçekleştirmek için <p> ve </p> takısını kullandık. Bu takı, paragraf ayırma takısı olduğu için yazımızı bir satır atlatarak ikinci satırdan başlattı. Yani, önceki örnekte "Enter" tuşuyla yapmaya çalıştığımız işi gerçekleştirdi. <p> takısının diğer parametrelerine geçmeden özel bir takı daha tanıtmamız gerekiyor.
Bu yeni takımızın adı <br>. Bu takı yazıyı <p>takısında olduğu gibi yazımızı bir paragraf (yani iki satır) değil sadece bir satır atlatır.
<br> takısının en önemli bir özelliği de kullanmaya başladıktan sonra </> işaretiyle kapatılmasına gerek olmamasıdır.
Şimdi Not Defterimizi açalım ve <br> takısının nasıl bir işlev sağladığını görelim.
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial size=5 color=black>Yazımı buradan başlayarak yazmaya başladım <br>buradan itibaren alt satırdan devam ediyorum</font>
</body>
</html>
Şimdi kaydettiğimiz yazıya tarayıcımızdan bakarsak aşağıdaki gibi bir sayfa ile karşılaşmamız gerekiyor.

İşte <br> takısını kullandık ve bir alt satıra (paragrafa değil) geçtik.
Bu iki takının daha iyi anlaşılması bakımından iki takıyı da kullanarak bir örnek daha yapalım.
Not Dfterimizi aşağıdaki satırları yazıp, kaydedelim ve tarayıcızda bakalım.
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial size=5 color=black>Yazımı buradan başlayarak yazmaya başladım <br>buradan itibaren alt satırdan devam ediyorum<p>
Buradan sonrasın ise alt paragraftan devam edeceğim.</p></font>
</body>
</html>

Bir satır yazdık.<br> takısıyla alt satıra geçtik. İkinci cümlemizden sonra <p> takısını kullanarak bir paragraf aralığı bırakarak devam ettik.
Diğer takılarda olduğu gibi <p> takısına da bazı değişik işlevsellikler kazandırabilmek için bir takım parametreler ekleyebiliriz.
Ekleyeceğimz bu parametreler yazımızı sayfamızın içinde nereye yerleştireceğimizi sağlamamıza yardımcı olmak için kullanılırlar.
Şimdi Not Defterinizi açıp, alttaki satırları aynen yazın. Sayfayı kaydedin ve tarayıcının F5 tuşuna basın.
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial size=5 color=black><p align=left>Yazımı buradan başlayarak yazmaya başladım.</p> <p align=right>Buradan itibaren sağdan devam ediyorum.</p><p align=center>Bu kısmı ortaya yazmak istedim</p><p>Şimdi yine sol taraftan devam edeceğim</font>
</body>
</html>

İşte <p> takımıza eklediğimiz üç adet parametre ile yazımızı sayfamızın soluna, sağına ve ortasına yerleştirdik.
Bu işleri başarmak için <p> takımızın içine eklediğimiz " align" parametresi ve atadığımız yerleri kullanıyoruz.
<p align=left> parametresi ile yazımızı tarayıcımızın sol kısmından,
<p align=right> parametresi ile sağ kısmından,
<p align=center> parametresi ile tarayıcımızın ortasından başlattık.

---------- Post added at 00:25 ---------- Previous post was at 00:16 ----------

DERS : 5

Web sayfasında renk uygulamaları

Web sayfamızda bundan önceki yazı başlığında bir mikdar renk kavramına değinmiştik. Ancak elbette ki, temel renkler dışında kalan ve ana renklerden türetilen milyonlarca renk tonunu yazı olarak sayfamızda kullanacağımız renklendirme düzeninde kullanamayız. Bu nedenle html dilinin standartlarını koyanlarca saptanmış özel bir sistemi kullanmak zorundayız. Bu sistem nasıl çalışıyor?
Renklerin ve renk tonlarının oluşturulması :
Dünyadaki varolan tüm renklerin aslında üç ana renkten meydana geldiğini belki biliyorsunuz. Bu temel üç renk kırmızı, yeşil ve mavidir. İşte web sitelerinde kullanacaımız tüm renkler bu üç rengin karıştırılması ile elde edilir. Bu tür kodlamaya R(Red=Kırmızı) G (Green=Yeşil) B (Blue=Mavi) denmiştir. RGB renk sistemi aynı zamanda bilgisayarımızın da renk skalasını oluşturur. Renklerin karışım oranları bilgisayara verildiğinde, bilgisayar bu üç ana renkten istediğimiz ölçüde alıp, karıştırıyor ve istenile rengi veriyor. Renkle uğraşanlar bilirler, biraz kırmızı, biraz mavi rengi karıştırırsak mor bir ton elde ederiz. İşte bilgisayarın da uygulaması bunun gibidir. Bilgisayarda renk tonları 0 ile 255 sayısı arasındadır.
255 en yüksek değerdir. Yani bilgisayarda mor renk elde etmek istersek RGB sistemi ile 255, 0, 255 renklerini karıştırmamız gerekecektir. Bu durumda, html dilinde renk standartları ayarlanırken 16'lık (Hexadecimal = kısaca Hex) sistemin kullanılması kabul edilmiştir. 0, olduğu gibi kalmış, 1'den itibaren koyulaşmış, 9'dan sonra koyuluk devam etmiş ve en son, yani 255 sayısının karşılığı F harfi kabul edilmiştir. Bu 16'lık sistemde 2'şerli gruplar halinde yazılarak html diline uygulanır. Mor rengi elde etmek için kullanılan 255, 0, 255 (Yani %100 kırmızı, hiç yeşil yok, %100 mavi) kodlamasının 16'lık sistemde karşılığı FF00FF olmuştur. Html sayfalarında Hex sistemine göre FFFFFF beyaz rengi, 000000 siyah rengi, FF00FF mor rengi, FFFF00 sarı rengi, FF0000 kırmızı rengi, 0000FF mavi rengi, 00FF00 yeşil rengi göstermektedir. renklerin hex ölçümlerini değiştirerek tüm renk tonlarını elde edebiliriz.
Şimdi tekrar Not Defteri uygulamamızı açalım. Artık renk kullanmayı öğrenebiliriz. Yazı renklerini verirken kullandığımız red, green, black gibi ingilizce terimleri artık bir kenara bırakalım ve hex kodları ile yazılarımızı renklendirelim. Renk kavramı bu şekli ile bir web sayfasında kullanılan tüm renk uygulamalarında da kullanılmalıdır. (Örn. arka plan, tablo vb. renklendirmeleri)
<html>
<head></head>
<title>Benim Sayfam</title>
<body><font face=Arial size=5 color=000000><p>Yazımı siyah renkle yazmaya başladım </p><p>buradan itibaren</font><font face=Arial size=5 color=0000FF>mavi devam ediyorum</p></font><p><font face=Arial size=5 color=9900CC>bu kısım ise açık mor olacak. </p></font></body>
</html>
Bu yazdıklarımı aynen yazıp, kaydedin. Tarayıcınız açıkken F5 tuşuna basın.

Alttaki sayfada renklerin hex kodlarını bulabilirsiniz.
http://www.w3schools.com/Html/html_colors.asp

Fantoma · 9 Mart 2011

DERS :6

Web sayfasının arka planı

Web sayfamıza yazı eklenmesini, yazıların tipini, boyutlandırmasını, renklendirmesini, yeni paragrafa geçme, yeni satıra geçme, başlıklar ile ilgili bölümü bitirince sıra geldi sayfamızın arka planını düzenlemeye.
Web sitelerinin arka planları :
Web sayfamıza ekleyeceğimiz yazıların görünümünü etkileyen en önemli kısım arka plandır. Arka plan rengi olarak kullanacağımız en iyi renk seçimi beyazdır. Hem sade, hem de tarayıcıya yüklenmesi en kolay renktir. Ancak bazı web sitelerinde kullanılan değişik arka plan resimleri görmüşsünüzdür. Yapmayı tasarladığınız web sayfasının arka planına bu tür bir arka plan resmi dahi ekleseniz, arka planınnıza öncelikle bir renk tanıtmanızda fayda var. Çünkü herhangi bir tarayıcı sizin sayfanızı çağırdığında internet bağlantı hızı ile ilintili olarak arka plan resminiz yüklenene dek yazılarınız daha önce, hatta ilk yüklenen kısımdır.
Bu nedenle öncelikle bir arka plan rengi tanıtmanız gerekmektedir. Web sayfamızın arka planına bir renk eklemek için <body> takısına arka plan rengini atayacak parametre yazmamız gerekir.
Şimdi tekrar Not Defteri uygulamamızı açalım ve alttaki satırları aynen yazalım.
<html>
<head></head>
<title>Benim Sayfam</title>
<body bgcolor=FFFF00><font face=Arial size 5 color=black><p>Bu sayfanın arka plan rengi sarı oldu. </p>
</font>
</body>
</html>
Yazdıklarımızı kaydedip, tarayıcımıza dönelim ve F5 tuşuna basalım.

Gördüğünüz gibi, <body bgcolor=ffff00> diyerek, yani <body> takısına "bgcolor" parametresini atayarak ve bunun içinde bir hex renk değeri vererek sayfamızın arka planını sapsarı yapıverdik.
Bunun gibi, renk sayfasındaki diyagramdan seçerek sayfanızın arka planına istediğiniz rengi uygulayabilirsiniz.
Bu noktada dikkat etmeniz gereken önemli bir husus var.
Arka plan renginizi seçerken, web sayfanız üzerine yazacağınız yazıların tezat bir renkte olmasına özen göstermelisiniz.
Öyle ya! Beyaz bir arka planda gri bir yazı zor görünür.
Bu arada komple bir web sayfası tasarlarken, bu sitenin sol yanında gördüğünüz "Bağlantı Ekleme" adımında anlatılan ve bir bağlantıyı tanımlayan renkleri kullanırken, arka plan renklerinizi de dikkatli seçmek zorundasınız.
Ne demek istediğime burada kısaca değineyim.
Web sayfanızan herhangi diğer bir sayfanıza veya başka bir web sitesine bir bağlantı eklediğiniz zaman internetteki çoğu web sitesinde gördüğünüz renk mavidir. Bu bağlantının adı, altı yine bağlantı rengiyle aynı renkte bir çizgiyle çizilmiştir. Farenizin ok şeklindeki ucu bu bağlantı yazısının üzerine geldiğinde tek parmağı havada bir el şeklini alır.
Elbette bağlantı renklerini değiştirmek elimizde. Ama bağlantı ana rengi mavi olduğuna göre, eğer arka planınızı mavi yapmayı düşünüyorsanız altı çizgili olan ve bağlantıyı gösteren yazınız okunamayacaktır.
Bu nedenle arka planda renk veya arka plan resmi uygulaması kullanırken dikkatli olmamız gerekir.
Arka planımıza bir resmi nasıl ekleriz?
Web sayfamızın arka planına bir resim eklemek için önce elimizde bir resim olmalı. Hazır arka plan sağlayan web sitelerinden bu resimleri elde edebiliriz. Ancak bu resimleri kullanırken bazı özelliklerine dikkat etmek zorundayız.
Elimizde bulunan geniş boyutlu bir resim de işimizi görebilir. Ama bu tür arka planları sağlayan siteleri ziyaret ettiğinizde size arka plan olarak sunulan resimlerin ebatlarına dikkat edin. Tamamı çok küçük boyutludur.
Şimdi Not Defterinizi açın ve aşağıdaki kodları yazın.
<html>
<head>
</head>
<title>Benim Sayfam</title>
<body background="bg1.jpg">
</body>
</html>
Bu satırları yazdıktan sonra kaydedip tarayıcınıza bakın.
Şimdi de aşağıdaki satırları Not Defterinize yazın ve kaydedin.
<html>
<head>
</head>
<title>Benim Sayfam</title>
<body background="bg2.jpg">
</body>
</html>

Bu iki resim bize ne anlatıyor?
Web sayfalarına eklenen resimlerin büyük boyutlu olmaları halinde, web sayfamız çok geç açılacaktır. Bu da, web sayfamızı ziyaret eden kişilerin resmin açılmasını beklemelerine sebep olacaktır.
Siz belki büyük şehirlerimizin birinde oturuyor ve dsl modemlerle yüksek hızda İnternete bağlanıyor olabilirsiniz. Ama ülkemiz genelinde çoğu kullanıcı hala 56K gibi düşük hızdaki modemleri kullanmaktadır.
Bu durumda sayfanızın açılması ziyaretçinize itici gelip, sayfanızı izlemekten vazgeçmesine bile neden olabilir.
(bg1.jpg) gibi sade, tek renkli ve küçük boyutta bir resim dosyası kullanmanız yararlı olacaktır.
(bg2.jpg) gibi küçük boyutlu ancak dalgalı veya bir kaç renkli resim dosyası kullandığınız zaman ise sayfanız belki çabuk açılacak, ancak arka plan resminin küçük boyutlu olması nedeniyle ziyaretçinizin tarayıcısı (yani tüm tarayıcılar) resmi, tüm arka plana döşeyerek göstereceği için web sayfanız, bu resim dosyasının uygulandığı 2.resim gibi görünecektir.

Web sayfanızın arka planında kullanacağız resmin ne olacağına karar vermek elbette sizin en tabii hakkınız. Ama ziyaretçileriniz yönünden bakıldığında, sade, özellikle pastel tonlarda ve olası ise tek renkli arka plan resmi kullanmanız web sayfanıza daha hoş bir görüntü verecektir.
Bu arada, örnek html kodlarında gördüğünüz gibi, sayfamıza bir arka plan resmi eklemek istersek, yine <body> takısına "backgound" parametresini yazıyor ve kullanacağımız resmin adını ve dosya adını ekliyoruz.
Örnek :<body background="bg2.jpg">
<body> takısına bir kaç parametre daha ekleyerek, gerçek bir web sayfasında bulunması gereken önemli parametreleri de elde edebiliriz.
<body> Takısına eklenen önemli parametreler :
<body bgcolor =FFFF00>
Arka planımızın rengini sarı yapıyor.
<body background=bg1.jpg>
Web çalışması klasöründeki bg1.jpg dosyasını sayfanızın arka planına duvar kağıdı olarak döşüyor.
<body text=00000>
Yazacağınız metni, eğer metinler için değişik renk kodları eklemezseniz, sayfanızın tamamında siyah olarak gösteriyor.
<body link=0000FF>
Web sayfamızın içinden, üzerine tıklandığında başka bir web sayfasına bağlantı oluşturulmasına yarayan bağlantıların rengini saptıyor.Örnekte kullanılan mavi renkdir.
<body Hlink=FF0000>
Bu parametreye (Hover Link) denir.Bu parametreye atayacağınız renk kodu ile, fare imleci bir bağlantının üzerine geldiğinde (henüz tıklamadan önce) bağlantınızın hangi renkte görünmesini istediğinizi ayarlar. Bu örnekte kırmızı renk kullanılmıştır.
<body Vlink=FF00FF>
(Visited Link yani ziyaret edilen bağlantı) için kullanacağımız bu parametre ile önceden tıklanan bir bağlantının, hiç tıklanılmayan bir bağlantıdan değişik bir renkte olması sağlanır. Bu ise ziyaretçimizin boşuna aynı sayfalarda dönüp durmasını engeller.
<body Topmargin=10>
Bu parametre sayfa içeriğimizin ekranın üst çerçevesinden kaç piksel aşağıdan başlayacağını tesbit etmemize yarar. Örneğimizde bu değer 10 pikseldir. (noktacık)
<body Leftmargin =5>
Bu parametre sayfa içeriğimizin ekranın sağ çerçevesinden kaç piksel içerden başlayacağını saptamamıza yarar. Örneğimizde bu değer 5 pikseldir.
Şimdi bu parametrelerin hepsini uygulayalım.
Not defterinizi açın ve artık standart hale gelmiş bu kodu yazın.
<html>
<head>
</head>
<title>Benim Sayfam</title>
<body background=bg2.jpg bgcolor=FFFF00 text=000000 link=0000FF hlink=FF0000 vlink=FF00FF leftmargin=5 leftmargin=5>
</body>
</html>

Web sayfası içinde çizgi kullanmak
Web sayfamız içinde yazı yazarken, yazıya <br> takısı ile bir satır veya <p> ve </p> takısı ile bir paragraf aralık bırakmayı yazı çalışmaları sayfasında görmüştük.
Bazen iki satır arasında bir "Devider" yani (Ayırıcı) kullanmak gerekebilir.
Internet üzerinde dolaşırken, bazı grafik sitelerinde değişik şekil ve yapıda hazırlanmış, ayırıcı görevi gören resim dosyaları görmüşsünüzdür.
Bu resim dosyaları yerine, rengi, kalınlığı ve uzunluğu değişen ayırıcı oluşturmak için küçük bir takı kullanmak yeterli olacaktır.
Aşağıdaki kodu Not Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Arka Plan Deneme</title>
<body><font face=Arial color=black>Bu yazıyı yazarken bu bölümü yazıp, araya bir ayırıcı ekledim.
<hr>
ve ayırıcının altında yazıma devam ettim.
</font>
</body>
</html>

Bu sayfaya tarayıcınızdan baktığınız zaman, iki yazının arasında bir ayırıcı çizgi görmüş olmalısınız.
İşte bu ayırıcı çizgiyi <hr> takısı ile oluşturuyoruz.
<hr> Takısının parametreleri
Sayfamızı ayırıcı çizgi ile ayırabiliyoruz ve ona her hangi bir değer atamazsak, örneğimizde olduğu gibi sayfanın eni kadar sürüp gidiyor.
Ama istersek <hr> takısı içine ekleyeceğimiz bazı parametrelerle değişik görünümler elde edebiliriz.
1 - Width (Uzunluk) parametresi
Aşağıdaki kodu Not Defterinize yazın ve ayırıcı çizgimizin uzunluğunu saptayalım.
Yazdıklarımın örnek resimlerde daha iyi görünebilmesi için yazı boyutunu biraz arttırdım.
<html>
<head></head>
<title>Arka Plan Deneme</title>
<body><font face=Arial color=black size=4px >Bu yazıyı yazarken bu bölümü yazıp, araya bir ayırıcı ekledim.
<hr width="200">
ve ayırıcının altında yazıma devam ettim.
</font>
</body>
</html>

Bu kodu yazıp, tarayıcınızdan bakınca üstteki gibi bir görünüm elde etmiş olmalısınız.
Ama ayırıcı çizgi 200 piksel olmasına rağmen ortada kaldı.
2 - Align (Hizalama) parametresi
Yazımızın arasındaki ayırıcı çizginin web sayfamızın ne tarafından başlamasını istersek, takımıza <align> parametresini eklememiz yeterli olacaktır.
Aşağıdaki örnek kodu Not Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Arka Plan Deneme</title>
<body><font face=Arial color=black size=4px >Bu yazıyı yazarken bu bölümü yazıp, araya bir ayırıcı ekledim.
<hr align="left" width="200">
ve ayırıcının altında yazıma devam ettim.
</font>
</body>
</html>

Tarayıcınızdan baktığınız zaman ayırıcı çizginin soldan başlayıp, 200 piksel uzunluğunda olduğunu göreceksiniz.
Aynı şekilde <hr> takısına,
<hr align="left"> parametresini eklemekle ayırıcı çizgiyi soldan,
<hr align="right"> parametresini eklemekle ayırıcı çizgiyi sağdan ve
<hr align="center"> parametresini eklemekle ayırıcı çizgiyi ortadan başlatabilirsiniz.

3 - Color (Renk) parametresi
Sayfa içi ayırıcı çizgimizi çizdik, yerini saptadık, biraz da reklendirelim.
Aşağıdaki kodu yine Not Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Arka Plan Deneme</title>
<body><font face=Arial color=black size=4px>Bu yazıyı yazarken bu bölümü yazıp, araya bir ayırıcı ekledim.
<hr align="left" width="200" color="#ff000">
ve ayırıcının altında yazıma devam ettim.
</font>
</body>
</html>

Ayırıcı çizgimizin rengini saptamak için, <hr> takımızın içerisine bu kez "color" parametresini ekledik.
Çizgimize bir renk atarken, web sayfasında renkler bağlantısında değindiğim gibi rengin hex kodunu kullandım ve "FF0000" diyerek kırmızı rengi tercih ettim.
Eğer kırmızı, mavi, sarı ve benzeri standart renkleri kullanmak isterseniz, hex kodu yerine rengin İngilizce adını da yazabilirsiniz. Ama standart renklerin değişik bir tonunu kullanmak isterseniz mutlaka hex kodu ile belirtmelisiniz.
4 - Size (Boyut) parametresi
Ayırıcı sizgimize renk de ekledik. Ama bu çizgi hep böyle standar mı kalacak?
Elbette hayır. Ayırıcı çizgimizin kalınlığını da istediğimiz gibi değiştirebiliriz.
Aşağıdaki kodu Not Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Arka Plan Deneme</title>
<body><font face=Arial color=black size=4px>Bu yazıyı yazarken bu bölümü yazıp, araya bir ayırıcı ekledim.
<hr align="left" width="200" color="#ff000" size="10">
ve ayırıcının altında yazıma devam ettim.
</font>
</body>
</html>

Ayırıcı çizgimizin boyutunu saptamak için, <hr> takımızın içerisine bu kez "size" parametresini ekledik ve 10 değerini vererek oldukça kalın bir ayırıcı çizgi elde etmiş olduk.

Fantoma · 10 Mart 2011

DERS :7

Web Sayfasından başka sayfalara bağlantı ekleme

Hazırladığınız web sayfasından diğer bir sayfanıza geçmek için birbirleri arasına bir link (Bağlantı) kurmanız gerekmektedir. Aynı şekilde hazırladığınız sayfanın içinden, web adresini bildiğiniz diğer web sitelerine de bağlantılar oluşturabilirsiniz.
Bu işlemi gerçekleştirmek için bir html takısı kullanmanız, bağlantının şeklini belirtmek için bazı parametreler ilave etmeniz yeterlidir. Ziyaretçilerinizi açılış sayfanızdan, (Bu sayfa standart olarak index.html - veya index.htm - diye tanımlanmaktadır.) ikinci bir web sayfanıza yönlendirme denemesi için, ilk etapta, çalışmalarınızı barındırdığınız web klasörü içinde iki ayrı web sayfasına gereksiminiz var.
Çalıştığınız sayfanın nasıl açıldığını "Temel Kurallar" bağlantısında görmüştünüz. Şimdi "index.html" ve "sayfa2.html" ismini taşıyan iki sayfa hazırlayın ve web çalışmalarınızı yaptığınız klasöre ekleyin.
index.html adını verdiğiniz sayfanın html kodları aşağıdaki gibi olmalı.
<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
</body>
</html>

sayfa2.html adıyla kaydettiğiniz ikinci sayfanızın html kodları da aşağıdaki gibi olmalı.
<html>
<head>
<title>İkinci web sayfam</title>
</head>
<body>
</body>
</html>

Bu kodlarda tek fark <title></title> (başlık) takıları arasındaki açıklamalar. Bu başlıkları zaman içinde, hazırladığınız web sayfalarının içeriklerine göre ve isteğiniz doğrultusunda değiştirmeyi unutmayın.
Şimdi index.html adlı ilk sayfamızı açalım. İçindeki html kodlarından <body> takısının içine bizim ikinci sayfamıza bir bağlantı sağlayacak olan takıyı ekleyelim.
<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
<a href=sayfa2.html>İkinci sayfama gitmek için tıklayınız.</a>
</body>
</html>

Bu kodu yazdıktan sonra index.html adlı sayfanızı kaydederek, tarayıcınızın içinde görüntüleyin.

Şimdi, web sayfanızın içinde ziyaretçilerinizi hazırladığınız ikinci sayfaya yönlendirecek bir bağlantı kurmuş oldunuz. Bu bağlantının üzerine geldiğinizde farenizi imleci işaret parmağıyla o bağlantıya dokunmak isteyen bir el şeklini alıverdi.
Korkmayın. Hemen kurduğunuz bağlantının üzerine tıklayın ve sayfa2.html adlı ikinci sayfanıza geçin.
İkinci sayfanızın içine henüz hiç bir şey yuazmamış olduğunuz için boş bir web sayfası ile karşılaşmış olmalısın. Ancak başlığina bakarsanız (İkinci web sayfam) ifadesini görmüş olmalısınız. Yani işlem doğru.
Bu bağlantıda kullandığımız takı <a href></a> takısı.
<a href> adlı bağlantı takısı açılıp, ziyaretçimizi yönlendireceğimiz sayfanın adresi (veya herhangi bir web adresi) ilave edilikten sonra </a>takısı ile kapatılmadan önce sayfanızda bu bağlantı ile bir bilgiyi eklemelisiniz.
Sayfamızı yazarken kullandığımız,
<a href=sayfa2.html>İkinci sayfama gitmek için tıklayınız.</a>
uygulamasını istersek aşağıdaki şekliyle de kullanabiliriz.
İkinci sayfama gitmek için<a href=sayfa2.html> tıklayınız.</a>
Bu ikinci örnekte ziyaretçiniz, tüm cümleye değil, sadece tıklayınız üzerine faresi ile tıkladığında yönlendirmiş olduğunuz diğer sayfaya geçebilecektir.
Çünkü, gördüğünüz gibi bağlantı takısı <a href> sadece tıklayınız kelimesinde kullanılmıştır.
Şimdi bu örneği index.html adlı sayfamıza eklemek için Not Defterimize yazalım ve tarayıcımızdan sonucunu görelim.
<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
İkinci sayfama gitmek için<a href=sayfa2.html> tıklayınız.</a>
</body>
</html>

Küçük bir değişiklikle bağlantıyı cümleye değil ilgili kelimeye ekledik.
Konuya başlarken değindiğim gibi web sayfamızın içinden web adresini bildiğimiz herhangi bir sayfayada bağlantı oluşturabiliriz. Bu eylemi gerçekleştirebilmek için ziyaretçilerimizi yönlendireceğimiz web sayfasının adresini bilmemiz yeterli.
Tekrar Not Defteri uygulamamızı açalım ve aşağıdaki kodları index.html adlı web sayfamıza yazalım.
<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
Yeni gelişmeleri öğrenmek için<a href=http://www.microsoft.com>Microsoft</a> web sitesini ziyaret ediniz.
</body>
</html>

<a href> bağlantı takımıza Microsoft şirketinin kullandığı, (http://) ibareleriyle başlayan ve gerçek bir web adresi olarak tanımlanan http://www.microsoft.com web sitesinin ana sayfasına bir bağlantı oluşturmuş olduk.

Resimlerden bir bağlantı oluşturmak
Web sayfamız içinden diğer bir sayfaya veya web alanına oluşturacağımız bağlantı sadece text (yazı) ile değil, bir görüntü dosyası ile de oluşturulabilir.
index.html adlı ilk sayfamızı Not Defterimizle açalım ve aşağıdaki kodları aynen yazalım.
<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
<a href=sayfa2.html> <img src=abc1.jpg></a>
</body>
</html>

Şimdi bu resme tıkladığımızda bizi sayfa2.html adlı ikinci sayfamıza yönlendirecektir.
Bu resim, yazının altına gelen (bir bağlantı olduğunu betimleyen) mavi çizgi ile çepeçevre sarıldı.
Peki, eklediğimiz resimden bir bağlantı verelim ama, o bağlantı rengini kaldırabilir miyiz?
Bunun için tekrar Not Defterimizi açıyoruz ve gerekli satırları yazıyoruz.

<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
<a href=sayfa2.html> <img src=abc1.jpg border=0></a>
</body>
</html>

Tarayıcımızdan bu kodu eklediğimiz sayfayı görüntülediğimizde, resmimizin yerinde durduğunu, ancak çevresindeki bağlantı renginin kaybolduğunu görüyoruz. Bunun sebebi,
<img src> adlı resim bulan takımızın içine "border" (sınır/çerçeve) parametresine = 0 değerini atamamız.
<a href=sayfa2.html> <img src=abc1.jpg border=0></a>
Önemli :
Özellikle <img> ve <a href> takılarına bir değer atarken (= eşittir) işareti kullanmak zorundayız. Bu değerin takıya atanması sırasında yanlışlıkla iki nokta üstüste) işaretinizi kullanırsanız, ya görüntü dosyanız açılmaz veya ziyaretçileriniz eklediğiniz bağlantıya ulaşamaz.
Örnek :
<a href=sayfa2.html> İkinci Sayfam </a> DOĞRU
<a href:sayfa2.html> İkinci Sayfam </a> YANLIŞ
<img src=abc1.jpg> DOĞRU
<img src:abc1.jpg> YANLIŞ
Web sayfasından E-posta bağlantısı verme :
Hazırladığınız bir web sayfasından, diğer bir sayfanıza, herhanbir bir web sitesinin sayfasına, yazı ile veya bir grafik dosyası kullanarak bağlantı verebilirsiniz.
Peki kullandığınız bir e-posta adresine sayfanızdan nasıl bağlantı vereceksiniz?
Bunun için index.html adlı web sayfanızı Not Defteri uygulamanızla açın ve aşağıdaki satırları yazın. Sayfanızı kaydedin ve tarayıcınızdan bakın.
<html>
<head>
<title>İlk web sayfam</title>
</head>
<body>
Bana E-posta yoluyla ulaşmak için <a href=mailto:ismim@postadresi.com>Buraya Tıklayın.
</body>
</html>

Bu kurmuş olduğumuz E-posta bağlantımıza tıkladığımızda eğer bilgisayarınızda Windows işletim sistemi kuruluysa, sistem kuruluşuyla birlikte kurulan Outlook Express programı açıklacaktır.
Outlook içinde eğer kurmuş olduğunuz kayıtlı bir POP3 (eposta gönderim serveri) hesabınız varsa, bu hesabınız ile, (mailto: ismim@postaadresi.com) adımına yazacağınız o E-posta hesabınıza tüm ziyaretçileriniz E-posta gönderebilir.

Web Sayfası içinde bağlantılar
Web sayfamız içinden diğer bir sayfaya veya web alanına oluşturacağımız bağlantıların nasıl olacağını önceli sayfalarımızda görmüştük.
Ancak bazen sayfa içinde de ziyaretçimizi gerekli konuya hemen yollamak için ayrı bir sayfa kullanmadan, aynı sayfanın içerisinde belirli bir yere göndermemiz gerekebilir.
Bu durumla sayfamızın gerekli yerlerine yazağımız bağlantılarla sayfa içinde kolay dolaşım sağlayabiliriz.
Konuyu daha iyi anlayabilmeniz için Bilgi : bağlatısına tıklayın ve sizi nereye yönlendiğine dikkat edin.
Bunun için Not Defteri uygulamanızı açın ve aşağıdaki satırları yazın. Sayfanızı kaydedin ve tarayıcınızdan bakın.
<html>
<head>
<title>Sayfa içi bağlantı</title>
</head>
<body>
<font face="tahoma" color="000000">
Bu işlemi yapmak için bu web sayfasının tamamını kullanmak daha iyi olacak.
<a href="#bilgi">bilgi</a> bağlantısına tıkladığınızda
sizi sayfa içinde bu açıklamanın bulunduğu yere yönlendirecek.
<br> Bu <a name="bilgi">bilgi</a> notu işte buradan devam edecek.
ve ziyaretçimizi tekrar sayfanın en üstüne yönlendirmek için ise aşağıdaki bağlantıyı ekledim.
<br> <a href="#top">Üste Dön</a>
</font> </body>
</html>

Bu koda tarayıcınızdan baktığınızda, bağlantılara da tıklasanız, tam işlevsel olarak bir işlem olmuyor gibi görünecektir. Zira kısa bir kod yazdım ve sayfa içinde gerekli boyut bulunmadığı için sayfa arasında gerekli bağlantılar ile bir yönlendirme yapılamadı.

Ancak yazdığım kodun üzerine eklediğim "bilgi" bağlantısına tıkladığınızda, okumakta olduğunuz web sayfasının, bilgi başlıklı not yazısına ulaştığınızı göreceksiniz.
Gerekli bilgiyi okuyup, "Üste Dön" bağlantısına tıkladığınızda bu sayfanın en üst noktasına ulaşacaksınız.
Bu tür sayfa içi bağlantılar genelde web sitesi içinde kullanılan Sık Sorulan Sorular gibi birden çok madde içeren sayfalarda kullanılırlar.
Bu tür sayfalarda, ziyaretçinizi web siteniz hakkında aydınlatacak olan olası soruları alt alta maddeler halinde tasarlayıp altına da cevaplarını eklemelisiniz. İlk sorular sayfa boyutunu aşmadığı için üstte yazdığım örnek kod gibi pek işlevsel olmasa da sorular artıp, sayfanın altına doğru indikçe bu uygulama oldukça pratiktir.
Kodu yazarken, yönlendirmek istediğimiz sayfa içi kısmın tanımı için bağlantı takısını <a href=#yerinadı>burası</a> olarak belirtip, sayfada açıklamak istediğimiz bölüm olan ve bağlantımızda "burası" diye betimlediğimiz noktaya yine <a name=yerinadı>burası</a> şeklinde bir bağlantı takısı ile işlemimizi tamamlıyoruz.
Açıklamamızın bittiği yerde ziyaretçilerimizin tekrar sayfanın üst bölümüne dönmesini istiyorsak ki, bu tür uzunca sayfalarda kullanılması gereklidir, <a href=#top>Üste Dön</a> şeklinde bir bağlantı takısı ile işlemimiz bitmiş oluyor.
Bilgi : Sık kullanılanlar gibi uydulamalarda, soru cevap şeklinde bir düzen seçebileceğiniz gibi, önce soruları yazıp, ardından tek tek cevaplarını da yazabilirsiniz.
Üste Dön
Sayfa içi bağlantılarda, bağlantı kodları önüne "#" işaretini eklemeyi unutmayın.

Resimlerin değişik bölgelerine değişik bağlantılar eklemek
Bir önceki sayfalarda açıkladığım gibi, web sayfalarında kullanılan resim dosyaları, salt bir görüntü dosyaları olmalarından öte, başka bir web sayfasına bağlantı vermek için de kullanılırlar.
Örneğin, e-posta bağlantınızı hareketli ve postayı çağırıştıracak bir resim dosyası üzerine kurabilirsiniz, hatta çevresindeki bağlantı renklerini de gizleyebilirsiniz.
Ancak bazen öyle durumlar vardır ki, örneğin bir harita üzerinde, yani tek bir resim dosyası kullanarak, o resmin üzerinde değişik bir kaç web sayfasına bağlantı vermeniz gerekebilir.
Bu işlemi başarabilmek için <imagemap> denilen bir takı kullanmamız gerekmektedir.
Imagemap kelime anlamı olarak imajın yani resmin haritası demektir.
Peki bu işlemi nasıl gerçekleştırebiliriz?
Seçtiğimiz resim dosyasının bağlantı vermek istediğimiz değişik yerlerinde, "Hot spot" (Sıcak nokta) denilen bazı kısımlar belirleyerek, resmin sadece hot spotlarla betimlenen kısımlarından ki, bu belirttiğimiz yerler koordinatlar olarak anılır, diğer web sayfalarına bağlantı yerleri kurabiliriz.
Demek istediklerimi aşağıdaki örnek kod ile açıklaytayım.
Kodu aynen Not Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Benim Sayfam</title>
<body>
Kuzey Trakya ve Adana bölümlerimizi haritamız üzerinden seçerek ilgili sayfalarıma gidebilirsiniz. <p>
<image border=0 src="harita1.jpg" width="500" height="355" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,130,26" href="babaeski.htm">
<area shape="rect" coords="125,140,250,180" href="adana.htm">
<area shape="default" nohref>
<mapp>
</p>
</body>
</html>

Kodumuzu yazdıktan sonra resminize tarayıcınızdan bakın.
Trakya Bölgesinin kuzey kısmı ile Adana şehri çevresine farenizi yaklaştırdığınızda, fare imlecinizin bir el biçimi alıp, bağlantı noktasını belirttiğini göreceksiniz.
Bu kodu yazarken önce resim dosyamızı seçerek, <imagemap> takısın açtık ve ilk bağlantımız için,
<area shape="rect" coords="0,0,130,26" href="babaeski.htm">
yani, sol üstün en ucundan başlayıp, 130 ve 26 piksellik bölümü seç dedik.
Ardından ikinci koordinat noktamızı belirtek, </map> takısı ile "imagemap" takımızı kapattık.

Fantoma · 10 Mart 2011

Özel işaretlerin tablosu eklenecek.

Fantoma · 10 Mart 2011

DERS : 10

Html içinde tablo oluşturmak

Web sitelerini gezerken ziyaret ettiğiniz profesyonellerce hazırlanan web sitelerinde, web sayfasının ana düzenin oluşturan en önemli unsur tablolardır. Tablolar, hazırlanışlarına göre, en basitinden, Template adı verilen sayfa şablonlarının hazırlanmasına kadar geniş bir yelpazede uygulanırlar. Html dilinin zor görünse de, aslında çok deneme ve el uzluğu ile orantılı olarak kolaylıkla kullanılabilenn bu uygulaması, sayfa düzeninizin temel taşı niteliğindedir.
Bir gazeteyi elinize aldığınızda, gazetelerin bir takım sütunlar üzerine kurulu olduğuna belki dikkat etmişsinizdir. İşte web sayfamızda kullanacağımız tablolar, bize sütunlar ve kolonlar üzerinde düzenli bir sayfa çatısı kurmamıza olanak verirler. Bu sayede, yazılarımızın, ekleyeceğimiz resimlerin, kullanacağımız logonun veya vereceğimiz bir haberin sayfamızda bir gazete düzeninde yerleşmesini temin edebiliriz.
Basit bir tablo yapalım
Web sayfamıza ekleyeceğimiz tablolar, html dilinde <table> ve </table> takıları ile <table> takısının başlangıcından sonra ekleyeceğimiz, <tr> (satır) ve <td> sütun takıları ile bu takıların çeşitli parametreleri ile gerçekleşir.
Şimdi basit bir tablo hazırlayarak konumuza girelim.
<html>
<head></head>
<title>Tablo örnekleri</title>
<body bg color=FFFFFF>
<font face=Arial size=4 color=000000>Tablo Çalışmaları</font>
<p>
<table border=1>
<tr><td></td><td>İlk Sütun</td><td>İkinci Sütun</td></tr>
<tr><td>İlk Satır</td><td> Ali </td> <td> Veli</td></tr>
<tr><td>İkinci Satır</td><td> Mehmet </td> <td> Ahmet</td></tr>
</table>
</p>
</body>
</html>
Bu kodu Not defterinize yazın ve kaydedin. Tarayıcınızdan bakın.

Gördüğünüz gibi, 2 satır ve 2 sütundan oluşan bir tablo oluşturduk.
Üstteki html kodu ilk bakışta biraz karışık görünse de, tablo kodunun açıklaması şudur.
<table> (tablo takısını açıyoruz)
<tr> (Satır takısını açıyoruz)
<td> (Bu satırdaki sütun takısını açıyoruz)
Tablomuzun içinde kullanacağımız yazı, resim ve benzeri öğeleri ekliyoruz.
</td> (Önce sütun takısını kapatıyoruz)
</tr> (Sonra satır takısını kapatıyoruz.)
</table> (Tablo takımızı kapatıyoruz)
Html sayfalarında bir tablonun yapım iskeleti budur.
Yazmayı düşündüğümüz tabloda kaç satır varsa o adette <tr> ve içlerine kaç adet sütun eklemek istiyorsak, o adette <td> ekliyoruz.
Şimdi, diyelim ki, tek bir satırda 5 sütunlu bir tablo yapmak istiyoruz. Bunun için aşağıdaki kodu kullanmamız gerekiyor.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="1">
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
<td>Mehmet</td>
<td>Mustafa</td>
</tr>
</table>
</body>
</html>

Bu kodu Not Defterinize yazın ve kaydedin. Tarayıcınızda aşağıdaki gibi bir görünüm bulacaksınız.

<table> ve tablo içi <td> takılarına bazı parametreler ekleyerek, tabloların işlevselliğini genişleterek, tablomuzun gerçek görünümünü belirleyebiliriz.
Önemli :
Not Defterinizde yazacağınız html sayfanızın içinde oluşturacağınız tablonun tarayıcınızda izlemesini yapabilmek için mutlaka <td> takısının içerisine bir değer girin. Bu değer, bir harf, bir rakam veya bir nokta işareti olabilir.
Bunu yapmayı unutursanız yazdığınız tablonun görünümünü tarayıcınızda göremezsiniz.
Çünkü web tarayıcıları içi boş olan tabloları göstermezler.

<table> Takısının parametreleri :
1 - Border Parametresi :
Hazırlayacağımız tablonun çerçevelerinin kalınlığını saptamak için sayısal bir değer girmeniz gerekir. Tablonuzun çerçevelerinin görünmemesini istiyorsanız bu sayısal değer sıfır (0) olmalıdır.
Şimdi Not Defterinizi açın ve aşağıdaki kodu yazın. Yazdıklarınızı kaydedin ve tarayıcınızdan bakın.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="0">
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>

Tarayıcımızdaki görüntüde <table border=0> değerini verdiğimiz için isimler bir tablonun içinde oldukları halde, boş sayfaya yazılmış gibi duruyorlar. Ama <table> ve <td> parametrelerini öğrendikçe bu boş sayfa görünümünün aslında bir tablo içerisinde oluşturulduğunu anlayacağız.
Border parametresine verilen değer büyüdükçe, tablo çerçevelerinin görünümü de genişleyerek, düz olmayan ama 3 boyulu bir görünüm hissine ulaşan bir biçim alırlar.
Not defterimize bir üstteki kodun aynısını bu kez border=10 değeri vererek tekrar yazalım ve kaydedelim.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="10">
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>

İşte kalın, 3 boyulu bir görünüm sağlamış tablomuz.
2 - Width (Genişlik) Parametresi :
Bu parametreyi, tablonuzun piksel (noktacık) cinsinden genişliğini ayarlamak için <table> takısının içine eklemelisiniz.
Şimdi bie önceki sayfada (border=10) parametresini kullanırken kullandığımız koda, bu parametreyi de Not Defterimizde ekleyelim ve kaydedelim.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=1 width=100>
<tr>
<td>A</td>
<td>B></td>
<td>C</td>
</tr>
</table>
</body>
</html>
Tablomuza tarayıcımızdan bakalım.

İşte bu parametre ile hazırlanmış tablomuz.
Bir tablo yaparken width (genişlik) veya bir alt paragrafta öğreneceğimiz height (yükseklik) gibi parametreleri kullanmadığımız zaman web tarayıcıları bu parametreleri default (varsayılan) değer olarak otomatik atarlar.Bu durum da, tablomuzun her zaman istediğimiz düzende görünmesini engeller.

3 - Height (Yükseklik) Parametresi :
width (genişlik) parametresinde olduğu gibi, tablomuzun yüksekliğini de height parametresi ile ayarlayabiliriz.
Şimdi bu örnek kodu Not Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=1 width=100 height=50>
<tr>
<td>A</td>
<td>B></td>
<td>C</td>
</tr>
</table>
</body>
</html>

İşte, 100 piksel genişlik ve 50 piksel yükseklik verdiğimiz tablomuzun tarayıcımızda görünümü.
4 - Cellspacing Parametresi :
Bir tablonun içindeki hücrelerin tablo sınırından ve birbirlerinden piksel cinsinden ne kadar uzak olması gerektiğini belirler. Bu değer Cellspacing=0 olarak belirtilirse hücreler arasında hiç bir boşluk bırakılmaz.
Bu parametreye 2 örnek verelim.
Önce ilk örneğimizde cellspacing değerini 1 olarak atayalım. Not defterimize bu kodu yazıp, kaydedelim.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="1" cellspacing=1>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>

Bu kodun tarayıcıda görünümü böyle.
Şimdi aynı kodu, <cellspacing=10> değeri ile yazalım Not defterimize ve kaydedelim.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="1" cellspacing=10>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>

Burada tablomuzun hücrelerinin aralıklarının ne denli açıldığını görüyoruz.

5 - Cellpadding Parametresi :
Bir tablonun içerisine eklenen yazı veya resim gibi öğelerin, hücre sınırından olan uzaklığını ayarlamak için kullanılır. Bu değere <cellpadding=0> değeri verilirse, hücre içine eklenen web öğeleri hücre sınırına bitişik olarak görüntülenirler.
Bu parametreyi kullanarak, üstteki örnek kodumuzu Not Defterimize yazalım ve kaydedelim.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="1" cellspacing=10 cellpadding=0>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>

Bu izlediğimiz resim bir yukardaki uygulamamızın resmi ile adeta aynı gibi değil mi? Peki ya <cellspacing=10> değeri verseydik?
O zaman aşağıdaki kodu Not Defterimize ekleyelim ve kaydedelim.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="1" cellspacing=10 cellpadding=10>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>

Burada hücre içine eklediğimiz yazılar tablo sınırından 10 piksel içeri çekilerek görüntülendi.
6 - Bgcolor (Arkaplan rengi) Parametresi :
Tablo hücrelerimizin içlerine renk de eklemek isteyebiliriz. Bu parametre ile atanacak renk kodu tablomuzdaki hücrelerin içine arka plan rengi olarak döşenecektir. Bu işlem için kullanacağımız renk değeri, rengin Hex kodu ile verilmelidir.
Örnek kodumuzu Not Defterinize yazıp, kaydedin.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" bgcolor="FFFF00">
<tr>
<td>Ali</td>
<td>Veli</td>
<td>Ahmet</td>
</tr>
</table>
</body>
</html>
Bu örnekte tablomuzun arka plan rengini <bgcolor=FFFF00> diyerek, sarı renk yaptık. Böylece tarayıcımızda aşağıdaki gibi görünüm elde ettik.

6 - Align Parametresi :
Bu parametre, tablonuzun sayfanızın neresinde duracağını sağlamak kullanılır.
Hazırlayacağınız tablonun <table> takısına ekleyeceğiniz "align=left" (sola hizala), "align=right" (sağa hizala) ve "align=center" (ortaya hizala) komutlarıyla yazınızın tablonuzun hangi yanında kalacağınıda sağlamış olursunuz.
Artık <table> takısında kullanılan parametreleri de kullanarak tablomuzu hazırlayalım.
<html>
<head>
<title>Tablo Çalışmaları</title>
</head>
<body bgcolor="FFFFFF">
<font face="Arial" size="2" color="000000">
<p>Bu kısımda yazılarım yer alacak. </p>
<p>Kişilerle ilgili yazacaklarım burada olacak.</font></p>
<table border="1" width="300" height="100" cellspacing="2" cellpadding="2"
bgcolor="FFAD30" align="right">
<tr>
<td>Ahmet</td>
<td>Berna</td>
<td>Cemre</td>
</tr>
<tr>
<td>Ahmet</td>
<td>Berna</td>
<td>Cemre</td>
</tr>
</table>
</body>
</html>
Tablomuza tarayıcımızdan bakalım.

İşte bu parametre ile hazırlanmış tablomuz.
<td> Takısının parametreleri :
Web sayfası için hazırlayacağımız tablonun genel görünümünü ve bu görünümü neler yaparak değiştirebileceğimizi öğrendikten sonra tablomuzun hücreleri içindeki alanı da nasıl kullanabileceğimizi görelim. Bu amaçla <td> takısının içine bazı parametreler ekleyerek, hücreler içinde kullanacağımız web öğelerini ve hücreleri daha değişik görünümlere sokabiliriz.
1 - Align Parametresi :
<table> takısında da kullandığımız bu parametre, <td> takısında kullanılınca hücre içerisine eklenen yazı, resim gibi web öğelerinin hücrenin içinde nerede bulunacağını gösterir.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=1 width=300 height=100 cellpadding=2 cellspacing=2 align=center>
<tr>
<td align=left>Yazımız sola dayalı</td>
<td align=center>Yazımız hücrenin ortasında</td>
<td align=right>Yazımızı sağa yolladık</td>
</tr>
</table>
</body>
</html>
Üstte gördüğünüz kodu Not Defterinize yazın ve kaydedin.

<td> takısına birinci kolonda "align=left" diyerek yazımızı sola dayadık, ikinci kolonda "align=center" diyerek yazımızın hücrenin ortasında durmasını sağladık ve üçüncü kolonda "align=right" diyerek yazımızın sağa dayanmasını sağladık.

2 - Bgcolor Parametresi :
Bir tablonun içindeki hücrelerin bazen değişik renklerde olması gerekebilir. Bunun için <td> takısına "brcolor=FFFFFF" adındaki parametre ve istediğimiz rengin Hex kodunu girersek değişik renkte hücreler yapmış oluruz.
Bu çalışma için üstteki kodu aynen alalım. "align" parametresinden sonra bir aralık bırakalım ve "bgcolor" parametresini istediğimiz bir Hex renk değeri ile ekleyelim.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=1 width=500 height=50 cellpadding=2 cellspacing=2 align=center>
<tr>
<td align="left" bgcolor=FFFF00>Yazımız sola dayalı</td>
<td align="center" bgcolor=D0D0D0>Yazımız hücrenin ortasında</td>
<td align="right" bgcolor=44A3CC>Yazımızı sağa yolladık</td>
</tr>
</table>
</body>
</html>

İşte değişik renkler eklediğimiz tablo hücrelerimiz.
Tablo içinde yazı
Tablo hücreleri içinde değişik yazı karakterleri de kullanabilirsiniz. Bunu yapabilmek için tablo hücresini oluşturan <td> takısını açtıktan sonra <font> takısını ve takının içinde kullanmak istediğiniz parametreleri ekleyip, yazınızın bitiminde yine </font> takısı ile yazım alanınızı, ardından da </td> takısı ile tablonuzun hücresini kapatmanız yeterli olacaktır.
Not Defterinize aşağıdaki örnek kodu yazın ve kaydedin. Böylece bu uygulamayı daha iyi anlayacaksınız.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body bgcolor=FFFFFF>
<table border=1 bordercolor=000000 width=400 height=100 cellspacing=2 cellpadding=2
bgcolor=C0C0C0>
<tr>
<td><font face=Comic Sans MS size=4 color=000000>Ahmet Bey</font></td>
<td><font face=Arial size=3 color=0000FF>Mehmet Efendi</font></td>
<td><font face=Bookman Old Style size=5 color=00FFFF>Serap Hanım</font></td>
</tr>
</table>
</body>
</html>
Tablomuza tarayıcımızdan bakalım.

İşte font takısını tablomuzda kullandık.

Tablo hücrelerinin genişlikleri nasıl ayarlanır?
Web sayfası için hazırlayacağımız tablonun en kullanılabilir özelliklerinden biri de hücre genişliklerinin ayrı ayrı ayarlanabilmesidir. Yalnız, kullanacağınızı belirttiğiniz ölçü tüm sütunlarda eşit olarak devam eder. Şimdi ne demek istediğimi bir örnekle açıklayayım.
Not defterinize aşağıdaki örnek kodu yazın ve kaydedin.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=1 cellpadding=2 cellspacing=2 align=center>
<tr>
<td width=50>Burası birinci hücre</td>
<td width=300>Burası ikinci hücre</td>
</tr>
</table>
</body>
</html>

İşte tablo hücrelerimizin genişliklerini ayarlamış olduk. Burada dikkatinizi çktiği gibi <td> takısının içinde "width" parametresini kullanıp, istediğimiz ölçütü verdik.
Bu yazdığımız ölçüt piksel cinsinden bir değer. Ama biz bu iş için bir başka yöntem daha kullanabiliriz. Bu yöntem, tablomuzun hücre genişliğini, tablonun toplam genişliğinin belli bir yüzdesi olarak atayabilmektir.
Aşağıdaki örnek kodu Noot Defterinize yazın ve kaydedin.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=1 cellpadding=2 cellspacing=2 align=center>
<tr>
<td width=80%>Burası birinci hücre</td>
<td width=20%>Burası ikinci hücre</td>
</tr>
</table>
</body>
</html>

Eşit olmayan hücreler
Web sayfamızda tablo hazırlarken elbette bazı değişik düzenmeler uygulayarak, web sayfamızdaki tablonun içerisine ekleyeceğimiz yazı, resim vb. web araçlarını daha güzel bir sunumla tablo hücreleri içerisine yerleştirebiliriz. Aşağıda yazacağım kodu dikkatlice Not Defterinize aktarın ve kaydedin.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 align=center>
<tr>
<td colspan=2 align=center>Burası birinci hücre</td>
</tr>
<tr>
<td width=50%>Burası tekli</td>
<td width=50%>Burası da tekli</td>
</tr>
</table>
</body>
</html>

Bu yazdığımız kodda ilk hücreyi oluştururken <td> takısının içerisine "colspan" denilen bir parametre atadık ve karşılığına da altta 2 adet hücre olduğu için "2" değerini verdik. Bu parametre karşılığına verilen değer kadar hücre sütununu birleştirmeye yarar.

Şimdi demek istediklerimi biraz daha açıklayayım. İlk satırda 5 sütunu barındıran tek bir hücre, altında 5 ayrı hücreli bir tablo yapalım.
Alttaki kodu Not Defterinize yazın ve kaydedin.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 width=100%>
<tr>
<td width=100% colspan=5>Burası beş kolonlu tek bir hücre</td>
</tr>
<tr>
<td width=20%>1.hücre</td>
<td width=20%>2.hücre</td>
<td width=20%>3.hücre</td>
<td width=20%>4.hücre</td>
<td width=20%>5.hücre</td>
</tr>
</table>
</body>
</html>

İşte demek istediklerimin tarayıcıda görünümü.
Bu uygulamada tablomuzun 2. satırında yer alan hücreleri (%20) değeri vererek 5 eşit parçaya böldük. Peki, ya eşit olmayan hücreler yapmak isteseydik?
O zaman alttaki kodu dikkatle Not Defterinize yazın ve kaydedin.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body>
<table border=1cellpadding=0 cellspacing=0 width=100%>
<tr>
<td width=100% colspan=5>Burası beş kolunlu tek bir hücre</td>
</tr>
<tr>
<td width=30%>1.hücre</td>
<td width=40%>2.hücre</td>
<td width=10%>3.hücre</td>
<td width=10%>4.hücre</td>
<td width=10%>5.hücre</td>
</tr>
</table>
</body>
</html>

İşte tablomuzun yeni görünümü böyle oluyor.
"colspan" parametresini ekleyerek tablomuzun sütunlarını birleştirebildiğimiz gibi, "rowspan" adlı bir parametre ekleyerek tablomuzun satırlarını da birleştirebiliriz.
Şimdi aşağıdaki satırları Not Defterinize yazın ve kaydedin.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 width=100%
<tr>
<td rowspan=2>Burası İlk hücre</td>
<td width=50%>İkinci hücre</td>
</tr>
<tr>
<td width=50%>Üçüncü hücre</td>
</tr>
</table>
</body>
</html>

İşte satırlarını birleştirdiğimiz tablo hücrelerimiz.

Tablo arka planında resim kullanmak
Tablo hücreleri içinde yazılarımız dışında, hücrenin arkaplanı olarak resim dosyaları da kullanabiliriz. Yalnız yine web sayfası arka planlarında olduğu gibi, çok karışık ve alacalı bulacalı arka plan resimleri yerine daha sade ve genelde pastel renkleri tercih etmenizi öneriyorum.
Özellikle eğer tablonun içine bir şeyler de yazmak istiyorsanız, yazdığınız yazı karakterlerinin ziyaretçileriniz tarafından rahatça okunmasını sağlamak için bu tür sade arka plan kullanmanız uygundur. Şimdi bunu bir örnekle görelim.
Not Defterinize aşağıdaki örnek kodu yazın ve kaydedin.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body bgcolor=FFFFFF>
<table border=1 bordercolor=000000 width=400 height=100 cellspacing=2 cellpadding=2
backgound=bg1.jpg>
<tr>
<td><font face=Comic Sans MS size=4 color=000000>Ahmet Bey</font></td>
<td><font face=Arial size=3 color=0000FF>Mehmet Efendi</font></td>
<td><font face=Bookman Old Style size=5 color=00FFFF>Serap Hanım</font></td>
</tr>
</table>
</body>
</html>
Tablomuza tarayıcımızdan bakalım.

İşte <table> takısı içine background parametresini ekleyip ona kullanacağımız resim dosyasının adını da verince, tablomuzun arka planı bu şekilde oldu. Peki, ya ikinci arka plan resmimizi kullansaydık sonuç nasıl olacaktı? Cevabı aşağıda.

Arka plan uygulamasında resim tablonun içine yayılacak şekilde döşenir. Bu, tablonun boyutuyla orantılı olarak devam edip gider. Yani, resim dosyası ne denli küçük olursa olsun, tablo ölçütü büyüdükçe de sürgit olarak işlevini sürdürmeye devam eder.
Bunu değişik bir örnekle belirteyim. Aşağıda 10 piksel x 10 piksel boyutunda minicik bir resim dosyası görüyorsunuz.

Bu dosyayı kare.jpg olarak kaydedin ve arka plan olarak üstteki koda ekleyin. Bakalım alttaki sonucu görebilecek misiniz?

Gördüğünüz gibi minicik bir arka plan resmi bile olduğu gibi tablomuzun içine döşenerek arka planı tamamen kapladı.

Tablo hücrelerinin arka planında resim kullanmak
Web sayfası için hazırlayacağımız tablonun sadece bütününde değil her hücresinin içinde de ayrı ayrı resim dosyaları kullanabiliriz.
Not defterinize aşağıdaki örnek kodu yazın ve kaydedin.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body>
<table border=1 cellpadding=2 cellspacing=2 align=center>
<td width=50 background=bg1.jpg>Burası birinci hücre</td>
<td width=300 background=kare1.jpg>Burası ikinci hücre</td>
</td>
</tr>
</table>
</body>
</html>

İşte hücre genişlikleri ve arka planları değişik iki hücreli tablomuzu bu şekilde oluşturuyoruz. Bu kez background parametresini tablomuzun <td> takılarına ekledik.
Çerçeveli bir tablo örneği
Tablo yapım çalışmalarını noktalamadan bir web sitesinde gördüğüm ve beğendiğim değişik, kullanışlı ve görünüm olarak pek çok işlevi bir arada yürütebilen çerçeveleri aynı gazetelerde gördüğümüz düzende hoş bir tablo örneğini de sizlerle paylaşmak istiyorum. Site tasarımı ve tablo konusuna yeterince hakim olduğunuzda, istediğiniz bazı değişikliklerle kullanabileceğiniz bu tablonun html kodu ve görünümü aşağıdadır.
<html>
<head>
<title>Tablo Deneme</title>
</head>
<body>
<table border=0 cellpadding=0 width=100%>
<tr>
<td width=100%><table border=0 width=50 cellspacing=0 cellpadding=1
align=center bgcolor=000066>
<tr>
<td><table border=0 width=140 cellspacing=0 cellpadding=00 align=center
bgcolor=FFFFFF>
<tr>
<td bgcolor=0080C0 width=200 style=padding-left: 5px><font color=FFFFFF
face=Tahoma><small><small>BAŞLIK YAZABİLİRSİNİZ</small></small></font></td>
</tr>
<tr>
<td width=200><table border=0 width=100% cellspacing=0 cellpadding=2
align=center bgcolor=FFFFFF>
<tr>
<td align=left width=100% valign=top" bgcolor=8DF5FE><font color=000000
face=Arial><small>Bu kısımda isteğiniz bir bilgiyi yazabilirsiniz</small></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Yine bu tablodan yola çıkılarak hazırlanmış ve içine bir resim de ekleyebileceğiniz biraz daha gelişmiş bir örneği de aşağıya ekliyorum. Bu tabloların geliştirilerek uygulamasını ise sizlerin hayal gücüne bırakıyorum. Örnek html kodunu ve uygulama örneği resmi aşağıda bulabilirsiniz.
<html>
<head></head>
<title>Tablo Deneme</title>
<body>
<table border=0 width=150 cellpacing=0 cellpadding=1 align=center
bgcolor=000066>
<tr>
<td><table border=0 width=190 cellpacing=0 cellpadding=00 align=center
bgcolor=FFFFFF>
<tr>
<td bgcolor=FFFF00 colspan=2 width=396>Burası başlık kısmı</td>
</tr>
<tr>
<td valign=top width=10><img src=abc1.jpg></td>
<td width=386><table border=0 width=100% cellpacing=0 cellpadding=10
align=center bgcolor=FFFFFF>
<tr>
<td align=left width=100%>Buraya açıklama bilgisi girebilirsiniz. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Fantoma · 12 Mart 2011

DERS : 11

Frame (Çerçeve) oluşturmak

Tablolar kadar önemli ve doğru olarak kullanılamadığı zaman bir web sayfasının görüntüsü adeta korkunçlaştıran çerçevelerin yapılması çok titizlik ister. Aslında basitmiş gibi görünse de, dikkat edilmezse gerçekten bir kabusa dönüşebilen bu uygulamayı basitinden karmaşığına doğru hazırlamaya başlayalım.
Çerçeve, uygulama olarak birden fazla web sayfasının tek bir sayfa içerisinde gösterilmesi şeklidir. Haliyle çerçeve sayısı arttıkça, kullanımı da zorlaşır. Bir deyişle, çerçeve kullanarak iki sayfayı bir sayfada ziyaretçilerinize sunmak istiyorsanız üç ayrı sayfa hazırlamak zorundasınız. Yani birinci sayfanız, ikinci sayfanız ve bu iki sayfası bir arada göstereceğiniz çerçeve sayfanız. Eğer çok sayfalı bir web sitesi hazırlamayı düşünüyorsanız çerçeve kullanmak işinizi hayli kolaylaştıracaktır. Zor olmasına karşın çerçeve kullanılan sayfalar web sitesine daha bir profesyonel görünüm verirler.
Hele bir de çerçeve sistemini iyi kurguladıysanız, ana sayfanızdan, ekleyeceğiniz diğer sayfalarınıza ulaşım sağlamanız oldukça kolaylaşacaktır.
Her çerçeve sayfasının, aynı web sayfasındaki diğer çerçeve sayfalarından farklı bir adı olması zorunludur. Bir çerçeveden diğerine html komuları yollamak ve orijinal web sayfasının düzenini bozmadan, o çerçevenin içeriğini dinamik olarak değiştirmek de olasıdır.
Basit bir çerçeve yapalım
Bir üst paragrafta da değindiğim gibi en basitinden bir çerçeve sayfası hazırlamak için üç adet sayfa hazırlamamız gerekiyor. Bu ilk örneğimizde ortadan dikey olarak ikiye bölünmüş bir çerçeve sayfası hazırlayacağız. Yani bu, içinde iki ayrı sayfa barındıran bir çerçeve sayfası olacak.
İlk yapmamız gereken sol yanda görüntülemeyi düşündüğümüz web sayfasını hazırlamak.
Aşağıdaki kodu Not Defterinize yazın ve sol.html adı vererek web klasörünüze kaydedin.
<html>
<head>
<title>Çerçeve Deneme</title>
</head>
<body bgcolor="C0C0C0" text="000000">
<font face="arial" size="3">
<p><b>Bu sayfa sol tarafta görüntülenecek olan sayfadır</b></font> </p>
</body>
</html>

Şimdi alttaki kodu Not Defterinize yazarak sag.html olarak yine web klasörünüze kaydedin.
<html>
<head>
<title>Çerçeve Deneme</title>
</head>
<body bgcolor="FFFF00" text="000000">
<font face="arial" size="3">
<p><b>Bu sayfa sağ tarafta görüntülenecek olan sayfadır</b></font> </p>
</body>
</html>

Şimdi elimizde yapısı hemen hemen aynı ama arka plan renkleri ve içindeki yazıları farklı sol.html ve sag.html adında iki web sayfamız var.
Gelelim bu iki sayfayı tek bir web sayfası içinde, yani tek bir web sayfasıymış gibi görüntülemeye.
Aşağıdaki kodu yazacağımız sayfamızı da çerçeve.html adı kaydederek, diğer iki sayfamızın bulunduğu web klasörümüzün içine atalım.
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset cols=*,*>
<frame name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>
Şimdi kaydettiğimiz çerçeve.html sayfamıza tarayıcımızdan bakacak olursak, aşağıdaki gibi bir görünümle karşılaşmış olmalıyız.

Web sayfalarına çerçevelerin tanıtımı <frameset> takısıyla gerçekleştiriliyor.
Bu takının içine eklenecek parametler ise sayfa düzenin nasıl olacağını (yanyana sayfalar mı, alt alta sayfalar mı?) gösteriyor. Ardından <frame> takısı kullanılıyor ve bu takının parametreleri yardımı ile de çerçeve gurubunda hangi sayfaların kullanılacağı belirleniyor.
Hazırladığımız örnek çerçeve sayfasında, görüntülenecek sayfaların dikey bir bölünmeyle yanyana görüntülenmesini istediğimiz için <frameset> takısının içinde cols parametresini kullandık. Cols parametresine vereceğimiz bir takım değerlerle, sayfanın kaça bölüneceğini ve bu bölümlerin boyutlarının ne olacağını sağlayabiliriz.
Peki, bu örnek sayfalarımızı çerçeveli sayfamızda alt alta yani yatay bir düzeyde yerleştirmek isteseydik?

Bunun için aşağıdaki kodu Not defterinize yazın ve çerçeve1.html olarak kaydedin.
<html>
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset rows=*,*>
<frame name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>
Gördüğünüz gibi <frameset> takısının içine bu kez rows parametresini eklememiz yeterli olacak. Bu durumda çerçeve1.html dosyasına tarayıcınızdan bakınca, aşağıdaki gibi bir görünümle karşılacaksınız.

Çerçeveli sayfalarda her bölmenin boyutu birbirinden (,) virgül ile ayrılır. İlk hazırladığımız örnekte cols=*,* şeklinde değer atanmamış bir uygulama yaptığımız için hazırladığımız çerçeve.html dosyası varsayılan değer olarak ikiye eşit olarak ayrıldı. Halbuki cols parametresine, örneğin cols=150* şeklinde bir değer atamış olsaydık bakın hazırladığımız sayfa nasıl olacaktı?
Şimdi aşağıdaki kodu Not Defterinize yazın ve yine çerçeve.html olarak kaydedin.
<html>
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset cols=*150,*>
<frame name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>

Çerçeveler de, aynen tablo yaparken kullandığımız bir metod ile yani yüzde değerleri ile de kurulabilir.
Bu işlemi gerçekleştirebilmek için aşağıdaki kodu aynen Not Defterinize yazın. <html>
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset cols=*80%,>
<frame name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>

Çerçeveli sayfa hazırlarken, çerçevelerin her birinin ayrı bir adı olmalıdır. Ayrıca tarayıcıya hyangi çerçevenin içerisinde hangi web sayfasının kulanılacağını da bildirmek zorundayız.
Bu işi örneğimizde olduğu gibi, <frame src/Dosyamızın adı)=sol.htm name(Çerçeve adı)=sol> olarak belirttik.
Bu yazdığımızla tarayıcımıza "Birinci çerçevenin içerisinde sol.html dosyasını kullan, çerçevenin adı da sol olsun." demek istedik.
Çerçevelerde kullanılacak parametreler
Çerçeveli bir sayfa hazırlarken, ilk yazdığımız koda bakarsanız, çerçeveli sayfamız aşağıdaki gibiydi.
<html>
<head>
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset cols=*,*>
<frame name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>
Bu kodu yazıp, tarayıcınızdan baktığınızda, istediğiniz elde etmiş olduğunuzu gördünüz. Ama iki sayfa arasında bir çerçeve ayırım çubuğu da gördünüz. Bu, sayfamızı enine ve ya boyuna ikiye ayıran çubuğun ortadan kaldırılması olası.
Aşağıdaki kodu Not Defterinize yazıp, kaydedin ve sayfanıza tarayıcınızdan bakın.
<html>
<head>
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset border=0 cols=*,*>
<frame name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>

Örnek kodumuzda bu işi border parametresi başardı. border=0 değeri vererek, çerçeve çubuğunun ortadan kalkmasını sağladık.
Border parametresi ile ilgili bir kaç çalışma yaptığınızda, vereceğiniz değer ile ilintili olarak çerçevenin piksel cinsinden kalınlaştığını göreceksiniz. Örneğin border=10 gibi bir değer verdiğinizde çerçeve çubuğunun 10 piksel kalınlıkta olduğunu göreceksiniz.

Çerçeveli sayfalar hazırlarken, hazırladığımız sayfaların boyutları, içeriği arttıkça doğal olarak büyüyecektir. Bu durumda, normal pencerelerden tanıdığımız kaydırma çubukları, satanın altında veya sağ yanında, yani enine veya boyuna belirecektir.
Web adlı klasörünüzde bulunan çerçeveli örnek bir sayfayı tarayıcınızda açın ve tarayıcıunın boyutlarını daraltın. İşte o zaman sayfanızın altında ve sağında, o çerçevelerin içeriği olan sayfanın tamamının görüntülenebilmesi için kaydırma çubukları belirdiğini göreceksiniz.

Üstteki resimde gördüğünüz gibi,sayfamızın altında kaydırma çubukları belirdi.
Şimdi dikkatle alttaki resme bakın. Bakalım ne gibi bir değişiklik görecveksiniz.

Dikkat ettiyseniz sol çerçevenin altında kaydırma çubuğu görünmüyor.
İşte alttaki kodu Not Defterine yazarsanız ve kaydettikten sonra tarayıcınızın boyutu küçültüp, çerçevceli sayfanıza bakarsanız, siz de aynı sonucu göreceksiniz.
<html>
<head>
<head>
<title>Çerçeve Deneme</title>
</head>
<frameset border=0 cols=*,*>
<frame scrolling=no name=sol src=sol.htm>
<frame name=sag src=sag.htm>
</frameset>
</html>
Bu kodu yazarken ben sol sayfanız alta akmamasını sağladım.
<frame scrolling=no name=sol src=sol.htm> satırına, yani sol pencerenin satırına scrolling=no komutunu verdim. Eğer sağ pencereye bu komutu yazmış olsaydım sağ pencere, iki çerçeveye de ekleseydim, sayfa uzun olsa da kaydırma çubukları görüntülenemeyeceği için,iki çerçeve de alttan veya sağdan akamayacaktı.
Çerçeveli sayfalarda, özellikle iki çerçeveli sayfalarda solda yapacağınız çerçeveli bir menü sayfası, sağdaki çerçeveli sayfadan az yer tutacaksa, soldaki çerçeveli sayfaya bu komutu uygulamakla, yapısının hiç bozmadan kalmasında bir sakınca yok. Aksine hoş da olur. Ancak sayfa içerikleri çok, ve dolayısıyla büyük sayfalar yapacaksanız, sayfanızın görüntülenmesi açısından bu komutu kullanmamalısınız.

Fantoma · 17 Mart 2011

DERS : 12

Css (Cascading Style Sheets) Katmanlı Stil Sayfaları

Web sayfalarını yazarken, Katmanlı Stil Sayfaları adı verilen bir kodlama ile, Html diline destek sağlamak ve aynı şeyleri tekrar tekrar kullanmamak için hazırlanmış bir stil yöntemi uygulamak artık günümüzün web sitelerinde en çok başvurulan yöntemlerin başında gelmektedir.
Yazımızda CSS adı ile kullanacağımız bu yöntemin sayfalarınızı hazırlarken gerçekten çok yardımcı olacağını göreceksiniz. Ayrıca CSS kullanarak farklı tarayıcılarda hep aynı görüntüyü elde edebilirsiniz.
CSS genel itibarı ile html sayfasında kodları azaltmak için uygulanan bir kodlar tümleşiği gibi algılansa da, aslında bir web sayfasının A'dan Z'ye hazırlanabilmesini sağlamaktadır.
Html ile sayfa hazırlarken, sayfa düzeni ve tablolar bahislerinde değindiğim sayfanın düzen içinde olmasını temin amacı ile kullanılan bazı enstrümanlar artık tamamen CSS ile yapılmakta, tablolar, çerçeveler bile CSS kodları ile html kodları beraber kullanılarak hiç tablo kullanılmadan sayfa düzenleri hazırlanmaktadır.
Html dilini öğretmek amacı ile yaptığım bu sitede kullandığım sayfa şablonu ve menü hiç tablo kullanılmadan, sadece CSS kodları ile hazırlanmıştır.
Peki nedir bu harika CSS?
CSS ile kodlama ve kullanımını anlatmaya başlamadan önce bir kez daha önemle vurgulamak istediğim bir konu var.
Bu sitede yazılanları dikkatlice uygulayın ve kodları değiştirerek html dilinin ne demek istediğini öğrenin. Html diline anlayacak kadar sahip olamazsanız, CSS ile yazılmış olan kodlar size hem yabancı gelecek, hem de aklınızı büsbütün karıştıracaktır.
CSS, başlangıç aşamasında html sayfası içindeki takılar karmaşasını azaltmakla, tüm önemli işlevleri bir çatı altında toplamayı üstlenir. CSS kodları, JavaScripte benzer bir uygulama ile genelde <head> ve </head> takısı içine yazılırlar.
Ve <body> ile </body> takısı içerisindeki uygulamalar için, <head> ve </head> takısı içerisinde yazılmış koddan çağırılırlar.
CSS kodu <head> ile </head> takısı arasına yazılacak, <style type=text/css> takısı ile başlatılarak, CSS kodunun yazımının bittiği yerde </style> takısı ile sonlandırılır.
Komple bir sayfayı CSS kodları ile hazırlamak olasıdır. Bu durumda CSS kodları da oldukça fazla satır tutarak yazılan html sayfasının şişmesine neden olabilir.
İşte bu durumda sadece CSS kodu Not Defterine yazılarak ve (.css) soyadı ile kaydedilerek, yazılan web sayfasının bulunduğu dizine gönderilir.
Web sitesini yayınlarken sayfalarımız bir server (dağıtıcı)'ya yüklenmek zorundadır. İşte Html'ye başlangıç sayfalarında değindiğim ve "web" adını vererek açıp, tüm web sayfamızla ilgili elemanları içinde sakladığımız klasör, çok basitçe bir server vazifesi görmektedir.
İster bilgisayarımızda, ister bir serverda, ama tamamı aynı dizinin içinde barındırılan html ve css sayfaları, uygulama esnasında html sayfamızın içerisinde ve <head> ile </head> takıları arasına yazacağımız
<link href="ornek.css" rel=stylesheet type=text/css>
kodu ile çağırılır.
Ayrı yazılmış CSS kod sayfası bu tek satırla html sayfamızın içine eklendiğinde, html kodlarını yazarken, css kodları sayfamızda belirttiğimiz ve sayfa düzenini etkileyen tüm kodlar, sanki <head> ile </head> takısı içerisinde tek tek yazılmış gibi işlev görürler.

Şimdi en basitinden başlayıp, CSS ile kodlamanın nasıl yapıldığına geçelim.
Aşağıdaki kodu Not Defterinize yazın ve kaydedin.
<html>
</body>
</head>
<style type="text/css">

</style>
</head>
<title>CSS Deneme</title>
<body>
<div id="redfont">
<p>Bu yazı önemli olduğu için kırmızı yazıldı</p>
</div><div id="bluefont">
<p>Bu kısım normal olduğu için mavi yazıldı.</p>
</div>
</body>
</html>

Aslında bu iş görünümü elde etmek amacıyla, html kodu yazılırken kırmızı olmasını istediğimiz bölüm için <Font> takısına ekleyeceğimiz "color" parametresi ile de istediğimiz sonucu elde edebildiğimizi görmüştük.
O zaman CSS kodlarına ne gerek var?
CSS kodları <style> ve </style> takıları içine yazacağımız kodlarla sayfanın tümünün html örgüsüne hakim olabileceğimiz bir yazılımdır. Sadece yazı karakterleri, yazı renkleri, bağlantı renkleri gibi kullanmak istediğimiz ana olguların dışında tablolarımızın yapısına dek karışık biçimlerin bu kodlarla düzenlenebilmesini sağlar. CSS kodlarını uyguladıkça, html yazımının ne denli pratikleştiğini daha iyi görüp, anlayacaksınız.
Şimdi bir önceki sayfada değindiğim bir html sayfası ile bir CSS dosyasını ayrı ayrı hazırlayarak anlatayım. Yalnız en önemli nokta hazırlayacağımız CSS dosyası ile CSS deneme adlı html dosyasının web adını verdiğimiz aynı klasörde saklanmasını temin etmek. Zaten yazılarımın en başında da söylemiştim. Web sayfası ile ilgili tüm doneleri (örneğin) web adını vereceğiniz tek bir klasörde barındırmalısınız. Aslında bu doneler iki veya üç ayrı klasörde de barındırılabilir. Ama bu yöntem daha pratiktir.
Şimdi önce CSS dosyamızı hazırlayalım.
Aşağıdaki kodu Not Defterinize yazın ve deneme.css olarak kaydedin. Web klasörünüze atın. Dosya Not Defterinizde kaydederken (deneme.txt) soyadı ile kayıt edilecektir. Dosyanın soyadını değiştirip (deneme.css) olarak düzenleyin. Windows sisteminden gelecek "Dosya adını değiştirirseniniz dosya bir daha kullanılamayabilir" uyarısını gözardı edin. Tamam deyip kaydedin.
.forTexts {
font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333333;
line-height: 20px;
text-align: justify;
Şimdi html dosyamızı hazırlayalım. Aşağıdaki kodu not Defterinize yazın ve cssdeneme.html olarak kaydedin.
<html>
<head>
<link href="deneme.css" rel="stylesheet" type="text/css">
<title>cssdeneme.htm</title>
</head>
<body>
<table border="1">
<tr>
<td class="forTexts">buradaki yazılar CSS dosyasında belirttiğimiz parametrelerin
değerini alacak. Mesela yazı 16 punto ve Comic Sans MS karakterinde olacak.</td>
</tr>
</table>
</body>
</html>

Hazırladığımız deneme.css adlı dosya içine, html dosyasının "body" yani gövdesinde takılar ile kullanacağımız tüm uygulanabilir işlevleri yazdığımızda, üstteki örneğimizde <td class> parametresine uyguladığımız .forText biçiminde çağırdığımız gibi, hemen düzenlediğimiz biçimi ile görüntülenecektir.

CSS kodu olarak html içine veya .css soyadı ile ayrı olarak yazılan kodlama, iyi anlaşılıp kullanıldığında, bazı takılara eklenen parametrelerle sayfa içinde, sayfa düzeninin istediğimiz gibi görüntülenmesini sağlamaktadır.
Bu sayede html sayfası içinde takılardan kaynaklanan karışıklık ve şişikliğin önüne geçilmiş olur. Dolayısı ile html sayfasının boyutu da küçülecektir.
Örneğin, <head> ve </head> takılarımızın içine ekleyeceğimiz CSS kodları uzunca bir yazının içinde ekleyeceğimiz renk değişikliklikleri için uzun takı yazımı yerine basit bir takı ile işimizi kolaylaştırabilir.
Şimdi aşağıdaki kodu Not Defterinize yazın ve kaydedin.
<html>
<head>
<style>

</style>
<title>CSS Deneme</title>
</head>
<body>
<p><font face="Comic Sans MS" color="000000" size="3">Buradaki yazılar siyah renkli ve
Comic Sans MS karakterinde olacak. Ama <span>bu kısım kırmızı renkli ve sağa yatık
olacak.</span> yazımız buradan itibaren eskisi gibi devam edecek.</p>
</font>
</body>
</html>

İşte bu basit kodla yazımızın CSS kodunda belirttiğimiz rengi almasını <span> ve </span> takılarını ekleyerek en basite indirgedik.
Elbette yazı karakteri takısı için ekleyeceğimiz CSS kodları ile de, yazımızın karakteri, puntosu, aralıkları gibi yazı ile ilgili gerekli kodlar da eklenerek html içinde takı kullanımı çok azaltılabilir.
Bunları gelişmiş CSS sayfaları hazırlarken göreceğiz.
CSS kodlarının <head> ve </head> takıları dışında, yani sayfamızın <body> ve </body> takıları arasına da eklenebilmesi olasıdır.
Aşağıdaki kodu Not Defterinize yazarak cssdeneme.html olarak kaydedin.
<html>
<head>
</head>
<title>CSS Deneme</title>
<body>
<div style=border-style:solid>
<p>Bu kısımda üçboyutlu bir sınır çizgisi oluşturduk.</p>
</div>
</body>
</html>

Dikkat ederseniz sadece <div> ve </div> takılarını ekleyerek adeta bir tablo hücresi oluşturduk.
Şimdi bu sınır çizgisine biraz şekil verelim.
Aşağıdaki kodu tekrar Not defterinize yazın ve cssdeneme.html olarak kaydedin.
<html>
<head>
<title>CSS Deneme</title>
</head>
<body>
<div style="width:200px; border-style:solid">
<p>Bu kısımda üç boyutlu bir sınır çizgisi oluşturduk. Bu kez boyunu 200 piksel
olarak ayarladık.</p>
</div>
</body>
</html>

İşte bu kez 200 piksel boyu olan ve dışında çerçeve olan bir yazı elde etmiş oldu

HTML Dersleri

Asistan

Profesör

Öğrenci

Öğrenci

Profesör

Asistan

Öğrenci

Öğrenci

Rektör

Asistan

Asistan

Doçent

Rektör

Profesör

Asistan

Doçent

Asistan

Asistan

Öğrenci

Öğrenci

Profesör

Öğrenci

Profesör

Profesör

Profesör

Profesör

Profesör

Profesör

Profesör

Profesör

Benzer konular