HTML NEDİR?
HTML'nin Yapısı : Daha öncede söylediğim gibi html dosyaları sadece düz yazı dosyalarıdır. HTML öğrenmesi oldukça basit ve yaratıcılığa fazla açık olmayan bir dildir. Yaratıcılığa fazla açık değil dedim çünkü html ile yazdığınız sayfalar PHP, ASP, ColdFusion, CGI vb. gibi web programlama dilleri kullanılmadan statik html dışına çıkamaz.
HTML kodlarını yazmak için özel bir düzenleyiciye ihtiyacınız yoktur. Bu iş için Windows altında NotePad veya DOS-Edit, Linux altında pico, joe veya vi gibi metin düzenleyicileri yeterlidir. HTML sayfalarınızı kod yazmaksızın FrontPage, Netscape Composer, Dreamweaver gibi programlarla da hazırlayabilirsiniz. Yalnız bu programlar kullanılarak hazırlanan sayfalar genellikle belli bir çerçeve içinde olduğu için zaten dar olan HTML’nin üreticilik alanını daha da daraltmaktadır. Bunun yanı sıra HTML’yi kod düzeyinde bilmenin kullanıcıya her zaman fayda getireceği de unutulmamalıdır.
HTML bir programlama dili değildir. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML belgesi ise, başlı başına verinin kendisidir. HTML veriler içine yerleştirilen "tag" parçaları, metnin, dolayısıyla belgenin, okuyan tarayıcı (browser)tarafından verileri nasıl işleyeneceğini belirler.
Geleneksel yayıncılıkta, yazar içeriği editöre verir ve editör bu içeriği düzenleyerek, basım için hazırlar. En son işlem olarak belge basılır. Bu işlem Web ve HTML yardımı ile yazar ve editör aynı kişidir ve oluşturulan belgeler Web server üzerinden yayınlanır. Bir başka fark, yapılan iş okuyuculara dağıtılmaz, okuyucular tarafından ziyaret edilir. Yaratılan belgeler okuyucunun tarayıcısında, bilgisayarın ortamına göre ve yaratıcının istediği şekilde görüntülenir.
HTML'ye Giriş : Etiket, HTML dosyasında kullanılan komutlara verilen addır. HTML içinde kullanılan tüm etiketler “<” işareti ile başlar ve “>”ile biter. Ayrıca etiketin yorum aralığı da “</etiket ismi>” kalıbı ile bitirilir. Aşağıda etiket kullanımına kısa bir örnek verdim.
<html> </html> : Daha öncede belirttiğim gibi html kodlarının yorum aralığını başlatmak için bu etiketi kullanırız.
<head> </head> : Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir. Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da arama motorlarına bilgi sağlamak için oluşturulan META etiketi bu etiketin yorum alanında tanımlanır.
< body> </body> : HTML dosyamız içindeki en geniş içerikli etiket budur. Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel özelliklerini belirtebiliriz.
<title> </title> : Sayfamızın başlık bilgisi bu etiket altında yer alır. Bu etiket head etiketi içinde kullanılmak zorundadır.
<center> </center> : Ekran çıktılarını browser penceresine ekranı ortalayacak şekilde basar. Normal şartlarda HTML sola dayalı olarak çıktı verecektir.
<hx> </hx> : Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı <H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.
<b> </b> : Yazı tipinin Kalın olarak yorumlanacağını belirten etiketdir.
<i> </i> : Yazı tipinin Eğik olarak yorumlanacağını belirten etiketdir.
<s> </s> : Yazı tipinin Üzeri Çizili olarak yorumlanacağını belirten etiketdir.
<u> </u> : Yazı tipinin Altı Çizili olarak yorumlanacağını belirten etiketdir.
<big> </big> : Yazı tipinin Büyük olarak yorumlanacağını belirten etiketdir.
<small> </small> : Yazı tipinin Küçük olarak yorumlanacağını belirten etiketdir.
<tt> </tt> : Yazı tipinin Daktilo Yazısı olarak yorumlanacağını belirten etiketdir.
<sub> </sub> : Formül ve benzeri metinleri yazarken Alt Simge görevi görür.
<sup> </sup> : Formül ve benzeri metinleri yazarken Üst Simge görevi görür.
<p> </p> : Paragraf oluşturmak için kullanılır.
<br> : BR etiketinin sonlandırıcısı (</br>) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır.
<hr> : Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur.
<pre> </pre> : Bir kod parçası, bir konsol ekranı alıntısı ya da bir ascii-art gibi içindeki boşlukların korunmasını gerektiren metinleri görüntülemek için kullanılır. Web istemciniz, tüm diğer etiketler için yorum aralığındaki fazladan boşluklarını gözardı ederek metni sarmaladığı halde <PRE> etiketinin yorum aralığındaki metnin boşluklarını olduğu gibi görüntüler.
<img> : Sayfamıza resim yerleştirmek için kullanılan etikettir.
<a> </a> : Bu etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız.
<font> </font> : HTML dosyası içinde yazdığımız yazıların ekrana nasıl bir çıktı vereceğini bu etiket ile belirleriz. Uyumlu yazı tipleri ve renkler ile sayfanıza güzelbir görünüm kazandırabilirsiniz.
<!-- --> : Bu etiket yorum aralığı olarak kullanılır. Bu kodun kullanım amacı HTML kodunun içine kullanıcıya görünmeyen açıklamalar yerleştirmektir.(İlk etapta işimize yaramasa bile tablo ve frame kullanarak hazırlanan karışık HTML dosyalarında çok yardımcı olacaktır.)
<frameset> </frameset> : Sayfamıza çerçeve desteği eklemek için kullanılan etikettir.
<frame name=”menu” src=”bilgiliyiz5.html” width=”600” height=”800” scrolling=”auto”>
| Girilecek Kod | Görevi |
| width = "değer" | Bir çerçevenin ekrandaki genişliğini verir. |
| height = "değer" | Bir çerçevenin ekrandaki yüksekliğini verir. |
| frameborder = "değer" | Çerçeveler arasında çizgi olup olmayacağı belirlenir |
| scrolling = "auto" | Kaydırma çubuğu için kullanılır. Auto, No, Yes diye 3 seçeneği vardır. |
<font face="tahoma" size="3" color="maroon"></font>
| Girilecek Kod | Görevi |
| face = "yazıtipi" | Kullanılacak yazı tipi belirlenir. |
| color = "renk" | Yazacağımız yazının rengi belirlenir. |
| size = "boyut" | Yazımızın boyu belirlenir. |
<a href=”http://www.bilgiliyiz5.tr.gg” target="_blank">Kod Sitesi</a> <a href="mailto:bilgiliyiz5@hotmail.com">İletişim</a>
| Girilecek Kod | Görevi |
| href = "URL" | Yorum alanındaki bileşene tıklandığında yorumlanacak adres. |
| target = "hedef" | Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir. |
| name = "isim" | Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır. |
| type = "mime_türü" | Hedefin içeriğini belirtmek için kullanılır. |
Bunların dışında resimleri de bağ olarak kullanabilme imkanımız var. Sayfamızda resimleri bağ olarak kullanabilmek için kullanmamız gereken kalıp aşağıdaki gibidir.
<a href=”www.bilgiliyiz5”><img src="../images/logo.png" border="0"></a> <a href=”www.bilgiliyiz5”><img src="../images/logo.png" border="1"></a>
<img src=”./resimler/banner.jpg” width=”250” height=”85” alt=”Html Kod Sitesi”>
| Girilecek Kod | Görevi |
| src = "resim_dosyası" | Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz. |
| width = "genişlik" | Resmin genişliği burada tanımlanır. |
| height = "yükseklik" | Resmin yüksekliği burada tanımlanır. |
| vspace="düşey_aralık" | Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı. |
| hspace="yatay_aralık" | Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı. |
| alt = "metin" | Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır. |
| border = "değer" | Resmin dışında çerçeve çizgisi olacaksa "1", olmayacaksa "0" değeri kullanılır. |
<body text="#000000" link="#808080" bgcolor="#334455" alink="#000000" topmargin="0"> <body text="#000000" background="www.bilgiliyiz5.tr.gg/resimler/arkafon.gif">
| Girilecek Kod | Görevi |
| text = “renk” | Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir. |
| link = “renk” | Sayfanızdaki bağların rengine renk ile belirtilen değeri verir. |
| vlink = “renk” | Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir. |
| alink = “renk” | Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir. |
| bgcolor = “renk” | Sayfanızın arka plan rengine renk ile tanımlı değeri verir. |
| background=“resim_dosyası” | Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, resim_dosyası kullanacağınız resmin adını temsil eder. |
| topmargin = “değer” | Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler. |
| leftmargin = “değer” | Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler. |
| rightmargin = “değer” | Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler. |
| onload = “betik” | Sayfa yüklenirken çalıştırılacak javascript betiğini belirler. |
| onunload = “betik” | Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler. |
<html>
<head>
<title>.....</title>
</head>
<body>
....
body etiketinin içeriği
....
</body>
</html>
Yazdığımız html dosyasının başında bu etiketin tanımlanmaması şu an kullanılan web istemciler açısından bir sorun oluşturmayacaktır. Fakat sitenizi ziyaret eden ziyaretçi eski bir istemci kullanıyorsa bu etiketi kullanmamanız bir takım sorunlar oluşturabilir (sonsuz uzunlukta sayfa gibi). En iyisi siz her html dosyasına başlarken ve bitirirken bu etiketi kullanın.
<etiket1>Burası etiket1’in yorum aralığı</etiket1> <etiket2> ... Burası etiket2’nin yorum aralığı ... <etiket3>Burada etiket3 tanımlı</etiket3> ... etiket2 hala tanımlı ... </etiket2>
Tüm HTML dosyaları <html> etiketi ile başlayıp </html> etiketi ile son bulur. Bunun yanında <html> etiketi ile <HTML> etiketi arasında hiçbir fark yoktur. Ancak etiketleri küçük harflerle yazmaya alışmanızı öneririm. İleride XHTML kodları yazmak zorunda kalabilirsiniz ve XHTML dilinde etiketlerin küçük harflerle yazılması zorunludur.
HTML dosyaları temel olarak iki bölümden oluşur. Bunlar HEAD (Başlık) ve BODY (Gövde) kısımlarıdır. Başlık kısmında ziyaretçiye görünmeyen, sayfa hakkında tanımlayıcı bilgiler bulunur. Gövde kısmı ise web sayfamızın ziyaretçiye görünen kısmını yani asıl kısmını oluşturur.