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

Ebat: px

Şu sayfadan göstermeyi başlat:

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

Emre Şahin
5 yıl önce
İzleme sayısı:

1 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 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*)

2 Site Tasarım Çalışması -1 ÇÖZÜM: [crayon-5c1698f3b3d /]

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

5 İÇ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şı,

6 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-5c1698f3b515c /] CSS te Font Özellikleri ÖZELLİK font-size font-weight ALDIĞI DEĞER YAPTIĞI İŞ 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 normal bold kalın bolder daha kalın

7 font-style line-height lighter açık 100 den standart 900 e kadar kalına normal normal İtalic (oblique) italik px,em vb cinsinden değer Satır aralık değeri [crayon-5c1698f3b56d /] CSS te Font (Sayısal) Büyüklükleri Örnekleri deneyerek sonuçları gözleyiniz. [crayon-5c1698f3b5c6c /] CSS te Arka Plan (background) özellikleri CSS te backgroun kullanımına ilişkin örnek dosya aşağıdadır. İnceleyiniz.

8 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 background AÇIKLAMA ALDIĞI DEĞER YAPTIĞI İŞ background-color Renk background-image Arka Plan özelliklerini background-atachment ayarlar background-position background-repeat background-color rgb,hex,name background-image url(dosyaadresi /adı) background-attachment Resim Hareket Pozisyon Tekrar scroll Sayfayla hareket fixed Sabit

9 background-position background-repeat 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 repeat Tekrar Et no-repeat Tekrar Etme repeat-x Sağa doğru tekrar repeat-y Aşağı doğru tekrar [crayon-5c1698f3b /] [crayon-5c1698f3b /] CSS Kodları Nereye Yazılır ve

10 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:

11 # 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-5c1698f3b68ab /] Form İşlemleri Dosyası Uygulama FORM İŞLEMLERİ Form Oluşturma: Formlar ziyaretçilerden bilgi almak için kullanılır. Form oluşturmak için <form> tagı kullanılır. Formda girilen verilerin hangi sayfaya gönderileceğini belirtmek için action özelliği, Formdaki verilerin hedef sayfaya gönderilme yöntemini belirlemek için method özelliği kullanılır. <form name= action= mail.php method= get > Metin (Text) Kutuları Oluşturma: Metin kutuları form işlemlerinde sıkça kullanılır. Metin kutusu oluşturmak için <input> tagı ile name (isim) size

12 (uzunluğu) maxlength kullanılır. <input type= text required></input> (maksimum name= adi uzunluk) size= 30 özellikleri maxlength= 50 Web ve Mail Adresi Almak: HTML5 ile e mail ile web adreslerini otomatik alabiliriz. Tarayıcıların otomatik tanıması için e mail adresleri için type= web adresleri için ise type= url yazabiliriz. Özellikle tablet bilgisayarlar ve cep telefonlarında ortaya çıkar. Özel işaretler ve kısaltmalar otomatik çıkmaktadır. Metin Alanları (Textarea) Kutuları Oluşturma: Çok satırlı metinlerin alınması maksadıyla kullanılırlar. İleti, Yorum vb. gibi durumlarda uygulanır. Metin alanları oluşturmak için <textarea> tagı ile name (isim) ve rows (satır miktarı) ve cols (kaç sütun karakter genişliği) özellikleri kullanılır. Onay ve İptal Butonları Oluşturma: Gönder seçeneği için <input type= submit value= Gönder > İptal seçeneği için <input type= reset value= İptal > komutları kullanılır. CheckBox ve Radio Butonları Oluşturma: Eğer kullanıcıdan Evet/Hayır gibi iki seçenekten birisinin tercih edilmesi isteniyorsa radio buton birden fazla seçenek kullanılması isteniyorsa çoklu seçenek kutuları checkbox kullanılır. Kullanımı: <input type= checkbox begendim </input> <input type= radio şeklindedir. name= iyi value= evet > name= sitebegenisi İyi Sitenizi </input>

13 Checkbox ta İşaretlenen kutular gönderilen sayfaya evet değeri vereceği için hangi kutuların işaretli olduğunu anlayabiliriz. UYGULAMA DOSYASINI İNCELEYİNİZ AÇIKLAMALAR İÇERİSİNDEDİR: [crayon-5c1698f3b6e /] Tablo İşlemleri Dosyası KODLAR Uygulama 5 X 4 (5 satır 4 sütun) boyutunda bir tablo hazırlayınız. Yaptığınız Tabloda yatayda 2 dikeyde 3 hücreyi birleştiriniz. İsteyen kodlarını incelemek üzere gönderebilir. (ÖRNEK TABLO) HTML-Ses ve Video İşlemleri Uygulama Dosyası Ses video işlemleri HTML5 te kolaylaşmıştır. Günümüzde HTML5 tüm tarayıcılarda desteklenmektedir. Bu işlemler için <audio> <video> tagları ve bu tagların width= Genişlik;

14 height=yükseklik controls =Kontrol butonları autoplay= Otomatik yapılabilir. Kodlarla ilgili kullanabilirsiniz. oynatma parametreleri dosyaları farklı kullanılarak kaydederek Kendi mp3 ses ve mp4 video dosyalarınızı da kullanabilirsiniz. Ses Dosyası (Sağ Tuş-Farklı Kaydet) Video dosyası(sağ Tuş-Farklı Kaydet) Kodların width height değerlerini boyutlarını ayarlayabilirsiniz. [crayon-5c1698f3b74c /] değiştirerek video

Benzer belgeler

Site Temizlik Projesi Kodları

Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu