Kendi Web Sayfalarınızı Tasarlayın!

 Bu ay Web Okulu'nda liste hazırlamayı, doküman içerisine resimler yerleştirmeyi, doküman içerisinde yazıtipi kullanmayı ve resimleri kullanırken dikkat etmemiz gerekenleri öğreneceğiz.

Liste Kullanmak

HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır, bunun için öncelikle metnin ne biçimde listeleneceğini seçmelisiniz. Liste hazırlarken en çok rastlananları tipler <OL> ve <UL> dir. <UL> tag'ını listeye ait olan her satırın başına bir nokta koymak için kullanabilirsiniz. <OL> tag'ı ise her bir satırı isteğe göre numaralandırmanızı veya harflendirmenizi sağlar. Bu tag'lar ayrıca bir paragrafı diğer paragraflardan biraz ileriye itmek için de kullanılabilir. Liste tipini belirlemek için yukarıdaki iki seçeneği kullanıyoruz; peki liste seçeneklerini birbirinden ayırmak için nasıl bir yol izleyeceğiz. Listenin her bir öğesini belirtmek için ise <LI> tag'ı kullanılır. Bu karakterleri herhangi bir satırın önüne yerleştirdiğinizde web tarayıcınız bu satırı anında yeni bir liste öğesi olarak kabul edecektir.
  • Birinci Satır
  • İkinci Satır
  • Üçüncü Satır
HTML dokümanınızda yukarıdaki gibi bir görüntü elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:

<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>

Listeyi oluşturmak için <OL> kullanacaksanız bu tag'ın yanına TYPE=X takısını girerek liste biçimini belirleyebilirsiniz. Liste öğelerini sıralatmak için büyük harfleri kullanmak istiyorsanız X yerine A, küçük harflerle sıralamak için a, büyük Roma karakterleri ile sıralamak için I, küçük Roma karakterleri ile sıralamak için I, numaralarla sıralamak için ise L karakterini kullanabilirsiniz.

Büyük harflerle ayrılan bir liste aşağıdaki gibi bir koda sahip olacaktır:

<ol type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</ol>

Sihirli bir TAG: <PRE>
HTML haline dönüştürmeye üşendiğiniz ve Internet'te aynen yer almasını istediğiniz bir metin var diyelim. Fakat bu metni HTML sayfası içine yerleştirdiğinizde ve web tarayıcınız aracılığıyla görüntülediğinizde bütün formatlamalar ve paragraflar yok oluyor... İşte bu aşamada bir tag imdadınıza koşar ve tüm metni HTML'ye dönüştürmenize gerek kalmaz. <PRE> ile başlayan metin aynen not defterinde göründüğü gibi görünür, tüm sekme karakterleri, ENTER karakterleri HTML sayfası içinde yer alır. Metnin eski haline dönmesi için </PRE> kullanılması yeterlidir. Her gülün bir dikeni olduğu gibi bu gülün de bir kötülüğü uzunluğu bir sayfayı geçen metinleri bir alt satıra kaydırmamasıdır, metnin tamamının görünebilmesi için kullanıcı sayfayı sağa doğru kaydırmalıdır.
Herhangi bir liste içerisinde değişik veya aynı tipte bir liste daha açmak mümkündür. Bunun için <UL> veya <OL> tag'ını kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Açılan tüm liste tag'larının kapatılması unutulmamalıdır. Unutulduğu takdirde HTML sayfası düzgün görünmeyecektir.

Resim kullanmak

Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.

Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle <IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.

Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)

Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.

Resimleri kullanırken dikkat etmeniz gerekenler:

* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.

* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.

* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.

* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.

HTML ve Yazıtipleri

Geçen ay <Hx> tag'ının kullanımını vermiş ve x yerine vereceğiniz değerler sayesinde HTML dökümanına değişik büyüklüklerde başlık atılabileceğini söylemiştik. Bu ay ise doküman içerisinde değişik yazı tiplerini nasıl kullanacağınızı göreceksiniz.

Dokümandaki yazıtipini değiştirmek için <FONT> tagı kullanılır, genel kullanımı şöyledir:

<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">

* SIZE değişkeni metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin puntosunun bir eksiltilmesini veya iki arttırılmasını sağlayabilir, direkt olarak bir rakam vererek puntoyu tayin edebilirsiniz. HTML sayfalarında SIZE değişkenine verebileceğiniz en büyük değer 5'tir. 5'ten sonra vereceğiniz her değer siz 5 değeri vermişsiniz gibi muamele görecektir. Yazıtipi çok büyük olmamalıdır, büyük yazıtipleri hem kullanıcıların sayfayı okumasını zorlaştırır hem de sayfanın güzelliğini bozar.

* FACE takısını tüm web tarayıcıları desteklemese de bu takı kullanılarak sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. ...rneğin FACE="Arial Tur" takısı kullanıldığında yazı tipi Türkçe Arial olacaktır. FACE değerine Türkçe desteği olmayan "Comic Sans Ms" gibi yazıtipleri verilmemelidir, verilirse bazı Türkçe karakterler bozuk olarak görülecektir.

* Son olarak COLOR takısı yazıtipinin rengini ayarlamakta kullanılmaktadır. Web tarayıcılarının desteklediği temel renklerden oluşan tablo geçen ay bu bölümde verilmiştir. Tablodan dilediğiniz bir rengi seçerek bu değişkenin karşısına yazdığınızda yazıtipi rengi değişecektir.

* <FONT> ifadesi her zaman bir </FONT> ile sonlanmalıdır. Bu tag unutulursa web tarayıcınız sayfaları yanlış görüntüleyebilir. (Bazen de hiç görüntülemez)