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
-
#800080=purple(mor)
-
#808000=olive(zeytin yeşili)
-
#808080=gray(gri)
-
#C0C0C0=silver(gümüşi gri)
-
#FF0000=red(kırmızı)
-
#FF00FF=fuchsia(par.pem.)
-
#FFFF00=yellow(sarı)
-
#FFFFFF=white(beyaz)
-
#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)
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”
Örnek: “htm1.htm”
Örnek: “htm2.htm”
cok iyi bi site basıralırınız devamını dilerm sürekli sizi takip etmekteyim
ilgi , alaka ve desteğiniz için teşekkürler..
:P çok iyi olmuş böyle bir sitenin olması bu siteyi bize öneren hocamıza teşşkür ederim