Html’ye Hoşgeldiniz

Html’ yi öğrenmek için attığın bu adım seni bir webmaster yapabilecek.Eğer amacın web tasarımcısı olmaksa değişime ve gelişime ayak uydurmalısın.Hızla gelişmeli ve değişmelisin.Kendine her şeyden bir parça eklemelisin.Bunları yapabileceğine eminsen ve de çok isteğin varsa web tasarımcılığına şu andan itibaren başlamalısın.Bu sitede bulunmakla zaten web tasarımını öğrenmeye başladın demektir.

Ama öncelikle şunu belirteyim. Bu sitenin içeriği yani konu anlatımları orta seviyede bir tasarımcı tarafından hazırlandı. Yani siz sadece bu site ile yetinirseniz elihtml

nize çok fazla bir şey geçmez. Tasarımcı gibi orta seviyeli bir webmaster olursunuz. Ama yukarıda belirttiğimiz gibi webmaster değişime özellikle de gelişime daima hazırlıklı olmalı ve bunun için çalışmalıdır.Siz sadece bu sitenin verdiği bilgilerle yetinmeyip diğer sitelerden de yararlanacaksınız. Yoksa bu iş bir yere kadar gider ve orada kalır.Değişim ve gelişim ölür gider.

Bir çok site ziyaret etmeli ve bunların tasarımlarını incelemelisiniz.Onlardan kopya değil ilham almalısınız.Tasarım kodlarını incelemeli neyi nerede ve nasıl kullandığını öğrenmeli ve incelemelisiniz.

Internet’ te bir de kendinize iyi bir hoca buldunuz mu işiniz iş demektir.Bilgisayar işlerini daha çok kendiniz halletmeye çalışmanız belki size zarar verebilir ama çok fazla da tecrübe edinebilirsiniz. Takıldığınız yerlerde bu hocanıza sorar ve sorununuzu çözersiniz.

Web tasarımcısının gelişime hazır olması gerektiğini söyledik. Çünkü bu ile uğraştıkça çok fazla şey öğrenmeniz gerektiğini de öğreneceksiniz.Eğer şimdiden korktuysanız bu işten hemen vazgeçin. Zararın neresinden dönerseniz kârdır. Eğer bu sizi heyecanlandırdıysa o zaman ileri.Yılmak yok…

Bu işler bana göre çok zevkli geliyor.Tabii bazen beni engellemeye çalışanlar oluyor.Ama bunların üstesinden gelmeyi başarabiliyorum.Sizi de engellemek isteyenler olabilir.Bu da işin zevkli yerlerinden biri aslında.

Internet çok para isteyen bir iş.Aslında bilinçli bir kullanıcı için bu çokluk azaltılabilir. Size Internet web tasarımcılığı ile ilgili bilgiler edinmede gerekli. Yaptığınız siteleri yayınlamak için bir web alanı bulmada ve sitenizi burada yayınlamada gerekli ve daha fazlası.

Internet’ le aşina olduğunuz zaman size dar gelmeye başlayabilir.Aradığınızı rahat bulamamadan rahatsız olabilirsiniz.Özellikle de tasarlamayı öğrendikçe seçeceğiniz web alanı sizi bayağı zorlayacaktır. İstediğiniz web alanını büyük bir ihtimalle bulamayacaksınız.Ama ona yakın olanını bulup bununla idare edeceksiniz.Web alanı ararken ve kayıt yaptırırken Internet’ te uzun bir zaman geçireceksiniz ve telefon faturanızı kabartacaksınız.Bunlara katlanmak zorundasınız.Bunlar mutlaka olacaktır.Olmazsa olmaz.

SAYFANIN İÇERİĞİ HAKKINDA KISA BİLGİLER

Sayfaları kullanışlı, basit ve en anlaşılır biçimde yapmaya çalıştık.Umarız olmuştur.
Her sayfamızda ilgili sayfalara link verilmiştir.
Her sayfamızda anlatılacak konunun başlıkları, diğer derslere link verilmiştir.
Sayfalarımıza işinize yarayabilecek bazı web alanlarını ve bunların özelliklerini yazdık.
Sitenizi daha güzel yapmanız için bir kaç Javascript ekledik.
Yararlanabileceğiniz sitelerin adreslerini ve bu sitelerin içeriklerini kısaca yazdık.
Anlattığımız konularla ilgili kısa ipuçları verdik.Bu ipuçları size kolaylık sağlayabilir.
Ayrıca sayfalarımıza anlattığımız Html kodlarını da yazdık ki neyi öğrendiğinizi bilesiniz.

Bazı konularla ilgili resimleri konu altındaki “Şekil” ibarelerine link vererek bağladık.Anlattığımız konu ile daha önce yaptığımız örnekleri bu linke tıklayarak görebileceksiniz.

Sayfalarımızda canlı renkler kullanmaya özen gösterdik.Bu şekilde sıkılmanızı engellemek istedik.

Yazdığımız bütün kodları büyük harfle yazdık. Çünkü sizin kodları daha iyi görüp anlamanızı istedik. Siz evinizde sitenizi hazırlarken ister büyük ister küçük harfler kullanabilirsiniz. Html küçük büyük harf ayrımı yapmaz. Ancak dikkat etmeniz gereken kodlarda Türkçe kullanmamalısınız. Örneğin kodlarda büyük harf “I” kullanılmış olabilir. Bunu küçüğe çevirirken “ı” olarak değil “i” olarak çevirmelisiniz. Çünkü İngilizce’ de küçük “ı” harfi yoktur.

İYİ BİR WEBMASTER’ IN ÖZELLİKLERİ

İyi bir webmaster nereden ne elde edebileceğini bilmelidir.Yani hangi site bana hangi konularda yardımcı olabilir.

İyi bir webmaster web tasarlamayı hazmetmelidir.Tasarlamayı sadece bazı şablonlardan değil kendi ürettiği tasarımlarla yapmalıdır.

İyi bir webmaster kendini diğerlerinden üstün görmemeli.Diğerlerinden kazanabileceği bilgileri elde edebilmelidir.

İyi bir webmaster İnternet’ i ahlak ve hukuk kuralları çerçevesinde kullanabilmelidir

HTML Nedir, Ne Değildir?

İngilizce’si HyperText Markup Language olan Html web sitesi tasarlamak için kullanılan bir dildir.Asıl amacı sahip olunan bilgilerin bir dokümana yazılıp bu dokümanların başka kişilerce okunabilmesini, elde edilebilmesidir.Bu da HyperText (bağlantılı metinler) ile sağlanıyor.Yani sayfanın içindeki bir linkin olması ve bu link ile başka sayfalara erişebilmek anlamına geliyor.

HTML ile sadece hazırladığınız sayfayı başkalarına gösterebilirsiniz.Bunu da internet dediğimiz ağla yapabilirsiniz.

Bir gazete düşünün; bu gazete editörlerce içeriği hazırlanır ve tasarlanır,basılır sonra da dağıtılır.Web sayfası da bunun gibi HTML ile içeriği ve tasarımı hazırlanır sonra da internet ile dağıtılır.
Ancak okuyucular(ziyaretçiler) sizinle iki şekilde iletişim kurabilir.Birincisi mail yada telefonla, ikincisi ise formlarla.Fakat formlar ziyaretçilerinizden bilgi almaya yetmez.Bu formu işleyecek başka bir programa ihitayıcınız var.Bu da Perl ile yazılabilir.Bunu perl derslerinde öğreneceksiniz.

Web Sitesi Nedir?

Web sitesi sizin ziyaretçilerinize iletmek istediğiniz bilgilerin yazıldığı sayfalar bütününden oluşan bir sayfalar topluluğudur.Bu ister tek sayfa ister daha fazla da olabilir.

Bu web siteniz sizin aldığınız web alanına yüklenerek yayınlanır.Siz hazırladığınız sayfaları internette size verilen adrese upload ettiğinizde aslında web alanını size veren bilgisayarın hard diskindeki bir klasöre upload ediyorsunuz ve o klasörün adı sizin web sitenizin adresi oluyor.

Web Sitesi Tasarlamak

Web sitesinin amacının bir gazete gibi ilgililere bilgiler sunmak olduğunu söylemiştik.Bu siteyi HTML ile tasarlayacağımızı ve internet ile yayınlayacağımızı da söylemiştik.

Bu tasarım işini ister bir web site tasarım editörü ile ister Html dili ile yapabilirsiniz.Editör kullanımı için Html bilmenize gerek yok.Zaten bu editörler Html ‘ yi bilmeyenlerin sitelerini tasarlamaları için geliştirildi.Örneğin;Microsoft Frontpage, Macromedia Dreamwevar, Actual Drawing, Adobe Golive vb. Bu yazılımlar ayrıca kullanım bilgisi ister.Ama yine de Html bilmeniz gerekir.Çünkü bazen arka planda nelerin olup bittiğin haberdar olmak işimizi kolaylaştırır ve iyileştirir.

Web Sayfası Oluşturma

Html dilini öğrenmeye karar verdiğinize göre şuan için editör kullanmamaya da karar vermiş olmalısınız.Biz sadece editör olarak Html’ yi yazabileceğimiz NOT DEFTERİ‘ ni kullanacağız.Word Pad değil.
Şuana kadar bu not defterini hiç kullanmayanlar ve bunun bir işe yaramadığını düşünenler mutlaka olmuştur. Ama Not defteri ile bir çok dili yazmak mümkündür.Not defteri bir web tasarım editörü değildir.Sadece dil yazarsınız ve kaydedersiniz.Bu kadar.Sonra gerekli programı çalıştırarak test edersiniz.
Kontrol tamamen sizin elinizdedir.Yanlış yada doğru yapmak tamamen sizin elinizde.En iyisi olan…
Not defterinin yerini unutanlara hatırlatalım başlat + programlar + donatılar
Not defterini açın ve içine bir şey yazmadan dosya + kaydet diyin ve dosyayı kaydedin.Kaydederken dosyanın uzantısını html ya da htm olarak verin.merhaba.html ya da merhaba.htm gibi…
Sayfayı kaydettiğiniz yerde sayfayı bulun.Sayfanın simgesi varsayılan tarayıcınızın simgesini aldı değil mi?İşte bu sayfanın bir web sayfası olduğunu gösterir.Tıklayıp açabilirsiniz.İşte karşınızda web sayfanız…

Web Sayfasının Temel Yapısı

Html ya da Htm olarak kaydettiğimiz bu sayfa dikkat ederseniz hiç bir Html kodu içermiyor.Ama uzantısı htm ya da html olduğu için bir web sayfasıdır.Hiç bir kod olmadığı için de tarayıcıda hiçbir şey görmüyorsunuz.Yani gazetenizi boş bir sayfa olarak basmışsınız.Ama yayınlamamışsınız.

Web sayfasında standart olarak bulunması gereken kodlar şunlardır.Bunlar sayfada mutlaka vardır.Bu kodlarla tarayıcı bunun bir web sayfası olduğunu anlar ve ona göre görüntüler.

<html>
<head>
<title>Sayfanın Başlığı</title>
</head>

<body>Sayfanızın tüm içeriği:resim, yazı, video, vb.</body>

</html>

Bir web sayfası <html></html> kodları arasına inşa edilir.

<head></head> kodları arasında kalan kısım sayfanızın başlık kısmıdır ve tarayıcının sayfanızı tanımasına, arama motorlarının sizin sitenizi bulmasına yarar.

Bu kodlar içindeki <title>Sayfanın Başlığı</title> Sayfanıza vermek istediğiniz adın yazıldığı yerdir.Buraya yazdığınız yazı tarayıcının sol üst köşesinde gözükür.

Ayrıca bu kodlar içinde <meta> etiketleri vardır ve bunlarla sitenizi tarayıcıya ve arama motorlarına tanıtırsınız.Bunlara sırası geldiğinde ileride değineceğiz.

<body></body> kodları arasında kalan yer de sizin sayfanızın içeriğidir.Yani tarayıcınızı açtığınızda gördüğünüz her şey buraya yazılır.Tasarım işi bu kodlar içinde yapılır.İşimiz bu kodların neler olduğunu ve nasıl kullanıldığını anlatmak…

Web Sayfasını Test Etmek

Yukarıdaki kodları not defterine yazı ve sayfanızı merhaba.html ya da merhaba.htm olarak kaydedin.Kaydettiğiniz yerde sayfayı bulun.Sayfanız tarayıcının simgesini almış olmalı.Eğer tarayıcınızın simgesini almamışsa tarayıcınızı yeniden yüklemeyi deneyin.Olmazsa sayfayı tıklayıp birlikte açı seçip tarayıcınızı seçin ve üzerine tıklayarak açın.İşte bu sizin ilk web sayfanızdır.Başarılar.
Telaşlanma ders daha bitmedi:Bilakis yeni başladı.Bu ısınmaydı…

Metin(Yazı) Tipini Ayarlamak

Web sayfanızın içeriğini hazırlarken yerleştireceğiniz metinlerin yazı tiplerini ayarlamak isteyebilirsiniz.Word kullanırken metni seçip biçimlendirme araç çubuğundaki yazı tiplerinden birini seçtiğinizde metninizin yazı tipi değişir ve istediğiniz gibi olur.Bunu tabii ki de html ile kullanarak yapabilirsiniz.Html ‘nin asıl amacı metin biçimlendirmektir.

Bu <FONT> imi ile yaparız.Tabii ki bu im tek başına işe yaramaz bunun öznitelikleri vardır.Bu öznitelikler metnin tipini, rengini ve boyutunu ayarlamaya yarar ve hepsi birbirinden farklı olmalarına rağmen aynı im içinde kullanılırlar.

Metnin Tipini Değiştirmek: <FONT FACE=“yazı tipi adı”>Yazılacak Metin</FONT>

FONT ile FACE arasında bir boşluğun olduğuna dikkat edin.Bu diğerleri gibidir.Boşluk olmazsa çalışmaz.
“Yazı tipi adı” yazdığımız yere yazı tiplerinin adlarını yazmalısınız.Bunları bilgisayarınızdaki word programını açarak öğrenebilirsiniz.
Örneğin;<FONT FACE=“tahoma”>Merhaba web tasarımı.Web sitesi tasarlamak eğlenceli</FONT>

Birden çok yazı tipi yazabilirsiniz.Bunun için her yazı tipi arasına virgül(,) koymalısınız.
Böyle yaparsanız metniniz sadece ilk yazdığınız yazı tipi ile biçimlendirilecektir.Diğerleri ne olur ne olmaz misalidir.

Metin Boyutunu Ayarlamak

Yazdığınız metnin boyutunu da ayarlamak isteyebilirsiniz.Metninizin ne kadar küçük ya da büyük olmasına karar verebilirsiniz.

Bunu yine font iminin içine yazılan size özniteliği ile sağlarız.
Metin Boyutunu Ayarlamak: <FONT SIZE=“boyut”>metniniz</FONT>

FONT ile SIZE arasında boşluk var.

“boyut” yazdığımız yere 1 den 7 ye kadar sayı yazabilirsiniz(1 ve 7 dahil).
Örneğin: <FONT SIZE=“5”>merhaba web tasarımı</FONT>

Metin Rengini Ayarlamak

Sayfanızın rengini değiştirmeyi isteyebileceğiniz gibi metninizin rengini de değiştirmek isteyebilirsiniz.Hep siyah yazmaktan bıkmış olmalısınız değil mi?

Bunun için yine font imini ve onun özniteliği olan COLOR ‘u kullanacağız.
Metin Rengini Ayarlamak: <FONT COLOR=“renk adı”>Metniniz</FONT>

FONT ve COLOR arasında boşluk var.

“renk adı” yazdığımız yere sayfa rengini değiştirmek için kullandığımız renkler vardı ya işte onlar yazılmalıdır.Ya renk adının İngilizce kendisi yada kodu kullanılmalıdır.

Her defasında metinlerin renklerini yazmaktan hoşlanmayabilir ve metin rengini bir kerede de ayarlamak isteyebilirsiniz. Bu durumda sayfanızdaki tüm metinlerin rengi aynı olacaktır.

Bunun için <BODY> iminin bir özniteliği olan TEXT imi kullanılır.

Kullanımı:
<BODY TEXT=“renk adı yada kodu”>

Metin rengini bir resim olarak belirleyemezsiniz.

Yorum Yazısı Eklemek

Bazen sayfanızın içerisine eklediğiniz yorumlar size neyi nerde nasıl ve ne zaman yaptığınızı hatırlatabilir ve yarım kaldığınız işi bitirebilirsiniz.Bu yorum yazıları sayfanın içindedir ama ziyaretçi bunları göremez.İçi açılıp bakıldığında görülebilir.

Yorum Yazısı Eklemek: <!– yorumunuz yada her hangi bir şey –>
Örneğin; <!– Bu sitenin tasarımcısı Serkan ASLAN ‘dır.Kimse izinsiz kullanamaz –>

Alt Satıra Geçmek

Şu ana kadar yazdığınız bütün metinler hep yan yana yazıldı.Pencereye sığmadığı için de alt satıra otomatik olarak kaydırıldı.Ama siz istediğiniz yerde bir alt satıra geçmek istersiniz mutlaka değil mi?

Alt Satıra Geçmek: Metniniz <BR>Alt Satıra Geçecek olan Metniniz

Bunun sonucu şöyle olacaktır.
Metniniz
Alt Satıra Geçecek olan Metniniz

Paragraf Oluşturmak ve Alt Paragrafa Geçmek

Yazılarınız mutlaka paragraflardan oluşacaktır.Her bir paragraf arasında belli bir boşluk olacaktır.Bu boşluk satır boşluğundan daha fazladır.Bu imle metinler arasında daha fazla boşluk bırakabilirsiniz.

Bu imler arasına yazılan metin tarayıcı tarafından bir paragraf olarak algılanır ve diğerlerine göre daha fazla boşluk yer açar.

Bu imler <P>yazılacak metin</P> imleridir.
Örneğin; Normal metin yazılır <P>paragraf olacak metin yazılır</P>

Bunun sonucu şöyle olacaktır.
Normal metin yazılır

paragraf olacak metin yazılır

Görüldüğü gibi <BR> iminden daha fazla boşluk bırakır.

Birden Fazla Boşluk Eklemek

Bazen kelimeler ya da karakterler arasına birden çok boşluk ekleyebilirsiniz.Yani şöyle yazmak isteyebilirsiniz: W e b tasa rı mı

Eğer not defterinde eklemek istediğiniz kadar boşluğu boşluk çubuğuna(spacebar) basarak yaparsanız sadece tek bir boşluk olur.Böyle yapılan boşluklar boşluk olarak değerlendirilmez.

Örneğin siz not defterinde şöyle yazarsanız: “w e b” sonuç olarak “w e b” alırsınız.

Bu kadar boşluk eklemek için   kodunu kullanmalısınız.Boşluk eklemek istediğiniz yere ne kadar boşluk eklemek istiyorsanız o kadar  ; koymalısınız.
Örneğin; w   e    b 
sonucunda w e b alırsınız.Yani 3,4,1 boşluk…
DİKKAT:Bu imler büyük yazılırsa çalışmaz ona göre….

Başlık Eklemek

Siteniz için yazdığınız bir yazının başlıkları olacaktır. Sayfanıza koyacağınız başlıkların boyutları diğer yazılara göre daha büyük olacaktır.

Başlık eklemek için <Hn></Hn> imleri kullanılır.
Buradaki n 1 den 6 ya kadardır.(1ve 6 dahil).Ancak burada yazı ne kadar büyük yapmak isterseniz “n” i o kadar küçük yapmalısınız.Yani 1>6 burada geçerlidir.

Kullanımı:
<Hn>Başlığınız</Hn>

Örneğin; <H1>Web Tasarımı</H1>

Meta İmleri

Bir Önceki Dersimizde <head></head> kodları arasında <title>Sayfanın Başlığı</title> kodları ve <meta> imlerinin olduğunu ve bunların sayfa için büyük önem taşıdığını söylemiştik.<title></title> kodlarını da anlatıp meta imlerini sonraya bırakmıştım.

Şimdi meta imlerini tanıyalım.

<META http-equiv=“Content-Type” CONTENT=“text/html; charset=windows-1254”> Kodu sayfanızda ne tür bir metnin olduğunu(text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama(windows-1254 yazmakla) ile yapıldığını gösterir.

<META http-equiv=“Content-Language” CONTENT=“tr”> Kodu sayfanızın dilinin Türkçe(tr yazmakla.İstenirse değiştirilebilir.) olduğunu gösterir.

<META NAME=“author” CONTENT=“SERKAN ASLAN”> Kodu sayfanın tasarımcı kimliğini gösterir.

<META NAME=“keywords” CONTENT=“Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın.”> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.!!!!!

<META NAME=“Description” CONTENT=“Sayfanızın Kısa tanıtımını buraya yapın.”> Kodu sayfanın kısa tanımı yapılmak için kullanılır.

<META name=“GENERATOR” CONTENT=“Microsoft FrontPage 5.0”> Kodu sayfanın hangi editörle yapıldığını gösterir.

<META NAME=“ROBOTS” CONTENT=“ALL,FOLLOW,INDEX”> Kodu sayfanızı tüm arama motorlarının veri tabanına kaydolabilme hakkının verilmiş olduğunu gösterir.

<META NAME=“RATING” CONTENT=“GENERAL”> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir.GENERAL yazmakla bütün katagoride olduğu belirtilmiş oldu.

Meta İmlerinin Kullanımı

Bu imler dedik ya arama motorları için önemlidir.Yani sizin sitenizin başkaları tarafından bulunmasını saylayan kodlardır.

En önemlileri <META NAME=“keywords” CONTENT=“Kelimeler yazılacak”> ‘dir. Bu imdeki kelime yazılacak yere bir ziyaretçinin arama motorunda yazabileceği kelimeler yazılmalıdır.Tabii ki bunu yazarken sitenizle ilgili olan kelimeler olmalı. Gereksiz yere kelime yazılmamalıdır.

Örneğin; bir ziyaretçi arama motoruna “kişisel siteler” yazdığında arama motoru hem “kişisel” hem “siteler” hem de “kişisel siteler” kelimelerinin geçtiği siteleri arar.Tabii ki kendi veritabanında olan sitelerde. Bunun için o arama motoruna kayıt olmalısınız. Eğer sizin siteniz bir kişisel site ise sitenizin bu imine bu kelimeleri eklemelisiniz ki arama sonuçlarında olabilesiniz.Eğer yazmazsanız sonuçlarda olmayabilirsiniz.

Kelimeleri yazarken ziyaretçinin arama motoruna yazabileceği kelimeleri düşünerek yazmalısınız.Kelimeler arasında bir virgül( ,) ve bir boşluk olmalıdır.
Örneğin;
<META NAME=“keywords” CONTENT=“kişisel siteler, kişisel, siteler, ………”> gibi.

Bazı yerlerde Türkçe karakter kullanmayın denilir. Ama siz yine de kullanın.En iyisi hem Türkçe olan hem de Türkçe karaktersiz kelimeleri yazmanızdır.Bir kelimeyi gereksiz yere tekrar tekrar yazmanızın bir anlamı yoktur.Bunu arama motorları yemez.

Meta İmlerinin Arama Motorları ile İlişkisi(Önemi)

Bir çok kez belirttiğimiz gibi arama motorları aramayı kendi veritabanındaki sitelerde yapar. Bu sitelerin meta imlerine, title kodlarına ve sitenin içeriğine bakarlar. Öncelik, title kodlarındadır. Daha sonra meta imleri ve en son da içerik gelir.

Ben sitemde her zaman title kodları arasına <META NAME=“keywords” CONTENT=” “> iminde yazdığım bütün kelimeleri yazarım ve gayet de işe yarar. Siz de böyle yaparsanız göreceksiniz ki işe yarayacak.

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır.Onun gibi düşünmelisiniz.

Google Sonuç Listesinin En Başında Olabilme

Meta imlerini ve title kodlarını en iyi bir şekilde(yukarıda anlattığım gibi) hazırladıktan sonra sitenizi yayınlamanız durumunda google arama motorunun en başlarında olabilirsiniz. Ama bu yine de garanti değildir.

Ayrıca ne kadar çok site sizin sitenize link verirse sitenizin arama motorunda listelenmesi de o kadar çok olacaktır. Yani mümkün olduğu kadar sitenizi diğer sitelerle bağlayın, sitenizi onların sitelerine ekleyin. Arama sonucunda sizin siteniz çıkmasa bile onların siteleri çıkacak ve sizin sitenizin linki de belirecek.

Şuna tanık oldum ki bir çok siteye kullanıcı olmak bile o sitenin arama motorlarında listelenmesine sebep oluyor. Böyle benim sayemde kullanıcı adımı aradığımda bir çok site arama motorlarında listelendi ve benim kullanıcı adım sonuçlarda çıktı. Sizde bir siteye kayıt olurken kullanıcı adı o kadar önemli değil de mutlaka sitenizin adresini yazın.

Google’ a Kayıt Olma

Arama motorlarının sonuç listelerinde nasıl listeleneceğinizi anlattık.Ama siteniz arama motoruna kayıtlı değilse sonuç listesinde olmanız mümkün değil. Bunun için arama motorlarına kayıt yaptırmalısınız. Aşağıdaki adresi tıklayarak Google arama motoruna kayıt yaptırabilirsiniz.

http://www.google.com.tr/add_url.html

Kayıt işlemi iki hafta gibi bir zaman sürer.Bu sürede arama motoru sitenizi araştırır ve sitenizi veritabanına yükler. İki hafta sonra imlerin arasına yazdığınız bir kelimeyi aratınız. Kelimler arasına çok özel bir kelime koyarak (sadece sizin kullanabileceği türden bir kelime) aramayı o kelime ile yaparsanız daha iyi olur.Eğer sonuç listesinde varsanız iyi, yoksanız sitenizi tekrar kayıt edin.

AltaVista’ ya Kayıt Olma

AltaVista bir çok ziyaretçinin arama yaptığı bir site.Bu yüzden bu siteye de sitenizi kayıt yaptırmanız iyi olacaktır.Aşağıdaki adresle bunu yapabilirsiniz.

Body İmi Hakkında

Web sayfamızın içeriğini <body></body> imleri arasında oluşturacağımızı söylemiştik. Ayrıca <body> imi içinde kullanılan bazı kodlar(öznitelikler) olacak. Bunlar bazı işlerimize yarayacak. Javascript kodlarının bazıları da bu im içine yazılır.

“Merhaba Web Tasarımı”

Bu kadar şeyden sonra kaydettiğimiz web sayfamıza bir şeyler yazdırmaya ve içeriğin ilk adımını atmaya ne dersiniz.

Şimdi bir not defteri uygulaması açın ve içine web sayfamızın temel yapı taşları olan;

<html>
<head>
<title>Web Tasarımı</title>
</head>

<body>
</body>

</html>

kodlarını yazın ve merhaba.html diye kaydedin. Sonra merhaba.html dosyasını açın. Başlık kısmının “Web Tasarımı” olduğunu görün. Sayfada başka hiç bir şey yok değil mi? Hadi “Merhaba Web Tasarımı” yazdıralım.

Not defterine yazdığınız yukarıdaki kodların <body></body> imleri arasına “Merhaba Web Tasarımı” yazın.
Yani <body>Web Tasarımı</body> ….

Sonra kaydedin ve web sayfasını açın. Başlığının yine “Web Tasarımı” olduğunu ve içine “Merhaba Web Tasarımı” yazdığını görüyorsunuz değil mi? Görmeniz lazım.Göremiyorsanız yanlış bir şeyler yapmış olmalısınız, kontrol edip düzeltin.

Sayfa Rengini Ayarlamak

Yukarıdaki gibi yaptığımız web sayfasına baktığınızda sayfa renginin beyaz olduğunu göreceksiniz. Bu renk hoşunuza gitmeyebilir ve değiştirmek isteyebilirsiniz değil mi? Bu nasıl olacak peki.Şimdi sıra buna geldi…

Hani demiştik ya <body> iminin içine bazı şeyler yazılacak ve bunlar işimize çok yarayacak diye. İşte sayfamızın rengini de <body> iminin içine bir öznitelik yazarak değiştirebiliyoruz.

Bu öznitelik BGCOLOR=“Renk Adı” dır.

Kullanımı <body BGCOLOR=“Renk Adı”> şeklindedir.
Buradaki “Renk Adı” yazdığımız yere ya İngilizce renk adları yazılır(kırmızı=red, siyah=black vb…) ya da renk kodları(kırmızı=red=#FF0000) yazılır. Bu renk kodlarının bütün listesini yandaki ipuçları bölümündeki renk kodları linkine tıklayarak erişebilirsiniz.

Dikkat edilmesi gereken bir husus, body ile BGCOLOR arasında bir boşluğun olmasıdır.Bu boşluk mutlaka olmalı yoksa kod çalışmaz.

Sayfa Rengini Resim Olarak Ayarlamak

Sayfamızın rengini değiştirmek için sadece renk adları ve kodları kullanmayız. Belki bu renkleri beğenmeyebiliriz ve istediğimiz bir resmi sayfanın arka planına yerleştirebiliriz.Tıpkı bilgisayarınızın masa üstündeki resmi değiştirmek gibi. Bunlar aynı şeylerdir .Bu kod da <body> imi içrisine yerleştirilir.

Bu öznitelik BACKGROUND=“Resim Adı”> dır.

Kullanımı <body BACKGROUND=“Resim Adı”> şeklindedir.
“Resim Adı” yazdığımız yere sayfanın arka planını hangi resimle değiştirmek istiyorsak bu resmin adını yazmalıyız.

Dikkat edilmesi gereken husus bu resim adının ve uzantısının doğru yazılmasıdır.
Örneğin; resim.jpg, resim.gif, resim.bmp vb. Bir de resmin adresinin doğru yazılması gerekir. Eğer resim web sayfamızın bulunduğu dizinin içinde ise sadece resmin adını yazmamız yeter.Ama sayfanın içinde bulunduğu dizin içindeki bir dizinde ise bu sefer ./dizin adı/resim adı şeklinde olmalıdır.

Örneğin; sayfamız WEB klasörü içinde olsun. WEB klasörü içinde de biR “resimler” klasörü olsun, resmimizin adı benimresmim.jpg olsun ve resmimiz resimler klasörünün içinde olsun.
O zaman <body BACKGROUND=“./resimler/benimresmim.jpg”> yazmamız gerekir.

Ayrıca dikkat edilmesi gereken diğer bir hususta body ile BACKGROUND arasında bir boşluğun olmasıdır. Bu boşluk olmazsa kod çalışmaz.

Metni Kalın, Italic, Altı ve Üstü Çizili Yapmak

Word programını hepiniz kullanmışsınızdır. Metninizi biçimlendirmek için metni seçer ve kalın için K, italic için T, altını çizmek için de A yı tıklardınız.

Web sayfasını tasarlamada ise metni kalın yapmak için <B>, italik yapmak için <I>, altı çizili yapmak için <U> ve üstü çizili yapmak için de <STRIKE> imleri kullanılır.

Kalın Yapmak: kalın olmayacak metin(şart değil) <B>Kalın yapılacak metin</B> kalın olmayacak metin(şart değil).

Italik Yapmak: Italic olmayacak metin(şart değil) <I>Italik olacak metin</I> Italic olmayacak metin(şart değil).

Altı Çİzmek: Çizgisiz metin(şart değil) <U>Altı çizilecek metin</U> Çizgisiz metin(şart değil).

Üstü Çizmek: Çizgisiz metin(şart değil) <STRIKE>Üstü çizilecek metin</STRIKE> Çizgisiz metin(şart değil).

Bunları hepsi de istenilen kadarı da birlikte kullanılır.

Örneğin;
<B><I><U><STRIKE>Metin</STRIKE></U></I></B>
Örneğin;
<STRIKE><I>metin</I></STRIKE>

Dikkat edilmesi gereken husus ilk başa yazılan im bitişte en sona yazılıyor.Yani 1.2.3 şeklinde başlayan sayılar 3.2.1 şeklinde bitmeli(İmleri bunlara benzettiğimizi düşünelim).

Altindis ve Üstindis Eklemek

Kimya derslerinde bileşik veya element sembolleri gördük. Örneğin H₂O, H⁺¹ vb. Bunları da web de yazabiliriz.
Altindis Eklemek: Normal Yazı(şart değil) <SUB>Altindis için değer</SUB> normal yazı(şart değil)

Üstindis Eklemek: Normal yazı(şart değil) <SUP>Üstindis için değer</SUP> normal yazı(şart değil).

Örnek:
H<SUB>2</SUB>O , H<SUP>+1</SUP> vb…

Metin(Yazı) Tipini Ayarlamak

Metnin Tipini Değiştirmek: <FONT FACE=“yazı tipi adı”>Yazılacak Metin</FONT>

Metin Boyutunu Ayarlamak

Yazdığınız metnin boyutunu da ayarlamak isteyebilirsiniz.Metninizin ne kadar küçük ya da büyük olmasına karar verebilirsiniz.

Bunu yine font iminin içine yazılan size özniteliği ile sağlarız.
Metin Boyutunu Ayarlamak: <FONT SIZE=“boyut”>metniniz</FONT>

FONT ile SIZE arasında boşluk var.

“boyut” yazdığımız yere 1 den 7 ye kadar sayı yazabilirsiniz(1 ve 7 dahil).
Örneğin: <FONT SIZE=“5”>merhaba web tasarımı</FONT>

Metin Rengini Ayarlamak

Sayfanızın rengini değiştirmeyi isteyebileceğiniz gibi metninizin rengini de değiştirmek isteyebilirsiniz.Hep siyah yazmaktan bıkmış olmalısınız değil mi?

Bunun için yine font imini ve onun özniteliği olan COLOR ‘u kullanacağız.
Metin Rengini Ayarlamak: <FONT COLOR=“renk adı”>Metniniz</FONT>

FONT ve COLOR arasında boşluk var.

“renk adı” yazdığımız yere sayfa rengini değiştirmek için kullandığımız renkler vardı ya işte onlar yazılmalıdır.Ya renk adının İngilizce kendisi yada kodu kullanılmalıdır.

Her defasında metinlerin renklerini yazmaktan hoşlanmayabilir ve metin rengini bir kerede de ayarlamak isteyebilirsiniz. Bu durumda sayfanızdaki tüm metinlerin rengi aynı olacaktır.

Bunun için <BODY> iminin bir özniteliği olan TEXT imi kullanılır.

Kullanımı:
<BODY TEXT=“renk adı yada kodu”>

Metin rengini bir resim olarak belirleyemezsiniz.

Yorum Yazısı Eklemek

Yorum Yazısı Eklemek: <!– yorumunuz yada her hangi bir şey –>
Örneğin; <!– Bu sitenin tasarımcısı Serkan ASLAN ‘dır.Kimse izinsiz kullanamaz –>

Alt Satıra Geçmek

Alt Satıra Geçmek: Metniniz <BR>Alt Satıra Geçecek olan Metniniz

Bunun sonucu şöyle olacaktır.
Metniniz
Alt Satıra Geçecek olan Metniniz

Paragraf Oluşturmak ve Alt Paragrafa Geçmek

Bu imler arasına yazılan metin tarayıcı tarafından bir paragraf olarak algılanır ve diğerlerine göre daha fazla boşluk yer açar.

Bu imler <P>yazılacak metin</P> imleridir.
Örneğin; Normal metin yazılır <P>paragraf olacak metin yazılır</P>

Bunun sonucu şöyle olacaktır.
Normal metin yazılır paragraf olacak metin yazılır

Görüldüğü gibi <BR> iminden daha fazla boşluk bırakır.

Birden Fazla Boşluk Eklemek

Bazen kelimeler ya da karakterler arasına birden çok boşluk ekleyebilirsiniz.Yani şöyle yazmak isteyebilirsiniz: Web tasarımı

Eğer not defterinde eklemek istediğiniz kadar boşluğu boşluk çubuğuna(spacebar) basarak yaparsanız sadece tek bir boşluk olur.Böyle yapılan boşluklar boşluk olarak değerlendirilmez.
Örneğin siz not defterinde şöyle yazarsanız: “web” sonuç olarak “w e b” alırsınız.
Bu kadar boşluk eklemek için   kodunu kullanmalısınız.Boşluk eklemek istediğiniz yere ne kadar boşluk eklemek istiyorsanız o kadar  ; koymalısınız.
Örneğin; w   e    b 
sonucunda w e b alırsınız.Yani 3,4,1 boşluk…
DİKKAT:Bu imler büyük yazılırsa çalışmaz ona göre….

Başlık Eklemek

Siteniz için yazdığınız bir yazının başlıkları olacaktır. Sayfanıza koyacağınız başlıkların boyutları diğer yazılara göre daha büyük olacaktır.

Başlık eklemek için <Hn></Hn> imleri kullanılır.
Buradaki h 1 den 6 ya kadardır.(1ve 6 dahil).Ancak burada yazı ne kadar büyük yapmak isterseniz “n” i o kadar küçük yapmalısınız.Yani 1>6 burada geçerlidir.

Kullanımı:
<Hn>Başlığınız</Hn>

Örneğin; <H1>Web Tasarımı</H1>

Resimlerin Avantaj ve Dezavantajları

Resimler sitenizin güzel görünmesi ve sitenizi daha estetik yapabilmenizi sağlar.Ancak resimler siteye ekstra yük getirir.Yani resimlerin yüklenmesi uzun sürer.Tabii bu süre resmin boyutuna bağlıdır.

Bir web sitesi 20 saniyeden daha uzun bir sürede açılıyorsa bu site çok ziyaretçi kaybeder veya hiç ziyaretçi çekemez. Resimler sitenizin geç açılmasına neden olan etmenlerden sadece bir tanesidir.
Bu yüzden resimlerin kullanımı büyük dikkat ve hesaplama ister.Siz siz olun sitenize fazla resim koymayın.

Sayfaya Resim Koymak

Resimler de metinlere benzer. Yani istediğiniz yere istediğiniz resmi koyamazsınız. Metinleri her bir karakter aralığına yazıyoruz. Resimleri de bu karakter aralarından bir tanesine yerleştiririz.
Resimleri sayfaya koymak: <IMG SRC=“resim adı”>

IMG ile SRC arasında bir boşluk vardır.SRC resminizin adını ve resmin tam yolunu belirtmeye yarar.
Burada dikkat edilmesi gereken husus resmin adının, uzantısının ve yolunun doğru yazılmasıdır.Daha önce bu yol ve resim adı bilgisini vermiştim.

Örneğin; <IMG SRC=“./resimlerim/ben.gif”>

Resmin Kenarlığını ve Rengini Ayarlamak

Bazen resminizin güzel sağlamasını, ilgi çekmesini ve vurgulu olmasını isteyebilirsiniz.Bunun için resminize kenarlık ekleyebilirsiniz. Bunu <IMG> iminin özniteliği olan BORDER ile yapabiliriz.

Kullanımı: <IMG SRC=“resim adı” BORDER=“n”>

BORDER ‘ ı yazarken de bir önceki nitelikten bir boşluk ile ayırdığıma dikkat edin. Bu çok önemli.
Buradaki “n” resminize vermek istediğiniz kenarlığın büyüklüğüdür ve istediğiniz sayıyı verebilirsiniz. Tabii vereceğiniz kenarlığın rengini de belirlemek daha güzel olmasına neden olabilir.

Bunu da BORDERCOLOR ile sağlıyoruz.BORDERCOLOR BORDER olmadan çalışmaz.
Kullanımı:
<IMG SRC=“resim adı” BORDER=3 BORDERCOLOR=“renk adı yada kodu”>

Her nitelik arasında bir boşluk mutlaka olmalı bunu kesinlikle unutmayın.
Ama bazen de bu kenarlığı tamamen kaldırmak isteyebilirsiniz.Çünkü bazı durumlarda resminizin güzelliğini bozabilir.Bunun için yapmanız gereken sizin de tahmin edebileceğiniz gibi(eğer tahmin edemiyorsanız biraz daha html yi anlamaya çalışın) kenarlık sayısını sıfır(0) yapmaktır.

Yani BORDER=“0” . Bunu kullanırsanız kenarlık olmayacağına göre kenarlık rengi de olmayacaktır.

Resmi Hizalamak

Biz daha önceki konularımızda <P> imini görmüş ve içinde ALIGN özniteliğini kullanmıştık.Bu niteliği de çokça kullanacağımızı belirtmiştik.İşte o kullanacağımız yerlerden bir tanesi.

Burada ALIGN özniteliğini tabii ki <IMG> imi ile yapacağız.

Resmi Sağa Hizalamak: <IMG SRC=“resim adı” ALIGN=”RIGHT”>
Resmi Sola Hizalamak: <IMG SRC=“resim adı” ALIGN=”LEFT”>
Resmi Ortalamak: <IMG SRC=“resim adı” ALIGN=”CENTER”>

RIGHT, LEFT ve CENTER metinden önce yada sonra kullanılır.Metnin içinde kullanılmazlar.

<IMG SRC=“resim adı” ALIGN=”TOP”> Resmin üstü metnin üst kısmı ile aynı hizaya gelir.
<IMG SRC=“resim adı” ALIGN=”BOTTOM”> Resmin tabanı ile metnin tabanı aynı hizaya gelir.
<IMG SRC=“resim adı” ALIGN=”MIDDLE”> Metin resmin tam ortasına gelir.
TOP, BOTTOM, MIDDLE ise metinden önce yada sonra kullanılabileceği gibi özellikle metin içinde kullanılabilir.Metnin içinde kullanılmak içindirler.

Her nitelik arasında boşluk var.

Resmin Boyutlarını Belirtmek

Resminizin aslı küçük ama sayfanızda büyük olmasını istiyor olabilirsiniz.Küçük bir resmin boyutunu büyütürseniz çözünürlüğü bozulur.Yani eski hali kadar net ve güzel olmaz.

Resmin boyutlarını belirtmek daha kolay yüklenmelerini sağlar.Bu da size zamandan tasarruf sağlayabilir.

Bunun için <IMG> iminin WIDTH ve HEIGHT öznitelikleri kullanılır.
Kullanımı: <IMG SRC=”resim adı” WIDTH=“n” HEIGHT=“n”> şeklindedir.

Her nitelik arasında boşluk var.
“n” resminizin boyutunu belirtmek için kullanılan sayıdır.Buraya iki tane n koymam WIDTH ve HEIGHT değerlerinin aynı olacağı anlamını vermez.Yani değerleri farklı olabilir.
WIDTH yatay uzunluğunu belirtir.
HEIGHT ise dikey uzunluğunu belirtir.
Bir benzetme: Bir dikdörtgenin kısa kenar uzunluğu HEIGHT, uzun kenar uzunluğu ise WIDTH ‘dir.

Resme Alternatif Bir Metin Eklemek

Resimlerinizi web alanınıza yüklediniz ancak bir hata oldu ve gözükmediler.Bu durumda resmin yerine bir şey yazarak bir şeyler belirtebilirsiniz.
Ayrıca bununla ziyaretçi resminizin üzerine fareyi getirdiğinde yazmış olduğunuz bu alternatif metin görünür.
Örneğin; resmin adını yada buraya tıklayın gibi şeyler yazabilirsiniz.Bu metinler resmin yüklenmemesi ve ziyaretçinin faresini resmin üzerine getirdiği durumlarda görünür.Başka bir şekilde görünmez.

Bu <IMG> iminin ALT özniteliği ile yapılır.
Kullanımı: <IMG SRC=“resim adı” ALT=“Resim için tanıtıcı bir cümle yada kelime”>
Boşluk tabii ki var.Buraya istediğiniz her hangi bir şey yazabilirsiniz.

Resimlerin Çevresine Metin Yerleştirmek

Saf resim bir işe yaramaz.Bunun çevresine metin yerleştirmeniz gerekir.Biz daha önce resimlerinde bir karakter olarak düşünülmesi gerektiğini söylemiştik.Resmi yerleştirdikten sonra hemen sonra metin yazarsanız metin resmin yanına gelecektir.Metin bir alt satıra kaydığında ise resmi atlayacaktır.Çünkü resim üst satırın bir karakterlik yerine oturmuştu.

Resminizin 5 cm büyüklüğünde olduğunu düşünün ve yanına bir metin yazın ve bu metin uzun bir metin olsun.Ne olacaktır.Resimden sonra bir satır metin yazılacak ve alt satıra geçildiğinde 5 cm lik alan boş kalacaktır.Bunu önlemek için <IMG> iminin ALIGN özniteliği kullanılır.

Kullanımı: <IMG SRC=“resim adı ve yolu” ALIGN=“RIGHT, LEFT”>

Yukarıda anlattığın gibi resmi hizaladığımızda metin resmin çevresine yerleşecektir.Yani bir satırdan sonra 5 cm atlamayacak resmin hemen yanından devam edecek.Yani metin resme sarılacaktır.

Metin Sarımını Durdurmak

Resmimizin çevresine metin sarmayı öğrendik değil mi?

Küçük bir resim kullandığınızı ve sarım yapmamayı düşünün.Bu resmin tek başına daha güzel görünmesini sağlayabilir.

Bunu <BR> iminin CLEAR özniteliği ile yapabiliriz.

Kullanımı:
<IMG SRC=“resim adı” ALIGN=”LEFTya da RIGHT”><BR CLEAR=”LEFT, RIGHT ya da ALL”> şeklindedir.
Önce resim sonra <BR CLEAR=””>

LEFT resim solda ve metin sağda ise sağ taraf boş kalır ve metin resmin bittiği yerden devam eder.
RIGHT resim sağda ve metin solda ise sol taraf boşalır.
ALL ile resmin her iki tarafını boşaltabiliriz.

Bu özniteliklerden biri kullanılır.Hepsi birden kullanılmaz.

Yatay Çizgi Eklemek

İstediğiniz her hangi bir yere bir çizgi eklemek isteyebilirsiniz.Ancak bu çizgi sadece yatay olabilir.Dikey olamaz.Dikey için bir resim kullanabilirsiniz.

Yatay Çizgi Eklemek: <HR> imleri ile olur.

İsterseniz çizginin rengini, yatay ve dikey uzunluğunu ve hizalamasını belirtebilirsiniz.
Çizginin rengini ayarlamak: <HR COLOR=“renk adı”>
Çizginin yatay uzunluğunu ayarlamak: <HR WIDTH=“n”>
Çizginin dikey uzunluğunu ayarlamak: <HR SIZE=“n”> HEIGHT değil bilemediniz.
Çizginin hizalaması: <HR ALIGN=”LEFT, RIGHT ya da CENTER”>

Bunların hepsi birlikte kullanılabilir.
Örneğin; <HR ALIGN=”CENTER” COLOR=“#fefe00” WIDTH=“300” SIZE=“5”>

Sıralı Listeler Yaratmak

Sıralı listelerden kastımız kelime yada cümlelerinizi ya da herhangi bir şeyi numaralı, alfabeli, ya da roma rakamlı sıralı olarak göstermektir.Yani;
1.Html
2.Perl
3.Eperl

Bunu <OL> imi ile sağlarız.Ancak bu im tek başına kullanılmaz sırayı belirtmek için de <LI> imi ile birlikte kullanılır.Yani sıralanacak olan şeyin başına <LI> getirmeliyiz.

Kullanımı:
<OL>
<LI>Html</LI>
<LI>Perl</LI>
<LI>Eperl</LI>
</OL>

Bunun sonucu yukarıdaki örnek ile aynıdır.

Görüldüğü gibi <OL> ile başlayıp </OL> ile bitiyor.Bu sırayı istediğiniz kadar yapabilirsiniz.

<LI></LI> ler <OL></OL> arasında olmalı.

Sıramızı ister sayı ister alfabe isterseniz de roma rakamı olarak belirtebiliriz.

Sıralı Listeyi Sayı Olarak Atamak: Yukarıdaki gibi yapıldığı zaman listemiz sayılı olur.

Sıralı Listeyi Büyük Harf Alfabe Olarak Atamak:
<OL TYPE=“A”>
<LI></LI>
<LI></LI>
</OL>

Listeyi büyük harf alfabe olması için <OL> iminin özniteliği olan TYPE imi ile ve büyük “A” harfiyle yaparız.

Sıralı Listeyi Küçük Harf Alfabe Olarak Atamak:
<OL TYPE=“a”>
<LI></LI>
<LI></LI>
</OL>

Büyük “A” yı küçük “a” olarak değiştirirsek tabii ki küçük sıralı olacaktır.Bunu anlamış olmanız lazım.

Sıralı Listeyi Büyük Roma Rakamları Olarak Atamak:
<OL TYPE=“I”>
<LI></LI>
<LI></LI>
</OL>

Sıralı Listeyi Küçük Roma Rakamları Olarak Atamak:
<OL TYPE=“i”>
<LI></LI>
<LI></LI>
</OL>

Tabii ki OL ve TYPE arasında boşluk var.

İsterseniz sıralı listenizi belli bir sayı,harf yada roma rakamından başlatabilirsiniz.Yani 1.2.3. değil de 5.6.7.8.9 gibi.

Bunun için <OL> iminin özniteliği olan START imi ile gerçekleştireceğiz.

Kullanımı:
<OL TYPE=“A” START=“5”>
<LI></LI>
<LI></LI>
</OL>

START değeri her zaman bir sayı olmalı.Yani sırayı alfabe olarak atamak ve “f” den başlamak istersek START değerini “f” değil “6” yapmalıyız. TYPE değerini de küçük “a” yapmalıyız.

Sıralı Olmayan Listeler Yaratmak

Sıralı olmayan listeler ise sırayı sayı, harf yada roma rakamı yerine bir şekil ile belirlemek anlamındadır.Yani sıramızı küçük kare, yuvarlak, oval vb.. şekillerde yapmak içindir.

Burada <OL> imini değil de <UL> imini kullanacağız.Sırayı da yine özniteliği olan <LI> ile belirteceğiz.
Kullanımı:
<UL>
<LI></LI>
<LI></LI>
</UL>

Biz sıralı listelerde sıra tipini belirtmek için TYPE özniteliğini kullanıyorduk.Burada da onu kullanacağız.

Listeyi KARE(SQUARE) Olarak Atamak: TYPE=“SQUARE”
<UL TYPE=“SQUARE”>
<LI></LI>
</UL>

Listeyi Yuvarlak Dolu Olarak Atamak: TYPE=“DISC”
<UL TYPE=“DISC”>
<LI></LI>
</UL>

Listeyi Yuvarlak İçi Boş Olarak Atamak: TYPE=“CIRCLE”
<UL TYPE=“CIRCLE”>
<LI></LI>
</UL>

Bunların her hangi bir başlangıç değeri olamaz değil mi?

Tanım Listeleri Yaratmak

Bir kavramı açıklayacağınızı düşünün.Ama yanına iki nokta yada eşittir(: yada =) koymadan kavramın bir alt satırından ve kavramın uygun bir yerinden başlamak koşuluyla tanımını vereceğinizi düşünün.

Örneğin;

HTML NEDİR?

Web sayfası tasarlamak için ve metin biçimlendirmek için kullanılan bir dildir.
Bu şekilde yapılan bir açıklama daha hoş görünebilir.Bunu yapmak için biz <DL></DL> imlerinden ve bunlarla kullanılan imlerden yararlanacağız.

Kullanımı:
<DL>
<DT>Tanımını yapacağınız kavram yada kelimeyi yazın</DT>
<DD>Yukarıda yazmış olduğunuz kelime yada kavram için açıklamanızı yazın.</DD>
</DL>

Görüldüğü gibi <DL> ile birlikte <DT> ve <DD> imleri kullanılmakta.

<DT></DT> arasına yazacağınız kelimenin kısa olmasına dikkat edin.Uzun olması kötü görünmesine neden olabilir.

İç İçe Listeler Yaratmak

İç içi listeler yaratmak listeleri iyi bir şekilde kullanmaktan başka bir şey değildir.

Öncelikle hangi liste imini kullanacağınıza ve nerde kullanacağınıza karar verin.Sıranın tipini de belirleyin.

Örneğin şöyle bir sıra yapabilirsiniz.
A. HTML
1. web
2.site
3.tasarım
B. PERL
1.script
2.cgi

Tabii ki burada sıralı olmayan listeleri de rahatlıkla kullanabilirsiniz.

Örnek:
<OL>
<LI>HTML</LI>
<OL>
<LI>Web</LI>
<LI>site</LI>
<LI>tasarım</LI>
</OL>
<LI>PERL</LI>
<OL>
<LI>script</LI>
<LI>cgi</LI>
</OL>
</OL>

Link Hakkında

Biz ilk dersimizde HTML’ nin HyperText olduğunu söylemiştik.Yani dosyaları birbirine bağlamak için metine verilen link(bağlantı) olduğunu ve asıl amacının dosyaları birbirine bağlamak olduğunu söylemiştik.

Linkler kısa yoldan belgelere ulaşmamızı sağlar.Sadece yapacağımız o linke tıklamak olacaktır.
Linkleri metinlere verebileceğimiz gibi resimlere de verebiliriz.

Bazı uzantılara sahip dosyalar tarayıcı tarafından açılamaz(görüntülenemez).Bu tür dosyalar açılamadığından tarayıcı bunları sabit diskinize kaydetmek ister ve size bir mesajla kaydetmek isteyip istemediğinizi sorar. Örneğin;.doc, .exl, .exe, vb. Bu yüzden linkler verilirken dosyanın uzantısını dikkate almak zorundasınız.

Tarayıcı resim dosyalarından .gif, .jpg, .bmp, .wmf, uzantılı dosyaları görüntüleyebilir. .tif gibi uzantıları görüntüleyemez.

Tarayıcı .html ve .htm uzantılı dosyaları görüntüleyebilir, yukarıdakileri görüntüleyemez.

Eğer ziyaretçinizin bir dosyayı bilgisayarına kaydetmesini isterseniz bu dosyayı tarayıcının görüntüleyemediği bir dosya olan ZIP dosyasının içine koyun. Ya da bir uygulamaya(.exe uzantılıdır.) direkt link verebilirsiniz.

Link Yaratmak

Linkler <A></A> imi ile yaratılır. Tabii ki bu tek başına kullanılmaz.Belgenin adını ve adresini belirteceğimiz bir öz nitelik gereklidir. Hemen aklınıza resimler için kullandığımız SRC özniteliği geldi değil mi?Gerçekten de aklınıza bu nitelik geldiyse demek ki bir şeyler öğreniyorsunuz.Aklına bu gelemeyen varsa biraz daha gayret etmeli.

Ancak linklerde bu SRC kullanılmaz. Bunun yerine HREF özniteliği kullanılır.

Kullanımı:
<A HREF=“dosyanın adı ve yolu”>Link bağlanacak metin</A>

Dosyanın adı, uzantısı ve yolu doğru olmalıdır.Resim kullanımındaki gibi.

Bu şekilde verilen bir link metninizin altını çizecek ve link metninin rengini değiştirecektir.

Linklerin Rengini Ayarlamak

Yukarıda dediğimiz gibi link bağlanan metnin altı çizilir ve rengi değişir.Ayrıca ziyaretçi linke tıklayıp kaldığındaki ve bıraktıktan sonraki rengi de değişir.Bu renkleri istediğiniz gibi ayarlayabilirsiniz.

Bunun için <BODY> imini kullanacağız.

Kullanılacak öznitelikler;
LINK=“renk adı” :Tıklanmamış durumdaki renk

ALINK=“renk adı” :Tıklayıp bırakmama durumundaki renk

VLINK=“renk adı” :Tıklayıp bırakma durumundaki renk

Kullanımı:
<BODY LINK=“renk adı” ALINK=“renk adı” VLINK=“renk adı”>

Nitelikler arasında boşluk her zaman var.

Renkleri daha önce söylemiştim ya İngilizce renk adı olacak yada kodu olacak.

Linkleri Belli Çerçevelere Hedeflemek

Yarattığınız linke tıklandığında açılması gereken sayfa o linkin bulunduğu sayfada açılır.Ama siz ziyaretçinin bu linke tıkladıktan sonra hem bağlı sayfayı hem de linkin bulunduğu sayfayı görebilmesini isteyebilirsiniz.Dolayısıyla linki başka bir yere yönlendirmelisiniz(hedeflemek).Yani başka bir pencerede ya da istediğiniz bir pencerede açabilirsiniz.Bu en iyi çerçeveli sayfalarda kendini gösterir.Çerçeveli sayfalar oluşturmayı daha sonra anlatacağım.

Düşünün ki sayfanızda küçük bir resim var ve buna link verdiniz.Linke tıklandığında tam sayfa bir resim açılacak.Ne olacaktır eğer linki hedeflemezseniz.Resim geç açılacağından asıl sayfanızı ziyaretçi gezemeyecek.Belki de sıkılıp resmi de görmeden ayrılacaktır.Bunu istemezsiniz değil mi?

Hedeflemeyi <A> iminin TARGET özniteliği ile gerçekleştiririz.

Kullanımı:
<A HREF=“dosya adı ve yolu” TARGET=“istediğiniz bir kelime”>Bağlanacak Metin</A>

TARGET ‘ın değerini iyi ayarlamalısınız.Herhangi bir şey olabilir.Örneğin;bir resim için TARGET=“resim” yazabilirsiniz.

Şunu bilmelisiniz ki birden çok resim linki var ve hepsini resim penceresine hedeflediniz.Bu durumda o bütün resimler aynı pencerede açılacaktır. Yani bir ziyaretçi bir resminize tıkladı ve o resim de resim penceresinde açıldı.Ama ziyaretçi diğer resmi de tıkladı ve o resimde öncekinin açıldığı yerde açılacaktır.Bu durumda ne olur?Tabii ki ilk tıklanan resmin yüklenmesinden vazgeçilecek son tıklanan resim açılacaktır.

İsterseniz bütün linkleri her biri farklı pencereye olmak üzere hedefleyebilirsiniz.
Bunun için TARGET=“_BLANK” kullanabilirsiniz.

Linkler İçin Klavye Kısa Yolları Yaratmak

Bazı ziyaretçileriniz klavye kullanımını fare kullanımına tercih edebilirler.Böyle kişileri de düşünerek onların sitenizi klavye ile ziyaret etmelerini sağlayabilirsiniz.

Bunun için linklerinize klavye kısa yolları atayabilirsiniz.

Bunu <A> iminin özniteliği olan ACCESSKEY ile yapabiliriz.
Kullanımı:
<A HREF=“merhaba.html” ACCESSKEY=“kısa yol için bir harf yazın”>

Link için atadığınız kısa yol harfi tek başına çalışmaz.Yani yazacağınız harf ile “ALT” tuşuna basarak linki aktif hale getirebilirsiniz.

Örneğin; <A HREF=“merhaba.htm” ACCESSKEY=“A”>Buraya Tıklayın</A>

Bu linki çalıştırabilmeniz için ALT+A tuş kombinasyonunu kullanmanız gerekir.

Burada önemli olan bir durum; siz eğer bir kısa yol atarsanız bunu ziyaretçinizin bilmesi gerekir ki kısa yolu kullanabilsin.Bunun için link verdiğiniz yerin yanına parantez yada başka bir şey ile o linkin kısa yolunu belirtin(yazın).

Linkler İçin Sekme Sırasını Ayarlamak

Biz bazen bilgisayar kullanırken bir yerden bir yere atlamak(sekmek) için TAB tuşunu kullanırız değil mi? Web’ de de ziyaretçileriniz bu tuşu kullanmak isteyebilir.Eğer siz bir şekilde bunu ayarlamazsanız tarayıcı kendine göre sekmeleri ayarlar.Sizin bu sekme sıralarını ayarlamanız neyin ne kadar önemli ve ilk sırada olmasına göre değişebileceğinden önemlidir.

Sekme sırasını <A> iminin özniteliği olan TABINDEX ile ayarlarız.

Kullanımı:
<A HREF=“merhaba.html” TABINDEX=“sekme sırası”> şeklindedir.

“sekme sırası” yazdığım yere önceliğine göre 1,2,3,… yazabilirsiniz.

Linklerle Resimleri Kullanmak

Ziyaretçilerinizin bir resme tıklayarak bir dosyaya erişmelerini isteyebilirsiniz.Bu bir resme link vermekten başka bir şey değildir. Sadece <A></A> imleri arasına resminizin görünebilmesi için resim kullanma imlerini yazmalısınız. Neydi bu imler <IMG SRC=”resim adı ve yolu”> değil mi? Hatırladınız dimi. Unutmak yok. Kullanın ki unutmayasınız. Pratik en iyi öğrenme yoludur.

Kullanımı:
<A HREF=”dosya sdı ve yolu”><IMG SRC=”resim adı ne yolu”></A>

Burada önemli olan bir şey var.O da eğer resme link verirseniz resmin çevresinde otomatik olarak bir kenarlık oluşacaktır. Bu büyük bir ihtimalle size güzel görünmeyecektir. Bu kenarlığı yok etme yolunu biliyorsunuz. Nedir? BORDER=0.

Bunlara istediğiniz diğer öz nitelikleri de ekleyebilirsiniz. TABINDEX, ACCESSKEY, BORDER, WIDTH, HEIGHT gibi.

Çapa Yaratmak

Çapa bir sayfanın bir yerinden aynı sayfanın başka bir yerine gitmek için oluşturulan link demektir.Yani siz yandaki konu başlıklarına tıkladığınızda konunun başına geliyorsunuz.İşte bu çapa ile yapılmıştır. Bu böyle durumlarda işinize yarayabilir.

Bunu da yine <A> imi ile yapacağız.Ama bu biraz farklı olacak.

Üzerine tıklayıp gideceğiniz yeri belirleyen link metnini oluşturun ve normal olarak bir link bağlayın. Bunu yaparken dosya adı yerine bir dosya adı değil istediğiniz bir kelime ya da çapayı tanımlayacak küçük bir kelime yazın.Bu kelimenin önünde de sharp(diyez)(#) işareti olsun.

<A HREF=“#capa”>Link metni</A>

Sonra bu linke tıklayıp gideceğiniz metni yazın. Yazdınız mı? Tamam. Bu metnin de ilk kelimesini içine alacak bir link oluşturacağız. Ama burada farklı olan HREF yerine NAME yazmak olacak.Bunu da yazdıktan sonra NAME içne yukarıdaki HREF içine yazdığınız ile aynı şeyi yazın. Farklı olursa link çalışmaz ona göre…

<A NAME=“#capa”>Buraya istediğiniz bir metnin ilk satırını yada bir iki kelimesini yazın</A> bundan sonra metnin kalanı devam edebilir.

Siz burayı okuyorsunuz ya. Biraz üstte “Çapa Yaratmak” diye bir başlık var.Gördünüz değil mi? Sayfanın en başında solda da mönüler var ve en sonda da yine “Çapa Yaratmak” yazıyor.Siz en yukarıdakine tıkladığınızda buradakine geliyorsunuz.Bu durumda HREF li olan en üstteki NAME li olan ise buradakidir.

Tablolar Hakkında

Tablolar web sayfalarının biçimlendirilmesinde kullanılan vazgeçilmez özelliklerden en önemlisidir. Tablolarla sayfanızı istediğiniz gibi çok zevklice ama bir o kadarda karmaşık olarak biçimlendirebilirsiniz. Tabloları anlamak biraz zaman alabilir.Anlamakta zorlanabilirsiniz. Tabloları en iyi kavramanın yolu bol bol pratik ve deneme-yanılmadan geçer.

Şu an ziyaret etmekte olduğunuz site büyük çoğunlukla tablolarla yapılmıştır.Hele de en üstteki resim bölümünü yapabilmek iyi bir tablo bilgisi gerektirir.Ben ilk öğrenmeye başladığımda tabloları anlamamıştım. Ama birden bire ilham geldi ve anlamaya başladım.Tabii ondan önce bol bol düşünme ve deneme-yanılma olmuştu.

Tabloları excel ve word ‘dan bilmeniz gerekir.Eğer ofis programlarını kullanıyorsanız. Bir tablo bir satır ve bir sütundan oluşabileceği gibi bir çok sütun ve satırdan da oluşabilir.Yatay olanlar satırdır. Dikey olanlar sütundur.Satır ile sütun’un kesiştiği yerler ise hücredir.
Bu bir satırlık ve aynı zamanda bir sütunluk bir tablodur.Satır ve sütunun kesiştiği yer tablonun kendisi olduğu için bu ayrıca bir hücredir.

Bu ise tek satırlı ama 2 sütunludur.Yani bu tablonun 2 hücresi vardır.
Bu ise tek sütunlu ama 2 satırlıdır.Yine de 2 hücresi vardır.

Tablo Yaratmak

Şimdi yukarıdaki tabloların nasıl yapıldığına bir göz atalım.

Tablo imi <TABLE></TABLE> dır. Ancak yalnız başına kullanılmaz.Bununla birlikte <TR></TR> ve <TD></TD> imleri de kullanılır.Bunların ayrıca bazı öznitelikleri vardır.

<TR></TR> satır yaratmak için kullanılır.

<TD></TD> ise sütun yaratmak için kullanılır.

Bunlar mutlaka <TABLE></TABLE> imleri içine yazılır.

Basit bir tablo:Tek satır, tek sütun,tek hücre.

<TABLE BORDER><!– Tablonun Başı –>
<TR><!–Satır Başı.Yeni bir satır oluşturuluyor.Satır oluşturmadan sütün oluşturulmaz.–>
<TD><!– Sütun başı.Yeni bir sütun oluşturuluyor –></TD><!– Sütun sonu –>
</TR><!– satırın sonu –>
</TABLE><!– tablonun sonu –>

Bunu sonucu yukarıdaki ilk tabloyu oluşturur.BORDER kenarlık eklemek içindir. BORDER koymazsanız tablo gözükmez.Aslında vardır ama görünmez. Daha sonra BORDER ‘ı anlatacağım. Zaten bunu biliyorsunuz aslında değil mi? Resimler konusundan…

<!– Bu yorum yazısıydı ve görünmezdi hatırladınız mı?–>

Satır ve Sütun Yaratmak

Satır yaratmak için <TR></TR> kullanılır.

Sütun yaratmak için de <TD></TD> kullanılır.Ve sütunlar her zaman satırın içinde olur.Yani <TD> imi her zaman <TR> iminden sonra gelir.

Diyelim ki siz 1 satırlı ve 5 sütunlu bir tablo oluşturmak istiyorsunuz.Bu durumda ne yaparsınız.Bir satır oluşturulur.Bu satır içine 5 tane <TD></TD> sütun imleri koyarsınız değil mi? Yani;

<TABLE BORDER>
<TR>
<TD></TD><TD></TD>
<TD></TD><TD></TD>
<TD></TD>
</TR>
</TABLE>

<TD> ler görüldüğü gibi yan yana yazılmasında herhangi bir mahsur yoktur.Bu diğerleri için de geçerlidir.Yani bütün imler yan yana da yazılabilir.

<TABLE BORDER><TR><TD></TD><TD></TD></TR></TABLE> gibi…

Diyelim ki siz 2 satır ve 2 sütun oluşturmak istiyorsunuz.Bu durumda nasıl olur?

<TABLE BORDER>
<TR><!– 1. satır başı –>
<TD></TD><TD></TD><!– 2 adet sütun–>
</TR><!– 1. satır sonu –>
<TR><!– 2. satır başı –>
<TD></TD><TD></TD><!– 2 adet sütun–>
</TR><!– 2. satır sonu –>
</TABLE>

Tablo İçinde Tablo Yaratmak

Tabloları iyi bir şekilde öğrendikten sonra mutlaka tablo içinde tablo oluşturmak zorunda kalacaksınızdır.Bundan emin olun.
Tablo içinde tablo yaratmak demek her hangi bir sütun içinde normal bir tablo oluşturmak demektir.
İşte size 2 satırlık ve tek sütunluk bir tablo ve 1.satırın içinde bir tablo(tek satır ve tek sütunlu).

Bunun kodları aşağıdaki gibidir.

<TABLE BORDER><!– tablo başı –>
<TR><!– 1.satır başı–>
<TD><!– 1.sütun başı–>

<TABLE BORDER><!– ilk sütun içindeki tablonun başı –>
<TR><!– iç tablonun satır başı –>
<TD></TD><!– iç tablonun sütunları –>
</TR><!– iç tablonun satır sonu –>
</TABLE><!– iç tablonun sonu –>

</TD><!– ilk sütunun sonu –>
</TR><!– ilk satırın sonu –>
<TR><!– 2.satırın başı –>
<TD></TD><!– 2. satırın sütunları –>
</TR><!– 2.satır sonu –>
</TABLE><!– tablo sonu –>
Bunu çok iyi inceleyin ve siz de deneyin.
İlk satırda 2 sütun olup 2. satırda 3 sütun olmaz.İlk satırda ne kadar sütun varsa ikinci satırda da o kadar sütun olmalı. Bu dediğim bir şey daha var bunu öğrenene kadar böyledir.Yani aslında olabilir. Ama bu biraz karışık onu daha sonra anlatacağım oldu mu?

Tablonun Boyutlarını Belirlemek

Biz daha önce resimleri boyutlandırmayı öğrenmiştik.Bunun ondan bir farkı yok.Yine WIDTH ve HEIGHT kullanacağız.
Kullanımı:
<TABLE WIDTH=“n” HEIGHT=“n” BORDER>
<TR>
<TD></TD>
</TR>
</TABLE>
“n” değeri bir sayıdır.Her 1cm için “n” yerine 30 yazmalısınız.

Kenarlık Eklemek, Kenarlığın Boyutunu ve Rengini Ayarlamak

Resimlerimize kenarlık ekler gibi tablolara da kenarlık ekleyebilir yada silebiliriz. Bunu BORDER imi ile yapabiliriz.
Kullanımı:
<TABLE BORDER=“n”>
Kenarlığın olmaması için sıfır(0) yazmalısınız.
Kenarlığın rengini de isteğinize göre değiştirebilirsiniz.Bunu BORDERCOLOR ile yapabiliriz.
Kullanımı:
<TABLE BORDER=“3” BORDERCOLOR=“renk adı(yellow)”>
BORDERCOLOR imi, BORDER imi olmadan işe yaramaz.

Hangi Dış Kenarlığın Görüntüleneceğini Seçmek

Bu öğreneceğiniz im ile tablonun bazı yerlerindeki kenarlıklarını yok edebilirsiniz eğer isterseniz.
Bu im mutlaka BORDER imi ile birlikte kullanılır.Bu im FRAME imidir.
Tıpkı sıralı olmayan listelerde kare için square yazıyorsak burda da FRAME özniteliğin değerlerini yazacağız.
Kullanımı:
<TABLE BORDER FRAME=“yok edilmek istenen kenarlık değeri”>
BORDER ‘ın değri yok dikkat edin.

FRAME Değerleri:
VOID: Üst, alt, sağ ve sol kenarlık için
ABOVE: Sağ, sol ve alt kenarlık için
BELOW: Sağ, sol ve üst kenarlık için
HSIDES: Sağ ve sol kenarlıklar için
VSIDES: Üst ve alt kenarlıklar için
RHS: Sağ, üst ve alt kenarlık için
LHS: Sol, üst ve alt kenarlık için
Kullanımlar:

<TABLE BORDER FRAME=“VOID, ABOVE, BELOW…..”>
Bunlardan herhangi birini kullanabilirsiniz.
Bu değerler sadece kenarlıkları yok eder yani göstermez. Ama iç kenarlıklar her zaman görünür. İç kenarlıklar da yok edilebilir.

Hangi İç Kenarlığın Görüntüleneceğini Seçmek

Bunun için de FRAME yerine RULES ve değerleri kullanılır.
Kullanımı: <TABLE BORDER RULES=“değrleri”>

RULES değerleri;
NONE: Tüm iç kenarlıklar için
ROWS: Dikey iç çizgiler için
COLS: Yatay çizgiler için
Kullanımları:

<TABLE BORDER RULES=“NONE, ROWS ya da COLS”>Sadece biri kullanılır.
İsterseniz FRAME ve RULES imlerini birlikte kullanabilirsiniz.
Bunun için <TABLE BORDER FRAME=“VOID” RULES=”COLS”> yazabilirsiniz ya da buna benzer olabilir.

Tabloyu Hizalamak

Resimleri ve metinleri hizaladığımız gibi tabloları da hizalayabiliriz.Bunun için de ALIGN özniteliği kullanılır.

Tabloyu ortalamak için: ALIGN=“CENTER”

Tabloyu Sağa Dayalı Yapmak İçin: ALIGN=“RIGHT”

Tabloyu Sola Dayalı Yapmak İçin: ALIGN=“LEFT”

Kullanımı:
<TABLE ALIGN=“CENTER, LEFT, RIGHT”> bu değerlerin sadece bir tanesi kullanılır.

LEFT ve RIGHT öznitelikleri kullanıldığı zaman metinler tablonun çevresine sarılır. Bunun böyle olması işinize yarayabilir. Ama bunu istemeyebilirsiniz de. Resimler için kullandığımız;
<BR CLEAR=”RIGHT,LEFT,ALL”> imlerini kullanabilirsiniz. Bu resimler bölümünde anlatılmıştı. Bir farkı yok.

Hücrelerin Rengini Ayarlamak

Biz daha önceki derslerimizde bir web sayfasının arka planını resim ve renk olarak ayarlamayı öğrenmiştik. Arka planı renk olarak ayarlamak için BGCOLOR imi ile arka planı bir resim olarak ayarlamak için de BACKGROUND imi ile yapmıştık. Tablolarda da farklı değil.Aynı şey söz konusu.

Hücrenin Rengini Ayarlamak için: BGCOLOR=“renk adı yada kodu” kullanılır.

Kullanımı:
<TABLE>
<TR>
<TD BGCOLOR=”renk adı yada kodu”></TD>
</TR>
</TABLE>

Her bir sütun hücre olduğu için BGCOLOR imini tabii ki <TD> iminin içine yerleştireceğiz.

Hücrenin Rengini Resim Olarak Ayarlamak

Hücrenin Rengini Resim Olarak da ayarlayabiliriz.
Bunun için kullandığımız öznitelik BACKGROUND=“resim adı ve yolu” dur.
Bu niteliği de <TD> iminin içine koymalıyız.Çünkü biz bir hücrenin arka planını değiştiriyoruz.
Kullanımı:
<TABLE>
<TR>
<TD BACKGROUND=”resim adı ve yolu”></TD>
</TR>
</TABLE>

Hücrenin İçeriğini Hizalamak

Metin, resim ve tablo hizalar gibi bir hücrenin içindekileri de hizalayabiliriz.Kullanacağımız öznitelikler ALIGN=”” ve VALIGN=”” öznitelikleridir.

ALIGN için kullanılan değerler:
LEFT=Sol
RIGHT=Sağ
CENTER=Orta

VALIGN için kullanılan değrler:
TOP=Üst
BOTTOM=Alt
MIDDLE=Orta

Kullanımı:
<TABLE>
<TR>
<TD ALIGN=”değerleri”></TD>
<TD VALIGN=”değerleri></TD>
</TR>
</TABLE>

Hücre İçindeki ve Çevresindeki Boşluğu Ayarlamak

Hücrenin içine yerleştirilen metin tam kenarlara yapışır. İsterseniz içeriğin hücreye ne kadar yakın olacağını ayarlayabilirsiniz. Ayrıca hücrelerin çevresinde de bırakmak istediğiniz boşluğu ayarlayabilirsiniz.Bunun için kullanılacak öznitelikler CELLLSPACING ve CELLPADDING dir.
Bu öznitelikler <TABLE> imi içinde kullanılır.
Kullanımı:
<TABLE CELLSPACING=“n” CELLPADDING=“n”>
“n” yerine bir sayı koyabilirsiniz.İksi de aynı olacak demek değildir. Sayılar da fazla büyük kullanılmaz genellikle CELLSPACING=“0” CELLPADDING=“0” şeklinde kullanılır. Böylece tüm boşluklar yok olur ve tablolar daha güzel görünür.

Tablo Satırlarını Birleştirmek

Daha önce üst satırda 2 sütun olup da alt satırda 3 sütun koyamıyorduk.Ta ki şimdi öğreneceğimiz özniteliklere kadar.
Satır ve sütun birleştirmek demek 2 ya da daha fazla sütun ya da satırı tek bir taneye çevirmektir.
Bu öznitelikler bayağı kullanışlıdır.
Bir tablo yapalım ve 1 satırda 3 sütun olsun. 2. satırda da 3 sütun olsun.Biz 1. satırın ilk iki sütununu birleştirmek istiyoruz.Birleştirme sonrası ne olacak 1. satırda 2 sütun olmuş olacak değil mi?
Tablonun satırlarını birleştirmek için: ROWSPAN=“birleştirilmek istenen satır sayısı”

Kullanımı:
<TABLE><!– tablo başı –>
<TR><!– 1. satır başı –“>
<TD ROWSPAN=”2”></TD><!– 1.satırın 1.sütunu –>
<TD></TD><!– 1. satırın 2. sütunu –>
</TR><!– 1. satır sonu –>
<TR><!– 2. satır başı –>
<TD></TD><!– 2. satırın 2. sütunu.1. sütunu yok.Çünkü yukarıda birleştirildi. –>
</TR>
</TABLE>

Bunun Sonucu:
1. ve 2. satırın ilk sütunları

1.satırın 2. sütunu

2. satırın 2. sütunu

Tablo Sütunlarını Birleştirmek

İstersek sütunları da birleştiririz.Bunun için kullanılan öznitelik COLSPAN dir.
Tablonun sütunlarını birleştirmek için: COLSPAN=“birleştirilecek sütun sayısı”

Kullanımı:
<TABLE>
<TR>
<TD COLSPAN=2></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

Bunun sonucu:
1. satırını 1 ve 2. sütunları birleştirildi

2. satırın 1. sütunu

2. satırın 2. sütunu

Bir tablonun hem satır hem de sütunları aynı anda birleştirilebilir.Bu konu biraz karmaşıktır.İyi anlamak için bol bol pratik yapın.Deneme yanılmalar işinize yarayacaktır.

Çerçeveler Hakkında

Çerçeveler birden çok html sayfasını birleştirerek tek bir sayfaya hapsetmek gibidir.Yani iki web sayfanızı tek bir sayfaya koyuyorsunuz.İki sayfa tek bir sayfa oluyor.

Çerçevelerin yüklenmesi normaline göre daha zordur.Tasarlayacağınız sayfalarda çerçeveler kullanacaksanız bunun 3 den fazla olmamasına dikkat edin.Aslında üç de fazla en ideali iki çerçeve kullanmaktır.
Çerçeveler <HEAD></HEAD> imlerinden sonra gelir ve yazılır.Çerçeve sayfalarında <BODY></BODY></HTML> imleri kullanılmaz, kullanılsa da bir şey oluşmaz. Siz sadece <META> imlerini gerekli yerlere yazmakla yetinin.

Çerçeve Yaratmak

Çerçeve yaratmak zor bir iş değildir.Ayrıca karmaşık da değildir.Bunu iyi anlayacağınızı umuyorum.

Çerçeve yaratma imleri <FRAMESET></FRAMESET> imleridir.Ancak bu imler yalnız başına kullanılmaz. Hangi sayfaların ekleneceğini belirtmek için <FRAMESET> imi ile birlikte <FRAME></FRAME> imi de kullanılır.Tıpkı tablolarda kullanılan satır ve sütun imleri gibi.

<FRAMESET> çerçevenin başladığını belirtir.</FRAMESET> ise bittiğini belirtir.

<FRAME> imi eklenecek sayfayı belirtmek için başlangıcı belirtir.</FRAME> ise bitişi belirtir.

Çerçeveler yatay ve dikey konumlandırılır.Eklenecek sayfaların bir isim özniteliği olan NAME ile bu sayfaların yerini belirtecek SRC özniteliği vardır.

Bir çerçeve yaratalım;
<HTML>
<HEAD>
<TITLE>SAYFANIN BAŞLIĞI</TITLE>
</HEAD>
<FRAMESET>
<FRAME NAME=”sayfa için bir isim” SRC=”dosya adı ve yolu”></FRAME>
<FRAME NAME=”sayfa için bir isim” SRC=”dosya adı ve yolu”></FRAME>
………………………………..Buraya istediğimiz kadar FRAME koyabiliriz.
</FRAMESET>

Görüldüğü gibi <BODY> iminden sonra kullanılan imler kullanılmadı.

Bu çerçeve setinde sayfaların dikey mi yoksa yatay mı olacağı belirtilmedi.Aşağıda buna değineceğiz.

Yatay Çerçeve Yaratmak

Çerçevelerin yatay olabilmesi için <FRAMESET> imi içine onun özniteliği olan ROWS kullanılır.Bu özniteliği daha önce de biliyordunuz. ROWS özniteliğinin bir de sayı değeri vardır. Bu değer sayfanın yüksekliğini ayarlamak için kullanılır.

Kullanımı:
<FRAMESET ROWS=“x,y”>
<FRAME SRC=”dosya adı”></FRAME>
<FRAME SRC=”dosya adı”></FRAME>
</FRAMESET>

Dosyaların yükseklik ve genişliklerini ayarlamada kullandığımız ROWS ve COLS ‘ın değerlerinin biri istenildiği bir sayı olur.Diğeri de yıldız(*) olabilir.

Örneğin üç dosya eklemişseniz ROWS=”40,*,50″ şeklinde yazabiliriz. Bunun anlamı üstteki dosyanın yüksekliği 40, alttaki dosyanın yüksekliği 50 ve ortadakinin ise sayfaya göre değişir.
Diyelim ki sayfanın yüksekliği 600.Bu durumda ortadakinin yüksekliği=600-(40+50)=600-90=510 olur.Bu COLS için de geçerlidir.

Ne kadar çok dosya eklerseniz ROWS değerleri o kadar artar.Ben burada iki dosya eklediğim için ROWS ‘ın iki değerini yazdım.

Eğer 5 tane dosya eklemiş olsaydım ROWS değerlerini şöyle yazmalıydım: ROWS=”a,b,c,d,e” buradaki her harf bir sayının yerine kullanılmıştır.

Dikey Çerçeve Yaratmak

Dikey çerçeve yaratmak için de <FRAMESET> imi içine onun özniteliği olan COLS imi ve değeri kullanılır.Bunu da hatırlamanız gerekir.

Kullanımı:
<FRAMESET COLS=“x,y”>
<FRAME SRC=”dosya adı”></FRAME>
<FRAME SRC=”dosya adı”></FRAME>
</FRAMESET>

Burada da COLS ‘ın değerleri eklenen dosya sayısına göre artar ya da azalır.

Yatay ve Dikey Çerçeveleri Birlikte Kullanmak

Biz tabloları öğrenirken tablo içinde tablo oluşturmayı da öğrenmiştik. Çerçevelerde de çerçeve içinde çerçeve oluşturabilirsiniz. Bu da yine çerçeve kullanmaktan başka bir şey değildir.

Örneğin;üstte bir dosya olsun.altta da iki dosya olsun.

<FRAMESET COLS=”50,*”><!– alt çerçeve başı –>
<FRAME SRC=”sol.html”></FRAME><!– alt sol dosya –>
<FRAME SRC=”sag.html”>/FRAME><!– alt sağ dosya –>
</FRAMESET><!– alt çerçeve sonu –>

</FRAMESET><!–çerçeve sonu –>

Bunun sonucu;

üst dosya

alt çerçevenin sol dosyası

alt çerçevenin sağ dosyası
şeklinde olacaktır.

Çerçevenin Kenarlıklarını ve Renklerini Ayarlamak

Biz tabloya ya da bir resme kenarlığı BORDER imi ile eklemiştik.Çerçevelerde de bu imi kullanacağız.

Kullanımı:
<FRAMESET COLS=”x,y” yada ROWS=”x,y” BORDER=“n”>
<FRAME SRC=”dosya adı”></FRAME>
<FRAME SRC=”dosya adı”></FRAME>
</FRAMESET>

Ancak çerçevelerde oluşturulan kenarlıklar pek hoş görünmez.Kenarlığı yok etmek için BORDER=”0″ yazmanız yeter.Fakat yine de tam olarak kenarlık silinmez.Tamamen silmek için bir de FRAMEBORDER vardır.Bunun değerini de sıfır yapmalısınız.Yani BORDER=”0″ FRAMEBORDER=”0″ yazmalısınız.

Bir çerçevenin kenarlık rengini de ayarlayabilirsiniz.Bunun için BORDERCOLOR imini kullanabilirsiniz.

Kullanımı:
<FRAMESET BORDER=”n” BORDERCOLOR=”renk adı ya da kodu” COLS yada ROWS>

Kaydırma Çubuklarını Göstermek ve Gizlemek

Bazı durumlarda kaydırma çubukları işe yarayabilir bazı durumlarda ise hiç hoş görünmeyebilir.

Kaydırma çubukları için kullanılan öznitelik SCROLLING dir. Bu im <FRAME> iminin içine yazılır.
Kaydırma çubuklarının görünmesi için SCROLLING=“YES”, görünmemesi için de SCROLLING=“NO” yazmalısınız.

Kullanımı:
<FRAMESET COLS yada ROWS>
<FRAME SRC=”dosya adı” SCROLLING=“YES yada NO”>
………………………
</FRAMESET>

Ziyaretçilerin Çerçeveleri Yeniden Boyutlandırmasını Engellemek

Siz çerçeveye müdahale etmezseniz ziyaretçileriniz sayfayı istediği gibi büyütüp küçültebilir.Bu da sayfanızı altüst edebilir.Ama bazen de gerekli olabilir.
Ziyaretçilerinizin çerçeve boyutlarında oynama yapmamaları için <FRAME> imi içine NORESIZE özniteliğini yazmanız yeter.
Eğer ziyaretçilerinizin çerçevenin boyutlarını değiştirmelerini isterseniz hiç bir şey yazmayın.

Linkleri Çerçevelere Hedeflemek

Link konusunda bağlantıları istediğimiz bir yere hedeflemeyi öğrenmiştik. Ve bu hedeflemenin en iyi fark edildiği yerin çerçeveler olduğunu söylemiştik.
Linklerde hedefleme yapmak için TARGET imini ve onun yöneleceği hedefin ismini yazmayı öğrenmiştik.
Çerçevelerde ise yine aynısını kullanacağız.Ama buradaki en önemli şey çerçevelerde biz NAME özniteliğini kullanmıştık.İşte hedef ismini bu isimlerle aynı tutacağız.

Bir örnekle daha iyi anlarsınız.
Bir çerçeve oluşturalım.Bu çerçeve yatay iki dosyadan oluşsun.Soldaki çerçeve sitemizin “Menü” bölümü olsun.Sağdaki ise içeriğin görüntüleneceği bölüm olsun.Ziyaretçi soldaki menülere tıkladığında dosya sağdaki çerçeve içinde açılsın.İşte buradaki tamamen hedeflemenin işi var.

Bunun sonucu:

Çerçevenin adı:sol

Hakkımda şeklinde bir menü başlığımız olsun. (Buna verilecek link şöyle olmalıdır.

<A HREF=”ben.html” TARGET=“sag”>)

Çünkü içeriğin sag isimli çerçevede görünmesini istiyoruz.Hiçbir şey yazmazsak linkin olduğu sayfada açılır.Bu da hiç güzel olmaz.
Diğer linkler
Resimlerim
Fıkralarım

Çerçevenin adı:sag

İçeriğimiz.

İç Çerçeve Yaratmak

İç çerçeve sayfanız yine tek bir sayfa ama bir kaç sayfanın birleşmesinden değil de bir sayfanın sadece eklenmesi anlamındadır.Böyle bir sayfa çerçeveli değil dosya ekli bir sayfadır.

Bu şekilde bir ekleme işinize yarayabilir.Başka bir sitenin sayfası bu şekilde sizin sayfanıza dahil edilebilir. Bazı siteler ücretsiz hava durumu kodları verir.Bu kodlar kendi sitelerinin hava durumu içeriğini sizin sitenize eklerler.Bu da iç çerçevelerle olur.Bu kötü bir şey değil.Bilakis çok güzel bir şey.Bu şekilde başka bir web alanınızdan kendi sitenize ek yapabilirsiniz.

Bu im <IFRAME></IFRAME> imidir.

Yine dosya adresini belli etmek için SRC özniteliği kullanılır.

İsim NAME özniteliğini de kullanabilirsiniz.

Sayfanıza eklenecek dosyanın boyutlarını belirtmek için WIDTH ve HEIGHT kullanabilirsiniz.

Kenarlık eklemek ya da silmek için BORDER imini kenarlık rengi için BORDERCOLOR imini kullanabilirsiniz.

Kaydırma çubuğunu yok etmek için SCROLLING=“NO” var etmek için NO yerine YES özniteliğini kullanabilirsiniz.

Kullanımı:
<IFRAME NAME=“isim” SRC=“dosya adı ve adresi” WIDTH=“n” HEIGHT=“n” BORDER=“2” BORDERCOLOR=“red” SCROLLING=“NO”></IFRAME>

Multimedya(Çokluortam) Hakkında

Çokluortam ‘ dan kasıt müzik ve görüntü’dür.Yani sayfanıza ses ve video dosyaları eklemeniz anlamındadır.

Evet sayfanıza ister arka planda çalan bir ses isterseniz bir video ekleyebilirsiniz.

İsterseniz ses ve videonuza bir link vererek oynamasını sağlayabilirsiniz.Bu durumda arka planda çalmayacak ziyaretçi linke tıkla tıklayarak çalmasını sağlayacaksınız.

Ses ve videolar sayfanıza çok yük getirir ve sayfanızın yüklenmesini zorlaştırır.Tavsiyem sitenizin arka planında bir sesin çalmamasıdır.Bunun yerine dinlettirmek istediğiniz sese link verebilirsiniz.Bu durumda ziyaretçi o linke tıklayarak sesi dinleyebilir.

Tarayıcılar tüm ses ve video formatlarını tanımaz.Bazılarını tanır bazılarını ise tanımaz.

İşte bunların listesi:

.wav

.wma

.au

.avi

.mpg

.mpeg

.mpe

Bu tür video ve ses dosyalarını kullanabilirsiniz.

Sayfaya Ses Gömmek

Sayfaya ses gömerseniz sayfanız sesle birlikte yüklenir(ses yüzünden geç yüklenecektir).Sayfa yüklendiği anda da ses otomatik olarak çalmaya başlar.Bunu isteyebilirsiniz.Bunu yaparken ses dosyasının küçük boyutta olmasına dikkat etseniz iyi olur.

Sayfaya ses gömmek için <EMBED> imi kullanılır.Bu imin bir çok özniteliği de var.

Kullanımı:

Bu durumda şeklinde bir görüntü oluşur.Aynı zamanda da ses çalar.

Böyle bir görüntü hoşunuza gitmeyebilir.Bunu yok etmek için <EMBED> imi içine HIDDEN yazabilirsiniz.

Kullanımı:

Bu şekilde oluşan resmin boyutunu WIDTH ve HEIGHT ile ayarlayabilirsiniz.

Kullanımı:

Sesi istediğiniz kadar çaldırabilirsiniz de bunun için <EMBED> imi içine LOOP=”n” yazmalısınız.

Sayfa yüklendiğinde otomatik olarak çalacağını söyledik.Otomatik olarak çalmaması için <EMBED> imi içine AUTOSATART=”FALSE” yazabilirsiniz. (“TRUE” yazarsanız otomatik çalar.)

Kullanımı:

Eğer HIDDEN da eklemiş iseniz görünmeyecek ve ziyaretçileriniz bir şeye tıklayıp sesi dinleyemeyecek. Eğer sesin otomatik değil de tıklanarak çalınmasını isterseniz HIDDEN yazmamalısınız.

Yada bir link oluşturabilirsiniz.

Sese Link Eklemek

Ses dosyanıza bir link verebilir ve bu şekilde sayfanızı yükten kurtulabilirsiniz.Ziyaretçi verdiğiniz linke tıklayarak sesi dinler.

Kullanımı:

<A HREF=”ses dosyasının adı ve adresi”>Link için resim yada kelime</A>

İsterseniz TARGET özniteliğini de kullanabilirsiniz.

Sayfaya Video Gömmek

Sayfaya video eklemek ses eklemekle aynıdır.Yapacağınız farklı tek şey dosyanın video dosyası olarak değiştirmek olacaktır.Diğer bütün öznitelikler burada da geçerlidir.

Kullanımı:

Video yüzünden de sayfanız geç açılacaktır.Bu durumda video dosyasına link verebilirsiniz.

Video’ya Link Eklemek

<A HREF=”video adı ve yolu”>Video için resim ayada kelime</A> bu kadar basit.

i Formlar Hakkında

Web sitemizi ziyaretçilerimize bir şeyler anlatmaya çalışmak için tasarlarız ve yayınlarız. Sitemizi ziyaret eden ziyaretçilerin sitemiz hakkındaki düşüncelerini almak istemek en doğal hakkımızdır. Sitemizin kaç kişi tarafından ziyaret edildiğini öğrenmek de çabasıdır.

İşte ziyaretçilerimizden istediğimiz bilgileri almak için formları kullanırız. Ziyaretçilerimizden bilgi almanın başka yolu yoktur. Ya bize mail gönderecekler ya da formumuzu doldurup bize göndereceklerdir.

Formlarda ziyaretçilerden alabileceğimiz metin kutuları, düşüncelerini yazabilecekleri metin alanları, seçim yapabilecekleri onay kutuları ve radyo düğmeleri, menüler, şifre girebilecekleri parola alanları ve bu bilgileri gönderebilecekleri bir gönder düğmesi bulunur.

Formlar, ziyaretçilerin gerekli alanları doldurup gönder düğmesine basmaları ile bilgilerin gönderilmesi esasına göre çalışır.

Form bilgilerin size nasıl geleceğini siz belirlersiniz POST ve ya GET metodu bunu belirtir.Bu metotlar PERL/CGI derslerinde ayrıntılı olarak anlatılacaktır.Zaten CGI ‘yı öğrenmeden formları da kullanamazsınız. Bu yüzden formları kullanmak için ayrıca PERL/CGI ‘yı öğrenmelisiniz. Ya da hazır olarak sitelerden ücretsiz alacaksınız.

Formlar daha anlaşılır bir şekilde CGI derslerinde anlatılacaktır.Burada sizin bilmeniz gereken form oluşturma ve öğelerini kullanabilmektir.

Form Yaratmak

Formlar <FORM></FORM> imi ile oluşturulur.

Bir formun bilgilerini hangi yolla göndereceğini belirtmek için METHOD özniteliği ve onun değerleri olan GET ve ya POST kullanılır.

Form bilgilerinin hangi dosyayı kullanarak işleyeceğinizi ve alabileceğinizi belirtmek için ACTION özniteliği kullanılır.

Bir form oluşturalım:

Form öğeleri

</FORM>

Formdaki metotların hangisini kullanmanız gerektiğini PERL/CGI derslerinde öğreneceksiniz.Html bu konunun dışındadır.

Perl/Cgi derslerinde ACTION=”dosya adı ve yolu” kısmını oluşturmanın ne demek olduğunu anlayacaksınız.

Form Öğeleri Hakkında

Form öğeleri her zaman <FORM></FORM> imleri arasına yazılır.

Metin kutusu ziyaretçinizden adını, soyadını, yaşını, doğum yeri ve yılını, mail ve site adresini gibi bilgiler alabilmeniz için kullanılır.

Form öğeleri <INPUT> imi ile oluşturulur.Ancak bu tek başına işe yaramaz.

Bu imin öznitelikleri olan TYPE, NAME, VALUE VE SIZE vardır.

TYPE form öğesinin ne olduğunu belirtir.Metin kutusu mu, radyo düğmesi mi vb.

NAME form öğesinin adını belirtir. Bu scriptleri hazırlarken çok çok fazla önemlidir.Basit bir şey değil yani.

VALUE form öğesinin değerini tutar.Form ile bir isim gönderirsek form öğesinin değeri bu isme göre değişecektir.Forma yazılanlar değerleridir.Biz bu değerleri alırız. Yani VALUE değerlerini alırız.

SIZE özniteliği form öğesinin uzunluğunu beelirtmek için kullanılır.Varsayılanı 25′ tir.

Metin Kutusu Yaratmak

Bu öğenin TYPE ‘ı TEXT tir.

Metin kutusu oluşturmak:

<INPUT SIZE=”uzunluk için bir sayı”> VALUE si yazılmaz.

Form öğesinin türü(TYPE) olan metin kutusunu TEXT ile belirttik.

İsmini ile belirttik.

Örneğin ziyaretçiden ismini öğrenmek istediniz.

Form öğesinin NAME değerini “adsoyad” => olarak verebilirsiniz.

Ziyaretçi de metin kutusu alanına ad soyadı olarak Serkan ASLAN yazsın. Bu durumda VALUE Serkan ASLAN olur. Yani VALUE=”Serkan ASLAN” ama bunu siz yazmayacaksınız.Formun kendisi yapacak.

Parola Kutusu Yaratmak

Bu öğenin türü, ismi istediğiniz bir şey, değeri ziyaretçinin yazdığı.

Kullanımı:

<INPUT NAME=”bir isim yazın” SIZE=”uzunluk için bir sayı”> VALUE si yazılmaz.

Burada ziyaretçinizden şifre istediğinize göre isim özniteliği değerini “sifre”=> yapabilirsiniz.Ziyaretçi şifresini 123456 yazsın.Bu durumda VALUE=”123456” olacaktır.Ama siz yazmayacaksınız.

Metin Alanı Yaratmak

Metin alanı ziyaretçinizden düşüncelerini alabileceğiniz büyük bir metin kutusu gibidir.

TYPE özniteliği yoktur.Bunun kendine has kullanımı vardır.

O da <TEXTAREA></TEXTAREA> dır.

Kullanımı:

İmler arasına bir şey yazılmaz.Hepsi bu kadardır.

NAME kullanımı yukarıdakiler gibidir.Örneğin düşüncelerini alacağınız için yazabilirsiniz.

ROWS dikey büyüklüğü COLS ise yatay büyüklüğü gösterir.

“n” yerine buna göre bir sayı yazın.

Radyo Düğmesi Yaratmak

Radyo düğmesi daha çok anketlerde kullanılır.Küçük yuvarlak şekilleri vardır.

TYPE=”RADIO”

Kullanımı:

<INPUT NAME=”bir isim yazın” VALUE=”bir değer yazın”>seçilecek şey için bir kelime

Burada önemli ve diğerlerinden farklı bir husus vardır.

Radyo düğmelerinde VALUE değeri mutlaka yazılır.Siz yazmalısınız.Ziyaretçi yazmaz sadece sizin yazdığınız seçer.

Radyo düğmeleri anketlerde kullanılır demiştik.Yani birden fazla radyo düğmesi yaratacaksınız.

Yarattığınız radyo düğmelerinin NAME=”” değerleri hep aynı olmalıdır.Farklı olursa her bir radyo düğmesi ayrı ayrı işaretlenebilir.Ama biz seçeneklerden sadece bir tanesinin seçilmesini istiyoruz.Bu durumda NAME değerleri aynı olmalıdır.

Daha iyi anlamak için NAME değerlerini aynı yapın ve deneyin.Sonra farklı yapın ve deneyin.Sonuca canlı olarak şahit olun.

Onay Kutusu Yaratmak

Onay kutusu ziyaretçilerinizden bir şeyin onaylanıp onaylanmadığını öğrenmek için kullanılır.Bunlar da radyo düğmeleri gibidir.NAME değerleri aynı olmalıdır.VALUE değerleri de mutlaka yazılmalıdır.

TYPE=”CHECKBOX”

Kullanımı:

<INPUT TYPE=”CHECKBOX” VALUE=”bir değer”>Onaylanacak şey için bir kelime

Menüler Yaratmak

Menüler ziyaretçilerinizin birden çok seçenekten birini seçmelerini istemenizi için kullanılır.

Bunda INPUT yoktur.Bunun da diğerlerinden farklı bir kullanılışı vardır.

Bunda menü yaratmak için <SELECT></SELECT> imi kullanılır. Seçenekler için de <OPTION> kullanılır.

<OPTION> <SELECT></SELECT> imleri içine yazılır.

Bunlarda da NAME vardır.ve <SELECT> için kullanılır. <OPTION> için kullanılmaz.

VALUE ise <OPTION> için mutlaka kullanılır.

Kullanımı:

<OPTION VALUE=”bir değer”>Seçenek için bir kelime

………………………

</SELECT>

Ziyaretçilerin Dosya Yüklemesine İzin Vermek

Ziyaretçilerinizden sizin web alanına dosya göndermelerini isteyebilirsiniz.Bu bunun için kullanılır.

TYPE=”FILE”

Kullanımı:

SIZE=”n” buradaki “n” dosya yükleme kutusunun yatay uzunluğudur.

Gizli Alanlar Yaratmak

Gizli alanlar formlar için oldukça kullanışlı ve önemlidir. Ama CGI bilmeden hiç bir işinize yaramaz ve kullanılamaz. Bunu anlatmak biraz zor. Bunu size CGI derslerinde daha iyi anlatabilirim. Burada sadece nasıl oluşturulacağını öğreneceğiz.

TYPE=”HIDDEN”

Kullanımı:

Gizli alanların en önemli özelliklerinden bir tanesi VALUE değerini sizin kendiniz vermenizdir.Bu değere göre scriptinizi düzenleyecek ve yapacaksınız.Bu yüzden CGI bilmelisiniz.

Gönder Düğmesi Yaratmak

Ziyaretçileriniz form öğelerine gerekli alanları yazdıktan sonra size göndermeleri gerekir.Bunu da “GÖNDER” düğmesine basarak yapabilirler.

TYPE=”SUBMIT”

Kullanımı:

VALUE değerini yazarsanız göreceksiniz ki gönder düğmesinin üzerine sizin yazdığınız değer yazılacaktır.Bu gereklidir.

SUBMIT düğmesi için NAME özniteliği yazılmayabilir.

Formu Sıfırlama Düğmesi Yaratmak

Eğer ziyaretçileriniz formu göndermekten vazgeçer yada yanlış yapmış da silmek isterse SİL tuşuna basmalıdır.Bunu da sil, vazgeç gibi düğmeler oluşturarak yapabiliriz.Asıl amacı forma yazılan şeyleri tamamen silmektir.Bu durumda ziyaretçi değerleri yeniden yazacaktır.

TYPE=”RESET”

Kullanımı:

RESET düğmesi için NAME özniteliği gerekmeyebilir.

Gönder ve Sıfırlama Düğmeleri İçin Resim Kullanmak

Ziyaretçilerinizin form bilgilerini göndermelerini sağlamak için gönder düğmelerini ilginç yaparak sağlayabilirsiniz. Bunlardan bir tanesi de gönder düğmelerini resim olarak yapmaktır. Yani ziyaretçi resme tıkladığında bilgiler gönderilecektir.

Bunun için INPUT imi kullanılmayacak.Bunun yerine BUTTON</BUTTON> kullanılacak. Ama TYPE, NAME ve VALUE öznitelikleri var.

GÖNDER Düğmesi için Kullanımı:

Yani <BUTTON></BUTTON> imleri arasına bir resim eklemek

Başka bir resimli GÖNDER düğmesi yapımı:

<INPUT SRC=”resim adı ve yolu> Ancak bunu SİL düğmesi için kullanamazsınız.

SİL Düğmesi için Kullanımı:

Form Öğelerini Biçimlendirmek

Form öğelerini biçimlendirerek daha güzel görünmelerini sağlayabilirsiniz.

Bunun için kullanılan im <FIELDSET></FIELDSET> tir.Ancak bu im yalnız kullanılmaz.

Öğeyi tanımlamak için yazılan bir kelimeyi <LEGEND></LEGEND> imleri arasına alırız.Bu imleride <FIELDSET></FIELDSET> imleri içine yazarız.

Kullanımı:

<LEGEND>Form öğesi için bir tanımlama</LEGEND>