kaçınılmaz html hataları

24 / 06 / 2009

ekleyen: Emre Çevik kategori: genel| ipuçları| tasarim

En çok kullanılan bazı html yanlışları.

#1 Benzer ID’ler

Yanlış

1 2	<div id="someName">Information</div> <div id="someName">Other information</div>

Doğru

1 2	<div id="information">Information</div> <div id="otherInfo">Other information</div>

#2 Alt etkiketi kullanmamak

Yanlış

1	<img src="image.jpg" />

Doğru

1	<img src="image.jpg" alt="image alt tag" />

#3 onClick kullanımı

Yanlış

1	<a href="#" onclick="popup();">Click Here</a>

Doğru

<a href="popup.html" rel="external">Click Here</a>
 
<script type="text/javascript" charset="utf-8">
    $('a[rel="external"]').click( function() {
        popUp($(this).attr('href'));
        return false;
    });
 
    function popUp(URL) {
        day = new Date();
        id = day.getTime();
        eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=520,height=420');");
    }
</script>

#4 Satıriçi Stiller

Yanlış

1	<div id="name" style="color:blue;">Text</div>

Doğru

<div id="name">Text</div>
<style type="text/css" media="screen">
    #name{
        color:blue;
    }
</style>

#5 <p> yerine <b> kullanmak

Yanlış

<p>
    This is a paragraph.<br /><br />
    This is another paragraph.
</p>

Doğru

1 2	<p>This is a paragraph.</p> <p>This is another paragarah.</p>

#6 <b>, <i>, <center>

Yanlış

1
2
3

<b>Bold Text</b>
<i>Italic Text</i>
<center>Centered Text</center>

Doğru

<strong>Bold Text</strong>
<em>Italic Text</em>
<div id="centered">Centered Text</div>
<style type="text/css" media="screen">
    #centered{
        text-align:center;
    }
</style>

#7 Doctype

Yanlış

<html>
    <head><!--Header Info Here--></head>
    <body><!-- Body Info Here--></body>
</html>

Doğru

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head><!--Header Info Here--></head>
    <body><!-- Body Info Here--></body>
</html>

#8 Header resmi

Yanlış

1	<img src="Header.jpg" alt="Header title" title="Header title" />

Doğru

<h1 class="Header">Header Title</h1>
 
<style type="text/css" media="screen">
    h1.Header{
        /*
        Add css to hide text and display background image.
        */
    }
</style>