Yazan: Emin Yılmaz Üçer Önsöz

21
BÖLÜMDE
WEB SĐTE
YAPIN!
Önsöz
Zor ve zahmetli bir iş olarak görünen web site
yapımını sizler için en kolay şekliyle anlatmaya
çalıştım.
Örneklerimi resimlendirerek sıkıcı sayfa
okumak yerine görerek öğrenmenizi istedim.
Web site yapımına yeni başlayan biri için
gerekli her şeyi yazdığıma inanıyorum fakat yinede
eksiklerim olabilir. Bana bunları bildirmenizi rica
ederim.
Kitabımı zevk alarak okuyacağınız
düşünüyorum. Eğer beğenirseniz ikinci bir sürümünü
çıkarabilirim.
Kitabı okuduktan sonra ne kadar çok şey
öğrendiğinizi anlayacaksınız.
Sizi kitapla baş başa bırakıyorum :)
Yazan: Emin Yılmaz Üçer
Emin Yılmaz Üçer
1
ĐÇĐNDEKĐLER
BÖLÜM–1 – WEB SĐTESĐ NEDEN YAPILIR? -------- 3
BÖLÜM–2 – NASIL BAŞLAYACAĞIM? ----------------3
BÖLÜM–3 – BAŞLIYORUZ! ---------------------------3
BÖLÜM–4 – ĐLK WEB SAYFAM ----------------------4
BÖLÜM–5 – TAG KAVRAMI VE DĐĞER TAGLAR ----8
BÖLÜM–6 – GĐRĐŞ SAYFAMIZI YAPIYORUZ ---------12
2
21 BÖLÜMDE WEB SĐTE YAPIN
GĐRĐŞ
Başlangıç olarak şunu söylemek isterim. Bu kaynağı benim
çektiğim sıkıntıları çekmemeniz için yazdım. Bunun için elinizdeki bu
kitap gerçekten çok değerlidir. Bu kaynağın bir nevi benim okuduğum
onlarca kaynağın birleşimi de sayabilirsiniz. Ben inanıyorum ki bu
kaynakta aradığınız her şeyi bulacaksınız. Şimdi arkanıza yaslanın demem
biraz saçma olur. Çünkü bir şeyler yapmak için bu kaynağı okuyorsunuz.
Bu yüzden diyorum ki bilgisayarınız açık bir şekilde derslerimizi takip edin
ve yaptıklarımızı birebir ve etkili yapma şansı bulun.
BÖLÜM–2 – NASIL BAŞLAYACAĞIM?
Burayı okumaya karar verdiyseniz demek ki sizde bir web sitesi
tasarlamak istediniz. Merak etmeyin sandığınız kadar zor değil web sitesi
yapmak. Hatta hiç zor değil. Öncelikle plan ve program gerçekten çok
önemli, plansız işe koyulursanız sonunda saçma sapan bir siteniz olur.
Bunu önlemek için şimdi elinize bir kâğıt kalem alarak sitenizin tasarımını
ve içeriğini kâğıda dökmeye başlayın. Bunu yaparken aşağıdaki ölçütlere
dikkat edin.
1-Sitemin içeriği ne hakkında olacak?
2-Siteme ekleyeceğim içerikler nasıl gruplanacak?
3-Bağlantılar bir biriyle nasıl ilişkilendirilecek?
4-Anasayfam da nelere yer vereceğim?
5-Sitemi güncelleme imkânım için nasıl bir plan yapmalım?
HEPĐNĐZE BAŞARILAR DĐLERĐM
EMĐN YILMAZ ÜÇER : e-mail to :
Đşte bu gibi soruları cevaplayarak siteniz için gerekli planlamayı
yapın çünkü artık başlıyoruz.
[email protected]
BÖLÜM–1 – WEB SĐTESĐ NEDEN YAPILIR?
Eminim hepimiz yaptıklarımızı, tasarladıklarımızı,
ürettiklerimizi başkalarıyla paylaşmak isteriz. Yâda işlerimizin çok çabuk
olabilmesi için interneti tercih ederiz. Düşünsenize size ait kişisel bir web
siteniz var. Bu web sitesinde ise sizin hakkınızda yazılar, işiniz ile ilgili
dokümanlar ve onlarca bilgi mevcut. Birde konuları tartışmak için foruma
da sahipseniz sitenizin alacağı hiti ne siz sorun ne ben söyleyeyim:)
Evet, gerçekten güzel şeyler bunlar. Arkadaşlarınızın bir
web sitesi varken ve size de sürekli sitesini ziyaret etmenizi söylerken.
Neden benimde bir web sitem olmasın demediniz mi? Gelin bu sıkıntınızı
çözelim. Herkesin basit web tasarımından öteye gidelim, artık sizinde bir
web siteniz olsun ne dersiniz?
BÖLÜM–3 – BAŞLIYORUZ!
Hemen başlayalım….! :)
Sitemizi planladıysak gruplandırmalar yapalım. Gruplandırma
sitemizdeki farklı içerikleri birbirinden ayıran bir sistem. Bu şekilde
sitemizi daha çabuk güncelleyebiliriz. Pekâlâ, gruplamayı nasıl yapacağız?
Evet, cevabı çok basit öncelikli olarak herhangi bir dizine ‘Web Sitem’
adında bir klasör oluşturun. Bu klasörde bizim web sitemiz olacak. Sonra
içerisine sitenize ekleyeceğiniz içerik için gerekli klasörleri ekleyin.
Bunlar ; “Resimlerim, Müziklerim, Programlarım, Dokümanlarım,
Verilerim” gibi isteğe bağlı olabilir.
3
Daha sonra
Tamam
butonuna
tıklayarak
Notepad’i
açın.
Bildiğiniz bu
program şuan
için işimizi
görecek
nitelikte
kullanımı da
oldukça basit.
Yukarıdaki resimde görüldüğü gibi sizde basit bir şekilde
gruplandırma yapabilirsiniz. Bu şekilde web sitemizde yayımlayacağımız
resimleri bu dizindeki ‘Resimlerim’ klasörüne atacağız.
Bu boş sayfaya yazacağımız kodlar bizim ilk web sayfamızın
oluşmasını sağlayacak. Şimdi Notepad’in menüsünden Dosya>Kaydet
seçenekleriyle kaydetme penceresini açın. Kaydedeceğiniz dizini az önce
açmış olduğumuz ‘Web Sitem’ adlı klasörün içerisine “Anasayfa.html”
adıyla kaydedin. Dikkat .html’i unutmayın. Çok önemlidir. Çünkü web
siteleri html uzantılıdır. Html (Hyper Text Markup Language –Hiper Metin
Biçimlendirme Dili) bir işaretleme dilidir. Kullanmış olduğumuz
browser’lar html kodlarını bizim anlayacağımız biçime çevirir.
Şimdi ilk web sayfamızı hazırlayacağız. Bunun için diğer bölüme
geçin.
BÖLÜM–4 – ĐLK WEB SAYFAM
Web sayfamızı hazırlamamız için bize bir metin editörü
gereklidir. Biz şimdilik Windows altında olan NotePad ile işimizi
göreceğiz. Daha sonra Office Pro paketiyle gelen Front Page 2003 ‘ü
kullanabiliriz. Eğer maddi durumunuz elverişli ise piyasada bulunan web
editörlerini kullanabilirsiniz. En çok tercih edilen ise Adobe firmasının
Dreamweaver ürünüdür. Bu ürünü internetten sipariş vererek
getirtebilirsiniz.
Notepad’i açmak için Başlat>Çalıştır komutlarıyla gelen
pencereye ‘Notepad’ Yazın.
Beklide buna ne gerek var diye düşünebilirsiniz. Ama birde şu yönden
düşünün; nasıl Đngilizce dünya dili ise nasıl nereye gitseniz onunla
4
anlaşabilirseniz buda ona benzer. Web bir dünya ise web’deki bilgilerde
birbirleriyle html diliyle konuşurlar. Hem bu daha sağlıklıdır. Eğer Web
site yapmak basit birkaç metin eklemek olsaydı bunun bir anlamı
olmazdı. Web Sayfaları kullanıcı-sunucu arasında iletişim kurar. Neyse
konu dışına çıkmayalım. Eğer boş sayfayı dizinimize ‘Anasayfa.html’
adıyla kaydettiyseniz şimdi o dizini açalım.
Hazırlanmış oldu ama içerisinde bir şey yok(şu an). Şimdi bu belgeye çift
tıklayarak açın.
Gördüğünüz gibi Web Sitem adlı sitemizin bulunduğu klasörde bir web
dosyası oluştu. Simgesinden anlamış olmalısınız. Eğer tereddüdünüz varsa
dosyaya sağ tıklayıp özellikler komutunu vererek belgenin bir HTML
Document olduğunu ve bu dosyayı açmak için Internet Explorer
Programının atandığını göreceksiniz. Evet, işte ilk web sayfamız böylece
5
Görmüş olduğunuz Internet Explorer ve boş bir sayfa.
Şimdi burayı biraz dolduralım ve ilk HTML kodlarımızı yazalım. Hemen
Web Sitem klasörüne gidip kaydetmiş olduğumuz ‘Anasayfa.html’ adlı
belgeye sağ tıklayıp Birlikte aç seçeneğinden Notepad’i seçelim.
Böylece az önce kaydetmiş olduğumuz boş belgeyi tekrar açmış odluk.
Đlk kodlarımızı aşağıdaki gibi yazın ve Dosya menüsünden kaydet
komutunu vererek tekrar kaydedin.
6
Kaydettiyseniz tekrar Web Sitem dizinine giderek ‘Anasayfa.html’
dosyasını açın.
Tebrikler ilk web sayfamızı yazmış oldunuz. Çok uzatmadan kodlarla ne
yaptığımıza bakalım.
Arkadaşlar html kodları <></> ifadeleri içerisine
yazılırlar. Bunlara Tag denir.
<tag></tag>
<tag> ifadesi o tagın başladığını
</tag> ifadesi ise o tagın bittiğini gösterir.
Html’den sadece birkaç tag bitirilmez.
Komutlara gelecek olursak.
<html></html> ile Browser’a bunun bir web sayfası olduğunu söyledik ve
tüm web sayfasını bu tag içerisine yazdık.
Ardına gelen <head>/<head> ifadesini bazı özel kodlar için kullanırız.
<title></title> ifadesi ise browser’in sol üst köşesine yani başlık çubuğuna
istediğimiz metni yazdırmak için kullanılır. Örnekte <title>Đlk Web
Sayfam</title> ifadesiyle oraya ‘Đlk Web Sayfam’ yazdırmış olduk.
<body></body> tagı vücut tagıdır. Yani sayfada görünecek tüm ögeler
buraya yazılır.
<br> ifadesi bir alt satıra geçmeye yarar. Eğer orada <br> ifadesini
kullanmasaydık. Metnimiz;
Merhabalar,Sayfama hoş geldiniz…!
Şeklinde olurdu.
Açtığımız tagları </> ifadesiyle bitirip sayfamızı çalıştırdık.
7
BÖLÜM–5 – TAG KAVRAMI VE DĐĞER TAGLAR
Tagların nasıl kullanıldığını söylemiştik ama yeri geldi bir
daha söyleyeceğiz. Taglar hakkında bilmemiz gerekenler şunlardır.
1- Taglar <></> ifadeleri ile kullanılırlar.
2- <></> ifadeleri arasına aldıkları değerleri etkilerler.(Bazı
taglar hariç)
3- Taglar kapatılmasa altında bulunan bütün satırları etkiler.
Buna bir örnek verecek olursak; Örneğin <center></center>
tagı nesneleri ortalamak için kullanılır. Eğer sitenizi
kodlarken en başında böyle bir tag açarsanız ve kapatmayı
unutursanız sayfa sonuna kadar eklemiş olduğunuz
nesneler(metinler, resimler, formlar, tablolar) sayfanın
ortasında görünecektir.
Örneğin <b></b> tagları arasına yazılan metin kalın ,<i></i>
tagları arasına yazılan metin italic, <u></u> tagları arasına
yazılan metin ise altı çizili görünecektir.
Yukarıda ki çıktıyı elde
etmek için Web Sitem adlı
dizindeki Anasayfa.html adlı
dosyayı Notepad ile açın ve
yukarda vermiş olduğumuz kodları yazarak kaydedin. Bu sayfayı IE
ile açarsanız yandaki çıktıyı alırsınız.
Bu kodları az önceki g gibi Anasayfa.html dosyasının içerisine
yazarak kaydedin.
8
4- Taglar parametreler alırlar. Parametre o tagın bazı
özelliklerini içeriri. Örnek olarak <body> tagının bazı
parametreleri vardır. Bunlar sayfanın zemin rengi, yazının
rengi gibi temel vücut özellikleridir.
Fakat </center> kodunu ‘<u>Bu Yazı Altı Çizili</u><br>’ ifadesinden önce
yazarsanız çıktı aynen aşağıdaki gibi olacaktır.
Yukarıdaki kodları yine Anasayfa.html dosyasını açarak içersine
yazın ve Dosya>Kaydet komutundan dosyayı kaydedin. Sonra
Anasayfa.html dosyasını IE(Internet Explorer) ile açın.
Kodlara dikkat edin.
<body text=red bgcolor=black> body tagı parametre almıştır.
Text parametresi metinin rengini Bgcolor parametresi ise
9
zeminin rengini belirler. Örnekte bu değerler kırmızı ve siyah
olarak verilmiştir.
Sonuç olarak çıktıyı aldığınızda aşağıdaki gibi bir sayfa
karşınıza çıkacaktır.
Kırmızı :
Sarı :
Mavi :
Yeşil :
Siyah :
Beyaz :
Kahverengi :
Gri
#FF0000
#FFFF00
#0000FF
#80FF00
#000000
#FFFFFF
#804040
#C0C0C0
Yukarıdaki tabloda bazı renklerin onaltılık sistemdeki
değerleri verilmiştir.
Eğer BgColor özelliğindeki değeri yellow yaparsanız sayfa
aşağıdaki gibi olacaktır.
Bu şekilde kolayca sitenizdeki zemin rengini ayarlayabilirsiniz.
Renk adları yerine onların 16 sistemdeki (Hexadecimel)
değerlerini de girebilirsiniz.
<body text=#FF0000 bgcolor=#0000FF> Şeklinde.
Sayfa zeminimize renk ekleyebileceğimiz gibi resimde
ekleyebiliriz. Bunun için <body> tagına ‘background’
parametresini eklemeliyiz.
10
Örnek için Web Sitem adlı klasörümüzdeki Resimlerim adlı dizine
istediğiniz bir resimi ekleyin.
Buradaki dizin Resimlerim/arma3.gif olarak geçerlilik kazandı.
Şimdi bunu web sayfamıza eklemeyi görelim.
Bu şekilde istediğiniz imajı web sitenizin arka planı olarak
ayarlayabilirisiniz. Ama dikkat dizin önemli. Hatırlarsanız ‘Resimlerim’
dizinini sistemiz de kullanacağımız resimler için oluşturmuştuk.
Kullanırken ‘Reimlerim/resimadi.uzantısı’ şeklinde kullandık.
Tag kullanımını genel itibariyle anlamış ve bazı taglar öğrenmiş
olduk. Şimdi ise yavaş yavaş aansayfamızı yani girişimizi hazırlamaya
başlayalım.
11
BÖLÜM–6 – GĐRĐŞ SAYFAMIZI YAPIYORUZ
Bilirsiniz her web sayfasının bir giriş yani anasayfası vardır.
Ziyaretçiler sitenize ilk girdiklerinde site hakkındaki değerlendirmeyi
anasayfanıza göre yapacaktırlar.
Güzel, estetik, kullanışlı bir anasayfa ziyaretçinin sitenize çabuk
alışmasına yardımcı olacaktır. Şu an için ihtişamlı bir giriş sayfası
oluşturmayacak olsak da ileride daha iyi web siteleri hazırlamanıza
yardımcı olacak bir örnek yapacağız.
Öncelikli olarak sitenize de kullanacağınız resimleri ‘Resimlerim’
klasörüne atın. Bu resimleri sitenizde kullanabilirsiniz.
Sitemizi kodlamak için Web Sitem adlı dizinde ki Anasayfa.html
adlı dosyayı Notepad ile açın. Eğer gerekli temel tagları öğrendiyseniz bir
yere bakmadan kendiniz yazmaya çalışın.
Öncelikli olarak sitemizin zeminini belirleyelim. Eğer zeminde
renk kullanacaksak <body> tagının Bgcolor parametresiyle istediğimiz
rengi kullanabiliriz. Yok ben zeminde resim kullanacağım diyorsanız yine
<body> tagının background yani arka plan parametresini kullanarak adresi
belirtilen resmi web sayfanızın zeminine döşeyebilirsiniz.
Eğer sitenizin zemin düzenini hallettiyseniz kendinizi veya sitenizi
anlatan bir logo veya resimi yine Web Sitem dizinindeki Resimlerim adlı
klasörün içerisine kopyalayın. Bu sayede sitenize girenler siteniz hakkında
erkenden bilgi sahibi olmuş olacaklar.
Eğer logonuz hazırsa sizi ve sitenizi kısa ve öz bir şekilde
anlatacak bir slogan bulun. Bunu da resmimizin altına veya yanına
yazabiliriz.
Eğer hazırsanız başlayalım kodları yazmaya. Hem böylece yeni
kodlar ve taglar öğrenmiş olacağız.
Notepad’iniz açıksa aşağıdaki kodları yazın ve Web Sitem
dizinindeki Anasayfa.html dosyasının üzerine kaydedin.
12
Evet, belki basit ve kötü bir tasarım olmuş olabilir. Ama daha
yolun başındayız. Hemen yeni kodlarımızı inceleyelim.
<img> tagı sayfamıza resim eklemek için kullanılır. Dikkat
ettiyseniz kapatılmayan bir tagdır. Src parametresiyle eklenecek
resmin yolunu yani dizinini alır. Aling parametresi ise resmin
düzenin ayarlamamıza yarar. Örnekte aling=”left” diyerek resmi
sola yatık bir hale getirdik. Width parametresiyle resmimizin
genişliğini ayarlayabiliriz. Genişliğini ayarladığımızda resmimizin
yüksekliği yani heigth parametresi de gerekli değeri alır.
BÖLÜM–7 – YAZILARLA ÇALIŞMAK
Sayfaya yazı yazabilmek için <body> tagının içerisinde olmanız
gerekir. <body> tagından sonra yazdıklarınız ekranda görünecektir.
Yazı yazmak için <font> tagını kullanabiliriz. Bunun yanında <h>
taglarını da kullanabiliriz.
Şimdi bir örnek ile bunu daha da pekiştirelim.
<font> parametresi ise web sayfamızda belli özellikler içeren özel
yazıları yazmamıza yarayan bir tagdır. Bu tagı zaten ilerde
detaylı işleyeceğiz. Burada dikkat etmemiz gerek ise
<font></font> tagları arasından olan metinin belirtilen
parametrik değerlere sahip olmasıdır. Font tagının aldığı
değerler; font tipini belirlememize yarayan face tagı, boyutunu
ayarlayan size tagı, rengini belirlememize yarayan color tagıdır.
<b><i><u> <br> taglarını daha önceden anlatmıştık.
Burada yeni gördüğümüz bir tag ise <hr> tagıdır. Bu tag sayfaya
yatay çizgi atmamıza yarar. Aldığı parametreler ise çizgimizin
özelliğini belirtir. Color parametresi rengini size parametresi ise
kalınlığını gösteriri. Bu tagda kapatılmayan taglar arasındadır.
Yavaş yavaş sizde karmaşık web sayfaları hazırlamaya başladınız.
Az önce hazırladığımız giriş sayfasını sadece örnek amaçlı yapmıştık. Eğer
ne yaptığımızı gerçekten çok iyi anladıysanız kendinize yeni bir giriş
sayfası hazırlayın.
13
Yukarıdaki kodları boş bir sayfaya yazarak yazi.html olarak
kaydedin. Sonra kaydettiğiniz dizine giderek bu dosyayı bir
browser açın. Yaptıklarımızı inceleyin. Kodlar arası bağlantı
kurmaya çalışın.
<p align=right>Sayfanın Sağından Yazılmış Bir Metin</p>
Bu şekilde kullanırsanız aling parametresinin almış olduğu değere göre
düzenleyebilirsiniz.
Yukarıda ki sayfanın kodu da oldukça basittir.
<p align=right>Sayfanın Sağından Yazılmış Bir Metin</p>
<hr>
<p align=center>Sayfanın Ortasında Yazılmış Olan Bir Metin</p>
<hr>
<p align=left>Sayfanın Solundan Yazılmış Bir Metin</p>
Gördüğünüz gibi <font> tagıyla sadece renklerini ve yazı tiplerini
belirlemiş olduk. Boyutlarını ise <h> taglarıyla sağladık…
Eğer toplu biçimlendirme yapmak istiyorsanız <DIV> tagını
kullanabilirsiniz. <DIV aling=”center”><p>Her Paragraf Ortada</p></DIV>
<p></p> Tagını kullanarak da paragraf açabiliriz. Hatta bu paragrafa ait
özellikleri bile belirtebiliriz.
14
Bu şekilde sayfanızın istediğiniz köşesini kullanabilirsiniz. Yine bu
tagların başlarına ve sonlarına <font> tagı getirerek yazılarınızı
renklendirip, boyutlandırabilirsiniz.
Artık yavaş yavaş sizde birere webmaster oluyorsunuz. Ama
sizden bir ricam var. Lütfen burada gördüğünüz örneklerle
yetinmeyin ve kendinizde işlenen konuyla ilgili bolca alıştırma
yapın. Bu sizin için hem çok faydalı hem de bir pratik olur.
<font face= "Arial" color=#FF0000 size=5><p align=left>Sayfanın
Soluna size=5 büyüklüğünde Arial ile yazılmış kırmızı bir
yazı</p></font>
<small>Küçük bir Metin</small> ifadesiyle da sayfanıza küçük
metinler ekleyebilirsiniz.
BAZI ÖZEL YAZI BĐÇĐMLENDĐRME ÇEŞĐTLERĐNĐN TABLOSU
<br></br>
<i></i>
<u></u>
<strike></strike>
<sub></sub>
<sup></sup>
<tt></tt>
<big> & <small>
Kalın Yazı Yazar
Đtalic Yazı Yazar
Altı Çizili Yazı Yazar
Üstü Çizili Yazı Yazar
Đndisli Yazı Yazar
Üstel Yazı Yazar
Daktilo Yazı Yazar
Büyük ve Küçük Yazı Yazar
<b>Kalın Yazı</b>
<i>Đtalik Yazı</i>
<u>A.çizili</u>
<strike>Ü.Çizili</strike>
H<sub>2</sub>O
10<sup>20
<tt>Daktilo Yazı</tt>
<bilg>Büyük Yazı</big>
<small>Küçük
Yazı</small
Satır başlarını iptal etmek için ise <nobr> tagı kullanılır. Bu tagın
aldığı değer ne kadar uzun olursa olsun satır atlama
olmayacaktır.
Web sayfamıza da yazılar kullanmayı, yazılara biçim, renk, boyut
vermeyi, boyutlu yazılar ve başlık için kullanılan <h> taglarını,
paragraf atmayı ve diğer özel yazı çeşitlerini inceledik.
Bu ders ile artık sizde web sitelerinizde özgürce yazılar yazıp
kullanabilirsiniz.
15
BÖLÜM–8 – LĐNKLER-(BAĞLANTILAR)
Linkleri bilirsiniz. Internet sitelerine girdiğiniz zaman bazı
etkileyici yazılar görürsünüz. Genellikler bu yazılar üzerilerine
gelindiklerinde renk veya biçim değiştirirler eğer farenizi üzerinden
çekerseniz tekrar eski halini alacaktır.
Evet, bu işlemleri yapan unsur linktir. Linkler web sitenizdeki
sayfaları birbirine bağlayan araçtır. Kullanımları da oldukça basittir.
Şimdi Web Sitem klasörümüzü açalım ve Dokumanlarım adlı
klasörümüzün içerisine Notepad yardımıyla “dokuman.html” adında bir
internet dosyası oluşturalım. Tabi bu boş bir sayfa hemen içerisine
aşağıdaki kodları yazıp kaydedelim.
Şimdi Anasayfa.html sayfasından
bir link vererek kullanıcıları bu
sayfaya yönlendirmeye
çalışacağız.
Link oluşturmak için tekrar
anasayfa.html ‘i notepad ile
açın ve güzel bir giriş sayfası
hazırlayın. Farz edin ki sitenizde
dokümanlar diye bir bölüm var
kullanıcılarda bu dokümanlara
ulaşmak istiyor. Ne yapardınız.
Elbette anasayfaya okunaklı bir
link koymak en mantıklısı
olurdu. Öyleyse bizde öyle
yapalım.
16
Eğer kodlarımızı yazdıysak Anasayfa.html dosyasını açın.
Linke tıklarsanız dokuman.html sayfasına gittiğinizi göreceksiniz.
Evet, işte ilk linkimizi yapmış olduk. Bunu yaparken <a href></a>
taglarını kullandık.
<a href=”Gitmek istediğiniz sayfa”>Linkin Adı</a>
Şeklinde kullanabiliriz. Burada href bir parametredir ve linkin
hangi sayfaya yönleneceğini tutar.
Eğer linkin fontunu değiştirmek isterseniz <font></font> tagları
arasına alabilirsiniz.
Linklerin bazı durumları vardır. Bunlar ;
1- Linkin üzerine gelinince
2- Linke tıklanınca
3- Tıklanıldıktan sonra
Bunlar ise <body> tagına girilecek olan alink,vlink ve link
parametreleridir.
<body bgcolor=Red link=#800080 alink=#FFFF99 vlink=#99FF66>
Bu parametreler sayfada bulunana linkerin renklerini ayarlamaya
yarar.
Bu şekilde sayfanızdaki linkleri renklendirebilirsiniz.
•
•
•
link: Bağlantıların tıklanmamış rengini belirler.
alink: Bağlantıların tıklandığı sürece rengini belirler.
vlink: Bağlantıların tıklandıktan sonraki rengini belirler.
<a></a> tagı ile açılan sayfa ayrı bir pencerede de açılabilir.
17
Eğer istersek linkleri kısa yol tuşları kullanarak da
açabiliriz. Bunu yapabilmemiz için ACCESKEY özelliğini
kullanmamız gerekir.Bu özellik sadece
ALT+.. Tuşu ile kullanılabilir.
<target> : Sayfanın açılacağı yeri belirler.
Açılacak sayfa;
yeni bir sayfada açılacaksa;
“_blank”,
aynı pencerede açılacaksa; “_self”.
Kullanılışı:
<a href="http://www.google.com.tr" target=“_blank">
Tıklandığında farklı sayfa da açılacak </a>
<a href=“http://www.google.com.tr “ ACCESKEY=“kısa yol
tuşu”> </a>
Değerini bir boş sayfaya uygulayın.
Linkler Đçin Sekme Sırası Ayarlamak
•
Sekme sırasını <a> nın TABĐNDEX özelliği ile ayarlarız.
Kullanımı:
<a href=“http://www.google.com.tr “ tabindex=“sekme sırası
1,2 gibi” > </a>
Sayfanızdaki linklerden dosyalarınızı da ekleyebilirsiniz. Örnek olarak
programlarım klasörünüzün içerisine bir dosya yerleştirin. Sayfada bu
dosyaya link vermek için;
<a href=”Programlarım\dosya_adi.uzantısı”>Donwload<a/>
Đsterseniz bunu bir örnekle gösterebiliriz.
Öncelikle Web Sitem dizinindeki ‘Programlarım’ klasörüne bir program
veya dosya atın. Sonra kendiniz Programlar sayfasını hazırlayın ve
Anasayfadan buraya bir link verin. Artık kullanıcılar bir program veya
dosya indirmek için bu linke tıklayacaklar ve Programlar sayfasına
yönlendirilecekler.
Şimdi ise Programlar sayfasında downlaod edilebilen programın veya
belgenin linkini verelim.
18
Dosyayı kaydettiğinizde.
Linke tıklarsanız.
19
BÖLÜM–9 – TABLOLAR
Tablo verilerin gruplandırılarak gösterildikleri yerdir. Türüne göre
değişebilir. Örneğin bir web sitesindeki tablolar bir hesap tablosundan
farklı olabilir.
Tablolar satır ve sütunlardan oluşturlar. Yatay sırlara satır dikey
sıralara sütun denir.
Html’de tablo yapmak için <table></table> komutu kullanılır. Bu
komut sadece sayfaya burada bir tablo olacağını bildirir. Bu komutla
birlikte yine bu komutun içersine satır ve sütun oluşturmak için <tr> ve
<td> tagları kullanılır.
•
•
<tr></tr> : Satır yapmak için kullanılır.
<td></td> : Sütun yapmak için kullanılır.
Eğer hazırsanız ilk
tablomuzu yapalım.
Hemen bir boş sayfa
açıp istediğiniz bir ad
vererek .html
uzantısıyla kaydedin.
Yani boş bir web sayfası
oluşturmuş olduk. Şimdi
onu Notepad ile açarak
yandaki kodları girin ve
kaydedin.
Bu kodları kaydettiğiniz
dizine gidip sayfayı
tarayıcınız ile açın.
Görmüş olduğunuz gibi
2 satır ve tek sütundan
oluşmuş bir tablo.
NOT: <!-- -->
arasına yazılan
metinler
görüntülenmez.
Sadece yorum
yazısıdır.
Border özelliği
ise tablonun
kenarlarının
görünür olmasını
sağlar.
Şimdi ise 2 satır
ve 2 sütundan
oluşan boş bir
tablo yapalım.
Yandaki kodları
bir sayfaya yazın
ve uzantısı .html
20
olacak şekilde kaydedin.
&nbps ifadesi html’de
boşluk bırakmak için
kullanılır. Bizde
tablomuzda ki satırlarda
3 boşluk bırakmak için
kullandık.
<tr> ve <td> taglarının
nasıl kullanıldığını
öğrenmiş olmalısınız.
Đlk başta satır açıyoruz.
Sonra o satıra kaç tane
sütun yapacaksak o kadar
<td> tagı açıyoruz.
Metinleri ise <td> tagları
arasına yazıyoruz.
Tablomuz bittikten sonra
</table> ifadesiyle tagı
kapatıyoruz.
Dikkat ettiğiniz gibi <table border> tagı bir parametre almıştır.
Evet, <table> tagıda parametreler alır. Hadi gelin bu
parametrelere birlikte bakalım.
•
Tablonun Boyutlarını Belirlemek
Tablonun boyutlarını belirlemek için; WIDTH ve HEIGHT
parametreleri kullanılır.
Bu parametreleri daha öncede görmüştük. Width eni, Height ise
boyun değerini belirleyen parametrelerdir.
Bu parametreleri <table> tagına yazarak kullanabiliriz. Bunun için
aşağıdaki örneği inceleyelim.
<table width=100 height=100 border=1> ifadesine bakalım.
Width yani tablomuzun eni piksel cinsinden 100 olarak
boyutlandı. Heigth yani tablomuzun uzunluğu (boyu) piksel
cinsinden 100 olarak boyutlandı. Böylece 100x100 boyutlarında
kare bir tablo çizmiş odluk.
21
<tr>
<td> hucre1</td>
<td> hucre2</td>
</tr>
<tr>
<td> hucre3 </td>
<td> hucre4</td>
</tr>
Bu şekilde width ve height parametrelerini nasıl kullanacağımızı
öğrenmiş olduk.
Tablolarımıza kenarlık da ekleyebiliriz. Hatta bu
kenarlıklara renk bile verebiliriz. Bunun için <table> tagına
border parametresini ekleriz.
•
Đfadeleriyle tablomuza satır ve sütunlar ekledik. Oluşan her
odacığa da hücre dedik.
•
Kullanımı:
<table border=“n”> (n yerine istediğiniz değeri
verebilirsiniz.)
Kenarlığın olmaması için değer olarak 0 yazılabilir. Kenarlığın
rengini de belirleyebiliriz.
Kullanımı:
<table bordercolor=“yellow” >
<table width=100 height=100 border=10>
Borde yani kalınlığı 10 olan bir tablonun
şekli yandaki gibi olur.
<table width=100 height=100 border=3 bordercolor=blue>
Border yani kalınlığı 3 ve bordercolor
Yani kenarlık rengi mavi olan bir
tablo şekildeki gibi olur.
Ayrıca hangi dış kenarlığın görünüp / görüntülenmeyeceğini
seçebiliriz. Bunun için frame parametresini <table> tagına
mutlaka border parametresiyle kullanmalıyız.
22
•
•
KULLANIMI:
Hangi Kenarlığın Görüntüleneceğini seçmek için ise frame yerine
Rules ve değerleri kullanılır.
<table border frame=“yok edilmesi istenen kenarlık değeri”>
KULLANIMI:
FRAME DEĞERLERĐ
<table border rules=“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ık için.
VSIDES: Üst ve alt kenarlık için.
RHS: Sağ,üst ve alt kenarlık için.
LHS: Sol,üst ve alt kenarlık için.
<table width=100 height=100 border=3 bordercolor=blue
frame=void>
Yukarıdaki kodu bir parametreleri bir
tabloya
Girerseniz yandaki tabloyu elde edersiniz.
Gördüğünüz gibi frame=void yani üst, alt,
sağ, sol kenarlıkları yok etmek için
kullanılan bir parametre ve değer var.
Örneğin Above değeri aşağıdaki gibidir.
ABOVE :
RULE DEĞERLERĐ
•
•
•
NONE: Tüm iç kenarlıklar için.
ROWS: Dikey iç çizgiler için.
COLS: Yatay çizgiler için.
•
KULLANIMI:
<table border rules=“none, rows ,cols”>
Sadece biri kullanılır. Đsterseniz frame ve rules imleri birlikte
kullanılabilir.
<table border frame=“void” rules=“cols”>
Şimdi ise yandaki örneğe
bakalım. Bazı yeni
parametreler dikkatinizi
çekmiştir.<table> tagı
tabloya ait özelliklerin
belirlendiği tagdır. Bu
yüzden tabloya ait renk,
uzunluk, kalınlık vb. ayarlar
bazı parametrelerle yapılır.
Yeni olarak gördüğünüz
cellpadding parametresi;
tablo içerisine koyacağımız
metin veya resimlerin tablo
kenarlarından ne kadar
uzakta olacağını belirtir.
23
Cellspacing parametresi ise her hücre arasında ne kadar uzaklık olacağını
belirtir. Bgcolor ise tablonun zemin rengini belirler.
Yukarıdaki kodları .html uzantısıyla kaydettiğinizde aşağıdaki gibi bir
sonuç alırsınız.
<table> tagı parametre alacağı gibi <tr> ve <td> tagları da parametre
alabilir. Daha etkili tablolar oluşturmak için bu taglara colspan vet
rowspan parametreleri eklenebilir.
Kodları incelerseniz <div> düzenleme tagını görürsünüz. Bu tag arasına
aldığı tüm değerleri toplu düzenlemeye alır. Örnekte tablomuzu
ortalamasını istedik.
Cellpadding ve cellspacing ile tablomuzun içerisinden bulunan metinleri
tablo kenarlarına göre ne kadar uzakta olacağını belirledik.
<td> tagının aldığı parametre olan colspan komutuyla satırları
birleştirdik. Gördüğünüz gibi 2 satırda bu komutu kullanmadığımız için
hücreler birbirinden ayrılar.
24
Rowspan komutunu kullanarak da sütunları birleştirebiliriz. Az önceki
kodları şu şekilde düzenlersek farkı anlayacaksınız.
Burada dikey sütunlardan bir tane yazarak 2 sütuna da indirmeye çalıştık.
Tablolar hücrelerden oluştuğu için hücrelere ait özeliklerde
belirleyebiliriz. Buda yüne <td> tagının alacağı bazı özel parametrelere
bağlıdır.
25
Gördüğünüz gibi <td> tagının aldığı bgcolor parametresiyle sadece o
sütuna ait rengi mavi yapmış olduk.
Ayrıca <td> ifadesinden sonra <font> tagını kullanarak hücre içerisine
istediğimiz tarz, renk ve biçimde yazılar yazdık.
</td> ifadesinin hemen adlına
<td>
Buranın zemin rengi beyaz
</td>
Đfadesinin eklerseniz sonuç aşağıdaki gibi olacaktır.
Bu değerleri aynı zamanda <tr> yani satır tagı içinde kullanabilirsiniz.
Hücrelerin yükseklik ve genişliğini piksel cinsinden ayarlamak zor
geliyorsa yüzdelik değer olarak da ayarlayabilirsiniz.
Gördüğünüz gibi
sütunların
genişlikleri 75%
‘e %25 olarak
ayarlandı. Bu
değerler 100
üzerinden
tamamlamak
için değil tüm
sayfanın eninin
genişliğine piksel
cinsiden
oranlanarak
gerçekleştirildi.
26
Tablolarımızı <div> kullanarak toplu hizalamayabiliyorduk. Aynı şekilde
<table> tagının align parametresini kullanarak da tablolarımızı
hizalayabiliriz.
•
•
•
Kodları sonucu ortaya çıkan tablo biçimi sağa yatık olacaktır. Bunu align
parametresine ‘right’ değerinin verilmesiyle oluşur.
Tabloyu Ortalamak Đçin: align=“center”
Tabloyu Sağa Dayalı Yapmak Đçin: align=“right”
Tabloyu Sola Dayalı Yapmak Đçin: align=“left”
KULLANIMI:
<table align=“center,right..”>
Tablolarda bulunan hücrelerin renklerinin ayarlamayı
göstermiştik. Aynı şekilde bu hücrelere resim de ekleyebiliriz. Bunun için
yine <img> tagını kullanalım.
<img src=”Resmin Dizini”>
Şeklinde kullanarak tablomuza resim ekleyebiliriz. Bunu hücre içerisine
yazmalıyız.
<tr><td><img src=”Resmin Dizini”></td></tr>
27
Tablolar konumuz bu kadar. Biraz uzun ve karmaşık gelse de gerçekten
basit ve kolay. Sadece biraz örnek yapmanız sizin bu konuyu anlamanızda
etkili olacaktır.
BÖLÜM–10 – SAYFA AYARLARI
Web Sayfalarımızı tasarlarken bazen sayfamızdaki kenar
boşlukları ayarlamamız gerekebilir. Bunun için sayfa tagının yani <body>
tagının alacağı bazı parametreler bu ayarları yapar.
•
Bu kodlar <body> tagı içinde kullanılır.
•
•
•
•
Topmargin=“n”
Leftmargin=“n”
Margin height=“n”
Margin width=“n”
•
KULLANIMI:
<body topmargin=“0” Leftmargin=“0”… >
Resimlerim dizinindeki ‘arma3.gif’ ve ’child.jpg’ dosyalarını <img>
tagıyla kullanarak tablomuza aktardık.
28
Yukarıdaki kodlarda <body> tagına topmargin parametresi
getirilerek sayfaya yazılan yazıların 100 piksel içeriden başlaması
sağlandı.
Bazı kodları da direk <body></body> tagları arasında kullanabiliriz.
<blockquate> girintili olacak metin </ blockquate>
Kırmızı yazı ile yazılan kodları .html ile kaydettiğinizde yukarıdaki çıktıyı
alırsınız. Bu tag sayesinde sizde web sitenizde metin hizalama ve yazma
sorunları çekmesiniz.
Bu kodla bir metni girintili bir şekilde ekrana yazdırabiliriz.
•
<pre> Ön biçimlenecek metin </pre>
<pre> tagıyla girilen metinler girildiği gibi çıktı olurlar. Örneğin alt alta
yazılan ifadeler <pre> tagıyla düzenlendiğinde sayfada düzgün çıkarlar.
<html>
<body>
<pre> <b>
Korkma Sönmez Bu Şafaklarda Yüzen Al Sancak
Sönmeden Yurdumun Üstünde Tüten En Son Ocak
</b></pre></body></html>
BÖLÜM–11 – RESĐMLER
Resimler web sitemiz de kullandığımız imajlardır. Sayfa
düzeninden tutunda her şeyde ufak tefek resimler kullanırız. Hatta çoğu
zaman linklerimizi de çeşitli imajlar kullanarak oluştururuz.
Html ‘de siteye resim eklemeyi gömüştük. Bunu <img> tagı ile
yapıyorduk. Fakat eklediğimiz resimleri sayfamıza tam istenilen şekilde
ayarlamak için bazı düzenlemeler yapmamız gerekmektedir.
Yine bunları <img> tagının alacağı bazı parametrelere göre
düzenleyebiliriz. Öyleyse sayfamızda kullanacağımız resimleri yine Web
29
Sitem adlı klasörümüzdeki ‘Resimlerim’ dizinine atın ki kullanırken
kolaylık olsun. Hem böylece gruplandırmanın da adabına uymuş oluruz :)
•
Sayfaya resim eklemek istersek;
<img src=“resmin adı ve uzantısı”>
şeklinde yapılır.
Bir resme kenarlık eklemek için border özelliği kullanılır.
KULLANIMI:
<img src=“resim adı ve uzantısı” border=“n”>
Rengini ayarlamak istersek;
<img src=“resim adı ve uzantısı” bordercolor=“renk”>
Sonuç olarak aşağıdaki sayfa görüntülenecektir.
Şimdi bu dizindeki resmi web sayfamıza ekleyelim. Bunun için boş bir
sayfaya gerekli web taglarını ekledikten sonra <img> tagını kullanarak
resmin yolunu, adını ve uzantısını belirtelim.
30
Yine <img> tagının aldığı width ve height parametreleri resim
çerçevesinin genişlik ve yüksekliklerinin ayarlamamızı sağlıyor.
Tablolarda olduğu gibi resimleri de hizalayabiliriz.
Yine bazı özelliklerde hizalamaya dâhil edilebilir.
•
•
•
Top: Resmin üstünü metnin üstü ile aynı hizaya getirir.
Bottom: Resmin tabanı ile metnin tabanını aynı hizaya getirir.
Middle: Metin resmin tam ortasın gelir.
Bu işlem için Align özelliği kullanılır.
Center: Ortalamak içindir.
Right: Sağa yaslamak içindir.
Left: Sola yaslamak içindir.
Az önceki kodlarda <img> tagına align=right parametresini eklerseniz
resmin sayfanın sağına yattığını göreceksiniz.
Bu özellikleri resmin metin ile ilişkisi için kullanırız ve daima metinden
önce yazarız.
<img src="Resimlerim\Mavi Tepeler.jpg" align=middleborder=10
width=300 higth=250>
Yine <img> tagının alt parametresiyle resme alternatif resimler
ekleyebilirsiniz. Bu metinler resmin üzerine gelince çıkarlar ve genellikle
resim hakkında olurlar.
<img src="Resimlerim\Mavi Tepeler.jpg" align=left border=10 width=300
higth=250 alt="Mavi Tepeler">
31
BÖLÜM–12 – LĐSTELEME
Yukarıdaki kod sonucu aşağıdaki çıktıyı alırız.
Sitenizde bazen listeleme yapmak zorunda olabilirsiniz. Her ne
kadar da bunu tablolarla yaparım deseniz de tabloların içerisinde bile
kullanmanız gerekebilecek kategorileşmeler olabilir.
Kategorileşmenin örneği aşağıdaki gibidir.
•
•
•
1.Daire
2.Daire
3.Daire
o 3.Dairenin 1. Elemanı
o 3.Dairenin 2. Elemanı
o 3.Dairenin 3. Elemanı
•
•
4.Daire
5.Daire
o 5.Dairenin 1.Elemanı
Html’de ise bu bazı taglar yardımıyla olur.
Evet, gördüğünüz gibi
listeleme yaptığımızda
html otomatik olarak
elemanlarımızı
numaralandırdı ve alt alta
bir liste gibi yazdırdı.
Listeleme yaparken bazen farklı listeleme çeşitleri kullanırız. Bunu
html’de de yapmamız mümkün. Bunun için <ol> tagına type
parametresini ekleriz.
Bu taglar <li> ve <ol> taglarıdır. Bunu <tr> <td> taglarınada
benzetebiliriz.
<ol> tagı liste oluşumunu belirler. Liste sırası ise <li> tagıyla
belirlenir. Yani listelenecek öğeyi <li> tagıyla yazarız ve er zaman <ol>
tagı <li> tagından önce gelir.
Bunu küçük bir örnekte gösterecek olursak.
32
Yanda <ol> tagına type paremetresini ekleyerek listelerimizin
işaretlendirilme şekillerini değiştirmiş olduk. ‘A’ tipini kullanarak
listemizin alfabetik olarak işaretlenmesini , ‘I’ ifadesiyle ise Roma
Rakamı ile işaretlenmesini sağladık. Eğer type değerine ‘a’ veya ‘i’
değerlerini verirseniz işaretlendirmeler küçük şekil alacaktır.
Ama bunun için <ol> tagı yerline <ul> tagı kullanılır. Sıra yine <li> ile
oluşturulur.
Liste yaparken bazen tanımlama yapmak gerekebilir. Bunun için bir alt
satıra geçip paragraf oluşturmaya gerek yoktur. Bunun yerine tanımlama
listelemeleri yapılır.
Eğer işaretlendirmeyi bir sıraya göre değil de şekil kullanmak isterseniz.
Type parametresine alttaki değerleri verebilirsiniz.
•
LĐSTEYĐ KARE(SQUARE) YAPMAK
Type özelliğine “square” yazılır.
•
•
•
Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> ,
<dd>...</dd> , <dt>...</dt>
Listenin maddelerini belirtmek için kullandığımız <li> etiketinin
yerini burada <dd> ve <dt> etiketleri alıyor. Aynı şekilde
<ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi
bu sefer <dl>... </dl> arasına yazıyoruz.
LĐSTEYĐ ĐÇĐ DOLU YUVARLAK YAPMAK
Bu şekilde listeleme bir alt kategori oluşturmaya benzer.
Type özelliğine “disk” yazılır.
Đsterseniz bunu bir örnek ile gösterebiliriz.
•
LĐSTEYĐ YUVARLAK YAPMAK
Type özelliğine “circle” yazılır.
33
Listelemeleri web site yaparken sık kullanmayabilirsiniz. Ancak
ilerde ASP,PHP gibi betik diller kullandığınızda veritabanı uygulamaları
için bir listeleme yapmanız gerekecektir. O zaman işinize çok yarayacak
bir unsur olur.
Artık html ve web konusunda hatırı sayılacak bir yol aldınız.
Kullandığımız kelimelere aşina olmaya başladınız. Yavaş yavaş
öğrendiklerinizle kendi web sitenizi yapmanızı öneririz. Derslerimiz
bittiğinde etrafta bir webmaster olarak dolaşacaksınız. Eee bu sizin
hakkınız. Değil mi?
BÖLÜM–13 – ÇERÇEVELER KULLANALIM
Web sitenizde birbirinden bağımsız alanlar oluşturabilirsiniz. Bu
alanlar web sitenizin düzenini bozmazlar, sadece kendi alanlarında
çalışırlar. Đşte bunlara ÇERÇEVE(Frame) denir.
Kodlarını bir html sayfasına yazıp kaydedin. Sonuç aşağıdaki gibi
olacaktır.
Çerçeveler <frameset> ön imi ile kullanılabilirler. Ardından
<frame> tagıyla gruplanmış çerçeveler oluşturabilirsiniz.
Çerçeveler de önemli parametreler vardır. Bunlar çerçevenin
hangi sayfaya bağlanacağını belirlememize yarayan src ve çerçeveyi
tanımlamamıza yarayan name parametreleridir. Kullanımı aşağıdaki
gibidir.
<html>
<head>
<title>Çerçeve Kullanımıs </title>
</head>
<frameset>
<frame name="isim" src="sayfa veya dosya yolu ve adı"></frame>
<frame name="isim" src=" sayfa veya dosya yolu ve adı "></frame>
</frameset>
</html>
34
Çerçevelerin sayfaya göre bazen dik, bazen yatık olması gerekir.
Buda Frameset tagına rows ve cols parametrelerinin eklenmesiyle olur.
Sayfa1.html için aşağıdaki kodu hazırlayın.
Kullanımı aşağıdaki gibi olur.
<frameset rows=”x%,y%,z%,n%”></framesest>
<frameset rows=”x,y,z,n”></framesest>
Đsterseniz çerçevenin boyutlarını sayfaya göre ayarlayabilirsiniz. Bunun
için cols=”x,*,y” parametresini kullanırsınız.
Bunu bir örnek üzerinde gösterelim.
Öncelikle ‘Web Sitem’ adlı dizine 3 tane web sayfası oluşturun. Adları
‘sayfa1.html,sayfa2.html,sayfa3.html’. Yine aynı klasöre ‘cerceve.html’
diye bir sayfa daha oluşturun. Bu sayfaların içeriklerini aşağıdaki gibi
yapın.
Sayfa2.html için aşağıdaki kodu hazırlayın.
35
Sayfa3.html için aşağıdaki kodu hazırlayın.
Sonuç olarak ‘cerceve.html ’ sayfasını çalıştırdığınızda eğer browserınız
çerçeveleri destekliyorsa aşağıdaki gibi görürsünüz.
Şimdide ‘cerceve.html’ sayfasına şu kodları yazıp kaydedin.
Evet, bu görüntüyü gördüyseniz başarmışsınız demektir. Eğer
kodları harfi harfine yazdım ama ‘Bu sayfa tarayıcınız tarafından
desteklenmeyen çerçeveler kullanıyor.’ Diye bir mesaj aldıysanız
Browserınız çerçeveleri desteklemiyor demektir.
Şimdi dilerseniz kodları inceleyelim.
36
Dikkat ederseniz çerçeve kodlarını yazmaya </head><body> tagı
arasında başladık. Böylece olası çerçeve hatalarını en aza indirgemiş
olduk.
<frameset cols=”183,*”> değerinin biliyor olmalısınız. Cols
parametresi çerçevenin dikey olacağını gösteriyor. Zaten hemen ardından
gelen <frame> tagıyla ‘sayfa1.html’ ifadesinin çerçeveliyoruz.
Gördüğünüz gibi sayfa1 sayfası dikey olarak sayfanın solunda görünecek.
Scrolling parametresi ise kaydırma çubuklarının görünüp görünmeyeceğini
belirlerler ‘yes’ değerinin kullanırsanız kaydırma çubuklarını görünür hale
getirirsiniz. Biz ‘no’ değerini kullandık ve kaydırma çubuklarının
görünürlüğüne engel olduk. Name yani ad değerimize ise ‘sol’ ifadesini
kullandık. Böylece bu çerçeveyi kimliklemiş olduk.
Sonra gelen <frame> komutuyla 20% bir değerle sayfaya
koyulmasını istedik. Name değerini ‘sağüst’ yaptık ve src parametresiyle
sayfa2’yi göstermesini istedik.
3.<frame> ‘de ise sayfanın geri kalanını alması için <frameset>
tagında rows=”20%,*” değerini kullandık ve src ile sayfa3.html’i
göstermesini istedik. Dikkat ettiyseniz rows değeri bu 2 sayfayı yatay
olarak döşedi.
<frameset> taglarını kapattıktan sonra <noframes> tagını açarak
<body> tagına browserın çerçeveleri destekleyemediğini yazdık. Eğer
browser çerçeveleri desteklemiyorsa sayfamız direk <noframes> tagından
başlayacaktır.
Bu çerçevelerden ayrı daha çok tercih edilen iç çerçevelerde
kullanılabilir.
Đç çerçeve oluşturmak için <iframe> tagı kullanılır.
Kullanımı aşağıdaki gibi olur.
<iframe name=“isim” src=“dosya adı” width=“n” height=“n” border=“n”
bordercolor=“renk” scrolling=“yes / no”>
Şimdi bunu bir örnek ile gösterelim.
Dilediğiniz gibi 2 tane sayfa oluşturun. Bu sayfaların adları
‘sayfa1.html,sayfa2.html’ olsun. Sayfa2’i notepad ile açarak sadece şu
tagı body tagının içerisine yazın.
<iframe name="sayfa1" src="sayfa1.html" width="300" height="300
border="4" bordercolor="yellow" scrolling="yes">
Yaptığınız sayfalar şu şekilde çıkacaktır.
Burada name parametresi
çerçevenin ismini, src
parametresi çerçevelenecek
sayfanın yolunu, width
parametresi çerçevenin
genişliğini, height
parametresi çerçevenin
boyunu, border parametresi
çerçeve kenarlığının
kalınlığını, bordercolor
parametresi çerçeve
kenarlığının rengini, scrolling
parametresi ise çerçevelerde
kaydırma çubuklarının
görünüp görünmeyeceğini
belirler.
Evet çerçeveler bu
kadar. Dikkat etmeniz
gereken şey ise çerçeveler
olsun diğer taglar olsun src
yani yol belirten
parametrenin değerlerinin
sayfayı çalıştırdığını
klasörden referans almasıdır.
Yani çalıştırdınız sayfadaki bir resmi src=”resim.uzantı” şeklide alırsınız
ama farklı bir yerdeki resmi böyle alamazsınız. Yapmanız gereken o resmi
web sayfasının bulunduğu klasöre atmanız veya tam yolunu yazmanızdır.
37
BÖLÜM–14 – MULTIMEDIA SĐSTEMLER
Evet, sıra gldi 14. konumuza: Multimedia.
Multimedia bilgisayar dilinde ses veya sesli video ortamına denir. Html’de
multimedia dosyalarda görüntülenebilir. Bunun için <embed> tagı
kullanılır.
Bu tagın desteklediği formatlar aşağıdaki gibidir.
•
.waw, .wma, .av, .avi, .mpg, .mpeg, .mp3
Multimedia sistemini kullanarak sitemize arka planda çalan müzikler,
görüntülü ve sesli videolar ekleyebiliriz.
Sonra anasayfanızda ki <boyd> tagının içerisine embed tagıyla o müzik
dosyasının yolunu belirtin.
Sonra
anasayfa.html
dosyasını borwser
ile çalıştın. Ekran
aşağıdaki gibi
olacak ve eklemiş
olduğunuz müzik
kendiliğinden
çalışmaya
başlayacaktır.
Bunun için kullanacağımız <embed> tagının kullanımı aşağıdaki
gibidir.
<embed src=”dosya yolu>
Bu tagda kapatılmayan bir tagdır. Ve yine srs parametresine
eklenen multimedia dosyası çalıştırılır. Eğer multimedia dosyası
çalıştıracağınız web sayfasının bulunduğu dizinde ise src parametresine
sadece o dosyanın adı ve uzantısı yazılması yeterlidir.
Şimdi herhangi bir müzik dosyasını “Web Sitem” adlı klasörde ki
‘Muziklerim’ dizinine kopyalayın.
Bu basit kodla
sitenize müzikler
ekleyebilirsiniz.
Aynı zamanda video
da ekleyebilirsiniz.
Bunun için src
parametresine video
dosyasının yolunu
vermektir.
Yine multimedia
oynatıcının
büyüklüklerini width
38
ve height parametreleriyle belirleriz.
<embed src=Muziklerim/muzik.mp3 width=300 height=300>
Ama bazen sitenizdeki ziyaretçileriniz müzikten rahatsız olabilir.
Bunun için müziğin ziyaretçinin kontrolünde çalışması daha iyi olur. Bunu
yapabilmek için ise <embed> tagına autostart parametresini ekleriz. Bu
parametrenin varsayılan değeri true’dir. Bunu false yaparsanız müziğiniz
sayfada otomatik olarak başlamayacaktır.
<embed src=Muziklerim/muzik.mp3 width=300 height=300
autostart=false>
Sesi istediğiniz kadar çalabilirsiniz. Bunun için <embed> tagına
loop parametresini ekleriz.
<embed src=Muziklerim/muzik.mp3 width=300 height=300 loop=x>
Yukarıdaki x değerini kaç yaparsanız müzik o kadar tekrar
edecektir.
Multimedia dosyalarına linkde verebiliriz. Bunun için;
<a href=”multimedi dosya adı”>link açıklaması</a>
Aşağıdaki gibi yapabilirsiniz.
<a href=Muziklerim/muzik.mp3>Müzik Đndir</a>
Eğer yukarıdaki görüntüyü gizlemek istiyorsanız <embed> parametresine
hidden parametresini ekleyin. Böylece müzik çalışır ama ekranda
multimedia oynatıcı görünmez.
<embed src=Muziklerim/muzik.mp3 width=300 height=300 hidden>
39
BÖLÜM–15 – FORMLAR
Çoğu zaman internet sitelerine kayıt olurken veya bir ankete
katılırken bir takım formlar doldururuz. Bu formlar kullanıcıdan bilgi
almaya yarayan bir takıp materyallere sahiptir. Bunlar genelde metin
giriş kutuları, seçenek kutuları, kontrol kutuları, listeler, butonlar
olabilir.
Đşte bu dersimizde bizde formlar yapmayı öğreneceğiz.
Bir sayfaya form yapmak istersek <form></form> taglarını kullanırız. Bu
taglar sonucunda oluşan bölgeye ise form alanı deriz. Bu form alanının
genel bilgilerini ise <form> tagının bazı özel parametrelerine yazarız.
Basit bir form şöyle başlar.
Önemli bir açıklamada bulunacak olursam; Şu an için hazırladığınız html
sayfalarındaki form bilgilerini bir sayfaya yönlendiremezsiniz. Bunu
yapabilmek için sunucu taraflı çalışan bir betik dil kullanmalısınız. Bu
diller ASP ve PHP olabilir. Bu yüzden biz mailto ifadesiyle bu verilerin epostalara e-mail olarak gelmesini sağlayacağız.
Formalarda bazı nesneler kullanabiliriz. Bu nesneleri de az önce
açıklamıştık.
Şimdi bu nesneleri nasıl kullanacağımıza bakalım. Bunun için
<form></form> tagları arasına input yani ‘koy,ekle’ tagını yazarak
yapabiliriz. Tabi alana ekleyeceğimiz bu nesnenin türünü de yine input
tagından belirleriz.
Input tagına TYPE, NAME, VALUE VE SIZE parametrelerini ekleriz. Bu
parametrelerin anlamları aşağıdaki gibidir.
<html>
<body>
<form method=post action=”kaydet.asp”>
TYPE: Form elemanının türünü belirler.
</form>
</body>
</html>
VALUE: Form elemanının değerini belirler.
NAME: Form elemanının adını belirler.
SIZE: Form elemanının değer uzunluğunu belirler.
Gelin biraz <form> tagını inceleyelim.
Form tagının almış olduğu başlıca parametreler şunlardır.
Method : Bir form sayfasında ki bilgilerin nasıl gönderileceğini belirler.Đki
tür değeri vardır. Post değeri bilgilerin gizli bir şekilde gitmesini, GET
değeri ise bilgilerin Browser adres çubuğunda görünerek gitmesini sağlar.
Action : Bu parametre formun nereye gönderileceğini belirler. Html’de
bu formu alıp yorumlayacak bir sistem yoktur. Ama ASP ve PHP gibi
sunucu dilleri bu formlardaki bilgileri alabilirler.
Name : Form alanın adını belirler. Daha çok JavaScript gibi dillerde
gereken bir değerdir.
Bu tanımları yazdıktan sonra bir örnek yapalım.
Öncelikle “kayit.html” adında bir dosya oluşturup “Web Sitem” adlı
klasörün içerisine koyun.
Sonrada Anasayfanızdan buraya bir link ekleyin. Bu linki ekleme
amacımız, sayfalarımızın daha derli toplu bir hal almasını
istememizdendir.
Şimdi ‘kayit.html’ dosyasını Notepad ile açın ve aşağıdaki kodları
yazıp kaydedin. Browserınızdan anasayfa.html’i açıp eklediğiniz linke
tıklayın.
40
<html>
<input type=checkbox name="favorite3">Müzik<br>
<title>Üye Kayıt Formu</title>
<input type=checkbox name="favorite4">Ekonomi<br>
<body>
</td>
<p>Üye Kayıt Sayfamıza Hoş geldiniz</p>
<td align="left" valign="top">
<p>Lütfen aşağıdaki bilgileri doldurun.</p>
Site Hakkınızda Görüşleriniz Nelerdir?<br>
<textarea name="gorus" rows="11" cols="44"></textarea>
<table border="1" width="84%" id="table1" height="338">
<tr>
<td align="left" valign="top" width="420">
<form action="mailto:[email protected]" method=post>
<br>
Bilgilerinizi tamamladıysanız aşağıdaki butona
tıklayarak sitemize kayıt olabilirsiniz.
Adınız : <input type=text name="ad"><br>
<br><br>
Soyadınız : <input type=text name="soyad"><br>
<input type=submit value="Gönder">
E-mail : <input type=text name="mail" size="47"><br>
<input type=reset value="Temizle">
Şifre : <input type=password name="sifre"><br><br>
</form>
Hangi Đşletim Sistemini Kullanıyorsunuz ? <br>
</td>
</tr>
<input type=radio name="os" checked=on>Windows<br>
</table>
<input type=radio name="os">Linux<br>
</body>
<input type=radio name="os">Mac Os<br>
</html>
<br>
Đlgi Alanlarınız Nelerdir ? <br>
Eğer yukarıdaki kodları kayit.html’ye yazıp kaydettiyseniz.
Aşağıdaki gibi bir görüntüyle karşılaşacaksınız.
<input type=checkbox name="favorite">Bilgisayar<br>
<input type=checkbox name="favorite2">Spor<br>
41
Kodlardan biraz korkmuş olabilirsiniz ama üzülmeyin hepsini
detaylı bir şekilde anlatacağım. Zaten hepsini biliyorsunuz ama ilk defa
bu kadar çok kod yazmış oldunuz. Biraz da alışın diye yaptım tabi :)
3-
<p> tagıyla paragraf yapıldığını öğrenmiştik. Bizde
kısaca sayfa hakkında bilgi vermek için bu yazıyı
yazdık.
<p>Üye Kayıt Sayfamıza Hoş geldiniz</p>
<p>Lütfen aşağıdaki bilgileri doldurun.</p>
4-
Evet, sıra geldi <table> taglarına. Dikkatlice
baktığımızda <table> tagı ile oluşturduğumuz
tablomuzun kenarlıklarını border parametresiyle ‘1’,
genişliğini sayfanın %84’ü olarak, yüksekliğini ise piksel
cinsinden 338 olarak ayarladık. Ve bu tablomuzu
tanımlamak için id değerine “table1” verdik. Ve yine
dikkat ederseniz <body> tagını kapatmadan öncede
<table> tagını kapattık.
<table border="1" width="84%" id="table1" height="338">
5-
Evet, sıkı durun başlıyorum.
<table> tagıyla tablomuz hakkında genel özellikleri
browser’a bildirdikten sonra tablomuza satır eklemek
için <tr> tagını açtık ve <table> tagını kapatmadan
önce <tr> tagını kapattık. Böylece tek satırlık bir tablo
oluşturmuş olduk.
1-
<tr>
2-
Kodların en başına ve en sonuna bakın, evet ilk
öğrenmiş olduğumuz <html> kodu. Yani tüm kodlar bu
<html> tagının arasına yazılır. <title> tagıyla
sayfamızın sol üst köşesine yani başlık çubuğuna ‘Üye
Kayıt Formu’ yazdırdık.
Ardından <body> tagını açtık ve en son <html> tagından
önce kapattık. Görmüş olduğunuz gibi site içeriği ile
ilgili her şey bu tag arasına yazıldı.
6-
Sıra geldi <td> taglarına. Biliyorsunuz bu taglar
oluşturulmuş satırlara sütün eklemek için yazılırlar.
Satır ve sütunun kesiştiği yerde hücreler oluşur. Biz
burada 2 kere <td> tagını kapatıp açtığımız için 2
hücreli bir tablo elde etmiş olduk. Bu hücrelere ait
bilgileri de <td> tagında verdik. <td> tagının aldığı
parametreye göre hücredeki metnin aling=”left” (yani
sol) valing=”top” (yani üst) değerlerleriyle başlamasını
söyledik. Böylece bu hücredeki metinler sol üst
kısımdan başlayacaklar. Diğer parametre ise hücreni
42
genişliğini 420 piksel olarak ayarladık. “Width=420”.
Açmış olduğumuz bu <td> tagını;
<input type=checkbox name="favorite4">Ekonomi<br>
Kodundan sonra kapattık. Eğer gördüyseniz bu tagı
kapattıktan sonra diğer hücre için farklı bir <td> tagı
açtık.
7-
Şimdi ise asıl konumuz olan formlara geldi. Formlar
<form> tagıyla başlar </form> tagıyla biterler.
Gördüğünüz gibi <form> tagını ikinci <td> tagını
kapattıktan bir önceki satırda kapattık. Zira 2
hücredeki bilgilerde bize lazımlar.
kutusuna girilecek değerin “ad” ismiyle gelmesini istedik. E-mail
bölümünde ise size değeriyle metin kutusunun uzunluğunu belirttik. Aynı
şekilde maxlength değeriyle en fazla kaç karakter girilebileceğini de
belirleyebilirdik.
<input type=text name="ad" maxlength="9">
Şifre kısmına ise type özelliği olarak password değerini yazdık. Böylece
girilen şifreyi gizlemiş olduk.
Tabi bu arada bir alt satıra geçmek için <br> ifadesini eklemeyi
unutmadık.
<form action="mailto:[email protected]" method=post>
Đfadesiyle formun [email protected] diye bir
adrese post yani gizli metoduyla gitmesini istedik. Burada siz kendi mail
adresinizide yazabilirsiniz.
8-
Ardından gelen;
Adınız : <input type=text name="ad"><br>
Đkinci kısım için farklı bir bilgi alış sistemi kullandık. Yine <input> tagının
type parametresine ‘radio’ yazarak nesnemizin radio düğmeler olmasını
sağladık. Bu düğmeler kullanıcının birçok seçenekten sadece birini
seçmesine imkân tanır. Bu nesnelerin name özelliklerinin aynı olmasının
nedeni ise tek bir seçeneğe izin vermeleridir. Eğer hepsine ayrı bir ad
verirseniz bu düğmelerin hepsi işaretlenebilir.(Bu nesneler böyle
kullanılmaz ama şimdilik örnek amaçlı yaptım). Checked değeri ise o
nesnenin işaretli olup olmamasını belirler, On düğmeyi işaretli hale
getirir.
Soyadınız : <input type=text name="soyad"><br>
E-mail : <input type=text name="mail" size="47"><br>
Şifre : <input type=password name="sifre"><br><br>
Taglarına detaylıca bakalım. Input tagıyla formlara nesneler
ekleyebiliyorduk. Đlgili metinden sonra <input> tagını açtık ama
kapatmadık. Çünkü buda bazı taglar gibi kapatılamazlar.
<input> tagının almış olduğu type parametresi eklenecek nesnenin tipini
belirler. Đlk satırda biz ekleyeceğimiz nesnenin text yani metin kutusu
şeklinde olacağını bildirdik. Name yani ad değerinde ise bu metin
Ardından gelen <input> tagıyla nesnelerimizin type özelliklerinin
checkbox olmasını istedik. Checkboxlar aynı anda birden çok seçeneğin
seçilmesinde kullanılırlar. Bu yüzden name değerleri farklıdır.(Bu
nesneler böyle kullanılmaz ama şimdilik örnek amaçlı yaptım)
Đşte bu checkbox’ları yazdıktan sonra ikinci hücreye geçeceğimiz için
<td> tagını kapattık ve 2. bir <td> tagı açtık. Bu hücrenin de sol üst
köşeden başlamasını istedik.
2. hücremizde ziyaretçinin sitemiz hakkındaki görüşlerini almamız için
<textarea> yani metin alanı nesnesinden koyduk. Bu nesnelerin özelliğini
43
yine bu tagın almış olduğu rows ve cols değerleriyle boyutlarını
belirledik. Bu tagı hemen ardında </textarea> şeklinde kapattık.
ONAY KUTULARI
<input type=radio name=”adi” value=”değeri”>
Artık kullanıcıya gerekli uyarıyı verdikten sonra;
<input type=submit value="Gönder">
<input type=radio name="secenek_kutusu"
value="Değeri">Değeri
<input type=reset value="Temizle">
Kodlarıyla biri göndermek biri temizlemek için 2 tane buton oluşturduk.
Gönderme butonu formu otomatik olarak gerekli yere gönderecektir.
Reset yani temizleme butonu ise bu forma ait tüm nesnelerin değerlerini
sıfırlayacaktır. Bu butonların ekrandaki isimlerini belirlemek için value
parametresini kullanabilirsiniz.
SEÇENEK KUTULARI
Son olarak açmış olduğumuz <form> , <td> , <tr> taglarını kapattık.
<input type=checkbox name="kontol_kutulari"
value="degeri">Değeri
<input type=checkbox name=”adi” value=”değeri”>
METĐN KUTULARI
<input type=text name=”adi” value=”değeri”>
<input type=text name="metinalani" value="Kullanıcı Adı">
METĐN ALANLARI
<textarea name=”adi” rows=”y” cols=”x”></textarea>x*y’lik metin alanı
ŞĐFRE KUTULARI
<input type=password name=”adi” value=”değeri”>
<textarea name="metin_adlani" rows=5
cols=5></textarea>5*5'lik metin alanı
<input type=password name="sifrealani" value="****">
44
BUTONLAR
MENÜLER
<input type=submit value=”Değer”>
<select name=”adi”>
<input type=submit value="Gönder">
<input type=reset value=”Değer”>
<option value=”deger”>Metin</option>
<option value=”deger”>Metin</option>
<option value=”deger”>Metin</option>
.
.
.
<input type=reset value="Sil">
</select>
<select name="secenekler">
Bu düğmeler için resimde kullanabilirsiniz.
<button value="Gönder" type=submit name="adi">
<img src="resim_yolu">
</button>
<option
<option
<option
<option
<option
value="winxp">Windows</option>
value="Linux">Linux</option>
value="Mac Os">Mac Os</option>
value="MS DOS">Ms Dos</option>
value="Unix">Unix</option>
</select>
Reset düğmesi için
<button value="Sil" type=reset name="adi">
<img src="resim_yolu">
</button>
45
DOSYA YÜKLEME
<input type=file name=”adi” size=”n”>
*n yatay uzunluk.
BÖLÜM–16 – META TAGLARI
Bu taglar özel taglardır ve özel taglar için kullanılan <head>
tagının içerisine yazılırlar.
<input type=file name="file_list" size=30>
•
GĐZLĐ ALANLAR
<input type=hidden name=”adi” value=”deger”>
<META http-equiv="Content-Type" CONTENT="text/html;
charset=windows-1254">
Kodu sayfanızda Türkçe karakterlerin yazılmasını sağlar. “Charset”
Özelliğine istediğiniz yazı stilini verebilirsiniz.
<input type=hidden name="gizli" value="isim">
Adı üstünde gizli.
Evet, form alanlarımızda kullanacağımız nesneleri yazmış olduk. Bu
nesnelere girilen değerler formun gönderildiği sayfa yâda mail adresine
almış oldukları name değerleriyle kullanılırlar. Bu değerleri sayfada
almak için ASP, PHP gibi diller kullanılması gerektiğini söylemiştik. Web
tasarım yolunuzun henüz başındansınız. Bu yüzden bu kelimeleri daha sık
duyacaksınız ve yavaş yavaş onlarıda öğreneceksiniz.
Formlar bu kadar.
•
<META http-equiv="Content-Language" CONTENT="tr">
Kodu sayfanızın dilinin Türkçe(Đstenirse değiştirilebilir.) olduğunu
gösterir.
•
<META name="GENERATOR" CONTENT="Microsoft FrontPage
5.0">
Kodu sayfanın hangi editörle yapıldığını gösterir.
Bu tagları ilerde arama motorlarına ilan verirken de kullanacaksınız.
Bu taglar yanında <head> tagına bazı özel kodlar da yazılabilir. Bunlar
istemci taraflı çalışan script diller olabilir.
46
BÖLÜM–17 – WEB TASARIM ĐPUÇLARI
Kod yazarken <!-- --> etiketlerini kullanın. Bunlar size kod
yazarken hangi aşamada olduğunuzu gösterecektir.
Temel web tasarım kodları ve inceliklerini artık biliyorsunuz.
Sizde kendinize web sayfaları tasarlayabilirsiniz. Fakat web sayfalarına
ait bazı ipuçları sizin web deki etkinliğiniz artıracaktır.
Sürekli güncel olun. Yeni web teknolojilerini araştırın, öğrenin.
Çünkü bir zaman sonra siteniz ziyaretçilerinize cevap veremez hale
gelecektir.
Örnek olarak web sitenizdeki linkleri resimlendirin. Böylece
sitenize daha estetik bir görünüm katmış olursunuz.
Kesinlikle profesyonel olmadan web sitenizi ücretli yayımlamayın.
Bedava yayımlayan sitelerden hesap alarak kendinizi deneyin. Eğer
başarılı olursanız ücretli ama kaliteli bir hosting(barındırma) servisine üye
olabilirsiniz.
Resimleri linklendirmek için;
<a href=”link yeri”><img srs=”resim_adi”></a>
Şeklinde kullanabilirsiniz.
Web sitenizi geliştirirken grafiklere önem verin. Resimlerinizi
genellikle JPEG, GIF gibi etkili ve az yer kaplayan formatlardan seçin.
Sitenizi oluştururken tabloları kullanın. Böylece dağınık web site
tasarımlarından kurtulmuş olursunuz.
Kesinlikle bir Web Tasarım aracı ile çalışın. Bu araçlar 3 günde
yapacağınız bir tasarımı size yarım saatte hazırlamanıza olanak tanır.
Piyasada en iyi web tasarım araçları Adobe firmasının Dreamweaver ve
Microsoft firmasının FrontPage ürünüdür.
Profesyonel web siteleri için grafik şart olacak. Bu yüzden sizde
grafiklerinizi kendiniz tasarlayın, başka yerden çalmayın. Bunun için
piyasadaki Adobe Photoshop veya Adobe Fireworks araçlarını kullanın.
Sitenizi sık sık test edin ve kodlama yaparken sürekli kaydedin.
(ctrl +s)
Klasör şablonları kullanın. Mutlaka gruplandırma yapın. Böylece
kodlarken aradığınız bir dosyaya çabuk ulaşabilirsiniz.
Eğer sitenize resim eklerseniz mutlaka <img> tagına vspace ve
hspace parametrelerine vereceğiniz değerlerle resimlerin yatay ve dikey
yanların ekstra boşluk bırakın. Böylece daha düzgün bir görünüme sahip
olursunuz.
Düzenli olarak dosyalarınızın yedeğini alın ki gerektiğinde eski
sürüme geri dönebilesiniz.
Evet, genel olarak size tavsiyelerimiz bunlar. Daha düzenli ve beğenilen
bir site için web’in kurallarına uymak gerekir değil mi? :)
Sitenizde karmaşık fontlar kullanmayın. Kendi bilgisayarınızda
çalışan her font başka bilgisayarlarda çalışmıyor olabilir.
Web sayfanızın hepsini kullanmayın. Kibar linkler vererek
düzenliliğinizi koruyun.
47
BÖLÜM–18 – WEB TASARIM ARAÇLARI
Bu araçlardan sizlere yukarıda bahsetmiştik. Ama bilginiz olması
açısından sizlere bunları fazla detaya girmeden anlatacağız.
FRONT PAGE 2003
Bir web tasarım ve kodlama aracıdır. Hemen hemen kod
yazmadan bir web sitesi oluşturmanıza imkân tanır. Tasarım, kodlama ve
hem tasarım hem kodlama seçenekleri bir arada kullanılabilir.
Otomatik kod tamamlama özelliği ve bir Office ürünü gibi
kullanma imkânı veren Front Page profesyonel bir web tasarım aracıdır.
Örnek olarak yukarıdaki sekmelere
tıklayarak sayfanıza Resim, Küçük
Resim, Flash Film gibi materyaller
ekleyebilirsiniz.
Sitenize ekleyebileceğiniz içerikler
yanda sizlere gösterilmiştir.
Yanda da bir form
alanın içerebileceği
tüm nesneleri
görebilirisiniz.
Front Page bunları
size kod
yazdırmadan
ekleyecektir.
Yukarıda resmi görünen Front Page’in kullanımı oldukça basittir.
Menülerini kullanarak hiç html bilmeden de site oluşturabilirsiniz.
48
Kod kısmı oldukça gelişmiştir. Siz kodu yazmadan o tamanlar.
Aynı zamanda tasarımızın nasıl olduğunu öğrenmek için önizleme moduda
mevcuttur.
Ayrıca açtığınız
tagları o otomatik
olarak kapatır.
Açtığınız sayfaya o
otomatik olarak
gerekli temel
tagları
ekleyecektir.
Yukarıdaki seçenekleri kullanarak sitenizi bir word sayfası gibi tasarlar,
tasarlarken de kodlarla çalışabilirsiniz.
Ayrıca sayfalar dolusu kod yazarak tablolar oluşturmaya da son.
Çünkü Front Page ile saniyede 100’lerce satır ve sütundan oluşan tablolar
yapabilirsiniz.
49
Yandaki şekilde 7’ye 6 şeklinde bir
tablo oluşacaktır.
Bunu da aşağıdaki resimde
görebilirsiniz.
Bu özelikler penceresinden, tablo kenarlıklarının kalınlıkları ve
renginden tutunda arka plan rengine kadar her şeyi ayarlayabilirsiniz.
Satırlar dolusu kod yazmak için uğraşmayın. Size zaman
kazandıracak birçok özellik mevcut.
Ayrıca Tablolara ait hücrelere de özel bir özellik penceresi
eklenmiştir. Onu da yukarıdaki resimde görüldüğü gibi Hücre Özellikleri
penceresine tıklayarak açabilirsiniz.
Ayrıca tabloya ait birçok özelliği de ayarlayabilirsiniz. Bunun için
tablonun üzerine sağ tıklayıp tablo özelliklerini seçmelisiniz.
50
Bu şekilde köprü ekleme sihirbazını açmış oluruz. Gereken
bağlantıyı bulup seçtikten sonra Tamam butonuna tıklayın ve istediğiniz
link hazır olacaktır.
Eğer Microsoftun Office ürünlerinden birini kullanmışsanız Front
Page kullanmak size çocuk oyuncağı gelecektir.
Đstediğiniz nesneye link vermek de çok basit.
Bunun için yapmanız gereken istediğiniz nesneyi seçtikten sonra
araç çubuğundaki
simgesine tıklamanızdır.
ADOBE PHOTOSHOP
Image işleme yazılımlarının en iyisi ve en kalitelisidir. Web
sitenize ekleyeceğiniz resimleri vb materyalleri profesyonel bir şekilde
tasarlayıp web sitenize uygun hale getirebilirsiniz.
Adobe Photoshop daha çok Adobe Dreamweaver ile kullanılan bir
ürün olmasına rağmen bu işte yeni olduğunuz için siz istediğiniz web
tasarım aracıyla kullanabilirsiniz.
Şimdi Adobe Photoshop’u tanımak için bir örnek yapalım.
51
Öncelikle herhangi bir dizine images adında bir klasör oluşturun.
Ardından Photoshopunuzu açın. File menüsünden New sekmesine tıklayıp
yeni bir proje açın.
Şimdi soldaki menüden Paint Bucket Tool
aracını seçin. Yine
aynı menüde Set Foreground Color kısmından üst renge tıklayın.
Çıkan menüden; Alttaki # değerinden sonra o kutuya ‘5574b9’
yazın ve OK butonuna tıklayın.
Yukarıdaki değerleri aynen New penceresine yazıp ‘OK’ butonuna
tıklayın.
Sonra Paint Bucket Tool aracını sahnedeki siyah ekranın üstüne
tıklayın.
Sonuç aşağıdaki gibi olacaktır.
52
Sonra File menüsünden Save seçeneğini tıklayarak bu dosyayı images
klasörünün içerisine “resim1” adıyla kaydedin(jpeg şeklinde).
Sonra tekrar sahneye Horizontal Type Tool aracılığıyla tıklayarak yazının
rengini şu şekilde yapın.
Ardından yine soldaki menüden Horizontal Type Tool
seçin. Gerekli değerleri aşağıdaki gibi yapın.
aracını
(Aslında renk fark etmez. 2 farklı renk olsun yeter.)
Ardında ekrana şu yazıyı yazın.
Sonra File menüsünden Save As seçeneğini tıklayarak bu dosyayı da
“resim2” adıyla kaydedin. Kaydederken Format tipini Jpeg yapmayı
unutmayın.
53
Şimdi images klasörüne gidip Front Page’i açın ve buraya
index.html adıyla boş bir sayfayı kaydedin.
Ekle>Resim>Dosyadan seçeneklerinden images klasöründeki resim1’i
sayfaya ekleyin.
Sonra index.html dosyasını Front Page ile açın.
Ardından kod kısmına geçin ve <head> tagının içerisine şu kodları yazın.
54
<script language=javascript>
Çıkan sayfada resmin üzerine fare ile geldiğinizde aşağıdaki görüntüyü
göreceksiniz.
function fare_uzerinde()
{
resimler.src=("resim2.jpg")
}
function fare_uzerinde_degil()
{
resimler.src=("resim1.jpg")
}
</script>
Ardından eklemiş olduğumuz resmin <img> tagına gelin ve şu
parametreyle ekleyin.
<img border="0" src="resim1.jpg" width="300"
height="75" name="resimler" onmousemove=fare_uzerinde()
onmouseout =fare_uzerinde_degil()>
Evet işte bir efekt oluşturmuş olduk. Ne yaptık?
Öncelikle kullanacağımız resimleri Adobe Photoshop ile düzenledik. Sonra
Front Page’i açarak ilk resmimizi sayfamıza ekledik.
Bundan sonra bir script dil olan javascript’i kullandık ve 2 tane fonksiyon
hazırladık.
Projeyi kaydedin ve index.html’leyi çalıştırın.
Bu fonksiyonlardan fare_uzerinde() adlı fonksiyon resimler adlı nesneyi
form içinden bulacak ve bunun src parametresini resim2 olarak
değiştirecek. fare_uzerinde_degil() fonksiyonu ise src parametresini
resim1 olarak değiştirecek. Img tagının onmousemove olayına
1.fonksiyonun onmouseout olayına ise 2.fonksiyonun çalışmasını istedik.
Belki JavaScript bilmeseniz bile burada ne gibi işlere yardığını az
çok öğrenmiş oldunuz. Siz sadece bu efekti kodlarıyla kullanabilirsiniz.
Bunun gibi birçok scripti internetten indirebilirsiniz.
Adobe Photoshop kullanarak istediğiniz şekilde imaj
tasarlayabilirsiniz. Arka plandan tutunda bu gibi efektler için Photoshop
vazgeçilmez bir araç.
55
Herhangi bir siteye girdiğinizde ilgi çekici bir takım grafikler
gördüyseniz bunların mspaint ile yapılmış olduğunu düşünemezsiniz.
Ancak profesyonel web grafik araçları bunun üstesinden gelebilir. Çünkü
onlar birçok şeyi otomatik olarak gerçekleştirir. Sizde web tasarım
konusundan profesyonelleştikçe Adobe Photoshop’a daha çok ihtiyaç
duyacaksınız.
Çalışma ortamı esnek tutulmuştur. Bu sayede rahatlıkla flash uygulamalar
geliştirebilirsiniz.
ADOBE FLASH
Daha önceden Macromedia firmasına ait olan Flash şimdi Adobe
firmasının bir ürünüdür. Web sitelerinde çeşitli animasyonlar
oluşturmanıza izin verse de aslında tek başına bile bir tasarım aracıdır.
Đçinde barındırdığı ActionScript ile daha profesyonel Flash uygulamaları
yapabilmenizi sağlar. Örneğin sitenizde farklı sitil de ve animasyonlu
butonlar kullanmak istiyorsanız Flash bunun için biçilmiş bir kaftandır.
Đçerdiği zaman çizgisiyle kolayca animasyon yapabilirsiniz.
Toolbox’ında çizim için gerekli her şey mevcut.
Yaptığınız animasyonları Front Page ile eklemek istiyorsanız
Ekle>Resim>Flah Biçiminde Fill… Seçeneklerini seçmelisiniz.
Flash filmlerinizi çalıştırmak için Flash Player’ın
Bilgisayarınızda Kurulu olması gerekmektedir.
56
BÖLÜM–19 – SĐTE TASARIMI
Hücre Doldurma: 0
Bu bölümün gereksiz olduğunu düşünmüyorum. Çünkü elinizde o
kadar tasarım aracı varken nasıl bir site yapacağım diye kuşkuya
düşebilirsiniz. Burada biraz site tasarımınız hakkında konuşalım.
Hücre Aralığı: 2
Boyut: 1
Tablo Kenarlıklarını Daralt: Đşaretli
Daha önce size sayfanızın hepsini kullanmayın demiştim. Bunun
nedeni sayfanızın düzensiz bir görünüme dönüşecek olmasıdır. Bunun
yerine tablolarla çalışarak sitenizi sayfanın ya sağına, ya soluna yâda
ortasına bir tablo oluşturarak hiç olmazsa anasayfanızı göze hitap edecek
bir şekle getirebilirsiniz. Elinizdeki web araçlarıyla ise bu çocuk oyuncağı.
Gelin birlikte sizinle ilerde fikir edinebileceğiniz bir tasarım
yapalım.
Front Page’inizi açın. Sonra mevcut sayfayı kaydedin. Ardından
tablo oluşturma simgesine tıklayarak 1*1’lik bir tablo oluşturun.
Oluşturduğumuz tablo sayfamıza yerleşecektir.
Kod kısmına geçerek de bu tabloya ait özellikleri
ve gerekli kodları görebilirsiniz. Bu özellikleri kod
bölümünden değiştirebileceğiniz gibi tablo
özellikleri penceresini de kullanarak
değiştirebilirsiniz. Bunun için tablomuzun üzerine
gelerek sağ tuşa basın ve çıkan menüden Tablo
Özelliklerini seçin.
Değerlerini girdikten sonra Tamam butonuna tıklayın. Tablonuz aşağıdaki
gibi olacaktır.
Đşte web siteniz bu tablo içerisinde şekillenecektir. Şimdi
sayfamızın arka planını yapalım. Bunun için Photoshop’da 100*100’lük bir
sayfa açın ve renk paletinden #545454 değeri yazın.
Tablo Özellikleri penceresinden değerleri aşağıdaki gibi yapın.
Hizalama: Orta
Genişlik: Piksel cinsinden 700
Sonra bu renk ile ekranı boyayın. Böylece zemin rengimizi hazırlamış
olduk.
57
1.Hücremize sağ tıklayın ve Hücre Özellikleri seçeneğini seçin. Çıkan
pencerede yatay hizalamayı sol Dikey hizalamayı üst olarak değiştirin.
Bunu diğer hücreler içinde yapın. Sonra 1. Hücrenin Hücre Özellikleri
kısmından Arka Plan Rengini şekildeki gibi ayarlayın.
Bu dosyayı az önceki web sayfamızı kaydedeceğimiz yere Jpeg
dosyası olarak kaydedin ve Front Page de ile boş yere sağ tıklayarak sayfa
özelliklerine geçin. Biçimlendirme kısmından Arka Plan resmini az önce
kaydettiğiniz resmi gösterin. Böylece az önceki resmi sayfamıza arka plan
olarak almış olduk.
Oluşturduğumuz tablomuzun içerisine sağ tıklayın ve Hücreleri
Böl seçeneğini seçin. Satırlara böl seçeneğini seçip değeri 3 yapın.
Daha Fazla Renk kısmına geçtikten sonra değer
kısmına “BB2804” yazın tamam butonlarına
tıklayarak pencereleri kapatın.
Tablo şeklimiz aşağıdaki gibi olacaktır.
Böylece bir Navigasyon öğesi oluşturmuş olduk. Navigasyon öğresi nedir
derseniz;
Böylece tablomuz aşağıdaki görüntüyü alacaktır.
Navigasyon öğresi sitelerde gezinmeye yardımcı linklerin bulunduğu
kısımdır.
58
Aynı işlemleri en alttaki hücre içinde yapın fakat onun rengini
Hex={22,6C,AA} olarak ayarlayın.
Son hücrede de sitemizle ilgili bazı bilgileri verebiliriz.
Sıra geldi ortada ki hücreye buna da Hex={F1,FF,A6} renk değerini
vererek kaydedin.
Yandaki site şablonunu kullanarak istediğiniz tasarımı
yapabilirsiniz. Ayarlamak istediğiniz detay gerektiren yerleri ise
Kod bölümünden ayarlayabilirsiniz.
Siteniz ile ilgili başlıkları üst kısma yazabilirsiniz. Site içeriğinizi tabloları
bölerek orta kısma yazabilirsiniz. Son bölüme de siteniz hakkında bazı
bilgileri verebilirsiniz.
Sitenizde navigasyon sistemi için kullanacağınız gezinme
düğmelerini Photoshop veya başka bir imaj işleme yazılımıyla
hazırlayıp Front Page ile web sayfanıza ekleyebilirsiniz. Yine bu
resimlere köprü ekleme işlemi yaparak istediğiniz sayfaya
linkleyebilirsiniz.
Eklemiş olduğunuz tabloya ait hücreleri ihtiyacınıza yâda
site tasarımınıza göre dikey veya yatay olarak istediğiniz parçaya
bölerek sitenizi gruplandırabilirsiniz.
59
Bu bölümün sizlere, ilerde hazırlayacağınız siteler için bir
ilham kaynağı olmasını dilerim. Artık sizde bir web tasarımcısınız.
Yavaş yavaş acemide olsa sizde web sitenizi tasarlayabilirsiniz.
Biliyorum ilk tasarladıklarınız bir şeye benzememiş olabilir.
Nereden biliyorum derseniz bunlar benimde başımdan geçti. Ama
pes etmeyin bunları herkes yaşıyor ve sonunda gerçekten harika
siteler oluşturuyorlar.
Yapmanız gereken kodlara hâkim olmanız ve ne zaman
kod ne zaman tasarım yapacağınızı iyi bilmeniz. Ama dikkat edin
web tasarım araçlarının büyüsüne kapılıp saçma sapan bir şey
yapmayın. Planlayın. Gerekiyorsa kâğıt kalem kullanın. Şimdilik
hazır şablonlarda kullanabilirsiniz. Merak etmeyin siz bu işin
üstesinden gelirsiniz.
Şimdi bedava web alanı veren siteleri nasıl bulacağımıza
bakalım.
Öncelikle http://www.freewebspace.net/ adresine
girerek FreeWebSpace sayfasına bakalım. Bu site sayesinde
isteklerimize göre web alanı veren ücretsiz servisler
araştırabiliriz.
Örnek olarak dili Ingilizce web alanını 50 MB olarak
arattırma yapalım.
Eee, artık sitemizi hazırladıysak yavaş yavaş
yayımlayalım. Ne dersiniz?
BÖLÜM–20 SĐTEMĐZĐ YAYIMLAYALIM
Hazırladığınız siteler internette yayımlanabilmesi için
sunucuları güçlü olan bir barındırma servisine ihtiyaç duyarlar.
Biliyorsunuz sitenizi kendi bilgisayarınızda
yayımlayamazsınız.(Belki ileride olur) Bunun için bir barındırma
hizmetine üye olmalısınız. Barındırma hizmetleri sitenizi kendi
veri merkezlerinde saklar ve internete verirler. Eğer web tasarım
işinde yeni iseniz profesyonel olmadan ücretli bir barındırma
şirketine üye olmayınız. Onun yerine ücretsiz fakat size şimdilik
yetebilecek barındırma sistemlerine üye olun. Böylece yaptığınız
siteleri internette yayımlayabilirsiniz.
Đnternette ücretsiz web alanı veren birçok site vardır.
Bunların ücretli sitelere göre dezavantajları; sitenize reklâm
eklemeleri, sınırlı ve küçük web alanı vermeleri, alan adınıza
barındırma servisinin isimlerini katmalarıdır. Fakat bunun yanında
sitenizi ücretsiz olarak internette barındırırlar.
(Bu arama 2007 Temmuz ayının 17’sine göre yaılmıştır.)
Đşte size 315 Free yani beleş web alanı veren site. Hatta
bazılarının space yani web alanı 5000 MB’ta kadar çıkmış.
Đşte böylece birine üye olarak web sitelerinizi
yayımlayabilirsiniz. Bu arada eğer Đngilizce biliyorsanız sitelere
üye olmanız daha da kolaylaşacaktır.
Eğer bunlardan birini seçemediyseniz veya
güvenemiyorsanız size teklif olarak Somee.com’un bedave web
alanını tavsiye edebilirim.
60
butonuna tıklayın. File Zilla birkaç işlemden sonra somee’deki hesabınıza
bağlanacaktır.
Bunun için;
www.somee.com/FreePackage.aspx
Ekranda sol tarafta kendi bilgisayarınızı, sağ tarafta da
somee’deki hesabınızı görebilirsiniz.
web adresine girin.
Đşte size süper bir web alanı 105 MB free web space. Ftp
destekli. Ayrıca betik dillerden Asp teknolojisini de
kullanabilirsiniz. Üye olmak da çok basit, sayfanın altından ki
SING UP butonuna tıklayarak üyelik işlemlerinizi başlatabilirsiniz.
Gerekli formu doldurduktan
sonra üyeliğinizi tamamlayın.
Bundan sonra size ait bilgileri
somee verdiğiniz e-mail
adresinden size gönderecektir.
Ayrıca siteye bilgisayarınızdaki
web sayfalarınızı aktarmak için
ftp ile de bağlanabilirsiniz.
Bunun için File Zilla programını
bilgisayarınıza kurun. Açılış
ekranından sonra Ana bilgisayar
ekranına mail adresinize gelen
ip numarasını, Kullanıcı Adı kısmına mail adresinize gelen hesap isminizi,
Parola kısmına ise yine mail adresinize gelen şifreyi girin ve Hızlı Bağlan
Dosyalarınızı sürükle bırak yöntemiyle sunucuya
gönderebilirsiniz.
Dosyalarınızın internette nasıl göründüğünü merak
ediyorsanız size verilen site adresinizden bağlanabilirsiniz.
Siteadiniz.somee.com
Eğer ingilizce sitelerle uğraşmak istemem derseniz Türkçe
siteleri tavsiye edebiliriz.
61
Kayyo ve Mynet gibi siteler de sizlere ücretsiz barındırma
hizmeti verirler.
www.kayyo.com ve www.mynet.com
Đnternetteki forumları da araştırırsanız kendinize ve
sitenize uygun ücretsiz bir web alanı bulabilirsiniz.
BÖLÜM–21 WEB TEKNOLOJĐLERĐ
Đnternet sizin browserınızdan aldığı bilgiyi web sunucularına
göndererek gerekli bilgiye ulaşmanızı sağlar. Şu an için öğrenmiş
olduğunuz html dili de bunun için yeterlidir. Fakat bir web tasarımcı için
asla yeterli olmamalıdır.
Đnternet sistemleri geliştikçe yeni teknolojiler ortaya çıkmıştır.
Başlarda interneti sadece bir haberleşme cihazı olarak tanısak da artık
güncel yaşamımızda her şeyin internetle yapılması onunda gelişmesini
farz kıldı.
Örnek verecek olursak, hiçbir web sitesinden alış veriş
yapmadınız mı? Yada hiçbir chat ortamına katılmadınız mı? Veya ihtiyaç
duyduğunuz bir konuya forumlarda saatlerce tartışarak cevap aramadınız
mı? Đşte bunları yapmanıza imkân tanıyan html değildir. O sadece bir nevi
alt yapıdır. Html ile belki basit içerikli web siteleri yapabilirsiniz fakat az
önce bahsettiğimiz gibi bir sistem kuramazsınız. Đşte bunun için farklı
teknolojiler gelişmiştir.
Bu teknolojilerden biraz bahsedecek olursak;
Örneğin forumlar hazırlarken onları bir yere yollamamız gerekir. Đşte
bunları alıp işleyebilecek bazı diller geliştirilmiştir. Bu diller sunucu
taraflı çalışırlar ve birçok şeye imkân tanırlar. Veri tabanı bağlantıları,
aktif kullanıcı forumları, online uygulamalar gibi. Bunların başında ASP ve
PHP platformu gelir. Yine kodlamalarda sık kullanılan JavaScript,
VbScript’de bunlardan bazılarıdır.
Bu teknolojileri öğrenerek sizlerde çok profesyonel web siteleri
tasarlayabilirsiniz. Đnanının html ile bir yere varamazsınız. Zaten bu
teknolojiler html ile ortak çalışırlar. Ama şu da bir gerçek ki html
olmadan da onlar olmaz.
Eğer web teknolojileri hakkında daha fazla bilgi edinmek
istiyorsanız aşağıdaki teknolojileri araştırabilirsiniz.
Ajax
JavaScript
Dhtml
DOM
ASP.net
XFORMS
PERL
SOAP
ActionScript
CSS
RSS
XLM
XHTML
PHP
JAVA
“Hepinize web dünyasında başarılar dilerim”
62
63