Web Tasariminin Temelleri

7/11/2019 Web Tasariminin Temelleri

http://slidepdf.com/reader/full/web-tasariminin-temelleri 1/513

1

Web TasarımınınTemelleri

1- İnternet Temel Bilgiler

Öğr.Gör. Serkan KORKMAZ

Harran ÜniversitesiBirecik Meslek Yüksekokulu



2

GİRİŞ

Sevgili Öğrenciler

HTML (Hyper Text Markup Language) WEB sayfalarınınhazırlanmasında kullanılan dildir.



3

GİRİŞ


Bir WEB sayfası resim gibi değildir.

Sayfanın arkasında ilk bakışta anlamakta zorlanacağımız

komutlar bulunmaktadır.

Bu komutlar sayfa içinde bulunan her şeyin nasıl gösterileceğinikullanılan tarayıcıya anlatmak için kullanılır.



4

GİRİŞ


Yani sayfada bulunan resim, flash, yazı gibi materyallerin yanyana anlaşılır görünmesi için HTML kullanmak zorundayız.

Amatör veya profesyonel olarak WEB tasarım ile uğraşanlar HTML ile mutlaka tanışmışlardır.

HTML yazma işini bizim yerimize yapan programlar (Frontpage,Dreamweaver vb.) vardır ve biraz da HTML bilgisi ile kolaylıklakendi sitenizi yapabilirsiniz.



5

GİRİŞ


HTML, programlama dilleri (pascal, basic vb. ) gibi birprogramlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.

HTML için dilden ziyade kabaca metinleri ya da verileribiçimlendirmek ve düzenlemek için kullandığımız komutlar dizisibile diyebiliriz.



6

İnternet

İnternet,

Birçok bilgisayar sisteminin birbirine bağlı olduğu,

Dünya çapında yaygın olan,

Sürekli büyüyen bir iletişim ağıdır.

Aynı zamanda,

İnsanların her geçen gün gittikçe artan,

“Üretilen bilgiyi saklama / paylaşma ve ona kolayca ulaşma”

İstekleri sonrasında ortaya çıkmış bir teknolojidir.

Bu teknoloji yardımıyla pek çok alandaki bilgilere insanlar kolay,ucuz, hızlı vegüvenli bir şekilde erişebilmektedir.



7

IP (Internet Protocol) Numarası

IP (Internet Protocol),

Bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür.

Genel olarak her bilgisayarın kendine özel bir numarası vardır.

İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IPadresini kullanır.

IP adresi her biri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan

oluşmuş 4 adet numara setidir.

Örneğin: 192.168.123.254. Bilgisayarın networkte bir “adı” olsa bile(daha kolay hatırlamanız için ), diğer bilgisayarlarla iletişimkurduğunda IP adresini kullanır.



8

İnternet Alanı (Domain)

İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 gibi).

Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur.

Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEBsitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmakyerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır (www.google.com gibi).

Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda,tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralıbilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır.



9

İnternet Alanı (Domain)

İnternet adreslerinde görülen kısaltmalar şunlardır:

gov: Hükümet kurumları (government)

edu: Eğitim kurumları (education)

org: Ticari olmayan kuruluşlar (organization)

com: Ticari kuruluşlar (company)

mil: Askeri kurumlar (military)

net: Servis sunucular (network)

ac: Akademik kuruluşlar (academic) int: Uluslararası kuruluşlar (international)

Bunun yanında kullanılan ülke kısaltmaları da vardır.

Bazıları; tr:Türkiye, jp:Japonya, uk:İngiltere, it:İtalya, ch:Isviçre gibi.



10

WEB Tarayıcılar

WEB tarayıcısı,

İnternet üzerindeki tüm bilgilere bakabilme ve bu bilgilerle etkileşimhalinde olabilme olanağı veren bir uygulama programıdır.

Tarayıcı kelimesinin İngilizce karşılığı “browser”’dır. WEB tarayıcısı,

Yardımlı Metin Transfer Protokolü 'nü (İngilizcesi "Hypertext Transfer Protocol" - kısaca HTTP) kullanarak,

Tarayıcı kullanıcısı adına İnternet üzerinde WEB sunucularındanisteklerde bulunan bir istemci programdır.



11

WEB Tarayıcıların Çalışması

Her bilgisayar üzerinde WEB sayfası adı verilen elektronik dosyalarısaklar

ve siz kendi bilgisayarınızdan bu bilgilere erişebilirsiniz.

WEB sizin zengin bir ortamda iletişim kurmamızı sağlar.

WEB üzerinde bilgilere metin, renkli çizim, resim, ses ve hatta videoortamlarına erişebilirsiniz.



12


WEB istemci-sunucu (client-server) sistemi olarak bilinir.

Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmekistediğiniz bilgileri saklayan bilgisayar ise sunucudur.

Örneğin; Milli Eğitim Bakanlığının WEB sitesine bakıyorsanız sizinbilgisayarınız Ankara’daki bir sunucudan WEB sayfalarına erişmekistediği mesajını yollamıştır.

Milli Eğitim Bakanlığının WEB sunucusu istediğiniz bilgileri internetüzerinden sizin bilgisayarınıza yollamaktadır.

Sizin WEB tarayıcınız gelen bilgileri yorumlar ve sizin ekranınızdaanlaşılır bir şekilde gösterir.



13


Teknik olarak tarayıcıların neler yaptığını iki madde de toplayabiliriz.

Tarayıcınız sizin bağlandığınız WEB sunucudan yaptığınız dosya isteğini ağ(network) üzerinden size yani kullandığınız bilgisayara ulaştırır.

Tarayıcının ikinci görevi ise yaptığınız isteği, yani WEB sunucudan gelendosyayı size, yani monitörünüze nasıl yansıtacağını, formatlamasınıbilmesidir.

İlgili WEB sayfasının adresi yazıldıktan sonra, tarayıcı ilgili WEB sunucuyubulur ve sayfayı ister.

Sunucu ilgili sayfayı “tag” denilen komutlar topluluğu olarak istemcimakineye gönderir.

İstemci makinedeki tarayıcı bu sayfayı alır ve gelen komutları yorumlar veanlaşılır bir şekilde gösterir.



14

World Wide Web (Dünya Çapında Ağ ) milyarlarca Web sayfasınınoluşturduğu büyük ağdır.

Her bir Web sayfası diğerine bağlanır ve bir örümcek ağına benzer bir

ağı oluşturur ama bu ağ çok ama çok karışıktır.

Her bir Web sitesinin ortalama olarak 50 linki içerdiğini ve ortalama 3milyara yakın Web sitesi olduğunu düşünürseniz bu örümcek ağınınbüyüklüğünü gözünüzde canlandırabilirsiniz.

WWW (World Wide Web)



15

Kısaltılmışı dabıl yu, dabıl yu dabıl yu olarak okunuyor ama kısaokunuşu, World Wide Web uzun okunuşundan daha uzundur.

Bir başka deyişle Internet Explorer ya da Mozilla Firefox programıgibi Web tarayıcılarla bakabildiğiniz tüm alan kısaca Web ya dadünya çapında ağ olarak bilinir.

WWW (World Wide Web)



16

“Web size ne verebilir yerine?” sorusu yerine “Web size neyi veremez?” diye sormak daha doğru olur.

İnternet’in sunduğu olanaklardan bazılarını aşağıdasıraladım.

Bunların şimdilik kaydıyla olduğunu unutmayın.

Web’de Ne Var?



17

Yemek tariflerinden http://www.ada.net.tr/mutfak/index.html)

Amerikan gizli haber alma teşkilatı CIA’in ülkeler hakkındaki raporlarına(Türkiye raporun bakmak istiyorsanız içinhttp://www.odci.gov/cia/publications/factbook/tu.html adresine bakın)

Elinizde yeterince zenginleştirilmiş uranyum varsa, atom bombasının nasılyapılacağına kadar (http://www.tera.virtualpc.com/vik/vik/nuke/index2.html) aklınızagelebilecek her konuda bilgi ve dokümana erişebilirsiniz.

Web’de Ne Var?

http://www.ada.net.tr/mutfak/index.html

http://www.ada.net.tr/mutfak/index.html



18

ABD Başkanına mesaj gönderebilirsiniz(http://www.whitehouse.gov/WH/Mail/html/Mail_President.html)

İnternet üzerinden online radyo dinleyebilirsiniz (http://radyo-odtu.com.tr,http://www.kentfm.com.tr) ya da televizyon seyredebilirsiniz (htpp://www.ntv.com.tr,htpp://www.kanald.com.tr, htpp://www.cnn.com)

İnternet’te kitaptan, arabaya (evet araba bile alabilirsiniz) kadar her tür ürünüalabilirsiniz (http://www.amazon.com, http://www.migros.com.tr,http://www.arabam.com)

Web’de Ne Var?



19

Birçok shareware ve freeware yazılımı ve dokümanı hatta belli bazı klasikkitapları ücretsiz bilgisayarınıza yükleyebilir (http://www.download.com).

Tabii kitapları bilgisayardan okumak oldukça zor bir iştir.

İnternet’te kendinizi, kurumunuzu ya da ürününüzü tanıtabilirsiniz.

Günde yirmi dört saat çalışan ve dünyadaki tüm müşterilere hizmet veren bir sanal dükkan açıp malınızı İnternet üzerinden satabilirsiniz.

Web’de Ne Var?

http://www.download.com/

http://www.download.com/



20

Yüzünü görmediğiniz, sesini duymadığınız farklı dil, cins ve ırktan insanlarlasohbet edebilirsiniz.

Değişik formatlardaki müzik ve video görüntülerini dinleyebilir ve

seyredebilirsiniz.

Kullanıcıların ya da müşterilerinizin fikrini alabilir ve online bir anketdüzenleyebilirsiniz.

CD kalitesinde müzik dinleyebilirsiniz (www.napster.com, www.mp3.com)

Ve aklınıza gelebilecek daha birçok şeyi İnternet sayesinde yapabilirsiniz…

Web’de Ne Var?



21

Web, İnternet üzerinden çalışır ve İnternet’in sunduğu teknik alt yapıyıkullanır .

Web’deki her sayfa birbirine hiperlink’lerle bağlıdır .

Web’de çok değişik tipte bilgisayar ve bilgisayar sistemi vardır .

Bunların birbiriyle anlaşması için bir ortak dil bulunmuştur .

Web Nasıl Çalışır?



22

Bu dile ya da protokole TCP/IP denir.

Teknik detayı öğrenmenize gerek yok, bu sadece iki bilgisayarınbirbirleriyle anlaşmasını sağlayan bir protokoldür.

Bilgisayarlar birbirleriyle anlaşınca el sıkışırlar ve veri aktarımısunucudan istemciye doğru veri paketleriyle gerçekleştirilir .

Veriyi isteyene istemci (client), bu veriyi gönderen bilgisayara isesunucu (server) denir.




23

İnternet’te herhangi bir Web sayfasını bir Web tarayıcıyla açtığınızdafarenizin imlecinin bazı kelimelerde ve resimlerde bir eli işaretine döndüğünügörürsünüz.

Farenin imleci bir el işaretine döndüğü zaman fareyi tıklarsanız bir başkaWeb sayfası görüntülenir.

Bu tür bir yapıya sahip bir belgeye hipermetin (hypertext) belgesi adı verilir.




24

Hipermetin dokümanları hazırlamak için kullanılan dile HTML(HyperText Markup Language -Hipermetin İşaretleme Dili) denir.

Bu tıpkı bilgisayarda kullanılan BASIC ya da C türü bir programlama diline benzer.

Kendine özgü komutları ve hiyerarşisi vardır .

HTML dilini ileride ayrıntılı olarak inceleyeceğiz.

Şimdilik böyle bir dilin var olduğunu bilin ve hain kurttan korkmayın.

Ana metinle, buradan diğer metin arasındaki adreslemeye bağlantı yani link denir.

HiperMetin (HyperText)



25

Hipermetin Belgelerinin Basit Mantığı

Bir Web sayfası üzerinde İnternet’teki herhangi bir başka sayfaya bağlantı koyabilirsiniz.

Her iki sayfanın aynı bilgisayarda ya da yerde hatta ülkede olması gerekmez.

Türkiye’deki bir sunucuda bulunan bir Web sayfasından Japonya’daki bir Web sayfasına bağlantıekleyebilirsiniz.

Tabi iki sayfada aynı bilgisayardaysa sayfanın yüklenmesi daha hızlı alacaktır .



26


Bir linkten diğerine giderek sayfalararasında gezinmeye de sörf yapmak

denir.

Şunu belirtmeliyim ki tıklayarak Web’iasla tüketemezsiniz çünkü milyarlarcasayfa vardır .



27


HTML sayfalarının adreslerine kısaca URL (Universal Resource Locator - Evrensel KaynakBelirteci) denir.

Örneğin; http://www.cikolata.com.tr/bitter/findiklicikolata.html adresini inceleyelim:

http:// karakterleri bu hipermetin belgesinin HTML dili ile hazırlandığını ve bu nedenle İnternetüzerinden HTTP protokolü ile aktarılması gerektiğini,

www.cikolata.com.tr bu hipermetin sayfasının bulunduğu bilgisayarı,

bitter/ karakterleri ise HTML dokümanın bulunduğu alt dizini,

findiklicikolata.html ise HTML dosyasının ismini belirtir.



28

HTML Bilmeme Gerek Var mı?

HTML dili kulağa oldukça hoş geliyor ama “çok karmaşık ve girift bir Web sayfası yapmak için bütün bunları bilmeme gerek var mı?” diye sorabilirsiniz.

Aslında HTML dilini bilmeden de Web sayfası yapabilirsiniz.

Peki o zaman niye HTML dilini öğreniyoruz, “işin heyecanlı kısmına hemen başlasak ya” diyebilirsiniz.

Çok acelecisiniz, biraz daha sabredin.



29

HTML Bilmeme Gerek Var mı?

HTML dilini bilmeden de Web sayfası yapabilirsiniz.

Bunun için ileride anlatacağımız HTML editörlerinden birini kullanmanızyeterlidir.

HTML editörleri bütün bu etiket, özellik vs. gibi ıvır zıvırı sizin için sayfanıza

yerleştireceklerdir fakat yine de bir nebze olsa bile HTML dilini öğrenmenizgerekir.

En azında işin mantığını kapmanız gerekir.

Ayrıca HTML editörlerinin yapamadığı ve sizin elle girmeniz gereken bazıHTML kodları olabilir.

Sayfadaki bazı hataları elle düzeltmek, HTML editörleri ile düzeltmektendaha kolaydır .

Ve tabi “HTML dilini biliyorum” demenin keyfini çıkarmak da cabası.



30

ÖLÇME VE DEĞERLENDİRMEA-OBJEKTİF TESTLER(ÖLÇME SORULARI)

Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır.Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız.Şıklı sorularda uygun şıkkı işaretleyiniz.

1. İnternet’teki dosyaların genel uzantısı nedir?

A html

B www

C http

D ftp



31



1. İnternet’teki dosyaların genel uzantısı nedir?

A html

B www

C http

D ftp



32



2. Browser (tarayıcı) program ne işe yarar?

A Kâğıt üzerindeki yazıları bilgisayara aktarır.

B İnternet sayfalarını bilgisayarımızda görmeyi sağlar.

C İnternete bağlantı sağlar.

D İnternet bağlantısını hızlandırır.



33



2. Browser (tarayıcı) program ne işe yarar?

A Kâğıt üzerindeki yazıları bilgisayara aktarır.

B İnternet sayfalarını bilgisayarımızda görmeyi sağlar.

C İnternete bağlantı sağlar.

D İnternet bağlantısını hızlandırır.



34



3. Birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında

yaygın olan ve sürekli büyüyen iletişim ağına ne denir?

A IP

B Domain

C İnternetD Protokol



35



3. Birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında

yaygın olan ve sürekli büyüyen iletişim ağına ne denir?

A IP

B Domain

C İnternetD Protokol



36



4. Aşağıdaki eşleştirmelerden hangisi yanlıştır?

A gov: Hükümet kurumları

B com: Ticari kurumlar

C edu: Eğitim kurumları

D org: Askeri kurumlar



37



4. Aşağıdaki eşleştirmelerden hangisi yanlıştır?

A gov: Hükümet kurumları

B com: Ticari kurumlar

C edu: Eğitim kurumları

D org: Askeri kurumlar



38



5. Aşağıdakilerden hangisi bir WEB tarayıcı programıdır?

A Flash

B FrontPage

C Internet Explorer

D HTML



39



5. Aşağıdakilerden hangisi bir WEB tarayıcı programıdır?

A Flash

B FrontPage

C Internet Explorer

D HTML



40



6. IP (Internet Protocol) nedir?

A Alan adı

B Bilgisayarların iletişim kurmasını sağlayan protokoldür.

C İnternet üzerindeki bilgilere bakabilmeyi ve etkileşim kurmayı sağlayan

uygulama protokolüdür.D İnternette istenilen bilgilere ulaşabilmeyi sağlayan bir arama

motorudur.



41



6. IP (Internet Protocol) nedir?

A Alan adı

B Bilgisayarların iletişim kurmasını sağlayan protokoldür.

C İnternet üzerindeki bilgilere bakabilmeyi ve etkileşim kurmayı sağlayan

uygulama protokolüdür.D İnternette istenilen bilgilere ulaşabilmeyi sağlayan bir arama

motorudur.



1


2 - HTML





2

GİRİŞ


HTML (Hyper Text Markup Language) WEB sayfalarınınhazırlanmasında kullanılan dildir.



3

HTML

HTML (HyperText Markup Language / Hareketli-Metin İşaretlemeDili) basitçe, browserlarla görebileceğimiz, internet dökümanlarıoluşturmaya yarayan bir çeşit dildir.

HTML ile oluşturduğunuz belgeleri hard diskinize kaydedebilir veinternet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz.

HTML, programlama dilleri (c, pascal, basic,..) gibi bir programlamamantığı taşımadığından öğrenilmesi kolay bir dildir.

HTML için, dilden ziyade kabaca metinleri ya da verileribiçimlendirmek, düzenlemek için kullandığımız komutlar dizisidiyebiliriz.



4

HTML

Bu dersin sonunda öğrendiklerinizle siz de kendi

sayfalarınızı hazırlayabileceksiniz.

Hazırsanız buyurun başlayalım...



5

Temel Unsurlar

Buraya kadar dinlediğinize göre HTML öğrenme işindeciddisiniz demektir.

HTML nispeten kolay bir dildir dedik.

Bu dilde binary veya hexadecimal kodlar yok.

Herşey metin tabanlı ve bir HTML dökümanı oluşturmak

için ihtiyacınız olan şey bir editör.

Hatta sizde herhangi bir HTML editörü bulunmuyorsabu işi Windows'un Not Defteri ile dahi halledebilirsiniz.



6

Temel Unsurlar

Piyasada iki tip editör bulunuyor.

Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanı sıra rutin bazıişlemleri kolaylaştıran editörler (HotDog, HomeSite..)

Diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın)tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..)

Benim yeni başlayanlara tavsiyem Windows'un Not Defteri .

Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere

geçebilirsiniz.

Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahale etmenizgerekebilir.

Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar, bu da döküman

boyutunun büyümesi demek.



7

Temel Unsurlar

Burada şunu da belirtmek gerekiyor;

Browserlar arasındaki yorum farklarından dolayı sayfanız bir browser'da iyigörünürken bir başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir.

Hele yeni bazı teknikleri (css, dhtml gibi) sadece MS Internet Explorer 4 ve üstüdesteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor.

Yine de piyasayı neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerineüstün olduğu yönleri var.

Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz başarı sayfanızıziyaret eden kişinin kullandığı browser'a mahkum.

Hatta ziyaretçiniz browser'ına verdiği bir talimatla "yalnız şu fontu kullan","grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gittidemektir.

Yine de bu kadar karamsar olmayalım.



8

HTML Sayfalarının Ana Yapısı• HTML yapısında bulunan ana etiket düzeni şu şekildedir.

<html><head>

<title> .. </ title><meta …. ><base …. >

</head>

<body>……………

</body></html>

Birinci Kısım

İkinci Kısım



9

HTML Sayfalarının Ana Yapısı• <HTML> .. </HTML>

• Html kodlarının başladığı ve bittiği yeri gösterir.

• En temel ve kapsamlı etikettir.

• Tüm etiketler bu etiketin altındadır.



10

HTML Sayfalarının Ana Yapısı• <HEAD> .. </HEAD>

• Genelde görüntülenmeyen bilgi ve farklı işlevlere sahipkodlamalar ve parametrelerin tanımlandığı kısımdır.

• Bu veriler belgenin konusu, başlığı, url’si, içeriğin yazıldığıdil ve yapımcısı gibi bilgilerdir.

• Bunlar ziyaretçiye asla gösterilmezler.



11

HTML Sayfalarının Ana Yapısı• <BODY> .. </BODY>

• İçerik ve biçim etiketlerini kapsayan ana etikettir.

• Sayfada görüntülenen tüm yazı, tablo, madde işaretleri,resim gibi materyaller bu bölümde yer alır.



12

<TITLE>• <title> etiketi, <head> etiketleri arasında yer alır.

• <title> etiketi sayfanın başlığını belirler.

• Tarayıcı penceresinde başlık çubuğunda yazılan başlıkgörüntülenir.

• <title>Sayfa Başlığı</title>

Ö



13

Örnek - 1



14

<meta> etiketi, <head> etiketleri arasında yer alır.

Web sayfalarına ait çeşitli bilgilendirme ve ayarlamaların yapıldığıetikettir.

Belgenin yazarı, konusu, anahtar kelimeleri, tazeleme süresi gibi bilgiler

yer alır.

İki şekilde tanımlama yapılır.

Sistem değişkenleri kullanılarak yapılan tanımlamalar

Kullanıcı tanımlı değişkenler kullanılarak yapılan tanımlamalar

Meta etiketleri değişken ve değişkenin alacağı değer ikilisinden meydanagelir.

<META>



15

1- Sistem değişkenleri kullanılarak yapılan tanımlar

Bu değişkenler HTTP-EQUIV özelliği ile tanımlanır.

Değişkenin değeri ise CONTENT özelliği ile tanımlanır.

Aşağıda örnek tanımlamalar verilmiştir.

<META>



16

Refresh Sayfanın belirli bir süre (saniye) içerisinde istenen sayfaya

yönlenmesini sağlar.

<META HTTP-EQUIV=“refresh” CONTENT=“10;URL=http://mail.harran.edu.tr”>

Yukarıdaki etiket HTML belgesinin 10 saniye sonrahttp://mail.harran.edu.tr sayfasına yönlenmesini sağlar.

<META>



17

Expires HTML belgesinin belirli tarih ve zaman dolduğunda geçici

sayfaların depolandığı dizinden veya arama motorlarınınlistesinden silinmesini sağlar.

<META HTTP-EQUIV=“expires” CONTENT=“Thu, 10 Nov2011 23:59:59 GMT”>

Sayfa 10 Kasım 2011’de gece yarısından sonra güncelliğini

kaybetmektedir.

Böylece sistemden (arama motorlarından ve geçici internetdosyalarının deposundan) otomatik olarak atılması sağlanır.

<META>



18

Content-Language Sayfanın düzenlendiği dili belirlemek için kullanılır.

<META HTTP-EQUIV=“content-language” CONTENT=“TR”>

Sayfanın içeriğinin Türkçe olduğunu göstermektedir.

<META>



19

2- Kullanıcı tanımlı değişkenler kullanılarak yapılan tanımlar

Kullanıcı değişkenleri NAME özelliği ile tanımlanır.

CONTENT özelliği ile değeri verilir.

Aşağıda çeşitli kullanımları verilmiştir.

<META>



20

keywords Arama motorları tüm web içerisinde sayfaları tararken

sayfaları kolay ve istenilen biçimde indekslemeye yardımcıolmak için keywords değişkenini kullanılır.

<META NAME=“keywords” CONTENT=“Html, Php, Asp,Photoshop, İnternet Programcılığı”>

<META>



21

description Sayfa hakkında açıklama cümlesi yazmak için description

değişkeni kullanılır.

Bu açıklama cümlesi arama motorları tarafından aramayapan kullanıcıya belirli bir kısım olarak gösterilir.

<META NAME=“description” CONTENT=“İnternetprogramcılığı ile ilgili her şey.”>

<META>



22

author Sayfayı hazırlayan kişiyi belirtmek için author değişkeni

kullanılır.

<META NAME=“author” CONTENT=“Öğr .Gör. SerkanKORKMAZ”>

<META>



23

generator Sayfayı hazırladığımız programı belirlemek için generator

değişkeni kullanılır.

<META NAME=“generator” CONTENT=“AdobeDreamweaver CS5”>

<META>

Ö k 2



24

Örnek - 2

Birçok kodun çalışmasını gözlemleyeceksiniz.

5 sn. sonra www.harran.edu.tr adresine yönlendirileceksiniz.

BASE



25

<head> etiketleri arasında yer alır.

<base> etiketi HTML belgelerinin temel adresini tanımlar.

Uzun adreslerde kolaylık sağlar.

<base> etiketi özellikle sayfanın adresini değiştirirken,sayfadaki bağlantılar komple kaldırılmak istendiğinde büyükkolaylıklar sağlar.

Aldığı özellikler aşağıda sıralanmıştır.

<BASE>

BASE



26

href Bağlantılara temel URL olacak adresi belirlemek için

kullanılır.

<base href=“http://www.harran.edu.tr/images”>

<BASE>

BASE



27

target Sayfadaki tüm bağlantıların nerede açılacağını belirlemek

için kullanılır.

Aldığı değerler aşağıdadır.

<BASE>

Target Parametresi Anlamı

_blank Yeni bir sayfada açılır.

_self Aynı sayfada veya çerçevede açılır. _parent Tüm bağlantılar kendi çerçevelerinde açılır.

_top Sayfa tüm pencereyi kapsayarak açılır.

BASE



28

<img> etiketi ile sayfaya resim eklenir.

<base href=“C:\resim\”>

“kurbaga.jpg” resmi yukarıdaki klasör (C: \resim\) içerisindedir

Bu resmi sayfaya eklemek için <img> etiketi içerisindesadece resmin adını belirtmek yeterli olacaktır.

<img src=“kurbaga.jpg”>

<BASE>

Ö k 3



29

Örnek - 3

BODY



30

Sayfa içeriği ve biçimi ile ilgili ayarların yapıldığı alanı sınırlar.

<BODY> etiketinin aldığı özellikler şunlardır.

<BODY>

Özellik Anlamı

ALink Aktif bağlantıların rengini belirler. (renk)

VLink Ziyaret edilen bağlantıların rengini belirler. (renk)

Link Bağlantıların rengini belirler. (renk)

Text Sayfadaki metnin rengini belirler. (renk)

BgColor Sayfanın arka plan rengini belirler. (renk)

BackGround Sayfanın arka plan resmini belirler. (url)TopMargin Üst kenar boşluğu. (sayı)

LeftMargin Sol kenar boşluğu. (sayı)

Ö k 4



31

Örnek - 4

İlk f



32

İlk sayfam

İşte ilk HTML sayfamızı yapıyoruz.

• Öncelikle çalışmalarınızı saklamak için kullanacağınız boşbir klasör oluşturup uygun bir ad verin, mesela html_dersolsun.

• Daha sonra bu ad bize lazım olacağından kolaylık olmasıiçin siz de yeni klasöre bu adı verebilirsiniz.

• Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun(sağ fare/Yeni/Metin belgesi).

• Dosyayı çift tıklayarak açın ve şunları yazın:

İlk f



33

<html><head>

<title>İlk Sayfam</title></head><body>Sayfama Hoşgeldiniz</body>

</html>

İlk sayfam

Not Defterinde Kaydetme



34

• Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...).

• Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar dahil) ve Tamam'a basın.

• Şöyle bir görüntü elde edeceksiniz:





35


Kayıtlı Sayfayı Görüntüleme



36

• Oluşturulan web sayfası Not Defteri’nde kaydedildiktensonra;

• Not Defteri‘ni kapatın.

• Metin dosyasını silin. (Yeni Metin Belgesi.txt dosyası)

• Oluşan yeni dosyayı açın.

• Dosya varsayılan tarayıcınızda (Internet Explorer,Mozilla Firefox vb.) tarafından açılacaktır .

•

Şöyle bir görüntü elde edeceksiniz:

Kayıtlı Sayfayı Görüntüleme

İlk sayfam



37

İlk sayfam

Internet Explorer Mozilla Firefox

İlk sayfam



38

İlk sayfam

• Tebrikler ilk HTML sayfanızı yaptınız.

• Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim.

• Bir şey dikkatinizi çekti mi?

• İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleriarasına yazdık.

• Bu ifadelere tag (etiket) deniyor.

• Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor .

• Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölüişaretiyle tekrar yazıyoruz.

• Bu son yaptığımız etiketi sonlandırıyor .

•

Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.



39

İlk sayfam• Burada kullandığımız etiketler ve anlamları şöyle:

<html>...</html> Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor.Diğer tüm kodlar bu iki etiket arasına yazılır.

<head>...</head> <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazılır,

meta ve title gibi etiketler burada yer alır.<body>...</body> <body>...</body> arası ise sayfamızın gövde bölümü.

Ekranda gösterilecek kısımlar bu tagler arasında yer alıyor.

<title>...</title> Title sayfanın başlığını belirtiyor. Burada yazılanlar browser penceresinin başlığında browser adıyla beraber gösteriliyor.

İlk sayfam



40

İlk sayfam

•

Dikkat ederseniz hazırladığımız sayfada sadece temel etiketlerikullandık.

• Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık.

• Bu yüzden <body>....</body> arasına yazdığımız SayfamaHoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıylagösteriliyor.

• İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz

yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyielde edecektik.

• Sonraki bölümde metin biçimlendirmeye yarayan etiketleriöğreneceğiz.

Sayfayı Not Defterinde Açmak



41

HTML dosyasını Not Defteri’nde açmak için, dosyayı farenin sağ düğmesiyle tıklayıpBirlikte aç seçilir. Buradan Not Defteri seçilir.

Sayfayı Not Defterinde Açmak

Web Tarayıcısında Önizleme



42


•

Web sayfanızda bir değişiklik yaptıktan sonra bu değişikliğinsonucunu görmek istersiniz.

• Internet Explorer ve Not Defteri pencerelerini yan yana koyarsanızyapılan değişiklikleri görmek kolay olacaktır .

• Yapılması gereken, çalışmayı Not Defterinde kaydetmek ve InternetExplorer’daki görüntüyü yenilemektir.




43

Web Tarayıcısında Önizleme• Web sayfaları .htm ve .html uzantılıdır .

• Not Defteri’nde açılabilirler .

• Ancak ilk olarak Aç kutusundaki “Dosya Türü” bölümünden TümDosyaları ayarlamak gerekir.

• Web sayfasının web tarayıcısında ön izlemesini yapmak için webtarayıcı uygulamasında Dosya menüsünden Aç tıklanır .

• .htm ve .html uzantılı dosyaları çift tıklayarak varsayılan webtarayıcısında otomatik olarak açabiliriz.

• Not Defteri’nde yapılan değişikliklerin etkisini web tarayıcısındagörmek için Not Defteri’nde çalışma kaydedildikten sonra webtarayıcısı penceresinde Yenile simgesini tıklamak gerekir.

Örnek 5



44

Örnek - 5

Örnek 6



45

Örnek - 6

Açıklama Satırı Eklemek



46

Açıklama Satırı Eklemek

•

Açıklama satırı belgemize açıklayıcı notlar düşmek içinkullanılabilecek nesnelerdir.

• HTML belgelerine açıklama satırı eklemek amacıyla “”kodlaması kullanılır.

• Tarayıcılar bu iki kodlama arasındaki açıklama ibarelerini hiçbir zaman dikkate almazlar.

Örnek - 7



47

Örnek - 7

Özel Karakterler Eklemek



48


•

Özel karakterler standart klavyede olmayan karakterlerdir.

• Örneğin; © ™ ® ± £ ¢ ¥ °

• HTML’de özel karakterlere nesneler denir.

• & işareti ile başlayıp, nesne adı veya nesne numarası yazılıp, noktalıvirgülle biten kodlarla oluşturulurlar.

•

Nesne adı ve nesne numarası aynı karakteri ifade eder. İkisinden birikullanılabilir.




49


•

Klavyede olmayan simgelere ek olarak diğer bazı simgeler, HTML’deözel anlamlar taşıdıkları için HTML nesneleri olarak oluşturulmalarıgerekebilir.

• “&”, “>”, “<” karakterleri en yaygın olanlardır.

• Bu simgeler HTML’de görüntülenecek normal karakterlermiş gibikullanılamaz.

• Çünkü tarayıcı bu simgeleri etiket olarak algılayabilir.

• En çok kullanılan nesneler aşağıda listelenmiştir.

Simge Nesne Adı Anlamı Nesne Numarası



50

“ (Tırnak İşareti) " Quote "

& & Ampersand &

< (küçük) < Less-Than <> (büyük) > Greater-Than >

(boşluk) Space

¢ (cent) ¢ Cent ¢

£ (pound) £ Pound £

¥ (yen) ¥ Yen ¥

© (telif hakkı) © Copyright ©

® (tescilli ticari marka) ® Registered ®

°(derece) ° Degree °

± (artı veya eksi) ± Plus-Minus ±

™ (ticari marka) ™ Trade Mark ™

Örnek - 8



51

Örnek - 8

Örnek - 9



52

Örnek - 9

<HR>



53

Bir web sayfasında metni kısımlara ayırmak için yatay çizgiler kullanılabilir.

Örneğin;

Telif hakkı bilgisini metnin diğer kısmından yatay çizgi ile ayırmak isteyebilirsiniz.

Buna ek olarak, ilk başlıkla metni de yatay çizgi ile birbirinden ayırmak

isteyebilirsiniz.

Yatay çizgi eklemek için çizginin görünmesini istediğiniz satıra aşağıdaki tektaraflı kodu eklemeniz yeterlidir.

<hr>

<HR>

<HR>



54

Varsayılan ayar olarak çizgi tarayıcı penceresini enine kaplar ve yüksekliği 2

pikseldir.

Etikete bağımsız değişkenler ekleyerek bu özellikleri değiştirebiliriz.

color : renk

size : boyut

width : genişlik

<HR>

Örnek - 10



55

Örnek 10

Örnek - 11



56

Örnek 11



1

Web Tasarımının

Temelleri

3 - Metin Biçimleme



Metin Biçimleme



2

Metin Biçimleme• Yeni Satır: <br>

• Paragraf etiketi: <p>...</p>

• Üst Simge: <sup>...</sup>

• Alt Simge: <sub>...</sub>

• Adres: <adress>...</adress>

• Blok veri: <blockquote>

• Standart Tek Aralıklı Yazı: <tt>

• Başlık etiketleri: <h1>...<h6>

• Ortalama: <center>...</center>

• Kalın: <b>...</b>

• Kalın: <strong>...</strong>

• İtalik: <i>...</i>

• İtalik: <em>...</em>

• Altı Çizili: <u>...</u>

• Üstü Çizili: <s>...</s>

Metin Biçimleme



3

Metin Biçimleme

• HTML'de metin stillerini üç şekilde belirleyebiliriz:

• Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimlemestili. Buna in-line (satır içi) biçimlendirme denir.

• Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)

• HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayıkullanma.

• Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor.

• Kısaca CSS.

• Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibigeniş imkanlar veriyor.

Metin Biçimleme



4

Metin Biçimleme

• Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci veüçüncü metotlarda stil bir defa belirleniyor ve bu stilleriistediğimiz metne uygulayabiliyoruz.

• Burada önemli olan bir diğer husus da ilk metodu tüm

browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metoduInternet Explorer ve Netscape'in son sürümleri (yorumfarklılıkları ile beraber) destekliyorlar.

• Burada konumuz birinci metoda göre biçimlendirmeyi

öğrenmek.

• Başlık etiketlerinden başlıyoruz.

<BR>



5

<BR>

Web sayfasında yeni bir satıra geçmek için <BR> yazılır.

BR kelimesi İngilizce Break (aralık, boşluk) kelimesinin kısaltılmışıdır.

<BR> etiketinin kapama etiketi yoktur yani tek başına kullanılır.

<BR>



6

<br> etiketi bir bakıma enter tuşunun görevini görüyor.

HTML'de metinleri yazarken kullandığımız editörde bir alt satırageçmek için Enter tuşunu kullanırız.

Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları vemetinleri tek satırda dahi yazsanız browser açısından farketmeyecektir.

Bu yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini

kullanıyoruz.

İstisnai etiketlerden birisi bu: <br> etiketi sonlandırılmıyor.

<BR>

Örnek - 1



7

Örnek 1

Örnek - 2



8

Örnek 2

<BR>



9

< >

Yukarıdaki örneğimizde "pazartesi, salı ve çarşamba"yıyazarken Enter tuşu ile bir alt satıra geçmemize rağmenbrowser bunu göz önüne almayarak tüm metni birsatırda yazdı.

Fakat ikinci sefer ay adlarını tek bir satıra yazdığımızhalde bu kez browser aradaki <br> etiketine bakarak birsonraki metni satır başına aldı.

Buradan da anlaşıldığı üzere metni bir alt satırageçirmek için <br> etiketini kullanıyoruz.

<P>



10

Yeni bir satıra geçmek ve aynı zamanda boş bir satır eklemek için <P> etiketini ekleyin.

P harfi Paragraph (paragraf) kelimesinin kısaltılmışıdır .

Örnek - 3



11

<hx>



12

•

Başlıklar tıpkı çıktısı alınacak belgelerde olduğu gibi websayfalarında da metni parçalara bölmek için kullanılırlar .

• HTML standardı <h1> den <h6> ya kadar yazı tipi boyutuazalarak giden altı başlık düzeyini belirlemiştir .

• Başlık etiketleri için belirlenmiş boyut ve yazı tipi yoktur.

• Bunların görünüşü tarayıcıya ve tarayıcının ayarlarına göredeğişir .

Örnek - 4



13

<hx>



14

•

Beş ve altıncı başlıkların gövde metinden daha küçükolduğunu fark etmişsinizdir .

• Bu nedenle çoğu kullanıcı <h5> ve <h6> yı kullanmaktankaçınır .

• Bunlar varsayılan ayarlardır .

• Bu başlıkları istediğimiz şekilde tanımlayabiliriz.

• Küçük başlık stilleri etiket satırları ve şifreler gibi özelamaçlar için kullanılır .

<hx>



15

• Sayfanın işleyişine baktığımızda, önce her zaman yapmamız

gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik.

• Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanıngövde <body> kısmına istediğimiz metinleri yazdık ve bu

metinleri <h1>'den <h6>'ya kadar olan biçimlendirmeetiketlerinin arasına aldık.

• Browser metin biçimleme etiketleri olan <h1>...<h6>etiketleri arasındaki kelimelere belirli büyüklükler verdi.

<hx>



16

Şimdi de kendiniz <h1>...<h6> etiketlerinin yerlerinideğiştirerek alıştırma yapın ve tam olarak bu işin nasılolduğunu kavrayın.

Hatta iyi bir deneme-yanılma olması açısından örneğin her

seferinde değişik bir etiketi veya sonlandırma etiketini HTMLkodundan silerek ne gibi etkiler oluşturduğunu gözlemleyin.

Denemelerinizin bir kısmında hiçbir değişiklik olmadığınıgözlemleyeceksiniz.

Bunun sebebi, browser'ınızın otomatik olarak hatayı algılayıpdüzeltmesidir.

<center>



17

İçeriği yatayda ortalamak için kullanılır.

<center> etiketinin kullanımına yönelik bir sayfa hazırlayalım.

Örnek - 5



18

<b>



19

<b> etiketi (bold);

Metni kalın ve koyu yapar.

<b>Merhaba Dünya</b>

Merhaba Dünya

<i>



20

<i> etiketi (italic);

Metni italik biçimde yazar.

<i>Merhaba Dünya</i>

Merhaba Dünya

<u>



21

<u> etiketi (underline);

Metni altı çizili olarak biçimlendirir.

<u>Merhaba Dünya</u>

Merhaba Dünya

<s>



22

<s> etiketi (strikeout);

Metni üstü çizili olarak biçimlendirir.

<s>Merhaba Dünya</s>

Merhaba Dünya

<em>



23

<em> etiketi (emphasis - vurgu);

Vurgulama amaçlı kullanılır. İtalik etkiye sahiptir.

<em>Merhaba Dünya</em>

Merhaba Dünya

<strong>



24

<strong> etiketi (strong);

Vurgulama amaçlı kullanılır. Koyu ve kalın etkiye sahiptir.

<strong>Merhaba Dünya</ strong>

Merhaba Dünya

Metin Biçimleme



25

Etiketleri toplu olarak kullanarak yeni bir HTML dosyasıoluşturalım.

Kodlar şu şekilde olsun:

Örnek - 6



26

Metin Biçimleme



27

Aynı sayfayı <strong> ve <em> etiketleri kullanarak yenidenoluşturalım.

<b> etiketi yerine <strong> etiketini kullanalım.

<i> etiketi yerine <em> etiketini kullanalım.

Örnek - 7



28

Metin Biçimleme



29

Etiketleri kullanma mantığımızı anlamış olmalısınız.

Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz vemetnin sonunda da ilgili etiketi sonlandırıyoruz.

Etiket biz sonlandırmadığımız müddetçe etkisini göstermeye devamediyor.

Eğer hala tereddütleriniz varsa örnekler üzerindeki kodların yerlerini

değiştirerek kaydedin ve diğer taraftan browser'ınızın refresh/reload(yenile) tuşuna basarak değişiklikleri gözlemleyin.

Metin Biçimleme



30

Burada bilmeyenler için küçük bir bilgi;

Bir html dökümanını açtığımızda ve ekran üzerinde farenin sağtuşuna tıklayıp kaynağı görüntüle/view source'u seçtiğimizde InternetExplorer için Notepad, Netscape için kendi Source Viewer'ı açılacak

ve bize o sayfanın kodunu gösterecektir.

<SUP>



31

Üst simge eklemek için <sup> etiketi kullanılır .

Üst simge biçimlendirmesi metni küçültür ve taban

çizgisinden yukarı kaldırır .

Üstel matematiksel denklemlerde, dipnot numaralarındave işaretlerinde sık kullanılır .

x2+y2=z2

Örnek - 8



32

<SUB>



33

Alt simge eklemek için <sub> etiketi kullanılır .

Alt simge biçimlendirmesi metni küçültür ve taban

çizgisinin altına yerleştirir .

Kimyasal formüllerde sık kullanılır .

H2SO4

Örnek - 9



34

<address>



35

<address> etiketini kullanarak italik biçimde adres veyer tanımlamaları yapılabilir.

Örnek - 10



36

<blockquote>



37

<blockquote> etiketi;

Verileri gruplamak (blok olarak) için kullanılır.

Bloklar biraz içerden başlayarak devam eder.

<blockquote>



38

Başka kaynaklardaki metinlerden alıntılar kullanılırkenhem web sayfalarında hem de çıktılarda alıntıları metninana kısmından ayırmak için girinti kullanmak yaygındır.

<blockquote> etiketi bunu yapar.

Bu etiketi sadece alıntılar için değil, girintilemek

istediğiniz her metin için kullanabilirsiniz.

Örnek - 11



39

<tt>



40

<tt> etiketi özel bir amaçla kullanılmayan standart tekaralıklı yazı tipi etiketidir.

Typewriter Text = Daktilo Metni

Örnek - 12



41

<hx> Başlık (heading) etiketi. h1 en büyük, h6 en küçük.

Metin Biçimleme



42

<hx> Başlık (heading) etiketi. h1 en büyük, h6 en küçük.

<center> Aradaki metinleri sayfaya göre ortalar. (center)

<b> Aradaki metni koyu (bold) yazar.<strong> Vurgulama amaçlı kullanılır. Aradaki metni koyu ve kalın yazar.

<i> Aradaki metni eğik (italic) yazar.

<em> Vurgulama amaçlı kullanılır. İtalik etkiye sahiptir.

<u> Aradaki metni altı çizili (underline) olarak yazar.

<s> Aradaki metni üstü çizili (strikeout) olarak yazar.

<br> Web sayfasını yeni bir satıra geçirir.

<p> Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takipeden metin bir satır boşluk bırakılarak ve satır başına yazılır.

<sup> Üst simge eklemek için kullanılır.<sub> Alt simge eklemek için kullanılır.

<address> İtalik biçimde adres ve yer tanımlamaları yapılır.

<blockquote> Verileri blok olarak gruplamak için kullanılır.

<tt> Standart tek aralıklı yazı tipi etiketidir.

W b T



1

Web Tasarımının

Temelleri

4 - Fontlar



Fontlar



2

font etiketinin kullanımı;

<font face="..." size="..." color="...">...</ font>

face = yazı tipinin adı (arial, tahoma, verdana, ...)

size = yazının büyüklüğü (1-7 arası)

color = yazının rengi (red, green gibi renklerin ingilizce karşılığı yadaRGB renk değeri)

Bunlara font etiketinin parametreleri diyoruz.

Örnek - 1



3

Örnek - 2



4

<html>

<head><title>Renkler ve Mevsimler</title></head><body><font face="tahoma" size="5" color="#008000">İlkbahar</font>

<br><font face="verdana" size="5" color="#ff0000">Yaz</font><br><font face="arial" size="5" color="#ffff00">Sonbahar</font>

<br><font face="comic sans ms" size="5" color="#0000ff">Kış</font></body></html>

Örnek - 3



5

Fontlar



6

Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık.

Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık.

Aslında bunun bir yolu daha var;

O da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi).

Bu konuyu renkler bölümünde ayrıntılı olarak inceleyeceğiz.

Burada yalnız bir kaç örnekle yetinelim:

Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green

Örnek - 4



7

W b T



1

Web Tasarımının

Temelleri

5 - Listeler



Listeler



2

HTML bize üç tip liste hazırlama imkanı veriyor.

Bunlar;

Sıralı listeler (ordered list)

Sırasız listeler (unordered list)

Tanımlama listeleri (definition list)

Listeler

http://www.mutasyon.net/dersoku.asp?id=6



3

Sıralı listeler rakam veya harf yada her ikisini iç içe kullanarak liste oluşturmamızısağlar.

Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar.

Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya

yardımcı olabilecek bir araçtır.

Sıralı Listeler



4

Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır.

Bu etiketler listenin başladığını ve bittiğini belirtir.

Liste maddelerinin başına ise <li> (list item) etiketini getiriyoruz.

Bu etikette tıpkı <br> etiketi gibi sonlandırılmıyor.

<ol> etiketine parametreler ekleyebiliyoruz.

Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harflebaşlayacağını (start) belirtebiliyoruz.

Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip

olmasını sağlıyor.

Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünüvereceğiz.

Kodun geri kalan kısımlarını kendi sayfanızda tam olarak yazmayı unutmayın.

Örnek - 1



5

Sıralı Listeler



6

Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak da mümkün.

Dikkat edeceğimiz nokta;

işe <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketinigetirmek.

listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak.

Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz.

Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi)

Sıralı Listeler



7

Numaralı listeyi 1’den başka bir sayıyla başlatmak için;

<ol> etiketi içinde start=“n” bağımsız değişkenikullanılmalıdır.

n, başlama noktasıdır.

value=“n” bağımsız değişkenini tek bir öğenin sırasınıdeğiştirmek istediğimizde kullanabiliriz.

Bir liste elemanını 5 ile numaralandırmak için;

<li value=“5”> tanımlaması kullanılır.

Örnek - 2



8

Örnek - 3



9

Sırasız Listeler



10

Bu tip listelerde de mantık aynı.

Fark;

listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçükyuvarlaklar, kareler kullanabilmemiz.

<ol> etiketi yerine <ul> etiketini kullanıyoruz,

liste maddeleri için kullandığımız <li> etiketi burada da geçerli.

<ul> için kullanılabilecek parametreler ise şöyle;

type için disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare).

Compact parametresi sırasız listelerde de kullanılabiliyor.

Örnek - 4



11

<body>

Örnek - 5



<body>

<h1><u>Günler</u></h1>

<ol type="1">

<li>Pazartesi

<li>Salı

<li>Çarşamba<li>Perşembe

<li>Cuma

<li>Cumartesi

<li>Pazar</ol>

</body>12

<body bgcolor="yellow">

Örnek - 6



<body bgcolor= yellow >

<center><h1><u>Günler</u></h1></center>

<ul type="disc"><font face="verdana" size="5" color="blue">

<li>Pazartesi

<li>Salı

<li>Çarşamba

<li>Perşembe

<li>Cuma

</font>

<font face="arial" size="5" color="red">

<li>Cumartesi

<li>Pazar

</font>

</ul>

</body> 13

<body bgcolor="yellow"><h1><u>Bilgisayar Programcılığı Dersleri</u></h1>

<font face="arial" size="2" color="red“><h4>1. Yarıyıl</h4></font>

<ol type="1">

<li>Web Tasarımının Temelleri

Örnek - 7



<ol type="a“><i>

<li>İnternet Temel Bilgiler

<li>HTML Nedir?<li>Metin Biçimleme

<li>Fontlar

<li>Listeler

<li>Renkler

<li>Bağlantılar

<li>Çerçeveler

<li>Tablolar

<li>XML

<li>JavaScript

</i></ol>

<li>Grafik ve Animasyon

<li>Programlama Temelleri

<li>Yabancı Dil-I<li>Matematik-I

<li>Türk Dili-I

<li>Çevre Koruma

<li>Atatürk İlkeleri ve İnklap Tarihi-I

</ol>

</body>14

Tanımlama Listeleri



15

Tanımlama listesi adından da anlaşılacağı üzere, bir sözcük gibi terimlerinlistelendiği ve tanımlandığı bir listedir.

Tanımlanan sözcük başlık olarak yazılır ve tanımlayıcı paragraf onun altınagirintileşerek yazılır.




16

Listenin tümü (başlıklar ve tanımlayıcı paragraflar) tanım

listesi (definition list) anlamına gelen <dl> etiketi içine yazılır.

Tanımlanacak her sözcük tanımlanan terim (definition term)anlamına gelen <dt> etiketleri içine yazılır.

Tanımlama paragrafları tanımlama açıklaması (definitiondescription) anlamına gelen <dd> etiketleri içine yazılır.




17

Bu listelemede kullanılan etiketler şöyle;

<dl>...</dl> , <dd> , <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 busefer <dl>...</dl> arasına yazıyoruz.

Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.

Örnek - 8



18

Örnek – 9 (html kod)



19

Örnek - 9 (tarayıcı görüntüsü)



20

Web Tasarımının



1

Web Tasarımının

Temelleri

6 - Renkler



RENKLER



2

Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik.

Şimdi daha ayrıntılı olarak ve bu işin mantığına inerek yeniden elealacağız.

Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz.

Bu bölümde öğreneceğimiz konular:

Renk Kodları

Artalanı (arka zemini) renklendirmek

Renk Kodları



3

Fontlar konusunda, metnin rengini belirlerken <fontcolor="..."> etiketini kullanmıştık

color komutunun karşısına rengin ingilizce karşılığını

yazabiliriz demiştik.

Fakat bunun daha karmaşık olan bir başka yolu vardı;

O da 16'lık sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım.

Renk Kodları



4

Günlük hayatımızda kullandığımız sayı sistemine 10'luksayı sistemi deniyor.

Tüm sayıları 0-9 arası toplam 10 rakamdan oluşan

sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanı sıra diğer sayı sistemleri de

vardır.

Bunlardan bilgisayar alanında kullanılan iki tanesi ikili(binary) ve onaltılı (hexadecimal) sayı sistemleridir.

Renk Kodları



5

İkili sayı sistemi nasıl olur?

Bildiğiniz gibi günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9arası toplam 10 rakam vardır.

Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve1) ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı?

İşte burada işin içine matematik giriyor.

Kısa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilikdüzene çevirmek için o sayı devamlı olarak 2'ye bölünür ve kalanlar soldan sağa doğru yan yana yazılır.

Renk Kodları



6

Gelelim asıl konumuz olan 16'lık sayı sistemine.

Bu sayı sisteminde de toplam 16 karakter var

bunlar;

0 1 2 3 4 5 6 7 8 9 A B C D E F

[10'un karşılığı A ... 15'in karşılığı F'dir.]

Renk Kodları



7

Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir.

Bu renklerden her birinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir).

Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil,#0000FF mavi, #FFFFFF beyaz'dır.

Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.

Renk Kodları

Renk Kodu Renk Adı Renk Adı



8


#000000 black siyah

#000080 navy lacivert

#0000FF blue mavi

#008000 green yeşil

#008080 teal koyu yeşil

#00FF00 lime parlak yeşil

#00FFFF aqua turkuaz

#800000 maroon vişne çürüğü

Renk Kodları




9


#800080 purple mor

#808000 olive zeytuni yeşil

#808080 gray gri

#C0C0C0 silver gümüşi gri

#FF0000 red kırmızı

#FF00FF fuchsia parlak pembe

#FFFF00 yellow sarı

#FFFFFF white beyaz

Artalanı Renklendirmek



10

Bu renklerle yalnızca metinleri değil sayfamızın artalanını darenklendirebiliriz.

Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz.

Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız<body> etiketini, <body bgcolor=#xxxxxx> şeklindedeğiştiriyoruz.

Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !

RGB(R,G,B)

HTML sayfalarında rengi belirlemek bir başka yöntem daha vardır



11

HTML sayfalarında rengi belirlemek bir başka yöntem daha vardır.

Rengi RGB(R,G,B) şeklinde tanımlayarak belirleyebiliriz.

İlk değer kırmızı, ikinci değer yeşil ve üçüncü değer ise mavidir.

R,G,B değerleri maksimum 255 değerini alabilir.

Windows Internet Explorer için geçerlidir.

Aşağıdaki örnekte “Merhaba” yazısı kırmızı renktedir.

<font color=“rgb(255,0,0)”>Merhaba</font>

Örnek - 1



12

Örnek - 2



13

Örnek - 3



14

Örnek - 4



15

Örnek - 5



16

Örnek - 6



17

Örnek - 7



18

Örnek - 8



19

Örnek - 9



20

Örnek - 10



21

Örnek - 11



22

Örnek - 12



23

Örnek - 13



24

Web Tasarımının



1

Temelleri

7- Resimler



Resimler



2

Renkleri de öğrendikten sonra geldik en heyecanlı konuların bir diğerine,

Evet bu konuda sayfamıza ve artalana nasıl resimekleyebileceğimizi öğreneceğiz.

Bu konu aslında tablolar ve bağlantılarla da alakalı, bu yüzdenburada genel olarak işleyeceğiz.

Resim seçiminde, seçtiğimiz resmin gif yada jpg formatındaolması zorunluluğu dışında herhangi bir kısıtlama yok. (telif

hakları kanunu dışında tabi)

Resimler



3

Resim ekleme işi gayet kolay.

Yapmamız gereken browser'a sayfaya koyacağı resmin nerede olduğunugöstermekten ibaret.

Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunubelirtmeniz sayfanızın hayrına olacaktır.

Kullanacağımız etiket şu şekilde olacak;

<img src="resmin bulunduğu yer ve adı" width="x" height="y">

Burada x resmin enini y ise boyunu belirtiyor.

Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz.

Resimler



4

Dikkat Edilecek Hususlar Örneğin bu sevimli kediyi sayfamıza

ekleyelim, peki işte size bir soru:

Bu resmin nerede olduğunu browser'anasıl izah ederiz?

Diyelim ki resmimizin adı kedi.gif

Eni 65, boyu da 91 piksel,

Resimler



5

Eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok,

Kod aynen şu şekilde olmalı:

<img src="kedi.gif" width="65" height="91">

Fakat siz diyorsunuz ki;

Benim sayfamda kullanmak istediğim bir sürü resmim var ve bunları resim adlı bir altklasörde topladım.

Yani html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde.

Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizinolarak kabul edecektir.

Siz de buna göre resmin yolunu uyarlayacaksınız.

Resimler



6

Etiketi bu sefer şu şekilde kullanacağız;

<img src="resim/kedi.gif" width="65" height="91">

Bölü işaretinin yönüne dikkat edin.

Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölüişaretinin tersi,

Yani normal bölü işareti.

HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır.

Ziyaret ettiğiniz Internet adreslerini hatırlayın.

Resimler



7

Peki ya şu şekilde olsaydı;

Resim klasörünün altında başka bir klasör var vekedi.gif dosyası o klasörde,

Diyelim ki klasörün adı da gifler olsun.

Bu durumda kedi.gif'in hard diskimizdeki yolu dac:\html_ders\resim\gifler\kedi.gif şeklinde olacak.

Etiket tahmin ettiğiniz gibi şu şekilde olmalı:

Resimler



8

Etiketi bu sefer şu şekilde kullanacağız;

<img src="resim/gifler/kedi.gif" width="65" height="91">

Bölü işaretinin yönüne dikkat edin.

Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölüişaretinin tersi,

Yani normal bölü işareti.

HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır.

Ziyaret ettiğiniz Internet adreslerini hatırlayın.

Resimler



9

Bu şekilde istediğimiz kadar alt dizine ulaşabiliriz.

Fakat üst dizinlere nasıl ulaşacağız?

O da kolay.

Bu seferde html dosyamızı bir klasör oluşturup o klasörün içinekoyalım, mesela klasörün adı da html olsun -umarımkarıştırmazsınız.

Kedicik bulunduğu gifler klasöründe kalsın.

Son durum şöyle olacak;

Resimler



10

c:\html_ders\html\deneme.htm yolunda html dökümanımız,

c:\html_ders\resim\gifler\kedi.gif yolunda resim var.

İzlememiz gereken yol şöyle:

Browser deneme.htm dosyasının bulunduğu klasörü kök dizin kabuletti.

Önce bir üst dizine çıkmalıyız ardından resim dizinine oradan gifler

dizinine girmeliyiz.

Üst dizine çıkmayı ../ ifadesiyle belirtiyoruz.

Resimler



11

<img src="../resim/gifler/kedi.gif" width="65" height="91">

Bu şekilde art arda ../ ifadesiyle istediğimiz kadar üst dizinegeçebiliriz.

Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.

Resim Hizalama



12

Resim artık sayfamızda, Fakat daima hep solda duruyor.

Bir hizalama (align) komutuyla resmi sağa (right) ya da sola (left)alabiliriz.

- iyi ama resim zaten solda değil miydi??

Resim Hizalama



13

Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz,

Hizalama komutu resmi bu sefer metni göz önüne alarakhizalayacaktır.

<img src="resim.jpg" width="25" height="25" align="right">

Artalana Resim Koyalım



14

Artalanı renklendirmeyi öğrenmiştik:

<body bgcolor="...."> ifadesiyle bu işi kolayca yapıyorduk.

Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir.

<body bgcolor="..." background="...">

Artalana Resim Koyalım



15

Kullandığımız resme yakın tonda bir rengi bgcolor ifadesinin karşısına yazmayıihmal etmemek yine bizim hayrımızadır.

Bunun yanında background ifadesinin karşısına yukarıda anlattığımız kurallar çerçevesinde istediğimiz resmi koyabiliriz.

Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok.

Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfayayerleştirilecektir.

Resme alternatif metin eklemek



16

Resimlere alternatif olarak metin yazılabilir.

Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerinealternatif açıklama görüntülenecektir.

alt="..." parametresiyle açıklama ekliyoruz,

bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve

içinde görüntülenir.

<img src="resim.gif" alt="kum saati">




17

Son bir örnekle bu konuyu bitirelim,

Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekildesayfaya yerleştirelim.




18

<body bgcolor="#666dfe" background="bulut.jpg"><center><img src="world.gif" width="360" height="170" alt="harita"></center>




19

Şu ana kadar öğrendiğimiz komutlarla yerleştirmeişlemini ancak bu kadar yapabiliyoruz.

Daha sonraki konularda tabloları kullanarak

istediğimiz düzeni sağlamayı öğreneceğiz.

Web Tasarımının



1

Temelleri

8 - Bağlantılar



G ldik HTML'd ö li l d bi i i l b ğl t l

Bağlantılar



2

Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara.

Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili halegetirebiliriz.

Bir tıklama bizi istediğimiz yere götürecektir.

HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür.

Bu yolla başka neler yapılabilir?

Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,.. bunların

hepsine bağlantı kazandırmak mümkün.

Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı daolabilir.

Bi WEB it i d lt i ili l k bi t k k li l

Bağlantılar



3

Bir WEB sitesinde altı çizili olarak bir takım kelimeler görmüşsünüzdür.

Bu altı çizili kelimelerin üstüne gelince fare şekil değiştirip bir elşekline dönüşmektedir.

Bunun anlamı kelimeye tıkladığınızda kelimeyle ilgili bir başkaWEB sayfasına gideceğidir.

HTML'nin bu görevini yerine getirmesini sağlayan etiket <a>’dir.

Bağlantılar



4

Dokümanınızdan başka dokümana bağlantı yapabilmek için:

Etiketi giriniz. (Kısaca ilk satıra <a> yazınız)

Hangi dokümana geçiş yapmak istiyorsanız, ismini yazınız.

href="dosyaismi “

Bu dokümanı ekranda hangi isimle göstermek istediğinizi belirtiniz.

Etiketi kapatınız. </a>

Bağlantılar



5

Şimdi yapmak istediğimiz bağlantıya göre kullanacağımızkomutları inceleyim:

<a href="....">...</a>

Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir,

Kullanıcıyı farklı bir internet adresine yönlendirebilir,

Kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını

sağlayabilirsiniz.

Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün.

Şimdi aşağıdaki örnekleri birlikte inceleyelim

Bağlantılar



6

Şimdi aşağıdaki örnekleri birlikte inceleyelim,

Fakat öncelikle bir kuralı belirtelim;

<a>...</a> etiketi arasına yazdığımız metinler bağlantı özelliğinesahip olacaktır,

Metnin bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.

Örnek 1

Bağlantılar



7

Örnek - 1

<a href="meyve.gif">buraya tıklandığında meyve resmi açılacak</a>

Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısınabağlantı özelliği kazandırdığımızdan,

Browser tarafından altı çizili mavi yazıyla gösterilecek ve

Kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şeklinedönüşecektir.

Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynıdizinde bulunan meyve.gif resmini açacaktır.

Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.

Örnek - 2

Bağlantılar



8

Örnek - 2

<a href="midi.zip">midi dosyalarını çekmek için tıklayın</a>

İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek içintıklayın" yazısına bağlantı özelliği kazandırdık.

Fakat dosya tipinden kaynaklanan bir fark var;

İlk örnekte meyve.gif'e tıklandığında browser resmi açacaktır.

Fakat bu örnekte browser kullanıcıya midi.zip dosyasını açmak mı yoksa

diske kaydetmek mi istediğini soran bir pencere açar.

Bunun sebebi browser'ın htm, txt, jpg, gif,.. uzantılı dosyalarıgörüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları açamamasıdır.

Örnek - 3

Bağlantılar



9

Örnek - 3

<a href="sayfa2.htm">2.sayfaya gitmek için tıklayın</a>

Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizindebulunan sayfa2.htm isimli başka bir html dökümanı açılacaktır.

Örnek - 4-5-6

Bağlantılar



10

Örnek - 4-5-6

<a href="resim/kedi.jpg">kedi resmi</a>

<a href="resim/bitki/karanfil.gif">işte çok güzel bir karanfil</a>

<a href="../araba/bmw.jpg">otomobil resimleri</a>

Bu 3 örnekte alt dizinlere / üst dizinlere verilen bağlantıya misaller görüyorsunuz, resimler konusunda gördüğümüz kurallar burada dageçerli.

Örnek - 7

Bağlantılar



11

Örnek - 7

<a href="http://birecik.harran.edu.tr/">tıklayın sitemi ziyaret edin</a>

Yedinci örnekte bir internet adresine link verdik.

Örnek - 8

Bağlantılar



12

Örnek 8

<a href="ftp://ftp.benimsitem.com/">tıklayın dosyaları indirin</a>

Bu ise bir ftp adresine verilen link örneği.

Örnek - 9

Bağlantılar



13

Örnek 9

<a href="mailto: [email protected]">mail atın</a>

Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak vemail'in send to (kime) kısmına, verdiğimiz mail adresi otomatik olarakyazılacaktır.

Bir metin üzerinde belirli bölgelere ulaşmak için yine etiketler

Sayfa İçi (Dahili) Bağlantı Oluşturma



14

Bir metin üzerinde belirli bölgelere ulaşmak için yine etiketler kullanılabilir.

<a href="#...">...</a>,

<a name="....">...</a>

komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz.

Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü




15

ğ y y g

olsun.

Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin.

Böyle bir sayfa hazırlamak için yapacağımız şeyler:

1. "tıklandığında" açılacak konuyu işaretlemek.

<a name="....">...</a>

2. browser'a, hazırlayacağımız menüye "tıklandığında" bu işaretlikonuya gitmesini bildirmek.

<a href="#...">...</a>




16

"Listeler" sayfasının benzer bir örneğini yukarıda kodlarıyla birlikte




17

y ğ y y

görüyorsunuz.

Sayfa içerisindeki başlıkları <a name>...</a> komutları arasına alıyoruz,

name kısmına başlığı hatırlatıcı bir isim verebilirsiniz.

Benim burada kullandığım <u> ve <b> etiketleri, önceden öğrendiğimiz gibibaşlığı altı çizili ve koyu olarak yazıyor.

Yine 1-2-3 başlıklarıyla oluşturduğumuz menü linklerini <a href> komutuylahazırlıyoruz,

Yalnız bir farkla;

name kısmında başlığa verdiğimiz hatırlatıcı ismi önüne # işaretini koyarak hrefkısmına yazıyoruz.

İşte bu iş bu kadar kolay.

Diyelim ki kullanıcı sayfadaki bir linki tıkladığında başka bir

Sayfa Dışı Bağlantı Oluşturma



18

Diyelim ki kullanıcı sayfadaki bir linki tıkladığında, başka bir sayfanın belli bir bölümünün açılmasını istiyoruz,

Bunun için linke tıklandığında açılacak yazıyı <a name>...</a> ileişaretledikten sonra bağlantı etiketini şu şekilde yazıyoruz:

<a href="sayfa2.htm#ilgiliyer">Bu linke tıklandığında başka bir sayfanın ilgili kısmı açılacak</a>

<a name="ilgiliyer">Başka bir sayfadaki linke tıklandığındaburası açıldı</a>

Sayfa Dışı Bağlantı Oluşturma



19

Resimlere bağlantı özelliği kazandırmak



20

Metinlere bağlantı vermeyi öğrendik, Peki sayfadaki resimlere nasıl link vereceğiz?

Bunun için resmi yerleştirmek için kullandığımız:

<img src="..." width="x" height="y"> etiketini

<a href>...</a> etiketinin arasına alıyoruz.

İşte örnek;

Resimlere bağlantı özelliği kazandırmak



21

ş ;

<a href="sayfa1.htm"><img src="resim.gif" border="0"></a>

resim.gif tıklanacak resmi,

sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor.

Border komutu ise resimde bağlantı özelliği olduğunu belirtençerçeveyi kontrol ediyor,

0 (sıfır) değeri bu çerçeveyi tamamen yok eder.

Bu komutu değişik sayılarla deneyebilirsiniz.

Target parametresi



22

Son olarak bağlantının açılacağı pencereyibelirtmek için kullanılan target parametresiniöğrenelim.

Kullanımı :

<a href="..." target="...">...</a>

Target parametresi

target="_blank" Bağlantı yeni bir pencerede açılır.



23

target="_self" Bağlantı aynı pencere içerisinde açılır.

target="_top" Bağlantı aynı pencere içerisinde en üstten itibarenaçılır.

target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir anasayfa varsa onun yerine konur.

target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantınınadı verilen çerçevede açılmasını sağlar.

ÖRNEKUYGULAMA



24

images klasörü

örnek uygulama klasörü

index.htm



25

sayfa2.htm



26

sayfa3.htm



27

sayfa3.htm



28



sayfa4.htm

29

sayfa4.htm



30



31

sayfa5.htm

sayfa5.htm



32

Web Tasarımının



1

Temelleri

9 - Çerçeveler

Öğr.Gör. Serkan KORKMAZHarran ÜniversitesiBirecik Meslek Yüksekokulu



2

GİRİŞÇerçeve (frame),

Çerçeveler web tarayıcınızın penceresinibirbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir.



3


Çerçeveler (frame), HTML'e sonradan eklenmiştir.

Bu yüzden eski sürüm browser'lar çerçevekullanılmış bir sayfayı görüntüleyemezler.

(Microsoft Internet Explorer 3.0 ile NetscapeNavigator 2.0 ve üstü sürümleri frameleridestekliyor).



4


Çerçeveler sayfanın bazı kısımlarını sabit bırakırken,diğer kısımlarını değiştirme imkanı verir.

Bunun anlamı ise kullanılacak çerçeve miktarınca ek

HTML sayfası oluşturmak demektir.

Browser, çerçevenin bir bölümüne yerleştirilecekolan kaynak dosyayı bulamazsa hata mesajıverecektir.

ÇERÇEVELER



5

Çerçevelerin özellikleri;

Her çerçeve kendi URL’sine sahiptir.

Her çerçeveye ad verilebilir.

Her çerçeve kullanıcı tarafından boyutlanabileceği gibi,

kendi kendini de otomatik olarak boyutlayabilir.

ÇERÇEVELER

Çerçevelerin kullanım alanları;



6

İçindekiler sayfası hazırlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir.

Bir çerçevede kriter verilerek yapılan işlemler diğer çerçevede de görüntülenebilir.

Sürekli görünmesi istenen mesajlar için kullanılabilir.

ÇERÇEVELER



7

Bir frame belgesi normal bir HTML belgesineçok benzer.

Tek farkı içinde <body> elemanı (tag) yerine,

<frameset> elemanı kullanılmasıdır.

ÇERÇEVELER



8

<HTML> <HEAD> …. </HEAD> <FRAMESET> ….. </FRAMESET> </HTML>

<frameset>

Çerçeve oluşturmada kullandığımız etikettir.



9

Tag ile birlikte kullanılabilecek iki adet parametre vardır.

Bunlar cols ve rows’dur.

Bu parametreler oluşturulacak pencerelerin cinsini belirler.

cols Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan

yana sütunlar şeklinde olmasını sağlar.



10

Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir.

Tabiî ki belirtilen sütun sayısı,oluşturulacak olan çerçeve sayısını dabelirleyecektir.

“*” ile göreceli değer verilirken, sütunun geriye kalan bütün alanıkapsaması için kullanılır.

“*” işareti önünde bir sayı varsa, sütun diğer göreceli değerlerdendaha büyük olacaktır.

cols

Örnek 1:



11

<frameset cols=”20%, 60%, 20%”>

İlk ve sonda tanımlanan çerçeve ortadakiçerçeveden daha küçük olacaktır.

cols

Örnek 2:



12

<frameset cols=”100,*,100”>

İlk ve sonda tanımlanan çerçeve sabit aralıklı,ortadaki çerçeve ise geriye kalan aralığı kullanır.

cols

<html>

h d



13

<head> <title>Yeni Sayfa2</title>

</head>

<frameset cols="30%,70%">

<frame name="sol" src="sol.htm">

<frame name="sag" src="sag.htm"> </frameset>

</html>

cols

A ğ d ki ği i l li



14

Aşağıdaki örneği inceleyelim:

cols

Örneğimizde 3 adet html dosyası var.



15

Bunlardan frame.htm dosyası çerçeve komutlarınıiçeriyor (yani ana dosya).

Bu komutlar browser'a, görüntülenmekte olan pencereyiikiye bölmesini bildirmektedir.

Browser’ın bunlardan birisinde htm1.htm dosyasını,diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

cols

<body bgcolor="..."> etiketi ile;



16

htm1.htm dosyasının artalan rengi kırmızı,

htm2.htm dosyasının artalanı ise mavi yapılmış,

Kolaylık olması açısından dosyaların adlarınıgörüntülemeleri için bunlar da yazılmıştır.

Sonuç gördüğünüz gibi.

<html><head>

titl Ç l /titl

frame.htm



17

<title>Çerçeveler</title></head><frameset cols="*,*">

<frame name="sol" src="htm1.htm">

<frame name="sag" src="htm2.htm"></frameset><noframes>

<body></body>

</noframes></html>

<html>

h d

htm1.htm



18

<head></head>

<body bgcolor="red"><font size="7" color="#ffffff">htm1.htm</font>

</body>

</html>

<html>

h d

htm2.htm



19

<head></head>

<body bgcolor=“blue"><font size="7" color="#ffffff">htm2.htm</font>

</body>

</html>

rows

Cols etiketinde değerler verilirken kullanılan

f t k ll l k l i lt lt



20

formatın aynısı kullanılarak çerçevelerin alt altasatırlar görünümünde açılmasını sağlar.

rows

<html>

h d



21

<head>

<title>Yeni Sayfa2</title>

</head>

<frameset rows="100,*">

<frame name="ust" src="ust.htm"> <frame name="alt" src="alt.htm">

</frameset>

</html>

<frameset> ... </frameset>

Çerçeve oluşturmada kullandığımız etiket:



22

frameset,

cols ifadesi açılacak çerçevelerin yan yana sütunlar

şeklinde olacağını belirtiyor,

buraya rows yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.

cols



23

cols (sütunlar)

rows



24

rows (satırlar)


cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden

ebatlarını belirliyoruz



25

ebatlarını belirliyoruz.

Buraya örneğin cols="140,500" gibi sayı yazılabilir.

cols="25%,75%" ile browser penceresinin o anki ebadınagöre verilen % oranlarına göre şekil alması sağlanabilir

yada * sembolü ile açılacak çerçevenin ebadı browser'abırakılır.

cols="140,*" ifadesi ilk pencerenin 140 pixel olacağınıikincinin ise ebadının browser'a bırakıldığını gösteriyor.


Bu şekilde aynı zamanda açılacak çerçeve sayısını da

belirtmiş oluyoruz



26

belirtmiş oluyoruz.

cols=".." ifadesine iki değer (ya da yıldız) verirsek bu ikiçerçeve aç anlamındadır.

3 değer 3 çerçeve açar.


FRAMESET etiketi ile kullanabileceğimiz diğer parametreler

şunlardır;



27

şunlardır;

frameborder="..." (yes, no)

Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini

belirler. border="..." (sayı)

Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler

<frame> <frameset> ile çerçeveleri böldükten sonra içlerine konulacak

sayfaları tanımlama işi <frame> elemanı ile yapılır.



28

frame name="..." src="..."

name bağlantıların TARGET kısmında kullanabilmek amacıylaçerçevelere isim (name) vermeyi sağlıyor.

src pencerede görüntülenecek html dosyasının yerini gösteriyor.

Resimler konusunda belirttiğimiz yer (kaynak) gösterme kuralları

burada da geçerlidir.

Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketikullanıyoruz.

<frame> <frame> etiketi ile kullanılan parametreler şunlardır:

name



29

name

Çerçevenin adıdır.

En önemli parametre sayılabilir.

Çünkü frameset’lerde bir çerçevenin içindeki bir link bir başkaçerçevenin içeriğini değiştirebilir.

Bunu da name parametresini kullanarak yapar.


src



30

src

İçine yerleştirilecek dosyanın URL’sini belirtir.

src’u belirtmediğiniz takdirde;

Tarayıcı herhangi bir hata vermeyecektir.

Buraya varsayılan renkte boş bir sayfa koyacaktır.


RESIZE/NORESIZE



31

RESIZE/NORESIZE

Çerçeve büyüklüğünün değiştirilip değiştirilmeyeceği bilgisini içerir.

resize Pencere boyutlarının değiştirilebilmesini sağlar.

noresize Pencere boyutlarının sabit olmasını sağlar.


marginwidth=" " marginheight=" " (sayı)



32

marginwidth= ... marginheight= ... (sayı)

Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

MARGINHEIGHT

Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.

MARGINWIDTH

Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.


scrolling (yes no auto)



33

scrolling (yes, no, auto)

Çerçevenin içeriğinin bir ekrana sığmaması halinde tarayıcınınkenara bir kayma çubuğu ekleyip eklemeyeceğini belirler (yes, no,

auto).

Varsayılan değeri auto’dur.

(yes, no, auto) kaydırma çubuklarının durumunu belirler.

<noframes> Eski sürüm browserların çerçeve etiketini tanımadıklarından

bahsetmiştik.



34

İşte noframes kısmı bu browserlara hitap ediyor.

body kısmını bu eski browserlar görüntüleyebiliyor.

Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösterenbir mesaj yazılabilir.

Böylece ziyaretçinin artık yeni sürüm bir browser kullanması

gerektiğini hatırlatabilirsiniz.

<noframes> <noframes> etiketi,

Eğer ziyaretçinin istemcisinin çerçeve desteği yoksa ziyaretçiye



35

Eğer ziyaretçinin istemcisinin çerçeve desteği yoksa ziyaretçiyegörüntülenecek sayfayı belirlemede kullanılır.

Daha çok eski ve Linux altında kullanılan metin tabanlı

istemcilerde çerçeve desteği yoktur.

<html> <head><title>ÇERÇEVELER</title></head> <frameset cols="100,*"> <frame name="sol" src="sol.htm" scrolling=”no” marginwidth=”10” marginheight=”10” noresize>



36

marginheight= 10 noresize> <frame name="sag" src="sag.htm" marginwidth=”0” marginheight=”0” > </frameset>

<noframes> <body> <h1>Browser'ınızın sürümü sayfamızı görüntülemeye uygun

degil, lütfen daha yeni bir sürüm yükleyip tekrar deneyin</h1> </body> </noframes> </html>

Daha Karmaşık Çerçeveler Yan yana sütunlar ya da alt alta satırlar görünümünde çerçeveler

açmayı öğrendik.



37

Peki tablolardan bildiğimiz hücreleri birleştirme gibi bir özellikçerçevelerde de var mı?

Maalesef yok, fakat aynı görünümü elde etmek mümkün.

Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynakdosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz.

İç içe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarakbelirtip, etiketleri sonlandırıyoruz.

Daha Karmaşık Çerçeveler

<frameset rows="*,*" cols="*,*">frame name "a“ src "htm1 htm"



38

<frameset rows , cols , ><frame name="a“ src="htm1.htm"><frame name="b" src="htm2.htm"><frame name="c" src="htm3.htm"><frame name="d" src="htm4.htm">

</frameset>


<frameset cols="150,*"><frame name="a" src="htm1 htm">



39

<frameset cols 150, ><frame name= a src= htm1.htm ><frameset rows="100,*"><frame name="b" src="htm2.htm"><frame name="c" src="htm3.htm">

</frameset></frameset>


<frameset rows="50%,50%"><frameset cols="* *">



40

a eset o s 50%,50%<frameset cols= , ><frame name="a" src="htm1.htm"><frame name="b" src="htm2.htm">

</frameset>

<frame name="c" src="htm3.htm"></frameset>


<frameset rows="*,*,*">

<frame name="a" src="htm1.htm">



41

<frameset cols="*,*"><frame name="b" src="htm2.htm"><frame name="c" src="htm3.htm">

</frameset><frame name="d" src="htm4.htm"></frameset>


<frameset cols="*,*">frameset rows "* *"



42

,<frameset rows="*,*"><frame name="a" src="htm1.htm"><frame name="b" src="htm2.htm">

</frameset>

<frame name="c" src="htm3.htm"></frameset>

Buraya kadar öğrendiklerinizle internette siz de kendinize aitsayfalarınızı inşa edebilirsiniz.

Eğer bu konuda ciddi düşünüyorsanız bunun yolunun çokçalışmaktan geçtiğini sakın unutmayın.

H id it l i di t ğ l l



43

Hoşunuza giden sitelerin dizayn mantığını anlamaya çalışın.

Hatta bunun için kaynak kodlarını inceleyin.

Görsel editörleri kullanarak sayfalar hazırlayın ve sonra daeditörün kodları nasıl oluşturduğuna bakın.

Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve

devamlı araştırmaktan geçtiğini unutmayın.

Hepinize başarılar...





44

Ş yg ş ş y

1. Web tarayıcınızın penceresini yapışık parçalara ayırarak her bir

parçanın ayrı bir içerik sergilemesini sağlayan etiket hangisidir?

A <frame>

B <frameset>

C <input>

D <colspan>





45

Ş yg ş ş y

1. Web tarayıcınızın penceresini yapışık parçalara ayırarak her bir

parçanın ayrı bir içerik sergilemesini sağlayan etiket hangisidir?

A <frame>

B <frameset>

C <input>

D <colspan>





46

Ş yg ş ş y

2. Aşağıdakilerden hangisi <frame> ile beraber kullanılan

parametrelerden değildir?

A name

B scrolling

C resize

D colspan





47

Ş yg ş ş y

2. Aşağıdakilerden hangisi <frame> ile beraber kullanılanparametrelerden değildir?

A nameB scrolling

C resize

D colspan





48

3. Çerçeve desteği olmayan tarayıcılarda görüntülenecek sayfayı

belirlemede kullanılan etiket hangisidir?

A <frame>

B <noframes>

C <frameset>

D <noframeset>





49

3. Çerçeve desteği olmayan tarayıcılarda görüntülenecek sayfayı

belirlemede kullanılan etiket hangisidir?

A <frame>

B <noframes>

C <frameset>

D <noframeset>

UYGULAMA FAALİYETİİşlem Basamakları Öneriler

Web sayfanızı dikey olarak iki

çerçeve olacak şekilde bölünüz.

Web sayfanızda çok fazla

çerçeve kullanmak sayfanın



50

yüklenmesini zorlaştıracaktır.

Çerçevelerin arka plan rengini değiştiriniz.

Çerçevelerin boyutlarının değişmesini

engelleyiniz. Kaydırma çubuğukullanmayınız.

Her bir çerçeve için ayrı bir

html dosyası hazırlamanız

gerekecektir.

Sol taraftaki çerçevede menü oluşturunuz.

Bu menülere tıkladığınızda içeriğinin sağ

taraftaki çerçevede açılması için bağlantıekleyiniz.

Menü oluşturacağınız

çerçevenin genişliğini az tutup

diğerine daha fazla yer ayırabilirsiniz. Böylece

menülerin içeriği daha rahat

gözükecektir.

PERFORMANS TESTİ

Değerlendirme Ölçütleri Evet / Hayır

<FRAMESET> etiketini kullandınız mı?

Bir arkadaşınızla birlikte yaptığınız uygulamayı değerlendirme ölçeğine göre

değerlendirerek eksik veya hatalı gördüğünüz davranışları tamamlayınız.



51

<FRAMESET> etiketini kullandınız mı?

COLS ve ROWS parametrelerini kullandınız mı?

<FRAME> etiketini kullandınız mı?

<FRAME> etiketini kullandınız mı?MARGINWIDTH ve MARGINHEIGHT parametrelerini

kullandınız mı?

SCROLLING parametresini kullandınız mı?

NORESIZE parametresini kullandınız mı?<NOFRAMES> etiketini kullandınız mı?

UYGULAMA DEĞERLENDİRMESİ

Yaptığınız değerlendirme sonunda hayır şeklindeki cevaplarınızıbir daha gözden geçiriniz.



52

Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz.

Eksiklerinizi araştırarak ya da öğretmeninizden yardım alaraktamamlayabilirsiniz.

Cevaplarınızın tamamı evet ise bir sonraki faaliyete geçiniz.

anasayfa.htm

<html>

<head><title>Çerçeveli Sayfa</title>



53

Ç ç y</head><frameset cols="12%,*"><frame name="sol" src="menu.htm"><frame name="sag" src="ders1.htm"></frameset></html>

menu.htm



54

ders1.htm



55

ders2.htm



56

ders3.htm



57

ders4.htm



58

Web Tasarımının

Temelleri



1

Temelleri10 - TABLOLAR


Harran Üniversitesi

Birecik Meslek Yüksekokulu

GİRİŞ



2

GİRİŞTablolar,

Sayfaları satırlara/sütunlara bölmek ya da

Metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak

amaçlarıyla kullanabileceğimiz

HTML'nin en önemli yapı taşlarındandır.

GİRİŞ



3

GİRİŞSayfada gözüksün ya da gözükmesin tabloları bir iskelet gibikullanabiliriz.

Böylece istediğiniz düzenlemeyi yapabilirsiniz.

TABLOLAR

Ekranda tablo gösterirken, o an kullanılan pencerenin

büyüklüğüne ve tablo içindeki metnin genişliğine göre tablonuneni ve boyu değişebilir.



4

Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrıtanımlanır.

Her satır ve sütun, kendi içinde başka satır ve sütunları ihtivaedebilir ve diğer satır ve sütunlarla birleştirilebilir.

Tablolara başlık, liste, paragraf, form, figür ve her formatta metinkonabilir.

TABLOLAR

Sonbahar Kış İlkbahar Yaz

İşte Tablolar,



5

Eylül Aralık Mart Haziran

Ekim Ocak Nisan Temmuz

Kasım Şubat Mayıs Ağustos

TABLOLARTabloyu renklendirelim,

Sonbahar Kış İlkbahar Yaz



6

Eylül Aralık M art Haziran

Ekim Ocak Nisan Temmuz

Kasım Şubat Mayıs Ağustos

TABLOLARBaşka bir örnek,

ÖLÇÜLER



7

ÇB o y K i l o

1 Ahmet 1.77 80

2 Ayşe 1.82 75

3 Kerim 1.75 83

TABLOLARTablonun iskeleti farklıdır.



8

<TABLE>

Tablolar <table> belirteci ile başlar.

<table>



9

<table>……

</table>

<TR>

Tabloda satır oluşturmayı sağlar.



10

<TD>

Tabloda sütun oluşturmayı sağlar.



11

<TABLE><html>

<head>

<title>Tablolar</title>/h d



12

</head>

<body>

<table border="1">

<tr>

<td>hücre</td>

</tr>

</table></body>

</html>

<TABLE><html><head>

<title>Tablolar</title></head>



13

</head><body><table border="1">

<tr><td>hücre1</td><td>hücre2</td>

</tr>

</table></body></html>

<TABLE><html><head><title>Tablolar</title></head><body>



14

<body><table border="1"><tr>

<td>hücre1</td></tr><tr><td>hücre2</td></tr>

</table></body></html>

<TABLE>

<table border="1">

<tr><td>hücre1</td>



15

<td>hücre2</td>

</tr>

<tr>

<td>hücre3</td>

<td>hücre4</td>

</tr>

</table>

<table border="1"><tr> ………………….d RAM / d 1 t

<TABLE>



16

<td>RAM</td> 1.satır </tr>………………….<tr> ………………….

<td>ROM</td> 2.satır </tr> ………………….

</table>

Bu örneklerde de görüldüğü gibi tablolar satır vesütunlardan oluşur.

Tabloya genel bir başlık atayabiliriz.

TABLOLAR



17

Her sütun için de kendi başlığını oluşturmak mümkündür.

Üstteki tablo başlığının altında veya tablonun sona erdiğisatırdan sonraki satıra açıklama (thead/caption)koyabiliriz.

Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerlebirleştirebiliriz.

TABLOLAR

<TR>

Sütun Başlığı

<TH>

Sütun Başlığı

<TH>

Sütun Başlığı

<TH>

Sütun Başlığı

<TH> </TR>

Tablo Başlığı (thead)



18

<TR>hücre1<TD>

hücre2<TD>

hücre3<TD>

hücre4<TD>

</TR>

<TR> hücre5<TD> hücre6<TD> hücre7<TD> hücre8<TD> </TR>

Tablonun alt yazısı (caption)

Tablolar da HTML sayfasında olduğu gibi başlık (head)ve gövde (body) bölümlerine ayrılabilir.

Başlık <thead> etiketleri arasına yazılır.

Tabloda Başlık ve Gövde



19

Gövde <tbody> etiketleri arasına yazılır.

<caption> etiketi ile ikinci bir açıklama vermekmümkündür.

Tabloda sütun başlıklarına gelince,

Her bir başlık <th> etiketi ile belirtilir.

<TH> Sütun Başlığı



20

Bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasınayazılır.

Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri<tbody>...</tbody> arasına alınır.

<table border="1"> <thead>Tablo Başlığı (thead)</thead> <caption align="bottom">alt-yazı (caption)< /caption> <tr> <th>1.Sütun</th>

<TABLE>



21

<th>2.Sütun</th> <th>3.Sütun</th </tr> <tbody> <tr> <td>hücre1</td> <td>hücre2</td> <td>hücre3</td> </tr> </tbody> </table>

<tbody> …………

<tr> <td>hücre4</td>

<TABLE>



22

<td>hücre5</td> <td>hücre6</td>

</tr> <tr> <td>hücre7</td> <td>hücre8</td>

<td>hücre9</td> </tr> </tbody>

<table

border="...“

cellpadding="...“ll i " “

<table> Parametreleri



23

cellspacing="...“

align="...“

width="...“ height="...“

>

<table border="...“>

border parametresi çerçevenin kalınlığını belirtir.




24

p ç ç ğ

border=0 çerçevenin görünmemesini sağlar.

<table>Parametreleri<html>

<head>

<title>Tablolar</title>

</head>

<body>



25

<table border=“0">

<tbody>

<tr><td>hücre</td>

</tr>

</tbody>

</table></body>

</html>

<table> Parametreleri<html>

<head>




26

</head>

<body>


<tr>

<td>hücre</td>

</tr>

</table></body>

</html>


<head>




27

</head>

<body>


<tr>

<td>hücre</td>

</tr>

</table></body>

</html>

<table cellpadding="...“>

cellpadding parametresi hücre içi marj değerinibelirtir




28

belirtir.

cellpadding=0 hücre içinde bulunan unsurun(metin/grafik) hücre çerçevesine bitişik olmasınısağlar.


<head>




29

</head>

<body>

<table cellpadding=“0">

<tr>

<td>hücre</td>

</tr>

</table></body>

</html>

Parametreler<html>

<head>




30

</head>

<body>

<table border="1" cellpadding="5">

<tr>

<td>hücre</td>

</tr>

</table></body>

</html>

Parametreler



31

Parametreler<html>

<head>




32

</head>

<body>

<table border="1" cellpadding=“10">

<tr>

<td>hücre</td>

</tr>

</table></body>

</html>




33

<table cellspacing="...“>

cellspacing parametresi hücreler arası marjı




34

belirler.

<table> Parametreleri<html><head><title>Tablolar</title>

</head><body>

t bl b d "1" ll i "1"



35

<table border="1" cellspacing="1"><tr><td>hücre1</td>

</tr><tr><td>hücre2</td></tr></table>

</body></html>




36

<table> Parametreleri<html><head><title>Tablolar</title>

</head><body>

t bl b d "1" ll i g “5"



37

<table border="1" cellspacing=“5"><tr><td>hücre1</td>

</tr><tr><td>hücre2</td>

</tr></table>

</body></html>




38

<table align="...“>

align parametresi tabloyu hizalamada kullanılır.




39

align=left sola dayalı yapar.

align=right sağa dayalı yapar.

align=center ortalar

<table> Parametreleri<table border="1" align="left"><tr>

<td>hücre1</td></tr>



40


</tr></table>

<table> Parametreleri<table border="1" align=“center"><tr>




41


</tr></table>

<table> Parametreleri<table border="1" align=“right"><tr>




42


</tr></table>

width (en-genişlik)

height (boy-yükseklik)




43

width ve height parametreleri resimler konusundagördüğümüz gibi tabloda en ve boy uzunluğunu belirtir.

Tablonun değer verilmediğinde sahip olduğu normalölçülerinden küçük değerler verilirse bu değerler dikkatealınmaz.

<table> Parametreleri<table border="1" width="150" height="200"><tr>




44


</tr></table>

<td ………………. >

bgcolor="...“

background="..."

<td> Parametreleri



45

width="...“

height="...“

align="...“

valign="..."

<td bgcolor="...“>

bgcolor parametresi hücreyi renklendirmedekullanılır.

<td> Parametreleri



46

kullanılır.

<td> Parametreleri<table border="1" cellpadding="7">

<tr>

<td bgcolor="#ff0000">hücre1</td></tr><tr>



47

<td bgcolor="#00ff00">hücre2</td></tr>

<tr><td bgcolor="#0000ff">hücre3</td>

</tr><tr>

<td bgcolor="#ffff00">hücre4</td></tr>

</table>

<td> Parametreleri



48

<td background="...“>

background parametresi ile hücreye arka zeminresmi yerleştirebiliriz.

<td> Parametreleri



49

y ş

<td> Parametreleri<table border="1" cellpadding=“100">

<tr>

<td background="resim1.jpg">hücre1</td><td background="resim2.jpg">hücre2</td></tr>



50

<tr><td background="resim3.jpg">hücre3</td>

<td background="resim4.jpg" >hücre4</td></tr>

</table>

<td> Parametreleri



51

<td width="...“ height="...“>

width (en-genişlik)

<td> Parametreleri



52

height (boy-yükseklik)

width ve height parametreleri ile hücreninboyutlarını belirleyebiliriz.

Tek sütunlu bir tabloda height (yükseklik)değerini her hücre için değiştirebilirken, width

(genişlik) değeri ile her hücreyi değiştiremeyiz.

<td> Parametreleri



53

En büyük width değeri tüm sütun için geçerliolacaktır.

Aynı şekilde tek satırlı tabloda width değeriniher hücre için değiştirebilirken en büyük height

değeri tüm satır için geçerli olacaktır.

<td> Parametreleri <table border="1" cellpadding="7"> <tr>

<td width=120 height=20>hücre1</td> </tr> <tr>



54

<td width=120 height=40>hücre2</td> </tr>

<tr> <td width=120 height=60>hücre3</td> </tr> <tr> <td width=120 height=80>hücre4</td> </tr> </table>

<td> Parametreleri

<table border="1" cellpadding="7"> <tr>

<td width=40 height=30>hücre1</td>



55





</tr>

</table>

<td align="...“>

align parametresi hücre içinde yatay hizalamayapar.

<td> Parametreleri



56

align=left hücre içini sola dayalı yapar.

align=right hücre içini sağa dayalı yapar.

align=center hücre içini ortalar.

<td> Parametreleri

<table border="1" cellpadding="7"><tr><td width=80 align="left">hücre1</td>

/tr



57

</tr><tr><td width=80 align="center">hücre2</td>

</tr><tr><td width=80 align="right">hücre3</td></tr></table>

<td valign="...“>

valign parametresi hücre içinde dikey hizalama yapar.

valign=top hücre içini dikey olarak yukarı hizalı yapar.

<td> Parametreleri



58

g p ç y y y p

valign=middle hücre içini dikey olarak ortalı yapar.

valign=bottom hücre içini dikey olarak aşağı hizalı yapar.

<td> Parametreleri

<table border="1" cellpadding="7"> <tr> <td height=80 valign="top">hücre1</td> </tr>



59

t <tr> <td height=80 valign="middle">hücre2</td> </tr> <tr> <td height=80 valign="bottom">hücre3</td> </tr> </table>

<td colspan=".." rowspan="..">

colspan aynı satırdaki hücreleri birleştirmek için kullanılır.

rowspan aynı sütundaki hücreleri birleştirmek kullanılır

Hücre Birleştirme



60

rowspan aynı sütundaki hücreleri birleştirmek kullanılır.

Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.

Hücre Birleştirme

A B C D



61

E F G H

I J K L

Hücre BirleştirmeA B C D

E F G H

I J K L



62

<table border="1" cellpadding="12"> <tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> <tr><td>E</td><td>F</td><td>G</td><td>H</td></tr> <tr><td>I</td><td>J</td><td>K</td><td>L</td></tr> </table>

I J K L

Hücre Birleştirme



63

Hücre Birleştirme

A ve B hücrelerini birleştirmek için;

A hücresine ait <td> etiketinecolspan=2 parametresini ekliyoruz.

A C D

E H



64

co spa pa a et es e yo u

B hücresine ait <td>B</td> etiketini

siliyoruz.

E H

I J K L

Hücre Birleştirme

E , F ve G hücrelerini birleştirmek

için;

E hücresine ait <td> etiketinecolspan=3 parametresini ekliyoruz

A C D

E H



65

colspan=3 parametresini ekliyoruz.

F ve G hücrelerine ait <td>F</td>,

<td>G</td> etiketlerini siliyoruz.I J K L

Hücre BirleştirmeA C D

E H

I J K L



66

<table border="1" cellpadding="12"> <tr><td colspan="2">A</td><td>C</td><td>D</td></tr>

<tr><td colspan="3">E</td><td>H</td></tr><tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>

</table>

I J K L

Hücre Birleştirme



67

Hücre Birleştirme

E ve I hücrelerini birleştirmek için;

A B C D

E F G H



68

E hücresine ait <td> etiketine rowspan=2parametresini ekliyoruz.

I hücresine ait <td>I</td> etiketini siliyoruz.

I J K L

A B

C

D

E

F H

J L

Hücre Birleştirme

C , G ve K hücrelerini birleştirmek için;

A B C D

E F G H



69

C hücresine ait <td> etiketine rowspan=3parametresini ekliyoruz.

G ve K hücrelerine ait <td>G</td> ,<td>K</td> etiketlerini siliyoruz.

I J K L

A B

C

D

E

F H

J L

Hücre Birleştirme

A B C D

E F G H

A B

C

D

EF H



70

<table border="1" cellpadding="12"><tr><td>A</td><td>B</td><td rowspan="3">C</td><td>D</td></tr><tr><td rowspan="2">E</td><td>F</td><td>H</td></tr>

<tr><td>J</td><td>L</td></tr></table>

I J K LE

J L

Hücre Birleştirme



71



72

Web Tasarımının

Temelleri



1

11 - JAVASCRIPT



GİRİŞ



2

JavaScript web sayfaları için yeni bir script dilidir.

Özelliği, HTML sayfalarının içine yerleştirilebilmesidir.

GİRİŞ



3

Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili

istemci taraflı (client-side) script dilidir.

Web sayfalarında dinamik içerik sağlamak ya da kullanıcıylailetişim kurmak için kullanılır.

GİRİŞ



4

İlk başta yalnızca Netscape tarayıcıları için tasarlanan JavaScript,

daha sonra diğer tarayıcılar tarafından da desteklenen genel bir scripting dili haline gelmiştir.

GİRİŞİPUCU:



5

İPUCU:

HTML kodları arasına yerleştirilen küçük kodlardır.

Tek başına .js uzantılı JavaScript kodları da yazılabilir.

GİRİŞJavaScript, Java dilinin bir Light versiyonu değildir.



6

JavaScript, Java dilinin bir Light versiyonu değildir.

JavaScript kendi başına bir script dilidir.

Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek,formları kontrol etmek, hesaplamalar yapmak gibi işler içinkullanılır.

JAVASCRIPT Java ile JavaScript oldukça fazla karıştırılmaktadır.

Java, Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek

yazılmış bir programlama dilidir.

Sonuçta işletim sistemlerinden bağımsız bir program elde edersiniz.



7

Yani exe veya com uzantılı dosya oluşturur.

Fakat JavaScript bu tür bir programlama dili değildir.

Yorumlanması için bir tarayıcıya ihtiyaç duyar.

JAVASCRIPT Bu yüzden script dilidir.

Html dosyasını içine gömülüdür.

Sonuçta elinizde exe veya com uzantılı bir dosya yoktur.



8

Javascript, Netscape firması tarafından C dilinden esinlenilerekyazılmıştır.

Yazılma amacı Html'in sahip olmadığı bazı özelliklerin websayfalarında kullanılmak istenmesidir.

Ziyaretçi ile etkileşim gibi önemli unsurlarda Html'in eksiklerinitamamlayıcı unsurlara ihtiyaç duyulması sonucunda Netscape firmasıbu konuya ağırlık vererek JavaScript script dilini internet ortamınakazandırmıştır.

JAVASCRIPT Netscape ve Internet Explorer tarayıcılarının JavaScript

kodundaki anlayışları farklıdır.

Nedeni ise, Netscape JavaScript dilini hazırladığındaMicrosoft‘un bu dilin özelliklerini veya yazılım tarzını tamanlamıyla Internet Explorer'a eklemeyip kendi yazım kurallarınıbelirlemesidir



9

belirlemesidir.

Bu yüzden JavaScript kodu yazarken bu iki tarayıcı özelliklerinide göz önünde bulundurmalıyız.

NEREDE KULLANILIR?

JavaScript kullanımının iki ana alanı vardır:

istemci taraflı script yazmak.

sunucu taraflı script yazmak.



10

Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript

kullanılarak yazılmaktadır.

Bunlar da genellikle kullanıcı bilgilerinin doğru girilip girilmediği ya dakullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamaktır.

Sunucu taraflı JavaScript, aynı ASP gibi çalışmaktadır.

Sunucu Taraflı JavaScript Sunucu taraflı JavaScript (SSJS);

Temel JavaScript'e ek olarak nesneler ve işlevler katılarakveritabanlarına erişim, e-mail gönderme ve diğer işlemlerin yapılmasısağlanır.



11

SSJS, veritabanı temelli Web uygulamalarının yaratılmasını sağlar.

JAVASCRIPT Javascript kodlarını yazmak için Windows kullanıcıları için Not

Defteri yeterlidir.

JavaScript kodları <script> etiketi ile başlar, < /script> etiketi ilebiter.

i t tik ti J S i t'i l ki ü ü t l



12

<script> etiketi, JavaScript'i anlamayan eski sürüm tarayıcılarınbu kısmı geçmeleri içindir.

JAVASCRIPT Genellikle yazım tarzı aşağıdaki şekildedir:

<script>





13

</script>

<SCRIPT> ETİKETİ

Bir tarayıcının anlayacağı temel dil HTML'dir.

JavaScript dilinin HTML belgesi içinde yazılabilmesi için<SCRIPT> etiketleri kullanılır.



14

<HTML><SCRIPT>...JavaScript kodu....</SCRIPT>

</HTML>



15



16

JAVASCRIPT AÇIKLAMA SATIRLARI

İyi bir programcı kod satırlarında açıklama yapar.

Bu satır şu işlemi gerçekleştiriyor gibi açıklayıcı bilgiler yazar kodlarının yanına.

JavaScript'te bu tür açıklamalar // ile başlar ve // ile biter.



17

Eğer açıklamanız bir satırdan fazla ise /* ile başlar */ ile biter.

JAVASCRIPT AÇIKLAMA SATIRLARI// bu satır kullanılacak değişkenlerin tanımlanması/* açıklama satırı 1açıklama satırı 2

açıklama satırı 3 */



18

JAVASCRIPT JavaScript kodları Html kodların arasında yer alır.

Veya uzantısı js olan dosyalarda saklanarak yine Html

içerisinden çağırılır.

Java Appletleri gibi Html'den ayrı bir unsur değildir.



19

Javascript Html'in bir parçasıdır.

Kullanılacak yere göre Html'in içerisinde kullanılır.

Fakat genelde <head> </head> etiketleri arasında kullanılır.

JAVASCRIPT Javascript kodları bittiğinde elinizde asla kendi başına çalışan uzantısı

exe veya com olan bir dosya olmaz.

Her zaman için tarayıcı tarafından yorumlanması gerekir.

Yorumlanması demek Javascript kodunun çalışması anlamındadır.

Nesne ve buna uygulanan olaylar ile ilgili bir takım görevleri vardır



20

Nesne ve buna uygulanan olaylar ile ilgili bir takım görevleri vardır.Javascript kullandığı her unsuru nesne olarak algılar.

Siz bu nesneleri tıklamak, üzerine gelmek, üzerinde çıkmak gibiolaylar ile çalıştırırsınız ki bu da Javascript'in ziyaretçi ile etkileşmesidemektir.

HTML BELGESİ İÇİNDEJAVASCRIPT YAZMAK

Bir Web sayfası organizasyonunda JavaScript'leri Web sayfasınaeklemek için değişik yollar vardır:

HEAD bölümünde

BODY bölümünde



21

BODY bölümünde

BODY içinde URL olarak.

<HEAD> İÇİNDE

Bir HTML belgesinde HEAD bölümü içinde <SCRIPT> etiketikullanarak istediğiniz JavaScript kodunu HTML belgesineekleyebilirsiniz.

Bu kodlar HTML sayfasının BODY kısmı yüklendikten sonrak ll h h l li



22

kullanıma hazır hale gelir.

<HEAD> İÇİNDE<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">

</SCRIPT></HEAD><BODY>******************** buraya yazılacak *********************

</BODY></HTML>

<BODY> İÇİNDE

HTML belgesinin BODY kısmında JavaScript kullanmak için ikiyol vardır:

Doğrudan çalışacak kodlar ve kullanıcı tarafından çalışacakkodlar:



24

Doğrudan çalışacak JavaScript kodları <SCRIPT> etiketikullanılarak HTML belgesinin istenilen yerine yazılır.

Bu cümleler tarayıcı tarafından okunduğu anda yerine getirilir:



25

<BODY> İÇİNDE Daha çok kullanılan diğer bir yöntem ise;

kullanıcı tarafından bir olayın başlatılmasıyla bir JavaScriptkodunun çalıştırılmasıdır.

Örneğin bir düğmeye tıklamak gibi:



26

Örneğin bir düğmeye tıklamak gibi:

<BODY> İÇİNDE<FORM><INPUT TYPE="BUTTON" NAME="TestButton"

VALUE="Tıkla" onClick="AlertTest()"></FORM>



27



28

<BODY> İÇİNDE URL OLARAK

JavaScript kodu URL olarak da kullanmak mümkündür:

<A HREF="javascript: alert('Son!')">Siteden Çık</A>



29



30

JAVASCRIPT İşletme Sırası:

HTML belgesinde JavaScript eklendiğinde, kodun işletimi sırasıylayapılır.

Ancak fonksiyon ve belli bir olaya (ONCLICK gibi) bağlı olanJavaScript kodlarının işletimi o anda yapılır.



31

Değişkenler:

Bir değeri içeren bellek adlarını ifade ederler.

Operatörler:

Değerler ya da değişkenler arasında toplama, çıkarma gibi işlemlerin

yapılmasını sağlarlar.

Operatörler +, *, /, - gibi işaretlerle kullanılır.

JAVASCRIPT İfadeler (Expression):

Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek

oluşturdukları yapılara ifade denir.

Örneğin: "Ucret = Gün * Yevmiye" formülü bir ifadedir.



32

Deyimler (Statements):

Deyimler belli bir komut ya da söz dizimi bileşenlerinin grubunaverilen addır.

Örneğin bir komut ya da bir IF yapısı deyimi oluşturur:

if (toplam>20) {deyimler;} else {deyimler;}

JAVASCRIPT Nesneler (Objects):

Kendi değerleri, özellikleri ve işlemleri olan bileşenlere nesne

(object) denir.

JavaScript dilinde çok sayıda yerleşik nesne vardır.



33

Fonksiyonlar (Functions):

Bir JavaScript fonksiyonu diğer dillerdeki bir fonksiyon yordamya da bir alt yordam anlamına gelir.

Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür.

Ayrıca fonksiyonlar, parametre olarak kabul edilen birçok değer kabul ederler.

JAVASCRIPT

function adi( )

{deyim 1

d i 2



34

deyim 2

...deyim N

}

JAVASCRIPT Case Sensitivity:

JavaScript case sensitive (büyük küçük harf duyarlı) bir dildir.

Değişkenler ve diğer öğeler küçük ya da büyük yazılabilirler.

Ancak A değişkeni ile a değişkeni birbirinden farklıdır.



35

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>



36

JAVASCRIPT JavaScript kodu diğer programlama dillerinde olduğu gibi

deyimlerden (statements) oluşur.

Bu deyimler atama, değerleri karşılaştırma ve işlemlerinyapılması için komutlar anlamına gelmektedir.



37

DEĞİŞKENLER Değişkenler verileri saklarlar ve onlara erişimi sağlarlar.

Bir değişken bir değeri işaret eder.

Örneğin Ucret adlı değişkene bir kişinin ücret bilgisi konur.

Değişkenler adlarıyla işaret edilirler.



38

Bir JavaScript değişkeni belli kurallara uymak zorundadır:

DEĞİŞKENLER Değişkenler Javascript'te ve diğer programlama dillerinde

olduğu gibi bilgi depolamak bu bilgiyi kullanmak amacıylakullanılırlar.

Değişkenler "var" komutu ile oluşturulurlar.

Karakter olarak kullanıldıklarında işlem yapılamazlar.



39

Nümerik olarak kullanıldıklarında ancak işlem yapabilirler.

Kullanımına bir örnek verelim.

var sayi;

var sayi1=10;

var yazi1="10";

DEĞİŞKENLER Burada birinci satırdaki "sayi" değişkeni script kodunun

herhangi bir yerinde kullanılmak üzere oluşturulmuştur.

İkinci satırda "sayi1" adındaki değişkenin değeri hemen o

satırda = ifadesinden sonra verilmiştir.

Böyle değişken tanımı da yapılabilir.



40

Üçüncü satırda ise değişkenin karakter ifadesi olarak

kullanımını görüyoruz.

Burada önemli olan karakter değişkenlerin alıntı " "ifadesinin arasında kullanılmasıdır.

Her değişkenden sonra ; işareti konulmalıdır.

Tarayıcı, bir başka komut satırına geçtiğini bu yol ile anlar.

DEĞİŞKENLER Şimdi değişkenlerle ilgili matematik işlemlerinin nasıl olacağını

görelim.

Bunu daha iyi açıklayabilmek için örnekler üzerinde çalışalım.

var sayi1=10;

var sayi2=20;



41

var sayi3=sayi1+sayi2;

Birinci ve ikinci satırlarda değişkenler oluşturduk.

Üçüncü satırdaki ise sayi3 değişkeni ile diğer iki değişkenitopladık.

Burada önemli olan işlem yapmak istediğimizde değişkendeğerinin alıntı " " işaretlerinin arasına konmamasıdır.

DEĞİŞKENLER Şimdi de değişkenleri karakter olarak tanımladığımızda neler olduğun

abakalım.

var sayi1="10";

var sayi2="20";

var sayi3=sayi1+sayi2;



42

Bir önceki örnekten farklı olarak değişken değerlerinin alıntı işaretleri

içerisinde yazdık.

Eğer sayi3 adlı değişkeni tarayıcıda bastırırsak göreceğimiz ifade 1020ifadesidir.

Yani tarayıcı karakter olarak tanımladığımız değişkenleri ardada ekledi.

Burada unutulmaması gereken şey bunun sadece + işleminde geçerliolmasıdır. Diğer işlem türlerinde bu tür bir sonuç alınamaz.

DEĞİŞKENLER Değişkenlere ad verirken uymamız gereken kurallar;

Değişken isimleri harf veya _ karakteri ile başlayabilir.

Rakam kullanmak istersek 2. karakterden sonra kullanabiliriz.

Yani değişkenin ilk karakteri rakam olamaz.

Değişken isimlerine örnekler;



43

Değişken isimlerine örnekler;

var url="webteknikleri"; doğru

var _rakam=12; doğru

var a1=123; doğru

var 3uzler="üçüzler" yanlış

DEĞİŞKENLER Değişken tanımlarken bir veya birden fazla boşluk bırakmak

tanımlama açısından herhangi bir sorun teşkil etmez.

Değişken adı verirken kullandığımız harflerin büyük veya küçükolması bazı tarayıcılarda fark etmezken çoğu tarayıcıda farklı bir değişken anlamındadır.



44

Yani;

var say=1;

var Say=1;

Birçok tarayıcıda farklı değişkenler olarak algılanır.

Değişkenlerin İşlem Operatörleri İleKullanımı Değişkenlere işlem yaptırabilecek operatörleri ve özelliklerini

inceleyelim.

Operatörleri birkaç kısıma ayırarak inceleyelim;

Aritmetik operatörler



45

Karşılaştırma operatörleri

Mantıksal operatörler

Özel operatörler

Aritmetiksel Operatörler Her zaman kullandığımız bu operatörler + , - , * , / , % 'dir.

Değişkenlerin çeşitli aritmetik operatörlerle kullanımına bir örnek verelim.

var i=10; var j=11; var k=12; var m,n; m=i*j+k; n=i*(j+k);



46

n=i (j+k);

İlk üç satırda değişkenlerimizi hem tanımlayıp hem de değer atadık.

Dördüncü satırda ise m ve n değişkenlerini tanımlayıp değer atamadık.

Diğer satırlarda ise m ve n değişkenlerinden istenen işlemleri tanımladık.

Buna göre son iki satırın sonuçları farklıdır.

Çünkü parantezlerin işlem önceliği vardır.

Aritmetiksel Operatörler Beşinci satırın cevabı (10*11)+12 = 122 şeklinde olacaktır.

Son satırda ise sonuç 10*(11+12) = 230 olacaktır.

Diğer bir işlem operatörü olan % 'nin yaptığı işlemi şu şekildeanlatabiliriz.

% operatörü % işaretinin solundaki değişkeni sağındaki değişkeneböler e kalan erir



47

böler ve kalanı verir.

Örnek olarak;

var a=100; var b=9; var c=100%9;

Burada c değişkenin değeri 100/9'un kalanı 1'dir.

Yani c değişkeninin değeri 1 olacaktır.

Aritmetiksel Operatörler Diğer -(eksi) ve / (bölme) operatörlerinin işlemleri kendilerine

atanan çıkartma ve bölme işlemidir.

Bu operatörlerin kısa kullanımı içinde Javascript bize kolaylık

sağlar.

Bu operatörleri sıralamak istersek;

* / %



48

+= -= *= /= %= ++ --

x+=y x=x+y x-=y x=x-y x*=y x=x*y x/=y x=x/y

x%=y x=x%y x++ x=x+1 x-- x=x-1

Aritmetiksel Operatörler Bu operatörlerin nasıl işlem yaptığını bir örnekte görelim.

var x,y,z; x=10; y=20; z=30;

x++; x+=y; z--; y*= z;

Şimdi her zamanki gibi işlem satırlarının cevaplarını birlikte bulalım.

x++ satırı x=x+1 işleminin yapılmasını söyler.



49

Buna göre x değişkeni 11 değerini alır.

İkinci satıra geldiğimizde x+=y satırı x=x+y işleminin yapılmasını söyler.

Bir önceki satırdaki x'in değeri 11 idi.Böylelikle yeni x'in değeri 11+20=31olacaktır.

Diğer satırda z-- işlemi sonucunda z'nin değeri 29 olacaktır. Son satırda ise y=y*z işlemi ile y değişkeni 20*29= 580 değerini alacaktır.



50

Karşılaştırma Operatörleri Değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılanoperatörlerdir.

Bu operatörler ise;

== operatörü iki değişkenin birbirine eşitliğini kontrol eder.

!= operatörü iki değişkenin birbirine eşit olmadığı durumlarda kullanılır.



51

< operatörü bilindiği üzere küçüktür operatörüdür. Soldaki değişkenin

sağdakinde küçüklüğünü kontrol eder.

<= soldaki değişkenin sağdaki değişkene küçük eşitliğini kontrol eder.

> soldaki değişkenin sağdaki değişkene göre büyük olup olmadığınıkontrol eder.

>= soldaki değişkenin sağdaki değişkene büyük eşitliğini kontrol eder.

Mantıksal Operatörler İki değişkene bağlı karşılaştırılmaların yapılmak istendiği

durumlarda kullanılır.

Operatörler && , || , ! operatörleridir.

&& And (ve) operatörü iki değişkenin de değeri doğru olmasıistendiğinde kullanılır.



52

|| Or (veya) operatörü iki değişkenden en az birinin doğru olmasıdurumu istediğinde kullanılır.

! Not (değil) operatörü değişkenin değeri doğru ise yanlış , yanlışise doğru olması istendiği durumlarda kullanılır.

Özel Karşılaştırma Operatörleri Bu operatör iki değişken arasında karşılaştırma yapmanın en sade ve kısa

yoludur.

Operatörün kullanım biçimi :

değişken_1 [karşılaştırma operatörü] değişken_2 ? değişken_3 : değişken_4

Bunu bir örnekle açıklayalım.

Değişkenleri var ile tanımladığımızı farz ediyorum.



53

Buna göre ;

a < b ? c : d

Yukarıdaki satırda yapılması istenen işlem;

a değişkeninin b değişkeninden küçük olup olmadığı karşılaştırılıyor. Buna göre cevap doğruysa işlemin sonucu c değişkeninin değeri değilse d

değişkeni oluyor.

Ekrana Çıktı Ve Klavyeden Bilgi Giriş

Html üzerinden klavye aracılığı ile ziyaretçiden bilgi almayıve herhangi bir değişken vb. türde yazıların html’e nasılyazdırılacağını göreceğiz.

PROMPT ()



54

PROMPT PROMPT ()

Hemen başlayalım.

Ziyaretçiden bilgi alma iki tür JavaScript komutuyla gerçekleşir.

Birisi Prompt yani bizim burada bahsedeceğimiz komut.

Diğeri ise Form yoluyla bilgi alınması



55

Diğeri ise Form yoluyla bilgi alınması.

Form yoluyla alınan bilgiler formun Html üzerinde yer almasıyüzünden Prompt komutu ile birbirinden ayrılır.

Prompt komutu ile Html sayfasından hariç bir pencere açılır.

Alınmak istenen bilgi ziyaretçiye bu yol ile sorulur ve hemenaltındaki boşluk yardımıyla cevap alınır.

prompt ("Sorulan soru" , "Cevap örneği");

Bu komutun yorumlanışı şu şekildedir.

Html üzerinde Html'den bağımsız bir pencere aç (bu prompt komutuile yapılır).

İlk çift tırnak içerisinde olan kelime veya kelime grubu, pencerenin üstkısmında ve değiştirilemeyen kısımdır.

PROMPT



56

Burada soru veya pencerenin niçin açıldığı ile ilgili bir açıklama verilir.

İkinci çift tırnakta ise doldurulacak olan cevap satırının içinde seçili bir haldedir.

Bu ise genel olarak cevap örneği olarak ziyaretçiye sunulur.

Kullanılması zorunlu değildir.

prompt ("Tarayıcınızın türünü giriniz ?" ,"lütfen cevabı ie veya nn olarakveriniz");

Şimdi kullanıcıdan nasıl bilgi alınacağını gördük fakat bu bilgiyi nasılkullanabiliriz ?

Bu sorunun cevabı prompt komutunu var ile bir değişkene atmak suretiylekullanabiliriz olacaktır.

Yani ;

PROMPT



57

var tara=prompt ("Tarayıcınızın türünü giriniz ?" ,"lütfen cevabı ie veya nnolarak veriniz");

Biz bu satır ile ne yapmış olduk?

Ziyaretçiden prompt komutu ile tarayıcısı sorduk ve bunu var değişken

tanımlama komutuyla tara değişkenine atadık.

Ziyaretçiden aldığımız bu bilgi sonucunda tara değişkeni ya ie yada nndeğerini alacaktır.

Html dosyasına yazı yazdırma komutu ise write dır.

Bu kodun yazım kurallarını inceleyecek olursak ;

document.write ("görüntülenmek istenenler" , değişken_ismi );

Kodu inceleyelim:

WRITE()



58

document.write ("görüntülenmek istenenler" , değişken_ismi );

Kodu inceleyelim:

Javascript html üzerinde yazı yazmak istediğinde write komutunutek başına kullanamaz.

Bunun için document fonksiyoneli (yardımcısı manasında) ilebirlikte kullanılır.

WRITE()



59

document.write komutundan sonra parantez açılır.

Daha sonra yazılmak istenen sıraya göre değişken ismi veyagörüntülenmek istenenler yazılır.

Değişkenler çift tırnak içerisinde yazılmazlar.

Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır.

Şimdi prompt komutu ile write komutunu birleştirerek bir kodhazırlayalım.

Bu kodumuzda prompt aracılığıyla ziyaretçiye adını sorup addeğişkenine atıyoruz.

Daha sonra bu değişkeni write komutu yardımıyla ziyaretçiyeMerhaba diyoruz.

WRITE()



60

Şimdi kodlara geçelim.

PROMPT & WRITE

<html><head><title>write örneği</title></head><body><script language="JavaScript"><!—//Kodları eski tarayıcılardan gizliyoruz



61

// Kodları eski tarayıcılardan gizliyoruz

var isim = prompt ("İsminizi Giriniz " , "Küçük harf veya büyük harf kullanabilirsiniz" );document.write ("Merhaba " , isim , " !" );// Saklamayı bitir -->

</script></body></html>

PROMPT & WRITE



62

Biz aslında Html'de font kurallarını kullanarak yazı da yazdırabiliriz.

Hiçbir kural uygulamadığınızda tarayıcının standart (default)

değerleri kullanılır.

Örneğin, Merhaba dedikten sonra alınan ismin bir alt satırdagörüntülenmesini istiyorsak bunu Javascript'e şu şekilde

t bili i

WRITE()



63

yaptırabiliriz

(<br> türünde Html etiketlerinin tümünü Javascript'eyaptırabilirsiniz).

document.write ("Merhaba" , "<br>" , isim)

<html> <head> <title>Print</title> </head> <body>

<p>Yazdırmak için aşağıdaki yazdırma simgesini tıklayınız.</p>

PRINT()



64

<A HREF=" javascript:window.print()">

<img src="print.gif" alt="" border="0">

</A>

</body> </html>

PRINT()



65

Bilgisayarı bilgisayar yapan konular bunlardır.

Çünkü hiçbir bilgisayar kendi kriterleriyle yorum yapamaz.

Bizim koşullar ve döngüler ile verdiğimiz, önceden belirlenmişkıstasları göz önünde bulundurarak gerekli seçimleri yapar.

Koşul Yapıları

KOŞUL VE DÖNGÜLER



66

ş p

Javascript'in en önemli özelliklerinden biri koşul yapılarıdır.

Aslında bu konu sadece Javascript'in değil bilgisayarın da enönemli konusudur.

Şimdi konunun inceliklerine bir göz atalım.

Javascript'te çoğu dilde olduğu gibi koşul yapısının kodu If (eğer)komutudur.

Yazılım şekli ise şu şekildedir.

If (a==b)

IF (EĞER)



67

//koşul doğru ise ilk satır işleme konulur

// koşul doğru değilse ilk satırın altındaki komut satırı işlemekonulur.

Şimdi kodumuzu biraz inceleyelim :

Koşul komutu yani if ile işleme başlıyoruz.

Daha sonra karşılaştırılacak değişkenler veya başka nesneler paranteziçerisinde sorgulanıyor.

Dikkat ederseniz çift eşittir kullandık. Çünkü tek eşittir işareti değer atamaişlemidir.

Çift değişken ile koşul yapısı sağlanır.

IF (EĞER)



68

Eğer koşul doğruysa hemen altındaki satır işleme konulur.

Eğer koşul yanlış ise ikinci satır işleme konulur.

Yok ben koşul doğru ise 2 ve daha çok işlem yaptırmak istiyorsanız bununcevabı yapılması istenen işlemlerin { } arasında yer almasıdır.

Yani :

If (a==b)

{

// 1.işlem //2. İşlem

...

IF (EĞER)



69

... }

Bu bölümde ise If koşul ifademize Else komutunu ekleyerekkoşul yapısı örneklerle açıklanacaktır.

If ( a==b ) {

// şunları şunları yap

}

l

IF .. ELSE (EĞER ... DEĞİLSE)



70

else

{

//değilse şunları yap

}

Yani örnekten de anlaşıldığı gibi if koşulu ile aile b nin eşitliği karşılaştırılıyor.

Eğer doğruysa hemen altındaki kısım işlemekonuluyor.

IF (EĞER)



71

Else ile yok değilse altındaki kısmı işleme koydiyoruz.

If (a==b) { //şunları yap }

if (a==c) { //şunları yap } else




72

else

{ //şunları yap }

Şimdi bu kod Javascript'e:

a değişkeni b değişkenine eşitse normal olarak alt satırı işleme

koymasını, eğer bu karşılaştırma yanlış ise altındaki işlemlerigeçerek a'nın c'ye eşitliğini kontrol etmesini ve bu da değilse (else)alt satırdaki işlemleri devreye koymasını bildirir.

Else yapısı genel olarak bir karşılaştırma sonucunda cevap yanlış

IF (EĞER)



73

Else yapısı genel olarak bir karşılaştırma sonucunda cevap yanlış

ise diğer bütün durumlarda şu işi yap manasında kullanılır.

<html> <head> <title>Koşul yapıları </title> </head> <body> <script language="JavaScript">  </script> </body>




75

y

</html>

Javascript'te diğer programlama dillerinde olduğu gibi istediğinizişlemi 2 veya daha fazla kez yaptırmak için belli program kodlarımevcuttur.

Bu diğer dillere çok benzer olan for döngü komutudur. Bu komutun yaptığı işlem, istenilen fonksiyon veya fonksiyon

parçalarını istenilen değerde tekrar etmektir.

Döngü Yapısı



76

for ( değişken_başlangıç_değerler1 ,değişken_başlangıç_değeri2 ; döngü

sayısı ; değişecek_değişken_adı_ve_türü )

{ yapılması istenen işlemler }

FOR DÖNGÜSÜ



77

Burada parantezler içerisinde verilen değişken_başlangıç_değerler kısmı ve değişecek_değişken_adı_ve_türü kısmını yazmanızgerekmez.

Döngü içerisinde kullanılan değişken daha sonrada istenilen şekildearttırılabilir veya azaltılabilir.

Yapı gözünüzü korkutmasın hemen bir örnekle daha iyi anlayalım.

FOR DÖNGÜSÜ



78

for (a=0 , b=0 ; c<=3 ; c++)


for ifadesi için kısa yazılım : var a,b=0;

for (;c<=3;c++)

FOR DÖNGÜSÜ



79


Şimdi bunu tam bir örnekle daha da pekiştirelim.

Varsalım ki elimizde bir çarpım tablosu yapmak istiyoruz.

Buna göre 5 sayısı için 1'den 10'a kadar sayıları bir tablo içerisindevereceğiz.

Şimdi bu durumda for döngüsüz 10 adet tablo yazmamızgerekecekti fakat biz for döngüsü ile işlemi 1 satıra indirgeyeceğiz.

FOR DÖNGÜSÜ



80

<html> <head> <title>for döngüsü</title> </head> <body> <script language="JavaScript">  </script> </body> </html>

Burada gördüğünüz gibi işlem tek bir satıraindirgendi.

Şimdi de for döngüsünün yapmak istediğimizişlemlerde yetersiz kaldığı durumlardakullanabileceğimiz yapıları görelim.

FOR DÖNGÜSÜ



82

Javascript kodu yazarken -programda bir önceki örnekteolduğu gibi- sayaç değişkeninin her değeri için istediğinizişlemi yapmasını istemeyebilirsiniz.

Bunun için while komutunu kullanırsınız ki bu Javascript'e"İstediğim işi şu şart sağlanıyorsa yap !" demiş olursunuz.

While döngüsünde for döngüsünden farklı olarak döngüiçerisindeki değişkenlerin tanımlanması gerekir.

ŞARTLI DÖNGÜ YAPISI WHİLE



83

ç ğ ş g

Şimdi yazım kurallarına bir göz atalım.

Javascript kodu yazarken -programda bir önceki örnekte olduğugibi- sayaç değişkeninin her değeri için istediğiniz işlemi yapmasınıistemeyebilirsiniz.

Bunun için while komutunu kullanırsınız ki bu Javascript'e"İstediğim işi şu şart sağlanıyorsa yap !" demiş olursunuz.

While döngüsünde for döngüsünden farklı olarak döngü içerisindekideğişkenlerin tanımlanması gerekir.

WHİLE DÖNGÜSÜ



84

Şimdi yazım kurallarına bir göz atalım.

while ( döngü şartı )

{ şart doğruysa yapılacak işlemler}

şart doğru değilse yapılacak işlemler

WHİLE DÖNGÜSÜ



85


12 - XML



1



GİRİŞGünümüzde iletişim yaşamın vazgeçilmez bir parçasıdır.

Herkesin ortak bir dili kullanması için çeşitli denemeler yapılmıştır.



2

Bu çabalar bir sonuca ulaşmamıştır ama zamanla İngilizceyaygınlaşarak insanların ortak anlaşma dili durumuna ulaşmıştır.

GİRİŞBilişim dünyasında da programlar arasındaki iletişimingerçekleşmesi, farklı sistemler arasında veri alışverişininsorunsuz olması için ortak yapılar, standartlar oluşturma çabaları



3

ç y p , ş ç

devam etmektedir.

Bu çabalardan birisi XML dilidir.

GİRİŞBu modülde verilerin platformdan bağımsız olarak dolaşımınısağlamak amacıyla üretilmiş XML dilini öğreneceksiniz.



4

XML Dili XML, farklı bilgisayar sistemleri arasında veri iletmek için tasarlanmış yazılım ve

donanımdan bağımsız bir dildir.

XML (Extensible Markup Language) kavramının Türkçesi Genişletilebilir İşaretleme Dili’dir.

Bu dil bilgisayar dünyasında bazı ihtiyaçların giderilmesi amacıyla geliştirilmiştir.

Veri aktarmak HTML sayfalarıyla yapılabiliyordu. Örneğin borsa verilerini dağıtan



5

Veri aktarmak HTML sayfalarıyla yapılabiliyordu. Örneğin borsa verilerini dağıtan

bir sayfadan bilgi almak mümkündü.

İnternette her türlü veriye ulaşılabiliyordu fakat verileri tanımlamak, analiz etmek,yeniden biçimlemek mümkün değildi.

İşte bu ihtiyaçları gidermek için istenildiği kadar genişletilebilen ve tekrar

biçimlendirilebilen bir yapıya sahip XML geliştirildi.

XML Dili XML uyumsuz (incompatible) sistemler arasında veri alışverişi için

kullanılabilir.

Bilgisayar programları uyumsuz formatlarda veri tutarlar.

XML’nin kullanım alanları Internet uygulamaları ile sınırlı olmayıp geliştirilmeamacı, birbiriyle bilgi alışverişi yapması istenen uygulamalar için ortak bir dilsunmaktır.



6

Verinin XML’ye dönüştürülmesi, veriyi farklı türdeki uygulamalar (farklıişletim sistemleri üzerinde çalışan, farklı firmalar tarafından yazılmış, farklıdillerle yazılmış vs. uygulamalar) tarafından okunabilen veri haline getirerekveri alışverişinde yaşanan sıkıntıyı büyük ölçüde azaltır.

XML belgeleri hangi uygulama tarafından kullanılacaksa biçimlendirilerek o

uygulamaya uyumlu hale getirilir.

XML Dili XML, verileri metin tabanlı tanımlar.

XML belgeleri, verilerin etiketlenerek bir düzen içinde tutulduğu metindosyalarıdır.

XML ile düz metin dosyaları veri paylaşmak için kullanılabilir.

XML verileri düz metin formatında saklandığından XML yazılım ve



7

donanımdan bağımsız şekilde veri paylaşımını mümkün kılar.

Bu durum farklı uygulamaların çalışabileceği verilerin oluşturulmasınıkolaylaştırır.

XML Dili XML belgeleri, verileri tutmak amacıyla kullanıldığından

verilerin birbirleriyle olan ilişkileri de belirtilmelidir.

Etiketleme işlemi verilerin birbiriyle ilişkilerini belirlemekiçin kullanılır.



8

Örneğin, elimizde aşağıdaki veriler olsun.

XML DiliBurak

Eren

PolisYunus

Hızır



9

Savcı

Bu verilere bir kimlik kazandırmak ve aralarındaki ilişkiyi

belirlemek için etiketler kullanalım.

Meslekler<?xml version="1.0" encoding="windows-1254"?>



<meslekler>

<eleman><ad>Burak</ad>

<soyad>Eren</soyad>

<meslek>Polis</meslek>

</eleman>



10

<eleman><ad>Yunus</ad><soyad>Hızır</soyad>

<meslek>Savcı</meslek>

</eleman></meslekler>

XML Dili Bu örnekte “Burak, Eren, Polis, Yunus, Hızır, Savcı” bilgileri

arasındaki ilişki belli değildir.

“Eren” kelimesi ayrı bir ismi mi yoksa “Burak” isimli elemanınsoyadını mı ifade etmektedir?

“Polis” rastgele konmuş bir kelime midir yoksa Burak”ın mesleğimidir?



11

İşte bilgiler arasındaki doğru ilişkilendirmeyi kurmak içinetiketlendirmeler kullanılmıştır.

Dikkat edilirse HTML’ye benzer bir etiketlendirme mantığı

kullanılmıştır.

XML Dili HTML’den farklı olarak XML’de veri ile verinin sunumu (verinin

istenilen biçimde gösterilmesi) birbirinden ayrıdır.

Bu durum XML’nin yararlarından biridir.

Böylelikle farklı stil sayfaları kullanarak XML belgesinden birçokbiçimlendirilmiş sayfa üretebilir.



12

XML Dili XML, HTML’nin türetildiği SGML (Standart Generalized Markup

Language) dilinden türetilmiştir.

HTML’de bütün tanımlamalar, adlar bellidir ve bunların dışınaçıkılmaması gerekir.

XML’de asıl önemli olan veridir.



13

XML belgelerinde biçimlenmemiş veriler bulunur ve etiket adlarınıbelirlerken, belli temel kurallara bağlı kalmak koşuluyla herhangi bir tanımlayıcı isim kullanılabilir.

XML, HTML gibi ücretsiz bir dildir.

XML Dili Örnekte <personel>, <eleman>, <ad> gibi elemanlar kullanılmıştır.

Bir başkası bu bilgileri tutmak için farklı eleman isimleri kullanabilirdi.

Örneğin, <çalışanlar>, <çalışan>, <çalışan_ismi>.

XML’nin yaygınlaşmasını sağlayan bu esnekliğin dezavantajı da



14

XML nin yaygınlaşmasını sağlayan bu esnekliğin dezavantajı davardır.

XML Dili Farklı uygulamalar arasında veri alışverişinde farklı elemanların kullanılmış

olması sıkıntılara neden olur.

Veriyi yorumlamak ve anlamlı bilgi çıkartmak için XML okuyucuları veyazıcıları standart bir eleman yapısına ihtiyaç duyarlar.

Bu amaçla çeşitli sektörlerde verilerin tutulması için XML’den alt diller türetilmiştir.

Standartlaşmayı sağlamak açısından bu sektörel alt diller de HTML gibi



15

Standartlaşmayı sağlamak açısından bu sektörel alt diller de HTML gibistandart etiket adlarına sahiptir fakat işleyiş açısından XML’yi temel alır.

World Wide Web Konsorsiyumu (W3C), finans, sağlık, sigorta, yayıncılık,trafik, emlak, seyahat, din ve akla gelebilecek her sektör için XML tabanlıortak alt diller oluşturmaya devam etmektedir.

Kurumlar birbirleri ile bilgi alışverişi yaparken, bu alt dillerden kendileri ileilgili olanını alıp serbestçe kullanabileceklerdir.

XML Dili XML ile E-Devlet uygulamalarında olduğu gibi farklı kurumların

birbirleriyle olan iletişimi de daha kolay olacaktır.

Veriler başka kurumlar tarafından kullanıldığında yenidensorgulanabilir ve biçimlendirilebilir olacaktır.

Örneğin, hastaneye giden bir vatandaşın tedavisi yapılmadanönce nüfus merkezinde tutulan veritabanından alınan veriler istemci program tarafından kolaylıkla anlaşılabilecektir.



16

istemci program tarafından kolaylıkla anlaşılabilecektir.

Internet bankacılığını kullanan birisi bağlı bulunduğu belediyeninveritabanını sorgulayarak vergisini öder duruma gelebilecektir.

Bu tür uygulamaları gerçekleştirmek veri aktarımında ortak bir dilde birleşildiği için eskisine göre daha kolay olacaktır.

XML Dili XML, HTML’nin yerini almak için üretilen bir dil değildir.

Aksine HTML ile XML birlikte kullanılıp daha yetenekli veri sayfaları

oluşturulabilir.

XML’in kullanım alanı internet ile sınırlı değildir.

Birbiriyle bilgi alışverişi yapması gereken uygulamalar için ortak bir dilolarak kullanılabilir.



17

olarak kullanılabilir.

Böylelikle birbirinden bağımsız, tamamen ayrı sistemler XMLaracılığıyla bilgi alış verişinde bulunabilirler.

Paylaşmanız gereken verileri XML biçiminde dağıttığınızda verinizi

alan bütün uygulamalar bilgiyi anlamlandırabilecektir.

XML Dili XML belgesi içinde yer alan veriler, etiketlerle

tanımlandıklarından hem bilgisayarlar hem de insanlar

tarafından okunabilir.

Tabii ki kimi karmaşık (kompleks) belgelerin anlaşılmasızordur, uygulamalar tarafından okunabilir.



18

İnternet üzerinde XML iki türlü kullanılabilir: İstemcitarafında ya da sunucu tarafında XML belgeleriniişlemek

XML Dili Sunucu tarafında işlenen XML verileri HTML biçiminde iletilirler.

Bu, sunucu bilgisayarlara yük getiren ve genellikle önerilmeyen bir

yöntemdir.

Zaten bu şekilde yeniden tanımlanabilen veri aktarmak mümkünolmaz ve bu işlem veriyi XML olarak yayınlamamak, XML’yi amacınauygun kullanmamak anlamına gelir.



19

Sunucu tarafında XML çalıştırmanın sebebi XML’i desteklemeyeneski web tarayıcılarda yaşanan sorunları önlemektir.

XML Dili Sunucu, kendisine gelen istek vasıtasıyla istemcideki tarayıcının ne

olduğunu anlayıp, XML biçimlemelerini kabul edip etmeyeceğinekarar verir.

İstemcinin tarayıcısı XML uyumlu ise istenilen sayfayı gönderir.

Tarayıcı XML uyumlu değilse XML belgesini biçimleyip tarayıcınınanlayabileceği, biçimlendirilmiş hazır kodlar gönderir.



20

XML Dili XML uyumlu web tarayıcılar sunucudan gelen verileri alıp

biçimlendirebilirler.

İstemci bilgisayara XML belgesi ile birlikte biçim bilgilerinin bulunduğubir başka dosya da gönderilebilir.

Varsa bu biçim dosyasını (stil sayfası, stil şablonu) da beraberindeyükleyen web tarayıcı programı biçim dosyasına bakarak XMLbelgesindeki verileri gösterir.



21

XML belgesine, ziyaretçinin kendi seçebileceği bir stil sayfasıuygulanabilir.

XML Dili XML için standart biçimleme dili olarak XSL önerilmektedir.

Her yeni teknoloji gibi XML’nin de geliştiriciler tarafından

benimsemesi için eski kalıplara destek sunması gerekmektedir.

Bu amaçla CSS biçim dosyalarını kullanarak XML verilerinibiçimlemek mümkündür.

XML yeni diller oluşturmak için kullanılabilir.



22

y ş ç

Örneğin, WML (Wireless Markup Language) XML’den türetilmiştir.

XML Dili XML belgesi oluşturabilmek için Not Defteri gibi metin düzenleme

programlarından biri kullanılabilir.

Ayrıca sadece XML veri alanlarını düzenlemek için oluşturulmuşprogramlar da tercih edilebilir.

Örneğin, XML Notepad programı Microsoft’un sitesinden ücretsizolarak indirilebilir.



23

XML Dili XML ile veriler daha fazla kullanıcının kullanımına açıktır.

XML, donanım ve yazılımdan bağımsız olduğundan veriler standart

HTML tarayıcılarının dışındaki yazılımlar tarafından da kullanılabilir.

Diğer istemciler ve uygulamalar XML belgelerine erişebilirler.



24

XML Dili Veri tabanlarında tutulan veriler, web ortamındaki bilgisayarlar arasında veri

paylaşımı için sıklıkla XML verilerine dönüştürülür.

İnternet sitesi kullanıcılarına veri tabanını erişmek için izin vermek güvenlik

açısında bir risktir.

Bu nedenle veri tabanındaki verileri XML verilerine dönüştürerek paylaşmakgüvenlik açısından daha uygundur.



25

XML Dili XML’in en yaygın kullanım alanlarından biri elektronik ticaret

uygulamalarıdır.

XML, tedarikçiler, müşteriler, iş ortakları vb. kurumlar arasında bilgipaylaşımında avantaj sağlar.

XML ayrıca yayıncılık sektöründe de kullanışlıdır.

XML olarak saklanan bilgi, her tür yayıncılık formatına kolaylıkla



26

dönüştürülebilir.

XML’nin dünyadaki her uygulama tarafından tanınması için uygulamageliştiricileri W3C konsorsiyumunun kurallarına bağlı kalmaktadırlar.

XML Dili HTML dosyalarının yapısı ve HTML dosyaları oluşturmak için

kullanılan etiketler (örneğin <br>, <i>) önceden tanımlanmıştır.

XML belgesinin yapısını ve etiketlerini ise uygulama geliştiricisininkendisi oluşturur.

Personel ile ilgili verilerin bulunduğu yukarıdaki örnekte geliştiriciolarak kendi etiketlerimizi kullandık.



27

XML, HTML’nin yerini alması için tasarlanmamıştır.

XML, HTML’nin tamamlayıcısıdır.

XML, verileri tanımlamak için kullanılırken HTML verileri

biçimlendirmek ve görüntülemek için kullanılır.

XML ile HTML Arasındaki Fark HTML veri görüntülemek için tasarlanmıştır ve verinin nasıl

göründüğüne odaklanır.

HTML dili bir belgenin formatlanması amacıyla daha öncedentanımlanmış bir etiket (tag) kümesine sahiptir.

XML veri tanımlamak için tasarlanmıştır ve verinin ne olduğunaodaklanır.



28

XML verinin nasıl görüneceğiyle ilgili veri içermez.

XML belgelerinden elde edilen verilerin sayfadaki görünümünüayarlamak için CSS, XSLT stil sayfaları kullanılır.

XML ile HTML Arasındaki Fark XML verileri yapılandırmak, depolamak, göndermek için oluşturulmuştur.

Yukarıdaki örnekte görüldüğü gibi XML’de veri kendi içinde bir yapıyasahiptir.

Bu şekilde XML belgesinde tutulacaktır ve ihtiyaç duyulduğundagönderilecektir.

Verileri görüntülemek için HTML kullanıldığında veriler HTML içindetutulur.



29

XML ile veriler ayrı XML belgelerinde tutulabilirler.

Bu yöntemle verilerdeki herhangi bir değişiklikte HTML kodlarındadeğişiklik yapmak gerekmez.

HTML sadece verileri istenilen yerleştiriliş düzeninde görüntülemek içinkullanılır.

XML ile HTML Arasındaki Fark HTML’de bazı etiketler kapatılmadan kullanılmaktadır.

Örneğin, <p> etiketi. XML’de ise tüm etiketler kapatılmalıdır.

XML’de etiketler büyük küçük harf duyarlıdır.

<ad> ile <Ad> farklı etiketlerdir.



30

<ad> Zuhal </ad> DOĞRU

<Ad> Zuhal </ad> YANLIŞ

XML ile HTML Arasındaki Fark

XML’de etiketler düzgün sırayla kapatılmalıdır.

<b><u>Malzeme listesi</b></u> YANLIŞ

<b><u>Malzeme listesi</u></b> DOĞRU

Aralık (space) tuşu, sekme (tab) tuşu ya da yeni satır tuşu ile eldeedilen boşluğu ifade eden beyaz boşluk (white space) XML’dekorunur.



31

HTML birden fazla olan beyaz boşluk karakterini tek beyaz boşluğaindirir.

HTML Merhaba Dünya

Çıktı Merhaba Dünya

XML Merhaba Dünya

Çıktı Merhaba Dünya

XML ile HTML Arasındaki Fark HTML etiketlerindeki kimi hatalara rağmen HTML tarayıcıları belgeleri

gösterir.

XML belgelerindeki hatalarda ise XML uygulamalarının çalışması durur. HTML dosyalarının uzantısı html veya htm’dir.

XML belgelerinin uzantısı xml’dir.



32

XML Söz Dizimi (Syntax) Kuralları XML yazım kurallarını örnek bir XML belgesi üzerinden anlatalı

m.

XML belgesinde verilerin aşağıdaki gibi dizilerek oluşturduğu

görünüme ağaç görünümü (tree view) denir.



33

XML Söz Dizimi (Syntax) Kuralları



34

personel.xml




35

Personel.xml belgesinin ağaç yapısı

Personel.xml belgesinin ağaç yapısındaki her kutuya düğüm denir.




36

personel.xml belgesinin tarayıcıdaki görüntüsü

XML Söz Dizimi (Syntax) Kuralları XML belgesinde etiketler ve etiketler arasında belirtilen veriler

bulunmaktadır.

Etiket ve veriden oluşun birime eleman (öge, element) adı verilir.



37

XML Söz Dizimi (Syntax) Kuralları Eleman isimleri aşağıda kurallara uymalıdır.

İsimler harf, rakam ve diğer karakterleri içerebilir.

İsimler rakam veya noktalama işaretleriyle başlayamaz.

İsimler boşluk içeremez.

Eğer birden fazla kelime kullanılmak isteniyorsa kelimeler arasındaki

b l k i lt i i k ll l bili



38

boşluk yerine alt çizgi kullanılabilir.

“-“ (tire), “.” (nokta), “:” (iki nokta üst üste) karakterlerini kullanmaktankaçınılmalıdır.

Bazı yazılımlar bu karakteri farklı anlamlarda yorumlayabilir.

İsimler “xml” harfleriyle başlayamaz. (XML, xml vs.)

XML Söz Dizimi (Syntax) Kuralları XML belgeleri sıklıkla kendisiyle ilişkili bir veri tabanına sahiptir.

Bu açıdan veri tabanındaki isimlendirme kurallarını XML belgelerindede kullanmak yararlı bir uygulamadır.



39

XML Söz Dizimi (Syntax) Kuralları Belgenin ilk satırındaki bildirim XML sürüm (version) bilgisi ve

kullanılacak dil kodlamasını tanımlar.

Örnek belgede XML 1.0 sürümü ve “utf-8” dil kodlaması kullanılacağı

belirtilmiştir.

Bildirim XML elemanı olmadığından kapanış etiketi kullanılmamıştır.



40

XML Söz Dizimi (Syntax) Kuralları İkinci satır belgenin personel isimli kök (root) elemanını

tanımlamaktadır.

XML belgeleri sadece bir kök elemanına sahip olabilir.

Kök eleman yavru elemanları (child elements) içinde barındırır.

Yavru elemanlara sahip elemana ana (parent) eleman adı verilir.

Tü l l l l hi l bili



41

Tüm elemanlar yavru elemanlara sahip olabilir.

Yavru elemanlar ana elemanlar içinde düzgün bir şekildeyerleştirilmelidir.

<kök eleman>

<yavru eleman1>

<alt yavru eleman1a>.....</alt yavru eleman1a><alt yavru eleman1b>.....</alt yavru eleman1b>

</yavru eleman1>

<yavru eleman2>

<alt yavru eleman2a>.....</alt yavru eleman2a>

lt l 2b / lt l 2b




42

<alt yavru eleman2b>.....</alt yavru eleman2b></yavru eleman2>

</kök eleman>




43

Genişletilmiş halde personel isimli kök eleman ve daraltılmış halde eleman isimli yavru eleman




44Daraltılmış halde personel isimli kök eleman

XML Söz Dizimi (Syntax) Kuralları XML’de açıklama satırı eklenmesi aşağıdaki şekilde

yapılır.



Örnek üzerinden gösterirsek şu şekilde bir açıklamasatırı kullanılabilir.

? l i "1 0" di " tf 8"?



45

<?xml version="1.0" encoding="utf-8"?>  ………………………………..

XML Söz Dizimi (Syntax) Kuralları XML’de bazı karakterler özel anlam taşır.

XML elemanları içinde “<” karakteri kullanıldığında hata oluşur.

Çünkü ayrıştırıcı (parser) bu karakteri yeni bir elemanın başlangıcıolarak yorumlar.

Bu tür özel karakterler yerine aşağıdaki tablodaki değerler kullanılır.

< <



46

< <> >

& &

' '" "

XML Söz Dizimi (Syntax) Kuralları XML’de özellik (attribute) değeri tek veya çift tırnak işareti içine

alınmalıdır.

<not tarih=”06/06/2006”>

XML söz dizimi (syntax) kurallarına uyan XML belgelerine iyi biçimli(well formed) XML belgesi denir.

NOT: XML belgelerinin iyi biçimli olup olmadığını test etmek için obelgeyi tarayıcınızda açınız



47

belgeyi tarayıcınızda açınız.

Bir hata varsa tarayıcınız bu hatayı görüntüleyecektir.

<?xml version="1.0" encoding="utf-8"?><kitaplar>

<kitap>

<nu>1</nu>

<ad>Nutuk</ad>

<yazar>M.Kemal Atatürk</yazar>

<yayinevi>Kanarya</yayinevi></kitap>

<kitap>

<nu>2</nu>

<ad>Mesnevi'den Seçmeler</ad>

<yazar>Mevlana</yazar>

<yayinevi>Serçe</yayinevi>/kit

kitaplar.xml belgesinin ağaç yapısını çiziniz.



48

<yayinevi>Serçe</yayinevi></kitap>

<kitap>

<nu>3</nu>

<ad>Çalıkuşu</ad>

<yazar>Reşat Nuri Güntekin</yazar>

<yayinevi>Doğan</yayinevi>

</kitap></kitaplar>


Kitaplar.xml belgesi yukarıdaki gibi yapılandırıldığı gibi geliştiric

inintercihine göre farklı şekilde de yapılandırılabilir.

Örneğin, aşağıda kitabın birden fazla yazara sahip olduğu durumlarıda ele alan ve kimi elemanları özellik olarak belirleyen örnekverilmiştir.



49

<kitaplar><kitap nu=”1”>

<ad>Mesnevi'den Seçmeler</ad>

<yazar>Mevlana</yazar><yayinevi>Serçe</yayinevi>

</kitap>

<kitaplar>

Bu belgelerin ağaç yapısını çiziniz.



50

<?xml version="1.0" encoding="utf-8"?>

<personel><eleman>

<ad>Serkan</ad><soyad>KORKMAZ</soyad>

</eleman><eleman>

Örnek XML Belgesi



51

<eleman><ad>Mehmet</ad><soyad>YILMAZ</soyad>

</eleman>

</personel>

Örnek XML Belgesi



52

Örnek XML Belgesi



53

Öğrenci Listesi<?xml version="1.0" encoding="windows-1254"?><ogrenci><eleman><no>051206002</no><ad>ibrahim halil</ad><soyad>unurlu</soyad>

</eleman>l



54

</eleman><eleman><no>091206001</no><ad>özge</ad>

<soyad>sarpkaya</soyad></eleman></ogrenci>

Kitap Listesi<?xml version="1.0" encoding="windows-1254"?><kitaplar><kitap>

<numara>1</numara><ad>Çalıkuşu</ad><yazar>Reşat Nuri Güntekin</yazar><yayinevi>Serçe</yayinevi>

</kitap>

<kitap>



55

<kitap><numara>2</numara><ad>Aşk</ad><yazar>Elif ŞAFAK</yazar><yayinevi>Yurt</yayinevi>

</kitap></kitaplar>

Kimlik Bilgileri

<?xml version="1.0" encoding="windows-1254"?><kimlik><kisi no="1"><tcno>11111111111</tcno><ad>Ahmet</ad>

<soyad>KILIÇ</soyad><dogum_yeri>BİRECİK</dogum_yeri><dogum_tarihi>01.01.1990</dogum_tarihi></kisi><kisi no="2"><tcno>22222222222</tcno><ad>Fatma</ad>



56

<ad>Fatma</ad><soyad>ÇİÇEK</soyad><meslek>Hemşire</meslek><dogum_yeri>ŞANLIURFA</dogum_yeri><dogum_tarihi>01.01.1993</dogum_tarihi>

</kisi></kimlik>

Ürün Bilgileri<?xml version="1.0" encoding="windows-1254"?><!– Urün Bilgileri --><urunler><urun><urun_no>125</urun_no><urun_adi>Cep Telefonu</urun_adi>

<fiyat>200 TL</fiyat><firma>NOKIA</firma><model>u900</model></urun><urun><urun_no>150</urun_no><urun_adi>Bilgisayar</urun_adi>

<fiyat>1500 TL</fiyat><firma>IBM</firma>



57

y y<firma>IBM</firma><model>ThinkCentre</model></urun><urun><urun_no>175</urun_no><urun_adi>Televizyon</urun_adi><fiyat>500 TL</fiyat><firma>Arçelik</firma><model>A-25</model></urun>

Çiçek Bilgileri<?xml version="1.0" encoding="windows-1254"?><cicekler><cicek><cicek_adi>Gül</cicek_adi><fiyat>5 TL</fiyat>

Documents

Web Tasariminin Temelleri