En son web geliştirme öğreticiler

HTML(5) Style Guide and Coding Conventions

❮ Önceki Sonraki Bölüm ❯

HTML Kodlama Kuralları

Web geliştiricileri genellikle HTML kullanmak kodlama tarzı ve sözdizimi hakkında belirsizdir.

2000 ve 2010 yılları arasında birçok web geliştiricileri HTML XHTML dönüştürülür.

XHTML ile geliştiriciler geçerli yazmak zorunda kaldılar ve "well-formed" kod.

o doğrulama kodu geldiğinde HTML5 biraz daha özensiz.

HTML5 ile kendi İyi Uygulama, Stil Kılavuzu ve Kodlama Sözleşmeleri oluşturmalısınız.

Akıllı ve Geleceğe Uyumlu olun

tarzı bir izleyen kullanımı daha kolay başkalarının anlamak ve HTML kullanmak için yapar.

Gelecekte, XML okuyucular gibi programlar, HTML okumak isteyebilirsiniz.

Iyi biçimlenmiş kullanma "close to XHTML" sözdizimi, akıllı olabilir.

Her zaman, akıllı düzenli, temiz ve iyi biçimlendirilmiş tarzınızı tutun.

Doğru Belge Türü kullanın

Her zaman belgede ilk satırı olarak belge türü bildirmek:

<!DOCTYPE html>

Eğer küçük harf etiketleri ile tutarlılık istiyorsanız, kullanabilirsiniz:

<!DOCTYPE html>

Alt Kasa öğe adlarını kullanın

HTML5 eleman adlarında büyük ve küçük harf karıştırma sağlar.

Biz küçük eleman adlarını kullanarak tavsiye:

  • büyük ve küçük isimleri Karıştırma kötü
  • Geliştiriciler küçük isimleri kullanılarak kullanılır (as in XHTML)
  • Küçük harf görünüm temizleyici
  • Küçük harf yazmak daha kolaydır

Kötü:

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

Çok Kötü:

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

İyi:

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

Kapat Tüm HTML Elemanları

HTML5, sen tüm unsurları kapatmak gerekmez (for example the <p> element) .

Hepimiz HTML öğelerini kapatmanızı öneririz:

Kötü bakıyor:

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

İyi görünüyor:

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

Yakın Boş HTML Elemanları

HTML5, boş unsurları kapatmak için isteğe bağlıdır.

Bu izin verilir:

<meta charset="utf-8">

Bu aynı zamanda izin verilir:

<meta charset="utf-8" />

Eğik çizgi (/) XHTML ve XML gereklidir.

XML yazılım sayfasına erişmek için bekliyorsanız, bunu tutmak için iyi bir fikir olabilir.

Kullanım Küçük Harf Öznitelik Adları

HTML5 özellik adlarında büyük ve küçük harf karıştırma sağlar.

Biz küçük özellik adları kullanıyor tavsiye:

  • büyük ve küçük isimleri Karıştırma kötü
  • Geliştiriciler küçük isimleri kullanılarak kullanılır (as in XHTML)
  • Küçük harf görünüm temizleyici
  • Küçük harf yazmak daha kolaydır

Kötü bakıyor:

<div CLASS="menu">

İyi görünüyor:

<div class="menu">

Alıntı Özellik Değerler

HTML5 tırnak işareti olmadan öznitelik değerlerini verir.

Biz öznitelik değerlerini alıntı öneririz:

  • Sen değer boşluk içeriyorsa tırnak kullanmak zorunda
  • stilleri Karıştırma iyi asla
  • Alıntı değerler okumak daha kolaydır

değer boşluk içerdiğinden bu, çalışmaz:

<table class=table striped>

Bu çalışacaktır:

<table class="table striped">

Görüntü Nitelikler

Daima kullanmak alt görüntülerle niteliğini. görüntü görülemez zaman önemlidir.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Her resim boyutu tanımlar. yüklenmeden önce tarayıcı görüntüler için yer ayırabilir çünkü titreyen azaltır.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">

Spaces ve Eşit İşaretler

eşit işaretinin etrafında Spaces yasaldır:

<link rel = "stylesheet" href = "styles.css">

Birlikte daha iyi Ama uzay-az, okumak daha kolaydır ve gruplar varlıklar:

<link rel="stylesheet" href="styles.css">

Uzun Kod Çizgiler kaçının

HTML düzenleyici kullanırken, sağa kaydırmak ve HTML kodunu okumak için sola doğru sakıncalıdır.

80 karakterden uzun kod satırları kaçının.

Boş Hatları ve Girinti

sebepsiz boş satırlar eklemeyin.

Okunabilir olması için, büyük ya da mantıksal kod blokları ayırmak için boş satır ekleyin.

Okunabilir olması için girinti 2 boşluk ekleyin. TAB kullanmayın.

Gereksiz boş satırlar ve girinti kullanmayın. Kısa ve ilgili öğeler arasındaki boş satırlar kullanmak gerekli değildir. Her eleman girinti gerekli değildir:

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 Örnek:

<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 Örnek:

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

Atlanması, <html> ve <body> ?

HTML5 standardında, <html> etiketi ve <body> etiketi atlanabilir.

Aşağıdaki kod HTML5 olarak doğrular:

Örnek

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Kendin dene "

Biz atlayarak önermiyoruz <html> ve <body> etiketleri.

<html> eleman belge köküdür. Bu sayfa dilini belirtmek için önerilen bir yerdir:

<!DOCTYPE html>
<html lang="en-US">

Bir dil bildirme erişilebilirlik uygulamaları için önemlidir (screen readers) ve arama motorları.

Belirtilmemesi <html> veya <body> DOM ve XML yazılımını çökmesine sebep olabilir.

Atlanması, <body> eski tarayıcılarda hataları üretebilir (IE9) .

Atlanması, <head> ?

HTML5 standardında, <head> etiketi de atlanabilir.

Varsayılan olarak, tarayıcılar önce tüm unsurları katacak <body> bir varsayılan, <head> öğesi.

Sen atlanması ile HTML karmaşıklığını azaltabilir <head> etiketi:

Örnek

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>
Kendin dene "

etiketleri atlama web geliştiricileri için yabancı. Bu bir rehber olarak kurulacak zamana ihtiyacı vardır.

Meta Veri

<title> öğesi HTML5 gereklidir. Mümkün olduğunca anlamlı başlığını yapın:

<title>HTML5 Syntax and Coding Style</title>

Uygun yorumunu ve doğru arama motoru indeksleme, dil ve karakter kodlaması bir belgede mümkün olduğunca erken tanımlanması gerektiğini hem sağlamak için:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML Yorumlar

Kısa yorumlar arkasına boşluk, tek bir satırda yazılmalıdır <!-- and a space before --> :

<!-- This is a comment -->

Uzun açıklamalar, birçok çizgilere sahip olan yazılmalıdır <!-- and --> ayrı satırlara:

<!--
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

Onlar 2 boşluk edilmek istendiğinde Uzun yorum, gözlemlemek daha kolaydır.

Stil Sayfaları

Stil sayfaları bağlamak için basit bir sözdizimi kullanın (the type attribute is not necessary) :

<link rel="stylesheet" href="styles.css">

Kısa kurallar böyle, tek bir satırda, sıkıştırılmış yazılabilir:

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

Uzun kurallar satırdan fazla yazılmalıdır:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • seçici olarak aynı hat üzerinde parantezi yerleştirin.
  • Açılış parantezi önce bir boşluk kullanın.
  • Girintinin 2 boşluk kullanınız.
  • kolon artı her özellik ve değeri arasında bir boşluk kullanın.
  • Her virgül veya noktalı virgül sonra boşluk kullanın.
  • Geçen dahil her özellik değer çifti sonra noktalı virgül kullanın.
  • değer boşluk içeriyorsa Sadece değerler etrafında tırnak kullanabilirsiniz.
  • önde gelen boşluksuz, yeni bir satırda kapama desteğini yerleştirin.
  • 80 karakterden daha uzun satırları kaçının.

virgül ya da noktalı virgül sonra boşluk bırakıp, yazı her tür genel bir kuraldır.

HTML JavaScript yükleniyor

Harici komut yüklenmesi için basit bir sözdizimi kullanın (the type attribute is not necessary) :

<script src="myscript.js">

JavaScript ile HTML Elementleri erişme

Kullanmanın bir sonucu "untidy" HTML stilleri, JavaScript hatalara neden olabilir.

Bu iki JavaScript ifadeleri farklı sonuçlar üretecektir:

Örnek

var obj = getElementById("Demo")

var obj = getElementById("demo")
Kendin dene "

Mümkünse, aynı adlandırma kuralı kullanmak (as JavaScript) HTML.

JavaScript Stil Kılavuzu'na ziyaret .

Küçük Harf Dosya Adları kullanın

Çoğu web sunucuları (Apache, Unix) dosya adları hakkında küçük harf duyarlıdır:

London.jpg London.jpg olarak erişilemez.

Diğer web sunucuları (Microsoft, IIS) küçük harfe duyarlı değildir:

London.jpg London.jpg veya London.jpg olarak erişilebilir.

Eğer büyük ve küçük harf karışımı kullanıyorsanız, son derece tutarlı olmalıdır.

Eğer bir harf duyarlı sunucuya duyarsız bir durumda, gelen taşırsanız, hatta küçük hatalar web kıracak.

Bu sorunları önlemek için, her zaman küçük harf dosya adlarını kullanan (if possible) .

Dosya Uzantıları

HTML dosyaları bir .html uzantılı olmalıdır (or .htm ) .

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

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

.htm ve .html Arasındaki Farklar

.htm ve .html uzantıları arasında hiçbir fark yoktur. Hem herhangi bir web tarayıcı veya web sunucusu tarafından HTML olarak ele alınacaktır.

farklılıklar kültürel şunlardır:

.htm "smells" sistemi 3 karakter uzantıları sınırlı erken DOS sistemlerinin.

.html "smells" Bu sınırlama yoktu Unix işletim sistemlerinin.

Teknik farklar

Bir URL bir dosya adı belirtmiyor zaman (like http://www.w3ii.com/css/) , sunucu varsayılan dosya adını döndürür. Ortak varsayılan dosya adları index.htm, default.html'dir ve default.htm'dir index.html vardır.

Sunucu yalnızca ile yapılandırılmışsa "index.html" varsayılan dosya adı olarak, dosya adlandırılmış olması gerekir "index.html" değil, "index.htm."

Ancak sunucuların birden fazla varsayılan dosya adı ile yapılandırılabilir ve gerektiğinde normalde gibi birçok varsayılan dosya adlarını ayarlayabilirsiniz.

Neyse, HTML dosyaları için tam uzantısı .html olduğunu ve kullanılmamalıdır neden yok.


❮ Önceki Sonraki Bölüm ❯