27 Şubat 2012 Pazartesi

ÇOKLU ORTAM ARAÇLARI (Ertuğrul ÇAĞRITEPE)

Yapacağımız projenin Sosyal Medya üzerinden olacağı için Proje Lider Öğretmenimiz Muhittin IŞIK tarafından aşağıdaki eğitimler verilmiştir. Böylece kendi Web ve Blog sayfalarımızı hazırlamamız sağlanmıştır. Aşağıda temel web tasarım çalışmalarında neler yaptığımız anlatılmıştır.


Çoklu Ortam Araçları

Geçen hafta Proje Lider Öğretmenimiz Muhittin IŞIK Stil Şablonlarını öğretmişti.
Bu hafta ise Çoklu Ortam Araçlarını öğretti.Çoklu Ortam Araçları;

·         Resim

·         Ses Araçları

·         Video

   İlk olarak Resim Eklemeyi öğretmeye başladı.

Resimler HTML belgelerine estetik açıdan çok şeyler katabilir diyerek söze başladı Lider  Öğretmenimiz.Resim dosyalarının uzantılarının GIF,JPG,PNG olduğunu söyledi.Resimler <img> etiketi aracığılıyla kullanıldığını gösterdi.Bize <img> etiketi ile kullanılan bazı parametreler vardır,dedi ve bunları sıralamaya başladı;



·         SRC:Resmin dizini bu parametre ile bildirdiğimizi söyledi.ÖRNEK:<img src=”resim.gif”>

·         WIDTH:Resmin genişliğini piksel cinsinden bildirir,dedi. ÖRNEK:<img src=”resim.gif” width= “100”>

·         HEIGHT:ise aynı şekilde resmin yüksekliğini bildirebileceğimizi söyledi. ÖRNEK: <img src=”resim.gif” height=“100”>

·         BORDER:Resmin etrafındaki çizginin kalınlığını belirtir,dedi. ÖRNEK: <img src=”resim.gif” border=“6”>

·         ALIGN:Yatay konumlarını belirler;left,right,center değerlerini yazabileceğimiz bir etiket olduğunu söyledi. ÖRNEK: <img src=”resim.gif” align=“left”>

·          ALT:Mouse resmin üzerindeyken yazacağınız metni gösterir,dedi. ÖRNEK: <img src=”resim.gif” alt=“Buraya açıklama yazın”>

Proje Lider Öğretmenimiz bunları anlattıktan sonra üzerine tıklayınca istediğiniz adrese yeni pencere açan bir resim de ekleyebilirsiniz.Bunun için aşağıdaki satırı yazmanız yeterlidir.

           <a href=http://www.gidilecekadres target:”……..”><img src=”resim.gif”><a/a>



Ses Araçları Ekleme

                   Seçiminize göre geri planda WAW, .AU ve ya MIDI ses dosyalarını çalmak için Internet Explorer da BGSOUND etiketini  kullanabilirsiniz,dedi.

                 < BGSOUND SRC=”deneme.mid” LOOP=”5”> NOT:LOOP kodu tekrarlama sayısı için kullanılan bir etikettir.Yani 5 defa çalacaktır.



Video Ekleme

      Bir AVI veya MOV dosyasını oynatmak için aşağıdaki etiketi yazmanız yeterlidir.

<IMG DYNSRC=”DENEME.AVI”SRC =”DENEME.GİF” LOOP=”INFINITE”>


20 Şubat 2012 Pazartesi

STİL ŞABLONLARI (Eren KILIÇKAYA)

Yapacağımız projenin Sosyal Medya üzerinden olacağı için Proje Lider Öğretmenimiz Muhittin IŞIK tarafından aşağıdaki eğitimler verilmiştir. Böylece kendi Web ve Blog sayfalarımızı hazırlamamız sağlanmıştır. Aşağıda temel web tasarım çalışmalarında neler yaptığımız anlatılmıştır.
STİL ŞABLONLARI

Öğretmenimiz dersi geçiyoruz dedi ve bilgisayarlarınıza oturun dedi. Dediklerimi yazın dedi.Konumuz stil şablonları idi.Stil şablonları sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi tek bir harfin stilini:yani renk, font, büyüklük gibi değiştirmek içinmiş.

STİL ŞABLONLARININ KOMUT YAPISI

Bir stil dokümanı  <style type= ’ ’text/css’’>…</style> ifadeleri arasına yazılırmış. Stil kısmı HTML dökümanının  <head>…</head> aralığına tanımlanırmış.

STİL ŞABLONLARININ ÇEŞİTLERİ

Stil şablonları üç çeşittir. Bunlar: Yerel CSS, Genel CSS, Harici CSS miş.

Yerel Stil şablonu: Yerel stil şablonu HTML belgesinin body kısmına yazılırmış. Sadece bir kereliğine yazıldığı yerde etkili olurmuş. Öğretmenimiz öyle söylediJ

Genel Stil Şablonları:  HTML belgesinin head bölümüne yazılıp belgenin tümünü etkilermiş.

Harici Stil şablonları: Global stil şablonu sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini Kullanarak istediğimize ulaşabiliriz.

HTML dosyasının kodlarının arasında geçen  <link rel=’’stylesheet’’ type=’’text/css’’href=’’stil. css’’>

Font –Family:  Font tipini belirler.

Font-weight:  Fontun kalınlık ve inceliğini belirtir.

Ø  Bold:  Fontu kalın yapar.

Ø  Normal:  Fontu normal hale getirir.

Ø  Font-style:  Fontun stilini belirler

Ø  İtalic: Yazının sağa doğru yaslar.

Ø  Color: Yazının rengini belirler.

Text-Transform:

Ø  Lowercase: Yazının tümünü küçültür.

Ø  Uppercase: Yazının tümünü büyültür.

Ø  Capitalize: Yazıyı istediğin şekilde bırakır.

Text-Decoration:

Ø  Underline: Yazının altı çizik olmasını sağlar.

Ø  Overline: Yazının üstünü çizgili olmasını sağlar.

Ø  Line thrugh: Yazının üzerini çizgili olmasını sağlar.

Ø  None: Yazının herhangi bir yerine çizgi bırakır.

Text –Align

Ø  Left:Yazının solda olmasını sağlar.

Ø  Center: Yazıyı ortalar.

Ø  Right: Yazıyı sağ yaslar.

Ø  Line height: Yazının normal satırdan çizgi yüksekliğini belirler.

Ø  Text-ident: Yazının soldan ne kadar boşluk kalacağını ayarlar.

Seçiciler

 

Seçiciler bize oluşturduğumuz  <h1> , <h2> gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler sağlıyormuş. Bunlar Id seçiciler ve sınıf seçicilerdir.

Ø  Id selectors ( Id Seçiciler )

Id seçiciler tanımlayıcı adların önündeki  ‘’#’’ işaretinden tanırız. HTML belgesindeki tanımlayıcı adlara gönderme yaparak herhangi bir HTML etiketine stil vermek için kullanırız.

Ø  Class Selectors ( Sınıf Seçiciler )

Bu seçiciye sayfamızdaki h1 gibi etiketlerin tümünü ayrı olmasını istemediğimiz zaman kullanırız. Böylelikle genel bazı özelliklere koruyarak farklı özellikleri değiştirebiliriz


13 Şubat 2012 Pazartesi

ÇERÇEVELER (ŞEYMANUR UZ)

Yapacağımız projenin Sosyal Medya üzerinden olacağı için Proje Lider Öğretmenimiz Muhittin IŞIK tarafından aşağıdaki eğitimler verilmiştir. Böylece kendi Web ve Blog sayfalarımızı hazırlamamız sağlanmıştır. Aşağıda temel web tasarım çalışmalarında neler yaptığımız anlatılmıştır.


ÇERÇEVELER

Geçen hafta öğretmenimiz bize  “Formları” öğretmişti.

Bu hafta ise çerçeveleri işledik.

Alt başlık olarak;

  • <Frameset>
  • Cols
  • Rows
  • <Frame>
  • <Noframes>
Çerçeveler

Her çerçeve kendi URL’sine sahipmiş.

Her çerçeveye ad verilebilirmiş.

Her çerçeveyi bizim boyutlandırabileceğimizin yanı sıra kendi kendine de otomatik olarak boyutlanabilirmiş.

<Frameset>

Öğretmenimiz çerçeve oluşturmada kullandığımız bir etiket olduğunu söyledi.

Cols

Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlarmış.

Rows

Öğretmenimiz Cols etiketinde değerler verilirken kullanılan formatın aynısı kullanılarak çerçevelerin alt alta satırlar görünümünde açılmasını sağladığını söyledi.

<Frame>

<frameset>ile çerçeveleri böldükten sonra içlerine konulacak sayfaları tanımlama işi <Frameset> elemanı ile yapılıyormuş.

<Noframes>

<Noframes> etiketi, eğer ziyaretçinin istemcisinin çerçeve desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılırmış.

(1.resim celestialrealm.org 2.resim infn.it sitelerinden alınmıştır)

6 Şubat 2012 Pazartesi

FORMLAR (İremnur ERENEL)

Yapacağımız projenin Sosyal Medya üzerinden olacağı için Proje Lider Öğretmenimiz Muhittin IŞIK tarafından aşağıdaki eğitimler verilmiştir. Böylece kendi Web ve Blog sayfalarımızı hazırlamamız sağlanmıştır. Aşağıda temel web tasarım çalışmalarında neler yaptığımız anlatılmıştır.

 FORMLAR

Bugünkü konumuz formlarmış. Formlar on üç alt başlık olarak bakıncakmışız. Şimdi on üç alt başlığı bakıncakmışız.

*<Formlar>

Formlar Html’in ayrılmaz ve vazgeçilmez parçalarından biridir. Bu yazıda işin biraz teorik kısmına değinecekmişiz.

Formlar HTML kodlarında <form> </from> tagları ile belirtilir. Bu iki tag arasına yazılan tüm form elemanları bu formun bir üyesidir ve bu form elementleri genelde kullanıcı odaklı veri girişleri için kullanılırmış.

*Action

Formalardan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu göstermekmiş

* Method

Formadan girilecek bilgilerin değerlendirici dosyaya gönderilme yönetimini belirtirmiş. Post değeri ise form içeriğini direk olarak değerlendiriciye yönlendirirmiş.

*Target

Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceği gösterirmişiz. Pencere içimleri HTML 1modülü bağlantılar konusunda da gösterdiğimiz ‘_blank’,_’top’ gibi değerlerden biri olabilirmiş.

*<İnput>

Genel amaçlı bir from etiketinmiş. Girdiği türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlarmış.

*CheckBox

Formumuza onay kutuları eklemek için kullanılırmış.

*Radio

 Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olarak tanırmış. Grup içindeki radio kontrolleri her zaman aynı isim taşımalı, değerleri ise value değerine atanmalıymış.

*Text

Kullanıcıdan tek satırlık veri alınmasına olanak tanırımmış. Size ve maxlength yakıları, bu kontrolle birlikte kullanılabilirmiş.

*Image

Bir resmi ifade eder ve üzerine tıkladığında form değerlerini sunucuya yollar. Bu tag src ile birlikte src komutu resmin bulunduğu URL’yi gösterirmiş.

*Password

Formumuza parola yazılabilecek alan eklemek için kullanılırmış. ‘Text’ elemanından farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilirmiş.

*Textarea

Metin alanı anlamına gelen bu kelime formunuza yazı yazabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanırmış.

*Reset 

Tıkladığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlarmış.

*Submit
Formalar içeriğini sunucuya yollarmış. Value değeri  üzerindeki yazı değiştirilebilirmişiz.
İrem Nur Erenel