Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan: Arş. Gör. Işıl KARABEY Web Sitesi-1 HTML ve CSS kodlarıyla aşağıdaki şablona benzer, kişisel web sitenizi tasarlayınız. Şekilde gördüğünüz dikey menüyü (Ana sayfa, Hakkımızda vs.) tablo veya div kullanarak hazırlayınız. Css kodlarınızı html dosyası içinde yazabilirsiniz ya da ayrı bir css dosyası yazabilirsiniz. Çalışmanızın üst kısmında sitenizi tanıtan bir logo ve sitenin ismi olmalıdır. Aşağıdaki şekilde görüldüğü gibi sol üst tarafta siteyi tanıtan site ismi, sağ tarafta site logosu bulunacaktır. Sitenizin sol tarafında sitenizin menüleri bulunacaktır. Menüde yazı boyutu, arka plan rengi, kenar uzunluğu, kenar genişliği belirli puntolarla ayarlanmalıdır. En az dört farklı konuda olan bu menü ile çalışmanın orta kısmında bulunan başlık ve içerik bölümleri değişecektir. Örneğin; Hakkımda ya tıklandığında orta kısımdaki içerikte özgeçmişiniz yer alacaktır. Sitenin sağ tarafında derslere ait kategoriler bulunacaktır. Kategorilere tıklandığında içerik kısmında ders detayları verilecektir. Örnek sorular bölümünde soruların bulunduğu herhangi bir web sayfasını içerik kısmında gösterebilirsiniz. Sizin hayal gücünüze göre de site içeriği genişletilebilir.
Bir HTML dosyası her zaman html, head, title ve body etiketleri kullanılarak aşağıdaki şekilde kodlanmaktadır: <html> <head> <title>sayfa Başlığı</title> (Meta etiketler, scriptler, RSS yolları ve CSS dosyası) </head> <body> (Diğer tüm elementler ve düz metin) </body> </html> Başlık kullanırken <h1>h1 Başlık</h1> şeklinde h1 den h6 ya kadar farklı boyutlarda başlık kullanılabilir. Örnek bir css dosyası; <style type="text/css" rel="stylesheet"> <!-- (Stiller burada belirtilir) --> </style> şeklinde html dosyasında okutulur.
Web Sitesi-2 Html ve css kodlarını kullanarak aşağıdaki şablona benzer.html uzantılı bir web sitesi tasarlayınız. Web sitenizde kendi CSS dosyanızı yazacaksınız. CSS dosyanızı HTML dosyanız içerisinde kullanınız. Şekildeki gibi sitenizi div kullanarak bölümlere ayırınız (Haberler, Linkler vb.) style.css isimli css dosyası hazırlayınız. Şablondaki en üst resim yerine tercihinize göre resim yerleştirebilirsiniz. div kullanarak şablonda gördüğünüz yatay menü oluşturunuz. Ana sayfa, Hakkımızda kısımlarına tıklandığında sayfa içeriği değişecektir. Menüdeki bölümlerin( Ana sayfa, Hakkımızda vb.) yazı boyutu 10 punto, Times New Roman yazı tipinde ve italik olmalıdır. Haberler bölümünde haberin resmi bulunmalı ve haber detayı için link verilmelidir. Örneğin; Haber detayları sayfa içeriğinde resim ile birlikte gösterilmelidir. (Resmi, sayfa içeriği bölümünün sol üst kısmına yerleştirebilirsiniz) Sitenizde farklı fontlar ve renkler kullanabilirsiniz. Linkler bölümünde başka web sayfalarına link veriniz. Örneğin; http://www.w3schools.com/
Toplamda 2 adet web sitesi hazırlayıp son teslim tarihine kadar bmwebprogramlama@gmail.com adresine teslim ediniz. Aynı zamanda sitelerinizi anlatan yazılı bir belge teslim ediniz. DİKKAT EDİLECEK HUSUSLAR 1. Teslim edeceğiniz ödevin sadece kendi emeğinizin ürünü olması gerektiğini, aksine hareket edenleri ciddi yaptırımlar beklediğini unutmayınız. 2. Ödevin herhangi bir kısım ya da tamamında benzerlik olması durumunda paylaşımda bulunan bütün öğrencilere kopya muamelesi yapılacaktır. 3. Teslim edeceğiniz ödev bir kapağa sahip olmalıdır. Bu kapak üzerine adınız, soyadınız, öğrenci numaranız ve ödev numarası yazılı olmalıdır. 4. Ödevinizi zip dosyasında bmwebprogramlama@gmail.com adresine gönderiniz. 5. Ödev dokümanı içerisine web sitenizi anlatan kısa bir rapor sunmalısınız ve belirtilen tarihe kadar Arş. Gör. Işıl KARABEY e çıktı halinde teslim ediniz.
6. Yazdığınız HTML ve CSS kodlarını kendiniz yazmalısınız. Hazır şablon/bileşen (fotoğraf albümü hariç), wordpress, joomla gibi hazır site içerik yapımı programları kullanımı yasaktır.