JavaScript ile Kopyala Butonu Oluşturma Nasıl Yapılır?

Bugün kendi geçici mail servisimi hazırlarken web sayfasındaki bir metni butonla kopyalama ihtiyacım oldu bunun üzerine yaptığım çalışma sonucunda JavaScript kullanarak bu işlemi kolayca yapabildim. Aslında kodlara baktığınızda bu işlemin bilmeyen için çok kolay olmadığını fark edebilirsiniz çünkü kopyalama işlemini yapabilmek için TextAreaya ihtiyacımız var bu nedenle JavaScript ile TextArea oluşturacağız ve kopyalamak istediğimiz metni TextArea'ya atayıp daha sonra kopyalayabileceğiz.

JavaScript Kodu: Bu kodu sayfada herhangi bir yere koyabilirsiniz.

1.Yöntem veriyi Class kullanarak almak: Css te olduğu gibi class sınıfının basına nokta koyarak querySelector fonksiyonun içine aşağıdaki gibi yazıyoruz.

<script>
function kopyala(element){
 var alan = element.parentElement.querySelector(".mail").innerHTML;
 var textAlani = document.createElement("TEXTAREA");
 textAlani.value = alan;
 document.body.appendChild(textAlani);
 textAlani.select();
 document.execCommand("copy"); 
 textAlani.style.display = "none";
 alert("Kopyalandı");
}
</script>

2.Yöntem veriyi HTML etiketi kullanarak almak: querySelector fonksiyonunun içine span etiketinin içindeki yazıyı alacağım için span yazıyorum.

<script>
function kopyala(element){
 var alan = element.parentElement.querySelector("span").innerHTML;
 var textAlani = document.createElement("TEXTAREA");
 textAlani.value = alan;
 document.body.appendChild(textAlani);
 textAlani.select();
 document.execCommand("copy"); 
 textAlani.style.display = "none";
 alert("Kopyalandı");
}
</script>

HTML Kodu: Html kodunu kullanırken kullanacağınız yönteme göre class oluşturabilirsiniz.

<span class='mail'>dandik.mail3.1qaz2wsx@blogger.com</span>
<button class='btn btn-dark' onclick='kopyala(this);'>Kopyala</button>

Butona tıklandığında verinin kopyalandığını göstermek amacı ile koyduğum alert("Kopyalandı"); fonksiyonunu isterseniz kaldırabilirsiniz böylece butona tıklandığında sayfa üzerinde resimdeki gibi onay penceresi açılmaz.

Geliştirici araçlarını kullanarak CSS Tasarımı Yapmak

Resimde gördüğünüz sayfada düm düz tasarım yapılmıştır CSS kullanarak herhangi bir süsleme yapılmamıştır şuan çok kötü görünüyor ancak yapacağımız basit dokunuşlar ile göze hoş gelecek şekle dönüşecek.

Bu anlatımda kullanacağım tarayıcı Google Chrome olacak tasarım yapacağımız internet sayfasını açalım ve F12 butonuna basarak geliştirici araçlarını açalım.

Değiştirmek istediğimiz alanı seçelim yada tam üzerine sağ tıklayarak incele seçeneğini seçelim resimde gösterdiğim alanda seçili alanın kodları görüntülenecek. Görüntülenen kodlara baktığımızda Başlığa şekil verebilmek için önceden atanmış class sınıfını görüyorsunuz <h1 class="title"> olarak yazılmış Css ile buraya emir verebilmek için h1.title {  } kodunu kullanacağız.

Tam buraya önemli bir not açalım HTML etiketleri örnekteki gibi direk yazılır h1, h2, div gibi class ifadelerinin başına ise . yazılır .title, .header gibi yukarıdaki örnekte yok ancak id="ornek" gibi bir ifadeye sahip olsaydı id deki ornek değerinden de tasarım yapabilirdik bunun kullanılışı ise #ornek olacaktı.

Ben başlığa bir renk vereceğim sevdiğim bir renk olan #00ACED kodunu kullanacağım bunun için ilgili alana emir veren kodun içine color: #00ACED; ekliyorum her emirden sonra ; kullanmayı unutmayın yoksa kodunuz hata verir. h1.title { color: #00ACED; }

Hemen altındaki Blog Tanımı ifadesinin rengini değiştirmek istiyorum yine aynı şekilde sağ tık incele seçeneğini seçerek kodları inceliyorum bu sefer ilgili bölüme bir class eklenmediğini görüyorum <span>Blog Tanımı</span> burayı iki şekilde değiştirebiliriz. Birincisi <span class="Btanim">Blog Tanımı</span> şeklinde bir class atayabiliriz yada hiçbir atama yapmadan div.descriptionwrapper p.description span { } şeklinde hiyerarşik olarak en dıştan içe doğru etiketleri belirterek değişiklik yapılacak yeri belirttik ve rengininde #7FFFD4 olmasını istiyorum div.descriptionwrapper p.description span { color: #7FFFD4; }

Hemen alttaki tarih kısmı çok büyük onun küçülmesini istiyorum kodları incelediğimde yine class atanmadığını görüyorum ancak class içermeyen yerlere nasıl emir vereceğimizi az önce öğrendik aynı şekilde yapacağım div.date-outer h2.date-header span { font-size: 15px } kodu ile istediğim şekle dönüşmesini sağlıyorum.

Konu başlığının yazı büyüklüğü iyi rengini de değiştirmiyorum şimdi yazı alanının olduğu yeri belirginleştirmek için çerçeve içine alıp köşeleri yuvarlayıp arka plan rengi atayacağım. İnceleme işlemi yaparak hangi kodlarla ilgili bölgeye hitap edeceğimizi bulalım. Fareyi sayfa kodları üzerinde gezdirdiğinizde sayfadaki yeri solda site üzerinde canlı olarak görünüyor istediğim yeri böylece bulmuş oldum ayrıca bulduğum yerin CSS ile nasıl ifade edildiğide sol tarafta yazıyor div.col-md-8 bu alana div.col-md-8 { border: 1px solid #000000; border-radius: 10px; background-color: #dedede; } kodları ile istediğim değişiklik emrini gönderebiliyorum.

Şimdi hazırladığımız tüm css kodlarının kalıcı olabilmesi için #### Css kodları buraya yazılacak #### diye belittiğimiz alana yazılacak

h1.title { color: #00ACED; }
div.descriptionwrapper p.description span { color: #7FFFD4; }
div.date-outer h2.date-header span { font-size: 15px }
div.col-md-8 bu alana div.col-md-8 { border: 1px solid #000000; border-radius: 10px; background-color: #dedede; }

Yaptığımız değişiklikleri kaydedince sayfa aşağıdaki gibi görünecek siz her yaptığınız adımı kaydederek denersiniz anlatım kopukluğu olmasın diye ben hepsini tek seferde kaydettim.

Sayfa tasarımı bu şekilde adım adım ilerliyor bu işte uzmanlaştıkça pratikleşeceksiniz daha hızlı temalar oluşturabileceksiniz bu olayı öğrendiğinizi düşünerek anlatımı burada bırakıyorum size kolay gelsin.

Robots.txt Nasıl Oluşturulur?

Öncelikle yeni bir metin belgesi oluşturun ve adını robots.txt olarak değiştirin şimdi içine yazacağımız komutları açıklayacağız.

Önemli Not: 

• Büyük küçük harf bile etkilidir elle yazıyorsanız dikkatli olun komutları hatalı yazmanız daha sonradan düzeltilebilir ancak hatalı indexlenmiş sayfalar çok geç düzelmektedir.
• robots.txt dosyası sitenin kök dizininde olmalıdır "http://siteadresi.com/robots.txt"
• * işareti joker karakterdir değişkenleri belirtmek için kullanılır. Pek çok yerde kullanacaksınız.

User-agent izin verilecek yada engellenecek botların isminin belirtileceği yerdir.

Şimdi örneklendirme yapalım.

User-agent: Googlebot ifadesiyle Google botlarını etkileyecek komutlar verileceği anlatılıyor.

User-agent: DeepCrawl ifadesiyle DeepCrawl botlarını etkileyecek komutlar verileceği anlatılıyor.

User-agent: Googlebot

User-agent: DeepCrawl ifadesiyle hem Googlebot hemde DeepCrawl botları için komutlar verileceği anlatılıyor birden fazla bot eklemek istiyorsanız alt alta eklemeniz gerekiyor virgülle falan ayırmayın.

User-agent: * ifadesiyle tüm botları etkileyecek komutlar verileceği anlatılıyor. * bir değişkendir ve yerine her şey gelebilir.

Allow izin verilecek dizinleri yada sayfaları belirtmek için kullanılır.

Şimdi örneklendirme yapalım.

Allow: / ifadesiyle sitenizin kök dizinine izin vermiş oluyorsunuz botlar tüm siteyi dolaşabilir.

Allow: /dizin1/ ifadesiyle dizin1 klasörü ve sonrasındaki alt klasörlere izin vermiş oluyorsunuz.

Allow: /dizin1/ornek.html ifadesiyle sadece ornek.html sayfasına izin vermiş oluyorsunuz dizin1 deki diğer dosyalara izin verilmez.

Disallow taramaya izin verilmeyen dizinleri veya sayfaları belirtmek için kullanılır bu komutun olduğu dizinler taranmamalıdır ancak hiç taranmayacağı anlamına gelmez google aramalarında gözükmemesi için noindex etiketi kullanmalısınız.

Şimdi örneklendirme yapalım.

Disallow: /dizin1/ ifadesiyle dizin1 ve sonrasındaki alt klasörlerin tamamı yasaklanmış olur

Disallow: /ornek.html ifadesi ile sadece ornek.html sayfası yasaklanmış olur.

Simdi yasaklanmış bir dizininde sadece bir sayfaya nasıl izin verileceğine bakalım

Disallow: /dizin1/ ifadesiyle dizin1 i yasakladik hemen ardından

Allow: /dizin1/ornek.html ifadesi ile dizin1 içindeki ornek.html sayfasına izin vermiş olduk.

Şimdi de Blogger için bir engelleme örneği yapalım. Blogger da mobil kullanım engellense bile mobil kullanıldığı zaman her sayfanın sonuna ?m=1 eklenmektedir. Botlarda bu sayfaları url adresi değiştiği için aynı içeriğe sahip kopya sayfa olarak gösterecektir kısacası birebir aynı içeriğe sahip sayfalar varsa bunlar engellenmelidir ufak tefek farklar varsa engellenmeyebilir. Sonunda m=1 olan tüm sayfaları Disallow: /*m=1 ifadesi ile engelleyebiliriz / ve m=1 ifadesi arasındaki * sitenin kök dizini ile her sayfanın sonuna eklenen m=1 arasında kalan bölümü gösterir * karakterini bu örnekteki gibi kullanarak her ihtiyaca göre robots.txt oluşturabilirsiniz.

Unutmadan robots.txt in en sonuna varsa site haritası eklemenizde fayda var böylece sitenize gelen tüm botlara ziyaret etmesi gereken konu başlıklarını da göstermiş olursunuz.

Sitemap: https://siteadresi.com/sitemap.xml

Son olarak bloğumda kullandığım robots.txt örneğini paylaşmak istiyorum.

User-agent: Mediapartners-Google

User-agent: *

Allow: /

Disallow: /*m=1

Sitemap: https://vericanavari.blogspot.com/sitemap.xml

Bundan sonrası artık biraz düşünerek gerçekleşecek önce ihtiyacınızı belirleyeceksiniz daha sonra robotların erişmesi ve erişmemesi gereken yerleri belirleyip işe girişeceksiniz. Etkili bir robots.txt oluşturmak için mutlaka Google Search Console kullanmalısınız eğer sitenizde dizine eklenme ile ilgili bir sıkıntı yaşarsanız kapsam sorunları içerisinde uyarı görürsünüz hatanın ne olduğunu bildikten sonra çözmek basittir. Örneğin Blogger in orjinal robots.txt dosyasında etiketler engelli gelmektedir ancak sayfa içi linklemelerden dolayı etiketlerin ana sayfaları diğer yazılardan daha değerli görünmekte ve google aramalarda daha üst sıralarda çıkmaktadır ancak Blogger etiketleri engellediği için etiketler aramalarda açıklamasız olarak görünmektedir. Eğer aramalarda yasaklamamıza rağmen görünüyorsa düzgün görünmesi ziyaretçilerin ilgisini çekmek için daha iyidir bu nedenle etiketlerdeki engellemeyi robots.txt imden kaldırdım.
Yine Google Search Colsole'de "Kullanıcı tarafından seçilen standart sayfa olmadan kopya" başlığının altında hepsinin sonu ?m=1 ile biten mevcut sayfalarımın Blogger tarafından Mobil görünüm için otomatik oluşturulan farklı linkler olduğunu gördüm botlar farklı bir sayfaymış gibi aynı içeriği tekrar kontrol ediyor boş yere siteyi ikinci defa dolaşmış oluyor ve sonucunda bu hatayı tespit edebiliyor bu nedenle hanemize eksi puan verip vermediğini anlayamadım bunun için uzun denemeler yapmak gerekiyor ancak bunun tespiti için uğraşan biri değerlendirmesini de yapar diye düşünüyorum bu nedenle sadece adresin değiştiği içeriğin aynı kaldığı sayfaları engellemeniz faydanıza olacaktır.

Adresin değiştiği sitenin aynı kaldığı linklere bir örnek daha buldum: Yorum Linkleri mevcut sayfanızın sonuna eklenen birkaç fazlalık ile yoruma odaklanan link oluşturulmuş ancak içerisinde # kullanmadıkları için botlar bunu sayfa içinde ilgili bölüme gitme linki yerine yeni bir link olarak düşünüyor. Search Console'da yönlendirmeli sayfa uyarısı ile hariç bırakılıyor bu sayfa hariç bırakıldığı için düzenleme yapmasanız da olur ancak her şey doğru olsun botlar yok yere yorulmasın diyorsanız "https://vericanavari.blogspot.com/2019/03/idm-is-corrupt-hatas-nedir-nasl-cozulur.html?showComment=1553216093684" tarzındaki linkleri engellemek için Disallow: /*showComment* komut satırını robots.txt içinde kullanabilirsiniz.

Robots.txt Nedir? Ne işe yarar?

robots.txt dosyası arama motorlarının sitenize gönderdiği botların nereleri ziyaret edeceğini belirtir sitenizi indexleme ile doğrudan alakası yoktur. Botlar robots.txt dosyasında yasakladığınız yerlere yasaklamanıza rağmen girebilir sayfaları istemeseniz bile indexleyebilir ancak siz robots.txt dosyasında buraları dolaşma dediğiniz için google aramalarında sayfalar açıklamasız olarak görünür (hatalı bir kısıtlama yaparsanız indexlenmesini istediğiniz sayfalar açıklamasız olarak indexlenecek ve dolaylı olarak arama sonuçlarınız olumsuz etkilenmiş olacaktır) açıklama yazan bölümde "Bu sayfada bilgi yok. Nedenini öğrenin" diye hata mesajı görünür Google Search Consol'dan baktığınızda bu hatanın sebebinin robots.txt kısıtlamasından kaynaklandığını görürsünüz. Eğer bu uyarıyı göremiyorsanız birkaç gün beklemeniz gerekebilir çünkü sistem birkaç gün gecikmeli çalışıyor. Sayfanızın google veya diğer arama motorları tarafından indexlenmesini istemiyorsanız sitenizde noindex etiketini kullanmalısınız noindex etiketinin bulunduğu sayfalar botlar tarafından indexlenmez. Şuan aklınızdan şu geçiyor olabilir "ee ozaman tüm sitemizi gezsin neden kısıtlamaya çalışıyoruz" aslında haklısınız ancak robots.txt kullanmanın iki sebebi var birincisi botlar sürekli sitenizi ziyaret eder eğer siteniz büyük ve sürekli güncelleniyorsa o zaman botlar sitenizden neredeyse çıkmaz diyebiliriz buda doğal olarak band genişliği oluşturur ve size masraf olarak dönebilir. İkinci sebebi ise botlar içindir botlar da iş yükünden kurtulmak, işini bitirip bir an önce gidebilmek için site sahibi tarafından önemli yerlerin gösterilerek yönlendirilmeyi ister. Arama motorları robots.txt kullanmayan siteleri sevmez bunu ciddi bir eksiklikmiş gibi düşünür (aslında bunun altında beni düşünmeyeni ben hiç düşünmem mantığı yatıyor). Madem robots.txt kullanmak zorundayız o zaman trafiğinizi harcamayan, hem sizin hemde botların işine yarayacak bir robots.txt oluşturalım. Devamı "robots.txt nasıl oluşturulur" başlıklı yazımızda.

JPEG Compressor 2019 (Resim Sıkıştırıcı) indir

JPEG Compressor 2019 (Resim Sıkıştırıcı) Resimlerin boyutunu akıllı sıkıştırma teknolojisi kullanarak sıkıştırıp gözle fark edilmeyecek şekilde boyut küçültme işlemi yapan başarılı bir programdır. Resim boyutunun küçülmesi internet sayfalarının daha hızlı yüklenmesini sağlar böylece internet kullanıcıları sitenizin yavaşlığından yakınmaz sitenize karşı antipati oluşturmaz bu durum Google tarafından da takip edilir site hızı yavaş olan sitelere uyarı vermektedir site hızı iyi olan siteler Google a göre daha kaliteli sitelerdir bu nedenle aramalarda daha önde çıkarlar.

JPEG Compressor 2019 (Resim Sıkıştırıcı) ticari olmayan kullanımlar için tamamen ücretsiz bir programdır herhangi bir kısıtlama olmadan kullanabilirsiniz. Programın kullanımı manueldir yani otomatik gerçekleşmez kalitesini düşürmeye çalıştığınız resmin görüntüsünde bozulmalar olduysa ayarları değiştirerek deneme yapabilirsiniz. Ben Compression Levels ayarlarının hemen sağ altındaki buton ile Set Target i aktif edip kbyts sınırlamasını da kullanıyorum bu özellik resmi belirli bir boyuta göre sıkıştırma yapıyor. Örneğin program ilk ayarlarla sıkıştırma yaptı resmi 2Mb'tan 300 KB'a düşürdü ancak resimde bozulmalar oldu bu durumda resim fazla sıkıştırılmış demektir boyutu 400KB olsaydı bozulma olur muydu? diyebilmek için Kbytes sınırını 400 yaparak deniyorum bu denemeler istediğiniz kalite ayarlanana kadar birkaç sefer tekrar edebilir.

Programın faydasını size daha kolay açıklayabilmek için örnek bir fotoğrafın hem orjinal hemde sıkıştırılmış halini ekliyorum çözünürlüklerini karşılaştırıp bu yöntemin kullanılıp kullanılmayacağına karar verebilirsiniz. Resimleri buradan indirebilirsiniz.

İndir (1.77MB)

Siteni Pingle Botlar Gelsin

Web sitenizin arama motorlarında var olabilmesi arama motorlarının sitenize gönderdiği botlar veya diğer bir deyişle örümcekler ile olmaktadır. Botlar sitenize gelir içeriğinizi alır daha önce dizinde ekli değilse ekler daha önceden varsa değişiklikleri karşılaştırır içeriğin diğer siteler ile benzerlik gösterip göstermediğini kontrol eder alıntı ya da çalıntı olup olmadığına bakar çalıntı ise çalıntı yapılan kişiye  çalanın önünüzde çıkması için +1 puan verir. Yani her şey botlar sayesinde yapılır peki neden sitemize botları çağıralım neden buna ihtiyacımız var ki kendiliğinden gelmesini beklesek olmaz mı? Tüm bu soruların cevabı var aslında olur diyebiliriz ancak günümüzde içerik hırsızları çok fazla yayımladığınız içerik henüz botlar tarafından görülmeden hırsızlar tarafından fark edilip içeriğiniz çalınabilir birde üstüne onun sitesi sizden önce indexlenirse bu sefer sizi hırsız bile çıkartabilir şaka gibi ama mümkün bazı arkadaşlar tarih damgalarının oluşu ile bunun önlenebileceğini söylemekteler ancak içeriği çalan hırsız konunun yayınlanma zamanını çaldığı yerden önce olarak ayarlayarak bu soruna da çözüm bulabilir bu nedenle sitenize yeni bir konu eklediğinizde hırsızlar tarafından çalınamaması için sitenizi pinglemede fayda var botlar önce sizin sitenize gelerek içeriğinizi kaydedecektir böylece içeriğinizin çalınmasının hiç önemi kalmayacak +1 puanlar hep size gelecektir.

Sitenizi Pingleyebileceğiniz hizmet PING-O-MATIC tarafından sunulmaktadır sadece blog için kullanılıyor dense de diğer siteler içinde kullanabilirsiniz yine faydası olacaktır. Ping-O-Matic hizmetlerinin çalışıp çalışmadığını sürekli kontrol ettiğini her zaman sorunsuz olarak hizmet alabileceğini iddaa ediyor. Ben hizmeti kullanmadan önce ve sonra Google'da "site:http://vericanavari.blogspot.com" diye arama yaptırdığımda sitemin kayıtlı olan index sayısında değişiklikler olduğunu gördüm Ping-O-Matic hizmetinin botları sitenize çağırdığına ve etkisinin olduğuna kesin olarak katıldığımı söyleyebilirim.

Resimleri Sıkıştırarak Sayfa Yüklenme Hızını Arttırın

Web site yüklenme hızını etkileyen en önemli unsur sitenizdeki görsellerdir. Küçük bir yöntem ile görsellerin boyutunu düşürülebilirsiniz böylece siteniz normalden daha hızlı yüklenir kullanıcı mutlu olur kullanıcının mutlu olduğunu gören Google daha fazla mutlu olup siteniz hızlı yüklendiği için sizi üst sıralara çıkartır.

Peki Resimleri Sıkıştırmak Mümkün müdür? Mümkünse bu Nasıl Olmaktadır?

Cevap çok basit resim sıkıştırması denilen şey aslında tam olarak bir sıkıştırma işlemi değil. Benzer renkler gözle kolay kolay fark edilmeyecek şekilde bir araya getirilerek resim daha az veri ile ifade edilebilen şekle dönüştürülür buna akıllı kayıplı sıkıştırma denmektedir. Bu işlem sonucunda dosya boyutunda ciddi bir küçülme yaşanmaktadır. Hem kullanılan disk alanından hem trafikten tasarruf edilmektedir.

Bu yazımızda resim sıkıştırma işlemi yapabileceğiniz TinyPNG sitesinden bahsediyoruz. TinyPNG ücretsiz olarak ta hizmet vermektedir, TinyPNG ile aynı anda 5MB'ı aşmayan 20 tane resim sıkıştırabilirsiniz daha fazlasına ihtiyacınız varsa ücretli seçenekleri bulunuyor ayrıca photoshop için ücretli olarak eklenti de satıyorlar. Resim sıkıştırma işlemi ile web sitenizde yaşanacak farkı site test aracı ile öğrenebilirsiniz test aracı sitenizdeki resimlerin boyutlarının küçülerek ne kadar tasarruf yapacağınızı ve sitenizin eskiye göre ne kadar hızlı yükleneceğini göstermektedir.

Online Resim sıkıştırıcı işinizi görmüyorsa buradaki resim sıkıştırma programına da bakabilirsiniz.

Font Awesome Nedir? Nasıl Kullanılır?

Font Awesome hem bilgisayarda hemde Web Sayfalarında kullanılabilen ikon fontudur. Web'in en popüler simge seti ve araç seti olan Font Awesome ile web sitenizde vektör ikonları ve sosyal logoları kullanabilirsiniz. Kolay boyutlandırılabilir ve renklendirilebilir yüzlerce ikon içerisinden işinize yarayan bir çok simge bulacaksınız. Kullanımı oldukça basit olduğu için web tasarım süreniz kısalacak ayrıca tasarımınızda resim yerine Font Awesome ikonları kullandığınız için sayfa boyutu küçülecek, siteniz hızlı yüklenecek güzel görünmesi de yanına bonus olacak.

<head></head> etiketleri arasına aşağıdaki kodu ekledikten sonra

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

Web sayfalarınızda kullanabileceğiniz Font Awesome iconlarının  kodlarına ikon galerisinden ulaşabilirsiniz. Galeriye girdiğinizde aradığınız bir simge varsa ingilizce karşılığını arama kutusuna yazarak bulabilirsiniz Türkçe olarak ararsanız anlamlı simgeler bulamayacaksınız. Şöyle bir örnek yapalım download ikonu eklemek istiyoruz download diye arattığımızda ikonlar sıralanacak kullanmak istediğiniz ikonun üzerine tıklayarak seçin burada dikkat etmeniz gereken üzerinde pro ifadesinin olup olmaması pro yazanlar ücretli versiyonlarda mevcuttur ücretli versiyona sahip değilseniz sitenizde görünmez biz ücretsiz olanlarla devam ediyoruz ilk download ikonuna tıklayın açılan sayfada ikonların photoshopta ve web sayfasında kullanabileceğiniz seçenekleri sunuluyor <i class="fas fa-download"></i> yazan yere tıklayın kopyaladığınız kodu sitenize yapıştırarak kullanabilirsiniz kodun olduğu yerde ikon görünecektir.

Adobe Photoshop CC 2019 20.0.4 Build 26077 64 Bit Full Türkçe İndir

Adobe Photoshop CC 2019 20.0.4 Türkçe ile hayalinizde ne varsa gerçeğe dönüştürebilirsiniz. Fotoğraflar, illüstrasyonlar ve 3B resimler oluşturup geliştirin. Web siteleri ve mobil uygulamalar tasarlayın. Videoları düzenleyin, gerçek tabloların simülasyonunu hazırlayın ve daha fazlasını keşfedin. Tüm fikirlerinizi gerçeğe dönüştürmek için ihtiyacınız olan her şey elinizin altında. Herkesin her şeyi tasarlayabilmesi için oluşturuldu: Posterlerden ambalajlara, basit bant reklamlardan muhteşem web sitelerine, unutulmaz logolardan göz alıcı simgelere kadar Photoshop, yaratıcı dünyanın ilerlemesini sağlıyor. Pratik araçlar ve kullanımı kolay şablonlar sayesinde, başlangıç düzeyindeki kullanıcılar bile muhteşem işler çıkarıyor. Çektiğiniz sadece bir fotoğraf değil. Nefes kesen bir sanat eseri. Günlük düzenlemelerden dönüştürmelere kadar grafik tasarım yazılımımız anlık görüntülerinizi birer sanat eserine dönüştürmeniz için profesyonel fotoğrafçılık araçlarından oluşan eksiksiz bir set sunuyor. Eski fotoğraflarınızı düzeltin, kırpın, nesneleri kaldırın, rötuşlayın ve onarın. Renkler ve efektlerle oynayarak sıradan görüntüleri sıra dışı resimlere dönüştürün.

Boyama fırçasının gücü: Özellikle illüstratörler için tasarlanan araçlarla hayal ettiğiniz her şeyi çizin ve boyayın. Mükemmel simetriye sahip desenlerle boyayın, kontur düzeltme ile daha güzel gözüken görünümler elde edin ve kusursuz dokular oluşturun. 1000'den fazla gerçek gibi hissettiren kurşun kalemler, kalemler, işaretleyiciler ve fırçalarla içerik oluşturun.

Adobe Photoshop CC 2019 20.0.4 Türkçe satın almak için aylık 50-60 TL arasında bir ücret ödemeniz gerekiyor Adobe Photoshop CC 2019 20.0.4 Türkçeyi sürekli kullanmanız gerekiyor ise satın alabilirsiniz aldığınız hizmet ödediğiniz bedele değecektir.

İndir (1.59GB)

Adobe Dreamweaver CC 2019 v19.2.0 Build 11274 64 Bit Türkçe indir

Adobe Dreamweaver CC 2019 v19.2.0 Build 11274 Türkçe ile her boyuttaki ekranda mükemmel görünen web siteleri ve web uygulamaları oluşturmanın, kodlamanın ve yayınlamanın en hızlı ve en kolay yollarını sunuyor. Tüm tarayıcı ve aygıtlar için mükemmel siteler oluşturun: HTML, CSS, JavaScript ve çok daha fazlasını destekleyen web tasarım yazılımı ile hemen hemen her yerde hızla web sayfaları oluşturun ve yayınlayın. Hızlı ve esnek kodlama: Basitleştirilmiş akıllı kodlama motoruyla dinamik web siteleri oluşturun, kodlayın ve yönetin. Kod ipuçlarına ulaşarak HTML, CSS ve diğer web standartlarını öğrenin ve düzenleyin. Görsel yardımları kullanarak hataları azaltın ve site geliştirme işlemlerine hız kazandırın.

Sitenizi daha az adımda işler duruma getirin: HTML e-postalar, Hakkında sayfaları, blog'lar, e-ticaret sayfaları, bültenler ve portföyler oluşturmak için özelleştirebileceğiniz başlangıç şablonlarıyla sitelerinizi daha hızlı kullanıma sunun. Kod renkleri ve görsel ipuçları, hızlı düzenlemeler ve güncellemeler için kodu kolayca okumanızı sağlar. Her aygıtta dinamik görüntüleme: Her boyuttaki ekrana adapte olan duyarlı web siteleri oluşturun. Sitelerinizi ve düzenlemelerinizi gerçek zamanlı olarak önizleyerek sayfalarınızın yayınlamadan önce istediğiniz şekilde görünmesini ve çalışmasını sağlayın.

Yeni versiyonlarda program başladığında başlangıç ekranı geliyor sürekli bu ekranla uğraşmak istemiyorsanız "Düzenle> Tercihler" adımlarını takip ederek "Genel" kategorisinde "Başlangıç Ekranını Göster" seçeneğini pasif yaparak başlangıç ekranını kapatabilirsiniz.

İndir (869.82MB)

Bootstrap Nedir? Nasıl Kullanılır?

Bootstrap Web tasarımcıların responsive tararımlar yapmak için en çok kullandığı CSS (sitil) kütüphanesidir. Bootstrap kütüphanesi sayesinde basit şeyler yapmak için boşa harcadığınız zaman artık size kalacak. HTML5 bilginiz kısıtlı olsa bile en çok kullanılan sitil - Class sınıflarını öğrenerek şık tasarıma sahip web siteleri tasarlayabileceksiniz üstelik projeleriniz çok kolay ve çabucak bitecek. Örneğin bloğumuz Bootstrap kullanılarak sıfırdan tasarlanmıştır. Bootstrap ile HTML sayfaları hazırlayabilirsiniz ancak veri gönderme alma sayfada script çalıştırma gibi işlemler için php, asp veya javascript gibi dilleride öğrenmeniz gerekmektedir. Kısaca Bootstrap sadece tasarım kısmıdır fonksiyon kısmı için tavsiye edeceğimiz dil PHP dir.

Bootstrap kullanarak tasarım yapabilmek için örnek şablonu kullanabilirsiniz.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

örnek şablonda Bootstrap kütüphanelerine ulaşan linkler mevcuttur dilerseniz sadece bu linkleri şuanki projenize  de ekleyebilirsiniz.

CSS Linki: head etiketleri arasına eklenecektir.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JavaScript Linkleri: Sayfanın tamamı yüklendikten sonra çalışması için </body> etiketinin hemen üstüne eklenecektir.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

XAMPP (Apache + MariaDB + PHP + Perl) indir

XAMPP Nedir?

XAMPP en popüler PHP geliştirme ortamıdır. Web tasarımı yaparken en sık başvuracağınız uygulamadır. Kendi bilgisayarınızda local sunucu oluşturup çalışmalarınızı yürütmeniz için geliştirilmiştir.

XAMPP tamamiyle ücretsiz, yüklenmesi kolay Apache dağıtımı olup MariaDB, PHP ve Perl içerir. XAMPP açık kaynak paketi inanılmaz kolaylıkta kurulabilmesi ve kullanılabilmesi için ayarlanmıştır herşey saniyeler içinde gerçekleşir.

İndir (124MB)

PHP ile MySQL'a Bağlanıp Sorgu Yapmak

PHP ile MySQL'a Bağlanıp Sorgulama yapabilirsiniz, veri tabanı size cevap olarak daha önceden eklenen veri var ise eklenen veriyi döndürecektir. İncelediğimiz örnekte üyeler tablosundan adı Alper içeren sonuçlar bulunup küçükten büyüğe sıralanacak. Burada içinde Alper içerenler sonuçların gelmesinin sebebi LIKE kullanmamız ingilizce de benzer anlamına gelir ve kelimelerin benzer olması aranılan kelimeyi içermesi demektir. Sonuç olarak Alper, Alperen , Alperhan gibi seçenekleri de içerecektir.

<?php 
// bağlantı bilgilerini çektik
include "baglanti.php";

// uyeler tablosundan ada göre sorgu yapıp kucukten buyuge sıraladık
$sorgu = "SELECT * FROM uyeler WHERE ad LIKE 'alper' ORDER BY id ASC";
// sorgu sonrası okunan her bilgi bir satırdır
$satir = mysqli_query($connect, $sorgu);
// satırdaki her sütunu dizi değişkeni olarak atadık ve ekrana yazdırdık
while ($sutun = mysqli_fetch_array($satir)){
echo $sutun[0]." ";
echo $sutun[1]." ";
echo $sutun[2]."</br>";
}
exit;

// veri tabanını durdurduk
mysqli_close($connect); 
?>

PHP ile MySQL'da Silme İşlemi Yapmak

PHP ile MySQL'da Silme İşlemi Yapabilmek için silinecek verinin benzersiz bir özellik ile çağrılması gerekir incelemesini yaptığımız örnekte silme işlemi benzersiz olan id ile yapılmaktadır her veri farklı bir id numarasına sahip olduğu için silinmek istenen veri kolayca bulunup silinebilmektedir.

<?php 
// bağlantı bilgilerini çektik
include "baglanti.php";
// id degikenine gelen değer varmı diye kontrol ettik
if(isset($_GET['id'])){
// formdan gelen verileri değişkenlere tanımladık mysqli_real_escape_string komutu ile sql injeksiyon olmaması için özel karakter temizliği yaptırdık
$id = mysqli_real_escape_string($connect, $_GET['id']);
}
// id değişkeni tanımlanmıssa veri silinmesine izin veriyor
if(isset($id)){
// uyeler tablosundan silinecek olan satır hazırlandı
$sorgu = "DELETE FROM uyeler WHERE id='".$id."'";
// istenen satır silindi
$sil = mysqli_query($connect, $sorgu);
echo "Satır silindi";
}

// veri tabanını durdurduk
mysqli_close($connect); 
?>

PHP ile MySQL'da Veri Güncellemesi Yapmak

PHP ile MySOL Veri tabanına daha önceden girilmiş olan bir veriyi güncelleyebilmek için veri tabanındaki veriyi bir özelliğinden çağırmak gerekir çağırdığımız bu özellik benzersiz olmalıdır birden fazla satırda bulunursa işlem tamamlanmayıp hata verecektir. Bizim incelediğimiz örnekte benzersiz olan id numarası kullanılmıştır bu nedenle sorun çıkmayacaktır ancak isim kullanılsaydı örneğin veri tabanında iki tane Ali ismi olabileceğinden hangisinin değiştirileceği bilinmediği için işlem tamamlanmayacaktı.

<?php 
// bağlantı bilgilerini çektik
include "baglanti.php";
// id degikenine gelen değer varmı diye kontrol ettik
if(isset($_GET['id'])){
// formdan gelen verileri değişkenlere tanımladık mysqli_real_escape_string komutu ile sql injeksiyon olmaması için özel karakter temizliği yaptırdık
$id = mysqli_real_escape_string($connect, $_GET['id']);
}
// ad degikenine gelen değer varmı diye kontrol ettik
if(isset($_GET['ad'])){
// formdan gelen verileri değişkenlere tanımladık mysqli_real_escape_string komutu ile sql injeksiyon olmaması için özel karakter temizliği yaptırdık
$ad = mysqli_real_escape_string($connect, $_GET['ad']);
}
// soyad degikenine gelen değer varmı diye kontrol ettik
if(isset($_GET['soyad'])){
// formdan gelen verileri değişkenlere tanımladık mysqli_real_escape_string komutu ile sql injeksiyon olmaması için özel karakter temizliği yaptırdık
$soyad = mysqli_real_escape_string($connect, $_GET['soyad']);
}
// id, ad ve soyad degişkenleri tanımlanmıssa veri guncellemesine izin veriyor
if(isset($id) and ($ad) and ($soyad)){
// uyeler tablosunda guncellenecek bilgi hazırlandı
$sorgu = "UPDATE uyeler SET ad='".$ad."',soyad='".$soyad."' WHERE id='".$id."'";
// hazırlanan bilgi veritabanına baglanılarak gönderldi
$BaglanVeGonder = mysqli_query($connect, $sorgu);
echo "Bilgi guncellemesi yapıldı";
}

// veri tabanını durdurduk
mysqli_close($connect); 
?>

PHP ile MySQL'e Veri Girişi Yapmak

İncelediğimiz örnekte GET metodu ile gönderilen ad ve soyad verileri önce bilginin gelip gelmemesi durumu için kontrol edildi eğer veri gelmişse Sql injeksiyon olmaması için mysqli_real_escape_string komutu ile özel karakterlerden temizlendi daha sonra sql sorgusu hazırlandı MySQL'e bağlanılıp bilgi girişi yapıldı. Dikkat ederseniz id değerine karşılık null değeri atanmış: null değer verilmediği otomatik oluşturulacağı(sırayla oluşturulur) anlamına gelmektedir.

<?php 
// bağlantı bilgilerini çektik
include "baglanti.php";
// ad degikenine gelen değer varmı diye kontrol ettik
if(isset($_GET['ad'])){
// formdan gelen verileri değişkenlere tanımladık mysqli_real_escape_string komutu ile sql injeksiyon olmaması için özel karakter temizliği yaptırdık
$ad = mysqli_real_escape_string($connect, $_GET['ad']);
}
// soyad degikenine gelen değer varmı diye kontrol ettik
if(isset($_GET['soyad'])){
// formdan gelen verileri değişkenlere tanımladık mysqli_real_escape_string komutu ile sql injeksiyon olmaması için özel karakter temizliği yaptırdık
$soyad = mysqli_real_escape_string($connect, $_GET['soyad']);
}
// ad ve soyad degişkenleri tanımlanmıssa veri girisi yapmasına izin veriyor
if(isset($ad) and ($soyad)){
// uyeler tablosuna girilecek bilgi hazırlandı
$sorgu = "INSERT INTO uyeler(id, ad, soyad) VALUES (NULL, '".$ad."','".$soyad."')";
// hazırlanan bilgi veritabanına baglanılarak gönderldi
$BaglanVeGonder = mysqli_query($connect, $sorgu);
echo "Bilgi girisi yapıldı";
}

// veri tabanını durdurduk
mysqli_close($connect); 
?>

Son olarak mysqli_close komutu ile veri tabanını durdurup işlemi bitiriyoruz.

PHP ile MYSQL Veri Tabanına Nasıl Bağlanılır

PHP ile MYSQL veri tabanına bağlanıp veri gönderip almak çok kolaydır ancak biz bu işlemi daha da kolaylaştırmak için bunu bir fonksiyona çevirip gereken her yerde basitçe kullanacağız. Öncelikle bir baglanti.php dosyası oluşturalım ve içerisine

<?php
// sabitleri tanımladık
define('kullanici','root');
define('sifre','');
define('host','localhost');
define('veritabani','test');

// veritabanına bağlandık varsa hatayı ekrana yazdırıp işlemi sonlandırdık
$connect=mysqli_connect(host,kullanici,sifre);
if(!$connect){
 die("Veritabanı bağlantı hatası".mysqli_error($connect));
 exit();
}
// veritabanındaki tabloyu seçtik eğer tabloyu seçemezsek hatayı ekrana yazdırıp sonlandırdık
$select=mysqli_select_db($connect,veritabani);
if(!$select){
 die("Veri tabanı tablo seçim hatası".mysqli_error($connect));
 exit();
}
// Türkçe karakter hatasını önlemek için kullanıyoruz
mysqli_query($connect,"SET NAMES UTF8");
?>

yazıp kaydedelim buradaki kullanici, sifre, host ve veritabani sabitlerinin hemen yanındaki değerleri kendi bilgileriniz ile değiştirip kaydedin. Artık baglanti.php dosyanızdaki komutlar ile MySQL e bağlanıp veri gönderip alabilirsiniz veritabanı ile bağlantı kurmak istediğiniz sayfada

// bağlantı bilgilerini çektik
include "baglanti.php";

komutu ile hazırladığımız sayfadaki kodları istediğiniz sayfaya çağırabilirsiniz bu çağırma işlemi sayesinde o kadar kodu tekrar tekrar yazmak zorunda kalmayacaksınız ayrıca veritabanı bilgilerinizde değişiklik yaparsanız baglanti.php dosyanızda yapacağınız tek değişiklik ile çalışmanıza devam edebileceksiniz.

baglanti.php sayfasını çağırdıktan sonra bağlantı fonksiyonunun kullanımına bir örnek

// uyeler tablosuna girilecek bilgi hazırlandı
$sorgu = "INSERT INTO uyeler(id, ad, soyad) VALUES (NULL, '".$ad."','".$soyad."')";
// hazırlanan bilgi veritabanına baglanılarak gönderldi
$BaglanVeGonder = mysqli_query($connect, $sorgu);

Yukarıdaki örnekte üyeler tablosuna ad ve soyad verisi hazırlanıp MySQL'e bağlanıp bilgi girişi yapılıyor.

Blogger'da CSS ile Resimleri Yeniden Boyutlandırma

Blogger'da makale yazarken kullandığınız resimlerin genişlik ve yükseklik değerleri sabit olduğunda yaptığımız tasarımlar günümüzde kullanılan tüm cihazlarda istediğimiz gibi görünmez. Mobil cihazların yaygınlaşması ile birlikte hem masaüstü hemde mobil cihazlarda düzgün görüntülenebilen responsive tasarımlar yaygınlaştı. Hazırladığımız CSS kodu ile blogunuzun yazı alanı içindeki resimleri otomatik olarak yeniden boyutlanabilir duruma getireceksiniz.

Kullandığımız kodun açıklaması şöyle: genişlik ve yükseklik otomatik, yani orijinal resmin boyutlarını kullan anlamına geliyor ancak kullandığımız max-height ve max-width değerleri ile maximum genişlik ve yükseklik değerlerini sınırlandırıyoruz. Genişlik yazı alanını aşamayacak yükseklik ise 300px'i aşamayacak. Kodları ihtiyacınıza göre değiştirebilirsiniz.

.post-body img {
 height:auto;
 max-height:300px;
 width: auto;
 max-width:100%;
 clear: both;
}

Mobil Tarayıcı Rengini Değiştirme Yöntemi

Mobil tasarımlar günümüzde site tasarımı yaparken ihmal edilmeyen bir özellik olarak karşımıza çıkıyor bu kadar önemli hale gelmesinin tek nedeni herkesin elinde bir akıllı telefon bulunması ve kullanım oranının çok yüksek olmasıdır. Bu durum o kadar ciddi bir hal aldı ki akıllı telefonlar yüzünden bilgisayar kullanımı önemli oranda azaldı. Biz site tasarımı yapan kişiler olarak sitelerimizin kullanıcıları etkilemesi için mobil tasarımlar ile ilgili olabildiğince iyi iş çıkartmak zorundayız. Bu makalemizde Mobil tarayıcı rengi değiştirmeyi gösteriyoruz.

Yapmamız gereken birkaç meta tagını <head></head> etiketleri arasına yazmak. Örnek kodlarda ki renkleri değiştirerek sitenize ekleyebilirsiniz.

<!-- Chrome, Firefox OS ve Opera -->
<meta content='#2E3D44' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#2E3D44' name='msapplication-navbutton-color'/>
<!-- iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='Black' name='apple-mobile-web-app-status-bar-style'/>

İOS (Iphone) telefonlar için renk ismi kullanmak zorundayız aşağıda bazı renkler ve isimleri verilmiştir.

Renk İsmi	HEX Kodu	Rengi
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370DB
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
PaleVioletRed	#DB7093
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
DarkOrange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

HTML5 Video Embed Kodu Sitenizde MP4 OGG MKV ve Avi Oynatın

HTML5 kodlarını kullanarak sitenizde kolayca video oynatabilirsiniz desteklenen video formatları MP4, OGG ve MKV olsa da avi uzantılı videoların uzantısını mkv olarak değiştirmeniz halinde mkv oynatmak için kullanılan kod ile avi uzantılı dosyalar da oynatabilmektedir ancak videolarda gömülü olan bazı ses dosyaları avi dosyasının bu şekilde oynatılmasına engel olmaktadır.

MP4 Video Embed Kodu:

<video width="100%" autoplay controls>
  <source src="video.mp4" type="video/mp4">
</video>

OGG Video Embed Kodu:

<video width="100%" autoplay controls>
  <source src="video.ogg" type="video/ogg">
</video>

MKV Video Embed Kodu:

<video width="100%" src="video.mkv" type="video/x-matroska" codecs="theora, vorbis" autoplay controls onerror="failed(event)"></video>