HtmL Nedir NasıL KuLLanıLır

Konu: HtmL Nedir NasıL KuLLanıLır C.tesi Nis. 03, 2010 2:07 pm

HtmL Nedir NasıL KuLLanıLır

HTML Nedir?
HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.

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. Basittir çünkü, internette gezinirken görüntülediğiniz sayfaların hazırlanırken kullanılan teknikleri öğrenmemiz mümkündür (Sayfanın üzerinde farenizin sağ tuşuna bastıktan sonra Kaynağı Görüntüle seçeneği ile). Beğendiğiniz tasarımları kendi sayfanızda kullanabilir, bu tasarımların hangi html kodları kullanılarak yapıldığını öğrenebilirsiniz. Yaratıcılığa fazla açık değil dedim çünkü html ile yazdığınız sayfalar PHP, ASP, ColdFusion, CGI... 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 ya da DOS-Edit, Linux altında pico, joe ya da vi gibi metin düzenleyicileri yeterlidir. HTML sayfalarınızı kod yazmaksızın FrontPage, Netscape Composer 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 (İleriki bölümlerde değineceğim Dinamik Web Tasarımı için HTML’nin kod düzeyinde bilinmesi gereklidir!).

HTML'ye Giriş
İçindekiler

1. HTML Etiketleri

Kod:

Kod:: 1.1. <html> </html>
1.2. <head> </head>
1.3. <body> </body>
1.4. <title> </title>
1.5. <center> </center>
1.6. <hx> </hx> Başlık Etiketleri
1.7. , , <s> </s>, , <big> </big>, , <tt> </tt>
1.8. , 
1.9. <hr>
1.10. ve 
1.11. <pre> </pre>
1.12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
1.13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>
1.14. <img>
1.15. <a> </a>
1.16. 
1.17. <acronym> </acronym>
1.18. <****> </****>
1.19.

2. Basit Bir HTML Dosyası Örneği
3. **** Etiketi ile Yönlendirme Örneği
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.

Kod:

Kod:

Kod:: <etiket1>...Burası etiket1’in yorum aralığı...</etiket>
<etiket2>
....Burası etiket2’nin yorum aralığı...
....
<etiket3>...Burada etiket3 tanımlı...</etiket3>
...Etiket2 hala tanımlı...
...
</etiket2>

Görüldüğü gibi en son, etiket2 </etiket2>etiketi ile kapatılıyor. Dikkat ederseniz değişik etiketler birbirlerinin içinde kullanılabiliyor. Yani açık etiketin içinde başka bir etiket açıp istediğiniz işlemi gerçekleştirebiliyorsunuz. Etiketin bitiş işaretini (</etiket ismi>) vermediğiniz sürece o etiket tanımlı olarak işlem görür.

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

HTML Etiketleri
İçindekiler

Kod:

Kod:

Kod:: . <html> </html>
1.2. <head> </head>
1.3. <body> </body>
1.4. <title> </title>
1.5. <center> </center>
1.6. <hx> </hx> Başlık Etiketleri
1.7. , , <s> </s>, , <big> </big>, , <tt> </tt>
1.8. , 
1.9. <hr>
1.10. ve 
1.11. <pre> </pre>
1.12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
1.13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>
1.14. <img>
1.15. <a> </a>
1.16. 
1.17. <acronym> </acronym>
1.18. <****> </****>
1.19.

<html> </html>
Daha öncede belirttiğim gibi html kodlarının yorum aralığını başlatmak için bu etiketi kullanırız. Sayfamızın head ve body bölümleri bu etiketin yorum aralığında tanımlıdır

Kod:

Kod:: 1 <html>
2 <head>... head etiketinin içeriği ....</head>
3 <body>
4 ....
5 body etiketinin içeriği
6 ....
7 </body>
8 </html>

Birinci satırda <html> etiketi ile HTML sayfamıza başlıyoruz. Daha sonra <head> ve <body> etiketleri <html> etiketi içerisinde tanımlanıp içerikleri yazılıyor. En son olarak da </html> etiketi ile HTML sayfamızı bitiriyoruz.

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.

Kod:

Kod:

Kod:: <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 **** etiketi bu etiketin yorum alanında tanımlanır

kod:

Kod:: <html>
<head>
<title>.....</title>
</head>
<body>
....
body etiketinin içeriği
....
</body>
</html>

Kod:

Kod:: <body> </body>

Tablo 1.1. Body etiketinin bileşenleri

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.

Yukarıdaki tabloda kullandığım renk değeri HTML içinde kullanılan renk kodlarını temsil etmektedir. Altı basamaktan oluşan bu renk kodları ana renkler olan mavi, sarı ve kırmızının kullanılan renkteki tonuna göre onaltılık tabanda sayılarla istediğimiz rengi elde edebiliriz.

» Rüya Nedir?
» Uyku Nedir?
» Karabasan nedir?
» Tenis Nedir?
» BADMİNTON nedir