--------------------------------------------------------------------------------
Sayfalara resim eklemeTüm tarayıcıların resim desteklemediğini unutmayın. Sayfanız ne olursa olsun resimsiz görünebilmeli. Bu sayfayı ziyaret edenlere daha fazla serbesti sağlayıp, resimlerin görünemediği durumlarda sayfaya gelen ziyaretçiyi eli boş döndürmemiş olmaya yarar.
HTML'de resimler yazılardan bağımsız bir şekilde sunucu üzerinde ayrı dosyalar olarak bulunurlar. Resim ancak gif ve jpg gibi tarayıcının içinden görünebilien formatta ise sayfada kullanılabilir. Resimler evrensel kaynak belirleyici kuralları dahilinde internetin herhangi bir yerinden çağrılabilirler. Çağrılan resim aynı dizin içerisinde ise konum kısmına sadece dosya adının yazılması yeterli olacaktır.
<IMG SRC="resim.gif">
Diğer sayfa elemanları gibi resimlere link eklemek olasıdır. Diyelimki resim.jpg'ye tıklayınca dosya.htm veya belirli bir adresin açılmasını istiyoruz:
<A HREF="dosya.htm"><IMG SRC="resim.gif">[/url]
<A HREF="Gidilecek_Adres">
[/url]
Resimler hakkında söylenmesi gereken en önemli şey boyutudur. Aşırı veya bilinçsiz kullanımı sayfanızı gerçekten ağırlaştırabilir. Sayfanızın şimşek gibi açılmasını istiyorsanız resim boyutlarını 1-5K arasında tutmaya çalışıp, tüm sayfa artı resimlerin 30K'ye geçmemesine dikkat edin. Bir birine atlayan sayfalarınız varsa aynı resimleri tekrar kullanmaya çalışıp yeni resim sayısını azaltın.
Resimler içerisinde kullanılan ekstra bazı işaretler zaman içerisinde gereklilik nedeniyle doğmuştur.
WIDTH=300 HEIGHT=200 Resim boyutları, HTML içinde belirtildiğinde sayfa daha çabuk yüklenir, tarayıcı sayfayı çizmek için gereken resim boyutunu almak için sunucunun yanıtını beklemek zorunda kalmaz.
ALT="resim yazısı" Alt işareti, resim yokluğunda ve yükleninceye kadar görünen yazı.
BORDER=sayı kenar kalınlığı, mevcut renk ile istenen kalınlıkta gösterilir.
VSPACE=Sayı HSPACE=Sayı Resim etrafında dikey ve yatay eksende kullanılacak boşluk.
ALIGN=TEXTTOP/ABSCENTER/ABSBOTTOM/BOTTOM
ALIGN=LEFT/CENTER/RIGHT Hizalama işaretleri, gerektiğinde resim ile birlikte kullanılabilir.
LOWSRC="dusuk_rezolusyon.gif" Asıl resim yükleninceye kadar çabuk yüklenebilen düşük çözünürlüklü resim.
<IMG SRC="deneme.gif" WIDTH=300 HEIGHT=200 ALT="resim yazısı" BORDER=0 >
--------------------------------------------------------------------------------
Ses DosyalarıBir Sayfa yüklendiğinde otomatik olarak ses dosyasının çalması nasıl sağlanır?
<EMBED SRC="ses.wav" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=3 > WAV
<EMBED SRC="ses.au" AUTOSTART="TRUE" HIDDEN="TRUE" LOOP=2 > AU
<EMBED SRC="children.mod" HIDDEN="FALSE" WIDTH="166" HEIGHT="95" autostart="true" loop="false"> MOD
<EMBED SRC="enter.mid" HIDDEN=true AUTOSTART=true LOOP=true > MIDI
Aktif Ses Kullanımı:
<EMBED SRC="ses.wav" NAME="snd" WIDTH="1" HEIGHT="2" SES> Here is a <A HREF="page.htm"
OnMouseOver="Play_()">link[/url] aktif ses
--------------------------------------------------------------------------------
Tablolar:Tablolar artık HTML'nin vazgeçilmez parçalarıdır. Tablolar <TABLE > ile tanımlanır. </TABLE> ile biter. Her satır: <TR> ile başlar </TR> ile biter. Haneler: <TD> ile başlar </TD> ile biter. Başlık kısmı <CAPTION> içindedir. Border=0 tablo kenar kalınlığını belirtir.
İşte basit bir tablo:
<TABLE Border=1>
<CAPTION>Başlık</CAPTION>
<TR><TD>satır1 Sutun1</TD><TD>satır1 Sütün2</TD></TR>
<TR><TD>Satır 2 Sutun 1</TD><TD>Satır 2 Sütün 2</TD></TR>
</TABLE>
Tablo başlık kısmıda <TABLE > içerisinde kullanılabilen seçenekler şu şekilde:
Border=sayı tablo kenar kalınlığı
Width=sayı tablo genişliği, piksel olarak
Width=yüzde tablo genişliği, yüzde olarak bu ikisinden sadece biri kullanılabilir.
CELLPADDING=sayı Nesne-hücre aralığı
CELLSPACING=sayı Hücre-Hücre aralığı
BGCOLOR="#xxxxxx" Tablo Arkaplan Rengi
BACKGROUND="resim.jpg" Tablo Arkaplan Resmi
ALIGN=right/left/center Tablo hizalama
COLS=sayı Sütün sayısı ( #n adet eşit genişlikte sütün, eşit sütün genişlikli tablo)
Satır <TR> içerisinde kullanılan komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Satır Arkaplan rengi
BACKGROUND="resim.jpg" Satır Arkaplan Resmi
Hücre <TD> içerisinde HTML elemanlarının kendi komutlarına ilave olarak kullanılabilen komutlar:
ALIGN=CENTER/RIGHT/LEFT yatay hizalama
VALIGN=TOP/CENTER/BOTTOM/BASELINE dikey hizalama
BGCOLOR="#xxxxx" Hücre Arkaplan rengi
BACKGROUND="resim.jpg" Hücre Arkaplan Resmi
COLSPAN="2" Birleşen kolon sayısı
ROWSPAN="2" Birleşen satır sayısı
İç içe tablo kullanabilirmiyim? Hanelerin içerisinde ikinci bir tablo dahil HTML elemanlarından herhangi biri olabilir.
Bir sayfada yan yana dört resim yerleştirip, altına adlarını yazmak istiyorum.
İlk önce, 4 sütün 4 satır bir tablo yaratın. Her tablo satırı <TR> ile başlar </TR> ile biter. Haneler <td> ile başlar </td> ile
biter.
<TABLE Border=0 >
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>
Resimleri hanelere yani <td> ve </td> arasına yerleştirin. Tablo elemanlarında önemli olan elamanın </td> ve <td> arasına gelmemesidir. Yazıyı bir sonraki satırda aynı hanenin altına denk gelecek şekilde yerleştirin.
Bir kaç resmi birleştirip tek resimmiş gibi yüklemek istiyorum:
<table cellpadding="0" cellspacing="0" border="0">
0 aralıklı bir tablo tanımlar. Hücreler içerisindeki resimler arasında mesafe yoktur.
--------------------------------------------------------------------------------
FormlarFormlar kullanıcılardan gelen bilgileri standart şekillerde alan sayfanın etkileşimli alanlarıdır. Form kullanmanın e-mail almaya göre bir çok avantajı var. Eğer uygun yazılımlar geliştirirseniz form bilgilerini doğrudan istediğiniz yazılıma yönlenirebilirsiniz. Herhangi bir yazılım kullanmıyorsanız formunuzu ilk örnekteki gibi salt metin olarak e-mail adresinize gelecek şekilde ayarlayabilirsiniz.
<form action="mailto:kullanici@adresiniz.net?subject=Konu Başlığı" method="POST" enctype="text/plain" >
Form Elemanları
</form>
Cgi için örnek POST komutu:
<form method="post" action="Linkleri Görebilmek İçin
Kayıt Olun veya
Giriş Yapınğişken">
</form>
GET komutu nadir kullanıldığından anlatılmayacak.
Formlarda kullanılan bazı alan seçenekleri:
Radyo Buton'u tipi:
<BR>Soru1.
<BR><INPUT TYPE=Radio CHECKED NAME="Soru_adi1" VALUE="Birinci_Yanıt"> İkinci_Yanıt
<BR><INPUT TYPE=Radio NAME="Soru_adi1" VALUE="İkinci_Yanıt"> İkinci_Yanıt
<BR><INPUT TYPE=Radio NAME="Soru_adi1" VALUE="Üçüncü_Yanıt"> Üçüncü_Yanıt
Liste tipi soru:
<BR>Soru2<BR>
<SELECT NAME="Soru_adi2" >
<OPTION> Seçenek1
<OPTION> Seçenek2
<OPTION> Seçenek3
</SELECT><BR>
Küçük metin:
<BR>Soru3:<BR>
<INPUT TYPE=Text NAME="Soru_adi3" VALUE="varsayılan_değer" SIZE=25 MAXLENGTH=30><BR>
Geniş metin alanı:
<TextArea NAME="Soru4" ROWS=7 COLS=35 MAXLENGTH=100>
Varsayılan Yazı
</TextArea><BR>
Kutu işaretleme tipi soru
<Br> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek1">seçenek1
<BR> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek2">seçenek2
<BR> <INPUT TYPE="checkbox" NAME="Soru_adi3" VALUE="seçenek3">seçenek3
</UL>
Gönderme ve Sıfırlama butonları:
<INPUT TYPE=Submit NAME="Gönder" VALUE="Gönder">
<INPUT TYPE=Reset NAME="Reset" VALUE="Reset">
--------------------------------------------------------------------------------
Çerçeveler, FramesÇerçeveler veya Frames Netscape Navigator (2.0 üstü) ve Internet Explorer (3.0 üstü) tarafından desteklenen işaretlerdir. Aynı çerçeve içerisinde birden fazla sayfanın açılmasını sağlar. Çerçeve yapısı HTML'ye benzerdir, sadece <BODY> yerine <FRAMESET> içerir.
<FRAMESET> çerçeve içeren dokümanın hangi dokümanların bileşiminden oluşacağını ve bu dokümanların hangi biçimde yan yana geleceğini tanımlayan basit bir dokümandır. <FRAMESET>'den önce herhangi bir işaret olmamalıdır, yoksa tarayıcı tarafından gözardı edilir.
Örnek bir Frame dokümanı:
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Frame set içerisinde ROWS ve COLS yardımı ile dokümanın yaty mı dikey mi bölüneceği tanımlanır. Yine Frameset içerisinde her bölmeye ayrılan alan piksel veya yüzde olarak tanımlanabilir.
Yatay bölünen doküman:
ROWS="row_height_value_list"
<FRAMESET ROWS="20%,60%,20%">
<FRAMESET ROWS="100,*,100">
Frame komutu ilave olarak içerideki belgelerin özelliklerini belirler, dikkat ederseniz her pencereye bir isim verildi. Bundan sonra kullanılacak linklerde bu isimlerin kullanımı tıkalndığında istenen belgenin hangi çerçevede açılacağını belirler.
Aşaığdaki örnekte ilk sütün 150 piksel genişlikte, soldaki çerçevenin adı solframe, sağdaki çerçevenin adı sagframe olarak atandı. Solda açılacak belge solsayfa.htm sağda açılacak belge ise sagsayfa.htm adını taşıyor.
<FRAMESET COLS="150,*" >
<FRAME SCROLLING="yes" NAME="solframe" SRC="solsayfa.htm" >
<FRAME SCROLLING="yes" NAME="sagframe" SRC="sagsayfa.htm" >
</FRAMESET>
Frame komutunda kullanılan seçenekler:
SCROLLING="yes|no|auto"
NORESIZE
Çerçevesiz Doküman:
<noframes> <a href="main.html">Ana sayfa[/url] </noframes>
Çerçeveler sonlandırılmak istendiği zaman top seçeneği kullanılmalıdır.
<a href="test.html" target="_top">Çerçeveden Çık[/url] Çerçeveden Çık
--------------------------------------------------------------------------------
Comment Tag, veya Bilgi<!-- --> işareti içerisinde yazılanlar sayfa içerisinde görünmez ve sadece view source yapıldığı zaman bilgi verme amacını taşır. Bazı Javascript program parçalarnı eski tarayıcılardan saklamak için yine <!-- --> kullanılır. Eski programa dillerine alışkın olanlar için bu işareti REM ibaresine benzetebiliriz.
--------------------------------------------------------------------------------
META-işaretler:
Meta işaretler tarayıcılar, arama motorları ve sayfaya gelebilecek yazılımlara yönelik bilgiler içeren işaretlerdir. Sık kullanılan bir kaç Metaişaretin anlamını açıklamak yeterli olacaktır. Meta işaretler sayfada <HEAD> bölümü içerisine yerleştirlir.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9"> Turkish Metatag, Sayfanın Türkçe olduğunu ve uluslarası standart ensititüsünün ISO-8859-9 standardına uygun yapıldığını gösterir.
<META NAME="generator" CONTENT="Yazılım Adı"> Generator Meta tag, sayfanın hangi yazılım ile hazırlandığını gösterir.
<META NAME="Author" CONTENT=" Nevit "> Author Meta tag sayfanın hazırlayıcısı olan kişiyi gösterir.
<META NAME="keywords" CONTENT="keyword, keyword, keyword"> Content Meta tag Anahtar kelimelerin burada bulunması sadece bu bölüme bakan bazı arama motorlarının işini kolaylaştırır.
<META NAME="description"CONTENT=" Sayfanın tanımı "> Description Meta tag Bazı arama motorları arama motorunu kullanan kişilere bu bölümü gösterirler.
<META HTTP-EQUIV="Refresh" CONTENT="7;URL=index.html"> Refresh, İtme teknolojisi ile devreye giren bir meta işarettir. Sayfaya gelen kişi herhangi bir işlem yapmasa bile başka bir sayfaya aktarılır.
<META HTTP-EQUIV="Content-Type" Content-Base: "Linkleri Görebilmek İçin
Kayıt Olun veya
Giriş Yapın Content Base, sayfa içeriğinin bulunduğu URL'yi gösterir.
--------------------------------------------------------------------------------
TürkçeUluslararsı standartlar ensitütüsü ISO-8859-9'u Türkçe standardı olarak kabul ediyor. IE ve Netscape'de bunu destekleyenlerdendir. Türkçe standartlarına uygunluu denetlemek için önce browserinizin düzgün çalıştığından emin olmanız gerekir. Bunun için Linkleri Görebilmek İçin
Kayıt Olun veya
Giriş Yapın adresinde Browerinizin ISO-8859-9 karakterlerini düzgün gösterip göstermediğini kontrol edin.
ISO8859-9 Ansi-Turkish ve Windows-1254 ile neredeyse aynı karakter tablosuna sahip. ASC-II harfleri olduğu yerde çıkmasına rağmen Batı standardı olan ISO-8859-1 'den farklı olarak Türkçe harfler tanımlıdır.
Ayarlarınız doğru ise hepsinde sorunsuz Türkçe görürsünüz.
--------------------------------------------------------------------------------
Özet:HTML Basit bir işaretleme dilidir ve Hypertext Markup Language kıstaltmasıdır. WEB'de gördüğünüz tüm *.htm ve *.html uzantılı dokümanlar bu şekilde yazılmış.
<body> ve </body> arasındaki kısım dokümanın ana kısnmını oluşturur.
Burada paragraflar <p> ile başlar biter. Bundan sonra her ikisini yazmiyacağım. bitişler / içerir. yani paragrafın bittiği yerde istenirse </p> konur.
Bu şekilde hazırlanmış doküman web'de belli bir adrese konulunca isteyen buna girip içeriğine bakabilir.
Hala bir çok kişi Browserlerin 3.0 sürümleri kullaniyorlar. Opera kullanlar, Unix, Linux, Mac, OS/2 kullananlar var dünyada.
İletişimin amacı ziyaretçilere sorun çıkartmak olmamalı.
Dokümanın bir yerine resim koymak için, öncelikle en iyisi resim ve doküman aynı dizinde olmalılar. Değillerse resimin bulunduğu yer
dokümana tanıtılmalı. En basit resim ekleme komutu <IMG SRC="resim_adi.gif"> şeklinde. Bu arada dediğim gibi resim aynı
dizinde olmalı.
Size basit bir HTML örneği veriyorum:
<HTML>
<BODY>
<P>Merhaba </P>
<IMG SRC="resim.gif">
</BODY>
</HTML>
Burada merhaba diye bir yazı ve bir'de resim.gif adında bir resim olacak. Bunu notepad'e kopyalayın ve deneme1.htm adı ile kaydedin. Daha sonra Netscape ile deneme belgesini açın. Resim görünmüyorsa o dizin içerisinde resim.gif adında bir dosya olmadığı içindir. Bunu sağladığınız anda yazı ve resim görünecek
"Bu Konuya Teşekkür Edenler":
bekir, ferrari
