21 BÖLÜMDE WEB SĐTE YAPIN!

Transkript

1 21 BÖLÜMDE WEB SĐTE YAPIN! Yazan: Emin Yılmaz Üçer Ö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 :) Emin Yılmaz Üçer 1

2 ĐÇĐNDEKĐLER BÖLÜM 1 WEB SĐTESĐ NEDEN YAPILIR? BÖLÜM 2 NASIL BAŞLAYACAĞIM? BÖLÜM 3 BAŞLIYORUZ! BÖLÜM 4 ĐLK WEB SAYFAM BÖLÜM 5 TAG KAVRAMI VE DĐĞER TAGLAR BÖLÜM 6 GĐRĐŞ SAYFAMIZI YAPIYORUZ

3 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 1 WEB SĐTESĐ NEDEN YAPILIR? HEPĐNĐZE BAŞARILAR DĐLERĐM EMĐN YILMAZ ÜÇER : to : 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 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? Đşte bu gibi soruları cevaplayarak siteniz için gerekli planlamayı yapın çünkü artık başlıyoruz. 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

4 oldukça basit. 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 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. geçin. Şimdi ilk web sayfamızı hazırlayacağız. Bunun için diğer bölüme 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. 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

5 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

6 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

7 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

8 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

9 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

10 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ı : #FF0000 Sarı : #FFFF00 Mavi : #0000FF Yeşil : #80FF00 Siyah : # Beyaz : #FFFFFF Kahverengi : # Gri #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

11 Ö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

12 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

13 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

14 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. Gördüğünüz gibi <font> tagıyla sadece renklerini ve yazı tiplerini belirlemiş olduk. Boyutlarını ise <h> taglarıyla sağladık <p></p> Tagını kullanarak da paragraf açabiliriz. Hatta bu paragrafa ait özellikleri bile belirtebiliriz. <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> Eğer toplu biçimlendirme yapmak istiyorsanız <DIV> tagını kullanabilirsiniz. <DIV aling= center ><p>her Paragraf Ortada</p></DIV> 14

15 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. <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> 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. <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> Kalın Yazı Yazar <b>kalın Yazı</b> <i></i> Đtalic Yazı Yazar <i>đtalik Yazı</i> <u></u> Altı Çizili Yazı Yazar <u>a.çizili</u> <strike></strike> Üstü Çizili Yazı Yazar <strike>ü.çizili</strike>  Đndisli Yazı Yazar H₂O  Üstel Yazı Yazar 10<sup>20 <tt></tt> Daktilo Yazı Yazar <tt>daktilo Yazı</tt> <big> & <small> Büyük ve Küçük Yazı Yazar <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

16 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

17 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=# 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

18 <target> : Sayfanın açılacağı yeri belirler. Açılacak sayfa; yeni bir sayfada açılacaksa; _blank, aynı pencerede açılacaksa; _self. <a href=" target= _blank"> Tıklandığında farklı sayfa da açılacak </a> Değerini bir boş sayfaya uygulayın. 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. Kullanılışı: <a href= ACCESKEY= kısa yol tuşu > </a> Linkler Đçin Sekme Sırası Ayarlamak Sekme sırasını <a> nın TABĐNDEX özelliği ile ayarlarız. Kullanımı: <a href= 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

19 Dosyayı kaydettiğinizde. Linke tıklarsanız. 19

20 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

21 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

22 <tr> <td> hucre1</td> <td> hucre2</td> </tr> <tr> <td> hucre3 </td> <td> hucre4</td> </tr> Đfadeleriyle tablomuza satır ve sütunlar ekledik. Oluşan her odacığa da hücre dedik. 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. 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

23 KULLANIMI: <table border frame= yok edilmesi istenen kenarlık değeri > FRAME DEĞERLERĐ 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 : Hangi Kenarlığın Görüntüleneceğini seçmek için ise frame yerine Rules ve değerleri kullanılır. KULLANIMI: <table border rules= değerleri > 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

24 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

25 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

26 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

27 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

28 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

29 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> 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> 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. 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

30 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

31 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. 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. 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 ö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

32 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

33 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. 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. LĐSTEYĐ ĐÇĐ DOLU YUVARLAK YAPMAK Type özelliğine disk yazılır. LĐSTEYĐ YUVARLAK YAPMAK 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. 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. Bu şekilde listeleme bir alt kategori oluşturmaya benzer. Đsterseniz bunu bir örnek ile gösterebiliriz. Type özelliğine circle yazılır. 33

34 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

35 Ç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

36 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

37 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

38 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

39 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

40 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. <html> <body> <form method=post action= kaydet.asp > </form> </body> </html> 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. Ö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 e- postalara 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. TYPE: Form elemanının türünü belirler. NAME: Form elemanının adını belirler. VALUE: Form elemanının değerini belirler. SIZE: Form elemanının değer uzunluğunu belirler. 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

41 <html> <title>üye Kayıt Formu</title> <body> <p>üye Kayıt Sayfamıza Hoş geldiniz</p> <p>lütfen aşağıdaki bilgileri doldurun.</p> <table border="1" width="84%" id="table1" height="338"> <tr> <td align="left" valign="top" width="420"> <form method=post> Adınız : <input type=text name="ad"><br> Soyadınız : <input type=text name="soyad"><br> <input type=text name="mail" size="47"><br> Şifre : <input type=password name="sifre"><br><br> Hangi Đşletim Sistemini Kullanıyorsunuz? <br> <input type=radio name="os" checked=on>windows<br> <input type=radio name="os">linux<br> <input type=radio name="os">mac Os<br> <br> Đlgi Alanlarınız Nelerdir? <br> <input type=checkbox name="favorite">bilgisayar<br> <input type=checkbox name="favorite3">müzik<br> <input type=checkbox name="favorite4">ekonomi<br> </td> <td align="left" valign="top"> Site Hakkınızda Görüşleriniz Nelerdir?<br> <textarea name="gorus" rows="11" cols="44"></textarea> <br> Bilgilerinizi tamamladıysanız aşağıdaki butona tıklayarak sitemize kayıt olabilirsiniz. <br><br> <input type=submit value="gönder"> <input type=reset value="temizle"> </form> </td> </tr> </table> </body> </html> 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="favorite2">spor<br> 41

42 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"> Evet, sıkı durun başlıyorum. 1- 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. 2- 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ı. 5- <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. <tr> 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

43 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. <form action="mailto: @hotmail.com" method=post> Đfadesiyle formun @hotmail.com 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> Soyadınız : <input type=text name="soyad"><br> <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 kutusuna girilecek değerin ad ismiyle gelmesini istedik. 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. Đ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. 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

44 yine bu tagın almış olduğu rows ve cols değerleriyle boyutlarını belirledik. Bu tagı hemen ardında </textarea> şeklinde kapattık. Artık kullanıcıya gerekli uyarıyı verdikten sonra; <input type=submit value="gönder"> ONAY KUTULARI <input type=radio name= adi value= değeri > <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. Son olarak açmış olduğumuz <form>, <td>, <tr> taglarını kapattık. METĐN KUTULARI SEÇENEK KUTULARI <input type=checkbox name= adi value= değeri > <input type=checkbox name="kontol_kutulari" value="degeri">değeri <input type=text name= adi value= değeri > <input type=text name="metinalani" value="kullanıcı Adı"> ŞĐFRE KUTULARI <input type=password name= adi value= değeri > METĐN ALANLARI <textarea name= adi rows= y cols= x ></textarea>x*y lik metin alanı <textarea name="metin_adlani" rows=5 cols=5></textarea>5*5'lik metin alanı <input type=password name="sifrealani" value="****"> 44

45 BUTONLAR <input type=submit value= Değer > <input type=submit value="gönder"> <input type=reset value= Değer > <input type=reset value="sil"> MENÜLER <select name= adi > <option value= deger >Metin</option> <option value= deger >Metin</option> <option value= deger >Metin</option>... </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 value="winxp">windows</option> <option value="linux">linux</option> <option value="mac Os">Mac Os</option> <option value="ms DOS">Ms Dos</option> <option value="unix">unix</option> </select> Reset düğmesi için <button value="sil" type=reset name="adi"> <img src="resim_yolu"> </button> 45

46 DOSYA YÜKLEME <input type=file name= adi size= n > *n yatay uzunluk. <input type=file name="file_list" size=30> 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. <META http-equiv="content-type" CONTENT="text/html; charset=windows-1254"> GĐZLĐ ALANLAR <input type=hidden name= adi value= deger > <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. Kodu sayfanızda Türkçe karakterlerin yazılmasını sağlar. Charset Özelliğine istediğiniz yazı stilini verebilirsiniz. <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

47 BÖLÜM 17 WEB TASARIM ĐPUÇLARI 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. Örnek olarak web sitenizdeki linkleri resimlendirin. Böylece sitenize daha estetik bir görünüm katmış olursunuz. 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. Kod yazarken <!-- --> etiketlerini kullanın. Bunlar size kod yazarken hangi aşamada olduğunuzu gösterecektir. Sürekli güncel olun. Yeni web teknolojilerini araştırın, öğrenin. Çünkü bir zaman sonra siteniz ziyaretçilerinize cevap veremez hale gelecektir. 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. 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

48 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

49 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. Yukarıdaki seçenekleri kullanarak sitenizi bir word sayfası gibi tasarlar, tasarlarken de kodlarla çalışabilirsiniz. Ayrıca açtığınız tagları o otomatik olarak kapatır. Açtığınız sayfaya o otomatik olarak gerekli temel tagları ekleyecektir. 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

50 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

51 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

52 Ö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

53 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 aracını seçin. Gerekli değerleri aşağıdaki gibi yapı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

54 Ş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

55 <script language=javascript> function fare_uzerinde() { Çıkan sayfada resmin üzerine fare ile geldiğinizde aşağıdaki görüntüyü göreceksiniz. 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()> Projeyi kaydedin ve index.html leyi çalıştırın. 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. 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

56 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

57 BÖLÜM 19 SĐTE TASARIMI 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. 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. Hücre Doldurma: 0 Hücre Aralığı: 2 Boyut: 1 Tablo Kenarlıklarını Daralt: Đşaretli 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 # 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

58 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 tablomuz aşağıdaki görüntüyü alacaktır. Böylece bir Navigasyon öğesi oluşturmuş olduk. Navigasyon öğresi nedir derseniz; Navigasyon öğresi sitelerde gezinmeye yardımcı linklerin bulunduğu kısımdır. 58

59 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

60 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 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

61 Bunun için; web adresine girin. butonuna tıklayın. File Zilla birkaç işlemden sonra somee deki hesabınıza bağlanacaktır. Ekranda sol tarafta kendi bilgisayarınızı, sağ tarafta da somee deki hesabınızı görebilirsiniz. Đş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 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