GENEL YAPISI
HTML’de tüm dosyalar <html> komutuyla başlayıp </html> komutuyla biter. Browser’a bir HTML dosyasının başladığını gösterir.
Bir HTML dosyası genel olarak HEAD ve BODY olmak üzere iki bölümden oluşur. Yani, genel olarak bir HTML dosyası şöyle görünür;
<html>
<head>
.....................
HEAD bölümünde kullanılacaklar.
.....................
</head>
<body>
.....................
BODY bölümünde kullanılacaklar.
.....................
</body>
</html>Şimdi HTML komutlarını ayrıntılarıyla ele alalım...
<html>
- Kullanılışı: <html> .....dosyayı başlatır. </html> .....dosyayı bitirir.
- Ekleri: HTML komutunun kullanışlı bir eki yoktur.
Bu komut tüm HTML dosyalarının ilk ve son komutu olmalıdır.Bir HTML dosyasının başladığını ve bittiğini gösterir.
<head>
- Kullanılışı: <head> .....Head bölümünü başlatır. </head>.... Head bölümünü sonlandırır.
- Ekleri: HEAD komutunun bir eki yoktur.
Bu komut Head bölümünü başlatır ve bitirir dedik. Peki head bölümü ne işe yarar. Head bölümünde bazı önemli sayılabilecek komutlar kullanılır.Bunlar;
<base> : Sayfanın ana URL’sini belirtmek için kullanılır. Dış bağlantılar için bir referans görevi yapar.
<base>
Örnek:
:
Bir sitede kullanılan bir resmin adresi
<img src="http://www.site.com/resimler/resim.jpg"> dir. Fakat HEAD bölümünde
<base href="www.html.site.com"> yazılırsa daha sonra body bölümünde tanıtılacak olan resmin adresi <img src="resimler/resim.jpg"> olacaktır.
<title>
: Browserınızın üst penceresindeki başlığı yazmanızı sağlar. Bu komut sayfanızın ana başlığını tanımlar. Sayfanızın ana başlığı browserın üst penceresine, ekranınızın en üst kısmına yazılır. Eğer sayfanıza gelen ziyaretciniz sayfayı Sık Kullanılanlar(Favorites) bölümüne eklemek isterse o bölümde sitenizin tanımı title sayesinde olacaktır. Arama motorları sitenize ulaşırsa sitenizin arama motorundaki tanımı title ile yazdığınız gibi olacaktır.
:
Örnek:
<html>
<head>
<title>HTML KOMUTLARI</title>
</head>
<body>
.........Sayfanızın içeriği......
</body>
</html>
<basefont> : Kullanacağınız yazıların büyüklüğünü ayarlar. Kullanmazsanız browserın tercihi default 3 olacaktır.
<meta>
<meta> : Sayfanızla ilgili bilgileri yazmanızı sağlar.Genelde arama motorları için kullanılır. Bu komut siteniz hakkındaki bilgileri girmenizi sağlar.Bu bilgiler browserlar tarafından görüntülenemez fakat arama motorları sitenizi bulabilir.Head komutları arasında en önemli komuttur.
- Ekleri: http-equiv:
- Kullanılışı : <meta http-equiv="........." ..........
Şimdi o noktalı kısımları nasıl dolduracağımızı örneklerle görelim..
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9">Ziyaretçinizin browserına dosyanızın Türkçe karakterler içerdiğini söyler. Browserda Windows’taki Türkçe karakterleri yardımıyla sayfanızı görüntüler. <meta> etiketinin oldukca gerekli bir kullanımıdır. Bunu kullanmadan da görüyor olabilirsiniz fakat bütün browserların aynı şekilde yorumlamadığını bilmelisiniz.
<meta http-equiv="expires" content = "Wed, 31 Dec 2001 00:00:00 GMT"Hazırladığınız dosyanın 31 Aralık 2001’de gece yarısı(Greenwich saatiyle) web ortamından kaldıralacağını gösterir.
<meta http-equiv= "refresh" content="3;
URL = "www.site.com/resimler.html">Bu komut satırını yazdığınız dosya 3 sn. boyunca görüntülenir daha sonra resimler.html adlı dosya görüntülenmeye başlanır.
<meta name= "................." content= "..............."
Dilerseniz <meta> komutunun name etiketiyle kullanımını da örneklerle görelim..
<meta name="description" content="Açıklamaları ve örnekleriyle HTML komutları">Yaptığınız sitenin içeriği ile ilgili bilgi vermenizi sağlar.Burada yazdıklarınız browserlar tarafından görüntülenmezler.
<meta name="keywords" content="HTML,HTML dersleri, web tasarimi, web tasarımı,web dizayn">İşte <meta> nın önemli kullanışlarından biri daha. Burada content kısmında yazdığınız sözcükler sayesinde siteniz arama motorları sayesinde bulunabilecektir.
<meta name= "author" content="isminiz">Bu da <meta> nın gereksiz uygulamalarından biri... Sayfayı yapan kişi veya kurum hakkında bilgi vermenizi sağlar.
<body>
<body bgcolor> : Sayfanızın arka fonunun rengini ayarlamanızı sağlar. Kullanmak istediğiniz rengi tanımlarken bazı özel renklerin ingilizcesini veya renk kodunu kullanabilirsiniz.
Kullanılışı:
<body bgcolor="yellow">
veya
<body bgcolor="#FFFF00">
<body background> : Arka fona bir resim yerlestirmenizi sağlar. Kullandığınız resmin boyutu ne olursa olsun ekranda yatay ve dikey olarak defalarca kez tekrarlanıp bütün arka fonu kaplayacak hale getirilir.
Kullanılışı :
<body background="resim.jpg">
<body text> : Kullanacağınız yazının rengini belirlemenizi sağlar..
Kullanılışı:
<body bgcolor="yellow" text="#FFFFOO">
<body alink> : Sayfanızdaki aktif linkin rengini belirlemenizi sağlar. Mouse ile linkin üzerine tıklandığında linkin alacağı renktir.
Kullanılışı:
<body alink="FF0000">
<body link> : Sayfanızdaki linklerin rengini belirlemenizi sağlar. Daha önce ziyaret edilmemiş linklerin rengidir.
Kullanılışı:
<body link="00FF00">
<body vlink> : Kullanıcının sayfanızda daha önce ziyaret ettiği renkleri belirtmenizi sağlar.
Kullanılışı:
<body vlink="0000FF">
<font>
<font> : Yazı tipini belirlemeye ve şekillendirmeye yarar.
<font size="3"> : Yazı tipinin boyutunun değerinin 3 olacağını belirtir.
<font face="Arial"> : Yazı tipinin "Arial" fontunda olacağını belirtir.
<font color="red"> : Yazı tipinin renginin kırmızı olacağını belirtir.
<hX> : X yerine verilecek rakama göre de yazı tipi boyutu farklı değerler alabilir. Alternetif bir yazı boyut ayarı tagıdır.
<h3>Yazı buraya</h3>
Yazıyı hizalama komutları
<center>....</center> : Ortalamak için kullanılır.
<p>....</p> : Yazı sola dayalı olur.
<p align=center>....</p> : Yazı ortalanır.
<p align=right>....</p> : Yazı sağa dayalı olur.
<br> : Alt satıra geçmek için kullanılır.
<b> <i> <u>
<b>...</b> : Yazının kaln olmasını sağlar.
<i>...</i> : Yazının italik (sağa yatık) olmasını sağlar.
<u>...</u> : Yazının altçizgili olmasını sağlar.
<strike>...</strike> : Yazının üstü çizili olmasını sağlar.
Resim eklemek ve ayarlamaları
Genel resim ekleme komutu <img src 'dir.
<img src="resmin URL'si">Resim ortalansın;
<img src="resmin URL'si" align="center">Resim sağa dayalı olsun;
<img src="resmin URL'si" align="right">Resmin boyutları ne olursa olsun ek kodlar kullanarak browserde bunun boyutlarını değştirebilirsiniz;
<img src="resmin URL'si" align="right"[/color] width="100" height="50">width = genişlik
height = yükseklik
Resmin üzerine fareyle gelince çıkan yazı için;
<img src="resmin URL'si" alt="çıkacak olan yazı buraya">
Mert_Yilmaz
2412 ileti
Kırık Link Bildir! #124964 29-09-2006 17:02 GMT-1 saat 
