Serdar YILMAZ
Bizimkisi Bir “Bug” Hikayesi...
Serdivan/Sakarya

Arşiv 'HTML' Kategori

<input type=”checkbox” /> Elemanı

Kod

<p>Hangi Programlama Dillerini Biliyorsunuz ?</p>
<input type="checkbox" name="dil" value="1" checked /> C#  <br/>  
<input type="checkbox" name="dil" value="2" /> Java <br/>  
<input type="checkbox" name="dil" value="3" /> Visual Basic <br/>
<input type="checkbox" name="dil" value="4" /> C++ <br/>
<input type="checkbox" name="dil" value="5" /> Python

Açıklama

  1. Belli seçeneklerden bir veya birkaçını seçmek için kullanılan yapıdır.
  2. Aynı grup altından değerlendirdiğimiz checkbox’lar için aynı name‘i belirtmemiz gerekir. Yukarıda ki örnekte yer alan seçenekler aynı soruyu yanıtlamak üzere eklendiği için name’leri aynıdır.
  3. Kullanıcının hangi seçenekleri seçtiğini value değerini kontrol ederek anlayabiliriz. Bu işlemi programlama dilleri ile yapmaktayız.
  4. Form yüklenirken varsayılan olarak işaretli olmasını istediğimiz seçeneklere checked özelliğini eklemeliyiz.

<textarea> … </textarea> Elemanı

Kod

<!-- Ziyaretçi Tarafından metin girişi yapılabilir. -->
<textarea name="metin_kutusu_1" rows="10" cols="30" wrap="soft"> Metin </textarea>

<!-- Ziyaretçi tarafından metin girişi yapılamaz. Sadece okunabilir. -->
<textarea name="metin_kutusu_1" rows="10" cols="30" wrap="soft" readonly> Metin </textarea>

Açıklama

  1. Textarea elemanı daha uzun metinlerin yazılabildiği veya görüntülenebildiği gelişmiş bir metin kutusudur. <input type=”text” /> Elemanının gelişmiş hali olarak düşünebiliriz.
  2. rows özelliği ile metin kutusunun yüksekliğinin kaç satırdan oluşacağını belirtebiliriz.
  3. cols özelliği ile metin kutusunun kaç karakterlik genişliğe sahip olacağını belirtebiliriz.
  4. wrap özelliği ile metin kutusuna sığmayan yazıların bir satıra geçmesini sağlayabiliriz. 3 farklı değer almaktadır;
    wrap=”soft” ifadesi ile metin kutusuna sığmayan yazıların bir alt satıra geçmesini sağlayabiliriz. Form bazında bu işlem yapılmaz.
    wrap=”hard” ifadesiyle de metin kutusuna sığmayan yazıların bir alt satıra geçmesini sağlayabiliriz. Ancak Form bazında da bu işlem yapılır.
    wrap=”off” ifadesini kullanırsak metin kutusuna sığmayan yazılar bir alt satıra geçmez. Textarea’nın altında bir kaydırma çubuğu oluşur ve yazının devamı o kaydırma çubuğu kullanılarak görüntülenir.
  5. Textarea içerisinde ki yazılar normalde silinebilir veya yeni yazılar eklenebilir. Yazıların sadece okunabilir olmasını ve herhangi bir şekilde yazıda değişiklik yapılmamasını istiyorsak readonly özelliğini kullanmamız gerekir.

<input type=”text” /> Elemanı

Kod

<input type="text" name="textbox1" size="15" maxlenght="8" value="Kullanıcı Adı" />

Açıklama

  1. Formda kullanıcının veri (metin,sayı veya karakter) girişi yapabileceği bir alan oluşturur.
  2. Eğer type özelliğine “text” yerine “password” girersek, klavyeden gireceğimiz ifadeler maskelenecektir.
  3. size özelliği ile metin kutusunun genişliğini ayarlayabiliriz. (Yatay Uzunluk)
  4. maxlenght özelliği ile metin kutusuna girilebilecek maksimum karakter sayısını belirtebiliriz.
  5. value özelliği ile sayfa yüklenir yüklenmez metin kutusu içerisinde gözükecek varsayılan metni belirtebiliriz.

Form Oluşturma

Kod

<form method="post" action ="form_gonder.php">
    <table>
        <tr>
            <td colspan="2"> Kullanıcı Girişi </td>
        </tr>
        <tr>
            <td> Kullanıcı Adı: </td>
            <td> <input type="text" name="kullanici_adi" /> </td>
        </tr>
        <tr>
            <td> Şifre: </td>
            <td> <input type="password" name="sifre" /> </td>
        </tr>
        <tr>
            <td colspan="2"> <input type="submit" value="Giriş Yap" > </td>
        </tr>
    </table>
</form>

Açıklama

  1. Form yapısını kullanarak kullanıcıdan aldığımız bilgileri sunucu tarafına gönderebiliriz.
  2. Kullanıcıdan bilgileri alabilmek için Form Elemanları kullanılmaktadır. Bu içeriğimiz de sadece temel form yapısından bahsedeceğiz. Form elemanlarını ise ayrı bir içerikte ele alacağız.
  3. method özelliği ile form elemanlarından alınan bilgilerin nasıl gönderileceğini belirtiyoruz. İki değer almaktadır;
    post Değeri
    Form elemanları ile alınan bilgiler gönderilirken URL’de gösterilmez.
    get Değeri
    Form elemanları ile alınan bilgiler gönderilirken URL’de gösterilir. Bu yüzde pek tercih edilmez.
  4. action özelliği ile form elemanlarından alınan bilgilerin nereye gönderileceğini belirtiyoruz. İki değer almaktadır;
    action =”mailto:iletisim@srdrylmz.com”
    Form elemanlarından alınan bilgiler belirtilen mail adresine gönderilecektir.
    action =”form_gonder.php”
    Form elemanlarından alınan bilgiler belirtilen adrese gönderilecektir.
  5. Form yapısı ile sadece kullanıcıların veri girişi yapabileceği alanları oluşturabiliriz. Alınan bilgileri veritabanına kaydetmek veya herhangi bir işleme tabi tutabilmek için programlama dillerini kullanmalıyız.

Tablo Oluşturma

Kod

<table>
    <thead> Dünyanın En Zengin 3 İnsanı </thead>
    <th> İsmi </th>
    <th> Mesleği </th>
    <tr>
        <td> Bill Gates </td>
        <td> Microsoft'un Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Ellison </td>
        <td> Oracle'ın Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Page </td>
        <td> Google'un Kurucu Ortağı </td>
    </tr>
    <tr>
        <td colspan="2">Bu veriler 2014 yılına aittir.</td>
    </tr>
</table>
<table border="0" width="50%" height="50%" background="tablo.jpg" cellpadding="30" cellspacing="30" align="center">
    <thead> Dünyanın En Zengin 3 İnsanı </thead>
    <th bgcolor="red"> İsmi </th>
    <th bgcolor="yellow"> Mesleği </th>
    <tr>
        <td> Bill Gates </td>
        <td> Microsoft'un Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Ellison </td>
        <td> Oracle'ın Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Page </td>
        <td> Google'un Kurucu Ortağı </td>
    </tr>
    <tr>
        <td colspan="2">Bu veriler 2014 yılına aittir.</td>
    </tr>
</table>

Açıklama

Basit Kullanım

  1. <thead> … </thead> etiketi tablo başlığını belirtmek amacıyla kullanılmaktadır.
  2. <th> … </th> etiketi sütun başlıklarını belirtmek amacıyla kullanılmaktadır.
  3. <tr> … </tr> etiketi yeni bir satır oluşturmak amacıyla kullanılmaktadır.
  4. <td> … </td> etiketi yeni bir sütun oluşturmak amacıyla kullanılmaktadır.
  5. colspan özelliği kullanılarak sütunlar birleştirilebilir. Yukarıdaki örnekte iki sütun birleştirilerek yeni bir sütun oluşturulmuştur.
  6. colspan özelliği yerine rowspan özelliği kullanılarak bir sütunun kaç satırın birleşiminden oluşacağı da ayarlanabilir.

Özelleştirilmiş Kullanım

  1. border özelliği ile tablonun çerçeve kalınlığını ayarlayabiliriz. Eğer “0” yazarsak tablo çerçevesiz olacaktır.
  2. width ve height özellikleri ile tablonun genişliğini ve yüksekliğini ayarlayabiliriz. Sayısal değerler verebileceğimiz gibi yüzdelik değerler vererek tablonun genişliğini ve yüksekliğini, tablonun bulunduğu sayfanın genişlik ve yükseklik değerlerine göre ölçeklendirebiliriz. Yukarıdaki örnekte tablo, sayfanın genişliğinin yarısı kadar bir genişliğe, sayfanın yüksekliğinin yarısı kadar bir yüksekliğe sahip olacaktır.
  3. background özelliği ile tablonun arkaplanına bir resim yerleştirebiliriz.
  4. cellpadding özelliği ile hücre çerçeveleri ile yazılar arasındaki mesafeyi ayarlayabiliriz.
  5. cellspacing özelliği ile hücre çerçeveleri arasındaki mesafeyi ayarlayabiliriz.
  6. align özelliği ile tablonun konumunu belirtebiliriz.
    center (Ortala) || left (Sola daya) || right (Sağa daya)
  7. valign özelliği ile hücre içerisindeki yazının dikey konumunu belirtebiliriz.
    top (Yukarı daya) || middle (Ortala) || bottop (Aşağı daya)
  8. bgcolor özelliği ile özelliğin kullanıldığı etiketin arkaplan rengini değiştirebiliriz.
    <tr bgcolor=”red”> (İlgili satırın arkaplan rengini kırmızı yapar.)
    <td bgcolor=”red”> (İlgili sütunun arkaplan rengini kırmızı yapar.)
    <table bgcolor=”red”> (Tablonun arkaplan rengini kırmızı yapar.

İç İçe Listeler

Kod

<ol>
	<li> İttifak Devletleri 
		<ul>
			<li> Alman İmparatorluğu </li>
			<li> Avusturya-Macaristan </li>
			<li> Osmanlı İmparatorluğu </li>
			<li> Bulgaristan </li>
		</ul>
	</li>
	
	<li> İtilaf Devletleri <br/>
		<ul>
			<li> Fransa </li>
			<li> Britanya İmparatorluğu </li>
			<li> Rusya </li>
			<li> İtalya </li>
			<li> ABD </li>
			<li> Romanya </li>
			<li> Yunanistan </li>
		</ul>
	</li>
</ol>

Açıklama

  1. Listeler başlığı altında öğrenmiş olduğumuz liste türlerini içi içe kullanabiliriz.
  2. Yukarıda yer alan örnek kod incelenecek olursa; <ol> etiketi ile sıralı bir liste oluşturmuş ve bu listenin elemanlarının altına sırasız bir liste oluşturularak başka elemanlar eklenmiştir.

Tanımlı Listeler

Kod

<dl>                                                                                    
	<dt> İttifak Devletleri </dt>                           
		<dd> Osmanlı İmparatorluğu </dd>                                                                 
		<dd> Bulgaristan </dd>        
		<dd> Alman İmparatorluğu </dd>   
		<dd> Avusturya-Macaristan </dd>   
		
	<dt> İtilaf Devletleri </dt>
		<dd> Fransa </dd>
		<dd> Britanya İmparatorluğu </dd>
		<dd> Rusya </dd>
		<dd> İtalya </dd>
		<dd> ABD </dd>
		<dd> Romanya </dd>
		<dd> Sırbistan </dd>
		<dd> Yunanistan </dd>	
</dl>

Açıklama

  1. Tanımlı listeler; başlık ve o başlıkların altında yer alan içeriklerden oluşur.
  2. <dt> … </dt> etiketi ile başlıklar, <dd> … </dd> etiketi ile de başlıklara ait içerikler belirtilmektedir.

Sırasız Listeler

Kod

<ul type="square">
	<li> HTML </li>
	<li> CSS </li> 
	<li> JavaScript </li>
	<li> jQuery </li>
</ul>

Açıklama

  1. Sırasız listeler oluşturmak için <ul> etiketi kullanılır ve eklenecek her liste elemanı <li> … </li> etiketi içerisine yazılır.
  2. type özelliği ile liste elemanlarının madde işaretini belirtiyoruz.
    type=”disc”  (İçi dolu daire) || type=”circle”  (İçi boş çember) || type=”square”  (Kare)

Sıralı Listeler

Kod

<ol type="1" start="10">
	<li> HTML </li>
	<li> CSS </li> 
	<li> JavaScript </li>
	<li> jQuery </li>
</ol>

Açıklama

  1. Sıralı listeler oluşturmak için <ol> etiketi kullanılır ve eklenecek her liste elemanı <li> … </li> etiketi içerisine yazılır.
  2. type özelliği ile sıralamanın ne şekilde yapılacağını belirtiyoruz.
    type=”1″   (Sayısal sıralama)
    type=”A”  (Büyük harflerle sıralama)
    type=”a”   (Küçük harflerle sıralama)
    type=”I”    (Büyük harflerle gösterilen roma rakamlarıyla sıralama)
    type=”i”    (Küçük harflerle gösterilen roma rakamlarıyla sıralama)
  3. start özelliği ile sıralamaya kaçtan başlanacağını belirtiyoruz.  start=”10″ dediğimiz taktirde sıralamaya 10’dan başlanacaktır.

Image Map

Kod

<map name="harita">
 <area snape="rect" coords="11,22,174,65" href="hayvan_resimleri.html" />
 <area snape="rect" coords="20,50,180,80" href="bitki_resimleri.html" />
</map>

<img scr="map_resmi.jpg" usemap="#harita" />
<!-- map.html Sayfası -->
<map name="harita">
 <area snape="rect" coords="11,22,174,65" href="hayvan_resimleri.html" />
 <area snape="rect" coords="20,50,180,80" href="bitki_resimleri.html" />
</map>

<!-- index.html Sayfası -->
<img scr="map_resmi.jpg" usemap="map.html#harita" />

Açıklama

  1. Bir resmin farklı bölgelerine tıklanıldığında farklı adreslere gidilmesi isteniyorsa resim için bir map oluşturulur. Oluşturulan mapte link verilmek istenen bölgelerin koordinatları bulunur ve o koordinatlara tıklanıldığında gidilecek adres belirtilir.
  2. Yukarıdaki örneğimizde “harita” isimli bir map oluşturduk.
  3. snape özelliği ile resmi hangi geometrik şekilde parçalara ayıracağımızı belirtiyoruz.
    rect değeri ile resmi dikdörtgen şekilde bölgelere/parçalara ayırtmak istediğimizi belirttik.
  4. coords özelliğine resmin ilgili bölgesinin koordinatlarını giriyoruz.
  5. href özelliğine koordinatları belirtilmiş olan bölgeye tıklanıldığında gidilecek adresi yazıyoruz.
  6. Son olarak img etiketinin usemap özelliğine oluşturduğumuz Map’in adını girerek, map ile resmi ilişkilendirmiş oluyoruz.
    Kullanım 1: Map ile resim aynı html sayfası içerisinde yer alıyorsa, img etiketinin usemap özelliğine direk Map’in adı yazılır. (usemap=”#harita”)
    Kullanım 2: Map ve resim farklı html sayfalarında yer alıyorsa, img etiketinin usemap özelliğine önce Map’in bulunduğu sayfa sonrada Map’in adı yazılır. (usemap=”map.html#harita”)

Resmin Herhangi Bir Bölgesinin Koordinatlarını Bulma 

Aşağıdaki resim üzerinde yer alan “AUDI”,”BMW” ve “FORD” alanlarına link verebilmek için koordinatlarını bulmamız gerek. Koordinatlarını bulmak istediğimiz dikdörtgen şeklinde ki alanın ilk köşesine imleci getirip kırmızı ok ile gösterilen yerde ki yatay ve düşey değerlerini alıp sonra ilk köşenin çaprazında yer alan diğer köşenin da yatay ve düşey değerlerini alarak coords özelliğine yazılacak değeri bulabiliriz.

dfd