Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
Nasıl Site Yapılır -Amatörler İçin-
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir (1 Mobil) - 1 Masaüstü, 
1 Mobil
1 Mobil
Giriş
Mesaj
-
-
Ders 2: [Araçlar]
Basit bi web sayfası yapmak için aslında size Notepad yeter. Fakat notepad biraz daha karışık siteler için oldukça anlaşılmaz hala gelir. Yazılar birbirine girer ve kafanız karışır. Daha iyi bir dizayn yapmak için aşadaki programlar oldukça kullanışlı olabilir
.En yaygın kullanılan HTML Editörleri;
- Microsoft - FrontPage
- Macromedia - Dreamweaver
- Coffeecup- Html Editör
Yukardaki programlar ilk ikisi daha çok grafik arabirimli. Coffeecup ise daha çok site üzerinde oynamalar için kullanılıyor(yada en azından ben öle kullanıyorum). Eğer ilk defa web sitesi yapıcaksanız FrontPage'i kullanmanızı öneririm. -
İlk önce notepad'i açalım. Başlat > Programlar > Donatılar > Notepad . Bu program oldukça basit ve yaygın editör programıdır. Neyse altta gördüğünüz yazıları yazın:
<font color='red'><html>
<head>
<title>İlk Sayfam</title>
</head>
<body>
BAŞARDIM!!!
</body>
</html> </font id='red'>
Yazdığınız bu dosyayı Deneme.html diye kaydedin. Ve sonra dosyayı çalıştırın
Kutlarım! İlk sayfanızı yaptınız. pek zor olmadı umarım. Neyse isterseniz source code umuzu bi gözden geçirelim -
Ders 4: [Source Code]
<font color='red'><html>
<head>
<title>İlk Sayfam</title>
</head>
<body>
BAŞARDIM!!!
</body>
</html> </font id='red'>
<font color='red'><html>...</html></font id='red'> Tarayıcının (İnternet Explorer yada Netscape N.) web sitesinin kodlarının başlayıp bittiğini anlaması için yazdığımız komut. Diğer tüm komutlar bu iki komutun arasına yazılır.
<font color='red'><head>...</head></font id='red'> etiketleri arasına sayfa hakkında önemli bilgiler girilir. Şimdilik fazla karıştırmıayın!
<font color='red'><body>...</body></font id='red'> ise bizim için önemli olan bölüm. Sayayla ilgili tüm komutlar buraya yazılır. Yazılar, resimler kutular...
<font color='red'><title>...</title></font id='red'> Bu kısım ise İnternet Explorer yada Netscape te sayfayı açtığınızda programın en üst sağında çıkan yazıdır.
Yukardaki bilgilere göz attıktan sonra Source code da oynamalar yapın ve neyin ne olduğunu daha çabuk ve etkili öğrenin
-
Ders 5: [Yazım Komutları]
Bu derste ise Web sayfanızda yazıcağınız metinlerin özellikleriyle ilgileniceğiz. Bunun için notepadi tekrar açıp yeni bi sayfa yapalım.
<font color='red'><html>
<head>
<title>Metin Özellikleri!</title>
</head>
<body>
<h1>Sayfamı</h1>
<center>Ortada</center>
<p>paragraf şeklinde </p>
Yazıları
<b>koyu </b>
<i>italik </i>
ve
<u>altı çizili </u>
olarak yazabiliyorum
</body>
</html></font id='red'>.
Komutları yazdıktan sonra Kaydedip, dosyayı tarayıcınızla açın. Ve işte sayfanız. Komutlar oldukça basit. Mesela <font color='red'><b></font id='red'> Bold'un ilk harfi. <font color='red'><i></font id='red'> İtalik in ilk harfi. Yani ingilizce! Komutların yerlerini değiştirirek olayı daha iyi çözerbilirsiniz!
Şimdi Birazda yazının tipiyle ilgili çalışmalara girelim:
<font color='red'><html>
<head>
<title>Aman Tanrım Sayfa Renkli!!!!</title>
</head>
<body>
<font face="tahoma" size="5" color="#008000">Yeşil</font>
<br>
<font face="verdana" size="5" color="#ff0000">Kırmızı</font>
<br>
<font face="arial" size="5" color="#ffff00">Sarı</font>
<br>
<font face="comic sans ms" size="5" color="#0000ff">ve Mavi!</font>
</body>
</html> </font id='red'>
Acaba yeni öğrendiğimiz şeyler ne?
<font color='red'><font face="..." size="..." color="...">...</font></font id='red'>
<font color='green'>face</font id='green'>= yazıtipinin adı (arial, tahoma, verdana, ...)
<font color='green'>size</font id='green'>= yazının büyüklüğü (1-7 arası)
<font color='green'>color</font id='green'>= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri)
<font color='green'><br></font id='green'> = Nasıl word yada diğer metin programlarında bi aşağıya inmek için "Enter" tuşuna basarsanız HTML dilindede <br> yazarsınız. Bu sayede <br> den sonra gelen metinler bi altta gözükücektir!
Not: Eğer "Yaw ben arkaplan rengimden nasıl değiştiricem derseniz kodunu hemen söliyim.
<font color='red'><body bgcolor="RENGİNİZ"></font id='red'> !!!!
-
Ders 6: [Resim Eklemek]
Tabii ki sayfanız sadece yazıdan ibaret olmiycak. En azından göz zevkiniz için aralara resim serpiştirmeniz lazım. Neyseki resimleri komuta çevirmenize gerek yok:-). Minik bir kodla istediğiniz resmi sayfanıza koyabilirsiniz.
<font color='red'><img src="resmin bulunduğu yer ve adı" width="y" height="x" align="yer"></font id='red'>
Bu komutta <font color='red'>src=" "</font id='red'> arasına resmin bulunduğu yerin tam adını yazmanız lazım. Mesela <font color='red'>c:\Belgelerim\Resimlerim\resim.jpg</font id='red'> X ve Y değişkenleri yerine ise resmin uzunluğunu ve genişliğini yazıcağız. Eğer resmi daha küçük göstermek istiyosak küçük değerler büyük göstermek istiyosak büyük değerler yerleştirin. Tam değeri yerleştirirseniz ise resmin orjinal hali çıkar. "Yer" bölümüne ise left right yada center yazarak resmin ne tarafta durucağını belirtiyoruz. eğer align kısmını hiç yazmayıp height="x" ten sonra > yazarak komutu bitirirsek, resim daha önceki özellikler neyse ona göre bi yerde durur.
Diyelim ki resmimizin adı adam.gif eni 80, boyu da 90 piksel, eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı:
<font color='red'><img src="adam.gif" width="80" height="90"> </font id='red'>
Fakat siz diyorsunuz ki; benim bir sürü eklemek istediğim resmim var ve bunları resim adlı bir alt klasörde topladım. Yani html dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanacağız;
<font color='red'><img src="resim/kedi.gif" width="80" height="90"> </font id='red'>
Not: Eğer yüzsüzlük yapıp arka plan resminide değiştirmek istiyorsanız
<font color='red'><body background="..."></font id='red'> komutu tam size göre. Boş olan bölgeyi doldururken uyucağınız kurallar yukardakilerin aynısı. Ama bu komutta width yada height yazmamaza gerek yok. Çünkü bilgisayar bizim için bu resmi sayfayı tamamen kaplıycak şekilde ayarlar.
NOT: eğer width ve heightı girmesseniz otomotik olarak resmin orjinal boyutu büyüklüğünde gözükür. Eğer resmin boyutlarını orjinalinden küçük yazarsanız sayfa açıldığında resim küçük gözükür. Ama RESMİN KB OLARAK BOYUTU DEĞİŞMEZ! yani width ve height değerleri resmin orjinaline dokunmaz. Sonuç olarak siz bi resmi sayfanıza ne kadar küçük boyutlarla ekleseniz bile sayfa yüklenirken resim orjinal kb ı olarak yüklenir. yani resmin küçük görünmesi aslında onun kb bakımından küçük olduğunun göstermez.
-
Ders 7: [Bağlantılar]
Bağlantılar bi deyişle düğmeler... Tehmin ettiğiniz gibi Web siteniz bi sayfadan oluşmayacak. Gerekli gördüğünüz kadar farklı sayfanız olucak. Peki bu sayfalar arasında bağlantıı nasıl kurucaz. Başka bi deyişle nasıl bir sayfadayken diğer sayfaya geçiceğiz. İşte kodu:
<font color='red'><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=625126&url=gidilicek yer" data-href="gidilicek yer"></font id='red'>Düğme!<font color='red'></a></font id='red'>
Komut oldukça sade sayılabilir(şimdilik). Yukarda gördüğünüz gibi sadece 2 tane değişkenimiz var. "gidilicek yer" dediğimiz yer adında anlaşılabileceği gibi gerekli yere tıkladığında açılıcak olan sayfanın dosya adresi. Bu adresi yazarken az önce resim eklemede öğrendiğimiz kurallardan bazıları geçerli. Dosyanın adresi resim eklerkenki gibi ayrıntılı olucak. Ama bu komutta width yada height gibi parametrelere ihtiyacımız yok. "Düğme!" değişkeni ise üzerine tıklamamız gereken yazı yada resim. Bu komutu deneme yanılma yöntemiyle daha iyi anlarsınız.
Resimlere link(bağlantı) koymak için ise Düğme! yazan kısıma resim koyma komutu yerleştirebilirsiniz.
<font color='red'><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=625126&url=www.lanetliev.com" data-href="www.lanetliev.com"><img src="adam.gif" width="80" height="90"> </a></font id='red'>
Aynı Sayfa İçinde Başka Yere girmek için ise
Gidilicek yere <font color='red'><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=625126&url=#şurası" data-href="#şurası">Düğme</a></font id='red'> diyceksiniz. Önemli olan ise # harfini koymanız. Eğer koymassanız sayfayı gösteren program "şurası" nı yeni bir web sayfası olarak algılar ve onu bulamadığı için hata verir.
Target parametresi
Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan target parametresini öğrenelim. Kullanımı :
<font color='red'><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=625126&url=..." target="..." data-href="..." target="...">...</a> </font id='red'>
<font color='red'>target="_blank"</font id='red'>
Bağlantı yeni bir pencerede açılır.
<font color='red'>target="_self"</font id='red'>
Bağlantı aynı pencere içerisinde açar.
<font color='red'>target="_top"</font id='red'>
Bağlantı aynı pencere içerisinde en üstten itibaren açar..
<font color='red'>target="_parent"</font id='red'>
Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
<font color='red'>target="kod"</font id='red'>
Bu özelliğe 9. ders olan çerçevelerde değiniceğiz. Şimdilik karıştırmayın:-)
-
Ders 8: [Tablolar]
**********BURDA TABLO OLUŞTURAMADIĞIM İÇİN KODLARIN GÖRÜNÜŞLERİ YOK. İSTERSENİZ KODLARI NOTEPADE KOPYALAYIP NASIL ÇIKTIKLARINA BAKIN***************
Ve işte geldik Web dizaynın en karışık ve en önemli bölümüne. Table yani tablolar sayfa dizaynında sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amacıyla kullanabileceğimiz bir özellik. Aslında bu bölümü direk geçmek en iyisi gibi geliyor çünkü table ları notepadle deneme yanılma yönetmiyle 1 yılda anca ayarlayabilirsiniz. Table yapmak için daha önceden belirttiğimiz programları kullanmanızı tavsiye ederim. Ne de olsa, ne yaptığınızı görerek yapmak daha sağlıklı olur. Ama genede bir iki şey anlatıyım.
<<font color='red'>table border="1">
<tr>
<td>Tablo</td>
</tr>
</table>
<table border="1">
<tr>
<td>tablo1</td>
<td>tablo2</td>
</tr>
</table>
<table border="1">
<tr>
<td>Tablo1</td>
<tr>
</tr>
<td>Tablo2</td>
</tr>
</table>
<table border="1">
<tr>
<td>Tablo1</td>
<td>Tablo2</td>
</tr>
<tr>
<td>Tablo3</td>
<td>Tablo4</td>
</tr>
</table>
<table border="1">
<thead>Başlık</thead>
<caption align="bottom">
alt-yazı
<caption>
<tr>
<th>1.Başlık</th>
<th>2.Başlık</th>
<th>3.Başlık</th>
</tr>
<tbody>
<tr>
<td>Tablo1</td>
<td>Tablo2</td>
<td>Tablo3</td>
</tr>
<tr>
<td>Tablo4</td>
<td>Tablo5</td>
<td>Tablo6</td>
</tr>
<tr>
<td>Tablo7</td>
<td>Tablo8</td>
<td>Tablo9</td>
</tr>
</tbody>
</table>
<table border="1" cellpadding="7">
<tr><td width="100" align="left">Tablo1</td></tr>
<tr><td width="100" align="center">Tablo2</td></tr>
<tr><td width="100" align="right">Tablo3</td></tr>
</table>
<table border="1" cellpadding="7">
<tr><td width=120 height=20>Tablo1</td></tr>
<tr><td width=120 height=40>Tablo2</td></tr>
<tr><td width=120 height=60>Tablo3</td></tr>
<tr><td width=120 height=80>Tablo4</td></tr>
</table></font id='red'>
Yukarda gördüğünüz örnekleri daha önceden öğrendiğiniz komutlarla birlikte kullanıp iyice alışabilirsiniz. Ama tekrar ediyorum tablo yapmak için belirttiğim programlardan birini denemenizi tavsiye ederim.
Not: Tablonun içini boyamak için <td bgcolor="xxxxxxxxxxxx"> Resim koymak için ise <td background="resim.jpg"> değişikliğini yapmanız yeterli
-
Ders 9: [Çerçeveler]
Çerçeveler ise sayfa ayarı için yapılmış bir özelliktir. Örnek olarak bazı sitelerde sitenin sol tarafıyla sağ tarafı farklı sayfalardır. Bu özellik sayfanın bir bölümü sabit kalırken diğer bölümün istenilen sayfaya yönlendirilmesini sağlar. En çok kullanım şekli ise sol tarafta menulerin sabit kalıp sağ tarafta ise menuden son seçilmiş sayfanın gözükmesidir. Sol taraftaki menuden başka bir öğe seçildiğinde, sağ taraf istenilen oranda değişir. Biraz karışık gelmiş olabilir ama birazdan anlıyacaksınız
*******RESİM EKLEMEDİM********
Resimden daha da iyi anlaşılabileceği gibi aslında bizim açtığımız site sayfam.html. Fakat sayfam.html çerçeve kullanılarak sağ ve sol olarak ikiye bölünmüş. Sol tarafta deneme1.html yi çağırıyor sağ tarafta ise deneme2.html yi.
Sayfam.html nin source codu:
<font color='red'><html>
<head>
<title>Çerçeveler</title>
</head>
<frameset cols="*,*">
<frame name="sol" src="deneme1.html">
<frame name="sag" src="deneme2.html">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html></font id='red'>
Not: <font color='red'><frame name="sol" src="deneme".html"> </font id='red'>yi biraz inceleyelim. Name değişkeni bölümün "kod" adini belirtiyor. Bağlantılar bölümünde size <font color='red'><a href="hebelehübele.html" target="kod"> </font id='red'>diye bi özellikten bahsetmiştik. İşte o kod olayı bununla ilgili. Mesela
<font color='red'><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=625128&url=mydonose.html" target="sol" data-href="mydonose.html" target="sol">Düğme</a></font id='red'> kodu "Mydonose.html sayfasını sol taraftaki çerçevenin içinde göster" anlamına gelir. Başka bi deyişle bilgisayar öle anlar.
-
******************BASİT JAVASCRİPT SİSTEMİ****************
Ders 1: [Javaya Giriş]
Javascript istemci (client based) tipte bir programlama dilidir. Başka bir deyişle girdiğin site bir prgram olarak gözükür ve bu program ziyaretçinin bilgisayarında çalışır. Server side programlar(php asp) ise istenilen bilgiye göre serverda çalıştırılır ve sonuçları ziyaretçiye gönderilir.
Dediğimiz gibi Javascript ziyaretçinin bilgisayarında çalışıyordu. Bunun en büyük avantajı, ziyaretçi siteyi dolaşırken programın çalışır halde olması ve sizin komutlarınıza göre(mouse hareketleri yada klavye girdileri) sayfanın size cevap yollayabilmesi. Server-side dillerde ise sayfa gösterildikten sonra yeni sayfa istenilene kadar program kapalı durur. Yeni bilgi gönderildikten sonra, gönderilen bilgiye göre cevap gelir.
<font color='red'><script language="JavaScript">
<!--
yazdığınız JavaScript buraya
// -->
</script></font id='red'>
JavaScript programcıkları bu şekilde başlamalı, biraz daha irdeleyelim:
<font color='red'><script language="JavaScript> </font id='red'>
Burada yalnız HTML vardır. <SCRIPT> etiketleri tarayıcıya bir script ile karşı karşıya olduğunu belirtirken language (lisan) özelliği ise bu script-lisanını belirtir. Şimdilik varsayılan Javascript kabul ediliyor, ama siz siz olun, her etikette belirtin, çünkü belli mi olur standartlar değişir, hoppaaa yeni bir scripting-language bulunur!..
<font color='red'><!--</font id='red'>
Bunu bir yerden hatırlıyorsunuz değil mi? Evet, doğru, bu HTML yorum satırının başlangıcı. Burada ne işi var diye sorarsınız şimdi. Cevabı basit, <SCRIPT> etiketini desteklemeyen eski tarayıcı programı olan vatandaşlar hala bir yerlerde kalmıştır sanırım. Böylece eski tarayıcılar <SCRIPT> etiketi yerine HTML yorum işaretlerini değerlendirirler. Yani sağda solda gördüğünüz Hiding from older browsers dedikleri olay bu işte. JavaScript kabul edenler bu etiketi dikkate almadan devam ederler.
// -->
Bu satırda ise anlatılacak 2 şey var (satır o kadar uzun değil ama çok önemli şeyler içeriyor :-) .)
1.) Burada "//" yorum olarak kullanılıyor. "//" ardından gelen herşey Javascript çalışırken dikkate alınmaz. Bu yorumları bolca kullanın ki birkaç hafta sonra yazdığınız scripte bakınca neyi niçin koyduğunuzu anlayınız.
2.) "-->" etiketi daha önce başlamış yorumun bittiğini işaret eder.
</script>
-
Ders 2: [Değişkenler]
Daha önceden programlama dilleriyle ilginiz varsa Değişken(Variable) kelimesiyle aşinasınızdır. Ama ben genede biraz bahsediyim. Değişken isminden de anlaşılacağı gibi bir veridir. Mesela dolabı bir değişken olarak düşünün. Dolaba istediğiniz her giysiyi koyabilirsiniz. Giysileri çıkartırsınız başkalarını koyarsınız. Ama dolabınız asla değişmez. İşte variable da buna benzer bişeydir. Bir değişken tanımlarız ve zamanı geldikçe bu değişkenimze değerler atarız.
Bir örnek verelim bakalım:
Mesela bir karenin alanını ve hesaplayan JavaScript programcığı yazalım.
<font color='red'><script language="JavaScript">
<!--
// En, boy ve yüksekliği belirten değişkenler
var yuk = 50;
var en = 35;
var boy = 15;
// Alan ve hacimi hesaplayan denklemler
var alan = en * boy;
var hacim = alan * yuk;
// Sonuçların çıktısının alınması
document.writeln("Yüksekliği ");
document.writeln(yuk);
document.writeln("cm ve boyu "+ boy +"cm olan bir alanın yüzölçümü "+ alan +"cm<sup>2</sup>");
document.writeln("Hacmi ise: "+ hacim +"cm<sup>3</sup>");
// -->
</script></font id='red'>
Evet gayet kolay ve anlaşılır bir örnek. Neyse biraz inceleyelim:
<font color='red'><script language="JavaScript">
<!-- </font id='red'>
Eminim bu size bir yerden tanıdık geliyordur; Eğer böle bişi hatırlamıyorum diyorsanız ya Giriş sayfasını okumadınız yada bir doktora ihtiyacınız var!
<font color='red'>// En, boy ve yüksekliği belirten değişkenler
var yuk = 50;
var en = 35;
var boy = 15; </font id='red'>
Gördüğünüz gibi ilk satır sadece bir yorum, yorumda takip eden satırlarda nelerin yazılı olduğunu belirtiyor, gerçek scriptin üzerinde hiç bir etkisi yok. Yorum satırna "Cindy Crawford" yazsanız bile tarayıcı durup, "Hani, Cindy Crawford neredeymiş?" diye aramaz (bir kısmımızın bakacağı gibi). Dikkate almadan devam ederler (bu tarayıcı programlarda gerçekten zevksiz şeyler, değil mi? :-)
Şimdi, bundan sonraki satırlar bayağı enteresan. Değikenleri tarif ediyorlar. Değişkenleri belirlerken takip etmeniz birkaç kuralı ise hemen aşağıya sıraladık:
Değişkenler var diye başlarlar.
Gerçekte bu şart değil ama kodu okumanızı kolaylaştırıyor. İlla yeni bir değişken belirlerken var diye başlamaya mecbur tutmuyorum, ama sanırım var diye başlamak bayağı iyi bir fikir.
Değişkenler küçük harfle yazılmalı
JavaScriptler değişkenlerin küçük-büyük harfli olmasına ayrı reaksiyon verirler. Genel kural, sadece küçük harfli değişkenler kullanma şeklinde oluşmuştur. Dilerseniz hepsini büyük harf yapabilirsiniz yada karışık kullanabilirsiniz, fakat kodlama esnasında yapılabilecek hataların önüne geçmek için ve sinirlerinizin selameti açısından gelin hepsini küçük harf yapın gitsin -- böylece programcıların %99 ile uyum sağlamış olursunuz.
Değişkenler bir harf ile başlamalıdır
Satırı noktalı virgül ile sona erdirin
Dikkat ederseniz satır sonlarında birer tane " ; " var. Her Javascript satırının sonuna mutlaka bir tane " ; " koyuverin. Bu şekilde hataların önüne geçmiş olursunuz.
<font color='red'>
// Alan ve hacimi hesaplayan denklemler
var alan = en * boy;
var hacim = alan * yuk; </font id='red'>
Biraz hesaplama. Javascript bu satırları icra ettikten sonra "alan" değişkeni " en " (50) ve " boy " (15) değişkenlerinin çarpımlarının sonucunu bulunduracaktır. Artık Javascript bundan sonra nezaman bu değişkeni görürse 50 ile 15 in çarpımı ile elde edilen sonuçla yer değiştirtecektir. Aynısı ikinci satır için de geçerlidir.
Eveeet, değişkenler için bu kadar yeter. Ama Javascriptle işimiz henüz bitmedi!.. Anlatmaya bir sonraki bölümde devam ediyoruz.
Sayfalara Yazdırmak:
<font color='red'>// Sonuçların çıktısının alınması
document.writeln("Yüksekliği ");
document.writeln(yuk);
document.writeln("cm ve boyu "+ boy +"cm olan bir alanın yüzölçümü "+ alan +"cm<sup>2</sup>");
document.writeln("Hacmi ise: "+ hacim +"cm<sup>3</sup>"); </font id='red'> Burası Javascriptin enteresan noktası. Önce değişkenleri yarattık yada değiştirdik, şimdi ise web sayfasının kaynağına yazdırıyoruz, böylece insanlar uykusuz gecelerinizin ürününü görme şansına kavuşuyorlar...:-)
Şimdi istesem " document.writeln() " nedir, nedemektir, sonsuza kadar yazabilirim, ama kısaca denilebilecek bir şey varsa, scriptin bu kısmı, kesinlikle <BODY> ve </BODY> etiketleri arasında bulunmalıdır, hatta sonucun sayfanızda yazılmasını istediğiniz noktasında bulunmalıdır. Çünkü Javascript çalışmış, bir çıktı üretmiş, artık tarayıcı program sizin belirleyeceğiniz noktaya yazdıracaktır. "document.writeln()" için bu kadar yeter. Unutmadan, eğer sayfanıza Javascriptinizle ilgili bir HTML yazdırmak istiyorsanız, bu işi document.writeln() yapacaktır.
Şimdi ise document.writeln() deki () parantezlere konsantre olmanızı istiyorum.
<font color='red'>document.writeln("Yüksekliği "); </font id='red'> ilk satır
İlk satırdaki parantezlerin içindeki çifttırnakları " " görüyormusunuz? İşte "" arasında ne yazılı ise Javascript onu HTML olarak düşünür ve sayfanızın kaynağına yazar. Örnekte ( " ) kullandım ama, dilerseniz siz ( ' ) kullanabilirsiniz. Her ikiside birbirinin yerine kullanılabilir.
<font color='red'>document.writeln(yuk); </font id='red'>İkinci satır
Şimdi ise 2ci satıra iyi bakın: Hiç " " işareti yok. " " içine alınmamış karakterler değişken olarak düşünülür. Dikkat ederseniz yuk bizim daha önce belirttiğimiz bir değişken. Sanırım olan biten biraz anlam kazanmaya başlamıştır. Javascript değişken olup olmadığını kontrol eder, eğer değişken bulursa, onu değişkenin değeri ile değiştirir.
<font color='red'>document.writeln("cm ve boyu "+ boy +"cm olan bir alanın yüzölçümü "+ alan +"cm2"); </font id='red'> üçüncü satır
Sanırım 3cü satır içlerinde en enteresan olanı olsa gerek. 1 ve 2ci satırların özelliklerini bir arada bulundurmakta. + işareti kullanarak değişkenleri ve stringleri bir arada kullanmakta. (Dilerseniz + işareti kullanıp daha fazla değişkeni de işin içine katabilirsiniz) Gördüğünüz gibi, herşey bir çift tırnak " ile başlıyor. Sonra bir kaç kelime var. Tekrar bir çift tırnak işareti " ile sona eriyor. Bu stringin bittiğinin işareti. Buradan sonra Javascript kapama parantezi beklerken biz ona + işareti veriyoruz. Şu sırada javascript herşeyi hiç " yokmuş gibi düşünüyor! Fırsattan istifade ederek bizde parse edilecek değişkeni bildiriyoruz. (parse'ın Türkçe karşılığı nedemek ise?) Böylece değişken doğru rakamla değiştirilip devam edip gidiyor. Sonraki + ile Javascript kodu gibi işlenecek kısmın bitişini bildiriyoruz. Artık sıra yeniden " işareti ile HTML olarak yazılacak kısmın başladığını söylüyoruz. Bu aynen bir daha tekrarlayıp ve bir çift tırnakla son buluyor. Basit değil mi? :-)
En enteresan şeylerden biride son iki satırdaki <sup> etiketi. <sup> etiketi bir karakteri Superscript (yani üssü) şeklinde yazdırır. Ama merak etmeyin o etiketin oraya konmasını sebebi, araya HTML kodu girebileceğinizi göstermek içindi. Ama dikkat ettiyseniz, HTML etiketleri " " içerisinde yer alıyor, dışında değil.
-
Ders 3: [if then else]
Temel prensiplerini anladıktan sonra, artık değişkenleri de kullanarak bir şeyler üretmenin zamanı geldi denebilir. Bu ders If-Then-Else ifadeleri hakkında olacaktır. "if then else" tükçesinden de anlaşılacağı gibi "eğer böyleyse, böyle değilse" anlamını içerir. Yani programcıkta verileri kullanarak ne yapıcağına karar verir. A yolundanmı gidiyim B yolundanmı. Yada Çıkarıyımmi toplayımmı? gibisinden. "If-Then-Else"in esas formatı şöyle olur:
if (eğer şartlar doğruysa)
{
bu satırı çalıştır;
bu satırı da çalıştır;
bi zahmet bunuda çalıştır;
} else {
bu satırı çalıştır
}
Yukardaki örnekle ilgili önemli bir nokta:
· if-the-else cümlesini başlatmak için "if" ile başlamalısınız. If küçük harfle yazılmalıdır. Dilerseniz "IF" yazın bakın browser hemen $&%#|!* demeye başlar.
· Parantezlerin içinde bir koşul ( şart ) bulunmalıdır. Artık "kızkardeşim beni seviyor" veya "internet bağlantım çok yavaş" demiyoruz. Bunların yerine kizkardes == "seviyor" veya internet_hizi == "yavas" (burada "kizkardes" ve "internet_hizi" değişkenler oluyor. "seviyor" ve "yavas" ise değğşkenlere atanmış değerler oluyor.)
Şimdi biraz daha detay ile devam edelim. Bunu hemen bütün javascriptlerde kullanmak zorundasınız. Ben kullanılmayan bir tane olduğunu sanmıyorum.
var feedback = prompt("Şimdiye kadar bu derslerden memnunmusunuz?", "evet veya hayir");
if (feedback == "evet") {
alert("teşekkür ederim!");
} else {
alert ("kimse sizi okumaya zorlamıyor, artık okumayın lütfen!");
}
Sanırım ilk satırı geçen dersten hatırlarsınız, ziyaretçiye bir soru soruyorsunuz ve cevabıda değişken olarak saklıyorsunuz.
Bu scriptin ikinci satırı epeyi ilginç. Gördüğünüz gibi Javascripti sorgulamaktayız. Sorumda diyorum ki "aldığın değer 'evet'e eşitmidir?" Dikkat edilecek bir kaç nokta var burada: Bakın, cevapta " " işareti yok ama evet de var. Unutmayın stringleri yazdırırken, string'te " " işareti olmalı, ama değişkenlerde gerek yok. İkincisi 2 tane == işaretinin kullanımına dikkat. 1 tane = herhangi bir şeyi tanımlamak için kullanılır. Fakat bir şeyi sorguluyorsanız yana yana 2 tane = işareti kullanmanız lazım. Eğer yukardaki örnekte 1 tane = işareti kullanırsanız, ya hata verecektir, veya değerleri birbirinin üzerine yazacaktır. Aşağıda şartların listesi de verilmiştir:
x == y Eğer x y ye eşit ise
x != y Eğer x y ye esit değil ise
x < y Eğer x y den küçük ise
x > y Eğer x y den büyük ise
x <= y Eğer x y den küçük yada eşit ise
x >= y Eğer x y den büyük yada eşit ise
-
Ders 4: [Olaylar(Events)]
Bugünün dersi Events yani olaylar hakkında. Eğer sitenizin epeyi bir interaktiv olmasını istiyorsanız kesinlikle Event'lere ihtiyacınız var. Events yani olayları Javascriptin bir kısımlarını tetikleyenler olarak görünüz. Eğer birisi faresini linklerin üzerinde gezdirirse, "onMouseOver" özelliği ateşlenmiş olur. Eğer linki tıklarsa, bu sefer önce "onMouseDown", sonra ise "onMouseUp" ve "onClick" ateşlenmiş olur. Derslerin en başındaki Javascript örneğini hatırlarsanız (Alert-box) orada "onMouseOver" yani "farenin üzerinden gezmesi" eventi karşılığında o fonksiyon ateşlenmiş oldu. "onMouse" diye başlayan event'ler bol biçimde değişik menü yapımında kullanılabilir. Düğmelerin renkleri, yada resimlerin değişmesi gibi efektler. Bir Örnek
html kodunun <head>..</head> aralığına şu kodu yazın>
<script language="JavaScript">
<!--
function
yey() {
alert('Lanetliev.com java dersi')
}
//-->
</script>
<body>..</body>aralığınada şu kodu yazın:
<b onMouseOver="yey()">Üstüme gel!!!</b>
Üstüme gel!!!
Gördünüz mü? Bir kere fare üzerine geldiğinde ("onMouseOver") 'yey()' fonksiyonu çağrılıyor. Yazının üstüne gelince daha önceden sayfanın <head>...</head> arasına yazdığımız yey() isimli programın çalıştı ve işte sonuç! Event (olay) tetiklenince hemen Alert-boxda açılmış oldu. Çok yaygın bir örnekte, resim değişiklikleridir.
Sanırım event özelliğini daha iyi anladınız. Daha önceden hazırlanmış programcık istenilen şart oluştuğunda çalışmaya başlıyor! Gayet kolay...
-
Ders 5: [Teori: Dom]
document.writeln() ne demektir? Siz ne işe yaradığını ve ne zaman kullanmanız gerektiğini biliyorsunuz, ama neden document.writeln() diye adlandırılmıştır? Halbuki print_into_source() gibi daha çok anlam ifade eden bir deyim de olabilirdi.
Bu ve bir çok sorunun cevabı DOM'da (Document Object Model) gizlidir. DOM Javascriptin sayfaları tanımlama ve tarif etme şeklidir. Daha sonra bu konuyu açacağız.
DOM hakkında konuşmaya başlamadan önce, object-orientated (nesne-yönlendirilmeli) programlamayı tartışmalıyız. Biliyorum, bu biraz teknik elemanların anlayacağı şeyler gibi duruyor ama öyle değil. Object-orientated programlamanın en azından Javascript tarafını çözmek için fazla teknik olmaya gerek yok. Object-orientated programlamanın ardındaki esas fikir, bilginin nesnel terimler halinde saklanmasıdır. Örneğin, window bir object'dir (nesne).
Daha da açacak olursak: Object'ler objectlerin nasıl davranacaklarını tarif eden özelliklere sahiptirler. Bu özellikler, objectlerden bir "." (nokta) ile ayrılmıştır. Ne demek istediğimi anladınız değil mi? Bir örnek:
window.status = "Hey, orada neler oluyor?!";
Bu browser penceresinin status-bar'ına (pencerenin altındaki gri satır) Hey, orada neler oluyor?! diye yazacaktır. Gördüğünüz gibi "window" burada object oluyor, "status" ise özelliği. Metnin string'i ( Hey, orada neler oluyor?! ) ise özelliği tarif ediyor.
Özelliklere ilave olarak nesnelerin bir de metodları vardır. Bu metodlar da neyin nesi, bunları öğrenmemiz şart mı? diyebilirsiniz. Metodlara örnek,
alert(), writeIn() veya open(). Özellikler (properties) gibi metodlar da objectlerden bir "." (nokta) ile ayrılırlar.
document.writeln('Çok karışıkmış be!')
Property (özellik) ve metodlar arasındaki esas fark, metodlar her zaman 2 tane parantez tarafından takip edilirler. Parantezlerin içine ise parametreleri koyarsınız. Örneğin alert() parantezlerinin içine alert-boxda çıkmasını istediğiniz yazıları koyarsınız. writeln() metodu parantezi içine yazılan string ise HTMLye yazdırılır.
Devam etmeden önce son bir şey: window herzaman varsayılan object'dir. Örneğin window.status yazmayla sadece status yazmak arasında bir fark yoktur. Gerçek programcılar genelde yalnız status yazarlar, ama biz ilerde kaybolmamak için uzun haliyle yazsak daha iyi olur sanırım.
Özetlersek: Şimdiye kadar object'lerin görünümlerini tarif eden properties (özellikleri) olduğunu öğrendik. Ayrıca biliyoruz ki metodlar bir şeyin nasıl yapılacağını tarif ederler. Sonra window'un varsayılan object olduğunu öğrendik, istersek window'u kodumuza dahil etmeyebiliriz.
Kısa özet için bu kadar yeter. Şimdi başka bir ilginç yanına bakalım:
Objectlerin özellikleri de object olabilir!.. Dikkat ederseniz, document gerçekte bir property (özellik) olamaz, çünkü özellikler kendilerini tarif eden bir şey tarafından takip edilmelidir.
Umarım yukardaki resmin nedemek istediğini anladınız, yeterince İngilizce gördüğümüz için etiketleri Türkçeleştirmedim. Çok profesyonel bir reesim değil ama, resimde DOM'u bir ağaç şeklinde görüyorsunuz, window nesnesi ise ağacın kökünde oluyor.
- İyi ama sen bize window nesnesine gerek yok demiştin
- Evet ama bu window nesnesinin DOM'da olmadığı anlamına gelmez.
- Peki kullanmak zorunda değilsem neden DOM'un içerisinde?
- Çok basit, şöyle düşün: Aşağıdaki resim güzel durur mu? Onun için window'u keşfettiler.:-)
"window nesnesi köktür". Oradan, ilk özellikler, metodlar ve nesneler grubuna tırmanırız. Daha yukarı tırmanmak bizi bir başka özellikler, metodlar ve nesneler grubuna götürür. Bunun hepsi önceden tasarlanmıştır. Aniden writeln() komutunu yazamazsınız, önceden nesnesini ve yerini belirtmelisiniz.
-
Ders 6: [Soru Sorma ve Pencere Açma]
Ziyaretçilere soru sorma
Değişkenleri öğrendiğimiz zamanı hatırlıyormusunuz? Değişkenler bilgileri saklamada kullanılıyordu. Örnek ve alıştırmalarda değişkenlerin 'statik' tariflerini gördünüz, yani browser değişkenin değerini Javascripti çalıştırmadan bildiği durumlar. Halbuki prompt() metodu ile browsere ziyaretçiye soru sormasını ve cevapları değişken olarak saklamasını söyleyebiliriz. Bunun hepsi karmaşık görünsede esasında tek satırda iş biter.
var durum = prompt("Kendinizi nasıl hissediyorsunuz?","iyi yada hasta");
Nasıl cevap verdiğiniz önemli değil, çünkü değişkenle ilgili bir şey yapmadım henüz. durum değişkeni şu anda Javascript tarafından ulaşılabilir durumda değil. Eğer sayfa yüklenmeden sizi cevaplamaya mecbur bıraksaydım ulaşılabilir olurdu. Şimdi sayfa yüklendi ve artık değişkenler yerleştiremezsiniz. Eğer değişkene şimdi ulaşmaya çalışsaydım "object undefined" hatası alırdık. (Evet, değişkenler de nesnedir.)
Şimdi kısaca parantezlerin içindekilerin ne yaptığını anlatacağım. Önceki dersten hatırlarsınız, parantez içinde metodların parametreleri vardır. Parametreler metodların ne yapmaları gerektiğini etraflıca anlatırlar. prompt() metodunun 2 tane parametreye ihtiyacı vardır. Birincisi soru, ikincisi varsayılan cevaptır. Her iki parametrede " " ile sınırlanıp virgülle ayrılır. Aman dikkat " ve , arasında boşluk olmamalıdır.
Şimdiye kadar çok iyi gidiyoruz,Soruların nasıl sorulacağını öğrendik. Şimdi ise, bir script ile ziyaretçiye soru sorup, ziyaretçinin cevabına göre Alert-box içinde selam verelim. Bu şekilde cevapları işleyip geçerli kılmasını öğreniriz.
<SCRIPT language="JavaScript">
<!--
var durum = prompt("Kendinizi nasıl hissediyorsunuz?","iyi yada hasta");
if (durum == "iyi") {
alert("Çok güzel, böyle olmaya devam edin")
} else {
alert ("Geçmiş olsun, hemen bir doktora gidin")
}
// -->
</script>
Kolay değil mi? if-then-else sanırım tanıdık gelmiştir, değil mi? Böyle oynamak eğlenceli oluyor mu?
Şimdi bir sonraki bölüme geçelim:
Javascriptle pencere açma
HTML ile pencere açmak rutin bir iştir, ama bir takım sınırlamaları vardır. HTML ile pencerelerin neye benzediğini kontrol imkanınız yoktur. Hangi özellikler olmalı (scroll bar, status bar, üst menu v.s.) veya pencerenin ölçüleri gibi. Fakat Javascript ile open() metodunu kullanarak bunların hepsini uygulayabilirsiniz. Aynen şöyle:
window.open("URL","isim","özellikler");
Yukardaki kod ile yeni bir pencere açıp, ilk parametre olarak yer belirtirsiniz. Bu örnekte "URL", fakat gerçekte "http://www.lanetliev.com" diye bir şey yazmanız lazım.
Metodun ikinci parametresi ise pencerenin adıdır. Bu sizin hangi pencereye istiyorsanız o pencere içinde değişiklik yapmanızı sağlar. Web Tasarımı derslerindeki frame bölümünde daha ayrıntılı hatırlayabilirsiniz.
Features parametresi açılan pencerenin hangi özellikleri taşımasını istiyorsanız onları dahil eder. Eğer features (özellikler) parametresinde herhangi bir özellik dahil ederseniz, yazılı olmayanları uygulamaz, sadece belirttiğiniz parametreleri olan bir pencere açar. Örneğin:
window.open("URL","name","status,scrollbars,resizable")
böyle yazarsanız, status bar, scrollbar (kaydırma çubukları) ve ölçüleri ayarlanabilir bir pencere elde edersiniz. Dikkat ederseniz, stringde hiç boşluk bırakılmamıştır. Boşluk bırakırsanız, bir takım browserlarda hata mesajı alırsınız. Şimdi ise sadece yükseklik ve genişliği belirten tarif eden bir örnek göreceksiniz:
window.open("URL","name","height=250,width=640")
Unutmayın boşluk bırakmak yok! Ayrıca HTML'den alışkın olduğunuz " " işaretleri de yok!. Bu biraz karışık olabilir, ama bir kere anladınız mı tamamdır.
Aşağıda kullanabileceğiniz Feature (Özellik) listesi:
height Pencerenin yüksekliği (pixel olarak)
width Pencerenin genişliği (pixel olarak)
status Sayfanın altındaki mesaj çubuğu
menubar Sayfanın üstünde Dosya, Düzen Sık Kullanılanlar gibi şeylerin olduğu kısım
scrollbars Eğer gerekiyorsa kaydırma çubukları görünsün
toolbar Üstünde Geri, İleri, Anasayfa, gibi buttonların olduğu gezinme çubuğu
location Şu anda bulunduğunuz sayfanın URLsini gösteren kutu
directories Bu sadece Netscape için geçerli. "Yenilikler" butonu gibi butonlar...
resizable Ziyaretçilerin pencere ölçülerini değiştirmesine izin veriyorsanız yazın
Bunlardan sadece birini yazarsanız, öbürlerini istemediğiniz anlamına gelir. Eğer hiç bir şey yazmazsanız standart bir pencere açılır. Hangi özellikleri istiyorsanız onları yazınca pencere istediğiniz özelliklerde (feature) açılır.
-
sticky olmayı haketmiş.
Mydonose, kod olan kısımları italik yaparsan daha anlaşılır olabilir. -
ben de arada sırada eklemeler yaparım
sen böyle devam et
akışı bozmak istemiyorum -
ben de biraz daha üst düzey kullanıcılar için ayrıntıya girerek
en çok kullanılan html komutlarından biraz detaylı bahsedeyim bari
bu notlar ulakbim.gov.tr den derlenmiştir
Temel HTML Tag'leri:
<<font color='red'>HTML></HTML>, <HEAD></HEAD> ve <BODY></BODY>: </font id='red'>
HTML'in en temel blok tag'leridir. Bir HTML dökümanı genelde <HTML> ile başlar ve
</HTML> ile biter, ancak verilmese bile, browser dökümanı sorunsuz olarak görüntüleyebilir. Aynı şey <BODY> için de gereklidir. Ancak, <HEAD>'in verilmesi ve döküman içinde HEAD bloğu varsa, <BODY>'nin de verilmesi zorunludur.
Parametre olarak bir çok blok elemanı gibi LANG=Dil alır. Örneğin <BODY LANG=tr>.
<font color='red'><TITLE></TITLE>:</font id='red'> İlk öğrenilmesi gereken tag'lerden biridir. Kullanımı basittir ve HEAD bloğunda kullanılı.
<font color='red'><P></P>:</font id='red'> Paragraf açma kapama tag'leri. Yeni bir paragraf açarken/kapatırken kullanılır. Browser <P> tag'iyle karşılaştığı yerde yukarıdan ve aşağıdan biraz boşluk bırakır.
Çoğu browser kapama tag'inin olmasına ihtiyaç duymaz.
Yararlı bir parametre olarak ALIGN=LEFT|CENTER|RIGHT alabilir.
<P ALIGN="CENTER">Metin....<P> denildiği zaman aradaki bütün metin sol tarafa yaslı değil ortalanmış görülür. RIGHT ise yazıyı sağa dayar.
<font color='red'><BR>:</font id='red'>Satır sonu tag'i.Kapama tag'i yok.<P> gibi altta,üstte boşluk bırakmadan yeni bir satır açar.
<font color='red'><HR>:</font id='red'> Yatay çizgi tag'i. Parametre olarak ALIGN=LEFT|CENTER|RIGHT, WIDTH=xx%, SIZE=x ve NOSHADE alabilir. WIDTH ile yüzde olarak genişliğini verebilirsiniz.
SIZE'ın varsayılan değeri 2'dir.
NOSHADE ileyse, 3 boyut etkisini istemediğinizi belirtebilirsiniz.
<font color='red'><B></B>:</font id='red'> Kalın yazı tag'i. İçeride kalan bütün metin kalın harflerle görüntülenir.
Ancak yeni HTML standartlarını hazırlayan organizasyon <B></B> yerine ileriki günlerde <STRONG></STRONG> kullanılmasını önermektedir.
<font color='red'><I></I>: </font id='red'>İtalik yazı tag'i. İçeride kalan bütün metin italik harflerle görüntülenir.
Yine <STRONG></STRONG> gibi, <I></I> yerine <EM></EM> (emphasis) kullanılması önerilmektedir.
<font color='red'><H1></H1>...<H6></H6>:</font id='red'> Başlık tag'leri. Dökümanı çeşitli bölümlere ayırmak ve bunları belirtmek için kullanabilirsiniz. ALIGN=LEFT|CENTER|RIGHT parametresi alabilir.
<font color='red'><OL></OL> ve <LI>: </font id='red'>Numaralandırılmış liste (Ordered List) tag'leri. <OL> ve </OL> listeyi açma ve kapama için,
<LI> ise yeni bir eleman tanımlamak için kullanılır.
Numaralar otomatik olarak verilir.
<font color='red'><UL></UL> ve <LI>: </font id='red'>Numaralandırılmamış liste (unordered list) tag'leri.
<UL> ve </UL> listeyi açma ve kapama için,<LI> ise yeni bir eleman tanımlamak için kullanılır.Numara yerine bullet konur.
<font color='red'><FONT></FONT>: </font id='red'>Karakter tipini, puntosunu, rengini vermek için kullanılır.
Çok kullanılan tag'lerden biridir.
Parametre olarak
FACE=Font_İsmi (Arial, Helvetica vs gibi),
SIZE=x|+/- x (SIZE="3", SIZE="-1" vs gibi),
COLOR=#RRGGBB|Renk_İsmi (COLOR="#808080" vs gibi) alabilir.
HTML 4.0'da iptal edilmiştir.
<font color='red'><BASEFONT>: </font id='red'>Dökümanın genel yazı tipini belirtmek için kullanılır.
Parametreleri <FONT> tag'ininkilerle aynıdır. HTML 4.0'da iptal edilmiştir.
<font color='red'><A></A>:</font id='red'> Anchor tag'i. HTML'in HTML olmasını sağlayan tag'dir. Metin içinde bir başka yere, Internet üzerinde herhangi bir dökümana, resme ya da herhangi bir servise ulaşılabilmesini sağlar. En gerekli parametre olarak HREF=Kaynak_İsmi alır. Kaynak kısmında kullanılabilecek isimlere örnek olarak:
HREF=table_of_contents.html
HREF="../"
HREF=../MySubDir2/TarDosyası.tar
HREF="http://www.ulakbim.gov.tr" /
HREF="ftp://cu:cork@efe.ulakbim.gov.tr/" (ftp client'ını açar, efe'ye bağlanır ve kullanıcı ismi olarak cu, password olarak cork verir (şifre tabii ki cork değil :)
HREF=telnet://efe.ulakbim.gov.tr/"
HREF=mailto:cu@ulakbim.gov.tr?subject=HTML%20hakkında+cc=cu%40reborn.com (e-mail client'ıny açar, cu@ulakbim.gov.tr adresine, subject'i HTML hakkında olan ve bir kopyası da cu@reborn.com'a gönderilecek bir e-mail taslağı çıkartır. Dikkat edilirse, boşluk yerine %20, @ işareti yerine %40 kullanılmıştır. %Karakter_Hex_Kodu olarak istediğiniz karakteri kullanabilirsiniz. İlk parametreden önce ?, sonrakilerden önce de + kullanılır.)
HREF="javascript:alert('Gidebilir miyim')" (bir JavaScript kodu çalıştırır, ve ekrana üstünde Gidebilir miyim? yazan ve OK tuşu olan bir diyalog kutusu çıkartır.)
Ayrıca bir diğer parametresi NAME=Anchor_İsmi'dir. Bu şekilde bir anchor tanımladığınız zaman döküman içinde istediğiniz bir yerden tam bu noktaya zıplamanız mümkündür.
Örneğin sayfa en tepesine <A NAME=docTop><A> dediğiniz zaman sayfanın en altına koyduğunuz bir
<A HREF=#docTop>Click here to go to top.</A> link'iyle dökümanın en üstüne geri dönülebilmesini sağlarsınız. # işareti önemlidir ve link'in hedefinin bir anchor olduğunu gösterir. Ayrıca <A HREF=../abuk%20subuk/other.html#enalt">bla bla..</A> gibi bir link'le başka bir döküman içindeki bir anchor'a da link koyabilirsiniz.
Tabii ki Anchor tanımlarken hem NAME hem de HREF parametrelerini verebilirsiniz.
Böylece aynı anda hem dışarıya link vermiş, hem de dışarıdan link verilebilecek bir blok tanımlamış olursunuz. Örneğin, <A NAME=#giris HREF=gelisme.html>.
<font color='red'><BASE>: </font id='red'>Döküman içinde bütün URL'leri uzun uzadıya vermemek için bir ön-ek URL tanımlamak için kullanılır. Parametre olarak HREF=Ön-ek_URL'i alır.
Örneğin <BASE HREF=http://www.ulakbim.gov.tr/> verildiği zaman
<A HREF=index.html>İçindekiler</A> bulunulan directory'deki değil
http://www.ulakbim.gov.tr'e yönlenir.
Yine de bu şekilde bir kullanım pek tavsiye edilmemektedir. HEAD bloğunda kullanılmaktadır.
<font color='red'><IMG>: </font id='red'>Döküman içine bir resim yerleştirmek için kullanılır. Parametre olarak
SRC=Resim_URL'i, WIDTH=Genişlik, HEIGHT=Yükseklik, ALT=Alternatif_Text, LOWSRC=Düşük_Çözünürlükteki_Resim_URL'i alabilir
BORDER=Çerçeve_Kalınlığı, HSPACE=x, VSPACE=x (Yatay ve dikey marjinler) alabilir.
Çok sık olarak bir <A HREF=....></A> bloğu içine yerleştirilir ve
görsel bir link yaratılmış olur.
<font color='red'><SUP></SUP> ve <SUB></SUB>:</font id='red'>Sırasıyla superscript ve subscript yazı için kullanılır. Superscript yaptığınız yazı yukarıda, suscript yaptığınız yazı aşağıda görüntülenir.
Örneğin x2 (superscripted) ve M1,2 (subscripted).
<font color='red'><BLOCKQUOTE></BLOCKQUOTE>:</font id='red'> Alıntı yapmak için kullanılır. Genelde ise bir bloğu toptan içeri indent etmek için kullanılır. Bu dökümandaki kod örnekleri bu tag'le içeri doğru alınmıştır. Indent etmek için kullanılması yüzünden, alıntı yaptığınızda tırnak (") işareti koymanız tavsiye edilmez.
<font color='red'><TT></TT>:</font id='red'> Teletype (monospaced, sabit genişlikte) karakter kullanmak için kullanılır. Courier tipik bir teletype karakter tipidir. Bu sayfalardaki bütün kod örnekleri de Teletype stilindedir.
<font color='red'><PRE></PRE>:</font id='red'> Önceden düzenlenmiş (preformatted) metin blokları için kullanılır. Normalde, HTML birden çok whitespace'i tek bir boşluk karakteriyle değiştirdiği için, görüntülenmesi başka türlü mümkün olmayan metin blokları bu tag yardımıyla görüntülenebilir. Örneğin:
Welcome to my little corner of tutorial
Here are some formatting that is otherwise impossible
May 1998
Mon Tue Wed Thu Fri Sat Sun
---------------------------------
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
(
bu kısmı notepad de başlardan bir kaç tab boşluk bırakarak yazınca görürsünüz
forumun özelliğinden dolayı sola yaslı çıktı : ))
)
<font color='red'><STRIKE></STRIKE>:</font id='red'> Strike-Through (üstü çizili yazı) için kullanılır.
Vurgu vermek ya da bir şeyin iptal edildiğini göstermek için kullanılabilir ancak pek rastlanmamaktadır. HTML 4.0'da iptal edilmiştir.
<font color='red'><UL></UL>: </font id='red'>Altçizgi çekmek için kullanılır. Kullanılması pek tavsiye edilmeyen bir tag'dir, çünkü link'lerin altında da genellikle altçizgi olduğu için altı çizili düz metinle link'lerin birbirine karışma ihtimali vardır. HTML 4.0'da iptal edilmiştir.
<font color='red'><BIG></BIG> ve <SMALL></SMALL>:</font id='red'> Yazıyı yeni bir paragraf açmadan geçici olarak büyütmek ve küçültmek için kullanılır.
<font color='red'><BLINK></BLINK>: </font id='red'>Netscape Navigator'ın meşhur yanıp sönen tag'i. Bir çok HTML yazarı işin suyunu kaçırsa da, efektif bir kullanım hala mümkündür.
<font color='red'>
<CITE></CITE>: </font id='red'>Atıf (citation) yapıldığı zaman kullanılır. Genelde italik olarak render edilir.
<font color='red'>
<CODE></CODE>: </font id='red'>Örnek kod (C, Pascal vs gibi) verildiği zaman kullanılır. Genelde Teletype olarak render edilir.
<font color='red'><ADDRESS></ADDRESS>:</font id='red'> Adres bölümleri için kullanılır. Genelde italik olarak render edilir.
<font color='red'><SAMP></SAMP>: </font id='red'>Örnek çıktı (program, script vs) için kullanılır. Genelde Teletype olarak render edilir.
<font color='red'><ACRONYM></ACRONYM>: </font id='red'>Kısaltmalar için kullanılır. Parametre olarak TITLE=Kısaltmanın_Açık_Hali alır. Örneğin, <ACRONYM title="World Wide Web">WWW</ACRONYM>.
NOT: Yukarıdaki son 5 tag çifti genelde pek sık kullanılmasa da kullanılması tavsiye edilmektedir. Dökümanlar içinde arama yapılırken ve bir arama makinesi tarafından endekslenirken yardımcı olabilmektedir. Ayrıca başka benzer tag'ler de mevcuttur.
<font color='red'><APPLET></APPLET>:</font id='red'> Döküman içine Java applet'i gömmek için kullanılır.
Parametre olarak
CODE=Java_Class_Dosyası_URL'i,
CODEBASE=Class_Dosyasının_Bulunduğu_Dizin,
ARCHIVE=JAR_Dosyası_URL'i,
ALT=Alternatif_Metin,
ALIGN=LEFT|CENTER|RIGHT,
HEIGHT=Yükseklik, WIDTH=Genişlik, MAYSCRIPT (JavaScript'lerle haberleşebileceği) ve NAME=İsim_Bilgisi alabilir.
Ayrıca applet'in kullanabileceği parametreleri de,
istenildiği kadar PARAM NAME=Applet_Parametresi_İsmi VALUE=Applet_Parametresi_Değeri kullanarak verebilirsiniz. HTML 4.0'da iptal edilmiştir.
HTML 4.0'da şöyle bir kıllanım mevcuttur:
<OBJECT codetype="application/octet-stream"
classid="java:Bubbles.class"
codebase="http://www.ulakbim.gov.tr/~cu/java/"
width="500" height="500">
Ekrana bir sürü baloncuk çizen şirin bir applet
</OBJECT>
<font color='red'><SCRIPT>:</font id='red'> Döküman içine JavaScript, VBScript gibi dillerle yazılmış programcıklar gömmek için kullanılır. Parametre olarak LANGUAGE=Script_Dili_İsmi alabilir. Ancak HTML 4.0'da LANGUAGE yerine TYPE parametresi getirilmiştir. Örneğin <SCRIPT LANGUAGE="JavaScript 1.1"> yerine <SCRIPT TYPE=text/javascript> kullanılmalıdır.
<font color='red'><META>:</font id='red'> HTML'in en kural tanımayan elemanıdır denilebilir. Parametre olarak bir çok şey alabilir, ancak en çok kullanılan iki tanesi HTTP-EQUIV ve NAME'dir.
Genel olarak bir de VALUE ya da CONTENT parametresi takip eder.
Örnek olarak:
<META HTTP-EQUIV="Expires" CONTENT="Tue, 10 Jun 1998 12:30:00 GMT">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-9">
<META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://www.ulakbim.gov.tr/">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META NAME="Generator" CONTENT="Visual Page 1.1 for Windows">
<META NAME="Author" CONTENT="Cüneyt YILMAZ">
<META NAME="Keywords" LANG=tr CONTENT="deneme, learning HTML, dummy document">
Yukarıdan da anlaşılabileceği gibi HTTP-EQUIV, HTTP protokolü tarafından desteklenen bazı parametreleri vermek için kullanılır. Örnek olarak, 1. satırdaki tanımlama, dökümanın geçerlilik tarihinin 10 Haziran 1998'de dolacağını belirtir. Bu tarihten sonra kullanıcının bu dökümanı cache'den yüklemesi engellenir ve tekrar orijinal dökümana gitmesi zorlanır.
<font color='red'><EMBED></EMBED>: </font id='red'>Döküman içine genelde sık kullanılan plug-in'lerin desteklediği ses, video, animasyon gibi nesnelerin gömülmesi için kullanılır. Parametreler nesnenin tipine göre değişir. Ancak ortak olan bir parametre SRC=Nesne_URL'idir. HTML 4.0'da iptal edilmiştir. Örneğin bir QuickTime 3.0 movie dosyasını şu şekilde gömebilirsiniz:
<EMBED SRC="myMovie.mov" CONTROLLER="FALSE" AUTOPLAY="TRUE" CACHE="FALSE" WIDTH="240" HEIGHT="180">Plug-in'iniz yok mu? Ne kötü!</EMBED>
HTML 4.0 kurallarına göre yeni gösterim şu şekildedir:
<OBJECT DATA="myMovie.mov" TYPE="application/mov">
<PARAM NAME="width" VALUE="240" VALUETYPE="data">
<PARAM NAME="height" VALUE="180" VALUETYPE="data">
<PARAM NAME="controller" VALUE="false" VALUETYPE="data">
<PARAM NAME="autoplay" VALUE="true" VALUETYPE="data">
<PARAM NAME="cache" VALUE="false" VALUETYPE="data">
Plug-in'iniz yok mu? Ne kötü!
</OBJECT>
Ayrıca HTML 4.0'da gelen yeniliklerden bir tanesi de DIR (direction, yön) parametresidir.
LTR (left to right) veya RTL (right to left) değerini alabilir.
Bir çok blok elemanı içinde kullanılabilir. Örneğin <HTML DIR="RTL"> veya <P DIR=LTR> gibi. Ancak hala bir çok browser tarafından desteklenmemektedir.
Tablolar:
Tablolar, HTML'in sayfa mizampajı açısından en çok kullanılan kısımlarındandır. Her ne kadar büyük bir tabloya elle müdahele etmek bir işkence olabilse de, yine de bilgi açısından ele alınacaktır.
Bir tablo genel olarak şuna benzer.
<font color='red'><TABLE BORDER="2" CELLPADDING="3" CELLSPACING="1" HEIGHT="200" WIDTH="90%" BGCOLOR="#A0A0A0">
<TR>
<TD>1. sütun 1. satır</TD>
<TD>2. sütun 1. satır</TD>
</TR>
<TR>
<TD>1. sütun 2. satır</TD>
<TD>2. sütun 2. satır</TD>
</TR>
<TR>
<TD>1. sütun 3. satır</TD>
<TD>2. sütun 3. satır</TD>
</TR>
</TABLE> </font id='red'>
<font color='red'><TABLE></font id='red'> tag'ini açarken BORDER="2" ile çerçevenin kalınlığının 2 pixel, CELLPADDING="3" ile hücre içindeki yazı ile çerçevesi arasında 3 pixel, CELLSPACING="1" ile hücreler arasında 1'er pixel olacağını, HEIGHT="200" ile yüksekliğinin 200 pixel olacağını, WIDTH="90%" ile genişliğinin browser penceresinin %90'ı olacağını ve en son olarak da BGCOLOR="A0A0A0" ile arka fon renginin gri olacağını vermiş olduk. Bunlardan hiçbirini vermemiş olsaydık, browser genişlik, yükseklik ayarlarını hücre içlerindeki dataya göre otomatik yapardı ve kalınlık ve arka fon rengini de varsayılanlardan atardı. Burada dikkat edilmesi gereken bir şey, verdiğiniz yükseklik veya genişlik değerleri, hücre içindeki elemanlardan küçükse, verdiğiniz değerler ihmal edilir ve hücre içindeki elemanları tamı tamına alabilecek en küçük değerler kullanılır.
Tablo tanımlamaları her zaman için satır satır yapılır. Yukarıda görüldüğü gibi <TR> (table row) ile yeni bir satır açıyoruz, ve altına da <TD> (table data) ile elemanlarımızı sıralıyoruz. Sütunla işimiz bittiğinde </TD> ile, satırla işimiz bittiğinde </TR> ile kapatıyoruz. Tabii ki tablomuzla işimiz bittiğinde de </TABLE> ile tablomuzu kapatıyoruz.
Peki burada birinci satırda 2 yerine 1 tane geniş sütun vermek isteseydik ne yapacaktık? İlk satır bilgisini şu şekilde değiştirecektik:
<font color='red'><TR>
<TD COLSPAN="2">1. satır, başlık satırı olabilir</TD>
</TR> </font id='red'>
Aynı şekilde 1. sütunda 3 satır yerine tek bir satır kullanmak için şunu yapacaktık:
<font color='red'><TR>
<TD ROWSPAN="2">1. sütun, başlık sütunu olabilir</TD>
</TR></font id='red'>
örnek:
(bu kodları notepaddew yazıp explorerde açınca her tür tablonun
nasıl yapılabileceğinin mantığını çok iyi anlayacaksınız)
<font color='red'>
<TABLE BORDER="2" CELLPADDING="2" WIDTH="500" HEIGHT="300">
<TR>
<TD HEIGHT="60" VALIGN="MIDDLE" COLSPAN="5"><P ALIGN="CENTER">EN UST</TD>
</TR>
<TR>
<TD WIDTH="100" VALIGN="MIDDLE" ROWSPAN="4"><P ALIGN="CENTER">EN SOL</TD>
<TD HEIGHT="60" VALIGN="MIDDLE" COLSPAN="2"><P ALIGN="CENTER">SOL IC UST</TD>
<TD WIDTH="100" VALIGN="MIDDLE" ROWSPAN="2"><P ALIGN="CENTER">SAG IC UST</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG EN UST</TD>
</TR>
<TR>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SOL ORTA</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SAG ORTA</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG ORTA UST</TD>
</TR>
<TR>
<TD HEIGHT="60" VALIGN="MIDDLE" COLSPAN="2"><P ALIGN="CENTER">SOL IC ORTA</TD>
<TD WIDTH="100" VALIGN="MIDDLE" ROWSPAN="2"><P ALIGN="CENTER">SAG IC ALT</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG ORTA ALT</TD>
</TR>
<TR>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SOL ALT</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">SOL IC SAG ALT</TD>
<TD WIDTH="100" HEIGHT="60" VALIGN="MIDDLE"><P ALIGN="CENTER">EN SAG EN ALT</TD>
</TR>
</TABLE></font id='red'>
Yukarıda yeni bir parametre olarak VALIGN (vertical alignment) kullanıldı. VALIGN ile hücre elemanlarının hücrenin yukarısı mı ortası mı yoksa altına mı yaslanacağını belirtebilirsiniz. Sola, sağa yaslamak veya ortalamak için de <P ALIGN=LEFT|CENTER|RIGHT>'ı kullanabilirsiniz.
Tablolarla ilgili iki önemli not:
1-Hücre içinde hiç bir data yoksa, browser o hücrenin çerçevesini göstermez. Örneğin
<TABLE BORDER="1" WIDTH="100" BGCOLOR="#C0C0C0">
<TR>
<TD WIDTH="50"></TD>
<TD WIDTH="50"> </TD>
</TR>
<TR>
<TD WIDTH="50"> </TD>
<TD WIDTH="50"></TD>
</TR>
</TABLE>
2-Eğer döküman içinde varsayılan bir font kullanıyorsanız bile tablonun her hücresi içinde bunu tekrar tanımlamanız gerekir, çünkü tablolar içinde dökümanın tanımlanan karakter tipinin üstüne varsayılan karakter tipi konur. Örneğin, döküman font'unuzu Helvetica tanımladıysanız ve browser'ın varsayılan font'u Times New Roman ise tablo içinde bütün yazılar Times New Roman olarak görünür.
-
cok yararlı bir calısma olmus.tebrik eder, devamını dilerim... -
ha bi de unutmadan framelerden ve framesetlerden bahsederek konuya şimdilik bi ara vereyim
FRAMESET'ler:
Frameset'ler bir browser penceresi içinde birden çok sayfayı aynı anda görüntülemek için kullanılır. Frameset kullanarak, başka türlü yapılması mümkün olmayan bir çok şeyi yapabilirsiniz, çok sık kullanılan bir örnek olarak, yukarıda (veya solda) bulunan ve hareket etmeyen bir düğme grubundan istediğinize basarak, aşağıda (veya sağda) bulunan çerçeve içinde yeni bir sayfaya yönlenebilirsiniz.
Tipik bir frameset tanımlaması şöyledir:
<HTML>
<HEAD>
<TITLE>Frameset denemesi</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%" BORDER="0" FRAMESPACING="0">
<FRAME SRC="sol.html" NAME="sol" SCROLLING="NO" MARGINWIDTH="5" MARGINHEIGHT="5" NORESIZE>
<FRAME SRC="sag.html" NAME="sag" MARGINWIDTH="0" MARGINHEIGHT="0" RESIZE>
</FRAMESET>
<NOFRAMES>
<BODY TEXT="#333333" BGCOLOR="#FFFBF0" LINK="#000099" VLINK="#006600" ALINK="#009999">
<P> Browser'ınız frame'leri desteklemiyor.<BR>
<A HREF="http://home.netscape.com/download/">Netscape Navigator'ı yüklemek için buraya basınız</A>
</BODY>
</NOFRAMES>
</HTML>
NOT: Yukarıda BODY kısmı olmasına rağmen bir çok frameset tanımlamasında bu blok hiç yoktur.
<FRAMESET>'le yeni bir frameset'i tanımladık, ama parametresiz hiçbir işe yaramaz.
Alabildiği parametreler:
COLS=x|x%|*|x*, x|x%|*|x*....
ROWS=x|x%|*|x*, x|x%|*|x*....
BORDER=x
FRAMESPACING=x
COLS ve ROWS ile frameset'inizi nasıl böleceğinizi belirlersiniz, ve ikisinden birini vermeniz zorunludur. Bölümlemeyi yaparken değerleri pixel cinsinden (x) veya yüzde cinsinden (x%) verebilirsiniz. * işareti ise özel bir anlam taşır. * verdiğiniz zaman, browser önce x veya x% olarak verdiğiniz değerlere bakar ve bunlara gereken boşluğu ayarlar.
Daha sonra kalan boşluk ise * işaretiyle belirtilen yerlere ayrılır.
Örneğin, ekranımız 800x600 genişliğinde olsun ve
biz de <FRAMESET ROWS=10%, 500, *> kullanmış olalım.
Browser en üstteki frame'e 800x10%=80 pixel, bir altındakine 500 pixel ve
en alttakine de kalan 800-(80+500)=220 pixel'lik alanı ayırır.
* işaretini birden fazla kere kullanabilirsiniz,
örneğin aşağıdakilerin hepsi geçerli tanımlamalardır:
<FRAMESET ROWS=*, 10%, 500, *>
<FRAMESET ROWS=*, *>
<FRAMESET ROWS=1*, 10%, 500, 10%, 3*>
Yukarıdaki 1* ve 3* kullandığımız zaman browser,2. sıradaki 10%'i, 3. sıradaki 500 pixel'i ve 4. sıradaki 10%'i ayırdıktan sonra kalan boşluğu 4 eşit parçaya ayırıp en üstteki frame'e 1, en alttaki frame'e de 3 birimlik yer ayırır.
BORDER parametresiyle frame'ler arasındaki ayıraç çizgisinin kaç pixel olacağını ve FRAMESPACING'le de aralarında kaç pixel kalacağını belirlersiniz.
<NOFRAMES></NOFRAMES> ikilisiyle de browser'ı frameset'leri desteklemeyen kullanıcılarda görülecek olan metni girebilirsiniz.
NOT:
<NOFRAMES></NOFRAMES> ikilisini vermeden BODY bloğu açarsanız,
frameset'iniz yerine bu BODY bloğu görülecektir.
Ayrıca, Netscape Navigator'a özel olarak BORDERCOLOR=Ayraç_Çizgisi_Rengi ve FRAMEBORDER=YES|NO parametrelerini de verebilirsiniz. FRAMEBORDER sanıldığından biraz farklı olarak, aradaki çizginin 3D etkisinin olup olmayacağını verir.
Frameset'ler içiçe gömülebilir, yani bir <FRAMESET></FRAMESET> ikilisi arasında bir tane daha <FRAMESET></FRAMESET> tanımlayabilirsiniz. Örneğin:
<FRAMESET ROWS=100, 500, *>
<FRAME SRC=ENUST.HTML>
<FRAMESET COLS=150, *>
<FRAME SRC=TOC.HTML>
<FRAME SRC=CONTENTS.HTML>
</FRAMESET>
<FRAMESET COLS=150, 200, *>
<FRAME SRC=SOLALT.HTML>
<FRAME SRC=ORTAALT.HTML>
<FRAME SRC=SAGALT.HTML>
</FRAMESET>
</FRAMESET>ENUST.HTML, 100 pixel yükseklik,
TOC.HTML, 150 pixel genişlik
CONTENTS.HTML, 500 pixel yükseklik ve kalan genişlik
SOLALT.HTML, 150 pixel genişlik ve kalan yükseklik ORTAALT.HTML, 200 pixel genişlik ve kalan yükseklik SAGALT.HTML, kalan genişlik ve kalan yükseklik
Gelelim frame'imizi böldükten sonra içlerine konulacak sayfaları tanımlamaya. Bunu da <FRAME> elemanı ile yapıyoruz. Aldığı parametreler:
NAME=Frame'in_İsmi
RESIZE|NORESIZE
SCROLLING=YES|NO|AUTO
MARGINHEIGHT, MARGINWIDTH=x
SRC=Frame'in_URL'i
Bu parametrelerden RESIZE veya NORESIZE ile büyüklüğünün değiştirilip değiştirilemeyeceği bilgisini verirsiniz. SCROLLING ile de frame'in içeriğinin bir ekrana sığmaması halinde browser'ın kenara bir kayma çubuğu ekleyip eklemeyeceğini belirlersiniz, varsayılan AUTO'dur. MARGINHEIGHT ve MARGINWIDTH'leyse frame'lerin kendillerine ayrılan alana yerleştirilirken sol üstten kaçar pixel'lik bir marjin bırakılacağını belirtirsiniz. SRC ile de içine yerleştirilecek dosyanın URL'ini belirtirsiniz, SRC'u belirtmediğiniz zaman browser herhangi bir hata çıkarmayacak, buraya varsayılan renklerde boş bir sayfa koyacaktır. NAME parametresi frame'lerin en önemli parametresi sayılabilir, çünkü frameset'lerde bir frame'in içindeki bir link bir başka frame'in içeriğini değiştirebilir, bunu da NAME parametresini kullanarak yapar. Örneğin tanımlamamız şu olsun:
<HTML>
<HEAD>
<TITLE>Frameset denemesi</TITLE>
</HEAD>
<FRAMESET COLS="200,*" BORDER="1" FRAMESPACING="0">
<FRAME SRC="sol.html" NAME="sol" SCROLLING="NO" NORESIZE>
<FRAME SRC="sag.html" NAME="sag" MARGINWIDTH="0" MARGINHEIGHT="0" RESIZE>
</FRAMESET>
</HTML>ve sol.html içinde şöyle bir link'imiz bulunsun: <A HREF=table_of_contents.html TARGET=sag>İçindekiler</A>. Bu link'e tıkladığımızda sag.html'in bulunduğu frame'e table_of_contents.html yüklenecektir. Hatırlarsanız, frameset'i olmayan sayfalarda bir link'e tıkladığınız zaman, yeni dosya aynı pencere içinde açılırdı.
NOT: Bu parametreyi kullanarak mükemmel şekilde dolaşılabilecek siteler hazırlayabileceğiniz gibi, gittikçe içiçe açılan frame'lerden oluşan bir siteniz de olabilir!
Ayrıca, TARGET olarak verebileceğiniz bazı önceden-tanımlı isimler vardır, bunlar:
_top: tıklanan link'i bütün frame'lerden çıkarak, en üst seviyede açar.
_parent: tıklanan link'i kendi frameset'indeki bütün frame'leri silerek, o seviyede açar.
_self: tıklanan link'i, link'in bulunduğu frame'in içinde açar.
_blank: tıklanan link'i yeni boş bir pencerede açar.
NOT: TARGET parametresini verdiğiniz bir link'in TARGET'ı gerçekte yoksa, etkisi _blank ile aynı olacaktır, yani link yeni bir pencerede açılacaktır.
Benzer içerikler
- bulanık yazı netleştirme uygulaması
- e-ticaret yapanların yorumları
- çizim programları
- font bulma
- bilgisayarsız çizim tableti
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
