Ek 3. Yansıtıcı Soruların Uygunluklarını Belirleme Formu Ek 4. Öğrenme Ortamı Uygunluk Formu
Ek 5. Güdülenme ve Öğrenme Stratejileri Stratejileri Ölçeği (GÖSÖ) Ek 6. Epistemolojik İnanç Ölçeği
Ek 1. Belirtke Tablosu KONU HEDEFLER 1. HTML’ye Giriş HTML Nedir? HTML Editörleri HTML etiketleri ve özellikleri Temel HTML Etiketleri Html Head Body Web sitesi oluşturma
Klasör oluşturma
Tüm bileşenleri bu klasör içine yerleştirme İsimlendirme kuralları
Not defterinde sayfa oluşturma ve kaydetme
Daha önceden oluşturulmuş bir sayfayı not defterinde açma Web sayfasının kodlarını görüntüleme
2. HTML ile yazı biçimlendirme Sayfaya yazı ekleme
Başlık Paragraf Satır sonu Yazı rengi Yazı boyutu Yazı tipi Kalın İtalik Altı çizili
Madde işareti/numarası ekleme
Bilgi
HTML dokümanını tanıma,
Etiketlerin açılma ve kapanma biçimlerini tanıma
Kavrama
HTML’nin ne olduğunu tanımlayabilme Etiket kavramını tanımlayabilme HTML editörlerini listeleyebilme
Uygulama
Not defterinde temel HTML etiketlerini kullanarak bir HTML dokümanı oluşturabilme,
Daha önceden oluşturulmuş bir HTML dokümanındaki kodları görüntüleyebilme,
Web sayfalarının ve sayfalarda kullanacağı bileşenlerin yer alacağı klasör yapısını oluşturabilme
Bir HTML dokümanına yazı yazabilme
Bir yazının biçimsel özelliklerini değiştirebilme Yazının yazı tipi, rengi ve boyutunu değiştirebilme
Yazıyı kalın, italik ya da altı çizili yapabilme Yazıya madde işareti/numarası verebilme Başlık özelliklerini yazılara uygulayabilme
HTML sayfalarında yer alan paragraf veya satırları düzenleyebilme
Analiz
Sentez
Değerlendirme
Görsel editörler ile HTML kodları yazmaya imkan veren not defteri benzeri editörlerin kullanıcı açısından avantaj ve dezavantajlarını değerlendirebilme KONU HEDEFLER 3. HTML sayfa ayarları Sayfaya başlık verme Arkaplana renk verme Arkaplana resim yerleştirme
4. Resim ve özellikleri Sayfaya resim ekleme
Farklı bir konumdan sayfaya resim ekleme Resmin boyutlarını değiştirme
Resme alternatif metin ekleme Resme kenarlık ekleme
Resmi hizalama
Bilgi
Uygulama
HTML sayfaların sayfa ayarlarını değiştirebilme Sayfaya başlık verebilme
Sayfanın arkaplanına renk verebilme Sayfanın arkaplanına resim yerleştirebilme
Bir HTML sayfası içerisine resim ekleme, Resmin özelliklerini değiştirebilme
Resmin boyutlarını değiştirebilme
Resme istenilen kalınlıkta kenarlık verebilme Resmi hizalama
Resmin üzerine gelindiğinde alternatif metin ekleme
Analiz Sentez Değerlendirme KONU HEDEFLER 5. Link ve özellikleri
Yazıdan bir web adresine link verme
Yazıdan web sitesi içindeki bir sayfaya link verme Link özellikleri
Resimden bir web adresine link verme
Resimden web sitesi içindeki bir sayfaya link verme
6. Tablo ve özellikleri Tablo ekleme
Tablo içine yazı yazma Tablo içine resim ekleme Tabloya arkaplan rengi verme Tablonun genişliğini belirleme Tabloya kenarlık verme
Tablonun kenarlık rengini belirleme Tabloda hücreler rası boşluk belirleme Tabloyu hizalama
Sütun birleştirme Satır birleştirme
Tablo içindeki yazıya link verme Tablo içindeki resme link verme
Kavrama
Uygulama
Yazı ya da resim kullanarak sayfa içerisinden başka bir sayfaya bağlantı verebilme
Yazı ya da resim kullanarak internette yayınlanan bir web sitesine bağlantı verebilme
Yazı ya da resim kullanarak e-mail adresine bağlantı verebilme
İstenilen özelliklere sahip bir tablo oluşturabilme Tablo içine veri girebilme
Tablo içindeki verilerden bağlantı verebilme Hücreleri birleştirebilme
Tablonun arkaplan rengi ve genişliği gibi biçimsel ayarlarını düzenleyebilme
Analiz
Bir tablonun satır-sütun yapısını ve biçimsel özelliklerini analiz edebilme
Tablonun kaç satır ve sütundan oluştuğunu belirleyebilme
Tablo içindeki birleşik satır ve sütunları ayırt edebilme,
Tablo içinde yer alan iç içe geçmiş tabloları belirleyebilme,
Tablonun kenar kalınlığını olup olmadığını belirleyebilme,
Tablodaki hücre içi ve hücreler arası boşlukları belirleyebilme,
Tablo içinde yer alan verilerin hangi hücre içinde ne biçimde yer aldığını belirleyebilme
Sentez
KONU
HEDEFLER
7. Çerçeveler Çerçeve nedir?
Yatay çerçeve oluşturma Dikey çerçeve oluşturma Karışık çerçeve oluşturma Çerçeveler arasında Link Verme Çerçevelere kenarlık verme Bilgi
Kavrama Uygulama
Yatay, dikey ve karışık çerçeve oluşturabilme Çerçeveler arasında bağlantı verebilme Çerçeve özelliklerini değiştirebilme
Analiz
Bir çerçeve kümesinin yapısını analiz edebilme
Çerçeve kümesinin kaç çerçeveden oluştuğunu belirleyebilme, Çerçevelerin yerleşim yapısını belirleyebilme,
Sentez Değerlendirme
Ek 2. Başarı Testi Uzman Değerlendirme Formu
Sayın……
Bilgisayara Giriş II dersi kapsamında “Web Tasarım” ünitesine ilişkin geliştirmiş olduğum web temelli öğrenme ortamında sunulan konu listesi ekte yer almaktadır. Çalışma Türkçe Öğretmenliği 2. sınıf öğrencilerinin katılımı ile gerçekleştirilecektir. 4 hafta sürecek olan uygulama sürecinde, her hafta öğrencilere uygulama görevleri verilecek ve öğrencilerden bu görevleri gerçekleştirmek için öncelikle gerekli konu başlıklarını belirleyerek çalışmaları, ardından görevi tamamlayarak sisteme göndermeleri istenecektir. Hazırlanan bu dört görev uygulama öncesinde öğrencilerin ön bilgilerini belirlemek amacıyla, deneysel işlem sürecindeyse her hafta sonunda bir görev öğrenci başarısını belirlemek amacıyla kullanılacaktır. Ekteki konu listesi doğrultusunda hazırladığım uygulama görevlerini kapsam, anlaşılırlık ve puanlama açısından aşağıda belirtilen 3’lü derecelendirme ile puanlamanızı ve konu ile ilgili görüşlerinizi “açıklama” sütununa yazmanızı beklemekteyim.
Katkılarınız için şimdiden teşekkürlerimi ve saygılarımı sunarım.
Bilal ATASOY
Puan Türü Puanlamada dikkate alınacak ölçütler
Uygun Soru maddelerinin düzeltmeye ihtiyaç olmaksızın
kullanılmasının uygun olduğunu düşünüyorsanız bu seçeneği işaretleyiniz.
Kısmen Soru maddelerinin açıklamalar kısmında belirtilen düzeltmeler doğrultusunda düzenlendikten sonra kullanılması gerektiğini düşünüyorsanız bu seçeneği işaretleyiniz.
Uygun değil Soru maddelerinin konu içeriğine ve hedef kitleye göre uygun olmadığını düşünüyorsanız bu seçeneği işaretleyiniz.
KONULAR 1. HTML’ye Giriş HTML Nedir? HTML Editörleri HTML etiketleri ve özellikleri Temel HTML Etiketleri Html Head Body Web sitesi oluşturma
Site klasörü oluşturma Dosyaların organizasyonu İsimlendirme kuralları
Not defterinde sayfa oluşturma ve kaydetme Daha önceden oluşturulmuş bir sayfayı not defterinde açma
Web sayfasının kodlarını görüntüleme
2. HTML ile yazı biçimlendirme Sayfaya yazı ekleme
Başlık Paragraf Satır sonu Yazı rengi Yazı boyutu Yazı tipi Kalın İtalik Altı çizili Madde işareti/numarası 3. HTML sayfa ayarları Sayfaya başlık verme Arka plana renk verme Arka plana resim yerleştirme
4. Resim ve özellikleri Sayfaya resim ekleme
Farklı bir konumdan sayfaya resim ekleme Resmin boyutlarını değiştirme
Resme alternatif metin ekleme Resme kenarlık ekleme
Resmi hizalama
5. Link ve özellikleri
Yazıdan bir web adresine link verme
Yazıdan web sitesi içindeki bir sayfaya link verme
Link özellikleri
Resimden bir web adresine link verme
Resimden web sitesi içindeki bir sayfaya link verme
6. Tablo ve özellikleri Tablo ekleme
Tablo içine yazı ekleme Tablo içine resim ekleme Tabloya arka plan rengi verme Tablonun genişliğini belirleme Tabloya kenarlık verme
Tabloda hücreler arası boşluk belirleme Tabloyu hizalama Sütun birleştirme Satır birleştirme 7. Çerçeveler Çerçeve nedir?
Yatay çerçeve oluşturma Dikey çerçeve oluşturma İç içe çerçeve oluşturma
Görev 1
Aşağıda verilen açıklamaları dikkate alarak bir web sitesi hazırlamanız gerekmektedir. Başarılar. 1. Not defterini açarak yeni bir dosya oluşturun.
2. Bu dosyaya “İlk web sayfam” başlığını verin.
3. Bu sayfaya 5 boyutunda, Arial yazı tipinde, kırmızı renkle “WEB Sayfama Hoş Geldiniz” yazın.
4. Bir alt satıra geçerek 4 boyutunda, Comic Sans MS yazı tipinde, mavi renkle “Adınızı ve Soyadınızı” yazın.
5. Sayfanızı index.html ismiyle kaydederek, tarayıcıda görüntüleyin. 6. Yeni bir HTML dosyası oluşturun.
7. Bu dosyaya “Neler Öğrendik?” başlığını verin.
8. Aşağıdaki resimde görülen çıktıyı sağlayacak html etiketlerini yazın ve sayfada yer alan iki sorunun cevabını soruların bir alt satırına cevaplayın (boşluk bırakmayın, cevapları kendi cümlelerinizle yazın).
9. Soruların her birini yeni bir paragraf içine yazın.
10. Bu dosyayı ogrendiklerim.html ismiyle kaydederek, tarayıcıda görüntüleyin. 11. Bu iki html dosyasının içinde yer aldığı site klasörünü sıkıştırın.
Soru Uygun Kısmen Değil Açıklama 1. Not defterinde 3 temel etiketi doğru sırada (4 puan) ve doğru şekilde (4 puan)
yazarak yeni bir HTML dosyası oluşturma - Toplam: (8 puan) 2. Dosyaya “İlk web sayfam?” başlığını verme - Toplam: (4 puan)
3. body etiketi içine yazıları yazma (5 puan), “Web Sayfama Hoş Geldiniz” yazısını Arial yazı tipinde (5 puan), kırmızı renkli (5 puan), 5 boyutunda (5 puan) yazma, satır sonu ekleme (4 puan) Toplam: (24 puan)
4. Ad ve soyadı Comic Sans MS yazı tipinde (5 puan), mavi renkli (5 puan), 4 boyutunda (5 puan) yazma - Toplam: (15 puan)
5. Dosyayı index.html ismiyle kaydetme - Toplam: (5 puan)
6. Not defterinde 3 temel etiketi doğru sırada (4 puan) ve doğru şekilde (4 puan) yazarak yeni bir HTML dosyası oluşturma - Toplam: (8 puan)
7. Dosyaya “Neler Öğrendik?” başlığını verme - Toplam: (4 puan)
8. body etiketi içine yazıları yazma (5 puan), uygun yerlere satır sonu ekleme (4 puan), “HTML Nedir?” tanımını yapma (5 puan), etiketin tanımını yazma (5 puan)- Toplam: (19 puan)
9. Soruların her birini yeni bir paragraf içine yazma.- Toplam: (8 puan) 10. Dosyayı ogrendiklerim.html ismiyle kaydetme - Toplam: (5 puan)
Görev 2
Aşağıda verilen açıklamaları dikkate alarak bir web sitesi hazırlamanız gerekmektedir. Başarılar. 1. İnternetten “çiçek” anahtar kelimesi ile arama yaparak bulduğunuz resmi html
dosyalarınızın yer alacağı site klasörüne kaydedin ve not defterini açarak yeni bir HTML dosyası oluşturun.
2. Oluşturduğunuz dosyada aşağıda yer alan resimdeki görüntüyü elde etmek için gereken html etiketlerini kullanarak sayfanızı geliştirin.
3. “HTML Editörleri” yazısını 1.Düzey başlık yapın.
4. “HTML Editörleri” başlığının altına bildiğiniz editörleri başlarına madde işaretleri koyarak listeleyin.
5. Sayfanızı index.html ismiyle kaydederek görüntüleyin, yanlışlarınız varsa düzeltin ve eksiklerinizi tamamlayın.
1. Not defteri ile yeni bir dosya oluşturun. 2. Sayfanın arkaplan rengini sarı yapın.
3. Sayfanın içine “Linkler” yazın, bu yazının altını çizin.
4. Bir alt paragrafa geçin ve bu paragrafa “Anasayfaya geri dön” yazın. Bu yazıya tıklanınca index.html dosyanıza ulaşmak için link verin.
5. Sayfanızı linkler.html ismiyle kaydederek görüntüleyin, yanlışlarınız varsa düzeltin ve eksiklerinizi tamamlayın.
17. Bu iki html dosyasının içinde yer aldığı site klasörünü sıkıştırın. 18. Sitenizi görev gönder butonu yardımıyla sisteme gönderin.
Soru Uygun Kısmen Değil Açıklama 1. Not defterinde 3 temel etiketi doğru sırada (3 puan) ve doğru şekilde (3 puan)
yazarak yeni bir HTML dosyası oluşturma - Toplam: (6 puan)
2. Body etiketi arasına (4 puan) resim ekleme (10 puan), yeni bir paragraf
oluşturarak bu paragrafa “HTML Editörleri” yazma (3 puan) - Toplam: (17 puan) 3. HTML Editörleri yazısını 1. düzey başlık yapma - Toplam: (6 puan)
4. HTML editörlerini listeleme (4 puan) HTML editörlerinin başına madde işaretleri ekleme (10 puan) - Toplam: (14 puan)
5. Dosyayı index.html ismiyle kaydetme - Toplam: (4 puan)
6. Not defterinde 3 temel etiketi doğru sırada (3 puan) ve doğru şekilde (3 puan) yazarak yeni bir HTML dosyası oluşturma - Toplam: (6 puan)
7. Sayfanın arkaplan rengini sarı yapma- Toplam: (8 puan)
8. Body etiketi arasına “Linkler” yazma (4 puan) ve bu yazının altını çizme (5 puan) Toplam:(9 puan)
9. Yeni bir paragraf oluşturarak bu paragrafa “Anasayfaya geri dön” yazma (3 puan) ve bu yazıya tıklandığında index.html dosyasına link verme (10 puan) Toplam:(13 puan)
10. Sayfayı linkler.html ismiyle kaydetme Toplam: (4 puan) Toplam:87
Görev 3
Aşağıda verilen açıklamaları dikkate alarak bir web sitesi hazırlamanız gerekmektedir. Başarılar. 1. Not defterini açarak yeni bir dosya oluşturun.
2. Site klasörünüzün içine resimler klasörü oluşturarak, tabloda kullanmak için
http://w3.gazi.edu.tr/~bilalatasoy/bilgisayaragirisadresinden tabloya yerleştireceğiniz
mevsimler resmini ve arkaplan resmini indirin.
3. Aşağıda gördüğünüz özelliklere sahip 600 piksel genişliğindeki tablo yapısını oluşturun.
4. Tablonun içindeki uygun satırlara yukarıda gördüğünüz şekilde yazıları ve resmi yerleştirin.
6. Yerleştirdiğiniz resmin kenarı kalınlığını 3 piksel, genişliği 300 piksel, yüksekliğini 350 piksel yapın, resmi ortalayın ve resmin üzerine gelindiğinde “mevsimler” yazısının çıkmasını sağlayın.
7. Sayfaya arkaplan resmi olarak arkaplan.jpg resmini ekleyin.
8. Sayfanızı kaydederek görüntüleyin, yanlışlarınız varsa düzeltin ve eksiklerinizi tamamlayın.
9. Yeni bir dosya oluşturun.
10. Bu sayfaya sizce görsel editörler ile HTML kodları yazmaya imkan veren not defteri benzeri editörlerin web sitesi hazırlarken kullanıcı açısından avantaj ve
dezavantajlarının neler olduğunu yazın. 11. Sayfayı aciklamalar.html ismiyle kaydedin.
12. Sayfanızı kaydederek görüntüleyin, yanlışlarınız varsa düzeltin ve eksiklerinizi tamamlayın.
13. Site klasörünü sıkıştırın.
Soru Uygun Kısmen Değil Açıklama 1. Not defterinde 3 temel etiketi doğru sırada (1 puan) ve doğru şekilde (1 puan) yazarak
yeni bir HTML dosyası oluşturma - Toplam: (2 puan) 3. Tablo yapısını oluşturma
Uygun satır ve sütun sayısına sahip bir tablo oluşturma (4 puan)
Tablo içindeki birinci ve üçüncü satırdaki hücreleri birleştirme (8 puan) Tabloya kenar kalınlığı verme (4 puan)
Tablodaki hücreler arası boşluğa 0 değerini verme (4 puan) Tablonun kenarlık rengini yeşil yapma (4 puan)
Tablonun ilk satırının arkaplan rengini açık yeşil yapma (4 puan) Tabloyu sayfa içinde ortalama (4 puan)
Tablo genişliğini 600 piksel yapma (4 puan) - Toplam: (36 puan)
4. Tablonun 1.satırına mevsimler yazısını yazma (4 puan), 2. satıra dört mevsimi yazma (4 puan), 3 satıra resim ekleme (8 puan) Toplam: (16 puan)
5. “MEVSİMLER” yazısını italik yapma (4 puan) ve ortalama (4 puan) - Toplam: (8 puan)
6. Yerleştirilen resmin kenar kalınlığını 3 piksel (4 puan), genişliği 300 piksel, (4 puan) yüksekliğini 350 piksel yapma (4 puan), resmin üzerine gelindiğinde “mevsimler” yazısının çıkmasını sağlama (4 puan) ve resmi ortalama (4 puan) - Toplam: (20 puan) 7. Sayfaya arka plan resmi olarak arkaplan.jpg resmini ekleme - Toplam: (6 puan).
8. Dosyayı index.html ismiyle kaydetme - Toplam: (1 puan)
9. Not defterinde 3 temel etiketi doğru sırada (1 puan) ve doğru şekilde (1 puan) yazarak yeni bir HTML dosyası oluşturma - Toplam: (2 puan)
10. Bu sayfaya görsel editörler ile HTML kodları yazmaya imkan veren not defteri benzeri editörlerin kullanıcı açısından avantaj (4 puan) ve dezavantajlarını (4 puan) yazma - Toplam: (8 puan)
11. Dosyayı aciklamalar.html ismiyle kaydetme - Toplam: (1 puan) Toplam:100
Görev 4
Aşağıda verilen açıklamaları dikkate alarak bir web sitesi hazırlamanız gerekmektedir. Başarılar. 1. Site klasörüne resimler klasörü oluşturun.
2. İnternetten “Atatürk” anahtar kelimesi ile arama yaparak bulduğunuz resmi resimler klasörüne kaydedin.
3. Aşağıdaki resimde görülen çerçeve kümesini oluşturmak için gerekli sayfaları oluşturun.
4. Bu sayfalara yukarıdaki şekilde görülen yazı ve resimleri ekleyin.
5. Bu sayfaları kullanarak çerçeve kümesini resimdeki yapıda oluşturun ve index.html ismi ile kaydedin.
6. “Mustafa Kemal ATATÜRK” yazısını beyaz renk ve Arial yazı tipinde yazın. 7. Sayfaların arkaplan renklerini resimde gördüğünüz gibi belirleyin.
8. “tıklayınız” yazısına tıklandığında Atatürk’ün hayatı hakkında ayrıntılı bilgi içeren herhangi bir web adresine link verin. Bu linkin yeni boş bir tarayıcı penceresinde açılmasını sağlayın.
9. Aşağıdaki bilgileri içeren ve aşağıdaki gibi bir görünüme sahip olan yeni bir sayfa oluşturun.
10. Bu sayfayı ilkeler.html ismiyle kaydedin.
11. Bir önceki resimde çerçeve kümesinde yer alan Atatürk resmine tıklandığında sayfanın sağında yer alan çerçevede ilkeler.html sayfanın açılmasını sağlayacak şekilde resme link verin.
12. Site klasörünü sıkıştırın.
Soru Uygun Kısmen Değil Açıklama 1. Çerçeve kümesini oluşturmak için 3 ayrı sayfa oluşturma – Toplam: (3 puan)
2. Üstteki sayfanın body etiketinin arasına “Mustafa Kemal ATATÜRK” yazısını yazma (2 puan), sol çerçevede yer alan sayfaya resimler klasörünün içindeki (4 puan) Atatürk resmini ekleme (4 puan), orta çerçevede yer alan sayfaya gerekli yazıları ekleme (2 puan) - Toplam: (12 puan)
3. İki satırdan oluşan çerçeve kümesini oluşturma (7 puan), ilk satıra çağırılacak dosyayı atama (7 puan), alttaki satıra 2 sütunluk çerçeve kümesi oluşturma (7 puan), bu iki sütunun kaynak dosyalarını doğru atama (14 puan). Bu sayfayı index.html ismiyle kaydetme (2 puan) - Toplam: (37 puan)
4. “Mustafa Kemal ATATÜRK” yazısını beyaz (3 puan), ve yazı tipini Arial yapma (3 puan) - Toplam: (6 puan)
5. Solda yer alacak sayfanın arka plan rengini açık mavi (3 puan) üstte yer alacak sayfanın arka plan rengini koyu mavi (3 puan) yapma -Toplam: (6 puan)
6. “tıklayınız” yazısına tıklandığında Atatürk’ün hayatı hakkında ayrıntılı bilgi içeren herhangi bir web adresine yeni boş bir tarayıcı penceresinde (4 puan) link verme (6 puan) - Toplam: (10 puan)
7. Yeni bir sayfa oluşturma (1 puan) Bu sayfada body etiketi arasına yazıları yazma (2 puan), başlıktan sonra paragraf sonu (2 puan), diğer maddeler arasında satır sonu kullanma (2 puan) - Toplam: (7 puan)
8. Bu sayfayı ilkeler.html ismiyle kaydetme - Toplam: (1 puan).
9. Orta çerçeveye bir isim verme (6 puan), sol çerçevede yer alan Atatürk resmine tıklandığında orta çerçevede (6 puan) ilkeler.html sayfasının açılmasını sağlayacak şekilde link verme (6 puan) - Toplam: (18 puan)