3 Mayıs 2013 Cuma

Site Kodlarının Uygun Standartta Yapılması

Tabi sitenizin yapısının xhtml ve css standartlarına uygun bir şekilde hazırlanması gerekir.Çünki arama botları kodlarda hatalar varsa okumadan geçebilir.Bunun için kodlarınız da hata olmamalı.Söyleyeceğim başka bir olay da şudur:wordpress’in alt yapısı , yazılımı ve kriterlerinin Google ‘a uygun olması sebebiyle; google dizinlerinde ,diğer benzeri sistemlere göre çok daha hızlı ilerlemektedir.Onun için wordpress kullanmak bir avantaj mıdır? diye sorarsanız cevap:Evet!.Heryer de avantaj sağlar.Mesela seo çalıştırması yaptırmak isteseniz sırf site alt yapısı wordpress olduğu için indirim kazanırsınız.
Kodlarınız da hata olup olmadığını www.sitebilgi.net‘te arattırdıktan sonra
site detaylarında çıkan sayfada sol üst köşede ki linkten hatalarınızı kontrol ederek düzeltebilirsiniz.
Ayrıca sitenizde malware veya spam olmaması gerekir.Eğer sitenizde virüs falan bulunursa indexlenmeyi unutabilirsiniz.Bu kontrolü de buradan yapabilirsiniz.
Aslında wordpress avantajlarını anlatmakla bitmez.Yazılım alt yapınız wordpress olduktan sonra tema seçimini de seo uyumlu bir tema seçerseniz ,responsive tema olması da tavsiyemdir geriye özgün içerik,güncelleme ve iyi bir SEO eklentisi kalır ki değmeyin keyfinize.Aslında Author Bio eklentisini de kurmakta fayda var.Author Bio eklentisi ile wordpress alt yapısı ile logonuzu da kullanarak 3 ve 4. sıradaysanız da çabucak dikkat çekebilir ve müşterilerinizi sitenize çekebilirsiniz.Tabi bu dediklerim için profesyonel birisinden yardım alabilirsiniz.Örnek olarak kendi kullandığım bir örneği sizlerle paylaşabilirim.Google’da “Web sitesini üst sıralara çıkarmak” kelimesini arayarak sıralama da benimde resmimi görebilirsiniz.Bu şekilde kendi logonuzu koyarak belirli bir güven elde edebilirsiniz.

www.tugbakulekci.com.tr

Google’a Site URL’si Eklemek

Ayrıca google’in içine sitenizin URL’sini eklemeniz de sitenizin yararına olacaktır.
Nasıl eklerim derseniz şu linki kullanabilirsiniz.www.google.com/addurl.html

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

Arama Motorlarına Ping Çekmek

Bu bölümde size arama motorlarına site haritasının nasıl yollanacağını anlatacağım.Yani Arama motorlarının sizin site haritanızı hemen kayıt altına almalarını….Site haritaları, sitenizde yer alan tüm sayfaların listelendiği XML formatında bir listedir. Site haritası oluşturmak, tüm sayfalarınızın adreslerini ve sizin için olan değerlerini Google’a bildirmeniz demektir. Öncelikle sayfanız yeni doğmuş bir bebek gibi ise önce kayıt olup, google nufus cüzdanı almak için şu adrese uğrayıp sitenizi google’a haber verin.
Ayrıca web sitesini google da öne çıkarmak için bir kaç ipucu vereceğim.Şunu da belirtmek isterim; bu makalem Türkiye aramalarında önemli bir yere sahiptir.Çünkü özgün,kapsamlı ve 2 yıldır sürekli eklentiler yapmaktayım.Değerini bilin:)

1-Arama Motorlarına Ping Çekmek

Eğer site haritanız yoksa şu adresten site haritanız ile ilgili dosyalar oluşturun ve sitemap.xml,sitemap.html,ror.xml,sitemap.xml.gz,urllist.txt uzantılı bu dosyaları sitenizin root kısmına yükleyin.
Eğer sitenizin haritası varsa uzantıyı şöyle yapınız.Örneğinhttp://www.tugbakulekci.com.tr/sitemap.xml böyle yaptıktan sonra,

.
Google botlarına ping çekmek için:
http://www.google.com/webmasters/sitemaps/ping?sitemap=http://www.tugbakulekci.com.tr/sitemap.xml
Bing.Com botlarına ping çekmek için
http://www.bing.com/webmaster/ping.aspxsiteMap=http://www.tugbakulekci.com.tr/sitemap.xml
Ask.Com Arama motoru botlarına ping çekmek için
http://submissions.ask.com/ping?sitemap=http://www.tugbakulekci.com.tr/sitemap.xml

Yukarıdaki adresleri kopyalarken yalnız ‘muratozsay.com‘ yazan yere kendi site adresinizi yazın eğer siteniz yeni ise sondaki ‘/sitemap.xml‘ yerini silin ve yollayın, önünüze zaten bilgilendirme ekranı gelecektir.
03/10/2012 tarihinden itibaren Ask sitemap linki güncellenmiştir.Yukarı da Ask linki şimdilik aktif değil.
Daha kısa bir yoldan üçü içinde yapmak isterseniz http://www.fuub.net/sitemap-ping/adresinde linkinize bakabilirsiniz.
Eğer site haritanız var ise siteye her içerik ekledikten sonra bu işlemi yapın ki botlar eklediğiniz içeriği hemen görebilsin.Eğer site haritanız yok ise oluşturmak için biraz araştırma yapın.Önümüzdeki zamanlar da bunun için bir makale yaınlayabilirim.Neyse konumuza devam edelim.Google şuanda yaygın olarak 3 adet bot kullanmaktadır.
Bu botlar nedir?Botlar sitemize ne yaparlar?Örümcekler sitemizde gezerken nelere dikkat ederler?Google’un kullandığı bu 3 bot şunlardır;
Adsense Botu, FreshBot ve DeepCrawl bunlar genellikle kullandığı botlardır.
Daha kullandığı birçok arama indexlemesi için ve ayrı uygulamalar için botları vardır.
Bu botların çalışma prensipleri sitemize bir şekilde ulaşırlar bu ya bir referans link ya da bizim Google’a sitemizden ping atmamız yolu ile olabilir.Adsense bot çok fazla sitede bulunmaz.
Çünkü çoğu site Adsense geliri sağlamaz ve sağlamak durumunda da değillerdir. Bu gibi durumlarda Adsense programına katılan siteler olursa onları sitelerini kontrol ederler.
Reklam kodunda herhangi bir sorun var mı? Reklam ortağı kodla oynamış mı?
Aldatmaca var mı? gibi soruların cevaplarını ararlar…
Freshbot genellikle Google’a yeni kayıt edilen web sitelerini ve ya yeni adreslerin içerisine gider ve bu sitelerin içeriklerini Google veri tabanına kopyalar.
Bu işlemler genellikle yeni sitelerde yapılır.
Günlük olarak ya da haftalık olarak web sitemizi ziyaret ederler ve yeni haberler ya da linkler varsa onları alırlar.
DeepCrawl genellikle uzun süredir Google veri tabanı içerisinde bulunan eski sitelerin alt linklerine inerek derinlerdeki bilgileri kayıt etmek için kullanılır.
Bu bot sayesinde web sitemizin derinlerde bulunan linklerimiz çoğu zaman açığa çıkabiliyor. Ayda bir sitemizi ziyaret ederler.

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

4 Nisan 2013 Perşembe

Chick-lit Nedir? (Çıtır Edebiyatı)

Chick-Lit Nedir?

Alışverişkolik bayanları, romantik komedi türünde edebiyata taşıyan bu akımın öncü yazarının Sophie Kinsella olduğunu biliyor muydunuz. Bu tür İngiliz edebiyatın da “Chick Lit” yani “Çıtır Edebiyatı” olarak adlandırılmaktadır. Bayanlarla ilgili tüm konuları esprili bir anlatımla kaleme alınan, okuyucular tarafından keyifli bir türdür.

Modern çağın en etkin alışveriş şekli olan E-ticaret sitelerine olan ilgi ise, bayanların alışveriş tutkusunu kitaplara kadar taşımaktadır.

SİZİN DE DÜŞÜK MALİYETLERLE BİR E-TİCARET SİTENİZ OLSUN İSTİYORSANIZ…

www.tugbakulekci.com.tr/e-ticaret-sitesi-yaptirmak-istiyorum.html

28 Mart 2013 Perşembe

Yazar Murat ÖZŞAY ile TubiqueWebButique 'nin Web Masterı Tuğba KÜLEKÇİ 'nin Röportajı

http://www.migmedya.com/yazarlar/murat-ozsay/5771-seo-nedir-roportaj.html

YAZARLAR - Murat ÖZŞAY

Seo Nedir ? (Röportaj)

Murat ÖZŞAY

murat@muratozsay.com

Biz bilişimciler biliriz ki yaptığınız bir web sitesi ne kadar güzel olursa olsun, Google da çıkmadığı sürece ( ki artık Yandex gibi güçlü bir rakipleri var ) yeterince ziyaret edilmediği sürece ; sayfanızın güzel olması çokta bir anlam ifade etmeyecektir.

Peki Sitenizin Google da ve diğer arama motorlarında çıkması için neler yapmalı? Bu konuda Web Tasarım Eğitmeni ,Google Optimizasyon ve Sosyal Medya Danışmanı Sevgili Tuğba KÜLEKÇİ ile Kısa bir söyleşi Yaptık. Umarım Sizlere ve Tüm Web Tasarımcısı arkadaşlara faydası olur.

- Merhaba Tuğba Hanım. Herkesin merak ettiği Soruyu soracağım size. SEO Nedir?

-SEO ( Search Engine Optimization ) diğer bir deyişle Arama Motoru Optimizasyonu, web sitenizin Google,Yandex, Yahoo, Bing gibi arama motorlarında ilk sayfalarda ve üst sıralarda bulunması için gerekli olan ve teknik bilgi – birikim ve profesyonellik gerektiren bir işlemdir. SEO için şunları diyebilirim: SEO bir web sitesi için altın değerindedir çünkü SEO sayesinde site arama motorlarında daha üstlerde yer alır ve daha çok ziyaretçisi olur.Ziyaretçi web sitesinin velinimetidir..

-Peki, Neden SEO Yaptırmalı web sitesi sahipleri?

-Herhangi bir ürünün yâda hizmetin tanıtımı için en önemli tanıtım mecralarından birisi haline gelen internet ortamında potansiyel müşteriler aradıkları ürünü yâda hizmeti ilk olarak arama motorlarında arama işlemi gerçekleştirerek bulmayı tercih ediyorlar. Yapılan araştırmalar sonucunda kullanıcıların ilk sayfalarda çıkan sonuçları atlayıp çok arka sayfalardaki sonuçlara göre ürünlerini tercih etme oranları çok düşük seviyelerdedir. Bu nedenle ürününüzü veya hizmetinizi tanıttığınız web sitenizin arama motoru sonuçlarında google birinci sayfa ve üst sıralarda yer alması hayati önem arz etmektedir. O Yüzden ben ve Ekibim müşterilerimize bu SEO Optimizasyon hizmetini en profesyonel yaklaşımla, olabilecek en uygun fiyatlarla sunuyor.

-Kısaca SEO nasıl Yapılır?

-Sitenizin mutlaka bir meta tag ı olmalıdır.(Blogger bloglar için gerekli değil).Arama motorlarında üstlerde çıkmak istediğiniz kelimeleri sitenizin üst taraflarında bulundurun.Arama motorları bir sayfada üst taraftaki kelimelere alt taraftaki kelimelerden daha çok önem verir. Sitenizi asp, php vs. ile kodlamak yerine html kullanın veya önceden kodlanmış sitelerinizde sayfa uzantısını .html veya .htm ye çevirecek araçları bulup işlemi gerçekleştirin..(Blogger blogcular bu yönden çok şansı..). Sitenizde mutlaka ama mutlaka robot.txt dosyası olması lazım.(Blogger blogcular bu konuda da şanslılar. Blogger bloglarda robot.txt dosyası otomatik oluşturuluyor..) Mutlaka sitenizin bir site haritası bulunmalı.

Siteniz mutlaka Google Web Yöneticisi Araçları-Google Webmaster Tools a kayıtlı olmalı ve buraya ayrıca mutlaka site haritanızıda kayıt etmelisiniz..Bu sayede daha önceden indexlenmemiş yazılarınızı Google a indexletebilirsiniz ve yeni yazılarınızda daha hızlı indexlenir. Site dolaşımınız düzenli olmalıdır.Sitenizin görünümü ve sitenizde dolaşım iyi olmalıdır. Siteniz yeni web standartlarına uygun olmalıdır.W3C ile yazılmış bir altyapı kullanmanız site çok iyi getiri sağlayacaktır.

Anahtar kelime yoğunluğu dengeli olmalı. Hedeflediğiniz anahtar kelimeler yazı içeriğinizde mantıklı bir sıklıkta yer almalıdır. Şunu yapmayın: Tıka basa anahtar kelimelerle doldurularak mahvedilmiş bir sayfa. Bu sitenizin kredisini düşürerek sitenizin rahatlıkla Google tarafından spam olarak tanımlanmasına sebep olur. Anahtar kelimeleri sayfa başlarına, paragraflara ve sayfa bitimine yakın bir yerlere yerleştirmek en iyisidir. Sayfaları birbirine bağlayın. Web sitenizin her sayfasında o sayfayı diğer sayfalara bağlayan sayfanın içeriğine uygun linkler bulunmalıdır. Bu linkler sayfanızın içeriğinden kaynaklanan doğal bağlantılar olmalı. Örneğin sayfanız SEO danışmanlığından bahsediyorsa bu kelimeleri kullanarak bu kelimelerle ilgili diğer sayfalara bağlantı verebilirsiniz. Bu içeriğe bağlı bir link olacaktır.Böylece Google Pagerank değeri sayfalarınız arasında paylaşılacaktır. Ayrıca bu Google’a sayfanın neden bahsettiğini söylemek için güzel bir yoldur.

-Neden özellikle GOOGLE SEO ve GOOGLE OPTİMİZASYONU?

-Dünya genelindeki konumlanması ve bilinirliği, kullanıcıların tercihleri açısından bakıldığında arama motorları arasında Google Arama Motorunun tartışılmaz bir üstünlüğü bulunmaktadır. Bu nedenle öncelikle Google Optimizasyonu – Google SEO hizmeti öne çıkmaktadır. Google Optimizasyon ekipleri profesyonel yaklaşımı ile Google Optimizasyon işlemlerini en uygun fiyatla sunmakta ve kullanıcı odaklı çözümler sağlamaktadır. En fazla arama yapılan arama motoru olduğu ve rekabet üst boyutlarda olduğu için Google Arama Motoru anlaşılır olmamak amacıyla algoritmasını güncellemekte ve karmaşıklaştırmaktadır.

-GOOGLE SEO Ve GOOGLE Optimizasyonun Sağladıkları nelerdir?

- Google Optimizasyon- Google SEO ekipleri, sürekli olarak Google teknolojisindeki değişiklikleri takip etmekte, gelişmeleri incelemekte ve sürekli olarak kendini daha ileriye taşımaktadır. Sürekli gelişmeleri takip eden ve kendini yenileyen yaklaşımı sayesinde Google Optimizasyon ekipleri , web sitenizin Google Arama Motorunda ilk sayfalarda ve üst sıralarda olmasını sağlamaktadırlar. Web Sitesi yaptırmak "Yaptım Oldu!" ile bitecek bir süreç değildir. Yaptırdığınız web sitesinin sürekli olarak internet dünyasındaki gelişmeler doğrultusunda takip edilmesi, gerekli durumlarda düzenlemelerin yapılması ve geliştirilmesi gerekmektedir.

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

HTML Liste

HTML Temel Dökümanlar

<html>
<head>
<title>Buraya başlık</title>
</head>

<body>
Görünecek metinler buraya
</body>

</html>

Başlık Öğeleri

<h1>En büyük başlık</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>En küçük başlık</h6>

Metin Öğeleri
<p>Bu bir paragraf</p>
<br> (satır atlama)
<hr> (yatay çizgi)
<pre>Biçimlendirilmemiş yazılar buraya</pre>

Mantıksal Stiller
<em>Vurgulu metin/em>
<strong>Güçlü metin</strong>
<code>Bilgisayar programlama kodu</code>

Fiziksel Stiller
<b>Koyu</b>
<i>İtalik</i>

Linkler ve Image Öğeleri
<a href="http://www.fikrin.net">Bu bir link</a>
<a href="http://www.fikrin.net"><img src="resim dosyasının yolu" alt="Alternatif metin></a>
<a href="mailto:info@tugbakulekci.com.tr">E-mail gönder </a>

Sırasız Liste
<ul>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ul>

Sıralı Liste
<ol>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ol>

Tanımlama Listesi
<dl>
<dt>İlk terim</dt>
<dd>Açıklaması</dd>
<dt>İkinci terim</dt>
<dd>Açıklaması</dd>
</dl>

Tablolar (Tables)

<table border="1">
<tr>
<th>Bir başlık</th>
<th>Bir başlık daha</th>
</tr>
<tr>
<td>metin</td>
<td>metin</td>
</tr>
</table>

Çerçeveler (Frames)

<frameset cols="25%,75%">
<frame src="sayfa1.htm">
<frame src="sayfa22.htm">
</frameset>

Formlar (Forms)
<form action="http://www.htmldersleri.org/html_form_action.php" method="post/get">

<input type="metin" name="soyisim" value="GZO" size="30" maxlength="50">
<input type="şifre">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Elmalar
<option selected>Muzlar
<option>Kirazlar
</select>

<textarea name="Yorum" rows="60" cols="20"></textarea>

</form>

Özel Karakterler
< ifadesi, bununla aynı çıktıyı verir: <
> ifadesi, bununla aynı çıktıyı verir: >
© ifadesi, bununla aynı çıktıyı verir: ©

Diğer Öğeler



<blockquote>
Bu metin başka bir metinden alıntılanmış bir parçadır.
</blockquote>

<address>

Adres 1<br>

Adres 2<br>

Şehir<br>

</address>

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

HTML Renk Değerleri

Renk Değerleri

HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir.

En düşük değer 0 (hex #00) ve en yüksek değer de 255'tir (hex #FF).

Aşağıda bu kombinasyonlar ile ilgili bir tablo görünmektedir:

Renk	HEX Değeri	RGB Değeri
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

W3C Standart Renk İsimleri

W3C, 16 tane geçerli renk ismi vermiştir:

Bunlar; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Ana Renklerin Çaprazlanması İle Oluşturulmuş Renkler

Yaklaşık 150 adet en çok kullanılan tarayıcılar tarafından desteklenen renk isimleri (İngilizce):

Görüntüle

Çaprazlanmış Renk Değerleri

Yıllar önce, bilgisayarların sadece 256 rengi desteklediği zamanlarda, 216 tane Güvenli Web Renkleri (Web Safe Colors), Web standardı olarak önerildi.

Aşağıda bu 216 rengin bulunduğu bir renk paleti bulunmaktadır:

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

HTML Background

Arka Plan

<body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar "bgcolor" ve "background" parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resimi belirtebilirsiniz.

Bgcolor

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Background

<body background="ornekler/background.jpg">
<body background="http://www.fikrin.net/grafik/logo.jpg">

Not: Eğer bir arka plan resimi kullanmak isterseniz aşağıdaki soruları aklınıza getirmeyi unutmayınız.

Yüklenmesi uzun sürer mi?

Sayfadaki diğer resimler ile uygun bir görüntü sağlar mı?Sayfadaki metinlerin rengi ile uygun bir görüntü sağlar mı?Sayfaya döşendiği zaman farkedilmemesi sağlanacak mı?Sayfadaki metinlerden daha az dikkat çekecek mi?

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

HTML Resimler

Resim "<img>" Etiketi ve "src" Parametresi

Etiket	Açıklama
<img>	Resim
<map>	Bir resimden alınacak belirli bir bölge.
<area>	Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü.

HTML dökümanlarda resimler <img> etiketi ile belirtilir.

<img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

Sayfanızda bir resim görüntüleyebilmek için "src" parametresini kullanmak zorundasınız. Src, "source" (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız.

Kullanım biçimi

<img src="resim yolu">

<img src="dosyalar/banner.jpg">

<img src="http://www.htmldersleri.org/dosyalar/banner.jpg">

"Alt" Parametresi

Bu parametre alternatif metin (alternate text) anlamına gelir. Bu metin, resimin üzerine mouse gelip bir süre beklendiği zaman görünen metindir.

<img src="home.gif" alt="Ana Sayfa">

Bu özellik sayesinde bazen sayfa yüklenirken resimlerin görüntülenememesi gibi problemlerde oradaki resimin ne olduğunu anlarız. Bu parametre yeni nesil HTML'de WWC tarafından zorunlu hale gelmiştir.

Temel Notlar - Yararlı İpuçları

Bir HTML dosyasına 10-15 resim koymak sayfanın yüklenişi sırasında yavaşlamaya neden olur. Bu yüzden sayfa tasarlarken bu notu dikkati alınız. Unutmayın ki kullanıcıların bir web sayfasında aradığı ilk özellik, hızdır!

Image Etiketleri

Etiket Açıklama

<img> Resim

<map> Bir resimden alınacak belirli bir bölge.

<area> Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü.

www.tugbakulekci.com.tr/web-sitesi-yaptirmak-istiyorum.html

Web Formlar

Formlar

Bir form, form elemanlarını içinde bulunduran alandır.

Etiket	Açıklama
<form>	Form
<input>	Giriş alanı
<textarea>	Çok satırlı metin giriş alanı
<label>	Etiket
<fieldset>	Alanların ayarlarının nasıl olacağını belirtir.
<legend>	Manşet
<select>	Açılabilir liste (combobox)
<optgroup>	Seçenek kutusu grubu
<option>	Açılabilir liste içindeki maddeleri belirtir.
<button>	Buton
<isindex>	Önemsiz. Bunun yerine <input> etiketini kullanınız.

Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları)

Kullanım biçimi:

<form> <input> <input> </form>

Giriş (Input)

En çok kullanılan form etiketi <input> etiketidir.

Metin Alanları

Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullabilirsiniz.

<form> Adınız: <input type="text" name="isim"> <br> Soyadınız: <input type="text" name="soyad"> </form>

Çıktısı:
Adınız:
Soyadınız:

Formun kendisinin görünmediğine dikkat ediniz. Ayrıca bir çok tarayıcının metin giriş alanı için varsayılan olarak 20 karakterlik alan bıraktığına dikkat ediniz.

Seçenek Butonları (Radio Buttons)

Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman bunu kullanırsınız.

<form> <input type="radio" name="Cinsiyet" value="Erkek"> Erkek <br> <input type="radio" name="Cinsiyet" value="Kadın"> Kadın </form>

Çıktısı:
Erkek
Kadın

Kontrol kutuları (Checkboxes)

Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini sağlamak için bunu kullanabilirsiniz.

<form> Bir bisikletim var: <input type="checkbox" name="Tasit" value="Bisiklet"> <br> Bir arabam var: <input type="checkbox" name="Tasit" value="Araba"> <br> Bir uçağım var: <input type="checkbox" name="Tasit" value="Uçak"> </form>

Çıktısı:
Bir bisikletim var:
Bir arabam var:
Bir uçağım var:

Formlarda "Action" Parametresi ve "Submit" Butonu

Kullanıcı submit (gönder) butonuna tıkladığında girilen bilgiler başka bir sayfaya gönderilir. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir.

<form name="input" action="ornekler/html_form_action.php" method="get" target="_blank"> Kullanıcı Adı: <input type="text" name="kullanici"> <input type="submit" value="Gönder"> </form>

Çıktısı:
Kullanıcı Adı:

Eğer yukarıdaki kutuya birşeyler yazıp butona tıklarsanız, girdiğiniz bilgileri "html_form_action.php" dosyasına gönderirsiniz. Yeni pencerede açılacak olan bu sayfada girmiş olduğunuz bilgileri görebilirsiniz.

Form Etiketleri

Etiket Açıklama

<form> Form

<input> Giriş alanı

<textarea> Çok satırlı metin giriş alanı

<label> Etiket

<fieldset> Alanların ayarlarının nasıl olacağını belirtir.

<legend> Manşet

<select> Açılabilir liste (combobox)

<optgroup> Seçenek kutusu grubu

<option> Açılabilir liste içindeki maddeleri belirtir.

<button> Buton

<isindex> Önemsiz. Bunun yerine <input> etiketini kullanınız.

http://www.tugbakulekci.com.tr/web-tasarim.html

Web Tasarım Listeler

Sırasız Liste

Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile işaretlenir.

Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>

Çıktısı:

Kahve Süt

Bir liste madde içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları koyabilirsiniz.

Sıralı Listeler

Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her madde de <li> etiketi ile başlar.

<ol>
<li>Kahve</li>
<li>Süt</li>
</ol>

Çıktısı:

Kahve Süt

Tanımlama Listeleri

Bir tanımlama listesi maddelerin sıralanması demek değildir. Bu, terimlerin açıklanması demektir.

Bir tanımlama listesi <dl> etiketi ile başlar. Her terim <dt> etiketi ile başlar. Each terimin tanımlaması da <dd> etiketi ile başlar.

<dl>
<dt>Kahve</dt>
<dd>Koyu sıcak içecek</dd>
<dt>Süt</dt>
<dd>Beyaz soğuk içecek</dd>
</dl>

Çıktısı:

Kahve
Koyu sıcak içecekSütBeyaz soğuk içecek

Bir tanımlama listesi içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları vs. koyabilirsiniz.

Listeleme Etiketleri

Etiket	Açıklama
<ol>	Sıralı liste
<ul>	Sırasız liste
<li>	Liste maddesi
<dl>	Tanımlama listesi
<dt>	Terim tanımı
<dd>	Tanım açıklaması
<dir>	Önemsiz etiketi. Yerine <ul> kullanınız.
<menu>	Önemsiz etiketi. Yerine <ul> kullanınız.

www.tugbakulekci.com.tr/mobil-uygulama.html

Tablolar

Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Çıktısı aşağıdaki gibi olacaktır:

satır 1, hücre 1	satır 1, hücre 2
satır 2, hücre 1	satır 2, hücre 2

Tablolar ve Kenarlık (border) Parametresi

Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.

Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>

Tablolarda Başlıklar

Başlıklar <th> etiketi ile belirtilir.

<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>

Çıktısı:

Başlık	Başka Başlık
Satır 1, Hücre 1	Satır 1, Hücre 2
Satır 2, Hücre 1	Satır 2, Hücre 2

Bir Tabloda Boş Hücreler

Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>

Çıktısı:

Satır 1, Hücre 1	Satır 1, Hücre 2
Satır 2, Hücre 1

Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).

Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>&nbsp;</td>
</tr>
</table>

Çıktısı:

Satır 1, Hücre 1	Satır 1, Hücre 2
Satır 2, Hücre 1

Tablo Etiketleri

Etiketi	Açıklama
<table>	Tablo
<th>	Tablo başlığı
<tr>	Satır
<td>	Hücre
<caption>	Manşet
<colgroup>	Hücre grupları
<col>	Sütun genişliği
<thead>	Tablo başı
<tbody>	Tablo body özelliği
<tfoot>	Tablonun en alt kısmı

www.tugbakulekci.com.tr/google-optimizasyon-seo.html

Frame Etiketleri

Frameset Etiketleri

<frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler. Her frameset satır (rows) veya sütun (cols) olarak belirlenir

Frame Etiketi

<frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir. Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25'i ayrılmıştır. İkincisine ise %75'i ayrılmıştır. "frame_a.htm" birinci sütuna, "frame_b.htm" ise ikinci sütuna yerleştirilmiştir:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols="200,500"), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols="25%,*").

Temel Notlar - Yararlı İpuçları

Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize="noresize" parametrelerini <frame> etiketi içine yazabilirsiniz.
<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.
Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!

Frame Etiketleri

Etiket	Açıklama
<frameset>	Frame ayarlarını belirtir.
<frame>	Alt pencere (çerçeve) belirtir.
<noframes>	Frame desteğinin kullanılmamasını sağlar.
<iframe>	İç frame belirtir.

www.tugbakulekci.com.tr/grafikdizayn.html

Grafik Tasarım