BIM 337 - CENG 307 BİRİNCİ DÖNEM 2010-11 Web Tabanlı Teknolojiler ve Uygulamaları (3,0) 3 Temel kavramlar. İnternet. İstemci/sunucu teknolojisi. Internet içerik sunucuları. HTML, Perl, CGI, JavaScript, Ajax, jquery, PHP, Asp, Java, takılabilir uygulama ekleri. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 1
Öğretim Üyesi Yer: e-posta Tuğrul Yılmaz 307 tugrul@engineering.mu.edu.tr DEĞERLENDİRME Ara Sınav % 35 Ödevler % 20 Devam % 5 Dönem sonu uygulama sınavı %20 Dönem sonu yazılı sınavı % 20 Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 2
Hafta # Başlıklar 1 Giriş. 2 HTML. 3 HTML, styles,css. 4 Javascript e giriş. 5 Javascript de nesneler (Objects in Javascripts). 6 Javascript ile dinamik HTML (Dynamic HTML with Javascripts) 7 Ajax, jquery 8 Ara Sınav 9 Perl 10 CGI 11 Perl ve CGI uygulamaları. 12 PHP. 13 PHP ve MySQL 14 PHP ve MySQL 15 Özet ve tartışma Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 3
HTML, XML, VE WORLD WIDE WEB HTML nedir ve ne için kullanılır? Kısa ad HTML Bağlantılı işaretleme dili ( Hypertext Markup Language ) anlamına gelir. HTML, dokümanların (yazı, resim, vs) bilgisayar ekranına belli bir formatta aktarılabilmesini sağlar. Bunun için kullanıcı tarafından web tarayıcıları (Internet Explorer, Firefox, Opera, vs) kullanılır. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 4
Tarihçe ~80, hypercard Apple ın bilgi yönetim sistemi (information management system). ~90 HTML in geliştirilmesi: CERN de Tim Bernes-Lee Yüksek enerji fiziği veri iletişimi için geliştirmeye başladı National Center for Supercomputing Applications (NCSA) ilk bugün kullandığımıza benzer tarayıcıyı Mosaic adı ile kullanıma sundu. Mosaic 1992 kullanıma verildi, 7 Ocak 1997 de geliştirilmesine son verildi. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 5
Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 6
HTML Standartları HTML standartları W3C denilen ilgili kuruluş ve kişilerden oluşan bir grup tarafından belirlenir. http://www.w3.org/consortium/siteindex Şu an üç resmi standart bulunuyor. 2. sürüm (1994) temel kabul edilmekte ve geriye dönük uyumluluk açısından halen desteklenmektedir. Sürüm 3.2, 1996 yılında kullanıma alındı; Sürüm 4.0 1997 yılında kullanıma alındı ve 1999 yılında biraz değiştirildi. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 7
W3C HTML 4.0 özellikler dokümanından bir not HTML değişik platformlarda ve tarayıcılarda iyi çalışmalıdır. Birlikte işlerliğin elde edilmesi bütün platformlar için tek doküman hazırlanacağından içerik sağlayıcıların giderlerini azaltır. Eğer bu konuda gayret sarf edilmezse, birbirlerine uyumsuz formatlardan oluşmuş firmalara özel, açık olmayan bir web dünyası oluşturulur ki, bu durum web in potansiyel ticari gücünü çok azaltacaktır. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 8
XML: Örün tarayıcısının özelliği HTML <h1>car</h1> <h2>make</h2> <p>ford Mustang <h2>seats</h2> <p>5 <h2>top speeds</h2> <p>70 mph XML <h1>car</h1> <make>ford Mustang</make> <seats>5</seats> <speed units= mph >70 </speeds> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 9
Ana Kurallar Eğer iyi kullanılırsa üst metin/bağlantılı metin (hypertext) güçlü bir sunum, arama ve bilginin kullanılması aracıdır. Eğer kötü kullanılırsa, anlamı bulanıklaştırır, gizler ve dokümanı kullanılamaz yapar. Biçimlendirme en iyi stiller (styles) ile elde edilir. Mutlak biçimlendirme kullanılacaksa (örneğin metin içinde font seçilmesi gibi) yazarların okunabilirlik ve estetik konusuna daha fazla dikkat etmeleri gerekir. Olabildiğince mutlak (absolute) adresleme yerine görece (relative) adresleme yapılmalıdır. Tarayıcı bu durumda sayfaları daha kolay bulur ve bu sitenizin taşınabilirliğini artırır. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 10
Doküman Etiketleri (Document Tags) Etiketler üçken parantezlerle sınırlanır: <h1>; Bunlar büyük, küçük harflere hassas değillerdir: <HEAD>, <head>, veya <head> aynıdır. Etiketlerin bir kısmı bitiş etiketi ile bitirilir: </h1>; Bazı karakterlerin kaçış karakteri (escape sequences) ile değiştirilmeleri gerekir. Birden çok beyaz boşluk (white space) karakteri (boşluk, tab ve yeni satır karakteri) tarayıcılar tarafından tek bir boşluk karakteri olarak algılanır. Bu durum gösterilen sayfayı değiştirmeden kaynak kodunu daha okunabilir yapar. Genellikle tarayıcılar anlamadıkları etiketleri görmezden gelirler. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 11
Doküman Etiketleri (Document Tags) Her HTML dokümanında dört etiketin mutlaka bulunması beklenir. Bunlar başlangıç, başlık, başlık adı ve gövde etiketleridirler. Bunlar <HTML>, <HEAD>, <TITLE> ve <BODY...> etiketleridirler. Ek olarak en başta <!DOCTYPE...> tanımlaması da kullanılabilir. Temel kural: Her ne kadar şu an kullanılan web tarayıcıları hatalara toleranslı iseler de, bundan sonraki sürümlerin bu kadar toleranslı olup olmayacağı bilinmemektedir. Eğer yaptığınız sayfaların ileride de bir değişiklik yapılmadan görülebilmesini arzu ediyorsanız, W3C nin tavsiyelerine uygun dokümanlar hazırlamanız gerekir. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 12
En basit örnek sayfa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE> Benim örnek sayfam</title> </HEAD> <BODY> <H1> Benim sayfam</h1> Merhaba dünya! </BODY> </HTML> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 13
Açıklama etiketi (Comment tag) Eğer bir HTML dokümanı hazırlıyorsanız, bunun içine gösterilen sayfada görünmeyecek ancak dokümanın içinde bulunacak açıklamalar koymak isteyebilirsiniz. Açıklama aşağı örnekteki etiketlerin arasına konur: <!-- bu bir açıklamadır ve web sayfasında görünmez. --> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 14
<body> içi etiketleri <p [align = left center right ] > paragraf metni </p> <h1 [align = left center right ] > başlık metni </h1> <h6 [align = left center right ] > başlık metni </h6> Yatay çizgi: <hr [align = left center right ] [size= n ][noshade][width= nn% ]> Temel kural: Metin sola yanaştırılmışsa (left alinged) en iyi görünür. Sayfanın ziyaretçilerini olabildiğince memnun etmeye çalışın ki tekrar tekrar gelsinler. Sayfanızın çok teknolojik olması ziyaretçiyi çok etkilemez de, çok ilgilendirmez de. Ziyaretçi aradığını en kolay şekilde bulmak ister. Bunu sağlayın. Yeteneklerinizi sergilemek için değil, sayfaları sergilemek için çalıştığınızı unutmayın. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 15
Örnek sayfa <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-9"> <meta http-equiv="content-language" content="tr"> <title>pamukkale Üniversitesi</title> </head> <body basefont size="5"> <h1>pamukkale Üniversitesi </h1> <h2>üniversitemiz hakkında...</h2> <!--Kimsebuuzunaçıklamayı kaynak kodunu görmek istemedikçe görmeyecek. Burada açıklama bulunacak... --> <p>bu site Üniversitemiz hakkında tüm bilgileri içermektedir. <hr> <h3>eğitim</h3> <p align="center">denizli'de kurulu Üniversitemiz hakkında herşey burada...</p> <hr noshade width="70%"> <a href="ex_html2.html">sonraki sayfa</a> </body> </html> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 16
Metin (Text) Eğer sayfanızı format la çeşitlendirmezseniz sıkıcı olur. Bu nedenle metin formatlama etiketleri kullanırız. Bunlardan bazıları <b> ve </b> bold, <i> ve </i> italics, <u> ve </u> underlined, <tt> ve </tt> typewriter. <basefont size= n > n=1,,7 sayfanın font büyüklüğünü belirler (artık kullanılmıyor). <font size= [+ -]n [color= #rrggbb ]> and </font> font karakteristiği. <sub>..</sub> alt indeks. <sup>..</sup> üst indeks. <br> yeni satır (line break). Yazdığınız formatı ekranda görmek istiyorsanız <pre> ve </pre> etiketlerini kullanabilirsiniz. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 17
Fontlar <font size=+2 color="blue face="verdana">verdana</font> <font size=+2 color= red face="arial">arial</font> <font size=+2 color= yellow face="helvetica">helvetica</font> <font size=+2 color= green face="impact">impact</font> <font size=+2 face="comic Sans MS">Comic Sans MS</font> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 18
Kaçış karakteri (Escape) dizinleri Özel karakterleri metin içinde kullanmayın. Bunun yerine kaçış karakteri dizinleri kullanın... Birçok karakter doğrudan html kaynak dokumanının içine yazılmaz... Örneğin "<", ">", " ", "&", ve ". Bunun yerine, "&escape_code;" yazın. Bu 5 karakter için escape kodları... < =< > => = & = & " = " Boşluk karakteri = Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> <meta http-equiv="content-language" content="tr"> <title>font boyutunu değiştirme</title> </head> <body> <h1>font Boyutlarının değiştirilmesi </h1> <basefont size=4> <p>bu metin 3 boyutlarında "base font" etiketi ile yazılmıştır... <p><font size=3>bu metin 3 boyutlarında "font" etiketi ile yazılmıştır...</font> <p>burada da daha büyük yazılmış bir metin <font size=7>büyük</font> <font size=+4>m</font> <font size=+3>e</font> <font size=+2>t</font> <font size=+1>i</font> <font size=-1>n</font> <pre> 1 2 3 4 5 6 7 a b c d e f g </pre> <a href="ex_html3.html">sonraki sayfa</a> </body> </html> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 20
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-9"> <meta http-equiv="content-language" content="tr"> <title>font özellikleri</title> </head> <body style="font-size: 16pt"> <h1>font Farklılıkları (Font Variations)</h1> <p>bir web sayfasında <b>basit</b> <i>etiketler</i> kullanılarak <strong>metnin</strong> <tt>web sayfalarındaki </tt> görünümünü değiştirilebilir. Alt ve üst simgeler (super<sup>script</sup> and sub<sub>scripts</sub> ) bile <em>desteklenmektedir.</em></p> <p><a href="ex_html4.html">sonraki sayfa</a></p> </body> </html> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 21
<html> <head> <title> Bilgisayar Mühendisliği Bölümü</title> </head> <body> <h3> Web Teknolojileri </h3> <p> Dersin ödevlerinin <strong>vaktinde</strong> hazırlanması <font color="#121212"> gerekmektedir.</font> Ayrıca derse <font size="+2">vaktinde</font> gelinmesi <i>şarttır</i>. Ödevlerden < 50 alınması başarısızlık nedeni olacaktır.<br> <i>" Kurallara dikkat "</i> <h3> Adresimiz</h3> <pre> Pamukkale Üniversitesi Bilgisayar Mühendisliği Bölümü Kınıklı Denizli </pre> </body> </html> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 22
Üstbağ (Hyperlink) <a href= address >.</a> <a href= ex_html2.html > next page </a> <a href= http://www.pamukkale.edu.tr > Pamukkale Üniversitesi </a> Eğer yeni bir pencere açmak istiyorsanız, etiketin sonuna target="_blank" ekleyin, örneğin <a href="http://www.neonlollipops.com/" target="_blank">neonlollipops.com</a>. <a href= #target >.</a> Dökümanın belli bir noktasına atlamak. <a name= #target">.</a> Atlama noktasının işareti. <a href= address#target >.</a> Başka bir dökümanın belli bir noktasına atlamak. <a name= #target">.</a> hedef yine bir önceki gibi. Altın kural: Mümkünse bağıl adres kullanın. Tam adresten kaçının. hyperlink kullanarak sayfalarınızı küçük, orta büyüklükte sayfalar olarak organize edin; sayfa indirme zamanını minimize etmeye çalışın. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 23
Listeler <ul> etiketi sırasız listeleri belirler. Bu etiketin içine listeleme elemanları konur. Bunların her biri <li> etiketi ile başlar. (eğer isterseniz </li> ile kapatabilirsiniz.) Listeleme elemanlarının sayısında bir limit yoktur. Her listelenen elemanın önüne bir nokta konur.. Sıralı liste de bir önceki gibidir. Sadece <ul> yerine <ol> ile başlar ve kapatıcı etiketi </ol> dir. Listeleme elemanları yine <li> ile başlar. Tanımlı liste biraz daha zordur. Bu liste <dl> ile başlar ve </dl> biter. <dt> liste elemanı tanımını <dd> ise bunun açıklamasını etiketler. Bunlar kapatılmayabilirler. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 24
<html> <head> <title> Bilgisayar Bölümü</title> </head> <body> <h2> İki basit liste</h2> <h3>dersler</h3> <ul> <li> web teknolojileri</li> <li> bilgisayar hukuku</li> </ul> <h3> Sınav günleri</h3> <dl> <dt>web</dt> <dd> 2 Kasım <i> Pazartesi </i> günü. </dd> <dt>hukuk</dt> <dd> henüz belirlenmedi. </dd> </dl> </body> </html> <h3>öğretim üyeleri</h3> <ol> <li> Tuğrul Yılmaz</li> <li> Abdulkadir Yaldır</li> </ol> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 25
Tablolar Tablolar <table> etiketi ile başlar ve genellikle border="n" niteliği ile devam eder. Eğer border="0 ise tablonun kenarları görünmez. Genellikle kullanılmazsa kenarlar görünmezdir ama değişik tarayıcıların özellikleri dikkate alınarak yazılsa iyi olur. border="1" ince kenardır, border="2" daha kalındır, vs. Tablo </table> etiketi ile bitmelidir. Aksi takdirde hiç görünmeyebilir. Her bir tablo satırı <tr> ve </tr> etiketleri içine konur. Her bir satırın içinde de <td> ve </td> etiketleri arasında hücre elemanları konur. Eğer ilk satır farklı isteniyorsa <th> ve </th> etiketleri kullanılabilir. Tablonun özellikleri başta yapılan nitelik tanımlamaları ile değiştirilebilir. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 26
Tablolar <table [align= center left right ] [border [= n ]][cellpadding= n ] [width= nn% ][cellspacing= n ]>.</table> <tr [align= center left right ] [valign= top center bottom ]> </tr> <th [align= center left right ] [valign= top center bottom ] [nowrap] [colspan= n ] [rowspan= n ]> </th> <td [align= center left right ] [valign= top center bottom ] [nowrap] [colspan= n ] [rowspan= n ]> </td> <caption> dizgi </caption> tabloyu açıklayan dizgi konur ve hemen tablo tanımlamasını takip eder. Tablonun satırları üç grupta toplanabilir. Bu tamamen isteğe bağlıdır ancak eğer satırlar gruplandırılırsa ve tablo birden çok sayfaya bölünürse, bu durumda thead grubundakiler her yeni sayfa başında, tfoot grubundakiler ise her sayfa sonunda tekrarlanır. <thead>.</thead> <tfoot>..</tfoot> <tbody>.</tbody> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 27
<html> <head> <title> Basit bir tablo</title> </head> <body> <h2> Basit bir tablo </h2> <table border="1" width="400px"> <tr> <th width="35%">sol sütun</th> <th> Sağ sütun</th> </tr> <tr> <td> Bir miktar veri </td> <td> Daha çok ve uzun bir veri satırı buraya konulmuş...</td> </tr> </table> </body> </html> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 28
Resimler <body background= URL > </body> Sayfanın tabanına belirlenen resmi koyar. <img src= URL name height= n width= m [alt= string ] [align= top center bottom ] [usemap= URL ]> resmi gösterir. Resmi metin olmadan göstermek istiyorsanız paragrafın içine koyun. <a href= URL > text message </a> metin hyperlink. <a href= URL ><img src= filename ></a> görüntü hyperlink. Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 29
Görüntü Eşleme (Image map) <MAP NAME="map1"> <AREA HREF="contacts.html" ALT="Contacts" TITLE="Contacts" SHAPE=RECT COORDS="6,116,97,184"> <AREA HREF="products.html" ALT="Products" TITLE="Products" SHAPE=CIRCLE COORDS="251,143,47"> <AREA HREF="new.html" ALT="New!" TITLE="New!" SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257"> </MAP> <IMG SRC="testmap.gif" ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300 USEMAP="#map1"> <BR> Eylül 2010 Tuğrul Yılmaz - Pamukkale Üniversitesi 30