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

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "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> <sub></sub> Đndisli Yazı Yazar H<sub>2</sub>O <sup></sup> Ü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="http://www.google.com.tr" 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 method=post> Đfadesiyle formun 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

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 12 12- FORMLAR HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.

İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet

Detaylı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

Detaylı

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.

Aşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir. 12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

Metin Tabanlı İçerik Oluşturma Araçları

Metin Tabanlı İçerik Oluşturma Araçları Metin Tabanlı İçerik Oluşturma Araçları Microsoft Office Word Kelime işlemci, görsel nesnelerin veya çizimlerin resim ya da arka plan olarak kullanıldığı metinler oluşturabilen, harita ve tablo gibi şekiller

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır. WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,

Detaylı

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ MICROSOFT OFFİCE WORD PROGRAMI Ms Word bir kelime işlemci programıdır. İçinde bulunan detaylı metin biçimlendirme seçenekleri, ayrıntılı tablo, şekil ve grafik oluşturma başarıları nedeniyle, kendi türünde

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

Detaylı

4 Front Page Sayfası Özellikleri

4 Front Page Sayfası Özellikleri 4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak

Detaylı

HTML (Hyper Text Markum Language)

HTML (Hyper Text Markum Language) HTML (Hyper Text Markum Language) HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

www.wikispaces.com Kullanım Kılavuzu

www.wikispaces.com Kullanım Kılavuzu www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz

Detaylı

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI Microsoft Office Word programı, Amerika da bulunan ve Bill Gates in sahibi olduğu yazılım firması Microsoft tarafından

Detaylı

OKUL HABER EKLEME MODÜLÜ TANITIM DOSYASI. Okul haberlerinizi ilçemiz web sitesinde yayınlayabilmek için aşağıdaki adımları uygulamanız gerekmektedir.

OKUL HABER EKLEME MODÜLÜ TANITIM DOSYASI. Okul haberlerinizi ilçemiz web sitesinde yayınlayabilmek için aşağıdaki adımları uygulamanız gerekmektedir. OKUL HABER EKLEME MODÜLÜ TANITIM DOSYASI Okul haberlerinizi ilçemiz web sitesinde yayınlayabilmek için aşağıdaki adımları uygulamanız gerekmektedir. http://maltepe.meb.gov.tr/mebpanel adresine giriniz.

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA

TEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA TEMEL BİLGİSAYAR Ders Notları Yrd. Doç. Dr. Seyit Okan KARA Pencerenin ortasında bulunan beyaz sayfa, slayt tasarımında kullanacağımız sayfamızdır. Sol panelde bu slayt sayfasının küçültülmüş halde bir

Detaylı

2-Hafta Temel İşlemler

2-Hafta Temel İşlemler 2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVERDA NESNELERE DAVRANIŞ EKLEME Dreamweaver da fare hareket olaylı, animasyonlu görüntüler oluşturmak istenildiğinde hazır scriptler anlamına gelen Davranışlar(behaviors) kullanılmaktadır. Yukarıdaki

Detaylı

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER

MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER MEBWEB OKUL/KURUM WEB SİTELERİ KULLANIM KLAVUZU TEMEL İŞLEMLER 1.WEB PANELE GİRİŞ www.okuladı.meb.k12.tr/mebpanel Resim1: Okul Web Siteleri Yönetim Paneli [MebWeb] Giriş Ekranı AÇIKLAMA: Okulunuzun web

Detaylı

08.11.2015 WORD KULLANIMI

08.11.2015 WORD KULLANIMI KELİME İŞLEMCİ-MİCROSOFT OFFİCE OFFICE DÜĞMESİ HIZLI ERİŞİM ARAÇ ÇUBUĞU MENÜLER ŞEKİL, RESİM EKLEME TABLO EKLEME ETKİNLİKLER 1 OFFICE DÜĞMESİ: Çalışmamız ile ilgili dosya işlemleri yapmamızı sağlar. Yeni

Detaylı

MS POWERPOINT 2010. Şekil 111 Powerpoint 2010 Programını Başlatmak

MS POWERPOINT 2010. Şekil 111 Powerpoint 2010 Programını Başlatmak MS POWERPOINT 2010 1.Giriş: PowerPoint, Windows ortamında çalışan bir sunu paket programıdır. Metin, taslak, çizim ve grafikler kullanılarak sunular, slaytlar, broşürler, bildiriler, konuşmacı notları

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

Detaylı

MEBİS Kullanım Kılavuzu. Öğretim Elemanı Yeni. 2013-2015 - İstanbul Medipol Üniversitesi

MEBİS Kullanım Kılavuzu. Öğretim Elemanı Yeni. 2013-2015 - İstanbul Medipol Üniversitesi MEBİS Kullanım Kılavuzu Öğretim Elemanı Yeni 2013-2015 - İstanbul Medipol Üniversitesi İçindekiler 1. Uzem 1. Uzem mebis.medipol.edu.tr adresine girdiğinizde sol alt tarafta bulunan seçeneklerden "Muzem

Detaylı

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir.

Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Sayfa numarası ekleme: Ekle menüsünden sayfa numaraları seçeneğine tıklandığında Açılan penceren gerekli ayarlamalar yapılarak sayfa numaraları görüntülenir. Tarih ve saat ekleme: Ekle menüsünden Tarih

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi

Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi Veri Giriş Sistemi Klavuzu Amaç Veri Giriş Sistemi, koruyucu ve destekleyici tedbir kararlarının takibinde ve uygulamasında ilgili kurumları daha

Detaylı

Yine benzer şekilde hücreler içine yazılan yazıların renklerini değiştirebiliriz. Bunun için tüm satırı veya sütunu yine fareyle seçmek durumundayız.

Yine benzer şekilde hücreler içine yazılan yazıların renklerini değiştirebiliriz. Bunun için tüm satırı veya sütunu yine fareyle seçmek durumundayız. 2. EKLE SEKMESĐ TABLO EKLEMEK: Sayfamıza tablo eklemek için, TABLO butonuna bastıktan sonra açılan pencereden kaç sütün ve kaç satırlık bir tablo oluşturacağımızı belirliyoruz. Fareyi sürüklemek, tablonun

Detaylı

İdari Birimler Yönetim Paneli Kullanma Kılavuzu Bilgi İşlem Daire Başkanlığı Web Tasarım Ve Yazılım Birimi

İdari Birimler Yönetim Paneli Kullanma Kılavuzu Bilgi İşlem Daire Başkanlığı Web Tasarım Ve Yazılım Birimi İdari Birimler Yönetim Paneli Kullanma Kılavuzu Bilgi İşlem Daire Başkanlığı Web Tasarım Ve Yazılım Birimi Duyurular Nasıl Girilir? Duyuru girmek için ilk olarak İKÇ yönetim panelinden; 1-Kullanıcı adınızı

Detaylı

NAZMİYE DEMİREL ORTAOKULU BİLİŞİM TEKNOLOJİLERİ DERSİ 1. DÖNEM 6. SINIFLAR DERS NOTU EXCEL 2007 DERS NOTLARI

NAZMİYE DEMİREL ORTAOKULU BİLİŞİM TEKNOLOJİLERİ DERSİ 1. DÖNEM 6. SINIFLAR DERS NOTU EXCEL 2007 DERS NOTLARI EXCEL 2007 DERS NOTLARI Bir hesap tablosu programıdır. Excel, her türlü veriyi (özellikle sayısal verileri) tablolar ya da listeler halinde tutma ve bu verilerle ilgili ihtiyaç duyacağınız tüm hesaplamaları

Detaylı

İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU

İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU T.C. SÜLEYMAN DEMİREL ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU Hazırlayanlar Mahmut ÖZDEMİR Sezgin SERPEN Büşra TUNCER Yönetim Paneli Kullanımı Sistemin yönetim

Detaylı

MİCROSOFT WORD. Araç çubukları: menü çubuğundan yapabileceğimiz işlemleri daha kısa zamanda araç çubukları ile yapabiliriz.

MİCROSOFT WORD. Araç çubukları: menü çubuğundan yapabileceğimiz işlemleri daha kısa zamanda araç çubukları ile yapabiliriz. MİCROSOFT WORD Office programlarının içersinde genelde yazı yazmak amaçlı kullanılan bir programdır Microsoft Word. Aşıdaki şekilde çalışma sayfası görülür. Şimdi Word çalışma sayfasını inceleyelim. Microsoft

Detaylı

AEGEE-Eskişehir Online Web Yönetim Paneli ( WEBBY ) Yardım Dökümanı

AEGEE-Eskişehir Online Web Yönetim Paneli ( WEBBY ) Yardım Dökümanı AEGEE-Eskişehir Online Web Yönetim Paneli ( WEBBY ) Yardım Dökümanı Emre GÜLCAN IT Responsible & Web Admin AEGEE-Eskişehir emregulcan@gmail.com e_gulcan@hotmail.com 0535 729 55 20 1 1. YÖNETİM PANELİNE

Detaylı

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Her doktorun ihtiyacı olan doktor web sitesi, hasta ve doktor arasındaki

Detaylı

ASP.NET ile Bir Web Sitesi Oluşturma

ASP.NET ile Bir Web Sitesi Oluşturma 29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site

Detaylı

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır.

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Üye Girişi Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Giriş Sayfası Sayfa ayarlarını buradan yapabilirsiniz. Anahtar

Detaylı

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Kullanıcı dostu kontrol panelli dünya standartlarında web tasarım uygulaması.

Detaylı

Bo lu m 7: Hesap Tabloları

Bo lu m 7: Hesap Tabloları Bo lu m 7: Hesap Tabloları Konu 1: Dosya, Tablo ve Grafik Oluşturma Hazırlayan: S.Engin Koç Bu konu bittiğinde; Dosya oluşturma ve tabloya şekil verme Tabloya sütun, satır ekleme ve hücreleri biçimlendirme

Detaylı

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU Üniversitemiz Webmail servisi yenilenmiş olup Roundcube webmail üzerinden servis vermeye başlamıştır. Daha önce kullanılan SquirrelMail servisi https://oldwebmail.cankaya.edu.tr/

Detaylı

GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA

GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA Google Docs yani Google Dokümanlar hizmeti bir süre önce Google Drive adlı bulut depolama hizmetinin içerisine alındı ve çok daha gelişerek yoluna devam etti. Google

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 10 10- TABLOLAR(TABLE) Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir

Detaylı

KARADENİZ TEKNİK ÜNİVERSİTESİ YENİ WEB SİTESİ BİRİM YETKİLİSİ WYS (WEB YÖNETİM SİSTEMİ) KULLANIM KLAVUZU

KARADENİZ TEKNİK ÜNİVERSİTESİ YENİ WEB SİTESİ BİRİM YETKİLİSİ WYS (WEB YÖNETİM SİSTEMİ) KULLANIM KLAVUZU YENİ TASARIM KARADENİZ TEKNİK ÜNİVERSİTESİ YENİ WEB SİTESİ BİRİM YETKİLİSİ WYS (WEB YÖNETİM SİSTEMİ) KULLANIM KLAVUZU WYS : WEB YÖNETİM SİSTEMİ Wys yetkili olduğumuz birimin web sayfası ile ilgili her

Detaylı

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI

ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI ÜNİTE 1: KELİME İŞLEMCİ PROGRAMI Kelime İşlemci Nedir? Bilgisayarda yazıların(metinlerin) yazılmasını ve düzenlenebildiği, resimlerin ve tabloların eklenebildiği yazılımların(programların) genel adıdır.

Detaylı

Ecza Depolarına Ait E-Fatura Aktarım Modülü

Ecza Depolarına Ait E-Fatura Aktarım Modülü Bilge Elektronik Ltd. Şti. Eczanem Otomasyon Sistemi Ecza Depolarına Ait E-Fatura Aktarım Modülü 1 1. SELÇUK/AS/NEVZAT/DİLEK Ecza Depoları E-Fatura Aktarımı.. 3 2. HEDEF Ecza Deposu E-Fatura Aktarımı..

Detaylı

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler...

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler... i İçindekiler Kullanıcı Giriş Ekranı... 1 Ana Sayfa... 2 1-Projeler... 3 1.1 Yeni Proje... 3 1.2 Proje Düzenle... 3 1.3 Proje Sil... 3 1.4 Listeyi Güncelle.... 3 2-Gruplar... 4 2.1.1 Grup Adı.... 5 2.1.2

Detaylı

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Birinci Bölüm Microsoft FrontPage 2003 i Yeni Web Sitesi Oluşturmak 2 Dosyanın Kaydedilmesi

Detaylı

Elektra Raporlama Sistemi Sunumu

Elektra Raporlama Sistemi Sunumu Elektra Raporlama Sistemi Sunumu Raporlama Araçları Açıklamaları: 1-Seçilen nesneyi raporlar. 2-Yeni boş bir rapor eklemeyi sağlar. 3-Seçilen raporları düzenlemeyi sağlar. 4-Seçilen raporu siler. 5-Seçilen

Detaylı

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...

Detaylı

THE PROJECT UMBRELLA BİLGİLENDİRE KILAVUZU. www.theprojectumbrella.com

THE PROJECT UMBRELLA BİLGİLENDİRE KILAVUZU. www.theprojectumbrella.com THE PROJECT UMBRELLA BİLGİLENDİRE KILAVUZU www.theprojectumbrella.com Yukarıdaki linki web tarayıcınızın adres çubuğuna veya google adres çubuğuna yazdığınız taktirde sizi web sayfamıza yönlendirecektir.

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 482BK0153 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

Detaylı

Microsoft PowerPoint

Microsoft PowerPoint Microsoft PowerPoint GİRİŞ Microsoft Powerpoint bir sunum hazırlama programıdır. Microsoft Powerpoint sayesinde sunumlarınıza içerisinde ses,video,animasyon,grafik,resim,köprüler,web içerikleri ve çeşitli

Detaylı

12. Tanımlama Listeleri
,
,

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> 12. Tanımlama Listeleri , , Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını

Detaylı

Html temelleri. Ders 4

Html temelleri. Ders 4 Html temelleri Ders 4 1 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. > 1) Tüm kodlar bunun arasında çalışır. 2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. 3) Sayfa gövde kısmıdır. Renkler, yazılar

Detaylı

Toplu Kayıt Kullanıcı Kitapçığı

Toplu Kayıt Kullanıcı Kitapçığı OnSync Web Toplantı, Sanal Sınıf, Web ve Video Toplantı Servisi Toplu Kayıt Kullanıcı Kitapçığı 1 Öncelikle Etgi Grup u tercih ettiğiniz için teşekkür ederiz. OnSync sistemine giriş yapmadan önce toplu

Detaylı

Microsoft Excel. Çalışma Alanı. Hızlı Erişim Çubuğu Sekmeler Başlık Formül Çubuğu. Ad Kutusu. Sütunlar. Satırlar. Hücre. Kaydırma Çubukları

Microsoft Excel. Çalışma Alanı. Hızlı Erişim Çubuğu Sekmeler Başlık Formül Çubuğu. Ad Kutusu. Sütunlar. Satırlar. Hücre. Kaydırma Çubukları Microsoft Excel Microsoft Excel yazılımı bir hesap tablosu programıdır. Excel, her türlü veriyi (özellikle sayısal verileri) tablolar ya da listeler halinde tutma ve bu verilerle ilgili ihtiyaç duyacağınız

Detaylı

HESAP MAKİNASI YAPIMI

HESAP MAKİNASI YAPIMI HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan

Detaylı

DENEME SINAVI. ECDL BAŞLANGIÇ Hesap Tablosu

DENEME SINAVI. ECDL BAŞLANGIÇ Hesap Tablosu DENEME SINAVI ECDL BAŞLANGIÇ Hesap Tablosu 1. Hesap Çizelgesi (Microsoft Office - Excel) uygulamasını açınız. Başlat > Programlar > Microsoft Office > Microsoft Office Excel 2003 yolu izlenerek Excel programı

Detaylı

YENİ DÜNYALAR REKLAM POWERLED KULLANIM KILAVUZU

YENİ DÜNYALAR REKLAM POWERLED KULLANIM KILAVUZU YENİ DÜNYALAR REKLAM POWERLED KULLANIM KILAVUZU 1- Kayan yazı tabelasının enerji kablosuna 220V enerji veriniz. Tabelada daha önce yazılmış bilgiler varsa ekranda akmaya başlayacaklardır. 2- Kayan yazı

Detaylı

WordPress ile Web Sayfası Tasarımı

WordPress ile Web Sayfası Tasarımı WordPress ile Web Sayfası Tasarımı WordPress nedir? WordPress, dünyada en çok kullanılan blog sistemlerinden biridir, açık kaynaklı ve ücretsiz olarak dağıtılmaktadır.wordpress açık kaynaklı bir yazılım

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ikinci Bölüm İçindekiler İçindekiler i Microsoft FrontPage 2003 2 Atlama Menüsü Eklemek:

Detaylı

Hızlı Başlangıç Kılavuzu

Hızlı Başlangıç Kılavuzu Hızlı Başlangıç Kılavuzu Microsoft Word 2013 önceki sürümlerden farklı görünüyor, bu nedenle öğrenmenizi kolaylaştırmak için bu kılavuzu oluşturduk. Hızlı Erişim Araç Çubuğu Buradaki komutlar her zaman

Detaylı

Açılan programın pencere görünümü aşağıdaki gibidir. 2. Araç Çubuğundan kaydet düğmesi ile

Açılan programın pencere görünümü aşağıdaki gibidir. 2. Araç Çubuğundan kaydet düğmesi ile POWERPOINT PROGRAMI Powerpoint bir sunu hazırlama programıdır. Belirli bir konu hakkında bilgi vermek için, derslerle ilgili bir etkinlik hazırlamak için, dinleyicilere görsel ortamda sunum yapmak için

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

Detaylı

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Hesap Tabloları(Excel 2007) HAFTA 1 1. Hesap Tablolarına Giriş 1.1. Hesap tablosu tanımı, kullanım amacı ve yerleri 1.2. MS Excel Uygulamasına giriş

Detaylı

MICROSOFT OFFICE WORD 2010 ÖRNEK TEST SORULARI

MICROSOFT OFFICE WORD 2010 ÖRNEK TEST SORULARI MICROSOFT OFFICE WORD 2010 ÖRNEK TEST SORULARI 1-) Word 2010 nedir? A-) Hesap Programıdır B-) Tablo - Grafik Programıdır C-) Kelime İşlem Programıdır D-) İşletim Sistemidir 2-) Microsoft Word 2007 programında

Detaylı

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Öğretim Teknolojileri Destek Ofisi Instructional Technologies Support Office Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Semboller, Ses Ekleme, Video Ekleme Orta Doğu Teknik Üniversitesi

Detaylı

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Bu belge BT Sınıfı Etkinliklerinde Kullanılmak Üzere Hazırlanmıştır İÇİNDEKİLER GİRİŞ... 3 ÜYE (KAYIT) OLMA... 3 YÖNETİM PANELİ İŞLEMLERİ... 5 ŞABLON AYARLARI...

Detaylı

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği ÖNDER BİLGİSAYAR KURSU Microsoft Office Kursu Eğitim İçeriği Microsoft WORD 1. PENCERE ELEMANLARI VE GÖRÜNTÜLEME BİÇİMLERİ 1.1. Genel Bilgiler 1.2. Ekran Görünümleri 1.3. Metin Sınırları ve Basımda Çıkmayan

Detaylı

İçerik Yönetim Paneline Hoşgeldiniz. Bu bölümde sisteme içerik yükleyebilirsiniz. İçerikleri düzenleyebilirsiniz, silebilirsiniz.

İçerik Yönetim Paneline Hoşgeldiniz. Bu bölümde sisteme içerik yükleyebilirsiniz. İçerikleri düzenleyebilirsiniz, silebilirsiniz. İçerik Yönetim Paneline Hoşgeldiniz. Yönetim paneli aşağıdaki modüllerden oluşmaktadır. 1- İçerik Yönetimi 2- Bağlantı Yönetimi 3- Sayfa Yönetimi 4- Mail Bildirimleri 5- Kullanıcı Yönetimi 6- Müftü Bey

Detaylı

Nevşehir Hacı Bektaş Veli Üniversitesi. Moodle Uzaktan Eğitim Sistemi. Öğretim Elemanı Bilgilendirme Kılavuzu

Nevşehir Hacı Bektaş Veli Üniversitesi. Moodle Uzaktan Eğitim Sistemi. Öğretim Elemanı Bilgilendirme Kılavuzu Nevşehir Hacı Bektaş Veli Üniversitesi Moodle Uzaktan Eğitim Sistemi Öğretim Elemanı Bilgilendirme Kılavuzu 1. Moodle Uzaktan Eğitim Sistemine nasıl giriş yapılır? 2. Derse giriş yapma ve yeni bir sanal

Detaylı

MEB E-Posta Hizmetleri ve Outlook Programı

MEB E-Posta Hizmetleri ve Outlook Programı MEB E-Posta Hizmetleri ve Outlook Programı İçindekiler Bakanlık E-Posta Hizmetleri ve Sistem Ara yüzü E-posta Hizmetlerinin Outlook Programına Bağlanması Outlook 2010 Kullanımına ilişkin temel bilgiler

Detaylı

Bu sekme ile genel olarak biçimlendirme ile ilgili ayarlamaların yapıldığı sekmedir.

Bu sekme ile genel olarak biçimlendirme ile ilgili ayarlamaların yapıldığı sekmedir. 3. GİRİŞ SEKMESİ Bu sekme ile genel olarak biçimlendirme ile ilgili ayarlamaların yapıldığı sekmedir. 3.1. Excel 2010 da Kesme, Kopyalama, Yapıştırma ve Biçim Boyacısı Giriş sekmesinin ilk grubu olan Pano

Detaylı

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI 2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI İşletim Sisteminde Yapılan Uygulamalar Bir Bilgisayarda Hangi İşletim Sistemi Yüklü Olduğunu

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

ACCESS DERS 2. 1. Tablolarda Düzenleme

ACCESS DERS 2. 1. Tablolarda Düzenleme ACCESS DERS 2 1. Tablolarda Düzenleme Geçen notlarda en durumda Musteri, iller ve ilçeler isminde 3 tane tablomuz olmuştu. Şimdi bu tablolar üzerinde düzenlemeler yapacağız. İlk düzenlemeyi tablo ve tablo

Detaylı

BİLGİSAYAR PROGRAMLAMA

BİLGİSAYAR PROGRAMLAMA BİLGİSAYAR PROGRAMLAMA Yrd. Doç. Dr. Beytullah EREN beren@sakarya.edu.tr 0264 295 5642 1 MİCROSOFT EXCEL Elektronik tablolama veya hesaplama programı olarak da adlandırılan Excel, girilen veriler üzerinde

Detaylı