HTML Dersleri !

***organik81*** · 19-01-2006, 18:37

HTML Dersleri !

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

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

***organik81*** · 19-01-2006, 18:39

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

***organik81*** · 19-01-2006, 18:55

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

Kod:

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

Kod:

Ö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.

***organik81*** · 19-01-2006, 19:02

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

HTML Kodu:

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

HTML Kodu:

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

HTML Kodu:

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

HTML Kodu:

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

HTML Kodu:

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

HTML Kodu:

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

***organik81*** · 19-01-2006, 19:16

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

HTML Kodu:

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.

HTML Kodu:

Kullanılışı : 
<body background="resim.jpg">

<body text> : Kullanacağınız yazının rengini belirlemenizi sağlar..

HTML Kodu:

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.

HTML Kodu:

Kullanılışı: 
<body alink="FF0000">

<body link> : Sayfanızdaki linklerin rengini belirlemenizi sağlar. Daha önce ziyaret edilmemiş linklerin rengidir.

HTML Kodu:

Kullanılışı: 
<body link="00FF00">

<body vlink> : Kullanıcının sayfanızda daha önce ziyaret ettiği renkleri belirtmenizi sağlar.

HTML Kodu:

Kullanılışı: 
<body vlink="0000FF">

***organik81*** · 19-01-2006, 19:57



 : Yazı tipini belirlemeye ve şekillendirmeye yarar.

 : Yazı tipinin boyutunun değerinin 3 olacağını belirtir.

 : Yazı tipinin "Arial" fontunda olacağını belirtir.

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

HTML Kodu:

<h3>Yazı buraya</h3>

***organik81*** · 19-01-2006, 20:33

Yazıyı hizalama komutları

<center>....</center> : Ortalamak için kullanılır.

.... : Yazı sola dayalı olur.

.... : Yazı ortalanır.

.... : Yazı sağa dayalı olur.

  : Alt satıra geçmek için kullanılır.

***organik81*** · 19-01-2006, 20:36

 

... : Yazının kaln olmasını sağlar.

... : Yazının italik (sağa yatık) olmasını sağlar.

... : Yazının altçizgili olmasını sağlar.

<strike>...</strike> : Yazının üstü çizili olmasını sağlar.

***organik81*** · 19-01-2006, 20:40

Resim eklemek ve ayarlamaları

Genel resim ekleme komutu <img src 'dir.

HTML Kodu:

<img src="resmin URL'si">

Resim ortalansın;

HTML Kodu:

<img src="resmin URL'si" align="center">

Resim sağa dayalı olsun;

HTML Kodu:

<img src="resmin URL'si" align="right">

Resmin boyutları ne olursa olsun ek kodlar kullanarak browserde bunun boyutlarını değştirebilirsiniz;

HTML Kodu:

<img src="resmin URL'si" align="right" width="100" height="50">

width = genişlik
height = yükseklik

Resmin üzerine fareyle gelince çıkan yazı için;

HTML Kodu:

<img src="resmin URL'si" alt="çıkacak olan yazı buraya">

***organik81*** · 21-06-2006, 02:15

Sayfaya Flash (swf) Eklemek

Kod:

<embed src="swf_dosyasının_URLsi" quality="high" width="genişliği" height="yüksekliği" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />