HTML ders notları 1

Tarih: Friday, 2007-11-02, 6:34 AM | Mesaj # 1

Vazifesi: Removed

HTML DERS NOTLARI

Giriş
HTML nedir?
Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar. Örneğin herhangi bir tag olmadan default yazı tipinde görünen bir yazı, HTML içinde önüne ve arkasına <I> ve </I> işaretleri gelince bu şekilde italik görülür.
HTML tag'leri
HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir:
1. Bir açma bir de kapama tag'inden oluşan container tag'leri,
2. Tek başına bulunan tag'ler.
Örnek olarak, ilk gruptan <B>Kalın yazı</B>
ikinci gruptansa <HR>
HTML Dökümanlarının Yapısı:
Bir HTML dökümanı genel olarak (istisnaları vardır) aşağıdaki şekildedir:
<HTML>
<HEAD>

Burada genelde döküman içeriği dışında kalan karakter set tanımlamaları, başlık, JavaScript tanımlamaları vb elemanlar bulunur...
</HEAD>
<BODY>

Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb içerebilir...
<BODY>
</HTML>

Örnek :

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-9">
<META NAME="GENERATOR" Content="Visual Page 1.1 for Windows">
<META NAME="Author" Content="Cüneyt YILMAZ">
<META NAME="Keywords" Content="deneme, learning HTML, dummy document">
<TITLE>İlk HTML Dökümanı</TITLE>
</HEAD>

<BODY TEXT="#333333" BGCOLOR="White" LINK="Navy" VLINK="#006600" ALINK="#009999" BACKGROUND="resim.jpg">
<H1> Güzelinden bir başlık atalım <H1>
Bu Ulakbim'deki birlikte inceleyeceğimiz ilk HTML dökümanı.<BR>
İçeriği şimdilik önemli olmasa da ona da sıra gelir :)<BR>
Bu satırın 2 altında bazı sayılar olmalı, acaba öyle mi?

298 93 00
<HR>
Hemen üstümde şirin bir çizgi var.
</BODY>
</HTML>

Yukarıdaki kodun ilk satırı SGML (HTML'in atası) sözdizimine göre aşağıdaki satırların bir HTML 3.2 dökümanı olduğunu belirtmektedir, genelde ihmal edilebilir, ancak Internet üzerinde bazı HTML validator (sözdizimini kontrol eden programlar) tarafından
kullanılır ve eğer kullanılmazsa dökümanın HTML 2.0'a uygun olduğu varsayılır.
2. satırda bir HTML açıklaması vardır. HTML commentleri  ile biter. Bu iki tag arasında kalan bütün yazılar browser tarafından ihmal edilir (JavaScript hariç, ileride bu konuya geri dönülecektir).
3. satırda dökümanımız resmi olarak açılmış bulunmakta.
4. satırda browser'ın dökümanı gösterirken işine yarayabilecek bazı bilgiler vb elemanların bulunduğu HEAD kısmı açılmaktadır.
5. satırda dökümanın render edilirken (mizanpajının yapılıp ekrana dökülürken) kullanılacak karakter seti verilmektedir. Sık kullanacağımız setler ISO-8859-1 (Latin1) ve ISO 8859-9 (Türkçe)'dur. Bazı Windows programlarının (isimleri lazım değil) kullandığı bir set ise standart olmayan Windows-1254 (Unix'te görüntülenemeyen bir Türkçe)'dür.
6. satırda döküman hazırlanırken hangi HTML editörünün kullanıldığı yazmaktadır.
7. satırda dökümanı hazırlayan kişinin ismi vardır.
8. satırda daha çok AltaVista, HotBot gibi bazı arama makinelerinin kullandığı bir bilgi bulunmaktadır. Sözgelimi AltaVista'da arama yapan birinin sizin dökümanınıza ulaşmasını istiyorsanız, verebileceği anahtar kelimeleri burada tanımlarsınız.
9. satırda döküman gösterilirken browser'da pencerenin başlığı olarak ne görüleceği bilgisi vardır. Bu bilgi ayrıca sayfanızı bookmark'ına (Navigator) ya da favorites'ine (Explorer) ekleyen kişilerde görülecek olan isimdir.
10. satırda HEAD kısmı kapanmaktadır.
11. satırdan itibaren dökümanın içeriği hemen hemen başlamaktadır. Burada sayfanın görüntülenirken ana görünümün nasıl olacağı belirlenir. BODY'den sonra gelen 5 eleman sırasıyla şunları ifade eder:
• Düz metin rengi
• Arka fon rengi
• Ziyaret edilmemiş linklerin rengi
• Ziyaret edilmiş linklerin rengi
• Fareyle link'e tıklandığı andaki (düğme halen basılıken) link'in rengi
• Arka fonda kullanılacak olan resim
Burada renkleri verirken 2 tip gösterim kullandık, #RRGGBB ve Renk_İsmi. #RRGGBB, hexedecimal olarak 2şer bayttan Kırmızı, Yeşil ve Mavi bileşenleri verir. Örneğin saf kırmızı #FF0000, camgöbeği #00FFFF'dir. Diğer gösterim daha kolaydır ve HTML standardında bulunan 16 (Navigator için yüze yakın) renkten birini verir. White, Blue, Gold gibi bir çok renk bulunmaktadır.
Arka fonda resmin kullanıldığı ve tabii ki kullanıcıda gösterilebilen bir resmin olduğu dökümanda arka fon renginin işi ne? Internet'e bağlı kullanıcıların bir kısmı hatları yavaş olduğu için resimleri otomatik yüklemezler. Böyle bir durumda dökümanınızın istediğinize en yakın görülebilmesi ve, bazen olduğu gibi siyah üstüne siyah yazan, yani boş gibi görünen bir sayfayla karşılaşmamaları için verilmesi tavsiye edilir.
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> => Bu Yazı Üzeriçizili Yazıdır.

Örnek:
<B><S><I>Bu Yazı Koyu Üzeriçizili ve Yatık Yazıdır. </I></S></B> =>
Bu Yazı Koyu Üzeriçizili ve Yatık Yazıdır.
<P></P> :
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

Örnek :

• Sırasız Listeler

<UL>
<LI>LİSTE ELEMANI 1
<LI>LİSTE ELEMANI 2
<LI>LİSTE ELEMANI 3
</UL>

Örnek :

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, metnin rengini 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şil-mavi) 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.

#000000=black(siyah) #000080=navy(lacivert)
#0000FF=blue(mavi) #008000=green(yeşil)
#008080=teal(koyu yeşil) #00FF00=lime(parlak yeşil)
#00FFFF=aqua(turkuaz) #800000=maroon(vişne çürüğü)
#800080=purple(mor) #808000=olive(zeytuni yeşil)
#808080=gray(gri) #C0C0C0=silver(gümüşi gri)
#FF0000=red(kırmızı) #FF00FF=fuchsia(parlak pembe)
#FFFF00=yellow(sarı) #FFFFFF=white(beyaz)

Artalanı Renklendirmek İçin;
<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 :

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;

Resmi Hizalamak
Hizalama (align) komutuyla resmi sağa (right) ,ortaya (center) ya da sola (left) alabiliriz

Resme alternatif metin eklemek

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 hale getirebiliriz. 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.
<A HREF="meyve.gif"> buraya tıklandığında meyve resmi açılacak </A>

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.

<A HREF="midi.zip"> sıkıştırılmış midi dosyalarını çekmek için tıklayın </A>

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

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.

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>

"Listeler" sayfasının benzer bir örneğini yukarıda kodlarıyla birlikte görüyorsunuz. 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:

<A HREF="sayfa2.htm#ilgiliyer">Bu 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>