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's Unicorn Unified Validator, WAVE Web Accessibility Checker ve media Genesis Responsive Web Design Checker testlerine tabi tutulmuş ve minimum uyarı 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ığı

Boyutu arttırılmadığı sürece 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 (  0.80 space)
M M non breaking space (  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 (– 2 space)
M—M m size dash (— 4 space)

Özel Emojiler

: 😀 😁 😂 😅 😇 😈 😋 😍 😎 😬 😭

* Kodları görmek için ekrana sağ tıklayıp sayfa kaynağını görüntülemeniz yeterli olacaktır.

Türkçe Karakterler

: Ç ç Ğ ğ İ ı Ö ö Ş ş Ü ü

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

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
u - Unarticulated text / Açık olmayan metin
u gibi altı çizili metinler Erişilebilirlik (Web Accessibility) açısından tercih edilmez.

s - ~~Strikethrough text / Üstü çizili metin~~
mark - Marked text / İşaretli metin

time - Time text / Zaman içeren metin 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, H₂SO₄, E=mc²

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.

* Dilerseniz daha kolay script kodları oluşturmak için jQuery JavaScript library (javascript kütüphanesi) kullanabilirsiniz:

Image / Resim:

img src="image"

* 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 / yazıcıdan Çıktı al.

Send Mail / Konu başlıklı Mail gönder!

SS Word - Metin editörünü aç!

SS Word - metin editörü Serhat SÖYLEMEZ tarafından A4 sayfa kullanımına uygun olarak tasarlanmıştır.

Details and Summary / Detay ve Özet:

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

Spoiler ...

Table / Tablo:

Caption / Tablo Başlığı
thead - Table Head / Tablo Üst Bilgisi
th	Table Heading cell	Tablo Üst Bilgi 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
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:

List item - Eleman 1
List item - Eleman 2
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!

Fonts / Fontlar:

RymanEco Mürekkep Tasarruflu Türkçe Font

RymanEco mürekkep tasarruflu Türkçe font dosyasını indirmek için tıklayınız!

RymanEco fontuna Serhat SÖYLEMEZ tarafından Türkçe karakter desteği verilmiştir.

HTML5 Formlar ve Form Elemanları

Meter / Ölçü:

60%

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

Legend / Başlık

Input type="tel" - Telefon :

type="email" - e-posta :

Zorunlu alan ve Veri kontrol kodları ekledik!

type="url" - Web Sitesi:

type="number" - Sayı :

type="color" - Renk :

type="date" - Tarih :

type="time" - Saat :

type="range" - Aralık :
0 10 = 0

Data List / Veri Listesi :

Select list / Seçim listesi :

Text Area / Metin Alanı :

type="checkbox" - Onay Kutusu

type="radio" - Seçim Düğmesi 1
type="radio" - Seçim Düğmesi 2

type="file" - Dosya Yükle :
Dosya türlerini resimle sınırlandırdık!

type="reset" type="submit"

Button / Düğme:

Link Button / Link Düğme

* Dilerseniz görünümü daha da güzelleştirmek için Bootstrap CSS Framework (önyüz çatısı) kullanabilirsiniz:

HTML5 Media ve Eklenti Örnekleri:

Iframe:

iframe'i aç

Youtube vb. gömülü videolarda Erişilebilirlik (Web Accessibility) açısından ilave alt yazı seçenekleri eklenmeli.

Canvas:

* Canvasa ait javascript kodları sayfa kaynağı içerisinde 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.

* Renklerin bulunduğu bölüm çıktı alırken saklanmıştır.

HTML5 Element Nitelikleri:

Evrensel Nitelikler:

id, class, style, title, lang en çok kullanılan evrensel niteliklerdir.

Komuta Bağlı Nitelikler:

onload, onsubmit, onafterprint, onresize vb. on-komut şeklinde yazılan niteliklerdir.

Örnek:

Fare Hareketlerini Algılar

Farklı aygıtların hareketine duyarlı erişimler Erişilebilirlik (Web Accessibility) açısından tercih edilmez.

Kütüphane:
PDF kitaplar erişim riski oluşturabileceği için Erişilebilirlik (Web Accessibility) açısından tercih edilmez.

CSS3 Notları
Bootstrap 4.6 Notları
Bootstrap 4.6 Renk Test Sayfası
jQuery 3.6 Notları
PHP Notları
MySQL Notları