HTML Bu sunu PowerPoint'in yeni yeteneklerini gösterir ve en iyi Slayt Gösterisi'nde görüntülenebilir. Bu slaytlar, PowerPoint 2010'da oluşturacağınız sunular hakkında size iyi bir fikir vermek için tasarlanmışlardır! Daha fazla örnek şablon için Dosya sekmesini, sonra Yeni sekmesinde Örnek Şablonlar'ı tıklatın.

5 Tablo Etiketleri

Tablo Etiketleri <table> </table> Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz. Örneğin sayfayı 3 sütuna ayırıp içeriğimizi buna göre hazırlayabiliriz. Tablo oluşturabilmek için 3 etikete ihtiyacımız var: <table> </table> etiketleri ile tablonun başladığı ve bittiği yer belirlenir. <tr> </tr> etiketleri ile her bir satırın başladığı ve bittiği yer belirtilir. <td></td> etiketleri ile tr etiketleri arasında hücreler oluşturulur. Önce tablo, sonra da satırlar oluşturulur. Son olarak da her satırdaki sütunlar (hücreler) oluşturulur.

Tablo Etiketleri <table> </table> <tr> </tr> Tabloda satır oluşturmak için kullanılır. <table border="1"> <tr> <td>hücre1</td> </tr> <td>hücre2</td> </table>

Tablo Etiketleri <table> </table> <tr> </tr> Tabloda satır oluşturmak için kullanılır. <table border="1"> <tr> <td>11-A</td> </tr> <td>11-B</td> <td>11-C</td> </table>

Tablo Etiketleri <table> </table> <td> </td> Tabloda sütun oluşturmak için kullanılır. <table border="1"> <tr> <td>1.Sütun</td> <td>2.Sütun</td> </tr> </table>

Tablo Etiketleri <table> </table> <td> </td> Tabloda sütun oluşturmak için kullanılır. <table border="1"> <tr> <td>satır 1, hücre 1</td> <td>satır 1, hücre 2</td> </tr> <td>satır 2, hücre 1</td> <td>satır 2, hücre 2</td> </table>

Tablo Etiketleri <table> </table> <table> etiketi parametreleri: <table border= “1”> Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. <table bordercolor=”red”> Tablonun kenarlık rengini belirlemek için kullanılır. <table bgcolor=”#ffff00”> Tablonun genel arka plan rengini belirlemek için kullanılır. <table background=”tugla.gif”> Tablonun arkasına resim konulabilir.

Tablo Etiketleri <table> </table> <table border="2" bgcolor="#F0E68C" bordercolor="maroon"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </table>

Tablo Etiketleri <table> </table> <table> etiketi parametreleri: <table width=”100”> Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır. <table height=”50”> Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır. <table cellspacing=”2”> Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır. <table cellpadding=”5”> Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.  <table align=”left”> ; <table align=right>; <table align=center> Tablonun konumunu ayarlamayı sağlar.

Tablo Etiketleri <table> </table> <table border="3" background= " tuğla.jpg" width="300" height="200 align="center"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </table>

Tablo Etiketleri <table> </table> <table border="2" cellspacing="1"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </table> <table border="2" cellspacing="10"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </table>

Tablo Etiketleri <table> </table> <table border="2" cellpadding="1"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </table> <table border="2" cellpadding="10"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </table>

Tablo Etiketleri <table> </table> Tablo Özellikleri : Yükseklik : 400px Genişlik : 400px Kenarlık kalınlığı : 1px Kenarlık Rengi : Beyaz Arkaplan rengi : Siyah 5 Satır x 5 Sütün

Tablo Etiketleri <table> </table> Tablo Özellikleri : Kenarlık kalınlığı : 1px Tablo Özellikleri : Genişlik : 500px Kenarlık kalınlığı : 1px

Tablo Etiketleri <table> </table> Tablo Özellikleri : Genişlik : 500px Kenarlık kalınlığı : 1px Hücre Metin Uzak. : 20px Tablo Özellikleri : Genişlik : 500px Kenarlık kalınlığı : 0px Hücre Metin Uzak. : 20px

Tablo Etiketleri <table> </table> <th> </th> başlık etiketi: <tr> etiketi altında, başlık verisi içeren hücre oluşturulmasını sağlar. <table border="1"> <tr> <th>Okul No</th> <th>Adı Soyadı</th> </tr> <td>2586</td> <td>Ali Can</td> <td>2895</td> <td>İpek Yılmaz</td> </table>

Tablo Etiketleri <table> </table> <td> etiketi parametreleri: <td bgcolor=”#00ffff”> Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir. <td background=”kedi.gif”> Hücrenin arka planına bir resim yerleştirir. <td width=”250”> Hücre genişliğini belirlemek için kullanılır. < td height=”50”> Hücre yüksekliğini belirlemek için kullanılır.

Tablo Etiketleri <table> </table> <table border="1" width="400"> <tr> <td width="250" height="80" bgcolor="AliceBlue">Hücre 1</td> <td width="150" height="80">Hücre 2</td> </tr> <td width="250" height="40">Hücre 3</td> <td width="100" height="40" bgcolor="#FFB6C1">Hücre 4</td> </table>

Tablo Etiketleri <table> </table> Tablo Özellikleri : Yükseklik : 400px Genişlik : 400px Kenarlık kalınlığı : 1px Kenarlık Rengi : Beyaz Arkaplan rengi : Siyah 5 Satır x 5 Sütün

Tablo Etiketleri <table> </table> <td> etiketi parametreleri: <td align=”left”>, <td align=”right”>; <td align=”center”> Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz. <td valign="top”>, <td valign="middle”>, <td valign="bottom”> sadece <td> ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) hizalar. Not : Align parametresi hücre içinde yatay hizalama yapar. Valign parametresi hücre içinde düşey hizalama yapar.

Tablo Etiketleri <table> </table> <table border="1" width="200"> <tr> <td height="80" valign="top">Hücre 1</td> <td valign="bottom" align="center">Hücre 2</td> </tr> </table> <table border="1" width="200"> <tr> <td height="100" valign="middle" align="right">Metin</td> <td valign="top" align="left"><img src="1.png"></img></td> </tr> </table>

Tablo Etiketleri <table> </table> <td> etiketi parametreleri: <td colspan=”2”> Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir. <td rowspan=”3”> Bu hücrenin yüksekliğinin 3 satır yüksekliğinde olduğunu gösterir.

Tablo Etiketleri <table> </table>

Tablo Etiketleri <table> </table> <table border="1" width="200"> <tr align="center"> <td rowspan="3" >3 satır birleştir</td> <td colspan="3">3 sütun birleştir</td> </tr> <td>H</td> <td>T</td> <td rowspan="2">2 satır birleştir</td> <td>M</td> <td>L</td> <td colspan="4">4 sütun birleştir</td> </table>

Örnekler 1

Örnekler 1 <html> <body> <TABLE Border = "1" width="500" height="300"> <TR align = "center"> <td colspan = "6">Ders Programı</td> </TR> <td Rowspan = "6">Dersler</td> <td>Pazartesi</td> <td>Salı</td> <td>Çarşamba</td> <td>Perşembe</td> <td>Cuma</td> <TD>Kimya</TD ><TD>Matematik</TD> <TD>Kimya</TD> <TD>Matematik</TD> <TD>Resim</TD> <TR align ="center"> <TD>Türkçe</TD> <TD>Tarih</TD> <TD>İngilizce</TD> <TD>Beden Eğitimi</TD> </TR> <TR align = "center"> <td Colspan = "5">Dinlenme</td> <TD>Kimya</TD> <TD>Matematik</TD> <TD Rowspan = "2">Proje</TD> </TABLE> </body> </html>

Örnekler 2

Örnekler 2 <html> <head> <title>Tablo Uygulamarı</title> </head> <body> <table width="600" border="2" bordercolor="#ff9900" cellpadding="5"> <tr> <td colspan="3" align="center" bgcolor="#ffcc99"> <font face="Arial" color="#990000"><b>Bilişim Dersler</b></font> </td> </tr> <tr><td rowspan="2" bgcolor="#ccff00">Programlama Temelleri</td> <td bgcolor="#ffcc66">Paket Programlar</td> <td bgcolor="#ff9999">Temel Elektronik</td> </tr> <tr> <td bgcolor="#ff6699">Teknik Resim</td> <td bgcolor="#0099ff">Bilişim Teknolojileri Temelleri</td> <td colspan="2" bgcolor="#99ccff">Web Tasarım ve Animasyon</td> <td bgcolor="#ffccff">Grafik Animasyon</td> </table> </body> </html>

Örnekler 3

Örnekler 3 <html> <TR> <body> <font face="verdana"> <TABLE CELLSPACING="0" CELLPADDING="4" BORDER="1"> <TR> <td COLSPAN="3" NOWRAP="NOWRAP" BGCOLOR="#FFFF99">Alış Veriş Tablosu</td> </TR> <TD BGCOLOR="#FFCCFF">Tür</TD> <TD BGCOLOR="#FFCCFF">Ürün</TD> <TD BGCOLOR="#FFCCFF">Fiyat</TD> <TD ROWSPAN="5" BGCOLOR="#CCFFFF">Beyaz Eşya</TD> <TD>Buzdolabı</TD> <TD>500.00 TL</TD> <TD>Ç.Makinesi</TD> <TD>450.00 TL</TD> <TD>Fırın</TD> <TD>300.00 TL</TD> <TR> <TD>B.Makinesi</TD> <TD>300.00 TL</TD> </TR> <TD>D.Dondurucu</TD> <TD>250.00 TL</TD> <TD ROWSPAN="2" BGCOLOR="#CCFFFF">Küçük Ev Aletleri</TD> <TD>Meyve Sıkacağı</TD> <TD>150.00 TL</TD> <TD>M.Robotu</TD> <TD>175.00 TL</TD> <TD COLSPAN="2" ALIGN="right">Toplam</TD> <TD BGCOLOR="#FFFF00">2.125.00 TL</TD> </TABLE> </font> </body> </html>

Tablo Etiketleri <table> </table> Tablo(table) Kullanarak Sayfa Tasarımı yapmak

Tablo Etiketleri <table> </table> <table border=2 bordercolor="red" width="500" height="400" align="center"> <tr> <td align="center" colspan="2" height="20%"> WEB SİTEME HOŞGELDİNİZ</td> </tr> <td width="70%" height="60%" align="center"> SİTE İÇERİĞİ BURADA</td> <td width=30% align="center"> MENÜ </td> <tr><td align="center" colspan="2"> ALT BÖLÜM</td></tr> </table>

Örnek 4 Anasayfa Galeri İletişim Benİm Sİtem Anasayfa Galeri İletişim

Örnek 5

Örnekler 5 <html> <body> <font face="verdana"> <table border="3" bordercolor="blue" cellspacing=8> <tr> <td colspan=7 align="left" bgcolor=#3366FF><font color="white" >Hesap Makinesi</font></td> </tr> <td>Düzen</td> <td>Görünüm</td> <td>Yardım</td> <td colspan=7 align="right">0,</td> <td width=40>&nbsp</td> <td><font color="red">Geri tuşu</font></td> <td width=54 align="center"><font color="red">CE</font></td> <td colspan=3 align="center"><font color="red">C</font></td> <td align="center"><font color="red">MC</font></td> <td align="center"><font color="blue">7</font></td> <td align="center"><font color="blue">8</font></td> <td width=54 align="center"><font color="blue">9</font></td> <td width=40 align="center"><font color="red">/</font></td> <td width=40 align="center"><font color="blue">sqrt</font></td> </tr> <tr> <td align="center"><font color="red">MR</font></td> <td align="center"><font color="blue">4</font></td> <td align="center"><font color="blue">5</font></td> <td align="center"><font color="blue">6</font></td> <td align="center"><font color="red">*</font></td> <td align="center"><font color="blue">%</font></td> <td align="center"><font color="red">MS</font></td> <td align="center"><font color="blue">1</font></td> <td align="center"><font color="blue">2</font></td> <td align="center"><font color="blue">3</font></td> <td align="center"><font color="red">-</font></td> <td align="center"><font color="blue">1/x</font></td> <td align="center"><font color="red">M+</font></td> <td align="center"><font color="blue">0</font></td> <td align="center"><font color="blue">+/-</font></td> <td align="center"><font color="blue">,</font></td> <td align="center"><font color="red">+</font></td> <td align="center"><font color="red">=</font></td> </table> </body> </html>

6 Form Etiketleri

Form Etiketleri <form> </form> Bir form, form elemanlarını içinde bulunduran alandır. Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları) <form> <input> </form>

Form Etiketleri <form> </form> Giriş (Input) En çok kullanılan form etiketi <input> etiketidir. Kullanılacak Parametre Görevi ALIGN Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır (left, center, right). CHECKED Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar. MAXLENGTH text ve password elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır. DISABLED disabled="disabled" şeklinde kullanıldığında o elemanı devre dışı hale getirir. Eleman sayfada görünür fakat seçilemez ve değiştirilemez.

Form Etiketleri <form> </form> Kullanılacak Parametre Görevi NAME Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. SIZE text ve password elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. SRC "image" elemanında resim dosyasını belirtmek için kullanılır. TYPE Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır.

Form Etiketleri <form> </form> Eleman türü Açıklaması Örnek Görünüm text Metin kutusu <input name="metin" type="text" value="varsayılan değer" /> password Şifreler için kullanılan Metin kutusu <input name="sifre" type="password" value="varsayılan değer"/> checkbox Onay kutusu <input name="onay" type="checkbox" /> radio Radyo buton <input name="cinsiyet" type="radio" value="erkek" /> Erkek <input name="cinsiyet" type="radio" value="kadin" /> Kadın  

Form Etiketleri <form> </form> Eleman türü Açıklaması Örnek Görünüm file Dosya seçme elemanı <input name="dosya" type="file" /> textarea Büyük metin alanı <textarea name="metin">varsayılan değer</textarea> select, option Seçim listesi ve seçim listesi seçenekleri <select name="liste"><option value=”bursa”>Bursa</option> <option value=”istanbul”>İstanbul</option> <option value=”ankara”>Ankara</option> </select> submit Form gönderme tuşu <input name="gonder" type="submit" value="Gönder" />

Form Etiketleri <form> </form> Text: Formumuza tek satırlık yazı girdisi eklemek için kullanıyoruz. Button: Düğme eklemek için kullanılır. Düğme üzerinde yazılacak ifadeyi value’den sonra belirtiyoruz. <form > Üye Adı:<input type="text" name="uyeadi"> </form> <form > Üye Adı:<input type="text" name="uyeadi"> <input type="button" value="Kontrol Et"> </form>

Form Etiketleri <form> </form> Password: Şifre girişi yapılacak durumlarda kullanılır <form > Üye Adı:<input type="text" name="uyeadi"> <input type="button" value="Kontrol Et"> <br/> Şifre:<input type="password" name="sifre"> </form>

Form Etiketleri <form> </form> radio: Seçenek eklemek içim kullanılır. Burada dikkat edilmese gereken eğer tek bir tanesi seçilsin istiyorsanız name’lerini aynı yazmalısın. Farklı name verdiğinizde birden fazla seçim gerçekleşebilecektir. <form> … Adı:<input type="text" name="textadi"><br/> Soyadı:<input type="text" name="textsoyadi"> <br/> Cinsiyet:Bay<input type="radio" name="secenek"> Bayan<input type="radio" name="secenek"><br/> </form>

Form Etiketleri <form> </form> Checkbox: Onay kutusu eklemek için kullanılır.Seçili olmasını istiyorsanız checked veya checked=”on” yazmalısınız.(<input type=”checkbox” name=”aa” checked>) <form> … İlgi Alanlarınız:<br/> Müzik<input type="checkbox" name="checkmuzik"> Spor<input type="checkbox" name="checkspor"> Sinema<input type="checkbox" name="checksinema"> Tiyatro<input type="checkbox" name="checktiyatro"> </form>

Form Etiketleri <form> </form> Select-option: Açılır menü eklemek için kullanılır. option etiketleri arasına seçeneklerin her biri yazılır. Seçeneklerin hepsi select etiketleri arasına alınır. Size ile açılır menünün yüksekliğini değiştirebilirsiniz. Birden fazla seçim yapabilmek için multiple’yi kullanın.(<select name=”aa”  multiple>) <form> … Doğum Yeri:<select name="msehir" size="1"> <option value="sehir">İstanbul</option> <option value="sehir">Ankara</option> <option value="sehir">İzmir</option> <option value="sehir">Diğer</option></select> </form>

Form Etiketleri <form> </form> textarea: Uzun satırlı mesajlar eklemek istediğimiz zaman kullanılır. cols ile enini , rows ile boyunu piksel olarak ölçülendiririz. Bunda input’u kullanmıyoruz. <form> … Mesaj:<br/> <textarea name="mesaj" cols="40" rows="10"> </textarea> </form>

Form Etiketleri <form> </form> Submit: Verileri sunucuya yollamak için kullanılır. Value değeri düğme üzerine yazılan metini belirler.  Reset: Formdaki nesneleri temizlemek için kullanılır. Value değeri düğme üzerine yazılan metini belirler.  <form> … <input type="submit" value="Gönder"> <input type="reset" value="Temizle"> </form>

Form Etiketleri <form> </form> fieldset:Forma kenarlık eklemek için kullanılır. legend: Formadaki çizginin üzerine başlık eklemek için kullanılır. align kullanılarak hizalama(left: sola, center: ortaya, right: sağa) yapılabilir. ör: <legend align=”center”> gibi.   <fieldset> <legend>Kişi Bilgileri</legend> <form> … </form> </fieldset>

Örnekler 1

Örnekler 2

Örnekler 3