BIM CENG 307 BİRİNCİ DÖNEM

(1)

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.

(2)

Öğretim Üyesi Yer: e-posta

Tuğrul Yılmaz 307 [email protected]

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

(3)

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 PHP ve MySQL

(4)

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.

(5)

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

(6)

(7)

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.

(8)

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.

(9)

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>

(10)

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.

(11)

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

Doküman Etiketleri (Document Tags)

(12)

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.

(13)

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>

(14)

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

(15)

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

(16)

Örnek sayfa

<html>

<head>

<title>Pamukkale Üniversitesi</title>

</head>

<h1>Pamukkale Üniversitesi </h1>

<h2>Üniversitemiz hakkında...</h2>

<!-- Kimse bu uzun açı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>

<a href="ex_html2.html">Sonraki sayfa</a>

</body>

</html>

(17)

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.

(18)

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>

(19)

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 =  

(20)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Font boyutunu değiştirme</title>

</head>

<body>

<h1>Font Boyutlarının değiştirilmesi </h1>

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

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

(21)

<html>

<head>

<title>Font özellikleri</title>

</head>

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

(22)

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

(23)

Ü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

(24)

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.

(25)

<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>Öğretim üyeleri</h3>

<ol>

<li> Tuğrul Yılmaz</li>

<li> Abdulkadir Yaldır</li>

</ol>

<h3> Sınav günleri</h3>

<dl>

<dd> 2 Kasım

<i> Pazartesi </i>

günü. </dd>

<dt>hukuk</dt>

<dd> henüz belirlenmedi. </dd>

</dl>

</body>

</html>

(26)

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.

(27)

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>

(28)

<html>

<head>

<title> Basit bir tablo</title>

</head>

<body>

<h2> Basit bir tablo </h2>

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

(29)

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>

(30)