Nevit'in "Sayfa" Sayfası |
HTM ne demek bilmiyorsanız bu sayfa sizin içindir. Biliyorsanız okuyup okumamak size kalmış. Eğer kendinize bir sayfa yapıp başkaları ile paylaşmak istiyorsanız burası başlamak için iyi bir yerdir. Bu sayfa tüm soruları yanıtlayacak bir ders kitabı olarak değil bir başlangıç olma niyeti ile hazırlandı.
Bir sayfa hazırlarken düz metin üzerinde çalışabilen her hangi bir metin düzenleyiciyi kullanabilirsiniz. HTML sayfa editörü denen bazı basit programlarda bu sayfada adı geçen tag adındaki işaretler hazır bulunmaktadır. Ancak bu programların kullanımı zorunlu değil. Notepade ile herhangi bir sayfayı düzenleyebilir veya sıfırdan yaratabilirsiniz.
HTML belgelesinin tarayıcı tarafından uygun bir biçimde görünebilmesi için uygun şekilde başlamalı ve sonlanmalı. Tüm sayfa bu başlangıç ve son arasında yer alır.
Bir HTML sayfasının en basit biçimi şu şekilde:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
Sayfanın ana bölümü burada olacaktır.
</BODY>
</HTML>
Burada dikkat etmeniz gereken bir şey var. Başlama işaretleri köşeli parantez içinde (< >), bitiş işaretleri (</ >) kesmeli köşeli parantez içinde yer alıyor.
Örneğin HTML sayfasının başlangıcı <HTML> ile açılır, </HTML> ile kapatılır.
Başlamak için yukarıdaki kodu kopyalayıp istediğinizi yere yapıştırabilirsiniz. Bu belgeyi salt metin olarak ve *.htm uzantısı ile kaydedin. Belgenizi artık herhangi bir tarayıcıda görebilirsiniz.
HTML öğrenmenin en iyi yolu onu kullanmaktır. Kullandıkça kullanımını
bilmediğiniz yeni işaretleri öğrenecek daha gelişmiş sayfalar yapabileceksiniz.
Kullandığınız metin düzenleme programında bul/değiştir özelliği bulunması
toplu değişiklikler yapmanızı kolaylaştırır. Yaptığınız her sayfa ile yeni
şeyler öğreneceksiniz.
Dokümandaki öznitelikler <BODY> gibi basit bir işaretin şu şeklide değiştirilmesi ile oluşur.
<BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
bgcolor: doküman arkaplan rengi
text: dokümandaki yazının rengi
link: linklerin rengi
vlink: daha önce ziyaret edilmiş linklerin
rengi
alink: üzerine tıklandığında aktifleşen
linkin alacağı renk.
Bünların hepsini aynı renk yapmayın yoksa hiç bir şey göremeyebilirsiniz. Bunların herhangi birini kullanabilir veya sadece <BODY> yazarak hiç birini kullanmayabilirsiniz. Bu durumda sayfa görüntülenirken kullanıcı tarayıcısının önceden ayarlı renkleri kullanılacaktır. Renkleri değiştirmek için sadece yukarıdaki xxxxxx leri istediğiniz renk ile değiştirin.
İşte kullanabileceğiniz bir kaç renk:
Öneri başlamak için en basit renkleri kullanabilirsiniz:
<body text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000">
Deneme ve yanılmalarınız devam ederken, bir süre sonra body işaretlerinden oluşan kendi kütüphaneniz olacaktır.
Body içinde belirtilebilen özniteliklerden biride kenarlardır:
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0> Margins
<BODY BACKGROUND="zemin.jpg" text="#000000" link="#0066CC" vlink="#336600">
işaretini kullanabilirsiniz.
Bu resim sayfa ile aynı dizin içerisinde bulunmalı ve adı küçük/büyükharf olarak tag'de yazılan biçimi ile aynı olmalıdır. İnternet üzerindeki sistemlerin hiçbirinde dosya isimlerinde Türkçe harfler kullanılmamaktadır.
background işareti bgcolor
ile birlikte kullanıldığında arkaplan resmi yükleninceye kadar sayfa bgcolor
renginde görünecektir.
Bu yatay çizigye bir kaç ekstra özellik kazandırmak mümkün:
Kalınlık: SIZE=sayı
Hizalama: ALIGN=LEFT/RIGHT/CENTER
Genişlik: WIDTH=yüzde veya WIDTH=sayı
Gölgesiz: NOSHADE
Bu özellikleri birleştirerek:
<hr size=10 align=left noshade width=50%>
aşağıdaki gibi bir çizgi yapmak mümkün:
Sola dayalı, 10 piksel genişliğinde, gölgesiz, ve sayfa genişliğinin
yarısı genişlikte bir çizgi.
Web sayfalarında gördüğünüz bir çok süslü çizgi <hr> işareti ile değil, resimler kullanılarak oluşturulmuştur.
<ul>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ul>
Sırasız liste şu şeklide görünecektir.
<ul>
<li>Birinci madde
<li>İkinci madde
<ul>
<li>İkinci madde birnici şık
<li>İkinci madde ikinci şık
</ul>
<li>Üçüncü madde
</ul>
Döngülendirilmiş liste şu şekilde görünecektir.
<ol>
<li>Birinci madde
<li>İkinci madde
<li>Üçüncü Madde
</ol>
Listeniz aşağıdaki gibi görünecektir.
<dl>
<dt> Elmalar
<dd> Elmalar hakkında bilgi burada verilmektedir.
<dt> Armutlar
<dd> Armutlar hakkında bilgi burada verilmektedir.
</dl>
İşte yukarıdaki tanım listesi aşağıdaki şekilde görünecekir.
<h1>Birinci düzey başlık</h1>
<h2>İkinci düzey başlık </h2>
<h3>Üçüncü düzey başlık </h3>
<h4>Dördüncü düzey başlık </h4>
<h5>Beşinci düzey başlık </h5>
<h6>Altıncı düzey başlık </h6>
İşte yukarıda tanımlanan başlıklar aşağıdaki gibi görüneceketir.
Örnek olarak
<center> Bu yazı ortalanacaktır </center>
yazısı aşağıdaki gibi görünecektir:
Bu yazı ortalanacaktır.
Ortalanan birden fazla satır varsa başlangıç ve bitiş işareteri arasındaki tüm satırlar ortalanır.
HTML 3.0'da Dvisin içerisinde align: "Left", "Right" ve "Center" tanımlı. Html 4.0 Tag'ı olan Align:"Justify" bir çok Browserde sorun yaratabilir. Bu nedenle sayfanız düzgün görünsün istiyorsanız bir süre için kullanmamanızı öneririm.
<DIV ALIGN="CENTER">Bu yazı ortalanacaktır</DIV>
ve
<CENTER> Bu yazı ortalanacaktır </CENTER>
arasındaki tek fark <CENTER> işaretinin
tüm tarayıcılar tarafından desteklenmesidir.
Örnek:
b e n d a ğ ı nık b i r ada m ı m bır ak ın dağ ı nık k a l s ı n<pre> içine aldığımız metinlerin biçimi korunmuş olacak.
Koyu görünmesini istediğini metin parçasını <b> işaretleri içine yerleştirin.
<b> Koyu yazı </b>
Yazınız aşağıdaki gibi görünecektir.
Koyu yazı
Eğik görünmesini istediğiniz yazıyı <i> işaretleri arasına yerleştirin.
<i> Eğik yazı </i>
Yazınız aşağıdaki gibi görünecektir.
Eğik yazı
Hem eğik hem koyu görünmesini istediğiniz yazıda her iki işareti kullanabilirsiniz.
<b><i> Koyu ve Eğik Yazı</i></b>
Yazınız aşağıdaki gibi görünecektir.
Koyu ve Eğik Yazı
Her iki işareti kullandığınız durumda işaretleri açma sırasına göre kapatmalısınız. Örneğin Koyu yazı eğikten önce açılmışsa, sonra kapatılmalıdır. Aşağıda anlatılan işaretler için aynı kurallar geçerlidir.
Diğer komutlar gayet basi ve kullanımı diğerleri gibidir. Her birinden birer örnek yeter diye düşünüyorum.
<U>Alt Çizgili</U>
Alt Çizgili
<STRIKE>Üstü Çizgili</STRIKE>
Üstü Çizgili
<Strong>Güçlü</Strong>
Güçlü
<EM>Vurgu</EM>
Vurgu
<BIG>Büyük</BIG> İç içe döngü OK
Büyük
<Small>Küçük</Small> İç içe döngü OK
Küçük
<SUB> Alt yazı </SUB>
Alt yazı Alt yazı
<SUP> Üst yazı </SUP>
Üst yazı Üst yazı
<FONT SIZE=+1> </FONT> Font boyutunu arttırır.
<SAMP>Örnek Kod </SAMP>
Örnek Kod
<CODE>Örnek Kod </CODE>
Örnek Kod
<TT>Teletype </TT>
Teletype
<VAR>Değişken Notu </VAR>
Değişken
<CITE>Kısa Not </CITE>
Kısa Not
İşte işaret:
<blink> Yanıp sönerim! </blink>
Ve yazı böyle görünecektir.
Bunu fazla yapmamaya dikkat edin.
<FONT COLOR=#KKYYMM>
Yazının bulunduğu yer </FONT> Yazı rengini değiştirir
İlk iki harf kırmızı pixeli, orta iki harf yeşil, son iki harf mavi pixel renk değerini belirler. Değerleri 0-F arası değişebilir. 000000 hepsi sönük yani siyah, FFFFFF hepsi tam şiddet yani beyaz...
<FONT COLOR="#000000">Siyah</FONT>
<FONT COLOR="#FF0000">Kırmızı</FONT>
<FONT COLOR="#00FF00">Yeşil </FONT>
<FONT COLOR="#0000FF">Mavi</FONT>
<FONT COLOR="#FFFF00">Sarı</FONT>
<FONT COLOR="#FF00FF">Mor</FONT>
<FONT COLOR="#00FFFF">Turkuaz</FONT>
<FONT COLOR="#FFFFFF">Beyaz</FONT>
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Başa dön
Tarayıcılar sizin sayfanızı nasıl düzenlediğinize bakmazlar. Onlar
işretlere bakarlar. Satırbaşı ve paragraf işaretleri olmadığı sürece metin
tek paragraf halinde devam eder. Bu işaretleri gördüklerinde satırlar erkenden
son bulur.
<br> yani satır başının yaptığı etki
metin parçasını boşluk bırakmadan yeni bir satırdan devam ettirmesidir.
<p> yani paragraf işaretinin tek farkı
yeni başlayacak metin parçasından önce bir satırlık boşluk bırakmasıdır.
Bu işlemi geçekleştirmek iki aşamalıdır.
1. Hedef belirlemek Sayfada gidilecek noktaya hedef veya
target adı verilmektedir. Gidilecek her noktanın bir adı olmalıdır. Bu
adı daha önce tanımlamak gerekmektedir. <a name="hedef_adi">
Bu tanım gidilecek yerde olmalıdır.
2. Bağlantı yaratmak: Link içinde iki şey'i tanımlamak
gerekmektedir. Tıklanacak metin, ve gidilecek nokta
<a href="#hedef_adi">Tıklanacak yazı</a>
Link olarak tanımladığımız yazı, altı çizgili ve <body> içinde tanımlı link rengi ile görünecektir. Üzerine tıklandığında kullanıcı hedef olarak tanımladığımız noktaya gidecektir. Bu sayfadaki Başa dön işaretleri ve içindekiler bölümü bu tarz bir sayfa içi atlamanın örnekleridir.
<a href="boludagece.jpg"> Bolu'da Gece
</a>
Bolu'da Gece
Bunun için sadece belgenin bulunduğu dizinin göreceli veya mutlak konumu ve gidilecek dokümanın adını belirtmek yeterlidir.
<a href="göreceli_yol_ve_dosaya_adi">Link Yazisi</a>
Örnekler:
Kök dizinde bulunan varsayılan belge:
<a href="/">Ana sayfa</a>
Bu sunucu üzerindeki Ana sayfa
Sunucu üzerinde /SoHo/Museum/9404/ dizininde bulunan barutcu.jpg
resim belgesi
<A HREF="../SoHo/Museum/9404/barutcu.jpg"> Şinasi
Barutçu</A>
Şinasi Barutçu
Mevcut dizinin altında olan eski altdizin'indeki aramis.htm belgesi
<A HREF="eski/aramis.htm"> Aramis </A>
Mevcut dizinin bir üst dizininde bulunan scandisk.txt saltmetin
belgesi
<A HREF="../scandisk.txt">Scandisk Hakkında</A>
Kullanıcıyı hipermetin aktarım protokolu (hyper text transfer protocol, http) ile çalışan herhangi bir sisteme yönlendirmek için evrensel kaynak belirleyici tipini belirtmek kullanımı zorunludur. Bu örnekte URL veya internet adresi veya evrensel kaynak belirleyici olarak http:// kullanılmıştır. Gidilecek sayfa http://www.boyutbilgi.com.tr/ifsaksergi/index.html olsun
<a href="http://www.boyutbilgi.com.tr/ifsaksergi/index.html">"IFSAK
Sanal Ortam Sergisi"ne Git </a>
"IFSAK
Sanal Ortam Sergisi"ne Git
Şifreli http protokolu:
<A HREF="https://sunucu.adı">Link Yazısı</A>
Kullanımı http'ye benzer.
Daha önce belirtildiği gibi tek URL tipi http değildir. Diğer protokoller için farklı evrensel kaynak belirleyiciler vardır.
Bunların kullanımını örnekler ile açıklamayalım. Protokollerin ne anlama geldiğini açıklamak bu belgenin kapsamı dışındadır.
Varsayılan sunucu üzerindeki grup adına yönelik linkler:
<A HREF="news:grup_adi">Link Yazısı</A>
<A HREF="news:soc.culture.turkish"> SCT</A>
SCT
Sunucuya yönlendirilmiş linkler:
<A HREF="news://sunucu_adi">Link Yazısı</A>
<A HREF="news://news.istanbul.edu.tr">Istanbul
Üniversitesi Haber Sunucusu</A>
Istanbul Üniversitesi Haber Sunucusu
Belli sunucu üzerindeki gruba yönelik evrensel kaynak belirleyiciler:
<A HREF="news://sunucu_adi/grup_adı"></A>
<A HREF="news://news.marun.edu.tr/alt.culture.turkish.internet">acti
grubu</A>
acti
grubu
Secure (Şifreli, Güvenli) iletişim destekleyen haber sunucusu:
<A HREF="snews:secnews.netscape.com">Netscape
Güvenli Haber Sunucusu</A>
Netscape Güvenli Haber Sunucusu
Kullanıcı hesabı kullanılarak haber sunucusuna bağlantı:
<A HREF="news://kullanıcı_adi:ş[email protected]ı/">Link
Yazısı</A>
Dosya aktarım protokolu (FTP) link'i
<A HREF="ftp://ftp.zdnet.com">ZDnet FTP sunucusu</A>
ZDnet FTP sunucusu
Kullanıcı hesabı kullanılarak FTP'ye bağlantı:
<A HREF="ftp://kullanıcı_adi:ş[email protected]ı/">Link
Yazısı</A>
Her hangi bir e-mail adresine gönderilecek mektup:
<A HREF="mailto:kullanıcı@doamin.adı">Link
Yazısı</A>
<A HREF="mailto:[email protected]">Nevit'e mektup</A>
Nevit'e mektup
Birden fazla kullanıcıya mektup:
<A HREF="mailto:[email protected][email protected]&[email protected]">Link
Yazısı</A>
Birden
fazla adrese e-mail
Mektup içerisinde varsayılan başlık ve metin:
<A HREF="mailto:kullanıcı[email protected]?subject=Başlık
Buraya&body=Gövde içindeki yazı">Link Yazısı</A>
Varsayılan
Başlık ve Yazı içeren mektup
Telent protokolu, uzaktaki bilgisayara terminal bağlantısı:
<A HREF="telnet://sunucu.adi">Link Yazısı</A>
<A HREF="telnet://ttnbbs.rtpnc.epa.gov">Air
Polution BBS USA</A>
Air Polution BBS USA
Gopher Protokolu:
<A HREF="gopher://sunucu.adi">Link Yazısı</A>
<A HREF="gopher://gopher.metu.edu.tr">ÖDTÜ
Gopher Sunucusu</A>
ÖDTÜ Gopher Sunucusu
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">
<IMG SRC="http://sunucu.adi/dizin_adi/resim.jpg">
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"></A>
<A HREF="Gidilecek_Adres"><IMG SRC="http://sunucu_adi/dizin_adi/resim.jpg"></A>
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 >
<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</A> aktif
ses
İş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.
<form action="mailto:[email protected]?subject=Konu
Başlığı" method="POST" enctype="text/plain" >
Form Elemanları
</form>
Cgi için örnek POST komutu:
<form method="post" action="http://sunucu_adi/cgi-bin/program_adi.pl?değ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">
<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</a> </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</a> Çerçeveden Çık
<!-- --> 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 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:
"http://www.geocities.com/SoHo/Studios/9594> Content
Base, sayfa içeriğinin bulunduğu URL'yi gösterir.
Uluslararsı 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 http://www.immt.pwr.wroc.pl/export_hp/test/
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.
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.