İLK OYUNUM

SCRATCH PROGRAMI İLE KENDİ YAPTIĞIM RAKET OYUNU

http://scratch.mit.edu/projects/fcetin/2509089

SCRATCH

Scratch

Kelime anlamı olarak; tırmalamak, keskin bir şeyle kazıyarak yüzeyini bozmak, kaşımak, tahriş etmek, (k. Dili): acele ile kötü bir şekilde yazmak veya çizmek gibi anlamlara geliyor.

Bilgisayarcılar için ise scratch bir grafik programlama dilini ifade ediyor. Öncelikle ilköğretimi dayalı eğitim alanlarında kullanılmaya çok elverişli olan bu program sayesinde çocuklar kendi multi-medya tasarımlarını yapabilir ve karşılaştıkları gerçek hayat problemleri karşısında teknolojiyi kullanarak yaratıcı çözümler ortaya koymalarını ve kendilerini değişik şekillerde ifade ederek 21. Yüzyıl becerilerini kazanabilirler.

Scratch Programlama Ortamı

Scratch programını, ücretsiz olarak scratch.mit.edu adresinden ücretsiz olarak indirebilirsiniz. Bilgisayara kurma işlemi bittikten sonra şekildeki gibi bir ekranla karşılaşılır.

Scracth-Temel Özellikleri

Geliştirilen bu yeni programlama ortamı tasarlanırken aşağıdaki temel özellikler dikkate alınmıştır.

-  Blok yapılarla programlama

- Zengin medyanın programlanabilir kullanılması

- Daha fazla paylaşılabilirlik

- Gerçek dünya ile bütünleşme

Scratch Dersleri

EKRAN

Ekran, hikayelerinizin, oyunlarınızın ve animasyonlarınızın canlandığı yerdir. Karakterler biribirleriyle burada etkileşime girerler. Ekran 480 birim genişlikte ve 360 birim uzunluktadır.

Projeleri tam ekran görebilmek için Sunum Modu düğmesine tıklayın. Tam ekran görünümünden çıkabilmek için Esc düğmesine basın.

YENİ KARAKTER DÜĞMELERİ

Yeni bir Scratch projesine başladığınızda,proje bir kedi karakteriyle başlar. Yeni karakterler yaratabilmek için aşağıdaki düğmelere tıklayabilirisiniz:

Kendi karakterini çiz

Yeni bir karakter için kostüm seç-veya hazır olan bir karakteri al

Sürpriz bir karakter al

Eğer karakteri silmek isterseniz, araç çubuğundaki makas figürü olan düğmeyi seçip daha sonra karakterin üzerine tıklayabilirisiniz. Veya, fare karakterin üzerindeyken sağ tuşa tıklayarak çıkan menüden “sil” komutunu seçebilirsiniz.

KARAKTER LİSTESİ

Karakter Listesi projedeki bütün karakterlerin tırnak imlerini göstermektedir. Herbir karakter için, karakterin ismini, kaç tane koda ve kostüme sahip olduğunu göstermektedir,

Bir karakterin kodlarını, kostümlerini ve seslerini inceleyip almak için Karakter Listesindeki karakterin tırnakimine tıklayın veya ekrandaki karaktere çift tıklayın. (Seçilmiş olan karakterin üzeri karartılarak belirtilmiştir. Karakter Listesinde mavi çerçeve içine alınır.)

Tırnakimlerini sürükleyerek Karakter Listesindeki karakterleri yeniden düzenleyebilirsiniz.

BLOK PALETİ VE KOD ALANI

Bir karakteri programlamak için Kod Alanına Bloklar Paletinden blok sürükleyin. Bir bloğu çalıştırmak için üzerine çift tıklayın.

Blokları biraraya getirip blok kümeleri oluşturarak kodları(programları) hazırlayabilirisiniz. Bu kümelerin herhangi bir yerinde çift tıkladığınızda, bütün kod en tepeden başlayarak aşağıya doğru çalışmaya başlayacaktır. Bir bloğun ne yaptığını bulabilmek için fare bloğun üzerindeyken sağa tuşa tıklayıp çıkan menüden “Yardım”ı seçin.

Kod alanına veya etrafına bir blok sürüklediğinizde, beyaz renkle işsretlenmiş yer, bloğu nereye bıraktığınızı ve diğer bloklarla nasıl bir bağlantı oluşturduğunuzu belirtir.

Bir blok kümesini hareket ettirmek için en tepedeki bloktan onu tutun. Eğer kümenin ortasından bir blok sürükleyip çıkarırsanız onun altında bulunan diğer bloklar da onun beraberinde gelirler.

Örnekte olduğu gibi , bazı blokların iç kısımlarında yazılabilir beyaz alanlar bulunmaktadır. Beyaz alanda bulunan bu sayısal değeri değiştirmek için, yazılmış olan sayıyı silip yerine yenisini yazabilirsiniz. Ayrıca, böyle köşeleri yuvarlak olan blokları da uygun boşluğu olan bir bloğun içine yerleştirebilirisiniz.

Burada görüldüğü gibi, , bazı bloklarda içindeki alana tıklandığında gözüken menü bulunmaktadır. Menüyü görebilmek için kenarda bulunan tıkladıktan sonra listeden tercih yapmak için tekrar tıklamanız gerekir..

KOSTÜMLER

Karakterlerin kostümlerine bakıp istediğiniz birini seçebilmek için Kostümlersekmesine tıklayın.

Bu karakterin iki tane kostümü bulunmaktadır. Karakterin(girl1-walking) şu an ki kostümü çerçeve içinde belirtilmiştir. Farklı bir kostüme değiştirmek için, istediğiniz kostüme tıklamanız yeterlidir.

Bir karakterin kostümü değiştirildiğinde görüntüsü de değiştiği gibi, arka fon görüntüleri değiştirilerek Ekran’nın görüntüsü de değiştirilebilir. Ekranla bağlantılı kodları, arka fonları ve sesleri inceleyip yerleştirmek

Yeni kostüm yaratmanın üç yolu vardır:

• düğmesine tıklayarak Paint Editor de istediğiniz kostümü hazırlayabilirsiniz.

• düğmesine tıklayarak Hard diskten yeni bir imaj alabilirsiniz.

• Masaüstünden veya bir web asyfasından bir imajı alıp kullanabilirsiniz.

Scratch birçok imaj formatını tanıyabilmektedir: JPG, GIF, BMP, ve PNG

Kostümlerin tırnakimlerini kullanarak, kostümlerin sırasını değiştirebilirsiniz.

Bir kostümü yeni bir karaktere dönüştürebilmek veya kostümün bir kopyasını ayrı bir dosya olarak gönderebilmek için kostümün tırnakimine sağ tuşla tıklayın.

SESLER

Karakterlerin seslerini görebilmek için Sesler Sekmesine tıklayın.

Yeni sesler kaydedebilir ve ses dosyaları alabilirsiniz. Scratch MP3 dosyalarını ve sıkıştırılmamış WAV, AIF, ve AU dosyalarını (her örnek için 24-bit yerine, 8-bit veya 16 bit olması gerekir) okuyabilmektedir.

ŞİMDİKİ KARAKTER BİLGİSİ

Şimdiki Karakter Bilgisi bir karakterin ismini, x-y pozisyonunu ve yönünü

göstermektedir.

Karakter için yeni bir isim yazabilirsiniz.

Karakterin yönü, hareket bloğu çalışmaya başladığı zaman karakterin nereye gideceğini

belirtir. (0=yukarı, 90=sağ, 180=aşağı, -90=sol). Tırnakimindeki mavi çizgi, karakterin

yönünü göstermektedir. Bu çizgiyi sürükleyerek karakterin yönünü değiştirebilirsiniz.

Karaktere çift tıkladığınızda, yön eski haline geri dönecektir. (yön=90)

Karakter Al düğmesine tıklayarak başka bir projede kullanmak üzere karakteri ayrı bir

dosya halinde kaydedebilirsiniz.

DÖNDÜRME BİÇİMİ

Döndürme Biçimi düğmelerine tıklayarak karakter yönünü değiştirirken nasıl döndüğünü

kontrol eder.

Döndür: Karakter yönünü değiştirirken kostüm döner.

Sağa-sola flip: Kostüm ya sağdan ya da soldan görülür.

Döndürme yok: Kostüm asla dönmez.(Karakter yönünü değiştirse bile)

ARAÇ ÇUBUĞU

Bir araç seçmek için araç çubuğuna tıklayın, sonra, bir görevi yerine getirebilmesi için diğer

objelere tıklayın.

Ok: Normal biçim. Karakterleri ve blokları alıp hareket ettirir.

Kopyala: Karakterleri, kostümleri, sesleri, blokları ve kodların kopyasını oluşturur.

Sil: Karakterleri, kostümleri, sesleri, blokları ve kodları siler.

Büyüt: Karakterleri büyütür.

Küçült: karakterleri küçültür.

MENÜ

New(Yeni), Open(Aç), Save(Kaydet), and Save As (Farklı Kaydet) ne yapmak istiyorsanız

onu gerçekleştirmek için size yardımcı olur.

Share!(Paylaş) projenizin Scratch web sayfasına (http://scratch.mit.edu) yüklenmesini sağlar.

Undo(Geri) sildiğinizen son blok,kod veya karakterin geri yüklenmesini sağlar.

Language (Dil) Scratch bloklarında kullanılan dili seçmenize yardımcı olur. (Şimdilik,

menüdeki imgeler ve sekmeler sadece İngilizce olarak yer almaktadır.)

Extras(Ekstralar) spesifik özelliklere sahip bir menü sunmaktadır:

Projeni Al: Diğer projedeki bütün karakterleri ve arka planları istediğiniz projeye alır.

Bu özellik farklı projelerdeki karakterleri biraraya getirmek için çok faydalıdır.

Tek Adımla Başla: Scratch programı, blokları birden değil adım adım ilerleyerek,

her bloğu çalışırken belirgin hale getirerek çalıştırır. Bu özellik,hatalı programları bulmak ve

programlamaya yeni başlayanlar için programın akışını anlayabilmek açısından önemlidir.

Ses dosyalarını sıkıştır: Projede kullanılan ses dosyalarını sıkıştırarak projenin

hazırlanmasında kullanılan dosyaların kapladığı yer miktarının azaltılmasını sağlar.

İmajları Sıkıştır: Projede kullanılan imaj dosyalarını sıkıştırarak projenin

hazırlanmasında kullanılan dosyaların kapladığı yer miktarının azaltılmasını sağlar.

Yardım İster misin? referans materyal, video eğitimi, sıkça sorulan sorular

bölümlerinin bağlantılarını içeren bir sayfayı açar. Bir blok hakkında bilgi almak için, bloğun

üzerinde sağ tuşa tıklayıp çıkan menüden Help (yardım) ı seçin.

YEŞİL BAYRAK

Tepesinde bulunan bütün kodları çalıştırmak için yeşil bayrağa tıklayın. Yeşil

bayrak, birçok kodun aynı anda çalışmasını sağlayacak uygun bir yöntem sunar.

Sunum modunda, Yeşil Bayrak ekranın sağ üst köşesinde şeklinde bir ikon olarak gözükür.

Kısa Yol: Enter düğmesine basmak da Yeşil Bayrağa tıklamak gibi aynı görevi yerine getirir.

Scratch Programını Tanıyalım

Scratch programı sayesinde eğlenceli bir ortamda hikâye anlatımı, oyun, animasyon gibi uygulamaları tasarlayabilir, deneyebilir ve paylaşabiliriz.

Genellikle kaydedilen dosyaları “Belgeler*Scratch Projects” içinde görebilir ve çift tıklatarak açabilirsiniz. Dosya uzantısı *.sb olarak kaydolur.

Programı kurduğunuz klasör içinde de “Program Files*Scratch*Projects” birçok örnek uygulamayı inceleyebilirsiniz. Animation, Game, Interactive Art, Simulations gibi klasörlere bölünmüştür.

Scratch programı taşınabilir (portable) olarak da kullanılabilir. Yani klasörü taşınabilir bir belleğe attığınızda Scratch.exe çift tıklanarak kullanılmaya devam edilebilir.

Sol üst köşede görülen 8 ana grup içine alınan komutları sürükle bırak ile çözmek istediğimiz problemi tasarlarız. İsterseniz projelerinizi http://info.scratch.mit.edu/WeDoLEGO robot eğitim kitine de bağlayabilirsiniz. Bu kiti destekleyen komutları açmak için “Düzenle*Motor blokları göster” menüsünü kullanabilirsiniz.

• Hareket: Karakterinizi sağa, sola ilerletebilir, döndürebilirsiniz.
• Görünüm: İstenen kostüme veya karaktere geçiş yapılabilir, ekrana mesaj kutuları çıkartabilirsiniz.
• Ses: Kaydettiğiniz sesleri çalabilirsiniz, enstrüman değiştirebilir nota çalabilirsiniz.
• Kalem: Kalem rengi, boyutunu değiştirebilirsiniz.
• Kontrol: Programın başlangıç, bitiş ve yönlendirilmesi, döngüler ve karşılaştırmalar yapabilirsiniz.
• Algılama: Klavye, fare kontrollerini ekleyebilir, nesnelerin birbirine değmelerini denetleyebilirsiniz.
• Operatörler: Matematik işlemleri (+, – ,* ,/ , mod) ekleyebilirsiniz.
• Değişkenler: Değerleri geçici olarak saklamak için kullanabilirsiniz.

Karakterinizin adını değiştirmek için yeni değeri metin kutusuna yazabilirsiniz. Döndürme ve boyutlandırma için karakterin simgesine fare ile tıklayıp döndürünüz. Yön değerinin değiştiğini görebilirsiniz.

• Yazılar: Komutları bu bölgeye sürükleyebiliriz. Silmek için geri sürükleyiniz.
• Kostümler: Karakterinizin başka görünümleri var ise kamera ile çekilebilir veya çizilebilir.
• Sesler: “İçeri aktar” ile birçok sesi projenize ekleyebilirsiniz. Animal, Human, Music Loops gibi…

Son olarak da sağ kısımdaki simgeleri inceleyelim.

Damga, makas, büyütme ve küçültme grubunda sahnedeki istenen karakter çoğaltılabilir, silinebilir ve boyutlandırılabilir. Sağ üstteki 3 simge ile programı “küçük ekran”, “tam ekran” ve sunum konumuna alabilirsiniz. Yeşil bayrak ve kırmızı daire ile projenizi çalıştırabilir veya her şeyi durdurarak ilk hale getirebilirsiniz.

Resimdeki “Yeni karakter;” bölümünde sahnenize kendi çiziminiz ile bir karakter ekleyebilir, var olan bir örnek resmi alabilir (Animals, Fantasy, People gibi…) veya sürpriz olarak bir karakter seçebilirsiniz.

SONY, XPERIA U'yla Yine Yapmış Yapacağını!

Xperia ailesinin en renkli, en eğlenceli çocuğu XPERIA U’da fizy müzik uygulaması telefonun her yerinde. İstediğiniz şarkıyı aratıp, anında dinleyebilir, Xloud ve 3D surround ses teknolojisiyle HD kalitesinde müzik keyfini yaşayabilirsiniz. Xperia U’ya entegre olarak gelen fizy sayesinde, müzik çalarda dinlediğiniz herhangi bir şarkının farklı versiyonlarını ya da şarkıcının diğer tüm şarkılarını fizy üzerinden aratıp ve dinleyebilirsiniz. Bununla birlikte Haziran sonunda gerçekleşecek TrackID güncellemesiyle, TrackID uygulaması üzerinden radyoda veya sokakta duyduğunuz bir müziğin ne olduğunu bulup, fizy’de aratma ve dinleme imkanına da sahip olacaksınız. 



Xperia U gençler ve kendini genç hissedenler için özel olarak tasarlandı. Altındaki şeffaf bant, albüm kapağının veya resimlerin renklerine göre renk değiştiriyor. Üstelik Xperia U’yu değiştirilebilir alt kapaklarla da istediğiniz gibi kişiselleştirebilirsiniz. 

Diyelim ki, tam fotoğraflık bir kare var. O anda çektiniz çektiniz. XPERIA U’nun bir saniyede çekim moduna geçme özelliğiyle, bu kareyi kaçırmanız imkansız. 5 Megapiksel kamerasıyla mükemmel fotoğraflar çekebilirsiniz. Üstelik 720p HD video çekim özelliğiyle gelsin bombastik videolar! 

Xperia U, akıllı telefon dünyasına renk katacağa benziyor. Akıllı, eğlenceli, renkli, karizmatik… Tek kelimeyle stil sahibi bir telefon. 

Daha fazla bilgi için tıklayın.

http://bloghocam.blogspot.com/2012/06/sony-xperia-u-yine-yapms-yapacagn.html

HTML Tablolar

TABLOLAR

Genel kullanımı; Öncelikle <table>...</table> etiketlerini yazıyoruz,. <tr> etiketi ile satır açıyoruz; <td> etiketi sütun açıyoruz.

<table>
<tr>
<td> … </td>
</tr>
</tablo>

Örnekler;
 

hücre	<table border="1"> <tr> <td>hücre</td> </tr> </table>
hücre1 hücre2	<table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> </table>
hücre1 hücre2	<table border="1"> <tr> <td>hücre1</td> <tr> </tr> <td>hücre2</td> </tr> </table>
hücre1 hücre2 hücre3 hücre4	<table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> </table>

<table border= “1”> Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.

<table width=”100”> Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.

<table height=”50”> Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.

<table cellspacing=”2”> Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.

<table cellpadding=”5”> Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.

<table bgcolor=”#ffff00”> Tablonun genel arka plan rengini belirlemek için kullanılır.

<table align=”left”> ; <table align=right>; <table align=center> Tablonun konumunu ayarlamayı sağlar.

<table background=”tugla.gif”> Tablonun arkasına resim konulabilir.
< table bgcolor=”#ffff00” > Tablonun arka zemin rengini ayarlar.

<td> Takısının Parametreleri

Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa, sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.

<td bgcolor=”#00ffff”> Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.
<td width=”250”> Hücre genişliğini belirlemek için kullanılır.
< td height=”50”> Hücre yüksekliğini belirlemek için kullanılı
<td colspan=”2”> Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.

<td rowspan=”2”> Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.

<td background=”hasan.gif”> Hücrenin arka planına bir resim yerleştirir.
<td align=”left”>, <td align=”right”>; <td align=”center”> Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.

<td valign="top”>, <td valign="middle”>, <td valign="bottom”>, <td valign="baseline”> sadece <td> ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) dayar.

Not : Align parametresi hücre içinde yatay hizalama yapar. Valign parametresi hücre içinde düşey hizalama yapar.

Not: <table border=“1”> takısı kullanıldıgında table ve td takısında <td bordercolor:#ff0000”> veya <table bordercolor:#ff0000”> paremetresi kullanıldıgında çerçevenin tüm kısımları aynı renge boyanıyor. Bordercolor yerine <BORDERCOLORDARK=”#ff0000”> kullanılırsa tablo çerçevesinin gölgeli kısmını <BORDERCOLORLIGHT=”#ff0000”> kullanılırsa çerçevenin ışığa bakan kısmını renklendiriyor.

Kenarlık renklerinde ayarlama yapmak

A.) Tablomuzun sadece bazı yerlerindeki iç kenarlıkları da yok etmemiz mümkün. Bunu <table> tagının "rules" elemanı ile yapabiliriz.

"Rules" Elemanının parametreleri.:

• none : Tüm iç kenarlıkları yok eder.
• rows : Dikey iç kenarlıkları yok eder.
• cols : Yatay iç kenarlıkları yok eder.

Örnek;

<table border="1" bordercolor="blue" rules="cols" cellpadding="5" cellspacing="0">

<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</table>

Tarayıcınızda şöyle gözükecektir:
 

1.satır 1.sütun	1.satır 2.sütun
2.satır 1.sütun	2.satır 2.sütun
3.satır 1.sütun	3.satır 2.sütun

B.) Tablomuzun sadece bazı yerlerindeki dış kenarlıkları yok etmemiz mümkün. Bu özelliği <table> tagının "frame" elemanı sayesinde gerçekleştiririz.
Frame" Elemanının Parametreleri.
• void : Tüm dış kenarlıkları yok eder.
• above : Sağ,sol ve alt kenarlığı yok eder.
• below : Sağ,sol ve üst kenarlığı yok eder.
• hsides : Sağ ve sol kenarlıkları yok eder.
• vsides : Üst ve alt kenarlıkları yok eder.
• rhs : Üst, alt ve sol kenarlığı yok eder.
• lhs : Üst, alt ve sağ kenarlığı yok eder.

Örnek;

<table border="1" bordercolor="red" frame="vsides"
cellpadding="5" cellspacing="0">

<tbody>
<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</tbody>
</table>

Tarayıcınızda şöyle gözükecektir:
 

1.satır 1.sütun	1.satır 2.sütun
2.satır 1.sütun	2.satır 2.sütun
3.satır 1.sütun	3.satır 2.sütun

Colspan ve Rowspan kullanımı ile ilgili örnekler
 

1 2 3 4 5 6 7 8 9

<table border="1" cellpadding="12"> <tr><td colspan="2">1</td><td>2</td><td>3</td></tr> <tr><td colspan="3">4</td><td>5</td></tr> <tr><td>6</td><td>7</td><td>8</td><td>9</td></tr> </table>

1 2 6 3 4 5 7 8 9

<table border="1" cellpadding="12"> <tr><td>1</td><td>2</td> <td rowspan="3">6</td><td>3</td></tr> <tr><td rowspan="2">4</td><td>5</td><td>7</td></tr> <tr><td>8</td><td>9</td></tr> </table>

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-tablolar.html

HTML Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.

Örnekler

Dikey Çerçeveler

Yatay Çerçeveler

Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.

Çerçeve kullanmanın dezavantajları:

• Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur.
• İstenilen sayfanın yazıcıya gönderilmesi zordur.

Frameset Etiketleri

• <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
• Her frameset satır (rows) veya sütun (cols) olarak belirlenir

Frame Etiketi

• <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.

Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25'i ayrılmıştır. İkincisine ise %75'i ayrılmıştır. "frame_a.htm" birinci sütuna, "frame_b.htm" ise ikinci sütuna yerleştirilmiştir:

 

HTML-Kodu:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols="200,500"), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols="25%,*").

Temel Notlar - Yararlı İpuçları

Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize="noresize" parametrelerini <frame>etiketi içine yazabilirsiniz.

<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.

Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!

Frame Etiketleri

Etiket: Açıklama

<frameset>: Frame ayarlarını belirtir.
<frame>: Alt pencere (çerçeve) belirtir.
<noframes>: Frame desteğinin kullanılmamasını sağlar.
<iframe>: İç frame belirtir.

KAYNAK:  http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-cerceveler.html