| HTTP & HTML Ders 2 |
|
- 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
- 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”
|

Yorumlar
RSS beslemesi, bu iletideki yorumlar için