Bilgisayar ALANI Web Tasarımına Giriş MODÜLÜ

KIRGIZİSTAN CUMHURİYETİ GENÇLİK, EMEK VE İSTİHDAM BAKANLIĞI KIRGIZİSTAN TÜRKİYE MANAS ÜNİVERSİTESİ NİTELİKLİ İŞGÜCÜ GELİŞTİRME PROJESİ NİGEP САПАТТУУ ЖУМУШЧУ КАДРЛАРДЫ ДАЯРДОО ДОЛБООРУ САЖУКАД Bilgisayar ALANI Web Tasarımına Giriş MODÜLÜ BİŞKEK-2012

Bu modül, Kırgızistan Cumhuriyeti Gençlik, Emek ve İstihdam Bakanlığı ile Kırgızistan-Türkiye Manas Üniversitesi arasında gerçekleştirilen, Nitelikli İşgücü Geliştirme Projesi (NİGEP- САЖУКАД) kapsamında KTMÜ Öğretim Elemanları tarafından hazırlanmış olan ve eğiticiler ile öğrencilere rehberlik etmeye yönelik öğrenme materyalidir. Kırgızistan-Türkiye Manas Üniversitesi tarafından ücretsiz olarak verilmiştir. PARA İLE SATILMAZ. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 2

İÇİNDEKİLER AÇIKLAMALAR GİRİŞ BİRİNCİ BÖLÜM Adobe Photoshop 1.1. Çalışma Alanı 1.1.1. Çalışma alanıyla ilgili temel bilgiler 1.1.2. Paneller ve menüler 1.1.3. Araçlar 1.1.4. Görüntüleri gösterme 1.1.5. Cetveller, ızgara ve kılavuzlar 1.1.6. Hazır ayarlar, Eklentiler ve Tercihler 1.1.7. Geri alma ve geçmiş paneli 1.1.8. Adobe Çevrimiçi Hizmetler 1.2. Görüntüleri açma ve içe aktarma 1.2.1. Görüntü temelleri 1.2.2. Görüntü boyutu ve çözünürlük 1.2.3. Kameralardan ve tarayıcılardan görüntüleri alma 1.2.4. Görüntüleri oluşturma, açma ve içe aktarma 1.2.5. Dosyaları yerleştirme 1.2.6. Yüksek dinamik aralık görüntüleri 1.3. Renk temelleri 1.3.1. Renk hakkında 1.3.2. Renk modları 1.3.3. Renk modları arasında dönüştürme 1.3.4. Renk seçme 1.3.5. Kuler paneli 1.4. Renk ve ton ayarlamaları 1.4.1. Histogramları ve piksel değerlerini görüntüleme 1.4.2. Renk ayarlamalarını anlama 1.4.3. Görüntü rengini ve tonunu ayarlama 1.4.4. Görüntüleri baskı hedefine yönlendirme 1.4.5. Renkleri eşleştirme, değiştirme ve karıştırma 1.4.6. Hızlı görüntü ayarlamaları yapma 1.4.7. Görüntülere özel renk efektleri uygulama 1.5. Rötuş ve dönüştürme 1.5.1. Kırpma, döndürme ve tuvali ayarlama 1.5.2. Görüntüleri rötuşlama ve onarma 1.5.3. Görüntü deformasyonunu ve pürüzlerini düzeltme 1.5.4. Görüntü keskinliğini ve bulanıklığını ayarlama 1.5.5. Nesneleri dönüştürme 1.5.6. Kukla Çarpıtma 1.5.7. İçeriğe duyarlı ölçekleme 1.5.8. Sıvılaştır filtresi 1.5.9. Ufuk Noktası 1.5..10 Photomerge ile panoramik görüntü oluşturma 1.6. Seçme ve maskeleme NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 3

1.6.1. Seçim yapma 1.6.2. Piksel seçimlerini ayarlama 1.6.3. Seçilen pikselleri taşıma, kopyalama ve silme 1.6.4. Kanallar 1.6.5. Seçimleri kaydetme ve maskeleri kullanma 1.6.6. Kanal hesaplamaları 1.7. Katmanlar 1.7.1. Katman temelleri 1.7.2. Seçme, gruplama ve bağlama katmanları 1.7.3. Katmanları taşıma, yığınlama ve kilitleme 1.7.4. Katmanları yönetme 1.7.5. Opaklık ve karıştırma 1.7.6. Katman efektleri ve stiller 1.7.7. Ayarlama ve dolgu katmanları 1.7.8. Geri dönüşlü düzenleme 1.7.9. Katman bileşenleri 1.7.10. Maskeleme katmanları 1.8. Boyama 1.8.1. Boyama araçları 1.8.2. Fırça hazır ayarları 1.8.3. Fırçalar oluşturma ve bunları değiştirme 1.8.4. Karıştırma modları 1.8.5. Degradeler 1.8.6. Seçimleri, katmanları ve yolları doldurma ve konturlama 1.8.7. Desenleri oluşturma ve yönetme 1.9. Çizim 1.9.1. Çizim hakkında 1.9.2. Şekil çizme 1.9.3. Kalem araçlarıyla çizim 1.9.4. Yolları yönetme 1.9.5. Yolları düzenleme 1.9.6. Yollar ve seçim kenarlıkları arasında dönüştürme 1.9.7. Yollara renk ekleme 1.10. Filtreler 1.10.1. Temel filtre bilgileri 1.10.2. Filtre efektleri referansı 1.10.3. Belirli filtreleri uygulama 1.10.4. Işık Efektleri Ekleme 1.11. Yazım 1.11.1. Metin oluşturma 1.11.2. Metin düzenleme 1.11.3. Karakterleri formatlama 1.11.4. Fontlar 1.11.5. Satır ve karakter aralığı 1.11.6. Yazıyı ölçekleme ve döndürme 1.11.7. Paragrafları formatlama 1.11.8. Yazı efektleri oluşturma 1.11.9. Asya dillerinde yazı 1.12. Görüntüleri kaydetme ve dışa aktarma 1.12.1. Görüntüleri kaydetme 1.12.2. PDF dosyalarını kaydetme 1.12.3. Diğer formatlardaki dosyaları kaydetme ve dışa aktarma 1.12.4. Dosya formatları NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 4

1.12.5. Meta veriler ve notlar 1.12.6. Digimarc telif hakkı korunması 1.12.7. Photoshop görüntülerini diğer uygulamalara yerleştirme 1.13. Web grafikleri 1.13.1. Web grafikleriyle çalışma 1.13.2. Web sayfalarını dilimleme 1.13.3. Dilimlerde değişiklik yapma 1.13.4. Dilim seçenekleri 1.14. Video ve animasyon 1.14.1. Photoshop'ta video ve animasyon 1.14.2. Video görüntüleri oluşturma 1.14.3. Video dosyalarını ve görüntü sıralarını içe aktarma (Photoshop Extended) 1.14.4. Video çekimini yorumlama (Photoshop Extended) 1.14.5. Video katmanlarında kareleri boyama (Photoshop Extended) 1.14.6. Video ve animasyon katmanlarını düzenleme (Photoshop Extended) 1.14.7. Kare animasyonları oluşturma 1.14.8. Zaman çizelgesi animasyonları oluşturma (Photoshop Extended) 1.14.9. Video ve animasyon önizleme 1.14.10. Video ve animasyonları kaydetme ve dışa aktarma ÖLÇME VE DEĞERLENDİRME ÖĞRENME FAALİYETİ 2 2.1. Web teknolojilerine giriş 2.1.1. ınternet nasıl çalışır? 2.1.2. http ve tcp/ıp 2.1.3. web server 2.1.4. browser 2.1.5. html nedir? 2.2. HTML diline giriş 2.2.1. HTML'de Metin 2.2.2. HTML'de Grafik ve Multimedya Ögeleri 2.2.3. HTML'de Renkler 2.2.4. Etiketler (Tag) ve Parametreler (Attribute) 2.2.5. HTML Editörleri 2.2.6. HTML Sayfasının Bölümleri 2.2.7. Web sayfasındaki metinlerin dilini belirtme 2.2.8. Metne Satır Başı Verme 2.3. HTML'de metinleri düzenleme 2.3.1. Başlık Etiketleri 2.3.2. Paragraf Etiketi 2.3.3. Ortalama Etiketi 2.3.4. Koyu, Eğik (İtalik) ve Altıçizili Yazılar 2.3.5. Diğer Metin Düzenleme Etiketleri 2.3.6. Özel Karakterler 2.3.7. Yorum-Açıklama Satırı 2.3.8. Yazı Tipi (Font) 2.3.9. Metinleri Renklendirme 2.3.10. Listeler 2.3.10.1. Sıralı Listeler (Ordered List) İKİNCİ BÖLÜM HTML Dili NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 5

2.3.10.2. Sırasız Listeler (Unordered List) 2.3.10.3. Tanımlama Listeleri (Definition List) 2.4. Grafik ve Renkler 2.4.1. Grafik Etiketi 2.4.2. Grafik Dosyasının Ebatları 2.4.3. Resmin Gerçek ve Görüntülenen Ebadı 2.4.4. Resimleri Hizalama 2.4.5. hspace - vspace Parametreleri 2.4.6. border Parametresi 2.4.7. Sayfa Fonunda Resim Kullanmak 2.5. Bağlantılar 2.5.1. title Parametresi 2.5.2. target Parametresi 2.5.3. Baglantılarda Farklı Renkler Kullanmak 2.5.4. Resim Haritaları (Image Map) 2.6. Tablolar 2.6.1. border Parametresi 2.6.2. cellpadding ve cellspacing Parametreleri 2.6.3. Tabloyu Renklendirme ve Fon Olarak Grafik Kullanma 2.6.4. Tablo ve Hücrelerin Ebatlarını Belirlemek 2.6.5. Tablolarda Hizalama 2.6.6. Hücreleri Birlestirme 2.6.7. Bilgi Sunma Aracı Olarak Tablo 2.6.8. bordercolor Parametresi 2.7. Çerçeveler (Frames) 2.7.1. frameborder Parametresi 2.7.2. border Parametresi 2.7.3. bordercolor Parametresi 2.7.4. framespacing Parametresi 2.7.5. noresize Parametresi 2.7.6. scrolling Parametresi 2.7.7. marginwidth ve marginheight Parametreleri 2.7.8. Çerçeve İçindeki Baglantılarla Diger Çerçevelerin İçeriklerini Degistirmek 2.8. HTML'de Form 2.8.1. Formun Bölümleri 2.8.2. Action ve Method 2.8.3. Formda Doldurulacak Bosluklar ve saretlemeler Form Ögeleri 2.8.3.1. <input> Etiketi 2.8.3.2. Kullanıcının klavyesi ile bir metin girmesi için: type="text" 2.8.3.3. Kullanıcının parola girmesi için: type="password" 2.8.3.4. İsaretlenebilir kutular olusturmak için: type="checkbox" 2.8.3.5. Radyo dügmeleri olusturmak için: type="radio" 2.8.3.6. Tıklanabilir Form dügmeleri olusturmak için: type="button" 2.8.3.7. Gizli metin alanları olusturmak için: type="hidden" 2.8.3.8. Server a dosya göndermek için: type="file" 2.8.3.9. Seçme Kutusu: <select> Etiketi 2.8.3.10. Metin Alanı: <textarea> Etiketi 2.8.3.11. Gönder ve Sil dügmeleri (Submit ve Reset) 2.9. Form Bilgilerini e-posta Yolu ile Göndermek 2.9. Meta Etiketleri 2.10. HTML ve Multimedya ÖLÇME VE DEĞERLENDİRME NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 6

ÜÇÜNCÜ BÖLÜM CSS (Stil Sablonları) ÖĞRENME FAALİYETİ 3 3.1. Etiket İçinde style Parametresini Kullanma 3.2. <head>...</head> etiketleri arasında <style> etiketi ile stil grubu oluşturma 3.3. Harici bir CSS dosyası oluşturup bu dosyayı HTML sayfasına bağlama 3.4. Sınıf ve Kimlikli Seçiciler 3.5. Denetlenebilir Stil Özellikleri 3.5.1. Yazıtipi (Font) Özellikleri 3.5.2. Metin Özellikleri 3.5.3. Liste Özellikleri 3.5.4. Renk ve Zemin (Background) Özellikleri 3.5.5. Mouse İmlecini (Cursor) Degistirmek 3.5.6. Bağlantılara Dekoratif Efektler Vermek 3.5.7. CSS-P (CSS-Positioning) 3.5.7.1. <div> ve <span> Etiketleri 3.5.7.2. Katman Olusturmak 3.5.8. Boşluklar (Margin and Padding) 3.5.9. Sınırlar (Borders) ÖLÇME VE DEĞERLENDİRME DÖRDÜNCÜ BÖLÜM Java Script 4.1. Java Scripte giriş 4.2. DEĞİŞKENLER 4.2.1. Genel Değişken Özellikleri 4.2.2. Değişkenlerin İşlem Operatörleri İle Kullanımı 4.2.2.1. Aritmetik Operatörler 4.2.2.2. Karşılaştırma Operatörleri 4.2.2.3. Mantıksal Operatörler 4.2.2.4. Özel karşılaştırma Operatörü 4.3. Ekrana Çıktı Ve Klavyeden Bilgi Giriş 4.3.1. Prompt () 4.3.2. Write() 4.4. KOŞUL VE DÖNGÜLER 4.4.1. Koşul Yapıları 4.4.1.1 If (Eğer) 4.4.1.2. If.. Else (Eğer... Değilse) 4.4.2. Döngü Yapısı 4.4.2.1. For Döngüsü 4.4.2.2. Şartlı Döngü Yapısı While 4.4.2.3. Do.. while yapısı 4.4.2.4. Break ve Continue İfadeleri 4.4.2.5. Switch-Case İfadesi 4.5. FONKSİYON KAVRAMI 4.5.1. Fonksiyona Değer Gönderme ve Değer Alma NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 7

4.6. NESNELER VE ÖZELLİKLERİ 4.6.1. Window Nesnesi 4.6.1.1. Pencere Açmak Ve Kapamak 4.6.1.2. Window.Location.Protocol 4.6.1.3. Window.History.Go 4.6.1.4. Status Bar Kullanımı 4.6.2. Tarayıcı Nesnesi 4.6.3. Çerçeve (Frame) Nesnesi 4.6.4. Form Nesnesi 4.6.4.1. Text Alanı 4.6.4.2. Şifre Alanı 4.6.4.3. Butonlar 4.6.4.4. Radyo (Radio) Düğmeleri 4.6.4.5. Select Unsuru 4.7. OLAYLAR 4.7.1. onclick 4.7.2. onmouseover, onmouseout 4.7.3. onsubmit 4.7.4. onreset 4.7.5. onchange 4.7.6. onload, onunload 4.7.7. onerror, onabort 4.8. ZAMAN FONKSIYONLARI 4.9. JAVASCRİPT İLE DHTML ÖLÇME VE DEĞERLENDİRME BEŞİNCİ BÖLÜM JOOMLA CMS 5.1. İçerik yönetim sistemi (CMS) nedir? 5.2. Joomla nın özellikleri ve faydaları 5.2.1. Joomla! nın özellikleri 5.2.2. Standartlara uyumluluk 5.2.3. Arama motoru dostluğu 5.3. Joomla kurulumu 5.3.1. Paketin indirilmesi 5.3.2. Paketin açılması 5.3.3. Dosyaların barındırma alanına yüklenmesi 5.3.4. MySQL veritabanının oluşturulması 5.3.5. Joomla! kurulumuna giriş 5.3.6. Veritabanı yapılandırması 5.3.7. FTP ayarları 5.3.8. Ana yapılandırma 5.3.9. Kurulumun sonu 5.4. Joomla sitesine bir bakış 5.4.1. Menüler 5.4.2. İçerik nedir? 5.4.3. Reklamlar NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 8

5.4.4. Fonksiyonlar 5.4.5. Dekoratif öğeler 5.5. İçerik ekleme 5.5.1. İçeriğinizi planlama 5.5.2. Joomla! bölümleri ve kategorileri 5.5.3. Kategorize edilmemiş içerik 5.5.4. Bölümleri ve kategorileri oluşturmak 5.5.5. Yeni kategori ve bölümlerin eklenmesi 5.5.6. Metin editörünün seçilmesi 5.5.7. Makale ekleme 5.5.8. İçeriği menülere ekleme 5.5.9. Şablon yükleme 5.5.10. Siteye yazar eklemek 5.6. Joomla yönetimi 5.6.1. Görünüm yönetimi 5.6.2. İçerik yönetimi 5.6.3. Sistem yönetimi 5.7. Güvenliği sağlama 5.8. Joomla eklentileri 5.8.1. Modül, bileşen ve uyumlu ek arasındaki farklar 5.8.2. Modül türleri 5.8.3. Varsayılan site modülleri 5.8.4. Site bileşenleri 5.9. En faydalı Joomla! Eklentileri 5.9.1. VirtueMart 5.9.2. Xmap 5.9.3. IDoBlog Free Edition 5.9.4. JCE 5.9.5. Joom!Fish 5.9.6. JoomlaPack 5.9.7. MetaMod 5.9.8. Exposé Flash Gallery (www.gotgtek.net/15/) 5.9.9. JEvents 5.9.10. Community Builder (www.joomlapolis.com) 5.10. Şablonlarla siteyi özelleştirme 5.10.1. Şablonu özelleştirme 5.10.2. Modül konumları MODÜL DEĞERLENDİRME CEVAP ANAHTARI KAYNAKÇA NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 9

AÇIKLAMALAR KOD ALAN PROGRAM ADI KAZANILACAK UNVAN MODÜLÜN TANIMI SÜRE ÖNKOŞUL MODÜLÜN AMACI YETERLİLİKLER EĞİTİM ÖĞRETİM ORTAMLARI VE DONANIMLARI ÖLÇME VE DEĞERLENDİRME Alan lideri Modül hazırlayan NİGEP tarafından verilecektir. Bilgisayar Web Tasarımına Giriş Web sitesi tasarımcısı ve yöneticisi İnternet, Bilgisayar ağları, Web teknolociler, Web sitesi tasarımı 250 saat (Türkçe eğitimi süresi hariç) Temel Bilgisayar Kullanımı Kursu Genel Amaç Herhangi bir kurumun standart web sitesi yönetimi gerçekleştirebilen yada yeni bir web sitesi oluşturabilen insan kaynakların hazırlama. 1. Verilen bilgiler ile HTML ve CSS kullanarak web sayfası oluşturabilir 2. HTML, CSS ve Photoshop kullanarak bir web site için shablon tasarlayabilir 3. Önceden oluşturulan bir web sitesi güncelleştirebilir 4. Herhangi bir kurum için basit bir web sitesi tasarlayabilir 5. HTML, CSS, Joomla kullanarak bir web portal oluşturabilir Bilgisayar laboratuarı, İnternet Modülü bittikten sonra öğrenciler HTML, CSS kullanarak herhangi bir konuda bir web sitesi hazırlamalıdır. Web sitesinde gözükken bazı resimleri kendileri Photoshop programı ile düzeltmelidir yada yeni resim oluşturmalıdır. Joomla ile bir web sitesi yönetim işlemlerini göstermelidir. Doç. Dr. Rayımbek Sultanov Öğr. Gör. Kasım Barıktabasov NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 10

GİRİŞ Önümüzdeki zamanda bilgisayarsız, İnternetsiz hayat olması mümkün değildir. Şuan İnternette millionlarca web siteleri vardır. Her bir şirketin yada kurumun web sitesi vardır. Her gün yeni web siteleri ortaya çıkıyorlar, her gün web siteler güncelleştiriyorlar. Bu nedenle yukarıdaki çalışmaları gerçekleştirebilen insan kaynaklarına şuan çok istek var. Web Tasarımına Giriş modülü İnternet ne olduğunu, İnternette bulunan web sayfalar ve web siteler nasıl yapıldığını ve nasıl çalıştiğini anlatıyor. Modülü tamamlayanlar herhangi bir kurumun standart web sitesi yönetimi gerçekleştirebilir yada yeni bir web sitesi oluşturabilir. Böyle maharetler ile iş bulma büyük şanslar var olduğu için Web Tasarımına Giriş modülü güncel ve çok gerekli. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 11

BİRİNCİ BÖLÜM Adobe Photoshop AMAÇ Bu bölümü tamamladığınızda bilgisayarda resimler nasıl oluşturulduğunu ve Adobe Photoshop grafik editörü ile resimleri çizmeyi ve düzeltmeyi öğreneceksiniz. ARAŞTIRMA Şuan bilgisayarda resimler ile çalışan grafik editör pragramlarının hangi türleri var olduğunu araştırınız. Genel Bilgiler Bu faaliyete ait olan tüm bilgiler ekteki ' ADOBE PHOTOSHOP CS5'i kullanma' kitabinan alınabilir. UYGULAMA 1) 1.jpg olarak kaydedilecektir. Yazılar ve renkleri tercihe bağlıdır. 2) 2.jpg olarak kaydedilecektir. 3) 3.jpg olarak kaydedilecektir. Renkler tercihe bağlıdır. Üstteki yazı ortalanmış 40 punto, Ortadaki yazı Sağa hizalı 36 punto, Alttaki yazı ise sola hizalanmış ve 20 punto olacaktır. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 12

4) 4.jpg olarak kaydedilecektir. En altta dikdörtgen bulunacaktır. Dikdörtgen koyu, Kare ve Şekil ise açık tonlu olacaktır. ÖLÇME VE DEĞERLENDİRME I.) Aşağıdaki boşlukları uygun ifadelerle doldurunuz (25P). a. Bir defa da ekranda görüntülenebilen piksel sayısına denir. b... : Bir resmin piksel yoğunluğu yani PPI (Pixel Per Inches) 1 inç karede (1 inç = 2.54 cm) bulunan piksel sayısıdır. e. Film pozlanırken 1 inç yüksekliğindeki (2.54 cm) alana atılan satır sayısına. denir. d. Çıkış cihazlarında 1 inç'te (2.54 cm x 2.54 cm) noktalanan (yani basılan) ya da pozlanan piksel sayısına. adı verilir. e. Paneli: seçilen simgenin özelliklerinin görüntülenmesini ve değiştirilmesini sağlar. II.) Aşağıdaki araçların niçin kullanıldığını yazınız (35P). a. Seçim Araçlarını(Marquee Tools): b. Kırpma (Crop) Aracı: c. Sihirli Değnek (Magic Wand) Aracı: d. Kement (Lasso) Araçları: e. Lastik Damga (Rubber Stamp) Aracı: NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 13

f. Silgi (Eraser) Aracı: g. Bulaştırma (Smudge) Aracı: III.) Aşağıdaki soruları cevaplayınız.(20p) a. Katman (Layer) Paneli niçin kullanılır? b..geçmiş (History) Paneli ne işe yarar kısaca yazınız c. 4 adet görüntü formatı yazınız. d. Elips (Elipse) simgesi seçildikten sonra çalışma alanı içerisine Daire şekli çizilmek isteniyorsa klavyeden hangi tuşa basılır yazınız. IV. Aşağıdaki simgelerin ne işe yaradığını yazınız. (20P) a) b) c) d) e) f) g) h) j) k) NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 14

İKİNCİ BÖLÜM HTML Dili AMAÇ Bu bölümü tamamladığınızda HTML dilin kullanarak basit web siteleri oluşturabilirsiniz. ARAŞTIRMA İnternette 5-10 farklı web sitelerin yapısın (menüler, tablolar, resimler, başlıklar, renkler ve linkler) araştırınız. Genel Bilgiler Bu faaliyete ait olan tüm bilgiler ekteki 'HTML Kitabı'nın 1-8 ve 10-11 bölümlerinden alınabilir. UYGULAMA HTML kullanarak bir biriyle linklerle bağlanan en az 10 web sayfasından oluşan herhangi bir konudaki web sitesin yapınız. Web sitesinde tablolar, resimler, listeler mutlaka kullanmalıdır. ÖLÇME VE DEĞERLENDİRME 1. HTML nedir? a) Sayfa içindeki metinlerin tarayıcıda nasıl görüneceğini ve işlevsel olacağını düzenleyen işaret dilidir. b) Diğer sayfaları bağlayan linkler c) Nesneyi bağlayan linkler d) XML etiketleri 2. Html etiketleri hangi karakterler arasına yazılır? a) < > b) # # c) { } d) 3. Aşağıdakilerden hangisi bir web sitesinin varsayılan anasayfa dosyasının adıdır? a) anasayfa.htm b) anasayfa.html c) index.html d) giris.htm 4. Başlık etiketlerinde hangisinde yazı boyutu en büyüktür? a) <h1> b) <h2> c) <h3> d) <h4> 5. Bir web sayfası hangi HTML etiketi ile başlar? a) <body> b) <html> c) <head> d) <title> 6. HTML dokümanına ilişkin tanımlamaların yapıldığı HTML etiketi aşağıdakilerden hangisidir? a) <body> b) <html> c) <head> d) <title> 7. HTML dokümanının başlık çubuğunda yer alacak başlık yazısı hangi HTML etiketleri arasına yazılır? a) <body> b) <html> c) <head> d) <title> 8. HTML dokümanının esas içerik kısmı hangi HTML etiketi ile başlar? a) <body> b) <html> c) <head> d) <title> NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 15

9. Alt satıra geçmek için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <br> b) <hr> c) <enter> d) </p> 10. Bir çizgi eklemek için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <br> b) <hr> c) <draw> d) <layer> 11. Aşağıdakilerden hangisi boşluk bırakmak için kullanılır? a) <br> b) c) <hr> d) <b> 12. Link(bağlantı) oluşturmak için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <a> b) <li> c) <img> d) <div> 13. Oluşturulacak linke ait dosyanın belirlendiği HTML parametresi aşağıdakilerden hangisidir? a) a b) href c) src d) align 14. Linkin tıklanması durumunda sayfanın aynı pencere içinde açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir? a) target= _top b) target= _parent c) target= _self d) target= _blank 15. Linkin tıklanması durumunda sayfanın yeni pencerede açılmasını sağlayan HTML parametresi aşağıdakilerden hangisidir? a) target= _top b) target= _parent c) target= _self d) target= _blank 16. Tablo oluşturmak için kullanılan HTML etiketi aşağıdakilerden hangisidir a) <body> b) <html> c) <head> d) <table> 17. Tablo içerisinde satır açmak için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <td> b) <tr> c) <column> d) <row> 18. Tablo içerisinde sütun açmak için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <td> b) <tr> c) <column> d) <row> 19. Tabloda aynı satırları birleştirmeyi sağlayan etiket hangisidir? a) border b) rowspan c) colspan d) cellspacing 20. Bir tablonun arkaplanına resim yerleştirmek için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) bgcolor b) img c) image d) background 21. Bir tablonun arkaplan rengini ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) bgcolor b) img c) image d) background 22. HTML sayfasının arka zeminini mavi yapmak için hangi HTML satırı kullanılır? a) <body color= blue > b) <body bgcolor= blue > c) <body background= blue > d) <body set= blue > 23. Bir tablonun kenarlık kalınlığını ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) border b) height c) width d) align 24. Bir tablonun kenarlık rengini ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) border b) bgcolor c) bordercolor d) align 25. Paragraf için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <p> b) <hr> c) <td> d) <tr> 26. Bir yazıyı kalın(bold) yapmak için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <b> b) <i> c) <li> d) <u> 27. Sayfaya resim yerleştirmek kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <img> b) <body> c) <div> d) <table> NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 16

28. Numaralı liste için kullanılan etiketler hangisidir? a) <ol><li>..</ol> b) <ul><li>..</ul> c) <dl><li>..</dl> d)<dt><li>..</dt> 29. Aşağıda verilen link komutlarından hangisi doğrudur? a) <a img= http://www.meb.gov.tr > Tıklayınız<img/a> b) <a href= http://www.meb.gov.tr > Tıklayınız </a> c) <href= http://www.meb.gov.tr > d) <a link= http://www.meb.gov.tr > Tıklayınız</a> 30. Hangisi geçerli bir mail adresi bağlantısıdır? a) <link href= mailto:megep@meb.gov.tr > mailto:megep@meb.gov.tr</link> b) <href= mailto:megep@meb.gov.tr > maillerinizi bekliyoruz. c) <href= to:megep@meb.gov.tr >to:megep @meb.gov.tr d) <a href= mailto:megep@meb.gov.tr > megep@meb.gov.tr</a> 31. Resmin kaynağını belirtmek için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) img b) align c) src d) border 32. Mouse ile resmin üzerine gelindiğinde istenilen bir mesajın çıkmasını sağlayan HTML parametresi aşağıdakilerden hangisidir? a) alt b) value c) src d) top 33. Bir tablo veya resmin genişliğini ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) height b) width c) left d) top 34. Bir tablo veya resmin yüksekliğini ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) height b) width c) left d) top 35. Bir tablonun sütununda yer alan bilginin yatay hizalamasını ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) top b) align c) valign d) height 36. Bir tablonun sütununda yer alan bilginin dikey hizalamasını ayarlamak için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) top b) align c) valign d) height 37. Bir yazının biçimlendirilmesi için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <font> b) <body> c) <title> d) <table> 38. Bir yazının yazı karakter boyutunu değiştirmek için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) size b) height c) title d) width 39. Bir yazının yazı karakter tipini değiştirmek için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) size b) face d) title d) color 40. Bir yazının yazı karakter rengini değiştirmek için kullanılan HTML parametresi aşağıdakilerden hangisidir? a) size b) face c) title d) color 41. Kayan yazı oluşturmak için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <iframe> b) <div> c) <p> d) <marquee> 42. Bir form oluşturmak için kullanılan HTML etiketi aşağıdakilerden hangisidir? a) <form> b) <input> c) <submit> d) <body> 43. Hangisi web sunucu yazılımıdır? a) Apache b) Dreamweaver c) Fireworks d) Internet Explorer NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 17

44. Browser (tarayıcı) program ne işe yarar? a) Kâğıt üzerindeki yazıları bilgisayara aktarır. b) İnternete bağlantı sağlar. c) İnternet sayfalarını bilgisayarımızda görmeyi sağlar. d) İnternet bağlantısını hızlandırır 45. Hangisi bir web tarayıcı yazılımıdır? a) Apache b) Dreamweaver c) Fireworks d) Firefox 46. Birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen iletişim ağına ne denir? a) IP b) Domain c) İnternet d) Protokol 47. Aşağıdaki eşleştirmelerden hangisi yanlıştır? a) gov: Hükümet kurumları b) com: Ticari kurumlar c) edu: Eğitim kurumları d) org: Askeri kurumlar 48. Standart bir html dosyasının uzantısı aşağıdakilerden hangisi olabilir? a) txt b) doc c) html d) http 49. Aşağıdaki programlardan hangisi site hazırlamak ve yönetmek için en ideal programdır? a) Flash b) Dreamweaver c) Fireworks d) Excel NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 18

ÜÇÜNCÜ BÖLÜM CSS (Stil Sablonları) AMAÇ Bu bölümü tamamladığınızda HTML dilin kullanarak hazırlanan web siteleri daha güzel biçimlendirmeyi öğreneceksiniz. ARAŞTIRMA İnternette 5-10 farklı web sitelerine bakarken, o şekilde sadece HTML kullanarak biçimlendiremez olan metin tablo, başlıkları arayınız. Genel Bilgiler Bu faaliyete ait olan tüm bilgiler ekteki 'HTML Kitabı'nın 9 bölümünden ve http://www.fatihhayrioglu.com/css-dersleri/ web sitesinen alınabilir. UYGULAMA İkinci bölümdeki uygulama yaparken hazirlanan web sitesin daha güzel gözükmesi amacıyla CSS ile biçimlendiriniz. CSS stilleri harici bir CSS dosyasında olmalıdır. ÖLÇME VE DEĞERLENDİRME Yararlı linkler Gorselprogramlama Milli Eğitim Bakanlığı Yukarıdaki yazının özelliklerini aşağıda belirtilen kriterlere uygun olarak css(stil şablonları) yöntemini kullanarak oluşturunuz. Not: css dosyası dışarıdan çağrılacaktır.sayfa index.html, css dosyası a.css olarak kaydedilecektir. (paragraf stil şablonları için sınıf seçicileri kullanınız.) 1.paragraf > yazı rengi : kırmızı, hizalama: sağa,dekorasyon:altı çizili,font:arial,tümü büyük harf (10 Puan) 2.paragraf > yazı rengi :mavi, hizalama: ortalı, dekorasyon:üstü çizili,font:verdana, tümü küçük harf (10 Puan) 3.paragraf > yazı rengi :sarı, hizalama: sola, dekorasyon:üzeri çizili,font:arial, tümü büyük harf (10 Puan) Link özellikleri: ilk durum: renk kırmızı (5 Puan) Üzerine gelindiğinde : renk mavi ve stil italik (5 Puan) tıklandıktan sonra: renk yeşil ve yazı kalın(5 Puan) tıklandığı andaki durum: renk gri(5 Puan) NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 19

DÖRDÜNCÜ BÖLÜM Java Script AMAÇ Bu bölümü tamamladığınızda HTML dilin kullanarak hazırlanan web sayfalarında Java Script programlama dili kullanarak dinamik içerik sağlamayı öğreneceksiniz. ARAŞTIRMA İnternette 5-10 farklı web sitelerin açınız. Açtığınız sitelerde herhangi bir nesnelerin, metinlerin, renklerin değişmesi ya da pozisyonu değiştirdiği ya da yeniden ortaya çıkma gibi dinamik haraketlere dikkat etiniz. Genel Bilgiler Bu faaliyete ait olan tüm bilgiler ekteki Gökhan Halimoğlunun 'JAVA SCRIPT' el kitabı, Seval ÖZBALCI 'Java Script DERS NOTU', Hakki İcal 'Javascript Kitapcik' ve Azer Koçulu 'İleri Seviye Javascript' kitaplarından ve http://w3schools.com web sitesinden alınabilir. UYGULAMA 1. Bir web sayfanız için girilen rakamın 5 ten büyük ya da küçük olduğunu söyleyebilecek bir program yazınız. 2. Kullanıcı tarafından girilen rakam ve kelimemiz olsun. Bu bilgiler doğrultusunda girilen rakam kadar ekrana kelimeyi alt alta yazdıran bir program yapınız. ÖLÇME VE DEĞERLENDİRME 1. Aşağıdaki formda olacak şekilde; kullanıcı kutuya herhangi bir ad yazdığında ve Gönder e bastığında Merhaba Ad ; boş geçildiğinde ise Adınızı yazmadınız yazan HTML web sayfasın ve JavaScript program kodunu yazınız. 2. Kullanıcının verdiği 2 sayı arasında kalan sayıların toplamını yapan programı HTML sayfası ve JavaScript program kodunu yazınız. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 20

BEŞİNCİ BÖLÜM JOOMLA CMS AMAÇ Bu bölümü tamamladığınızda bir saat içinde Joomla CMS yardımıyla bir web sitesi kurmayı öğreneceksiniz. ARAŞTIRMA İnternetten İçerik yönetim sistemi (CMS) ne olduğunu ve şuan hangi İçerik yönetim sistemleri var olduğunu araştırınız. Genel Bilgiler Bu faaliyete ait olan tüm bilgiler ekteki 'Joomla ve Wordpress' (Chip kitap) kitabından alınabilir. UYGULAMA 1. Joomla CMS kullanarak bir web sitesi kurunuz. Kurduğunuz web sitesine en az 2 bölüm ve 2 kategori oluşturun. Bu bölüm ve kategorilere ayt olan bir kaç makale ekleyin. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 21

MODÜL DEĞERLENDİRME (YETERLİLİK ÖLÇME) 1) Aşağıdaki HTML parametrelerini birer örnek vererek tanımlarını yazınız.(10p) a) <meta> b) <i> c) <sup> d) <hr> 2) Aşağıdaki tabloyu oluşturmak için gerekli HTML kodu yazınız. (15p) 3) Aşağıdaki. css dosyasını satır satır açıklayınız. (15p) table { background-image: url(linkmenu.gif); }.paragraf { font-size: 12px; color: #FF0000; } a:hover { color: #0000FF; text-decoration: underline; } 4) Aşağıdaki Frame için gerekli HTML kodları yazınız. Ortadaki Frame deki ifadelere tıklandığında gereken bağlantılar ve istenen bilgiler ilgili frame lerde görüntüye gelsin. Bu işlem için bilgilerin olduğu gerekli sayfaları oluşturunuz. (60p) Notlar : *Linklerin Font Bilgileri (Yazı Tipi : Arial, Boyut :14, Renk :Sarı, Alt Çizgisiz) **A ve B sayfalarında Numaralı liste, C ve D sayfalarında Madde işaretli liste kullanılacak Süre : 45 Dak. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 22

CEVAP ANAHTARI Faaliyet 1. Photoshop soruları cevap anahtarı I.) Aşağıdaki boşlukları uygun ifadelerle doldurunuz (25P). a. çözünürlük b. Rezolasyon : 3. LPI d. DPI. e. Özellikler (Properties) Paneli: II.) Aşağıdaki araçların niçin kullanıldığını yazınız (35P). a. Seçim Araçlarını(Marquee Tools): Kullanmak Seçim araçları resim veya grafiklerin belli bir bölgesinin seçilmesini sağlar. Seçim araçlarıdikdörtgen (rectangle) ve yuvarlak (oval) olmak üzere iki çeşittir. b. Kırpma (Crop) Aracı: resimlerin veya grafiklerin belli bir bölgesinin seçilmesini sağlar. Diğer bir değişle seçili bölge dışındaki alanı silmiş oluruz. Kırpma aracını kullanmak için araç kutusundan farenin sol tuşu ile simgeye tıklatılır. c. Sihirli Değnek (Magic Wand) Aracı: Sihirli değnek aracıyla aynı veya benzer renkleri içeren komşu piksellerin seçilmesi sağlanır. d. Kement (Lasso) Araçları: Kement ve poligon araçları resim ya da grafik çalışmalarında belli bir alanın serbest olarak seçilmesini sağlar. Sihirli değnek (Magic Wand) aracı ile birbirine yakın pikseller seçiliyordu. e. Lastik Damga (Rubber Stamp) Aracı: Bir resim ya da grafik rötuşlanmak ya da kopyalanmak istendiğinde lastik damga aracının kullanılması yararlı olacaktır. f. Silgi (Eraser) Aracı: resim ya da grafik üzerinde istenilen alanların silinmesini sağlar. g. Bulaştırma (Smudge) Aracı: bitişik pikselleri yayar. Bu yeni boyanmış iki farklı boyadan birini diğerine bulaştırmak gibidir. Bulaştırma aracı da resim ya da grafik üzerinde birbirine bitişik olan piksellerin karıştırılmasını sağlar. III.) Aşağıdaki soruları cevaplayınız(40p). a. Katmanlar karmaşık ve kompozit resimler oluştururken çalışmayı bölümlere ayırır. b. History (geçmiş) paneli, tuval üzerinde nesneler oluştururken her adımın kaydedilmesini sağlar. c. PICT, EPS, TIFF, JPG, BMP, GIF, PNG, PSD d. Shift IV. Aşağıdaki simgelerin ne işe yaradığını yazınız. (20P) a) Kırp b) Kırmızı Göz c) Kement d) Lastik Mühür e) Dikdörtgen f) Sihirli Değnek g) Fırça h) Metin j) Boya Kutusu k) Uzaklaştır / Yakınlaştır NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 23

Faaliyet 2. HTML dili. Test anahtarı 1.-A, 2.-A, 3.-C, 4.-A, 5.-B, 6.-C, 7.-D, 8.-A, 9.-A, 10.-B, 11.-B, 12.-A, 13.-B, 14.-C, 15.-D 16.-D, 17.-B, 18.-A, 19.-C, 20.-D, 21.-A, 22.-B, 23.-C, 24.-C, 25.-A, 26.-A, 27.-A, 28.-A, 29.-B, 30.-D 31.-C, 32.-A, 33.-B, 34.-A, 35.-B, 36.-C, 37.-A, 38.-A, 39.-B, 40.-D, 41.-D, 42.-A, 43.-A, 44.-C, 45.-D, 46.-C, 47.-D, 48.-C, 49.-B Modül Değerlendirme soru cevapları 1. 2. 3. a) <meta>: Web sayfası ile ilgili temel özellikler tanımlanır. <head>.. </head> tagları arasında kullanılır. Örn : <meta name="description" content="myo Sitesi" /> (3p) b) <i> : Metni italik yazar. Örn : <i> Web Tasarım </i> (2p) c) <sup> : Aradaki ifadeyi üst simge yapar. Örn : a² (3p) d) <hr> : Sayfaya yatay çizgi ekler. Örn : <hr color="blue" align="center" width="50 (2p) <table width="200" border="1" >(Tablo tasarımı 10p) <tr> <td colspan="3" > <marquee behavior="alternate" bgcolor="#999999" direction="right">rakamlar</marquee>(5p) </td></tr> <tr> <td align="center"> 1</td> <td colspan="2" align="center"> 2</td> </tr> <tr> <td rowspan="2" align="center"> 3</td> <td align="center"> 4</td> <td align="center"> 5</td> </tr> <tr> <td align="center"> 6</td> <td align="center"> 7</td></tr></table> NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 24

4. 5. NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 25

KAYNAKÇA 1. 'ADOBE PHOTOSHOP CS5'I kullanma', http://help.adobe.com/tr_tr/photoshop/cs/using/photoshop_cs5_help.pdf 2. Halk Eğitim Merkezi Web Tasarım Kursu (Photoshop uygulamaları), http://www.teferruat.org/2010/01/halk-egitim-merkezi-web-tasarim-kursu-dokumanlari-1/ 3. Selim ERDOĞAN, Bilişim Tek. Öğrt., ALANYURT İ.M.K.B. ANADOLU TEKNİK VE ENDÜSTRİ MESLEK LİSESİ, 'GRAFİK ANİMASYON' dersi sınavı ve cevap anahtarı, http://www.bilgisayarcafe.com 4. HTML kitabı, http://rosesoft.blogcu.com/html-kitabi/7558762 5. Web programcılar rehberi. http://www.w3schools.com 6. WEB TASARIMI VE PROGRAMLAMA DERSİ 1.DÖNEM 2.UYGULAMA SINAVI. http://www.gorselprogramlama.com/2010-2011-ogretim-yili-web-tasarimi-ve-programlama-dersi-1- donem-2-uygulama-sinavi/ 7. Web Tasarım ve HTML Sınav Soruları, http://www.muratcesitci.com/index.asp?s=htmlsoru1 8. Teknik Bilimler MYO - Bilgisayar Teknolojileri Ve Programlama, Internet Proğramciliği-I Dersi Vize Sinavi, http://www.bilgisayarcafe.com 9. Gökhan Halimoğlunun 'JAVA SCRIPT' el kitabı, I. Baskı, sanalkurs.net, 2009, www.gokhanhalimoglu.com, www.sanalkurs.net/ghalimoglu 10. Seval ÖZBALCI 'Java Script DERS NOTU', T.C. Celal Bayar Üniversitesi, Turgutlu Meslek Yüksekokulu, Manisa 2003. 11. Hakki İcal 'Javascript Kitapcik' 12. Azer Koçulu 'İleri Seviye Javascript' 13. http://www.bilgisayarcafe.com 14. 'Joomla ve Wordpress', Chip kitap, www.chip.com.tr NİGEP- САЖУКАД BİLGİSAYAR ALANI WEB TASARIMINA GİRİŞ MODÜLÜ Sayfa 26