Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM Web Programlama ÖDEV 1

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1"

Transkript

1 Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs :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.

2 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.

3 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;

4 Toplamda 2 adet web sitesi hazırlayıp son teslim tarihine kadar 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 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.

5 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.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder. Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin

Detaylı

ATATÜRK ÜNİVERSİTESİ BİLGISAYAR MÜHENDİSLİĞİ BÖLÜMÜ BM 104- NESNEYE YÖNELİK PROGRAMLAMA DERSİ 2013-2014 BAHAR DÖNEMİ ÖDEV-3

ATATÜRK ÜNİVERSİTESİ BİLGISAYAR MÜHENDİSLİĞİ BÖLÜMÜ BM 104- NESNEYE YÖNELİK PROGRAMLAMA DERSİ 2013-2014 BAHAR DÖNEMİ ÖDEV-3 ATATÜRK ÜNİVERSİTESİ BİLGISAYAR MÜHENDİSLİĞİ BÖLÜMÜ BM 104- NESNEYE YÖNELİK PROGRAMLAMA DERSİ 2013-2014 BAHAR DÖNEMİ ÖDEV-3 (Son Teslim Tarihi: 06.06.2014 17:30 a kadar ) Teslim: Arş. Gör. Ferhat Bozkurt

Detaylı

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 4 MasterPage Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

4. Bağlantı (Köprü) Oluşturma

4. Bağlantı (Köprü) Oluşturma 4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara

Detaylı

Arayüz Geliştirme Dokümantasyonu

Arayüz Geliştirme Dokümantasyonu Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

ATATÜRK ÜNİVERSİTESİ BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜMÜ BIM 205 GÖRSEL PROGRAMLAMA 2014-2015 GÜZ DÖNEMİ ÖDEV-1

ATATÜRK ÜNİVERSİTESİ BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜMÜ BIM 205 GÖRSEL PROGRAMLAMA 2014-2015 GÜZ DÖNEMİ ÖDEV-1 ATATÜRK ÜNİVERSİTESİ BİLGİSAYAR MÜHENDİSLİĞİ BÖLÜMÜ BIM 205 GÖRSEL PROGRAMLAMA 2014-2015 GÜZ DÖNEMİ ÖDEV-1 (Son Teslim Tarihi: 08.11.2014 17:00 e kadar) Teslim: Arş. Gör. Uğur Güven ADAR. Java da Kullanıcıdan

Detaylı

DIV KAVRAMI