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)
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
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><head>
<title>Buraya başlık</title>
</head>
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>
<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>
<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>
<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>
<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>
</form>
Özel Karakterler
< ifadesi, bununla aynı çıktıyı verir: <> ifadesi, bununla aynı çıktıyı verir: >
© 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>
Bu metin başka bir metinden alıntılanmış bir parçadır.
</blockquote>
<address>
Adres 1<br>
Adres 2<br>
Şehir<br>
</address>
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):
Ç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 |
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?
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ı:
ErkekKadı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
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
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ı:
KahveKoyu 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. |
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, ( ) ö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> </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ı |
Frame Etiketleri
Frameset Etiketleri
- <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
Frame Etiketi
- <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.
<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. |
Ç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. |
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. |
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
Kaydol:
Kayıtlar (Atom)
