Wolder King: Html

Html etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Html etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Hareketli Twitter Kuşu Kodu

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbx_rBatTuoHSzWHFC_ItAxMPhZ3YSizGV0eHVutOPsIUJWePW0cpvo_99ijA0nAZZtu_TLuFY_E1vvzrHwOSLwBZXoS9bzeU9ByvaHQ5Gat6N5YwZodRqXyTv1pMTGlDr6DPBJZ3m54D/s1600/social-networks.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUbx_rBatTuoHSzWHFC_ItAxMPhZ3YSizGV0eHVutOPsIUJWePW0cpvo_99ijA0nAZZtu_TLuFY_E1vvzrHwOSLwBZXoS9bzeU9ByvaHQ5Gat6N5YwZodRqXyTv1pMTGlDr6DPBJZ3m54D/s1600/social-networks.jpg" width="320" /></a></div>
Belki bu kodu pek çok sitede görebilirsiniz ama gerçekten çok güzel bir hava katıyor. Tavsiye ederim.<br />
<br />
<textarea style="height: 51px; margin: 2px; width: 310px;"><script type="text/javascript" src="http://twitter-bird.googlecode.com/files/Twitter-terbang.js"></script><br /> <br /> <script type="text/javascript">
var birdSprite="http://twitter-bird.googlecode.com/files/bluetwit.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li",
"h1","h2","h3","h4","p","code","object","a","b","strong","span"); 
var twitterAccount = "http://Twitter Adresi";
var tweetThisText = "http://Twitter Adresi";
tripleflapInit();
        </script><script type="text/javascript">
document.write(unescape
</script>

Hareketli Twitter Kuşu Kodu

Hareketli Twitter Kuşu Kodu

Belki bu kodu pek çok sitede görebilirsiniz ama gerçekten çok güzel bir hava katıyor. Tavsiye ederim. <script type="text/javascr...

07:21

Html Eğitimi Ders 9-Arkaplan

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Bayağı bir yol kat ettik gibi görünüyor. Şimdi css olmadan önce arkaplan değiştirme şeklini göreceğiz. Aslında hala kullanılıyor. (Css nedir diyenler için html kodlarını renklendirme düzenleme vs. işe yarar)<br />
<h3>
Arkaplan</h3>
<div>
Arkaplan rengini iki şekilde belirtiriz. 1.'si ingilizce renk ismi olarak. 2.'si renk kodu kullanarak. Örneklere bakalım:</div>
<div>
<br /></div>
<div>
<br /></div>
<body bgcolor="yellow"><br />      <body bgcolor="#000000"><div>
<br /></div>
<div>
Bunun dışında arkaplan'a resim eklemek için:</div>
<div>
<br /></div>
<div>
<body background="arkaplan.jpg"></div>
<div>
<br /></div>
<div>
Bu sadece küçük bir düzenleme. Css kısmında daha iyi düzenlemelere başvuracağız. Kısa ve kolay bir ders oldu. Ama yine de tekrar edelim. Kolay gelsin.</div>

Html Eğitimi Ders 9-Arkaplan

Html Eğitimi Ders 9-Arkaplan

Merhaba, Bayağı bir yol kat ettik gibi görünüyor. Şimdi css olmadan önce arkaplan değiştirme şeklini göreceğiz. Aslında hala kullanılıyor...

07:13

Html Eğitimi Ders 8-Resimler

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Şimdi önemli bir konu üzerinde duracağız. Resim eklemek ve düzenlemek gibi. Çok kolay bir ders olacak.<br />
<h3>
Resimler</h3>
<div>
İlk olarak bir resm eklemeyi gösterelim:</div>
<div>
<br /></div>
<img src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br />
<br />
"img" kullanarak bir resim ekleyeceğimizi anladık ve "src" ile köprü yani link oluşturduk. Sonra "alt" ile üzerine gelice çıkacak yazıyı belirledik. Önizleyelim:<br />
<br />
<br />
<img alt="Resim" height="300" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" width="400" /><br />
<br />
Büyük bir resim değil mi? Biraz küçültsek iyi olur gibi. Hadi küçültelim:<br />
<br />
<img width="100" height="125" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br />
<br />
Şimdi önizleyelim:<br />
<br />
<img alt="Resim" height="100" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" width="125" /><br />
<br />
Daha güzel oldu değil mi? Şimdi de "border" yani çerçeve kalınlığını ayarlayalım. Örnek olarak kalınlığı "5" verelim:<br />
<br />
<img border="5" width="100" height="125" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br />
<br />
Önizleyelim:<br />
<br />
<img alt="Resim" border="5" height="100" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" width="125" /><br />
<br />
Şimdi gördüğünüz gibi bir çerçeve oluşturduk. Olmamasını istiyorsan "o" değerini vermemiz gerekir. Peki bu da tamam. Şimdi resmimi ortalamak istiyorum. Pek çok tag'de özellik olarak kullanılan "aling" yani hiza özelliğini kullanıcam. Örneğin:<br />
<br />
<img aling="center" border="5" width="100" height="125" src="http://resimage.net/img/yavru-hayvan-resimleri/yavru-kedi.jpg" alt="Resim"><br />
<br />
Önizlemek isterdim ama blogger div etiketleri ile çalıştığından bu durumu önizlemeyecektir. Bunun dışında "aling" özellikleri şunlardır:<br />
<br />
<ul>
<li>center: Orta</li>
<li>right: Sağ</li>
<li>left: Sol</li>
</ul>
<div>
Şimdilik bu kadar. Çalışmayı unutmayın. Kolay Gelsin.</div>

Html Eğitimi Ders 8-Resimler

Html Eğitimi Ders 8-Resimler

Merhaba, Şimdi önemli bir konu üzerinde duracağız. Resim eklemek ve düzenlemek gibi. Çok kolay bir ders olacak. Resimler İlk olarak b...

06:53

Html Eğitimi Ders 7-Form Oluşturma

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu olan bu ders size kolay gelecek. Eminim.<br />
<h3>
Formlar</h3>
<div>
Formlarda açma etiketi "input" olarak bilir ve türünü ise "type" değerine özellik vererek belirleriz. İlk olarak "text" yani yazı özelliğini göreceğiz. Sonradan "name" ile forma isim verebilir, "size" ile büyüklüğü belirtebilirsiniz. Örneğin:</div>
<div>
<br /></div>
<form name="giris" action="giris.asp" method="post"><br />
<b>Kullanıcı Adı:</b><br /><br />
<input type="text" name="kullaniciadi" size="12"><br /><br /><br />
<b>Şifre:</b><br /><br />
<input type="password" name="sifre" size="12"><br /><br /><br />
<input type="submit" name="giris" value="Giriş"><br /><br /><br />
</form><br />
<br />
<form action="giris.asp" method="post" name="giris">
Şimdi formu inceleyelim:<br />
<ul>
<li>name="isim": Form veya bir bölümüne isim vermek için kullanılır. Değerlendirmede bize yardımcı olur.</li>
<li>action="dosya": Form bilgilerinin gönderileceği veya test edileceği dosyadır.</li>
<li>method="post": Hangi şekilde dosyaya gideceğidir.. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.</li>
<li>type="tür": Kullanacağımız form nesnesidir. Burada "text" yazı kutusu, "password" şifre kutusu ve "sumbit" ile gönderme düğmesi oluşturmuş oluruz.</li>
<li>size="boyut": Form nesnelerinin uzunluğunu belirtip sadece "text" ve "password" özelliklerinde kullanılır.</li>
<li>value="deger": Butonda ya da metin kutusunda yazılacak değerler bu kısımda belirtilir.</li>
</ul>
<div>
Bunları öğrendikten sonra örneklere devam edelim. Bir yorum kutusu örneği (Çalışmaz ve sadece örnek önizlemedir):</div>
<div>
<br /></div>
<div>
<form name="yorum" action="yorum.asp" method="post"><br />
<b>Adınız Soyadınız:</b><br /><br />
<input type="text" name="adsoyad" size="24"><br /><br /><br />
<b>Yorum:</b><br /><br />
<textarea  cols="36" rows="4">Yorumunuz...</textarea><br /><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br /><br />
</form></div>
</form>
<form action="yorum.asp" method="post" name="yarum">
Burada "textarea"yı bir "type" değeri içinde kullanmadık. Çünkü bu textarea bir form nesnesi olmayıp sadece içinde kullanılır. Özellikleri:<br />
<br />
<ul>
<li>cols="sutun sayısı"</li>
<li>rows="satır sayısı"</li>
</ul>
<div>
Bunun dışında "textarea" ve kapanma etiketi arasına içinde bulunan değer yazılır. Şimdi sadece bir tanesi seçilebilen radyo düğmeleri yapalım:</div>
<div>
<br />
<b> Öğrenmek İstediğiniz Programlama Çeşidi Nedir: </b><br /><br /></div>
<div>
<input type="radio" name="kod" value="html"> Html <br /></div>
<div>
<input type="radio" name="kod" value="css"> Css <br /></div>
<div>
<div>
<input type="radio" name="kod" value="php"> Php <br /></div>
<div>
<input type="radio" name="kod" value="asp"> Asp <br /></div>
</div>
</form>
Eğer denerseniz sadece bir tanesinin seçilebildiğini görebilirsiniz. Gördüğünüz gibi "type" değerini "radio" olarak verdik. Şimdi birden çok seçilebilen seçenekler oluşturalım:<br />
<br />
<b> Bildiğiniz Programlama Çeşitleri Nelerdir: </b><br /><br /><br />
<input type="checkbox" name="_html" value="html"> Html <br /><br />
<input type="checkbox" name="_css" value="css"> Css <br /><br />
<input type="checkbox" name="_php" value="php"> Php <br /><br />
<input type="checkbox" name="_asp" value="asp"> Asp <br /><br />
<br />
<br />
Denediyseniz birden fazla seçenek seçebiliyorsunuz. Burada da "type" değerini "checkbox" yaptık. Şimdi açılır seçim kutusu yapalım:<br />
<br />
<select name="kodlar"><br />
<option value="html"> Html </option><br />
<option value="css"> Css </option><br />
<option value="php"> Php </option><br />
<div>
<option value="asp"> Asp </option><br />
</select></div>
<div>
<br /></div>
Şimdi ise bambaşka bir seçenek kullandık. Bunu ve diğerlerini "form" tagları arasına koyabiliriz. Bu arada açılır seçim kutusunda ilk değer herzaman ilk olarak gözüken değerdir.<br />
<br />
Bu derslik bu kadar ve form oluşturmayı tam olarak öğrendik. İletişim formu bu bilgi ile oluşturulmaz. Bundan dolayı çalışan form oluşturmak için diğer sitelerden örnekeri inceleyin. Kolay Gelsin. Emek karşılığı ve soruları yorumda belirtin.

Html Eğitimi Ders 7-Form Oluşturma

Html Eğitimi Ders 7-Form Oluşturma

Merhaba, Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu ola...

06:31

Html Eğitimi Ders 6-Listeleme

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Bir önceki derste tablo işlemini görmüştük. Ve şimdi listeleme yapacağız. Çok kolay olucak. Herhangi bir uzatma anlatımı olmayacak. Kolay gelsin.<br />
<h4>
Maddeleme:</h4>
<ul> /*ul madde listeleme etiketidir*/<br />
<li>Html</li>/*li her listede bir bölüm oluşturmak için kullanılır*/<br />
<li>Css</li><br />
<li>Javascript</li><br />
</ul><br />
<div>
<br />
Bunu uyguladığımızda:</div>
<div>
<br /></div>
<ul>
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
</ul>
<div>
Normal bir madde listelemesi yaptık. Bu listeyi artırabilirsiniz.</div>
<h4>
Numaralandırma:</h4>
<div>
<ol>  /*ol numara ile listeleme etiketidir*/<br />
<li>Çay</li><br />
<li>Kahve</li><br />
<li>Kola</li><br />
</ol></div>
<div>
<br /></div>
<div>
Bunu uyguladığımızda:<br />
<div>
   </div>
</div>
<ol>
<li>Çay</li>
<li>Kahve</li>
<li>Kola</li>
</ol>
<div>
Bu sefer kendi kendine sayan bir madde listelemesi gördük. </div>
<h4>
Katagorilendirme:</h4>
<div>
Bu biraz kötü görüntü oluştursada kullanışlıdır.</div>
<div>
<br /></div>
<dl>  /*dl kategori ile listeleme etiketidir*/<br />
<dt>Html</dt> /* ilk kategori*/<br />
<dd>Kolay</dd>/*alt kategori*/<br />
<dd>Önemli</dd>/*alt kategori*/<br />
<div>
</dl></div>
<div>
<br /></div>
<div>
Bunu uyguladığımızda:</div>
<div>
<br /></div>
<dl>
<dt>Html</dt>
<dd>Kolay</dd>
<dd>Önemli</dd>
<dt><br /></dt>
<dt>Gördüğünüz gibi katagorileri kolaylıkla yönetebiliyoruz. Ayrıca değişik bir hava veriyor.</dt>
<dt><br /></dt>
<dt>Bu derslik bu kadar ve diğer sitedeki dersler gibi uzun sıkıcı değil kısa özdür. İnsan zeki olduğundan zaten hemen anlar değil mi? Bir sonraki derste form oluşturma gibi konuları işliyeceğiz. Kolay gelsin.</dt>
</dl>

Html Eğitimi Ders 6-Listeleme

Html Eğitimi Ders 6-Listeleme

Merhaba, Bir önceki derste tablo işlemini görmüştük. Ve şimdi listeleme yapacağız. Çok kolay olucak. Herhangi bir uzatma anlatımı olmayac...

08:19

Html Eğitimi Ders 5-Tablolar

<h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" width="165" /></a>Tablolar</h3>
<div>
Tablolar çok kolaydır. Fakat büyük tabloları ve hücreleri birleştirilmiş tabloları kontrol etmek hiç kolay değildir. Neyse hadi başlayalım.</div>
<div>
<br /></div>
<div>
Tablo açmak için ilk olarak <table> etiketini kullanırız. Her satır için <tr> etiketini her satıra sütun eklemek için <tr> etiketinin içine <td> etiketi koyarız. Örneğin:</div>
<div>
<br /></div>
<div>
<table></div>
<div>
<tr></div>
<div>
<td>1</td></div>
<div>
<td>2</td></div>
<div>
</tr></div>
<div>
<tr></div>
<div>
<td>3</td></div>
<div>
<td>4</td></div>
<div>
</tr></div>
<div>
</table></div>
<div>
<br /></div>
<div>
İlk olarak tablo etiketini açtık. Sonra bir satır oluşturduk. Satırda daha kaç sütun olduğu belli değil. Sonra satıra sütun ekledik. Satırı kapattığımız zaman sütün sayısı belli oldu. Aynı şeyi aşağıyada yapıp tablomuzu bitirdik. Burası kolay kısım. Şimdi gelelim hücre birleştirmeye.</div>
<div>
<br /></div>
<div>
<div>
<table></div>
<div>
      <tr></div>
<div>
         <td colspan="2">1</td></div>
<div>
      </tr></div>
<div>
      <tr></div>
<div>
         <td rowspan="2">2</td></div>
<div>
         <td>3</td></div>
<div>
      </tr></div>
<div>
      <tr></div>
<div>
         <td>4</td></div>
<div>
      </tr></div>
<div>
   </table></div>
</div>
<div>
<br /></div>
<div>
Burada sütunları birleştirmek için "colspan". Satırları birleştirmek için "rowspan" kullandık. Bu özelliklerin hemen yanındaki kaç satırlık ya da sütunluk yer kapladığını gösterir. Örneğin 1. satırda 1 ve 2'yi birleştirmek için, yada onun yerini tutması için 2 sütunluk yer kaplamasını sağladık. Bir adet sağ doğru uzadı diye düşünelim. Sonra satırları alt alta 2 kere birleşsin diye "rowspan"a 2 yazdık. Böylece bir alta kaydı. Fakat başta "colspan" bir sütun sağa kayıp tabloyu uzatmıştı. Bundan dolayı "rowspan" ile bu uzatmaları tek tek tamamlamalıyız. Eğer boyutlarını değiştirmek istiyorsanız "width" ve "height" kullanabilirsiniz. Tablo içindeki yazıları ortalamak veya sağa, sola almak istiyorsanız "aling="center"" özelliğini kullanın. Anlamadığınızı biliyorum. Bunları kod deneme editöründe deneyerek öğrenebilirsiniz. </div>
<div>
<br /></div>
<div>
Bu ders bu kadar. Tabloları anlamak zordu. Sitenize tablolardan ekleyin ve biraz çalışın. Sonraki dersimizde tablo özelliklerini göreceğiz. Kolay gelsin.</div>

Html Eğitimi Ders 5-Tablolar

Html Eğitimi Ders 5-Tablolar

Tablolar Tablolar çok kolaydır. Fakat büyük tabloları ve hücreleri birleştirilmiş tabloları kontrol etmek hiç kolay değildir. Neyse hadi ...

08:12

Html Eğitimi Ders 4-Frame

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" width="165" /></a></div>
<h3>
Frame Nedir?</h3>
Frame Html'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencerelerdir. Çok fazla kullanılmaz. Ama çok işe yarar.<br />
<br />
<h3>
Başlayalım</h3>
<div>
Frame oluşturmak için <frameset> etiketini kullanırız. Frame desteklemeyen tarayıcılar için ayrı bir mesaj <noframes> etiketleri arasına konur. Dikey frame için "cols", yatay frame için "rows" kullanılır. Örneğin bir sayfayı iki bölüme böleceğiz ve birinci bölüm %20, ikinci bölüm %80 dikey yer kaplayacak. (Piksel olarak da verilebilir)</div>
<div>
<br /></div>
<div>
<frameset cols="20%,80%"></div>
<div>
<div>
      <frame src="frame_1.htm"></div>
<div>
      <frame src="frame_2.htm"></div>
<div>
   </frameset></div>
</div>
<div>
<br /></div>
<div>
Dikkat etmemiz gereken "cols" ve "rows"dur. Gerisi çok kolaydır. Eğer "%10,%50,*" diye frame yazarsak 1. frame %10, 2. frame %50, 3. frame kalan yerleri kaplar. Yani "*" işareti kalan yerleri kapla anlamındadır. Eğer "cols" ve "rows"u birlikte kullanacaksak:</div>
<div>
<br /></div>
<div>
<div>
 <frameset rows="75%,25%"></div>
<div>
   <frame src="frame_1.htm"></div>
<div>
      <frameset cols="25%,75%"></div>
<div>
         <frame src="frame_b.htm"></div>
<div>
         <frame src="frame_c.htm"></div>
<div>
      </frameset></div>
<div>
   </frameset></div>
</div>
<div>
<br />
Burada da dikkat etmemiz gereken sıralardır. Frame kendisini sizin yazdığınız sıraya göre ayarlar. Frame fazla kullanmayacağınızdan bunu tam olarak öğrenmenize gerek yok.</div>
<div>
<br /></div>
<h3>
Iframe</h3>
<div>
Başka bir sitedeki frame kendi sitene aldığın zaman ıframe olur. Örneğin aşağıdaki kodu sitenize ekleyin. (<body> ve </body> arasına değil)</div>
<div>
<div>
  </div>
<div>
<iframe src="http://wolderking.blogspot.com" frameborder="1" width="200" height="200" ></iframe><br />
<br />
Gördüğünüz gibi "width" ve "height" kullanarak ıframe'ın boyutunu ayarladık. "frameborder"ı kullanarak kenar genişliğini ayarladık.Diğer ıframe ayarları aşağıdadır.<br />
1.scrolling="no"    Kaydırma çuğuğunu göstermez.<br />
2.noresize="noresize"    "frame src="#" koduna eklenince boyut ayarlama engellenir.<br />
<br />
Bu derslik bu kadar. İsterseniz KodBoy'un iframe'nı sitenize ekleyebilirsiniz. Bir sonraki derste en sevdiğim konu tabloları göreceğiz. Kolay gelsin.<br />
<br /></div>
<div>
   </div>
</div>
<div>
<br /></div>

Html Eğitimi Ders 4-Frame

Html Eğitimi Ders 4-Frame

Frame Nedir? Frame Html'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencerelerdir. Çok fazla kullanılmaz. Ama...

08:10

Html Eğitimi Ders 3-Etiket Özellikleri

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln9bIb9XqInVkLzmeYeZlz2SRm-LuJqBGjQGgVDOdDwm30DtQnyrF2EevMsOJNY1e8kanY9jXLX08YnEskEkXww1Wedx_dMlZxwrA2vsK4XnCGps5Ve91knjgDLN6NVCWva5REgiz3F8/s320/html.jpg" width="165" /></a></div>
<h3>
</h3>
<h3>
Element Özellikleri</h3>
<div>
Element özelliklerinden 1. derste bahsetmiştik. özellik="değer" şeklinde kullanılan bu özellikler siteyi daha kullanışlı hala getirir. Hadi bazılarına göz atalım.</div>
<h3>
<h1></h3>
<div>
<h1 align="center">Yazı</h1> </div>
<div>
Bu özellik başlığın orta, sağ, sol gibi herhangi bir yerde durmasını sağlar. "center" yazan "right","left" de yazılabilir.</div>
<div>
<br /></div>
<div>
<a href="Adres" title="Tıkla">Bağlantı</h1></div>
<div>
Bir başlığa link vermenizi sağlar. "title="Yazı" özelliği mousenin yazı üzerinde bekletildiğinde çıkan yazıyı belirtir. <a> etiketinin de özelliğidir. "Bağlantı" yazan yere Yazı yazılıp "Adres" yazan yere link yazılır.</div>
<div>
<br /></div>
<div>
Hadi bakalım şimdi sitenizin başlığına bir adres verin. Adresi siz belirleyin. Bu arada birde başlığı ortalasanız iyi olabilir.</div>
<div>
<br /></div>
<h3>
<a></h3>
<div>
<a href="Adres" title="Tıkla">Bağlantı</a><br />
<a href="Adres" target="_blank" title="Tıkla">Bağlantı</a></div>
<div>
<h1> etiketinin özelliği gibidir fakat başlığa değil yazıya link verilir. "target=_blank"" sayfayı başka bir sayfada açar. Dikkat. Site adresinin başına "https://" koymayı unutmayın. Yoksa hata verebilir.</div>
<div>
<br /></div>
<div>
<a title="Hey">Burada Bekle</a></div>
<div>
<h1> etiketinin özelliği gibi mouseyi yazı üzerinde bekletince çıkan yazıdır.<br />
<br />
<a name="Wolder King"> WolderKing Eğitim </a><br />
Bu name özelliği kodda bir değişiklik yapmaz ve sadece bizim kodları kolay yazmamızı sağlar. Yani herhangi bir koda isim koyuyormuş gibi düşünün.<br />
<h3>
<body></h3>
</div>
<div>
<body bgcolor="yellow"> <a> Wolder King </a> </body><br />
Sayfaya arka plan rengi eklemeyi sağlar. "yellow" yazan yeri diğer ingilizce renklerle değiştirebilirsiniz. Bu arada sitenize bir arka plan rengi ekleyin.<br />
<br />
Bu ders bu kadar. Sitenizi bu kodlarla geliştirin. Bir sonraki derste frame'i göreceğiz. Zor bir ders olacak. Kolay gelsin.<br />
<br />
<br /></div>

Html Eğitimi Ders 3-Etiket Özellikleri

Html Eğitimi Ders 3-Etiket Özellikleri

Element Özellikleri Element özelliklerinden 1. derste bahsetmiştik. özellik="değer" şeklinde kullanılan bu özellikler sitey...

08:03

Html Eğitimi Ders 1-Başlangıç

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Bugün Html eğitimine başlıyoruz. Kolay ve sıkıcı olsada temel olduğu için önemli bir eğitim. Şimdi ilk önce etiketin ve özelliklerinin ne olduğunu öğrenelim.<br />
<h3>
Etiket</h3>
<div>
Etiketler "<" ve ">" arasında olan anahtarlardır. Bunlar kod yazmanın temelidir. Ve onlar olmazsa olmazdır. Bu etiketleri de kapatmak için baştaki "<" ile anahtar arasına / konur. Örneğin:<br />
<br />
                                             <html> </html><br />
<h3>
Özellik</h3>
<div>
Özellikler etiketlerin sahip oldukları farklı şeyleri kullanmamız içindir. Söz dizimi:</div>
<div>
<br /></div>
<div>
özellik="değer"</div>
<div>
<br /></div>
<div>
şeklindedir. Kullanıma örnek vericek olursak:<br />
<br />
body bgcolor="grey"<br />
<br />
Bir sonraki derste bazı elementleri tanıyıp onlarla çalışacağız. Html sayfa yapısını da kısaca öğreneceğiz.<br />
<br />
<br /></div>
<br /></div>

Html Eğitimi Ders 1-Başlangıç

Html Eğitimi Ders 1-Başlangıç

Merhaba, Bugün Html eğitimine başlıyoruz. Kolay ve sıkıcı olsada temel olduğu için önemli bir eğitim. Şimdi ilk önce etiketin ve özellikl...

06:37

Kaydol: Kayıtlar (Atom)

Wolder King © 2014. All Rights Reserved. Powered by Blogger

Verification: 4ee027a2dd0c4225