2.1. HTML Ne Demek? HTML yani HiperText Markup Language (eyç ti em el olarak okunur) (Hipermetin İşaretleme Dili) aslında bildiği...

...

2.1. HTML Ne Demek?

HTML yani HiperText Markup Language (eyç ti em el olarak okunur) (Hipermetin İşaretleme Dili) aslında bildiğiniz anlamda Fortran, Basic ya da Cobol gibi (hâlâ kullanılıyor mu? bilmiyorum ama benim zamanımda meşhurdu) klasik bir bilgisayar dili değildir. Bir bilgisayarın dilinden daha çok bir belgenin sizin bilgisayarınızda nasıl yeniden oluşturulacağını anlatan bir işaretleme dilidir.
Bir Web sayfası aslında bir Web tarayıcının o sayfayı nasıl göstereceğini belirten komutlardan oluşur. Internet Explorer ya da Firefox,Chrome vs, Navigator gibi Web tarayıcı bu komutları yani HTML etiketlerini yorumlayarak Web sayfasını ekranınızda oluşturur. Bu bağlamda, bir Web sayfasının HTML kodu Web tarayıcının sayfayı nasıl oluşturacağını anlatan bir yönerge listesidir. Web tarayıcınıza bir sayfayı sizin bilgisayarında nasıl oluşturulacağı anlatılır;
1.Yeni bir sayfa aç,
2.Buraya aşağıda verdiğim metni yerleştir
3.Gösterdiğim metinleri koyu yaz
4.İsmini verdiğim resimleri sayfaya benim belirttiğim şekilde yükle
5.Aşağıya bir tablo yerleştir
6.vs.
Bir Web tarayıcıyla bir Web sayfasına baktığınızda herhangi bir HTML etiketi görmezsiniz. Dosyanın HTML kodunu görmek istiyorsanız Tarayıcı Navigator’da menüden ViewPage Source (GörünümSayfa Kaynağı) seçeneğini tıklayınız. Aynı işlemi Internet Explorer’da yapmak için menüden ViewSource (GörünümKaynak) seçeneğini tıklayınız.
Şekil 2.1’de bir Web sayfası ve bu sayfanın kaynak kodu verilmiştir.

Şekil 2.1
Ortadoğu Teknik Üniversitesinin Web sitesinin giriş sayfası http://www.metu.edu.tr/) ve bu sayfanın kaynak kodunun Not Defteri’nde görünümü (GörünümKaynak (ViewSource) HTML dilinde bir Web sayfası yazmadan önce öncelikle bilmeniz gereken bu dilin case-insensitive (BÜYÜK/küçük harf duyarsız) olduğudur.

Ne demek şimdi bu?

Yani HTML dilinde bir komut ya da etiketi büyük harf ya da küçük harfle yazabilirsiniz, <head> veya <HEAD> etiketlerinin ikisi de kabul edilir fakat yine de dosya üzerinde sonradan değişiklik yapmak ya da bir hatayı bulurken kolaylık olsun diye siz etiketleri büyük harfle yazmaya özen gösterin fakat yine de, bunun bir zorunluluk olmadığını bilin. Yani; <head> = <HEAD>

HTML dili bilgisayar platformlarından bağımsızdır. Bir başka deyişle hazırladığınız Web sayfası tüm bilgisayarlarda görüntülenecektir. Bilgisayarın IBM uyumlu ya da Macintosh olması Web sayfasının görüntülenmesinde etkili olmayacaktır.

Normal bir editör programında (örneğin Microsoft Word) Enter tuşuna bastığınızda yeni bir satır açılır ve imleç bir alt satıra kayar. Hayat her zaman böyle kolay olsa keşke. HTML dilinde yazdığınız kodun içinde Enter tuşuna basarak bir alt satıra kayabilirsiniz fakat HTML dili bunu umursamayacaktır.

Aynı şekilde HTML dili Tab tuşunu, bir satır içinde art arda gelen iki boşluğu göz ardı edecektir. Peki bir Web sayfası içinde nasıl alt satıra geçiliyor ya da boşluk bırakılıyor diye sorduğunuzu duyar gibi oluyorum.

Bunun için HTML diline onun anlayacağı dilden bir alt satıra geçmesini söylemeniz gerekir. Bunun için özel etiketler komutlar kullanacağız. Bir alt satıra geçmek için örneğin <p> ya da <br> etiketlerini (tag) kullanacağız.

Şimdi HTML dilinin temel yapı taşı olan etiketleri inceleyelim.

2.2. Etiketler
HTML komutlarına etiket (tag) adı verilir. Birçok etiket çiftler halinde bulunurlar; etiketin etkin olduğunu belirten başlangıç kısmı ve etiketin etkinliğinin bittiğini belirten kapama kısmı. Word Perfect ya da Word Star gibi eski kelime işlemcilerle çalıştıysanız bu tür işaretlemeyi biliyorsunuzdur. Örneğin bir metin içinde herhangi bir kısmı vurgulamak için koyu yazmak istiyorsanız vurgulamak istediğiniz kelimeyi bu etiketler arasına almanız gerekir.

<B>

vurgu

</B>

Web tarayıcınız bu kodu okuduğunda vurgu kelimesini koyu yazacağını anlar.
Bazı etiketlerin özellikleri (attributes) vardır. Örneğin link koymak üzere eklediğimiz etiket olan <A> etiketinin href diye bir özelliği vardır. Etiketin işlevini tam olarak yapması için gerekli değişkenleri tanımlamak için kullanılır.

<A HREF="ust.htm"> Link metni </A>
Tablo 2.1: Temel HTML Etiketleri Listesi

<HTML> .... </HTML>	Web tarayıcıya sayfanın HTML dilinde yazıldığını gösterir. Tüm Web sayfası bu iki etiketin arasında yer alır.
<HEAD> .... </HEAD>	Bütün HTML dokümanlarında, HTML etiketinin hemen altında yer alır. Web sayfası hakkında bilgi içerir fakat Web sayfasında görünmez.
<TITLE> .... </TITLE>	Web sayfasının başlığını tanımlar. Bu iki etiket arasında yer alan başlık (Web sayfasında değil) Web tarayıcısının başlık çubuğunda görünür.
<BODY>... < /BODY>	Web sayfasını oluşturan tüm metinleri ve resimleri, aynı zamanda da format öğelerini içerir. BGCOLOR (Background color: arka fon rengi kelimesinin kısaltılmışıdır): Web sayfasının arka plan fon rengini belirler. BACKGROUND (duvar kağıdı olarak kullanılacak bir resmi tanımlamak için kullanılır)
<H1> --- <H6> .... </H1> --- </H6>	Metni başlık (heading) olarak gösterilmesini sağlar. <H1> en büyüğü, <H6> ise en küçüğüdür.
<CENTER> </CENTER>	Sayfada bulunan metin ve diğer öğeleri ortalar.
<BR>	Yeni bir satıra geçilmesini sağlar (satırlar arasında yatay boşluk bulunmaz)
<P>	Paragraf başı yapar (iki paragraf arasında boşluk bırakır)
<I> </I>	Metni italik yapar.
<B> </B>	Metni kalın yapar.
<EM> </EM>	Metni vurgulu hale getirir, genellikle bu vurgu italik yapmakla da sağlanır.
<STRONG> </STRONG>	Metni iyice vurgulu hale getirir, bu vurgu kalın yapmakla sağlanır.
<A> </A>	Bir metin parçasını link olarak eklemek için kullanılır.Bu etiketle birlikte HREF veya NAME özellikleri de kullanılmalıdır HREF <A> etiketinin özelliğidir; <A> etiketinin arasında kalan metni ya da resmi hipermetin haline dönüştürür NAME kalan metni ya da resmi hipermetinin hedefi yapar.

<UL> </UL>	Sıralı olmayan bir liste yapar (unordered list)
<OL> </OL>	Sıralı bir liste yapar (sayılı liste, ordered list)
<L1>	<UL> ya da <OL> etiketleri ile birlikte kullanılır. Sayılı olan ya da olmayan bir listede bir liste öğesini belirtir
<DL> </DL>	Bir tanımlama listesi (definition list)
<DT>	<DL> etiketi ile birlikte kullanılır. Bir tanımlama listesinde bir tanımlama başlığını gösterir.
<DD>	<DL> etiketi ile birlikte kullanılır. Bir tanımlama listesinde tanımlama açıklamasını belirtir.
<IMG>	Bir sayfaya resim ekler. Bu etiketle birlikte SRC özelliğini kullanmanız gerekir SRC resim dosyasının yerini belirtmek için kullanılır WIDTH eklenen resmin piksel olarak genişliğini tanımlar HEIGHT resmin piksel olarak yüksekliğini tanımlar

Bütün etiketler, normal metni etiketten ayırmak için < > karakterleri arasında yer alır. Yukarıdaki örnekte vurgu kelimesi kalın olarak yazılacaktır. <B> ve </B> etiketleri Web tarayıcıya bu iki etiket arasında kalan kelimenin koyu yazılmasını söyler. Etiketin etkinliğini bittiğini göstermek için bir / karakteri kullanılır.

<HMTL>

<HEAD>

<TITLE>

Sayfa başlığı

<TITLE>

<HEAD

<BODY

<>

</>

Her Web sayfasının HTML kaynak kodunda bulunması zorunlu etiketler vardır. Bir Web sayfasında hiç bir metin ya da resim bulunmasa bile bu etiketlerin olması gerekir.

Şekil 2.2 Şekil 2.2

<TITLE> ve </TITLE> etiketleri arasında kalan kısma yazılanlar Web tarayıcınızın üst kısmında görünür.

2.3. Ama Benim Bir HTML Editörüm Yok ki...

Siz farkında olmasanız da aslında bir tane HTML editörünüz var. Kullandığınız bilgisayarınızda ki Windows işletim sistemdeki Not Defteri (Notepad) programıdır.

Not Defteri (Notepad) programına Başlat Donatılar Not Defteri (StartAccessoriesNotepad) menüsünden ulaşabilirsiniz. Biz sadeliği ve basitliği nedeniyle burada sadece Not Defteri programını inceleyeceğiz.

Şekil 2.3 Not Defteri programı.

Not Defteri programının bir HTML editörü olarak en büyük avantajı basit olması, sisteminizle birlikte ücretsiz olarak verilmesi ve basit metin düzenleme işlemleri için oldukça yeterli olmasıdır. Not Defteri programını sadece HTML editörü olarak değil, aynı zamanda günlük düz yazı işlemlerinde de (örneğin mektup yazmada) rahatlıkla kullanabilirsiniz.Peki yeni ve güncel günümüz koşullarındaki teknolojik olarak esikimeyecek, her zaman kendini yenileyen bir editör kullanmaya ne dersiniz.Google dan bir mail aldıysanız ve halen gmail kullanıyorsanız.Bu linkten takip ederek yeni editörünüzü kullanabilirsiniz.

2.4. Not Defteri Programının Kullanılması

Not Defteri kelime işlemcisinden HTML dilinde bir Web sayfası hazırlamadan önce, Web sitenizi oluşturan tüm dosyaları koyabileceğiniz bir klasörü sabit diskinizde ya da bir floppy diskette oluşturun (sabit diskte oluşturup ara sıra bu klasörün bir yedeğini floppy diskete kopyalamak daha güvenli ve pratik bir yoldur). Bu klasörü masaüstünde oluşturursanız dosyalara erişmek sizin için çok daha kolay olacaktır. Yalnız HTML dosyalarını değil, aynı zamanda resim, grafik ve bunları oluşturduğunuz dosyaları da (örneğin CorelDRAW’ın .cdr uzantılı

dosyaları ya da Photoshop’un dosyaları gibi) bu klasörün altına koyun (örneğin CorelDRAW programında bir resim dosyanız varsa onu da bu klasörün altına ekleyin). Böylece daha sonra Web sitenizi güncellediğinizde ya da değişiklik yaptığınızda her şeyi derli toplu olarak bir yerde bulmanız kolay olur.

Bir klasör yaratmak için, imleciniz masa üstünde herhangi bir yerdeyken farenin sağ tuşuna tıklayın ve karşınıza gelen menüden YeniKlasör (NewFolder) seçeneğini tıklayın. Bir klasör oluşturulacaktır. Klasörün altındaki kısma ismini girin, örneğin Web sitem ya da Web gibi ve Enter tuşuna basın. Harika! Şimdi devam edelim.

Şekil 2.4 Şekil 2.4

Bir klasör yaratın.

Daha önce anlattığımız gibi Not Defteri programını açın. Karşınıza gelen ekrana herhangi bir şeyi girin. Şu an için ne girdiğiniz önemli değildir. Bu yeni dosyayı kaydetmeden önce alttaki Dosya türü (Files of type) kısmını Tüm Dosyalar (All Files) olacak şekilde değiştirin ve üstteki Dosya Adı (File Name) kısmına index.htm yazın (htm ve html uzantıları varsayılan Web sayfası dosya uzantılarıdır. Başka türde uzantılarda vardır ama sizin bilmenize gerek yoktur).

“Dosyanın ismi niye index.htm” diye şimdilik sormayın, ilerde anlatacağız.

DosyaAç (FileOpen) komutunu kullanarak açtığınız Aç (Open) iletişim kutusunda dosyaları açarken de Dosya türü (Files of type) kısmındaki seçeneklerden Tüm Dosyalar (All Files) seçimini yapınız. Aksi takdirde sadece uzantısı .txt olan dosyaları görebilirsiniz, diğer dosyalar gösterilmeyecektir. Bunu bir tür dosya filtreleme olarak düşünebilirsiniz.

Şimdi gelin Lale Hepaçar hanımın kişisel Web sayfasını birlikte yapalım.

1.Daha önce belirttiğimiz gibi öncelikle Windows masaüstünde yeni bir dizin oluşturun. Bunun için, farenin imleci masaüstünde boş bir yerdeyken sağ fare tuşunu tıklayın. Karşınıza gelen menüden YeniKlasör (NewFolder) seçeneğini işaretleyin. Masaüstünde yeni bir klasör oluşturulacaktır. Yanıp sönen kısma yeni klasörün ismini girin (Örneğin Web ya da Benim sitem gibi)

2.Yeni oluşturduğunu klasörü çift tıklayın. Bu klasör içindeyken bir Not Defteri belgesi açın. Farenin imleci ekranda boş bir yerdeyken sağ fare tuşunu tıklayın, yukarıdaki menü tekrar karşınıza gelecektir. Aynı menüden YeniMetin Belgesi (NewText Document) seçeneğine tıklayın. Bir Not Defteri dosya ikonu belirecektir. Bu ikonu çift tıklayın.

3.Not Defteri programı açılınca aşağıdaki HTML kodunu aynen girin;

<HTML>

<HEAD>

<TITLE> Lale Hepaçarın kişisel web sayfası </TITLE>

</HEAD>

<BODY>

LALE HEPACAR’ın KİŞİSEL WEB SAYFASINA HOŞ GELDİNİZ

Kisisel web sayfama hoş geldiniz

</BODY>

</HTML>

4.Bu Not Defteri dokümanını bir HTML dokümanı olarak kaydetmek için menüden DosyaFarklı Kaydet (FileSave As) seçeneğini tıklayın. Farklı Kaydet (Save As) adlı bir iletişim kutusu karşınıza çıkacaktır.

Bu iletişim kutusundaki Kayıt türü: karşısında Tüm Dosyalar (*.*) seçeneğinin olmasına dikkat edin. Dosya adı kısmının karşısına sayfam.htm yazın ve Kaydet (Save) düğmesine tıklayın.

Şekil 2.5

Sayfanızı kaydedin.

5.Not Defteri programından çıkın: DosyaÇıkış (FileQuit)

6.sayfam.htm dosyasını bulun ve açmak için üzerine iki kere tıklayın. SisteminizdeKİ Web tarayıcı sayfanız bu tarayıcı tarafından gösterilecektir. Sayfanız aşağıdaki gibi gözükecektir. Web sayfasının oldukça sıkıcı göründüğünü doğru ama kısa zamanda çok daha iyi ve ilgi çekici Web sayfaları yapacaksınız.

Şekil 2.6

?????

7.Sayfanızın HTML kodunu görmek için tarayıcınızda iken menüden GörünümKaynak (ViewSource) seçeneğini tıklayın.

8.Sayfanızı dilerseniz değiştirebilirsiniz. Bunun için Not Defteri’i tekrar açın

9.Not Defteri programını açtıktan sonra, html dosyanızı açmak için Not Defteri menüsünden DosyaAç (FileOpen) seçeneğini tıklayıp sayfam.htm dosyasını açın.

Eğer yukarda gördüğünüz sayfayı açamıyorsanız, muhtemelen HTML etiketlerini girerken bir yanlışlık yapmışsınızdır. Kaydettiğiniz dosyanın uzantısının .htm olduğuna dikkat edin. Dosyayı sayfam.txt olarak kaydederseniz (varsayılan değer olarak Not Defteri bu şekilde kaydeder) sayfanız Web tarayıcı tarafından gösterilmeyecektir çünkü Web tarayıcıları uzantıları sadece .html ve .htm olan dosyaları açarlar (başka uzantılara sahip dosyaları da açabilirler ama şimdilik bu kadarını bilmeniz yeterli).

UYARI

Daha önce belirttiğimiz gibi HTML etiketlerini büyük harfle yazmanız kodlama açısından size kolaylık sağlayacaktır. Aynı zamanda daha sonra üzerinde değişiklik yapmak istediğinizde etiketleri bulmanıza yardımcı olur.

Sayfanızı tekrar açın ve kendinize ait bir şeyler ekleyin. Yukarıdaki yönergeleri takip ederek yeni bir Web sayfası daha yapın, örneğin ailem.htm sayfasına aileniz hakkında bir şeyler ekleyebilirsiniz.

<HTML>

<HEAD>

<TITLE> Lale Hepaçar’ın ailesi </TITLE>

</HEAD>

<BODY>

Ailem: Eşim Murat Hepaçar Makine mühendisidir. Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

</BODY>

</HTML>

Şimdi gelin Web sayfamızdaki metni biçimlendirelim.

Not Defteri programında ya da buna benzer bir metin editöründe çalışırken yeni bir satıra geçmek için yapmanız gereken tek şey Enter tuşuna basmaktır. Paragraflar arasına boş bir satır koymak için Enter tuşuna iki kere basmanız yeterlidir. Kelimeler arasında boşluk koymak içinse bildiğiniz gibi aralık tuşuna basmanız gerekir. Benzer işlemleri HTML kodunu girdiğiniz Not Defteri dosyasında yaparsanız Web sayfanızda benzer sonuçları almazsınız.

Örneğin

Ailem: Eşim Murat Hepaçar Makine mühendisidir. Kızımız Şeyda ise Lise ikinci sınıf öğrencisidir.

Ailem: Eşim Murat Hepaçar Makine mühendisidir.