on logo

Header / Başlık - Serhat SÖYLEMEZ


Bu site HTML5 elementlerinin ve CSS3 özelliklerinin nasıl çalıştığını gözlemlemek için hobi amaçlı olarak hazırlanmış olup bu standartarı belirleyen World Wide Web Consortium (W3C) örgütünün tavsiyelerini büyük oranda desteklemektedir.

Site sırasıyla W3C Markup Validator, W3C CSS Validator, W3C Link Checker, W3C Internationalization Checker, WAVE Web Accessibility Checker, Responsive Web Design Checker testlerine tabi tutulmuş ve minimum hata ile testleri geçmiştir.

h1 - Heading level 1 / seviye 1 bölüm Başlığı

h2 - Heading level 2 / seviye 2 bölüm Başlığı

h3 - Heading level 3 / seviye 3 bölüm Başlığı

h4 - Heading level 4 / seviye 4 bölüm Başlığı

h5 - Heading level 5 / seviye 5 bölüm Başlığı
h6 - Heading level 6 / seviye 6 bölüm Başlığı
h5 ve h6 gibi ufak metinler Erişilebilirlik (Web Accessibility) açısından tercih edilmez.


HTML5 Özel Karakterler ve Metin Türleri:

UTF-8 - Özel Karakterler, Özel Emojiler ve Türkçe Karakterler:

Özel Karakterler       : < > & " ' ; ! ‐ # % = / \ ✓ @ ( ) { } [ ] © ® ™ $ € £ ₺
Boşluk ve Tire           : ⇩ ⇩ Mesafeleri daha iyi görüntüleyebilmek için font boyutunu arttırdık!
              M M - very thin space (hairsp, 0.33 space)
              M M - thin space (thinsp, 0.80 space)
              M M - non breaking space (nbsp, 1 space)
              M M - en size space (ensp, 2 space)
              M M - em size space (emsp, 4 space)
              M‐M - dash (dash, 1.33 space)
              M–M - n size dash (ndash, 2 space)
              M—M - m size dash (mdash, 4 space)
Özel Emojiler           : 😀 😁 😂 😅 😇 😈 😋 😍 😎 😬 😭

* Kodları görmek için ekrana sağ tıklayıp sayfa kaynağını görüntüle­meniz yeterli olacaktır. Türkçe Karakterler : Ç ç Ğ ğ İ ı Ö ö Ş ş Ü ü

Türkçe karakterli link Tarayıcıdaki adrese dikkat! IE desteklemiyor.

Text Types / Metin Türleri:

p - long Paragraph / uzun Paragraf ...

b - Bold text / Kalın metin
strong - Important text / Önemli metin
i - Italic text / Eğik metin
em - Emphasized text / Vurgulu metin
s - Strikethrough text / Üstü çizili metin
mark - Marked text / İşaretli metin

time - tarih içerir.
del - Deleted text / Silinmiş metin tarih içerir.
ins - Inserted text / Yeni Eklenmiş metin tarih içerir.

small - Small text / Ufak metin REFERANS sub - Subscript text / Alt metin REFERANS sup - Superscript text / Üst metin
Örnek: 1.dipnot-kaynak, H2SO4, E=mc2

q - short Quotation / kısa Alıntı tırnakları otomatik ekler.
blockquote - long Quotation / uzun Alıntı
Uzun alıntıdaki girintiye dikkat!

abbr - Abbreviation / Kısaltma: HTML5, CSS3 imleci kısaltmaların üzerine getirin!

address - Contact information / İletişim metni
cite - Work title / Çalışma başlığı - Çalışma sahibi
dfn - Definition / Tanım
var - Variable / Değişken
pre - P r  e   f    or m  a   t    te d
                                     t   e    xt
      Dü z  e   n    si z
                       m   e    ti n
                
kbd - Keyboard input / Klavye girdisi - kısayolu
samp - Sample - Program output / Program çıktısı
code - computer Code / bilgisayar Kodu

⇦ Bi-DirectiOnal text - Bi-Directional Isolation / İki yönlü metin

bdo & bdi ⇨ Bi-DirectiOnal text - Bi-Directional Isolation / İki yönlü metin

Arapça, Farsça ve İbranice dilleri sağdan sola yazılan dillere örnek gösterilebilir.
Japonca ve Çince gibi Doğu Asya dilleri yukarıdan aşağı ruby, rt, rp elementleri ile yazılır.



HTML5 Resim, Link, Tablo ve Liste Örnekleri:

Javascript:

Tarih: - Saat:
* Canlı tarih saat döngüsüne ait javascript kodları sayfa başında yer alan script elementi içinde yer almaktadır.

Image / Resim:

img src="image"
açılan kapanan ampul

* Açılan kapanan ampule ait javascript kodları sayfa başında yer alan script elementi içinde yer almaktadır.

Figure and Figcaption / Şekil - Görüntü ve Başlık - Tanım:

Web tasarımında detaylar
figcaption - Tanım: HTML, CSS, Bootstarp ve JavaScript'in web tasarımına etkisi!

Anchors / Linkler:

a href="link"
Google.com.tr sayfasını aç!
target="_blank" linki ayrı sekmede açar, target="_self" linki aynı sekmede açar.

Print / Çıktı al.
on.jpg dosyasını indir!
Konu başlıklı mail gönder!
* Linklere ait görsel stil kodları sayfa başında yer alan style elementi içinde yer almaktadır.

Details and Summary / Detay ve Özet:

Burada spoiler mevcut ⇩ açmak için buraya tıklayın!

Spoiler ...

IE desteklemiyor, polyfill ile desteklenmeli.

Table / Tablo:

Caption / Tablo Başlığı
th Table Heading cell Tablo Başlık hücresi
tbody - Table Body / Tablo Gövdesi
tr - Table Row / Tablo Satırı
td 1 Table Data cell 1 Tablo Veri hücresi 1
td 2 Table Data cell 2 Tablo Veri hücresi 2
td 3 Table Data cell 3 Tablo Veri hücresi 3
td 4 Table Data cell 4 Tablo Veri hücresi 4
tfoot - Table Foot / Tablo Alt Bilgisi
* Tabloya ait görsel stil kodları sayfa başında yer alan style elementi içinde yer almaktadır.

Unordered List / Düzensiz Liste:

  • List item - Eleman 1
  • List item - Eleman 2
  • List item - Eleman 3
style="list-style-type: disc, circle veya square;" özelliği seçilebilir.

Ordered List / Düzenli Liste:

  1. List item - Eleman 1
  2. List item - Eleman 2
  3. List item - Eleman 3
type="1(decimal), A(upper-alpha), a(lower-alpha), I(upper-roman), veya i(lower-roman)" özelliği seçilebilir.

Description List / Açıklama Listesi:

Description term - Terim 1
Description describe - Açıklama 1
Description term - Terim 2
Description describe - Açıklama 2
Listelerdeki girintilere dikkat!


HTML5 Formlar ve Form Elemanları

Meter / Ölçü:

60%
IE desteklemiyor, polyfill ile desteklenmeli.

Progress / İlerleme:

32%

Fieldset, Form and Form Elements / Form Alanı, Form ve Form Elemanları:

Kullanıcı Girişi




* Formlara ait görsel stil kodları sayfa başında yer alan style elementi içinde yer almaktadır.

Google'da Ara


Arama kutusu arka fonuna resim ekledik!

Legend / Başlık






Zorunlu alan ve Veri kontrol kodları ekledik!






IE desteklemiyor, polyfill ile desteklenmeli.



IE desteklemiyor, polyfill ile desteklenmeli.



IE desteklemiyor, polyfill ile desteklenmeli.



IE desteklemiyor, polyfill ile desteklenmeli.


0 10 = 0
IE desteklemiyor, polyfill ile desteklenmeli.
















Dosya türlerini resimle sınırlandırdık!

  type="reset"     type="submit"
 

Button / Düğme:



Link Button / Link Düğme


HTML5 Media ve Eklenti Örnekleri:

Iframe:

iframe'i aç

Canvas:

Your browser does not support the HTML5 canvas element.
* Canvasa ait javascript kodları sayfa başında yer alan script elementi içinde yer almaktadır.

SVG:


* SVG'ye ait grafik kodları sayfa kaynağı içerisinde yer almaktadır.

Video:


Audio:


Sesli ve görüntülü elementler Erişilebilirlik (Web Accessibility) açısından altyazı, açıklama, konuşma metni gibi özelliklerle desteklenmeli.

Video & Audio - Transcript / Konuşma metni burada ⇩

Video & Audio Transcript / Konuşma metni ...


* Media elementlerini çıktı alırken saklamak uygun olacaktır.


HTML5 Renk Kodu Örnekleri:

Color Codes / Renk Kodları:

"cx = color code / color name" dersek;

<element style="color: cx; background-color: cx;" > içerik... </element> veya <style> element { color: cx; background-color: cx; } </style> şeklinde yazılarak elementleri renklendirmek için kullanılabilir.


#000000
Black
#2F4F4F
Darkslategrey
#708090
Slategrey
#778899
Lightslategrey
#696969
Dimgrey
#808080
Grey
#A9A9A9
Darkgrey
#C0C0C0
Silver
#D3D3D3
Lightgrey
#DCDCDC
Gainsboro
#191970
Midnightblue
#000080
Navy
#00008B
Darkblue
#0000CD
Mediumblue
#0000FF
Blue
#4169E1
Royalblue
#6495ED
Cornflowerblue
#1E90FF
Dodgerblue
#00BFFF
Deepskyblue
#87CEEB
Skyblue
#87CEFA
Lightskyblue
#B0E0E6
Powderblue
#ADD8E6
Lightblue
#5F9EA0
Cadetblue
#4682B4
Steelblue
#B0C4DE
Lightsteelblue
#00CED1
Darkturquoise
#48D1CC
Mediumturquoise
#40E0D0
Turquoise
#AFEEEE
Paleturquoise
#66CDAA
Mediumaquamarine
#7FFFD4
Aquamarine
#00FFFF
Aqua / Cyan
#E0FFFF
Lightcyan
#008080
Teal
#008B8B
Darkcyan
#20B2AA
Lightseagreen
#8FBC8F
Darkseagreen
#556B2F
Darkolivegreen
#6B8E23
Olivedrab
#808000
Olive
#9ACD32
Yellowgreen
#006400
Darkgreen
#008000
Green
#228B22
Forestgreen
#32CD32
Limegreen
#2E8B57
Seagreen
#3CB371
Mediumseagreen
#00FF7F
Springgreen
#00FA9A
Mediumspringgreen
#90EE90
Lightgreen
#98FB98
Palegreen
#00FF00
Lime
#7CFC00
Lawngreen
#7FFF00
Chartreuse
#ADFF2F
Greenyellow
#4B0082
Indigo
#663399
Rebeccapurple
#483D8B
Darkslateblue
#6A5ACD
Slateblue
#7B68EE
Mediumslateblue
#9370DB
Mediumpurple
#800080
Purple
#8B008B
Darkmagenta
#8A2BE2
Blueviolet
#9400D3
Darkviolet
#9932CC
Darkorchid
#BA55D3
Mediumorchid
#DA70D6
Orchid
#EE82EE
Violet
#C71585
Mediumvioletred
#FF00FF
Magenta / Fuchsia
#FF1493
Deeppink
#FF69B4
Hotpink
#DDA0DD
Plum
#D8BFD8
Thistle
#E6E6FA
Lavender
#BC8F8F
Rosybrown
#CD5C5C
Indianred
#DB7093
Palevioletred
#F08080
Lightcoral
#E9967A
Darksalmon
#FA8072
Salmon
#FFA07A
Lightsalmon
#FFB6C1
Lightpink
#FFC0CB
Pink
#FFE4E1
Mistyrose
#FFF0F5
Lavenderblush
#800000
Maroon
#8B0000
Darkred
#A52A2A
Brown
#B22222
Firebrick
#DC143C
Crimson
#A0522D
Sienna
#8B4513
Saddlebrown
#D2691E
Chocolate
#CD853F
Peru
#B8860B
Darkgoldenrod
#DAA520
Goldenrod
#F4A460
Sandybrown
#D2B48C
Tan
#DEB887
Burlywood
#F5DEB3
Wheat
#FFDEAD
Navajowhite
#FFE4C4
Bisque
#FFEBCD
Blanchedalmond
#FFF8DC
Cornsilk
#FF0000
Red
#FF4500
Orangered
#FF6347
Tomato
#FF7F50
Coral
#FF8C00
Darkorange
#FFA500
Orange
#FFD700
Gold
#FFFF00
Yellow
#BDB76B
Darkkhaki
#F0E68C
Khaki
#EEE8AA
Palegoldenrod
#FFDAB9
Peachpuff
#FFE4B5
Moccasin
#FFEFD5
Papayawhip
#FAFAD2
Lightgoldenrodyellow
#FFFACD
Lemonchiffon
#FFFFE0
Lightyellow
#FAF0E6
Linen
#FAEBD7
Antiquewhite
#FFFFF0
Ivory
#FFFAF0
Floralwhite
#FDF5E6
Oldlace
#F5F5DC
Beige
#FFF5EE
Seashell
#F5F5F5
Whitesmoke
#F8F8FF
Ghostwhite
#F0F8FF
Aliceblue
#F0FFFF
Azure
#F5FFFA
Mintcream
#F0FFF0
Honeydew
#FFFAFA
Snow
#FFFFFF
White
#
Transparent

* Renk kutularına ait görsel stil kodları sayfa başında yer alan style elementi içinde yer almaktadır.


HTML5 Yakında Geliyor...