Bu yazımızda sizlere HTML ile kodlarımızı yazarken bilmemiz gereken temel kuralları, kodlama düzenlerini ve yapmamanız gereken hataları ayrıntılı bir şekilde göstereceğim.
İçindekiler
HTML Kodlama Kuralları
Dosya türü belirtmek zorunludur
Özellikle HTML dökümanıyla çalışma yaparken, dosya türünü belirtmemiz gerekmektedir. Bu aynı zamanda web sitemizde temel düzen üzerinde çalışırken kullanılmak zorundadır.
1 | <!DOCTYPE html> |
HTML dilini belirtmeniz gerekmektedir
Web sayfasının dilini bildirmek için her zaman lang niteliğini html etiketinin içine dahil etmelisiniz. Bu, arama motorlarına ve tarayıcılara yardımcı olmak içindir.
1 | <html lang="tr"> |
Sayfa başlığını mutlaka eklemelisiniz
Sayfanızın ve sitenizin başlığını belirtmelisiniz. SEO açısından size oldukça fazla getirisi olacaktır.
1 | <title>HTML Kodlama Kuralları</title> |
Etiketler küçük harfle yazılmalıdır
Kodlarmızın etiketlerini yazarken küçük harf kullanmamız gerekmektedir.
1 2 3 4 5 6 7 8 | <html> <head> <title>Kod Kampüsü</title> <body> <h1>Merhaba dünya</h1> </body> </head> </html> |
1 2 3 4 5 6 7 8 | <HTML> <HEAD> <TITLE>Kod Kampüsü</TITLE> <BODY> <H1>Merhaba dünya</H1> </BODY> </HEAD> </HTML> |
Etiketler mutlaka kapatılmalıdır
Kullandığımız etiketleri sonunda mutlaka kapatmamız gerekmektedir.
1 | <h1> Kod Kampüsü </h1> |
1 | <h1> Kod Kampüsü |
Nitelemeler küçük harfle yazılmalıdır
href, src gibi nitelemeler küçük harfle yazılmalıdır.
1 2 | <a href="https://link">Kod Kampüsü</a> <img src="logo.png"/> |
1 2 | <a HREF="https://link">Kod Kampüsü</a> <img SRC="logo.png"/> |
Class ve ID isimleri tırnak işareti içinde yazılmalıdır
1 2 | <p class="paragraf1">Kod Kampüsü</p> <p id="paragraf1">Kod Kampüsü</p> |
1 2 | <p class=paragraf1>Kod Kampüsü</p> <p id=paragraf1>Kod Kampüsü</p> |
Resimlere değer eklemek
Sitenize eklediğiniz resimlere her zaman için title, alt değerlerini belirtmelisiniz. SEO açısından size faydası olacaktır.
1 | <img src="manzara.jpg" alt="Manzara fotoğrafı" title="Manzara fotoğrafı"/> |
1 | <img src="manzara.jpg"/> |
Etiketler arası boşluk işareti kullanmayın
HTML, etiketleri yazarken aslında boşluklara izin verir. Ancak boşluk olmadan yazılması, okunmayı daha kolay kılar ve varlıkları birlikte daha iyi gruplandırmaya olanak sağlar.
1 | <font color="red" size="2" face="Arial">Kod Kampüsü</font> |
1 | <font color = "red" size = "2" face = "Arial">Kod Kampüsü</font> |
Uzun kod satırları yazmaktan kaçının
Sebepsiz yere etiketler arası koyulan boş satırlar, boşluklar veya girintiler eklemeyin. Okunabilirlik için, büyük veya mantıksal kod bloklarını ayırmak için boş satırlar ekleyin. Okunabilirlik için iki girinti boşluğu ekleyin. Sekme tuşunu kullanmayın.
1 2 3 4 | <h1>Kod Kampüsü HTML Dersleri</h1> <h3>HTML Kodlama Kuralları</h3> <p>Bu yazımızda sizlere HTML Kodlama kurallarını gösterdik.</p> |
1 2 3 4 5 6 7 | <h1>Kod Kampüsü HTML Dersleri</h1> <h3>HTML Kodlama Kuralları</h3> <p> Bu yazımızda sizlere HTML Kodlama kurallarını gösterdik. </p> |
Çok detaylı bir anlatım olmuş bilginize sağlık Allah zeval vermesin bu şekilde devam ediniz