28 Haziran 2015 Pazar

HTML Renk Kodları

HTML Renk Kodları

HTML Renk Kodları : Genellikle web tasarımında kullanılan ve arama motorlarında tıklanılan görünümünü düzenlemeye yarayan renklere html renk kodları deriz.

HTML Renk Kodları yazarlarının düzenlediği web dosyalarını renklendirmek için kullanılabilecek çeşitli yöntem vardır. Renkler RGB renk sisteminde kullanılan üçlü heksadesimal kodlarla belirlenebileceği gibi standart Ingilizce adları kullanılarak da belirlenebilir. Renk değerini oluşturmak için bir renk seçim aracı veya grafik yazılımı tercih edilebilir.

10 Temmuz 2013 Çarşamba

HTML 5 Eğitimi

HTML Ve İnternet Eğitimi amacı, HTML'i ve internetin temel prensiplerini öğretmektir. HTML Ve İnternet Eğitimiboyunca, HTML'e ilişkin temel örnek uygulamalar yapılmaktadır. HTML Ve İnternet Eğitimi sonunda, öğrencilerin HTML'i öğrenmekte ve HTML ile web sayfası yapmaktadır. İnternette yayınlama, ftp işlemleri, domain işlemleri de eğitim içinde vardır.
HTML Ve İnternet Eğitimi; interneti ve web sayfa yapısını anlamak isteyen herkes içindir. Amacınız, internet'te iş yapmak, kendinizi tanıtmak veya internette eğlenmek olabilir. HTML Ve İnternet Eğitimi sizin internet dünyasına adım atmanızı sağlayacak. Potansiyelleri görmenizi ve kullanmanızı sağlayacaktır.

HTML5 Nedir ?



HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür.Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safaritarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır.

HTML5 kullanmak aynı zamanda UI (kullanıcı arabirimi) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecektir. Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.

Ses veya film etiketleri gibi birçok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web uygulamaları yaratmakta da kullanılabilmektedir. CSS3 ve JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda birçok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.

HTML5 tüm HTML Sürümleri (HTML1.0 vb) ile uyumludur.
Yeni elementler
<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
<audio>: Sayfaya ses oynatıcı bir modül ekler.
<video> : Video oynatıcı bir modül ekler.
<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<figcaption> : <figure> elementinin başlığını belirler.
<figure> : Çeşitli medya içeriği gruplarını belirler.
<hgroup> : Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<datalist> : Düzenlenebilir elementlere otomatik tamamlama özelliği verilmesini sağlar.

HTML5 ÖRNEKLERİ

HTML5 ÖRNEKLERİ

HTML5 ÖRNEKLERİ


Bu makalede size bir kaç  HTML5 Kod Örneğinden bahsedeceğim








HTML5 KOD ÖRNEKLERİ


HTML5 PARAGRAF KODU


<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>


Bilgileri Ekleme Kodu

<!DOCTYPE html>
<html>
<body>

<address>
Written by W3Schools.com<br>
<a href="mailto:us@example.org">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>

</body>
</html>

Bir Başlık İle Tablo Kodu


<!DOCTYPE html>
<html>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

29 Haziran 2013 Cumartesi

HTML META TAGLARI

HTML META TAGLAR 


Bu makalem ile aklınızda ki  Html Meta Taglar nedir, neden kullanılır sorularına cevap bulacaksınız. 


Öncelikle meta tagların sadece tek başına işe yaramadığını bilmeniz gerekir.Neden mi?Cevabı aşağıda.


HTML META TAGLARIEn iyi arama motoru sıralamalarını ister misiniz? Sadece meta etiketleri eklemek ve web sihirli sağ, üst yükselecek? Yanlış. Meta etiketleri sonuçları bir arama sorgusu yazdığınız kullanıcılara göstermek ilgili olan karar verirken büyük arama motorları bakmak büyük bir algoritmik bulmaca bir parça vardır.


Meta etiketleri yararlı ve arama motorları için önemli olmaya devam hangi bazı tartışmalar hala olsa da, meta etiketleri kesinlikle başka bir yerde Google, Bing, Yahoo, ya da sıralaması kazanıyor için sihirli bir çözüm değildir - bu yüzden başlangıçta bu efsane doğru öldürmesine izin. Ancak, meta etiketleri arama motorları ve siteniz hakkında ne kullanıcılar anlatmak ve meta etiketleri yanlış uygulandığında, olumsuz etkileri önemli ve üzücü olabilir.
En bakalım ne meta etiketleri de, ne meta etiketleri olsun, ve nasıl web sitenizde meta etiketleri uygularken hatalardan kaçınmak için.

Meta Taglar Nelerdir?

HTML meta etiketleri resmi bir belgenin HTML kodu açık ve kapanış baş etiketleri arasındaki yalan sayfa veri etiketleridir.
Bu etiketler metin görüntüler, ancak çözümlenebilir ve tarayıcılar (ya da diğer web hizmetleri) Sayfanın hakkında bilgi söyler değildir. Bir tarayıcı anlayabileceği kadar basit, bu sayfa "açıklıyor".
İşte meta etiketlerine bir kod örneği var:
<head> <title> değil Meta Tag, ama yine de gerekli </ title> <meta name="description" content="Awesome Açıklama Here"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </ Head>

Title Tag

Başlık etiketi Sayfanın en kafa bloğu görünse de, aslında bir meta etiketi değildir. Ne fark eder ki?Başlık etiketi W3C göre gerekli bir sayfa "öğesi" dir. Meta etiketleri opsiyonel sayfa tanımlayıcılarıdır.

Açıklama Meta Tag

Bu açıklama etiketi gibi görünüyor:
<meta name="description" content="Awesome Açıklama Here">
İdeal olarak, açıklaması 155 karakterden (boşluklar dahil) daha uzun olmalıdır. Ancak, tercih edilen arama motoru sonuçları sayfasında (SERP) bunu onaylaması için kontrol edin. Bazı uzun olan ve bazı daha kısadır. Bu başparmak sadece bir kural, artık kesin bir "en iyi uygulama" dır.
"Açıklama" meta etiketi üç önemli şekilde web siteleri yardımcı olur:
  • "Açıklama" sayfa veya site hakkında ne arama motoru söyler: arama motoru için sayfa hakkında, iyi bir açıklama yazmak gerekir ne olduğunu anlamak için. Google'ın algoritması bir açıklama kötü yazılmış veya yanlış olduğu karar verirse, bu sayfada ne kendi sürümü ile bu açıklamasına yerini alacak. Bunun yerine Google'ın yapay elinde bırakarak daha kendi kelimeleri kullanarak potansiyel müşterilere veya ziyaretçilere sitenize tanımlamak için tercih değil mi? Kendiniz için bu örnek ve yargıç bakın:
HTML META TAGLARI
  • "Açıklama" sitenize oranları tıklama yardımcı olur: iyi bir açıklama yazma bunu yeniden Google tutmanıza yardımcı olur, aynı zamanda sitenize üzerine tıklayarak daha iyi insanlar yardımcı olur sadece. İyi yazılmış açıklamasına çekiyor onları sitesini ziyaret etmek için, kullanıcıların sayfanızda ne olduğunu söyler, ama sadece. Bir açıklama arama motoru sonuçlarında burada gösterir budur. İyi vitrin gibidir. Kötü açıklamaları olan siteler daha az tıklama geçiş alacak ve arama motorları diğer sitelerin lehine sitenize indirgemek olacaktır.
  • "Açıklama" sitesi sıralaması yardımcı olur: ortak inanç (dayalı Google 2009 yılında söylediklerini ) size sıralaması yardımcı olacaktır açıklamasında başka bir şey değildir. Ancak, aksine kanıt gördük. Ağır ağırlıklı? Eğer ikinci bir anahtar kelime (bir-ing-ed veya-s demek) bazı değerler istiyorsanız Hayır, ama, burada kullanabilirsiniz.
Meta açıklama etiketleri üzerinde diğer iki kısa not:
  • Boş Açıklamaları: bir açıklama boş olabilir mi? Evet. Boş olduğunda Google ve Bing sizin için dolduracaktır. Aslında, bazen (örneğin, bloglar için) Google'ın veya Bing versiyonu tercih edebilirsiniz. (Onların benim sürümü tercih mümkün, Şahsen olsa da, ben her zaman doldurun, ama küçük bir kadro varsa, bu her zaman pratik değildir.)
  • Tırnaklar: açıklamanızda tam tırnak işaretleri ("") kullanmayın. Bu büyük olasılıkla açıklamasına kesecek. Bu sorunu önlemek için tek tırnak kullanın.

Anahtar Kelimeler Meta Tag

Uzun zaman önce bir galakside uzaklarda, çok uzaklarda, "anahtar kelimeler" meta etiketi erken arama motorları için kritik bir unsur oldu. Dinozorlar gibi çok, bu etiketi eski arama motoru kez bir fosil olduğunu.
Anahtar kelimeler bakar sadece arama motoru artık Microsoft'un Bing - ve onlar spam tespit yardımcı olması için kullanacağız. Sitenize zarar önlemek için, en iyi seçenek bu etiketi eklemek asla etmektir.
Ya da, sizin için mide için çok radikal olduğunu, en azından daha yüksek arama sıralamasında umuduyla 300 anahtar kelime doldurulmuş değil emin olun. Bu işe yaramaz. Özür dilerim ama yaramaz.
Zaten web sitenizde anahtar kelime meta etiketleri var, ama onlar spam değilseniz, aceleyle onları alarak bir sonraki hafta geçirmek için bir neden yok. Eğer mümkün olacaktır olarak sadece onları almak, sayfa ağırlık ve yükleme süreleri azaltmak için - Şimdi için onları bırakmalısın Tamam.

Diğer Meta Tag

Birçok diğer meta etiketleri, ama hiçbiri gerçekten günümüzde yararlı olarak kabul edilirler. Biz kullanılan etiketleri çoğu gibi şeyler yaptım:
  • Zaman geri gelmek için örümcek Told 
    <meta name="revisit-after" content="30 days">
  • Tarayıcı dağıtım söyledi 
    <Meta name = "dağıtım" content = "web">
  • Yenilemek için sayfayı Told 
    <meta http-equiv="refresh" content="30">
  • Yenilemek / yönlendirmek için sayfayı Told 
    <meta http-equiv="refresh" content="x_seconds; url=http://www.yourhost.com/pagetosendto.html">
Daha iyi yollar (örneğin şema etiketleme veya sunucu tarafı yöntemleri gibi) vardır, çünkü biz de, artık bu kullanmayın ya da üzerinde çalışmak için kullanılan motorlar varlığı artık ya da Google açıkça söyledi, çünkü onlar büyük fikirler (değildir sayfa düzeyinde yönlendirmeleri) gibi.
NOT: Şema etiketleme ve zengin veri parçacıkları sitenizin arama motorları ve arama örümcekler nasıl etkileşimde en önemli (ve biraz sessizce ilan) değişiklik tek başına bulunmaktadır. Onu öğrenmek. Bunu biliyorum. Onu yerine getirirler.

Robotlar Meta Tag

Robotlar etiketi hala en önemli etiketlerden biridir. Çok düzgün bir şekilde uygulanması için çokdur, ama yanlış değil.
Robots meta etiketi Belirli bir sayfayı bir arama motoru tarafından dizine ya da yapmak ya da istemiyorsanız sayfadaki bağlantıları takip gerektiğini belirlemenizi sağlar.
İster inanın ister inanmayın birisi yanlışlıkla sitenin tamamı için bir noindex etiketi ekledi için değil, hala deindexed gereken bir site için yaygındır. Bu etiketi anlamak hayati önem taşımaktadır.
Burada dört Robot Meta Tag uygulamaları ve anlamları vardır.
  • <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    Bu şu anlama gelir: "Indeks Bu sayfa sayfadaki bağlantıları takip etmeyin.." Sayfanız arama indeksi OUT düşecek ve diğer sayfalara bağlantıları takip olmayacaktır. Bu bu sayfadan diğer sayfalara sitenizde bağlantı yolu kıracak. 

    Bir site gelişme olduğunda bu etiket en sık kullanılır. Bir geliştirici noindex / arama motorları tarafından yakalandı olmaktan onları tutmak için sitenin sayfaları nofollow, sonra etiketi kaldırmak unutmayın. Yeni web sitesi sürülürken, bu kaldırıldı güvenmiyorum. GÖR DOUBLE!
  • <META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
    Bu şu anlama gelir: "Do Endeks bu sayfada sayfadaki bağlantıları takip etmeyin.." Sayfanız endeksinde OLACAKTIR VE diğer sayfalara bağlantıları takip olmayacaktır. Bu bu sayfadan diğer sayfalara sitenizde bağlantı yolu kuracak.
  • <META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
    Bu şu anlama gelir: "Do değil Endeks bu sayfada sayfadaki bağlantıları takip ediyor musunuz.." Sayfanız indeksi OUT düşecek ANCAK diğer sayfalara bağlantıları takip edilecektir. Bu bu sayfadan diğer sayfalara sitenizde bağlantı yolu kırmak değil olacaktır.
  • <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
    Bu şu anlama gelir: "Ana sayfada sayfadaki bağlantıları takip ediyor musunuz.." Bu sayfa dizin ve diğer sayfalara bağlantıları takip edilecektir olması OLACAKTIR anlamına gelir.Bu bu sayfadan diğer sayfalara sitenizde bağlantı yolu kırmak değil olacaktır.
NOT: Robotlar etiketi vicdanlı örümcekler az tarafından göz ardı edilebilir.

Karakter Tag

Son olarak, tüm siteler charset doğrulamalısınız. ABD'de, bu UTF-8 etikettir. Sadece İngilizce karakterler kullanarak HTML teslim eğer bu sayfada olduğundan emin olun.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Sonuç

Meta etiketleri duymuş olabilirsiniz ki sihirli bir çözüm olmasa da, yine de sitenizin arama motorlarında bulunmasında önemli bir rol oynamaktadır. Sizin metaların tadını çıkarın!

18 Haziran 2013 Salı

HTML5 KODLARI

HTML5 KODLARI

Bugün ki yazımda sizlere HTML5 Kodlarından <code> kodunu anlatacağım.

HTML 5 <code> Tag
HTML5 KODLARI
HTML <code> etiketi kodunun bir parçasını belirtmek için kullanılmaktadır.Kod etiketi işaretlenmiş olan kodu çevreler.
Işaretlenmiş olan kod bir XML öğesi adı, bir dosya adı, bir bilgisayar programı ya da bir bilgisayar tanıyacağını başka herhangi bir dize temsil edebilir.
Tarayıcılar genellikle metin ile çevrili göstergesi <code> , Courier (kullanmadan başka tarz sürece bir tek boşluklu font (aynı zamanda sabit genişlikli veya oransal olmayan yazı denir) etiketleri CSS ).
Kod birden fazla satır çevreleyen tarafından işaretlenebilir <code> tags ile <pre> etiketleri  olarak.

Özellikleri

HTML etiketleri bir veya daha fazla özellikleri içerebilir. Özellikleri etiketi görünür ya da nasıl davranması gerektiğini hakkında daha fazla bilgi ile tarayıcı sağlamak için bir etiket eklenir. Özellikleri bir isim ve çift tırnak içine değeri ile, bir eşittir (=) işareti ile ayrılmış bir değer oluşur. İşte bir örnek, 
bustyle="color:black;" .
Küresel, ve olay işleyicisi içerik özellikleri: Eğer HTML etiketleri ekleyebileceğiniz özellikleri 2 türü vardır.
Bu etiketi ekleyebileceğiniz özellikleri aşağıda listelenmiştir.

Küresel Özellikleri

Aşağıdaki özellikleri tüm HTML 5 etiketleri üzerinde standarttır.
accesskeygizlenmişitemtype
sınıfidlang
contenteditableatılyazım denetimi
contextmenuitemidstil
diritemproptabindex
sürüklenebiliritemrefbaşlık
dropzoneitemscopeçevirmek

Olay işleyicisi İçerik Özellikleri

Olay işleyicisi içerik niteliklerini HTML içinde bir komut dosyası çağırmak için sağlar. Komut dosyası belirli bir "olay" meydana geldiğinde çağrılır. Her olay işleyicisi içeriği niteliği farklı bir olay ile ilgilenir.
Burada standart HTML 5 olay işleyicisi içerik özellikleridir.
onabortonerror *onmousewheel
onblur ** onfocusOnPause
oncanplayonformchangeonplay
oncanplaythroughonforminputonplaying
AçıkDeğiştirmeoninputonprogress
onclickoninvalidonratechange
oncontextmenuonkeydownonreadystatechange
OnDblClickonkeypressonscroll
ondragonkeyuponseeked
ondragendonload *onseeking
OnDragEnteronloadeddataonSelect
ondragleaveonloadedmetadataonshow
OnDragOveronloadstartonstalled
ondragstartonmousedownonsubmit
alma ondroponmousemoveonsuspend
ondurationchangeonmouseoutontimeupdate
onemptiedonmouseoveronvolumechange
onendedonmouseuponwaiting