Web Tasarımı ve Programlama

advertisement
hakanbabac.net
HTML
Web Tasarımı ve Programlama
hakanbabac.net
İ Ç E R İ K //
HTML
• Internet Ortamı ve Web Tasarımı
• Temel HTML Etiketleri
• Listeleme Etiketleri
• Metin Düzenleme Etiketleri
• Bağlantı (Köprü) Oluşturma
• Tablolarla Çalışma
• Çoklu Ortam Araçları
• Çerçeveler
• Stil Şablonları (CSS)
• Formlar
html
2
hakanbabac.net
INTERNET ORTAMI VE WEB TASARIMI
• Alan Adı (Domain)
IP adresi diye tabir edilen, bilgisayarların birbirini görmesini
sağlayan nümerik sisteminin daha kolaylaştırılmış ve
rahatça girilebilmesi için kelimelerle ifade edilen halidir.
www.alanismi.alanturu.ulkekodu








html
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
3
hakanbabac.net
INTERNET ORTAMI VE WEB TASARIMI
• Web Alanı / Barındırma (Hosting)
Hazırlanan web sitelerinin belirlenen alan isimlerine göre
internet ortamında yayımlanmasını sağlayan hizmet türüdür.
 Bu hizmet, hosting
süreliğine sağlanır.
firmaları
tarafından
belirli
 Server (sunucu) bilgisayarlar,
hosting
amacıyla
kullanılan
gelişmiş donanımsal özelliklere
sahip olan ve birçok kullanıcıya
aynı
anda
hizmet
veren
bilgisayarlardır.
html
4
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML (Hypertext Markup Language), web sayfaları
hazırlamak için kullanılan bir işaretleme dilidir.
 HTML komutları; herhangi bir
metin düzenleme editöründe
yazılabileceği gibi, çeşitli web
tasarım editörleriyle de
oluşturulabilir.
 HTML komutları etiketlerden
(tag) oluşur.
html
5
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML komutları “<” ve “>” işaretleri arasına yazılır.
<etiketadi>……</etiketadi>, <tag>…..</tag>
 HTML
etiketleri
kullanılmamalıdır.
(ş, ç, ö, ü, ı, ğ)
yazılırken
Türkçe
karakterler
 BÜYÜK-küçük harf duyarlı değildir.
<body>….</BODY> veya <Html>….</html>
 Açılan bir etiket mutlaka kapatılmalıdır. İlk açılan etiket
en son kapatılır ve etiketi kapatma sırasında “/” işareti
unutulmamalıdır ! ! !
html
6
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML dosyaları sunucu bilgisayarın sabit diskinde .html
ya da .htm uzantısı ile saklanır.
 Her web sayfası;
<html>
<head>
<body>
etiketi içermelidir.
 Bu dizilim kuralına uymadığınız takdirde bile sayfanız
görüntülenebilir
ancak
biçimlendirme
sorunları
yaşayacağınızı ve ziyaretçilerinizin sayfa içerisinde
gezinirken sorun yaşayabileceğini unutmayın !!!
html
7
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <html>

html
HTML kodlarının yazımına başladığımızı gösteren
etikettir.

Tüm
HTML
kodları
<html>…</html> arasında yer alır.

</html> ile HTML kodlarının
yazımının bittiği anlaşılır.

Bu etiketin
yoktur.
hiçbir
parametresi
8
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
Sayfa ile ilgili bilgilerin bulunduğu
 sayfa başlığı (title),
 link özellikleri,
 siteyi tarayıcıya ve arama motorlarına
tanıtmak
amacıyla
kullanılan
meta
bölümüdür.
etiketleri
Kullanılacak Parametreler
html
name
Author, description ve keywords özellikleri tanımlanır.
http-equiv
Refresh, expires, content ve content-style-type özellikleri
Size
Yazının boyu belirlenir.
9
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
• NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi
bilgileri içerir.
<meta name="author" content=«aosbilisim">
<meta name="description«
yazınız">
content="sayfanın
tanımını
<meta name ="description" content ="Bu sayfa, Web
Tasarımı ve Programlama dersi modülleri için hazırlanmıştır. ">
<meta
name="keywords"
content="Siteniz
arama
motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız
buraya yazınız.">
html
10
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
• HTTP-EQUIV: İçinde yer aldığı sayfanın, web server
tarafından ziyaretçiye gönderilmesinde oluşturulacak
karşılık başlığı bölümünde yer alacak bilgiler içerir.
<meta http-equiv=Content-Type
charset=windows-1254">
content="text/htm;
<meta http-equiv=Content-Type
charset=iso-8859-9">
content="text/htm;
<meta http-equiv=Content-Type
charset=utf-8">
content="text/htm;
html
11
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
<meta name="robots" content="all veya none">
Hazırladığımız sayfanın arama motorlarının robotları
tarafından taranmasına izin vermek veya engellemek için
kullanılır.
 İzin  all,
 Engelleme  none kullanılır.
Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından
görüntülenmez.
html
12
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <head>
• <title>: Sayfanın tarayıcıda görünecek başlığının ne
olacağını belirlemek için kullanılır.
html
13
hakanbabac.net
HTML TEMEL ETİKETLERİ
• <body>
 HTML belgesinin tüm içeriğinin yer aldığı bölümdür.
 Bu bölümde yer alan içeriğin tümü tarayıcıda
görüntülenir.
bgcolor
Sayfanın arkaplân rengini belirlemek için kullanılır.
background
Arkaplanda kullanılmak istenilen resmi belirlemek için
kullanılır.
link
Sayfada kullanılacak linklerin rengini belirlemek için kullanılır.
alink
vlink
html
Sayfada herhangi bir linke tıklandığı zaman oluşacak rengi
belirlemek için kullanılır.
Sayfada önceden ziyaret edilmiş linklerin rengini belirlemek
için kullanılır.
14
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ol>
 Sıralı liste oluşturmak için kullanılır.
 Kelime işlemci programındaki numaralandırma işlemi
ile aynıdır. Listeleme işlemi harf, rakam veya roma
rakamı şeklinde yapılabilir.
 <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır.
1. Elma
2. Armut
3. Kavun
html
15
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ol>
 type parametresi kullanarak listenin rakamla mı
harfle mi başlayacağını belirleyebiliriz.
a
a. A. Elma
b. B. Armut
c. C. Kavun
i
i. I. Elma
ii. II. Armut
iii. III. Kavun
html
16
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ol>
 Sıralamanın her zaman “1” den veya “A” dan
başlamasının
istenmediği
durumlarda
start
parametresi kullanılır.
C. Elma
D. Armut
E. Kavun
html
17
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ul>
 Madde imli liste oluşturmak için kullanılır.
 <ul> etiketi, <li> etiketi ile birlikte kullanılmalıdır.
• Elma
• Armut
• Kavun
html
18
hakanbabac.net
LİSTELEME ETİKETLERİ
• <ul>
 type parametresi kullanarak madde iminin şeklini
belirleyebiliriz.
o Elma
•
Armut
 Kavun
html
19
hakanbabac.net
LİSTELEME ETİKETLERİ
• <li>
 Liste oluşturmak için liste elemanlarını belirtmede
kullanılan etikettir.
 Sıralamanın
hangi şekilde
olacağını
<ol> ve <ul>
etiketleri belirler.
html
20
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <hx>
 Başlık eklemek için kullanılan etiketlerdir.
 “x” ifadesi, 1’den 6’ya kadar değer almaktadır.
 x değeri azaldıkça yazı büyür.
html
21
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <hx>
• align
 Metin / Nesne hizalama için kullanılan parametredir.
left
 sola
right  sağa
center  ortaya
justify  iki yana yasla
html
22
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <b>
 İstenilen metni kalın (bold) olarak yazmak için
kullanılır.
 <b>…</b> etiketleri arasında yazılı olan metni kalın
yapar.
Boş zaman yoktur boşa geçen zaman vardır. Tagore
html
23
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <u>
 İstenilen metni altı çizili (underline) olarak yazmak
için kullanılır.
 <u>…</u> etiketleri arasında yazılı olan metnin altını
çizili yapar.
Boş zaman yoktur boşa geçen zaman vardır. Tagore
html
24
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <i>, <I>
 İstenilen metni eğik (italik) olarak yazmak için
kullanılır.
 <i>…</i> etiketleri arasında yazılı olan metni eğik
yapar.
Boş zaman yoktur boşa geçen zaman vardır. Tagore
html
25
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <br>
 Bir alt satıra geçmek için kullanılır.
 Bu etiket kapatılmaz!!!
Ey Türk Gençliği!
Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini,
ilelebet, muhafaza ve müdafaa etmektir.
html
26
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <p>
 Paragraf oluşturmak için kullanılır.
 <p>…</p> etiketleri arasında yazılı olan metni ayrı bir
paragraf içinde gösterir.
html
27
hakanbabac.net
METİN DÜZENLEME ETİKETLERİ
• <font>
 Metinlerin renk, boyut, yazı tipi gibi özelliklerini
değiştirmek için kullanılır.
 size, color ve face parametreleri ile kullanılabilir.
size
 yazı büyüklüğü
color  yazı rengi
face  yazı tipi
<font face="Algerian" size="7" color="purple">Merhaba</font>
html
28
hakanbabac.net
GÖRÜNÜM DÜZENLEME ETİKETLERİ
• <hr>
 Sayfaya yatay çizgi çizmek için kullanılan etikettir.
 Bu etiket kapatılmaz!!!
 size, width ve align parametreleri ile kullanılabilir.
size
 çizgi kalınlığı
width  çizgi uzunluğu
align  çizgi konumu (hizalama)
<hr size=“6” width=”200” align=“center”>
html
29
hakanbabac.net
BAĞLANTI (KÖPRÜ) OLUŞTURMA
• <a href>…..</a>
 Sayfa içi/dışı tüm bağlantılar <a href>…</a> etiketleri
kullanılarak tanımlanır.
<a href=‘‘baglanti_adresi’’>metin_nesne</a>
• Sayfa Dışı Bağlantı
<a href=‘‘http://www.aosbilisim.net’’>AOSBilişim</a>
AOSBilişim
<a href=‘‘index.html’’>Ana Sayfa</a>
Ana Sayfa
html
30
hakanbabac.net
BAĞLANTI (KÖPRÜ) OLUŞTURMA
• Sayfa İçi Bağlantı
 Öncelikli olarak sayfa içi bağlantı verilecek kısım
adlandırılmalıdır (çapa işlemi).
 Adlandırma, <a name="....">...</a> etiketi kullanılarak
yapılır.
<a name="ornek">Hyper Text Markup Language</a>
 Ardından
bağlantı
verilecek
alana
gelinip
<a href =#....">...</a> etiketi köprü tanımlanır.
<a href="#ornek">Html Nedir?</a>
Html Nedir?
html
Hyper Text Markup Language
31
hakanbabac.net
BAĞLANTI (KÖPRÜ) OLUŞTURMA
• E-Posta Adresine Bağlantı
 <a href=‘‘mailto:e-posta
kullanılarak
adresi”>….</a>
komutu
<a href="mailto: iletisim@aosbilisim.net">e-posta göndermek için tıklayın.</a>
e-posta göndermek için tıklayın.
html
32
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
 Sayfaya tablo eklemek için kullanılır.
 </table> etiketiyle sonlandırılır.
 Satır ve sütun tanımlamaları için; <table> içinde <tr>
ve <td> etiketleri de kullanılmalıdır.
html
33
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <tr>
 Tabloda satır oluşturmak için kullanılır.
html
34
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <td>
 Tabloda sütun oluşturmak için kullanılır.
html
35
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• border
 Hücrenin ve tablonun etrafındaki
kalınlığını ayarlamak için kullanılır.
 Border=0
görünmez.
html
olduğu
çerçeve
zaman
çerçevenin
tarayıcıda
0
36
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• bordercolor
 Çerçevenin renginin ayarlamak için kullanılır.
html
37
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• bgcolor
 Hücre/hücrelerin arkaplan renginin ayarlamak için
kullanılır.
html
38
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• background
 Tablonun veya istenilen hücrenin arka plânına resim
eklemek için kullanılır.
html
39
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• width
 Tablonun veya hücrenin pixel cinsinden genişliğini
belirlemek için kullanılır.
• height
 Tablonun veya hücrenin pixel cinsinden yüksekliğini
belirlemek için kullanılır.
html
40
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• colspan
 Aynı satırdaki hücreleri birleştirmek için kullanılır.
html
41
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• rowspan
 Aynı sütundaki hücreleri birleştirmek için kullanılır.
html
42
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• cellspacing
 Hücrelerin, birbirlerinden ve tablo sınırlarından
uzaklığını pixel türünden ayarlamak için kullanılır.
10
html
43
hakanbabac.net
TABLOLARLA ÇALIŞMA
• <table>
• cellpadding
 Hücrelerin içindeki verilerin, hücre sınırlarından
uzaklığını belirlemek için kullanılır.
0
!!! Tabloda boş hücre kullanılacaksa td etiketi arasındaa   (boşluk)
kullanılmalıdır. Aksi takdirde çizgiler gözükmez !!!
html
44
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Resim Ekleme
 Resim eklemek için kullanılan html etiketi <img src>
dir.
 src, ekleyeceğimiz resmin bulunduğu dizini gösterir.
 Bu etiket kapatılmaz !!!
<img src=‘‘resim1.jpg’’>Gökyüzü
Sayfa içine eklenecek
resmin kaynak adresi
html
45
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Resim Ekleme
PARAMETRE
GÖREVİ
width
Eklenilecek resmin pixel cinsinden genişliğini gösterir.
height
Eklenilecek resmin pixel cinsinden yüksekliğini gösterir.
border
Eklenilecek olan resme bir çerçeve çizilip kalınlığını
belirlemek için kullanılır.
Border=‘‘0’’olursa çerçeve çizilmez.
Buradaki sayı arttıkça çerçevenin kalınlığı da artar.
alt
Fare ile resmin üzerine gelindiğinde ekranda görüntülenmesi
istenen metni belirlemek için kullanılır.
align
Resim hizalamasını belirtmek için kullanılır.
html
46
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Resim Ekleme
html
47
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Ses Ekleme
3 farklı yolla ses eklenebilir:
 Sesi arkaplan olarak ekleyebiliriz.
 Böylelikle sayfa tarayıcı tarafından yüklendiği anda
ses dosyası arkaplanda çalışmaya başlayacaktır.
<bgsound src=‘‘muzik.wav” loop=‘‘infinite”>
Müziğin tekrar sayısı
Sayfa içine eklenecek
sesin kaynak adresi
html
infinite  sayfa
kapanana kadar tekrar
etmesini salar
48
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Ses Ekleme
 Ses dosyasına link vererek de ses ekleyebiliriz.
 Linke tıklandığı zaman bilgisayarda bulunan ses
dosyası yürütücü programı çalışacak ve istenen ses
dosyasının çalması sağlanacaktır
html
49
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Ses Ekleme
 Ses dosyasını sayfa içine gömerek de ses
ekleyebiliriz.
Ses dosyasının çalışma zamanını belirler.
true  Ses dosyası, sayfa yüklendiği anda çalışacaktır.
!!! mp3, wav, aif, ra, mid yaygın olarak kullanılan ses dosyası türlerindendir. !!!
html
50
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Video Ekleme
 Video dosyasına link vererek video ekleyebiliriz.
 Linke tıklandığı zaman bilgisayarda bulunan video
oynatıcı çalışacak ve istenen video dosyasının
görüntülenmesi sağlanacaktır.
html
51
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
• Video Ekleme
 Video dosyasını sayfa içine gömerek de video
ekleyebiliriz.
Videonun çalışma zamanını belirler.
true  Video, sayfa yüklendiği anda çalışacaktır.
!!! mpeg, avi, mov, wmv, asf yaygın olarak kullanılan video türlerindendir. !!!
html
52
Çerçeveler; bir tarayıcı penceresini birden fazla pencereye
bölüp her bir pencere içerisinde farklı içerikler
gösterilmesini; sağlar.
 Her çerçevenin kendine ait bir URL adresi vardır.
 Her çerçeveye bir isim verilebilir.
 Çerçeveler kullanıcı tarafından verilecek ölçülerle
boyutlandırılabileceği
gibi
otomatik
olarak
da
boyutlanabilme özelliğine sahiptir.
html
53
hakanbabac.net
ÇERÇEVELER
hakanbabac.net
ÇERÇEVELER
• <frameset>
 Çerçeve oluşturmak için kullanılan etikettir.
 Tarayıcı penceresinin kaç parçaya bölüneceği
(çerçeve sayısı) ve bu çerçevelerin boyutları
belirlenir.
Çerçevelerden oluşan bir
sayfanın normal bir HTML
belgesinden farkı; içeriğinde
<body> etiketi yerine,
<frameset> etiketini
kullanmasıdır.
html
54
hakanbabac.net
ÇERÇEVELER
• <frameset>
• cols
 Ekranı dikey olarak (sütunlar halinde) tanımlanan
parçalara bölmek için kullanılır.
 Sütun genişlikleri pixel veya %’lik olarak belirlenir.
 Sütun sayısı, çerçeve sayısını belirleyici niteliktedir.
Çerçeve içlerinin kaynağını tanımlamak için kullanılır.
html
55
hakanbabac.net
ÇERÇEVELER
• <frameset>
• rows
 Ekranı yatay olarak (satırlar halinde) tanımlanan
parçalara bölmek için kullanılır.
 Satır yükseklikleri pixel veya %’lik olarak belirlenir.
Çerçeve içlerinin kaynağını
tanımlamak için kullanılır.
html
56
hakanbabac.net
ÇERÇEVELER
• <frame>
 <frameset> etiketi ile oluşturulan çerçevelerin içinde
gösterilecek sayfaların belirlenmesi için kullanılır.
GÖREVİ
PARAMETRE
name
Çerçevenin adını gösterir.
resize / noresize
Çerçeve boyutunun değiştirilip değiştirilemeyeceğini gösterir.
scrolling
Çerçevenin içeriğinin ekrana sığmadığı durumlarda,
kaydırma çubuğu kullanılıp kullanılmayacağını gösterir.
(auto / yes / no)
marginheight
Sayfadaki ilk nesnenin üst kısımdan uzaklığını gösterir.
marginwidth
Sayfadaki ilk nesnenin sol kısımdan uzaklığını gösterir.
src
Çerçeve içinde gösterilecek nesnenin URL adresini gösterir.
html
57
hakanbabac.net
ÇERÇEVELER
• İç İçe Çerçeve Oluşturma
 İç içe kullanılan <frameset> etiketleri ile aynı pencere
içinde yatay ve dikey çerçevelerin birlikte kullanımı
sağlanır.
html
58
hakanbabac.net
ÇERÇEVELER
• <iframe>
 Hazırlamakta olduğunuz sayfanın herhangi bir
yerinde başka bir sayfa görüntülemek istediğiniz
zaman kullanılabilen, bir iç çerçeve oluşturmaya
yarayan etikettir.
PARAMETRE
GÖREVİ
name
İç çerçevenin adını gösterir.
frameborder
İç çerçeve kenarlığının olup olmayacağını gösterir.
scrolling
İç çerçevenin içeriğinin ekrana sığmadığı durumlarda,
kaydırma çubuğu kullanılıp kullanılmayacağını gösterir.
(auto / yes / no)
height
İç çerçevenin yüksekliğini gösterir.
width
İç çerçevenin genişliğini gösterir.
src
İç çerçeve içinde gösterilecek nesnenin URL adresini gösterir.
html
59
hakanbabac.net
ÇERÇEVELER
• <iframe>
html
60
Stil Şablonları (CSS/Cascading Style Sheets), hazırlamakta
olduğumuz sayfalar için istenildiği zaman kullanılmak üzere
şablonlar oluşturmaya yarar.
 CSS kodlarının en önemli özelliklerinden birisi farklı
türlerde kullanılabilmesidir.
 İsteğe göre tek bir öğeye, tüm sayfaya veya site
içerisinde kullanılan tüm html dosyalarına etki edebilme
özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici
CSS olarak adlandırılmaktadır.
html
61
hakanbabac.net
STİL ŞABLONLARI (CSS)
hakanbabac.net
STİL ŞABLONLARI (CSS)
• Yerel CSS
html
62
hakanbabac.net
STİL ŞABLONLARI (CSS)
• Genel CSS
html
63
hakanbabac.net
STİL ŞABLONLARI (CSS)
• Harici CSS
stil.css
html
64
hakanbabac.net
STİL ŞABLONLARI (CSS)
Stil Şablonları ile Çalışma (CSS),
bir sonraki modülde ayrıntılı olarak
anlatılacaktır.
html
65
Etkileşimli Web sayfaları hazırlamanın yolu FORM
kullanmaktan geçer. (e-bankacılık, e-ticaret, e-eğitim…)
Formlar,
kullanıcıdan veri (bilgi) almak için
düzenlenir.
HTML, yalnızca
kullanıcının forma
yazdığı verileri
kaydeder;
onları bir programlama
dilinin yaptığı gibi
işleyemez !!!
html
66
hakanbabac.net
FORMLAR
hakanbabac.net
FORMLAR
• <form>
 Form oluşturmayı sağlayan tüm form elemanları,
<form>….</form> etiketleri arasında yer alır.
<form ACTION=‘‘url’’ METHOD= ‘‘get / post’’ TARGET=‘‘pencere’’>
…
</form>
Formdan girilecek olan
bilgilerin
değerlendirileceği
dosyanın URL adresi
Formdan girilecek olan
bilgilerin değerlendirici
dosyaya gönderim
metodu
Hedef adresin tarayıcıda
gösterileceği pencere
GET : Gönderilen veriler adres çubuğunda gösterilir.
POST : Gönderilen veriler gizli kalır.
<form ACTION=‘‘mailto:iletisim@aosbilisim.net’’ METHOD= ‘‘post’’ TARGET=‘‘_blank’’>
html
67
hakanbabac.net
FORMLAR
• <form>
• method
GET
POST
Ayrıntılı bilgi için tıklayın…
http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx
html
68
hakanbabac.net
FORMLAR
• <form>
• method
GET
POST
Ayrıntılı bilgi için tıklayın…
http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx
html
69
hakanbabac.net
FORMLAR
• <input>
 Form içinde bilgi almak için kullanılır.
 Girişi yapılacak veri türü type parametresi ile
belirlenir. Varsayılan veri türü text(metin) tir.
 Bu etiket kapatılmaz !!!
<INPUT ALIGN=‘‘hizalama’’ MAXLENGTH=uzunluk
NAME=‘‘isim’’ SIZE=boyut SRC=‘‘adres’’ TYPE=‘‘tip’’
VALUE=‘‘değer’’>
html
70
hakanbabac.net
FORMLAR
• <input>
PARAMETRE
GÖREVİ
type
Girilecek olan elemanın türünü belirtmek için kullanılır.
src
Eğer bir resim dosyası kullanılmışsa görüntülenmesi istenilen
resim dosyasının adresini belirtmek için kullanılır.
align
Elemanın sayfada konumlanacağı yeri belirlemek için kullanılır.
(left / right / center)
name
Girilecek olan verinin değişken ismini belirlemek için kullanılır.
maxlength
Girilecek olan verinin en fazla kaç karakterden oluşacağını
belirlemek için kullanılır.
Size
Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır.
Varsayılan değeri 20‘dir.
checked
Bir seçim kutusu kullanıldığı durumlarda bu kutuların
işaretlenmiş olarak görüntülenmesini sağlamak için kullanılır.
Sadece radio ve checkbox elemanları için kullanılır.
disabled
Veri girişlerini engellemek için kullanılır.
html
71
hakanbabac.net
FORMLAR
• <input>
html
72
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Checkbox
 Forma onay kutuları eklemek için kullanılır.
html
73
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Radio
 Kullanıcının verilen seçeneklerden sadece bir
tanesini seçebileceği durumlar için kullanılmaktadır.
 Radio düğmelerinin birbirleri ile ilişkili olması ve
name özelliklerinin aynı olması gerekmektedir.
 Checked özelliğini kullanarak sayfa yüklendiği
zaman, seçili olmasını istediğiniz değer belirlenir.
 Radio düğmelerinin
seçeneğinde belirlenir.
html
alacağı
değerler
Value
74
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Radio
html
75
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Text
 Forma, tek satırlık metin alanı eklemek için kullanılır.
html
76
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Password
 Forma, şifreli alanlar eklemek için kullanılır.
html
77
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Textarea
 Forma birden fazla satırdan oluşan alanlar eklemek
için kullanılır.
 Rows (satır) ve cols (sütun) tanımlamaları ile, metin
alanının kaç satır ve kaç sütundan oluşması gerektiği
belirlenir.
html
78
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Select (Açılır Menü)
 Forma açılır menü eklemek için kullanılır.
 Listbox(liste kutusu)
 drop-down list(aşağı açılır liste)
şeklinde iki farklı türde seçim kutusu oluşturulabilir.
 Liste elemanları, <option> etiketi ile belirlenir.
drop-down
list
html
listbox
79
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Select (Açılır Menü)
html
80
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Reset
 Üzerine gelip tıklandığı zaman, form içeriğini
temizleyip kullanıcının forma yeniden bilgi girişi
sağlayan bir düğme (buton) oluşturulmasını sağlar.
<input type=‘‘reset’’ value=‘‘Temizle’’ >
html
81
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
• Submit
 Form içine girilen bilgilerin sunucuya gönderilmesini
sağlamak için kullanılır.
<input type=‘‘submit’’ value=‘‘Gönder’’ >
html
82
hakanbabac.net
Şimdilik bu kadar…
web tasarımı ve programlamayla ilgili bir sonraki yayın
CSS
html
83
hakanbabac.net
İLETİŞİM
hakanbabac.net
iletisim@hakanbabac.net
html
84
Download