İNTERNET PROGRAMCILIĞI I BTP 207 Ders 4. Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler.

... konulu sunumlar: "İNTERNET PROGRAMCILIĞI I BTP 207 Ders 4. Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler."— Sunum transkripti:

1 İNTERNET PROGRAMCILIĞI I BTP 207 Ders 4

2 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. Sayfalara Resim Eklemek 2

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. Sayfalara Resim Eklemek 3

4 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. 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. Sayfalara Resim Eklemek 4

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. Sayfalara Resim Eklemek 5

6 Anchor Etiketi Bağlantı eklemek için kullanılır. 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 Ana Sayfa 2. Alt dizinlere ait klasörler içerisindeki bir dosyayı göstermek için Ödev 1 3. Aynı dizinin üst dizinlerinde olan bir dosyayı göstermek için ‘../’ işaretleri üst dizin sayısı kadar kullanılır. Geri dön Örneğinde dosya üç üst dizindedir. 4. URL adresiyle: Arama Motoru Bağlantı Eklemek 6

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,mailto: e-mail nat@anadolu.edu.tr Bağlantı Eklemek 7

8 Bir konuya ait hiyerarşik yapıyı ifade etmek için kullanılır. Listeler sırasız ve sıralı olmak üzere ikiye ayrılır: (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 (List Item) Etiketi Listedeki her bir maddeyi belirler. Sonlandırmalı olmayan etikettir. Sırasız ve sıralı listelerde, ve etiketleri arasında, kullanılır. Listeler 8

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

10 (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,…) Listeler 10

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

12 Tablo Etiketi (2/2)  Bgcolor: Arkaplan rengini belirler.  Background: Arkaplan resmini belirler.  Bordercolor: Çerçeve rengini belirler. (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. Tablolar 12

13 (Table Definition) Sütun Etiketi Bir satır içinde sütunlar oluşturmak için, satır etiketleri arasında kullanılır. 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. Tablolar 13

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

15 Hücreleri Birleştirmek Hücreleri birleştirmek için 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 etiketi içerisinde kullanılırlar. Colspan ve Rowspan parametrelerinin aldığı değer kadar alt etiketlerde etiketi kullanılmaz. Tablolar 15

16 UYGULAMA: Tablolar 16

17 UYGULAMA: Tablolar 17

18 UYGULAMA: Tablolar 18

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. 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.  Rows: Sayfayı satırlara bölmek için kullanılır. Kullanımı cols özelliği gibidir. Çerçeveler (Frames ) 19

20 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 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. Çerçeveler (Frames ) 20

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. Çerçeveler (Frames ) 21

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 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ı 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. Bu örnekte, form elemanlarına ait veriler sorgula.asp dosyasında olacaktır.  Name: Formu adlandırmak için kullanılır. Form Elemanları 22

23 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” Form Elemanları 23

24 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 “ Form Elemanları 24

25 Etiketi (3/3)  SUBMIT: Onay (gönder) düğmesi oluşturur. Form içerisindeki verileri 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” Form Elemanları 25

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. Form Elemanları 26

27 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 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 Form Elemanları 27

28 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. Form Elemanları 28

29 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 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. Etiketi Listeye seçenek eklemek için etiketi ile kullanılır.  Selected: İlgili maddenin seçili olup olmayacağını belirler. Form Elemanları 29

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