HTML'e Giriş
HTML'e başlarken bilinmesi gerekenler
HTML'e başlarken önce HTML'in ne olduğunu ne işe yaradığını bilmeniz gerekir, HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir, tarayıcılar (opera,internet explorer,mozilla,chrome) tarafından okunabilen (*.htm, *.html) dosyaları oluşturmada kullanılan kodlama diline verilen isimdir.
Tüm bu dosya çeşitlerine genel anlamda HTML'e deriz bir HTML dosya uzantısı .htm ya da .html olabilir kısaca text dosyası diyebiliriz uzantısının değişik olması sadece tarayıcının onu bir web sayfası gibi yorumlaması içindir.
Bir HTML dosyası içinde tarayıcının yorumlaması için etiketler bulunur bu etiketler <> karakterleri arasına yazılır karakterler dışına yazılmış herşey tarayıcı tarafından bir metin olarak yorumlanıp sayfada görünür.
HTML dosyası oluşturmak için gerekenler
Bir HTML dosyası oluşturmak için öyle megabaytlar'ca büyüklükte bir programa gerek yoktur Not Defteri yeter aslında hadi kodları biraz daha anlaşılır görebilmemiz için Notepad++ programı diyelim bunların yanı sıra Adobe Dreamweaver benzeri programlar da kullanılabilir benim önerim Notepad++ cünkü hem kodları renkli gösterip etiket isimlerinde hata yapma olasılığını ortadan kaldırıyor hem de küçük boyutu ve hızlı olması ayrıca da sağ tık menümüzde bulunması büyük kolaylık sağlıyor.
HTML dosyası kuralları nelerdir
Kurallar bazen can sıkıcıdır ancak burda da temel kurallar var
Bir etiket <etiketadı> şeklinde başlar ve mutlaka </etiketadı> şeklinde kapatılmalıdır kapatma etiketi başlangıç etiketine sadece / eklenerek tamamlanır.
Etiketler kapatma etiketi sıralaması karışmadığı sürece iç içe yazılabilir <etiket1><etiket2><etiket3></etiket3></etiket2></etiket1> gibi ilk açılan etiket en son kapatılmalıdır.
Dosyanın en başında <!DOCTYPE> kullanılır bu bildirim bir HTML etiketi değildir sadece tarayıcıya biçimlendirme dili kurallarını belirler HTML'de eskimiş ve yeni eklenmiş etiketler vardır bazen eski etiketler can sıkıcı olabilir mesela <!DOCTYPE html> dosya içindeki etiketlerin HTML5'e göre yazıldı anlamında kullanılır ve <!DOCTYPE html> kullanıldıysa <meta http-equiv="Content-type" content="text/html; charset=utf-8"> kullanılamaz kullanılırsa hata almayız elbet ancak bunun yerine <meta charset="utf-8"> kullanmalıyız kısaca kodlarımızın hangi HTML sürümüne uygun olduğunu belirtir.
Devamında <html> kullanılır bu etiket HTML kodlarımızın başlangıcını belirtir tarayıcı bu etiketten başlayıp </html> etiketine kadar geçen kodları yorumlayacaktır.
<html> ile </html> etiketi arasında <head></head> tiketleri kullanılır <head></head> arasında site başlığı, karakter seti, ve dahil edilecek dış dosyalar yazılır CSS ve javascript dosyaları buraya dahil edilir buradakiler tarayıcı penceresinde görüntülenmez.
<head></head> etiketlerinden sonra <body></body> etiketi kullanılır tarayıcı penceresinde yani sayfa içinde görünecek olan içerik burada yer alır.
Html kodları arasına bazen not düşmek isteriz bu sayede ilerdeki zamanlarda kodlarımıza müdahale etmek gerektiğinde takılabileceğimiz yerlere eklediğimiz bu açıklamalar bize yardımcı olacaktır <!-- --> arasına yazılır ve sayfaya buraya yazılanlar yansımaz <!-- Not düşmek istenilen yazı.. --> şeklinde yazılır..
Hadi ilk HTML dosyamızı yazalım
<!DOCTYPE html>
<html>
<head>
<title>Sayfa başlığı</title>
</head>
<body>
Merhaba HTML bu benim ilk dersim!
</body>
</html>KopyalaOkuduklarımızı kodlarla tekrar anlayalım
- <!DOCTYPE html> tarayıcıya biçimlendirme dili kurallarını belirttik.
- <html> HTML kodları burada başlıyor dedik.
- <head> Başlık bilgileri burada başlıyor dedik
- <title> Sayfa başlığını belirtmek için kullandık ve bitiminde </title> ile kapattık.
- </head> Başlık bilgileri burada bitti dedik ve kapattık
- <body> tarayıcı penceresinde yani sayfa içinde görünecek olan içerik burada başlıyor dedik.
- Merhaba HTML bu benim ilk dersim! diyerek yasfaya bu yazıyı yazdırdık.
- </body> sayfa içinde görünecek olan içerik burada bitti.
- </html> HTML kodlarımızın burada bittiğini belirttik.
