HTML Dersleri

TEMEL HTML

Html Dersleri

1)

Tüm kodlar bunun arasında çalışır.

2)

Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

3)
[code] <head></head><body></body> [/code]
Sayfa gövde kısmıdır. Renkler, yazılar vs. burda belirtilir.(Sayfa içindeki herşey)

4) <title></title> etiketi <head> arasında yazılır ve başlık yazmayı sağlar.

5) <body bgcolor=”..”> .. bölümüne renk yazılır. Sayfa arkaplan rengi belirlenir. Örnek(<body bgcolor=”blue”>)

6) <body background=”..”> .. bölümüne resim uzantısı veya adresi yazılır. Örnek(<body background=”doruk.jpg”>)

7) <body text=”..”> .. bölümüne renk yazılır. Bodyde tanımlanacak tüm yazıların rengini ayarlar.Örnek(<body text=”red”>)

8) <br/> komutu yazılar arasında alta geçmeyi sağlar.

9) <hr/> yazılar arasında yatay çizgi çekmeyi sağlar.

10) <hr width=”100″ color=”blue” allign=”left”/> bu kod çizgiyi şekillendirir. width genişliği, color rengi, allign konum belirler.

<<<<<<<<<METİNLER>>>>>>>> (<body></body> Arasında yazılır.)

11) <p/> paragraf başı yapmyaı sağlar.

12) <b></b> etiketi arasında yazılan yazıları kalın yapar.

13) <i></i> arasında yazılanlar italik olacaktır.

————————————————————————————————————————–
NOT: Kodlar birbirleri içinde kullanılabilir. Fakat son açılan kod ilk kapatılmalıdır.Örnek(<i> italik <b> kalın </b> </i>)
————————————————————————————————————————–

14) <u></u> arasına yazılan yazılar altı çizili olacaktır.

15) <s></s> arasına yazılan yazılar üstü çiziki olacaktır.

16) <strong></strong> etiketi <b> ile aynı işlevdedir. Yazıları kalın yapar.

17) <em></em> etiketi <i> ile aynı işlevdedir. Yazıları italik yapar.

18) &nbsp ile boşluk eklenir. Örnek(continuum &nbsp &nbsp &nbsp company) şeklinde.

———————————————————————————————————————————————————-

19) <pre></pre> etiketi arasına yazılan herşey not defterine nasıl yazıldıysa öyle gösterilir.
Örnek(<pre>Continuum         Doruk</pre>) bu kadar boşluk bırakır.

20) <h1>..<h6> etiketleri başlık belirtmek için kullanılır. Boyut ayarlar. <h1> den <h6> ya kadar 1,2,3,4,5,6 vardır. En büyük <h1>,
en küçük <h6> yazar.

21) <blockquote></blockquote> arasına yazılan yazılar biraz içe kayacaktır. Genelde özlü sözler için kullanılır.

22) <font></font> etiketi ;
a) Yazı tipi belirtir b) Yazı büyüklüğü belirtir. c) Yazı rengi belirtir. d) Yazıya stil atanabilir.
<font face=”Arial” size=”5″ color=”red”>CONTİNUUM</font> için face yazı tipini belirtir. size yazı boyutunu belirtir. color yazı rengini
belirtir. Doruk yazısını Arial tipinde, 5 büyüklüğünde (18 punto), kırmızı renkte yazar. Ayrı ayrıda kullanılabilirler.
size=”..” için; .. yerine 1 (7 punto), 2 (10 punto), 3 (12 punto), 4 (14 punto), 5 (18 punto), 6 (24 punto), 7 (36 punto) değerindedir.

23) <basefont size=”..”> etiketi ile .. yerine yazdığınız sayı varsayılan yazı boyutunu ayarlar. Sonra yazdığınız tüm yazılar o boyutta olur.
font etiketine gerek kalmadan tek kodla tüm sayfa için boyut ayarlanabilir. (h etiketleri basefonttan etkilenmez. <h1> gibi.)

<<<<<<<<<<LİNK İŞLEMLERİ>>>>>>>>>>>> (<body></body> Arasında yazılır.)

24) <a></a> etiketi ile link işlemleri yapılır.

25) <a target=_blank href=”adres”target=”hedef tipi”> link yazısı </a> şeklinde yazılabilir. adres bölümüne link verilir. target bölümü sayfanın açılış
tipini belirler. href bölümünde bir web sayfası, projedeki başka bir dosya, herhangi bir dosta ismi, sayfadaki bir alt bölüm veya
mail adresi olabilir.Örnek(<a target=_blank href=”http://www.google.com”> Google’a Git </a>)

26) <a target=_blank href=”anasayfa.html”>ANASAYFA</a> şeklinde sayfa içinde bölümlere link verebiliriz.

27) <a name=”1″> şeklinde anchorlar oluşturabiliriz. Alt bölümler oluşturabiliriz. Sayfa 80-85 arasından bakılabilir.

28) <a target=_blank href=”Blog.rar”> Blog Download </a> şeklinde indirme linki verilebilir.

29) <a target=_blank href=”index.html”target=”..”> ANASAYFA </a> şeklinde bir kod için;
.. yerine “_blank” yazılırsa hedef yeni sekmede açılır.
.. yerine “_parent” yazılırsa eğer o anki açık sayfayı oluşturan bir parent sayfa varsa, hedef sayfada açılır.
.. yerine “_self” yazılırsa hedef aynı sayfada açılır.
.. yerine “_top” yazılırsa bağlantı yine aynı pencerede açılır fakat frameler iptal edilir.

30) <a target=_blank href=”index.html”target=”_blank”title=”Bu link Ana Sayfaya Gider.”> ANASAYFA </a> yazılırsa link üzerine mose imleci geldiğinde
title bölümüne yazılan açıklama gelir.

31) <a target=_blank href=”index.html”target=”_blank”> <img src=”resim/doruk.jpg”> </a> şeklinde resime link verilir. Resimlerin etrafında bir çerçeve
oluşur bu pek istenen bir durum olmadığı için border=”0″ özelliği kullanılır.

32) <body link=”green”vlink=”red”alink=”gray”> etiketinde link ilk halde yeşil renkte olur. Açık olan aktif link(vlink) kırmızı olur.
Ziyaret edilmiş link(alink) de gri olur.

<<<<<<<<<<RESİMLER>>>>>>>>>>>>>>>

Resimleri en çok JPG, GIF, TIFF uzantıları ile kullanırız. Kodlama mantıgına geçelim.

33) <img src=”adres”alt=”alternatif_yazı”/> standart olarak bu şekilde kullanılır. Src özelliğini detaylı açacak olursak. Kendi uzatımızdan
dosya aldığı gibi bir başka internet sayfasındanda resim alabiliriz. Örnek a) <img src=”kedi.JPG”> b) <img src=”resimler/kedi.JPG”>
c) <img src=http://www.siteadi.com/kedi.JPG> gibi kullanılabilir. <img> etiketi resim boyutlarını orjinal halde getirmektedir. Değişiklik
yapmak için width ve height özellikleri kullanılır.
Mesela <img src=”resimler/kedi.JPG”width=”200″height=”180″> yazılırsa 200×180 pixel ayarlanmış olur.

34) alt özelliği ile herhangi bir hatadan dolayı açılamayan bir resim için kullanıcıya mesaj verir.
<img src=”website/kedi.JPG” width=”200″ height=”180″ alt=”Kedi Resmi”/> şeklinde kullanılabilir.

35) title özelliğini linklerdede göstermiştik. Mouse imleci getirildiğinde açıklama yazıyordu.
<img src=”website/kedi.JPG” width=”200″ height=”180″ alt=”Kedi Resmi” title=”Kedi Resmi”/> şeklinde kullanılabilir.

36) Resimler yatay olarak konumlandırılabilir. allign komutu için sağ veya sola kaydırmak için right ve left kullanılır.
<img src=”website/kedi.JPG” width=”200″ height=”180″ alt=”Kedi Resmi” align=”right”/> şeklinde yazılırsa resim sayfanın sağında
gözükür.
Resim ortalanmak istenirse align kullanılmaz. <center></center> etiketi ile yapılabilir.

37) Resimler dikey olarakda konumladırılabilir. Bunun için yine align kullanılır. Align özelliği ile resmin yanında bulunan yazının resme göre
dikey konumunu belirtebilirsiniz. Dikey konumlama için üç değer vardır. Bunlar top, middle ve bottom’dur. Eğer herhangi bir özellik
kullanılmamışsa bottom olarak kabul edilir.
a)top = resmin yanında bir yazı varsa resmin en alt kısmına göre hizalansın.
b)middle = resmin yanında bir yazı varsa resmin ortasına göre hizalansın.
c)bottom = resmin yanında bir yazı varsa resmin en alt kısmına göre hizalansın.

38) Resimlere border özelliği ekleyebilir. Border özelliği resmin etrafına bir çerçeve çizer. border=”5″ ifadesi çerçevenin kalınlığı
5 olacaktır. <img src=”website/kedi.JPG” width=”200″ height=”180″ alt=”Kedi Resmi” border=”5″/>
şeklindedir.

39) Resimlerde hspace ve vspace özellikleride kullanabiliriz. Bunlar resim ve metin arası boşluğu sağlar. Resminizin yanında
yazı varsa daha belirgin halde kullanılması için hspace,vspace kullanabiliriz.
<img src=”website/kedi.JPG” width=”200″ height=”180″ alt=”Kedi Resmi” align=”left” hspace=”20″ vspace=”20″/>
şeklindedir.

<<<<<<<<<<<<<<LİSTELER>>>>>>>>>>>>>>>> (<body></body> içinde yazılır.)

HTML’de liste oluşturmak için <ol> ve <ul> etiketlerini kullanırız.

40) <ol> Ordered List anlamına gelir ve sıralı listeleri oluşturur.

41) <ul> Unordered List anlamına gelir ve sırasız listeleri oluşturur.

42) <li> List Item etiketi liste elemanı oluşturmak için kullanılır.(Her eklenen eleman için bir tane <li> kullanılır.)

Sıralı Listeler Örnek :                                Sırasız Listeler Örnek :
<body>                                                <body>
<ol>                                                     <ul>
<li>Java</li>                                        <li>Java</li>
<li>C#</li>                                          <li>C#</li>
<li>Asp.Net</li>                                  <li>Asp.Net</li>
<li>Php</li>                                         <li>Php</li>
<li>JavaScript</li>                               <li>JavaScript</li>
</ol>                                                    </ul>
</body>                                               </body>

43) Type özelliği ile liste eleman ikonu ayarlanabilir. Sıralı listeler için type=”..” beş değer alır. Örnek(<ol type=I>) gibi.

1 -> 1, 2, 3, 4, 5, …..
A -> A, B, C, D, …..
a -> a, b, c, d, …..
I -> I, II, III, IV, …..
i -> i, ii, iii, iv, …..

(Varsayılan olarak rakamlar sıralama yapılır.)

44) start özelliği ile sıralı listelerde listenin kaçtan başlacağı ayarlanabilir.Örnek: listemizi 10’dan başlatmak istiyorsak start=10 olarak
belirtmeliyiz. Örnek(<ol type=A start=10>) gibi.

45) Type özelliği ile liste eleman ikonu ayarlanabilir. Sırasız listeler için type=”..” üç değer alır. Örnek(<ul type=square>) gibi.

disc -> İçi dolu bir daire.
square -> Kare.
circle -> içi boş bir çember.

(Varsayılan olarak disc kullanılır.)

46) <dl></dl> etiketi ile tanımlı listeler oluşturulur. Sıralı ve sırasızdan farkı ise liste elemanları bir tanım ve bir içerikten
oluşmaktadır.
<dt></dt> etiketi; başlık belirtir.
<dd></dd> etileti; ise içerik belirtir.

47) İç içe listelerde kullanılabilir.

48) Listeler ard arda sıralı linklerde oluşturabilir. ama liste kodumuzun içinde birde <a> etiketimizi kullanmalıyız.
Örnek(<li><a target=_blank href=”http://www.google.com”>Google</a></li>) şeklindedir.

<<<<<<<<<<<<<TABLOLAR>>>>>>>>>>>>>> (<body></body> arasında tanımlanır.)

Tablolar satır ve sütunlardan oluşur. HTML’de tablolar üç etikette tanımlanır :
<table></table> -> Yeni bir tablo tanımlanır.
<tr></tr> -> Yeni bir satır tanımlanır.
<td></td> -> Yeni bir sütun tanımlanır.

49) <table></table> kodları ile bir tablo tanımlıyoruz. Örnek(<table> Continuum 2012 </table>) şeklindedir.

50) Border özelliğini tabloda kullanmak, yani çerçeve oluşturmak için. Örnek(<table border=2> Continuum 2012 </table>) şeklindedir.

51) <tr></tr> etiketi ile satır belirtiriz. <td></td> ile sütun belirtiriz. İkisi birden kullanılmadığı sürece tablo oluşmaz. Bunlar
tanımladığımız <table></table> etiketleri arasında yazılmalıdır.

Örnek :
<table border=2>
<tr>
<td>1. Satır , 1.Sütun</td>
<td>1. Satır , 2.Sütun</td>
</tr>
<tr>
<td>2.Satır , 1.Sütun</td>
<td>2.Satır , 1.Sütun</td>
</tr>
<tr>
<td>3.Satır , 1.Sütun</td>
<td>3.Satır , 2.Sütun</td>
</tr>
</table>

52) <th></th> etiketleri sütun başlığı belirtmek için kullanılır. (<th> belirtirken, <tr> veya <td> belirtmek gerekmez.)
Örnek:
<table border=2>
<th>Continuum</th>
<th>Company</th>
<tr>
<td>Doruk</td>
<td>Uğur</td>
</tr>
</table>

53) <thead></thead> etiketi ile tablomuz için başlık oluşturabiliriz.(<table></table> etiketi içinde kullanılır.)

54) colspan özelliği ile sütunları birleştirebiliriz. Örnek(<td colspan=2>Burası 2 kolondan oluşur</td>) şeklinde.

55) rowspan özelliği ile satırları birleştirebiliriz. Örnek(<td rowspan=2>Burası 2 satırdan oluşur</td>) şeklinde.

56) width, height özelliklerinide kullanırız. Tablo genişlik ve yüksekliği ayarlayabilmek için sayısal veya yüzdelik olarak ayarlama
yaparız. Yüzdelik ayarlamalarda sayfanın oranına göre yüzdeleyebiliriz. Örnek(<table border=”1″width=”50%”height=”50%”>) şeklinde.

57) width, height özelliği kullanarak hücre genişlik ve yüksekliği de ayarlayabilirsiniz. Örnek(<td width=”10″height=”20″>Doruk UĞUR</td>)

58) bgcolor özelliği ile tablonun arkaplan rengini belirleyebiliriz. Örnek(<table border=”1″bgcolor=”yellow”>)

59) bgcolor ile her hücreye farklı renkte verilebilir. Örnek(<td bgcolor=”gray”>1.satır,1.sutün</td>)

60) background özelliği ile tablonun arkaplan resmi ayarlanabiliriz. Örnek(<table border=”1″width=500 height=300 background=”resim.JPG”>)

61) background özelliği ile her hücre içinde resim ayarlanabilir. Örnek(<td background=”resim.JPG”>1.satır,1.sutün</td>)

62) cellpadding özelliği ile hücre kenarları ile yazı arası uzaklık belirlenebilir. Örnek(<table border=2 cellpadding=30>)

63) cellspacing özelliği ile hücre çerçeveleri arasındaki uzaklık belirlenebilir. Örnek(<table border=2 cellspacing=30>)

64) align özelliği ile tablonun konumu belirlenebilir. left, right ve center değerlerini alır. Örnek(<table border=1 align=center>)

65) valign özelliği ile hücre içindeki yazının dikey konumu belirlenebilir. top,middle,bottom değerlerini alır.Örnek(<td valign=top>Doruk UĞUR</td>)

<<<<<<<<<FRAMELER>>>>>>>>>>>

66) frame yapısı kullanmak için <frameset></frameset> etiketi kullanılır ve her bir frame <frame> etiketi ile <frameset> içinde tanımlanır.

67) <frameset></frameset> yapının ana etiketidir. <head> ve <html> etiketleri arasında kullanılır. Framelere ait satır ve sütun uzunlukları
içerir. Her <frame> etiketi <frameset></frameset> etiketleri arasında tanımlanmak zorundadır. Eğer bir web sayfasında <frameset> etiketi
kullanılıyorsa o web sayfasında body etiketi bulunmaz.

68) cols ve rows özelliği ile gösterilecek olan sayfaların satır ve sütun uzunlukları belirtilir. Eğer cols özelliği kullanılırsa
frame’ler sütunlar halinde gösterilir. Eğer rows özelliği kullanılısa frame’ler satırlar halinde gösterilir.

69) cols ve rows özellikleri için üç tip değer belirtilebilir. Bu değerler her frame için virgülle ayrılır.
1.Rakam : Rakam belirttiğiniz zaman, o frame için tam bir boyut değeri vermiş olursunuz. (cols= 200,200,200)
2.Rakam : * karakteri ise geriye kalan genişlik anlamındadır. (cols=200,200,*)
3.Rakam : % karakteri ile yüzdesel ifade belirtebilirsiniz. (cols=30%,200,*)

70) <frame></frame> etiketi ile gösterilecek olan sayfalar belirtilir. <frameset> etiketi içinde kullanılır ve her bir sayfa için bir
tane <frame> etiketi kullanılır. <frame> etiketinin temel kullanım şekli şöyledir. <frame name=”frame1″ src=”sayfa1.html”>
Burada name=”frame1″ bölümünde fame ismi, src=”sayfa1.html” bölümünde gösterilecek olan sayfa belirtilmiştir. Birde eğer sayfa içinde
navigasyon kullanacaksak name özelliğini belirtmemiz gerekir. Çünkü frame içindeki sayfaya link vermek için sayfa ismi değil frame
ismi kullanılır.

71) Herhangi bir linkin gideceği sayfayı frame içinde göstermek istiyorsak, target özelliğinde frame adı kullanılır.
(<a target=_blank href=”sayfa ismi” target=”frame ismi”> </a>)

72) frameset özelliklerinden border özelliği ile frame’ler arasındaki çerçeve kalınlığı belirtilir. (<frameset rows=”100,*” border=10>)
Çerçeveyi renklendirmek içinse bordercolor özelliği kullanılır. (<frameset rows=”100,*” border=10 bordercolor=red>)

Not: çerçevesiz sabit bir görüntü için border=0 değeri atanır.

73) <noframes></noframes> etiketi ile frame yapısını desteklemeyen web tarayıcıları veya herhangi bir sebepten dolayı frame’lerin
görüntülenememesi gibi durumlarda frame desteklenmiyorsa kullanıcıya gösterilmek istenen mesaj yazılabilir. <noframes> etiketi
<frameset> içinde tanımlanır.

74) frame’lerde norasize özelliği kullanılırsa frame sabit hale gelir. Çerçevesi konumlandırılamaz.
(<frame name=”anasayfa” src=”anasayfa.html” noresize>)

75) scrolling özelliği ile sayfanın kenarında bulunan kaydırma çubuğunu kaldırabilirsiniz. yes ve no değerlerini alır. no değeri
verirseniz kaydırma çubuğu ortadan kalkar.

76) Tablolardaki gibi frame’lerdede iç içe kullanım yapılabilir. Bu yapı bize kolaylık sağlamaktadır.

77) <iframe></iframe> etiketi ile sayfa içinde istediğiniz herhangi bir yerde başka bir sayfayı görüntülemenizi sağlar.
(<iframe name=”ic_frame” src=”sayfa2.html” height=200 width=300></iframe>)

<<<<<<<<<FORMLAR>>>>>>>>>>>

Bütün form elemanları <form></form> etiketi arasında tanımlanır. <form> etiketine ait iki özellik bulunur. Bunlar; method ve Action
özellikleridir.

Method özelliği : Bu özellik form elemanlarını nasıl gönderileceğini belirtir. İki değer alır: Bunlar; Post ve Get değerleridir.

1.) Post : Form elemanları gönderilirken url içinde gösterilmez.
2.) Get : Form elemanları gönderilirken url içinde gösterilir.
Get metodunda form elemanları url içinde gösterileceği için güvenlik açısından pek kullanılmaz. Formlarda daima Post metodunu kullancaz.

—————————————————————-

Action özelliği : Bu özellik ile formdaki elemanlara uygulayacağımız işlemi belirleyeceğiz. Action özelliği de iki değer alır.

1.) mailto : mailto özelliği kullanıldığında formdaki elemanlar belirtilen mail adresine göderilir.
2.) URL : url ise herhangi bir web sayfasının ismi olabilir. Bu değer ile formdaki elemanlar belirtilen web sayfasına gönderilir. Değişkenlere
aktarılıp kullanılabilir.

—————————————————————-

Form Elemanları : Form elemanları <form></form> etiketi arasında tanımlanır. Form içinde veri girişi veya verileri göndermek için kullanılır.
Form elemanı tanımlanırken <input type=”eleman_tipi”> etiketi kullanılır. Type özelliği ile form eklenecek olan elemanın tipi belirlenir.
Bu bir Textbox, Button, Checkbox, Radiobutton vs. gibi elemanlar olabilir.

1) Textbox Elemanı : Formlarda kullanıcıdan veri girişi almak için kullanılır. <input typr=”text”> etiketiyle tanımlanır.
<input type=”text” name=”textbox1″/> şeklinde. size özelliği ile Textbox’ın genişliği belirlenebilir. maxlenght özelliği ile
Textbox’a girilecek maksimum karakter sayısı belirlenebilir. value özelliği ile Textbox’a varsayılan bir değer atanabilir. Bu değer
sayfa ilk yüklendiğinde Textbox içinde görülen değerdir ve kullanıcı değiştirmedikce Textbox içinde bu değer kalır.

2) Password Elemanı : Bu etiket ile şifreli girişler için maskelenmiş Textbox kullanabilirsiniz. <input type=”password” name=”sifre”/>

3) Textarea Elemanı : Textarea elemanı ile daha geniş çağlı yazıları sayfamızda gösterebiliriz. Bu eleman normal Textbox elemanının
genişletilmiş halidir. Bu eleman <textarea></textarea> etiketleri arasında tanımlanır.  cols ve rows özellikleri ile Textarea elemanının
genişliği ve yüksekliği satır ve karakter sayısı cinsinden belirlenir. Yani elemanın kaç satır ve her bir satırın kaç karakter genişliğinde
olduğunu belirtebilirsiniz. <textarea name=”text1″ rows=10 cols=30> şeklinde. wrap özelliği ile Textarea içindeki yazının otomatik alt
satıra geçip geçmeyeceğini belirtebilirsiniz. wrap özelliği 3 değer alır.
a) soft : Varsayılan değer budur. Yazılar sadece Textarea içinde kaydırılır. Fakat form bazında bu işlem yapılmaz.
b) hard : Yazılar hem Textarea hemde form bazında kaydırılır.
c) off : wrap işlemi kapatılır. Bu özellik kullanıldığında alt tarafta kaydırma çubuğu oluşur. Çünkü yazının yatay olarak tümünü
göremeyebiliriz.

readonly özelliği ile normalde Textarea içinde yazdığınız yazıları kullanıcı silebilmektedir. Hatta bu yazılara yeni yazılar ekleyebilmektedir.
Bazı durumlarda Textarea içinde yazan yazının sadece okunabilir olmasını istiyorsanız; readonly özelliği kullanılır. Bu özellik sayesinde
kullanıcı Textarea içindeki yazılar üzerinde ekleme, silme gibi işlemler yapamaz. <textarea name=”text1″ rows=10 cols=40 readonly> </textarea>

4) Checkbox Elemanı : Belli seçenekler arasından bir veya birkaçını seçmek için kullanılan yapıdır. Bir form doldururken kullanıcıdan
çeşitli seçenekleri işaretlemesini istiyorsanız. Checkbox kullanmalısınız. Örneğin; kullanıcının hangi programlama dilleri bildiğini
öğrenmek iöin bunları Checkbox ile gösterip, kullanıcının seçim yapmasını sağlayabiliriz. Temel anlamda Checkbox oluşturmak için
(<input type=”checkbox”/> Gösterilecek yazı) kodu kullanılır. value özelliği ile numara değeri veririz. Web programlama dillerinde
bu numaralara bakarak işlem gerçekleşir. Birde aynı grup altında değerlendirdiğimiz Checkbox’lar için aynı ismi belirtmemiz gerekir.
Bu ismi name özelliği ile belirtiriz. (<input type=”checkbox” name=”p_dil” value=”1″/>Java) gibi. checked özelliği ile form yüklenirken
varsayılan olarak işaretli olmasını istediğimiz seçenekleri belirtebiliriz.
(<input type=”checkbox” name=”p_dil” value=”1″ checked/>Java) gibi.

5) Radio Elemanı : Form içinde kullanıcıdan tek bir seçim yapılması isteniyorsa Radio elemanı kullanılır. Checkbox gibi value özelliği
ile işaretlenen seçeneği öğrenebilirsiniz. Checkbox’tan farkı ise, aynı anda sadece 1 tane seçebilmektir.
(<input type=”radio” name=”grup_ismi” value=”deger”/>) gibi. Radi elemanları arasında tek seçim yapılması isteniyorsa, bu elemanlar
bir grup altında toplanmalıdır. Radio elemanları arasında grup oluşturmak için de name özelliği kullanılır. Gruplanmak istenen Radio
elemanlarının name özelliklerine aynı değer verilir. Radio elemanları için mutlaka bir name değeri belirtilemelidir. Aksi takdirde
hiç bir seçim yapılamayacaktır. checked özelliği checkbox’da olduğu gibi, bu özellik ile form yüklenirken varsayılan
olarak işaretli olmasını istediğiniz seçenekleri belirtebilirsiniz. (<input type=”radio” name=”grup_ismi” value=”deger” checked/>) gibi.

6) Select Elemanı : Form içinde açılan bir liste kullanmak için bu eleman kullanılır. Açılan listeden tek bir tane değer seçilebilir.
Özellikle çok fazla seçeneğe sahip bölümler için kullanılır. Çünkü bu seçenekler form içinde göstermek aşırı yer kaybına sebep olur.
Bunu engellemek için tüm seçenekler bir liste içinde saklanır ve tıklandığı zaman liste açılır. Listeler <select></select> etiketi ile
tanımlanır. Listeye bir isim vermek için name özelliği kullanılır. Bu özellik ile daha sonra listemizdeki değerleri programsal olarak
elde edebiliriz. Liste elemanları ise <option></option> etiketi ile tanımlanır ve her bir Option elemanı için value değeri tanımlanır.
Bu değer liste elemanlarının değerini belirtir.

Örnek :
<select name=”liste”>
<option value=”1″>Birinci Eleman</option>
<option value=”2″>İkinci Eleman</option>
<option value=”3″>Üçüncü Eleman</option>
</secelt>

selected özelliği ile form yüklendiğinde ekrana herhangi birinin seçili gelmesini istiyorsak bu özelliği kullanırız.
(<option value=”3″ selected>Üçüncü Eleman</option>) şeklindedir. size özelliği ile liste elemanlarının kaç tanesinin görüntüleneceğini
belirleyebiliriz. Varsayılan olarak 1 değerini alır. Bu değeri değiştirerek gösterilecek eleman satısını değiştirebiliriz. Tabi bu durumda
açılır liste özelliğini kaybedecektir. Sabir bir Listbox haline gelecektir. <optgroup> etiketi ile liste içinde gruplar oluşturabiliriz.
Gruplar <optgroup></optgroup> etiketleri arasında tanımlanır. Etikete ait Label özelliği ise grup için başlık tanımlar.
(<optgroup label=”programlama”> <option value=”1″> C# </option> </optgroup>) şeklindedir.

7) Submit Elemanı : Formlarda girilen verileri servera aktarmak için gerekli olan olayı tetikleyen elemandır. Button elemanı ile sayfa
üzerinde çeşitli işlemler yapabilirsiniz. Bu elemanın arka tarafında client veya server tabanlı kodlar yazabilirsiniz. Button tanımlamak
için <input type=”submit”> etiketi kullanılır. Button’un üzerindeki yazı value özelliği ile atanır.
(<input type=”submit” value=”button_yazisi”/>) şeklindedir.

8) Reset Elemanı : Reset butonu ile forma girilen veriler temizlenir. Bunun için ekstra bir kod yazmak gerekmez.
<input type=”reset” value=”button_yazisi”/> şeklindedir.

9) Fileupload Elemanı : Bu eleman ile bilgisayardaki herhangi bir dosyayı forma ekleyebilirsiniz. Eklediğiniz dosyayı isterseniz web
server’da saklayabilirsiniz. örneğin; resim yükleme siteleri, dosya paylaşım siteleri vs. bu gibi sistemlerde fileupload kontrolü kullanılır.
<input type=”file” name=”dosya”/> şeklindedir.

<<<<<<<<<<–||HTML5||–>>>>>>>>>>

1) <canvas> etiketi ile sayfada bir çizim alanı oluşturur. İlgili alana JavaScript kullanarak çizim yapılabilir.

2) <audio> etiketi ile sayfada ses oynatmak için bir alan oluşturur.

3) <video> etiketi ile sayfada video oynatmak için bir alan oluşturur.

4) <progress> etiketi ile sayfaya işlem süreci göstergesi eklenir.

5) <header> etiketi ile başlık ve açıklama bölümü eklenir.

6) <nav> etiketi ile navigasyon bölümü oluşturulur.

7) <footer> etiketi ile alt bilgi bölümü oluşturulur.

HTML5 için Dtd tanımlaması <!DOCTYPE html> olaraktır. Sayfanın başına bu eklendiğinde sayfanın bir HTML5 sayfası olduğu
belirtilmiş olur.

1.) <canvas> Elementi : Bu element sayfa üzerinde bir çizim tuvali oluşturur. Bunun üzerine şekiller, resimler, grafikler
çizilebilir. <canvas> elementi tek başına çizim için yeterli değildir. <canvas> üzerine çizim yapabilmek için JavaScript kullanılır.
HTML içinde tanımladığımız canvas’ın Havascript ile kullanılabilmesi için canvas’a bir id değeri veriyoruz. Bu id değeri ile javascript
içinde canvas elementini görüp üzerinde işlem yapabiliyoruz.

JavaScript :
var canvas=document.getElementByld(“bizim_canvas”);

HTML5 :

<canvas id=”bizim_canvas” width=”300″ height=”200″></canvas>

Canvas elementine ait içeriği belirtmek için getContext(contextId) metodu kullanılır.

var ctx=canvas.getContext(“2d”);

Canvas için 2D contx belirtiyoruz. HTML5 canvas için henüz 3D contex desteklememektedir.

2.) <video> Elementi : Bu element ile herhangi external bir object kullanmadan direk HTML içinde video oynatabiliriz.
<video src=”video.ogg”width=”300″height=”150″> gibi. controls özelliği ile video butonlarını görüntüleyebiliriz.
<video src=”video.ogg”width=”300″height=”150″ controls> şeklinde.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir