Html Tagları ve Birkaç İpucu

YoRuMSuZ · 14 Mrt 2007

Sitenizi html ile hazırladınız ve yayınladınız. Ancak sizde veya ziyaretçinin tarayıcısında Türkçe karakterler farklı karakterler halinde görünüyor. Demekki birşeyi atladık. Bu da ziyaretinin tarayıcısına bak ben Türkçe karakterler içeriyorum demek. O halde bunu nasıl çözeriz.

<head></head> tagları arasına gerekli kodları yerleştiriğimizde sorunu aşmış oluruz. Bu durumda bizim <head></head> tagları arasında şöyle bir kod bulunmalıdır.

Kod:

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

Tabi <head></head> tagları arasına yazacağımız kodlar bunlarla sınırlı değil. Örneğin <title>Başlık</title> tagları da <head></head> arasında kalıyordu.

Bunlardan başka <head></head> tagları arasına javacript kodları be bağlantıları, css dosya bağlantıları (css lerle ilgili geniş açıklama sonraki bir makalede yapılacaktır) , meta etiketleri (bunlar arama motorları için gerekli) yerleştirilebilir.

Bu bölümde açıklanan birkaç terimin (tag) anlamı:

tag: Etiket. < ve > işaretleri arasına yazılan kodlara tag diyoruz.

html: Ziyaretçinin tarayıcısına html ile yapılmış sayfa olduğunu bildirmek için gerekli. ayfamızın en başında açıp en sonunda kapatıyoruz.

head: Kelime anlamı üst, baş olmakla birlikte burası sayfa başlığı, meta etiketleri kullanımı, css dosya linkleri yada css'lerin kendileri ile style tanımlamalarının yapıldığı bölümüdür.

title: Sayfamızın tarayıcıda görünecek başlığı

css: Css uzantılı dosyalara sayfamızdan bağlantı kurarak tüm sayfalarımızın görselliğini, yazı tiplerini, tablo biçimlerini vs. tek bir css dosyasından alabiiriz. Böylelikle sitemizde bulunan onlarca yüzlerce sayfadaki görsel bir değişikliği tek bir css dosyası ile yapmamız mümkündür.

Css kullanımı oldukça kapsamlı ve kullanımı son derece önemli olduğu için ayrı bir makale olarak ele alınacaktır. Tabii hiç kulanılmadan da sayfalar oluşturulabilir. Ancak bu ileriki zamanlarda sayfalarımız çoğaldıkça düzenleme konusunda oldukça zamanınızı alan dezavantaja dönüşecektir.

body: Sayfamızın gövdesi yani ziyaretçiye göstermek istediğimiz tüm içeriğin saklandığı bölüm.

meta: Arama motorlarının sayfalarımızı kolay bulmasını ağlayan etiketler.

bgcolor: Arkaplan rengini belirleme etiketi.

table: Tablo etiketidir.

td: Tablo içinde hücre etiketi.

Hizalama Etiketleri: left (dola hizala), right (sağa hizala), center (ortala), justify (iki yana yasla)

Buraya kadar birkeç temel etiketten bahettik. Ancak yine bunların hemen hepsini (css ve meta tagları dışındakileri) kullanacağınız html editörleri sizin yerinize hazırlayacak iz görsel olarak izle-gör yöntemi kullanarak sayfalarınızı hazırlayacaksınız.

Front Page derslerinde bunların kolaylıkla yapılabildiğini göreceksiniz.

Bu arada html de birkaç renk kodunu görelim. Kullandıkça temel renk kodları zaten ezberinizde kalacaktır.

#000000= siyah
#0000FF=mavi
#FF0000=kırmızı
#FFFF00=sarı
#FFFFFF=beyaz
#008000=yeşil

Örneğin <body bgcolor="#FF0000"> yazarsanız ayfanızın arka plan rengi kırmızı olacaktır.

Tablomuzun arka planı için renk atayacak olursak kodumuz <table bgcolor="#FF0000"> şeklinde olacaktır.

Yazı rengini değiştirmek için: <font color="#FF0000"> kodunu kullanırız.

< Kaynak göstermeden yayınlaması yasaktır. >

YoRuMSuZ · 25 Mrt 2007

Html tagları < ve > karakterleri arasında yer alırlar. Tag'lar genelde <> şeklinde başlar ve </> şeklinde biter. Sadece bazı taglar bu kurala uymazlar, bu konuya ileride değineceğim Tag yazılımında <b> ile <B> aynıdır. Fakat gelecekte çıkacak yeni HTML sürümleri için tag yazımında her zaman küçük yazı karakteri kullanılması önerilmektedir. Örneklerle tagları ve kullanılış biçimlerini inceleyelim.

Kod:

<html>
<head>
<title>Html Etiketleri</title>
</head>
<body>
<b>metnin kalın punto ile yazım şekli</b><br>
<i>metnin italik yazım şekli</i><br>
<u>metnin altı çizili yazım şekli</u><br>
<p>burada bir paragraf var</p>
<p>burada da başka bir paragraf var</p>
</body>
</html>

Yukarıdaki html dökümanını incelediğinizde tagların kullanımını çok kolay bir şekilde anlayacaksınız.

----------------
Html dilinde boşluk bırakmak için  , alt satıra inmek içinse <br> tagını kullanırız. Html belgesi oluştururken gereksiz yere spacebar ile boşluk bırakmaktan kaçınmalıyız.

Kod:

<html>
<head>
<title>Html Etiketleri</title>
</head>
<body>
<h1>Bu bir başlıktır.</h1>
<h2>Bu bir başlıktır.</h2>
<h3>Bu bir başlıktır.</h3>
<h4>Bu bir başlıktır.</h4>
<h5>Bu bir başlıktır.</h5>
<h6>Bu bir başlıktır.</h6>
<hr>Bu tag ise yatay bir çizgi oluşturur
<!-- Yorum satırı -->
<p>paragraf</p>
</body>
</html>

Başlıklar <h1> ile <h6> arasında tanımlanırlar.<h1> en büyük, <h6> ise en küçük başlıktır.
<hr> ise yatay çizgi(horizonal rule) anlamındadır. Bölümleri birbirinden yatay bir çizgi ile ayırır. Dikkat ettiyseniz <p>, <hx> ve <hr> taglarında alt satıra geçmek için <br> tagına ihtiyaç yoktur. Ayrıca <br> ve <hr> taglarının sonunda </br> ve </hr> kullanılmaz.
 arasında kalan bölüm ise yorum aralığı olarak adlandırılır ve buraya yazılanlar tarayıcınızda gözükmez. Bu tagı yazdığınız kodları açıklamak için kullanabilirsiniz. Ayrıca yorum satırı sayesinde html dökümanınız düzene girer ve daha sonradan yapacağınız değişiklikleri uygulamada zorlanmazsınız.

Bazen çok sayıda boşluk ve alt alta metinler içeren dökümanlar hazırmak zorunda kalırız. Bu iş için <pre> tagı biçilmiş kaftandır. Bu iki tag arasında kalan herşey tarayıcınıza olduğu gibi yansır.
Bir örnekle açıklayalım.

Kod:

<html>
<head>
<title>pre tagının özelliği</title>
</head>
<body>
<pre>Pre tagı arasında
kalan metinler
  tarayıcıda aynı
     şekilde gözükürler.
Bu tag işinizi
   çok kolaylaştırır
Görüldüğü gibi  kullanımıda
  gayet        basittir.    
</pre>
</body>
</html>

Yukarıdaki gibi bir html dökümanı hazırlayıp tarayıcınızla incelediğinizde tagın işlevini rahatça anlayacaksınız.

----------------
Çoğu tagın kullanımında o taga değişik özellikler kazandıran yardımcı elemanlar vardır.Bunlardan bazıları şunlardır.
<body> etiketi ile birlikte kullanılan yardımcı kodlar :
"bgcolor" (arkaplan rengi) : Aldığı değere göre sayfanızın arka plan rengini ayarlar.
"text" : Sayfadaki yazıların rengini ayarlar.
"background" : Sayfanızın arka planına resim yerleştirir.
"topmargin" : Sayfanın üst tarafındaki kenar boşluğunu ayarlar.
"leftmargin" : Sayfanın sol tarafındaki kenar boşluğunu ayarlar.
"rightmargin" : Sayfanın sağ tarafındaki kenar boşluğunu ayarlar.
"onLoad" : Sayfa yüklenirken çalıştırılacak scripti belirler.
"onUnload" : Sayfadan çıkarken çalıştırılacak scripti belirler.
"link=renk adı" : Link rengini belirler.
"alink=renk adı" : (Active Link) Aktif olan link rengini belirler.
"vlink=renk adı" : (Visited Link) Daha önceden ziyaret edilmiş olan link rengini belirler.

Not: Link Oluşturmayı öğrendikten sonra yukardaki 3 body elemanını rahatlıkla kullanabileceksiniz.

Body Örneği - 1

Kod:

<html>
<head>
<title>Body Etiketi Özellikleri</title>
</head>
<body bgcolor="black" text="white" topmargin="25" leftmargin="15">
Sayfanın arka plan rengini siyah,<br>
yazı rengini ise beyaz olarak ayarladık.<br>
Sayfanın üst kenar boşluğunu 25, sol kenar boşluğunu
ise 15 olarak ayarladık.
</body>
</html>

Body Örneği - 2

Kod:

<html>
<head>
<title>Body Etiketi Özellikleri</title>
</head>
<body background="resimler\arkaplan.gif" text="red">
Sayfanın arka plan resmi olarak,<br>
resimler klasöründeki arkaplan.gif resmini<br>
ve yazı rengini kırmızı olarak ayarladık

</body>
</html>

Tagların yardımcı elemanlarına değer verirken " " veya ' ' işaretini kullanırız. Ama " " kullanmanızı öneririm. İleride bunun sebebini anlayacaksınız.

--------------
<p> ve <hx> gibi taglar ile kullanılan "align" elemanı sayesinde yazılarımızın "ortalanmasını, sağa veya sola" hizalanmasını ayarlayabiliriz. Ayrıca <center> tagıda yazıları ortalamak için kullanılır.

Kullanımları aşağıdaki gibidir.

Kod:

<html>
<head>
<title>Align Elemanı</title>
</head>
<body bgcolor="red" text="black">
<p align="center">bu yazı ortalanmış</p>
<p align="right">bu yazı sağa dayalı</p>
<p align="left">bu yazı ise sola dayalı</p>
<center>
bu bölümdeki yazıların<br>
tümü ortalanmıştır.
</center><br>
<h3 align="center">bu başlık ortalanmış</h3>
</body>
</html>

Html dökümanımızda <font> etiketi kulanarak yazı biçimimizi kontrol edebiliriz. Bu etiketle "color", "size" ve "face" elemanlarını kullanabiliriz."color" elemanı yazının hangi renkte olacağını, "size" elamanı ile yazının büyüklüğünü, "face" elamanı ile ise yazının belli bir fontta gözükmesini sağlar.

Kullanımlarına göz atalım ;

Kod:

<html>
<head>
<title>Font Etiketi ile Kullanılan Elamanlar</title>
</head>
<body>
<font color="blue">bu yazının rengi mavi</font><br>
<font size="+3">bu yazı normalden büyük</font><br>
<font face="Verdana">bu yazının fontu 'verdana' 
olarak ayarlandı.</font>
</body>
</html>

"size" elemanı ile kullanılan '+1,+2,+3,....+7' değerleri ile yazı boyutu büyürken, '-1,-2,-3,......,-7' değerleri ile ise yazı boyutunu küçültür.

Herhangi bir sitenin html kodlarını görmek için tarayıcınızın "Görünüm" menüsünden "Kaynak" sekmesine tıklayın. Bu yöntemle web sayfalarında nasıl yapıldığını merak ettiğiniz şeyleri inceleyebilirsiniz ve bence kendinizi geliştirmenin en güzel yollarından biri.

Buraya kadar öğrendiklerinizle farklı farklı html dökümanları hazırlayıp konuyu pekiştirmenizi öneririm.

Html Tagları ve Birkaç İpucu

YoRuMSuZ

Biz işimize bakalım...

YoRuMSuZ

Biz işimize bakalım...

Benzer konular