Konu : W7

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.