Web Tasarım ve Programlama 1.Dönem Uygulama Sınav Soru ve Cevapları

olculer
Yukarıda verilen tasarıma göre aşağıda verilen özelliklere sahip sayfa yapısını html ve css kodları ile oluşturun Web Tasarım Sınav Sorusu Cevabı Konu Sonundadır..
Klasör içeriğinizi css, resimler ve html dosyalarını tutacak şekilde düzenleyiniz.
Size gönderilen olculer adındaki resim dosyasını inceleyiniz. Gerekli olan tüm ölçüler verilmiştir. Bunun dışında herhangi bir uzunluk veya genişlik bilgisine gerek yoktur.
Tasarımda sadece div kullanılacak hiçbir yerde tablo kullanılmayacak,
Tasarımdaki yazı rengi, yazıtipi, çizgi rengi ,arkaplan resmi , banner vb. tüm biçimlendirme özellikleri stil dosyası içerisinden yapılacak stil dosyası css klasörü içerisinde tutulacak
Site Başlığı Web Uygulama Sınavı olacak
Tüm katmanların (divlerin) bir birlerine olan uzaklığı 5px
Arkaplan
Site arka planı resmimdeki gibi bulut resminden oluşacak içerik, ve linklerden oluşan katmanların
arkaplan renkleri beyaz yani #FFFFFF olacak
Kenarlıklar
Tüm kenarlıkların renkleri #336699 , Tüm kenarlıkların köşeleri 10px yuvarlanacak
İçerik
Ana Sayfa başlığı 24px boyutunda ve #000080 renginde olacak
Anasayfada 2 paragraf , iki yana yaslanmış ve #336699 renginde olacak paragraf yanındaki resim.png dosyası index.html içerisinden eklenecek metin ile resmi hizalama resimdeki gibi olacak
Linkler
Menü linkleri normal hali
resimde görüldüğü gibi gölgeli olacak
Zemin rengi #AACCFF
Yazı rengi #000080
Menü linklier üzerine gelindiğinde
Zemin rengi #EEEEEE
Yazı rengi #FF0000
Alt linkler nomal hali alt çizgisi olmayacak rengi #000080 olacak üzerine gelindiğinde renk değişmeyecek altı çizgili olacak
[Yükleme bulunamadı.] İndir
Sınav soruları için Şefik Hocama teşekkürler

Web Tasarım ve Programlama 1.Dönem 2.Uygulama Soru Ve Cevapları Css

sor1
Uygulamanın çalışan hali ve indirme linki konu sonunda..
İşlem Basamakları…
Sayfanın zemin rengi “#325780”, yazı fontu 11px ve yazı fontu Tahoma
Yan Yana, Sol ve Sağ yazıları başlık biçiminde 22px kalın Tahoma ve ortalı olacak
Orta Kutu genişliği 625px , ortalı, zemin rengi beyaz,
Yan Yana Kutuları 200px genişliğinde, üstten ve soldan 5px dış boşluk, çerçeve 1px düz ve siyah renkli, zemin rengi beyaz
Sol ve Sağ Kutular 200px genişliğinde, 5px dış boşluk, çerçeve 1px düz ve siyah renkli, listeleme simgesi soru.png resmi olacak
Yazı kutularının genişliği 400px, satır yüksekliği 20px, yazılar iki yana yaslı, dış boşluk 5px olacak
Üstteki yazıya alt veya Alttaki yazıya üst çerçeve eklenecek 1px kalınlığında noktalı 666 renginde
Üst kutudaki resim sola hizalı, sağ ve alttan 5px dış boşluklu, Alt kutudaki resim sağa hizalı alt ve sağdan 5px dış boşluklu olacak…

[Yükleme bulunamadı.]

Web Tasarım ve Programlama 1.Dönem – Css Uygulama Sınavı

1-Sayfanın zemini size gönderilen klasörde bulunan bg.jpg resmi ile oluşturulacaktır.. (5p)

2-İçerik kısmının genel taşıyıcısı genişlik 980px, üst boşluk 10px, çerçeve kalınlığı 1px ve sayfaya ortalı olacaktır.(16p)

3-Menü yüksekliği 40px ,genişlik 790px; üst boşluk 5px, alt çerçeve noktalı , menü üzerine gelindiğinde zemin rengi #069; yazı rengi #FFF olacaktır.. (20p)

4-Header bölümü için resim klasörde yer alan header.jpg kullanılacaktır. Üstten ve alttan 10px boşluk verilecektir.(12p)

5-İçerikler için yan yana 3 kutu oluşturulacak 1.ve 3 kutu aynı özelliklerde olacaktır. Özellikleri zemin rengi #F0EAD2, genişlik 308px; çerçeve 1px, yazı boyutu 14px , iki yana yaslı olacak, Veri Kurtarma başlıkları h1 etiketi ile yapılacak ve onların yazı boyutu 14px, alt çerçeve noktalı olması sağlanacaktır.. (32p)

6-Ortadaki resim verikurtarma.jpg olarak kayıtlıdır. Ve bu kutulara sağdan ve soldan 20px boşluk verilecektir. (10p)

7-Sayfanın altında ortalı bir şekilde “2012, Tüm hakları saklıdır, Web Tasarım ve Programlama” yazacak ve okulun sitesine link verilecektir… (5p)

Uygulamanın Bitmiş Hali… :

Css Uygulama Sınavı

[Yükleme bulunamadı.]

Html Dersleri – Fontlar

Sayfa içerisindeki yazıların özelliklerini değiştirmek için etiketi kullanılır, peki ama nasıl diyorsanız hemen geçelim..
font etiketinin kullanımı;

face = yazı tipinin adı (arial, tahoma, verdana, …)
size = yazının büyüklüğü (1-7 arası)
color = yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri)
Bunlara font etiketinin parametreleri diyoruz.

Renkler ve Mevsimler

<span style="color: #008000; font-family: tahoma; font-size: large;">İlkbahar</span>

<span style="color: #ff0000; font-family: verdana; font-size: large;">Yaz</span>

<span style="color: #ffff00; font-family: arial; font-size: large;">Sonbahar</span>

<span style="color: #0000ff; font-family: 'comic sans ms'; font-size: large;">Kış</span> 

Html Dersleri – Etiketler 1

İlk olarak html nedir ondan başlayalım

  • HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz,
  • internet dökümanları oluşturmaya yarayan bir çeşit dildir.
  • Tanımda geçen “internet dökümanı” ifadesinin yanı sıra HTML ile oluşturduğunuz belgeleri hard diskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz.
  • HTML, programlama dilleri (c, pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.
  • Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi bile diyebiliriz HTML için.
Şimdi sıra geldi ilk sayfamızı yapmaya kodlarımız aşağıdaki olacak
<html>
<head>
<title>İlk Sayfam</title>
</head>
<body>Sayfama Hoşgeldiniz</body>
</html>
  • Tebrikler ilk HTML sayfanızı yaptınız.
  •  Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim.
  •  Bir şey dikkatinizi çekti mi?
  •  İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık.
  •  Bu ifadelere tag (etiket) deniyor.
  •  Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor.
  •  Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz.
  •  Bu son yaptığımız etiketi sonlandırıyor.
  •  Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.
<html>…</html>
Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.
<head>…</head>
<head>…</head> etiketleri arasına sayfa hakkında bilgiler yazılır, meta ve title gibi etiketler burada yer alır.
<body>…</body>
<body>…</body> arası ise sayfamızın gövde bölümü.
Ekranda gösterilecek kısımlar bu tagler arasında yer alıyor.
<title>…</title>
Title sayfanın başlığını belirtiyor. Burada yazılanlar browser penceresinin başlığında browser adıyla beraber gösteriliyor.

Web Tasarım ve Programla 2.Dönem 1.Uygulama Sınav Soru ve Cevapları 2012

1-Bir üniversite öğrencisinin 1. Vize, 2. Vize ve final sınav sonuçlarını alarak ortalamasını hesaplayan program istenmektedir. Eğer ilk defa sınava giriyorsa vize ortalamalarının %40’ı ve final notunun %60’ı alınarak, aksi takdirde vize ve final notlarının %50’si alınarak öğrencinin durumunu “Geçtiniz” ya da “Kaldınız” olarak yazan programı yapın.

2-Klavyeden girilen n değerine göre “*” sembolünu kullanarak kare ve üçgen şekli oluşturan programı yazın

3-Klavyeden girilen N adet sayının RANJ’ını bulan programı yazın.(RANJ=Bir dizi sayının içinde en büyük ve en küçük olanının çıkartılmasıyla elde edilen sayıdır.)(Açıklama..: ilk olarak kullanıcıdan kaç adet sayı gireceği bilgisi istenecektir , daha sonra belirtilen kadar sayı alınıp bir dizi içerisine aktarılacak dizi sırlanıp en büyük ve en küçük değer birbirinden çıkartılacaktır.)

4-Klavyeden girilen bir sayının tam bölenlerini bulan programı yapın

5-Gün değerine göre ekranda gün değerini harf sayısı kadar yazdıran programı yapın.(Cuma ise dört defa Cuma yazacak şekilde..)

Okumaya devam et “Web Tasarım ve Programla 2.Dönem 1.Uygulama Sınav Soru ve Cevapları 2012”

Javascript Dizilere Giriş Dizi Tanımlama, Diziler Üzerindeki İşlemler 2

Bir önceki dersimizd javascript dizi tanımla işleminden bahsetmiştik şimdide diziler üzerinde işlem yapabileceğimiz bazı fonksiyonları örnekler ile açıklayalım..

1.Dizileri birleştirme Array.concat

Farklı iki diziyi birleştirerek yeni bir dizi elde edilmesini sağlar

<html>
<body>

<script type=text/javascript”>

var dizi1 = [“Ali”, “Veli”];
var dizi2 = [“49”, “50”];
var tekdizi =dizi1.concat(dizi2);// tekdizi değişkenine dizi1 sonuna dizi2 ekleyerek atıyoruz
document.write(tekdizi);

</script>

</body>
</html>

2.Dizi Elemanlarını birleştirme Array.join

Dizi içindeki tüm elemanları birleştirerek tek bir değişkene atar

<html>
<body>

<script type=text/javascript”>

var meyva = [“Elma”, “Armut”, “Kel”, “Mahmut”]; // Meyva isimli dizi tanımlandı
document.write(meyva.join() + <br />); // tüm dizi elemanları yazdırılıp bir alt satıra indi
document.write(meyva.join(+) + <br />); // dizi elemanlarını aralarında + ekleyerek yazdı
document.write(meyva.join(” ve “)); //dizi elemanlarını aralarına ve ekleyerek yazdı

</script>

</body>
</html>

Okumaya devam et “Javascript Dizilere Giriş Dizi Tanımlama, Diziler Üzerindeki İşlemler 2”