06_webtasarim

8/18/2019 06_Webtasarim

1/213


2/213

Ġçindekiler

Html Nedir? ............................................................................................................................................. 9Bölüm 1: Hedefler ............................................................................................................................. 10

HTML’in Tarihçesi? ............................................................................................................................ 10

Bölüm 1: Sorular ................................................................................................................................ 11

Html Sayfa Yapısı ................................................................................................................................... 12

Bölüm 2: Hedefler ............................................................................................................................. 13

HTML’e Giriş ...................................................................................................................................... 13

............................................................................................................................. 13

............................................................................................................................ 13

................................................................................................................................ 13

............................................................................................................................ 14

............................................................................................................................ 15

Bölüm 2: Sorular ................................................................................................................................ 16

Html Metin Etiketleri ............................................................................................................................. 17

Bölüm 3: Hedefler ............................................................................................................................. 18

Html Metin Etiketlerini Kullanmak .................................................................................................... 18

Paragraf Oluşturmak ...................................................................................................... 18

Başlık Oluşturmak ...................................................................................................... 18

Kalın Yazı Biçimi .............................................................................................................. 19

İtalik Yazı Biçimi ................................................................................................................ 19

Üst Simge Oluşturma .............................................................................................. 20

Alt Simge Oluşturma ................................................................................................ 20

Tek Aralıklı Yazı Tipi Oluşturmak ................................................................................... 20

Satır Başı .............................................................................................................................. 21

Önceden Biçimlendirme .......................................................................................... 21

Bölüm 3: Sorular ................................................................................................................................ 23

Listeleme etiketleri ................................................................................................................................ 24

Bölüm 4: Hedefler ............................................................................................................................. 25

HTML Listeleme Etiketlerini Kullanmak ............................................................................................. 25

Listeleme ........................................................................................................................ 25 Numaralı Liste (Ordered List) ....................................................................................... 25

http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739783http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739787http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739787http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739796http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739809http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739809http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739796http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739787http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739783


3/213


4/213

Metinlerde Style Kullanmak .............................................................................................................. 55

Yazı Tipi Grubu Oluşturmak ( font-family ) .................................................................................... 55

Yazı Tipi Boyutunu Belirlemek ....................................................................................................... 56

Yazı Rengini Belirlemek ................................................................................................................. 57

Kalın Yazı Tipi Uygulamak .............................................................................................................. 57

İtalik Yazı Tipi Uygulamak .............................................................................................................. 58

Üst Çizgi ve Alt Çizgi ( Text-decoration ) ........................................................................................ 58

Harfler Arası Boşlukları Ayarlamak ................................................................................................ 58

Bölüm 8: Sorular ................................................................................................................................ 60

Paragrafları Biçimlendirmek .................................................................................................................. 61

Bölüm 9: Hedefler ............................................................................................................................. 62

Paragraflarda Style Kullanmak .......................................................................................................... 62

Paragrafların Girintisini Ayarlamak ............................................................................................... 62

Bir Paragrafa Kenarlık Uygulamak ( Border-Style ) ....................................................................... 64

Tüm Kenarlık Özelliklerini Ayarlamak ............................................................................................ 64

Bölüm 9: Sorular ................................................................................................................................ 66

Resimleri G örüntülemek ....................................................................................................................... 67

Bölüm 10: Hedefler ........................................................................................................................... 68

HTML’de Resim Kullanımı .................................................................................................................. 68Resim Biçimleri .............................................................................................................................. 68

Resimleri Web Kullanımı için Hazırlamak ...................................................................................... 68

Resim Eklemek............................................................................................................................... 68

Resmin Boyutlarını Belirlemek ...................................................................................................... 69

Resimlerden Köprü (Bağlantı) Oluşturmak .................................................................................... 70

Resimlere Açıklayıcı Metinler Oluşturmak .................................................................................... 70

Bölüm 10: Sorular .............................................................................................................................. 71Tablo Oluşturma .................................................................................................................................... 72

Bölüm 11: Hedefler ........................................................................................................................... 73

HTML’de Tablo Oluşturma ................................................................................................................ 73

Basit Bir Tablo Oluşturmak ............................................................................................................ 73

Border ............................................................................................................................................ 73

Border Color .................................................................................................................................. 74

Cellspacing ..................................................................................................................................... 74

Cellpadding .................................................................................................................................... 74

http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739857http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739857http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739864http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739864http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739864http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739874http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739874http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739874http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739874http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739864http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739857


5/213

Width / Height ............................................................................................................................... 75

Colspan .......................................................................................................................................... 76

Rowspan ........................................................................................................................................ 76

Bölüm 11: Sorular .............................................................................................................................. 78

Form Oluşturma .................................................................................................................................... 79

Bölüm 12: Hedefler ........................................................................................................................... 80

HTML’de Form Oluşturmak ............................................................................................................... 80

Temel Form Alanı Oluşturma ........................................................................................................ 80

Standart Metin Kutusu Oluşturma ................................................................................................ 81

Name ......................................................................................................................................... 81

Size ............................................................................................................................................. 81

Value .......................................................................................................................................... 82

Çok Satırlı Metin Alanı Oluşturma ................................................................................................. 82

Row ............................................................................................................................................ 82

Columns (cols) ........................................................................................................................... 83

Onayla Butonu Oluşturma ( Submit ) ............................................................................................ 83

Temizle Butonu Oluşturma ( Reset ) ............................................................................................. 84

Checkbox (Onay Kutusu) ............................................................................................................... 85

Value .......................................................................................................................................... 85Checked ..................................................................................................................................... 85

Radio Düğmeleri ( Seçenek Düğmeleri ) ........................................................................................ 85

Value .......................................................................................................................................... 86

Not : ........................................................................................................................................... 86

Name ......................................................................................................................................... 86

Açılır Liste( Combo box ) ............................................................................................................... 87

Selected ..................................................................................................................................... 88

Size ............................................................................................................................................. 88

Optgroup label ............................................................................................................................... 89

Bölüm 12: Sorular .............................................................................................................................. 90

Bölüm Düzeni Oluşturma ...................................................................................................................... 91

Bölüm 13: Hedefler ........................................................................................................................... 92

HTML’de Bölüm Düzeni ..................................................................................................................... 92

Id .................................................................................................................................................... 92

Float ............................................................................................................................................... 93

http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739886http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739886http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739911http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739911http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739911http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739886


6/213

Position .......................................................................................................................................... 94

Bölümleri Biçimlendirmek ............................................................................................................. 95

Bölüm 13: Sorular .............................................................................................................................. 97

Kayan Yazı .............................................................................................................................................. 98

Bölüm 14: Hedefler ........................................................................................................................... 99

Kayan Yazı Oluşturma ........................................................................................................................ 99

Direction ........................................................................................................................................ 99

Scrollamount ................................................................................................................................. 99

Scrolldelay ..................................................................................................................................... 99

Behavior ........................................................................................................................................ 99

Loop ............................................................................................................................................. 100

Hspace ......................................................................................................................................... 100

Width ........................................................................................................................................... 100

Height .......................................................................................................................................... 100

Onmouseover .............................................................................................................................. 100

Onmouseout ................................................................................................................................ 100

Bölüm 14: Sorular ............................................................................................................................ 102

Dreamweaver CS6 Çalışma Alanı ve Paneller ...................................................................................... 103

Bölüm 15: Hedefler ......................................................................................................................... 104Çalışma Alanını Düzenlemek ........................................................................................................... 104

Karşılama Ekranı .......................................................................................................................... 105

İnsert Pan elini Kullanmak ............................................................................................................ 106

Properties Paneli ......................................................................................................................... 107

Çalışma Penceresi Araç Çubuğunu Kullanmak ............................................................................ 108

Çalışma Penceresinin Özellikleri .................................................................................................. 109

Panelleri Kullanmak ..................................................................................................................... 110

Kişisel Çalışma Alanı Oluşturmak ................................................................................................. 110

Bölüm 15: Sorular ............................................................................................................................ 112

Web Sitesi Yönetimi ............................................................................................................................ 113

Bölüm 16: Hedefler ......................................................................................................................... 114

Yeni Bir Site Oluşturmak .................................................................................................................. 114

Siteye Yeni Bir Klasör Eklemek .................................................................................................... 117

Siteye Yeni Bir Sayfa Eklemek ...................................................................................................... 117

Yeni Açılan Sayfanın Kaydedilmesi .............................................................................................. 120



7/213


8/213

Oluşturulan CSS’in Uygulanması ................................................................................................. 150

Örnek Stil Dosyalarını Kullanmak ................................................................................................ 150

Bölüm 18: Sorular ............................................................................................................................ 151

Web Sayfasına Açılabilir Menü Ekleme ............................................................................................... 152

Bölüm 19: Hedefler ......................................................................................................................... 153

Açılabilir Menü Eklemek .................................................................................................................. 153

Bölüm 19: Sorular ............................................................................................................................ 155

Web Sayfasına Rollover Nesne Ekleme ............................................................................................... 156

Bölüm 20: Hedefler ......................................................................................................................... 157

Rollover Görüntü Oluşturmak ......................................................................................................... 157

Bölüm 20: Sorular ............................................................................................................................ 159

Web Sayfasına Sekmeli Panel Ekleme ................................................................................................. 160

Bölüm 21: Hedefler ......................................................................................................................... 161

Sekmeli Panel Oluşturmak ............................................................................................................... 161

Bölüm 21: Sorular ............................................................................................................................ 163

Web Sayfasına Akordeon Panel Ekleme .............................................................................................. 164

Bölüm 22: Hedefler ......................................................................................................................... 165

Akordeon Panel Oluşturmak ........................................................................................................... 165

Bölüm 22: Sorular ............................................................................................................................ 168Web Sayfasına Canlı Katlanabilir Panel Ekleme .................................................................................. 169

Bölüm 23: Hedefler ......................................................................................................................... 170

Katlanabilir Panel Oluşturmak ......................................................................................................... 170

Bölüm 23: Sorular ............................................................................................................................ 172

Web Sayfasına Flash Nesneleri Ekleme ............................................................................................... 173

Bölüm 24: Hedefler ......................................................................................................................... 174

Flash Nesneleri Ekleme .................................................................................................................... 174

Flash Filmleri Eklemek ................................................................................................................. 174

Flash Video Eklemek .................................................................................................................... 176

Shockwave Filmi Eklemek ............................................................................................................ 177

Bölüm 24: Sorular ............................................................................................................................ 178

Dreamweaver CS6’da Dinamik Nesne Oluşturmak ............................................................................. 179

Bölüm 25: Hedefler ......................................................................................................................... 180

Dinamik Nesne Oluşturmak ............................................................................................................. 180

Bölüm 25: Sorular ............................................................................................................................ 183

http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739987http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739987http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739991http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739991http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739995http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739995http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739999http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739999http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740003http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740003http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740007http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740007http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740014http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740014http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740014http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740007http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344740003http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739999http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739995http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739991http://int2bdbegtsvr/ortak/Kitap%20%C3%87al%C4%B1%C5%9Fmalar%C4%B1/10.09.2012/06_Web%20tasar%C4%B1m.docx%23_Toc344739987


9/213

Dreamweaver CS6’da Şablon Hazırlamak ........................................................................................... 184

Bölüm 26: Hedefler ......................................................................................................................... 185

Şablon Hazırlamak ........................................................................................................................... 185

Şablon Yapmak ( Make Template ) .............................................................................................. 185

Sayfaya Template Eklemek .......................................................................................................... 186

Editable Region (Düzenlenebilir Alan) ......................................................................................... 187

Bölüm 26: Sorular ............................................................................................................................ 190

Dreamweaver CS6’da Form Kullanmak ............................................................................................... 191

Bölüm 27: Hedefler ......................................................................................................................... 192

Formlar İle Çalışmak ........................................................................................................................ 192

Sayfaya Form Alanı Eklemek........................................................................................................ 192

Sayfaya Metin Kutusu (Text Field) Eklemek ................................................................................ 192

Sayfaya Açılabilir Liste (List / Menu) Eklemek ............................................................................. 194

Sayfaya Kontrol Kutusu (CheckBox) Eklemek .............................................................................. 195

Sayfaya Radyo Düğmesi (RadioButton) Eklemek ........................................................................ 195

Sayfaya Radyo Grupları (RadioGroup) Eklemek .......................................................................... 196

Sayfaya Dosya Kutusu (File Field) Eklemek ................................................................................. 196

Sayfaya Düğme (Button) Eklemek ............................................................................................... 197

Sayfaya Sıçrama Menüsü (Jump Menu) Eklemek ........................................................................ 197Sayfaya Görüntü Nesnesi (Image Field) Eklemek ........................................................................ 198

Sayfaya Gizli Kutu (Hidden Field) Eklemek .................................................................................. 199

Sayfaya Canlı Doğrulamalı Metin Kutusu (Spry Validation Text Field) Eklemek ......................... 199

Sayfaya Canlı Doğrulamalı Metin Alanı (Spry Validation Textarea) Eklemek .............................. 200

Bölüm 27: Sorular ............................................................................................................................ 202

Web Albüm .......................................................................................................................................... 204

Bölüm 28: Hedefler ......................................................................................................................... 205

Web Albüm Oluşturmak .................................................................................................................. 205

Bölüm 28: Sorular ............................................................................................................................ 210

CEVAP ANAHTARI ............................................................................................................................ 211

KAYNAKÇA ....................................................................................................................................... 212



10/213

1 Html Nedir?

Bölüm


11/213

10Bölüm 1: HTML NEDĠR?

EGM - Bilgi Teknolojileri Dairesi BaĢkanlığı Eğitim ġubesi Müdürlüğü Yayınları

Bölüm 1: Hedefler Html kodlama dilini tanıyabilme, Html‟in tarihçesi hakkında bilgi sahibi olabilme, Kullanılabilir Html kod türleri hakkında bilgi sahibi olabilme amaçlanmıştır.

HTML ’in Tarihçesi?

HTML (Hyper Text Markup Language), Web sayfalarının temel programlama dilidir. 1989yılında çıkmıştır. Standartlaşma problemleri yaşaması nedeniyle Word Wide WebConsortium (W3C) ismiyle bir HTML s tandartları organizasyonu kurulmuştur . Ancak halastandartlaşma problemleri yaşamaktadır.

HTML ile benzerlik gösteren bir başka web dili de XML dir. Html‟den farklı olarak

kullanılacak olan etiketler (tag) önceden tanımlı değildir. Yani bir XML dokümanının yapısıtamamıyla kullanıcı tarafından oluşturulur. Verinin tanımlanması ve tarif edilmesi içinkullanılır.

HTML Word Wide Web Organizasyonu tarafından XML ile yeniden tanımlandı veXHTML adını aldı. XHTML ile HTML işlevsellik bakımından neredeyse aynıdır. Fakat HTML bazıhataları görmezden gelirken XHTMLhatal ı kod yazılmasına izin vermemektedir .

XHTML kodları yazarak sayfanızın onaylanmış (standart) etiketlerle yazacağınızainanıyorsanız. Sayfanızın başına aşağıdaki kodu eklemelisiniz.


12/213

11Bölüm 1: HTML NEDĠR?


Bölüm 1: Sorular 1. Html kodlama dili hangi yıl kullanılmaya başlanmıştır?

a )2000

b )1981c )1990

d )1989

2. Aşağıdaki dillerden hangisi ile web sayfası yazılamaz?

a )HTML

b )XML

c )XHTML

d )C++

BÖLÜM 1 TAMAMLANMIġTIR.


13/213

2 Html Sayfa Yapısı

Bölüm


14/213

13

Bölüm 2:HTML SAYFA YAPISI


Bölüm 2: Hedefler Html sayfa yapısını tanıyabilme, Html‟de kullanılan etiket yapısı hakkında bilgi sahibi olabilme, Temel Html etiketlerini tanıyabilme amaçlanmıştır .

HTML ’e GiriĢ

Bir html sayfa yapısı aşağıdaki gibi kodlara sahiptir. Bu kodlar gerek tarayıcı tarafındangerekse arama motorları tarafından incelenir ve anlamlı hale getirilir.

Html en dıştaki etikettir. Bu etiket metnin bir html dokümanı olduğunu ifade eder. Tüm htmlkodları bu etiketin arasına yazılır.

Html dokümanının içeriği hakkında bilgi verir. Bu bilgiler tarayıcının başlık kısmında bulunur.

Bu etiket sayfanın başlığını ifade eder. etiketi içerisinde yer alır. Bu etiket içineyazılan başlık tarayıcı penceresinin ismini oluşturur.


15/213

14



Head içerisine konulabilecek diğer bir etiket meta etiketidir. Bu etiket sayfanızla ilgili anahtarsözcükleri belirler. Sayfanıza uygun anahtar sözcükler yerleştirmek MSN gibi aramamotorlarını kullanarak web‟ de arama yapan kullanıcıların sayfanıza daha kolay ulaşmasınısağlar. Arama motorları genelde sayfanızı ararken body etiketi içerisindeki metinleri değilsadece meta etiketi içerisindeki anahtar kelimeleri arar. Google gibi bazı arama motorları isearama işlemini body etiketlerinde yapar.

Anahtar kelimeler meta etiketinin Content (içerik) özelliği ile belirlenir.

Tarayıcı sayfalarında sıklıkla karşılaşılan sorunlardan bir tanesiTürkçe karaktersorunudur. Bunun için sayfada karakter setinin tanımlanması gerekir.… etiketleri arasına; aşağıdaki kodlar eklenmelidir.

Birinci satır karakter setini Türkçe karakterleri içeren sete eşler. İkinci satırda ise, sayfanındili olarak Türkçe seçilmektedir.

Kullanımda olan bir site adresi bazı durumlarda değişebilmektedir. Site kullanıcıları eski siteadresine tıkladığı durumlarda yeni siteye yönlendirme verilmek için yine meta etiketlerikullanılır.

Burada CONTENT içine yazılan sayı beklenilecek süreyiURL yazan kısımsa yönlendirileceksayfayı belirtir.


16/213

15



Bu etiket tarayıcıda görünen bütün bilgileri içerir. Sayfayı dizayn edebilmek için kullanılanmetinler, resimler ve diğer nesneler bu bölüme yazılır. Sayfanın gövdesi olarak ta bilinir.


17/213

Bölüm 2: Sorular 1. Aşağıdakilerden hangisi temel Html etiketlerinden değildir?

a )

b )

c )

d )

2. Aşağıdakilerden hangisi içine yazılan kod sayfa ismini belirler?

a )

b )

c )

d )

3. Aşağıdakilerden hangisi içine yazılan kod arama motorlarında sayfamızın bulunmasını

sağlar? a )

b )

c )

d )



18/213

3 Html Metin Etiketleri

Bölüm


19/213

18Bölüm 3: Html Metin Etiketleri


Bölüm 3: Hedefler Html sayfalarında metinetiketlerini kullanabilme, Metin etiketleri ar asındaki farkları anlayabilme, Metin etiketlerinin nerede yazılacağı hakkında bilgi sahibi olabilme, İçiçe metin etiketleri kullanabilme amaçlanmıştır.

Html Metin Etiketlerini Kullanmak

Her web tarayıcısının standart html etiketleri için varsayılan ayarları vardır. Örneğin InternetExplorer‟da ve diğer tarayıcıların çoğunda sola hizalı ve Timis New Roman yazıtipinde 18 punto ile yazılır. Bazı tarayıcılarda ise aynı etiket farklı formatlardagösterilebilmektedir.

Metin etiketlerinin tamamı etiketi içerisine yazılır .

Paragraf OluĢturmak

Bu etiket gövde paragrafını oluşturmaktadır. Body etiketi içerisine yazılır. En temel paragraftürüdür. Html de kullanmayabilirsiniz. Fakat xhtml‟de kullanmak zorunludur.

BaĢlık OluĢturmak

Tüm belgelerde olduğu gibi web sayfalarında da metne ait bir başlık oluşturulur. Htmlstandardı olarak den ya kadar başlık boyutu bulunmaktadır. Bu etikette rakam büyüdükçe başlık boyutu küçülmektedir. Başlık etiketinin uygulam asını yaparsak aşağıdakigörüntü oluşacaktır.


20/213



Kalın Yazı Biçimi

Bold etiketi, içerisinde bulunan metni tarayıcıda kalın halde gösterir. Paragraflar için dahakullanışlı olmaları ile birlikte her yerde kullanılabilirler.

Html etiketlerini iç içe kullanırken öncelik sıraları ve kapanma sıralarına dikkat etmekgerekir. İlk açılan etiket son kapatılır. Yukarıdaki html kodunda da ilk açılan

etiketi enson kapatılmıştır. Html bu kuralları göz ardı edebilir. Fakat xhtml‟de ise bu kuralauyulmalıdır.

Ġtalik Yazı Biçimi

İtalic etiketi, içerisinde bulunduğu metni italic yapar.


21/213



Üst Simge OluĢturma

Genellikle matematiksel formül yazarken, kimyasal değimlerde ya da sayfa altında açıklaması bulunan (*) bölümler için kullanılır.

Alt Simge OluĢturma

Üst simgede olduğu gibi formüllerde ve açıklamalarda kullanılır.

Tek Aralıklı Yazı Tipi OluĢturmak

Harflerin kapladığı alan bakımından iki tür yazı tipi vardır. Bunlar Orantılı Yazı Tipi ve TekAralıklı Yazı Tipi‟dir. Orantılı yazı tipinde her harfin kapladığı alan farklıdır. Tek Aralıklı

Yazı tipinde ise her harf aynı alanı kaplar. Web sayfalarında daha hoş ve profesyonelgöründüğünden web siteleri genelde orantılı yazı tipini kullanır. Genelde orantılı yazı tipinealışkın olduğumuz için okumayı da kolaylaştırır.Ama bazı durumlarda Tek Aralıklı Yazı Tipi kullanılmaktadır.


22/213



Satır BaĢı

Bu etiket satırın bittiğini ve bir diğer yazının alt satırdan başlaması gerektiğini ifade eder.Html için
olarak ta kullanılabilir. Fakat xhtml‟de
olarak kullanılmalıdır. Codeortamında (not defterinde, Dreamweaver code bölümünde ya da diğer editörlerde bir alt satırageçmek için enter tuşuna kullanarak bir alt satıra geçseniz bile tarayıcı ekranında alt satırageçmeden düz satır olarak görünür. Aşağıdaki kodda
taglarını kaldırırsanız metin düzmetin özelliğini alır.

Önceden Biçimlendirme

Fazladan boşluk gerektiren bir biçimlendirmede “önceden biçimlendirilmiş” anlamına gelen etiketi kullanılmalıdır. Genellikle çok satır ve paragraf içeren büyükdosyalardakullanılır. etiketini kullanmak her zaman kısa yoldur. Bu etiketi kullanılmazsa her satırsonuna
konulmalıdır. Biri diğer ifade ile etiketi metni Tek Aralıklı Yazı Tipindegörüntülemekle kalmaz aynı zamanda web tarayıcısının dikkate almayacağı tüm boşlukları vesatır sonlarını korur. Bu sayede metnin orijinal görüntüsü korunmuş olur. Bu sayede daha azhtml etiketi kullanılmakta. Aşağıda
ve etiketleri ile oluşturulmuş bir şiir metni bulunmaktadır. Aynı metni hangi etiket yardımı ile daha kolay yazarsınız?


23/213




24/213

Bölüm 3: Sorular 1. Aşağıdakilerden hangisi bir metin etiketi değildir?

a )

b )

c )

d )

2. Aşağıdakilerden hangisi bir başlık metin etiketidir?

a )

b )

c )

d )

3. Aşağıdakilerden hangisi Emniyet kelimesini kalın ve italik yazan koddur?

a )

Emniyet

b )


25/213

4 Listeleme etiketleri

Bölüm


26/213

25Bölüm 5: Html’de Renk seçimi


Bölüm 4: Hedefler Html sayfalarında kullanılan listeleme etiketlerini anlayabilme, Listeleme etiketleri arasındaki farklar hakkında bilgi sahibi olabilme, Listelem e etiketlerini özelleştirebilme amaçlanmıştır.

HTML Listeleme Etiketlerini Kullanmak

Listeleme

İçerisine yazılan metinleri listeler. etiketi veya etiketlerinin içerisindekullanılır.

Numaralı Liste (Ordered List)

etiketinin etiketi içerisine yazılması ile numaralı listeler oluşur.

Madde numarasını birden farklı bir sayıdan başlamak istenirse; etiketi içerisindestart=”n” özelliği kullanılır.

Farklı formatlarda sıralama yaptırmak için; Style=list-styletype: type kullanılır. Bu styletype listesi aşağıda verilmiştir. Aşağıda bulunan listeyi hem hem de etiketi içinkullanabilirsiniz.


27/213



Değer Sonuç decimal 1,2,3,4 (varsayılan) decimal-leading-zero 01,02,03,04lower-roman i,ii,iii,iv

upper-romen I,II,III,IVlower-alpha a,b,cupper-alpha A,B,Cnone hiçbiri

Örneğin roma rakamı ile listeleme yapmak istenirse

Madde ĠĢaretli Liste

etiketinin etiketi içerisine yazılması ile numaralı listeler oluşur.

Farklı formatlarda madde işareti kullanılmak istenirse;list-style-type:type özelliği kullanılır.Bu özelliğe ait farklı formatlara ait liste aşağıda çıkartılmıştır.

Değer Sonuç Disc Dolu daire (varsayılan) Circle Boş daire Square Dolu kare

Madde işaretleri kare olan bir liste hazırlayalım.


28/213



Tanımlama Listesi OluĢturma

Madde işaretlerinden oluşan ya da numaralandırılmış bir listeniz var ve bu listenizinmaddelerini bir alt satırda açıklamak istiyorsunuz. Bu işlemi yapabilmek için etiketi ile birlikte ve etiketlerini iç içe kullanmalısınız.

Yukarıdaki kodlarda etiketler iç içe yazılmıştır. Kod düzeninin düzgün görünmesi açısından iç ve etiketleri iç taraftan başlattık. Tüm etiketler aynı hizada da olsa kodda yanlışlıkolmaz.


29/213



Yatay Çizgi OluĢturma

Bir web sayfasında metni kısımlara ayırmak için yatay çizgiler kullanılabilir. Yatay çizgieklemek için çizginin görünmesini istediğiniz satıra etiketini eklemeniz yeterlidir.


30/213

Bölüm 4: Sorular 1. Aşağıdakilerden hangi listeleme etiketi 3den başlayarak EMNİYET yazısını yazar?

a ) EMNİYET

b ) EMNİYET

c ) EMNİYET

d ) EMNİYET

2. Aşağıdakilerden hangisi bir listeleme etiketidir?

a )

b )

c )

d )

3. Aşağıdakilerden hangi listeleme etiketi roma rakamları ile numaralandırma yapar?

a ) EMNİYET b ) EMNİYET

c ) EMNİYET

d ) EMNİYET



31/213

5 Html’de Renk Seçimi

Bölüm


32/213



Bölüm 5: Hedefler Htmlde kull anılan renk sistemlerini tanıyabilme, Sayfa arkaplan r engi hakkında bilgi sahibi olabilme, Sayfa metin rengi değiştirme hakkında bilgi sahibi ola bilme, Sayfa arakplan resmi değiştirme hakkında bilgi sahibi olabilme amaçlanmıştır.

Renk Seçimi

Web tasarım uzmanları web sayfalarında koyu renkli ve desenli arka planları kullanmayasıcak bakmazlar. Bu tür arka planlar okumayı zorlaştırabilir. Hatta bazı tasarımcılar hiçbirarka plan rengi kullanmamak gerektiğini, beyaz arka plan üzerine siyah metnin tercih edilmesigerektiğini söylerler.

Birçok büyük ticari web sitesinde de bunun uygulandığı görülür.

RGB Renk Tanımlama Sistemi

Renk belirleme yollarında biriside RGB (Red, Green, Blue-Kırmızı, Yeşil, Mavi)‟dir. Bu kodta bütün renkler üç sayılı seriler halinde tanımlanır. Bu sayılar 0 ile 255 arasında değişir.Örneğin Kırmızı rengin kodu “255,0,0” dır.

Şekilde de görüldüğü gibi kırmızıya verilen sayı 255 dir. Yeşile 0 ve mavi renge 0 değeriverilerek tam kırmızı renk oluşturulmuştur. 255,120,0 ise turuncu rengi verir.

On Altı Tabanlı Renk Tanımlama Sistemi

Renk değerleri HTML‟de on altı tabanlı değerlerle de tanımlanabilir. Bunlar RGB değerinin16 tabanlı sayı sistemine çevrilmiş halidir. Bu renk tanımlama sisteminde renk kodları #işareti ile başlar. Bu kottaki 255 değeri FF‟e eşittir.


33/213


34/213



Sayfa Metni Rengi

Sayfa ön plan rengi olarak ta bilinir. Metin rengide etiketi içerisine yerleştirilenstyle=color: değişkeni ile belirlenir.

Sayfa Arka Plan Rengi ile Ön Plan Renginin Birlikte Kullanılması

Sayfa rengi ile metin rengini birlikte kodlamak için araya (;) işareti konmalıdır. Sayfarenginin ya da metin rengi kodunun önce ya da sonra yazılmasının bir önemi yoktur.Yukarıdaki kotta sayfa rengi önce yazılmış ve araya (;) işareti konarak metin rengi belirtilmiştir. Aşağıdaki kod aynı işlemi gerçekleştirir.


35/213



Arka Plan Resmi

Arka Plan resmi sayfada metnin arkasında görünür, ve sayfa ile birlikte kayar. Sayfa arka planresmini kullanırken dikkatli olmak gerekir. Resim sayfa boyunca tekrar eder. Büyük resimlerkullanılırsa düzgün bir görünüm olmaz.

Yukarıdaki sayfanın arka plan resminin kullanılışının doğru olduğu söylenemez. Resimlersayfada tekrarlandığı için küçük resimlerin kullanılması daha uygun olacaktır. Dokuresimlerini arka plan resmi olarak belirlemek en idealidir.


36/213



Yukarıdaki resimde sayfanın arka planı görünümü bir önceki sayfaya göre daha görsel olduğugörülmektedir. Sayfa arka planı belirlenirken metnin okunmasını engellemeyen resimlertercih edilmeli. Yukarıdaki resimde sayfa arka planında küçük bir resim kullanılmıştır. Sayfa sürekli aynı resmi tekrar (repeat) ettiği için büyük bir resim gibi durmaktadır.


37/213

Bölüm5: Sorular1. Aşağıdakilerden hangisi Html sayfalarda kullanılan renk düzenidir?

a ) RGB

b ) PAL

c ) NTSC

d ) Hiçbiri

2. Aşağıdakilerden hangisi arkaplan rengi hangi html etiketine uygulanır?

a )

b )

c )

d )

3. Aşağıdakilerden hangisi sayfaya arkaplan resmi eklemek için kullanılır?

a )

b )

c )

d )

BÖLÜM5 TAMAMLANMIġTIR.


38/213

6 Köprüler ( Link – Hyperlink )

Bölüm


39/213

38Bölüm6: Köprüler ( Link – Hyperlink )


Bölüm 6: Hedefler Köprü oluşturmayı anlayabilme, Köprü oluşturma türleri hakkında bilgi sahibi olabilme, Hedef mantığını anlayabilme amaçlanmıştır.

Link - Hyperlink

Web sitesi köprüler üzerine kurulmuştur. Sayfalar birbirlerine bağlanarak site içerisindeziyaretçiye daha düzenli bilgi verilir.

Köprü kurularak başka bir siteye yönlendirme yapılabilir, site içerisinde başka bir sayfayagidilebilir, elektronik posta yazılabilir, dosya indirilebilir, film görüntülenebilir, web tabanlı programlar çalıştırılabilir.

Köprü OluĢturmak ( )

Body bölümünün içerisinde etiketinin içerisine yerleştirilen href değişkeni ile oluşturulur.

Yönlendirilen sayfa ismi Sayfada Görünecek yazı Alt satıra geçme


40/213



Yukarıdaki örneklerde link verilen sayfaların aynı klasör içinde olduğu varsayılmıştır. Eğerlink verilen sayfa farklı klasör içerisinde ise sayfa isminden önce klasör isminin belirtilmesigerekir.

Web. html , excell.html, word.html sayfaları eğitim klasörü içerisinde olduğu varsayılırsa htmlkodları aşağıdaki gibi yazılmalıdır.

İç içe klasörler içerisinde bulunan bir sayfadan ana sayfaya yada bir önceki klasör içerisinde

bulunan bir sayfa link verebilmek için klasör isminden önce ../ işaretinin konması gerekir.Eğitim klasörü içerisinde bulunan sayfadan ana sayfaya link verilmiştir. ../ işareti “bir üstklasöre git ” anlamını taşır.

Hedef Penceresini Belirlemek ( Target )Varsayılan ayar olarak link verilen sayfa bir önceki sayfanın yerine açılır. Önceki sayfaekrandan kaybolur. Sitemizde link verdiğimiz sayfanın yeni tarayıcı sayfasında açılmasınıistiyorsak ya da bir başka deyişle arka planda setimizin kaybolmasını istemiyorsak verilenlinkin yeni bir sayfada açılmasını sağlayabiliriz. etiketi içerisindetarget değişkenininkullanılması ile verilen linkin hedefini belirleyebiliriz. Bu durumda html kodu aşağıdaki gibiyazılır.

Çerçeve kullanılan sayfalarda link verilen sayfanın istenilen çerçevede açılmasınısağlayabiliriz. Target değişkeni içerisinde 4 çeşit özellik kullanılır.


41/213



“_blank” : Yeni tarayıcı penceresi “_parent” : Yeni çerçeve

“_self” : Aynı tarayıcı penceresi “_top” : Diğer çerçeveleri kapatarak bağlantıyı tek çerçevede açar.

Elektronik Posta Adresine Köprü OluĢturmak (Mailto: )

En yaygın olarak site yöneticilerinin kullanıcıların kendilerine ulaşmasını sağlamak amacıylakullanılır.

Bu durumda kullanıcı yukarıdaki linki seçtiğinde bilgisayarında kurulu bulunan elektronik posta programı çalışır. Bilgisayarında elektronik posta programı bulunmayan ya da elektronik posta programının kurulumunu yapmayan kullanıcı bu linki kullanamaz.

We b sayfalarında elektronik posta adresi vermek çok sayıda istenmeyen posta gelmesine(spam) sebep olabilir. Bu nedenle kullanıcılarla iletişim kurmada özel bir adres kullanmanıztavsiye edilir. Çok sayıda gereksiz posta aldığınızda bu adresi silerek yeni bir adres

belirleyebilirsiniz.

Elektronik postada konu satırını oluşturmak için subject özelliği kullanılır.

Tasarımcı kendisine gelecek olan mesajların konusunu bu sayede belirleyebilir. Ancakistediği takdirde kullanıcı konu satırını değiştirebilir.

TitleEkran İpuçları (screen Tip)

Mause ile bağlantı (link) üzerine gelindiğinde bağlantıyı açıklayan küçük bir not görünmesiiçin kullanılır.

info@e m. ov.tr


42/213



AnchorYer işareti Bağlantısı

bir konu hakkında makaleniz var ve bu makaleyi konularına göre sayfa başına indeksyaptınız. Ziyaretçi bu makaleyi okurken istediği konuya daha rahat ulaşması için yer işareti bağlantısı kullanmalısınız.

etiketinin içinde “name” değişkeni ile yer işareti oluşturulur.


43/213



Yukarıdaki sayfada HTML bilgileri yer almaktadır. Bilgilerin başlıklarını sayfa başındalisteleyelim.

Listelenen bu bilgilere tıklandığında ilgili konu görünmesi için konu başlıklarına anchor (Yerişareti) konulmalıdır.


44/213



Yukarıda her konu için yer işareti oluşturduk. Oluşturduğumuz bu yer işaretlerine sayfa başındaki listeyi kullanarak bağlantı oluşturalım.

Artık konu başlıkları sayfa başında listelenmiş bir makalede, ziyaretçi aradığı konuya daha

çabuk ulaşabilecektir.


45/213



Bölüm6: Sorular1. Aşağıdakilerden hangisi köprü oluşturmak için kullanılan etikettir?

a )

b )

c )

d )

2. Aşağıdakilerden hangisi bir köprü bağlantısıdır?

a ) < a href=”http://www.google.com.tr ”>Google

b ) Anasayfa

c ) Habib VICIL

d ) Hepsi

3. Aşağıdakilerden hangisi bir mail bağlantısıdır?

a ) Google b ) Anasayfa

c ) Habib VICIL

d ) Hepsi



46/213

7 Style ġablonları

Bölüm


47/213

46Bölüm7: Style ġablonları


Bölüm 7: Hedefler Style mantığı anlayabilme, Style tipl eri arasında farkları ayırt edebilme, Style t iplerinin tamamını kullanabilme amaçlanmıştır.

HTML’de Kullanılan Style Tipleri

Üç çeşit style vardır.

Yerel Style

Genel Style

Harici Style

Yerel Style

XHTML‟in body bölümlerine yazılan ve Style‟dır. Sadece bir kereliğine yazıldıkları yerdeetkili olurlar. Bu Style türünde bir etiketin her kullanımında yenidenStyle oluşturulmalıdır.Yerel Style türü normalde kullanılan Style‟dır. Bu nedenle bu Style türünden fazla

bahsedilmeyecektir.

Yerel Style Şablonu oluşturmak;


48/213



etiketine yerel Style uygulanırsa görüldüğü gibi kullanılan tüm etiketleri içintekrar Style uygulamak gerekir.

Genel Style

Belirli bir etiketi her kullanılışında biçimlendirmektense sayfa başında bir sefer biçimlendirilir. Etiket her kullanıldığında sayfa başında yapılan biçimlendirme (style)doğrultusunda biçimlenir. İlgili etiketin biçiminin değiştirilmesi gerektiği zaman; sayfa başında oluşturulan biçimlendirme (style) değiştirilir. Böylelikle sayfada birçok kez kullanılanilgili etiketin biçimi değişir.

Genel Style Şablonu oluşturmak;

Genel Style eti ketleri arasına yazılır. açılış etiketinden sonra hangi

etiket için Style oluşturulacaksa o etiket yazılır. Sonra kuşak işaretleri konur {}. Daha sonrailgili etiket için biçim kuralı yazılır. Son olarakStyle etiketi ile sonlandırılır.

etiketi için etiketleri arasında Genel Style oluşturuldu. Bundan sonra etiketi içinde kullanılan tüm etiketleri için yeniden biçimlendirilme yapılmasıgere kmez. Bu örnekte etiketinin renginin kırmızı olmasını istersekStyle kurallarınıdeğiştirmek yeterlidir. Yani iki kuşak arasındaki renk kodunu Red yapmanız yeterlidir.


49/213



Bir style şablonu içerisine birden fazla kural konulabilir. Bu durumda her kural arasına ;konarak diğer kural yazılır. Yukarıdaki örnekte etiketinin biçimi kırmızıdır. Bu biçimeyazı büyüklüğünü de ekleyelim.

Bu durumda etiketinin rengi kırmızı ve büyüklüğü 12 px oldu. Bu kurallar arasınanoktalı virgül ( ; ) işareti koyarak biçimlendirmeyi daha da genişletebilirsiniz.

Harici Style

Bir html sayfasındaCSS (Cascating Style Sheet- Basamaklı Stil Sayfası) oluşturarak site ileilgili tüm biçimlendirmenin bu sayfa üzerinden oluşturulmasıdır. Sitenin yeniden biçimlendirilmesi gerektiğinden tüm sayfaları tek tek yeniden düzenlemektense sadece hariciStyle sayfasının değiştirilmesi yeterli olacaktır. HariciStyle sayfası html dosyası gibihazırlanır tek farkı uzantısınınCSS olmasıdır.

Bir html sayfası biçimlendirmesini harici sayfadan alabilmesi için html sayfasının hariciStylesayfasına (css) bağlanması gerekir. Bu bağlantı html sayfasının etiketleri

arasına yazılan kod ile gerçekleştirilir.Bu kod aşağıda verilmiştir.

Şimdi yeni bir html sayfası açın. Not defteri programını kullanıyorsanız yeni bir sayfa açın.Editör programı kullanıyorsanız hazır olarak gelen tüm html kodlarını silin.

Boş olan sayfaya aşağıdaki htmlStyle kodlarını yazın.


50/213


51/213


52/213



Şimdi de yeni bir CSS sayfası açın. Aşağıdaki style kodlarını yazın.

Bu şekilde CSS sayfasını da hazırladıktan sonraclass.css olarak kaydedin.

Aşağıdaki html kodunu iller.html sayfasının arasına yazdığınız zaman iller.htmlsayfasındaki illerin bölgelere göre renklendiği görülecektir.

Bağlantılara Style Uygulamak

Genel olarak bağlantı rengi mavi renktir. Ziyaret edilmiş bağlantı ise eflatun rengindedir.

Varsayılan bu kuralın dışına çıkarak kendi sitillerinizi oluşturabilirsiniz. Bunun için sayfa başında sanal gruplar oluşturmalısınız.

Örneğin, bir bağlantının rengini siyah yapmak istiyoruz. Bu bağlantıya ait kod yapısınıinceleyelim.


53/213



içerisine yazılan etiketleri arasında a:link kodu bağlantının rengini belirler.

Yukarıda bulunan kod sadece bağlantının sayfada görünen rengini belirler. Aslında bağlantılara ait 4 çeşit eylem uygulanır.

a:link : Bağlantı Rengi a:visited : Daha önce kullanılmış (ziyaret edilmiş) bağlantı a:hover : Fare üzerine gelince bağlantının alacağı renk a:active : Tıklandığında bağlantının alacağı renk

Şimdi de bu eylemleri yukarıdaki koda ekleyerek bağlantıları gözlemleyiniz.


54/213

Bölüm7: Sorular1. Aşağıdakilerden hangisi Html sayfalarda kullanılan stil tiplerinden değildir?

a )Yerel Stil

b ) Genel Stil

c ) Harici Stil

d ) Class Stil

2. CSS olarak adlandırılan stil tipi aşağıdakilerden hangisidir?

a )Yerel Stil b ) Genel Stil

c ) Harici Stil

d ) Class Stil

3. Genel stiller hangi etiketler arasına yazılır?

a )

b )

c )

d )

BÖLÜM7 TAMAMLANMIġTIR.


55/213

8 Metinleri Biçimlendirme

Bölüm


56/213

55Bölüm 8: Metinlerde Style Kullanmak


Bölüm8: Hedefler Html de ku llanılan yazı stillerini anlayabilme, Yazı stillerinin tamamını kullanabilme amaçlanmıştır.

Metinlerde Style Kullanmak

Web sayfasında editör programı ile görsel olarak metinleri biçimlendirmek Microsoft Word programında yazı yazmak kadar basittir. Fakat sayfanın güncellenmesi istendiğinde tümsayfalar hatta tüm paragraflar tek tek incelenerek yeniden düzenlenir. Bu işlem de çok fazlazaman kaybına sebep olur.

Style kullanarak metin biçimlerini tek noktadan yönlendirebilirsiniz. Güncelleme esnasındada küçük bir değişiklik ile tüm sayfaların metinlerini değiştirebilirsiniz. Bir metin

yazıldığında öncelikle Yazı Tipi Grubu belirtilir. Sonra yazı büyüklüğü, yazı rengi vb.değerler belirtilir.

Yazı Tipi Grubu OluĢturmak ( font-family )

P etiketi: bir metin oluşturulacağını ifade eder. Font-family etiketinden sonra yazılan yazıtiplerinden ilk önce arial yazı tipi uygulanacaktır. Eğer tarayıcı ariel yazı tipini bulamazsa


57/213


58/213



Yazı Rengini Belirlemek

Kalın Yazı Tipi Uygulamak


59/213



Ġtalik Yazı Tipi Uygulamak

Üst Çizgi ve Alt Çizgi ( Text-decoration )

Metinlerde alt çizgi ve üst çizgi özelliklerini kullanmak için text-decoration değişkenikullanılır.

Text-decoration bağımsız değişkeni 5 özellik kullanır.

Underline : alt çizgi overline : metin üzerinde çizgi line-through : üstü çizili blink : yanıp sönen none : tüm çizgileri kaldır

Harfler Arası BoĢlukları Ayarlamak

Harfler arası boşluğu belirlemek için letter -spacing değişkeni kullanılır. Sayfaların varsayılanayarı 0 dır. Pozitif sayılar boşluğu artırırken negatif sayılar boşluğu azaltır.


60/213



Aynı kodu genel olarak yazarsak.


61/213



Bölüm8: Sorular1. Font –family yazı stili ne için kullanılır?

a )Yazı boyutunu belirler.

b ) Yazı tipini belirler.

c ) Yazılar arasındaki boşluk miktarını belirler.

d ) Yazı rengini belirler.

2. Font –size yazı stili ne için kullanılır?





3. Text decoration yazı stili ne için kullanılır?

a )Yazı boyutunu belirler. b ) Yazı tipini belirler .


d ) Yazının altı veya üstü çizili yazılma seçeneğini belirler .

4. Letter spacing yazı stili ne için kullanılır?







62/213

9 Paragrafları Biçimlendirmek

Bölüm


63/213

62Bölüm 9: Paragrafları Biçimlendirmek


Bölüm9: Hedefler Html de kullanılan paragraf stillerini anlayabilme, Paragraf st illerinin tamamını kullanabilme amaçlanmıştır.

Paragraflarda Style Kullanmak

Style kullanarak metin biçimlendirmeyi bir önceki bölümde inceledik. Paragraf biçimlendirmek de metin biçimlendirmenin hemen hemen aynısıdır.

Paragrafların Girintisini Ayarlamak

HTML‟de üç çeşit girinti ayarı vardır.

İlk Satır Girintisi (First-line indent) (text-indent) :

Paragrafın sadece birinci satırının girintili olarak yazılmasıdır.


64/213



Doldurma : (padding) :

Bir öğerin iç kısmında içeriğin etrafına boşluk eklenmesidir. Yani yazı ile çerçeve arasınaeklenen boşluktur.

Kenar Boşluğu (magrin) :

Bir öğenin (yazının) dış tarafında öğenin etrafına beyaz boşluk eklenmesidir. Bir paragraftakimetnin tüm satırlarına eşit şekilde uygulanır. Başka bir deyişle çerçeve dışına boşlukeklenmesidir.

Margin

Padding : Bir öğenin iç kısmında içeriğin etrafına boşlukeklenmesidir.

Margin : Bir öğenin dış tarafında öğenin etrafına beyazboşluk eklenmesidir. Bir paragraftaki metnin tüm satırlarına

Padding : Bir öğenin iç kısmında içeriğin etrafına boşlukeklenmesidir.

Margin : Bir öğenin dış tarafında öğenin etrafına beyaz boşluk

padding


65/213



Bir Paragrafa Kenarlık Uygulamak ( Border-Style )

Kenarlık uygulamaları Border -Style değeşkeni ile yapılır. Border -Style değişkenininkullandığı özellik aşağıda listelenmiştir.

Solid : Düz çizgi Dotted : Noktalı çizgi Dasted : Kesik çizgi Double : Çift Çizgi Groove : Yivli

Ridge : Çıkıntılı

İnset : İçe doğru OutSet : Dışa doğru None : Çizgi yok

Tüm Kenarlık Özelliklerini Ayarlamak

Kenarlıklar ile kullanılan değişkenleri listelersek;

Border-style : Çizgi türü Border-width : Çizgi Kalınlığı Border-color : Çizgi Rengi


66/213



Border değişkeninden sonra (:) işaretini koyarak border değişkenine ait tüm özellikleriyazılabilir. Böylelikle tek seferde çizgiye ait tüm özellikler girilmiş olur.


67/213



Bölüm9: Sorular1. Text - indent paragraf stili ne için kullanılır?

a )Paragraf boyutunu belirler.

b ) Paragraf yazı tipini belirler.

c ) Paragrafta kelimeler arasındaki boşluk miktarını belirler.

d ) Paragraf girintisini belirler.

2. Border paragraf stili ne için kullanılır?

a )Paragraf boyutunu belirler.

b ) Paragraf çerçevesini belir ler.



3. Margin paragraf stili ne için kullanılır?

a )Paragrafta dış boşluk boyutunu belirler. b ) Paragraf yazı tipini belirler.





68/213

10 Resimleri Görüntülemek

Bölüm


69/213

68Bölüm 10: Resimleri Görüntülemek


Bölüm10: Hedefler Htmlde resimleri kullanabilme, Htmlde kulla nılabilen resim türlerini bilme, Sayfada istenen yere resim ekleyebilme, Sayfaya eklenen resiml erin boyutlarını belirleyebilme, Ekle nen resimlere köprü ekleyebilme amaçlanmıştır.

HTML’de Resim Kullanımı Bu bölüme kadar sadece metin içerikli sayfaların hazırlanmasından bahsedildi. Sadecemetinlerden oluşan bir web sayfasıolabilir. Fakat çekici bir sayfa olmayacaktır. Günümüzdeise resimsiz bir web sayfası düşünülemez. Web sayfaları resim ya da grafikler içerdiklerindedaha etkileyici olmaktadırlar.

Resim Biçimleriİnternette 3 ayrı resim formatı kullanılmaktadır. Bu formatlar arasındaki fark RenkDerinliğine, Sıkıştırma kalitesine, Animasyon özelliğine ve saydamlık özelliğine göre birbirlerinden ayrılırlar.

Resim Formatı Adı Renk Derinliği Sıkıştırma Animasyon Saydamlık

GIF(Graphics Interchange Format) 8-bit (256 renk)

Kayıpsız Var Var

JPEG (JPG)Joint Photographic ExpertsGroup

24-bit (16 milyonrenk)

Kayıplı Yok Yok

PNGPortable Network Graphics 24-bit veya 48-bit

Kayıpsız Var Var

Resimleri Web Kullanımı için Hazırlamak

Resimlerin biçimine karar verdikten sonra resmin ne kadar büyük olacağına, kaç pixseldenoluşacağına karar verilir. Buna resmin çözünürlüğü (resolution) denir. Genişlik ve yükseklikleifade edilir. Örneğin bir resim 800x600 ise genişliği 800 piksel ve yüksekliği 600 pikseldir.

Bir resmin dosya boyutu (file size) diskte kaç bitlik yer kapladığı anlamındadır. Çözünürlüğüile doğrudan alakalıdır. Bir resimde ne kadar piksel varsa dosya boyutu o kadar artar. Birresmin çözünürlüğü çok iyi görünecek kadar yüksek ama kullanıcılar sayfayı açtığında hızlıcayüklenecek kadar da düşük olmalıdır.

Resim Eklemek

Bir web sayfasında belirlenen bir yere resim eklemek için etiketi aşağıdaki gibiyerleştirilir.


70/213


71/213


72/213

71Bölüm 10: Resimleri Görüntülemek


Bölüm10: Sorular1. Aşağıdakilerden hangisi web sitelerinde kullanılabilen resim formatlarından değildir?

a )PSD.

b ) PNG.

c ) JPG.

d ) GIF.

2. Aşağıdakilerden hangisi sayfaya resim eklemek için kullanılan koddur?

a )

b )

c )

d ) Hiçbiri

3. Aşağıdaki resimlerin hangisi seçilirse sayfa Google adresine gider?

a ) b )

c ) GOOGLE

d ) GOOGLE

4. Aşağıdaki resimlerin hangisinin üzerine gelindiğinde açıklayıcı metin görüntülenir?

a )

b )

c ) GOOGLE title=” Polis Logo”

d ) > GOOGLE


http://www.google.com/http://www.google.com/


73/213

11 Tablo OluĢturma

Bölüm


74/213

73Bölüm 11: Tablo OluĢturmak


Bölüm11: Hedefler Htmlde tabloları kullanabilme. Htmlde kullanılan tablo özellikleri hakkında bilgi sahibi olabilme. Tablolarda düzenlemeler yapabilme amaçlanmıştır .

HTML’de Tablo OluĢturma

Basit Bir Tablo OluĢturmak

Çift yönlü etiketi ile oluşturulur. Basit bir tablo aşağıdaki kodlardan oluşur.

Yukarıdaki tablo 2 satırlı 4 sütunlu bir tablodur. Tarayıcı ekranında aşağıdaki gibi birgörünüme sahiptir. Kenarlıklar belirtilmediği için tarayıcı ekranında da kenarlıklar görünmez.

Border

Tabloya kenarlık oluşturmak için kullanılır. etiketi içerisine yazılır.

Satır 1

Satır 2


75/213



Border Color

Oluşturulan kenarlığın rengini belirler.

Cellspacing

Hücreler arası uzaklıkları belirler. Yukarıdaki şekle dikkatle bakıldığında her hücreye ait birkenarlığın olduğu ve bu kenarlıkları tek çerçevede toparlayan bir dış kenarlığın olduğugörülür. etiketi içerisinde kullanılan “Cellspacing” değişkeni ile hücreler arasımesafeyi arttırabilir ya da çoğaltabilirsiniz. Cellspacing değerinin sıfır olarak belirlenmesihücreler arası mesafenin olmadığını ifade eder.

Cellpadding

Hücre ile kenarlık arasındaki uzaklığı belirler.


76/213



Width / Height

Genel bir ifade ile Width; genişlik belirlerken Height; yükseklik belirtir. Bu değişkenler etiketi içerisinde kullanılırsa tablo genişliği ve yüksekliğini belirler. etiketi

içerisinde kullanılırlarsa satır yüksekliğini ve genişliğini, etiketi içerisinde kullanılırlarsasütun yüksekliğini ve genişliğini ifade ederler.

Tablo yapısında bir satır içindeki tüm hücrelerin aynı yükseklikte olması gerekmektedir. Birsütundaki tüm hücrelerde aynı genişlikte olmalıdır.

Tablo genişliğinin bu şekilde (piksel cinsinden) belirlenmesi tablo boyutunun sabitlenmesinisağlar. Tarayıcı penceresi tablodan küçük olursa pencere çevresinde kaydırma çubuklarıoluşur.

Tablo boyutun un tarayıcı penceresinin boyutuna göre ayarlanması için width ve heigthdeğerlerinden sonra % ifadesi yazılır. Böylelikle tablo tarayıcı penceresinin durumuna göreorantılı olarak büyür ya da küçülür.


77/213



Colspan

Bir hücreyi sağındaki hücreler ile birleştirmek için kullanılır.

Rowspan

Bir hücreyi alt taraftaki hücrelerle birleştirmek için kullanılır.


78/213




79/213



Bölüm11: Sorular1. Aşağıdakilerden hangisi web sitelerine tablo eklemek için kullanılan koddur?

a )

b )

c )

d )

2. Aşağıdakilerden hangisinde eklenen tablonun çerçeveleri görünür?

a )

b )

c )

d )

3. Aşağıdakilerden hangisinde eklenen tablonun genişliği 300 pikseldir?

a ) b )

c )

d )

4. Aşağıdakilerden hangisinde bir hücreyi sağındaki hücreler ile birleştirmek için kullanılır?

a ) rowspan

b ) table

c ) colspan

d )title



80/213

12 Form OluĢturma

Bölüm


81/213

80Bölüm 12:Form OluĢturmak


Bölüm12: Hedefler Htmlde formları kullanabilme, Htmlde kullanılan form nesneleri hakkında bilgi sahibi olabilme, Form nesnelerinin özelliklerini kullanabilme amaçlanmıştır.

HTML’de Form OluĢturmak

Bu üniteye kadar HTML‟de tasarım metotları öğretilmiştir. Bu ünitede ise; HTML‟in formelemanları ile veritabanı bağlantısında üstlendiği görevler anlatılacaktır.

Ziyaretçilerin sayfanız aracılığı ile sizlere mesaj yazması, siteniz hakkında düşüncelerini aktarması ve her türlü bilginin ziyaretçilerden istenmesi işlemleri form elemanları aracılığı ileASP, ASPX, ASP.NET ve PHP dilleri ile yapılır.

Basit anlamda form- veri tabanı işlemleri 3 temel aşamadan oluşur.

Veritabanının hazırlanması (Access, SQL, MySQL vb.) Form alanının oluşturulması Form ile veritabanı arasında bağlantıyı sağlayan script kodlarının bulunduğu

sayfanın yazılması. (Asp, Php vb.)

Bu aşamalardan HTML bölümünü ilgilendiren form alanının oluşturulmasıdır.

Temel Form Alanı OluĢturma

Bir HTML sayfasına yeni bir form eklemek için etiketi kullanılır. etiketininayrılmaz bir parçası olanmethod değişkeni istisnasız tüm etiketlerinde kullanılır veziyaretçiden alınan bilgilerin veritabanına gönderilme yöntemidir.

Method değişkeni iki farklı yöntem kullanır.

POST yöntemi : Sınırsız sayıda bilginin veritabanına gönderilmesi için kullanılır.GET yöntemi ; Sınırlı sayıda bilginin veritabanına gönderilmesi için kullanılır. Bu sınıroldukça büyüktür. Normal form işlemlerinde rahatlıkla GET yöntemi kullanılabilir.

Otomatik HTML kodu oluşturan birçok editör programında varsayılan olarak POST metodukullanılmaktadır. Web programcıları yerine göre her iki yöntemi de kullanır.

etiketleri arasında kullanılan bir başka değişken“Action” değişkenidir. Bu değişkenform ile veritabanı arasında bağlantıyı sağlayan sayfayı belirler. Bir başka diyişle; formelemanları üzerindeki bilginin action değişkeninde belirtilen sayfa üzerinden veritabanınagönderilmesini sağlar.

Tüm form elemanları; aşağıdaki form alanının içerisine yazılır.


82/213

81Bölüm 12:Form OluĢturmak


Standart Metin Kutusu OluĢturma

En basit form denetimi türü metin kutusudur. Kullanıcılar metin kutusuna ad, soyad, telefonno gibi bilgileri girebilirler. Bir metin kutusu tek taraflı etiketi içerisindetype=”text” özelliği kullanılarak oluşturulur.

Bu form alanı tarayıcı ortamında aşağıdaki gibi görünür.

Name

Metin kutusunun özel bir ada sahip olması dolayısıyla web programcıları tarafındankullanılabilmesi için “name” değişkeni özelliği ile metin kutusunun ismi belirlenir. İsim belirlerken asla Türkçe karakter kullanmayınız.

Size

Metin kutusunun varsayılan uzunluğu 20 pikseldir. “Size” değişkeni ile metin kutusugenişletilebilir.


83/213

06_webtasarim

Documents