Ders 4: W3 Nedir? Neden W3 Standartları? 0

Merhaba arkadaşlar bugün birazcık ara verdiğim videolu eğitimlerime devam ediyorum. Öncelikle derslere devam etmeden önce W3’ün ne olduğunu anlatmam gerekiyordu bunu hem videolu hemde yazı olarak anlatacağım. Bu şekilde bunuda öğrentikten sonra diğer derslere devam edeğim.

[youtube]http://www.youtube.com/watch?v=RccRXAYwsH4[/youtube]

Bu arada video’da ufak bir cızıltı var kusura bakmayın o problemide en kısa sürede çözücem inşallah 🙂

W3 Nedir?

HTML işaretleme dilini geliştiren ve İnternet’in babası olarak kabul edilen Tim Berners W3 Okulu yani “internet standartları” adı altında W3’ü kurmuştur. Bunlar benim açıklamam isterseniz birde kaynak açıklamalarada bakalım;

W3 yani (World Wide Web- Dünya çapında Ağ) in kısalmasıdır.  Gayri resmi olarak internetin ilk sitesi.
Bizim TSE (Türk Standartları Enstitüsü) nün internet versiyonu diyebiliriz. internetteki standartları belirleyen oluşum.
“Tim Berners Lee” 1989’da HTML programlama dilini geliştirerek insanlığa internetin kapılarını açtı.1994 yılında Ağ ile ilgili standartları dünya çapında belirleyecek açık bir kurum olan W3C’yi kurdu,halen de başkanlığını yapmaktadır. 1999’da Time dergisi tarafından 20. yüzyılın en büyük 100 zekası arasında sayılan Berners-Lee bir çok ödül ve ünvan sahibi bilgisayar profesörüdür. Şu an MIT üniversitesinde prof’luk yapmaktadır.Google dahil bir çok dev internet şirkete danışmanlık yapmakta.
Şu an ERCIM (France)- Keio Univ.(Japan)- MIT Univ (USA) bilgisayar mühendisliği bölümlerinin ortak yürüttüğü bir konsorsiyumdur w3.org amacı internetin standartlarlarını belirlemek.
Örnegin bir browser yazılım şirketiniz var, yazdığınız programın tüm dünyada kabul görebilmesi için w3 standartlarını tamamen desteklemesi gerekmekte.
Yada yaptığınız web sitesinin tüm browserlarda sorunsuz şekilde görüntülenmesi için w3 standartlarına uyması gerekiyor.

Yukarıdaki açıklama sanırım size yeter benimki çok kısa ama öz 🙂

W3 neden kullanmamız gerekiyor?

W3 Standartlarına göre web’i kullanmazsak web sitemiz video’dada söylediğim gibi kesinlikle tüm tarayıcılarla uyumlu olmayacaktır. Ayrıca günümüz web’inde SEO dediğimiz Arama motoru optimizasyonuda çok önemli bir şekilde kullanılmaktadır. W3 standartlarına göre kodlanmış bir sitenin alt yapısı SEO’ya hazırdır diyebiliriz.

Web sitenizi kendinizmi kodlarsınız başkasınamı kodlatırsınız bilmem ama W3’e dikkat edin hataları azaltın.

W3 Hataları ve Düzeltmeleri

Bir kaç örnek vericem hataları ve düzenlemeleride birlikte göstereceğimki kafanız karışmadan W3 mantığını öğrenin.

Örneğin bir resim eklediniz alttaki gibi (hatalı);

<img src="resim.png">

Yukarıdaki kod düzgün çalışacaktır ama eklediğiniz o resim ne işe yarar adı nedir bilinmiyor bu yüzden doğru kullanım şekli;

<img src="resim.png" alt="logom" />

Örneğin bir css dosyası çağırdınız şu şekilde;

<link rel="stylesheet" type="text/css" href="stil.css">

Yukarıdaki kodunuz çalışır ancak doğru olan o değil doğru olan aşağıdaki gibidir;

<link rel="stylesheet" type="text/css" href="stil.css" />

Yukarıdakinin sadece sonuna “/>” işaretini koyduk. Yani kodun başlangıcı var ama bitirme kodu olmadığı için kodun içerisinde kodu kapatıyoruz.

2 Örnek verdim dahasına gerek yok zaten mantığını anladınız..

Bir yanıt yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ders 2: CSS’nin Yapısı ve CSS Kullanımı 0

Merhaba Arkadaşlar. Yeni bir video’yu daha bitirdim çok uğraştırdı ama sonunda oldu. 🙂

Video çekerken halada relax değilim bilginiz olsun zamanla dahada iyi olacağım inşallah. Bugünkü dersimde sizlere CSS’in yapısını ve nasıl kullanacağımızı anlattım.

[youtube]http://www.youtube.com/watch?v=9bWJTX52E4o[/youtube]

Cascading Style Sheets (CSS)’nin Yapısı

Seçiciler ve Bildirim blog‘u olarak 2’ye ayrılıyor. Bildirim bloglar’ad 2’ye ayrılıyor onlarda özellik ve değer olarak adlandırılıyor. Seçiciler nelerdir? HTML sayfamdaki tüm elemanlar bir seçicidir arkadaşlar. Örnek olarak bir seçici ve bir bildirim blog’u oluşturuyorum.

Seçici ve Bildirim blog’u

Aşağıdaki body bir seçicidir köşeli parantezler { } ise bildirim blog’udur.

body {}

Bildirim Blog’u içerisinde özellik ve değer

Burada background bir özellik gray ise değerdir.

body {background:gray}

Başka bir özellik değer atamak istediğimizde ise noktalı virgül ile (;) ayırıyoruz.

body {background:gray;padding:10px;}

Video’da gruplandırmayı gösterdim ancak örnek verirken tam bir örnekleme yapamadım açıkcası ancak burada anlatabilirim. Örnek kodumuz şu şekilde;

h1 {color:blue}
h2 {color:blue}
h3 {color:blue}

Gruplandırma şunun için kullanılır ben h1, h2 ve h3 taglarıma mavi rengi verdim ancak hepsi için ayrı bir bildirim blog’u açtım yukarıda yaptığım şekilde olur ancak yukarıdakinde fazla kod yazarsınız ve css’iniz şişer sayfayı ne kadar gruplandırarak yazarsanız o kadar hızlı açılır. Yukarıdaki aslında kullanım olarak yanlıştır yani alttaki şekildeki gibide yazabilirdik.

h1,h2,h3 {color:blue}

Evet arkadaşlar dersimiz bu şekilde. Sorunuz varsa sorun elimden geldiğinde cevaplayacağım inşallah.

CSS3 ile yapılmış Harika Animasyon Menü ücretsiz indir 0

CSS3 ile yapılmış harika bir Animasyon Menü çalışmasını sizlere göstermek istiyorum arkadaşlar. Benim çok hoşuma gidiyor yapan kişide 1 örnek değilde 4-5 değişik örnekte yapmış ücretsizde indirebilirsiniz.

https://4.bp.blogspot.com/-q5Rb-XbrOaY/UK6tR9lHSGI/AAAAAAAAMIY/nQgIqV7_vWM/s1600/css3-animasyon-menu.jpg

Demo / Download indir

Kullanımı kolay kendi web sitesinde makale olarak yazmış ancak takıldığınız yerlde olursa banada danışabilirsiniz.

Most Popular Topics

Editor Picks