HTML nedir.. giriş ve gelişme..

cunobag · #1 05-06-2008, 12:25

HTML nedir?

HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir,Tag denilen özel işaretlerle bir yazınin hepsini ya da sadece bir kısmının görünümünü ve işlevini değiştirmeye yarar. Örneğin herhangi bir tag olmadan default yazı tipinde görünen bir yazı, HTML içinde önüne ve arkasına <b> ve </b> işaretleri gelince bu şekilde kalın yazı görülür.

HTML tag'leri

HTML tagleri bir çok farklı şekilde sınıflandırılabilir. Su sekildedir:

Bir açma bir de kapama tag'inden oluşan container tag'leri,
Tek başına bulunan tag'ler.

HTML dökümanlarının Yapısı:
<HTML>
<HEAD>

Burada genelde başlık, JavaScript tanımlamaları vb elemanlar bulunur...
</HEAD>
<BODY>

Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb. bilgiler bulunur.
<BODY>
</HTML>

cunobag · #2 05-06-2008, 12:25

Listeler:

HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;

Sıralı listeler (ordered list)
Sırasız listeler (unordered list)
Tanımlama listeleri (definition list)
Sıralı listeler rakam , harf yada her ikisini içiçe alarak liste oluşturmamızı sağlar.Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Listemizin rakamla mı harfle mi olacağını (type) parametresi ile belirtebiliriz.

Sıralı Listeler

Html Etiketi Etiketin Web Sayfasındaki görüntüsü
<OL TYPE = "1">ELEMANLAR :
<LI>ELEMAN 1
<LI>ELEMAN 2
<LI>ELEMAN 3
</OL> ELEMANLAR :
ELEMAN 1
ELEMAN 2
ELEMAN 3

Sırasız Listeler

Html Etiketi Etiketin Web Sayfasındaki görüntüsü
<UL TYPE="DISC"> ELEMANLAR:
<LI>ELEMAN 1
<LI>ELEMAN 2
<LI>ELEMAN 3
</UL> ELEMANLAR:
ELEMAN 1
ELEMAN 2
ELEMAN 3

Tanımlama listeleri

<dl>
<dt>Karbonhidrat ve ben
<dd>En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. </dd></dt>
<dt>Sebze ve ben
<dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. </dd></dt>
<dt>Et ve ben
<dd>Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. </dd></dt>
</dl> Karbonhidrat ve ben
En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini..
Sebze ve ben
Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.
Et ve ben
Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim.

cunobag · #3 05-06-2008, 12:26

RESİMLER

<IMG SRC="resmin bulunduğu yer ve adı yazılacak yer" WIDTH="x" HEIGHT="y" >
Seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur. Resim eklemek için yapmamız gereken sayfaya koyacağı resmin nerede olduğunu göstermemiz gerekir.Resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz resmin düzgün görünmesi sağlar ama şart değildir. Kullanacağımız etiket şu şekilde olacak; Burada x resmin enini y ise boyunu ifade ediyor

Örnek :
<img src="Fil.gif" width="64" height="79">

Eklemek istediğiniz çok sayıda resim varsa bunları resimler adlı bir alt klasörde ise html dosyası c:\ders dizininde resimler de c:\ders\resimler\Fil.gif dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanılır;

<img src="resimler/Fil.gif" width="64" height="79">

Resmi Hizalamak
Hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola (left) koyabiliriz.

<img src="resim.jpg" width="25" height="25" align="left">

Resme alternatif metin eklemek: <img src="resim.gif" alt="saat"> buradaki alt="saat" ifadesi bize resmimize alternatif metin eklememizi sağlar.

Resme Çerçeve eklemek : <img src="resim.gif" border="6"> border ise resmimize çerçeve içine alır

cunobag · #4 05-06-2008, 12:27

BAĞLANTILAR

<A></A>
Bağlantılarla hazırladığımız birçok sayfayı birbirleriyle ilişkilendirebilirz. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür.Yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim:

<A HREF="....">...</A>

Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün. Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <A>...</A> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.

<A HREF="doğa.gif"> buraya tıklandığında doğa resmi açılacak </A>

Birinci örnekte "buraya tıklandığında doğa resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.

<A HREF="Ders.rar"> sıkıştırılmış Ders dosyalarını çekmek için tıklayın

İkinci örnekte aynı şekilde "sıkıştırılmış ders dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte doğa.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya ders.rar dosyasını açmak mı yoksa kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken rar,zip,, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.

<A HREF="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </A>

Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır.

<A HREF="resimler/Fil.jpg"> kedi resmi </A>

Bu örnekte altdizinlere/üstdizinlere verilen bağlantıyı görüyorsunuz, resimler konusunda gördüğümüz kurallar burada da geçerli.

<A HREF="http://www.webbilgileri.com"> tıklayın dosyaları indirin </A>

Bu ise bir http adresine verilen link örneği.

<A HREF="mailto: "> mail atın </A>

Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.

cunobag · #5 05-06-2008, 12:28

TABLOLAR(TABLE)

<TABLE>...</TABLE>

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde olmasını sağlamak amaçlarıyla kullanabiliriz. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabiliriz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılabilir.

Basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <TABLE>...</TABLE> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <TR> etiketi ile satırları <TD> etiketi ile de sütunları oluşturuyoruz. Parametreler:

<TABLE BORDER=".." CELLPADING=".." CELLSPACING=".." ALIGN=".." WIDTH=".." HEIGHT="..">

Border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar. Cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlıyabilirz.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<table border="1" cellspacing="1">
<tr>
<td>hücre1</td> <td>hücre2</td>
</tr>
<tr>
<td>hücre3</td> <td>hücre4</td>
</tr>
</table> hücre1 hücre2
hücre3 hücre4

Align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar. colspanaynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü
<table border="1" cellspacing="1">
<tr>
<td>hücre1</td> <td>hücre2</td><td>hücre3</td>
</tr>
<tr>
<td rowspan="2">hücre4</td> <td colspan="2">hücre5</td></tr>
<tr><td>hücre6</td><td>hücre7</td> </tr>
</table> hücre1 hücre2 hücre3
hücre4 hücre5
hücre6 hücre7

by_burak · #6 05-06-2008, 01:34

Paylaşım için teşekkürler ama bunun devamı yukmu ? yani sadece bu kadarmı ?

cunobag · #7 05-06-2008, 04:18

HTML dilinde sayfa kodlamasında kullanılan etiketler ve görevlerini bu makale ile yazmaya başlıyoruz. İlk olarak aşağıdaki temel html etiketlerimiz ve görevlerinden bahsedeceğiz.

HTML DOCTYPE Etiketi
Bu etiket bazı sayfalarda kullanılması gerekmese bile, sitemizin w3c dil yapısına uygun olup olmadığını, gerekli bilgileri tarayıcıya göndererek belirler. Sayfada en üst bölüme yazılır. Yani tarayıcı buradaki bilgileri görerek gerekli detayları w3c den almaktadır. Temel yazım şekli aşağıdaki gibidir.

<!DOCTYPE .... bilgiler buraya .... >

Genellikle döküman türleri HTML ve XHTML versiyon bilgilerine göre sayfayı ayarlamaktadır. Örnek olarak web sayfamız XHTML 1.0 diline uygun olarak yazılmış ise aşağıdaki kodu html satırlarımızın en üst bölgesine yazmalıyız.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bu kod ile sayfamız tarayıcıya kendisinin XHTML 1.0 kurallarına göre yazıldığını ve buna göre w3c den doğrulama yönergelerini alması gerektiğini belirler.

HTML - HTML Etiketi
Bu etiket ise sayfamızın HTML dilinde yazıldığını belirlemektedir. Hem tarayıcılar hem de web sunucuları bu etiketlere göre sayfaları yorumladığı için, bu bilgileri vermeden web sayfası oluşturamayız. DOCTYPE komutundan sonra yazılmaya başlamaktadır. Tüm html kodları bu etiket - tag ile başlayan bölgenin içine yazılmakta ve bu etiket ile kapanan yerde bitmektedir.

<html>
.
Tüm html kodları buraya yazılmaktadır.
.
</html>

Diğer programlama dillerinde de uygulamalar benzerdir. Hangi programlama diline uygun komutu yazacaksak ilk olarak o programlama dilinin çalışması için gerekli olan bölgeyi belirlemeliyiz. Mesela html kod içinde php bölüm çalıştırmak isteseydik;

<html>
<?php
php kodları burada çalıştırılır.
?>
.
Tüm html kodları buraya yazılmaktadır.
.
</html>

HTML Head Etiketi
Sayfa üst bilgileri bu etiket içinde yazılmaktadır. Örnek olarak sayfa içinde kullandığımız javascript fonksiyonları bu bölge arasında yazılmaktadır veya bu bölge içinde sayfaya include edilmektedir. Temel olarak görevlerine bakacak olursak;
» Javascript fonksiyon bilgileri bu kısımda include edilir veya javascript fonksiyonları buraya yazılır.
» CSS bilgileri bu bölümde include edilir.
» Web sayfası ico bilgileri burada belirlenir. Favori icon yani tarayıcıda adres çubuğunun sol tarafında gözüken web sitesinin küçük simgesi.
» Sayfaların önemli bilgilendirme etiketleri olan Meta Tag lar bu bölüm içine yazılmaktadır.
» Sayfada kullanılan Title etiketi bu bölüm içine yazılmaktadır.
» Bunların dışında sayfaya ait ön bilgi olan ve sayfaya tarayıcı ile bakarken göremediğimiz sadece kaynak dosyası içinde görülebilen kodlardır.
Örnek bir head etiketine bakacak olursak;

<head>

<title>HTML Dersleri</title>
<meta name="description" content="Temel açıklamalar" />
<meta name="keywords" content="Temel kelimeler" />
<link rel="++++++++++" type="text/css" media="screen" href="http://www.gblg.com/tema.css" />
<script src="http://www.genelblog.com/deneme.js" type="text/javascript">

</head>

Yukarıdaki örnekte sırasıyla, title bilgisi verildi, meta description ve meta keywords bilgileri eklendi, sayfanın css bilgileri eklendi, sayfaya javascript fonksiyon eklendi.

HTML Body Etiketi
Bu etiket ise head etiketinin bitişinden itibaren başlar ve sayfanın en son etiketi olan </html> etiketinden önce biter. Sayfaya tarayıcı ile bakıldığı zaman gözle görebildiğimiz tasarım ve yazılar bu etiket içinde yazılmaktadır. Title etiketi hiçbir şekilde bu etiket içine yazılmaz. Bundan sonra göstereceğimiz etiketler büyük çoğunluğu body etiketi içine yazılmaktadır. Genel yazım kuralı;

<body> .... html kodları .....</body>

HTML Title Etiketi
Bu etiket head etiketi içine yazılmaktadır. Çünkü sayfa üstbilgisiyle uğrşmaktadır. Title etiketi o sayfanın arama motorlarında sonuç sayfalarında veya tarayıcılarımızda en üst kısımda gözüken başlık bölümünü belirlemektedir.

HTML Title Etiketi
Bu etiket head etiketi içine yazılmaktadır. Çünkü sayfa üstbilgisiyle uğrşmaktadır. Title etiketi o sayfanın arama motorlarında sonuç sayfalarında veya tarayıcılarımızda en üst kısımda gözüken başlık bölümünü belirlemektedir.

<title>HTML Etiketleri</title>

Şeklinde olduğunu görürüz. Title tag yani etiketinin arama motorları için son derece önemli olduğunu bilmelisiniz. Yani sayfanızda bu etiketi düzgün kullanmadığınız taktirde veya yanlış yazdığınız durumlarda gerekli pozisyonlara ulaşamayabilirsiniz. Bu etiketin içine hiçbir şekilde başka html etiketler eklenmemektedir. b, strong, em gibi diğer html etiketleri bu etiketin altına eklemeye çalışırsak hiçbir şey elde etmemiş oluruz çünkü title içine eklediğiniz bu etiketler, html etiketi olarak değil normal yazı karakteri olarak gözükecek ve tarayıcılarımızda bunları normal yazı olarak gösterecektir.

cunobag · #8 05-06-2008, 04:20

html Frames Çerçeveler Pencere Çerçeve Örnekler

Çerçeve Kullanımı / HTML FRAME

Frame; çerçeve anlamına gelir. Amacı bir web sayfasını belli parçalara bölmek ve bu parçaların içerisinde değişik, web sayfalarını görüntüleyebilmek içindir.
Çerçeve yapmak için <frameset> </frameset> tagı kullanır. <frameset> tagı </head> ve <body> tagları arasında kullanılmaktadır.
FRAMESET Parametreleri;
Frame kullanırken kullandığımız frame'e isim vermek için name ( bağlantıların TARGET kısmında kullanabilmek için ) elemanını ve frame'in bulunduğu yeri göstermek için de src elemanını kullanırız.
Sayfamıza framelerin dikey veya yatay yerleşmeleri için <frameset> tagının "cols" ve "rows" elemanlarını kullanırız.
cols="*,*,*" sayfanın dikey olarak hangi oranda bölüneceğini belirlemenizi sağlar. Örneğin cols="180,450" gibi sayı yazılabilir, cols="45%,65%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada (*) sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="180,*" ifadesi ilk pencerenin 180 pixel olacağını * ise ikinci frame'in geri kalan boşluğun tümünü kaplayacağını belirtiyor. Bu şekilde açılacak çerçeve sayısını da belirtmiş olur.
rows="*,*,*" sayfanın yatay olarak hangi oranda bölüneceğini belirlememizi sağlar.
Not: Aynı <frameset> tag'ı içinde hem "cols" hem de "rows" etiketleri kullanılmaz. Anca iç içe frameler yapılırsa kullanılabilir.
frameborder=".." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.
border=".."
Çerçeveleri birbirinden ayıran çizgilerin kalınlığını belirler. (çerçeveler arası mesafeyi)
bordercolor ; kullandığınız çerçevenin kenarlığına renk vermek için.
Not: Çerçevenizde kenarlık istemiyorsanız, border=”0” ve frameborder=”no” vermelisiniz.
marginwidth=".." marginheight=".." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.
scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler.
noresize
Pencere boyutlarının sabit olmasını sağlar.
Örnekler;
Ilk once dört tane htm dosyası oluşturalım. Sırasıyla a.htm, b.htm, c.htm, d.htm olarak kaydedelim.
<html>
<head>
<title>Kırmızı Sayfa</title>
</head>
<body bgcolor="#FF0000">
<div align="center">
<font color="#FFFFFF">A SAYFASI </font>
</div>
</body>
</html>
<html>
<head>
<title>Mavi Sayfa</title>
</head>
<body bgcolor="#0000FF">
<div align="center">
<font color="#FFFFFF">B SAYFASI </font>
</div>
</body>
</html>
<html>
<head>
<title>Yeşil Sayfa</title>
</head>
<body bgcolor="#00FF00">
<div align="center">
<font color="#FFFFFF">C SAYFASI </font>
</div>
</body>
</html>
<html>
<head>
<title>Siyah Sayfa</title>
</head>
<body bgcolor="#000000">
<div align="center">
<font color="#FFFFFF">D SAYFASI </font>
</div>
</body>
</html>

ÇALIŞMALAR
<html>
<head>
<title>Çalışma - 1</title>
</head>
<frameset rows="*,*" cols="*,*">
<frame name="kirmizi" src="a.htm">
<frame name="mavi" src="b.htm">
<frame name="yesil" src="c.htm">
<frame name="siyah" src="d.htm">
</frameset>
<body>
</body>
</html>
<html>
<head>
<title>Çalışma - 2</title>
</head>
<frameset cols="150,*">
<frame name=" kirmizi" src="a.htm">
<frameset rows="100,*">
<frame name=" mavi" src="b.htm">
<frame name=" yesil" src="c.htm">
</frameset>
</frameset>
<body>
</body>
</html>
<html>
<head>
<title>Çalışma - 3</title>
</head>
<frameset rows="50%,50%">
<frameset cols="*,*">
<frame name=" kirmizi" src="a.htm">
<frame name=" mavi" src="b.htm">
</frameset>
<frame name=" yesil" src="c.htm">
</frameset>
<body>
</body>
</html>
<html>
<head>
<title>Çalışma - 4</title>
</head>
<frameset rows="*,*,*">
<frame name=" kirmizi" src="a.htm">
<frameset cols="*,*">
<frame name=" mavi" src="b.htm">
<frame name=" yesil" src="c.htm">
</frameset>
<frame name=" siyah " src="d.htm">
</frameset>
<body>
</body>
</html>

Çerçeveler Arasında Link
name elemanı ile isimlendirdiğimiz frame'leri birbirine linkler ile bağlayabiliriz. Örnegin link verdigimiz sayfanın hangi frame de çıkmasını istiyorsak target parametresine ilgili frame’nin name’ ni yazarız.
<html>
<head>
<title>Frameler Arası Köprü Yapma</title>
</head>
<body>
<a href="ornek.htm" target="kirmizi">Ornek Sayfa</a>
</body>
</html>

cunobag · #9 05-06-2008, 04:21

html link yapmak Köprü Bağlantı Örnek

LİNK VERMEK
1-) Bir Web sitesine Link vermek
2-) Site içi Link vermek
3-) Mail adresine Link vermek
4-) Sayfa içine Link vermek
5-) Bir Resme Link vermek
6-) Dokümana link vermek.
HTML sayfasına bağ (link) yerleştirmek
<a> ve </a> : bu komutla bağ (link) yapılır.
Bir web sayfasına link vermek.
<a href="www.html-dersi.blogspot.com"> html dersleri </a>
Biçiminde kullanılır.
Mail adresine link vermek
<a href=mailto:html-dersi@blogspot.com> Mail Gönder </a>
Site İçine Link vermek
<a href=”html-link.htm”>Tıklarsan bu sayfa tekrar açılır </a>
Resme link vermek.
<a href="resim.gif"> Resmi Görüntülemek için tıklayın</a>
Dökümana link vermek.
<a href="ornek.zip"> Bu Dosyayı indirin </a>

////////////////////////////////////////////////////
<a> tagının parametreleri.
Target parametresi
Bağlantının açılacağı pencereyi belirtmek için kullanılan"target"
parametresini kullanılır.
Kullanımı:
<a href="html-dersler.htm" target="..." >html dersleri</a>
target="_blank" , Bağlantı yeni bir pencerede açılır.
target="_self" , Bağlantı aynı pencere içerisinde açılır.
target="_top" , Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
target="_parent" , Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
target="çerçeve adı" , Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.( Ayrıntı için "Çerçeveler" konusuna bakın.)
////////////////////////////////////////////////////
Linklere Klavye Tuşları ile Kısa Yol Atamak
Linklerinize klavye kısa yolları atayabilirsiniz. Böylece klavye tuşları kullanarak sitenizin içerisinde gezilebilir. Bunu <a> tagının elemanı olan accesskey ile yapabiliriz.
Kullanımı:
<a href="www.html-dersi.blogspot.com" accesskey="a">Ana Sayfa</a>

Link için atadığınız kısa yol harfi tek başına çalışmaz. Yani yazacağınız harf ile "ALT" tuşuna basarak linki aktif hale getirebilirsiniz.yani ALT+A
Title ile linklere acıklama verin; mouse link üzerine getirildiginde link hakkında ayrı bir açıklama yapması sağlayabilirsiniz.
<a href="www.html-dersi.blogspot.com" title="Html dersleri Ana Sayfaya Dön">Ana Sayfa</a>
////////////////////////////////////////////////////
Bir resme nasıl link verilir.
<a href=”html-link.htm”><img src="resim.gif" border="0"></a>

Resme tıklandığında bu sayfa tekrar yüklenecektir.
Resimlerde 'MAP' kullanarak link yapmak.
Map'ler bir resmin değişik yerlerine tıklandığında değişik bağların yüklenmesi olarak tanımlanır.
Kullanımı;
<map name="falanca">
<area shape="poly" coords="108,87,48,33,151,21" href="#">
<area shape="rect" coords="8,45,80,95" href="#">
<area shape="circle" coords="31,11,17" href="#">
</map>
<img src="logo_plain.png" width="160" height="100" ISMAP usemap="#falanca">

name ile belirttiğimiz isim '<img ..' içinde usemap="#..." ile kullandığımızın aynısı.
shape belirteci ile dikdortgen, daire, ya da poligon tanımlayabiliyoruz. Dikdörtgenin koordinatlarını: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biçiminde 'coords="..." ' kısmında belirtiyoruz. 'href="..." ' bölümü ise bu dikdortgen alana tıklanıldığında neyin yüklenmesi gerektiğini söylüyor.
web sitesi alanında bir çember için X-merkez,Y-merkez,R-yarıçap biçiminde koordinat tanımlıyoruz.
Poligon tanımlarken sırayla her bir köşenin X,Y biçiminde koordinatlarını html kodları içine giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarını saat-yönünde tanımlamamız gerektiğidir. Ayrıca poligonu kapamaya da tarayıcı programlar arasında uyumsuzluk nedeniyle dikkat etmeliyiz. Yukarıdaki üçgen örneğini incelemek aslında poligon tanımı yapabilmek için yeterli. Üçgen için dört nokta kullandık (dördüncü ilkinin dibinde). Aynı zamanda bu üçgenin X,Y betimlemeleri de saat-yönünde girilmiş (noktaları kağıt üzerinde yaklaşık olarak işaretlerseniz bu 'saat-yönü' kavramını daha iyi anlayabilirsiniz).
son olarak da '<area shape="default" nohref>' ile resmin diger bölgelerine tıklanıldığında hiç bir sey yapılmaması gerektiğini söylüyoruz.
////////////////////////////////////////////////////
Çapa Yaratmak
Çapa bir sayfanın bir yerinden aynı sayfanın başka bir yerine gitmek için yapılılan linke denir. Mesela sayfa sonundaki "Sayfa Başı" na tıkladığında sayfa başına gidilmesi. Bunu çapa ile yaparız.
Çapa yaparken <a> tagının name elemanını kullanılır.
<a name="#sayfabsi">Html Dersleri</a>

Yukarıda sayfa başılığımız olan "Html Dersleri"ne "#" işareti ile isim verdik.
Şimdide sayfa sonunda oluşturacağımız linki nasıl oluşturacağımızı inceleyim.

<a href="#sayfabasi">Sayfa Başına </a>

Örnek için tıklayınız- Sayfa Başı -
Dikkat edilmesi gereken name elemanını verdiğiniz isim ile href'in alacağı name aynı olmalı aksi halde linkiniz çalışmaz.
Çapa yaparken başka bir sayfanın herhangibir ilgili yerinin açılmasınıda sağlayabiliriz.
<a href="tasarim1.htm#ilgiliyer"> linkimiz bu olaçak
tasarim1.htm sayfasında da ilgili yere aşagıdaki çapayı yazıyoruz.
<a name="ilgiliyer">İlgili Yerimizin başlığı</a>

cunobag · #10 05-06-2008, 04:22

html marquee kayan yazı yazılar Örnek

KAYAN YAZI
Kayan yazı görüntüsü elde edebilmek için kullanılacak olan belirteç çifti <marquee> ... </marquee> ‘dir.
<marquee> Parametreleri
<MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.
<marguee direction=right>,up,down : Sağdan, yukarıdan ve aşağıdan başlayarak kayması sağlanır
<marquee behavior=alternate> : Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan diğerine gider
HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.
<marquee bgcolor=ff00ff> : Kayan yazıların arka plan rengini belirler.
<marquee height=10 width=250> : Yazının kayacağı alanın yüksekliği ve genişliği ayarlanabilir.
<marquee loop=3> : Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur.
<marquee scrolldelay=1> : Kaydırma hızını ayarlar. yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirlerN değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
<MARQUEE SCROLLAMOUNT=#> Kayan yazı </MARQUEE> …..# burada kayma hızını belirten bir sayıdır. Kayan yazının bir defada kaç piksel hareket edeceğini,
Örnek;
<html>
<title> Kayan Yazılar </title>
<body>
<marquee> <font color=red size=7 ALIGN=Center> Sola Doğru Kayıyor </font></marquee>
<marquee direction=right> Sağa Doğru Kayıyor </marquee>
<marquee direction=up> Yukarı Doğru Kayıyor </marquee>
<marquee direction=down> Aşağı Doğru Kayıyor </marquee>
</body>
</html>

cunobag · #11 05-06-2008, 04:22

SAYFANIN TÜRKÇELEŞTİRİLMESİ
<head>
<meta http-equiv=content-type content=text/html;charset=windows-1254>
<meta http-equiv=content-type content=text/html;charset=iso-8859-9>
</head>
1-) text/html yazmakla metnin düz yazı ve html belgesi olduğunu ve sayfamızın türkçe olduğunu belirtmek için ise Netscape Navigator için "ISO-8859-9" değerini giriyoruz.
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-9">
2-) Sayfamızın türkçe olduğunu belirtmek için Microsoft Internet Explorer' da "windows-1254" değerini kullanıyoruz.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<meta http-equiv="Content-Language" content="tr">
Sayfanızın dilinin Türkçe olduğunu gösterir.

cunobag · #12 05-06-2008, 04:23

html form Elemanı Formlar elemanları Kullanmak

FORM KULLANIMI
Formlar ziyaretcilerin veri girişi yapmalarına imkan sağlamak amacıyla kullanılır. Form elemlarını işlevsel kullanmak için en az bir tane web programlama dili bilmemiz gerekir örnegin; asp, aspx, php gibi
<form action=verigonder.asp method=post name=form1 target=_blank>
ACTION=url
METHOD=get-post
TARGET=Hedef Pençere
Name= Değişken

"Method", kullanıcının girdiği bilgileri ne şekilde alacağımızı belirler. İki seçeneği vardır, “Get” ve “Post”.
POST
1-)Yavaş
2-) Güvenli
3-) http header’ı kullanır.
4-) Sınırsız bilgi gönderir
GET
1-) Hızlı
2-) Güvensiz
3-) Browser’in adres satırını kullanır.
4-) Max 2048 karekter gönderebilir
action=verigonder.asp" alınan girdileri işleyecek programın url adresi yazılır. Eğer bir ACTION parametresi girilmez ise hedef adres belgenin kendisi olur.
Dikkat edilirse verigonder.asp sayfası uzantısından da anlışılacagı gibi htm sayfa degil asp ile hazırlanmış bir sayfadır, bizim htm sayfada hazırladıgımız forma girilen bilgileri alıp işleyecek şekilde yazılmış olacaktır.
Name : forma ve form elemanlarına bir ad verir. (Değişken ismi)
TARGET=window , Açılacak pencerenin özelliğini belirtir
FORM ELEMANLARI
1.<input>
<form>
<input type="" name="" value="" size="">
</form>
Type = Form öğesinin tipini belirler. Kullanmak mecbur. Default olarak metin veri tipi “text” kullanılır.
CHECKBOX: Boolean (İkili) değerler için ya da aynı anda birdan fazla değer alacak veriler için kullanılır. Her seçilen checkbox gönderilen veri içinde isim/değer ikilisi yaratır. Default değer "on" olarak kabul edilir.

HIDDEN: Kullanıcıya göstermeden içindeki değeri form ile beraber göderilen alan yaratır. Client/server alış-verişi içinde özel bilgiler göndermek için kullanılır.

IMAGE: Formu göndermek için kullanılan bir resim tanımlar. Herhangi bir VALUE parametresi dikkate alınmaz. Aynı <IMG> elemanında olduğu gibi, SRC parametresi resmin kaynağını tanımlar.
SRC: TYPE=IMAGE durumlarında kullanılan ve resmin kaynağını URL olarak veren parametredir.

PASSWORD: Aynı TEXT parametesi gibidir. Farklılık veriler girilirken görüntülenmez.

RADIO: Alternetifler arasından bir değer kabuş edilebilmesi için kullanılır. Grup içindeki bütün radio düğmelerine aynı isim verilmelidir. Yalnız seçilen düğme isim/veri ikilisi yaratır. Bir VALUE parametresine gerek duyarlar.

RESET: Form içindeki alanları daha önceden belirlenen değerlerine döndürmek için kullanılan bir düğmedir. VALUE parametresi düğmenin etiketini belirler.

SUBMIT: Basıldığında form içindeki verileri gönderen düğmedir. VALUE parametresi düğmenin etiketini belirler.

TEXT: SIZE ve MAXLENGHT parametreleri ile beraber tek satırlık veri girişlerinde kullanılır.

FILE: Form verileri ile beraber dosya göndermeyi olanaklı kılar.

--------------------------------------------------------------------------------

name= Form ögesine bir ad verir. Kullanmak mecbur.
value= Form ögesine değer verir. Kullanmak mecbur degil.
size= Form öğesinin karakter uzunluğunu belirler. Kullanmak mecbur degil.
Maxlength= Form ögesi metin kutusunun maximum uzunluğu belirler. Kullanmak mecbur degil.Varsayılanı sonuzdur. SIZE parametresinde belirtilen sayıdan fazla kelime girildiginde scrollbar aktif olacaktır.
ALIGN:Resmin dikey hizası. Yalnız, TYPE=IMAGE durumunda kullanılır. Alabileceği değerler, aynı <IMG> elemanındaki gibidir.
2.textarea (metin alanı) : birden fazla satırlık veri girişlerinde kullanılır.
Kullanımı; <textarea> </textarea>
<form>
iletiniz : <br>
<textarea name="isim" ROWS=”6” COLS=”35”>
Site Hakkındaki Görüşlerinizi Yazınız...</textarea>
</form>
iletiniz :

Site Hakkındaki Görüşlerinizi Yazınız...
rows dikey olarak metin alanının büyüklüğünü belirtir.
cols ise yatay olarak metin alanının büyüklüğünü belirtir.
<textarea> </textarea> arasında kalan kısımda yazdıklarımız ise "value" elemanının yaptığı işi yapar.yazılması gerekli degildir.
3. Select (menü) : Kullanımı; <select> </select>
Forms - <SELECT> .... </SELECT>
Alternatifler içinden birinin seçileceği durumlarda kullanılır.
Option: Alternatifler tanımlanır.
name menümüze isim tanımlar.
size Görünecek liste elemanı sayısını belirler..
selected, Seçeneklerden birini aktif yapar.( Eğer hiç bir eleman işaretlenmemiş ise ilk eleman seçilir olarak gelir)
Value , İlgili alternatife değer verir.
SELECT elemanı genelde Pull-down ya da Pop-up menü olarak işlem görür.
<SELECT NAME="Seçenekler?">
<OPTION value=”1”> seçenek - 1
<OPTION selected value=”2”> seçenek - 2
<OPTION value=”3”> seçenek - 3
<OPTION value=”4”> seçenek - 4
<OPTION value=”5”> seçenek - 5
</SELECT>
seçenek - 1seçenek - 2seçenek - 3seçenek - 4seçenek - 5
MULTIPLE: Kullanıcıya birden fazla seçenek seçebilmesi için olanak kılar
<select name="menu" size="3" multiple>
<OPTION value=”1”> seçenek - 1
<OPTION selected value=”2”> seçenek - 2
<OPTION value=”3”> seçenek - 3
<OPTION value=”4”> seçenek - 4
<OPTION value=”5”> seçenek - 5 </select>
</form>
seçenek - 1seçenek - 2seçenek - 3seçenek - 4seçenek - 5 >

cunobag · #13 05-06-2008, 04:24

html meta taglar imler Tag Hazırlama

Meta İmleri
HTML sayfasının kimliğini META imleri oluşturur. Meta imlerini kullanarak,sayfanızın içeriğini, yayıncısını, sayfanızı içeriğini özetleyen anahtar kelimeleri belirleyebilirsiniz. Kısacası META imleri sayfanın özeti ve kimliğidir diyebiliriz.
Bu Meta Tagları aslı olarak arama motorları için hazırlanmaktadır.Arama motorları robot programlar kullanarak sayfanızın içeriğini keşfe çıkarlar. İşte bu keşif META"lar sayesinde olur. Sitenizin içeriğini, META imlerine bakarak çözerler. Sitenizin tanıtımı açısından, META kullanımı çok önemlidir.
Meta Taglar
<head> </head>
Tagları arasında kullanılırlar. Head tagları arasına yazılan yazılar sayfada gözükmez.
Meta Tagların Kullanımı;
<meta name="keywords" content=" sitenizle ilgili kelimeleri buraya yazın.">
Sayfanızın arama motorlarında hangi kelemerde çıkmasını istiyorsanız aralarına virgule koyarak buraya yazınız.
<meta name="description" content="Dev bir müzik kütüphanesi"> Sayfanın kısa tanıtımı yapmak için kullanılır.
<meta name="author" content="Web Editörün İsmi"> Sayfayı tasarlayan kişi bilgisini gösterir.
<meta name="copyright" content="© Firma İsmi Veya Kişi İsmi"> Sayfanın telif hakkının kime ait olduğunu gösterir.
<meta name="generator" content="Macromedia DreamWeaver MX"> Sayfanızın hangi editörle yapıldığını gösterir.
<meta name="robots" content="ALL,FOLLOW,INDEX"> Sayfanızı tüm arama motorlarının veri tabanına kaydolabilme hakkının verilmiş olduğunu gösterir.
<meta name="rating" content="GENERAL"> Sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazılırsa bütün katagoride olduğu belirtilmiş olur.
<meta http-equiv="expires" content="Wed,13 May 2007 13:06:13 GMT">
Belirtilen saat standartına uyarak, verilen tarih ve saat doğrultusunda sayfanızı siler.
Örnek Meta Taglar.
<head> <title>Html Dersleri</title> <meta name="keywords" content="Html, Ders, Dersler,Html Nedir,Html Template"> <meta name="description" content="Açıklamalı Html Dersleri"> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-9"> <meta http-equiv="Content-Type" content="text/html;charset=windows-1254"> <meta http-equiv="Content-Language" content="tr"> </head>

cunobag · #14 05-06-2008, 04:24

html Metin Yazı Text Düzenleme

METİN BİÇİMLENDİRME
1.Font etiketinin kullanımı
Html dökümanımızda <font> etiketi kulanarak yazı biçimimizi kontrol edebiliriz. Bu etiketle "color", "size" ve "face" elemanlarını kullanabiliriz
Font Büyüklüğü
size= yazı büyüklüğü ('+1,+2,+3,....+7' değerleri ile yazı boyutu büyürken, '-1,-2,-3,......,-7' değerleri ile ise yazı boyutunu küçültür.)
<font>Font Büyüklüğü</font>
<font size="1">Font Büyüklüğü</font>
<font size="2">Font Büyüklüğü</font>
<font size="3">Font Büyüklüğü</font>
<font size="4">Font Büyüklüğü</font>
<font size="5">Font Büyüklüğü</font>
<font size="6">Font Büyüklüğü</font>
<font size="7">Font Büyüklüğü</font>

Font Rengi
color= yazı rengi (red, green gibi renklerin ingilizce karşılığı veya RGB –hexadecimal- renk değeri)
<font color="blue">Font Rengimiz.</font>
<font color="red"> Font Rengimiz.</font>
<font color="purple"> Font Rengimiz.</font>
<font color="orange"> Font Rengimiz.</font>
<font color="green"> Font Rengimiz.</font>
<font color="black"> Font Rengimiz.</font>
<font color="pink"> Font Rengimiz.</font>
<font color="brown"> Font Rengimiz.</font>
<font color="crimson"> Font Rengimiz.</font>

Font Türü
face= yazı tipi adı (arial, tahoma, verdana, ...)
<font face="Arial">Arial</font>
<font face="Arial Black">Arial Black</font>
<font face="Courier">Courier</font>
<font face="Courier New">Courier New</font>
<font face="Modern">Modern</font>
<font face="Terminal">Terminal</font>
<font face="

cunobag için teşekkür eden üyeler:
W-S

cunobag için teşekkür eden üyeler:
W-S

cunobag için teşekkür eden üyeler:
W-S

cunobag için teşekkür eden üyeler:
W-S