html etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

4 Kasım 2012 Pazar

HTML Resimler

Kod : <img src=”dosyaismi.gif”>

Text ve Gömülen Resimin Düzeni

Kod : <img…> belirteciyle bazı özellikleri kullanarak text ve resim arasında nasıl bir düzen olmasını istiyorsanız ayarlayabilirsiniz. <img> belirtecinin içine yerleştirilen align özelliği sayesinde aşağıdaki efektleri yapabilirsiniz:

align=top

Kod:

<img align=top src=”dosyaismi.gif>

Yazı buraya gelecek. Dikkat ederseniz, ilk satırdan sonraki yazı
boşlukları dolduruyor.

align=middle

Kod:

<img align=middle src=”dosyaismi.gif”>

Yazı buraya gelecek. Bu sefer “align=middle” yani “orta” dediğimiz
için yazı grafiğin ortasından devam ediyor.

align=bottom (normal)

Kod:

<img align=bottom src=”dosyaismi.gif”>

Yazı bu sefer buraya gelecek. “align=bottom” demekle yazının en

alt kısımda olacağını belirttik.

HTML Dökümanımıza Resim Yerleştirelim

Bu çalışmada, üzerinde çalıştığımız dökümana bir giriş resmi koyacağız.

Çalışmanızı, açık değilse tekrar açın.
Text editörünüzde volkanlar.html dosyasını açın.
<h1>Volkanlar Sayfası<h1> başlığının üzerine şunu yazın:

Kod:

<img src=”lava.gif”>

Bu belirteç, sayfanızın en üstüne daha önce bulduğunuz volkan resimini yerleştirir. “lava.gif”, bu dosyanızın ismidir; eğer dosyanızın ismi değişikse, “lava.gif” yerine o ismi yazmalısınız.
Dosyanızı kaydedin ve browserınızda tekrar yükleyin.

NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandığınız resim dosyası HTML dökümanınızla aynı dizinde olmalıdır. Eğer değilse, dosyanın bulunabileceği yerin tam yolunu yazmalısınız.

Resimi yerleştirdiğinizde aklınıza neden resim belirtecinden sonra <p> belirtecini kullanmadığınız gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir başlık <hN> belirteci olmasıydı; daha önce gördüğümüz gibi bir browser başlık belirteçlerinden önce ve sonra bir satır boşluk bırakır (paragraf belirtecine gerek kalmaz).

HTML Arka Plan

Varsayılan olarak sitenizin arka planı beyaz görünür. Bu sitenize belli bir sadelik, ferahlık getirsede, çoğu zaman bunu değiştirmek isteriz. Farklı bir renk, hatta belli bir fotoğrafla arka planınızı döşemek ister miydiniz? Bu ders işte bunun için. Bunu yapmak içinde her zamanki gibi body etiketini kullanacağız ama bu sefer biraz farklı bir şekilde. Bu sefer kodlarımızı body etiketinin altına değil, bizzat body etiketinin yanına yazacağız. Şöyleki "body bgcolor="#000000" Bu kod arka planı siyah yapacak mesela. bgcolor etiketi arka planın rengini belirlerken kullanılıyor. #000000 ise siyah rengin HTML dilindeki karşılığı. Bunun gibi tüm renklerin karşılıklarını netde aratıp bulabilirsiniz. Şimdi biz yapacağımız örnekte arka planı siyah, yazı renginide beyaz yapalm mesela. Bunun için aşağıdaki kodu kullanmamız gerekir.

Html Arka Plan Dersleri

HTML Formlar

Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki
veri alışverişini sağlamak için ideal bir araçtır.

Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.

Bir form oluşturmak için <form>...</form> etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir.

Genel kullanım

<form action=url method=get-post target=pencere>...</form>

Action Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir.

Method Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir.
GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye yönlendirir.

Target Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede
belireceğini gösterir. Pencere isimleri HTML 1 modülü bağlantılar konusunda da
gösterdiğimiz _blank , _top gibi değerlerden biri olabilir.

<input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde
belirtilerek farklı girdilerin alınmasını sağlar.

Genel kullanımı:

<INPUT ALIGN="konum" [CHECKED] MAXLENGTH="uzunluk" NAME="isim" SIZE="boyut" TYPE="tip" VALUE="değer" SRC "image">

Kullanılacak Parametre Görevi
ALIGN Elemanın form üzerinde nasıl konumlanacağını belirtmek için
kullanılır (left, center, right). Eğer type değeri bir resim olarak
atanırsa bir sonraki satırın resme göre nasıl yerleştirileceğini
belirler. Top, middle veya bottom değerlerinden birini alabilir.

CHECKED Kontrol olarak bir işaretleme veya seçim kutusu
kullanıldığında CHECKED değeri bu kutuların işaretlenmiş
olarak karşımıza gelmesini sağlar.

MAXLENGTH text ve password elemanlarında girilebilecek en çok
karakter sayısını belirtmek için kullanılır. Öntanımlı değeri
sınırsızdır.

NAME Girilen verinin hangi değişken ismi altında
değerlendirileceğini belirtmek için kullanılır. Mutlaka
belirtilmelidir.

SIZE text ve password elemanlarında karakter sayısını,
diğerlerinde ise piksel cinsinden genişliği belirtmek için
kullanılır.

SRC "image" elemanında resim dosyasını belirtmek için kullanılır.
TYPE Eleman türü belirtilir. text, password, checkbox, radio,
submit, reset, file, hidden, image, button değerlerinden biri
kullanılır.

Form Nesneleri
CheckBox Formumuza onay kutuları eklemek için kullanılır.

<HTML>
<body >
<FORM ACTION=' http://sitem.com/form.php' METHOD=POST>
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL
</FORM>
</body>
</HTML>

Radio Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup
içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine atanmalıdır.

Text Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu
kontrolle birlikte kullanılabilir.

Image Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar.
Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu
URL'yi göstermelidir.

Password Formumuza parola yazılabilecek alan eklemek için kullanılır. text elemanından
farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilir. Bu * işareti de olabilir.

<HTML>
<body >
<FORM ACTION=' http://sitem.com/form.php' METHOD=POST>
<input type="radio" name="kutu" value="1"> HTML<br>
<input type="radio" name="kutu" value="2"> PHP<br>
<input type="radio" name="kutu" value="3"> MySQL</FORM>
</body>
</HTML>
Adı: <input type="text" name="firstname"><br>
Soyadı: <input type="text" name="lastname">
Kullanıcı:
<input type="text" name="username"><br>
Parola:
<input type="password" name="password">
<input type="submit" name="submit" value="Gönder">
</FORM>
</body>
</html>

Textarea Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır.

Reset Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.

Submit Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir.

Uygulama

<html>
<head><title>Form Etiketleri</title><head><body>
<h1> Sanal Sınıf</h1>
<form action="http://sitem.com/form.php" method="post"><br>
Kullanıcı Adı:<input type="text" name="ad"><br>
E-posta Adresi:<input type="text" name="eposta"><br>
İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız.
<textarea name="mesaj" rows="10" cols="50"><br>
<input type="reset" name="reset" value="Temizle">
<input type="submit" name="submit" value="Gönder">
</FORM>
</body>
</html>

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-formlar.html

HTML Listeleme

Selam ile arkadaşlar. Birazdan size listeleme etiketlerini vereceğim. Listeler bize bir çok alanda lazım olabiliyor. Artık nerede kullanacağınız size kalmış tabi. html ile bir kaç şekilde listeleme yapabiliriz. Örneğin sayı olarak listeleme, noktalı olarak, boş nokta olarak, kare şekli olarak. Aşağıda liste etiketleri yer alıyor.

Sayılarla listeleme;

KOD:

<ol>
<li>asp.net</li>
<li>php</li>
<li>photoshop</li>
<li>flash</li>
</ol>

Noktalı listeleme;

KOD:

<ul>
<li>asp.net</li>
<li>php</li>
<li>photoshop</li>
<li>flash</li>
</ul>

Büyük harfle Listeleme;

KOD:

<ol type="A">
<li>asp.net</li>
<li>php</li>
<li>photoshop</li>
<li>flash</li>
</ol>

İçi boş nokta ile listeleme;

KOD:

<ul type="circle">
<li>asp.net</li>
<li>php</li>
<li>photoshop</li>
<li>flash</li>
</ul>

Kare ile listeleme;

KOD:

<ul type="square">
<li>asp.net</li>
<li>php</li>
<li>photoshop</li>
<li>flash</li>
</ul>

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-listeleme.html

28 Ekim 2012 Pazar

HTML Tablolar

TABLOLAR

Genel kullanımı; Öncelikle <table>...</table> etiketlerini yazıyoruz,. <tr> etiketi ile satır açıyoruz; <td> etiketi sütun açıyoruz.

<table>
<tr>
<td> … </td>
</tr>
</tablo>

Örnekler;

hücre

<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>

hücre1

hücre2

<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>

hücre1	hücre2
hücre3	hücre4

<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>

<table border= “1”> Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.

<table width=”100”> Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.

<table height=”50”> Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.

<table cellspacing=”2”> Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.

<table cellpadding=”5”> Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.

<table bgcolor=”#ffff00”> Tablonun genel arka plan rengini belirlemek için kullanılır.

<table align=”left”> ; <table align=right>; <table align=center> Tablonun konumunu ayarlamayı sağlar.

<table background=”tugla.gif”> Tablonun arkasına resim konulabilir.
< table bgcolor=”#ffff00” > Tablonun arka zemin rengini ayarlar.

<td> Takısının Parametreleri

Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa, sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.

<td bgcolor=”#00ffff”> Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.
<td width=”250”> Hücre genişliğini belirlemek için kullanılır.
< td height=”50”> Hücre yüksekliğini belirlemek için kullanılı
<td colspan=”2”> Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.

<td rowspan=”2”> Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.

<td background=”hasan.gif”> Hücrenin arka planına bir resim yerleştirir.
<td align=”left”>, <td align=”right”>; <td align=”center”> Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.

<td valign="top”>, <td valign="middle”>, <td valign="bottom”>, <td valign="baseline”> sadece <td> ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) dayar.

Not : Align parametresi hücre içinde yatay hizalama yapar. Valign parametresi hücre içinde düşey hizalama yapar.

Not: <table border=“1”> takısı kullanıldıgında table ve td takısında <td bordercolor:#ff0000”> veya <table bordercolor:#ff0000”> paremetresi kullanıldıgında çerçevenin tüm kısımları aynı renge boyanıyor. Bordercolor yerine <BORDERCOLORDARK=”#ff0000”> kullanılırsa tablo çerçevesinin gölgeli kısmını <BORDERCOLORLIGHT=”#ff0000”> kullanılırsa çerçevenin ışığa bakan kısmını renklendiriyor.

Kenarlık renklerinde ayarlama yapmak

A.) Tablomuzun sadece bazı yerlerindeki iç kenarlıkları da yok etmemiz mümkün. Bunu <table> tagının "rules" elemanı ile yapabiliriz.

"Rules" Elemanının parametreleri.:

• none : Tüm iç kenarlıkları yok eder.
• rows : Dikey iç kenarlıkları yok eder.
• cols : Yatay iç kenarlıkları yok eder.

Örnek;

<table border="1" bordercolor="blue" rules="cols" cellpadding="5" cellspacing="0">

<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</table>

Tarayıcınızda şöyle gözükecektir:

1.satır 1.sütun	1.satır 2.sütun
2.satır 1.sütun	2.satır 2.sütun
3.satır 1.sütun	3.satır 2.sütun

B.) Tablomuzun sadece bazı yerlerindeki dış kenarlıkları yok etmemiz mümkün. Bu özelliği <table> tagının "frame" elemanı sayesinde gerçekleştiririz.
Frame" Elemanının Parametreleri.
• void : Tüm dış kenarlıkları yok eder.
• above : Sağ,sol ve alt kenarlığı yok eder.
• below : Sağ,sol ve üst kenarlığı yok eder.
• hsides : Sağ ve sol kenarlıkları yok eder.
• vsides : Üst ve alt kenarlıkları yok eder.
• rhs : Üst, alt ve sol kenarlığı yok eder.
• lhs : Üst, alt ve sağ kenarlığı yok eder.

Örnek;

<table border="1" bordercolor="red" frame="vsides"
cellpadding="5" cellspacing="0">

<tbody>
<tr>
<td>1.satır 1.sütun</td>
<td>1.satır 2.sütun</td>
</tr>
<tr>
<td>2.satır 1.sütun</td>
<td>2.satır 2.sütun</td>
</tr>
<tr>
<td>3.satır 1.sütun</td>
<td>3.satır 2.sütun</td>
</tr>
</tbody>
</table>

Tarayıcınızda şöyle gözükecektir:

1.satır 1.sütun	1.satır 2.sütun
2.satır 1.sütun	2.satır 2.sütun
3.satır 1.sütun	3.satır 2.sütun

Colspan ve Rowspan kullanımı ile ilgili örnekler

1		2	3
4			5
6	7	8	9

1	2	6	3
4	5		7
4	8		9

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-tablolar.html

HTML Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.

Örnekler

Dikey Çerçeveler

Yatay Çerçeveler

Çerçeveler

Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.

Çerçeve kullanmanın dezavantajları:

Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur.
İstenilen sayfanın yazıcıya gönderilmesi zordur.

Frameset Etiketleri

<frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
Her frameset satır (rows) veya sütun (cols) olarak belirlenir

Frame Etiketi

<frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.

Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25'i ayrılmıştır. İkincisine ise %75'i ayrılmıştır. "frame_a.htm" birinci sütuna, "frame_b.htm" ise ikinci sütuna yerleştirilmiştir:

HTML-Kodu:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols="200,500"), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols="25%,*").

Temel Notlar - Yararlı İpuçları

Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize="noresize" parametrelerini <frame>etiketi içine yazabilirsiniz.

<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.

Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!

Frame Etiketleri

Etiket: Açıklama

<frameset>: Frame ayarlarını belirtir.
<frame>: Alt pencere (çerçeve) belirtir.
<noframes>: Frame desteğinin kullanılmamasını sağlar.
<iframe>: İç frame belirtir.

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-cerceveler.html

HTML Bağlantılar

HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.

Örnekler

Link oluşturma

Bir resime link vermek

<a> Etiketi ve href parametresi

HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır.

Kullanım biçimi:

Kod:

<a href="url">Görüntülenecek Metin</a>

Bir örnek:

Kod:

<a href="http://www.htmldersleri.org/">Kodlayın, Tıklayın, Görün...</a>

Kodlayın, Tıklayın, Görün...

Hedef (target) Parametresi

Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.

Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.

Kod:

<a href="http://www.htmldersleri.org/" target="_blank">Kodlayın, Tıklayın, Görün...</a>

<a> Etiketi ve Name Parametresi

Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.

Kullanım Biçimi:

Kod:

<a name="label">Görüntülenecek Metin</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

Bir Örnek:

Kod:

<a name="ipucu">Yararlı Bilgiler</a>

İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu yazınız:

Kod:

<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">
Yararlı İpuçları</a>

Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek:

Kod:

<a href="#ipucu">Yararlı İpuçları</a>

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-baglantilar.html

HTML Özeller

HTML HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.

Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır.

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

Özel Karakterler
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

HTML dökümanı içinde bu tip karakterleri görüntülemek için < veya < yazmalıyız.

Bir numara yerine isim kullanılmasının avantajı, isimlerin daha rahat hatırlanabilmesidir. Dezavantajı ise piyasadaki tüm tarayıcılarda tam desteklenmemesidir.

Özel karakterlerin büyük/küçük harfe duyarlı olduğuna dikkat ediniz

Örnek: Özel Karakterler
--------------------------------------------------------------------------------

Birden Fazla Boşluk Bırakabilmek
Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız özel karaktlerini kullanınız.

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

En Çok Kullanılan Özel Karakterler
Sonuç Açıklama Özel karakterleri Numaralı Hali
Fazladan boşluk
< Küçüktür < <
> Büyüktür > >
& Ve & &
" Alıntı " "
' apostorof ' (IE'de çalışmaz) '

Bazı Başka Özel Karakterler
Result Description Özel karakterleri Numaralı Hali
¢ Cent ¢ ¢
£ Pound £ £
¥ Yen ¥ ¥
€ Euro € €
§ Section § §
© Copyright © ©
® Kayıtlı marka ® ®
× Çarpma × ×
÷ Bölme ÷ ÷

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-ozeller.html

HTML Biçimlendirme

HTML, metini koyu veya itelik yapmak için bir çok tanımlama biçimi barındırır.

Aşağıda bu konu ile ilgili bir çok örneği görebilir ve kendiniz deneyebilirsiniz.

Örnekler

Metin Biçimlendirme

Biçimlendirilmemiş Metin

"Programlama dili biçimlendirmeli" etiketler

Adres

Kısaltmalar

Metin Yönlendirme

Alıntılar

Üstü ve Altı Çizili Metinler

HTML Kaynak Kodları Nasıl Görüntülenir?

Tarayıcınızın araç çubuğunda "Görünüm" menüsüne geldikten sonra "Kaynağı Görüntüle" seçeneğini tıklayınız.

Metin Biçimlendirme Etiketleri

Tag: Açıklama

<b>: Koyu metin
<big>: Büyük metin
<em>: Vurgulanmış metin
<i>: İtalik metin
<small>: Küçük metin
<strong>: Güçlü metin
<sub>: Alt indis metini
<sup>: Üst indis metini
<ins>: Altı çizili metin
<del>: Üstü çizili metin
<s>: Önemsiz etiket, bunun yerine <del> kullanınız.
<strike>: Önemsiz etiket, bunun yerine <del> kullanınız.
<u>: Önemsiz etiket, bunun yerine styles kullanınız.

"Programlama Dilleri" Etiketleri

Tag: Açıklama

<code>: Programlama dili metini
<kbd>: Klavye metini
<samp>: Örnek bilgisayar kodu metini
<tt>: Tele tip metin
<var>: Değişken
<pre>: Biçimlendirilmemiş metin.
<listing>: Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext>: Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp>: Önemsiz etiket, bunun yerine <pre> kullanınız.

Alıntılar ve Açıklamalar İle İlgili Etiketler

Tag: Açıklama

<abbr>: Kısaltma
<acronym>: Baş harfleri ile kısaltma
<address>: Adres öğesi
<bdo>: Metin yönü
<blockquote>: Uzun alıntı
<q>: Kısa alıntı
<cite>: Alıntı
<dfn>: Tanımlama terimi

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-bicimlendirme.html

27 Ekim 2012 Cumartesi

HTML Parametreler

Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.

HTML Etiket Nitelikleri

HTML etiketleri parametrelere sahip olabilir. Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.
Parametreler daima isim/değer çiftleri arasında gelir: name="value".
Parametreler daima başlangıç etiketi içerisinde belirtilir.

Parametre Örneği 1:

<h1> başlık belirtir.
<h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir.
Kendin dene: Ortaya hizalanmış metin

Parametre Örneği 2:

<body> HTML'in body kısmını belirtir.
<body bgcolor="yellow"> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.
Kendin dene: Arkaplan rengi

Değerleri (Value) Daima Tırnak İçerisine Alın

Parametrelerin değerli her zaman tırnak içerisinde olmalıdır.
Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz:
name='Cem "GORA" Yilmaz'

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-parametreler.html

HTML Etiketler

HTML Etiketler Dersleri

1. <html> </html> Etiketi ;

Daha öncede belirttiğim gibi html kodlarının yorum aralığını başlatmak için bu etiketi kullanırız. Sayfamızın head ve body bölümleri bu etiketin yorum aralığında tanımlıdır.

Örnek :

1 <html>
2 <head>... head etiketinin içeriği ....</head>
3 <body>
4   ....
5   body etiketinin içeriği
6   ....
7 </body>
8 </html>

2. <head> </head> Etiketi ;

Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır.

<html>
  <head>
    <title>.....</title>
  </head>
  <body>
    ....
    body etiketinin içeriği
    ....
  </body>
</html>

3. <body> </body> Etiketi ;

HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz.

Tablo 1.1. Body etiketinin bileşenleri

Girilecek Kod	Görevi
text = “renk”	Sayfanızdaki yazıların rengine `renk` ile belirtilen değeri verir.
link = “renk”	Sayfanızdaki bağların rengine `renk` ile belirtilen değeri verir.
vlink = “renk”	Sayfanızdaki ziyaret edilmiş bağların rengine `renk` ile belirtilen değeri verir.
alink = “renk”	Sayfanızdaki aktif bağların rengine `renk` ile belirtilen değeri verir.
bgcolor = “renk”	Sayfanızın arka plan rengine `renk` ile tanımlı değeri verir.
background = “resim_dosyası”	Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, `resim_dosyası` kullanacağınız resmin adını temsil eder.
topmargin = “değer”	Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler.
leftmargin = “değer”	Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler.
rightmargin = “değer”	Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler.
onload = “betik”	Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
onunload = “betik”	Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler.

Yukarıdaki tabloda kullandığım renk değeri HTML içinde kullanılan renk kodlarını temsil etmektedir. Altı basamaktan oluşan bu renk kodları ana renkler olan mavi, sarı ve kırmızının kullanılan renkteki tonuna göre onaltılık tabanda sayılarla istediğimiz rengi elde edebiliriz.

Renk kodları hakkında kısa bir bilgi vermek gerekirse kodlar ikişer basamaklı üç bölümden oluşur. Aşağıdaki tablo bu konu hakkında kafanızda oluşan soru işaretlerinin silinmesinde size yardımcı olacaktır.

Tablo 1.2. Renk Kodlarının Yapısı

Kırmızı	Yeşil	Mavi
00...FF	00...FF	00...FF

2. Satırda ifade ettiğim aralıklara değişik değerler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) vererek rengi oluşturmamız mümkündür. Kod kullanmanın yanı sıra renkleri doğrudan İngilizce adlarını yazarak da kullanabiliriz. Örneğin beyazın kodu olan #FFFFFF yerine white yazmamızda sonucu değiştirmeyecektir.

Tablo 1.3. Bazı Renkler ve Kodları

Renk Adı	Kodu
black (siyah)	#000000
maroon (k.kırmızı)	#800000
green (k.yeşil)	#008000
navy (lâcivert)	#000080
purple (k.mor)	#800080
teal (k.türkuaz)	#008080
oliver (hâki)	#808000
gray (gri)	#808080

Renk Adı	Kodu
silver (gümüş)	#C0C0C0
red (kırmızı)	#FF0000
lime (yeşil)	#00FF00
blue (mavi)	#0000FF
magenta (mor)	#FF00FF
aqua (türkuaz)	#00FFFF
yellow (sarı)	#FFFF00
white (beyaz)	#FFFFFF

Dikkat ederseniz her renk kodu bir diyez (#) işareti ile başlıyor ve daha sonra altı basamaktan oluşan bir bölüm geliyor. Bu altı basamak içinde F yada fbulunduğu basamaktaki rengin tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin hiç kullanılmamasını sağlamak için kullanılır. Yine html kodlarında olduğu gibi renk kodlarında da büyük-küçük harf ayrımı yoktur. Yani #FFFFFF ve #ffffff aynı rengi yani beyazı temsil eder.

<body text="#000000" bgcolor="#FFFFFF" link="#808080" vlink="#eaeaea" alink="#000000">

<body text="#000000" background="../resimler/arkafon.gif">

<body bgcolor="#334455" text=”#ffffff" topmargin="0">

Yukarıdaki birinci kod satırı sayfamızın arka plan rengini beyaz, yazıları siyah, bağları ve ziyaret edilmiş bağları gri ve etkin bağları da siyah yapmak için kullanılır.

İkinci satır ise yazı rengini siyah yapmak, bulunduğumuz dizinin bir üst dizinindeki “resimler” dizininde bulunan “arkafon.gif” resmini artalan yapmak için kullanılır.

Yazdığım son satır ile de sayfamın arka fon ve yazı rengini belirliyor, sayfamın bileşenlerinin istemci penceresinin üst kenarlığına olan uzaklığı sıfırlıyorum.

4. <title> </title> Etiketi ;Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır.

<head>
<title>İlk HTML denemem</title>
</head>

5. <center> </center> Etiketi ;

Kendi yorum aralığında bulunan tüm etiketlerin ekran çıktılarını browser penceresine ekranı ortalayacak şekilde basar.

<center>
....
Burası etiketin yorum aralığı
.....
</center>
...
Burası center etiketinin yorum aralığının dışında

6. <hx> </hx> Başlık Etiketleri

Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.

Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme kodu kullanılabilir. Etiketin kullanımı <h1 align="center">Bu benim en büyük başlığım!</h1> şeklindedir. Etiketin yorum aralığındaki metin başlık olarak ekrana basılır.

<h1 align="center" style="color:black;">Bu başlıklar gittikçe küçülecek!!!</h1>
<h2 align="center" style="color:blue;">Bu başlıklar gittikçe küçülecek!!!</h2>
<h3 align="center" style="color:navy;">Bu başlıklar gittikçe küçülecek!!!</h3>
<h4 align="center" style="color:green;">Bu başlıklar gittikçe küçülecek!!!</h4>
<h5 align="center" style="color:maroon;">Bu başlıklar gittikçe küçülecek!!!</h5>
<h6 align="center" style="color:purple;">Bu başlıklar gittikçe küçülecek!!!</h6>

Yukarıdaki örneğin istemci çıktısı aşağıdakine benzer olacaktır.

Bu başlıklar gittikçe küçülecek!!!

7. <b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt>Bunlar yazı tiplerinin nasıl yorumlanacağını belirten etiketlerdir.

<b>kalın</b>, <i>eğik</i>, <s>üzeri çizili</s>, <u>altı çizili</u>,
<small>küçük</small>, <big>büyük</big>, <tt>daktilo yazısı</tt>

kalın, eğik, ~~üstü çizili~~, altı çizili, küçük, büyük, daktilo yazısı

8. <sub> </sub>, <sup> </sup>Formül ve benzeri metinleri yazarken kullanılır.

H<sub>2</sub>SO<sub>4</sub> <br>
E = mc<sup>2</sup>

H₂SO₄
E = mc²

9. <hr> Etiketi ;

Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Bu etiket ile tanımlanabilecek üç değişik özellik vardır.

Tablo 1.4. hr etiketi içinde kullanılan kodlar

Girilecek Kod	Görevi
width = "genişlik"	Çizilecek çizginin yatay uzunluğunu belirlemek için kullanılır.
size = "kalınlık"	Çizilecek çizginin kalınlığını belirtir.
color = "renk"	Çizilecek çizginin rengini belirtir.

Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi


<hr width="100%" color="#0000F8" size="4">
çizer.

Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi

çizer.

10. <p> </p> ve <br> Etiketi ;

BR etiketinin sonlandırıcısı (</br>) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır.

Burada bir metin var
Bir alt satıra geçtiğimi sanıyorum!

Yukarıdaki metin ekran yan yana basılacaktır. Her ne kadar kodu yazarken satır atlayarak yazmış olsak bile browser bu kodu yorumlarken arada <br> etiketi olmadığı için bu iki cümleyi yan yana basacaktır. Kodun doğru kullanımı

Burada bir metin var <br>
Bir alt satıra geçtim!

şeklinde olmalıdır.

<p> ve </p> etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir.

Tablo 1.5. <p> etiketinin bileşenleri

Girilecek Kod	Görevi
align = "left"	Paragrafı sola dayalı olarak yazar.
align = "right"	Paragrafı sağa dayalı olarak yazar.
align = "center"	Paragrafı ortalar.
align = "justify"	Paragrafı sola ve sağa dayalı olarak yazabilmek için sözcüklerin ara boşluklarını değiştirir.
class = "css_etiketi"	Önceden tanımlı bir CSS dosyasındaki font-size, color... gibi özellikleri paragrafa uygular.
style = "css:tanımı1;css:tanımı2;..."	font-size, color... gibi css tanımlarını paragrafa uygular.

<p align="justify">
Burada bir metin var.<br>
Bir alt satıra geçtiğimi sanıyorum!   Daha önceki örneğe ek olarak
yazımı bir paragraf içinde yazıyorum.
</p>

Burada bir metin var.
Bir alt satıra geçtiğimi sanıyorum! Daha önceki örneğe ek olarak yazımı bir paragraf içinde yazıyorum.

11. <pre> </pre> Etiketi ;

Bir kod parçası, bir konsol ekranı alıntısı ya da bir ascii-art gibi içindeki boşlukların korunmasını gerektiren metinleri görüntülemek için kullanılır. Web istemciniz, tüm diğer etiketler için yorum aralığındaki fazladan boşluklarını gözardı ederek metni sarmaladığı halde <PRE> etiketinin yorum aralığındaki metnin boşluklarını olduğu gibi görüntüler.

<pre>
switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}
</pre>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını vermek için kullanışlıdır.

<dt> ve <dd> etiketleri <dl> etiketinin yorum aralığı içinde kullanılır. <dt> etiketi terim, <dd> etiketi ise açıklaması için kullanılır. Bir örnekle kullanımı daha kolay anlaşılacaktır.

<dl>
  <dt>align = "left"</dt>
  <dd>Paragrafı sola dayalı olarak yazar.</dd>

  <dt>align = "right"</dt>
  <dd>Paragrafı sağa dayalı olarak yazar.</dd>
</dl>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

align = "left": Paragrafı sola dayalı olarak yazar.
align = "right"

Paragrafı sağa dayalı olarak yazar.

13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>

Yukarıdaki bölümde anlatılan tanımlama listesinden başka iki tür liste daha vardır. <ol> etiketi kullanılarak oluşturulan listeler sıralı listelerdir. Sıralama sayısal, alfabetik ya da romen rakamları ile yapılabilir. <ul> etiketi ile oluşturulan listelerde ise sıralama elemanı bir grafik semboldür. <li> etiketi bu etiketlerin yorum aralığında kullanılarak liste öğeleri verilir.

Bu etiketlerle kullanılabilecek yardımcı kodları aşağıdaki tabloda belirttim.

Tablo 1.6. Liste kullanımı için yardımcı kodlar

Girilecek Kod	Görevi
type = "listeleme türü"	Bu alanda belirtilebilecek değerleri aşağıda bir tablo halinde verdim.
start = "değer"	Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır.
value = "değer"	Sadece <li> etiketi içindir. Yorum aralığındaki liste öğesinin numarasını belirtmek amacıyla kullanılır. `start = "değer"`parametresi ile belirtilen değer, sayısal olmasa bile burada sayısal bir `"değer"` belirtilebilir.

Sıralamasız liste (<ul>) türü değerleri:

Sıralamasız listlerde liste öğelerini belirtmek için 3 sembol ismi kullanılır:

disc - İçi dolu bir daire görüntüler
circle - İçi boş bir daire görüntüler
square - İçi dolu ya da boş bir kare görüntüler

Tablo 1.7. Sıralı liste (<ol>) türü değerleri

Türü	Sıralama
1	Onluk tabanda numaralama (1,2,3,4,...)
i	Küçük rakamlarla romen sayıları (i,ii,iii,iv,...)
I	Büyük rakamlarla romen sayıları (I,II,III,IV,...)
a	Küçük harflerle alfabetik (a,b,c,...)
A	Büyük harflerle alfabetik (A,B,C,...)

Örnek:

<ol type="i">
  <li> Birinci öğe...</li>
  <li> İkinci öğe ...
     <ul type="square">
       <li>İkinci öğenin bir öğesi...
       <li>İkinci öğenin başka bir öğesi...
     </ul>
  </li>
  <li> Üçüncü öğe...</li>
</ol>

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.

Birinci öğe...
İkinci öğe ...
- İkinci öğenin bir öğesi...
- İkinci öğenin başka bir öğesi...
Üçüncü öğe...

14. <img> Etiketi ;

Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP'lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır.

GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz kısarak boyut sorununu halleder.

Bunun yanı sıra sayfamızda, mecbur kalmadıkça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaçınmak sayfamızın yüklenmesini kolaylaştıracaktır. Yine bu etikette de sonlandırıcı yoktur. Yani bir yorum aralığı belirtmez.

Bu etiket altında kullanacağımız resmin bazı özelliklerini belirtmek için tanımlayıcı bazı kodlar kullanırız. Bu kodları aşağıdaki tabloda belirttim.

Tablo 1.8. Resim kullanımı için yardımcı kodlar

Girilecek Kod	Görevi
src = "resim_dosyası"	Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz.
width = "genişlik"	Resmin genişliği burada tanımlanır. Büyük bir resminiz varsa `genişlik` değerini "100%" vererek resmin web istemci genişliğine dinamik uydurulmasını sağlayabilirsiniz.
height = "yükseklik"	Resmin yüksekliği burada tanımlanır.
vspace = "düşey_aralık"	Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı.
hspace = "yatay_aralık"	Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı.
alt = "metin"	Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır.
border = "değer"	Resmin dışında çerçeve çizgisi olacaksa "1", olmayacaksa "0" değeri kullanılır..

<img src=”./resimler/banner.jpg” width=”250” height=”85” alt=”Bilgisayar Topluluğu”>

Yukarıdaki satır bulunduğumuz dizinin bir üstünde bulunan “resimler” dizinindeki “banner.jpg” dosyasını belirtilen ölçüler doğrultusunda ekrana basar. (Resmin boyutlarını belirtmek zorunlu değildir!). “Alt” kodu ile tanımlı kısım da resmin üzerinde belli bir süre beklendiğinde “Bilgisayar Topluluğu” yazısının belirmesini sağlar.

15. <a> </a> Etiketi ;

Bu etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. <a> etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir.

Tablo 1.9. Bağ vermek için kullanılan kodlar

Girilecek Kod	Görevi
href = "URL"	Yorum alanındaki bileşene tıklandığında yorumlanacak adres.
target = "hedef"	Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir.
name = "isim"	Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır.
type = "mime_türü"	Hedefin içeriğini belirtmek için kullanılır.

<a href=”http://www.belgeler.org”>Linux Belgelendirme Çalışma Grubu</a>

<a href="http://www.slackware.com" target="new">Slackware Linux</a>

<a href="mailto:fni18444@gantep.edu.tr">Fehmi Noyan İSİ</a>

Linux Belgelendirme Çalışma Grubu

Slackware Linux

Fehmi Noyan İSİ

İlkinden farklı olarak ikinci kodda “target” özelliğini kullandım. Target özelliğine “new” değerinin verilmesi ile açılacak yeni site yeni bir istemci penceresinde açılır.

Üçüncü satır belirtilen adrese eposta yollamak için kullanılır. Bağın üzerine tıklandığı zaman web istemcisinde öntanımlı olarak kayıtlı eposta istemcisi açılacaktır.

Bunların dışında resimleri de bağ olarak kullanabilme imkanımız var. Sayfamızda resimleri bağ olarak kullanabilmek için kullanmamız gereken kalıp aşağıdaki gibidir.

<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="0"></a>

<a href=”http://www.belgeler.org”><img src="../images/belgeler-logo.png" border="1"></a>

16. <font> </font> Etiketi ;

HTML dosyası içinde yazdığımız yazıların ekrana nasıl bir çıktı vereceğini bu etiket ile belirleriz. Uyumlu yazı tipleri ve renkler ile sayfanıza güzel bir görünüm kazandırabilirsiniz. Bu etiketin kullanımına alternatif olarak sayfanızda CSS de kullanabilirsiniz. CSS kullanımı sayesinde fazla kod yazımından da kurtulmuş olursunuz. Etiket ile birlikte yazı tipi, renk ve boyut belirtmek üzere üç kod kullanılır.

Tablo 1.10. Font etiketi kodları

Girilecek Kod	Görevi
face = "yazıtipi"	Kullanılacak yazı tipi belirlenir.
color = "renk"	Yazacağımız yazının rengi belirlenir.
size = "boyut"	Yazımızın boyu belirlenir.

<p><font face="tahoma" size="3" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="4" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p><font face="tahoma" size="5" color="maroon">
<b>Burada bir yazı var.</b></font></p>

<p style="color:maroon;font-family:tahoma;font-weight:bold;font-size:125%">
Burada bir yazı var.</p>

<p class="author">Burada bir yazı var.</p>

Burada bir yazı var.

Burada bir yazı var.

17. <acronym> </acronym> Etiketi ;

Kısaltmalar için kullanılır.

<acronym title="Linux Kullanıcıları Derneği">LKD</acronym>

LKD

Fare, "LKD" üzerine getirildiğinde kısaltmanın açılımı balon içinde görüntülenecektir.

18. <meta> </meta> Etiketi ;

HTML dosyasındaki head etiketinin yorum aralığında tanımlanan bu etiket web istemcisine ve arama motorlarına sayfamız hakkında bilgi verir. Bu etiketi ile birlikte kullanılan yardımcı kodların açıklaması ilk bakışta size biraz karmaşık gelebilir. Her kodun kendisi ile birlikte tanımlanan yardımcı kodları da olduğu için bu etiket ile birlikte kullanılan kodların listesini öncekilerden daha farklı bir şekilde vermeyi uygun gördüm.
Tablo 1.11. Meta etiketi ana kodları
Girilecek Kod Görevi
name = "veritürü" Bu bölümde author, description ve keywords özellikleri tanımlanır.
http-equiv = "veritürü" Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır.
size = "boyut" Yazımızın boyu belirlenir.
Yukarıdaki tabloda verdiğim kodlar ile birlikte tanımlanan yardımcı kodları tablo şeklinde vermek yerine örnek şeklinde vermenin daha faydalı olacağını düşündüm.

<meta name=”author” content=”Linux Belgelendirme Çalışma Grubu”>

<meta name=”description” content=”Linux Belgelendirme Çalışma Grubu Web Sayfası”>

<meta name=”keywords” content=”linux unix bsd openbsd freebsd programlama ozguryazılım özgüryazılım sunucu internet”>

Yukarıdaki birinci satır (author), sayfayı hazırlayanların kim olduğu hakkında kısa bilgiler verir.
İkinci satır (description), sitenin ne hakkında olduğuna dair kısa bir bilgi verir.
Sonuncu satır ise (keywords), arama motorlarına bilgi sağlamak için kullanılır. Yani siz bir arama motoruna girip arama kısmına linux, unix, bsd, openbsd, freebsd, programlama, özgüryazılım, sunucu, internet sözcüklerinden birisini yazarsanız bu site adresi de görüntülenecek adresler arasında olacaktır.

<meta http-equiv=”refresh” content=”5; URL=http://www.belgeler.org/”>

<meta http-equiv=”expires” content=”Wed, 25 Feb 2002 12:00:00 GMT”>

<meta http-equiv=”content” content-type=”text/html; charset=iso-8859-9”>

<meta http-equiv=”content-style-type” content=”text/css”>
Yukarıdaki birinci kod satırı (refresh) sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır.
İkinci kod satırı (expires) GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
Üçüncü kod satırı (content) tarayıcıya html dosyamızda kullandığımız karakter kodlamasının ISO-8859-9 olduğunu belirtir.
Dördüncü ve son satır (content-type-style) belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.
Daha öncede belirttiğim gibi meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez. Bu bilgiler genellikle tarayıcıya ve arama motorlarına bilgi sağlamak için kullanılır.

19.  Etiketi ;

Bu etiket yorum aralığı olarak kullanılır. Bu kodun kullanım amacı HTML kodunun içine kullanıcıya görünmeyen açıklamalar yerleştirmektir. (İlk etapta işimize yaramasa bile tablo ve frame kullanarak hazırlanan karışık HTML dosyalarında çok yardımcı olacaktır.)

<!-- Burası bir yorum aralığı ve bu kısım sayfada görünmez!!!!

KAYNAK: http://www.bilgisayardershanesi.com/bilgisayar_dersleri/html-etiketler.html