++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page vii
‹Ç‹NDEK‹LER
KISIM I: HTML, XHTML, HTML5
1 TEMEL KAVRAMLAR
‹nternet Nedir?
HTML Nedir?
HTTP Nedir?
FTP Nedir?
WWW Nedir?
Web Taray›c› (Browser) Nedir?
Hangi Web Taray›c›s› Daha ‹yi?
URL Nedir?
HTML’nin Yap›s›
HTML’nin Çal›flma Mant›¤›
HTML Sayfas›n›n Yap›s›
Web Tasar›m Programlar›
3
3
4
4
5
6
6
6
7
7
7
8
8
2 ‹LK WEB SAYFAMIZ
What You See Is What You Get (WYSIWYG)
‹lk Sayfam›z› Olufltural›m
Bir Web Sayfas›na Ait Kodlar› Görüntülemek
Sayfam›za Bafll›k Eklemek
Sayfam›z›n Arkaplan Rengini De¤ifltirmek
Sayfam›z›n Arkaplan›na Resim Eklemek
Sayfadaki Yaz›lar›n Rengini De¤ifltirmek
Yaz›lar Aras›nda Alt Sat›ra Geçmek
Yaz›lar Aras›nda Yatay Çizgi Çizmek
Çizgiyi fiekillendirmek
HTML Sayfalar› için Doküman Tipi Belirlemek
Transitional DTD Tan›mlamas›
Strict DTD Tan›mlamas›
Frameset DTD Tan›mlamas›
11
12
12
15
16
17
18
19
20
21
22
24
25
26
26
3 MET‹NLER
<br/> Etiketi
<p/> Etiketi
<b></b> Etiketi
27
27
30
31
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page viii
viii WEB TASARIM TEMELLER‹
<i></i> Etiketi
<u></u> Etiketi
<s></s> Etiketi
<strong></strong> Etiketi
<em></em> Etiketi
&nbsp ile Boflluk Eklemek
<pre></pre> Etiketi
<h1>... <h6> Etiketleri
<blockquote></blockquote> Etiketleri
<font></font> Etiketleri
Face Özelli¤i
Size Özelli¤i
Color Özelli¤i
Font Özelliklerini Birlikte Kullanmak
<Basefont> Etiketi
Renkler ile Çal›flmak
4 L‹NKLER ‹LE ÇALIfiMA
<a></a> Etiketi
Href Özelli¤i
Bir Web Sayfas›na Link Vermek
Di¤er Sayfalara Link Vermek
Index.html Sayfas›
Hizmetler.html Sayfas›
Urunler.html Sayfas›
Referanslar.html Sayfas›
Iletisim.html Sayfas›
Sayfa ‹çindeki Farkl› Bölümlere Link Vermek
<a name> Özelli¤i
Mail Linki Vermek
Dosyalara Download Linki Vermek
Linklerde Target Özelli¤ini Kullanmak
Linklerde Title Özelli¤ini Kullanmak
Resimlere Link Vermek
Link Renklerini De¤ifltirmek
32
35
36
37
38
39
42
46
47
48
48
49
52
53
54
59
63
64
65
65
68
76
76
77
77
78
80
81
87
88
92
93
94
95
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page ix
‹Ç‹NDEK‹LER ix
5 RES‹MLER ‹LE ÇALIfiMAK
Web Sayfas›na Resim Eklemek
SRC Özelli¤i
Resmin Boyutlar›n› Ayarlamak
ALT Özelli¤i
TITLE Özelli¤i
Resimleri Yatay Olarak Konumland›rmak
Resimleri Dikey Olarak Konumland›rmak
Resimlerde Border Özelli¤ini Kullanmak
Resimlerde Hspace, Vspace Özelliklerini Kullanmak
Sayfam›z›n Arkaplan›na Resim Yerlefltirmek
Resimlere Link Vermek
Resim Galerisi Oluflturmak
1. Ad›m: Kategorileri Oluflturmak
2. Ad›m: Thumbnail (Önizleme) Resimler Oluflturmak
3. Ad›m: Kategori Linkleri Oluflturmak
4. Ad›m: Kategori Sayfalar›na Küçük Resimleri Eklemek
Image Map Oluflturmak
<area> Etiketinin Özellikleri
Map Bilgilerini Ayr› Bir Dosyada Tutmak
97
98
99
100
102
103
104
106
108
109
111
112
113
114
114
115
116
119
122
123
6 L‹STELER ‹LE ÇALIfiMAK
S›ral› Listeler (Ordered List)
Type Özelli¤i
Start Özelli¤i
S›ras›z Listeler (Unordered List)
Type Özelli¤i
Tan›ml› Listeler (Definition List)
‹ç ‹çe Listeler Kullanmak (Nested Lists)
Listelerde Link Kullanmak
125
126
127
130
131
132
134
135
136
7 TABLOLAR
Tablo Tan›mlamak <table>
Tablo Çerçevesi Oluflturmak (border)
Sat›r Belirtmek <tr>
Sütun Belirtmek <td>
Sütun Bafll›klar› Belirtmek <th>
Tablo ‹çin Bafll›k Oluflturmak <thead>
139
140
141
142
143
144
147
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page x
x WEB TASARIM TEMELLER‹
Sütunlar› Birlefltirmek (Colspan)
Sat›rlar› Birlefltirmek (Rowspan)
Tablo Özellikleri
Border Özelli¤i
Width, Height Özellikleri
Bgcolor Özelli¤i
Background Özelli¤i
Cellpadding Özelli¤i
Cellspacing Özelli¤i
Align Özelli¤i
Valign Özelli¤i
‹ç ‹çe Tablolar Kullanmak
Tablo Kullanarak Bir Web Sayfas› Tasarlayal›m
Banner
Menü
‹çerik
Footer
8 FRAMELER
Frame Nedir?
Frame’lerin Kullan›ld›¤› Durumlar
Frame’lerin Avantajlar›
Frame’lerin Dezavantajlar›
Frameset Yap›s›
HTML ile Frameset Yap›s›n›n Oluflturulmas›
sayfa1.html
sayfa2.html
sayfa3.html
index.html
<frameset></frameset> Etiketi
Cols ve Rows Özellikleri
<frame> </frame> Etiketi
Frameset Özellikleri
Border Özelli¤i
Bordercolor Özelli¤i
<noframes> </noframes> Etiketi
Frame Özellikleri
148
149
150
150
152
154
156
158
159
160
161
162
163
164
164
164
164
167
167
168
168
169
169
169
170
170
171
171
173
173
177
183
183
184
185
186
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page xi
‹Ç‹NDEK‹LER xi
Noresize Özelli¤i
Scrolling Özelli¤i
Target=_top Özelli¤ini Kullanmak
‹ç ‹çe Frameler Kullanmak
<iframe> </iframe> Etiketi
9 FORMLAR
Formlar›n Özellikleri
Formlar Nas›l Çal›fl›r?
Formlar Hangi Elemanlar› Bar›nd›r›r?
Form Tasar›m› Yaparken Nelere Dikkat Edilmeli?
Form Tipleri Neler?
Formlarda Veri Girifli Nas›l Kontrol Edilir?
Formlarda Onaylama Nas›l Yap›l›r?
Method Özelli¤i
Action Özelli¤i
Form Elemanlar›
Textbox Eleman›
Size Özelli¤i
Maxlenght Özelli¤i
Value Özelli¤i
Password Eleman›
TextArea Eleman›
Cols ve Rows Özellikleri
Wrap Özelli¤i
Readonly Özelli¤i
CheckBox Eleman›
Checked Özelli¤i
Radio Eleman›
Checked Özelli¤i
Select Eleman›
Selected Özelli¤i
Size Özelli¤i
<optgroup> Etiketi
Submit Eleman›
Reset Eleman›
FileUpload Eleman›
187
188
189
191
192
193
194
195
195
195
195
195
196
196
196
197
198
198
199
200
201
201
202
204
206
207
209
210
215
216
217
217
219
220
221
221
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page xii
xii WEB TASARIM TEMELLER‹
10 XHTML
HTML’nin Eksik Yap›s›
XHTML Nedir?
XHTML Avantajlar›
XHTML Kurallar›
Bir HTML Sayfas›n› XHTML Format›na Getirmek
XHTML Sayfas›n› Test Etmek
Validate by URI
Validate by File Upload
Validate by Direct Input
225
225
226
227
227
235
240
241
243
244
11 HTML 5
Yeni Nesil HTML!
HTML5 Browser Deste¤i
HTML5 ile Gelen Yeni Elementler
HTML5’te Kald›r›lan Elementler
HTML5 için DTD Tan›mlamas›
Yeni Mant›ksal Elementler
<canvas> Elementi
<video> Elementi
Controls Özelli¤i
Yeni Form Elemanlar›
247
247
248
249
249
250
250
251
252
253
254
KISIM II: DREAMWEAVER
12 DREAMWEAVER’A G‹R‹fi
257
13 ‹LK WEB SAYFAMIZ
Bofl Bir Sayfa Oluflturmak
Web Sayfam›z› Kaydetmek
Web Sayfas›n› Görüntülemek
Dreamweaver Preview Özelli¤i
Tasar›m veya Kod Görünümünde Çal›flmak
Live View Özelli¤ini Kullanmak
Haz›r fiablonlarla Çal›flmak
Sayfa Bafll›¤› Belirlemek
Sayfadaki Söz Dizim Hatalar›n› Bulmak
Var Olan Bir Web Sitesini Açmak
Web Sayfam›z› fiablon Haline Getirmek
263
265
268
270
272
274
276
277
282
284
285
287
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page xiii
‹Ç‹NDEK‹LER xiii
14 MET‹NLER ‹LE ÇALIfiMAK
Properties Penceresi
Bafll›k Oluflturmak
Metni Hizalamak
Yaz› Girintisini Artt›rmak
Listeler Oluflturmak
Özel Karakterler Eklemek
Yaz› Tipini De¤ifltirmek
Yaz› Büyüklü¤ünü De¤ifltirmek
Yaz› Rengini De¤ifltirmek
Bütün Sayfaya Ayn› Format› Uygulamak
Yaz›lar› Kal›n veya ‹talik Yapmak
289
289
292
294
296
297
298
301
303
304
305
307
15 RES‹MLER ‹LE ÇALIfiMAK
Web Sayfas›na Resim Eklemek
Resim Formatlar›
Resimleri Boyutland›rmak
Alternatif Yaz› Belirlemek
Resmin Etraf›ndaki Yaz›lar› Hizalamak
Resimlere Çerçeve Eklemek
Resmin Etraf›nda Boflluk Oluflturmak
Arkaplan Resmi Ayarlamak
ImageMap Özelli¤ini Kullanmak
Resimlere Link Vermek
Rollover Resimler Oluflturmak
309
309
311
312
314
317
319
320
321
326
331
332
16 L‹NKLER ‹LE ÇALIfiMAK
Baflka Bir Siteye Link Vermek
Link Özelliklerini Görmek
Target Özelli¤ini Ayarlamak
Resimlere Link Vermek
Web Sitemizdeki Bir Sayfaya Link Vermek
Kategori.html Sayfas›
Download.html Sayfas›
‹letisim.html sayfas›
Sayfam›zdaki Dosyalara Link Vermek
Mail Linki Oluflturmak
337
338
339
340
341
342
343
343
343
346
348
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page xiv
xiv WEB TASARIM TEMELLER‹
17 TABLOLAR ‹LE ÇALIfiMAK
Sayfaya Tablo Eklemek
Tablo Özellikleri
Tablonun Geniflli¤ini Ayarlamak
Hücreleri Boyutland›rmak
Hücreleri Birlefltirmek
Hücrenin Arkaplan Rengini De¤ifltirmek
Hücreler ‹çine Veri Girmek
Tablo Çerçevesini Ayarlamak
CellPad ve CellSpace Özellikleri
Hücre ‹çindeki Verileri Hizalamak
Tabloya Yeni Bir Sat›r Eklemek
Tablodan Sat›r Silmek
351
352
354
355
357
358
359
360
363
364
367
368
369
18 DREAMWEAVER ‹LE FORM TASARLAMAK
371
KISIM III: CSS
19 CSS G‹R‹fi
CSS Söz Dizimi
Aç›klama Sat›rlar›
ID ve CLASS Selector
ID Selector
CLASS Selector
CSS Nas›l Uygulan›r?
External CSS
Internal CSS
Inline CS
385
386
386
386
386
387
387
387
388
389
20 CSS TEMEL ‹fiLEMLER
Background ‹fllemleri
Color Özelli¤i
Background-color Özelli¤i
Background-image Özelli¤i
Background-repeat Özelli¤i
Background-attachment Özelli¤i
Background-position Özelli¤i
Background Özelli¤i
Font ‹fllemleri
391
391
391
392
393
394
394
395
396
397
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page xv
‹Ç‹NDEK‹LER xv
Font-family Özelli¤i
Font-style Özelli¤i
Font-weight Özelli¤i
Font-size Özelli¤i
Text ‹fllemleri
Text-indent Özelli¤i
Text-align Özelli¤i
Text-decoration Özelli¤i
Letter-spacing Özelli¤i
Text-transform Özelli¤i
Link ‹fllemleri
397
398
399
399
400
400
401
402
402
403
403
KISIM IV: JAVASCRIPT
21 JAVASCRIPT G‹R‹fi
Web Tasar›mda 3 Katman Mimarisi
Katmanlar›n S›ralanmas›
JavaScript Nedir?
Java ile Javascript Ayn› fiey midir?
JavaScript’in Avantajlar›
Script Nas›l Çal›fl›r?
407
407
408
410
411
411
411
22 TEMEL YAPILAR, DE⁄‹fiKENLER VE OPERATÖRLER
Sayfada JavaScript Kullanmak
Sayfaya JavaScript Yerlefltirmek
Head Bölümünde JavaScript Kullanmak
Body Bölümünde JavaScript Kullanmak
External Olarak JavaScript Kullanmak
Mesaj.js Dosyas›
HTML Dosyas›
JavaScript Kod Yap›s›
Sayfaya Yaz› Yazd›rma
Aç›klama Sat›rlar›
Tek Sat›rl›k Aç›klama Sat›r›
Birden Fazla Sat›rl›k Aç›klama Sat›r›
De¤iflkenler
De¤iflken Tan›mlama Kurallar›
Operatörler
415
415
417
417
418
419
419
419
422
422
425
425
425
427
428
432
++WEB TEKNOLOJI-icindekiler
5/12/11
11:49 PM
Page xvi
xvi WEB TASARIM TEMELLER‹
Aritmetiksel Operatörler
Atama Operatörleri
+ Operatörü
Karfl›laflt›rma Operatörleri
Mant›ksal Operatörler
432
435
435
437
438
23 KOfiUL YAPILARI
If Koflul Yap›s›
If-Else Koflul Yap›s›
If-Else If-Else Koflul Yap›s›
Switch Koflul Yap›s›
441
441
443
445
450
24 DÖNGÜLER
Döngülerin Avantajlar›
Döngülerin Dezavantajlar›
For Döngüsü
Break Komutu
Continue Komutu
For.. in.. Döngüsü
While Döngüsü
453
454
454
454
465
467
467
468
25 FONKS‹YONLAR
Fonksiyonlar› Ça¤›rmak
Birden Fazla Fonksiyon Ça¤›rma
Fonksiyonlarda Parametre Kullan›m›
473
473
475
476
26 ‹LET‹fi‹M PENCERELER‹ (POPUP BOXES)
Alert Box
Confirm Box
Prompt Box
Varsay›lan Yaz› Belirlemek
481
481
483
485
486
Download

KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 ‹nternet