HTTP & HTML Ders 2
Listeler
- HTML üç tip liste hazırlama imkanı vermektedir. 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.
Sıralı Listeler
- Liste içine alınacak metinler <ol>...</ol> 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) etiketi getirilir (Bu etiket tıpkı <br> etiketi gibi
sonlandırılmıyor).
- <ol> 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.
Sırasız Listeler
- Bu tip listede de mantık aynıdır. Fark, listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler kullanılır.
- <ol> etiketi yerine <ul> etiketini kullanıyoruz, liste maddeleri için kullandığımız <li> etiketi burada da geçerlidir.
- <ol> 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.
Tanımlı Listeler
- Bu listelemede kullanılan etiketler:
<dl>...</dl> , <dd> , <dt>
- Listenin maddelerini belirtmek için kullanılan <li> etiketinin yerini burada <dd> ve <dt> etiketleri alır.
- Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına alınan liste bu etiketlemede <dl>...</dl> arasına yazılır.
- Parametre olarak <dl> etiketi içinde yine compact ifadesi kullanılabilir.

Renk Kodları
- Fontlar konusunda, metnin rengi belirlenirken <font color="..."> etiketi kullanılarak color komutunun karşısına rengin İngilizce karşılığı yazıldı.
Renklendirmenin bir başka yolu ise 16'lık sayı düzeninde renk kodu girmektir.
- Etikette kullanılan “color=#xxxxxx” ifadesi, RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin
karışım oranlarını belirtir. Bu renklerden her birinin 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.
Sık Kullanılan Renkler
  1. #800080=purple(mor)
  2. #808000=olive(zeytin yeşili)
  3. #808080=gray(gri)
  4. #C0C0C0=silver(gümüşi gri)
  5. #FF0000=red(kırmızı)
  6. #FF00FF=fuchsia(par.pem.)
  7. #FFFF00=yellow(sarı)
  8. #FFFFFF=white(beyaz)
  9. #000000=black(siyah)
  10. #000080=navy(lacivert)
  11. #0000FF=blue(mavi)
  12. #008000=green(yeşil)
  13. #008080=teal(koyu yeşil)
  14. #00FF00=lime(parlak yeşil)
  15. #00FFFF=aqua(turkuaz)
  16. #800000=maroon(vişne çür)
Artalanı Renklendirmek
- Renk kodlarıyla yalnızca metinler değil sayfaların artalanları da renklendirilebilmektedir.
- Bunun için <body bgcolor=#xxxxxx> etiketi kullanılır.
- Sayfanın gövdesini belirtmek için yazılan <body> etiketi, <body bgcolor=#xxxxxx>
şeklinde değiştirilir.
Resimler
- Resim seçiminde, seçilen resmin gif yada jpg formatında olması zorunludur.
- Resim ekleme işi, göz atıcıya sayfaya koyulacak resmin nerede olduğunu göstermekten ibarettir. Resmin piksel cinsinden en ve boy uzunluğunun belirtilmesi de yararlıdır.
- Kullanılacak etiket;
<img src="/resmin bulunduğu yer ve adı" width="x" height="y">
Dikkat!
- Örneğin bu logoyu sayfaya ekleyelim. Bu resmin nerede olduğunu göz atıcımıza nasıl izah
ederiz?
- Resmimizin adı <logo.gif>, genişliği 90, boyu da 91 piksel.
- Bu resim sayfamızla aynı dizinde duruyorsa, kod aynen şu şekilde olmalıdır:
<img src=“logo.gif" width=“90" height="91">
Resmi Hizalama
- Bir hizalama (align) komutuyla resim sağa (right), ortaya (center) ya da sola (left) hizalanabilir.
- Bir metinle kullanıldığında, hizalama komutu resmi metni göz önüne alarak hizalayacaktır.
Hizalama Kodu Örneği:
<img src=“sagdakiresim.jpg" width="25" height="25" align=“right">
Bağlantılar
- 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.
<a href="/....">...</a>
- Bu komutla oluşturulacak bağlantı ile browser;
- yeni bir sayfa açabilir,
- kullanıcıyı farklı bir Internet adresine yönlendirebilir,
- kullanıcının bir dosyaya ulaşmasını sağlayabilir.
- <a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır.
Bağlantı bulunan metinler göz atıcılar tarafından (başka bir değer atanmamışsa) altı çizili ve mavi renkli gösterilir.
- Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz
HTML'nin en önemli yapıtaşlarındandır.
- Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanarak gerçek sayfa düzenlemeleri yapılabilir.
Tablolar <table>...</table> Dikkat!
- HTML dizayn konusunda bir masaüstü yayıncılık programı kadar hassas değildir. Tablolar en önemli araçlarındandır. Ancak, göz atıcıların tablo etiketlerini yorumlamada gösterdiği farklılıklar da tasarımda dikkate alınmalıdır.
- Göz atıcılar arasındaki yorum farklarından dolayı sayfanız birinde iyi görünürken bir başkasında hiç istemediğiniz bir şekilde görüntülenebilir.
- Örneğin bazı teknikler (css, dhtml gibi) sadece MS Internet Explorer 4 ve üstü sürümler ile
görüntülenebilirken, Netscape tarafından tam olarak desteklenememektedir.
Çerçeveler
- Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri desteklemektedir).
- Çerçeve, sayfanın bir tarafını sabit kullanarak, diğer tarafını kullanıcının isteğine göre değiştirme imkanı verir.
- Kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak gerekmektedir.
- Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir.
Örnek : “frame.htm”
  1. <title>Çerçeveler</title></head>
  2. <frameset cols="*,*">
  3. <frame name="sol" src="htm1.htm">
  4. <frame name="sag" src="htm2.htm">
  5. </frameset>
  6. <body> </body></noframes></html>
Örnek: “htm1.htm”
  1. <head></head>
  2. <body bgcolor="red">
  3. <font size="7"
  4. color="#ffffff">htm1.htm</font>
  5. </body>
  6. </html>

Örnek: “htm2.htm”
  1. <head> </head>
  2. <body bgcolor="blue">
  3. <font size="7"
  4. color="#ffffff">htm2.htm</font>
  5. </body>
  6. </html>




 

Yorumlar  

 
+1 #1 necla 12-11-2008 07:09
:P çok iyi olmuş böyle bir sitenin olması bu siteyi bize öneren hocamıza teşşkür ederim
Alıntı
 

Yorum ekle


Güvenlik kodu
Yenile

Üye Giriş

Üyeler

3616 Kayıtlı
3 Bugün
3616 Dün
5 Bu Hafta
25 Bu Ay
Son
maczugaher offline