HTML Dili Hizmetinizde
Bu Dili Adınız Gibi Bilmelsiniz!

HTML de tagların işlevleri

 

 

<A>

    Bu tag linklerde kullanılır. Link için;

<a href="http://www.duvar.web.com">www.duvar.web.com</a>


Burada link yazılırken   

<a href="http://www.link.com"> buraya linkin adı yazılır </a>

örnek olarak    www.duvar.web.com

ayrıca bu tag aynı sayfanın değişik bölümlerine gitmektede kullanılmaktadır. örnek verecek olursak;

<a name="sayfaninbasi"></a>

sayfanı başına yukarıdaki gibi bir kod koyduktan sonra sayfanın herhangibir yerine ;

<a href="#sayfaninbasi">sayfanin başı</a>

örneğin:     sayfanin başı

<BODY>

Body tagı sayfanın en önemli taglarından birisidir. sayfanın Linkini, arkaplan rengi ve desenini, Yazı rengini vs.. onunla ilgilidir. Örnek olarak;

<body bgcolor="#400000" text="#FBF8CA" link="#000080" vlink="#804000" alink="#00FFFF">

Buradaki;
bgcolor:   Arka plan renkini gösterir.
text:   Yazının renklerini gösterir
link:   Linkin renklerini gösterir
vlink:   visited link anlamına gelir. Eğer önceden o linke girilmişse linkin aldığı renri belirtir.
alink:   active link anlamına gelir. Linke mousela tıklanıyorken aldığı renki gösterir

Ayrıca birde web sayfanızın arka plan rengini ve ya desenini bir image ile döşeyebilirsiniz.

<body bgcolor="#400000" background="back/back.gif" text="#FBF8CA" link="#000080" vlink="#804000" alink="#00FFFF">



<BR>

HTML kodu yazarken siz satır altına geçseniz bile browser da geçmez. Düz yazıymış gibi devam eder. işte <BR> tagı bu işe yaramaktadır. örnek verecek olursak;

tosun bu duvarda
hizmetinizdedir!

tosun bu duvarda<br>hizmetinizdedir

<CENTER>

Türkçe anlam olarak orta anlamına gelmektedir. Bir yazı, paragraf, başlık vs... Bulunduğu sayfa veya masanın en ortasına yerleştirir.

DUVAR

<center>DUVAR </center>

<FONT>

Bu tag ile yazacaklarınızı font çeşidi, renk, büyüklük - küçüklük, kalın, altı çizili vs.. sınıflandırır. örneğin;

D U V A R

<font face="Times New Roman" size="+2" style="font-weight: bold;" color="#0033cc">D U V A R</font>

font face:   Hangi tür font kullanılacağını belirtir. Burada Times New Roman kullandık ama birçok çeşit font türü bulunmaktadır.

size:   Burada yazının büyüklüğü küçüklüğü rakamlarla anlatılmaktadır. Rakam büyük olursa font da büyük olur. ( +2 ile 2 aynı değildir +2 daha büyüktür.)

style:   Style yazının sitilini belirler. aslında o konmadanda yapılabilir. Örneğin biz style="font weight: bold; yerine <b></b>arasına yazsaydıl aynısı olurdu.

Color:   bu yazıların renklerini belirler biz burda renk kodu koyduk. ama temel renklerin ingilizceleriyle de renk belirtmek mümkün. blue, red, yellow gibi...

<FORM>

Bir web sayfasında form gereklidir. Ziyaretçi ile dilago kurmanın en kolay yolu Form kullanarak olmaktadır. Bir form için perl dilinde yazılmış cgi veya pl uzantılı dosyalar gerekmektedir. Bunları internetten bulmak basittir fakat sitenizin bulunduğu server cgi desteği vermesi gerekmektedir. Eğer cgi desteği vermiyorsa Ziyaretçi ile e-mail den başka diaolog kuramayacaksınız demektir.

E-mail    

<FORM METHOD=POST ACTION="http://duvar.web.com/cgi-bin/formmail.cgi">
<input type=hidden name="recipient" value="babatosun@dostmail.com">
<input type=hidden name="subject" value="e-mail">
<input type=hidden name="return_link_url" value="http://www.duvar.web.com/">
<input type=hidden name="return_link_title" value="Back to Main Page">
<font face="arial" color="black">E-mail    </font><INPUT name="email" size="40" >
<INPUT type="submit" name="" value="Gönder">
<INPUT type="reset" name="reset" value="Temizle"></form>

FORM METHOD:   Buradaki METHOD= yerine yazılacak iki türlü kod vardır. bunlardan biri "GET" biriside "POST" dur. Bunlardan en çok kullanılan "POST" dur. çünkü daha çok veri iletebilir.

ACTION:   Karşısına bilgiyi işleyecek programın adresi verilmektedir. Bu programları kullanabilmek için server cgi desteği vermelidir.

input type=hidden name:    Bublar sırasıyla;  Hangi email adresine gideceği,  e-mailin konusu ne olacağını,  yolladıkan sonra çıkan pencerede back to main page çıkıp ona tıklandığında http://www.duvar.web.com adresine gideceğini belirler.

input name="email" size="40":   Ziyaretçinin emailini email: ziyaretçinin@emaili.com gibi birşey yazar. size="40" da yazılacak form bilgisinin uzunluğunu belirler.

input type="submit":   Gönderilmesi için basılan tüşü belirler. value="Gönder" ise Gönderilmesi için basılacak olan tuşun üzerindeki yazıyı belirler. Reset de aynı işlevle input type="reset" kodu yazıldığında form bilgilerini temizlemeye yarayan tuş ortaya çıkar.

<FRAMESET>

Web sayfanızda sayfanın sağında, solunda, üstünde, altında herhangibir yerinde içinde menüler bulunmasını ve o sayfanın hep aynı yerde durmasını istiyorsanız. Frame istiyorsunuz demektir. Frame gerçekten kullanıcıya rahat bir sörf imkanı sağlayan güzel bir dizayn şeklidir. Mesela benim sayfamda Frame var! İşte size örnek!!!Frame için örnek bir kod verecek olursak;

<FRAMESET COLS="17%,77%">
<FRAME NAME="toolbars" SRC="http://sizinsiteniz.com/toolbars.html"
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=AUTO NORESIZE>
<FRAME NAME="mainpage" SRC="http://sizinsiteniz.com/main.html"
MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=AUTO NORESIZE>
</FRAMESET>

Frame name:   frame name; framein adı demektir. eğer link veriyorsanız linke target="frmaeadı" koyunuz.

SRC:   Örneğimizde olduğu gibi frame dosyalarının adresleri yazılan yerdir.

MARGINHEIGHT:   Normal bir sayfanın yukarıdan ve aşağıdan oluşturacağımız boşlukları verir. Framelerde bu genelde 0 olur yani tam bir sayfa demek oluyor.

MARGINWIDTH:   Normal bir sayfanın genişliğiyle oluşturacağımız boşluğu belirler. Buda genelde "sıfır" olur.

SCROLLING:   

Buna genelde auto deniyor. Bu sayede frame uzun olduğunda sayfaya sığmadığında browserların sağındaki gibi okla aşğıya iniliyor. NORESIZE:   Resize=yes denidğinde Framein genişliği ziyaretçi tarafından ayarlanılabiliyor. NORESIZE olduğunda ayarlanamıyor.

<Hx>

Sayfanın başlığını büyük koymak için bu tag kullanılır örneğin;

DUVAR

DUVAR

DUVAR

DUVAR

<h1 align="center">DUVAR</h1>

<h2 align="center">DUVAR</h2>

<h3 align="center">DUVAR</h3>

<h4 align="center">DUVAR</h4>

Başlıklar h6 ya kadar gidiyor. Başlıkların rakamları yükseldikçe boyutları küçülür.
NOT: Burdaki align="center" herhangibir tagı ortalamak için kullanılır.

<HEAD>

<HEAD></HEAD> Arası web sayfasındaki ilk okunan yerdir. <TITLE></TITLE> ve meta taglarında oluşmaktadır.

TITLE;   Title kısmına sayfanın ismi girilmelidir. META;   Arama motorlarına yardımcı bir tagdır. Sitenizin Açıklaması anahtar kelimeleri, kimin yaptığı gibi bilgiler bulunmaktadır.


<HEAD>
<TITLE>TASUN'DAN SİZLERE</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<meta name="Keywords"CONTENT="internet, program, web okulu kultur sanat, gazete, haber, rehber, internet reberi, turkce">

<meta name="Description"CONTENT="TASUN'DAN SİZLERE">

<meta name="Author" CONTENT="Buraya Isminizi yazınız">

<meta name="GENERATOR" content="TASUN'DAN SİZLERE">
</HEAD>

<HR>

Sayfalarınızda çizgi çizen tagdır. örneğin;

<hr align="CENTER" size="1" width="480" color="Maroon">
<hr align="CENTER" size="2" width="480" color="Maroon">
<hr align="CENTER" size="3" width="480" color="Maroon">

size:   Çizginin kalınlığını bu rakamla belirlenir.

width:   Çizginin uzunluğu bu rakamla belirlenir.

color:   Çizginin rengini belirler.

<HTML>

Bütün sayfa bu tag la başlar ve biter. Sayfanın ilk başında bu tag olmalıdır. Sayfanın en sonunda bu tagın bittiğine dair tag olmalıdır. </HTML>

<IMG>

Bir image dosyasını sayfaya koymaya yarayan tag dır. Buradaki border; Resmin etrafını cercevelemeye yarar. alt= kısmına ise resmin ismi veya acıklaması yazılabilir.

<img src="image/mewtwo.gif" width=45 height=73 border=0 alt="soru">

<img src="image/mewtwo.gif" width=45 height=73 border=2 alt="soru">

Bir resmin link olmasını istiyorsak

<a href="http://www.duvar.web.com"><img src="image/mewtwo.gif" width=45 height=73 border=0 alt="soru"></a>

<LI>

UL tagına bakınız.

<MARQUEE>

Sayfada kayan yazılar çıkarma işini görür. Canlı sayfalar için vazgeçilmez bir tagdır.

Tosun bu duvarda hizmetinizdedir

<marquee>Tosun bu duvarda hizmetinizdedir</marquee>


DUVAR   (yazı uzunluğu scrollmaount)

<marquee scrollamount=50>DUVAR;/marquee>


DUVAR   (yazı bekletme scrolldelay)

<marquee scrolldelay=500 scrollamount=100>DUVAR;/marquee>


Tosun bu duvarda hizmetinizdedir

<marquee bgcolor="#800000" width="100" height="10"><font face="Arial" color="White" size="+1">TOSUN bu duvarda hizmetinizdedir.</font></marquee>

<TABLE>

Table, bir sayfa hazırlanırken dizayn için en çok kullanılan tagdır. Şimdi örneklere geçelim;

deneme1 deneme2 deneme3
A B C

<table><tr><th>deneme1</th><th>deneme2</th><th>deneme3</th> <tr><td>A</td><td>B</td><td>C</td> </table>



deneme1 deneme2 deneme3
A B C

<table border><tr><th>deneme1</th><th>deneme2</th><th>deneme3</th> <tr><td>A</td><td>B</td><td>C</td> </table>




deneme1 deneme2 deneme3
A B C

<table border=10> <tr><th>deneme1</th><th>deneme2</th><th>deneme3</th> <tr><td>A</td><td>B</td><td>C</td> </table>



deneme1 deneme2 deneme3 deneme4
A B C D 
<table border height=100>
<tr>
		<th>Food</th><th>Drink</th>
		<th>Sweet</th><th>Other</th>
<tr>
		<td valign=top>A</td>
		<td valign=middle>B</td>
		<td valign=bottom>C</td>
		<td valign=baseline>D</td>
</table>



Sarı Kırmızı
A B 
<table border><tr>
         <th bgcolor=ffaa00>Sarı</th> 
         <th bgcolor=Red>Kırmızı
 
<tr bgcolor=white>
         <td>A</td>
		 <td>B</td>
		 
</table>