Articles by "web araçları"
web araçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
https
 İnternette sunucular ve son kullanıcılar arasında bilgilerin "başkaları tarafından" okunamayacak şekilde nasıl aktarılacağına dair kurallar ve yöntemleri düzenleyen bir sistemdir.
Özellikle internet üzerinden yürütülen bankacılık işlemleri için banka siteleriyle bağlantı kurulduğunda ya da kredi kartıyla ödeme yapılan sistemlerde kredi kartı bilgileriniz doğrulanırken, tarayıcınızdaki adres çubuğunun başında "http" yerine "https" yazdığını görürsünüz. Başında "https" yazılan adreslerle bağlantı kurduğunuzda, bilgiler sadece karşı taraf ve sizin tarafınızdan okunabilecek şekilde şifrelenir. "http" ile yapılan bilgi alışverişinde ise bir şifreleme yoktur, başka kişiler de sizin aldığınız ve verdiğiniz bilgilere ulaşabilir. "https", bilgi güvenliği gereken zamanlarda uygulanan bir güvenli iletişim protokolüdür.
Yani Arkadaşlar Bir Tür İnter Tarayıcısının Virüs Etiketi Diyebiliriz.

WebteGez'den UYARI .. ;

İnternetten Alışveriş Yaparken Şifrenizi Girdiğiniz Sayfanın Üst Tarafındaki URL Kısmının "HttpS" İle Başlamasına Dikkat Edin.
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..


 CSS artık web tasarımla uğraşan herkesin ilgi alanına giriyor. Hatta web tasarımla uğraşmayan, benim gibi bir bloga sahip olan veya internet ile haşır neşir olan insanların bile günlük kullandıkları bir yapı haline geldi. WordPress temaları sanırım buna en güzel örnek olacaktır. internette birçok kaynak bulunmasına rağmen CSS’i tam anlamı ile bilmek pek mümkün olmuyor. Çünkü çok farklı teknikler gerebiliyor bazen. Bu farklı tekniklerin dışında kullanılan standart yapı içinse internette birçok kullanışlı araç yer alıyor. Form araçlarından, seçicilere onda katman yerleşimlerine kadar işe yarayadığını düşündüğüm araçları yazının devamında göreceğiz.
Alan ve Alan Yerleşim Araçları
Oluşturduğumuz alanlar bazen istediğimiz gibi olmaz. Ya ölçülerinde hata yaparız ya da float’ı kullanıdığımız yaslamalarda sorun çıkabiliyor karşımıza. Bu başlık altında zorlanmadan alan oluşturma ve yerleşimlerinin kolayca yapılmasını sağlayan servislere göz atacağız.

builder.yaml.de: Bir sitede ya da WordPress’e yakınsanız oradan örnek vereyim bir temada mutlaka header(üst kısım), sidebar(yan), content(içerik), footer(alt) kısımlar bulunur. Bu servis bütün bunları istediğimiz ölçüde ve istediğimiz hizalama ile sitemizin iskeletini oluşturmamıza olanak sağlıyor. Ayrıca servisi açtığımızda karşımıza gelen küçük pencerede yer alan “add elements” sekmesinde başlık, paragraf gibi nesneleri ekleyerek sitemizin kafamızda canlandırdığımız kısmını görmemizi de sağlıyor. Benim kesinlikle en sık başvurduğum servislerden birisidir.

Layout-o-Matic: Bu servisde Yaml’in yaptığı işlevi görüyor ancak onun kadar esneklik sağladığını söyleyemem. Yaml’den artısı ise girdiğimiz değerler karşısında ayarladığımız taslağımızı “download” butonuna bastığımız taktirde bilgisayarımıza indirmek oluyor.

CSS Creator: Yine alan oluşturabiliyor ve yerleşimini yapabiliyoruz bu servis aracılığıyla. Diğerlerinden farkı ise istediğimiz bölüme renk paleti sayesinde renk atayabilmek oluyor.

Free CSS Template Code Generator: Burada ise yine değerlerini girdiğimiz taslağı “generate” butonuna basarak önizleme yapabiliyoruz. Hazır olarak kodlarını da servis bize sunuyor.

CSS Source Ordered: istediğimiz kolon sayısına sahip taslaklar oluşturmak için birebir. Ayrıca istediğimiz sayıda footer bölgesi de ayırabiliyoruz.

QrOne CSS Desinger: Servisi ayrıcalıklı kılan özelliği diğerlerinde mevcut olmayan margin, padding, z-index(katman), yazı tipi ve position değerlerinin atanabilme yeteneğine sahip olması. Yaml’den sonra ikinci tercihim ;)

Form Araçları

Bazen formları daha değişik tasarlamak isteriz. Ancak tasarlasak da kodlaması işkenceye dönüşebilir. Formlar için de araçlar mevcut.

JotForm: Bu servisin kullanımı ile ilgili daha önce şurada yazdığım makaleden dolayı tekrar açıklama yapmayı lüzumlu görmüyorum.
Accessible form builder: Div ve tablo seçeneklerine göre form hazırlamamıza imkan sağlayan bir servis.

Free CSS Form Layout Code Generator: Kutucuklara istediğiniz değerleri girdikten sonra formumuzun kodunu veren güzel bir servis.

Yazı Tipi Araçları
CSS Builder: Yazı tipi, rengi, dekoratifliği ve daha birçok seçeneğini isteğimize göre işaretleyebileceğimiz kullanışlı bir servis. Aynı zamanda kutu veya çerçeve de oluşturmamıza olanak sağlıyor. Ve son özelliği; liste biçiminin de ayarlanabildiği bir servis. Yine tercihlerimden birisidir kendileri :)

korhon Typeviewer: Yazı biçimlendirmelerini yapabileceğimiz güzel bir servis. Font, Word ve Text etiketleri için istediğimiz biçimlendirmeyi verebiliyoruz. Sitede bulunan kutucuklara istediğimiz değerleri girebildiğimiz gibi her kutucuğun üstünde yazan etiketin üzerine fare ile gelip beklediğimizde de girilebilecek değerler Dreamweaver gibi hazır olarak sunuluyor.

CSS Font and Text Style Wizard: Adı üzerinde bir sihirbazdır kendisi. Her etki etiketi için hazır değerler yer alıyor sitede. Hazır değerlere tıkladığımız zaman da sayfanın alt kısmında o etkinin ön izlemesini yapabiliyoruz. Ayrıca yazı ile resim hizalamasının yapılması da servisi ayrıcalıklı kılıyor.

Typetester: Kullandığı Ajax teknolojisi sayesinde font etkilerini listeden seçip eş zamanlı olarak alt kısımda ön izlemesini de yapabiliyoruz. Tercihlerim arasında.

Navigasyon Menü Araçları
CSS Menu Generator: Servis bünyesinde birçok hazır menüyü barındırıyor. Hem dikey hem de yatay olan menüleri “customize” linkine tıklayarak özelleştirebiliyoruz. Özelleştirme derken menü elementlerinin isimlerini kendimiz girebiliyoruz. En son işlem olarak da hazırlanan dosyayı bilgisayarımıza indirebiliyoruz.

Colly Logic CSS Rollover Generator: Kenar boşluğu, arkaplan, genişlik, yükseklik, yazı tipi ve büyüklüğü ve daha birçok değeri kendimizin seçmesini sağlayan kullanışlı bir servis. Değerleri verdikten sonra bize oluşturduğumuz menünün kodlarını teslim ediyor.

Webmaster Toolkit: Bu sayfada da birkaç biçimde dikey menüler mevcut. Bunlardan istediğimizi seçerek “proceed” butonuna basıyor ve kendi isteğimize göre biçimini ayarlayabiliyoruz. Renk, büyüklük, kenar boşluğu ve diğer temel değerleri kullanıcının ayarlamasına imkan veriyor. Hoş bir servis olduğunu söyleyebilirim.

List-O-Matic: Birkaç adımda istediğimiz gibi bir menüye sahip olmamızı sağlayan bir menü sihirbazı. Kullanımı da oldukça basit olan bu servis kendi tercihlerim arasında yer alıyor.

Optimizasyon ve Düzenleme Araçları
CSS Compressor: Mevcut CSS dosyamızın içindeki kodları kopyala yapıştır yöntemi ile sitedeki “insert CSS code” bölümüne girdiğimiz taktirde CSS dosyamızı sıkıştırıyor. Aradaki yorumları kaldırabilme özelliğine de sahip.

Tabifer CSS and HTML code Beautifier :D üzensiz olarak girilen CSS veya HTML kodlarını standartlara uygun bir biçimde düzenleyerek kullanıcıya sunuyor. Yine tercihlerim arasında olan bir servis.

Online CSS Optimiser: Servis yine CSS dosyamızı optimize ederek daha hızlı okunmasını sağlıyor. Diğer servislerden farkı ise bilgisayarımızda bulunan bir dosyayı yükleyerek optimize edebildiğimiz gibi internet üzerindeki herhangibir linkdeki CSS dosyasını da direkt alıp optimize edebilmesi.

Diğer Araçlar
CSS Rounded Box Generator: Oval köşeli alanlar ya da kutular web2.0 teriminin kullanılması ile birlikte yükselişe geçti. Şu an birçok sitede görmek de mümkün. Fakat hem tasarlaması hem de kodlaması bazen zaman alabiliyor. Bu servis sayesinde ne tasarım ne de kodlama için vakit kaybına uğramadan zahmetsizce oval köşeli alanlar oluşturabiliyoruz. Yine tercihlerim arasında olan bir servis.

Page Scanner Tool: istediğiniz bir site adresini servise girerek CSS yapısında kullanılan etiketlere bakabiliyoruz. Hangi tag kaç defa kullanılmış, kapatılmış mı yoksa hatalı mı olduğunu görebiliyoruz çıkan tablo sayesinde. Hataları azaltacağını düşündüğüm bir servis.

CSS Color Chart: Renk paletleri ve decimal kodlarını barındıran kullanışlı bir site. Eğer CSS’i Not Defteri gibi hazır etiketleri barındırmayan bir program ile düzenliyorsanız renkler çoğu zaman çile olmuştur. Fakat bu servis bu boşluğu fazlasıyla dolduruyor.
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
 Formlar da web 2.0′nin değişim sürecinde büyük rol oynamış gizli kahramanlardandır aslında. internette her yerde karşımıza çıkıyor onlar. iletişim sayfalarında, yorum sayfalarında, ziyaretçi defterlerinde, forumlarda ve daha aklınıza gelebilcek binlerce yerde mevcuttur onlar. Görevleri ise ziyaretçiden aldığı bilgiyi gerek site yöneticisine gerekse sitedeki diğer insanlara duyurmak, iletmektir. Eğer web işi ile uğraşıyorsanız bir de bu formları hazırlamakla meşgul olmak durumu söz konusudur. Bazen duvara tırmandırırlar, bazen hemen oluverirler :) Bu yazıda tanıtacağım servis aslında form oluşturmanın hiç de zor olmadığını bizlere gösteriyor. Hatta göstermiyor direkt formu paket yapıyor :D

Jot Form adındaki bu site ajax’ı bolca kullanmış, web programcılara ve belki de daha amatör kişilere (mesela ben(:) kolaylık sağlamak için kurulmuş. Sitede form oluştururken kullanabileceğimiz bütün nesneler yer alıyor. Siteye ilk girdiğinizde sol tarafta oluşturmak istediğiniz formun önizlemesi mevcut. Sağ tarafta ise “Toolbox” yazan kısımda; form öğeleri, “Power Tools” yazan kısımda form öğelerini güçlendirmek için kullandığımız resim, renklendirme ve buna benzer şekilmatik zımbırtıları, html kodlarını, şifre kutusunu, doğum günü öğesini koyabiliyoruz. “Payment Tools” kısmından eğer bir alışveriş sitesi için form ya da ona benzer bir form oluşturacaksanız altına ödeme şekli logosunu yerleştirebiliyorsunuz. Son olarak sol kısımda “Properties” kısmından eklediğiniz form öğesinin özelliklerini, değerlerini girebiliyorsunuz ki bu servisin en hoş tarafı da bu olsa gerek. Sürükle bırak, sürüklemeden bırak gibi yöntemler çalışıyor :D . Sol tarafa eklediğiniz öğe doğal olarak ecnebice yazacağı için texte yani formda ecnebice görünen o yazıya tıklayınca o kısım aktif oluyor ve size düzeltme imkanı veriyor. Türkçe karakteri şükürler olsun ki destekliyor :)

Sitenin form ile ilgili özellikleri bu kadar olsa da kullanılabilirlikle ilgili detaylar unutulmamış. “My Form” kısmından daha önce yapmış olduğunuz formlara erişebiliyorsunuz. Oluşturduğunuz formu diğer insanlarla paylaşma imkanı da veriyor. Böylece farklı form fikirleri de üretilmiş oluyor. Ayrıca sitede dersler de yer alıyor. Bir forum ve bloga da sahip. Form oluşturmak için çırpınanlara asprin niyetine gelebilcek bir servis. Eeee, daha ne olsun?

Servise ışınlan
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Blogger için Bu yazıya nereden ulaştın? eklentisi! Blogger derslerimize ara vermeden devam ediyoruz. Bu sefer anlatacağım eklenti gerçekten çok güzel bir eklenti diye düşünüyorum. Aşırı derecede bir yararı olmasa da, en azından temanızı özelleştirebilmeniz bakımından yararlı bir eklenti diye düşünüyorum. Eklentiden kısaca bahsetmek gerekir ise; Eklenti sayesinde, yazılarınızın üst kısmında, yazınızın bulunduğu kategori yer alıyor. Yani; yazınıza hangi kategoriden ulaşıldı ise, o kategori yer alıyor. Herneyse, eklentinin anlatımına geçeyim.Ayrıca, adımlara başlamadan önce lütfen, temanızın yanında yer alan Widget Şablonlarını Genişlet seçeneğinin yanındaki kutucuğu işaretlemeyi unutmayalım.

 Öncelikle aşağıdaki kodu buluyoruz;

]]></b:skin>

Yukarıdaki koddan önce aşağıdaki kodları ekliyoruz;


.breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #e6e4e3;}

Daha sonra ise aşağıdaki kodu buluyoruz;

<b:include data='top' name='status-message'/>

Yukarıdaki koddan silip, yukarıdaki kod yerine aşağıdaki kodları ekliyoruz;

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/

Daha sonra ise son olarak aşağıdaki kodu buluyoruz;

<b:includable id='main' var='top'>
Yukarıdaki kodu silip, yukarıdaki kod yerine aşağıdaki kodları ekliyoruz;


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Etiketi Yok
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Anasayfa</a> » Arşivde Bulunuyorsun! <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Anasayfa</a> » Blogdaki Bütün Yazıları Görüntülüyorsun!
<b:else/>
<a expr:href='data:blog.homepageUrl'>Anasayfa</a> » Etiketlenmiş Yazı/ları Görüntülüyorsun! <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

Blogger için gelişmiş önceki ve sonraki yazı eklentisiBlogger tasarım çalışmalarımızdan tekrar merhabalar. Daha önce, WordPress kullanan ziyaretçilerimiz için paylaştığımız ‘gelişmiş önceki ve sonraki yazı eklentisi’ne benzer eklentinin bu defa Blogger’da nasıl kurulacağından bahsetmek istiyorum. Bildiğiniz gibi önceki ve sonraki yazı bağlantıları yerine farklı ifadeler ya da resim koyabiliyorduk. Bugün anlatacağım eklenti sayesinde ise, bu bağlantıların blog sayfamızın sağ ve sol köşelerine yerleştirilecek oklarla kullanılmasını sağlıyoruz. Böylece blogumuza hem daha etkileyici bir görünüm katmış hem de yazılar arasındaki geçişleri daha belirgin hale getirmiş oluyoruz.

Kurulum için öncelikle klasik görünümdeki Blogger panelimizin Tasarım > Html’yi Düzenlebölümünü açıyor ve ‘Widget Şablonlarını Genişlet’ kutucuğunu aktif ediyoruz. İlk olarak aşağıdaki kodu bulup,
]></b:skin>
Hemen üzerine aşağıdaki kodları ekliyoruz.



a.prev {
position: fixed;
display: block;
right:120px;
top:360px;
width: 13px;
height: 34px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9EOeI3zCBUWv6UsJ941yJZw3zA5IY4YvaPTXW1Cts4uPnievKv0JRW4-zWxZBE63WQmJG7BqjMveaFdaf2Dv6gEFeMGOI8WD5-YEb_PLEHrzGaiXw05-TEmce1Bqmv2qQ3BwXZu4HfA/s1600/nextArr.png) 0px -34px no-repeat transparent;
opacity: 1;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}
a.prev:hover {
background-position: 0px -34px;
}
a.next {
position: fixed;
display: block;
left:120px;
top:360px;
width: 13px;
height: 34px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmPqe3VOEHtxc34gcux76HTL3xQsgchANvdQpHDrp8CBcPF6ndy8v2VlBMX_RFYypYJm3Vq3yQsGuiz4wC-D9P7ZBmLJFSA0BghBpQBCsXEbYU52U_4RO6cj09p26lyw5XfwXLZeyCaXQ/s1600/prevArr.png) 0px -34px no-repeat transparent;
opacity: 1;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}
a.next:hover {
background-position: 0px -34px;
}

Daha sonra ‘Ctrl + F’ tuşlarına basarak sayfada arama yapıyor ve aşağıdaki kodu buluyoruz.

<b:includable id='nextprev'>

Bulduğumuz kodun başından itibaren, karşımıza ilk çıkacak



</b:includable>

kodunun hemen sonuna kadar siliyor ve onların silindiğin yere aşağıdaki kodu ekliyoruz.

Önizlemede bir sorun yaşanmıyorsa şablonumuzu kaydediyoruz. Böylece eklentimiz yüklenmiş oldu. Herhangi bir yazınıza tıklayarak eklentiyi inceleyebilirsiniz.


En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..
Blogger için WordPressdeki gibi yazar girişi eklentisi! Bir çok kişi, Blogger‘da oluşturduğu blogun neredeyse tamamını WordPress‘e benzetmek istiyor. Dolayısı ile, bu yüzden olsa gerek, Blogger‘a çevirilmiş bir çok WordPress eklentisi mevcut. Herneyse, gelelim konumuza; Sizlerle paylaşmak istediğim bu eklenti blogunuz için Yazar Girişi bölümü oluşturuyor. İşleyiş bakımından ise elbette çok basit, E-Posta ve Şifrenizi yazarak blogger panelinize giriş yapıyorsunuz. Ne kadar gerek var bilinmez, fakat bir çok kişinin kullanmak isteyebileceğini düşünmekteyim. O yüzden paylaşmak istiyorum. Tek yapmanız gereken şey, aşağıdaki kodları blogunuzda istediğiniz bir yere eklemek.


<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Email Adresi: <br/><input id="Email" tabindex="1" value="" name="Email" size="25" type="text"/></label></div><div><label for="Passwd"> Şifre: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Şifremi Unuttum?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="25" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Giriş Yap" name="submit" type="submit"/></form>

En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

googlewebfonts Google Web Fonts ve Kullanımı
Bu paylaşımımda sizlere Google‘ın webmasterlar için büyük kolaylık sağlayan hizmetlerinden birini anlatmak istiyorum , Hizmetin adı GoogleWebFonts
Web tasarımıyla uğraşan arkadaşlar için çok faydalı olucağını düşündüğüm bu kaynak neye benziyor diye sorarsanız, size Cufon ve sIFR uygulamalarını örnek gösterebilirim.Bildiğimiz gibi artık websitelerinin konu başlıkları çok güzel şekillerde bizlere sunuluyor.Örnek
Cufon
cufon Google Web Fonts ve Kullanımı
sIFR
sIFR Google Web Fonts ve Kullanımı
Gördüğünüz gibi bildiğimiz font gibi durmuyor.Cufon ve sIFR’ın özelliği jquery özelliklerini kullanarak konu başlıklarımızı bizlere img şeklinde göstermesi.Bundan dolayıda kaliteli bir görüntüyle karşılaşıyoruz.Bundan önce bende bazı projelerimde Cufon kullanmıştım fakat GoogleWebFonts’u kullandıktan sonra .js dosyaları ve bir sürü ayarla uğraşmadan siteme ekleyeceğim bir satır kod ile başlıklarımı ziyaretçilere daha güzel şekilde sunabileceğimi farkettim.
GoogleWebFonts şu anda 198 farklı font şekli ile kullanıcılara büyük bir kolaylık sağlıyor,ve bu rakam gün ve gün artıyor.
Ben blogumun başlıklarında GoogleWebFonts arşivinden ‘Bevan’,serif; adlı fontu kullandım ve görünüşü
title Google Web Fonts ve Kullanımı
Sizde sitenizde bu özelliği kullanmak isterseniz yapmanız gereken 2 şey var.
Googlewebfonts’dan hoşunuza giden fontu seçip bunu sitemize eklemek.Bunun için GoogleWebFonts adresine girip istediğimiz fontun yanındaki Quick-Use adlı bölüme basıyoruz,Daha sonra açılan sayfanın alt kısmında bize iki tane kod veriyor.Bu kodlardan birincisi
<strong><head></head</strong>> tagları arasına ekliyoruz , Diğeri ise kullanmak istediğimiz bölümün <strong>css</strong>’inde tanımlama yapmak için gerekli olan koddur.
1font-family'Istok Web'sans-serif;
Örnek Kullanım :
1h1 font-family: ‘Metrophobic’, Arialseriffont-weight400; }
Gördüğünüz gibi kullanımı oldukça basit.Sizde sitenizdeki sıkıcı yazı şekillerinden sıkıldıysanız GoogleWebFonts tam size göre…