HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili)basitçe, browserlarla görebileceğimiz, internet dokümanları oluşturmaya yarayan bir çeşit dildir. Tanımda geçen "internet dokümanı" ifadesinin yanı sıra HTML ile oluşturduğunuz belgeleri hard diskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığız komutlar dizisi bile diyebiliriz HTML için.
HTML nispeten kolay bir dildir. Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dokümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un notepad'i ile dahi halledebilirsiniz.
<html>
<head>
<title>Ilk Sayfam</title>
</head>
<body>Sayfama Hosgeldiniz</body>
</html>
Burada kullandığımız etiketler ve anlamları söyle:
<html>....</html>
Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.
<head>....</head>
<body>....</body>
Bir HTML belgesi iki bölüme ayrılıyor: head(bas) ve body(gövde). <head>....</head> etiketleri arasına sayfa hakkında bilgiler yazıyoruz. Meta ve title gibi etiketler burada yer alıyor. <body>....</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu taglar arasında yer alıyor.
<title>....</title>
Title sayfanın başlığını belirtiyor. Burada yazılanlar browser'in üst tarafında browser adıyla beraber gösteriliyor.
Bu bölümde öğreneceğimiz etiketler:
•Başlık
<h1>...<h6>
•Paragraf
<p>...</p>
•Ortalama
<center>...</center>
•Diğer
<b>...</b>,<i>...</i>,<u>...</u>
HTML'de metin stillerini üç şekilde belirleyebiliriz:
Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (ayni satırda) biçimlendirme denir.
Sayfanın head (bas) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme)
HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.
Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metotlar da stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar.
Diğer kodlara bir göz atalım:
<center>....</center> Aradaki metinleri sayfaya göre ortalar. center)
<b>....</b> Aradaki metni koyu (bold)yazar.
<i>....</i> Aradaki metni eğik (italic) yazar.
<u>....</u> Aradaki metni altı çizili (underline) olarak yazar.
<h1>....<h6> Başlık (heading) etiketi. h1 en büyük, h6 en küçük.
<p>....</p> Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin bir satir boşluk bırakılarak ve satir başına yazılır.
Başladığınız etiketi sonlandırmayı sakin unutmayın !
Font etiketinin kullanımı;
<font face=.... size=.... color=....> </font>
face=yazı tipinin adi (arial, tahoma, verdana, ...)size= yazının büyüklüğü (1-7 arası)
color= yazının rengi (red, green gibi renklerin ingilizce karsılığı yada RGB renk değeri)
Bunlara font etiketinin parametreleri deniyor. <font> etiketinin yan ısıra öğreneceğimiz bir diğer etiket <br> etiketi. Önce bu etiketin kullanımını göreceğiz. <br> 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 fark etmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini kullanıyoruz. İstisnai etiketlerden birisi bu, <br> etiketi sonlandırılmıyor.
Simdi 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'in 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.
Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik. Simdi daha ayrıntılı olarak ve bu isin mantığına inerek yeniden ele alacağız. Ayni zamanda sayfamıza artalan rengi vermeyi öğreneceğiz.
Bu bölümde öğreneceğimiz konular:
· Renk kodları
· Artalanı renklendirmek Renk kodları
Fontlar konusunda, metnin rengini belirlerken <font color=...> etiketini kullanmıştık ve color komutunun karşısına rengin İngilizce karşılığını yazabiliriz demiştik. Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lik sayı düzeninde renk kodu girmek. Önce sayı düzenleri nedir nasıl olur ona bakalım.
Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz. 10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır. Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılık (hexadecimal) sayı sistemleridir.
Gelelim asil konumuz olan 16'lik sayı sistemine. Bu sayı sisteminde de toplam 16 rakam var bunlar;
|
0 1 2 3 4 5 6 7 8 9 A B C D E F
[10'un karşılığı A ... 15'in karşılığı F'dir.]
Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kirmizi-yesil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden her birinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). Buna göre; #000000 siyah, #FF0000 kirmizi, #00FF00 yesil, #0000FF mavi, #FFFFFF beyaz'dir. diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
#000000=black(siyah) #000080=navy(lacivert)
#0000FF=blue(mavi) #008000=green(yesil)
#008080=teal(koyu yesil) #00FF00=lime(parlak yesil)
#00FFFF=aqua(turkuaz) #800000=maroon(visne çürügü)
#800080=purple(mor) #808000=olive(zeytuni yeşil)
#808080=gray(gri) #C0C0C0=silver(gümüşî gri)
#FF0000=red(kırmızı) #FF00FF=fuchsia(parlak pembe)
#FFFF00=yellow(sari) #FFFFFF=white(beyaz)
Bu renklerle yalnızca metinleri değil sayfamızın artalanını da renklendirebiliriz.
Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> seklinde değiştiriyoruz.
Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !
<body bgcolor="#ffcc00">
<font type="verdana" size="4" color="#ffffff">
<ol><h2><u>Günler</u></h2>
<font color="#0000ff"><li>Pazartesi <li>Sali <li>Çarsamba <li>Persembe <li>Cuma</font>
<font color="ff0000"> <li>Cumartesi <li>Pazar </font>
</ol>
</font>
</body>
