Site Temizlik Projesi Kodları

Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.)
[crayon-5df5aae5f25c2819265445/]

İndir (DOCX, 15KB)




Site Tasarım Çalışması -3

Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız.,

Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir.  Sizler eşit bölmeli table kullanacaksınız;

      1. Önce siteyi oluşturmak için gerekli tablonun kaç satır ve kaç sütundan meydana gelebileceğini iyi analiz edin. Onun için kağıda tabloyu çizerek içine bölümlerin isimlerini verin (başlık, 1 paragraf vs.)
      2.  Tablonun kaç satır ve sütundan oluştuğunu analiz ettiğinizde sıra satır yüksekliği ve sütun genişliklerini bulmaya geldi. Kendiniz yeterli bir değer verin kağıda yazın
      3. Sonra resimleri kaydedin (sayfanız ile aynı hizada olmasına dikkat edin)
      4. Sonra kodlamaya geçin…

      Sonra kodlamaya geçin

      Kodlamada sırasıyla;
      1. Tablonun genel yüksekliğini ve genişliği  verin
      2. Satır ve sütunları oluşturun
      3.  Satır yüksekliklerini ayarlayın
      4.  Sütun genişliklerini ilk satırdan ayarlayın
      5.  Birleşecek satır ve sütunları oluşturun

    1. DAHA SONRA İÇERİKLERİ KOYARAK CSS VERİN VİDEOLARI İSTEDİĞİNİZİ YOUTUBE DAN EKLEYİNİZ.

      ÖRNEK SİTEYİ AÇMAK İÇİN TIKLAYINIZ (50 PERFORMANS PUANI*)

 




Site Tasarım Çalışması -1

ÇÖZÜM:
[crayon-5df5aae6001f2422213762/]
 




Site Tasarım Çalışması-2

 

İÇERİK YAZISI
Temizlik tüyoları ile ilgili sitemize HOŞ GELDİNİZ.
Baş Belası Banyo Temizliği,
Kesme Tahtası Temizlerken,
Şişeleri Kolayca Temizlemek İçin,
Tabaklarınız Işıl Işıl Olsun İster misiniz?
Buzdolabındaki Kötü Kokulara Karşı,
Metal Lavabo ve Bitmeyen Kireçleri,
Halınız mı Kirlendi? ve daha tüyo ya mı ihtiyacınız var ?
Sitemizde temizlik tüyoları verilecek siz de basit işlemler ile evinizde temizlik işlerini çok daha pratik bir şekilde yapabileceksiniz. Temiz bir ev için pratik tuyolar!….

 

ÇÖZÜM:
[crayon-5df5aae600bf7120049610/]




CSS’te Font Özellikleri

ÖZELLİK ALDIĞI DEĞER YAPTIĞI İŞ
font-size xx-small En küçük
x-small
small
medium orta
large büyük
x-large
xx-large
smaller ..
larger
px,em,pt,ex… etc. Nicel değerler
font-weight normal  
  bold kalın
  bolder daha kalın
  lighter açık
  100 den standart
  900 e kadar kalına
font-style normal normal
İtalic (oblique) italik
line-height px,em vb cinsinden değer Satır aralık değeri

[crayon-5df5aae6015b2645667126/]
 




CSS’te Font Büyüklükleri (Sayısal)

Örnekleri deneyerek sonuçları gözleyiniz.

 
[crayon-5df5aae601f86310130311/]
 




CSS’te Arka Plan (background) özellikleri

CSS te  backgroun kullanımına ilişkin örnek dosya aşağıdadır. İnceleyiniz.

RGB (red green blue)
Beyaz (255,255,255)- siyah (0,0,0)
CSS ‘te renk kullanımı
 Açık Kaynak 1. name (isim)=> color:red;
 Açık Kaynak 2. HEX değeri (uzun ve kısa kullanımı)=> color:#FF0FF
 Paint / Açık kaynak 3. RGB değeri => color: rgb(0,0,255), rgb(0%,0%,100%)
ÖZELLİK AÇIKLAMA ALDIĞI DEĞER YAPTIĞI İŞ
background Arka Plan özelliklerini ayarlar background-color Renk
background-image Resim
background-atachment Hareket
background-position Pozisyon
background-repeat Tekrar
 
background-color   rgb,hex,name  
 
background-image   url(dosyaadresi /adı)  
 
background-attachment   scroll Sayfayla hareket
fixed Sabit
 
background-position   left top Sol-Üst
left center Sol -Orta
left bottom Sol -Alt
center top Orta-Üst
center center Orta-Orta
center bottom Orta -Alt
right top Sağ-Üst
right center Sağ -Orta
right bottom Sağ -Alt
X% y% Yüzde değer
    xpos ypos Pixel değer
 
background-repeat   repeat Tekrar Et
    no-repeat Tekrar Etme
    repeat-x Sağa doğru tekrar
    repeat-y Aşağı doğru tekrar

 
[crayon-5df5aae6029ec067135350/]
[crayon-5df5aae602a05538932894/]
 




CSS Kodları Nereye Yazılır ve Nasıl Etkiler (Seçiciler)

CSS Yazım Yerleri:

1. İnline (Komut içi CSS Kodları)

HTML tagının içerisine yazılan kodlara inline CSS denir. HTML komutlarının style özelliği kullanılarak yazılır. Örneğin <p> tagının color özelliğinin red olmasını istiyorsak yani paragraftaki metinlerin kırmızı olmasını istiyorsak kodları aşağıdaki gibi yazarız

2. İnternal (Dahili CSS Kodları)

CSS komutları <head> ile </head> taglarına arasına <style type=”text/css”> ile </style> arasına yazı

3. External (Harici CSS Kodları)

CSS komutları ayrı bir dosyaya yazılır. Bu şekilde kullanılması uygundur. HTML kodları ile CSS ayrı dosyalarda olur. Bunun için <head> tagında <link rel=”stylesheet” href=”style.css” type=”text/css” > Yukarıdaki örneği bu şekilde düzenlersek aşağıdaki gibi olur.

CSS Yazım Kuralları:

CSS kodları;

  1. taglara
  2. id lere
  3. class lara yazılır.

tag içerisine  örnek:

p { color:red;

font size:16 px;}

id (sadece bir taga özellik verilmek istenirse) örnek:

# ilk { color:red;

font size:16 px;}

class  (birden fazla taga özellik verilmesi gerekirse) örnek:

.ilkclass { color:red;

font size:16 px;}

AŞAĞIDAKİ ÖRNEKLERİ İNCELEYİNİZ.
[crayon-5df5aae603552499879863/]
 




CSS Metin Düzenleme İşlemleri

CSS Metin Düzenleme ile ilgili derste işlenen konulara ait notlar  aşağıdadır.

DERS NOTLARI

İndir (DOCX, 1.86MB)




CSS İşlemleri -1-

CSS   düzenleme İşlemleri ile ilgili birinci kısım derste işlenen konulara ait notlar  ve powerpoint sunusu aşağıdadır.

DERS NOTLARI

İndir (DOCX, 1.96MB)