HTML

hakanbabac.net
HTML
Web Tasarımı ve Programlama

html
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
2

html
hakanbabac.net
INTERNET ORTAMI VE WEB TASARIMI
• Alan Adı (Domain)
3
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
 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

html
hakanbabac.net
INTERNET ORTAMI VE WEB TASARIMI
• Web Alanı / Barındırma (Hosting)
4
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 firmaları tarafından belirli
süreliğine sağlanır.
 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
hakanbabac.net
HTML TEMEL ETİKETLERİ
 HTML (Hypertext Markup Language), web sayfaları
hazırlamak için kullanılan bir işaretleme dilidir.
5
 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
hakanbabac.net
 HTML komutları “<” ve “>” işaretleri arasına yazılır.
<etiketadi>……</etiketadi>, <tag>…..</tag>
 HTML etiketleri yazılırken Türkçe karakterler
kullanılmamalıdır.
(ş, ç, ö, ü, ı, ğ)
 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 ! ! !
6

html
hakanbabac.net
 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.
7
 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
hakanbabac.net
• <html>
 HTML kodlarının yazımına başladığımızı gösteren
etikettir.
8
 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 hiçbir parametresi
yoktur.

html
hakanbabac.net
• <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 etiketleri
bölümüdür.
Kullanılacak Parametreler
9
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.

html
hakanbabac.net
• <head>
• NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi
bilgileri içerir.
<meta name="author" content=«aosbilisim">
<meta name="description« content="sayfanın tanımını
yazınız">
<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.">
10

html
hakanbabac.net
• <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 content="text/htm;
charset=windows-1254">
charset=iso-8859-9">
charset=utf-8">
11

html
hakanbabac.net
• <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.
12

html
hakanbabac.net
• <head>
• <title>: Sayfanın tarayıcıda görünecek başlığının ne
olacağını belirlemek için kullanılır.
13

html
hakanbabac.net
• <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.
14
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
Sayfada herhangi bir linke tıklandığı zaman oluşacak rengi
belirlemek için kullanılır.
vlink
Sayfada önceden ziyaret edilmiş linklerin rengini belirlemek
için kullanılır.

html
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.
15
1. Elma
2. Armut
3. Kavun

html
hakanbabac.net
• <ol>
 type parametresi kullanarak listenin rakamla mı
harfle mi başlayacağını belirleyebiliriz.
16
a
A. Elma
B. Armut
C. Kavun
a.
b.
c.
i
I. Elma
II. Armut
III. Kavun
i.
ii.
iii.

html
hakanbabac.net
• <ol>
 Sıralamanın her zaman “1” den veya “A” dan
başlamasının istenmediği durumlarda start
parametresi kullanılır.
17
C. Elma
D. Armut
E. Kavun

html
hakanbabac.net
• <ul>
 Madde imli liste oluşturmak için kullanılır.
 <ul> etiketi, <li> etiketi ile birlikte kullanılmalıdır.
18
• Elma
• Armut
• Kavun

html
hakanbabac.net
• <ul>
 type parametresi kullanarak madde iminin şeklini
belirleyebiliriz.
19
o Elma
• Armut
 Kavun

html
hakanbabac.net
• <li>
 Liste oluşturmak için liste elemanlarını belirtmede
kullanılan etikettir.
20
 Sıralamanın
hangi şekilde
olacağını
<ol> ve <ul>
etiketleri belirler.

html
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.
21

html
hakanbabac.net
• <hx>
• align
 Metin / Nesne hizalama için kullanılan parametredir.
left  sola
right  sağa
center  ortaya
justify  iki yana yasla
22

html
hakanbabac.net
• <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.
23
Boş zaman yoktur boşa geçen zaman vardır. Tagore

html
hakanbabac.net
• <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.
24

html
hakanbabac.net
• <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.
25

html
hakanbabac.net
• <br>
 Bir alt satıra geçmek için kullanılır.
 Bu etiket kapatılmaz!!!
26
Ey Türk Gençliği!
Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini,
ilelebet, muhafaza ve müdafaa etmektir.

html
hakanbabac.net
• <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.
27

html
hakanbabac.net
• <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
28
<font face="Algerian" size="7" color="purple">Merhaba</font>

html
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)
29
<hr size=“6” width=”200” align=“center”>

html
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.
• Sayfa Dışı Bağlantı
30
<a href=‘‘baglanti_adresi’’>metin_nesne</a>
<a href=‘‘http://www.aosbilisim.net’’>AOSBilişim</a>
AOSBilişim
<a href=‘‘index.html’’>Ana Sayfa</a>
Ana Sayfa

html
hakanbabac.net
• 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.
 Ardından bağlantı verilecek alana gelinip
<a href =#....">...</a> etiketi köprü tanımlanır.
31
<a name="ornek">Hyper Text Markup Language</a>
<a href="#ornek">Html Nedir?</a>
Html Nedir? Hyper Text Markup Language

html
hakanbabac.net
• E-Posta Adresine Bağlantı
 <a href=‘‘mailto:e-posta adresi”>….</a> komutu
kullanılarak
32
<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
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.
33

html
hakanbabac.net
• <tr>
 Tabloda satır oluşturmak için kullanılır.
34

html
hakanbabac.net
• <td>
 Tabloda sütun oluşturmak için kullanılır.
35

html
hakanbabac.net
• <table>
• border
 Hücrenin ve tablonun etrafındaki çerçevenin
kalınlığını ayarlamak için kullanılır.
 Border=0 olduğu zaman çerçeve tarayıcıda
görünmez.
36
0

html
hakanbabac.net
• <table>
• bordercolor
 Çerçevenin renginin ayarlamak için kullanılır.
37

html
hakanbabac.net
• <table>
• bgcolor
 Hücre/hücrelerin arkaplan renginin ayarlamak için
kullanılır.
38

html
hakanbabac.net
• <table>
• background
 Tablonun veya istenilen hücrenin arka plânına resim
eklemek için kullanılır.
39

html
hakanbabac.net
• <table>
• width
 Tablonun veya hücrenin pixel cinsinden genişliğini
• height
 Tablonun veya hücrenin pixel cinsinden yüksekliğini
40

html
hakanbabac.net
• <table>
• colspan
 Aynı satırdaki hücreleri birleştirmek için kullanılır.
41

html
hakanbabac.net
• <table>
• rowspan
 Aynı sütundaki hücreleri birleştirmek için kullanılır.
42

html
hakanbabac.net
• <table>
• cellspacing
 Hücrelerin, birbirlerinden ve tablo sınırlarından
uzaklığını pixel türünden ayarlamak için kullanılır.
43
10

html
hakanbabac.net
• <table>
• cellpadding
 Hücrelerin içindeki verilerin, hücre sınırlarından
uzaklığını belirlemek için kullanılır.
44
0
!!! Tabloda boş hücre kullanılacaksa td etiketi arasındaa   (boşluk)
kullanılmalıdır. Aksi takdirde çizgiler gözükmez !!!

html
hakanbabac.net
ÇOKLU ORTAM ARAÇLARI
45
• 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
hakanbabac.net
46
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ı
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.
• Resim Ekleme

html
hakanbabac.net
47
• Resim Ekleme

html
hakanbabac.net
48
• 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”>
Sayfa içine eklenecek
sesin kaynak adresi
Müziğin tekrar sayısı
infinite  sayfa
kapanana kadar tekrar
etmesini salar

html
hakanbabac.net
49
• 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
hakanbabac.net
50
• 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
hakanbabac.net
51
• 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
hakanbabac.net
52
• 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
hakanbabac.net
ÇERÇEVELER
53
Ç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
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.
54
Çerçevelerden oluşan bir
sayfanın normal bir HTML
belgesinden farkı; içeriğinde
<body> etiketi yerine,
<frameset> etiketini
kullanmasıdır.

html
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.
55
Çerçeve içlerinin kaynağını tanımlamak için kullanılır.

html
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.
56
Çerçeve içlerinin kaynağını
tanımlamak için kullanılır.

html
hakanbabac.net
ÇERÇEVELER
• <frame>
 <frameset> etiketi ile oluşturulan çerçevelerin içinde
gösterilecek sayfaların belirlenmesi için kullanılır.
57
PARAMETRE GÖREVİ
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
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.
58

html
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.
59
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
hakanbabac.net
ÇERÇEVELER
• <iframe>
60

html
hakanbabac.net
STİL ŞABLONLARI (CSS)
61
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
hakanbabac.net
62
• Yerel CSS

html
hakanbabac.net
63
• Genel CSS

html
hakanbabac.net
64
• Harici CSS
stil.css

html
hakanbabac.net
65
Stil Şablonları ile Çalışma (CSS),
bir sonraki modülde ayrıntılı olarak
anlatılacaktır.

html
hakanbabac.net
FORMLAR
66
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
hakanbabac.net
FORMLAR
• <form>
 Form oluşturmayı sağlayan tüm form elemanları,
<form>….</form> etiketleri arasında yer alır.
67
<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
hakanbabac.net
FORMLAR
• <form>
• method
68
Ayrıntılı bilgi için tıklayın…
http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx
GET POST

html
hakanbabac.net
FORMLAR
• <form>
• method
69
Ayrıntılı bilgi için tıklayın…
http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx
GET POST

html
hakanbabac.net
FORMLAR
70
• <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
hakanbabac.net
FORMLAR
71
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ı
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.
• <input>

html
hakanbabac.net
FORMLAR
72
• <input>

html
hakanbabac.net
FORM NESNELERİ (INPUT TÜRLERİ)
73
• Checkbox
 Forma onay kutuları eklemek için kullanılır.

html
hakanbabac.net
74
• 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 alacağı değerler Value
seçeneğinde belirlenir.

html
hakanbabac.net
75
• Radio

html
hakanbabac.net
76
• Text
 Forma, tek satırlık metin alanı eklemek için kullanılır.

html
hakanbabac.net
77
• Password
 Forma, şifreli alanlar eklemek için kullanılır.

html
hakanbabac.net
78
• 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
hakanbabac.net
79
• 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
listbox

html
hakanbabac.net
80
• Select (Açılır Menü)

html
hakanbabac.net
81
• 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
hakanbabac.net
82
• Submit
 Form içine girilen bilgilerin sunucuya gönderilmesini
sağlamak için kullanılır.
<input type=‘‘submit’’ value=‘‘Gönder’’ >

html
hakanbabac.net
Şimdilik bu kadar…
web tasarımı ve programlamayla ilgili bir sonraki yayın
C S S
83

html
hakanbabac.net
İ L E T İ Ş İ M
84
iletisim@hakanbabac.net
hakanbabac.net

HTML

Recommandé

Recommandé

Contenu connexe

Similaire à HTML

Similaire à HTML (20)

HTML