html5 yenilikleri & seo

Download Html5 Yenilikleri & SEO

Post on 22-Feb-2017

409 views

Category:

Software

0 download

Embed Size (px)

TRANSCRIPT

Html 5 Yenlikleri & SEO

Html 5 Yenlikleri & SEO

Balangwww:World Wide Web(Dnya apnda A) kelimerinin ksaltlm hlidir. Alternatif ad W3'dir. Siteleri internete balamak iin oluturulmu bir sistemdir. "Web'de yeni arama motorlar" tabirindeki 'Web' kelimesi, WWW'ya ithaf etmektedir.W3C:World Wide Web Consortiumkelimelerinin ksaltmasdr. Web'in standartlarn belirleyen ve gelitiren uluslararas bir topluluktur.

BalangHTTP:HyperText Transfer Protocol(Zengin Metin Transfer Protokol) kelimelerinin ksaltmasdr. Site adlarnda www'dan nce http:// eklinde yazlr. Adndan da anlalaca zere sitelerin ekranmzda grntlenmesi iin W3C tarafndan oluturulan bu protokol esas alnr. Bir web sitesi ile sunucu arasndaki veri transferini belli standartlara oturtmak iin gelitirilmitir. Bu transferin daha gvenli bir versiyonu olan HTTPS (HTTP Secure) bugn tm ticar alveri sitelerinde veri gvenliini salamak amacyla kullanlmaktadr.

BalangFTP:AlmFile Transfer Protocol(Dosya Transfer Protokol) eklindedir. Web sitesi sahibinin oluturduu site dosyalarn sunucuya gnderebilmesi amacyla oluturulmu bir protokoldr. Web sitesi sahiplerinin sunuculara ulaabilmesi oluturulmu FTP yazlmlar gelitirilmitir. SmartFTP, CuteFTP gibi birok yazlm olsa da bunlar arasnda en popler FileZilla adl yazlmdr. Kullanm olduka basittir.HTTP, ziyareti ~ sunucu (visitor ~ server) arasndaki ilikiyi belirlerken; FTP, site sahibi ~ sunucu (client ~ server) arasndaki ilikiyi belirler.

BalangSEO:Search Engine Optimization(Arama Motoru Optimizasyonu) kelimelerinin ksaltmasdr. Sitelerin arama motorlar tarafndan index'lenebilmesi iin HTML etiketleri iine yazlan baz tanmlamalar dahilinde yaplr. SEO konusu bal bana bir inceleme alandr ve ileride bu konuya deineceiz.

BalangDomain:Alternatif ismi "alan ad"dr. Web sitelerinin internet zerindeki addr. rnein; google.com bir domain'dir. Temelinde bir IP adresi vardr. Kullanclarn bu IP adresini yazp sitelere erimesi zor olduu iin byle bir sistem gelitirilmitir.Hosting:Alan adlarnn 7/24 Web'de eriilebilmesi iin eitli firmalar tarafndan salanan hizmet, hosting olarak adlandrlr. Hosting firmalarnn sabah akam hi kapatlmadan alan server'lar, dier bir ifade ile sunucular vardr. Web sitesi sahibi oluturduu site dkmanlarn bu sunuculara gnderir ve yapt sitenin tm dnya tarafndan ziyaret edilmesine olanak tanr.

Baslangnternet sitelerinin grsel tasarmnda kullanlan HTML dili, 1980 senesinden bu yana gelierek, sitelerin kullanclarna ve arama motorlarna daha faydal hale gelmeye alyor. En son HTML 5 dilinin karlmasyla, HTML dilinde nemli deiiklikler ve yenilikler meydana geldi.Web tarayc standardn belirleyen WC3 kurumu,HTML 5kodlama dilinin baz alnmas gerektiine dair kararn aklad. Bu karar herkesin scak baktn sylemeliyiz. nk HTML 5, kullanc dostu sitelerin ortaya kmasn salayacak olan bir web teknolojisini ifade ediyor. Ayn zamanda Google tarafndan da desteklenerek, yaygnlamas salanan HTML 5 tasarm dilinin bugn, tm tasarmc ve web programcs tarafndan kullanldn sylemek mmkn.

Html 5te artk desteklenmeyen Html elementleri

, , , , , , , , , , , , , ,

Yeni Gelen Html Elementleri

, , , , , , , , , , , , , , , , , , , , , , , , , , , ,

HTML5 DOCTYPE!HTML dosyannz HTML5 zelliklerinde olacan tanmlamak iin u etiket kullanlr:

Tarayc Destei

Minimum HTML5 Dkman

Balk

Dkman ierii......

HTML5Semantik Elementler

Semantik = Anlamlandrma / Anlam Semantik Elementler = Anlam olan elementler.Semantik elementler nelerdir? Semantik bir element hem taraycya hem de gelitiriciye kendisinin anlamn aka belirtir. Semantik olmayanelementlere rnekler: ve - erik hakknda bir ey sylemez. Semanticelementlere rnekler: , , ve - erii aka belirtir.

HTML5'teki Yeni Semantik Elementler

Gnmzde bir ok HTML sayfas u ekilde kodlanmtr: , , or ,HTML5'in bu tip bildirimler iin daha iyi zmleri vardr.

HTML5'teki Yeni Semantik Elementler

HTML5'in bu tip bildirimler iin daha iyi zmleri vardr:

HTML5 Elementi

elementi bir dkman iindeki bir ksm belirtir.

rnek

WWF World Wide Fund for Nature (WWF) doann zarar grmesini durdurmay ve verilen zararlar onarmay amalayan uluslararas bir sivil toplum kuruluudur. 1961'de kurulmutur.

WWF'nin Panda sembol Panda WWF'nin sembol olmutur. yi bilinen bu Panda sembol, Chi Chi isimli, WWF'nin kurulduu yl Pekin hayvanat bahesinden Londra hayvanat bahesine transfer edilmitir.

HTML5 (Makale) Elementi

Bir makale web sayfasnn geri kalanndan bamsz olarak datlabilmelidir.Nerelerde kullanlabileceine dair rnekler:Forum mesajlarBlog gnderileriHaber HikayesiYorumlar

rnek

Internet Explorer 9 Windows Internet Explorer 9 (ksaca IE9) 14 Mart 2011, saat 21'de yaynlanmtr.

HTML5 Elementi

elementi navigasyon balantlar byk sayfalar iin tasarlanmtr. Ancak, belgedeki tm linkler bu element iinde olmak zorunda deildir.

rnek :

Ana SayfaDersler

HTML5 Elementi

elementi ile sidebarlarnz kolayca belirtebilir, CSS ile tm nce ki elementler gibi ekillendirebilirsiniz.

rnek :

Epcot Center Epcot Center, Florida'daki Disney World'da...

HTML5 Elementi

elementi bir dkman(sayfa) ya da bir ksm (section) iin bir balk belirtir. elementi ierdii ierii kapsayc olmaldr.Bir dkmanda bir kereden fazla kullanabilirsiniz.

rnekler

Internet Explorer 9 Windows Internet Explorer 9 (ksaca IE9) 14.....

Serkan AKYREK Kiisel Sayfas erik

HTML5 Elementi

elementi bir dkman ya da bir ksm iin alt bilgi belirtir.Bir footer (alt bilgi) genelde dkmann yazarn, telif haklarn, kullanm gizlilii, iletiim vs. gibi bilgileri ierir.Bir dkmanda bir kereden fazla kullanabilirsiniz.

rnekler

yorum yorum yorum yorum Gnderen: Steve Jobs

Coppyright @ Steve Jobs

HTML5 ve Elementleri

etiketi, ierisinde bir resim, gsterim, diyagram, kod listeleri vs. gibi eylerin olduunu belirtir. elementi ana ak ile ilgili olsa da, konumu ana aktan bamszdr ve karlrsa dkmann akn engellemez. etiketi, elementinin belirttii resime balk koymaya yarar..

rnek

Fig.1 - The Pulpit Rock, Norway.

HTML5 Yeni Giri Tipleri

HTML5 formlar iin bir ka yeni input tipine sahiptir. Bu yeni zellikler daha iyi kontrol ve dorulama olana salar.colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek

Giri Tipi: color

Giri alannn bir renk iermesi iin color kullanlr.

Bir renk sein:

Giri Tipi: date

Bir tarih semenize yardmc olur.

Doum gn:

Giri Tipi: datetime

Bir tarih ve saat semenizi salar (time zone ile).

Doum gn (tarih ve saat):

Giri Tipi: datetime-local

Bir tarih ve saat semenizi salar (time zone olmadan).Doum gn (tarih ve saat):

Giri Tipi: email

Input alannda bir e-posta adresi olmas gerektiinde kullanlr.

E-mail:

Giri Tipi: month

Kullancnn bir ay ve yl semesine olanak verir.Doum gn (ay ve yl):

Giri Tipi: number

Input alan numerik bir deer gerektirdii zaman kullanlr.Ayrca hangi saylarn kabul edilebileceini belirtebilirsiniz:

Miktar girin (1 ve 5 arasnda):

Giri Tipi: range

Belirli bir aralkta olan bir sayy semenizi salarAyrca hangi saylarn kabul edilebileceini belirtebilirsiniz:

Giri Tipi: search

Arama ileri iin search tipi kullanlr. (bir search alan tipik bir metin (text) alan gibi davranr).

Google'da ara:

Giri Tipi: tel

Telefon numaras girmeye yarar:

Telefon:

Giri Tipi: time

Bir saat semenizi salar.

Bir saat sein:

Giri Tipi: url

Bir giri alan bir URL balants ierecekse kullanlr.Bu zellik, form gnderildii srada dorulanr.Ana sayfanz ekleyin:

Giri Tipi: week

Bir hafta ve yl semenizi salar.

Bir hafta sein:

HTML5 Form Elementleri

HTML5 aadaki yeni form elementlerine sahiptir:

HTML5 Elementi

elementi, bir elementi iin nceden belirlenmi bir dizi seenein listesini belirtir. elementi elementleri iin bir "autocomplete" zellii salar. Kullanclar, input verisi iin nceden tanmlanm bir alr kutu listesi greceklerdir.Bir eleman ile birlikte balamak iin elemannn "list" zelliini kullann.

HTML5 Elementi

elementinin amac, kullanclar yetkilendirmek iin gvenli bir yol kullanmaktr. etiketi, bir form ierisinde bir anahtar ifti (key-pair) jeneratr belirtir.Form gnderildiinde, iki anahtar oluturulur, biri zel biri ise genel.zel anahtar sizin lokalinizde saklanr, genel olan ise sunucuya gnderilir. Genel anahtar, kullancnn ileride tekrar kullanabilmesi iin bir istemci sertifikas oluturmak iin kullanlr.

Kullanc ad: ifreleme:

HTML5 Elementi

elementi bir hesaplamann sonucunu gsterir (bir script gibi)

0100 +=

HTML5Form zellikleri

HTML5 ve iin bir ka yeni zellie sahiptir.

iin yeni zellikleri:

autocompletenovalidate iin yeni zellikler:

autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight ve widthlistmin ve maxmultiplepattern (regexp)placeholderrequiredstep

/ autocomplete zellii

autocomplete zellii bir form ya da input alannn autocomplete zelliinin on ya da off olacan belirtir.autocomplete ak olduunda, tarayc otomatik olarak kullanc tarafndan nceden girilen bilgileri tamamlar.pucu:form'larda autocomplete on yapmak ve belli input alanlarnda off yapmak mmkndr, ya da tam tersi.Not:autocomplete zellii ile ve u tipleri ile alr: text, search, url, tel, email, password, datepickers, range,