Panel sekmesini tıklayarak çalıģma alanı içinde baģka bir yere sürükleyiniz. Özellik denetçisini çalıģma alanının alt tarafına sabitlemek için;

Resim 1.17: Özellik denetçisinin durumunu değiģtirme Özellik denetçisini taģıyabilmek için; Panel sekmesini tıklayarak çalıģma alanı içinde baģka bir yere sürükleyiniz. Özellik denetçisini çalıģma alanının alt tarafına sabitlemek için; Panel sekmesini tıklayarak çalıģma alanının altına sürükleyiniz.mavi kılavuz çizgisini görüntüsünde bırakınız. 17

ÖĞRENME FAALĠYETĠ 2 AMAÇ ÖĞRENME FAALĠYETĠ 2 Menü ve Araç Çubuklarını kullanabileceksiniz. ARAġTIRMA Görüntü iģleme yazılımı resim düzenleme programının hangi menü ve panellere sahip olduğunu araģtırınız. 2. ARAÇLAR PANELĠ 2.1. Bitmap Seçim Araçlarını (Marquee Tools) Kullanmak Bitmap seçim araçlarını görsellerin belirli bir alanını seçmek için kullanabilirsiniz. Bitmap seçim araçları seçim çerçevesi aracı ve oval seçim çerçevesi aracı olmak üzere iki tanedir. Aralarındaki fark sadece seçim Ģekilleridir. Seçim yapmak için; Araçlar panelinden seçim çerçevesi aracını seçin. Oval seçim çerçevesi aracını seçmek için seçim çerçevesi aracı üzerinde imlecinizi basılı tutun. Resim 2.1: Bitmap seçim araçları Aracın özelliklerini özellikler denetçisini kullanarak düzenleyebilirsiniz. Bu denetçiden geniģlik (G) ve yükseklik (Y) değerleri ile seçim yapılan alanın büyüklüğünü ayarlayabilirsiniz. X ve Y değerleri ile seçim yapılan yerin koordinatlarını değiģtirebilirsiniz. Resim 2.2. Bitmap seçim araçları özellikleri 22

Resim üzerinde aracı uygulamak istediğiniz yere çizim yaparak seçiminizi yapabilirsiniz. Resim 2.3: Bitmap seçim seçim aracı ile seçim yapma Seçimi yaptıktan sonra iģaretçi aracı ile seçili alanı kesip taģıma yapabilirsiniz. Seçili alanı kopyalamak istiyorsanız alt tuģu ile beraber iģaretçi aracı ya da alt seçim aracını kullanmanız gerekmektedir. Seçim iģlemi yapıldıktan sonra yeni seçim yerleri eklemek isterseniz seçim araçlarını shift tuģu ile birlikte kullanmanız gerekmektedir. Seçilen bölgeden çıkarma yapmak istersiniz alt tuģu ile birlikte seçim aracını kullanmanız gerekmektedir. Resim 2.4: Seçim alanına ekleme / çıkarma yapma Seçim araçları ile seçilen alanın dıģındaki alan seçilmek istendiğinde Seç / Tersini Seç (Ctrl + Shift + I) komutu kullanılır. Bu iģlemden sonra Delete tuģuna basarsanız seçiminiz dıģındaki alanı silmiģ olursunuz. 23

2.2. Seçim Araçları Resim 2.5: Tersini seç ile seçim yapma Görüntü iģleme yazılımı, iģaretçi aracı ve alt seçim aracı olmak üzere iki adet seçim aracına sahiptir. Bu araçları kullanarak çalıģma alanı içerisindeki nesneleri seçebilir ve taģıma iģlemi yapabilirsiniz. Eğer seçtiğiniz nesnenin kopyasını almak istiyorsanız bu araçları alt tuģu ile birlikte kullanmalısınız. Resim 2.6: Seçim araçları Bir nesneyi seçtiyseniz o nesnenin özellikleri ekranın altındaki özellikler denetçisinde görüntülenecektir. Birden fazla nesne seçildiği zamanda da seçilen nesne sayısı yine burada görüntülenecektir. Resim 2.7: Birden fazla nesne seçme Bir nesneyi seçmenin üç yolu vardır.bunlar: ĠĢaretçiyi nesnenin üzerine götürüp tıklayınız. Nesnenin konturunu ya da dolgusunu tıklayınız. Katmanlar panelinden nesneyi seçiniz. 24

Birden fazla nesneyi seçmek için iki yol aģağıdaki gibidir: Nesneler etrafında iģaretçi aracı ile sanal bir dikdörtgen çiziniz. Shift tuģu basılı iken iģaretçi aracı ile nesneleri tek tek seçiniz. Nesnelerin arkasındaki bir nesneyi seçmek için; ĠĢaretçi aracına, araçlar içinde basılı tutun. Diğer aracı görebileceğiniz bir pencere açılacaktır. Açılan bu pencere içinden arkasındakini seç aracını kullanabilirsiniz. 2.3. Kırpma Aracı Herhangi bir Bitmap resmin belli bir bölgesini kesip atmak istediğinizde kırpma aracını kullanabilirsiniz. Kırpma aracı resim içinde iģaretlediğiniz bölgeyi saklayarak geri kalan kısmını kırparak silecektir. Kırpma aracını kullanmak için; Kırpmak istediğiniz resmi açınız. Araç çubuğundan kırpma aracını seçiniz. Resim 2.8: Kırpma aracı Resim üzerinde saklamak istediğiniz bölümü iģaretleyiniz. ĠĢaretleme yaptıktan sonra alan üzerinde geniģletme veya daraltma yapabilirsiniz. Resim 2.9: Kırpma aracı ile kırpılacak alanın seçilmesi 25

Klavyeden enter tuģuna basın ya da seçtiğiniz alan içine çift tıklayınız. Resim 2.10: KırpılmıĢ resim Kırma iģleminden vazgeçmek isterseniz klavyeden Esc tuģuna basabilirsiniz. 2.4. Sihirli Değnek (Magic Wand) Aracı Bitmap resimleriniz içinde benzer renkli alanları seçer. Sihirli değnek aracını seçtiğiniz zaman özellikler denetçisi değiģecektir. Resim 2.11: Sihirli değnek özellikleri Tolerans değeri seçilecek renk aralığını belirler. 0 255 arasında değer seçebilirsiniz. Tolerans değeri düģürürseniz birbirine yakın renkler seçilir, yükseltirseniz daha fazla renk seçilir. Yani Tolerans değeri yükseltildiğinde seçilecek alan geniģletilir, tolerans değeri küçültüldüğünde ise seçilecek alan daraltılmıģ olur. 2.5. Kement (Lasso) Araçları Resim 2.12: Sihirli değnek aracı ile seçim yapma Kement aracı, resim içinde serbest bir çizimle alan seçmeniz gerektiğinde kullanabilirsiniz. Çokgen kement aracı, doğrusal sınır çizimleri yapmanızı sağlar. 26

Kement aracını kullanmak için; Araçlar panelinden kement aracını seçin. Çokgen kement aracını seçmek için imlecinizi kement aracının üzerinde basılı tutun. Resim 2.13: Kement aracı Aracın özelliklerini özellikler denetçisini kullanarak düzenleyebilirsiniz. Resim üzerinde aracı uygulamak istediğiniz yere çizim yaparak seçiminizi yapabilirsiniz. Resim 2.14: Kement aracı ile serbest seçim yapma Seçim alanına ekleme yapmak için shift tuģu ile, çıkarma yapmak için Alt tuģu ile birlikte aracı kullanabilirsiniz. 2.6. Lastik Damga (Rubber Stamp) Aracı Lastik damgası aracı ile rötuģ yapma iģleminin yanında görüntüdeki belirli bir alanı baģka bir alana kopyalamak için kullanabileceğiniz bir araçtır. Bu araç ile görüntü içinde görsel olarak düzgün bir alandaki dokuyu diğer bir noktaya taģıyabilirsiniz. Lastik damgası aracını kullanmak için; Araçlar panelinden lastik damgası aracını seçiniz. 27

Resim 2.15: Lastik damga aracı Özellikler denetçisinde beliren lastik damgası ayarlarını düzenleyebilirsiniz. Resim 2.16: Lastik damga aracı özellikleri Ġmleci kaynak olarak kullanmak istediğiniz alana tıklayınız. Resim 2.17: Lastik damga aracı ile kullanılacak kaynak noktayı belirleme Daha sonra aracın diğer parçasını hedefteki alan üzerine götürüp tıklayarak kaynağı çoğaltabilirsiniz. Resim 2.18: Lastik damga aracı ile rötuģlanmıģ resim 28

2.7. Silgi (Eraser) Aracı Silgi aracını bitmap resimler içinden belli bölümleri silmek için kullanabilirsiniz. Silgi aracını kullanmak için; Araçlar panelinden silgi aracını seçiniz. Resim 2.19: Silgi aracı Aracın özelliklerini özellikler denetçisini kullanarak düzenleyebilirsiniz. Resim 2.20: Silgi aracı özellikleri Resim üzerinde aracı uygulamak istediğiniz yerde farenizin sol tuģuna basarak silme iģlemini gerçekleģtirebilirsiniz. 2.8. Leke (Smudge) Aracı Resim 2.21: Silgi aracı ile bir bölümü silinmiģ resim Leke aracı üzerinden geçtiği renkleri birbirine karıģtırmaya ve kenarları yumuģatmaya yarar. 29

Leke aracını kullanmak için; Araçlar panelinden Leke aracını seçiniz. Resim 2.22: Leke aracı Aracın özelliklerini özellikler denetçisini kullanarak düzenleyebilirsiniz. Resim 2.23: Leke aracı özellikleri Uygulamak istediğiniz alan üzerinde imlecinizi sürükleyerek efekti uygulayınız. Resim 2.24: Leke aracı ile rötuģlanmıģ resim 2.9. Kırmızı Göz Kaldırma (Red Eye Removal) Aracı Kırmızı göz kaldırma aracı flaģla çekilen fotoğraflarda oluģan kırmızı gözleri kolaylıkla kaldırmanıza yardımcı olacaktır. Bu iģlem kırmızımsı renkleri gri ve siyahla değiģtirerek fotoğrafın sadece kırmızı alanlarını boyayarak gerçekleģtirir. Kırmızı göz kaldırma aracını kullanmak için aģağıdakileri iģlemleri takip ediniz: Araçlar panelinin bitmap bölümünde kırmızı göz kaldırma aracını seçin. Özellik denetçisinde Ģu ayarları seçiniz: Tolerans değiģtirilecek ton aralığını belirler (0 sadece kırmızıyı değiģtirir; 100 kırmızı içeren bütün tonları değiģtirir). 30

Resim 2.25: Kırmızı göz oluģan resim Kuvvet,kırmızımsı renkleri değiģtirmek için kullanılan grilerin koyuluğunu ayarlar. Hedef biçimli iģaretçiyi fotoğraftaki kırmızı göz bebeklerinin üzerinde sürükleyin ve tek tıklamayla iģlemi tamamlayınız. Resim 2.26: Kırmızı göz kaldırma aracı kullanılmıģ resim 2.10. Bitmap Nesnelerini Düzenlemek Bitmap resimleri düzenlemek istersiniz öncelikle düzenlemek istediğiniz alanı seçmeniz gerekmektedir. Seçimi yaptıktan sonra bitmap resim üzerinde değiģiklik yapabilirsiniz. Seçimi yaptığınız zaman seçim dıģında kalan alan üzerinde değiģiklik yapılmayacaktır. 2.11. Görüntü Büyütme Oranını DeğiĢtirme Görüntü büyütme oranını değiģtirme, resim ya da grafiğin sadece ekrandaki görüntüsünü büyültür ya da küçültür. Resim ya da grafik ekrana sığmadığında veya yakın planda çalıģmak istediğinizde yakınlaģtırmayı kullanarak çalıģabilirsiniz. Görüntü büyütme oranını değiģtirmenin birkaç yolu vardır. Görüntü büyütme oranını değiģtirdiğiniz zaman görüntünün sadece ekrandaki görünümü değiģir, resmin veya grafiğin boyutları değiģmez. 31

2.12. Tuval Rengini (Canvas Color) DeğiĢtirme Tuval rengi resmin veya grafiğin arka plan rengidir. Yeni belge oluģturulurken tuval rengini beyaz, saydam ya da istenilen bir renk seçebilirsiniz. Tuval rengi menüden değiģtirebileceğiniz gibi çalıģma alanından özellikler denetçisi kullanılarak da değiģtirebilirsiniz. 2.13. Bilgi (Info) Paneli Resim 2.27: Tuval rengini değiģtirme Bilgi paneli imlecin o anda ekranda bulunduğu konumu ve konuma ait renk değerlerini verir. Bu sayede istendiğinde hizalama, istendiğinde renk değerlerini kolayca öğrenebilirsiniz. Ayrıca seçili nesnenin konumunu ve boyutunu da buradan öğrenebilirsiniz. 2.14. Seçimi Kaydetme Resim 2.28: Bilgi paneli ÇalıĢma alanında yapılan seçimleri isterseniz kaydedebilirsiniz. Seçimi kaydetmek ve uygulamak için; ÇalıĢma alanında bir seçim yapınız. Seç / Bitmap Seçimi kaydet komutunu uygulayınız. 32

Resim 2.29: Seçimi kaydet iletiģim penceresi Kaydedilen seçimi kullanmak için Seç / Seçimi Geri Yükle komutunu kullanınız. Resim 2.30: Seçimi geri yükle iletiģim penceresi Kaydettiğiniz seçimleri silmek için Seç / Bitmap Seçimleri Sil komutunu kullanınız. 2.15. Düzeyleri Ayarlama Düzeyler filtresi resimdeki parlak noktaları, ara tonları ve gölgeleri ayarlamanızı sağlar. Resimlerin renk değerlerinde sorun varsa, düzeyler penceresinde yer alan değerleri ayarlayarak sorunları giderebilirsiniz. Sorun giderme iģlemini eğer Görüntü iģleme yazılımına bırakmak istiyorsanız düzeyler penceresindeki otomatik seçeneğine tıklamanız yeterlidir. 33

Düzeyler filtresini kullanmak için; ĠĢlem yapılacak görüntüyü seçiniz. Özellikler denetçisindeki filtreler seçeneğinin yanındaki + sembolüne tıklayın ve açılan filtreler menüsünden Renk Ayarla > Düzeyler komutunu seçiniz. Veya Filtreler > Renk Ayarla > Düzeyler komutunu seçiniz. Düzeyler penceresindeki kanal açılır. Menüsündeki değiģiklikleri RGB karıģımına ya da R, G, B kanallarına ayrı ayrı uygulamak için seçiminizi yapınız. Resim 2.31: Düzeyler iletiģim penceresi Histogram altındaki sol ok ile gölgeleri, orta ok ile orta tonları ve sağ ok ile de vurgu tonlarını ayarlayınız. Yapılan ayarlamaları eģ zamanlı görmek için ön izleme seçeneğini iģaretleyebilirsiniz. Resim 2.32: Düzeylerin önizleme ile takip edilmesi ĠĢlemi bitirmek için Tamam butonuna tıklayınız. 34

2.16. Gama Ayarı Gama ayarı ekran görüntüsünün parlaklığını ve kontrastını etkiler. Macintosh platformundaki gama ayarı Windows takinden daha azdır. Bu yüzden Macintosh üzerinde hazırlanan resimler Windows iģletim sistemine sahip bir bilgisayar üzerinde daha koyu görüntülenir. Bunu dikkate alarak resimleri yaparken bu koyuluğun telafi edilmesi gerekir. Eğer Macintosh ile tasarım yapılıyor ise resimleri daha açık yapılır. Windows ile tasarım yapılıyorsa resimler biraz daha koyu yapılır. 2.17. Seçimler Ekleme ve Çıkarma Görsellerde bir alan seçildikten sonra seçim alanına yeni seçimler ekleyebilir veya seçim alanından çıkarma yapabilirsiniz. Seçim araçlarından hangisini kullandığınız farketmez. Seçime yeni seçim eklemek için seçim araçlarından biri aktif hâlde iken aracı shift tuģu ile birlikte kullanmalısınız. Bu durumda imlecin yanında + iģareti çıkacaktır. Seçim alanından çıkarma yapmak için ise seçim araçlarından biri aktif hâlde iken aracı Alt tuģu ile birlikte kullanmalısınız. Bu durumda imlecin yanında iģareti çıkacaktır. 2.18. Resmi Ölçekleme (Scale) Görüntü iģleme yazılımı uygulamasında farklı ölçeklendirme araçları bulunmaktadır. ġekilleri ölçeklendirmek için; Ölçeklendirmek istediğiniz nesneyi seçiniz. Araçlar panelinden,ölçek aracını seçiniz. Görselin etrafında kare noktalar belirir. Resim 2.33: Resim ölçeklendirilmesi 35

Bu noktaların köģelerde olanlarını sürükleyerek yapılan boyutlandırma iģleminde en boy oranı korunur. Fakat köģelerin ortalarında (kenarların üzerinde) çıkan kare tutamaçlar ile yapılan boyutlandırma iģlemlerinde orantı korunmaz. Ġstediğiniz iki seçenekten biri ile iģlemi tamamlayabilirsiniz. Resmi ayrıca özellikler denetçisini kullanarak da boyutlandırabilirsiniz. GeniĢlik, yükseklik değerleri ile nesnenin boyutunu, X,Y değerlerini ve nesnenin çalıģma alanındaki konumunu değiģtirebilirsiniz. Resim 2.34: Özellikler denetçisi ile resmi boyutlandırmak 2.19. Resmin Boyutunu DeğiĢtirme Görüntü iģleme yazılımı uygulamalarında resmin boyutunu istediğiniz zaman değiģtirebilirsiniz. Bunu yapmanın iki yolu vardır. Resim boyutunu değiģtirmek için; DeğiĢtir / Tuval / Görüntü Boyutu komutunu seçiniz. Resim 2.35: Resim boyutunu değiģtirme Veya özellikler denetçisinden Görüntü Boyutu komutunu seçiniz. Resim 2.36: Resim boyutunu özellikler denetçisinden değiģtirme Görüntü boyutu penceresinden ister piksel isterseniz cm veya inç olarak görüntünün boyutunu değiģtirin. 36

Resim 2.37: Resim boyutu iletiģim penceresi Oranları koru seçeneği iģaretli iken yükseklik veya geniģlikten birini değiģtirdiğiniz zaman diğeri Görüntü iģleme yazılımı tarafından otomatik olarak değiģtirilecektir. Resim 2.38: Resim boyutlandırmada oranların korunması Bu seçenek iģaretli değilse el ile bu değerleri ayarlamalısınız. Yükseklik ve geniģliği ayrı ayrı ayarlarken resmin bozulmamasına dikkat ediniz. Resim 2.39: Resim boyutlarını oranları dikkate almadan yapma 37

2.20. Bir Seçimi Kopyalama Görüntü iģleme yazılımı size seçimi kopyalama için birden fazla yol sunar. Bir seçimi kopyalamak için; Seçim araçlarını kullanarak görsel üzerinde bir seçim yapınız. Düzenle / Kopyala komutunu seçiniz. Resim 2.40: Düzenle / Kopyala komutu Düzenle / YapıĢtır ile seçimi kopyalamayı bitiriniz. Resim 2.41: Düzenle / YapıĢtır komutu Bir seçimi kopyalamanın bir diğer yolu için; Seçim araçlarını kullanarak görsel üzerinde seçim yapınız. ĠĢaretçi aracını alt tuģu ile birlikte kullanarak seçimi kopyalayınız. 2.21. Bir Seçimi TaĢıma Görüntü iģleme yazılımı size seçimi taģımak için birden fazla yol sunar. Bir seçimi taģımak için; Seçim araçlarını kullanarak görsel üzerinde bir seçim yapınız. Düzenle / Kes komutunu seçiniz. 38

Resim 2.42: Düzenle / Kes komutu Düzenle / YapıĢtır ile seçimi kopyalamayı bitiriniz. Bir seçimi taģımanın bir diğer yolu için; Resim 2.43: Düzenle / YapıĢtır komutu Seçim araçlarını kullanarak görsel üzerinde seçim yapınız. ĠĢaretçi aracını kullanarak seçimi taģıyınız. 2.22. Ġlave Seçim Seçenekleri Görüntü iģleme yazılımı görseller üzerinde seçim yapabileceğiniz için araçlar hâricinde bir menü sunmaktadır. Bu menü ile çeģitli seçimler yapabilirsiniz. Resim 2.44: Seç menüsü 39

Tümünü Seç: Bitmap modunda, bir Bitmap nesnesindeki veya seçili bir katmandaki tüm pikselleri seçer. Vektör modunda, bütün katmanlardaki görünür nesnelerin tümünü seçer. Eğer tek katmanlı düzenleme açık ise Tümünü Seç sadece geçerli katman üzerindeki nesneleri seçer. Seçimi Kaldır: Seçimi iptal eder. Üst Seç: Bir gruptaki nesnelerden biri seçili durumdayken nesneye ait grubun tamamını seçer. Alt Seç: ĠĢaretçi (pointer) aracıyla seçilen bir gruptaki tüm nesneleri ayrı ayrı seçer. Benzerlerini Seç: Tek bir Bitmap nesnesinde, mevcut seçimdeki renklere benzeyen renklerin etrafında ilave bir seçim oluģturur. Tersini Seç: Seçili durumda olan pikselleri seçimden çıkarır ve bunların dıģındaki pikselleri seçer. GeçiĢ YumuĢatma: Seçimin kenarlarına yumuģak geçiģler uygular. Seçim Çerçevesini GeniĢlet: Seçimi ayarlanan bir piksel sayısına göre geniģletir. Seçim Çerçevesini Daralt: Seçimi ayarlanan bir piksel sayısına göre daraltır. Seçim Çerevesine kenarlık Ekle: Ayarlanan bir piksel sayısına göre mevcut seçimin dıģında bir seçim oluģturur. Bu seçim orijinal seçimin etrafında bir sınır oluģturmak üzere bir renkle doldurulabilir. Seçim Çerevesini DüzgünleĢtir: Seçimi ayarlanan bir piksel sayısına göre yumuģatır. Seçim Çerçevesini Yola DönüĢtür: Seçimi bir vektör biçiminden bir yola dönüģtürür. 40

T.C. MĠLLÎ EĞĠTĠM BAKANLIĞI BĠLĠġĠM TEKNOLOJĠLERĠ HTML ĠLE BASĠT WEB ĠġLEMLERĠ 482BK0152 Ankara, 2012

ĠÇĠNDEKĠLER AÇIKLAMALAR... iii GĠRĠġ... 1 ÖĞRENME FAALĠYETĠ 1... 3 1. ĠNTERNET ORTAMI VE WEB TASARIMI... 3 1.1. Ġnternet... 3 1.1.1. IP (Internet Protocol) Numarası... 3 1.1.2. Alan Adı (Domain)... 4 1.1.3. Hosting (Barundırma)... 4 1.2. WEB Tarayıcıları... 5 1.2.1. WEB Tarayıcıların ÇalıĢması... 5 1.3. Arama Motorları... 7 1.3.1. Arama Motorlarının ÇalıĢması... 7 1.3.2. Arama Motorları ile Arama Yapma... 7 1.4. WEB Tasarımı... 8 1.4.1. Sayfa Hazırlarken Dikkat Edilecek Noktalar... 8 1.4.2. Görsel Tasarım... 9 UYGULAMA FAALĠYETĠ... 10 ÖLÇME VE DEĞERLENDĠRME... 12 ÖĞRENME FAALĠYETĠ-2... 13 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETĠKETLERĠ... 13 2.1. HTML Komut Yapısı... 13 2.1.1. <HTML>... 15 2.1.2. <HEAD>... 15 2.1.3. <BODY>... 16 2.1.4. <TITLE>... 17 2.2. Listeleme Etiketleri... 17 2.2.1. <OL>... 17 2.2.2. <UL>... 18 2.2.3. <LI>... 19 UYGULAMA FAALĠYETĠ... 20 ÖLÇME VE DEĞERLENDĠRME... 22 ÖĞRENME FAALĠYETĠ-3... 23 3. METĠN VE GÖRÜNÜM DÜZENLEME ETĠKETLERĠ... 23 3.1. Metin Düzenleme Etiketleri... 23 3.1.1. <HX>... 23 3.1.2. <B>... 24 3.1.3. <U>... 24 3.1.4. <I>... 25 3.1.5. <BR>... 25 3.1.6. <P>... 26 3.1.7. <FONT>... 27 3.2. Görünüm Düzenleme Etiketleri... 28 3.2.1. <HR>... 28 UYGULAMA FAALĠYETĠ... 29 ÖLÇME VE DEĞERLENDĠRME... 31 i

ÖĞRENME FAALĠYETĠ-4... 32 4. BAĞLANTI (KÖPRÜ) OLUġTURMA... 32 4.1. Sayfa Ġçi Bağlantı OluĢturma... 32 4.2. Sayfa DıĢı Bağlantı OluĢturma... 34 4.3. E-Posta Adresine Bağlantı OluĢturma... 35 UYGULAMA FAALĠYETĠ... 36 ÖLÇME VE DEĞERLENDĠRME... 38 ÖĞRENME FAALĠYETĠ-5... 39 5. TABLOLAR... 39 5.1. <TABLE>... 39 5.1.1. TR... 39 5.1.2. TD... 40 5.1.3. Border... 40 5.1.4. Bgcolor... 41 5.1.5. Background... 42 5.1.6 Width... 42 5.1.7. Height... 42 5.1.8. Colspan... 43 5.1.9. Rowspan... 44 5.1.10. Cellspacing... 44 5.1.11. Cellpadding... 45 UYGULAMA FAALĠYETĠ... 46 ÖLÇME VE DEĞERLENDĠRME... 48 MODÜL DEĞERLENDĠRME... 49 CEVAP ANAHTARLARI... 51 KAYNAKÇA... 53 ii

ÖĞRENME FAALĠYETĠ 1 AMAÇ ÖĞRENME FAALĠYETĠ 1 Ġnternetle ilgili temel araçları kullanabileceksiniz. ARAġTIRMA Günümüzde kullanılmakta olan web tarayıcı programlarının neler olduğunu ve bunlar arasındaki farkları araģtırınız. 1. ĠNTERNET ORTAMI VE WEB TASARIMI 1.1. Ġnternet Ġnternet, dünya üzerindeki birçok bilgisayar sistemini TCP/IP (Transmission Control Protocol/Internet Protocol) protokolü ile birbirine bağlayan ve her geçen gün daha fazla büyüyen bir iletiģim ağıdır. 1.1.1. IP (Internet Protocol) Numarası Resim 1.1: Internet IP (Internet Protocol), bilgisayarların birbirleri ile iletiģim kurmalarını sağlayan standart bir protokoldür. Ġnternet Protokol adresi, TCP/IP standartını kullanan bir ağda bulunan cihazların birbirleriyle iletiģim kurmak ve veri alıģveriģinde bulunmak için kullandıkları benzeri olmayan bir numaradır. IP numarası, iletilen bilginin doğru adrese 3

gönderilmesini veya doğru adresten alınmasını sağlar. Ġki bilgisayar iletiģim kurdukları zaman birbirlerini bulmak için IP adresini kullanırlar. Gerçek hayattan bir örnek vermek gerekirse herkesin oturduğu evin bir adresi vardır. Nasıl ki bir kiģiye mektup göndermemiz gerektiğinde zarfın üstüne açık adresini yazıyorsak ve bu adrese mektubumuz ulaģtırılıyorsa IP numaraları da bilgisayarın açık adresidir. IP numaraları A.B.C.D Ģeklinde bir yapıdır. Buradaki A,B,C,D ye karģılık 0-255 arası bir sayı gelmektedir. Örneğin 212.200.83.75 bir IP numarasıdır. 1.1.2. Alan Adı (Domain) Domainler; 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. Internet adreslerinde 4 temel bölüm yer almaktadır. www.alanismi.alanturu.ulkekodu Örneğin; www.meb.gov.tr internet adresinde gov web sitesinin bir hükümet kurumuna ait olduğunu tr ise alanın Türkiye ye ait olduğunu belirtmektedir. Ġnternet adreslerinde kullanılan alan türlerine ait bazı kısaltmalar aģağıdaki gibidir: 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) Bunun yanında kullanılan ülke kısaltmaları da vardır. Bunlardan bazıları; tr: Türkiye, br: Brezilya, uk: Ġngiltere, fi: Finlandiya, ru: Rusya gibi 1.1.3. Hosting (Barundırma) Hosting in kelime anlamı Ev sahipliği yapmak, barındırmak tır. Hosting, hazırlanan web sitelerinin belirlenen alan isimlerine göre internet ortamında yayımlanmasını sağlayan hizmet türüdür. Bu hizmet, hosting 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. 4

1.2. WEB Tarayıcıları Resim 1.2: Server (Sunucu) sistemleri Web servislerinin iģlevi, temelinde metin aktarmadır. GeliĢmiĢ bir mimari kullanan Web servisi, Hipermetin Transfer Protokolü - HTTP (HyperText Transfer Protocol) adı verilen bir protokol üzerinde çalıģmaktadır. Web üzerinde bilgiler, Web servisleri aracılığıyla sunulur. Sunulan her bir elektronik dosyaya Web Sayfası adı verilir. Web sayfalarını kiģilerin kullanabilmesi için geliģtirilmiģ programlar ise Web Tarayıcısı (Browser) olarak adlandırılır. Ġçerisinde bütünleģik bir veya daha fazla web sayfası olan alanlar Web Sitesi olarak adlandırılır. Web siteleri çok çeģitli amaçlarla yapılabilir. Bunlar kısaca e-ticaret, eğitim, finans, iletiģim gibi çeģitli amaçlarla yapılmıģ olabilir. Bir web sayfasından diğer bir web sayfasına geçiģ yapılabilmektedir. Bu gibi geçiģ bilgisi barındıran metinlere (link) adı verilir. Web sayfaları bu gibi yeteneklere sahip olduğu için Hipermetin (hypertext) olarak adlandırılmaktadır. Web tarayıcıları, hipermetinde belirtilen özelliklere göre sayfaları görüntüleme yeteneklerine sahip bir programdır. Tarayıcılar sayesinde web sayfaları görüntülenebilir ve web sayfaları arasında gezinti yapılabilir. 1.2.1. WEB Tarayıcıların ÇalıĢması Web tarayıcıları, istemci-sunucu sistemine göre çalıģmaktadırlar. Ġstemci (client), olarak adlandırılan Web sayfalarını kullanmanız için seçilen tarayıcı programıdır. Sunucu (server) olarak adlandırılan ise bir web tarayıcısının istekte bulunduğu web sayfalarını hazırlayarak sunan sistemdir. Web sayfası istek yazısına URL (Ġnternet Kaynak Etiketi) denir. Örneğin, http://www.meb.gov.tr. Web tarayıcısı çalıģtırılıp URL isteği yaptığında, web üzerinde bağlanmak istediği sunucu bilgisayar adresi kendisine bildirilir. Bu adresi alır ve sunucu bilgisayara bağlanır. Bu adresteki sunucu,istenilen web sayfasına iliģkin dosya veya dosyaları hazırlayarak istekte 5

bulunan web tarayıcısına sunar. Web tarayıcısı bu bilgileri alarak çalıģtığı bilgisayara aktarır. ÇalıĢtığı bilgisayara aktardığı web sayfası bilgilerini, sayfada istenilen Ģekilde kullanıcıya sunar. URL (Uniform Resource Locators): Web sayfasının internet üzerindeki adres bilgilerini içerisinde barındıran bilgidir. URL adresleri 3 parçadan oluģur. Bunlar protokol adı, sunucu ismi, dizin veya dosya ismi. Örnek; http://www.meb.gov.tr/duyuruayrinti.asp verilebilir. Web tarayıcı yazılımları çok çeģitlidir ve ücretsizdir. Herhangi bir web tarayıcı yazılımını, üreten firmanın sitesine girerek bilgisayarımıza indirip kurabiliriz. Sundukları arayüz ve kullanım açısından her biri farklı özellikler sunar. Hepsinden istediğimiz performansı almamız mümkündür. Tarayıcı yazılımları, açılır menüler, butonlar, kısayol ve yardım özelliklerini içlerinde barındırırlar ve kullanımları kolaydır. Tarayıcı yazılımlarının arayüzlerindeki butonları gözden geçirecek olursak; Geri, bir önceki gösterilen sayfaya gitmek için kullanılır. Ġleri, geri ile bir önceki gösterilen sayfaya dönülmüģse, dönülen sayfadan önceki sayfaya gitmek için kullanılır. Dur, sayfaya iliģkin bilgileri bilgisayara yükleme iģlemini durdurmak için kullanılır. Ana Sayfa, tarayıcı ilk açıldığında giriģ sayfası olarak ayarlanan sayfaya gitmek için kullanılır. Yenile, YüklenmiĢ sayfanın tekrar yüklenmesi istendiğinde kullanılır. Sayfa ekrana eksik geldiyse bazı nesneler ekranda tam görünmüyorsa kullanılır. Adres Çubuğu, görüntülenmek istenilen web adresinin yazıldığı alandır. Durum Çubuğu: Tarayıcı yazılımlarda pencerenin en alt kısmında olur ve istediğimiz sayfanın bilgisayarımıza yüklenme aģamasını veya kullanıcıya verilen uyarıları gösterir. Web tarayıcısı ile bir web sayfasına bağlanmak için yapmamız gereken iģlemler kısaca aģağıdaki gibi sıralanabilir. Web tarayıcı programının çalıģtırılması Adres yazma alanına istenilen URL adresinin yazılması Git butonuna veya Klavyeden Enter tuģuna basılması Web tarayıcı yazılımlarıyla bir web sayfası ekrana getirildiğinde, sayfa üzerinde fare gezdirilirken, baģka sayfalarla bağlantısı olan metinlerin üzerine gelindiğinde farenin imleci veya metnin Ģekli değiģecektir. Bu metne fare ile tıklandığında diğer web sayfasına geçiģ sağlanır.bu sayede sitede veya web sayfalarında gezinti olayı sağlanmıģ olur. Bir sayfaya bağlanıldığında veya bir sayfa bağlantısına tıklandığında, Web tarayıcısı internet üzerindeki baģka bir bilgisayara bağlanır ve sayfaya iliģkin dokümanı çalıģtığı bilgisayara kaydederek 6

sizin kullanımınıza sunar. Web sayfasının bilgisayarınıza kaydedilip görüntülenmesi iģlemine sayfa yüklenmesi adı verilir. 1.3. Arama Motorları Ġnternet, bütün dünya üzerindeki bilgisayarların birbirine bağlanabilmesi üzerine kurulmuģ bir sistemdir. Bu nedenle üzerinde pek çok sayıda site ve sayfa bulunmaktadır. Bu site ve sayfalar milyonlarca konuda hizmet verir. Ġnternette aradığımız site, sayfa veya konunun nerede olduğunu bulmamızı sağlayan araçları barındıran sitelere arama motorları adı verilir. 1.3.1. Arama Motorlarının ÇalıĢması Ġnternet ortamında aradığımız bir bilgiye hızlı bir Ģekilde eriģimi sağlamak için arama motorları kullanılmaktadır. Web üzerinde bulunan tüm içeriği indeksleyen, arama motorları mevcuttur. Kullanıcı arama motoruna, aramak istediği bilgiye iliģkin bir veya birden fazla anahtar kelime girdiğinde, arama motorları içerisinde bu kelime veya kelimeleri barındıran ilgili dosyaları bularak, ilgili site veya web sayfalarını ekrana listeleyerek kullanıcıya sunar. Kullanıcı arama motorlarından herhangi birinin web adresini, tarayıcının adres kısmına yazarak eriģebilir. Aradığımız web adresi veya sayfasına eriģmek için en kısa yol, arama motorlarını kullanmaktan geçer. Çünkü arama motorları dünya üzerindeki bütün sitelerin bilgilerini tarayarak sürekli olarak güncel bilgiler sunmaktadır. Yüzlerce hatta binlerce adresi listelemeyi arama motorları nasıl yapıyor? Arama motorları, dünya üzerindeki web sitelerini sürekli bir Ģekilde çalıģan kiģiler, otomatik taramalar ve kayıt ekranları gibi araçlarla kendi veri tabanlarına kaydederler. Arama motorlarının internet üzerinde otomatik taramasını yapan programlar, genel olarak spider, crawlers, robots olarak isimlendirilmiģtir. Bu programlar sürekli olarak interneti tarayarak değiģen ve eklenen sayfalardaki bilgileri, arama motoru veri tabanına kaydederler. 1.3.2. Arama Motorları ile Arama Yapma Arama motorlarını kullanırken istediğiniz bir bilgiyi bulabilmek için anahtar birtakım kelimelere ihtiyaç duyulur. Arama motorları kullanımı Ģu aģamalardan oluģmaktadır: Tarayıcının adres kısmına arama motoru adresi yazılarak fare ile git butonuna tıklanır veya klavyenin enter tuģuna basılır. Arama motoru sayfası açıldığında sayfada arama yapmak istediğimiz kelimeleri yazacağımız alan karģımıza çıkar. BoĢ alana aranacak kelimeler yazılır, ardından Ara (Search) butonuna fare ile tıklanır. Tarayıcı ekranına aradığımız konuyla ilgili yüzlerce web adresi çıkar. 7

Arama motorunun sunduğu imkânlara göre sonuçlar sadece doküman değil, ses, video ve haber gibi farklı biçimlerden de oluģabilir. Çıkan adreslere fare ile tıklanarak araģtırmamıza devam ederiz. Aradığımız bilgilere eriģmek için her zaman bu yöntemi kullanabiliriz. Aynı anda birden fazla kelimeyle arama yapmak isteyebilirsiniz. Örneğin, birden fazla kelimeyi aynı sayfada aramak istediğimizde çift tırnak içe almamız gerekecektir Eğitim Öğretim böyle bir arama istediğimizde sayfada Eğitim Öğretim kelimeleri yan yana varsa bize listelenecektir. Mantıksal olarak birden fazla Ģartı kullanmak istiyorsak mantıksal arama yöntemini kullanmamız gerekir bunun için arama motorları bize mantıksal operatörler sunmuģtur. Bunlar: AND, OR ve NOT kelimeleridir. Bu operatörler ve kullanım Ģekilleri aģağıdaki gibidir. Operatör Örnek Kullanım Sonuç AND Meb AND Öğrenci Ġçerisinde Meb ve Öğrenci geçen tüm siteleri listeler OR Video OR Resim Ġçerisinde Video veya Resim olan tüm siteleri listeler NOT Resim NOT Ses Ġçeriğinde Resim geçen Ses geçmeyen tüm siteleri listeler 1.4. WEB Tasarımı Tablo 1.1: Arama motorlarında mantıksal operatörlerin kullanımı 1.4.1. Sayfa Hazırlarken Dikkat Edilecek Noktalar Herhangi bir Web sayfası hazırlanırken, sitenin hitap edeceği kitle, içeriği ve amacı gibi konulara dikkat edilmesi gerekmektedir. Dikkat edilmesi gereken bir diğer husus da Web sayfalarının hızlı yükleniyor olması gerektiğidir. Bazı durumlarda hazırlanan Web sayfası farklı kullanıcı ekranlarında farklı görünebilmektedir. Bu durum, tarayıcı yazılımından (sürüm vb.) veya kullanıcı tercihlerinden (yazı boyutu, ekran çözünürlüğü vb.) kaynaklanıyor olabilir. Tarayıcı penceresi, kullanılan ekran boyutu ile sınırlı olmak üzere istenilen boyuta değiģtirebilir. Tasarımcının, hangi ekran çözünürlüğüne göre tasarım yapılacağına karar verilmesi gerekir. Bir web sayfası hazırlarken, sayfa adı, sayfada yer alacak resim, müzik, animasyon gibi herhangi bir dosyanın ismi kaydedilirken Türkçe ve özel karakterler(ç,ģ,ı,ö,ü,ğ,?,/,vs.) içermemelidir. 8

Bilgisayarınızda sayfalarınızı kaydedeceğiniz bir klasör ve diğer resim, müzik, animasyon gibi dosyalarınızı kaydedeceğiniz bir alt klasör oluģturunuz. Böylelikle çalıģmalarınız daha düzenli olacağından, aradığınız bir dosyaya da rahatlıkla eriģebileceksiniz. 1.4.2. Görsel Tasarım Ġnternet üzerindeki sayfalar her zaman kullanıcılara hizmet vereceği için en önemli unsuru görselliğidir. Çünkü her kullanıcı beklentileri karģılayan siteyi aramaktadır. Kullanıcının ilk karģılaģtığı ise sitenin görselliğidir. Bu durum dikkate alındığında, Web sitesi görselliğinde sitenin hedef kitlesi tespit edilip hedef kitlenin beklentileri belirlenmelidir. Bu belirlendikten sonra hedef kitle beklentilerine uygun olarak: Sayfa üzerindeki nesnelerin yerleri ve büyüklükleri tespit edilmelidir. Sayfa renklerinin ne olacağına karar verilmelidir Sayfadaki yazıların büyüklükleri ve yazı tiplerinin ne olacağı belirlenmelidir. Sayfanın birden fazla dilde kullanımı söz konusu ise ayrı ayrı sayfalarda dilin özelliklerine göre nesneler tespit edilmelidir. Sayfanın kullanıcı isteklerine göre değiģken olması sağlanmalıdır. Sitenin değiģen bilgi durumunda rahat değiģmesi için gerekli tedbirler alınmalıdır. Sayfalar arası geçiģlerde bütünlük arz etmelidir. Sayfalar kullanıcıya her zaman yardım ve yönlendirme yapan özellikler taģımalıdır. 9

ÖĞRENME FAALĠYETĠ-2 AMAÇ ÖĞRENME FAALĠYETĠ-2 HTML dili temel etiketlerini kullanabileceksiniz. ARAġTIRMA Web tasarımı hazırlamak için kullanılan programların hangileri olduğunu araģtırınız? 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETĠKETLERĠ 2.1. HTML Komut Yapısı Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir. Html komutları herhangi bir metin (text) düzenleme editöründe yazılabileceği gibi, çeģitli web tasarımı editörlerini kullanarak da oluģturulabilir. Html komutları etiketlerden (tag) oluģur. Html komutları yazılırken aģağıdaki kurallara dikkat edilmesi gerekir; Html komutları < ve > iģaretleri arasına yazılır. Burada yer alan < > etiketleme yapmak için kullanılan iģarettir. <etiketadi> </etiketadi>, <tag>..</tag> Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ģ, ç, ö, ü, ı, ğ) Html komutları büyük küçük harf duyarlı değildir. BaĢka bir deyiģle tümü büyük harflerle açılmıģ olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.<body>.</body> veya <Html>.</html> Açılan bir etiket kapatılmalıdır. Ġlk açılan etiket en son kapatılır ve etiketi kapatma sırasında / iģareti unutulmamalıdır. 13

Örnek: HTML dosyaları sunucu bilgisayarın sabit diskinde.html ya da.htm uzantısı ile saklanır. Kaydetme iģlemi sırasında Dosya-Kaydet seçeneğine tıklanır. Dosya-Kaydet komutuna tıklandıktan sonra karģınıza gelen Farklı Kaydet penceresinden sırasıyla Dosya Adı ve Dosya türü belirlenir. ġekil 1.1: Html dosyasını kaydetme 14

2.1.1. <HTML> <html> etiketi, html kodlarının yazımına baģladığımızı gösteren etikettir. Tüm html kodları <html> </html> arasında yer alır. </html> ile html kodlarının yazımının bittiği anlaģılır. Bu etiketin hiçbir parametresi yoktur. 2.1.2. <HEAD> Hazırlayacağımız 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ümdür. name Meta etiketinde kullanılan parametreler Tablo 1.1. de gösterilmiģtir. http-equiv Size Kullanılacak parametreler Görevi Author, description ve keywords özellikleri tanımlanır. Refresh, expires, content ve content-styletype özellikleri Yazının boyu belirlenir. Tablo 1.1: Meta etiketinde kullanılan parametreler NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir. <meta name="author" content="özgü"> <meta name="description" content="sayfanın tanımını yazınız"> <meta name ="description" content ="Bu sayfa web tasarımı 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."> ġekillerinde yazılır. 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. Sıklıkla kullanılan meta etiketleri ve açıklamaları: <meta http-equiv=content-type content="text/htm; charset=windows- 1254"> <meta http-equiv=content-type content="text/htm; charset=iso-8859-9"> <meta http-equiv=content-type content="text/htm; charset=utf-8"> Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği sağlamak için kullanılır. <meta http-equiv="expires" content ="Tarih"> 15

Güncelleme için kullanılır. Ġnternette açılan bir sayfa bilgisayara kaydedilir. Bu sayfa tekrar açılamak istendiğinde, bilgisayardaki kayıtlı sayfa açılır. Bu etiket ile belirtilen tarihten sonra bu sayfa açılmak istenirse sayfanın tekrardan serverdan yüklenmesi sağlanır. <meta http-equiv="expires" content ="Wed, 29 Dec 2011 15:21:59 GMT"> <meta http-equiv="refresh" content="5; url=anasayfa.htm"> Sayfanın belirtilen süre sonra yenilenmesini sağlar. Yukarıdaki örnekte sayfa 5 saniye sonra yenilenir ve URL de belirtilen anasayfa.htm sayfası açılır. Eğer URL boģ bırakılırsa aynı sayfa tekrarlanır. <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 için all, engelleme için none kullanılır. Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez. 2.1.3. <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. Body etiketi ile birlikte kullanılabilecek parametreler ve görevleri aģağıda gösterilmiģtir. Bgcolor: HazırlamıĢ olduğunuz web sayfasının arka plân rengini belirlemek için kullanılır. Kullanımı; <body bgcolor= blue > </body> Background: HazırlamıĢ olduğunuz web sayfasının zemininin bir resimden oluģmasını isteyebilirsiniz. Bu parametre arka plânda kullanılmak istenilen resmi belirlemek için kullanılır. Kullanımı; <body background= resim.jpg >.</body> Link: Web sayfanızda kullanacağınız linklerin rengini belirlemek için kullanılır. Alink: Web sayfanızdaki herhangi bir Linke tıklandığı zaman oluģacak rengin ne olacağını belirlemek için kullanılır. Vlink: Web sayfanızdaki önceden ziyaret edilmiģ linklerin renginin hangi renk olacağını belirlemek için kullanılır. 16

2.1.4. <TITLE> Sayfanın tarayıcıdaki baģlığının ne olacağını belirlemek için kullanılır. Title etiketleri <Head>.</Head> etiketleri arasında yer alır. Kullanımı; <title> görüntülenmesini istediğiniz baģlık</title> Örnek: 2.2. Listeleme Etiketleri 2.2.1. <OL> ġekil 1.2: Title etiketinin kullanılması 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. Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından baģlayarak sıralı listenizi oluģturabilirsiniz. <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır. Örnek 1: Burada <ol> etiketini kullanarak listeleme iģlemine baģlıyoruz. <li> etiketini kullanarak da listeleyeceğimiz elemanların isimlerini yazıyoruz. 17

Type parametresi kullanarak listenin rakamla mı harfle mi baģlayacağını belirleyebiliriz. A harfi yerine küçük a harfi yazılırsa sıralama a, b, c,. Ģeklinde küçük harflerle olacaktır. I harfi yerine küçük i harfi yazılırsa, sıralama i, ii, iii,. Ģeklinde küçük roma rakamları ile yapılacaktır. Sıralamanın her zaman 1 den veya A dan baģlamasını istemeyebiliriz. Bu tür durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı C harfinden baģlatmak istiyorsak start değerine C yazmak yerine 3 yazmak zorundayız. 2.2.2. <UL> <ul> etiketi madde iģaretleri Ģeklinde listeleme yapmak için kullanılır. 18

Type parametresi ile kullanacağınız madde iģaretinin Ģeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boģ daire) ve square (içi dolu kare) dir. 2.2.3. <LI> Liste oluģturmak için liste elemanlarını belirtmede kullanılan etikettir. Sıralamanın hangi Ģekilde olacağını ise <ol> ve <ul> etiketleri belirler. 19

UYGULAMA FAALĠYETĠ UYGULAMA FAALĠYETĠ AĢağıdaki iģlem basamaklarını uygulayarak konuyu pekiģtiriniz. ĠĢlem Basamakları Html dosyası hazırlama programına aģağıdaki kodları yazarak Uygulama1 adında bir HTML belgesi oluģturunuz. Öneriler HTML dosyası hazırlamak için kullanılan editörü açınız. Dosya-Kaydet komutunu çalıģtırınız. Kayıt türü olarak Tüm Dosyalar seçeneğini seçiniz. Dosyanızı kaydediniz. AĢağıdaki görüntüyü elde etmeyi sağlayacak HTML kodlarını yazınız. Listeleme etiketlerini kullanınız. 20

ÖĞRENME FAALĠYETĠ-3 ÖĞRENME FAALĠYETĠ-3 AMAÇ HTML dili metin biçimlendirme etiketlerini kullanabileceksiniz. ARAġTIRMA Metin ve görüntü düzenlemek için kullanılacak html etiketlerinin neler olduğunu araģtırınız. 3. METĠN VE GÖRÜNÜM DÜZENLEME ETĠKETLERĠ 3.1. Metin Düzenleme Etiketleri Html etiketleri kullanılarak metinler üzerinde görsel düzenlemeler yapılabilir. Bir metnin rengi, Ģekli, boyutu vs. üzerindeki değiģiklik ve düzenlemelerin html etiketlerini kullanarak nasıl yapılacağına bakalım. 3.1.1. <HX> <HX> etiketleri, dokümana baģlık eklemek için kullanılan etiketlerdir. <hx> etiketindeki x ifadesi, 1 den 6 ya kadar değer almaktadır. Sayı azaldıkça yazı büyüklüğünde artıģ olmaktadır. Buradaki <h1> </h1> en büyük baģlığı, <h6> </h6> ise en küçük baģlığı gösterir. 23

<HX> ile kullanılacak parametrelerden birisi align parametresidir. Align parametresi, Left (sola hizala), right (sağa hizala), center (ortala), justify (iki yanayasla) değerlerini alabilir. <h1 align= center > Milli Eğitim Bakanlığı </h1> Ģeklinde yazıldığında Milli Eğitim Bakanlığı yazısı sayfaya ortalanmıģ bir Ģekilde yazılacaktır. 3.1.2. <B> Ġstenilen metni kalın (bold) olarak yazmak için kullanılır. Kullanımı: <B> </B> Ģeklindedir. Örnek: BoĢ zaman yoktur boģa geçen zaman vardır. Tagore 3.1.3. <U> Ġstenilen metni Altı çizili (underline) olarak yazmak için kullanılır. Kullanımı: <U> </U> Ģeklindedir. Örnek: BoĢ zaman yoktur boģa geçen zaman vardır. Tagore 24

3.1.4. <I> Ġstenilen metni eğik(italik) olarak yazmak için kullanılır. Kullanımı: <I> </I> Ģeklindedir. Örnek: BoĢ zaman yoktur boşa geçen zaman vardır. Tagore 3.1.5. <BR> Enter tuģu görevini görür. Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz. Örnek: Ey Türk Gençliği! Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini, ilelebet, muhafaza ve müdafaa etmektir. 25

3.1.6. <P> Paragraf oluģturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boģluk bırakarak, metne satır baģından devam edilmesini sağlar. Örnek: 26

3.1.7. <FONT> <FONT> etiketi, kullanıldığı yerdeki 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ının büyüklüğünü belirlemek için kullanılır(1-7 arası değerler alır.). Örnek: <FONT SIZE ="1"> Merhaba</FONT> <FONT SIZE ="4"> Merhaba</FONT> <FONT SIZE ="7"> Merhaba</FONT> Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aģağıdaki gibi olacaktır. Size parametresine -1, +2 gibi değerler verilerek de metnin büyüklüğü verilen değer kadar arttırılıp eksiltilebilir (Burada font büyüklüğü 1 eksiltilip, 2 arttırılmıģtır.). Color: Yazı tipi etiketi içerisinde metnin rengini değiģtirmek için kullanılır. Kullanmak istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değiģikliği yapabilirsiniz. Örnek: <FONT size="5" COLOR="aqua"> Merhaba</FONT> <FONT size="5" COLOR="#FF0000"> Merhaba</FONT> Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aģağıdaki gibi olacaktır. Face: Yazı tipi karakter biçiminde değiģiklik yapmak için kullanılır. Örneğin Face=" Times New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır. <font face="algerian" size="7" color="purple">merhaba</font> Burada yazı tipi olarak Algerian yazı tipi kullanılmıģtır. Yukarıdaki kodlar yazılıp kaydedildiğinde tarayıcıdaki görüntü aģağıdaki gibi olacaktır. 27