BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

Transkript

1 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4

2 Sayfalara Resim Eklemek 2 <IMG> Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı olmayan bir etikettir. Aldığı özellikler: Src: Resmin konumunu belirler. Alt: Resme ait açıklama metni eklemek için kullanılır. Height: Resmin ekrandaki yüksekliğini belirler. Width: Resmin ekrandaki genişliğini belirler. Align: Resmin yataydaki konumunu belirler. Hspace: Komşu nesnelere olan yatay uzaklığı belirler. Vspace: Komşu nesnelere olan düşey uzaklığı belirler. Border: Resmin kenarlık kalınlığını belirler.

3 Sayfalara Resim Eklemek 3 UYGULAMA: IMG etiketinin kullanımı 1. Çalıştığınız klasöre bir resim kopyalayınız. 2. Verilen kodları yazarak tarayıcı sayfasında görüntüleyiniz. 3. Kendiniz de farklı bir örnek yaparak istediğiniz bir resmi tarayıcıda görüntüleyiniz.

4 Sayfalara Resim Eklemek 4 <MAP> Etiketi Resim üzerinde belirli bölgelere bağlantı eklemek için kullanılır. Resim üzerinde belirlenen bu alanlara tıklanarak istenilen sayfaya geçilebilir. Name: Hazırlanan haritanın hangi resim için kullanılacağını belirlemek için haritaya isim verilmesini sağlar. <AREA> Etiketi Resim üzerinde istenen bölgeleri belirlemek için kullanılır. Özellikleri: Href: Belirlenen alana bağlantı atamak için kullanılır. Shape: Belirlenen alanın şeklini ayarlar. Rect: Dikdörtgen bir alanı belirler. Parametreleri sırasıyla sol üst x, y ve sağ alt x, y koordinatları Circle: Çembersel bir alanı belirler. Parametreleri sırasıyla merkezin x, y koordinatları, yarıçap Polygon: Dikdörtgen ve çember dışında çok köşeli, kapalı bir alanı tanımlar. Coords: Shape ile belirlenen kapalı alanların koordinatlarını belirlemek için kullanılır.

5 Sayfalara Resim Eklemek 5 UYGULAMA: MAP ve AREA etiketlerinin kullanımı 1. Çalıştığınız klasöre butonlu bir resim kopyalayınız. 2. Verilen kodları yazarak tarayıcı sayfasında görüntüleyiniz ve butonların üzerine tıklayınız.

6 <A> Anchor Etiketi Bağlantı eklemek için kullanılır. <a> </a> etiketleri arasına yazılan metinlerin veya resim gibi nesnelerin üzerine tıklandığında, tarayıcı ziyaretçiyi belirtilen adrese yönlendirir. Özellikleri: Href: Bağlantı adresini belirlemek için kullanılır. 1. Aynı dizindeki bir sayfayı belirtmek için <a href= index.htm > Ana Sayfa </a> 2. Alt dizinlere ait klasörler içerisindeki bir dosyayı göstermek için <a href= Dersler/BTP207/odev1.doc > Ödev 1 </a> 3. Aynı dizinin üst dizinlerinde olan bir dosyayı göstermek için../ işaretleri üst dizin sayısı kadar kullanılır. <a href=../../../doc/index.htm > Geri dön </a> Örneğinde dosya üç üst dizindedir. 4. URL adresiyle: <a href= > Arama Motoru </a> Bağlantı Eklemek 6

7 Bağlantı Eklemek 7 Not 1: Yol içerisindeki bazı karakterler aşağıdaki şekilde ifade edilir. %25 % yerine %20 boşluk yerine %2F / yerine %3F? yerine kullanılır. Not 2: Tarayıcılar uzantısı htm, html, asp, php gibi görüntüleyebileceği formatlar dışında dosya formatlarına rastladığında bunları bilgisayara indirmek için gerekli prosedürleri yerine getirir. Not 3: Bağlantılar mail adresine yönlendirilebilir. Bunun için mail adresine mailto: eklentisi yapılır. Örneğin, <a href= mailto: nat@anadolu.edu.tr > </a>

8 Listeler 8 Bir konuya ait hiyerarşik yapıyı ifade etmek için kullanılır. Listeler sırasız <UL> ve sıralı <OL> olmak üzere ikiye ayrılır: <UL> (Unordered List) Etiketi Numara veya harfler olmaksızın çeşitli şekillerle liste oluşturmak için kullanılır. Özellikleri: Type: Madde imlerinin şeklini belirlemek için kullanılır. Circle: Çember Disc: Daire Square: İçi dolu kare <LI> (List Item) Etiketi Listedeki her bir maddeyi belirler. Sonlandırmalı olmayan etikettir. Sırasız ve sıralı listelerde, <UL> ve <OL> etiketleri arasında, kullanılır.

9 Listeler 9 UYGULAMA: UL ve LI etiketlerinin kullanımı 1. Verilen kodları yazarak tarayıcı sayfasında görüntüleyiniz. 2. Madde işaret tiplerini değiştirerek sayfayı tekrar görüntüleyiniz. 3. Kendiniz de farklı bir liste oluşturunuz.

10 Listeler 10 <OL> (Ordered List) Etiketi Harf veya sayısal tabanlı işaretlenmiş liste yapısını belirler. Özellikleri: Type: Sıralamanın tipini belirler. Aşağıdaki değerleri alır: 1: Sayıyla normal işaretleme (1,2,3,4,5, ) a: Küçük harfle işaretleme (a,b,c,d,e,f, ) A: Büyük harfle işaretleme (A,B,C,D,E,F, ) i: Küçük Roma rakamlarıyla işaretleme (i,ii,iii,iv,v, ) I: Büyük Roma rakamlarıyla işaretleme (I,II,III,IV,V, )

11 Tablolar 11 <TABLE> Tablo Etiketi (1/2) En genel tablo etiketidir. Tablonun başlangıç, bitiş ve tabloya ait özelliklerini belirler. Özellikleri: Align: Tabloyu yatay konumda hizalamak için kullanılır. Varsayılan değeri left (sol) dur. Left: Sola yaslı Right: Sağa yaslı Center: Ortalı Border: Çerçevenin başlığını belirler. Sayısal değer alır. Cellspacing: Hücreler arası boşluğu belirler. Varsayılan değeri 2 dir. Cellpadding: Hücre içeriğinin hücre sınırlarına olan uzaklığını belirler. Varsayılan değeri 1 dir. Width/Height: Tablonun genişliğini ve yüksekliğini belirler. Sabit sayısal değer veya yüzde cinsinden değer alabilir.

12 Tablolar 12 <TABLE> Tablo Etiketi (2/2) Bgcolor: Arkaplan rengini belirler. Background: Arkaplan resmini belirler. Bordercolor: Çerçeve rengini belirler. <TR> (Table Row) Satır Etiketi Tabloya satır eklemek için kullanılır. Tablolar oluşturulurken önce satırlar, sonra o satır içindeki sütunlar oluşturulur. Özellikleri: Align: İçeriğin yatayda hizalanması için kullanılır. Left (sola yaslı), right (sağa yaslı), center (ortalı), justify (iki yana yaslı) değerlerini alır. Valign: Hücre içindeki metnin düşeydeki yerleşimini ayarlar. Top (üstte), middle (ortada), bottom (altta) değerlerini alır. Bgcolor: Arkaplan rengini belirler.

13 Tablolar 13 <TD> (Table Definition) Sütun Etiketi Bir satır içinde sütunlar oluşturmak için, satır etiketleri arasında kullanılır. <TD> etiketleri arasında hücreye ait içerik bulunur. Özellikleri: Align: İçeriğin yatayda hizalanması için kullanılır. Left (sola yaslı), right (sağa yaslı), center (ortalı), justify (iki yana yaslı) değerlerini alır. Colspan/Rowspan: Hücreleri birleştirmek için kullanılır. Width/Height: Sütunun genişliğini ve yüksekliğini ayarlamak için kullanılır. Bu büyüklükler iki şekilde belirlenir. 1. Piksel cinsinden. Örneğin, 150, 400 gibi 2. Yüzde cinsinden: Örneğin 20%, 80%... gibi. Toplam satırın ya da sütunun genişliğine veya yüksekliğine göre belirlenir. Valign: Düşeydeki konumu ayarlar. Top (üstte), middle (ortada), bottom (altta) değerlerini alır. Bgcolor: Arkaplan rengini belirler.

14 Tablolar 14 UYGULAMA: Yukarıda verilen tablonun HTML kodları

15 Tablolar 15 Hücreleri Birleştirmek Hücreleri birleştirmek için <TD> etiketinin aşağıdaki özellikleri kullanılır. Colspan: Aynı satırdaki hücreleri birleştirmek için kullanılır. Sütunları birleştirir. Birleştirilecek hücre sayısı değerini alır. Rowspan: Aynı sütundaki hücreleri birleştirmek için kullanılır. Satırları birleştirir. Birleştirilecek hücre sayısı değerini alır. Satırlar birleştirilecekse üst hücreyi, sütunlar birleştirilecekse sol hücreyi oluşturan <TD> etiketi içerisinde kullanılırlar. Colspan ve Rowspan parametrelerinin aldığı değer kadar alt etiketlerde <TD> etiketi kullanılmaz.

16 Tablolar 16 UYGULAMA:

17 Tablolar 17 UYGULAMA:

18 Tablolar 18 UYGULAMA:

19 Çerçeveler (Frames ) 19 Aynı tarayıcı penceresinde birbirinden bağımsız birden fazla sayfanın gösterimine imkan veren yapılardır. Çerçeve yapıya sahip sayfa tasarımında tüm çerçeveleri ifade eden bir ana sayfa ve tanımlanan çerçeve sayısı kadar gösterilecek sayfa olması gerekir. <FRAMESET> Etiketi: Çerçeve grubunu oluşturmak için kullanılır. Table etiketi gibi çerçeve yapısının başlangıç ve bitişini gösterir. Çerçeveler satır ve sütunlardan oluşur. Özellikleri: Cols: Sütunları belirler. Sütun sayısı kadar sayısal değer alır. Bu değerler sütunun genişliğini belirler. Değerler sabit, yüzde(%) ve * olarak ifade edilebilir. * karakterinin anlamı geri kalanı diğer sütuna dahil etmek anlamına gelir. <frameset cols= 100, 25%, * > Rows: Sayfayı satırlara bölmek için kullanılır. Kullanımı cols özelliği gibidir. <frameset rows= 80, * >

20 Çerçeveler (Frames ) 20 <FRAME> Etiketi: Frameset etiketi ile tanımlanan çerçeveleri isimlendirmek, bağlanacak sayfaları atamak ve çerçevelerin özelliklerini belirlemek için kullanılır. Çerçeve sayısı kadar <frame> etiketi kullanılır. Frameset etiketi içerisinde uzunlukları yazılan çerçevelerle aynı sırada ifade edilir. Özellikleri: FrameBorder: Çerçeveler arasındaki çubuğun kalınlığını belirler. 0 değeri görünmez yapar. Name: Çerçevenin adını belirler. Noresize: Kullanıldığında çerçeve boyutlandırılmaz. Değer almadan kullanılır. Scrolling: Kaydırma çubuklarıyla ilgili ayarlamaları yapmak için kullanılır. Yes: Kaydırma çubukları içerikten bağımsız daima görüntülenir. No: Kaydırma çubukları görüntülenmez. Auto: İçeriğin durumuna göre gerektiğinde kaydırma çubukları oluşturulur. Src: Çerçevede gösterilecek sayfanın yolunu belirler.

21 Çerçeveler (Frames ) 21 UYGULAMA: 1. İstediğiniz içeriğe sahip 3 adet web sayfası hazırlayınız. 2. Aşağıda verilen kodları indeks.htm dosyası olarak kaydediniz. 3. Çerçeve sayfasını oluşturacak aşağıdaki HTML kodlarını d4_frame.htm olarak kaydediniz.

22 Form Elemanları 22 Ziyaretçinin veri girişi yapması için kullanılan nesnelere form elemanları denir. Düğmeler, metin kutuları, seçi düğmeleri, metin alanları yaygın kullanılan form elemanlarıdır. <FORM> Form Etiketi Form elemanlarını içerisine alan ve bu elemanlara yapılacak girdileri parametre olarak hangi yapıya devredileceğini belirleyen en temel ve genel etikettir. Tüm form elemanları <form> </form> etiketi arasında tanımlanır. Özellikleri: Action: Form elemanlarındaki ziyaretçiye ait verilerin hangi yapıya devredileceğini belirler. Bu yapı, CGI dili ile hazırlanmış bir sayfa (php, asp ) veya bir e-posta adresi olabilir. <form action= sorgu.asp method= post > Bu örnekte, form elemanlarına ait veriler sorgula.asp dosyasında olacaktır. Name: Formu adlandırmak için kullanılır.

23 Form Elemanları 23 <INPUT> Etiketi (1/3) Form üzerine çeşitli işlevlere sahip metin kutusu, buton, seçi kutusu, gibi form nesneleri eklemek için kullanılır. Form üzerine yerleştirilecek form nesnelerinin çeşidini TYPE özelliği belirler. Type özelliğinin aldığı değerler: TEXT: Metin kutusu ekler. Bu metin kutusuna tek satır yazılır. Aldığı parametreler: Size: Kutunun sayfadaki büyüklüğünü (uzunluğunu) belirler. MaxLength: Yazılacak maksimum metin uzunluğunu belirler. Value: Metin kutusunun varsayılan değerini belirler. Name: Metin kutusunu adlandırmak için kullanılır. PASSWORD: Metin kutusu ekler. Bu metin kutusuna tek satır yazı yazılabilir. Basılan karakterler * veya biçimde metin kutusuna yazılır. Aldığı parametreler TEXT parametrelerine benzer: size, maxlength, value, name

24 Form Elemanları 24 <INPUT> Etiketi (2/3) CHECKBOX: Seçi düğmesidir. Üzerine tıklandığında seçilir, seçiliyken tekrar tıklanırsa seçisiz hale gelir. Birden fazla checkbox nesnesi birbirinden bağımsız seçilebilir. Aldığı parametreler: Checked: Kutunun seçili olup olmayacağını belirler. Name: İsim vermek için kullanılır. Value: Kutunun sahip olduğu değeri belirler. RADIO: Seçi düğmesidir. Üzerine tıklandığında seçilir, seçiliyken tekrar tıklanırsa değişiklik olmaz. Birden fazla radio nesnesi birbirinden bağımsız seçilemez. Bir radio nesnesini seçisiz yapmak için aynı gruptan diğer radio nesnesine tıklanmalıdır. Aldığı parametreler CHECKBOX parametrelerine benzer: checked, name, value

25 Form Elemanları 25 <INPUT> Etiketi (3/3) SUBMIT: Onay (gönder) düğmesi oluşturur. Form içerisindeki verileri <form> etiketinin action özelliğindeki yapıya göndermek amacıyla kullanılır. Name: İsim vermek için kullanılır. Value: Düğmenin sahip olduğu başlığı belirler. RESET: Sil butonu oluşturur. Form elemanlarını temizlemek için kullanılır. Butona tıklandığında tüm form nesnelerinin içeriği sıfırlanır. Aldığı parametreler: name, value

26 Form Elemanları 26 UYGULAMA: FORM ve INPUT etiketlerinin kullanımı 1. Verilen kodları yazarak tarayıcı sayfasında görüntüleyiniz. 2. Seçi kutularının üzerine tıklayarak seçili hale getiriniz. 3. Kendiniz de farklı bir form oluşturunuz.

27 Form Elemanları 27 <BUTTON> Etiketi Daha görsel, metin ve yanında resimde olabilen butonlar hazırlamak için kullanılır. Buton üzerindeki nesneler normal sayfaya ekleniyormuş gibi <button> etiketleri arasına yerleştirilir. İsim belirlemek için name parametresi kullanılır. UYGULAMA: BUTTON etiketinin kullanımı 1. Verilen kodları yazarak tarayıcı sayfasında görüntüleyiniz. 2. Farklı bir resim yerleştirerek

28 Form Elemanları 28 <TEXTAREA> Etiketi Çok satırdan oluşan metin kutusudur. Adres, istek, şikayet ve görüş gibi ziyaretçi bilgilerini almak için kullanılır. Özellikleri: Cols: Metin alanının karakter cinsinden genişliğini belirler. Rows: Metin alanının kaç satır olacağını belirler. Name: İsim vermek için kullanılır.

29 Form Elemanları 29 <SELECT> Etiketi Açılır liste kutuları oluşturur. Dışarıdan veri girişi yapılamaz. Sadece listedeki seçenek maddeleri seçilebilir. Alt etiket olarak <OPTION> etiketi ile kullanılır. Özellikleri: Size: Listenin kaç madde olacağını belirler. Multiple: Ctrl tuşuna basılarak birden fazla maddenin seçilebilmesini sağlar. Name: İsim vermek için kullanılır. <OPTION> Etiketi Listeye seçenek eklemek için <SELECT> etiketi ile kullanılır. Selected: İlgili maddenin seçili olup olmayacağını belirler.

30 Form Elemanları 30 UYGULAMA: <SELECT> ve <OPTION> etiketlerinin kullanımı 1. Verilen kodları yazarak tarayıcı sayfasında görüntüleyiniz. 2. <select> etiketinin size ve multiple özelliklerini değiştirerek etkisini gözlemleyiniz. 3. <option> etiketi ile farklı seçenek maddeleri ekleyiniz.