HTML Dilinde Kullanılan Taglar

Aşk'a İnanmışt'ı

Genel Yönetici
Staff member
Katılım
28 Mart 2008
Mesajlar
23.243
Tepki puanı
2.147
Puanları
163
Yaş
40
Bulunduğu Yer
ŞANLIURFA
Tuttuğu Takım
GALATASARAY
Her html dokümanının içermesi gereken bazı temel taglar vardır. Bunlar: html , body , head , title taglarıdır.

<html></html> : <html> tagı bir web sayfasında bulunan ilk tagdır. Amacı o dokümanın bir html dokumanı (web sayfası da denilebilir) olduğunu bildirmektir. Önceki anlatılanlardan anlaşılacağı üzere web sayfası içersindeki bütün taglar <html></html> tagının içerisinde yazılır.Bu tagın hiç parametresi yoktur.

<head> </head> : <head> tagı bir web sayfasının başını oluşturur. <head></head> tagları arasına yazılacak herhangi bir şey sayfada görünmez. Bu tagın içine style sheet kodlari girilir. Bu tagın hiç parametresi yoktur.

<title></title> : Bu tag içine yazacağınız yazı web sayfanızın başlığı olacaktır ve browser penceresinin başlık çubuğunda görünecektir.<title> tagı <head></head> tagının içerisinde yazılır.



Kullanılış biçimi :

<title> Sayfanın başlığı </title>

Örnek :

Kod:
<html>

<head>

<title> HTML Dersleri Giriş Sayfası </title>

</head>

<html>

<body> </body> : Bu tag web sayfasının görünen bütün yazılarının ,resimlerinin, formlarının, ... içine yerleştirildiği tagdır. Bu tagın parametrelerine daha ilerki konularda değineceğiz.


Kullanılış biçimi:


Kod:
<body>
.......
.......
</body>


Buraya kadar anlatılan konularla temel taglarını kullanarak aşağıda bir web sayfasının temel yapısı verilmiştir.

Kod:
<html>
<head>
<title> Sayfa Başlığı </title>
</head>
<body>
.......
.......
</body>
</html>

Bu kodları Notepad de yazıp çalışma dizininize “ornek1.html” olarak kaydeder ve bir browser dan (Internet Explorer veya Netscape) açarsanız boş bir ekran görüntüsü elde edersiniz.

Bu örnekte <body> tagının içerisine hiç bir şey yazılmadığı için sayfanız boş bir sayfa olarak görünmektedir. Pencerenin başlığının “Sayfa Başlığı” olduğuna dikkat ediniz.
 
Cevap: HTML Dilinde Kullanılan Taglar

color: Kullanıldığı tagın rengini belirler. Genel olarak renk değerleri iki şekilde verilebilir. İlk olarak kullanılmak istenen rengin İngilizce adı ve ikinci olarak o renge karşılık gelen Hexadecimal değer.

Örnek olarak şu renk adlarını verebiliriz : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal.

Hexadecimal (onaltılık taban sayı sistemi) renk yönteminde değer olarak 6 rakam ve başında “#” işareti bulunan kodlar yer almaktadır. Örneğin "#ff0000" kodu Kırmızı renge karşılık gelmektedir. Bu kodların hepsini öğrenmek mümkün olmayacağından bu yöntemi öğrenme zorunluluğu yoktur ve bu yöntem genellikle web sayfası hazırlama araçları tarafından kullanılmaktadır.

Kullanılış biçimi :

Kod:
<tag_adi color=”değer”>


Örnek :

Kod:
< tag_adı color=”red”>

</tag_adı>

bgcolor : Arka plan rengini belirler.

Kullanılış biçimi :

Kod:
<tag_adi bgcolor=”değer”>

Örnek :

Kod:
<body bgcolor=”red”>

</body>

Bu şekildeki bir kodlama web sayfasının zemin rengini kırmızı yapacaktır.

background : Arka plana yerleştirilecek resmin dosya konumunu belirler.

Kullanılış biçimi :

Kod:
<tag_adi background=”dosya_adi.(gif, bmp, jpeg)”>

Örnek : Çalışma dizininize bir resim dosyası oluşturun ve adını “resim.jpg” olarak kaydedin.Daha sonra aşağıdaki kodları Notepad de yazın ve “ornek2.html” olarak kaydedin. Dosyanızı bir browser da görüntüleyin.

Kod:
<html>
<head>
<title> HTML Tagları ve Parametreleri </title>
</head>
<body background="resim.jpg">
</body>
</html>

Resim dosyası web sayfasının içerisine arka plan resmi olarak yerleştirilmiştir
 
Cevap: HTML Dilinde Kullanılan Taglar

Web sayfası hazırlarken dikkat edilmesi gerekli hususlardan bir taneside resim dosyalarının çalışma klasörünün içinde başka bir klasörde tutulmasıdır. Örneğin çalışma klasörünüz “C:\kurs\” ise bu klasör içerisinde “image” isimli bir klasör oluşturabilirsiniz. Bu klasör içerisindeki bir resme ulaşmak için background parametresindeki dosya yolunu “background=”image/resim.jpg”” olarak değiştirmelisiniz.

align : Kullanıldığı sayfadaki yatay yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: left, right ve center dir. Left sola, right sağa dayalı olarak gösterilmesini, center ise ortalanmasını sağlar.

Kullanılış biçimi :

Kod:
<tag_adi align=”değer”>

Örnek :

Kod:
<table align=”center”>

</table>


valign : Kullanıldığı sayfadaki dikey yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: bottom, middle ve top dır. Bottom aşağıya doğru , top yukarı middle ortaya konumlandırılacağını belirtir.

Kullanılış biçimi :

Kod:
<tag_adi valign=”değer”>

Örnek :

Kod:
<table valign=”bottom”>

</table>


border : Kullanıldığı nesnenin etrafında bordür oluşturulmasını sağlar. Bordür kalınlığı için sayısal değer verilir. Border parametresi kullanılmaz ise varsayılan olarak değeri 1 kabul edilir.

Kod:
<tag_adi border=”değer”>

Örnek :

Kod:
<html>
<head>
<title> Hizalama ve Borderlar </title>
</head>
<body>
<table align="center" border="2">
<tr>
<td>Satır1</td>
</tr>
</table>
</body>
</html>

Yukarıdaki kodları Notepad de yazın ve çalışma dizininize “ornek3.html” olarak kaydedin. Daha sonra dosyanızı bir browser da görüntüleyin.

Görüntülenen tablo nesnesinin ortalı ve kenarlıkların kalın olduğuna dikkat edin.


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:

Kod:
<html>
<head>
<title> Fontlar </title>
</head>
<body>
<font size="3" color="blue">Mavi yazı</font>
<font size="5" color="blue">Mavi büyük yazı</font>
<font size="3" color="blue">
<b>Mavi kalın yazı</b>
</font>
<font size="3" color="blue">
<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.
 
Cevap: HTML Dilinde Kullanılan Taglar

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 :

Kod:
<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.

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 :

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

Örnek :

Kod:
<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.

 
Cevap: HTML Dilinde Kullanılan Taglar

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:

Kod:
<img src=”dosya.adi” border=”değer” align=”değer” alt=”değer” weight=”değer” height=”değer”>

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.


 
Cevap: HTML Dilinde Kullanılan Taglar

Örnek 4:
Kod:
Kod:
<html>
<head>
<title> Resimlerle Çalışmak </title>
</head>
<body>

<img src="image/logo.jpg" border="4" alt="Benim Sitem" align="right">

</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 :

Kod:
<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
[Link Görmek ve Forumumuzdan Yararlanmak İçin Üye Olmasınız. http://www.forumcambaz.com/register.php] adresine link verirseniz bu linke açıklama olarak Benim Sitem yazabilirsiniz.

Örnek :
Kod:
<html>
<head>
<title> Linkler </title>
</head>
<body>
<a href=“


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.
 
Back
Yukarı