Perfect Hack Team
html-ders2
Ş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:UsersmustafaDesktopYeni klasörkedi.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:UsersmustafaDesktopYeni 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:UsersmustafaDesktopYeni klasörkedi.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:UsersmustafaDesktopYeni klasörkedi.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 ekledik ve 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>