IDE NEDİR?

IDE (Integrated Development Environment) (tümleşik geliştirme ortamı), bilgisayar programcılarının ve yazılım geliştiricilerinin en hızlı ve en rahat bir şekilde yazılım geliştirebilmesini
amaçlayan, geliştirme sürecini organize edebilen birçok araç ile birlikte, geliştirme sürecinin verimli kullanılmasına katkıda bulunan araçların tamamını içerisinde barındıran bir
yazılım türüdür.

IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) yazılımları sayesinde bilgisayar programcıları ve yazılım geliştiriciler, debugging (hata ayıklama), versiyon kontrolü,
kodlama hataları veya otomatik tamamlama gibi birçok özelliğe sahip olabilir, bu özellikleri kullanarak daha kolay ve hızlı biçimde istedikleri yazılımları geliştirebilir. IDE (Integrated
Development Environment) (tümleşik geliştirme ortamı) kullanmak aynı zamanda üretkenliği de arttıran bir unsurdur. IDE’ler (Integrated Development Environment) (tümleşik geliştirme ortamları) sayesinde
bilgisayar programcıları ve yazılım geliştiriciler, daha görsel bir ekran üzerinden çalışma şansına sahip olur ve çok daha az zaman harcayarak daha kaliteli ve kapsamlı çalışmalar
ortaya çıkartmasına yardımcı olur.

IDE’ler (Integrated Development Environment) (tümleşik geliştirme ortamları) arasında karşılaştırma yapmak ne yazık ki tam olarak mümkün değildir ve bu kişisel bir seçim meselesidir.
IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) yazılımları, bilgisayar programcıları ve yazılım geliştiriciler için tasarlanmış olmasına karşın son karar kişinin kendisine
aittir. Bilgisayar programcıları ve yazılım geliştiriciler kendilerine daha çok avantaj sunduğuna inandığı IDE’ye (Integrated Development Environment) (tümleşik geliştirme ortamı) yönelmelidir.
Adobe Dreamweaver, Eclipse, NetBeans, Sublime Text, NotePad++, IntelliJ, PhpStorm, PhpDesigner, Zend Studio, Aptana, Microsoft Visual Studio, Android Studio, Code::Blocks,
CodeLite, PyCharm vs. en çok tercih edilen ve en çok kullanılan IDE’ler (Integrated Development Environment) (tümleşik geliştirme ortamları) arasında yer almaktadır.

IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) seçimi yaparken dikkat edilmesi gereken bazı kriterleri ele alacak olursak;

• Programlama diline göre sözdizimi renklendirmesi yapabilme özelliği ve maksimum programlama dilini alt yapısında bulundurulması.
• Kodlama dosyalarının hiyerarşik olarak görülebilmesi amacıyla hazırlanmış gerçek zamanlı bir gösterge panosu özelliği.
• Tümleşik bir derleyici ve yorumlayıcı özelliği. Kaynak kodları bu sayede IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) üzerinde çalıştırılabilir olur.
• Yazılımın derlenmesi, bağlanması, çalışmaya tümüyle hazır hale gelmesi ve daha birçok ek işi otomatik olarak yapabilmek amacıyla küçük inşa araçlarını barındırması.
• Debugging (hata ayıklayıcı) özelliğini barındırması.
• Programın arayüzü için çoklu dil desteği olması.
• İşletim sistemlerine uygunluğu.
• Yazılım ve programlama dillerinin güncellenmesine bağlı olarak yeni versiyon veya versiyonlarının üretilmesi.
• Programın ücretlendirilmesi.
Extra Eğitim® - [Link]
 HTML NEDİR?
HTML (Hyper Text Markup Language) (zengin metin işaretleme dili), internet üzerinde bilgi ve veri paylaşımı için kullanılmakta olan en yaygın metin tabanlı işaretleme dildir. HTML
bir programlama dili olarak tanımlanamaz. Çünkü kendi başına çalışarak, ayrı ayrı her kullanıcının isteklerine göre cevap verebilen
(Hyper Text Markup Language) (zengin metin işaretleme dili)
bir program yazılamaz. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML (Hyper Text Markup Language) (zengin metin
işaretleme dili) belgesi ise, başlı başına verinin kendisidir.

Yapısı, tag (etiket) ismi verilen çeşitli başlıklardan oluşur. Veriler içine yerleştirilen tag (etiket) parçaları, metnin, dolayısıyla belgenin, ilgili okuyan browser (tarayıcı) tarafından
verilerin nasıl işleneceğini belirtir. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur.
Temeli gereği yazı, ses, görüntü, video vs. gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların browser (tarayıcı) yazılımları
tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir. Bu nedenle genellikle işaretleme dili olarak anılmaktadır.

Belgeleri birbirlerine bağlamak için yapısında kullanılan hyper text’ler (köprüler) oldukça güçlüdürler. Bu belgeler web space (web alanı) denen alanları oluşturur. Bir web space
tipik olarak, home page (ana sayfa) etrafında biriken link’li (bağlantılı) sayfalardan oluşur. Bu link’ler (bağlantılar) web space (web alanı) içinden bir iç adres ya da dış kaynaklı bir
(web alanı)
adres olabilir. Bir home page (ana sayfa) ise bilgi paylaşımını sağlamak için kullanılan bir sanal buluşma ortamı durumundadır. İnternet üzerinde yaşayan World Wide Web (www)
(web), HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) sisteminin arkasında etkileşimli, çok platformlu, multimedia (çoklu ortam) ve client / server (istemci) / (sunucu) uygulamaları
oluşturmak için kullanılır.

Web sitelerinin hemen hemen %100'üne yakın kullanılan bir dildir ve bu nedenle web sitelerinin temelidir. Sadece HTML (Hyper Text Markup Language) (zengin metin işaretleme dili)
kullanılarak web siteleri yapılabilir ve bunlara static (sabit) web siteleri denir, çünkü bu siteler tamamen durağan sitelerdir ve güncelleme işlemi kullanıcılara göre olmayıp, sadece
kendi dosyalarından yazılımcı tarafından güncellenebilir. Dynamic (dinamik) hale gelmesi için genellikle PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page) (kişisel ana
sayfa), ASP (Active Server Pages) (aktif sunucu sayfaları) vs. gibi programlama dilleri ile birlikte kullanılmalıdır.

Teknik olarak HTML (Hyper Text Markup Language) (zengin metin işaretleme dili), SGML (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili) ve DTD (Document Type
Definition) (belge türü tanımı) olarak tanımlanır. SGML (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili) ilk olarak IBM tarafından 1960’ların sonlarında, değişik bilgisayar
ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language) (genel işaretleme dili) olarak geliştirilmiştir. Zaman içinde GML (General Markup Language) (genel işaretleme
dili), SGML (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili) olarak ISO (International Standards Organization) (uluslararası standartlar organizasyonu) tarafından standart haline
getirildi.

Bir SGML (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili) belgesi üç ana parçadan oluşur. İlk parça, tag (etiket) ile normal metni birbirlerinden ayırmak
için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, tag’ların (etiketlerin) uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve işaret
tag’larını (etiketlerini) içerir. Bu üç parçanın hepsi aynı fiziksel dosya içinde olmak zorundadırlar. Bütün browser’lar (tarayıcılar) aynı SGML (Standard Generalized Markup Language) (standart
genelleştirilmiş işaretleme dili) karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini görür.

Extra Eğitim® - [Link]

 HTML’İN TARİHÇESİ
1980 yılında CERN'de (Conseil Européen pour la Recherche Nucléaire) (avrupa nükleer araştırma merkezinde) görevli olan Tim Berners - Lee, tüm CERN (Conseil Européen pour la Recherche
araştırmacılarının bilgilerini ve dokümanlarını birbirleriyle kolaylıkla paylaşabilmeleri için iyi bir sistem olması gerektiğine inanıyordu.
Nucléaire) (avrupa nükleer araştırma merkezi)

Prototip olarak ilk önceleri Enquire isimli sistemi önerdi. Daha sonra 1989 yılına gelindiğinde internet tabanlı sistemin ilk temellerini yine aynı isim Tim Berners - Lee attı.

1990 yılında HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) adlı bilgisayar metin dilini bulup geliştirmesinden sonra World Wide Web (www) (web) sistemini kurmuştur.

Bu şekilde CERN'de (Conseil Européen pour la Recherche Nucléaire) (avrupa nükleer araştırma merkezinde) bilgi paylaşımını kolaylaştırma amacı doğrultusunda ortaya çıkan HTML (Hyper
günümüzde hayatımızın vazgeçilmezi olan internetin başlıca temelini oluşturmuştur.
Text Markup Language) (zengin metin işaretleme dili)

Extra Eğitim® - [Link]

 HTML’İN DOSYA YAPISI VE GELİŞTİRİCİLERİ
HTML (Hyper Text Markup Language) (zengin metin işaretleme dili), W3C (World Wide Web Consortium) (dünya çapında ağ konsorsiyumu) tarafından standartlaştırılmaktadır. HTML’in (Hyper Text
geliştiricileri, dosya uzantısı, mime tipi, kod tipi, format tipi, çalışma ortamı, uzatılan türü ve sürüm bilgisi aşağıda belirtilmiştir.
Markup Language) (zengin metin işaretleme dilinin)

Geliştirici : W3C (World Wide Web Consortium) (dünya çapında ağ konsorsiyumu)

WHATWG (Web Hypertext Application Technology Working Group) (web köprü uygulama teknolojisi çalışma grubu)

Dosya uzantısı : .html, .htm

MIME tipi : text/html

Kod tipi : Text (metin)

Format tipi : Markup Language (işaretleme dili)

Çalışma ortamı : Client (istemci) > Browser (tarayıcı)

(Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Opera, Safari, Yandex Browser vs.)

Uzatılan türü : SGML (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili)

Güncel sürüm : 5

Bir önceki sürüm : 4.1

Extra Eğitim® - [Link]
 HTML’İN FAYDALARI
• Tamamen ücretsizdir.
• Web siteleri içerisinde %100'e yakın oranda kullanılan bir dildir ve bu nedenle HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) web sitelerinin temelidir.
• Sadece HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kullanılarak static (sabit) web siteleri yapılabilir. PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home
Page) (kişisel ana sayfa), ASP (Active Server Pages) (aktif sunucu sayfaları) vs. gibi dillerle tam uyumlu olması nedeniyle, ek diller kullanılarak dynamic (dinamik) web siteleri de yapılabilir.
• HTML (Hyper Text Markup Language) (zengin metin işaretleme dili), diğer programlara dillerine göre öğrenilmesi daha kolay bir dildir. HTML’in (Hyper Text Markup Language) (zengin metin
işaretleme dilinin) kolay öğrenilmesinin en büyük nedeni metin tabanlı bir dil oluşundandır.
• Diğer diller gibi hexadecimal (onaltılık) kodlar bulunmamaktadır.
• Tüm ülke dillerine kolaylıkla adapte olabilir.
• HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) ile sayfalar oluşturmak için hiçbir kod bilgisi olmadan bile herhangi bir IDE (Integrated Development Environment) (tümleşik
geliştirme ortamı) kullanılarak HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) sayfaları oluşturulabilir. Örneğin; Adobe Dreamweaver vs.
• HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kodlarını eğer herhangi bir IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) programınız bulunmuyorsa,
bütün Windows, Linux, Mac vs. işletim sistemlerinde bulunan not defteri programıyla yazabiliriz.
• HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dosyalarını çalıştırmak için hiçbir ek yazılıma gereksinim duymazsınız. Tek gerekli olan her bilgisayarda bulunan
bir browser’dır (tarayıcıdır).
• İnternet üzerinde yayın yapacaksanız, tüm hosting (barındırma) ve server (sunucu) işletim sitemlerinde sorunsuz olarak çalışabilir.
Extra Eğitim® - [Link]
 HTML İLE NELER YAPILABİLİR?
HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kullanılarak yapabileceklerimiz ve yapamayacaklarımız konusunda bazı bilgiler aşağıda kısaca sunulmaktadır.

Neler Yapılabilir?

• Metin biçimlendirme işlemleri (renk, boyut, font vs.) yapılabilir.

• Resim kullanımları ve çalıştırılma işlemleri yapılabilir.
• Video kullanımları ve çalıştırılma işlemleri yapılabilir.
• Ses dosyaları kullanımları ve çalıştırılma işlemleri yapılabilir.
• Tablo işlemleri yapılabilir.
• Alan işlemleri yapılabilir.
• Çerçeve işlemleri yapılabilir.
• Form işlemleri yapılabilir.
• Canvas (tuval) 2D işlemleri yapılabilir.
• Stil dosyaları kullanım işlemleri yapılabilir.
• Dış bileşen kullanım işlemleri yapılabilir.
• Static (sabit) web sayfaları yapılabilir.

Neler Yapılamaz?

• Etkileşimli ve event’lara (olaylara) duyarlı sayfalar yapılamaz. Fakat Javascript dilini de ek olarak kullanırsak yapılabilir.
• Formları işleyip değerlendiren programlar yapılamaz. Fakat PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page), ASP (Active Server Pages) (aktif sunucu sayfaları) vs.
gibi dilleri ek olarak kullanırsak yapılabilir.
• Dynamic (dinamik) web sayfaları yapılamaz. Fakat PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page), ASP (Active Server Pages) (aktif sunucu sayfaları) vs. gibi dilleri
ek olarak kullanırsak yapılabilir.
Extra Eğitim® - [Link]
 HTML İLE XHTML ARASINDAKİ FARKLAR
XHTML (Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş metin işaretleme dili), yeni nesil web tasarım standartlarına verilen addır. HTML’in (Hyper Text Markup Language)
(zengin metin işaretleme dilinin) başında bulunan X harfi işaretleme dili olarak tanımlanan, XML’in (Extensible Markup Language) (genişletilebilir işaretleme dilinin) özelliklerinin HTML (Hyper Text Markup
Language) (zengin metin işaretleme dili) içerisinde kullanılabileceği anlamına gelmektedir.

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili), SGML’in (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dilinin) bir türevidir. Ekranda görüntülenecek
içeriğin yapılandırılmasını sağlar. XML (Extensible Markup Language) (genişletilebilir işaretleme dili) ise içeriğin görüntülenmesini değil, içeriğin tamamen yapılandırılmasından sorumlu bir
dildir.

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) ile XHTML (Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş metin işaretleme dili) arasındaki tek fark, doctype’ın
sayfaya bir diğer deyiş ile belgeye tanımlanmasından kaynaklanır.
(belge türü tanımının)

HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) doctype (belge türü tanımı) tanımlaması kısadır ve hiçbir kısıtlaması yoktur. XHTML’de (Extensible Hypertext Markup
birden fazla doctype (belge türü tanımı) tanımlaması ile farklı içerikler için kısıtlama yapılabilmesi sağlanabilir.
Language) (genişletilebilir büyütülmüş metin işaretleme dilinde)

Doctype (belge türü tanımı) tanımlaması XHTML’in (Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş metin işaretleme dilinin) bir parçası değildir ve asıl tanımlanma amacı
belge içerisinde kullanılan elementlerin standartları için ek bir bağlantı sağlamasıdır. Özellikle XML (Extensible Markup Language) (genişletilebilir işaretleme dili) kullanılan sayfalarda çok sık
kullanılır. XHTML (Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş metin işaretleme dili) 3 tip belge bildirimi sunar. Bunlar strict (katı), transitional (geçiş) ve frameset’dir (çerçeve
setidir).

Strict (katı)

Diğer 2 bildirime göre daha katı ve net bir denetleme sağlamaktadır. Genellikle CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ile yapılan
tasarımlarda strict (katı) tercih edilmektedir. Dolayısı ile browser’lar (tarayıcılar) bu tercihe göre sayfadaki kodlamayı yorumlar. Kullanım şekli aşağıdaki gibidir.

<!doctype html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "[Link]

Transitional (geçiş)

En çok kullanılmakta olan sayfa geçerliliği denetleyicisidir. Çünkü, strict’e (katıya) göre çok daha esnektir ve sayfadaki bazı yazım hatalarını göz ardı edebilir. Kullanım şekli
aşağıdaki gibidir.

<!doctype html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "[Link]

Frameset (çerçeve seti)

Genelde frame (çerçeve) kullanılan sitelerde sayfanın geçerliliğini denetlemede tercih edilmektedir. Kullanım şekli aşağıdaki gibidir.

<!doctype html PUBLIC "-//W3C//DTD Xhtml 1.0 Frameset//EN" "[Link]

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 ve daha sonrası sürümlerde yukarıdaki uzun bildirimlerin hiçbirini kullanmaya gerek yoktur. Kısaca aşağıdaki
şekilde yazılabilir.

<!doctype html>
Extra Eğitim® - [Link]
 HTML’DE ISO ÜLKE KODLARI
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) ISO Country Codes (International Standards Organization Country Codes) (uluslararası standartlar organizasyonu ülke kodları)
ile ülkeler için kısaltmalar tanımlayabilirsiniz. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dokümanı içerisinde lang (dil) değerine ek olarak kullanılabilir. Bir dil kodunun
ilk iki karakteri dili tanımlar son iki karakteri ise ülkeyi tanımlar. Örnek: <html lang="en-US"> vs.

Country (ülke) ISO Code Country (ülke) ISO Code

AFGHANISTAN AF LIBYAN ARAB JAMAHIRIYA LY
ALBANIA AL LIECHTENSTEIN LI
ALGERIA DZ LITHUANIA LT
AMERICAN SAMOA AS LUXEMBOURG LU
ANDORRA AD MACAO MO
ANGOLA AO MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF MK
ANTARCTICA AQ MADAGASCAR MG
ANTIGUA AND BARBUDA AG MALAWI MW
ARGENTINA AR MALAYSIA MY
ARMENIA AM MALDIVES MV
ARUBA AW MALI ML
AUSTRALIA AU MALTA MT
AUSTRIA AT MARSHALL ISLANDS MH
AZERBAIJAN AZ MARTINIQUE MQ
BAHAMAS BS MAURITANIA MR
BAHRAIN BH MAURITIUS MU
BANGLADESH BD MAYOTTE YT
BARBADOS BB MEXICO MX
BELARUS BY MICRONESIA, FEDERATED STATES OF FM
BELGIUM BE MOLDOVA, REPUBLIC OF MD
BELIZE BZ MONACO MD
BENIN BJ MONGOLIA MN
BERMUDA BM MONTSERRAT MS
BHUTAN BT MOROCCO MA
BOLIVIA BO MOZAMBIQUE MZ
BOSNIA AND HERZEGOVINA BA MYANMAR MM
BOTSWANA BW NAMIBIA NA
BOUVET ISLAND BV NAURU NR
BRAZIL BR NEPAL NP
BRITISH INDIAN OCEAN TERRITORY IO NETHERLANDS NL
Country (ülke) ISO Code Country (ülke) ISO Code
BRUNEI DARUSSALAM BN NETHERLANDS ANTILLES AN
BULGARIA BG NEW CALEDONIA NC
BURKINA FASO BF NEW ZEALAND NZ
BURUNDI BI NICARAGUA NI
CAMBODIA KH NIGER NE
CAMEROON CM NIGERIA NG
CANADA CA NIUE NU
CAPE VERDE CV NORFOLK ISLAND NF
CAYMAN ISLANDS KY NORTHERN MARIANA ISLANDS MP
CENTRAL AFRICAN REPUBLIC CF OMAN OM
CHAD TD PAKISTAN PK
CHILE CL PALAU PW
CHINA CN PALESTINIAN TERRITORY, OCCUPIED PS
CHRISTMAS ISLAND CX PANAMA PA
COCOS (KEELING) ISLANDS CC PAPUA NEW GUINEA PG
COLOMBIA CO PARAGUAY PY
COMOROS KM PERU PE
CONGO CG PHILIPPINES PH
CONGO, THE DEMOCRATIC REPUBLIC OF THE CD PITCAIRN PN
COOK ISLANDS CK POLAND PL
COSTA RICA CR PUERTO RICO PR
CÔTE D'IVOIRE CI QATAR QA
CROATIA HR RÉUNION RE
CUBA CU ROMANIA RO
CYPRUS CY RUSSIAN FEDERATION RU
CZECH REPUBLIC CZ RWANDA RW
DENMARK DK SAINT HELENA SH
DJIBOUTI DJ SAINT KITTS AND NEVIS KN
DOMINICA DM SAINT LUCIA LC
DOMINICAN REPUBLIC DO SAINT PIERRE AND MIQUELON PM
ECUADOR EC SAINT VINCENT AND THE GRENADINES VC
EGYPT EG SAMOA WS
EL SALVADOR SV SAN MARINO SM
EQUATORIAL GUINEA GQ SAO TOME AND PRINCIPE ST
ERITREA ER SAUDI ARABIA SA
Country (ülke) ISO Code Country (ülke) ISO Code
ESTONIA EE SENEGAL SN
ETHIOPIA ET SERBIA AND MONTENEGRO CS
FALKLAND ISLANDS (MALVINAS) FK SEYCHELLES SC
FAROE ISLANDS FO SIERRA LEONE SL
FIJI FJ SINGAPORE SG
FINLAND FI SLOVAKIA SK
FRANCE FR SLOVENIA SI
FRENCH GUIANA GF SOLOMON ISLANDS SB
FRENCH POLYNESIA PF SOMALIA SO
FRENCH SOUTHERN TERRITORIES TF SOUTH AFRICA ZA
GABON GA SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS GS
GAMBIA GM SPAIN ES
GERMANY DE SRI LANKA LK
GHANA GH SUDAN SD
GIBRALTAR GI SURINAME SR
GREECE GR SVALBARD AND JAN MAYEN SJ
GREENLAND GL SWAZILAND SZ
GRENADA GD SWEDEN SE
GUADELOUPE GP SWITZERLAND CH
GUAM GU SYRIAN ARAB REPUBLIC SY
GUATEMALA GT TAIWAN TW
GUINEA GN TAJIKISTAN TJ
GUINEA-BISSAU GW TANZANIA, UNITED REPUBLIC OF TZ
GUYANA GY THAILAND TH
HAITI HT TIMOR-LESTE TL
HEARD ISLAND AND MCDONALD ISLANDS HM TOGO TG
HONDURAS HN TOKELAU TK
HONG KONG HK TONGA TO
HUNGARY HU TRINIDAD AND TOBAGO TT
ICELAND IS TUNISIA TN
INDIA IN TURKEY TR
INDONESIA ID TURKMENISTAN TM
IRAN, ISLAMIC REPUBLIC OF IR TURKS AND CAICOS ISLANDS TC
IRAQ IQ TUVALU TV
IRELAND IE UGANDA UG
Country (ülke) ISO Code Country (ülke) ISO Code
ISRAEL IL UKRAINE UA
ITALY IT UNITED ARAB EMIRATES AE
JAMAICA JM UNITED KINGDOM GB
JAPAN JP UNITED STATES US
JORDAN JO UNITED STATES MINOR OUTLYING ISLANDS UM
KAZAKHSTAN KZ URUGUAY UY
KENYA KE UZBEKISTAN UZ
KIRIBATI KI VANUATU VU
KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF KP VENEZUELA VE
KOREA, REPUBLIC OF KR VIET NAM VN
KUWAIT KW VIRGIN ISLANDS, BRITISH VG
KYRGYZSTAN KG VIRGIN ISLANDS, U.S. VI
LAO PEOPLE'S DEMOCRATIC REPUBLIC LA WALLIS AND FUTUNA WF
LATVIA LV WESTERN SAHARA EH
LEBANON LB YEMEN YE
LESOTHO LS ZAMBIA ZM
LIBERIA LR

Extra Eğitim® - [Link]

 HTML’DE ISO DİL KODLARI
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) ISO Language Codes (International Standards Organization Language Codes) (uluslararası standartlar organizasyonu dil kodları)
ile diller için kısaltmalar tanımlayabilirsiniz. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dokümanı içerisinde lang (dil) değerine kullanılabilir. Bir web sayfasının dilini
veya bir web sayfasının içeriğindeki bir bölümünü bildirmek için kullanılabilir. Bu değer arama motorları ve browser’lara (tarayıcılara) yardımcı olmak içindir. W3C (World Wide Web
Consortium) (dünya çapında ağ konsorsiyumu) önerisi göre lang, <html> etiketinin içine niteliği ile her web sayfası için birincil dili beyan etmelidir. Örnek : <html lang="en"> vs.

Language (dil) ISO Code Language (dil) ISO Code Language (dil) ISO Code
ABKHAZIAN ab HAITIAN CREOLE ht QUECHUA qu
AFAR aa HAUSA ha RHAETO-ROMANCE rm
AFRIKAANS af HAWAIIAN ROMANIAN ro
ALBANIAN sq HEBREW he, iw RUSSIAN ru
AMHARIC am HINDI hi SAMI (LAPPISH)
ARABIC ar HUNGARIAN hu SAMOAN sm
ARAGONESE an IBIBIO SANGRO sg
ARMENIAN hy ICELANDIC is SANSKRIT sa
ASSAMESE as IDO io SERBIAN sr
AYMARA ay IGBO SERBO-CROATIAN sh
AZERBAIJANI az INDONESIAN id, in SESOTHO st
BASHKIR ba INTERLINGUA ia SETSWANA tn
BASQUE eu INTERLINGUE ie SHONA sn
BENGALI (BANGLA) bn INUKTITUT iu SICHUAN YI ii
BHUTANI dz INUPIAK ik SINDHI sd
BIHARI bh IRISH ga SINHALESE si
BISLAMA bi ITALIAN it SISWATI ss
BRETON br JAPANESE ja SLOVAK sk
BULGARIAN bg JAVANESE jv SLOVENIAN sl
BURMESE my KANNADA kn SOMALI so
BYELORUSSIAN (BELARUSIAN) be KANURI SPANISH es
CAMBODIAN km KASHMIRI ks SUNDANESE su
CATALAN ca KAZAKH kk SWAHILI (KISWAHILI) sw
CHEROKEE KINYARWANDA (RUANDA) rw SWEDISH sv
CHEWA KIRGHIZ ky SYRIAC
CHINESE zh KIRUNDI (RUNDI) rn TAGALOG tl
CHINESE (SIMPLIFIED) zh-Hans KONKANI TAJIK tg
CHINESE (TRADITIONAL) zh-Hant KOREAN ko TAMAZIGHT
CORSICAN co KURDISH ku TAMIL ta
Language (dil) ISO Code Language (dil) ISO Code Language (dil) ISO Code
CROATIAN hr LAOTHIAN lo TATAR tt
CZECH cs LATIN la TELUGU te
DANISH da LATVIAN (LETTISH) lv THAI th
DIVEHI LIMBURGISH (LIMBURGER) li TIBETAN bo
DUTCH nl LINGALA ln TIGRINYA ti
EDO LITHUANIAN lt TONGA to
ENGLISH en MACEDONIAN mk TSONGA ts
ESPERANTO eo MALAGASY mg TURKISH tr
ESTONIAN et MALAY ms TURKMEN tk
FAEROESE fo MALAYALAM ml TWI tw
FARSI fa MALTESE mt UIGHUR ug
FIJI fj MAORI mi UKRAINIAN uk
FINNISH fi MARATHI mr URDU ur
FLEMISH MOLDAVIAN mo UZBEK uz
FRENCH fr MONGOLIAN mn VENDA
FRISIAN fy NAURU na VIETNAMESE vi
FULFULDE NEPALI ne VOLAPÜK vo
GALICIAN gl NORWEGIAN no WALLON wa
GAELIC (SCOTTISH) gd OCCITAN oc WELSH cy
GAELIC (MANX) gv ORIYA or WOLOF wo
GEORGIAN ka OROMO (AFAAN OROMO) om XHOSA xh
GERMAN de PAPIAMENTU YI
GREEK el PASHTO (PUSHTO) ps YIDDISH yi, ji
GREENLANDIC kl POLISH pl YORUBA yo
GUARANI gn PORTUGUESE pt

Extra Eğitim® - [Link]

 HTML URL ENCODING
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) URL Encoding (Uniform Resource Locator Encoding) (nizami kaynak bulucu kodlaması), karakterleri dönüştürmeye verilen
isimdir. URL'ler (Uniform Resource Locator) (nizami kaynak bulucular) sadece ASCII (American Standard Code for Information Interchange) (bilgi değişimi için amerikan standart kodlama sistemi) karakter seti
kullanarak internet üzerinden gönderilebilir. URL'ler (Uniform Resource Locator) (nizami kaynak bulucular), ASCII (American Standard Code for Information Interchange) (bilgi değişimi için amerikan standart
kodlama sistemi) kümesi dışında karakterler içerdiğinde, URL (Uniform Resource Locator) (nizami kaynak bulucu) geçerli bir ASCII (American Standard Code for Information Interchange) (bilgi değişimi için
amerikan standart kodlama sistemi) biçime dönüştürülmelidir. Bu nedenle URL Encoding (Uniform Resource Locator Encoding) (nizami kaynak bulucu kodlaması) hexadecimal (onaltılık) tarafından izlenen
bir % (yüzde) işareti ile güvenli olmayan ASCII (American Standard Code for Information Interchange) (bilgi değişimi için amerikan standart kodlama sistemi) karakterleri değiştirir. Örneğin; URL'ler (Uniform
Resource Locator) (nizami kaynak bulucular) boşluk içeremez ve URL (Uniform Resource Locator) (nizami kaynak bulucu) kodlamada normalde bir + (artı) işareti ile veya %20 ile bir boşluk değeri
değiştirilir. Javascript, PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page) (kişisel ana sayfa), ASP (Active Server Pages) (aktif sunucu sayfaları) vs. gibi yazılım dillerinde URL
Encoding (Uniform Resource Locator Encoding) (nizami kaynak bulucu kodlaması) kullanılabilecek fonksiyonlar vardır. Bu işlem için Javascript, encodeURI() fonksiyonunu, PHP (Hypertext
Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page) (kişisel ana sayfa) rawurlencode() fonksiyonunu ve ASP (Active Server Pages) (aktif sunucu sayfaları) ise [Link]() fonksiyonunu
kullanır. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) URL Encoding (Uniform Resource Locator Encoding) (nizami kaynak bulucu kodlaması) karakter tablosu aşağıda listelenmektedir.

ASCII Karakter URL Encoding ASCII Karakter URL Encoding ASCII Karakter URL Encoding ASCII Karakter URL Encoding
space %20 X %58 %90 È %C8
! %21 Y %59 ‘ %91 É %C9
" %22 Z %5A ’ %92 Ê %CA
# %23 [ %5B “ %93 Ë %CB
$ %24 \ %5C ” %94 Ì %CC
% %25 ] %5D • %95 Í %CD
& %26 ^ %5E – %96 Î %CE
' %27 _ %5F — %97 Ï %CF
( %28 ` %60 ˜ %98 Ð %D0
) %29 a %61 ™ %99 Ñ %D1
* %2A b %62 š %9A Ò %D2
+ %2B c %63 › %9B Ó %D3
, %2C d %64 œ %9C Ô %D4
- %2D e %65 %9D Õ %D5
. %2E f %66 ž %9E Ö %D6
/ %2F g %67 Ÿ %9F × %D7
0 %30 h %68 %A0 Ø %D8
1 %31 i %69 ¡ %A1 Ù %D9
2 %32 j %6A ¢ %A2 Ú %DA
3 %33 k %6B £ %A3 Û %DB
4 %34 l %6C ¤ %A4 Ü %DC
5 %35 m %6D ¥ %A5 Ý %DD
6 %36 n %6E ¦ %A6 Þ %DE
 ASCII Karakter URL Encoding ASCII Karakter URL Encoding ASCII Karakter URL Encoding ASCII Karakter URL Encoding
7 %37 o %6F § %A7 ß %DF
8 %38 p %70 ¨ %A8 à %E0
9 %39 q %71 © %A9 á %E1
: %3A r %72 ª %AA â %E2
; %3B s %73 « %AB ã %E3
< %3C t %74 ¬ %AC ä %E4
= %3D u %75 ­ %AD å %E5
> %3E v %76 ® %AE æ %E6
? %3F w %77 ¯ %AF ç %E7
@ %40 x %78 ° %B0 è %E8
A %41 y %79 ± %B1 é %E9
B %42 z %7A ² %B2 ê %EA
C %43 { %7B ³ %B3 ë %EB
D %44 | %7C ´ %B4 ì %EC
E %45 } %7D µ %B5 í %ED
F %46 ~ %7E ¶ %B6 î %EE
G %47 %7F · %B7 ï %EF
H %48 ` %80 ¸ %B8 ð %F0
I %49 %81 ¹ %B9 ñ %F1
J %4A ‚ %82 º %BA ò %F2
K %4B ƒ %83 » %BB ó %F3
L %4C „ %84 ¼ %BC ô %F4
M %4D … %85 ½ %BD õ %F5
N %4E † %86 ¾ %BE ö %F6
O %4F ‡ %87 ¿ %BF ÷ %F7
P %50 ˆ %88 À %C0 ø %F8
Q %51 ‰ %89 Á %C1 ù %F9
R %52 Š %8A Â %C2 ú %FA
S %53 ‹ %8B Ã %C3 û %FB
T %54 Œ %8C Ä %C4 ü %FC
U %55 %8D Å %C5 ý %FD
V %56 Ž %8E Æ %C6 þ %FE
W %57 %8F Ç %C7 ÿ %FF

Ayrıca ASCII (American Standard Code for Information Interchange) (bilgi değişimi için amerikan standart kodlama sistemi) aygıt kontrolü karakterleri de mevcuttur. %00 ile %1F arası
hexadecimal (onaltılık) değerleri donanım aygıtlarını kontrol etmek için tasarlanmıştır ve herhangi bir URL (Uniform Resource Locator) (nizami kaynak bulucular) içinde hiçbir etkisi olmayacaktır.
ASCII Karakter Description (Tanım) URL Encoding
NUL Null Character (Null karakteri) %00
SOH Start Of Header (başlığın başlangıcı) %01
STX Start Of Text (metnin başlangıcı) %02
ETX End Of Text (metin sonu) %03
EOT End Of Transmission (iletim sonu) %04
ENQ Enquiry (soruşturma) %05
ACK Acknowledge (kabul etmek) %06
BEL Bell (Ring) (çan (halka)) %07
BS Backspace (geri tuşu) %08
HT Horizontal Tab (yatay sekme) %09
LF Line Feed (satır besleme) %0A
VT Vertical Tab (dikey sekme) %0B
FF Form Feed (form besleme) %0C
CR Carriage Return (satır başı) %0D
SO Shift Out (kaydırıldı) %0E
SI Shift In (vardiya) %0F
DLE Data Link Escape (veri bağlantısı kaçış) %10
DC1 Device Control 1 (aygıt kontrol 1) %11
DC2 Device Control 2 (aygıt kontrol 2) %12
DC3 Device Control 3 (aygıt kontrol 3) %13
DC4 Device Control 4 (aygıt kontrol 4) %14
NAK Negative Acknowledge (onayı negatif) %15
SYN Synchronize (senkronize etmek) %16
ETB End Transmission Block (son iletim bloğu) %17
CAN Cancel (iptal) %18
EM End Of Medium (ortam sonu) %19
SUB Substitute (vekil) %1A
ESC Escape (kaçış) %1B
FS File Separator (dosya ayırıcı) %1C
GS Group Separator (grup ayırıcı) %1D
RS Record Separator (kayıt ayırıcı) %1E
US Unit Separator (birim ayırıcı) %1F

Extra Eğitim® - [Link]

 HTML’DE GET VE POST İSTEK YÖNTEMLERİ
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) client (istemci) ve server (sunucu) arasında bir istek ve yanıt için yaygın olarak kullanılan iki yöntem vardır.
Bunlar get ve post yöntemleridir. Get ve post yöntemleri tüm diğer yazılım dilleri ile %100 uyumlu olarak çalışabilmektedir.

Get

İstek verileri belirli bir kaynaktan gönderilir. Bir diğer deyiş ile form verilerini veya manuel olarak belirleyeceğimiz verileri adres çubuğundan veri gönderimi anlamına
gelmektedir. Örneğin; [Link]

• Gönderilecek olan istekler belleğe alınabilir ve istekler browser (tarayıcı) tarafından geçmişte saklanabilir, yer imlerine / sık kullanılanlara kayıt edilebilir.
• Gönderilecek olan istekler için adres çubuğu kullanılacağı için uzunluk kısıtlamalarına maruz kalabilir. (maksimum 2048 karakter)
• Gönderilecek olan istekler yine get metodu ile alınabilir. (kullanılacak yazılıma göre değişiklik gösterebilir)
• Gönderilecek olan isteklerde Türkçe karakter kullanılırsa URL Encoding’e (Uniform Resource Locator Encoding) (nizami kaynak bulucu kodlamalarına) maruz kalabilir.
• Gönderilecek olan isteklerde ileri ve geri butonları kullanılacak olur ise herhangi bir uyarı olmadan işlem yapılabilir.
• Gönderilecek olan isteklerde resim, video, ses, doküman vs. çok parçalı dosya içeriği mevcut olamaz. (application/x-www-form-urlencoded)
• Gönderilecek olan isteklerde get yöntemi post yönteminden daha az güvenlidir.
• Gönderilecek olan isteklerde tüm veriler herkesin görebileceği şekilde olduğu için hassas veriler içeriyorsa kullanılmamalıdır.

Post

İstek gönderdiğinde veriler belirtilen kaynaktan alınarak işlenir. Bir diğer deyiş ile form verilerini veya manuel olarak belirleyeceğimiz verileri, veri gönderim tag’ları (etiketleri)
aracılığı ile kapalı olarak gönderim anlamına gelmektedir. Örneğin; [Link]

• Gönderilecek olan istekler asla belleğe alınamazlar ve istekler browser (tarayıcı) tarafından geçmişte asla saklanamazlar, yer imlerine / sık kullanılanlara asla kayıt
edilemezler.
• Gönderilecek olan istekler kapalı olarak iletileceği için uzunluk kısıtlamalarına asla maruz kalmazlar. (maksimum karakter sınırı yok)
• Gönderilecek olan istekler yine post metodu ile alınabilir. (kullanılacak yazılıma göre değişiklik gösterebilir)
• Gönderilecek olan isteklerde Türkçe karakter kullanılırsa kapalı veri gönderileceği için URL Encoding’e (Uniform Resource Locator Encoding) (nizami kaynak bulucu kodlamalarına) asla
maruz kalmazlar.
• Gönderilecek olan isteklerde ileri ve geri butonları kullanılacak olur ise muhakkak bir uyarı olacaktır ve uyarı sonucuna göre işlem yapılacaktır.
• Gönderilecek olan isteklerde resim, video, ses, doküman vs. çok parçalı dosya içeriği mevcut olabilir. (application/x-www-form-urlencoded & multipart/form-data)
• Gönderilecek olan isteklerde post yöntemi get yönteminden daha çok güvenlidir.
• Gönderilecek olan isteklerde tüm veriler görünmeyen kapalı şekilde olduğu için hassas veriler içeriyorsa muhakkak bu metot kullanılmalıdır.
Extra Eğitim® - [Link]
 HTML’İN MUTLAK ŞARTI VE ANA ETİKETLERİ
Bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dokümanında muhakkak olması gereken tag’lar (etiketler) vardır. Bu tag’lar (etiketler) büyük harf küçük harf duyarlı
değillerdir. Fakat tavsiye edilen küçük harf ile yazılmasıdır. Bütün HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) tag’ları (etiketleri) < (küçük) ve > (büyük) işaretleri arasına
yazılır. Bazıları tek olarak kullanılır, bazıları ise açma kapama olarak kullanılırlar.

Tek olarak kullanım için örnek:

<br/>

Açma kapatma olarak kullanım için örnek:

<b>...</b>

Dikkat edilmesi gereken yer, bütün başlama kodları < (küçük) ve > (büyük) işaretleri arasında, bitirme kodları ise </ (küçük + kesme) ve > (büyük) işaretleri arasında olmalıdır.
Bunların eksik yazılması, sayfanın biçimsiz görünmesine neden olur.

Bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dokümanında bulunması şart olan ana tag’lar (etiketler) aşağıdaki gibidir.

<!doctype>

Sayfada kullanılan standart doğrultusunda browser’a (tarayıcıya) dokümanın yapısı hakkında ön bilgi vermek için kullanılan bir yöntemdir. Örneğin; Dokümanımız eğer XHTML
ise bu alanda bildirilir. Doctype (belge türü tanımı) tag’ının (etiketinin) kapama tag’ı (etiketi) veya kapatma işareti
(Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş metin işaretleme dili)
yoktur ve ayrıca küçük harf büyük harf duyarlılığı da yoktur. Doctype (belge türü tanımı) bildirimi HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kodlarının başına bir veya iki
satır olarak aşağıdaki şekilde eklenir.

Tek satırlı olarak kullanım için örnek:

<!doctype html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "[Link]

İki satırlı olarak kullanım için örnek:

<!doctype html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"

"[Link]

Burada dokümanımızın XHTML (Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş metin işaretleme dili) 1.0 versiyonu dikkate alınarak yazıldığı ve kullanılan bu kuralların
link’i (bağlantısı) verilmiştir. Link’in (bağlantının) kullanılmadığı şeklide vardır.

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 öncesi sürümler SGML (Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili) kökenli diller olduğu
için DTD (Document Type Definition) (belge türü tanımı) tanımlarına gereksinim duyardı. Ancak HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 ve daha sonrası sürümler SGML
(Standard Generalized Markup Language) (standart genelleştirilmiş işaretleme dili) kökenli olmadığı için buna gerek duymaz. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5'de bir sürüm
numarası yok çünkü, HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 geliştirilirken eğer buraya bir sürüm numarası verilse idi mevcut bütün web siteleri bu kapsam
dışında kalacaktı, ama bu şekilde bir tanım ile eski ve yeni tüm dokümanlar aynı kategoriye koyulmuş ve geçmişi de destekleyen bir yapıya kavuşturulmuş oldu.

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 kullanım için örnek:

<!doctype html>
 HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 ile kullanımı çok daha kolay ve kısaltılmıştır. Bu tanımlamadan sonra browser’lar (tarayıcılar) bu kurallara göre
sayfayı yorumlayacak ve buna göre bir görünümü kullanıcıya sunacaktır. Browser’lar (tarayıcılar) kullanılan doküman tip tanımlamasında DTD’ye (Document Type Definition) (belge türü
tanımına) göre sayfayı analiz eder. Güzel bir kodlama, HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) veya XHTML (Extensible Hypertext Markup Language) (genişletilebilir büyütülmüş
metin işaretleme dili) dokümanın onaylanmış halidir. Kodlamamızın doğruluğunu biz yazılımcılar genellikle [Link] adresinden kontrol ederiz. Ancak bu özelliği bir çok
IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) içerisinde de bulmamız mümkündür. Örneğin; Adobe Dreamweaver vs. Doğrulama işlemi önemlidir çünkü bizim
kodlarımızı doğru yazdığımızı kontrol eder. Aslında yeni nesil browser’lar (tarayıcılar) bir tanım yapılmasa daha standart modda belgeyi tanımladığı için doctype’ın (belge türü tanımının)
pek bir geçerliliği kalmamış olacaktır ama yine de bir tanım yapmak kesinlikle iyidir çünkü Internet Explorer tarzı browser’ların (tarayıcıların) ne yapacağı pek belli olmuyor.

Basit bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) sayfası HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 4.1 yapısına göre aşağıdaki şekildedir.

<!doctype html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "[Link]

<html xmlns="[Link] lang="tr" xml:lang="tr">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>...</title>

</head>

<body>

</body>

</html>

Basit bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) sayfası HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 yapısına göre aşağıdaki şekildedir.

<!doctype html>

<html lang="tr">

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>...</title>

</head>

<body>

</body>

</html>
 <!doctype>

Web sayfasının doküman türü bildirimini tanımlar. Sayfada kullanılan web standardını browser’a (tarayıcıya) dökümanın yapısı hakkında ön bilgi verir.

<html>…</html>

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dokümanlarını çevreleyen kapsayıcı bir tag’dır (etikettir). HTML (Hyper Text Markup Language) (zengin metin işaretleme dili)
dokümanının başladığı ve bittiği yerleri belirtir. Her web dokümanında bu sınırlar belirtilir. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 öncesinde tanımımız olarak
<html xmlns="[Link] lang="tr" xml:lang="tr"> şeklinde idi. Buradaki xmlns değeri bu dokümanın ana çatısının [Link] kullandığını
gösteriyor. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5 ana çatısı belli olduğu için tekrar tanımlamaya gerek duymuyor ve ayrıca iki adet dil tanımının da gereksiz
olduğunu kabul ediyor ve sonuçta HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) 5’deki tanımımız <html lang="tr"></html> şeklinde oluyor.

<head>...</head>

Web sayfasında görüntülenmeyen, ama web sayfası ile ilgili bilgileri veren ve istenirse sayfanın bazı yapısal özelliklerinin belirlenebildiği bölümdür.

<meta>

Sayfanın arama motorları için bilgilerinin tanımlanmasını sağladığı gibi, içeriklerimizin kodlama biçimlerini de belirler. <meta> etiketleri browser’lar (tarayıcılar) için de bilgileri
bulundururlar. Örneğin; Sayfanın karakter kodlaması, içeriğin önbelleğe alınıp alınmayacağı vs.

<title>…</title>

Sayfanın adını / başlığını belirtir. Browser’da (tarayıcıda) web sayfasının adı / başlığı olarak görünür. Bazı arama motorlarında web sayfalarının indekslenmesinde kullanılır.
Ad / Başlık verilmesi zorunlu değildir, ama her web dokümanına, o dokümanın içeriğine uygun bir ad / başlık vermek son derece önemlidir.

<body>…</body>

Web sayfasının gövdesini belirler. Client’e (istemciye) sunulacak her şey bu bölümde yer alır.
Extra Eğitim® - [Link]
 HTML GLOBAL ATTRIBUTES
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) elemanlara, nesnelere ve işlevlere özellikler kazandırılabilir. HTML’in (Hyper Text Markup Language) (zengin metin
en önemli yapı taşlarından birisi global attributes’idir (standart özellikleridir). HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) tabanlı tüm web sayfalarında
işaretleme dilinin)
kullanılmakla beraber vazgeçilemez özellikleri kapsamaktadır. Bu özellikler ve nitelikler herhangi bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elemanında, nesnesinde
veya işlevinde kullanılabilir.

Attribute (özellik) Description (tanım)

accesskey Nesneye klavyeden bir kısayol tuşu tanımlar.
class Nesneye CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ile oluşturulmuş bir veya daha fazla sınıf ataması tanımlar.
contenteditable Nesnenin düzenlenip düzenlenemeyeceğini tanımlar.
contextmenu Nesneyi bir menü ile ilişkilendirir. Nesnenin bağlam menüsü de denilebilir. Nesneye sağ tıklamalarda açılacak olan menü ilişkilendirilmesidir.
data-* Sayfa veya uygulamaya özel verileri saklamak, tutmak veya yakalamak için kullanılır.
dir Nesnedeki içeriğin yazılış yönünü tanımlar.
draggable Nesnenin sürüklenebilir olup olmadığını tanımlar.
dropzone Nesne sürükle bırak işlemi yapıldıktan sonra tarayıcının ne yapacağını tanımlar. Sürüklenen verilerin kopyalandığını da belirtir.
hidden Nesnenin artık veya uygun olmadığını belirtir. Gizlemelerde veri tutma işlemlerinde kullanılır.
id Nesneye benzersiz bir kimlik tanımlar.
lang Nesne içeriğinin dil tanımlamasını yapar.
spellcheck Nesne içeriğinin dil bilgisi ve yazım kurallarının denetlenmesini sağlar.
style Nesneye satır içi CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) tanımlar.
tabindex Nesnelerin sekme sırasını tanımlar.
title Nesneye başlık tanımlar.
translate Nesnenin başka dile çevrilip çevrilmeyeceğini tanımlar.

Extra Eğitim® - [Link]

 HTML GLOBAL ATTRIBUTES TARAYICI UYUMLULUKLARI
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) kullanılabilir olan global attributes (standart özellikler) için browser’ların (tarayıcıların) uyumluluk göstermesi ve ilgili
özelliği tanıyabilmesi ve aynı zamanda da çalıştırabilir olması gerekmektedir. HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) kullanılabilir olan global attributes’in
(standart özelliklerin) browser (tarayıcı) uyumluluk tablosu aşağıda listelenmektedir.

Attribute (özellik)
accesskey Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesneye klavyeden bir kısayol tuşu tanımlar.
Attribute (özellik)
class Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesneye CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ile oluşturulmuş sınıf ataması tanımlar.
Attribute (özellik)
contenteditable Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnenin düzenlenip düzenlenemeyeceğini tanımlar.
Attribute (özellik)
contextmenu Hayır Hayır Evet Hayır Hayır Hayır Hayır
Web sayfası belgesinin içerisinde bulunan nesneyi bir menü ile ilişkilendirir.
Attribute (özellik)
data-* Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan sayfa veya uygulamaya özel verileri saklamak, tutmak veya yakalamak için kullanılır.
Attribute (özellik)
dir Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnedeki içeriğin yazılış yönünü tanımlar.
Attribute (özellik)
draggable Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnenin sürüklenebilir olup olmadığını tanımlar.
Attribute (özellik)
dropzone Hayır Hayır Hayır Hayır Hayır Hayır Hayır
Web sayfası belgesinin içerisinde bulunan nesnenin sürükle bırak işlemi yapıldıktan sonra tarayıcının ne yapacağını tanımlar.
Attribute (özellik)
hidden Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnenin artık veya uygun olmadığını belirtir.
Attribute (özellik)
id Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesneye benzersiz bir kimlik tanımlar.
Attribute (özellik)
lang Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnenin içeriğinin dil tanımlamasını yapar.
Attribute (özellik)
spellcheck Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnenin içeriğinin dil bilgisi ve yazım kurallarının denetlenmesini sağlar.
Attribute (özellik)
style Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesneye satır içi CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) tanımlar.
Attribute (özellik)
tabindex Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesnelerin sekme sırasını tanımlar.
Attribute (özellik)
title Evet Evet Evet Evet Evet Evet Evet
Web sayfası belgesinin içerisinde bulunan nesneye başlık tanımlar.
Attribute (özellik)
translate Hayır Hayır Hayır Hayır Hayır Hayır Hayır
Web sayfası belgesinin içerisinde bulunan nesnenin başka dile çevrilip çevrilmeyeceğini tanımlar.

Extra Eğitim® - [Link]

 JAVASCRIPT NEDİR?
Javascript, client (istemci) tarafında (bilgisayar, tablet, telefon vs.) çalışan son derece gelişmiş bir script (senaryo) dilidir. İnternet üzerinde kullanılan script (senaryo) dilleri arasında
en çok kullanılan dil olmakla birlikte birçok hazır kütüphanenin de (JQuery, AngularJS, NodeJS, ReactJS, Bootstrap çatısı vs.) temelini oluşturmaktadır. Javascript, bazı sitelerde her ne kadar
bir programlama dilidir dense de bir programlama dili olarak tanımlanamaz. Çünkü Javascript kodlarıyla kendi başına çalışarak bir program yazılamaz. Javascript’in komut yapısı
hemen hemen C / C++, Java veya PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page) (kişisel ana sayfa) gibi dillerle aynıdır. Bu nedenle daha önce C / C++, Java veya
PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) (Personal Home Page) (kişisel ana sayfa) gibi dillerle uğraşanlar Javascript dilinin komut yapısını biliyor sayılır.

Web siteleri içerisinde %100'e yakın oranda kullanılan bir dildir ve bu nedenle Javascript dili etkileşimli web sitelerinin vazgeçilmezlerindendir. Javascript, client (istemci) ile
tam etkileşimi sağladığı ve HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kodları arasında gömülü olarak kullanılabildiği için son derece hızlıdır. Ayrıca Javascript kodlarını
çalıştırmak için herhangi bir browser (tarayıcı) haricinde ek olarak fazladan özel bir derleyiciye ihtiyacınız yoktur. Çünkü tüm browser’lar (tarayıcılar) içerisinde bulunan Javascript
Engine (Javascript motoru) sayesinde Javascript komutlarını yorumlayarak işlemleri yerine getirebilir. Javascript kodlamaları birçok özel yazılımda, game engines’da (oyun motorlarında)
vs. uygulamalar içerisinde de %100 uyumlu olarak çalışabilmektedir.

Javascript, client (istemci) ile etkileşebilmek için event (olay) yönelimli programlama metodunu kullanır. Ayrıca Javascript OOP (Object Oriented Programming) (nesne tabanlı
programlama) imkânı da sunmaktadır. Event’lar (olaylar), HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) gövdesinin yüklenmesi, bir butona tıklama, bir formun gönderim isteği,
bir alana veya içeriğe tıklanması, zamanlamalı işlemler, bir input (giriş) alanında değişiklik, tıklama veya üzerine gelinmesi, klavye tuşlarına basılması, pencerenin boyut değişimleri
vs. gibi birçok işlem olabilir. Event (olay) olduğunda, kod, fonksiyon veya sınıf tetiklenerek script (senaryo) çalışır ve işlem gerçekleşir. Bu neticede client (istemci) ile tam etkileşim
sağlanmış olur.
Extra Eğitim® - [Link]
 JAVASCRIPT’İN TARİHÇESİ
Javascript, ilk olarak o zamanlarda Netscape’te ve şimdi de Mozilla’da çalışan Brendan Eich tarafından Mayıs 1995 yılında geliştirilmiş olup, geliştirme aşamasında ilk adı
Netscape’in kurucusu Marc Andreessen tarafından seçilen Mocha olmasına rağmen, Eylül 1995 tarihinde Livescript olarak değiştirildi. Sun Micro Systems'dan marka lisansı
alındıktan sonra, Aralık 1995 tarihinde Netscape Navigator 2.0 Beta 3 ile birlikte piyasaya sürüldü ve ismi Javascript olarak değiştirildi. Bu, Java’nın o zamanlardaki popülerliğini
kullanarak yapılan bir çeşit pazarlama hareketiydi. Javascript dili, C, Scheme, Java, Perl, Python, Self dillerinden etkilenmiş ve geliştirilmiştir. JScript, [Link], Objective-J,
TIScript dillerinin oluşturulması için kullanılmış ve gelişmesine yardımcı olmuştur. Javascript dilini, C dilinin web sayfalarına uyarlanmış basit sürümü olarak düşünülebilirsiniz.
Javascript dili isim benzerliğine rağmen Java ile birbirinden bağımsız ve farklı dillerdir.

Javascript'in isim değişikliği ile Netscape'in Java teknolojilerine (Java Applet) (Java uygulaması) destek vermesi yaklaşık olarak aynı tarihlere denk gelir. Microsoft ile Netscape'in
web teknolojileri ve platformları alanında yarıştığı bir dönemde Netscape, Sun Micro Systems'ın geliştirdiği Java platformuna destek vererek dağıtık bir işletim sistemi oluşturmayı
öngörüyordu. Javascript ise, Visual Basic'in yaptığı gibi, profesyonel olmayan programcıları hedefleyen daha basit bir betik dili olarak düşünülmekteydi.

Microsoft, 1996 yılında Internet Explorer 3.0 ile birlikte JScript ve VBScript betik dillerini yayınladı. JScript Netscape'in Javascript'ine benzerken VBScript ise Visual Basic
temelliydi ve var olan Visual Basic programcılarının kolay bir geçiş yapmasını hedefliyordu. Aynı dönemde Microsoft ilk defa CSS (Cascading Style Sheets) (basamaklı stil şablonları veya
basamaklı biçim sayfaları) desteği de sağladı ancak hem CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) hem de JScript desteği Netscape'in o zamana kadar
sağladıkları ile tutarlı çalışmıyordu. Bu durum web tasarımcıları ve geliştiricileri arasında bir kargaşa çıkartmış ve browser (tarayıcı) savaşlarının ilk yıllarında sitelerin altında tipik
olarak görülen en iyi Internet Explorer ile izlenir ya da en iyi Netscape ile izlenir gibi logoların ve bilgilendirme metinlerinin ortaya çıkmasına neden olmuştur.

1996 yılının Kasım ayında Netscape firması Javascript'in endüstri standardı olarak belirlenmesi amacıyla Ecma International firmasına başvuruda bulunduğunu ilan etti.
Bunun sonucunda standardize edilen sürüm EcmaScript olarak isimlendirildi ve 1997 yılının Haziran ayında Ecma International, Ecma-262 belirtiminin ilk sürümünü yayımladı.
Haziran 1998'de ISO/IEC-16262 (International Standards Organization) (uluslararası standartlar organizasyonu) / (International Electrotechnical Commission) (uluslararası elektroteknik komisyonu) standardına
uyumlu hale getirilecek değişiklikler yapılarak ikinci sürüm, Aralık 1999'da ise üçüncü sürüm yayımlandı. EcmaScript'in dördüncü sürümü üzerinde ciddi bir çalışma yapılmasına
rağmen asla tamamlanamadı, ancak beşinci sürüm için önemli bir ilham kaynağı oldu. Beşinci sürüm 2009 yılının Aralık ayında yayımlandı. EcmaScript'in şu an geçerli olan son
standart belirtimi, Haziran 2011 tarihinde yayımlanan 5.1 sürümüdür ve Javascript 1.8.5 tarafından desteklenmektedir. Başlangıçta sadece Netscape tarafından desteklenen dil,
şimdi tüm browser’lar (tarayıcılar) tarafından desteklenmekte ve kullanılmaktadır. Javascript’in performansı, gücü ve marifetleri ilerleyen yıllarda fark edilecekti ve eşsiz bir hazine
olacaktı. Günümüz teknolojilerinde özellikle web yazılımlarının bel kemiği rolünü üstlenecekti.
Extra Eğitim® - [Link]
 JAVASCRIPT’İN DOSYA YAPISI VE GELİŞTİRİCİLERİ
Javascript, son olarak 2009 yılında Ecma International tarafından Ecma-262 sürümü ile standartlaştırılmıştır. Javascript’in geliştiricileri, dosya uzantısı, mime tipi, kod tipi,
format tipi, çalışma ortamı, etkilendiği diller, etkilediği diller ve sürüm bilgisi aşağıda belirtilmiştir.

Geliştirici : Netscape Communications Corporation, Mozilla Foundation, Ecma International

Dosya uzantısı : .js

MIME tipi : text/javascript, application/javascript, application/x-javascript, application/ecmascript, text/ecmascript

Kod tipi : Dinamic (dinamik)

Format tipi : Scripting Language (senaryo dili)

Çalışma ortamı : Client (istemci) > Browser (tarayıcı) / Server (sunucu) > (NodeJS)
(Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Opera, Safari, Yandex Browser vs.)

Etkilendiği diller : C, Scheme, Java, Perl, Python, Self

Etkiledikleri diller : JScript, [Link], Objective-J, TIScript

Güncel sürüm : 1.8.5

Bir önceki sürüm : 1.8.2

Extra Eğitim® - [Link]
 JAVASCRIPT’İN FAYDALARI
• Tamamen ücretsizdir.
• Javascript web siteleri içerisinde %100'e yakın oranda kullanılan bir dildir ve bu nedenle Javascript dili etkileşimli web sitelerinin vazgeçilmezlerindendir.
• Javascript kodlarını çalıştırmak için herhangi bir browser (tarayıcı) haricinde ek olarak fazladan özel bir derleyiciye ihtiyacınız yoktur. Çünkü tüm browser’lar (tarayıcılar)
içerisinde bulunan Javascript Engine (Javascript motoru) sayesinde Javascript komutlarını yorumlayarak işlemleri yerine getirebilir.
• Daha önce C / C++, Java veya PHP (Hypertext Preprocessor) (üstün yazı ön işlemcisi) / (Personal Home Page) (kişisel ana sayfa) gibi dillerle ilgilenenler, Javascript dilinin komut yapısını
biliyor sayılır. Ayrıca Javascript kodlarını eğer herhangi bir IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) programınız bulunmuyorsa, bütün Windows, Linux,
Mac vs. işletim sistemlerinde bulunan not defteri programıyla yazabiliriz.
• Javascript, NodeJS vs. platformlar sayesinde server (sunucu) tarafında da yaygın olarak kullanılmaktadır ve tüm hosting (barındırma) ve server (sunucu) dahilindeki işletim
sitemlerinde sorunsuz olarak çalışabilir.
• Javascript client (istemci) tarafında çalıştığı zaman client'te (istemcide) yapılabilecek işleri yapar, server (sunucu) tarafında çalıştığı zaman server'da (sunucuda) yapılabilecek işleri
yapar.
• Javascript web sitelerini durgun halinden çıkararak dinamik bir yapıya kavuşturur. Böylece web sitesi dokümanları kullanıcının bilgisayarına yüklendikten sonra bile
düzenlenebilir.
• Javascript, client (istemci) ile tam etkileşimi sağladığı ve HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kodları arasında gömülü olarak kullanılabildiği için son
derece hızlıdır. Client (istemci) tarafından gelen işlemleri mikro saniyeler içerisinde yapabilir. Ayrıca birçok programlama dili ile de iç içe kullanılabilir.
• Javascript birçok hazır kütüphanenin (JQuery, AngularJS, NodeJS, ReactJS, Bootstrap çatısı vs.) temelini oluşturmaktadır.
• Javascript prototip tabanlı, dinamik türlere ve birinci sınıf fonksiyonlara sahip bir dil olup, interaktif ve fonksiyonel programlama prensiplerine sahiptir. Ayrıca Javascript,
OOP (Object Oriented Programming) (nesne tabanlı programlama) imkânı da sunmaktadır.
• Javascript dinamik bağlama mekanizması kullanılır yani nesneye verilen referanslar run time (çalışma zamanı) kontrol edilir.
• Client (istemci) taraflı Javascript kodları, server’da (sunucuda) yorumlanmak yerine, kullanıcının browser’ı (tarayıcısı) üzerinde çalıştıkları için hem server’a (sunucuya) daha az
yük olur hem de kullanıcıya minimum internet trafiği sağlar. Ayrıca zaman kaybının da önlenmesine destek olur.
• Javascript ile web sitesi dahilinde bulunan sayfa içeriklerinin gerek tamamına gerekse bir kısmına hükmedilebilir. Çünkü Javascript kullandığı her unsuru nesne olarak
algılar. Javascript tüm event’lara (olaylara) karşılık verebilir.
• Javascript kodlamaları birçok özel yazılımda, game engines’da (oyun motorlarında) vs. uygulamalar içerisinde de %100 uyumlu olarak çalışabilmektedir.
• Javascript, internet üzerinde en yaygın script (senaryo) dili olması nedeniyle, internet üzerinde sayılamayacak kadar çok kaynak, doküman ve makale bulmak mümkündür.
Extra Eğitim® - [Link]
 JAVASCRIPT İLE NELER YAPILABİLİR?
Javascript ile sayılamayacak kadar çok işlem yapılabilir. En azından fikir olması için birkaç örnek verecek olur isek;

• Durağan olmayan ve tamamen dinamik bir yapıya sahip web siteleri yapılabilir.
• Mobil programlama içerisinde kullanılabilir.
• Tarayıcı oyunları yapılabilir. Ayrıca birçok özel yazılımda, game engines’da (oyun motorlarında) vs. uygulamalar içerisinde de kullanılabilir.
• NodeJS vs. platformlar sayesinde server (sunucu) taraflı işlemler yapılabilir.
• Asenkron bir şekilde server (sunucu) ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanabilir.
• Sayfa refresh (yenileme) olmadan server’dan (sunucudan) taleplerde bulunulabilir.
• Client (istemci) için cookie (çerez) yazılabilir.
• Event (olay) modeli sayesinde tüm event’lara (olaylara) çok hızlı bir şekilde karşılık verebilir.
• Değişkenler, fonksiyonlar veya sınıflar üreterek her alana etki edilebilen işlemler yapılabilir.
• Yazılan kodlara karar yapıları eklenerek şartlara göre değişen kod yapıları oluşturulabilir.
• Duruma uygun çalışan uygulamalar yapılabilir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) nesne modeli sayesinde CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları)
işlemleri yapılabilir.
• Canvas (tuval) 2D bağlam sistemi sayesinde eşsiz çizim, animasyon, medya, uygulama vs. çok gelişmiş işlemler yapılabilir.
• Her seviyede API (Application Programing Interfaces) (uygulama programlama arayüzleri) yazılabilir.
• Browser (tarayıcı) penceresi kontrolleri ve işlemleri yapılabilir.
• Sayfa ve içerik kontrolleri işlemleri yapılabilir.
• Sürükle ve bırak işlemleri yapılabilir.
• Simülasyon işlemleri yapılabilir.
• Animasyon işlemleri yapılabilir.
• Efekt işlemleri yapılabilir.
• Slaytlar ve resim galerileri yapılabilir.
• Form işleme ve kontrol işlemleri yapılabilir.
• Zamanlanmış işlemler yapılabilir.
Extra Eğitim® - [Link]
 JAVASCRIPT KÜTÜPHANESİ NE DEMEKTİR?
Javascript kütüphanesi, Javascript alt yapısına sahip, içerisinde bazı özellikleri önceden hazırlanmış bir takım işlevler bulunan, hızlı ve daha düzenli kod yazmayı sağlayan
bir yapıdır. Bu yapılar framework (çatı) yada library (kütüphane) olarak adlandırılır. Kütüphane kaynak kodları bazen şifrelenmiş halde, bazen de açık kaynak kodu ile dağıtılmaktadır.
Açık kaynak kodlu kütüphanelere eklentiler yapılabilir. Fakat eklenti yapabilmek için ilgili yazılım dilini çok iyi bilmek gerekir. Javascript’in sayılamayacak kadar kütüphanesi
mevcuttur. Bu kütüphanelerin en bilinenleri ve en yaygın olarak kullanılanları JQuery, AngularJS, NodeJS, ReactJS ve Bootstrap’ın çatısıdır. Javascript kütüphaneleri yardımıyla
yapılabilecek şeyler hayal gücünün sınırlarını zorlamaktadır.

Kütüphane kullanımının avantajları

• Genellikle ücretsizdir.
• Son derece basit bir kullanımları vardır.
• Büyük projeler geliştirirken kod karmaşıklığını önler ve düzen içerisinde projenin gelişimi sağlar.
• Yazılım geliştiricilerin işlerini kolaylaştırır.
• İçerisindeki metotları sayesinde yapılmak istenilen pek çok işlemi çoğu zaman kısa bir kodla veya tek bir satırda halledilmesini sağlar.
• İhtiyaç halinde geliştiriciler eklemeler yapabilir.
• Kod yazma sürecini azaltır. Birçok hazır özellik sayesinde zaman kazandırır.
• Daha kolay ve daha kaliteli kod yazmayı sağlar.
• Tarayıcı farklılıklarından doğan pek çok sorunla boğuşmayı engeller.
• Nesne tabanlı yapıları itibariyle çabuk benimsenirler.
• Ekip olarak geliştirilen büyük projelerde kodlar daha anlaşılır olur.
• Onlarca kişinin geliştirdiği bu kütüphaneler ile güvenli projeler üretilebilir.

Kütüphane kullanımının dezavantajları

• Çoğu zaman programlama diline hakim olmadan kod yazılmasını sağlaması ve bu nedenle hataların çözülememesi.
• Ufak ve duyulmamış bir kütüphane olduğunda her zaman güncel olmaması.
• Şifrelenmiş kütüphanelerin dış bağlantı, virüs veya zararlı kod içerebilirlik olasılığı yada açık kaynak kodlu kütüphanelerde programlama dilini bilmeyen yazılım geliştiricileri
için fark edemeyecekleri zararlı kodlar içerebilir olması.
• Bazı kütüphanelerin %100 stabil çalışmaması, diğer kütüphanelerle çakışması veya programlama dilleri ile %100 uyumlu olmaması.
Extra Eğitim® - [Link]
 CSS NEDİR?
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), HTML’e (Hyper Text Markup Language) (zengin metin işaretleme diline) ek olarak metin ve format biçimlendirme
alanında fazladan olanaklar sunan bir doküman biçimlendirme dili ve web teknolojisidir.

İnternet sayfaları için genel şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak da sayfaların, alanların, arkaplanların, formların, butonların, input’ların (girişlerin),
resimlerin, videoların, seslerin ve dokümanlar gibi dosyaların, metinlerin, tuvallerin vs. gerek stillerini (renk, yazı tipi, boyut vs.), gerek konumlarını, gerekse de özelliklerini değiştirmek
için de kullanılabilir. CSS’in (Cascading Style Sheets) (Basamaklı Stil Şablonlarının veya Basamaklı Biçim Sayfalarının) en önemli özelliği kullanımındaki esnekliktir. Genellikle bir web sayfası
içerisinde birbiriyle uyumlu birkaç renk, birkaç yazı tipi, birkaç taslak vs. stiller kullanılır. Kullanılan bu stilleri her sayfada ayrı ayrı tekrar belirtmek yerine CSS (Cascading Style Sheets)
(basamaklı stil şablonları veya basamaklı biçim sayfaları) yardımıyla bir defa tanımlayıp bütün web sayfalarında ortak olarak kullanabiliriz. Bu sayede sayfaların hafızadaki boyutunu hatırı
sayılır bir oranda küçülecek, değişik HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) sayfalarında kullanılmasını da sağlayacak, aynı sayfanın değişik aygıtlara göre
formatlandırılmasını da kolaylaştıracak olup, sunumla yapıyı ayırarak değişiklik yapılmasını da kolaylaştıracaktır.

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kuralları üç parçadan oluşur. Her CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim
sayfaları) kuralı bir seçici ve bir tanımlama bölümüne sahiptir. Tanımlama bölümü de bir özellik ve bir değerden meydana gelir.

seçici { özellik:değer }

Bir CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kuralında seçici olarak bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) ögesinin
ismi, kimliği veya sınıfı kullanılabilir.

body, div, p, a, span vs.

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kurallarında özellik olarak ise sadece belirli tanımlı maddeler kullanılabilir. Değer olarak ise her
özelliğin alabileceği kendi değerleri vardır. Tanımlama bölümünde birden fazla özellik giriliyorsa aralarına ; (noktalı virgül) koyulmalıdır. Sadece tek bir değer girilecek olur ise sonuna
; (noktalı virgül) koyulmayabilir ancak değerin sonuna ; (noktalı virgül) eklemenin hiçbir sakıncası yoktur.

body{ background-color:black; }

div{ font-size:10px; font-color:blue; }

Aynı değerleri vereceğimiz iki seçiciyi aralarına , (virgül) koyarak tek seferde tanımlayabiliriz.

body, div, p, a, span { font-size:12pt; font-color:black; }

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları HTML’in (Hyper Text Markup Language) (zengin metin işaretleme dilinin) sayfa içeriğinde head veya
body tag’ları (etiketleri) içerisine yazılabilir. CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodlarının, HTML (Hyper Text Markup Language) (zengin metin işaretleme
dili) dosyasına eklenmesi ise dört farklı şekilde yapılabilir.

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dosyası harici CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) dosyasına /
dosyalarına referans verebilir.

<link rel="stylesheet" type="text/css" href="[Link]">

HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dosyası tag (etiket) içi CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) içerebilir.

<div style="color:red;">...</div>
 HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dosyası satır içi CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) içerebilir.

<style>

div{ color:red; }

</style>

Javascript dili kullanılarak HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) dosyasına CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim
sayfaları) eklenebilir.

<script type="text/javascript" language="javascript">

var islem = [Link]("style");

[Link] = "text/css";

[Link] = "div { color:red; }";

[Link](islem);

</script>
Extra Eğitim® - [Link]
 CSS’İN TARİHÇESİ
HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) büyüdükçe ve geliştikçe talepleri karşılamak daha karmaşık bir hal aldı ve web sitelerinin tutarlı bir görünüme
kavuşması zorlaştı. CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ilk kez 10 Ekim 1994 tarihinde, CERN’de (Conseil Européen pour la Recherche Nucléaire) (avrupa
nükleer araştırma merkezinde) Tim Berners - Lee ile birlikte çalışmakta olan Håkon Wium Lie tarafından önerilmiştir. Bu arada web için çok sayıda başka biçimlendirme dilleri de aynı
zamanda teklif edilmişti. Bunun ardından W3C (World Wide Web Consortium) (dünya çapında ağ konsorsiyumu), çeşitli forum ve e-posta listelerinde yapılan birkaç farklı stil sayfası dili taslağını
da inceleyerek ve göz önünde bulundurarak 1996 yılında ilk CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) önerisini sunmuştur. Bu sayede ilk CSS
(Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) yani CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) 1.0 kullanılmaya başlanmıştır.
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) web siteleri için stil sayfaları sağlamak için geliştirilmiştir.

İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlar, W3C’nin (World Wide Web Consortium) (dünya çapında ağ konsorsiyumunun) 12
Mayıs 1998’de CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) 2.0 önerisini sunmasıyla sonuçlanmıştır. Bunun hemen ardından çalışmalarına başlanan
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) 3 ise, W3C’nin (World Wide Web Consortium) (dünya çapında ağ konsorsiyumunun) 19 Haziran 2012’de CSS (Cascading
Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) 3.0 önerisini sunmasıyla sonuçlanmıştır. CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) 3.0’ın
geliştirme ve detaylandırma çalışmaları halen sürmektedir. Bu çalışmalar ilerleyen tarihlerde CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) 4’ünde temeli
olacaktır.

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) günümüzde tüm browser’lar (tarayıcılar) tarafından desteklenmekte ve kullanılmaktadır. Günümüz
teknolojilerinde özellikle web yazılımlarında, CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kullanım kolaylığı, esnekliği, performansı, gücü ve marifetleri
sayesinde web sayfalarının biçimlendirilmesi konusunda vazgeçilmez bir dil olmuştur.
Extra Eğitim® - [Link]
 CSS’İN DOSYA YAPISI VE GELİŞTİRİCİLERİ
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), W3C (World Wide Web Consortium) (dünya çapında ağ konsorsiyumu) tarafından standartlaştırılmaktadır.
CSS’in (Cascading Style Sheets) (basamaklı stil şablonlarının veya basamaklı biçim sayfalarının) geliştiricisi, dosya uzantısı, mime tipi, kod tipi, format tipi, çalışma ortamı ve sürüm bilgisi aşağıda
belirtilmiştir.

Geliştirici : W3C (World Wide Web Consortium) (dünya çapında ağ konsorsiyumu)

Dosya uzantısı : .css

MIME tipi : text/css

Kod tipi : Text (metin)

Format tipi : Document Markup Language (doküman işaretleme / biçimlendirme dili)

Çalışma ortamı : Client (istemci) > Browser (tarayıcı)

(Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Opera, Safari, Yandex Browser vs.)

Güncel sürüm : 3.0

Bir önceki sürüm : 2.0

Extra Eğitim® - [Link]
 CSS’İN FAYDALARI
• Tamamen ücretsizdir.
• Web siteleri içerisinde %100'e yakın oranda kullanılan bir dil olması nedenle CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) web sitelerinin
vazgeçilmezlerindendir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ile tüm cihazlara (bilgisayar, telefon, tablet vs.) uygun responsive (duyarlı) tasarımlar hazırlanabilir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), belge, sayfa, alan, konumlandırma, renk, metin, ses, resim, video vs. yönetimler için eşsiz bir
biçimlendirme olanağı ve esneklik sunar. Ayrıca belge içerisinde sayfaya efekt ve geçiş işlemleri yapabilmemizi de sağlar.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodlarını çalıştırmak için hiçbir ek yazılıma gereksinim duymazsınız. Tek gerekli olan her
bilgisayarda bulunan bir browser’dır (tarayıcıdır).
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), diğer dillerine göre öğrenilmesi daha kolay bir dildir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodlarını eğer herhangi bir IDE (Integrated Development Environment) (tümleşik geliştirme ortamı) programınız
bulunmuyorsa, bütün Windows, Linux, Mac vs. işletim sistemlerinde bulunan not defteri programıyla yazabiliriz.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), web sitelerinin görselliğini basit ve sıradanlık halinden çıkararak mükemmel bir görsellik düzeyine
kavuşturur.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) kodları arasında gömülü olarak da
kullanılabildiği için son derece hızlıdır. Ayrıca birçok programlama dili ile de iç içe kullanılabilir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), daha kolay ve daha iyi bir sayfa kontrolü sağlar. Bu sayede tek bir yerden tüm sayfaların kontrolü
sağlanabilir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları, server’da (sunucuda) yorumlanmak yerine, kullanıcının browser’ı (tarayıcısı) üzerinde çalıştıkları
için hem server’a (sunucuya) daha az yük olur hem de kullanıcıya minimum internet trafiği sağlar. Ayrıca zaman kaybının da önlenmesine destek olur.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ile web sitesi dahilinde bulunan sayfa içeriklerinin gerek tamamına gerekse bir kısmına
hükmedilebilir.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), sayfa görünüme dair özellikleri birden fazla öğede tekrar tekrar kullanabilmemizi sağlar.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), sayfadaki farklı görünüm özelliklerini dilersek bir öğe üzerinde aynı anda uygulayabilmemize
olanak tanır.
• CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), internet üzerinde en yaygın biçimlendirme dili olması nedeniyle, internet üzerinde sayılamayacak
kadar çok kaynak, doküman ve makale bulmak mümkündür.
Extra Eğitim® - [Link]
 CSS İLE NELER YAPILABİLİR?
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ile sayılamayacak kadar çok işlem yapılabilir. En azından fikir olması için birkaç örnek verecek olur
isek;

Neler Yapılabilir?

• Tüm cihazlara (bilgisayar, telefon, tablet vs.) uygun responsive (duyarlı) tasarımlar hazırlanabilir.
• Mobil programlama içerisinde kullanılabilir.
• Sayfadaki tüm alanlar ve içerikler için, stil (renk, yazı tipi, boyut vs.), konumlandırma ve özellik değiştirme işlemleri yapılabilir.
• Geçiş / dönüşüm işlemleri yapılabilir.
• Animasyon işlemleri yapılabilir.
• Efekt işlemleri yapılabilir.
• Slaytlar ve resim galerileri yapılabilir.
• Kullanıcılara rahatlık sunabilecek açılır menüler yapılabilir.
• HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) içeriğinde önceden tanımlı tüm elemanların (input (giriş) alanları, butonlar vs.) görünümü değiştirilebilir.
• Tablolama işlemleri yapılabilir.
• Listeleme işlemleri yapılabilir.
• Tek bir CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) dokümanından tüm sayfalara etki edilebilir.

Neler Yapılamaz?

• Veritabanı işlemleri yapılamaz.

• Veri okuma, kontrol ve işleme işlemleri yapılamaz.
• Tarihe bağlı işlemler yapılamaz.
• Form işleme ve değerlendirme işlemleri yapılamaz.
• Sayfaya talep işlemleri yapılamaz.
Extra Eğitim® - [Link]
 MIME TYPE NEDİR?
MIME Type (Multipurpose Internet Mail Extensions Type) (çok amaçlı internet posta eklentileri türü), çok sayıda farklı uzantılardaki dosyaları tanımlamak ve birbirinden ayırmak için dosya
kimlik tanımlayıcısıdır. MIME (Multipurpose Internet Mail Extensions) (çok amaçlı internet posta eklentileri), 1992 yılında IETF (Internet Engineering Task Force) (internet mühendisliği görev kuvveti) tarafından
tanımlanmıştır. Genellikle mail programları ve browser’lar (tarayıcılar) tarafından kullanılır. Bu sayede browser (tarayıcı), HTML (Hyper Text Markup Language) (zengin metin işaretleme dili)
biçiminde veya gösterebileceği türde bir dosya olup olmadığını algılayarak ne yapması gerektiğini bilir. Örneğin; Herhangi bir browser’da (tarayıcıda) bir video dosyasını görüntülenmek
istendiğinde, browser (tarayıcı) dahil edilen video dosyası uzantısı olan .mp4 dosyasının MIME Type’ını (Multipurpose Internet Mail Extensions Type) (çok amaçlı internet posta eklentileri türünü)
bilmek zorundadır. Aksi halde browser (tarayıcı) ilgili video dosyasının ne olduğunu algılayamayacaktır ve video dosyasını açamayacaktır. Web server’larında (sunucularında) en sık
kullanılan MIME Type’lar (Multipurpose Internet Mail Extensions Type) (çok amaçlı internet posta eklentileri türleri) önceden tanımlıdır. Fakat bazı özel uygulamalarda, web sitesi için yeni bir MIME
Type (Multipurpose Internet Mail Extensions Type) (çok amaçlı internet posta eklentileri türü) tanımlama ihtiyacı duyulabilir. Bu gibi durumlarda server’a (sunucuya) eklenmesi gereken MIME Type
(Multipurpose Internet Mail Extensions Type) (çok amaçlı internet posta eklentileri türü) bilgisini bilmek gerekir. Aşağıda en çok kullanılmakta olan MIME Type (Multipurpose Internet Mail Extensions Type)
(çok amaçlı internet posta eklentileri türü) bilgileri listelenmektedir. (Referans: RFC6838 - RFC4855) (Apache httpd conf RFC4288)

Dosya türü Dosya uzantısı MIME Type

Application (uygulama) .7z application/x-7z-compressed
Application (uygulama) .air application/[Link]-application-installer-package+zip
Application (uygulama) .apk application/[Link]-archive
Application (uygulama) .bin application/octet-stream
Application (uygulama) .class application/java-vm
Application (uygulama) .dir application/x-director
Application (uygulama) .dmg application/x-apple-diskimage
Application (uygulama) .doc application/msword
Application (uygulama) .docx application/[Link]
Application (uygulama) .dtd application/xml-dtd
Application (uygulama) .ecma application/ecmascript
Application (uygulama) .epub application/epub+zip
Application (uygulama) .eot application/[Link]-fontobject
Application (uygulama) .exe application/x-msdownload
Application (uygulama) .inf application/inf
Application (uygulama) .iso application/x-iso9660-image
Application (uygulama) .jar application/java-archive
Application (uygulama) .js application/javascript
Application (uygulama) .js application/x-javascript
Application (uygulama) .js application/ecmascript
Application (uygulama) .json application/json
Application (uygulama) .m3u8 application/[Link]
Application (uygulama) .mdb application/x-msaccess
Application (uygulama) .mpp application/[Link]-project
Dosya türü Dosya uzantısı MIME Type
Application (uygulama) .mobi application/x-mobipocket-ebook
Application (uygulama) .odb application/[Link]
Application (uygulama) .otf application/x-font-otf
Application (uygulama) .pdf application/pdf
Application (uygulama) .pps application/[Link]-powerpoint
Application (uygulama) .ppt application/[Link]-powerpoint
Application (uygulama) .pub application/x-mspublisher
Application (uygulama) .rar application/x-rar-compressed
Application (uygulama) .rss application/rss+xml
Application (uygulama) .sh application/x-sh
Application (uygulama) .sql application/x-sql
Application (uygulama) .swf application/x-shockwave-flash
Application (uygulama) .tar application/x-tar
Application (uygulama) .torrent application/x-bittorrent
Application (uygulama) .ttf application/x-font-ttf
Application (uygulama) .unityweb application/[Link]
Application (uygulama) .woff application/font-woff
Application (uygulama) .xap application/x-silverlight-app
Application (uygulama) .xhtml application/xhtml+xml
Application (uygulama) .xls application/[Link]-excel
Application (uygulama) .xlsx application/[Link]
Application (uygulama) .xml application/xml
Application (uygulama) .xsl application/xml
Application (uygulama) .zip application/zip
Audio (ses) .aac audio/x-aac
Audio (ses) .aif audio/x-aiff
Audio (ses) .aiff audio/x-aiff
Audio (ses) .flac audio/x-flac
Audio (ses) .m3u audio/x-mpegurl
Audio (ses) .mid audio/midi
Audio (ses) .midi audio/midi
Audio (ses) .mp3 audio/mpeg
Audio (ses) .oga audio/ogg
Audio (ses) .wav audio/x-wav
Audio (ses) .wma audio/x-ms-wma
Dosya türü Dosya uzantısı MIME Type
Image (resim) .bmp image/bmp
Image (resim) .gif image/gif
Image (resim) .ico image/x-icon
Image (resim) .jpg image/jpeg
Image (resim) .jpeg image/jpeg
Image (resim) .png image/png
Image (resim) .svg image/svg+xml
Image (resim) .tga image/x-tga
Image (resim) .tif image/tiff
Image (resim) .tiff image/tiff
Text (metin) .conf text/plain
Text (metin) .css text/css
Text (metin) .csv text/csv
Text (metin) .htm text/html
Text (metin) .html text/html
Text (metin) .jad text/[Link]-descriptor
Text (metin) .java text/x-java-source
Text (metin) .js text/javascript
Text (metin) .js text/ecmascript
Text (metin) .log text/plain
Text (metin) .sgm text/sgml
Text (metin) .sgml text/sgml
Text (metin) .txt text/plain
Video (video) .avi video/x-msvideo
Video (video) .flv video/x-flv
Video (video) .mov video/quicktime
Video (video) .mp4 video/mp4
Video (video) .mkv video/x-matroska
Video (video) .mpg video/mpeg
Video (video) .mpeg video/mpeg
Video (video) .ogv video/ogg
Video (video) .webm video/webm
Video (video) .wmv video/x-ms-wmv

Extra Eğitim® - [Link]

 DOMAIN, SERVER, HOSTING, FTP VE SSL HAKKINDA BİLGİLENDİRME
İnternetin sonsuz dünyasında yer alabilmek için gerekli birtakım kavramları çok iyi anlamak gerekir. Bir web sitesi için nelere ihtiyaç duyulur? Bir web sitesi nasıl açılır?
Yapılan yazılımlar web sitesine nasıl yüklenir? E-Ticaret tarzı alışveriş sitelerin ödeme güvenliği nasıl sağlanır? Bu soruların cevaplarını kısaca inceleyecek olursak;

Domain (alan adı)

Domain (alan adı) anlatımına geçmeden önce bilinmesi gereken üç önemli başlığı incelemekte fayda var.

IP (Internet Protocol) (internet protokolü) adresi, interneti ya da TCP/IP’yi (Transmission Control Protocol / Internet Protocol) (iletim kontrol protokolü / internet protokolünü) kullanan diğer paket
anahtarlamalı ağlara bağlı cihazların, ağ üzerinden birbirleri ile veri alışverişi yapmak için kullandıkları adrestir. İnternete bağlanan her bilgisayara, internet servis sağlayıcısı
tarafından bir IP (Internet Protocol) (internet protokolü) adresi atanır ve internetteki diğer bilgisayarlar bu bilgisayara verilen bu IP (Internet Protocol) (internet protokolü) adresi üzerinden ulaşırlar.
IP (Internet Protocol) (internet protokolü) adresine sahip iki farklı cihaz aynı ağda olmasa dahi, yönlendiriciler vasıtası ile birbirleri ile iletişim kurabilirler. IP (Internet Protocol) (internet protokolü)
adresleri şu anda yaygın kullanımda olan IPv4 (Internet Protocol Version 4) (internet protokolü versiyon 4) için 32 bit boyunda olup, noktalarla ayrılmış 4 adet 8 bitlik sayıyla gösterilir. Örneğin;
[Link] vs.

TCP/IP (Transmission Control Protocol / Internet Protocol) (iletim kontrol protokolü / internet protokolü), bilgisayarlar ile veri iletme / alma birimleri arasında organizasyonu sağlayan, böylece
bir yerden diğerine veri iletişimini olanaklı kılan pek çok veri iletişim protokolüne verilen genel addır. Bir başka değişle, TCP/IP (Transmission Control Protocol / Internet Protocol) (iletim kontrol
protokolü / internet protokolü) bilgisayarlar arası veri iletişiminin kurallarını koyar. TCP (Transmission Control Protocol) (iletim kontrol protokolü), verinin iletimden önce paketlere ayrılmasını ve karşı
tarafta bu paketlerin yeniden düzgün bir şekilde birleştirilmesini sağlar. IP (Internet Protocol) (internet protokolü) ise, iletilen paketlerin istenilen ağ adresine yönlendirilmesini kontrol eder.

DNS (Domain Name System) (alan adı isimlendirme sitemi), web space’ı (web alanını) bölümlemeye, bölümleri adlandırmaya ve bölümler arası iletişimi organize etmeye yarayan,
bilgisayar, servis, internet veya özel bir ağa bağlı herhangi bir kaynak için hiyerarşik dağıtılmış bir adlandırma sistemidir. Kısaca DNS (Domain Name System) (alan adı isimlendirme sitemi),
domain (alan adı) ile IP (Internet Protocol) (internet protokolü) adresleri arasındaki bağlantıyı kurmak amacıyla geliştirilmiş bir sistemdir. DNS (Domain Name System) (alan adı isimlendirme sitemi)
sayesinde IP (Internet Protocol) (internet protokolü) adresinin hangi bilgisayara bağlı olduğu bulunur. Dolayısıyla istenilen sitenin yeri belirlenmiş olur. Ayrıca farklı bir işlem yapılmak
isteniyor ise istediğiniz yere de ulaşmanızı sağlar.

Domain (alan adı), bir web sitesinin internetteki adı ve adresidir. Domain (alan adı), DNS (Domain Name System) (alan adı isimlendirme sitemi) ve IP (Internet Protocol) (internet protokolü) adresi
denilen, bilgisayarların ve server’ların (sunucuların) birbirini tanımasını sağlayan isimlendirme ve numara sisteminin daha basitleştirilmiş ve akılda kalması için kelimelerle ifade edilmiş
halidir. Örneğin; Extra Eğitim’in domain’leri (alan adları) [Link] ve [Link]’dur. [Link] veya [Link] domain’i (alan adı) browser’ın (tarayıcının)
adres çubuğuna yazıldığında browser (tarayıcı) bu domain’i (alan adını) önce DNS (Domain Name System) (alan adı isimlendirme sitemi) üzerinden IP (Internet Protocol) (internet protokolü) adresine
çevirir, daha sonra kullanıcıyı bu IP (Internet Protocol) (internet protokolü) adresine sahip bilgisayara yönlendirir. Domain (alan adı) seçerken kolay ve hatırlanabilir olması, ulaşılabilirlik
açısından oldukça önem taşımaktadır. Domain’ler (alan adları), internet servis sağlayıcılarından veya register (kayıt) firmalarından satın alınarak, kaydetmesi istenebilir. Aslında domain
(alan adı), satın aldığınız değil kiraladığınız bir hizmettir. Minimum bir yıl maksimum on yıl kayıt ettirilebilir. Kayıt ettirilen her domain (alan adı) zaman içerisinde yenilenebilir veya
başka bir firmaya transfer edilebilir. Türkiye'nin ülke domain uzantısı (alan adı) olan .tr uzantılı domain’ler (alan adları) (.[Link], .[Link] vs.), ODTÜ (Orta Doğu Teknik Üniversitesi) ([Link]
tarafından yönetilmekte ve tahsis edilmektedir. Bu domain’ler (alan adları) ise, minimum bir yıl maksimum beş yıl kayıt ettirilebilir. Kayıt ettirilen her domain (alan adı) zaman içerisinde
yenilenebilir fakat ODTÜ (Orta Doğu Teknik Üniversitesi) tarafından başka bir firmaya transfer edilemezler.

Server (sunucu)

Server (sunucu), bilgisayar ağlarında, diğer ağ kullanıcıların yetkileri dahilinde erişebileceği, kullanımına veya paylaşımına açık kaynakları barındıran bilgisayarlara verilen
isimdir. Bir ağda birden fazla server (sunucu) bulunabilir. Ağ topluluğuna veri dağıtım ve yönetim merkezliği yapar. Ayrıca server’ların (sunucuların) hangi amaçla kullanılacağı da
önemlidir. Örneğin; Bir server (sunucu), web server (web sunucusu), database server (veritabanı sunucusu), mail server (posta sunucusu), FTP server (File Transfer Protocol) (dosya transfer protokolü
sunucusu) vs. amaçlar için kullanılacak olabilir. Server’ın (sunucunun) kullanım amacına göre işletim sisteminin (Windows Server, Linux vs.) ve gerekli yazılımlarının (IIS, Apache vs.) (MySQL,
Oracle, MSSQL vs.) yüklenmesi gerekir. Her bilgisayar gerekli olan yazılımlar yüklenmesi halinde sunucu olarak kullanılabilir. Server’larda (sunucularda) ana erişimin sağlanabilmesi için
muhakkak bir IP (Internet Protocol) (internet protokolü) adresi ve domain’i (alan adı) olması gerekir.
 Hosting (barındırma)

Hosting (barındırma), bir web sitesinde yayınlanmak istenen sayfaların, resimlerin, videoların, dokümanların vs. materyallerin internet kullanıcıları tarafından erişebileceği
paylaşımlı bir server’da (sunucuda) tutulmasıdır. Bu tür sistemlerde tek bir server (sunucu) üzerinde, server’ın (sunucunun) bant genişliği ve fiziksel gücüne göre çok fazla sayıda hosting
(barındırma) bulunabilir. Günümüzde birçok yerli ve yabancı firma hosting (barındırma) işlemi yapmakta ve sizlere aldığınız domain’in (alan adının) aktif hale getirilmesi için yer tahsis
etmektedir. Hosting (barındırma) işlemleri aylık veya yıllık olarak kiralama usulü ile yapılmaktadır.

FTP (File Transfer Protocol) (dosya transfer protokolü)

FTP (File Transfer Protocol) (dosya transfer protokolü), internet üzerinde veya yerel bir ağda yer alan bir bilgisayara kullanıcıların yetkileri dahilinde erişebileceği dosya transfer
etmeye yarayan ağ protokolüdür. Bir bilgisayardan bir başka bilgisayara bağlantı kurma ve dosya paylaşım işlevi görür. Bu protokol TCP (Transmission Control Protocol) (iletim kontrol
protokolü) üzerinden çalışır. Bir FTP (File Transfer Protocol) (dosya transfer protokolü) istemcisi, kullanıcının yetkisi dahilinde erişebileceği FTP (File Transfer Protocol) (dosya transfer protokolü)
server’ına (sunucusuna) bağlanarak dosya transfer edebilir, silebilir veya değiştirebilir. Her web sitenin bir FTP (File Transfer Protocol) (dosya transfer protokolü) adresi vardır.

Günümüzde her işletim sistemi üzerinde çalışan FTP (File Transfer Protocol) (dosya transfer protokolü) istemcisi yazılımlar bulunmaktadır. CuteFTP ve FileZilla en çok tercih edilen
FTP (File Transfer Protocol) (dosya transfer protokolü) yazılımlarıdır. FTP yazılımları client (istemci) ve server (sunucu) taraflı olmak üzere ikiye ayrılır. Server (sunucu) tarafındaki yazılım FTP
(File Transfer Protocol) (dosya transfer protokolü) portunu dinleyerek erişim izni olan client'lerden (istemcilerden) transferi kabul eder. Günümüzde hemen hemen tüm browser’lar (tarayıcılar) FTP
(File Transfer Protocol) (dosya transfer protokolü) server’ına (sunucusuna) client (istemci) olarak bağlanabilmektedirler. Browser’ın (tarayıcının) adres çubuğuna ftp:// ile başlayan bir FTP (File
Transfer Protocol) (dosya transfer protokolü) adresi girdiğinizde bu adresteki server’a (sunucuya) erişim hakkınız varsa bağlanabilirsiniz. FTP (File Transfer Protocol) (dosya transfer protokolü) dosya
transferi için varsayılan port 21’dir.

SSL (Secure Socket Layer) (güvenli giriş katmanı)

SSL (Secure Socket Layer) (güvenli giriş katmanı), bilgisayar ağı üzerinden güvenli haberleşmeyi sağlamak için tasarlanmış kriptolama protokolleridir. SSL (Secure Socket Layer) (güvenli
kişisel gizlilik ve güvenilirlik sağlayan, ağ üzerindeki bilgi transferi sırasında bilginin bütünlüğü ve gizliliği için sunucu (server) ile client (istemci) arasındaki iletişimin
giriş katmanı)
şifrelenmiş şekilde yapılabilmesine imkan verir. SSL (Secure Socket Layer) (güvenli giriş katmanı), standart bir algoritmadır. Public key (açık anahtar) ve private key (özel anahtar) adı verilen
anahtarların kullanımına dayalı bir kodlama yöntemine dayalıdır.

SSL (Secure Socket Layer) (güvenli giriş katmanı) protokolü bütün yaygın web server’ları (sunucuları) ve browser’ları (tarayıcıları) tarafından desteklenen bir protokoldür. Milyonlarca
web sitesinde güvenli veri iletişimi için kullanılmaktadır. Genellikle alışveriş sitelerinde oldukça sık rastlanmaktadır. Güvenli bir sitede olduğumuzu anlamak için iki şeye dikkat
etmemiz gerekmektedir. Bunlardan birincisi, browser’ımızın (tarayıcımızın) altında çıkacak olan bir anahtar ya da kilit simgesi, ikincisi ise browser’ımızın (tarayıcımızın) adres çubuğunda
bulunan sayfa adresinin başındaki [Link] [Link] dönen halidir. Bunlar, güvenli bir alanda olduğumuzun göstergesidir.

SSL (Secure Socket Layer) (güvenli giriş katmanı) kodlama için iki adet anahtar bulunmaktadır. Bu anahtarlar, dijital ortamda kodlanmış yazılımlardır. Bir anahtarın kilitlemiş olduğu
veriyi, sadece diğer anahtar açabilir. Anahtarlar oluşturulduktan sonra, private key (özel anahtar) (birinci anahtar) server’da (sunucuda) kalır, public key (açık anahtar) (ikinci anahtar) ise, bağlantı
kurmak isteyen client’e (istemciye) gönderilir. SSL (Secure Socket Layer) (güvenli giriş katmanı), tüm bu işlemleri otomatik olarak yapar. Dışarıdan server’la (sunucuyla) iletişime geçmek isteyen
client (istemci), public key’i (açık anahtarı) kullanarak veriyi güvenli bir şekilde server’a (sunucuya) gönderir. Veri, server’a (sunucuya) ulaşmadan, transfer sırasında veriye ulaşılsa bile,
şifrenin çözülmesi için server’da (sunucuda) bulunan private key (özel anahtar) gerekecektir. SSL (Secure Socket Layer) (güvenli giriş katmanı) türüne göre 128 bit veya 256 bit şifreleme
kullanılmaktadır. Kısaca SSL (Secure Socket Layer) (güvenli giriş katmanı) veri alışverişi yapan bilgisayarların, herhangi bir kişinin veriye müdahale etmesini önleyerek, sadece veri alışverişi
yapan bilgisayar arasında, güvenli bir şekilde verinin aktarılmasını sağlar. 128 bit şifrelemede 2128 değişik anahtar vardır ve bu şifrenin çözülebilmesi çok büyük bir maliyet ve
zaman gerektirir. Kötü niyetli kişi veya kişilerin, 128 bit'lik şifreyi çözebilmesi için 1-2 milyon dolarlık çok büyük bir yatırım yaptıktan sonra 67 yıl gibi bir zaman harcaması gerekir.
Kısaca anlaşıldığı gibi SSL (Secure Socket Layer) (güvenli giriş katmanı) güvenlik sistemi tam ve kesin bir koruma sağlar.
Extra Eğitim® - [Link]
 EN ÖNEMLİ VE EN SIK GÖRÜLEN HTTP DURUM KODLARI
Sitenizdeki bir sayfayla ilgili olarak server’ınıza (sunucunuza) istekte bulunulduğunda, server’ınız (sunucunuz) isteğe yanıt olarak bir Http (Hyper Text Transfer Protocol) (hiper metin
durum kodu döndürür. Bu durum kodu isteğin durumuyla ilgili bilgiler sağlar. Örneğin; Kullanıcı bir browser’dan (tarayıcıdan) sayfanıza eriştiğinde. Önemli olan kısmı
transferi protokolü)
ise Google Bot (Google robotu) ve benzeri diğer bot’lar (robotlar) web sitelerini ziyaret ettiğinde aldıkları bu durum kodlarını anlamlandırır ve arama sonuçlarından çıkartacakları sayfaları,
değişen sayfa adreslerini bu şekilde anlayıp arama sonucuna yansıtır. Durum kodlarının 5 kategorisi vardır ve bu kategoriler 1, 2, 3, 4 ve 5 ile başlar. Sitelerinin sayfa sayıları gerek
az gerekse de çok fazla olduğundan site sahiplerinin bu kodları kontrol etmeleri ve yanlışlık olmadığından emin olmaları gerekmektedir. SEO (Search Engine Optimization) (arama motoru
optimizasyonu) açısından da son derece önemli olan ve en çok karşılaşılan 7 durum kodu aşağıda belirtilmektedir.

200

Server (sunucu), isteği başarıyla işlemiştir ve genellikle bu, server’ın (sunucunun) istenen sayfayı sağladığı anlamına gelir. 200 kodu sitenin aktif / çalışır durumda olduğunu
Google Bot’una (Google robotuna) ve benzeri diğer bot’lara (robotlara) bildirir, Google Bot (Google robotu) ve benzeri diğer bot’larda (robotlarda) bu şekilde sitenin aktif / çalışır durumda
olduğunu anlayıp index’leme (indeksleme) işlemine devam eder.

301

En önemli yönlendirme kodlarından bir tanesidir. İstenen sayfa kalıcı olarak yeni bir konuma taşındı anlamını ifade etmektedir. Server (sunucu) bir get veya head isteğine
yanıt olarak bu yanıtı verdiğinde, istekte bulunanı otomatik olarak yeni konuma yönlendirir. Bir sayfanın veya sitenin kalıcı olarak yeni bir konuma taşındığını Google Bot’una (Google
robotuna) ve benzeri diğer bot’lara (robotlara) bildirmek için bu kodu kullanmalısınız. Sitenizi bir kaç sene önce açtınız, daha sonra yapı değişikliğine veya domain (alan adı) değiştirme
yoluna gittiniz. İşte bu durumda 301 kodu sitenizin hayatını kurtaran bir kod olarak karşınıza çıkar. Çünkü yıllardır emek verdiğiniz site veya sayfaların sayfa adresleri de bu değişiklik
ile değişecektir. Google ve benzeri arama motorlarının index’leme (indeksleme) mekanizmasını sayfa adresleri üzerine kurduğundan yaptığınız değişikliği Google Bot’larına (Google
robotlarına) ve benzeri diğer bot’lara (robotlara) 301 ile bildirmediğiniz sürece eski sayfa adresleriniz ve yeni sayfa adresleriniz olmak üzere Google’da ve benzeri diğer arama
motorlarında index’li (indeksli) sayfalarınız oluşur. Bu durum kopya içerik sorununa neden olacak ve kısa zaman içerisinde Google’dan ve benzeri diğer arama motorlarından gelen
trafiğiniz dörtte biri veya daha fazla oranda düşecek, eski sıralamalarınız gidecektir. Fakat 301 kodunu doğru kullanırsanız eski sıralamalarınızın yeni sayfa adreslerine geçmesini
sağlayabilir, trafik kaybını engelleyebilirsiniz. Burada da en önemli nokta 301 yaparken eski sayfa adreslerinizi birebir yeni adreslerinize yönlendirmeniz gerektiğidir. Yani
[Link]/setler sayfasının yeni adı [Link]/eğitim-setleri ise ilk sayfa adresini ikinci adrese 301 ile yönlendirmeniz gerekmektedir. Bütün site için bu yapıyı kurmanız
gerekmektedir. 301 yönlendirmesi server (sunucu) üzerinde yapılması gerekir. 301 Yönlendirmesi .htaccess (Hypertext Access File) (köprü erişim dosyası) aracılığı ile kolaylıkla
yapılabilmektedir.

.htaccess (Hypertext Access File) (köprü erişim dosyası) aracılığı ile tek sayfa yönlendirme için örnek:

Redirect /[Link] [Link] [R=301,L]

.htaccess (Hypertext Access File) (köprü erişim dosyası) aracılığı ile komple siteyi yönlendirme için örnek:

RewriteCond %{HTTP_HOST} ^([^.:]+\.)*eskisiteadi\.com\.?(:[0-9]*)?$ [NC]

RewriteRule ^/(.*)$ [Link] [R=301,L]

302

Geçici yönlendirme çeşidi olarak bilinir. Eğer bir sayfa adresini arama motorunda göstermek isteyip kullanıcının eriştiği yerde başka adres kullanmak istiyorsanız bu yöntemi
kullanabilirsiniz. Server (sunucu) şu anda isteğe farklı bir konumda bulunan bir sayfayla yanıt veriyor, ancak istekte bulunanın gelecek istekler için özgün konumu kullanmaya devam
etmesi gerekiyor. Bu kod, bir get veya head isteği için istekte bulunanı otomatik olarak farklı bir konuma yönlendirmesi bakımından 301 koduna benzer. Ancak Google Bot (Google
robotu) ve benzeri diğer bot’lar (robotlar) özgün konumu taramaya ve dizine eklemeye devam edeceğinden bir sayfanın veya sitenin taşındığını Google Bot’a (Google robotuna) ve benzeri
diğer bot’lara (robotlara) bildirmek için bu kodu kullanmamalısınız. 302 yönlendirme şekli verimsiz bir yönlendirme şeklidir aslında, arama sonuçlarında hiçbir şeyi değiştirmez.
Genelde yapılan hata 301 yerine 302 yapılmasıdır. 302 geçici yönlendirme olduğundan yönlendirilen URL (Uniform Resource Locator) (nizami kaynak bulucu) arama sonuçlarında çıkmaya
devam eder. 302 yönlendirmeleri de .htaccess (Hypertext Access File) (köprü erişim dosyası) aracılığı ile kolaylıkla yapılabilmektedir.

.htaccess (Hypertext Access File) (köprü erişim dosyası) aracılığı ile sayfa yönlendirme için örnek:

Redirect /[Link] [Link] [R=302,L]

404

Server (sunucu) istenen sayfayı bulamıyor. Örneğin; İstek, server’da (sunucuda) bulunmayan bir sayfa için yapılmışsa, server (sunucu) genellikle bu kodu döndürür. 404 kodu
da Google Bot’larına (Google robotlarına) ve benzeri diğer bot’lara (robotlara) sayfanın artık var olmadığını bildirir. Böylece Google Bot’ları (Google robotları) ve benzeri diğer bot’lar (robotlar)
ilgili sayfayı index’lerinden (indekslerinden) siler bir daha arama sonuçlarında getirmemeye çalışırlar.

500

Server (sunucu) hatayla karşılaştı ve isteği gerçekleştiremiyor. Ziyaret edilmeye çalışan web sitesinde, web sayfasının görüntülenmesini engelleyen bir server (sunucu) sorunu
var anlamına gelir. Web sitesi bakımından veya komut dosyası kullanan etkileşimli web sitelerindeki bir programlama hatasından kaynaklanır.

502

Server (sunucu) hatayla karşılaştı ve bad gateway (geçersiz ağ geçidi) sorunu. Ziyaret edilmeye çalışan web sitesinde, web sayfasının görüntülenmesini engelleyen bir server’da
bad gateway (geçersiz ağ geçidi) sorunu var anlamına gelir. Server (sunucu) bakımından veya gateway (ağ geçidi) ayarlamaları hatasından kaynaklanır.
(sunucuda)

503

Server (sunucu) şu anda kullanılamıyor anlamına gelir. Bu çoğu zaman genellikle geçici bir durumdur. Genellikle server’ın (sunucunun) aşırı yüklü olduğu durumlarda server
(sunucu) bu kodu döndürür.

Extra Eğitim® - [Link]

 TARAYICILARDA JAVASCRIPT’IN AKTİF VE PASİF EDİLMESİ
Javascript, hemen hemen tüm browser’lar (tarayıcılar) içerisinde bulunan Javascript Engine (Javascript motoru) sayesinde yorumlayarak çalışmaktadır. Cihaza herhangi bir
browser (tarayıcı) yükleneceği zaman, standart olarak web yazılımları için son derece kritik bir önem taşıyan Javascript Engine’de (Javascript motoruda) aktif halde yüklenmektedir.
Ancak bir takım sebeplerden dolayı gerek kullanıcı tarafından gerekse farklı unsurlar tarafından devre dışı bırakılmış ise, içerik ya da sayfanın Javascript taraflı fonksiyonelliği sınırlı
olacak veya devre dışı kalacaktır. Ayrıca Javascript eğer browser’da (tarayıcıda) pasif ise, Javascript altyapısını kullanan tüm hazır kütüphanelerde (JQuery, AngularJS, NodeJS, ReactJS,
Bootstrap çatısı vs.) pasif olacaktır. En yaygın olarak kullanılan yedi farklı browser’da (tarayıcıda) Javascript’i aktif veya pasif etmenin yolları aşağıda belirtilmiştir.

Google Chrome

a. Browser (tarayıcı) penceresindeki, sağ üst köşede bulunan 3 yatık çizgi (Google Chrome’u özelleştirin ve kontrol edin) icon’una tıklanır.
b. Açılan menü içerisinden ayarlar seçeneğine tıklanır.
c. Ayarlar alanının tüm detayları sayfaya gelir ve sayfanın en alt kısmında bulunan gelişmiş ayarları göster seçeneğine tıklanır.
d. Gelişmiş ayarlar sayfada açılır ve gizlilik başlığı altında bulunan içerik ayarları butonuna tıklanır.
e. Açılan yeni diyalog penceresi içerisinde bulunan Javascript başlığı altından Javascript aktif ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa, tüm sitelerin
Javascript çalıştırmasına izin ver (önerilen) seçeneği işaretlenir ve bitti butonuna tıklanır. Javascript pasif edilmek isteniyorsa, hiçbir sitenin Javascript çalıştırmasına izin
verme seçeneği işaretlenir ve bitti butonuna tıklanır.
f. Ayarların browser’da (tarayıcıda) devreye girmesi için browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik browser’da (tarayıcıda) devreye alınmıştır.

Internet Explorer

a. Browser (tarayıcı) penceresindeki, sağ üst köşede bulunan çark (araçlar) icon’una tıklanır.
b. Açılan menü içerisinden internet seçenekleri seçeneğine tıklanır.
c. Açılan yeni diyalog penceresi içerisinde bulunan güvenlik sekmesine tıklanır.
d. Güvenlik alanı içerisinde bulunan internet icon’u aktif iken pencerenin alt kısmında bulunan özel düzey butonuna tıklanır.
e. Açılan yeni diyalog penceresi içerisinde bulunan komut dosyası başlığı altından etkin komut dosyası ve Java programcıklarının çalıştırılması başlıklarından Javascript aktif
ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa, etkin komut dosyası başlığı altından etkinleştir seçeneği işaretlenir, daha sonra hemen bir alt satırında
bulunan Java programcıklarının çalıştırılması başlığı altından etkinleştir seçeneği işaretlenir ve tamam butonuna tıklanır. Javascript pasif edilmek isteniyorsa, etkin komut
dosyası başlığı altından devre dışı bırak seçeneği işaretlenir, daha sonra hemen bir alt satırında bulunan Java programcıklarının çalıştırılması başlığı altından devre dışı
bırak seçeneği işaretlenir ve tamam butonuna tıklanır.
f. Ayarların browser’da (tarayıcıda) devreye girmesi için browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik browser’da (tarayıcıda) devreye alınmıştır.

Microsoft Edge

a. Windows arama alanına grup ilkesi düzenle yazılarak çıkan sonuca (grup ilkesi düzenle) tıklanır.
b. Açılan pencerenin sağ tarafında bulunan bilgisayar yapılandırması seçeneğine çift tıklanır.
c. Açılan seçenekler içerisinde bulunan yönetim şablonları seçeneğine çift tıklanır.
d. Açılan seçenekler içerisinde bulunan Windows bileşenleri seçeneğine çift tıklanır.
e. Açılan seçenekler içerisinde bulunan Microsoft Edge seçeneğine çift tıklanır.
f. Açılan seçenekler içerisinde bulunan Javascript gibi komut dosyalarını çalıştırmanızı sağlar seçeneğine çift tıklanır.
g. Açılan yeni diyalog penceresi içerisinden Javascript aktif ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa, etkin seçeneği işaretlenir ve tamam butonuna
tıklanarak tüm açık pencereler kapatılır. Javascript pasif edilmek isteniyorsa, devre dışı bırakıldı seçeneği işaretlenir ve tamam butonuna tıklanarak tüm açık pencereler
kapatılır.
h. Ayarların browser’da (tarayıcıda) devreye girmesi için eğer açık halde Microsoft Edge penceresi var ise browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik
browser’da (tarayıcıda) devreye alınmıştır.
 Mozilla Firefox

a. Browser (tarayıcı) penceresindeki, adres çubuğuna about:config yazılarak enter (giriş) tuşuna basılır.
b. Açılan sayfa içerisinde bulunan söz veriyorum, dikkatli olacağım! butonuna tıklanır.
c. Açılan sayfanın en üst kısmında bulunan arama alanına [Link] yazılır.
d. Tercih adı [Link] olan satırdan Javascript aktif ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa ve değer sütunundaki değer false ise,
[Link] olan satıra sağ tıklanarak açılan menüden değiştir seçeneğine tıklanır. Javascript pasif edilmek isteniyorsa ve değer sütunundaki değer true ise,
[Link] olan satıra sağ tıklanarak açılan menüden değiştir seçeneğine tıklanır.
e. Ayarların browser’da (tarayıcıda) devreye girmesi için browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik browser’da (tarayıcıda) devreye alınmıştır.

Opera

a. Browser (tarayıcı) penceresindeki, sol üst köşede bulunan menü butonuna tıklanır.
b. Açılan menü içerisinden ayarlar seçeneğine tıklanır.
c. Açılan sayfa içerisinde sol tarafta bulunan web siteleri seçeneğine tıklanır.
d. Açılan sayfa içerisindeki Javascript başlığı altından Javascript aktif ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa, tüm sitelerin Javascript çalıştırmasına
izin ver (önerilen) seçeneği işaretlenir. Javascript pasif edilmek isteniyorsa, hiçbir sitenin Javascript çalıştırmasına izin verme seçeneği işaretlenir.
e. Ayarların browser’da (tarayıcıda) devreye girmesi için browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik browser’da (tarayıcıda) devreye alınmıştır.

Safari

a. Browser (tarayıcı) penceresindeki, sağ üst köşede bulunan çark (genel Safari ayarları menüsünü görüntüle) icon’una tıklanır.
b. Açılan menü içerisinden tercihler seçeneğine tıklanır.
c. Açılan yeni diyalog penceresi içerisinde bulunan güvenlik sekmesine tıklanır.
d. Javascript aktif seçeneği onay kutusundan Javascript aktif ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa, Javascript aktif seçeneğinin yanında bulunan
onay kutusu işaretlenir ve diyalog penceresi kapatılır. Javascript pasif edilmek isteniyorsa, Javascript aktif seçeneğinin yanında bulunan onay kutusu işareti kaldırılır ve
diyalog penceresi kapatılır.
e. Ayarların browser’da (tarayıcıda) devreye girmesi için browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik browser’da (tarayıcıda) devreye alınmıştır.

Yandex Browser

a. Browser (tarayıcı) penceresindeki, sağ üst köşede bulunan 3 yatık çizgi (Yandex Browser ayarları) icon’una tıklanır.
b. Açılan menü içerisinden ayarlar seçeneğine tıklanır.
c. Ayarlar alanının tüm detayları sayfaya gelir ve sayfanın en alt kısmında bulunan gelişmiş ayarları göster seçeneğine tıklanır.
d. Gelişmiş ayarlar sayfada açılır ve kişisel veriler başlığı altında bulunan içerik ayarları butonuna tıklanır.
e. Açılan yeni diyalog penceresi içerisinde bulunan Javascript başlığı altından Javascript aktif ve pasif etme işlemleri yapılır. Javascript aktif edilmek isteniyorsa, tüm sitelerin
Javascript çalıştırmasına izin ver (önerilen) seçeneği işaretlenir ve bitti butonuna tıklanır. Javascript pasif edilmek isteniyorsa, hiçbir sitenin Javascript çalıştırmasına izin
verme seçeneği işaretlenir ve bitti butonuna tıklanır.
f. Ayarların browser’da (tarayıcıda) devreye girmesi için browser (tarayıcı) kapatılır ve yeniden açılır. Artık yapılmış olan değişiklik browser’da (tarayıcıda) devreye alınmıştır.
Extra Eğitim® - [Link]
 TARAYICILAR VE TARAYICI GÖRÜNTÜLEME MOTORLARI
Hazırlanmış olan bir web sayfası içeriğini görüntülemeye yarayan programlara browser (tarayıcı) adı verilir. HTML (Hyper Text Markup Language) (zengin metin işaretleme dilinde), XML
(Extensible Markup Language) (genişletilebilir işaretleme dili),
Javascript, CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), XSL (Extensible Style Language) (genişletilebilir stil
dili) vs. gibi bir browser’ın (tarayıcının) bel kemiği olan özellikleri render’layan (sunan) gömülü kit veya programlara da browser visualization engine (tarayıcı görüntüleme motoru) denir.

Günümüzde, Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Opera, Safari, Yandex Browser vs. browser’lar (tarayıcılar) sıklıkla kullanılmaktadır.
Browser’lar (tarayıcılar), web sayfamızın içeriğini browser visualization engine (tarayıcı görüntüleme motoru) denilen sistemleri sayesinde kullanıcılara görüntülerler. Yazılım veya tasarım
alanında yenilikler oldukça browser visualization engine’ları da (tarayıcı görüntüleme motorları da) sürekli olarak geliştirici firma tarafından isteklere cevap verebilmesi için güncellenirler.
İlgili browser (tarayıcı) sürümü güncellendiği zaman aslında bu browser’ın (tarayıcının) visualization engine’ıda (görüntüleme motoru da) güncellenir. Bazen browser’ın (tarayıcının) görselliğinin
de iyileştirme işlemlerinde kullanılır. Browser (tarayıcı) geliştiren firmalar daima visualization engine’larına (görüntüleme motorlarına) uyarlı uygulamalar yaparlar.

En yaygın olarak kullanılan yedi farklı browser’ın (tarayıcının) visualization engine’ları (tarayıcı görüntüleme motorları) aşağıda belirtilmiştir.

Trident Trident Gecko Webkit - V8 Webkit Webkit Presto

ms ms moz webkit - V8 webkit webkit O

Extra Eğitim® - [Link]

 HTML’DE TARAYICILARA GÖRE ACCESSKEY TUŞ KOMBİNASYONLARI
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) nesnelere klavyeden bir kısayol tuşu tanımlanabilir. Dolayısı ile tanımlanacak olan klavye kısayol tuşunu
direk olarak çalıştırmak mümkün değildir. Accesskey (erişim anahtarı) tanımlanmış bir nesneyi klavyeden işlem yapılacak hale getirmek için browser’lar (tarayıcılar) farklı kombinasyonlar
kullanmaktadır. Aşağıda en çok kullanılmakta olan yedi browser’ın (tarayıcının) accesskey (erişim anahtarı) kombinasyonları listelenmektedir.

Windows Alt + Key Alt + Key Shift + Alt + Key Alt + Key Alt + Key Alt + Key Shift + Esc + Key
Linux - - Shift + Alt + Key Alt + Key Alt + Key - Alt + Key
Mac - - Control + Key Control + Key Control + Key Control + Key Control + Key

Extra Eğitim® - [Link]

 TARAYICILARDA KLAVYE KISAYOLLARI
Tüm browser’larda (tarayıcılarda), kullanıcının daha hızlı ve kolay işlemler yapabilmesini sağlamak amacıyla birtakım klavye kısayol tuş kombinasyonları mevcuttur. Bu sayede
klavye iyi kullanıldığında internette işlemler yaparken zaman kazanılabilir. Aşağıda Windows ve Mac işletim sistemleri için kısayol tuş kombinasyonları listelenmektedir.

İşlem Windows işletim sistemleri Mac işletim sistemleri

Sayfa içerisindeki tüm metni seçme Ctrl + A Command + A
Seçili metni kopyalama Ctrl + C Command + C
Sayfa içerisinde metin arama Ctrl + F Command + F
Yeni browser (tarayıcı) penceresi açma Ctrl + N Command + N
Browser (tarayıcı) içerisinde dosya açma Ctrl + O Command + O
Sayfa içeriğini yazdırma Ctrl + P Command + P
Sayfayı kaydetme Ctrl + S Command + S
Sayfanın kaynak kodu ekranını açma Ctrl + U Command + U
Sayfayı sağa kaydırma Sağ Ok Sağ Ok
Sayfayı sola kaydırma Sol Ok Sol Ok
Sayfayı yukarı kaydırma Yukarı Ok Yukarı Ok
Sayfayı aşağı kaydırma Aşağı Ok Aşağı Ok
Sayfanın en başına gitme Home Command + Sol Ok
Sayfanın en sonuna gitme End Command + Sağ Ok
Sayfayı bir kare yukarı kaydırma (atlamalı) Page Up Command + Yukarı Ok
Sayfayı bir kare yukarı kaydırma Space Space
Sayfayı bir kare aşağı kaydırma (atlamalı) Page Down Command + Aşağı Ok
Sayfayı bir kare aşağı kaydırma Shift + Space Shift + Space
Odaklanan alandan metni sola doğru karakter karakter seçme Shift + Sol Ok Shift + Sol Ok
Odaklanan alandan metni sağa doğru karakter karakter seçme Shift + Sağ Ok Shift + Sağ Ok
Odaklanan alandan metni yukarı doğru satır satır seçme Shift + Yukarı Ok Shift + Yukarı Ok
Odaklanan alandan metni aşağı doğru satır satır seçme Shift + Aşağı Ok Shift + Aşağı Ok
Odaklanan alandan metni sola doğru kelime kelime seçme Ctrl + Shift + Sol Ok Option + Shift + Sol Ok
Odaklanan alandan metni sağa doğru kelime kelime seçme Ctrl + Shift + Sağ Ok Option + Shift + Sağ Ok
Odaklanan alandan mevcut satırın en soluna doğru kelimeleri tamamen seçme Shift + Home Command + Shift + Sol Ok
Odaklanan alandan mevcut satırın en sağına doğru kelimeleri tamamen seçme Shift + End Command + Shift + Sağ Ok
Odaklanan alandan sayfanın en başına kadar tüm içeriği tamamen seçme Ctrl + Shift + Home Command + Shift + Yukarı Ok
Odaklanan alandan sayfanın en sonuna kadar tüm içeriği tamamen seçme Ctrl + Shift + End Command + Shift + Aşağı Ok
Odaklanan alandan ilgili çerçevenin en başına kadar tüm içeriği tamamen seçme Shift + Page Up Fn + Shift + Yukarı Ok
Odaklanan alandan ilgili çerçevenin en sonuna kadar tüm içeriği tamamen seçme Shift + Page Down Fn + Shift + Aşağı Ok
Sayfa içerisindeki nesne indekslerinde ileri hareket etme Tab Tab
İşlem Windows işletim sistemleri Mac işletim sistemleri
Sayfa içerisindeki nesne indekslerinde geri hareket etme Shift + Tab Shift + Tab
Bir önceki sayfaya dönme Alt + Sol Ok Command + Sol Ok
Bir sonraki sayfaya dönme Alt + Sağ Ok Command + Sağ Ok
Sayfayı yenileme F5 Command + R
Cache (ön bellek) olmadan sayfayı yenileme Ctrl + F5 Command + Shift + R
Sayfa yüklemesini durdurma Esc Esc
Sayfayı tam ekran yapma / normale döndürme F11 Command + Shift + F
Sayfa içeriğine zoom arttırma (+ değer) Ctrl + + Control + +
Sayfa içeriğine zoom azaltma (- değer) Ctrl + - Control + -
Sayfa içeriğine zoom sıfırlama (varsayılan değer) Ctrl + 0 Control + 0
Tanımlı olan ana sayfayı açma Alt + Home Option + Home
Yeni bir boş sekme açma Ctrl + T Command + T
Açık olan tüm sekmeleri kapatma Ctrl + Shift + W Command + Q
Etkin olan sekme dışındaki tüm sekmeleri kapatma Ctrl + Alt + F4 Command + Option + W
Aktif olan sekmeden bir sonraki sekmeye geçiş yapma Ctrl + Tab Control + Tab
Aktif olan sekmeden bir önceki sekmeye geçiş yapma Ctrl + Shift + Tab Control + Shift + Tab
Belirtilen numaralı sekmeye geçiş yapma Ctrl + 1…8 Command + 1…8
Açık olan sekmeler içerisindeki en son sekmeye geçiş yapma Ctrl + 9 Control + 9
En son kapatılan sekmeyi yeniden açma Ctrl + Shift + T Command + Shift + T
Browser’ı (tarayıcıyı) tamamen kapatma Alt + F4 Command + W
Adres çubuğu alanına gitme Ctrl + L Command + L
Arama çubuğu alanına gitme Ctrl + E Command + E
Sayfayı browser’ın (tarayıcının) yer imlerine / sık kullanılanlara ekleme Ctrl + D Command + Option + B
Geçmiş alanını açma Ctrl + H Command + Shift + H
Download (indirme) alanını açma Ctrl + J Command + J
Ekran görüntüsünü hafızaya alma PrtSc Command + Control + Shift + 3

Extra Eğitim® - [Link]

 CSS’DE BROWSER’LAR (TARAYICILAR) İÇİN PREFIX (ÖNEK) TANIMLARI
Hazırlanmış olan bir web sayfası içeriğini görüntülemeye yarayan programlara browser (tarayıcı) adı verilir. Browser’lar (Tarayıcılar) web sayfalarının içeriğini daima browser
visualization engine (tarayıcı görüntüleme motoru) denilen sistemleri sayesinde kullanıcılara görüntülerler.

Günümüzde, Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Opera, Safari, Yandex Browser vs. browser’lar (tarayıcılar) sıklıkla kullanılmaktadır. Yazılım
veya tasarım alanında yenilikler oldukça browser visualization engine’ları da (tarayıcı görüntüleme motorları da) sürekli olarak geliştirici firma tarafından isteklere cevap verebilmesi için
güncellenirler. İlgili browser (tarayıcı) sürümü güncellendiği zaman aslında bu browser’ın (tarayıcının) visualization engine’ıda (görüntüleme motoru da) güncellenir. Bazen browser’ın
(tarayıcının) görselliğinin de iyileştirme işlemlerinde kullanılır.

Hemen hemen her browser’ın (tarayıcının) geliştirici firması ve browser visualization engine’ları da (tarayıcı görüntüleme motorları da) farklı olduğu için, bazı durumlarda CSS
özelliklerine prefix (önek) tanımlanmalıdır. İlgili CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim
(Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları)
sayfaları) özelliklerinin tüm browser’lar (tarayıcılar) tarafından algılanarak yorumlanabilmesi ve en kusursuz şekilde çalıştırılabilmesi prefix (önek) tanımları sağlar.

En yaygın olarak kullanılan yedi farklı browser’ın (tarayıcının) ve Microsoft Office programının prefix (önek) tanımları aşağıda belirtilmiştir.

Internet Explorer Microsoft Edge Microsoft Office Mozilla Firefox Google Chrome Yandex Browser Safari Opera
-ms- -ms- -mso- -moz- -webkit- -webkit- -webkit- -o-

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) özellikleri için prefix (önek) tanımlarının, W3C (World Wide Web Consortium) (dünya çapında ağ konsorsiyumu)
tarafından belirtilmiş en doğru sıralaması aşağıdaki şekildedir. Fakat istenirse farklı sıralama ile de kullanılması mümkündür.

1. -webkit-
2. -moz-
3. -o-
4. -ms-
5. -mso- (Gerekli ise)
6. Standart kodlama
Extra Eğitim® - [Link]
 CSS SEÇİCİLERİ
CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) herhangi bir HTML (Hyper Text Markup Language) (zengin metin işaretleme diline) sayfası içerisindeki tüm
elemanlara / elementlere erişmekte kullanılan birçok seçici türü bulunmaktadır. Bu sayede istenilen bir veya daha fazla HTML (Hyper Text Markup Language) (zengin metin işaretleme diline)
elemanı / elementini seçerek kolaylıkla biçimlendirme işlemleri yapılabilir. Tüm CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) seçici türleri aşağıda
listelenmektedir.

Selector Name (Seçici Adı) Character (Karakter) Description (Tanım)

Genel (Evrensel) seçici * Tüm HTML elementlerini seçer.
Element (Tür) seçicileri Element Belirtilecek olan HTML elementini seçer.
ID (Benzersiz kimlik) seçicileri #Elementin IDsi Belirtilecek olan ID değeri ile eşleşen HTML elementini seçer.
class (Sınıf) seçicileri .Elementin Sınıfı Belirtilecek olan class (sınıf) değeri ile eşleşen HTML elementini seçer.
Child (Çocuk) seçiciler Element > Element Belirtilecek olan HTML elementinin, belirtilecek olan child (çocuk) elementini seçer.
Descendant (Torun - soy) seçiciler Element Element Belirtilecek olan HTML elementinin, belirtilecek olan descendant (torun - soy) elementini seçer.
Genel sibling (kardeş) seçiciler Element ~ Element Belirtilecek olan HTML elementinin, belirtilecek olan sibling (kardeş) elementini seçer.
Bitişik sibling (kardeş) seçiciler Element + Element Belirtilecek olan HTML elementinin, belirtilecek olan bitişik sibling (kardeş) elementini seçer.
Multiple (Çoklu) seçici Element , Element Belirtilecek olan iki veya daha fazla HTML elementini seçer.
Attribute (Özellik) seçiciler Element[Özellik Adı] Belirtilecek olan özelliğe sahip HTML elementini seçer.

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) Attribute (Özellik) seçicileri için kullanılmakta olan filtreler aşağıda listelenmektedir.

Filter Name (Filtre Adı) (Pattern) Desen Description (Tanım)

Belirtilecek olan özelliğe ve belirtilecek olan değere sahip, aynı zamanda
Attribute (Özellik) seçicilerde tam değer filtresi [Özellik Adı=”Değer”]
tam olarak eşleşen HTML elementini seçer.
Belirtilecek olan özelliğe ve belirtilecek olan değer içeriğine sahip, aynı
Attribute (Özellik) seçicilerde içeren tam değer filtresi [Özellik Adı~=”Değer”]
zamanda tam olarak eşleşen HTML elementini seçer.
Belirtilecek olan özelliğe ve belirtilecek olan değer içeriğine sahip HTML
Attribute (Özellik) seçicilerde içeren değer filtresi [Özellik Adı*=”Değer”]
elementini seçer.
Belirtilecek olan özelliğe ve belirtilecek olan değer başlangıcına sahip HTML
Attribute (Özellik) seçicilerde başlayan değer filtresi [Özellik Adı^=”Değer”]
elementini seçer.
Belirtilecek olan özelliğe ve belirtilecek olan değer başlangıcına sahip (tireli
Attribute (Özellik) seçicilerde tireli veya tiresiz başlayan değer filtresi [Özellik Adı|=”Değer”]
veya tiresiz) HTML elementini seçer.
Belirtilecek olan özelliğe ve belirtilecek olan değer bitişine sahip HTML
Attribute (Özellik) seçicilerde biten değer filtresi [Özellik Adı$=”Değer”]
elementini seçer.
Extra Eğitim® - [Link]
 CSS SEÇİCİLERİNDE PSEUDO CLASSES (SAHTE SINIFLAR)
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) seçicilerinde kullanılan birçok pseudo class (sahte sınıf) türü bulunmaktadır. Bu sayede istenilen bir
veya daha fazla HTML (Hyper Text Markup Language) (zengin metin işaretleme diline) elemanı / elementini üzerinde biçimlendirme işlemleri yapılabilir. CSS (Cascading Style Sheets) (basamaklı stil
şablonları veya basamaklı biçim sayfaları) seçicilerinde kullanılan tüm pseudo class (sahte sınıf) türleri aşağıda listelenmektedir.

Name (Adı) Description (Tanım)

link Daha önce hiç açılmamış link'in rengini tanımlar.
Belirtilen HTML elementinin mouse (fare) üzerine geldiğinde stil tanımlar. Belirtilen HTML elementinin mouse (fare) üzerinden ayrıldığında stil
hover
normale döner.
active Belirtilen HTML elementi aktif olduğunda stil tanımlar.
visited Daha önce açılmış link'in rengini tanımlar.
any-link Doküman içerisinde bulunan HTML'in link elementinin URL değeri boş değil ise stil tanımlar.
focus Belirtilen HTML elementine odaklanıldığında stil tanımlar. Belirtilen HTML elementinin odağından çıkıldığında stil normale döner.
lang() Belirtilen HTML elementinin lang (dil) özelliğine göre stil tanımlar.
target Belirtilen HTML elementine çapa türündeki link'lerle bağlanmış olan ve tıklandığında hedeflenmiş olan elemente stil tanımlar.
root HTML belgesinin kök (html) elementine stil tanımlar.
empty Belirtilen HTML elementinin içeriği tamamen boş ise stil tanımlar.
not() Belirtilen HTML elementi hariç diğer tüm HTML elementlerine stil tanımlar.
checked Belirtilen HTML elementi seçildiğinde stil tanımlar. Belirtilen HTML elementi seçimi kaldırıldığında stil normale döner.
disabled Belirtilen HTML elementi etkin olmadığında stil tanımlar.
enabled Belirtilen HTML elementi etkin olduğunda stil tanımlar.
read-only Belirtilen HTML elementi sadece okunabilir olduğunda stil tanımlar.
read-write Belirtilen HTML elementi sadece okunabilir ve yazılabilir olduğunda stil tanımlar.
required Belirtilen HTML elementine bilgi girişi zorunlu olduğunda stil tanımlar.
optional Belirtilen HTML elementi bilgi girişi opsiyonel olduğunda stil tanımlar.
Belirtilen HTML elementi bilgi girişi geçerli bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi geçersiz bir değer olduğunda stil
valid
normale döner.
Belirtilen HTML elementi bilgi girişi geçersiz bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi geçerli bir değer olduğunda stil
invalid
normale döner.
Belirtilen HTML elementi bilgi girişi belirtilen aralıklar dahilinde bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi belirtilen
in-range
aralıklar dışında bir değer olduğunda stil normale döner.
Belirtilen HTML elementi bilgi girişi belirtilen aralıklar dışında bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi belirtilen
out-of-range
aralıklar dahilinde bir değer olduğunda stil normale döner.
first-child Belirtilen HTML elementi baz alınarak, üst elementine göre bitişik ilk child (çocuk) durumundaki elemente stil tanımlar.
last-child Belirtilen HTML elementi baz alınarak, üst elementine göre bitişik son child (çocuk) durumundaki elemente stil tanımlar.
first-of-type Belirtilen HTML elementi baz alınarak, üst elementine göre ilk child (çocuk) durumundaki elemente stil tanımlar.
last-of-type Belirtilen HTML elementi baz alınarak, üst elementine göre son child (çocuk) durumundaki elemente stil tanımlar.
only-child Belirtilen HTML elementi baz alınarak, üst elementine göre bitişik tek child (çocuk) durumundaki elemente stil tanımlar.
only-of-type Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türleri de eşleşen tek child (çocuk) durumundaki elemente stil tanımlar.
Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türlerine bakılmaksızın ilk child (çocuk) durumundaki elementten
nth-child()
başlanarak sıra numarasına göre stil tanımlar.
Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türlerine bakılmaksızın son child (çocuk) durumundaki elementten
nth-last-child()
başlanarak sıra numarasına göre stil tanımlar.
Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türleri de eşleşen ilk child (çocuk) durumundaki elementten başlanarak
nth-of-type()
sıra numarasına göre stil tanımlar.
Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türleri de eşleşen son child (çocuk) durumundaki elementten
nth-last-of-type()
başlanarak sıra numarasına göre stil tanımlar.
Extra Eğitim® - [Link]
 CSS SEÇİCİLERİNDE PSEUDO ELEMENTS (SAHTE ELEMENTLER)
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) seçicilerinde kullanılan 5 farklı pseudo element (sahte element) türü bulunmaktadır. Bu sayede
istenilen bir veya daha fazla HTML (Hyper Text Markup Language) (zengin metin işaretleme diline) elemanı / elementini üzerinde biçimlendirme işlemleri yapılabilir. CSS (Cascading Style Sheets)
(basamaklı stil şablonları veya basamaklı biçim sayfaları) seçicilerinde kullanılan tüm pseudo element (sahte element) türleri aşağıda listelenmektedir.

Name (Adı) Description (Tanım)

first-letter Belirtilen HTML elementinin ilk karakterine stil tanımlar.
first-line Belirtilen HTML elementinin ilk satırına stil tanımlar.
before Belirtilen HTML elementinin öncesine içerik atayarak stil tanımlar.
after Belirtilen HTML elementinin sonrasına içerik atayarak stil tanımlar.
selection Belirtilen HTML elementinin kullanıcı tarafından seçilen kısmına stil tanımlar.

Extra Eğitim® - [Link]

 CSS KURALLARINDA SEVİYE BASAMAKLANDIRMA YAPISI
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları ile HTML (Hyper Text Markup Language) (zengin metin işaretleme diline) elementlerine biçimlendirme
yapıldığında, browser’lar (tarayıcılar) web sayfalarını görüntülerken bir seviye basamaklandırma yapısı kurarlar. Bu sayede web sayfasının CSS (Cascading Style Sheets) (basamaklı stil
şablonları veya basamaklı biçim sayfaları) ile atanmış olan biçimlendirmesi oluşmuş olur. Bu işlem sırasında 4 temel birim üzerinden işlem gerçekleşir ve bir numaralandırma yapısı kurulur.

CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) seçicilerine göre seviye basamaklandırma yapısı için değerlendirme sırası şu şekildedir.

Öncelik Birim Değer Tanım Numaralandırmaya Etkisi

1 a 0 veya 1 Satır içi CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) tanımı X000
2 b 0 veya 1 ID (Benzersiz kimlik) seçicisi ile CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) tanımı 0X00
3 c 0 veya 1 class (Sınıf) seçicisi ile CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) tanımı 00X0
4 d 0 veya 1 Element (Tür) seçicisi ile CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) tanımı 000X

Seviye basamaklandırma yapısı için örnek numaralandırma yapıları :

Seçici Seçici değerlendirmesi Seviye değerlendirmesi Seviye Değeri

* Genel (Evrensel) seçici a=0 , b=0 , c=0 , d=0 0000
div Element seçici a=0 , b=0 , c=0 , d=1 0001
ul li İkili Element seçici a=0 , b=0 , c=0 , d=2 0002
div div+span Üçlü Element seçici a=0 , b=0 , c=0 , d=3 0003
img[title="saat"] Element ve class (sınıf) seçici a=0 , b=0 , c=1 , d=1 0011
.renkler class (Sınıf) seçici a=0 , b=0 , c=1 , d=0 0010
[Link] Element ve class (sınıf) seçici a=0 , b=0 , c=1 , d=1 0011
#esyalar ID (Benzersiz kimlik) seçici a=0 , b=1 , c=0 , d=0 0100
div#esyalar Element ve ID (benzersiz kimlik) seçici a=0 , b=1 , c=0 , d=1 0101
<a style="color:black"> Satır içi tanımlama a=1 , b=0 , c=0 , d=0 1000

Extra Eğitim® - [Link]

 CSS’DE KUTU MODELİ
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dili) her element dikdörtgen şeklinde bir alan işgal eder. HTML (Hyper Text Markup Language) (zengin metin işaretleme dili)
elementlerinin işgal ettikleri alan, CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kutu modeli olarak isimlendirilmektedir. Çünkü CSS (Cascading Style
Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) her HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementini kutu olarak kabul eder. Hemen hemen her kutu modeli,
her HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementinin işlevselliğini açıklamaya ve anlamaya yardımcı olur.

Bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementinin blok düzeyinde olması veya satır düzeyinde olması, pozisyonları, varsayılan özellikleri, gösterim
türleri, renklendirilmesi vs. tüm işlemler CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) sayesinde belirlenebilir.

Bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementinin kutu modelinde, margin (kenar boşluğu / dış boşluk), border (kenarlık / çerçeve), padding (dolgu / iç boşluk) ve
content (içerik) alanları bulunur. Aynı zamanda bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementinin kutu modeline göre konum değerleri de bulunmaktadır. Konum
değerlerinde, top (üst), right (sağ), bottom (alt) ve left (sol) pozisyonları bulunur.

Kutu modelinin tam yapısı aşağıdaki şekildedir.

 Kutu modeli dikdörtgen şeklinde bir alan işgal eder. O zaman bu alanın birde boyutları olmalı. Boyutlar sayesinde bir HTML (Hyper Text Markup Language) (zengin metin işaretleme
elementinin tüm browser’larda (tarayıcılarda) en doğru şekilde görüntülenmesi sağlanır. Fakat bunun için öncelikle kutu modeli boyutunun nasıl hesaplandığını bilmek gerekir.
dili)
Hesaplama işlemi 2 yapı ile sağlanır. 1. Yapı genişlik hesaplama, 2. yapı ise yükseklik hesaplamadır.

Bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementi kutu modelinin genişlik hesaplaması :

Total width = width + left padding + right padding + left border + right border + left margin + right margin
(Toplam genişlik = genişlik + sol dolgu / iç boşluk + sağ dolgu / iç boşluk + sol kenarlık / çerçeve + sağ kenarlık / çerçeve + sol kenar boşluğu / dış boşluk + sağ kenar boşluğu / dış boşluk)

Bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementi kutu modelinin yükseklik hesaplaması :

Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
(Toplam yükseklik = yükseklik + üst dolgu / iç boşluk + alt dolgu / iç boşluk + üst kenarlık / çerçeve + alt kenarlık / çerçeve + üst kenar boşluğu / dış boşluk + alt kenar boşluğu / dış boşluk)

Extra Eğitim® - [Link]

 CSS’DE ÖLÇÜLENDİRME BİRİMLERİ
CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) genişlik, yükseklik, konum, boyut, kalınlık vb. ölçülendirme işlemlerinde kullanılan farklı farklı
birimler bulunmaktadır. Bu birimler sayılar ile birlikte kullanılmaktadır. CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) ölçülendirme birimlerinde kullanılan
sayılar, tam sayılar, ondalıklı sayılar ve yüzdeler olmak üzere 3 farklı şekildedirler. Bazı durumlarda ölçülendirme birimlerinde kullanılan sayılar negatif değerlerde alabilirler. En
önemli kural hangi sayının hangi birim ile kullanılması gerektiğini bilmektir. CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) relative (göreceli) ve absolute
(kesin) olmak üzere 2 farklı ölçülendirme türü vardır. Her iki türünde kendilerine has kullanılan birimleri mevcuttur.

Relative (Göreceli) ölçülendirme birimleri aşağıda listelenmektedir.

Unit (Birim) Description (Tanım)

Boyuta bağlı ölçülendirme birimidir. Atanmış boyut değerine göre hesaplanarak bulunur.
em Örnek : Boyut 12px atanmış ise; 1em = 12px, boyut 30px atanmış ise; 1em = 30px’dir.
Boyut atanmamış ise, varsayılan boyut olarak font (yazı tipi) ailesinde yer alan “M” harfinin genişliğini ve yüksekliğini baz alır.
Boyuta bağlı ölçülendirme birimidir. Belgenin root (kök) elementine atanmış boyut değerine göre hesaplanarak bulunur.
rem
Örnek : Boyut 12px atanmış ise; 1rem = 12px, boyut 30px atanmış ise; 1rem = 30px’dir.
Font (Yazı tipi) boyutuna bağlı ölçülendirme birimidir. Font (Yazı tipi) boyutunun x yüksekliği değerine göre hesaplanarak bulunur. Başka bir deyiş ile font’un (yazı
ex tipinin) orta işaretidir. Değişiklik gösterebilir ve bu nedenle nadir kullanılan bir ölçülendirme birimidir.
Örnek :
“0” genişliğine bağlı ölçülendirme birimidir. Atanmış boyut değerine göre hesaplanarak bulunur.
ch Örnek : Boyut 12px atanmış ise; 1ch = 6px, boyut 30px atanmış ise; 1ch = 15px’dir.
Boyut atanmamış ise, varsayılan boyut olarak font (yazı tipi) ailesinde yer alan “0” rakamının genişliğini ve yüksekliğini baz alır.
Viewport (Görünür alan) genişlik boyutuna bağlı ölçülendirme birimidir. Viewport (Görünür alan) genişlik boyutu değerine göre hesaplanarak bulunur.
vw Hesaplama formülü, viewport (görünür alan) genişliğinin %1’i olarak belirlenmiştir.
Örnek : Viewport (Görünür alan) genişlik boyutu 1200px ise; 1vw = 12px, viewport (görünür alan) genişlik boyutu 992px ise; 1vw = 9.92px’dir.
Viewport (Görünür alan) yükseklik boyutuna bağlı ölçülendirme birimidir. Viewport (Görünür alan) yükseklik boyutu değerine göre hesaplanarak bulunur.
vh Hesaplama formülü, viewport (görünür alan) yüksekliğinin %1’i olarak belirlenmiştir.
Örnek : Viewport (Görünür alan) yükseklik boyutu 900px ise; 1vh = 9px, viewport (görünür alan) yükseklik boyutu 768px ise; 1vh = 7.68px’dir.
Viewport (Görünür alan) boyutlarına bağlı ölçülendirme birimidir. Viewport (Görünür alan) boyutlarının diğerine kıyasla daha küçük olanının değerine göre
hesaplanarak bulunur.
vmin
Hesaplama formülü, viewport (görünür alan) genişliğinin veya yüksekliğinin küçük olanı baz alınarak %1’i olarak belirlenmiştir.
Örnek : Viewport (Görünür alan) genişlik veya yükseklik boyutunun küçük olanı 1000px ise; 1vmin = 10px’dir.
Viewport (Görünür alan) boyutlarına bağlı ölçülendirme birimidir. Viewport (Görünür alan) boyutlarının diğerine kıyasla daha büyük olanının değerine göre
hesaplanarak bulunur.
vmax
Hesaplama formülü, viewport (görünür alan) genişliğinin veya yüksekliğinin büyük olanı baz alınarak %1’i olarak belirlenmiştir.
Örnek : Viewport (Görünür alan) genişlik veya yükseklik boyutunun büyük olanı 1000px ise; 1vmax = 10px’dir.
Yüzdesel ölçülendirme birimidir. Daima başka bir ölçülendirme birimine orantılı olarak çalışır.
% Hesaplama formülü, üst ölçülendirme değeri / (bölü) 100 * (çarpı) değerdir.
Örnek : Üst ölçülendirme boyutu değeri 1000px ise; 50% = 500px’dir.
 Absolute (Kesin) ölçülendirme birimleri aşağıda listelenmektedir.

Unit (Birim) Description (Tanım)

cm Santimetre uzunluk ölçüsüne bağlı ölçülendirme birimidir.
mm Milimetre uzunluk ölçüsüne bağlı ölçülendirme birimidir
in İnç uzunluk ölçüsüne bağlı ölçülendirme birimidir.
px Pixel (Piksel) ölçülendirme birimidir.
pt Point (Punto) ölçülendirme birimidir.
pc Pica (Pika) ölçülendirme birimidir.

Absolute (Kesin) ölçülendirme birimlerinin karşılaştırılması.

Pixel (Piksel) Point (Punto) Pica (Pika) mm (Milimetre) cm (Santimetre) in (İnç)

1 px = 0.75 pt 1 pt = 1.333333 px 1 pc = 16 px 1 mm = 3.779528 px 1 cm = 37.795276 px 1 in = 96 px
1 px = 0.0625 pc 1 pt = 0.08333333 pc 1 pc = 12 pt 1 mm = 2.834646 pt 1 cm = 28.346457 pt 1 in =72 pt
1 px = 0.264583 mm 1 pt = 0.352778 mm 1 pc = 4.233333 mm 1 mm = 0.236221 pc 1 cm = 2.362205 pc 1 in = 6 pc
1 px = 0.02645833 cm 1 pt = 0.03527778 cm 1 pc = 0.423333 cm 1 mm = 0.1 cm 1 cm = 10 mm 1 in = 25.4 mm
1 px = 0.01041667 in 1 pt = 0.01388889 in 1 pc = 0.166667 in 1 mm = 0.03937008 in 1 cm = 0.393701 in 1 in =2.54 cm

Ölçülendirme birimlerinin tavsiye edilen kullanım alanları.

Ekran işlemleri için (Genel) Ekran işlemleri için (Nadiren) Baskı işlemleri için Baskı işlemleri için (Nadiren)
px, em, % rem, ex, ch, vw, vh, vmin, vmax px, pt, pc, mm, cm, in, em, % ex, rem, ch

Ölçülendirme birimlerinin tavsiye edilmeyen kullanım alanları.

Ekran işlemleri için Baskı işlemleri için

pt, pc, mm, cm, in vw, vh, vmin, vmax

Extra Eğitim® - [Link]

 CSS’DE RENK TANIMLARI
CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları), HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementine biçimlendirme işlemi yaparken
bir çok renk tanımlama çeşidini de aynı zamanda kullanabilmektedir. Bu sayede istenilen herhangi bir HTML (Hyper Text Markup Language) (zengin metin işaretleme dili) elementine, özelliğine
yada içeriğine kolaylıkla renk tanımlama işlemleri yapılabilir. CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) renk tanımlama işlemleri 4 farklı grup ile
sağlanmaktadır. Bu gruplar :

• Ana renk
• rgb ve rgba
• hsl ve hsla
• Hexadecimal (Onaltılık)

Ana Renk :

HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dili) tanımlı olan bir ana renk, CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları içerisinde
yazılarak kullanılabilir.

Örneğin; black, red, green, blue vs.

RGB ve RGBA :

İngilizce olarak red (kırmızı), green (yeşil) ve blue (mavi) kelimelerinin baş harflerinden adını almış olan bir renk uzayıdır. Günümüzde tüm browser’lar (tarayıcılar) tarafından
desteklendiği için en sık kullanılan renk tanımlaması özelliğini taşır. Işığı temel alarak, doğadaki tüm renkleri tanımlayabilir. Renk tanımlaması bu 3 temel referans (red, green, blue)
(kırmızı, yeşil, mavi) ile belirtilir. Her renk %100 oranında karıştırılacak olur ise beyaz, %0 oranında karıştırılacak olur ise siyah renk elde edilir. Bu renkler, 0 ila 255 arasındaki
kombinasyon değerleri ile elde edilir ve CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları içerisinde yazılarak kullanılabilir.

Örneğin; rgb(0, 0, 0) (siyah), rgb(255, 255, 255) (beyaz), rgb(255, 0, 0) (kırmızı) vs.

Bir de rgb renk tanımlama işleminde alpha (alfa) kanalı mevcuttur. Alpha (alfa) kanalı şeffaflık / saydamlık ölçüsü özelliğini taşır. Alpha (alfa) kanalı rgb renk uzayının sonuna
eklenebilir. Bu sayede rgba olarak kullanılarak, renge şeffaflık / saydamlık kazandırabilir. Şeffaflık / saydamlık ölçüsü değeri 0.0 ila 1.0 arasında yazılarak kullanılabilir.

Örneğin; rgba(0, 0, 0, 0.5) (siyah ve %50 oranında şeffaf / saydam), rgba(255, 255, 255, 0.7) (beyaz ve %30 oranında şeffaf / saydam), rgba(255, 0, 0, 1.0) (kırmızı ve saydam / şeffaf değil) vs.

HSL ve HSLA :

İngilizce olarak hue (renk özü), saturation (doygunluk) ve lightness (açıklık) kelimelerinin baş harflerinden adını almış olan bir renk uzayıdır. Doğadaki tüm renkleri tanımlayabilir.
Renk tanımlaması bu 3 temel referans (hue, saturation, lightness) (renk özü, doygunluk, açıklık) ile belirtilir. Aslında hsl bir renk kontrol ve düzeltme modeli olarak bilinir. Hue (renk özü) renk
özütünü, saturation (doygunluk) doyma noktasını yani matlık ve parlaklığını, lightness (açıklık) ise açıklık ve koyuluğunu denetler. En önemli kullanım alanı bir resim üzerinde detay
kaybetmeden renk değişikliklerini yapma olanağı verir.

Hue (renk özü) rengin baskın olan dalga uzunluğunu belirleyerek işlem yapar. Hue (renk özü) açısal derece değeri alır ve bu değer 0° ila 360° arasındaki kombinasyon değerleridir.
Derece değiştikçe farklı renkler elde edilir.

Saturation (doygunluk) rengin canlılığını belirleyerek işlem yapar. Saturation (doygunluk) yüzdesel değer alır ve bu değer %0 ila %100 arasındaki kombinasyon değerleridir. Yüzde
değeri düştükçe renk tonu değeri grileşir, değer yükseldikçe renk tonu değeri canlı renklere neden olur.

Lightness (açıklık) rengin aydınlığını belirleyerek işlem yapar. Diğer bir deyiş ile rengin içerisindeki beyaz oranını belirler. Lightness (açıklık) yüzdesel değer alır ve bu değer %0
ila %100 arasındaki kombinasyon değerleridir. Yüzde değeri düştükçe renk tonu değeri koyulaşır, değer yükseldikçe renk tonu değeri açıklaşır.
 Bu renkler CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları içerisinde yazılarak kullanılabilir.

Örneğin; hsl(0, 0%, 0%) (siyah), hsl(360, 100%, 100%) (beyaz), hsl(0, 100%, 50%) (kırmızı) vs.

Birde hsl renk tanımlama işleminde alpha (alfa) kanalı mevcuttur. Alpha (alfa) kanalı şeffaflık / saydamlık ölçüsü özelliğini taşır. Alpha (alfa) kanalı hsl renk uzayının sonuna
eklenebilir. Bu sayede hsla olarak kullanılarak, renge şeffaflık / saydamlık kazandırabilir. Şeffaflık / saydamlık ölçüsü değeri 0.0 ila 1.0 arasında yazılarak kullanılabilir.

Örneğin; hsla(0, 0%, 0%, 0.5) (siyah ve %50 oranında şeffaf / saydam), hsla(360, 100%, 100%, 0.7) (beyaz ve %30 oranında şeffaf / saydam), hsla(0, 100%, 50, 1.0) (kırmızı ve saydam / şeffaf
değil)vs.

Hexadecimal (Onaltılık) :

Rgb renk uzayı, 00 ile FF arasında hexadecimal (onaltılık) sayı sistemi arasında hareket eder. Bu nedenle rgb tanımlaması istenirse hexadecimal (onaltılık) sayı sistemi ile de
oluşturulabilir. Doğadaki tüm renkleri tanımlayabilir. Hexadecimal (onaltılık) sayı sistemi yapısında 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E ve F değerleri kullanılır. Aynı zamanda
büyük harf küçük harf duyarlı değildir. Hexadecimal (onaltılık) sayı sistemi günümüzde tüm browser’lar (tarayıcılar) tarafından desteklendiği için en sık kullanılan renk tanımlaması
özelliğini taşır ve CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodları içerisinde yazılarak kullanılabilir.

Örneğin; #000000 (siyah), #000 (siyah), #ffffff (beyaz), #fff (beyaz) , #ff0000 (kırmızı), #f00 (kırmızı) vs.
Extra Eğitim® - [Link]
 HTML'İN META TAG’I (ETİKETİ) İÇERİSİNDE VIEWPORT (GÖRÜNÜR ALAN) KULLANIMI
HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) meta tag’ı (etiketi) içerisinde viewport (görünür alan) değeri kullanarak web sayfasının görünür alanını, kullanıcının
kullandığı browser’ın (tarayıcının) görünür alanı olarak tanımlamak mümkündür. Görünür alan, kullanıcının cihazına göre değişiklik gösterebilir. Örneğin; Bir akıllı telefonun görünür
alanı farklı, bir tabletin görünür alanı farklı ve bir bilgisayarın görünür alanı farklı olabilir.

Akıllı telefonlardan ve tabletlerden önce, bir web sayfası sadece bilgisayarlar için tasarlanmaktaydı ve static (sabit) tasarımı ve boyutları vardı. Fakat günümüzde artık farklı
farklı cihazlardan web sayfaları görüntülenebildiği için bu durum fazlasıyla değişti ve responsive (duyarlı) tasarımlar yaygın hale geldi. Çünkü bir bilgisayar için hazırlanmış olan web
sayfası tasarımı, akıllı telefon ve tabletlere sığmayacak kadar büyüktü. Fakat CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) sayesinde, tüm cihazlarda
web sayfaları için sorunsuz ve kusursuz bir görünüm sağlanabilmektedir.

Viewport’un (Görünür alanın) amacı, mobil browser’lardaki (tarayıcılardaki) tasarım düzenini sağlamaktır. Aynı zamanda ölçeklendirme işlemleri de yapılabilmesine olanak sağlar.
Web sayfası tasarımının genişlik ve yükseklik değerini mobil browser’a (tarayıcıya) bildirmek, mobil browser’da da (tarayıcıda da) web sayfasının aynı görünmesini sağlar. Eğer viewport
(görünür alan) değeri kullanılmayacak olur ise, küçük ekranlarda kullanılan browser’lar (tarayıcılar), web sayfasını ekrana sığacak şekilde daraltır ve aynı zamanda yazı boyutunu
değiştirirler. Bu durum ise son derece kötü bir görüntü sunar. Örneğin; Büyük ekranlı bir cihaz için tasarlanmış bir web sayfası, küçük ekranlı bir cihaz için daraltılacak ve yazılar
okunamayacak kadar küçültülecektir. Kullanıcı yazı, resim vb. materyalleri görebilmek için yakınlaştırmak zorunda kalacaktır.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) meta tag’ı (etiketi) içerisinde viewport (görünür alan) değerinin özellikleri için kullanılan değerler :

Attribute (Özellik) Value (Değer) Description (Tanım) Standart Value (Standart değer)
device-width Genişlik değeridir. Tanımlanan genişlik değerine göre web sayfası browser’da (tarayıcıda)
width device-width
pixel değer görüntülenir.
device-height Yükseklik değeridir. Tanımlanan yükseklik değerine göre web sayfası browser’da (tarayıcıda)
height device-height
pixel değer görüntülenir.
Zoom (Yakınlaştırma) seviyesi değeridir. Tanımlanan zoom (yakınlaştırma) seviyesi değerine göre web
initial-scale 0.1 - 10.0 1.0
sayfası ilk yüklendiğinde browser’da (tarayıcıda) görüntülenir.
Kullanıcının yapabileceği minimum (en az) zoom (yakınlaştırma) seviyesi değeridir. Tanımlanan
minimum-scale 0.1 - 10.0 minimum (en az) zoom (yakınlaştırma) seviyesi değerine göre kullanıcı web sayfasına zoom 0.1
(yakınlaştırma) yapabilir.
Kullanıcının yapabileceği maximum (en çok) zoom (yakınlaştırma) seviyesi değeridir. Tanımlanan
maximum-scale 0.1 - 10.0 maximum (en çok) zoom (yakınlaştırma) seviyesi değerine göre kullanıcı web sayfasına zoom 10.0
(yakınlaştırma) yapabilir.
Kullanıcının zoom (yakınlaştırma) yapabilme yetkisi değeridir. Tanımlanan değere göre kullanıcı
user-scalable yes veya no yes
web sayfasına zoom (yakınlaştırma) yapabilir yada yapamaz.
device-dpi
low-dpi DPI (Dots per inch) (inç başına nokta sayısı) değeridir. Tanımlanan değere göre web sayfası kullanıcının
target-densitydpi device-dpi
medium-dpi browser’ında (tarayıcısında) görüntülenir.
high-dpi
Extra Eğitim® - [Link]
 CSS’DE MEDIA (MEDYA) SORGULARI KULLANIMI
CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) media (medya) sorgularını ve aynı zamanda özellikleri ile birlikte değerlerini de kullanılarak
atanacak olan tip, değer yada değerlere göre CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) kodlarının çalışma durumları belirlenebilmekte ve aynı
zamanda duyarlı web yazılımları yapılabilmektedir. CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) media (medya) sorguları ve aynı zamanda özellikleri
ile birlikte değerlerinin de tüm detayları aşağıda listelenmektedir.

CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) media (medya) sorguları için kullanılan değerler :

Value (Değer) Description (Tanım)

all Tüm aygıtlar. Default (Varsayılan) değer.
print Baskı ve yazdırma cihazları.
screen Bilgisayar, tablet, akıllı telefon vb.
speech Ses sentezleme veya ekran okuyucu cihazları.

CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) media (medya) sorguları için kullanılan operatörler :

Operator Name (Operatör Adı) Description (Tanım)

only Sadece operatörü.
and Ve operatörü.
not Değil operatörü.
, Veya operatörü.

CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) media (medya) sorguları için kullanılan ek değerler :

Value (Değer) Description (Tanım)

Hedeflenen görüntü alanının genişlik ve yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-aspect-ratio , max-aspect-ratio)
aspect-ratio
Örnek : "(min-aspect-ratio:16/9)"
Hedeflenen görüntü alanının genişliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-width , max-width)
width
Örnek : "screen and (max-width:1200px)"
Hedeflenen görüntü alanının yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-height , max-height)
height
Örnek : "screen and (max-height:800px)"
Hedeflenen ekranın veya kağıdın dpi veya dpcm türünde renk çözünürlüğü / yoğunluğu. Minimum ve maksimum değerlerini de
resolution kullanılabilir. (min-resolution , max-resolution)
Örnek : "print and (min-resolution:300dpi)"
Hedeflenen ekranın ışık seviyesi. Dim (Sönük), normal veya washed (parlak) değerlerini kullanılabilir.
light-level
Örnek : "(light-level:dim)"
Hedeflenen uygulamanın görüntülenme modu. Fullscreen (Tam ekran), standalone (bağımsız), minimal-ui (minimum kullanıcı arayüzü) veya
display-mode browser (tarayıcı) değerlerini kullanılabilir.
Örnek : "all and (display-mode:fullscreen)"
Hedeflenen ekranın renk başına bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color , max-color)
color
Örnek : "screen and (min-color:3)"
Hedeflenen ekranın işleyebileceği renk sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color-index , max-color-index)
color-index
Örnek : "screen and (min-color-index:256)"
 Hedeflenen ekranın desteklediği renk gamı / yelpazesi. srgb, p3 veya rec2020 değerlerini kullanılabilir.
color-gamut
Örnek : "(color-gamut:srgb)"
Hedeflenen cihazın OS (operating system) (işletim sistemi) renklerini tersine çevirebilmesi durumu. None (Yok) veya inverted (ters) değerlerini
inverted-colors kullanılabilir.
Örnek : "(inverted-colors:inverted)"
Hedeflenen ekranın veya kağıdın yönü. Portrait (portre) veya landscape (manzara) değerlerini kullanılabilir.
orientation
Örnek : "all and (orientation:landscape)"
Hedeflenen tek renkli ekranın (greyscale) (gri tonlama), piksel başına düşen bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir.
monochrome (min-monochrome , max-monochrome)
Örnek : "(monochrome)" (tek renkli cihaz) - "(monochrome:0)" (tek renkli olmayan cihaz)
Hedeflenen cihazın kullandığı ekran (ızgara veya bitmap) tabanı. 0 veya 1 değerlerini kullanılabilir.
grid
Örnek : "(grid:0)"
Hedeflenen cihazın ekran tarama türü. Interlace (Karıştırarak) veya progressive (ilerleyerek) değerlerini kullanılabilir.
scan
Örnek : "(scan:progressive)"
Hedeflenen cihazın görüntü yenileme sıklığı. Non (Olmayan), slow (yavaş) veya fast (hızlı) değerlerini kullanılabilir.
update
Örnek : "(update:fast)"
Hedeflenen cihazın komut dosyası kullanabilme durumu. None (Yok), initial-only (sadece başlangıçta) veya enabled (etkin) değerlerini
scripting kullanılabilir.
Örnek : "(scripting:enabled)"
Hedeflenen cihazın birincil giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini kullanılabilir.
pointer
Örnek : "(pointer:fine)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini
any-pointer kullanılabilir.
Örnek : "(any-pointer:fine)"
Hedeflenen cihazın birincil giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
any-hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın görüntüleme alanı blok eksenin boyunca taşan içerik durumu. None (Yok), scroll (kaydırma), optional-paged (isteğe bağlı
overflow-block sayfalı) veya paged (sayfalı) değerlerini kullanılabilir.
Örnek : "(overflow-block:scroll)"
Hedeflenen cihazın görüntüleme alanı satır içi eksenin boyunca taşan içerik durumu. None (Yok) veya scroll (kaydırma) değerlerini
overflow-inline kullanılabilir.
Örnek : "(overflow-inline:scroll)"
Extra Eğitim® - [Link]
 HTML'İN LINK TAG’I (ETİKETİ) İÇERİSİNDE MEDIA (MEDYA) KULLANIMI
HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) link tag’ı (etiketi) içerisinde media (medya) özelliği kullanılarak atanacak olan tip, değer yada değerlere göre CSS
dosyalarının çalışma durumları belirlenebilmekte ve aynı zamanda duyarlı web yazılımları yapılabilmektedir.
(Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları)
HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) link tag’ı (etiketi) içerisinde kullanılmakta olan media (medya) özelliğinin tüm detayları aşağıda listelenmektedir.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) link tag’ı (etiketi) içerisinde media (medya) özelliği için kullanılan değerler :

Value (Değer) Description (Tanım)

all Tüm aygıtlar. Default (Varsayılan) değer.
print Baskı ve yazdırma cihazları.
screen Bilgisayar, tablet, akıllı telefon vb.
speech Ses sentezleme veya ekran okuyucu cihazları.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) link tag’ı (etiketi) içerisinde media (medya) özelliği için kullanılan operatörler :

Operator Name (Operatör Adı) Description (Tanım)

only Sadece operatörü.
and Ve operatörü.
not Değil operatörü.
, Veya operatörü.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) link tag’ı (etiketi) içerisinde media (medya) özelliği için kullanılan ek değerler :

Value (Değer) Description (Tanım)

Hedeflenen görüntü alanının genişlik ve yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-aspect-ratio , max-aspect-ratio)
aspect-ratio
Örnek : "(min-aspect-ratio:16/9)"
Hedeflenen görüntü alanının genişliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-width , max-width)
width
Örnek : "screen and (max-width:1200px)"
Hedeflenen görüntü alanının yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-height , max-height)
height
Örnek : "screen and (max-height:800px)"
Hedeflenen ekranın veya kağıdın dpi veya dpcm türünde renk çözünürlüğü / yoğunluğu. Minimum ve maksimum değerlerini de
resolution kullanılabilir. (min-resolution , max-resolution)
Örnek : "print and (min-resolution:300dpi)"
Hedeflenen ekranın ışık seviyesi. Dim (Sönük), normal veya washed (parlak) değerlerini kullanılabilir.
light-level
Örnek : "(light-level:dim)"
Hedeflenen uygulamanın görüntülenme modu. Fullscreen (Tam ekran), standalone (bağımsız), minimal-ui (minimum kullanıcı arayüzü) veya
display-mode browser (tarayıcı) değerlerini kullanılabilir.
Örnek : "all and (display-mode:fullscreen)"
Hedeflenen ekranın renk başına bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color , max-color)
color
Örnek : "screen and (min-color:3)"
Hedeflenen ekranın işleyebileceği renk sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color-index , max-color-index)
color-index
Örnek : "screen and (min-color-index:256)"
 Hedeflenen ekranın desteklediği renk gamı / yelpazesi. srgb, p3 veya rec2020 değerlerini kullanılabilir.
color-gamut
Örnek : "(color-gamut:srgb)"
Hedeflenen cihazın OS (operating system) (işletim sistemi) renklerini tersine çevirebilmesi durumu. None (Yok) veya inverted (ters) değerlerini
inverted-colors kullanılabilir.
Örnek : "(inverted-colors:inverted)"
Hedeflenen ekranın veya kağıdın yönü. Portrait (portre) veya landscape (manzara) değerlerini kullanılabilir.
orientation
Örnek : "all and (orientation:landscape)"
Hedeflenen tek renkli ekranın (greyscale) (gri tonlama), piksel başına düşen bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir.
monochrome (min-monochrome , max-monochrome)
Örnek : "(monochrome)" (tek renkli cihaz) - "(monochrome:0)" (tek renkli olmayan cihaz)
Hedeflenen cihazın kullandığı ekran (ızgara veya bitmap) tabanı. 0 veya 1 değerlerini kullanılabilir.
grid
Örnek : "(grid:0)"
Hedeflenen cihazın ekran tarama türü. Interlace (Karıştırarak) veya progressive (ilerleyerek) değerlerini kullanılabilir.
scan
Örnek : "(scan:progressive)"
Hedeflenen cihazın görüntü yenileme sıklığı. Non (Olmayan), slow (yavaş) veya fast (hızlı) değerlerini kullanılabilir.
update
Örnek : "(update:fast)"
Hedeflenen cihazın komut dosyası kullanabilme durumu. None (Yok), initial-only (sadece başlangıçta) veya enabled (etkin) değerlerini
scripting kullanılabilir.
Örnek : "(scripting:enabled)"
Hedeflenen cihazın birincil giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini kullanılabilir.
pointer
Örnek : "(pointer:fine)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini
any-pointer kullanılabilir.
Örnek : "(any-pointer:fine)"
Hedeflenen cihazın birincil giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
any-hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın görüntüleme alanı blok eksenin boyunca taşan içerik durumu. None (Yok), scroll (kaydırma), optional-paged (isteğe bağlı
overflow-block sayfalı) veya paged (sayfalı) değerlerini kullanılabilir.
Örnek : "(overflow-block:scroll)"
Hedeflenen cihazın görüntüleme alanı satır içi eksenin boyunca taşan içerik durumu. None (Yok) veya scroll (kaydırma) değerlerini
overflow-inline kullanılabilir.
Örnek : "(overflow-inline:scroll)"
Extra Eğitim® - [Link]
 HTML'İN STYLE TAG’I (ETİKETİ) İÇERİSİNDE MEDIA (MEDYA) KULLANIMI
HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) style tag’ı (etiketi) içerisinde media (medya) özelliği kullanılarak atanacak olan tip, değer yada değerlere göre CSS
kodlarının çalışma durumları belirlenebilmekte ve aynı zamanda duyarlı web yazılımları yapılabilmektedir.
(Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları)
HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) style tag’ı (etiketi) içerisinde kullanılmakta olan media (medya) özelliğinin tüm detayları aşağıda listelenmektedir.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) style tag’ı (etiketi) içerisinde media (medya) özelliği için kullanılan değerler :

Value (Değer) Description (Tanım)

all Tüm aygıtlar. Default (Varsayılan) değer.
print Baskı ve yazdırma cihazları.
screen Bilgisayar, tablet, akıllı telefon vb.
speech Ses sentezleme veya ekran okuyucu cihazları.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) style tag’ı (etiketi) içerisinde media (medya) özelliği için kullanılan operatörler :

Operator Name (Operatör Adı) Description (Tanım)

only Sadece operatörü.
and Ve operatörü.
not Değil operatörü.
, Veya operatörü.

HTML’in (Hyper Text Markup Language) (zengin metin işaretleme diline) style tag’ı (etiketi) içerisinde media (medya) özelliği için kullanılan ek değerler :

Value (Değer) Description (Tanım)

Hedeflenen görüntü alanının genişlik ve yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-aspect-ratio , max-aspect-ratio)
aspect-ratio
Örnek : "(min-aspect-ratio:16/9)"
Hedeflenen görüntü alanının genişliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-width , max-width)
width
Örnek : "screen and (max-width:1200px)"
Hedeflenen görüntü alanının yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-height , max-height)
height
Örnek : "screen and (max-height:800px)"
Hedeflenen ekranın veya kağıdın dpi veya dpcm türünde renk çözünürlüğü / yoğunluğu. Minimum ve maksimum değerlerini de
resolution kullanılabilir. (min-resolution , max-resolution)
Örnek : "print and (min-resolution:300dpi)"
Hedeflenen ekranın ışık seviyesi. Dim (Sönük), normal veya washed (parlak) değerlerini kullanılabilir.
light-level
Örnek : "(light-level:dim)"
Hedeflenen uygulamanın görüntülenme modu. Fullscreen (Tam ekran), standalone (bağımsız), minimal-ui (minimum kullanıcı arayüzü) veya
display-mode browser (tarayıcı) değerlerini kullanılabilir.
Örnek : "all and (display-mode:fullscreen)"
Hedeflenen ekranın renk başına bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color , max-color)
color
Örnek : "screen and (min-color:3)"
Hedeflenen ekranın işleyebileceği renk sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color-index , max-color-index)
color-index
Örnek : "screen and (min-color-index:256)"
 Hedeflenen ekranın desteklediği renk gamı / yelpazesi. srgb, p3 veya rec2020 değerlerini kullanılabilir.
color-gamut
Örnek : "(color-gamut:srgb)"
Hedeflenen cihazın OS (operating system) (işletim sistemi) renklerini tersine çevirebilmesi durumu. None (Yok) veya inverted (ters) değerlerini
inverted-colors kullanılabilir.
Örnek : "(inverted-colors:inverted)"
Hedeflenen ekranın veya kağıdın yönü. Portrait (portre) veya landscape (manzara) değerlerini kullanılabilir.
orientation
Örnek : "all and (orientation:landscape)"
Hedeflenen tek renkli ekranın (greyscale) (gri tonlama), piksel başına düşen bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir.
monochrome (min-monochrome , max-monochrome)
Örnek : "(monochrome)" (tek renkli cihaz) - "(monochrome:0)" (tek renkli olmayan cihaz)
Hedeflenen cihazın kullandığı ekran (ızgara veya bitmap) tabanı. 0 veya 1 değerlerini kullanılabilir.
grid
Örnek : "(grid:0)"
Hedeflenen cihazın ekran tarama türü. Interlace (Karıştırarak) veya progressive (ilerleyerek) değerlerini kullanılabilir.
scan
Örnek : "(scan:progressive)"
Hedeflenen cihazın görüntü yenileme sıklığı. Non (Olmayan), slow (yavaş) veya fast (hızlı) değerlerini kullanılabilir.
update
Örnek : "(update:fast)"
Hedeflenen cihazın komut dosyası kullanabilme durumu. None (Yok), initial-only (sadece başlangıçta) veya enabled (etkin) değerlerini
scripting kullanılabilir.
Örnek : "(scripting:enabled)"
Hedeflenen cihazın birincil giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini kullanılabilir.
pointer
Örnek : "(pointer:fine)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini
any-pointer kullanılabilir.
Örnek : "(any-pointer:fine)"
Hedeflenen cihazın birincil giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
any-hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın görüntüleme alanı blok eksenin boyunca taşan içerik durumu. None (Yok), scroll (kaydırma), optional-paged (isteğe bağlı
overflow-block sayfalı) veya paged (sayfalı) değerlerini kullanılabilir.
Örnek : "(overflow-block:scroll)"
Hedeflenen cihazın görüntüleme alanı satır içi eksenin boyunca taşan içerik durumu. None (Yok) veya scroll (kaydırma) değerlerini
overflow-inline kullanılabilir.
Örnek : "(overflow-inline:scroll)"
Extra Eğitim® - [Link]
 CSS’DE IMPORT İŞLEMİ İÇİN MEDIA (MEDYA) ÖZELLİKLERİNİN VE DEĞERLERİNİN KULLANIMI
CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) import işlemi için media (medya) özelliklerini ve değerlerini kullanılarak atanacak olan tip, değer
yada değerlere göre CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) dosyalarının çalışma durumları belirlenebilmekte ve aynı zamanda duyarlı web
yazılımları yapılabilmektedir. CSS (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) import işlemi için kullanılmakta olan media (medya) özelliklerinin ve değerlerinin
tüm detayları aşağıda listelenmektedir.

CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) import işleminde media (medya) özelliği için kullanılan değerler :

Value (Değer) Description (Tanım)

all Tüm aygıtlar. Default (Varsayılan) değer.
print Baskı ve yazdırma cihazları.
screen Bilgisayar, tablet, akıllı telefon vb.
speech Ses sentezleme veya ekran okuyucu cihazları.

CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) import işleminde media (medya) özelliği için kullanılan operatörler :

Operator Name (Operatör Adı) Description (Tanım)

only Sadece operatörü.
and Ve operatörü.
not Değil operatörü.
, Veya operatörü.

CSS’de (Cascading Style Sheets) (basamaklı stil şablonları veya basamaklı biçim sayfaları) import işleminde media (medya) özelliği için kullanılan ek değerler :

Value (Değer) Description (Tanım)

Hedeflenen görüntü alanının genişlik ve yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-aspect-ratio , max-aspect-ratio)
aspect-ratio
Örnek : "(min-aspect-ratio:16/9)"
Hedeflenen görüntü alanının genişliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-width , max-width)
width
Örnek : "screen and (max-width:1200px)"
Hedeflenen görüntü alanının yüksekliği. Minimum ve maksimum değerlerini de kullanılabilir. (min-height , max-height)
height
Örnek : "screen and (max-height:800px)"
Hedeflenen ekranın veya kağıdın dpi veya dpcm türünde renk çözünürlüğü / yoğunluğu. Minimum ve maksimum değerlerini de
resolution kullanılabilir. (min-resolution , max-resolution)
Örnek : "print and (min-resolution:300dpi)"
Hedeflenen ekranın ışık seviyesi. Dim (Sönük), normal veya washed (parlak) değerlerini kullanılabilir.
light-level
Örnek : "(light-level:dim)"
Hedeflenen uygulamanın görüntülenme modu. Fullscreen (Tam ekran), standalone (bağımsız), minimal-ui (minimum kullanıcı arayüzü) veya
display-mode browser (tarayıcı) değerlerini kullanılabilir.
Örnek : "all and (display-mode:fullscreen)"
Hedeflenen ekranın renk başına bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color , max-color)
color
Örnek : "screen and (min-color:3)"
Hedeflenen ekranın işleyebileceği renk sayısı. Minimum ve maksimum değerlerini de kullanılabilir. (min-color-index , max-color-index)
color-index
Örnek : "screen and (min-color-index:256)"
 Hedeflenen ekranın desteklediği renk gamı / yelpazesi. srgb, p3 veya rec2020 değerlerini kullanılabilir.
color-gamut
Örnek : "(color-gamut:srgb)"
Hedeflenen cihazın OS (operating system) (işletim sistemi) renklerini tersine çevirebilmesi durumu. None (Yok) veya inverted (ters) değerlerini
inverted-colors kullanılabilir.
Örnek : "(inverted-colors:inverted)"
Hedeflenen ekranın veya kağıdın yönü. Portrait (portre) veya landscape (manzara) değerlerini kullanılabilir.
orientation
Örnek : "all and (orientation:landscape)"
Hedeflenen tek renkli ekranın (greyscale) (gri tonlama), piksel başına düşen bit sayısı. Minimum ve maksimum değerlerini de kullanılabilir.
monochrome (min-monochrome , max-monochrome)
Örnek : "(monochrome)" (tek renkli cihaz) - "(monochrome:0)" (tek renkli olmayan cihaz)
Hedeflenen cihazın kullandığı ekran (ızgara veya bitmap) tabanı. 0 veya 1 değerlerini kullanılabilir.
grid
Örnek : "(grid:0)"
Hedeflenen cihazın ekran tarama türü. Interlace (Karıştırarak) veya progressive (ilerleyerek) değerlerini kullanılabilir.
scan
Örnek : "(scan:progressive)"
Hedeflenen cihazın görüntü yenileme sıklığı. Non (Olmayan), slow (yavaş) veya fast (hızlı) değerlerini kullanılabilir.
update
Örnek : "(update:fast)"
Hedeflenen cihazın komut dosyası kullanabilme durumu. None (Yok), initial-only (sadece başlangıçta) veya enabled (etkin) değerlerini
scripting kullanılabilir.
Örnek : "(scripting:enabled)"
Hedeflenen cihazın birincil giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini kullanılabilir.
pointer
Örnek : "(pointer:fine)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması işaretleme aygıtı ise. None (Yok), coarse (kalitesiz) veya fine (iyi) değerlerini
any-pointer kullanılabilir.
Örnek : "(any-pointer:fine)"
Hedeflenen cihazın birincil giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın kullanılabilir bir giriş mekanizması elementin üzerine gelebilme durumu. None (Yok) veya hover (üzerinde) değerlerini
any-hover kullanılabilir.
Örnek : "(hover:hover)"
Hedeflenen cihazın görüntüleme alanı blok eksenin boyunca taşan içerik durumu. None (Yok), scroll (kaydırma), optional-paged (isteğe bağlı
overflow-block sayfalı) veya paged (sayfalı) değerlerini kullanılabilir.
Örnek : "(overflow-block:scroll)"
Hedeflenen cihazın görüntüleme alanı satır içi eksenin boyunca taşan içerik durumu. None (Yok) veya scroll (kaydırma) değerlerini
overflow-inline kullanılabilir.
Örnek : "(overflow-inline:scroll)"
Extra Eğitim® - [Link]
 CSS'DE HTML ELEMANLARI İÇİN VARSAYILAN DEĞERLER
HTML’de (Hyper Text Markup Language) (zengin metin işaretleme dilinde) kullanılmakta olan tüm elementlerin varsayılan biçimlendirme değerleri bulunur. Elementler için HTML (Hyper
tarafından belirlenmiş olan varsayılan biçimlendirme değerleri aşağıdadır.
Text Markup Language) (zengin metin işaretleme dili)

HTML Element Name (HTML Element Adı) Default Value (Varsayılan Değer)
color:(internal value);
a:link text-decoration:underline;
cursor:auto;
color:(internal value);
a:visited text-decoration:underline;
cursor:auto;
a:link:active color:(internal value);
a:visited:active color:(internal value);
abbr Değer yok
display:block;
address
font-style:italic;
area display:none;
article display:block;
aside display:block;
audio Değer yok
b font-weight:bold;
base Değer yok
bdi Değer yok
bdo unicode-bidi:bidi-override;
display:block;
margin-top:1em;
blockquote margin-bottom:1em;
margin-left:40px;
margin-right:40px;
display:block;
body
margin:8px;
body:focus outline:none;
br Değer yok
button Değer yok
canvas Değer yok
display:table-caption;
caption
text-align:center;
cite font-style:italic;
code font-family:monospace;
col display:table-column;
HTML Element Name (HTML Element Adı) Default Value (Varsayılan Değer)
colgroup display:table-column-group;
datalist display:none;
display:block;
dd
margin-left:40px;
del text-decoration:line-through;
details display:block;
dfn font-style:italic;
dialog Değer yok
div display:block;
display:block;
margin-top:1em;
dl margin-bottom:1em;
margin-left:0;
margin-right:0;
dt display:block;
em font-style:italic;
embed:focus outline:none;
display:block;
margin-left:2px;
margin-right:2px;
padding-top:0.35em;
fieldset
padding-bottom:0.625em;
padding-left:0.75em;
padding-right:0.75em;
border:2px groove (internal value);
figcaption display:block;
display:block;
margin-top:1em;
figure margin-bottom:1em;
margin-left:40px;
margin-right:40px;
footer display:block;
display:block;
form
margin-top:0em;
display:block;
font-size:2em;
margin-top:0.67em;
h1 margin-bottom:0.67em;
margin-left:0;
margin-right:0;
font-weight:bold;
HTML Element Name (HTML Element Adı) Default Value (Varsayılan Değer)
display:block;
font-size:1.5em;
margin-top:0.83em;
h2 margin-bottom:0.83em;
margin-left:0;
margin-right:0;
font-weight:bold;
display:block;
font-size:1.17em;
margin-top:1em;
h3 margin-bottom:1em;
margin-left:0;
margin-right:0;
font-weight:bold;
display:block;
margin-top:1.33em;
margin-bottom:1.33em;
h4
margin-left:0;
margin-right:0;
font-weight:bold;
display:block;
font-size:.83em;
margin-top:1.67em;
h5 margin-bottom:1.67em;
margin-left:0;
margin-right:0;
font-weight:bold;
display:block;
font-size:.67em;
margin-top:2.33em;
h6 margin-bottom:2.33em;
margin-left:0;
margin-right:0;
font-weight:bold;
head display:none;
header display:block;
display:block;
margin-top:0.5em;
margin-bottom:0.5em;
hr margin-left:auto;
margin-right:auto;
border-style:inset;
border-width:1px;
html display:block;
HTML Element Name (HTML Element Adı) Default Value (Varsayılan Değer)
html:focus outline:none;
i font-style:italic;
iframe:focus outline:none;
iframe[seamless] display:block;
img display:inline-block;
input Değer yok
ins text-decoration:underline;
kbd font-family:monospace;
label cursor:default;
display:block;
padding-left:2px;
legend
padding-right:2px;
border:none;
li display:list-item;
link display:none;
main Değer yok
map display:inline;
background-color:yellow;
mark
color:black;
display:block;
list-style-type:disc;
margin-top:1em;
menu margin-bottom:1em;
margin-left:0;
margin-right:0;
padding-left:40px;
menuitem Değer yok
meta Değer yok
meter Değer yok
nav display:block;
noscript Değer yok
object:focus outline:none;
display:block;
list-style-type:decimal;
margin-top:1em;
ol margin-bottom:1em;
margin-left:0;
margin-right:0;
padding-left:40px;
HTML Element Name (HTML Element Adı) Default Value (Varsayılan Değer)
optgroup Değer yok
option Değer yok
output display:inline;
display:block;
margin-top:1em;
p margin-bottom:1em;
margin-left:0;
margin-right:0;
param display:none;
picture Değer yok
display:block;
font-family:monospace;
pre
white-space:pre;
margin:1em 0;
progress Değer yok
q display:inline;
q::before content:open-quote;
q::after content:close-quote;
rp Değer yok
rt line-height:normal;
ruby Değer yok
s text-decoration:line-through;
samp font-family:monospace;
script display:none;
section display:block;
select Değer yok
small font-size:smaller;
source Değer yok
span Değer yok
strike text-decoration:line-through;
strong font-weight:bold;
style display:none;
vertical-align:sub;
sub
font-size:smaller;
summary display:block;
vertical-align:super;
sup
font-size:smaller;
HTML Element Name (HTML Element Adı) Default Value (Varsayılan Değer)
display:table;
border-collapse:separate;
table
border-spacing:2px;
border-color:gray;
display:table-row-group;
tbody vertical-align:middle;
border-color:inherit;
display:table-cell;
td
vertical-align:inherit;
textarea Değer yok
display:table-footer-group;
tfoot vertical-align:middle;
border-color:inherit;
display:table-cell;
vertical-align:inherit;
th
font-weight:bold;
text-align:center;
display:table-header-group;
thead vertical-align:middle;
border-color:inherit;
time Değer yok
title display:none;
display:table-row;
tr vertical-align:inherit;
border-color:inherit;
track Değer yok
u text-decoration:underline;
display:block;
list-style-type:disc;
margin-top:1em;
ul margin-bottom:1 em;
margin-left:0;
margin-right:0;
padding-left:40px;
var font-style:italic;
video Değer yok
wbr Değer yok

Extra Eğitim® - [Link]

 TERİMLER KILAVUZU
API : Uygulama programlama arayüzleri (Application Programing Interfaces)

ASCII : Bilgi değişimi için Amerikan standart kodlama sistemi (American Standard Code for Information Interchange)

ASP : Aktif sunucu sayfaları (Active Server Pages)

CERN : Avrupa nükleer araştırma merkezi (Conseil Européen pour la Recherche Nucléaire)

CSS : Basamaklı stil şablonları / Basamaklı biçim sayfaları (Cascading Style Sheets)

DNS : Alan adı isimlendirme sitemi (Domain Name System)

DTD : Belge türü tanımı (Document Type Definition)

FTP : Dosya transfer protokolü (File Transfer Protocol)

GML : Genel işaretleme dili (General Markup Language)

HTML : Zengin metin işaretleme dili (Hyper Text Markup Language)

IDE : Tümleşik geliştirme ortamı (Integrated Development Environment)

IETF : İnternet mühendisliği görev kuvveti (Internet Engineering Task Force)

IP : İnternet protokolü (Internet Protocol)

IPv4 : İnternet protokolü versiyon 4 (Internet Protocol Version 4)

ISO : Uluslararası standartlar organizasyonu (International Standards Organization)

IEC : Uluslararası elektroteknik komisyonu (International Electrotechnical Commission)

MIME : Çok amaçlı internet posta eklentileri (Multipurpose Internet Mail Extensions)

ODTÜ : Orta Doğu Teknik Üniversitesi

OOP : Nesne tabanlı programlama (Object Oriented Programming)

PHP : Üstün yazı ön işlemcisi / Kişisel ana sayfa (Hypertext Preprocessor / Personal Home Page)

SEO : Arama motoru optimizasyonu (Search Engine Optimization)

SGML : Standart genelleştirilmiş işaretleme dili (Standard Generalized Markup Language)

SSL : Güvenli giriş katmanı (Secure Socket Layer)

TCP : İletim kontrol protokolü (Transmission Control Protocol)

URL : Nizami kaynak bulucu (Uniform Resource Locator)

W3C : Dünya çapında ağ konsorsiyumu (World Wide Web Consortium)

WHATWG : Web köprü uygulama teknolojisi çalışma grubu (Web Hypertext Application Technology Working Group)

WWW : Web (World Wide Web)

XHTML : Genişletilebilir büyütülmüş metin işaretleme dili (Extensible Hypertext Markup Language)

XML : Genişletilebilir işaretleme dili (Extensible Markup Language)

XSL : Genişletilebilir stil dili (Extensible Style Language)

Extra Eğitim® - [Link]
 HIZLI AÇIKLAMA KILAVUZU
!important : CSS kuralları seviye basamaklandırma yapısında önceliği değiştirir.

# : Belirtilecek olan ID değeri ile eşleşen HTML elementini seçer. (Benzersiz kimlik seçici)

* : Tüm HTML elementlerini seçer. (Genel / Evrensel seçici)

, : Belirtilecek olan iki veya daha fazla HTML elementini seçer. (Çoklu seçici)

. : Belirtilecek olan class (sınıf) değeri ile eşleşen HTML elementini seçer. (Sınıf seçici)

/* … */ : Gizli açıklama alanı simgeleri.

::after : Belirtilen HTML elementinin sonrasına içerik atayarak stil tanımlar.

::before : Belirtilen HTML elementinin öncesine içerik atayarak stil tanımlar.

::first-letter : Belirtilen HTML elementinin ilk karakterine stil tanımlar.

::first-line : Belirtilen HTML elementinin ilk satırına stil tanımlar.

::selection : Belirtilen HTML elementinin kullanıcı tarafından seçilen kısmına stil tanımlar.

:active : Belirtilen HTML elementi aktif olduğunda stil tanımlar.

:any-link : Doküman içerisinde bulunan HTML'in link elementinin / elementlerinin URL değeri boş değil ise stil tanımlar.

:checked : Belirtilen HTML elementi seçildiğinde stil tanımlar. Belirtilen HTML elementi seçimi kaldırıldığında stil normale döner.

:disabled : Belirtilen HTML elementi etkin olmadığında stil tanımlar.

:empty : Belirtilen HTML elementinin içeriği tamamen boş ise stil tanımlar.

:enabled : Belirtilen HTML elementi etkin olduğunda stil tanımlar.

:first-child : Belirtilen HTML elementi baz alınarak, üst elementine göre bitişik ilk child (çocuk) durumundaki elemente stil tanımlar.

:first-of-type : Belirtilen HTML elementi baz alınarak, üst elementine göre ilk child (çocuk) durumundaki elemente stil tanımlar.

:focus : Belirtilen HTML elementine odaklanıldığında stil tanımlar. Belirtilen HTML elementinin odağından çıkıldığında stil normale döner.

:hover : Belirtilen HTML elementinin mouse (fare) üzerine geldiğinde stil tanımlar. Belirtilen HTML elementinin mouse (fare) üzerinden ayrıldığında

stil normale döner.

:in-range : Belirtilen HTML elementi bilgi girişi belirtilen aralıklar dahilinde bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi belirtilen

aralıklar dışında bir değer olduğunda stil normale döner.

:invalid : Belirtilen HTML elementi bilgi girişi geçersiz bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi geçerli bir değer olduğunda

stil normale döner.

:lang() : Belirtilen HTML elementinin lang (dil) özelliğine göre stil tanımlar.

:last-child : Belirtilen HTML elementi baz alınarak, üst elementine göre bitişik son child (çocuk) durumundaki elemente stil tanımlar.

:last-of-type : Belirtilen HTML elementi baz alınarak, üst elementine göre son child (çocuk) durumundaki elemente stil tanımlar.

:link : Daha önce hiç açılmamış link'in rengini tanımlar.

:not() : Belirtilen HTML elementi hariç diğer tüm HTML elementlerine stil tanımlar.

:nth-child() : Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türlerine bakılmaksızın ilk child (çocuk) durumundaki elementden

başlanarak sıra numarasına / numaralarına göre stil tanımlar.

:nth-last-child() : Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türlerine bakılmaksızın son child (çocuk) durumundaki

elementden başlanarak sıra numarasına / numaralarına göre stil tanımlar.

:nth-last-of-type() : Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türleride eşleşen son child (çocuk) durumundaki elementden

başlanarak sıra numarasına / numaralarına göre stil tanımlar.

:nth-of-type() : Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türleride eşleşen ilk child (çocuk) durumundaki elementden

başlanarak sıra numarasına / numaralarına göre stil tanımlar.

:only-child : Belirtilen HTML elementi baz alınarak, üst elementine göre bitişik tek child (çocuk) durumundaki elemente stil tanımlar.

:only-of-type : Belirtilen HTML elementi baz alınarak, üst elementine göre kardeş element türleride eşleşen tek child (çocuk) durumundaki elemente stil

tanımlar.

:optional : Belirtilen HTML elementi bilgi girişi opsiyonel olduğunda stil tanımlar.

:out-of-range : Belirtilen HTML elementi bilgi girişi belirtilen aralıklar dışında bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi belirtilen

aralıklar dahilinde bir değer olduğunda stil normale döner.

:read-only : Belirtilen HTML elementi sadece okunabilir olduğunda stil tanımlar.

:read-write : Belirtilen HTML elementi sadece okunabilir ve yazılabilir olduğunda stil tanımlar.

:required : Belirtilen HTML elementine bilgi girişi zorunlu olduğunda stil tanımlar.

:root : HTML belgesinin kök (html) elementine stil tanımlar.

:target : Belirtilen HTML elementine çapa türündeki link'lerle bağlanmış olan ve tıklandığında hedeflenmiş olan elemente stil tanımlar.
:valid : Belirtilen HTML elementi bilgi girişi geçerli bir değer olduğunda stil tanımlar. Belirtilen HTML elementi bilgi girişi geçersiz bir değer olduğunda

stil normale döner.

:visited : Daha önce açılmış link'in rengini tanımlar.

@charset : CSS dosyalarında karakter seti tanımlaması yapar.

@font-face : Metinler için sistemde yüklü olmayan font'ların kullanılabilme durumlarını belirler.

@import : Oluşturulmuş olan herhangi bir veya daha fazla CSS dokümanının, stil alanlarına veya stil sayfalarına dahil edilmesini sağlar.

@keyframes : HTML elementine tanımlanmış olan animasyonun, animasyon sırasındaki ara aşamalarını belirler.

@media : HTML elementine veya elementlerine sorgu dahilinde atanacak olan tip, değer yada değerlere göre CSS kodlarının çalışma durumunu

belirler.

[$=] : Belirtilecek olan özelliğe ve belirtilecek olan değer bitişine sahip HTML elementini seçer. (Özellik seçicilerde biten değer filtresi)

[*=] : Belirtilecek olan özelliğe ve belirtilecek olan değer içeriğine sahip HTML elementini seçer. (Özellik seçicilerde içeren değer filtresi)

[] : Belirtilecek olan özelliğe sahip HTML elementini seçer. (Özellik seçici)

[^=] : Belirtilecek olan özelliğe ve belirtilecek olan değer başlangıcına sahip HTML elementini seçer. (Özellik seçicilerde başlayan değer filtresi)

[|=] : Belirtilecek olan özelliğe ve belirtilecek olan değer başlangıcına sahip (tireli veya tiresiz) HTML elementini seçer. (Özellik seçicilerde tireli veya tiresiz
başlayan değer filtresi)

[~=] : Belirtilecek olan özelliğe ve belirtilecek olan değer içeriğine sahip, aynı zamanda tam olarak eşleşen HTML elementini seçer. (Özellik seçicilerde
içeren tam değer filtresi)

[=] : Belirtilecek olan özelliğe ve belirtilecek olan değere sahip, aynı zamanda tam olarak eşleşen HTML elementini seçer. (Özellik seçicilerde tam
değer filtresi)

~ : Belirtilecek olan HTML elementinin, belirtilecek olan sibling (kardeş) elementini seçer. (Genel kardeş seçici)

+ : Belirtilecek olan HTML elementinin, belirtilecek olan bitişik sibling (kardeş) elementini seçer. (Bitişik kardeş seçici)

> : Belirtilecek olan HTML elementinin, belirtilecek olan child (çocuk) elementini seçer. (Çocuk seçici)

align-content : Esnek kutu içerisinde bulunan elementler tüm alanı kullanmadığında ve satır kırılma olduğunda, elementlerin hizalama özelliklerini belirler.

align-content : Izgara düzeni içerisinde bulunan elementler tüm alanı kullanmadığında, elementlerin dikey hizalama özelliklerini belirler.

align-items : Esnek kutu içerisinde bulunan elementlerin hizalama özelliklerini belirler.

align-items : Izgara düzeni içerisinde bulunan elementlerin, dikey hizalama özelliklerini belirler.

align-self : Esnek kutu içerisinde bulunan ve seçilen element veya elementlerin hizalama özelliklerini belirler.
align-self : Izgara düzeni içerisinde bulunan ve seçilen element veya elementlerin, dikey hizalama özelliklerini belirler.

all : direction ve unicode-bidi hariç diğer tüm CSS özelliklerinin ve değerlerinin sıfırlanacağı veya devralınacağı durumunu belirler.

animation : HTML elementinin tüm animasyon özelliklerini belirler.

animation-delay : HTML elementine tanımlanmış olan animasyonun kaç saniye veya kaç milisaniye gecikme sonunda başlayacağını belirler.

animation-direction : HTML elementine tanımlanmış olan animasyonun oynatma yönü özelliklerini belirler.

animation-duration : HTML elementine tanımlanmış olan animasyon döngüsünün kaç saniye veya kaç milisaniye sonunda tamamlanacağını belirler.

animation-fill-mode : HTML elementine tanımlanmış olan animasyonun oynatma işlemi tamamlandığında, HTML elementinin konum özelliklerini belirler.

animation-iteration-count : HTML elementine tanımlanmış olan animasyonun kaç defa oynatılacağını belirler.

animation-name : HTML elementine tanımlanmış olan animasyonun, @keyframes özelliği için isim tanımlaması belirler.

animation-play-state : HTML elementine tanımlanmış olan animasyonun çalışıp çalışmadığını veya duraklatılmış olup olmadığını belirler.

animation-timing-function : HTML elementine tanımlanmış olan animasyon döngüsünün hız eğrisi özelliklerini belirler.

attr() : HTML elementinin belirtilecek olan herhangi bir özellik bilgisine erişmek için kullanılır.

backface-visibility : Belirtilen HTML elementinin dönüştürme, geçiş veya animasyon işlemlerinde arka yüzeyinin görüntülenme ve gizlenme özelliklerini belirler.

background : HTML elementinin arkaplan özelliğini veya özelliklerini belirler.

background-attachment : HTML elementine atanmış olan arkaplan resminin sayfa hareketlerine göre davranış özelliklerini belirler.

background-blend-mode : HTML elementine atanmış olan arkaplan resimlerinin karıştırma modu özelliklerini belirler.

background-clip : HTML elementine atanmış olan arkaplan renginin başlangıç konumunu belirler.

background-color : HTML elementinin arkaplan rengini belirler.

background-image : HTML elementinin arkaplan resmini belirler.

background-origin : HTML elementine atanmış olan arkaplan resminin başlangıç konumunu belirler.

background-position : HTML elementine atanmış olan arkaplan resminin konum özelliklerini belirler.

background-repeat : HTML elementine atanmış olan arkaplan resminin tekrarlanma özelliklerini belirler.

background-size : HTML elementine atanmış olan arkaplan resminin boyutunu belirler.

border : HTML elementinin kenarlık / çerçeve özelliklerini belirler.

border-bottom : HTML elementinin alt kenarlık / çerçeve özelliklerini belirler.

border-bottom-color : HTML elementinin alt kenarlık / çerçeve rengini belirler.

border-bottom-left-radius : HTML elementinin sol alt köşe kenarlık / çerçeve yuvarlaklığını belirler.

border-bottom-right-radius : HTML elementinin sağ alt köşe kenarlık / çerçeve yuvarlaklığını belirler.

border-bottom-style : HTML elementinin alt kenarlık / çerçeve stilini belirler.

border-bottom-width : HTML elementinin alt kenarlık / çerçeve genişliğini belirler.

border-collapse : HTML'in table (tablo) elementinin kenarlık / çerçeve birleştirme durumunu belirler.

border-color : HTML elementinin kenarlık / çerçeve rengini belirler.

border-image : HTML elementinin kenarlık / çerçeve resmi özelliklerini belirler.

border-image-outset : HTML elementi kenarlık / çerçeve resminin, kenarlık / çerçeve sınırından dışa taşma özelliklerini belirler.

border-image-repeat : HTML elementi kenarlık / çerçeve resminin tekrarlanma özelliklerini belirler.

border-image-slice : HTML elementi kenarlık / çerçeve resminin dilimleme özelliklerini belirler.

border-image-source : HTML elementinin kenarlık / çerçeve resmini belirler.

border-image-width : HTML elementi kenarlık / çerçeve resminin genişliğini belirler.

border-left : HTML elementinin sol kenarlık / çerçeve özelliklerini belirler.

border-left-color : HTML elementinin sol kenarlık / çerçeve rengini belirler.

border-left-style : HTML elementinin sol kenarlık / çerçeve stilini belirler.

border-left-width : HTML elementinin sol kenarlık / çerçeve genişliğini belirler.

border-radius : HTML elementinin kenarlık / çerçeve köşelerinin yuvarlaklığını belirler.

border-right : HTML elementinin sağ kenarlık / çerçeve özelliklerini belirler.

border-right-color : HTML elementinin sağ kenarlık / çerçeve rengini belirler.

border-right-style : HTML elementinin sağ kenarlık / çerçeve stilini belirler.

border-right-width : HTML elementinin sağ kenarlık / çerçeve genişliğini belirler.

border-spacing : HTML'in table (tablo) elementinde bulunan bitişik hücrelerin sınırları arasındaki mesafeyi belirler.

border-style : HTML elementinin kenarlık / çerçeve stilini belirler.

border-top : HTML elementinin üst kenarlık / çerçeve özelliklerini belirler.

border-top-color : HTML elementinin üst kenarlık / çerçeve rengini belirler.

border-top-left-radius : HTML elementinin sol üst köşe kenarlık / çerçeve yuvarlaklığını belirler.
border-top-right-radius : HTML elementinin sağ üst köşe kenarlık / çerçeve yuvarlaklığını belirler.

border-top-style : HTML elementinin üst kenarlık / çerçeve stilini belirler.

border-top-width : HTML elementinin üst kenarlık / çerçeve genişliğini belirler.

border-width : HTML elementinin kenarlık / çerçeve genişliğini belirler.

bottom : HTML elementinin konumlandırma işlemlerinde sayfa gövdesine veya alt elemente göre pozisyonunu belirler.

box-decoration-break : HTML elementinin kenarlık / çerçeve özelliklerinin, kutu parçalandığındaki satır veya sayfa sonları için davranış özelliklerini belirler.

box-shadow : HTML elementinin gölgelendirme özelliklerini belirler.

box-sizing : HTML elementinin genişlik ve yükseklik değerlerinin ne şekilde hesaplanması gerektiğini belirler.

break-after : HTML elementinin çok sütunlu düzeni için bölünen sütunların arasındaki belirtilecek olan elementin sonrasında bölünme davranış

özelliklerini belirler.

break-before : HTML elementinin çok sütunlu düzeni için bölünen sütunların arasındaki belirtilecek olan elementin öncesinde bölünme davranış

özelliklerini belirler.

calc() : Değer hesaplama işlemleri için kullanılır.

caption-side : HTML'in table (tablo) elementinde bulunan başlık elementinin konum özelliklerini belirler.

caret-color : HTML'in bilgi giriş elementlerinin veya düzenlenebilir değerine sahip herhangi bir elementinin imleç rengini belirtir.

clear : HTML elementine atanmış olan kayma özelliğinin temizlenme durumunu belirler.

clip : absolute (Mutlak / kesin) değeri ile konumlandırılmış bir HTML elementinin kırpma / maskeleme özelliklerini belirler.

clip-path : absolute (Mutlak / kesin) değeri ile konumlandırılmış bir HTML elementinin gelişmiş kırpma / maskeleme özelliklerini belirler.

color : Metnin rengini belirler.

column-count : HTML elementinin çok sütunlu düzeni için bölünmesi gereken sütun sayısı özelliğini belirler.

column-fill : HTML elementinin çok sütunlu düzeni için bölünen sütunların nasıl doldurulacağı durumunu belirler.

column-gap : HTML elementinin çok sütunlu düzeni için bölünen sütunların aralarındaki boşluk değerlerini belirler.

column-rule : HTML elementinin çok sütunlu düzeni için bölünen sütunların aralarındaki dikey ayraç özelliklerini belirler.

column-rule-color : HTML elementinin çok sütunlu düzeni için bölünen sütunların aralarındaki dikey ayraç rengini belirler.

column-rule-style : HTML elementinin çok sütunlu düzeni için bölünen sütunların aralarındaki dikey ayraç stilini belirler.

column-rule-width : HTML elementinin çok sütunlu düzeni için bölünen sütunların aralarındaki dikey ayraç genişliğini belirler.
columns : HTML elementinin çok sütunlu düzeni için bölünmesi gereken sütunların minimum genişlik ve maksimum sütun sayısı özelliklerini belirler.

column-span : HTML elementinin çok sütunlu düzeni için bölünen sütunların içerisindeki bir elementin sütun veya sütunlara yayılması durumunu belirler.

column-width : HTML elementinin çok sütunlu düzeni için bölünmesi gereken sütunların genişliğini belirler.

content : before veya after sahte elementi ile birlikte, üretilecek olan içeriği metne eklemek için kullanılır.

counter() : Oluşturulmuş olan sayacın değerini HTML elementine eklemek için kullanılır.

counter-increment : Bir yada daha fazla sayacın değerini attırmak için kullanılır.

counter-reset : Bir yada daha fazla sayaç oluşturmak veya sıfırlamak için kullanılır.

counters() : Oluşturulmuş olan ve iç içe geçmiş sayaçların değerini HTML elementine eklemek için kullanılır.

cursor : Mouse (fare) işaretçisinin stilini belirler.

direction : Metnin veya içeriğin akış yönü özelliklerini belirler.

display : HTML elementinin görüntülenme özelliklerini belirler.

Element Name : Belirtilecek olan HTML elementini seçer. (Element seçici)

empty-cells : HTML'in table (tablo) elementinde bulunan ve içeriği boş olan hücrelerin görüntülenme özelliklerini belirler.

filter : HTML elementine uygulanacak olan efekt özelliklerini belirler

flex : Esnek kutu içerisindeki element veya elementlerin, diğer elementlere göre büyüklük oranını yada küçüklük / büzülme oranını yada başlangıç

uzunluğunu değerini belirler.

flex-basis : Esnek kutu içerisindeki element veya elementlerin, başlangıç uzunluğunu değerlerini belirler.

flex-direction : Esnek kutuların dizilim yönü özelliklerini belirler.

flex-flow : Esnek kutuların dizilim yönü ve satır kırılma özelliklerini belirler.

flex-grow : Esnek kutu içerisindeki element veya elementlerin, diğer elementlere göre büyüklük oranın ne şekilde olması gerektiğini belirler.

flex-shrink : Esnek kutu içerisindeki element veya elementlerin, diğer elementlere göre küçüklük / büzülme oranın ne şekilde olması gerektiğini belirler.

flex-wrap : Esnek kutuların satır kırılma özelliklerini belirler.

float : HTML elementinin bulunduğu konumdan kayma özelliklerini belirler.

font : Metnin tüm yazı tipi özelliklerini belirler.

font-family : Metnin yazı tipi ailesini belirler.

font-size : Metnin yazı tipi boyutunu belirler.

font-style : Metnin yazı tipi stilini belirler.

font-variant : Metnin küçük harf içerikleri için büyük harf gösterilme özelliklerini belirler.

font-variant-caps : Metnin küçük harf / büyük harf alternatif gösterilme özelliklerini belirler.

font-weight : Metnin yazı tipi kalınlığını belirler.

grid : Izgara düzeni içerisindeki element veya elementler için, gelişmiş tüm satır ve sütun işlemlerinin yanı sıra alan yerleştirme özelliklerini belirler.

grid-area : Izgara düzeni içerisindeki elementin tüm satır ve sütun işlemleri için alan yerleştirme özelliklerini belirler. Aynı zamanda ızgara düzeni

içerisindeki elementin alan adı belirler.

grid-auto-columns : Izgara düzeni içerisindeki element veya elementler için, oluşturulması gereken sütunların varsayılan genişliğini belirler.

grid-auto-flow : Izgara düzeni içerisindeki element veya elementler için, otomatik yerleşim algoritması özelliklerini belirler.

grid-auto-rows : Izgara düzeni içerisindeki element veya elementler için, oluşturulması gereken satırların varsayılan yüksekliğini belirler.

grid-column : Izgara düzeni içerisindeki elementin kaçıncı sütundan başlaması gerektiğini ve kaçıncı sütunda bitmesi gerektiğini belirler.

grid-column-end : Izgara düzeni içerisindeki elementin kaçıncı sütunda bitmesi gerektiğini belirler.

grid-column-gap : Izgara düzeni içerisindeki element veya elementler için, oluşturulmuş olan sütunların aralarındaki boşluk değerlerini belirler.

grid-column-start : Izgara düzeni içerisindeki elementin kaçıncı sütundan başlaması gerektiğini belirler.

grid-gap : Izgara düzeni içerisindeki element veya elementler için, oluşturulmuş olan satırların ve sütunların aralarındaki boşluk değerlerini belirler.

grid-row : Izgara düzeni içerisindeki elementin kaçıncı satırdan başlaması gerektiğini ve kaçıncı satırda bitmesi gerektiğini belirler.

grid-row-end : Izgara düzeni içerisindeki elementin kaçıncı satırda bitmesi gerektiğini belirler.

grid-row-gap : Izgara düzeni içerisindeki element veya elementler için, oluşturulmuş olan satırların aralarındaki boşluk değerlerini belirler.

grid-row-start : Izgara düzeni içerisindeki elementin kaçıncı satırdan başlaması gerektiğini belirler.

grid-template : Izgara düzeni içerisindeki element veya elementler için, tüm satır ve sütun işlemlerinin yanı sıra alan yerleştirme özelliklerini belirler.

grid-template-areas : Izgara düzeni içerisindeki alan adı tanımlanmış olan elementin tüm satır ve sütun işlemleri için alan yerleştirme özelliklerini belirler.

grid-template-columns : Izgara düzeni içerisindeki element veya elementler için, oluşturulması gereken sütun adedini ve sütun boyutu genişliğini belirler.

grid-template-rows : Izgara düzeni içerisindeki element veya elementler için, oluşturulması gereken satır boyutu yüksekliğini belirler.

height : HTML elementinin yüksekliğini belirler.

justify-content : Esnek kutu içerisinde bulunan elementler tüm alanı kullanmadığında, elementlerin aralarındaki hizalama özelliklerini belirler.

justify-content : Izgara düzeni içerisinde bulunan elementler tüm alanı kullanmadığında, elementlerin yatay hizalama özelliklerini belirler.
justify-items : Izgara düzeni içerisinde bulunan elementlerin, yatay hizalama özelliklerini belirler.

justify-self : Izgara düzeni içerisinde bulunan ve seçilen element veya elementlerin, yatay hizalama özelliklerini belirler.

left : HTML elementinin konumlandırma işlemlerinde sayfa gövdesine veya sol elemente göre pozisyonunu belirler.

letter-spacing : Metin içerisindeki karakterlerin aralarındaki boşluk değerlerini belirler.

linear-gradient() : HTML elementinin doğrusal arkaplan renk geçişi özelliklerini belirler.

line-height : Metin bloğunda bulunan satırların yükseklik değerini belirler.

list-style : Listedeki madde işaretçisinin tüm özelliklerini belirler.

list-style-image : Listedeki madde işaretçisinin resmi özelliklerini belirler.

list-style-position : Listedeki madde işaretçisinin içerik akışındaki konum özelliklerini belirler.

list-style-type : Listedeki madde işaretçisinin türünü belirler.

margin : HTML elementinin kenar boşluğu / dış boşluk özelliklerini belirler.

margin-bottom : HTML elementinin alt kenar boşluğu / dış boşluk özelliklerini belirler.

margin-left : HTML elementinin sol kenar boşluğu / dış boşluk özelliklerini belirler.

margin-right : HTML elementinin sağ kenar boşluğu / dış boşluk özelliklerini belirler.

margin-top : HTML elementinin üst kenar boşluğu / dış boşluk özelliklerini belirler.

max-height : HTML elementinin maksimum yüksekliğini belirler.

max-width : HTML elementinin maksimum genişliğini belirler.

min-height : HTML elementinin minimum yüksekliğini belirler.

min-width : HTML elementinin minimum genişliğini belirler.

object-fit : HTML elementinin boyutlandırılmış alanına sığmayacak kadar büyük resim veya video içeriklerinin yeniden nasıl boyutlandırılacağını

belirler.

object-position : HTML elementinin boyutlandırılmış alanına sığmayacak kadar büyük resim veya video içeriklerinin, object-fit özelliği kullanılarak yeniden

boyutlandırılma sonrasındaki resminin konum özelliklerini belirler.

opacity : HTML elementinin opaklık / şeffaflık özelliklerini belirler.

order : Esnek kutu içerisinde bulunan element veya elementlerin, diğer elementlere göre sıralama özelliklerini belirler.

order : Izgara düzeni içerisinde bulunan element veya elementlerin, diğer elementlere göre sıralama özelliklerini belirler.
outline : HTML elementinin anahat özelliklerini belirler.

outline-color : HTML elementinin anahat rengini belirler.

outline-offset : HTML elementi için anahat ile kenarlık / çerçeve arasındaki mesafeyi belirler.

outline-style : HTML elementinin anahat stilini belirler.

outline-width : HTML elementinin anahat genişliğini belirler.

overflow : HTML elementinin boyutlandırılmış alanına sığmayacak kadar büyük içeriğin taşma özelliklerini belirler.

overflow-wrap : HTML elementinin boyutlandırılmış alanına sığmayacak kadar büyük metnin satır kırılma özelliklerini belirler.

overflow-x : HTML elementinin x ekseni baz alınarak boyutlandırılmış alanına sığmayacak kadar büyük içeriğin taşma özelliklerini belirler.

overflow-y : HTML elementinin y ekseni baz alınarak boyutlandırılmış alanına sığmayacak kadar büyük içeriğin taşma özelliklerini belirler.

padding : HTML elementinin dolgu / iç boşluk özelliklerini belirler.

padding-bottom : HTML elementinin alt dolgu / iç boşluk özelliklerini belirler.

padding-left : HTML elementinin sol dolgu / iç boşluk özelliklerini belirler.

padding-right : HTML elementinin sağ dolgu / iç boşluk özelliklerini belirler.

padding-top : HTML elementinin üst dolgu / iç boşluk özelliklerini belirler.

page-break-after : Sayfa yazdırma işlemlerinde belirtilecek olan HTML elementinden sonra sayfa sonlandırma durumunu belirler.

page-break-before : Sayfa yazdırma işlemlerinde belirtilecek olan HTML elementinden önce sayfa sonlandırma durumunu belirler.

page-break-inside : Sayfa yazdırma işlemlerinde belirtilecek olan HTML elementi içerisinde sayfa sonlandırma yapılıp yapılamayacağı durumunu belirler.

perspective : HTML elementinin 3D dönüştürme sonrasındaki perspektif derinliği özelliklerini belirler.

perspective-origin : HTML elementinin 3D dönüştürme sonrasındaki perspektif derinliği konum özelliklerini belirler.

position : HTML elementinin konumlandırma özelliklerini belirler.

quotes : HTML'in q elementinin tırnak işareti türü değerini belirler.

radial-gradient() : HTML elementinin dairesel arkaplan renk geçişi özelliklerini belirler.

repeating-linear-gradient() : HTML elementinin doğrusal arkaplan renk geçişi tekrarlanma özelliklerini belirler.

repeating-radial-gradient() : HTML elementinin dairesel arkaplan renk geçişi tekrarlanma özelliklerini belirler.

resize : HTML elementinin kullanıcı tarafından yeniden boyutlandırılabilir olup olmadığı durumunu belirler.

right : HTML elementinin konumlandırma işlemlerinde sayfa gövdesine veya sağ elemente göre pozisyonunu belirler.
Space : Belirtilecek olan HTML elementinin, belirtilecek olan descendant (torun / soy) elementini seçer. (Torun / Soy seçici)

table-layout : HTML'in table (tablo) elementinde bulunan sütunların genişlikleri için düzen algoritması özelliklerini belirler.

tab-size : HTML elementi içerisinde bulunan metnin içerdiği sekme karakterlerinin genişliğini belirler.

text-align : Metnin veya içeriğin yatay hizalama özelliklerini belirler.

text-align-last : Metnin son satırın veya metnin justify değeri atanmış satırlarının yatay hizalama özelliklerini belirler.

text-decoration : Metne eklenecek olan dekorasyon / süsleme özelliklerini belirler.

text-decoration-color : Metne eklenecek olan dekorasyon / süsleme çizgisi rengini belirler.

text-decoration-line : Metne eklenecek olan dekorasyon / süsleme çizgisi türünü belirler.

text-decoration-style : Metne eklenecek olan dekorasyon / süsleme çizgisi stilini belirler.

text-indent : Metin bloğunda bulunan ilk satırının girintisini belirler.

text-orientation : Metnin writing-mode özelliği ile belirtilmiş hizalama yönü özelliğinin döndürme durumunu belirler.

text-overflow : HTML elementinin boyutlandırılmış alanına sığmayacak kadar büyük metnin taşma özelliklerini belirler.

text-shadow : Metnin gölgelendirme özelliklerini belirler.

text-stroke : Metne eklenecek olan dış çizgisi özelliklerini belirler.

text-stroke-color : Metne eklenecek olan dış çizgisi rengini belirler.

text-stroke-width : Metne eklenecek olan dış çizgisi genişliğini belirler.

text-transform : Metnin büyük harf / küçük harf dönüştürme özelliklerini belirler.

top : HTML elementinin konumlandırma işlemlerinde sayfa gövdesine veya üst elemente göre pozisyonunu belirler.

transform : HTML elementinin 2D veya 3D dönüştürme özelliklerini belirler.

transform-origin : HTML elementinin dönüştürme sonrasındaki konum özelliklerini belirler.

transform-style : İç içe geçmiş HTML elementlerinin 3D dönüştürme sonrasındaki 3D boşluğunda konumlandırılmış veya element düzleminde düzleştirilmiş

olup olmadığı durumunu belirler.

transition : HTML elementinin tüm geçiş özelliklerini belirler.

transition-delay : HTML elementine tanımlanmış olan geçiş özelliğinin kaç saniye veya kaç milisaniye gecikme sonunda başlayacağını belirler.

transition-duration : HTML elementine tanımlanmış olan geçiş özelliğinin kaç saniye veya kaç milisaniye sonunda tamamlanacağını belirler.

transition-property : HTML elementine tanımlanmış olan geçiş özelliği için, kullanılması gereken CSS'de tanımlı olan özellik adını belirler.
transition-timing-function : HTML elementine tanımlanmış olan geçiş özelliğinin hız eğrisi özelliklerini belirler.

unicode-bidi : Metnin direction özelliği ile belirtilmiş akış yönü özelliğinin döndürme durumunu belirler.

user-select : Metnin kullanıcı tarafından seçilebilme durumunu belirler.

var() : Önceden tanımlanmış olan ve tüm CSS kodları içerisinde yeniden kullanılmak üzere belirli değerler içeren verilerin tutulduğu değişkenlerin

çağırılma durumunu belirler.

vertical-align : Metnin veya içeriğin dikey hizalama özelliklerini belirler.

visibility : HTML elementinin görüntülenme ve gizlenme özelliklerini belirler.

white-space : HTML elementi içerisinde bulunan metnin boşluk değerleri için davranış özelliklerini belirler.

width : HTML elementinin genişliğini belirler.

word-break : HTML elementinin boyutlandırılmış alanının sonuna sığmayacak kelimelerin satır kırılma özelliklerini belirler.

word-spacing : Metin içerisindeki kelimelerin aralarındaki boşluk değerlerini belirler.

word-wrap : HTML elementinin boyutlandırılmış alanına sığmayacak kadar büyük kelimenin satır kırılma özelliklerini belirler.

writing-mode : Metnin veya içeriğin hizalama yönü özelliklerini belirler.

z-index : Konumlandırılmış bir HTML elementinin katman / yığın sırasını belirler.

Extra Eğitim® - [Link]