Web Ödevi 2 - Webpanosu.NET

Web Ödevi 2 - 201510
Şifalı bitkileri tanıtan tek sayfalık bir site yani sadece index.html sayfası bulunan bir site yapacaksınız.
Sitenizi en geç 6 Kasım 2015 Cuma saat 21:00’a kadar yayınlamalısınız.
Bu index.html sayfasında div etiketleri kullanarak sayfayı bölümlere ayıracaksınız.
Sayfadaki div etiketleri şöyle olacaktır.
Tüm bu div etiketlerinin görüldüğü gibi id’si vardır.




Tüm sayfayı içine alan sayfa div’i vardır.
Bunun içinde banner isimli başka bir div vardır.
Banner div’inin altında icerik div’i vardır.
Son olarak icerik div’inin altında alt div’i vardır.
Öncelikle bu div etiketlerini oluşturup id’lerini veriniz.
 Banner div’inin içine banner resmini ekleyiniz.

https://www.bitkikitabi.com/Bitkiler.aspx adresinden alfabetik olarak sıralanmış bitkilerden iki tanesini seçip
aşağıdaki gibi içerik div’inin içine ekleyiniz. Bu bitkilerin resimlerini de indirip resimler klasörünüze kaydediniz.
Burada örnek olarak menekşe ve cevizi seçtik. Onlara ait olan metinleri ve resimleri kullanarak aşağıdaki gibi bir
html sayfası hazırladık.
Not: Herkesin seçtiği bitkiler farklı olacaktır.

Alt div’inin içine de aşağıdaki yazıyı yazınız.

Photoshopta indirdiğiniz resimlerin üzerindeki yazıları aşağıdaki gibi siliniz. Bunun için nokta düzeltme fırçası
aracını kullanabilirsiniz.
HTML sayfanız bittiyse CSS kısmına başlayabilirsiniz. En sonda bitmiş sayfanın resmine de bakabilirsiniz.


Öncelikle yeni bir css dosyası oluşturup css klasörüne kaydediniz. Sonra bu stil dosyasını index’e bağlayınız.
İlk olarak body için kural yazınız. Body’nin css Kuralları:
o Arkaplan: http://subtlepatterns.com/ adresinden beğendiğiniz bir arkaplanı indirip resimler klasörüne
kopyalayınız. Bu resmi body’nin arkaplan resmi olarak ayarlayınız. Biz aşağıdaki resmi seçtik. Siz başka bir
resim seçiniz.
o Yazı Tipi: sans-serif
o Yazı rengi: #666
o Yazı boyutu: 0.9em

Kaplayıcı sayfa div’inin css kuralları:
o Genişlik: 650px;
o Ortalanmış
o Arkaplanı: beyaz
banner div’inin içindeki resmin css kuralları:
o Alt Kenarlık: 8 piksel düz çizgi ve #0069b4 renginde






İçerik div’inin css kuralları:
o İç boşluk: 15px
Sayfadaki tüm başlık 1’ler için css kuralları:
o Yazı rengi: #688816
o Alt kenarlık: 2 piksel düz çizgi ve #688816 renginde
o Üst dış boşluk: 0 piksel
o Alt dış boşluk: 0 piksel
Sayfadaki tüm başlık 2’ler için css kuralları:
o Yazı rengi: #ea5b0c
Sayfadaki tüm paragrafların css kuralları:
o Hizalama: iki yana yaslı
Bitkilerin resimleri için css kuralları:
o İç boşluk: 5px
o Kenarlık: 2px düz çizgi ve #ccc renginde




Bitkilerin latince isimlerinin yazdığı paragrafların css kuralları:
o Hizalama: Sağda
o Dış boşluk: 3 piksel
o Yazı boyutu: 0.8em
Bitkilere ait sadece ilk paragrafların css kuralları:
o Yazı: Kalın
o Yazı rengi: #a00057
Tüm strong etiketlerinin css kuralları: (latince isimlerin olduğu yerde strong kullanmıştık)
o Yazı rengi: Siyah
Size göre yazıda önemli gördüğünüz yerler için aşağıdaki css kurallarını uygulayınız.
İpucu: span ile yazıyı işaretle class ile biçimlendir.
o
o
o

Yazı: Kalın
Yazı tipi: Tahoma
Yazı rengi: Siyah
Alt div’inin css kuralları:
o Arpkaplan rengi: #222
o Yazı rengi: #eee
o İç boşluk: 10px