A dan Z ye HTML
Son güncelleme: 04.04.2010 18:24
-
arkadaslar bu döküman içerisinde bir takım tablolar bulunmaktadır.ancak burada bunları teker teker yükleyebilmem güç olduğu için dilerseniz e-book kısmında yayımlayacağım A dan Z ye HTML e-book ını indirip tabloları görüp dökümanlara sahip olabilirsiniz.
1.HTML'e GİRİŞ
HTML açılımı HyperText Markup Language olan,kullanıcılarına browserlar tarafından gorüntülenebilen web sayfalaları tasarlama imkanını sunan bir programlama dilidir(Belki metin biçimlendirme dili desek daha uygun olur).Fakat C/C++,Basic,Java gibi yüksek dereceli programlama dillerine kıyasla ögrenmesi çok kolaydır,tabi yapabilecekleri de bir o kadar kısıtlıdır.Tabi bu 'kısıtlı' lafına aldanmayin,iyi bir HTML temeli uzerine biraz JavaScript ve CSS (ve tabi yaratıcılığınızı) ekleyerek,internette görup de kıskandiginiz birçok sayfayı yapabilecek hale gelebilirsiniz! Amacımız HTML oğrenmek olduğuna göre,HTML'i bir tanıyalım İlk olarak HTML ile yapılan web sayfalarının calışma mantıgına bir bakalım, sonra da HTML ile ne yapıp ne yapamayacagımızı öğrenelim:
1/1.HTML'in ÇALIŞMA MANTIĞI
HTML dilinde yazdiginiz kodları ücret karşılığı veya bedava hizmet veren servis sağlayıcınızın sunucusuna(server) yüklersiniz(upload); Bu sunucu sizin web sayfanızı internette yayınlar; Sitenize gelen ziyaretçilerin browserları bu kodları yorumlar ,böylece ziyaretçiler sayfayi görüntülemiş olur. Kendi yazdığınız kodları kendi browserınızla açarak da sayfanızın nasıl goründüğünü test edebilirsiniz. Bu mantığı konular ilerleyince daha iyi kavrayacaksınız.
-
1/2.HTML İLE NE YAPILABİLİR,NE YAPILAMAZ
HTML ile bir web sayfasında
Yapılabilecekler:
Metin Biçimlendirme(Renk,font,vs),listeler,bağlantılar(link),resim kullanımı,tablolar,Çerçeveler,Formlar
Yapılamayacaklar:
Etkileşimli,olaylara duyarlı sayfalar;formları işleyip degerlendiren programlar.
Yapılamayacaklardan ilkini Javascript,ikincisini CGI ,ASP, veya PHP kullanarak yapabilirsiniz. Bununla birlikte bir web sayfasının temelini her zaman HTML kodları oluşturur, Yani web tasarımı konusunda ilerlemek istiyorsanız,HTML bilginizin sağlam olması gereklidir!
Sonraki konu: HTML kodları yazmak için ne gerekir?
-
2.NE GEREKİR?
Bir web sayfası yapmak için ne gerekir?Bu noktada iki seçeneğiniz var.Eğer web sayfanızı hiçbir kod kullanmadan yazmak istiyorsanız,Homepage veya Dreamweaver gibi,sizi bu işten kurtaracak yazılımlar kullanabilirsiniz.Kendi içlerinde başarılı sayılabilecek bu yazılımların dezavantajı ise,yapabileceklerinizin programın size sunduklarıyla sınırlı olmasıdır.Veya oturup kendiniz kod yazmak/üretmek isteyebilirsiniz.Zaten bu konuyu okuduğunuz için ikinci gruba girdiğinizi varsayıyoruz,yani bu işi geçekten öğrenmek istiyorsunuz... O zaman iyi haber şu: İhtiyacınız olan şey sadece bir düzyazı programı,mesala (Windows için) Notepad .Tabi yazdıklarınızı test etmek için bir browser da fena olmaz,ama onu zaten her yerde bulabilirsiniz.
Opsiyonel olarak kod yazma işini kolaylaştıran, size zaman kazandıran text tabanlı bazı yazılımlar kullanabilirsiniz,mesela 'allaire Homesite'.Bu tip programlar sadece kod yazma işlemini kolaylaştırır,ancak yazma işlemini yine siz yaparsınız,dolayısıyla yapabileceklerinizi sınırlayan tek şey bilginizdir.Yine de işlerin nasıl yürüdüğünü öğrenmek için önce Notepad ile başlamanız faydalı olacaktır.
Notepad kullanırken, konulara ilişkin verilen örnekleri ve/veya kendi yazdığınız kodları '.htm' veya '.html' uzantılı kaydedin.Aksi takdirde browser'ınız bu dosyaları görüntülemez.Homesite yazdıklarınızı zaten standart olarak bu uzantılarla kaydeder.
Üzücü bir durum,iki yaygın browser olan 'Microsoft Internet Explorer' ve 'Netscape Navigator''ün html kodlarını yorumlamada farklılık göstermesidir.Piyasanın bu iki browser arasında neredeyse eşit olarak bölünmüş olmasından dolayı,yazdığınız kodları her iki browser'ın da aynı/benzer şekilde yorumlayacağı şekilde yazmaya özen göstermelisiniz.Sayfayı tasarlarken belli aralıklarla Explorer ve Netscape ile görüntüleyip sonucu karşılaştırmak,bu sorunu çözmek için iyi bir yöntemdir.
Son olarak;Browser'ınızın 4. veya daha ileriki bir sürüm olması tavsiye edilir,çünkü eski sürüm browser'lar bazı özellikleri desteklememektedir.
Sonraki konu: HTML'de temel kavramlar
-
3.TEMEL KAVRAMLAR
HTML'i kısaca tanıdık ve gerekli araçları öğrendik,artık gerçekten HTML öğrenmeye başlayalım...
3/1.BAZI TEMEL KAVRAMLAR
" Tag(Etiket): HTML belgelerine bir şey yerleştirmek ve/veya bir biçim belirtmek için 'Etiket' denen ifadeler kullanırız.Etiketler '<Etiketin Adı>' şeklinde yazılırlar.Bazı istisnalar hariç açılan etiketlerin yeri gelince kapatılması gerekir; bu da '</Etiketin adı>' ifadesiyle yapılır.
<center> : Metnin ortalanmasını sağlar ; <textarea> : Metin alanı oluşturur.
" Parameter(Parametre): Parametreler etiketlerin değiştirilebilen özelliklerinin isimleridir.
<textarea rows="50">
Burada 'rows' ifadesi metin alanının yükseklik özelliğinin adıdır,bu özelliğin değeri değiştirilebilir.
" Value(Değer): Parametre tanımından da kolayca anlayabileceğiniz gibi,parametreler ile değiştirdiğimiz sayılara(veya bazen keywordlere)değer adı verilir.
<textarea rows="50">
Burada '50' ifadesi metin alanının yüksekliğinin değeridir.
NOT:Kursun devamında parantez içinde verilen Türkçe terimler kullanılacaktır.Fakat bu terimlerin orjinallerini de aklınızın bir kenarında tutun.
3/2.TEMEL ETİKETLER
<html>...</html> Bu etiket browser'a HTML belgesinin basladığı ve bittiği yeri bildirir.Bütun HTML kodları bu etiketin içinde yeralmadır.
<head>...</head> HTML belgesinin ilk bölümüdür.Title bölümü ile ileride göreceğimiz CSS ve JavaScript kodları buraya yazılır.Bu bölume yazılanlar metin olarak ekranda görünmez.
<title>...</title> Head bölümü içine yazılan Title bölümüne sayfanın başlığı yazılır,bu başlık browser'ın sol üst bölümünde görüntülenir.
<body>...</body> HTML belgesinin bütün içeriği burada yeralır.Buraya metinler,resimler,listeler... vb. her türlü HTML nesnesi yerleştirilebilir.
Diğer üç etiketin aksine body etiketinin parametreleri bulunur.Bunları ilerde ayrıntılı olarak inceleyeceğiz.
Sonraki konu: İlk sayfam ve HTML belgesinin genel yapısı
-
4.İLK SAYFAM VE HTML BELGESİNİN YAPISI
4/1.İLK SAYFAM
İlk web sayfamızı yapacak kadar HTML öğrendik bile! İşte adet olduduğu üzere Merhaba dünya...
<html>
<head>
<title>Merhaba!</title><br><METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
Merhaba Dünya!
</body>
</html>
Yukarıda görgüğünüz kodu düzyazı programınızda yazıp merhaba.htm adıyla kaydedip çalıştırırsanız ilk HTML sayfanızı yapmış olursunuz. Burada 4. satırda gördüğünüz meta etiketi,sayfanızda Türkçe karakterlerin görüntülenmesini sağlar.Diğerlerini zaten biliyorsunuz...
4/2.HTML BELGELERİNİN GENEL YAPISI
HTML belgeleri,ilk sayfamızdan da anlaşılabileceği gibi aşağıdaki şablon üzerine yazılır:
<html>
<head>
<title>Başlık</title>
</head>
<body>
...
</body>
</html>
Eğer isterseniz bu şablonu istediğiniz bir adla .txt uzantılı olarak kaydedip, bundan sonra yazacağınız örnekleri kaydettiğiniz bu dosyanın uzerine yazabilirsiniz; böylelikle her seferinde fazladan birkaç kod yazmaktan kurtulmuş olursunuz.Eğer sitenizde Türkçe karakter kullanacaksanız lütfen bu şablonun head bölümüne, 'Merhaba Dünya' örneğinin kodlarında 4. satırda yer alan
<meta content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>< /td>
satırını da ekleyin...
Sonraki konu: Metin Biçimlendirme
-
5.METİN BİÇİMLENDİRME TAGLARI
HTML'in temel unsurlarını öğrendikten sonra,artık işin inceliklerine geçebiliriz. İlk olarak yazdığımız metinleri şekillendirmeyi öğreneceğiz.Aşağıdaki tablodaki etiketler,size bu konuda geniş olanaklar sağlayacak. Önce Başlık etiketleri:
5/1.BAŞLIK ETİKETLERİ
<h1>...</h1> Başlık
<h2>...</h2> Başlık
<h3>...</h3> Başlık
<h4>...</h4> Başlık
<h5>...</h5> Başlık
<h6>...</h6> Başlık
5/2.VE DİĞERLERİ...
<b>...</b> Yazılarınızı 'bold' yapar. Örnek Yazı
<i>...</i> Yazınızı italik karakterlerle yazar Örnek Yazı
<u>...</u> Altı çizgili yazar Örnek Yazı
<p>...</p> Paragraf etiketi,paragrafınızın altına ve üstüne boşluk koyar ...
Paragraf
...
<br> satırbaşı yapar,bu etiketi kapatımak gerekmez ...
Satırbaşı
Şimdi bir örnek ile öğrendiklerimizi uygulayalım:
<html>< br><head><br><title>MetinBiçimlendirmeörneği</title><br><metacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
HTML size metin biçimlendirme konusunda geniş olanaklar sağlar; Metinlerinizi ister <h1>kocaman</h1>,
ister <h6>küçücük</h6>,isterseniz <b>koyu</b>,<u>altyazılı</u>,veya <i>eğik</i> yazabilirsiniz.
Yada satırbaşı yapabilir,<br>Veya<p>Paragraf oluşturabilirsiniz</p>
</body>
</head>
</html>
Metin biçimlendirmek için yukarıda gördüğümüz etiketlerin dışında <font>...</font> etiketi de kullanılır.Bu etiketi ve parametrelerini bir sonraki bölümde bulabilirsiniz...
Sonraki konu: <font> Etiketi
-
6. <FONT> ETİKETİ
Font etiketi sahip olduğu parametreler sayesinde metinlerin renk,yazı tipi, boyut gibi özelliklerini değiştirmemize olanak sağlar.Bu etikete geçmeden önce HTML'de renklerden kısaca bahsetmek yerinde olur.
6/1.RENKLER
HTML'de renkler hexdecimal formunda ifade edilir.Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur ve Bu düzende 9'dan sonraki say1ıarı göstermek için 'A'dan 'F'ye kadar olan harfler kullanılır. Bununla birlikte HTML bazı renklerin ingilizce isimlerini anlar; aşağıdaki örnekte bu renkleri görmektesiniz.
AQUA BLACK BLUE FUCHSIA GRAY GREEN LIME
MAROON NAVY OLIVE PURPLE RED SILVER WHITE YELLOW
Burada görülen renkler hexdecimal cinsinden de ifade edilebilir: Örneğin #FFFFFF beyaz ,#000000 siyah ,#C0C0C0 gri(tabloda 'silver') renklerini verir.
6/2.<FONT> ETİKETİ VE PARAMETRELERİ
Renkleri kısaca tanıdıktan sonra artık asıl konumuza geçebiliriz.HTML belgesinin body bölümüne yazdığımız metni <font></font> etiketleri arasına alarak bu metne etiketin aşağıdada listelenen parametreleri doğrultusunda bazı özellikler kazandırabiliriz:
color hexdecimal veya 'rengin ingilizce ismi' değerini al1ır #000000,black
face Yaz1. türünün ismi değerini al1ır Times new roman,Arial
size 1 ile 7 arasında istenilen değeri alır +1,+5
Şimdi bu parametreleri bir örnekte kullanalım:
<html>
<head>< BR> <title>Fontkullan1.m1.</title><BR> <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body>
Font etiketinin color parametresini kullanarak <font color="#FF0000">renkli</font>
<font color="Blue">yaz1ılar</font> <font color="#00FF00">yazabilir</font>;<p>
değişik yazı karakterleri kullanabilirsiniz:<font face="Verdana">Mesela böyle!</font><p>
Hatta yazılarınızı <font size="+6"> büyütüp</font><font size="-1"> Küçültebilirsiniz</font>
</body>
</html>
Font etiketinin face parametresinin yazı tipi belirttiğini biliyoruz.Bu parametre ile belirlediğiniz yazı tipi,ancak ziyaretçinin bilgisayarında da yüklü olması halinde görüntülenebilir. Bu nedenle bu parametreye birkaç değer atamak,son değer olarak da windows'un standart font'lar1ından birini atamak, sayfalarınızın hiç istemediğiniz bir font'la görüntülenmesini büyük ölçüde engeller.
<font face="impact,verdana,arial">...</font>
Bu kod browser'a önce impact, yoksa verdana, o da yoksa arial fontunu kullanmasını bildirir.
Sonraki konu: Arkaplan ve <body> Etiketi
-
7.ARKAPLAN
5. ve 6. bölümlerde öğrendiklerimizle artık metinler üzerinde biçim anlamında her türlü değişikliği yapabiliriz. Sayfa tasarımında en az metinler kadar önemli bir unsur olan arkaplan üzerinde ne gibi değişiklikler yapabileceğimizi bu bölümde öğreneceğiz. Ayrıca <body> etiketinin parametrelerini göreceğiz.
7/1. ARKAPLAN VE <body> ETİKETİ
HTML belgesinin ekranda görüntülenen bölümü olan body bölümünün başladığını browser'a <body> etiketiyle bildirdiğimizi biliyoruz. Bir etiketin herhangi bir parametresine atadığımız değer, o etiketin oluşturduğu alan içerisinde geçerlidir.Mesela:
<font color="blue">...</font>
ifadesi, sadece '...' ile gösterilen alan içerisine yazılanları 'mavi' yapar. Bu durumda tahmin edebileceğiniz gibi <body> etiketinin parametrelerine verilen değerler, bütün sayfa için geçerlidir.Aşağıda bu parametreleri ve kullanılışlarını görüyorsunuz.
bgcolor Sayfanımın arkaplanının rengini belirler <body bgcolor="blue">
background Arkaplana .gif,.jpg gibi HTML'in yorumlayabildiği bir resim dosyası koymanızı sağlar <body background="c:\sayfam\resim.gif">
text Sayfanızdaki metinlerin rengini belirler <body text="#2354FF">
link Sayfanızdaki bağlantıların tıklanmamış durumdaki rengini belirler. <body link="yellow">
alink Sayfanızdaki bağlantıların tıklama işlemi süresince alacağı rengi belirler <body >
vlink Sayfanızdaki bağlantıların tıklama işleminden sonra alacağı rengi belirler <body >
Burada tabloda bütünlüğü bozmamak amacıyla verilen son üç parametre, ileride deyineceğimiz link(bağlantı)larla ilgilidir, bu yüzden şimdilik bunları unutabiliriz.
NOT: 'Background' parametresini kullanırken, resminizin yerini tam olarak yazmayı ve sonuna uzantısını(.gif; .jpg vs.) koymayı ihmal etmeyin!
7/2. YATAY ÇİZGİ
Başlığın hemen üzerinde bir örneğini gördüğünüz yatay çizgileri kullanarak sayfalarınızın okunmasını kolaylaştırabilirsiniz.İşte buna olanak sağlayan <hr> etiketive parametreleri:
align Konum belirler;left,center,right değerlerini alabilir. <hr align="right">
size Çizginin piksel cinsinden kalınlığı <hr size="20" >
width Piksel cinsinden uzunluk <hr width="400">
color Çizginin rengini belirler <hr color="blue">
Üç bölümün sonunda artık metinlere ve arkaplanlara iyice hakim olduk.Aşağıdaki örnek ile bilgilerimizi tekrar edelim:
<html>
<head>
<title>Metin ve arkaplan uygulalaması</title>
</head>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<body bgcolor="green" link="red" vlink="yellow" alink="black">
<h1>Modern Futbol</h1><br><hr>
<p><font face="Verdana,hevletica" color="#FFFFFF">Günümüz modern futbolunun gereği olan <b>3-5-2</b> sistemi, oynanması bir hayli zor bir sistemdir. Bu sistemde <i>orta alanın iki ucundaki</i> oyunculara büyük iş düşer.</p>
<p>Modern futbolun başka bir gereği de alan savunması yapmaktır. Ancak tehlikeli santraforlar için
önlem alma gereği, savunmaları bazen güç duruma düşürebilir.</p>
<a href="http://www.uefa.com">İşte size faydalı bir link!</a>
</font>
</body>
</html>
Sonraki konu: Bağlantılar ve Resimler
-
8.BAĞLANTILAR VE RESİMLER
8/1. BAĞLANTILAR(LINK)
Web sayfalarında en çok kullanılan unsurlardan biri bağlantılardır.Bağlantılar ziyaretçinin bir tıklama ile, sitenizin içinde veya dışında, belirlediğiniz herhangi bir adrese gitmesini sağlar.Bağlantılar browser'a <a> etiketi ile bildirilir.İşte bu etiketin parametreleri:
href Bağlantının adresi bu parametreyle bildirilir <a href="http://www.sayfaAdı.com>Sayfa Adı</a>
Sayfa Adı
target Sayfanın açılacağı yeri belirler.Target parametresi,açılacak sayfa yeni bir sayfa olarak açılacaksa'_blank',aynı pencere içinde açılacaksa '_self',aynı pencerere içerisinde üstten itibaren açılacaksa '_top' değerini alır. '_parent' ve 'ÇerçeveAdi' değerlerine çerçeveler konusunda değineceğiz <a href="http://www.sayfaAdı.com target="_blank">Sayfa adı></a>
Sayfa Adı
'Href' parametresinin değeri sayfaadi.com gibi bir adres olabileceği gibi, örneğin deneme.zip gibi bir dosya adı da olabilir. Böyle bir bağlantıya tıklandığında browser kullanıcıya bu dosyayı indirmek isteyip istemediğini sorar. Bu özelliği kullanarak ziyaretçilerin sayfamızdan dosya indirmelerini sağlayabiliriz.
<a href="http://www.SayfaAdi.com/dosyalar/deneme.zip">Burarya tıklayıp dosyayı indirin!</a>
Burarya tıklayıp dosyayı indirin!
8/2. RESİMLER
Resimler doğru ve yerinde kullanıldığında HTML belgelerine estetik açıdan çok şeyler katabilirler;fakat büyük boyutları nedeniyle yavaş yüklenirler.Bu da ziyaretçinin sıkılmasına,hatta sayfayı terketmesine neden olabilir.Bu nedenle, en azından internet bağlantıları daha hızlı oluncaya kadar, resimleri 'az ve öz' kullanmanız doğru olacaktır.Resimler <img> etiketi aracılığıyla kullanılırlar.Aşağıda bu etiketin parametrelerini görüyorsunuz.
src Resmin bulunduğu dizini bu parametre ile bildiririz <img src="deneme.gif">
width Resmin genişliğini piksel cinsinden bildirir <img src="deneme.gif" width="100">
height Aynı şekilde resmin yüksekliğini bildirir. <img src="deneme.gif" height="100">
border Resmin etrafındaki çizginin kalınlığını belirtir. <img src="deneme.gif" border="6">
align Yatay konum belirler;left,right,center değerlerini alır. <img src="deneme.gif" align="left">
alt Mouse resmin üzerindeyken yazacağınız meni gösterir <img src="deneme.gif alt="Buraya açıklama yazın!">
8/3. RESİMLERİ VE BAĞLANTILARI BİRLEŞTİRELİM
Aşağıdaki örneği yazdığınızda, üzerine tıklanınca istediğiniz bir adrese yeni pencere açan bir resim elde edersiniz.
<a href="http://www.sayfaadi.com"target="blank"><img src="deneme.gif" ></a>
Sonraki konu: Listeler
-
9.LİSTELER
Buraya kadar metinler ile ilgili öğrendiklerimiz biçimlendirme üzerineydi. Fakat HTML'in olanakları bununla sınırlı değil: İstenildiği takdirde HTML listeler ve tablolar aracılığıyla metinleri 'düzenlemenize' de olanak verir. Bu araçlardan ilki olan listelerin sıralanmış liste, sıralanmamış liste ve açıklama listesi olarak tercüme edilebilecek üç çeşidi bulunur.Bu listelerin kullanılışını ve farklarını aşağıdaki örneklere bakarak kolayca anlayabilirsiniz.
9/1. SIRALANMIŞ LİSTE(ORDERED LIST)
Sıralanmış listeler <ol>...</ol> etiketleri arasına yazılır,HTML bu etiketlerin arasına yazdıklarımızı isteğinize bağlı olarak rakam veya harfler kullanarak sıralar. Bu isteğimizi <ol> etiketinin type parametresiyle belirleriz. Bu prametre sıralanmış listelerde 'a[/swf2][swf3]A[/swf2][swf3]i[/swf2][swf3]1' değerlerini alabilir. <Ol> etiketi ile oluşturduğumuz listenin her elemanının başına <li> etiketini koyarız. Bu etiket ingilizce 'liste elemanı' anlamına gelen 'list item' kelimesinin kısaltılmışıdır.
1. CD ROM
i. 30X
ii. 40X
iii. 50X
2. DVD
a. 4X
b. 8X
c. 12X <ol>
<li>CD ROM
<ol type="i">
<li>30X
<li>40X
<li>50X
</ol>
<li> DVD
<ol type="a">
<li>4X
<li>8X
<li>12X
</ol>
</ol>
9/2. SIRALANMAMIŞ LİSTE(UNORDERED LIST)
Sıralanmamış listeler <ul>...</ul> etiketleri arasına yerleştirilir.Liste elemanları çember(circle),daire(disc) veya kare(square)'ler ile sıralanır.
" CD ROM
§ Read only
o 30X
o 40X
o 50X
§ Writer
o 8X
o 10x
o 12X <ul>
<li>CD ROM
<ul type="square">
<li>Read only
<ul type="circle">
<li>30X
<li>40X
<li>50X</li>
</ul>
<li>Writer
<ul type="circle">
<li>8X
<li>10x
<li>12X</li>
</ul>
</li>
</ul>
</li>
</ul>
3/3. AÇIKLAMA LİSTESİ(DEFINITION LIST)
Açıklama listeleri <dl>...</dl> etiketleri içinde yer alır.Bu çeşit listelerde <li> etiketinin yerini <dd> ve <dt> etiketleri alır.Aşağıdaki örneğe bakarak bu etiketlerin kullanımını kolaylıkla anlayabilirsiniz.
CD ROM
Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok kişi tarafından kullanılıyor.
DVD ROM
Bu yeni teknoloji CD'lere göre çok daha fazla boş alan sunuyor.
<dl>
<dt>CD ROM
<dd>Her ne kadar yerini yavaş yavaş DVD rom'lara bıraksa da, halen birçok
kişi tarafından kullanılıyor.
<dt>DVD ROM
<dd>Bu yeni teknoloji CD'lere göre çok daha fazla
boş alan sunuyor.</dd>
</dl>
Sonraki konu: Tablolar 1
-
10.TABLOLAR(TABLE)
Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir sayfa tasarlamak için tablolara hakim olmak gereklidir.
Tablolar <table>...</table> etiketleri arasına yazılır.<tr> etiketi bir yatay sıra oluşturulur, bu yatay sıra istenilen sayıda <td> etiketiyle hücrelere bölünür.Aşağıdaki örneğe bakarak tablo mantığını anlayabilirsiniz.
< table> Hücre1 Hücre2 Hücre3
Hücre4 Hücre5 Hücre6
<TD< td> <table border="1">
<tr>
<td >Hücre1</td>
<td >Hücre2</td>
<td >Hücre3</td>
</tr>
<tr>
<td>Hücre4</td>
<td>Hücre5</td>
<td>Hücre6</td>
</tr>
</table>
10/1. <TABLE> ETİKETİ VE PARAMETRELERİ
Burada width ve height parametrelerini aynen daha önce kullandığınız gibi kullanabilirsiniz...
bgcolor Hücrenin içinin rengini belirler. <table>
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
background Hücre içine resim koyar. <table background="deneme.gif">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
border Hücre etrafına yerleştireceğiniz çerçevenin kalınlığını belirler <table border="5">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
bordercolor Çerçeve rengini belirler <table border="5" bordercolor="teal">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
bordercolorlight Çerçevenin sol ve üst kenarlarının rengini belirler <table border="5" bordercolorlight="aqua">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
bordercolordark Çerçevenin sağ ve alt kenarlarının rengini belirler. <table border="5" bordercolordark="blue">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
align Hücrenin yatay konumu belirler <table align="right">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
cellspacing Hücre etrafındaki çerçevenin kalınlığını belirler. <table border="1" cellspacing="10">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
cellpadding Hücre içindeki elemanların (metin, resim, vs.) çerçeveden uzaklığını belirler. <table border="1" cellpadding="10">
<tr>
<td>Hücre</td>
</tr>
</table> Hücre
Sonraki konu: Tablolar 2
10/2. <TR> ve <TD> ETİKETLERİ
<TR> etiketi, üzerine <td> etiketiyle hücreler döşenmesi için yatay bir sıra,bir platform oluşturur.Dolayısıyla bu etiketin parametreleri herhangi bir işimize yaramaz. Tablo içindeki bütün düzenlemeleri aşağıda parametreleri verilen <td> etiketiyle yapabiliriz.
bgcolor <table>
<tr>
<td bgcolor="teal">
Hücre</td>
</tr>
</table> Hücre
background <table>
<tr>
<td background="deneme.gif">
Hücre</td>
</tr>
</table> Hücre
align <table border="1" width="100" height= "100">
<tr>
<td align="right">
Hücre</td>
</tr>
</table> Hücre
valign <table border="1" width="100" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table> Hücre
bordercolor <table border="1">
<tr>
<td bordercolor="blue">
Hücre</td>
</tr>
</table> Hücre
colspan <table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table> 1 2 3
4 5
6 7 8
rowspan <table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table> 1 2 3
4 5 6
7 8
Yukarıdaki parametrelerden colspan yatay eksen üzerindeki iki hücreyi birleştirmek için kullanılır. Bu parametreye değer olarak birleşecek hücre sayısı verilir. Rowspan ise bu işi dikey eksen üzerindeki iki hücre için yapar. diğer parametrelerin kullanımlarını zaten başka etiketler üzerinde gördük.
Sonraki konu: Tablolar 3
10/3. TABLO UYGULAMALARI
Bu uygulamaları önce kendiniz yapmaya çalışın, eğer takılırsanız kodlarından faydalanın.
Uygulama
Küçük bir tablo uygulaması
<table>
<tr>
<td width="300" bgcolor="teal" align="center">Uygulama</td>
</tr>
<tr>
<td height="200" bgcolor="silver" align="center">Küçük bir tablo uygulaması</td>
</tr>
</table>
Hosting
1.seçenek 20 Mb 100$/yıl
2.seçenek 50 Mb 150$/yıl
<table cellpadding="10" border=1>
<tr>
<td colspan="3" align="middle" bgcolor="red" >Hosting</td>
</tr>
<tr>
<td bgcolor="teal">1.seçenek</td>
<td align="middle">20 Mb</td>
<td align="middle">100$/yıl </td>
</tr>
<tr>
<td bgcolor="teal">2.seçenek</td>
<td align="middle">50 Mb</td>
<td align="middle"> 150$/yıl</td>
</tr>
</table>
SÜRÜCÜ CİNSİ HIZ Cd-Dvd rom'lar
CD-ROM 30X 40X 50X 60X
DVD 10X 12X
<table BORDER="1" bgcolor="silver" bordercolor="black">
<tr>
<td bgcolor="red">SÜRÜCÜ CİNSİ</td>
<td bgcolor="red" colspan="4" align="center">HIZ</td>
<td bgcolor="teal" color="white" rowspan="3"> Cd-Dvd rom'lar</td>
</tr>
<tr>
<td>CD-ROM</td>
<td>30X</td>
<td>40X</td>
<td>50X</td>
<td>60X</td>
</tr>
<tr>
<td>DVD</td>
<td colspan="2">10X</td>
<td colspan="2">12X</td>
</tr>
</table>
Sonraki konu: Çerçeveler
-
11. ÇERÇEVELER (FRAME)
Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeriğini yerleştirmektir.
Fakat şunu da belirtmekte fayda var, birçok tasarımcı estetik açısından çerçevelere pek sıcak bakmaz; genelde üst üste tablolar kullanmayı tercih eder. Yine de pek sık kullanılmayan bu tekniği aklınızın bir yerinde tutun, belki faydalı olabilir...
Bir uyarı: Netscape 2.0 ve Explorer 3.0 altı browser'lar, çerçeveleri tanımazlar!
ÇERÇEVE TEKNİĞİNİN GENEL MANTIĞI
Çerçeve tekniğinde, ilk önce parent(ana) frame denilen bir sayfa oluşturmak gerekir. <Frameset>... </frameset> etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfayı dikey ve yatay olarak ne oranda bölmek istediğimizi browser'a bildiririz. Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek sayfaların adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdiğimiz sayfaları uygun bir şekilde hazırlamak kalır. Şimdi bu biraz karışık ifadeyi bir örnekle daha iyi anlayalım, sonra da <frameset> etiketini inceleyelim.
Önce ana pencereyi hazırlayalım:
<html>< BR><head>
<title>Çerçeveörneği</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type
</head>
<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
<noframes>
<body>
<h1>Browser'ınızın sürümü sayfamızı görüntülemeye uygun degil, lütfen daha yeni bir sürüm
yükleyip tekrar deneyin!</h1>
</body>
</noframes>
</html>
Burada yaptığımız şey ana sayfayı soldan 150 piksel genişliğinde bölüp iki sayfa elde etmekten ibaret. Ayrıca browser'a soldan ilk bölüme (150 px olan bölüm) 'menu.html', ikinci bölüme ise 'esas.html' sayfalarını yerleştirmesini bildirdik. Burada dikkat edilmesi gereken nokta <frameset> etiketinin </head> ile <body> etiketleri arasına yerleştirilmesidir. <Noframes>...</noframes> etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser'lar içindir. Şimdi aşağıdaki kodlardan ilkini 'menu.html', ikincisini ise 'esas.html' adıyla ana pencereyi kaydettiğiniz dizine kaydedin.
<html>
<head>
<title>menu</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body bgcolor="teal">
</body>
</html>
<html>
<head>
<title>esas</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body bgcolor="Red"></body>
</body>
</html>
Son olarak tekrar ana sayfayı açtığınızda (ismi önemli değil, yeter ki diğer iki sayfa ile aynı dizinde bulunsun!) sonuç böyle olacaktır:
Artık çerçevelerin mantığını anladığımıza göre bu tekniğin detaylarını inceleyelim...
Sonraki konu: Çerçeveler 2
11/2. <FRAMESET> ve <FRAME> ETİKETLERİ
Aşağıda <frameset> etiketinin parametrelerini görüyorsunuz :
rows Safayı enine bölmenizi sağlar <frameset rows="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
cols Sayfayı boyuna bölmenizi sağlar <frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
cols ve rows parametreleri piksel değeri alabilecekleri gibi '%' cinsinden de değer alabilirler, örneğin:
<frameset cols="%20,%80">
Daha önce kullandığımız '*' ifadesi ile bölünecek alanın genişliğini browser'a bırakabiliriz:
<frameset cols="%20,*">
Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz:
<frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz.
frameborder Ana sayfanın bölümleri arasında sınır çizgisi olup olmamasısını belirler.('yes[/swf2][swf3]no'; veya '1[/swf2][swf3]0' değerlerini alır) <frameset cols="150,*" frameborder="1">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
border Çerçeveler arasındaki sınırın kalınlığını piksel cinsinden belirler. <frameset cols="150,*" border="10">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
Şimdi de <frame>; etiketinin parametreleri:
src Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfanın yeri
marginwidth Sayfanın solundaki kenar boşluğunu belirtir
marginheight Sayfanın üstündeki kenar boşluğunu belirtir
noresize '1' veya '0' değerlerini alır, '1' verilirse pencere boyutları sabitlenir.
scrolling 'yes[/swf2][swf3]no[/swf2][swf3]auto' değerlerini alır, kaydırma çubuklarının durumunu belirler.
11/3. FRAME UYGULAMALARI
Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir:
<frameset rows="150,*" cols="150,*" >
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
<frame name="siyah" src="siyah.html">
</frameset>
<frameset rows="150,*">
<frame name="kirmizi" src="kirmizi.html">
<frameset cols="30%,*">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
</frameset>
<frameset rows="150,*">
<frameset cols="*,*">
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
</frameset>
<frame name="sari" src="sari.html">
</frameset>
<frameset cols="150,*">
<frameset rows="*,*,*">
<frame name="yesil" src="yesil.html">
<frame name="kirmizi" src="kirmizi.html">
<frame name="sari" src="sari.html">
</frameset>
<frame name="siyah" src="siyah.html">
</frameset>
Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta:
Hatırlarsanız bağlantılar konusunda <a> etiketinin target isimli bir parametresi olduğundan ve bu parametrenin 'Çerçeveadı' değerini alabileceğinden bahsetmiştik. Bu parametre bize bağlantının belirttiği adresdeki sayfanın adını verdiğimiz çerçeve içinde açılmasını sağlar. Örneğin bu sayfadaki ikinci örneği ele alalım:
'İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü olsun. Ziyaretçi buradaki bağlantılara tıklayarak sitenin diğer sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde görüntülensin.'
İşte aşağıdaki kod bunu sağlar:
<a href="www.sayfaAdi.com\secenek1.html target="sari">Bu link saril bölümde görüntülenecek!</a>
Gördüğünüz gibi çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar...
-
12. FORMLAR
HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar <form>...</form> etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.
12/1. FORM TÜRLERİ
Aşağıda form türlerini ve kullanılışlarını görüyoruz.:
text maxlength: Yazılabilecek maksimum text uzunluğu
value: varsayılan değer
size: Px cinsinden alanın uzunluğu <form>
<input type="text" maxlength="10" size="12" value="İsminiz?"
</form> < form>
<input type="text">
Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.
password Tüm parametrleri text ile aynıdır. <form>
Lütfen şifre girin:<br>
<input type="password" maxlength="10" size="12">
</form> Lütfen şifre girin:
<input type="password">
Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir
textaraea rows : Alanın karakter cinsinden yüksekliği
cols : Alanın genişliği <form>
<textarea cols="12" rows="4">Burası bir textarea!</textarea>
</form>
<textarea >...</textarea>
Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.
checkbox checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur. <form>
<input type="checkbox" checked>seçenek 1
<input type="checkbox">seçenek 2
</form> seçenek1
seçenek2
<input type="checkbox>
Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.
radio checked: sayfa açıldığında 'checked' ibaresi bulunan daire seçilmiş olur. <form>
<input type="radio" name=sec">seçenek1<br>
<input type="radio" name= "sec"checked>seçenek2<br>
<input type="radio" name="sec">seçenek2
</form> seçenek1
seçenek2
seçenek2
<input type="radio">
Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.
select size: Select etiketinin karakter cinsinden boyutu
selected: Görevi checked ifadesinin aynıdır.
multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir <form>
<select size= "1">
<option selected>seçenek1
<option>seçenek2
<option>seçenek3
</select>
<select><option>...<option>...</select>
Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.
submit value: Butonun üzerine yazılacak metin buraya yazılır <form>
<input type="submit" value="Gönder">
</form>
<input type="submit>
Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir
reset value: Butonun üzerindeki metin <form>
<input type="reset" value="Sil">
</form>
<input type="reset" >
Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.
button value: Butonun üzerindeki metin <form>
<input type="button" value="Düğme">
</form>
<input type="button>
Düğmelere JavaScript ile bazı işlevler kazandırılabilir.
Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz name parametresi de kullanılabilir.
Sonraki konu: Formlar 2
12/2. <FORM> ETİKETİ
İşte <form> etiketinin parametreleri ve bunların işlevleri:
method 'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsanız, birçok servis sağlayıcı size form'larınızın sonuçlarını e-mail'inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksanız 'post' metodunu seçmelisiniz.
<form method= "post>
action Formu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsanız, servis sağlayıcınızdan bu programın adresini öğrenmelisiniz. Örneğin bu adres 'freeservers' için '/cgi-bin/cgiemail' 'dir.
<form method="post" action= "/cgi-bin/cgiemail">
12/3. FORM UYGULAMASI
Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceksiniz. Bu örneği önce parça parça kendiniz yapmaya çalışın, gerektiğinde aşağıda verilen kodlardan yararlanın...
Bu siteye not verin!
Kullanıcı ismi
Parola
Cinsiyet E K
Bildiğiniz Uygulamalar
Sitenin içeriği
5, Çok zengin!
4, Fazlasıyla yeterli
3, Yeterli
2, Yetersiz
1, Çok kısıtlı
Sitenin tasarımı
< form>
<form name="anket">
<p><h3>Bu siteye not verin!</h3></p>
<p><b>Kullanıcı ismi</b> <input value="Buraya yazın!"></p>
<p><b>Parola</b> <input type="password" maxlength="10"></p>
<p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox">
<p>Bildiğiniz Uygulamalar</p>
<p><select size="4" multiple>
<option>HTML
<option>JavaScript
<option>Css
<option>Asp
</select></p><br><br>
<p><b>Sitenin içeriği</b></p>
<p><input type="radio" name="not" value="5">5, Çok zengin!<br>
<input type="radio" name="not" value="4">4, Fazlasıyla yeterli<br>
<input type="radio" name="not" value="3" checked>3, Yeterli<br>
<input type="radio" name="not" value="2">2, Yetersiz<br>
<input type="radio" name="not" value="1">1, Çok kısıtlı <br></p>
<p><b>Sitenin tasarımı</b></p>
<p><select>
<option selected>Harika!
<option>Oldukça iyi
<option>İyi
<option>İdare eder
<option>Berbat</option>
</select></p>
<p><input type="submit" value="gönder"><input type="reset" value="sil"
</form>
HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi sayfalar yapabilmek için yeterli olmaz. Artık internet'te yeralan sayfaların hemen hepsinde JavaScript kullanılmaktadır.
- A dan Z ye HTML Konusuna Benzer Konular
- Html 03.03.2004
- HTML mi, Flash mi? 01.06.2004
- Swish'de nasil SWF/HTML yapabilirim & Swish'de nasil flash edit (bearbeiten) yapabilirim 05.06.2004
- Html To Image 2.0 05.11.2004
- Flash da Full Screen Yapmak html icinde 06.11.2004
- Plastik Gıda Ambalajı 04.04.2010 18:24