HTML DERSİNDEYİZ

[Admin]

?lk sayfam



??te ilk HTML sayfam?z? yap?yoruz.

• Öncelikle çal??malar?n?z?
  saklamak için kullanaca??n?z bo? bir klasör olu?turup uygun bir ad verin,
  mesela html_ders olsun. Daha sonra bu ad bize laz?m olaca??ndan
  kolayl?k olmas? için siz de yeni klasöre bu ad? verebilirsiniz.
  
• ?imdi de bu klasörü aç?p yeni
  bir metin belgesi olu?turun (sa? fare/Yeni/Metin belgesi).
  
• Dosyay? çift t?klayarak aç?n
  ve ?unlar? yaz?n:
  

Sayfama Ho?geldiniz

• ?imdi dosyay? kaydedin (Dosya/Farkl?
  Kaydet...). Dosya ad? k?sm?na ?öyle yaz?n: "sayfa1.htm"
  (t?rnaklar dahil) ve Tamam'a bas?n.
  
• Notepad'i kapat?n, metin
  dosyas?n? silin ve olu?an yeni dosyay? aç?n. Dosya varsay?lan browser'?n?z
  (Internet Explorer, Netscape Navigator gibi) taraf?ndan aç?lacakt?r. ?öyle
  bir görüntü elde edeceksiniz:
  

• Tebrikler ilk HTML sayfan?z?
  yapt?n?z.
  

?imdi de bu belgeyi nas?l olu?turdu?umuzu birlikte inceleyelim. Bir?ey dikkatinizi
çekti mi? ?ngilizce bir tak?m kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri aras?na
yazd?k. Bu ifadelere tag (etiket) deniyor. Etiketler etki etmesi
istenilen metnin önüne ve arkas?na yaz?l?yor. Önce etiketi yaz?yoruz, sonra
metni yaz?yoruz daha sonra ayn? etiketi önüne bir bölü i?aretiyle tekrar
yaz?yoruz. Bu son yapt???m?z etiketi sonland?r?yor. Bir kaç istisna d???nda tüm
etiketler belge içerisinde sonland?r?lmak zorunda.

Burada kulland???m?z etiketler ve anlamlar? ?öyle:

...	Taray?c?ya HTML dosyas?n?n ba?lad???n? ve bitti?ini belirtiyor. Di?er tüm kodlar bu iki etiket aras?na yaz?l?r.
... ...	Bir HTML belgesi iki bölüme ayr?l?yor: head(ba?) ve body(gövde). ...etiketleri aras?na sayfa hakk?nda bilgiler yaz?yoruz. meta ve title gibi etiketler burada yeral?yor. Meta etiketlerine ileride de?inece?iz. ...aras? ise sayfam?z?n gövde bölümü. Ekranda gösterilecek k?s?mlar bu tagler aras?nda yeral?yor.
	Title sayfan?n ba?l???n? belirtiyor. Burada yaz?lanlar browser'?n üst taraf?nda browser ad?yla beraber gösteriliyor.

Haz?rlad???m?z sayfada dikkat ederseniz sadece temel etiketleri kulland?k.
Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmad?k. Bu yüzden ....aras?na yazd???m?z Sayfama
Ho?geldiniz yaz?s? browser'?n varsay?lan metin ayarlar?yla gösteriliyor.
??in ilginç taraf? hiçbir kod yazmadan sadece Sayfama Ho?geldiniz yaz?p
kaydetsek ve browser'da böyle görüntülesek de ayn? neticeyi elde edecektik.

Sonraki bölümde metin biçimlendirmeye yarayan etiketleri ö?renece?iz.

Bu bölümde ö?renece?imiz etiketler:


• Ba?l?k
etiketleri: ...


• Paragraf etiketi: ...
• Ortalama: ...
• Di?er etiketler: ...,...,...




HTML'de metin stillerini üç ?ekilde belirleyebiliriz:

• Düzenlemek istedi?imiz metnin
  hemen önüne koyaca??m?z bir etiketle biçimleme stili. Buna in-line (sat?r
  içi) biçimlendirme denir.
  
• Sayfan?n head (ba?) k?sm?na
  koyulan stillere body (gövde) bölümden at?f yap?larak metin biçimleme. (Embedded-Gömülü
  biçimlendirme)
  
• HTML dosyas?n?n d???nda ba?ka
  bir stil dosyas? olu?turarak stil için bu dosyay? kullanma. Buna Cascading Style
  Sheets-Y???lmal? Stil Ka??tlar? deniyor. K?saca CSS. Bu teknik bize
  örne?in yüzlerce sayfan?n stilini tek bir stil dosyas? ile belirleme gibi
  geni? imkanlar veriyor.
  

Birinci metotta her metin için ayr? ayr? stil belirtirken ikinci ve üçüncü
metodlarda stil bir defa belirleniyor ve bu stilleri istedi?imiz metne
uygulayabiliyoruz. Burada önemli olan bir di?er husus da ilk metodu tüm
browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve
Netscape'in son sürümleri (yorum farkl?l?klar? ile beraber) destekliyorlar.

Burada konumuz birinci metoda göre biçimlendirmeyi ö?renmek.

Ba?l?k etiketlerinden ba?l?yoruz. Notepad'i aç?yor ve ?u kodlar? yaz?yoruz;

<h1>Ba?l?k 1</h1> <h2>Ba?l?k 2</h2> <h3>Ba?l?k 3</h3> <h4>Ba?l?k 4</h4> <h5>Ba?l?k 5</h5> <h6>Ba?l?k 6

Sayfan?n i?leyi?ine bakt???m?zda, önce her zaman yapmam?z gerekti?i gibi , ,


</h6>Sayfama Ho?geldiniz


HTML etiketleri ile,
Yaz?lar?
koyu
italik
ve
alt? çizili
olarak yazabiliyorum





















Etiketleri kullanma mant???n? anlad?n?z herhalde. Biçimlendirmek istedi?imiz
metnin ba??na ilgili etiketi yaz?yoruz ve metnin sonunda da ilgili etiketi
sonland?r?yoruz. Etiket biz sonland?rmad???m?z müddetçe etkisini göstermeye
devam ediyor. E?er hala tereddütleriniz varsa örnekler üzerindeki kodlar?n
yerlerini de?i?tirerek kaydedin ve di?er taraftan browser'?n?z?n reload/yenile
tu?una basarak de?i?iklikleri gözlemleyin.


Yeni
ö?rendi?imiz kodlara bir göz atal?m:

....	Aradaki metinleri sayfaya göre ortalar. (center)
....	Aradaki metni koyu (bold) yazar.
....	Aradaki metni e?ik (italic) yazar.
....	Aradaki metni alt? çizili (underline) olarak yazar.
....	Ba?l?k (heading) etiketi. h1 en büyük, h6 en küçük.
....	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.

Ba?lad???n?z etiketi sonland?rmay? sak?n unutmay?n !

Burada bilmeyenler için küçük bir bilgi; bir html döküman?n? açt???m?zda ve
ekran üzerinde farenin sa? tu?una t?klay?p kayna?? görüntüle/view source'u
seçti?imizde Internet Explorer için Notepad, Netscape için kendi Source
Viewer'? aç?lacak ve bize o sayfan?n kodunu gösterecektir.











Ö?rendi?iniz komutlarla yukar?daki
gibi bir sayfay? nas?l olu?turursunuz?
Cevap için t?klay?n.

toplumsal sözle?me, Siyaset felsefesinde, bireylerin belli haklar?n? belli ko?ullar alt?nda ya da belli güvenceler kar??l???nda yönetime devretmesini dile getiren kavram. Jean-Jacques Rousseau Du contrat social (1762; Toplum sözle?mesi, 1965, 1984) adl? yap?t?nda do?a durumunda insan?n sava?kan olmad???n?, mant???n?n, ahlak duygusunun ve sorumluluk bilincinin henüz geli?memi? oldu?unu ileri sürdü. Kar??l?kl? korunma amac?yla bireysel davranma özgürlüklerinden vazgeçerek, yasalar ve hükümetler olu?turduklar?nda ise insanlar?n bir ahlak ve yurtta?l?k duygusu geli?tirdi?ini savundu... Kaynak: Ana Britannica Cilt: 21

?u ana kadar yaz?lar?m?z?n font ayar?n? browser'?n 'varsay?lan fontu'na
b?rakt?k. Bir sonraki konuda, metinlerde istedi?imiz fontu nas?l
kullanaca??m?z? görece?iz.




Fontlar



Font etiketinin kullan?m?;



color="...">...





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)

Bunlara font etiketinin parametreleri diyoruz.




etiketinin yan?s?ra ö?renece?imiz bir
di?er etiket
etiketi. Önce bu etiketin
kullan?m?n? görece?iz.
etiketi bir bak?ma
enter tu?unun görevini görüyor. Bunu biraz aç?klayal?m; 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

etiketini kullan?yoruz. ?stisnai etiketlerden birisi bu,

etiketi sonland?r?lm?yor.

Buna bir örnek verelim;

pazartesi sal? çar?amba ocak ?ubat mart nisan

Yukar?daki örne?imizde "pazartesi, sal? ve çar?amba"y? yazarken
Enter tu?u ile bir alt sat?ra geçmemize ra?men browser bunu gözönüne almayarak
tüm metni bir sat?rda yazd?. Fakat ikinci sefer ay adlar?n? tek bir sat?ra
yazd???m?z halde bu kez browser aradaki

etiketine bakarak bir sonraki metni sat?r ba??na ald?. Buradan da anla??ld???
üzere Enter tu?u etkisini
etiketiyle
veriyoruz. Bu etiketin bir özelli?i de sonland?r?lmamas?.

?imdi font etiketinin kullan?m?n? bir örnekle inceleyelim. E?er kullanmak
istedi?iniz font bilgisayar?n?zda yüklü de?ilse font etiketi ile biçimlemek
istedi?iniz metin browser'?n varsay?lan fontu ile gösterilecektir. Bu yüzden
önce sisteminizde yüklü olan fontlar? inceleyin (Ba?lat/Ayarlar/Denetim
Masas?/Yaz?tipleri). Buradan yaz?tiplerini açarak inceleyebilir ve
be?endiklerinizi kullanabilirsiniz. E?er benim örnekte kulland???m yaz?tipleri (tahoma,
comic sans ms, verdana, arial) sisteminizde yüklü de?ilse bunun yerine
sizde olan istedi?iniz fontu kullanabilirsiniz.

color="#008000">?lkbahar color="#ff0000">Yaz color="#ffff00">Sonbahar color="#0000ff">K??

Her zamankinden farkl? olarak ve ilk defa sayfam?zda renk kulland?k. Örnekte
de gördü?ünüz gibi bu i?i renk kodlar?yla yapt?k. Asl?nda bunun bir yolu daha
var o da renk kodu yerine rengin ingilizce ad?n? yazmak (color="red"
gibi).

Bu konuyu renkler
bölümünde ayr?nt?l? olarak inceleyece?iz. Burada yaln?z bir kaç örnekle
yetinelim:





K?rm?z?-red
Mavi-blue
Siyah-black
Sar?-yellow
Lacivert-navy
Ye?il-green




Bu renkleri yukar?daki örnek üzerinde deneyin, renk kodunu silin ve rengin
ingilizce kar??l???n? yaz?n.

?u ana kadar ö?rendi?imiz etiketleri kullanarak (tabii ki hepsini kullanmak
zorunda de?ilsiniz) a?a??daki görüntüyü browser'da nas?l elde ederiz?

face="verdana" size="3" color="navy"> Sabah? beklemeyiniz dostum, geceden yola ç?k?n?z. Olur ki uyuyakal?rs?n?z. S?rt?n?zdaki ç?k?nda ebedi gayenin dürülmü? az?klar? varsa ne mutlu size. Gece serindir,yapraklardan süzülen yel gözlerinizdeki ya?lar? kuruturken ruhunuzda kainat?n derin sessizli?ini ta??yarak sabaha do?ru yürüyüp fecri ba?lat?n?z. Cemiyetin vah?i,zehirli bitkilerle dolu,her dal?nda u?ursuz bayku?lar?n manas?z telkinler yapt??? s?k a?açl? ormanlar?nda çetin yolculuklar?n ba?lang?c? için sabah? beklemeyiniz. Sabah? beklemek ö?leni,ö?leni beklemek ak?am? beklemek gibi bir ruh gev?ekli?ini do?urur. Filozofun ö?üdü bütün hayat?m?zda takib edece?imiz en esasl? metottur : "Uzun yolu seçiniz..."

?PUCU


Ö?rendi?imiz etiketler ?unlard?;

, , , , , , , ,

HTML bize üç tip liste haz?rlama imkan? veriyor.

Bunlar;





1. S?ral? listeler (ordered list)


2. S?ras?z listeler (unordered list)


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




S?ral? Listeler





Liste içine al?nacak metinler

...

<u>
etiketleri aras?na al?narak yaz?l?r. Bu etiketler listenin ba?lad???n? ve
bitti?ini belirtir. Listenin maddelerinin ba??na ise <li>
(list item) etiketini getiriyoruz. Bu etikette t?pk?

etiketi gibi sonland?r?lm?yor.

etiketine
parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla m? harfle mi
ba?layaca??n? (type) yada hangi rakam/harfle ba?layaca??n? (start)
belirtebiliyoruz. Compact parametresi ise listenin mümkün olan minimum
sat?r aral???na sahip olmas?n? sa?l?yor.

Bundan sonraki örneklerimizde sayfa kodunun yaln?z body (gövde) bölümünü
verece?iz. Kodun geri kalan k?s?mlar?n? kendi sayfan?zda tam olarak yazmay?
unutmay?n.




type="1"> Kimya </li> ?norganik </li> Analitik </li> Fizik </li> Dinamik </li> Statik </li> Matematik </li> Say?lar </li> Di?er </li> type="i"> Türev </li> ?ntegral </li>

Kimya Organik ?norganik Analitik </li> Fizik Dinamik Statik </li> Matematik Say?lar Di?er Türev ?ntegral </li> </li>







Listeleri buradaki örnekte oldu?u gibi iç içe haz?rlamak ta mümkün. Dikkat
edece?imiz nokta, i?e
etiketi ile ba?lay?p
liste maddelerinin her birisinin ba??na

1. 
   etiketini getirmek ve listelemeyi bitirmek istedi?imiz yerde
   

etiketini yazmak. Liste içinde yeni bir liste olu?turmak istedi?imizde listelenecek
maddeden sonra tekrar
etiketini yaz?yoruz ve
bahsedilen kurallar? aynen uyguluyoruz. Type parametresinde
kullanabilece?imiz de?erler ?unlar olabilir; say?lar,harfler (küçük/büyük) ve
romen rakamlar? (i,ii,iii gibi)




S?ras?z Listeler





Bu tip listede de mant?k ayn?. Fark, listeleme yaparken maddelerin ba??na
harf, rakam gibi unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz.
etiketi yerine


etiketini kullan?yoruz, liste maddeleri için kulland???m?z

• 
  etiketi burada da geçerli.
  için
  kullan?labilecek parametreler ise ?öyle; type için disc (içi dolu
  daire), circle (içi bo? daire), square (içi dolu kare). Compact
  parametresi s?ras?z listelerde de kullan?labiliyor.
  
  
  
  
  type="disc"> Kimya </li> ?norganik </li> Analitik </li> Fizik </li> Dinamik </li> Statik </li> Matematik </li> Say?lar </li> Di?er </li> type="circle"> Türev </li> ?ntegral </li>

  Kimya Organik ?norganik Analitik </li> Fizik Dinamik Statik </li> Matematik Say?lar Di?er Türev ?ntegral </li> </li>
  
  
  
  
  
  
  
  Tan?mlama Listeler
  
  
  
  
  
  Bu listelemede kullan?lan etiketler ?öyle; ... , , Listenin maddelerini belirtmek için kulland???m?z
  
  1. etiketinin yerini burada
     ve etiketleri al?yor. Ayn? ?ekilde
     ...
     
     veya
     
     ...
     
  
  etiketleri aras?na ald???m?z listeyi bu sefer ...
  aras?na yaz?yoruz. Yine parametre olarak
  etiketi içinde compact ifadesini kullanabiliriz.
  
  Hemen örne?imize geçelim,
  
  

  face="verdana" size="4" color="red"> Neler ö?rendik? color="blue"> HTML nedir? color="black"> HTML (HyperText Markup Language-Hareketli-Metin ??aretleme Dili) basitçe, browserlarla görebilece?imiz, internet dökümanlar? olu?turmaya yarayan bir çe?it dildir... color="blue"> HTML'de Temel Unsurlar color="black"> Bu dilde binary veya hexadecimal kodlar yok. Her?ey metin tabanl? ve bir HTML döküman? olu?turmak için ihtiyac?n?z olan ?ey bir editör.Piyasada iki tip editör bulunuyor. Birisi metin tabanl?, kod yazmay? gerektiren... color="blue"> Listeler color="black"> 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...

  
  
  
  
  
  
  
  Renkler
  
  
  
  Metin renklendirmeyi yüzeysel olarak fontlar konusunda ö?rendik. ?imdi daha
  ay?nt?l? olarak ve bu i?in mant???na inerek yeniden ele alaca??z. Ayn? zamanda
  sayfam?za artalan rengi vermeyi ö?renece?iz.
  
  Bu bölümde ö?renece?imiz konular:
  
  
  
  
  
  
  
  • Renk kodlar?
    
  • Artalan? renklendirmek
    





Renk Kodlar?





Fontlar konusunda, metnin rengini belirlerken
color="..."> etiketini kullanm??t?k ve color
komutunun kar??s?na rengin ingilizce kar??l???n? yazabiliriz demi?tik. Fakat
bunun daha karma??k olan bir ba?ka yolu vard?; o da 16'l?k say? düzeninde renk
kodu girmek. Önce say? düzenleri nedir nas?l olur ona bakal?m.

Günlük hayat?m?zda kulland???m?z say? sistemine 10'luk say? sistemi deniyor,
tüm say?lar? 0-9 aras? toplam 10 rakamdan olu?an sembollerle ifade ediyoruz.
10'luk say? sisteminin yan?s?ra di?er say? sistemleri de vard?r. Bunlardan
bilgisayar alan?nda kullan?lan iki tanesi ikili (binary) ve onalt?l?
(hexadecimal) say? sistemleridir.













?kili
say? sistemi nas?l olur? Bildi?iniz gibi günlük hayatta kulland???m?z 10'lu
say? sisteminde 0-9 aras? toplam 10 rakam vard?r. Ayn? ?ekilde ikili say?
sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm say?lar bu iki rakam?
kullanarak ifade edilebilir, nas?l m?? ??te burada i?in içine matematik
giriyor. K?sa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir say?y?
ikilik düzene çevirmek için o say? devaml? olarak 2'ye bölünür ve kalanlar
soldan sa?a do?ru yanyana yaz?l?r.










Gelelim as?l konumuz olan 16'l?k say? sistemine. Bu say? sisteminde de
toplam 16 rakam var bunlar;





0 1 2 3 4 5 6 7 8 9 A B C D E F
[10'un kar??l??? A ...
15'in kar??l??? F'dir.]








Etikette kulland???m?z color=#xxxxxx ifadesi ise 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)







Geni? renk tablosu için t?klay?n





Artalan? Renklendirmek





Bu renklerle yaln?zca metinleri de?il sayfam?z?n artalanan?n? da
renklendirebiliriz.

Bunun için etiketini
kullan?yoruz. Daha do?rusu sayfam?z?n gövdesini belirtmek için yazd???m?z etiketini,
bgcolor=#xxxxxx> ?eklinde de?i?tiriyoruz.







Renk kodlar?n? yazarken daima # i?aretini kullanmay? unutmay?n !









bgcolor="#ffcc00"> color="#ffffff"> Günler Pazartesi </li> Sal? </li> Çar?amba </li> Per?embe </li> Cuma </li> Cumartesi </li> Pazar </li>








Resimler



Renkleri de ö?rendikten sonra geldik en heyecanl? konular?n bir di?erine,
evet bu konuda sayfam?za ve artalana nas?l resim ekleyebilece?imizi
ö?renece?iz. Bu konu asl?nda tablolar ve ba?lant?larla da alakal?, bu yüzden
burada genel olarak i?leyece?iz. Resim seçiminde, seçti?imiz resmin gif
yada jpg format?nda olmas? zorunlulu?u d???nda herhangi bir k?s?tlama
yok. (telif haklar? kanunu d???nda tabi)

Resim ekleme i?i gayet kolay. Yapmam?z gereken browser'a sayfaya koyaca??
resmin nerede oldu?unu göstermekten ibaret. Her ne kadar ?art olmasa da resmin
pixel cinsinden en ve boy uzunlu?unu belirtmeniz sizin hayr?n?za olacakt?r.
Kullanaca??m?z etiket ?u ?ekilde olacak;



width="x" height="y">

Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi
herhangi bir grafik editörüyle açarak ö?renebilirsiniz.




Dikkat Edilecek Hususlar






Örne?in bu sevimli
kediyi sayfam?za ekleyelim, peki i?te size bir soru: bu resmin nerede oldu?unu
browser'a nas?l izah ederiz?
Diyelim ki resmimizin ad? kedi.gif eni 65, boyu da 91
piksel, e?er bu resim html sayfam?zla ayn? dizinde duruyorsa sorun yok, kod
aynen ?u ?ekilde olmal?:



height="91">

Fakat siz diyorsunuz ki; benim bir sürü eklemek istedi?im resmim var ve
bunlar? resim adl? bir alt klasörde toplad?m. Yani 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 kullanaca??z;



width="65" height="91">







		Bölü i?aretinin yönüne dikkat edin. Bu Windows'ta ya da Dos'ta dizinler için kulland???m?z ters bölü i?aretinin tersi, yani normal bölü i?areti. HTML'de dizinler belirtilirken hep bu bölü i?areti kullan?l?r. Ziyaret etti?iniz Internet adreslerini hat?rlay?n.







Peki ya ?u ?ekilde olsayd?; resim klasörünün alt?nda ba?ka bir klasör
var ve kedi.gif dosyas? o klasörde, diyelim ki klasörün ad? da gifler
olsun. Bu durumda kedi.gif'in harddiskimizdeki yolu da c:\\html_ders\\resim\\gifler\\kedi.gif
?eklinde olacak. Etiket tahmin etti?iniz gibi ?u ?ekilde olmal?:



width="65" height="91">

Bu ?ekilde istedi?imiz kadar alt dizine ula?abiliriz. Fakat üst dizinlere
nas?l ula?aca??z? O da kolay. Bu seferde html dosyam?z? bir klasör olu?turup o
klasörün içine koyal?m, mesela klasörün ad? da html olsun -umar?m
kar??t?rmazs?n?z. Kedicik bulundu?u gifler klasöründe kals?n. Son durum ?öyle
olacak;

c:\\html_ders\\html\\deneme.htm yolunda html döküman?m?z,
c:\\html_ders\\resim\\gifler\\kedi.gif yolunda resim var. ?zlememiz gereken
yol ?öyle: browser deneme.htm dosyas?n?n bulundu?u klasörü kök dizin
kabul etti. Önce bir üst dizine ç?kmal?y?z ard?ndan resim dizinine
oradan gifler dizinine girmeliyiz. Üst dizine ç?kmay? ../
ifadesiyle belirtiyoruz.



width="65" height="91">

Bu ?ekilde ardarda ../ ifadesiyle istedi?imiz kadar üst dizine
geçebiliriz. E?er iki üste geçeceksek ../../ ifadesi i?imizi görecektir.





Resmi Hizalama



Resim art?k sayfam?zda,
fakat daima hep solda duruyor.
Bir hizalama (align) komutuyla resmi sa?a (right), ortaya (center) ya da sola
(left) alabiliriz. -iyi ama
resim zaten solda de?il miydi??

Bir metinle kulland???n?zda ise buradaki gibi bir sonuç alabilirsiniz,
hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacakt?r.



height="25" align="left">




Artalana Resim Koyal?m



Artalan? renklendirmeyi ö?renmi?tik:
bgcolor="...."> ifadesiyle bu i?i kolayca yap?yorduk. Bu
ifadeyi ?u ?ekilde yazarsak resmimiz artalana dö?enecektir.



background="...">

Kulland???m?z resme yak?n tonda bir rengi bgcolor ifadesinin
kar??s?na yazmay? ihmal etmemek yine bizim hayr?m?zad?r. Bunun yan?nda background
ifadesinin kar??s?na yukar?da anlatt???m?z kurallar çerçevesinde istedi?imiz
resmi koyabiliriz. Fakat bu sefer en ve boy ifadesini kullanmam?za gerek yok.
Seçti?imiz resim browser taraf?ndan tüm sayfay? kaplayacak ?ekilde sayfaya
yerle?tirilecektir.




Resme alternatif metin eklemek



Resimlere alternatif olarak metin yaz?labilir. Ziyaretçi e?er browser'?n?
sadece metinleri göstermek üzere ayarlam??sa, resim yerine alternatif aç?klama
görüntülenecektir.

alt="..." parametresiyle aç?klama
ekliyoruz, bu aç?klama ayn? zamanda kullan?c? fare imlecini resim üzerine
getirdi?inde sar? bir çerçeve içinde görüntülenir.














Son bir örnekle bu konuyu bitirelim,












Gökyüzünü artalana koyal?m, dünyay? da ortalanacak ?ekilde sayfaya
yerle?tirelim.



bgcolor="#666dfe" background="bulut.jpg"> height="170" alt="harita">





E?er hala yapmad?ysan?z resimlere sa? t?klay?p (Resmi farkl?
kaydet../Save image as..) seçene?iyle bu resimleri harddiskinize
kaydedebilirsiniz.

?u ana kadar ö?rendi?imiz komutlarla yerle?tirme i?lemini ancak bu kadar
yapabiliyoruz. Daha sonraki konularda tablolar?
kullanarak istedi?imiz düzeni sa?lamay? ö?renece?iz.

Ba?lant?lar




...

Geldik HTML'de en önemli unsurlardan birisi olan ba?lant?lara. Ba?lant?lar
sayesinde haz?rlad???m?z birçok sayfay? birbirleriyle ili?kili hale
getirebiliriz. Bir t?klama bizi istedi?imiz yere götürecektir. HTML'de
metinlere ve resimlere ba?lant? kazand?rmak mümkündür. Örnek için bu sayfay?
incelemeniz yeterli. Sol tarafta konular? veren bir menü bölümü var. Siz bu
ba?lant?lardan birisini t?klad???n?zda ilgili konu aç?l?yor, sayfa sonlar?ndaki
ileri-geri dü?meleriyle de ba?lant?lar olu?turulmu?, bunlar da t?kland???nda
ilgili sayfa aç?l?yor. Bu yolla ba?ka neler yap?labilir? Ses, grafik dosyalar?,
s?k??t?r?lm?? dosyalar, internet adresleri,.. bunlar?n hepsine ba?lant?
kazand?rmak mümkün. Hatta yapaca??m?z ba?lant? sayfa içinde, yani dahili bir
ba?lant? da olabilir.

?imdi yapmak istedi?imiz ba?lant?ya göre kullanaca??m?z komutlar? inceleyim:





...



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














buraya t?kland???nda meyve resmi
aç?lacak


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.














midi dosyalar?n? çekmek için
t?klay?n


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














2.sayfaya gitmek için t?klay?n

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.














kedi resmi

href="resim/bitki/karanfil.gif"> i?te çok güzel bir karanfil

href="../araba/bmw.jpg"> otomobil resimleri

Bu 3 örnekte altdizinlere/üstdizinlere verilen ba?lant?ya misaller
görüyorsunuz, resimler konusunda gördü?ümüz kurallar burada da geçerli.














t?klay?n sitemi ziyaret edin

Yedinci örnekte bir internet adresi verdik.














t?klay?n dosyalar? indirin

Bu ise bir ftp adresine verilen link örne?i.














mail at?n

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.

Örnek için listeler
linkini t?klay?n.

Böyle bir sayfa haz?rlamak için yapaca??m?z ?eyler:




1. "t?kland???nda"
   aç?lacak konuyu i?aretlemek ...
   
2. browser'a, haz?rlayaca??m?z
   menüye "t?kland???nda" bu i?aretli konuya gitmesini bildirmek.
   href="#...">...
   











"Listeler" sayfas?n?n benzer bir örne?ini yukar?da kodlar?yla
birlikte görüyorsunuz. Sayfa içerisindeki ba?l?klar?
name>... komutlar? aras?na al?yoruz, name k?sm?na
ba?l??? hat?rlat?c? bir isim verebilirsiniz. Benim burada kulland???m ve 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
href> komutuyla haz?rl?yoruz, yaln?z bir farkla; [b]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? ... ile
i?aretledikten sonra ba?lant? etiketini ?u ?ekilde yaz?yoruz:



href="sayfa2.htm#ilgiliyer"> Bu linke t?kland???nda ba?ka bir sayfan?n ilgili k?sm? aç?lacak Ba?ka bir sayfadaki linke t?kland???nda buras? aç?ld?












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:

height="y"> etiketini
href>... etiketinin aras?na al?yoruz.

??te örnek;



href="sayfa1.htm">






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? :



target="...">...










target="_blank"	Ba?lant? yeni bir pencerede aç?l?r.
target="_self"	Ba?lant? ayn? pencere içerisinde aç?l?r.
target="_top"	Ba?lant? ayn? pencere içerisinde en üstten itibaren aç?l?r.
target="_parent"	Aç?lan ba?lant?, o anda aç?k sayfay? olu?turmu? bir ana sayfa varsa onun yerine konur.
target="çerçeve ad?"	Frame komutu ile çerçeve olu?turulmu?sa ba?lant?n?n ad? verilen çerçevede aç?lmas?n? sa?lar.("Çerçeveler" konusunda tekrar de?inece?iz.)

</li>

</li></u>[/b]