- 2

Font etiketinin kullanımı;

...

face = yazıtipinin adı (arial tahoma verdana ...)

size = yazının büyüklüğü (1-7 arası)

color = yazının rengi (red green gibi renklerin ingilizce karşılığı yada RGB renk değeri)

Bunlara font etiketinin parametreleri diyoruz.

etiketinin yanısıra öğreneceğimiz bir diğer etiket etiketi. Önce bu etiketin kullanımını göreceğiz. etiketi bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir. Bu yüzden metinleri bölmek yani ikinci satıra atmak için etiketini kullanıyoruz. İstisnai etiketlerden birisi bu: etiketi sonlandırılmıyor.

Buna bir örnek verelim;

<html><head> <title>BR etiketi</title></head><body> pazartesi

salı

çarşamba

 ocak şubat mart nisan

</body></html>

Yukarıdaki örneğimizde "pazartesi salı ve çarşamba"yı yazarken Enter tuşu ile bir alt satıra geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını tek bir satıra yazdığımız halde bu kez browser aradaki etiketine bakarak bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere metni bir alt satıra geçirmek için etiketini kullanıyoruz. Bu etiketin bir özelliği de sonlandırılmaması.

Şimdi font etiketinin kullanımını bir örnekle inceleyelim. Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz. Eğer benim örnekte kullandığım yazıtipleri (tahoma comic sans ms verdana arial) sisteminizde yüklü değilse bunun yerine sizde yüklü olan istediğiniz bir fontu kullanabilirsiniz.

<html><head><title>Renkler ve Mevsimler</title></head><body>İlkbahar Yaz Sonbahar Kış </body></html>

Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık. Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık. Aslında bunun bir yolu daha var; o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi).

Bu konuyu renkler bölümünde ayrıntılı olarak inceleyeceğiz. Burada yalnız bir kaç örnekle yetinelim:

Kırmızı-red

Mavi-blue

Siyah-black

Sarı-yellow

Lacivert-navy

Yeşil-green

Bu renkleri yukarıdaki örnek üzerinde deneyin renk kodunu silin ve rengin ingilizce karşılığını yazın.

ÖDEV: Şu ana kadar öğrendiğimiz etiketleri kullanarak (tabii ki hepsini kullanmak zorunda değilsiniz) aşağıdaki görüntüyü browser'da nasıl elde ederiz?

İPUCU

Öğrendiğimiz etiketler şunlardı;

<html> <head> <title> <body> <center> 

Sıralı Listeler

Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Liste maddelerinin başına ise <li> (list item) etiketini getiriyoruz. Bu etikette tıpkı etiketi gibi sonlandırılmıyor. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.

Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde) bölümünü vereceğiz. Kodun geri kalan kısımlarını kendi sayfanızda tam olarak yazmayı unutmayın.

<ol type="1"> <li>Kimya <ol type="a"> <li>İnorganik <li>Analitik </ol> <li>Fizik <ol type="a"> <li>Dinamik <li>Statik </ol> <li>Matematik <ol type="a"> <li>Sayılar <li>Diğer <ol type="i"> <li>Türev <li>İntegral </ol> </ol></ol>

1. Kimya

1. Organik

2. İnorganik

3. Analitik

2. Fizik

1. Dinamik

2. Statik

3. Matematik

1. Sayılar

2. Diğer

1. Türev

2. İntegral

Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe <ol> etiketi ile başlayıp liste maddelerinin her birisinin başına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol> etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar harfler (küçük/büyük) ve romen rakamları (iiiiii gibi)

Sırasız Listeler

Bu tip listelerde de mantık aynı. Fark; listeleme yaparken maddelerin başına harf rakam gibi unsurlar yerine küçük yuvarlaklar kareler kullanabilmemiz. <ol> etiketi yerine <ul> etiketini kullanıyoruz liste maddeleri için kullandığımız <li> etiketi burada da geçerli. <ol> için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire) circle (içi boş daire) square (içi dolu kare). Compact parametresi sırasız listelerde de kullanılabiliyor.

<ul type="disc"> <li>Kimya <ul type="square"> <li>İnorganik <li>Analitik </ul> <li>Fizik <ul type="square"> <li>Dinamik <li>Statik </ul> <li>Matematik <ul type="square"> <li>Sayılar <li>Diğer <ul type="circle"> <li>Türev <li>İntegral </ul> </ul></ul>

* Kimya

o Organik

o İnorganik

o Analitik

* Fizik

o Dinamik

o Statik

* Matematik

o Sayılar

o Diğer

+ Türev

+ İntegral

Tanımlama Listeleri

Bu listelemede kullanılan etiketler şöyle; <dl>...</dl> <dd> <dt> Listenin maddelerini belirtmek için kullandığımız <li> etiketinin yerini burada <dd> ve <dt> etiketleri alıyor. Aynı şekilde <ol>...</ol> veya <ul>...</ul> etiketleri arasına aldığımız listeyi bu sefer <dl>...</dl> arasına yazıyoruz. Yine parametre olarak <dl> etiketi içinde compact ifadesini kullanabiliriz.

Hemen örneğimize geçelim

Neler öğrendik?

<dl compact>

<dt>HTML nedir?

<dd>HTML (HyperText MarkupLanguage-Hareketli-Metin İşaretleme Dili) basitçe browserlarla görebileceğimiz internet dökümanları oluşturmaya yarayanbir çeşit dildir...

<dt>HTML'de Temel Unsurlar

<dd>Bu dilde binary veyahexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanıoluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editörbulunuyor. Birisi metin tabanlı kod yazmayı gerektiren...

<dt>Listeler

<dd>Sıralı listeler rakamveya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sırasızlisteler rakam/harf yerine madde imleri koyarak listeoluşturmamızı sağlar...