Ders_18 HTML Tabloları

Ders_18 HTML Tabloları

HTML Tabloları

Aşağıda bir tablo örneği verilmiştir:

No	Ad	Soyad	Not
1	Muzaffer	KAYA	94
2	Pelin	AY	80
3	Adem	KIŞ	67
4	Ali	YILMAZ	50

Basit bir tablo örneğinin html kodu aşağıdaki gibidir: <table><tr><td>Muzaffer</td><td>KAYA</td><td>94</td></tr><tr><td>Pelin</td><td>AY</td><td>80</td></tr></table> Kod incelenirse şunlar görülecektir:

• Bir tablo elemanı <table> ve </table> tagları arasında yer alır.
• Her bir tablo satırı (yatay sırası) <tr> ve </tr> tagları arasında yer alır.
• Bir satırlardaki her bir sütun (kolon) <td> ve </td> tagları arasında yer alır.
• Bir <tr> elemanının, kaç tane <td> yavrusu varsa, o satır, o kadar sütündan (hücreden) oluşuyor demektir.
• <td> elemanı, bir nevi tablonun hücrelerini temsil eder ve tablo içerikleri bu elemanlarda bulunur. <td> elemanı sadece text içermek zorunda değildir; resim, video, liste ya da yavru bir tablo bile içerebilir.
• <th> ve </th> tagları başlık oluşturmak için kullanılır. Örneğin; tablonun en üst satırını bir başlık satırı olarak kullanmak için tercih edilebilir ya da tablonun en soldaki kolonunu... Başlık yapmak isteğiniz hücrede <td> yerine <th> kullanacaksınız. Hepsi bu kadar...

Yukarıdaki tablo kodunu şöyle de düzenleyebilirdik: <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Not</th> </tr><tr> <td>Muzaffer</td> <td>KAYA</td> <td>94</td> </tr> <tr> <td>Pelin</td> <td>AY</td> <td>80</td> </tr> </table> Yukarıdaki tablonun çıktısı aşağıdaki gibi olacaktır:

Ad	Soyad	Not
Muzaffer	KAYA	94
Pelin	AY	80

Dikkat edilirse; <th> elemanları kalın harflerle ve ortalı yazılmıştır.

HTML Tablolarında border Özelliği

Tablolar, belirtilmediği müddetçe kenarlıksız (çerçevesiz) gösterilecektir. Bir tabloya kenarlık (çerçeve) eklemek istersek <table> tagının içine bir border özelliği ekleyebiliriz. Örneğe dikkat edelim: <table border="1" style="width:100%"> <tr> <th>Ad</th> <th>Soyad</th> <th>Not</th> </tr><tr> <td>Muzaffer</td> <td>KAYA</td> <td>94</td> </tr> <tr> <td>Pelin</td> <td>AY</td> <td>80</td> </tr> </table> Yukarıdaki tablo elemanının başlangıç tagına, border="1" özelliğini ekleyerek, 1px kalınlığında kenarlıklar eklemiş olduk. style="width:100%" kodu ise, tablo genişliğinin, sayfanın yüzde yüzü kadar olmasını sağlayan bir CSS kodudur. Bu tablo, web tarayıcıda şöyle görüntülenecektir:

Ad	Soyad	Not
Muzaffer	KAYA	94
Pelin	AY	80

Bir tabloya kenarlık eklemenin en iyi yolu bu değildir. CSS ile kenarlık eklemek daha geçerli bir yoldur. Şunun gibi: table, th, td {border: 1px solid black;}

Yukarıda CSS ile, tabloların kenarlıkları, 1px, solid (düz çizgi) ve black (siyah) olarak ayarlanmıştır.

HTML Tablolarında border-collapse Özelliği

border özelliği verdiğimizde, tabloların çift çizgili kenarlıklara sahip olduğunu farketmişizdir. Kenarlıklarının tek çizgili olmasını istiyorsak; border-collapse özelliğini kullanmalıyız. Örneğe dikkat edelim: table, th, td {border: 1px solid black;border-collapse: collapse;} Yukarıda CSS ile tabloların kenarlıkları 1px, solid (düz çizgi) ve black (siyah) olarak ayarlanmış, border-collapse: collapsekodu ile de kenarlık çizgileri, tek çizgi olarak ayarlanmıştır.

Bu CSS'den sonra, tablomuz şöyle görüntülenecektir:

Ad	Soyad	Not
Muzaffer	KAYA	94
Pelin	AY	80

HTML Tablolarında padding Özelliği

Bir tablo hücresindeki içeriğin, o hücrenin kenarlıklarına olan uzaklığını padding özelliği ayarlar. padding özelliği kodlanmadığı müddetçe 0 kabul edilir. Yani, hücredeki yazılar, sol kenara yapışık başlar. table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 15px;} Yukarıdaki CSS kodu, tablolardaki başlık (th) ve diğer (td) hücre içeriklerinin, kenarlarlıklarına en fazla 15px yaklaşabileceğini ilan eder (padding: 15px;). CSS kullanmadan padding vermek istiyorsak cellpadding özelliğini kullanırız. Aşağıdaki tabloda bunun bir örneği vardır: <table cellpadding="15px" border="1px"> <tr> <th>Ad:</th><td>Tarkan</td></tr><tr> <th>Telefon:</th><td>555 77 855</td></tr></table> Yukarıdaki tablo, web tarayıcıda şöyle görünecektir.

Ad:	Tarkan
Telefon:	555 77 855

HTML Tablolarında text-align Özelliği

Tablo hücrelerindeki içeriğin, hücreye göre hizalanması text-align özelliği ile yapılır. Örneğin: table { text-align: left;} Yukarıdaki CSS kodu, tablo içeriklerinin tümünün, sola dayalı yazılacağını ilan eder.

HTML Tablolarında border-spacing Özelliği

border-spacing özelliği bir tablodaki hücreler arası boşluğu tayin eder. table { border-spacing: 15px;} Yukarıdaki CSS kodu, tabloların hüceler arası boşluğunun 15 pixel olacağını ilan eder. Böyle bir tablo da aşağıdakine benzer:

Muzaffer	KAYA	50
Adem	KIŞ	94
Ali	YILMAZ	80

CSS kullanmadan spacing vermek istiyorsak cellspacing özelliğini kullanırız. Aşağıdaki tabloda bunun bir örneği vardır: <table cellspacing="5px" border="1px"> <tr> <th>Ad:</th><td>Tarkan</td></tr><tr> <th>Telefon:</th><td>555 77 855</td></tr></table>

HTML Tablolarında colspan Özelliği

Bir tabloda, aynı satırdaki hücreleri birleştirmek için colspan özelliği kullanılır. <td> veya <th> açılış taglarına yerleştirdiğimiz colspan özelliğine verdiğimiz değer kadar satır tek bir hücre olacaktır. Örneğin colspan="2" yazdığmızda iki satır hücresini birleştirdiğimizi ilan ederiz. Bu özelliği kullanırken tablomuzun şekline önceden karar vermiş olmak hata yapmımızı engelleyecektir. Aşağıdaki kodlara dikkat edelim: <table border="1px slid black" cellpadding="5px"style="width:100%; border-collapse:collapse"> <tr><th >Ad</th><thcolspan="2">Telefon</th> //Burada iki satır hücresi birleşti</tr><tr><td>Tarkan</td><td>555 77 854</td><td>555 77 855</td></tr></table> Tablonun çıktısı şöyle olacaktır:

Ad	Telefon
Tarkan	555 77 854	555 77 855

HTML Tablolarında rowspan Özelliği

Alt alta olan tablo hücrelerini (sütun hücrelerini) birleştirmek için rowspan özelliği kullanılır. rowspan özelliğinin kullanım şekli tıpkı colspan özelliği gibidir. Örneğe dikkat edelim: <table border="1px slid black" cellpadding="5px"style="width:100%; border-collapse:collapse"> <tr> <th>Ad:</th><td>Tarkan</td></tr><tr><throwspan="2">Telefon:</th> //Burada iki sutun hücresi birleşti<td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table> Yukarıdaki tablonun çıktısı şöyle olacaktır:

Ad:	Tarkan
Telefon:	555 77 854
	555 77 855

HTML Tablolarında <caption> (başlık) Elemanı

<caption> elemanı bir tablonun başlık almasını sağlar. Aşağıdaki örneğe dikkat edelim: <table border="1" style="width:100%; border-collapse:collapse"><caption>Aylık Tasarruflar</caption><tr><th>Ay</th><th>Tasarruf</th></tr><tr><td>Ocak</td><td>100</td></tr><tr><td>Şubat</td><td>50</td></tr></table> Yukarıdaki tablo şöyle görünecektir: Aylık Tasarruflar

Ay	Tasarruf
Ocak	100
Şubat	50

HTML Her Tablo İçin Özel Stil Belirleme

CSS kullanarak bir tabloyu stillendirmek tercih edilen yol olmalıdır. CSS her bir tabloyu özel olarak stillendirme imkanı verir. Tablolara id özelliği eklersek, CSS'te bu id değerini kullanılarak bu tabloyu seçilebilir ve istenilen stili verilebiliriz. Örneğe dikkat edelim: <tableid="t01" border="1"><tr><th>Ad</th><th>Soyad</th><th>Not</th></tr><tr><td>Muzaffer</td><td>KAYA</td><td>94</td></tr></table> Yukarıdaki tablonun çıktsı şöyledir:

Ad	Soyad	Not
Muzaffer	KAYA	94

Şimdi bu tabloya CSS uygulamak için table#t01 kodu ile bu tabloyu seçiyoruz ve aşağıdaki CSS kodlarımızı html sayfamıza uygun bir şekilde ekliyoruz: table#t01 { border-collapse: collapse; width: 100%;background-color: #f1f1c1;} Bu CSS'den sonra tablomuz şöyle olacaktır:

Ad	Soyad	Not
Muzaffer	KAYA	94

Aşağıdak iki tablo vardır. Bunlardan birincisi kimliksiz, diğeri ise kimlikli (id="t01") bir tablodur. Kimlikli tabloya CSS uygulayarak şekil vereceğiz. Şimdilik karışık gelebilir fakat CSS derslerinden sonra bu kodlar daha anlaşılır olacaktır: <!DOCTYPE html> <html> <head> <style> table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th{ background-color: black; color: white; } </style> </head> <body> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Not</th> </tr> <tr> <td>Muzaffer</td> <td>KAYA</td> <td>50</td> </tr> <tr> <td>Pelin</td> <td>AY</td> <td>94</td> </tr> <tr> <td>Adem</td> <td>YILDIZ</td> <td>80</td> </tr> </table> <br> <table id="t01"> <tr> <th>Ad</th> <th>Soyad</th> <th>Not</th> </tr> <tr> <td>Muzaffer</td> <td>KAYA</td> <td>50</td> </tr> <tr> <td>Pelin</td> <td>AY</td> <td>94</td> </tr> <tr> <td>Adem</td> <td>YILDIZ</td> <td>80</td> </tr> </table> </body> </html> Yukarıdaki tablonun CSS kodlarına dikkat edersek; bazıları, table#t01 seçicisi ile başladığından, bu stiller sadece id="t01" kimliğine sahip tabloyu etkileyen stillerdir. Yukarıda verilen iki tablonun çıktısı şöyle olacaktır:

Ad	Soyad	Not
Muzaffer	KAYA	50
Pelin	AY	94
Adem	YILDIZ	80

Ad	Soyad	Not
Muzaffer	KAYA	50
Pelin	AY	94
Adem	YILDIZ	80

HTML Tablolarında <colgroup> Tagı

• <colgroup> elemanı, tablo içindeki bir veya daha çok sütunu birçimlendirmek için kullanılır.
• <colgroup> elemanı, sütunlardaki her bir hücreye ayrı ayrı değil de bütün bir sütuna tek seferde stil uygulamak için kullanılır.
• <colgroup> tagı, <table> elemanının yavurusu (child) olmak zorundadır; yani <table> ve </table> taglarının içinde olmalıdır.
• <colgroup> tagı, <caption> elemanından sonra; <thead>, <tbody>, <tfoot> ve <tr> elemanlarından önce yer almalıdır.
• Tablodaki kolonlara ayrı ayrı stiller uygulamak için, <colgroup> elemanına <col> yavru (child) elamanı eklemeliyiz.

Aşağıdaki 3 kolonlu bir tablo koduna ve çıktısına dikkat edelim: <table><colgroup><colspan="2"style="background-color:red"><colstyle="background-color:yellow"></colgroup><tr><th>ISBN</th><th>Başlık</th><th>Fiyat</th></tr><tr><td>3476896</td><td>HTML</td><td>$53</td></tr> <tr> <td>5869207</td> <td>CSS</td> <td>$49</td> </tr> </table> Yukarıdaki kodda, <colspan="2"style="background-color:red"> elemanı; span="2" diyerek, tablonun ilk iki sütununu (kolonunu) seçmiş ve arkaplan rengini kırmızı (red) ilan etmiştir. <colstyle="background-color:yellow"> elemanı ise, span özelliği belirtilmediği için bir tane kolonun arkplan rengini sarı (yellow) olarak ilan etmiştir ki zaten geriye de bir tane kolan kalmıştı. Bu tablonun çıktısı şöyledir:

ISBN	Title	Price
3476896	My first HTML	$53
5869207	My first CSS	$49

HTML Tablolarında <thead> <tbody> ve <tfoot> Tagları

• <thead> elemanı, tablomuzun başlık (head) kısmını ilan etmek için kullanılır.
• <tbody> elemanı, tablomuzun içerik (body) kısmını ilan etmek için kullanılır.
• <tfoot> elemanı, tablomuzun bitiş (foot) kısmını yani en alt sırayı ilan etmek için kullanılır.

Bu elemanlar, özellikler birden çok sayfayı kaplayan tablolarda kullanışlıdır. Web tarayıcıları, tabloların başlık ve bitiş kısmını sabit tutup, içerik kısmını kaydırmalı (scrolling) olarak gösterebilmektedirler. Ayrıca, bu şekilde hazırlanmış ve birden çok sayfayı işgal eden tabloların yazıcıdan çıktısı alınırken, her bir çıktının başında ve sonunda başlık ve bitiş elemanlarının da yazdırılması mümkün olacaktır.

• <thead> elemanı, en az bir tane <tr> elemanı içermelidir.
• <thead>, <tbody> ve <tfoot> elemanları, tablolarda varsayılan stilleri değiştirmeyecektir. CSS kullanarak bu elemanlara stil verilebilir.
• <thead> elemanı; <table> elemanının yavrusudur, <caption> ve <colgroup> elemanlarından sonra, <tbody>, <tfoot> ve <tr> elemanlarından önce kullanılmalıdır.

Aşağıda örneğe ve çıktısına dikkat edelim: <!DOCTYPE html> <html> <head> <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;} table, th, td { border: 1px solid black; width: 100%; } </style> </head> <body> <table> <thead> <tr> <th>Ay</th> <th>Tasarruf</th> </tr> </thead> <tfoot> <tr> <td>Toplam</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>Ocak</td> <td>$100</td> </tr> <tr> <td>Şubat</td> <td>$80</td> </tr> </tbody> </table> </body> </html> Bu tablonun çıktısı şöyle olacaktır:

Ay	Tasarruf
Toplam	$180
Ocak	$100
Şubat	$80

sonraki ders için tıklayınız Gönderen Muzaffer Etiketler: <caption>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>, border, border-collapse, border-spacing, colspan, html, id, padding, rowspan, text-align

Hiç yorum yok:

Yorum Gönder

Sonraki Kayıt Önceki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom)

HTML DERSLERİ

Ders_1 HTML Nedir?

Ders_2 HTML Tag İfadeleri

Ders_3 HTML Editörleri

Ders_4 HTML Sayfa Yapısı

Ders_5 HTML Elemanları

Ders_6 HTML Temel İçerik Elemanları

Ders_7 HTML Tag Özellikleri (Attributes)

Ders_8 HTML Başlıkları

Ders_9 HTML Parafrafları

Ders_10 HTML Stilleri (style)

Ders_11 HTML Metin Elemanlarını Biçimlendirme

Ders_12 HTML Alıntı Yapma ve Kaynak Belirtme

Ders_13 HTML Bilgisayar Kodu Elemanları

Ders_14 HTML Yorumları (Comment)

Ders_15 HTML ve CSS

Ders_16 HTML Linkleri

Ders_17 HTML Görselleri (Images)

Ders_18 HTML Tabloları

Ders_19 HTML Listeleri (List)

Ders_20 HTML Blok ve Satıriçi Elemanlar

Ders_21 HTML Klasları (Class)

Ders_22 HTML Sayfa Düzeni (Layout)

Ders_23 HTML Uyumlu (Responsive) Web Dizaynı

Ders_24 HTML Iframe Elemanı

Ders_25 HTML Renk Adları ve Kodları

Ders_26 HTML Head Elemanı

Ders_27 HTML Varlıkları ve Vurgu İşaretleri (Entities/Marks)

Ders_28 HTML Semboller

Ders_29 Dil Kodlaması (Encoding/Character Set)

Ders_30 HTML URL Adresi Yazma (URL Encoding)

Ders_31 HTML ve XHTML

Ders_32 HTML Form Elemanı

Ders_33 HTML Form Elemanları

Ders_34 HTML Input Elemanının Tipleri (Input Type)

Ders_35 HTML Input Elemanının Özellikleri 1 (Attribute)

Ders_36 HTML Input Elemanının Özellikleri 2 (Attribute)

Ders_37 HTML JavaScript

HTML5 DERSLERİ

HTML5 Ders_1 Tanıtım (Introduction)

HTML5 Ders_2 Tarayıcı Desteği

HTML5 Ders_3 HTML5'in Yeni Elemanları (Elements)

HTML5 Ders_4 Anlamsal Taglar (Semantics)

HTML5 Ders_5 HTML5'e Geçiş (Mgration)

HTML5 Ders_6 Stil/Dizin Rehberi

HTML GRAFİK DERSLERİ (CANVAS-SVG)

HTML Canvas Ders_1 Tanıtım

HTML Canvas Ders_2 Bir Obje Çizmek

HTML Canvas Ders_3 Koordinatlar

HTML Canvas Ders_4 Gradyanlar (Gradients)

HTML Canvas Ders_5 Textler

HTML Canvas Ders_6 Resimler (Images)

HTML Canvas ile Saat Yapımı

HTML SVG Ders_1 Tanıtım

HTML SVG Ders_2 HTML ile SVG

HTML SVG Ders_3 SVG Dikdörtgen (Rectangle)

HTML SVG Ders_4 Daire (Circle)

HTML SVG Ders_5 Elips (Ellipse)

HTML SVG Ders_6 Çigi (Line)

HTML SVG Ders_7 Çokgen (Polygon)

HTML SVG Ders_8 Kırık Doğrular (Polyline)

HTML SVG Ders_9 Path Elemanı ile Çizim

HTML SVG Ders_10 Text Çizimi

HTML SVG Ders_11 Çizim Biçimleri (Strokes)

HTML SVG Filtreleme Ders_1

HTML SVG Blur Efekti - Filtreleme Ders_2

HTML SVG Gölge Efekti Verme - Filtreleme Ders_3

HTML SVG Gradyanlar (Gradients) - Ders_1 Linear Gradyanlar

HTML SVG Gradyanlar (Gradients) - Ders_2 Radial Gradyanlar

HTML MULTİMEDYA DERSLERi

HTML Multimedya Ders_1 Tanıtım

HTML Multmedya Ders_2 Video

HTML Multimedya Ders_3 Audio (Ses)

HTML Multimedya Ders_4 Plug-In

HTML Multimedya Ders_5 Youtube Videoları

HTML API DERSLERi

HTML API Ders_1 Geolocation (Konum)

HTML API Ders_2 Sürükle Bırak (Drag/Drop)

HTML API Ders_3 Local Storage (Local Depolama)

HTML API Ders_4 App Cache (Uygulama Belleği)

HTML API Ders_5 Web Workers (Web İşçileri)

HTML API Ders_6 Server-Sent Events (SSE) - Sunucudan Gelen Olaylar

SON

Popular Gönderiler

• Ders_22 HTML Sayfa Düzeni (Layout) HTML Sayfa Düzenleri (Layouts) Aşağıda, sıkça karşılaştığımız bir html sayfa düzeni görmekteyiz. Bu düzen,  <div> elemanları kulla...
• HTML5 Ders_4 Anlamsal Taglar (Semantics) HTML5'in Anlamsal Tagları (Semantics) Hakkında Semantic (anlamsal)  taglar, kelime anlamı ile aynı işi yapan html elemanlarıdır. Mese...
• Ders_18 HTML Tabloları HTML Tabloları Aşağıda bir tablo örneği verilmiştir: No Ad Soyad Not 1 Muzaffer KAYA 94 2 Pelin AY 80 3 Adem KIŞ 67 4 Ali YILMA...
• HTML SVG Ders_9 Path Elemanı ile Çizim HTML5 SVG ile Yörünge (Path) Çizimi < path > elemanı, karmaşık geometrik şekiller çizmek için kullanılır. path çizerken aşağıd...

ETİKETLER

• .htm (1)
• &nbsp (1)
• <a> (1)
• <abbr> (1)
• <address> (1)
• <area> (1)
• <article> (3)
• <aside> (2)
• <audio> (1)
• <b> (1)
• <base> (1)
• <bdo> (1)
• <blockquote> (1)
• <br> (1)
• <canvas> (6)
• <caption> (1)
• <circle> (2)
• <cite> (1)
• <code> (1)
• <colgroup> (1)
• <datalist> (1)
• <dd> (1)
• <defs> (1)
• <del> (1)
• <div> (3)
• <dl> (1)
• <dt> (1)
• <ellipse> (1)
• <em> (1)
• <embed> (2)
• <feBlend> (1)
• <feColorMatrix> (2)
• <feComponentTransfer> (1)
• <feComposite> (1)
• <feDiffuseLighting> (1)
• <feDistantLight> (1)
• <feFlood> (1)
• <feGaussianBlur> (2)
• <feImage> (1)
• <feMerge> (1)
• <feOffset> (1)
• <fePointLigth> (1)
• <feSpotLight> (1)
• <feTile> (1)
• <fieldset> (2)
• <figcaption> (1)
• <figure> (1)
• <filters> (1)
• <footer> (3)
• <form> (3)
• <g> (2)
• <h> (1)
• <head> (3)
• <header> (2)
• <hr> (1)
• <i> (1)
• <iframe> (1)
• <img> (2)
• <input> (4)
• <ins> (1)
• <kbd> (1)
• <keygen> (1)
• <label> (1)
• <legend> (2)
• <li> (1)
• <line> (1)
• <linearGradient> (1)
• <link> (2)
• <map> (1)
• <mark> (1)
• <meta> (2)
• <nav> (2)
• <noscript> (1)
• <object> (2)
• <ol> (1)
• <optgroup> (1)
• <option> (1)
• <output> (1)
• <p> (1)
• <path> (2)
• <polygon> (1)
• <polyline> (1)
• <pre> (2)
• <q> (1)
• <radialGradient> (1)
• <rect> (1)
• <samp> (1)
• <script> (2)
• <section> (3)
• <select> (1)
• <small> (1)
• <source> (2)
• <span> (1)
• <strong> (1)
• <style> (2)
• <sub> (1)
• <sup> (1)
• <svg> (6)
• <tbody> (1)
• <td> (1)
• <text> (1)
• <textarea> (1)
• <tfoot> (1)
• <th> (1)
• <thead> (1)
• <title> (2)
• <tr> (1)
• <track> (1)
• <tspan> (1)
• <ul> (1)
• <var> (1)
• <video> (1)
• A (1)
• accept-charset (1)
• action (1)
• alt (1)
• analog saat (1)
• animasyon (1)
• animation (1)
• ANSI (1)
• API (7)
• app cache (1)
• appcache (1)
• appication cache (1)
• ASCII (1)
• attribute syntax (1)
• attributes (1)
• audio (1)
• autocomplete (3)
• autofocus (1)
• autohide (1)
• autoplay (2)
• background-color (1)
• blur (1)
• bootstrap (1)
• border (2)
• border-collapse (1)
• border-radius (1)
• border-spacing (1)
• C (1)
• cache manifest (1)
• canvas (1)
• charset (1)
• class (1)
• color (3)
• colspan (1)
• comment (1)
• comment tags (1)
• controls (2)
• coords.accuracy (1)
• coords.altitude (1)
• coords.heading (1)
• coords.latitude (1)
• coords.longitude (1)
• copyright (1)
• createLinearGradient() (1)
• createRadialGradient() (1)
• CSS (1)
• cx (2)
• cy (2)
• çizgi (1)
• çizim (1)
• daire (1)
• dataTransfer.getData() (1)
• dataTransfer.setData() (1)
• datetime-local (1)
• dikdörtgen çizimi (1)
• disabled (2)
• domain (1)
• drag drop (1)
• drawImage() (1)
• drop-down list (1)
• elips (1)
• enctype (1)
• entities (1)
• entity (1)
• EventSource() (1)
• fill (2)
• fill-rule (1)
• fillText (1)
• fillText() (1)
• filter (1)
• float (2)
• font-family (2)
• font-size (2)
• form (1)
• formaction (1)
• formenctype (2)
• formmethod (2)
• formnovalidate (1)
• formtarget (2)
• geolocation (1)
• getCurrentPosition() (1)
• google maps (1)
• gölge efekti (1)
• gölge verme (1)
• gradient (2)
• gradyan (1)
• gradyanlar (1)
• graphic grafik element eleman (1)
• H (1)
• height (1)
• hex kodları (1)
• host (1)
• href (1)
• htm (2)
• html (76)
• html arrow symbol (1)
• html color (1)
• html dizin (1)
• html editörleri (1)
• html elemanları (1)
• html element ekleme (1)
• html greek letter (1)
• html mathematical symbol (1)
• html nedir (1)
• html renk adları (1)
• html renk kodları (1)
• html renkleri (1)
• html sayfa yapısı (1)
• html sembolleri (1)
• html symbol (1)
• html syntax (1)
• html tanıtım (1)
• html tarihçesi (1)
• html varlıkları (1)
• html versiyonları (1)
• html5 (31)
• html5 elemanları (1)
• html5 elements (1)
• HTML5 form element eleman (1)
• html5 semantics (1)
• html5 tarayıcı desteği (1)
• html5.css (1)
• html5' geçiş (1)
• html5'e dönüştürme (1)
• http-equiv (1)
• ISO-8859-1 (1)
• id (2)
• in (1)
• javascript (2)
• konum (1)
• L (1)
• lang (2)
• line (1)
• list (1)
• localStorage (1)
• loop (1)
• M (1)
• manifest (1)
• margin (1)
• max (1)
• maxlength (2)
• media element eleman (1)
• method (1)
• min (1)
• min max (1)
• month (1)
• multimedia (1)
• multimedya (1)
• multiple (1)
• name (1)
• novalidate (3)
• onerror (1)
• onmessage (1)
• onopen (1)
• opacity (1)
• özellikler (1)
• padding (2)
• paragraph (1)
• password (1)
• path (1)
• pattern (2)
• placeholder (1)
• playlist (1)
• plug-in (1)
• points (2)
• polygon (1)
• port (1)
• preventDefault() (1)
• Q (1)
• r (1)
• radialGradient (1)
• range (1)
• readonly (2)
• required (2)
• rgb kodları (1)
• rowspan (1)
• rx (1)
• ry (1)
• S (1)
• saat (1)
• search (1)
• server sent events (1)
• ses (1)
• sessionStorage (1)
• shadow effect (1)
• sheme (1)
• sınıf (1)
• size (2)
• sound (1)
• SourceGraphic (1)
• src (1)
• SSE (1)
• step (2)
• stroke (3)
• stroke-dasharray (1)
• stroke-linecap (1)
• stroke-opacity (1)
• stroke-width (3)
• strokeText (1)
• strokeText() (1)
• style (3)
• submit (1)
• sürükle bırak (1)
• svg (9)
• svg filters (1)
• T (1)
• tag (2)
• target (2)
• terminate() (1)
• text (3)
• text-align (2)
• tuval (3)
• type (3)
• url (2)
• usemap (1)
• utf-8 (1)
• V (1)
• value (1)
• video (2)
• vidyo (1)
• w3.css (1)
• web işçileri (1)
• web worker (1)
• web workers (1)
• width (1)
• window.localStorage (1)
• window.sessionStorage (1)
• worker (1)
• workers (1)
• x1 (1)
• x2 (1)
• xhtml (1)
• y1 (1)
• y2 (1)
• yeni html5 elamanları (1)
• yeni html5 element (1)
• youtube (1)
• Z (1)