|
|
|
|
Hypertext terimi bir text'en başka bir text'e zıplamanızı(jump) sağlayan linklerin bulunduğu text'ler için kullanılır. Normal bir yazıda hiçbir zaman başka bir yazıya atlama yapamazsınız. Bilgisayar dünyasında başka bir dosyaya, metine vs.. atlamanıza(zıplamanıza) imkan veren metinlere hypertext denir.
Her dil bazı işaretler kullanır. Html dili de işaretlerden oluşmuştur. Html ile hazırlanan sayfaları kullanıcılara gösteren tarayıcı(Browser) denilen programlar vardır (Netscape, İnternet Explorer vs..). Html işaretleri ile tarayıcıya web sayfasının nasıl gözükeceğini belirtirsiniz. Yani html işaretleri ile tarayıcıya yazıların rengini kırmızı yap, resmi sola koy, link koy gibi komutlar verirsiniz. Tarayıcılar bu işaretlere göre sayfanızı oluşturduğu için html bir markup (işaretleme) dilidir.
Html tag(etiket) denilen birimlerden oluşmuştur. Tag'ler < (küçük) işareti ile başayıp > (büyük) işareti ile biten elemanlardır. Açılış tag'i arasındaki elemanlar ve kapanış tag'i hepsi birden bir elementi oluşturur. Her tag bir komut gibidir yani tarayıca bir şeyler belirtir. Yazı yazmak için bir tag ,resim koymak için bir tag kullanılır. <img> tag'i resim koymak için, <a> tag'i link (tıklandığında başka sayfaya gitmenizi sağlayan yazı) koymak için , <table> tablo koymak için , <font> yazıların biçimini değiştirmek için kullanılır. Html'de çok sayıda tag bulunur. Bazı tag'ler açıldığı zaman kapatılması gerekir. Her html sayfasının başında mutlaka olması şart olan <html> tag'i mutlaka sayfanın sonunda </html> ile kapatılmalıdır. Kapatma işlemi </tag> ile yapılır. Taglar açılıp kapandığı yerde yani arasındaki bölgede etkilidir.
Bazı tagların yardımcı ekleri vardır. Bunlara attribute (özellik) denir. Genel yapısı <tag attribute1="value1" attribute="value2"> etkilenen bölge </tag> şeklindedir. Örneğin resim.gif diye bir resim dosyasını web sayfanıza koymak istiyorsanız <img> tag'inin src özelliğini kullanacaksınız. resim.gif dosyasını <img src="resim.gif"> </img> ile gösterebilirsiniz.
Html'de elementler (açılış tag'i+arasındaki bölge+kapanış tag'i) hiyerarşik bir yapıdadır. Yani elementler içiçe kullanılabilir. Bir web sayfasında bütün elementler <html></html> tag'leri arasındadır. Bu tag'in dışında başka bir tag kullanılamaz. Her tag bu tag'in arasında açılır ve kapanır. Genel <tag1> <tag2> <tag3> </tag3> </tag2> </tag1> şeklinde bir alt üst ilişkisi vardır. Açılan bir tag kapanmadan üst tag kapanamaz. En alttaki tag kapatılmalıdır. Html'de içiçe elementlerde alt element ile üst element aynı özelliğe değer veriyorlarsa alttaki elementin değeri geçerli olur. Örneğin üstteki element yazıların rengini kırmızı yap diyorsa ve altındaki element yeşil yap diyorsa alttaki elementin arasındaki yazılar yeşil olur.
HTML hoşgörülü bir dildir. Açılan bir tag kapatılmamışsa da browser sayfayı gösterir. Ancak tag kapatılmadığı için açıldıktan sonraki tüm bölüme etkili olur. Bu da istenmeyen bir görünüm oluşturabilir. O yüzden her zaman açılmış bir tag'i kapatınız.
Bir html kodu iki bölüme ayrılmıştır. Birinci bölüm sayfa hakkında genel bilgilerin bulunduğu head tag'i, ikinci bölümse sayfanın görünen kısmının bulunduğu body tag'idir. Aşağıda bu yapı görülmektedir.
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head> 3 sayfa hakkında genel bilgiler buraya.... 4 </head> 5 <body> 6 sayfanın görünecek olan kısmı buraya.... 7 </body> 8 </html>
Görüldüğü gibi html tag'i iki ana bölüme ayrılıyor. head ve body.
Browser bir web sayfasındaki tüm yazılanları değerlendirir. Eğer siz bazı yazıları veya tag'leri browser'in değerlendirmesini istemiyorsanız comment kullanırsınız. Html yorum <!-- ile başlar ve --> ile biter. Aşağıda bir örnek görülüyor.
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head> 3 <!--bu sayfa sadece yorum için yapılmıştır.-->; 4 </head> 5 <body> 6 <!-- 7 <h1>bu başlık görülmeyecek. çünkü yorum</h1> 8 --> 9 </body> 10 </html>
Html elementleri yukarıdaki örneklerde görüldüğü gibi hiyerarşik bir yapı sergilerler. Yaptığın sayfanın html kodu bu hiyerarşiyi rahat görmenizi sağlamalıdır. Bir kodu aşağıdaki gibi yazsaydık anlayabilir miydiniz?
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html><head> 2 <title>welcome</title></head> 3 <body><center><font color="red" size="12">hello world</font> 4 </center> 5 </body></html>
Eğer bir etiket başka bir etiketin içindeyse bir tab mesafesinde içeride olması çok iyi olur. Bu her zaman kullanmayabilirsiniz. Örneğin head ve body'yi içeriye almayabilirsiniz. Yine eğer etiket açılışı ve kapanışı bir satıra sığacak kadar küçükse tek satırda yazılabilir. Şimdi bu söylediklerimi koda uyguluyalım
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head><title>welcome</title></head> 3 <body> 4 <center><font color="red" size="12">hello world</font></center> 5 </body> 6 </html>
Görüldüğü gibi html etiketini yok kabul ettik. Yine head ve title tek satıra sığdığı için tek satır haline getirdik. Ayrıca center ve font etiketinden oluşan grupta tek satır haline getirilmiştir. Bu yazışın yararı hem hiyerarşik yapıyı görebilirsiniz hem de çok az satır kullanmış olursunuz. Ancak eğer head etiketi içine başka bir etiket eklediğinizde tek satıra sığmaz ve okunaklılık azalır. Tekrar eski şekilde yazarsınız.
Yazı ile etiket nasıl yazılacağıda önemlidir. <title>welcome</title> şeklinde görüldüğü gibi etiket ile yazı arasında boşluk bırakılmamıştır. Aşağıda ki örnekte gereksiz boşluklar vardır.
| Göster Gizle Kopar Satır Gizle Satır Göster |
1 <html> 2 <head> 3 <title> 4 welcome 5 </title> 6 </head> 7 <body> 8 <center> 9 <font color="red" size="12"> 10 hello world 11 </font> 12 </center> 13 </body> 14 </html>
yazılar ile etiketler arasında boşluk, tab, enter yapmayın. Etiket biter bitmez yazıya başlayın ve biter bitmez kapatın.
|
|
