Temel HTML Tag'leri:
<HTML></HTML>
Bir HTML dökümanı genelde <HTML> ile başlar ve </HTML> ile biter, ancak verilmese bile,browser dökümanı sorunsuz olarak görüntüleyebilir.
<HEAD></HEAD> ve <BODY></BODY>
Bir HTML belgesi iki bölüme ayrılır. head(baş) ve body(gövde). <head>....</head> etiketleri
arasına sayfa hakkında bilgiler yazılır. Meta ve title gibi etiketler burada yeralıyor.
<body> .... </body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu
tagler arasında yer alır.
<TITLE></TITLE>
Browser' ın başlık çubuğunda görülecek olan sayfanın başlığı yazılır.Örnek: <TITLE> MİLLİYET İNTERNET – ANA SAYFA </TITLE>
<META>
Birçok seçeneği vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini yansıtan bazıanahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama yapan arama motorları
sayfaların meta TAG’ına bakarak gruplandırma yaparlar. Bununla ilgili aşağıdaki örnekleri
nceleyebiliriz.
<META NAME="Description" CONTENT="HTML öğrenmek için yararlı bilgiler">
<META NAME="Keywords" CONTENT="html, htm, web sayfası">
<META NAME="Author" CONTENT="Ozge Donmezer">
Başka bir kullanım, sayfadaki yazıların hangi dil ailesine ait karakterlerle yazıldığını
belirtmek içindir. Yine aşağıda bunula ilgili bir örnek verilmiştir.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8858-9">
(Türkçe' nin dahil olduğu dil ailesine ait standard tanımlaması iso-8859-9' dur.)
Metin Biçimlendirme Tagları :
<H1>...<H6> : Başlık TAG’ıdır.
Örnek:
<H1>Başlık1</H1>
<H2>Başlık2</H2>
<H6>Başlık6</H6>
Başlık1
Başlık2
Başlık6
<B></B> : Koyu Yap
Örnek:
<B>Bu Yazı Koyudur.</B> => Bu Yazı Koyudur.
<I></I> : Yatık Yazı
Örnek:
<I>Bu Yazı Yatık Yazıdır. </I> => Bu Yazı Yatık Yazıdır.
<U></U> : Altı Çizili Yazı
Örnek:
<U>Bu Yazı Altıçizili Yazıdır. </U> => Yazı Altıçizili Yazıdır.
<S></S> : Üzeri Çizili Yazı
Örnek:
<S>Bu Yazı Üzeriçizili Yazıdır. </S> =>
Örnek:
<B><S><I>Bu Yazı Koyu Üzeriçizili ve Yatık Yazıdır. </I></S></B> =>
Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takib eden metin bir satır boşluk
bırakılarak ve satır başına yazılır.
FONTLAR
<FONT FACE="...."SIZE="...." COLOR="...." > </FONT>face= yazıtipinin adı (arial, tahoma, verdana, ...)
size= yazının büyüklüğü (1-7 arası)
color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk
değeri)
Örnekler :
<font face="tahoma" size="6" color="#008000">İlkbahar</font>
İlkbahar
<font face=" Comic Sans MS " size="4" color="red">Sonbahar</font>
Sonbahar
<font face=" Monotype Corsiva " size="5" color=”0000FF ">Mevsim</font>
Mevsim
<font face="Arial" size="3" color="Blue">Kış</font>
Kış
LİSTELER
HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;* Sıralı listeler (ordered list)
* Sırasız listeler (unordered list)
* Tanımlama listeleri (definition list)
Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste
oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste
oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde
okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Listemizin rakamla mı harfle
mi başlayacağını (type) parametresi ile belirtebiliyoruz.
- Sıralı Listeler
<OL>
<LI>LİSTE ELEMANI 1
<LI>LİSTE ELEMANI 2
<LI>LİSTE ELEMANI 3
</OL>
Örnek :
<OL TYPE="1">
<LI>KİMYA<OL TYPE="A">
<LI>İNORGANİK
<LI>ANALİTİK
</OL>
LI>FİZİK
<OL TYPE="A">
<LI>DINAMIK
<LI>STATİK
</OL>
LI>MATEMATİK
<OL TYPE="A">
<LI>SAYILAR
<LI>DİĞER
<OL TYPE="I">
<LI>TÜREV
LI>İNTEGRAL
</OL></OL></OL>
- Sırasız Listeler
<UL>
<LI>LİSTE ELEMANI 1
<LI>LİSTE ELEMANI 2
<LI>LİSTE ELEMANI 3
</UL>
Örnek :
<UL TYPE="DİSC">
<LI>KİMYA<UL TYPE="SQUARE">
<LI>İNORGANİK
<LI>ANALİTİK
</UL>
<LI>FİZİK
<UL TYPE="SQUARE">
<LI>DİNAMİK
<LI>STATİK
</UL>
<LI>MATEMATİK
<UL TYPE="SQUARE">
<LI>SAYILAR
<LI>DİĞER
<UL TYPE="CIRCLE">
<LI>TÜREV
<LI>İNTEGRAL
</UL></UL></UL>
Tanımlama listeleri
Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> , <dd>...</dd> , <dt>...</dt>Listenin maddelerini belirtmek için kullandığımız <li>etiketinin yerini burada <dd> ve
<dt> etiketleri alıyor. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına
aldığımız listeyi bu sefer <dl>... </dl> arasına yazıyoruz.
Örnek :
RENKLER
Renk kodları Artalanı renklendirmek Renk Kodları Fontlar konusunda, metninrengini belirlerken <font color="..."> etiketini kullanılır ve color parametresinin
karşısına rengin ingilizce karşılığını veya renk kodunu yazabiliriz.
Etikette kullandığımız color="#xxxxxx" ifadesi RGB (red-green-blue,kırmızı-yeşilmavi)
renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00
ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). Buna göre;
#000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır.
Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
<BODY BGCOLOR=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu
sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini, <body
bgcolor=#xxxxxx> şeklinde değiştiriyoruz.
RESİMLER
<IMG SRC="resmin bulunduğu yer ve adı" WIDTH="x"HEIGHT="y">
Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu
dışında herhangi bir kısıtlama yoktur. Resim eklemek için yapmamız gereken
browser'a sayfaya koyacağı resmin nerede olduğunu göstermektir. Her ne kadar şart
olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz resmin düzgün
görünmesi açısından kullanışlıdır. Kullanacağımız etiket şu şekilde olacak; Burada x
resmin enini y ise boyunu belirtiyor.
Örnek :
<img src="kedi.gif" width="64" height="79">
Eklemek istediğiniz çok sayıda resim varsa bunları resim adlı bir alt klasörde ise html
dosyası c:\html_ders dizininde resimler de c:\html_ders\resim dizininde. Bu durumda
browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul
edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu
şekilde kullanılır;
<img src="resim/kedi.gif" width="64" height="79">
Resmi Hizalamak
Hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola (left)
alabiliriz
<img src="resim.jpg" width="25" height="25" align="left">Resme alternatif metin eklemek
<img src="resim.gif" alt="kum saati">Resme Çerçeve eklemek
<img src="resim.gif" border="6">
BAĞLANTILAR
<A></A>
Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili halegetirebiliriz. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür.
Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim:
<A HREF="....">...</A>
Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı
bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya
ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak
mümkün. Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı
belirtelim; <A>...</A> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip
olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı
çizili ve mavi renkli gösterilir.
Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği
kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve
kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı
bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan
meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata
mesajıyla karşılaşır.
İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın"
yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan
bir fark var; ilk örnekte meyve.gif'e tıklandığında browser resmi açacaktır fakat bu
örnekte browser kullanıcıya midi.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="sayfa2.htm"> 2.sayfaya gitmek için tıklayın</A>
Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır.
<A HREF="resim/kedi.jpg"> kedi resmi </A>
<A HREF="resim/bitki/karanfil.gif"> işte çok güzel bir karanfil </A>
<A HREF="../araba/bmw.jpg"> otomobil resimleri</A>
Bu 3 örnekte altdizinlere/üstdizinlere verilen bağlantıya misaller görüyorsunuz,
resimler konusunda gördüğümüz kurallar burada da geçerli.
<A HREF="http://www.benimsitem.com/"> tıklayın sitemi ziyaret edin </A>
Yedinci örnekte bir internet adresi verdik.
<A HREF="ftp://ftp.benimsitem.com/"> tıklayın dosyaları indirin </A>
Bu ise bir ftp adresine verilen link örneği.
<A HREF="mailto: bendeniz@mail.com"> mail atın </A>
Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send
to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
<A HREF="#...">...</A> <A name="....">...</A>
Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz. Örneğin sayfanın üst
kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği
başlığa tıkladığında ilgili konu açılsın.
Böyle bir sayfa hazırlamak için yapacağımız şeyler:
1. "tıklandığında" açılacak konuyu işaretlemek <a name="....">...</a>
2. browser'a, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya
gitmesini bildirmek.<a href="#...">...</a>
Sayfa içerisindeki başlıkları <a name>...</a> komutları arasına alıyoruz, "name"
kısmına başlığı hatırlatıcı bir isim verebilirsiniz.
Benim burada kullandığım <u> ve <b> etiketleri, önceden öğrendiğimiz gibi
başlığı altı çizili ve koyu olarak yazıyor. Yine 1-2-3 başlıklarıyla oluşturduğumuz
menü linklerini <a href> komutuyla hazırlıyoruz, yalnız bir farkla; "name" kısmında
başlığa verdiğimiz hatırlatıcı ismi önüne # işaretini koyarak "href" kısmına yazıyoruz.
İşte bu iş bu kadar kolay.
Diyelim ki kullanıcı sayfadaki bir linki tıkladığında, başka bir sayfanın belli bir
bölümünün açılmasını istiyoruz, bunun için linke tıklandığında açılacak yazıyı
<A NAME>...</A> ile işaretledikten sonra bağlantı etiketini şu şekilde yazıyoruz:
linke tıklandığında başka bir
sayfanın ilgili kısmı açılacak </A>
<A NAME="ilgiliyer">Başka bir
sayfadaki linke tıklandığında burası
açıldı</A>
Resimlere Bağlantı Özelliği Kazandırmak
Metinlere bağlantı vermeyi öğrendik, peki sayfadaki resimlere nasıl link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız.<IMG SRC="..." WIDTH="x" HEIGHT="y"> etiketini
<A HREF>...</A>
etiketinin arasına alıyoruz.
İşte örnek;
<A HREF="sayfa1.htm"><IMG SRC="resim.gif"border="0"></A>
resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı
gösteriyor. "Border" komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi
kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik
sayılarla deneyebilirsiniz.
Target parametresi
Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan"target"parametresini öğrenelim;
Kullanımı:
<A HREF="..." TARGET="..." ></A>
TABLOLAR(TABLE)
<TABLE>...</TABLE>
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerinsayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz
HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin
tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle
yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn
konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir
de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna
eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır.
Basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle
<TABLE>...</TABLE> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <TR>
etiketi ile satırları <TD> etiketi ile de sütunları oluşturuyoruz.
Parametreler
<TABLE BORDER=".." CELLPADING=".." CELLSPACING=".." ALIGN=".."WIDTH=".." HEIGHT="..">
Border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.
Cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.
Cellspacing parametresi hücreler arası marjı belirler.
boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal
ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle
tabloyu büyütebiliriz fakat küçültemeyiz.
<TD BGCOLOR=".." BACKGROUND=".." WIDTH=".." HEIGHT=".." ALIGN=".."
VALIGN="..">
Background parametresi ile hücreye grafik-artalan yerleştirebiliriz.
Align parametresi hücre içinde yatay hizalama yapar.
Valign parametresi hücre içinde düşey hizalama yapar.
Hücreleri Birleştirme
<td colspan=".." rowspan="..">Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek
için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td>
etiketini siliyoruz.
Yukarıdaki tabloda;
A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2
parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G
hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini
ekliyoruz ve F ve G hücrelerine ait <td>F</td> , <td>G</td> etiketlerini siliyoruz.
rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C
G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3
parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini
siliyoruz.
ÇERÇEVELER
Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eskisürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler. (Microsoft
Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri
destekliyor).
Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine
göre değiştirme imkanı verir (bu sayfalarda olduğu gibi). Bunun anlamı ise
kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir. Browser
çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı
verecektir.
