Bu yazıda öğrenecekleriniz:
HTML Yazı Tipleri
Geçen ders HTML’ e giriş yaptık, temel kodlarımızı öğrendik. Şimdi bunu bir adım ileriye taşıyacağız. Ancak öncelikle şunu belirtmek istiyorum. Geçen dersimizde HTML5 in son sürüm olduğunu söylemiştik. HTML5 ile beraber bazı yeni özellikler gelirken bazı kodlar da desteklenmemeye başlandı. Bunları HTML5 başlığı altında ayrıca öğreneceğiz. Şimdilik yakın zamana kadar kullanılan HTML kodları üzerinden derslerimize devam edelim.
Ekrana yazı yazdırmayı öğrenmiştik. En basit şekilde:
<html>
<body>
Merhaba Dünya
</body>
</html>
Ekrana “Merhaba Dünya” yazdırabiliriz. Şimdi bunu farklı şekillerde yazalım. Not defterimizi açıp aşağıdakileriyazıyoruz.
<html>
<body>
<b>Merhaba Dünya</b><br/>
<i>Merhaba Dünya</i><br/>
<u>Merhaba Dünya</u><br/>
<del>Merhaba Dünya</del><br/>
<sub>Merhaba Dünya</sub> Merhaba Dünya <sup>Merhaba Dünya</sup><br/>
<marquee>Merhaba Dünya</marquee><br/>
</body>
</html>
Önce etiketleri açıklayalım:
<b>…</b> : Geçen ders verdiğimiz ilk örneğimizdi. Yazıların kalın görünmesini sağlar. (Örn. Merhaba Dünya)
<i>…</i> : İtalik görüntü sağlar. (Örn. Merhaba Dünya)
<u>…</u> : Yazıyı altı çizili gösterir. (Örn. Merhaba Dünya)
<del>..</del> : Yazıyı üstü çizili gösterir. (Örn. Merhaba Dünya)
<sub>…</sub> : Yazıyı satırın yarım karakter altında gösterir. Matematiksel vb. formülleri gösterirken kullanabilirsiniz.(Örn. Merhaba Dünya)
<sup>…<sup> : Yazıyı satırın yarım karakter üstünde gösterir.Mesela bir sayının üslü halini web sayfasında gösterirken kullanabilirsiniz.(Örn. Merhaba Dünya)
<marquee>…</marquee> : Kayan yazı oluşturur.
Şimdi not defterini html uzantılı olarak kaydedin ve sonucu görün.
Sıra <font> etiketini tanımaya geldi. <font> etiketini kullanarak yazının tipini, rengini ve boyutunu değiştireceğiz.
Örneklerle gösterelim.
<html>
<body>
Bu normal bir yazı<br/>
<font face=”Tahoma”>Bu yazı Tahoma yazı tipinde</font><br/>
<font size=”15″>Yazı boyutu 15 olarak ayarlandı</font><br/>
<font color=”red”>Yazı rengi olarak kırmızı seçildi</font><br/>
<font face=”arial” size=”20″ color=”blue”>Yazı tipi Arial, boyutu 20 ve rengi mavi</font>
</body>
</html>
Açıklayacak olursak: Font etiketiyle yazıya 3 farklı özellik kazandırabiliyoruz.Renk, yazı tipi, yazı boyutu. Önce font yazıyoruz sonra da face, color veya size. face=”…” arasına yazı tipi yazıyoruz.Arial, tahoma, verdana gibi. color=”…” arasına renk değeri yazıyoruz.Red, yellow, blue, aqua gibi… size=”…” kullanımında ise istediğimiz yazı boyutunu giriyoruz.
Resim Ekleme
İstediğimiz bir resmi,- ister bilgisayardan ister bir web sayfasından- kendi sayfamıza ekleyebiliriz. Bunun için <img src=”..”> etiketini kullanacağız. Önce örneğimizi görelim ardından ben açıklamayı yapayım.
<html>
<body>
<img src=”C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg” >
</body>
</html>
Resim eklemek için <img src=”…”> etiketini kullandık. Tıpkı <br/> etiketi gibi bu da tek parçadır.Ben eklemek için bir kedi resmi belirledim. Resme sağ tıklayıp özelliklere geldim ve ordan resmin konumunu kopyaladım.Bu, C:\Users\mustafa\Desktop\Yeni klasör idi. Bunu <img src=”…”> deki noktalı kısma yapıştırdım.Resmin adı kedi.jpg ‘ydi. Yapıştırdığım kısmın yanına bir slash “\” işareti koyup kedi.jpg yazdım.<img src=”C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg” > haline geldi ve artık kullanıma hazır.
Resmin konumunu ve adını uzantısıyla beraber (.jpg .png .gif vs) yazmak resmin sayfamızda görünmesi için yeterli.Bunun yanı sıra resmin boyutunu ayarlamak da bizim elimizde.Uzunluk ve genişliğini ayarlamak için width=”..” ve heigth=”..” ifadelerini kullanacağız. Hemen örneğimizi yapalım.
<html>
<body>
<img src=”C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg” height=”10″ width=”10>
</body>
</html>
Gördüğünüz gibi, zor bir yanı yok.
Eğer resmin ve not defterinde oluşturduğumuz html sayfasının konumu aynıysa sadece resmin adını yazmamız yeterli olur.Mesela masaüstünde yeni klasör oluşturalım ve resmi oraya kopyalayalım.Sonra aynı klasör içerisinde bir de not defteri oluşturup kodlarımızı yazalım.
<html>
<body>
<img src=”kedi.jpg” height=”100″ width=”100″>
</body>
</html>
Yine aynı şekilde resmimiz web sayfasında görüntülenecektir. Bu şekilde çalışmak bizi gereksiz kodlardan kurtarır, daha sade bir yapıya kavuşturur.
Herhangi bir internet sitesinde gördüğünüz resme sağ tıklayıp URL adresisini kopyalarsanız; resmi kendi web sayfanızda görüntüleyebilirsiniz.
<html>
<body>
<img src=”http://img44.imageshack.us/img44/1606/irinsevimlikediresimleri.jpg”>
</body>
</html>
Arka planı değiştirme
Arka planı değiştirmeyle ilgili de iki örnek yapalım. Ama unutmayın ki sayfaya görsel açıdan zenginlik katacak olan CSS’tir.HTML bu konuda yetersiz kalıyor. Yine de bilmekte fayda var.
<html>
<body bgcolor=”black”>
</body>
</html>
Bu ilk örneğimiz. Arka plan rengini değiştirmek için normal <body> etiketinin yanına bgcolor=”..” ifadesini ekledikve noktalı yere black yazdık. Açtığınızda karşınızda siyah, boş bir web sayfası olacak. Black yerine diğer renk adlarını veya renk değerini yazabilirdik.#000000 ifadesi de siyahı belirtir. Kırmızın değeri # FF0000 , mavinin değeri #0000FF ‘dir. Bunların ezberlenmesine gerek yoktur.Küçük bir Google araştırmasıyla bütün renklerin ve tonlarının değerini bulabilirsiniz.
Şimdi ise arka plana bir resim yerleştirelim.
<html>
<body background=”kedi.jpg”>
</body>
</html>
Kedi resmimiz arka plana yerleşmiş oldu.Resim arka planı tamamen kaplamaz. Orijinal boyutuna göre tekrar eder. Bununla ilgili detaylı bilgileri CSS’ te öğreneceğiz.
Link Oluşturma
Bu dersimizde son olarak link oluşturmaktan bahsedelim. Bunun için kullanacağımız etiket şudur: <a href=”url”>.. </a>
Araya bir yazı yazabileceğimiz gibi bir resim de ekleyebiliriz. Örneğimizi yapalım.
<html>
<body>
<a href=”http://www.cagataycebi.com”>Siteye giriş için tıklayın</a>
<a href=”http://www.cagataycebi.com”><img src=”kedi.jpg”>Siteye giriş için tıklayın</a>
</body>
</html>
Link eklemek karışık bir durum değil. Sayfayı tarayıcada görüntülediğinizde daha iyi anlayacaksınız. Dikkat etmeniz gereken nokta internet adresini http:// ile başlayarak yazdım. Ancak aynı web adresindeki alt bağlantılara link verirken kullanmamız gerekmez.
Bağlantının yeni bir sayfada açılmasını da sağlayabiliriz. Bunun için target=”_blank” ifadesini ekleriz.
<html>
<body>
<a href=”http://www.cagataycebi.com” target=”_blank”>Siteye giriş için tıklayın</a>
</body>
</html>