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>
  • hakim inan

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

    • BilisimOgretmeni

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

  • necla

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

X

Pin It on Pinterest

X