Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir?

Transkript

1 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page vii Ç NDEK LER KISIM I: HTML, XHTML, HTML5 1 TEMEL KAVRAMLAR 3 nternet Nedir? 3 HTML Nedir? 4 HTTP Nedir? 4 FTP Nedir? 5 WWW Nedir? 6 Web Taray c (Browser) Nedir? 6 Hangi Web Taray c s Daha yi? 6 URL Nedir? 7 HTML nin Yap s 7 HTML nin Çal flma Mant 7 HTML Sayfas n n Yap s 8 Web Tasar m Programlar 8 2 LK WEB SAYFAMIZ 11 What You See Is What You Get (WYSIWYG) 12 lk Sayfam z Olufltural m 12 Bir Web Sayfas na Ait Kodlar Görüntülemek 15 Sayfam za Bafll k Eklemek 16 Sayfam z n Arkaplan Rengini De ifltirmek 17 Sayfam z n Arkaplan na Resim Eklemek 18 Sayfadaki Yaz lar n Rengini De ifltirmek 19 Yaz lar Aras nda Alt Sat ra Geçmek 20 Yaz lar Aras nda Yatay Çizgi Çizmek 21 Çizgiyi fiekillendirmek 22 HTML Sayfalar için Doküman Tipi Belirlemek 24 Transitional DTD Tan mlamas 25 Strict DTD Tan mlamas 26 Frameset DTD Tan mlamas 26 3 MET NLER 27 <br/> Etiketi 27 <p/> Etiketi 30 <b></b> Etiketi 31

2 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page viii viii WEB TASARIM TEMELLER <i></i> Etiketi 32 <u></u> Etiketi 35 <s></s> Etiketi 36 <strong></strong> Etiketi 37 <em></em> Etiketi 38 &nbsp ile Boflluk Eklemek 39 <pre></pre> Etiketi 42 <h1>... <h6> Etiketleri 46 <blockquote></blockquote> Etiketleri 47 <font></font> Etiketleri 48 Face Özelli i 48 Size Özelli i 49 Color Özelli i 52 Font Özelliklerini Birlikte Kullanmak 53 <Basefont> Etiketi 54 Renkler ile Çal flmak 59 4 L NKLER LE ÇALIfiMA 63 <a></a> Etiketi 64 Href Özelli i 65 Bir Web Sayfas na Link Vermek 65 Di er Sayfalara Link Vermek 68 Index.html Sayfas 76 Hizmetler.html Sayfas 76 Urunler.html Sayfas 77 Referanslar.html Sayfas 77 Iletisim.html Sayfas 78 Sayfa çindeki Farkl Bölümlere Link Vermek 80 <a name> Özelli i 81 Mail Linki Vermek 87 Dosyalara Download Linki Vermek 88 Linklerde Target Özelli ini Kullanmak 92 Linklerde Title Özelli ini Kullanmak 93 Resimlere Link Vermek 94 Link Renklerini De ifltirmek 95

3 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page ix Ç NDEK LER ix 5 RES MLER LE ÇALIfiMAK 97 Web Sayfas na Resim Eklemek 98 SRC Özelli i 99 Resmin Boyutlar n Ayarlamak 100 ALT Özelli i 102 TITLE Özelli i 103 Resimleri Yatay Olarak Konumland rmak 104 Resimleri Dikey Olarak Konumland rmak 106 Resimlerde Border Özelli ini Kullanmak 108 Resimlerde Hspace, Vspace Özelliklerini Kullanmak 109 Sayfam z n Arkaplan na Resim Yerlefltirmek 111 Resimlere Link Vermek 112 Resim Galerisi Oluflturmak Ad m: Kategorileri Oluflturmak Ad m: Thumbnail (Önizleme) Resimler Oluflturmak Ad m: Kategori Linkleri Oluflturmak Ad m: Kategori Sayfalar na Küçük Resimleri Eklemek 116 Image Map Oluflturmak 119 <area> Etiketinin Özellikleri 122 Map Bilgilerini Ayr Bir Dosyada Tutmak L STELER LE ÇALIfiMAK 125 S ral Listeler (Ordered List) 126 Type Özelli i 127 Start Özelli i 130 S ras z Listeler (Unordered List) 131 Type Özelli i 132 Tan ml Listeler (Definition List) 134 ç çe Listeler Kullanmak (Nested Lists) 135 Listelerde Link Kullanmak TABLOLAR 139 Tablo Tan mlamak <table> 140 Tablo Çerçevesi Oluflturmak (border) 141 Sat r Belirtmek <tr> 142 Sütun Belirtmek <td> 143 Sütun Bafll klar Belirtmek <th> 144 Tablo çin Bafll k Oluflturmak <thead> 147

4 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page x x WEB TASARIM TEMELLER Sütunlar Birlefltirmek (Colspan) 148 Sat rlar Birlefltirmek (Rowspan) 149 Tablo Özellikleri 150 Border Özelli i 150 Width, Height Özellikleri 152 Bgcolor Özelli i 154 Background Özelli i 156 Cellpadding Özelli i 158 Cellspacing Özelli i 159 Align Özelli i 160 Valign Özelli i 161 ç çe Tablolar Kullanmak 162 Tablo Kullanarak Bir Web Sayfas Tasarlayal m 163 Banner 164 Menü 164 çerik 164 Footer FRAMELER 167 Frame Nedir? 167 Frame lerin Kullan ld Durumlar 168 Frame lerin Avantajlar 168 Frame lerin Dezavantajlar 169 Frameset Yap s 169 HTML ile Frameset Yap s n n Oluflturulmas 169 sayfa1.html 170 sayfa2.html 170 sayfa3.html 171 index.html 171 <frameset></frameset> Etiketi 173 Cols ve Rows Özellikleri 173 <frame> </frame> Etiketi 177 Frameset Özellikleri 183 Border Özelli i 183 Bordercolor Özelli i 184 <noframes> </noframes> Etiketi 185 Frame Özellikleri 186

5 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page xi Ç NDEK LER xi Noresize Özelli i 187 Scrolling Özelli i 188 Target=_top Özelli ini Kullanmak 189 ç çe Frameler Kullanmak 191 <iframe> </iframe> Etiketi FORMLAR 193 Formlar n Özellikleri 194 Formlar Nas l Çal fl r? 195 Formlar Hangi Elemanlar Bar nd r r? 195 Form Tasar m Yaparken Nelere Dikkat Edilmeli? 195 Form Tipleri Neler? 195 Formlarda Veri Girifli Nas l Kontrol Edilir? 195 Formlarda Onaylama Nas l Yap l r? 196 Method Özelli i 196 Action Özelli i 196 Form Elemanlar 197 Textbox Eleman 198 Size Özelli i 198 Maxlenght Özelli i 199 Value Özelli i 200 Password Eleman 201 TextArea Eleman 201 Cols ve Rows Özellikleri 202 Wrap Özelli i 204 Readonly Özelli i 206 CheckBox Eleman 207 Checked Özelli i 209 Radio Eleman 210 Checked Özelli i 215 Select Eleman 216 Selected Özelli i 217 Size Özelli i 217 <optgroup> Etiketi 219 Submit Eleman 220 Reset Eleman 221 FileUpload Eleman 221

6 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page xii xii WEB TASARIM TEMELLER 10 XHTML 225 HTML nin Eksik Yap s 225 XHTML Nedir? 226 XHTML Avantajlar 227 XHTML Kurallar 227 Bir HTML Sayfas n XHTML Format na Getirmek 235 XHTML Sayfas n Test Etmek 240 Validate by URI 241 Validate by File Upload 243 Validate by Direct Input HTML Yeni Nesil HTML! 247 HTML5 Browser Deste i 248 HTML5 ile Gelen Yeni Elementler 249 HTML5 te Kald r lan Elementler 249 HTML5 için DTD Tan mlamas 250 Yeni Mant ksal Elementler 250 <canvas> Elementi 251 <video> Elementi 252 Controls Özelli i 253 Yeni Form Elemanlar 254 KISIM II: DREAMWEAVER 12 DREAMWEAVER A G R fi LK WEB SAYFAMIZ 263 Bofl Bir Sayfa Oluflturmak 265 Web Sayfam z Kaydetmek 268 Web Sayfas n Görüntülemek 270 Dreamweaver Preview Özelli i 272 Tasar m veya Kod Görünümünde Çal flmak 274 Live View Özelli ini Kullanmak 276 Haz r fiablonlarla Çal flmak 277 Sayfa Bafll Belirlemek 282 Sayfadaki Söz Dizim Hatalar n Bulmak 284 Var Olan Bir Web Sitesini Açmak 285 Web Sayfam z fiablon Haline Getirmek 287

7 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page xiii Ç NDEK LER xiii 14 MET NLER LE ÇALIfiMAK 289 Properties Penceresi 289 Bafll k Oluflturmak 292 Metni Hizalamak 294 Yaz Girintisini Artt rmak 296 Listeler Oluflturmak 297 Özel Karakterler Eklemek 298 Yaz Tipini De ifltirmek 301 Yaz Büyüklü ünü De ifltirmek 303 Yaz Rengini De ifltirmek 304 Bütün Sayfaya Ayn Format Uygulamak 305 Yaz lar Kal n veya talik Yapmak RES MLER LE ÇALIfiMAK 309 Web Sayfas na Resim Eklemek 309 Resim Formatlar 311 Resimleri Boyutland rmak 312 Alternatif Yaz Belirlemek 314 Resmin Etraf ndaki Yaz lar Hizalamak 317 Resimlere Çerçeve Eklemek 319 Resmin Etraf nda Boflluk Oluflturmak 320 Arkaplan Resmi Ayarlamak 321 ImageMap Özelli ini Kullanmak 326 Resimlere Link Vermek 331 Rollover Resimler Oluflturmak L NKLER LE ÇALIfiMAK 337 Baflka Bir Siteye Link Vermek 338 Link Özelliklerini Görmek 339 Target Özelli ini Ayarlamak 340 Resimlere Link Vermek 341 Web Sitemizdeki Bir Sayfaya Link Vermek 342 Kategori.html Sayfas 343 Download.html Sayfas 343 letisim.html sayfas 343 Sayfam zdaki Dosyalara Link Vermek 346 Mail Linki Oluflturmak 348

8 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page xiv xiv WEB TASARIM TEMELLER 17 TABLOLAR LE ÇALIfiMAK 351 Sayfaya Tablo Eklemek 352 Tablo Özellikleri 354 Tablonun Geniflli ini Ayarlamak 355 Hücreleri Boyutland rmak 357 Hücreleri Birlefltirmek 358 Hücrenin Arkaplan Rengini De ifltirmek 359 Hücreler çine Veri Girmek 360 Tablo Çerçevesini Ayarlamak 363 CellPad ve CellSpace Özellikleri 364 Hücre çindeki Verileri Hizalamak 367 Tabloya Yeni Bir Sat r Eklemek 368 Tablodan Sat r Silmek DREAMWEAVER LE FORM TASARLAMAK 371 KISIM III: CSS 19 CSS G R fi 385 CSS Söz Dizimi 386 Aç klama Sat rlar 386 ID ve CLASS Selector 386 ID Selector 386 CLASS Selector 387 CSS Nas l Uygulan r? 387 External CSS 387 Internal CSS 388 Inline CS CSS TEMEL filemler 391 Background fllemleri 391 Color Özelli i 391 Background-color Özelli i 392 Background-image Özelli i 393 Background-repeat Özelli i 394 Background-attachment Özelli i 394 Background-position Özelli i 395 Background Özelli i 396 Font fllemleri 397

9 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page xv Ç NDEK LER xv Font-family Özelli i 397 Font-style Özelli i 398 Font-weight Özelli i 399 Font-size Özelli i 399 Text fllemleri 400 Text-indent Özelli i 400 Text-align Özelli i 401 Text-decoration Özelli i 402 Letter-spacing Özelli i 402 Text-transform Özelli i 403 Link fllemleri 403 KISIM IV: JAVASCRIPT 21 JAVASCRIPT G R fi 407 Web Tasar mda 3 Katman Mimarisi 407 Katmanlar n S ralanmas 408 JavaScript Nedir? 410 Java ile Javascript Ayn fiey midir? 411 JavaScript in Avantajlar 411 Script Nas l Çal fl r? TEMEL YAPILAR, DE fikenler VE OPERATÖRLER 415 Sayfada JavaScript Kullanmak 415 Sayfaya JavaScript Yerlefltirmek 417 Head Bölümünde JavaScript Kullanmak 417 Body Bölümünde JavaScript Kullanmak 418 External Olarak JavaScript Kullanmak 419 Mesaj.js Dosyas 419 HTML Dosyas 419 JavaScript Kod Yap s 422 Sayfaya Yaz Yazd rma 422 Aç klama Sat rlar 425 Tek Sat rl k Aç klama Sat r 425 Birden Fazla Sat rl k Aç klama Sat r 425 De iflkenler 427 De iflken Tan mlama Kurallar 428 Operatörler 432

10 ++WEB TEKNOLOJI-icindekiler 5/12/11 11:49 PM Page xvi xvi WEB TASARIM TEMELLER Aritmetiksel Operatörler 432 Atama Operatörleri Operatörü 435 Karfl laflt rma Operatörleri 437 Mant ksal Operatörler KOfiUL YAPILARI 441 If Koflul Yap s 441 If-Else Koflul Yap s 443 If-Else If-Else Koflul Yap s 445 Switch Koflul Yap s DÖNGÜLER 453 Döngülerin Avantajlar 454 Döngülerin Dezavantajlar 454 For Döngüsü 454 Break Komutu 465 Continue Komutu 467 For.. in.. Döngüsü 467 While Döngüsü FONKS YONLAR 473 Fonksiyonlar Ça rmak 473 Birden Fazla Fonksiyon Ça rma 475 Fonksiyonlarda Parametre Kullan m LET fi M PENCERELER (POPUP BOXES) 481 Alert Box 481 Confirm Box 483 Prompt Box 485 Varsay lan Yaz Belirlemek 486