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-5d62b01a6e04f550554080/]
 




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-5d62b01a6f663883586527/]




Form İşlemleri Uygulama Dosyası

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=”email” 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 (uzunluğu) maxlength (maksimum uzunluk) özellikleri kullanılır.

<input type=”text” name=”adi” size=”30” maxlength=”50” required></input>

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=”email” 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” name=”iyi” value=”evet”> Sitenizi begendim </input>

<input type=”radio” name=”sitebegenisi” İyi </input> şeklindedir.

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 KODLAR İÇERİSİNDEDİR:
[crayon-5d62b01a6fc7f759341651/]
 




Tablo İşlemleri Uygulama Dosyası

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;

height=Yükseklik

controls =Kontrol butonları

autoplay= Otomatik oynatma parametreleri kullanılarak yapılabilir.

Kodlarla ilgili dosyaları farklı kaydederek kullanabilirsiniz. 

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 değiştirerek video boyutlarını ayarlayabilirsiniz.
[crayon-5d62b01a702ca499816263/]
 

 




HTML-Tablo İşlemleri Uygulama Dosyası

HTML-Tablo İşlemleri Uygulama Dosyası kodları aşağıdadır.  Kod içeriğinde açıklamalar mevcuttur. Çalıştırıp sonuçları görebilirsiniz.
[crayon-5d62b01a70820108119677/]
 




HTML-Sayfa içi Link İşlemleri Uygulama Dosyası

HTML-Sayfa içi link İşlemleri (anchor) Uygulama dosyası kodları aşağıdadır. Çalıştırarak görebilirsiniz.
[crayon-5d62b01a712b8820102210/]
 




Performans Sınavı -1

Dosyayı buraya tıklayarak  indiriniz. Çözdükten sonra sabrinejat@gmail.com adresine gönderiniz.

* 1-35 Sorular : 2 Puan , Puan 36-40 Sorular 6 Puandır.

** Cevaplarınızı bu kağıda işaretleyiniz. Test sorularının cevaplarını koyu yapınız. Mail ile gönderiniz. 8 Mart 2018 tarihinde aynı sınav sınıfta yapılacaktır. Sınavda kaynaklar açıktır.

*** Word programında sorun olanlar cevaplarınız el yazınız ile bir kağıda yazıp teslim edebilirsiniz. 

İndir (DOCX, 27KB)




HTML Güncellenen Kod Sözlüğü

HTML Kod Sözlüğü ders görüldükçe güncellenecektir. Devamlı kontrol etmeniz önemlidir.

İndir (DOCX, 20KB)