Html Eğitimi

Arkadaşlar uzun biraz ama html öğrenmek isteyen arkadaşlarımıza yardımcı olur diye koymak istedim

HTML EĞİTİMİ
1. HTML’ E GİRİŞ
Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web' in temel dilidir.Html dökümanları kaynak kodları Browserlar tarafından görüntülenebilen, tamamen ASCII karakterlerden oluşmuş metin dosyalarıdır.Html bir programlama dilinin karmaşıklığından oldukça uzak basit bir dildir. Html kullanarak çalıştırılabilir bir dosya elde edilmez.
< > işaretleri arasındaki komutlar Html belirteçleri, ya da Html komutları olarak bilinir.Bir Html dosyası her zaman <html> etiketi ile başlar. Ve bu etiketin kapatılmasıyla son bulur. Bir sayfa açılmak istendiğinde web server Browsera gerekli dosya ya da dosyaları gönderir ve Browser eline geçen bu malzemeyi yorumlamaya başlar. İşte bir Html dosyası Browsera Html dosyası olduğunu ilk satırındaki <html> etiketi ile söyler. Daha sonra bu etiketi <head> etiketi takip eder. <head> etiketinin görevi bitince </head>şeklinde sonlandırılır ve ardından sayfa içeriğinizi taşıyan <body> etiketinin sırası gelir. Sayfa içeriğinizi oluşturan etiketler bitince, </body> şeklinde Body bölümü sonlandırılır ve en son </html> şeklinde Html belgeniz biter.
1.1. HTML Dökümanın Genelinde Etkili Ve Sayfada Doğrudan Görülmeyen Etiketler
Html dökümanı, <Body> </Body> arasına yazılır. Baştaki <Head> </Head> arasına yazılan etiketler tüm döküman üzerinde etkilidir ve Browserlar tarafından doğrudan görüntülenmezler. Bunlardan en önemlisi Yazılan Html dökümana isim vermekte kullanılan <Title>'dır. Bu belirteç, hazırlanan sayfaya bir isim verilebilmesini sağlar. Böylece sayfa yüklendiğinde <Title> ile verilen isim bilgisi Browserın tanımlama satırında görünür. Ayrıca sayfada kullanılacak Javascript, Css gibi yazılımlar <Head> </Head> arasında yer alır.
1.2. <Meta> Etiketi
Bir bölümü Browserının yönetim ve denetimini sağlarken diğer bölümü Html belgesinin yazarı, özü, anahtar sözcükleri, yazım dili gibi belge özelliklerini tanımlamak için kullanılır. Meta etiketleri için en başta gelen kural, Html belgesinin Head bölümünde tanimlanması zorunluluğudur.
Meta etiketler, diger Html etiketleri için de geçerli olduğu gibi küçük-büyük harfe duyarlı degildirler. Özellik ve içerik açiklamalarinin çift tirnak işaretleri arasına alinma zorunlulugu da olmamasına karşın alınmasi önerilir. Bu arada Meta etiketleri tanımayan bazı eski tip Browserların da kullanılabilme olasılığı göz önüne alınarak Meta etiketlerin  açıklama etiketleri arasında gösterilmesi önerilir.
Meta Etiket Çeşitleri
-Http-Equiv meta etiketleri,
-Name meta etiketleri
şeklinde iki ayrı grupta incelemek mümkündür.
1.3. Http-Equiv Etiketleri
Http-Equiv meta etiketleri genellikle Browserın eylemlerinin denetimi ve/veya yönlendirilmesi için gerekli ek bilgileri tanımlamak üzere kullanılırlar.
Content-Type
Web sayfasinin içerik tipini ve karakter alfabesini belirtmek için kullanılır. Normalde tüm Html belgeleri "text/html" türünde belgelerdir. Ancak, "charset" tanımı yapılmazsa alfabenin "Batı" alfabesi (Latin 1) oldugu varsayılır. Böyle bir durumda sayfa içinde Türkçe karakterler kullanılmışsa Browser tarafindan düzgün olarak görüntülenmezler. Bunun için , Web sayfasının Head kısmında "charset" in mutlaka tanımlanması gerekir. Iso-8859-9 kodu Uluslararası Standartlar Enstitüsü'nce Türkçe için belirlenmiş karakter kümesi kodudur.
<Meta Http-Equiv="Content-Type" Content="Text/Html; Charset=Iso-8859-9">
Türkçe karakterler, "Windows" karakter kümesi kodlari ile de elde edilebilirler. Türkçe için windows karakter kümesi kodu "Windows-1254"tür. Ancak, Bu kodu bazı Browserlar desteklemediğinden kullanılması önerilmemektedir.
<Meta Http-Equiv="Content-Type" Content="Text/Html; Charset=Windows-1254">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<Meta Http-Equiv="Content-Type" Content="Text/Html; Charset=Windows-1254">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Expires
Browsera Web sayfasının son kullanım tarihini veya kullanım süresi sonunu bildirir. Böylece, sayfa kullanıcı tarafindan tekrar istendiginde eğer süre sonu degeri aşılmışsa Cep-Bellekten alınmak yerine, yayınlandığı Web Sunucusundan istenerek tazelenir.
<Meta Http-Equıv="Expires" Content="Wed, 10 Mar 1999 10:14:55 Gmt">

ÖRNEK :

<Html>
<Head>
<Title> Expires Komutu Kullanımı </Title>
</Head>
<Meta Http-Equıv="Expires" Content="Wed, 10 Mar 1999 10:14:55 Gmt">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Refresh
Bir başka Web sayfasına otomatik olarak yönlendirme yapmak yada kullanılan sayfanın belli aralıklarla yeniden yüklenmesi veya yenilenmesi için kullanılır.
<Meta Http-Equiv="Refresh" Content="60; Url=Http://www.altavista.com">
Refresh etiketinde Content'i takiben otomatik baglantiya geçiş için bekleme süresini saniye cinsinden belirten bir sayi girilip noktali virgül ([Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ] konulur ve hemen ardindan Adres tanımlaması yapılır.Refresh'in en yaygın kullanim şekli, adres degişikligi olan sayfalar için yeni adrese yönlendirmek yapmaktir.
ÖRNEK :

<Html>
<Head>
<Title> Expires Komutu Kullanımı </Title>
</Head>
<Meta Http-Equiv="Refresh" Content="60; Url=Http://www.yahoo.com">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Pragma
Browserın Web sayfasını Cep-Bellekte depolayıp depolamayacağını bildirir. Eger sayfanin Cep-Bellekte depolanmasi istenmiyorsa Content degeri "No-Cache" olmalıdır.
<Meta Http-Equiv="Pragma" Content="No-Cache">
ÖRNEK :

<Html>
<Head>
<Title> Pragma Komutu Kullanımı </Title>
</Head>
<Meta Http-Equiv="Pragma" Content="No-Cache">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Set-Cookie
Browsera cookie iletilmesini saglar. Cookie kullanıcının yerel makinesinde depolanan küçük bilgi parçalari olup kullanıcının tekrar Web sunucuya baglanmasi halinde bir önceki ziyaretinde yapmiş olduklarini analiz etmek için kullanılır.
<Meta Http-Equiv="Set-Cookie" Content="Cookie Value=Ziyaret;
Expires=Tuesday, 20-Feb-02 14:32:21 Gmt; Path=/">
ÖRNEK :

<Html>
<Head>
<Title> Cookieler </Title>
</Head>
<Meta Http-Equiv="Set-Cookie" Content="Cookie Value=Ziyaret;
Expires=Tuesday, 20-Feb-02 14:32:21 Gmt; Path=/">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Window-Target
Web sayfasının hangi pencere ve/veya çerçevede açılacağını bildirir. Pencere adları Content sözcügünü takiben girilir.
<Meta Http-Equiv="Window-Target" Content="_Top">
ÖRNEK :

<Html>
<Head>
<Title> Target Window Kullanımı </Title>
</Head>
<Meta Http-Equiv="Window-Target" Content="_Top">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Page-Enter
Yalnizca Internet Explorer tarafindan desteklenmekte olan Page-Enter meta etiketi sayfaya girişte görüntü şeklini belirtir.
<Meta Http-Equıv="Page-Enter" Content="Revealtrans(Duration=4, Transition=2)">
ÖRNEK :

<Html>
<Head>
<Title> Page-Enter Kullanımı </Title>
</Head>
<Meta Http-Equıv="Page-Enter" Content="Revealtrans(Duration=4, Transition=2)">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Page-Exit
Yalnızca Internet Explorer tarafından desteklenmekte olan Page-Exit meta etiketi görsel geçiş efektinin sayfadan ayrılış sırasında gerçekleşmesi istendiginde kullanılır.
<Meta Http-Equiv="Page-Exit" Content="Revealtrans(Duration=2, Transition=1)">
ÖRNEK :

<Html>
<Head>
<Title> Page-Exit Kullanımı </Title>
</Head>
<Meta Http-Equiv="Page-Exit" Content="Revealtrans(Duration=2, Transition=1)">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Reply-To
Sayfa yazarı/yöneticisine e-posta göndermek için hazırlanmış bir kolaylıktır.
<Meta Http-Equiv= "Reply-To" Content=" [Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]">
ÖRNEK :

<Html>
<Head>
<Title> Reply To Kullanımı </Title>
</Head>
<Meta Http-Equiv= "Reply-To" Content="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
1.4. Name Meta Etiketleri
Name meta etiketleri de normal Http başlıklari ile ilgili olmayan ara verileri tanımlamak için kullanılırlar.
Author
Web sayfası yazarının adını açıklamak için kullanılan bir meta etikettir.Bazı özel durumlar veya servisler için Author meta etiketi Lang özelliği ile birlikte kullanılabilir. Bu yazar adının yazıldığı dili gösterir. Böylece konuşma sentezcilerinin dile özgü telaffuz kurallarını uygulamasına olanak verirler.
<Meta Name="Author" Lang="Tr" Content="Pınar BÜBERAL">
ÖRNEK :

<Html>
<Head>
<Title> Author Komutu Kullanımı </Title>
</Head>
<Meta Name="Author" Lang="Tr" Content="Pınar BÜBERAL">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Copyright
Sayfanın telif hakları ile ilgili açıklamaları ve bilgileri girmek için kullanılır. Genel kullanım şekli aşağıdaki örnektekine benzerdir.
<Meta Name="Copyright" Content="Copyright 2001 By Pınar Büberal">
ÖRNEK :

<Html>
<Head>
<Title> Copyright Komutu Kullanımı </Title>
</Head>
<Meta Name="Copyright" Content="Copyright 2001 By Pınar Büberal">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Distribution
Web sayfasının dağıtım ölçeğini belirtir.
<Meta Name="Distribution" Content="Global">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<Meta Name="Distribution" Content="Global">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
1.5. <BODY> Etiketi
Bir web belgesinin, içeriği en geniş olan etiketidir. Head kodu kapatıldıktan sonra yazılan ilk koddur. Sayfanın bütün özellikleri burada belirlenir. Arka plan rengi, yazı renkleri bunlardan bazılarıdır.Ancak bir şeyide unutmamak gerekir ; Artık Sayfanın bütün özellikleri <body> etiketinin içinde değil de Css kullanılarak belirlenmesi daha çok tercih edilmektedir.

Background
Burada belirleyeceğiniz Jpeg veya Gif formatında hazırlanmış bir resim sayfanızın arkaplanını oluşturur.Bu etiketi kullanmanın en önemi yararı,Resimler kapatıldığında Browser otomatik olarak belirtilen arka plan rengini web sayfasına uygular.
<body background=' arka.gif'>
ÖRNEK :

<Html>
<Head>
<Title> Background Biçimi Kullanımı </Title>
</Head>
<body background=' arka.gif'>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Bgcolor
Belgenin artalan rengini belirten renk kodu ya da renk adı.
<body bgcolor="#FFFF00">
ÖRNEK :

<Html>
<Head>
<Title> Artalanı Renklendirme </Title>
</Head>
<body bgcolor="#FFFF00">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Bgproperties
Sadece Internet Explorer destekli bu kodun alacağı değer Fixed olarak belirlenir.Bu kod arkaplan için bir resim kullandığı zaman sayfa aşağı doğru kaydırdırılırsa resim aşağı doğru kaymaz sabit kalır.
<body bgproperties="fixed">
ÖRNEK :

<Html>
<Head>
<Title> Bgproperties Komutu </Title>
</Head>
<body bgproperties="fixed">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Text
Tüm sayfada bulunan yazıların rengini belirler. Sayfa içerisinde herhangi bir Font komutu dışında kalan tüm yazılar burada belirlenen renkte olacaktır.
<body text="#00FF00">
ÖRNEK :

<Html>
<Head>
<Title> Text Komutunun Kullanımı </Title>
</Head>
<body text="#00FF00">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Link
Linklere ait metinlerin renklerini belirler.
<body link="#008000">
ÖRNEK :

<Html>
<Head>
<Title> Link Renkleri Kullanımı </Title>
</Head>
<body link="#008000">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Alink
O anda aktif olan bağlantı içeren metnin renginin belirlenmesini sağlar.
<body alink="#800080">
ÖRNEK :

<Html>
<Head>
<Title> Aktif Olan Linkin Renk Ayarlanması </Title>
</Head>
<body alink="##FF00FF">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Vlink
Ziyaret edilmiş metnin renginin belirlenmesini sağlar.
<body vlink="#800080" >
ÖRNEK :

<Html>
<Head>
<Title> Ziyaret Edilmiş Olan Linkin Renk Ayarlanması </Title>
</Head>
<body vlink="#800080" >
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Topmargin
Sayfanın marjin ayarlarının belirler.Sayfanın üstten boşluğunu ayarlar . Eski tip Browserlar desteklemez.
<body topmargin="15">
ÖRNEK :

<Html>
<Head>
<Title> Top-Margine Kullanımı </Title>
</Head>
<body topmargin="15">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Leftmargin
Sayfanın marjin ayarlarının belirler.Sayfanın soldan boşluğunu ayarlar . Eski tip Browserlar desteklemez.
<body leftmargin="15">
ÖRNEK :

<Html>
<Head>
<Title> Left-margine Kullanımı </Title>
</Head>
<body leftmargin="15">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Rightmargin
Sayfanın marjin ayarlarının belirler.Sayfanın sağdan boşluğunu ayarlar . Eski tip Browserlar desteklemez.
<body rightmargin="15">
ÖRNEK :

<Html>
<Head>
<Title> Right-Margine Kullanımı </Title>
</Head>
<body rightmargin="15">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>

Bottommargin
Sayfanın marjin ayarlarının belirler.Sayfanın alttan boşluğunu ayarlar . Eski tip Browserlar desteklemez.
<body bottommargin="15">
ÖRNEK :

<Html>
<Head>
<Title> Bottom-Margine Kullanımı </Title>
</Head>
<body bottommargin="15">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
2. BAĞLANTILAR
Internet üzerinde herhangi bir sunucuya bağlı bir dosyayla bağlantı kurmak ,Elektronik posta yollamak, Telnet bağlantısı kurmak gibi değişik amaçlar için kullanılır. Bağlantılar sayesinde hazırlanan sayfalar birbirleriyle ilişkili hale getirilebilir.Normalde bir link mavi text ve altı çizgili olarak sayfada yerini alır .Ancak Css kullanarak linkin font özellikleri tamamıyla değiştirilebilir.

Şimdi yapılmak istenen bağlantıya göre kullanılacak komutları inceleyim:
<a href="...." target="...">...</a>
Bu komut sayesinde oluşturulan bağlantı ile yeni bir sayfa açılabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşması sağlanabilir.Yani bu tanıma göre bağlantının her çeşidi oluşturulabilir.Yapılacak tek şey bağlantı yapılmak istenen adres doğru tanımlanmalıdır.Şimdi bağlantı çeşitlerini örnekler vererek açıklayalım.
<a href="Bağlantılar.zip"> Sıkıştırılmış dosya olduğundan indirilir. Görüntülenmez...</a>
Browser kullanıcıya Bağlantılar.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi Browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.
<a href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]"><img src="resim.gif" border="0" alt="Tıkla Üniversitemizi Gez"></a>
Resimlerede link verilebilir.Hatta ileride anlatılacak başka bir etiket sayesinde resmin çeşitli yerlerine tıklanarakta ayrı ayrı linkler bile verilebilir.
<a href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]" target="_blank">Dosya indirmek için tıklayın...</a>
Buradaki linke tıklandığında bu Ftp adresi ayrı bir sayfada açılacaktır.
<a href="mailto:buberal@yahoo.com>Html hakkında sorunlarınız için bana mail atınız..</a>
Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve Mail'in send to kısmına verilen mail adresi otomatik olarak yazılacaktır.
<a href="#...">...</a> <a name="....">
Sayfa içi linkler bu komut kullanarak yapılır.Sayfada gidilecek yere bir isim verilir.Daha sonra sayfanın herhangi bir yerinde bu isim verilen yere gidilmek istendiğinde bağlantıda ismin önüne # işareti koyularak gidilir.
Diyelim ki kullanıcı sayfadaki bir linki tıkladığında başka bir sayfanın belli bir bölümünün açılması isteniyor. Bunun için gidilmek istenen yere isim verildikten sonra bağlantı;
<a href="başkasayfa.htm#isim">
ile yapılır.
ÖRNEK :

<Html>
<Head>
<Title> Bağlantı Kullanımı </Title>
</Head>
<a href="başkasayfa.htm#isim">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
2.1. Target parametresi
Bağlantının hangi pencerede açılacağını belirtir.
Target="_blank": Bağlantı yeni bir pencerede açılır.
<a href="başkasayfa.htm#isim" target="_blank">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<a href="başkasayfa.htm#isim" target="_blank">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Target="_self": Bağlantı aynı pencere içerisinde açılır.
<a href="başkasayfa.htm#isim" target="_self">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<a href="başkasayfa.htm#isim" target="_self">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Target="_top": Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
<a href="başkasayfa.htm#isim" target="_top">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<a href="başkasayfa.htm#isim" target="_top">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Target="_parent": Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
<a href="başkasayfa.htm#isim" target="_parent">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<a href="başkasayfa.htm#isim" target="_parent">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
2.2. <BASE> Etiketi
Belgenin temel adresini bildirir.Belgede yalnız bir tane base elemanı kullanılabilir ve belgenin <head> kısmında yer alır.
Href
Belgenin temel adresini belirtir.
Target
Belgenin açılacağı çerçevenin adını belirtir.
<base href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]" target="mainframe">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<base href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]" target="mainframe">
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
2.3. <LINK> Etiketi
Web belgesinin <head> kısmında yer alabilecek bu etiket, web belgesiyle ilişkilendirilmesi gereken bir dosyanın adresini bildirir.

Bu etiketin içinde olabilecek özellikler:

Rel
Bir link'e verilen bağı belirtir. Buraya atanacak değerle, link verilen dosyanın ne iş için kullanılacağı belirtilir. Bu kısımda yer alabilecek değerler, alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help ve bookmark olabilir.
3.RESİM KULLANIMI
3.1. <IMG> Etiketi
Sayfalarımıza grafik veya resim yerleştirmek için kullanılır. Resmin Gif yada Jpeg formatında olması en uygun olanınır. Başka format da olabilir.Ancak diğer formatlar sayfa çağrıldığında sayfanın gelme hızını oldukça yavaşlattıkları için resmin Gif ya da Jpeg olması daha doğru olur. Bu arada hazır yeri gelmişken Gif ile Jpeg birbirleriyle olan avantajlarını ve dezavantajlarını belirtmek gerekirse,Gif dosyaları sayfa üzerinde Jpeg dosyalarından daha keskin ve canlı görünürler.Bunun sebebi Jpeg formatının ' kayıplı' bir grafik formatı olmasıdır. Jpeg dosyalarının kullanılması ayrıca sade beyaz alanlarda yüksek renk çözünürlüğünde görülmeyen fakat 256 renkte göze batan küçük noktacıkların oluşmasına neden olur. Standart Gif en fazla 256 renge müsade eder. Eğer resminizin daha çok renkli görünmesini istiyorsanız Jpeg tercih etmelisiniz. Sonuçta, küçük dosyalar için Gif kullanımı büyük dosyalar içindeJpeg kullanımı tercih edilir.

Src
Yerleştirilecek resmin adresini belirtir.
<IMG SRC="resim.gif">
Align
<img> etiketi için çok önemli olan bu özellik sayesinde sayfada bulunan metin ile sayfaya yerleştirilecek olan resim arasında düzenlemeler yapılır.Bu düzenlemelerde Align ’ a bağlı alt kodlar tarafından gerçekleştirilir.Mesela Left veya Right sayesinde resim ile metin ya da başka bir resim ilişkilendirilir.Öyleki resmin yüksekliği kadar satır oluşturulabilir.Top sayesinde Resmin en üst noktası satırda bulunan Nesnenin en üst noktası ile aynı hizaya getirilebilir. Texttop sayesinde Resmin en üst noktası satırda bulunan Yazının en üst noktası ile aynı hizada tutulabilir.Middle sayesinde Satırın taban noktası ile Resmin orta noktası aynı hizaya getirilebilir.Absmiddle sayesinde Satırın orta noktası ile Resmin orta noktası aynı hizaya getirilebilir.Baseline yada Bottom sayesinde Satırın tabanı ile Resmin en alt noktası aynı hizaya getirilebilir.Absbottom sayesinde Satırın o andaki en alt noktası ile Resmin en alt noktası aynı hizaya getirilebilir.
Alt
Mouse sayfaya yerleştirilen resim yada grafik üzerine geldiğinde belirecek olan yazıyı belirtir.
Height
Sayfaya yerleştirilecek resim yada grafiğin yüksekliğini belirtir.Kullanılmazsa yerleştirilen resim yada grafik kendi özgün yüksekliğinde belirir.
Width
Sayfaya yerleştirilecek resim yada grafiğin genişliğini belirtir. Kullanılmazsa yerleştirilen resim yada grafik kendi özgün genişliğinde belirir.
Horizontal Space
Sayfaya yerleştirilecek resim yada grafiğin, metinlerle arasında yatay düzlemde yer alacak boşluğu belirtir.
Vertical Space
Sayfaya yerleştirilecek resim yada grafiğin, metinlerle arasında dikey düzlemde yer alacak boşluğu belirtir.
Border
Sayfaya yerleştirilecek resim yada grafiğin etrafında yer alacak çerçevenin kalınlığını belirtir.

<IMG SRC="resim.gif" WIDTH=320 HEIGHT=240 ALT="RESİMLER" ALIGN=CENTER BORDER=0 VSPACE=20 HSPACE=20>

ÖRNEK :

<Html>
<Head>
<Title> Resim Kullanımı </Title>
</Head>
<IMG SRC="resim.gif" WIDTH=320 HEIGHT=240 ALT="RESİMLER" ALIGN=CENTER BORDER=0 VSPACE=20 HSPACE=20>
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
3.2. Bir Resime Link Verilmesi
Bir önceki konuda gördüğümüz bağlantıları şimdi bir resim üzerinde uygulayacağız. Burada dikkat edilmesi gereken nokta <A> </A> tagleri arasına , resim eklemeye yarayan <IMG> </IMG taglerini yerleştirdiğimizdir.
<A HREF="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]"><IMG SRC= "resim.gif"></A>
ÖRNEK :

<Html>
<Head>
<Title> Resimin Link Halinde Kullanımı </Title>
</Head>
<A HREF="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]"><IMG SRC= "resim.gif"></A>
<Body>
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>
Usemap
Sayfaya yerleştirilecek resim yada grafiğin üzerinde bir adrese link verilebilir. Böylece ziyaretçi grafiğin üzerini tıkladığında o adrese gider. Sayfaya yerleştirilecek resim yada grafiği belirli bölgelere ayırarak, her bölgeye bir link vermek ve hangi bölge tıklanırsa ziyaretçinin o linkle verilen sayfaya gitmesini sağlamak da mümkündür. Bu işlem, <map>, <area> etiketleri ve <img> etiketi içinde kullanılan usemap özelliği ile yapılabilir..
3.3. <AREA> Etiketi
Sayfaya yerleştirilecek resim yada grafik üzerinde birden fazla link verilebilmesi için <map> ve <img> ile birlikte kullanılan yardımcı etikettir.
Shape
Rectangle,circle,polygan şekillerinden biri olabilir.
Coords
Tanımlanan şekle göre değişik koordinatlar girilebilmesini sağlar. Bir şeklin koordinatlarını bulmak biraz karmaşık bir iş olduğundan bu iş için özel olarak yazılmış programlar kullanabiliriz.

Href
Şekle tıklandığında hangi adrese gidileceğini belirler.
Target
Gidilecek adresin hangi pencerede açılacağını belirler.
Bir örnekle bu etiketlerin nasıl kullanıldığını daha iyi anlayalım.
ÖRNEK :
<html>
<head>
</head>
<body>
<table border="0" >
<tr valign="right">
<td>
<img src="resimler/link.jpg" usemap="#logo" width="169" height="400" border="0">
</td>
</tr>
</table>
<map name="logo">
<area shape="rect" coords="1,205,167,230" href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]" title="Güncel Haberler">
<area shape="rect" coords="1,245,167,270" href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]" title="Büyük bir portal">
<area shape="rect" coords="1,320,167,350" href="[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]" title="PHP'nin Türkiye'deki evi">
<area shape="default" nohref>
</map>
</body>
</html>
4. YAZI TİPLERİ
4.1. FONT ETİKETİ
Metinlerin yazıtipi özelliklerini kontrol etmek için <FONT> etiketi kullanılır. Yazı tipinin adını, büyüklüğünü ve rengini ayarlayabilirsiniz. Ancak artık bu etiketi kullanmak yerine Css kullanılması tavsiye edilir..
Face
Yazı tipinin adını belirtir.Burada belirtilen yazı tipi ziyaretçinin bilgisayarında mevcut değilse başka bir yazı tipi görüntülenir.Ancak bunu önlemek içinde özel yazı tipi ile yazılan metni grafik dosyası haline dönüştürerek sorun ortadan kaldırılabilir.
Color
Yazı renginin adı ya da kodunu belirtir.
Size
Yazı tipinin büyüklüğünü belirtir.
<font face="Arial Narrow" size="2" color="#FF0000">
ÖRNEK :

<Html>
<Head>
<Title> Content Type Kullanımı </Title>
</Head>
<Body>
<font face="Arial Narrow" size="2" color="#FF0000">
PINAR BÜBERAL <Br>
257 9/A
</Body>
</Html>

4.2. BASEFONT ETİKETİ
Dökümanın genel yazı biçimini belirtmek için kullanılır.Yani Tüm sayfa (sayfanın içeriğinde <font> kullanılmayan yerler) bu etiketle belirlenen büyüklük ve renk fontunda kullanılır. Ancak büyüklük hariç renk ve font seçimi sadece Internet Explorer tarafından tanınır.Bu yüzden yerine Css tavsiye edilir.
4.3. METİN DÜZENLEME ETİKETLERİ
<Abbrev>
Metin içinde verilen bir kısaltmanın farenin imleci ıle üzerine gelindiğinde açık halinin görülmesini sağlayan tag dir.
<Abbr Title="Devlet Su İşleri">D.S.I</Abbr>
<Acronym>
Yukarıdaki tag ile hemen hemen aynı görevi üstlenir.
<Acronym Title="Devlet Su Işleri">D.S.I</Acronym>
Aslında bu iki komutuda kullanmaya o kadar gerek yoktur Zira <a> veya <p> taglerinin yardımıyla da bu iki komutun yaptığı görev pekala üstlenilebilir.
Yani;
<P Title="Devlet Su İşleri">D.S.I</P> Komutuda Aynı Görevi Görebilir..
<B>
Metni koyu (bold) yazar.
<b> Pınar Büberal </b>
<I>
Metni eğik (Italık) yazar.<dfn> etiketi ile kullanımı aynıdır.
<i> Pınar Büberal </i>
<U>
Metni altı çizgili(underline) yazar.
<u> Pınar Büberal </u>
<Center>
Metin sayfalarını ortalar.
<align="center">
<Big>
Bu etiket bloğunun içerdiği metin varsayılan yazıtipi boyutundan bir boy büyük görünür.İçiçe kullanıldıkça etkisi bir kat artar.
<big> Pınar Büberal </big>
<Small>
Bu etiket bloğunun içerdiği metin varsayılan yazıtipi boyutundan bir boy küçük görünür. <big> etiketinde olduğu gibi, kullanıldıkça etkisi bir kat artar. İki kez peş peşe yazıldığında iki boy küçük görünüm sağlar.
<small> Pınar Büberal </small>
<Strike>
Diğer bir kaç etikettede olduğu gibi etiketin içerdiği metin bloğu, üzeri çizili olarak gösterilir. <s></s> etiketi ile aynıdır.
<s> Pınar Büberal </s>
<Tt>
Teletype karakter kullanmak için kullanılır.Örneğin Courier bir Teletype karakterdir.Kullanıldığınaki etkisi hemen hemen <Font Face=”Courier” Size=”-1”> ile aynıdır.
<Tt> Pınar Büberal </Tt>
<Strong>
Metin biçimlendirme etiketlerinden biridir. Etiket içerdiği metnin tarayıcı penceresinde koyu renkte gösterilmesini sağlar.
<Strong> Pınar Büberal </Strong>
<P>
Aradaki metin parağraf özelliği kazanır Sonlandırıldığında takip eden metin bir satır boşluk bırakarak ve satır başına yazılır.
<p> Pınar Büberal </p>
<Dir>
Aradaki metin parağraf özelliği kazanır.Sonlandırıldığında takip eden metin bir satır boşluk bırakır. Ek olarak satırbaşıda bırakır.
<dir> Pınar Büberal </dir>
<Bdo>
Yazılan metnin yazılış yönünü belirler. Default'u bizim dilimizle aynı olduğu için pek kullanılmıyor.Ancak sağdan sola doğru bir metin yazılacağında kullanılabilir.
<bdo> Pınar Büberal </bdo>
<Lang>
Bu alt kod yazacağınız paragrafın dilini bellirler. Kullanılmasına çok gerek yoktur. Meta kodları sayfanın dilini belirler. Ancak Türkçe bir sayfa içerisinde tamamen başka yazı karakterleri kullanan bir dil ile paragraf yazmak isterseniz o zaman bu alt kodu kullanmanız gerekecektir.
<lang> Pınar Büberal </lang>
<Blockquote>
Metinlerin içerisindeki alıntı sözcükleri belirtmek için kullanılan bir etikettir.Ancak Css kullanımı daha uygundur.
<blockquote> Pınar Büberal </blockquote>
<Q>
<blockquote> etiketi gibi çalışır.Ancak onun gibi satırbaşı bırakmaz.Cite özelliği ile bu alıntının adresi tanımlanabilir.
<q> Pınar Büberal </q>
<Blink>
Yanıp sönen bir font oluşturur.Ancak bazı browserlarda bu etiketin işlevi desteklenmez.
<blink> Pınar Büberal </blink>
<Br>
Enter tuşunun görevi görür. Html'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için enter tuşunu kullanırız. Fakat Html dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için bu etiketini kullanıyoruz. İstisnai etiketlerden birisi bu etiket sonlandırılmıyor.
Pınar <br> Büberal </br>

<Nobr>
Yazılan satırı alt satıra geçirmeden devam eder.
<NOBR>İşte bölünmeyecek bir satır..</NOBR>
<Cite>
Bir metin yazarken yararlanılan bir kaynağın ismi verilirken yazının fontundan farklı olmalıdır.Bu font farklılığını sağlayan etiket budur.
<cite> Pınar Büberal </cite>
<Code>
Bir metin yazarken bilgisayar kodları yada buna benzer başka kodlar metne yazmak istenirse bu komut ile yazılabilir.
<code> alın işte bilgisayar kodları </code>
<Del>
Bir metinde önceden yazılmış ve daha sonra iptal edilmiş yazının üstü çizili olmasını sağlar.
<del> Pınar Büberal </del>
<Div>
Belge içinde bir belge yapmaya yarayan bu etiket içerideki belgelerin dil seçimlerini bile kendisi yapabilir. Böylece sayfaların içeriği çok daha kolay düzenleyebilir ve kontrol altında tutabilirsiniz.
<div> Pınar Büberal </div>
<Span>
Bir belgenin, belirli bir kısmını, ayrı bir katman olarak içerebilir ve <div> etiketi gibi çalışır.Aynı <div> de olduğu gibi etiketin içeriği ayrı olarak biçimlendirilebilir, ayrı dil özellikleri verilebilir.
<span> Pınar Büberal </span>
<Em>
Diğer bir kaç etikette olduğu gibi bu etikette paragrafta geçen bir sözcük ya da cümle vurgulanmak istediğinde kullanılır. Browser programlar genellikle bu etiketin taşıdığı metni de <dfn> etiketinde olduğu gibi italik gösterirler. Bu etikete Css ile değişik görüntüleme özellikleri atayarak metin daha vurgulu hale getirilebilir.
<em> Pınar Büberal </em>
<H(n)></H(n)>
Başlık (Heading) etiketi h1 en büyük h6 en küçük.Eğer örneklerle desteklerseniz çok daha iyi anlarsınız.
Örneğin;
<H1>En Büyük Başlık</H1>
<H2>En Büyük Başlık</H2>
<Ins>
Pek fazla işe yaramayan bu komut ;Bir metin bloğunda, araya sonradan eklenmiş başka bir metin bloğunu işaretlemek için kullanılır .Eklenen metin genellikle altı çizili olarak görüntülenir.
<ins> Pınar Büberal </ins>
<Index>
Pek kullanılmayan bu etiket promt attribute aracılığıyla tek satırlık bir metin girdisi açar.
<index> Pınar Büberal </index>
<Hr>
Bu etiket sayesinde Yatay çizgi oluşturabilirsiniz. Bu etiketinde aynı <br> etiketndeki gibi sonlandırıcısı yoktur. Attribute'ları;
<hr>
Align
Yatay çizginizin sayfadaki hizalamasını belirtir.
<hr> <align="right"> </hr>
Size
Çizginizin genişliğini piksel cinsinden belirtmenizi sağlar.
Width
Buraya vereceğiniz değer, çizginizin sayfadaki enini belirler. 50% olarak vereceğiniz değer çizginin sayfanın kullanılabilir alanının % 50' si kadar yer kaplamasını sağlar. 50 olarak vereceğiniz değer ise piksel olarak yorumlanır ve çizginizin eni 50 piksel olur.
ÖRNEK :

<hr align="left" width="50" size="8">
<Sub>
Matematiksel ifadeleri sayfaya yazmaya yarar.Örneğin Suyun kimyasal formülü yazılmak istendiğinde kullanılır.
<Sup>
s Bir üstteki etiket alt metin (subscript) yazdırırsa, elbette bir de üst metin (superscript) yazdıran etiket vardır. <sup> etiketi üst metin yazdırmaya yarar. Örneğin metrekare yazılmak istendiğinde kullanılır.Her iki etiketinde nasıl kullanıldığını daha iyi anlamak için aşağıdaki örneği inceleyin...
ÖRNEK :
<Html>
<Head>
<Title>Sup Ve Sub Etiketi Kullanımı</Title>
</Head>
<Body Bgcolor="Orange">
<Font Size="+1" Color="Red"><Code>
Soru.1-)(4<Sup>3</Sup>-3<Sup>4</Sup>)/(2<Sup>3</Sup>-3<Sup>2</Sup>)=?
Yandaki İşlemin Sonucu Aşağidakilerden Hangisinin Sonucuyla Aynı Değildir.?<Br>
A)<İnput Type="Radio" Name="Cevap">5<Sup>3</Sup>-108<Br>
B)<İnput Type="Radio" Name="Cevap">(2<Sup>2</Sup>*17)-(3*17)<Br>
C)<İnput Type="Radio" Name="Cevap">17<Sup>3</Sup>-17<Sup>2</Sup><Br>
D)<İnput Type="Radio" Name="Cevap">17<Sup>2</Sup>+17-17<Sup>2</Sup><Br>
Soru.2-)Aşağıdakilerden Hangisi Karbonatın Yazılış Biçimidir.<Br>
A)<İnput Type="Radio" Name="Cev">C<Sub>3</Sub>O<Sub>2</Sub><Br>
B)<İnput Type="Radio" Name="Cev">C<Sub>2</Sub>O<Br>
C)<İnput Type="Radio" Name="Cev">Co<Sub>3</Sub><Br>
D)<İnput Type="Radio" Name="Cev">C<Sub>2</Sub>H<Sub>2</Sub><Br></Code></Font>
</Body>
</Html>
4.4. Bazı Önemli Html Etiketleri
<samp>
Bilgisayar program kodları, script ve benzeri metin parçalarını, diğer metinlerden ayrı bir görünümde sunar. Sonuçta, bu da birçok biçimlendirme etiketi gibi kapsadığı metin parçalarının normal paragraf yazıtipinden farklı bir yazıtipi ile görüntülenmesini sağlar.
<samp> işte yine kodlar </samp>
<pre>
Bu etiket, içerdiği metni, sayfada sabit aralıklı bir fontla, satır başlarına, yerleşimlere hiç dokunmadan aynen görüntüler. Metin editörünüzle <p> etiketi kullanarak metin girerken, örneğin iki kelimenin arasında 20 kez boşluk çubuğuna basarak uzun bir boşluk bıraktınız. Browser bu boşluğu tek boşluk olarak algılar. Ya da metin editörünüzde metninizi yazarken satırın sonu geldi ve enter' a basarak alt satırdan yazmaya devam ettiniz. Browser bunları görmez. O ardarda kelimeleri sıralar ve satırın bittiği yerde alt satıra geçme işini otomatik yapar. Oysa <pre> etiketi sizin yaptığınız değişiklikleri aynen korur. Yazı karakteri olarak mono-space tabir edilen (Courrier New) fontu kullanılır.
<pre> Pınar Büberal </pre>
Özel Karakterler
Özel karakterleri kullanabilmeniz için gerekli olan kod & işareti ile başlar ve ; ile sona erer. Bu kodları yazılarınız içinde kullanarak istediğiniz karakterlerin Web tarayıcısının penceresinde belirmesini sağlayabilirsiniz. Örneğin bir karakter boşluk bırakır. Html Döküman İçinde Açıklama Satırları : HTML Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama satırları konabilir. Döküman içinde herhangi bir yerde, "" belirteçleri arasında kalan hiçbir şey web istemcileri tarafından dikkate alınmaz.
ÖRNEK:

<Marquee>
Kayan,yuvarlanan,dönen text yazmak için kullanılır.Bazı Browserlar desteklemiyor.Ancak yinede etiket kullanıldığında içerisinde var olan text, desteklemeyen Browserlar tarafından 'normal yazı' olarak görünür.
Behavior
Metnin ekranda nasıl hareket edeceğini belirten bu ek Scroll, Slide, Alternate değerlerinden birini alabilir. Ek kullanılmadığında Scroll değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. Slide eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise Alternate ekiyle gerçekleştirilebilir.
Bgcolor
Kayan yazının arkasındaki rengi belirler.
Direction
Yazının kayma yönünü belirler. Direction eki, left veya right değerlerinden birini almalıdır.Left değeri yazının soldan sağa doğru kaymasını, Right ise bunun tersini sağlar.
Height
Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir.
Hspace
Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.
Loop
Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. n değerine “1” veya '”infinite” verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak “slide” kullanıldığında bu işlem tek bir kez gerçekleşeceğinden loop ekini kullanmaya gerek yoktur.
Scrollamount
Kayan yazının bir defada kaç piksel hareket edeceğini belirler.
Scrolldelay
Kayan yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını Vspace ile, yazının kayacağı toplam uzunluğu ise Width ile ayarlayabilirsiniz. Width değeri Height gibi bir yüzde alabilir.
ÖRNEK :
<marquee loop="3" border="0" bgcolor="#00FF00" direction="right" height="15"

scrollamount="8"scrolldelay="50"> PINAR BÜBERAL</marquee>

<Bgsound>
Web sayfalarını arkaplanda müzik çalar hale getirebilirsiniz.Bu olay bu etiket sayesinde olur. Kullanım şekli:
<Bgsound Src="Muzik.Wav">
<Object>
Hazırladığınız sayfalara Resim, Video,Java Applet ekleyebilmenizi sağlar <img> etiketi yerine rahatlıkla kullanılabilir.Ancak bu etiketi kullanırken Browserın destekleyip desteklememesine bakılmalıdır.
Data
Eklenen nesneyle ilişkisi bulunan verilerin adresini belirtir
Classid
Nesne ile kullanılacak nesne uygulamasının adresini belirtir.
Archive
Daha hızlı veri aktarımını sağlayan Classid veya Data 'yı içeren arşiv dosyalarının adresini belirtir.

Codebase
Nesne ve buna bağlı Data, Archive, Classid ‘ lerin temel adresini belirtir.
Width
Sayfaya eklenen nesnenin genişliğini belirtir.
Height
Sayfaya eklenen nesnenin yüksekliği belirtir.
Name
Nesnenin adını belirtir.
Usemap
Grafik haritası için adresini belirtir.
Type
Nesne içeriğinin tipi. text/html, image/jpeg, video/quicktime, application/java, text/css, ve text/javascript gibi örnekler olabilir.
Codetype
Kodlar için tip belirlemesini belirtir.
Standby
Nesne yüklemesi tamamlanana kadar görüntülenecek metini belirtir.
Tabindex
Nesnelerin Tab tuşuna basılınca seçilme sıralamasını belirler.
Border
Nesnenin kenarlık kalınlığını belirtir..
Vspace
Diğer bileşenler ile nesnenin üst ve alt kısmı arasında yer alacak boşluk miktarını belirtir.
Hspace
Diğer bileşenler ile nesnenin sağ ve sol tarafı arasında yer alacak boşluk miktarı belirtir.
<Applet>
Artık unutulmaya yüz tutmuş olan bu etiketin yerine <object> kullanılmaktadır.
<Param>
<Object> ya da <Applet> nesnelerinin içinde kullanılan bu etiket bu nesnelere değer vermek için bir parametri bildirir.
Name
Parametre için bir isim tanımlamaya yarar.
Value
Parametrenin değeri. bu bir urı de olabilir.

Type
Value değeri için bir urı belirtilmişse, bu urı' nin tipi.
Valuetype
Parametreye atanan değerin değişken tipi.
Yukarıdaki her iki etiketede klasik bir örnek verecek olursak;
ÖRNEK :

<Object Classid="Java:Clock.Class" Codetype="Application/Java"

Width=100 Height=100 Title="Saat" Standby="Şu Anda Saatin Kaç
Olduğunu Biliyor Musunuz?">

<Param Name=Type Value=Analog>

<Param Name=Bgcolor Value=Whıte>

<Param Name=Fgcolor Value=Navy>

</Object>
Döküman içine JavaScript,JBScript gibi dillerle yazılmış programları gömmek için kullanılır.
Src
Script'i bulunduran bir belgenin adresini belirtir.
Type
Script' in yazıldığı script dilini belirtir.
Defer
Script' in belgeye bir içerik katkısında bulunmadığını bildirir. Çalıştırılması engellenmiş script' i belirtir.
Language
Script' in yazıldığı script dilini belirtir.Ancak yerine Type ‘ ı kullanmak daha doğrudur.
Charset
Script' in lisan karakter kodlamasını belirtir.
<Noscript>
Bazı tarayıcılar script dilini desteklemez.Bu durumdada sunucunun zor durumda kalmamaması için scriptlerin yerini bu etiket sayesinde alternatif içerikler hazırlanabilir.
5. LİSTELER
Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.
5.1. Düz (Sırasız) Listeler
Düz liste (unordered lists) oluşturmak için,<ul> etiketi açılır.Liste elemanlarını teker teker girerken başına <li> (list) belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.
Listeyi bitirmek için belirteç kapatılır.</ul>
ÖRNEK :

<Ul>
<Li Type=”Circle”> Sıra1
<Li> Sıra2
</Ul>
<li> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanılabilir.Sırasız listelerin başına yuvarlak işaret gelir. Sıralı listelerde bunların yerini rakamlar veya harfler alır, aralarındaki tek fark budur.<ul> kodu mutlaka kapatılmalıdır. Ancak <li> etiketi kapatılmasa da olur.
5.2. Numaralı Listeler
Numaralı listeler (ordered lists), düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekrandaki liste elemanlarının başına 1'den başlayarak sayılar eklenir.
ÖRNEK :

<Ol>
<Li> GALATASARAY
<Li> BEŞİKTAŞ
</Ol>
Sıralı listeler Type isimli bir attribute alırlar. Type alt kodunun alacağı değerler: A a I i olarak gösterilir.
Bunun dişinda bir de Start isimli bir attribute vardır. Eğer listemizde Start=”3” olursa ilk maddeyi 3 numara olarak gösterecek ve devam edecektir.
Pek kullanımı bulunmasa da söylenmesinde fayda olan bir attribute da compact dir. Etiketin içine bu terim yazıldığında, liste daha az yer kaplar.<ol> etiketi mutlaka kapatılmalıdır. Ancak <li> etiketi kapatılmasada olur.
5.3. Tanımlı Listeler
Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır.
ÖRNEK :

<Dl>
<Dt>Kimya
<Dd>Zorunlu Derslerden Biridir.
<Dt>Tarih
<Dd>kolay Derslerden Biridir.
</Dl>
Aynı diğer etiketlerde olduğu gibi bu etikettede <dl> etiketi mutlaka kapatılmalıdır. Ancak <li> etiketi kapatılmasada olur.
5.4. <Menu> Etiketi
Bu etiket bir menü listesi başlatır. bu menü listesi, aynen <ul>(unordered list) etiketi gibi, madde imli bir liste oluşturur. kendine özgü attribute'u yoktur. tüm etiketlerde ortak kullanılan attribute'ları alabilir.
ÖRNEK :

<Menu>
<Li>Menu Elemanı 1
<Li>Menu Elemanı 2
<Li>Menu Elemanı 3
</Menu>
5.5. Sıralı ve Sırasız Listelerin Beraber Kullanımı
Bazı durumlarda sıralı ve sırasız listeleri içiçe kullanmak gerekir. Bu gayet kolay bir işlemdir. Tek dikkat etmeniz gereken listenizi önceden iyi bir şekilde planlamanızdır.
<ol> ve <ul> etiketleri ile oluşturulan listelerde, liste elemanlarının her biri <li> etiketi ile verilir ve bu etiketin sonlandırıcı yoktur.
6. TABLOLAR
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz Html'nin en önemli yapıtaşlarındandır.
Tablolar, bilgileri matris düzeninde, birçok hücreler tanımlayarak bunların içine veri girebilmenizi sağlar. Ayrıca, hazırladığımız dökümanın kolonlar halinde ya da satırlar halinde ama bir düzen içerisinde görünmesini sağlar.Html, her türlü tablo kullanımına olanak tanır.Web sayfalarında bir tablo oluşturmaya <table> etiketi ile başlanır ve </table> etiketi ile son verilir. Bu iki etiket arasında, tabloyu oluşturan satırları, sütunları, başlık satırlarını v.s. bildiren diğer tablo etiketleri bulunur.Ayrıca hatırlatmakta fayda var:Hücre içerisinde hiçbir data yoksa Browser o hücrenin çerçevesini göstermez.Ve diğer önemli bir olayda;Eğer doküman içerisinde varsayılan bir font kullanılıyorsa tablonun her hücresi içerisinde bunun tekrar tanımlanması gerekir.Çünkü tablolar içerisinde dökümanın tanımlanan karakter tipinin üstüne varsayılan karakter tipi konur.
Sonuç olarak bir tablo oluşturmak için en temelde;
<table> etiketinden sonra ilk olarak <tr> etiketiyle ilk satırı oluşturuyoruz. Oluşturmak istediğimiz sütun kadar <td> etiketi yazıyoruz. <td>...</td> etiketleri arasına metin yada grafik koyabiliriz.<td> etiketleri ile sütunları oluşturduktan sonra </tr> etiketi ile oluşturduğumuz satırı bitiriyoruz. İkinci, üçüncü... satırları oluşturmak için aynı yöntemi uyguluyoruz.İstenirse başlık ve gövde oluşturulabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri ile oluşturulur. <caption> etiketi ile ikinci bir açıklama vermek mümkündür. ve son olarak sütun başlıkları <th> etiketi ile belirtilir Şimdi tabloların bu etiketlerini çok daha ayrıntılı inceleyelim.
<Table>
Width
Tablonun genişliğini belirtir.Değerini pixel cinsinden veya % olarak verebilirsiniz.Ancak bazı browserlar (Netscape) pixel cinsinden değeri desteklemediği için % olarak kulanmanız tavsiye edilir.
Height
Width gibidir.Tablonun uzunluğunu belirtir.
Cellpadding
Kolonun verisinin tablonun çerçevesine olan uzaklığı belirtir.
Cellspacing
Verinin olduğu kolonon çerçevesinin ,tablonun çerçevesine olan uzaklığı belirler İkisi arasındaki fark daha özetle:Cellspacing iki hücre arasındaki mesafeyi tanımlar. Cellpadding ise hücre içerisindeki yazıların hücrenin çerçevesinden ne kadar uzaklıkta olacağını belirler.
Align
Tabloyu sağa sola veya ortaya yerleştirir.
Valign
Tabloyu üste alta veya ortaya yerleştirir.
Background
Tablonun arkasına bir artalan yerleştirir.
Bgcolor
Tablonun arka rengini belirler
Border
Tablonun çerçevesinin kalınlığını belirler.
Bordercolor
Tablonun çerçevesinin rengini belirler.
Bordercolordark
Tablonun çerçevesinin koyuluğunu belirler.Ancak bazı Browserlar (Netscape) tarafından desteklenmemektedir.
Bordercolorlight
Tablonun çerçevesinin parlaklığını belirler.Ancak bazı Browserlar (Netscape) tarafından desteklenmemektedir.
<Tr>
Width
Satırın genişliğini belirtir.Değerini pixel cinsinden veya % olarak verebilirsiniz.
Ancak bazı browserlar (Netscape) pixel cinsinden değeri desteklemediği için % olarak kullanmanız tavsiye edilir.
Height
Width gibidir.Satırın uzunluğunu belirtir.
Align
Satırın içerisindeki kolonu sağa sola veya ortaya yerleştirir.
Valign
Satırın içerisindeki kolonu üste alta veya ortaya yerleştirir.
Bgcolor
Satırın arka rengini belirler
<Td>
Width
Kolonun genişliğini belirtir.Değerini pixel cinsinden veya % olarak verebilirsiniz.Ancak bazı browserlar (Netscape) pixel cinsinden değeri desteklemediği için % olarak kullanmanız tavsiye edilir.
Height
Width gibidir.Kolonun uzunluğunu belirtir.
Align
Kolonun içerisindeki veriyi kolonun sağına, soluna veya ortasına yerleştirir.
Valign
Kolonun içerisindeki veriyi kolonun üstüne altına veya ortasına yerleştirir.
Bgcolor
Kolonun arka rengini belirti.
Colspan
Kolonları birbirine birleştirmek için kullanılır.Bir kolon kaç adet kolonla birleşecekse ona göre sayı verilir.

Rowspan
Satırları birbirine birleştirmek için kullanılır.Bir satır kaç adet satırla birleşecekse ona göre sayı verilir.
Nowrap
Kolonun içine yazılan verinin kırılmamasını sağlar.
<Caption>
Tablonun üstünde tablonun biçimini etkilemeden tabloya başlık verilmesini sağlar.
<Tbody>
Bir tablonun gövdesini tanımlar.Ancak özel bir stil tanımlanan yerlerde kullanılabilir.Aksi durumlarda bu etikete gerek yoktur.
<Thead>
Yine özel stil tanımlanan yerlerde tablonun üstünün farklı görünmesini sağlar.Aksi durumlarda bu etikete de gerek yoktur.
<Tfoot>
Yine özel stil tanımlanan yerlerde tablonun en alt satırının farklı görünmesini sağlar.Aksi durumlarda bu etikete de gerek yoktur.
Bu üç etiketinde ortak özelliği; eğer özel bir stil tanımlanmamışsa, tablonun biçimi üzerine hiçbir değişiklik yapmaz.Yani özel stil belirlenmemişse tablo oluşturulurken bu etiketlerin kullanılmasına gerek kalmaz.
ÖRNEK :

<Html>

<Head>

<Title>Tablo Kullanımı</Title>

</Head>

<Body>

<Table Width="600" Height="300" Align="Center"
Cellspacing="0" Cellpadding="0" Border="1" Bordercolor="Red">

<Caption>Ana Başlık</Caption>

<Tr Height="20"><Td Align="Center"Colspan="6"
Bgcolor="Green">Denemeler</Td></Tr>

<Tr>

<Td Colspan="3" Align="Center" Bgcolor="Yellow">A</Td>

<Td Colspan="3" Align="Center" Bgcolor="Yellow">B</Td>

</Tr>

<Tr></Tr>

<Tr>

<Td Align="Center" Bgcolor="Red" Nowrap>Uzun Bir
Cümle Olsaydı Satır Kırılmazdı</Td>

<Td Align="Center" Bgcolor="Blue">Denemeler</Td>

<Td Align="Center" Bgcolor="Red">Denemeler</Td>

<Td Align="Center" Bgcolor="Blue">Denemeler</Td>

<Td Align="Center" Bgcolor="Red">Denemeler</Td>

<Td Align="Center" Bgcolor="Blue">Denemeler</Td>

</Tr>

<Tr>

<Td Colspan="3" Align="Center" Bgcolor="Yellow">C</Td>

<Td Colspan="3" Align="Center" Bgcolor="Yellow">D</Td>

</Tr>

</Table>

</Body>

</Html>
7. FORM KULLANIMI
Formlar, web sayfalarında kullanıcıların doğrudan bilgi girip sayfanın bulunduğu web sunucusuna ya da başka yerlere bunları gönderebildikleri etiketler topluluğudur.Web sayfası tasarlayan ile kullanan 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.
<Form>
Bir form oluşturmak için kullanılan ana etikettir.
Action
Formun gönderileceği yer.Bu bölüme , alınan girdileri işleyecek programın ismi yazılır.Bu programda ayrı bir cgi-bin/dizini altında bulunmalıdır.
Method
Bilgilerin sunucuya hangi yolla gönderileceğini 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 derleyici programa yönlendirir. Get değeri genellikle formu kullanan kişinin bilgi göndermesi durumunda kullanılır. Yani dışarıdan herhangi bir işleme gerek kalmadan tamamlanan Form işlemleri için Get kullanılır. Post ise genellikle veritabanı işlemlerinde kullanılır. Eğer formu kullanma sonucunda bir veritabanı bilgileri değişiyor, güncelleniyorsa Post kullanılır.
Target
Değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir.
<Select>....<Option>...<Select>
Bu iki etiketin birlikte anlatılmasının sebebi her ikisinin genellikle beraber kullanılmasıdır. Select etiketi form içerisinde bulunacak olan çoktan seçmeli bölümleri belirler Option ise seçenekleri ziyaretçiye gösterir.Yani sayfalarda görebileceğiniz form menülerinde, seçenekleri tanımlamaya yarayan etikettir. Örnekle genişletelim
ÖRNEK :

<Select Name="Medeni Durumunuz :">
<Option Selected Value="">Lütfen Seçiniz...</Option>
<Option>Bekar</Option>
<Option>Evli</Option>
<Option>Ayrı Yaşıyor</Option>
<Option>Boşanmış</Option>
</Select>
<Input>
Kullanıcının bilgi girişi yapabileceği bir form alanı oluşturur. Sayfada kullanıcının adını girmesi için yer alacak bir metin kutusu, ya da kullanıcının şifre girmesi için bir şifre alanı, bazı seçenekler arasında seçim yapmasına imkan veren radyo düğmeleri, birden fazla seçeneği işaretleyebileceği kutular ve benzeri ögeler, bu etiketi ile oluşturulur..
Name
Input alanına verilecek isim.Type ' ta seçilene göre bu isim çok dikkatli verilmelidir.
Çünkü çeşitli işlemler gerçekleştirilirken bu isime göre gerçekleştirilecektir.Mesela ;İki tane radio kullandınız. Eğer bu iki radyoya aynı ismi verirseniz.Kullanıcıyı ikisinden mutlaka sadece birini işaretlemesine yönlendirmiş olursunuz.
Value
İnput alanına Type ' ta seçilene göre bilgi girişi sırasında,önceden bir değer atanacaksa bu değeri bildirmeye yarar.
Checked
Radyo düğmeleri ya da seçenek kutuları için, seçili olarak belirtilmesi istenildiğinde kullanılır.
Size
Tipi text, password gibi olan metin etiketlerinin boyutunu belirler.
Maxlength
Text, password veya textarea ile beraber kullanılır. Maxlenght'e atanan değer o bölgeye yazılacak karakter sayısını belirler.
Disabled
İnput alanına Type' ta seçilene göre ,bilgi girişi bu komut sayesinde tasarlayıcı tarafından girilmiştir ve ziyaretçi bu veri üzerinde herhangi bir değişiklik yapamaz.
Tabindex
Tab tuşuna basıldığında, form nesneleri üzerinde gezinen imlecin, kaçıncı sırada nesnemize geleceğini bildirir.
Type
Bu attribute' e verilebilecek değerler; text, password, checkbox, radio, submit, reset, file, hidden, image ve button olabilir. Bu değişkene göre bilgi girişi yapılacak ögenin tipi belirlenir. Bu değerleri örneklerle geliştirelim.
Örneklerle geliştirelim;
ÖRNEK :

<input Type=”Button” Value=”Gönder” Name=”Button1”>
Bu value değeri gönder olan bir buttondur. Butonlar genelde diğer
programlarla(Javascript vb.) birlikte kullanılır.
<İnput Type=”Text” Size=”20” Maxlength=”10”
Style=Background:”Red”;Color=”Blue”
Name=”Text1” Value=”Deneme”>
Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Bu içerisine önceden deneme yazılmış ve kullanıcı tarafından görünen 20 satırlık ancak sadece 10 satırına veri girişi yapılmasına izin veren bir text girişidir. Disabled da olsaydı text ’ in içeriğiyle oynanamazdı.Ayrıca stil ile textin iç rengi ve girilen datanın rengi ayarlanır.

<input Type=”Password” Size=”10” Maxlength=”10” Name=”Password1”>
Tamamen text ile aynı özellıktedir.Ancak girilen veri şifre olduğundan yıldız işareti ile yazılır.

<input Type=”Checkbox” Name=”Kutu” Checked>

Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir. Checked ile kullanıcıyı işaretli olarak sunulur. Name‘leri aynı olan birden fazla checkboxlardan yalnızca biri işaretlenebilir.Checkboxların birbirinden bağımsız olması istenirse nameleri farklı seçilir.

<input Type=”Radio” Name=”Kutu” Checked>

Bir işaretleme dairesi görüntüler ve sadece doğru veya yanlış değerlerini alabilir. Checked ile kullanıcıyı işaretli olarak sunulur.Name ‘leri aynı olan birden fazla radiolardan yalnızca biri işaretlenebilir. Radioların birbirinden bağımsız olması istenirse nameleri farklı seçilir.

<input Type=”Hidden” Name=”Gizli”>

Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır.
<input Type=”image” Src=”Resmin Yeri” Name=”Resim”>
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