Başlıklar, Hizalama, Arka plan
HTML’de metinlerin başlık olarak görünmesi gerektiği <h..> etiketi ile belirleniyor. Böylece sayfayıoluştururken başlıklar net bir şekilde belirtilebilmektedir. Burada önemli olan noktalardan bir tanesi Word’dede olduğu gibi yazının ne tarafa hizalı olarak duracak olduğudur. Bir diğeri ise sayfanın arka plan rengini, tasarım yapılan projeye göre belirleme ihtiyacı olmasıdır. Arka plan rengi ile birlikte özellik mantığını irdelemek gerekir. Arka plan rengi belirtilirken direkt komut olarak sayfaya eklenmez. Sayfanın tamamını etkileyeceği için <body> etiketinin özelliği olarak sayfada yerini alır. Özellikler <body bgcolor=”White”> şeklinde kullanılır.
baslik-hizalama-arkaplan-html
<html> <head> <title>Başlıklar</title> </head> <body bgcolor="gray" text="black"> <h1> Başlık 1</h1> <h2> Başlık 2</h2> <h6> Başlık 6</h6> <p align="right"> Bu yazı sağa dayalı olacak...</p> </body> </html>
Örneğe ait ekran görüntüsünü aşağıda bulabilirsiniz:
baslik-html-ornek-örnek
Resim (Image)
Sayfaya resim eklemek için img etiketi kullanılır. Bu etiket ile iligli özellikler şunlardır;
resim-gorsel-html-kod-etiket
Bir resmi HTML bir sayfaya aşağıdaki şekilde ekleyebilirsin:
<html> <head> <title>Resimler</title> </head> <body> <p> <img alt="Kadıköy" src="kadikoy.jpg" style="width: 430px; height: 323px" /></p> </body> </html>
kadikoy.jpg resim dosyası için herhangi bir yol belirtilmediği için, bu dosyanın html dosyası ile aynı dizinde olduğu varsayılır. Sayfa hazırlandığında, aşağıdaki gibi görünecektir.
html-resim-görsel-örnek
Bağlantı (Link)
Sayfalar arasında geçiş işlemleri için bağlantılar kullanılır. Bağlantılar <a.. ></a> (anchor) etiketi ile gerçekleştirilebilir. Bağlantıları kullanarak sayfalar arasında geçiş yapabileceğin gibi sayfanın belli bölümlerinde tanımlamalar yapıp aynı sayfa içerisinde de geçiş yapabilirsin. Daha önceki örnekleri gözünün önüne getir ve bir örnekten diğerine geçmek için sayfalardan birine
html-bağlantı-url-href-name
bağlantı ekleyip test et. Bu örneğin gerçekleştirilmesini sana bırakıyorum, yapacağın tek şey sayfanın body bölümünde herhangi bir yerde <a href=”baglanti.htm”>Bağlantılara Git</a> şeklinde bir link eklemek. Bu işlemi
gerçekleştirdiğinizde sayfanızda Bağlantılara Git şeklinde bir bağlantı oluşturulacak ve tıkladığınızda, sizi baglanti.htm adresine yönlendirecektir. Burada gösterilecek örnekte ise uzunca bir sayfayı düşünebilirsin. En üstte bir tane linkle sayfanın sonuna, en alttaki bir tane linkle ise sayfanın başına dönüyor olacağız. HTML’de çok görmeye alışık olmadığımıza etiketindeki name özelliğinin kullanıldığı bu örneğin kodları aşağıdaki gibi olacaktır.
Burada gösterilecek örnekte ise uzunca bir sayfayı düşünebilirsin. En üstte bir tane linkle sayfanın sonuna, en alttaki bir tane linkle ise sayfanın başına dönüyor olacağız. HTML’de çok görmeye alışık olmadığımıza etiketindeki name özelliğinin kullanıldığı bu örneğin kodları aşağıdaki gibi olacaktır.
<html> <head> <title>Bağlantı</title> <body> <p> <a name="top"></a> <h1>Bu Sayfanın Başı</h1></p> <p> <a href="#bottom">Sayfa Sonuna Git</a> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> </p> <p> <a href="#top">Sayfa Başına Git</a> <a name="bottom"></a> <h1>Bu Sayfanın Sonu</h1></p> </body> </html>
Koda ait ekran görüntülerini de aşağıda bulabilirsiniz.
html-baglanti-link-verme
html-baglanti-link-verme-url
Konular: arkaplan, başlık, ders, etiket, genişlik, görsel, hizalama, html, kaynak, kod, kodhane.com, komut, link, not, örnek, parametre, resim, resim ekleme, src, url, yükseklik
Yorum yok
Bu yazı için Yorum Beslemesi
Geri izleme bağlantısı http://www.kodhane.com/html-baslik-hizalama-arkaplan.html/trackback