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

&lt; ifadesi, bununla aynı çıktıyı verir: <
&gt; ifadesi, bununla aynı çıktıyı verir: >
&#169; ifadesi, bununla aynı çıktıyı verir: ©

Diğer Öğeler

<!-- Bu bir yorum -->

<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

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.

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

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, (&nbsp;) ö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

Çerçeveler

 

Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.
Çerçeve kullanmanın dezavantajları:

Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur.
İstenilen sayfanın yazıcıya gönderilmesi zordur.



www.tugbakulekci.com.tr/logo-amblem-tasarimi.html

Alıntılar ve Açıklamalar ile İlgili Etiketler

 

Alıntılar ve Açıklamalar İle İlgili Etiketler

Tag	Description
<abbr>	Kısaltma
<acronym>	Baş harfleri ile kısaltma
<address>	Adres öğesi
<bdo>	Metin yönü
<blockquote>	Uzun alıntı
<q>	Kısa alıntı
<cite>	Alıntı
<dfn>	Tanımlama terimi

<a> Etiketi ve href parametresi

HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır.
Kullanım biçimi:

<a href="url">Görüntülenecek Metin</a>

Bir örnek:

<a href="http://www.htmldersleri.org/">Kodlayın, Tıklayın, Görün...</a>

Bu örnek tarayıcınızda aşağıdaki gibi görünecektir:

Hedef (target) Parametresi

Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.
Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.

<a href="http://www.htmldersleri.org/" target="_blank">Kodlayın, Tıklayın, Görün...</a>

---

<a> Etiketi ve Name Parametresi

Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.
Kullanım Biçimi:

<a name="label">Görüntülenecek Metin</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
Bir Örnek:

<a name="ipucu">Yararlı Bilgiler</a>

İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu yazınız:

<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu"> Yararlı İpuçları</a>

Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek:

<a href="#ipucu">Yararlı İpuçları</a>

www.tugbakulekci.com.tr/3ds-max.html

3dsMax

"Programlama Dilleri" Etiketleri

 

"Programlama Dilleri" Etiketleri

Tag	Açıklama
<code>	Programlama dili metini
<kbd>	Klavye metini
<samp>	Örnek bilgisayar kodu metini
<tt>	Tele tip metin
<var>	Değişken
<pre>	Biçimlendirilmemiş metin.
<listing>	Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext>	Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp>	Önemsiz etiket, bunun yerine <pre> kullanınız.

www.tugbakulekci.com.tr/sosyal-medya-hizmetleri.html

Metin Biçimlendirme Etiketleri

 

Metin Biçimlendirme Etiketleri

Tag	Açıklama
<b>	Koyu metin
<big>	Büyük metin
<em>	Vurgulanmış metin
<i>	İtalik metin
<small>	Küçük metin
<strong>	Güçlü metin
<sub>	Alt indis metini
<sup>	Üst indis metini
<ins>	Altı çizili metin
<del>	Üstü çizili metin
<s>	Önemsiz etiket, bunun yerine <del> kullanınız.
<strike>	Önemsiz etiket, bunun yerine <del> kullanınız.
<u>	Önemsiz etiket, bunun yerine styles kullanınız.

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

Web Site Tasarımı

Temel HTML Etiketleri

 

Temel HTML Etiketleri

Etiket (Tag)	Açıklama
<html>	Bir HTML dökümanını belirtir
<body>	Dökümanın görüntülenecek kısmını berlitir.
<h1> to <h6>	Başlıkları belirtir.
<p>	Bir paragraf belirtir
<br>	Boş bir satır bırakır.
<hr>	Sayfada yatay bir çizgi çizer
<!-->	Yorum satırı olduğunu belirtir.

HTML Etiket Nitelikleri

HTML etiketleri parametrelere sahip olabilir.
Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. Parametreler daima isim/değer çiftleri arasında gelir: name="value".
Parametreler daima başlangıç etiketi içerisinde belirtilir.

---

Parametre Örneği 1:

<h1> başlık belirtir.
<h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir.

Parametre Örneği 2:

<body> HTML'in body kısmını belirtir.
<body bgcolor="yellow"> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.

Değerleri (Value) Daima Tırnak İçerisine Alın

Parametrelerin değerli her zaman tırnak içerisinde olmalıdır.
Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz:
name='Cem "GORA" Yilmaz'

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