Internet Programcılığı DERS NOTU

Transkript

1 Internet Programcılığı DERS NOTU Yazarlar: Fehmi Noyan İSİ, Nilgün Belma Bugüner Yeniden Düzenleme: Seval ÖZBALCI 2004

2 ÖNSÖZ... 5 HTML İLE WEB TASARIMINA VE PHP-MYSQL İLE WEB PROGRAMCILIĞINA GİRİŞ... 7 HTML İLE WEB TASARIMINA VE PHP-MYSQL İLE WEB PROGRAMCILIĞINA GİRİŞ HTML Nedir? HTML nin Yapısı HTML'ye Giriş...7 HTML ETİKETLERİ... 8 <html> </html>... 8 <head> </head>... 8 <body> </body>... 9 <title> </title> <center> </center> <hx> </hx> Başlık Etiketleri <b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt> <sub> </sub>, <sup> </sup> <hr> <p> </p> ve <br> <pre> </pre> Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li> <img> <a> </a> <font> </font> <acronym> </acronym> <meta> </meta>  BASİT BİR HTML DOSYASI ÖRNEĞİ META ETİKETİ İLE YÖNLENDİRME ÖRNEĞİ WEB PROGRAMCILIĞINA GİRİŞ Çerçeveler, tablolar, formlar. PHP ve MySQL ile Web Programlama <frameset> </frameset> <table> </table> <form> </form> <input> text...28 password checkbox radio submit, reset, button, image : 3

3 file...29 <button> </button> <select> </select>, <optgroup> </optgroup>, <option> </option> <textarea> </textarea> <fieldset> </fieldset>, <legend> </legend> PHP VE MYSQL İLE WEB PROGRAMLAMA...33 PHP'ye Giriş PHP ile Ekrana Yazı Yazma Web Formundan Bilgi Almak Diziler Mantıksal İşleçler PHP Komutları...38 if if... else while do... while for...41 for (ilk_değer;koşul;işlem) switch Bazı PHP İşlevleri Include() ve Require() işlevleri mail() işlevi PHP ile Dosya İşlemleri fopen() işlevi fgets() ve fread() işlevleri fputs() ve fwrite() işlevleri feof PHP ile Dizin İşlemleri opendir() işlevi readdir() işlevi ereg() ve eregi() işlevleri ereg_replace() ve eregi_replace işlevleri md5() işlevi unlink() işlevi mkdir() ve rmdir() işlevleri PHP ile İşlevleri Yazmak MYSQL E GİRİŞ...51 Veritabanı Nedir? MySQL de Tablolar PHP İLE MYSQL KULLANMAK...55 Ziyaretçi Defteri Örneği Çerez Örneği Renk Tablosu Örneği :.

4 Önsöz Internet Programcılığı konusunda her şeyden önce bilinmesi gereken, bu işi öğrenmek istediğiniz ve çaba sarfettiğiniz oranda yeterli düzeye erişebileceğinizdir. Anlatılanları okumak ya da dinlemek bu konuya vakıf olmanızı sağlamayacaktır. Bunun öncelikli nedeni, web sayfası hazırlamanın ilk bakışta çok karmaşık gelen onlarca tekniğin bir arada ve yerinde kullanımını gerektiren bir uzmanlık alanı olması ve bu tekniklerin sayfaların başarılı sunumu ile anlam kazanmasıdır. Başarılı bir web sitesinin tasarımı, dört unsurun bileşimini gerektirmektedir. Bu unsurlar; sanat, tasarım, yönetim ve son olarak da programlamadır. Her bir unsur web sitesinin başarısında eşit oranda (%25) etkilidir. Dolayısıyla bu işi tek başına yapacak kişinin bu unsurların her birine vakıf olması gerekecektir (eğer bu işi bir ekip yürütecekse, bu unsurları gerçekleştirecek bir ekip kurulmalıdır). Dersimizin kapsamı %25 lik kısmı olan programlamayı içermektedir. Internet yayıncılığında dersin gerçek yararını görebilmek için kalan %75 i tamamlamak kişisel yeteneklere bağlıdır. Yukarıdaki paragrafta açıkladığımız nedenlerden dolayı elinizdeki bu kitapçık ile ya da belirli sürede alınan ders/kurslar ile profesyonel bir web sitesi hazırlamanız ne yazık ki mümkün değildir. Profesyonel bir site, teknik yeterliliğin yanında ve öncesinde görsel ve grafiksel açıdan da belli bir seviyeye ulaşmış olmayı gerektirir. Bu kitapçıkta değinilen konular ve dersimizin içeriği daha çok bir web sitesinin oluşturulmasında gerekli olan programlama bilgileri ve temel teknik konular üzerinedir. Dersimiz içerisinde öğrenmemiz gereken programlama ile ilgili konuların yanı sıra yönetimsel ve tasarımsal ufak ipuçları da verilecektir. Sanatsal yeterlilik ise kişinin becerisi ile ilgilidir. Öğrenme yeterliliğini gösterdiğiniz konuları yaşama geçirmeniz ve yararını görmeniz dileğiyle Seval Özbalcı - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 5

5 Internet Programciligi &Web Tasarimi 6 :.

6 HTML ile Web Tasarımına ve PHP-MySQL ile Web Programcılığına Giriş 1. HTML Nedir? HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde.html ya da.htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Sayılanların dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir. Web istemcimizin adres satırına gibi bir ifade yazarsak sunucu sistem bize, o adresin www kök dizinindeki index.html (ya da hangi giriş sayfası tanımlı ise) dosyasını görüntüleyecektir. 2. HTML nin Yapısı Daha önce değinildiği gibi html dosyaları sadece düz yazı dosyalarıdır. HTML öğrenmesi oldukça basit ve yaratıcılığa fazla açık olmayan bir dildir. Basittir çünkü, internette gezinirken görüntülediğiniz sayfaların kaynağından hazırlanırken kullanılan teknikleri öğrenmemiz mümkündür (Sayfanın üzerinde farenizin sağ tuşuna bastıktan sonra Kaynağı Görüntüle seçeneği ile). Beğendiğiniz tasarımları kendi sayfanızda kullanabilir, bu tasarımların hangi html kodları kullanılarak yapıldığını öğrenebilirsiniz. Yaratıcılığa fazla açık değil, çünkü html ile yazdığınız sayfalar PHP, ASP, CGI... gibi web programlama dilleri kullanılmadan statik html dışına çıkamaz. HTML kodlarını yazmak için özel bir düzenleyiciye ihtiyacınız yoktur. Bu iş için Windows altında NotePad ya da DOS-Edit, Linux altında pico, joe ya da vi gibi metin düzenleyicileri yeterlidir. HTML sayfalarınızı kod yazmaksızın FrontPage, Netscape Composer gibi programlarla da hazırlayabilirsiniz. Yalnız bu programlar kullanılarak hazırlanan sayfalar zaten dar olan HTML nin üreticilik alanını daha da daraltmaktadır. HTML bilmenin kullanıcıya her zaman fayda getireceği unutulmamalıdır (Dinamik Web Tasarımı için HTML nin kod düzeyinde bilinmesi gereklidir!). 3. HTML'ye Giriş Etiket, HTML dosyasında kullanılan komutlara verilen addır. HTML içinde kullanılan tüm etiketler < işareti ile başlar ve > ile biter. Ayrıca etiketin yorum aralığı da </etiket ismi> kalıbı ile bitirilir. Etiket kullanımına kısa bir örnek: <etiket1>...burası etiket1 in yorum aralığı...</etiket> <etiket2>...burası etiket2 nin yorum aralığı <etiket3>...burada etiket3 tanımlı...</etiket3>...etiket2 hala tanımlı Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 7

7 </etiket2> Görüldüğü gibi en son, etiket2 </etiket2>etiketi ile kapatılıyor. Dikkat ederseniz değişik etiketler birbirlerinin içinde kullanılabiliyor. Yani açık etiketin içinde başka bir etiket açıp istediğiniz işlemi gerçekleştirebiliyorsunuz. Etiketin bitiş işaretini (</etiket ismi>) vermediğiniz sürece o etiket tanımlı olarak işlem görür. Tüm HTML dosyaları <html> etiketi ile başlayıp </html> etiketi ile son bulur. Bunun yanında <html> etiketi ile <HTML> etiketi arasında hiçbir fark yoktur. Ancak etiketleri küçük harflerle yazmaya alışmanızı öneririm. İleride XHTML kodları yazmak zorunda kalabilirsiniz ve XHTML dilinde etiketlerin küçük harflerle yazılması zorunludur. HTML dosyaları temel olarak iki bölümden oluşur. Bunlar HEAD (Başlık) ve BODY (Gövde) kısımlarıdır. Başlık kısmında ziyaretçiye görünmeyen, sayfa hakkında tanımlayıcı bilgiler bulunur. Gövde kısmı ise web sayfamızın ziyaretçiye görünen kısmını yani asıl kısmını oluşturur. HTML Etiketleri <html> </html> HTML kodlarının yorum aralığını başlatmak için bu etiketi kullanırız. Sayfamızın head ve body bölümleri bu etiketin yorum aralığında tanımlıdır. 1 <html> 2 <head>... head etiketinin içeriği...</head> 3 <body> body etiketinin içeriği </body> 8 </html> Birinci satırda <html> etiketi ile HTML sayfamıza başlıyoruz. Daha sonra <head> ve <body> etiketleri <html> etiketi içerisinde tanımlanıp içerikleri yazılıyor. En son olarak da </html> etiketi ile HTML sayfamızı bitiriyoruz. Yazdığımız html dosyasının başında bu etiketin tanımlanmaması şu an kullanılan web istemciler açısından bir sorun oluşturmayacaktır. Fakat sitenizi ziyaret eden ziyaretçi eski bir istemci kullanıyorsa bu etiketi kullanmamanız bir takım sorunlar oluşturabilir (sonsuz uzunlukta sayfa gibi). En iyisi siz her html dosyasına başlarken ve bitirirken bu etiketi kullanın. Yorum alanında kullanılabilecek etiketler: HEAD, BODY <head> </head> Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır. 8 :.

8 <html> <head> <title>...</title> </head> <body>... body etiketinin içeriği... </body> </html> Yorum alanında kullanılabilecek etiketler: SCRIPT, STYLE, META, LINK, OBJECT, TITLE, BASE <body> </body> HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz. Girilecek Kod text = renk link = renk vlink = renk alink = renk bgcolor = renk background = resim_dosyası topmargin = değer leftmargin = değer rightmargin = değer onload = betik onunload = betik Görevi Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir. Sayfanızdaki bağların rengine renk ile belirtilen değeri verir. Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir. Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir. Sayfanızın arka plan rengine renk ile tanımlı değeri verir. Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, resim_dosyası kullanacağınız resmin adını temsil eder. Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler. Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler. Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler. Sayfa yüklenirken çalıştırılacak javascript betiğini belirler. Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler. Tablo 1: Body etiketinin bileşenleri Yukarıdaki tabloda kullanılan renk değeri HTML içinde kullanılan renk kodlarını temsil etmektedir. Altı basamaktan oluşan bu renk kodları ana renkler olan mavi, sarı ve kırmızının kullanılan renkteki tonuna göre onaltılık tabanda sayılarla istediğimiz rengi elde edebiliriz. Renk kodları hakkında kısa bir bilgi vermek gerekirse kodlar ikişer basamaklı üç bölümden oluşur. Aşağıdaki tablo bu konu hakkında kafanızda oluşan soru işaretlerinin silinmesinde size yardımcı olacaktır. Kırmızı Yeşil Mavi 00...FF 00...FF 00...FF Tablo 2: Renk Kodlarının Yapısı Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 9

9 2. Satırdaki aralıklara değişik değerler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) vererek rengi oluşturmamız mümkündür. Kod kullanmanın yanı sıra renkleri doğrudan İngilizce adlarını yazarak da kullanabiliriz. Örneğin beyazın kodu olan #FFFFFF yerine white yazmamızda sonucu değiştirmeyecektir. Dikkat ederseniz her renk kodu bir diyez (#) işareti ile başlıyor ve daha sonra altı basamaktan oluşan bir bölüm geliyor. Bu altı basamak içinde F yada f bulunduğu basamaktaki rengin tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin hiç kullanılmamasını sağlamak için kullanılır. Yine html kodlarında olduğu gibi renk kodlarında da büyük-küçük harf ayrımı yoktur. Yani #FFFFFF ve #ffffff aynı rengi yani beyazı temsil eder. <body text="#000000" bgcolor="#ffffff" link="#808080" vlink="#eaeaea" alink="#000000"> <body text="#000000" background="../resimler/arkafon.gif"> <body bgcolor="#334455" text= #ffffff" topmargin="0"> Yukarıdaki birinci kod satırı sayfamızın arka plan rengini beyaz, yazıları siyah, bağları ve ziyaret edilmiş bağları gri ve etkin bağları da siyah yapmak için kullanılır. İkinci satır ise yazı rengini siyah yapmak, bulunduğumuz dizinin bir üst dizinindeki resimler dizininde bulunan arkafon.gif resmini artalan yapmak için kullanılır. Son satır ile sayfamın arka fon ve yazı rengini belirliyor, sayfamın bileşenlerinin istemci penceresinin üst kenarlığına olan uzaklığı sıfırlıyorum. <title> </title> Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır. <head> <title>ilk HTML denemem</title> </head> Gibi bir kod parçası istemcimizin başlık çubuğunda İlk HTML denemem metninin görüntülenmesini sağlayacaktır. Bu etiket ile body etiketinde olduğu gibi renk seçenekleri kullanılamaz. <center> </center> Kendi yorum aralığında bulunan tüm etiketlerin ekran çıktılarını browser penceresine ekranı ortalayacak şekilde basar. <center>... Burası etiketin yorum aralığı... </center>... Burası center etiketinin yorum aralığının dışında Normal şartlarda HTML sola dayalı olarak çıktı verecektir. Ama yukarıdaki gibi bir kod örneğinin çıktısı aşağıdaki gibi olacaktır. Burası etiketin yorum aralığı Burası center etiketinin yorum aralığının dışında 10 :.

10 <hx> </hx> Başlık Etiketleri Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında Hx ifadesindeki x 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır. Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme kodu kullanılabilir. Etiketin kullanımı <h1 align="center">bu benim en büyük başlığım!</h1> şeklindedir. Etiketin yorum aralığındaki metin başlık olarak ekrana basılır. <h1 align="center" style="color:black;">bu başlıklar gittikçe küçülecek!!!</h1> <h2 align="center" style="color:blue;">bu başlıklar gittikçe küçülecek!!!</h2> <h3 align="center" style="color:navy;">bu başlıklar gittikçe küçülecek!!!</h3> <h4 align="center" style="color:green;">bu başlıklar gittikçe küçülecek!!!</h4> <h5 align="center" style="color:maroon;">bu başlıklar gittikçe küçülecek!!!</h5> <h6 align="center" style="color:purple;">bu başlıklar gittikçe küçülecek!!!</h6> <b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt> Bunlar yazı tiplerinin nasıl yorumlanacağını belirten etiketlerdir. <b>kalın</b>, <i>eğik</i>, <s>üzeri çizili</s>, <u>altı çizili</u>, <small>küçük</small>, <big>büyük</big>, <tt>daktilo yazısı</tt> <sub> </sub>, <sup> </sup> Formül ve benzeri metinleri yazarken kullanılır. H<sub>2</sub>SO<sub>4</sub> <br> E = mc<sup>2</sup> <hr> Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Bu etiket ile tanımlanabilecek üç değişik özellik vardır. Girilecek Kod width = "genişlik" size = "kalınlık" color = "renk" Görevi Çizilecek çizginin yatay uzunluğunu belirlemek için kullanılır. Çizilecek çizginin kalınlığını belirtir. Çizilecek çizginin rengini belirtir. Tablo 3: hr etiketi içinde kullanılan kodlar Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi <hr width="100%" color="#0000f8" size="4"> çizer. <p> </p> ve <br> BR etiketinin sonlandırıcısı (</br>) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır. Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 11

11 Burada bir metin var Bir alt satıra geçtiğimi sanıyorum! Yukarıdaki metin ekran yan yana basılacaktır. Her ne kadar kodu yazarken satır atlayarak yazmış olsak bile browser bu kodu yorumlarken arada <br> etiketi olmadığı için bu iki cümleyi yan yana basacaktır. Burada bir metin varbir alt satıra geçtiğimi sanıyorum! Kodun doğru kullanımı aşağıdaki şekilde olmalıdır. Burada bir metin var <br>bir alt satıra geçtim! <p> ve </p> etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir. Girilecek Kod align = "left" align = "right" align = "center" align = "justify" class = "css_etiketi" style = "css:tanımı1;css:tanımı2;..." Görevi Paragrafı sola dayalı olarak yazar. Paragrafı sağa dayalı olarak yazar. Paragrafı ortalar. Paragrafı sola ve sağa dayalı olarak yazabilmek için sözcüklerin ara boşluklarını değiştirir. Önceden tanımlı bir CSS dosyasındaki font-size, color... gibi özellikleri paragrafa uygular. font-size, color... gibi css tanımlarını paragrafa uygular. Tablo 4: <p> etiketinin bileşenleri <p align="justify"> Burada bir metin var.<br> Bir alt satıra geçtiğimi sanıyorum! yazımı bir paragraf içinde yazıyorum. </p> Daha önceki örneğe ek olarak Burada bir metin var. Bir alt satıra geçtiğimi sanıyorum! Daha önceki örneğe ek olarak yazımı bir paragraf içinde yazıyorum. <pre> </pre> Bir kod parçası, bir konsol ekranı alıntısı ya da bir ascii-art gibi içindeki boşlukların korunmasını gerektiren metinleri görüntülemek için kullanılır. Web istemciniz, tüm diğer etiketler için yorum aralığındaki fazladan boşluklarını gözardı ederek metni sarmaladığı halde <PRE> etiketinin yorum aralığındaki metnin boşluklarını olduğu gibi görüntüler. <pre> switch($i){ case "2": echo "Değeri 2"; break; case "3": echo "Değeri 3"; break; default: echo "Değeri bilinmiyor"; break; 12 :.

12 } </pre> Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır. switch($i){ case "2": echo "Değeri 2"; break; case "3": echo "Değeri 3"; break; default: echo "Değeri bilinmiyor"; break; } Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd> 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ı vermek için kullanışlıdır. <dt> ve <dd> etiketleri <dl> etiketinin yorum aralığı içinde kullanılır. <dt> etiketi terim, <dd> etiketi ise açıklaması için kullanılır. Bir örnekle kullanımı daha kolay anlaşılacaktır. <dl> <dt>align = "left"</dt> <dd>paragrafı sola dayalı olarak yazar.</dd> <dt>align = "right"</dt> <dd>paragrafı sağa dayalı olarak yazar.</dd> </dl> Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır. align = "left" Paragrafı sola dayalı olarak yazar. align = "right" Paragrafı sağa dayalı olarak yazar. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li> Yukarıdaki bölümde anlatılan tanımlama listesinden başka iki tür liste daha vardır. <ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralama sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür. <li> etiketi bu etiketlerin yorum aralığında kullanılarak liste öğeleri verilir. Bu etiketlerle kullanılabilecek yardımcı kodları aşağıdaki tabloda belirttim. Girilecek Kod type = "listeleme türü" start = "değer" Görevi Bu alanda belirtilebilecek değerleri aşağıda bir tablo halinde verdim. Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır. Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 13

13 value = "değer" Sadece <li> etiketi içindir. Yorum aralığındaki liste öğesinin numarasını belirtmek amacıyla kullanılır. start = "değer" parametresi ile belirtilen değer, sayısal olmasa bile burada sayısal bir "değer" belirtilebilir. Tablo 5: Liste kullanımı için yardımcı kodlar Sıralamasız liste (<ul>) türü değerleri: Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol ismi kullanılır: 1. disc - İçi dolu bir daire görüntüler 2. circle - İçi boş bir daire görüntüler 3. square - İçi dolu ya da boş bir kare görüntüler Türü Sıralama 1 Onluk tabanda numaralama (1,2,3,4,...) i Küçük rakamlarla romen sayıları (i,ii,iii,iv,...) I Büyük rakamlarla romen sayıları (I,II,III,IV,...) a Küçük harflerle alfabetik (a,b,c,...) A Büyük harflerle alfabetik (A,B,C,...) Tablo 6: Sıralı liste (<ol>) türü değerleri <ol type="i"> <li> Birinci öğe...</li> <li> İkinci öğe... <ul type="square"> <li>ikinci öğenin bir öğesi... <li>ikinci öğenin başka bir öğesi... </ul> </li> <li> Üçüncü öğe...</li> </ol> Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır. i. Birinci öğe... ii. İkinci öğe... İkinci öğenin bir öğesi... İkinci öğenin başka bir öğesi... iii. Üçüncü öğe :.

14 <img> Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP'lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır. GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz kısarak boyut sorununu halleder. Bunun yanı sıra sayfamızda, mecbur kalmadıkça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaçınmak sayfamızın yüklenmesini kolaylaştıracaktır. Yine bu etikette de sonlandırıcı yoktur. Yani bir yorum aralığı belirtmez. Bu etiket altında kullanacağımız resmin bazı özelliklerini belirtmek için tanımlayıcı bazı kodlar kullanırız. Bu kodları aşağıdaki tabloda belirttim. Girilecek Kod Görevi src = "resim_dosyası" Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz. width = "genişlik" Resmin genişliği burada tanımlanır. Büyük bir resminiz varsa genişlik değerini "100%" vererek resmin web istemci genişliğine dinamik uydurulmasını sağlayabilirsiniz. height = "yükseklik" vspace = "düşey_aralık" hspace = "yatay_aralık" alt = "metin" Resmin yüksekliği burada tanımlanır. Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı. Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı. Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır. border = "değer" Resmin dışında çerçeve çizgisi olacaksa "1", olmayacaksa "0" değeri kullanılır. Tablo 7: Resim kullanımı için yardımcı kodlar <img src=./resimler/banner.jpg width= 250 height= 85 alt= Bilgisayar Topluluğu > Yukarıdaki satır bulunduğumuz dizinin bir üstünde bulunan resimler dizinindeki banner.jpg dosyasını belirtilen ölçüler doğrultusunda ekrana basar. (Resmin boyutlarını belirtmek zorunlu değildir!). Alt kodu ile tanımlı kısım da resmin üzerinde belli bir süre beklendiğinde Bilgisayar Topluluğu yazısının belirmesini sağlar. <a> </a> Bu etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. <a> etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir. Girilecek Kod Görevi href = "URL" Yorum alanındaki bileşene tıklandığında yorumlanacak adres. target = "hedef" Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir. Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 15

15 name = "isim" type = "mime_türü" Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır. Hedefin içeriğini belirtmek için kullanılır. Tablo 8: Bağ vermek için kullanılan kodlar <a href= >Linux Belgelendirme Çalışma Grubu</a> <a href=" target="new">slackware Linux</a> <a href="mailto:abc@def.com">abc</a> İlkinden farklı olarak ikinci kodda target özelliği kullanılmıştır. Target özelliğine new değerinin verilmesi ile açılacak yeni site yeni bir istemci penceresinde açılır. Üçüncü satır belirtilen adrese eposta yollamak için kullanılır. Bağın üzerine tıklandığı zaman web istemcisinde öntanımlı olarak kayıtlı eposta istemcisi açılacaktır. Bunların dışında resimleri de bağ olarak kullanabilme imkanımız var. Sayfamızda resimleri bağ olarak kullanabilmek için kullanmamız gereken kalıp aşağıdaki gibidir. <a href= ><img src="../images/belgeler-logo.png" border="0"></a> <a href= ><img src="../images/belgeler-logo.png" border="1"></a> Yukarıdaki iki satır da görev olarak aynı şeyleri yaparlar. Fakat ziyaretçiye görünen bölümler arasında küçük bir fark vardır. İlk kod satırı oluşacak bağın etrafında çerçeve oluşturmayacaktır. Kullandığımız resimli bağlarda çerçeve oluşmasını engellemek için border="0" kodunu kullanırız. <font> </font> HTML dosyası içinde yazdığımız yazıların ekrana nasıl bir çıktı vereceğini bu etiket ile belirleriz. Uyumlu yazı tipleri ve renkler ile sayfanıza güzel bir görünüm kazandırabilirsiniz. Bu etiketin kullanımına alternatif olarak sayfanızda CSS de kullanabilirsiniz. CSS kullanımı sayesinde fazla kod yazımından da kurtulmuş olursunuz. Etiket ile birlikte yazı tipi, renk ve boyut belirtmek üzere üç kod kullanılır. Girilecek Kod face = "yazıtipi" color = "renk" size = "boyut" Görevi Kullanılacak yazı tipi belirlenir. Yazacağımız yazının rengi belirlenir. Yazımızın boyu belirlenir. Tablo 9: Font etiketi kodları <p><font face="tahoma" size="3" color="maroon"> <b>burada bir yazı var.</b></font></p> <p><font face="tahoma" size="4" color="maroon"> <b>burada bir yazı var.</b></font></p> <p><font face="tahoma" size="5" color="maroon"> <b>burada bir yazı var.</b></font></p> <p style="color:maroon;font-family:tahoma;font-weight:bold;font-size:125%"> Burada bir yazı var.</p> <p class="author">burada bir yazı var.</p> Yukarıdaki kod parçası ile ilk 3 satırda boyut değeri 3, 4, 5, yazı tipi tahoma ve rengi koyu kırmızı olan bir yazı yazılır. İlk 3 satırda <p>, <font> ve <b> etiketleri ile elde ettiğimiz sonucu sonraki 2 kodda sadece <p> etiketi ile elde edebiliriz. Son satırdaki class="author" ile tanımlı css kodu için belgeler.css 16 :.

16 dosyasında gerekli tanımlar bulunmaktadır. Gördüğünüz gibi CSS kullandığında elimizde daha fazla seçenek bulunmakta ve kod basitleşmektedir. Burada dikkat etmeniz gereken husus kullanılan yazı tipidir. Kendi bilgisayarınıza özgü yazı tipleri kullanmışsanız ve o yazı tipi ziyaretçinin bilgisayarında mevcut değilse yazdığınız yazılar ziyaretçinin web istemcisinin öntanımlı ayarları doğrultusunda ekrana basılır. <acronym> </acronym> Kısaltmalar için kullanılır. <acronym title="linux Kullanıcıları Derneği">LKD</acronym> Fare, "LKD" üzerine getirildiğinde kısaltmanın açılımı balon içinde görüntülenecektir. <meta> </meta> HTML dosyasındaki head etiketinin yorum aralığında tanımlanan bu etiket web istemcisine ve arama motorlarına sayfamız hakkında bilgi verir. Bu etiketi ile birlikte kullanılan yardımcı kodların açıklaması ilk bakışta size biraz karmaşık gelebilir. Her kodun kendisi ile birlikte tanımlanan yardımcı kodları da olduğu için bu etiket ile birlikte kullanılan kodların listesini öncekilerden daha farklı bir şekilde vermeyi uygun gördüm. Girilecek Kod Görevi name = "veritürü" Bu bölümde author, description ve keywords özellikleri tanımlanır. http-equiv = "veritürü" size = "boyut" Bu bölümde refresh, expires, content ve contentstyle-type özellikleri tanımlanır. Yazımızın boyu belirlenir. Tablo 10: Meta etiketi ana kodları Yukarıdaki tabloda verdiğim kodlar ile birlikte tanımlanan yardımcı kodları tablo şeklinde vermek yerine örnek şeklinde vermenin daha faydalı olacağını düşündüm. <meta name= author content= Linux Belgelendirme Çalışma Grubu > <meta name= description content= Linux Belgelendirme Çalışma Grubu Web Sayfası > <meta name= keywords content= linux unix bsd openbsd freebsd programlama ozguryazılım özgüryazılım sunucu internet > Yukarıdaki birinci satır (author), sayfayı hazırlayanların kim olduğu hakkında kısa bilgiler verir. İkinci satır (description), sitenin ne hakkında olduğuna dair kısa bir bilgi verir. Sonuncu satır ise (keywords), arama motorlarına bilgi sağlamak için kullanılır. Yani siz bir arama motoruna girip arama kısmına linux, unix, bsd, openbsd, freebsd, programlama, özgüryazılım, sunucu, internet sözcüklerinden birisini yazarsanız bu site adresi de görüntülenecek adresler arasında olacaktır. <meta http-equiv= refresh content= 5; URL= > <meta http-equiv= expires content= Wed, 25 Feb :00:00 GMT > <meta http-equiv= content content-type= text/html; charset=iso > <meta http-equiv= content-style-type content= text/css > Yukarıdaki birinci kod satırı (refresh) sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 17

17 İkinci kod satırı (expires) GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir. Üçüncü kod satırı (content) tarayıcıya html dosyamızda kullandığımız karakter kodlamasının ISO olduğunu belirtir. Dördüncü ve son satır (content-type-style) belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir. Daha önce de belirtildiği gibi meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez. Bu bilgiler genellikle tarayıcıya ve arama motorlarına bilgi sağlamak için kullanılır.  Bu etiket yorum aralığı olarak kullanılır. Bu kodun kullanım amacı HTML kodunun içine kullanıcıya görünmeyen açıklamalar yerleştirmektir. (İlk etapta işimize yaramasa bile tablo ve frame kullanarak hazırlanan karışık HTML dosyalarında çok yardımcı olacaktır.)  Basit Bir HTML Dosyası Örneği HTML ye giriş için bu kodlar yeterli olacaktır. Bu bölümde buraya kadar verilen HTML kodlarını kullanarak basit bir sayfa örnek olarak hazırlanmıştır. Kullanılan kodların nerelerde ve nasıl kullanıldığına dikkat etmeniz önerilir. Sayfanın yapımında göze hitap etmesinden çok öğretici olmasına dikkat edilmiştir. <html> <head>  <meta name="author" content="acemi tasarımcı"> <meta name="description" content="acemi tasarımcı web okulu"> <meta name="keywords" content="web,html,css"> <meta http-equiv="content" content-type="text/html; charset=iso "> <title>ilk HTML Denemem</title> </head>  <body text="#000000" bgcolor="#ffffff" link="#808080" vlink="#eaeaea" alink="#000000"> <h1> Bu büyük boyutlu ortalanmamı bir başlık</h1> <br><center> <h1> Bu da büyük boyutlu bir başlık fakat ortalanmış.</h1> </center>  <br><br> <font face="verdana" size="5" color="#800000"> 18 :.

18 Buradan itibaren paragrafıma başlayacağım. </font>  <p> Bu sayfayı yapmaktaki amacım etiketlerin ve bağlı kodların nasıl kullanıldığını göstermektir. Yukarıdaki kırmızı başlığı <font> etiketini kullanarak elde ettim. İnternette gezerken ziyaret ettiğiniz sayfaların kaynağını görüntüleyerek de değişik teknikler öğrenebilirsiniz. </p>  <a href="mailto:fni18444@gantep.edu.tr">bana yollayın</a><br><br> <br><br>  Aşağıdaki resmin görüntülenmesi için HTML dosyanızın olduğu dizine <b>abc.png</b> resmini oluşturmalısınız.<br> <a href=" src="abc.png" border="0"></a> <br><center> <hr width=80%> <u>bu altı çizili bir yazı</u>, <i>bu yana yatık, italik, bir yazı</i><br> Bu sayfanın amacı <acronym title="hyper Text Markup Language">HTML</acronym> kodları hakkında bilgi vermektir. <hr width=80%>  </body> </html> Meta Etiketi ile Yönlendirme Örneği Burada <meta> etiketindeki refresh özelliğini kullanarak yönlendirmeye bir örnek verilmiştir. Sayfada yazılı olan kodları herhangi bir metin düzenleyici içine yapıştırıp, dosyaları belirtildiği gibi kaydedin. Daha sonra ornek_html2.html dosyasını üzerine çift tıklayarak açıp nasıl çalıştığını görüp ilgili kod satırlarını inceleyebilirsiniz.  <html> <head> <title>geçici Sayfa</title> <! -- meta etiketindeki refresh kodu ile başka bir sayfaya yönlendirme yapılıyor -- > <meta http-equiv="refresh" content="10;url=ornek_html2_ana.html"> </head> <body bgcolor=# text=#eaeaea link=#eaeaea vlink=#eaeaea alink=#808080> <br><br> <center> Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 19

19 <h1> Bu sayfa açıldıktan 10 saniye sonra otomatik olarak aynı dizinde bulunan <a href="./ornek_html2_ana.html"> ornek_html2_ana.html</a> dosyasını açacaktır. </h1> </center> </body> </html> Yukarıdaki dosya bizim birinci HTML dosyamız. Bu dosya açıldıktan 10 saniye sonra otomatik olarak aşağıdaki dosyayı açması gereklidir.  <html> <head> <title>ana Sayfa</title> </head> <body bgcolor="#334455" text="#eaeaea"> <center> <h1> ornek_html2_ana.html dosyasındasınız. <br>yönlendirme başarılı! </h1> </center> </body> </html> 20 :.

20 CSS (Cascading Style Sheets) <font> etiketini anlatırken, bu etiket yerine CSS kullanımının tasarımcıya kolaylık sağlayacağını söylemiştim. CSS sayesinde HTML ile kullanabildiğimiz etiketlerin özelliklerini değiştirebiliriz. Mesela hazırladığımız bir sayfada <h1> ve <h2> etiketi ile yazılacak yerlerin renginin #55558f kodu ile gösterilen renk olmasını istiyoruz. Normalde bunun için her başlık yazacağımız yere <font color="#55558f"> yazmamız gerekecekti ama CSS bizi bu zahmetten kurtarıyor. CSS kodlarımızı HTML dosyamızda kullanabilmemiz için değişik yollar vardır. Bunlardan ikisi kodları direk HTML nin <style> etiketi içerisine yazmak diğeri ise CSS kodlarımızı ayrı bir dosyaya yazmamızdır. <html> <head><title>css Denemesi</title> <style> h1 { color: #55558f } h2 { color: #55558f } </style> </head> <body> <h1>merhaba. Bu yazının rengini CSS ile ayarladım.</h1> <h2>ayrıca bu yazınınki de.</h2> </body> </html> Yukarıdaki örneği bir HTML dosyasına yazıp, dosyayı açarsak, aşağıda göreceğiniz gibi başlıkların rengi siyah olmayacaktır. Bunun sebebi CSS ile <h1> ve <h2> etiketlerinın özelliklerini değiştirmiş olmamızdır. Aynı örnekteki <style> etiketini... <style> h1, h2 { color: #55558f } </style>... şekilde yazmamızda sayfanın görünümünde bir değişikliğe yol açmayacaktır. Aynı sonucu elde etmek için kullanacağımız bir başka yöntem ise ayrı bir CSS dosyası hazırlamaktır. Bu yöntem önceki yönteme nazaran daha kullanışlıdır, çünkü hazırladığımız CSS dosyasını birden çok HTML dosyasında kullanma olanağı buluruz. Aşağıdaki kodları boş bir metin dosyasına yazıp ilk.css adı ile kaydedin. h1, h2 { color: #55558f } Daha sonra yeni HTML dosyası içine <html> <head> <title>css Denemesi</title> <link rel="stylesheet" href="ilk.css" type="text/css"> </head> <body> Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 21

21 <h1>merhaba. Bu yazının rengini CSS ile ayarladım.</h1> <h2>ayrıca bu yazınınki de.</h2> </body> </html> kodlarını yazıp kaydedin. HTML dosyasını açtığınız zaman ilk CSS sayfamızın aynısı ile karşılaşırız. Burada CSS dosyamız ayrı bir dosya olduğu için sadece bir dosyada değil, sitemizdeki tüm HTML dosyalarında kullanılabilir. Tüm dosyalarımızda belli bir standardı hedef almamız sitemizde uyumlu bir görünüm oluşmasına yardımcı olacaktır. CSS dosyalarında tanımlanabilecek özellikler çok çeşitlidir. CSS1 de yaklaşık 50 çeşit özellik (color, font-size... gibi) tanımlanabilmesine karşın 1998 den itibaren kullanılan CSS2 de yaklaşık 120 özellik tanımlanabilmektedir. CSS hakkında daha ayrıntılı bilgi için adresindeki belgeyi okumanızı hatta bu belgeyi bir başvuru kaynağı olarak makinanızda bulundurmanızı tavsiye ederim. Burada CSS nin 2.sürümü olan CSS2 anlatılmaktadır. Belgeler sitesinde kullanılan ve birçok web istemcisi ile uyumluluğu denenmiş kodlar içeren belgeler.css dosyasını da incelemenizi öneririm. Bu dosyada kullanılan pek çok özellikten burada bahsedilmeyecektir. Ancak bu dosyayı kitaplığın sayfalarının dosyaları ile birlikte inceleyerek neyin niçin yapıldığını anlayabilirsiniz. 22 :.

22 Web Programcılığına Giriş Çerçeveler, tablolar, formlar. PHP ve MySQL ile Web Programlama Internet'te gezerken üye kaydı yapan sitelere, ziyaretçi defterlerine ve sayaçlara dikkat etmişsinizdir. Buraya kadar öğrendiğiniz HTML kodları ile bir siteye sayaç, ziyaretçi defteri, forum veya şifreli giriş yapabilmeniz olası değil. Saydıklarımızı yapabilmeniz için web programlama dilleri dediğimiz PHP,ASP, CGI... gibi diller hakkında bilginizin olması gereklidir. Bu bölüm altında HTML ile frame, tablo ve form kullanımının yanı sıra PHP ile web programlama ve MySQL ile veritabanı gibi konulara giriş yapılacaktır. Tabii önceki bölümde anlatılan HTML kodları gibi burada verilen PHP ve MySQL bilgisi sadece size bir başlangıç olacaktır. PHP ve MySQL in kendilerine ait, her biri için yaklaşık bin sayfalık belgeleri bulunmaktadır. <frameset> </frameset> Sayfamıza çerçeve desteği katmak için kullanılan etikettir. Etiketin kullanımına geçmeden önce yabancı olan okuyucular için çerçeve kavramını açıklamak istiyorum. Çerçeve desteği içeren bir sayfa oluşturmak için en az üç tane normal HTML dosyasına ihtiyacımız vardır. Bu üç dosyadan biri hangi HTML dosyalarının çerçeveleri oluşturacağını belirler. Diğer ikisi de çerçeveleri oluşturur. Çerçeve kullanımına en güzel örnek yahoo ve hotmail gibi eposta sunucularının kullanıcı arayüzüdür. Girilecek Kod cols = "değer" rows = "değer" frameborder = "değer" Görevi Bir çerçevenin ekrandaki genişliğini verir. Bir çerçevenin ekrandaki yüksekliğini verir. Çerçeveler arasında çizgi olup olmayacağı belirlenir Tablo 11: Frameset yardımcı kodları <frameset cols= 125,* frameborder= 0 > <frame name= menu target= ana src= menu.html scrolling= auto > <frame name= ana src= ana.html scrolling= auto > <noframes> <body> <h1>oppps...web istemcinizin frame desteği yok!!!!</h1> </body> </noframes> </frameset> Yukarıdaki HTML kodlarını index.html adlı bir HTML dosyası içine yazıp dosyayı çalıştırmamız halinde hata ile karşılaşırız. İstemci HTML kodumuzda verilen bilgi doğrultusunda bulunduğumuz dizinde ana.html ve menu.html dosyalarını da arayacaktır. Bu dosyaları yazıp dizine kaydetmemiz halinde istemci penceresinin sol tarafından itibaren 125 piksellik alan <frame> etiketi ile belirtilen menu.html dosyasına ayrılacaktır. Frameset etiketi ile birlikte kullanılan frameborder = "0" kodu kullandığımız çerçeveler arasında çerçeve çizgisi oluşması engellenecektir. <frame> etiketi da frameset etiketi içerisinde yardımcı etiket olarak kullanılır. Kullanacağımız çerçeve sayfalarını ve özelliklerini belirlemek için kullanırız. Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 23

23 name = "ad" kodu ile kullandığımız çerçeveye bir isim veririz. Bu isim sayesinde target = "hedef" yardımcı kodu ile belirtilen sayfada bir bağa tıklandığı zaman açılacak yeni sayfanın yeri belirlenir. scrolling = "auto" kodu kaydırma çubuğu için kullanılır. <noframes> etiketi, eğer ziyaretçinin istemcisinin frame desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılır. Daha çok eski ve Linux altında kullanılan metin tabanlı istemcilerde frame desteği yoktur. Son olarak da frame etiketi ile birlikte kullanılan src = "dosya adı" koduna gelmek istiyorum. Tahmin ettiğiniz gibi frame için kullanılacak sayfayı belirlemede kullanılır. <frameset rows= 125,* frameborder= 0 > <frame name= menu target= ana src= menu.html scrolling= auto > <frame name= ana src= ana.html scrolling= auto > <noframes> <body> <h1>oppps...web istemcinizin frame desteği yok</h1> </body> </noframes> </frameset> Yukarıdaki kod kümesi de ilkinden farklı olarak sayfaları yahoo.com'daki gibi değil de biri yukarıda diğeri de onun aşağısında olacak şekilde konumlandırılır. Sayfanın ilk 125 pikseli ilk dosyaya geri kalanlar da diğer dosyaya ayrılır. <table> </table> Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodları aşağıda tanımladım. Girilecek Kod border = "değer" width = "değer" height = "değer" bgcolor = "renk" cellpadding = "değer" Görevi Tablonun kenarlığının varlığını belirler. Tablonun genişliği belirlenir. Tablonun yüksekliği belirlenir. Tablonun zemin rengi belirlenir. Tablo gözeleri içindeki öğelerin tablo kenarlıklarına uzaklığı belirlenir. cellspacing = "değer" Tablo 12: Table etiketi yardımcı kodları Bu kodları verdikten sonra basit bir tablo örneği yapalım. Örnekte table etiketi dışında başka etiketlerin de kullanıldığına dikkat edin. <table border="1" bgcolor="#aabbcc"> <tr> <td bgcolor="#f80000">burada bir yazı var</td> <td>burası da başka bir göze.</td> </tr> </table> 24 :.

24 Yukarıdaki kodları dikkatli bir şekilde incelersek, <tr> ile satır başlangıcı ve <td> ile sütun başlangıcı yapıldığını fark edebiliriz. Yani her <tr> etiketi bize bir satır açar ve biz <td> etiketi ile bu satıra sütunlar yerleştiririz. Daha sonra </tr> etiketi ile satır bitirilir. Yukarıdaki tabloya bir satır daha eklemek için aşağıdaki gibi bir kod kümesi kullanırız. <table border="1" bgcolor="#aabbcc"> <tr> <td bgcolor="#f80000">burada bir yazı var</td> <td>burası da başka bir göze.</td> </tr>  <tr> <td bgcolor="#00f800" width="50%">ikinci satırın ilk sütunu</td> <td>ikinci satırın ikinci sütunu</td> </tr> </table> Yukarıdaki kod kümesi bize iki satırlı bir tablo verecektir. <td> etiketi ile birlikte width, bgcolor gibi özelliklerin kullanılabildiğine dikkat edin. Peki ya iki sütunluk bir satır ya da iki satırlık bir sütun yapacaksak nasıl yapacağız? Aşağıdaki kodları incelerseniz sorunuza cevap bulabilirsiniz. <table border="1" bgcolor="aabbcc" width="80%"> <tr> <td bgcolor="#f80000">burada bir yazı var</td> <td>burası da başka bir göze.</td> </tr>  <tr> <td bgcolor="#00f800" width="50%">ikinci satırın ilk sütunu</td> <td>ikinci satırın ikinci sütunu</td> </tr >  <tr> <td colspan="2"> <center> Tablomuz iki sütunluk olmasına rağmen, burada iki sütunluk bir satır var. </center> </td> </tr> <tr> <td rowspan="2">burası iki satırlık bir sütun.</td> <td>burası ilk satır.</td> </tr> Seval ÖZBALCI - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 25

25 <tr> <td>burası da ikinci satır.</td> </tr> </table> Yukarıdaki örneklerde tabloda kenarlıkların görünüp öğretici olması için border= 1 kodu kullılmıştır. Sayfalarınızda gerekmedikçe kenarlık kullanmamanız sayfanızın görünümü açısından daha iyi olacaktır. <form> </form> Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. Formlar yoluyla ziyaretçiden bilgi alabilir, aldığımız bilgi doğrultusunda birçok işlemi gerçekleştirebiliriz. Ziyaretçiye gönderilecek formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız bileşenler olacaktır. Form etiketi ile birlikte en çok kullanılan iki kod: action ve method dur. Girilecek Kod Görevi action = "dosya ismi" Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu. method = "yöntem" Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi Tablo 13: Form etiketi yardımcı elemanları Formlar hazırlanırken çok değişik elemanlar kullanılır. Şimdi formumuza dahil edilebilecek elemanları kısaca tanıyalım. Tanımladığımız elemanların etkin kullanımı için form etiketinin yorum aralığı içinde kullanılması gereklidir! Bu elemanlar form etiketinin dışında da kullanılabilirlerse de istenen fayda sağlanamayacaktır. Düğmeler 3 tür düğme vardır: 1. Gönderme düğmeleri Tıklandığında formu gönderir. Bir form üzerinde birden fazla gönderme düğmesi bulunabilir. 2. Sıfırlama düğmeleri Tıklandığında formun içeriği başlangıç değerlerine döndürür. 3. Genel amaçlı düğmeler Öntanımlı bir davranışa sahip olmayan düğmelerdir. Tıklandığında event parametresinde belirtilen betiği çalıştırarak bazı ek işlevlerin gerçekleştirilmesinde kullanılırlar. Düğmeler ya doğrudan <button> etiketi kullanılarak ya da <input> etiketinde bir parametre olarak belirtilerek kullanılır. Daha fazla seçenek sağladığından doğrudan <button> etiketi kullanımı tercih edilir. Belirtildikleri etiketin type parametresinde bu 3 tür düğme sırasıyla submit, reset, button değerleri verilerek kullanılır. 26 :.

26 Onay kutuları Kare, işaretlenebilen kutucukları oluşturmak için kullanılır. <input> etiketinde bir parametre olarak belirtilerek kullanılır. Radyo düğmeleri Sayfamıza yuvarlak işaret kutucuğu bırakmak için kullanılır. Kullanılan kutucuğun onay kutusundan farkı, sadece bir seçenek işaretlenebilmesidir. <input> etiketinde bir parametre olarak type="radio" belirtilerek ve ek olarak value ve name parametreleriyle birlikte kullanılır. Menüler Ziyaretçi bu menüden mevcut seçenekler arasından herhangi birini seçerek bilgi girişinde bulunur. Sayfamıza bu elemanı eklemek için <select> etiketini kullanırız. Metin girişleri Metin girdilerini almak için iki tür eleman kullanılır. <input> etiketinde bir parametre olarak type="text" kullanılarak tek satırlık ve <textarea> etiketi ile oluşturulan çok satırlı metin girdi elemanlarıdır. Dosya seçim elemanları <input> etiketinde bir parametre olarak type="file" kullanılarak oluşturulan elemanlardır. Gizli elemanlar <input> etiketinde bir parametre olarak type="hidden" kullanılarak oluşturulan elemanlardır. Nesneler <object> etiketi kullanılarak oluşturulan elemanlardır. Şimdi tanımlanan elemanlarda belirtilen etiketlerin kullanımına bakalım. <input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. Girilecek Kod Görevi type = "eleman türü" Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım. name = "isim" Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. value = "değer" "radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer" eleman türüne göre değişir. Seval ÖZBALCI seval.ozbalci@bayar.edu.tr - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 27

27 size = "değer" "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. maxlength = "değer" checked = "değer" src = "dosya ismi" " alt = "metin" "text" ve "password" elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır. Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yoksayılır. image" elemanında resim dosyasını belirtmek için kullanılır. Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır. align = "left center right" Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır. readonly Veri girme amacıyla kullanılmayacak elemanlar içindir. disabled Veri girişi engellenecek elemanlar içindir. Tablo 14: Input etiketi yardımcı kodları type parametresi ile belirtilebilecek eleman türleri: text Formumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır. Adı: <input type="text" name="firstname"><br> Soyadı: <input type="text" name="lastname"> Adı: Soyadı: password Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir. Kullanıcı: <input type="text" name="username"><br> Parola: <input type="password" name="password"> Kullanıcı: Parola: checkbox Formumuza onay kutuları eklemek için kullanılır. <input type="checkbox" name="kutu1" checked="on"> HTML<br> <input type="checkbox" name="kutu2"> PHP<br> <input type="checkbox" name="kutu3"> MySQL 28 :.

28 HTML PHP MySQL radio Formumuza radyo düğmeleri eklemek için kullanılır. submit, reset, button, image Formumuzda belirtilen bilgileri ilgili dosyaya yollamak için kullanılacak düğmeler yerleştirmek için kullanılır. Submit formu kabul eder ve yollar, reset ise girilen bilgileri sıfırlar. Button ve image herhangi bir amaçla kullanmak içindir. Diğer ikisi gibi öntanımlı bir davranışı olmayan, gerçekleştireceği eylem bir betikle tanımlanabilen düğmelerdir. Image ile oluşturulan düğme src parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur. <form action=" method="post"> <p> Adınız: <input type="text" name="firstname"><br> Soyadınız: <input type="text" name="lastname"><br> Eposta adresiniz: <input type="text" name=" "><br> <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br> <input type="radio" name="cinsiyet" value="disi"> Dişi<br> <input type="submit" value="send"> <input type="reset" value="sıfırla"> </P> </form> Adınız: Soyadınız: Eposta adresiniz: Erkek Dişi OK Sıfırla file Formumuza dosya ismi giriş alanı eklemek için kullanılır. <input type="file"> Seval ÖZBALCI - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 29

29 <button> </button> Düğmelerin input etiketiyle kullanımına benzer şekilde kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka etiketlerin yeralabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Yukarıdaki örneği button etiketi ile yazarsak farkları görebilirsiniz. <form action=" method="post"> <p> Adınız: <input type="text" name="firstname"><br> Soyadınız: <input type="text" name="lastname"><br> Eposta adresiniz: <input type="text" name=" "><br> <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br> <input type="radio" name="cinsiyet" value="disi"> Dişi<br> <button name="submit" type="submit" value="submit"> <img width="20" height="21" src="../images/belgeler-logo.gif"/>gönder </button> <button name="reset" type="reset" value="reset"> <img width="20" height="21" src="../images/belgeler-logo.gif"/>sıfırla </button> </P> </form> <select> </select>, <optgroup> </optgroup>, <option> </option> <select> etiketi seçim listesi oluşturmakta kullanılır. <option> etiketi ile liste öğeleri belirtilir. <optgroup> etiketi ise bu liste elemanlarını konularına göre gruplamakta kullanılır. Bir select etiketi en azından bir option etiketi içermeli ve optgroup etiketleri iç içe olmamalıdır. Tek veya çok seimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir. Tek seçimli aşağıya açılan liste örneği: <select name="os_type"> <option value="win">windows 9x</option> <option value="winnt">windows NT</option> <option value="linux">linux</option> <option value="unix">unix</option> <option value="os2">os/2</option> <option value="macos">macos</option> </select> 30 :.

30 Çok seçimli (ctrl+farenin sol tuşu ile) liste örneği: <select name="menu" multiple> <option selected="" value="none">hiçbiri</option> <optgroup label="çorbalar"> <option value="c1">tarhana</option> <option value="c2">ezogelin</option> <option value="c3">işkembe</option> </optgroup> <optgroup label="yemekler"> <option value="y1">imambayıldı</option> <option value="y2">sultanbeğendi</option> <option value="y3">kadınbudu</option> </optgroup> <optgroup label="tatlılar"> <option value="t1">kazandibi</option> <option value="t2">tavukgöğsü</option> <option value="t3">keşkül</option> </optgroup> </select> <textarea> </textarea> İngilizce metin alanı anlamına gelen bu kelime formumuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır. Örnek aşağıdaki bölümde verilmiştir. <fieldset> </fieldset>, <legend> </legend> Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun alaşılırlığını arttırması ve kullanımını kolaylaştırması bakımından çok faydalıdır. <legend> etiketi gruplanmış elemanlara bir başlık oluşturur. Aşağıda bir hasta kartı örnek olarak verilmiştir. <fieldset> <legend>kişisel Bilgiler</legend><br/> Adı: <input name="personal_fname" type="text" size="20" tabindex="1"/> Soyadı: <input name="personal_lname" type="text" size="25" tabindex="2"/><br/><br/> Adresi: <input name="personal_address" type="text" size="55" tabindex="3"/><br/><br/>  </fieldset> <fieldset> <legend>tıbbî Geçmişi</legend><br/> <input name="gecirilen_hastalik" Seval ÖZBALCI - Internet Programlama Ders Notu -Tümü- CBÜ TMYO.: 31

31 type="checkbox" value="bogmaca" tabindex="20"/> Boğmaca <input name="gecirilen_hastalik" type="checkbox" value="kabakulak" tabindex="21"/> Kabakulak <input name="gecirilen_hastalik" type="checkbox" value="kizamik" tabindex="22"/> Kızamık <input name="gecirilen_hastalik" type="checkbox" value="sucicegi" tabindex="23"/> Suçiçeği<br/><br/>  </fieldset> <fieldset> <legend>ilaç Tedavisi</legend><br/> Halen kullanmakta olduğunuz ilaçlar var mı?<br/> <input name="medication_now" type="radio" value="evet" tabindex="35"/> Evet <input name="medication_now" type="radio" value="hayir" tabindex="35"/>hayır<br/><br/> Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve günlük dozlarını belirtiniz:<br/> <textarea name="kullandigi_ilaclar" rows="10" cols="60" tabindex="40"> </textarea> </fieldset> 32 :.

Daha göster