Türker
Yeni Üye
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:
<html>
<body>
Merhaba Dünya
</body>
</html>
HTML:
<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>| <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:
<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>
[CODE]
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.
[HEADING=3]Resim Ekleme[/HEADING]
İ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.
[CODE=html]
<html>
<body>
<img src="C:\Users\Türker\Desktop\Yeni klasör\kedi.jpg" >
</body>
</html>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\Türker\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:
<html>
<body>
<img src="kedi.jpg" height="100" width="100">
</body>
</html>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=” ">
</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:
<html>
<body background="kedi.jpg">
</body>
</html>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:
<html>
<body>
<a href="http://www.webmasterforum.com.tr">Siteye giriş için tıklayın</a>
<a href="http://www.teknobalik.com"><img src="kedi.jpg">Siteye giriş için tıklayın</a>
</body>
</html>Bağlantının yeni bir sayfada açılmasını da sağlayabiliriz. Bunun için target="_blank" ifadesini ekleriz.
HTML:
<html>
<body>
<a href="http://www.teknobalik.com" target="_blank">Siteye giriş için tıklayın</a>
</body>
</html>
