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.

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.

<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>

<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>

<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>

<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>

<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.

<table border="2" bgcolor="#F0E68C" bordercolor="maroon"> <tr> <td>Hücre 1</td> <td>Hücre 2</td> </tr> </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.

<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>

<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>

<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 Ö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 Özellikleri : Kenarlık kalınlığı : 1px Tablo Özellikleri : Genişlik : 500px Kenarlık kalınlığı : 1px

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

<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>

<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.

<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 Ö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

<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.

<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>

<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.

<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> TL</TD> <TD>Ç.Makinesi</TD> <TD> TL</TD> <TD>Fırın</TD> <TD> TL</TD> <TR> <TD>B.Makinesi</TD> <TD> TL</TD> </TR> <TD>D.Dondurucu</TD> <TD> TL</TD> <TD ROWSPAN="2" BGCOLOR="#CCFFFF">Küçük Ev Aletleri</TD> <TD>Meyve Sıkacağı</TD> <TD> TL</TD> <TD>M.Robotu</TD> <TD> TL</TD> <TD COLSPAN="2" ALIGN="right">Toplam</TD> <TD BGCOLOR="#FFFF00"> TL</TD> </TABLE> </font> </body> </html>

Tablo(table) Kullanarak Sayfa Tasarımı yapmak

<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>

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.

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.

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

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" />

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>

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>

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>

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>

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>

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>

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>

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

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.

Benzer bir sunumlar

... konulu sunumlar: "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."— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

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.

Benzer bir sunumlar

... konulu sunumlar: "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."— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim