HTMLTAGLARI - KODLARI

İKİ TABLO YANYANA URL

İsim	HTML Tagı	HTML Kodu	Tarayıcı Önizleme
HTML Sadece Kodda Görünen Yazı	<!--	<!--Bu Alana Yazılanlar Sadece Kod Kısmında Görünecektir.-->	Önizleme Yok
HTML Siteye Link Verme	<a>	<a href="http://www.webkodu.com">Siteyi Ziyaret Et</a>	Siteyi Ziyaret Et
HTML Bold	<b>	<b>ÖRNEK</b>	ÖRNEK
HTML Big (Text)	<big>	<big>ÖRNEK</big>	ÖRNEK
Body HTML Döküman Tagı	<body>	<body>HTML İçerik Alanıdır</body>	HTML İçerik Alanıdır
HTML Alt Satıra Atma	<br>	WebKodu.com<br>Artık Herşey Tek Çatı Altında	WebKodu.com Artık Herşey Tek Çatı Altında
HTML Ortalama Tagı	<center>	<center>Bu Şekilde Yazı Ortalı</center>	Bu Şekilde Yazı Ortalı
HTML Tanım Açıklama	<dd>	<dl> <dt>Lionel Messi</dt> <dd>Barcelona Oyuncusu</dd> <dt>Cristiano Ronaldo</dt> <dd>Real Madrid Oyuncusu</dd> </dl>	Lionel Messi Barcelona Oyuncusu Cristiano Ronaldo Real Madrid Oyuncusu
HTML Tanım Liste	<dl>	<dl> <dt>Lionel Messi</dt> <dd>Barcelona Oyuncusu</dd> <dt>Cristiano Ronaldo</dt> <dd>Real Madrid Oyuncusu</dd> </dl>	Lionel Messi Barcelona Oyuncusu Cristiano Ronaldo Real Madrid Oyuncusu
HTML Tanım Adlandırma	<dt>	<dl> <dt>Lionel Messi</dt> <dd>Barcelona Oyuncusu</dd> <dt>Cristiano Ronaldo</dt> <dd>Real Madrid Oyuncusu</dd> </dl>	Lionel Messi Barcelona Oyuncusu Cristiano Ronaldo Real Madrid Oyuncusu
HTML Vurgu Tagı	<em>	WebKodu.com <em>Türkiye'nin En Kaliteli</em> kod sitesidir.	WebKodu.com Türkiye'nin En Kaliteli kod sitesidir.
HTML Mid Obje Ekleme	<embed>	<embed src="dosyaismi.mid" width="100%" height="60" align="center">
HTML Arkaplanda Müzik Ekleme	<embed>	<embed src="dosyaismi.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>
HTML Font Tagı	<font>	<font face="Times New Roman">WebKodu.com</font>	WebKodu.com
HTML Font ve Punto	<font>	<font face="Verdana" size="5">WebKodu.com</font>	WebKodu.com
HTML Font, Punto ve Renk	<font>	<font face="Comic Sans MS" size="+3" color="#ff0000">WebKodu.com</font>	WebKodu.com
HTML Form	<form>	<form action="mailto:you@yourdomain.com"> Name: <input name="Name" value="" size="10"><br> Email: <input name="Email" value="" size="10"><br> <center><input type="submit"></center> </form>	Name: Email:

İsim	HTML Tagı	HTML Kodu	Tarayıcı Önizleme
HTML h1 Tagı HTML h2 Tagı HTML h3 Tagı HTML h4 Tagı HTML h5 Tagı HTML h6 Tagı	<h1> <h2> <h3> <h4> <h5> <h6>	<h1>WebKodu.com</h1> <h2>WebKodu.com</h2> <h3>WebKodu.com</h3> <h4>WebKodu.com</h4> <h5>WebKodu.com</h5> <h6>WebKodu.com</h6>	WebKodu.com WebKodu.com WebKodu.com WebKodu.com WebKodu.com WebKodu.com
Headın İçine HTML Döküman	<head>	<head>Head İçine Yazılacak Yazılar</head>	Önizleme Yok
HTML Yatay Çizgi	<hr>	<hr />	Web Sayfa İçeriği Web Sayfa İçeriği
HTML Yatay Çizgi	<hr>	<hr width="50%" size="3" />	Web Sayfa İçeriği Web Sayfa İçeriği
HTML Yatay Çizgi	<hr>	<hr width="50%" size="3" noshade />	Web Sayfa İçeriği Web Sayfa İçeriği
HTML Yatay Çizgi	<hr>	<hr width="75%" color="#ff0000" size="4" />	Web Sayfa İçeriği Web Sayfa İçeriği
HTML Yatay Çizgi	<hr>	<hr width="25%" color="#6699ff" size="6" />	Web Sayfa İçeriği Web Sayfa İçeriği
HTML Ana Tag Dizilimi	<html>	<html> <head> <meta> <title>Sayfa Başlığı</title> </head> <body>Web Sayfa İçeriği </body> </html>	Web Sayfa İçeriği
HTML İtalik	<i>	<i>WebKodu.com</i>	WebKodu.com
HTML Resim Ekleme	<img>	<img src="Earth.gif" width="41" height="41" border="0" alt="Resim ile ilgili açıklama" />
HTML Input Field Ekleme	<input>	<form method=post action="#"> <input type="text" size="10" maxlength="30"> <input type="Gönder" value="Gönder"> </form>

HTML Input Password Ekleme	<input>	<form method=post action="#"> <input type="password" size="10" maxlength="30"> <input type="Submit" value="Gönder"> </form>
HTML Input (Arkaplan Rengi)	<input>	<form method=post action="#"> <input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Gönder"> </form>

HTML Input
(Resim Buton)

<input>

HTML Input
(Yorum Kutusu)

<input>

<form method=post action="#">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Gönder">
<input type="Reset" value="Temizle">
</form>

HTML Input (Radio Button)	<input>	<form method=post action="#"> Seçenek Seçin:<br> <input type="radio" name="option"> Seçenek 1 <input type="radio" name="option" checked> Seçenek 2 <input type="radio" name="option"> Seçenek 3 <input type="Submit" value="Gönder"> </form>	Seçenek Seçin: Seçenek 1 Seçenek 2 Seçenek 3
HTML Input (Checkbox)	<input>	<form method=post action="#"> Select an option:<br> <input type="checkbox" name="selection"> Seçenek 1 <input type="checkbox" name="selection" checked> Seçenek 2 <input type="checkbox" name="selection"> Seçenek 3 <input type="Submit" value="Gönder"> </form>	Select an option: Seçenek 1 Seçenek 2 Seçenek 3

HTML Madde	<li>	Menü 1: <menu> <li type="disc">Madde 1</li> <li type="circle">Madde 2</li> <li type="square">Madde 3</li> </MENU> Menü 2: <ol type="i"> <li>Madde 1</li> <li>Madde 2</li> <li>Madde 3</li> <li>Madde 4</li> </ol>	Menü 1: Madde 1 Madde 2 Madde 3 Menü 2: Madde 1 Madde 2 Madde 3 Madde 4
HTML Dışardan CSS Dosya Çağırma	<link>	<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>	Önizleme Yok
HTML Yazı Kaydırma	<marquee>	<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">ÖRNEK Marquee</marquee>	www \| WebKodu \| com - Artık Herşey Tek Çatı Altında
HTML Menü	<menu>	<menu> <li type="disc">Yuvarlak İmli Madde</li> <li type="circle">İçi Boş İmli Madde</li> <li type="square">Kare İmli Madde</li> </menu>	Yuvarlak İmli Madde İçi Boş İmli Madde Kare İmli Madde
HTML Meta	<meta>	<meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site">	Önizleme Yok
HTML Meta	<meta>	<meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/">	Önizleme Yok
HTML Meta	<meta>	<meta http-equiv="Pragma" content="no-cache">	Önizleme Yok
HTML Meta	<meta>	<meta name="rating" content="General">	Önizleme Yok
HTML Meta	<meta>	<meta name="robots" content="all">	Önizleme Yok
HTML Meta	<meta>	<meta name="robots" content="noindex,follow">	Önizleme Yok

İsim

HTML Tagı

HTML Kodu

Tarayıcı Önizleme

HTML Düzenli Liste

<ol>

Numbered

<ol>
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Numbered Special Start

<ol start="5">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Lowercase Letters

<ol type="a">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Capital Letters

<ol type="A">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Capital Letters Special Start

<ol type="A" start="3">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Lowercase Roman Numerals

<ol type="i">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Capital Roman Numerals

<ol type="I">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Capital Roman Numerals Special Start

<ol type="I" start="7">
<li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<li>Madde 4</li>
</ol>

Numbered

Madde 1
Madde 2
Madde 3
Madde 4

Numbered Special Start

Madde 1
Madde 2
Madde 3
Madde 4

Lowercase Letters

Madde 1
Madde 2
Madde 3
Madde 4

Capital Letters

Madde 1
Madde 2
Madde 3
Madde 4

Capital Letters Special Start

Madde 1
Madde 2
Madde 3
Madde 4

Lowercase Roman Numerals

Madde 1
Madde 2
Madde 3
Madde 4

Capital Roman Numerals

Madde 1
Madde 2
Madde 3
Madde 4

Capital Roman Numerals Special Start

Madde 1
Madde 2
Madde 3
Madde 4

HTML Fleaut Liste

<form method=post action="#">
<center>
Seçenek Seçin:
<select>
<option>Seçenek 1</option>
<option selected>option 2</option>
<option>Seçenek 3</option>
<option>Seçenek 4</option>
<option>Seçenek 5</option>
<option>Seçenek 6</option>
</select><br>
</center>
</form>

HTML Mailto Email Link <a> <a href="mailto:you@yourdomain.com">Email Link</a> Email Link

HTML Paragraf

<p>

<p align="left">
Sola Yaslı Örnek:<br>
WebKodu.com<br>
Artık Herşey<br>
Tek Çatı Altında</p>

<p align="right">
Sağa Yaslı Örnek:<br>
WebKodu.com<br>
Artık Herşey<br>
Tek Çatı Altında</p>

<p align="center">
Ortalı Örnek:<br>
WebKodu.com<br>
Artık Herşey<br>
Tek Çatı Altında</p>

Sola Yaslı Örnek:
WebKodu.com
Artık Herşey
Tek Çatı Altında

Sağa Yaslı Örnek:
WebKodu.com
Artık Herşey
Tek Çatı Altında

Ortalı Örnek:
WebKodu.com
Artık Herşey
Tek Çatı Altında

HTML Küçük(Yazı) <small> <small>WebKodu.com</small> WebKodu.com

HTML Üstü Çizili Yazı <strike> <strike>WebKodu.com</strike> ~~WebKodu.com~~

HTML Güçlü Yazı <strong> <strong>WebKodu.com</strong> WebKodu.com

HTML Tablo

<table>

ÖRNEK 1:

<table border="4" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

ÖRNEK 2:

<table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

ÖRNEK 3:

<table cellpadding="2" cellspacing="2" width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>

ÖRNEK 1:

Column 1

Column 2

ÖRNEK 2:

Column 1

Column 2

ÖRNEK 3:

Column 1	Column 2
Row 2	Row 2

HTML Tablo Veri

<td>

<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

Column 2

HTML Tablo Başlık

<th>

<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

HTML Döküman Başlık <title> <title>Web Sayfanızın Başlığı içindir</title> Önizleme Yok

HTML Tablo Dizisi

<tr>

<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

Column 2

HTML Teletype <tt> <tt>WebKodu.com</tt> WebKodu.com

HTML Altıçizili <u> <u>WebKodu.com</u> WebKodu.com

HTML Sıradışı Liste

<ul>

Menü 1:<br>
<br>
<ul>
<li>Madde 1</li>
<li>Madde 2</li>
</ul>
<br>
Menü 2:<br>
<ul type="disc">
<li>Madde 1</li>
<li>Madde 2</li>
<ul type="circle">
<li>Madde 3</li>
<li>Madde 4</li>
</ul>
</ul>

Menü 1:

Madde 1
Madde 2

Menü 2:

Madde 1
Madde 2
- Madde 3
- Madde 4

<body bgcolor="#000000">

Yazı Biçimlendirme Tagları

<font> </font>: Yazı biçimlerinin verildiği tagdır. <font> tagının bir takım parametreleri vardır Bunlar:

color : Önceden anlatılan teknikler ve renk kodlarıyla yazının rengini belirlenebilir.

Örnek:

<font color="#ff0000">Kırmızı renkli yazı</font>

face : face parametresi yazının hangi yazı biçimini kullanacağını gösterir.(helvetica , arial ,verdana... gibi).Bu parametreye yazı değerleri isimleri verilir. Yazı biçiminin görünmesi için web sayfasını açan bilgisayarda o yazı tipinin bulunması gerekmektedir. Eğer yoksa bir kaç yazı tipini alternatif olarak ve virgülle ayırarak yazabilirsiniz.

Örnek:

<font face="arial,verdana,helvetica">Bu yazı tipi arial dir. Eğer arial bulunmuyorsa diğer tipler kullanılır </font>

size : Font büyüklüğünü belirler. Bu parametreye 1 - 7 arası rakamlar girilir (1 en küçük , 7 en büyük).

Eğer en son kullanılan yazı tipi boyutu artırılıp azaltmak istenirse +1,+5,-3,-4 gibi değerler kullanılır.

<b> : Bu tag kullanıldığında bundan sonraki yazılar koyu (bold) olacaktır.

<i> : Bu tag kullanıldığında bundan sonraki yazılar italik (italic) olacaktır.

Örnek:

<html>

<head>

<title> Fontlar </title>

</head>

<body>

<font size="5" color="blue">Mavi büyük yazı</font>

<b>Mavi kalın yazı</b>

</font>

<b><i>Mavi kalın ve italik yazı</i></b>

</font>

</body>

</html>

Yukarıdaki örneği çalışma dizininize “ornek4.html” olarak kaydedin ve bir browser da görüntüleyin.

Başlıklar

Başlık tagları adındanda anlaşılacağı gibi başlık yazımında kullanılır. <h1> ,<h2> ,<h3> ,<h4> ,<h5> şeklindedir.

Örnek :

<html>

<head>

<title> Başlıklar </title>

</head>

<body>

<h1>Başlık1</h1>

<h2>Başlık2</h2>

<h3>Başlık3</h3>

<h4>Başlık4</h4>

<h5>Başlık5</h5>

</body>

</html>

Yukarıdaki örneği çalışma dizininize “ornek5.html” olarak kaydedin ve bir browser da görüntüleyin.

Başlıca Damgalar (Tags -- Takılar) <html></html>HTML kaynak dökümanı yaratır.<head></head>Kaynak dökümanın başlığıdır. Kaynağa ait veriler ve bazı genel komutlar içerir. Bu teknede yer alanlar web sayfasında görünmez. <body></body>Web sayfasının gövdesini yaratır. Burada yer alanlar, sayfada görünecek olanlardır.

Adlandırma

<title></title>Kaynak dökümana ad verir. Bu ad tarayıcını en üstünde görünür.

Gövde Nitelemeleri (Body Attributes)

<body bgcolor=?>Zemin (background) rengini belirler.<body text=?>Text (metin) rengini belirler.<body link=?>Link'in rengini belirler.<body vlink=?>Link gerçekleştikten sonraki rengi belirler.<body alink=?>Link'e tıklandığında alacağı rengi belirler.

Metin Damgaları (Text Tags)

<pre></pre>Önceden biçimlenmiş metinleri (preformatted text) olduğu gibi gösterir.<h1></h1>En büyük başlığı yazar.<h6></h6>En küçük başlığı yazar.<b></b>Koyu yazar.<i></i>İtalik yazar.<tt></tt>Teletype ya da daktilo-stili metin yaratır. Harf aralıkları orantılı olmak yerine hepsi eşit olur. <cite></cite>

;

Alıntıları belirgin kılmaya yarar. Genellikle italik biçemde yazar.

<em></em>
Metni belirgin kılar. Genellikle italik ya da koyu yazar.
<strong></strong>

Metni belirgin kılar. Genellikle koyu yazar.

Harf büyüklüğünü belirler. 1 den 7 ye kadar derecelendirir. Başka ölçekler de kullanılır.
<font color=?></font>

Harf rengini belirler.

Links

Hyperlink yaratır.
<a href="mailto:EMAIL"></a>

Bir mailto link'i yaratır.
<a name="NAME"></a>

Dökümanda bir yere link (sıçrama) yaratır.

Farklı bir dökümanda işaretli bir yere link (sıçrama) yaratır.

Metni Biçemleme (text Formatting)

<p></p>
Yeni paragraf yaratır.
<p align=?>

Paragrafı sola, ortaya ya da sağa yanaşık yapar.
<br>

Yeni satıra geçer.
<blockquote> </blockquote>

Metni iki yanda boşluk bırakarak belirgin kılar.

Tanımlı liste yaratır.
<dt>

Tanımlı listedeki terimleri belirler.
<dd>

Tanımlı listedeki terimlerin tanımlarını (açıklamalarını) belirler.

Numaralı liste yaratır.

Numaralı ya da numarasız listedeki maddeleri belirler. Numaralı listede maddelere sırayla numara verir. Numarasız listelere isteğe göre işaret (disk, çember vb) koyar.

Sıra numarasız liste yaratır.

Div ile damgalanmış bölümün sola, ortaya ya da sağa yanaşık olmasını sağlar. Genellikle, birçok paragraf içeren bölümlerin biçemlenmesinde kolaylık sağlat. Stil sayfalarında da kullanılır.

Grafik Öğeleri

Bir grafik (image) ekler.

Bir image'in konuşlandırıldığı satıra göre solda, sağda, ortada, üstte ya da altta durmasını sağlar.

İmage'in çerçevesinin kalınlığını belirler. 0 değeri çerçevesiz yapar.

<hr>

Yatay bir çizgi çizer.

Yatay çizginin kalınlığını belirler.

Yatay çizginin ekrana göre yatay doğrultudaki uzunluğunu belirler. Yüde orantılı belirtilebilir.

Gölgesiz yatay çizgi çizer.

Tablolar

Tablo yaratır

Tablonun bir satırını yaratır.

Tablonun bir satırında bir hücre yaratır.

Tabloda kolonlara başlık yaratır. (Normal hücrede yer alır. Metni ortalar ve koyu yazar.)

Tablo Nitelemeleri (Table Attributes)

Hücrelerin kenar kalınlıklarını belirler.
<table cellspacing=#>

Hücreler arası açıklığı belirler.

Hücre kenarı ile hücre içine yazılan metin arasındaki açıklığı belirler.

Tablonun genişliğini belirler. Pixel ya da ekran genişliğinin yüzde oranı cinsinden belirtilebilir.

Hücre içindeki metni yatay doğrultuda sola, ortaya ya da sağa yanaşık yazar.

Hücre içindeki metni düşey doğrultuda alt, orta ya da üste yanaşık yazar.

Bir hücrenin gereceği kolon sayısını belirler.
<td rowspan=#>

Bir hücrenin gereceği satır sayısını belirler.(default=1)
<td nowrap>

Bir hücredeki metnin satırlara ayrılmasını önler.

Çerçeveler (Frames)

Çerçeve (frame) yaratır. İç içe çerçeve olabilir.

Bir (ana) çerçeve içinde kaç tane yatay çerçeve oluşacağını belirler. Çerçevenin yatay uzunluğu pixel, ya da ana çerçevenin genişliğinin yüzde oranıyla belirlenebilir. İlk ana çerçeve bütün ekrandır.

Bir (ana) çerçeve içinde kaç tane düşey çerçeve (kolon) oluşacağını belirler. Çerçevenin yatay uzunluğu pixel, ya da ana çerçevenin genişliğinin yüzde oranıyla belirlenebilir. İlk ana çerçeve bütün ekrandır.

<frame>

Bir çerçeve içinde bir tek çerçeve yaratır.

Frame'i desteklemeyen tarayıcılar için alternatif açıklama yaratır.

Çerçeve Nitelemeleri (Frames Attributes)

Çerçevede görüntülenecek HTML dökümanını belirler.

Çerçeveye ad verir. Böylece, başka çerçevelerin burayı hedef seçmeleri olanağı doğar.

Çerçevenin sol ve sağ kenar boşluklarını (marj) belirler. 1 den küçük olamaz.

Çerçevenin alt ve üst kenar boşluklarını (marj) belirler. 1 den küçük olamaz.

Çerçevede kayma çubuklarının olup olmamasını belirler. "yes", "no" , "auto" değerlerini alabilir. Açık (default) değeri "auto" dur. "no" değeri kayma çubuğu koymaz.

Kullanıcının çerçeve boyutunu ayarlamasını önler.

Formlar

HTML yalnızca formun istemcideki görüntüsünü yaratır. Kullanıcının girdiği verilerin işlenebilmesi için, sunucuda istenen işi yapacak bir CGI scriptinin yazılmış olması gerekir.

<form></form> Form yaratır.<select multiple name="NAME" size=?></select>

Kayan çubuklu menu yaratır. Size nitelemesi, kaydırmadan kaç seçenek görüneceğini belirler.

<option> Menüde bir maddeyi etkisizleştirir. <select name="NAME"></select>

Çekme menüsü (pulldown menu) yaratır.

INPUT ile yaratılan metin alanı 1024 karakterle sınırlıdır. Onun yetmeyeceği yerde bir metin alanı (TEXTAREA) yaratılabilir. Textarea sınırsız giriş sağlar. Ancak ekrandaki yeri ve boyutları ROWS ve COLUMNS parametrelerinin nitelenmesiyle (değer verilmesiyle) belirlenebilir.

Çok seçmeli menüler için seçme (işaretleme) kutucukları [checkbox] yaratır.

Tek seçmeli menüler için seçme (işaretleme) [radio] düğmesi yaratır.

dd>

Bir satırda text girişi yaratır. Ençok 1024 karakterlik girişin uzunluğu SIZE parametresinin nitelenmesiyle (değer verilmesi) belirlenebilir.

Gönder düğmesi (Submit button) yaratır.

Gönder düğmesi üzerine bir resim (image) koyar.

Silbaştan düğmesi (Reset button) koyar.

 Açıklama yazmak için kullanılır
<!DOCTYPE> Dosya tipini belirtir
<a> Link belirtir
<abbr> Yazının bir kısaltma olduğunu belirtir
<acronym> Kelimenin başharfleri olduğunu belirtir
<address> iletişim adresleri için kullanılır
<applet> Gömülü aplet eklemekte kullanılır(html 4 ile bu özellik iptal edilmiştir)
<area /> Resmin parçalarına ait link vermeyi sağlar
<b> Koyu harfli yazı
<base /> Tüm linkler için kaynak kök adresi belirtir
<basefont /> Fon tipi belirtir (html 4 ile bu özellik iptal edilmiştir)
<bdo> Yazının yönünü belirler
<big> Büyük yazı tanımlar
<blockquote> Uzun alıntı metin olduğunu gösterir
<body> Dosyanın ana kısmını gösterir
<br /> Alt satıra geçiş işaretidir
<button> Gönderme butonu üretir
<caption> Tablo başlığı yazar
<center> Elemanı sayfada ortalar (html 4 ile bu özellik iptal edilmiştir)
<cite> Alıntı belirtir
<code> Bilgisayar kodları belirtir
<col /> Tablo sütunları için özellik verir
<colgroup> TAblodaki bir grup sütuna özellik verir
<dd> Tanım Listesi
<del> Silinmiş yazı
<dir> Klasör listesi belirtir (html 4 ile bu özellik iptal edilmiştir)
<div> Dökümanda bir bölümü temsil eder
<dfn> Tanım kelimesini gösterir
<dl> Tanım listesi elemanı
<dt> Tanım listesindeki elemanlardan biridir
<em> Vurgulanmış yazı
<fieldset> Form için çerçeve üretir
<font> Yazı özellikleri belirtir (html 4 ile bu özellik iptal edilmiştir)
<form> Bilgi yayıt formu
<frame /> Sayfa içinde gömülü pencere açar
<frameset> Sayfada bölme yapar
<h1> ile <h6> arası Başlık yazısı belirler
<head> Dökümanın temel başlık elemanlarını içerir
<hr /> Yatay çizgi
<html> sayfa türünü belirtir
<i> Eğik yazı
<iframe> Başka bir sayfayı dökümanda gösterir
<img /> Resim
<input /> Form için bilgi alanı
<ins> Eklenmiş yazı
<isindex> Dökümana ait arama kelimesi (html 4 ile bu özellik iptal edilmiştir)
<kbd> Klavye yazısı
<label> Form için metin etiketleri
<legend> Form çerçevesi için açıklama
<li> Liste elemanı
<link /> Dökümana dışardan bir kaynak bağlar
<map> resim için parçaları tanımlar
<menu> Menü listesi (html 4 ile bu özellik iptal edilmiştir)
<meta /> Dökümana ait önemli tanımlamaları içerir
<noframes> Frame özelliği kapalı ise gösterilecek yazı
<noscript> Javascript kapalı isse gösterilecek yazı
<object> Gömülü uygulamalar
<ol> Düzenli Liste
<optgroup> Seçim listesindeki alkalı bileşenler
<option> Seçim listesindeki elemanlar
<p> Paragraf başı
<param /> Gömülü uygulamalar için ayar kısmı
<pre> Düz yazı biçimi
<q> Kısa alıntı
<s> Üseri çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<samp> Örnek bilgisayar kodu gösterir
<script> Kullanıcı taraflı uygulama
<select> Seçim listesi
<small> Küçük yazı
<span> Dökümanda bir bölümü gösterir
<strike> Üzeri çizili ayzı (html 4 ile bu özellik iptal edilmiştir)
<strong> Kalın yazı
<style> Elemanların görünümünü belirten şekiller
<sub> Alt yazı
<sup> Üst yazı
<table> Tablo
<tbody> Tablo grubu
<td> Tablonun bir gözü
<textarea> Form için uzun yazı alanı
<tfoot> Tablonun dip kısmı
<th> Tablodaki başlık alanı
<thead> Tablo başlık grubu
<title> Dökümanın ana başlığı
<tr> Tablonun bir satırı
<tt> özel metin
<u> Altı çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<ul> Düzensiz liste

Paragraflar

<p> : Yeni bir paragraf yapmak için kullanılır.</p> şeklinde kapatılmaz. Bu tagla birlikte sadece “align” parametresi kullanılabilir.

align : Önceki bölümlerde anlatıldığı gibi left, center, right değerlerini alabilir ve paragrafın sağa, sola veya ortaya dayalı olmasını sağlar. Align parametresi kullanılmadığı durumlarda paragraf sola dayalı olur.

Kullanılış biçimi :

<p> veya <p align=“değer”> şeklindedir.

Örnek :

<html>

<head>

<title> Paragraflar </title>

</head>

<body>

<p> İlk paragraf sola dayalı

<p align="center"> İkinci paragraf ortalı

<p align="right"> Üçüncü paragraf sağa dayalı

</body>

</html>

Yukarıdaki örneği çalışma dizininize “ornek6.html” olarak kaydedin ve bir browser da görüntüleyin.

<br> : Yeni bir satır eklemek için kullanılır. </br> şeklinde kapatılmaz.

Web Sayfalarında Resim Kullanılması

Bir web sayfasında genellikle jpeg, gif formatlı resim dosyaları kullanılmaktadır. Bunun nedeni bu formattaki dosyaların boyutlarının daha küçük olması ve sayfalar görüntülenirken hızlı açılabilmesidir.

<img> : Sayfa içerisine bir resim yerleştirmek istenildiğinde kullanılır. Bu tag belli parametrelerle kullanılır.

Kullanılış biçimi

src : Resim dosyasının konumunu belirtir. Eğer resim dosyaları html dosyaları ile aynı klasörde ise sadece resim dosyasının adını yazmak yeterlidir. Fakat başka bir klasör veya URL altında ise o zaman resmin yolunu belirtmeniz gerekir.

Örnek 1: HTML dosyaları resim dosyaları ile aynı klasörde olsun. Bu durumda

src = “resim.jpg” şeklinde yazmalısınız.

Örnek 2: Resim dosyaları HTML dosyalarına göre “image” isimli bir alt klasörde olsun. Bu durumda

src = “image/resim.jpg” şeklinde yazmalısınız.

Örnek 3: Resim dosyaları www.progress.com adlı bir URL de olsun. Bu durumda

src= “http://www.progress.com/resim.gif”) şeklinde yazmalısınız.

Örnek 4:

<html>

<head>

<title> Resimlerle Çalışmak </title>

</head>

<body>

</body>

</html>

Yukarıdaki örneği çalışma dizininize “ornek7.html” olarak kaydedin ve bir browser da görüntüleyin.

border : Resmin etrafına yerleştirilecek kenarlığın kalınlığını vermek için kullanılır.

align : Resmin yatay konumunu belirler. Left, Center, Right değerlerini alabilir.

alt : Resmin üzerine fare ile gelindiğinde gösterilecek metni vermek için kullanılır.

weight : Resmin genişliği piksel cinsinden girilir.

height : Resmin yüksekliği piksel cinsinden girilir.

Örnek 5:

<html>

<head>

<title> Resimlerle Çalışmak </title>

</head>

<body>

</body>

</html>

Yukarıdaki örneği çalışma dizininize “ornek8.html” olarak kaydedin ve bir browser da görüntüleyin.

Resmin sola dayalı, kenarlıklı ve açıklamalı olduğuna dikkat ediniz.

Bağlantılar (Linkler)

Web sayfaları arasında gezinti yapılabilmesi için sayfaların içerisine linkler yerleştirilir. Başka bir sayfaya veya sayfa içerisindeki bir başka konuma linklerle ulaşılabilir.

<a> </a> : Link vermek için bu tag kullanılmaktadır. Bu tagda birtakım parametreler kullanılır. Bu parametrelerle hangi sayfaya link verildiği link verilen sayfanın nerede açılacağı bilgileri verilir.<a> tagı </a> ile kapatılır.

Kullanılış biçimi :

<a href=“değer” target=“değer” > Sayfada Görünecek Açıklama </a>

href : Hangi sayfaya link verileceğini belirler. Link verilecek dosya çalışma klasörünüzle aynı konumda ise dosyanın adını vermek yeterlidir. Fakat farklı bir konumda ise yolu belirtmelisiniz.

target : Bu parametre linke basıldığında sonucun nerede görüntüleneceğini belirler. Eğer kullanılmazsa linke basıldığında aynı sayfa üzerinde görüntüleme yapılır. Target parametresi en çok Frame’lerle birlikte kullanılır. Fakat bu konu daha ileride işleneceğinden şimdilik target parametresinin “_blank” değerinden bahsedilecektir.

“_blank” değeri linkin sonucunun yeni bir browser penceresinde açılmasını sağlar.

Eğer isterseniz sayfanızda kullandığınız bir linkin nereye bağlanacağına dair bir açıklamayı sayfanıza yerleştirebilirsiniz. Örneğin http://www.progress.com.tr adresine link verirseniz bu linke açıklama olarak Progress Türkiye yazabilirsiniz.
Örnek :

<html>

<head>

<title> Linkler </title>

</head>

<body>

<a href=“http://www.progress.com.tr” target=“_blank”>Progress Türkiye </a>

</body>
</html>

Yukarıdaki örneği çalışma dizininize “ornek9.html” olarak kaydedin ve bir browser da görüntüleyin.Sayfanızdaki linke tıkladığınızda Progress Türkiye sayfası yeni bir pencerede görüntülenecektir.Progress Türkiye açıklaması yerine <img> tagını kullanarak sayfanızdaki bir resmede link verebilirsiniz.
Örnek :<a href= “http://www.progress.com.tr” ><img src= “image/progress.gif”> </a>

“ornek9.html” adlı dosyanızda gerekli değişiklikleri yapın ve “ornek10.html” olarak kaydedin. Yaptığınız dosyayı bir browser da görüntüleyin. Bu örnekte resmin üzerine tıkladığınızda Progress Türkiye sayfası aynı pencerede açılacaktır.

Listeler

Web sayfalarında Word’ de olduğu gibi metinler maddeler halinde listelenebilir. Bu listeleme üç şekilde yapılabilir.

Sıralanmamış Liste (Unordered List)

Bu tipteki listelerde liste elemanları başlarında bir daire görüntülenerek listelenir.

Kullanılış biçimi :

<ul>

<li> Liste elemanı 1

<li> Liste elemanı 2

<li> Liste elemanı 3

<li> Liste elemanı 4

</ul>

Örnek :

<html>

<head>

<title> Sırasız Listeler </title>

</head>

<body>

<ul>

<li> Kastamonu

<li> Adana

<li> Yozgat

<li> Kayseri

<li> Ankara

<ul>

</body>

</html>

</body>
</html>