Ücretsiz E-posta Yazılarımız İçin Üye Olun!

En Yeni Yazılarımızıdan Haberdar Olması İçin Sizlerin Epostasına Gelsin :)

26 Ekim 2015 Pazartesi

sosyal medya butonları ve e-posta aboneliğini kodu

                                                                                 

Günümüzde sosyal medyanın web sitesi üzerinde ki etkisi tartışılmaz hale geldi. Google'ın da bizzat önem verdiği konulardan biri sosyal medya. Bu nedenle web sitelerinde bu tarz sosyal medya eklentileri bulundurmak size oldukça avantaj sağlayabilir. Blogger sosyal medya butonları ile facebook,twitter,google+ gibi ağlarda takipçi sayınızı arttırarak sitenizi daha geniş kitlelere duyurma şansını yakalarsınız. Bu sayede kullanıcılar yayınladığınız yeni içerikleri her an yakalama şansına sahip olurlar.
Bu zamana kadar bir çok sitede sosyal medya butonları ve e-posta aboneliğini eklentilerini ayrı kodlar dahilinde görmüşsünüzdür. Bugün sizlerle paylaşacağım eklentide ise oldukça şık, sade bir görüntüsünün yanı sıra aşağıda ki fotoğrafta göreceğiniz üzere yukarıda bahsettiğim iki özelliği birden içinde barından bir eklenti.

Fotoğrafta gözükmese de eklenti'de hareketli sosyal medya butonları kullanılmıştır.


SOSYAL MEDYA BUTONLARI VE E-POSTA ABONELIĞI KODU
<div class='widget-content'><style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTdL4qcjSuiczK4ZtBx2ahF9dc7VZgcIIgvq-yeNiOEFvC8lRYD8vJuHqXyZBpiCDtJet8alNybrouXZaugi4FNbLlEEA9hBKId87UPjbkvJ0k7TaEJ9r8-Zw1EJCG2DAbMQwpbaj2ziIr/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSb7Z-HXO9LBBJ6-JmgdJchhNfSWL4j2IY5vfqiCR4cZDJqs-gw2c0XwsUkg9AZ9CZ7bQD7vSlzOs_SGwzPzF0uKhjdylmgM1U6xLRZiEQaMTgjQ2tWRjonHY3VzOhv7i0IOK1jLaZxwcf/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjJE1VgZ3NVnPaPMT1ydddLMK_BLpOxr6OITTOBNGA4XLFICrCkRhVGkOfxF-4YLfqUzxsk9E6GcxyCLvv1NBR55N5z55JnEO48iI8CtEJyATWZBGsXoyXq1PXHsOhdjnWr3IbKPxaFcjg/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoZVSFrSSYJba-CYhe0CvQnZSaNwj6nW7tnLMMWXlBwnNbeD3sqdXBsQJgU8Ns71TQH7aA7KrvBgt497HIigVPRcUx5L2mYECmOEjaJAitln7vsXkza_HzKLtyJ9XRWm0GBsVlzUcWuBS/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}p#rb_socialicons img { /* Yeni Metro Sosyal Butonlar Eklentisi  */    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);}/* Yeni MEtro Sosyal Butonlar Eklentisi  */</style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><div class="sidebar-subscribe-box-form">    <center><p id="rb_socialicons"><a href="http://feeds.feedburner.com/siteniz" target='_blank'> <img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4qOYyfz-VqGhzVMfFMiUd2n3Uo-qyyWQTBAJu3Ag37-p3YLlVy_tdLpMfGrCAjaYY-33pRNt_AcR6RCCFv5H2F3iVCJ9DnpgBo0JjEajwcMoWnPE3IU28BY_mXgT_W-lWiUVfHIWH4Ec/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVq3Hz2EoJ6TJUlcBXL1P4hZUHOR3TXXffdJA5fY5Pq5TsyHdaqniGS2RiHxUdKqQPvuuFt_bIARrswwZtU0gBgcwRfewxiwMWnDgpxXzJFAVWg5WqysE9aZHX_Py_vCAVjRTWdzIgZzzS/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4qOYyfz-VqGhzVMfFMiUd2n3Uo-qyyWQTBAJu3Ag37-p3YLlVy_tdLpMfGrCAjaYY-33pRNt_AcR6RCCFv5H2F3iVCJ9DnpgBo0JjEajwcMoWnPE3IU28BY_mXgT_W-lWiUVfHIWH4Ec/s1600/rss-inactive.png" /></a><a href="https://www.facebook.com/kullanıcıadı" rel='nofollow' target='_blank'><img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbG2D8ib9rXQxe7czP1S1y32BuxI9sR5kLnaDE6NXEpYpDZjg3VB2xH4vswYM0lFx0o3r5_TBR0hTmTpClQJeWxvbzxOQXi6xnUtuXq4sYO0PfOMnZOR3BP__iT2tiRiCHTu89UN3LbisA/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaLw-akz5QWIyxAdUF9Z7waMYlrioJP3bfV5gwH6RpT9NidfsV9HghKjR3T9yssPvX0PkzAsKJKczo4BnRKLP55jk8uoyRH9y1To88kDUhgh09ank4OcsZB2-0hOvSlPhxqIyCht4HPJoY/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbG2D8ib9rXQxe7czP1S1y32BuxI9sR5kLnaDE6NXEpYpDZjg3VB2xH4vswYM0lFx0o3r5_TBR0hTmTpClQJeWxvbzxOQXi6xnUtuXq4sYO0PfOMnZOR3BP__iT2tiRiCHTu89UN3LbisA/s1600/facebook-inactive.png" /></a><a href="https://twitter.com/kullanıcıadı" rel='nofollow' target='_blank'><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuEcO0IYa8kkw_Fwq9VnNRc-mTGY_BMT5aHAMtmTunS4d51VYlRWURyGV3jdlTDlHXivuAQ1fagjdYIreWm5RpzfyCj820simwOjYod1JgC8A570JdC9sIMFKUVlwopvHw_1ms1KoDyJi/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghneM-08cT7VcKsoPV6wJA7XIgbmgE_3pdy1XvttcOiE5qA_XaXFeWjxhJxL25Ybn3UJpcVnSxDIVZYZTl0mNjc-cxOCltNuSHIxP3h0cEtKPAdsYMUBnFsz0IwQJG_l-jAjq77cshmaIN/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuEcO0IYa8kkw_Fwq9VnNRc-mTGY_BMT5aHAMtmTunS4d51VYlRWURyGV3jdlTDlHXivuAQ1fagjdYIreWm5RpzfyCj820simwOjYod1JgC8A570JdC9sIMFKUVlwopvHw_1ms1KoDyJi/s1600/twitter-inactive.png" /></a><a href="https://plus.google.com/u/kullanıcıadı" target='_blank' ><img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrw1Y5rC_nIzXBv7o59SROOy7ryOMSGYhQiXbhrczudzzowrah_RCYyJNWewxzdLySoOpngUZA5WBulZ7FzgK9s8d4xSM_IHQdJqnoXyEt1zXq3vmUQflEWS_M9KX79K9Cd0gCduqcXJf_/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNsrYW1LwuA9N_DfjcrzbJaMFKP19GlUPewbYYXWixYwMjK396CHQiizNaB9u2TgB9MNApjPoqpgUQGDfozWOJBCA7mr3KcH883_pkdBOYgXxwrEB1jCYcfvVdZchmmxLbh7S0AF8wletm/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrw1Y5rC_nIzXBv7o59SROOy7ryOMSGYhQiXbhrczudzzowrah_RCYyJNWewxzdLySoOpngUZA5WBulZ7FzgK9s8d4xSM_IHQdJqnoXyEt1zXq3vmUQflEWS_M9KX79K9Cd0gCduqcXJf_/s1600/google-plus-inactive.png" /></a><a href="http://pinterest.com/Kullanıcadı" rel='nofollow' target='_blank'><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcuboGWajSX0wYTtGg97K7AxuphI-rRLLrim_OvYoPpd0koM-4wvLFqeoOTPuLvhrh4RRq9F3Ir0fv7_Vb2I_E-jo5Sf_1M1vnxt99VwZOxWST4BcvsFsTCSJ_dvWKkKwWlCOWZSq8OYl/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Lt4p4J-h8If5B0-Kx4xi6rl_juRCFM_BQUVx7kC8nuunsvbq53HMKNHxnMfwCNktGwp22y8aI9ea2fC6b5onxrvcMHQgvJfoHQI9ALPdqYizXHkPnfJ6C1bI3fmKZe2maJxkzjXlzRJE/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcuboGWajSX0wYTtGg97K7AxuphI-rRLLrim_OvYoPpd0koM-4wvLFqeoOTPuLvhrh4RRq9F3Ir0fv7_Vb2I_E-jo5Sf_1M1vnxt99VwZOxWST4BcvsFsTCSJ_dvWKkKwWlCOWZSq8OYl/s1600/pinterest-inactive.png" /></a><a href="http://"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSaN_C1BFywHtPWSFrhJ7gYKo5lu2NqnR8-CpYG0bwPBUT76LlGyVAfXZ4FslpuVXMGCnW8lOqagF4O63JLrsNEmkC4WkwHolI5L8XS_Wsz5jrOQ6VGSAcs6PUfSP3mKK8Cx6EFkRFquMC/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP4CXidlTcr5b8MzmsYERz9MQWgycHWPcLAEfBH3OVywJpTXdZG9xvl52yMECItdkXcEbSKMPZzxvSE7ig12SuydJRy0sji1stAFra6ECqZbw4PwGUeEPmT0Y1VZioNHW8OFNGpLt3K8W/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSaN_C1BFywHtPWSFrhJ7gYKo5lu2NqnR8-CpYG0bwPBUT76LlGyVAfXZ4FslpuVXMGCnW8lOqagF4O63JLrsNEmkC4WkwHolI5L8XS_Wsz5jrOQ6VGSAcs6PUfSP3mKK8Cx6EFkRFquMC/s1600/email-inactive.png" /> </a></p></center>  <form action="http://feedburner.google.com/fb/a/mailverify?uri=BEYTOBLOG" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BEYTOBLOG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/bVOOCE" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="E-posta aboneliği.."/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Gönder !" /></form></div></div></div><style></style></div>

___________________________________________________________________________________


 DEMO


Sosyal Paylaşım Butonları

Sosyal Paylaşım Butonları

Sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça şık bir blogger eklentisidir. Gelelim Siteye eklemeye;

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz.

Aşağıda ki kodu alıp açılan sayfaya yapıştırınve işlem tamamdır.


 Sosyal Paylaşım Butonları Kodu

<!--Sosyal Paylaşım Eklentisi Başlangıç-->
<div style="background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFPtcai1f-UZl2-VEtChma9KDAuNsmmT_MDa8Iilc_SJzAAyyW09UXGHjXNwNrOCkSPy20AIHnDuQGdxZ5fVRRcb49soSs_P2tOUVpnsipeR9uhLsiBi2fR-V-HMeBB0vSrO9pY73MWBz/s1600/blogkaynagi+sosyal+eklenti.png) no-repeat; border: 1px solid #4891c1; box-shadow: 0px 0px 4px #888888; height: 250px; overflow: hidden !important; position: relative; width: 300px;">
<div style="left: 215px; position: absolute; top: 32px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="left: 228px; overflow: hidden; position: absolute; top: 112px; width: 60px;">
<div class="fb-like" data-font="arial" data-layout="button_count" data-send="false" data-show-faces="false" data-width="150">
</div>
<div id="fb-root">
</div>
</div>
<script type="text/javascript">


<!-- Sosyal Paylaşım Eklentisi Bitiş -->




BLOGGER İLETIŞIM FORMUNU SABIT SAYFAYA EKLEME

Uzun zamandır bloguma güzel birblogger iletişim formu eklemek istiyordum. Blogger'ın ilk zamanlarda kendine ait bir iletişim formu olmaması nedeniyle, diğer bloglarım da hep Google Docs ile oluşturduğum iletişim forumlarını kullandım. Nihayet geçen sene blogger resmi iletişim formu eklentisini yayınlandı fakat eklenti sadece sidebar'da kullanılabiliyordu.

Blogger iletişim formu eklentisinin sadece kenar çubuğunda kullanmak blog'da görüntü kirliliğine sebep olabiliyor. Açık söylemek gerekirse blogumun her yerinde bir iletişim formu görmek istemiyorum. Bu nedenle bu konumuzda blogger iletişim formunu kullanarak iletişim sayfasıoluşturmayı anlatacağım.

Neden İletişim Formu Kullanmalıyım ?
Blogger sayfanıza iletişim kutusu eklemek okuyucularınızın size ulaşmasını kolaylaştıracaktır. Size ulaşmak için konu altına mail adresilerini bırakıp sizin onlara ulaşmanızı beklemek yerine, gerekli bilgileri iletişim formuna doldurup Gönder butonuna basarak kolay bir şekilde size ulaşabilir. Tabi bu sadece blog okuyucuları için değil blogger yöneticileri içinde oldukça kullanışlı bir yöntemdir.

Blogger İletişim Sayfası Oluşturma

Aşağıda ki adımları izleyerek blogger iletişim formunu kullanarak iletişim sayfası oluşturabilirsiniz. Eğer demo görmek isterseniz, kullanmış olduğum iletişim sayfasını kontrol edebilirsiniz.

Adım 1: İlk olarak sidebar'da blogger resmi iletişim formu kullanıyorsanız Blogger Yönetici Paneli &gt; Yerleşim sekmesinden formu kaldırın.

Adım 2: Şimdi blogunuzun benzersiz blogID numarasını bulun. Blogger Yönetici Panelin'de herhangi bir sayfada iken tarayıcınızın URL çubuğunda blogID'i bulabilirsiniz. Bu blogID yeni iletişim sayfası oluşturmak için gereklidir. BlogID girmediğiniz taktir de iletişim kutusu çalışmayacaktır. Aşağıda ki ekran görüntüsünde blogID'in nasıl bulunacağını öğrenebilirsiniz. Bu numarayı bulduktan sonra bir yere kayıt edin.


Adım 3: Blogger Yönetici Paneli &gt; Sayfalar'dan Yeni Sayfa oluşturun.
Adım 3: Yeni sayfa oluşturduktan sonra HTML mod'u seçin ve aşağıda ki kodu boş alana yapıştırın. Kırmızı ile gösterdiğim kodu Adım 2'de not ettiğiniz blogID ile değiştirin.


İLETİŞİM FORMU KODU
<script>
var blogId = '1579251088135274134';

var contactFormMessageSendingMsg ='Gönderiliyor...';
var contactFormMessageSentMsg = 'Mesajınız başarılı bir şekilde gönderildi.';
var contactFormMessageNotSentMsg = 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz..';
var contactFormEmptyMessageMsg ='Mesaj alanı boş olamaz.';
var contactFormInvalidEmailMsg = 'Lütfen geçerli e-mail adresi girin'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>İsim : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>E-posta Adresiniz: <em>**</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>İletiniz <em>**</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='7'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>



DEĞİŞKLER: KIRMIZI İLE İŞARETLEDİĞİM YERE KENDİNİZİN BLOG İD ADRESİNİZİ EKLEYİN :D

Gerekli düzenlemeyi yapıp kodu yapıştırdıktan sonra Sayfa ayarları > Seçeneklere tıklayın. Okuyucu yorumları'nı engelleyin ve Oluşturma modunu Yazılan HTML'i yorumla olarak değiştirin. Aşağıda ki ekran görüntüsünde gerekli ayarları görebilirsiniz.

Hepsi bu kadar arkadaşlar, gerekli ayarlamaları yaptıktan sonra iletişim sayfasını yayınlayabilirsiniz. İletişim sayfasını sitenizde yayınlamadan önce iletişim kutusunu test etmeyi unutmayın.

IP Adresim Nedir?


Bu sayfada internet üzerinde kullandığınız IP adresinizi öğrenebilirsiniz. İnternete bağlanan her cihaza, İnternet Servis Sağlayıcısı tarafından bir IP adresi verilir ve girilen cihazın kimliğidir.

IP Adresiniz
ip numaram

IP Adres Açıklanmasılar

İnternet üzerinde faaliyet gösteren her cihaz için İnternet Servis Sağlayıcısı tarafından bir IP atanır ve diğer bilgisayarlar ile iletişim kurulurken IP adresi kullanılır. Cihazlar aynı yerel ağ üzerinde bulunmasalarda, IP adresi vasıtasıyla iletişim kurabilirler.

kaynakça: m5bilişim


HTML Referanslar (HTML5 Dahil)

Alfabetik Sıralama


HTML belgelerinizde kullanabileceğiniz tüm HTML etiketleri bu sayfada toplanmıştır.
EtiketTanımı
<!-- ... -->Sayfa kaynağınızda yorum tanımlar.
<!DOCTYPE>Doküman türü bildirimi tanımlar.
<a>Bağlantılı metin (link) tanımlar.
<abbr>Kısaltma tanımlar.
<acronym>Kısaltma tanımlar.
HTML5 desteklenmiyor.
<address>Belge veya makalenin sahibinin/yazarının iletişim bilgilerini tanımlar.
<applet>Sayfanıza gömülü uygulamalar tanımlar.
HTML5 desteklenmiyor. HTML 4.01 önerilmiyor.
<area>Resim haritaları için bir alan tanımlar.
<article>Bağımsız, müstakil içerikler tanımlar.
<aside>İçerikte geçen bir yerle ilgili açıklama tanımlar.
<audio>Ses, müzik veya diğer ses ortamları tanımlar.
<b>Kalın metin tanımlar.
<base>Belgedeki tüm göreceli URL'lar için URL veya hedef tanımlar.
<basefont>Başka bir kaynaktan alıntı bölüm tanımlar.
HTML5 desteklenmiyor. HTML 4.01 önerilmiyor.
<bdi>Metin yönü farklı olan bir metni diğer metinlerden ayırır.
<bdo>Geçerli metin yönünü geçersiz kılınmasını tanımlar.
<big>Büyük metin tanımlar.
HTML5 desteklenmiyor.
<blockquote>Nesneyi bir menü ile ilişkilendirir.
<body>Belgenin gövdesini tanımlar.
<br>Metin içerisinde satır sonu tanımlar.
<button>Düğme tanımlar.
<canvas>Grafik çizimleri için bir tuval tanımlar.
<caption>Tablo başlığı tanımlar.
<center>Ortalanmış metin tanımlar.
HTML5 desteklenmiyor. HTML 4.01 önerilmiyor.
<cite>Çalışmanın başlığını tanımlar.
<code>Bir parça bilgisayar kodu tanımlar.
<col>Sütun için sütun özelliklerini tanımlar.
<colgroup>Bir veya daha fazla sütunlu tabloların sütun biçimlendirmelerini tanımlar.
<command>Kullanıcı tarafından çağırılabilen bir komut tanımlar.
<datalist>Önceden tanımlanmış açılır liste tanımlar.
<dd>Tanım listesinde öğenin açıklamasını tanımlar.
<del>Silinmiş metin tanımlar.
<details>Kullanıcı tarafından gizlenip/görüntülenebilen ek bilgiler tanımlar.
<dfn>Terim tanımlar.
<dir>Dizin başlıkları tanımlar.
HTML5 desteklenmiyor. HTML 4.01 önerilmiyor.
<div>Belgede bir bölüm, sektör tanımlar.
<dl>Tanım listesi tanımlar.
<dt>Tanım listesinde bir öğe tanımlar.
<em>Vurgulanmış metin tanımlar.
<embed>Harici uygulamalar ve etkileşimli içerikler için taşıyıcı tanımlar.
<fieldset>Form içerisindeki ilişkili elemanları gruplandırır.
<figcaption><figure> etiketi için başlık tanımlar.
<figure>Çizimler, fotoğraflar, kod listeleri gibi bağımsız içerik tanımlar.
<font>Metnin yazı tipini, büyüklüğünü ve rengini tanımlar.
HTML5 desteklenmiyor. HTML 4.01 önerilmiyor.
<footer>Belge veya bölümün altbilgisini tanımlar.
<form>Kullanıcı girişleri için form tanımlar.
<frame>Çerçeve tanımlar.
HTML5 desteklenmiyor.
<frameset>Birden fazla çerçeve içim özellikler tanımlar.
HTML5 desteklenmiyor.
<h1> ... <h6>Başlık tanımlar.
<head>Belgenin başlık bölümünü tanımlar.
<header>Belge veya bölüm için başlık tanımlar.
<hgroup>Başlık etiketlerinin gruplandırılmasını sağlar.
<hr>Konu sonu tanımlar.
<html>Belgenin HTML belgesi olduğunu tanımlar.
<i>Metnin bir kısmını alternatif ses veya hava katar.
<iframe>Satıriçi çerçeve tanımlar.
<img>Görüntü tanımlar.
<input>Kullanıcının veri girişi yapabileceği giriş alanı tanımlar.
<ins>Eklenmiş metin tanımlar.
<kbd>Klavye girişi tanımlar.
<keygen>Formlar için anahtar çifti tanımlar.
<label><input> etiketi için başlık tanımlar.
<legend><fieldset> etiketi için başlık tanımlar.
<li>Liste öğesi tanımlar.
<link>Belge ile harici kaynak arasında ilişkiyi tanımlar.
<map>Resim haritası tanımlar.
<mark>İşaretlenmiş metin tanımlar.
<menu>Komut listesi/menüsü tanımlar.
<meta>Veri hakkında bilgiler tanımlar.
<meter>Değer veya ölçü için skala tanımlar.
<nav>Navigasyon menüsü tanımlar.
<noframes>Çerçeve desteklemeyen tarayıcılar için bilgi tanımlar.
HTML5 desteklenmiyor.
<noscript>Script desteklemeyen tarayıcılar için alternatif içerik tanımlar.
<object>Gömülü nesne tanımlar.
<ol>Sıralı liste tanımlar.
<optgroup>Açılır listedeki öğelerin gruplandırılmasını sağlar.
<option>Açılır liste için öğe tanımlar.
<output>Hesaplama sonucu tanımlar.
<p>Paragraf tanımlar.
<param>Gömülü nesneye parametre tanımlar.
<pre>Önceden biçimlendirilmiş metin tanımlar.
<progress>Görevin ilerleme durumunu tanımlar.
<q>Kısa alıntı tanımlar.
<rp><ruby> etiketini desteklemeyen tarayıcılar için açıklama tanımlar.
<rt><ruby> etiketinin sahip olduğu karekterler için açıklama tanımlar.
<ruby>Ruby(rubi) karakterleri içeren bir metin tanımlar.
<s>Doğru, uygun metin tanımlar.
<samp>Bilgisayar programından örnek çıktı tanımlar.
<script>İstemci taraflı bir script tanımlar.
<section>Belgede bir bölüm tanımlar.
<select>Açılır liste tanımlar.
<small>Küçük metin tanımlar.
<source>Medya tanımları için birden fazla kaynak tanımlar.
<span>Satır içi grup tanımlar.
<strike>Üstü çizili metin tanımlar.
HTML5 desteklenmiyor. HTML 4.01 önerilmiyor.
<strong>Güçlü metin tanımlar.
<style>HTML belgeleri için stil biçimlendirmeleri tanımlar.
<sub>Altsimge metni tanımlar.
<summary><details> etiketinin başlığını tanımlar.
<sup>Üstsimge metni tanımlar.
<table>Tablo tanımlar.
<tbody>Tablonun gövde içeriğini gruplandırır.
<td>Tablo için standart hücre tanımlar.
<textarea>Çok satırlı metin giriş alanı tanımlar.
<tfoot>Tablonun altbilgi içeriğini gruplandırır.
<th>Tablo için başlık hücresi tanımlar.
<thead>Tablonun başlık içeriğini gruplandırır.
<time>Gregoryen takvimine göre tarih ve saat tanımlar.
<title>Belgenin başlığını tanımlar.
<tr>Tablo için bir satır tanımlar.
<track>Medya nesneleri için metin parçaları tanımlar.
<tt>Daktilo tipinde metin tanımlar.
HTML5 desteklenmiyor.
<u>Normal metinlerden farklı metinlerin açıklamasını tanımlar.
<ul>Sırasız liste tanımlar.
<var>Değişken tanımlar.
<video>Film klibi, video akışı veya diğer video ortamlar tanımlar.
<wbr>Kelime arası satır sonu tanımlar.

kaynak: m5bilişim