HTML5 Ders_6 Stil/Dizin Rehberi

HTML5 Kodlama Gelenekleri

Web geliştiricileri, HTML kodlama stilleri hakkında çok standart davranmazlar. Bu konuda, her yiğidin bir yoğurt yiyişi vardır diyebiliriz.

2000 ile 2010 yılları arasında, pek çok web geliştiricisi, html'den xhtml'e geçtiler. (XHTML'e göz atmak için tıklayınız.)

XHTML ile daha güçlü ve geçerli kodlar yazılmıştır.

HTML5, XHTML kurallarına göre biraz daha gevşektir.

HTML5 ile en güçlü ve düzenli kodlarınızı yazmaya çalışmalısınız.

Akıllı ve Geleceğe Dönük Olmak

Gerekli kodlama stillerini kullanmak, kodlarınız daha anlaşılır ve kullanışlı yapar.

Gelecekte, XML readers gibi programlar, kodlarınızı okumak isteyebilir.

İyi kodlanmış bir html dökümanı (xhtml gibi), akıllı olabilir.

Her zaman; akıllı, düzenli, temiz ve iyi biçimlenmiş kodlar yazın.

Her zaman ilk satırda döküman tipini belirtin: <!DOCTYPE html>

Küçük harf kuralına sadık kalmak isterseniz şöyle de yazabilirsiniz: <!doctype html>

Eleman Taglarında Küçük Harfler Kullanın:

HTML5; tag adlarında, büyük harfi de küçük harfi de kabul eder.

Fakat, uzmanlar, küçük harf kullanmamızı önerir.

Küçük harfler hem daha düzenli hem de daha kolay olur.

Kötü:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Daha kötü:

<Section>
<p>This is a paragraph.</p>
</SECTION>

İyi:

<section>
<p>This is a paragraph.</p>
</section>

Bütün Elemanların Taglarını Kapatın:

HTML5'de bütün tagları kapatmak zorunda değiliz.

Fakat bütün tagların kapatılması tavsiye edilir.

Kötü:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

İyi:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Boş Tagları da Kapatın:

Bitiş tagı olmayan html elemanlarını da kapatmak iyi bir alışkanlıktır:

Geçerlidir: <meta charset="utf-8">

Bu daha iyidir: <meta charset="utf-8" />

Slash (/), XML ve XHTML için zorunludur.

Tagların İçine Özellik Yazarken de Küçük Harf Kullanın:

HTML5; tag özelliklerinde, büyük harfi de küçük harfi de kabul eder.

Fakat, uzmanlar, küçük harf kullanmamızı önerir.

Küçük harfler hem daha düzenli hem de daha kolay olur.

Kötü: <div CLASS="menu">

İyi: <div class="menu">

Tagların Özelliklerine Değer Atarken Tırnak İşareti Kullanmak:

HTML5, özelliklere tırnaksız değerler atamamıza olanak tanır.

Fakat, değerleri tırnak içinde kullanmamız tavsiye edilir.

Eğer bir değer iki kelimeden oluşuyorsa, bu kelimeleri tırnak içine almadan aralarında boşluk bırakamayız.

Bu kod çalışmaz: <table class=tablo sinifim>

Bu kod çalışır: <table class=tabloSinifim>

Bu da çalışır: <table class="tablo sinifim"> (Tavsiye edilen budur)

Resim Özellikleri

Bir resim elemanında her zaman alt özelliğini kullanmalıyız. Bu resim yüklenemediği zaman önemlidir.

Resim elemanlarının width ve height özelliklerini mutlaka belirtmeliyiz. Bu, tarayıcı resmi yüklerken, titreşimlerin oluşmasına engel olur.

Boşluklar ve Eşittir İşareti

Eşittirin sağında veya solunda boşluklar bırakmakta bir sakınca yoktur:

Fakat, boşluk kullanmak tavsiye edilmez. Bu özelliklerin birbirinden ayrı daha derli toplu görünmesini sağlar.

Uzun Kod Satırlarından Sakının

Uzun kod satırları, kodlarımızın okunmasını zorlaştırır ve aradığımızı bulmakta sıkıntıya sebep olabilir.

80 karakterden daha uzun kod satırları tavsiye edilmez.

Boş Satırlar ve Girintiler

Sebepsiz yere boş satırlar bırakmamız tavsiye edilmez.

Okunabilirlik açısından, bıraktığımız boş satırların bir amacı olması gerekir.

Girinti oluşturmak için ise tab tuşunu değil, boşluk tuşuyla iki tane boşluk bırakmayı tercih etmemiz önerilir.

Boş satırlar veya girintiler, kodlarımızın okunurluğuna hizmet etmelidir. Bu yüzden bunları kullanmak biraz da hayal gücümüzle ilgilidir.

Gereksiz:

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

Daha iyi:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Tablo Örneği:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Liste Örneği:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

<html> ve <body> Taglarını İhmal Etme

HTML5 standartlarında, bu iki elemanı kullanmadan da döküman hazırlamamız mümkündür.

Aşağıdaki döküman geçerlidir:

<!DOCTYPE html>
<head>
<title>Sayfa Başlığı</title>
</head>

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>

Tabiki, <html> ve <body> elemanlarını kullanmamız tavsiye edilir.

<html> dökümanımızın kaynak elemanıdır. Bir html dökümanı şöyle başlamalıdır:

<!DOCTYPE html>
<html lang="tr">

lang="tr" özelliğini belirtmek, arama motorları ve ekran okuyucuları için önemlidir.

<head> Tagını İhmal Etme

HTML5 standartları, <head> tagına ihmal etmemize göz yumar.

Tarayıcılar, <body> elemanından önceki bütün elemanları otomatik olarak <head> elemanı sayar.

Şu döküman geçerlidir:

<!DOCTYPE html>
<html>
<title>Sayfa Başlığı</title>

<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>
</body>

</html>

Meta Bilgileri

<title> elemanı, HTML5 standartlarına göre gereklidir. Mümkün olduğunca anlamlı bir içerik barındırmalıdır.

<title>HTML5 Dizinleri ve Kod Stilleri</title>

Arama motoru indeksleri ve uygun bir yorumlama için, charset ve lang özellikleri mümkün olduğunca çabuk eklenmelidir:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Dizinleri ve Kod Stilleri</title>
</head>

HTML Yorumları

HTML yorumları, web tarayıcıların görmezden geldiği, kodu yazarlarının işini kolaylaştıran notlardır.

Bir htlm yorumu şöyle yazılır:

Bazı yorumlar ise birden çok satırı kaplayabilir:

<!--

Bu bir çok sartılık bir yorumdur Bu bir çok sartılık bir yorumdur Bu bir çok sartılık bir yorumdur Bu bir çok sartılık bir yorumdur Bu bir çok sartılık bir yorumdur Bu bir çok sartılık bir yorumdur Bu bir çok sartılık bir yorumdur
-->

Stil Sayfaları

Bir htlm dökümanında, bir CSS dosyasıyla bağlantı kurmak için şu kodlama yeterlidir:

CSS'in tek satırlık kısa kodlarının şu şekilde yazılması tavsiye edilir:

p.into {font-family: Verdana; font-size: 16em;}

Uzun CSS kodları ise şu şekilde tavsiye edilir:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

(Boşluklara ve parantezlerin pozisyonuna dikkat edelim.)

Bir virgülden veya bir noktalı virgülden sonra bir boşluk bırakmak genel bir alışkanlıktır.

HTML Dökümanına JavaScript Eklemek

Bir htlm dökümanında, bir javascript dosyasıyla bağlantı kurmak için şu kodlama yeterlidir:

HTLM Elemanına JavaScript ile Ulaşmak

Düzensiz html kodlaması, javascript kullanırken hatalarla karşılaşmamıza da sebep olur.

Aşağıdaki iki javascript kodu farklı sonuçlara sebep olacaktır:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Dosya İsimlerinde Küçük Harf Kullanalım

Bir çok web sunucusu (Apache, Unix), dosya isimleriyle ilgili, büyük/küçük harf ayrımı yapar (case sensitive).

dosya.jpg dosyası ile Dosya.jpg aynı değildir.

Diğer web sunucularında (Microsoft, IIS), büyük/küçük harf ayrımı yoktur.

Bütün dosya isimlerinde küçük harf kullanmak iyi bir alışkanlıktır.

Dosya Uzantıları

Html dosyaları, .html uzantılı olmalıdır. (.htm değil)

CSS dosyaları .css uzantılı olmalıdır.

JavaScript dosyaları .js uzantılı olmalıdır.

.html ve .htm Arasındaki Farklar

Aslında .html ve .htm uzantıları arasında bir fark yoktur. Her ikisi de taraycılarda, HTML dosyası olarak algılanır.

Aralarındaki fark kültüreldir:

.htm eski zamanlardaki DOS sistemlerinde var olan 3 harf uzantı kısıtlamasından kalan bir alışkanlıktır.

.html ise böyle bir kısıtlamaları olmadığı için unix sistemlerini anımsatan bir uzantıdır.

Bu iki uzantı arasında teknik olarak da şöyle bir fark vardır:

Bir URL, bir dosya adı içermiyorsa (şöyle ki: http://www.site.com.tr/klasorAdı/), server, bu dizindeki varsayılan dosya adına gider. Genel olarak varsayılan dosya adları ise şöyle ayarlanmış olur: index.html, index.htm, default.html veya default.htm
Eğer serverınız, varsayılan olarak sadece index.html ismine ayarlanmış ise bu durumda index.htm sayfanız sorun çıkaraktır.
Bunun yanında, serverler, genellikle birden fazla varsayılan dosya adı tanıyacak şekilde ayarlanmıştır. Bu yüzden siz de anasayfanız için birden fazla dosya hazırlayabilirsiniz
Sonuçta, bir HTML dosyasının uzantısı .html dir. Bunu kullanmamak için de bir sebebimiz yoktur.

DERSİMİZ KOD - HTML