1. Ana Sayfa
  2. Web Tasarım ve Programlama
  3. HTTP & HTML Ders 2

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>
Yorum Yap

3
Kimler Neler Demiş?

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir
hakim inan
Ziyaretçi
hakim inan

cok iyi bi site basıralırınız devamını dilerm sürekli sizi takip etmekteyim

BilisimOgretmeni
Ziyaretçi
BilisimOgretmeni

ilgi , alaka ve desteğiniz için teşekkürler..

necla
Ziyaretçi
necla

😛 çok iyi olmuş böyle bir sitenin olması bu siteyi bize öneren hocamıza teşşkür ederim