Transcript Asenkron Motorlar - Anadolu University

BTP 207
İNTERNET PROGRAMCILIĞI I
Ders 4
Sayfalara Resim Eklemek
<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.
2
Sayfalara Resim Eklemek
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.
3
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.
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.
Bağlantı Eklemek
<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=“http://www.google.com”> Arama Motoru </a>
6
Bağlantı Eklemek
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: [email protected]”> e-mail </a>
7
Listeler
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.
8
Listeler
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.
9
Listeler
<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,…)
10
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.
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.
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.
Tablolar
UYGULAMA:
Yukarıda verilen tablonun HTML kodları
14
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.
Tablolar
UYGULAMA:
16
Tablolar
UYGULAMA:
17
Tablolar
UYGULAMA:
18
Ç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, *”>
Çerçeveler (Frames )
<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.
20
Çerçeveler (Frames )
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.
21
Form Elemanları
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.
22
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”
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 “
Form Elemanları
<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”
25
Form Elemanları
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.
26
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
Form Elemanları
<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.
28
Form Elemanları
<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.
29
Form Elemanları
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.
30